/* DEMI DEVILLE — requested storefront fixes, 2026-09-19.
   1) SHOP uses the same price mode as the product page (number / custom text / hidden).
   2) SHOP and PRODUCT media keep their source aspect ratio. No forced 4:3/16:9 box,
      no stretching and no cropping for either images or videos. */

/* SHOP: let every product media element keep its own natural height. */
body.shop-page .product-grid{
  grid-auto-rows:auto!important;
  align-items:start!important;
}
body.shop-page .product-card,
body.shop-page .product-card:nth-child(n/**/+5),
body.shop-page .product-grid[data-count="1"] .product-card,
body.shop-page .product-grid[data-count="2"] .product-card{
  height:auto!important;
  min-height:0!important;
}
body.shop-page .product-card .media,
body.shop-page .product-card:nth-child(n/**/+5) .media,
body.shop-page .product-card-1 .media,
body.shop-page .product-card-2 .media,
body.shop-page .product-card-3 .media,
body.shop-page .product-card-4 .media,
body.shop-page .product-grid[data-count="1"] .media,
body.shop-page .product-grid[data-count="2"] .media{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
}
body.shop-page .product-card .product-art,
body.shop-page .product-card:nth-child(n/**/+5) .product-art,
body.shop-page .product-card-1 .product-art,
body.shop-page .product-card-2 .product-art,
body.shop-page .product-card-3 .product-art,
body.shop-page .product-card-4 .product-art,
body.shop-page .product-grid[data-count="1"] .product-art,
body.shop-page .product-grid[data-count="2"] .product-art{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
  transform:none!important;
}
body.shop-page video.product-art{
  object-fit:contain!important;
}

/* Keep the caption immediately after the real image/video height. */
body.shop-page .product-live-copy,
body.shop-page .product-card.has-reference-copy .product-reference-copy{
  flex:0 0 auto!important;
}

/* PRODUCT DETAIL: the source ratio controls the visible garment/media size.
   Bounds only limit how large it can become; they never force width + height together. */
body.product-detail-page .product-visual{
  height:auto!important;
  min-height:0!important;
}
body.product-detail-page .product-visual>img#productImage,
body.product-detail-page .product-visual>video#productImage{
  display:block!important;
  width:auto!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
  transform:none!important;
}

@media (min-width:901px){
  body.shop-page .product-card .product-art,
  body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  body.shop-page .product-grid[data-count="1"] .product-art,
  body.shop-page .product-grid[data-count="2"] .product-art{
    max-width:306px!important;
  }
  body.product-detail-page .product-visual>img#productImage,
  body.product-detail-page .product-visual>video#productImage{
    max-width:543px!important;
    max-height:643px!important;
  }
}

@media (max-width:900px){
  body.product-detail-page .product-visual{
    height:auto!important;
    max-height:none!important;
  }
  body.product-detail-page .product-visual>img#productImage,
  body.product-detail-page .product-visual>video#productImage{
    max-width:82vw!important;
    max-height:450px!important;
  }
}

/* 2026-09-19 — SHOP variable-height row safety.
   A tall source image/video must increase its whole grid row instead of letting the
   caption or the next product overlap it. The page itself scrolls only when the
   resulting storefront is taller than the visible desktop canvas. */
@media (min-width:901px){
  html,
  body.shop-page{
    overflow-x:hidden!important;
  }
  body.shop-page{
    height:auto!important;
    min-height:100vh!important;
    overflow-y:auto!important;
  }
  body.shop-page .shop-stage{
    height:100vh;
    min-height:100vh;
    overflow:visible!important;
  }
  body.shop-page .shop-canvas{
    overflow:visible!important;
  }
  body.shop-page .shop-wrap{
    height:auto!important;
    min-height:1080px!important;
    overflow:visible!important;
  }
  body.shop-page .product-grid,
  body.shop-page .product-grid[data-count="1"],
  body.shop-page .product-grid[data-count="2"]{
    /* Critical: do not stretch the grid between top/bottom or into two 1fr tracks.
       Those legacy rules made the grid grow whenever the canvas grew, creating a
       ResizeObserver feedback loop that pushed the second row farther down. */
    bottom:auto!important;
    height:auto!important;
    min-height:0!important;
    grid-template-rows:none!important;
    grid-auto-rows:max-content!important;
    row-gap:36px!important;
    align-items:start!important;
    align-content:start!important;
  }
  body.shop-page .product-card,
  body.shop-page .product-card:nth-child(n/**/+5){
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
  }
  body.shop-page .product-live-copy{
    position:relative!important;
    margin-top:12px!important;
    padding:0 8px 8px!important;
  }
  body.shop-page .product-name,
  body.shop-page .product-price{
    position:relative!important;
    z-index:1!important;
  }
}


/* 2026-09-20 — SHOP scroll-to-full-card fix.
   The scaled desktop canvas may become taller than the viewport when portrait
   product media is used. Keep the canvas layout intact and make the document
   itself scroll far enough to reveal the complete card copy and footer. */
