/* 6.14.6 wide desktop shell + Amazon gallery */
html body.dtc-c{--c28-max:1680px;--c28-pad:32px}
@media (max-width:800px){html body.dtc-c{--c28-pad:16px}}

/* Main storefront container and DTC wraps */
html body.dtc-c .container{max-width:var(--c28-max)!important;width:100%!important;padding-left:var(--c28-pad)!important;padding-right:var(--c28-pad)!important;box-sizing:border-box}
html body.dtc-c .dtc-wrap,html body.dtc-c .dtc-bar-track{max-width:var(--c28-max)}
html body.dtc-c .dtc-wrap--narrow{max-width:820px}

/* Header, utility bar, sticky header, footer — same track as the content */
html body.dtc-c #header-c .header-container,
html body.dtc-c #header-c-sticky .header-container,
html body.dtc-c .c28-util-in,
html body.dtc-c #header-c .navUser .container.customs,
html body.dtc-c #header-c .navUser-section,
html body.dtc-c #header-c .navUser .navUser-section,
html body.dtc-c footer.footer .footer-middle,
html body.dtc-c .hr-trust,
html body.dtc-c .home-section--about,
html body.dtc-c .hbh,
html body.dtc-c .cb-in{max-width:var(--c28-max)!important;box-sizing:border-box}
html body.dtc-c #header-c .header-container,
html body.dtc-c #header-c-sticky .header-container,
html body.dtc-c .c28-util-in{padding-left:var(--c28-pad)!important;padding-right:var(--c28-pad)!important}

/* Info hubs: widen the layout/cards, keep intro prose from going edge-to-edge */
html body.dtc-c .info-hub,
html body.dtc-c .info-layout,
html body.dtc-c .info-subpages,
html body.dtc-c .info-page .c9-gr-sec.c9-gr-page{max-width:var(--c28-max)}
html body.dtc-c .info-main{max-width:none}
html body.dtc-c .info-main > .page-content > :is(p,h2,h3,h4,ol,ul,div):not(.taba):not(.info-pcards):not(.info-subpages):not(.info-pcard){max-width:760px}
html body.dtc-c.page-faqs .info-main > .page-content{max-width:none}

/* Blog list can use the wider shell; the post article stays a readable measure (fix6 already 760px) */

