/* ═══════════════════════════════════════════════════════════
   REPPIN STUDIOS — product.css
   Product detail page. Requires base.css first.
   ═══════════════════════════════════════════════════════════ */

.breadcrumb{padding:20px 48px;margin-top:64px;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,232,.3);font-weight:500;animation:fadeUp .6s var(--ease-out-expo) .1s both}
.breadcrumb a{color:rgba(245,240,232,.35);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--cream)}
.breadcrumb .sep{opacity:0.55;font-size:14px;font-weight:600}
.breadcrumb .current{color:rgba(245,240,232,.6)}

.product-page{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 120px)}

/* ── Gallery ── */
.product-gallery{position:sticky;top:80px;height:calc(100vh - 80px);display:flex;overflow:hidden;animation:fadeUp .7s var(--ease-out-expo) .15s both;align-self:start}
.gallery-thumbs{width:88px;padding:24px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;border-right:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.3);position:relative;z-index:2}
.gallery-thumbs::-webkit-scrollbar{width:0}
.gallery-thumb{width:64px;height:64px;border:1px solid rgba(255,255,255,.06);background:var(--dark-card);cursor:pointer;transition:all .3s var(--ease-out-expo);overflow:hidden;flex-shrink:0;opacity:.5;padding:0}
.gallery-thumb:hover{opacity:.8;border-color:rgba(255,255,255,.15)}
.gallery-thumb.active{opacity:1;border-color:var(--red);box-shadow:0 0 12px rgba(196,18,48,.2)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-main{flex:1;position:relative;background:#fefefe;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:crosshair;z-index:1;transition:background .3s ease}
.gallery-main.dark-bg{background:var(--dark-card)}
.gallery-main-img{width:100%;height:100%;object-fit:contain;transition:opacity .4s ease;user-select:none;-webkit-user-drag:none;aspect-ratio:1/1}
.gallery-main-img.fill{object-fit:cover}
.zoom-container{position:absolute;inset:0;overflow:hidden;display:none;cursor:crosshair}
.zoom-container.active{display:block}
.zoom-img{width:100%;height:100%;object-fit:contain;pointer-events:none;transition:none;transform-origin:center center;transform:scale(2.5);aspect-ratio:1/1}
.zoom-img.fill{object-fit:cover}
.gallery-badge{position:absolute;top:20px;left:20px;z-index:2;font-size:9px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;padding:6px 14px;background:var(--accent);color:white}
.gallery-zoom-hint{position:absolute;bottom:20px;right:20px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,232,.3);font-weight:600;display:flex;align-items:center;gap:6px;transition:opacity .3s;pointer-events:none}
.gallery-zoom-hint svg{width:14px;height:14px;stroke:rgba(245,240,232,.3);fill:none;stroke-width:2}
.gallery-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.gallery-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.25);transition:all 0.3s ease;cursor:pointer;border:none;padding:0}
.gallery-dot.active{background:white;transform:scale(1.3)}