@media (min-width:901px){
  html.shop-scroll-page{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  html.shop-scroll-page body.shop-page{
    height:auto!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  html.shop-scroll-page body.shop-page .shop-stage{
    height:var(--shop-stage-height,100vh)!important;
    min-height:100vh!important;
    overflow:visible!important;
  }
  html.shop-scroll-page body.shop-page .shop-canvas,
  html.shop-scroll-page body.shop-page .shop-wrap{
    overflow:visible!important;
  }
}

/* 2026-09-20 — requested rollback-safe fixes only.
   1) Hide the orphaned product zoom layer that was rendering its close button / empty image
      at the bottom of the product card.
   2) On mobile SHOP, pagination + legal links are part of normal document flow after the
      final product row. They scroll with the products and appear only when the user reaches
      the real end of the catalogue page. */
body.product-detail-page .dd-product-zoom{
  display:none!important;
}

@media (max-width:900px){
  html body.shop-page .shop-wrap{
    padding-bottom:24px!important;
  }
  html body.shop-page .shop-footer{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    width:100%!important;
    height:auto!important;
    margin:32px auto 0!important;
    padding:0 0 max(16px,env(safe-area-inset-bottom))!important;
    transform:none!important;
    background:transparent!important;
    overflow:visible!important;
    z-index:25!important;
  }
  html body.shop-page .shop-pagination{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:auto!important;
    height:auto!important;
    min-height:34px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body.shop-page .shop-legal-links{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    max-width:calc(100vw - 24px)!important;
    margin:10px auto 0!important;
    padding:0!important;
    white-space:nowrap!important;
  }
}

/* 2026-09-20 — original product-media proportions + non-squashing resize.
   Uploaded files are stored byte-for-byte by /api/admin/upload; these rules make
   the storefront display the source aspect ratio instead of forcing a 4:3-like
   frame or a viewport-height cap. */
body.shop-page .product-card .media,
body.shop-page .product-card .product-art,
body.product-detail-page .product-visual,
body.product-detail-page #productImage{
  aspect-ratio:auto!important;
}
body.shop-page .product-card .product-art{
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center top!important;
}
body.product-detail-page #productImage{
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center top!important;
}
@media (min-width:901px){
  /* Keep only a width bound so portrait/landscape sources retain their real ratio. */
  body.shop-page .product-card .product-art{
    max-width:306px!important;
  }
  body.product-detail-page #productImage{
    max-width:555px!important;
    max-height:none!important;
  }
}
@media (max-width:900px){
  body.shop-page .product-card .product-art{
    max-width:100%!important;
    max-height:none!important;
  }
  body.product-detail-page .product-visual{
    height:auto!important;
    max-height:none!important;
  }
  body.product-detail-page #productImage{
    width:auto!important;
    height:auto!important;
    max-width:min(82vw,520px)!important;
    max-height:none!important;
  }
}



/* 2026-09-20 — narrow SHOP stability only.
   When the browser crosses into the <=900px layout, keep every card in normal
   document flow. Media may scale down to fit its column, but X/Y are never
   distorted, the source is never cropped, and the caption always starts after
   the real rendered media height. */
