/* Product photography and shopping flow after the caption cleanup. */
.detail-inspector[data-detail] .inspector-media>#detail-image{padding:0}
/* Match the Marshall product presentation with a dark slate stage and a full case view. */
.detail-inspector[data-detail=case] .inspector-media{aspect-ratio:1.22;background:#0e1720}
.detail-inspector[data-detail=case] .inspector-media>#detail-image{padding:0;object-fit:contain;object-position:center;transform:none}
.view-case{background:#0e1720}
.view-case img,.preserved-checkout .view-case img,.gallery-thumb .view-case img{padding:0;object-fit:contain}
#purchase-area{border:0;border-radius:0;background:transparent}

/* Keep the opening focused on the headline and shop action on phones. */
@media (max-width:600px) {
  #site-header .series-label,
  #site-header .brand-separator,
  .glass-hero .hero-kicker,
  .glass-hero .hero-copy > .gold-rule,
  .glass-hero .hero-description,
  .glass-hero .hero-actions .text-link,
  .glass-hero .hero-uses,
  .glass-hero .hero-spec-line,
  .glass-hero .hero-image-softener {
    display:none;
  }

  .hero.glass-hero {
    --mobile-dashboard-height:clamp(150px,45vw,220px);
    min-height:0;
  }

  .glass-hero .hero-content {
    min-height:0;
    padding:108px var(--gutter) 24px;
  }

  .glass-hero h1 { margin:0; }
  .glass-hero .hero-actions { margin-top:calc(var(--mobile-dashboard-height) + 48px); }
  .glass-hero .hero-actions .button {
    min-height:50px;
    background:transparent;
    color:var(--accent);
    border-color:#eaaa0059;
    box-shadow:none;
    transition:border-color .2s,box-shadow .2s,transform .2s;
  }
  .glass-hero .hero-actions .button-divider { background:#eaaa0073; }
  .glass-hero .hero-actions .button:hover,
  .glass-hero .hero-actions .button:focus-visible {
    background:transparent;
    border-color:var(--accent);
    box-shadow:0 4px 20px #eaaa001a;
  }
  .glass-hero .hero-actions .button:active {
    border-color:var(--accent);
    box-shadow:none;
  }

  /* Keep the same dashboard crop between the headline and the shop action.
     The lower space holds a 50px button, with 24px on either side. */
  .glass-hero .hero-background {
    inset:auto 0 98px;
    height:var(--mobile-dashboard-height);
    object-fit:cover;
    object-position:center 48%;
    opacity:1;
  }

  .glass-hero .hero-shade {
    inset:auto 0 98px;
    height:var(--mobile-dashboard-height);
    background:linear-gradient(180deg,#030d16 0%,transparent 24%,transparent 72%,#030d16 100%);
  }
}

/* Mobile detail views stay attached to the controls that reveal them. */
@media (max-width:600px) {
  #difference .right-copy > .eyebrow,
  #difference .intro-dimensions,
  #difference .right-description,
  #detail-kicker,
  .clarity-copy .scene-label,
  .clarity-copy > .gold-rule,
  .presentation-prefix,
  #pack-stage-label,
  .pack-number {
    display:none;
  }

  .section.right-sized { padding-top:32px; gap:20px; }
  .right-copy h2 { margin:0 0 16px; }
  .right-lead { margin:0; }
  .weave-link { font-size:16px; min-height:44px; }
  .product-detail-controls { margin-top:20px; padding-top:18px; gap:14px 20px; scroll-margin-top:12px; }
  .detail-control { padding-bottom:12px; gap:7px; }
  .detail-control b { font-size:26px; }
  .detail-control > span { font-size:10px; letter-spacing:.03em; }
  .detail-control i { font-size:14px; }
  #difference[data-active-detail]:not([data-active-detail="size"]) .right-product { display:none; }
  .right-product { padding-top:25px; }
  .detail-inspector { padding:14px; gap:18px; }
  .inspector-copy h3 { margin:0 0 12px; font-size:28px; }
  .inspector-copy > p:not(.eyebrow) { font-size:16px; line-height:1.55; }
  .inspector-copy .text-link { font-size:14px; min-height:44px; margin-top:10px; }

  /* Natural content height prevents empty space and keeps photos below readable copy. */
  .clarity-tabs > button { font-size:14px; padding:14px 12px; gap:9px; }
  .clarity-tabs .line-icon { flex:none; width:26px; height:26px; }
  .clarity-panel { display:flex; flex-direction:column; height:auto; }
  .clarity-copy { order:0; padding:24px 22px 18px; width:100%; max-width:none; }
  .clarity-copy h3 { font-size:clamp(29px,8vw,38px); line-height:1.14; margin:0 0 16px; }
  .clarity-copy > p.scene-description { font-size:18px; line-height:1.5; max-width:none; min-height:0; }
  .clarity-panel .clarity-media,
  .clarity-panel[data-active] .clarity-media {
    order:1; position:relative; inset:auto; width:100%; height:auto;
    aspect-ratio:1.2; z-index:0;
  }
  .clarity-panel .clarity-shade { display:none; }
  .clarity-media::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg,#171c22,transparent 18%);
  }
  .scene-artwork[data-scene-art=optics] img { object-position:68% center; }
  .tablet-device {
    width:56%; height:auto; aspect-ratio:3 / 4; max-height:none;
    left:11%; top:5%; padding:9px 7px; border-radius:14px;
    transform:rotate(-6deg);
  }
  .phone-device {
    width:28%; height:auto; aspect-ratio:9 / 19.5;
    right:7%; top:25%; padding:5px; border-radius:17px;
    transform:rotate(7deg);
  }
  .device-display { position:absolute; inset:9px 7px; width:auto; height:auto; }
  .phone-device .device-display { inset:5px; border-radius:12px; }

  .packaging-section { padding-top:38px; }
  .packaging-heading { margin-bottom:22px; }
  .packaging-heading .eyebrow { font-size:11px; }
  .packaging-heading h2 { margin-top:12px; }
  .packaging-layout { gap:0; }
  .pack-story { width:100%; }
  .pack-chapter-button {
    grid-template-columns:1fr 24px; gap:12px; padding:20px 0;
    font-size:19px; scroll-margin-top:8px;
  }
  .pack-arrow { font-size:24px; text-align:center; }
  .pack-chapter > p { padding:18px 0 24px; font-size:16px; line-height:1.6; }
  .pack-chapter .pack-stage { height:clamp(330px,103vw,470px); width:100%; }
  .pack-stage-top { position:absolute; inset:0 0 auto; height:60px; padding:10px 12px; justify-content:flex-end; }
  .pack-stage-top .icon-button { width:44px; height:44px; }
  .pack-visual { inset:38px 0 58px; }
  .pack-stage-bottom { left:16px; right:16px; bottom:17px; }
  .pack-stage-bottom > span:first-child { font-size:12px; max-width:none; }
  .pack-stage-bottom > span:last-child { display:none; }
}
#full-product-view .measure-horizontal { left:1.75%; right:1.67%; }
#full-product-view .measure-vertical { top:2.39%; bottom:1.75%; }