/* UNIT365 Premium PDP Layer (Cold-culture inspired) */
:root{
  --pdp-bg:#ffffff;
  --pdp-surface:#ffffff;
  --pdp-text:#101114;
  --pdp-muted:#686d75;
  --pdp-line:#e7e9ee;
  --pdp-stage:#f6f6f7;
}

html,body{background:var(--pdp-bg);color:var(--pdp-text)}

.container{width:min(1360px,calc(100% - 28px))}

.pdp-main{padding:6px 0 20px}

/* Match homepage brand mark scale */
.brand{
  font-size: 1.34rem !important;
  letter-spacing: 0.28em !important;
}

/* Reactive transparent PDP header (Represent-style behavior) */
.site-header{
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .24s ease, border-color .24s ease, backdrop-filter .24s ease;
}

.site-header.is-scrolled{
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: var(--pdp-line) !important;
  backdrop-filter: blur(8px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}

.pdp-grid{
  grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr) !important;
  gap:16px !important;
  align-items:start;
}

.media-col{gap:10px}

.gallery{
  border:0 !important;
  background:var(--pdp-stage) !important;
  contain: layout paint;
}

.gallery-slide{aspect-ratio:4/5 !important}
.gallery-slide img{
  object-fit:cover !important;
  padding:0 !important;
}

.gallery-btn{
  width:28px !important;
  height:40px !important;
  padding:0 !important;
  border-radius:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#2c3036 !important;
  box-shadow:none !important;
  opacity:.92 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}
.gallery-btn:hover{
  background:transparent !important;
  color:#1f2329 !important;
  transform:translateY(-50%) !important;
}

.gallery-btn svg{
  width:16px !important;
  height:16px !important;
  stroke-width:1.55 !important;
}

.thumbs{gap:6px !important}
.thumbs button{
  border:1px solid #dde1e7 !important;
  background:#fff !important;
}
.thumbs img{
  width:54px !important;
  height:70px !important;
  object-fit:cover !important;
}

.details{
  position:sticky !important;
  top:82px !important;
  background:transparent !important;
  padding:0 !important;
  contain: layout paint;
}

.crumbs,.quick-meta{display:none !important}

.eyebrow{
  margin:0 0 5px !important;
  font-size:.64rem !important;
  letter-spacing:.16em !important;
  color:#727783 !important;
}

.pdp-title{
  margin:0 !important;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
  font-size:clamp(1.12rem,1.3vw,1.4rem) !important;
  line-height:1.28 !important;
}

.price{
  margin:10px 0 12px !important;
  padding-bottom:11px !important;
  border-bottom:1px solid var(--pdp-line) !important;
}
.price .now{
  font-size:clamp(1.34rem,1.55vw,1.56rem) !important;
  font-weight:700 !important;
}
.price .was{
  color:#9ca2ab !important;
  font-size:.88rem !important;
}

.urgency-strip{
  margin:0 0 10px !important;
  padding:8px 11px !important;
  border:1px solid #f2e0c3 !important;
  background:#fdf8ef !important;
  color:#6a4300 !important;
  font-size:.7rem !important;
  letter-spacing:.08em !important;
}

.bullets{
  margin:0 !important;
  padding-left:16px !important;
  gap:7px !important;
  font-size:.88rem !important;
  line-height:1.52 !important;
  color:#20242a !important;
}

.desc{
  margin:10px 0 10px !important;
  font-size:.9rem !important;
  line-height:1.54 !important;
  color:#4e545e !important;
}

.variant-group{margin:9px 0 !important}
.variant-label{
  margin:0 0 7px !important;
  font-size:.68rem !important;
  letter-spacing:.11em !important;
  color:#5f6771 !important;
}
.variant-value{font-size:.84rem !important}

.color-grid{
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr)) !important;
  gap:7px !important;
}
.color-tile{
  max-width:86px !important;
  height:86px !important;
  border:1px solid #dce0e6 !important;
  background:#f7f7f8 !important;
}
.color-tile.is-active{
  border-color:#111 !important;
  box-shadow:inset 0 0 0 1px #111 !important;
}

.size-strip{gap:0 !important}
.size-btn{
  min-width:82px !important;
  height:44px !important;
  margin-left:-1px !important;
  border:1px solid #dde1e7 !important;
  font-size:.9rem !important;
  font-weight:500 !important;
}
.size-btn:first-child{margin-left:0 !important}
.size-btn.is-active{
  border-color:#111 !important;
  box-shadow:inset 0 0 0 1px #111 !important;
}

.meta-row{
  margin:8px 0 8px !important;
  font-size:.8rem !important;
}
.size-guide-link{
  font-size:.84rem !important;
  font-weight:500 !important;
}

.purchase-row{margin-top:6px !important}
.cta{gap:8px !important;margin-top:8px !important}

