:root {
  --brand: #f57c00;
  --green: var(--brand);
  --deep: #263238;
  --yellow: #ffc107;
  --ink: #263238;
  --muted: #59656a;
  --line: #e5dbc3;
  --soft: #fff8e1;
  --surface: #fffdf7;
  --surface-tint: #f8efd4;
  --shadow: 0 14px 32px rgb(38 50 56 / 10%);
}
body { background: var(--soft); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--yellow); }
.announcement, footer { background: var(--deep); color: #fff8e1; }
.announcement { color: #fff8e1; }
.demo { color: var(--yellow); }
.site-header, .mobile-nav { background: rgb(255 248 225 / 97%); border-color: var(--line); }
.site-header { box-shadow: 0 2px 14px rgb(38 50 56 / 5%); }
.brand-logo { display: inline-flex; align-items: center; gap: 5px; width: 205px; height: 56px; flex: 0 0 auto; overflow: hidden; line-height: 1; }
.brand-logo-icon, .brand-logo-type { display: block; flex: none; background-image: url("assets/mol7anot-logo.png"); background-repeat: no-repeat; }
.brand-logo-icon { width: 70px; height: 56px; background-size: 111px 82px; background-position: -24px -1px; }
.brand-logo-type { width: 130px; height: 40px; background-size: 169px 125px; background-position: -21px -85px; }
.search, .catalog-controls select, .filter, .page-button, .page-direction, #addressInput, #checkoutForm input, #checkoutForm textarea { background: var(--surface); border-color: var(--line); color: var(--ink); }
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(245 124 0 / 16%); }
.search input::placeholder { color: var(--muted); }
.search kbd { border-color: var(--line); color: var(--muted); }
.theme-toggle { background: var(--surface); border-color: var(--line); }
.nav .active, .location-trigger, .nav-main > :hover, .language:hover, .text-link:hover { color: var(--brand); }
.nav-category { border-color: var(--line); }
.cart-button, .button.dark, .filter.active, .page-button.current, .page-button.active { background: var(--brand); border-color: var(--brand); color: var(--deep); }
.cart-button:hover, .button.dark:hover, .add-button:hover { background: #df7100; border-color: #df7100; color: var(--deep); }
.cart-button b, .mobile-cart-icon b { background: var(--yellow); color: var(--deep); }
.hero { background: var(--deep); color: #fff8e1; }
.hero p, .hero-stats span { color: #e4e7e3; }
.hero .eyebrow { color: var(--yellow); }
.button.yellow { background: var(--yellow); color: var(--deep); }
.benefits [data-icon] { color: var(--brand); }
.text-link, .category-card, .product-card, .pantry-list, dialog, .cart-preview { border-color: var(--line); }
.category-card, .product-card, .pantry-list, dialog, .cart-preview, .flow-dialog { background: var(--surface); color: var(--ink); }
.category-card:hover, .product-card:hover { border-color: var(--brand); }
.category-card.selected, .mobile-nav-link.active { background: #fff0c7; border-color: var(--brand); color: var(--deep); }
.category-image, .category-card:nth-child(6n+2) .category-image, .category-card:nth-child(6n+3) .category-image, .category-card:nth-child(6n+4) .category-image, .category-card:nth-child(6n+5) .category-image { background: var(--soft); }
.category-card:nth-child(6n+2) .category-image, .category-card:nth-child(6n+5) .category-image { background: #fff0bf; }
.product-section { background: var(--surface-tint); border-color: var(--line); }
.product-info { border-color: var(--line); }
.product-brand, .old-price { color: var(--muted); }
.product-badge { background: #fff0bf; border-color: var(--yellow); color: var(--deep); }
.price { color: var(--brand); }
.add-button, .card-quantity, .location-action { background: #fff0ca; border-color: #f2c46b; color: var(--deep); }
.page-button.current { border-color: var(--brand); }
.pantry-banner { background: #fff0c7; border-color: #efd994; }
.pantry-banner .eyebrow, .pantry-banner h2 em, .pantry-list [data-icon] { color: var(--brand); }
.pantry-banner p { color: var(--muted); }
.pantry-list { box-shadow: var(--shadow); }
.pantry-list:before { background: var(--yellow); }
.pantry-list > div, .pantry-list [data-icon] { border-color: var(--line); }
.pantry-list small, .list-footer { color: var(--muted); }
.footer-top p, .footer-message span, .footer-bottom { color: #e3e5df; }
.mobile-nav-link { color: var(--muted); }
.mobile-nav-link.active { color: var(--brand); }
.toast { background: var(--deep); color: var(--soft); }
.cart-preview, .flow-dialog { border-color: var(--line); }
.cart-dialog, #cartSummary { background: var(--surface); color: var(--ink); }
#cartSummary { box-shadow: 0 -8px 20px var(--surface); }
.checkout-address { background: var(--soft); }
#cartSummary #cartContinue { color: var(--ink); border-color: var(--line); }
dialog::backdrop { background: rgb(38 50 56 / 58%); }
html[data-theme="dark"] {
  --brand: #f57c00;
  --green: var(--brand);
  --deep: #263238;
  --yellow: #ffc107;
  --ink: #fff8e1;
  --muted: #c0c9c8;
  --line: #526167;
  --soft: #303e43;
  --surface: #2b393e;
  --surface-tint: #253237;
  --shadow: 0 14px 32px rgb(0 0 0 / 25%);
}
html[data-theme="dark"] body { background: #1d282c; color: var(--ink); }
html[data-theme="dark"] .site-header, html[data-theme="dark"] .mobile-nav { background: rgb(38 50 56 / 97%); border-color: var(--line); }
html[data-theme="dark"] .brand-logo { background: #fff8e1; border-radius: 6px; }
html[data-theme="dark"] .announcement, html[data-theme="dark"] footer { background: #172126; }
html[data-theme="dark"] .search, html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .catalog-controls select, html[data-theme="dark"] .filter, html[data-theme="dark"] .page-button, html[data-theme="dark"] .page-direction, html[data-theme="dark"] #addressInput, html[data-theme="dark"] #checkoutForm input, html[data-theme="dark"] #checkoutForm textarea { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .category-card, html[data-theme="dark"] .product-card, html[data-theme="dark"] .pantry-list, html[data-theme="dark"] dialog, html[data-theme="dark"] .cart-preview, html[data-theme="dark"] .flow-dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .category-card.selected, html[data-theme="dark"] .mobile-nav-link.active { background: #35454a; border-color: var(--yellow); color: var(--yellow); }
html[data-theme="dark"] .category-image { background: #fff8e1; }
html[data-theme="dark"] .product-section, html[data-theme="dark"] .pantry-banner { background: var(--surface-tint); border-color: var(--line); }
html[data-theme="dark"] .product-photo, html[data-theme="dark"] .detail-image { background: #fffdf7; }
html[data-theme="dark"] .product-badge, html[data-theme="dark"] .add-button, html[data-theme="dark"] .card-quantity, html[data-theme="dark"] .location-action { background: #35454a; color: var(--yellow); border-color: #93753a; }
html[data-theme="dark"] .button.dark, html[data-theme="dark"] .cart-button, html[data-theme="dark"] .filter.active, html[data-theme="dark"] .page-button.active, html[data-theme="dark"] .page-button.current { background: var(--brand); color: #263238; border-color: var(--brand); }
html[data-theme="dark"] .button.yellow { color: #263238; }
html[data-theme="dark"] .pantry-banner h2 em, html[data-theme="dark"] .price, html[data-theme="dark"] .nav .active, html[data-theme="dark"] .location-trigger { color: var(--yellow); }
html[data-theme="dark"] .checkout-address, html[data-theme="dark"] .icon-button { background: #36454a; color: var(--ink); }
html[data-theme="dark"] .toast { background: #36454a; color: var(--ink); }
@media(max-width:680px) {
  .brand-logo { width: 145px; height: 44px; gap: 4px; }
  .brand-logo-icon { width: 50px; height: 40px; background-size: 79px 59px; background-position: -17px -1px; }
  .brand-logo-type { width: 91px; height: 28px; background-size: 119px 88px; background-position: -15px -60px; }
  .footer-top .brand-logo { width: 205px; height: 56px; gap: 5px; }
  .footer-top .brand-logo-icon { width: 70px; height: 56px; background-size: 111px 82px; background-position: -24px -1px; }
  .footer-top .brand-logo-type { width: 130px; height: 40px; background-size: 169px 125px; background-position: -21px -85px; }
}
@media(max-width:370px) {
  .brand-logo { width: 112px; height: 36px; gap: 3px; }
  .brand-logo-icon { width: 39px; height: 32px; background-size: 62px 46px; background-position: -13px -1px; }
  .brand-logo-type { width: 70px; height: 22px; background-size: 91px 67px; background-position: -11px -45px; }
}