/* Shared commerce components and responsive refinements. Brand styles remain in styles.css. */
:root { --pad: max(24px, calc((100vw - 1360px) / 2)); }
body { font-size:16px; line-height:1.55; }
[hidden] { display:none!important; }
button,input,select,textarea { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button:disabled { opacity:.45; cursor:not-allowed; }
:focus-visible { outline:3px solid #688c13; outline-offset:4px; }
.btn { font-size:16px; justify-content:center; text-align:center; gap:12px; min-height:50px; max-width:100%; line-height:1.3; padding:14px 22px; transition:background .18s,color .18s; }
.btn:hover:not(:disabled) { background:#363a2d; color:#fff; }
.btn.lime:hover { background:#b4eb22; color:#151515; }
.full { width:100%; }
.secondary { background:transparent; border:1px solid var(--line); color:var(--ink); }
.text-button { background:transparent; border:0; padding:8px 0; min-height:44px; text-decoration:underline; text-underline-offset:4px; font-size:15px; color:var(--ink); }
.icon { width:44px; height:44px; flex:0 0 44px; }
.icon svg { width:22px; height:22px; }
.ticker { min-height:34px; height:auto; font-size:12px; gap:32px; padding:7px 16px; }
header { height:84px; grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr); gap:24px; }
header nav { font-size:16px; gap:26px; }
header nav a { min-height:44px; display:flex; align-items:center; }
.actions { align-items:center; gap:6px; }
.account-link { display:flex; align-items:center; gap:8px; min-height:44px; font-size:15px; white-space:nowrap; }
.account-link svg { width:22px; height:22px; }
.bag em { font-size:12px; width:23px; height:23px; right:-3px; top:-1px; }
.hero { min-height:540px; height:min(680px,calc(100svh - 118px)); }
.hero-copy { width:min(700px,calc(100% - var(--pad) * 2)); max-width:700px; }
.hero h1 { font-size:clamp(68px,6.3vw,104px); line-height:1.04; }
.hero-copy>p:not(.kicker), .story-copy>p:not(.kicker),.intro>div p { font-size:16px; }
.kicker { font-size:13px; letter-spacing:.12em; margin-bottom:18px; }
.hero-note { font-size:14px; }
.trust { padding-inline:var(--pad); }
.trust article { padding:28px 18px; min-height:125px; }
.trust article:first-child { padding-left:0; }
.trust article:last-child { padding-right:0; }
.trust svg { flex:0 0 25px; }
.trust b { font-size:16px; }
.trust span { font-size:13px; }
.intro { padding-block:88px; grid-template-columns:.42fr 1.58fr; gap:32px; }
.intro>div { grid-template-columns:1fr 1fr; gap:40px; }
.intro h2 { font-size:clamp(40px,4vw,62px); line-height:1.08; }
.categories { padding-bottom:90px; gap:20px; }
.cat { height:420px; }
.cat small { font-size:13px; }
.cat>span { font-size:14px; }
.cat h3 { font-size:26px; line-height:1.2; }
.products { padding-block:80px; }
.section-head { gap:24px; margin-bottom:30px; }
.section-head h2 { font-size:clamp(36px,4vw,56px); line-height:1.1; }
.tabs { flex-wrap:wrap; gap:8px; }
.tabs button { min-height:44px; padding:9px 18px; font-size:15px; }
.catalog-tools { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-bottom:24px; }
.catalog-tools label { font-size:15px; }
.catalog-tools select { width:220px; }
.grid { gap:24px; }
.product { min-width:0; }
.media { height:auto; aspect-ratio:4/5; }
.product-image-link { display:block; height:100%; }
.media img { object-fit:cover; background:#111; filter:brightness(1.3); }
.heart { width:44px; height:44px; }
.quick { font-size:16px; min-height:48px; transform:none; opacity:1; }
.product:focus-within .quick { transform:none; }
.meta { display:grid; gap:10px; padding:18px 0; }
.meta h3 { font-size:20px; line-height:1.35; margin-bottom:7px; }
.meta p { font-size:14px; line-height:1.5; }
.meta>b { font-size:19px; }
.catalog-status { margin:24px 0 0; font-size:14px; color:var(--muted); }
.story { padding-inline:var(--pad); grid-template-columns:1fr 1.1fr; min-height:560px; }
.story-copy { padding:55px 48px 55px 0; }
.story-copy h2 { font-size:clamp(42px,5vw,68px); line-height:1.1; }
.story img { max-height:640px; }
.newsletter { padding-block:85px; }
.newsletter h2 { font-size:clamp(38px,5vw,66px); line-height:1.1; }
.newsletter form { margin-top:40px; }
.newsletter input { min-width:0; font-size:16px; border:0!important; background:transparent!important; }
.newsletter button { flex-shrink:0; min-width:48px; }
footer { padding-top:64px; display:grid; grid-template-columns:1fr 1.2fr; gap:20px 60px; }
footer>.logo { grid-column:1; align-self:start; justify-self:start; }
footer>p { grid-column:1; margin:0; }
.foot-links { grid-column:2; grid-row:1/3; margin:0 0 44px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.foot-links b { font-size:13px; }
.foot-links a,.foot-links button { display:flex; align-items:center; min-height:44px; font-size:15px; line-height:1.45; }
.foot-links div { gap:2px; align-content:start; }
footer>small { grid-column:1/-1; font-size:13px; color:#b7b7b0; }
.store-dialog { border:0; padding:28px 32px 36px; margin:auto; width:min(1100px,calc(100% - 48px)); max-height:calc(100svh - 48px); background:var(--paper); color:var(--ink); overflow:auto; overscroll-behavior:contain; }
.store-dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }
.dialog-open { overflow:hidden; }
.menu-open { overflow:hidden; }
.dialog-toast { position:sticky; bottom:0; margin:20px 0 0; padding:14px 18px; background:var(--lime); color:var(--ink); font-size:14px; box-shadow:0 3px 12px #0001; }
.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); margin-bottom:24px; padding-bottom:12px; }
.back-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
#dialog-title { margin:0 0 20px; font-size:32px; line-height:1.2; font-weight:600; overflow-wrap:anywhere; }
#dialog-title:focus { outline:0; }
.store-dialog h3 { font-size:20px; margin-bottom:14px; }
.store-dialog p { margin-bottom:20px; overflow-wrap:anywhere; }
.store-dialog label { display:block; font-size:15px; font-weight:600; margin-bottom:8px; }
input:not([type="radio"]),select { width:100%; min-height:48px; padding:12px 14px; border:1px solid #b9b9b1; border-radius:2px; background:#fff; color:var(--ink); font-size:16px; min-width:0; }
select { appearance:none; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23202020' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
input[type="radio"] { accent-color:#455819; width:20px; height:20px; flex:0 0 20px; }
.auth-dialog { width:min(560px,calc(100% - 32px)); }
.auth-wrap { max-width:448px; margin:auto; }
.auth-wrap form>input,.password-field { margin-bottom:20px; }
.auth-wrap .lead,.lead { color:var(--muted); font-size:16px; line-height:1.6; }
.password-field { position:relative; }
.password-field input { padding-right:76px; }
.password-field button { position:absolute; right:4px; top:2px; bottom:2px; min-width:60px; border:0; background:transparent; font-size:14px; }
.auth-wrap .full { margin-top:8px; }
.auth-switch { text-align:center; margin:24px 0 0; font-size:15px; }
.auth-switch a,.field-help a { text-decoration:underline; text-underline-offset:3px; }
.field-help { display:block; font-size:14px; line-height:1.55; color:var(--muted); margin:8px 0 20px; }
.form-error { padding:12px 14px; border:1px solid #b23b3b; background:#fff3f1; color:#912222; font-size:15px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.detail-image { align-self:start; aspect-ratio:1; object-fit:contain; background:#101010; }
.detail-copy { min-width:0; }
.price { font-size:24px; font-weight:700; margin:0 0 20px; }
.spec-list { display:flex; flex-wrap:wrap; list-style:none; padding:0; gap:8px; margin:0 0 24px; }
.spec-list li { border:1px solid var(--line); padding:8px 10px; font-size:14px; }
.detail-copy select { margin-bottom:18px; }
.quantity { display:inline-grid; grid-template-columns:44px 42px 44px; height:44px; border:1px solid #b9b9b1; align-items:center; background:#fff; }
.quantity button { height:42px; width:43px; border:0; background:transparent; font-size:22px; }
.quantity span { text-align:center; font-size:16px; }
.quantity button:hover:not(:disabled) { background:#e9efd8; }
.cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:32px; }
.cart-line { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); }
.cart-line:first-child { padding-top:0; }
.cart-line img { width:110px; height:110px; object-fit:contain; background:#111; }
.item-name { font-size:18px; font-weight:700; line-height:1.3; }
.cart-line-info p { font-size:14px; color:var(--muted); margin:6px 0!important; }
.line-total { font-size:18px; white-space:nowrap; }
.remove-item { display:block; color:#6a5048; font-size:14px; }
.cart-line .quantity { margin-top:10px; }
.order-summary { background:#fff; border:1px solid var(--line); padding:24px; position:sticky; top:0; }
.order-summary>div { display:flex; justify-content:space-between; gap:14px; margin:16px 0; font-size:15px; }
.order-summary b { white-space:nowrap; }
.order-summary .grand-total { border-top:1px solid var(--line); padding-top:20px; font-size:19px; }
.order-summary p { font-size:14px; color:var(--muted); }
.empty-state { text-align:center; padding:50px 15px; }
.empty-state>svg { width:42px; height:42px; margin-bottom:20px; }
.empty-state p { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid label { font-size:15px; color:var(--ink); }
.form-grid input { margin-top:8px; font-size:16px; padding:12px 14px; }
fieldset { border:0; padding:0; margin:26px 0; min-width:0; }
legend { font-size:18px; font-weight:600; margin-bottom:14px; }
label.payment { display:flex; gap:12px; padding:16px; border:1px solid var(--line); background:#fff; align-items:center; cursor:pointer; }
.payment span { display:grid; gap:5px; font-size:16px; }
.payment small { font-size:13px; line-height:1.4; color:var(--muted); font-weight:400; }
.account-dialog { width:min(820px,calc(100% - 48px)); }
.account-profile { display:flex; align-items:center; gap:20px; margin:25px 0; }
.account-profile h3 { margin:0 0 5px; }
.account-profile p { margin:0; }
.avatar { border-radius:50%; background:var(--lime); width:60px; height:60px; display:grid; place-items:center; font-size:26px; flex-shrink:0; }
.account-actions { display:flex; gap:12px; flex-wrap:wrap; }
.subheading { margin-top:36px; }
.saved-list>a { display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.saved-list img { width:70px; height:70px; object-fit:contain; background:#111; }
.saved-list small { display:block; color:var(--muted); margin-top:4px; }
.saved-list svg { margin-left:auto; flex-shrink:0; }
.order-history>a { display:grid; grid-template-columns:1fr 1fr auto 20px; gap:20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); font-size:14px; }
.order-history small,.order-items small { display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.status-badge { display:inline-block; background:#e6edcf; padding:8px 12px; font-size:14px; margin-bottom:20px; }
.order-items>div { display:flex; align-items:start; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.order-items b { white-space:nowrap; }
.info-dialog,.search-dialog { width:min(720px,calc(100% - 48px)); }
.info-dialog p { font-size:16px; line-height:1.75; }
.info-dialog h3 { margin-top:28px; }
.search-row { display:flex; gap:12px; }
.search-row input { min-width:0; }
.toast { max-width:calc(100% - 32px); width:max-content; font-size:14px; text-align:center; line-height:1.5; z-index:200; pointer-events:none; visibility:hidden; }
.toast.show { visibility:visible; }
.muted { color:var(--muted); }
@media(min-width:1600px) { .hero>img { object-position:center; } }
@media(max-width:1100px) {
  header { grid-template-columns:auto 1fr auto; gap:16px; }
  header nav { justify-self:center; gap:18px; }
  .account-link span { display:none; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .media { aspect-ratio:1; }
  .intro { grid-template-columns:1fr; }
  .intro>div { grid-template-columns:1fr 1fr; }
  .trust { grid-template-columns:repeat(2,1fr); }
  .cart-layout { grid-template-columns:minmax(0,1fr) 280px; gap:22px; }
  .cart-line { grid-template-columns:80px minmax(0,1fr); gap:16px; }
  .cart-line img { width:80px; height:90px; }
  .line-total { grid-column:2; }
}
@media(max-width:800px) {
  :root { --pad:24px; }
  header { grid-template-columns:44px 1fr auto; gap:12px; padding-inline:16px; }
  header nav { display:none; } .mobile { display:grid; }
  .logo { justify-self:start; }
  .mobile-nav { display:none; position:fixed; inset:0; z-index:60; background:var(--lime); padding:24px; overflow:auto; }
  .mobile-nav.open { display:flex; flex-direction:column; }
  .mobile-nav .icon { margin-left:auto; }
  .mobile-nav a { padding:16px 0; border-bottom:1px solid #99c521; font-size:24px; }
  .cart-layout { grid-template-columns:1fr; }
  .order-summary { position:static; }
  .cart-line { grid-template-columns:100px minmax(0,1fr) auto; }
  .cart-line img { width:100px; height:100px; }
  .line-total { grid-column:auto; }
  .detail-grid { grid-template-columns:1fr; gap:26px; }
  .detail-image { max-height:360px; }
  .categories { grid-template-columns:1fr 1fr; }
  .cat.big { grid-column:1/-1; }
  .story { grid-template-columns:1fr; }
  .story-copy { padding:48px 0; }
  .story img { height:380px; order:-1; }
  footer { grid-template-columns:1fr; gap:22px; }
  .foot-links { grid-column:1; grid-row:auto; margin:10px 0 24px; }
  .trust article:nth-child(2) { border-right:0; }
}
@media(max-width:540px) {
  :root { --pad:20px; }
  .ticker { font-size:11px; }
  .ticker span:not(:first-child) { display:none; }
  header { height:72px; gap:8px; padding-inline:12px; }
  .logo { font-size:17px; gap:3px; }
  .actions { gap:0; }
  .account-link { width:44px; justify-content:center; }
  .hero { min-height:570px; height:calc(100svh - 105px); max-height:700px; }
  .hero-copy { top:44%; width:auto; right:20px; }
  .hero h1 { font-size:54px; }
  .hero-note { bottom:20px; left:20px; }
  .hero-copy>p:not(.kicker) { font-size:16px; }
  .hero-copy .btn { font-size:15px; }
  .trust { grid-template-columns:1fr; }
  .trust article,.trust article:first-child,.trust article:last-child { padding:22px 0; border-right:0; min-height:100px; }
  .intro { padding-block:60px; gap:20px; }
  .intro>div { grid-template-columns:1fr; gap:26px; }
  .intro h2 { font-size:42px; }
  .categories { grid-template-columns:1fr; padding-inline:20px; padding-bottom:56px; }
  .cat.big { grid-column:auto; } .cat { height:370px; }
  .products { padding-block:56px; }
  .grid { grid-template-columns:1fr; gap:28px; }
  .section-head { display:grid; gap:22px; }
  .section-head h2 { font-size:36px; }
  .catalog-tools { justify-content:space-between; }
  .catalog-tools select { max-width:230px; }
  .newsletter { padding-block:58px; }
  .newsletter h2 { font-size:38px; }
  .newsletter input { padding-inline:0; }
  .foot-links { grid-template-columns:1fr 1fr; gap:26px; }
  footer { padding-top:48px; }
  .store-dialog,.account-dialog,.info-dialog,.search-dialog { width:calc(100% - 24px); max-height:calc(100svh - 24px); padding:16px 18px 24px; }
  .dialog-top { margin-bottom:22px; gap:6px; }
  .back-link { font-size:13px; }
  #dialog-title { font-size:28px; }
  .form-grid { grid-template-columns:1fr; }
  .cart-line { grid-template-columns:72px minmax(0,1fr); gap:14px; }
  .cart-line img { width:72px; height:85px; }
  .line-total { grid-column:2; }
  .item-name { font-size:18px; }
  .order-summary { padding:20px; }
  .order-history>a { grid-template-columns:1fr auto; gap:12px; }
  .order-history svg { display:none; }
  .order-items>div { flex-wrap:wrap; }
  .account-profile { align-items:start; }
  .account-profile>div { min-width:0; }
  .account-actions { display:grid; grid-template-columns:1fr; }
  .account-actions .btn { width:100%; }
  .detail-image { max-height:270px; }
  .search-row { flex-direction:column; }
  .search-row .btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }