/* Viewport-aware framing and locally available font choices. */
#desktop-menu-button { font-size:26px; }
@media (max-width:800px) { #desktop-menu-button { display:none; } }
.mobile-menu { overflow-y:auto; }
#order-tracking-dialog { position:fixed; inset:0; margin:auto; width:min(820px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:24px; overflow:auto; background:#000; color:var(--text); border:1px solid var(--line-light); border-radius:18px; }
#order-tracking-dialog::backdrop { background:rgba(0,0,0,.75); }
#order-tracking-dialog .order-tracking-section { padding:24px 0; border:0; }
.tracking-dialog-close { display:block; margin-left:auto; min-height:44px; padding:8px 16px; background:var(--panel); color:var(--text); border:1px solid var(--line-light); border-radius:8px; }
:root { --bg:#000000; --bg-soft:#000000; }
html,body,.site { background:#000000; }
body::before { display:none; }
.hero-section,.hero-loading-skeleton { background:#000000; }
body { font-family: var(--store-font-body, Arial, Helvetica, sans-serif); }
.bag-item-name,.bag-summary-row strong { font-family: var(--store-font-body, Arial, Helvetica, sans-serif); }
h1,h2,h3,h4,h5,h6,.hero-title,.section-title,.brand-story-title,.newsletter-title {
    font-family: var(--store-font-heading, "Space Grotesk", Arial, sans-serif);
}
.product-slide-title,.collection-product-info h3,#product-modal-title {
    font-family: var(--store-font-heading, "Space Grotesk", Arial, sans-serif);
}
[data-cms-key] .outkst-motion-word { font-family: inherit; }
#hero { min-height: min(860px, 100svh); }
#hero .hero-background { object-position: center; }
#hero .hero-media.outkst-depth-media { scale: 1; translate: none; }
@media (min-width: 768px) {
    /* Accessories uses the same desktop footprint as the other collections. */
    .collection-card[data-collection="accessories"] {
        grid-column: auto;
        min-height: 440px;
    }
    :root { --page-padding: clamp(24px, 4vw, 72px); }
    .store-section,.lookbook-section,.brand-story-section { padding-block: clamp(40px, 6vh, 72px); }
    .hero-content { padding-top: 110px; padding-bottom: 40px; }
    .hero-title { font-size: clamp(44px, 5.5vw, 88px); }
    .product-slide-media { min-height: 0; height: min(58svh, 500px); max-width: 560px; }
    .product-slide-media img { object-fit: contain; }
    .collection-product-image { height: min(42svh, 360px); aspect-ratio: auto; }
    .collection-product-image img { object-fit: contain; }
    .product-gallery-main { height: min(65svh, 600px); min-height: 0; }
    .product-gallery-main img,.product-quick-view-media img { min-height: 0; object-fit: contain; }
    /* Preserve the full image edges rather than enlarging contained photography. */
    .lookbook-item > img.outkst-depth-media,.brand-story-image.outkst-depth-media { scale: 1; translate: none; }
    .lookbook-item > img.outkst-tilt-surface,.brand-story-image.outkst-tilt-surface { --outkst-zoom: 1 !important; }
    .product-slide:hover .product-slide-media img { transform: none; }
}

/* Frames use the photograph's own proportions, rather than letterboxing it. */
.brand-story-image-wrap {
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    align-self: start;
}
.brand-story-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(62svh, 540px);
    object-fit: contain;
}
.lookbook-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
    grid-template-rows: auto auto;
    min-height: 0;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
}
.lookbook-grid > .lookbook-item {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    aspect-ratio: auto;
    justify-self: center;
}
.lookbook-grid > .lookbook-item-large { grid-column: 1; grid-row: 1 / 3; }
.lookbook-grid > .lookbook-item:nth-child(2) { grid-column: 2; grid-row: 1; justify-self: start; }
.lookbook-grid > .lookbook-item:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: end; }
.lookbook-grid > .lookbook-item > img {
    display: block;
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(34svh, 310px);
    object-fit: contain;
}
.lookbook-grid > .lookbook-item-large > img { max-height: min(70svh, 640px); }
/* Keep image edges attached to their borders during hover and scrolling. */
.lookbook-grid > .lookbook-item > img,
.brand-story-image-wrap > .brand-story-image {
    transform: none !important;
    scale: 1 !important;
    translate: none !important;
}
@media (max-width: 767px) {
    .lookbook-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 12px;
    }
    .lookbook-grid > .lookbook-item-large { align-self: center; }
    .lookbook-grid > .lookbook-item:nth-child(3) { max-width: 88%; }
    .lookbook-grid > .lookbook-item > img { max-height: 28svh; }
    .lookbook-grid > .lookbook-item-large > img { max-height: 58svh; }
    .lookbook-hover-label { font-size: 9px; padding: 6px 9px; }
}
@media (max-width: 767px) {
    #hero { min-height: 90svh; }
    .hero-title { font-size: clamp(36px, 10vw, 64px); }
    .hero-content { padding-top: 110px; }
}
@media (min-width: 768px) {
  .product-slide-media {
    width: min(100%, 43.5svh, 375px);
    height: auto;
    min-height: 0;
    max-width: 375px;
    aspect-ratio: 3 / 4;
    margin-inline: auto;
    justify-self: center;
  }

  .product-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
/* Three real product cards across desktop; retain the single-card mobile slider. */
.carousel-pause { display:block; margin:12px auto 0; padding:8px 14px; min-height:40px; border:1px solid var(--line-light); border-radius:20px; color:var(--muted); background:transparent; font:inherit; font-size:11px; cursor:pointer; }
.carousel-pause[hidden] { display:none; }
@media (min-width:1024px) {
  #spotlight .product-slider-shell,#new-drop .product-slider-shell { max-width:1320px; }
  #spotlight .product-slider-track,#new-drop .product-slider-track { gap:24px; }
  #spotlight .product-slide,#new-drop .product-slide { flex:0 0 calc((100% - 48px) / 3); width:calc((100% - 48px) / 3); min-width:0; padding:0; }
  #spotlight .product-slide-media,#new-drop .product-slide-media { width:100%; max-width:none; height:auto; min-height:0; aspect-ratio:3 / 4; }
  #spotlight .product-slide-media img,#new-drop .product-slide-media img { width:100%; height:100%; object-fit:contain; padding:0; }
  #spotlight .product-slider-controls,#new-drop .product-slider-controls { z-index:4; }
}

/* Desktop coverflow: five reusable visual positions create a continuous loop. */
.product-coverflow[hidden] { display:none; }
@media (min-width:1024px) {
  #spotlight .has-coverflow,#new-drop .has-coverflow { overflow:hidden; scroll-snap-type:none; }
  .has-coverflow > .product-slider-track { display:none; }
  .product-coverflow { position:relative; width:100%; height:auto; aspect-ratio:2.16; perspective:1200px; overflow:hidden; }
  #spotlight .product-coverflow .coverflow-card,#new-drop .product-coverflow .coverflow-card { position:absolute; left:50%; top:5%; width:32%; padding:0; margin:0; opacity:1; visibility:visible; translate:none; scale:none; transform-origin:center; backface-visibility:hidden; will-change:transform,opacity; }
  .product-coverflow .product-slide-media { transform:none !important; translate:none !important; scale:1 !important; box-shadow:0 18px 30px #0006; }
}

/* Hide carousel progress indicators; keep their nodes for navigation updates. */
#spotlight-progress, #new-drop-progress { display:none !important; }

/* Mobile: finger-driven center card, with soft neighboring previews. */
@media (max-width:1023px) {
  #spotlight .product-slider-controls,#new-drop .product-slider-controls { display:none !important; }
  #spotlight .has-coverflow,#new-drop .has-coverflow { overflow:hidden; scroll-snap-type:none; }
  .has-coverflow > .product-slider-track { display:none; }
  .product-coverflow { position:relative; width:100%; aspect-ratio:.9; overflow:hidden; touch-action:pan-y pinch-zoom; }
  #spotlight .product-coverflow .coverflow-card,#new-drop .product-coverflow .coverflow-card { position:absolute; left:50%; top:3%; width:78%; min-width:0; padding:0; margin:0; visibility:visible; translate:none; scale:none; transform-origin:center; will-change:transform,opacity; }
  #spotlight .product-coverflow .product-slide-media,#new-drop .product-coverflow .product-slide-media { width:100%; max-width:none; min-height:0; height:auto; aspect-ratio:3 / 4; transform:none !important; translate:none !important; scale:1 !important; }
  .product-coverflow .product-slide-media img { width:100%; height:100%; object-fit:contain; padding:0; user-select:none; -webkit-user-drag:none; }
}

/* Center the lone coming-soon card without changing populated carousels. */
#spotlight .product-slide-empty:only-child,
#new-drop .product-slide-empty:only-child { margin-inline: auto; }

/* Bento surface theme: appearance only; preserve all layout and motion rules. */
:root {
  --surface: #111113;
  --panel: #171719;
  --line: rgba(255,255,255,.10);
  --line-light: rgba(255,255,255,.18);
  --radius-lg: 24px;
  --radius-sm: 12px;
  --shadow-raised: 0 1px 0 rgba(255,255,255,.05) inset;
  --shadow-control: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-inset: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.site-header, .site-header.scrolled {
  background: #0d0d0f;
  border-color: var(--line);
  backdrop-filter: none;
  box-shadow: none;
}
.collection-card, .collection-product-card, .lookbook-item,
.brand-story-image-wrap, .product-slide-media, .newsletter-inner,
.search-product {
  background: #111113;
  border-color: var(--line-light);
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.product-coverflow .product-slide-media {
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
.collection-card-content {
  background: linear-gradient(0deg,rgba(0,0,0,.88),transparent);
}
.header-icon-button, .slider-button, .collection-arrow,
.mobile-menu-close, .collection-browser-close, .floating-bag {
  background: #18181b;
  border-color: var(--line-light);
  border-radius: 12px;
  box-shadow: var(--shadow-control);
}
.hero-cta, .product-add-button, .checkout-button,
.product-modal-add-button, .newsletter-submit {
  border-radius: 12px;
  box-shadow: none;
}
.newsletter-form, .bag-header, .bag-summary,
.checkout-header, .checkout-summary, .collection-browser-header {
  background: #111113;
  box-shadow: none;
}
.bag-drawer, .product-modal, .checkout-panel, .mobile-menu,
.search-overlay { background: #0b0b0d; }
.bag-item-image, .product-quick-view-media, .product-gallery-main {
  background: #141416;
  border-radius: 16px;
}
.section-heading, .lookbook-header, .site-footer { border-color: var(--line); }
@media (hover:hover) {
  .collection-card:hover, .collection-product-card:hover,
  .lookbook-item:hover, .search-product:hover {
    border-color: rgba(255,255,255,.32);
  }
  .header-icon-button:hover, .slider-button:hover,
  .collection-arrow:hover { background: #242427; }
}
@media (max-width:767px) {
  .collection-card, .collection-product-card, .lookbook-item,
  .brand-story-image-wrap, .product-slide-media, .newsletter-inner,
  .search-product { border-radius: 18px; }
}

/* Supporting hero copy, shared with the admin Hero editor. */
  .hero-editorial-note {
    display:block; position:absolute; z-index:2;
    top:clamp(120px,22%,220px); right:7%; width:27%; max-width:320px;
    color:#f5f5f3; pointer-events:none;
    text-shadow:0 2px 18px rgba(0,0,0,.45);
  }
  .hero-editorial-label {
    display:block; color:#ff786b; font-size:10px; font-weight:700;
    letter-spacing:.18em; line-height:1.5;
  }
  .hero-editorial-note p {
    margin:10px 0; font-family:var(--store-font-body,Arial,Helvetica,sans-serif);
    font-size:clamp(13px,1.1vw,16px); font-weight:400; line-height:1.75; letter-spacing:.01em; text-transform:none; color:#e1e1df;
  }
  .hero-editorial-caption { font-size:12px; line-height:1.6; color:#ddd; }
  .hero-loading .hero-editorial-note { visibility:hidden; }

.hero-editorial-note p { white-space: pre-line; overflow-wrap: anywhere; }
.hero-editorial-note [hidden] { display: none; }

@media (max-width:1023px) {
  .hero-editorial-note { top:100px; right:var(--page-padding,24px); width:46%; max-width:300px; }
  .hero-editorial-label { font-size:9px; letter-spacing:.1em; }
  .hero-editorial-note p { font-size:12px; line-height:1.7; margin:8px 0; }
  .hero-editorial-caption { font-size:11px; line-height:1.45; }
}
