/* =========================================================
   SHOP PAGE — uniform 4-column grid, fixed card sizes
   ========================================================= */

.shop-hero{
  padding:200px 0 60px;
  background:var(--hero);
  color:#fff;
  position:relative;
  overflow:hidden;
  margin-top:calc(-1 * (var(--nav-h) + var(--topbar-h) + 14px));
  margin-bottom:0;
}
.shop-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 80% 50%,rgba(184,140,84,.18) 0%,transparent 60%);
  pointer-events:none;
}
.shop-hero > .container{position:relative;z-index:2}
.shop-hero .crumbs{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:24px;position:relative;z-index:2}
.shop-hero .crumbs a{color:rgba(255,255,255,.55);transition:color .2s var(--ease)}
.shop-hero .crumbs a:hover{color:#fff}
.shop-hero .crumbs .sep{opacity:.4;margin:0 8px}

.shop-hero .hero-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:60px;
  align-items:stretch;
}
@media(max-width:980px){
  .shop-hero .hero-grid{grid-template-columns:1fr;gap:40px}
  .shop-hero .hero-composition{order:-1;height:340px}
}

.shop-hero h1{
  font-size:clamp(48px,6vw,84px);
  font-weight:300;line-height:1;letter-spacing:-.02em;
  max-width:16ch;margin-bottom:22px;
  color:#fff;
}
.shop-hero h1 em{color:rgba(255,255,255,.6)}
.shop-hero p.lead{
  font-size:17px;line-height:1.65;
  color:rgba(255,255,255,.7);
  max-width:60ch;
}

/* ===== HERO COMPOSITION — matches text column height ===== */
.hero-composition{
  position:relative;
  height:100%;
  min-height:320px;
  width:100%;
  cursor:pointer;
}

/* Soft floor shadow under the front row */
.hero-composition::after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:8px;
  height:12px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  filter:blur(4px);
  z-index:0;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero-composition:hover::after{
  opacity:.75;
  transform:scaleX(1.04);
}

/* Background door — smaller, fully visible, contained */
.hero-composition .big-door{
  position:absolute;
  left:22%;
  right:22%;
  top:0;
  bottom:22px;
  z-index:1;
  transition:transform .9s var(--ease);
}
.hero-composition .big-door img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
}
.hero-composition:hover .big-door{
  transform:translateY(-6px) rotate(-1deg);
}

/* Front row — three pieces, EQUAL size, same baseline */
.hero-composition .molding,
.hero-composition .bag,
.hero-composition .small-door{
  position:absolute;
  bottom:18px;
  width:24%;
  height:50%;
  transition:transform .9s var(--ease);
}

.hero-composition .molding{
  left:13%;
  z-index:3;
}
.hero-composition .molding img{
  width:100%;height:100%;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.hero-composition:hover .molding{
  transform:translate(-10px,-4px) rotate(-5deg);
}

.hero-composition .bag{
  left:38%;
  z-index:5;
}
.hero-composition .bag img{
  width:100%;height:100%;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.65));
}
.hero-composition:hover .bag{
  transform:translateY(-10px) rotate(-2deg);
}

.hero-composition .small-door{
  right:13%;
  bottom:34px;
  z-index:3;
  transform:rotate(3deg);
}
.hero-composition .small-door img{
  width:100%;height:100%;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.hero-composition:hover .small-door{
  transform:translate(10px,-4px) rotate(8deg);
}

/* Filter chips */
.shop-filters{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:50px 0 40px;
  border-bottom:1px solid var(--line);
  margin-bottom:50px;
}
.shop-filters button{
  padding:9px 18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);
  transition:all .2s var(--ease);
}
.shop-filters button:hover{border-color:var(--ink);color:var(--ink)}
.shop-filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== GRID ===== */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  padding-bottom:80px;
}
@media(max-width:1100px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:440px){.shop-grid{grid-template-columns:1fr}}

/* ===== CARD ===== */
.shop-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  text-decoration:none;color:inherit;
  position:relative;
  cursor:pointer;
}
.shop-card:hover{
  transform:translateY(-4px);
  border-color:rgba(14,14,16,.18);
  box-shadow:0 18px 38px -16px rgba(0,0,0,.18);
}

.shop-card .visual{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
  display:grid;place-items:center;
}
.shop-card .visual > .bundle{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px;
  box-sizing:border-box;
}
.shop-card .visual img.solo{
  max-width:70%;
  max-height:70%;
  width:auto;height:auto;
  object-fit:contain;
  transition:transform .55s var(--ease);
}
.shop-card:hover .visual img.solo{transform:scale(1.06)}

