@charset "UTF-8";
body {
  font-family: "Sen", sans-serif;
  --animate-duration: 0.8s;
}

a {
  text-decoration: none;
}

.container-max {
  max-width: 1400px;
  margin: 0 auto;
}

/* Section container. Bootstrap's `.container` steps down to 1320px at its
   widest, so it is widened here to the layout the designs are built on. */
.container,
.esjae-container {
  width: 100%;
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px;
}

/* Shared section headings. */
.section-eyebrow {
  display: block;
  margin: 0 0 clamp(9px, 0.95vw, 19px);
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.95vw, 19px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-heading {
  margin: 0;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(30px, 3.25vw, 59px);
  font-weight: 400;
  line-height: 1.22;
  text-transform: uppercase;
}

.section-head--center {
  text-align: center;
}

/* Shared breadcrumb bar, used by the product and archive pages. */
.esjae-breadcrumb {
  padding: clamp(12px, 1vw, 20px) 0;
  border-bottom: 1px solid #ECECEC;
  background: #FAFAF8;
}
.esjae-breadcrumb .esjae-crumbs {
  margin: 0;
  padding: 0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.esjae-breadcrumb .esjae-crumbs a {
  color: #345E41;
  text-decoration: none;
  transition: color 0.25s ease;
}
.esjae-breadcrumb .esjae-crumbs a:hover, .esjae-breadcrumb .esjae-crumbs a:focus-visible {
  color: #FF844B;
}
.esjae-breadcrumb .esjae-crumb-sep {
  margin: 0 8px;
  color: #D5D5D5;
}

@media (max-width: 575.98px) {
  .esjae-breadcrumb .esjae-crumbs {
    font-size: 10px;
    letter-spacing: 0.8px;
  }
}
/* Shared button. `.theme-btn` is the orange pill; the modifiers cover the
   outline and inline-link treatments used across the site. */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 1.1vw, 22px) clamp(18px, 1.45vw, 29px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: #FF844B;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 0vw, 22px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.theme-btn i {
  font-size: 0.78em;
  line-height: 1;
}
.theme-btn:hover, .theme-btn:focus {
  background: rgb(100%, 39.4647058824%, 11.4117647059%);
  color: #345E41;
}

.theme-btn--outline {
  background: transparent;
  border-color: #345E41;
  color: #345E41;
}
.theme-btn--outline:hover, .theme-btn--outline:focus {
  background: #345E41;
  color: #ffffff;
}

.theme-btn--link {
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #345E41;
}
.theme-btn--link .theme-btn-label {
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.theme-btn--link i {
  font-size: 0.86em;
}
.theme-btn--link:hover, .theme-btn--link:focus {
  background: none;
  color: #345E41;
  opacity: 0.7;
}

.theme-btn--dark {
  color: #1A1A1A;
}
.theme-btn--dark:hover, .theme-btn--dark:focus {
  color: #1A1A1A;
}

.theme-btn--green {
  background: #345E41;
  color: #ffffff;
}
.theme-btn--green:hover, .theme-btn--green:focus {
  background: rgb(16.11818426%, 29.1367177008%, 20.147730325%);
  color: #ffffff;
}

.theme-btn--block {
  width: 100%;
}

.theme-btn--accent {
  color: #FF844B;
}
.theme-btn--accent:hover, .theme-btn--accent:focus {
  color: #FF844B;
}

.theme-btn--sm {
  font-size: clamp(12px, 0.7vw, 14px);
  gap: 10px;
}

button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, .button:hover, .widget a.button:hover {
  background-color: transparent;
  border-color: transparent;
}

.section-prefix {
  font-size: 14px;
  font-weight: 700;
  color: #08301A;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-family: "Sen", sans-serif;
}

.section-title {
  font-size: 48px;
  font-weight: 700;
  color: #000000;
  margin: 0;
  font-family: "Glook";
}

.section-description {
  font-size: 18px;
  line-height: 1.8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
}

.slick-arrow,
.slick-prev,
.slick-next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #08301A;
  color: #08301A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 0;
  box-shadow: 0 4px 12px rgba(253, 65, 177, 0.15);
}
.slick-arrow i,
.slick-prev i,
.slick-next i {
  font-size: 18px;
  line-height: 1;
  color: #08301A;
  transition: color 0.3s ease;
}
.slick-arrow:before,
.slick-prev:before,
.slick-next:before {
  font-family: "bootstrap-icons";
  font-size: 18px;
  color: #08301A;
  opacity: 1;
  transition: color 0.3s ease;
}
.slick-arrow:hover, .slick-arrow:focus,
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background: #08301A;
  border-color: #08301A;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(253, 65, 177, 0.35);
}
.slick-arrow:hover:before, .slick-arrow:focus:before,
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  color: #ffffff;
}
.slick-arrow:hover i, .slick-arrow:focus i,
.slick-prev:hover i,
.slick-prev:focus i,
.slick-next:hover i,
.slick-next:focus i {
  color: #ffffff;
}
.slick-arrow.slick-disabled,
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.slick-arrow.slick-disabled:hover,
.slick-prev.slick-disabled:hover,
.slick-next.slick-disabled:hover {
  background: #ffffff;
  color: #08301A;
}
.slick-arrow.slick-disabled:hover:before,
.slick-prev.slick-disabled:hover:before,
.slick-next.slick-disabled:hover:before {
  color: #08301A;
}
.slick-arrow.slick-disabled:hover i,
.slick-prev.slick-disabled:hover i,
.slick-next.slick-disabled:hover i {
  color: #08301A;
}

.slick-prev:before {
  content: "\f284";
}

.slick-next:before {
  content: "\f285";
}

.theme-field {
  display: block;
  margin-bottom: 14px;
}
.theme-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #AAAAAA;
  font-family: "Sen", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  margin-bottom: 6px;
}
.theme-field input[type=text],
.theme-field input[type=email],
.theme-field input[type=tel],
.theme-field input[type=url],
.theme-field input[type=password],
.theme-field input[type=number],
.theme-field input[type=date],
.theme-field input[type=search],
.theme-field select,
.theme-field textarea {
  width: 100%;
  outline: none;
  font-size: 12px;
  font-weight: 600;
  color: #000000;
  box-shadow: none;
  border-radius: 2px;
  padding: 14px 16px;
  background: #ffffff;
  letter-spacing: 0.05rem;
  font-family: "Sen", sans-serif;
  text-transform: uppercase;
  border: 1px solid #E0E0E0;
  transition: border-color 0.3s ease;
}
.theme-field input[type=text]::-moz-placeholder, .theme-field input[type=email]::-moz-placeholder, .theme-field input[type=tel]::-moz-placeholder, .theme-field input[type=url]::-moz-placeholder, .theme-field input[type=password]::-moz-placeholder, .theme-field input[type=number]::-moz-placeholder, .theme-field input[type=date]::-moz-placeholder, .theme-field input[type=search]::-moz-placeholder, .theme-field select::-moz-placeholder, .theme-field textarea::-moz-placeholder {
  color: #999999;
  font-weight: 600;
  text-transform: uppercase;
}
.theme-field input[type=text]::placeholder,
.theme-field input[type=email]::placeholder,
.theme-field input[type=tel]::placeholder,
.theme-field input[type=url]::placeholder,
.theme-field input[type=password]::placeholder,
.theme-field input[type=number]::placeholder,
.theme-field input[type=date]::placeholder,
.theme-field input[type=search]::placeholder,
.theme-field select::placeholder,
.theme-field textarea::placeholder {
  color: #999999;
  font-weight: 600;
  text-transform: uppercase;
}
.theme-field input[type=text]:focus,
.theme-field input[type=email]:focus,
.theme-field input[type=tel]:focus,
.theme-field input[type=url]:focus,
.theme-field input[type=password]:focus,
.theme-field input[type=number]:focus,
.theme-field input[type=date]:focus,
.theme-field input[type=search]:focus,
.theme-field select:focus,
.theme-field textarea:focus {
  border-color: #999999;
}
.theme-field textarea {
  resize: vertical;
  min-height: 100px;
  text-transform: none;
}
.theme-field select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 40px;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}
.theme-field .reg-required,
.theme-field .required {
  color: #e74c3c;
  margin-left: 2px;
}

a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type=button]:focus,
input[type=reset]:focus, input[type=submit]:focus, input[type=email]:focus, input[type=tel]:focus,
input[type=url]:focus, input[type=password]:focus, input[type=search]:focus {
  outline-color: transparent !important;
}

a:focus, input:focus, textarea:focus, button:focus {
  outline: 2px solid transparent !important;
}

input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=tel]:focus,
input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus, .input-text:focus {
  background-color: transparent;
}

/* -------------------------------------------------------------------------
 *  Announcement bar
 *  Full-bleed orange strip above the hero, with circled arrows at each edge.
 *  Design reference: 78px bar, 28px arrows inset 21px, 19px copy.
 * ---------------------------------------------------------------------- */
.announcement {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 3vw, 78px);
  padding: 5px clamp(52px, 3.5vw, 70px);
  background: #FE8D5A;
  overflow: hidden;
}

.announcement-slider {
  width: 100%;
  max-width: 1500px;
}
.announcement-slider:not(.slick-initialized) .announcement-slide + .announcement-slide {
  display: none;
}

.announcement-slide {
  text-align: center;
}
.announcement-slide a,
.announcement-slide span {
  display: inline-block;
  color: #000000;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 1vw, 21px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.5px;
}
.announcement-slide a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.25s ease;
}
.announcement-slide a:hover, .announcement-slide a:focus {
  color: #000000;
  opacity: 0.7;
}

/* --- Arrows ---------------------------------------------------------------- */
.announcement-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 1.4vw, 28px);
  height: clamp(24px, 1.4vw, 28px);
  padding: 0;
  border: 1.5px solid #000000;
  border-radius: 50%;
  background: transparent;
  color: #000000;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.25s ease, color 0.25s ease;
}
.announcement-arrow i {
  font-size: clamp(9px, 0.55vw, 11px);
  line-height: 1;
}
.announcement-arrow:hover, .announcement-arrow:focus-visible {
  background: #000000;
  color: #FE8D5A;
}
.announcement-arrow--prev {
  left: clamp(12px, 1.05vw, 21px);
}
.announcement-arrow--next {
  right: clamp(12px, 1.05vw, 21px);
}

/* The arrows are <button>s drawn at 24px, so a pseudo-element cannot carry the
   touch target: Chrome does not hit-test outside a form control's box. Instead
   the button grows to fill the bar and the visible ring moves onto the icon,
   with a negative margin holding the ring at its designed position. */
@media (max-width: 991.98px) {
  .announcement-arrow {
    width: 44px;
    height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .announcement-arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1.5px solid #000000;
    border-radius: 50%;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .announcement-arrow:hover, .announcement-arrow:focus-visible {
    background: transparent;
  }
  .announcement-arrow:hover i, .announcement-arrow:focus-visible i {
    background: #000000;
    color: #FE8D5A;
  }
  .announcement-arrow--prev {
    margin-left: -10px;
  }
  .announcement-arrow--next {
    margin-right: -10px;
  }
}
/* -------------------------------------------------------------------------
 *  Site header
 *  Three rows: top bar (green), main bar (logo / search / actions),
 *  nav bar (all categories / primary menu / find a store).
 * ---------------------------------------------------------------------- */
.home.blog .site-header.esjae-header,
.home.page .site-header.esjae-header,
.no-wc-breadcrumb .site-header.esjae-header,
.post-type-archive-product .site-header.esjae-header {
  margin: 0;
}

.site-header.esjae-header {
  position: relative;
  z-index: 200;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #ffffff;
  background-image: none;
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
}
.site-header.esjae-header .col-full {
  max-width: none;
  padding: 0;
  margin: 0;
}
.site-header.esjae-header a {
  text-decoration: none;
  box-shadow: none;
}
.site-header.esjae-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header.esjae-header button {
  font-family: "Sen", sans-serif;
}
.site-header.esjae-header form {
  margin: 0;
}
.site-header.esjae-header input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.header-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
  display: flex;
  align-items: center;
}

/* --- Top bar ---------------------------------------------------------- */
.header-topbar {
  background: #345E41;
  color: #ffffff;
}
.header-topbar .header-container {
  height: 35px;
  justify-content: space-between;
  gap: 20px;
}

.topbar-nav .topbar-menu {
  display: flex;
  align-items: center;
  gap: 25px;
}
.topbar-nav .topbar-menu li {
  position: relative;
  line-height: 1;
}
.topbar-nav .topbar-menu a {
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}
.topbar-nav .topbar-menu a:hover, .topbar-nav .topbar-menu a:focus {
  color: #ffffff;
  opacity: 0.7;
}
.topbar-nav .topbar-menu ul {
  display: none;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.topbar-contact a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}
.topbar-contact a:hover, .topbar-contact a:focus {
  color: #ffffff;
  opacity: 0.7;
}
.topbar-contact .topbar-sep {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.85;
}

/* --- Main bar --------------------------------------------------------- */
.header-main {
  background: #ffffff;
}
.header-main > .header-container {
  height: 78px;
  gap: 20px;
}

.header-brand {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.header-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.header-burger span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: #08301A;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.header-logo,
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.header-logo img,
.custom-logo-link img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 55px;
  max-height: 55px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* --- Search ----------------------------------------------------------- */
.header-search {
  flex: 0 1 845px;
  max-width: 845px;
  min-width: 0;
}

.header-search-mobile {
  display: none;
}

.esjae-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  padding: 0;
  border: 2px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  transition: border-color 0.25s ease;
}
.esjae-search-form:focus-within {
  border-color: rgb(71.5294117647%, 71.5294117647%, 71.5294117647%);
}
.esjae-search-form > label {
  flex: 1 1 auto;
  display: block;
  height: 100%;
  min-width: 0;
  margin: 0;
}
.esjae-search-form .esjae-search-field {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 12px 0 22px;
  border: 0;
  border-radius: 25px 0 0 25px;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  text-transform: uppercase;
}
.esjae-search-form .esjae-search-field::-moz-placeholder {
  color: #ABABAB;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 1;
}
.esjae-search-form .esjae-search-field::placeholder {
  color: #ABABAB;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 1;
}
.esjae-search-form .esjae-search-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.esjae-search-form .esjae-search-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #08301A;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.25s ease;
}
.esjae-search-form .esjae-search-submit i {
  font-size: 21px;
  line-height: 1;
  -webkit-text-stroke: 0.6px currentColor;
}
.esjae-search-form .esjae-search-submit:hover, .esjae-search-form .esjae-search-submit:focus {
  background: rgb(5.4229691877%, 32.5378151261%, 17.6246498599%);
  color: #ffffff;
}

/* --- Header actions --------------------------------------------------- */
.header-actions {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.header-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #1A1A1A;
  line-height: 1;
  transition: opacity 0.25s ease;
}
.header-action:hover, .header-action:focus {
  color: #1A1A1A;
  opacity: 0.75;
}

.header-wishlist i {
  font-size: 25px;
  line-height: 1;
  color: #08301A;
}

.header-account i {
  font-size: 26px;
  line-height: 1;
}

.header-action-label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.header-cart {
  position: relative;
  gap: 0;
}
.header-cart i {
  font-size: 24px;
  line-height: 1;
}

.header-cart-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 1px;
}

.header-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: #08301A;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.header-cart-label {
  margin-top: 1px;
  color: #1A1A1A;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* --- Nav bar ---------------------------------------------------------- */
.header-nav {
  background: #ffffff;
}
.header-nav .header-container {
  height: 50px;
  gap: 20px;
}

.header-categories {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-width: 0;
}

.categories-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1A1A1A;
  cursor: pointer;
}
.categories-toggle .categories-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 22px;
}
.categories-toggle .categories-icon span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 1px;
  background: #08301A;
}
.categories-toggle .categories-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.categories-toggle:hover .categories-text, .categories-toggle:focus .categories-text {
  opacity: 0.75;
}

.categories-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 210;
  margin-top: -7px;
  min-width: 280px;
  padding: 10px 0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.categories-dropdown .categories-menu li {
  position: relative;
}
.categories-dropdown .categories-menu li a {
  display: block;
  padding: 10px 22px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease;
}
.categories-dropdown .categories-menu li a:hover, .categories-dropdown .categories-menu li a:focus {
  background: rgba(52, 94, 65, 0.08);
  color: #08301A;
}
.categories-dropdown .categories-menu li ul {
  position: absolute;
  top: -10px;
  left: 100%;
  min-width: 240px;
  padding: 10px 0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.categories-dropdown .categories-menu li:hover > ul {
  opacity: 1;
  visibility: visible;
}

.header-categories.is-open .categories-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-primary-nav {
  flex: 0 0 auto;
}
.header-primary-nav .primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-primary-nav .primary-menu > li {
  position: relative;
}
.header-primary-nav .primary-menu > li > a {
  display: block;
  padding: 0 18.5px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.header-primary-nav .primary-menu > li:hover > a, .header-primary-nav .primary-menu > li.current-menu-item > a, .header-primary-nav .primary-menu > li.current-menu-ancestor > a {
  color: #08301A;
}
.header-primary-nav .primary-menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 210;
  min-width: 240px;
  padding: 10px 0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}
.header-primary-nav .primary-menu li ul li {
  position: relative;
}
.header-primary-nav .primary-menu li ul li a {
  display: block;
  padding: 10px 22px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
}
.header-primary-nav .primary-menu li ul li a:hover, .header-primary-nav .primary-menu li ul li a:focus {
  background: rgba(52, 94, 65, 0.08);
  color: #08301A;
}
.header-primary-nav .primary-menu li ul li ul {
  top: -10px;
  left: 100%;
}
.header-primary-nav .primary-menu li:hover > ul,
.header-primary-nav .primary-menu li.is-open > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-store {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.find-store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #1A1A1A;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
.find-store i {
  font-size: 18px;
  line-height: 1;
}
.find-store span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.find-store:hover, .find-store:focus {
  color: #1A1A1A;
  opacity: 0.75;
}

/* --- Off-canvas ------------------------------------------------------- */
.esjae-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 1050;
  visibility: hidden;
  pointer-events: none;
}
.esjae-offcanvas.is-open {
  visibility: visible;
  pointer-events: auto;
}
.esjae-offcanvas.is-open .esjae-offcanvas-backdrop {
  opacity: 1;
}
.esjae-offcanvas.is-open .esjae-offcanvas-panel {
  transform: translateX(0);
}

.esjae-offcanvas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.esjae-offcanvas-panel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: #ffffff;
  font-family: "Sen", sans-serif;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.esjae-offcanvas-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.esjae-offcanvas-panel a {
  text-decoration: none;
  box-shadow: none;
}

.esjae-offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #ececec;
}
.esjae-offcanvas-head .header-logo img {
  height: 48px;
}

.esjae-offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1A1A1A;
  cursor: pointer;
}
.esjae-offcanvas-close i {
  font-size: 18px;
}

.esjae-offcanvas-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 0 24px;
}

.esjae-offcanvas-title {
  display: block;
  padding: 14px 20px 6px;
  color: #ABABAB;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.offcanvas-menu li {
  position: relative;
}
.offcanvas-menu li a {
  display: block;
  padding: 11px 20px;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.offcanvas-menu li a:hover, .offcanvas-menu li a:focus {
  color: #08301A;
}
.offcanvas-menu li ul {
  display: none;
  padding-left: 12px;
}
.offcanvas-menu li ul a {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}
.offcanvas-menu li.is-open > ul {
  display: block;
}

.esjae-offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border-top: 1px solid #ececec;
}
.esjae-offcanvas-foot a {
  color: #1A1A1A;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

body.esjae-offcanvas-open {
  overflow: hidden;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1499.98px) {
  .header-search {
    flex: 0 1 640px;
    max-width: 640px;
  }
  .header-primary-nav .primary-menu > li > a {
    padding: 0 15px;
    font-size: 16px;
  }
}
@media (max-width: 1299.98px) {
  .header-container {
    padding: 0 18px;
  }
  .header-search {
    flex: 0 1 480px;
    max-width: 480px;
  }
  .header-actions {
    gap: 20px;
  }
  .header-primary-nav .primary-menu > li > a {
    padding: 0 11px;
    font-size: 15px;
  }
  .find-store span,
  .categories-toggle .categories-text {
    font-size: 12px;
  }
}
@media (max-width: 1199.98px) {
  .topbar-nav .topbar-menu {
    gap: 18px;
  }
  .topbar-nav .topbar-menu a {
    font-size: 12px;
  }
  .topbar-contact a,
  .topbar-contact .topbar-sep {
    font-size: 12px;
  }
  .header-search {
    flex: 0 1 380px;
    max-width: 380px;
  }
  .esjae-search-form {
    height: 50px;
  }
  .esjae-search-form .esjae-search-submit {
    width: 62px;
  }
  .header-logo img,
  .custom-logo-link img {
    height: 58px;
    max-height: 58px;
  }
  .header-primary-nav .primary-menu > li > a {
    padding: 0 9px;
    font-size: 14px;
  }
}
@media (max-width: 991.98px) {
  .header-topbar .topbar-nav {
    display: none;
  }
  .header-topbar .header-container {
    justify-content: center;
  }
  .header-nav {
    display: none;
  }
  .header-burger {
    display: flex;
  }
  .header-main > .header-container {
    height: 74px;
  }
  .header-search {
    display: none;
  }
  .header-search-mobile {
    display: block;
    flex: 1 1 auto;
    max-width: none;
    padding-bottom: 14px;
  }
  .header-search-mobile .header-container {
    padding: 0 18px;
  }
  .header-action-label,
  .header-cart-label {
    display: none;
  }
  .header-cart-meta {
    position: absolute;
    top: -6px;
    right: -10px;
    margin-left: 0;
  }
  .header-cart-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
  }
  .header-actions {
    gap: 22px;
  }
  /* --- Touch targets ---------------------------------------------------
   * The account/cart icons are drawn at 23-24px, below the 44px minimum for
   * a finger. They are anchors, so the hit area can be grown with a centred
   * pseudo-element and the icons keep their designed size.
   * ------------------------------------------------------------------ */
  .header-action {
    position: relative;
  }
  .header-action::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* The burger is a <button>, and Chrome will not hit-test a pseudo-element
     that spills outside a form control's box, so its own box has to grow.
     The negative margin gives the extra 10px back to the layout, leaving the
     bars where the design puts them. */
  .header-burger {
    align-items: center;
    width: 44px;
    height: 44px;
    margin: 0 -5px;
  }
  .topbar-contact a {
    display: inline-block;
    padding: 6px 0;
  }
}
@media (max-width: 575.98px) {
  .header-container {
    padding: 0 15px;
  }
  .header-topbar .header-container {
    height: 38px;
  }
  .topbar-contact a,
  .topbar-contact .topbar-sep {
    font-size: 12px;
  }
  .header-main > .header-container {
    height: 66px;
    gap: 10px;
  }
  .header-logo img,
  .custom-logo-link img {
    height: 44px;
    max-height: 44px;
  }
  .header-brand {
    gap: 10px;
  }
  .header-actions {
    gap: 16px;
  }
  .header-wishlist {
    display: none;
  }
  .header-account i,
  .header-cart i {
    font-size: 23px;
  }
  .esjae-search-form {
    height: 46px;
  }
  .esjae-search-form .esjae-search-field {
    padding-left: 16px;
    font-size: 13px;
  }
  .esjae-search-form .esjae-search-submit {
    width: 54px;
  }
  .esjae-search-form .esjae-search-submit i {
    font-size: 18px;
  }
  .header-search-mobile .header-container {
    padding: 0 15px;
  }
}
/* -------------------------------------------------------------------------
 *  Site footer
 *  Misty forest photo behind four columns, with a dark green bottom bar.
 *  Design reference: content starts 264px down, 46px bar.
 * ---------------------------------------------------------------------- */
.site-footer.esjae-footer {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: #24322F;
  background-image: url("../images/footer-bg.png");
  background-size: auto, 100% auto;
  background-position: top;
  background-repeat: no-repeat, no-repeat;
  color: #ffffff;
  font-family: "Sen", sans-serif;
}
.site-footer.esjae-footer .col-full {
  max-width: none;
  padding: 0;
  margin: 0;
}
.site-footer.esjae-footer a {
  text-decoration: none;
  box-shadow: none;
}
.site-footer.esjae-footer ul {
  list-style: none;
  padding: 0;
}

/* --- Floating buttons -----------------------------------------------------
 * Cart above WhatsApp, stacked bottom-right. The stack owns the viewport
 * offsets so the buttons never carry hand-tuned `bottom` values.
 *
 * Scoped at footer specificity on purpose: the blanket `a` reset above
 * (`.site-footer.esjae-footer a { box-shadow: none }`) outranks a lone
 * class here and was flattening the buttons.
 * ---------------------------------------------------------------------- */
