/* ============================================================
   REGARDEN — Product overview + detail pages  ·  Herbarium identity
   Builds on brand.css + landing.css tokens.
   ============================================================ */

/* hero lineup: transparent composite on bone, fully visible (no crop) */
.hero-art .arch{background:var(--bone-2);}
.hero-art .arch img{width:100%;height:100%;object-fit:contain;object-position:center bottom;padding:24px 22px 0;}

/* transparent products sit on the bone surface; bottle is bottom-anchored.
   single tight contact shadow tucked under the base — no all-around halo. */
.card .shot{background:var(--bone-2); position:relative; overflow:hidden;}
.card .shot img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  object-position:center bottom; padding:22px 22px 34px;}
.card .shot::after{content:""; position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:42%; height:9px; border-radius:50%; z-index:0; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at center, rgba(32,37,30,.28) 0%, rgba(32,37,30,.14) 45%, rgba(32,37,30,0) 78%);}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:26px 0 0;}
.crumb a:hover{color:var(--clay);}
.crumb .sep{opacity:.5; padding:0 8px;}

/* ============================================================
   PRODUCTS OVERVIEW
   ============================================================ */
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.shop-grid.has-bundle{grid-template-columns:repeat(3,1fr);}
.bundle-card{grid-column:1 / -1; background:var(--orchid-deep); color:#F4ECE9; border-radius:18px;
  display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden; border:1px solid var(--orchid-deep);}
.bundle-card .b-copy{padding:48px 46px;}
.bundle-card .b-copy .cat{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,236,233,.6); margin-bottom:12px;}
.bundle-card .b-copy h3{font-family:var(--f-display); font-weight:600; font-size:38px; line-height:1; margin:0 0 14px;}
.bundle-card .b-copy .claim{font-family:var(--f-serif); font-style:italic; font-size:21px; margin:0 0 16px; color:#fff;}
.bundle-card .b-copy p{color:rgba(244,236,233,.85); font-size:16px; margin:0 0 26px; max-width:42ch;}
.bundle-card .b-art{position:relative; min-height:300px; background:var(--bone-2);}
.bundle-card .b-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; padding:20px 20px 0;}
.price{font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; color:var(--ink-soft);}
.card .price{margin:0 0 14px;}
.btn-light{background:#fff; border-color:#fff; color:var(--orchid-deep);}
.btn-light:hover{background:transparent; color:#fff;}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-hero{padding:30px 0 70px;}
.pd-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:start;}
.pd-shot{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:var(--bone-2); aspect-ratio:3/4; box-shadow:0 30px 70px -34px rgba(32,37,30,.45);}
.pd-shot img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  object-position:center bottom; padding:38px 38px 52px;}
.pd-shot::after{content:""; position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  width:40%; height:13px; border-radius:50%; z-index:0; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at center, rgba(32,37,30,.30) 0%, rgba(32,37,30,.15) 45%, rgba(32,37,30,0) 78%);}
.pd-seal{position:absolute; right:18px; top:18px; width:96px; height:96px; background:var(--bone);
  border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:5px; box-shadow:0 14px 30px -12px rgba(32,37,30,.4);}
.pd-seal .t{font-family:var(--f-mono); font-size:8px; letter-spacing:.14em; color:var(--clay-deep); line-height:1.4;}

.pd-cat{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px;}
.pd-name{font-family:var(--f-display); font-weight:600; font-size:clamp(40px,5vw,64px); line-height:.96; margin:0;}
.pd-claim{font-family:var(--f-serif); font-style:italic; font-size:clamp(22px,2.4vw,28px); margin:14px 0 0;}
.pd-format{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; color:var(--ink-soft); margin:18px 0 0;}
.pd-lead{font-size:18px; color:var(--ink-soft); margin:22px 0 0; max-width:48ch;}
.pd-price-row{display:flex; align-items:center; gap:18px; margin:30px 0 24px; flex-wrap:wrap;}
.pd-price{font-family:var(--f-display); font-weight:600; font-size:30px;}
.pd-badges{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px;}
.pd-badge{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);}
.pd-badge .d{color:var(--clay); opacity:.6;}

