/* ─── FONT FALLBACK FOR THAI SCRIPT ────────────────── */
:root{--font-ui:'Cabin','Sarabun',sans-serif;--font-body:'Nunito','Sarabun',sans-serif;}

/* ─── PAGE ────────────────────────────────────────── */
.page{margin-top:96px;}

/* ─── BREADCRUMB ──────────────────────────────────── */
.breadcrumb{padding:16px 48px;border-bottom:1px solid var(--border);background:var(--surface);}
.breadcrumb-inner{display:flex;align-items:center;gap:8px;}
.breadcrumb a{font-family:var(--font-ui);font-size:0.625rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color 0.2s;}
.breadcrumb a:hover{color:var(--text-dim);}
.breadcrumb-sep{font-size:0.625rem;color:var(--text-muted);}
.breadcrumb-current{font-family:var(--font-ui);font-size:0.625rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);}

/* ─── DETAIL LAYOUT ───────────────────────────────── */
.detail{display:block;border-bottom:1px solid var(--border);}

/* LEFT — label image */
.detail-image{display:none;}
.detail-label-img{width:auto;height:80px;object-fit:contain;display:block;box-shadow:0 3px 10px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.08);}
.detail-image-placeholder{width:60px;height:80px;background:var(--border);}
.detail-image-placeholder span{display:none;}

/* RIGHT — content */
.detail-content{padding:56px 56px;}
.detail-eyebrow{font-family:var(--font-ui);font-size:0.625rem;letter-spacing:4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
.detail-name{font-family:var(--font-ui);font-weight:700;font-size:3rem;letter-spacing:1px;text-transform:uppercase;color:var(--text);line-height:1;margin-bottom:8px;}
.detail-origin{font-family:var(--font-script);font-size:1.375rem;color:var(--text-dim);margin-bottom:32px;}

/* VARIANT SELECTOR */
.detail-variants{margin-bottom:28px;}
.detail-variants-label{font-family:var(--font-ui);font-size:0.5625rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;}
.detail-variant-btns{display:flex;gap:6px;flex-wrap:wrap;}
.detail-variant-btn{font-family:var(--font-ui);font-size:0.625rem;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);background:none;border:1px solid var(--border);padding:8px 14px;cursor:pointer;transition:all 0.2s;line-height:1.4;text-align:center;}
.detail-variant-btn:hover{border-color:var(--border-strong);color:var(--text);}
.detail-variant-btn.selected{background:var(--text);color:var(--bg);border-color:var(--text);}
.detail-variant-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.detail-variant-sub{font-size:0.5rem;opacity:0.65;display:block;margin-top:2px;}

/* PROFILES */
.detail-section-label{font-family:var(--font-ui);font-size:0.5625rem;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
.detail-profiles{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:28px;}
.profile-node{display:flex;flex-direction:column;align-items:center;gap:4px;}
.profile-shape{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;font-size:1.125rem;color:rgba(0,0,0,0.3);flex-shrink:0;}
.profile-shape.circle{border-radius:50%;}
.profile-shape.hex{clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);}
.profile-label{font-family:var(--font-ui);font-size:0.5625rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);}

/* ROAST */
.detail-roast{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.roast-label{font-family:var(--font-ui);font-size:0.6875rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);min-width:80px;}
.roast-dots{display:flex;gap:6px;align-items:center;}
.roast-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--border-strong);background:transparent;transition:background 0.2s;}
.roast-dot.filled{background:var(--text);border-color:var(--text);}

/* VARIETAL */
.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:28px;}
.detail-meta-item{}
.detail-meta-key{font-family:var(--font-ui);font-size:0.5rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.detail-meta-val{font-family:var(--font-ui);font-size:0.8125rem;letter-spacing:0.5px;color:var(--text);}

/* DESCRIPTIONS */
.detail-desc{font-family:var(--font-body);font-weight:300;font-size:1rem;color:var(--text-dim);line-height:1.8;margin-bottom:16px;}
.detail-long-desc{font-family:var(--font-body);font-weight:300;font-size:1rem;color:var(--text-dim);line-height:1.8;margin-bottom:32px;}

/* FINISH SELECTOR */
.detail-finish{margin-bottom:28px;}
.finish-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.finish-btn{font-family:var(--font-ui);font-size:0.625rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);background:none;border:1px solid var(--border);padding:8px 14px;cursor:pointer;transition:all 0.2s;white-space:nowrap;line-height:1.4;}
.finish-btn:hover{border-color:var(--border-strong);color:var(--text);}
.finish-btn.selected{background:var(--text);color:var(--bg);border-color:var(--text);}
.finish-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