@media (max-width:900px){
  html body.shop-page,
  html body.shop-page .shop-stage,
  html body.shop-page .shop-canvas,
  html body.shop-page .shop-wrap{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html body.shop-page{
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  html body.shop-page .shop-stage,
  html body.shop-page .shop-canvas{
    min-height:100dvh!important;
  }
  html body.shop-page .shop-wrap{
    min-height:calc(100dvh - 64px)!important;
  }
  html body.shop-page .product-grid,
  html body.shop-page .product-grid[data-count="1"],
  html body.shop-page .product-grid[data-count="2"]{
    position:static!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:max-content!important;
    align-items:start!important;
    align-content:start!important;
    row-gap:30px!important;
    overflow:visible!important;
  }
  html body.shop-page .product-card,
  html body.shop-page .product-card:nth-child(n/**/+5),
  html body.shop-page .product-grid[data-count="1"] .product-card,
  html body.shop-page .product-grid[data-count="2"] .product-card{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html body.shop-page .product-card .media,
  html body.shop-page .product-card:nth-child(n/**/+5) .media,
  html body.shop-page .product-card-1 .media,
  html body.shop-page .product-card-2 .media,
  html body.shop-page .product-card-3 .media,
  html body.shop-page .product-card-4 .media,
  html body.shop-page .product-grid[data-count="1"] .media,
  html body.shop-page .product-grid[data-count="2"] .media{
    position:relative!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art,
  html body.shop-page .product-grid[data-count="1"] .product-art,
  html body.shop-page .product-grid[data-count="2"] .product-art{
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    flex:0 0 auto!important;
  }
  html body.shop-page .product-live-copy,
  html body.shop-page .product-card.has-reference-copy>.product-live-copy{
    position:static!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:10px 0 0!important;
    padding:0 3px!important;
    transform:none!important;
    flex:0 0 auto!important;
    overflow:visible!important;
  }
  html body.shop-page .product-name,
  html body.shop-page .product-price{
    position:static!important;
    display:block!important;
    transform:none!important;
  }
}

/* Narrow SHOP final guard: older mobile count-specific rules used fixed 165–245px
   media frames for 3/4 products. Override those exact selectors so natural media
   height participates in the grid row and captions can never sit on the artwork. */
@media (max-width:900px){
  html body.shop-page .product-grid[data-count] .product-card,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5){
    height:auto!important;
    min-height:0!important;
  }
  html body.shop-page .product-grid[data-count] .product-card .media,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5) .media{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
  }
  html body.shop-page .product-grid[data-count] .product-card .product-art,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5) .product-art{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
  html body.shop-page .product-grid[data-count] .product-card .product-live-copy{
    position:static!important;
    margin-top:10px!important;
    transform:none!important;
  }
}

/* 2026-09-20 — fixed SHOP / PRODUCT media size while narrowing the browser.
   Do not enlarge product media when the <=900px layout becomes active.
   Keep the same desktop cap and fixed caption typography; only shrink further
   when the physical viewport is genuinely too small to contain the media. */
@media (max-width:900px){
  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art,
  html body.shop-page .product-grid[data-count="1"] .product-art,
  html body.shop-page .product-grid[data-count="2"] .product-art{
    width:auto!important;
    height:auto!important;
    max-width:min(306px,100%)!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
  html body.shop-page .product-name{
    font-size:17px!important;
    line-height:1.08!important;
    letter-spacing:-.35px!important;
  }
  html body.shop-page .product-price{
    font-size:16px!important;
    line-height:1.08!important;
    letter-spacing:-.35px!important;
  }

  body.product-detail-page .product-visual{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  body.product-detail-page .product-visual>img#productImage,
  body.product-detail-page .product-visual>video#productImage{
    width:auto!important;
    height:auto!important;
    max-width:min(543px,calc(100vw - 32px))!important;
    max-height:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    flex:0 0 auto!important;
  }
}

/* Keep the product photo itself at its source/display size on desktop as well.
   The 1920 master layout can move around it, but the garment is never stretched
   wider or taller by viewport-size rules. */
@media (min-width:901px){
  body.product-detail-page .product-visual>img#productImage,
  body.product-detail-page .product-visual>video#productImage{
    width:auto!important;
    height:auto!important;
    max-width:543px!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
}


/* 2026-09-21 — freeze actual SHOP / PRODUCT media + copy size while resizing.
   Desktop master canvases are scaled to fit the browser. Counter-scale only the
   product area so garments and their text keep the same physical pixel size.
   Positions may move with the responsive canvas, but image/text size does not. */
@media (min-width:901px){
  html body.shop-page .product-grid,
  html body.shop-page .product-grid[data-count="1"],
  html body.shop-page .product-grid[data-count="2"]{
    transform:scale(var(--shop-inverse-scale,1))!important;
    transform-origin:0 0!important;
    width:100vw!important;
  }

  /* Keep the storefront media at its design size instead of inheriting the
     1920-canvas scale. Natural source ratio is still preserved. */
  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art,
  html body.shop-page .product-grid[data-count="1"] .product-art,
  html body.shop-page .product-grid[data-count="2"] .product-art{
    width:auto!important;
    height:auto!important;
    max-width:306px!important;
    max-height:none!important;
    transform:none!important;
    object-fit:contain!important;
    object-position:center top!important;
  }

  /* Product detail: only the media is counter-scaled.
     The information controls keep the original master layout sizing/position. */
  body.product-detail-page .product-visual{
    transform:scale(var(--product-inverse-scale,1))!important;
    transform-origin:0 0!important;
  }

  /* Vertically center the fixed 543×643 image area in the 1080px master.
     Horizontal position stays centered in the left product column. */
  body.product-detail-page .product-visual{
    left:var(--product-visual-left,208px)!important;
    top:var(--product-visual-top,218px)!important;
    width:543px!important;
    height:643px!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }
  body.product-detail-page .product-visual>img#productImage,
  body.product-detail-page .product-visual>video#productImage{
    width:auto!important;
    height:auto!important;
    max-width:543px!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
}

/* Narrow/mobile canvas is already unscaled. Keep the same fixed storefront
   media cap and fixed typography instead of resizing them to the column width. */
@media (max-width:900px){
  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art,
  html body.shop-page .product-grid[data-count="1"] .product-art,
  html body.shop-page .product-grid[data-count="2"] .product-art{
    width:auto!important;
    height:auto!important;
    max-width:306px!important;
    max-height:none!important;
  }
  html body.shop-page .product-name{
    font-size:17px!important;
    line-height:1.08!important;
  }
  html body.shop-page .product-price{
    font-size:16px!important;
    line-height:1.08!important;
  }
}

/* Final narrow selector guard: older data-count rules have higher specificity.
   Keep the same 306px storefront media cap even after the mobile grid activates. */
@media (max-width:900px){
  html body.shop-page .product-grid[data-count] .product-card .product-art,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-grid[data-count="1"] .product-card .product-art,
  html body.shop-page .product-grid[data-count="2"] .product-card .product-art{
    width:auto!important;
    height:auto!important;
    max-width:306px!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
}


/* 2026-09-21 — final fixed-size SHOP / PRODUCT layout correction.
   Product media and copy keep their physical pixel size while the browser is resized.
   SHOP reflows fixed-width cards instead of stretching/overlapping them. */
@media (min-width:901px){
  html body.shop-page .product-grid,
  html body.shop-page .product-grid[data-count="1"],
  html body.shop-page .product-grid[data-count="2"]{
    left:0!important;
    right:auto!important;
    top:190px!important;
    bottom:auto!important;
    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(306px,306px))!important;
    grid-template-rows:none!important;
    grid-auto-rows:max-content!important;
    justify-content:space-evenly!important;
    align-items:start!important;
    align-content:start!important;
    justify-items:center!important;
    column-gap:0!important;
    row-gap:64px!important;
    overflow:visible!important;
    transform:scale(var(--shop-inverse-scale,1))!important;
    transform-origin:0 0!important;
  }
  html body.shop-page .product-card,
  html body.shop-page .product-card:nth-child(n/**/+5),
  html body.shop-page .product-grid[data-count="1"] .product-card,
  html body.shop-page .product-grid[data-count="2"] .product-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:306px!important;
    min-width:306px!important;
    max-width:306px!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }
  html body.shop-page .product-card .media,
  html body.shop-page .product-card:nth-child(n/**/+5) .media,
  html body.shop-page .product-card-1 .media,
  html body.shop-page .product-card-2 .media,
  html body.shop-page .product-card-3 .media,
  html body.shop-page .product-card-4 .media{
    width:306px!important;
    min-width:306px!important;
    max-width:306px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:306px!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    flex:0 0 auto!important;
  }
  html body.shop-page .product-live-copy,
  html body.shop-page .product-card.has-reference-copy>.product-live-copy{
    position:static!important;
    display:block!important;
    width:306px!important;
    min-width:306px!important;
    max-width:306px!important;
    height:auto!important;
    margin:12px 0 0!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    transform:none!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  html body.shop-page .product-name{
    font-size:17px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
  }
  html body.shop-page .product-price{
    font-size:16px!important;
    line-height:1.12!important;
    white-space:normal!important;
  }

  body.product-detail-page .product-visual{
    left:var(--product-visual-left,208px)!important;
    top:var(--product-visual-top,185px)!important;
    width:543px!important;
    height:643px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    transform:scale(var(--product-inverse-scale,1))!important;
    transform-origin:0 0!important;
  }
  body.product-detail-page .product-visual>img#productImage,
  body.product-detail-page .product-visual>video#productImage{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:543px!important;
    max-height:643px!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
  }
}

/* 2026-09-21 — PRODUCT info block compact position tweak only.
   Keep media/layout logic intact; keep the compact sizing/typography, lift the controls slightly,
   and restore their previous right-side position. */
@media (min-width:901px){
  body.product-detail-page .product-info{
    left:1214px!important;
    top:225px!important;
    width:540px!important;
  }

  body.product-detail-page .product-info h1,
  body.product-detail-page .big-price,
  body.product-detail-page .product-info .rule,
  body.product-detail-page .field-label,
  body.product-detail-page .size-picker,
  body.product-detail-page .size-toggle,
  body.product-detail-page .size-menu,
  body.product-detail-page .btn-black,
  body.product-detail-page .accordion,
  body.product-detail-page .acc-item{
    width:540px!important;
  }

  body.product-detail-page .product-info h1{
    font-size:23px!important;
    line-height:23px!important;
  }
  body.product-detail-page .big-price{
    font-size:23px!important;
    line-height:23px!important;
  }
  body.product-detail-page .field-label,
  body.product-detail-page .acc-trigger{
    font-size:15px!important;
  }
  body.product-detail-page .size-toggle,
  body.product-detail-page .btn-black{
    font-size:15px!important;
  }
  body.product-detail-page .acc-content{
    font-size:14px!important;
  }
  body.product-detail-page .size-option,
  body.product-detail-page .size-option-index,
  body.product-detail-page .size-option-value{
    font-size:18px!important;
  }

  /* Override Benzin fallback metric inflation for the same compact sizing. */
  body.product-detail-page.product-benzin-fallback .product-info h1{
    font-size:23px!important;
  }
  body.product-detail-page.product-benzin-fallback .big-price{
    font-size:23px!important;
  }
  body.product-detail-page.product-benzin-fallback .field-label,
  body.product-detail-page.product-benzin-fallback .acc-trigger{
    font-size:15px!important;
  }
}


/* 2026-09-23 — SHOP proportional responsive canvas.
   The 1920px storefront is now the single source of layout truth: cards, product
   media, captions and spacing scale together with one uniform canvas scale.
   This removes the previous inverse-scale layer that kept products/text at a
   fixed physical size and caused overlap while resizing the browser. */
@media (min-width:901px){
  html body.shop-page .product-grid,
  html body.shop-page .product-grid[data-count="1"],
  html body.shop-page .product-grid[data-count="2"]{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:190px!important;
    bottom:auto!important;
    width:1920px!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(var(--shop-columns,4),355px)!important;
    grid-template-rows:none!important;
    grid-auto-rows:max-content!important;
    justify-content:space-evenly!important;
    align-items:start!important;
    align-content:start!important;
    justify-items:center!important;
    column-gap:0!important;
    row-gap:64px!important;
    overflow:visible!important;
    transform:none!important;
    transform-origin:0 0!important;
  }

  html body.shop-page .product-card,
  html body.shop-page .product-card:nth-child(n/**/+5),
  html body.shop-page .product-grid[data-count="1"] .product-card,
  html body.shop-page .product-grid[data-count="2"] .product-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:355px!important;
    min-width:355px!important;
    max-width:355px!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body.shop-page .product-card .media,
  html body.shop-page .product-card:nth-child(n/**/+5) .media,
  html body.shop-page .product-card-1 .media,
  html body.shop-page .product-card-2 .media,
  html body.shop-page .product-card-3 .media,
  html body.shop-page .product-card-4 .media{
    width:355px!important;
    min-width:355px!important;
    max-width:355px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:visible!important;
    flex:0 0 auto!important;
    transform:none!important;
  }

  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:355px!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    flex:0 0 auto!important;
  }

  html body.shop-page .product-live-copy,
  html body.shop-page .product-card.has-reference-copy>.product-live-copy{
    position:static!important;
    display:block!important;
    width:355px!important;
    min-width:355px!important;
    max-width:355px!important;
    height:auto!important;
    margin:12px 0 0!important;
    padding:0 8px!important;
    box-sizing:border-box!important;
    transform:none!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }

  /* Typography is defined once in the 1920px master canvas. Because the parent
     canvas scales uniformly, glyph proportions never stretch horizontally or
     vertically; only their overall size changes with the viewport. */
  html body.shop-page .product-name{
    display:block!important;
    font-size:19px!important;
    line-height:1.12!important;
    letter-spacing:-.35px!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    transform:none!important;
  }
  html body.shop-page .product-price{
    display:block!important;
    font-size:18px!important;
    line-height:1.12!important;
    letter-spacing:-.35px!important;
    white-space:normal!important;
    transform:none!important;
  }
}

/* 2026-09-23 — SHOP fluid re-render pass (QQEPOSIL-style resize behavior).
   Product content no longer inherits the raster-scaled 1920 canvas. The grid
   counter-scales the parent once, then media + typography are sized from the
   real viewport. This preserves glyph proportions and lets images shrink
   inside their own tracks instead of overlapping. Header/chrome are untouched. */
@media (min-width:901px){
  html body.shop-page .product-grid,
  html body.shop-page .product-grid[data-count="1"],
  html body.shop-page .product-grid[data-count="2"]{
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:190px!important;
    bottom:auto!important;
    width:100vw!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(var(--shop-columns,4),minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:max-content!important;
    justify-content:stretch!important;
    align-items:start!important;
    align-content:start!important;
    justify-items:center!important;
    column-gap:0!important;
    row-gap:clamp(34px,3.35vw,64px)!important;
    overflow:visible!important;
    transform:scale(var(--shop-inverse-scale,1))!important;
    transform-origin:0 0!important;
  }

  html body.shop-page .product-card,
  html body.shop-page .product-card:nth-child(n/**/+5),
  html body.shop-page .product-grid[data-count="1"] .product-card,
  html body.shop-page .product-grid[data-count="2"] .product-card{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0 8px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body.shop-page .product-card .media,
  html body.shop-page .product-card:nth-child(n/**/+5) .media,
  html body.shop-page .product-card-1 .media,
  html body.shop-page .product-card-2 .media,
  html body.shop-page .product-card-3 .media,
  html body.shop-page .product-card-4 .media,
  html body.shop-page .product-grid[data-count="1"] .media,
  html body.shop-page .product-grid[data-count="2"] .media{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art,
  html body.shop-page .product-grid[data-count="1"] .product-art,
  html body.shop-page .product-grid[data-count="2"] .product-art{
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:min(306px,18vw)!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    flex:0 0 auto!important;
  }

  html body.shop-page .product-live-copy,
  html body.shop-page .product-card.has-reference-copy>.product-live-copy{
    position:static!important;
    display:block!important;
    width:min(355px,100%)!important;
    min-width:0!important;
    max-width:355px!important;
    height:auto!important;
    margin:clamp(7px,.65vw,12px) 0 0!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    transform:none!important;
    flex:0 0 auto!important;
    text-align:center!important;
  }

  html body.shop-page .product-name,
  html body.shop-page .product-price{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    font-family:var(--condensed)!important;
    font-stretch:100%!important;
    font-style:normal!important;
    transform:none!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    letter-spacing:-.02em!important;
  }
  html body.shop-page .product-name{
    font-size:clamp(10px,.99vw,19px)!important;
    line-height:1.12!important;
  }
  html body.shop-page .product-price{
    font-size:clamp(9px,.94vw,18px)!important;
    line-height:1.12!important;
    margin-top:clamp(2px,.35vw,7px)!important;
  }
}

/* Mobile / narrow SHOP: keep the approved two-column composition, but every
   card is constrained to its own track. Media and text are resized by their
   actual CSS dimensions — never by horizontal/vertical stretching. */
@media (max-width:900px){
  html body.shop-page .product-grid,
  html body.shop-page .product-grid[data-count="1"],
  html body.shop-page .product-grid[data-count="2"]{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:max-content!important;
    column-gap:clamp(8px,2.4vw,18px)!important;
    row-gap:clamp(24px,6vw,36px)!important;
    align-items:start!important;
    align-content:start!important;
    justify-items:stretch!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body.shop-page .product-card,
  html body.shop-page .product-card:nth-child(n/**/+5),
  html body.shop-page .product-grid[data-count] .product-card,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5){
    position:relative!important;
    left:auto!important;
    top:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body.shop-page .product-card .media,
  html body.shop-page .product-card:nth-child(n/**/+5) .media,
  html body.shop-page .product-grid[data-count] .product-card .media,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5) .media,
  html body.shop-page .product-card-1 .media,
  html body.shop-page .product-card-2 .media,
  html body.shop-page .product-card-3 .media,
  html body.shop-page .product-card-4 .media{
    position:relative!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
    transform:none!important;
  }

  html body.shop-page .product-card .product-art,
  html body.shop-page .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-grid[data-count] .product-card .product-art,
  html body.shop-page .product-grid[data-count] .product-card:nth-child(n/**/+5) .product-art,
  html body.shop-page .product-card-1 .product-art,
  html body.shop-page .product-card-2 .product-art,
  html body.shop-page .product-card-3 .product-art,
  html body.shop-page .product-card-4 .product-art{
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:min(306px,100%,43vw)!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    transform:none!important;
    flex:0 0 auto!important;
  }

  html body.shop-page .product-live-copy,
  html body.shop-page .product-card.has-reference-copy>.product-live-copy,
  html body.shop-page .product-grid[data-count] .product-card .product-live-copy{
    position:static!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    margin:clamp(6px,2vw,10px) 0 0!important;
    padding:0 2px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    transform:none!important;
    text-align:center!important;
  }

  html body.shop-page .product-name,
  html body.shop-page .product-price{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    font-family:var(--condensed)!important;
    font-stretch:100%!important;
    font-style:normal!important;
    transform:none!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    letter-spacing:-.02em!important;
  }
  html body.shop-page .product-name{
    font-size:clamp(8px,2.55vw,17px)!important;
    line-height:1.12!important;
  }
  html body.shop-page .product-price{
    font-size:clamp(8px,2.35vw,16px)!important;
    line-height:1.12!important;
    margin-top:clamp(1px,.8vw,4px)!important;
  }
}

/* 2026-09-23 — desktop SHOP header typography only.
   The old desktop header used pre-rendered PNG words. Browser downscaling made
   those raster letters look horizontally squeezed in a narrower desktop window.
   Keep the same 1920px header layout/positions, but render the existing link and
   brand text as live type so uniform canvas scaling preserves glyph proportions.
   Mobile (<=900px) is intentionally untouched. */
@media (min-width:901px){
  html body.shop-page #desktopHeader.site-header .nav-side>a:not(.global-cart-icon){
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    background-image:none!important;
    background:none!important;
    color:#050505!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:24px!important;
    font-weight:400!important;
    font-style:normal!important;
    font-stretch:normal!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    text-indent:0!important;
    transform:none!important;
    text-rendering:geometricPrecision!important;
  }

  html body.shop-page #desktopHeader.site-header .brand{
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    background-image:none!important;
    background:none!important;
    color:#050505!important;
    font-family:"Arial Black",Arial,Helvetica,sans-serif!important;
    font-size:42px!important;
    font-weight:900!important;
    font-style:normal!important;
    font-stretch:normal!important;
    line-height:.9!important;
    letter-spacing:-2.1px!important;
    white-space:nowrap!important;
    text-indent:0!important;
    transform:translateX(-50%)!important;
    text-rendering:geometricPrecision!important;
  }

  /* Preserve the current header composition; only the lettering source changes. */
  html body.shop-page #desktopHeader.site-header .nav-side{
    align-items:flex-start!important;
  }
}

/* 2026-09-23 — SHOP desktop header: uniform scaling only.
   The shared desktop chrome was scaled independently on X and Y
   (viewportWidth/1920 versus viewportHeight/1080), which visibly squeezed
   the logo and menu lettering whenever a desktop window was made narrower
   without reducing its height by the same ratio. SHOP desktop now uses the
   width-driven scale on both axes. Mobile <=900px is intentionally untouched. */
@media (min-width:901px){
  html body.shop-page.shared-chrome-page > #desktopHeader.site-header{
    transform:scale(var(--shared-chrome-x,1))!important;
    transform-origin:0 0!important;
  }
}