.float-actions,
.site-footer.esjae-footer .float-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.whatsapp-float,
.cart-float,
.site-footer.esjae-footer .whatsapp-float,
.site-footer.esjae-footer .cart-float {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible,
.cart-float:hover,
.cart-float:focus-visible,
.site-footer.esjae-footer .whatsapp-float:hover,
.site-footer.esjae-footer .whatsapp-float:focus-visible,
.site-footer.esjae-footer .cart-float:hover,
.site-footer.esjae-footer .cart-float:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.whatsapp-float,
.site-footer.esjae-footer .whatsapp-float {
  background-color: #25D366;
}
.whatsapp-float img,
.site-footer.esjae-footer .whatsapp-float img {
  display: block;
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}

.cart-float,
.site-footer.esjae-footer .cart-float {
  background-color: #345E41;
}
.cart-float i,
.site-footer.esjae-footer .cart-float i {
  font-size: 28px;
  line-height: 1;
}

.cart-float-badge,
.site-footer.esjae-footer .cart-float-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #FF844B;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .float-actions,
  .site-footer.esjae-footer .float-actions {
    right: 14px;
    bottom: 14px;
    gap: 12px;
  }
  .whatsapp-float,
  .cart-float,
  .site-footer.esjae-footer .whatsapp-float,
  .site-footer.esjae-footer .cart-float {
    width: 52px;
    height: 52px;
  }
  .whatsapp-float img,
  .site-footer.esjae-footer .whatsapp-float img {
    width: 27px;
    height: 27px;
  }
  .cart-float i,
  .site-footer.esjae-footer .cart-float i {
    font-size: 24px;
  }
  .cart-float-badge,
  .site-footer.esjae-footer .cart-float-badge {
    min-width: 20px;
    height: 20px;
    font-size: 11px;
  }
}
.footer-main {
  padding: clamp(60px, 13.2vw, 264px) 0 clamp(40px, 3.95vw, 79px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 6.17fr 2.56fr 3.56fr 4.52fr;
  gap: clamp(28px, 3vw, 60px);
}

/* --- Column one ----------------------------------------------------------- */
.footer-logo {
  display: inline-block;
  line-height: 0;
}
.footer-logo img {
  display: block;
  width: auto;
  height: clamp(48px, 3.5vw, 81px);
}

.footer-about-text {
  max-width: 470px;
  margin: clamp(8px, 0.6vw, 12px) 0 0;
  color: #ffffff;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 400;
  line-height: 1.35;
}

.footer-title {
  margin: 0;
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(17px, 1.25vw, 25px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer-title--social {
  margin-top: clamp(16px, 1.4vw, 28px);
  padding-top: clamp(24px, 2.5vw, 50px);
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.15vw, 23px);
  margin: clamp(16px, 1.7vw, 34px) 0 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 2.15vw, 43px);
  height: clamp(34px, 2.15vw, 43px);
  border-radius: 50%;
  background: #ffffff;
  color: #08301A;
  transition: background 0.25s ease, color 0.25s ease;
}
.footer-social a i {
  font-size: clamp(15px, 0.95vw, 19px);
  line-height: 1;
}
.footer-social a:hover, .footer-social a:focus {
  background: #FF844B;
  color: #ffffff;
}

/* --- Link columns --------------------------------------------------------- */
.footer-menu {
  margin: clamp(22px, 2.4vw, 48px) 0 0;
}
.footer-menu li + li {
  margin-top: clamp(16px, 1vw, 34px);
}
.footer-menu a {
  color: #ffffff;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.25s ease;
}
.footer-menu a:hover, .footer-menu a:focus {
  color: #FF844B;
}

/* --- Newsletter ----------------------------------------------------------- */
.footer-newsletter-text {
  max-width: 400px;
  margin: clamp(18px, 1.85vw, 37px) 0 0;
  color: #ffffff;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 400;
  line-height: 1.35;
}

.footer-form {
  display: flex;
  align-items: stretch;
  max-width: 452px;
  height: clamp(42px, 2.6vw, 52px);
  margin-top: clamp(14px, 1.4vw, 28px);
  border: 1px solid #ffffff;
}
.footer-form input[type=email] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 clamp(10px, 0.8vw, 16px);
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 18px);
}
.footer-form button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 2.55vw, 51px);
  padding: 0;
  border: 0;
  background: #ffffff;
  color: #08301A;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.footer-form button i {
  font-size: clamp(16px, 1.05vw, 21px);
  line-height: 1;
}
.footer-form button:hover, .footer-form button:focus {
  background: #FF844B;
  color: #ffffff;
}

.footer-title--payment {
  margin-top: clamp(26px, 2.7vw, 54px);
}

.footer-payment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 0.7vw, 14px);
  margin-top: clamp(14px, 1.6vw, 32px);
}
.footer-payment img {
  display: block;
  width: auto;
  height: clamp(30px, 2.1vw, 42px);
}

/* --- Bottom bar ----------------------------------------------------------- */
.footer-bar {
  background: #08301A;
}

.footer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: clamp(38px, 2.3vw, 46px);
  padding: 6px 25px;
}
.footer-bar-inner p {
  margin: 0;
  color: #ffffff;
  font-size: clamp(14px, 0.82vw, 19px);
  font-weight: 400;
  line-height: 1.3;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: clamp(36px, 5vw, 56px);
  }
  .footer-main {
    padding-top: clamp(60px, 12vw, 180px);
  }
}
@media (max-width: 767.98px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* Single-column stacking roughly triples the footer's height, while
     `footer-bg.png` is a 2500x764 band pinned at its natural size. It ran
     out partway down and left a hard horizontal edge across the links, so
     on phones the photo is scaled to cover the whole footer instead. */
  .site-footer.esjae-footer {
    background-size: cover;
    background-position: top center;
  }
  .footer-bar-inner {
    justify-content: center;
    text-align: center;
  }
}
/* --- Storefront overrides -------------------------------------------------
 * Storefront colours footer headings and links at a higher specificity than
 * the component rules above, so they are re-stated here.
 * ---------------------------------------------------------------------- */
.site-footer.esjae-footer .footer-title,
.site-footer.esjae-footer h2 {
  color: #ffffff;
}
.site-footer.esjae-footer a:not(.button) {
  color: #ffffff;
  text-decoration: none;
}
.site-footer.esjae-footer .footer-menu a:not(.button):hover, .site-footer.esjae-footer .footer-menu a:not(.button):focus {
  color: #FF844B;
}
.site-footer.esjae-footer .footer-social a:not(.button) {
  color: #08301A;
}
.site-footer.esjae-footer .footer-social a:not(.button):hover, .site-footer.esjae-footer .footer-social a:not(.button):focus {
  color: #ffffff;
}

/* -------------------------------------------------------------------------
 *  Hero banner carousel
 *  Full-bleed image slider with a stacked thumbnail pager top-right.
 *  Design reference: 2000 x 784 slide, 221 x 88 thumbs inset 38px.
 * ---------------------------------------------------------------------- */
.hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #10180F;
  line-height: 0;
}

.hero-slider {
  width: 100%;
}
.hero-slider:not(.slick-initialized) .hero-slide + .hero-slide {
  display: none;
}
.hero-slider .slick-list,
.hero-slider .slick-track {
  height: 100%;
}
.hero-slider .slick-slide > div {
  line-height: 0;
}

.hero-slide {
  position: relative;
  width: 100%;
}

.hero-slide-link {
  display: block;
  line-height: 0;
}

.hero-slide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000/784;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* --- Thumbnail pager --------------------------------------------------- */
.hero-thumbs {
  position: absolute;
  top: clamp(14px, 1.9vw, 38px);
  right: clamp(14px, 1.9vw, 38px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.7vw, 14px);
  max-height: calc(100% - 2 * clamp(14px, 1.9vw, 38px));
  overflow: hidden;
}

.hero-thumb {
  position: relative;
  display: block;
  width: clamp(120px, 11.05vw, 260px);
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hero-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.58);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hero-thumb.is-active::after {
  opacity: 1;
}
.hero-thumb:hover, .hero-thumb:focus-visible {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.hero-thumb:not(.is-active):hover {
  transform: translateY(-2px);
}

.hero-thumb-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 215/82;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hero-thumb {
    width: clamp(110px, 14vw, 180px);
    border-width: 2px;
  }
}
@media (max-width: 767.98px) {
  .hero-thumb {
    min-height: 44px;
  }
  .hero-slide-image {
    aspect-ratio: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
  }
  .hero-thumbs {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    max-height: none;
    padding: 10px 12px;
  }
  .hero-thumb {
    width: clamp(64px, 22vw, 110px);
    box-shadow: none;
  }
  .hero-thumb:not(.is-active):hover {
    transform: none;
  }
}
/* -------------------------------------------------------------------------
 *  Category cards
 *  Four-up grid of rounded colour panels with a title and "Explore range".
 *  Design reference: 437 x 545 cards, 30px gutter, 28px radius.
 * ---------------------------------------------------------------------- */
.category-cards {
  padding: clamp(48px, 5.5vw, 140px) 0;
  background: #ffffff;
}

.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.5vw, 30px);
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  aspect-ratio: 437/545;
  padding: clamp(26px, 2.45vw, 49px) clamp(20px, 1.9vw, 38px);
  border-radius: clamp(14px, 1.4vw, 28px);
  background: var(--card-bg, #BFBFBF);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.category-card-title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 2.1vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.category-card-link {
  position: relative;
  z-index: 2;
  margin-top: clamp(12px, 1.15vw, 23px);
}
.category-card-link i {
  transition: transform 0.25s ease;
}

.category-card-image {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: right bottom;
     object-position: right bottom;
  pointer-events: none;
  transform-origin: right bottom;
  transition: transform 0.5s ease;
}

/* --- Hover ------------------------------------------------------------- */
.category-card:hover,
.category-card:has(.category-card-link:focus-visible) {
  transform: translateY(-8px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}
.category-card:hover .category-card-image,
.category-card:has(.category-card-link:focus-visible) .category-card-image {
  transform: scale(1.06);
}
.category-card:hover .category-card-link i,
.category-card:has(.category-card-link:focus-visible) .category-card-link i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .category-card,
  .category-card-image,
  .category-card-link i {
    transition: none;
  }
  .category-card:hover,
  .category-card:has(.category-card-link:focus-visible) {
    transform: none;
  }
  .category-card:hover .category-card-image,
  .category-card:has(.category-card-link:focus-visible) .category-card-image {
    transform: none;
  }
  .category-card:hover .category-card-link i,
  .category-card:has(.category-card-link:focus-visible) .category-card-link i {
    transform: none;
  }
}
/* --- Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .category-card {
    aspect-ratio: 4/5;
  }
}
@media (max-width: 575.98px) {
  .category-cards-grid {
    grid-template-columns: 1fr;
  }
  .category-card {
    aspect-ratio: 16/9;
  }
  .category-card-title {
    font-size: clamp(24px, 7vw, 34px);
  }
}
/* -------------------------------------------------------------------------
 *  Intro / about section
 *  Masked photo with a stat card on the left, copy and actions on the right.
 *  Design reference: 877x696 media box, 267px stat card, 84px column gap.
 * ---------------------------------------------------------------------- */
.intro-section {
  padding: clamp(56px, 5vw, 132px) 0;
  background-color: #EFF6EE;
  background-image: url("../images/intro-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.intro-content {
  padding-right: 50px;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(30px, 4.2vw, 84px);
}

/* --- Media -------------------------------------------------------------- */
.intro-media {
  position: relative;
}

.intro-photo {
  width: 100%;
  aspect-ratio: 877/696;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: url("../images/intro-mask.png");
  mask-image: url("../images/intro-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.intro-stat {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 30.4%, 267px);
  aspect-ratio: 1;
  padding: clamp(10px, 1vw, 20px);
  border: clamp(4px, 0.35vw, 7px) solid #ffffff;
  border-radius: clamp(16px, 1.5vw, 30px);
  background: #345E41;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.intro-stat:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
}
.intro-stat:hover .intro-stat-icon {
  transform: translateY(-4px);
}

.intro-stat-icon {
  display: block;
  width: clamp(56px, 5vw, 100px);
  height: auto;
  margin-bottom: clamp(10px, 1.2vw, 24px);
  transition: transform 0.45s ease;
}

.intro-stat-value {
  display: block;
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(28px, 2.7vw, 54px);
  font-weight: 400;
  line-height: 1;
}

.intro-stat-label {
  display: block;
  margin-top: clamp(4px, 0.4vw, 8px);
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(15px, 1.3vw, 26px);
  font-weight: 400;
  line-height: 1.1;
}

@media (prefers-reduced-motion: reduce) {
  .intro-stat,
  .intro-stat-icon {
    transition: none;
  }
  .intro-stat:hover {
    transform: none;
  }
  .intro-stat:hover .intro-stat-icon {
    transform: none;
  }
}
/* --- Content ------------------------------------------------------------ */
.intro-eyebrow {
  margin-bottom: clamp(12px, 1.25vw, 35px);
}

.intro-heading {
  max-width: 85%;
}

.intro-body {
  margin-top: clamp(22px, 2.4vw, 48px);
  color: #3F3F3F;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1vw, 26px);
  font-weight: 400;
  line-height: 1.46;
}
.intro-body p {
  margin: 0 0 1em;
}
.intro-body p:last-child {
  margin-bottom: 0;
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.45vw, 49px);
  margin-top: clamp(26px, 2.6vw, 52px);
}
.intro-actions .theme-btn--link {
  font-size: clamp(13px, 1.1vw, 22px);
  letter-spacing: 1px;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 6vw, 60px);
  }
  .intro-media {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .intro-eyebrow,
  .intro-heading,
  .intro-body {
    text-align: left;
  }
  .intro-heading {
    max-width: 100%;
    font-size: clamp(28px, 4.6vw, 44px);
  }
  .intro-body {
    font-size: clamp(15px, 2vw, 19px);
  }
  .intro-actions {
    justify-content: flex-start;
    gap: 28px;
    margin-top: 32px;
  }
  .intro-actions .theme-btn--link {
    font-size: 15px;
  }
  .theme-btn {
    font-size: 15px;
    padding: 15px 26px;
  }
  .intro-stat {
    width: clamp(140px, 32%, 200px);
  }
  .intro-stat-value {
    font-size: clamp(24px, 4.4vw, 38px);
  }
  .intro-stat-label {
    font-size: clamp(13px, 2.2vw, 19px);
  }
  .intro-stat-icon {
    width: clamp(48px, 8vw, 72px);
  }
}
@media (max-width: 575.98px) {
  .intro-actions {
    gap: 20px;
  }
  .intro-stat {
    width: 42%;
    max-width: 170px;
  }
}
/* -------------------------------------------------------------------------
 *  Top categories
 *  Centred heading over a 5-up grid of square category tiles.
 *  Design reference: 277px tiles, 39px column gap, 1540px grid width.
 * ---------------------------------------------------------------------- */
.top-categories {
  padding: clamp(56px, 5.5vw, 132px) 0;
  background: #ffffff;
}

.top-categories-head {
  margin-bottom: clamp(30px, 3.75vw, 75px);
}

.top-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  -moz-column-gap: clamp(16px, 1.95vw, 39px);
       column-gap: clamp(16px, 1.95vw, 39px);
  row-gap: clamp(24px, 2.15vw, 43px);
  max-width: 1540px;
  margin: 0 auto;
}

.top-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.top-category-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(10px, 1.25vw, 25px);
  border: 1px solid #B3B3B3;
  border-radius: clamp(12px, 1.3vw, 26px);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.top-category-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.45s ease;
  will-change: transform;
}

.top-category-title {
  margin-top: clamp(8px, 0.85vw, 17px);
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 1.05vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.top-category:hover .top-category-thumb,
.top-category:focus-visible .top-category-thumb {
  border-color: #345E41;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.top-category:hover .top-category-thumb img,
.top-category:focus-visible .top-category-thumb img {
  transform: scale(1.2);
}
.top-category:hover .top-category-title,
.top-category:focus-visible .top-category-title {
  color: #345E41;
}

@media (prefers-reduced-motion: reduce) {
  .top-category-thumb img {
    transition: none;
  }
  .top-category:hover .top-category-thumb img,
  .top-category:focus-visible .top-category-thumb img {
    transform: none;
  }
}
/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .top-categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767.98px) {
  .top-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .top-category-title {
    white-space: normal;
  }
}
@media (max-width: 479.98px) {
  .top-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* -------------------------------------------------------------------------
 *  Promo carousel
 *  Bordered banner slider over the mountain artwork, dots and caption below.
 *  Design reference: 1560x704 card, 4px border, 40px radius.
 * ---------------------------------------------------------------------- */
.promo-section {
  padding: clamp(35px, 2vw, 122px) 0 clamp(20px, 1.65vw, 33px);
  background-color: #ffffff;
  background-image: url("../images/promo-bg.png");
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.promo-slider {
  max-width: 1360px;
  margin: 0 auto;
}
.promo-slider:not(.slick-initialized) .promo-slide + .promo-slide {
  display: none;
}
.promo-slider .slick-list {
  border: clamp(2px, 0.2vw, 4px) solid #08301A;
  border-radius: clamp(18px, 2vw, 40px);
  overflow: hidden;
}
.promo-slider .slick-track {
  display: flex;
}

.promo-slide {
  line-height: 0;
}
.promo-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1560/704;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* --- Dots ---------------------------------------------------------------- */
.promo-slider .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.5vw, 10px);
  margin: clamp(12px, 1.05vw, 21px) 0 0;
  padding: 0;
  list-style: none;
}
.promo-slider .slick-dots li {
  width: clamp(10px, 0.8vw, 16px);
  height: clamp(10px, 0.8vw, 16px);
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.promo-slider .slick-dots li.slick-active {
  width: clamp(34px, 2.9vw, 58px);
  background: #FF844B;
}
.promo-slider .slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

/* --- Caption ------------------------------------------------------------- */
.promo-caption {
  max-width: 820px;
  margin: clamp(56px, 2.5vw, 116px) auto 0;
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 1.05vw, 21px);
  font-weight: 500;
  line-height: 1.57;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 767.98px) {
  .promo-section {
    background-size: 200% auto;
  }
  .promo-caption {
    max-width: 520px;
    letter-spacing: 1px;
  }
}
/* -------------------------------------------------------------------------
 *  Product card (shared)
 *  Used by the bundle carousel and the shop grid. Inner type and spacing are
 *  sized in container units so one card reads correctly at 413px (4-up) and
 *  354px (5-up), matching both designs.
 *
 *  The card's own padding is a percentage, not cqw: an element cannot query
 *  itself, so cqw there would resolve against the viewport.
 *
 *  Type is wrapped in max() so a card narrower than the two designs -- the
 *  3-up bundle carousel on a tablet, say -- cannot shrink its text below a
 *  legible floor.
 * ---------------------------------------------------------------------- */
.product-card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 5.81% 5.81% 7.5%;
  border: 1px solid #D6D7D7;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
}

/* Promo tag artwork ("Sale", "New" and friends), stacked over the top-left of
   the shot. Sized in container units so the badge keeps its proportion whether
   the grid runs 4-up or 5-up. */
.product-card-badges {
  position: absolute;
  top: 4cqw;
  left: 4cqw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2cqw;
  pointer-events: none;
}
.product-card-badges img {
  display: block;
  width: auto;
  max-width: 28cqw;
  height: auto;
}

.product-card-media {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: auto;
  aspect-ratio: 393/314;
  min-height: 0;
  overflow: hidden;
  margin: 0 -3.86cqw 7.16cqw;
}
.product-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.product-card-category {
  display: block;
  color: #999999;
  font-family: "Sen", sans-serif;
  font-size: max(12px, 4.96cqw);
  font-weight: 400;
  line-height: 1.2;
}

.product-card-title {
  margin: 1.93cqw 0 0;
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: max(13px, 5.75cqw);
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.product-card-prices {
  margin: 3.31cqw 0 5.23cqw;
  line-height: 1.1;
}

.product-card-price {
  display: block;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: max(15px, 6.89cqw);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1.5px;
  /* WooCommerce prints a sale price as `<del>old</del> <ins>new</ins>`. The
     design puts the current price first, so the pair is reversed here rather
     than reordered in markup that WooCommerce owns. */
}
.product-card-price:has(del) {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
}
.product-card-price del {
  color: #999999;
  font-size: clamp(12px, 0.75vw, 15px);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-decoration: line-through;
}
.product-card-price ins {
  background: none;
  color: inherit;
  text-decoration: none;
}

.product-card-old {
  display: block;
  margin-top: 0;
  color: #999999;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.75vw, 15px);
  font-weight: 400;
  line-height: 1.1;
  text-decoration: line-through;
}

.product-card-btn {
  margin-top: auto;
  padding: 6.06cqw 4.5cqw;
  font-size: max(13px, 5.05cqw);
  letter-spacing: 1px;
}

/* -------------------------------------------------------------------------
 *  Bundle carousel — "The ways to save"
 *  Four product cards per view with circled arrows outside the track.
 *  Design reference: 413x632 cards, 41px gutter, 65px arrows.
 * ---------------------------------------------------------------------- */
.bundles-section {
  padding: clamp(48px, 5.4vw, 108px) 0 clamp(40px, 4vw, 80px);
  background: #ffffff;
}

.bundles-head {
  margin-bottom: clamp(24px, 3.05vw, 61px);
}

.bundles-carousel {
  position: relative;
  max-width: 1934px;
  margin: 0 auto;
  padding: 0 clamp(38px, 4.05vw, 81px);
}

.bundles-slider:not(.slick-initialized) {
  display: flex;
  gap: 41px;
  overflow: hidden;
}
.bundles-slider:not(.slick-initialized) .bundles-slide {
  flex: 0 0 calc(25% - 30.75px);
}
.bundles-slider .slick-list {
  margin: 0 -20.5px;
}
.bundles-slider .slick-track {
  display: flex;
}
.bundles-slider .slick-slide {
  height: auto;
  padding: 0 20.5px;
}
.bundles-slider .slick-slide > div {
  height: 100%;
}

.bundles-slide {
  height: 100%;
}

/* --- Arrows -------------------------------------------------------------- */
.bundles-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.25vw, 65px);
  height: clamp(40px, 3.25vw, 65px);
  padding: 0;
  border: 2px solid #7F7F7F;
  border-radius: 50%;
  background: #ffffff;
  color: #7F7F7F;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.bundles-arrow i {
  font-size: clamp(16px, 1.3vw, 26px);
  line-height: 1;
}
.bundles-arrow:hover, .bundles-arrow:focus-visible {
  border-color: #345E41;
  color: #345E41;
}
.bundles-arrow.slick-disabled {
  opacity: 0.4;
  cursor: default;
}
.bundles-arrow--prev {
  left: 0;
}
.bundles-arrow--next {
  right: 0;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .bundles-slider:not(.slick-initialized) .bundles-slide {
    flex-basis: calc(33.333% - 27.347px);
  }
}
@media (max-width: 767.98px) {
  .bundles-slider:not(.slick-initialized) .bundles-slide {
    flex-basis: calc(50% - 20.5px);
  }
  .bundles-carousel {
    padding: 0 34px;
  }
}
@media (max-width: 575.98px) {
  .bundles-slider:not(.slick-initialized) .bundles-slide {
    flex-basis: 100%;
  }
  .bundles-carousel {
    padding: 0 24px;
  }
  .bundles-arrow {
    width: 36px;
    height: 36px;
  }
  .bundles-arrow i {
    font-size: 15px;
  }
}
/* -------------------------------------------------------------------------
 *  Image strip carousel
 *  Full-bleed row of square tiles with a hairline gutter.
 *  Design reference: 325px square tiles, 8px gaps, edge to edge.
 * ---------------------------------------------------------------------- */
.gallery-strip {
  padding: clamp(20px, 2.3vw, 46px) 4px;
  background: #ffffff;
  overflow: hidden;
}

.gallery-slider:not(.slick-initialized) {
  display: flex;
}
.gallery-slider:not(.slick-initialized) .gallery-slide {
  flex: 0 0 16.6667%;
}
.gallery-slider .slick-track {
  display: flex;
}
.gallery-slider .slick-slide {
  height: auto;
}

.gallery-slide {
  padding: 0 4px;
}
.gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .gallery-slider:not(.slick-initialized) .gallery-slide {
    flex-basis: 20%;
  }
}
@media (max-width: 1199.98px) {
  .gallery-slider:not(.slick-initialized) .gallery-slide {
    flex-basis: 25%;
  }
}
@media (max-width: 991.98px) {
  .gallery-slider:not(.slick-initialized) .gallery-slide {
    flex-basis: 33.3333%;
  }
}
@media (max-width: 767.98px) {
  .gallery-slider:not(.slick-initialized) .gallery-slide {
    flex-basis: 50%;
  }
}
/* -------------------------------------------------------------------------
 *  Shop grid — "Gear we think you'd love"
 *  Pill tabs over a 5-up product grid.
 *  Design reference: 354x530 cards, 24px column gap, 53px row gap.
 * ---------------------------------------------------------------------- */
.shop-section {
  padding: clamp(44px, 3vw, 85px) 0 clamp(40px, 7.5vw, 100px);
  background: #ffffff;
}

.shop-head {
  margin-bottom: clamp(32px, 3vw, 83px);
}

/* --- Tabs ---------------------------------------------------------------- */
.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.75vw, 15px);
  margin-bottom: clamp(26px, 3.1vw, 62px);
}

.shop-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(42px, 2.5vw, 72px);
  padding: clamp(10px, 1vw, 20px) clamp(18px, 1.7vw, 34px);
  border: 2px solid #08301A;
  border-radius: 999px;
  background: #ffffff;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.85vw, 19px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.shop-tab:hover, .shop-tab:focus-visible {
  background: rgba(8, 48, 26, 0.08);
}
.shop-tab.is-active {
  background: #08301A;
  color: #ffffff;
}
.shop-tab.is-active .shop-tab-label::before,
.shop-tab.is-active .shop-tab-label::after {
  content: "•";
  display: inline-block;
  margin: 0 4px;
  font-size: 0.8em;
}

