/* ═══════════════════════════════════════════════════════════════
   MAISON KARU — Product Page Styles
   Extracted from product.html <style> block.
═══════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body { font-family:'Montserrat',sans-serif; background:#faf9f6; margin:0; padding:0; }

/* ── No announcement bar on product page ── */
#announcement { display:none !important; }

/* ═══ BREADCRUMB ═══ */
.product-breadcrumb {
  padding: 80px 40px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.08em; color: #999;
}
.product-breadcrumb a { color:#999; text-decoration:none; }
.product-breadcrumb a:hover { color:#111; }
.product-breadcrumb span { color:#bbb; margin:0 6px; }

/* ═══ PRODUCT LAYOUT ═══ */
.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  padding: 28px 40px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Gallery ── */
.product-gallery { position:sticky; top:88px; align-self:start; }

.gallery-main {
  position:relative; background:#eeeae7;
  aspect-ratio:3/4; overflow:hidden; margin-bottom:12px;
}

.gallery-main img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:opacity 0.4s ease;
}
.gallery-main img.hidden { opacity:0; }

.gallery-badge {
  position:absolute; top:16px; left:16px;
  font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:#fff; background:#7a6a5a; padding:5px 10px; z-index:3;
}

.gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  z-index:4; transition:opacity 0.2s;
}
.gallery-arrow.prev { left:4px; }
.gallery-arrow.next { right:4px; }
.gallery-arrow svg { width:26px; height:26px; stroke:#111; fill:none; stroke-width:1.6; }

.gallery-thumbs { display:flex; gap:8px; flex-wrap:wrap; }

.gallery-thumb {
  width:calc(25% - 6px); aspect-ratio:1;
  background:#eeeae7; overflow:hidden; cursor:pointer;
  border:1.5px solid transparent; transition:border-color 0.2s; flex-shrink:0;
}
.gallery-thumb.active { border-color:#111; }
.gallery-thumb:hover  { border-color:#aaa; }
.gallery-thumb img    { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ── Product Info ── */
.product-info { padding-top:4px; }

.product-info-badge {
  font-family:'Montserrat',sans-serif; font-size:8.5px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:#7a6a5a; margin-bottom:10px;
}

.product-info-name {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(36px,4vw,56px); font-weight:400;
  letter-spacing:0.04em; color:#111; line-height:1.0;
  text-transform:uppercase; margin-bottom:6px;
}

.product-info-subtitle {
  font-family:'Cormorant Garamond',serif;
  font-size:17px; font-weight:400; font-style:italic;
  color:#888; letter-spacing:0.02em; margin-bottom:20px;
}

.product-info-price,
.product-info .woocommerce-Price-amount,
.product-info .price {
  font-family:'Montserrat',sans-serif;
  font-size:18px; font-weight:500; letter-spacing:0.06em; color:#111; margin-bottom:6px;
}

/* Hide default WooCommerce add-to-cart — we use our own buttons */
.product-info .woocommerce-variation-add-to-cart,
.product-info form.cart { display:none !important; }

.product-divider { height:1px; background:#e4e2dd; margin-bottom:28px; }

/* ── Colour selector ── */
.product-option-label {
  font-family:'Montserrat',sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:#111;
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.product-option-label span { font-weight:400; color:#888; text-transform:none; letter-spacing:0.04em; }

.color-options { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }

.color-swatch {
  width:32px; height:32px; border-radius:50%;
  border:2px solid transparent; cursor:pointer;
  transition:border-color 0.2s, transform 0.2s; position:relative;
}
.color-swatch:hover  { transform:scale(1.1); }
.color-swatch.active { border-color:#111; }
.color-swatch.active::after {
  content:''; position:absolute; inset:3px;
  border-radius:50%; border:1.5px solid #fff;
}

/* ── Pre-order notice ── */
.preorder-notice {
  background:#f5f3ee; border:1px solid #e4e2dd;
  padding:16px 18px; margin-bottom:24px;
  display:flex; gap:12px; align-items:flex-start;
}
.preorder-notice svg { width:16px; height:16px; flex-shrink:0; stroke:#7a6a5a; fill:none; margin-top:1px; }
.preorder-notice-text { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:400; letter-spacing:0.06em; color:#555; line-height:1.65; }
.preorder-notice-text strong { font-weight:700; color:#111; display:block; margin-bottom:2px; text-transform:uppercase; font-size:9.5px; letter-spacing:0.14em; }

/* ── CTA Buttons ── */
.product-cta { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }

.btn-preorder {
  width:100%; padding:16px 24px;
  background:#111; color:#fff; border:none; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  transition:background 0.25s, opacity 0.25s;
}
.btn-preorder:hover    { background:#2a2a2a; }
.btn-preorder:disabled { opacity:0.45; cursor:default; }

.btn-wishlist {
  width:100%; padding:14px 24px;
  background:transparent; color:#111;
  border:1px solid #d4d2cc; cursor:pointer;
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color 0.22s, background 0.22s;
}
.btn-wishlist:hover { border-color:#111; background:#f5f3ee; }
.btn-wishlist svg   { width:15px; height:15px; stroke:#111; fill:none; }

/* ── Perks ── */
.product-perks {
  display:flex; gap:0;
  border-top:1px solid #e4e2dd; border-bottom:1px solid #e4e2dd; margin-bottom:32px;
}
.product-perk {
  flex:1; padding:14px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  border-right:1px solid #e4e2dd;
}
.product-perk:last-child { border-right:none; }
.product-perk svg       { width:18px; height:18px; stroke:#7a6a5a; fill:none; stroke-width:1.5; }
.product-perk-label     { font-family:'Montserrat',sans-serif; font-size:8px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#111; }
.product-perk-sub       { font-family:'Montserrat',sans-serif; font-size:8px; font-weight:400; letter-spacing:0.06em; color:#888; }

/* ── Accordion ── */
.product-accordion-item { border-bottom:1px solid #e4e2dd; }

.product-accordion-trigger {
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:#111;
}

.acc-icon { position:relative; width:14px; height:14px; flex-shrink:0; }
.acc-icon::before,.acc-icon::after { content:''; position:absolute; background:#111; border-radius:1px; transition:opacity 0.3s,transform 0.3s; }
.acc-icon::before { width:14px; height:1.5px; top:50%; left:0; transform:translateY(-50%); }
.acc-icon::after  { width:1.5px; height:14px; top:0; left:50%; transform:translateX(-50%); }
.product-accordion-item.open .acc-icon::after { opacity:0; transform:translateX(-50%) rotate(90deg); }

.product-accordion-body { overflow:hidden; max-height:0; transition:max-height 0.38s cubic-bezier(0.4,0,0.2,1); }
.product-accordion-item.open .product-accordion-body { max-height:500px; }
.product-accordion-body-inner { padding-bottom:20px; font-family:'Montserrat',sans-serif; font-size:10.5px; font-weight:400; letter-spacing:0.05em; color:#555; line-height:1.9; }
.product-accordion-body-inner ul { list-style:none; padding:0; }
.product-accordion-body-inner ul li { display:flex; align-items:flex-start; gap:8px; margin-bottom:4px; }
.product-accordion-body-inner ul li::before { content:'—'; color:#bbb; flex-shrink:0; }

/* ── Mobile Buy Bar ── */
.mobile-buy-bar {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid #e4e2dd;
  padding:12px 16px 20px; z-index:500; gap:10px;
}
.mobile-buy-bar .btn-preorder { flex:1; padding:14px; font-size:10px; }
.mobile-buy-bar .btn-wishlist  { width:48px; height:48px; padding:0; flex-shrink:0; }

/* ── Toast ── */
.toast {
  position:fixed; bottom:32px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff;
  padding:14px 28px;
  font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  white-space:nowrap; z-index:9999;
  opacity:0; transition:opacity 0.3s, transform 0.3s; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══ WOOCOMMERCE OVERRIDES ═══ */
.woocommerce-notices-wrapper,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info { margin:0 40px 16px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:960px) {
  .product-page { grid-template-columns:1fr; gap:0; padding:20px 20px 40px; }
  .product-gallery { position:static; margin-bottom:32px; }
  .product-info   { padding-top:0; }
  .product-perks  { display:none; }
  .product-cta    { display:none; }
  .mobile-buy-bar { display:flex; }
  .gallery-main   { border-radius:16px; }
  .newsletter-section { padding-bottom:80px; }
  .site-footer    { padding-bottom:80px; }
  .footer-accordion,.footer-grid { padding-bottom:90px; }
  .footer-bottom  { padding-bottom:24px; margin-bottom:0; }
}

@media (max-width:860px) {
  .product-breadcrumb { padding:72px 20px 0; }
  .toast { bottom:86px; white-space:normal; text-align:center; font-size:9px; letter-spacing:0.10em; padding:10px 16px; width:calc(100% - 48px); max-width:320px; }
}

@media (max-width:600px) {
  .newsletter-section { padding:32px 20px 32px; }
}