* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #fbfaf7; color: #1a1f2e; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }

/* Nav */
.ruo-bar { background: #1a1f2e; color: white; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.8px; padding: 9px 32px; text-align: center; }
.ruo-bar span.warn { color: #fbbf24; }
header { background: rgba(251,250,247,.92); backdrop-filter: blur(14px); border-bottom: 1px solid #ebe6dc; padding: 15px 32px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.logo { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.logo-icon { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #3b6ea5, #d4a373); display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 800; }
.logo-name { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; color: #1a1f2e; }
nav { display: flex; gap: 26px; font-size: 14px; }
nav a { color: #5c6577; font-weight: 500; }
nav a.active { color: #3b6ea5; font-weight: 600; }
nav a.warn { color: #d4a373; }
.lang-toggle { display: inline-flex; background: #f4f1ea; border-radius: 999px; padding: 3px; border: 1px solid #ebe6dc; }
.lang-btn { padding: 4px 12px; border-radius: 999px; border: none; background: transparent; color: #5c6577; font-weight: 600; font-size: 11px; font-family: 'JetBrains Mono', monospace; cursor: pointer; }
.lang-btn.active { background: #1a1f2e; color: white; }
.header-right { display: flex; align-items: center; gap: 14px; }
.btn-dark { background: #1a1f2e; color: white; border: none; padding: 9px 18px; font-size: 13px; font-weight: 600; border-radius: 999px; cursor: pointer; }

/* Pages */
.page { display: none; }
.page.active { display: block; }

/* HOME */
.hero { padding: 72px 32px 80px; position: relative; overflow: hidden; background: #fbfaf7; }
.hero-blob1 { position: absolute; top: -100px; right: -120px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, #faf0e3, transparent 60%); pointer-events: none; }
.hero-blob2 { position: absolute; top: 120px; left: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, #e8f0fa, transparent 60%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; position: relative; max-width: 1100px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; background: white; color: #27507d; border-radius: 999px; font-size: 12.5px; font-weight: 600; margin-bottom: 28px; border: 1px solid #ebe6dc; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #5b8a5b; }
h1.hero-h1 { font-size: 62px; line-height: 1.04; letter-spacing: -2px; font-weight: 700; margin-bottom: 22px; color: #1a1f2e; }
h1.hero-h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #3b6ea5; }
.hero-body { font-size: 17px; line-height: 1.72; color: #5c6577; margin-bottom: 32px; max-width: 500px; }
.hero-btns { display: flex; gap: 12px; margin-bottom: 36px; }
.btn-accent { background: #3b6ea5; color: white; border: none; padding: 13px 22px; font-size: 14px; font-weight: 600; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 20px rgba(59,110,165,.3); }
.btn-outline { background: white; color: #1a1f2e; border: 1px solid #ebe6dc; padding: 13px 22px; font-size: 14px; font-weight: 600; border-radius: 999px; cursor: pointer; }
.hero-trust { display: flex; gap: 18px; font-size: 13px; color: #5c6577; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 6px; }
.hero-img-wrap { border-radius: 24px; overflow: hidden; height: 500px; background: linear-gradient(135deg, #e8efe8, #d4e2d8); position: relative; }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* CATALOG */
.cat-page { padding: 0 0 80px; }
.cat-header { background: #1a1f2e; padding: 52px 32px 44px; position: relative; overflow: hidden; }
.cat-header-inner { max-width: 1100px; margin: 0 auto; }
.cat-header h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; color: white; margin-bottom: 8px; }
.cat-header h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #d4a373; }
.cat-meta { font-size: 14px; color: rgba(255,255,255,.5); font-family: 'JetBrains Mono', monospace; }
.cat-body { max-width: 1100px; margin: 0 auto; padding: 32px 32px 0; display: grid; grid-template-columns: 200px 1fr; gap: 32px; }

/* Sidebar */
.sidebar { position: sticky; top: 80px; }
.sidebar-label { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: #8a93a5; letter-spacing: 1.2px; margin-bottom: 10px; }
.sidebar-btn { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 9px; border: none; margin-bottom: 3px; background: transparent; color: #5c6577; font-size: 12.5px; cursor: pointer; }
.sidebar-btn.active { background: #1a1f2e; color: white; font-weight: 600; }

/* Product grid */
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #ebe6dc; }
.sec-id { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: #d4a373; letter-spacing: 1.2px; font-weight: 700; }
.sec-name { font-size: 14px; font-weight: 700; color: #1a1f2e; }
.sec-count { margin-left: auto; font-size: 11px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; }
.product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 48px; }
.product-card { background: white; border: 1px solid #ebe6dc; border-radius: 16px; padding: 20px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(15,22,41,.09); border-color: rgba(59,110,165,.35); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.card-tag { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.card-stock { font-size: 10.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; }
.card-img { height: 120px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: #f4f1ea; display: flex; align-items: center; justify-content: center; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-name { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 26px; color: #1a1f2e; letter-spacing: -0.2px; margin-bottom: 2px; }
.card-sub { font-size: 11px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; margin-bottom: 12px; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #ebe6dc; }
.card-purity-label { font-size: 9.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.8px; }
.card-purity-val { font-size: 14px; font-weight: 700; color: #1a1f2e; font-family: 'JetBrains Mono', monospace; }
.card-price-val { font-size: 15px; font-weight: 700; color: #1a1f2e; font-family: 'JetBrains Mono', monospace; }
.btn-view { font-size: 12px; font-weight: 600; color: white; background: #3b6ea5; padding: 7px 14px; border-radius: 999px; border: none; cursor: pointer; }

/* PRODUCT PAGE */
.prod-page { background: #fbfaf7; min-height: 100vh; }
.prod-header { background: #1a1f2e; padding: 36px 32px 32px; position: relative; overflow: hidden; }
.prod-header-inner { max-width: 1100px; margin: 0 auto; }
.back-btn { background: none; border: none; color: rgba(255,255,255,.45); font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; margin-bottom: 16px; padding: 0; cursor: pointer; }
.back-btn:hover { color: rgba(255,255,255,.82); }
.prod-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.prod-name { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 40px; font-weight: 400; color: white; margin: 0 0 4px; letter-spacing: -0.5px; }
.prod-sub { font-size: 12.5px; color: rgba(255,255,255,.5); font-family: 'JetBrains Mono', monospace; }
.prod-body { max-width: 1100px; margin: 0 auto; padding: 36px 32px 80px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
.prod-img-wrap { border-radius: 18px; overflow: hidden; background: #f4f1ea; margin-bottom: 20px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.prod-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ebe6dc; border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.spec-cell { background: white; padding: 13px 16px; }
.spec-label { font-size: 9.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; margin-bottom: 3px; }
.spec-val { font-size: 15px; font-weight: 700; color: #1a1f2e; font-family: 'JetBrains Mono', monospace; }
.ruo-notice { background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #f59e0b; border-radius: 10px; padding: 10px 13px; display: flex; gap: 9px; align-items: flex-start; }
.ruo-notice span.icon { font-size: 13px; flex-shrink: 0; }
.ruo-notice span.text { font-size: 11.5px; color: #92400e; line-height: 1.6; }
.prod-desc { font-size: 15px; line-height: 1.78; color: #5c6577; margin-bottom: 26px; }
.purchase-card { background: white; border: 1px solid #ebe6dc; border-radius: 18px; padding: 24px; box-shadow: 0 8px 28px rgba(15,22,41,.06); }
.purchase-label { font-size: 10px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; margin-bottom: 8px; }
.size-btns { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.size-btn { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-family: 'JetBrains Mono', monospace; font-weight: 600; border: 1px solid #ebe6dc; background: white; color: #5c6577; cursor: pointer; }
.size-btn.active { background: #1a1f2e; color: white; border: none; }
.price-display { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #ebe6dc; }
.price-big { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 42px; font-weight: 400; color: #1a1f2e; letter-spacing: -1px; line-height: 1; }
.price-unit { font-size: 12.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; }
.qty-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.qty-ctrl { display: inline-flex; align-items: center; background: #f4f1ea; border-radius: 999px; border: 1px solid #ebe6dc; overflow: hidden; }
.qty-btn { width: 38px; height: 38px; border: none; background: transparent; font-size: 18px; cursor: pointer; color: #5c6577; }
.qty-num { width: 34px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: #1a1f2e; }
.subtotal { font-size: 13px; color: #5c6577; font-family: 'JetBrains Mono', monospace; }
.subtotal strong { color: #1a1f2e; }
.cta-stack { display: flex; flex-direction: column; gap: 9px; }
.btn-primary { width: 100%; padding: 13px; background: #3b6ea5; color: white; border: none; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(59,110,165,.28); }
.btn-secondary { width: 100%; padding: 12px; background: white; color: #1a1f2e; border: 1px solid #ebe6dc; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: #f4f1ea; }

/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,.65); backdrop-filter: blur(6px); z-index: 200; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { background: white; border-radius: 20px; padding: 28px; max-width: 400px; width: 100%; box-shadow: 0 24px 64px rgba(10,20,40,.2); }
.modal-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; color: #1a1f2e; margin-bottom: 6px; }
.modal-msg { font-size: 13.5px; color: #5c6577; line-height: 1.65; margin-bottom: 18px; }
.modal-summary { background: #f4f1ea; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; }
.modal-product-name { font-weight: 700; font-size: 14px; color: #1a1f2e; }
.modal-product-spec { font-size: 12px; color: #5c6577; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.modal-total { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: #3b6ea5; }
.channel-list { display: grid; gap: 8px; margin-bottom: 18px; }
.channel-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #f4f1ea; border-radius: 12px; border: 1px solid #ebe6dc; text-decoration: none; }
.channel-row:hover { background: #e8f0fa; }
.channel-icon { font-size: 18px; }
.channel-label { font-size: 12px; font-weight: 700; color: #1a1f2e; }
.channel-val { font-size: 11.5px; color: #5c6577; font-family: 'JetBrains Mono', monospace; }
.channel-sub { margin-left: auto; font-size: 10px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; }
.modal-close { width: 100%; padding: 11px; background: #1a1f2e; color: white; border: none; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ── Cart icon in header ── */
.cart-icon-wrap { position: relative; cursor: pointer; padding: 6px; border-radius: 50%; transition: background .15s; display: flex; align-items: center; justify-content: center; }
.cart-icon-wrap:hover { background: #f4f1ea; }
.cart-icon-wrap svg { display: block; }
.cart-badge { position: absolute; top: -2px; right: -2px; background: #d4534f; color: white; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fbfaf7; }
.cart-badge.hidden { display: none; }

/* ── Cart drawer ── */
.cart-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,.45); backdrop-filter: blur(3px); z-index: 150; }
.cart-drawer-overlay.open { display: block; }
.cart-drawer { position: fixed; top: 0; right: -440px; width: 420px; max-width: 100vw; height: 100vh; background: white; box-shadow: -12px 0 40px rgba(15,22,41,.12); z-index: 160; transition: right .3s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; }
.cart-drawer.open { right: 0; }
.cart-drawer-header { padding: 22px 24px; border-bottom: 1px solid #ebe6dc; display: flex; justify-content: space-between; align-items: center; }
.cart-drawer-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; color: #1a1f2e; }
.cart-close-btn { background: none; border: none; font-size: 20px; color: #5c6577; cursor: pointer; padding: 4px 8px; }
.cart-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-empty { text-align: center; padding: 60px 20px; color: #8a93a5; font-size: 13px; font-family: 'JetBrains Mono', monospace; }
.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #ebe6dc; }
.cart-item:last-child { border-bottom: none; }
.cart-item-img { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: #f4f1ea; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 700; font-size: 14px; color: #1a1f2e; }
.cart-item-spec { font-size: 11.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.cart-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cart-qty-mini { display: inline-flex; align-items: center; background: #f4f1ea; border-radius: 999px; border: 1px solid #ebe6dc; }
.cart-qty-mini button { width: 26px; height: 26px; border: none; background: transparent; font-size: 14px; cursor: pointer; color: #5c6577; }
.cart-qty-mini span { width: 26px; text-align: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: #1a1f2e; }
.cart-item-price { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: #1a1f2e; }
.cart-remove { background: none; border: none; color: #8a93a5; font-size: 11px; cursor: pointer; padding: 0; margin-left: 8px; text-decoration: underline; }
.cart-remove:hover { color: #d4534f; }

/* Shipping progress bar */
.shipping-progress { background: #f4f1ea; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.shipping-msg { font-size: 12px; color: #5c6577; margin-bottom: 8px; font-family: 'JetBrains Mono', monospace; }
.shipping-msg strong { color: #3b6ea5; }
.shipping-msg.complete strong { color: #5b8a5b; }
.progress-bar { width: 100%; height: 6px; background: #ebe6dc; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #3b6ea5, #5b8a5b); border-radius: 999px; transition: width .35s ease; }

.cart-footer { padding: 18px 24px; border-top: 1px solid #ebe6dc; background: #fbfaf7; }
.cart-summary { margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.cart-summary-row { display: flex; justify-content: space-between; padding: 4px 0; color: #5c6577; }
.cart-summary-row.total { font-size: 17px; font-weight: 700; color: #1a1f2e; padding-top: 10px; border-top: 1px solid #ebe6dc; margin-top: 6px; }
.cart-summary-row.total span:last-child { color: #3b6ea5; }
.cart-summary-row.free-ship span:last-child { color: #5b8a5b; font-weight: 700; }
.cart-checkout-btn { width: 100%; padding: 13px; background: #3b6ea5; color: white; border: none; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(59,110,165,.28); }
.cart-checkout-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ── Product page new sections ── */
.info-block { background: white; border: 1px solid #ebe6dc; border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.info-block-title { font-size: 10.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; letter-spacing: 1.2px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.info-block-title .dot { width: 5px; height: 5px; border-radius: 50%; background: #3b6ea5; }
.info-block-content { font-size: 13.5px; color: #5c6577; line-height: 1.7; }
.info-block-content strong { color: #1a1f2e; }

/* Related products */
.related-section { max-width: 1100px; margin: 0 auto; padding: 60px 32px 0; border-top: 1px solid #ebe6dc; }
.related-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 26px; color: #1a1f2e; margin-bottom: 4px; }
.related-sub { font-size: 12.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.related-card { background: white; border: 1px solid #ebe6dc; border-radius: 12px; padding: 14px; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.related-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,22,41,.08); }
.related-img { height: 80px; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: #f4f1ea; display: flex; align-items: center; justify-content: center; }
.related-img img { width: 100%; height: 100%; object-fit: contain; }
.related-name { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 17px; color: #1a1f2e; margin-bottom: 2px; }
.related-sub-text { font-size: 10.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; line-height: 1.4; min-height: 28px; }
.related-price { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #1a1f2e; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1a1f2e; color: white; padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; z-index: 300; box-shadow: 0 12px 32px rgba(15,22,41,.25); transition: transform .3s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; gap: 8px; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast-icon { color: #5b8a5b; font-size: 15px; }

/* mobile */

}

/* ── Measurement page ── */
.meas-hero { background: linear-gradient(145deg, #1a1f2e 0%, #0f1f3a 100%); color: white; padding: 56px 32px 44px; position: relative; overflow: hidden; }
.meas-hero::before { content: ''; position: absolute; top: -100px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(59,110,165,.25), transparent 65%); pointer-events: none; }
.meas-hero::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(212,163,115,.15), transparent 65%); pointer-events: none; }
.meas-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.meas-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #d4a373; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 12px; }
.meas-hero h1 { font-size: 48px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 16px; }
.meas-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #d4a373; }
.meas-hero p { font-size: 15.5px; color: rgba(255,255,255,.65); line-height: 1.72; max-width: 620px; }

.meas-body { max-width: 1100px; margin: 0 auto; padding: 48px 32px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

/* Calculator card */
.calc-card { background: white; border: 1px solid #ebe6dc; border-radius: 20px; padding: 32px; box-shadow: 0 12px 40px rgba(15,22,41,.06); position: sticky; top: 80px; }
.calc-step { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid #ebe6dc; }
.calc-step:last-of-type { border-bottom: none; margin-bottom: 16px; padding-bottom: 0; }
.calc-step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.calc-step-num { width: 24px; height: 24px; border-radius: 50%; background: #1a1f2e; color: white; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.calc-step-title { font-size: 13.5px; font-weight: 700; color: #1a1f2e; }
.calc-step-sub { font-size: 11.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; margin-bottom: 12px; }

/* Dropdown */
.calc-select { width: 100%; padding: 12px 14px; border: 1px solid #ebe6dc; border-radius: 10px; font-size: 13.5px; font-family: inherit; background: white; cursor: pointer; color: #1a1f2e; }
.calc-select:focus { outline: none; border-color: #3b6ea5; }

/* Option buttons (syringe, vial, dose) */
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-btn { flex: 1; min-width: 80px; padding: 12px 10px; border: 1px solid #ebe6dc; background: white; border-radius: 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #5c6577; cursor: pointer; transition: all .15s; text-align: center; font-weight: 600; }
.opt-btn:hover { border-color: #3b6ea5; color: #3b6ea5; }
.opt-btn.active { background: #1a1f2e; color: white; border-color: #1a1f2e; }
.opt-btn-label { display: block; font-size: 12px; margin-top: 2px; opacity: .7; font-weight: 400; }

/* Input with unit toggle */
.input-with-unit { display: flex; gap: 0; border: 1px solid #ebe6dc; border-radius: 10px; overflow: hidden; background: white; }
.input-with-unit.focused { border-color: #3b6ea5; }
.input-with-unit input { flex: 1; padding: 12px 14px; border: none; font-size: 15px; font-family: 'JetBrains Mono', monospace; background: transparent; color: #1a1f2e; font-weight: 700; outline: none; }
.unit-toggle { display: flex; background: #f4f1ea; border-left: 1px solid #ebe6dc; }
.unit-btn { padding: 0 14px; border: none; background: transparent; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: #8a93a5; cursor: pointer; }
.unit-btn.active { background: #1a1f2e; color: white; }

/* Results */
.results-card { background: linear-gradient(145deg, #1a1f2e 0%, #0f1f3a 100%); border-radius: 18px; padding: 28px; color: white; position: relative; overflow: hidden; }
.results-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(59,110,165,.3), transparent 65%); }
.results-inner { position: relative; }
.result-step { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.result-step:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.result-step-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(212,163,115,.9); letter-spacing: 1.2px; margin-bottom: 8px; font-weight: 700; }
.result-step-msg { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; margin-bottom: 8px; }
.result-value { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 42px; font-weight: 400; letter-spacing: -0.8px; line-height: 1; color: white; }
.result-value .unit { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: rgba(255,255,255,.5); font-style: normal; margin-left: 6px; font-weight: 400; }
.result-value.muted { color: rgba(255,255,255,.3); }
.result-helper { font-size: 11.5px; color: rgba(255,255,255,.45); font-family: 'JetBrains Mono', monospace; margin-top: 8px; }

.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.result-stat { }
.result-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: rgba(212,163,115,.9); letter-spacing: 1.2px; margin-bottom: 4px; font-weight: 700; }
.result-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: white; }

.result-warning { background: rgba(212,83,79,.12); border: 1px solid rgba(212,83,79,.4); border-radius: 10px; padding: 11px 14px; font-size: 12.5px; color: #fca5a5; display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; line-height: 1.6; }

.reset-btn { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); padding: 9px 18px; border-radius: 999px; font-size: 12px; font-family: 'JetBrains Mono', monospace; cursor: pointer; margin-top: 18px; transition: all .15s; }
.reset-btn:hover { border-color: rgba(255,255,255,.5); color: white; }

/* Formulas */
.formulas-section { max-width: 1100px; margin: 0 auto; padding: 20px 32px 60px; }
.section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #d4a373; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 8px; }
.section-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 32px; color: #1a1f2e; margin-bottom: 28px; font-weight: 400; letter-spacing: -0.5px; }
.formulas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.formula-card { background: white; border: 1px solid #ebe6dc; border-radius: 14px; padding: 22px; }
.formula-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #d4a373; letter-spacing: 1.2px; font-weight: 700; margin-bottom: 10px; }
.formula-title { font-size: 16px; font-weight: 700; color: #1a1f2e; margin-bottom: 10px; }
.formula-eq { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #3b6ea5; background: #f4f1ea; padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; line-height: 1.5; }
.formula-desc { font-size: 12.5px; color: #5c6577; line-height: 1.6; margin-bottom: 8px; }
.formula-example { font-size: 11.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; font-style: italic; }
.formula-example strong { color: #1a1f2e; font-style: normal; }

/* FAQ */
.faq-section { max-width: 900px; margin: 0 auto; padding: 20px 32px 80px; }
.faq-item { border-bottom: 1px solid #ebe6dc; }
.faq-q { width: 100%; padding: 18px 0; background: none; border: none; text-align: left; font-size: 15px; font-weight: 600; color: #1a1f2e; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: inherit; }
.faq-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #f4f1ea; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #3b6ea5; transition: transform .2s; font-weight: 700; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.faq-item.open .faq-a { max-height: 600px; padding-bottom: 18px; }
.faq-a-content { font-size: 13.5px; color: #5c6577; line-height: 1.75; }
.faq-a-content strong { color: #1a1f2e; }
.faq-a-content ul { margin: 8px 0 0 20px; }
.faq-a-content li { margin-bottom: 4px; }

/* Medical disclaimer */
.med-disclaimer { max-width: 900px; margin: 0 auto; padding: 0 32px 60px; }
.med-disclaimer-box { background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #f59e0b; border-radius: 10px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; }
.med-disclaimer-box .icon { font-size: 18px; flex-shrink: 0; }
.med-disclaimer-box .text { font-size: 12.5px; color: #92400e; line-height: 1.7; }
.med-disclaimer-box strong { font-weight: 700; }

/* mobile */

}

/* ═══════════════════════════════════════
   RESPONSIVE DESIGN — MOBILE FIRST
   ═══════════════════════════════════════ */

/* Tablets & small laptops */
@media (max-width: 1024px) {
  .hero-grid { gap: 32px; }
  h1.hero-h1 { font-size: 48px; }
  .prod-body { grid-template-columns: 1fr 1fr; gap: 28px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-body { grid-template-columns: 180px 1fr; gap: 20px; }
  .meas-body { grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px 24px 60px; }
  .formulas-grid { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablets */
@media (max-width: 860px) {
  header { padding: 13px 18px; }
  .logo-name { font-size: 20px; }
  nav { gap: 18px; font-size: 13px; }
  .btn-dark { padding: 8px 14px; font-size: 12px; }
  .hero { padding: 52px 24px 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-img-wrap { height: 340px; order: -1; }
  h1.hero-h1 { font-size: 44px; }
  .prod-body { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 60px; }
  .cat-body { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px 0; }
  .sidebar { position: static; }
  .meas-body { grid-template-columns: 1fr; gap: 24px; }
  .calc-card { position: static; padding: 24px; }
  .formulas-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile — main breakpoint */
@media (max-width: 700px) {
  /* Navbar — hamburger menu */
  header { padding: 12px 16px; }
  .logo-icon { width: 24px; height: 24px; font-size: 12px; }
  .logo-name { font-size: 19px; }
  nav { display: none; }
  nav.mobile-open {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: 56px; left: 0; right: 0;
    background: rgba(251,250,247,.98); backdrop-filter: blur(14px);
    padding: 20px 24px; border-bottom: 1px solid #ebe6dc;
    box-shadow: 0 8px 24px rgba(15,22,41,.08);
    z-index: 40;
  }
  nav.mobile-open a {
    padding: 14px 0; font-size: 16px;
    border-bottom: 1px solid #ebe6dc;
  }
  nav.mobile-open a:last-child { border-bottom: none; }
  .hamburger-hide { display: none !important; }
  .hamburger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 8px; cursor: pointer;
  }
  .hamburger span {
    width: 18px; height: 2px; background: #1a1f2e;
    border-radius: 2px; transition: transform .25s, opacity .2s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .btn-dark { display: none; }
  .ruo-bar { font-size: 10px; padding: 7px 12px; letter-spacing: 0.3px; }

  /* Hero */
  .hero { padding: 36px 18px 44px; }
  .hero-blob1, .hero-blob2 { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-img-wrap { height: 260px; border-radius: 16px; }
  h1.hero-h1 { font-size: 34px; line-height: 1.1; letter-spacing: -1px; margin-bottom: 16px; }
  .hero-body { font-size: 15px; margin-bottom: 22px; }
  .hero-btns { flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .btn-accent, .btn-outline { width: 100%; padding: 14px; font-size: 14px; }
  .hero-badge { font-size: 11px; padding: 4px 10px; margin-bottom: 20px; }
  .hero-trust { gap: 12px 16px; font-size: 12px; }

  /* Catalog page — fully reworked for mobile */
  .cat-header { padding: 28px 18px 22px; }
  .cat-header h1 { font-size: 26px; letter-spacing: -.4px; }
  .cat-meta { font-size: 11px; line-height: 1.5; }
  .cat-body { grid-template-columns: 1fr; gap: 0; padding: 0; }

  /* Sidebar = sticky horizontal chips bar */
  .sidebar {
    position: sticky; top: 56px; z-index: 30;
    background: #fbfaf7;
    padding: 12px 16px 10px; margin: 0;
    border-bottom: 1px solid #ebe6dc;
  }
  .sidebar-label { display: none; }
  #sidebar-btns {
    display: flex; gap: 6px; overflow-x: auto;
    margin: 0; padding: 0 0 2px;
    scrollbar-width: none;
  }
  #sidebar-btns::-webkit-scrollbar { display: none; }
  .sidebar-btn {
    flex-shrink: 0; width: auto;
    white-space: nowrap; padding: 7px 13px;
    border-radius: 999px;
    background: white; border: 1px solid #ebe6dc;
    font-size: 11.5px; margin-bottom: 0;
    color: #5c6577; font-weight: 600;
  }
  .sidebar-btn.active {
    background: #1a1f2e; color: white; border-color: #1a1f2e;
  }

  /* Product grid — horizontal card layout */
  #product-grid { padding: 16px; }
  .section-heading {
    padding: 18px 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid #ebe6dc;
  }
  .sec-id { font-size: 9.5px; }
  .sec-name { font-size: 12.5px; }
  .sec-count { font-size: 10px; }

  .product-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
  .product-card {
    padding: 12px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    align-items: stretch;
  }
  /* Top badges on mobile — compact and in the info side */
  .card-top {
    order: 1;
    grid-column: 2;
    margin-bottom: 4px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .card-top > div { gap: 4px !important; }
  .card-tag { font-size: 9.5px; padding: 2px 7px; }
  .card-stock { font-size: 9.5px; }
  .card-stock span:first-child { width: 4px; height: 4px; }

  .card-img {
    grid-row: 1 / 4;
    grid-column: 1;
    height: 100%; min-height: 84px;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 8px;
    align-self: stretch;
  }
  .card-img img { object-fit: cover; }

  /* Name + sub */
  .card-name {
    grid-column: 2;
    order: 2;
    font-size: 18px;
    margin-bottom: 1px;
    line-height: 1.15;
  }
  .card-sub {
    grid-column: 2;
    order: 3;
    font-size: 10.5px;
    margin-bottom: 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Bottom — price + view button */
  .card-bottom {
    grid-column: 2;
    order: 4;
    padding-top: 6px;
    gap: 8px;
    align-items: center;
  }
  .card-bottom > div { flex: 0 0 auto; }
  .card-bottom > div:first-child { display: none; } /* hide purity on mobile for space */
  .card-bottom > div:nth-child(2) { flex: 1; text-align: left; }
  .card-purity-label { display: none; }
  .card-price-val { font-size: 14px; color: #3b6ea5; }
  .card-price-val span { font-size: 9.5px; }

  .btn-view {
    padding: 6px 11px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Product detail page */
  .prod-header { padding: 24px 18px 22px; }
  .prod-name { font-size: 30px; }
  .prod-sub { font-size: 11.5px; }
  .prod-body { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px 140px; }
  .prod-img-wrap { aspect-ratio: 1/1; max-height: 280px; }
  .prod-desc { font-size: 14px; margin-bottom: 20px; }
  .purchase-card { padding: 20px; border-radius: 14px; }
  .price-big { font-size: 36px; }
  .qty-wrap { flex-wrap: wrap; gap: 10px; }

  /* Sticky buy bar on mobile */
  .mobile-sticky-buy {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: white; border-top: 1px solid #ebe6dc;
    padding: 12px 16px; gap: 10px; z-index: 80;
    box-shadow: 0 -4px 20px rgba(15,22,41,.08);
    align-items: center;
  }
  .mobile-sticky-buy .price-mini {
    flex: 0 0 auto; font-family: 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 15px; color: #1a1f2e;
  }
  .mobile-sticky-buy button { flex: 1; padding: 12px; font-size: 13px; }

  .info-block { padding: 14px; border-radius: 12px; }

  /* Related products */
  .related-section { padding: 40px 16px 0; }
  .related-title { font-size: 22px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .related-card { padding: 12px; }
  .related-img { height: 70px; }
  .related-name { font-size: 15px; }

  /* Cart drawer — full screen */
  .cart-drawer { width: 100vw; right: -100vw; }
  .cart-drawer.open { right: 0; }
  .cart-item { gap: 10px; padding: 12px 0; }
  .cart-item-img { width: 50px; height: 50px; }

  /* Modal */
  .modal { padding: 22px; border-radius: 16px; }
  .modal-title { font-size: 20px; }

  /* Measurement page */
  .meas-hero { padding: 36px 18px 32px; }
  .meas-hero h1 { font-size: 28px; }
  .meas-hero p { font-size: 14px; }
  .meas-body { grid-template-columns: 1fr; gap: 18px; padding: 24px 16px 40px; }
  .calc-card { padding: 20px; border-radius: 14px; position: static; }
  .results-card { padding: 22px; border-radius: 14px; }
  .result-value { font-size: 36px; }
  .formulas-section { padding: 16px 16px 40px; }
  .formulas-grid { grid-template-columns: 1fr; gap: 12px; }
  .formula-card { padding: 18px; }
  .faq-section { padding: 16px 16px 60px; }
  .section-title { font-size: 26px; }
  .faq-q { font-size: 14px; padding: 15px 0; }
  .med-disclaimer { padding: 0 16px 40px; }

  /* ── Measurement — touch-optimised inputs ── */
  /* 16px prevents iOS auto-zoom on input focus */
  .input-with-unit input { font-size: 16px; padding: 14px 14px; min-height: 48px; }
  .unit-btn { min-height: 48px; padding: 0 16px; font-size: 13px; }
  .calc-select {
    font-size: 16px; padding: 14px 40px 14px 14px; min-height: 48px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6577' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    touch-action: manipulation;
  }

  /* Opt buttons — at least 44px tall, text never wraps awkwardly */
  .opt-row { gap: 6px; }
  .opt-btn {
    min-width: 0; flex: 1 1 calc(50% - 3px);
    padding: 12px 8px; font-size: 12.5px;
    min-height: 44px; touch-action: manipulation;
  }

  /* Results card — clearer hierarchy on small screens */
  .result-step-label { font-size: 10px; letter-spacing: 1px; }
  .result-step-msg { font-size: 12.5px; }
  .result-value { font-size: 38px; line-height: 1.05; }
  .result-value .unit { font-size: 13px; }
  .result-stats { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 16px; }
  .result-stat-val { font-size: 16px; }
  .result-stat-label { font-size: 9px; }
  .result-helper { font-size: 11px; }
  .reset-btn { width: 100%; text-align: center; margin-top: 14px; padding: 11px 18px; }

  /* Formula cards — readable mono text on small screens */
  .formula-eq { font-size: 11.5px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .formula-desc { font-size: 12px; }
  .formula-example { font-size: 11px; }

  /* Quality standards — 6-item methods grid on mobile */
  .methods-grid { grid-template-columns: 1fr 1fr; border-radius: 12px; }
  .method-cell { padding: 14px 12px; }
  .method-name { font-size: 12.5px; }
  .method-desc { font-size: 11.5px; }
  .quality-side { padding: 20px; border-radius: 14px; }
  .qs-item { padding: 12px 0; gap: 10px; }
  .qs-item-key { font-size: 13.5px; min-width: 68px; }
  .qs-item-val { font-size: 12px; line-height: 1.45; }

  /* Toast */
  .toast { bottom: 90px; font-size: 13px; padding: 10px 18px; }

  /* Header cart icon position */
  .cart-icon-wrap { padding: 4px; }
  .header-right { gap: 8px; }

  /* Global touch targets — prevent accidental taps */
  button, a, [role="button"] { touch-action: manipulation; }
}

/* Small phones */
@media (max-width: 380px) {
  h1.hero-h1 { font-size: 30px; }
  .prod-name { font-size: 26px; }
  .card-name { font-size: 20px; }
  .result-value { font-size: 32px; }
  .hero-trust { font-size: 11px; }
}


.mobile-sticky-buy { display: none; }

/* Quick search on homepage */
.quick-search-section { background: #f4f1ea; padding: 32px 32px 40px; border-bottom: 1px solid #ebe6dc; }
.quick-search-inner { max-width: 1100px; margin: 0 auto; }
.qs-label { font-size: 11px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; letter-spacing: 1.2px; margin-bottom: 14px; text-align: center; }
.qs-input-wrap { position: relative; max-width: 560px; margin: 0 auto 20px; }
.qs-input { width: 100%; padding: 15px 48px 15px 48px; border: 1px solid #ebe6dc; border-radius: 999px; font-size: 15px; font-family: inherit; background: white; box-shadow: 0 4px 20px rgba(15,22,41,.06); outline: none; transition: border-color .18s, box-shadow .18s; }
.qs-input:focus { border-color: #3b6ea5; box-shadow: 0 4px 20px rgba(59,110,165,.15); }
.qs-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #8a93a5; pointer-events: none; }
.qs-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: #ebe6dc; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; color: #5c6577; font-size: 14px; display: none; align-items: center; justify-content: center; }
.qs-clear.visible { display: flex; }
.qs-results { max-width: 560px; margin: 0 auto; background: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(15,22,41,.1); overflow: hidden; max-height: 400px; overflow-y: auto; display: none; }
.qs-results.visible { display: block; }
.qs-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #ebe6dc; transition: background .15s; }
.qs-result-item:last-child { border-bottom: none; }
.qs-result-item:hover { background: #f4f1ea; }
.qs-result-img { width: 44px; height: 44px; border-radius: 8px; background: #f4f1ea; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qs-result-img img { width: 100%; height: 100%; object-fit: contain; }
.qs-result-info { flex: 1; min-width: 0; }
.qs-result-name { font-weight: 700; font-size: 14px; color: #1a1f2e; }
.qs-result-sub { font-size: 11.5px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-result-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; }
.qs-empty { padding: 24px; text-align: center; color: #8a93a5; font-size: 13px; }
.qs-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 700px; margin: 0 auto; }
.qs-tag-chip { padding: 5px 13px; background: white; border: 1px solid #ebe6dc; border-radius: 999px; font-size: 12px; color: #5c6577; cursor: pointer; transition: all .15s; font-family: 'JetBrains Mono', monospace; }
.qs-tag-chip:hover { background: #3b6ea5; color: white; border-color: #3b6ea5; }

@media (max-width: 700px) {
  .quick-search-section { padding: 24px 16px 28px; }
  .qs-label { font-size: 10px; }
  .qs-input { font-size: 14px; padding: 13px 44px 13px 44px; }
  .qs-tags { gap: 6px; }
  .qs-tag-chip { font-size: 11px; padding: 4px 10px; }
}

/* Back-to-top button */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #1a1f2e; color: white; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 24px rgba(15,22,41,.2);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 70;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #3b6ea5; }

@media (max-width: 700px) {
  .back-to-top { bottom: 90px; right: 16px; width: 40px; height: 40px; }
  .back-to-top.has-sticky { bottom: 90px; }
}

/* Image lazy loading fade-in */
img.lazy { opacity: 0; transition: opacity .3s; }
img.lazy.loaded { opacity: 1; }

/* ── Philosophy ── */
.philosophy { padding: 88px 32px; background: #fbfaf7; }
.phil-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.phil-img { border-radius: 20px; overflow: hidden; height: 360px; }
.phil-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.section-eyebrow-warm { font-size: 13px; color: #d4a373; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 10px; }
h2.section-h2 { font-size: 44px; font-weight: 700; letter-spacing: -1.2px; color: #1a1f2e; line-height: 1.1; margin-bottom: 20px; }
h2.section-h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #3b6ea5; }
.section-body { font-size: 16px; line-height: 1.78; color: #5c6577; max-width: 500px; }
.section-body + .section-body { margin-top: 16px; }

/* ── Quality ── */
.quality { padding: 88px 32px; background: #f4f1ea; }
.quality-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ebe6dc; border-radius: 16px; overflow: hidden; margin-top: 24px; }
.method-cell { background: white; padding: 20px; }
.method-name { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: #3b6ea5; letter-spacing: 0.3px; margin-bottom: 4px; }
.method-desc { font-size: 13px; color: #5c6577; }
.quality-side { background: white; border: 1px solid #ebe6dc; border-radius: 20px; padding: 28px; box-shadow: 0 8px 32px rgba(15,22,41,.06); }
.qs-title-label { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: #8a93a5; letter-spacing: 1.2px; margin-bottom: 18px; }
.qs-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #ebe6dc; }
.qs-item:last-of-type { border-bottom: none; }
.qs-item-key { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: #1a1f2e; min-width: 84px; flex-shrink: 0; }
.qs-item-val { font-size: 13px; color: #5c6577; line-height: 1.5; }
.qs-foot { font-size: 12px; color: #8a93a5; padding-top: 14px; border-top: 1px solid #ebe6dc; margin-top: 14px; line-height: 1.6; }

/* ── Science ── */
.science { padding: 88px 32px; background: #fbfaf7; }
.science-inner { max-width: 1100px; margin: 0 auto; }
.science-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.science-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.science-card { display: flex; gap: 18px; padding: 22px; background: white; border: 1px solid #ebe6dc; border-radius: 16px; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.science-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,22,41,.08); }
.sc-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.sc-info { flex: 1; min-width: 0; }
.sc-tag { font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: #8a93a5; letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase; }
.sc-title { font-size: 16px; font-weight: 700; color: #1a1f2e; line-height: 1.4; margin-bottom: 8px; }
.sc-meta { font-size: 12px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; }
.sc-read { font-size: 13px; color: #3b6ea5; font-weight: 600; margin-top: 10px; }

/* ── Contact ── */
.contact { padding: 88px 32px; background: linear-gradient(145deg, #1a1f2e 0%, #0f1f3a 100%); color: white; position: relative; overflow: hidden; }
.contact::before { content: ''; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(59,110,165,.2), transparent 65%); }
.contact-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px 0; align-items: center; }
.contact h2 { color: white; }
.contact h2 em { color: #d4a373; }
.contact .section-body { color: rgba(255,255,255,.65); max-width: 450px; }
.channel-list-dark { display: flex; flex-direction: column; gap: 10px; }
.channel-row-dark { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; transition: background .15s; text-decoration: none; }
.channel-row-dark:hover { background: rgba(59,110,165,.15); border-color: rgba(59,110,165,.3); }
.channel-row-dark .channel-icon { font-size: 22px; }
.channel-row-dark .channel-label { color: white; font-size: 14px; font-weight: 700; }
.channel-row-dark .channel-val { color: rgba(255,255,255,.7); font-size: 13px; font-family: 'JetBrains Mono', monospace; margin-top: 2px; }
.channel-row-dark .channel-sub { color: rgba(212,163,115,.8); font-size: 11px; font-family: 'JetBrains Mono', monospace; margin-left: auto; }

/* ── Footer ── */
footer.site-footer { background: #0a1220; color: rgba(255,255,255,.6); padding: 48px 32px 28px; }
.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 32px; }
.footer-brand .footer-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.footer-brand .logo-name { color: white; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.65; max-width: 300px; }
.footer-col-h { font-size: 11px; color: rgba(255,255,255,.4); font-family: 'JetBrains Mono', monospace; letter-spacing: 1.2px; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,.65); font-size: 13.5px; transition: color .15s; cursor: pointer; }
.footer-col a:hover { color: white; }
.footer-bottom { max-width: 1100px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: rgba(255,255,255,.4); font-family: 'JetBrains Mono', monospace; }

/* ── Warning page ── */
.warning-page { background: #fbfaf7; min-height: 80vh; }
.warning-header { background: linear-gradient(145deg, #1a1f2e 0%, #3f1818 100%); padding: 56px 32px 44px; position: relative; overflow: hidden; }
.warning-header::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(212,83,79,.2), transparent 65%); }
.warning-header-inner { max-width: 900px; margin: 0 auto; position: relative; }
.warning-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(212,83,79,.9); letter-spacing: 1.5px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.warning-header h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; color: white; line-height: 1.1; margin-bottom: 12px; }
.warning-header h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #fca5a5; }
.warning-subtitle { font-size: 15px; color: rgba(255,255,255,.65); max-width: 620px; line-height: 1.7; }
.warning-body { max-width: 900px; margin: 0 auto; padding: 48px 32px 24px; }
.warning-card { background: white; border: 1px solid #ebe6dc; border-radius: 16px; padding: 28px; margin-bottom: 16px; display: flex; gap: 20px; align-items: flex-start; }
.warning-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #fee2e2; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.warning-card-content h3 { font-size: 18px; font-weight: 700; color: #1a1f2e; margin-bottom: 10px; }
.warning-card-content p { font-size: 14px; line-height: 1.75; color: #5c6577; }
.warning-foot { max-width: 900px; margin: 0 auto; padding: 20px 32px 80px; display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8a93a5; }
.warning-back-btn { background: none; border: none; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #3b6ea5; cursor: pointer; padding: 0; font-weight: 600; }

/* Mobile RWD for new sections */
@media (max-width: 860px) {
  .philosophy { padding: 56px 24px; }
  .phil-grid { grid-template-columns: 1fr; gap: 32px; }
  .phil-img { height: 240px; }
  .quality { padding: 56px 24px; }
  .quality-inner { grid-template-columns: 1fr; gap: 28px; }
  .science { padding: 56px 24px; }
  .science-grid { grid-template-columns: 1fr; }
  .contact { padding: 56px 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; padding: 24px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  h2.section-h2 { font-size: 32px; }
  .warning-header h1 { font-size: 30px; }
}
@media (max-width: 700px) {
  .philosophy, .quality, .science, .contact { padding: 44px 18px; }
  .phil-grid, .quality-inner { gap: 24px; }
  .methods-grid { grid-template-columns: 1fr 1fr; }
  h2.section-h2 { font-size: 28px; }
  .warning-header { padding: 36px 18px 30px; }
  .warning-body { padding: 32px 18px 16px; }
  .warning-card { padding: 20px; flex-direction: column; gap: 12px; }
  .warning-card-icon { width: 40px; height: 40px; }
  .warning-header h1 { font-size: 26px; }
  footer.site-footer { padding: 36px 18px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Bulk discount info */
.bulk-discount-info { margin-top: 14px; padding: 12px 14px; background: linear-gradient(135deg, #faf0e3 0%, #fff 100%); border: 1px solid #f0dcb4; border-radius: 10px; font-size: 12.5px; color: #8b5a2b; line-height: 1.6; }
.bulk-discount-info strong { color: #6b4020; }
.bulk-discount-info .icon-tag { display: inline-block; background: #d4a373; color: white; font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 8px; border-radius: 999px; margin-right: 6px; font-weight: 700; letter-spacing: 0.3px; }

.discount-applied { color: #5b8a5b; font-size: 11.5px; font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-top: 4px; }
.price-strike { text-decoration: line-through; color: #8a93a5; margin-right: 6px; font-weight: 400; }

.cart-summary-row.discount span:last-child { color: #5b8a5b; font-weight: 700; }

/* Order message preview */
.order-msg-preview {
  background: #f4f1ea; border: 1px solid #ebe6dc;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
  max-height: 180px; overflow-y: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: #1a1f2e; line-height: 1.6; white-space: pre-wrap;
}
.order-msg-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.order-msg-label {
  font-size: 10px; color: #8a93a5; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px; font-weight: 700;
}
.order-msg-copy-btn {
  font-size: 10.5px; background: white; border: 1px solid #ebe6dc;
  border-radius: 999px; padding: 3px 10px; color: #5c6577;
  cursor: pointer; font-weight: 600; font-family: 'JetBrains Mono', monospace;
  transition: all .15s;
}
.order-msg-copy-btn:hover { background: #3b6ea5; color: white; border-color: #3b6ea5; }
.order-msg-copy-btn.copied { background: #5b8a5b; color: white; border-color: #5b8a5b; }

.order-id-tag {
  display: inline-block; background: #1a1f2e; color: #d4a373;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.5px;
  font-weight: 700;
}

.channel-row { position: relative; }
.channel-row .auto-fill-label {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: #5b8a5b; font-family: 'JetBrains Mono', monospace;
  font-weight: 700; letter-spacing: 0.5px;
  background: #eef6ee; padding: 2px 6px; border-radius: 4px;
}

/* Knowledge page */
.kp-hero { background: linear-gradient(145deg, #1a1f2e 0%, #0f2b3d 100%); color: white; padding: 56px 32px 48px; position: relative; overflow: hidden; }
.kp-hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(91,138,91,.2), transparent 65%); }
.kp-hero::after { content: ''; position: absolute; bottom: -60px; left: -40px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(59,110,165,.15), transparent 65%); }
.kp-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.kp-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #d4a373; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 14px; }
.kp-hero h1 { font-size: 44px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin-bottom: 14px; }
.kp-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #d4a373; }
.kp-hero p { font-size: 15.5px; color: rgba(255,255,255,.65); max-width: 620px; line-height: 1.72; }

.kp-filter-bar { max-width: 1100px; margin: 0 auto; padding: 28px 32px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.kp-filter-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid #ebe6dc; background: white; font-size: 12.5px; color: #5c6577; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-weight: 600; transition: all .15s; }
.kp-filter-btn:hover { border-color: #3b6ea5; color: #3b6ea5; }
.kp-filter-btn.active { background: #1a1f2e; color: white; border-color: #1a1f2e; }

.kp-body { max-width: 1100px; margin: 0 auto; padding: 32px 32px 80px; }
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kp-card { background: white; border: 1px solid #ebe6dc; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.kp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,22,41,.1); }
.kp-card-cover { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.kp-card-cover-pattern { position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle at 20% 30%, white 1px, transparent 1.5px), radial-gradient(circle at 70% 70%, white 1px, transparent 1.5px); background-size: 40px 40px; }
.kp-card-icon { font-size: 42px; z-index: 1; }
.kp-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.kp-card-meta { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-family: 'JetBrains Mono', monospace; color: #8a93a5; letter-spacing: 0.8px; margin-bottom: 10px; text-transform: uppercase; }
.kp-card-tag { font-weight: 700; letter-spacing: 1.2px; }
.kp-card-date::before { content: '·'; margin-right: 8px; color: #cbc9c3; }
.kp-card-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; color: #1a1f2e; margin-bottom: 8px; line-height: 1.3; letter-spacing: -0.3px; }
.kp-card-excerpt { font-size: 13.5px; color: #5c6577; line-height: 1.65; flex: 1; margin-bottom: 14px; }
.kp-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #ebe6dc; }
.kp-card-read { font-size: 12px; color: #3b6ea5; font-weight: 700; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; }
.kp-card-time { font-size: 11px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; }

/* Article detail modal */
.article-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,.6); backdrop-filter: blur(8px); z-index: 200; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.article-overlay.open { display: flex; }
.article-modal { background: white; border-radius: 20px; max-width: 720px; width: 100%; box-shadow: 0 24px 80px rgba(10,20,40,.24); overflow: hidden; }
.article-modal-cover { height: 220px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.article-modal-cover-pattern { position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle at 20% 30%, white 1px, transparent 1.5px), radial-gradient(circle at 70% 70%, white 1px, transparent 1.5px); background-size: 40px 40px; }
.article-modal-icon { font-size: 72px; z-index: 1; }
.article-close-btn { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,.45); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; z-index: 2; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.article-close-btn:hover { background: rgba(0,0,0,.7); }
.article-modal-body { padding: 32px 36px 40px; }
.article-meta-row { display: flex; align-items: center; gap: 10px; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #8a93a5; margin-bottom: 16px; letter-spacing: 0.8px; text-transform: uppercase; }
.article-meta-row .article-tag { color: #d4a373; font-weight: 700; }
.article-meta-row .article-dot { color: #cbc9c3; }
.article-title { font-family: 'Instrument Serif', serif; font-size: 32px; color: #1a1f2e; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; font-weight: 400; }
.article-subtitle { font-size: 15px; color: #5c6577; line-height: 1.7; margin-bottom: 26px; font-style: italic; }
.article-content { font-size: 14.5px; color: #3a4254; line-height: 1.85; }
.article-content p { margin-bottom: 14px; }
.article-content h3 { font-size: 17px; color: #1a1f2e; font-weight: 700; margin-top: 26px; margin-bottom: 10px; }
.article-content ul { margin: 10px 0 14px 22px; }
.article-content li { margin-bottom: 6px; }
.article-content em { color: #3b6ea5; font-style: italic; }
.article-content strong { color: #1a1f2e; }
.article-refs { margin-top: 28px; padding-top: 20px; border-top: 1px solid #ebe6dc; font-size: 12px; color: #8a93a5; font-family: 'JetBrains Mono', monospace; line-height: 1.65; }
.article-refs-label { font-weight: 700; letter-spacing: 1.2px; color: #5c6577; margin-bottom: 8px; font-size: 10.5px; }

/* mobile */
@media (max-width: 1024px) {
  .kp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .kp-hero { padding: 40px 18px 36px; }
  .kp-hero h1 { font-size: 30px; }
  .kp-hero p { font-size: 14px; }
  .kp-filter-bar { padding: 22px 16px 0; }
  .kp-filter-btn { font-size: 11px; padding: 6px 12px; }
  .kp-body { padding: 22px 16px 50px; }
  .kp-grid { grid-template-columns: 1fr; gap: 16px; }
  .kp-card-title { font-size: 20px; }
  .article-overlay { padding: 0; }
  .article-modal { border-radius: 0; min-height: 100vh; max-width: 100%; }
  .article-modal-body { padding: 24px 20px 40px; }
  .article-title { font-size: 26px; }
  .article-subtitle { font-size: 14px; }
  .article-content { font-size: 14px; }
  .article-modal-cover { height: 180px; }
  .article-modal-icon { font-size: 56px; }
}

/* Wishlist */
.wishlist-icon-wrap {
  position: relative; cursor: pointer;
  padding: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.wishlist-icon-wrap:hover { background: #fee; }
.wishlist-badge {
  position: absolute; top: -2px; right: -2px;
  background: #d4534f; color: white;
  font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid #fbfaf7;
}
.wishlist-badge.hidden { display: none; }

/* Heart button (on product cards) */
.heart-btn {
  position: absolute; top: 14px; right: 14px;
  background: white; border: 1px solid #ebe6dc; border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  transition: transform .15s, background .15s, border-color .15s;
}
.heart-btn:hover { transform: scale(1.1); border-color: #d4534f; }
.heart-btn svg { width: 16px; height: 16px; }
.heart-btn.active { background: #fee2e2; border-color: #d4534f; }
.heart-btn.active svg { fill: #d4534f; stroke: #d4534f; }

/* Product card heart position adjustment */
.product-card { position: relative; }
@media (max-width: 700px) {
  .heart-btn {
    width: 28px; height: 28px;
    top: 10px; right: 10px;
  }
  .heart-btn svg { width: 14px; height: 14px; }
}

/* Wishlist page */
.wl-hero { background: linear-gradient(145deg, #1a1f2e 0%, #3f1a2f 100%); color: white; padding: 48px 32px 40px; position: relative; overflow: hidden; }
.wl-hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(212,83,79,.18), transparent 65%); }
.wl-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.wl-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fca5a5; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 12px; }
.wl-hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; color: white; margin-bottom: 8px; }
.wl-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #fca5a5; }
.wl-hero-meta { font-size: 13px; color: rgba(255,255,255,.55); font-family: 'JetBrains Mono', monospace; }
.wl-body { max-width: 1100px; margin: 0 auto; padding: 32px 32px 80px; }
.wl-empty { text-align: center; padding: 80px 20px; }
.wl-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: .3; }
.wl-empty-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 26px; color: #1a1f2e; margin-bottom: 8px; }
.wl-empty-msg { font-size: 14px; color: #5c6577; margin-bottom: 20px; }
.wl-empty-btn { padding: 12px 24px; background: #3b6ea5; color: white; border: none; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 700px) {
  .wl-hero { padding: 32px 18px 28px; }
  .wl-hero h1 { font-size: 26px; }
  .wl-body { padding: 20px 16px 60px; }
}

/* Reviews section */
.reviews-section {
  max-width: 1100px; margin: 0 auto;
  padding: 48px 32px 0;
  border-top: 1px solid #ebe6dc;
}
.reviews-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px; flex-wrap: wrap; gap: 16px;
}
.reviews-summary { display: flex; align-items: center; gap: 20px; }
.reviews-avg {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 52px; color: #1a1f2e; line-height: 1; letter-spacing: -1px;
}
.reviews-avg-side { display: flex; flex-direction: column; gap: 2px; }
.reviews-stars { display: flex; gap: 2px; align-items: center; }
.reviews-stars svg { width: 18px; height: 18px; }
.reviews-count {
  font-size: 12px; color: #8a93a5; font-family: 'JetBrains Mono', monospace;
}
.write-review-btn {
  padding: 10px 20px; background: white; color: #1a1f2e;
  border: 1px solid #ebe6dc; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.write-review-btn:hover { background: #1a1f2e; color: white; border-color: #1a1f2e; }

.reviews-list { display: grid; gap: 16px; padding-bottom: 24px; }
.review-card {
  background: white; border: 1px solid #ebe6dc; border-radius: 14px;
  padding: 20px 22px;
}
.review-card.pending {
  border-color: #fde68a; background: #fffbeb;
}
.review-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px; gap: 12px;
}
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #3b6ea5, #d4a373);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.review-author-info { }
.review-author-name { font-size: 13.5px; font-weight: 700; color: #1a1f2e; }
.review-author-meta {
  font-size: 11px; color: #8a93a5; font-family: 'JetBrains Mono', monospace;
  margin-top: 1px; display: flex; align-items: center; gap: 6px;
}
.verified-badge {
  background: #eef6ee; color: #5b8a5b;
  font-size: 9.5px; padding: 1px 6px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.3px;
}
.pending-badge {
  background: #fef3c7; color: #92400e;
  font-size: 9.5px; padding: 1px 6px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.3px;
}
.review-stars { display: flex; gap: 1px; }
.review-stars svg { width: 14px; height: 14px; }
.review-title { font-size: 14.5px; font-weight: 700; color: #1a1f2e; margin-bottom: 6px; line-height: 1.4; }
.review-body { font-size: 13.5px; color: #5c6577; line-height: 1.72; }
.review-size-note {
  margin-top: 10px; font-size: 11px; color: #8a93a5;
  font-family: 'JetBrains Mono', monospace;
  display: flex; gap: 8px; align-items: center;
}
.review-size-note span { color: #1a1f2e; font-weight: 600; }

/* Write review modal */
.rv-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,20,40,.6); backdrop-filter: blur(6px);
  z-index: 220;
  align-items: center; justify-content: center; padding: 24px;
}
.rv-modal-overlay.open { display: flex; }
.rv-modal {
  background: white; border-radius: 20px; max-width: 480px; width: 100%;
  padding: 28px; box-shadow: 0 24px 64px rgba(10,20,40,.24);
  max-height: 90vh; overflow-y: auto;
}
.rv-modal-title {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 24px; color: #1a1f2e; margin-bottom: 6px;
}
.rv-modal-sub {
  font-size: 13px; color: #8a93a5;
  font-family: 'JetBrains Mono', monospace; margin-bottom: 20px;
}
.rv-form-label {
  font-size: 10.5px; color: #8a93a5;
  font-family: 'JetBrains Mono', monospace; letter-spacing: 1.2px;
  margin-bottom: 8px; font-weight: 700;
}
.rv-star-input { display: flex; gap: 4px; margin-bottom: 18px; }
.rv-star-input svg {
  width: 28px; height: 28px; cursor: pointer;
  transition: transform .12s;
}
.rv-star-input svg:hover { transform: scale(1.15); }
.rv-input, .rv-textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid #ebe6dc; border-radius: 10px;
  font-size: 14px; font-family: inherit; background: white;
  margin-bottom: 16px; outline: none;
}
.rv-input:focus, .rv-textarea:focus { border-color: #3b6ea5; }
.rv-textarea { min-height: 96px; resize: vertical; }
.rv-actions { display: flex; gap: 10px; margin-top: 8px; }
.rv-submit-btn {
  flex: 1; padding: 13px;
  background: #3b6ea5; color: white; border: none; border-radius: 999px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.rv-cancel-btn {
  flex: 0 0 auto; padding: 13px 22px;
  background: white; color: #5c6577; border: 1px solid #ebe6dc; border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.rv-notice {
  background: #eff6ff; border: 1px solid #bfdbfe; border-left: 3px solid #3b6ea5;
  border-radius: 8px; padding: 10px 12px;
  font-size: 12px; color: #1e40af; line-height: 1.6; margin-bottom: 18px;
}

@media (max-width: 700px) {
  .reviews-section { padding: 32px 16px 0; }
  .reviews-header { flex-direction: column; align-items: stretch; gap: 16px; }
  .reviews-avg { font-size: 42px; }
  .write-review-btn { width: 100%; }
  .review-card { padding: 16px; }
  .rv-modal { padding: 22px; border-radius: 16px; }
}

/* FAQ page */
.faqp-hero { background: linear-gradient(145deg, #1a1f2e 0%, #2d4a3a 100%); color: white; padding: 48px 32px 40px; position: relative; overflow: hidden; }
.faqp-hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(91,138,91,.2), transparent 65%); }
.faqp-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.faqp-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #86efac; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 12px; }
.faqp-hero h1 { font-size: 44px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; color: white; margin-bottom: 12px; }
.faqp-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #86efac; }
.faqp-hero p { font-size: 15px; color: rgba(255,255,255,.65); max-width: 620px; line-height: 1.72; }

.faqp-nav-bar {
  max-width: 1100px; margin: 0 auto;
  padding: 22px 32px 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.faqp-nav-btn {
  padding: 7px 14px; border-radius: 999px;
  background: white; border: 1px solid #ebe6dc;
  font-size: 12.5px; color: #5c6577;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.faqp-nav-btn:hover { border-color: #3b6ea5; color: #3b6ea5; }
.faqp-nav-btn.active { background: #1a1f2e; color: white; border-color: #1a1f2e; }

.faqp-body {
  max-width: 900px; margin: 0 auto;
  padding: 32px 32px 80px;
}
.faqp-category {
  margin-bottom: 40px;
}
.faqp-cat-heading {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: 26px; color: #1a1f2e;
  margin-bottom: 6px; letter-spacing: -0.3px;
}
.faqp-cat-sub {
  font-size: 12.5px; color: #8a93a5;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 18px; letter-spacing: 0.3px;
}

.faqp-item {
  border-bottom: 1px solid #ebe6dc;
}
.faqp-item:first-child { border-top: 1px solid #ebe6dc; }
.faqp-q {
  width: 100%; padding: 18px 0;
  background: none; border: none;
  text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; font-family: inherit;
  font-size: 15.5px; font-weight: 600; color: #1a1f2e;
}
.faqp-q:hover { color: #3b6ea5; }
.faqp-icon {
  flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%; background: #f4f1ea;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #3b6ea5; font-weight: 700;
  transition: transform .2s, background .2s;
}
.faqp-item.open .faqp-icon { transform: rotate(45deg); background: #3b6ea5; color: white; }
.faqp-a {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.faqp-item.open .faqp-a { max-height: 800px; padding-bottom: 18px; }
.faqp-a-content {
  font-size: 14px; color: #5c6577; line-height: 1.8;
}
.faqp-a-content strong { color: #1a1f2e; font-weight: 700; }
.faqp-a-content ul { margin: 8px 0 4px 22px; }
.faqp-a-content li { margin-bottom: 5px; }
.faqp-a-content a { color: #3b6ea5; text-decoration: underline; cursor: pointer; font-weight: 600; }

@media (max-width: 700px) {
  .faqp-hero { padding: 32px 18px 28px; }
  .faqp-hero h1 { font-size: 28px; }
  .faqp-hero p { font-size: 13.5px; }
  .faqp-nav-bar { padding: 16px 16px 0; }
  .faqp-nav-btn { font-size: 11px; padding: 6px 12px; }
  .faqp-body { padding: 22px 16px 50px; }
  .faqp-cat-heading { font-size: 22px; }
  .faqp-q { font-size: 14px; padding: 14px 0; gap: 10px; }
  .faqp-a-content { font-size: 13px; }
}
/* ═══════════════════════════════════════
   QUALITY STANDARDS MODAL
   ═══════════════════════════════════════ */

/* Button upgrade */
.btn-qual {
  display: inline-flex; align-items: center; gap: 7px;
  border-color: rgba(59,110,165,.35);
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn-qual:hover {
  background: #3b6ea5; color: white;
  border-color: #3b6ea5;
  box-shadow: 0 6px 20px rgba(59,110,165,.25);
}
.btn-qual svg { transition: stroke .18s; }
.btn-qual:hover svg { stroke: white; }

/* Overlay */
.qual-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,20,40,.65); backdrop-filter: blur(8px);
  z-index: 210; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.qual-modal-overlay.open { display: flex; }

/* Modal container */
.qual-modal {
  background: white; border-radius: 24px;
  max-width: 720px; width: 100%;
  box-shadow: 0 32px 80px rgba(10,20,40,.28);
  overflow: hidden; position: relative;
  max-height: 90vh; display: flex; flex-direction: column;
}

/* Header */
.qual-modal-header {
  background: linear-gradient(135deg, #1a1f2e 0%, #0f2540 100%);
  padding: 32px 36px 28px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.qual-modal-header::before {
  content: '';
  position: absolute; top: -60px; right: -40px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,110,165,.3), transparent 65%);
  pointer-events: none;
}
.qual-modal-header::after {
  content: '';
  position: absolute; bottom: -50px; left: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,163,115,.15), transparent 65%);
  pointer-events: none;
}
.qual-modal-header-inner { position: relative; }
.qual-modal-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: #d4a373; letter-spacing: 1.8px; font-weight: 700;
  margin-bottom: 10px;
}
.qual-modal-title {
  font-family: 'Instrument Serif', serif; font-size: 34px;
  color: white; font-weight: 400; letter-spacing: -0.5px;
  margin-bottom: 8px; line-height: 1.15;
}
.qual-modal-title em { color: #d4a373; font-style: italic; }
.qual-modal-subtitle {
  font-size: 14px; color: rgba(255,255,255,.6);
  line-height: 1.65; max-width: 480px;
}
.qual-modal-close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none;
  color: rgba(255,255,255,.7); font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s; position: relative;
}
.qual-modal-close:hover { background: rgba(255,255,255,.25); color: white; }

/* Body scroll area */
.qual-modal-body {
  overflow-y: auto; padding: 28px 36px 32px;
  flex: 1; display: flex; flex-direction: column; gap: 24px;
}

/* Section label */
.qm-section { }
.qm-section-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: #8a93a5; letter-spacing: 1.8px; font-weight: 700;
  margin-bottom: 12px;
}

/* Process steps */
.qm-steps { display: flex; flex-direction: column; gap: 0; }
.qm-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid #ebe6dc; position: relative;
}
.qm-step:last-child { border-bottom: none; }
.qm-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: #1a1f2e; color: white;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-top: 1px;
}
.qm-step-content { flex: 1; }
.qm-step-title { font-size: 14px; font-weight: 700; color: #1a1f2e; margin-bottom: 3px; }
.qm-step-desc { font-size: 12.5px; color: #5c6577; line-height: 1.6; }
.qm-step-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  background: #eef6ee; color: #5b8a5b; padding: 2px 8px;
  border-radius: 999px; font-weight: 700; flex-shrink: 0; align-self: center;
}

/* Analytical methods grid */
.qm-methods-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.qm-method-cell {
  background: #f4f1ea; border-radius: 12px; padding: 14px 16px;
}
.qm-method-name {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  font-weight: 700; color: #3b6ea5; margin-bottom: 4px;
}
.qm-method-desc { font-size: 11.5px; color: #5c6577; line-height: 1.4; }

/* Guarantee badges */
.qm-guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qm-guarantee {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: white;
  border: 1px solid #ebe6dc; border-radius: 12px;
}
.qm-guarantee-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #e8f0fa, #f4f1ea);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.qm-guarantee-title { font-size: 12.5px; font-weight: 700; color: #1a1f2e; margin-bottom: 2px; }
.qm-guarantee-desc { font-size: 11.5px; color: #5c6577; line-height: 1.45; }

/* CTA row */
.qm-cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; background: linear-gradient(135deg, #1a1f2e, #0f2540);
  border-radius: 14px; padding: 18px 22px;
}
.qm-cta-text { font-size: 13.5px; color: rgba(255,255,255,.8); font-weight: 500; flex: 1; }
.qm-cta-btn {
  padding: 10px 20px; background: #d4a373; color: #1a1f2e;
  border: none; border-radius: 999px; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .15s, transform .12s;
}
.qm-cta-btn:hover { background: #e0b98a; transform: translateY(-1px); }

/* Disclaimer */
.qm-disclaimer {
  font-size: 11px; color: #8a93a5; font-family: 'JetBrains Mono', monospace;
  text-align: center; line-height: 1.6; padding-top: 4px;
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .qual-modal-overlay { padding: 0; align-items: flex-end; }
  .qual-modal {
    border-radius: 20px 20px 0 0; max-height: 92vh;
  }
  .qual-modal-header { padding: 24px 20px 20px; }
  .qual-modal-title { font-size: 26px; }
  .qual-modal-subtitle { font-size: 13px; }
  .qual-modal-body { padding: 20px 20px 28px; gap: 20px; }
  .qm-methods-grid { grid-template-columns: 1fr 1fr; }
  .qm-guarantees { grid-template-columns: 1fr; }
  .qm-cta-row { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .qm-cta-btn { width: 100%; }
}
@media (max-width: 380px) {
  .qm-methods-grid { grid-template-columns: 1fr; }
}

/* ── Data Loader ── */
#data-loader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,20,40,.72);
  backdrop-filter: blur(6px);
  z-index: 400;
  align-items: center;
  justify-content: center;
}
.data-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.data-loader-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.data-loader-text {
  color: rgba(255,255,255,.8);
  font-size: 14px;
  letter-spacing: .04em;
}

/* ── Data Load Error Banner ── */
#data-load-error {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff0f0;
  border: 1px solid #f5c6c6;
  color: #c0392b;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  display: none;
  align-items: center;
  gap: 8px;
  z-index: 401;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
#data-load-error code {
  background: rgba(192,57,43,.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Checkout channel rows (WhatsApp upgrade) ── */
.channel-row { position: relative; transition: background .15s, border-color .15s, box-shadow .15s; }
.channel-icon-svg { flex-shrink: 0; display: flex; align-items: center; }
.channel-row-text { flex: 1; min-width: 0; }

/* WhatsApp — primary green */
.channel-whatsapp { border-color: rgba(37,211,102,.35); background: rgba(37,211,102,.05); }
.channel-whatsapp:hover { background: #25D366; border-color: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,.3); }
.channel-whatsapp:hover .channel-label,
.channel-whatsapp:hover .channel-val { color: white; }
.channel-whatsapp:hover .auto-fill-label { background: rgba(255,255,255,.2); color: white; }
.channel-whatsapp:hover svg path { fill: white; }

/* PRIMARY badge */
.ch-primary-badge {
  display: inline-block; font-size: 8px; font-weight: 800;
  background: #25D366; color: white; padding: 1px 5px; border-radius: 4px;
  letter-spacing: .06em; vertical-align: middle; margin-left: 5px;
}
.channel-primary { order: -1; }

/* Telegram */
.channel-telegram { border-color: rgba(34,158,217,.2); }
.channel-telegram:hover { background: #229ED9; border-color: #229ED9; }
.channel-telegram:hover .channel-label,
.channel-telegram:hover .channel-val { color: white; }
.channel-telegram:hover .auto-fill-label { background: rgba(255,255,255,.2); color: white; }
.channel-telegram:hover svg path { fill: white; }

/* Signal */
.channel-signal:hover { background: #e8edff; border-color: #3A76F0; }

/* Email */
.channel-email:hover { background: #e8f0fa; border-color: #3b6ea5; }

/* Channel list vertical layout */
#modal-channel-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Product card image placeholder ── */
.card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 800; letter-spacing: .05em;
  opacity: .35;
}

/* ── Payment notice in checkout modal ── */
.payment-notice { margin-top: 12px; padding: 12px 14px; background: #f8f7f4; border-radius: 10px; border: 1px solid #ebe6dc; }
.payment-notice-row { display: flex; align-items: center; gap: 10px; }
.payment-notice-icon { font-size: 18px; }
.payment-notice-title { font-size: 11px; font-weight: 700; color: #5c6577; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.payment-notice-coins { display: flex; gap: 6px; flex-wrap: wrap; }
.coin-chip { font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; padding: 3px 8px; border-radius: 5px; background: color-mix(in srgb, var(--coin-color) 12%, white); color: var(--coin-color); border: 1px solid color-mix(in srgb, var(--coin-color) 25%, transparent); }