/* --- Grid ---------------------------------------------------------------- */
.shop-panel[hidden] {
  display: none;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  -moz-column-gap: clamp(12px, 1.2vw, 24px);
       column-gap: clamp(12px, 1.2vw, 24px);
  row-gap: clamp(24px, 2.65vw, 53px);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .shop-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1099.98px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767.98px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-tab {
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    min-height: 40px;
  }
}
@media (max-width: 479.98px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}
/* -------------------------------------------------------------------------
 *  Feature band + testimonials
 *  Full-bleed textured orange band with four features, and a white
 *  testimonial card pulled up over its lower edge.
 *  Design reference: 560px band, 1572x434 card overlapping by 187px.
 * ---------------------------------------------------------------------- */
.features-section {
  position: relative;
  padding-bottom: clamp(36px, 3.65vw, 73px);
  background: #ffffff;
}

.features-band {
  padding: clamp(38px, 3.9vw, 78px) 0 clamp(114px, 12.55vw, 251px);
  background-color: #FF844B;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1696px;
  margin: 0 auto;
}

.feature {
  padding: 0 clamp(12px, 1.35vw, 27px);
  text-align: center;
}

.feature-icon {
  display: block;
  width: auto;
  height: clamp(44px, 3.75vw, 75px);
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.feature-title {
  margin: clamp(9px, 0.9vw, 18px) 0 0;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.feature-text {
  max-width: 370px;
  margin: clamp(11px, 1.2vw, 24px) auto 0;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 400;
  line-height: 1.35;
}

/* --- Testimonials --------------------------------------------------------- */
.testimonials {
  position: relative;
  z-index: 2;
  max-width: 1572px;
  margin: clamp(-187px, -9.35vw, -80px) auto 0;
  padding: clamp(22px, 2.2vw, 44px) 0 clamp(16px, 1.6vw, 32px);
  border: 2px solid #FF844B;
  border-radius: clamp(10px, 1vw, 20px);
  background: #ffffff;
}

.testimonials-slider:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}
.testimonials-slider:not(.slick-initialized) .testimonial {
  flex: 0 0 50%;
}
.testimonials-slider .slick-track {
  display: flex;
}
.testimonials-slider .slick-slide {
  height: auto;
}

.testimonial {
  padding: 0 clamp(12px, 1.5vw, 30px);
  text-align: center;
}

.testimonial-avatar {
  display: block;
  width: clamp(64px, 5.5vw, 110px);
  height: clamp(64px, 5.5vw, 110px);
  margin: 0 auto;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.testimonial-quote {
  max-width: 660px;
  margin: clamp(16px, 1.6vw, 32px) auto 0;
  padding: 0;
  border: 0;
  color: #999999;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1vw, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.92px;
  quotes: none;
}

.testimonial-name {
  margin: clamp(15px, 1.5vw, 30px) 0 0;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.testimonial-role {
  margin: clamp(4px, 0.35vw, 7px) 0 0;
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.75vw, 15px);
  font-weight: 400;
  line-height: 1.2;
}

/* --- Dots ----------------------------------------------------------------- */
.testimonials-slider .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.4vw, 8px);
  margin: clamp(23px, 2.3vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
.testimonials-slider .slick-dots li {
  width: clamp(8px, 0.55vw, 11px);
  height: clamp(8px, 0.55vw, 11px);
  border-radius: 50%;
  background: #C4C4C4;
  cursor: pointer;
  transition: background 0.3s ease;
}
.testimonials-slider .slick-dots li.slick-active {
  background: #FF844B;
}
.testimonials-slider .slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(28px, 5vw, 48px);
  }
  .features-band {
    padding-bottom: clamp(90px, 16vw, 150px);
  }
}
@media (max-width: 767.98px) {
  .testimonials-slider:not(.slick-initialized) .testimonial {
    flex-basis: 100%;
  }
}
@media (max-width: 575.98px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}
/* -------------------------------------------------------------------------
 *  Blog grid — "Insight & stories"
 *  Three cards: 2:1 image, date, title, read-more link.
 *  Design reference: 550x278 images, 52px gutter, hover outlines the image.
 * ---------------------------------------------------------------------- */
.blog-section {
  padding: clamp(35px, 0vw, 103px) 0 clamp(36px, 2vw, 80px);
  background: #ffffff;
}

.blog-head {
  margin-bottom: clamp(28px, 3.15vw, 63px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 52px);
  max-width: 1754px;
  margin: 0 auto;
}

.blog-card-media {
  display: block;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: clamp(8px, 0.8vw, 16px);
  line-height: 0;
  transition: border-color 0.25s ease;
}
.blog-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 550/278;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: clamp(6px, 0.7vw, 14px);
  transition: transform 0.6s ease;
}

.blog-card-date {
  display: block;
  margin-top: clamp(12px, 1.15vw, 23px);
  color: #BBBBBB;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 17px);
  font-weight: 400;
  line-height: 1.2;
}

.blog-card-title {
  margin: 2px 0 0;
  font-family: "Sen", sans-serif;
  font-size: clamp(16px, 1.3vw, 26px);
  font-weight: 400;
  line-height: 1.35;
}
.blog-card-title a {
  color: #111111;
  text-decoration: none;
  transition: color 0.25s ease;
}
.blog-card-title a:hover, .blog-card-title a:focus {
  color: #FF844B;
}

.blog-card-link {
  margin-top: clamp(8px, 0.55vw, 11px);
  font-size: clamp(13px, 0.9vw, 18px);
}

.blog-card:hover .blog-card-media,
.blog-card:focus-within .blog-card-media {
  border-color: #FF844B;
}
.blog-card:hover .blog-card-media img,
.blog-card:focus-within .blog-card-media img {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card-media img {
    transition: none;
  }
  .blog-card:hover .blog-card-media img,
  .blog-card:focus-within .blog-card-media img {
    transform: none;
  }
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639.98px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
/* -------------------------------------------------------------------------
 *  Back-in-stock notify button + dialog
 *  Stands in for add-to-cart on out-of-stock products.
 * ---------------------------------------------------------------------- */
.bis {
  margin-top: clamp(6px, 0.6vw, 12px);
}

.bis-open {
  gap: 10px;
}
.bis-open i {
  font-size: 0.95em;
}

.bis-note {
  margin: clamp(8px, 0.8vw, 16px) 0 0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

/* On a variable product the notify button lives inside the buy row so it shares
   that flex line with the favourite/compare buttons, the way add-to-cart does.
   Visibility is driven by the wrap class rather than a `hidden` attribute: an
   author `display` rule would override the UA stylesheet's [hidden] anyway. */
.bis--variation,
.bis-note--variation {
  display: none;
}

.single_variation_wrap.bis-has-notify .bis--variation {
  display: block;
  flex: 1 1 220px;
  min-width: 0;
  margin-top: 0;
}
.single_variation_wrap.bis-has-notify .bis-note--variation {
  display: block;
}

/* On a variable product the buy control is replaced rather than sat beside:
   WooCommerce only disables its button for an out-of-stock variation, which
   leaves a dead grey button next to the live one. The theme's favourite and
   compare buttons stay — wanting to save something you cannot buy yet is
   exactly the case they are for. */
.single_variation_wrap.bis-has-notify .woocommerce-variation-add-to-cart .quantity,
.single_variation_wrap.bis-has-notify .woocommerce-variation-add-to-cart .single_add_to_cart_button {
  display: none !important;
}
.single_variation_wrap.bis-has-notify .pdp-actions {
  margin-left: 0;
}

/* --- Dialog -------------------------------------------------------------- */
.bis-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.bis-modal.is-open {
  opacity: 1;
}
.bis-modal[hidden] {
  display: none;
}

.bis-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 48, 26, 0.62);
}

.bis-modal-panel {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: clamp(26px, 2.4vw, 48px);
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.bis-modal.is-open .bis-modal-panel {
  transform: translateY(0);
}

.bis-modal-close {
  position: absolute;
  top: clamp(12px, 1vw, 20px);
  right: clamp(12px, 1vw, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  background: #ffffff;
  color: #1A1A1A;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.bis-modal-close:hover, .bis-modal-close:focus-visible {
  border-color: #08301A;
  background: #08301A;
  color: #ffffff;
}

.bis-modal-title {
  margin: clamp(6px, 0.6vw, 12px) 0 0;
  padding-right: 44px;
  color: #1A1A1A;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(22px, 1.75vw, 35px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.bis-modal-text {
  margin: clamp(8px, 0.8vw, 16px) 0 clamp(18px, 1.7vw, 34px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 400;
  line-height: 1.6;
}

/* The honeypot must be unreachable rather than display:none — some bots skip
   fields they can see are hidden that way. */
.bis-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bis-message {
  display: block;
  margin: 0 0 clamp(12px, 1.1vw, 22px);
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: "Sen", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.bis-message[hidden] {
  display: none;
}
.bis-message.is-success {
  border-color: rgba(52, 94, 65, 0.35);
  background: #EFF6EE;
  color: #345E41;
}
.bis-message.is-error {
  border-color: rgba(231, 76, 60, 0.35);
  background: #FDF1EF;
  color: #B03A2E;
}

.bis-submit {
  margin-top: clamp(4px, 0.4vw, 8px);
}
.bis-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

body.bis-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .bis-modal,
  .bis-modal-panel {
    transition: none;
  }
  .bis-modal-panel {
    transform: none;
  }
}
@media (max-width: 575.98px) {
  .bis-modal {
    padding: 12px;
  }
  .bis-modal-panel {
    padding: 24px 20px;
  }
}
/* --- Header search suggestions ---------------------------------------- */
/* The panel hangs off the search form, which is the positioned ancestor. */
.esjae-search-form {
  /* While the panel is open the form reads as its head, not a lone pill. */
}
.esjae-search-form.has-suggestions {
  border-color: rgb(71.5294117647%, 71.5294117647%, 71.5294117647%);
}

.search-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: 100%;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 10px 0 0;
  border: 1px solid #D5D5D5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(8, 48, 26, 0.14);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  overscroll-behavior: contain;
}
.search-suggest[hidden] {
  display: none;
}
.search-suggest ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-suggest-group + .search-suggest-group {
  border-top: 1px solid rgba(213, 213, 213, 0.7);
  margin-top: 6px;
  padding-top: 6px;
}

.search-suggest-heading {
  margin: 0;
  padding: 8px 22px 6px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* --- Category rows ----------------------------------------------------- */
.search-suggest-term {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 22px;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-suggest-term i {
  color: #ABABAB;
  font-size: 14px;
}
.search-suggest-term .search-suggest-term-count {
  margin-left: auto;
  color: #ABABAB;
  font-size: 13px;
}
.search-suggest-term:hover, .search-suggest-term.is-active {
  background: rgba(52, 94, 65, 0.12);
  color: #08301A;
}
.search-suggest-term:hover i, .search-suggest-term.is-active i {
  color: #08301A;
}

/* --- Product rows ------------------------------------------------------ */
.search-suggest-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  color: #1A1A1A;
  cursor: pointer;
  transition: background 0.15s ease;
  /* The inset bar marks the keyboard position without shifting the row. */
}
.search-suggest-product:hover, .search-suggest-product.is-active {
  background: rgba(52, 94, 65, 0.12);
  box-shadow: inset 3px 0 0 #08301A;
}

.search-suggest-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(213, 213, 213, 0.8);
  border-radius: 12px;
  background: #f6f6f6;
}
.search-suggest-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.search-suggest-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.search-suggest-name {
  display: block;
  overflow: hidden;
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-price {
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.search-suggest-price del {
  margin-right: 6px;
  color: #ABABAB;
  font-weight: 500;
}
.search-suggest-price ins {
  text-decoration: none;
}

.search-suggest-stock {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 132, 75, 0.14);
  color: rgb(93.4117647059%, 29.5803921569%, 0%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* --- States and footer -------------------------------------------------- */
.search-suggest-loading,
.search-suggest-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 22px;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: 15px;
}

.search-suggest-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(8, 48, 26, 0.2);
  border-top-color: #08301A;
  border-radius: 50%;
  animation: esjae-suggest-spin 0.7s linear infinite;
}

@keyframes esjae-suggest-spin {
  to {
    transform: rotate(360deg);
  }
}
.search-suggest-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 22px;
  border-top: 1px solid rgba(213, 213, 213, 0.7);
  border-radius: 0 0 18px 18px;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-suggest-all span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest-all:hover, .search-suggest-all.is-active {
  background: rgba(52, 94, 65, 0.12);
  color: #08301A;
}

@media (max-width: 575px) {
  .search-suggest {
    max-height: 60vh;
  }
  .search-suggest-heading,
  .search-suggest-term,
  .search-suggest-product,
  .search-suggest-all {
    padding-left: 16px;
    padding-right: 16px;
  }
  .search-suggest-thumb {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }
}
.home div#content {
  display: none;
}

/* -------------------------------------------------------------------------
 *  About page
 *  Three bands on the home page's language: an intro with a masked photo and
 *  headline stats, a dark vision/mission pair, and the core-values grid.
 *  Design reference: 1400px content column, 6-up values grid at 3 x 2.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the About page runs on the same
   1890px container as the home sections. */
.esjae-about .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.about-intro > .container,
.about-pillars > .container,
.about-values > .container {
  max-width: 1450px;
}

/* --- Intro --------------------------------------------------------------- */
.about-intro {
  padding: clamp(44px, 4.6vw, 110px) 0 clamp(48px, 5vw, 120px);
  background: #ffffff;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4.2vw, 84px);
}

.about-intro-media {
  position: relative;
}

.about-intro-photo {
  overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 32px);
}
.about-intro-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 877/696;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.about-intro-photo:hover img {
  transform: scale(1.04);
}

.about-intro-badge {
  position: absolute;
  left: clamp(-8px, -0.8vw, 0px);
  bottom: clamp(16px, 2vw, 40px);
  padding: clamp(10px, 0.95vw, 19px) clamp(18px, 1.7vw, 34px);
  border: clamp(3px, 0.3vw, 6px) solid #ffffff;
  border-radius: 999px;
  background: #345E41;
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(15px, 1.25vw, 25px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-intro-heading {
  max-width: 15ch;
}

.about-intro-body {
  margin-top: clamp(18px, 1.9vw, 38px);
  color: #3F3F3F;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 400;
  line-height: 1.62;
}
.about-intro-body p {
  margin: 0 0 1em;
}
.about-intro-body p:last-child {
  margin-bottom: 0;
}

/* Headline stats. A <dl> so each figure keeps its label as a pair. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 32px);
  margin: clamp(28px, 2.8vw, 56px) 0 0;
  padding: clamp(20px, 1.9vw, 38px) 0 0;
  border-top: 1px solid #D5D5D5;
}

.about-stat {
  min-width: 0;
}

.about-stat-value {
  margin: 0;
  color: #08301A;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(26px, 2.3vw, 46px);
  font-weight: 400;
  line-height: 1;
}

.about-stat-label {
  margin: clamp(5px, 0.5vw, 10px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 16px);
  font-weight: 500;
  line-height: 1.35;
}

/* --- Vision & mission ---------------------------------------------------- */
.about-pillars {
  padding: clamp(48px, 5vw, 120px) 0;
  background: #08301A;
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.4vw, 48px);
}

.about-pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.8vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: clamp(14px, 1.4vw, 28px);
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.about-pillar:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-6px);
}

.about-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 4.2vw, 84px);
  height: clamp(52px, 4.2vw, 84px);
  margin-bottom: clamp(18px, 1.8vw, 36px);
  border-radius: 50%;
  background: #FF844B;
  color: #08301A;
  font-size: clamp(21px, 1.7vw, 34px);
  line-height: 1;
}

.about-pillar-eyebrow {
  margin-bottom: clamp(8px, 0.75vw, 15px);
}

.about-pillar-title {
  margin: 0;
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(22px, 1.85vw, 37px);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
}

.about-pillar-text {
  margin: clamp(12px, 1.15vw, 23px) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 400;
  line-height: 1.6;
}

/* --- Core values --------------------------------------------------------- */
.about-values {
  padding: clamp(48px, 5vw, 120px) 0;
  background: #ffffff;
}

.about-values-head {
  max-width: 900px;
  margin: 0 auto clamp(36px, 4vw, 80px);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 3.2vw, 64px) clamp(24px, 2.6vw, 52px);
}

.about-value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 1.3vw, 26px);
}

.about-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 3.5vw, 70px);
  height: clamp(48px, 3.5vw, 70px);
  border-radius: 50%;
  background: #08301A;
  color: #ffffff;
  font-size: clamp(19px, 1.45vw, 29px);
  line-height: 1;
  transition: background 0.3s ease, transform 0.3s ease;
}

.about-value:hover .about-value-icon {
  background: #FF844B;
  color: #08301A;
  transform: translateY(-4px);
}

.about-value-body {
  min-width: 0;
}

.about-value-title {
  margin: 0;
  padding-top: clamp(6px, 0.6vw, 12px);
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-size: clamp(17px, 1.2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}

.about-value-text {
  margin: clamp(8px, 0.8vw, 16px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.95vw, 19px);
  font-weight: 400;
  line-height: 1.62;
}

@media (prefers-reduced-motion: reduce) {
  .about-intro-photo img,
  .about-pillar,
  .about-value-icon {
    transition: none;
  }
  .about-intro-photo:hover img,
  .about-pillar:hover,
  .about-value:hover .about-value-icon {
    transform: none;
  }
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .about-values-grid {
    gap: 40px 32px;
  }
  .about-intro-heading {
    max-width: 100%;
  }
}
@media (max-width: 991.98px) {
  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 52px);
  }
  .about-intro-media {
    max-width: 640px;
    margin: 0 auto;
  }
  .about-intro-heading {
    font-size: clamp(28px, 4.6vw, 44px);
  }
  .about-intro-body {
    font-size: clamp(15px, 2vw, 18px);
  }
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }
  .about-pillar-title {
    font-size: clamp(22px, 3.4vw, 30px);
  }
  .about-pillar-text {
    font-size: clamp(15px, 2vw, 18px);
  }
  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .about-values-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-values-head {
    margin-bottom: 36px;
  }
  .about-value-title {
    font-size: 18px;
  }
  .about-value-text {
    font-size: 15px;
  }
  .about-intro-badge {
    left: 0;
    font-size: 15px;
  }
}
@media (max-width: 575.98px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
  .about-stat:last-child {
    grid-column: 1/-1;
  }
  .about-pillar {
    padding: 26px 22px;
  }
  .about-value {
    gap: 14px;
  }
  .about-value-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}
/* --- Closing call to action ---------------------------------------------- */
/* Full-bleed orange band, echoing the home page's feature band, so the page
   breaks cleanly off the white values grid and into the dark footer. */
.about-cta {
  padding: clamp(44px, 4.6vw, 110px) 0;
  background-color: #FF844B;
}

.about-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3.2vw, 64px);
  max-width: 1450px;
  margin: 0 auto;
}

.about-cta-eyebrow {
  color: #08301A;
}

.about-cta-heading {
  color: #08301A;
}

.about-cta-text {
  margin: clamp(14px, 1.4vw, 28px) 0 0;
  max-width: 46ch;
  color: rgba(8, 48, 26, 0.82);
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 400;
  line-height: 1.6;
}

.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.1vw, 22px);
}

/* `.theme-btn` is the orange pill, which would vanish on this band — both
   buttons are restated against it here. */
.about-cta-btn {
  background: #08301A;
  border-color: #08301A;
  color: #ffffff;
}
.about-cta-btn:hover, .about-cta-btn:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #08301A;
}
.about-cta-btn i {
  font-size: 0.9em;
}

.about-cta-btn--ghost {
  background: transparent;
  border-color: rgba(8, 48, 26, 0.55);
  color: #08301A;
}
.about-cta-btn--ghost:hover, .about-cta-btn--ghost:focus-visible {
  background: #08301A;
  border-color: #08301A;
  color: #ffffff;
}

.about-cta-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  margin: 0;
  color: rgba(8, 48, 26, 0.78);
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  justify-content: flex-end;
}
.about-cta-note i {
  font-size: 1.05em;
}

@media (max-width: 991.98px) {
  .about-cta-inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
  .about-cta-heading {
    font-size: clamp(28px, 4.6vw, 44px);
  }
  .about-cta-text {
    max-width: 100%;
    font-size: clamp(15px, 2vw, 18px);
  }
  .about-cta-actions,
  .about-cta-note {
    justify-content: flex-start;
    text-align: left;
  }
}
@media (max-width: 575.98px) {
  .about-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .about-cta-btn {
    width: 100%;
  }
  .about-cta-note {
    margin-top: 4px;
  }
}
/* -------------------------------------------------------------------------
 *  Contact page
 *  Centred heading over four channel cards, then the enquiry form beside a
 *  dark store aside, closing on a full-bleed map.
 *  Design reference: 1450px content column, 4-up channels, 1.35fr/1fr main.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the Contact page runs on the same
   1890px container as the home sections. */
.esjae-contact .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.contact-intro > .container,
.contact-main > .container {
  max-width: 1450px;
}

/* --- Heading + channels -------------------------------------------------- */
.contact-intro {
  padding: clamp(44px, 4.6vw, 110px) 0 clamp(40px, 4vw, 96px);
  background: #ffffff;
}

.contact-intro-head {
  max-width: 900px;
  margin: 0 auto clamp(32px, 3.6vw, 72px);
}

.contact-intro-lead {
  margin: clamp(14px, 1.4vw, 28px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 400;
  line-height: 1.62;
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 32px);
}

.contact-channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.1vw, 42px) clamp(20px, 1.9vw, 38px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.contact-channel:hover, .contact-channel:focus-visible {
  border-color: #345E41;
  box-shadow: 0 14px 30px rgba(8, 48, 26, 0.12);
  transform: translateY(-6px);
}
.contact-channel:hover .contact-channel-icon, .contact-channel:focus-visible .contact-channel-icon {
  background: #FF844B;
  color: #08301A;
}

.contact-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 3.4vw, 68px);
  height: clamp(46px, 3.4vw, 68px);
  margin-bottom: clamp(14px, 1.4vw, 28px);
  border-radius: 50%;
  background: #08301A;
  color: #ffffff;
  font-size: clamp(18px, 1.4vw, 28px);
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}

.contact-channel-label {
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.contact-channel-value {
  margin-top: clamp(7px, 0.65vw, 13px);
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-size: clamp(16px, 1.1vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.contact-channel-note {
  margin-top: clamp(5px, 0.45vw, 9px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 17px);
  font-weight: 400;
  line-height: 1.4;
}

/* --- Form + aside -------------------------------------------------------- */
.contact-main {
  padding: 0 0 clamp(48px, 5vw, 120px);
  background: #ffffff;
}

.contact-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 2.4vw, 48px);
}

.contact-form-card {
  padding: clamp(26px, 2.6vw, 52px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
}

.contact-form-title {
  margin: 0;
  color: #1A1A1A;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(24px, 2vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact-form-note {
  margin: clamp(6px, 0.6vw, 12px) 0 clamp(20px, 2vw, 40px);
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 400;
  line-height: 1.5;
}

/* Result banner above the form. */
.contact-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(20px, 2vw, 40px);
  padding: clamp(14px, 1.2vw, 24px) clamp(16px, 1.4vw, 28px);
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.9vw, 17px);
  line-height: 1.5;
}
.contact-notice i {
  flex: 0 0 auto;
  margin-top: 0.15em;
  font-size: 1.15em;
  line-height: 1.2;
}
.contact-notice strong {
  display: block;
  font-weight: 700;
}
.contact-notice--success {
  border-color: rgba(52, 94, 65, 0.35);
  background: #EFF6EE;
  color: #345E41;
}
.contact-notice--error {
  border-color: rgba(231, 76, 60, 0.35);
  background: #FDF1EF;
  color: #B03A2E;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(14px, 1.2vw, 24px);
}

/* `.theme-field` in _base.scss carries the label and input styling; only the
   error state is added here. */
.theme-field--invalid input[type=text],
.theme-field--invalid input[type=email],
.theme-field--invalid input[type=tel],
.theme-field--invalid select,
.theme-field--invalid textarea {
  border-color: #E74C3C;
}

.contact-field-error {
  display: block;
  margin-top: 6px;
  color: #B03A2E;
  font-family: "Sen", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* The honeypot must be unreachable rather than display:none — some bots skip
   fields they can see are hidden that way. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-submit {
  margin-top: clamp(12px, 1.2vw, 24px);
}
.contact-form-submit i {
  font-size: 0.9em;
}

.contact-aside {
  padding: clamp(26px, 2.6vw, 52px);
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #08301A;
}

.contact-aside-title {
  margin: 0;
  color: #ffffff;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(22px, 1.85vw, 37px);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
}

.contact-aside-text {
  margin: clamp(10px, 1vw, 20px) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.95vw, 19px);
  font-weight: 400;
  line-height: 1.6;
}