.btn{
  min-height:56px !important;
  border-radius:0 !important;
  font-size:.84rem !important;
  letter-spacing:.09em !important;
  font-weight:700 !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease !important;
}
.btn-cart{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  z-index:0 !important;
  background:#fff !important;
  color:#111 !important;
  border:1px solid #d7dbe2 !important;
  transition:color .24s ease !important;
}

.btn-cart::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:#111 !important;
  transform:scaleX(0) !important;
  transform-origin:right !important;
  transition:transform .24s ease !important;
  z-index:-1 !important;
}

.btn-cart:hover::before{
  transform:scaleX(1) !important;
  transform-origin:left !important;
}

.btn-cart:hover{
  color:#fff !important;
  border-color:#111 !important;
}

.btn-buy{
  background:#101113 !important;
  color:#fff !important;
  border:1px solid var(--pdp-line) !important;
}

.btn-buy:hover{
  background:#060708 !important;
  border-color:var(--pdp-line) !important;
}

/* Drawer checkout button animation */
#checkoutBtn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  transition:color .22s ease, border-color .22s ease !important;
}

#checkoutBtn::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:#fff !important;
  transform:scaleX(0) !important;
  transform-origin:left !important;
  transition:transform .22s ease !important;
  z-index:-1 !important;
}

#checkoutBtn:hover::before{
  transform:scaleX(1) !important;
}

#checkoutBtn:hover{
  color:#111 !important;
  border-color:#111 !important;
}

.finance-note{
  margin:0 !important;
  font-size:.76rem !important;
  color:#646b75 !important;
}

.buy-assurance,
.secure-line{
  margin-top:9px !important;
  font-size:.74rem !important;
  color:#606872 !important;
}

.reviews-snaps{
  margin-top:8px !important;
  padding:9px 10px !important;
  border:1px solid var(--pdp-line) !important;
}
.reviews-title{
  font-size:.71rem !important;
  color:#535b66 !important;
}
.reviews-list li{
  font-size:.76rem !important;
  line-height:1.35 !important;
  color:#3f4752 !important;
}
.reviews-meta{font-size:.68rem !important}

.details-compact{
  margin-top:8px !important;
  border-top:1px solid var(--pdp-line) !important;
}
.details-compact .accord{
  border:0 !important;
  border-bottom:1px solid var(--pdp-line) !important;
  background:transparent !important;
}
.details-compact .accord > summary{
  min-height:50px !important;
  padding:0 1px !important;
  font-size:.78rem !important;
  letter-spacing:.08em !important;
  color:#1b2027 !important;
}
.details-compact .accord > summary::after{
  font-size:1rem !important;
}
.details-compact .accord > ul,
.details-compact .accord > div{padding:3px 1px 12px !important}

.sg-inline__wrap,
.sg-inline__toggle,
.sg-inline__table th,
.sg-inline__table td{
  border-color:#e3e6eb !important;
}
.sg-inline__table{
  font-size:.82rem !important;
}

.recs{margin-top:18px !important;padding-top:14px !important}
.recs-grid{gap:9px !important}
.recs,
.reviews-snaps,
.details-compact{
  content-visibility:auto;
  contain-intrinsic-size: 1px 520px;
}

/* Desktop alignment: media flush-left, details remains structured on right */
@media (min-width: 981px){
  .pdp-main.container{
    width:min(1360px,calc(100% - 36px)) !important;
    max-width:1360px !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .pdp-grid{
    width:100% !important;
    grid-template-columns:minmax(540px,780px) minmax(360px,470px) !important;
    justify-content:center !important;
    gap:28px !important;
    align-items:start !important;
    padding-right:0 !important;
  }

  .media-col{
    width:100% !important;
    padding-left:0 !important;
  }

  .gallery-wrap,
  .gallery-shell,
  .gallery,
  .gallery-track{
    width:100% !important;
  }

  .gallery-slide{ aspect-ratio: 4 / 5 !important; }

  .details{
    position:sticky !important;
    top:88px !important;
    margin-right:0 !important;
    padding-right:0 !important;
  }
}

@media (max-width: 980px){
  .container{width:min(100%,calc(100% - 18px))}

  .pdp-grid{grid-template-columns:1fr !important;gap:11px !important}

  .details{position:static !important;top:auto !important}

  .gallery{
    border:1px solid #e6e8ed !important;
    border-radius:0 !important;
  }
  .gallery-slide{aspect-ratio:4/5 !important}
  .gallery-slide img{
    object-fit:cover !important;
    padding:0 !important;
  }

  /* Restore clickable thumbnails under main image on mobile */
  .thumbs{
    display:flex !important;
    order:2 !important;
    overflow-x:auto !important;
    gap:6px !important;
    padding-top:6px !important;
  }

  .thumbs button{
    border-radius:0 !important;
    border:1px solid #dde1e7 !important;
    background:#fff !important;
  }

  .thumbs img{
    width:48px !important;
    height:62px !important;
    object-fit:cover !important;
    border-radius:0 !important;
  }

  .gallery-meta{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:8px 10px 7px !important;
    border-top:1px solid #eaedf1 !important;
    background:#fff !important;
  }

  .gallery-counter{
    font-size:.67rem !important;
    letter-spacing:.08em !important;
  }

  .pdp-title{font-size:1.08rem !important}
  .price .now{font-size:1.3rem !important}

  .variant-label{font-size:.65rem !important}

  .color-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .color-tile{max-width:none !important;height:72px !important}

  .size-btn{min-width:68px !important;height:42px !important;font-size:.85rem !important}

  .btn{min-height:48px !important;font-size:.8rem !important}

  .details-compact .accord > summary{
    min-height:48px !important;
    font-size:.74rem !important;
  }

  .reviews-list li{font-size:.74rem !important}

  .gallery-btn{
    box-shadow:none !important;
  }
}

@media (max-width: 700px){
  .brand{
    font-size: 1.02rem !important;
    letter-spacing: 0.22em !important;
  }
}

@media (hover:none) and (pointer:coarse){
  .gallery-btn,
  .btn-cart::before,
  #checkoutBtn::before{
    transition:none !important;
  }

  .btn-cart:hover::before,
  #checkoutBtn:hover::before{
    transform: none !important;
  }
}