/* 2026-09-23 — desktop SHOP typography weight + cart spacing only.
   Match the lighter mobile copy (DD Oswald 400) on desktop without changing
   layout/responsiveness. Keep mobile <=900px untouched. */
@media (min-width:901px){
  html body.shop-page #desktopHeader.site-header .nav-side>a:not(.global-cart-icon){
    font-family:"DD Oswald","Arial Narrow",Arial,sans-serif!important;
    font-weight:400!important;
    font-style:normal!important;
    letter-spacing:0!important;
  }

  html body.shop-page #desktopHeader.site-header .brand{
    font-family:"DD Oswald","Arial Narrow",Arial,sans-serif!important;
    font-weight:600!important;
    letter-spacing:-1px!important;
  }

  /* Product labels use the same lighter face as mobile instead of Impact. */
  html body.shop-page .product-name,
  html body.shop-page .product-price{
    font-family:"DD Oswald","Arial Narrow",Arial,sans-serif!important;
    font-weight:400!important;
    font-stretch:normal!important;
    letter-spacing:0!important;
  }

  /* Keep a clear gap between the cart icon and INSTAGRAM. */
  html body.shop-page #desktopHeader.site-header .global-cart-icon{
    left:auto!important;
    right:500px!important;
  }
}


/* 2026-09-23 — desktop SHOP logo proportion fix only.
   Keep the desktop logo identical in length/width/thickness to the narrow version: 
   use the same prepared brand artwork and let the already width-uniform header scale it.
   Only the logo rendering is changed here; mobile and other SHOP layout stay untouched. */
