/* =========================================================
   HERO (shared pattern, content differs per page)
   ========================================================= */
.hero{
  padding: 64px 0 56px;
  position:relative;
  overflow:hidden;
}
.hero .container{ position:relative; z-index:2; }
.hero-kicker{ font-family: var(--font-script); font-size: 1.4rem; color: var(--orange); }
.hero h1{
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  max-width: 14ch;
}
.hero p.lede{ font-size: 1.15rem; max-width: 52ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 26px; }

.confetti{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.confetti span{
  position:absolute; display:block; border-radius: 3px;
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.cat-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 36px; }
.cat-nav button{
  font-family: var(--font-body); font-weight:700; cursor:pointer;
  background: var(--white); border: 2px solid var(--black);
  border-radius: 999px; padding: 8px 18px; font-size:.9rem;
}
.cat-nav button.is-active{ background: var(--blue); color:var(--white); }

.category-block{ margin-bottom: 64px; }
.category-title{
  display:flex; align-items:baseline; gap:14px; margin-bottom: 6px;
}
.category-title h2{ margin-bottom:0; }
.category-desc{ max-width: 60ch; color:#333; margin-bottom: 28px; }

.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 900px){ .product-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .product-grid{ grid-template-columns: 1fr; } }

.product-card{
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 6px 6px 0 var(--black);
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{ transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--black); }

.product-media{
  aspect-ratio: 4/5;
  background: var(--paper-dim);
  border-bottom: 3px solid var(--black);
  overflow:hidden;
  position:relative;
}
.product-media img{ width:100%; height:100%; object-fit: cover; }

.product-media.mosaic{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap:2px;
}
.product-media.mosaic img{ object-fit: cover; height:100%; }

.product-body{ padding: 18px 18px 20px; }
.product-body h3{ font-size: 1.15rem; margin-bottom: 4px; }
.price-tag{
  display:inline-block; font-weight:700; color: var(--white);
  background: var(--blue); border-radius: 6px; padding: 3px 10px;
  font-size: .95rem; margin-bottom: 10px;
}
.material-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; color: var(--green);
  border: 2px solid var(--green); border-radius: 999px;
  padding: 3px 10px; margin-top:4px;
}
.pattern-note{
  margin-top:10px; font-size:.85rem; padding-top:10px;
  border-top: 2px dashed var(--line);
}
.pattern-note a{ font-weight:700; text-decoration: underline; }

.lazada-cta{
  margin-top: 56px; padding: 30px; text-align:center;
  border-radius: var(--radius); border:3px solid var(--black);
  background: var(--yellow); box-shadow: 6px 6px 0 var(--black);
}

/* care instructions */
.care-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width: 860px){ .care-grid{ grid-template-columns: 1fr; } }
.care-card{
  background: var(--white); border:3px solid var(--black); border-radius: var(--radius);
  padding: 24px; box-shadow: 5px 5px 0 var(--black);
}
.care-card .icon{ font-size:2rem; margin-bottom:10px; display:block; }
.care-card ul{ margin:10px 0 0; padding-left: 20px; }
.care-card li{ margin-bottom:6px; }

/* =========================================================
   IMPACT / TRACKER
   ========================================================= */
.stat-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 22px;
  margin-top: 12px;
}
@media (max-width:860px){ .stat-grid{ grid-template-columns: 1fr 1fr; } }
.stat-card{
  background: var(--white); color:var(--black);
  border:3px solid var(--black); border-radius: var(--radius);
  padding: 26px 20px; text-align:center;
  box-shadow: 5px 5px 0 var(--black);
}
.stat-num{
  font-family: var(--font-script); font-size: 2.6rem; color: var(--blue);
  line-height:1;
}
.stat-label{ font-weight:700; font-size:.9rem; margin-top:6px; }
.stat-note{ font-size:.72rem; opacity:.65; margin-top:8px; }

.tracker-note{
  border: 2px dashed var(--black); border-radius: 14px;
  padding: 16px 20px; background: rgba(255,255,255,.6);
  font-size:.92rem; margin-top: 28px;
}

.material-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 30px; }
.material-legend span{
  border:2px solid var(--black); border-radius:999px; padding:6px 14px;
  font-weight:700; font-size:.85rem; background:var(--white);
}

/* =========================================================
   HOW IT WORKS — steps
   ========================================================= */
.steps{
  counter-reset: step;
  display:flex; flex-direction:column; gap:0;
  max-width: 780px;
}
.step{
  display:grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 26px 0;
  border-bottom: 3px dashed var(--black);
  position:relative;
}
.step:last-child{ border-bottom:none; }
.step-num{
  counter-increment: step;
  width:56px; height:56px; border-radius:50%;
  background: var(--orange); border:3px solid var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-script); font-size:1.6rem; font-weight:700;
}
.step-num::before{ content: counter(step); }
.step h3{ margin-bottom:6px; }

/* =========================================================
   STORY PAGE
   ========================================================= */
.name-split{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 34px 0;
}
@media (max-width:700px){ .name-split{ grid-template-columns:1fr; } }
.name-card{
  border:3px solid var(--black); border-radius: var(--radius); padding: 26px;
  box-shadow: 6px 6px 0 var(--black);
}
.name-card .word{ font-family: var(--font-script); font-size:2.2rem; color:var(--blue); }

.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:30px; }
@media (max-width:860px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{ padding: 22px; border-radius: var(--radius); border: 3px solid var(--black); background: var(--white); }

.gallery-strip{
  display:grid; grid-template-columns: repeat(5,1fr); gap:14px; margin-top: 40px;
}
@media (max-width: 860px){ .gallery-strip{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .gallery-strip{ grid-template-columns: repeat(2,1fr); } }
.gallery-strip img{
  aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; border: 3px solid var(--black);
}

/* =========================================================
   RETURN POLICY
   ========================================================= */
.policy-block{ max-width: 760px; }
.policy-block h2{ margin-top: 44px; }
.policy-block ul{ padding-left: 22px; }
.policy-block li{ margin-bottom: 8px; }
.callout{
  border: 3px solid var(--black); background: var(--yellow);
  border-radius: var(--radius); padding: 22px 24px; margin: 24px 0;
  box-shadow: 5px 5px 0 var(--black);
}
.callout.no{ background: var(--paper-dim); }
.dont-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin: 20px 0 30px; }
@media (max-width:700px){ .dont-grid{ grid-template-columns:1fr; } }
.dont-grid .box{ border:3px solid var(--black); border-radius: var(--radius); padding:20px; }
.dont-grid .box h4{ margin-bottom:10px; }
.steps-mini{ counter-reset: mini; padding-left:0; list-style:none; }
.steps-mini li{
  counter-increment: mini; position:relative; padding-left: 40px; margin-bottom:16px;
}
.steps-mini li::before{
  content: counter(mini); position:absolute; left:0; top:-2px;
  width:28px; height:28px; border-radius:50%; background:var(--blue); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}