/* Final PDP Premium Refinement */
.pdp-main{
  padding:8px 0 18px !important;
}

.pdp-main.container{
  width:min(1360px,calc(100% - 30px)) !important;
}

.pdp-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(370px,.82fr) !important;
  gap:22px !important;
}

.gallery{
  border:1px solid #e5e8ed !important;
  background:#f4f5f6 !important;
}

.media-col{
  gap:8px !important;
}

.gallery-btn{
  width:22px !important;
  height:34px !important;
  color:#373e47 !important;
  opacity:.84 !important;
  background:transparent !important;
}

.gallery-btn svg{
  width:13px !important;
  height:13px !important;
  stroke-width:1.45 !important;
}

.details{
  top:82px !important;
}

.eyebrow{
  font-size:.63rem !important;
  letter-spacing:.16em !important;
}

.pdp-title{
  font-size:clamp(1.16rem,1.3vw,1.44rem) !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  line-height:1.26 !important;
}

.price{
  margin:10px 0 13px !important;
  padding-bottom:12px !important;
}

.price .now{
  font-size:clamp(1.34rem,1.58vw,1.6rem) !important;
  font-weight:650 !important;
}

.bullets{
  font-size:.9rem !important;
  line-height:1.56 !important;
}

.desc{
  margin:11px 0 11px !important;
  font-size:.9rem !important;
  line-height:1.57 !important;
}

.variant-label{
  font-size:.67rem !important;
  letter-spacing:.11em !important;
}

.size-btn{
  min-width:78px !important;
  height:44px !important;
  font-size:.88rem !important;
}

.btn{
  min-height:52px !important;
  font-size:.81rem !important;
  letter-spacing:.08em !important;
}

.reviews-snaps{
  margin-top:7px !important;
  background:#fff !important;
  border-color:#e5e8ed !important;
  border-radius:0 !important;
}

.reviews-list li{
  font-size:.75rem !important;
  line-height:1.4 !important;
}

.details-compact .accord > summary{
  min-height:50px !important;
  font-size:.76rem !important;
  letter-spacing:.08em !important;
  font-weight:700 !important;
}

.secure-line{
  font-size:.73rem !important;
  letter-spacing:.01em !important;
  color:#5e6672 !important;
}

.recs{
  margin-top:18px !important;
  padding-top:16px !important;
}

@media (max-width:980px){
  .container{
    width:min(100%,calc(100% - 14px)) !important;
  }

  .pdp-main{
    padding-top:7px !important;
  }

  .pdp-main.container{
    width:min(100%,calc(100% - 14px)) !important;
  }

  .pdp-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .details{
    position:static !important;
    top:auto !important;
  }

  .gallery-btn{
    width:20px !important;
    height:30px !important;
  }

  .thumbs{
    gap:6px !important;
    padding-top:6px !important;
  }

  .pdp-title{
    font-size:1.04rem !important;
  }

  .price .now{
    font-size:1.22rem !important;
  }

  .color-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .color-tile{
    max-width:none !important;
    height:70px !important;
  }

  .size-btn{
    min-width:66px !important;
    height:42px !important;
    font-size:.84rem !important;
  }

  .btn{
    min-height:48px !important;
    font-size:.79rem !important;
  }

  .thumbs img{
    width:48px !important;
    height:62px !important;
  }
}