@media (min-width:901px){
  html body.shop-page #desktopHeader.site-header .brand{
    width:326px!important;
    min-width:326px!important;
    height:28px!important;
    min-height:28px!important;
    background:url("/assets/images/shop-brand-sharp-20261011.png") center/326px 28px no-repeat!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    letter-spacing:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    font-family:inherit!important;
    font-weight:400!important;
    transform:translateX(-50%)!important;
  }
}


/* 2026-09-23 — FINAL desktop SHOP header responsiveness.
   Do NOT scale the desktop header/copy as a 1920px raster canvas. The header
   lives at the real viewport size; type/gaps/logo/cart get real responsive
   dimensions. This preserves glyph/logo proportions at every desktop width.
   Mobile <=900px is intentionally untouched. */
@media (min-width:901px){
  html body.shop-page.shared-chrome-page > #desktopHeader.site-header{
    position:fixed!important;
    left:0!important;
    top:0!important;
    right:0!important;
    width:100vw!important;
    height:clamp(60px,4.583vw,88px)!important;
    min-width:0!important;
    margin:0!important;
    padding:0 clamp(16px,1.458vw,28px)!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:flex-start!important;
    overflow:visible!important;
    transform:none!important;
    transform-origin:initial!important;
  }

  html body.shop-page.shared-chrome-page > #desktopHeader .nav-side,
  html body.shop-page.shared-chrome-page > #desktopHeader .nav-side.right{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    margin:clamp(17px,1.51vw,29px) 0 0!important;
    padding:0!important;
    gap:clamp(18px,3.43vw,66px)!important;
    transform:none!important;
    line-height:1!important;
  }
  html body.shop-page.shared-chrome-page > #desktopHeader .nav-side.right{
    margin-left:clamp(16px,2vw,38px)!important;
    gap:clamp(18px,3.33vw,64px)!important;
  }

  /* Live desktop words: resize the font itself; never stretch/squash a PNG. */
  html body.shop-page.shared-chrome-page > #desktopHeader .nav-side>a:not(.global-cart-icon){
    position:relative!important;
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    background:none!important;
    background-image:none!important;
    color:#050505!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(14px,1.042vw,20px)!important;
    font-weight:400!important;
    font-style:normal!important;
    font-stretch:normal!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    text-indent:0!important;
    transform:none!important;
    filter:none!important;
    text-rendering:geometricPrecision!important;
  }

  /* The brand keeps the exact 326:28 source proportion at every width. */
  html body.shop-page.shared-chrome-page > #desktopHeader .brand{
    position:absolute!important;
    left:50%!important;
    top:clamp(18px,1.51vw,29px)!important;
    width:clamp(216px,16.979vw,326px)!important;
    min-width:0!important;
    height:clamp(18.55px,1.458vw,28px)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:translateX(-50%)!important;
    transform-origin:center center!important;
    background:url("/assets/images/shop-brand-sharp-20261011.png") center/100% 100% no-repeat!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    letter-spacing:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }

  /* Cart participates in the right-side row instead of using a fixed 1920px X. */
  html body.shop-page.shared-chrome-page > #desktopHeader .global-cart-icon{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:block!important;
    flex:0 0 auto!important;
    width:clamp(22px,2.083vw,40px)!important;
    min-width:clamp(22px,2.083vw,40px)!important;
    height:clamp(24.75px,2.344vw,45px)!important;
    min-height:0!important;
    margin:clamp(10px,.729vw,14px) 0 0 auto!important;
    padding:0!important;
    transform:none!important;
    background:url("/assets/images/cart-icon-psd.png") center/100% 100% no-repeat!important;
  }
}


