/* ============================================
   ChillaxPrints — Shop & Product page styles
   Builds on styles.css
   ============================================ */

/* Promo strip */
.promo-strip{
  background:var(--orange);color:var(--white);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;
  overflow:hidden;padding:10px 0;
  position:relative;z-index:55;
}
.promo-track{display:flex;gap:60px;width:max-content;animation: scrollX 38s linear infinite;white-space:nowrap}
.promo-track span{display:inline-flex;align-items:center;gap:60px}
.promo-track .star{font-size:13px}

/* Adjust nav to sit below promo */
body.has-promo .nav{top:38px}
body.has-promo .hero-meta{top:130px}

/* Page hero (smaller than landing hero) */
.page-hero{
  background:var(--black);color:var(--white);
  padding: 160px var(--pad) 80px;
  position:relative;overflow:hidden;
  text-align:center;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(255,107,53,.18), transparent 60%),
    radial-gradient(600px 300px at 10% 100%, rgba(255,107,53,.1), transparent 70%);
}
.page-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.page-hero .crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin-bottom:18px;
}
.page-hero .crumbs a{color:var(--orange)}
.page-hero h1{
  font-family:var(--display);font-weight:400;
  font-size: clamp(72px, 11vw, 180px);
  line-height:.9;text-transform:uppercase;letter-spacing:-.01em;
  margin-bottom:18px;
}
.page-hero h1 .accent{color:var(--orange)}
.page-hero p{max-width:560px;margin:0 auto;color:rgba(255,255,255,.75);font-size:16px;line-height:1.5}

/* Sticker tags - playful */
.sticker{
  position:absolute;top:14px;left:14px;z-index:3;
  background:var(--orange);color:var(--white);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;
  transform:rotate(-3deg);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.sticker.dark{background:var(--black)}
.sticker.cream{background:#FFE8C2;color:var(--black)}
.sticker.lime{background:#D4FF6B;color:var(--black)}
.sticker.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--white)}
.sticker.dark.dot::before{background:var(--orange)}

/* Shop toolbar */
.shop-tools{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
  padding: 32px 0 24px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.shop-tools .left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.shop-tools .count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.shop-tools .count b{color:var(--black);font-weight:700}

.refine-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border:1px solid var(--black);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.refine-btn:hover{background:var(--black);color:var(--white)}
.refine-btn .emoji{font-size:14px}

.sort{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.sort select{
  background:transparent;border:none;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  outline:none;cursor:pointer;font-weight:600;
}

/* Category chips inline */
.cat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.cat-row .filter{padding:8px 14px;font-size:10px}

/* SHOP CARD — flip on hover to see back */
.shop-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px 18px;
}
@media (max-width:1100px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}}

.shop-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  cursor:pointer;
}
.shop-card .flip{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--soft);
  perspective: 1200px;
}
.flip-inner{
  position:absolute;inset:0;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
}
.shop-card:hover .flip-inner{ transform: rotateY(180deg); }
.face{
  position:absolute;inset:0;backface-visibility:hidden;
  background-size:cover;background-position:center;
}
.face.back{ transform: rotateY(180deg); background-color:#1a1a1a; }

/* Quick add — slides up from bottom on hover */
.shop-card .quick-row{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:4;
  display:flex;gap:6px;
  opacity:0;transform:translateY(8px);transition:opacity .3s, transform .3s;
  pointer-events:none;
}
.shop-card:hover .quick-row{opacity:1;transform:none;pointer-events:auto}
.shop-card .quick-row button{
  flex:1;padding:11px 8px;background:var(--white);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  transition:background .2s, color .2s;
}
.shop-card .quick-row button:hover{background:var(--orange);color:var(--white)}
.shop-card .quick-row button.dark{background:var(--black);color:var(--white)}
.shop-card .quick-row button.dark:hover{background:var(--orange)}

/* Heart on card */
.shop-card .fav{
  position:absolute;top:12px;right:12px;z-index:4;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95);display:grid;place-items:center;
  transition:transform .2s, background .2s;
}
.shop-card .fav:hover{transform:scale(1.1)}
.shop-card .fav svg{width:15px;height:15px;stroke:var(--black);fill:none;stroke-width:1.6}
.shop-card.fav-on .fav svg{fill:var(--orange);stroke:var(--orange)}

