/* ==========================================================================
   VentoMP: storefront stylesheet
   Change the tokens first, then the sections. Extra colour themes live in the Themes module.

   Contents
   1. Tokens          5. Header and nav        9. Product page
   2. Base            6. Flash messages       10. Basket, checkout, forms
   3. Layout helpers  7. Home sections        11. Footer
   4. Buttons         8. Cards and grids      12. Menu drawer
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  /* Palette (the default "Plain White" theme): white pages, near-black text, one blue accent. Other looks come from the Themes module. */
  --bg: #ffffff;            /* page background */
  --surface: #f7f8fa;       /* cards, header, panels */
  --ink: #1b2430;           /* main text and strong borders */
  --ink-soft: #3a4656;      /* labels */
  --muted: #667284;         /* secondary text */
  --line: #e2e6ec;          /* hairlines and card borders */
  --line-strong: #a9b3c1;   /* emphasised borders */
  --field-line: #b4bcc8;    /* form field borders */
  --placeholder: #eef1f5;   /* image placeholders */
  --accent: #2457c5;        /* links, active states */
  --btn: #2457c5;           /* primary button */
  --btn-hover: #1a43a0;     /* primary button hover */
  --on-btn: #ffffff;        /* text on buttons and dark bars */
  --green: #2e7d5b;         /* success and secondary actions */
  --danger: #b3261e;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: 20px;
  --maxw: 1200px;
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.label { font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.price { font: 600 15px var(--font-mono); }
.price--lg { font-size: 26px; }

/* 3. Layout helpers ------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.page-pad { padding-block: 28px 64px; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack--sm { gap: 6px; }
.stack--xl { gap: 56px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.between { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.inline-form { display: inline; margin: 0; }
.page-title { font: 600 32px/1.2 var(--font-mono); text-wrap: balance; }
.section-title { font: 600 22px var(--font-mono); }
.section-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.crumbs { font: 12px var(--font-mono); color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.panel--strong { border: 1.5px solid var(--line-strong); }
.panel__title { font: 600 16px var(--font-mono); }
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split__main { flex: 2 1 400px; min-width: 0; }
.split__side { flex: 1 1 280px; min-width: 0; }
.empty { border: 2px dashed var(--field-line); padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty__title { font: 600 16px var(--font-mono); }
.prose { max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.total { padding-top: 8px; border-top: 1px solid var(--line); }
.alert { border: 1.5px solid var(--danger); color: var(--danger); background: var(--surface); padding: 12px 14px; }
.error { color: var(--danger); font-size: 13px; }

/* Placeholders (grey boxes with a cross). Delete the markup when real images exist. */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%;
  background-color: var(--placeholder);
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px));
  border: 1px solid var(--line);
  color: var(--muted);
  font: 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
}
.ph > span { background: var(--placeholder); padding: 4px 8px; }
.ph--logo { width: 48px; height: 48px; font-size: 9px; flex: none; }
.ph--round { width: 72px; height: 72px; border-radius: 50%; font-size: 9px; flex: none; }
.ph--thumb { width: 72px; height: 72px; font-size: 8px; flex: none; }
.ph--hero { height: 380px; }
.ph--benefit { height: 200px; }

/* 4. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 12px 18px;
  font: 600 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer;
}
.btn--solid { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.btn--solid:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--on-btn); }
.btn--green { background: var(--green); border-color: var(--green); color: var(--on-btn); }
.btn--green:hover { background: #4a6430; border-color: #4a6430; color: var(--on-btn); }
.btn--outline:hover, .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 36px; padding: 8px 12px; }
.btn--ghost { border:0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px;
  font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink);
}
.chip.is-on { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.badge { background: var(--surface); color: var(--ink); padding: 3px 8px; min-width: 12px; text-align: center; }

/* 5. Header and nav ------------------------------------------------------- */
.strip { background: var(--ink); color: var(--on-btn); font: 12px var(--font-mono); }
.strip__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; padding-block: 6px; }
.strip__note { color: var(--line); }
.strip__links { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.strip a { text-decoration: none; }
.strip a:hover, .strip .linklike:hover { color: var(--on-btn); text-decoration: underline; }
.site-header { background: var(--surface); box-shadow: 0px 0px 20px; position: relative; z-index: 20; }
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 14px; }
.site-header__left { display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__name { font: 600 22px var(--font-mono); letter-spacing: -.02em; }
.catnav { display: flex; flex-wrap: wrap; gap: 0 8px; }
.catnav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; font-weight: 600;
  text-decoration: none; border-bottom: 4px solid transparent;
}
.catnav a.is-active { border-bottom-color: var(--accent); color: var(--accent); }

