/*
 * Oxa base styles.
 * Resets, typography defaults, and layout primitives only.
 * Component styles live next to their templates under /components/<name>/styles.css.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  font-family: var(--oxa-font-sans);
  font-size: 16px;
  line-height: var(--oxa-lh);          /* 1.618 */
  font-weight: var(--oxa-fw-body);     /* 400 */
  color: var(--oxa-text);              /* #43454b */
  background: var(--oxa-bg);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body { min-height: 100vh; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--oxa-dur) var(--oxa-ease); }
a:hover { color: var(--oxa-accent-hover); }

/* Headings are light (300) and a shade darker than body copy, per eflow. The
 * previous 600 is now reserved for strong/b below. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--oxa-space-3) 0;
  font-weight: var(--oxa-fw-heading);  /* 300 */
  color: var(--oxa-heading);           /* #131315 */
  line-height: var(--oxa-lh-heading);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--oxa-fs-4xl); line-height: 1.05; }
h2 { font-size: var(--oxa-fs-3xl); line-height: 1.1; }
h3 { font-size: var(--oxa-fs-2xl); line-height: 1.2; }
h4 { font-size: var(--oxa-fs-xl); }
/* h5/h6 inherit the body size, as in eflow. */
h5, h6 { font-size: 1rem; }

p { margin: 0 0 var(--oxa-space-3) 0; }

strong, b { font-weight: var(--oxa-fw-bold); }  /* 600 */

/* Sale price. WooCommerce wraps the discounted figure in <ins> and the original
 * in <del>; the underline <ins> carries by default is never wanted here. */
ins {
  text-decoration: none;
  font-weight: var(--oxa-fw-medium);  /* 500 */
  color: var(--oxa-sale-price);
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Layout primitives — small set, intentionally not a full utility framework. */

.oxa-container {
  width: 100%;
  max-width: var(--oxa-wide-width);
  margin-inline: auto;
  padding-inline: var(--oxa-space-4);
}

.oxa-content {
  max-width: var(--oxa-content-width);
  margin-inline: auto;
}

.oxa-stack > * + * { margin-top: var(--oxa-space-3); }
.oxa-stack-lg > * + * { margin-top: var(--oxa-space-5); }

.oxa-section {
  padding-block: clamp(var(--oxa-space-5), 8vw, var(--oxa-space-8));
}

.oxa-eyebrow {
  display: inline-block;
  font-size: var(--oxa-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--oxa-muted);
}

.oxa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--oxa-radius);
  background: var(--oxa-primary);
  color: var(--oxa-on-primary);
  font-weight: var(--oxa-fw-body);  /* 400 — buttons read at body weight */
  border: 1px solid var(--oxa-primary);
  transition: transform var(--oxa-dur) var(--oxa-ease), background var(--oxa-dur) var(--oxa-ease);
}
.oxa-btn:hover { transform: translateY(-1px); color: var(--oxa-on-primary); }

.oxa-btn--ghost {
  background: transparent;
  color: var(--oxa-text);
  border-color: var(--oxa-border);
}

.oxa-grid {
  display: grid;
  gap: var(--oxa-space-4);
}

.oxa-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.oxa-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.oxa-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.oxa-card {
  background: var(--oxa-surface);
  border: 1px solid var(--oxa-border);
  border-radius: var(--oxa-radius-lg);
  padding: var(--oxa-space-4);
}

.oxa-render-error {
  background: #fff4f4;
  color: #842029;
  border: 1px solid #f5c2c7;
  padding: 0.75rem 1rem;
  border-radius: var(--oxa-radius);
  font-family: var(--oxa-font-mono);
  font-size: var(--oxa-fs-sm);
}

/* Visually-hidden helper for accessible labels. */
.oxa-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.oxa-site-header {
  border-bottom: 1px solid var(--oxa-border);
  background: var(--oxa-bg);
  padding-block: var(--oxa-space-3);
  position: sticky; top: 0; z-index: 5;
}
.oxa-site-nav {
  display: flex; align-items: center; justify-content: space-between;
}
.oxa-site-brand { font-weight: 600; }
.oxa-site-menu {
  display: flex; gap: var(--oxa-space-3);
  list-style: none; margin: 0; padding: 0;
}
.oxa-site-menu a { color: var(--oxa-muted); }
.oxa-site-menu a:hover { color: var(--oxa-text); }

.oxa-site-footer {
  padding-block: var(--oxa-space-4);
  color: var(--oxa-muted);
  border-top: 1px solid var(--oxa-border);
}

/* ══════════════════════════════════════════════════════
 * Static pages — Rreth Nesh, FAQ, Cashback, Terms.
 *
 * The content template is bare: page.php prints the_content() straight into
 * main.oxa-page with no typography of its own, so blocks fell back to browser
 * defaults. These are the client's figures, measured off the reference: 16px
 * Montserrat at #43454B with a 22.652px gap between paragraphs.
 * ══════════════════════════════════════════════════════ */
body.page main.oxa-page {
  max-width: 1280px;
  margin-inline: auto;
  /* No side padding: the content sits flush with the 1280px column, like the
   * header above it. */
  padding: 1rem 0 3rem;
}