/* Card meta */
.shop-card .meta{padding:0 2px;display:flex;flex-direction:column;gap:6px}
.shop-card .name{font-weight:600;font-size:14.5px;color:var(--black);line-height:1.3}
.shop-card .price-row{display:flex;justify-content:space-between;align-items:center}
.shop-card .price{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--black)}
.shop-card .price .strike{opacity:.4;text-decoration:line-through;margin-left:8px;font-weight:400}
.shop-card .swatches{display:flex;gap:4px}
.shop-card .swatch{
  width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.08);
}
.shop-card .rating{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink);display:flex;align-items:center;gap:6px}
.shop-card .rating .stars{color:var(--orange)}

/* Hint behind back face */
.face.back{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:var(--white);padding:24px;text-align:center;
}
.face.back .back-graffiti{
  font-family:var(--display);font-size:clamp(40px,5vw,72px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.01em;
  -webkit-text-stroke:2px var(--orange);color:transparent;
  transform:rotate(-4deg);
}
.face.back .back-graffiti.solid{color:var(--orange);-webkit-text-stroke:0}
.face.back .back-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.6;margin-top:14px;
}

/* Pagination */
.paginate{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin-top:64px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.paginate .pg{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);transition:all .2s;cursor:pointer;
}
.paginate .pg:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.paginate .pg.on{background:var(--orange);border-color:var(--orange);color:var(--white)}
.paginate .pg.arrow{padding:0 14px;width:auto;gap:6px}

/* "Pourquoi nous" tri-card */
.why{
  background:var(--soft);padding: clamp(80px,10vh,120px) 0;
  text-align:center;
}
.why h2{font-family:var(--display);font-size:clamp(48px,7vw,88px);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:48px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.why-card{padding:24px;text-align:center}
.why-card .ico{
  width:64px;height:64px;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 18px;font-size:28px;
  border-radius:50%;
  transform:rotate(-4deg);
}
.why-card h3{font-family:var(--sans);font-weight:700;font-size:17px;margin-bottom:8px;color:var(--black)}
.why-card p{font-size:14px;color:var(--ink);line-height:1.55}
@media (max-width:760px){.why-grid{grid-template-columns:1fr;gap:24px}}

/* FAQ */
.faq{padding: clamp(80px,10vh,120px) 0}
.faq-head{text-align:center;margin-bottom:48px}
.faq-head h2{font-family:var(--display);font-size:clamp(48px,7vw,88px);text-transform:uppercase;letter-spacing:-.01em}
.faq-list{max-width:780px;margin:0 auto;padding:0 var(--pad)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  width:100%;padding:24px 0;text-align:left;
  font-weight:600;font-size:16px;color:var(--black);
}
.faq-q .ico{
  width:28px;height:28px;border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;flex-shrink:0;transition:transform .3s, background .3s, color .3s;
}
.faq-item.open .faq-q .ico{background:var(--orange);border-color:var(--orange);color:var(--white);transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 0 24px}

/* ============================================
   PRODUCT PAGE
   ============================================ */
.product-page{padding: 120px var(--pad) 0; max-width: 1480px; margin: 0 auto}
.product-crumbs{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:24px;
}
.product-crumbs a{color:var(--orange)}
.product-crumbs span{margin:0 8px;opacity:.4}

.product-layout{
  display:grid;grid-template-columns: 1.15fr 1fr;
  gap: 48px;align-items:start;
}
@media (max-width:980px){.product-layout{grid-template-columns:1fr;gap:24px}}

/* Gallery */
.gallery{display:grid;grid-template-columns: 80px 1fr;gap:14px}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumb{
  aspect-ratio:1;background-size:cover;background-position:center;
  background-color:var(--soft);cursor:pointer;
  border:2px solid transparent;transition:border-color .2s;
  position:relative;
}
.thumb.on{border-color:var(--orange)}
.thumb-main{
  aspect-ratio:4/5;background-size:cover;background-position:center;
  background-color:var(--soft);position:relative;overflow:hidden;
}
.thumb-main .img-zoom{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s ease;
}
.thumb-main:hover .img-zoom{transform:scale(1.06)}
.thumb-main .badge{
  position:absolute;top:18px;left:18px;
  background:var(--orange);color:var(--white);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;font-weight:700;
}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;overflow-x:auto;order:2}
  .thumb{flex-shrink:0;width:64px}
}