/* 6. Flash messages ------------------------------------------------------- */
.flash { background: var(--green); color: var(--on-btn); font: 13px var(--font-mono); }
.flash--error { background: var(--danger); }
.flash__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 10px; }
.flash a { color: var(--on-btn); }

/* 7. Home sections ------------------------------------------------------- */
.hero { position: relative; }
.hero__overlay { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.hero__card { background: var(--surface); border: 1.5px solid var(--line-strong); padding: 16px 20px; max-width: 420px; }
.hero__card h1, .hero__card .hero__title { margin-top: 4px; font: 600 30px/1.15 var(--font-mono); text-wrap: balance; }
.shopbar { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; }
.shopbar__who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.shopbar__name { font-weight: 600; font-size: 17px; }

/* 8. Cards and grids ------------------------------------------------------ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card__img { display: block; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--line); overflow: hidden; }
.card__img--wide { aspect-ratio: 4 / 3; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__body--row { flex-direction: row; justify-content: space-between; align-items: baseline; flex: none; }
.card__name { font-weight: 600; text-decoration: none; }
.card__name:hover { text-decoration: underline; }
.card__shop { font: 12px var(--font-mono); color: var(--muted); }
.card__foot { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.toolbar__sorts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 9. Product page --------------------------------------------------------- */
.product { display: flex; flex-wrap: wrap; gap: 32px; }
.product__media { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.product__main { aspect-ratio: 1 / 1; overflow: hidden; }
.product__main img { width: 100%; height: 100%; object-fit: cover; }
.product__info { flex: 1 1 320px; min-width: 0; gap: 16px; }

/* 10. Basket, checkout, forms -------------------------------------------- */
.field {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 15px var(--font-body);
  border: 1.5px solid var(--field-line); background: var(--surface); color: var(--ink);
}
.field--qty { width: 84px; }
.line { background: var(--surface); border: 1px solid var(--line); padding: 14px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.line__info { flex: 1 1 160px; min-width: 0; }
.line__total { min-width: 72px; text-align: right; }
.auth { max-width: 480px; margin: 0 auto; }
.tabs { display: flex; gap: 8px; }
.tabs .chip { flex: 1; justify-content: center; }
.done { max-width: 640px; margin: 0 auto; }

/* 11. Footer -------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1.5px solid var(--line-strong); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 32px 40px; padding-block: 36px; }
.site-footer__col { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer__col .label { margin-bottom: 6px; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__brand { font: 600 20px var(--font-mono); }
.site-footer__legal { border-top: 1px solid var(--line); padding-block: 14px; font: 12px var(--font-mono); color: var(--muted); }

/* 12. Menu drawer --------------------------------------------------------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(74, 48, 34, .45); z-index: 40; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86%); z-index: 50; overflow-y: auto;
  background: var(--surface); border-right: 1.5px solid var(--line-strong); padding: 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
.drawer__title { font: 600 18px var(--font-mono); }
.drawer__group { display: flex; flex-direction: column; gap: 2px; }
.drawer__group .label { margin-bottom: 6px; }
.drawer__group + .drawer__group { border-top: 1px solid var(--line); padding-top: 14px; }
.drawer__group a { display: flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.drawer__group a:hover { text-decoration: underline; }
.drawer__group form { font-weight: 500; }

@media (max-width: 600px) {
  .page-title { font-size: 26px; }
  .ph--hero { height: 300px; }
  .hero__overlay { left: 12px; right: 12px; bottom: 12px; }
  .hero__card h1, .hero__card .hero__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* Branding */
.brand__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Branding display modes */
.brand--logo { min-width: 180px; min-height: 56px; justify-content: flex-start; }
.brand--logo .brand__logo { width: auto; height: 56px; max-width: 320px; border: 0; background: transparent; }
.brand--branding .brand__name { font-size: 22px; }
.site-footer__brand { display: flex; align-items: center; gap: 10px; font: 600 18px var(--font-mono); }
.site-footer__brand img { width: auto; height: 42px; max-width: 220px; object-fit: contain; }
.site-footer__brand--logo img { height: 56px; max-width: 300px; }

/* Missing-image picture (Admin > Appearance). Fit the whole picture inside the frame, never crop it. */
img.img-missing { object-fit: contain !important; background: #fff; }
.line__img { display: block; width: 72px; height: 72px; flex: none; border: 1px solid var(--line); overflow: hidden; }
.line__img img { width: 100%; height: 100%; object-fit: cover; }

/* Header search: sits between the logo and the basket / account icons */
.site-search {
  flex: 1 1 280px; max-width: 560px; min-width: 0; margin-inline: auto;
  display: flex; align-items: stretch; position: relative;
}
.site-search__input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 46px 10px 14px;
  font: 15px var(--font-body); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--field-line); border-radius: 0; appearance: none;
}
.site-search__input::placeholder { color: var(--muted); opacity: 1; }
.site-search__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.site-search__btn {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer;
}
.site-search__btn:hover { color: var(--accent); }
@media (max-width: 760px) {
  .site-search { order: 3; flex: 1 1 100%; max-width: none; margin-inline: 0; }
}

/* Sub-category filter on category pages */
.subcats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Hero carousel (Admin > Hero banner) */
.hero__viewport { overflow: hidden; touch-action: pan-y; }
.hero__track { display: flex; transition: transform .6s ease; }
.hero__slide { position: relative; flex: 0 0 100%; min-width: 0; }
.hero__img { display: block; width: 100%; height: 380px; object-fit: cover; background: var(--placeholder); }
.hero__img--none { background: var(--placeholder); }
.hero__card p { margin-top: 6px; color: var(--ink-soft); text-wrap: balance; }
.hero__controls { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 12px; }
.hero__dots { display: flex; gap: 2px; }
.hero__dot { width: 28px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; }
.hero__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; }
.hero__dot[aria-current="true"]::before { background: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .hero__img { height: 300px; } }
@media (prefers-reduced-motion: reduce) { .hero__track { transition: none; } }
.site-header__right { display: flex; align-items: center; gap: 12px; }

/* Header on phones: logo and icons share the first row, the search box gets its own row below */
@media (max-width: 760px) {
  .site-header__left { flex: 1 1 0; min-width: 0; }
  .site-header__right { flex: none; }
  .brand { min-width: 0; }
  .brand--logo { min-width: 0; min-height: 0; }
  .brand--logo .brand__logo { height: 44px; max-width: 100%; }
}

.hero__overlay--button-only { justify-content: flex-end; }

/* Sales and basket */
.card__img { position: relative; }
.sale-badge { position: absolute; top: 8px; left: 8px; background: var(--danger); color: #fff; font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; }
.sale-tag { background: var(--danger); color: #fff; font: 600 10px/1 var(--font-mono); text-transform: uppercase; padding: 3px 6px; margin-left: 6px; }
.price--sale { color: var(--danger); }
.price-was { color: var(--muted); font: 13px var(--font-mono); margin-left: 6px; }
.card__price { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.basket-shop__head { border-bottom: 1.5px solid var(--line-strong); padding-bottom: 6px; }
.basket-shop__name { font: 600 15px var(--font-mono); }
.basket-shop__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 6px 2px; }
.coupon-box { flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; max-width: 460px; }
.coupon-box .label { margin: 0; white-space: nowrap; }
.coupon-box .field { flex: 1 1 50px; max-width: 200px; padding: 6px 10px; }

/* Reviews, Q&A and public shop page */
.stars { color: var(--accent, #b45309); letter-spacing: 2px; white-space: nowrap; }
.review { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.review__reply { margin-left: 16px; padding: 8px 12px; border-left: 3px solid var(--line-strong, var(--line)); background: var(--bg); }
.store-banner { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.store-announce { background: var(--btn); color: var(--on-btn); padding: 10px 14px; font: 13px var(--font-mono); text-align: center; }
.store-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.store-logo { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.store-head__main { flex: 1 1 260px; min-width: 0; }
.store-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.shop-logo-sm { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); }
.star-pick { display: flex; flex-wrap: wrap; gap: 10px; }

/* Product gallery thumbnails (only shown when a product has more than one photo) */
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 12px; }
.product__thumb { padding: 0; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product__thumb:hover { border-color: var(--accent); }
.product__thumb.is-active { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.gallery-edit__item { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); background: var(--surface); }
.gallery-edit__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.flash--info { background: var(--ink-soft, #6b5a4d); }

/* ---- Wishlist heart ---- */
.card { position: relative; }
.wish-btn { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink, #1b2430); cursor: pointer; border-radius: 50%; padding: 0; z-index: 2; }
.wish-btn:hover { border-color: var(--accent); color: var(--accent); }
.wish-btn[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.wish-btn[aria-pressed="true"] svg { fill: currentColor; }
.wish-btn--inline { position: static; width: auto; height: auto; border-radius: 0; padding: 8px 14px; background: transparent; color: inherit; }
.wish-btn--inline[aria-pressed="true"] { background: var(--accent); color: #fff; }
.wish-link { position: relative; }
.wish-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; font: 600 11px/18px var(--font-mono, monospace); text-align: center; color: #fff; background: var(--accent); border-radius: 9px; }
.maint-bar { padding: 10px 16px; background: #fff3cd; color: #5c4400; text-align: center; font-size: 14px; border-bottom: 1px solid #e6cf85; }
.maint-bar--on { background: #7a1f1f; color: #fff; border-color: #7a1f1f; }
.imp-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; padding: 8px 16px; background: #7a1f1f; color: #fff; font-size: 14px; }
.imp-bar .btn { background: #fff; color: #7a1f1f; border-color: #fff; }

/* ---- Search tabs, sort select ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { padding: 10px 16px; text-decoration: none; color: inherit; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; font-weight: 600; }
.tab.is-on { background: var(--surface); border-color: var(--line); color: var(--accent); }
.toolbar__sorts { display: flex; align-items: center; gap: 8px; }
.field--sm { padding: 6px 10px; min-width: 0; width: auto; }
.account-tabs { flex-wrap: wrap; }
.split > .stack:first-child { flex: 1 1 380px; min-width: 0; }
.split > aside.stack { flex: 0 1 320px; min-width: 240px; }


/* ---- Home page sections: boxes (grid) or rows. --cols is the admin's boxes-per-row; screens cap it so nothing gets squashed. ---- */
.hgrid { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 1100px) { .hgrid { grid-template-columns: repeat(min(var(--cols, 4), 4), minmax(0, 1fr)); } }
@media (max-width: 860px)  { .hgrid { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 600px)  { .hgrid { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 340px)  { .hgrid { grid-template-columns: minmax(0, 1fr); } }
.hrows { display: flex; flex-direction: column; gap: 12px; }
.hrow { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); padding: 12px 16px; color: inherit; text-decoration: none; }
.hrow__img { flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line); display: block; }
.hrow__img img { width: 100%; height: 100%; object-fit: cover; }
.hrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 520px) { .hrow { flex-wrap: wrap; gap: 10px; } .hrow__main { flex-basis: calc(100% - 100px); } }
.shop-box .card__body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.shop-box__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shop-box__desc { min-height: 2.6em; font-size: 13px; }
.shop-box .shop-logo-sm { width: 32px; height: 32px; }

/* ---- Product variations ---- */
.product-add { flex-wrap: wrap; }
.variation { border: 0; padding: 0; margin: 0 0 4px; flex-basis: 100%; }
.variation__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.variation__opt { position: relative; cursor: pointer; }
.variation__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.variation__opt span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); }
.variation__opt input:checked + span { background: var(--ink, #4a2f22); color: var(--surface, #fff); border-color: var(--ink, #4a2f22); }
.variation__opt input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }
.line__opts { font-size: 13px; }

/* v7: shop filters */
.filters__more > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; margin: .75rem 0 1rem; }
.filters__group { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; align-content: start; }
.filters__group--scroll { max-height: 180px; overflow: auto; }

/* v7: holiday banner, promo notice */
.holiday-banner { background: #c0132b; color: #fff; padding: 1rem 1.25rem; border-radius: 10px; font-size: 1.05rem; line-height: 1.4; border: 3px solid #8e0d1f; box-shadow: 0 2px 8px rgba(142, 13, 31, .35); }
.holiday-banner strong { font-size: 1.15rem; }
.promo-notice { background: #fff4c2; color: #4a3b00; border: 2px dashed #d4a600; padding: .6rem 1rem; border-radius: 10px; font-weight: 600; }
.promo-badge { display: inline-block; background: #fff4c2; color: #4a3b00; border: 1px solid #d4a600; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; }
.terms-note { font-size: .9rem; color: var(--muted, #666); }

/* Basket: items from a shop that is not taking orders */
.line--unavailable { border: 2px solid #c0132b; background: color-mix(in srgb, #c0132b 7%, var(--surface)); }
.line--unavailable .line__img { opacity: .55; filter: grayscale(1); }
.line__why { color: #c0132b; font-weight: 600; font-size: .92rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Order messages (buyer <-> shop) */
.thread { display: flex; flex-direction: column; gap: 10px; }
.thread__msg { max-width: 85%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; align-self: flex-start; }
.thread__msg--mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.thread__who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.thread__body { overflow-wrap: anywhere; line-height: 1.45; }
.thread__form { margin-top: 6px; }
.thread-unread { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 12px/18px var(--font-mono, monospace); text-align: center; }

/* Social icons on a shop page */
.social-icons { display: flex; flex-wrap: wrap; gap: .5rem; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line, #e2e6ec); color: var(--ink, #1b2430); background: var(--surface, #fff); transition: background .15s, color .15s, border-color .15s; }
.social-icon:hover, .social-icon:focus-visible { background: var(--btn, #2457c5); color: #fff; border-color: var(--btn, #2457c5); }

.social-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.social-row { display: flex; align-items: center; gap: .75rem; padding: .35rem .5rem .35rem .35rem; border-radius: 999px; color: inherit; text-decoration: none; transition: background .15s; }
.social-row__text { font-weight: 600; font-size: .95rem; }
.social-row:hover, .social-row:focus-visible { background: rgba(36, 87, 197, .08); }
.social-row:hover .social-icon, .social-row:focus-visible .social-icon { background: var(--btn, #2457c5); color: #fff; border-color: var(--btn, #2457c5); }
.social-row .social-icon { flex: 0 0 auto; }

.plan-coupon { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .75rem 1rem; background: var(--surface, #fff); border: 1px solid var(--line, #e2e6ec); border-radius: 12px; max-width: 520px; }
.plan-coupon__label { font-weight: 600; margin: 0; }
.plan-coupon__input { flex: 1 1 160px; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--line, #e2e6ec); border-radius: 8px; font: inherit; text-transform: uppercase; letter-spacing: .04em; background: #fff; }
.plan-coupon__input:focus { outline: 2px solid var(--btn, #2457c5); outline-offset: 1px; }
.plan-card__offer { margin: .6rem 20px .9rem; padding: .65rem .9rem; border-radius: 8px; background: rgba(36, 87, 197, .10); color: var(--btn, #2457c5); font-weight: 600; font-size: .9rem; line-height: 1.35; }

.plan-card__note { margin: .6rem 20px .9rem; padding: .65rem .9rem; border-radius: 8px; background: #faf6f0; border: 1px solid var(--line, #e2e6ec); font-size: .88rem; line-height: 1.5; color: #4a3b2e; }
.plan-card__note.is-error { background: #fdf1ef; border-color: #e3b4ac; color: #8a2d20; }

/* "Website powered by" link in the footer */
.site-footer__powered { margin-left: 12px; opacity: .85; }
.site-footer__powered a { color: inherit; }