.contact-aside-block {
  margin-top: clamp(22px, 2.2vw, 44px);
  padding-top: clamp(22px, 2.2vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-aside-label {
  display: block;
  margin-bottom: clamp(8px, 0.8vw, 16px);
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.75vw, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.contact-aside-address {
  margin: 0;
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1vw, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}

.contact-hours {
  margin: 0;
}

.contact-hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(6px, 0.55vw, 11px) 0;
}
.contact-hours-row dt {
  color: rgba(255, 255, 255, 0.78);
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.9vw, 18px);
  font-weight: 400;
  line-height: 1.4;
}
.contact-hours-row dd {
  margin: 0;
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.9vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 2.7vw, 54px);
  height: clamp(38px, 2.7vw, 54px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #ffffff;
  font-size: clamp(15px, 1vw, 20px);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.contact-social a:hover, .contact-social a:focus-visible {
  border-color: #FF844B;
  background: #FF844B;
  color: #08301A;
}

/* --- Map ----------------------------------------------------------------- */
.contact-map {
  display: block;
  line-height: 0;
  background: #EFF6EE;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 34vw, 520px);
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .contact-channel,
  .contact-channel-icon,
  .contact-social a {
    transition: none;
  }
  .contact-channel:hover,
  .contact-channel:focus-visible {
    transform: none;
  }
}
/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .contact-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .contact-intro-head .section-heading {
    font-size: clamp(28px, 4.6vw, 44px);
  }
  .contact-intro-lead {
    font-size: clamp(15px, 2vw, 18px);
  }
  .contact-main-grid {
    grid-template-columns: 1fr;
  }
  .contact-aside-title {
    font-size: clamp(22px, 3.4vw, 30px);
  }
  .contact-aside-text {
    font-size: clamp(15px, 2vw, 18px);
  }
}
@media (max-width: 767.98px) {
  .contact-channels {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-form-submit {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .contact-form-card,
  .contact-aside {
    padding: 24px 20px;
  }
  .contact-channel {
    padding: 20px 18px;
  }
  .contact-hours-row {
    flex-direction: column;
    gap: 2px;
  }
  .contact-hours-row dd {
    white-space: normal;
  }
}
/* -------------------------------------------------------------------------
 *  Product archives — shop, category, tag and search listings
 *  Same language as the home page: orange eyebrow over an Anton heading, the
 *  pill row from the shop tabs, and the shared product card in a 5-up grid.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the listing runs on the same
   1890px container as the home sections. */
.archive.post-type-archive-product .site-content > .col-full,
.archive.tax-product_cat .site-content > .col-full,
.archive.tax-product_tag .site-content > .col-full,
.woocommerce-shop .site-content > .col-full,
.search-results.woocommerce .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.shop-archive {
  display: block;
  background: #ffffff;
}

/* --- Header -------------------------------------------------------------- */
.shop-hero {
  padding: clamp(28px, 3.1vw, 62px) 0 clamp(20px, 2vw, 40px);
  background: #ffffff;
}

.shop-hero-head {
  margin: 0 auto;
  max-width: 1000px;
}

.shop-hero-text {
  margin-top: clamp(10px, 0.9vw, 18px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 0.95vw, 19px);
  line-height: 1.7;
}
.shop-hero-text p {
  margin: 0 0 10px;
}
.shop-hero-text p:last-child {
  margin-bottom: 0;
}

/* Category chips: the shop tab pill, as links. */
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.75vw, 15px);
  margin-top: clamp(22px, 2.2vw, 44px);
}

.shop-chip {
  text-decoration: none;
}
.shop-chip:hover, .shop-chip:focus-visible {
  color: #08301A;
}
.shop-chip.is-active:hover, .shop-chip.is-active:focus-visible {
  color: #ffffff;
}

/* --- Layout -------------------------------------------------------------- */
.shop-archive-body {
  padding-bottom: clamp(44px, 5vw, 100px);
}

.shop-layout {
  display: grid;
  grid-template-columns: clamp(240px, 19vw, 320px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 2.4vw, 48px);
}

.shop-results {
  min-width: 0;
}

/* --- Filter sidebar ------------------------------------------------------ */
.shop-filters {
  position: sticky;
  top: 24px;
  padding: clamp(16px, 1.3vw, 26px) clamp(16px, 1.3vw, 26px) clamp(8px, 0.7vw, 14px);
  border: 1px solid #D6D7D7;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
}

.shop-filters-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: clamp(12px, 1vw, 18px);
  border-bottom: 1px solid #ECECEC;
}

.shop-filters-title {
  flex: 1 1 auto;
  margin: 0;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(18px, 1.15vw, 23px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.shop-filter-clear {
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.shop-filter-clear:hover, .shop-filter-clear:focus-visible {
  color: rgb(100%, 35.3647058824%, 5.4117647059%);
}

.shop-filters-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  background: #ffffff;
  color: #08301A;
  cursor: pointer;
}

.shop-filter-group {
  padding: clamp(14px, 1.1vw, 22px) 0;
  border-bottom: 1px solid #ECECEC;
}
.shop-filter-group:last-child {
  border-bottom: 0;
}
.shop-filter-group.is-collapsed .shop-filter-list,
.shop-filter-group.is-collapsed .shop-filter-price {
  display: none;
}
.shop-filter-group.is-collapsed .shop-filter-heading i {
  transform: rotate(-90deg);
}

.shop-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.shop-filter-heading i {
  color: #ABABAB;
  font-size: 0.85em;
  transition: transform 0.25s ease;
}

.shop-filter-list {
  margin: clamp(10px, 0.85vw, 16px) 0 0;
  padding: 0;
  list-style: none;
}
.shop-filter-list li + li {
  margin-top: 2px;
}

.shop-filter-link,
.shop-filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.82vw, 16px);
  font-weight: 400;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.shop-filter-link:hover, .shop-filter-link:focus-visible,
.shop-filter-check:hover,
.shop-filter-check:focus-visible {
  color: #FF844B;
}

.shop-filter-link {
  justify-content: space-between;
}
.shop-filter-link.is-active {
  color: #FF844B;
  font-weight: 700;
}

.shop-filter-name {
  min-width: 0;
}

.shop-filter-count {
  flex: none;
  color: #ABABAB;
  font-size: 0.85em;
}

.shop-filter-box {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid #D5D5D5;
  border-radius: 4px;
  background: #ffffff;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.shop-filter-box i {
  opacity: 0;
}

.shop-filter-check.is-checked {
  color: #08301A;
  font-weight: 700;
}
.shop-filter-check.is-checked .shop-filter-box {
  border-color: #FF844B;
  background: #FF844B;
}
.shop-filter-check.is-checked .shop-filter-box i {
  opacity: 1;
}

.shop-filter-stars {
  display: inline-flex;
  gap: 2px;
  color: #FF844B;
  font-size: 0.8em;
}

/* Price */
.shop-filter-price {
  margin-top: clamp(12px, 1vw, 18px);
}

.shop-filter-price-fields {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-filter-price-field {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.shop-filter-price-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D5D5D5;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.shop-filter-price-field input::-webkit-outer-spin-button, .shop-filter-price-field input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.shop-filter-price-field input::-moz-placeholder {
  color: #ABABAB;
  font-weight: 400;
}
.shop-filter-price-field input::placeholder {
  color: #ABABAB;
  font-weight: 400;
}
.shop-filter-price-field input:focus {
  border-color: #345E41;
  outline: none;
}

.shop-filter-price-sep {
  flex: none;
  color: #ABABAB;
}

.shop-filter-price-range {
  margin: 10px 0 12px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 600;
  text-align: center;
}
.shop-filter-price-range .woocommerce-Price-amount {
  color: #5A5A5A;
}

/* --- Active filter chips ------------------------------------------------- */
.shop-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(18px, 1.6vw, 32px);
}

.shop-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.shop-filter-pill i {
  font-size: 1.15em;
  line-height: 1;
}
.shop-filter-pill:hover, .shop-filter-pill:focus-visible {
  border-color: #FF844B;
  color: #FF844B;
}

/* --- Toolbar ------------------------------------------------------------- */
.shop-filters-open {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 2px solid #08301A;
  border-radius: 999px;
  background: #ffffff;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.75vw, 14px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.shop-filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.45);
}
.shop-filters-backdrop[hidden] {
  display: none;
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(22px, 2.2vw, 44px);
  padding: clamp(12px, 1vw, 20px) 0;
  border-top: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
}
.shop-toolbar .woocommerce-result-count {
  margin: 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 16px);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.shop-toolbar .woocommerce-ordering {
  margin: 0;
}
.shop-toolbar .woocommerce-ordering select {
  min-width: 220px;
  padding: 12px 42px 12px 20px;
  border: 2px solid #08301A;
  border-radius: 999px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2308301A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.75vw, 14px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.shop-toolbar .woocommerce-ordering select:focus {
  outline: none;
}

/* --- Grid ---------------------------------------------------------------- */
.shop-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  -moz-column-gap: clamp(12px, 1.2vw, 24px);
       column-gap: clamp(12px, 1.2vw, 24px);
  row-gap: clamp(24px, 2.65vw, 53px);
}

/* --- Pagination ---------------------------------------------------------- */
.shop-pagination {
  margin-top: clamp(30px, 3vw, 60px);
}
.shop-pagination .woocommerce-pagination {
  float: none;
  width: 100%;
  text-align: center;
}
.shop-pagination ul.page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.shop-pagination ul.page-numbers li {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
}
.shop-pagination {
  /* Storefront's pagination rules load after this sheet *and* outweigh a
     plain `.shop-pagination .page-numbers`, so the pills are re-declared
     through the full `…ul.page-numbers li` path to win on specificity. */
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(38px, 2.8vw, 48px);
  height: clamp(38px, 2.8vw, 48px);
  padding: 0 12px;
  border: 2px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers:hover, .shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers:focus-visible {
  border-color: #08301A;
  background: #08301A;
  color: #ffffff;
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.current {
  border-color: #08301A;
  background: #08301A;
  color: #ffffff;
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border-color: transparent;
  background: none;
  color: #ABABAB;
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers {
  /* WooCommerce prints a literal arrow character and Storefront layers a
     Font Awesome glyph over it. Hide both and draw the chevron from the
     icon font the theme already enqueues. */
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.prev, .shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.next {
  padding: 0;
  font-size: 0;
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.prev::after, .shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.next::after {
  font-family: "bootstrap-icons";
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: normal;
  line-height: 1;
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.prev::after {
  content: "\f284";
}
.shop-pagination .woocommerce-pagination ul.page-numbers li .page-numbers.next::after {
  content: "\f285";
}

/* --- Empty state --------------------------------------------------------- */
.shop-empty {
  padding: clamp(30px, 3vw, 60px) 0;
  text-align: center;
}
.shop-empty .woocommerce-info,
.shop-empty .woocommerce-message,
.shop-empty .woocommerce-error {
  display: block;
  margin: 0 auto clamp(18px, 1.5vw, 30px);
  max-width: 640px;
  padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.3vw, 26px);
  border-top: 0;
  border-left: 4px solid #FF844B;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #FAFAF8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  text-align: left;
  list-style: none;
}
.shop-empty .woocommerce-info::before,
.shop-empty .woocommerce-message::before,
.shop-empty .woocommerce-error::before {
  display: none;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .shop-archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .shop-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Below this the sidebar becomes a drawer over the results. */
@media (max-width: 991.98px) {
  .shop-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .shop-filters-open {
    display: inline-flex;
  }
  .shop-filters-close {
    display: flex;
  }
  .shop-filters {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: min(340px, 88vw);
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
    padding-bottom: 40px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .shop-filters.is-open {
    transform: translateX(0);
  }
  body.shop-filters-drawer-open {
    overflow: hidden;
  }
  body.shop-filters-drawer-open .float-actions {
    display: none;
  }
  .shop-toolbar {
    justify-content: flex-start;
  }
  .shop-toolbar .woocommerce-ordering {
    margin-left: auto;
  }
}
@media (max-width: 767.98px) {
  .shop-toolbar .woocommerce-result-count {
    order: 3;
    width: 100%;
    text-align: center;
  }
  .shop-toolbar .woocommerce-ordering,
  .shop-toolbar .woocommerce-ordering select,
  .shop-toolbar .shop-filters-open {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .shop-archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -------------------------------------------------------------------------
 *  Product detail page
 *  Built on the home page's language: orange eyebrow over an Anton heading,
 *  bordered white cards, pill tabs and the shared product card for the
 *  "You may also like" row.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the product page runs on the same
   1890px container as the home sections. */
.single-product .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.pdp {
  display: block;
  background: #ffffff;
}

/* The breadcrumb bar itself lives in _base.scss — the archive uses it too. */
/* --- Layout -------------------------------------------------------------- */
.esjae-product {
  margin: 0;
}

/* The sticky gallery below needs an unbroken chain to the page scroller, and an
   ancestor whose overflow is anything but `visible` becomes the scrollport it
   sticks inside instead. Two sit in the way on this page:
   woocommerce.css clips `.single-product div.product`, and Storefront guards
   `#page` against horizontal overflow. */
.single-product div.product.esjae-product {
  overflow: visible;
}

/* `clip` keeps Storefront's horizontal guard without creating a scroll
   container. Browsers without it simply keep today's non-sticky gallery. */
@supports (overflow: clip) {
  body.single-product #page {
    overflow-x: clip;
    overflow-y: visible;
  }
}
.pdp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 3.35vw, 67px);
  padding: clamp(28px, 3vw, 60px) 0 clamp(32px, 3.5vw, 70px);
}

/* The gallery holds its place while the (much taller) summary column scrolls.
   Sticky sits on the grid item rather than on .pdp-gallery: the item is the one
   whose containing block is the full-height .pdp-main, so it is the one with
   room to travel. */
.pdp-main-media {
  position: sticky;
  top: clamp(16px, 1.6vw, 32px);
}

/* --- Gallery ------------------------------------------------------------- */
.pdp-gallery {
  display: grid;
  grid-template-columns: clamp(66px, 5.4vw, 108px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(10px, 0.9vw, 18px);
}

.pdp-gallery--single {
  grid-template-columns: minmax(0, 1fr);
}

.pdp-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 14px);
  max-height: 100%;
}

.pdp-thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: clamp(4px, 0.4vw, 8px);
  border: 1px solid #D6D7D7;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.pdp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.pdp-thumb:hover, .pdp-thumb:focus-visible {
  border-color: #345E41;
}
.pdp-thumb.is-active {
  border-color: #FF844B;
  box-shadow: 0 0 0 1px #FF844B inset;
}

.pdp-gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: clamp(16px, 1.8vw, 36px);
  border: 1px solid #D6D7D7;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
  overflow: hidden;
}

.pdp-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

.pdp-badge {
  position: absolute;
  top: clamp(12px, 1.1vw, 22px);
  left: clamp(12px, 1.1vw, 22px);
  z-index: 2;
  padding: clamp(7px, 0.6vw, 12px) clamp(12px, 1vw, 20px);
  border-radius: 999px;
  background: #08301A;
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 14px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pdp-badge--sale {
  background: #FF844B;
  color: #08301A;
}

/* Promo tag artwork, opposite the sale/featured pill so the two never overlap. */
.pdp-promo-badges {
  position: absolute;
  top: clamp(12px, 1.1vw, 22px);
  right: clamp(12px, 1.1vw, 22px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(8px, 0.7vw, 14px);
  pointer-events: none;
}
.pdp-promo-badges img {
  display: block;
  width: auto;
  max-width: clamp(70px, 8vw, 150px);
  height: auto;
}

/* --- Summary ------------------------------------------------------------- */
.pdp-summary {
  max-width: 820px;
  padding-top: clamp(0px, 0.5vw, 10px);
}

.pdp-eyebrow {
  margin-bottom: clamp(7px, 0.6vw, 12px);
}

.pdp-title {
  margin: 0;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(26px, 2.45vw, 47px);
  font-weight: 400;
  line-height: 1.18;
  text-transform: uppercase;
}

.pdp-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, 0.85vw, 17px);
}

.pdp-stars {
  display: inline-flex;
  gap: 3px;
  color: #FF844B;
  font-size: clamp(13px, 0.8vw, 16px);
  line-height: 1;
}

.pdp-review-link {
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.75vw, 15px);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}
.pdp-review-link:hover, .pdp-review-link:focus-visible {
  color: #FF844B;
}

.pdp-price {
  margin-top: clamp(14px, 1.2vw, 24px);
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(24px, 1.5vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.pdp-price .price,
.pdp-price .woocommerce-Price-amount {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.pdp-price ins {
  background: none;
  color: inherit;
  text-decoration: none;
}
.pdp-price del {
  margin-right: 10px;
  color: #ABABAB;
  font-size: 0.58em;
  font-weight: 400;
  opacity: 1;
}
.pdp-price del .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
}
.pdp-price .woocommerce-price-suffix {
  display: inline-block;
  margin-left: 8px;
  color: #ABABAB;
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.pdp-sold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(8px, 0.7vw, 14px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 16px);
  font-weight: 500;
}
.pdp-sold strong {
  color: #1A1A1A;
  font-weight: 700;
}

.pdp-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(10px, 0.85vw, 17px) 0 0;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 16px);
  font-weight: 600;
}
.pdp-stock.is-in-stock {
  color: #2C6F4B;
}
.pdp-stock.is-out-of-stock {
  color: #C0392B;
}

.pdp-excerpt {
  margin-top: clamp(14px, 1.2vw, 24px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 0.95vw, 19px);
  font-weight: 400;
  line-height: 1.7;
}
.pdp-excerpt p {
  margin: 0 0 12px;
}
.pdp-excerpt p:last-child {
  margin-bottom: 0;
}
.pdp-excerpt ul,
.pdp-excerpt ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

/* --- Add to cart --------------------------------------------------------- */
.pdp-cart {
  margin-top: clamp(20px, 1.8vw, 36px);
  padding-top: clamp(20px, 1.8vw, 36px);
  border-top: 1px solid #E6E6E6;
}
.pdp-cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
  margin: 0;
}
.pdp-cart form.variations_form {
  display: block;
}
.pdp-cart .stock {
  display: none;
}
.pdp-cart .woocommerce-variation-price {
  margin-bottom: 16px;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(19px, 1.3vw, 26px);
  font-weight: 700;
}
.pdp-cart .woocommerce-variation-price del {
  margin-right: 8px;
  color: #ABABAB;
  font-size: 0.65em;
  font-weight: 400;
}
.pdp-cart .woocommerce-variation-price ins {
  background: none;
  text-decoration: none;
}
.pdp-cart .woocommerce-variation-availability {
  margin-bottom: 12px;
  color: #2C6F4B;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
}
.pdp-cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
}

/* Quantity: bordered pill with the stepper buttons injected by the JS. */
.pdp-cart .quantity {
  display: inline-flex;
  align-items: center;
  height: clamp(48px, 3.5vw, 62px);
  border: 2px solid #08301A;
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}
.pdp-cart .quantity input.qty {
  width: clamp(44px, 3vw, 58px);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}
.pdp-cart .quantity input.qty::-webkit-outer-spin-button, .pdp-cart .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.pdp-cart .quantity input.qty:focus {
  outline: none;
}

.pdp-qty-btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 2.6vw, 46px);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(17px, 1.1vw, 21px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.pdp-qty-btn:hover, .pdp-qty-btn:focus-visible {
  background: #08301A;
  color: #ffffff;
}

/* WooCommerce prints its own classes here, so the pill is restated rather than
   composed from `.theme-btn`. */
.pdp-cart .single_add_to_cart_button,
.pdp-cart button.button.alt,
.pdp-cart .added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 1.1vw, 22px) clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: #FF844B;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  min-height: clamp(48px, 3.5vw, 62px);
  flex: 1 1 auto;
  max-width: 340px;
}
.pdp-cart .single_add_to_cart_button:hover, .pdp-cart .single_add_to_cart_button:focus,
.pdp-cart button.button.alt:hover,
.pdp-cart button.button.alt:focus,
.pdp-cart .added_to_cart:hover,
.pdp-cart .added_to_cart:focus {
  background: rgb(100%, 39.4647058824%, 11.4117647059%);
  color: #345E41;
}
.pdp-cart .single_add_to_cart_button.disabled, .pdp-cart .single_add_to_cart_button:disabled,
.pdp-cart button.button.alt.disabled,
.pdp-cart button.button.alt:disabled,
.pdp-cart .added_to_cart.disabled,
.pdp-cart .added_to_cart:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Favourite / compare, sharing the cart row with the button. */
.pdp-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(8px, 0.7vw, 14px);
}

.pdp-action {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 3.5vw, 62px);
  height: clamp(48px, 3.5vw, 62px);
  padding: 0;
  border: 2px solid #08301A;
  border-radius: 999px;
  color: #08301A;
  font-size: clamp(17px, 1.1vw, 21px);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  /* Storefront styles bare `button`, and its `button:hover` (0,1,1) outranks a
     plain `.pdp-action` (0,1,0), so each state sets its own background. */
}
.pdp-action, .pdp-action:hover, .pdp-action:focus, .pdp-action:focus-visible, .pdp-action:active {
  background-color: #ffffff;
}
.pdp-action i {
  display: block;
  line-height: 1;
}
.pdp-action:hover, .pdp-action:focus-visible {
  background-color: #08301A;
  color: #ffffff;
}
.pdp-action:focus-visible {
  outline: 2px solid #08301A;
  outline-offset: 2px;
}
.pdp-action.is-active {
  border-color: #08301A;
}
.pdp-action.is-active, .pdp-action.is-active:hover, .pdp-action.is-active:focus, .pdp-action.is-active:focus-visible, .pdp-action.is-active:active {
  background-color: #08301A;
  color: #ffffff;
}
.pdp-action--favourite.is-active {
  border-color: #FF844B;
}
.pdp-action--favourite.is-active, .pdp-action--favourite.is-active:hover, .pdp-action--favourite.is-active:focus, .pdp-action--favourite.is-active:focus-visible, .pdp-action--favourite.is-active:active {
  background-color: #FF844B;
  color: #08301A;
}

/* YITH Wishlist's own button, printed via shortcode into `.pdp-actions`
   (inc/product-actions.php) so it sits beside Compare instead of its plugin
   default further down the page. Restyled to match `.pdp-action` — the label
   is kept for screen readers but hidden visually since the row is icon-only. */
.pdp-actions .yith-wcwl-add-to-wishlist {
  display: flex;
  margin-top: 2px;
}

.pdp-actions .yith-wcwl-add-button {
  display: flex;
}

.yith-wcwl-add-button .add_to_wishlist svg.yith-wcwl-icon-svg {
  margin-right: 0;
}

/* The initial "add to wishlist" link — scoped to `.add_to_wishlist` (not a
   bare `a`) since the "added" state below swaps in a *different* link
   ("Browse wishlist") that this circular treatment isn't meant for. */
.pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 3.5vw, 62px);
  height: clamp(48px, 3.5vw, 62px);
  padding: 0;
  border: 2px solid #08301A;
  border-radius: 999px;
  color: #08301A;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover, .pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist:focus-visible {
  background-color: #08301A;
  color: #ffffff;
}
.pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist:hover svg, .pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist:focus-visible svg {
  fill: #ffffff;
  stroke: #ffffff;
}
.pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist svg {
  width: clamp(17px, 2.1vw, 30px);
  height: clamp(17px, 2.1vw, 30px);
  fill: currentColor;
  stroke: currentColor;
}
.pdp-actions .yith-wcwl-add-to-wishlist a.add_to_wishlist span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Added to wishlist" state — YITH swaps the button link above for this
   feedback line + a "Browse wishlist" link. Kept compact and inline so the
   button row doesn't jump in height when it appears. */
.pdp-actions .yith-wcwl-wishlistaddedbrowse {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 0.7vw, 14px);
}

.pdp-actions .yith-wcwl-wishlistaddedbrowse .feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 600;
  white-space: nowrap;
}
.pdp-actions .yith-wcwl-wishlistaddedbrowse .feedback svg {
  width: 18px;
  height: 18px;
  fill: #FF844B;
}

.pdp-actions .yith-wcwl-wishlistaddedbrowse a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 1.1vw, 22px) clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  padding: clamp(8px, 0.7vw, 12px) clamp(16px, 1.4vw, 24px);
  border-color: #08301A;
  font-size: clamp(12px, 0.75vw, 14px);
  white-space: nowrap;
}
.pdp-actions .yith-wcwl-wishlistaddedbrowse a:hover, .pdp-actions .yith-wcwl-wishlistaddedbrowse a:focus-visible {
  background: #08301A;
  color: #ffffff;
}