/* ── Details column ── */
.product-details{padding:48px 56px 80px;display:flex;flex-direction:column;animation:fadeUp .7s var(--ease-out-expo) .25s both;position:relative;z-index:10}
.pd-brand{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pd-brand::before{content:'';width:20px;height:1px;background:var(--red)}
.pd-name{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(28px,3.2vw,42px);line-height:1.1;letter-spacing:.01em;margin-bottom:6px;font-weight:400}
.pd-price{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--cream);letter-spacing:.02em;margin-bottom:12px}
.pd-tagline{font-size:13px;line-height:1.65;color:rgba(245,240,232,.5);font-weight:300;margin-bottom:28px}
.pd-section-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.45);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pd-section-label .label-value{color:rgba(245,240,232,.7);font-weight:400;letter-spacing:.1em}
.pd-color-swatches{display:flex;gap:10px;margin-bottom:28px}
.pd-swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;transition:all .3s var(--ease-out-expo);position:relative;border:2px solid transparent}
.pd-swatch::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;transition:border-color .3s}
.pd-swatch.active::after{border-color:var(--cream)}
.pd-swatch:hover{transform:scale(1.1)}
.pd-fit{margin-bottom:28px}
.pd-fit-options{display:flex;gap:10px;flex-wrap:wrap}
.pd-size.pd-fit-option{width:auto;padding:0 20px}
.pd-size-row{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.pd-sizes{display:flex;gap:10px}
.pd-size{width:56px;height:48px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.1em;font-weight:500;color:rgba(245,240,232,.5);cursor:pointer;transition:all .25s var(--ease-out-expo);background:transparent;font-family:'DM Sans',sans-serif}
.pd-size:hover{border-color:rgba(255,255,255,.3);color:var(--cream);background:rgba(255,255,255,.04)}
.pd-size.active{border-color:var(--cream);color:var(--cream);background:rgba(255,255,255,.06)}
.pd-cta-group{display:flex;gap:12px;margin-bottom:36px}
.btn-add-bag{flex:1;background:var(--red);color:white;padding:18px 32px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .35s var(--ease-out-expo);position:relative;overflow:hidden}
.btn-add-bag:hover{background:#e6163a;box-shadow:0 10px 32px rgba(196,18,48,.35);transform:translateY(-1px)}
.btn-add-bag:active{transform:translateY(0);box-shadow:none}
.btn-add-bag.added{background:#1a7a3a}
.btn-wishlist{width:56px;height:56px;border:1px solid rgba(255,255,255,.12);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;flex-shrink:0}
.btn-wishlist:hover{border-color:var(--red)}
.btn-wishlist svg{width:20px;height:20px;stroke:rgba(245,240,232,.5);fill:none;stroke-width:1.5;transition:all .2s}
.btn-wishlist:hover svg{stroke:var(--red)}
.btn-wishlist.liked svg{fill:var(--red);stroke:var(--red)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ── Accordions ── */
.pd-accordion{border-top:1px solid rgba(255,255,255,.06)}
.pd-accordion-item{border-bottom:1px solid rgba(255,255,255,.06)}
.pd-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer;transition:color .2s;user-select:none;width:100%;background:none;border:none;font-family:inherit;text-align:left}
.pd-accordion-header:hover{color:white}
.pd-accordion-title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:rgba(245,240,232,.7);transition:color .2s}
.pd-accordion-header:hover .pd-accordion-title{color:var(--cream)}
.pd-accordion-icon{width:24px;height:24px;position:relative;transition:transform .35s var(--ease-out-expo)}
.pd-accordion-icon::before,.pd-accordion-icon::after{content:'';position:absolute;background:rgba(245,240,232,.5);transition:all .35s var(--ease-out-expo)}
.pd-accordion-icon::before{width:12px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%)}
.pd-accordion-icon::after{width:1px;height:12px;top:50%;left:50%;transform:translate(-50%,-50%)}
.pd-accordion-item.open .pd-accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.pd-accordion-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease-out-expo),padding .45s var(--ease-out-expo)}
.pd-accordion-item.open .pd-accordion-body{max-height:500px}
.pd-accordion-content{padding-bottom:24px;font-size:13px;line-height:1.75;color:rgba(245,240,232,.55);font-weight:300}
.pd-accordion-content strong{color:rgba(245,240,232,.75);font-weight:500}

/* ── Toast ── */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--dark);border:1px solid rgba(255,255,255,.08);padding:16px 28px;font-size:13px;color:var(--cream);display:flex;align-items:center;gap:10px;z-index:9998;opacity:0;transition:all .4s var(--ease-out-expo);box-shadow:0 16px 48px rgba(0,0,0,.6);font-weight:400}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast-check{width:20px;height:20px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.toast-check svg{width:12px;height:12px;stroke:white;fill:none;stroke-width:2.5}

/* ── Responsive ── */
@media(max-width:1024px){
  .product-page{grid-template-columns:1fr}
  .product-gallery{position:relative;top:0;height:auto;min-height:500px;max-height:70vh}
  .product-details{padding:40px 32px 80px}
}
@media(max-width:768px){
  .breadcrumb{padding:12px 20px;margin-top:56px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
  .breadcrumb::-webkit-scrollbar{display:none}
  .product-gallery{flex-direction:column-reverse;min-height:400px;max-height:55vh}
  .gallery-thumbs{flex-direction:row;width:100%;height:72px;padding:8px 16px;border-right:none;border-top:1px solid rgba(255,255,255,.04);overflow-x:auto;overflow-y:hidden}
  .gallery-thumb{width:52px;height:52px;flex-shrink:0}
  .product-details{padding:28px 20px 80px}
  .pd-name{font-size:28px}
  .pd-price{font-size:28px}
  .pd-sizes{gap:8px}
  .pd-size{width:48px;height:42px;font-size:11px}
}
@media(max-width:480px){
  .gallery-zoom-hint{display:none}
  .pd-cta-group{flex-direction:column}
  .btn-wishlist{width:100%;height:48px}
}