@media (max-width:700px){
  .brand{
    font-size:1rem !important;
    letter-spacing:.2em !important;
  }
}

/* ===== Final Professional PDP Pass (desktop + mobile) ===== */
.site-header{
  height:60px !important;
}

.site-header.is-scrolled{
  background:rgba(255,255,255,.96) !important;
}

.pdp-main{
  padding-top:6px !important;
}

.pdp-title{
  font-size:clamp(1.22rem,1.55vw,1.68rem) !important;
  font-weight:700 !important;
  line-height:1.22 !important;
}

.price .now{
  font-size:clamp(1.42rem,1.82vw,1.84rem) !important;
  font-weight:700 !important;
}

.btn{
  min-height:54px !important;
  letter-spacing:.085em !important;
}

.btn-buy{
  border-color:#111 !important;
}

.details-compact .accord > summary{
  letter-spacing:.07em !important;
}

/* Keep product media dominant and make thumbnail click-flow faster on desktop */
@media (min-width: 981px){
  .pdp-grid{
    grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr) !important;
    gap:22px !important;
  }

  .gallery-shell{
    display:block !important;
  }

  .gallery{
    width:100% !important;
    border:1px solid #e4e8ef !important;
    background:#f4f5f7 !important;
  }

  .gallery-slide{
    aspect-ratio:4 / 5 !important;
  }

  .thumbs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:8px !important;
    padding-top:10px !important;
    scrollbar-width:none !important;
  }

  .thumbs::-webkit-scrollbar{
    display:none !important;
  }

  .thumbs button{
    flex:0 0 auto !important;
    border:1px solid #d7dde6 !important;
    border-radius:0 !important;
    background:#fff !important;
  }

  .thumbs img{
    width:64px !important;
    height:84px !important;
    object-fit:cover !important;
    border-radius:0 !important;
  }

  .thumbs .is-active{
    border-color:#111 !important;
    box-shadow:inset 0 0 0 1px #111 !important;
  }

  .details{
    top:76px !important;
  }
}

@media (max-width: 980px){
  .pdp-main.container{
    width:min(100%,calc(100% - 12px)) !important;
  }

  .gallery{
    border:1px solid #e5e8ed !important;
    border-radius:0 !important;
  }

  .gallery-slide{
    aspect-ratio:4 / 5 !important;
  }

  .thumbs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:6px !important;
    padding-top:7px !important;
    scrollbar-width:none !important;
  }

  .thumbs::-webkit-scrollbar{
    display:none !important;
  }

  .thumbs button{
    border:1px solid #dce1e8 !important;
    border-radius:0 !important;
  }

  .thumbs img{
    width:52px !important;
    height:68px !important;
    object-fit:cover !important;
    border-radius:0 !important;
  }

  .pdp-title{
    font-size:1.06rem !important;
  }

  .price .now{
    font-size:1.24rem !important;
  }

  .btn{
    min-height:48px !important;
  }
}

/* Brand size lock: match landing page wordmark scale */
:root{
  --unit365-brand-desktop: clamp(1.30rem, 1.55vw, 1.44rem);
  --unit365-brand-mobile: 1.08rem;
  --unit365-brand-mobile-tight: 1.03rem;
  --unit365-brand-tracking-desktop: .25em;
  --unit365-brand-tracking-mobile: .22em;
}

.brand{
  font-size: var(--unit365-brand-desktop) !important;
  letter-spacing: var(--unit365-brand-tracking-desktop) !important;
  font-weight: 800 !important;
}

@media (max-width:700px){
  .brand{
    font-size: var(--unit365-brand-mobile) !important;
    letter-spacing: var(--unit365-brand-tracking-mobile) !important;
  }
}

@media (max-width:420px){
  .brand{
    font-size: var(--unit365-brand-mobile-tight) !important;
    letter-spacing: .20em !important;
  }
}

/* Gallery lock: keep thumbs under main image + counter inside gray stage */
.gallery-shell{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:10px !important;
}

.gallery{
  order:1 !important;
  position:relative !important;
}

.thumbs{
  order:2 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
}

.gallery-meta{
  display:flex !important;
  position:absolute !important;
  left:12px !important;
  bottom:12px !important;
  z-index:3 !important;
  align-items:center !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}

.gallery-dots,
#galleryDots,
.gallery-dot{
  display:none !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.gallery-counter{
  font-size:.74rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#1f242b !important;
  font-weight:700 !important;
}

@media (max-width:980px){
  .gallery-meta{
    left:10px !important;
    bottom:10px !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
  }
}

/* Tiny desktop height trim for main product image stage */
@media (min-width:981px){
  .gallery-slide{
    aspect-ratio: 4 / 4.9 !important;
  }
}