/* Store details controls the shared palette and typography on every page. */
:root {
    --zf-primary: #1c1c1c;
    --zf-secondary: #1c1c1c;
    --zf-background: #ffffff;
    --zf-text: #1c1c1c;
    --zf-on-primary: #ffffff;
    --zf-on-secondary: #ffffff;
    --zf-header: #ffffff;
    --zf-on-header: #1c1c1c;
    --zf-ribbon: #1c1c1c;
    --zf-on-ribbon: #ffffff;
    --zf-footer: #1c1c1c;
    --zf-on-footer: #f8fafc;
    --lo-sale: var(--zf-primary);
    --zf-font: system-ui, sans-serif;
    --lo-ink: var(--zf-text, #1c1c1c);
    --lo-line: color-mix(in srgb, var(--zf-text) 18%, var(--zf-background));
    --zf-muted: color-mix(in srgb, var(--zf-text) 65%, var(--zf-background));
    --zf-surface: color-mix(in srgb, var(--zf-text) 5%, var(--zf-background));
    --zf-forest: var(--zf-text, #1c1c1c);
    --zf-forest-dark: var(--zf-text, #1c1c1c);
    --zf-cream: var(--zf-background, #ffffff);
    --zf-sand: var(--zf-surface);
    --zf-border: var(--lo-line);
}

body.zf-storefront {
    color: var(--zf-text);
    background: var(--zf-background);
    font-family: var(--zf-font);
    font-weight: var(--zf-weight-body, 400);
}
.zf-storefront .font-sans,
.zf-storefront button,
.zf-storefront input,
.zf-storefront select,
.zf-storefront textarea { font-family: var(--zf-font); }
.zf-storefront h1, .zf-storefront h2, .zf-storefront h3,
.zf-storefront h4, .zf-storefront h5, .zf-storefront h6,
.zf-storefront .lo-heading { font-family: var(--zf-font); font-weight: var(--zf-weight-strong, 600); }
.zf-storefront .zf-section-title,
.zf-storefront .zf-wordmark { font-family: var(--zf-heading-font, Georgia, "Times New Roman", serif); }
.zf-storefront .text-ink { color: var(--zf-text); }
.zf-storefront .text-subdued { color: var(--zf-muted); }
.zf-storefront .bg-white { background-color: var(--zf-background); }
.zf-storefront .border-line { border-color: var(--lo-line); }
.zf-storefront .bg-ink { background-color: var(--zf-primary); color: var(--zf-on-primary); }
.zf-storefront .lo-field {
    color: var(--zf-text);
    background: var(--zf-background);
    border-color: var(--lo-line);
}
.zf-storefront .lo-btn {
    border-color: var(--zf-primary);
    background: var(--zf-primary);
    color: var(--zf-on-primary);
}
.zf-storefront .lo-btn:hover:not(:disabled) { filter: brightness(0.9); }
.zf-storefront .lo-btn--outline { background: transparent; color: var(--zf-text); }
.zf-storefront .lo-btn--outline:hover:not(:disabled) { background: var(--zf-primary); color: var(--zf-on-primary); }
.zf-storefront .lo-skip { background: var(--zf-primary); color: var(--zf-on-primary); }
.zf-storefront .lo-media,
.zf-storefront .lo-placeholder { background: var(--zf-surface); color: var(--zf-muted); }
.zf-storefront .lo-header,
.zf-storefront .lo-header:hover,
.zf-storefront .lo-header:focus-within,
.zf-storefront .lo-header[data-scrolled="true"],
.zf-storefront .lo-header[data-solid="true"] {
    color: var(--zf-on-header);
    background: var(--zf-header);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.zf-storefront .zf-nav-link,
.zf-storefront .zf-icon-button,
.zf-storefront .zf-mobile-toggle,
.zf-storefront .zf-wordmark { color: inherit; }
.zf-storefront .zf-desktop-nav {
    flex-wrap: wrap;
    padding-block: 1rem;
    border-color: color-mix(in srgb, var(--zf-on-header) 18%, var(--zf-header));
}
.zf-storefront .zf-nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.4rem; }
.zf-storefront .zf-menu-parent,
.zf-storefront .zf-mobile-menu-parent { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.zf-storefront .zf-menu-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: inherit; }
.zf-storefront .zf-menu-toggle svg { width: 0.65rem; height: 0.5rem; }
.zf-storefront .zf-more-panel { background: var(--zf-background); color: var(--zf-text); border: 1px solid var(--lo-line); }
.zf-storefront .zf-more-panel a { color: inherit; }
.zf-storefront .zf-mobile-submenu,
.zf-storefront .zf-submenu-leaves { padding-inline-start: 1rem; }
.zf-storefront .zf-mobile-drawer-head,
.zf-storefront .zf-mobile-nav-list { color: var(--zf-text); }
.zf-storefront .zf-logo { display: block; width: auto; max-width: min(200px, 40vw); height: auto; max-height: 64px; object-fit: contain; }
.zf-storefront .zf-wordmark-main { max-width: 50vw; overflow-wrap: anywhere; font-size: clamp(1.1rem, 2.5vw, 2rem); }
.zf-storefront .zf-announcement { color: var(--zf-on-ribbon); background: var(--zf-ribbon); }
.zf-storefront .zf-cart-count { background: var(--zf-primary); color: var(--zf-on-primary); }
.zf-storefront .zf-hero-image { width: 100%; height: auto; display: block; object-fit: contain; }
.zf-storefront .zf-hero-empty { min-height: 18rem; padding-block: 4rem; background: var(--zf-surface); color: var(--zf-text); }
.zf-storefront .zf-hero-empty .lo-btn { margin-top: 1.5rem; }
.zf-storefront .zf-section-title { color: var(--zf-text); }
.zf-storefront .zf-text-link { color: var(--zf-text); }
.zf-storefront .zf-arrivals-section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.zf-storefront .zf-arrivals-section .zf-section-title { font-size: clamp(1.75rem, 3.5vw, 3rem); }
.zf-storefront .zf-product-count { margin: -0.5rem 0 1.5rem; color: var(--zf-muted); font-size: 0.8rem; }
.zf-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0.8rem; }
.zf-products-grid > li { min-width: 0; }
.zf-products-grid h3 { overflow-wrap: anywhere; }
.zf-grid-pagination { display: flex; justify-content: center; margin-top: 2.5rem; }
.zf-grid-pagination [hidden] { display: none; }
.zf-grid-pagination [aria-disabled="true"] { cursor: wait; opacity: 0.65; }
.zf-grid-status { min-height: 1.5em; margin-top: 0.8rem; text-align: center; color: var(--zf-muted); }
.zf-empty-collection { padding-block: 2rem; text-align: center; }
.zf-empty-collection .lo-btn { margin-top: 1.5rem; }
.zf-storefront .zf-journal-section { background: var(--zf-background); }
.zf-promo-caption { padding-block: 1.5rem; text-align: center; }
.zf-promo-caption > * + * { margin-top: 0.75rem; }
.zf-storefront footer { background: var(--zf-secondary); color: var(--zf-on-secondary); }
.zf-storefront footer a,
.zf-storefront footer a:hover,
.zf-storefront footer .lo-heading,
.zf-storefront footer .text-subdued { color: var(--zf-on-secondary); }
.zf-storefront footer .text-subdued { opacity: 0.75; }
.zf-storefront footer .border-line { border-color: color-mix(in srgb, var(--zf-on-secondary) 25%, var(--zf-secondary)); }
.zf-storefront footer .lo-field { background: var(--zf-footer); color: var(--zf-on-footer); border-color: color-mix(in srgb, var(--zf-on-footer) 55%, var(--zf-footer)); }
.zf-storefront footer form .lo-btn { background: color-mix(in srgb, var(--zf-on-footer) 12%, var(--zf-footer)); color: var(--zf-on-footer); border-color: color-mix(in srgb, var(--zf-on-footer) 30%, var(--zf-footer)); }
.zf-storefront .lo-reviews #product-reviews select,
.zf-storefront .lo-reviews #product-reviews input:not([type="hidden"]):not([type="radio"]),
.zf-storefront .lo-reviews #product-reviews textarea { color: var(--zf-text); background: var(--zf-background); }
.zf-storefront .lo-reviews #product-reviews button[type="submit"] { color: var(--zf-on-primary); background: var(--zf-primary); border-color: var(--zf-primary); }
.zf-storefront .lo-reviews #product-reviews > article > aside { background: var(--zf-surface) !important; }

/* Storefront composition follows the shared mobile first reference. */
.zf-storefront .zf-header-top { min-height: 5rem; }
.zf-storefront .zf-desktop-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 2.75rem;
    gap: clamp(0.4rem, 1.2vw, 1.2rem);
    padding-block: 0.7rem;
}
.zf-storefront .zf-nav-link { font-size: clamp(0.43rem, 1.2vw, 0.7rem); letter-spacing: 0.06em; white-space: nowrap; }
.zf-storefront .zf-hero { position: relative; aspect-ratio: 2.45 / 1; background: var(--zf-surface); }
.zf-storefront .zf-hero-track,
.zf-storefront .zf-hero-slide,
.zf-storefront .zf-hero-link,
.zf-storefront .zf-hero-image { width: 100%; height: 100%; }
.zf-storefront .zf-hero-image { display: block; object-fit: cover; }
.zf-storefront .lo-hero-nav { z-index: 2; top: 50%; width: clamp(1.9rem, 3vw, 2.6rem); height: clamp(1.9rem, 3vw, 2.6rem); transform: translateY(-50%); border-radius: 0; }
.zf-storefront .lo-hero-prev { left: clamp(0.5rem, 1.4vw, 1.25rem); right: auto; }
.zf-storefront .lo-hero-next { right: clamp(0.5rem, 1.4vw, 1.25rem); left: auto; }
.zf-storefront .lo-hero-nav svg { width: 0.48rem; height: 0.75rem; }
.zf-hero-dots { position: absolute; inset-inline: 0; bottom: 0.85rem; display: flex; justify-content: center; gap: 0.5rem; }
.zf-storefront .zf-retailer { display: grid; min-height: 20rem; place-items: center; padding: clamp(2.5rem, 6vw, 5rem) 1rem; background: var(--zf-background); }
.zf-retailer-card { width: min(100%, 37rem); text-align: center; }
.zf-retailer-eyebrow { margin-bottom: 0.65rem; color: var(--zf-muted); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; }
.zf-retailer-card h2 { color: var(--zf-text); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 600; }
.zf-retailer-description { margin-top: 0.6rem; color: var(--zf-text); font-size: 1rem; }
.zf-retailer-details { margin: 0.65rem auto 1rem; color: var(--zf-muted); font-size: 0.77rem; }
.zf-retailer-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-block: 1.3rem; }
.zf-retailer-features li { display: grid; min-height: 4rem; align-content: center; gap: 0.25rem; padding: 0.6rem; border: 1px solid var(--lo-line); border-radius: 0.4rem; color: var(--zf-text); font-size: 0.67rem; }
.zf-retailer-features span { color: var(--zf-muted); font-size: 0.58rem; }
.zf-retailer-button { font-size: 0.66rem; }
.zf-storefront .zf-collections-section,
.zf-storefront .zf-catalogs-section { padding-block: clamp(2.25rem, 5vw, 4rem); background: var(--zf-background); }
.zf-collections-kicker { margin-bottom: 0.6rem; color: var(--zf-muted); font-size: 0.63rem; letter-spacing: 0.13em; text-align: center; text-transform: uppercase; }
.zf-storefront .zf-collections-title { margin-bottom: 1.5rem; font-family: var(--zf-font); font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 500; letter-spacing: 0; text-align: center; text-transform: none; }
.zf-collection-grid { gap: 0.8rem; }
.zf-collection-grid > li { min-width: 0; flex: 0 0 calc((100% - 1.6rem) / 3); }
.zf-collection-media { aspect-ratio: 4 / 5; }
.zf-collection-name { padding-top: 0.55rem; font-size: 0.69rem; letter-spacing: 0.025em; text-transform: none; }
.zf-collection-count { display: block; margin-top: 0.2rem; color: var(--zf-muted); font-size: 0.62rem; text-align: center; }
.zf-storefront .zf-arrivals-section { padding-block: clamp(2rem, 4vw, 3rem); }
.zf-storefront .zf-arrivals-section .zf-section-title { font-family: var(--zf-font); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.035em; text-transform: uppercase; }
.zf-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem 0.4rem; }
.zf-arrival-media { aspect-ratio: 3 / 4; }
.zf-arrival-details { padding: 0.38rem 0.05rem; }
.zf-storefront .zf-arrival-name { color: var(--zf-text); font-size: clamp(0.52rem, 1.1vw, 0.75rem); line-height: 1.3; }
.zf-arrival-price { gap: 0.2rem; margin-top: 0.25rem; font-size: 0.59rem; }
.zf-storefront .zf-product-count { margin-block: 0 0.7rem; font-size: 0.63rem; }
.zf-grid-pagination { margin-top: 1.35rem; }
.zf-grid-pagination .lo-btn { min-height: 2.35rem; padding: 0.5rem 1.5rem; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: none; }
.zf-storefront .zf-journal-section { padding-block: clamp(2rem, 4vw, 3rem); }
.zf-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.zf-storefront .zf-wordmark-main { font-family: var(--zf-font); letter-spacing: 0.2em; }
.zf-storefront footer { margin-top: 0 !important; background: var(--zf-footer); color: var(--zf-on-footer); }
.zf-storefront footer a,
.zf-storefront footer .lo-heading,
.zf-storefront footer .text-subdued { color: var(--zf-on-footer); }
.zf-storefront footer .border-line { border-color: color-mix(in srgb, var(--zf-on-footer) 18%, var(--zf-footer)); }
.zf-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.zf-catalog-card { display: grid; min-height: 8rem; align-content: start; gap: 0.4rem; padding: 1rem; border: 1px solid var(--lo-line); border-radius: 0.4rem; color: var(--zf-text); background: var(--zf-surface); }
.zf-catalog-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.zf-catalog-name { font-size: 0.8rem; font-weight: 600; }
.zf-catalog-description { color: var(--zf-muted); font-size: 0.67rem; }
.zf-catalog-action { justify-self: start; border-bottom: 1px solid currentColor; font-size: 0.6rem; }
@media (min-width: 480px) {
    .zf-storefront .zf-desktop-nav { display: flex; }
    .zf-storefront .zf-mobile-toggle { display: none; }
}
@media (max-width: 479px) {
    .zf-storefront .zf-header-top { min-height: 3.8rem; }
    .zf-storefront .zf-desktop-nav { display: none; }
    .zf-storefront .zf-mobile-toggle { display: inline-flex; }
}