/* 2026-09-23 — SHOP desktop cart spacing ONLY.
   Keep every current header/logo/menu rule untouched; only reserve a clear
   horizontal gap between the cart icon and INSTAGRAM. Mobile is untouched. */
@media (min-width:901px){
  html body.shop-page.shared-chrome-page > #desktopHeader .global-cart-icon{
    margin-right:clamp(26px,2vw,40px)!important;
  }
  html body.shop-page.shared-chrome-page > #desktopHeader .nav-side.right{
    margin-left:0!important;
  }
}


/* 2026-09-23 — mobile SHOP product-copy weight only.
   Match the approved desktop product name/price weight without touching size,
   layout, media, header, cart or any other responsive behavior. */
@media (max-width:900px){
  html body.shop-page .product-name,
  html body.shop-page .product-price{
    font-family:"DD Oswald","Arial Narrow",Arial,sans-serif!important;
    font-weight:400!important;
    font-stretch:normal!important;
    font-style:normal!important;
    letter-spacing:0!important;
  }
}


/* =========================================================
   2026-09-29 — requested final resize/menu/footer corrections.
   - Every non-home desktop page uses the same live, proportional SHOP header.
   - No header axis is stretched separately when the viewport changes shape.
   - Mobile SHOP pager/legal remain at the page end (not over the products).
   ========================================================= */
