/* ==========================================================================
   Design tokens  -  yellow & white marketplace theme
   Copy into the theme's stylesheet (or enqueue as its own file) FIRST.
   Every colour, size and radius used in the mockups is a variable here.
   Do not hard-code hex values in templates; use these variables.
   ========================================================================== */

/* Fonts: self-hosted Poppins (files in assets/fonts). Copy them to the theme. */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2"); }

:root {
  /* ---- Colour: brand ---- */
  --c-yellow:        #FFC20E;  /* FILL ONLY: buttons, header bar, badges. Never as text on white. */
  --c-yellow-hover:  #E0A800;  /* hover / pressed state of yellow fills */
  --c-yellow-tint:   #FFF6D6;  /* soft panels, selected rows, info bars */
  --c-yellow-tint-2: #FFFCF0;  /* very light row highlight (best offer) */
  --c-yellow-line:   #F3E2A0;  /* border for tint panels */
  --c-gold-text:     #8A6A00;  /* small gold text on white (overlines, "Check VIN") */

  /* ---- Colour: neutrals ---- */
  --c-ink:           #111111;  /* headings, body text, dark buttons, footer */
  --c-text-2:        #4A4A4A;  /* secondary body text */
  --c-muted:         #5C5C5C;  /* captions, part numbers, labels */
  --c-placeholder:   #767676;  /* input placeholder */
  --c-border:        #D6D6D6;  /* input and button borders */
  --c-line:          #E3E3E3;  /* hairlines, card grid lines */
  --c-surface:       #F7F7F7;  /* page sections, image wells, table head */
  --c-white:         #FFFFFF;

  /* ---- Colour: status ---- */
  --c-green:         #1E7B34;  /* "Fits your car", in stock, free delivery */
  --c-green-tint:    #EDF8F0;
  --c-red:           #C62828;  /* discount flag, errors, Deals link */
  --c-star:          #F2A900;  /* rating stars (filled); empty = --c-border */
  --c-blue-tint:     #E8F0FE;  /* "To pack" status pill background (docs/03) */
  --c-blue-text:     #1A4FB0;  /* "To pack" status pill text */
  --c-green-tint-2:  #E8F5EC;  /* "Ready / dispatched" pill background */
  --c-ink-hover:     #2a2a2a;  /* dark button hover */
  --c-red-tint:      #FDE8E8;  /* error backgrounds */

  /* ---- Typography ---- */
  --font: "Poppins", "Segoe UI", Arial, sans-serif;
  --fs-overline: 11px;   /* uppercase labels, letter-spacing .1em, weight 700 */
  --fs-caption:  12px;
  --fs-small:    13px;   /* card body, buttons */
  --fs-body:     14px;   /* default body and product titles */
  --fs-lead:     16px;
  --fs-h4:       18px;
  --fs-h3:       20px;   /* section titles (with yellow underline) */
  --fs-h2:       20px;   /* same as h3; use for section headings */
  --fs-h1:       26px;   /* page titles: category, product, cart, shop */
  --fs-hero:     40px;   /* home hero only: clamp(28px, 3vw, 40px), weight 700, tracking -0.01em */
  --fs-price:    25px;   /* price integer on cards (AED small 12px, cents 13px); product page buy box uses 36px */
  --lh-tight: 1.2;
  --lh-body:  1.5;

  /* ---- Layout ---- */
  --container: 1280px;      /* content width; side padding 16px on mobile, 24px tablet */
  --gutter:    16px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Shape ---- */
  --radius-sm: 2px;   /* badges, flags */
  --radius:    3px;   /* buttons, inputs, tags */
  --radius-lg: 4px;   /* panels, banners, tiles */
  --radius-round: 50%;/* avatar and icon buttons only */

  /* ---- Elevation: flat design, shadow only on hover ---- */
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, .14);
  --shadow-menu:  0 8px 24px rgba(0, 0, 0, .16);

  /* ---- Motion ---- */
  --t: .15s ease;

  /* ---- Breakpoints (use in media queries; CSS vars cannot) ----
     mobile < 640px | tablet 640-1023px | desktop >= 1024px | wide >= 1280px
     Product grid columns: 2 / 3 / 4 (with sidebar) or 5 (no sidebar) */
}

/* ---------- Base ---------- */
html { font-family: var(--font); color: var(--c-ink); font-size: 14px; line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--c-white); }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* ---------- Section title: text + 3px yellow underline on the text only ---------- */
.section-title { display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid var(--c-line); margin: 0 0 var(--space-4); }
.section-title h2 { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2;
  padding-bottom: 10px; border-bottom: 3px solid var(--c-yellow); margin-bottom: -1px; }
.section-title a { font-size: var(--fs-small); font-weight: 600; padding-bottom: 10px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius); font: 600 var(--fs-small)/1 var(--font);
  text-decoration: none; cursor: pointer; transition: background var(--t), border-color var(--t); }
.btn-primary { background: var(--c-yellow); color: var(--c-ink); }
.btn-primary:hover { background: var(--c-yellow-hover); }
.btn-dark { background: var(--c-ink); color: var(--c-white); }
.btn-dark:hover { background: var(--c-ink-hover); }
.btn-outline { background: var(--c-white); color: var(--c-ink); border-color: var(--c-border); }
.btn-outline:hover { border-color: var(--c-ink); }
.btn-sm { min-height: 36px; padding: 0 14px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* ---------- Form fields ---------- */
.field { min-height: 44px; padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--radius);
  font: 400 var(--fs-body)/1.2 var(--font); color: var(--c-ink); background: var(--c-white); }
.field::placeholder { color: var(--c-placeholder); }

/* ---------- Badges / flags ---------- */
.flag { display: inline-block; padding: 3px 7px; border-radius: var(--radius-sm); font-size: var(--fs-overline);
  font-weight: 700; letter-spacing: .04em; }
.flag-sale   { background: var(--c-red);    color: var(--c-white); }
.flag-best   { background: var(--c-yellow); color: var(--c-ink); }
.flag-used   { background: var(--c-yellow-tint); color: var(--c-ink); border: 1px solid var(--c-yellow-line); }

/* ---------- Product grid: hairline cells, no gaps ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.product-grid > * { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-white); }
@media (min-width: 640px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .product-grid.is-wide { grid-template-columns: repeat(5, 1fr); } }
.product-card { transition: box-shadow var(--t); position: relative; }
.product-card:hover { box-shadow: var(--shadow-hover); z-index: 2; }
.product-card:hover .product-card__title { text-decoration: underline; text-underline-offset: 3px; }