@media (max-width: 767px) {
  /* A gutter is still needed once the column is the width of the screen. */
  body.page main.oxa-page { padding-inline: 1rem; }
}

/*
 * Page copy only — never component markup.
 *
 * The rules below are for the words a page is written in, but the front page is
 * a `body.page` with a `main.oxa-page` too, so they were reaching into every
 * component on it: the category grid, the product rows, the brand strip and the
 * campaign list were all being handed a disc marker, a 20px indent and a
 * 22.652px bottom margin, and every link inside a component — product tiles,
 * promo buttons, brand logos — was being underlined.
 *
 * `:where()` wraps the exclusion so it costs nothing: the selectors keep the
 * exact specificity they had, and only their reach changes. Every component
 * renders inside a `<section class="oxa-…">`; static pages carry no such
 * section, so their copy is untouched.
 */
body.page main.oxa-page p:where(:not(section[class*="oxa-"] *)) {
  font-size: 18px;
  line-height: 1.7;
  color: #43454b;
  margin: 0 0 22.652px;
}
/* Editorial body copy, and only that.
 *
 * Cart and checkout are ordinary pages carrying a shortcode, so these rules
 * reach WooCommerce's own furniture as well as written content. A validation
 * error is a `<ul class="woocommerce-error">` of `<li>`, which was picking up
 * this 18px — three sizes larger than the labels beside it — plus the list
 * indent below. Excluded by what they are: a notice is styled as a notice in
 * bp-flow-fix.css and does not want page typography on top of it. */
body.page main.oxa-page li:where(:not(section[class*="oxa-"] *, .woocommerce-error *, .woocommerce-message *, .woocommerce-info *)) {
  font-size: 18px;
  line-height: 1.7;
  color: #43454b;
}
body.page main.oxa-page ul:where(:not(section[class*="oxa-"] *, .woocommerce-error, .woocommerce-message *, .woocommerce-info *)),
body.page main.oxa-page ol:where(:not(section[class*="oxa-"] *)) { margin: 0 0 22.652px; padding-left: 1.25rem; }

body.page main.oxa-page h2:where(:not(section[class*="oxa-"] *)) {
  font-size: 22px;
  font-weight: 600;
  color: #131315;
  margin: 2rem 0 0.75rem;
}
body.page main.oxa-page h3:where(:not(section[class*="oxa-"] *)) {
  font-size: 18px;
  font-weight: 600;
  color: #131315;
  margin: 1.75rem 0 0.5rem;
}
/* Editorial links only. A link already painted as a button carries its own
 * background, and repainting it #131315 put black text on the black "Vazhdoni
 * blerjen" button on the order-received page — the button is inside
 * <section class="bp-thankyou">, which the oxa- escape hatch above does not
 * cover. Excluded by what they are rather than by name: .button is
 * WooCommerce's, __btn is this theme's BEM, and both mean the same thing here —
 * the element has been given a colour already, so leave it alone.
 *
 * Notices are excluded for the same reason. WooCommerce wraps each validation
 * error in an `<a href="#billing_first_name">` so clicking it jumps to the
 * field, which meant every line of a checkout error rendered as underlined
 * #131315 body copy inside a red box, fighting the box's own colour. */
body.page main.oxa-page a:where(:not(section[class*="oxa-"] *, .button, [class*="__btn"], .woocommerce-error *, .woocommerce-message *, .woocommerce-info *)) { color: #131315; text-decoration: underline; }

/* Hero image: centred at its stated size, never wider than the column. */
body.page main.oxa-page .wp-block-image.aligncenter { margin: 0 auto 2rem; text-align: center; }
body.page main.oxa-page .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* The hero renders at 600×400 regardless of the source file's own proportions
 * — the current placeholder is square, and the real store photograph is 3:2. */
body.page main.oxa-page .bp-page-hero img {
  width: 600px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* ── FAQ ──
 * A numbered list rather than headings: the questions read as a sequence, and
 * a heading would put them in the document outline as if each were a section.
 * The question is not emphasised — the number already marks where one starts. */
body.page main.oxa-page ol.bp-faq {
  list-style: decimal;
  padding-left: 1.75rem;
  margin: 0;
}
body.page main.oxa-page ol.bp-faq > li {
  margin-bottom: 1.75rem;
  padding-left: 0.35rem;
}
body.page main.oxa-page ol.bp-faq .bp-faq__q {
  display: block;
  font-weight: 400;
  color: #43454b;
  margin-bottom: 0.35rem;
}
body.page main.oxa-page ol.bp-faq p { margin: 0 0 0.75rem; }
body.page main.oxa-page ol.bp-faq p:last-child { margin-bottom: 0; }

/* Historiku keeps its 16px body — the figure the client measured for it. */
body.page-id-9858 main.oxa-page p { font-size: 16px; }

/* Ordered lists keep their numerals — the tier table and the worked example are
 * both sequences, and the page heading centres over them. */
body.page main.oxa-page ol:where(:not(section[class*="oxa-"] *)) { list-style: decimal; }
body.page main.oxa-page ul:where(:not(section[class*="oxa-"] *)) { list-style: disc; }
body.page main.oxa-page .has-text-align-center { text-align: center; }