/*
Theme Name: tiss-theme
*/

/* fonts: Helvetica Neue (headings), Inter (body) */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('assets/helvetica-neue/HelveticaNeueLight.woff2') format('woff2'),
         url('assets/helvetica-neue/HelveticaNeueLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('assets/helvetica-neue/HelveticaNeueRoman.woff2') format('woff2'),
         url('assets/helvetica-neue/HelveticaNeueRoman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('assets/helvetica-neue/HelveticaNeueMedium.woff2') format('woff2'),
         url('assets/helvetica-neue/HelveticaNeueMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('assets/helvetica-neue/HelveticaNeueBold.woff2') format('woff2'),
         url('assets/helvetica-neue/HelveticaNeueBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Neue';
    src: url('assets/helvetica-neue/HelveticaNeueBlack.woff2') format('woff2'),
         url('assets/helvetica-neue/HelveticaNeueBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/inter/Inter-Regular.woff2') format('woff2'),
         url('assets/inter/Inter-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/inter/Inter-Medium.woff2') format('woff2'),
         url('assets/inter/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/inter/Inter-SemiBold.woff2') format('woff2'),
         url('assets/inter/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/inter/Inter-Bold.woff2') format('woff2'),
         url('assets/inter/Inter-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #fdfaf8;
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
 	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a:hover {
    text-decoration: none !important;
}

.custom-container {
    max-width: unset !important;
    width: 100% !important;
    padding: 0 clamp(30px, 6vw, 80px) !important;
}

/* eyebrow starts: small label above section titles (markup from tiss_eyebrow(), motion in assets/js/eyebrow.js) */

/* inline-flex: follows the parent's text-align, so it sits left or centred with its heading */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    vertical-align: top;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.eyebrow-star {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    fill: #B4835F;
}

/* hairline in the label's own colour, grows away from the text */
.eyebrow-line {
    flex: 0 0 auto;
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: .3;
    transform-origin: left center;
}

.eyebrow-center .eyebrow-line:first-child {
    transform-origin: right center;
}

/* eyebrow ends */

/* page loader & transition starts: markup in header.php, html classes from page-transition-head.js */

/* while the loader or curtain covers the page, the page itself is dark too: nothing light can flash
   behind the cover, before it paints or as it slides away */
html.is-covered,
html.is-covered body {
    background-color: #0d0d0d;
}

/* first page of a visit: the brand name with a stack of photos shuffling over it and a counter beside it */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    background: #0d0d0d;
    color: #efe8e2;
    overflow: hidden;
}

.show-loader .page-loader {
    display: flex;
}

.page-loader.is-done {
    display: none;
}

.page-loader-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the name sits over the photo stack and inverts where it crosses a photo */
.page-loader-word {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 120px;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -5px;
    text-transform: uppercase;
    white-space: nowrap;
    mix-blend-mode: difference;
}

/* each letter rises inside its own mask */
.page-loader-char {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 6px;
}

/* starts below its mask, so the name is never seen standing still before page-transition.js (a footer
   script) raises the letters */
.page-loader-char-inner {
    display: inline-block;
    transform: translateY(110%);
}

.page-loader-space {
    display: inline-block;
    width: 34px;
}

/* small counter at the top right of the name */
.page-loader-count {
    position: absolute;
    top: -40px;
    right: -64px;
    color: #efe8e2;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    opacity: 0;
}

/* photos stack up in the middle, under the letters */
.page-loader-stack {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    pointer-events: none;
}

.page-loader-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #222;
    box-shadow: 0 20px 40px rgb(0 0 0 / 40%);
    opacity: 0;
    transform: translate(-50%, -50%);
}

.page-loader-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* between pages, no text: one plain near-black panel, moved by page-transition.js */
.page-curtain {
    position: fixed;
    inset: 0;
    z-index: 2900;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.page-curtain.is-active,
.show-curtain .page-curtain {
    display: block;
}

.page-curtain-panel {
    position: absolute;
    inset: 0;
    background: #0d0d0d;
    transform: translateY(100%);
    will-change: transform;
}

/* arriving: closed until the script lifts it */
.show-curtain .page-curtain-panel {
    transform: translateY(0);
}

/* only if the next page is slow to arrive: a thin gold line sweeps across the middle */
.page-curtain-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 1px;
    overflow: hidden;
    background: rgb(180 131 95 / 22%);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .4s ease;
}

.page-curtain-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #B4835F;
    transform: scaleX(0);
    transform-origin: left center;
    animation: curtainWait 1.6s cubic-bezier(.65, 0, .35, 1) infinite;
}

.page-curtain.is-waiting .page-curtain-line {
    opacity: 1;
    transition-delay: .5s;
}

@keyframes curtainWait {
    0% {
        transform: scaleX(0);
        transform-origin: left center;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left center;
    }

    50.01% {
        transform-origin: right center;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right center;
    }
}

/* arriving: the page waits a little low under the curtain and rises into place as it lifts (keep in step
   with `shift` in page-transition.js) */
.page-container {
    position: relative;
}

.show-curtain .page-container {
    top: 60px;
}

/* while the page is moving it is transformed, so fixed off-canvas panels inside it (the shop's filter drawer)
   count towards its width and a horizontal scrollbar appears; clip sideways for that moment (clip, not hidden,
   so sticky bars keep working) */
html.is-moving,
html.is-moving body {
    overflow-x: clip;
}

/* no scrolling underneath while covered */
.show-loader,
.show-loader body {
    overflow: hidden;
}

/* while the loader wipes away the page can scroll again, but no scrollbar shows until it has gone */
html.hide-scrollbar {
    scrollbar-width: none;
}

html.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* page loader & transition ends */

/* page animations: heading words rise inside these masks (assets/js/page-animation.js) */
.anim-word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 4px;
    margin-bottom: -4px;
    vertical-align: top;
}

.anim-word-inner {
    display: inline-block;
}

/* scrollbar: a slim brushed-gold line floating in a near-black channel with a faint gold hairline on its
   inner edge; the line brightens when grabbed */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: #0b0b0b;
    box-shadow: inset 1px 0 0 rgb(180 131 95 / 18%);
}

/* the transparent border keeps the gold clear of the channel's edges, so it reads as a 3px line */
::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 9px;
    background: linear-gradient(180deg, #e6c9ad 0%, #B4835F 45%, #7d573c 100%) padding-box;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    border-width: 2px;
    background: linear-gradient(180deg, #f3dfca 0%, #cfa07d 45%, #9a6d4c 100%) padding-box;
}

::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(90deg, #e6c9ad 0%, #B4835F 45%, #7d573c 100%) padding-box;
}

::-webkit-scrollbar-track:horizontal {
    box-shadow: inset 0 1px 0 rgb(180 131 95 / 18%);
}

::-webkit-scrollbar-corner {
    background: #0b0b0b;
}

/* page to page (html.is-moving, from the click until the new page has settled): the scrollbar keeps its
   width, so nothing shifts sideways, but shows nothing; its channel goes curtain-dark */
html.is-moving::-webkit-scrollbar-track {
    background: #0d0d0d;
    box-shadow: none;
}

html.is-moving::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Firefox has no ::-webkit-scrollbar; kept out of Chrome, where these would switch the styling above off */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #B4835F #0b0b0b;
    }

    html.is-moving {
        scrollbar-color: transparent #0d0d0d;
    }
}

html {
    scroll-behavior: smooth;
}

/* header starts */

.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 8px 0;
    background: #ffffff;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.home-background .header-wrapper {
    background: linear-gradient(180deg, rgb(0 0 0 / 9%) 0%, rgb(0 0 0 / 0%) 100%);
}

.f-nav .header-wrapper, .f-nav.home-background .header-wrapper {
    background: #ffffff;
    box-shadow: 0 0 10px 0 rgb(255 255 255 / 30%);
    padding: 8px 0;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 0 clamp(30px, 6vw, 80px) !important;
}

.header-logo {
    flex: 0 0 auto;
    display: block;
}

.header-logo img {
    display: block;
    height: 75px;
    width: auto;
    max-width: 115px;
    transition: height 0.3s ease;
}

.f-nav .header-logo img {
    height: 64px;
}

.header-nav {
    flex: 1 1 auto;
}

.header-nav ul {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mega-menu-wrap-primary #mega-menu-primary {
    display: flex;
    justify-content: center;
    gap: 30px;
    background: transparent;
}

/* top level: thin gold underline grows in from the left on hover and on the current page */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    padding: 6px 0;
    background: linear-gradient(#B4835F, #B4835F) left bottom / 0 1px no-repeat;
    color: #111;
    font-size: 13px;
    font-weight: 600 !important;
    letter-spacing: 1.5px;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s ease, background-size .4s cubic-bezier(.65, 0, .35, 1);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background-color: transparent;
    background-size: 100% 1px;
    color: #B4835F;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
    background-color: rgba(51, 51, 51, 0);
    color: #B4835F;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    margin-left: 4px;
    transition: transform .3s ease;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: rotate(180deg);
}

.header-user-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}

.header-icon {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    color: #111111d3;
    transition: color 0.3s ease;
}

.header-icon:hover,
.header-icon.active {
    color: #B4835F;
}

.cart-count {
    position: absolute;
    top: -10px;
    right: -12px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #B4835F;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.header-search {
    position: relative;
    display: flex;
    align-items: center;
}

/* box slides open to the left of the icon, without pushing the other icons */
.header-search-form {
    position: absolute;
    top: 50%;
    right: 34px;
    width: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 25px;
    background: #fff;
    opacity: 0;
    transform: translateY(-50%);
    transition: width .4s cubic-bezier(.65, 0, .35, 1), opacity .3s ease, border-color .3s ease;
}

.header-search-form input {
    width: 100%;
    padding: 8px 16px;
    border: none;
    outline: none;
    background: transparent;
    color: #111;
    font-size: 14px;
}

.header-search-form input::placeholder {
    color: rgb(17 17 17 / 50%);
}

.header-search.active .header-search-form {
    width: 240px;
    border-color: rgb(17 17 17 / 20%);
    opacity: 1;
}

.header-search.active .search-toggle {
    color: #B4835F;
}

/* search and category strip added to the menu list for the mobile panel */
.header-menu-extra {
    display: none;
}

/* phone bottom bar (markup in footer.php): only shown in the phone styles */
.mobile-bar {
    display: none;
}

/* desktop dropdown (Shop's categories): a white card under its link instead of the plugin's blue/red
   default. 1201px is Max Mega Menu's breakpoint: at 1200px and below the same list sits in the
   off-canvas panel, styled in the breakpoint blocks */
@media only screen and (min-width: 1201px) {
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout > ul.mega-sub-menu {
        top: calc(100% + 16px);
        left: -18px;
        width: 230px;
        padding: 10px;
        border: 1px solid rgb(17 17 17 / 6%);
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 24px 50px rgb(17 17 17 / 12%);
    }

    /* bridges the gap under the parent link, so the card stays open on the way down to it */
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout > ul.mega-sub-menu::before {
        content: "";
        position: absolute;
        top: -17px;
        right: 0;
        left: 0;
        height: 17px;
    }

    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
        padding: 10px 14px;
        border-radius: 8px;
        background: transparent;
        color: #111;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: .3px;
        line-height: 1.4;
        text-transform: none;
        transition: background-color .3s ease, color .3s ease, padding-left .4s cubic-bezier(.22, 1, .36, 1);
    }

    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus-visible {
        padding-left: 18px;
        background: #f6f3ef;
        color: #B4835F;
    }

    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
        background: transparent;
        color: #111;
    }

    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
        color: #B4835F;
    }

    /* the items come in one after another as the card opens */
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
    }

    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item {
        opacity: 1;
        transform: translateY(0);
    }

    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item:nth-child(2) { transition-delay: .03s; }
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item:nth-child(3) { transition-delay: .06s; }
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item:nth-child(4) { transition-delay: .09s; }
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item:nth-child(5) { transition-delay: .12s; }
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on ul.mega-sub-menu li.mega-menu-item:nth-child(n+6) { transition-delay: .15s; }
}

@media only screen and (min-width: 1201px) and (prefers-reduced-motion: reduce) {
    .header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* header ends */

/* login and register starts */

/* side gutters come from .custom-container, like the rest of the site */
.auth {
    padding: 130px 0 80px;
    background: #ffffff;
}

.auth-card {
    display: flex;
    gap: 14px;
    min-height: 720px;
    padding: 14px;
    border-radius: 33px;
    background: #f6f3ef;
}

.auth-side {
    display: flex;
    flex: 0 0 46%;
    flex-direction: column;
    min-width: 0;
    padding: 26px 40px 20px;
}

.auth-body {
    width: 100%;
    margin: auto;
    padding: 40px 0;
}

.auth-help {
    margin: 0;
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
    text-align: center;
}

.auth-help a {
    color: #111;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-help a:hover {
    color: #B4835F;
}

/* sign in / create account switch */
.auth-switcher {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 34px;
    padding: 4px;
    border-radius: 999px;
    background: #ebe5de;
}

.auth-switch-btn {
    position: relative;
    z-index: 1;
    padding: 9px 22px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color .3s ease;
}

.auth-switch-btn.is-active {
    color: #111;
}

.auth-switch-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 4px 12px -6px rgb(0 0 0 / 15%);
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.auth-switcher[data-active="register"] .auth-switch-pill {
    transform: translateX(100%);
}

.auth-panel:not([hidden]) {
    animation: authFade .45s ease;
}

.auth-title {
    margin: 0 0 8px;
    color: #111;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.15;
}

.auth-lead {
    margin: 0 0 30px;
    color: rgb(17 17 17 / 58%);
    font-size: 14px;
    line-height: 1.6;
}

/* fields */
.auth-field {
    margin-bottom: 18px;
}

.auth-field label,
.auth-label-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

.auth-label-row {
    justify-content: space-between;
}

.auth-label-row label {
    margin: 0;
}

.auth-optional {
    margin-left: auto;
    color: rgb(17 17 17 / 40%);
    font-size: 12px;
    font-weight: 400;
}

.auth-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.auth-field input::placeholder {
    color: rgb(17 17 17 / 32%);
}

.auth-field input:hover {
    border-color: #cfc8c0;
}

.auth-field input:focus {
    border-color: #111;
    box-shadow: 0 0 0 4px rgb(17 17 17 / 6%);
    outline: none;
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* password with show / hide */
.auth-password {
    position: relative;
}

.auth-password input {
    padding-right: 48px;
}

.auth-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: rgb(17 17 17 / 45%);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .3s ease, background-color .3s ease;
}

.auth-eye:hover {
    background: #f3eee8;
    color: #111;
}

.auth-eye svg {
    width: 18px;
    height: 18px;
}

.auth-eye-closed,
.auth-eye[aria-pressed="true"] .auth-eye-open {
    display: none;
}

.auth-eye[aria-pressed="true"] .auth-eye-closed {
    display: block;
}

/* phone with country code */
.auth-phone {
    display: flex;
}

.auth-phone-code {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #e3ded8;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: #efe9e2;
    color: rgb(17 17 17 / 65%);
    font-size: 14px;
}

.auth-phone input {
    border-radius: 0 10px 10px 0;
}

.auth-link {
    color: #111;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .3s ease;
}

.auth-link:hover {
    color: #B4835F;
}

.auth-note {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    color: rgb(17 17 17 / 62%);
    font-size: 13px;
}

/* guest with a wishlist / bag: signing in keeps it */
.auth-saved {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -14px 0 26px;
    padding: 12px 14px;
    border: 1px solid #e6d5c7;
    border-radius: 10px;
    background: #faf4ee;
    color: rgb(17 17 17 / 70%);
    font-size: 13px;
    line-height: 1.5;
}

.auth-saved svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #B4835F;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 24px;
    color: rgb(17 17 17 / 70%);
    font-size: 13px;
    cursor: pointer;
}

.auth-check input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #111;
    cursor: pointer;
}

/* main button */
.auth-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease;
}

.auth-submit:hover {
    background: #B4835F;
    color: #fff;
    text-decoration: none;
}

.auth-submit.is-loading span {
    opacity: 0;
}

.auth-submit.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 1.5px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

.auth-alt {
    margin: 22px 0 0;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    text-align: center;
}

.auth-alt a {
    color: #111;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-alt a:hover {
    color: #B4835F;
}

.auth-legal {
    margin: 14px 0 0;
    color: rgb(17 17 17 / 45%);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.auth-legal a {
    color: rgb(17 17 17 / 70%);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* forgot password / sent / reset */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    text-decoration: none;
    transition: color .3s ease;
}

.auth-back svg {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.auth-back:hover {
    color: #111;
    text-decoration: none;
}

.auth-back:hover svg {
    transform: translateX(-3px);
}

.auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border: 1px solid #e6dfd7;
    border-radius: 50%;
    background: #fff;
    color: #111;
}

.auth-icon svg {
    width: 24px;
    height: 24px;
}

.auth-icon-success {
    border-color: #ead9c9;
    background: #f7efe7;
    color: #B4835F;
}

/* WooCommerce notices inside the form side */
.auth-notices .woocommerce-error,
.auth-notices .woocommerce-message,
.auth-notices .woocommerce-info {
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    list-style: none;
}

.auth-notices .woocommerce-error li,
.auth-notices .woocommerce-message li,
.auth-notices .woocommerce-info li {
    margin: 0;
}

.auth-notices .woocommerce-error {
    border-color: #f3cfcb;
    background: #fdf1f0;
    color: #a3352a;
}

.auth-notices .woocommerce-message,
.auth-notices .woocommerce-info {
    border-color: #cfe6d3;
    background: #f1f8f2;
    color: #2d6a32;
}

.auth-notices a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.auth-switch-btn:focus-visible,
.auth-eye:focus-visible,
.auth-link:focus-visible,
.auth-submit:focus-visible,
.auth-alt a:focus-visible,
.auth-back:focus-visible,
.auth-help a:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* ---- right: photo panel */
.auth-visual {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /* square where the notches sit (top-left, bottom-right): a rounded corner under a notch leaves a dark seam */
    border-radius: 0 24px 0 24px;
    background: #2a2622;
    isolation: isolate;
}

.auth-visual-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* soft shade at the bottom so the line and the cards stay readable */
.auth-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 45%, rgb(0 0 0 / 55%) 100%);
}

/* notched corners: white tabs cut into the photo, with smooth inverse curves */
.auth-notch {
    position: absolute;
    z-index: 2;
    background: #f6f3ef;
}

.auth-notch::before,
.auth-notch::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
}

.auth-notch-top {
    top: 0;
    left: 0;
    width: 150px;
    height: 64px;
    border-bottom-right-radius: 24px;
}

.auth-notch-top::before {
    top: 0;
    left: 100%;
    background: radial-gradient(circle at 100% 100%, transparent 23.5px, #f6f3ef 24px);
}

.auth-notch-top::after {
    top: 100%;
    left: 0;
    background: radial-gradient(circle at 100% 100%, transparent 23.5px, #f6f3ef 24px);
}

.auth-notch-bottom {
    right: 0;
    bottom: 0;
    width: 110px;
    height: 74px;
    border-top-left-radius: 24px;
}

.auth-notch-bottom::before {
    right: 100%;
    bottom: 0;
    background: radial-gradient(circle at 0 0, transparent 23.5px, #f6f3ef 24px);
}

.auth-notch-bottom::after {
    right: 0;
    bottom: 100%;
    background: radial-gradient(circle at 0 0, transparent 23.5px, #f6f3ef 24px);
}

.auth-tag {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 10px;
    background: rgb(0 0 0 / 13%);
    color: #fff;
    font-size: 12px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.auth-tag strong {
    font-weight: 600;
}

.auth-tag span {
    opacity: .75;
}

.auth-visual-content {
    position: absolute;
    right: 150px;
    bottom: 44px;
    left: 44px;
    z-index: 1;
}

/* editorial line in an italic serif, like the reference */
.auth-quote {
    margin: 0 0 24px;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.5px;
    line-height: 1.15;
    text-shadow: 0 2px 20px rgb(0 0 0 / 25%);
}

/* perks: a quiet two-column list under a hairline, so the quote stays the focus */
.auth-perks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 480px;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 28%);
}

.auth-perk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgb(255 255 255 / 85%);
    font-size: 13px;
    line-height: 1.5;
}

.auth-perk svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #e2bc98;
}

@keyframes authFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* login and register ends */

/* cursor dot starts */

.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 0;
    transition: width .3s ease, height .3s ease, opacity .3s ease;
}

.cursor-dot.is-visible {
    opacity: 1;
}

.cursor-dot.is-hovering {
    width: 56px;
    height: 56px;
}

.cursor-dot.is-pressed {
    width: 8px;
    height: 8px;
}

.cursor-dot.is-hovering.is-pressed {
    width: 44px;
    height: 44px;
}

.cursor-dot-label {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}

.cursor-dot.is-drag {
    width: 72px;
    height: 72px;
}

.cursor-dot.is-drag.is-pressed {
    width: 60px;
    height: 60px;
}

.cursor-dot.is-drag .cursor-dot-label {
    opacity: 1;
}

/* cursor dot ends */

/* home banner starts */

.banner-wrap {
    padding: 110px 0 0;
    background: #f2f2f2;
    color: #111111;
    overflow: hidden;
}

.banner-inner {
    position: relative;
    container-type: inline-size;
    display: flex;
    width: 100%;
    aspect-ratio: 1061 / 571;
    background: #f2f2f2;
}

.banner-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.banner-col-left {
    flex: 0 0 48%;
    padding-bottom: 48px;
}

.banner-col-right {
    position: relative;
    flex: 0 0 48%;
    margin-left: auto;
    align-items: flex-end;
    padding-bottom: 48px;
    padding-left: 64px;
}

.banner-line {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    --stitch: #b3aca5;
    --seam: rgb(0 0 0 / 7%);
}

.banner-line-v {
    left: 74.2%;
    top: -110px;
    bottom: 0;
    width: 6px;
    background:
        repeating-linear-gradient(to bottom, var(--stitch) 0 9px, transparent 9px 15px) left / 2px 100% no-repeat,
        linear-gradient(var(--seam), var(--seam)) right / 1px 100% no-repeat;
}

.banner-line-h {
    left: -100vw;
    right: -100vw;
    top: 74%;
    height: 6px;
    background:
        repeating-linear-gradient(to right, var(--stitch) 0 9px, transparent 9px 15px) top / 100% 2px no-repeat,
        linear-gradient(var(--seam), var(--seam)) bottom / 100% 1px no-repeat;
}

.banner-title {
    position: relative;
    z-index: 9;
    margin: 0;
    font-weight: 700;
    font-size: 105px;
    line-height: .8;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    mix-blend-mode: difference;
}

.banner-col-left .banner-title {
    margin-top: 48px;
}

.banner-title-2 {
    align-self: flex-start;
    margin: 124px 0 0;
    line-height: 1.02;
    z-index: 9;
    text-wrap: balance;
}

.banner-cta {
    position: relative;
    z-index: 3;
    align-self: flex-end;
    padding-right: 32px;
}

.banner-copy {
    position: relative;
    z-index: 3;
    max-width: 350px;
    margin-top: 32px;
}

.banner-text p {
    margin-bottom: 48px;
}

.banner-text p {
    font-size: 18px;
    line-height: 1.6;
}

.banner-text p:last-child {
    margin-bottom: 0;
}

.banner-btn {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 5px 5px 5px 18px;
    border-radius: 50px;
    background: #1d1d1d;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.banner-btn::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    z-index: -1;
    width: 40px;
    border-radius: 50px;
    background: #B4835F;
    transition: width .5s cubic-bezier(.65, 0, .35, 1);
}

.banner-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgb(0 0 0 / 18%);
}

.banner-btn:hover::before {
    width: calc(100% - 10px);
}

.banner-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #1d1d1d;
    overflow: hidden;
}

.banner-btn-icon svg {
    width: 20px;
    height: 20px;
}

.banner-btn:hover .banner-btn-icon svg {
    animation: bannerArrowLoop .5s cubic-bezier(.65, 0, .35, 1);
}

@keyframes bannerArrowLoop {
    0%   { transform: translateX(0); }
    49%  { transform: translateX(150%); }
    50%  { transform: translateX(-150%); }
    100% { transform: translateX(0); }
}

.banner-portrait {
    position: absolute;
    left: 25%;
    bottom: 0;
    z-index: 2;
    width: 39%;
}

.banner-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.banner-promo {
    position: relative;
    z-index: 3;
    align-self: flex-end;
    flex: 0 0 21.5cqw;
    margin-left: -3cqw;
    padding: 5cqw 2cqw 2.2cqw;
    background: #fff;
    clip-path: polygon(20% 0, 100% 0, 100% 70%, 72% 100%, 0 100%, 0 20%);
    color: #1d1d1d;
    text-decoration: none;
}

.banner-promo p {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.7cqw;
    line-height: 1.05;
    text-transform: uppercase;
}

.banner-promo-arrow {
    position: absolute;
    top: 1.6cqw;
    right: 1.8cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2cqw;
    height: 4.2cqw;
    border-radius: 50%;
    background: #ff7a1a;
    color: #fff;
}

.banner-promo-arrow svg {
    width: 45%;
    height: 45%;
}

.banner-quality {
    position: absolute;
    left: 140px;
    bottom: 60px;
    width: 160px;
}

.banner-quality svg {
    display: block;
    width: 100%;
    height: auto;
}

.banner-quality span {
    position: absolute;
    left: 4cqw;
    top: -1.5cqw;
    font-size: 1.15cqw;
    font-weight: 600;
    white-space: nowrap;
}

.banner-stats {
    display: flex;
    align-items: flex-end;
    margin-top: auto;
}

.banner-stat {
    text-align: center;
}

.banner-stat strong {
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 48px;
    line-height: 1;
}

.banner-stat span {
    display: block;
    margin-top: 8px;
    font-size: 16px;
}

.banner-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.banner-social a {
    color: #1d1d1d;
    font-size: 20px;
    transition: color .3s ease;
}

.banner-social a:hover {
    color: #B4835F;
}

/* home banner ends */

/* marquee starts */

.marquee-wrap {
    overflow: hidden;
    padding: 18px 0;
    background: #1d1d1d;
    color: #fff;
}

.marquee-track {
    display: flex;
    width: max-content;
}

.marquee-list {
    display: flex;
    flex-shrink: 0;
    justify-content: space-around;
    min-width: 100vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marquee-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee-list li::after {
    content: "+";
    margin: 0 40px;
}

/* marquee ends */

/* legends film starts */

.legends-film-wrap {
    background: #f0f0f0;
    overflow: hidden;
}

.legends-film {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    clip-path: inset(0 round 0);
}

.legends-film-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.legends-film-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 70%) 100%);
}

.legends-film-head {
    position: relative;
    z-index: 1;
    max-width: 950px !important;
    color: #fff;
    text-align: center;
}

.legends-film-eyebrow {
    margin-bottom: 20px;
    color: #fff;
    font-size: 13px;
}

.legends-film-title {
    margin: 0 0 24px;
    color: #fff;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.02;
    text-transform: uppercase;
}

.legends-film-title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.legends-film-title .word > span {
    display: inline-block;
}

.legends-film-text {
    max-width: 600px;
    margin: 0 auto;
    color: rgb(255 255 255 / 85%);
    font-size: 18px;
    line-height: 1.7;
}

/* viewfinder over the film: corner marks, top/bottom info rows, playback line */
.legends-film-frame {
    position: absolute;
    inset: 100px 28px 28px; /* top clears the fixed header */
    z-index: 2;
    pointer-events: none;
}

.legends-film-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 0 solid rgb(255 255 255 / 70%);
}

.legends-film-corner-tl {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
}

.legends-film-corner-tr {
    top: 0;
    right: 0;
    border-top-width: 1px;
    border-right-width: 1px;
}

.legends-film-corner-bl {
    bottom: 0;
    left: 0;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.legends-film-corner-br {
    right: 0;
    bottom: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

.legends-film-hud {
    position: absolute;
    inset: 124px 62px 52px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    pointer-events: none;
}

.legends-film-hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.legends-film-hud-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgb(255 255 255 / 80%);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* recording light */
.legends-film-rec {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B4835F;
    animation: legends-film-rec 1.6s ease-in-out infinite;
}

.legends-film-wrap.is-offscreen .legends-film-rec {
    animation-play-state: paused;
}

@keyframes legends-film-rec {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

.legends-film-timecode {
    color: rgb(255 255 255 / 80%);
    font-size: 12px;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

.legends-film-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 2px;
    background: rgb(255 255 255 / 15%);
}

.legends-film-progress-fill {
    position: absolute;
    inset: 0;
    background: #B4835F;
    transform: scaleX(0);
    transform-origin: left center;
}

/* legends film ends */

/* wishlist toggle starts */

.wishlist-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.wishlist-toggle:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* wishlist toggle ends */

/* new arrivals starts */

.new-arrival-wrap {
    padding: 120px 0 100px;
    background: #f7f3ee;
    color: #111;
    overflow: hidden;
}

.new-arrival-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 56px;
}

.new-arrival-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.new-arrival-title {
    margin: 0;
    color: #111;
    font-size: 58px;
    font-weight: 500;
    line-height: 1;
}

.new-arrival-title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.new-arrival-title .word > span {
    display: inline-block;
}

.new-arrival-text {
    max-width: 380px;
    margin: 0 0 10px;
    color: rgb(17 17 17 / 65%);
    font-size: 16px;
    line-height: 1.6;
}

.new-arrival-track {
    display: flex;
    gap: 18px;
    padding: 0 80px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.new-arrival-track::-webkit-scrollbar {
    display: none;
}

.new-arrival-track.is-dragging {
    cursor: grabbing;
}

.new-arrival-track.is-dragging a {
    pointer-events: none;
}

.new-arrival-card {
    position: relative;
    flex: 0 0 340px;
}

.new-arrival-img {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #ece7e1;
}

.new-arrival-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.new-arrival-card:hover .new-arrival-img img {
    transform: scale(1.06);
}

.new-arrival-card .wishlist-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #1d1d1d;
    font-size: 14px;
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

.new-arrival-card .wishlist-toggle:hover {
    transform: scale(1.1);
}

.new-arrival-card .wishlist-toggle.active {
    background: #B4835F;
    color: #fff;
}

.new-arrival-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
}

.new-arrival-cat {
    display: block;
    margin-bottom: 6px;
    color: rgb(17 17 17 / 50%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.new-arrival-info h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.new-arrival-info h3 a {
    color: #111;
    text-decoration: none;
}

.new-arrival-rating {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

.new-arrival-stars {
    display: flex;
    gap: 2px;
}

.new-arrival-stars svg {
    display: block;
    width: 13px;
    height: 13px;
}

.new-arrival-star-empty {
    fill: rgb(17 17 17 / 12%);
}

.new-arrival-star-fill {
    fill: #B4835F;
}

.new-arrival-rating-count {
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
}

.new-arrival-price {
    display: block;
    margin-top: 6px;
    color: rgb(17 17 17 / 75%);
    font-size: 14px;
}

.new-arrival-price del {
    margin-right: 6px;
    opacity: .5;
}

.new-arrival-price ins {
    text-decoration: none;
}

.new-arrival-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    padding-bottom: 6px;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap .5s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-link:hover,
.new-arrival-link:focus-visible {
    gap: 18px;
    color: #111;
}

/* faint base line, with a bronze line drawing over it on hover */
.new-arrival-link::before,
.new-arrival-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

.new-arrival-link::before {
    background: rgb(17 17 17 / 25%);
}

.new-arrival-link::after {
    background: #B4835F;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-link:hover::after,
.new-arrival-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* text roll: the label slides up and a bronze copy rolls in from below */
.new-arrival-link-label {
    display: block;
    overflow: hidden;
    line-height: 1.4;
}

.new-arrival-link-label > span {
    position: relative;
    display: block;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-link-label > span::after {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    color: #B4835F;
}

.new-arrival-link:hover .new-arrival-link-label > span,
.new-arrival-link:focus-visible .new-arrival-link-label > span {
    transform: translateY(-100%);
}

.new-arrival-link svg {
    width: 18px;
    height: 18px;
    transition: color .5s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-link:hover svg,
.new-arrival-link:focus-visible svg {
    color: #B4835F;
}

/* new arrivals ends */

/* essential collection starts */

.essential-collection-wrap {
    padding: 100px 0;
    background: #ffffff;
    color: #111;
}

.essential-collection-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
}

.essential-collection-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.essential-collection-title {
    margin: 0;
    color: #111;
    font-size: 58px;
    font-weight: 600;
    line-height: 1;
}

.essential-collection-title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.essential-collection-title .word > span {
    display: inline-block;
}

.essential-collection-text {
    max-width: 380px;
    margin: 0 0 10px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    line-height: 1.6;
}

/* tighter gutters than Bootstrap's default 30px */
.essential-collection-grid {
    margin-right: -6px;
    margin-left: -6px;
}

.essential-collection-col {
    margin-bottom: 12px;
    padding-right: 6px;
    padding-left: 6px;
}

.essential-collection-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #1d1d1d;
    color: #fff !important;
    text-decoration: none;
}

.essential-collection-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}

.essential-collection-img {
    display: block;
    width: 100%;
    height: 100%;
}

/* dark fade at the bottom so the label stays readable on light photos */
.essential-collection-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 0%) 45%);
    transition: opacity .6s ease;
    pointer-events: none;
}

.essential-collection-label {
    position: absolute;
    right: 24px;
    bottom: 28px;
    left: 24px;
    z-index: 1;
}

.essential-collection-num {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
}

.essential-collection-name {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.5px;
    transition: gap .5s cubic-bezier(.65, 0, .35, 1);
}

.essential-collection-name svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    transition: color .5s cubic-bezier(.65, 0, .35, 1);
}

.essential-collection-card:hover .essential-collection-img img,
.essential-collection-card:focus-visible .essential-collection-img img {
    transform: scale(1.06);
}

.essential-collection-card:hover .essential-collection-name,
.essential-collection-card:focus-visible .essential-collection-name {
    gap: 20px;
}

.essential-collection-card:hover .essential-collection-name svg,
.essential-collection-card:focus-visible .essential-collection-name svg {
    color: #B4835F;
}

.essential-collection-card:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

/* essential collection ends */

/* top & bottom wears starts */

.wear-wrap {
    padding: 100px 0 80px;
    background: #ffffff;
    color: #111;
}

.wear-wrap-bottom {
    background: #f7f3ee;
}

.wear-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 32px;
}

.wear-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.wear-title {
    margin: 0;
    color: #111;
    font-size: 58px;
    font-weight: 600;
    line-height: 1;
}

.wear-text {
    max-width: 380px;
    margin: 0 0 10px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    line-height: 1.6;
    text-align: right;
}

/* filter bar: sticks right under the fixed header (80px once scrolled) */
.wear-bar {
    position: sticky;
    top: 80px;
    z-index: 50;
    margin-bottom: 28px;
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.wear-wrap-top .wear-bar {
    background: #ffffff;
}

.wear-wrap-bottom .wear-bar {
    background: #f7f3ee;
}

.wear-bar.is-stuck {
    border-bottom-color: rgb(17 17 17 / 8%);
    box-shadow: 0 10px 24px -18px rgb(0 0 0 / 35%);
}

.wear-bar-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* section name only shows while the bar is stuck */
.wear-bar-title {
    flex-shrink: 0;
    max-width: 0;
    margin-right: -24px; /* cancels the flex gap while hidden */
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .5s cubic-bezier(.65, 0, .35, 1), margin .5s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}

.wear-bar.is-stuck .wear-bar-title {
    max-width: 220px;
    margin-right: 0;
    opacity: 1;
}

.wear-filters {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.wear-filters::-webkit-scrollbar {
    display: none;
}

.wear-filter {
    flex-shrink: 0;
    padding: 9px 16px;
    border: 1px solid rgb(17 17 17 / 15%);
    background: transparent;
    color: #111;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.wear-filter:hover {
    border-color: #111;
}

.wear-filter.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.wear-filter:focus-visible,
.wear-bar-link:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

.wear-bar-link {
    flex-shrink: 0;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.wear-bar-link:hover {
    color: #B4835F;
    text-decoration: none;
}

.wear-grid {
    margin-right: -12px;
    margin-left: -12px;
    transition: opacity .3s ease;
}

.wear-grid.is-loading {
    opacity: .35;
    pointer-events: none;
}

.wear-col {
    margin-bottom: 40px;
    padding-right: 12px;
    padding-left: 12px;
}

.wear-empty {
    padding: 60px 0;
    color: rgb(17 17 17 / 50%);
    font-size: 15px;
    text-align: center;
}

.wear-card-media {
    position: relative;
    overflow: hidden;
    background: #ece7e1;
}

.wear-card-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
}

.wear-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .6s ease;
}

/* second gallery image fades in on hover */
.wear-card-img .wear-card-img-alt {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.wear-card:hover .wear-card-img img {
    transform: scale(1.05);
}

.wear-card:hover .wear-card-img-alt {
    opacity: 1;
}

.wear-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 9px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.wear-card .wishlist-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #1d1d1d;
    font-size: 14px;
    transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

.wear-card .wishlist-toggle:hover {
    transform: scale(1.1);
}

.wear-card .wishlist-toggle.active {
    background: #B4835F;
    color: #fff;
}

/* "Quick View · Add +" bar slides up on hover */
.wear-card-actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 10px;
    background: #fff;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}

.wear-card:hover .wear-card-actions,
.wear-card:focus-within .wear-card-actions {
    opacity: 1;
    transform: translateY(0);
}

.wear-card-action {
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.wear-card-action:hover {
    color: #B4835F;
    text-decoration: none;
}

.wear-card-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #111;
}

.wear-card-info {
    padding-top: 16px;
}

.wear-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.wear-card-cat {
    color: rgb(17 17 17 / 50%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.wear-card-stars {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}

.wear-card-stars svg {
    display: block;
    width: 11px;
    height: 11px;
}

.wear-card-star-empty {
    fill: rgb(17 17 17 / 12%);
}

.wear-card-star-fill {
    fill: #B4835F;
}

.wear-card-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.wear-card-plus {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #111;
    transition: color .3s ease, transform .4s cubic-bezier(.65, 0, .35, 1);
}

.wear-card-plus svg {
    width: 20px;
    height: 20px;
}

.wear-card-plus:hover {
    color: #B4835F;
    transform: rotate(90deg);
}

.wear-card-plus:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

.wear-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.wear-card-title a {
    color: #111;
    text-decoration: none;
}

.wear-card-title a:hover {
    color: #B4835F;
}

.wear-card-price {
    display: block;
    margin-top: 6px;
    color: #111;
    font-size: 14px;
    font-weight: 600;
}

.wear-card-price del {
    margin-right: 6px;
    font-weight: 400;
    opacity: .45;
}

.wear-card-price ins {
    text-decoration: none;
}

.wear-card-colors {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.wear-card-swatch {
    width: 12px;
    height: 12px;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
}

.wear-card-more {
    margin-left: 2px;
    color: rgb(17 17 17 / 60%);
    font-size: 11px;
}

/* top & bottom wears ends */

/* shop starts */

.shop-wrap {
    padding: 130px 0 40px;
    background: #ffffff;
    color: #111;
}

.shop-sticky {
    position: sticky;
    top: 80px;
    z-index: 40;
    padding-top: 20px;
    background: #fff;
    transition: box-shadow .3s ease, padding .4s ease;
}

.shop-sticky.is-stuck {
    padding-top: 14px;
    box-shadow: 0 10px 24px -18px rgb(0 0 0 / 35%);
}

.shop-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    transition: margin .4s ease;
}

.shop-sticky.is-stuck .shop-head {
    margin-bottom: 12px;
}

.shop-title {
    margin: 0;
    color: #111;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;
    text-transform: uppercase;
    transition: font-size .4s ease;
}

.shop-sticky.is-stuck .shop-title {
    font-size: 22px;
}

.shop-tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 28px;
}

.shop-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s ease;
}

.shop-tool svg {
    width: 20px;
    height: 20px;
    color: #555;
}

.shop-tool:hover {
    color: #B4835F;
}

/* filters icon: the slider knobs glide apart on hover */
.shop-knob {
    fill: #fff;
    transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.shop-filters-toggle:hover .shop-knob-a,
.shop-filters-toggle:focus-visible .shop-knob-a {
    transform: translateX(-6px);
}

.shop-filters-toggle:hover .shop-knob-b,
.shop-filters-toggle:focus-visible .shop-knob-b {
    transform: translateX(6px);
}

/* sort icon: the arrows nudge past each other while hovered */
.shop-sort-down,
.shop-sort-up {
    transition: transform .3s ease;
}

.shop-sort-toggle:hover .shop-sort-down,
.shop-sort-toggle:focus-visible .shop-sort-down {
    animation: shopSortDown .9s ease-in-out infinite alternate;
}

.shop-sort-toggle:hover .shop-sort-up,
.shop-sort-toggle:focus-visible .shop-sort-up {
    animation: shopSortUp .9s ease-in-out infinite alternate;
}

/* menu open: arrows rest apart */
.shop-sort-toggle[aria-expanded="true"] .shop-sort-down {
    animation: none;
    transform: translateY(2px);
}

.shop-sort-toggle[aria-expanded="true"] .shop-sort-up {
    animation: none;
    transform: translateY(-2px);
}

@keyframes shopSortDown {
    from {
        transform: translateY(-1px);
    }
    to {
        transform: translateY(2px);
    }
}

@keyframes shopSortUp {
    from {
        transform: translateY(1px);
    }
    to {
        transform: translateY(-2px);
    }
}

.shop-tool:focus-visible,
.shop-tab:focus-visible,
.shop-term:focus-visible,
.shop-sort-option:focus-visible,
.shop-chip:focus-visible,
.shop-chip-clear:focus-visible,
.shop-drawer button:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* sort menu */
.shop-sort {
    position: relative;
}

/* chosen sort next to the label: "Sort By · Newest" */
.shop-sort-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #B4835F;
    text-transform: none;
}

.shop-sort-current[hidden] {
    display: none;
}

.shop-sort-current::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgb(17 17 17 / 35%);
}

.shop-sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;
    margin: 16px 0 0;
    padding: 8px;
    background: #fff;
    box-shadow: 0 0 0 1px rgb(17 17 17 / 6%), 0 2px 6px rgb(0 0 0 / 4%), 0 24px 48px -16px rgb(0 0 0 / 22%);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .45s cubic-bezier(.65, 0, .35, 1), opacity .3s ease, visibility .45s;
}

.shop-sort-menu.is-open {
    opacity: 1;
    visibility: visible;
    clip-path: inset(-20px -20px -60px -20px); /* room for the shadow once open */
}

/* items rise in one after another */
.shop-sort-menu li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

.shop-sort-menu.is-open li {
    opacity: 1;
    transform: translateY(0);
}

.shop-sort-menu.is-open li:nth-child(2) { transition-delay: .04s; }
.shop-sort-menu.is-open li:nth-child(3) { transition-delay: .08s; }
.shop-sort-menu.is-open li:nth-child(4) { transition-delay: .12s; }
.shop-sort-menu.is-open li:nth-child(5) { transition-delay: .16s; }
.shop-sort-menu.is-open li:nth-child(6) { transition-delay: .2s; }
.shop-sort-menu.is-open li:nth-child(7) { transition-delay: .24s; }

.shop-sort-head {
    margin-bottom: 4px;
    padding: 10px 14px 12px;
    border-bottom: 1px solid #f0ece8;
    color: rgb(17 17 17 / 45%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.shop-sort-option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: none;
    color: rgb(17 17 17 / 75%);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-align: left;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

/* a short line draws in before the label on hover and stays for the chosen sort */
.shop-sort-option::before {
    content: '';
    flex-shrink: 0;
    width: 0;
    height: 1px;
    margin-right: 0;
    background: currentColor;
    transition: width .35s cubic-bezier(.65, 0, .35, 1), margin .35s cubic-bezier(.65, 0, .35, 1);
}

.shop-sort-option:hover,
.shop-sort-option:focus-visible {
    background: #f7f3ee;
    color: #111;
}

.shop-sort-option:hover::before,
.shop-sort-option[aria-checked="true"]::before {
    width: 14px;
    margin-right: 10px;
}

.shop-sort-option[aria-checked="true"] {
    color: #111;
    font-weight: 500;
}

.shop-sort-option[aria-checked="true"]::before {
    background: #B4835F;
}

/* check mark on the chosen sort */
.shop-sort-option[aria-checked="true"]::after {
    content: '';
    width: 9px;
    height: 5px;
    margin: -3px 2px 0 auto;
    border-bottom: 1.5px solid #B4835F;
    border-left: 1.5px solid #B4835F;
    transform: rotate(-45deg);
}

.shop-bar {
    border-top: 1px solid #ececec;
}

.shop-tabs,
.shop-terms-inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.shop-tabs::-webkit-scrollbar,
.shop-terms-inner::-webkit-scrollbar {
    display: none;
}

.shop-tabs {
    gap: 28px;
}

.shop-tab,
.shop-term {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    border: 0;
    background: none;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.shop-tab {
    padding: 15px 0 14px;
    text-transform: uppercase;
}

/* underline grows in for the open tab */
.shop-tab::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #111;
    transform: scaleX(0);
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.shop-tab.is-open::after {
    transform: scaleX(1);
}

.shop-tab.is-open,
.shop-tab.is-selected,
.shop-term.is-active {
    font-weight: 500;
}

/* reserves the bold width so the row doesn't shift when an item becomes active */
.shop-label {
    display: inline-flex;
    flex-direction: column;
}

.shop-label::after {
    content: attr(data-label);
    height: 0;
    overflow: hidden;
    font-weight: 500;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.shop-tab-count {
    margin: -6px 0 0 3px;
    font-size: 10px;
    font-weight: 500;
}

.shop-tab:hover,
.shop-terms .shop-term:hover {
    color: #B4835F;
}

.shop-terms {
    border-top: 1px solid #ececec;
    background: #f4eeeb;
    animation: shopFade .3s ease;
}

.shop-terms-inner {
    gap: 28px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* one group per filter (Type, Size, Color ...), divided by a hairline */
.shop-terms-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 28px;
}

.shop-terms-group + .shop-terms-group {
    padding-left: 28px;
    border-left: 1px solid rgb(17 17 17 / 15%);
}

.shop-terms-label {
    flex-shrink: 0;
    margin-right: -10px;
    color: rgb(17 17 17 / 50%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.shop-terms .shop-term {
    padding: 4px 0;
}

.shop-terms .shop-term::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #111;
    transform: scaleX(0);
    transition: transform .3s ease;
}

.shop-terms .shop-term.is-active::after {
    transform: scaleX(1);
}

.shop-term-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
}

@keyframes shopFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* count + active filter chips */
.shop-status {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    min-height: 40px;
    padding: 22px 0 26px;
}

.shop-count {
    flex-shrink: 0;
    margin: 0;
    color: rgb(17 17 17 / 55%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.shop-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 7px 12px;
    border: 1px solid rgb(17 17 17 / 15%);
    background: transparent;
    color: #111;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .3s ease;
}

.shop-chip svg {
    width: 12px;
    height: 12px;
}

.shop-chip:hover {
    border-color: #111;
}

.shop-chip-clear {
    margin-left: 4px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.shop-chip-clear:hover {
    color: #B4835F;
}

.shop-empty {
    padding: 80px 0 100px;
    text-align: center;
}

.shop-empty p {
    margin: 0 0 18px;
    color: rgb(17 17 17 / 55%);
    font-size: 15px;
}

.shop-empty .shop-clear {
    padding: 13px 28px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.shop-empty .shop-clear:hover {
    background: transparent;
    color: #111;
}

/* infinite scroll */
.shop-loader {
    display: flex;
    justify-content: center;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}

.shop-loader.is-active {
    height: auto;
    padding: 10px 0 50px;
    opacity: 1;
}

.shop-loader span {
    width: 28px;
    height: 28px;
    border: 1.5px solid rgb(17 17 17 / 15%);
    border-top-color: #111;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

@keyframes shopSpin {
    to {
        transform: rotate(360deg);
    }
}

/* end of the collection: hairlines either side of a small mark, a line of copy and back to top */
.shop-end {
    max-width: 520px;
    margin: 30px auto 80px;
    text-align: center;
}

.shop-end-mark {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    color: #B4835F;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-end-mark::before,
.shop-end-mark::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgb(17 17 17 / 0%), rgb(17 17 17 / 18%));
}

.shop-end-mark::after {
    background: linear-gradient(90deg, rgb(17 17 17 / 18%), rgb(17 17 17 / 0%));
}

.shop-end-title {
    margin: 0 0 10px;
    color: #111;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.shop-end-text {
    margin: 0 0 26px;
    color: rgb(17 17 17 / 55%);
    font-size: 14px;
    line-height: 1.6;
}

.shop-end-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s ease;
}

.shop-end-top svg {
    width: 14px;
    height: 14px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.shop-end-top:hover {
    color: #B4835F;
}

.shop-end-top:hover svg {
    transform: translateY(-3px);
}

.shop-end-top:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 4px;
}

.shop-sentinel {
    height: 1px;
}

/* filter drawer */
.shop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(0 0 0 / 40%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s;
}

.shop-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.shop-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: 100%;
    background: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1), visibility .5s;
}

.shop-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.shop-locked,
.shop-locked body {
    overflow: hidden;
}

.shop-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid #ececec;
}

.shop-drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shop-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.shop-drawer-close svg {
    width: 22px;
    height: 22px;
}

.shop-drawer-close:hover {
    transform: rotate(90deg);
}

/* scrolls without showing a scrollbar */
.shop-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 28px;
    scrollbar-width: none;
}

.shop-drawer-body::-webkit-scrollbar {
    display: none;
}

.shop-drawer-group {
    border-bottom: 1px solid #ececec;
}

.shop-drawer-group summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.shop-drawer-group summary::-webkit-details-marker {
    display: none;
}

/* plus that turns into a minus */
.shop-drawer-group summary::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: auto;
    background: linear-gradient(#111, #111) center / 12px 1px no-repeat, linear-gradient(#111, #111) center / 1px 12px no-repeat;
    transition: transform .3s ease;
}

.shop-drawer-group[open] summary::after {
    background: linear-gradient(#111, #111) center / 12px 1px no-repeat;
    transform: rotate(180deg);
}

.shop-drawer-count {
    color: rgb(17 17 17 / 50%);
    font-weight: 400;
}

.shop-drawer-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 22px;
}

.shop-drawer-terms .shop-term {
    padding: 9px 14px;
    border: 1px solid rgb(17 17 17 / 15%);
    font-size: 13px;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.shop-drawer-terms .shop-term:hover {
    border-color: #111;
}

.shop-drawer-terms .shop-term.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.shop-drawer-checks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 22px;
}

.shop-check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    cursor: pointer;
}

.shop-check input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #111;
    cursor: pointer;
}

.shop-price {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-bottom: 22px;
}

.shop-price-field {
    flex: 1 1 0;
    margin: 0;
}

.shop-price-field span {
    display: block;
    margin-bottom: 8px;
    color: rgb(17 17 17 / 55%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shop-price-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgb(17 17 17 / 15%);
    border-radius: 0;
    background: #fff;
    color: #111;
    font-size: 14px;
    transition: border-color .3s ease;
}

.shop-price-field input:focus {
    border-color: #111;
    outline: none;
}

.shop-price-sep {
    flex-shrink: 0;
    width: 10px;
    height: 1px;
    margin-bottom: 22px;
    background: #111;
}

.shop-drawer-foot {
    display: flex;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid #ececec;
}

.shop-drawer-foot button {
    padding: 16px 20px;
    border: 1px solid #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.shop-drawer-clear {
    background: transparent;
    color: #111;
}

.shop-drawer-clear:hover {
    background: #f7f3ee;
}

.shop-drawer-apply {
    flex: 1 1 auto;
    background: #111;
    color: #fff;
}

.shop-drawer-apply:hover {
    background: #B4835F;
    border-color: #B4835F;
}

/* shop ends */

/* campaign starts */

.campaign-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
    padding: 160px 0 120px;
    overflow: hidden;
    background: #f7f3ee;
    color: #fff;
}

.campaign-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #1a1817;
    clip-path: inset(1.5% 1.5% 1.5% 1.5% round 6px);
}

.campaign-img {
    display: block;
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center 30%;
}

.campaign-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(20deg, rgb(12 11 10 / 82%) 0%, rgb(12 11 10 / 45%) 40%, rgb(12 11 10 / 0%) 75%),
        radial-gradient(ellipse at center, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 35%) 100%);
}

.campaign-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.campaign-content {
    max-width: 760px;
}

.campaign-tag {
    margin-bottom: 28px;
    color: #fff;
    font-size: 11px;
}

.campaign-title {
    margin: 0 0 32px;
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 98px;
    font-weight: 500;
    line-height: .92;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.campaign-title .word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 4px;
    vertical-align: top;
}

.campaign-title .word > span {
    display: inline-block;
}

.campaign-text {
    max-width: 400px;
    margin: 0 0 44px;
    padding-left: 18px;
    border-left: 1px solid rgb(255 255 255 / 25%);
    color: rgb(255 255 255 / 80%);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
}

.campaign-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 35%);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-decoration: none;
    text-transform: uppercase;
    isolation: isolate;
    backdrop-filter: blur(6px);
    transition: color .6s cubic-bezier(.65, 0, .35, 1), border-color .6s ease;
}

.campaign-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}

.campaign-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}

.campaign-btn:hover,
.campaign-btn:focus-visible {
    border-color: #fff;
    color: #111;
    text-decoration: none;
}

.campaign-btn:hover::before,
.campaign-btn:focus-visible::before {
    transform: scaleY(1);
}

.campaign-btn:hover svg,
.campaign-btn:focus-visible svg {
    transform: translateX(5px);
}

.campaign-btn:focus-visible {
    outline: 1px solid #d3b195;
    outline-offset: 4px;
}

.campaign-ring {
    position: relative;
    flex-shrink: 0;
    width: 168px;
    height: 168px;
    margin-bottom: 8px;
}

.campaign-ring-text {
    display: block;
    width: 100%;
    height: 100%;
    animation: campaign-spin 30s linear infinite;
}

.campaign-ring-text text {
    fill: rgb(255 255 255 / 85%);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
}

.campaign-ring::before {
    content: "";
    position: absolute;
    inset: 24%;
    border: 1px solid rgb(255 255 255);
    border-radius: 50%;
}

.campaign-ring-star {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    fill: #d3b195;
    transform: translate(-50%, -50%);
    animation: campaign-spin-star 12s linear infinite;
}

@keyframes campaign-spin {
    to { transform: rotate(360deg); }
}

@keyframes campaign-spin-star {
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* campaign ends */

/* philosophy starts */

.philosophy-wrap {
    padding: 120px 0;
    background: #f7f3ee;
    color: #111;
}

.philosophy-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 56px;
    text-align: center;
}

.philosophy-eyebrow {
    margin-bottom: 26px;
    color: #111;
    font-size: 11px;
}

.philosophy-head h1,
.philosophy-head h2,
.philosophy-head h3 {
    max-width: 760px;
    margin: 0;
    color: #111;
    font-size: 58px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    text-wrap: balance;
}

.philosophy-head .word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 4px;
    vertical-align: top;
}

.philosophy-head .word > span {
    display: inline-block;
}

.philosophy-rule {
    height: 1px;
    margin-bottom: 32px;
    background: rgb(17 17 17 / 12%);
}

.philosophy-col {
    display: flex;
    flex-direction: column;
}

.philosophy-body {
    max-width: 380px;
}

.philosophy-body > *:last-child {
    margin-bottom: 0;
}

.philosophy-body p {
    margin: 0 0 16px;
    color: #111;
    font-size: 20px;
    line-height: 1.55;
}

.philosophy-body .read-word {
    display: inline;
}

.philosophy-col-media {
    align-items: center;
}

.philosophy-media {
    position: relative;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    background: #ece7e1;
    aspect-ratio: 4 / 5;
}

.philosophy-img {
    display: block;
    width: 100%;
    height: 116%;
    margin-top: -8%;
    object-fit: cover;
}

/* closing line and button sit at the bottom right, level with the foot of the image */
.philosophy-col-cta {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
}

.philosophy-note {
    margin: 0 0 32px;
    color: #111;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.5px;
}

.philosophy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 17px 30px;
    overflow: hidden;
    border: 1px solid #111;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    isolation: isolate;
    transition: color .5s cubic-bezier(.65, 0, .35, 1);
}

/* dark fill wipes up on hover */
.philosophy-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #111;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.philosophy-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.philosophy-btn:hover,
.philosophy-btn:focus-visible {
    color: #fff;
    text-decoration: none;
}

.philosophy-btn:hover::before,
.philosophy-btn:focus-visible::before {
    transform: scaleY(1);
}

.philosophy-btn:hover svg,
.philosophy-btn:focus-visible svg {
    transform: translateX(4px);
}

.philosophy-btn:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

/* philosophy ends */

/* counters starts */

/* dark band of four figures: light numerals, quiet labels, hairline dividers */
.counter-wrap {
    padding: 110px 0;
    background: #111;
    color: #fff;
    overflow: hidden;
}

.counter-col {
    position: relative;
}

/* full-height hairline between columns */
.counter-col + .counter-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgb(255 255 255 / 10%);
}

.counter-item {
    padding: 0 36px;
}

.counter-col:first-child .counter-item {
    padding-left: 0;
}

/* the figure rises inside this mask */
.counter-value {
    display: block;
    overflow: hidden;
    margin-bottom: 16px;
    padding-bottom: 6px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 88px;
    font-weight: 300;
    line-height: .9;
    letter-spacing: -3px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.counter-value-inner {
    display: inline-block;
    color: #fff;
}

.counter-suffix {
    color: #B4835F;
}

/* labels come in mixed case from the field: show them all as sentence case */
.counter-label {
    display: inline-block;
    color: rgb(255 255 255 / 55%);
    font-size: 14px;
    text-transform: lowercase;
}

.counter-label::first-letter {
    text-transform: uppercase;
}

/* counters ends */

/* social starts */

.social-wrap {
    padding: 100px 0;
    background: #ffffff;
    color: #111;
}

.social-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.social-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.social-title {
    margin: 0;
    color: #111;
    font-size: 58px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
}

.social-title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.social-title .word > span {
    display: inline-block;
}

.social-handle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.social-handle i {
    font-size: 16px;
}

.social-handle:hover {
    color: #B4835F;
    text-decoration: none;
}

/* 8px gutters */
.social-grid {
    margin-right: -4px;
    margin-left: -4px;
}

.social-col {
    padding-right: 4px;
    padding-left: 4px;
}

/* below 1200px the grid becomes a Slick slider (socialSlider() in page-home-animation.js): the row stops
   being a flex row and the columns take the widths Slick gives them */
.social-grid.slick-slider {
    display: block;
    margin-right: -4px;
    margin-bottom: 0;
    margin-left: -4px;
}

.social-grid.slick-slider .social-col {
    flex: none;
    max-width: none;
    padding-right: 4px;
    padding-left: 4px;
}

.social-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #ece7e1;
    aspect-ratio: 1 / 1;
}

.social-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

/* dark wash with the Instagram mark on hover */
.social-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(17 17 17 / 45%);
    color: #fff;
    font-size: 28px;
    opacity: 0;
    transition: opacity .4s ease;
}

.social-icon i {
    transform: scale(.6);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.social-card:hover .social-img,
.social-card:focus-visible .social-img {
    transform: scale(1.08);
}

.social-card:hover .social-icon,
.social-card:focus-visible .social-icon {
    opacity: 1;
}

.social-card:hover .social-icon i,
.social-card:focus-visible .social-icon i {
    transform: scale(1);
}

.social-card:focus-visible,
.social-handle:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

/* social ends */

/* footer section starts */

.footer-wrapper {
    padding: 20px 20px;
    background: #ffffff;
}

.footer-card {
    overflow: hidden;
    padding-top: 90px;
    border-radius: 16px;
    background: #0d0d0d;
    color: #fff;
}

.footer-top {
    padding-bottom: 72px;
}

.footer-logo-link {
    display: inline-block;
    margin-bottom: 24px;
    text-decoration: none;
}

.footer-logo {
    display: block;
    width: auto;
    height: 84px;
}

.footer-logo-text {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.footer-about {
    max-width: 340px;
    margin: 0;
    color: rgb(255 255 255 / 60%);
    font-size: 15px;
    line-height: 1.65;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr 1.35fr;
    column-gap: 40px;
}

.footer-heading {
    margin: 0 0 22px;
    color: rgb(255 255 255 / 90%);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-list li + li {
    margin-top: 10px;
}

.footer-list a {
    color: rgb(255 255 255 / 75%);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    background: linear-gradient(#fff, #fff) left bottom / 0 1px no-repeat;
    transition: color .3s ease, background-size .4s cubic-bezier(.22, 1, .36, 1);
}

.footer-list a:hover,
.footer-list a:focus-visible {
    color: #fff;
    text-decoration: none;
    background-size: 100% 1px;
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 26px 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.footer-bottom p {
    margin: 0;
    color: rgb(255 255 255 / 50%);
    font-size: 14px;
}

.footer-credit {
    justify-self: end;
}

.footer-bottom a {
    font-size: 14px;
    color: rgb(255 255 255 / 80%);
    text-decoration: none;
    transition: color .3s ease;
}

.footer-bottom a:hover {
    color: #B4835F;
}

.footer-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(255 255 255 / 80%);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s ease;
}

.footer-top-btn svg {
    width: 30px;
    height: 30px;
    padding: 7px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 50%;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
}

.footer-top-btn:hover {
    color: #fff;
}

.footer-top-btn:hover svg {
    border-color: #B4835F;
    transform: translateY(-3px);
}

.footer-wordmark {
    margin-bottom: -22px;
    background: linear-gradient(90deg, rgb(180 131 95 / 10%) 0%, #b4835f 30%, #d3b195 50%, #B4835F 70%, rgb(180 131 95 / 10%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(100px, 9.5vw, 148px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -5px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}

/* footer section ends */

/* quick view starts */

.qv {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    visibility: hidden;
    transition: visibility .5s;
}

.qv.is-open {
    visibility: visible;
}

.qv-locked,
.qv-locked body {
    overflow: hidden;
}

.qv-overlay {
    position: absolute;
    inset: 0;
    background: rgb(17 14 12 / 55%);
    opacity: 0;
    transition: opacity .5s ease;
}

.qv.is-open .qv-overlay {
    opacity: 1;
}

.qv-dialog {
    position: relative;
    width: 1040px;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 45%);
    opacity: 0;
    transform: translateY(40px) scale(.98);
    transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.qv.is-open .qv-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.qv-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), background-color .3s ease;
}

.qv-close svg {
    width: 22px;
    height: 22px;
}

.qv-close:hover {
    background: #f7f3ee;
    transform: rotate(90deg);
}

.qv-body {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.qv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
}

.qv-loading span {
    width: 30px;
    height: 30px;
    border: 1.5px solid rgb(17 17 17 / 15%);
    border-top-color: #111;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

.qv-error {
    margin: 0;
    padding: 120px 40px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    text-align: center;
}

.qv-content {
    display: flex;
    align-items: stretch;
}

.qv-gallery {
    position: relative;
    flex: 0 0 52%;
    max-width: 52%;
    background: #ece7e1;
}

.qv-main {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.qv-main-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

.qv-main-img.is-swapping {
    opacity: .2;
}

.qv-main:hover .qv-main-img {
    transform: scale(1.03);
}

.qv-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 5px 9px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* thumbnails float over the bottom of the main image */
.qv-thumbs {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    gap: 8px;
}

.qv-thumb {
    flex: 0 0 56px;
    height: 70px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    background: #fff;
    opacity: .7;
    cursor: pointer;
    transition: opacity .3s ease, border-color .3s ease, transform .3s ease;
}

.qv-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qv-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.qv-thumb.is-active {
    border-color: #111;
    opacity: 1;
}

/* details */
.qv-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 64px 52px 44px;
}

.qv-cat {
    margin-bottom: 14px;
    color: #B4835F;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.qv-title {
    margin: 0 0 14px;
    color: #111;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.5px;
    line-height: 1.15;
}

.qv-price {
    margin-bottom: 22px;
    color: #111;
    font-size: 18px;
    font-weight: 500;
}

.qv-price del {
    margin-right: 8px;
    font-weight: 400;
    opacity: .45;
}

.qv-price ins {
    text-decoration: none;
}

.qv-desc {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
    color: rgb(17 17 17 / 62%);
    font-size: 14px;
    line-height: 1.7;
}

.qv-desc p {
    margin: 0;
}

.qv-attr {
    margin-bottom: 24px;
}

.qv-attr-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.qv-attr-label {
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.qv-attr-value {
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
}

.qv-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qv-option {
    position: relative;
    min-width: 48px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgb(17 17 17 / 15%);
    background: #fff;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.qv-option:hover {
    border-color: #111;
}

.qv-option[aria-checked="true"] {
    border-color: #111;
    background: #111;
    color: #fff;
}

/* no stock with the other picks: struck through, still clickable */
.qv-option.is-unavailable {
    color: rgb(17 17 17 / 35%);
    background: linear-gradient(to top right, transparent calc(50% - 1px), rgb(17 17 17 / 18%) 50%, transparent calc(50% + 1px));
}

.qv-option.is-unavailable[aria-checked="true"] {
    border-color: #8a8a8a;
    background: #8a8a8a;
    color: #fff;
}

.qv-option-color {
    width: 36px;
    min-width: 0;
    height: 36px;
    padding: 4px;
    border-radius: 50%;
}

.qv-option-color[aria-checked="true"] {
    background: #fff;
}

.qv-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.qv-attr.is-missing .qv-options {
    animation: qvNudge .45s ease;
}

.qv-attr.is-missing .qv-attr-label {
    color: #b3262e;
}

@keyframes qvNudge {
    20%, 60% {
        transform: translateX(-5px);
    }
    40%, 80% {
        transform: translateX(5px);
    }
}

.qv-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.qv-qty {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border: 1px solid rgb(17 17 17 / 15%);
}

.qv-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 52px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    cursor: pointer;
    transition: color .3s ease;
}

.qv-qty-btn svg {
    width: 16px;
    height: 16px;
}

.qv-qty-btn:hover {
    color: #B4835F;
}

.qv-qty-input {
    width: 36px;
    height: 52px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
}

.qv-qty-input::-webkit-outer-spin-button,
.qv-qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.qv-qty-input:focus {
    outline: none;
}

.qv-add {
    position: relative;
    flex: 1 1 auto;
    height: 54px;
    overflow: hidden;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.qv-add:hover:not(:disabled) {
    border-color: #B4835F;
    background: #B4835F;
}

.qv-add:disabled {
    border-color: #d9d4ce;
    background: #d9d4ce;
    color: #fff;
    cursor: not-allowed;
}

.qv-add.is-added {
    border-color: #2f6b45;
    background: #2f6b45;
}

.qv-add.is-loading .qv-add-text {
    opacity: 0;
}

.qv-add.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 1.5px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

.qv-message {
    min-height: 20px;
    margin: 12px 0 0;
    color: rgb(17 17 17 / 70%);
    font-size: 13px;
}

.qv-message a {
    border-bottom: 1px solid currentColor;
    color: #111;
    text-decoration: none;
}

.qv-message a:hover {
    color: #B4835F;
}

.qv-details {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding: 18px 0 2px;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.qv-details svg {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.qv-details:hover {
    color: #B4835F;
    text-decoration: none;
}

.qv-details:hover svg {
    transform: translateX(4px);
}

.qv-close:focus-visible,
.qv-thumb:focus-visible,
.qv-option:focus-visible,
.qv-qty-btn:focus-visible,
.qv-add:focus-visible,
.qv-details:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* quick view ends */

/* quick add starts */

/* the card's "+": a compact panel in the middle of the page, a sheet from the bottom on phones */
.qa {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    visibility: hidden;
    transition: visibility .5s;
}

.qa.is-open {
    visibility: visible;
}

.qa-overlay {
    position: absolute;
    inset: 0;
    background: rgb(17 14 12 / 55%);
    opacity: 0;
    transition: opacity .5s ease;
}

.qa.is-open .qa-overlay {
    opacity: 1;
}

.qa-dialog {
    position: relative;
    width: 460px;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 45%);
    opacity: 0;
    transform: translateY(28px) scale(.98);
    transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qa.is-open .qa-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* focus lands on the panel itself when it opens */
.qa-dialog:focus {
    outline: none;
}

.qa-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), background-color .3s ease;
}

.qa-close svg {
    width: 20px;
    height: 20px;
}

.qa-close:hover {
    background: #f7f3ee;
    transform: rotate(90deg);
}

.qa-body {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.qa-spinner {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid rgb(17 17 17 / 15%);
    border-top-color: #111;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

.qa-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.qa-error {
    margin: 0;
    padding: 80px 30px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    text-align: center;
}

/* the piece being added */
.qa-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 64px 22px 24px;
    border-bottom: 1px solid #ececec;
}

.qa-thumb {
    flex: 0 0 56px;
    height: 70px;
    overflow: hidden;
    background: #ece7e1;
}

.qa-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qa-head-text {
    min-width: 0;
}

.qa-title {
    margin: 0 0 6px;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.2px;
    line-height: 1.3;
}

.qa-price {
    color: #111;
    font-size: 14px;
    font-weight: 500;
}

.qa-price del {
    margin-right: 8px;
    font-weight: 400;
    opacity: .45;
}

.qa-price ins {
    text-decoration: none;
}

/* picker: colour as swatches, size as a list of rows */
.qa-attr-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 20px 24px 12px;
}

.qa-attr-label {
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.qa-attr-value {
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
}

.qa-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 24px 4px;
}

.qa-swatch-btn {
    width: 36px;
    height: 36px;
    padding: 4px;
    border: 1px solid rgb(17 17 17 / 15%);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .3s ease, opacity .3s ease;
}

.qa-swatch-btn:hover,
.qa-swatch-btn[aria-checked="true"] {
    border-color: #111;
}

.qa-swatch-btn.is-unavailable {
    opacity: .4;
}

.qa-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.qa-rows {
    border-top: 1px solid #ececec;
}

.qa-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-bottom: 1px solid #ececec;
    background: #fff;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color .3s ease, padding .4s cubic-bezier(.2, .7, .2, 1);
}

.qa-row-name {
    flex: 1 1 auto;
}

.qa-row-note {
    color: #B4835F;
    font-size: 11px;
    letter-spacing: .5px;
}

/* "Add" slides in at the end of the row under the mouse */
.qa-row-add {
    display: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

.qa-row.is-picked {
    background: #f7f3ee;
}

.qa-row:disabled {
    color: rgb(17 17 17 / 35%);
    cursor: not-allowed;
}

.qa-row:disabled .qa-row-name {
    text-decoration: line-through;
}

.qa-row:disabled .qa-row-note {
    color: rgb(17 17 17 / 45%);
}

.qa-row.is-loading .qa-row-note,
.qa-row.is-loading .qa-row-add {
    visibility: hidden;
}

.qa-row.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 1.5px solid rgb(17 17 17 / 15%);
    border-top-color: #111;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

.qa-content.is-adding .qa-pick {
    pointer-events: none;
}

.qa-content.is-adding .qa-row:not(.is-loading) {
    opacity: .45;
}

/* a simple product: added while the panel opens */
.qa-adding {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 150px;
    color: rgb(17 17 17 / 62%);
    font-size: 13px;
}

.qa-content.is-adding .qa-adding {
    display: flex;
}

.qa-soldout {
    margin: 0;
    padding: 26px 24px 4px;
    color: rgb(17 17 17 / 62%);
    font-size: 14px;
}

/* added: a tick, what went in and the way to the cart */
.qa-done {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 34px 24px 30px;
    text-align: center;
}

.qa-content.is-added .qa-done {
    display: flex;
}

.qa-content.is-added .qa-pick,
.qa-content.is-added .qa-details {
    display: none;
}

.qa-done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #111;
    border-radius: 50%;
    color: #111;
    animation: qaPop .5s cubic-bezier(.2, .7, .2, 1) both;
}

.qa-done-mark svg {
    width: 20px;
    height: 20px;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: qaTick .45s ease .2s forwards;
}

@keyframes qaPop {
    from {
        opacity: 0;
        transform: scale(.7);
    }
}

@keyframes qaTick {
    to {
        stroke-dashoffset: 0;
    }
}

.qa-done-title {
    margin: 18px 0 0;
    color: #111;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.3px;
}

.qa-done-text {
    margin: 6px 0 0;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
}

.qa-done-text:empty,
.qa-message:empty {
    display: none;
}

.qa-done-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 24px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .3s ease, border-color .3s ease;
}

.qa-done-cart:hover {
    border-color: #B4835F;
    background: #B4835F;
    color: #fff;
    text-decoration: none;
}

.qa-done-continue {
    margin-top: 16px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s ease;
}

.qa-done-continue:hover {
    color: #B4835F;
}

.qa-message {
    margin: 0;
    padding: 16px 24px 0;
    color: #b3262e;
    font-size: 13px;
}

.qa-details {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 20px 24px 24px;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.qa-details svg {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.qa-details:hover {
    color: #B4835F;
    text-decoration: none;
}

.qa-details:hover svg {
    transform: translateX(4px);
}

.qa-close:focus-visible,
.qa-swatch-btn:focus-visible,
.qa-done-cart:focus-visible,
.qa-done-continue:focus-visible,
.qa-details:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

.qa-row:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: -2px;
}

/* quick add ends */

/* new arrivals starts */

.shop-wrap-new {
    padding-top: 150px;
}

.new-arrival-hero {
    display: flex;
    align-items: center;
    gap: 64px;
    margin-bottom: 110px;
}

.new-arrival-hero-text {
    flex: 0 0 38%;
    max-width: 38%;
}

.new-arrival-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    color: #B4835F;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.new-arrival-pulse {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B4835F;
}

.new-arrival-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #B4835F;
    animation: naPulse 2s ease-out infinite;
}

@keyframes naPulse {
    from {
        opacity: .6;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(3.2);
    }
}

.new-arrival-headline {
    margin: 0 0 28px;
    color: #111;
    font-size: 92px;
    font-weight: 500;
    letter-spacing: -4px;
    line-height: .95;
}

.new-arrival-headline span {
    display: block;
    color: rgb(17 17 17 / 35%);
    font-weight: 300;
}

.new-arrival-intro {
    max-width: 400px;
    margin: 0 0 44px;
    color: rgb(17 17 17 / 62%);
    font-size: 16px;
    line-height: 1.7;
}

.new-arrival-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 40px;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.new-arrival-drop-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #B4835F;
}

.new-arrival-scroll {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
}

.new-arrival-scroll svg {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-scroll:hover {
    border-color: #B4835F;
    background: #B4835F;
}

.new-arrival-scroll:hover svg {
    transform: translateY(3px);
}

.new-arrival-scroll:focus-visible,
.new-arrival-feature-name:focus-visible,
.new-arrival-feature-quick:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

/* latest drop slider: the active piece up front, the next one peeking in, scaled back */
.new-arrival-hero-media {
    flex: 1 1 auto;
    min-width: 0;
}

.new-arrival-slider-viewport {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.new-arrival-slider-viewport.is-dragging {
    cursor: grabbing;
}

.new-arrival-slider-track {
    display: flex;
    gap: 28px;
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}

.new-arrival-slider-viewport.is-dragging .new-arrival-slider-track {
    transition: none;
}

.new-arrival-feature {
    margin: 0;
}

.new-arrival-slide {
    flex: 0 0 56%;
    min-width: 0;
}

.new-arrival-slide .new-arrival-feature-img {
    transform: scale(.80);
    transform-origin: left bottom;
    cursor: pointer;
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-slide .new-arrival-feature-img img {
    filter: saturate(.7) brightness(.96);
    transition: filter .9s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.new-arrival-slide.is-active .new-arrival-feature-img {
    transform: scale(1);
    cursor: inherit;
}

.new-arrival-slide.is-active .new-arrival-feature-img img {
    filter: none;
}

.new-arrival-feature-tag {
    transition: opacity .4s ease;
}

.new-arrival-slide:not(.is-active) .new-arrival-feature-tag {
    opacity: 0;
}

/* swapping a copy for its original: no animation */
.new-arrival-slider-track.is-jumping,
.new-arrival-slider-track.is-jumping * {
    transition: none !important;
}

.new-arrival-slide .new-arrival-feature-caption {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.new-arrival-slide.is-active .new-arrival-feature-caption {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .35s;
}

.new-arrival-slider-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 30px;
}

.new-arrival-slider-count {
    flex-shrink: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}

.new-arrival-slider-current {
    color: #111;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.new-arrival-slider-total {
    margin-left: 4px;
    color: rgb(17 17 17 / 40%);
    font-size: 13px;
}

.new-arrival-slider-progress {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    overflow: hidden;
    background: rgb(17 17 17 / 12%);
}

.new-arrival-slider-progress span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #111;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-slider-arrows {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.new-arrival-slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgb(17 17 17 / 15%);
    border-radius: 50%;
    background: transparent;
    color: #111;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.new-arrival-slider-arrow svg {
    width: 18px;
    height: 18px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.new-arrival-slider-arrow:hover {
    border-color: #111;
    background: #111;
    color: #fff;
}

.new-arrival-slider-prev:hover svg {
    transform: translateX(-3px);
}

.new-arrival-slider-next:hover svg {
    transform: translateX(3px);
}

.new-arrival-slider-arrow:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

.new-arrival-feature-img {
    position: relative;
    display: block;
    overflow: hidden;
    background: #ece7e1;
    aspect-ratio: 3 / 4;
}

.new-arrival-feature-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.new-arrival-feature:hover .new-arrival-feature-img img {
    transform: scale(1.05);
}

.new-arrival-feature-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 10px;
    background: #fff;
    color: #111;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.new-arrival-feature-caption {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-top: 16px;
}

.new-arrival-feature-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.new-arrival-feature-name {
    display: block;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: color .3s ease;
}

.new-arrival-feature-name:hover {
    color: #B4835F;
    text-decoration: none;
}

.new-arrival-feature-price {
    display: block;
    margin-top: 4px;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
}

.new-arrival-feature-price del {
    margin-right: 6px;
    opacity: .6;
}

.new-arrival-feature-price ins {
    text-decoration: none;
}

.new-arrival-feature-quick {
    flex-shrink: 0;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    color: #111;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .3s ease;
}

.new-arrival-feature-quick:hover {
    color: #B4835F;
    text-decoration: none;
}

/* new arrivals ends */

/* sale starts */

.shop-wrap-sale {
    padding-top: 50px;
}

.sale-hero {
    margin-bottom: 80px;
}

.sale-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 500px;
    padding: 80px 0; 
    overflow: hidden;
    background: #efe8e1;
}

.sale-banner-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 66%;
    height: calc(100% - 90px);
    object-fit: contain;
    object-position: right;
    mix-blend-mode: multiply;
}

.sale-banner-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #efe8e1 0%, #efe8e1 34%, rgb(239 232 225 / 85%) 44%, rgb(239 232 225 / 30%) 58%, rgb(239 232 225 / 0%) 70%);
    pointer-events: none;
}

.sale-banner-text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
}

.sale-promo {
    position: absolute;
    left: 43%;
    bottom: 80px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
    padding: 64px 24px 24px;
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 25%);
    border: 0;
    background: #fff;
    clip-path: polygon(20% 0, 100% 0, 100% 70%, 72% 100%, 0 100%, 0 20%);
    color: #1d1d1d;
    text-align: left;
    cursor: pointer;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.sale-promo:hover {
    transform: translateY(-6px);
}

.sale-promo:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 4px;
}

.sale-promo-arrow {
    position: absolute;
    top: 20px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ff7a1a;
    color: #fff;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.sale-promo-arrow svg {
    width: 20px;
    height: 20px;
}

.sale-promo:hover .sale-promo-arrow {
    transform: rotate(45deg);
}

.sale-promo-label {
    margin-bottom: 18px;
    color: #B4835F;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.sale-promo-upto {
    margin-bottom: 4px;
    color: rgb(17 17 17 / 55%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sale-promo-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 46px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 1;
    text-transform: uppercase;
}

.sale-promo-text span {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
}

.sale-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #B4835F;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sale-eyebrow-line {
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.sale-season {
    color: #111;
}

.sale-headline {
    display: flex;
    align-items: stretch;
    gap: 26px;
    margin: 0;
    color: #111;
    line-height: 1;
}

.sale-words {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 0 8px;
}

.sale-upto,
.sale-off {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.sale-words-line {
    flex: 1 1 auto;
    width: 1px;
    margin: 14px 0;
    background: rgb(17 17 17 / 25%);
}

.sale-pct {
    display: block;
    overflow: hidden;
}

.sale-pct-num {
    display: block;
    font-size: 200px;
    font-weight: 300;
    letter-spacing: -10px;
    line-height: .82;
}

.sale-pct-num sup {
    top: 0;
    margin-left: 8px;
    font-size: 38%;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1;
    vertical-align: top;
}

.sale-headline-custom {
    font-size: 74px;
    text-wrap: balance;
    max-width: 450px;
    font-weight: 500;
    line-height: .92;
    text-transform: uppercase;
}

.sale-hero-aside {
    max-width: 400px;
}

.sale-intro {
    margin: 0 0 28px;
    color: rgb(17 17 17 / 68%);
    font-size: 15px;
    line-height: 1.7;
}

.sale-ends {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
    padding: 16px 0;
    border-top: 1px solid rgb(17 17 17 / 12%);
    border-bottom: 1px solid rgb(17 17 17 / 12%);
}

.sale-ends[hidden] {
    display: none;
}

.sale-ends-label {
    color: rgb(17 17 17 / 50%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sale-countdown {
    display: flex;
    gap: 16px;
}

.sale-countdown-part {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
}

.sale-countdown-part small {
    color: rgb(17 17 17 / 50%);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
}

.sale-scroll {
    text-decoration: none;
}

.sale-scroll:hover {
    color: #fff;
    text-decoration: none;
}

/* sale ends */

/* search starts */

.shop-wrap-search {
    min-height: 70vh;
}

.search-hero {
    margin-bottom: 60px;
}

.search-hero-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #111;
}

.search-hero-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: rgb(17 17 17 / 40%);
}

.search-hero-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 56px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 1.1;
    outline: none;
}

.search-hero-input::placeholder {
    color: rgb(17 17 17 / 22%);
}

.search-hero-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-hero-clear,
.search-hero-submit {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    cursor: pointer;
}

.search-hero-clear {
    width: 36px;
    height: 36px;
    color: rgb(17 17 17 / 45%);
    transition: color .3s ease, transform .4s cubic-bezier(.65, 0, .35, 1);
}

.search-hero-clear svg {
    width: 22px;
    height: 22px;
}

.search-hero-clear:hover {
    color: #111;
    transform: rotate(90deg);
}

.search-hero-submit {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    transition: background-color .3s ease;
}

.search-hero-submit svg {
    width: 22px;
    height: 22px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.search-hero-submit:hover {
    background: #B4835F;
}

.search-hero-submit:hover svg {
    transform: translateX(3px);
}

.search-hero-clear:focus-visible,
.search-hero-submit:focus-visible,
.search-hero-chip:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

/* when the words were corrected: what was actually searched */
.search-hero-note {
    margin: 20px 0 0;
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.search-hero-note span {
    color: #111;
}

.search-hero-none {
    margin-top: 44px;
}

.search-hero-none-title {
    margin: 0 0 10px;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -.5px;
}

.search-hero-none-text {
    max-width: 480px;
    margin: 0;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    line-height: 1.7;
}

/* a label followed by chips: recent searches, popular collections */
.search-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.search-hero-row + .search-hero-row {
    margin-top: 14px;
}

.search-hero-suggest-label {
    min-width: 64px;
    margin-right: 8px;
    color: rgb(17 17 17 / 45%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.search-hero-recent-list {
    display: contents;
}

.search-hero-chip {
    padding: 9px 16px;
    border: 1px solid rgb(17 17 17 / 15%);
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.search-hero-chip:hover {
    border-color: #111;
    background: #111;
    color: #fff;
    text-decoration: none;
}

/* recent searches read as softer pills */
.search-hero-chip-recent {
    border-color: transparent;
    border-radius: 100px;
    background: #f4f1ed;
}

.search-hero-recent-clear {
    padding: 0;
    border: 0;
    background: none;
    color: rgb(17 17 17 / 45%);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.search-hero-recent-clear:hover {
    color: #111;
}

/* ---- live suggestions panel ---- */

.search-hero-field {
    position: relative;
}

.search-hero-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 70vh;
    margin-top: 10px;
    padding: 24px 26px;
    overflow-y: auto;
    border: 1px solid rgb(17 17 17 / 8%);
    background: #fff;
    box-shadow: 0 30px 60px rgb(17 17 17 / 10%);
    transition: opacity .25s ease;
}

.search-hero-panel.is-loading {
    opacity: .6;
}

.search-panel-group + .search-panel-group {
    margin-top: 22px;
}

.search-panel-label {
    display: block;
    margin-bottom: 12px;
    color: rgb(17 17 17 / 45%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.search-panel-collections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-panel-collection {
    padding: 8px 14px;
    border: 1px solid rgb(17 17 17 / 15%);
    color: #111;
    font-size: 13px;
    text-decoration: none;
    transition: border-color .3s ease, background-color .3s ease;
}

.search-panel-collection:hover,
.search-panel-collection.is-active {
    border-color: #111;
    color: #111;
    text-decoration: none;
}

.search-panel-products {
    margin: 0 -10px;
    padding: 0;
    list-style: none;
}

.search-panel-product {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 8px 10px;
    color: #111;
    text-decoration: none;
    transition: background-color .25s ease;
}

.search-panel-product:hover,
.search-panel-product.is-active {
    background: #f6f3ef;
    color: #111;
    text-decoration: none;
}

.search-panel-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #ede8e1;
}

.search-panel-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-panel-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.search-panel-cat {
    color: rgb(17 17 17 / 45%);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.search-panel-name {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the typed words, picked out in the names */
.search-panel-name mark,
.search-panel-collection mark {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: 600;
}

.search-panel-price {
    font-size: 14px;
    white-space: nowrap;
}

.search-panel-price del {
    margin-right: 8px;
    color: rgb(17 17 17 / 40%);
}

.search-panel-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgb(17 17 17 / 10%);
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
}

.search-panel-all svg {
    width: 18px;
    height: 18px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.search-panel-all:hover,
.search-panel-all.is-active {
    color: #B4835F;
    text-decoration: none;
}

.search-panel-all:hover svg,
.search-panel-all.is-active svg {
    transform: translateX(4px);
}

.search-panel-empty {
    margin: 0;
    color: rgb(17 17 17 / 55%);
    font-size: 14px;
}

/* ---- best sellers when there is nothing to list ---- */

.search-hero-trending {
    margin-top: 80px;
}

.search-hero-trending-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.search-hero-trending-title {
    margin: 0;
    color: #111;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -1px;
}

.search-hero-trending-link {
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-offset: 4px;
}

.search-hero-trending-link:hover {
    color: #B4835F;
}

/* search ends */

/* 404 starts */

.error-404-wrap {
    padding: 140px 0 110px;
    background: #fff;
    color: #111;
    overflow: hidden;
}

.error-404-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.error-404-eyebrow {
    margin-bottom: 10px;
    color: #111;
}

/* oversized digits; JS leans each one toward the cursor */
.error-404-digits {
    display: flex;
    justify-content: center;
    margin: 0 0 6px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 300px;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -14px;
    user-select: none;
}

.error-404-digit {
    display: inline-block;
    color: #111;
}

/* the zero is hollow and tan, like a gap in the rail */
.error-404-digit-zero {
    color: transparent;
    -webkit-text-stroke: 2px #B4835F;
}

.error-404-title {
    max-width: 720px;
    margin: 0 0 16px;
    color: #111;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1.5px;
    text-wrap: balance;
}

.error-404-text {
    max-width: 520px;
    margin: 0 0 40px;
    color: rgb(17 17 17 / 60%);
    font-size: 16px;
    line-height: 1.65;
}

.error-404-search {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    margin-bottom: 30px;
    padding-bottom: 12px;
    border-bottom: 1px solid #111;
}

.error-404-search-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: rgb(17 17 17 / 40%);
}

.error-404-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 300;
    outline: none;
}

.error-404-search-input::placeholder {
    color: rgb(17 17 17 / 30%);
}

.error-404-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.error-404-search-submit {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    cursor: pointer;
    transition: background-color .3s ease;
}

.error-404-search-submit svg {
    width: 18px;
    height: 18px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.error-404-search-submit:hover {
    background: #B4835F;
}

.error-404-search-submit:hover svg {
    transform: translateX(3px);
}

.error-404-search-submit:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 34px;
}

.error-404-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
}

.error-404-link {
    color: rgb(17 17 17 / 60%);
    font-size: 14px;
    text-decoration: none;
    background: linear-gradient(#111, #111) left bottom / 0 1px no-repeat;
    transition: color .3s ease, background-size .4s cubic-bezier(.22, 1, .36, 1);
}

.error-404-link:hover,
.error-404-link:focus-visible {
    color: #111;
    text-decoration: none;
    background-size: 100% 1px;
}

.error-404-trending {
    margin-top: 120px;
    padding-top: 40px;
    border-top: 1px solid rgb(17 17 17 / 10%);
}

.error-404-trending-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.error-404-trending-title {
    margin: 0;
    color: #111;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -1px;
}

.error-404-trending-link {
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-offset: 4px;
}

.error-404-trending-link:hover {
    color: #B4835F;
}

/* 404 ends */

/* account starts */

.acc {
    padding: 140px 0 100px;
    background: #fff;
    color: #111;
}

/* greeting */
.acc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #ececec;
}

.acc-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.acc-title {
    margin: 0 0 8px;
    color: #111;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1;
}

.acc-sub {
    margin: 0;
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.acc-logout {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
    text-decoration: none;
    transition: color .3s ease;
}

.acc-logout:hover {
    color: #111;
    text-decoration: none;
}

.acc-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* icons come alive on hover, each in its own way */
.acc-nav-link:hover .acc-icon-dashboard,
.acc-link-card:hover .acc-icon-dashboard {
    animation: accPop .5s cubic-bezier(.34, 1.56, .64, 1);
}

.acc-nav-link:hover .acc-icon-orders,
.acc-link-card:hover .acc-icon-orders {
    transform-origin: 50% 20%;
    animation: accSwing .7s ease-in-out;
}

.acc-nav-link:hover .acc-icon-edit-address,
.acc-link-card:hover .acc-icon-edit-address {
    animation: accBounce .6s cubic-bezier(.34, 1.56, .64, 1);
}

.acc-nav-link:hover .acc-icon-edit-account,
.acc-link-card:hover .acc-icon-edit-account {
    transform-origin: 50% 100%;
    animation: accNod .6s ease-in-out;
}

.acc-nav-link:hover .acc-icon-payment-methods,
.acc-link-card:hover .acc-icon-payment-methods {
    animation: accShift .5s ease-in-out;
}

.acc-nav-link:hover .acc-icon-wishlist,
.acc-link-card:hover .acc-icon-wishlist {
    animation: accBeat .8s ease-in-out;
}

.acc-nav-link:hover .acc-icon-customer-logout,
.acc-logout:hover .acc-icon-customer-logout {
    animation: accExit .6s cubic-bezier(.65, 0, .35, 1);
}

@keyframes accPop {
    0% { transform: scale(1); }
    40% { transform: scale(.8) rotate(-8deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes accSwing {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(12deg); }
    50% { transform: rotate(-9deg); }
    75% { transform: rotate(5deg); }
}

@keyframes accBounce {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    70% { transform: translateY(1px); }
}

@keyframes accNod {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-8deg); }
    65% { transform: rotate(6deg); }
}

@keyframes accShift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

@keyframes accBeat {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.2); }
    40% { transform: scale(.95); }
    60% { transform: scale(1.12); }
}

@keyframes accExit {
    0%, 100% { transform: translateX(0); opacity: 1; }
    45% { transform: translateX(-6px); opacity: 0; }
    46% { transform: translateX(6px); opacity: 0; }
}

.acc-layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.acc-nav {
    position: sticky;
    top: 110px;
    flex: 0 0 240px;
}

.acc-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-nav ul li {
    margin-bottom: 10px;
}

.acc-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: rgb(17 17 17 / 62%);
    font-size: 14px;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.acc-nav-link:hover {
    background: #f6f3ef;
    color: #111;
    text-decoration: none;
}

.acc-nav-link.is-active {
    background: #111;
    color: #fff;
}

.acc-nav-count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1ebe4;
    color: #111;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.acc-nav-sep {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ececec;
}

.acc-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* sections */
.acc-section + .acc-section {
    margin-top: 48px;
}

.acc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.acc-h2 {
    margin: 0 0 20px;
    color: #111;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.acc-section-head .acc-h2 {
    margin: 0;
}

.acc-h3 {
    margin: 0 0 16px;
    color: #111;
    font-size: 16px;
    font-weight: 500;
}

.acc-lead {
    margin: -10px 0 26px;
    color: rgb(17 17 17 / 55%);
    font-size: 14px;
}

.acc-meta {
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.acc-more {
    color: #111;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.acc-more:hover {
    color: #B4835F;
}

/* buttons: same wipe-up fill as the homepage buttons (.philosophy-btn) */
.acc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 0 26px;
    overflow: hidden;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    isolation: isolate;
    transition: color .5s cubic-bezier(.65, 0, .35, 1), border-color .5s ease;
}

/* fill wipes up from the bottom on hover: bronze on the solid button */
.acc-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #B4835F;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.acc-btn:hover,
.acc-btn:focus-visible {
    border-color: #B4835F;
    color: #fff;
    text-decoration: none;
}

.acc-btn:hover::before,
.acc-btn:focus-visible::before {
    transform: scaleY(1);
}

/* outline button: dark fill wipes up, like .philosophy-btn */
.acc-btn-ghost {
    background: transparent;
    color: #111;
}

.acc-btn-ghost::before {
    background: #111;
}

.acc-btn-ghost:hover,
.acc-btn-ghost:focus-visible {
    border-color: #111;
    color: #fff;
}

.acc-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    text-decoration: none;
    transition: color .3s ease;
}

.acc-back svg {
    width: 16px;
    height: 16px;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.acc-back:hover {
    color: #111;
    text-decoration: none;
}

.acc-back:hover svg {
    transform: translateX(-3px);
}

/* status pills */
.acc-status {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.acc-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.acc-status-done {
    background: #edf6ef;
    color: #2d6a32;
}

.acc-status-active {
    background: #fbf3e6;
    color: #a2621a;
}

.acc-status-wait {
    background: #f1f1f1;
    color: #555;
}

.acc-status-stop {
    background: #fdf1f0;
    color: #a3352a;
}

.acc-status-muted {
    background: #f3f0ec;
    color: #6d6258;
}

/* dashboard */
.acc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.acc-stat {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 16px;
    background: #f6f3ef;
    color: #111;
    text-decoration: none;
    transition: background-color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

.acc-stat:hover {
    background: #f0ebe5;
    color: #111;
    text-decoration: none;
    transform: translateY(-3px);
}

.acc-stat-label {
    color: rgb(17 17 17 / 55%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.acc-stat-value {
    margin: 18px 0 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 44px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 1;
}

.acc-stat-text {
    font-size: 30px;
    letter-spacing: -1px;
}

.acc-stat-link {
    margin-top: auto;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

.acc-list {
    border-top: 1px solid #ececec;
}

.acc-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 6px;
    border-bottom: 1px solid #ececec;
    color: #111;
    text-decoration: none;
    transition: background-color .3s ease;
}

.acc-row:hover {
    background: #faf8f6;
    color: #111;
    text-decoration: none;
}

.acc-row-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.acc-row-main strong {
    font-size: 15px;
    font-weight: 500;
}

.acc-row-main span {
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.acc-row-total {
    min-width: 110px;
    font-size: 15px;
    font-weight: 500;
    text-align: right;
}

.acc-row-arrow {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: rgb(17 17 17 / 35%);
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), color .3s ease;
}

.acc-row:hover .acc-row-arrow {
    color: #111;
    transform: translateX(3px);
}

.acc-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.acc-link-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid #ececec;
    border-radius: 14px;
    color: #111;
    text-decoration: none;
    transition: border-color .3s ease;
}

.acc-link-card:hover {
    border-color: #111;
    color: #111;
    text-decoration: none;
}

.acc-link-card span {
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    line-height: 1.5;
}

.acc-link-card strong {
    display: block;
    margin-bottom: 2px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
}

/* empty states */
.acc-empty {
    padding: 56px 24px;
    border: 1px dashed #e3ded8;
    border-radius: 16px;
    text-align: center;
}

.acc-empty .acc-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
    color: #B4835F;
}

.acc-empty-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500;
}

.acc-empty-text {
    max-width: 360px;
    margin: 0 auto 22px;
    color: rgb(17 17 17 / 55%);
    font-size: 14px;
    line-height: 1.6;
}

/* orders */
.acc-orders {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.acc-order {
    border: 1px solid #ececec;
    border-radius: 16px;
    overflow: hidden;
}

.acc-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: #faf8f6;
    border-bottom: 1px solid #ececec;
}

.acc-order-number {
    margin-right: 12px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.acc-order-number:hover {
    color: #B4835F;
    text-decoration: none;
}

.acc-order-date {
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.acc-order-body {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
}

.acc-thumbs {
    display: flex;
    flex-shrink: 0;
}

.acc-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 70px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #ece7e1;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.acc-thumb + .acc-thumb {
    margin-left: -14px;
}

.acc-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-order-info {
    flex: 1 1 auto;
    min-width: 0;
}

.acc-order-items {
    margin: 0 0 4px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-order-items span,
.acc-order-total span {
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
    font-weight: 400;
}

.acc-order-total {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.acc-order-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.acc-order-actions-top {
    margin-top: 24px;
}

/* smaller button for the order actions (View, Pay, Cancel) */
.acc-btn-sm {
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.acc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

/* single order */
.acc-order-title {
    align-items: flex-start;
}

.acc-order-title .acc-meta {
    display: block;
    margin-top: 6px;
}

.acc-notice {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fdf1f0;
    color: #a3352a;
    font-size: 14px;
}

.acc-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-track-step {
    position: relative;
    padding-top: 30px;
    padding-right: 16px;
    color: rgb(17 17 17 / 40%);
}

/* line between the dots */
.acc-track-step::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 0;
    left: 0;
    height: 2px;
    background: #ece7e1;
}

.acc-track-step.is-done::before {
    background: #111;
}

.acc-track-step:last-child::before {
    right: auto;
    width: 18px;
}

.acc-track-dot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 18px;
    height: 18px;
    border: 2px solid #ece7e1;
    border-radius: 50%;
    background: #fff;
}

.acc-track-step.is-done .acc-track-dot {
    border-color: #111;
    background: #111;
    box-shadow: inset 0 0 0 3px #fff;
}

.acc-track-step.is-current .acc-track-dot {
    border-color: #B4835F;
    background: #B4835F;
}

.acc-track-step strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 500;
}

.acc-track-step.is-done {
    color: #111;
}

.acc-track-step span {
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
}

.acc-items {
    border-top: 1px solid #ececec;
}

.acc-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #ececec;
}

.acc-item-img {
    flex-shrink: 0;
    width: 72px;
    height: 90px;
    overflow: hidden;
    border-radius: 10px;
    background: #ece7e1;
}

.acc-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.acc-item-name {
    display: block;
    margin-bottom: 4px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

a.acc-item-name:hover {
    color: #B4835F;
    text-decoration: none;
}

.acc-item-meta,
.acc-item-qty {
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.acc-item-meta p {
    display: inline;
    margin: 0;
}

.acc-item-meta strong {
    font-weight: 400;
}

.acc-item-price {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
}

.acc-totals {
    max-width: 380px;
    margin: 20px 0 0 auto;
}

.acc-total-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 14px;
}

.acc-total-row dt {
    color: rgb(17 17 17 / 55%);
    font-weight: 400;
}

.acc-total-row dd {
    margin: 0;
    text-align: right;
}

.acc-total-order_total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
    font-size: 17px;
    font-weight: 500;
}

.acc-total-order_total dt {
    color: #111;
}

.acc-order-note {
    margin: 20px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #faf8f6;
    color: rgb(17 17 17 / 70%);
    font-size: 14px;
}

.acc-notes {
    margin: 0;
    padding: 0 0 0 18px;
    border-left: 2px solid #ece7e1;
    list-style: none;
}

.acc-note {
    position: relative;
    padding-bottom: 18px;
}

.acc-note::before {
    content: '';
    position: absolute;
    top: 4px;
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B4835F;
}

.acc-note-date {
    display: block;
    margin-bottom: 4px;
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
}

.acc-note-text p {
    margin: 0;
    font-size: 14px;
}

/* address cards */
.acc-address-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.acc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid #ececec;
    border-radius: 16px;
}

.acc-address.is-empty {
    border-style: dashed;
}

.acc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    margin-bottom: 14px;
}

.acc-card-label {
    display: block;
    margin-bottom: 14px;
    color: rgb(17 17 17 / 55%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.acc-card-top .acc-card-label {
    margin: 0;
}

.acc-saved {
    color: #2d6a32;
    font-size: 12px;
    font-weight: 500;
}

.acc-card address {
    flex: 1 1 auto;
    margin: 0 0 22px;
    color: rgb(17 17 17 / 75%);
    font-size: 14px;
    font-style: normal;
    line-height: 1.7;
}

.acc-address.is-empty address {
    color: rgb(17 17 17 / 45%);
}

/* forms (account details, edit address; WooCommerce form rows) */
.acc-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

.acc-form .form-row {
    display: block;
    flex: 0 0 100%;
    margin: 0 0 18px;
    padding: 0;
}

.acc-form .form-row-first,
.acc-form .form-row-last {
    flex: 0 0 calc(50% - 8px);
}

.acc-form label {
    display: block;
    margin-bottom: 8px;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

.acc-form label .required {
    color: #B4835F;
    text-decoration: none;
}

.acc-form label .optional {
    color: rgb(17 17 17 / 40%);
    font-weight: 400;
}

.acc-form .woocommerce-input-wrapper {
    display: block;
}

.acc-form .input-text,
.acc-form select,
.acc-form textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.acc-form textarea {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
}

.acc-form .input-text:focus,
.acc-form select:focus,
.acc-form textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 4px rgb(17 17 17 / 6%);
    outline: none;
}

.acc-form .auth-password {
    display: block;
}

.acc-form .auth-password .input-text {
    padding-right: 48px;
}

/* country / state dropdowns (selectWoo) */
.acc-form .select2-container .select2-selection--single {
    height: 48px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    color: #111;
    font-size: 14px;
    line-height: 46px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__arrow {
    top: 11px;
    right: 8px;
}

.acc-form .select2-container--open .select2-selection--single,
.acc-form .select2-container--focus .select2-selection--single {
    border-color: #111;
}

.acc-help {
    display: block;
    margin-top: 6px;
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
}

.acc-fieldset {
    margin: 12px 0 0;
    padding: 24px;
    border: 1px solid #ececec;
    border-radius: 16px;
}

.acc-fieldset legend {
    width: auto;
    margin: 0;
    padding: 0 8px;
    color: #111;
    font-size: 15px;
    font-weight: 500;
}

.acc-fieldset > .acc-help {
    margin: 0 0 18px;
}

.acc-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

/* WooCommerce notices at the top of a section */
.acc-content .woocommerce-error,
.acc-content .woocommerce-message,
.acc-content .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    list-style: none;
}

.acc-content .woocommerce-error li {
    margin: 0;
}

.acc-content .woocommerce-error {
    border-color: #f3cfcb;
    background: #fdf1f0;
    color: #a3352a;
}

.acc-content .woocommerce-message,
.acc-content .woocommerce-info {
    border-color: #cfe6d3;
    background: #f1f8f2;
    color: #2d6a32;
}

.acc-content .woocommerce-message .button,
.acc-content .woocommerce-info .button {
    order: 2;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.acc-nav-link:focus-visible,
.acc-btn:focus-visible,
.acc-stat:focus-visible,
.acc-row:focus-visible,
.acc-link-card:focus-visible,
.acc-logout:focus-visible,
.acc-back:focus-visible,
.acc-more:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* account ends */

/* wishlist starts */

.wish {
    padding: 140px 0 100px;
    background: #fff;
    color: #111;
}

.wish-head,
.cart-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
}

.wish-eyebrow,
.cart-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.wish-title,
.cart-title {
    margin: 0 0 8px;
    color: #111;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1;
}

.wish-sub,
.cart-sub {
    margin: 0;
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.wish-note {
    margin: -12px 0 30px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f6f3ef;
    color: rgb(17 17 17 / 65%);
    font-size: 13px;
}

.wish-note a {
    color: #111;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* removed cards fade and shrink away */
.wish-grid .wear-col {
    transition: opacity .4s ease, transform .45s cubic-bezier(.65, 0, .35, 1);
}

.wish-grid .wear-col.is-leaving {
    opacity: 0;
    transform: scale(.94);
}

.wish-empty,
.cart-empty {
    max-width: 520px;
    margin: 30px auto 0;
    padding: 70px 24px;
    text-align: center;
}

.wish-empty-icon,
.cart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: #f6f3ef;
    color: #B4835F;
}

.wish-empty-icon svg,
.cart-empty-icon svg {
    width: 30px;
    height: 30px;
}

.wish-empty-title,
.cart-empty-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.wish-empty-text,
.cart-empty-text {
    margin: 0 0 26px;
    color: rgb(17 17 17 / 55%);
    font-size: 15px;
    line-height: 1.6;
}

.wish-suggest,
.cart-suggest {
    margin-top: 70px;
    padding-top: 40px;
    border-top: 1px solid #ececec;
}

.wish-suggest-title,
.cart-suggest-title {
    margin: 0 0 28px;
    color: #111;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.5px;
}

/* wishlist ends */

/* cart starts */

.cart-page {
    padding: 140px 0 100px;
    background: #fff;
    color: #111;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    list-style: none;
}

.cart-notices .woocommerce-error li {
    margin: 0;
}

.cart-notices .woocommerce-error {
    border-color: #f3cfcb;
    background: #fdf1f0;
    color: #a3352a;
}

.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    border-color: #cfe6d3;
    background: #f1f8f2;
    color: #2d6a32;
}

.cart-notices a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.cart-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* free delivery progress */
.cart-ship {
    margin-bottom: 30px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #f6f3ef;
}

.cart-ship p {
    margin: 0 0 12px;
    color: rgb(17 17 17 / 75%);
    font-size: 14px;
}

.cart-ship strong {
    color: #111;
    font-weight: 600;
}

.cart-ship-track {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6dfd7;
}

.cart-ship-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #111;
    animation: cartFill 1.2s cubic-bezier(.65, 0, .35, 1);
    transform-origin: left center;
    transition: width 1s cubic-bezier(.65, 0, .35, 1), background-color .6s ease;
}

.cart-ship.is-unlocked .cart-ship-fill {
    background: #2d6a32;
}

@keyframes cartFill {
    from {
        transform: scaleX(0);
    }
}

/* items + summary */
.cart-layout {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.cart-items {
    flex: 1 1 auto;
    min-width: 0;
    border-top: 1px solid #ececec;
}

.cart-item {
    display: flex;
    gap: 22px;
    padding: 24px 0;
    border-bottom: 1px solid #ececec;
}

/* rows opening (undo) or closing (remove) in assets/js/cart.js */
.cart-item.is-leaving,
.cart-item.is-entering {
    overflow: hidden;
}

.cart-item.is-leaving {
    pointer-events: none;
}

/* a quantity on its way to the cart: the line total breathes until the new one arrives */
.cart-item-total,
.cart-item-unit {
    transition: opacity .3s ease;
}

.cart-item.is-pending .cart-item-total {
    animation: cartPending 1.1s ease-in-out infinite;
}

@keyframes cartPending {
    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .7;
    }
}

.cart-item-img {
    flex-shrink: 0;
    width: 120px;
    height: 150px;
    overflow: hidden;
    border-radius: 12px;
    background: #ece7e1;
}

.cart-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.cart-item:hover .cart-item-img img {
    transform: scale(1.05);
}

.cart-item-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.cart-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cart-item-name {
    display: block;
    margin-bottom: 6px;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

a.cart-item-name:hover {
    color: #B4835F;
    text-decoration: none;
}

/* "Size: M" from WooCommerce's item data list */
.cart-item-meta dl {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    margin: 0 0 6px;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
}

.cart-item-meta dt {
    font-weight: 400;
}

.cart-item-meta dd {
    margin: 0;
}

.cart-item-meta dd p {
    margin: 0;
}

.cart-item-unit {
    display: inline-block;
    color: rgb(17 17 17 / 45%);
    font-size: 13px;
}

.cart-item-total {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 500;
}

.cart-item-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e3ded8;
    border-radius: 999px;
}

.cart-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #111;
    cursor: pointer;
    transition: background-color .3s ease;
}

.cart-qty-btn:hover {
    background: #f6f3ef;
}

.cart-qty-btn svg {
    width: 14px;
    height: 14px;
}

.cart-qty-input {
    width: 34px;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
}

.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cart-qty-input:focus {
    outline: none;
}

.cart-item-actions {
    display: flex;
    gap: 18px;
}

.cart-item-link {
    padding: 0;
    border: 0;
    background: none;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color .3s ease;
}

.cart-item-link:hover {
    color: #111;
}

.cart-remove:hover {
    color: #a3352a;
}

/* kept for no-JS; quantity changes submit the form by themselves */
.cart-update {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.cart-update:focus {
    position: static;
    width: auto;
    height: auto;
    margin-top: 18px;
    clip: auto;
}

/* order summary */
.cart-summary {
    position: sticky;
    top: 110px;
    flex: 0 0 380px;
    padding: 28px;
    border-radius: 18px;
    background: #f6f3ef;
}

.cart-summary-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 500;
}

.cart-lines {
    margin: 0;
}

.cart-lines.is-changing {
    overflow: hidden;
}

.cart-lines dd {
    transition: opacity .3s ease;
}

/* figures waiting on the cart's answer */
.cart-summary.is-updating .cart-lines dd {
    opacity: .4;
}

.cart-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 14px;
}

.cart-line dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(17 17 17 / 60%);
    font-weight: 400;
}

.cart-line dd {
    margin: 0;
    text-align: right;
}

.cart-line-note {
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.cart-line-discount dd {
    color: #2d6a32;
}

.cart-coupon-code {
    padding: 2px 8px;
    border-radius: 6px;
    background: #fff;
    color: #111;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

.cart-coupon-remove {
    color: rgb(17 17 17 / 45%);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.cart-coupon-remove:hover {
    color: #a3352a;
    text-decoration: none;
}

.cart-line-total {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #e3ded8;
    font-size: 18px;
    font-weight: 500;
}

.cart-line-total dt {
    color: #111;
    font-weight: 500;
}

.cart-line-total small {
    display: block;
    color: rgb(17 17 17 / 50%);
    font-size: 11px;
    font-weight: 400;
}

.cart-coupon {
    margin: 18px 0 20px;
    border-top: 1px solid #e3ded8;
    border-bottom: 1px solid #e3ded8;
}

.cart-coupon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.cart-coupon summary::-webkit-details-marker {
    display: none;
}

.cart-coupon summary::after {
    content: '';
    width: 10px;
    height: 10px;
    background: linear-gradient(#111, #111) center / 10px 1px no-repeat, linear-gradient(#111, #111) center / 1px 10px no-repeat;
    transition: transform .3s ease;
}

.cart-coupon[open] summary::after {
    background: linear-gradient(#111, #111) center / 10px 1px no-repeat;
}

.cart-coupon-form {
    display: flex;
    gap: 8px;
    padding-bottom: 16px;
}

.cart-coupon-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 14px;
    text-transform: uppercase;
}

.cart-coupon-form input:focus {
    border-color: #111;
    outline: none;
}

.cart-coupon-form button {
    padding: 0 18px;
    border: 1px solid #111;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.cart-coupon-form button:hover {
    background: #111;
    color: #fff;
}

.cart-coupon-form.is-loading button {
    opacity: .5;
    cursor: wait;
}

.cart-checkout {
    width: 100%;
    height: 54px;
    font-size: 12px;
}

.cart-checkout svg {
    width: 16px;
    height: 16px;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.cart-checkout:hover svg {
    transform: translateX(4px);
}

.cart-trust {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.cart-trust li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgb(17 17 17 / 55%);
    font-size: 12px;
}

.cart-trust svg {
    width: 16px;
    height: 16px;
}

.cart-qty-btn:focus-visible,
.cart-item-link:focus-visible,
.cart-coupon summary:focus-visible,
.cart-coupon-form button:focus-visible,
.cart-coupon-remove:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* toast for cart notices (removed + Undo, codes, errors), built by assets/js/cart.js */
.cart-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: 520px;
    padding: 14px 14px 14px 18px;
    overflow: hidden;
    border-radius: 14px;
    background: #111;
    box-shadow: 0 18px 40px rgb(0 0 0 / 22%);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 24px) scale(.96);
    transition: opacity .35s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.cart-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.cart-toast-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgb(255 255 255 / 10%);
    color: #B4835F;
}

.cart-toast.is-error .cart-toast-icon {
    color: #f0948a;
}

.cart-toast-icon svg {
    width: 15px;
    height: 15px;
}

.cart-toast-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-toast-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-toast-undo {
    flex-shrink: 0;
    height: 34px;
    padding: 0 16px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 999px;
    background: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.cart-toast-undo:hover {
    border-color: #fff;
    background: #fff;
    color: #111;
}

.cart-toast-close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: rgb(255 255 255 / 55%);
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease;
}

.cart-toast-close:hover {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.cart-toast-close svg {
    width: 14px;
    height: 14px;
}

.cart-toast-undo:focus-visible,
.cart-toast-close:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* time left before it goes */
.cart-toast-timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #B4835F;
    transform-origin: left center;
    animation: cartToastTimer 5s linear forwards;
}

.cart-toast.is-error .cart-toast-timer {
    background: #f0948a;
    animation-duration: 8s;
}

.cart-toast.is-paused .cart-toast-timer {
    animation-play-state: paused;
}

@keyframes cartToastTimer {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cart-toast {
        transition: opacity .2s ease;
    }

    .cart-item.is-pending .cart-item-total {
        animation: none;
        opacity: .5;
    }
}

/* empty cart: split hero, wishlist / trending row, collection tiles */
.cart-void {
    display: flex;
    align-items: center;
    gap: 70px;
    padding: 10px 0 20px;
}

.cart-void-text {
    flex: 0 0 44%;
    max-width: 44%;
}

.cart-void-text > * {
    animation: cartRise .9s cubic-bezier(.2, .7, .2, 1) both;
}

.cart-void-text > *:nth-child(2) { animation-delay: .08s; }
.cart-void-text > *:nth-child(3) { animation-delay: .16s; }
.cart-void-text > *:nth-child(4) { animation-delay: .24s; }
.cart-void-text > *:nth-child(5) { animation-delay: .32s; }

.cart-void-title {
    margin: 0 0 22px;
    color: #111;
    font-size: 58px;
    text-wrap: balance;
    font-weight: 500;
    letter-spacing: -3px;
    line-height: .98;
}

.cart-void-lead {
    max-width: 440px;
    margin: 0 0 34px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    line-height: 1.7;
}

.cart-void-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 44px;
}

.cart-void-actions .acc-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.cart-void-actions .acc-btn:hover svg {
    transform: translateX(4px);
}

.cart-void-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 26px 0 0;
    border-top: 1px solid #ececec;
    list-style: none;
}

.cart-void-perks li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgb(17 17 17 / 55%);
    font-size: 12px;
    line-height: 1.5;
}

.cart-void-perks svg {
    width: 24px;
    height: 24px;
    color: #B4835F;
}

.cart-void-perks strong {
    display: block;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

/* three newest pieces, staggered like an editorial spread */
.cart-void-media {
    position: relative;
    flex: 1 1 auto;
    height: 600px;
    min-width: 0;
}

.cart-void-tile {
    position: absolute;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background: #ece7e1;
    animation: cartRise 1.1s cubic-bezier(.2, .7, .2, 1) both;
}

.cart-void-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.cart-void-tile:hover img {
    transform: scale(1.06);
}

.cart-void-tile-1 {
    top: 0;
    left: 0;
    width: 54%;
    height: 82%;
}

.cart-void-tile-2 {
    top: 8%;
    right: 0;
    width: 42%;
    height: 46%;
    animation-delay: .12s;
}

.cart-void-tile-3 {
    right: 6%;
    bottom: 0;
    width: 36%;
    height: 40%;
    animation-delay: .24s;
}

.cart-void-caption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgb(255 255 255 / 88%);
    color: #111;
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}

.cart-void-caption strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-void-caption del {
    margin-right: 4px;
    opacity: .5;
}

.cart-void-caption ins {
    text-decoration: none;
}

.cart-void-tile:hover .cart-void-caption,
.cart-void-tile:focus-visible .cart-void-caption {
    opacity: 1;
    transform: translateY(0);
}

@keyframes cartRise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cart-suggest-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.cart-suggest-head .cart-suggest-title {
    margin: 0;
}

.cart-suggest-link {
    color: #111;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-suggest-link:hover {
    color: #B4835F;
}

/* collection tiles */
.cart-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cart-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #ece7e1;
    aspect-ratio: 3 / 4;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}

.cart-tile img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.cart-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 45%, rgb(0 0 0 / 55%) 100%);
}

.cart-tile:hover {
    color: #fff;
    text-decoration: none;
}

.cart-tile:hover img {
    transform: scale(1.06);
}

.cart-tile-info {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
}

.cart-tile-info strong {
    display: block;
    margin-bottom: 2px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.cart-tile-info span {
    font-size: 12px;
    opacity: .8;
}

.cart-tile-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    transform: scale(.8);
    opacity: 0;
    transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.cart-tile-arrow svg {
    width: 18px;
    height: 18px;
}

.cart-tile:hover .cart-tile-arrow,
.cart-tile:focus-visible .cart-tile-arrow {
    opacity: 1;
    transform: scale(1);
}

/* dragged with a mouse (assets/js/cart.js): no snapping mid-drag, and the tiles don't react */
.cart-tiles.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.cart-tiles.is-dragging .cart-tile {
    pointer-events: none;
}

.cart-void-tile:focus-visible,
.cart-tile:focus-visible,
.cart-suggest-link:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 3px;
}

/* cart ends */

/* checkout starts */

.co {
    padding: 140px 0 100px;
    background: #fff;
    color: #111;
}

.co-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
}

.co-eyebrow {
    margin-bottom: 14px;
    color: #111;
    font-size: 11px;
}

.co-title {
    margin: 0;
    color: #111;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1;
}

/* Cart -> Details -> Confirmation */
.co-steps {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.co-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(17 17 17 / 40%);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.co-steps li + li::before {
    content: '';
    width: 40px;
    height: 1px;
    margin: 0 14px;
    background: #e3ded8;
}

.co-steps a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.co-steps a:hover {
    color: #111;
    text-decoration: none;
}

.co-steps-dot {
    width: 10px;
    height: 10px;
    border: 1.5px solid #d6cfc7;
    border-radius: 50%;
}

.co-steps .is-done {
    color: #111;
}

.co-steps .is-done .co-steps-dot {
    border-color: #111;
    background: #111;
}

.co-steps .is-current {
    color: #111;
}

.co-steps .is-current .co-steps-dot {
    border-color: #B4835F;
    background: #B4835F;
    box-shadow: 0 0 0 4px rgb(180 131 95 / 18%);
}

/* layout */
.co-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: 50px;
}

/* WooCommerce puts checkout errors at the top of the form */
.co-layout > .woocommerce-NoticeGroup,
.co-layout > .woocommerce-error,
.co-layout > .woocommerce-message,
.co-layout > .woocommerce-info {
    grid-column: 1 / -1;
}

.co .woocommerce-error,
.co .woocommerce-message,
.co .woocommerce-info {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    list-style: none;
}

.co .woocommerce-error li {
    margin: 2px 0;
}

.co .woocommerce-error {
    border-color: #f3cfcb;
    background: #fdf1f0;
    color: #a3352a;
}

.co .woocommerce-message,
.co .woocommerce-info {
    border-color: #cfe6d3;
    background: #f1f8f2;
    color: #2d6a32;
}

.co .woocommerce-error a,
.co .woocommerce-message a,
.co .woocommerce-info a {
    color: inherit;
    font-weight: 600;
}

/* numbered sections: one card per step */
.co-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#customer_details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.co-step {
    padding: 28px 30px 30px;
    border: 1px solid #ececec;
    border-radius: 18px;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}

/* the step being filled in lifts slightly */
.co-step:focus-within {
    border-color: #d9d2ca;
    box-shadow: 0 18px 40px -28px rgb(0 0 0 / 25%);
}

.co-step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.co-num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #111;
    border-radius: 50%;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: background-color .3s ease, color .3s ease;
}

.co-step:focus-within .co-num {
    background: #111;
    color: #fff;
}

.co-step-text {
    min-width: 0;
}

.co-step-title {
    margin: 0;
    color: #111;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -.3px;
    line-height: 1.2;
}

.co-step-sub {
    display: block;
    margin-top: 3px;
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}

.co-optional {
    margin-left: 6px;
    color: rgb(17 17 17 / 40%);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}

.co-step-aside {
    margin-left: auto;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    white-space: nowrap;
}

.co-step-aside a {
    color: #111;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.co-secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.co-secure svg {
    width: 16px;
    height: 16px;
    color: #2d6a32;
}

/* fields: a 6-column grid, placed by field so WooCommerce's per-country changes can't break it */
.co-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.co .co-fields .form-row {
    grid-column: span 6;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.co #billing_first_name_field,
.co #billing_last_name_field,
.co #shipping_first_name_field,
.co #shipping_last_name_field,
.co #billing_phone_field,
.co #billing_email_field {
    grid-column: span 3;
}

.co #billing_city_field,
.co #billing_state_field,
.co #billing_postcode_field,
.co #shipping_city_field,
.co #shipping_state_field,
.co #shipping_postcode_field {
    grid-column: span 2;
}

/* label sits inside the field, top left, like a premium checkout */
.co .co-fields .form-row > label {
    position: absolute;
    top: 9px;
    left: 15px;
    right: 15px;
    z-index: 2;
    margin: 0;
    overflow: hidden;
    color: rgb(17 17 17 / 50%);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transition: color .3s ease;
}

.co .co-fields .form-row > label .required {
    margin-left: 1px;
    color: #B4835F;
    text-decoration: none;
    border: 0;
}

.co .co-fields .form-row > label .optional {
    color: rgb(17 17 17 / 35%);
    font-weight: 400;
}

.co .co-fields .form-row:focus-within > label {
    color: #111;
}

/* another stylesheet makes .form-row a flex row, which shrank the wrapper to the input's natural width */
.co .woocommerce-input-wrapper,
.acc-form .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.co .co-fields .input-text,
.co .co-fields select,
.co .co-fields textarea {
    width: 100%;
    height: 58px;
    padding: 24px 15px 8px;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    background: #fff;
    color: #111;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.co .co-fields .input-text:hover,
.co .co-fields textarea:hover {
    border-color: #cfc8c0;
}

.co .co-fields .input-text::placeholder,
.co .co-fields textarea::placeholder {
    color: rgb(17 17 17 / 28%);
}

.co .co-fields .input-text:focus,
.co .co-fields select:focus,
.co .co-fields textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 4px rgb(17 17 17 / 6%);
    outline: none;
}

.co .co-fields textarea {
    height: auto;
    min-height: 120px;
    padding-top: 28px;
    resize: vertical;
}

/* fields whose label WooCommerce hides (apartment line): text centred, no label space */
.co .co-fields .form-row > label.screen-reader-text + .woocommerce-input-wrapper .input-text {
    padding-top: 8px;
}

/* country / state dropdowns (selectWoo) */
.co .co-fields .select2-container .select2-selection--single {
    height: 58px;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.co .co-fields .select2-container .select2-selection--single:hover {
    border-color: #cfc8c0;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 24px 40px 0 15px;
    color: #111;
    font-size: 15px;
    line-height: 26px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__arrow {
    top: 16px;
    right: 12px;
}

.co .co-fields .select2-container--open .select2-selection--single,
.co .co-fields .select2-container--focus .select2-selection--single {
    border-color: #111;
    box-shadow: 0 0 0 4px rgb(17 17 17 / 6%);
}

.select2-dropdown {
    overflow: hidden;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / 25%);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #111;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e3ded8;
    border-radius: 8px;
}

/* errors and confirmed fields */
.co .co-fields .form-row.woocommerce-invalid .input-text,
.co .co-fields .form-row.woocommerce-invalid .select2-selection {
    border-color: #d9534f;
    background: #fffafa;
}

.co .co-fields .form-row.woocommerce-invalid > label {
    color: #c0392b;
}

.co .co-fields .form-row.woocommerce-validated .input-text {
    border-color: #e3ded8;
}

/* checkboxes: different address, create account, terms */
.co-check,
.co .woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: rgb(17 17 17 / 75%);
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer;
}

.co-check input,
.co .woocommerce-form__label-for-checkbox input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #111;
}

.co-ship-to {
    margin-top: 16px;
}

.co-ship-to h3 .co-check,
.co-account > .co-check {
    padding: 16px 18px;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    transition: border-color .3s ease, background-color .3s ease;
}

.co-ship-to h3 .co-check:hover,
.co-account > .co-check:hover {
    border-color: #cfc8c0;
}

.co-ship-to h3 .co-check:has(input:checked),
.co-account > .co-check:has(input:checked) {
    border-color: #111;
    background: #faf8f6;
}

.co-ship-to h3 {
    margin: 0;
    font-size: 14px;
}

.co-ship-to .shipping_address {
    margin-top: 20px;
}

.co-account {
    margin-top: 16px;
}

.co-account .create-account.co-fields {
    margin-top: 16px;
}

/* order notes fold open */
.co-notes summary {
    margin: 0;
    list-style: none;
    cursor: pointer;
}

.co-notes summary::-webkit-details-marker {
    display: none;
}

.co-notes summary::after {
    content: '';
    width: 12px;
    height: 12px;
    margin-left: auto;
    background: linear-gradient(#111, #111) center / 12px 1px no-repeat, linear-gradient(#111, #111) center / 1px 12px no-repeat;
}

.co-notes[open] summary::after {
    background: linear-gradient(#111, #111) center / 12px 1px no-repeat;
}

.co-notes[open] summary {
    margin-bottom: 20px;
}

.co-notes summary {
    margin-bottom: 0;
}

.co-notes:not([open]) summary {
    margin-bottom: 0;
}

/* payment */
.co-step-pay .co-step-head {
    margin-bottom: 20px;
}

.co .wc_payment_methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.co .wc_payment_method {
    padding: 0;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    transition: border-color .3s ease, background-color .3s ease;
}

.co .wc_payment_method:has(input:checked) {
    border-color: #111;
    background: #faf8f6;
}

.co .wc_payment_method > label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.co .wc_payment_method > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* custom radio dot */
.co .wc_payment_method > label::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cfc8c0;
    border-radius: 50%;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.co .wc_payment_method > input:checked + label::before {
    border-color: #111;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px #111;
}

.co .wc_payment_method > input:focus-visible + label {
    outline: 2px solid #B4835F;
    outline-offset: -2px;
    border-radius: 12px;
}

.co .wc_payment_method label img {
    max-height: 22px;
    margin-left: auto;
}

.co .payment_box {
    margin: 0;
    padding: 0 18px 16px 48px;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
    line-height: 1.6;
}

.co .payment_box p {
    margin: 0;
}

.co #payment > .wc_payment_methods > li:only-child .woocommerce-info,
.co #payment .woocommerce-notice {
    margin: 0;
}

.co .place-order {
    margin: 0;
    padding: 0;
}

.co .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 18px;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    line-height: 1.6;
}

.co .woocommerce-privacy-policy-text p {
    margin: 0 0 12px;
}

.co .woocommerce-terms-and-conditions-wrapper a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.co #place_order {
    width: 100%;
    height: 56px;
    font-size: 12px;
}

/* order summary */
.co-side {
    position: sticky;
    top: 110px;
    padding: 28px;
    border-radius: 18px;
    background: #f6f3ef;
}

.co-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.co-side-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.co-edit {
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.co-edit:hover {
    color: #111;
}

.co-items {
    margin: 0 0 18px;
    padding: 0 0 6px;
    border-bottom: 1px solid #e3ded8;
    list-style: none;
}

.co-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.co-item-img {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 74px;
    border-radius: 10px;
    background: #ece7e1;
}

.co-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.co-item-qty {
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 2px solid #f6f3ef;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.co-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.co-item-name {
    display: block;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.co-item-meta dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    margin: 2px 0 0;
    color: rgb(17 17 17 / 55%);
    font-size: 12px;
}

.co-item-meta dt {
    font-weight: 400;
}

.co-item-meta dd,
.co-item-meta dd p {
    margin: 0;
}

.co-item-price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
}

.co-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    color: rgb(17 17 17 / 65%);
    font-size: 14px;
}

.co-total-row > span:last-child {
    color: #111;
    text-align: right;
}

.co-total-row.cart-discount > span:last-child {
    color: #2d6a32;
}

.co-total-row .woocommerce-remove-coupon {
    margin-left: 6px;
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
    text-decoration: underline;
}

.co-total-row.order-total {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #e3ded8;
    color: #111;
    font-size: 18px;
    font-weight: 500;
}

.co-total-row.order-total small {
    display: block;
    color: rgb(17 17 17 / 50%);
    font-size: 11px;
    font-weight: 400;
}

/* delivery options as radio cards */
.co-ship {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.co-ship-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.co-ship-method {
    position: relative;
}

.co-ship-method input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.co-ship-method label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .3s ease;
}

.co-ship-method input[type="radio"]:checked + label {
    border-color: #111;
}

.co-ship-method input[type="radio"]:focus-visible + label {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

.co-ship-method input[type="hidden"] + label {
    padding: 0;
    border: 0;
    background: none;
}

.co-ship-note {
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
}

/* promo code */
.co-coupon {
    margin-top: 16px;
    border-top: 1px solid #e3ded8;
}

.co-coupon summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.co-coupon summary::-webkit-details-marker {
    display: none;
}

.co-coupon summary::after {
    content: '';
    width: 10px;
    height: 10px;
    background: linear-gradient(#111, #111) center / 10px 1px no-repeat, linear-gradient(#111, #111) center / 1px 10px no-repeat;
}

.co-coupon[open] summary::after {
    background: linear-gradient(#111, #111) center / 10px 1px no-repeat;
}

.co-coupon-row {
    display: flex;
    gap: 8px;
}

.co-coupon-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 14px;
    text-transform: uppercase;
}

.co-coupon-row input:focus {
    border-color: #111;
    outline: none;
}

.co-coupon-apply {
    padding: 0 18px;
    border: 1px solid #111;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.co-coupon-apply:hover {
    background: #111;
    color: #fff;
}

.co-coupon.is-loading .co-coupon-apply {
    opacity: .5;
    pointer-events: none;
}

.co-coupon-msg .woocommerce-error,
.co-coupon-msg .woocommerce-message,
.co-coupon-msg .woocommerce-info {
    margin: 10px 0 0;
    padding: 10px 12px;
    font-size: 13px;
}

.co-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.co-trust li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgb(17 17 17 / 55%);
    font-size: 12px;
}

.co-trust svg {
    width: 16px;
    height: 16px;
}

/* WooCommerce's "updating" layer (blockUI) over the summary and payment while totals recalculate,
   e.g. right after the page loads: a soft wash in the panel's own colour with a small spinner,
   instead of its inline flat white at 60% */
.co .blockUI.blockOverlay {
    border-radius: 12px;
    background: rgb(246 243 239 / 65%) !important;
    opacity: 1 !important;
}

.co-step .blockUI.blockOverlay {
    background: rgb(255 255 255 / 70%) !important;
}

/* WooCommerce lays the layer over the review table only; with the table left unpositioned (blockUI makes
   it relative) the layer sizes to the whole summary panel instead: heading, promo code and trust row too */
.co-side .co-review {
    position: static !important;
}

.co-side .blockUI.blockOverlay {
    border-radius: 18px;
}

.co .blockUI.blockOverlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 1.5px solid rgb(17 17 17 / 15%);
    border-top-color: #111;
    border-radius: 50%;
    animation: shopSpin .8s linear infinite;
}

.co-steps a:focus-visible,
.co-step-aside a:focus-visible,
.co-edit:focus-visible,
.co-coupon summary:focus-visible,
.co-coupon-apply:focus-visible,
.co-notes summary:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* order received */
.co-thanks-hero {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

.co-thanks-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    animation: coPop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}

.co-thanks-icon svg {
    width: 34px;
    height: 34px;
}

/* the tick draws itself */
.co-thanks-check {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: coDraw .5s .35s ease forwards;
}

.is-failed .co-thanks-icon {
    background: #fdf1f0;
    color: #a3352a;
}

.co-thanks-title {
    margin: 0 0 16px;
    color: #111;
    font-size: 56px;
    font-weight: 500;
    letter-spacing: -2.5px;
    line-height: 1;
}

.co-thanks-lead {
    max-width: 520px;
    margin: 0 auto 36px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
    line-height: 1.7;
}

.co-thanks-lead strong {
    color: #111;
    font-weight: 500;
}

.co-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    border: 1px solid #ececec;
    border-radius: 16px;
    text-align: left;
}

.co-facts div {
    padding: 18px 20px;
}

.co-facts div + div {
    border-left: 1px solid #ececec;
}

.co-facts dt {
    margin-bottom: 6px;
    color: rgb(17 17 17 / 50%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.co-facts dd {
    margin: 0;
    color: #111;
    font-size: 15px;
    font-weight: 500;
}

.co-thanks-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 50px;
}

.co-thanks-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.co-next {
    padding: 24px;
    border-radius: 16px;
    background: #f6f3ef;
}

.co-next ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.co-next li {
    position: relative;
    padding: 0 0 16px 38px;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    counter-increment: step;
}

.co-next li:last-child {
    padding-bottom: 0;
}

.co-next li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

.co-next li:first-child::before {
    background: #111;
    color: #fff;
}

.co-next strong {
    display: block;
    color: #111;
    font-size: 14px;
    font-weight: 500;
}

.co-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.co-thanks-side .co-thanks-actions .acc-btn {
    flex: 1 1 auto;
}

/* bank transfer details and similar payment notes from WooCommerce */
.co-done .woocommerce-bacs-bank-details,
.co-done .wc-bacs-bank-details-heading {
    max-width: 720px;
    margin: 0 auto 30px;
}

@keyframes coPop {
    from {
        opacity: 0;
        transform: scale(.4);
    }
}

@keyframes coDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* checkout ends */

/* product page starts */

.pd {
    padding: 130px 0 100px;
    background: #fff;
    color: #111;
}

.pd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
}

.pd-crumbs a {
    color: rgb(17 17 17 / 50%);
    text-decoration: none;
    transition: color .3s ease;
}

.pd-crumbs a:hover {
    color: #111;
    text-decoration: none;
}

.pd-crumbs [aria-current] {
    overflow: hidden;
    max-width: 280px;
    color: #111;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-crumbs-sep {
    width: 14px;
    height: 1px;
    background: rgb(17 17 17 / 25%);
}

.pd-layout {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.pd-layout > .pd-gallery {
    flex: 1 1 0;
    min-width: 0;
}

.pd-layout > .pd-info {
    flex: 1 1 0;
    min-width: 0;
}

.pd-gallery {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pd-gallery > .pd-main {
    flex: 1 1 0;
    min-width: 0;
}

.pd-thumbs-wrap {
    flex: 0 0 96px;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-height: 560px;
    overflow-y: auto;
    scrollbar-width: none;
}

.pd-thumbs::-webkit-scrollbar {
    display: none;
}

/* one photo: no thumbnail column (a variation with its own gallery fills it) */
.pd-thumbs-wrap[hidden],
.pd-thumbs-more[hidden] {
    display: none;
}

.pd-thumb {
    flex-shrink: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    background: #ece7e1;
    aspect-ratio: 3 / 4;
    opacity: .7;
    cursor: pointer;
    transition: opacity .3s ease, border-color .3s ease;
}

.pd-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb:hover {
    opacity: 1;
}

.pd-thumb.is-active {
    border: 2px solid #111;
    opacity: 1;
}

.pd-thumbs-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e3ded8;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    transition: border-color .3s ease;
}

.pd-thumbs-more:hover {
    border-color: #111;
}

.pd-thumbs-more svg {
    width: 18px;
    height: 18px;
}

.pd-main {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #ece7e1;
    aspect-ratio: 3 / 4;
    cursor: zoom-in;
}

.pd-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.pd-main img.is-swapping {
    opacity: .25;
}

.pd-main:hover img {
    transform: scale(1.03);
}

.pd-zoom {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    box-shadow: 0 6px 18px -8px rgb(0 0 0 / 30%);
    cursor: pointer;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.pd-zoom svg {
    width: 20px;
    height: 20px;
}

.pd-zoom:hover {
    transform: scale(1.08);
}

/* ---- info column */
.pd-info {
    position: sticky;
    top: 110px;
}

.pd-notices .woocommerce-error,
.pd-notices .woocommerce-message,
.pd-notices .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14px;
    list-style: none;
}

.pd-notices .woocommerce-error {
    border-color: #f3cfcb;
    background: #fdf1f0;
    color: #a3352a;
}

.pd-notices .woocommerce-message,
.pd-notices .woocommerce-info {
    border-color: #cfe6d3;
    background: #f1f8f2;
    color: #2d6a32;
}

.pd-notices .button,
.pd-notices a {
    order: 2;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.pd-meta-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: 14px;
}

.pd-cat {
    color: #B4835F;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;
}

.pd-cat:hover {
    color: #111;
    text-decoration: none;
}

.pd-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(17 17 17 / 75%);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.pd-rating:hover {
    color: #111;
    text-decoration: none;
}

.pd-stars {
    display: inline-flex;
    gap: 2px;
}

.pd-stars svg {
    display: block;
    width: 13px;
    height: 13px;
    fill: rgb(17 17 17 / 15%);
}

.pd-stars .is-on,
.pd-stars .is-on svg,
.pd-stars svg.is-on {
    fill: #B4835F;
}

.pd-title {
    margin: 0 0 16px;
    color: #111;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.08;
}

.pd-price {
    color: #111;
    font-size: 22px;
    font-weight: 500;
}

.pd-price ins {
    text-decoration: none;
}

.pd-save {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f7efe7;
    color: #9a6a45;
    font-size: 12px;
    font-weight: 600;
}

.pd-short {
    margin-bottom: 24px;
    color: rgb(17 17 17 / 65%);
    font-size: 15px;
    line-height: 1.7;
}

.pd-short p {
    margin: 0 0 10px;
}

.pd-short p:last-child {
    margin-bottom: 0;
}

/* stock note: a soft pill with a pulsing dot */
.pd-stock {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    animation: authFade .35s ease;
}

.pd-stock[hidden] {
    display: none;
}

.pd-stock-dot {
    position: relative;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pd-stock.is-low {
    background: #fbf3e6;
    color: #8a5413;
}

.pd-stock.is-low .pd-stock-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: naPulse 1.8s ease-out infinite;
}

.pd-stock.is-out {
    background: #f3f0ec;
    color: rgb(17 17 17 / 65%);
}

/* under the size chips */
.pd-stock-variation {
    margin: -6px 0 16px;
}

/* ---- WooCommerce variation form, laid out as rows of chips */
.pd-buy {
    padding-top: 22px;
    border-top: 1px solid #ececec;
}

.pd .variations_form .variations,
.pd .variations_form .variations tbody,
.pd .variations_form .variations tr,
.pd .variations_form .variations th,
.pd .variations_form .variations td {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.pd .variations_form .variations {
    width: 100%;
    margin-bottom: 4px;
}

.pd .variations_form .variations tr {
    margin-bottom: 20px;
}

.pd .variations_form .variations .label label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pd-chosen {
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.pd-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    opacity: 0;
    pointer-events: none;
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-chip {
    position: relative;
    min-width: 52px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #e3ded8;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .2s ease;
}

.pd-chip:hover {
    border-color: #111;
}

.pd-chip:active {
    transform: scale(.96);
}

.pd-chip.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

/* no stock with the other picks: struck through */
.pd-chip.is-unavailable {
    color: rgb(17 17 17 / 30%);
    background: linear-gradient(to top right, transparent calc(50% - 1px), rgb(17 17 17 / 15%) 50%, transparent calc(50% + 1px)) #fff;
    cursor: not-allowed;
}

.pd-chips-color .pd-chip {
    width: 40px;
    min-width: 0;
    height: 40px;
    padding: 4px;
    border-radius: 50%;
}

.pd-chips-color .pd-chip.is-active {
    background: #fff;
    box-shadow: 0 0 0 1px #111;
}

.pd-chip-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
}

.pd .reset_variations {
    display: inline-block;
    margin-top: 10px;
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* chosen variation's own price / stock line */
.pd .woocommerce-variation {
    margin-bottom: 14px;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
}

.pd .woocommerce-variation-price .price {
    color: #111;
    font-size: 18px;
    font-weight: 500;
}

.pd .woocommerce-variation-price del {
    margin-right: 6px;
    opacity: .45;
}

.pd .woocommerce-variation-price ins {
    text-decoration: none;
}

.pd .woocommerce-variation-availability p {
    margin: 4px 0 0;
}

.pd .stock.out-of-stock {
    color: #a3352a;
}

/* quantity + add to cart on one row */
.pd .variations_button {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.pd .single-product-quantity {
    flex-shrink: 0;
}

.pd .single-product-quantity label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pd .single-quantity-input {
    display: flex;
    align-items: center;
    height: 54px;
    border: 1px solid #e3ded8;
    border-radius: 999px;
}

.pd .single-qty-btn {
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #111;
    font-size: 18px;
    cursor: pointer;
    transition: color .3s ease;
}

.pd .single-qty-btn:hover {
    color: #B4835F;
}

.pd .single-quantity-input .quantity {
    margin: 0;
}

.pd .single-quantity-input .qty {
    width: 36px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #111;
    font-size: 15px;
    text-align: center;
    -moz-appearance: textfield;
}

.pd .single-quantity-input .qty::-webkit-outer-spin-button,
.pd .single-quantity-input .qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.pd .single-quantity-input .qty:focus {
    outline: none;
}

.pd .single-product-add-to-cart {
    flex: 1 1 auto;
}

/* add to cart: the site's wipe-up fill button */
.pd .single_add_to_cart_button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    padding: 0 24px;
    overflow: hidden;
    border: 1px solid #111;
    border-radius: 0;
    background: #111;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    isolation: isolate;
    transition: border-color .5s ease;
}

.pd .single_add_to_cart_button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #B4835F;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.pd .single_add_to_cart_button:hover:not(.disabled)::before {
    transform: scaleY(1);
}

.pd .single_add_to_cart_button:hover:not(.disabled) {
    border-color: #B4835F;
}

.pd .single_add_to_cart_button i {
    font-size: 18px;
}

/* waiting for a size */
.pd .single_add_to_cart_button.disabled {
    border-color: #cfc8c0;
    background: #cfc8c0;
    cursor: not-allowed;
}

.pd .single_add_to_cart_button.loading {
    opacity: .7;
}

.pd-wish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border: 1px solid #e3ded8;
    background: #fff;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease;
}

.pd-wish:hover {
    border-color: #111;
}

.pd-wish i {
    font-size: 15px;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.pd-wish.active {
    color: #B4835F;
    border-color: #ead9c9;
}

.pd-wish.active i {
    transform: scale(1.15);
}

.pd-perks {
    display: flex;
    gap: 14px;
    margin: 26px 0 0;
    padding: 22px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    list-style: none;
}

.pd-perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
}

.pd-perks svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: #B4835F;
}

.pd-perks strong {
    color: #111;
    font-weight: 500;
}

/* folding details */
.pd-fold {
    border-bottom: 1px solid #ececec;
}

.pd-fold summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.pd-fold summary::-webkit-details-marker {
    display: none;
}

.pd-fold summary::after {
    content: '';
    width: 12px;
    height: 12px;
    background: linear-gradient(#111, #111) center / 12px 1px no-repeat, linear-gradient(#111, #111) center / 1px 12px no-repeat;
    transition: transform .3s ease;
}

.pd-fold[open] summary::after {
    background: linear-gradient(#111, #111) center / 12px 1px no-repeat;
    transform: rotate(180deg);
}

.pd-fold-body {
    padding-bottom: 22px;
    animation: authFade .35s ease;
}

.pd-content {
    color: rgb(17 17 17 / 68%);
    font-size: 14px;
    line-height: 1.75;
}

.pd-content p {
    margin: 0 0 12px;
}

.pd-content p:last-child {
    margin-bottom: 0;
}

.pd-content a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-content ul {
    margin: 0 0 12px;
    padding-left: 18px;
}

.pd-specs {
    margin: 0;
}

.pd-specs div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px dashed #ececec;
    font-size: 14px;
}

.pd-specs div:last-child {
    border-bottom: 0;
}

.pd-specs dt {
    color: rgb(17 17 17 / 55%);
    font-weight: 400;
}

.pd-specs dd {
    margin: 0;
    color: #111;
    text-align: right;
}

/* ---- sections below */
.pd-section {
    margin-top: 90px;
    padding-top: 50px;
    border-top: 1px solid #ececec;
}

.pd-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.pd-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #111;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -1px;
}

.pd-section-count {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f6f3ef;
    color: rgb(17 17 17 / 60%);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

.pd-section-link {
    color: #111;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-section-link:hover {
    color: #B4835F;
}

/* reviews */
.pd-reviews-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    gap: 60px;
}

.pd-review-summary {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    border-radius: 18px;
    background: #f6f3ef;
}

.pd-review-avg {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 300;
    letter-spacing: -3px;
    line-height: 1;
}

.pd-review-avg-empty {
    color: rgb(17 17 17 / 25%);
}

.pd-stars-lg {
    margin: 12px 0 6px;
}

.pd-stars-lg svg {
    width: 18px;
    height: 18px;
}

.pd-review-based {
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
}

.pd-review-nudge {
    margin: 14px 0 0;
    color: rgb(17 17 17 / 60%);
    font-size: 14px;
    line-height: 1.6;
}

.pd-review-bars {
    align-self: stretch;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.pd-review-bars li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

.pd-review-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: 28px;
    color: rgb(17 17 17 / 70%);
}

.pd-review-bar-label svg {
    width: 11px;
    height: 11px;
    fill: #B4835F;
}

.pd-review-bar {
    flex: 1 1 auto;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6dfd7;
}

.pd-review-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #111;
}

.pd-review-bar-count {
    width: 22px;
    color: rgb(17 17 17 / 50%);
    text-align: right;
}

.pd-review-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-review {
    padding: 24px 0;
    border-bottom: 1px solid #ececec;
}

.pd-review:first-child {
    padding-top: 0;
}

.pd-review .children {
    margin: 18px 0 0 54px;
    padding: 0;
    list-style: none;
}

.pd-review-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.pd-review-initial {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.pd-review-who {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.pd-review-who strong {
    color: #111;
    font-size: 15px;
    font-weight: 500;
}

.pd-review-who span {
    color: rgb(17 17 17 / 50%);
    font-size: 12px;
}

.pd-verified {
    color: #2d6a32;
    font-style: normal;
    font-weight: 500;
}

.pd-review-text {
    color: rgb(17 17 17 / 75%);
    font-size: 15px;
    line-height: 1.7;
}

.pd-review-text p {
    margin: 0 0 10px;
}

.pd-review-text p:last-child {
    margin-bottom: 0;
}

.pd-review-pending {
    margin: 0 0 10px;
    color: #a2621a;
    font-size: 13px;
}

.pd-review-empty,
.pd-review-note {
    margin: 0 0 24px;
    color: rgb(17 17 17 / 60%);
    font-size: 15px;
}

.pd-review-note a {
    color: #111;
    text-decoration: underline;
}

.pd-review-pages ul {
    display: flex;
    gap: 6px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.pd-review-pages a,
.pd-review-pages span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    border: 1px solid #e3ded8;
    border-radius: 50%;
    color: #111;
    font-size: 13px;
    text-decoration: none;
}

.pd-review-pages .current {
    border-color: #111;
    background: #111;
    color: #fff;
}

.pd-review-form-wrap {
    margin-top: 36px;
    padding: 30px;
    border: 1px solid #ececec;
    border-radius: 18px;
}

.pd-review-form-title {
    margin: 0 0 22px;
    font-size: 20px;
    font-weight: 500;
}

.pd-star-pick {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.pd-star-pick legend {
    margin-bottom: 10px;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

.pd-star-pick .required,
.pd-review-field .required {
    color: #B4835F;
}

/* stars right-to-left so hovering a star lights it and every star before it */
.pd-star-pick-row {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.pd-star-pick-row input {
    position: absolute;
    opacity: 0;
}

.pd-star-pick-row label {
    margin: 0;
    cursor: pointer;
}

.pd-star-pick-row svg {
    display: block;
    width: 30px;
    height: 30px;
    fill: #e6dfd7;
    transition: fill .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.pd-star-pick-row label:hover svg,
.pd-star-pick-row label:hover ~ label svg,
.pd-star-pick-row input:checked ~ label svg {
    fill: #B4835F;
}

.pd-star-pick-row label:hover svg {
    transform: scale(1.15);
}

.pd-star-pick-row input:focus-visible + label {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
    border-radius: 4px;
}

.pd-star-pick-text {
    margin-left: 12px;
    color: rgb(17 17 17 / 55%);
    font-size: 13px;
    vertical-align: super;
}

.pd-review-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pd-review-field {
    margin-bottom: 16px;
}

.pd-review-field label {
    display: block;
    margin-bottom: 8px;
    color: #111;
    font-size: 13px;
    font-weight: 500;
}

.pd-review-field input,
.pd-review-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    background: #fff;
    color: #111;
    font-size: 15px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.pd-review-field textarea {
    min-height: 130px;
    resize: vertical;
}

.pd-review-field input:focus,
.pd-review-field textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 4px rgb(17 17 17 / 6%);
    outline: none;
}

.pd-review-submit {
    margin-top: 4px;
}

/* ---- full-screen viewer */
.pd-viewer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 90px;
    background: rgb(17 14 12 / 94%);
    opacity: 0;
    transition: opacity .3s ease;
}

.pd-viewer.is-open {
    opacity: 1;
}

.pd-locked,
.pd-locked body {
    overflow: hidden;
}

.pd-viewer-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
    transform: scale(.97);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.pd-viewer.is-open .pd-viewer-img {
    transform: scale(1);
}

.pd-viewer-close,
.pd-viewer-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 50%;
    background: none;
    color: #fff;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.pd-viewer-close:hover,
.pd-viewer-nav:hover {
    background: #fff;
    color: #111;
}

.pd-viewer-close svg,
.pd-viewer-nav svg {
    width: 22px;
    height: 22px;
}

.pd-viewer-close {
    top: 24px;
    right: 24px;
}

.pd-viewer-prev {
    left: 24px;
}

.pd-viewer-next {
    right: 24px;
}

.pd-viewer.is-single .pd-viewer-nav {
    display: none;
}

.pd-viewer-count {
    position: absolute;
    bottom: 24px;
    left: 50%;
    color: rgb(255 255 255 / 70%);
    font-size: 13px;
    letter-spacing: 1px;
    transform: translateX(-50%);
}

.pd-crumbs a:focus-visible,
.pd-cat:focus-visible,
.pd-rating:focus-visible,
.pd-chip:focus-visible,
.pd-wish:focus-visible,
.pd .single_add_to_cart_button:focus-visible,
.pd .single-qty-btn:focus-visible,
.pd-fold summary:focus-visible,
.pd-section-link:focus-visible,
.pd-viewer-close:focus-visible,
.pd-viewer-nav:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* ---- reference-style info pieces */
.pd-tag {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f3f0ec;
    color: #111;
    font-size: 12px;
    font-weight: 500;
}

.pd-title {
    margin-bottom: 12px;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -1.5px;
}

.pd-rating {
    margin-bottom: 20px;
    color: rgb(17 17 17 / 65%);
    font-size: 14px;
}

.pd-rating .pd-stars svg {
    width: 16px;
    height: 16px;
}

.pd-rating .pd-stars svg.is-on {
    fill: #111;
}

/* price: new price large, old price muted after it, soft "% off" pill, then a quiet saving line */
.pd-price-block {
    margin-bottom: 22px;
}

.pd-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 0;
}

/* like the reference: bold price, muted old price, compact black tag, even 14px gaps */
.pd-price {
    gap: 12px;
    color: #111;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1;
}

/* new price first, old price after it, like the reference */
.pd-price {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}

.pd-price ins {
    order: 1;
}

.pd-price del {
    order: 2;
    margin: 0;
    color: rgb(17 17 17 / 40%);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration-thickness: 1px;
}

.pd-price ins {
    font-weight: 600;
    text-decoration: none;
}

/* WooCommerce's spoken price text stays for screen readers only */
.pd-price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pd-off {
    padding: 5px 9px;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-transform: uppercase;
}

.pd-price-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    color: rgb(17 17 17 / 50%);
    font-size: 13px;
}

.pd-short {
    padding-bottom: 24px;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
}

.pd-buy {
    padding-top: 6px;
    border-top: 0;
}

/* "Size: M" label row with the size guide on the right */
.pd .variations_form .variations .label {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pd .variations_form .variations .label label {
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.pd .variations_form .variations .label label {
    gap: 0;
}

.pd .variations_form .variations .label label::after {
    content: ':';
}

/* "Size: M" — the chosen value after the colon */
.pd-chosen {
    order: 2;
    margin-left: 6px;
    color: #111;
    font-size: 14px;
    font-weight: 400;
}

.pd-size-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-size-guide:hover {
    color: #B4835F;
}

.pd-size-guide svg {
    width: 16px;
    height: 16px;
}

.pd-chip {
    min-width: 56px;
    height: 46px;
    border-radius: 10px;
}

.pd-chips-color .pd-chip {
    width: 44px;
    height: 44px;
}

/* the chosen size's stock is shown by the theme's own note */
.pd .woocommerce-variation-availability {
    display: none;
}

/* no quantity box: Add to Cart + square heart, like the reference (quantity changes in the cart) */
.pd .single-product-quantity {
    display: none;
}

.pd .single_add_to_cart_button {
    height: 60px;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: 1px;
}

.pd .single_add_to_cart_button.disabled {
    border-color: #111;
    background: #111;
    opacity: .55;
}

.pd-wish {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    margin: 0;
    border: 1px solid #e3ded8;
    border-radius: 12px;
    font-size: 0;
}

.pd-wish i {
    font-size: 20px;
}

.pd-wish:hover {
    border-color: #111;
}

.pd-wish.active {
    border-color: #ead9c9;
    background: #fbf6f1;
    color: #B4835F;
}

/* perks: three short items in one row */
.pd-perks {
    gap: 12px;
    margin-top: 22px;
    padding: 0;
    border: 0;
}

.pd-perks li {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
}

.pd-perks svg {
    width: 24px;
    height: 24px;
    color: #111;
}

.pd-perks strong {
    display: block;
    margin-bottom: 2px;
    color: #111;
    font-size: 12px;
    font-weight: 600;
}

/* ---- details tabs + lifestyle photo */
.pd-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 50px;
    margin-top: 80px;
}

.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pd-tabs-nav {
    position: relative;
    display: flex;
    gap: 34px;
    margin-bottom: 26px;
    border-bottom: 1px solid #ececec;
    overflow-x: auto;
    scrollbar-width: none;
}

.pd-tabs-nav::-webkit-scrollbar {
    display: none;
}

.pd-tab {
    flex-shrink: 0;
    padding: 0 0 16px;
    border: 0;
    background: none;
    color: rgb(17 17 17 / 55%);
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: color .3s ease;
}

.pd-tab:hover {
    color: #111;
}

.pd-tab.is-active {
    color: #111;
    font-weight: 600;
}

/* sliding underline under the active tab */
.pd-tabs-line {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: #111;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), width .4s cubic-bezier(.65, 0, .35, 1);
}

.pd-tab-panel {
    animation: authFade .35s ease;
}

.pd-tab-panel.pd-content {
    max-width: 560px;
    font-size: 15px;
}

.pd-tab-panel .pd-specs {
    max-width: 560px;
}

.pd-ship-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pd-ship-list li {
    padding: 12px 0;
    border-bottom: 1px dashed #ececec;
}

.pd-ship-list strong {
    display: block;
    margin-bottom: 2px;
    color: #111;
    font-weight: 500;
}

.pd-about-photo {
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #ece7e1;
    aspect-ratio: 3 / 2;
}

.pd-about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.pd-about-photo:hover img {
    transform: scale(1.04);
}

.pd-thumb:focus-visible,
.pd-thumbs-more:focus-visible,
.pd-main:focus-visible,
.pd-tab:focus-visible,
.pd-size-guide:focus-visible {
    outline: 2px solid #B4835F;
    outline-offset: 2px;
}

/* product page ends */

/* legal and faq pages starts */

.legal,
.faq {
    padding: 140px 0 100px;
    background: #fff;
    color: #111;
}

.legal-head {
    max-width: 820px;
    margin-bottom: 50px;
    padding-bottom: 34px;
    border-bottom: 1px solid #ececec;
}

.legal-eyebrow {
    margin-bottom: 16px;
    color: #111;
    font-size: 12px;
}

.legal-title, .faq-title {
    margin: 0 0 16px;
    color: #111;
    font-size: 58px;
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #5c5751;
    font-size: 14px;
}

.legal-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgb(17 17 17 / 30%);
}

.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 80px;
}
.legal-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.legal-side-label {
    display: block;
    margin-bottom: 14px;
    color: #111111d3;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.legal-toc ol,
.legal-others ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-toc ol {
    border-left: 1px solid #ececec;
}

.legal-toc a {
    position: relative;
    display: block;
    padding: 8px 0 8px 16px;
    color: #5c5751;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    transition: color .3s ease;
}

.legal-toc a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: #111;
    transform: scaleY(0);
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.legal-toc a:hover {
    color: #111;
    text-decoration: none;
}

.legal-toc a.is-active {
    color: #111;
    font-weight: 500;
}

.legal-toc a.is-active::before {
    transform: scaleY(1);
}

.legal-others a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #ebe6e0;
    color: #4a4540;
    font-size: 14px;
    text-decoration: none;
    transition: color .3s ease;
}

.legal-others a::after {
    content: '→';
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .3s ease, transform .3s ease;
}

.legal-others a:hover {
    color: #111;
    text-decoration: none;
}

.legal-others a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.legal-others a.is-current {
    color: #111;
    font-weight: 500;
}

.legal-content {
    max-width: 720px;
    color: #3d3a37;
    font-size: 16px;
    line-height: 1.75;
}

.legal-content > *:first-child {
    margin-top: 0;
}

.legal-content p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.75;
}

.legal-content h2 {
    margin: 40px 0 16px;
    color: #111;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.5px;
    line-height: 1.25;
    scroll-margin-top: 120px;
}

.legal-content h3 {
    margin: 32px 0 12px;
    color: #111;
    font-size: 20px;
    font-weight: 500;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.legal-content ul li,
.legal-content ol li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.5;
}

.legal-content ul li::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B4835F;
}

.legal-content ol {
    counter-reset: legal;
}

.legal-content ol li {
    counter-increment: legal;
}

.legal-content ol li::before {
    content: counter(legal) '.';
    position: absolute;
    left: 0;
    color: #8a5d3b;
    font-weight: 600;
}

.legal-content strong {
    color: #111;
    font-weight: 600;
}

.legal-content a {
    color: #111;
    text-decoration: underline;
    text-decoration-color: #B4835F;
    text-underline-offset: 3px;
}

.legal-content a:hover {
    color: #8a5d3b;
}

/* contact section after the policy text: open and light, no boxes. A dark hairline on top, the heading
   and the button on one row, then the ways to reach us as plain columns split by faint vertical lines */
.legal-contact {
    margin-top: 90px;
    padding-top: 48px;
    border-top: 1px solid #111;
    color: #111;
}

.legal-contact-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
}

.legal-contact-title {
    margin: 0 0 12px;
    color: #111;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: -1.4px;
    line-height: 1.1;
}

.legal-contact-text {
    max-width: 480px;
    margin: 0;
    color: #5c5751;
    font-size: 16px;
    line-height: 1.7;
}

.legal-contact-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.legal-contact-btn:hover svg {
    transform: translateX(4px);
}

.legal-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px 40px;
}

.legal-contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-left: 20px;
    border-left: 1px solid rgb(17 17 17 / 12%);
    color: #111;
    text-decoration: none;
}

a.legal-contact-card:hover {
    color: #111;
    text-decoration: none;
}

.legal-contact-icon {
    display: flex;
    margin-bottom: 14px;
    color: #B4835F;
}

.legal-contact-icon svg {
    width: 22px;
    height: 22px;
}

.legal-contact-label {
    color: #5c5751;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* the value underlines itself on hover */
.legal-contact-value {
    color: #111;
    font-size: 17px;
    font-weight: 500;
    word-break: break-word;
    background: linear-gradient(#111, #111) left bottom / 0 1px no-repeat;
    transition: background-size .4s cubic-bezier(.22, 1, .36, 1);
}

a.legal-contact-card:hover .legal-contact-value {
    background-size: 100% 1px;
}

.legal-contact-address {
    color: rgb(17 17 17 / 75%);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.legal-contact-note {
    margin-top: 2px;
    color: #5c5751;
    font-size: 13px;
}

.legal-contact-card:focus-visible {
    outline: 2px solid #111;
    outline-offset: 4px;
}

/* ---- faq */
.faq-head {
    max-width: 680px;
    margin-bottom: 50px;
}

.faq-lead {
    margin: 0;
    color: #4a4540;
    font-size: 17px;
    line-height: 1.7;
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 60px;
}

.faq-list {
    border-top: 1px solid #ececec;
}

.faq-item {
    border-bottom: 1px solid #ececec;
}

.faq-item[hidden] {
    display: none;
}

.faq-q {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 0;
    list-style: none;
    cursor: pointer;
}

.faq-q::-webkit-details-marker {
    display: none;
}

.faq-num {
    flex-shrink: 0;
    width: 44px;
    color: #8a5d3b;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}

.faq-q-text {
    flex: 1 1 auto;
    margin: 0;
    color: #111;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.2px;
    line-height: 1.35;
    transition: color .3s ease;
}

.faq-q:hover .faq-q-text {
    color: #8a5d3b;
}

/* plus turns into a minus */
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #e3ded8;
    border-radius: 50%;
    transition: background-color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.65, 0, .35, 1);
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    margin: -.75px 0 0 -6px;
    background: #111;
    transition: transform .4s cubic-bezier(.65, 0, .35, 1), background-color .3s ease;
}

.faq-icon::after {
    transform: rotate(90deg);
}

.faq-item[open] .faq-icon {
    border-color: #111;
    background: #111;
}

.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after {
    background: #fff;
}

.faq-item[open] .faq-icon::after {
    transform: rotate(0);
}

.faq-a {
    max-width: 660px;
    padding: 0 52px 28px 46px;
    color: #3d3a37;
    font-size: 16px;
    line-height: 1.5;
    animation: authFade .35s ease;
}

.faq-a p {
    font-size: 16px;
    line-height: 1.5;
    color: #3d3a37;
    margin: 0 0 12px;
}

.faq-a p:last-child {
    margin-bottom: 0;
}

.faq-a a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq-none-text {
    margin: 0;
    color: #5c5751;
    font-size: 14px;
}

.faq-none-text a {
    color: #111;
    text-decoration: underline;
}

.faq-side {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-card {
    padding: 28px;
    border-radius: 18px;
    background: #f6f3ef;
}

.faq-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #fff;
    color: #B4835F;
}

.faq-card-icon svg {
    width: 24px;
    height: 24px;
}

.faq-card-title {
    margin: 0 0 6px;
    color: #111;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
}

.faq-card-text {
    margin: 0 0 18px;
    color: #4a4540;
    font-size: 15px;
    line-height: 1.6;
}

.faq-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.faq-card-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.faq-card-list svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #5c5751;
}

.faq-card-list a {
    color: #111;
    text-decoration: none;
    word-break: break-all;
}

.faq-card-list a:hover {
    color: #8a5d3b;
    text-decoration: none;
}

.faq-card-btn {
    width: 100%;
}

.faq-quick {
    padding: 22px 24px;
    border: 1px solid #ececec;
    border-radius: 18px;
}

.faq-quick a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #ebe6e0;
    color: #111111;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.faq-quick a:last-child {
    border-bottom: 0;
}

.faq-quick a::after {
    content: '→';
    color: #6b665f;
    transition: transform .3s ease, color .3s ease;
}

.faq-quick a:hover {
    color: #111;
    text-decoration: none;
}

.faq-quick a:hover::after {
    color: #111;
    transform: translateX(3px);
}

.legal-toc a:focus-visible,
.legal-others a:focus-visible,
.legal-content a:focus-visible,
.faq-q:focus-visible,
.faq-quick a:focus-visible,
.faq-card-list a:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
    border-radius: 4px;
}

/* legal and faq pages ends */

/* contact page starts */

.contact-us-wrap {
    padding: 220px 0 110px;
    background: #fff;
}

.contact-us-hero {
    margin-bottom: 120px;
    text-align: center;
}

.contact-us-word {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #111;
    font-size: clamp(120px, 24vw, 370px);
    font-weight: 500;
    letter-spacing: -23px;
    line-height: 1;
    white-space: nowrap;
}

.contact-us-word-text {
    position: relative;
    z-index: 0;
    display: block;
}

.contact-us-word-outline {
    position: absolute;
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
    pointer-events: none;
}

.contact-us-word-img {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    background: #f6f3ef;
}

.contact-us-word-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-us-word-img-1 {
    top: 55%;
    left: 10%;
    width: 20%;
    aspect-ratio: 1 / 1;
}

.contact-us-word-img-2 {
    top: -10%;
    left: 36%;
    width: 32%;
    aspect-ratio: 1/1;
    z-index: 1;
}

.contact-us-word-img-3 {
    top: 46%;
    left: 74%;
    width: 22%;
    aspect-ratio: 1 / 1;
}

.contact-us-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ece6df;
}

.contact-us-title {
    max-width: 760px;
    margin: 0;
    color: #111;
    font-size: 52px;
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1.08;
}

.contact-us-lead {
    max-width: 520px;
    margin: 18px 0 0;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}

.contact-us-badge {
    position: relative;
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    color: #111 !important;
    text-decoration: none;
}

.contact-us-badge-ring {
    width: 100%;
    height: 100%;
    animation: contact-us-spin 14s linear infinite;
}

.contact-us-badge-ring text {
    fill: currentColor;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.contact-us-badge-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    transform: translate(-50%, -50%);
    transition: background-color .4s ease;
}

.contact-us-badge-dot svg {
    width: 22px;
    height: 22px;
    transform: rotate(90deg);
    transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}

.contact-us-badge:hover .contact-us-badge-dot {
    background: #B4835F;
}

.contact-us-badge:hover .contact-us-badge-dot svg {
    transform: rotate(135deg);
}

.contact-us-badge:focus-visible {
    border-radius: 50%;
    outline: 2px solid #B4835F;
    outline-offset: 4px;
}

@keyframes contact-us-spin {
    to {
        transform: rotate(360deg);
    }
}

/* form + details card */
.contact-us-row {
    row-gap: 24px;
}

.contact-us-row > div {
    display: flex;
}

/* form panel */
.contact-us-form > .wpcf7 {
    width: 100%;
    padding: 44px;
    border-radius: 28px;
    background: #f7f4f0;
}

.contact-us-cf7 p {
    display: contents;
}

.contact-us-fields {
    row-gap: 24px;
}

.contact-us-field label {
    margin: 0;
    color: #111111b3;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.contact-us-field label span {
    color: #8a5d3b;
}

.contact-us-field .wpcf7-form-control-wrap {
    display: block;
}

.contact-us-field input, .contact-us-field textarea {
    display: block;
    width: 100%;
    height: 54px;
    padding: 8px 18px;
    border: 1px solid #e6dfd6;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.contact-us-field textarea {
    height: 160px;
    padding: 15px 18px;
    line-height: 1.6;
    resize: vertical;
}

.contact-us-field input::placeholder,
.contact-us-field textarea::placeholder {
    color: #767676;
}

.contact-us-field input:hover,
.contact-us-field textarea:hover {
    border-color: #cfc5b8;
}

.contact-us-field input:focus,
.contact-us-field textarea:focus {
    border-color: #111;
    outline: none;
    box-shadow: 0 0 0 4px rgb(180 131 95 / 18%);
}

.contact-us-field .wpcf7-not-valid {
    border-color: #b3261e;
}

.contact-us-cf7 .wpcf7-not-valid-tip {
    margin-top: 7px;
    color: #b3261e;
    font-size: 12px;
}

.contact-us-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
}

.contact-us-send {
    height: 54px;
    padding: 0 32px;
    border-radius: 40px;
}

.contact-us-send-arrow {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #111 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 17L17 7%22/%3E%3Cpath d=%22M8 7h9v9%22/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: background-color .5s cubic-bezier(.65, 0, .35, 1), transform .5s cubic-bezier(.65, 0, .35, 1);
}

.contact-us-submit:hover .contact-us-send-arrow,
.contact-us-submit:focus-within .contact-us-send-arrow {
    background-color: #B4835F;
    transform: rotate(45deg);
}

.contact-us-note {
    margin-left: auto;
    color: #5c5c5c;
    font-size: 13px;
}

.contact-us-cf7 .wpcf7-spinner {
    margin: 0 0 0 14px;
}

.contact-us-cf7 .wpcf7-response-output {
    margin: 22px 0 0 !important;
    padding: 14px 18px !important;
    border: 1px solid #e3ded8 !important;
    border-radius: 12px;
    background: #fff;
    color: #111;
    font-size: 14px;
}

.contact-us-cf7.sent .wpcf7-response-output {
    border-color: #2e7d32 !important;
    background: #edf7ee;
    color: #1b5e20;
}

.contact-us-cf7.invalid .wpcf7-response-output,
.contact-us-cf7.failed .wpcf7-response-output {
    border-color: #b3261e !important;
    background: #fdf0ef;
    color: #8c1d18;
}

/* details: open and light like the policy pages' contact section, no box. On desktop the column sits
   beside the form, split from it by a faint line; the bronze icons carry the accent */
.contact-us-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 0 0 40px;
    border-left: 1px solid rgb(17 17 17 / 12%);
    color: #111;
}

.contact-us-block + .contact-us-block {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgb(17 17 17 / 12%);
}

/* socials pinned to the bottom so the column matches the form height */
.contact-us-block-social {
    margin-top: auto !important;
}

.contact-us-block-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: #111;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -.3px;
}

.contact-us-block-icon {
    display: flex;
    flex: 0 0 auto;
    color: #B4835F;
}

.contact-us-block-icon svg {
    width: 22px;
    height: 22px;
}

/* links underline themselves on hover */
.contact-us-card a {
    color: #111;
    text-decoration: none;
    background-image: linear-gradient(#111, #111);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size .4s cubic-bezier(.65, 0, .35, 1);
}

.contact-us-card a:hover {
    color: #111;
    background-size: 100% 1px;
}

.contact-us-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-us-lines li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    font-size: 15px;
}

.contact-us-lines li span {
    flex: 0 0 auto;
    min-width: 86px;
    color: #5c5751;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.contact-us-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-us-card .contact-us-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgb(17 17 17 / 15%);
    border-radius: 50%;
    background-image: none;
    color: #111;
    font-size: 16px;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}

.contact-us-card .contact-us-socials a:hover {
    border-color: #111;
    background-color: #111;
    color: #fff;
    transform: translateY(-3px);
}

.contact-us-card a:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

/* contact page ends */

/* about page start */

/* about banner starts */

.about-banner-wrap {
    position: relative;
    height: calc(100vh - 90px);
    min-height: 560px;
    max-height: 920px;
    margin-top: 90px;
    overflow: hidden;
    background: #161412;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

.about-banner-wrap.is-plain {
    height: 560px;
    background: #b8401f;
}

.about-banner-wrap .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

/* hidden until page-about-animation.js marks the banner .is-ready (as its intro starts); if the script
   never runs it shows anyway after 2.5s */
.about-banner-wrap:not(.is-ready) .about-banner-media,
.about-banner-wrap:not(.is-ready) .about-banner-content {
    visibility: hidden;
    animation: about-banner-show 0s 2.5s forwards;
}

@keyframes about-banner-show {
    to {
        visibility: visible;
    }
}

.about-banner-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* a little larger than the frame, so it can drift on scroll / mouse without showing an edge */
.about-banner-img {
    position: absolute;
    top: -6%;
    left: -3%;
    display: block;
    width: 106%;
    height: 112%;
    max-width: none;
    object-fit: cover;
    will-change: transform;
}

/* soft shade top and bottom so the captions read over any photo */
.about-banner-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(70% 60% at 0% 100%, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 0%) 70%),
        linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 0%) 26%, rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 40%) 100%),
        radial-gradient(120% 90% at 50% 50%, rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 22%) 100%);
    pointer-events: none;
}

.about-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 44px 56px 52px;
}

/* top row: small label left, big heading right; bottom row: lead + paragraph, bottom left */
.about-banner-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    will-change: transform;
}

.about-banner-eyebrow,
.about-banner-title,
.about-banner-lead,
.about-banner-text {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-shadow: 0 1px 18px rgb(0 0 0 / 22%);
}

.about-banner-eyebrow {
    padding-top: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3.6px;
    line-height: 1.3;
    text-transform: uppercase;
    color: rgb(255 255 255 / 86%);
    white-space: nowrap;
}

.about-banner-title {
    position: absolute;
    top: 80px;
    right: 0;
    max-width: 530px;
    font-size: 100px;
    font-weight: 500;
    letter-spacing: -4.5px;
    line-height: .92;
}

.about-banner-intro {
    max-width: 420px;
}

.about-banner-lead {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.18;
    text-wrap: balance;
}

.about-banner-text {
    margin-top: 18px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: rgb(255 255 255 / 84%);
}

/* words split by the script rise out of a mask; a little room so descenders aren't clipped */
.about-banner-word {
    display: inline-block;
    overflow: hidden;
    padding: 0 3px 6px 0;
    margin: 0 -3px -6px 0;
    vertical-align: top;
}

.about-banner-word-inner {
    display: inline-block;
    will-change: transform;
}

/* about banner ends */

/* about intro starts */

.about-intro-wrap {
    padding: 120px 0 90px;
    background: #ffffff;
    color: #111;
    overflow: hidden;
}

.about-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

.about-intro-eyebrow {
    margin-bottom: 40px;
}

.about-intro-para {
    margin: 0;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -1px;
    text-wrap: balance;
}

.about-intro-word {
    display: inline-block;
}

.about-intro-strip {
    margin-top: 120px;
    overflow: hidden;
}

.about-intro-track {
    display: flex;
    width: max-content;
}

.about-intro-list {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 0 18px 0 0;
    list-style: none;
}

.about-intro-item {
    flex: 0 0 auto;
    width: 240px;
}

.about-intro-card {
    display: block;
    overflow: hidden;
    background: #ede8e1;
}

.about-intro-card.is-square {
    aspect-ratio: 1 / 1;
}

.about-intro-card.is-portrait {
    aspect-ratio: 3 / 4;
}

.about-intro-card.is-landscape {
    aspect-ratio: 4 / 3;
}

.about-intro-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* about intro ends */

/* about story starts */

.about-story-wrap {
    padding: 120px 0 140px;
    background: #ffffff;
    color: #111;
}

.about-story-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #111;
    margin-bottom: 60px;
}

.about-story-tag {
    justify-self: start;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid #111;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.2;
}

.about-story-title {
    margin: 0;
    padding-left: 40px;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 78px;
    font-weight: 400;
    line-height: .95;
    letter-spacing: -4px;
}

.about-story-word {
    display: inline-block;
    overflow: hidden;
    padding-bottom: 6px;
    vertical-align: top;
}

.about-story-word > span {
    display: inline-block;
}

.about-story-media {
    position: sticky;
    top: 110px;
}

.about-story-media.has-both {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
    gap: 14px;
}

.about-story-frame {
    overflow: hidden;
    background: #ede8e1;
    aspect-ratio: 4 / 5;
}

.about-story-frame-video {
    aspect-ratio: 3 / 4;
}

.about-story-img,
.about-story-video {
    display: block;
    width: 100%;
    height: 116%;
    margin-top: -8%;
    object-fit: cover;
}

.about-story-col-text {
    padding-left: 40px;
}

.about-story-body {
    max-width: 620px;
}

.about-story-body > *:last-child {
    margin-bottom: 0;
}

.about-story-body p {
    margin: 0 0 26px;
    color: #111;
    font-size: 20px;
    line-height: 1.35;
}

.about-story-body h2,
.about-story-body h3,
.about-story-body h4 {
    margin: 40px 0 16px;
    color: #111;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.5px;
}

.about-story-body a {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* about story ends */

/* about counter starts */

/* one quiet row of figures between two hairlines */
.about-counter-wrap {
    padding: 40px 0 120px;
    background: #ffffff;
    color: #111;
}

.about-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    padding: 56px 0;
    border-top: 1px solid rgb(17 17 17 / 12%);
    border-bottom: 1px solid rgb(17 17 17 / 12%);
}

.about-counter-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-counter-value {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* labels come in mixed case from the field: show them all as sentence case */
.about-counter-label {
    display: inline-block;
    color: rgb(17 17 17 / 55%);
    font-size: 14px;
    text-transform: lowercase;
}

.about-counter-label::first-letter {
    text-transform: uppercase;
}

/* about counter ends */

/* about approach starts */

/* pinned by JS for one screen per step: the photo swaps in the middle, the giant titles slide past it */
.about-approach-wrap {
    background: #ffffff;
    color: #111;
    overflow: hidden;
}

.about-approach-stage {
    position: relative;
    height: 100vh;
    min-height: 680px;
}

.about-approach-title {
    position: absolute;
    top: 96px;
    left: 0;
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: #111;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 130px;
    font-weight: 400;
    line-height: .85;
    letter-spacing: -6px;
    text-transform: lowercase;
}

.about-approach-media {
    position: absolute;
    top: 53%;
    left: 50%;
    z-index: 1;
    width: 420px;
    aspect-ratio: 3/4;
    transform: translate(-50%, -50%);
    background: #ede8e1;
}

.about-approach-media-item {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.about-approach-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-approach-titles {
    position: absolute;
    top: 53%;
    left: 0;
    z-index: 2;
    width: 100%;
    transform: translateY(-50%);
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
}

.about-approach-titles-row {
    display: flex;
    gap: 140px;
    width: max-content;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -4px;
    white-space: nowrap;
}

.about-approach-foot {
    position: absolute;
    bottom: 60px;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 40px;
}

.about-approach-rail {
    position: relative;
    grid-column: 1 / -1;
    height: 1px;
    margin-bottom: 22px;
    background: rgb(17 17 17 / 15%);
}

.about-approach-rail-fill {
    position: absolute;
    inset: 0;
    background: #111;
    transform: scaleX(0);
    transform-origin: left center;
}

.about-approach-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-approach-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.about-approach-count-window {
    display: block;
    height: 16px;
    overflow: hidden;
}

.about-approach-count-reel {
    display: flex;
    flex-direction: column;
}

.about-approach-count-reel span {
    display: block;
    height: 16px;
    line-height: 16px;
}

.about-approach-count-sep {
    width: 24px;
    height: 1px;
    background: #111;
}

.about-approach-texts {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 460px;
    min-height: 82px;
}

.about-approach-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    color: #111;
    font-size: 20px;
    line-height: 1.35;
    visibility: hidden;
}

.about-approach-text.is-active {
    visibility: visible;
}

/* words are split by JS so they can rise in */
.about-approach-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.about-approach-word > span {
    display: inline-block;
}

/* about approach ends */

/* about page ends */


@media (hover: hover) {
    /* about intro */

    .about-intro-card:hover .about-intro-img {
        transform: scale(1.05);
    }

    /* quick add */

    .qa-row-add {
        display: block;
    }

    .qa-row:hover:not(:disabled) {
        padding-left: 30px;
        background: #f7f3ee;
    }

    .qa-row:hover:not(:disabled) .qa-row-add {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (hover: none) {
    /* top & bottom wears */

    /* touch screens have no hover, so keep the image clean and let the card link do the work */

    .wear-card-actions {
        display: none;
    }
}

/* touch-first devices (no hover, or a finger as the main pointer): no cursor dot at any width. cursor.js
   already skips them; this also covers touch laptops and tablets that report a fine pointer */
@media (hover: none), (pointer: coarse) {
    .cursor-dot {
        display: none !important;
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    /* header */

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* login and register */

    .auth-panel:not([hidden]) {
        animation: none;
    }

    .auth-switch-pill {
        transition: none;
    }

    /* legends film */

    .legends-film-rec {
        animation: none;
    }

    /* shop */

    .shop-knob,
    .shop-sort-down,
    .shop-sort-up {
        transition: none;
        animation: none !important;
    }

    .shop-sort-menu,
    .shop-sort-menu li,
    .shop-sort-option::before {
        transition: none;
    }

    .shop-drawer,
    .shop-overlay,
    .shop-sort-menu,
    .shop-tab::after,
    .shop-terms,
    .shop-sticky,
    .shop-head,
    .shop-title {
        transition: none;
        animation: none;
    }

    /* campaign */

    .campaign-ring-text,
    .campaign-ring-star {
        animation: none;
    }

    /* quick view */

    .qv-overlay,
    .qv-dialog,
    .qv-main-img {
        transition: none;
    }

    .qv-attr.is-missing .qv-options {
        animation: none;
    }

    /* quick add */

    .qa-overlay,
    .qa-dialog,
    .qa-row,
    .qa-row-add {
        transition: none;
    }

    .qa-done-mark {
        animation: none;
    }

    .qa-done-mark svg {
        stroke-dashoffset: 0;
        animation: none;
    }

    /* new arrivals */

    .new-arrival-pulse::after {
        animation: none;
    }

    .new-arrival-slider-track,
    .new-arrival-slide .new-arrival-feature-img,
    .new-arrival-slide .new-arrival-feature-caption,
    .new-arrival-slider-progress span {
        transition: none;
    }

    /* account */

    .acc-icon {
        animation: none !important;
    }

    /* cart */

    .cart-ship-fill {
        animation: none;
    }

    .wish-grid .wear-col {
        transition: none;
    }

    .cart-void-text > *,
    .cart-void-tile {
        animation: none;
    }

    /* checkout */

    .co-thanks-icon,
    .co-thanks-check {
        animation: none;
        stroke-dashoffset: 0;
    }

    /* product page */

    .pd-main img,
    .pd-zoom,
    .pd-viewer,
    .pd-viewer-img,
    .pd-chip,
    .pd-star-pick-row svg {
        transition: none;
    }

    .pd-stock-dot::after,
    .pd-fold-body {
        animation: none;
    }

    /* legal and faq pages */

    .faq-a {
        animation: none;
    }

    .legal-toc a::before,
    .legal-others a::after,
    .faq-icon,
    .faq-icon::before,
    .faq-icon::after,
    .legal-contact-card {
        transition: none;
    }

    /* contact page */

    .contact-us-badge-ring {
        animation: none;
    }

    /* about intro */

    .about-intro-strip {
        overflow-x: auto;
    }

    .about-intro-list[aria-hidden="true"] {
        display: none;
    }

    .about-intro-img {
        transition: none;
    }
}

@media only screen and (min-width: 300px) and (max-width: 575.98px) {

/* common styles for all pages on small screens start */

/* same side gutter as the header */
.custom-container {
    padding-right: 16px !important;
    padding-left: 16px !important;
}

/* no cursor dot at phone width, even when a mouse is attached (narrow desktop window, dev tools) */
.cursor-dot {
    display: none;
}

/* page loader & transition: the brand name fits on one line, with a smaller counter and photo stack */

.page-loader {
    padding: 0 16px;
}

.page-loader-word {
    font-size: 30px;
    letter-spacing: -1px;
}

.page-loader-space {
    width: 9px;
}

.page-loader-char {
    padding-bottom: 3px;
}

.page-loader-count {
    top: -24px;
    right: 0;
    font-size: 14px;
}

.page-loader-photo {
    width: 110px;
}

/* eyebrow: tighter, with shorter side lines, so the label stays on one line */
.eyebrow {
    gap: 8px;
    letter-spacing: 3px;
}

.eyebrow-line {
    width: 16px;
}

/* bottom bar: a frosted panel of shortcuts floating over the page, a separate wishlist tile beside it and a
   back-to-top button above its right end once the page is scrolled */
.mobile-bar {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 100;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.mobile-bar-main,
.mobile-bar-side {
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
    background: rgb(255 255 255 / 80%);
    box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.mobile-bar-main {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    padding: 5px;
}

.mobile-bar-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #111111;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.mobile-bar-item svg {
    display: block;
    width: 22px;
    height: 22px;
}

.mobile-bar-item.is-active,
html.mega-menu-primary-off-canvas-open .mobile-bar-menu {
    background: rgb(180 131 95 / 20%);
    color: #111111;
}

/* while the menu is open, Menu is the only highlighted shortcut */
html.mega-menu-primary-off-canvas-open .mobile-bar-main .mobile-bar-item.is-active {
    background: none;
}

/* the wishlist tile is an item and a panel at once: restate the panel look the item rule clears */
.mobile-bar .mobile-bar-side {
    flex: 0 0 66px;
    padding: 5px;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
    background: rgb(255 255 255 / 80%);
}

.mobile-bar .mobile-bar-side.is-active {
    background: rgb(244 232 222 / 92%);
}

.mobile-bar-icon {
    position: relative;
}

.mobile-bar-icon .cart-count {
    top: -6px;
    right: -10px;
}

.mobile-bar-top {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #B4835F;
    color: #ffffff;
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    pointer-events: auto;
}

.mobile-bar-top svg {
    width: 20px;
    height: 20px;
}

.mobile-bar.is-scrolled .mobile-bar-top {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* room under the footer so the bar never covers its last lines */
.footer-wrapper {
    padding-bottom: 92px;
}

/* common styles for all pages on small screens ends */

/* home page start */

/* header section start */

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 0 16px !important;
}

.header-nav {
    order: 1;
    justify-self: start;
}

.header-logo {
    order: 2;
}

.header-user-actions {
    order: 3;
    justify-self: end;
    gap: 18px;
}

.header-user-actions .header-icon:nth-child(n+3) {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle {
    justify-content: flex-start;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-left,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-center,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right {
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
    transform: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box {
    width: 22px;
    height: 16px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    width: 22px;
    height: 1.5px;
    border-radius: 0;
    background-color: #111;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    top: 0;
    margin-top: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
    top: 7px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    top: 14px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    transform: translate3d(0, 7px, 0) rotate(45deg);
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg);
}

.header-logo img {
    height: 55px;
    max-width: 115px;
}

.f-nav .header-logo img {
    height: 55px;
}

html.mega-menu-primary-off-canvas-open .header-wrapper {
    background: #ffffff;
}

html.mega-menu-primary-off-canvas-open .header-user-actions .search-toggle {
    visibility: hidden;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    top: 65px;
    right: auto;
    left: -100%;
    width: 100%;
    height: calc(100dvh - 65px);
    max-height: calc(100dvh - 65px);
    justify-content: flex-start;
    gap: 0;
    padding: 16px 0 110px;
    background: #ffffff;
}

/* the panel scrolls on its own (its height is fixed to the screen), without showing a scrollbar;
   contain keeps the page behind from scrolling once the panel reaches its end */
.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary::-webkit-scrollbar {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    right: auto;
    left: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open::after,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close {
    display: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary .header-menu-extra {
    display: block;
    padding: 0 16px 12px;
    text-align: left;
}

.header-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #111111;
}

.header-menu-search i {
    color: #111111;
    font-size: 20px;
}

.header-menu-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111111;
    font-size: 14px;
}

.header-menu-search input::placeholder {
    color: rgb(17 17 17 / 60%);
}

.header-menu-cats {
    display: flex;
    gap: 10px;
    margin: 16px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.header-menu-cats::-webkit-scrollbar {
    display: none;
}

.header-menu-cat {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 104px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.header-menu-cat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-menu-cat span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 8px 6px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 65%) 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    padding: 7px 16px;
    background-image: none;
    color: #111111;
    font-size: 14px;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.5;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background-color: #f5f5f7;
    color: #111111;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    padding: 11px 16px 11px 30px;
    background-color: #ffffff;
    color: rgb(17 17 17 / 75%);
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
}

/* header section ends */

/* banner section start */

.banner-wrap {
    padding: 100px 0 0;
}

.banner-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    aspect-ratio: auto;
}

.banner-col {
    display: contents;
}

.banner-title {
    font-size: clamp(36px, calc(20.2px + 5.26vw), 44px);
    line-height: .93;
}

.banner-title,
.banner-copy,
.banner-portrait,
.banner-cta,
.banner-quality {
    grid-column: 1 / -1;
}

.banner-col-left .banner-title {
    grid-row: 1;
    margin-top: 0;
}

.banner-title-2 {
    grid-row: 2;
    justify-self: start;
    margin: 0;
    line-height: .93;
    white-space: normal;
}

.banner-copy {
    grid-row: 3;
    max-width: 200px;
    margin-top: 16px;
    margin-bottom: 40px;
}

.banner-text p {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.banner-portrait {
    position: relative;
    bottom: auto;
    left: 0;
    margin-right: auto;
    grid-row: 4;
    justify-self: center;
    width: 84%;
    margin-top: -28px;
}

.banner-cta {
    grid-row: 5;
    justify-self: center;
    margin-top: 18px;
    padding-right: 0;
}

.banner-btn {
    gap: 12px;
    margin-top: 0;
    padding: 4px 4px 4px 18px;
    font-size: 15px;
}

.banner-btn::before {
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 34px;
}

.banner-btn-icon {
    width: 34px;
    height: 34px;
}

.banner-btn-icon svg {
    width: 17px;
    height: 17px;
}

.banner-line {
    position: static;
    grid-row: 6;
    margin-top: 24px;
}

.banner-line-h {
    grid-column: 1 / -1;
    align-self: start;
    margin-right: -16px;
    margin-left: -16px;
}

.banner-line-v {
    grid-column: 2;
    justify-self: start;
}

.banner-stats {
    grid-row: 6;
    align-items: flex-start;
    margin-top: 24px;
    padding: 22px 8px 28px;
}

.banner-col-left .banner-stats {
    grid-column: 1;
}

.banner-col-right .banner-stats {
    grid-column: 2;
    padding-left: 24px;
}

.banner-stat {
    text-align: left;
}

.banner-stat strong {
    font-size: 30px;
}

.banner-stat span {
    margin-top: 4px;
    font-size: 13px;
}

.banner-social {
    justify-content: flex-start;
    gap: 16px;
    margin-top: 8px;
}

.banner-social a {
    font-size: 15px;
}

.banner-quality {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: 3;
    grid-row: 4;
    align-self: start;
    justify-self: start;
    width: 52px;
    margin: calc(25.8% - 56px) 0 0 calc(60.5% - 2px);
}

.banner-quality span {
    top: -18px;
    left: 30px;
    font-size: 12px;
    font-weight: 500;
}

/* banner section ends */

/* marquee section start */

.marquee-wrap {
    padding: 14px 0;
}

.marquee-list li {
    font-size: 14px;
}

.marquee-list li::after {
    content: "+";
    margin: 0 24px;
}

/* marquee section ends */

/* legends film section start */

.legends-film {
    height: 100svh;
    min-height: 480px;
}

.legends-film-head {
    padding: 0 24px !important;
}

.legends-film-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 2px;
}

.legends-film-title {
    margin-bottom: 16px;
    font-size: 32px;
}

.legends-film-text {
    max-width: 400px;
    font-size: 14px;
    line-height: 1.5;
}

.legends-film-frame {
    inset: 75px 12px 14px;
}

.legends-film-corner {
    width: 16px;
    height: 16px;
}

.legends-film-hud {
    inset: 89px 26px 28px;
}

.legends-film-hud-row {
    gap: 12px;
}

.legends-film-hud-label {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 2px;
}

.legends-film-rec {
    width: 6px;
    height: 6px;
}

.legends-film-timecode {
    font-size: 10px;
    letter-spacing: 1px;
}

/* legends film section ends */

/* new arrivals section start */

.new-arrival-wrap {
    padding: 60px 0;
}

.new-arrival-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.new-arrival-title {
    font-size: 32px;
    text-wrap: balance;
}

.new-arrival-text {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.new-arrival-track {
    gap: 12px;
    padding: 0 16px;
}

.new-arrival-card {
    flex: 0 0 210px;
}

.new-arrival-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.new-arrival-info {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.new-arrival-cat {
    margin-bottom: 4px;
    font-size: 10px;
}

.new-arrival-info h3 {
    font-size: clamp(13px, 3.2vw, 14px);
}

.new-arrival-price {
    margin-top: 4px;
    font-size: clamp(11px, 2.6vw, 12px);
}

.new-arrival-link {
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* new arrivals section ends */

/* essential section start */

.essential-collection-wrap {
    padding: 60px 0;
}

.essential-collection-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.essential-collection-title {
    font-size: 32px;
    text-wrap: balance;
}

.essential-collection-text {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.essential-collection-grid {
    margin-right: -6px !important;
    margin-left: -6px !important;
}

.essential-collection-col {
    margin-bottom: 12px;
    padding-right: 6px !important;
    padding-left: 6px !important;
}

.essential-collection-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
}

.essential-collection-name {
    font-size: 18px;
}

.essential-collection-name svg {
    width: 22px;
    height: 22px;
}

/* essential section ends */

/* wear section start */

.wear-wrap {
    padding: 60px 0;
}

.wear-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.wear-title {
    font-size: 32px;
}

.wear-text {
    max-width: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    text-align: left;
}

.wear-bar {
    top: 71px;
    margin-bottom: 20px;
}

.wear-bar-inner {
    gap: 14px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.wear-bar-title, .wear-bar.is-stuck .wear-bar-title {
    max-width: 0;
    margin-right: -14px;
    opacity: 0;
    display: none;
}

.wear-filter {
    padding: 8px 13px;
}

.wear-bar-link {
    font-size: 10px;
    letter-spacing: 1px;
}

.wear-grid {
    margin-right: -6px !important;
    margin-left: -6px !important;
}

.wear-col {
    margin-bottom: 16px;
    padding-right: 6px !important;
    padding-left: 6px !important;
}

.wear-empty {
    padding: 40px 0;
    font-size: 14px;
}

.wear-card-badge {
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    font-size: 9px;
    letter-spacing: 1px;
}

.wear-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.wear-card-actions {
    display: none;
}

.wear-card-info {
    padding-top: 12px;
}

.wear-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.wear-card-cat {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.wear-card-row {
    gap: 8px;
}

.wear-card-title {
    font-size: clamp(12px, 3.2vw, 14px);
}

.wear-card-price {
    margin-top: 4px;
    font-size: clamp(10px, 2.6vw, 12px);
}

.wear-card-swatch {
    width: clamp(8px, 1.6vw,10px);
    height: clamp(8px, 1.6vw,10px);
}

.wear-card-plus {
    width: 24px;
    height: 24px;
}

.wear-card-plus svg {
    width: 18px;
    height: 18px;
}

.wear-card-colors {
    margin-top: 8px;
}

/* wear section ends */

/* campaign section start */

.campaign-wrap {
    min-height: 0;
    padding: 170px 0 56px;
}

.campaign-media {
    clip-path: inset(10px 10px 10px 10px round 4px);
}

.campaign-overlay {
    background: linear-gradient(180deg, rgb(12 11 10 / 30%) 0%, rgb(12 11 10 / 55%) 45%, rgb(12 11 10 / 88%) 100%);
}

.campaign-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-right: 28px !important;
    padding-left: 28px !important;
}

.campaign-content {
    max-width: 100%;
}

.campaign-tag {
    margin-bottom: 16px;
}

.campaign-title {
    margin-bottom: 20px;
    font-size: clamp(36px, 10vw, 44px);
    letter-spacing: -1px;
}

.campaign-text {
    margin-bottom: 28px;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.campaign-btn {
    gap: 12px;
    padding: 12px 16px;
    letter-spacing: 2px;
}

.campaign-ring {
    position: absolute;
    top: -124px;
    right: 28px;
    width: 92px;
    height: 92px;
    margin-bottom: 0;
}

.campaign-ring-star {
    width: 16px;
    height: 16px;
}

/* campaign section ends */

/* philosophy section start */

.philosophy-wrap {
    padding: 60px 0;
}

.philosophy-head {
    margin-bottom: 32px;
}

.philosophy-eyebrow {
    margin-bottom: 18px;
}

.philosophy-head h1, .philosophy-head h2, .philosophy-head h3 {
    font-size: 32px;
    letter-spacing: -1px;
}

.philosophy-rule {
    margin-bottom: 28px;
}

.philosophy-col {
    align-items: center;
    text-align: center;
}

.philosophy-body {
    max-width: 100%;
    margin-bottom: 32px;
}

.philosophy-body p {
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}

.philosophy-media {
    max-width: 100%;
    margin-bottom: 32px;
    aspect-ratio: 4/3;
}

.philosophy-col-cta {
    align-items: center;
    text-align: center;
}

.philosophy-note {
    margin-bottom: 24px;
    font-size: 18px;
}

.philosophy-btn {
    padding: 12px 24px;
}

/* philosophy section ends */

/* counters section starts */ 

.counter-wrap {
    padding: 60px 0;
}

.row.counter-grid {
    row-gap: 0;
    margin: 0 !important;
}

.counter-col:nth-child(-n+2) {
    padding-bottom: 28px;
}

.counter-col:nth-child(n+3) {
    padding-top: 28px;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.counter-col:nth-child(odd)::before {
    display: none;
}

.counter-item,
.counter-col:first-child .counter-item {
    padding: 0 0 0 20px;
}

.counter-col:nth-child(odd) .counter-item {
    padding-left: 0;
}

.counter-value {
    margin-bottom: 10px;
    font-size: clamp(40px, 13vw, 52px);
    letter-spacing: -2px;
}

.counter-label {
    font-size: 13px;
    line-height: 1.4;
}

/* counters section ends */ 

/* social section starts */

.social-wrap {
    padding: 60px 0;
}

.social-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.social-title {
    font-size: 32px;
}

/* social section ends */

/* footer section starts */

.footer-wrapper {
    padding: 0 20px 92px;
}

.footer-card {
    padding-top: 48px;
    border-radius: 12px;
}

.footer-top {
    padding-bottom: 44px;
}

.footer-brand {
    margin-bottom: 36px;
}

.footer-logo-link {
    margin-bottom: 18px;
}

.footer-logo {
    height: 65px;
}

.footer-about {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.5;
}

.footer-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 16px;
}

.footer-heading {
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: 2px;
}

.footer-list li + li {
    margin-top: 4px;
}

.footer-list a {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.footer-bottom {
    grid-template-columns: 100%;
    gap: 6px;
    padding: 22px 0;
    text-align: center;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 12px;
}

.footer-credit {
    justify-self: center;
}

.footer-top-btn {
    display: none;
}

.footer-wordmark {
    margin-bottom: -4px;
    font-size: clamp(26px, 8.013vw, 50px);
    letter-spacing: -1px;
}

/* footer section ends */

/* home page ends */

/* about page start */

/* banner section start */

.about-banner-wrap {
    height: calc(100svh - 40px);
    min-height: 560px;
    max-height: 700px;
    margin-top: 40px;
}

.about-banner-wrap.is-plain {
    height: 480px;
}

.about-banner-content {
    padding: 160px 20px 16px;
}

.about-banner-row-top {
    flex-direction: column;
    gap: 8px;
}

.about-banner-eyebrow {
    padding-top: 0;
    font-size: 10px;
    letter-spacing: 2.8px;
}

.about-banner-title {
    position: static;
    max-width: 450px;
    font-size: clamp(56px, 8.5vw, 64px);
    text-wrap: balance;
    letter-spacing: -1.6px;
    line-height: .95;
}

.about-banner-intro {
    max-width: 100%;
}

.about-banner-lead {
    font-size: 20px;
}

.about-banner-text {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
}

/* banner section ends */

/* about intro section start */

.about-intro-wrap {
    padding: 60px 0;
}

.about-intro-eyebrow {
    margin-bottom: 24px;
}

.about-intro-para {
    font-size: 20px;
    line-height: 1.42;
}

.about-intro-strip {
    margin-top: 60px;
    overflow: hidden;
}

.about-intro-item {
    flex: 0 0 auto;
    width: clamp(120px, 33vw, 240px);
}

/* about intro section ends */

/* about story section start */

.about-story-wrap {
    padding: 60px 0;
}

.about-story-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    padding-bottom: 16px;
    margin-bottom: 40px;
    gap: 0;
}

.about-story-title {
    font-size: 38px;
    letter-spacing: 1px;
    padding: 0;
}

.about-story-col-media {
    margin-bottom: 32px;
}

.about-story-body p {
    margin: 0 0 24px;
    font-size: 14px;
}

/* about story section ends */

/* about counter section start */

.about-counter-wrap {
    padding: 32px 0;
}

.about-counter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 32px;
    padding: 32px 0;
}

.about-counter-item {
    gap: 8px;
    text-align: center;
}

.about-counter-value {
    font-size: clamp(36px, 11vw, 46px);
    letter-spacing: -1px;
}

.about-counter-label {
    font-size: 13px;
    line-height: 1.4;
}

/* about counter section ends */

/* about approach section start */

.about-approach-stage {
    height: 100svh;
    min-height: 600px;
}

.about-approach-title {
    top: 84px;
    font-size: clamp(38px, 9vw, 48px);
    letter-spacing: -2px;
}

.about-approach-media {
    top: 46%;
    width: clamp(140px, 40vw, 200px);
}

.about-approach-titles {
    top: 46%;
}

.about-approach-titles-row {
    gap: 50px;
    font-size: clamp(26px, 7.5vw, 32px);
    letter-spacing: -1.5px;
}

.about-approach-foot {
    bottom: 96px;
    grid-template-columns: 100%;
    row-gap: 14px;
}

.about-approach-rail {
    margin-bottom: 2px;
}

.about-approach-texts {
    justify-self: start;
    max-width: none;
    min-height: 66px;
}

.about-approach-text {
    font-size: 14px;
    line-height: 1.4;
}

/* about approach section ends */

/* new arrivals page start */

.shop-wrap {
    padding: 100px 0 40px;
}

.shop-wrap-new {
    padding-top: 100px;
}

.new-arrival-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 110px;
}

.new-arrival-hero-eyebrow {
    margin-bottom: 16px;
}

.new-arrival-hero-text {
    flex: 0 0 100%;
    max-width: 100%;
}

.new-arrival-headline {
    font-size: 40px;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

.new-arrival-intro {
    max-width: 100%;
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.5;
}

.new-arrival-drop {
    gap: 10px;
    margin-bottom: 28px;
    font-size: 10px;
    letter-spacing: 2px;
}

.new-arrival-scroll {
    padding: 12px 24px;
}

.new-arrival-hero-media {
    width: 100%;
}

.new-arrival-slide {
    flex-basis: 50%;
}

.new-arrival-slider-track {
    gap: 14px;
}

.new-arrival-slider-controls {
    gap: 16px;
    margin-top: 22px;
}

.new-arrival-slider-arrow {
    width: 42px;
    height: 42px;
}

.new-arrival-feature-caption {
    flex-wrap: wrap;
    gap: 6px 10px;
}

.new-arrival-feature-name {
    font-size: 13px;
}

.new-arrival-feature-quick {
    display: none;
}

.shop-sticky {
    top: 61px;
    padding-top: 14px;
}

.shop-sticky.is-stuck {
    padding-top: 10px;
}

.shop-head {
    gap: 16px;
    margin-bottom: 14px;
}

.shop-title {
    font-size: 20px;
    letter-spacing: -.5px;
}

.shop-sticky.is-stuck .shop-title {
    font-size: 16px;
}

.shop-tools {
    gap: 18px;
}

.shop-tool {
    gap: 6px;
    font-size: 11px;
}

.shop-tool svg {
    width: 18px;
    height: 18px;
}

.shop-tool > span:not(.shop-tool-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shop-sort-current {
    display: none;
}

.shop-sort-menu {
    width: 230px;
}

.shop-sort-head {
    margin-bottom: 4px;
    padding: 8px 14px 8px;
}

.shop-sort-option {
    padding: 8px 10px;
    font-size: 12px;
}

.shop-tabs,
.shop-terms-inner,
.shop-terms-group {
    gap: 22px;
}

.shop-terms-group + .shop-terms-group {
    padding-left: 22px;
}

.shop-tab, .shop-term {
    font-size: 12px;
    padding: 10px 0 8px;
}

.shop-status {
    padding: 16px 0 18px;
}

.shop-end {
    margin: 20px auto 60px;
}

.shop-end-title {
    font-size: 22px;
}

.shop-end-top {
    display: none;
}

/* filters: a sheet that rises from the bottom, like quick view and quick add */
.shop-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    box-shadow: 0 -20px 40px -20px rgb(0 0 0 / 25%);
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), visibility .55s;
}

.shop-drawer.is-open {
    transform: translateY(0);
}

.shop-drawer-head {
    padding: 14px 20px;
}

.shop-drawer-title {
    font-size: 14px;
}

.shop-drawer-close {
    width: 40px;
    height: 40px;
}

.shop-drawer-close svg {
    width: 20px;
    height: 20px;
}

.shop-drawer-body {
    padding: 0 20px;
}

.shop-drawer-group summary {
    padding: 16px 0;
    font-size: 12px;
}

.shop-drawer-checks {
    gap: 14px;
    padding-bottom: 18px;
}

.shop-check {
    font-size: 13px;
}

.shop-check input {
    width: 18px;
    height: 18px;
}

/* chips: a touch-sized minimum, sizes (S, 28 …) centred */
.shop-drawer-terms {
    gap: 6px;
    padding-bottom: 18px;
}

.shop-drawer-terms .shop-term {
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
}

.shop-price {
    gap: 10px;
    padding-bottom: 18px;
}

.shop-price-field span {
    font-size: 10px;
}

/* 16px stops iPhone Safari zooming in on focus */
.shop-price-field input {
    font-size: 16px;
}

.shop-drawer-foot {
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}

.shop-drawer-foot button {
    padding: 14px 16px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.shop-drawer-clear {
    flex-shrink: 0;
}

.qv {
    align-items: flex-end;
    padding: 0;
}

.qv-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qv.is-open .qv-dialog {
    transform: translateY(0);
}

.qv-body {
    max-height: 92vh;
}

.qv-content {
    flex-direction: column;
}

.qv-gallery {
    flex: none;
    max-width: none;
}

.qv-main {
    aspect-ratio: 1 / 1;
}

.qv-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.qv-info {
    padding: 28px 22px 30px;
}

.qv-title {
    font-size: 22px;
}

.qv-desc {
    margin-bottom: 22px;
    padding-bottom: 22px;
}

.qv-thumb {
    flex-basis: 46px;
    height: 58px;
}

/* quick add: a sheet from the bottom, over the bottom bar */
.qa {
    align-items: flex-end;
    padding: 0;
}

.qa-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qa.is-open .qa-dialog {
    transform: translateY(0);
}

.qa-body {
    max-height: 86vh;
    padding-bottom: env(safe-area-inset-bottom);
}

.qa-close {
    top: 10px;
    right: 8px;
}

.qa-head {
    gap: 14px;
    padding: 16px 54px 16px 16px;
}

.qa-thumb {
    flex-basis: 48px;
    height: 60px;
}

.qa-title {
    font-size: clamp(13px, 2vw, 14px);
}

.qa-price {
    font-size: clamp(12px, 1.6vw, 13px);
}

.qa-attr-head {
    padding: 18px 16px 12px;
}

.qa-swatches {
    gap: 10px;
    padding: 0 16px 4px;
}

.qa-swatch-btn {
    width: 30px;
    height: 30px;
}

.qa-row-name {
    flex: 1 1 auto;
    font-size: clamp(12px, 1.6vw, 14px);
}

.qa-row {
    height: 46px;
    padding: 0 16px;
}

.qa-row.is-loading::after {
    right: 16px;
}

.qa-done {
    padding: 30px 16px 26px;
}

.qa-message {
    padding: 14px 16px 0;
}

.qa-soldout {
    padding: 22px 16px 4px;
}

.qa-details {
    margin: 16px;
    font-size: clamp(9px, 1.6vw, 10px);
}

/* new arrivals page ends */

/* sale page start */

.shop-wrap-sale {
    padding-top: 55px;
}

.sale-hero {
    margin-bottom: 40px;
}

.sale-banner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 72px 0 0;
}

.sale-banner > .custom-container {
    order: 1;
}

.sale-promo {
    order: 2;
}

.sale-banner-img {
    order: 3;
    position: relative;
    width: 100%;
    height: 100%;
    object-position: right;
}

.sale-banner-shade {
    top: auto;
    z-index: 1;
    height: 400px;
    background: linear-gradient(180deg, #efe8e1 0%, rgb(239 232 225 / 0%) 22%);
}

.sale-banner-text {
    max-width: none;
    padding: 0;
}

.sale-banner:not(.has-image) {
    padding-bottom: 44px;
}

.sale-eyebrow {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 2px;
}

.sale-eyebrow-line {
    width: 24px;
}

.sale-headline {
    gap: 14px;
}

.sale-pct-num {
    font-size: 96px;
    letter-spacing: -4px;
}

.sale-pct-num sup {
    margin-left: 4px;
}

.sale-words {
    padding: 10px 0 4px;
}

.sale-upto,
.sale-off {
    font-size: 13px;
    letter-spacing: 3px;
}

.sale-words-line {
    margin: 8px 0;
}

.sale-headline-custom {
    max-width: none;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.sale-hero-aside {
    max-width: none;
    margin-top: 8px;
}

.sale-intro {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.6;
}

.sale-ends {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 24px;
    padding: 12px 0;
}

.sale-countdown {
    gap: 12px;
}

.sale-countdown-part {
    font-size: 20px;
}

/* promo card: in the flow under the button, lined up with the words, over the photo's top */
.sale-promo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    align-self: flex-start;
    width: 170px;
    margin: 28px 16px 0;
    padding: 46px 16px 18px;
}

.sale-promo-arrow {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.sale-promo-arrow svg {
    width: 17px;
    height: 17px;
}

.sale-promo-label {
    margin-bottom: 12px;
    font-size: 9px;
    letter-spacing: 2.5px;
}

.sale-promo-upto {
    font-size: 10px;
    letter-spacing: 2px;
}

.sale-promo-text {
    font-size: 36px;
    letter-spacing: -1.5px;
}

.sale-promo-text span {
    font-size: 15px;
}

/* sale page ends */

/* policy pages start (privacy, terms, shipping & returns) */

.legal {
    padding: 100px 0 60px;
}

.legal-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.legal-eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
}

.legal-title {
    margin-bottom: 12px;
    font-size: 32px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.legal-meta {
    gap: 8px;
    font-size: 12px;
}

.legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

.legal-side {
    position: static;
    gap: 18px;
}

.legal-side-label {
    margin-bottom: 10px;
    font-size: 12px;
}

/* the other policies as a strip of pills that scrolls sideways, above the contents */
.legal-others {
    order: -1;
}

.legal-others .legal-side-label {
    display: none;
}

.legal-others ul {
    display: flex;
    gap: 8px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.legal-others ul::-webkit-scrollbar {
    display: none;
}

.legal-others li {
    flex-shrink: 0;
}

.legal-others a {
    padding: 9px 14px;
    border: 1px solid #e3ded8;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.legal-others a::after {
    display: none;
}

.legal-others a.is-current {
    border-color: #111;
    background: #111;
    color: #fff;
}

.legal-toc {
    display: none;
}

.legal-content {
    font-size: 15px;
    line-height: 1.7;
}

.legal-content p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.legal-content h2 {
    margin: 30px 0 12px;
    font-size: 21px;
    scroll-margin-top: 90px;
}

.legal-content h3 {
    margin: 24px 0 10px;
    font-size: 17px;
}

.legal-content ul li,
.legal-content ol li {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.legal-content ul li::before {
    top: 10px;
}

.legal-contact {
    margin-top: 50px;
    padding-top: 32px;
}

.legal-contact-head {
    gap: 18px;
    margin-bottom: 20px;
}

.legal-contact-title {
    margin-bottom: 8px;
    font-size: 26px;
    letter-spacing: -.8px;
}

.legal-contact-text {
    font-size: 14px;
    line-height: 1.6;
}

.legal-contact-btn {
    width: 100%;
}

/* a plain list: one way to reach us per row, icon beside the words, a hairline between rows */
.legal-contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.legal-contact-card {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    padding: 18px 0;
    border-top: 1px solid rgb(17 17 17 / 12%);
    border-left: 0;
}

.legal-contact-icon {
    grid-row: 1 / span 3;
    margin: 2px 0 0;
}

.legal-contact-icon svg {
    width: 20px;
    height: 20px;
}

.legal-contact-label {
    font-size: 11px;
}

.legal-contact-value {
    justify-self: start;
    font-size: 15px;
}

.legal-contact-address {
    font-size: 14px;
}

.legal-contact-note {
    font-size: 12px;
}

/* policy pages ends */

/* faq page start */

.faq {
    padding: 96px 0 50px;
}

.faq-head {
    margin-bottom: 26px;
}

.faq-title {
    margin-bottom: 12px;
    font-size: 34px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.faq-lead {
    font-size: 14px;
    line-height: 1.6;
}

/* one column: the questions, then the help card and quick links */
.faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

/* number, question and toggle on one line; long questions wrap beside the number */
.faq-q {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
}

.faq-num {
    width: 24px;
    padding-top: 3px;
    font-size: 13px;
}

.faq-q-text {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.4;
}

.faq-icon {
    width: 28px;
    height: 28px;
}

.faq-icon::before,
.faq-icon::after {
    width: 10px;
    margin-left: -5px;
}

/* the answer lines up under the question, not the number */
.faq-a {
    padding: 0 0 20px 36px;
    font-size: 14px;
    line-height: 1.6;
}

.faq-a p {
    font-size: 14px;
    line-height: 1.6;
}

.faq-side {
    position: static;
    gap: 12px;
}

.faq-card {
    padding: 22px 18px;
    border-radius: 16px;
}

.faq-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
}

.faq-card-icon svg {
    width: 21px;
    height: 21px;
}

.faq-card-title {
    font-size: 18px;
}

.faq-card-text {
    margin-bottom: 16px;
    font-size: 14px;
}

.faq-card-list {
    margin-bottom: 18px;
}

.faq-card-list li {
    font-size: 14px;
}

.faq-quick {
    padding: 18px;
    border-radius: 16px;
}

.faq-quick a {
    padding: 13px 0;
    font-size: 14px;
}

/* faq page ends */

/* search page start */

.search-hero {
    margin-bottom: 32px;
}

.search-hero-form {
    gap: 10px;
    padding-bottom: 12px;
}

.search-hero-icon {
    width: 22px;
    height: 22px;
}

.search-hero-input {
    font-size: clamp(20px, 5.3vw, 24px);
    letter-spacing: -.6px;
}

.search-hero-clear {
    width: 32px;
    height: 32px;
}

.search-hero-clear svg {
    width: 18px;
    height: 18px;
}

.search-hero-submit {
    width: 42px;
    height: 42px;
}

.search-hero-submit svg {
    width: 18px;
    height: 18px;
}

.search-hero-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
}

.search-hero-none {
    margin-top: 28px;
}

.search-hero-none-title {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.3;
}

.search-hero-none-text {
    font-size: 13px;
    line-height: 1.6;
}

.search-hero-row {
    gap: 8px;
    margin-top: 24px;
}

.search-hero-row + .search-hero-row {
    margin-top: 20px;
}

.search-hero-suggest-label {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0 0 2px;
}

.search-hero-chip {
    padding: 8px 13px;
    font-size: 12px;
}

.search-hero-recent-clear {
    margin-left: 4px;
}

.search-hero-panel {
    max-height: 62vh;
    margin-top: 8px;
    padding: 16px 14px;
}

.search-panel-group + .search-panel-group {
    margin-top: 18px;
}

.search-panel-label {
    margin-bottom: 10px;
}

.search-panel-collection {
    padding: 7px 12px;
    font-size: 12px;
}

.search-panel-products {
    margin: 0 -8px;
}

.search-panel-product {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 8px;
}

.search-panel-name {
    font-size: 14px;
}

.search-panel-price {
    font-size: 13px;
}

.search-panel-price del {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
}

.search-panel-all {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.search-panel-empty {
    font-size: 13px;
}

/* trending / you might like */
.search-hero-trending {
    margin-top: 44px;
}

.search-hero-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.search-hero-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.search-hero-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* search page ends */

/* 404 page start */

.error-404-wrap {
    padding: 110px 0 50px;
}

.error-404-eyebrow {
    margin-bottom: 6px;
}

/* the digits fit a 300px screen (they were 300px tall) */
.error-404-digits {
    margin-bottom: 10px;
    font-size: 132px;
    letter-spacing: -6px;
}

.error-404-digit-zero {
    -webkit-text-stroke-width: 1.5px;
}

.error-404-title {
    margin-bottom: 12px;
    font-size: 28px;
    letter-spacing: -.8px;
    line-height: 1.12;
}

.error-404-text {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.6;
}

.error-404-search {
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 10px;
}

.error-404-search-icon {
    width: 20px;
    height: 20px;
}

/* 18px (not under 16) so iPhone Safari doesn't zoom in on focus */
.error-404-search-input {
    font-size: 18px;
}

.error-404-search-submit {
    width: 40px;
    height: 40px;
}

/* the two buttons share the row */
.error-404-actions {
    width: 100%;
    gap: 10px;
    margin-bottom: 26px;
}

.error-404-actions .acc-btn {
    flex: 1 1 0;
    padding: 0 12px;
}

.error-404-links {
    gap: 8px 18px;
}

.error-404-link {
    font-size: 13px;
}

.error-404-trending {
    margin-top: 56px;
    padding-top: 28px;
}

.error-404-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.error-404-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.error-404-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* 404 page ends */

/* contact page start */

.contact-us-wrap {
    padding: 120px 0 50px;
}

.contact-us-hero {
    margin-bottom: 44px;
}

.contact-us-word {
    font-size: clamp(80px, 24vw, 170px);
    letter-spacing: -4px;
}

.contact-us-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.contact-us-title {
    font-size: 28px;
    letter-spacing: -1px;
    line-height: 1.12;
}

.contact-us-lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.contact-us-badge {
    width: 84px;
    height: 84px;
}

.contact-us-badge-dot {
    width: 40px;
    height: 40px;
}

.contact-us-badge-dot svg {
    width: 17px;
    height: 17px;
}

.contact-us-row {
    row-gap: 14px;
}

/* form panel */
.contact-us-form > .wpcf7 {
    padding: 24px 16px;
    border-radius: 20px;
}

.contact-us-fields {
    row-gap: 18px;
}

.contact-us-field label {
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 1px;
}

/* 16px stops iPhone Safari zooming in on focus */
.contact-us-field input,
.contact-us-field textarea {
    height: 48px;
    padding: 8px 14px;
    font-size: 16px;
}

.contact-us-field textarea {
    height: 140px;
    padding: 12px 14px;
}

.contact-us-submit {
    margin-top: 24px;
}

.contact-us-send {
    height: 48px;
    padding: 0 24px;
}

.contact-us-send-arrow {
    width: 48px;
    height: 48px;
    background-size: 18px;
}

/* the note drops under the button instead of squeezing beside it */
.contact-us-note {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12px;
}

.contact-us-cf7 .wpcf7-response-output {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    font-size: 13px;
}

/* details: stacked under the form, opening with a dark hairline instead of the side line */
.contact-us-card {
    padding: 32px 0 0;
    border-top: 1px solid #111;
    border-left: 0;
}

.contact-us-block + .contact-us-block {
    margin-top: 22px;
    padding-top: 22px;
}

.contact-us-block-title {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
}

.contact-us-block-icon svg {
    width: 20px;
    height: 20px;
}

.contact-us-lines li {
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.contact-us-lines li span {
    min-width: 74px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.contact-us-card .contact-us-socials a {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* contact page ends */

/* about page ends */

/* product page start */

.pd {
    padding: 96px 0 50px;
}

.pd-crumbs {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
}

.pd-crumbs [aria-current] {
    max-width: 150px;
}

.pd-crumbs-sep {
    width: 10px;
}

/* photo first, then the details, each the full width */
.pd-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
}

.pd-layout > .pd-gallery,
.pd-layout > .pd-info {
    flex: 0 0 auto;
}

/* large photo on top, thumbnails in a strip under it that scrolls sideways */
.pd-gallery {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
}

.pd-gallery > .pd-main {
    flex: 0 0 auto;
}

.pd-main {
    border-radius: 12px;
}

.pd-thumbs-wrap {
    flex: 0 0 auto;
    width: 100%;
}

.pd-thumbs {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.pd-thumb {
    flex: 0 0 62px;
    width: 62px;
    border-radius: 8px;
}

.pd-thumbs-more {
    display: none;
}

.pd-zoom {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
}

.pd-zoom svg {
    width: 18px;
    height: 18px;
}

.pd-info {
    position: static;
}

.pd-notices .woocommerce-error,
.pd-notices .woocommerce-message,
.pd-notices .woocommerce-info {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 13px;
}

.pd-tag {
    margin-bottom: 12px;
    padding: 5px 10px;
    font-size: 11px;
}

.pd-title {
    margin-bottom: 10px;
    font-size: 28px;
    letter-spacing: -.8px;
    line-height: 1.15;
}

.pd-rating {
    margin-bottom: 16px;
    font-size: 13px;
}

.pd-rating .pd-stars svg {
    width: 14px;
    height: 14px;
}

.pd-price-block {
    margin-bottom: 18px;
}

.pd-price {
    gap: 10px;
    font-size: 18px;
}

.pd-price del {
    font-size: 14px;
}

.pd-price-note {
    margin-top: 8px;
    font-size: 12px;
}

.pd-short {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    line-height: 1.65;
}

.pd .variations_form .variations tr {
    margin-bottom: 18px;
}

.pd .variations_form .variations .label label {
    margin-bottom: 10px;
    font-size: 13px;
}

.pd-chosen,
.pd-size-guide {
    font-size: 13px;
}

.pd-chip {
    min-width: 50px;
    height: 44px;
    padding: 0 14px;
}

.pd-chips-color .pd-chip {
    width: 42px;
    height: 42px;
}

.pd .variations_button {
    gap: 8px;
}

.pd .single-product-add-to-cart {
    min-width: 0;
}

.pd .single_add_to_cart_button {
    height: 54px;
    padding: 0 14px;
    font-size: 13px;
}

.pd-wish {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
}

.pd-wish i {
    font-size: 18px;
}

/* perks: icon over the words, three across */
.pd-perks {
    gap: 8px;
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.pd-perks li {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-align: center;
}

.pd-perks svg {
    width: 22px;
    height: 22px;
}

.pd-perks strong {
    font-size: 11px;
}

/* details tabs, then the lifestyle photo under them */
.pd-about,
.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 44px;
}

.pd-tabs-nav {
    gap: 24px;
    margin-bottom: 20px;
}

.pd-tab {
    padding-bottom: 12px;
    font-size: 14px;
}

.pd-tab-panel.pd-content {
    max-width: none;
    font-size: 14px;
}

.pd-tab-panel .pd-specs {
    max-width: none;
}

.pd-specs div {
    font-size: 13px;
}

.pd-about-photo {
    border-radius: 12px;
}

.pd-section {
    margin-top: 48px;
    padding-top: 36px;
}

.pd-section-head {
    margin-bottom: 22px;
}

.pd-section-title {
    font-size: 24px;
    letter-spacing: -.5px;
}

.pd-section-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* reviews: the score card first, then the list and the form */
.pd-reviews-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.pd-review-summary {
    position: static;
    padding: 22px 20px;
    border-radius: 14px;
}

.pd-review-avg {
    font-size: 48px;
    letter-spacing: -2px;
}

.pd-review-bars {
    margin-top: 18px;
}

.pd-review {
    padding: 20px 0;
}

.pd-review .children {
    margin-left: 20px;
}

.pd-review-head {
    gap: 12px;
}

.pd-review-text,
.pd-review-empty,
.pd-review-note {
    font-size: 14px;
}

.pd-review-form-wrap {
    margin-top: 28px;
    padding: 20px 16px;
    border-radius: 14px;
}

.pd-review-form-title {
    margin-bottom: 18px;
    font-size: 18px;
}

.pd-star-pick-row svg {
    width: 32px;
    height: 32px;
}

.pd-review-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* full-screen viewer: arrows under the photo, out of its way */
.pd-viewer {
    padding: 70px 12px 84px;
}

.pd-viewer-close,
.pd-viewer-nav {
    width: 44px;
    height: 44px;
}

.pd-viewer-close {
    top: 14px;
    right: 14px;
}

.pd-viewer-nav {
    bottom: 20px;
}

.pd-viewer-prev {
    left: 16px;
}

.pd-viewer-next {
    right: 16px;
}

.pd-viewer-count {
    bottom: 32px;
}

.qa-done-title {
    font-size: 14px;
}

.qa-done-cart {
    height: 40px;
    font-size: 11px;
}

/* product page ends */

/* cart page start */

.cart-page {
    padding: 96px 0 50px;
}

.cart-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.cart-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.cart-title {
    margin-bottom: 6px;
    font-size: 34px;
    letter-spacing: -1.2px;
}

.cart-sub {
    font-size: 12px;
}

.cart-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 13px;
}

.cart-ship {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
}

.cart-ship p {
    margin-bottom: 10px;
    font-size: 13px;
}

.cart-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
}

.cart-items {
    flex: 0 0 auto;
}

/* each piece: a portrait thumbnail with the name, details and price beside it; quantity and the
   actions get their own full-width row underneath (the info column alone is too narrow for them) */
.cart-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
}

.cart-item-img {
    grid-row: 1;
    grid-column: 1;
    width: 92px;
    height: 115px;
    border-radius: 10px;
}

.cart-item-info {
    display: contents;
}

.cart-item-top {
    grid-row: 1;
    grid-column: 2;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.cart-item-name {
    display: -webkit-box;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cart-item-meta dl {
    margin-bottom: 4px;
    font-size: 12px;
}

.cart-item-unit {
    font-size: 12px;
}

.cart-item-total {
    font-size: 15px;
}

.cart-item-bottom {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid #f3f0ec;
}

.cart-qty {
    flex-shrink: 0;
}

.cart-qty-btn {
    width: 34px;
    height: 34px;
}

.cart-qty-input {
    width: 28px;
}

.cart-item-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 14px;
}

.cart-item-link {
    font-size: 12px;
    white-space: nowrap;
}

.cart-summary {
    position: static;
    flex: 0 0 auto;
    padding: 22px 18px;
    border-radius: 14px;
}

.cart-summary-title {
    margin-bottom: 8px;
    font-size: 16px;
}

.cart-line {
    padding: 6px 0;
    font-size: 14px;
}

.cart-line-total {
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
}

/* cart toast above the bottom bar */
.cart-toast {
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-width: none;
    gap: 10px;
    padding: 12px 10px 12px 14px;
    font-size: 13px;
    transform: translateY(24px) scale(.96);
}

.cart-toast.is-visible {
    transform: translateY(0) scale(1);
}

.cart-toast-undo {
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

.cart-coupon {
    margin: 16px 0 18px;
}

.cart-coupon-form input {
    height: 40px;
    font-size: 12px;
}

.cart-checkout {
    width: 100%;
    height: 44px;
}

.cart-trust {
    gap: 16px;
    margin-top: 16px;
}

.cart-suggest {
    margin-top: 48px;
    padding-top: 32px;
}

.cart-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

.cart-suggest-head {
    margin-bottom: 20px;
}

.cart-suggest-link {
    flex-shrink: 0;
    font-size: 12px;
}

.cart-void {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0;
}

.cart-void-text {
    flex: 0 0 auto;
    max-width: none;
}

.cart-void-title {
    margin-bottom: 14px;
    font-size: 34px;
    letter-spacing: -1.4px;
    line-height: 1.05;
}

.cart-void-lead {
    max-width: none;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.65;
}

/* the two buttons one under the other, each the full width */
.cart-void-actions {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.cart-void-actions .acc-btn {
    flex: none;
    width: 100%;
    padding: 0 18px;
}

/* benefits as a list, icon beside the words: three columns left about 85px each */
.cart-void-perks {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding-top: 20px;
}

.cart-void-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.cart-void-perks svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.cart-void-perks strong {
    font-size: 14px;
}

/* the photo mosaic is left out on phones: the page gets to the suggestions sooner */
.cart-void-media {
    display: none;
}

.cart-void-tile {
    border-radius: 12px;
}

.cart-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 10px) / 2);
    grid-auto-flow: column;
    gap: 10px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-tiles::-webkit-scrollbar {
    display: none;
}

.cart-tile {
    scroll-snap-align: start;
}

.cart-tile {
    border-radius: 12px;
}

.cart-tile-info {
    right: 12px;
    bottom: 12px;
    left: 12px;
}

.cart-tile-info strong {
    font-size: 17px;
}

/* cart page ends */

/* checkout page start */

.co {
    padding: 96px 0 50px;
}

/* title, then the Cart → Details → Confirmation steps under it */
.co-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.co-eyebrow {
    margin-bottom: 10px;
}

.co-title {
    font-size: 34px;
    letter-spacing: -1.2px;
}

.co-steps li {
    gap: 6px;
    font-size: 10px;
    letter-spacing: .8px;
}

.co-steps li + li::before {
    width: 18px;
    margin: 0 8px;
}

.co-steps a {
    gap: 6px;
}

.co-steps-dot {
    width: 8px;
    height: 8px;
}

/* one column, the order summary first so the items and total are seen before the details */
.co-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.co-side {
    position: relative;
    order: -1;
    padding: 20px 16px;
    border-radius: 16px;
}

.co-main,
#customer_details {
    gap: 12px;
}

.co .woocommerce-error,
.co .woocommerce-message,
.co .woocommerce-info {
    padding: 12px 14px;
    font-size: 13px;
}

/* step cards */
.co-step {
    padding: 20px 16px;
    border-radius: 16px;
}

/* "Have an account? Sign in" / "Secure" drop under the title instead of overflowing beside it */
.co-step-head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.co-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.co-step-text {
    flex: 1 1 0;
}

.co-step-title {
    font-size: 17px;
}

.co-step-sub {
    font-size: 12px;
}

.co-step-aside {
    flex: 0 0 100%;
    margin-left: 40px;
    font-size: 12px;
    white-space: normal;
}

/* fields: full width; first / last name and state / PIN code stay in pairs */
.co-fields {
    gap: 10px;
}

.co #billing_phone_field,
.co #billing_email_field,
.co #billing_city_field,
.co #shipping_city_field {
    grid-column: span 6;
}

.co #billing_state_field,
.co #billing_postcode_field,
.co #shipping_state_field,
.co #shipping_postcode_field {
    grid-column: span 3;
}

.co .co-fields .form-row > label {
    left: 13px;
    right: 13px;
}

/* 16px stops iPhone Safari zooming in on focus */
.co .co-fields .input-text,
.co .co-fields select,
.co .co-fields textarea {
    height: 56px;
    padding: 24px 13px 8px;
    font-size: 16px;
}

.co .co-fields textarea {
    height: auto;
    min-height: 110px;
    padding-top: 28px;
}

.co .co-fields .select2-container .select2-selection--single {
    height: 56px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 13px;
    font-size: 16px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__arrow {
    top: 15px;
}

.co-check,
.co .woocommerce-form__label-for-checkbox {
    align-items: flex-start;
    font-size: 13px !important;
    line-height: 1.5;
}

.co-check input,
.co .woocommerce-form__label-for-checkbox input {
    margin-top: 1px;
}

.co-ship-to h3 .co-check,
.co-account > .co-check {
    padding: 14px;
}

.co-notes[open] summary {
    margin-bottom: 16px;
}

/* payment */
.co .wc_payment_method > label {
    padding: 14px;
    font-size: 13px;
}

.co .payment_box {
    padding: 0 14px 14px 44px;
    font-size: 12px;
}

.co .woocommerce-terms-and-conditions-wrapper {
    font-size: 12px;
}

.co #place_order {
    height: 52px;
}

/* summary */
.co-side-head {
    margin-bottom: 16px;
}

.co-side-title {
    font-size: 17px;
}

.co-item {
    gap: 12px;
    margin-bottom: 12px;
}

.co-item-img {
    width: 52px;
    height: 64px;
}

.co-item-name,
.co-item-price {
    font-size: 13px;
}

.co-item-meta dl {
    font-size: 11px;
}

.co-total-row {
    font-size: 13px;
}

.co-total-row.order-total {
    font-size: 17px;
}

.co-ship-method label {
    padding: 11px 12px;
    font-size: 12px;
}

.co-coupon-row input {
    font-size: 16px;
}

.co-trust {
    gap: 8px 14px;
}

.co-trust li {
    font-size: 11px;
}

/* order received */
.co-thanks-hero {
    margin-bottom: 32px;
}

.co-thanks-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.co-thanks-icon svg {
    width: 28px;
    height: 28px;
}

.co-thanks-title {
    margin-bottom: 12px;
    font-size: 34px;
    letter-spacing: -1.4px;
    line-height: 1.05;
}

.co-thanks-lead {
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.6;
}

/* order facts as a 2 × 2 grid */
.co-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
}

.co-facts div {
    padding: 14px;
}

.co-facts div + div {
    border-left: 0;
}

.co-facts div:nth-child(even) {
    border-left: 1px solid #ececec;
}

.co-facts div:nth-child(n + 3) {
    border-top: 1px solid #ececec;
}

.co-facts dt {
    font-size: 10px;
    letter-spacing: 1.2px;
}

.co-facts dd {
    font-size: 14px;
    word-break: break-word;
}

.co-thanks-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.co-next {
    padding: 20px 16px;
}

.co-thanks-actions .acc-btn {
    flex: 1 1 100%;
}

/* checkout page ends */

/* wishlist page start */

.wish {
    padding: 96px 0 50px;
}

.wish-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.wish-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.wish-title {
    margin-bottom: 6px;
    font-size: 34px;
    letter-spacing: -1.2px;
}

.wish-sub {
    font-size: 12px;
}

.wish-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.wish-note {
    margin: -6px 0 22px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.wish-empty {
    margin-top: 10px;
    padding: 40px 8px;
}

.wish-empty-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.wish-empty-icon svg {
    width: 26px;
    height: 26px;
}

.wish-empty-title {
    font-size: 21px;
}

.wish-empty-text {
    margin-bottom: 22px;
    font-size: 13px;
}

.wish-empty .acc-btn {
    height: 44px;
    padding: 0 22px;
    letter-spacing: 1.5px;
}

.wish-suggest {
    margin-top: 40px;
    padding-top: 32px;
}

.wish-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

/* wishlist page ends */

/* my account page start */

.auth {
    padding: 96px 0 50px;
}

.auth-card {
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 8px;
    border-radius: 22px;
}

.auth-side {
    flex: none;
    padding: 18px 12px 14px;
}

.auth-body {
    padding: 28px 0 24px;
}

.auth-switcher {
    display: grid;
    width: 100%;
    margin-bottom: 26px;
}

.auth-switch-btn {
    padding: 10px 8px;
}

.auth-title {
    font-size: 26px;
    letter-spacing: -.6px;
}

.auth-lead {
    margin-bottom: 24px;
    font-size: 12px;
}

.auth-saved {
    margin: -10px 0 22px;
    padding: 11px 12px;
    font-size: 12px;
}

.auth-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

.auth-field input {
    height: 40px;
    font-size: 16px;
}

.auth-phone-code {
    padding: 0 12px;
}

.auth-check {
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.5;
}

.auth-check input {
    margin-top: 1px;
}

.auth-submit {
    height: 42px;
}

.auth-back {
    margin-bottom: 22px;
}

.auth-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
}

.auth-visual {
    flex: none;
    min-height: 380px;
    border-radius: 0 16px 16px 16px;
}

.auth-notch-top {
    width: 84px;
    height: 40px;
    border-bottom-right-radius: 16px;
}

.auth-notch-top::before,
.auth-notch-top::after {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 100% 100%, transparent 15.5px, #f6f3ef 16px);
}

.auth-notch-bottom {
    display: none;
}

.auth-tag {
    top: 14px;
    right: 14px;
    padding: 7px 11px;
    font-size: 11px;
}

.auth-visual-content {
    right: 16px;
    bottom: 16px;
    left: 16px;
}

.auth-quote {
    margin-bottom: 0;
    font-size: 26px;
}

/* the banner is short here, and the form's lead already names these perks */
.auth-perks {
    display: none;
}

/* signed in: greeting, then the sections as a strip of pills that scrolls sideways */

.acc {
    padding: 96px 0 50px;
}

.acc-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.acc-eyebrow {
    margin-bottom: 10px;
}

.acc-title {
    margin-bottom: 6px;
    font-size: 28px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.acc-sub {
    font-size: 12px;
}

.acc-logout {
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
}

.acc-logout .acc-icon {
    width: 18px;
    height: 18px;
}

.acc-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}

.acc-nav {
    position: static;
    flex: none;
    margin: 0 -16px;
}

.acc-nav ul {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.acc-nav ul::-webkit-scrollbar {
    display: none;
}

.acc-nav ul li {
    flex-shrink: 0;
    margin: 0;
}

.acc-nav-link {
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.acc-nav-link.is-active {
    border-color: #111;
}

.acc-nav-link .acc-icon {
    width: 17px;
    height: 17px;
}

.acc-nav-count {
    margin-left: 2px;
}

/* log out is already in the greeting */
.acc-nav-sep {
    display: none;
}

.acc-section + .acc-section {
    margin-top: 36px;
}

.acc-section-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.acc-h2 {
    margin-bottom: 16px;
    font-size: 22px;
}

.acc-lead {
    margin: -6px 0 20px;
    font-size: 13px;
    line-height: 1.6;
}

.acc-btn {
    height: 44px;
    padding: 0 20px;
    letter-spacing: 1.5px;
}

/* dashboard: orders and wishlist side by side, address under them */
.acc-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.acc-stat {
    padding: 16px;
    border-radius: 14px;
}

.acc-stat:last-child {
    grid-column: 1 / -1;
}

.acc-stat-label {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.acc-stat-value {
    margin: 12px 0 10px;
    font-size: 34px;
}

.acc-stat-text {
    font-size: 24px;
}

.acc-stat-link {
    font-size: 12px;
}

/* recent orders: number and date on top, status and total under them */
.acc-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 2px;
}

.acc-row-main {
    flex: 1 1 100%;
}

.acc-row-main strong {
    font-size: 14px;
}

.acc-row-main span {
    font-size: 12px;
}

.acc-row-total {
    min-width: 0;
    margin-left: auto;
    font-size: 14px;
}

.acc-links {
    grid-template-columns: 1fr;
    gap: 10px;
}

.acc-link-card {
    padding: 16px;
}

.acc-empty {
    padding: 40px 18px;
}

.acc-empty-title {
    font-size: 17px;
}

.acc-empty-text {
    font-size: 13px;
}

/* orders: the buttons get their own full-width row */
.acc-order-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
}

.acc-order-number {
    margin-right: 8px;
    font-size: 14px;
}

.acc-order-date {
    font-size: 12px;
}

.acc-order-body {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
}

.acc-thumb {
    width: 48px;
    height: 60px;
}

.acc-order-info {
    flex: 1 1 0;
}

.acc-order-items {
    font-size: 13px;
}

.acc-order-total {
    font-size: 15px;
}

.acc-order-actions {
    flex: 1 1 100%;
}

.acc-order-actions .acc-btn {
    flex: 1 1 0;
    height: 42px;
    padding: 0 12px;
    font-size: 10px;
}

.acc-order-actions .acc-btn-sm {
    height: 38px;
}

.acc-pager {
    gap: 10px;
    margin-top: 22px;
}

/* single order */
.acc-order-actions-top {
    margin-top: 18px;
}

.acc-notice {
    padding: 12px 14px;
    font-size: 13px;
}

.acc-track-step {
    padding-right: 8px;
}

.acc-track-step strong {
    font-size: 13px;
}

.acc-track-step span {
    font-size: 11px;
}

.acc-item {
    gap: 12px;
    padding: 14px 0;
}

.acc-item-img {
    width: 60px;
    height: 76px;
    border-radius: 8px;
}

.acc-item-name,
.acc-item-price {
    font-size: 14px;
}

.acc-item-meta,
.acc-item-qty {
    font-size: 12px;
}

.acc-totals {
    max-width: none;
}

.acc-total-row {
    font-size: 13px;
}

.acc-total-order_total {
    font-size: 16px;
}

.acc-order-note,
.acc-note-text p {
    font-size: 13px;
}

/* addresses, one under the other */
.acc-address-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.acc-card {
    padding: 18px;
    border-radius: 14px;
}

.acc-card address {
    margin-bottom: 18px;
    font-size: 13px;
}

/* forms: every field the full width */
.acc-form .form-row-first,
.acc-form .form-row-last {
    flex: 0 0 100%;
}

.acc-form .input-text,
.acc-form select,
.acc-form textarea {
    height: 46px;
    font-size: 16px;
}

.acc-form textarea {
    height: auto;
}

.acc-form .select2-container .select2-selection--single {
    height: 46px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
    line-height: 44px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.acc-fieldset {
    padding: 18px 16px;
    border-radius: 14px;
}

.acc-form-actions .acc-btn {
    flex: 1 1 auto;
}

.acc-content .woocommerce-error, .acc-content .woocommerce-message, .acc-content .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 12px;
}

/* my account page ends */

}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {

/* common styles for all pages on small screens start */

.custom-container {
    padding-right: 33px !important;
    padding-left: 33px !important;
}

.cursor-dot {
    display: none;
}

.page-loader {
    padding: 0 16px;
}

.page-loader-word {
    font-size: 30px;
    letter-spacing: -1px;
}

.page-loader-space {
    width: 9px;
}

.page-loader-char {
    padding-bottom: 3px;
}

.page-loader-count {
    top: -24px;
    right: 0;
    font-size: 14px;
}

.page-loader-photo {
    width: 110px;
}

.eyebrow {
    gap: 8px;
    letter-spacing: 3px;
}

.eyebrow-line {
    width: 16px;
}

.mobile-bar {
    position: fixed;
    right: 30px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 30px;
    z-index: 100;
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.mobile-bar-main,
.mobile-bar-side {
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
    background: rgb(255 255 255 / 80%);
    box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.mobile-bar-main {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    padding: 5px;
}

.mobile-bar-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #111111;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.mobile-bar-item svg {
    display: block;
    width: 22px;
    height: 22px;
}

.mobile-bar-item.is-active,
html.mega-menu-primary-off-canvas-open .mobile-bar-menu {
    background: rgb(180 131 95 / 20%);
    color: #111111;
}

/* while the menu is open, Menu is the only highlighted shortcut */
html.mega-menu-primary-off-canvas-open .mobile-bar-main .mobile-bar-item.is-active {
    background: none;
}

/* the wishlist tile is an item and a panel at once: restate the panel look the item rule clears */
.mobile-bar .mobile-bar-side {
    flex: 0 0 66px;
    padding: 5px;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 14px;
    background: rgb(255 255 255 / 80%);
}

.mobile-bar .mobile-bar-side.is-active {
    background: rgb(244 232 222 / 92%);
}

.mobile-bar-icon {
    position: relative;
}

.mobile-bar-icon .cart-count {
    top: -6px;
    right: -10px;
}

.mobile-bar-top {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #B4835F;
    color: #ffffff;
    box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    pointer-events: auto;
}

.mobile-bar-top svg {
    width: 20px;
    height: 20px;
}

.mobile-bar.is-scrolled .mobile-bar-top {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.footer-wrapper {
    padding-bottom: 92px;
}

/* common styles for all pages on small screens ends */

/* home page start */

/* header section start */

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 0 33px !important;
}

.header-nav {
    order: 1;
    justify-self: start;
}

.header-logo {
    order: 2;
}

.header-user-actions {
    order: 3;
    justify-self: end;
    gap: 18px;
}

.header-user-actions .header-icon:nth-child(n+3) {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle {
    justify-content: flex-start;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-left,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-center,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right {
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
    transform: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box {
    width: 22px;
    height: 16px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    width: 22px;
    height: 1.5px;
    border-radius: 0;
    background-color: #111;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    top: 0;
    margin-top: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
    top: 7px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    top: 14px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    transform: translate3d(0, 7px, 0) rotate(45deg);
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg);
}

.header-logo img {
    height: 55px;
    max-width: 115px;
}

.f-nav .header-logo img {
    height: 55px;
}

html.mega-menu-primary-off-canvas-open .header-wrapper {
    background: #ffffff;
}

html.mega-menu-primary-off-canvas-open .header-user-actions .search-toggle {
    visibility: hidden;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    top: 65px;
    right: auto;
    left: -100%;
    width: 100%;
    height: calc(100dvh - 65px);
    max-height: calc(100dvh - 65px);
    justify-content: flex-start;
    gap: 0;
    padding: 16px 0 110px;
    background: #ffffff;
}

/* the panel scrolls on its own (its height is fixed to the screen), without showing a scrollbar;
   contain keeps the page behind from scrolling once the panel reaches its end */
.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary::-webkit-scrollbar {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    right: auto;
    left: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open::after,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close {
    display: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary .header-menu-extra {
    display: block;
    padding: 0 16px 12px;
    text-align: left;
}

.header-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #111111;
}

.header-menu-search i {
    color: #111111;
    font-size: 20px;
}

.header-menu-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111111;
    font-size: 14px;
}

.header-menu-search input::placeholder {
    color: rgb(17 17 17 / 60%);
}

.header-menu-cats {
    display: flex;
    gap: 10px;
    margin: 16px -16px 0;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.header-menu-cats::-webkit-scrollbar {
    display: none;
}

.header-menu-cat {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: clamp(110px, 22vw, 130px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.header-menu-cat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-menu-cat span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 8px 6px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 65%) 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    padding: 7px 16px;
    background-image: none;
    color: #111111;
    font-size: 14px;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.5;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background-color: #f5f5f7;
    color: #111111;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    padding: 11px 16px 11px 30px;
    background-color: #ffffff;
    color: rgb(17 17 17 / 75%);
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
}

/* header section ends */

/* banner section start */

/* two columns, closer to the desktop banner: both titles across the top, then the words and the
   button on the left beside the portrait (the mobile image) on the right, then the stitched line and
   the stats */
.banner-wrap {
    padding: 100px 0 0;
}

.banner-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
    aspect-ratio: auto;
}

.banner-col {
    display: contents;
}

.banner-title {
    font-size: clamp(44px, calc(18.2px + 4.26vw), 54px);
    line-height: .93;
}

.banner-title {
    grid-column: 1 / -1;
}

.banner-col-left .banner-title {
    grid-row: 1;
    margin-top: 0;
}

.banner-title-2 {
    grid-row: 2;
    justify-self: start;
    margin: 0;
    line-height: .93;
    white-space: normal;
}

.banner-copy {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: 300px;
    margin: 12px 0 0;
}

.banner-text p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.55;
}

.banner-cta {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    justify-self: start;
    margin: 24px 0 8px;
    padding-right: 0;
}

.banner-btn {
    gap: 14px;
    margin-top: 0;
    padding: 5px 5px 5px 22px;
    font-size: 16px;
}

.banner-btn::before {
    top: 5px;
    right: 5px;
    bottom: 5px;
    width: 38px;
}

.banner-btn-icon {
    width: 38px;
    height: 38px;
}

.banner-btn-icon svg {
    width: 18px;
    height: 18px;
}

.banner-portrait {
    position: relative;
    bottom: auto;
    left: -35px;
    grid-column: 2;
    grid-row: 3 / span 2;
    align-self: start;
    width: 100%;
    margin: -36px 0 0;
}

.banner-line {
    position: static;
    grid-row: 6;
    margin-top: 0;
}

.banner-line-h {
    grid-column: 1 / -1;
    align-self: start;
    margin-right: -33px;
    margin-left: -33px;
}

.banner-line-v {
    grid-column: 2;
    justify-self: start;
    margin-left: -12px;
}

.banner-stats {
    grid-row: 6;
    align-items: flex-start;
    margin-top: 0;
    padding: 26px 12px 32px;
}

.banner-col-left .banner-stats {
    grid-column: 1;
    padding-left: 0;
}

.banner-col-right .banner-stats {
    grid-column: 2;
    padding-left: 20px;
}

.banner-stat {
    text-align: left;
}

.banner-stat strong {
    font-size: 36px;
}

.banner-stat span {
    margin-top: 4px;
    font-size: 14px;
}

.banner-social {
    justify-content: flex-start;
    gap: 18px;
    margin-top: 10px;
}

.banner-social a {
    font-size: 16px;
}

/* the badge sits on the photo where it does on phones: 62.5% across it and 30.7% of its width down
   (less the 36px tuck); % margins here are of the right column, which the photo fills */
.banner-quality {
    position: relative;
    bottom: auto;
    left: -35px; /* moves with the portrait */
    z-index: 3;
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    width: 52px;
    margin: calc(30.7% - 64px) 0 0 calc(62.5% - 2px);
}

.banner-quality span {
    top: -18px;
    left: 30px;
    font-size: 13px;
    font-weight: 500;
}

/* banner section ends */

/* marquee section start */

.marquee-wrap {
    padding: 14px 0;
}

.marquee-list li {
    font-size: 14px;
}

.marquee-list li::after {
    content: "+";
    margin: 0 24px;
}

/* marquee section ends */

/* legends film section start */

.legends-film {
    height: 100svh;
    min-height: 480px;
}

.legends-film-head {
    padding: 0 24px !important;
}

.legends-film-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 2px;
}

.legends-film-title {
    margin-bottom: 16px;
    font-size: 36px;
}

.legends-film-text {
    max-width: 420px;
    font-size: 14px;
    line-height: 1.5;
}

.legends-film-frame {
    inset: 75px 12px 14px;
}

.legends-film-corner {
    width: 16px;
    height: 16px;
}

.legends-film-hud {
    inset: 89px 26px 28px;
}

.legends-film-hud-row {
    gap: 12px;
}

.legends-film-hud-label {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 2px;
}

.legends-film-rec {
    width: 6px;
    height: 6px;
}

.legends-film-timecode {
    font-size: 10px;
    letter-spacing: 1px;
}

/* legends film section ends */

/* new arrivals section start */

.new-arrival-wrap {
    padding: 70px 0;
}

.new-arrival-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.new-arrival-title {
    font-size: 38px;
    text-wrap: balance;
}

.new-arrival-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.new-arrival-track {
    gap: 12px;
    padding: 0 33px;
}

.new-arrival-card {
    flex: 0 0 260px;
}

.new-arrival-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.new-arrival-info {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.new-arrival-cat {
    margin-bottom: 4px;
    font-size: 10px;
}

.new-arrival-info h3 {
    font-size: clamp(13px, 3.2vw, 14px);
}

.new-arrival-price {
    margin-top: 4px;
    font-size: clamp(11px, 2.6vw, 12px);
}

.new-arrival-link {
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* new arrivals section ends */

/* essential section start */

.essential-collection-wrap {
    padding: 70px 0;
}

.essential-collection-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.essential-collection-title {
    font-size: 38px;
    text-wrap: balance;
}

.essential-collection-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.essential-collection-grid {
    flex-wrap: nowrap !important;
    gap: 12px;
    margin-right: -33px !important;
    margin-left: -33px !important;
    padding: 0 33px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 33px;
    scrollbar-width: none;
}

.essential-collection-grid::-webkit-scrollbar {
    display: none;
}

/* 24px = the two 12px gaps beside the cards that show */
.essential-collection-col {
    flex: 0 0 calc((100% - 24px) / 2.8) !important;
    max-width: none;
    margin-bottom: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
    scroll-snap-align: start;
}

.essential-collection-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
}

.essential-collection-name {
    font-size: 18px;
}

.essential-collection-name svg {
    width: 22px;
    height: 22px;
}

/* essential section ends */

/* wear section start */

.wear-wrap {
    padding: 70px 0;
}

.wear-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.wear-title {
    font-size: 38px;
}

.wear-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    text-align: left;
}

.wear-bar {
    top: 71px;
    margin-bottom: 20px;
}

.wear-bar-inner {
    gap: 14px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.wear-bar-title, .wear-bar.is-stuck .wear-bar-title {
    max-width: 0;
    margin-right: -14px;
    opacity: 0;
    display: none;
}

.wear-filter {
    padding: 8px 13px;
}

.wear-bar-link {
    font-size: 10px;
    letter-spacing: 1px;
}

.wear-grid {
    margin-right: -12px !important;
    margin-left: -12px !important;
}

.wear-col {
    margin-bottom: 16px;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.wear-empty {
    padding: 40px 0;
    font-size: 14px;
}

.wear-card-badge {
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    font-size: 9px;
    letter-spacing: 1px;
}

.wear-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.wear-card-actions {
    display: none;
}

.wear-card-info {
    padding-top: 12px;
}

.wear-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.wear-card-cat {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.wear-card-row {
    gap: 8px;
}

.wear-card-title {
    font-size: clamp(12px, 3.2vw, 14px);
}

.wear-card-price {
    margin-top: 4px;
    font-size: clamp(10px, 2.6vw, 12px);
}

.wear-card-swatch {
    width: clamp(8px, 1.6vw,10px);
    height: clamp(8px, 1.6vw,10px);
}

.wear-card-plus {
    width: 24px;
    height: 24px;
}

.wear-card-plus svg {
    width: 18px;
    height: 18px;
}

.wear-card-colors {
    margin-top: 8px;
}

/* wear section ends */

/* campaign section start */

.campaign-wrap {
    min-height: 0;
    padding: 170px 0 56px;
}

.campaign-media {
    clip-path: inset(10px 10px 10px 10px round 4px);
}

.campaign-overlay {
    background: linear-gradient(180deg, rgb(12 11 10 / 30%) 0%, rgb(12 11 10 / 55%) 45%, rgb(12 11 10 / 88%) 100%);
}

.campaign-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-right: 28px !important;
    padding-left: 28px !important;
}

.campaign-content {
    max-width: 100%;
}

.campaign-tag {
    margin-bottom: 16px;
}

.campaign-title {
    margin-bottom: 20px;
    font-size: clamp(44px, 7vw, 52px);
    letter-spacing: -1px;
}

.campaign-text {
    margin-bottom: 28px;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.5;
}

.campaign-btn {
    gap: 12px;
    padding: 12px 16px;
    letter-spacing: 2px;
}

/* the ring sits above the text at the top right, as on phones, a size up; its top stays 24px inside
   the section, clear of the photo's 10px frame */
.campaign-ring {
    position: absolute;
    top: -146px;
    right: 28px;
    width: 116px;
    height: 116px;
    margin-bottom: 0;
}

.campaign-ring-star {
    width: 18px;
    height: 18px;
}

/* campaign section ends */

/* philosophy section start */

.philosophy-wrap {
    padding: 70px 0;
}

.philosophy-head {
    margin-bottom: 36px;
}

.philosophy-eyebrow {
    margin-bottom: 18px;
}

.philosophy-head h1,
.philosophy-head h2,
.philosophy-head h3 {
    max-width: 560px;
    font-size: 38px;
    letter-spacing: -1.4px;
}

.philosophy-rule {
    margin-bottom: 32px;
}

.philosophy-grid {
    align-items: stretch;
}

/* words left, photo right */
.philosophy-col-text,
.philosophy-col-media {
    flex: 0 0 50%;
    max-width: 50%;
}

.philosophy-col-text {
    justify-content: flex-start;
}

.philosophy-body {
    max-width: 100%;
}

.philosophy-body p {
    margin-bottom: 14px;
    font-size: clamp(14px, 1.9vw, 16px);
    line-height: 1.5;
    text-wrap: pretty;
}

.philosophy-media {
    max-width: 100%;
    aspect-ratio: 4 / 5;
}

.philosophy-col-cta {
    flex: 0 0 100%;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgb(17 17 17 / 12%);
    text-align: left;
}

.philosophy-note {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.philosophy-btn {
    flex-shrink: 0;
    padding: 14px 24px;
}

/* philosophy section ends */

/* counters section starts */ 

.counter-wrap {
    padding: 60px 0;
}

.row.counter-grid {
    row-gap: 0;
    margin: 0 !important;
}

.counter-col:nth-child(-n+2) {
    padding-bottom: 28px;
}

.counter-col:nth-child(n+3) {
    padding-top: 28px;
    border-top: 1px solid rgb(255 255 255 / 10%);
}

.counter-col:nth-child(odd)::before {
    display: none;
}

.counter-item,
.counter-col:first-child .counter-item {
    padding: 0 0 0 20px;
}

.counter-col:nth-child(odd) .counter-item {
    padding-left: 0;
}

.counter-value {
    margin-bottom: 10px;
    font-size: clamp(40px, 13vw, 52px);
    letter-spacing: -2px;
}

.counter-label {
    font-size: 13px;
    line-height: 1.4;
}

/* counters section ends */ 

/* social section starts */

.social-wrap {
    padding: 70px 0;
}

.social-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.social-title {
    font-size: 38px;
}

/* social section ends */

/* footer section starts */

.footer-wrapper {
    padding: 0 10px 92px;
}

.footer-card {
    padding-top: 48px;
    border-radius: 12px;
}

.footer-top {
    padding-bottom: 44px;
}

.footer-brand {
    margin-bottom: 36px;
}

.footer-logo-link {
    margin-bottom: 18px;
}

.footer-logo {
    height: 60px;
}

.footer-about {
    max-width: 450px;
    font-size: 14px;
    line-height: 1.5;
}

.footer-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 16px;
}

.footer-heading {
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: 2px;
}

.footer-list li + li {
    margin-top: 4px;
}

.footer-list a {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.footer-bottom {
    grid-template-columns: 100%;
    gap: 6px;
    padding: 22px 0;
    text-align: center;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 12px;
}

.footer-credit {
    justify-self: center;
}

.footer-top-btn {
    display: none;
}

.footer-wordmark {
    margin-bottom: -4px;
    font-size: clamp(54px, 8.013vw, 74px);
    letter-spacing: -1px;
}

/* footer section ends */

/* home page ends */

/* about page start */

/* banner section start */

.about-banner-wrap {
    height: calc(100svh - 40px);
    min-height: 560px;
    max-height: 700px;
    margin-top: 40px;
}

.about-banner-wrap.is-plain {
    height: 480px;
}

.about-banner-content {
    padding: 160px 20px 16px;
}

.about-banner-row-top {
    flex-direction: column;
    gap: 8px;
}

.about-banner-eyebrow {
    padding-top: 0;
    font-size: 10px;
    letter-spacing: 2.8px;
}

.about-banner-title {
    position: static;
    max-width: none;
    font-size: clamp(40px, 11.5vw, 56px);
    text-wrap: balance;
    letter-spacing: -1.6px;
    line-height: .95;
}

.about-banner-intro {
    max-width: 100%;
}

.about-banner-lead {
    font-size: 20px;
}

.about-banner-text {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
}

/* banner section ends */

/* about intro section start */

.about-intro-wrap {
    padding: 60px 0;
}

.about-intro-eyebrow {
    margin-bottom: 24px;
}

.about-intro-para {
    font-size: 24px;
    line-height: 1.42;
}

.about-intro-strip {
    margin-top: 60px;
    overflow: hidden;
}

.about-intro-item {
    flex: 0 0 auto;
    width: clamp(120px, 33vw, 240px);
}

/* about intro section ends */

/* about story section start */

.about-story-wrap {
    padding: 60px 0;
}

.about-story-head {
    padding-bottom: 16px;
    margin-bottom: 40px;
}

.about-story-title {
    font-size: 38px;
    letter-spacing: 1px;
    padding: 0;
}

.about-story-col-media {
    margin-bottom: 32px;
}

.about-story-body p {
    margin: 0 0 24px;
    font-size: clamp(14px, 1.9vw, 16px);
}

/* about story section ends */

/* about counter section start */

.about-counter-wrap {
    padding: 32px 0;
}

.about-counter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 32px;
    padding: 32px 0;
}

.about-counter-item {
    gap: 8px;
    text-align: center;
}

.about-counter-value {
    font-size: clamp(46px, 6vw, 54px);
    letter-spacing: -1px;
}

.about-counter-label {
    font-size: 13px;
    line-height: 1.4;
}

/* about counter section ends */

/* about approach section start */

.about-approach-stage {
    height: 100svh;
    min-height: 600px;
}

.about-approach-title {
    top: 84px;
    font-size: clamp(38px, 9vw, 48px);
    letter-spacing: -2px;
}

.about-approach-media {
    top: 46%;
    width: clamp(140px, 40vw, 200px);
}

.about-approach-titles {
    top: 46%;
}

.about-approach-titles-row {
    gap: 50px;
    font-size: clamp(26px, 7.5vw, 32px);
    letter-spacing: -1.5px;
}

.about-approach-foot {
    bottom: 96px;
    grid-template-columns: 100%;
    row-gap: 14px;
}

.about-approach-rail {
    margin-bottom: 2px;
}

.about-approach-texts {
    justify-self: start;
    max-width: none;
    min-height: 66px;
}

.about-approach-text {
    font-size: 14px;
    line-height: 1.4;
}

/* about approach section ends */

/* new arrivals page start */

.shop-wrap {
    padding: 110px 0 40px;
}

.shop-wrap-new {
    padding-top: 110px;
}

.new-arrival-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 110px;
}

.new-arrival-hero-text {
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    max-width: 100%;
    width: 100%;
}

.new-arrival-hero-eyebrow,
.new-arrival-headline,
.new-arrival-intro {
    grid-column: 1 / -1;
}

.new-arrival-hero-eyebrow {
    justify-self: start;
    margin-bottom: 24px;
}

.new-arrival-headline {
    margin: 0 0 22px;
    font-size: 64px;
    letter-spacing: -2.8px;
    line-height: .95;
}

.new-arrival-intro {
    max-width: 440px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
}

.new-arrival-drop,
.new-arrival-scroll {
    grid-row: 5;
}

.new-arrival-drop {
    grid-column: 1;
    gap: 10px;
    margin: 0;
    font-size: 10px;
    letter-spacing: 2px;
}

.new-arrival-scroll {
    grid-column: 2;
    padding: 14px 22px;
}

/* the hairline, in a row of its own between the intro and the bottom row */
.new-arrival-hero-text::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 4;
    height: 1px;
    margin: 28px 0 22px;
    background: rgb(17 17 17 / 12%);
}

.new-arrival-hero-media {
    width: 100%;
}

.new-arrival-slide {
    flex-basis: 50%;
}

.new-arrival-slider-track {
    gap: 14px;
}

.new-arrival-slider-controls {
    gap: 16px;
    margin-top: 22px;
}

.new-arrival-slider-arrow {
    width: 42px;
    height: 42px;
}

.new-arrival-feature-caption {
    flex-wrap: wrap;
    gap: 6px 10px;
}

.new-arrival-feature-name {
    font-size: 13px;
}

.new-arrival-feature-quick {
    display: none;
}

.shop-sticky {
    top: 61px;
    padding-top: 14px;
}

.shop-sticky.is-stuck {
    padding-top: 10px;
}

.shop-head {
    gap: 16px;
    margin-bottom: 14px;
}

.shop-title {
    font-size: 24px;
    letter-spacing: -.5px;
}

.shop-sticky.is-stuck .shop-title {
    font-size: 18px;
}

.shop-tools {
    gap: 18px;
}

.shop-tool {
    gap: 6px;
    font-size: 11px;
}

.shop-tool svg {
    width: 18px;
    height: 18px;
}

.shop-tool > span:not(.shop-tool-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shop-sort-current {
    display: none;
}

.shop-sort-menu {
    width: 230px;
}

.shop-sort-head {
    margin-bottom: 4px;
    padding: 8px 14px 8px;
}

.shop-sort-option {
    padding: 8px 10px;
    font-size: 12px;
}

.shop-tabs,
.shop-terms-inner,
.shop-terms-group {
    gap: 22px;
}

.shop-terms-group + .shop-terms-group {
    padding-left: 22px;
}

.shop-tab, .shop-term {
    font-size: 12px;
    padding: 10px 0 8px;
}

.shop-status {
    padding: 16px 0 18px;
}

.shop-end {
    margin: 20px auto 60px;
}

.shop-end-title {
    font-size: 22px;
}

.shop-end-top {
    display: none;
}

/* filters: a sheet that rises from the bottom, like quick view and quick add */
.shop-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    box-shadow: 0 -20px 40px -20px rgb(0 0 0 / 25%);
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), visibility .55s;
}

.shop-drawer.is-open {
    transform: translateY(0);
}

.shop-drawer-head {
    padding: 14px 20px;
}

.shop-drawer-title {
    font-size: 14px;
}

.shop-drawer-close {
    width: 40px;
    height: 40px;
}

.shop-drawer-close svg {
    width: 20px;
    height: 20px;
}

.shop-drawer-body {
    padding: 0 20px;
}

.shop-drawer-group summary {
    padding: 16px 0;
    font-size: 12px;
}

.shop-drawer-checks {
    gap: 14px;
    padding-bottom: 18px;
}

.shop-check {
    font-size: 13px;
}

.shop-check input {
    width: 18px;
    height: 18px;
}

/* chips: a touch-sized minimum, sizes (S, 28 …) centred */
.shop-drawer-terms {
    gap: 6px;
    padding-bottom: 18px;
}

.shop-drawer-terms .shop-term {
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
}

.shop-price {
    gap: 10px;
    padding-bottom: 18px;
}

.shop-price-field span {
    font-size: 10px;
}

/* 16px stops iPhone Safari zooming in on focus */
.shop-price-field input {
    font-size: 16px;
}

.shop-drawer-foot {
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}

.shop-drawer-foot button {
    padding: 14px 16px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.shop-drawer-clear {
    flex-shrink: 0;
}

.qv {
    align-items: flex-end;
    padding: 0;
}

.qv-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qv.is-open .qv-dialog {
    transform: translateY(0);
}

.qv-body {
    max-height: 92vh;
}

.qv-content {
    flex-direction: column;
}

.qv-gallery {
    flex: none;
    max-width: none;
}

.qv-main {
    aspect-ratio: 1 / 1;
}

.qv-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.qv-info {
    padding: 28px 22px 30px;
}

.qv-title {
    font-size: 22px;
}

.qv-desc {
    margin-bottom: 22px;
    padding-bottom: 22px;
}

.qv-thumb {
    flex-basis: 46px;
    height: 58px;
}

/* quick add: a sheet from the bottom, over the bottom bar */
.qa {
    align-items: flex-end;
    padding: 0;
}

.qa-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qa.is-open .qa-dialog {
    transform: translateY(0);
}

.qa-body {
    max-height: 86vh;
    padding-bottom: env(safe-area-inset-bottom);
}

.qa-close {
    top: 10px;
    right: 8px;
}

.qa-head {
    gap: 14px;
    padding: 16px 54px 16px 16px;
}

.qa-thumb {
    flex-basis: 48px;
    height: 60px;
}

.qa-title {
    font-size: clamp(13px, 2vw, 14px);
}

.qa-price {
    font-size: clamp(12px, 1.6vw, 13px);
}

.qa-attr-head {
    padding: 18px 16px 12px;
}

.qa-swatches {
    gap: 10px;
    padding: 0 16px 4px;
}

.qa-swatch-btn {
    width: 30px;
    height: 30px;
}

.qa-row-name {
    flex: 1 1 auto;
    font-size: clamp(12px, 1.6vw, 14px);
}

.qa-row {
    height: 46px;
    padding: 0 16px;
}

.qa-row.is-loading::after {
    right: 16px;
}

.qa-done {
    padding: 30px 16px 26px;
}

.qa-message {
    padding: 14px 16px 0;
}

.qa-soldout {
    padding: 22px 16px 4px;
}

.qa-details {
    margin: 16px;
    font-size: clamp(9px, 1.6vw, 10px);
}

/* new arrivals page ends */

/* sale page start */

/* a smaller take on the desktop banner: the words on the left, the photo filling the right and fading
   into the panel behind them, the promo card over the photo's bottom-right corner */
.shop-wrap-sale {
    padding-top: 55px;
}

.sale-hero {
    margin-bottom: 48px;
}

.sale-banner {
    min-height: 440px;
    padding: 56px 0;
}

.sale-banner-img {
    width: 63%;
    height: 100%;
    object-position: center bottom;
}

.sale-banner-shade {
    background: linear-gradient(90deg, #efe8e1 0%, #efe8e1 36%, rgb(239 232 225 / 85%) 46%, rgb(239 232 225 / 30%) 58%, rgb(239 232 225 / 0%) 70%);
}

.sale-banner-text {
    max-width: 330px;
}

.sale-eyebrow {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 2.5px;
}

.sale-eyebrow-line {
    width: 26px;
}

.sale-headline {
    gap: 16px;
}

.sale-pct-num {
    font-size: 112px;
    letter-spacing: -5px;
}

.sale-pct-num sup {
    margin-left: 4px;
}

.sale-words {
    padding: 12px 0 6px;
}

.sale-upto,
.sale-off {
    font-size: 14px;
    letter-spacing: 3px;
}

.sale-words-line {
    margin: 10px 0;
}

.sale-headline-custom {
    max-width: 330px;
    font-size: 46px;
    letter-spacing: -1.5px;
}

.sale-hero-aside {
    max-width: 330px;
    margin-top: 10px;
}

.sale-intro {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
}

.sale-ends {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 24px;
    padding: 12px 0;
}

.sale-countdown {
    gap: 12px;
}

.sale-countdown-part {
    font-size: 20px;
}

/* promo card over the photo's bottom-right corner, in line with the page gutter */
.sale-promo {
    top: auto;
    right: 33px;
    bottom: 28px;
    left: auto;
    width: 150px;
    padding: 42px 14px 16px;
}

.sale-promo-arrow {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
}

.sale-promo-arrow svg {
    width: 16px;
    height: 16px;
}

.sale-promo-label {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 2.5px;
}

.sale-promo-upto {
    font-size: 10px;
    letter-spacing: 2px;
}

.sale-promo-text {
    font-size: 32px;
    letter-spacing: -1.5px;
}

.sale-promo-text span {
    font-size: 14px;
}

/* sale page ends */

/* policy pages start (privacy, terms, shipping & returns) */

.legal {
    padding: 100px 0 60px;
}

.legal-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.legal-eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
}

.legal-title {
    margin-bottom: 12px;
    font-size: 38px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.legal-meta {
    gap: 8px;
    font-size: 12px;
}

.legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

.legal-side {
    position: static;
    gap: 18px;
}

.legal-side-label {
    margin-bottom: 10px;
    font-size: 12px;
}

/* the other policies as a strip of pills that scrolls sideways, above the contents */
.legal-others {
    order: -1;
}

.legal-others .legal-side-label {
    display: none;
}

.legal-others ul {
    display: flex;
    gap: 8px;
    margin: 0 -33px;
    padding: 0 33px;
    overflow-x: auto;
    scrollbar-width: none;
}

.legal-others ul::-webkit-scrollbar {
    display: none;
}

.legal-others li {
    flex-shrink: 0;
}

.legal-others a {
    padding: 9px 14px;
    border: 1px solid #e3ded8;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.legal-others a::after {
    display: none;
}

.legal-others a.is-current {
    border-color: #111;
    background: #111;
    color: #fff;
}

.legal-toc {
    display: none;
}

.legal-content {
    font-size: 15px;
    line-height: 1.7;
}

.legal-content p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.legal-content h2 {
    margin: 30px 0 12px;
    font-size: 21px;
    scroll-margin-top: 90px;
}

.legal-content h3 {
    margin: 24px 0 10px;
    font-size: 17px;
}

.legal-content ul li,
.legal-content ol li {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.legal-content ul li::before {
    top: 10px;
}

.legal-contact {
    margin-top: 64px;
    padding-top: 36px;
}

/* heading on the left, the button beside it */
.legal-contact-head {
    align-items: center;
    gap: 20px 24px;
    margin-bottom: 32px;
}

.legal-contact-title {
    margin-bottom: 8px;
    font-size: 32px;
    letter-spacing: -1px;
}

.legal-contact-text {
    max-width: 380px;
    font-size: 15px;
    line-height: 1.6;
}

.legal-contact-btn {
    flex-shrink: 0;
}

/* two columns, each split from the next by a faint line */
.legal-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.legal-contact-card {
    padding-left: 18px;
}

.legal-contact-icon {
    margin-bottom: 12px;
}

.legal-contact-icon svg {
    width: 21px;
    height: 21px;
}

.legal-contact-label {
    font-size: 11px;
}

.legal-contact-value {
    font-size: 16px;
}

.legal-contact-address {
    font-size: 14px;
}

.legal-contact-note {
    font-size: 13px;
}

/* policy pages ends */

/* faq page start */

.faq {
    padding: 96px 0 50px;
}

.faq-head {
    margin-bottom: 26px;
}

.faq-title {
    margin-bottom: 12px;
    font-size: 38px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.faq-lead {
    font-size: 14px;
    line-height: 1.6;
}

.faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

/* number, question and toggle on one line; long questions wrap beside the number */
.faq-q {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
}

.faq-num {
    width: 24px;
    padding-top: 3px;
    font-size: 13px;
}

.faq-q-text {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.4;
}

.faq-icon {
    width: 28px;
    height: 28px;
}

.faq-icon::before,
.faq-icon::after {
    width: 10px;
    margin-left: -5px;
}

/* the answer lines up under the question, not the number */
.faq-a {
    padding: 0 0 20px 36px;
    font-size: 14px;
    line-height: 1.6;
}

.faq-a p {
    font-size: 14px;
    line-height: 1.6;
}

.faq-side {
    position: static;
    gap: 12px;
}

.faq-card {
    padding: 22px 18px;
    border-radius: 16px;
}

.faq-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
}

.faq-card-icon svg {
    width: 21px;
    height: 21px;
}

.faq-card-title {
    font-size: 18px;
}

.faq-card-text {
    margin-bottom: 16px;
    font-size: 14px;
}

.faq-card-list {
    margin-bottom: 18px;
}

.faq-card-list li {
    font-size: 14px;
}

.faq-quick {
    padding: 18px;
    border-radius: 16px;
}

.faq-quick a {
    padding: 13px 0;
    font-size: 14px;
}

/* faq page ends */

/* search page start */

.search-hero {
    margin-bottom: 32px;
}

.search-hero-form {
    gap: 10px;
    padding-bottom: 12px;
}

.search-hero-icon {
    width: 22px;
    height: 22px;
}

.search-hero-input {
    font-size: clamp(20px, 5.3vw, 24px);
    letter-spacing: -.6px;
}

.search-hero-clear {
    width: 32px;
    height: 32px;
}

.search-hero-clear svg {
    width: 18px;
    height: 18px;
}

.search-hero-submit {
    width: 42px;
    height: 42px;
}

.search-hero-submit svg {
    width: 18px;
    height: 18px;
}

.search-hero-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
}

.search-hero-none {
    margin-top: 28px;
}

.search-hero-none-title {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.3;
}

.search-hero-none-text {
    font-size: 13px;
    line-height: 1.6;
}

.search-hero-row {
    gap: 8px;
    margin-top: 24px;
}

.search-hero-row + .search-hero-row {
    margin-top: 20px;
}

.search-hero-suggest-label {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0 0 2px;
}

.search-hero-chip {
    padding: 8px 13px;
    font-size: 12px;
}

.search-hero-recent-clear {
    margin-left: 4px;
}

.search-hero-panel {
    max-height: 62vh;
    margin-top: 8px;
    padding: 16px 14px;
}

.search-panel-group + .search-panel-group {
    margin-top: 18px;
}

.search-panel-label {
    margin-bottom: 10px;
}

.search-panel-collection {
    padding: 7px 12px;
    font-size: 12px;
}

.search-panel-products {
    margin: 0 -8px;
}

.search-panel-product {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 8px;
}

.search-panel-name {
    font-size: 14px;
}

.search-panel-price {
    font-size: 13px;
}

.search-panel-price del {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
}

.search-panel-all {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.search-panel-empty {
    font-size: 13px;
}

/* trending / you might like */
.search-hero-trending {
    margin-top: 44px;
}

.search-hero-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.search-hero-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.search-hero-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* search page ends */

/* 404 page start */

.error-404-wrap {
    padding: 110px 0 50px;
}

.error-404-eyebrow {
    margin-bottom: 6px;
}

/* the digits fit a 300px screen (they were 300px tall) */
.error-404-digits {
    margin-bottom: 10px;
    font-size: 132px;
    letter-spacing: -6px;
}

.error-404-digit-zero {
    -webkit-text-stroke-width: 1.5px;
}

.error-404-title {
    margin-bottom: 12px;
    font-size: 28px;
    letter-spacing: -.8px;
    line-height: 1.12;
}

.error-404-text {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.6;
}

.error-404-search {
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 10px;
}

.error-404-search-icon {
    width: 20px;
    height: 20px;
}

/* 18px (not under 16) so iPhone Safari doesn't zoom in on focus */
.error-404-search-input {
    font-size: 18px;
}

.error-404-search-submit {
    width: 40px;
    height: 40px;
}

.error-404-actions {
    width: 100%;
    gap: 10px;
    margin-bottom: 26px;
}

.error-404-links {
    gap: 8px 18px;
}

.error-404-link {
    font-size: 13px;
}

.error-404-trending {
    margin-top: 56px;
    padding-top: 28px;
}

.error-404-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.error-404-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.error-404-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* 404 page ends */

/* contact page start */

.contact-us-wrap {
    padding: 120px 0 50px;
}

.contact-us-hero {
    margin-bottom: 100px;
}

.contact-us-word {
    font-size: clamp(80px, 24vw, 170px);
    letter-spacing: -4px;
}

.contact-us-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.contact-us-title {
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 1.12;
}

.contact-us-lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.contact-us-badge {
    width: 84px;
    height: 84px;
}

.contact-us-badge-dot {
    width: 40px;
    height: 40px;
}

.contact-us-badge-dot svg {
    width: 17px;
    height: 17px;
}

.contact-us-row {
    row-gap: 14px;
}

/* form panel */
.contact-us-form > .wpcf7 {
    padding: 24px 16px;
    border-radius: 20px;
}

.contact-us-fields {
    row-gap: 18px;
}

.contact-us-field label {
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 1px;
}

/* 16px stops iPhone Safari zooming in on focus */
.contact-us-field input,
.contact-us-field textarea {
    height: 48px;
    padding: 8px 14px;
    font-size: 16px;
}

.contact-us-field textarea {
    height: 140px;
    padding: 12px 14px;
}

.contact-us-submit {
    margin-top: 24px;
}

.contact-us-send {
    height: 48px;
    padding: 0 24px;
}

.contact-us-send-arrow {
    width: 48px;
    height: 48px;
    background-size: 18px;
}

/* the note drops under the button instead of squeezing beside it */
.contact-us-note {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12px;
}

.contact-us-cf7 .wpcf7-response-output {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    font-size: 13px;
}

/* details: stacked under the form, opening with a dark hairline instead of the side line */
.contact-us-card {
    padding: 32px 0 0;
    border-top: 1px solid #111;
    border-left: 0;
}

.contact-us-block + .contact-us-block {
    margin-top: 22px;
    padding-top: 22px;
}

.contact-us-block-title {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
}

.contact-us-block-icon svg {
    width: 20px;
    height: 20px;
}

.contact-us-lines li {
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.contact-us-lines li span {
    min-width: 74px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.contact-us-card .contact-us-socials a {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* contact page ends */

/* about page ends */

/* product page start */

.pd {
    padding: 96px 0 50px;
}

.pd-crumbs {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
}

.pd-crumbs [aria-current] {
    max-width: 150px;
}

.pd-crumbs-sep {
    width: 10px;
}

/* photo on the left (thumbnails in a strip under it), the details beside it: a full-width 3:4 photo
   would be taller than the screen at this width */
.pd-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
}

.pd-layout > .pd-gallery {
    flex: 0 0 46%;
    max-width: 46%;
    min-width: 0;
}

.pd-layout > .pd-info {
    flex: 1 1 0;
    min-width: 0;
}

/* large photo on top, thumbnails in a strip under it that scrolls sideways */
.pd-gallery {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
}

.pd-gallery > .pd-main {
    flex: 0 0 auto;
}

.pd-main {
    border-radius: 12px;
}

.pd-thumbs-wrap {
    flex: 0 0 auto;
    width: 100%;
}

.pd-thumbs {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.pd-thumb {
    flex: 0 0 56px;
    width: 56px;
    border-radius: 8px;
}

.pd-thumbs-more {
    display: none;
}

.pd-zoom {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
}

.pd-zoom svg {
    width: 18px;
    height: 18px;
}

.pd-info {
    position: static;
}

.pd-notices .woocommerce-error,
.pd-notices .woocommerce-message,
.pd-notices .woocommerce-info {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 13px;
}

.pd-tag {
    margin-bottom: 12px;
    padding: 5px 10px;
    font-size: 11px;
}

.pd-title {
    margin-bottom: 10px;
    font-size: 28px;
    letter-spacing: -.8px;
    line-height: 1.15;
}

.pd-rating {
    margin-bottom: 16px;
    font-size: 13px;
}

.pd-rating .pd-stars svg {
    width: 14px;
    height: 14px;
}

.pd-price-block {
    margin-bottom: 18px;
}

.pd-price {
    gap: 10px;
    font-size: 18px;
}

.pd-price del {
    font-size: 14px;
}

.pd-price-note {
    margin-top: 8px;
    font-size: 12px;
}

.pd-short {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    line-height: 1.65;
}

.pd .variations_form .variations tr {
    margin-bottom: 18px;
}

.pd .variations_form .variations .label label {
    margin-bottom: 10px;
    font-size: 13px;
}

.pd-chosen,
.pd-size-guide {
    font-size: 13px;
}

.pd-chip {
    min-width: 46px;
    height: 42px;
    padding: 0 12px;
}

.pd-chips-color .pd-chip {
    width: 42px;
    height: 42px;
}

.pd .variations_button {
    gap: 8px;
}

.pd .single-product-add-to-cart {
    min-width: 0;
}

.pd .single_add_to_cart_button {
    height: 48px;
    padding: 0 14px;
    font-size: 12px;
}

.pd-wish {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
}

.pd-wish i {
    font-size: 18px;
}

/* perks: a list down the narrow details column, icon beside the words */
.pd-perks {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.pd-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.pd-perks svg {
    width: 22px;
    height: 22px;
}

.pd-perks strong {
    font-size: 11px;
}

/* details tabs, then the lifestyle photo under them */
.pd-about,
.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 44px;
}

.pd-tabs-nav {
    gap: 24px;
    margin-bottom: 20px;
}

.pd-tab {
    padding-bottom: 12px;
    font-size: 14px;
}

.pd-tab-panel.pd-content {
    max-width: none;
    font-size: 14px;
}

.pd-tab-panel .pd-specs {
    max-width: none;
}

.pd-specs div {
    font-size: 13px;
}

.pd-about-photo {
    border-radius: 12px;
}

.pd-section {
    margin-top: 48px;
    padding-top: 36px;
}

.pd-section-head {
    margin-bottom: 22px;
}

.pd-section-title {
    font-size: 24px;
    letter-spacing: -.5px;
}

.pd-section-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* reviews: the score card first, then the list and the form */
.pd-reviews-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.pd-review-summary {
    position: static;
    padding: 22px 20px;
    border-radius: 14px;
}

.pd-review-avg {
    font-size: 48px;
    letter-spacing: -2px;
}

.pd-review-bars {
    margin-top: 18px;
}

.pd-review {
    padding: 20px 0;
}

.pd-review .children {
    margin-left: 20px;
}

.pd-review-head {
    gap: 12px;
}

.pd-review-text,
.pd-review-empty,
.pd-review-note {
    font-size: 14px;
}

.pd-review-form-wrap {
    margin-top: 28px;
    padding: 20px 16px;
    border-radius: 14px;
}

.pd-review-form-title {
    margin-bottom: 18px;
    font-size: 18px;
}

.pd-star-pick-row svg {
    width: 32px;
    height: 32px;
}

.pd-review-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* full-screen viewer: arrows under the photo, out of its way */
.pd-viewer {
    padding: 70px 12px 84px;
}

.pd-viewer-close,
.pd-viewer-nav {
    width: 44px;
    height: 44px;
}

.pd-viewer-close {
    top: 14px;
    right: 14px;
}

.pd-viewer-nav {
    bottom: 20px;
}

.pd-viewer-prev {
    left: 16px;
}

.pd-viewer-next {
    right: 16px;
}

.pd-viewer-count {
    bottom: 32px;
}

.qa-done-title {
    font-size: 14px;
}

.qa-done-cart {
    height: 40px;
    font-size: 11px;
}

/* product page ends */

/* cart page start */

.cart-page {
    padding: 96px 0 50px;
}

.cart-head {
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.cart-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.cart-title {
    margin-bottom: 6px;
    font-size: 38px;
    letter-spacing: -1.2px;
}

.cart-sub {
    font-size: 12px;
}

.cart-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 13px;
}

.cart-ship {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
}

.cart-ship p {
    margin-bottom: 10px;
    font-size: 13px;
}

.cart-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
}

.cart-items {
    flex: 0 0 auto;
}

.cart-item {
    gap: 14px;
    padding: 18px 0;
}

.cart-item-img {
    width: 100%;
    max-width: 110px;
    height: auto;
    border-radius: 10px;
}

.cart-item-top {
    gap: 10px;
}

.cart-item-name {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.35;
}

.cart-item-meta dl {
    margin-bottom: 4px;
    font-size: 12px;
}

.cart-item-unit {
    font-size: 12px;
}

.cart-item-total {
    font-size: 14px;
}

.cart-item-bottom {
    gap: 10px 12px;
    margin-top: 14px;
}

.cart-qty-btn {
    width: 36px;
    height: 36px;
}

.cart-qty-input {
    width: 30px;
}

.cart-item-actions {
    gap: 14px;
}

.cart-item-link {
    font-size: 12px;
}

.cart-summary {
    position: static;
    flex: 0 0 auto;
    padding: 22px 18px;
    border-radius: 14px;
}

.cart-summary-title {
    margin-bottom: 8px;
    font-size: 16px;
}

.cart-line {
    padding: 6px 0;
    font-size: 14px;
}

.cart-line-total {
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
}

/* cart toast above the bottom bar */
.cart-toast {
    right: 30px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 30px;
    width: auto;
    max-width: none;
    gap: 10px;
    padding: 12px 10px 12px 14px;
    font-size: 13px;
    transform: translateY(24px) scale(.96);
}

.cart-toast.is-visible {
    transform: translateY(0) scale(1);
}

.cart-toast-undo {
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
}

.cart-coupon {
    margin: 16px 0 18px;
}

.cart-coupon-form input {
    height: 40px;
    font-size: 12px;
}

.cart-checkout {
    width: 100%;
    height: 44px;
}

.cart-trust {
    gap: 16px;
    margin-top: 16px;
}

.cart-suggest {
    margin-top: 48px;
    padding-top: 32px;
}

.cart-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

.cart-suggest-head {
    margin-bottom: 20px;
}

.cart-suggest-link {
    flex-shrink: 0;
    font-size: 12px;
}

.cart-void {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0;
}

.cart-void-text {
    flex: 0 0 auto;
    max-width: none;
}

.cart-void-title {
    margin-bottom: 16px;
    font-size: 38px;
    letter-spacing: -1.6px;
    line-height: 1.02;
}

.cart-void-lead {
    max-width: none;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.65;
}

.cart-void-actions {
    margin-bottom: 30px;
}

.cart-void-actions .acc-btn {
    flex: 1 1 auto;
    padding: 0 18px;
}

.cart-void-perks {
    gap: 10px;
    padding-top: 20px;
}

.cart-void-perks li {
    gap: 8px;
    font-size: 11px;
    line-height: 1.45;
}

.cart-void-perks svg {
    width: 22px;
    height: 22px;
}

.cart-void-perks strong {
    font-size: 12px;
}

/* the photo mosaic is left out here too: the page gets to the suggestions sooner */
.cart-void-media {
    display: none;
}

.cart-void-tile {
    border-radius: 12px;
}

.cart-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 24px) / 2.4);
    grid-auto-flow: column;
    gap: 12px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-tiles::-webkit-scrollbar {
    display: none;
}

.cart-tile {
    scroll-snap-align: start;
}

.cart-tile {
    border-radius: 12px;
}

.cart-tile-info {
    right: 12px;
    bottom: 12px;
    left: 12px;
}

.cart-tile-info strong {
    font-size: 17px;
}

/* cart page ends */

/* checkout page start */

.co {
    padding: 96px 0 50px;
}

/* title, then the Cart → Details → Confirmation steps under it */
.co-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.co-eyebrow {
    margin-bottom: 10px;
}

.co-title {
    font-size: 34px;
    letter-spacing: -1.2px;
}

.co-steps li {
    gap: 6px;
    font-size: 10px;
    letter-spacing: .8px;
}

.co-steps li + li::before {
    width: 18px;
    margin: 0 8px;
}

.co-steps a {
    gap: 6px;
}

.co-steps-dot {
    width: 8px;
    height: 8px;
}

/* one column, the order summary first so the items and total are seen before the details */
.co-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.co-side {
    position: relative;
    order: -1;
    padding: 20px 16px;
    border-radius: 16px;
}

.co-main,
#customer_details {
    gap: 12px;
}

.co .woocommerce-error,
.co .woocommerce-message,
.co .woocommerce-info {
    padding: 12px 14px;
    font-size: 13px;
}

/* step cards */
.co-step {
    padding: 20px 16px;
    border-radius: 16px;
}

/* "Have an account? Sign in" / "Secure" drop under the title instead of overflowing beside it */
.co-step-head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.co-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.co-step-text {
    flex: 1 1 0;
}

.co-step-title {
    font-size: 17px;
}

.co-step-sub {
    font-size: 12px;
}

.co-step-aside {
    flex: 0 0 100%;
    margin-left: 40px;
    font-size: 12px;
    white-space: normal;
}

/* fields: full width; first / last name and state / PIN code stay in pairs */
.co-fields {
    gap: 10px;
}

.co #billing_phone_field,
.co #billing_email_field,
.co #billing_city_field,
.co #shipping_city_field {
    grid-column: span 6;
}

.co #billing_state_field,
.co #billing_postcode_field,
.co #shipping_state_field,
.co #shipping_postcode_field {
    grid-column: span 3;
}

.co .co-fields .form-row > label {
    left: 13px;
    right: 13px;
}

/* 16px stops iPhone Safari zooming in on focus */
.co .co-fields .input-text,
.co .co-fields select,
.co .co-fields textarea {
    height: 56px;
    padding: 24px 13px 8px;
    font-size: 16px;
}

.co .co-fields textarea {
    height: auto;
    min-height: 110px;
    padding-top: 28px;
}

.co .co-fields .select2-container .select2-selection--single {
    height: 56px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 13px;
    font-size: 16px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__arrow {
    top: 15px;
}

.co-check,
.co .woocommerce-form__label-for-checkbox {
    align-items: flex-start;
    font-size: 13px !important;
    line-height: 1.5;
}

.co-check input,
.co .woocommerce-form__label-for-checkbox input {
    margin-top: 1px;
}

.co-ship-to h3 .co-check,
.co-account > .co-check {
    padding: 14px;
}

.co-notes[open] summary {
    margin-bottom: 16px;
}

/* payment */
.co .wc_payment_method > label {
    padding: 14px;
    font-size: 13px;
}

.co .payment_box {
    padding: 0 14px 14px 44px;
    font-size: 12px;
}

.co .woocommerce-terms-and-conditions-wrapper {
    font-size: 12px;
}

.co #place_order {
    height: 52px;
}

/* summary */
.co-side-head {
    margin-bottom: 16px;
}

.co-side-title {
    font-size: 17px;
}

.co-item {
    gap: 12px;
    margin-bottom: 12px;
}

.co-item-img {
    width: 52px;
    height: 64px;
}

.co-item-name,
.co-item-price {
    font-size: 13px;
}

.co-item-meta dl {
    font-size: 11px;
}

.co-total-row {
    font-size: 13px;
}

.co-total-row.order-total {
    font-size: 17px;
}

.co-ship-method label {
    padding: 11px 12px;
    font-size: 12px;
}

.co-coupon-row input {
    font-size: 16px;
}

.co-trust {
    gap: 8px 14px;
}

.co-trust li {
    font-size: 11px;
}

/* order received */
.co-thanks-hero {
    margin-bottom: 32px;
}

.co-thanks-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.co-thanks-icon svg {
    width: 28px;
    height: 28px;
}

.co-thanks-title {
    margin-bottom: 12px;
    font-size: 34px;
    letter-spacing: -1.4px;
    line-height: 1.05;
}

.co-thanks-lead {
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.6;
}

/* order facts as a 2 × 2 grid */
.co-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 14px;
}

.co-facts div {
    padding: 14px;
}

.co-facts div + div {
    border-left: 0;
}

.co-facts div:nth-child(even) {
    border-left: 1px solid #ececec;
}

.co-facts div:nth-child(n + 3) {
    border-top: 1px solid #ececec;
}

.co-facts dt {
    font-size: 10px;
    letter-spacing: 1.2px;
}

.co-facts dd {
    font-size: 14px;
    word-break: break-word;
}

.co-thanks-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.co-next {
    padding: 20px 16px;
}

.co-thanks-actions .acc-btn {
    flex: 1 1 100%;
}

/* checkout page ends */

/* wishlist page start */

.wish {
    padding: 96px 0 50px;
}

.wish-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.wish-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.wish-title {
    margin-bottom: 6px;
    font-size: 34px;
    letter-spacing: -1.2px;
}

.wish-sub {
    font-size: 12px;
}

.wish-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.wish-note {
    margin: -6px 0 22px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.wish-empty {
    margin-top: 10px;
    padding: 40px 8px;
}

.wish-empty-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.wish-empty-icon svg {
    width: 26px;
    height: 26px;
}

.wish-empty-title {
    font-size: 21px;
}

.wish-empty-text {
    margin-bottom: 22px;
    font-size: 13px;
}

.wish-empty .acc-btn {
    height: 44px;
    padding: 0 22px;
    letter-spacing: 1.5px;
}

.wish-suggest {
    margin-top: 40px;
    padding-top: 32px;
}

.wish-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

/* wishlist page ends */

/* my account page start */

.auth {
    padding: 100px 0 56px;
}

/* still stacked (form, then photo), sized for the wider screen: the form in a centred 460px column,
   paired fields side by side again, and a wider photo banner that has room for the perks */
.auth-card {
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    border-radius: 26px;
}

.auth-side {
    flex: none;
    padding: 30px 28px 20px;
}

.auth-body {
    padding: 20px 0 28px;
}

.auth-switch-btn {
    padding: 10px 12px;
}

.auth-title {
    font-size: 30px;
    letter-spacing: -.8px;
}

.auth-lead {
    margin-bottom: 26px;
    font-size: 13px;
}

.auth-saved {
    margin: -12px 0 24px;
    font-size: 12px;
}

/* first / last name and the two passwords side by side */
.auth-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 16px stops iPhone Safari zooming in on focus */
.auth-field input {
    height: 46px;
    font-size: 16px;
}

.auth-check {
    font-size: 13px;
}

.auth-submit {
    height: 48px;
}

.auth-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.auth-visual {
    flex: none;
    min-height: 440px;
    border-radius: 0 20px 20px 20px;
}

.auth-visual-img {
    object-position: top;
}

.auth-notch-top {
    width: 110px;
    height: 50px;
    border-bottom-right-radius: 20px;
}

.auth-notch-top::before,
.auth-notch-top::after {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 100%, transparent 19.5px, #f6f3ef 20px);
}

/* the perks run along the bottom, where this notch would cut into them */
.auth-notch-bottom {
    display: none;
}

.auth-tag {
    top: 18px;
    right: 18px;
    padding: 8px 12px;
    font-size: 11px;
}

.auth-visual-content {
    right: 24px;
    bottom: 24px;
    left: 24px;
}

.auth-quote {
    margin-bottom: 18px;
    font-size: 30px;
}

.auth-perks {
    max-width: none;
    gap: 20px;
    padding-top: 16px;
}

.auth-perk {
    font-size: 12px;
}

/* signed in: greeting, then the sections as a strip of pills that scrolls sideways */

.acc {
    padding: 96px 0 50px;
}

.acc-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.acc-eyebrow {
    margin-bottom: 10px;
}

.acc-title {
    margin-bottom: 6px;
    font-size: 28px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.acc-sub {
    font-size: 12px;
}

.acc-logout {
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
}

.acc-logout .acc-icon {
    width: 18px;
    height: 18px;
}

.acc-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}

.acc-nav {
    position: static;
    flex: none;
    margin: 0 -33px;
}

.acc-nav ul {
    display: flex;
    gap: 8px;
    padding: 0 33px;
    overflow-x: auto;
    scrollbar-width: none;
}

.acc-nav ul::-webkit-scrollbar {
    display: none;
}

.acc-nav ul li {
    flex-shrink: 0;
    margin: 0;
}

.acc-nav-link {
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.acc-nav-link.is-active {
    border-color: #111;
}

.acc-nav-link .acc-icon {
    width: 17px;
    height: 17px;
}

.acc-nav-count {
    margin-left: 2px;
}

/* log out is already in the greeting */
.acc-nav-sep {
    display: none;
}

.acc-section + .acc-section {
    margin-top: 36px;
}

.acc-section-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.acc-h2 {
    margin-bottom: 16px;
    font-size: 22px;
}

.acc-lead {
    margin: -6px 0 20px;
    font-size: 13px;
    line-height: 1.6;
}

.acc-btn {
    height: 44px;
    padding: 0 20px;
    letter-spacing: 1.5px;
}

.acc-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.acc-stat {
    padding: 16px;
    border-radius: 14px;
}

.acc-stat-label {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.acc-stat-value {
    margin: 12px 0 10px;
    font-size: 34px;
}

.acc-stat-text {
    font-size: 24px;
}

.acc-stat-link {
    font-size: 12px;
}

/* recent orders: number and date on top, status and total under them */
.acc-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 2px;
}

.acc-row-main {
    flex: 1 1 100%;
}

.acc-row-main strong {
    font-size: 14px;
}

.acc-row-main span {
    font-size: 12px;
}

.acc-row-total {
    min-width: 0;
    margin-left: auto;
    font-size: 14px;
}

.acc-links {
    grid-template-columns: 1fr;
    gap: 10px;
}

.acc-link-card {
    padding: 16px;
}

.acc-empty {
    padding: 40px 18px;
}

.acc-empty-title {
    font-size: 17px;
}

.acc-empty-text {
    font-size: 13px;
}

/* orders: the buttons get their own full-width row */
.acc-order-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
}

.acc-order-number {
    margin-right: 8px;
    font-size: 14px;
}

.acc-order-date {
    font-size: 12px;
}

.acc-order-body {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
}

.acc-thumb {
    width: 48px;
    height: 60px;
}

.acc-order-info {
    flex: 1 1 0;
}

.acc-order-items {
    font-size: 13px;
}

.acc-order-total {
    font-size: 15px;
}

.acc-order-actions {
    flex: 1 1 100%;
}

.acc-order-actions .acc-btn {
    flex: 1 1 0;
    height: 42px;
    padding: 0 12px;
    font-size: 10px;
}

.acc-order-actions .acc-btn-sm {
    height: 38px;
}

.acc-pager {
    gap: 10px;
    margin-top: 22px;
}

/* single order */
.acc-order-actions-top {
    margin-top: 18px;
}

.acc-notice {
    padding: 12px 14px;
    font-size: 13px;
}

.acc-track-step {
    padding-right: 8px;
}

.acc-track-step strong {
    font-size: 13px;
}

.acc-track-step span {
    font-size: 11px;
}

.acc-item {
    gap: 12px;
    padding: 14px 0;
}

.acc-item-img {
    width: 60px;
    height: 76px;
    border-radius: 8px;
}

.acc-item-name,
.acc-item-price {
    font-size: 14px;
}

.acc-item-meta,
.acc-item-qty {
    font-size: 12px;
}

.acc-totals {
    max-width: none;
}

.acc-total-row {
    font-size: 13px;
}

.acc-total-order_total {
    font-size: 16px;
}

.acc-order-note,
.acc-note-text p {
    font-size: 13px;
}

.acc-address-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.acc-card {
    padding: 18px;
    border-radius: 14px;
}

.acc-card address {
    margin-bottom: 18px;
    font-size: 13px;
}

.acc-form .form-row-first,
.acc-form .form-row-last {
    flex: 0 0 100%;
}

.acc-form .input-text,
.acc-form select,
.acc-form textarea {
    height: 46px;
    font-size: 16px;
}

.acc-form textarea {
    height: auto;
}

.acc-form .select2-container .select2-selection--single {
    height: 46px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
    line-height: 44px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.acc-fieldset {
    padding: 18px 16px;
    border-radius: 14px;
}

.acc-form-actions .acc-btn {
    flex: 1 1 auto;
}

.acc-content .woocommerce-error, .acc-content .woocommerce-message, .acc-content .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 12px;
}

/* my account page ends */

}

@media only screen and (min-width: 720px) and (max-width: 991.98px) {

.wear-col {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}

.wear-wrap .wear-grid > .wear-col:nth-child(n + 7),
.search-hero-trending .wear-grid > .wear-col:nth-child(n + 4),
.error-404-trending .wear-grid > .wear-col:nth-child(n + 4) {
    display: none;
}

/* collections: a swipeable strip, about 3.3 across with the next one peeking in */
.cart-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 36px) / 3.3);
    grid-auto-flow: column;
    gap: 12px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-tiles::-webkit-scrollbar {
    display: none;
}

.cart-tile {
    scroll-snap-align: start;
}

}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {

/* common styles for all pages on small screens start */

.custom-container {
    padding-right: 40px !important;
    padding-left: 40px !important;
}

.cursor-dot {
    display: none;
}

.page-loader {
    padding: 0 40px;
}

.page-loader-word {
    font-size: 64px;
    letter-spacing: -2.5px;
}

.page-loader-space {
    width: 18px;
}

.page-loader-char {
    padding-bottom: 4px;
}

.page-loader-count {
    top: -30px;
    right: 0;
    font-size: 18px;
}

.page-loader-photo {
    width: 150px;
}

.eyebrow {
    gap: 8px;
    letter-spacing: 3px;
}

.eyebrow-line {
    width: 16px;
}

/* bottom bar on tablets: a compact pill centred at the bottom instead of a full-width strip (the four
   icons would sit about 170px apart). Icon and label side by side, Wishlist its own small pill, and
   back to top a matching square that appears beside the bar rather than above it */
.mobile-bar {
    position: fixed;
    right: auto;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 100;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.mobile-bar-main,
.mobile-bar-side {
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.mobile-bar-main {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 6px;
}

.mobile-bar-item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: #111111;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.mobile-bar-item:hover {
    background: rgb(17 17 17 / 5%);
    color: #111111;
    text-decoration: none;
}

.mobile-bar-item svg {
    display: block;
    width: 20px;
    height: 20px;
}

.mobile-bar-item.is-active,
html.mega-menu-primary-off-canvas-open .mobile-bar-menu {
    background: rgb(180 131 95 / 20%);
    color: #111111;
}

/* while the menu is open, Menu is the only highlighted shortcut */
html.mega-menu-primary-off-canvas-open .mobile-bar-main .mobile-bar-item.is-active {
    background: none;
}

/* the wishlist tile is an item and a panel at once: restate the panel look the item rule clears */
.mobile-bar .mobile-bar-side {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
}

.mobile-bar .mobile-bar-side.is-active {
    background: rgb(244 232 222 / 92%);
}

.mobile-bar-icon {
    position: relative;
}

.mobile-bar-icon .cart-count {
    top: -6px;
    right: -10px;
}

/* back to top: a bronze square level with the bar, just past its right end, so the bar stays centred */
.mobile-bar-top {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #B4835F;
    color: #ffffff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    pointer-events: auto;
}

.mobile-bar-top svg {
    width: 20px;
    height: 20px;
}

.mobile-bar.is-scrolled .mobile-bar-top {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.footer-wrapper {
    padding-bottom: 92px;
}

/* common styles for all pages on small screens ends */

/* home page start */

/* header section start */

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 0 40px !important;
}

.header-nav {
    order: 1;
    justify-self: start;
}

.header-logo {
    order: 2;
}

.header-user-actions {
    order: 3;
    justify-self: end;
    gap: 18px;
}

.header-user-actions .header-icon:nth-child(n+3) {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle {
    justify-content: flex-start;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-left,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-center,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right {
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
    transform: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box {
    width: 22px;
    height: 16px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    width: 22px;
    height: 1.5px;
    border-radius: 0;
    background-color: #111;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    top: 0;
    margin-top: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
    top: 7px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    top: 14px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    transform: translate3d(0, 7px, 0) rotate(45deg);
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg);
}

.header-logo img {
    height: 55px;
    max-width: 115px;
}

.f-nav .header-logo img {
    height: 55px;
}

html.mega-menu-primary-off-canvas-open .header-wrapper {
    background: #ffffff;
}

html.mega-menu-primary-off-canvas-open .header-user-actions .search-toggle {
    visibility: hidden;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    top: 65px;
    right: auto;
    left: -100%;
    width: 100%;
    height: calc(100dvh - 65px);
    max-height: calc(100dvh - 65px);
    justify-content: flex-start;
    gap: 0;
    padding: 24px 0 110px;
    background: #ffffff;
}

/* the panel scrolls on its own (its height is fixed to the screen), without showing a scrollbar;
   contain keeps the page behind from scrolling once the panel reaches its end */
.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary::-webkit-scrollbar {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    right: auto;
    left: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open::after,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close {
    display: none;
}

/* panel contents on the 40px page gutter, sized up for a tablet */
.header-nav #mega-menu-wrap-primary #mega-menu-primary .header-menu-extra {
    display: block;
    padding: 0 40px 20px;
    text-align: left;
}

.header-menu-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #111111;
}

.header-menu-search i {
    color: #111111;
    font-size: 20px;
}

.header-menu-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111111;
    font-size: 16px;
}

.header-menu-search input::placeholder {
    color: rgb(17 17 17 / 60%);
}

.header-menu-cats {
    display: flex;
    gap: 12px;
    margin: 20px -40px 0;
    padding: 0 40px;
    overflow-x: auto;
    scrollbar-width: none;
}

.header-menu-cats::-webkit-scrollbar {
    display: none;
}

.header-menu-cat {
    position: relative;
    flex: 0 0 auto;
    display: block;
    /* about 4.4 across (four full, the next peeking in); 48px = the four 12px gaps */
    width: calc((100% - 48px) / 4.4);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.header-menu-cat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-menu-cat span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 26px 10px 9px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 65%) 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    padding: 12px 40px;
    background-image: none;
    color: #111111;
    font-size: 18px;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.5;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background-color: #f5f5f7;
    color: #111111;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    padding: 12px 40px 12px 58px;
    background-color: #ffffff;
    color: rgb(17 17 17 / 75%);
    font-size: 14px;
    line-height: 1.5;
    text-transform: uppercase;
}

.header-icon {
    font-size: 22px;
}

/* header section ends */

/* banner section start */

.banner-wrap {
    padding: 100px 0 0;
}

.banner-line-v {
    top: -100px;
}

.banner-col-left,
.banner-col-right {
    padding-bottom: 14px;
}

.banner-col-right {
    padding-left: 20px;
}

.banner-title {
    font-size: 54px;
}

.banner-col-left .banner-title {
    margin-top: 26px;
}

.banner-title-2 {
    margin-top: 72px;
    white-space: normal;
}

.banner-copy {
    max-width: 230px;
    margin-top: 18px;
}

.banner-text p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.55;
}

.banner-cta {
    padding-right: 12px;
}

.banner-btn {
    gap: 12px;
    margin-top: 20px;
    padding: 4px 4px 4px 16px;
    font-size: 15px;
}

.banner-btn::before {
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 34px;
}

.banner-btn:hover::before {
    width: calc(100% - 8px);
}

.banner-btn-icon {
    width: 34px;
    height: 34px;
}

.banner-btn-icon svg {
    width: 17px;
    height: 17px;
}

.banner-quality {
    left: 78px;
    bottom: 20px;
    width: 96px;
}

.banner-quality span {
    top: -12px;
    left: 30px;
    font-size: 11px;
}

.banner-stat strong {
    font-size: 30px;
}

.banner-stat span {
    margin-top: 6px;
    font-size: 12px;
}

.banner-social {
    gap: 12px;
    margin-top: 6px;
}

.banner-social a {
    font-size: 15px;
}

/* banner section ends */

/* legends film section start */

.legends-film {
    height: 100svh;
    min-height: 480px;
}

.legends-film-head {
    padding: 0 24px !important;
}

.legends-film-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 2px;
}

.legends-film-title {
    font-size: 44px;
    max-width: 590px;
    text-wrap: balance;
    margin: 0 auto 16px;
}

.legends-film-text {
    max-width: 500px;
    font-size: 14px;
    line-height: 1.5;
}

.legends-film-frame {
    inset: 75px 12px 14px;
}

.legends-film-corner {
    width: 16px;
    height: 16px;
}

.legends-film-hud {
    inset: 89px 26px 28px;
}

.legends-film-hud-row {
    gap: 12px;
}

.legends-film-hud-label {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 2px;
}

.legends-film-rec {
    width: 6px;
    height: 6px;
}

.legends-film-timecode {
    font-size: 10px;
    letter-spacing: 1px;
}

/* legends film section ends */

/* new arrivals section start */

.new-arrival-wrap {
    padding: 80px 0;
}

.new-arrival-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.new-arrival-title {
    font-size: 44px;
    text-wrap: balance;
}

.new-arrival-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.new-arrival-track {
    gap: 12px;
    padding: 0 40px;
}

.new-arrival-card {
    flex: 0 0 240px;
}

.new-arrival-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.new-arrival-info {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.new-arrival-cat {
    margin-bottom: 4px;
    font-size: 10px;
}

.new-arrival-info h3 {
    font-size: clamp(13px, 3.2vw, 14px);
}

.new-arrival-price {
    margin-top: 4px;
    font-size: clamp(11px, 2.6vw, 12px);
}

.new-arrival-link {
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* new arrivals section ends */

/* essential section start */

.essential-collection-wrap {
    padding: 80px 0;
}

.essential-collection-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.essential-collection-title {
    font-size: 44px;
    text-wrap: balance;
}

.essential-collection-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.essential-collection-grid {
    margin-right: -8px !important;
    margin-left: -8px !important;
}

.essential-collection-col {
    margin-bottom: 0;
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.essential-collection-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
}

.essential-collection-name {
    font-size: 22px;
}

.essential-collection-name svg {
    width: 22px;
    height: 22px;
}

/* essential section ends */

/* wear section start */

.wear-wrap {
    padding: 80px 0;
}

.wear-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.wear-title {
    font-size: 44px;
}

.wear-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    text-align: left;
}

.wear-bar {
    top: 71px;
    margin-bottom: 20px;
}

.wear-bar-inner {
    gap: 14px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.wear-bar-title, .wear-bar.is-stuck .wear-bar-title {
    max-width: 0;
    margin-right: -14px;
    opacity: 0;
    display: none;
}

.wear-filter {
    padding: 8px 13px;
}

.wear-bar-link {
    font-size: 10px;
    letter-spacing: 1px;
}

.wear-grid {
    margin-right: -12px !important;
    margin-left: -12px !important;
}

.wear-col {
    margin-bottom: 16px;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.wear-empty {
    padding: 40px 0;
    font-size: 14px;
}

.wear-card-badge {
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    font-size: 9px;
    letter-spacing: 1px;
}

.wear-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.wear-card-actions {
    display: none;
}

.wear-card-info {
    padding-top: 12px;
}

.wear-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.wear-card-cat {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.wear-card-row {
    gap: 8px;
}

.wear-card-title {
    font-size: clamp(12px, 3.2vw, 14px);
}

.wear-card-price {
    margin-top: 4px;
    font-size: clamp(10px, 2.6vw, 12px);
}

.wear-card-swatch {
    width: clamp(8px, 1.6vw,10px);
    height: clamp(8px, 1.6vw,10px);
}

.wear-card-plus {
    width: 24px;
    height: 24px;
}

.wear-card-plus svg {
    width: 18px;
    height: 18px;
}

.wear-card-colors {
    margin-top: 8px;
}

/* wear section ends */

/* campaign section start */

/* a full-bleed photo panel close to the desktop's: tall enough to read as a scene, with the words and
   the ring at its foot (no ring above the text here, so the top padding only shows more photo) */
.campaign-wrap {
    min-height: 680px;
    padding: 140px 0 72px;
}

.campaign-media {
    clip-path: inset(14px 14px 14px 14px round 6px);
}

/* the desktop's corner shade (dark at the bottom left, under the words), the photo clear at the top right */
.campaign-overlay {
    background:
        linear-gradient(20deg, rgb(12 11 10 / 85%) 0%, rgb(12 11 10 / 50%) 42%, rgb(12 11 10 / 0%) 78%),
        radial-gradient(ellipse at center, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 35%) 100%);
}

/* the desktop arrangement, smaller: the text on the left, the ring beside it at the bottom right */
.campaign-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-right: 40px !important;
    padding-left: 40px !important;
}

.campaign-content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
}

.campaign-tag {
    margin-bottom: 22px;
}

.campaign-title {
    margin-bottom: 24px;
    font-size: 64px;
    letter-spacing: -2px;
}

.campaign-text {
    max-width: 420px;
    margin-bottom: 32px;
    padding-left: 16px;
    font-size: 15px;
    line-height: 1.65;
}

.campaign-btn {
    gap: 14px;
    padding: 15px 22px;
    letter-spacing: 2.5px;
}

.campaign-ring {
    position: relative;
    top: auto;
    right: auto;
    width: 136px;
    height: 136px;
    margin-bottom: 8px;
}

.campaign-ring-star {
    width: 20px;
    height: 20px;
}

/* campaign section ends */

/* philosophy section start */

.philosophy-wrap {
    padding: 80px 0;
}

.philosophy-head {
    margin-bottom: 36px;
}

.philosophy-eyebrow {
    margin-bottom: 18px;
}

.philosophy-head h1,
.philosophy-head h2,
.philosophy-head h3 {
    max-width: 560px;
    font-size: 44px;
    letter-spacing: -1.4px;
}

.philosophy-rule {
    margin-bottom: 32px;
}

.philosophy-grid {
    align-items: stretch;
}

/* words left, photo right */
.philosophy-col-text,
.philosophy-col-media {
    flex: 0 0 50%;
    max-width: 50%;
}

.philosophy-col-text {
    justify-content: flex-start;
}

.philosophy-body {
    max-width: 100%;
}

.philosophy-body p {
    margin-bottom: 14px;
    font-size: clamp(16px, 1.9vw, 18px);
    line-height: 1.6;
    text-wrap: pretty;
}

.philosophy-media {
    max-width: 100%;
    aspect-ratio: 4 / 5;
}

.philosophy-col-cta {
    flex: 0 0 100%;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgb(17 17 17 / 12%);
    text-align: left;
}

.philosophy-note {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.philosophy-btn {
    flex-shrink: 0;
    padding: 14px 24px;
}

/* philosophy section ends */

/* counters section starts */ 

.counter-wrap {
    padding: 80px 0;
}

.counter-item {
    padding: 0 24px;
}

.counter-col:first-child .counter-item {
    padding-left: 0;
}

.counter-value {
    margin-bottom: 12px;
    font-size: 56px;
    letter-spacing: -2px;
}

.counter-label {
    font-size: 13px;
    line-height: 1.4;
}
/* counters section ends */ 

/* social section starts */

.social-wrap {
    padding: 80px 0;
}

.social-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.social-title {
    font-size: 44px;
}

/* social section ends */

/* footer section starts */

.footer-wrapper {
    padding: 0 10px 92px;
}

.footer-card {
    padding-top: 48px;
    border-radius: 12px;
}

.footer-top {
    padding-bottom: 44px;
}

.footer-brand {
    margin-bottom: 36px;
}

.footer-logo-link {
    margin-bottom: 18px;
}

.footer-logo {
    height: 70px;
}

.footer-about {
    max-width: 450px;
    font-size: 14px;
    line-height: 1.5;
}

.footer-links {
    gap: 32px 24px;
}

.footer-heading {
    margin-bottom: 16px;
    font-size: 14px;
    letter-spacing: 2px;
}

.footer-list li + li {
    margin-top: 4px;
}

.footer-list a {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.footer-bottom {
    grid-template-columns: 100%;
    gap: 6px;
    padding: 22px 0;
    text-align: center;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 12px;
}

.footer-credit {
    justify-self: center;
}

.footer-top-btn {
    display: none;
}

.footer-wordmark {
    margin-bottom: -4px;
    font-size: clamp(68px, 9.013vw, 94px);
    letter-spacing: -1px;
}

/* footer section ends */

/* home page ends */

/* about page start */

/* banner section start */

.about-banner-wrap {
    height: calc(100svh - 40px);
    min-height: 560px;
    max-height: 720px;
    margin-top: 40px;
}

.about-banner-wrap.is-plain {
    height: 500px;
}

.about-banner-content {
    padding: 72px 40px 44px;
}

.about-banner-row-top {
    flex-direction: row;
    gap: 24px;
}

.about-banner-eyebrow {
    padding-top: 6px;
    font-size: 12px;
    letter-spacing: 3px;
}

.about-banner-title {
    position: static;
    flex: 0 0 400px;
    max-width: 400px;
    margin-top: 40px;
    font-size: 62px;
    text-wrap: balance;
    letter-spacing: -3px;
    line-height: .93;
}

.about-banner-intro {
    max-width: 380px;
}

.about-banner-lead {
    font-size: 24px;
}

.about-banner-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
}
/* banner section ends */

/* about intro section start */

.about-intro-wrap {
    padding: 60px 0;
}

.about-intro-eyebrow {
    margin-bottom: 24px;
}

.about-intro-para {
    font-size: 28px;
    line-height: 1.42;
}

.about-intro-strip {
    margin-top: 60px;
    overflow: hidden;
}

.about-intro-item {
    flex: 0 0 auto;
    width: clamp(120px, 33vw, 240px);
}

/* about intro section ends */

/* about story section start */

.about-story-wrap {
    padding: 80px 0;
}

.about-story-head {
    padding-bottom: 16px;
    margin-bottom: 40px;
}

.about-story-title {
    font-size: 44px;
    letter-spacing: 1px;
    padding: 0;
}

.about-story-col-media {
    margin-bottom: 32px;
}

.about-story-body p {
    margin: 0 0 24px;
    font-size: clamp(14px, 1.9vw, 16px);
}

/* about story section ends */

/* about counter section start */

/* one row of four, as on desktop, sized down: the figures are short (100+, 4.9, 98%), so 52px fits the
   about 150-210px each column gets */
.about-counter-wrap {
    padding: 32px 0 88px;
}

.about-counter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    padding: 44px 0;
}

.about-counter-item {
    gap: 12px;
    text-align: left;
}

.about-counter-value {
    font-size: 52px;
    letter-spacing: -1.5px;
}

.about-counter-label {
    font-size: 13px;
    line-height: 1.4;
}
/* about counter section ends */

/* about approach section start */

.about-approach-stage {
    height: 100svh;
    min-height: 600px;
}

.about-approach-title {
    top: 84px;
    font-size: clamp(48px, 5vw, 60px);
    letter-spacing: -2px;
}

.about-approach-media {
    top: 46%;
    width: clamp(140px, 40vw, 200px);
}

.about-approach-titles {
    top: 46%;
}

.about-approach-titles-row {
    gap: 50px;
    font-size: clamp(32px, 3.5vw, 38px);
    letter-spacing: -1.5px;
}

.about-approach-foot {
    bottom: 96px;
    grid-template-columns: 100%;
    row-gap: 14px;
}

.about-approach-rail {
    margin-bottom: 2px;
}

.about-approach-texts {
    justify-self: start;
    max-width: none;
    min-height: 66px;
}

.about-approach-text {
    font-size: 14px;
    line-height: 1.4;
}

/* about approach section ends */

/* new arrivals page start */

.shop-wrap {
    padding: 120px 0 40px;
}

.shop-wrap-new {
    padding-top: 120px;
}

/* a tablet take on the desktop hero: the words on the left (42%), the slider beside them with the
   current piece large and the next one peeking in */
.new-arrival-hero {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    margin-bottom: 96px;
}

.new-arrival-hero-text {
    display: block;
    flex: 0 0 42%;
    max-width: 42%;
}

.new-arrival-hero-eyebrow {
    margin-bottom: 22px;
}

.new-arrival-headline {
    margin: 0 0 16px;
    font-size: 60px;
    letter-spacing: -2.6px;
    line-height: .95;
}

.new-arrival-intro {
    max-width: none;
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.5;
}

.new-arrival-drop {
    gap: 10px;
    margin: 0 0 24px;
    padding-top: 18px;
    border-top: 1px solid rgb(17 17 17 / 12%);
    font-size: 10px;
    letter-spacing: 2px;
}

.new-arrival-scroll {
    padding: 15px 24px;
}

.new-arrival-hero-media {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.new-arrival-slide {
    flex-basis: 74%;
}

.new-arrival-slider-track {
    gap: 14px;
}

.new-arrival-slider-controls {
    gap: 16px;
    margin-top: 20px;
}

.new-arrival-slider-arrow {
    width: 42px;
    height: 42px;
}

.new-arrival-feature-caption {
    flex-wrap: wrap;
    gap: 6px 10px;
}

.new-arrival-feature-name {
    font-size: 13px;
}

.new-arrival-feature-quick {
    display: none;
}

.shop-sticky {
    top: 61px;
    padding-top: 14px;
}

.shop-sticky.is-stuck {
    padding-top: 10px;
}

.shop-head {
    gap: 16px;
    margin-bottom: 14px;
}

.shop-title {
    font-size: 30px;
    letter-spacing: -.5px;
}

.shop-sticky.is-stuck .shop-title {
    font-size: 22px;
}

.shop-tools {
    gap: 18px;
}

.shop-tool {
    gap: 6px;
    font-size: 11px;
}

.shop-tool svg {
    width: 18px;
    height: 18px;
}

.shop-tool > span:not(.shop-tool-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shop-sort-current {
    display: none;
}

.shop-sort-menu {
    width: 230px;
}

.shop-sort-head {
    margin-bottom: 4px;
    padding: 8px 14px 8px;
}

.shop-sort-option {
    padding: 8px 10px;
    font-size: 12px;
}

.shop-tabs,
.shop-terms-inner,
.shop-terms-group {
    gap: 22px;
}

.shop-terms-group + .shop-terms-group {
    padding-left: 22px;
}

.shop-tab, .shop-term {
    font-size: 12px;
    padding: 10px 0 8px;
}

.shop-status {
    padding: 16px 0 18px;
}

.shop-end {
    margin: 20px auto 60px;
}

.shop-end-title {
    font-size: 22px;
}

.shop-end-top {
    display: none;
}

.shop-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    box-shadow: 0 -20px 40px -20px rgb(0 0 0 / 25%);
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), visibility .55s;
}

.shop-drawer.is-open {
    transform: translateY(0);
}

.shop-drawer-head {
    padding: 14px 20px;
}

.shop-drawer-title {
    font-size: 14px;
}

.shop-drawer-close {
    width: 40px;
    height: 40px;
}

.shop-drawer-close svg {
    width: 20px;
    height: 20px;
}

.shop-drawer-body {
    padding: 0 20px;
}

.shop-drawer-group summary {
    padding: 16px 0;
    font-size: 12px;
}

.shop-drawer-checks {
    gap: 14px;
    padding-bottom: 18px;
}

.shop-check {
    font-size: 13px;
}

.shop-check input {
    width: 18px;
    height: 18px;
}

/* chips: a touch-sized minimum, sizes (S, 28 …) centred */
.shop-drawer-terms {
    gap: 6px;
    padding-bottom: 18px;
}

.shop-drawer-terms .shop-term {
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
}

.shop-price {
    gap: 10px;
    padding-bottom: 18px;
}

.shop-price-field span {
    font-size: 10px;
}

/* 16px stops iPhone Safari zooming in on focus */
.shop-price-field input {
    font-size: 16px;
}

.shop-drawer-foot {
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}

.shop-drawer-foot button {
    padding: 14px 16px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.shop-drawer-clear {
    flex-shrink: 0;
}

.qv {
    align-items: flex-end;
    padding: 0;
}

.qv-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qv.is-open .qv-dialog {
    transform: translateY(0);
}

.qv-body {
    max-height: 92vh;
}

.qv-content {
    flex-direction: column;
}

.qv-gallery {
    flex: none;
    max-width: none;
}

.qv-main {
    aspect-ratio: 1 / 1;
}

.qv-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.qv-info {
    padding: 28px 22px 30px;
}

.qv-title {
    font-size: 22px;
}

.qv-desc {
    margin-bottom: 22px;
    padding-bottom: 22px;
}

.qv-thumb {
    flex-basis: 46px;
    height: 58px;
}

/* quick add: no tablet overrides, so it is the desktop dialog (centred, 460px, fades and scales in) */

/* new arrivals page ends */

/* sale page start */

.shop-wrap-sale {
    padding-top: 55px;
}

.sale-hero {
    margin-bottom: 48px;
}

.sale-banner {
    min-height: 360px;
    padding: 48px 0;
}

.sale-banner-img {
    width: 64%;
    object-position: center bottom;
}

.sale-banner-shade {
    background: linear-gradient(90deg, #efe8e1 0%, #efe8e1 36%, rgb(239 232 225 / 85%) 46%, rgb(239 232 225 / 30%) 58%, rgb(239 232 225 / 0%) 70%);
}

.sale-banner-text {
    max-width: 330px;
}

.sale-eyebrow {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 2.5px;
}

.sale-eyebrow-line {
    width: 26px;
}

.sale-headline {
    gap: 16px;
}

.sale-pct-num {
    font-size: 112px;
    letter-spacing: -5px;
}

.sale-pct-num sup {
    margin-left: 4px;
}

.sale-words {
    padding: 12px 0 6px;
}

.sale-upto,
.sale-off {
    font-size: 14px;
    letter-spacing: 3px;
}

.sale-words-line {
    margin: 10px 0;
}

.sale-headline-custom {
    max-width: 600px;
    font-size: 52px;
    letter-spacing: -1.5px;
}

.sale-hero-aside {
    max-width: 330px;
    margin-top: 10px;
}

.sale-intro {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
}

.sale-ends {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 24px;
    padding: 12px 0;
}

.sale-countdown {
    gap: 12px;
}

.sale-countdown-part {
    font-size: 20px;
}

.sale-promo {
    top: auto;
    right: 24%;
    bottom: 28px;
    left: auto;
    width: 150px;
    padding: 42px 14px 16px;
}

.sale-promo-arrow {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
}

.sale-promo-arrow svg {
    width: 16px;
    height: 16px;
}

.sale-promo-label {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 2.5px;
}

.sale-promo-upto {
    font-size: 10px;
    letter-spacing: 2px;
}

.sale-promo-text {
    font-size: 32px;
    letter-spacing: -1.5px;
}

.sale-promo-text span {
    font-size: 14px;
}

/* sale page ends */

/* policy pages start (privacy, terms, shipping & returns) */

.legal {
    padding: 120px 0 60px;
}

.legal-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.legal-eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
}

.legal-title {
    margin-bottom: 12px;
    font-size: 44px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.legal-meta {
    gap: 8px;
    font-size: 12px;
}

.legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

.legal-side {
    position: static;
    gap: 18px;
}

.legal-side-label {
    margin-bottom: 10px;
    font-size: 12px;
}

/* the other policies as a strip of pills that scrolls sideways, above the contents */
.legal-others {
    order: -1;
}

.legal-others .legal-side-label {
    display: none;
}

.legal-others ul {
    display: flex;
    gap: 8px;
    margin: 0 -40px;
    padding: 0 40px;
    overflow-x: auto;
    scrollbar-width: none;
}

.legal-others ul::-webkit-scrollbar {
    display: none;
}

.legal-others li {
    flex-shrink: 0;
}

.legal-others a {
    padding: 9px 14px;
    border: 1px solid #e3ded8;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.legal-others a::after {
    display: none;
}

.legal-others a.is-current {
    border-color: #111;
    background: #111;
    color: #fff;
}

.legal-toc {
    display: none;
}

.legal-content {
    font-size: 15px;
    line-height: 1.7;
}

.legal-content p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.legal-content h2 {
    margin: 30px 0 12px;
    font-size: 21px;
    scroll-margin-top: 90px;
}

.legal-content h3 {
    margin: 24px 0 10px;
    font-size: 17px;
}

.legal-content ul li,
.legal-content ol li {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.legal-content ul li::before {
    top: 10px;
}

.legal-contact {
    margin-top: 72px;
    padding-top: 40px;
}

/* heading on the left, the button beside it */
.legal-contact-head {
    align-items: center;
    gap: 20px 24px;
    margin-bottom: 40px;
}

.legal-contact-title {
    margin-bottom: 10px;
    font-size: 36px;
    letter-spacing: -1.2px;
}

.legal-contact-text {
    max-width: 420px;
    font-size: 15px;
    line-height: 1.65;
}

.legal-contact-btn {
    flex-shrink: 0;
}

.legal-contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
}

.legal-contact-card {
    padding-left: 20px;
}

.legal-contact-icon {
    margin-bottom: 12px;
}

.legal-contact-icon svg {
    width: 22px;
    height: 22px;
}

.legal-contact-label {
    font-size: 11px;
}

.legal-contact-value {
    font-size: 16px;
}

.legal-contact-address {
    font-size: 14px;
}

.legal-contact-note {
    font-size: 13px;
}

/* policy pages ends */

/* faq page start */

.faq {
    padding: 96px 0 50px;
}

.faq-head {
    margin-bottom: 26px;
}

.faq-title {
    margin-bottom: 12px;
    font-size: 44px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.faq-lead {
    font-size: 14px;
    line-height: 1.6;
}

.faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

.faq-q {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
}

.faq-num {
    width: 32px;
    padding-top: 3px;
    font-size: 18px;
}

.faq-q-text {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.4;
}

.faq-icon {
    width: 28px;
    height: 28px;
}

.faq-icon::before,
.faq-icon::after {
    width: 10px;
    margin-left: -5px;
}

.faq-a {
    padding: 0 0 20px 36px;
    font-size: 16px;
    line-height: 1.6;
}

/* under the questions (beside them they'd get under 300px): the help card and the quick links side
   by side, the same height */
.faq-side {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    padding-top: 8px;
}

.faq-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border-radius: 18px;
}

.faq-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
}

.faq-card-icon svg {
    width: 22px;
    height: 22px;
}

.faq-card-title {
    font-size: 19px;
}

.faq-card-text {
    margin-bottom: 16px;
    font-size: 14px;
}

.faq-card-list {
    margin-bottom: 20px;
}

.faq-card-list li {
    font-size: 14px;
}

/* the button sits at the foot of the card, level with the end of the quick links */
.faq-card-btn {
    margin-top: auto;
}

.faq-quick {
    padding: 22px 24px;
    border-radius: 18px;
}

.faq-quick a {
    padding: 14px 0;
    font-size: 15px;
}

/* faq page ends */

/* search page start */

.search-hero {
    margin-bottom: 32px;
}

.search-hero-form {
    gap: 10px;
    padding-bottom: 12px;
}

.search-hero-icon {
    width: 22px;
    height: 22px;
}

.search-hero-input {
    font-size: clamp(20px, 5.3vw, 24px);
    letter-spacing: -.6px;
}

.search-hero-clear {
    width: 32px;
    height: 32px;
}

.search-hero-clear svg {
    width: 18px;
    height: 18px;
}

.search-hero-submit {
    width: 42px;
    height: 42px;
}

.search-hero-submit svg {
    width: 18px;
    height: 18px;
}

.search-hero-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
}

.search-hero-none {
    margin-top: 28px;
}

.search-hero-none-title {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.3;
}

.search-hero-none-text {
    font-size: 13px;
    line-height: 1.6;
}

.search-hero-row {
    gap: 8px;
    margin-top: 24px;
}

.search-hero-row + .search-hero-row {
    margin-top: 20px;
}

.search-hero-suggest-label {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0 0 2px;
}

.search-hero-chip {
    padding: 8px 13px;
    font-size: 12px;
}

.search-hero-recent-clear {
    margin-left: 4px;
}

.search-hero-panel {
    max-height: 62vh;
    margin-top: 8px;
    padding: 16px 14px;
}

.search-panel-group + .search-panel-group {
    margin-top: 18px;
}

.search-panel-label {
    margin-bottom: 10px;
}

.search-panel-collection {
    padding: 7px 12px;
    font-size: 12px;
}

.search-panel-products {
    margin: 0 -8px;
}

.search-panel-product {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 8px;
}

.search-panel-name {
    font-size: 14px;
}

.search-panel-price {
    font-size: 13px;
}

.search-panel-price del {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
}

.search-panel-all {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.search-panel-empty {
    font-size: 13px;
}

/* trending / you might like */
.search-hero-trending {
    margin-top: 44px;
}

.search-hero-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.search-hero-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.search-hero-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* search page ends */

/* 404 page start */

.error-404-wrap {
    padding: 110px 0 50px;
}

.error-404-eyebrow {
    margin-bottom: 6px;
}

/* the digits fit a 300px screen (they were 300px tall) */
.error-404-digits {
    margin-bottom: 10px;
    font-size: 132px;
    letter-spacing: -6px;
}

.error-404-digit-zero {
    -webkit-text-stroke-width: 1.5px;
}

.error-404-title {
    margin-bottom: 12px;
    font-size: 28px;
    letter-spacing: -.8px;
    line-height: 1.12;
}

.error-404-text {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.6;
}

.error-404-search {
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 10px;
}

.error-404-search-icon {
    width: 20px;
    height: 20px;
}

/* 18px (not under 16) so iPhone Safari doesn't zoom in on focus */
.error-404-search-input {
    font-size: 18px;
}

.error-404-search-submit {
    width: 40px;
    height: 40px;
}

.error-404-actions {
    width: 100%;
    gap: 10px;
    margin-bottom: 26px;
}

.error-404-links {
    gap: 8px 18px;
}

.error-404-link {
    font-size: 13px;
}

.error-404-trending {
    margin-top: 56px;
    padding-top: 28px;
}

.error-404-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.error-404-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.error-404-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* 404 page ends */

/* contact page start */

.contact-us-wrap {
    padding: 120px 0 50px;
}

.contact-us-hero {
    margin-bottom: 100px;
}

.contact-us-word {
    font-size: clamp(80px, 24vw, 170px);
    letter-spacing: -4px;
}

.contact-us-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.contact-us-title {
    font-size: 40px;
    letter-spacing: -1px;
    line-height: 1.12;
}

.contact-us-lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.contact-us-badge {
    width: 84px;
    height: 84px;
}

.contact-us-badge-dot {
    width: 40px;
    height: 40px;
}

.contact-us-badge-dot svg {
    width: 17px;
    height: 17px;
}

.contact-us-row {
    row-gap: 14px;
}

/* form panel */
.contact-us-form > .wpcf7 {
    padding: 24px 16px;
    border-radius: 20px;
}

.contact-us-fields {
    row-gap: 18px;
}

.contact-us-field label {
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 1px;
}

/* 16px stops iPhone Safari zooming in on focus */
.contact-us-field input,
.contact-us-field textarea {
    height: 48px;
    padding: 8px 14px;
    font-size: 16px;
}

.contact-us-field textarea {
    height: 140px;
    padding: 12px 14px;
}

.contact-us-submit {
    margin-top: 24px;
}

.contact-us-send {
    height: 48px;
    padding: 0 24px;
}

.contact-us-send-arrow {
    width: 48px;
    height: 48px;
    background-size: 18px;
}

/* the note drops under the button instead of squeezing beside it */
.contact-us-note {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12px;
}

.contact-us-cf7 .wpcf7-response-output {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    font-size: 13px;
}

/* details: stacked under the form, opening with a dark hairline instead of the side line */
.contact-us-card {
    padding: 32px 0 0;
    border-top: 1px solid #111;
    border-left: 0;
}

.contact-us-block + .contact-us-block {
    margin-top: 22px;
    padding-top: 22px;
}

.contact-us-block-title {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
}

.contact-us-block-icon svg {
    width: 20px;
    height: 20px;
}

.contact-us-lines li {
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.contact-us-lines li span {
    min-width: 74px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.contact-us-card .contact-us-socials a {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* contact page ends */

/* about page ends */

/* product page start */

.pd {
    padding: 110px 0 64px;
}

.pd-crumbs {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
}

.pd-crumbs [aria-current] {
    max-width: 150px;
}

.pd-crumbs-sep {
    width: 10px;
}

/* photo on the left (thumbnails in a strip under it), the details beside it: a full-width 3:4 photo
   would be taller than the screen at this width */
.pd-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

.pd-layout > .pd-gallery {
    flex: 0 0 48%;
    max-width: 48%;
    min-width: 0;
}

.pd-layout > .pd-info {
    flex: 1 1 0;
    min-width: 0;
}

/* large photo on top, thumbnails in a strip under it that scrolls sideways */
.pd-gallery {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
}

.pd-gallery > .pd-main {
    flex: 0 0 auto;
}

.pd-main {
    border-radius: 12px;
}

.pd-thumbs-wrap {
    flex: 0 0 auto;
    width: 100%;
}

.pd-thumbs {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.pd-thumb {
    flex: 0 0 64px;
    width: 64px;
    border-radius: 8px;
}

.pd-thumbs-more {
    display: none;
}

.pd-zoom {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
}

.pd-zoom svg {
    width: 18px;
    height: 18px;
}

.pd-info {
    position: static;
}

.pd-notices .woocommerce-error,
.pd-notices .woocommerce-message,
.pd-notices .woocommerce-info {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 13px;
}

.pd-tag {
    margin-bottom: 12px;
    padding: 5px 10px;
    font-size: 11px;
}

.pd-title {
    margin-bottom: 12px;
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 1.15;
}

.pd-rating {
    margin-bottom: 16px;
    font-size: 13px;
}

.pd-rating .pd-stars svg {
    width: 14px;
    height: 14px;
}

.pd-price-block {
    margin-bottom: 18px;
}

.pd-price {
    gap: 10px;
    font-size: 20px;
}

.pd-price del {
    font-size: 14px;
}

.pd-price-note {
    margin-top: 8px;
    font-size: 12px;
}

.pd-short {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.65;
}

.pd .variations_form .variations tr {
    margin-bottom: 18px;
}

.pd .variations_form .variations .label label {
    margin-bottom: 10px;
    font-size: 13px;
}

.pd-chosen,
.pd-size-guide {
    font-size: 13px;
}

.pd-chip {
    min-width: 46px;
    height: 42px;
    padding: 0 12px;
}

.pd-chips-color .pd-chip {
    width: 42px;
    height: 42px;
}

.pd .variations_button {
    gap: 8px;
}

.pd .single-product-add-to-cart {
    min-width: 0;
}

.pd .single_add_to_cart_button {
    height: 48px;
    padding: 0 14px;
    font-size: 12px;
}

.pd-wish {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
}

.pd-wish i {
    font-size: 18px;
}

/* perks: a list down the narrow details column, icon beside the words */
.pd-perks {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.pd-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.pd-perks svg {
    width: 22px;
    height: 22px;
}

.pd-perks strong {
    font-size: 11px;
}

/* details tabs, then the lifestyle photo under them */
.pd-about,
.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
}

/* the details tabs with the lifestyle photo beside them, as on desktop */
.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: 40px;
}

.pd-tabs-nav {
    gap: 24px;
    margin-bottom: 20px;
}

.pd-tab {
    padding-bottom: 12px;
    font-size: 14px;
}

.pd-tab-panel.pd-content {
    max-width: none;
    font-size: 14px;
}

.pd-tab-panel .pd-specs {
    max-width: none;
}

.pd-specs div {
    font-size: 13px;
}

.pd-about-photo {
    border-radius: 12px;
}

.pd-section {
    margin-top: 48px;
    padding-top: 36px;
}

.pd-section-head {
    margin-bottom: 22px;
}

.pd-section-title {
    font-size: 26px;
    letter-spacing: -.5px;
}

.pd-section-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* reviews: the score card first, then the list and the form */
/* the score card beside the reviews, as on desktop */
.pd-reviews-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
}

.pd-review-summary {
    position: static;
    padding: 24px 22px;
    border-radius: 14px;
}

.pd-review-avg {
    font-size: 48px;
    letter-spacing: -2px;
}

.pd-review-bars {
    margin-top: 18px;
}

.pd-review {
    padding: 20px 0;
}

.pd-review .children {
    margin-left: 20px;
}

.pd-review-head {
    gap: 12px;
}

.pd-review-text,
.pd-review-empty,
.pd-review-note {
    font-size: 14px;
}

.pd-review-form-wrap {
    margin-top: 28px;
    padding: 24px 22px;
    border-radius: 14px;
}

.pd-review-form-title {
    margin-bottom: 18px;
    font-size: 18px;
}

.pd-star-pick-row svg {
    width: 32px;
    height: 32px;
}

.pd-review-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* full-screen viewer: arrows under the photo, out of its way */
.pd-viewer {
    padding: 70px 12px 84px;
}

.pd-viewer-close,
.pd-viewer-nav {
    width: 44px;
    height: 44px;
}

.pd-viewer-close {
    top: 14px;
    right: 14px;
}

.pd-viewer-nav {
    bottom: 20px;
}

.pd-viewer-prev {
    left: 16px;
}

.pd-viewer-next {
    right: 16px;
}

.pd-viewer-count {
    bottom: 32px;
}

/* product page ends */

/* cart page start */

.cart-page {
    padding: 110px 0 64px;
}

.cart-head {
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.cart-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.cart-title {
    margin-bottom: 6px;
    font-size: 40px;
    letter-spacing: -1.4px;
}

.cart-sub {
    font-size: 12px;
}

.cart-head .acc-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 13px;
}

.cart-ship {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
}

.cart-ship p {
    margin-bottom: 10px;
    font-size: 13px;
}

/* the desktop arrangement, sized for a tablet: the items on the left, the order summary a 300px column
   on the right that stays in view while the list scrolls */
.cart-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.cart-items {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-item {
    gap: 18px;
    padding: 20px 0;
}

.cart-item-img {
    width: 100px;
    max-width: none;
    height: 125px;
    border-radius: 10px;
}

.cart-item-top {
    gap: 10px;
}

.cart-item-name {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.35;
}

.cart-item-meta dl {
    margin-bottom: 4px;
    font-size: 12px;
}

.cart-item-unit {
    font-size: 12px;
}

.cart-item-total {
    font-size: 15px;
}

.cart-item-bottom {
    gap: 10px 12px;
    margin-top: 16px;
}

.cart-qty-btn {
    width: 36px;
    height: 36px;
}

.cart-qty-input {
    width: 30px;
}

.cart-item-actions {
    gap: 14px;
}

.cart-item-link {
    font-size: 12px;
}

.cart-summary {
    position: sticky;
    top: 100px;
    flex: 0 0 300px;
    padding: 24px 22px;
    border-radius: 16px;
}

.cart-summary-title {
    margin-bottom: 10px;
    font-size: 17px;
}

.cart-line {
    padding: 6px 0;
    font-size: 14px;
}

.cart-line-total {
    margin-top: 6px;
    padding-top: 12px;
    font-size: 17px;
}

/* cart toast above the bottom bar */
.cart-toast {
    bottom: calc(90px + env(safe-area-inset-bottom));
}

.cart-coupon {
    margin: 16px 0 18px;
}

/* 16px stops iPad Safari zooming in on focus */
.cart-coupon-form input {
    height: 42px;
    font-size: 16px;
}

.cart-checkout {
    width: 100%;
    height: 50px;
}

.cart-trust {
    gap: 16px;
    margin-top: 16px;
}

.cart-suggest {
    margin-top: 48px;
    padding-top: 32px;
}

.cart-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

.cart-suggest-head {
    margin-bottom: 20px;
}

.cart-suggest-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* the desktop arrangement, sized for a tablet: the words on the left, the photo mosaic beside them */
.cart-void {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 10px 0 20px;
}

.cart-void-text {
    flex: 0 0 50%;
    max-width: 50%;
}

.cart-void-title {
    margin-bottom: 18px;
    font-size: 44px;
    letter-spacing: -2px;
    line-height: 1;
}

.cart-void-lead {
    max-width: 400px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.65;
}

.cart-void-actions {
    margin-bottom: 30px;
}

.cart-void-actions .acc-btn {
    flex: 0 0 auto;
    padding: 0 22px;
}

/* the benefits as a short list, icon beside the words: three columns would leave about 100px each */
.cart-void-perks {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 20px;
}

.cart-void-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.cart-void-perks svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.cart-void-perks strong {
    font-size: 13px;
}

/* editorial: one large portrait photo with sharp corners, a smaller one overlapping its lower-left edge
   in a white frame, and the lead piece's name and price on a small frosted label. The third photo is
   left out: three products on different backgrounds read as a busy grid */
.cart-void-media {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 480px;
    min-width: 0;
}

.cart-void-tile {
    border-radius: 4px;
}

.cart-void-tile-1 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 56px;
    width: auto;
    height: auto;
}

.cart-void-tile-2 {
    top: auto;
    right: auto;
    bottom: 40px;
    left: 0;
    z-index: 1;
    width: 42%;
    height: auto;
    aspect-ratio: 4 / 5;
    border: 6px solid #fff;
    box-shadow: 0 28px 50px -26px rgb(0 0 0 / 40%);
}

.cart-void-tile-3 {
    display: none;
}

/* only one photo: it takes the whole column */
.cart-void-tile-1:only-child {
    left: 0;
}

/* names appear on hover, which a touch screen doesn't have: only the lead photo keeps a label, always
   shown, at its top right so the overlapping photo doesn't cover it */
.cart-void-caption {
    display: none;
}

.cart-void-tile-1 .cart-void-caption {
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    display: flex;
    max-width: calc(100% - 28px);
    padding: 10px 12px;
    border-radius: 4px;
    opacity: 1;
    transform: none;
}



/* collections: a swipeable strip, about 3.3 across with the next one peeking in */
.cart-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 36px) / 3.3);
    grid-auto-flow: column;
    gap: 12px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-tiles::-webkit-scrollbar {
    display: none;
}

.cart-tile {
    scroll-snap-align: start;
}

.cart-tile {
    border-radius: 12px;
}

.cart-tile-info {
    right: 12px;
    bottom: 12px;
    left: 12px;
}

.cart-tile-info strong {
    font-size: 17px;
}

/* cart page ends */

/* checkout page start */

.co {
    padding: 110px 0 64px;
}

/* title on the left, the Cart → Details → Confirmation steps on the right, as on desktop */
.co-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 22px;
}

.co-eyebrow {
    margin-bottom: 10px;
}

.co-title {
    font-size: 40px;
    letter-spacing: -1.5px;
}

.co-steps li {
    gap: 6px;
    font-size: 11px;
    letter-spacing: 1px;
}

.co-steps li + li::before {
    width: 24px;
    margin: 0 10px;
}

.co-steps a {
    gap: 6px;
}

.co-steps-dot {
    width: 8px;
    height: 8px;
}

/* the desktop arrangement, sized for a tablet: the steps on the left, the order summary a 300px column
   on the right that stays in view while the form scrolls, the same as the cart */
.co-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
}

.co-side {
    position: sticky;
    top: 100px;
    order: 0;
    padding: 24px 22px;
    border-radius: 18px;
}

.co-main,
#customer_details {
    gap: 12px;
}

.co .woocommerce-error,
.co .woocommerce-message,
.co .woocommerce-info {
    padding: 12px 14px;
    font-size: 13px;
}

/* step cards */
.co-step {
    padding: 22px 20px;
    border-radius: 16px;
}

/* "Have an account? Sign in" / "Secure" drop under the title instead of overflowing beside it */
.co-step-head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.co-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.co-step-text {
    flex: 1 1 0;
}

.co-step-title {
    font-size: 18px;
}

.co-step-sub {
    font-size: 12px;
}

.co-step-aside {
    flex: 0 0 100%;
    margin-left: 40px;
    font-size: 12px;
    white-space: normal;
}

/* fields: full width; first / last name and state / PIN code stay in pairs */
.co-fields {
    gap: 10px;
}

.co #billing_phone_field,
.co #billing_email_field,
.co #billing_city_field,
.co #shipping_city_field {
    grid-column: span 6;
}

.co #billing_state_field,
.co #billing_postcode_field,
.co #shipping_state_field,
.co #shipping_postcode_field {
    grid-column: span 3;
}

.co .co-fields .form-row > label {
    left: 13px;
    right: 13px;
}

/* 16px stops iPhone Safari zooming in on focus */
.co .co-fields .input-text,
.co .co-fields select,
.co .co-fields textarea {
    height: 56px;
    padding: 24px 13px 8px;
    font-size: 16px;
}

.co .co-fields textarea {
    height: auto;
    min-height: 110px;
    padding-top: 28px;
}

.co .co-fields .select2-container .select2-selection--single {
    height: 56px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 13px;
    font-size: 16px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__arrow {
    top: 15px;
}

.co-check,
.co .woocommerce-form__label-for-checkbox {
    align-items: flex-start;
    font-size: 13px !important;
    line-height: 1.5;
}

.co-check input,
.co .woocommerce-form__label-for-checkbox input {
    margin-top: 1px;
}

.co-ship-to h3 .co-check,
.co-account > .co-check {
    padding: 14px;
}

.co-notes[open] summary {
    margin-bottom: 16px;
}

/* payment */
.co .wc_payment_method > label {
    padding: 14px;
    font-size: 13px;
}

.co .payment_box {
    padding: 0 14px 14px 44px;
    font-size: 12px;
}

.co .woocommerce-terms-and-conditions-wrapper {
    font-size: 12px;
}

.co #place_order {
    height: 52px;
}

/* summary */
.co-side-head {
    margin-bottom: 16px;
}

.co-side-title {
    font-size: 17px;
}

.co-item {
    gap: 12px;
    margin-bottom: 12px;
}

.co-item-img {
    width: 52px;
    height: 64px;
}

.co-item-name,
.co-item-price {
    font-size: 13px;
}

.co-item-meta dl {
    font-size: 11px;
}

.co-total-row {
    font-size: 13px;
}

.co-total-row.order-total {
    font-size: 17px;
}

.co-ship-method label {
    padding: 11px 12px;
    font-size: 12px;
}

.co-coupon-row input {
    font-size: 16px;
}

.co-trust {
    gap: 8px 14px;
}

.co-trust li {
    font-size: 11px;
}

/* order received */
.co-thanks-hero {
    margin-bottom: 32px;
}

.co-thanks-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.co-thanks-icon svg {
    width: 28px;
    height: 28px;
}

.co-thanks-title {
    margin-bottom: 14px;
    font-size: 44px;
    letter-spacing: -1.4px;
    line-height: 1.05;
}

.co-thanks-lead {
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.6;
}

/* order facts four across, as on desktop (about 170-225px each) */
.co-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 14px;
}

.co-facts div {
    padding: 16px;
}

.co-facts dt {
    font-size: 10px;
    letter-spacing: 1.2px;
}

.co-facts dd {
    font-size: 14px;
    word-break: break-word;
}

/* order details on the left, what happens next beside them */
.co-thanks-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
}

.co-next {
    padding: 22px 20px;
}

.co-thanks-actions .acc-btn {
    flex: 1 1 100%;
}

/* checkout page ends */

/* wishlist page start */

.wish {
    padding: 96px 0 50px;
}

.wish-head {
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.wish-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.wish-title {
    margin-bottom: 6px;
    font-size: 38px;
    letter-spacing: -1.2px;
}

.wish-sub {
    font-size: 14px;
}

.wish-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.wish-note {
    margin: -6px 0 22px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.wish-empty {
    margin-top: 10px;
    padding: 40px 8px;
}

.wish-empty-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.wish-empty-icon svg {
    width: 26px;
    height: 26px;
}

.wish-empty-title {
    font-size: 21px;
}

.wish-empty-text {
    margin-bottom: 22px;
    font-size: 13px;
}

.wish-empty .acc-btn {
    height: 44px;
    padding: 0 22px;
    letter-spacing: 1.5px;
}

.wish-suggest {
    margin-top: 40px;
    padding-top: 32px;
}

.wish-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

/* wishlist page ends */

/* my account page start */

.auth {
    padding: 110px 0 60px;
}

.auth-card {
    flex-direction: row;
    gap: 12px;
    min-height: 640px;
    padding: 12px;
    border-radius: 28px;
}

.auth-side {
    flex: 0 0 50%;
    min-width: 0;
    padding: 0px 16px 16px 0;
}

.auth-switcher {
    margin-bottom: 24px;
}

.auth-body {
    padding: 24px 0;
}

.auth-switch-btn {
    padding: 10px 14px;
}

.auth-title {
    font-size: 30px;
    letter-spacing: -.8px;
}

.auth-lead {
    margin-bottom: 16px;
    font-size: 13px;
}

.auth-saved {
    margin: -12px 0 24px;
    font-size: 12px;
}

.auth-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-field input {
    height: 42px;
    font-size: 14px;
}

.auth-check {
    font-size: 13px;
}

.auth-submit {
    height: 48px;
}

.auth-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.auth-visual {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0 22px 0 22px;
}

.auth-visual-img {
    object-position: top;
}

.auth-notch-top {
    width: 96px;
    height: 48px;
    border-bottom-right-radius: 20px;
}

.auth-notch-top::before,
.auth-notch-top::after {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 100%, transparent 19.5px, #f6f3ef 20px);
}

.auth-notch-bottom {
    display: none;
}

.auth-tag {
    top: 16px;
    right: 16px;
    padding: 8px 12px;
    font-size: 11px;
}

.auth-visual-content {
    right: 20px;
    bottom: 22px;
    left: 20px;
}

.auth-quote {
    margin-bottom: 16px;
    font-size: 26px;
}

.auth-perks {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    gap: 10px;
    padding-top: 14px;
}

.auth-perk {
    font-size: 12px;
}

.acc {
    padding: 96px 0 50px;
}

.acc-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.acc-eyebrow {
    margin-bottom: 10px;
}

.acc-title {
    margin-bottom: 6px;
    font-size: 28px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.acc-sub {
    font-size: 12px;
}

.acc-logout {
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
}

.acc-logout .acc-icon {
    width: 18px;
    height: 18px;
}

.acc-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}

.acc-nav {
    position: static;
    flex: none;
    margin: 0 -40px;
}

.acc-nav ul {
    display: flex;
    gap: 8px;
    padding: 0 40px;
    overflow-x: auto;
    scrollbar-width: none;
}

.acc-nav ul::-webkit-scrollbar {
    display: none;
}

.acc-nav ul li {
    flex-shrink: 0;
    margin: 0;
}

.acc-nav-link {
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.acc-nav-link.is-active {
    border-color: #111;
}

.acc-nav-link .acc-icon {
    width: 17px;
    height: 17px;
}

.acc-nav-count {
    margin-left: 2px;
}

.acc-nav-sep {
    display: none;
}

.acc-section + .acc-section {
    margin-top: 36px;
}

.acc-section-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.acc-h2 {
    margin-bottom: 16px;
    font-size: 22px;
}

.acc-lead {
    margin: -6px 0 20px;
    font-size: 13px;
    line-height: 1.6;
}

.acc-btn {
    height: 44px;
    padding: 0 20px;
    letter-spacing: 1.5px;
}

.acc-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.acc-stat {
    padding: 16px;
    border-radius: 14px;
}

.acc-stat-label {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.acc-stat-value {
    margin: 12px 0 10px;
    font-size: 34px;
}

.acc-stat-text {
    font-size: 24px;
}

.acc-stat-link {
    font-size: 12px;
}

.acc-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 2px;
}

.acc-row-main {
    flex: 1 1 100%;
}

.acc-row-main strong {
    font-size: 14px;
}

.acc-row-main span {
    font-size: 12px;
}

.acc-row-total {
    min-width: 0;
    margin-left: auto;
    font-size: 14px;
}

.acc-links {
    gap: 10px;
}

.acc-link-card {
    padding: 16px;
    flex-direction: column;
}

.acc-empty {
    padding: 40px 18px;
}

.acc-empty-title {
    font-size: 17px;
}

.acc-empty-text {
    font-size: 13px;
}

.acc-order-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
}

.acc-order-number {
    margin-right: 8px;
    font-size: 14px;
}

.acc-order-date {
    font-size: 12px;
}

.acc-order-body {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
}

.acc-thumb {
    width: 48px;
    height: 60px;
}

.acc-order-info {
    flex: 1 1 0;
}

.acc-order-items {
    font-size: 13px;
}

.acc-order-total {
    font-size: 15px;
}

.acc-order-actions {
    flex: 1 1 100%;
}

.acc-order-actions .acc-btn {
    flex: 1 1 0;
    height: 42px;
    padding: 0 12px;
    font-size: 10px;
}

.acc-order-actions .acc-btn-sm {
    height: 38px;
}

.acc-pager {
    gap: 10px;
    margin-top: 22px;
}

/* single order */
.acc-order-actions-top {
    margin-top: 18px;
}

.acc-notice {
    padding: 12px 14px;
    font-size: 13px;
}

.acc-track-step {
    padding-right: 8px;
}

.acc-track-step strong {
    font-size: 13px;
}

.acc-track-step span {
    font-size: 11px;
}

.acc-item {
    gap: 12px;
    padding: 14px 0;
}

.acc-item-img {
    width: 60px;
    height: 76px;
    border-radius: 8px;
}

.acc-item-name,
.acc-item-price {
    font-size: 14px;
}

.acc-item-meta,
.acc-item-qty {
    font-size: 12px;
}

.acc-totals {
    max-width: none;
}

.acc-total-row {
    font-size: 13px;
}

.acc-total-order_total {
    font-size: 16px;
}

.acc-order-note,
.acc-note-text p {
    font-size: 13px;
}

.acc-address-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.acc-card {
    padding: 18px;
    border-radius: 14px;
}

.acc-card address {
    margin-bottom: 18px;
    font-size: 13px;
}

.acc-form .form-row-first,
.acc-form .form-row-last {
    flex: 0 0 100%;
}

.acc-form .input-text,
.acc-form select,
.acc-form textarea {
    height: 46px;
    font-size: 16px;
}

.acc-form textarea {
    height: auto;
}

.acc-form .select2-container .select2-selection--single {
    height: 46px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
    line-height: 44px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.acc-fieldset {
    padding: 18px 16px;
    border-radius: 14px;
}

.acc-form-actions .acc-btn {
    flex: 1 1 auto;
}

.acc-content .woocommerce-error, .acc-content .woocommerce-message, .acc-content .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 12px;
}

/* my account page ends */

}


@media only screen and (min-width: 992px) and (max-width: 1199.98px) {

/* common styles for all pages on small screens start */

.custom-container {
    padding-right: 60px !important;
    padding-left: 60px !important;
}

.cursor-dot {
    display: none;
}

.page-loader {
    padding: 0 60px;
}

.page-loader-word {
    font-size: 64px;
    letter-spacing: -2.5px;
}

.page-loader-space {
    width: 18px;
}

.page-loader-char {
    padding-bottom: 4px;
}

.page-loader-count {
    top: -30px;
    right: 0;
    font-size: 18px;
}

.page-loader-photo {
    width: 150px;
}

.eyebrow {
    gap: 8px;
    letter-spacing: 3px;
}

.eyebrow-line {
    width: 16px;
}

/* bottom bar on tablets: a compact pill centred at the bottom instead of a full-width strip (the four
   icons would sit about 170px apart). Icon and label side by side, Wishlist its own small pill, and
   back to top a matching square that appears beside the bar rather than above it */
.mobile-bar {
    position: fixed;
    right: auto;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 100;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.mobile-bar-main,
.mobile-bar-side {
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.mobile-bar-main {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 6px;
}

.mobile-bar-item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: #111111;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.mobile-bar-item:hover {
    background: rgb(17 17 17 / 5%);
    color: #111111;
    text-decoration: none;
}

.mobile-bar-item svg {
    display: block;
    width: 20px;
    height: 20px;
}

.mobile-bar-item.is-active,
html.mega-menu-primary-off-canvas-open .mobile-bar-menu {
    background: rgb(180 131 95 / 20%);
    color: #111111;
}

/* while the menu is open, Menu is the only highlighted shortcut */
html.mega-menu-primary-off-canvas-open .mobile-bar-main .mobile-bar-item.is-active {
    background: none;
}

/* the wishlist tile is an item and a panel at once: restate the panel look the item rule clears */
.mobile-bar .mobile-bar-side {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
}

.mobile-bar .mobile-bar-side.is-active {
    background: rgb(244 232 222 / 92%);
}

.mobile-bar-icon {
    position: relative;
}

.mobile-bar-icon .cart-count {
    top: -6px;
    right: -10px;
}

/* back to top: a bronze square level with the bar, just past its right end, so the bar stays centred */
.mobile-bar-top {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #B4835F;
    color: #ffffff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    pointer-events: auto;
}

.mobile-bar-top svg {
    width: 20px;
    height: 20px;
}

.mobile-bar.is-scrolled .mobile-bar-top {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.footer-wrapper {
    padding-bottom: 92px;
}

/* common styles for all pages on small screens ends */

/* home page start */

/* header section start */

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 0 60px !important;
}

.header-nav {
    order: 1;
    justify-self: start;
}

.header-logo {
    order: 2;
}

.header-user-actions {
    order: 3;
    justify-self: end;
    gap: 18px;
}

.header-user-actions .header-icon:nth-child(n+3) {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle {
    justify-content: flex-start;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-left,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-center,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right {
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
    transform: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box {
    width: 22px;
    height: 16px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    width: 22px;
    height: 1.5px;
    border-radius: 0;
    background-color: #111;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    top: 0;
    margin-top: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
    top: 7px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    top: 14px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    transform: translate3d(0, 7px, 0) rotate(45deg);
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg);
}

.header-logo img {
    height: 55px;
    max-width: 115px;
}

.f-nav .header-logo img {
    height: 55px;
}

html.mega-menu-primary-off-canvas-open .header-wrapper {
    background: #ffffff;
}

html.mega-menu-primary-off-canvas-open .header-user-actions .search-toggle {
    visibility: hidden;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    top: 65px;
    right: auto;
    left: -100%;
    width: 100%;
    height: calc(100dvh - 65px);
    max-height: calc(100dvh - 65px);
    justify-content: flex-start;
    gap: 0;
    padding: 28px 0 110px;
    background: #ffffff;
    transition: left .6s cubic-bezier(.76, 0, .24, 1), visibility .6s ease;
}

/* the panel scrolls on its own (its height is fixed to the screen), without showing a scrollbar;
   contain keeps the page behind from scrolling once the panel reaches its end */
.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary::-webkit-scrollbar {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    right: auto;
    left: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open::after,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close {
    display: none;
}

/* panel contents on the 40px page gutter, sized up for a tablet */
.header-nav #mega-menu-wrap-primary #mega-menu-primary .header-menu-extra {
    display: block;
    padding: 0 60px 28px;
    text-align: left;
}

.header-menu-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgb(17 17 17 / 14%);
    border-radius: 12px;
    background: #faf8f6;
    transition: border-color .3s ease, background-color .3s ease;
}

.header-menu-search:focus-within {
    border-color: #111111;
    background: #ffffff;
}

.header-menu-search i {
    color: rgb(17 17 17 / 55%);
    font-size: 20px;
}

.header-menu-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111111;
    font-size: 16px;
}

.header-menu-search input::placeholder {
    color: rgb(17 17 17 / 60%);
}

.header-menu-cats {
    display: flex;
    gap: 12px;
    margin: 20px -60px 0;
    padding: 0 60px;
    overflow-x: auto;
    scrollbar-width: none;
}

.header-menu-cats::-webkit-scrollbar {
    display: none;
}

.header-menu-cat {
    position: relative;
    flex: 0 0 auto;
    display: block;
    /* about 4.4 across (four full, the next peeking in); 48px = the four 12px gaps */
    width: calc((100% - 48px) / 4.4);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
    background: #ece7e1;
}

.header-menu-cat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}

.header-menu-cat:hover img {
    transform: scale(1.05);
}

.header-menu-cat span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 34px 14px 12px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 60%) 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* links: rows on the 60px gutter with hairlines between them; hover and the current page turn gold */
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    margin: 0 60px;
    padding: 16px 0;
    border-bottom: 1px solid #efebe6;
    background: none;
    color: #111111;
    font-size: 18px;
    font-weight: 400 !important;
    letter-spacing: .2px;
    line-height: 1.5;
    transition: color .3s ease;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: none;
    color: #B4835F;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    padding: 10px 60px 10px 78px;
    background-color: #ffffff;
    color: rgb(17 17 17 / 60%);
    font-size: 12px;
    letter-spacing: 1.5px;
    line-height: 1.5;
    text-transform: uppercase;
    transition: color .3s ease;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus-visible {
    color: #B4835F;
}

/* an open parent's sub-links sit inside its row, so the hairline goes under them instead */
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    border-bottom-color: transparent;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on > ul.mega-sub-menu {
    margin: 0 60px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efebe6;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on > ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    padding-right: 0;
    padding-left: 18px;
}

.header-icon {
    font-size: 22px;
}

/* header section ends */

/* banner section start */

/* the desktop composition, a step below desktop sizes: the banner keeps its 1061:571 shape (about
   872 x 469 at 992px, 1080 x 581 at 1199px). The stats and the "Premium Quality" label stay below the
   stitched line at 74% of the height; the intro stays clear of the model's head */
.banner-wrap {
    padding: 110px 0 0;
}

.banner-line-v {
    top: -110px;
}

.banner-col-left,
.banner-col-right {
    padding-bottom: 20px;
}

.banner-col-right {
    padding-left: 16px;
}

.banner-col-left {
    flex: 0 0 40%;
}

.banner-title {
    font-size: 74px;
    text-wrap: balance;
}

.banner-col-left .banner-title {
    margin-top: 34px;
}

.banner-title-2 {
    margin-top: 90px;
    white-space: normal;
}

.banner-copy {
    max-width: 280px;
    margin-top: 22px;
}

.banner-text p {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
}

.banner-cta {
    padding-right: 16px;
}

.banner-btn {
    gap: 14px;
    margin-top: 24px;
    padding: 5px 5px 5px 18px;
    font-size: 16px;
}

.banner-btn::before {
    top: 5px;
    right: 5px;
    bottom: 5px;
    width: 38px;
}

.banner-btn:hover::before {
    width: calc(100% - 10px);
}

.banner-btn-icon {
    width: 38px;
    height: 38px;
}

.banner-btn-icon svg {
    width: 19px;
    height: 19px;
}

.banner-quality {
    left: 100px;
    bottom: 28px;
    width: 116px;
}

.banner-quality span {
    top: -14px;
    left: 36px;
    font-size: 12px;
}

.banner-stat strong {
    font-size: 38px;
}

.banner-stat span {
    margin-top: 6px;
    font-size: 13px;
}

.banner-social {
    gap: 14px;
    margin-top: 8px;
}

.banner-social a {
    font-size: 17px;
}

/* banner section ends */

/* legends film section start */

.legends-film {
    height: 100svh;
    min-height: 480px;
}

.legends-film-head {
    padding: 0 24px !important;
}

.legends-film-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 2px;
}

.legends-film-title {
    font-size: 52px;
    text-wrap: balance;
    margin: 0 auto 16px;
}

.legends-film-text {
    max-width: 500px;
    font-size: 16px;
    line-height: 1.5;
}

.legends-film-frame {
    inset: 75px 12px 14px;
}

.legends-film-corner {
    width: 16px;
    height: 16px;
}

.legends-film-hud {
    inset: 89px 26px 28px;
}

.legends-film-hud-row {
    gap: 12px;
}

.legends-film-hud-label {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 2px;
}

.legends-film-rec {
    width: 6px;
    height: 6px;
}

.legends-film-timecode {
    font-size: 10px;
    letter-spacing: 1px;
}

/* legends film section ends */

/* new arrivals section start */

.new-arrival-wrap {
    padding: 90px 0;
}

.new-arrival-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.new-arrival-title {
    font-size: 48px;
    text-wrap: balance;
}

.new-arrival-text {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

.new-arrival-track {
    gap: 12px;
    padding: 0 60px;
}

.new-arrival-card {
    flex: 0 0 240px;
}

.new-arrival-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.new-arrival-info {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.new-arrival-cat {
    margin-bottom: 4px;
    font-size: 10px;
}

.new-arrival-info h3 {
    font-size: clamp(13px, 3.2vw, 14px);
}

.new-arrival-price {
    margin-top: 4px;
    font-size: clamp(11px, 2.6vw, 12px);
}

.new-arrival-link {
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* new arrivals section ends */

/* essential section start */

.essential-collection-wrap {
    padding: 90px 0;
}

.essential-collection-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.essential-collection-title {
    font-size: 48px;
    text-wrap: balance;
}

.essential-collection-text {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

.essential-collection-grid {
    margin-right: -8px !important;
    margin-left: -8px !important;
}

.essential-collection-col {
    margin-bottom: 0;
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.essential-collection-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
}

.essential-collection-name {
    font-size: 22px;
}

.essential-collection-name svg {
    width: 22px;
    height: 22px;
}

/* essential section ends */

/* wear section start */

.wear-wrap {
    padding: 80px 0;
}

.wear-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.wear-title {
    font-size: 44px;
}

.wear-text {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
    text-align: left;
}

.wear-bar {
    top: 71px;
    margin-bottom: 20px;
}

.wear-bar-inner {
    gap: 14px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.wear-bar-title, .wear-bar.is-stuck .wear-bar-title {
    max-width: 0;
    margin-right: -14px;
    opacity: 0;
    display: none;
}

.wear-filter {
    padding: 8px 13px;
}

.wear-bar-link {
    font-size: 10px;
    letter-spacing: 1px;
}

.wear-grid {
    margin-right: -12px !important;
    margin-left: -12px !important;
}

.wear-col {
    margin-bottom: 16px;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.wear-empty {
    padding: 40px 0;
    font-size: 14px;
}

.wear-card-badge {
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    font-size: 9px;
    letter-spacing: 1px;
}

.wear-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.wear-card-actions {
    display: none;
}

.wear-card-info {
    padding-top: 12px;
}

.wear-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.wear-card-cat {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.wear-card-row {
    gap: 8px;
}

.wear-card-title {
    font-size: clamp(12px, 3.2vw, 14px);
}

.wear-card-price {
    margin-top: 4px;
    font-size: clamp(10px, 2.6vw, 12px);
}

.wear-card-swatch {
    width: clamp(8px, 1.6vw,10px);
    height: clamp(8px, 1.6vw,10px);
}

.wear-card-plus {
    width: 24px;
    height: 24px;
}

.wear-card-plus svg {
    width: 18px;
    height: 18px;
}

.wear-card-colors {
    margin-top: 8px;
}

/* wear section ends */

/* campaign section start */

/* the desktop campaign two steps down: framed image with the desktop's angled shade, the words bottom
   left on the page's 60px gutter, the ring bottom right */
.campaign-wrap {
    min-height: 84vh;
    padding: 130px 0 80px;
}

.campaign-media {
    clip-path: inset(1.5% 1.5% 1.5% 1.5% round 6px);
}

.campaign-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.campaign-content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
}

.campaign-tag {
    margin-bottom: 20px;
}

.campaign-title {
    margin-bottom: 22px;
    font-size: clamp(60px, 5.7vw, 68px);
    letter-spacing: -2px;
}

.campaign-text {
    max-width: 360px;
    margin-bottom: 30px;
    padding-left: 16px;
    line-height: 1.65;
}

.campaign-btn {
    gap: 12px;
    padding: 14px 20px;
    letter-spacing: 2px;
}

.campaign-ring {
    position: relative;
    top: auto;
    right: auto;
    width: 132px;
    height: 132px;
    margin-bottom: 8px;
}

.campaign-ring-star {
    width: 20px;
    height: 20px;
}

/* campaign section ends */

/* philosophy section start */

.philosophy-wrap {
    padding: 80px 0;
}

.philosophy-head {
    margin-bottom: 36px;
}

.philosophy-eyebrow {
    margin-bottom: 18px;
}

.philosophy-head h1, .philosophy-head h2, .philosophy-head h3 {
    max-width: 600px;
    font-size: 48px;
    text-wrap: balance;
    letter-spacing: -1.4px;
}

.philosophy-rule {
    margin-bottom: 32px;
}

.philosophy-body p {
    margin-bottom: 14px;
    font-size: clamp(15px, 1.44vw, 16px);
    line-height: 1.6;
    text-wrap: pretty;
}

.philosophy-media {
    max-width: 100%;
    aspect-ratio: 4 / 5;
}

.philosophy-note {
    font-size: 20px;
    line-height: 1.3;
}

.philosophy-btn {
    flex-shrink: 0;
    padding: 14px 24px;
}

/* philosophy section ends */

/* counters section starts */ 

.counter-wrap {
    padding: 80px 0;
}

.counter-item {
    padding: 0 24px;
}

.counter-col:first-child .counter-item {
    padding-left: 0;
}

.counter-value {
    margin-bottom: 12px;
    font-size: 64px;
    letter-spacing: -2px;
}

/* counters section ends */ 

/* social section starts */

.social-wrap {
    padding: 80px 0;
}

.social-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.social-title {
    font-size: 48px;
}

/* social section ends */

/* footer section starts */

.footer-wrapper {
    padding: 0 10px 92px;
}

.footer-card {
    padding-top: 48px;
    border-radius: 12px;
}

.footer-top {
    padding-bottom: 44px;
}

.footer-brand {
    margin-bottom: 36px;
}

.footer-logo-link {
    margin-bottom: 18px;
}

.footer-logo {
    height: 70px;
}

.footer-about {
    max-width: 450px;
    font-size: 14px;
    line-height: 1.5;
}

/* all four columns in one row under the brand (col-lg-12), the desktop's proportions: Policies and Contact
   get more room for their longer lines */
.footer-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 32px;
}

.footer-heading {
    margin-bottom: 16px;
    font-size: 14px;
    letter-spacing: 2px;
}

.footer-list li + li {
    margin-top: 4px;
}

.footer-list a {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.footer-bottom {
    grid-template-columns: 100%;
    gap: 6px;
    padding: 22px 0;
    text-align: center;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 12px;
}

.footer-credit {
    justify-self: center;
}

.footer-top-btn {
    display: none;
}

.footer-wordmark {
    margin-bottom: -4px;
    font-size: clamp(80px, 8.013vw, 110px);
    letter-spacing: -1px;
}

/* footer section ends */

/* home page ends */

/* about page start */

/* banner section start */

.about-banner-wrap {
    height: calc(100svh - 40px);
    min-height: 560px;
    max-height: 720px;
    margin-top: 40px;
}

.about-banner-wrap.is-plain {
    height: 500px;
}

.about-banner-content {
    padding: 72px 60px 44px;
}

.about-banner-row-top {
    flex-direction: row;
    gap: 24px;
}

.about-banner-eyebrow {
    padding-top: 6px;
    font-size: 12px;
    letter-spacing: 3px;
}

.about-banner-title {
    position: static;
    flex: 0 0 400px;
    max-width: 400px;
    margin-top: 40px;
    font-size: 72px;
    margin-bottom: 110px;
    text-wrap: balance;
    letter-spacing: -3px;
    line-height: .93;
}

.about-banner-intro {
    max-width: 380px;
}

.about-banner-lead {
    font-size: 24px;
}

.about-banner-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
}

/* banner section ends */

/* about intro section start */

.about-intro-wrap {
    padding: 70px 0;
}

.about-intro-eyebrow {
    margin-bottom: 24px;
}

.about-intro-para {
    font-size: 32px;
    line-height: 1.42;
}

.about-intro-strip {
    margin-top: 60px;
    overflow: hidden;
}

.about-intro-item {
    flex: 0 0 auto;
    width: clamp(120px, 33vw, 240px);
}

/* about intro section ends */

/* about story section start */

.about-story-wrap {
    padding: 80px 0;
}

.about-story-head {
    padding-bottom: 16px;
    margin-bottom: 40px;
}

.about-story-title {
    font-size: 54px;
    letter-spacing: 1px;
    padding: 0;
}

.about-story-col-media {
    margin-bottom: 32px;
}

.about-story-body p {
    margin: 0 0 24px;
    font-size: clamp(16px, 1.29vw, 18px);
}

/* about story section ends */

/* about counter section start */

.about-counter-wrap {
    padding: 32px 0 88px;
}

.about-counter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    padding: 44px 0;
}

.about-counter-item {
    gap: 12px;
    text-align: left;
}

.about-counter-value {
    font-size: 52px;
    letter-spacing: -1.5px;
}

.about-counter-label {
    font-size: 13px;
    line-height: 1.4;
}
/* about counter section ends */

/* about approach section start */

.about-approach-stage {
    height: 100svh;
    min-height: 600px;
}

.about-approach-title {
    top: 84px;
    font-size: clamp(54px, 5.5vw, 70px);
    letter-spacing: -2px;
}

.about-approach-media {
    top: 46%;
    width: clamp(160px, 40vw, 220px);
}

.about-approach-titles {
    top: 46%;
}

.about-approach-titles-row {
    gap: 50px;
    font-size: clamp(32px, 3.5vw, 38px);
    letter-spacing: -1.5px;
}

.about-approach-foot {
    bottom: 96px;
    grid-template-columns: 100%;
    row-gap: 14px;
}

.about-approach-rail {
    margin-bottom: 2px;
}

.about-approach-texts {
    justify-self: start;
    max-width: none;
    min-height: 66px;
}

.about-approach-text {
    font-size: 14px;
    line-height: 1.4;
}

/* about approach section ends */

/* new arrivals page start */

.shop-wrap {
    padding: 120px 0 40px;
}

.shop-wrap-new {
    padding-top: 120px;
}

/* the desktop hero a step down: the words on the left (40%), the slider beside them with the current
   piece up front and the next one clearly peeking in, scaled back, as on desktop */
.new-arrival-hero {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    margin-bottom: 90px;
}

.new-arrival-hero-text {
    display: block;
    flex: 0 0 40%;
    max-width: 40%;
}

.new-arrival-hero-eyebrow {
    margin-bottom: 24px;
}

.new-arrival-headline {
    margin: 0 0 24px;
    font-size: 74px;
    letter-spacing: -3px;
    line-height: .95;
}

.new-arrival-intro {
    max-width: 380px;
    margin: 0 0 34px;
    font-size: 15px;
    line-height: 1.65;
}

.new-arrival-drop {
    gap: 12px;
    margin: 0 0 32px;
    font-size: 10px;
    letter-spacing: 2.2px;
}

.new-arrival-scroll {
    padding: 16px 26px;
}

.new-arrival-hero-media {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.new-arrival-slide {
    flex-basis: 60%;
}

.new-arrival-slider-track {
    gap: 22px;
}

.new-arrival-slider-controls {
    gap: 20px;
    margin-top: 26px;
}

.new-arrival-slider-current {
    font-size: 20px;
}

.new-arrival-slider-arrow {
    width: 44px;
    height: 44px;
}

.new-arrival-feature-tag {
    top: 14px;
    left: 14px;
}

.new-arrival-feature-caption {
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-top: 14px;
}

.new-arrival-feature-name {
    font-size: 14px;
}

.shop-sticky {
    top: 61px;
    padding-top: 14px;
}

.shop-sticky.is-stuck {
    padding-top: 10px;
}

.shop-head {
    gap: 16px;
    margin-bottom: 14px;
}

.shop-title {
    font-size: 30px;
    letter-spacing: -.5px;
}

.shop-sticky.is-stuck .shop-title {
    font-size: 22px;
}

.shop-tools {
    gap: 18px;
}

.shop-tool {
    gap: 6px;
    font-size: 11px;
}

.shop-tool svg {
    width: 18px;
    height: 18px;
}

.shop-tool > span:not(.shop-tool-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shop-sort-current {
    display: none;
}

.shop-sort-menu {
    width: 230px;
}

.shop-sort-head {
    margin-bottom: 4px;
    padding: 8px 14px 8px;
}

.shop-sort-option {
    padding: 8px 10px;
    font-size: 12px;
}

.shop-tabs,
.shop-terms-inner,
.shop-terms-group {
    gap: 22px;
}

.shop-terms-group + .shop-terms-group {
    padding-left: 22px;
}

.shop-tab, .shop-term {
    font-size: 12px;
    padding: 10px 0 8px;
}

.shop-status {
    padding: 16px 0 18px;
}

.shop-end {
    margin: 20px auto 60px;
}

.shop-end-title {
    font-size: 22px;
}

.shop-end-top {
    display: none;
}

.shop-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    box-shadow: 0 -20px 40px -20px rgb(0 0 0 / 25%);
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), visibility .55s;
}

.shop-drawer.is-open {
    transform: translateY(0);
}

.shop-drawer-head {
    padding: 14px 20px;
}

.shop-drawer-title {
    font-size: 14px;
}

.shop-drawer-close {
    width: 40px;
    height: 40px;
}

.shop-drawer-close svg {
    width: 20px;
    height: 20px;
}

.shop-drawer-body {
    padding: 0 20px;
}

.shop-drawer-group summary {
    padding: 16px 0;
    font-size: 12px;
}

.shop-drawer-checks {
    gap: 14px;
    padding-bottom: 18px;
}

.shop-check {
    font-size: 13px;
}

.shop-check input {
    width: 18px;
    height: 18px;
}

/* chips: a touch-sized minimum, sizes (S, 28 …) centred */
.shop-drawer-terms {
    gap: 6px;
    padding-bottom: 18px;
}

.shop-drawer-terms .shop-term {
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
}

.shop-price {
    gap: 10px;
    padding-bottom: 18px;
}

.shop-price-field span {
    font-size: 10px;
}

/* 16px stops iPhone Safari zooming in on focus */
.shop-price-field input {
    font-size: 16px;
}

.shop-drawer-foot {
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}

.shop-drawer-foot button {
    padding: 14px 16px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.shop-drawer-clear {
    flex-shrink: 0;
}

.qv {
    align-items: flex-end;
    padding: 0;
}

.qv-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qv.is-open .qv-dialog {
    transform: translateY(0);
}

.qv-body {
    max-height: 92vh;
}

.qv-content {
    flex-direction: column;
}

.qv-gallery {
    flex: none;
    max-width: none;
}

.qv-main {
    aspect-ratio: 1 / 1;
}

.qv-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.qv-info {
    padding: 28px 22px 30px;
}

.qv-title {
    font-size: 22px;
}

.qv-desc {
    margin-bottom: 22px;
    padding-bottom: 22px;
}

.qv-thumb {
    flex-basis: 46px;
    height: 58px;
}

/* quick add: no tablet overrides, so it is the desktop dialog (centred, 460px, fades and scales in) */

/* new arrivals page ends */

/* sale page start */

.shop-wrap-sale {
    padding-top: 55px;
}

.sale-hero {
    margin-bottom: 48px;
}

.sale-banner {
    min-height: 360px;
    padding: 48px 0;
}

.sale-banner-img {
    width: 64%;
}

.sale-banner-shade {
    background: linear-gradient(90deg, #efe8e1 0%, #efe8e1 36%, rgb(239 232 225 / 85%) 46%, rgb(239 232 225 / 30%) 58%, rgb(239 232 225 / 0%) 70%);
}

.sale-banner-text {
    max-width: 330px;
}

.sale-eyebrow {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 2.5px;
}

.sale-eyebrow-line {
    width: 26px;
}

.sale-headline {
    gap: 16px;
}

.sale-pct-num {
    font-size: 112px;
    letter-spacing: -5px;
}

.sale-pct-num sup {
    margin-left: 4px;
}

.sale-words {
    padding: 12px 0 6px;
}

.sale-upto,
.sale-off {
    font-size: 14px;
    letter-spacing: 3px;
}

.sale-words-line {
    margin: 10px 0;
}

.sale-headline-custom {
    max-width: 600px;
    font-size: 52px;
    letter-spacing: -1.5px;
}

.sale-hero-aside {
    max-width: 330px;
    margin-top: 10px;
}

.sale-intro {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.6;
}

.sale-ends {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 24px;
    padding: 12px 0;
}

.sale-countdown {
    gap: 12px;
}

.sale-countdown-part {
    font-size: 20px;
}

.sale-promo {
    top: auto;
    right: 38%;
    bottom: 28px;
    left: auto;
    width: 150px;
    padding: 42px 14px 16px;
}

.sale-promo-arrow {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
}

.sale-promo-arrow svg {
    width: 16px;
    height: 16px;
}

.sale-promo-label {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 2.5px;
}

.sale-promo-upto {
    font-size: 10px;
    letter-spacing: 2px;
}

.sale-promo-text {
    font-size: 32px;
    letter-spacing: -1.5px;
}

.sale-promo-text span {
    font-size: 14px;
}

/* sale page ends */

/* policy pages start (privacy, terms, shipping & returns) */

.legal {
    padding: 120px 0 60px;
}

.legal-head {
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.legal-eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
}

.legal-title {
    margin-bottom: 12px;
    font-size: 48px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.legal-meta {
    gap: 8px;
    font-size: 12px;
}

.legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

.legal-side {
    position: static;
    gap: 18px;
}

.legal-side-label {
    margin-bottom: 10px;
    font-size: 12px;
}

/* the other policies as a strip of pills that scrolls sideways, above the contents */
.legal-others {
    order: -1;
}

.legal-others .legal-side-label {
    display: none;
}

.legal-others ul {
    display: flex;
    gap: 8px;
    margin: 0 -60px;
    padding: 0 60px;
    overflow-x: auto;
    scrollbar-width: none;
}

.legal-others ul::-webkit-scrollbar {
    display: none;
}

.legal-others li {
    flex-shrink: 0;
}

.legal-others a {
    padding: 9px 14px;
    border: 1px solid #e3ded8;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.legal-others a::after {
    display: none;
}

.legal-others a.is-current {
    border-color: #111;
    background: #111;
    color: #fff;
}

.legal-toc {
    display: none;
}

.legal-content {
    font-size: 15px;
    line-height: 1.7;
}

.legal-content p {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.legal-content h2 {
    margin: 30px 0 12px;
    font-size: 21px;
    scroll-margin-top: 90px;
}

.legal-content h3 {
    margin: 24px 0 10px;
    font-size: 17px;
}

.legal-content ul li,
.legal-content ol li {
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.legal-content ul li::before {
    top: 10px;
}

.legal-contact {
    margin-top: 72px;
    padding-top: 40px;
}

/* heading on the left, the button beside it */
.legal-contact-head {
    align-items: center;
    gap: 20px 24px;
    margin-bottom: 40px;
}

.legal-contact-title {
    margin-bottom: 10px;
    font-size: 36px;
    letter-spacing: -1.2px;
}

.legal-contact-text {
    max-width: 420px;
    font-size: 15px;
    line-height: 1.65;
}

.legal-contact-btn {
    flex-shrink: 0;
}

.legal-contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
}

.legal-contact-card {
    padding-left: 20px;
}

.legal-contact-icon {
    margin-bottom: 12px;
}

.legal-contact-icon svg {
    width: 22px;
    height: 22px;
}

.legal-contact-label {
    font-size: 11px;
}

.legal-contact-value {
    font-size: 16px;
}

.legal-contact-address {
    font-size: 14px;
}

.legal-contact-note {
    font-size: 13px;
}

/* policy pages ends */

/* faq page start */

.faq {
    padding: 96px 0 50px;
}

.faq-head {
    margin-bottom: 26px;
}

.faq-title {
    margin-bottom: 12px;
    font-size: 48px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.faq-lead {
    font-size: 14px;
    line-height: 1.6;
}

.faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
}

.faq-q {
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
}

.faq-num {
    width: 32px;
    padding-top: 3px;
    font-size: 18px;
}

.faq-q-text {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.4;
}

.faq-icon {
    width: 28px;
    height: 28px;
}

.faq-icon::before,
.faq-icon::after {
    width: 10px;
    margin-left: -5px;
}

.faq-a {
    padding: 0 0 20px 36px;
    font-size: 16px;
    line-height: 1.6;
}

/* under the questions (beside them they'd get under 300px): the help card and the quick links side
   by side, the same height */
.faq-side {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    padding-top: 8px;
}

.faq-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border-radius: 18px;
}

.faq-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
}

.faq-card-icon svg {
    width: 22px;
    height: 22px;
}

.faq-card-title {
    font-size: 19px;
}

.faq-card-text {
    margin-bottom: 16px;
    font-size: 14px;
}

.faq-card-list {
    margin-bottom: 20px;
}

.faq-card-list li {
    font-size: 14px;
}

/* the button sits at the foot of the card, level with the end of the quick links */
.faq-card-btn {
    margin-top: auto;
}

.faq-quick {
    padding: 22px 24px;
    border-radius: 18px;
}

.faq-quick a {
    padding: 14px 0;
    font-size: 15px;
}

/* faq page ends */

/* search page start */

.search-hero {
    margin-bottom: 32px;
}

.search-hero-form {
    gap: 10px;
    padding-bottom: 12px;
}

.search-hero-icon {
    width: 22px;
    height: 22px;
}

.search-hero-input {
    font-size: clamp(20px, 5.3vw, 24px);
    letter-spacing: -.6px;
}

.search-hero-clear {
    width: 32px;
    height: 32px;
}

.search-hero-clear svg {
    width: 18px;
    height: 18px;
}

.search-hero-submit {
    width: 42px;
    height: 42px;
}

.search-hero-submit svg {
    width: 18px;
    height: 18px;
}

.search-hero-note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
}

.search-hero-none {
    margin-top: 28px;
}

.search-hero-none-title {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.3;
}

.search-hero-none-text {
    font-size: 13px;
    line-height: 1.6;
}

.search-hero-row {
    gap: 8px;
    margin-top: 24px;
}

.search-hero-row + .search-hero-row {
    margin-top: 20px;
}

.search-hero-suggest-label {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0 0 2px;
}

.search-hero-chip {
    padding: 8px 13px;
    font-size: 12px;
}

.search-hero-recent-clear {
    margin-left: 4px;
}

.search-hero-panel {
    max-height: 62vh;
    margin-top: 8px;
    padding: 16px 14px;
}

.search-panel-group + .search-panel-group {
    margin-top: 18px;
}

.search-panel-label {
    margin-bottom: 10px;
}

.search-panel-collection {
    padding: 7px 12px;
    font-size: 12px;
}

.search-panel-products {
    margin: 0 -8px;
}

.search-panel-product {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 8px;
}

.search-panel-name {
    font-size: 14px;
}

.search-panel-price {
    font-size: 13px;
}

.search-panel-price del {
    display: block;
    margin: 0 0 2px;
    font-size: 11px;
}

.search-panel-all {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
}

.search-panel-empty {
    font-size: 13px;
}

/* trending / you might like */
.search-hero-trending {
    margin-top: 44px;
}

.search-hero-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.search-hero-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.search-hero-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* search page ends */

/* 404 page start */

.error-404-wrap {
    padding: 110px 0 50px;
}

.error-404-eyebrow {
    margin-bottom: 6px;
}

/* the digits fit a 300px screen (they were 300px tall) */
.error-404-digits {
    margin-bottom: 10px;
    font-size: 132px;
    letter-spacing: -6px;
}

.error-404-digit-zero {
    -webkit-text-stroke-width: 1.5px;
}

.error-404-title {
    margin-bottom: 12px;
    font-size: 28px;
    letter-spacing: -.8px;
    line-height: 1.12;
}

.error-404-text {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.6;
}

.error-404-search {
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 10px;
}

.error-404-search-icon {
    width: 20px;
    height: 20px;
}

/* 18px (not under 16) so iPhone Safari doesn't zoom in on focus */
.error-404-search-input {
    font-size: 18px;
}

.error-404-search-submit {
    width: 40px;
    height: 40px;
}

.error-404-actions {
    width: 100%;
    gap: 10px;
    margin-bottom: 26px;
}

.error-404-links {
    gap: 8px 18px;
}

.error-404-link {
    font-size: 13px;
}

.error-404-trending {
    margin-top: 56px;
    padding-top: 28px;
}

.error-404-trending-head {
    gap: 12px;
    margin-bottom: 18px;
}

.error-404-trending-title {
    font-size: 22px;
    letter-spacing: -.5px;
}

.error-404-trending-link {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 1.5px;
}

/* 404 page ends */

/* contact page start */

.contact-us-wrap {
    padding: 120px 0 50px;
}

.contact-us-hero {
    margin-bottom: 100px;
}

.contact-us-word {
    font-size: clamp(80px, 24vw, 170px);
    letter-spacing: -4px;
}

.contact-us-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.contact-us-title {
    font-size: 46px;
    letter-spacing: -1px;
    line-height: 1.12;
}

.contact-us-lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.contact-us-badge {
    width: 84px;
    height: 84px;
}

.contact-us-badge-dot {
    width: 40px;
    height: 40px;
}

.contact-us-badge-dot svg {
    width: 17px;
    height: 17px;
}

.contact-us-row {
    row-gap: 14px;
}

/* form panel */
.contact-us-form > .wpcf7 {
    padding: 24px 16px;
    border-radius: 20px;
}

.contact-us-fields {
    row-gap: 18px;
}

.contact-us-field label {
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 1px;
}

/* 16px stops iPhone Safari zooming in on focus */
.contact-us-field input,
.contact-us-field textarea {
    height: 48px;
    padding: 8px 14px;
    font-size: 16px;
}

.contact-us-field textarea {
    height: 140px;
    padding: 12px 14px;
}

.contact-us-submit {
    margin-top: 24px;
}

.contact-us-send {
    height: 48px;
    padding: 0 24px;
}

.contact-us-send-arrow {
    width: 48px;
    height: 48px;
    background-size: 18px;
}

/* the note drops under the button instead of squeezing beside it */
.contact-us-note {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12px;
}

.contact-us-cf7 .wpcf7-response-output {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    font-size: 13px;
}

/* details beside the form (col-md-5), split from it by a faint line as on desktop, a little closer in */
.contact-us-card {
    padding: 4px 0 0 24px;
    border-top: 0;
    border-left: 1px solid rgb(17 17 17 / 12%);
}

.contact-us-block + .contact-us-block {
    margin-top: 22px;
    padding-top: 22px;
}

.contact-us-block-title {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
}

.contact-us-block-icon svg {
    width: 20px;
    height: 20px;
}

.contact-us-lines li {
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.contact-us-lines li span {
    min-width: 74px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.contact-us-card .contact-us-socials a {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* contact page ends */

/* about page ends */

/* product page start */

.pd {
    padding: 110px 0 64px;
}

.pd-crumbs {
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11px;
}

.pd-crumbs [aria-current] {
    max-width: 150px;
}

.pd-crumbs-sep {
    width: 10px;
}

/* photo on the left (thumbnails in a strip under it), the details beside it: a full-width 3:4 photo
   would be taller than the screen at this width */
.pd-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
}

.pd-layout > .pd-gallery {
    flex: 0 0 48%;
    max-width: 48%;
    min-width: 0;
}

.pd-layout > .pd-info {
    flex: 1 1 0;
    min-width: 0;
}

/* large photo on top, thumbnails in a strip under it that scrolls sideways */
.pd-gallery {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
}

.pd-gallery > .pd-main {
    flex: 0 0 auto;
}

.pd-main {
    border-radius: 12px;
}

.pd-thumbs-wrap {
    flex: 0 0 auto;
    width: 100%;
}

.pd-thumbs {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.pd-thumb {
    flex: 0 0 64px;
    width: 64px;
    border-radius: 8px;
}

.pd-thumbs-more {
    display: none;
}

.pd-zoom {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
}

.pd-zoom svg {
    width: 18px;
    height: 18px;
}

.pd-info {
    position: static;
}

.pd-notices .woocommerce-error,
.pd-notices .woocommerce-message,
.pd-notices .woocommerce-info {
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 13px;
}

.pd-tag {
    margin-bottom: 12px;
    padding: 5px 10px;
    font-size: 11px;
}

.pd-title {
    margin-bottom: 12px;
    font-size: 32px;
    letter-spacing: -1px;
    line-height: 1.15;
}

.pd-rating {
    margin-bottom: 16px;
    font-size: 13px;
}

.pd-rating .pd-stars svg {
    width: 14px;
    height: 14px;
}

.pd-price-block {
    margin-bottom: 18px;
}

.pd-price {
    gap: 10px;
    font-size: 20px;
}

.pd-price del {
    font-size: 14px;
}

.pd-price-note {
    margin-top: 8px;
    font-size: 12px;
}

.pd-short {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.65;
}

.pd .variations_form .variations tr {
    margin-bottom: 18px;
}

.pd .variations_form .variations .label label {
    margin-bottom: 10px;
    font-size: 13px;
}

.pd-chosen,
.pd-size-guide {
    font-size: 13px;
}

.pd-chip {
    min-width: 46px;
    height: 42px;
    padding: 0 12px;
}

.pd-chips-color .pd-chip {
    width: 42px;
    height: 42px;
}

.pd .variations_button {
    gap: 8px;
}

.pd .single-product-add-to-cart {
    min-width: 0;
}

.pd .single_add_to_cart_button {
    height: 48px;
    padding: 0 14px;
    font-size: 12px;
}

.pd-wish {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
}

.pd-wish i {
    font-size: 18px;
}

/* perks: a list down the narrow details column, icon beside the words */
.pd-perks {
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 18px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.pd-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
}

.pd-perks svg {
    width: 22px;
    height: 22px;
}

.pd-perks strong {
    font-size: 11px;
}

/* details tabs, then the lifestyle photo under them */
.pd-about,
.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
}

/* the details tabs with the lifestyle photo beside them, as on desktop */
.pd-about.has-photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: 40px;
}

.pd-tabs-nav {
    gap: 24px;
    margin-bottom: 20px;
}

.pd-tab {
    padding-bottom: 12px;
    font-size: 14px;
}

.pd-tab-panel.pd-content {
    max-width: none;
    font-size: 14px;
}

.pd-tab-panel .pd-specs {
    max-width: none;
}

.pd-specs div {
    font-size: 13px;
}

.pd-about-photo {
    border-radius: 12px;
}

.pd-section {
    margin-top: 48px;
    padding-top: 36px;
}

.pd-section-head {
    margin-bottom: 22px;
}

.pd-section-title {
    font-size: 26px;
    letter-spacing: -.5px;
}

.pd-section-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* reviews: the score card first, then the list and the form */
/* the score card beside the reviews, as on desktop */
.pd-reviews-grid {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
}

.pd-review-summary {
    position: static;
    padding: 24px 22px;
    border-radius: 14px;
}

.pd-review-avg {
    font-size: 48px;
    letter-spacing: -2px;
}

.pd-review-bars {
    margin-top: 18px;
}

.pd-review {
    padding: 20px 0;
}

.pd-review .children {
    margin-left: 20px;
}

.pd-review-head {
    gap: 12px;
}

.pd-review-text,
.pd-review-empty,
.pd-review-note {
    font-size: 14px;
}

.pd-review-form-wrap {
    margin-top: 28px;
    padding: 24px 22px;
    border-radius: 14px;
}

.pd-review-form-title {
    margin-bottom: 18px;
    font-size: 18px;
}

.pd-star-pick-row svg {
    width: 32px;
    height: 32px;
}

.pd-review-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* full-screen viewer: arrows under the photo, out of its way */
.pd-viewer {
    padding: 70px 12px 84px;
}

.pd-viewer-close,
.pd-viewer-nav {
    width: 44px;
    height: 44px;
}

.pd-viewer-close {
    top: 14px;
    right: 14px;
}

.pd-viewer-nav {
    bottom: 20px;
}

.pd-viewer-prev {
    left: 16px;
}

.pd-viewer-next {
    right: 16px;
}

.pd-viewer-count {
    bottom: 32px;
}

/* product page ends */

/* cart page start */

.cart-page {
    padding: 110px 0 64px;
}

.cart-head {
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.cart-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.cart-title {
    margin-bottom: 6px;
    font-size: 44px;
    letter-spacing: -1.4px;
}

.cart-sub {
    font-size: 12px;
}

.cart-head .acc-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 13px;
}

.cart-ship {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
}

.cart-ship p {
    margin-bottom: 10px;
    font-size: 13px;
}

/* the desktop arrangement, sized for a tablet: the items on the left, the order summary a 300px column
   on the right that stays in view while the list scrolls */
.cart-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.cart-items {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-item {
    gap: 18px;
    padding: 20px 0;
}

.cart-item-img {
    width: 100px;
    max-width: none;
    height: 125px;
    border-radius: 10px;
}

.cart-item-top {
    gap: 10px;
}

.cart-item-name {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.35;
}

.cart-item-meta dl {
    margin-bottom: 4px;
    font-size: 12px;
}

.cart-item-unit {
    font-size: 12px;
}

.cart-item-total {
    font-size: 15px;
}

.cart-item-bottom {
    gap: 10px 12px;
    margin-top: 16px;
}

.cart-qty-btn {
    width: 36px;
    height: 36px;
}

.cart-qty-input {
    width: 30px;
}

.cart-item-actions {
    gap: 14px;
}

.cart-item-link {
    font-size: 12px;
}

.cart-summary {
    position: sticky;
    top: 100px;
    flex: 0 0 300px;
    padding: 24px 22px;
    border-radius: 16px;
}

.cart-summary-title {
    margin-bottom: 10px;
    font-size: 17px;
}

.cart-line {
    padding: 6px 0;
    font-size: 14px;
}

.cart-line-total {
    margin-top: 6px;
    padding-top: 12px;
    font-size: 17px;
}

/* cart toast above the bottom bar */
.cart-toast {
    bottom: calc(90px + env(safe-area-inset-bottom));
}

.cart-coupon {
    margin: 16px 0 18px;
}

/* 16px stops iPad Safari zooming in on focus */
.cart-coupon-form input {
    height: 42px;
    font-size: 16px;
}

.cart-checkout {
    width: 100%;
    height: 50px;
}

.cart-trust {
    gap: 16px;
    margin-top: 16px;
}

.cart-suggest {
    margin-top: 48px;
    padding-top: 32px;
}

.cart-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

.cart-suggest-head {
    margin-bottom: 20px;
}

.cart-suggest-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* the desktop arrangement, sized for a tablet: the words on the left, the photo mosaic beside them */
.cart-void {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 10px 0 20px;
}

.cart-void-text {
    flex: 0 0 50%;
    max-width: 50%;
}

.cart-void-title {
    margin-bottom: 18px;
    font-size: 48px;
    letter-spacing: -2px;
    line-height: 1;
}

.cart-void-lead {
    max-width: 400px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.65;
}

.cart-void-actions {
    margin-bottom: 30px;
}

.cart-void-actions .acc-btn {
    flex: 0 0 auto;
    padding: 0 22px;
}

/* the benefits as a short list, icon beside the words: three columns would leave about 100px each */
.cart-void-perks {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 20px;
}

.cart-void-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.cart-void-perks svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.cart-void-perks strong {
    font-size: 13px;
}

/* editorial: one large portrait photo with sharp corners, a smaller one overlapping its lower-left edge
   in a white frame, and the lead piece's name and price on a small frosted label. The third photo is
   left out: three products on different backgrounds read as a busy grid */
.cart-void-media {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 480px;
    min-width: 0;
}

.cart-void-tile {
    border-radius: 4px;
}

.cart-void-tile-1 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 56px;
    width: auto;
    height: auto;
}

.cart-void-tile-2 {
    top: auto;
    right: auto;
    bottom: 40px;
    left: 0;
    z-index: 1;
    width: 42%;
    height: auto;
    aspect-ratio: 4 / 5;
    border: 6px solid #fff;
    box-shadow: 0 28px 50px -26px rgb(0 0 0 / 40%);
}

.cart-void-tile-3 {
    display: none;
}

/* only one photo: it takes the whole column */
.cart-void-tile-1:only-child {
    left: 0;
}

/* names appear on hover, which a touch screen doesn't have: only the lead photo keeps a label, always
   shown, at its top right so the overlapping photo doesn't cover it */
.cart-void-caption {
    display: none;
}

.cart-void-tile-1 .cart-void-caption {
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    display: flex;
    max-width: calc(100% - 28px);
    padding: 10px 12px;
    border-radius: 4px;
    opacity: 1;
    transform: none;
}

/* collections: a swipeable strip, about 3.5 across with the next one peeking in */
.cart-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 42px) / 3.5);
    grid-auto-flow: column;
    gap: 14px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-tiles::-webkit-scrollbar {
    display: none;
}

.cart-tile {
    scroll-snap-align: start;
}

.cart-tile {
    border-radius: 12px;
}

.cart-tile-info {
    right: 12px;
    bottom: 12px;
    left: 12px;
}

.cart-tile-info strong {
    font-size: 17px;
}

/* cart page ends */

/* checkout page start */

.co {
    padding: 110px 0 64px;
}

/* title on the left, the Cart → Details → Confirmation steps on the right, as on desktop */
.co-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 22px;
}

.co-eyebrow {
    margin-bottom: 10px;
}

.co-title {
    font-size: 40px;
    letter-spacing: -1.5px;
}

.co-steps li {
    gap: 6px;
    font-size: 11px;
    letter-spacing: 1px;
}

.co-steps li + li::before {
    width: 24px;
    margin: 0 10px;
}

.co-steps a {
    gap: 6px;
}

.co-steps-dot {
    width: 8px;
    height: 8px;
}

/* the desktop arrangement, sized for a tablet: the steps on the left, the order summary a 300px column
   on the right that stays in view while the form scrolls, the same as the cart */
.co-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
}

.co-side {
    position: sticky;
    top: 100px;
    order: 0;
    padding: 24px 22px;
    border-radius: 18px;
}

.co-main,
#customer_details {
    gap: 12px;
}

.co .woocommerce-error,
.co .woocommerce-message,
.co .woocommerce-info {
    padding: 12px 14px;
    font-size: 13px;
}

/* step cards */
.co-step {
    padding: 22px 20px;
    border-radius: 16px;
}

/* "Have an account? Sign in" / "Secure" drop under the title instead of overflowing beside it */
.co-step-head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.co-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.co-step-text {
    flex: 1 1 0;
}

.co-step-title {
    font-size: 18px;
}

.co-step-sub {
    font-size: 12px;
}

.co-step-aside {
    flex: 0 0 100%;
    margin-left: 40px;
    font-size: 12px;
    white-space: normal;
}

/* fields: full width; first / last name and state / PIN code stay in pairs */
.co-fields {
    gap: 10px;
}

.co #billing_phone_field,
.co #billing_email_field,
.co #billing_city_field,
.co #shipping_city_field {
    grid-column: span 6;
}

.co #billing_state_field,
.co #billing_postcode_field,
.co #shipping_state_field,
.co #shipping_postcode_field {
    grid-column: span 3;
}

.co .co-fields .form-row > label {
    left: 13px;
    right: 13px;
}

/* 16px stops iPhone Safari zooming in on focus */
.co .co-fields .input-text,
.co .co-fields select,
.co .co-fields textarea {
    height: 56px;
    padding: 24px 13px 8px;
    font-size: 16px;
}

.co .co-fields textarea {
    height: auto;
    min-height: 110px;
    padding-top: 28px;
}

.co .co-fields .select2-container .select2-selection--single {
    height: 56px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 13px;
    font-size: 16px;
}

.co .co-fields .select2-container .select2-selection--single .select2-selection__arrow {
    top: 15px;
}

.co-check,
.co .woocommerce-form__label-for-checkbox {
    align-items: flex-start;
    font-size: 13px !important;
    line-height: 1.5;
}

.co-check input,
.co .woocommerce-form__label-for-checkbox input {
    margin-top: 1px;
}

.co-ship-to h3 .co-check,
.co-account > .co-check {
    padding: 14px;
}

.co-notes[open] summary {
    margin-bottom: 16px;
}

/* payment */
.co .wc_payment_method > label {
    padding: 14px;
    font-size: 13px;
}

.co .payment_box {
    padding: 0 14px 14px 44px;
    font-size: 12px;
}

.co .woocommerce-terms-and-conditions-wrapper {
    font-size: 12px;
}

.co #place_order {
    height: 52px;
}

/* summary */
.co-side-head {
    margin-bottom: 16px;
}

.co-side-title {
    font-size: 17px;
}

.co-item {
    gap: 12px;
    margin-bottom: 12px;
}

.co-item-img {
    width: 52px;
    height: 64px;
}

.co-item-name,
.co-item-price {
    font-size: 13px;
}

.co-item-meta dl {
    font-size: 11px;
}

.co-total-row {
    font-size: 13px;
}

.co-total-row.order-total {
    font-size: 17px;
}

.co-ship-method label {
    padding: 11px 12px;
    font-size: 12px;
}

.co-coupon-row input {
    font-size: 16px;
}

.co-trust {
    gap: 8px 14px;
}

.co-trust li {
    font-size: 11px;
}

/* order received */
.co-thanks-hero {
    margin-bottom: 32px;
}

.co-thanks-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.co-thanks-icon svg {
    width: 28px;
    height: 28px;
}

.co-thanks-title {
    margin-bottom: 14px;
    font-size: 44px;
    letter-spacing: -1.4px;
    line-height: 1.05;
}

.co-thanks-lead {
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.6;
}

/* order facts four across, as on desktop (about 170-225px each) */
.co-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 14px;
}

.co-facts div {
    padding: 16px;
}

.co-facts dt {
    font-size: 10px;
    letter-spacing: 1.2px;
}

.co-facts dd {
    font-size: 14px;
    word-break: break-word;
}

/* order details on the left, what happens next beside them */
.co-thanks-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
}

.co-next {
    padding: 22px 20px;
}

.co-thanks-actions .acc-btn {
    flex: 1 1 100%;
}

/* checkout page ends */

/* wishlist page start */

.wish {
    padding: 96px 0 50px;
}

.wish-head {
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.wish-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.wish-title {
    margin-bottom: 6px;
    font-size: 38px;
    letter-spacing: -1.2px;
}

.wish-sub {
    font-size: 14px;
}

.wish-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.wish-note {
    margin: -6px 0 22px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.wish-empty {
    margin-top: 10px;
    padding: 40px 8px;
}

.wish-empty-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.wish-empty-icon svg {
    width: 26px;
    height: 26px;
}

.wish-empty-title {
    font-size: 21px;
}

.wish-empty-text {
    margin-bottom: 22px;
    font-size: 13px;
}

.wish-empty .acc-btn {
    height: 44px;
    padding: 0 22px;
    letter-spacing: 1.5px;
}

.wish-suggest {
    margin-top: 40px;
    padding-top: 32px;
}

.wish-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

/* wishlist page ends */

/* my account page start */

.auth {
    padding: 110px 0 60px;
}

.auth-card {
    flex-direction: row;
    gap: 12px;
    min-height: 640px;
    padding: 12px;
    border-radius: 28px;
}

.auth-side {
    flex: 0 0 50%;
    min-width: 0;
    padding: 0px 16px 16px 0;
}

.auth-switcher {
    margin-bottom: 24px;
}

.auth-body {
    padding: 24px 0;
}

.auth-switch-btn {
    padding: 10px 14px;
}

.auth-title {
    font-size: 30px;
    letter-spacing: -.8px;
}

.auth-lead {
    margin-bottom: 16px;
    font-size: 13px;
}

.auth-saved {
    margin: -12px 0 24px;
    font-size: 12px;
}

.auth-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auth-field input {
    height: 42px;
    font-size: 14px;
}

.auth-check {
    font-size: 13px;
}

.auth-submit {
    height: 48px;
}

.auth-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.auth-visual {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0 22px 0 22px;
}

.auth-visual-img {
    object-position: top;
}

.auth-notch-top {
    width: 96px;
    height: 48px;
    border-bottom-right-radius: 20px;
}

.auth-notch-top::before,
.auth-notch-top::after {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 100%, transparent 19.5px, #f6f3ef 20px);
}

.auth-notch-bottom {
    display: none;
}

.auth-tag {
    top: 16px;
    right: 16px;
    padding: 8px 12px;
    font-size: 11px;
}

.auth-visual-content {
    right: 20px;
    bottom: 22px;
    left: 20px;
}

.auth-quote {
    margin-bottom: 16px;
    font-size: 26px;
}

.auth-perks {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    gap: 10px;
    padding-top: 14px;
}

.auth-perk {
    font-size: 12px;
}

.acc {
    padding: 96px 0 50px;
}

.acc-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.acc-eyebrow {
    margin-bottom: 10px;
}

.acc-title {
    margin-bottom: 6px;
    font-size: 28px;
    letter-spacing: -1.2px;
    line-height: 1.05;
}

.acc-sub {
    font-size: 12px;
}

.acc-logout {
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
}

.acc-logout .acc-icon {
    width: 18px;
    height: 18px;
}

.acc-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}

.acc-nav {
    position: static;
    flex: none;
    margin: 0 -60px;
}

.acc-nav ul {
    display: flex;
    gap: 8px;
    padding: 0 60px;
    overflow-x: auto;
    scrollbar-width: none;
}

.acc-nav ul::-webkit-scrollbar {
    display: none;
}

.acc-nav ul li {
    flex-shrink: 0;
    margin: 0;
}

.acc-nav-link {
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #ececec;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}

.acc-nav-link.is-active {
    border-color: #111;
}

.acc-nav-link .acc-icon {
    width: 17px;
    height: 17px;
}

.acc-nav-count {
    margin-left: 2px;
}

.acc-nav-sep {
    display: none;
}

.acc-section + .acc-section {
    margin-top: 36px;
}

.acc-section-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.acc-h2 {
    margin-bottom: 16px;
    font-size: 22px;
}

.acc-lead {
    margin: -6px 0 20px;
    font-size: 13px;
    line-height: 1.6;
}

.acc-btn {
    height: 44px;
    padding: 0 20px;
    letter-spacing: 1.5px;
}

.acc-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.acc-stat {
    padding: 16px;
    border-radius: 14px;
}

.acc-stat-label {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.acc-stat-value {
    margin: 12px 0 10px;
    font-size: 34px;
}

.acc-stat-text {
    font-size: 24px;
}

.acc-stat-link {
    font-size: 12px;
}

.acc-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px 2px;
}

.acc-row-main {
    flex: 1 1 100%;
}

.acc-row-main strong {
    font-size: 14px;
}

.acc-row-main span {
    font-size: 12px;
}

.acc-row-total {
    min-width: 0;
    margin-left: auto;
    font-size: 14px;
}

.acc-links {
    gap: 10px;
}

.acc-link-card {
    padding: 16px;
}

.acc-empty {
    padding: 40px 18px;
}

.acc-empty-title {
    font-size: 17px;
}

.acc-empty-text {
    font-size: 13px;
}

.acc-order-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
}

.acc-order-number {
    margin-right: 8px;
    font-size: 14px;
}

.acc-order-date {
    font-size: 12px;
}

.acc-order-body {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px;
}

.acc-thumb {
    width: 48px;
    height: 60px;
}

.acc-order-info {
    flex: 1 1 0;
}

.acc-order-items {
    font-size: 13px;
}

.acc-order-total {
    font-size: 15px;
}

.acc-order-actions {
    flex: 1 1 100%;
}

.acc-order-actions .acc-btn {
    flex: 1 1 0;
    height: 42px;
    padding: 0 12px;
    font-size: 10px;
}

.acc-order-actions .acc-btn-sm {
    height: 38px;
}

.acc-pager {
    gap: 10px;
    margin-top: 22px;
}

/* single order */
.acc-order-actions-top {
    margin-top: 18px;
}

.acc-notice {
    padding: 12px 14px;
    font-size: 13px;
}

.acc-track-step {
    padding-right: 8px;
}

.acc-track-step strong {
    font-size: 13px;
}

.acc-track-step span {
    font-size: 11px;
}

.acc-item {
    gap: 12px;
    padding: 14px 0;
}

.acc-item-img {
    width: 60px;
    height: 76px;
    border-radius: 8px;
}

.acc-item-name,
.acc-item-price {
    font-size: 14px;
}

.acc-item-meta,
.acc-item-qty {
    font-size: 12px;
}

.acc-totals {
    max-width: none;
}

.acc-total-row {
    font-size: 13px;
}

.acc-total-order_total {
    font-size: 16px;
}

.acc-order-note,
.acc-note-text p {
    font-size: 13px;
}

.acc-address-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.acc-card {
    padding: 18px;
    border-radius: 14px;
}

.acc-card address {
    margin-bottom: 18px;
    font-size: 13px;
}

.acc-form .form-row-first,
.acc-form .form-row-last {
    flex: 0 0 100%;
}

.acc-form .input-text,
.acc-form select,
.acc-form textarea {
    height: 46px;
    font-size: 16px;
}

.acc-form textarea {
    height: auto;
}

.acc-form .select2-container .select2-selection--single {
    height: 46px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px;
    line-height: 44px;
}

.acc-form .select2-container .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

.acc-fieldset {
    padding: 18px 16px;
    border-radius: 14px;
}

.acc-form-actions .acc-btn {
    flex: 1 1 auto;
}

.acc-content .woocommerce-error, .acc-content .woocommerce-message, .acc-content .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 12px;
}

/* my account page ends */

}

@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {

/* common styles for all pages on small screens start */

.custom-container {
    padding-right: 60px !important;
    padding-left: 60px !important;
}

.cursor-dot {
    display: none;
}

.page-loader {
    padding: 0 60px;
}

.page-loader-word {
    font-size: 64px;
    letter-spacing: -2.5px;
}

.page-loader-space {
    width: 18px;
}

.page-loader-char {
    padding-bottom: 4px;
}

.page-loader-count {
    top: -30px;
    right: 0;
    font-size: 18px;
}

.page-loader-photo {
    width: 150px;
}

.eyebrow {
    gap: 8px;
    letter-spacing: 3px;
}

.eyebrow-line {
    width: 16px;
}

/* no bottom bar here: the header has the full desktop menu (the 1200px block brings the bar back for
   exactly 1200px, where the hamburger menu shows) */
.mobile-bar {
    display: none;
}

/* common styles for all pages on small screens ends */

/* home page start */

/* header section start */

/* from 1201px Max Mega Menu shows the full desktop menu (its breakpoint is 1200px; the 1200px block
   further down restores the hamburger header for exactly 1200px). This is the desktop header a step
   tighter: logo left, links centred, all four icons, so the links keep clear of the logo and the icons */
.header-inner {
    gap: 32px;
    padding: 0 48px !important;
}

.header-logo img {
    height: 68px;
}

.f-nav .header-logo img {
    height: 58px;
}

#mega-menu-wrap-primary #mega-menu-primary {
    gap: 24px;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-size: 12px;
    letter-spacing: 1.3px;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    margin-left: 3px;
}

.header-user-actions {
    gap: 20px;
}

/* header section ends */

/* banner section start */

/* the desktop composition, a step below desktop sizes: the banner keeps its 1061:571 shape (about
   872 x 469 at 992px, 1080 x 581 at 1199px). The stats and the "Premium Quality" label stay below the
   stitched line at 74% of the height; the intro stays clear of the model's head */
.banner-wrap {
    padding: 110px 0 0;
}

.banner-line-v {
    top: -110px;
}

.banner-col-left,
.banner-col-right {
    padding-bottom: 20px;
}

.banner-col-right {
    padding-left: 16px;
}

.banner-col-left {
    flex: 0 0 40%;
}

.banner-title {
    font-size: 80px;
    text-wrap: balance;
}

.banner-col-left .banner-title {
    margin-top: 34px;
}

.banner-title-2 {
    margin-top: 90px;
    white-space: normal;
}

.banner-copy {
    max-width: 280px;
    margin-top: 22px;
}

.banner-text p {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
}

.banner-cta {
    padding-right: 16px;
}

.banner-btn {
    gap: 14px;
    margin-top: 24px;
    padding: 5px 5px 5px 18px;
    font-size: 16px;
}

.banner-btn::before {
    top: 5px;
    right: 5px;
    bottom: 5px;
    width: 38px;
}

.banner-btn:hover::before {
    width: calc(100% - 10px);
}

.banner-btn-icon {
    width: 38px;
    height: 38px;
}

.banner-btn-icon svg {
    width: 19px;
    height: 19px;
}

.banner-quality {
    left: 100px;
    bottom: 28px;
    width: 116px;
}

.banner-quality span {
    top: -14px;
    left: 36px;
    font-size: 12px;
}

.banner-stat strong {
    font-size: 38px;
}

.banner-stat span {
    margin-top: 6px;
    font-size: 13px;
}

.banner-social {
    gap: 14px;
    margin-top: 8px;
}

.banner-social a {
    font-size: 17px;
}

/* banner section ends */

/* legends film section start */

.legends-film {
    height: 100svh;
    min-height: 480px;
}

.legends-film-head {
    padding: 0 24px !important;
}

.legends-film-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 2px;
}

.legends-film-title {
    font-size: 62px;
    text-wrap: balance;
    margin: 0 auto 16px;
}

.legends-film-text {
    max-width: 550px;
    line-height: 1.5;
}

.legends-film-frame {
    inset: 75px 12px 14px;
}

.legends-film-corner {
    width: 16px;
    height: 16px;
}

.legends-film-hud {
    inset: 89px 26px 28px;
}

.legends-film-hud-row {
    gap: 12px;
}

.legends-film-hud-label {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 2px;
}

.legends-film-rec {
    width: 6px;
    height: 6px;
}

.legends-film-timecode {
    font-size: 10px;
    letter-spacing: 1px;
}

/* legends film section ends */

/* new arrivals section start */

.new-arrival-wrap {
    padding: 90px 0;
}

.new-arrival-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.new-arrival-title {
    font-size: 54px;
    text-wrap: balance;
}

.new-arrival-text {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

.new-arrival-track {
    gap: 12px;
    padding: 0 60px;
}

.new-arrival-card {
    flex: 0 0 240px;
}

.new-arrival-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.new-arrival-info {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.new-arrival-cat {
    margin-bottom: 4px;
    font-size: 10px;
}

.new-arrival-info h3 {
    font-size: clamp(13px, 3.2vw, 14px);
}

.new-arrival-price {
    margin-top: 4px;
    font-size: clamp(11px, 2.6vw, 12px);
}

.new-arrival-link {
    margin-top: 32px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* new arrivals section ends */

/* essential section start */

.essential-collection-wrap {
    padding: 90px 0;
}

.essential-collection-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.essential-collection-title {
    font-size: 54px;
    text-wrap: balance;
}

.essential-collection-text {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
}

.essential-collection-grid {
    margin-right: -8px !important;
    margin-left: -8px !important;
}

.essential-collection-col {
    margin-bottom: 0;
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.essential-collection-label {
    right: 16px;
    bottom: 16px;
    left: 16px;
}

.essential-collection-name {
    font-size: 22px;
}

.essential-collection-name svg {
    width: 22px;
    height: 22px;
}

/* essential section ends */

/* wear section start */

.wear-wrap {
    padding: 90px 0;
}

.wear-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.wear-title {
    font-size: 54px;
}

.wear-text {
    margin: 0;
    line-height: 1.5;
    text-wrap: pretty;
    text-align: left;
}

.wear-bar {
    top: 71px;
    margin-bottom: 20px;
}

.wear-bar-inner {
    gap: 14px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.wear-bar-title, .wear-bar.is-stuck .wear-bar-title {
    max-width: 0;
    margin-right: -14px;
    opacity: 0;
    display: none;
}

.wear-filter {
    padding: 8px 13px;
}

.wear-bar-link {
    font-size: 10px;
    letter-spacing: 1px;
}

.wear-grid {
    margin-right: -12px !important;
    margin-left: -12px !important;
}

.wear-col {
    margin-bottom: 16px;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.wear-empty {
    padding: 40px 0;
    font-size: 14px;
}

.wear-card-badge {
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    font-size: 9px;
    letter-spacing: 1px;
}

.wear-card .wishlist-toggle {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.wear-card-info {
    padding-top: 12px;
}

.wear-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.wear-card-cat {
    font-size: 9px;
    letter-spacing: 1.5px;
}

.wear-card-row {
    gap: 8px;
}

.wear-card-title {
    font-size: clamp(12px, 3.2vw, 14px);
}

.wear-card-price {
    margin-top: 4px;
    font-size: clamp(10px, 2.6vw, 12px);
}

.wear-card-swatch {
    width: clamp(8px, 1.6vw,10px);
    height: clamp(8px, 1.6vw,10px);
}

.wear-card-plus {
    width: 24px;
    height: 24px;
}

.wear-card-plus svg {
    width: 18px;
    height: 18px;
}

.wear-card-colors {
    margin-top: 8px;
}

/* wear section ends */

/* campaign section start */

/* the desktop campaign a step down: full-height framed image with the desktop's angled shade, the words
   bottom left on the page's 60px gutter, the ring bottom right */
.campaign-wrap {
    min-height: 92vh;
    padding: 150px 0 96px;
}

.campaign-media {
    clip-path: inset(1.5% 1.5% 1.5% 1.5% round 6px);
}

.campaign-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.campaign-content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 660px;
}

.campaign-tag {
    margin-bottom: 22px;
}

.campaign-title {
    margin-bottom: 26px;
    font-size: clamp(68px, 5.3vw, 78px);
    letter-spacing: -2.5px;
}

.campaign-text {
    max-width: 380px;
    margin-bottom: 36px;
    padding-left: 16px;
    line-height: 1.7;
}

.campaign-btn {
    gap: 14px;
    padding: 15px 22px;
    letter-spacing: 2.2px;
}

.campaign-ring {
    position: relative;
    top: auto;
    right: auto;
    width: 150px;
    height: 150px;
    margin-bottom: 8px;
}

.campaign-ring-star {
    width: 20px;
    height: 20px;
}

/* campaign section ends */

/* philosophy section start */

.philosophy-wrap {
    padding: 80px 0;
}

.philosophy-head {
    margin-bottom: 36px;
}

.philosophy-eyebrow {
    margin-bottom: 18px;
}

.philosophy-head h1, .philosophy-head h2, .philosophy-head h3 {
    max-width: 600px;
    font-size: 48px;
    text-wrap: balance;
    letter-spacing: -1.4px;
}

.philosophy-rule {
    margin-bottom: 32px;
}

.philosophy-body p {
    margin-bottom: 14px;
    font-size: clamp(16px, 1.014vw, 18px);
    line-height: 1.6;
    text-wrap: pretty;
}

.philosophy-media {
    max-width: 100%;
    aspect-ratio: 4 / 5;
}

.philosophy-note {
    font-size: 20px;
    line-height: 1.3;
}

.philosophy-btn {
    flex-shrink: 0;
    padding: 14px 24px;
}

/* philosophy section ends */

/* counters section starts */ 

.counter-wrap {
    padding: 80px 0;
}

.counter-item {
    padding: 0 24px;
    text-align: center;
}

.counter-col:first-child .counter-item {
    padding-left: 0;
}

.counter-value {
    margin-bottom: 12px;
    font-size: 72px;
    letter-spacing: -2px;
}

/* counters section ends */ 

/* social section starts */

.social-wrap {
    padding: 90px 0;
}

.social-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
}

.social-title {
    font-size: 54px;
}

/* social section ends */

/* footer section starts */

.footer-wrapper {
    padding: 0 10px 20px;
}

.footer-card {
    padding-top: 48px;
    border-radius: 12px;
}

.footer-top {
    padding-bottom: 44px;
}

.footer-brand {
    margin-bottom: 36px;
}

.footer-logo-link {
    margin-bottom: 18px;
}

.footer-logo {
    height: 70px;
}

.footer-about {
    max-width: 450px;
    font-size: 14px;
    line-height: 1.5;
}

/* all four columns in one row under the brand (col-lg-12), the desktop's proportions: Policies and Contact
   get more room for their longer lines */
.footer-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 32px;
}

.footer-heading {
    margin-bottom: 16px;
    font-size: 14px;
    letter-spacing: 2px;
}

.footer-list li + li {
    margin-top: 4px;
}

.footer-list a {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.footer-bottom {
    grid-template-columns: 100%;
    gap: 6px;
    padding: 22px 0;
    text-align: center;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 12px;
}

.footer-credit {
    justify-self: center;
}

.footer-top-btn {
    display: none;
}

.footer-wordmark {
    margin-bottom: -4px;
    font-size: clamp(80px, 8.013vw, 110px);
    letter-spacing: -1px;
}

/* footer section ends */

/* home page ends */

/* about page start */

/* banner section start */

.about-banner-wrap {
    height: calc(100svh - 40px);
    min-height: 560px;
    max-height: 720px;
    margin-top: 40px;
}

.about-banner-wrap.is-plain {
    height: 500px;
}

.about-banner-content {
    padding: 72px 60px 44px;
}

.about-banner-row-top {
    flex-direction: row;
    gap: 24px;
}

.about-banner-eyebrow {
    padding-top: 6px;
    font-size: 12px;
    letter-spacing: 3px;
}

.about-banner-title {
    position: static;
    flex: 0 0 440px;
    max-width: 440px;
    margin-top: 40px;
    font-size: 84px;
    margin-bottom: 48px;
    text-wrap: balance;
    letter-spacing: -3px;
    line-height: .93;
}

.about-banner-intro {
    max-width: 380px;
}

.about-banner-lead {
    font-size: 24px;
}

.about-banner-text {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
}

/* banner section ends */

/* about intro section start */

.about-intro-wrap {
    padding: 70px 0;
}

.about-intro-eyebrow {
    margin-bottom: 24px;
}

.about-intro-para {
    font-size: 32px;
    line-height: 1.42;
}

.about-intro-strip {
    margin-top: 60px;
    overflow: hidden;
}

.about-intro-item {
    flex: 0 0 auto;
    width: clamp(120px, 33vw, 240px);
}

/* about intro section ends */

/* about story section start */

.about-story-wrap {
    padding: 80px 0;
}

.about-story-head {
    padding-bottom: 16px;
    margin-bottom: 40px;
}

.about-story-title {
    font-size: 54px;
    letter-spacing: 1px;
    padding: 0;
}

.about-story-col-media {
    margin-bottom: 32px;
}

.about-story-body p {
    margin: 0 0 24px;
    font-size: clamp(18px, 1.2001vw, 20px);
}

/* about story section ends */

/* about counter section start */

.about-counter-wrap {
    padding: 32px 0 88px;
}

.about-counter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 0;
    padding: 44px 0;
}

.about-counter-item {
    gap: 12px;
    text-align: center;
}

.about-counter-value {
    font-size: 60px;
    letter-spacing: -1.5px;
}

/* about counter section ends */

/* about approach section start */

/* the desktop arrangement a step down: the big title across the top, the photo in the middle with the
   step names sliding over it, and the rail with the counter left and the step text right at the foot.
   The photo is sized so it stays clear of the title and the foot on a 720px-high laptop screen */
.about-approach-stage {
    height: 100vh;
    min-height: 720px;
}

.about-approach-title {
    top: 90px;
    font-size: clamp(68px, 5.0105vw, 90px);
    letter-spacing: -3px;
}

.about-approach-media {
    top: 50%;
    width: 300px;
}

.about-approach-titles {
    top: 50%;
}

.about-approach-titles-row {
    gap: 90px;
    font-size: clamp(32px, 3.5vw, 38px);
    letter-spacing: -1.5px;
}

.about-approach-foot {
    bottom: 52px;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
}

.about-approach-rail {
    margin-bottom: 20px;
}

.about-approach-texts {
    justify-self: end;
    max-width: 420px;
    min-height: 76px;
}

.about-approach-text {
    font-size: 18px;
    line-height: 1.35;
}

/* about approach section ends */

/* new arrivals page start */

.shop-wrap {
    padding: 120px 0 40px;
}

.shop-wrap-new {
    padding-top: 135px;
}

/* the desktop hero, just under desktop sizes (between the 992-1199 step and desktop): the words on the
   left, the slider beside them with the current piece up front and the next one peeking in, scaled back */
.new-arrival-hero {
    flex-direction: row;
    align-items: center;
    gap: 56px;
    margin-bottom: 100px;
}

.new-arrival-hero-text {
    display: block;
    flex: 0 0 39%;
    max-width: 39%;
}

.new-arrival-hero-eyebrow {
    margin-bottom: 26px;
}

.new-arrival-headline {
    margin: 0 0 26px;
    font-size: 82px;
    letter-spacing: -3.4px;
    line-height: .95;
}

.new-arrival-intro {
    max-width: 390px;
    margin: 0 0 40px;
    font-size: 16px;
    line-height: 1.7;
}

.new-arrival-drop {
    gap: 14px;
    margin: 0 0 36px;
    font-size: 11px;
    letter-spacing: 2.5px;
}

.new-arrival-scroll {
    padding: 17px 28px;
}

.new-arrival-hero-media {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.new-arrival-slide {
    flex-basis: 58%;
}

.new-arrival-slider-track {
    gap: 26px;
}

.new-arrival-slider-controls {
    gap: 22px;
    margin-top: 28px;
}

.new-arrival-slider-current {
    font-size: 21px;
}

.new-arrival-slider-arrow {
    width: 46px;
    height: 46px;
}

.new-arrival-feature-caption {
    flex-wrap: wrap;
    gap: 6px 14px;
    padding-top: 16px;
}

.new-arrival-feature-name {
    font-size: 15px;
}

/* sits under the scrolled desktop header of this range (58px logo + 16px padding) */
.shop-sticky {
    top: 74px;
    padding-top: 16px;
}

.shop-sticky.is-stuck {
    padding-top: 10px;
}

.shop-head {
    gap: 16px;
    margin-bottom: 14px;
}

.shop-title {
    font-size: 32px;
    letter-spacing: -.5px;
}

.shop-sticky.is-stuck .shop-title {
    font-size: 24px;
}

.shop-tools {
    gap: 18px;
}

.shop-tool {
    gap: 6px;
    font-size: 11px;
}

.shop-tool svg {
    width: 18px;
    height: 18px;
}

.shop-tool > span:not(.shop-tool-count) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shop-sort-current {
    display: none;
}

.shop-sort-menu {
    width: 230px;
}

.shop-sort-head {
    margin-bottom: 4px;
    padding: 8px 14px 8px;
}

.shop-sort-option {
    padding: 8px 10px;
    font-size: 12px;
}

.shop-tabs,
.shop-terms-inner,
.shop-terms-group {
    gap: 22px;
}

.shop-terms-group + .shop-terms-group {
    padding-left: 22px;
}

.shop-tab, .shop-term {
    font-size: 12px;
    padding: 10px 0 8px;
}

.shop-status {
    padding: 16px 0 18px;
}

.shop-end {
    margin: 20px auto 60px;
}

.shop-end-title {
    font-size: 22px;
}

.shop-end-top {
    display: none;
}

.shop-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 88vh;
    box-shadow: 0 -20px 40px -20px rgb(0 0 0 / 25%);
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), visibility .55s;
}

.shop-drawer.is-open {
    transform: translateY(0);
}

.shop-drawer-head {
    padding: 14px 20px;
}

.shop-drawer-title {
    font-size: 14px;
}

.shop-drawer-close {
    width: 40px;
    height: 40px;
}

.shop-drawer-close svg {
    width: 20px;
    height: 20px;
}

.shop-drawer-body {
    padding: 0 20px;
}

.shop-drawer-group summary {
    padding: 16px 0;
    font-size: 12px;
}

.shop-drawer-checks {
    gap: 14px;
    padding-bottom: 18px;
}

.shop-check {
    font-size: 13px;
}

.shop-check input {
    width: 18px;
    height: 18px;
}

/* chips: a touch-sized minimum, sizes (S, 28 …) centred */
.shop-drawer-terms {
    gap: 6px;
    padding-bottom: 18px;
}

.shop-drawer-terms .shop-term {
    justify-content: center;
    min-width: 46px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
}

.shop-price {
    gap: 10px;
    padding-bottom: 18px;
}

.shop-price-field span {
    font-size: 10px;
}

/* 16px stops iPhone Safari zooming in on focus */
.shop-price-field input {
    font-size: 16px;
}

.shop-drawer-foot {
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}

.shop-drawer-foot button {
    padding: 14px 16px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.shop-drawer-clear {
    flex-shrink: 0;
}

.qv {
    align-items: flex-end;
    padding: 0;
}

.qv-dialog {
    width: 100%;
    transform: translateY(100%);
    transition: opacity .3s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}

.qv.is-open .qv-dialog {
    transform: translateY(0);
}

.qv-body {
    max-height: 92vh;
}

.qv-content {
    flex-direction: column;
}

.qv-gallery {
    flex: none;
    max-width: none;
}

.qv-main {
    aspect-ratio: 1 / 1;
}

.qv-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

.qv-info {
    padding: 28px 22px 30px;
}

.qv-title {
    font-size: 22px;
}

.qv-desc {
    margin-bottom: 22px;
    padding-bottom: 22px;
}

.qv-thumb {
    flex-basis: 46px;
    height: 58px;
}

/* quick add: no tablet overrides, so it is the desktop dialog (centred, 460px, fades and scales in) */

/* new arrivals page ends */

/* sale page start */

/* the desktop banner a step down: the words on the left over the shade, the photo on the right, the
   promo card standing on the seam between them */
.sale-hero {
    margin-bottom: 64px;
}

.sale-banner {
    min-height: 440px;
    padding: 64px 0;
}

.sale-banner-text {
    max-width: 480px;
}

.sale-eyebrow {
    gap: 12px;
    font-size: 13px;
}

.sale-eyebrow-line {
    width: 30px;
}

.sale-headline {
    gap: 22px;
}

.sale-pct-num {
    font-size: 168px;
    letter-spacing: -8px;
}

.sale-pct-num sup {
    margin-left: 6px;
}

.sale-words {
    padding: 16px 0 8px;
}

.sale-upto,
.sale-off {
    font-size: 16px;
    letter-spacing: 3.5px;
}

.sale-words-line {
    margin: 12px 0;
}

.sale-headline-custom {
    max-width: 420px;
    font-size: 64px;
}

.sale-hero-aside {
    max-width: 360px;
}

.sale-intro {
    margin-bottom: 24px;
}

.sale-ends {
    gap: 14px;
    margin-bottom: 26px;
    padding: 14px 0;
}

.sale-countdown {
    gap: 14px;
}

.sale-countdown-part {
    font-size: 22px;
}

.sale-promo {
    bottom: 56px;
    left: 46%;
    width: 190px;
    padding: 54px 20px 20px;
}

.sale-promo-arrow {
    top: 16px;
    right: 18px;
    width: 40px;
    height: 40px;
}

.sale-promo-arrow svg {
    width: 18px;
    height: 18px;
}

.sale-promo-label {
    margin-bottom: 14px;
}

.sale-promo-text {
    font-size: 40px;
    letter-spacing: -1.8px;
}

.sale-promo-text span {
    font-size: 18px;
}

/* sale page ends */

/* policy pages start (privacy, terms, shipping & returns) */

.legal {
    padding: 135px 0 90px;
}

.legal-head {
    margin-bottom: 44px;
    padding-bottom: 30px;
}

.legal-eyebrow {
    margin-bottom: 14px;
}

.legal-title {
    margin-bottom: 14px;
    font-size: 54px;
    letter-spacing: -1.8px;
}

.legal-meta {
    font-size: 13px;
}

.legal-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 64px;
}

.legal-side {
    top: 100px;
    gap: 30px;
}

.legal-side-label {
    margin-bottom: 12px;
    font-size: 16px;
}

.legal-toc a {
    padding: 7px 0 7px 14px;
    font-size: 15px;
}

.legal-content h2 {
    margin: 36px 0 14px;
    font-size: 24px;
    scroll-margin-top: 110px;
}

.legal-content h3 {
    margin: 28px 0 12px;
    font-size: 19px;
}

.legal-contact {
    margin-top: 80px;
    padding-top: 44px;
}

.legal-contact-head {
    margin-bottom: 44px;
}

.legal-contact-title {
    font-size: 38px;
    letter-spacing: -1.3px;
}

.legal-contact-text {
    max-width: 460px;
}

.legal-contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 32px 36px;
}

.legal-contact-value {
    font-size: 16px;
}

/* policy pages ends */

/* faq page start */

/* the desktop layout a step down: the questions on the left, the help card and quick links in a sticky
   column beside them (the base rules), rather than the tablets' cards under the list */
.faq {
    padding: 135px 0 90px;
}

.faq-head {
    margin-bottom: 44px;
}

.faq-title {
    margin-bottom: 14px;
    font-size: 54px;
    letter-spacing: -1.8px;
}

.faq-lead {
    font-size: 16px;
}

.faq-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 48px;
}

.faq-q {
    gap: 16px;
    padding: 22px 0;
}

.faq-num {
    width: 40px;
    font-size: 18px;
}

.faq-q-text {
    font-size: 23px;
}

.faq-icon {
    width: 32px;
    height: 32px;
}

/* the answer lines up with its question (number 40px + gap 16px) */
.faq-a {
    padding: 0 48px 26px 56px;
    line-height: 1.6;
}

.faq-card {
    padding: 26px 24px;
}

.faq-card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
}

.faq-card-icon svg {
    width: 22px;
    height: 22px;
}

.faq-card-title {
    font-size: 19px;
}

.faq-quick {
    padding: 20px 22px;
}

/* faq page ends */

/* search page start */

/* the desktop search a step down: the field across the page, labels beside their chips, the live
   panel and the best sellers at desktop proportions (rather than the phones' stacked rows) */
.search-hero {
    margin-bottom: 52px;
}

.search-hero-form {
    gap: 16px;
    padding-bottom: 16px;
}

.search-hero-icon {
    width: 26px;
    height: 26px;
}

.search-hero-input {
    font-size: clamp(20px, 5.3vw, 24px);
    letter-spacing: -.6px;
}

.search-hero-clear {
    width: 34px;
    height: 34px;
}

.search-hero-clear svg {
    width: 20px;
    height: 20px;
}

.search-hero-submit {
    width: 50px;
    height: 50px;
}

.search-hero-submit svg {
    width: 20px;
    height: 20px;
}

.search-hero-note {
    margin-top: 18px;
}

.search-hero-none {
    margin-top: 38px;
}

.search-hero-none-title {
    font-size: 24px;
}

.search-hero-row {
    margin-top: 28px;
}

.search-hero-chip {
    padding: 9px 15px;
}

.search-hero-panel {
    max-height: 66vh;
    padding: 22px 24px;
}

.search-panel-group + .search-panel-group {
    margin-top: 20px;
}

.search-panel-product {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 14px;
}

/* best sellers when there is nothing to list */
.search-hero-trending {
    margin-top: 68px;
}

.search-hero-trending-head {
    margin-bottom: 24px;
}

.search-hero-trending-title {
    font-size: 30px;
}

/* search page ends */

/* 404 page start */

/* the desktop page a step down: the oversized digits (the copy here had the phone size), the title,
   the search line and the links centred, the best sellers below */
.error-404-wrap {
    padding: 135px 0 90px;
}

.error-404-digits {
    font-size: 250px;
    letter-spacing: -12px;
}

.error-404-title {
    max-width: 640px;
    margin-bottom: 14px;
    font-size: 40px;
    letter-spacing: -1.3px;
}

.error-404-text {
    margin-bottom: 34px;
}

.error-404-search {
    max-width: 520px;
    margin-bottom: 28px;
}

.error-404-search-input {
    font-size: 22px;
}

.error-404-actions {
    margin-bottom: 30px;
}

.error-404-trending {
    margin-top: 96px;
    padding-top: 36px;
}

.error-404-trending-head {
    margin-bottom: 24px;
}

.error-404-trending-title {
    font-size: 30px;
}

/* 404 page ends */

/* contact page start */

.contact-us-wrap {
    padding: 120px 0 50px;
}

.contact-us-hero {
    margin-bottom: 100px;
}

.contact-us-word {
    font-size: clamp(170px, 24vw, 240px);
    letter-spacing: -4px;
}

.contact-us-head {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.contact-us-title {
    font-size: 46px;
    letter-spacing: -1px;
    line-height: 1.12;
}

.contact-us-lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.contact-us-badge {
    width: 84px;
    height: 84px;
}

.contact-us-badge-dot {
    width: 40px;
    height: 40px;
}

.contact-us-badge-dot svg {
    width: 17px;
    height: 17px;
}

.contact-us-row {
    row-gap: 14px;
}

/* form panel */
.contact-us-form > .wpcf7 {
    padding: 24px 16px;
    border-radius: 20px;
}

.contact-us-fields {
    row-gap: 18px;
}

.contact-us-field label {
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 1px;
}

/* 16px stops iPhone Safari zooming in on focus */
.contact-us-field input,
.contact-us-field textarea {
    height: 48px;
    padding: 8px 14px;
    font-size: 16px;
}

.contact-us-field textarea {
    height: 140px;
    padding: 12px 14px;
}

.contact-us-submit {
    margin-top: 24px;
}

.contact-us-send {
    height: 48px;
    padding: 0 24px;
}

.contact-us-send-arrow {
    width: 48px;
    height: 48px;
    background-size: 18px;
}

/* the note drops under the button instead of squeezing beside it */
.contact-us-note {
    flex: 0 0 100%;
    margin: 8px 0 0;
    font-size: 12px;
}

.contact-us-cf7 .wpcf7-response-output {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    font-size: 13px;
}

/* details beside the form (col-md-5), split from it by a faint line as on desktop, a little closer in */
.contact-us-card {
    padding: 4px 0 0 24px;
    border-top: 0;
    border-left: 1px solid rgb(17 17 17 / 12%);
}

.contact-us-block + .contact-us-block {
    margin-top: 22px;
    padding-top: 22px;
}

.contact-us-block-title {
    gap: 10px;
    margin-bottom: 12px;
    font-size: 17px;
}

.contact-us-block-icon svg {
    width: 20px;
    height: 20px;
}

.contact-us-lines li {
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.contact-us-lines li span {
    min-width: 74px;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.contact-us-card .contact-us-socials a {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

/* contact page ends */

/* about page ends */

/* product page start */

/* the desktop page a step down: thumbnails in a column beside the photo, the details beside the
   gallery and sticky as the photos scroll, the perks in a row, the full-screen viewer with its arrows at
   the sides (the tablets' strip of thumbnails and stacked perks are left out) */
.pd {
    padding: 135px 0 90px;
}

.pd-crumbs {
    margin-bottom: 24px;
}

.pd-layout {
    gap: 52px;
}

.pd-gallery {
    gap: 14px;
}

.pd-thumbs-wrap {
    flex-basis: 84px;
    width: 84px;
}

.pd-thumbs {
    gap: 10px;
    max-height: 500px;
}

.pd-zoom {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
}

/* clears the scrolled desktop header of this range */
.pd-info {
    top: 100px;
}

.pd-title {
    font-size: 38px;
    letter-spacing: -1.3px;
}

.pd-rating {
    margin-bottom: 18px;
}

.pd-price {
    font-size: 27px;
}

.pd-chip {
    min-width: 52px;
    height: 44px;
}

.pd .single_add_to_cart_button {
    height: 56px;
}

.pd-wish {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
}

.pd-about {
    gap: 44px;
    margin-top: 70px;
}

.pd-tabs-nav {
    gap: 30px;
    margin-bottom: 24px;
}

.pd-section {
    margin-top: 76px;
    padding-top: 44px;
}

.pd-section-head {
    margin-bottom: 28px;
}

.pd-section-title {
    font-size: 29px;
}

.pd-reviews-grid {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 48px;
}

.pd-review-summary {
    top: 100px;
    padding: 26px;
}

.pd-review-avg {
    font-size: 56px;
    letter-spacing: -2.5px;
}

.pd-review-form-wrap {
    margin-top: 32px;
    padding: 28px;
}

/* product page ends */

/* cart page start */

.cart-page {
    padding: 110px 0 64px;
}

.cart-head {
    gap: 12px;
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.cart-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.cart-title {
    margin-bottom: 6px;
    font-size: 44px;
    letter-spacing: -1.4px;
}

.cart-sub {
    font-size: 12px;
}

.cart-head .acc-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.cart-notices .woocommerce-error,
.cart-notices .woocommerce-message,
.cart-notices .woocommerce-info {
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 13px;
}

.cart-ship {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 12px;
}

.cart-ship p {
    margin-bottom: 10px;
    font-size: 13px;
}

/* the desktop arrangement, sized for a tablet: the items on the left, the order summary a 300px column
   on the right that stays in view while the list scrolls */
.cart-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
}

.cart-items {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-item {
    gap: 18px;
    padding: 20px 0;
}

.cart-item-img {
    width: 100px;
    max-width: none;
    height: 125px;
    border-radius: 10px;
}

.cart-item-top {
    gap: 10px;
}

.cart-item-name {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.35;
}

.cart-item-meta dl {
    margin-bottom: 4px;
    font-size: 12px;
}

.cart-item-unit {
    font-size: 12px;
}

.cart-item-total {
    font-size: 15px;
}

.cart-item-bottom {
    gap: 10px 12px;
    margin-top: 16px;
}

.cart-qty-btn {
    width: 36px;
    height: 36px;
}

.cart-qty-input {
    width: 30px;
}

.cart-item-actions {
    gap: 14px;
}

.cart-item-link {
    font-size: 12px;
}

.cart-summary {
    position: sticky;
    top: 100px;
    flex: 0 0 300px;
    padding: 24px 22px;
    border-radius: 16px;
}

.cart-summary-title {
    margin-bottom: 10px;
    font-size: 17px;
}

.cart-line {
    padding: 6px 0;
    font-size: 14px;
}

.cart-line-total {
    margin-top: 6px;
    padding-top: 12px;
    font-size: 17px;
}

/* no bottom bar from 1201px: the toast sits low again */
.cart-toast {
    bottom: 30px;
}

.cart-coupon {
    margin: 16px 0 18px;
}

/* 16px stops iPad Safari zooming in on focus */
.cart-coupon-form input {
    height: 42px;
    font-size: 16px;
}

.cart-checkout {
    width: 100%;
    height: 50px;
}

.cart-trust {
    gap: 16px;
    margin-top: 16px;
}

.cart-suggest {
    margin-top: 48px;
    padding-top: 32px;
}

.cart-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

.cart-suggest-head {
    margin-bottom: 20px;
}

.cart-suggest-link {
    flex-shrink: 0;
    font-size: 12px;
}

/* the desktop arrangement, sized for a tablet: the words on the left, the photo mosaic beside them */
.cart-void {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 10px 0 20px;
}

.cart-void-text {
    flex: 0 0 50%;
    max-width: 50%;
}

.cart-void-title {
    margin-bottom: 18px;
    font-size: 48px;
    letter-spacing: -2px;
    line-height: 1;
}

.cart-void-lead {
    max-width: 400px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.65;
}

.cart-void-actions {
    margin-bottom: 30px;
}

.cart-void-actions .acc-btn {
    flex: 0 0 auto;
    padding: 0 22px;
}

/* the benefits as a short list, icon beside the words: three columns would leave about 100px each */
.cart-void-perks {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 20px;
}

.cart-void-perks li {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    line-height: 1.45;
}

.cart-void-perks svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.cart-void-perks strong {
    font-size: 13px;
}

/* editorial: one large portrait photo with sharp corners, a smaller one overlapping its lower-left edge
   in a white frame, and the lead piece's name and price on a small frosted label. The third photo is
   left out: three products on different backgrounds read as a busy grid */
.cart-void-media {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 480px;
    min-width: 0;
}

.cart-void-tile {
    border-radius: 4px;
}

.cart-void-tile-1 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 56px;
    width: auto;
    height: auto;
}

.cart-void-tile-2 {
    top: auto;
    right: auto;
    bottom: 40px;
    left: 0;
    z-index: 1;
    width: 42%;
    height: auto;
    aspect-ratio: 4 / 5;
    border: 6px solid #fff;
    box-shadow: 0 28px 50px -26px rgb(0 0 0 / 40%);
}

.cart-void-tile-3 {
    display: none;
}

/* only one photo: it takes the whole column */
.cart-void-tile-1:only-child {
    left: 0;
}

/* names appear on hover, which a touch screen doesn't have: only the lead photo keeps a label, always
   shown, at its top right so the overlapping photo doesn't cover it */
.cart-void-caption {
    display: none;
}

.cart-void-tile-1 .cart-void-caption {
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
    display: flex;
    max-width: calc(100% - 28px);
    padding: 10px 12px;
    border-radius: 4px;
    opacity: 1;
    transform: none;
}

/* collections: a swipeable strip, about 3.5 across with the next one peeking in */
.cart-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 42px) / 3.5);
    grid-auto-flow: column;
    gap: 14px;
    margin: -4px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cart-tiles::-webkit-scrollbar {
    display: none;
}

.cart-tile {
    scroll-snap-align: start;
}

.cart-tile {
    border-radius: 12px;
}

.cart-tile-info {
    right: 12px;
    bottom: 12px;
    left: 12px;
}

.cart-tile-info strong {
    font-size: 17px;
}

/* cart page ends */

/* checkout page start */

/* the desktop checkout a step down: the step cards on the left with the fields two and three to a row
   (the base rules), the order summary a sticky 360px column beside them; order received the same way */
.co {
    padding: 135px 0 90px;
}

.co-head {
    margin-bottom: 32px;
    padding-bottom: 26px;
}

.co-title {
    font-size: 44px;
    letter-spacing: -1.8px;
}

.co-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
}

/* clears the scrolled desktop header of this range */
.co-side {
    top: 100px;
    padding: 26px;
}

.co-step {
    padding: 26px 26px 28px;
}

.co-step-head {
    margin-bottom: 22px;
}

/* order received */
.co-thanks-hero {
    margin-bottom: 52px;
}

.co-thanks-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 22px;
}

.co-thanks-title {
    font-size: 50px;
    letter-spacing: -2.2px;
}

.co-thanks-grid {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 44px;
}

/* checkout page ends */

/* wishlist page start */

.wish {
    padding: 96px 0 50px;
}

.wish-head {
    margin-bottom: 22px;
    padding-bottom: 20px;
}

.wish-eyebrow {
    margin-bottom: 10px;
    white-space: nowrap;
}

.wish-title {
    margin-bottom: 6px;
    font-size: 44px;
    letter-spacing: -1.2px;
}

.wish-sub {
    font-size: 14px;
}

.wish-head .acc-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 1px;
}

.wish-note {
    margin: -6px 0 22px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.wish-empty {
    margin-top: 10px;
    padding: 40px 8px;
}

.wish-empty-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
}

.wish-empty-icon svg {
    width: 26px;
    height: 26px;
}

.wish-empty-title {
    font-size: 21px;
}

.wish-empty-text {
    margin-bottom: 22px;
    font-size: 13px;
}

.wish-empty .acc-btn {
    height: 44px;
    padding: 0 22px;
    letter-spacing: 1.5px;
}

.wish-suggest {
    margin-top: 40px;
    padding-top: 32px;
}

.wish-suggest-title {
    margin-bottom: 20px;
    font-size: 22px;
}

/* wishlist page ends */

/* my account page start */

/* sign in / register: the desktop card a step down (form side beside the photo, both notches, the
   perks in two columns) */
.auth {
    padding: 135px 0 80px;
}

.auth-card {
    min-height: 680px;
    border-radius: 30px;
}

.auth-side {
    flex: 0 0 48%;
    padding: 24px 32px 20px;
}

.auth-switcher {
    margin-bottom: 30px;
}

.auth-body {
    padding: 32px 0;
}

.auth-title {
    font-size: 30px;
    letter-spacing: -.9px;
}

.auth-lead {
    margin-bottom: 26px;
}

.auth-field input {
    height: 46px;
}

.auth-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
}

.auth-notch-top {
    width: 130px;
    height: 58px;
}

.auth-notch-bottom {
    width: 96px;
    height: 66px;
}

.auth-tag {
    top: 22px;
    right: 22px;
}

.auth-visual-content {
    right: 120px;
    bottom: 36px;
    left: 36px;
}

.auth-quote {
    margin-bottom: 20px;
    font-size: 34px;
}

.auth-perks {
    gap: 24px;
    max-width: 440px;
    padding-top: 18px;
}

/* the account itself: the desktop layout a step down, the menu a sticky column beside the content
   (not the tablets' strip of pills), addresses and form fields two to a row */
.acc {
    padding: 135px 0 90px;
}

.acc-head {
    margin-bottom: 36px;
    padding-bottom: 28px;
}

.acc-title {
    font-size: 42px;
    letter-spacing: -1.6px;
}

.acc-layout {
    gap: 48px;
}

/* clears the scrolled desktop header of this range */
.acc-nav {
    top: 100px;
    flex-basis: 220px;
}

.acc-nav-link {
    gap: 11px;
    padding: 11px 13px;
}

.acc-h2 {
    font-size: 23px;
}

.acc-stats {
    gap: 14px;
}

.acc-stat {
    padding: 22px;
}

.acc-stat-value {
    margin: 16px 0 12px;
    font-size: 40px;
}

.acc-stat-text {
    font-size: 27px;
}

.acc-row {
    gap: 18px;
    padding: 16px 6px;
}

.acc-row-total {
    min-width: 100px;
}

.acc-links {
    gap: 14px;
}

.acc-order-head {
    padding: 15px 20px;
}

.acc-order-body {
    gap: 20px;
    padding: 18px 20px;
}

.acc-address-grid {
    gap: 14px;
}

.acc-card {
    padding: 22px;
}

.acc-fieldset {
    padding: 22px;
}

/* my account page ends */

}

@media only screen and (min-width: 1200px) and (max-width: 1200.98px) {

.mobile-bar {
    position: fixed;
    right: auto;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 100;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.mobile-bar-main,
.mobile-bar-side {
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.mobile-bar-main {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 6px;
}

.mobile-bar-item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: #111111;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.mobile-bar-item:hover {
    background: rgb(17 17 17 / 5%);
    color: #111111;
    text-decoration: none;
}

.mobile-bar-item svg {
    display: block;
    width: 20px;
    height: 20px;
}

.mobile-bar-item.is-active,
html.mega-menu-primary-off-canvas-open .mobile-bar-menu {
    background: rgb(180 131 95 / 20%);
    color: #111111;
}

/* while the menu is open, Menu is the only highlighted shortcut */
html.mega-menu-primary-off-canvas-open .mobile-bar-main .mobile-bar-item.is-active {
    background: none;
}

/* the wishlist tile is an item and a panel at once: restate the panel look the item rule clears */
.mobile-bar .mobile-bar-side {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid rgb(17 17 17 / 6%);
    border-radius: 16px;
    background: rgb(255 255 255 / 82%);
}

.mobile-bar .mobile-bar-side.is-active {
    background: rgb(244 232 222 / 92%);
}

.mobile-bar-icon {
    position: relative;
}

.mobile-bar-icon .cart-count {
    top: -6px;
    right: -10px;
}

/* back to top: a bronze square level with the bar, just past its right end, so the bar stays centred */
.mobile-bar-top {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #B4835F;
    color: #ffffff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    pointer-events: auto;
}

.mobile-bar-top svg {
    width: 20px;
    height: 20px;
}

.mobile-bar.is-scrolled .mobile-bar-top {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.footer-wrapper {
    padding-bottom: 92px;
}

/* header section start */

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    padding: 0 60px !important;
}

.header-nav {
    order: 1;
    justify-self: start;
}

.header-logo {
    order: 2;
}

.header-user-actions {
    order: 3;
    justify-self: end;
    gap: 18px;
}

.header-user-actions .header-icon:nth-child(n+3) {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle {
    justify-content: flex-start;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-left,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-center,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right {
    flex: 0 0 auto;
    gap: 0;
    padding: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
    transform: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box {
    width: 22px;
    height: 16px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    width: 22px;
    height: 1.5px;
    border-radius: 0;
    background-color: #111;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    top: 0;
    margin-top: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
    top: 7px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    top: 14px;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner {
    transform: translate3d(0, 7px, 0) rotate(45deg);
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
    transform: translate3d(0, -14px, 0) rotate(-90deg);
}

.header-logo img {
    height: 55px;
    max-width: 115px;
}

.f-nav .header-logo img {
    height: 55px;
}

html.mega-menu-primary-off-canvas-open .header-wrapper {
    background: #ffffff;
}

html.mega-menu-primary-off-canvas-open .header-user-actions .search-toggle {
    visibility: hidden;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    top: 65px;
    right: auto;
    left: -100%;
    width: 100%;
    height: calc(100dvh - 65px);
    max-height: calc(100dvh - 65px);
    justify-content: flex-start;
    gap: 0;
    padding: 28px 0 110px;
    background: #ffffff;
    transition: left .6s cubic-bezier(.76, 0, .24, 1), visibility .6s ease;
}

/* the panel scrolls on its own (its height is fixed to the screen), without showing a scrollbar;
   contain keeps the page behind from scrolling once the panel reaches its end */
.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary::-webkit-scrollbar {
    display: none;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
    right: auto;
    left: 0;
}

.header-nav #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open::after,
.header-nav #mega-menu-wrap-primary .mega-menu-toggle ~ button.mega-close {
    display: none;
}

/* panel contents on the 40px page gutter, sized up for a tablet */
.header-nav #mega-menu-wrap-primary #mega-menu-primary .header-menu-extra {
    display: block;
    padding: 0 60px 28px;
    text-align: left;
}

.header-menu-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgb(17 17 17 / 14%);
    border-radius: 12px;
    background: #faf8f6;
    transition: border-color .3s ease, background-color .3s ease;
}

.header-menu-search:focus-within {
    border-color: #111111;
    background: #ffffff;
}

.header-menu-search i {
    color: rgb(17 17 17 / 55%);
    font-size: 20px;
}

.header-menu-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #111111;
    font-size: 16px;
}

.header-menu-search input::placeholder {
    color: rgb(17 17 17 / 60%);
}

.header-menu-cats {
    display: flex;
    gap: 12px;
    margin: 20px -60px 0;
    padding: 0 60px;
    overflow-x: auto;
    scrollbar-width: none;
}

.header-menu-cats::-webkit-scrollbar {
    display: none;
}

.header-menu-cat {
    position: relative;
    flex: 0 0 auto;
    display: block;
    /* about 4.4 across (four full, the next peeking in); 48px = the four 12px gaps */
    width: calc((100% - 48px) / 4.4);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 12px;
    background: #ece7e1;
}

.header-menu-cat img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}

.header-menu-cat:hover img {
    transform: scale(1.05);
}

.header-menu-cat span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 34px 14px 12px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 60%) 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.2;
    text-transform: uppercase;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    height: auto;
    margin: 0 60px;
    padding: 16px 0;
    border-bottom: 1px solid #efebe6;
    background: none;
    color: #111111;
    font-size: 18px;
    font-weight: 400 !important;
    letter-spacing: .2px;
    line-height: 1.5;
    transition: color .3s ease;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: none;
    color: #B4835F;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: none;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    padding: 10px 60px 10px 78px;
    background-color: #ffffff;
    color: rgb(17 17 17 / 60%);
    font-size: 12px;
    letter-spacing: 1.5px;
    line-height: 1.5;
    text-transform: uppercase;
    transition: color .3s ease;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus-visible {
    color: #B4835F;
}

/* an open parent's sub-links sit inside its row, so the hairline goes under them instead */
.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    border-bottom-color: transparent;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on > ul.mega-sub-menu {
    margin: 0 60px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efebe6;
}

.header-nav #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout.mega-toggle-on > ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    padding-right: 0;
    padding-left: 18px;
}

.header-icon {
    font-size: 22px;
}

/* header section ends */

.cart-toast {
    bottom: calc(90px + env(safe-area-inset-bottom));
}

.shop-sticky {
    top: 61px;
    padding-top: 14px;
}

}