/* Site C / The corner market — red ink, warm paper, practical shopping. */
:root { --gutter:16px; --page-max:1360px; --header-h:80px; --bg:#fcfaf7; --surface-2:#f6f0ea; --accent:#b6342c; --accent-hover:#92271f; --accent-text:#a12c25; --r-card:10px; --r-btn:7px; --r-input:7px; --dur-3:140ms; --font-mono:var(--font-sans); }
[hidden] { display:none !important; }
html { scroll-behavior:auto; }
body { font-size:14px; font-variant-numeric:tabular-nums; }
*,*::before,*::after { animation:none !important; }
.wrap { padding-inline:var(--gutter); }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
.btn { min-height:42px; padding:10px 16px; font-size:13px; box-shadow:none; }
.btn:hover,.btn:active,.icon-btn:hover,.aisle:hover,.aisle:active,.pcard:hover,.pcard:active { transform:none; }
.site-header { background:#fff; border-bottom:1px solid var(--border); backdrop-filter:none; }
.header-inner { height:80px; gap:24px; }
.brand { flex:none; text-decoration:none; }
.brand-name { font-size:16px; }
.brand-sub { font-size:11px; }
.brand-mark svg { width:38px; height:38px; }
.header-nav { display:none; }
.header-actions { gap:10px; margin:0; flex:none; }
#searchBtn { display:none; }
.wa-btn { background:#f2f8f3; border:1px solid #d8e6da; border-radius:7px; width:42px; height:42px; }
.cart-btn { display:flex; align-items:center; gap:8px; padding:10px 14px; width:auto; min-height:42px; border-radius:7px; box-shadow:none; }
.cart-label { font-size:12px; font-weight:650; }
.cart-count { position:static; min-width:18px; height:18px; font-size:10px; border:0; background:#fff; color:var(--accent); }
.c-search { position:relative; display:flex; align-items:center; flex:1; height:44px; padding:0 12px; gap:10px; border:1px solid #e9e2db; background:#faf8f5; border-radius:7px; margin-left:auto; }
.c-search > svg { width:19px; height:19px; flex:none; color:var(--text-subtle); }
.c-search input { width:100%; min-width:0; border:0; outline:0; background:none; font-size:13px; }
.c-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px #b6342c12; }
.c-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
#clearSearch { font-size:22px; width:28px; height:32px; flex:none; color:var(--text-subtle); }
.c-suggestions { position:absolute; top:calc(100% + 8px); left:0; right:0; max-height:400px; overflow:auto; background:#fff; border:1px solid var(--border); border-radius:9px; box-shadow:var(--sh-3); padding:6px; }
.c-suggestions button { display:flex; align-items:center; width:100%; gap:12px; padding:8px; text-align:left; border-radius:5px; }
.c-suggestions button:hover,.c-suggestions .is-selected { background:var(--accent-soft); }
.c-suggestions img { width:40px; height:44px; object-fit:contain; }
.c-suggestions button > span { flex:1; font-size:12px; font-weight:600; }
.c-suggestions small { display:block; font-size:10px; font-weight:400; color:var(--text-subtle); margin-top:3px; }
.c-suggestions b { font-size:13px; }
.c-suggestions > p { font-size:12px; padding:16px; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); gap:24px 40px; margin-top:24px; padding:32px; background:#a92f27; color:#fff; border-radius:12px; overflow:hidden; }
.hero-head { max-width:none; margin:0; align-self:center; }
.hero-eyebrow { background:none; border:0; padding:0; color:#f7d5ca; font-size:10px; letter-spacing:.09em; font-weight:600; margin-bottom:14px; }
.eyebrow-dot { background:#f6d4b7; box-shadow:none; }
.hero-title { font-size:clamp(32px,3.8vw,48px); letter-spacing:-.045em; line-height:1.1; font-weight:750; max-width:20ch; }
.hero-sub { max-width:48ch; color:#f5ded6; margin-block:16px 24px; font-size:13px; line-height:1.7; }
.hero-cta { gap:12px; }
.hero-cta .btn-primary { background:#fff5e7; border-color:#fff5e7; color:#8e2c23; }
.hero-cta .btn-ghost { color:#fff5e7; border-color:#ffffff50; background:transparent; }
.market-note { padding:20px; background:#fff9ee; border-radius:7px; color:#332a24; align-self:center; }
.market-note-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px dashed #d8cbbb; }
.market-note-head > span { font-size:9px; letter-spacing:.12em; max-width:13ch; color:#8e5c49; font-weight:700; }
.market-note-head strong { font-size:19px; line-height:1.2; letter-spacing:-.035em; }
#heroPicks button { display:flex; width:100%; align-items:center; gap:12px; padding:8px 0; text-align:left; }
#heroPicks img { width:34px; height:40px; object-fit:contain; mix-blend-mode:multiply; }
#heroPicks button > span { font-size:11px; font-weight:600; flex:1; }
#heroPicks small { display:block; font-size:10px; color:#897366; margin-top:2px; font-weight:400; }
#heroPicks b { font-size:12px; }
.market-note > p { display:flex; gap:4px; padding-top:10px; margin-top:4px; font-size:10px; color:#8a6552; border-top:1px dashed #d8cbbb; }
.market-note > p > span:last-child { margin-left:auto; }
.hero-promises { grid-column:1/-1; display:flex; gap:24px; border-top:1px solid #ffffff35; padding-top:16px; color:#f7dfd7; font-size:11px; }
.hero-promises span + span::before { content:'·'; margin-right:24px; color:#edb5a6; }
.c-aisle-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-block:24px 12px; }
.c-aisle-head h2 { font-size:17px; }
.c-aisle-head button { font-size:11px; color:var(--accent); font-weight:600; }
.aisles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0; }
.aisle { display:flex; flex-direction:row; gap:10px; align-items:center; padding:10px; min-width:0; background:#fff; border:1px solid var(--border); border-radius:8px; text-align:left; box-shadow:none; }
.aisle:hover,.aisle.is-active { background:var(--accent-soft); border-color:var(--accent-soft-border); box-shadow:none; }
.aisle-art { width:48px; height:48px; flex:none; background:none; border-radius:0; overflow:hidden; }
.aisle-art img { width:100%; height:100%; object-fit:contain; }
.aisle-text strong { display:block; font-size:12px; }
.aisle-text small { display:block; font-size:10px; color:var(--text-subtle); margin-top:4px; }
.aisle-go { display:block; opacity:1; position:static; transform:none; width:auto; height:auto; background:none; color:var(--accent); font-size:14px; }
.aisle.is-active .aisle-go { background:none; color:var(--accent); }
.section { padding-block:0; margin-top:32px; }
.section-head { align-items:center; gap:16px; margin-bottom:16px; }
.section-title { font-size:23px; letter-spacing:-.04em; }
.section-sub { font-size:12px; margin-top:5px; }
.rail-nav { gap:8px; }
.rail-nav .icon-btn { width:32px; height:32px; border:1px solid var(--border); background:#fff; border-radius:5px; }
.rail { grid-auto-columns:calc((100% - 64px)/5); gap:16px; padding-bottom:4px; scroll-padding:0; }
.grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.pcard { border-radius:8px; box-shadow:none; }
.pcard::after { display:none; }
.pcard:hover,.pcard.is-in-cart:hover { box-shadow:none; border-color:#d8b8a9; }
.pcard-media { position:relative; aspect-ratio:1.1; background:#fff; }
.c-product-image { width:100%; height:100%; display:block; padding:26px 16px 12px; }
.c-product-image img { width:100%; height:100%; object-fit:contain; }
.pcard .badge { top:10px; left:10px; border-radius:3px; font-size:9px; padding:3px 5px; background:#f9e9e4; color:#a12c25; font-weight:700; letter-spacing:0; }
.c-save { position:absolute; top:7px; right:7px; width:28px; height:28px; font-family:Arial,sans-serif; font-size:25px; color:#8b7b70; background:#fff; border-radius:5px; }
.c-save[aria-pressed='true'] { color:var(--accent); }
.pcard-body { display:flex; flex-direction:column; gap:0; padding:12px; flex:1; }
.c-product-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:9px; color:var(--text-subtle); margin-bottom:8px; }
.c-product-meta span { color:#8a6519; white-space:nowrap; }
.pcard-name { font-size:13px; line-height:1.4; min-height:2.8em; height:2.8em; margin:0; font-weight:650; }
.pcard-name button { font:inherit; color:inherit; padding:0; text-align:left; }
.c-pack-trigger { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0; margin-top:8px; font-size:11px; color:var(--text-subtle); text-align:left; min-height:28px; }
.c-pack-trigger > span { font-size:10px; color:var(--accent); }
.c-buy-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; margin-top:auto; }
.pcard-price { display:flex; flex-direction:column; gap:0; padding:0; margin:0; align-items:flex-start; }
.price-now { font:750 17px/1.4 var(--font-sans); letter-spacing:-.025em; }
.price-was { font:400 10px/1.4 var(--font-sans); color:var(--text-subtle); }
.pcard-action { margin:0; min-width:64px; }
.pcard-action .btn { min-height:34px; padding:6px 12px; font-size:12px; background:#fff; color:var(--accent); border:1px solid #dcafa4; border-radius:5px; }
.pcard-action .btn:hover { background:var(--accent-soft); }
.pcard-action .stepper { width:84px; height:34px; border-radius:5px; }
.pcard-action .stepper button { width:26px; min-width:26px; height:30px; }
.filterbar { position:static; padding:0; margin-bottom:16px; border:0; background:none; }
.filterbar-inner.wrap { max-width:none; padding:0; }
#chips,#searchField,#searchToggle { display:none; }
.filter-tools { display:flex; width:100%; gap:8px; margin:0; flex-wrap:wrap; }
.filter-tools .select-wrap { margin-left:auto; }
.filter-tools select { height:36px; padding-block:6px; font-size:11px; background:#fff; }
.c-filter { padding:6px 12px; min-height:36px; border:1px solid var(--border); border-radius:6px; background:#fff; font-size:11px; }
.c-filter[aria-pressed='true'] { border-color:var(--accent-soft-border); color:var(--accent); background:var(--accent-soft); }
.view-toggle { height:36px; border-radius:6px; padding:2px; }
.view-toggle button { width:32px; height:30px; }
.is-searching .hero,.is-searching .c-aisle-head,.is-searching .aisles,.is-searching .c-orders { display:none; }
.is-searching #catalogue { margin-top:24px; }
.grid.is-list .pcard { padding:12px; gap:16px; }
.grid.is-list .pcard-media { width:112px; border-radius:0; }
.grid.is-list .pcard-body { display:flex; padding:0; }
.grid.is-list .pcard-name { order:0; align-self:stretch; height:auto; min-height:0; }
.grid.is-list .c-product-meta { margin-bottom:4px; }
.grid.is-list .c-buy-row { padding-top:8px; }
.grid.is-list .pcard-price,.grid.is-list .pcard-action { order:0; }
.grid.is-list .pcard-action { width:auto; }
.grid.is-list .c-product-image { padding:12px; }
.c-eyebrow { font-size:9px; letter-spacing:.12em; color:var(--accent); font-weight:700; margin-bottom:6px; }
.c-order-rail { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px)/3); gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:4px; }
.c-order-rail::-webkit-scrollbar { display:none; }
.c-order-card { padding:16px; background:#fff; border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:6px; text-align:left; scroll-snap-align:start; }
.c-order-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.c-order-top b { font-size:13px; }
.c-order-top > span { font-size:10px; color:#56805a; }
.c-order-date { display:block; font-size:11px; color:var(--text-subtle); margin-top:6px; }
.c-order-preview { display:flex; gap:10px; align-items:center; margin-block:16px; }
.c-order-preview img { width:38px; height:40px; object-fit:contain; }
.c-order-preview > span { margin-left:4px; font-size:10px; color:var(--text-subtle); }
.c-order-bottom { display:flex; align-items:end; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--border); }
.c-order-bottom > span:first-child { font-size:10px; color:var(--text-subtle); }
.c-order-bottom strong { display:block; font-size:23px; color:var(--text); line-height:1.3; }
.c-order-open { font-size:11px; color:var(--accent); }
.shopinfo { margin-top:40px; padding-block:32px; background:#f3ece5; }
.shopinfo-inner { gap:32px; }
.shopinfo-title { font-size:23px; }
.shopinfo-body { font-size:12px; line-height:1.7; max-width:48ch; }
.shopinfo-list { gap:24px; }
.shopinfo-list dt { font-size:9px; }
.shopinfo-list dd { font-size:12px; }
.site-footer { padding-block:20px; font-size:11px; }
.cline-thumb img { width:100%; height:100%; object-fit:contain; }
.cline-name { font-size:12px; }
.cline-meta { font-size:10px; }
.sheet-head,.sheet-body,.sheet-foot { padding:20px; }
.cartbar-btn { background:var(--accent); border-radius:8px; box-shadow:var(--sh-2); }
.cartbar-btn:hover { background:var(--accent-hover); }
#optionRoot .modal { width:min(700px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; scrollbar-width:thin; }
#optionRoot .modal-head { padding:16px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:2; }
#optionRoot .modal-head h2 { font-size:13px; font-weight:600; color:var(--text-subtle); }
#optionRoot .modal-head .icon-btn { width:28px; height:28px; border-radius:50%; background:var(--surface-2); }
#optionBody { display:block; padding:0; }
.c-detail-top { display:grid; grid-template-columns:200px minmax(0,1fr); gap:24px; padding:24px; }
.c-detail-photo { min-width:0; text-align:center; }
.c-detail-photo img { width:100%; height:180px; object-fit:contain; }
.c-detail-photo > small { font-size:9px; color:var(--text-subtle); }
.c-detail-intro { align-self:center; }
.c-detail-intro h3 { font-size:25px; }
.c-detail-rating { font-size:11px; color:#92701b; margin-top:10px; }
.c-detail-rating > span { margin-left:12px; color:#477849; }
.c-detail-price { display:flex; align-items:baseline; gap:8px; margin-top:16px; }
.c-detail-price b { font-size:26px; }
.c-detail-price s { font-size:12px; color:var(--text-subtle); }
.c-detail-price > small { font-size:10px; color:var(--accent); }
.c-detail-unit { font-size:11px; color:var(--text-subtle); margin-top:8px; line-height:1.6; }
.c-detail-content { padding:0 24px 20px; }
.c-detail-content fieldset { border:0; padding:0; min-width:0; }
.c-detail-content legend { font-size:12px; font-weight:650; margin-bottom:10px; }
.c-pack-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.c-pack-options button { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:10px 12px; border:1px solid var(--border); border-radius:6px; }
.c-pack-options button[aria-pressed='true'] { border-color:var(--accent); background:var(--accent-soft); }
.c-pack-options strong,.c-pack-options button > span { font-size:12px; }
.c-pack-options button > span { text-align:right; font-weight:650; }
.c-pack-options small { display:block; font-size:9px; color:var(--text-subtle); margin-top:3px; font-weight:400; }
.c-pack-options button:disabled { opacity:.45; }
.c-detail-quantity { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:16px; }
.c-detail-quantity > span { font-size:12px; font-weight:650; }
.c-detail-quantity small { display:block; font-size:10px; color:var(--text-subtle); font-weight:400; margin-top:3px; }
.c-detail-quantity .stepper { width:96px; height:36px; }
.c-detail-info { padding-block:12px; border-block:1px solid var(--border); font-size:12px; }
.c-detail-info summary { cursor:pointer; font-weight:600; }
.c-detail-info p { margin-top:12px; color:var(--text-muted); line-height:1.6; }
.c-detail-info dl { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px; }
.c-detail-info dt { font-size:10px; color:var(--text-subtle); }
.c-detail-info dd { font-size:12px; margin:2px 0 0; }
.c-delivery-line { font-size:10px; color:var(--text-subtle); margin-top:12px; }
.c-detail-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; border-top:1px solid var(--border); background:#fff; position:sticky; bottom:0; }
.c-detail-footer > span { display:flex; flex-direction:column; }
.c-detail-footer small { font-size:10px; color:var(--text-subtle); }
.c-detail-footer b { font-size:22px; }
.c-detail-footer .btn { width:240px; }
.c-order-details { padding:20px 24px 24px; }
.c-order-summary { font-size:11px; color:var(--text-subtle); }
.c-order-lines { margin-block:16px; }
.c-order-lines > div { display:flex; align-items:center; gap:12px; padding-block:12px; border-bottom:1px solid var(--border); }
.c-order-lines img { width:44px; height:44px; object-fit:contain; }
.c-order-lines > div > span { flex:1; min-width:0; }
.c-order-lines strong { font-size:12px; }
.c-order-lines small { display:block; color:var(--text-subtle); font-size:10px; margin-top:3px; }
.c-order-lines b { font-size:12px; }
.c-order-total { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-top:12px; }
.c-order-total b { font-size:24px; }
.c-order-details .btn { margin-top:20px; }
.c-order-fine { display:block; margin-top:10px; text-align:center; font-size:10px; color:var(--text-subtle); }
#optionRoot.is-order .modal { max-width:520px; }
#catalogue,#bestSection,.c-orders { scroll-margin-top:104px; }
#top { scroll-margin-top:100px; }
.c-load-error { padding-block:48px; }
@media (min-width:640px) { :root { --gutter:24px; } }
@media (min-width:1024px) { :root { --gutter:32px; } }
@media (max-width:1000px) {
  .header-inner { gap:16px; }
  .hero { gap:24px; padding:24px; }
  .hero-title { font-size:36px; }
  .market-note { padding:16px; }
  .aisle { gap:6px; padding:8px; }
  .aisle-art { width:36px; height:44px; }
  .aisle-text strong { font-size:11px; }
  .aisle-go { display:none; }
  .grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rail { grid-auto-columns:calc((100% - 48px)/4); }
}
@media (max-width:767px) {
  :root { --header-h:124px; }
  .header-inner { flex-wrap:wrap; height:auto; padding-block:12px; gap:12px; }
  .brand { flex:1; min-width:0; }
  .brand-name { font-size:14px; }
  .brand-sub { font-size:10px; }
  .c-search { flex:0 0 100%; order:3; margin:0; height:42px; }
  .header-actions { gap:8px; }
  .cart-label { display:none; }
  .cart-btn { width:42px; height:42px; padding:10px; position:relative; }
  .cart-count { position:absolute; top:-4px; right:-4px; }
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); margin-top:16px; gap:16px; padding:20px; }
  .hero-title { font-size:30px; }
  .hero-sub { font-size:12px; margin-block:12px 16px; }
  .hero-eyebrow { font-size:8px; letter-spacing:.06em; margin-bottom:10px; }
  .hero-cta { gap:8px; }
  .hero-cta .btn-ghost { display:none; }
  .hero-promises { gap:12px; padding-top:12px; font-size:10px; }
  .hero-promises span + span::before { margin-right:12px; }
  .hero-promises span:last-child { display:none; }
  .market-note { padding:12px; }
  .market-note-head { display:block; }
  .market-note-head > span { display:block; max-width:none; font-size:7px; margin-bottom:8px; }
  .market-note-head strong { font-size:17px; }
  #heroPicks button { gap:6px; }
  #heroPicks img { width:28px; height:36px; }
  #heroPicks button > span { font-size:9px; }
  #heroPicks small { font-size:8px; }
  #heroPicks b { font-size:10px; }
  .market-note > p { font-size:8px; }
  .aisles { display:flex; overflow-x:auto; gap:10px; scrollbar-width:none; padding-block:2px; }
  .aisles::-webkit-scrollbar { display:none; }
  .aisle { flex:0 0 150px; }
  .aisle-text strong { font-size:12px; }
  .aisle-art { width:44px; height:48px; }
  .section { margin-top:24px; }
  .section-title { font-size:21px; }
  .section-sub { font-size:11px; }
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .rail { grid-auto-columns:calc((100% - 24px)/3); gap:12px; }
  .c-order-rail { grid-auto-columns:280px; gap:12px; }
  .shopinfo { margin-top:32px; padding-block:24px; }
  #catalogue,#bestSection,.c-orders { scroll-margin-top:144px; }
  .toast-stack { bottom:90px; }
}
@media (max-width:560px) {
  .hero { display:block; padding:20px; }
  .hero-title { font-size:34px; max-width:16ch; }
  .hero-sub { max-width:44ch; }
  .market-note { display:none; }
  .hero-promises { display:flex; margin-top:20px; }
  .c-aisle-head { margin-top:24px; }
  .c-aisle-head h2 { font-size:16px; }
  .c-aisle-head button { font-size:10px; }
  .section-head { margin-bottom:12px; }
  .section-title { font-size:20px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail { grid-auto-columns:calc((100% - 12px)/2.15); }
  .pcard-body { padding:10px; }
  .pcard-media { aspect-ratio:1; }
  .c-product-image { padding:28px 12px 10px; }
  .c-product-meta { font-size:8px; }
  .pcard-name { font-size:12px; }
  .c-pack-trigger { font-size:10px; }
  .c-pack-trigger > span { font-size:9px; }
  .c-buy-row { gap:4px; padding-top:10px; }
  .pcard-action { min-width:56px; }
  .pcard-action .btn { padding:6px 10px; }
  .pcard-action .stepper { width:72px; }
  .pcard-action .stepper button { min-width:22px; width:22px; }
  .price-now { font-size:16px; }
  .filter-tools { gap:6px; }
  .c-filter { padding:6px 10px; font-size:10px; }
  .filter-tools .select-wrap { margin:0 0 0 auto; }
  .filter-tools .view-toggle { display:none; }
  .filter-tools select { padding-left:10px; min-width:110px; max-width:140px; }
  .shopinfo-inner { gap:20px; }
  .shopinfo-list { gap:16px; }
  #optionRoot .modal { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:10px; }
  #optionRoot .modal-head { padding:12px 16px; }
  .c-detail-top { grid-template-columns:110px minmax(0,1fr); gap:16px; padding:16px; }
  .c-detail-photo img { height:140px; }
  .c-detail-intro h3 { font-size:20px; }
  .c-detail-price { margin-top:12px; gap:6px; flex-wrap:wrap; }
  .c-detail-price b { font-size:23px; }
  .c-detail-content { padding:0 16px 16px; }
  .c-pack-options { grid-template-columns:1fr; gap:6px; }
  .c-pack-options button { padding:8px 10px; }
  .c-detail-quantity { padding-block:12px; }
  .c-detail-footer { padding:12px 16px; gap:12px; }
  .c-detail-footer .btn { flex:1; width:auto; }
  .c-order-details { padding:16px; }
  .cartbar { bottom:12px; width:calc(100% - 32px); }
  .sheet { width:100%; max-height:94dvh; }
  .grid.is-list .pcard-media { width:90px; }
}
@media (max-width:359px) {
  .brand-name { font-size:12px; }
  .brand-sub { font-size:9px; }
  .brand-mark svg { width:32px; height:32px; }
  .hero-title { font-size:29px; }
  .c-buy-row { flex-wrap:wrap; gap:8px; }
  .pcard-action { width:100%; }
  .pcard-action .btn,.pcard-action .stepper { width:100%; }
  .pcard-price { flex-direction:row; align-items:baseline; gap:6px; }
  .c-detail-top { grid-template-columns:90px minmax(0,1fr); gap:12px; }
  .c-filter { padding-inline:8px; }
  .filter-tools select { max-width:120px; min-width:0; }
}
/* Product cards / a quiet image stage and an unmistakable purchase row. */
.pcard { padding:8px; background:#fff; border:1px solid #e9e2db; border-radius:12px; }
.pcard-media { border-radius:7px; aspect-ratio:1.18; overflow:hidden; background:#fff; }
.c-product-image { padding:24px 10px 8px; }
.c-product-image:has(img[src*='oil-product']) { padding:0; overflow:hidden; }
.c-product-image img[src*='oil-product'] { object-fit:cover; transform:scale(1.4); }
.pcard .badge { left:0; top:0; padding:4px 6px; background:#fbede8; color:#9c3b29; border-radius:4px; font-size:10px; text-transform:none; font-weight:650; }
.c-card-rating { position:absolute; bottom:2px; right:2px; padding:3px 5px; background:#f8f5ef; color:#746135; border-radius:4px; font-size:9px; line-height:1.2; }
.c-save { top:0; right:0; display:grid; place-items:center; width:28px; height:28px; background:#fff; }
.c-save svg { width:16px; height:16px; }
.pcard-body { padding:12px 4px 4px; justify-content:flex-start; }
.c-product-meta { display:none; }
.pcard-name { font-size:14px; line-height:1.4; height:2.8em; min-height:2.8em; font-weight:700; }
.c-pack-trigger { margin-top:8px; padding:6px 8px; min-height:30px; border:1px solid #ece6df; border-radius:5px; background:#fcfaf7; font-size:11px; color:#62554b; }
.c-pack-trigger > span { font-size:10px; color:#89786c; }
.c-buy-row { margin-top:12px; padding-top:0; align-items:center; gap:8px; }
.pcard-action .btn { min-height:36px; padding:7px 12px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:12px; gap:4px; font-weight:650; border-radius:6px; }
.pcard-action .btn:hover { color:#fff; background:var(--accent-hover); }
.pcard-action .btn:disabled { background:#f1eeea; border-color:#e1d8d0; color:#82766b; }
.pcard-action .stepper { border-radius:6px; }
.price-now { font-size:18px; }
.grid.is-list .pcard { padding:12px; }
.grid.is-list .pcard-body { padding:0; }
.grid.is-list .c-buy-row { margin-top:8px; }
@media(max-width:560px) {
  .pcard { padding:7px; border-radius:10px; }
  .pcard-media { aspect-ratio:1.1; }
  .c-product-image { padding:24px 6px 8px; }
  .pcard-body { padding:10px 3px 3px; }
  .pcard-name { font-size:13px; }
  .pcard .badge { font-size:9px; padding:3px 5px; }
  .c-card-rating { font-size:8px; }
  .c-pack-trigger { font-size:10px; padding:5px 6px; margin-top:6px; }
  .c-pack-trigger > span { font-size:9px; }
  .c-buy-row { gap:6px; margin-top:10px; }
  .pcard-action .btn { min-height:34px; padding:6px 9px; font-size:11px; }
  .price-now { font-size:16px; }
}
@media(max-width:560px) {
  .filter-tools .select-wrap { display:flex; }
  .header-actions .wa-btn { display:grid; }
}
@media(max-width:359px) { .c-pack-trigger { gap:4px; padding-inline:4px; } }
/* Site C masthead: local shop navigation above a dedicated search band. */
:root { --header-h:138px; }
.header-inner { height:68px; gap:24px; }
.header-inner .brand { margin-right:auto; }
.header-nav { display:flex; align-items:center; gap:24px; margin:0 auto; }
.header-nav .nav-item,.header-orders-link { position:relative; padding:9px 0; border-radius:0; background:none; color:var(--text-subtle); font-size:12px; font-weight:600; }
.header-nav .nav-item.is-active { color:var(--accent); background:none; }
.header-nav .nav-item.is-active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); }
.header-orders-link:hover,.header-nav .nav-item:hover { color:var(--accent); background:none; }
.cart-btn { position:relative; display:grid; place-items:center; width:42px; height:42px; min-height:42px; padding:0; border-radius:10px; }
.cart-btn svg { width:21px; height:21px; }
.cart-count { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border:2px solid #fff; background:var(--marigold-500); color:#241a05; font-size:10px; }
.header-search-band { background:#f6f0e9; border-top:1px solid #eee6dc; }
.header-search-inner { display:flex; align-items:center; gap:28px; padding-block:12px; }
.header-local { display:flex; align-items:center; gap:10px; flex:0 0 190px; }
.header-local-dot { width:7px; height:7px; border-radius:50%; background:var(--ok-500); }
.header-local strong { display:block; font-size:12px; font-weight:650; }
.header-local small { display:block; margin-top:2px; font-size:10px; color:var(--text-subtle); }
.header-search-band .c-search { margin:0; height:42px; background:#fff; border-color:#e5d9cd; }
.header-delivery { flex:none; font-size:11px; color:var(--text-muted); }
.header-delivery small { display:block; font-size:10px; color:var(--text-subtle); margin-top:2px; }
.header-delivery b { font-weight:650; color:var(--accent); }
#catalogue,#bestSection,.c-orders,#ordersTitle { scroll-margin-top:164px; }
#top { scroll-margin-top:160px; }
/* Recent orders as a small shopping journal with useful basket contents. */
.c-orders { display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; padding:24px; background:#f4eee6; border-radius:12px; margin-top:40px; }
.c-orders > .section-head { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:24px; margin:0; }
.c-orders .c-eyebrow { margin-bottom:12px; font-size:9px; letter-spacing:.14em; color:#9b5945; }
.c-orders .section-title { font-size:28px; line-height:1.12; max-width:10ch; }
.c-orders .section-sub { max-width:23ch; font-size:11px; line-height:1.7; margin-top:12px; }
.c-order-history-count { margin-top:16px; padding-top:16px; border-top:1px solid #dfd2c5; font-size:10px; color:#8a7464; }
.c-orders .rail-nav { gap:8px; }
.c-orders .rail-nav button { width:34px; height:34px; border-color:#ded0c1; border-radius:6px; background:#fbf8f3; }
.c-order-rail { grid-auto-columns:calc((100% - 16px)/2); gap:16px; padding:0 0 2px; align-items:stretch; scroll-padding:0; }
.c-order-card { display:flex; flex-direction:column; padding:18px; border:1px solid #e5dacf; border-radius:8px; background:#fffefa; text-align:left; }
.c-order-card:hover { border-color:#c7a48e; }
.c-order-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.c-order-heading .c-order-date { margin:0; font-size:10px; color:#8b786b; }
.c-order-state { display:flex; align-items:center; gap:4px; color:#547650; font-size:10px; }
.c-order-state > span { font-size:12px; }
.c-order-reference { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:8px; }
.c-order-reference > strong { font-size:17px; letter-spacing:-.025em; }
.c-order-reference > small { font-size:10px; color:var(--text-subtle); }
.c-order-products { display:flex; flex-direction:column; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid #eee6de; }
.c-order-product { display:flex; align-items:center; gap:10px; min-width:0; }
.c-order-product > img { width:36px; height:36px; object-fit:contain; flex:none; }
.c-order-product > span { min-width:0; }
.c-order-product b { display:block; font-size:11px; font-weight:600; line-height:1.4; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.c-order-product small { display:block; font-size:9px; color:#8b786b; margin-top:3px; }
.c-order-remaining { margin-block:10px 14px; font-size:9px; color:#927f70; padding-left:46px; }
.c-order-bottom { margin-top:auto; padding-top:14px; border-color:#e8ded3; align-items:center; }
.c-order-bottom > span:first-child { font-size:9px; }
.c-order-bottom strong { font-size:22px; margin-top:2px; }
.c-order-open { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:600; color:var(--accent); }
.c-order-open > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #e5c9bd; border-radius:5px; font-size:15px; }
@media(max-width:1100px) {
  .header-search-inner { gap:20px; }
  .header-local { flex-basis:170px; }
  .header-delivery { display:none; }
  .c-orders { grid-template-columns:170px minmax(0,1fr); gap:20px; padding:20px; }
  .c-order-card { padding:14px; }
}
@media(max-width:767px) {
  :root { --header-h:122px; }
  .header-inner { height:64px; flex-wrap:nowrap; padding-block:10px; gap:12px; }
  .header-nav { display:none; }
  .header-search-inner { padding-block:10px; }
  .header-local { display:none; }
  .header-search-band .c-search { flex:1; order:0; height:40px; }
  #catalogue,#bestSection,.c-orders,#ordersTitle { scroll-margin-top:148px; }
  #top { scroll-margin-top:144px; }
  .c-orders { display:block; padding:20px 16px; margin-top:32px; }
  .c-orders > .section-head { flex-direction:row; align-items:center; gap:16px; margin-bottom:20px; }
  .c-orders .c-eyebrow { margin-bottom:6px; }
  .c-orders .section-title { font-size:23px; max-width:none; }
  .c-orders .section-sub { margin-top:8px; max-width:30ch; font-size:10px; }
  .c-order-history-count { display:none; }
  .c-order-rail { grid-auto-columns:calc((100% - 12px)/2); gap:12px; }
}
@media(max-width:560px) {
  .c-orders > .section-head { align-items:flex-end; }
  .c-orders .rail-nav button { width:28px; height:28px; }
  .c-orders .rail-nav { gap:6px; }
  .c-orders .section-title { font-size:22px; }
  .c-order-rail { grid-auto-columns:90%; }
  .c-order-card { padding:16px; }
  .c-order-reference > strong { font-size:18px; }
  .c-order-product b { font-size:12px; }
  .c-order-product small { font-size:10px; }
  .c-order-heading .c-order-date,.c-order-state { font-size:11px; }
  .c-order-bottom strong { font-size:23px; }
  .c-order-open { font-size:11px; }
}
#orderBook { scroll-margin-top:164px; }
#ordersTitle { scroll-margin-top:216px; }
@media(max-width:767px) { #orderBook { scroll-margin-top:148px; } #ordersTitle { scroll-margin-top:188px; } }
/* Original cart control, including the always-visible gold count. */
#cartBtn { position:relative; display:grid; place-items:center; width:42px; height:42px; min-width:42px; padding:0; border:0; border-radius:10px; background:#b32f24; color:#fff; box-shadow:none; }
#cartBtn:hover { background:#93251d; }
#cartBtn svg { width:21px; height:21px; stroke-width:1.8; }
#cartCount { display:grid; place-items:center; position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#e0a020; color:#241a05; border:2px solid #fff; font-size:11px; font-weight:800; }
.c-orders .rail-nav { display:flex; }
/* A compact store footer with clear contact hierarchy. */
.site-footer { margin-top:40px; padding:0; border-top:0; background:#f4efe8; }
.c-footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; padding-block:32px; }
.c-footer-brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; width:fit-content; }
.c-footer-brand > svg { color:var(--accent); flex:none; }
.c-footer-brand > span { font-size:14px; font-weight:700; line-height:1.3; }
.c-footer-brand small { display:block; font-size:10px; color:var(--text-subtle); font-weight:400; margin-top:3px; }
.c-footer-intro h2 { font-size:25px; letter-spacing:-.04em; margin-top:20px; }
.c-footer-intro > p { max-width:41ch; font-size:12px; line-height:1.8; color:var(--text-muted); margin-top:10px; }
.c-footer-visit,.c-footer-contact { padding-top:4px; }
.c-footer-grid h3 { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:650; letter-spacing:0; margin-bottom:12px; }
.c-footer-grid h3 svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.c-footer-visit address { font-size:12px; line-height:1.9; font-style:normal; color:var(--text-muted); max-width:27ch; }
.c-footer-contact > p { font-size:12px; line-height:1.8; color:var(--text-muted); }
.c-footer-link { display:flex; align-items:center; gap:10px; width:fit-content; color:var(--accent); font-size:11px; font-weight:600; text-decoration:none; margin-top:14px; min-height:28px; }
.c-footer-link:hover { color:var(--accent-hover); text-decoration:underline; text-underline-offset:4px; }
.c-footer-order { margin-top:24px; }
.c-footer-order > span { display:block; font-size:10px; color:var(--text-subtle); margin-bottom:5px; }
#footerPhone { display:block; font-size:16px; font-weight:650; color:var(--text); text-decoration:none; letter-spacing:-.02em; }
.c-footer-order .c-footer-link { margin-top:6px; }
.c-footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:16px; border-top:1px solid #e1d7cb; font-size:10px; color:var(--text-subtle); }
.c-footer-bottom > a { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:10px; text-decoration:none; min-height:28px; }
.c-footer-bottom > a:hover { color:var(--accent); }
#shopFooter { scroll-margin-top:160px; }
@media(max-width:900px) { .c-footer-grid { gap:24px; } }
@media(max-width:600px) {
  .site-footer { margin-top:32px; }
  .c-footer-grid { grid-template-columns:1fr 1fr; gap:24px 20px; padding-block:24px; }
  .c-footer-intro { grid-column:1/-1; }
  .c-footer-intro h2 { font-size:24px; margin-top:16px; }
  .c-footer-intro > p { max-width:44ch; }
  .c-footer-grid h3 { font-size:11px; gap:6px; margin-bottom:10px; }
  .c-footer-visit address,.c-footer-contact > p { font-size:11px; }
  #footerPhone { font-size:13px; }
  .c-footer-order { margin-top:18px; }
  .c-footer-bottom { justify-content:flex-start; gap:8px 16px; padding-block:12px 20px; }
  .c-footer-bottom > p { flex-basis:100%; }
  .c-footer-bottom > a { margin-left:auto; }
  .c-footer-link { font-size:10px; }
}
/* Explicit hero states prevent the base ghost hover from turning text white-on-white. */
.hero-cta .btn { transform:none; transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease; }
.hero-cta .btn-primary:hover:not(:disabled) { background:#f9e6cd; color:#81251e; border-color:#f9e6cd; box-shadow:none; transform:none; }
.hero-cta .btn-primary:active:not(:disabled) { background:#f0d8ba; color:#752018; border-color:#f0d8ba; transform:none; box-shadow:inset 0 2px 4px #78231c20; }
.hero-cta .btn-ghost:hover:not(:disabled) { background:#ffffff12; color:#fff5e7; border-color:#ffffff80; box-shadow:none; transform:none; }
.hero-cta .btn-ghost:active:not(:disabled) { background:#ffffff20; color:#fff5e7; border-color:#ffffffa0; box-shadow:inset 0 2px 4px #581b1820; transform:none; }
.hero-cta .btn:focus-visible { outline:2px solid #fff5e7; outline-offset:4px; }
/* The everyday edit: a small, photo-led shelf display. */
.market-note { padding:22px 20px 16px; background:#fff7e9; border-radius:12px; box-shadow:0 10px 24px #60201818; }
.market-note-head { display:block; text-align:center; border:0; padding:0; }
.market-note-head > span { display:block; max-width:none; font-size:8px; font-weight:650; letter-spacing:.1em; color:#a16a50; }
.market-note-head > strong { display:block; font-size:27px; line-height:1.2; margin-top:8px; color:#3d2c22; letter-spacing:-.045em; }
.market-note-head > strong > span { color:var(--accent); }
.market-note-head > p { font-size:10px; color:#8c705b; margin-top:7px; }
#heroPicks { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:18px 0 16px; }
#heroPicks::before { content:''; position:absolute; top:142px; left:4px; right:4px; height:1px; background:#decab2; }
#heroPicks button { display:flex; flex-direction:column; align-items:center; gap:0; padding:0; min-width:0; text-align:center; position:relative; }
#heroPicks img { width:100%; height:120px; object-fit:contain; margin-bottom:14px; mix-blend-mode:multiply; }
#heroPicks img[src*='oil-product'] { object-fit:cover; transform:scale(1.25); }
#heroPicks button > span { font-size:10px; line-height:1.4; font-weight:600; width:100%; min-height:42px; flex:none; }
#heroPicks small { font-size:9px; font-weight:400; color:#9b816c; margin-top:4px; }
#heroPicks b { display:block; font-size:14px; font-weight:750; color:#583c2c; margin-top:7px; }
.market-note-browse { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:12px 0 0; border-top:1px solid #e9dac5; font-size:10px; font-weight:500; color:#9a593f; text-align:left; }
.market-note-browse-arrow { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#f1dfc7; color:#8d442b; font-size:17px; transition:background-color 160ms ease,transform 160ms ease; }
.market-note-browse:hover .market-note-browse-arrow { background:#ead0ae; transform:translate(2px,-2px); }
/* Purposeful hero feedback: a light sweep, arrow nudge, and click ripple. */
.hero-cta .btn { position:relative; isolation:isolate; overflow:hidden; transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease,box-shadow 180ms ease,transform 160ms cubic-bezier(.2,.7,.3,1); }
.hero-cta .btn::before { content:''; position:absolute; inset:-30% auto -30% -60%; width:42%; pointer-events:none; background:linear-gradient(105deg,transparent,#ffffff65,transparent); transform:skewX(-18deg) translateX(0); transition:transform 600ms cubic-bezier(.2,.7,.3,1); z-index:0; }
.hero-cta .btn:hover::before { transform:skewX(-18deg) translateX(500%); }
.hero-button-label,.hero-button-arrow { position:relative; z-index:1; pointer-events:none; }
.hero-button-arrow { display:inline-block; transition:transform 220ms cubic-bezier(.2,.7,.3,1); margin-left:3px; }
.hero-cta .btn:hover .hero-button-arrow { transform:translate(3px,-3px); }
.hero-cta .btn-primary:hover:not(:disabled) { transform:translateY(-1px); background:#fff3df; box-shadow:0 4px 12px #581a1822; }
.hero-cta .btn-ghost:hover:not(:disabled) { transform:translateY(-1px); background:#ffffff14; box-shadow:0 4px 12px #581a1818; }
.hero-cta .btn-primary:active:not(:disabled),.hero-cta .btn-ghost:active:not(:disabled) { transform:translateY(1px) scale(.98); box-shadow:inset 0 2px 4px #581a1826; }
.hero-cta .btn:active .hero-button-arrow { transform:translate(1px,-1px); }
.hero-button-ripple { position:absolute; width:260px; height:260px; border-radius:50%; pointer-events:none; background:currentColor; z-index:0; }
@media(max-width:1000px) and (min-width:561px) { .market-note { padding:18px 14px 14px; } .market-note-head > strong { font-size:23px; } #heroPicks { gap:6px; } #heroPicks button > span { font-size:9px; } }
@media(prefers-reduced-motion:reduce) {
  .hero-cta .btn,.hero-button-arrow,.hero-cta .btn::before,.market-note-browse-arrow { transition:none !important; }
  .hero-cta .btn::before { display:none; }
  .hero-cta .btn:hover:not(:disabled),.hero-cta .btn:active:not(:disabled),.hero-cta .btn .hero-button-arrow { transform:none; }
}
/* One left edge for every footer label, detail, and link. */
.c-footer-visit,.c-footer-contact { text-align:left; padding-left:24px; }
.c-footer-grid h3 { position:relative; justify-content:flex-start; }
.c-footer-grid h3 svg { position:absolute; left:-24px; top:0; }
.c-footer-visit address,.c-footer-contact > p,.c-footer-order,.c-footer-link { text-align:left; margin-left:0; }
@media(max-width:600px) {
  .c-footer-grid { column-gap:16px; }
  .c-footer-visit,.c-footer-contact { padding-left:20px; }
  .c-footer-grid h3 svg { left:-20px; width:14px; height:14px; }
}
/* Product rating badges follow Site C's red palette. */
.c-card-rating { color:var(--accent-text); background:var(--accent-soft); }