/* ===== STACK — multiple images fanned/stacked ===== */
.shop-card .stack{
  position:relative;
  width:80%;
  height:80%;
  display:grid;place-items:center;
}
.shop-card .stack img{
  position:absolute;
  width:55%;height:auto;
  max-height:78%;
  object-fit:contain;
  border-radius:4px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));
  transition:transform .55s var(--ease), opacity .35s var(--ease);
}
/* Default fan layout — 3 visible cards */
.shop-card .stack img:nth-child(1){
  transform:translate(-22%,2%) rotate(-7deg);
  z-index:1;opacity:.85;
}
.shop-card .stack img:nth-child(2){
  transform:translate(0,-2%) rotate(0deg);
  z-index:3;
}
.shop-card .stack img:nth-child(3){
  transform:translate(22%,2%) rotate(7deg);
  z-index:2;opacity:.85;
}
.shop-card:hover .stack img:nth-child(1){transform:translate(-30%,-1%) rotate(-10deg);opacity:1}
.shop-card:hover .stack img:nth-child(2){transform:translate(0,-5%) rotate(0deg)}
.shop-card:hover .stack img:nth-child(3){transform:translate(30%,-1%) rotate(10deg);opacity:1}

/* Small-door stack — slightly different scale */
.shop-card .stack.mini img{width:42%;max-height:62%}

/* ===== BUNDLE — stack of small doors + bag beside ===== */
.shop-card .bundle .doors-stack{
  position:relative;
  flex:1.3;
  height:70%;
  display:grid;place-items:center;
}
.shop-card .bundle .doors-stack img{
  position:absolute;
  width:50%;
  max-height:90%;
  object-fit:contain;
  border-radius:3px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.14));
  transition:transform .55s var(--ease);
}
.shop-card .bundle .doors-stack img:nth-child(1){transform:translate(-32%,2%) rotate(-8deg);z-index:1;opacity:.85}
.shop-card .bundle .doors-stack img:nth-child(2){transform:translate(0,-2%) rotate(0deg);z-index:3}
.shop-card .bundle .doors-stack img:nth-child(3){transform:translate(32%,2%) rotate(8deg);z-index:2;opacity:.85}
.shop-card:hover .bundle .doors-stack img:nth-child(1){transform:translate(-40%,-1%) rotate(-12deg);opacity:1}
.shop-card:hover .bundle .doors-stack img:nth-child(2){transform:translate(0,-6%) rotate(0deg)}
.shop-card:hover .bundle .doors-stack img:nth-child(3){transform:translate(40%,-1%) rotate(12deg);opacity:1}

.shop-card .bundle .bag-side{
  flex:1;
  height:70%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shop-card .bundle .bag-side img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.16));
  transition:transform .55s var(--ease);
}
.shop-card:hover .bundle .bag-side img{transform:scale(1.06)}

.shop-card .badge{
  position:absolute;top:12px;left:12px;z-index:5;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  padding:4px 9px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line);
}
.shop-card .badge.dark{background:var(--ink);color:#fff;border-color:var(--ink)}

.shop-card .body{
  padding:18px 18px 20px;
  display:flex;flex-direction:column;flex:1;
  border-top:1px solid var(--line-2);
}
.shop-card .cat{
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.shop-card h2{
  font-family:var(--serif);font-size:20px;font-weight:500;
  line-height:1.2;margin-bottom:12px;
  flex:1;
}
.shop-card h2 em{font-style:italic;font-weight:400;color:var(--muted)}
.shop-card .foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;border-top:1px solid var(--line-2);
}
.shop-card .price{
  font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);
}
.shop-card .price em{font-style:normal;font-size:11px;color:var(--muted);font-weight:400;margin-left:3px}
.shop-card .add{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:8px;
  background:var(--ink);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:none;cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.shop-card .add:hover{transform:translateY(-1px);background:#1a1d24}
.shop-card .add svg{width:11px;height:11px}

/* Bottom info band */
.shop-info{
  background:var(--bg-2);
  padding:60px 0;
  border-top:1px solid var(--line);
}
.shop-info .row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
@media(max-width:780px){.shop-info .row{grid-template-columns:1fr;gap:30px}}
.shop-info .cell h3{
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px;
}
.shop-info .cell p{
  font-size:14px;color:var(--muted);line-height:1.65;
}