/* ═══════════════════════════════════════════════════════════════
   MAISON KARU — La Spirale Page Styles
═══════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { overflow-x:hidden; scroll-behavior:smooth; }
body { font-family:'Montserrat',sans-serif; background:#F2EDE4; overflow-x:hidden; }

/* No announcement bar */
#announcement { display:none !important; }

/* ═══ HERO SPLIT ═══ */
.spirale-hero {
  display: grid;
  grid-template-columns: 370px 1fr 1fr;
  height: calc(100dvh - 64px);
  min-height: 560px;
  width: 100%;
  margin-top: 64px;
}

/* LEFT panel */
.spirale-left {
  background: #EDE8DE;
  display: flex;
  flex-direction: column;
  padding: 0 40px 0 44px;
  position: relative;
  z-index: 2;
}

.spirale-left-top { padding-top:52px; flex-shrink:0; }

.spirale-breadcrumb {
  font-size:7.5px; font-weight:500; letter-spacing:0.28em;
  text-transform:uppercase; color:#C8A050;
  display:flex; align-items:center; gap:9px; margin-bottom:18px;
}
.spirale-breadcrumb .sep { color:rgba(200,160,80,0.3); font-weight:300; }

.spirale-icon { width:64px; height:64px; opacity:0.64; }

.spirale-left-middle {
  flex:1; display:flex; flex-direction:column; justify-content:center;
}

.spirale-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(56px,5.5vw,80px); font-weight:300; font-style:italic;
  color:#C8A050; letter-spacing:-0.01em; line-height:0.9; margin-bottom:28px;
  opacity:0; transform:translateY(20px);
  transition:opacity 0.85s cubic-bezier(0.22,0.61,0.36,1), transform 0.85s cubic-bezier(0.22,0.61,0.36,1);
}
.spirale-title.vis { opacity:1; transform:translateY(0); }

.spirale-gold-sep {
  display:block; width:44px; height:1px; background:#C8A050;
  margin-bottom:32px; opacity:0; transition:opacity 0.8s 0.2s ease;
}
.spirale-gold-sep.vis { opacity:1; }

.spirale-voir {
  display:inline-flex; align-items:center; gap:9px;
  font-size:7.5px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
  color:#C8A050; text-decoration:none; cursor:pointer;
  border:none; background:none; padding:0;
  opacity:0; transition:opacity 0.8s 0.3s ease, color 0.2s;
}
.spirale-voir.vis { opacity:1; }
.spirale-voir:hover { color:#a07030; }
.spirale-voir-arrow { font-size:13px; line-height:1; display:inline-block; }

/* ═══ IMAGE PANELS ═══ */
.img-panel { position:relative; overflow:hidden; }
.img-panel img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  transition:transform 1s cubic-bezier(0.25,0.46,0.45,0.94);
}
.img-panel::after {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,0); transition:background 0.38s ease;
  z-index:2; pointer-events:none;
}
.img-panel:hover::after { background:rgba(0,0,0,0.28); }
.img-panel:hover img    { transform:scale(1.04); }