/* content sections */
.pd-body{padding:0 0 30px;}
.pd-sec{padding:54px 0; border-top:1px solid var(--line);}
.pd-sec .kicker{display:block; margin-bottom:18px;}
.pd-sec h2{font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3vw,38px); line-height:1.05; margin:0 0 22px;}
.pd-sec p{font-size:17px; color:var(--ink-soft); max-width:68ch; margin:0 0 16px;}
.pd-sec p strong{color:var(--ink);}

.ingr{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px;}
.ingr .item{background:var(--bone-2); border-radius:14px; padding:26px 26px; border:1px solid var(--line);}
.ingr .item h4{font-family:var(--f-serif); font-weight:600; font-size:20px; margin:0 0 8px;}
.ingr .item .src{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--clay-deep); margin:0 0 10px;}
.ingr .item p{font-size:14.5px; margin:0;}

.steps{counter-reset:s; display:grid; gap:16px; margin-top:8px;}
.steps li{list-style:none; display:flex; gap:18px; align-items:flex-start; font-size:16px; color:var(--ink-soft);}
.steps li::before{counter-increment:s; content:counter(s); flex-shrink:0; width:34px; height:34px;
  border-radius:50%; background:var(--clay); color:#fff; font-family:var(--f-mono); font-size:14px;
  display:flex; align-items:center; justify-content:center; font-weight:600;}

/* the proof block */
.proof-block .prooflist{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.proof-block .prooflist li{position:relative; padding-left:30px; font-size:16px; color:var(--ink-soft); max-width:68ch;}
.proof-block .prooflist li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--clay);}
.tested-inline{margin-top:24px !important; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft) !important;}

.spec-table{width:100%; border-collapse:collapse; margin-top:8px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:14px 4px; font-size:15px; vertical-align:top;}
.spec-table td:first-child{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); width:42%; padding-right:20px;}

.faq .q{font-family:var(--f-serif); font-weight:600; font-size:19px; margin:24px 0 6px;}
.faq .q:first-child{margin-top:0;}
.faq .a{font-size:16px; color:var(--ink-soft); margin:0; max-width:66ch;}

.works{display:flex; flex-wrap:wrap; gap:9px; margin-top:8px;}
.works .chip{font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; border-radius:100px; background:rgba(32,37,30,.06); color:var(--ink); font-weight:600;}

/* cross-sell */
.xsell{background:var(--bone-2); padding:80px 0;}
.xsell .sec-head{margin-bottom:40px;}
.xsell-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.xsell-card{display:block; background:var(--bone); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .25s, box-shadow .25s;}
.xsell-card:hover{transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(32,37,30,.4);}
.xsell-card .x-shot{aspect-ratio:4/3; background:var(--bone-2); position:relative; overflow:hidden;}
.xsell-card .x-shot img{position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
  object-position:center bottom; padding:14px 14px 22px;}
.xsell-card .x-shot::after{content:""; position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:38%; height:8px; border-radius:50%; z-index:0; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at center, rgba(32,37,30,.26) 0%, rgba(32,37,30,.13) 45%, rgba(32,37,30,0) 78%);}
.xsell-card .x-body{padding:20px 22px 24px;}
.xsell-card .x-cat{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;}
.xsell-card .x-name{font-family:var(--f-display); font-weight:600; font-size:23px; margin:0;}
.xsell-card .x-claim{font-family:var(--f-serif); font-style:italic; font-size:15px; color:var(--ink-soft); margin:6px 0 0;}

@media(max-width:1000px){
  .pd-grid{grid-template-columns:1fr; gap:40px;}
  .pd-shot{max-width:440px;}
  .shop-grid{grid-template-columns:1fr; max-width:460px; margin:0 auto;}
  .bundle-card{grid-template-columns:1fr;}
  .ingr{grid-template-columns:1fr;}
  .xsell-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
}
@media(max-width:560px){
  .pd-price-row{gap:12px;}
}