:root {
  --hh-cream: #f3ece0;
  --hh-charcoal: #2b2622;
  --hh-terracotta: #c1613f;
  --hh-mustard: #d9a441;
  --hh-oat: #e9dfcf;
  --hh-terracotta-ink: #a34e30;
  --hh-charcoal-soft: #4a413a;

  --hh-bg: var(--hh-cream);
  --hh-text: var(--hh-charcoal);
  --hh-accent: var(--hh-terracotta);
  --hh-highlight: var(--hh-mustard);
  --hh-link: var(--hh-terracotta-ink);
  --hh-focus: var(--hh-terracotta-ink);
  --hh-muted: #6b6159;
  --hh-line: #d8cbb7;
  --hh-footer-bg: var(--hh-charcoal);
  --hh-footer-text: var(--hh-cream);
  --hh-footer-muted: #cfc5b6;
  --hh-footer-line: #4a423c;

  --hh-paper: #faf6ef;
  --hh-field-border: #8c7f73;

  --hh-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --hh-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --hh-gutter: clamp(1rem, 4vw, 3rem);
  --hh-max: 90rem;
  --hh-measure: 65ch;
}

body {
  background-color: var(--hh-bg);
  color: var(--hh-text);
  font-family: var(--hh-font-body);
}

p,
.page-content.page-cms ul {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--hh-font-heading);
  font-optical-sizing: auto;
  color: var(--hh-text);
}

a {
  color: var(--hh-link);
}

a:hover,
a:focus {
  color: var(--hh-terracotta-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: 0;
}

.form-control:focus,
.input-group.focus {
  outline: 2px solid var(--hh-focus);
  outline-offset: 0;
}

.input-group .form-control:focus {
  outline: 0;
}

.btn-primary {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal);
  border-color: var(--hh-charcoal);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal-soft);
  border-color: var(--hh-charcoal-soft);
  text-decoration: none;
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
  color: var(--hh-cream);
  background-color: var(--hh-muted);
  border-color: var(--hh-muted);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus {
  color: var(--hh-charcoal);
  background-color: var(--hh-oat);
  border-color: var(--hh-line);
}

.btn-outline-primary {
  color: var(--hh-charcoal);
  border-color: var(--hh-charcoal);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal);
  border-color: var(--hh-charcoal);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--hh-terracotta-ink);
}

.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item.active:focus,
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal);
  border-color: var(--hh-charcoal);
}

.btn:hover,
.btn:focus {
  text-decoration: none;
}

.hh-footer,
.hh-editorial {
  --hh-focus: var(--hh-mustard);
}

#wrapper {
  padding-top: 1.5rem;
  background-color: var(--hh-bg);
}

#wrapper .container,
.hh-footer .container {
  width: 100%;
  max-width: var(--hh-max);
  padding-inline: var(--hh-gutter);
}

#wrapper .breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

#wrapper .breadcrumb li a {
  color: var(--hh-link);
}

#wrapper .breadcrumb li a:hover,
#wrapper .breadcrumb li a:focus {
  color: var(--hh-terracotta-ink);
}

#wrapper .breadcrumb li::after {
  color: var(--hh-muted);
}

#wrapper .breadcrumb li:last-child {
  color: var(--hh-text);
}

.product-flags li.product-flag {
  min-height: 0;
  padding: 0.3125rem 0.625rem;
  font-family: var(--hh-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--hh-charcoal);
  background: var(--hh-mustard);
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.on-sale {
  color: var(--hh-cream);
  background: var(--hh-terracotta-ink);
}

.hh-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  margin: auto 0 0;
  padding: 0;
  overscroll-behavior: contain;
  color: var(--hh-text);
  background: var(--hh-cream);
  border: 0;
}

.hh-dialog::backdrop {
  background: rgba(43, 38, 34, 0.55);
}

.hh-dialog__panel {
  padding: 1.25rem var(--hh-gutter) 1.75rem;
}

.hh-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.hh-dialog__title {
  margin: 0.5rem 0 0;
  font-size: 1.625rem;
  font-weight: 350;
  line-height: 1.15;
}

.hh-dialog__close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  padding: 0;
  color: var(--hh-text);
  cursor: pointer;
  background: none;
  border: 0;
}

.hh-dialog__close:hover {
  color: var(--hh-terracotta-ink);
}

:focus-visible {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
}

.btn.active:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: 0;
}

.btn-primary.focus {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal-soft);
  border-color: var(--hh-charcoal-soft);
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .btn-primary.dropdown-toggle.focus,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle:hover {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal);
  border-color: var(--hh-charcoal);
}

.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary:disabled.focus,
.btn-primary:disabled:focus {
  color: var(--hh-cream);
  background-color: var(--hh-muted);
  border-color: var(--hh-muted);
}