.img-panel-cta {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, calc(-50% + 8px));
  z-index:5; display:inline-flex; align-items:center; gap:11px;
  font-family:'Montserrat',sans-serif; font-size:8px; font-weight:600;
  letter-spacing:0.26em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,0.75); padding:14px 28px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  background:rgba(0,0,0,0.18); white-space:nowrap;
  opacity:0;
  transition:opacity 0.32s ease, transform 0.32s ease, background 0.28s ease, border-color 0.28s ease;
  pointer-events:none;
}
.img-panel:hover .img-panel-cta { opacity:1; transform:translate(-50%,-50%); pointer-events:auto; }
.img-panel-cta:hover { background:rgba(200,160,80,0.25); border-color:#C8A050; }

/* CENTER + RIGHT */
.spirale-center {
  background:#c9c0b5;
  border-left:4px solid #F2EDE4;
  border-right:4px solid #F2EDE4;
}
.spirale-right { display:grid; grid-template-rows:1fr 1fr; }
.spirale-right-top    { background:#d5cfc8; border-bottom:4px solid #F2EDE4; }
.spirale-right-bottom { background:#b5afa6; }

/* ═══ PRODUCTS SECTION ═══ */
.spirale-products { background:#F2EDE4; padding:90px 60px 72px; }

.products-header {
  display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:52px;
}
.products-section-label {
  font-size:7.5px; font-weight:600; letter-spacing:0.32em; text-transform:uppercase;
  color:#C8A050; margin-bottom:12px; display:flex; align-items:center; gap:12px;
}
.products-section-label::before {
  content:''; display:block; width:28px; height:1px; background:#C8A050;
}
.products-section-title {
  font-family:'Cormorant Garamond',serif; font-size:clamp(32px,3.5vw,48px);
  font-weight:300; color:#111; letter-spacing:0.02em; line-height:1;
}
.products-section-sub {
  font-size:8px; font-weight:400; letter-spacing:0.2em;
  text-transform:uppercase; color:#bbb; margin-top:8px;
}

.spirale-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}

.spirale-card {
  background:#EDE8DE; position:relative; overflow:hidden;
  text-decoration:none; display:block;
}

.spirale-card-img {
  width:100%; padding-bottom:122%; position:relative; overflow:hidden;
}
.spirale-card-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.img-hover { opacity:0; }
.spirale-card:hover .img-hover   { opacity:1; }
.spirale-card:hover .img-primary { opacity:0; }
.spirale-card:hover .spirale-card-img img { transform:scale(1.05); }

/* Quick Actions */
.card-actions {
  position:absolute; bottom:12px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:10; opacity:0; transform:translateX(10px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.spirale-card:hover .card-actions { opacity:1; transform:translateX(0); }

.card-action-btn {
  width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,0.08);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#111;
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transition:background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}
.card-action-btn:hover {
  background:#111; color:#fff; border-color:#111; transform:scale(1.05);
}
.card-action-btn svg {
  width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5;
}

.card-soon-overlay {
  position:absolute; inset:0; background:rgba(237,232,222,0.6);
  z-index:2; display:flex; align-items:center; justify-content:center;
}
.card-soon-label {
  font-size:7.5px; font-weight:600; letter-spacing:0.28em;
  text-transform:uppercase; color:#999;
  border:1px solid rgba(0,0,0,0.12); padding:9px 20px; background:#EDE8DE;
}

.spirale-card-info { padding:20px 22px 24px; }
.card-edition-num {
  font-family:'Cormorant Garamond',serif; font-size:10.5px; font-weight:400;
  color:#C8A050; letter-spacing:0.1em; margin-bottom:4px; display:block;
}
.card-name {
  font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:400;
  color:#111; letter-spacing:0.02em; line-height:1; margin-bottom:4px;
}
.card-row { display:flex; align-items:center; justify-content:space-between; }
.card-price {
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; color:#111;
}
.card-link {
  font-size:7.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  color:#C8A050; text-decoration:none;
  border-bottom:1px solid rgba(200,160,80,0.3); padding-bottom:2px;
  transition:border-color 0.2s;
}
.spirale-card:hover .card-link { border-color:#C8A050; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1100px) {
  .spirale-hero { grid-template-columns:300px 1fr 1fr; }
  .spirale-products { padding:72px 40px 56px; }
}

@media (max-width:860px) {
  .spirale-hero { grid-template-columns:1fr; height:auto; min-height:auto; margin-top:56px; }
  .spirale-left { padding:48px 28px; min-height:80vh; }
  .spirale-left-top { padding-top:0; }
  .spirale-center { height:72vw; min-height:300px; border:none; border-top:4px solid #F2EDE4; border-bottom:4px solid #F2EDE4; }
  .spirale-right  { grid-template-rows:52vw 52vw; }
  .spirale-right-top { border:none; border-bottom:4px solid #F2EDE4; }
  .spirale-grid   { grid-template-columns:1fr 1fr; }
  .img-panel-cta  { opacity:1; transform:translate(-50%,-50%); pointer-events:auto; }
  .img-panel::after { background:rgba(0,0,0,0.2); }
  .card-actions { opacity:1; transform:translateX(0); bottom:8px; right:8px; }
}

@media (max-width:600px) {
  .spirale-products { padding:56px 20px 48px; }
  .products-header  { flex-direction:column; align-items:flex-start; gap:20px; }
  .spirale-grid     { grid-template-columns:1fr; }
}