/* Jiko Pantry — uses the Spicy Jiko theme tokens (--navy, --muted, --line, --serif, --hand) */

/* product page */
.pd{padding-block:clamp(20px,3vw,32px) clamp(48px,6vw,80px)}
.pd-crumb{display:flex; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--muted); margin-bottom:clamp(18px,3vw,28px)}
.pd-crumb a{text-decoration:none}
.pd-crumb a:hover{text-decoration:underline; text-underline-offset:3px}
.pd-hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.pd-shot{background:var(--tint); border-radius:6px; aspect-ratio:4/5; display:grid; place-items:center; padding:12% 14% 10%; overflow:hidden}
.pd-shot img{max-height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 22px 20px rgba(20,30,50,.22))}
.pd-info{display:grid; gap:12px; min-width:0}
.pd-kind{font-size:14px; font-weight:600; color:var(--accent)}
.pd h1{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(38px,5vw,64px); line-height:1}
.pd-full{font-size:17px; color:var(--muted)}
.pd-tag{font-family:var(--hand); font-weight:700; font-size:clamp(26px,2.6vw,32px); line-height:1.05; color:var(--accent)}
.pd-intro{max-width:52ch; color:#4A536B}
.pd-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pd-price b{font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.pd-price small{font-size:13px; color:var(--muted)}
.pd .buy{display:grid; gap:12px; margin-top:4px}
.pd-actions{display:flex; gap:10px; flex-wrap:wrap}
.pd-actions .btn{flex:1 1 200px}
.pd-wa{background:#fff; color:var(--navy); border:1.5px solid var(--navy); text-decoration:none}
.pd-wa:hover{background:var(--soft)}
.pd-added{font-size:15px; font-weight:600; color:var(--green)}
.pd-added a{color:var(--navy); text-underline-offset:3px}
.pd-trust{list-style:none; margin:10px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; gap:8px 20px; flex-wrap:wrap; font-size:14px; font-weight:600}
.pd-trust li{display:flex; align-items:center; gap:8px}
.pd-trust li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.pd-uses{background:var(--tint); padding-block:clamp(44px,6vw,72px)}
.pd-uses h2,.pd-more h2{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(28px,3.2vw,40px); line-height:1.05; margin-bottom:20px}
.pd-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.pd-grid > div{background:#fff; border-radius:6px; padding:20px; display:grid; gap:6px; align-content:start}
.pd-grid b{font-size:17px}
.pd-grid p{font-size:15px; color:#4A536B; line-height:1.5}
.pd-more{padding-block:clamp(44px,6vw,72px)}
.pd-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px)}
.pd-split > div{display:grid; gap:12px; align-content:start}
.pd-split h2{margin-bottom:4px}
.pd-ing{font-size:18px}
.pd-care{list-style:none; margin:0; padding:0; display:grid; gap:8px; color:#4A536B}
.pd-care li{padding-left:20px; position:relative}
.pd-care li::before{content:""; position:absolute; left:0; top:.7em; width:10px; height:2px; background:var(--accent)}
.pd-link{font-weight:600; color:var(--green); text-underline-offset:3px}
.pd-pairs-h{margin-top:clamp(40px,5vw,64px)}
.pd-pairs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.pd-pairs a{display:flex; gap:16px; align-items:center; text-decoration:none; border:1.5px solid var(--line); border-radius:6px; padding:12px; min-width:0}
.pd-pairs a:hover{border-color:var(--navy)}
.pd-pairs img{width:72px; height:88px; object-fit:contain; background:var(--tint); border-radius:4px; padding:8px; flex:none}
.pd-pairs b{display:block; font-size:17px}
.pd-pairs small{color:var(--muted); font-size:14px}
.pd-sold{font-weight:600; color:#8a2b20}
.pd-sold a{color:var(--navy); text-underline-offset:3px}
.pd-story{max-width:720px; padding:0 0 clamp(28px,4vw,44px); font-size:18px; line-height:1.7}
.pd-story > * + *{margin-top:1em}
.pd-table{overflow-x:auto}
.pd-table table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.pd-table th,.pd-table td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
.pd-table th{font-size:13px; font-weight:600; color:var(--muted)}

/* pantry cards */
.prod h3 a,.prod a.shot{text-decoration:none; color:inherit}
.prod h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.prod .jp-price{font-weight:700; font-size:16px; font-variant-numeric:tabular-nums}
.prod.sold .shot img{opacity:.55}
.prod .add:disabled{background:var(--line); color:var(--muted); cursor:not-allowed}

/* catalog page */
.jp-catalog{padding-block:clamp(28px,4vw,56px)}
.jp-catalog h1{font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:clamp(34px,4.4vw,56px); line-height:1.02}
.jp-bagbar{position:sticky; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--line); padding-block:12px calc(12px + env(safe-area-inset-bottom,0px))}
.jp-bagbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

@media (max-width:860px){
  .pd-hero,.pd-split{grid-template-columns:1fr}
  .pd-shot{aspect-ratio:1/1; max-width:520px}
  .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .pd-grid,.pd-pairs{grid-template-columns:1fr}
}