/* =============================================================
   ARTOS Camp&Go — base: tokens, reset, typography, primitives
   ============================================================= */

:root {
  /* Brand palette — ARTOS visual language guide
     Black/white are the base · green is the brand · banana is a punch,
     never a permanent background. One punch colour per composition. */
  --c-brand: #52B849;          /* ARTOS GREEN — primary */
  --c-brand-hover: #429b3a;
  --c-brand-soft: #6bc963;
  --c-accent: #F7E64C;         /* BANANA — accent/punch only */
  --c-accent-hover: #ecd93a;
  --c-accent-ink: #101010;     /* text on banana */
  --c-dark: #101010;           /* BLACK — base */
  --c-dark-hover: #2a2a2a;
  --c-lime: #8ee184;           /* light green for dark surfaces */
  --c-paper: #F2F7F1;          /* soft surface, kept close to white */
  --c-campgo: #2f7a38;
  /* PRODUCT FIRST: photos sit on a neutral grey stage so the product reads
     as the subject; the card body stays white underneath it. */
  --surface-media: #f2f2f3;

  --c-success: #2e9e5b;
  --c-success-bg: #eaf5ee;
  --c-danger: #d64545;
  --c-wa: #25a34a;
  --c-wa-hover: #1f9040;
  --c-warn: #b57b16;
  --c-warn-bg: #fff4e2;

  /* Text */
  --t-heading: #1a1a1f;
  --t-body: #222;
  --t-2: #33333a;
  --t-mut: #5b625a;
  --t-meta: #8a8a90;
  --t-meta2: #9a9aa2;
  --t-dis: #b3b3ba;
  --t-green-dark: #3f7d3a;
  --t-paper-body: #4a5a45;
  --t-strike: #a7ada4;

  /* Borders */
  --b-card: #ececef;
  --b-input: #e1e1e6;
  --b-soft: #e6eae2;
  --b-row: #f0f0f2;
  --b-hair: #f4f4f6;
  --b-dashed: #dfe3db;

  /* Fonts */
  --f-body: 'Inter', 'Heebo', -apple-system, sans-serif;
  --f-head: 'Inter', 'Heebo', sans-serif;

  /* Radii */
  --r-btn: 10px;
  --r-card: 14px;
  --r-panel: 16px;
  --r-big: 18px;
  --r-pill: 20px;

  /* Effects */
  --lift-shadow: 0 12px 28px rgba(16, 16, 16, .13);
  --pop-shadow: 0 18px 44px rgba(16, 16, 16, .28);

  --w-site: 1440px;
  --gutter: clamp(16px, 2vw, 28px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  font-family: var(--f-body);
  color: var(--t-body);
  font-size: 15px;
  line-height: 1.6;
  /* No sideways page wiggle on mobile — clip keeps position:sticky working */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
img { max-width: 100%; height: auto; display: block; }
/* LOUD TYPE — headlines are big, tight and bold. Hebrew has no case, so
   uppercase only affects Latin words (ARTOS, SUMMER SALE, SHOP NOW). */
h1, h2, h3, h4, h5 {
  font-family: var(--f-head); color: var(--t-heading);
  line-height: 1.22; margin: 0 0 .5em; letter-spacing: -.022em;
}
h1, h2 { font-weight: 900; text-transform: uppercase; }
h3, h4, h5 { font-weight: 800; }
/* Long-form prose keeps sentence case — uppercase belongs to display type. */
.a-prose h1, .a-prose h2, .a-prose h3,
.a-review-card h3, .woocommerce-order h2 { text-transform: none; }
p { margin: 0 0 1em; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { color: var(--c-brand-hover); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--t-2); }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* Page entry animation */
@keyframes aPage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.site-main { animation: aPage .32s cubic-bezier(.2, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .site-main { animation: none; } }
@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aDrawer { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------- Layout helpers ---------- */
.a-wrap { max-width: var(--w-site); margin: 0 auto; padding-inline: var(--gutter); }
.a-wrap--narrow { max-width: 900px; }
.a-wrap--read { max-width: 820px; }
.a-wrap--mid { max-width: 1100px; }

/* Custom scrollbars for rails */
.a-scroll::-webkit-scrollbar { height: 7px; width: 7px; }
.a-scroll::-webkit-scrollbar-thumb { background: #d8dcd4; border-radius: 8px; }
.a-scroll { scrollbar-width: thin; scrollbar-color: #d8dcd4 transparent; }

/* ---------- Buttons ---------- */
.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--c-brand); color: var(--c-dark);
  border: none; border-radius: var(--r-btn);
  padding: 13px 28px; font-weight: 800; font-size: 14.5px;
  text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.a-btn:hover { background: var(--c-brand-hover); color: var(--c-dark); }
.a-btn--dark { background: var(--c-dark); color: #fff; }
.a-btn--dark:hover { background: var(--c-dark-hover); color: #fff; }
.a-btn--wa { background: var(--c-wa); color: #fff; }
.a-btn--wa:hover { background: var(--c-wa-hover); color: #fff; }
.a-btn--ghost { background: #fff; border: 1.5px solid var(--b-input); color: var(--t-mut); font-weight: 700; }
.a-btn--ghost:hover { background: #fff; border-color: var(--c-brand); color: var(--t-heading); }
.a-btn--outline-green { background: #fff; border: 1.5px solid var(--c-brand); color: var(--c-brand); font-weight: 800; }
.a-btn--outline-green:hover { background: var(--c-brand); color: var(--c-dark); }
.a-btn--block { display: flex; width: 100%; }
.a-btn--lime-hover:hover { background: var(--c-lime); }
.a-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Chips & pills ---------- */
.a-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-paper); color: var(--t-green-dark);
  font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: var(--r-pill);
}
.a-chip--dark { background: var(--c-dark); color: var(--c-lime); letter-spacing: .05em; }
.a-chip--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.a-chip--sale { background: var(--c-success-bg); color: var(--c-success); }
.a-eyebrow {
  font-size: 12px; font-weight: 800; color: var(--c-brand);
  letter-spacing: .18em; text-transform: uppercase;
}

/* Filter pill (toggleable) */
.a-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--b-input); border-radius: 24px; background: #fff;
  padding: 8px 18px; font-size: 13.5px; font-weight: 700; color: var(--t-mut);
  cursor: pointer; user-select: none; transition: all .15s ease;
}
.a-pill:hover { border-color: var(--c-brand); color: var(--t-heading); }
.a-pill.is-on { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-dark); }

/* ---------- Cards & panels ---------- */
.a-card { background: #fff; border: 1px solid var(--b-card); border-radius: var(--r-panel); }
.a-card--pad { padding: 24px 26px; }
.a-panel { background: var(--c-paper); border-radius: var(--r-panel); padding: 24px 26px; }
.a-lift { transition: box-shadow .18s ease, transform .18s ease; }
.a-lift:hover { box-shadow: var(--lift-shadow); transform: translateY(-3px); }

/* ---------- Forms ---------- */
.a-field { margin-bottom: 14px; }
.a-field label { display: block; font-size: 13px; font-weight: 700; color: var(--t-2); margin-bottom: 6px; }
.a-field .req { color: var(--c-danger); }
.a-input, .a-select, .a-textarea,
.a-form input[type="text"], .a-form input[type="tel"], .a-form input[type="email"],
.a-form input[type="password"], .a-form input[type="number"], .a-form select, .a-form textarea {
  width: 100%; border: 1.5px solid var(--b-input); border-radius: var(--r-btn);
  padding: 12px 14px; font-size: 14px; background: #fff; color: var(--t-2);
  transition: border-color .15s ease;
}
.a-input:focus, .a-select:focus, .a-textarea:focus,
.a-form input:focus, .a-form select:focus, .a-form textarea:focus {
  border-color: var(--c-brand); outline: none;
}
.a-input--ltr { direction: ltr; text-align: right; }
.a-textarea { resize: vertical; }
.a-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--t-mut); cursor: pointer; }
.a-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--c-brand); margin-top: 2px; flex: none; }
.a-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-grid-2 .a-field { margin-bottom: 0; }
.a-grid-2 .a-field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .a-grid-2 { grid-template-columns: 1fr; } }
.a-form-msg { font-size: 13.5px; font-weight: 700; margin-top: 10px; }
.a-form-msg--ok { color: var(--c-success); }
.a-form-msg--err { color: var(--c-danger); }

/* ---------- Section heading with hairline rule ---------- */
.a-sechead { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.a-sechead h2 { margin: 0; font-size: 25px; font-weight: 900; color: var(--t-body); white-space: nowrap; }
.a-sechead__rule { flex: 1; height: 1px; background: var(--b-card); min-width: 30px; }
.a-sechead__link { font-size: 13.5px; font-weight: 700; white-space: nowrap; }

/* ---------- Breadcrumbs ---------- */
.a-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--t-meta); margin-bottom: 20px; }
.a-crumbs a { color: var(--t-meta); }
.a-crumbs a:hover { color: var(--c-brand); }
.a-crumbs__current { color: var(--t-body); font-weight: 700; }

/* ---------- Image placeholder (until real assets are uploaded) ---------- */
.a-ph {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #f6f7f4 0, #f6f7f4 13px, #eef0eb 13px, #eef0eb 26px);
  border-radius: var(--r-panel); min-height: 100%; width: 100%;
}
.a-ph__label {
  font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: .16em;
  color: #b6bcb0; text-transform: uppercase;
}

/* ---------- Toast ---------- */
.a-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 990; background: var(--c-dark); color: #fff; border-radius: 11px;
  padding: 14px 24px; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  display: flex; align-items: center; gap: 11px;
  animation: aFade .2s ease;
}
.a-toast svg { color: var(--c-lime); }

/* ---------- Empty state ---------- */
.a-empty {
  text-align: center; padding: 60px 20px;
  border: 1px dashed var(--b-dashed); border-radius: var(--r-panel);
}
.a-empty__icon {
  width: 74px; height: 74px; border-radius: 50%; background: var(--c-paper);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-brand); margin-bottom: 16px;
}
.a-empty h2, .a-empty h3 { font-size: 18px; font-weight: 800; color: var(--t-heading); margin: 0 0 8px; }
.a-empty p { font-size: 14px; color: var(--t-meta); max-width: 380px; margin: 0 auto 20px; }
.a-empty__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Price ---------- */
.a-price { font-family: var(--f-head); font-weight: 800; color: var(--c-dark); white-space: nowrap; }
.a-price del, .a-price--was { color: var(--t-strike); font-weight: 500; text-decoration: line-through; }
.a-price ins { text-decoration: none; }