/* Variation selectors. */
.pdp-cart table.variations {
  display: block;
  width: 100%;
  margin: 0 0 clamp(16px, 1.4vw, 28px);
  border: 0;
}
.pdp-cart table.variations tbody,
.pdp-cart table.variations tr {
  display: block;
  width: 100%;
}
.pdp-cart table.variations tr + tr {
  margin-top: 14px;
}
.pdp-cart table.variations th,
.pdp-cart table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.pdp-cart table.variations th.label label {
  display: block;
  margin-bottom: 7px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.pdp-cart table.variations td.value {
  display: block;
}
.pdp-cart table.variations select {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 420px;
  padding: 14px 40px 14px 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2308301A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.pdp-cart table.variations select:focus {
  border-color: #345E41;
}
.pdp-cart table.variations .reset_variations {
  display: inline-block;
  margin-top: 12px;
  color: #FF844B;
  font-family: "Sen", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* --- Variation swatches --------------------------------------------------- */
/* The select stays in the DOM as the value WooCommerce's variation form reads
   and writes; the swatch buttons in front of it are what the shopper sees. */
.pdp-swatch-native {
  display: none;
}

.pdp-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-swatch-item {
  display: block;
}

.pdp-swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.pdp-swatch:hover, .pdp-swatch:focus-visible {
  border-color: #08301A;
  background: rgba(8, 48, 26, 0.04);
}
.pdp-swatch:focus-visible {
  outline: 2px solid #08301A;
  outline-offset: 2px;
}
.pdp-swatch.is-active {
  border-color: #08301A;
  background: rgba(8, 48, 26, 0.07);
  box-shadow: inset 0 0 0 1px #08301A;
}
.pdp-swatch.is-unavailable {
  border-style: dashed;
  background: #ffffff;
  color: #ABABAB;
  cursor: not-allowed;
  box-shadow: none;
}
.pdp-swatch.is-unavailable .pdp-swatch-name {
  text-decoration: line-through;
}
.pdp-swatch--color {
  padding-left: 11px;
}

/* The chip carries its colour from --pdp-swatch-color, set per term in
   Products → Attributes and falling back to the colour the term is named
   after. The inner ring keeps pale shades legible against the white pill. */
.pdp-swatch-color {
  display: block;
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--pdp-swatch-color, #D5D5D5);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.25s ease;
}
.pdp-swatch.is-active .pdp-swatch-color {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 2px #ffffff, 0 0 0 4px #08301A;
}
.pdp-swatch.is-unavailable .pdp-swatch-color {
  opacity: 0.45;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* Hovering a swatch previews that variation's image; the stage rolls back to
   the committed one on mouse-out. */
.pdp-gallery-image {
  transition: opacity 0.25s ease;
}
.pdp-gallery-image.is-previewing {
  opacity: 0.92;
}

/* Grouped products. */
.pdp-cart .woocommerce-grouped-product-list {
  display: table;
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
.pdp-cart .woocommerce-grouped-product-list td {
  padding: 12px 8px;
  border-bottom: 1px solid #ECECEC;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  vertical-align: middle;
}
.pdp-cart .woocommerce-grouped-product-list label a {
  color: #1A1A1A;
  font-weight: 700;
}

/* --- Assurances ---------------------------------------------------------- */
.pdp-assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 22px);
  margin: clamp(20px, 1.8vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.pdp-assurance {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pdp-assurance-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 2.7vw, 52px);
  height: clamp(38px, 2.7vw, 52px);
  border-radius: 50%;
  background: rgba(255, 132, 75, 0.14);
  color: #FF844B;
  font-size: clamp(16px, 1.1vw, 21px);
}

.pdp-assurance-copy {
  display: block;
  font-family: "Sen", sans-serif;
  line-height: 1.35;
}
.pdp-assurance-copy strong {
  display: block;
  color: #08301A;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.pdp-assurance-copy span {
  display: block;
  color: #5A5A5A;
  font-size: clamp(12px, 0.75vw, 14px);
}

/* --- Meta + share -------------------------------------------------------- */
.pdp-meta {
  margin: clamp(20px, 1.8vw, 36px) 0 0;
  padding-top: clamp(18px, 1.5vw, 30px);
  border-top: 1px solid #E6E6E6;
  display: none;
}

.pdp-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  line-height: 1.6;
}
.pdp-meta-row + .pdp-meta-row {
  margin-top: 8px;
}
.pdp-meta-row dt {
  min-width: 96px;
  margin: 0;
  color: #ABABAB;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pdp-meta-row dd {
  margin: 0;
  color: #5A5A5A;
  font-weight: 600;
}
.pdp-meta-row dd a {
  color: #345E41;
}
.pdp-meta-row dd a:hover, .pdp-meta-row dd a:focus-visible {
  color: #FF844B;
}

.pdp-share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(20px, 1.8vw, 36px) 0 0;
  padding-top: clamp(18px, 1.5vw, 30px);
  border-top: 1px solid #E6E6E6;
}

.pdp-share-label {
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.pdp-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-share-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 2.4vw, 44px);
  height: clamp(34px, 2.4vw, 44px);
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  color: #345E41;
  font-size: clamp(13px, 0.85vw, 16px);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pdp-share-list a:hover, .pdp-share-list a:focus-visible {
  border-color: #345E41;
  background: #345E41;
  color: #ffffff;
}

/* --- Product data accordion ---------------------------------------------- */
/* Shared by the trigger and the panel body so the title sits directly above the
   copy it belongs to, and the hover tint has room around the label. */
.pdp-accordion {
  margin-top: clamp(20px, 1.8vw, 36px);
  border-top: 1px solid #E6E6E6;
}

.pdp-accordion-item {
  border-bottom: 1px solid #E6E6E6;
}

.pdp-accordion-heading {
  margin: 0;
}

.pdp-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(15px, 1.15vw, 23px) clamp(12px, 1vw, 20px);
  border: 0;
  border-radius: clamp(8px, 0.6vw, 12px);
  color: #000000;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
  /* Storefront styles bare `button` elements, and its `button:hover` (0,1,1)
     outranks a plain `.pdp-accordion-trigger` (0,1,0) — so every state sets
     its own background rather than relying on the base rule. */
}
.pdp-accordion-trigger, .pdp-accordion-trigger:hover, .pdp-accordion-trigger:focus, .pdp-accordion-trigger:focus-visible, .pdp-accordion-trigger:active {
  background-color: transparent;
}
.pdp-accordion-trigger:hover, .pdp-accordion-trigger:focus-visible {
  background-color: rgba(8, 48, 26, 0.05);
  color: #345E41;
}

/* Plus that becomes a minus, drawn from two bars so nothing depends on an icon
   font being present. */
.pdp-accordion-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.pdp-accordion-icon::before, .pdp-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.pdp-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.pdp-accordion-item.is-open .pdp-accordion-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Collapse without a hard-coded height: the row animates between 0fr and 1fr
   and the inner wrapper clips whatever is inside. */
.pdp-panel {
  display: grid;
  grid-template-rows: 0fr;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.8;
  transition: grid-template-rows 0.35s ease;
}
.pdp-accordion-item.is-open > .pdp-panel {
  grid-template-rows: 1fr;
}

.pdp-panel-inner {
  min-height: 0;
  padding: 0 clamp(12px, 1vw, 20px);
  overflow: hidden;
}
.pdp-panel-inner > *:last-child {
  margin-bottom: clamp(16px, 1.4vw, 28px);
}

.pdp-panel > h2,
.pdp-panel .pdp-panel-inner > h2 {
  margin: 0 0 clamp(12px, 1vw, 20px);
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(21px, 1.5vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
}
.pdp-panel h3,
.pdp-panel h4 {
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-weight: 700;
}
.pdp-panel p {
  margin: 0 0 16px;
}
.pdp-panel ul,
.pdp-panel ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.pdp-panel a {
  color: #345E41;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-panel img {
  max-width: 100%;
  height: auto;
}

/* Additional information table. */
.pdp-panel table.shop_attributes {
  width: 100%;
  margin: 0 0 25px;
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.6vw, 12px);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.pdp-panel table.shop_attributes th,
.pdp-panel table.shop_attributes td {
  padding: clamp(11px, 0.9vw, 17px) clamp(14px, 1.1vw, 22px);
  border: 0;
  border-bottom: 1px solid #EDEDED;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  text-align: left;
  vertical-align: top;
}
.pdp-panel table.shop_attributes th {
  width: 30%;
  background: #FAFAF8;
  color: #08301A;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.pdp-panel table.shop_attributes td {
  background: #ffffff;
  color: #5A5A5A;
  font-style: normal;
}
.pdp-panel table.shop_attributes td p {
  margin: 0;
}
.pdp-panel table.shop_attributes tr:last-child th,
.pdp-panel table.shop_attributes tr:last-child td {
  border-bottom: 0;
}

/* --- Reviews ------------------------------------------------------------- */
/* Storefront paints its notices in the customizer's accent blue. */
.pdp-panel .woocommerce-info,
.pdp-panel .woocommerce-message,
.pdp-panel .woocommerce-error,
.pdp-panel .woocommerce-noreviews,
.pdp-panel p.no-comments {
  margin: 0 0 clamp(16px, 1.3vw, 26px);
  padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.3vw, 26px);
  border-radius: clamp(8px, 0.6vw, 12px);
  border-top: 0;
  border-left: 4px solid #FF844B;
  background: #FAFAF8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  list-style: none;
}
.pdp-panel .woocommerce-info::before,
.pdp-panel .woocommerce-message::before,
.pdp-panel .woocommerce-error::before,
.pdp-panel .woocommerce-noreviews::before,
.pdp-panel p.no-comments::before {
  display: none;
}
.pdp-panel .woocommerce-info a,
.pdp-panel .woocommerce-message a,
.pdp-panel .woocommerce-error a,
.pdp-panel .woocommerce-noreviews a,
.pdp-panel p.no-comments a {
  color: #345E41;
}

.pdp-panel #reviews .woocommerce-Reviews-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.pdp-panel #reviews .commentlist {
  margin: 0 0 clamp(24px, 2vw, 40px);
  padding: 0;
  list-style: none;
}
.pdp-panel #reviews .commentlist > li {
  margin: 0 0 clamp(12px, 1vw, 20px);
  padding: clamp(16px, 1.4vw, 28px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.7vw, 14px);
  background: #ffffff;
  list-style: none;
}
.pdp-panel #reviews .commentlist .comment_container {
  display: flex;
  gap: clamp(12px, 1vw, 20px);
}
.pdp-panel #reviews .commentlist img.avatar {
  flex: none;
  width: clamp(44px, 3.2vw, 62px);
  height: clamp(44px, 3.2vw, 62px);
  border: 0;
  border-radius: 50%;
  padding: 0;
}
.pdp-panel #reviews .commentlist .comment-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pdp-panel #reviews .commentlist .woocommerce-review__author {
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pdp-panel #reviews .commentlist .woocommerce-review__published-date {
  color: #ABABAB;
  font-size: clamp(12px, 0.75vw, 14px);
}
.pdp-panel #reviews .commentlist .description {
  margin-top: 8px;
  color: #5A5A5A;
}
.pdp-panel #reviews .star-rating {
  color: #FF844B;
  float: none;
  margin-bottom: 6px;
}
.pdp-panel #reviews #review_form_wrapper {
  max-width: 760px;
  padding: clamp(18px, 1.6vw, 32px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.7vw, 14px);
  background: #FAFAF8;
}
.pdp-panel #reviews #respond,
.pdp-panel #reviews #comments {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.pdp-panel #reviews .comment-reply-title {
  display: block;
  margin-bottom: 14px;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pdp-panel #reviews .comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.pdp-panel #reviews .comment-form > p {
  grid-column: 1/-1;
  float: none;
  width: auto;
}
.pdp-panel #reviews .comment-form > p.comment-form-author {
  grid-column: 1;
}
.pdp-panel #reviews .comment-form > p.comment-form-email {
  grid-column: 2;
}
.pdp-panel #reviews .comment-form > p.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.pdp-panel #reviews .comment-form > p.comment-form-cookies-consent input {
  flex: none;
  margin-top: 3px;
}
.pdp-panel #reviews .comment-form > p.comment-form-cookies-consent label {
  margin: 0;
  color: #5A5A5A;
  font-size: clamp(12px, 0.75vw, 14px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.pdp-panel #reviews .comment-form label {
  display: block;
  margin-bottom: 6px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.pdp-panel #reviews .comment-form input[type=text],
.pdp-panel #reviews .comment-form input[type=email],
.pdp-panel #reviews .comment-form input[type=url],
.pdp-panel #reviews .comment-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #D5D5D5;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 15px);
}
.pdp-panel #reviews .comment-form input[type=text]:focus,
.pdp-panel #reviews .comment-form input[type=email]:focus,
.pdp-panel #reviews .comment-form input[type=url]:focus,
.pdp-panel #reviews .comment-form textarea:focus {
  border-color: #345E41;
  outline: none;
}
.pdp-panel #reviews .comment-form textarea {
  min-height: 130px;
  resize: vertical;
}
.pdp-panel #reviews .comment-form p {
  margin: 0 0 16px;
}
.pdp-panel #reviews .comment-form p.stars a {
  color: #FF844B;
}
.pdp-panel #reviews .comment-form .submit,
.pdp-panel #reviews .comment-form input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 1.1vw, 22px) clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: #FF844B;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  width: auto;
}
.pdp-panel #reviews .comment-form .submit:hover, .pdp-panel #reviews .comment-form .submit:focus,
.pdp-panel #reviews .comment-form input[type=submit]:hover,
.pdp-panel #reviews .comment-form input[type=submit]:focus {
  background: rgb(100%, 39.4647058824%, 11.4117647059%);
  color: #345E41;
}

/* --- Related ------------------------------------------------------------- */
.pdp-related {
  padding: clamp(38px, 3.8vw, 76px) 0 0;
  background: #ffffff;
}

.pdp-related-head {
  margin-bottom: clamp(26px, 2.6vw, 52px);
}

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  -moz-column-gap: clamp(12px, 1.2vw, 24px);
       column-gap: clamp(12px, 1.2vw, 24px);
  row-gap: clamp(24px, 2.65vw, 53px);
}

/* --- Responsive ---------------------------------------------------------- */
/* The related row steps down on the same breakpoints as the home page shop
   grid, so the cards never squeeze. */
@media (max-width: 1399.98px) {
  .pdp-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1099.98px) {
  .pdp-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1199.98px) {
  .pdp-main {
    gap: clamp(24px, 2.6vw, 44px);
  }
  .pdp-assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .pdp-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp-main-media {
    position: static;
  }
  .pdp-gallery {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
  .pdp-gallery-stage {
    order: 1;
  }
  .pdp-gallery-thumbs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .pdp-thumb {
    width: clamp(64px, 12vw, 88px);
  }
  .pdp-summary {
    padding-top: 0;
  }
}
@media (max-width: 767.98px) {
  .pdp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pdp-cart form.cart,
  .pdp-cart .woocommerce-variation-add-to-cart {
    gap: 10px;
  }
  .pdp-cart .single_add_to_cart_button,
  .pdp-cart button.button.alt {
    flex: 1 1 180px;
    max-width: none;
  }
  .pdp-panel table.shop_attributes th,
  .pdp-panel table.shop_attributes td {
    display: block;
    width: 100%;
  }
  .pdp-panel table.shop_attributes th {
    border-bottom: 0;
  }
  .pdp-panel #reviews .commentlist .comment_container {
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .pdp-assurances {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp-meta-row dt {
    min-width: 78px;
  }
  .pdp-panel #reviews .comment-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp-panel #reviews .comment-form > p.comment-form-author,
  .pdp-panel #reviews .comment-form > p.comment-form-email {
    grid-column: 1/-1;
  }
}
@media (max-width: 479.98px) {
  .pdp-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp-cart .single_add_to_cart_button,
  .pdp-cart button.button.alt {
    flex: 1 1 100%;
  }
}
/* -------------------------------------------------------------------------
 *  Cart page
 *  Built on the product page's language: bordered white cards, the orange pill
 *  CTA, and the same quantity stepper as the add-to-cart form.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the cart runs on the same
   container as the rest of the shop. */
.woocommerce-cart .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.woocommerce-cart .site-main {
  background: #ffffff;
}
.woocommerce-cart .type-page {
  margin: 0;
}
.woocommerce-cart .entry-content {
  margin: 0;
}

/* --- Page head ----------------------------------------------------------- */
.cart-page-head {
  padding: clamp(24px, 2.6vw, 52px) 0 clamp(18px, 1.8vw, 36px);
  text-align: center;
}

.cart-page-title {
  margin: 0;
}

.cart-page-count {
  margin: clamp(8px, 0.7vw, 14px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
}

/* --- Layout -------------------------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 420px);
  align-items: start;
  gap: clamp(20px, 2vw, 40px);
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px;
}

.cart-lines {
  margin: 0;
}

.cart-card {
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
  overflow: hidden;
}

/* Column headings. The rows repeat the labels on narrow screens, where this
   strip is hidden. */
.cart-head,
.cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 150px 130px 52px;
  align-items: center;
  gap: clamp(10px, 1vw, 20px);
  padding: clamp(12px, 1.1vw, 22px) clamp(14px, 1.3vw, 26px);
}

.cart-head {
  border-bottom: 1px solid #E6E6E6;
  background: #FAFAF8;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cart-item + .cart-item,
.cart-head + .cart-item {
  border-top: 1px solid #F0F0F0;
}

.cart-head + .cart-item {
  border-top: 0;
}

/* --- Line item ----------------------------------------------------------- */
.cart-item-product {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 22px);
  min-width: 0;
}

.cart-item-thumb {
  display: block;
  flex: none;
  width: clamp(64px, 5.2vw, 96px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
  overflow: hidden;
}
.cart-item-thumb a,
.cart-item-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

.cart-item-copy {
  min-width: 0;
}

.cart-item-name {
  display: block;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
  line-height: 1.35;
}

/* Storefront underlines every link in `.entry-content` (0,2,1), so the product
   name needs the extra class to win. */
.cart-item .cart-item-name a {
  color: #111111;
  text-decoration: none;
  transition: color 0.25s ease;
}
.cart-item .cart-item-name a:hover, .cart-item .cart-item-name a:focus-visible {
  color: #FF844B;
  text-decoration: none;
}

/* Variation / item meta WooCommerce prints under the name. */
.cart-item-copy .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.75vw, 14px);
  line-height: 1.5;
}
.cart-item-copy .variation dt {
  margin: 0;
  font-weight: 700;
}
.cart-item-copy .variation dd {
  margin: 0;
}
.cart-item-copy .variation dd p {
  margin: 0;
}

.cart-item-copy .backorder_notification {
  margin: 6px 0 0;
  color: #FF844B;
  font-size: 12px;
  font-weight: 600;
}

/* Unit price beside the name, shown only once the columns collapse. */
.cart-item-price-inline {
  display: none;
  margin-top: 6px;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 600;
}

.cart-item-price,
.cart-item-subtotal {
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
}
.cart-item-price del,
.cart-item-subtotal del {
  margin-right: 6px;
  color: #ABABAB;
  font-size: 0.8em;
  font-weight: 400;
}
.cart-item-price ins,
.cart-item-subtotal ins {
  background: none;
  text-decoration: none;
}

.cart-item-price {
  color: #5A5A5A;
  font-weight: 600;
}

/* Quantity: the product page's stepper pill, at a smaller size. */
.cart-item-qty .quantity {
  display: inline-flex;
  align-items: center;
  height: clamp(42px, 2.9vw, 52px);
  border: 2px solid #08301A;
  border-radius: 999px;
  background: #ffffff;
  overflow: hidden;
}
.cart-item-qty .quantity input.qty {
  width: clamp(38px, 2.6vw, 48px);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.cart-item-qty .quantity input.qty::-webkit-outer-spin-button, .cart-item-qty .quantity input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.cart-item-qty .quantity input.qty:focus {
  outline: none;
}
.cart-item-qty .quantity .pdp-qty-btn {
  width: clamp(32px, 2.2vw, 40px);
  font-size: clamp(15px, 1vw, 19px);
}

.cart-item-remove {
  justify-self: end;
}
.cart-item-remove .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #F5F5F3;
  color: #5A5A5A;
  font-size: 15px;
  text-decoration: none;
  text-indent: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
.cart-item-remove .remove::before, .cart-item-remove .remove::after {
  content: none;
}
.cart-item-remove .remove:hover, .cart-item-remove .remove:focus-visible {
  background: #FF844B;
  color: #08301A;
}

/* --- Coupon + update row -------------------------------------------------- */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1vw, 20px);
  padding: clamp(14px, 1.3vw, 26px);
  border-top: 1px solid #E6E6E6;
  background: #FAFAF8;
}
.cart-actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cart-actions #coupon_code {
  width: clamp(190px, 18vw, 300px);
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background-color: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
}
.cart-actions #coupon_code::-moz-placeholder {
  color: #ABABAB;
  font-weight: 600;
}
.cart-actions #coupon_code::placeholder {
  color: #ABABAB;
  font-weight: 600;
}
.cart-actions #coupon_code:focus {
  border-color: #345E41;
  outline: none;
}

/* Ghost pill for the secondary cart buttons. Storefront styles bare `button`,
   and its `button:hover` (0,1,1) outranks a plain `.cart-btn` (0,1,0), so each
   state sets its own background. */
.cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 clamp(18px, 1.5vw, 30px);
  border: 2px solid #08301A;
  border-radius: 999px;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.cart-btn, .cart-btn:hover, .cart-btn:focus, .cart-btn:focus-visible, .cart-btn:active {
  background-color: #ffffff;
}
.cart-btn:hover, .cart-btn:focus-visible {
  background-color: #08301A;
  color: #ffffff;
}
.cart-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cart-btn:disabled:hover {
  background-color: #ffffff;
  color: #08301A;
}

/* --- Order summary -------------------------------------------------------- */
/* Storefront floats `.cart-collaterals .cart_totals` to 52.9% (0,2,0) above
   768px, which the grid column replaces — hence the extra class. */
.cart-collaterals .cart_totals.cart-summary {
  position: sticky;
  top: clamp(16px, 1.6vw, 32px);
  width: auto;
  padding: clamp(18px, 1.7vw, 34px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
  float: none;
}

.cart-summary-title {
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 1.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.cart-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 0.85vw, 17px) 0;
  border-bottom: 1px solid #F0F0F0;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
}
.cart-summary-row .cart-summary-label {
  color: #5A5A5A;
  font-weight: 600;
}
.cart-summary-row .cart-summary-value {
  color: #111111;
  font-weight: 700;
  text-align: right;
}
.cart-summary-row.cart-discount .cart-summary-value {
  color: #2C6F4B;
}
.cart-summary-row.cart-discount a {
  display: inline-block;
  margin-left: 8px;
  color: #ABABAB;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}
.cart-summary-row.cart-discount a:hover, .cart-summary-row.cart-discount a:focus-visible {
  color: #FF844B;
}
.cart-summary-row.order-total {
  margin-top: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}
.cart-summary-row.order-total .cart-summary-label {
  color: #000000;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
}
.cart-summary-row.order-total .cart-summary-value {
  font-size: clamp(19px, 1.35vw, 27px);
  letter-spacing: -0.5px;
}
.cart-summary-row small {
  display: block;
  color: #ABABAB;
  font-size: 11px;
  font-weight: 400;
}

/* Shipping rows keep WooCommerce's own markup. */
.cart-summary .shipping,
.cart-summary .woocommerce-shipping-totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(10px, 0.85vw, 17px) 0;
  border-bottom: 1px solid #F0F0F0;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
}
.cart-summary .shipping th,
.cart-summary .woocommerce-shipping-totals th {
  padding: 0;
  border: 0;
  color: #5A5A5A;
  font-weight: 600;
  text-align: left;
}
.cart-summary .shipping td,
.cart-summary .woocommerce-shipping-totals td {
  padding: 0;
  border: 0;
  text-align: right;
}
.cart-summary .shipping ul#shipping_method,
.cart-summary .woocommerce-shipping-totals ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-summary .shipping ul#shipping_method li,
.cart-summary .woocommerce-shipping-totals ul#shipping_method li {
  margin: 0 0 6px;
}
.cart-summary .shipping ul#shipping_method label,
.cart-summary .woocommerce-shipping-totals ul#shipping_method label {
  color: #111111;
  font-weight: 600;
}
.cart-summary .shipping .woocommerce-shipping-destination,
.cart-summary .woocommerce-shipping-totals .woocommerce-shipping-destination {
  margin: 8px 0 0;
  color: #ABABAB;
  font-size: 12px;
}
.cart-summary .shipping .shipping-calculator-button,
.cart-summary .woocommerce-shipping-totals .shipping-calculator-button {
  color: #FF844B;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cart-summary .wc-proceed-to-checkout {
  margin-top: clamp(16px, 1.4vw, 28px);
  padding: 0;
}

/* Two stock rules have to be beaten here: Storefront paints `button.alt` (0,1,1)
   dark, and WooCommerce sizes `.wc-proceed-to-checkout .button.checkout-button`
   (0,3,0) at 1.41575em — which rendered the label at 22px over three lines. The
   `a` keeps this at (0,3,1) so both lose. */
.cart-summary .wc-proceed-to-checkout a.cart-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 1.1vw, 22px) clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: #FF844B;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  width: 100%;
  min-height: clamp(48px, 3.5vw, 62px);
  padding-left: clamp(14px, 1.1vw, 22px);
  padding-right: clamp(14px, 1.1vw, 22px);
  font-size: clamp(13px, 0.85vw, 16px);
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
}
.cart-summary .wc-proceed-to-checkout a.cart-checkout-btn::after, .cart-summary .wc-proceed-to-checkout a.cart-checkout-btn::before {
  content: none;
}
.cart-summary .wc-proceed-to-checkout a.cart-checkout-btn i {
  font-size: 1.05em;
  line-height: 1;
}
.cart-summary .wc-proceed-to-checkout a.cart-checkout-btn, .cart-summary .wc-proceed-to-checkout a.cart-checkout-btn:hover, .cart-summary .wc-proceed-to-checkout a.cart-checkout-btn:focus, .cart-summary .wc-proceed-to-checkout a.cart-checkout-btn:focus-visible, .cart-summary .wc-proceed-to-checkout a.cart-checkout-btn:active {
  background: #FF844B;
  color: #345E41;
}
.cart-summary .wc-proceed-to-checkout a.cart-checkout-btn:hover, .cart-summary .wc-proceed-to-checkout a.cart-checkout-btn:focus-visible {
  background: rgb(100%, 39.4647058824%, 11.4117647059%);
}

/* Storefront underlines links inside `.entry-content` (0,2,1). */
.cart-collaterals .cart-summary a.cart-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(12px, 1vw, 20px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}
.cart-collaterals .cart-summary a.cart-continue:hover, .cart-collaterals .cart-summary a.cart-continue:focus-visible {
  color: #FF844B;
  text-decoration: none;
}

/* --- Empty cart ----------------------------------------------------------- */
.cart-empty-state {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(30px, 3vw, 60px) 25px clamp(50px, 5vw, 100px);
  text-align: center;
}

.cart-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 5vw, 88px);
  height: clamp(64px, 5vw, 88px);
  margin-bottom: clamp(14px, 1.2vw, 24px);
  border-radius: 999px;
  background: rgba(255, 132, 75, 0.16);
  color: #08301A;
  font-size: clamp(26px, 2vw, 38px);
}