/* Category grids: one more column on very wide screens */
@media (min-width:1600px){
  html body.dtc-c.c5-nofacets #product-listing-container .productGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  html body.dtc-c:not(.c5-nofacets) #product-listing-container .productGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Mega menu can follow the new shell */
@media (min-width:801px){
  html body.dtc-c #header-c #menu .navPage-subMenu:has(.navPage-subMenu-item--has-image){width:min(1680px,calc(100vw - 64px))!important}
}

/* PDP: slightly wider image column on large screens (buy panel still solid) */
@media (min-width:801px){
  html body.dtc-c .pdp-b-row > .productView-images-container{flex:0 0 58%;width:58%!important}
  html body.dtc-c .pdp-b-row > .product-rightside-content{flex:0 0 40%;width:40%!important}
}
@media (min-width:1600px){
  html body.dtc-c .pdp-b-row > .productView-images-container{flex:0 0 60%;width:60%!important}
  html body.dtc-c .pdp-b-row > .product-rightside-content{flex:0 0 38%;width:38%!important}
}

/* 6.14.6 Amazon-style gallery: desktop thumbs in a left column; lightbox; +N overflow */
.pdp-gal-hint{display:none}
.pdp-thumb-more{display:none}
.pdp-lb[hidden]{display:none!important}

@media (min-width:801px){
  /* Beat earlier .pdp-b-row > .productView-images-container{display:block !important} — the gallery IS that container. */
  html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery,
  html body.dtc-c .pdp-b-gallery{
    display:grid!important;grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:start
  }
  html body.dtc-c .pdp-b-gallery > .pdp-thumbs{
    grid-column:1;grid-row:1;display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    gap:8px;margin:0!important;width:72px;padding:0;
  }
  html body.dtc-c .pdp-b-gallery > .pdp-thumbs[hidden],
  html body.dtc-c .pdp-b-gallery > .pdp-thumbs:has(> :only-child){display:none!important}
  html body.dtc-c .pdp-b-gallery > .pdp-gal-main{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  html body.dtc-c .pdp-b-gallery > .productView-images{grid-column:2;grid-row:1;min-width:0}
  html body.dtc-c .pdp-b-gallery > .pdp-gal-hint{grid-column:2;grid-row:2}
  html body.dtc-c .pdp-b-gallery > .pdp-gal-count,
  html body.dtc-c .pdp-b-gallery > .pdp-dots{display:none!important}
  html body.dtc-c .pdp-b-gallery > .product-slider{grid-column:1/-1;grid-row:2}
  html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery.pdp-b-gal-single,
  html body.dtc-c .pdp-b-gallery.pdp-b-gal-single{grid-template-columns:minmax(0,1fr)!important}
  html body.dtc-c .pdp-b-gallery.pdp-b-gal-single > .pdp-gal-main,
  html body.dtc-c .pdp-b-gallery.pdp-b-gal-single > .productView-images,
  html body.dtc-c .pdp-b-gallery.pdp-b-gal-single > .pdp-gal-hint{grid-column:1}
  /* single image or hidden thumbs: no left column */
  html body.dtc-c .pdp-b-row > .productView-images-container.pdp-b-gallery:has(> .pdp-thumbs[hidden]),
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs[hidden]),
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:not(:has(.pdp-thumb))),
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:has(> :only-child)){grid-template-columns:minmax(0,1fr)!important}
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs[hidden]) > .productView-images,
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs[hidden]) > .pdp-gal-hint,
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:not(:has(.pdp-thumb))) > .productView-images,
  html body.dtc-c .pdp-b-gallery:has(> .pdp-thumbs:not(:has(.pdp-thumb))) > .pdp-gal-hint{grid-column:1}

  html body.dtc-c .pdp-b-gallery .pdp-thumb{
    position:relative;flex:0 0 auto;width:64px;height:64px;padding:2px;box-sizing:border-box;
    border:2px solid #ECE5EE;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s
  }
  html body.dtc-c .pdp-b-gallery .pdp-thumb img{width:100%;height:100%;object-fit:contain;border-radius:5px;display:block}
  html body.dtc-c .pdp-b-gallery .pdp-thumb:hover{border-color:#b9a3c4}
  html body.dtc-c .pdp-b-gallery .pdp-thumb.is-active{border-color:#713592;box-shadow:0 0 0 2px rgba(113,53,146,.25)}
  html body.dtc-c .pdp-b-gallery .pdp-thumb.is-active::after{display:none!important}
  html body.dtc-c .pdp-b-gallery .pdp-thumb:focus-visible{outline:2px solid #462C59;outline-offset:2px}
  html body.dtc-c .pdp-b-gallery .pdp-thumbs.is-capped .pdp-thumb.pdp-thumb--overflow{display:none}
  html body.dtc-c .pdp-b-gallery .pdp-thumb-more{
    display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:0;
    border:2px solid #ECE5EE;border-radius:8px;background:#F7F2EA;color:#462C59;
    font:600 15px/1 Jost,sans-serif;cursor:pointer
  }
  html body.dtc-c .pdp-b-gallery .pdp-thumb-more:hover,
  html body.dtc-c .pdp-b-gallery .pdp-thumb-more:focus-visible{border-color:#713592;color:#713592;outline:0}
  html body.dtc-c .pdp-gal-hint{
    display:inline-block;margin:0;padding:0;border:0;background:none;cursor:pointer;
    font:500 14px/1.4 Jost,sans-serif;color:#713592;text-align:left;text-decoration:underline;text-underline-offset:3px
  }
  html body.dtc-c .pdp-gal-hint:hover,html body.dtc-c .pdp-gal-hint:focus-visible{color:#462C59;outline:0}
  /* keep the original hidden theme thumbs out of the way */
  html body.dtc-c .pdp-b-gallery .productView-images > .productView-thumbnails{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
}

@media (max-width:800px){
  /* hint sits under the swipe + thumb row; keep it compact so it doesn't collide with Add to Cart */
  html body.dtc-c .pdp-gal-hint{
    display:block;width:100%;margin:4px 0 0;padding:0;border:0;background:none;cursor:pointer;
    font:500 13px/1.4 Jost,sans-serif;color:#713592;text-align:center;text-decoration:underline;text-underline-offset:3px
  }
  html body.dtc-c .pdp-thumb-more{display:none!important}
}

/* Lightbox */
.pdp-lb{position:fixed;inset:0;z-index:200000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(36,26,43,.94);padding:24px 16px 32px;box-sizing:border-box}
.pdp-lb-stage{position:relative;max-width:min(1200px,100%);max-height:calc(100vh - 96px);display:flex;align-items:center;justify-content:center}
.pdp-lb-stage img{display:block;max-width:100%;max-height:calc(100vh - 96px);width:auto;height:auto;object-fit:contain;background:#fff;border-radius:8px}
.pdp-lb-video{width:min(960px,100vw - 32px);aspect-ratio:16/9;max-height:calc(100vh - 96px);background:#000;border-radius:8px;overflow:hidden}
.pdp-lb-video iframe{width:100%;height:100%;border:0;display:block}
.pdp-lb-close,.pdp-lb-prev,.pdp-lb-next{position:absolute;border:0;background:#fff;color:#462C59;cursor:pointer;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.pdp-lb-close{top:16px;right:16px;position:fixed;font-size:24px;line-height:1}
.pdp-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.pdp-lb-next{right:12px;top:50%;transform:translateY(-50%)}
.pdp-lb-close:hover,.pdp-lb-prev:hover,.pdp-lb-next:hover,
.pdp-lb-close:focus-visible,.pdp-lb-prev:focus-visible,.pdp-lb-next:focus-visible{background:#F7F2EA;outline:2px solid #713592;outline-offset:2px}
.pdp-lb-count{margin:12px 0 0;color:#fff;font:500 14px/1.3 Jost,sans-serif}
.pdp-lb-prev[hidden],.pdp-lb-next[hidden]{display:none!important}
@media (max-width:800px){
  .pdp-lb-prev,.pdp-lb-next{width:36px;height:36px}
  .pdp-lb{padding:56px 8px 24px}
}