@media (min-width:901px){
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader.site-header{
    position:fixed!important;
    left:0!important;top:0!important;right:0!important;
    width:100vw!important;height:clamp(60px,4.583vw,88px)!important;
    min-width:0!important;min-height:0!important;
    margin:0!important;padding:0 clamp(16px,1.458vw,28px)!important;
    box-sizing:border-box!important;
    display:flex!important;align-items:flex-start!important;
    overflow:visible!important;background:transparent!important;
    transform:none!important;transform-origin:initial!important;
    z-index:900!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .nav-side,
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .nav-side.right{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    display:flex!important;flex:0 0 auto!important;align-items:center!important;
    margin:clamp(17px,1.51vw,29px) 0 0!important;padding:0!important;
    gap:clamp(18px,3.43vw,66px)!important;
    transform:none!important;line-height:1!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .nav-side.right{
    margin-left:clamp(16px,2vw,38px)!important;
    gap:clamp(18px,3.33vw,64px)!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .nav-side>a:not(.global-cart-icon){
    position:relative!important;display:block!important;flex:0 0 auto!important;
    width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:0!important;
    background:none!important;background-image:none!important;
    color:#050505!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(14px,1.042vw,20px)!important;font-weight:400!important;font-style:normal!important;font-stretch:normal!important;
    line-height:1!important;letter-spacing:0!important;white-space:nowrap!important;
    text-indent:0!important;transform:none!important;filter:none!important;
    text-rendering:geometricPrecision!important;text-decoration:none!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .brand{
    position:absolute!important;left:50%!important;top:clamp(18px,1.51vw,29px)!important;
    width:clamp(216px,16.979vw,326px)!important;min-width:0!important;
    height:clamp(18.55px,1.458vw,28px)!important;min-height:0!important;
    margin:0!important;padding:0!important;
    transform:translateX(-50%)!important;transform-origin:center center!important;
    background:url("/assets/images/shop-brand-sharp-20261011.png") center/100% 100% no-repeat!important;
    color:transparent!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;
    text-indent:-9999px!important;overflow:hidden!important;white-space:nowrap!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .global-cart-icon{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    display:block!important;flex:0 0 auto!important;
    width:clamp(22px,2.083vw,40px)!important;min-width:clamp(22px,2.083vw,40px)!important;
    height:clamp(24.75px,2.344vw,45px)!important;min-height:0!important;
    margin:clamp(10px,.729vw,14px) 0 0 auto!important;padding:0!important;
    transform:none!important;filter:none!important;
    background:url("/assets/images/cart-icon-psd.png") center/100% 100% no-repeat!important;
  }
  /* Keep the same clear cart-to-INSTAGRAM spacing as SHOP. */
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .global-cart-icon + .nav-side.right{
    margin-left:clamp(28px,2.6vw,50px)!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader .shared-header-flyout{
    transform:none!important;
  }
}

@media (max-width:900px){
  html body.shop-page .shop-wrap{
    display:flex!important;
    flex-direction:column!important;
    min-height:calc(100dvh - 84px)!important;
    padding-bottom:0!important;
  }
  html body.shop-page .product-grid{flex:0 0 auto!important;}
  html body.shop-page .shop-footer{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    flex:0 0 auto!important;
    width:100%!important;height:auto!important;
    margin:auto auto 0!important;
    padding:32px 0 max(16px,env(safe-area-inset-bottom))!important;
    transform:none!important;background:transparent!important;
    overflow:visible!important;
  }
}

/* 2026-09-29 — canonical SHOP desktop header override.
   Older page-specific rules used raster menu words and stronger nth-child
   selectors.  Match those selectors here so every internal page renders the
   same live SHOP menu once, with no old artwork underneath it. */
@media (min-width:901px){
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader.site-header .nav-side:not(.right),
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader.site-header .nav-side.right{
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader.site-header .nav-side.right{
    margin-left:0!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader.site-header .global-cart-icon{
    margin:clamp(10px,.729vw,14px) clamp(26px,2vw,40px) 0 auto!important;
  }
  html body.shared-chrome-page:not(.shop-page) > #desktopHeader.site-header .nav-side > a:nth-child(n):not(.global-cart-icon){
    position:relative!important;
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;min-width:0!important;
    height:auto!important;min-height:0!important;
    margin:0!important;padding:0!important;
    background:none!important;background-image:none!important;
    background-color:transparent!important;
    color:#050505!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:clamp(14px,1.042vw,20px)!important;
    font-weight:400!important;font-style:normal!important;font-stretch:normal!important;
    line-height:1!important;letter-spacing:0!important;white-space:nowrap!important;
    text-indent:0!important;transform:none!important;filter:none!important;
    text-rendering:geometricPrecision!important;text-decoration:none!important;
  }
}