/* PRICE + ADD */
.detail-purchase{display:flex;align-items:center;gap:24px;padding:24px 0;border-top:1px solid var(--border);margin-bottom:32px;}.detail-purchase-right{display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px;}
.detail-price{font-family:var(--font-ui);font-weight:700;font-size:2rem;color:#111111;}
.detail-price .price-unit{font-size:1rem;font-weight:400;color:var(--text-muted);margin-left:6px;}
.btn-primary{font-family:var(--font-ui);font-weight:700;font-size:0.75rem;letter-spacing:2.5px;text-transform:uppercase;background:var(--text);color:var(--bg);border:1px solid var(--text);padding:16px 40px;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center;}
.btn-primary:hover{background:var(--color-accent);border-color:var(--color-accent);}
.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;}

/* BREW GUIDE */
.detail-brew{border-top:1px solid var(--border);padding-top:28px;margin-bottom:32px;}
.brew-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px;}
.brew-method-card{background:var(--surface);border:1px solid var(--border);padding:16px 20px;}
.brew-method-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.brew-icon{width:32px;height:32px;flex-shrink:0;color:var(--text-dim);}
.brew-method-name{font-family:var(--font-ui);font-weight:700;font-size:0.625rem;letter-spacing:2px;text-transform:uppercase;color:var(--text);}
.brew-method-not{font-family:var(--font-body);font-size:0.8125rem;color:var(--text-muted);font-style:italic;}
.brew-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.brew-row:last-child{margin-bottom:0;}
.brew-row-key{font-family:var(--font-ui);font-size:0.5rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);}
.brew-row-val{font-family:var(--font-ui);font-size:0.75rem;color:var(--text);}

/* ─── YOU MIGHT ALSO LIKE ─────────────────────────── */
.also-like{border-top:1px solid var(--border);padding:56px 48px;}
.also-like-title{font-family:var(--font-ui);font-weight:700;font-size:0.75rem;letter-spacing:4px;text-transform:uppercase;color:var(--text);margin-bottom:32px;text-align:center;}
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);}
.also-card{padding:28px 28px;border-right:1px solid var(--border);text-decoration:none;color:inherit;display:block;transition:background 0.2s;}
.also-card:last-child{border-right:none;}
.also-card:hover{background:var(--surface);}
.also-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;}
.also-type{font-family:var(--font-ui);font-size:0.5rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.also-name{font-family:var(--font-ui);font-weight:700;font-size:1.125rem;letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-bottom:4px;}
.also-origin{font-family:var(--font-script);font-size:0.9375rem;color:var(--text-dim);margin-bottom:12px;}
.also-profiles{display:flex;gap:8px;margin-bottom:12px;}
.also-shape{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;font-size:0.75rem;color:rgba(0,0,0,0.3);}
.also-shape.circle{border-radius:50%;}
.also-shape.hex{clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);}
.also-price{font-family:var(--font-ui);font-weight:700;font-size:0.875rem;color:var(--text);}

/* ─── NOT FOUND ───────────────────────────────────── */
.not-found{padding:120px 48px;text-align:center;}
.not-found-title{font-family:var(--font-ui);font-weight:700;font-size:1.5rem;letter-spacing:2px;text-transform:uppercase;color:var(--text);margin-bottom:16px;}
.not-found-sub{font-family:var(--font-body);font-size:1rem;color:var(--text-dim);margin-bottom:32px;}

/* ─── TOAST ───────────────────────────────────────── */
/* ─── RESPONSIVE ──────────────────────────────────── */
@media(max-width:1100px){.detail-content{padding:40px;}.detail-name{font-size:2.25rem;}.detail-image{padding:32px 40px;}.detail-label-img{max-width:400px;}}
@media(max-width:960px){.breadcrumb{padding:16px 24px;}.detail-content{padding:32px 24px;}.also-like{padding:40px 24px;}.also-grid{grid-template-columns:1fr;}.also-card{border-right:none;border-bottom:1px solid var(--border);}.also-card:last-child{border-bottom:none;}.brew-grid{grid-template-columns:1fr;}}
@media(max-width:640px){.detail-name{font-size:1.75rem;}.detail-meta{grid-template-columns:1fr;}}

/* <picture> wrappers around the label images must not create boxes of their own */
.detail-purchase-label picture,.detail-image picture{display:contents;}