/* Product info */
.product-info-pane{padding: 8px 0;display:flex;flex-direction:column;gap:18px}
.product-info-pane .cat{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:700}
.product-info-pane h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(48px,5vw,76px);line-height:.95;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--black);
}
.product-info-pane .rating-row{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.rating-row .stars{color:var(--orange);font-size:13px;letter-spacing:2px}

.price-block{display:flex;align-items:baseline;gap:14px;margin-top:8px}
.price-block .now{font-family:var(--display);font-size:48px;color:var(--black);letter-spacing:.01em}
.price-block .was{font-family:var(--mono);font-size:14px;text-decoration:line-through;opacity:.5}
.price-block .save{
  background:var(--orange);color:var(--white);padding:4px 10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}

.lead{font-size:15px;line-height:1.6;color:var(--ink);max-width:520px}

.option-row{display:flex;flex-direction:column;gap:10px}
.option-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.option-label .picked{color:var(--ink);opacity:.7;font-weight:400}
.option-label .picked b{color:var(--black);font-weight:600}
.option-label .guide{text-decoration:underline;color:var(--orange);cursor:pointer}

.color-row{display:flex;gap:10px}
.color-pick{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--white);
  outline:1px solid var(--line);cursor:pointer;transition:outline-color .2s, transform .2s;
  position:relative;
}
.color-pick:hover{transform:scale(1.08)}
.color-pick.on{outline-color:var(--black);outline-width:2px}

.size-grid{display:flex;gap:8px;flex-wrap:wrap}
.size-grid .size{
  width:auto;min-width:54px;height:48px;padding:0 14px;
  display:grid;place-items:center;border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  background:var(--white);transition:all .2s;cursor:pointer;
}
.size-grid .size:hover:not(.off){border-color:var(--black)}
.size-grid .size.on{background:var(--black);color:var(--white);border-color:var(--black)}
.size-grid .size.off{opacity:.3;text-decoration:line-through;cursor:not-allowed;background:var(--soft)}

.qty-row{display:flex;align-items:center;gap:14px}
.qty-stepper{display:flex;border:1px solid var(--line)}
.qty-stepper button{width:42px;height:48px;font-size:16px}
.qty-stepper button:hover{background:var(--soft)}
.qty-stepper input{
  width:56px;height:48px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:var(--mono);font-size:14px;font-weight:700;outline:none;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.cta-stack{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.cta-stack .btn{justify-content:center;padding:18px 26px;font-size:13px}

.ship-info{
  display:flex;flex-direction:column;gap:10px;
  padding:18px;background:var(--soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  margin-top:10px;
}
.ship-info .row{display:flex;align-items:center;gap:10px}
.ship-info .row .em{font-size:14px}
.ship-info .row b{color:var(--black);font-weight:700}

/* Accordion */
.accord{margin-top:8px;border-top:1px solid var(--line)}
.accord-item{border-bottom:1px solid var(--line)}
.accord-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;text-align:left;color:var(--black);
}
.accord-q .ico{transition:transform .3s}
.accord-item.open .accord-q .ico{transform:rotate(45deg)}
.accord-a{max-height:0;overflow:hidden;transition:max-height .4s ease;font-size:14px;line-height:1.6;color:var(--ink)}
.accord-item.open .accord-a{max-height:400px}
.accord-a-inner{padding-bottom:18px}

/* Related */
.related{padding: clamp(80px,10vh,120px) 0}
.related h2{font-family:var(--display);font-size:clamp(40px,6vw,72px);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:32px}

/* Size guide modal */
.sg-modal{
  position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,10,.7);padding:24px;
}
.sg-modal.show{display:flex}
.sg-box{
  background:var(--white);max-width:560px;width:100%;padding:36px;position:relative;
  max-height:90vh;overflow:auto;
}
.sg-box h3{font-family:var(--display);font-size:36px;text-transform:uppercase;margin-bottom:18px}
.sg-box .close{position:absolute;top:18px;right:18px}
.sg-box table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.sg-box th, .sg-box td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.sg-box th{background:var(--soft);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px}