/* ---------- Rating stars ---------- */
.a-stars { color: var(--c-brand); letter-spacing: 2px; }

/* ---------- Numbered circle ---------- */
.a-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--c-brand); color: var(--c-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px; flex: none;
}
.a-num--paper { background: var(--c-paper); color: var(--t-green-dark); font-weight: 900; }

/* ---------- Rails (horizontal product scrollers) ---------- */
.a-rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; }
.a-rail > * { flex: none; width: 236px; }

/* ---------- Generic product grid ---------- */
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

/* WordPress alignment/editor basics */
.alignwide { margin-inline: auto; max-width: var(--w-site); }
.aligncenter { margin-inline: auto; }

/* ---------- BANANA accent — the "one punch" ----------
   Per the visual language: black/white are the base, green is the brand,
   banana is a punch and never a permanent background. It is reserved here
   for the single loudest moment in a composition — the discount. */
.a-btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.a-btn--accent:hover { background: var(--c-accent-hover); color: var(--c-accent-ink); }
.a-chip--accent { background: var(--c-accent); color: var(--c-accent-ink); }

/* ---------- Brand marks on coloured surfaces ----------
   Logos are horizontal wordmarks (the house spec is 150×50, i.e. 3:1), so
   every plate is shaped ~3:1 too. `flex: none` keeps them from being squeezed
   by the flex rows they sit in. The white plate keeps light logos readable
   over any brand colour. */