.cart-empty-title {
  margin: 0 0 10px;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(24px, 2vw, 38px);
  font-weight: 400;
  text-transform: uppercase;
}

.cart-empty-text {
  margin: 0 0 clamp(18px, 1.6vw, 32px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.7;
}

/* Storefront underlines links inside `.entry-content` (0,2,1). */
.cart-empty-state .return-to-shop .theme-btn {
  text-decoration: none;
}

/* WooCommerce prints its own "cart is empty" notice above ours. */
.woocommerce-cart .wc-empty-cart-message {
  display: none;
}

/* --- Cross-sells ---------------------------------------------------------- */
.cross-sells {
  max-width: 1890px;
  margin: 0 auto;
  padding: clamp(30px, 3vw, 60px) 25px 0;
}
.cross-sells > h2 {
  margin: 0 0 clamp(20px, 2vw, 40px);
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(22px, 1.8vw, 36px);
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}
.cross-sells .products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  -moz-column-gap: clamp(12px, 1.2vw, 24px);
       column-gap: clamp(12px, 1.2vw, 24px);
  row-gap: clamp(24px, 2.65vw, 53px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cross-sells .products::before, .cross-sells .products::after {
  display: none;
}
.cross-sells li.product {
  width: auto;
  margin: 0;
  float: none;
}

/* --- Notices -------------------------------------------------------------- */
/* The cart's own sections carry the page gutter, but notices print straight
   into the full-width `.woocommerce` wrapper, so they set their own. */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  width: calc(100% - 50px);
  max-width: calc(1890px - 50px);
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
  margin: 0 calc(100wv - 25px) clamp(16px, 1.4vw, 28px);
  padding: clamp(13px, 1.1vw, 22px) clamp(16px, 1.4vw, 28px);
  border: 0;
  border-left: 4px solid #FF844B;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #FAFAF8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before {
  display: none;
}
.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-info a,
.woocommerce-cart .woocommerce-error a,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-error a {
  color: #FF844B;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}
.woocommerce-cart .woocommerce-message a:hover, .woocommerce-cart .woocommerce-message a:focus-visible,
.woocommerce-cart .woocommerce-info a:hover,
.woocommerce-cart .woocommerce-info a:focus-visible,
.woocommerce-cart .woocommerce-error a:hover,
.woocommerce-cart .woocommerce-error a:focus-visible,
.woocommerce-checkout .woocommerce-message a:hover,
.woocommerce-checkout .woocommerce-message a:focus-visible,
.woocommerce-checkout .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-info a:focus-visible,
.woocommerce-checkout .woocommerce-error a:hover,
.woocommerce-checkout .woocommerce-error a:focus-visible {
  color: #08301A;
}
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-message .restore-item,
.woocommerce-cart .woocommerce-info .button,
.woocommerce-cart .woocommerce-info .restore-item,
.woocommerce-cart .woocommerce-error .button,
.woocommerce-cart .woocommerce-error .restore-item,
.woocommerce-checkout .woocommerce-message .button,
.woocommerce-checkout .woocommerce-message .restore-item,
.woocommerce-checkout .woocommerce-info .button,
.woocommerce-checkout .woocommerce-info .restore-item,
.woocommerce-checkout .woocommerce-error .button,
.woocommerce-checkout .woocommerce-error .restore-item {
  order: 2;
  margin-left: auto;
  color: #FF844B;
  font-size: clamp(12px, 0.75vw, 14px);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  float: none;
  transition: color 0.25s ease;
}
.woocommerce-cart .woocommerce-message .button:hover, .woocommerce-cart .woocommerce-message .button:focus-visible,
.woocommerce-cart .woocommerce-message .restore-item:hover,
.woocommerce-cart .woocommerce-message .restore-item:focus-visible,
.woocommerce-cart .woocommerce-info .button:hover,
.woocommerce-cart .woocommerce-info .button:focus-visible,
.woocommerce-cart .woocommerce-info .restore-item:hover,
.woocommerce-cart .woocommerce-info .restore-item:focus-visible,
.woocommerce-cart .woocommerce-error .button:hover,
.woocommerce-cart .woocommerce-error .button:focus-visible,
.woocommerce-cart .woocommerce-error .restore-item:hover,
.woocommerce-cart .woocommerce-error .restore-item:focus-visible,
.woocommerce-checkout .woocommerce-message .button:hover,
.woocommerce-checkout .woocommerce-message .button:focus-visible,
.woocommerce-checkout .woocommerce-message .restore-item:hover,
.woocommerce-checkout .woocommerce-message .restore-item:focus-visible,
.woocommerce-checkout .woocommerce-info .button:hover,
.woocommerce-checkout .woocommerce-info .button:focus-visible,
.woocommerce-checkout .woocommerce-info .restore-item:hover,
.woocommerce-checkout .woocommerce-info .restore-item:focus-visible,
.woocommerce-checkout .woocommerce-error .button:hover,
.woocommerce-checkout .woocommerce-error .button:focus-visible,
.woocommerce-checkout .woocommerce-error .restore-item:hover,
.woocommerce-checkout .woocommerce-error .restore-item:focus-visible {
  color: #08301A;
}

/* -------------------------------------------------------------------------
 *  Checkout
 *  The checkout page holds the block, but renders the classic shortcode markup,
 *  so it is themed from `form.checkout` / `#customer_details` / `#order_review`.
 *  Layout is CSS only — no checkout template is replaced.
 * ---------------------------------------------------------------------- */
.woocommerce-checkout .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.woocommerce-checkout .site-main {
  background: #ffffff;
}
.woocommerce-checkout .type-page,
.woocommerce-checkout .entry-content {
  margin: 0;
}
.woocommerce-checkout .woocommerce {
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px clamp(36px, 3.6vw, 72px);
}

/* Details on the left, order review on the right. The markup is a flat
   sequence, so the two right-hand pieces are placed into column 2 by hand. */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 460px);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: clamp(20px, 2vw, 40px);
}
.woocommerce-checkout form.checkout #customer_details {
  grid-column: 1;
  grid-row: 1/span 2;
  width: auto;
  float: none;
}
.woocommerce-checkout form.checkout #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.woocommerce-checkout form.checkout #order_review {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  float: none;
}

/* Billing / shipping columns become one stacked card. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  width: auto;
  float: none;
}
.woocommerce-checkout #customer_details .col-2 {
  margin-top: clamp(18px, 1.6vw, 32px);
}
.woocommerce-checkout #customer_details h3 {
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 1.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  padding: clamp(18px, 1.7vw, 34px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
}
.woocommerce-checkout #customer_details .woocommerce-shipping-fields,
.woocommerce-checkout #customer_details .woocommerce-additional-fields {
  margin-top: clamp(18px, 1.6vw, 32px);
}
.woocommerce-checkout #customer_details .woocommerce-shipping-fields:not(:has(*)) {
  display: none;
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(12px, 1.1vw, 22px);
}
.woocommerce-checkout #customer_details .form-row {
  grid-column: 1/-1;
  margin: 0 0 clamp(12px, 1vw, 20px);
  padding: 0;
}
.woocommerce-checkout #customer_details .form-row-first,
.woocommerce-checkout #customer_details .form-row-last {
  width: 100%;
  grid-column: span 1;
}
.woocommerce-checkout #customer_details .form-row.esjae-field-hidden {
  display: none !important;
}

/* Fields. */
.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 7px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.woocommerce-checkout .form-row label .required {
  color: #FF844B;
  text-decoration: none;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
  width: 100%;
  height: clamp(46px, 3.1vw, 56px);
  padding: 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background-color: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
  line-height: clamp(46px, 3.1vw, 56px);
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container .select2-selection--single:focus {
  border-color: #345E41;
  outline: none;
}
.woocommerce-checkout textarea.input-text {
  height: auto;
  min-height: 110px;
  padding: 16px 18px;
  border-radius: clamp(10px, 0.9vw, 18px);
  line-height: 1.6;
  resize: vertical;
}
.woocommerce-checkout select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2308301A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.woocommerce-checkout .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: #111111;
  line-height: inherit;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}
.woocommerce-checkout .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}
.woocommerce-checkout #ship-to-different-address {
  display: flex;
  align-items: center;
}
.woocommerce-checkout #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 1.4vw, 28px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}
.woocommerce-checkout #ship-to-different-address input[type=checkbox] {
  position: static;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  transform: none;
  accent-color: #08301A;
}

/* Order review card. */
.woocommerce-checkout #order_review_heading {
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 1.4vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.woocommerce-checkout #order_review {
  position: sticky;
  top: clamp(16px, 1.6vw, 32px);
  padding: clamp(18px, 1.7vw, 34px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  border: 0;
  border-collapse: collapse;
  font-family: "Sen", sans-serif;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:nth-child(2n) td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr td {
  background: transparent;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  padding: clamp(10px, 0.85vw, 17px) 0;
  border: 0;
  border-bottom: 1px solid #F0F0F0;
  font-size: clamp(13px, 0.85vw, 16px);
  vertical-align: top;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  color: #ABABAB;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name {
  color: #5A5A5A;
  font-weight: 600;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
  color: #ABABAB;
  font-weight: 700;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
  color: #111111;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation {
  margin: 6px 0 0;
  color: #ABABAB;
  font-size: clamp(11px, 0.72vw, 13px);
  line-height: 1.5;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation dt,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation dd {
  display: inline;
  margin: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .variation dd p {
  display: inline;
  margin: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  font-weight: 700;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
  color: #5A5A5A;
  font-weight: 600;
  text-align: left;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  color: #111111;
  text-align: right;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
  padding-bottom: 0;
  border-bottom: 0;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th {
  color: #000000;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: clamp(19px, 1.35vw, 27px);
  letter-spacing: -0.5px;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .cart-discount td {
  color: #2C6F4B;
}

/* Payment methods. */
.woocommerce-checkout #payment {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  padding: 0;
  border: 0;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 10px;
  padding: clamp(12px, 1vw, 20px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #FAFAF8;
}
.woocommerce-checkout #payment ul.payment_methods label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods input[type=radio] {
  width: 18px;
  height: 18px;
  accent-color: #08301A;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 14px);
  line-height: 1.6;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box::before {
  display: none;
}
.woocommerce-checkout #payment ul.payment_methods .payment_box p:last-child {
  margin-bottom: 0;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.75vw, 13px);
  line-height: 1.6;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper p {
  margin: 0 0 12px;
}
.woocommerce-checkout #payment .place-order {
  margin: 0;
  padding: 0;
}

/* Storefront paints `button.alt` dark and WooCommerce sizes `#place_order` in
   ems; the `button` keeps this ahead of both. */
.woocommerce-checkout #payment button#place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(13px, 1.1vw, 22px) clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: #FF844B;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.85vw, 17px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  width: 100%;
  min-height: clamp(48px, 3.5vw, 62px);
  margin: 0;
  padding-left: clamp(14px, 1.1vw, 22px);
  padding-right: clamp(14px, 1.1vw, 22px);
  font-size: clamp(13px, 0.85vw, 16px);
  letter-spacing: 0.4px;
  text-align: center;
  white-space: nowrap;
}
.woocommerce-checkout #payment button#place_order, .woocommerce-checkout #payment button#place_order:hover, .woocommerce-checkout #payment button#place_order:focus, .woocommerce-checkout #payment button#place_order:focus-visible, .woocommerce-checkout #payment button#place_order:active {
  background: #FF844B;
  color: #345E41;
}
.woocommerce-checkout #payment button#place_order:hover, .woocommerce-checkout #payment button#place_order:focus-visible {
  background: rgb(100%, 39.4647058824%, 11.4117647059%);
}

/* Coupon prompt and its form. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-bottom: clamp(14px, 1.2vw, 24px);
}
.woocommerce-checkout form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(18px, 1.6vw, 32px);
  padding: clamp(14px, 1.2vw, 24px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #FAFAF8;
}
.woocommerce-checkout form.checkout_coupon .form-row {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.woocommerce-checkout form.checkout_coupon #coupon_code {
  width: clamp(200px, 20vw, 320px);
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background-color: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
}
.woocommerce-checkout form.checkout_coupon #coupon_code::-moz-placeholder {
  color: #ABABAB;
  font-weight: 600;
}
.woocommerce-checkout form.checkout_coupon #coupon_code::placeholder {
  color: #ABABAB;
  font-weight: 600;
}
.woocommerce-checkout form.checkout_coupon #coupon_code:focus {
  border-color: #345E41;
  outline: none;
}
.woocommerce-checkout form.checkout_coupon .clear {
  display: none;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-bottom: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .cross-sells .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-checkout form.checkout #customer_details,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review {
    grid-column: 1;
    grid-row: auto;
  }
  .woocommerce-checkout form.checkout #order_review_heading {
    margin-top: clamp(18px, 1.6vw, 32px);
  }
  .woocommerce-checkout form.checkout #order_review {
    position: static;
  }
}
@media (max-width: 575.98px) {
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout #customer_details .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-checkout #customer_details .form-row-first,
  .woocommerce-checkout #customer_details .form-row-last {
    grid-column: 1/-1;
  }
}
@media (max-width: 991.98px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .cart-summary {
    position: static;
  }
}
@media (max-width: 767.98px) {
  .cart-head {
    display: none;
  }
  .cart-item {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 14px;
    padding: clamp(14px, 3vw, 20px);
  }
  .cart-item-product {
    grid-column: 1/2;
    grid-row: 1;
  }
  .cart-item-remove {
    grid-column: 2/3;
    grid-row: 1;
    align-self: start;
  }
  .cart-item-price {
    display: none;
  }
  .cart-item-price-inline {
    display: block;
  }
  .cart-item-qty {
    grid-column: 1/2;
    grid-row: 2;
  }
  .cart-item-subtotal {
    grid-column: 2/3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }
  .cart-item-subtotal::before {
    content: attr(data-label) ": ";
    color: #ABABAB;
    font-size: 12px;
    font-weight: 600;
  }
  .cart-actions {
    justify-content: stretch;
  }
  .cart-actions .coupon {
    flex: 1 1 100%;
  }
  .cart-actions #coupon_code {
    flex: 1 1 auto;
    width: auto;
  }
  .cart-actions .cart-update {
    flex: 1 1 100%;
  }
  .cross-sells .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 479.98px) {
  .cart-item-thumb {
    width: 64px;
  }
  .cross-sells .products {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -------------------------------------------------------------------------
 *  Cart: custom related products dialog
 *  The grid inside reuses `.pdp-related-grid`, so only the shell and the
 *  narrower column steps the panel needs are declared here.
 * ---------------------------------------------------------------------- */
.cart-related-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 40px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cart-related-modal.is-open {
  opacity: 1;
}
.cart-related-modal[hidden] {
  display: none;
}

.cart-related-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 48, 26, 0.62);
}

.cart-related-panel {
  position: relative;
  width: 100%;
  max-width: 1120px;
  max-height: calc(100vh - clamp(24px, 4vw, 80px));
  overflow-y: auto;
  padding: clamp(26px, 2.6vw, 52px);
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
.cart-related-modal.is-open .cart-related-panel {
  transform: translateY(0);
}

.cart-related-close {
  position: absolute;
  top: clamp(12px, 1vw, 20px);
  right: clamp(12px, 1vw, 20px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  background: #ffffff;
  color: #1A1A1A;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cart-related-close:hover, .cart-related-close:focus-visible {
  border-color: #08301A;
  background: #08301A;
  color: #ffffff;
}

.cart-related-head {
  margin-bottom: clamp(22px, 2.2vw, 44px);
  padding-right: 44px;
}
.cart-related-head .section-heading {
  font-size: clamp(24px, 2.2vw, 44px);
}

.cart-related-text {
  margin: clamp(8px, 0.8vw, 16px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 400;
  line-height: 1.55;
}

/* The panel is narrower than the page, so the shared 5-up grid would squeeze
   the cards. It steps down one place earlier here. */
.cart-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cart-related-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(22px, 2.2vw, 44px);
}

body.cart-related-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .cart-related-modal,
  .cart-related-panel,
  .cart-related-close {
    transition: none;
  }
  .cart-related-panel {
    transform: none;
  }
}
@media (max-width: 1099.98px) {
  .cart-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .cart-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cart-related-panel {
    padding: 24px 18px;
  }
}
@media (max-width: 479.98px) {
  .cart-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -------------------------------------------------------------------------
 *  My Account: logged-out screens
 *  Login, lost password and reset, as a centred card on the shop's form
 *  language — the same pill fields and buttons the checkout uses.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the account screens run on the
   same container as the rest of the shop. */
.esjae-account .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.account-page-head {
  padding: clamp(24px, 2.6vw, 52px) 0 clamp(18px, 1.8vw, 36px);
  text-align: center;
}

.account-page-title {
  margin: 0;
}

/* The account templates carry no gutter of their own. `.site-main` is the
   outermost element that actually wraps them — Storefront's `.woocommerce` div
   is a sibling of the content column, not an ancestor of it. */
.esjae-account .site-main {
  width: 100%;
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px clamp(44px, 4.4vw, 88px);
}
.esjae-account .content-area,
.esjae-account .entry-content,
.esjae-account article {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.esjae-account .edit-link {
  display: none;
}

/* --- Notices -------------------------------------------------------------- */
.esjae-account .woocommerce-message,
.esjae-account .woocommerce-info,
.esjae-account .woocommerce-error {
  margin: 0 0 clamp(16px, 1.4vw, 28px);
  padding: clamp(13px, 1.1vw, 22px) clamp(16px, 1.4vw, 28px);
  border: 0;
  border-left: 4px solid #FF844B;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #FAFAF8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  list-style: none;
}
.esjae-account .woocommerce-message::before,
.esjae-account .woocommerce-info::before,
.esjae-account .woocommerce-error::before {
  display: none;
}
.esjae-account .woocommerce-message a,
.esjae-account .woocommerce-info a,
.esjae-account .woocommerce-error a {
  color: #345E41;
  font-weight: 700;
}
.esjae-account .woocommerce-error {
  border-left-color: #E74C3C;
}

/* --- The card ------------------------------------------------------------- */
/* WooCommerce prints an <h2>Login</h2> as a sibling of the form. The page
   header above already says it, so it is dropped rather than repeated. With
   registration enabled the headings move inside #customer_login, where they are
   wanted to tell the two forms apart — hence the child combinator. */
.esjae-account--out .woocommerce > h2 {
  display: none;
}

/* Registration is off on this store, so WooCommerce prints the login form on
   its own; `#customer_login` only appears once registration is switched back
   on, and then the two forms sit side by side. */
.esjae-account--out .woocommerce-form-login,
.esjae-account--out .woocommerce-ResetPassword,
.esjae-account--out #customer_login .col-1,
.esjae-account--out #customer_login .col-2 {
  margin: 0 auto;
  padding: clamp(26px, 2.6vw, 52px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
}
.esjae-account--out .woocommerce-form-login,
.esjae-account--out .woocommerce-ResetPassword {
  max-width: 520px;
}
.esjae-account--out #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 40px);
  max-width: 1120px;
  margin: 0 auto;
  float: none;
  width: 100%;
}
.esjae-account--out #customer_login.col2-set > .col-1, .esjae-account--out #customer_login.col2-set > .col-2 {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
}
.esjae-account--out #customer_login h2 {
  margin: 0 0 clamp(18px, 1.7vw, 34px);
  color: #1A1A1A;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(22px, 1.7vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

/* --- Fields --------------------------------------------------------------- */
/* Matches the checkout's pill fields so the two forms read as one system. */
.esjae-account .form-row {
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  padding: 0;
}
.esjae-account .form-row > label {
  display: block;
  margin-bottom: 7px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.esjae-account .required {
  color: #FF844B;
  text-decoration: none;
}
.esjae-account .input-text,
.esjae-account input[type=text],
.esjae-account input[type=email],
.esjae-account input[type=password],
.esjae-account input[type=tel] {
  width: 100%;
  height: clamp(46px, 3.1vw, 56px);
  padding: 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background-color: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
}
.esjae-account .input-text:focus,
.esjae-account input[type=text]:focus,
.esjae-account input[type=email]:focus,
.esjae-account input[type=password]:focus,
.esjae-account input[type=tel]:focus {
  border-color: #345E41;
  outline: none;
}
.esjae-account .woocommerce-password-hint,
.esjae-account .password-input,
.esjae-account .show-password-input {
  display: block;
}
.esjae-account .password-input {
  position: relative;
  width: 100%;
}
.esjae-account .show-password-input {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.55;
}
.esjae-account .show-password-input:hover, .esjae-account .show-password-input:focus-visible {
  opacity: 1;
}
.esjae-account .password-input .input-text {
  padding-right: 48px;
}
.esjae-account {
  /* Remember me and similar. */
}
.esjae-account .form-row > label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.esjae-account .form-row > label.woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #345E41;
}
.esjae-account .form-row > label.woocommerce-form__label-for-checkbox span {
  display: inline;
}
.esjae-account {
  /* Buttons — WooCommerce prints its own classes, so the pill is restated. */
}
.esjae-account .woocommerce-button,
.esjae-account button.button,
.esjae-account a.button,
.esjae-account input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: clamp(46px, 3.1vw, 56px);
  padding: 0 clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  background: #FF844B;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.esjae-account .woocommerce-button:hover, .esjae-account .woocommerce-button:focus-visible,
.esjae-account button.button:hover,
.esjae-account button.button:focus-visible,
.esjae-account a.button:hover,
.esjae-account a.button:focus-visible,
.esjae-account input[type=submit]:hover,
.esjae-account input[type=submit]:focus-visible {
  background: rgb(100%, 39.4647058824%, 11.4117647059%);
  color: #345E41;
}
.esjae-account .woocommerce-form-login .woocommerce-form-login__submit,
.esjae-account .woocommerce-ResetPassword button[type=submit] {
  width: 100%;
  margin-top: clamp(6px, 0.6vw, 12px);
}
.esjae-account {
  /* --- Sign in with Google ---------------------------------------------- */
  /* Deliberately not `.button`: the pill above is the store's own action, and
     Google's guidelines want their button to keep its white-and-grey shell. */
}
.esjae-account .esjae-social-login {
  margin-top: clamp(18px, 1.6vw, 32px);
}
.esjae-account .esjae-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 1.2vw, 24px);
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.esjae-account .esjae-social-divider::before, .esjae-account .esjae-social-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #ECECEC;
}
.esjae-account {
  /* `.hentry .entry-content a` (0,2,1) underlines this, so the button needs a
     selector that outranks it rather than one that merely ties. */
}
.esjae-account .esjae-social-login a.esjae-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: clamp(46px, 3.1vw, 56px);
  padding: 0 clamp(18px, 1.5vw, 30px);
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  color: #1F1F1F;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.esjae-account .esjae-social-login a.esjae-google-btn:hover, .esjae-account .esjae-social-login a.esjae-google-btn:focus-visible {
  border-color: #ABABAB;
  background: #FAFAF8;
  color: #1F1F1F;
  text-decoration: none;
}
.esjae-account .esjae-google-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}
.esjae-account .esjae-google-mark svg {
  display: block;
  width: 18px;
  height: 18px;
}
.esjae-account .woocommerce-LostPassword {
  margin: clamp(16px, 1.4vw, 28px) 0 0;
  text-align: center;
}
.esjae-account .woocommerce-LostPassword a {
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.esjae-account .woocommerce-LostPassword a:hover, .esjae-account .woocommerce-LostPassword a:focus-visible {
  color: #FF844B;
}

@media (max-width: 767.98px) {
  .esjae-account--out #customer_login {
    grid-template-columns: minmax(0, 1fr);
  }
  .esjae-account--out .woocommerce-form-login,
  .esjae-account--out .woocommerce-ResetPassword,
  .esjae-account--out #customer_login .col-1,
  .esjae-account--out #customer_login .col-2 {
    padding: 24px 20px;
  }
}
/* -------------------------------------------------------------------------
 *  My Account: the logged-in dashboard
 *  Navigation rail beside the content panel, on the same card language as the
 *  cart and checkout. Field and button styling is shared with the logged-out
 *  screens — see pages/_loginRegPage.scss.
 * ---------------------------------------------------------------------- */
/* The grid goes on the element that directly holds the two panels. An earlier
   attempt put it further up and used `display: contents` to flatten the chain,
   which fails: `article` and `main.site-main` sit in between and still generate
   boxes. */
.esjae-account--in .entry-content > .woocommerce {
  display: grid;
  grid-template-columns: clamp(220px, 20vw, 300px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 2vw, 40px);
}

/* Storefront lays these out as floated percentage columns —
   `.woocommerce-MyAccount-navigation { width: 17.647%; float: left; margin-right: 5.88% }`.
   Its woocommerce.css enqueues after this stylesheet, so a rule of equal
   specificity loses the tie; nesting them under the grid container wins it.
   The percentage is the damaging part: on a grid item it resolves against the
   300px track, collapsing the rail to 53px. */
.esjae-account--in .entry-content > .woocommerce > .woocommerce-MyAccount-navigation {
  width: auto;
  margin: 0;
  float: none;
}
.esjae-account--in .entry-content > .woocommerce > .woocommerce-MyAccount-content {
  width: auto;
  min-width: 0;
  margin: 0;
  float: none;
}

/* --- Navigation ----------------------------------------------------------- */
/* Storefront's woocommerce.css enqueues at priority 20 against this sheet's 10,
   so it prints later and wins every tie — these three have to be out-specified
   rather than out-ordered. Its selectors are
   `.hentry .entry-content .woocommerce-MyAccount-navigation ul` (0,3,1),
   `… ul li` (0,3,2) and `… ul li.woocommerce-MyAccount-navigation-link a`
   (0,4,3); one more class on each takes them.

   The first two draw a rule above the first item and below the last, on top of
   the separators this file already puts between them. The third zeroes the
   link's side padding, which leaves the active pill's label sitting on its own
   rounded end and pushes the item icon onto the curve. */