.btn-outline-primary.active.focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.active:hover,
.btn-outline-primary:active.focus,
.btn-outline-primary:active:focus,
.btn-outline-primary:active:hover,
.open > .btn-outline-primary.dropdown-toggle.focus,
.open > .btn-outline-primary.dropdown-toggle:focus,
.open > .btn-outline-primary.dropdown-toggle:hover {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal-soft);
  border-color: var(--hh-charcoal-soft);
}

.btn-outline-primary.disabled.focus,
.btn-outline-primary.disabled:focus,
.btn-outline-primary:disabled.focus,
.btn-outline-primary:disabled:focus,
.btn-outline-primary.disabled:hover,
.btn-outline-primary:disabled:hover {
  border-color: var(--hh-line);
}

.btn-link {
  color: var(--hh-link);
}

.btn-link:focus,
.btn-link:hover {
  color: var(--hh-terracotta-ink);
}

.group-span-filestyle .btn-default,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin {
  color: var(--hh-cream);
  background: var(--hh-charcoal);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--hh-charcoal);
}

.form-control-submit.disabled {
  background: var(--hh-muted);
}

.custom-radio input[type=radio]:checked + span {
  background-color: var(--hh-terracotta-ink);
}

.custom-control-input:checked ~ .custom-control-indicator,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator {
  background-color: var(--hh-charcoal);
}

.custom-control-input:focus ~ .custom-control-indicator {
  box-shadow: 0 0 0 0.075rem var(--hh-cream), 0 0 0 0.2rem var(--hh-focus);
}

.custom-control-input:active ~ .custom-control-indicator {
  background-color: var(--hh-oat);
}

.page-link {
  color: var(--hh-link);
}

.page-link:focus,
.page-link:hover {
  color: var(--hh-terracotta-ink);
}

.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover,
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  color: var(--hh-cream);
  background-color: var(--hh-charcoal);
  border-color: var(--hh-charcoal);
}

.alert-info {
  color: var(--hh-text);
  background-color: var(--hh-oat);
  border-color: var(--hh-line);
}

.alert-info hr {
  border-top-color: var(--hh-line);
}

.alert-info .alert-link {
  color: var(--hh-terracotta-ink);
}

.progress-bar,
.progress-info .progress-bar {
  background-color: var(--hh-charcoal);
}

.block_newsletter form input[type=text]:focus + button .search,
.btn-unstyle:focus .expand-more,
.search-widget form input[type=text]:focus + button .search,
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type=submit] .search:hover,
.top-menu .sub-menu a:hover,
.account-list a:hover,
.block_newsletter form button[type=submit] .search:hover,
#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.cart-grid-body a.label:hover {
  color: var(--hh-terracotta-ink);
}

.footer-container li a:hover {
  color: var(--hh-mustard);
}

.search-widget form input[type=text]:focus,
.product-customization .product-message:focus {
  outline: 2px solid var(--hh-focus);
}

body#checkout a:hover {
  color: var(--hh-terracotta-ink);
}

body#checkout section.checkout-step .address-item.selected,
#subcategories ul li:hover .subcategory-image a,
#product-modal .modal-content .modal-body .product-images img:hover {
  border-color: var(--hh-charcoal);
}

.block-promo .promo-input + button {
  border-color: var(--hh-charcoal);
}

.block-promo .promo-code-button.cancel-promo {
  color: var(--hh-link);
}

#blockcart-modal .product-name {
  color: var(--hh-text);
}

.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover {
  color: var(--hh-text);
  background: var(--hh-oat);
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--hh-terracotta-ink);
}

.custom-radio {
  background: var(--hh-paper);
  border: 1px solid var(--hh-field-border);
}

.custom-radio:has(input:focus-visible) {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
}

.custom-checkbox input[type=checkbox] + span:not(.color) {
  background: var(--hh-paper);
  border: 1px solid var(--hh-field-border);
}

.custom-checkbox input[type=checkbox]:checked + span:not(.color) {
  background: var(--hh-terracotta-ink);
  border-color: var(--hh-terracotta-ink);
}

.custom-checkbox input[type=checkbox]:checked + span .checkbox-checked {
  color: var(--hh-cream);
}

.custom-checkbox input[type=checkbox]:focus-visible + span {
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
}

.input-group .input-group-btn > .btn[data-action=show-password] {
  padding: 0.78rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--hh-text);
  background: var(--hh-paper);
  border: 1px solid var(--hh-field-border);
  border-left: 0;
}

.input-group .input-group-btn > .btn[data-action=show-password]:hover {
  background: var(--hh-oat);
}

.form-control,
body#checkout textarea {
  color: var(--hh-text);
  background-color: var(--hh-paper);
  border: 1px solid var(--hh-field-border);
}

.form-control:focus,
body#checkout textarea:focus {
  border-color: var(--hh-charcoal);
}

.form-control::placeholder,
body#checkout textarea::placeholder {
  color: var(--hh-muted);
}