/* Reference-inspired storefront and admin theme: white, cream-gold, coral navigation. */
:root { --cream-gold:#F5E6C8; --cream-gold-deep:#E9D2A5; --coral-active:#E85D5B; --black:#171717; --soft-line:#F0EEE9; }
body { background:#fff; color:var(--black); }
.page { max-width:1180px; background:#fff; box-shadow:none; padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
.hero { min-height:190px; position:relative; padding:24px clamp(24px,4vw,58px); display:block; border-radius:0; background:#F8EEE5 url('/images/catalog-hero-20260810.webp') center/cover no-repeat; box-shadow:none; }.hero::before,.hero::after,.wordmark-en { display:none; }.hero > div:first-child { position:absolute; top:72px; left:clamp(24px,4vw,58px); }
.wordmark { margin:0; color:var(--black); text-shadow:none; }.wordmark img { display:block; width:min(185px,100%); height:auto; }
.hero .search { width:min(620px,calc(100% - 48px)); max-width:620px; position:absolute; top:24px; left:0; right:0; margin:0 auto; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.95); border-radius:9px; box-shadow:0 8px 26px rgba(91,62,53,.1); }.search svg * { stroke:var(--black); }.search:focus-within { border-color:var(--cream-gold-deep); box-shadow:0 0 0 3px rgba(245,230,200,.55); }
.category-shortcuts { margin:20px 0 0; padding:12px 16px 24px; border:0; border-radius:0; background:#fff; box-shadow:none; }.shortcut-heading { display:none; }.category-shortcut-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 8px; }.category-shortcut { gap:8px; }.category-shortcut-visual { width:100%; max-width:106px; aspect-ratio:1.42 / 1; border-radius:50%; background:linear-gradient(90deg,#FAEFD9 0%,#F1DAB1 100%); box-shadow:none; overflow:visible; }.category-shortcut-visual img { width:100%; height:130%; margin-top:-21%; object-fit:contain; }.category-shortcut:active .category-shortcut-visual { transform:scale(.96); box-shadow:none; }.category-shortcut-name { min-height:0; color:var(--black); font-size:clamp(10px,2.6vw,13px); font-weight:500; line-height:1.3; letter-spacing:0; white-space:nowrap; }
.products { padding:12px 16px 28px; background:#fff; }.sec-head { padding-bottom:12px; border-bottom:1px solid var(--soft-line); }.sec-head h2,.sec-note,.card-name,.price,.d-name,.d-price { color:var(--black); }.sec-note { color:#777; }.grid { gap:16px 10px; }.card { border:1px solid var(--soft-line); border-radius:8px; background:#fff; box-shadow:none; }.card:hover { box-shadow:none; }.thumb { background:#fff; padding:4px; }.card-info { padding:10px; }.btag { color:var(--black); background:var(--cream-gold); border:0; border-radius:4px; }.price .cur,.price .num,.d-price .cur,.d-price .num { color:var(--black); }
.catalog-bottom-nav { width:100%; max-width:none; height:64px; background:rgba(255,255,255,.98); border-top:1px solid var(--soft-line); box-shadow:0 -5px 20px rgba(0,0,0,.03); }.catalog-bottom-nav a,.catalog-bottom-nav button { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#777; font:inherit; font-size:12px; background:transparent; border:0; }.catalog-bottom-nav a svg,.catalog-bottom-nav button svg { width:25px; height:25px; }.catalog-bottom-nav a.active { color:var(--coral-active); }.catalog-bottom-nav .cart-count { min-width:15px; height:15px; padding:0 4px; display:none; place-items:center; position:absolute; margin:-26px 0 0 22px; border-radius:10px; background:var(--coral-active); color:#fff; font-size:9px; line-height:15px; }.catalog-bottom-nav .cart-count.has-items { display:grid; }.foot { background:#fff; color:#777; }
.page.category-page { max-width:1180px; background:#fff; }.category-compact-header { background:#fff; border-bottom:1px solid var(--soft-line); }.category-title-row h1,.category-back { color:var(--black); }.category-title-row p { color:#888; }.category-sidebar { background:#fbfaf8; border-right-color:var(--soft-line); }.category-filter-link { color:#666; }.category-filter-link.on { color:var(--black); border-left-color:var(--cream-gold-deep); background:#fff; }.category-brand-bar,.category-efficacy-bar { background:#fff; border-bottom-color:var(--soft-line); }.brand-filter-link,.efficacy-filter-link { color:var(--black); border-color:var(--soft-line); background:#fff; }.brand-filter-link.on,.efficacy-filter-link.on { color:var(--black); border-color:var(--cream-gold); background:var(--cream-gold); box-shadow:none; }
.detail-page { max-width:720px; background:#fff; }.d-body { background:#fff; }.d-actions .btn.primary,.product-cart-button { background:#171717; color:#fff; border-color:#171717; }.d-actions .btn.ghost { color:#171717; border-color:#171717; }.product-cart-button { width:100%; min-height:46px; margin-top:14px; border:0; border-radius:6px; font:inherit; font-weight:600; }
.cart-scrim { position:fixed; inset:0; z-index:190; background:rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .18s ease; }.cart-drawer { position:fixed; z-index:200; right:0; bottom:0; width:min(460px,100%); max-height:min(78dvh,700px); display:flex; flex-direction:column; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; background:#fff; transform:translateY(104%); transition:transform .2s ease; box-shadow:0 -18px 50px rgba(0,0,0,.13); }.cart-drawer.is-open { transform:translateY(0); }.cart-scrim.is-open { opacity:1; pointer-events:auto; }.cart-drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--soft-line); }.cart-drawer-head h2 { margin:0; color:var(--black); font-size:18px; }.cart-close { width:34px; height:34px; color:var(--black); font-size:26px; line-height:1; }.cart-items { overflow:auto; padding:4px 0; }.cart-empty { margin:44px 0; color:#777; text-align:center; }.cart-item { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--soft-line); }.cart-item img,.cart-item-placeholder { width:58px; height:58px; border-radius:5px; object-fit:cover; background:#fafafa; }.cart-item strong { display:block; color:var(--black); font-size:13px; line-height:1.4; }.cart-item span { color:#555; font-size:12px; }.cart-quantity { display:flex; align-items:center; gap:8px; }.cart-quantity button { width:24px; height:24px; border:1px solid #ddd; border-radius:50%; color:var(--black); font-size:16px; line-height:1; }.cart-remove { color:#777; font-size:11px; text-decoration:underline; }.cart-total { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; color:var(--black); font-weight:700; }.cart-total button { min-width:112px; min-height:42px; border-radius:6px; background:#171717; color:#fff; font:inherit; }
@media (min-width:700px) { .category-shortcut-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:26px 18px; } .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (min-width:1050px) { .category-shortcut-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } .grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
:root { --bg-page:#fff; --bg-app:#fff; --card:#fff; --ink:#171717; --ink2:#555; --muted:#888; --accent:#F5E6C8; --primary:#171717; --primary-light:#F5E6C8; --primary-dark:#171717; --line:#F0EEE9; --line-light:#F7F6F3; --radius:10px; --radius-sm:8px; --radius-xs:6px; --shadow-sm:none; --shadow:none; --shadow-lg:none; }.admin-app { max-width:1180px; background:#fff; }.admin-header { background:rgba(255,255,255,.96); border-bottom-color:var(--soft-line); }.admin-header .header-logo { background:var(--cream-gold); color:var(--black); border-radius:50%; }.admin-header .admin-primary,.admin-primary { background:#171717; color:#fff; border-color:#171717; }.admin-secondary { background:#fff; color:#171717; border-color:#171717; }.admin-card,.metric-grid article { box-shadow:none; border-color:var(--soft-line); }.admin-bottom-nav { width:min(1180px,100%); background:rgba(255,255,255,.98); border-top-color:var(--soft-line); }.admin-bottom-nav a.active { color:var(--coral-active); }.taxonomy-icon { background:var(--cream-gold)!important; color:var(--black)!important; }

/* Product-card labels and cart quantity flow. */
.card { position:relative; }
.card-link { display:block; min-height:100%; color:inherit; }
.card-info { padding-bottom:52px; }
.card-tags { display:flex; flex-wrap:wrap; gap:4px; min-height:20px; }
.card-tags .btag,
.ctag { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctag { display:inline-block; padding:2px 7px; border:1px solid var(--soft-line); border-radius:4px; color:#555; background:#fff; font-size:9.5px; line-height:1.55; }
.ctag-efficacy { color:#8B5E55; background:#FAF6F3; border-color:#E9DCD6; }
.ctag-more { color:#777; background:#F7F6F3; }
.card-cart-button { position:absolute; right:10px; bottom:10px; z-index:2; width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid #171717; border-radius:50%; color:#fff; background:#171717; box-shadow:0 7px 16px rgba(23,23,23,.16); }
.card-cart-button svg { position:absolute; width:18px; height:18px; transition:opacity .16s ease, transform .16s ease; }
.card-check-icon { opacity:0; transform:scale(.55); }
.card-cart-button.is-added .card-cart-icon { opacity:0; transform:scale(.55); }
.card-cart-button.is-added .card-check-icon { opacity:1; transform:scale(1); }
.card-cart-button:focus-visible { outline:3px solid rgba(232,93,91,.3); outline-offset:2px; }
.catalog-bottom-nav button[data-cart-open] { position:relative; }
.catalog-bottom-nav .cart-count { background:#D92D2D; }
.catalog-bottom-nav [data-cart-open].cart-feedback svg { animation:cart-pop .58s cubic-bezier(.2,.8,.3,1); }
.catalog-bottom-nav [data-cart-open].cart-feedback .cart-count { animation:badge-pop .58s cubic-bezier(.2,.8,.3,1); }
@keyframes cart-pop { 0%,100% { transform:scale(1) rotate(0) } 38% { transform:scale(1.28) rotate(-8deg) } 68% { transform:scale(.94) rotate(4deg) } }
@keyframes badge-pop { 0%,100% { transform:scale(1) } 45% { transform:scale(1.4) } }

.quantity-scrim { position:fixed; inset:0; z-index:210; background:rgba(0,0,0,.36); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.quantity-scrim.is-open { opacity:1; pointer-events:auto; }
.quantity-dialog { position:fixed; z-index:220; left:50%; bottom:0; width:min(100%,480px); padding:20px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; background:#fff; box-shadow:0 -20px 60px rgba(0,0,0,.16); opacity:0; pointer-events:none; transform:translate(-50%,104%); transition:opacity .2s ease, transform .22s ease; }
.quantity-dialog.is-open { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.quantity-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.quantity-dialog-head h2 { margin:0; color:#171717; font-size:18px; }
.quantity-close { width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#333; background:#F7F6F3; font:inherit; font-size:25px; line-height:1; }
.quantity-product { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; margin-top:16px; padding:12px; border:1px solid var(--soft-line); border-radius:10px; background:#fff; }
.quantity-product img,
.quantity-product-placeholder { width:64px; height:64px; display:block; border-radius:7px; object-fit:cover; background:#F7F6F3; }
.quantity-product strong { display:block; color:#171717; font-size:14px; line-height:1.45; }
.quantity-product span { display:block; margin-top:5px; color:#666; font-size:12px; }
.quantity-label { display:block; margin-top:18px; color:#333; font-size:13px; font-weight:600; }
.quantity-picker { display:grid; grid-template-columns:44px minmax(84px,1fr) 44px; gap:8px; margin-top:8px; }
.quantity-picker button,
.quantity-picker input { height:44px; border:1px solid #DDD; border-radius:8px; color:#171717; background:#fff; font:inherit; text-align:center; }
.quantity-picker button { font-size:23px; line-height:1; }
.quantity-picker input { min-width:0; font-weight:700; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
.quantity-picker input::-webkit-inner-spin-button,
.quantity-picker input::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
.quantity-picker input:focus { border-color:#171717; outline:2px solid rgba(23,23,23,.12); outline-offset:1px; }
.quantity-help { margin:6px 0 0; color:#888; font-size:11px; }
.quantity-confirm { width:100%; min-height:46px; margin-top:16px; border:0; border-radius:8px; color:#fff; background:#171717; font:inherit; font-weight:700; }
.cart-live-region { position:fixed; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

@media (min-width:700px) {
  .quantity-dialog { top:50%; bottom:auto; width:min(420px,calc(100% - 32px)); padding:22px; border-radius:16px; transform:translate(-50%,calc(-50% + 18px)); }
  .quantity-dialog.is-open { transform:translate(-50%,-50%); }
}
@media (max-width:699px) { .hero { min-height:140px; padding:14px 16px 16px; display:block; background-position:58% center; }.hero > div:first-child { top:14px; left:16px; }.wordmark img { width:125px; }.hero .search { width:calc(100% - 32px); top:82px; height:42px; } }
.category-subcategory-bar { display:flex; gap:8px; overflow:auto; padding:10px 12px; background:#fbfaf8; border-bottom:1px solid var(--soft-line); }

/* Shopping cart batch management */
.cart-drawer-title { display:flex; align-items:center; gap:12px; }
.cart-manage { min-height:30px; padding:0 10px; border:1px solid #d8d8d8; border-radius:999px; color:#333; font-size:12px; }
.cart-item.is-bulk { grid-template-columns:26px 58px 1fr; }
.cart-select { display:grid; place-items:center; cursor:pointer; }
.cart-select input { position:absolute; width:1px; height:1px; opacity:0; }
.cart-select span { width:18px; height:18px; border:1.5px solid #bbb; border-radius:50%; background:#fff; }
.cart-select input:checked + span { border-color:#171717; background:#171717; box-shadow:inset 0 0 0 4px #fff; }
.cart-bulk-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; color:var(--black); font-weight:700; }
.cart-bulk-footer label { display:flex; align-items:center; gap:7px; cursor:pointer; }
.cart-bulk-footer input { width:17px; height:17px; accent-color:#171717; }
.cart-bulk-footer button { min-width:128px; min-height:42px; padding:0 14px; border-radius:6px; background:#171717; color:#fff; font:inherit; }
.cart-bulk-footer button:disabled { opacity:.38; cursor:not-allowed; }