.esjae-account .hentry .entry-content .woocommerce-MyAccount-navigation ul {
  border-top: 0;
}
.esjae-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li {
  border-bottom: 0;
}
.esjae-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
  padding: clamp(11px, 0.95vw, 19px) clamp(16px, 1.25vw, 24px);
}

.woocommerce-MyAccount-navigation {
  padding: clamp(14px, 1.2vw, 24px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
}
.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-MyAccount-navigation li {
  margin: 0;
}
.woocommerce-MyAccount-navigation li + li {
  border-top: 1px solid #F0F0F0;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: clamp(11px, 0.95vw, 19px) clamp(12px, 1vw, 20px);
  border-radius: 999px;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.woocommerce-MyAccount-navigation li a:hover, .woocommerce-MyAccount-navigation li a:focus-visible {
  background: #F4F7F3;
  color: #345E41;
}
.woocommerce-MyAccount-navigation li.is-active {
  border-top-color: transparent;
  color: #ffffff;
}
.woocommerce-MyAccount-navigation li.is-active + li {
  border-top-color: transparent;
}
.woocommerce-MyAccount-navigation li.is-active a {
  background: #08301A;
  color: #ffffff;
}

/* --- Content panel -------------------------------------------------------- */
.woocommerce-MyAccount-content {
  min-width: 0;
  padding: clamp(22px, 2.2vw, 44px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(14px, 1.4vw, 28px);
  background: #ffffff;
}
.woocommerce-MyAccount-content > p {
  margin: 0 0 1em;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.65;
}
.woocommerce-MyAccount-content > p:last-child {
  margin-bottom: 0;
}
.woocommerce-MyAccount-content > p a {
  color: #345E41;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  margin: 0 0 clamp(14px, 1.2vw, 24px);
  color: #1A1A1A;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 1.55vw, 31px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.woocommerce-MyAccount-content .edit-link {
  display: none;
}

/* --- Orders table --------------------------------------------------------- */
.woocommerce-orders-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: clamp(12px, 1vw, 20px) clamp(8px, 0.7vw, 14px);
  border: 0;
  border-bottom: 1px solid #F0F0F0;
  text-align: left;
  vertical-align: middle;
}
.woocommerce-orders-table thead th {
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(10px, 0.65vw, 12px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.woocommerce-orders-table tbody td {
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

/* --- Addresses ------------------------------------------------------------ */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.7vw, 34px);
}

/* Storefront lays the two address cards out as floated percentage columns.
   The rule that actually applies is `.col2-set.addresses .col-1 { width:
   41.176%; float: left }` — three classes, so `.col2-set` is carried here too
   to take the count to four and win outright rather than tie. Its stylesheet
   loads after this one, so a tie would go to Storefront, and the percentage
   then resolves against the grid track and shrink-wraps each card. */
.esjae-account--in .woocommerce-Addresses.col2-set > .woocommerce-Address,
.esjae-account--in .woocommerce-Addresses.col2-set > .col-1,
.esjae-account--in .woocommerce-Addresses.col2-set > .col-2 {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
}

.woocommerce-Address {
  padding: clamp(18px, 1.6vw, 32px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(12px, 1vw, 20px);
  background: #FAFAF8;
}
.woocommerce-Address .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: clamp(10px, 0.9vw, 18px);
}
.woocommerce-Address .woocommerce-Address-title h2,
.woocommerce-Address .woocommerce-Address-title h3 {
  margin: 0;
  font-size: clamp(17px, 1.25vw, 25px);
}
.woocommerce-Address .woocommerce-Address-title .edit {
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 3px;
}
.woocommerce-Address .woocommerce-Address-title .edit:hover, .woocommerce-Address .woocommerce-Address-title .edit:focus-visible {
  color: #FF844B;
}
.woocommerce-Address address {
  margin: 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-style: normal;
  line-height: 1.7;
}

/* --- Edit account form ---------------------------------------------------- */
.woocommerce-EditAccountForm fieldset {
  width: auto;
  max-width: none;
  margin: clamp(20px, 1.8vw, 36px) 0 0;
  padding: clamp(18px, 1.6vw, 32px) 0 0;
  border: 0;
  border-top: 1px solid #F0F0F0;
  background: none;
}
.woocommerce-EditAccountForm fieldset legend {
  padding: 0;
  color: #1A1A1A;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(17px, 1.25vw, 25px);
  font-weight: 400;
  text-transform: uppercase;
}
.woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-EditAccountForm .woocommerce-form-row--last {
  width: 100%;
  float: none;
}
.woocommerce-EditAccountForm .clear {
  display: none;
}
.woocommerce-EditAccountForm em {
  display: block;
  margin-top: 6px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-style: normal;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .woocommerce-EditAccountForm .woocommerce-form-row--first,
  .woocommerce-EditAccountForm .woocommerce-form-row--last {
    display: inline-block;
    width: calc(50% - 10px);
    vertical-align: top;
  }
  .woocommerce-EditAccountForm .woocommerce-form-row--first {
    margin-right: 16px;
  }
}
/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .esjae-account--in .entry-content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-Addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767.98px) {
  .woocommerce-MyAccount-content {
    padding: 20px 16px;
  }
  .woocommerce-MyAccount-content .woocommerce-orders-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/* -------------------------------------------------------------------------
 *  Wishlist page (YITH WooCommerce Wishlist)
 *  The plugin's own markup, dressed in the cart's card language: a bordered
 *  white table on the shop container, the orange pill CTA and the green
 *  stock/stock-status tags used elsewhere.
 *
 *  YITH's stylesheet enqueues before ours, so equal-specificity rules win on
 *  order; the few places that need more (`#content`, and YITH's own
 *  `!important` on the add-to-cart link) are called out where they occur.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the wishlist runs on the same
   container as the rest of the shop. */
.esjae-wishlist .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* The plugin's shortcode renders straight into the page content, which carries
   no gutter of its own — `.site-main` is the outermost element that wraps it. */
.esjae-wishlist .site-main {
  width: 100%;
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px clamp(44px, 4.4vw, 88px);
  background: #ffffff;
}
.esjae-wishlist .content-area,
.esjae-wishlist .entry-content,
.esjae-wishlist article,
.esjae-wishlist .type-page {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.esjae-wishlist .edit-link {
  display: none;
}
.esjae-wishlist {
  --color-wishlist-table-background: #ffffff;
  --color-wishlist-table-text: #5A5A5A;
  --color-wishlist-table-border: #F0F0F0;
  --color-share-button-color: #ffffff;
  --color-share-button-color-hover: #08301A;
  --color-fb-button-background: #08301A;
  --color-fb-button-background-hover: #FF844B;
  --color-tw-button-background: #08301A;
  --color-tw-button-background-hover: #FF844B;
  --color-pr-button-background: #08301A;
  --color-pr-button-background-hover: #FF844B;
  --color-em-button-background: #08301A;
  --color-em-button-background-hover: #FF844B;
  --color-wa-button-background: #08301A;
  --color-wa-button-background-hover: #FF844B;
}

/* --- Page head ----------------------------------------------------------- */
.wishlist-page-head {
  padding: clamp(24px, 2.6vw, 52px) 0 clamp(18px, 1.8vw, 36px);
  text-align: center;
}

.wishlist-page-title {
  margin: 0;
}

.wishlist-page-note {
  max-width: 620px;
  margin: clamp(8px, 0.7vw, 14px) auto 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
  line-height: 1.6;
}

/* --- Notices -------------------------------------------------------------- */
.esjae-wishlist .woocommerce-message,
.esjae-wishlist .woocommerce-info,
.esjae-wishlist .woocommerce-error {
  margin: 0 0 clamp(16px, 1.4vw, 28px);
  padding: clamp(13px, 1.1vw, 22px) clamp(16px, 1.4vw, 28px);
  border: 0;
  border-left: 4px solid #FF844B;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #FAFAF8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  list-style: none;
}
.esjae-wishlist .woocommerce-message::before,
.esjae-wishlist .woocommerce-info::before,
.esjae-wishlist .woocommerce-error::before {
  display: none;
}
.esjae-wishlist .woocommerce-message a,
.esjae-wishlist .woocommerce-info a,
.esjae-wishlist .woocommerce-error a {
  color: #345E41;
  font-weight: 700;
}
.esjae-wishlist .woocommerce-error {
  border-left-color: #E74C3C;
}

/* --- List title ----------------------------------------------------------- */
/* The page heading above already says "Wishlist"; this is the name of the list
   being viewed, so it drops to a quiet uppercase label with the rename control
   beside it. YITH hides that control until the title is hovered — it is kept
   visible here, since a control nobody can see is one nobody uses. */
.esjae-wishlist .wishlist-title-container {
  margin: 0 0 clamp(14px, 1.2vw, 24px);
}

.esjae-wishlist .wishlist-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.esjae-wishlist .wishlist-title h2 {
  margin: 0;
  padding: 0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.esjae-wishlist .wishlist-title.wishlist-title-with-form h2:hover {
  background: none;
}
.esjae-wishlist .wishlist-title a.show-title-form {
  visibility: visible;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
}
.esjae-wishlist .wishlist-title a.show-title-form svg.yith-wcwl-icon-svg,
.esjae-wishlist .wishlist-title a.show-title-form img {
  width: 14px;
  height: 14px;
}
.esjae-wishlist .wishlist-title a.show-title-form:hover, .esjae-wishlist .wishlist-title a.show-title-form:focus-visible {
  background: none;
  color: #FF844B;
}

/* No `display` here on purpose: YITH hides the form with `.yes-js
   .hidden-title-form` (0,2,0) and shows it again with an inline style, so a
   `display` of ours at equal specificity would leave it open on page load. The
   buttons keep YITH's absolute positioning, tucked into the input's right
   padding — which needs the container sized to the input rather than the row. */
.esjae-wishlist .hidden-title-form {
  position: relative;
  width: clamp(220px, 22vw, 360px);
  margin: 10px 0 0;
}
.esjae-wishlist .hidden-title-form > input[type=text] {
  width: 100%;
  min-height: 0;
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 76px 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
}
.esjae-wishlist .hidden-title-form > input[type=text]:focus {
  border-color: #345E41;
}
.esjae-wishlist .hidden-title-form .edit-title-buttons {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  gap: 4px;
  transform: translateY(-50%);
}
.esjae-wishlist .hidden-title-form a.hide-title-form,
.esjae-wishlist .hidden-title-form a.save-title-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #F5F5F3;
  color: #08301A;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.esjae-wishlist .hidden-title-form a.hide-title-form svg,
.esjae-wishlist .hidden-title-form a.save-title-form svg {
  width: 15px;
  height: 15px;
}
.esjae-wishlist .hidden-title-form a.hide-title-form:hover, .esjae-wishlist .hidden-title-form a.hide-title-form:focus-visible,
.esjae-wishlist .hidden-title-form a.save-title-form:hover,
.esjae-wishlist .hidden-title-form a.save-title-form:focus-visible {
  background: #FF844B;
  color: #08301A;
}

/* --- The table card ------------------------------------------------------- */
/* `border-collapse: separate` keeps the corner radii; a table box does not clip
   its cells, so `overflow: hidden` would not round them. */
.esjae-wishlist table.wishlist_table,
.esjae-wishlist table.wishlist_table.shop_table {
  width: 100%;
  margin: 0;
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
}

.esjae-wishlist table.wishlist_table thead th {
  padding: clamp(12px, 1.1vw, 22px) clamp(10px, 1vw, 20px);
  border: 0;
  border-bottom: 1px solid #E6E6E6;
  background: #FAFAF8;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.esjae-wishlist table.wishlist_table thead th:first-child {
  border-top-left-radius: clamp(10px, 0.9vw, 18px);
  padding-left: clamp(14px, 1.3vw, 26px);
}
.esjae-wishlist table.wishlist_table thead th:last-child {
  border-top-right-radius: clamp(10px, 0.9vw, 18px);
  padding-right: clamp(14px, 1.3vw, 26px);
  text-align: right;
}

/* Column widths. The name column takes whatever is left. */
.esjae-wishlist table.wishlist_table tr th.product-checkbox,
.esjae-wishlist table.wishlist_table tr th.product-remove {
  width: 56px;
  text-align: center;
  vertical-align: middle;
}

.esjae-wishlist table.wishlist_table tr th.product-thumbnail {
  width: clamp(84px, 6.5vw, 116px);
}

.esjae-wishlist table.wishlist_table tr th.product-price,
.esjae-wishlist table.wishlist_table tr th.product-quantity,
.esjae-wishlist table.wishlist_table tr th.product-stock-status {
  width: clamp(120px, 11vw, 190px);
}

/* Row cells. Beats YITH's `.woocommerce table.shop_table.wishlist_table tr td`
   on order at equal specificity. */
.esjae-wishlist table.shop_table.wishlist_table tr td {
  padding: clamp(14px, 1.2vw, 24px) clamp(10px, 1vw, 20px);
  border: 0;
  border-top: 1px solid #F0F0F0;
  background: #ffffff;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  text-align: left;
  vertical-align: middle;
}
.esjae-wishlist table.shop_table.wishlist_table tr td:first-child {
  padding-left: clamp(14px, 1.3vw, 26px);
}
.esjae-wishlist table.shop_table.wishlist_table tr td:last-child {
  padding-right: clamp(14px, 1.3vw, 26px);
  text-align: right;
}

/* The header row already draws the line under itself. */
.esjae-wishlist table.shop_table.wishlist_table tbody tr:first-child td {
  border-top: 0;
}

.esjae-wishlist table.shop_table.wishlist_table tbody tr:last-child td:first-child {
  border-bottom-left-radius: clamp(10px, 0.9vw, 18px);
}
.esjae-wishlist table.shop_table.wishlist_table tbody tr:last-child td:last-child {
  border-bottom-right-radius: clamp(10px, 0.9vw, 18px);
}

/* --- Cells ---------------------------------------------------------------- */
.esjae-wishlist .wishlist_table tr td.product-thumbnail a {
  display: block;
  max-width: clamp(64px, 5.2vw, 96px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
  overflow: hidden;
}
.esjae-wishlist .wishlist_table tr td.product-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Storefront underlines every link inside `.entry-content` (0,2,1). */
.esjae-wishlist .wishlist_table td.product-name a {
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s ease;
}
.esjae-wishlist .wishlist_table td.product-name a:hover, .esjae-wishlist .wishlist_table td.product-name a:focus-visible {
  color: #FF844B;
  text-decoration: none;
}

/* Variation attributes YITH prints under the name. */
.esjae-wishlist .wishlist_table td.product-name .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  color: #5A5A5A;
  font-size: clamp(12px, 0.75vw, 14px);
  line-height: 1.5;
}
.esjae-wishlist .wishlist_table td.product-name .variation dt {
  margin: 0;
  font-weight: 700;
}
.esjae-wishlist .wishlist_table td.product-name .variation dd {
  margin: 0;
}
.esjae-wishlist .wishlist_table td.product-name .variation dd p {
  margin: 0;
}

.esjae-wishlist .wishlist_table td.product-price {
  color: #111111;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
}
.esjae-wishlist .wishlist_table td.product-price del {
  margin-right: 6px;
  color: #ABABAB;
  font-size: 0.8em;
  font-weight: 400;
}
.esjae-wishlist .wishlist_table td.product-price ins {
  background: none;
  text-decoration: none;
}
.esjae-wishlist .wishlist_table td.product-price .price-variation {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
}

.esjae-wishlist .wishlist_table td.product-quantity input[type=number] {
  width: clamp(64px, 5vw, 84px);
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 10px;
  border: 2px solid #08301A;
  border-radius: 999px;
  background: #ffffff;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  text-align: center;
}

/* Stock as a tag rather than bare coloured text. */
.esjae-wishlist .wishlist_table .product-stock-status span.wishlist-in-stock,
.esjae-wishlist .wishlist_table .product-stock-status span.wishlist-out-of-stock {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.2;
  text-transform: uppercase;
}

.esjae-wishlist .wishlist_table .product-stock-status span.wishlist-in-stock {
  background: rgba(52, 94, 65, 0.12);
  color: #345E41;
}

.esjae-wishlist .wishlist_table .product-stock-status span.wishlist-out-of-stock {
  background: rgba(192, 57, 43, 0.1);
  color: #C0392B;
}

.esjae-wishlist .wishlist_table .product-add-to-cart span.dateadded {
  display: block;
  margin-bottom: 8px;
  color: #ABABAB;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 600;
}

/* --- Add to cart ---------------------------------------------------------- */
/* YITH forces `display: table`, an auto margin and its own padding on this link
   with `!important`, so each of those has to be answered in kind. The button is
   the shop's green pill; the row already sits on white, so the pill carries the
   emphasis rather than an underlined link. */
.esjae-wishlist .wishlist_table .product-add-to-cart a,
.esjae-wishlist .wishlist_table .product-add-to-cart a.button,
.esjae-wishlist .wishlist_table a.add_to_cart.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 0 auto !important;
  padding: clamp(11px, 0.9vw, 16px) clamp(18px, 1.5vw, 28px) !important;
  border: 2px solid #345E41;
  border-radius: 999px;
  background: #345E41;
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.esjae-wishlist .wishlist_table .product-add-to-cart a:hover, .esjae-wishlist .wishlist_table .product-add-to-cart a:focus-visible,
.esjae-wishlist .wishlist_table .product-add-to-cart a.button:hover,
.esjae-wishlist .wishlist_table .product-add-to-cart a.button:focus-visible,
.esjae-wishlist .wishlist_table a.add_to_cart.button:hover,
.esjae-wishlist .wishlist_table a.add_to_cart.button:focus-visible {
  background: #FF844B;
  border-color: #FF844B;
  color: #08301A;
  text-decoration: none;
}

/* YITH's own "themed button" opt-out keeps its dark default via CSS variables. */
.esjae-wishlist {
  --color-add-to-cart-background: #345E41;
  --color-add-to-cart-text: #ffffff;
  --color-add-to-cart-border: #345E41;
  --color-add-to-cart-background-hover: #FF844B;
  --color-add-to-cart-text-hover: #08301A;
  --color-add-to-cart-border-hover: #FF844B;
  --add-to-cart-rounded-corners-radius: 999px;
}

/* The "added to cart" tick WooCommerce appends beside the button. */
.esjae-wishlist .wishlist_table .product-add-to-cart a.added_to_cart {
  margin-top: 8px !important;
  background: transparent;
  border-color: transparent;
  color: #345E41;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.esjae-wishlist .wishlist_table .product-add-to-cart a.added_to_cart:hover, .esjae-wishlist .wishlist_table .product-add-to-cart a.added_to_cart:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #FF844B;
}

.esjae-wishlist .wishlist_table .move-to-another-wishlist-button,
.esjae-wishlist .wishlist_table select.change-wishlist {
  margin-top: 10px;
}

/* --- Remove --------------------------------------------------------------- */
/* WooCommerce sets the colour with `!important` and Storefront positions the
   link absolutely for the cart table, whose class this table also carries. */
.esjae-wishlist table.wishlist_table.shop_table td.product-remove {
  width: 56px;
  padding-left: clamp(14px, 1.3vw, 26px);
  padding-right: 0;
  text-align: center;
}

.esjae-wishlist table.cart td.product-remove a.remove,
.esjae-wishlist .woocommerce table.wishlist_table.cart a.remove {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 999px;
  background: #F5F5F3;
  color: #5A5A5A !important;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  text-indent: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
.esjae-wishlist table.cart td.product-remove a.remove::before, .esjae-wishlist table.cart td.product-remove a.remove::after,
.esjae-wishlist .woocommerce table.wishlist_table.cart a.remove::before,
.esjae-wishlist .woocommerce table.wishlist_table.cart a.remove::after {
  content: none;
}
.esjae-wishlist table.cart td.product-remove a.remove:hover, .esjae-wishlist table.cart td.product-remove a.remove:focus-visible,
.esjae-wishlist .woocommerce table.wishlist_table.cart a.remove:hover,
.esjae-wishlist .woocommerce table.wishlist_table.cart a.remove:focus-visible {
  background: #FF844B;
  color: #08301A !important;
}

/* --- Empty list ----------------------------------------------------------- */
/* The cell spans every column, so it is both the first and the last child and
   picks up the right-alignment the last column carries. */
.esjae-wishlist table.shop_table.wishlist_table tbody td.wishlist-empty {
  margin: 0;
  padding: clamp(30px, 3vw, 60px) 25px;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 600;
  text-align: center;
}

.wishlist-empty-actions {
  padding: clamp(6px, 0.6vw, 12px) 0 clamp(30px, 3vw, 60px);
  text-align: center;
}

/* Storefront underlines every link inside `.entry-content` (0,2,1). */
.esjae-wishlist .wishlist-empty-actions .theme-btn {
  text-decoration: none;
}

/* --- Footer: bulk actions, update, share ---------------------------------- */
/* YITH floats the footer's three blocks; a flex row keeps them on one line
   without the clearing that floats need. */
.esjae-wishlist .yith_wcwl_wishlist_footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 1.6vw, 32px);
  margin-top: clamp(20px, 2vw, 40px);
}
.esjae-wishlist .yith_wcwl_wishlist_footer > div {
  float: none;
  margin: 0;
}
.esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_wishlist_bulk_action,
.esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_wishlist_update,
.esjae-wishlist .yith_wcwl_wishlist_footer .yith-wcwl-share,
.esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_footer_additional_action {
  float: none;
  clear: none;
}
.esjae-wishlist .yith_wcwl_wishlist_footer .yith-wcwl-share {
  flex: 1 1 100%;
  order: 3;
}
.esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_footer_additional_action {
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.esjae-wishlist .yith_wcwl_wishlist_bulk_action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.esjae-wishlist .yith_wcwl_wishlist_bulk_action label {
  margin: 0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.esjae-wishlist .yith_wcwl_wishlist_bulk_action select {
  min-width: clamp(200px, 18vw, 280px);
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 42px 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2308301A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
.esjae-wishlist .yith_wcwl_wishlist_bulk_action select:focus {
  border-color: #345E41;
  outline: none;
}
.esjae-wishlist .yith_wcwl_wishlist_bulk_action input[type=submit] {
  margin: 0;
}

/* The footer's three submit buttons and the estimate link share one pill.
   Storefront styles bare `input[type=submit]` and its `:hover` (0,1,1) beats a
   plain class, so every state names its own background. */
.esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit],
.esjae-wishlist .yith_wcwl_wishlist_footer button,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 clamp(18px, 1.5vw, 30px);
  border: 2px solid #08301A;
  border-radius: 999px;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit], .esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit]:hover, .esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit]:focus, .esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit]:focus-visible, .esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit]:active,
.esjae-wishlist .yith_wcwl_wishlist_footer button,
.esjae-wishlist .yith_wcwl_wishlist_footer button:hover,
.esjae-wishlist .yith_wcwl_wishlist_footer button:focus,
.esjae-wishlist .yith_wcwl_wishlist_footer button:focus-visible,
.esjae-wishlist .yith_wcwl_wishlist_footer button:active,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button:hover,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button:focus,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button:focus-visible,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button:active {
  background-color: #ffffff;
}
.esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit]:hover, .esjae-wishlist .yith_wcwl_wishlist_footer input[type=submit]:focus-visible,
.esjae-wishlist .yith_wcwl_wishlist_footer button:hover,
.esjae-wishlist .yith_wcwl_wishlist_footer button:focus-visible,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button:hover,
.esjae-wishlist .yith_wcwl_wishlist_footer a.ask-an-estimate-button:focus-visible {
  background-color: #08301A;
  color: #ffffff;
}
.esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart] {
  border-color: #FF844B;
  color: #08301A;
}
.esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart], .esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart]:hover, .esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart]:focus, .esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart]:focus-visible, .esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart]:active {
  background-color: #FF844B;
}
.esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart]:hover, .esjae-wishlist .yith_wcwl_wishlist_footer input[name=add_all_to_cart]:focus-visible {
  background-color: rgb(100%, 39.4647058824%, 11.4117647059%);
  color: #08301A;
}