@media (min-width: 768px) {
    .zf-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 0.65rem; }
}
@media (max-width: 767px) {
    .zf-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
    .zf-products-grid h3 { font-size: 0.73rem; letter-spacing: 0.02em; line-height: 1.35; overflow-wrap: break-word; }
    .zf-section-heading-row { align-items: center; flex-direction: row; gap: 0.75rem; }
    .zf-section-heading-row .zf-text-link { margin-top: 0; white-space: nowrap; }
    .zf-collection-grid > li { flex-basis: calc((100% - 0.8rem) / 2); }
    .zf-collection-arrow { display: none; }
    .zf-catalog-grid { grid-template-columns: 1fr; }
    .zf-retailer-features li { font-size: 0.59rem; }
    .zf-retailer-features span { font-size: 0.5rem; }
    .zf-storefront #nav-drawer nav { padding-inline: 1.5rem; }
    .zf-storefront #nav-drawer .zf-mobile-nav-list { width: 100%; }
    .zf-storefront #nav-drawer .zf-mobile-nav-list a { min-width: 0; padding-inline: 0.5rem; font-size: 0.82rem; letter-spacing: 0.1em; white-space: normal; }
    .zf-storefront #nav-drawer .zf-mobile-menu-parent > .zf-nav-link { flex: 1; }
    .zf-storefront .zf-header-top .zf-search-button { display: none; }
    .zf-mobile-drawer-body { min-height: 0; }
    .zf-mobile-search { position: relative; display: flex; align-items: center; margin: 1rem 1.5rem 0.5rem; border: 1px solid var(--lo-line); background: var(--zf-background); }
    .zf-mobile-search input { width: 100%; min-width: 0; min-height: 2.9rem; padding: 0.65rem 3rem 0.65rem 0.85rem; border: 0; outline: 0; background: transparent; color: var(--zf-text); font-size: 0.9rem; }
    .zf-mobile-search input::placeholder { color: var(--zf-muted); }
    .zf-mobile-search button { position: absolute; inset-inline-end: 0; display: grid; width: 2.9rem; height: 2.9rem; place-items: center; color: var(--zf-text); }
    .zf-mobile-search button svg { width: 1.15rem; height: 1.15rem; }
    .zf-mobile-account-links { display: grid; flex: 0 0 auto; gap: 0.45rem; padding: 0.85rem 1.5rem max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--lo-line); background: var(--zf-background); }
    .zf-mobile-account-link { display: flex; min-height: 2.9rem; align-items: center; gap: 0.8rem; padding: 0 0.75rem; border: 1px solid var(--lo-line); color: var(--zf-text); font-size: 0.88rem; letter-spacing: 0.01em; text-transform: none; }
    .zf-mobile-account-link svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
}


/* Force white labels on every primary action in the storefront. */
.zf-storefront .lo-btn:not(.lo-btn--outline),
.zf-storefront .lo-btn--outline:hover:not(:disabled),
.zf-storefront button[class~="btn-primary"],
.zf-storefront button[class~="button-primary"],
.zf-storefront button[class~="zf-btn-primary"],
.zf-storefront button[class~="bg-primary"],
.zf-storefront button[data-add-to-cart],
.zf-storefront [role="button"][class*="primary"] { color: #fff !important; }
.zf-storefront footer form .lo-btn { color: var(--zf-on-footer) !important; }

/* White contrast for the storefront primary controls, sale price and cart badge. */
.zf-storefront .lo-btn:not(.lo-btn--outline),
.zf-storefront .lo-btn--outline:hover:not(:disabled),
.zf-storefront button[class*="primary"],
.zf-storefront [role="button"][class*="primary"],
.zf-storefront .bg-ink,
.zf-storefront .zf-discount-price,
.zf-storefront .zf-cart-count { color: #fff !important; }
.zf-storefront footer form .lo-btn { color: var(--zf-on-footer) !important; }