.a-mega__brandchip.a-brandmark,
.a-brandtile__mono.a-brandmark,
.a-product__brandlogo.a-brandmark {
  background: #fff; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.a-mega__brandchip.a-brandmark { width: 96px; height: 34px; padding: 6px 9px; border-radius: 10px; }
.a-brandtile__mono.a-brandmark { width: 140px; height: 52px; padding: 8px 12px; border-radius: 14px; }
.a-product__brandlogo.a-brandmark { width: 74px; height: 24px; padding: 0; border-radius: 6px; }

/* Explicit pixel heights, not `height: 100%`: a percentage height inside an
   auto-width flex plate is a circular dependency, and the browser resolves it
   by shrinking the image (a 3:1 logo came out 52px wide instead of 108px).
   A fixed height lets `width: auto` derive the true aspect ratio.
   `object-fit: contain` keeps an unusually wide logo undistorted. */
.a-brandmark img {
  width: auto; max-width: 100%; object-fit: contain; display: block;
}
.a-mega__brandchip.a-brandmark img { height: 22px; }
.a-brandcard__logo.a-brandmark { background: transparent; display: flex; align-items: center; justify-content: center; max-width: 84%; }
.a-brandcard__logo.a-brandmark img { height: 48px; }
.a-brandcard__logo .a-brandmark__text { font-family: var(--f-head); font-size: 22px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--c-dark); }
.a-brandtile__mono.a-brandmark img { height: 36px; }
.a-product__brandlogo.a-brandmark img { height: 22px; }