/* --- Share ---------------------------------------------------------------- */
.esjae-wishlist .yith-wcwl-share {
  margin: 0;
  padding-top: clamp(16px, 1.4vw, 28px);
  border-top: 1px solid #F0F0F0;
}
.esjae-wishlist .yith-wcwl-share h4.yith-wcwl-share-title {
  margin: 0 0 12px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.esjae-wishlist .yith-wcwl-share ul {
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.esjae-wishlist .yith-wcwl-share li a {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.esjae-wishlist .yith-wcwl-share li a svg {
  width: 16px;
  height: 16px;
}
.esjae-wishlist .yith-wcwl-share li a.email svg {
  width: 18px;
  height: 18px;
}

/* The "copy this link" row under the share buttons. */
.esjae-wishlist .yith-wcwl-after-share-section {
  margin-top: 14px;
}
.esjae-wishlist .yith-wcwl-after-share-section input.copy-target {
  width: 100%;
  max-width: 520px;
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 18px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background: #FAFAF8;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 14px);
}
.esjae-wishlist .yith-wcwl-after-share-section small {
  display: block;
  margin-top: 8px;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: 12px;
}
.esjae-wishlist .yith-wcwl-after-share-section .copy-trigger {
  color: #345E41;
  font-weight: 700;
  cursor: pointer;
}

/* --- Pagination ----------------------------------------------------------- */
.esjae-wishlist table.wishlist_table tr.wishlist-pagination td {
  padding: clamp(14px, 1.2vw, 24px);
  background: #FAFAF8;
  text-align: center;
}
.esjae-wishlist table.wishlist_table tr.wishlist-pagination td .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  margin: 0 3px;
  padding: 0 10px;
  border-radius: 999px;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  text-decoration: none;
}
.esjae-wishlist table.wishlist_table tr.wishlist-pagination td .page-numbers.current, .esjae-wishlist table.wishlist_table tr.wishlist-pagination td .page-numbers:hover {
  background: #08301A;
  color: #ffffff;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .esjae-wishlist table.wishlist_table,
  .esjae-wishlist table.wishlist_table.shop_table {
    font-size: 14px;
  }
  .esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_wishlist_bulk_action,
  .esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_wishlist_update,
  .esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_footer_additional_action {
    flex: 1 1 100%;
  }
  .esjae-wishlist .yith_wcwl_wishlist_footer .yith_wcwl_footer_additional_action {
    justify-content: flex-start;
  }
}
/* Each row becomes a stacked card; the column strip goes away with it. */
@media (max-width: 767.98px) {
  .esjae-wishlist table.wishlist_table,
  .esjae-wishlist table.wishlist_table.shop_table {
    display: block;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .esjae-wishlist table.wishlist_table thead {
    display: none;
  }
  .esjae-wishlist table.wishlist_table tbody {
    display: block;
  }
  .esjae-wishlist table.wishlist_table tbody tr {
    display: grid;
    grid-template-columns: clamp(72px, 22vw, 96px) minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    margin: 0 0 14px;
    padding: 16px 52px 16px 16px;
    border: 1px solid #E6E6E6;
    border-radius: clamp(10px, 2.4vw, 16px);
    background: #ffffff;
  }
  .esjae-wishlist table.shop_table.wishlist_table tr td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .esjae-wishlist table.shop_table.wishlist_table tr td:first-child, .esjae-wishlist table.shop_table.wishlist_table tr td:last-child {
    padding: 0;
    text-align: left;
  }
  .esjae-wishlist table.shop_table.wishlist_table tr td.product-thumbnail {
    grid-column: 1;
    grid-row: 1/span 3;
    align-self: start;
  }
  .esjae-wishlist .wishlist_table tr td.product-thumbnail a {
    max-width: 100%;
  }
  .esjae-wishlist table.shop_table.wishlist_table tr td.product-name,
  .esjae-wishlist table.shop_table.wishlist_table tr td.product-price,
  .esjae-wishlist table.shop_table.wishlist_table tr td.product-stock-status,
  .esjae-wishlist table.shop_table.wishlist_table tr td.product-quantity {
    grid-column: 2;
  }
  .esjae-wishlist table.shop_table.wishlist_table tr td.product-add-to-cart {
    grid-column: 1/-1;
    margin-top: 10px;
  }
  .esjae-wishlist .wishlist_table .product-add-to-cart a,
  .esjae-wishlist .wishlist_table .product-add-to-cart a.button,
  .esjae-wishlist .wishlist_table a.add_to_cart.button {
    width: 100%;
    margin: 0 !important;
  }
  .esjae-wishlist table.wishlist_table.shop_table td.product-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    padding: 0;
  }
  .esjae-wishlist table.wishlist_table tbody td.wishlist-empty {
    padding: clamp(30px, 8vw, 50px) 16px;
    border: 1px solid #E6E6E6;
    border-radius: clamp(10px, 2.4vw, 16px);
    background: #ffffff;
  }
  .esjae-wishlist table.wishlist_table tr.wishlist-pagination td {
    padding: 14px 0;
    background: transparent;
    text-align: center;
  }
}
@media (max-width: 479.98px) {
  .esjae-wishlist .yith-wcwl-share ul {
    flex-wrap: wrap;
  }
}
/* -------------------------------------------------------------------------
 *  Compare page
 *  A products-across, specs-down table on the cart's card language. The table
 *  scrolls sideways inside its own box so the page body never does, and the
 *  label column stays pinned while it scrolls.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the compare table wants the shop
   container. */
.esjae-compare .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.esjae-compare .site-main {
  width: 100%;
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px clamp(44px, 4.4vw, 88px);
  background: #ffffff;
}
.esjae-compare .content-area,
.esjae-compare .entry-content,
.esjae-compare article,
.esjae-compare .type-page {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.esjae-compare .edit-link {
  display: none;
}

/* --- Page head ----------------------------------------------------------- */
.compare-page-head {
  padding: clamp(24px, 2.6vw, 52px) 0 clamp(18px, 1.8vw, 36px);
  text-align: center;
}

.compare-page-title {
  margin: 0;
}

.compare-page-note {
  max-width: 620px;
  margin: clamp(8px, 0.7vw, 14px) auto 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
  line-height: 1.6;
}

/* --- Status and empty state ---------------------------------------------- */
.compare-status {
  margin: 0;
  padding: clamp(24px, 2.4vw, 48px) 0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
  text-align: center;
}
.compare-status.is-error {
  color: #C0392B;
}

.compare-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(20px, 2vw, 40px) 0 clamp(40px, 4vw, 80px);
  text-align: center;
}

.compare-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 5vw, 88px);
  height: clamp(64px, 5vw, 88px);
  margin-bottom: clamp(14px, 1.2vw, 24px);
  border-radius: 999px;
  background: rgba(255, 132, 75, 0.16);
  color: #08301A;
  font-size: clamp(26px, 2vw, 38px);
}

.compare-empty-title {
  margin: 0 0 10px;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(24px, 2vw, 38px);
  font-weight: 400;
  text-transform: uppercase;
}

.compare-empty-text {
  margin: 0 0 clamp(18px, 1.6vw, 32px);
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.7;
}

/* Storefront underlines every link inside `.entry-content` (0,2,1). */
.esjae-compare .compare-empty .theme-btn {
  text-decoration: none;
}

/* --- The table ------------------------------------------------------------ */
/* The table is the only thing allowed to scroll sideways. */
.compare-scroll {
  border: 1px solid #E6E6E6;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-family: "Sen", sans-serif;
  table-layout: fixed;
}

/* Label column: pinned so the row you are reading keeps its name in view. */
.compare-table .compare-label {
  position: sticky;
  left: 0;
  z-index: 2;
  width: clamp(140px, 14vw, 220px);
  min-width: 140px;
  padding: clamp(14px, 1.2vw, 24px) clamp(14px, 1.3vw, 26px);
  border: 0;
  border-bottom: 1px solid #F0F0F0;
  background: #FAFAF8;
  color: #ABABAB;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
}

.compare-table .compare-label--head {
  z-index: 3;
  vertical-align: bottom;
}

/* --- Product columns ------------------------------------------------------ */
.compare-table .compare-col {
  position: relative;
  width: clamp(200px, 20vw, 320px);
  min-width: 200px;
  padding: clamp(18px, 1.6vw, 32px) clamp(12px, 1.1vw, 22px);
  border: 0;
  border-bottom: 1px solid #E6E6E6;
  border-left: 1px solid #F0F0F0;
  background: #ffffff;
  text-align: center;
  vertical-align: top;
  font-weight: 400;
}

.compare-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #F5F5F3;
  color: #5A5A5A;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.compare-remove:hover, .compare-remove:focus-visible {
  background: #FF844B;
  color: #08301A;
}

.compare-thumb {
  display: block;
  max-width: clamp(120px, 10vw, 170px);
  margin: 0 auto clamp(10px, 0.9vw, 18px);
  border: 1px solid #E6E6E6;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #ffffff;
  overflow: hidden;
}
.compare-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Storefront underlines every link inside `.entry-content` (0,2,1). */
.esjae-compare .compare-table .compare-name {
  display: block;
  margin: 0 0 clamp(10px, 0.9vw, 18px);
  color: #111111;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s ease;
}
.esjae-compare .compare-table .compare-name:hover, .esjae-compare .compare-table .compare-name:focus-visible {
  color: #FF844B;
  text-decoration: none;
}

.esjae-compare .compare-buy .theme-btn {
  width: 100%;
  text-decoration: none;
}

/* WooCommerce appends a "View cart" link after an AJAX add. */
.esjae-compare .compare-buy .added_to_cart {
  display: inline-block;
  margin-top: 8px;
  color: #345E41;
  font-size: clamp(12px, 0.75vw, 14px);
  font-weight: 700;
}

/* --- Row cells ------------------------------------------------------------ */
.compare-table .compare-cell {
  padding: clamp(14px, 1.2vw, 24px) clamp(12px, 1.1vw, 22px);
  border: 0;
  border-bottom: 1px solid #F0F0F0;
  border-left: 1px solid #F0F0F0;
  background: #ffffff;
  color: #5A5A5A;
  font-size: clamp(13px, 0.85vw, 16px);
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}
.compare-table .compare-cell p {
  margin: 0 0 0.6em;
}
.compare-table .compare-cell p:last-child {
  margin-bottom: 0;
}

.compare-table tbody tr:last-child .compare-label,
.compare-table tbody tr:last-child .compare-cell {
  border-bottom: 0;
}

/* Price reads as the headline number rather than body copy. */
.compare-row--price .compare-cell {
  color: #111111;
  font-size: clamp(15px, 1vw, 20px);
  font-weight: 700;
}
.compare-row--price .compare-cell del {
  margin-right: 6px;
  color: #ABABAB;
  font-size: 0.75em;
  font-weight: 400;
}
.compare-row--price .compare-cell ins {
  background: none;
  text-decoration: none;
}

.compare-row--summary .compare-cell {
  text-align: left;
}

.compare-blank {
  color: #D5D5D5;
}

/* Availability tag, matching the wishlist's. */
.compare-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: clamp(11px, 0.7vw, 13px);
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.2;
  text-transform: uppercase;
}

.compare-tag--in {
  background: rgba(52, 94, 65, 0.12);
  color: #345E41;
}

.compare-tag--out {
  background: rgba(192, 57, 43, 0.1);
  color: #C0392B;
}

.compare-rating {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.compare-rating .star-rating {
  margin: 0;
  color: #FF844B;
}

.compare-rating-count {
  color: #ABABAB;
  font-size: 12px;
  font-weight: 600;
}

/* --- Footer actions ------------------------------------------------------- */
.compare-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.2vw, 24px);
  margin-top: clamp(18px, 1.6vw, 32px);
}

.compare-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: clamp(42px, 2.9vw, 52px);
  padding: 0 clamp(18px, 1.5vw, 30px);
  border: 2px solid #08301A;
  border-radius: 999px;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.compare-clear, .compare-clear:hover, .compare-clear:focus, .compare-clear:focus-visible, .compare-clear:active {
  background-color: #ffffff;
}
.compare-clear:hover, .compare-clear:focus-visible {
  background-color: #08301A;
  color: #ffffff;
}

.esjae-compare .compare-keep-shopping {
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.esjae-compare .compare-keep-shopping:hover, .esjae-compare .compare-keep-shopping:focus-visible {
  color: #FF844B;
}

/* --- Header entry point --------------------------------------------------- */
.header-compare {
  position: relative;
}
.header-compare i {
  font-size: 24px;
  line-height: 1;
  color: #08301A;
}

.header-compare-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FF844B;
  color: #08301A;
  font-family: "Sen", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* --- Toast ---------------------------------------------------------------- */
/* Confirmation after the compare button is pressed, with the way through to
   the page. Without it the button changes colour and nothing else. */
.compare-toast {
  position: fixed;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 999px;
  background: #08301A;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 600;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.compare-toast.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.compare-toast-link {
  color: #FF844B;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.compare-toast-link:hover, .compare-toast-link:focus-visible {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .compare-toast {
    transition: none;
  }
}
/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 991.98px) {
  .compare-table .compare-label {
    width: 130px;
    min-width: 130px;
    padding: 14px 16px;
  }
  .compare-table .compare-col,
  .compare-table .compare-cell {
    min-width: 190px;
    padding: 16px 14px;
  }
}
@media (max-width: 575.98px) {
  .compare-table .compare-label {
    width: 108px;
    min-width: 108px;
    padding: 12px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }
  .compare-table .compare-col,
  .compare-table .compare-cell {
    min-width: 168px;
    padding: 14px 12px;
  }
  .compare-actions {
    justify-content: center;
  }
  .compare-actions .compare-clear {
    flex: 1 1 100%;
  }
  .compare-toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    justify-content: space-between;
    border-radius: 16px;
  }
}
/* -------------------------------------------------------------------------
 *  Blog archives and single posts
 *  The listing runs the homepage's "Insight & stories" card (see
 *  components/_blog.scss) in a wider grid; the post itself is a single measured
 *  column on the same card language as the rest of the site.
 * ---------------------------------------------------------------------- */
/* Storefront constrains #content to ~1170px; the blog runs on the same
   container as the rest of the site. */
.esjae-blog .site-content > .col-full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.esjae-blog .site-main {
  width: 100%;
  max-width: 1890px;
  margin: 0 auto;
  padding: 0 25px clamp(44px, 4.4vw, 88px);
  background: #ffffff;
}
.esjae-blog .content-area {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.esjae-blog .page-header {
  display: none;
}
.esjae-blog .post-edit-link,
.esjae-blog .edit-link {
  display: none;
}

/* --- Page head ----------------------------------------------------------- */
.blog-page-head {
  padding: clamp(24px, 2.6vw, 52px) 0 clamp(18px, 1.8vw, 36px);
  text-align: center;
}

.blog-page-title {
  margin: 0;
}

.blog-page-note {
  max-width: 680px;
  margin: clamp(8px, 0.7vw, 14px) auto 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 600;
  line-height: 1.6;
}

/* --- Listing -------------------------------------------------------------- */
/* The homepage caps its row at three; an archive has as many as it has, so the
   track is sized rather than counted. */
.blog-archive-grid {
  max-width: none;
  padding-top: clamp(6px, 0.6vw, 12px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 24vw, 420px), 1fr));
}

/* Storefront spaces stacked posts with a large bottom margin; the grid gap
   does that here. */
.esjae-blog .blog-archive-grid .blog-card {
  margin: 0;
  padding: 0;
  border: 0;
}

.blog-card-excerpt {
  margin: clamp(8px, 0.6vw, 12px) 0 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  line-height: 1.7;
}

/* Nothing found. */
.esjae-blog .no-results,
.esjae-blog .type-page.no-results {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(24px, 2.4vw, 48px) 0 clamp(40px, 4vw, 80px);
  text-align: center;
}
.esjae-blog .no-results .page-title,
.esjae-blog .type-page.no-results .page-title {
  margin: 0 0 10px;
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(24px, 2vw, 38px);
  font-weight: 400;
  text-transform: uppercase;
}
.esjae-blog .no-results .page-content,
.esjae-blog .type-page.no-results .page-content {
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  line-height: 1.7;
}

/* --- Pagination ----------------------------------------------------------- */
.esjae-blog .storefront-sorting,
.esjae-blog nav.navigation.pagination,
.esjae-blog .woocommerce-pagination {
  margin: clamp(26px, 2.6vw, 52px) 0 0;
  text-align: center;
}
.esjae-blog .storefront-sorting .nav-links,
.esjae-blog .storefront-sorting ul.page-numbers,
.esjae-blog nav.navigation.pagination .nav-links,
.esjae-blog nav.navigation.pagination ul.page-numbers,
.esjae-blog .woocommerce-pagination .nav-links,
.esjae-blog .woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.esjae-blog .storefront-sorting li,
.esjae-blog nav.navigation.pagination li,
.esjae-blog .woocommerce-pagination li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.esjae-blog .storefront-sorting .page-numbers,
.esjae-blog nav.navigation.pagination .page-numbers,
.esjae-blog .woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(38px, 2.8vw, 48px);
  height: clamp(38px, 2.8vw, 48px);
  padding: 0 12px;
  border: 1px solid #D5D5D5;
  border-radius: 999px;
  background: #ffffff;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.esjae-blog .storefront-sorting .page-numbers:hover, .esjae-blog .storefront-sorting .page-numbers:focus-visible,
.esjae-blog nav.navigation.pagination .page-numbers:hover,
.esjae-blog nav.navigation.pagination .page-numbers:focus-visible,
.esjae-blog .woocommerce-pagination .page-numbers:hover,
.esjae-blog .woocommerce-pagination .page-numbers:focus-visible {
  border-color: #08301A;
  background: #08301A;
  color: #ffffff;
}
.esjae-blog .storefront-sorting .page-numbers.current,
.esjae-blog nav.navigation.pagination .page-numbers.current,
.esjae-blog .woocommerce-pagination .page-numbers.current {
  border-color: #08301A;
  background: #08301A;
  color: #ffffff;
}
.esjae-blog .storefront-sorting .page-numbers.dots,
.esjae-blog nav.navigation.pagination .page-numbers.dots,
.esjae-blog .woocommerce-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}
.esjae-blog .storefront-sorting .page-numbers.dots:hover,
.esjae-blog nav.navigation.pagination .page-numbers.dots:hover,
.esjae-blog .woocommerce-pagination .page-numbers.dots:hover {
  background: none;
  color: #5A5A5A;
}
.esjae-blog .storefront-sorting .screen-reader-text,
.esjae-blog nav.navigation.pagination .screen-reader-text,
.esjae-blog .woocommerce-pagination .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Single post ---------------------------------------------------------- */
.esjae-blog--single .site-main {
  max-width: 1000px;
}
.esjae-blog--single article.post {
  margin: 0;
  padding: 0;
  border: 0;
}
.esjae-blog--single .entry-content {
  margin: 0;
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(15px, 0.95vw, 18px);
  line-height: 1.8;
}
.esjae-blog--single .entry-content > p {
  margin: 0 0 1.4em;
}
.esjae-blog--single .entry-content h2,
.esjae-blog--single .entry-content h3,
.esjae-blog--single .entry-content h4 {
  margin: 1.8em 0 0.6em;
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-weight: 700;
  line-height: 1.3;
}
.esjae-blog--single .entry-content h2 {
  font-size: clamp(21px, 1.6vw, 32px);
}
.esjae-blog--single .entry-content h3 {
  font-size: clamp(18px, 1.3vw, 26px);
}
.esjae-blog--single .entry-content h4 {
  font-size: clamp(16px, 1.1vw, 21px);
}
.esjae-blog--single .entry-content a {
  color: #345E41;
  font-weight: 600;
  text-underline-offset: 3px;
}
.esjae-blog--single .entry-content a:hover, .esjae-blog--single .entry-content a:focus-visible {
  color: #FF844B;
}
.esjae-blog--single .entry-content ul,
.esjae-blog--single .entry-content ol {
  margin: 0 0 1.4em 1.2em;
  padding: 0;
}
.esjae-blog--single .entry-content li {
  margin-bottom: 0.5em;
}
.esjae-blog--single .entry-content blockquote {
  margin: 1.6em 0;
  padding: clamp(16px, 1.4vw, 28px) clamp(18px, 1.6vw, 32px);
  border: 0;
  border-left: 4px solid #FF844B;
  border-radius: clamp(8px, 0.6vw, 12px);
  background: #FAFAF8;
  color: #1A1A1A;
  font-size: clamp(16px, 1.05vw, 20px);
  font-style: normal;
}
.esjae-blog--single .entry-content blockquote p:last-child {
  margin-bottom: 0;
}
.esjae-blog--single .entry-content > img,
.esjae-blog--single .entry-content .wp-post-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(20px, 1.8vw, 36px);
  border-radius: clamp(10px, 0.9vw, 18px);
  -o-object-fit: cover;
     object-fit: cover;
}
.esjae-blog--single .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: clamp(8px, 0.6vw, 12px);
}

/* Meta line under the title. */
.blog-single-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(10px, 0.9vw, 18px) 0 0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 600;
}

.blog-meta-sep {
  color: #D5D5D5;
}

/* Categories and tags under the post. */
.esjae-blog--single .entry-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1vw, 20px);
  margin: clamp(24px, 2.2vw, 44px) 0 0;
  padding: clamp(16px, 1.4vw, 28px) 0 0;
  border-top: 1px solid #F0F0F0;
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.esjae-blog--single .entry-taxonomy a {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(52, 94, 65, 0.1);
  color: #345E41;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.esjae-blog--single .entry-taxonomy a:hover, .esjae-blog--single .entry-taxonomy a:focus-visible {
  background: #FF844B;
  color: #08301A;
}

/* Previous / next. */
.esjae-blog--single .post-navigation {
  margin: clamp(24px, 2.2vw, 44px) 0 0;
  padding: clamp(16px, 1.4vw, 28px) 0 0;
  border-top: 1px solid #F0F0F0;
}
.esjae-blog--single .post-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(12px, 1.2vw, 24px);
}
.esjae-blog--single .post-navigation .nav-previous,
.esjae-blog--single .post-navigation .nav-next {
  flex: 1 1 45%;
  min-width: 0;
}
.esjae-blog--single .post-navigation .nav-next {
  text-align: right;
}
.esjae-blog--single .post-navigation a {
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.25s ease;
}
.esjae-blog--single .post-navigation a:hover, .esjae-blog--single .post-navigation a:focus-visible {
  color: #FF844B;
}

/* --- Comments ------------------------------------------------------------- */
.esjae-blog--single #comments {
  margin: clamp(30px, 3vw, 60px) 0 0;
  padding: clamp(22px, 2.2vw, 44px) 0 0;
  border-top: 1px solid #F0F0F0;
}
.esjae-blog--single #comments .comments-title,
.esjae-blog--single #comments .comment-reply-title {
  margin: 0 0 clamp(16px, 1.4vw, 28px);
  color: #000000;
  font-family: "Anton", "Sen", sans-serif;
  font-size: clamp(20px, 1.6vw, 32px);
  font-weight: 400;
  text-transform: uppercase;
}
.esjae-blog--single #comments .comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.esjae-blog--single #comments .comment-body {
  padding: clamp(16px, 1.4vw, 28px);
  border: 1px solid #EFEFEF;
  border-radius: clamp(10px, 0.9vw, 18px);
  background: #ffffff;
}
.esjae-blog--single #comments .comment,
.esjae-blog--single #comments .pingback {
  margin: 0 0 clamp(12px, 1.1vw, 22px);
  list-style: none;
}
.esjae-blog--single #comments .avatar {
  border-radius: 50%;
}
.esjae-blog--single #comments .comment-author .fn {
  color: #1A1A1A;
  font-family: "Sen", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.esjae-blog--single #comments .comment-metadata,
.esjae-blog--single #comments .comment-meta {
  color: #ABABAB;
  font-family: "Sen", sans-serif;
  font-size: clamp(11px, 0.72vw, 13px);
}
.esjae-blog--single #comments .comment-metadata a,
.esjae-blog--single #comments .comment-meta a {
  color: #ABABAB;
  text-decoration: none;
}
.esjae-blog--single #comments .comment-content {
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(14px, 0.9vw, 16px);
  line-height: 1.7;
}
.esjae-blog--single #comments .comment-reply-link {
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.esjae-blog--single #comments .comment-reply-link:hover, .esjae-blog--single #comments .comment-reply-link:focus-visible {
  color: #FF844B;
}

/* The reply form, on the same pill fields as the account screens. */
.esjae-blog--single #respond {
  margin-top: clamp(22px, 2vw, 40px);
  padding: clamp(20px, 1.8vw, 36px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(14px, 1.2vw, 24px);
  background: #FAFAF8;
}
.esjae-blog--single #respond .comment-notes,
.esjae-blog--single #respond .comment-form-cookies-consent label,
.esjae-blog--single #respond label {
  color: #5A5A5A;
  font-family: "Sen", sans-serif;
  font-size: clamp(12px, 0.8vw, 15px);
}
.esjae-blog--single #respond input[type=text],
.esjae-blog--single #respond input[type=email],
.esjae-blog--single #respond input[type=url],
.esjae-blog--single #respond textarea {
  width: 100%;
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.2vw, 22px);
  border: 1px solid #D5D5D5;
  border-radius: clamp(12px, 1vw, 20px);
  background: #ffffff;
  color: #111111;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
}
.esjae-blog--single #respond input[type=text]:focus,
.esjae-blog--single #respond input[type=email]:focus,
.esjae-blog--single #respond input[type=url]:focus,
.esjae-blog--single #respond textarea:focus {
  border-color: #345E41;
  outline: none;
}
.esjae-blog--single #respond input[type=text],
.esjae-blog--single #respond input[type=email],
.esjae-blog--single #respond input[type=url] {
  border-radius: 999px;
}
.esjae-blog--single #respond .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(46px, 3.1vw, 56px);
  padding: 0 clamp(22px, 1.9vw, 38px);
  border: 2px solid transparent;
  border-radius: 999px;
  color: #345E41;
  font-family: "Sen", sans-serif;
  font-size: clamp(13px, 0.85vw, 16px);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.esjae-blog--single #respond .submit, .esjae-blog--single #respond .submit:hover, .esjae-blog--single #respond .submit:focus, .esjae-blog--single #respond .submit:focus-visible, .esjae-blog--single #respond .submit:active {
  background-color: #FF844B;
}
.esjae-blog--single #respond .submit:hover, .esjae-blog--single #respond .submit:focus-visible {
  background-color: rgb(100%, 39.4647058824%, 11.4117647059%);
  color: #345E41;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 767.98px) {
  .esjae-blog--single .post-navigation .nav-links {
    flex-direction: column;
  }
  .esjae-blog--single .post-navigation .nav-next {
    text-align: left;
  }
}