/* ==========================================================================
   EQ1 DESIGN SYSTEM — COMPONENTS
   --------------------------------------------------------------------------
   Depends on eq1-tokens.css. Every class is prefixed eq- so it never
   collides with theme or Elementor styles. Add a class to any Elementor
   widget via:  Advanced → CSS Classes.
   ========================================================================== */

/* ---- FLUID ROOT (2K / 4K consistent scaling) ------------------------
   Base is 10px so the 1px = 0.1rem rule holds exactly (10px = 1rem).
   clamp() lets the root grow with viewport width, so every rem-based
   value scales proportionally and the layout keeps the same relative
   look from ~1440p (2K) up through 2160p (4K). Adjust the middle vw
   value to taste; min/max clamp the extremes on small/very-large screens. */
@media screen and (max-width: 2500px) {
    html { font-size: 62.5%; }   /* 1rem = 10px */
}

@media screen and (min-width: 2501px) {
    html { font-size: 82.5%; }   /* 1rem ≈ 13.2px */
}

/* ---- BASE / RESET (scoped, opt-in) ---------------------------------- */
.eq-scope, .eq-scope * { box-sizing: border-box; }
.eq-scope {
  font-family: var(--eq-font);
  color: var(--eq-text);
  font-weight: var(--eq-w-regular);
  line-height: var(--eq-lh-body);
}

/* ---- LAYOUT --------------------------------------------------------- */
.eq-wrap     { max-width: var(--eq-maxw); margin-inline: auto; padding-inline: var(--eq-gutter); }
.eq-section  { padding-block: var(--eq-section); }
.eq-stack-2  { display: flex; flex-direction: column; gap: var(--eq-space-2); }
.eq-stack-4  { display: flex; flex-direction: column; gap: var(--eq-space-4); }
.eq-stack-6  { display: flex; flex-direction: column; gap: var(--eq-space-6); }
.eq-row      { display: flex; gap: var(--eq-space-4); flex-wrap: wrap; align-items: center; }
.eq-between  { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--eq-space-6); flex-wrap: wrap; }

.eq-grid       { display: grid; gap: var(--eq-space-5); }
.eq-grid-2     { grid-template-columns: repeat(2, 1fr); }
.eq-grid-3     { grid-template-columns: repeat(3, 1fr); }
.eq-grid-4     { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){ .eq-grid-4{ grid-template-columns: repeat(2,1fr);} .eq-grid-3{ grid-template-columns:1fr;} }
@media (max-width: 680px){ .eq-grid-2,.eq-grid-4{ grid-template-columns:1fr;} }

/* ---- TYPOGRAPHY UTILITIES ------------------------------------------- */
.eq-hero-title { font-weight: var(--eq-w-light); font-size: var(--eq-fs-hero);
  line-height: var(--eq-lh-tight); letter-spacing: var(--eq-ls-tight); }
.eq-hero-title b   { font-weight: var(--eq-w-semi); }
.eq-hero-title .eq-em { color: var(--eq-accent-hover); }

.eq-h2 { font-weight: var(--eq-w-regular); font-size: var(--eq-fs-h2);
  line-height: var(--eq-lh-snug); letter-spacing: var(--eq-ls-head); }
.eq-h2 b { font-weight: var(--eq-w-semi); }

.eq-h3 { font-weight: var(--eq-w-medium); font-size: var(--eq-fs-h3); letter-spacing: var(--eq-ls-head); }

.eq-lead  { font-size: var(--eq-fs-body-lg); color: var(--eq-text-muted); line-height: var(--eq-lh-body); }
.eq-muted { color: var(--eq-text-muted); }

/* Engineered label — the signature "tick" */
.eq-label {
  display: inline-flex; align-items: center; gap: var(--eq-space-3);
  font-size: var(--eq-fs-label); font-weight: var(--eq-w-medium);
  letter-spacing: var(--eq-ls-label); text-transform: uppercase;
  color: var(--eq-text-muted); font-variant-numeric: tabular-nums;
}
.eq-label::before { content:""; width: 2.8rem; height: 0.15rem; background: var(--eq-accent); display:inline-block; }
.eq-label.is-bare::before { display: none; }

/* ---- BUTTONS -------------------------------------------------------- */
.eq-btn {
  display: inline-flex; 
    align-items: center; 
    gap: var(--eq-space-3);
/*   padding: 1.5rem 2.8rem;  */
    border-radius: var(--eq-radius-pill);
  font-family: var(--eq-font); font-size: var(--eq-fs-small); font-weight: var(--eq-w-semi);
  letter-spacing: 0.06em; cursor: pointer; border: 0.15rem solid transparent;
  transition: background var(--eq-dur) var(--eq-ease), color var(--eq-dur) var(--eq-ease),
              transform var(--eq-dur) var(--eq-ease), border-color var(--eq-dur) var(--eq-ease);
  text-decoration: none; line-height: 1;
}
.eq-btn--primary { background: var(--eq-accent); color: var(--eq-on-accent); }
.eq-btn--primary:hover { background: var(--eq-accent-hover); transform: var(--eq-lift); }
.eq-btn--ghost { background: transparent; color: var(--eq-text); border-color: var(--eq-border-strong); }
.eq-btn--ghost:hover { border-color: var(--eq-text); transform: var(--eq-lift); }
.eq-btn--dark { background: var(--eq-ink); color: var(--eq-cream); }
.eq-btn--dark:hover { transform: var(--eq-lift); }
.eq-btn svg { width: 1.5rem; height: 1.5rem; }

/* ---- BADGES --------------------------------------------------------- */
.eq-badge {
  display: inline-block; background: var(--eq-accent); color: var(--eq-on-accent);
  font-size: var(--eq-fs-label); font-weight: var(--eq-w-semi); letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem; border-radius: var(--eq-radius-pill);
}
.eq-badge--outline { background: transparent; color: var(--eq-accent-hover);
  border: 0.15rem solid var(--eq-accent); }

/* ---- CARDS ---------------------------------------------------------- */
.eq-card {
  background: var(--eq-surface); border: 0.1rem solid var(--eq-border);
  border-radius: var(--eq-radius); overflow: hidden;
  transition: transform var(--eq-dur) var(--eq-ease), box-shadow var(--eq-dur) var(--eq-ease),
              border-color var(--eq-dur) var(--eq-ease);
}
.eq-card:hover { transform: var(--eq-lift); box-shadow: var(--eq-shadow); }

/* Product card */
.eq-product { display: flex; flex-direction: column; }
.eq-product__media { position: relative; aspect-ratio: 4/5;
  background: linear-gradient(168deg, var(--eq-grey-100), var(--eq-grey-200)); overflow: hidden; }
.eq-product__img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--eq-dur-lg) var(--eq-ease); }
.eq-product:hover .eq-product__img { transform: scale(1.04); }
.eq-product__save { position: absolute; top: 1.3rem; left: 1.3rem; z-index: 3; }
.eq-product__wish { position: absolute; top: 1.1rem; right: 1.1rem; width: 3.4rem; height: 3.4rem;
  border-radius: 50%; background: rgba(255,255,255,.85); border: 0.1rem solid var(--eq-border);
  display: grid; place-items: center; color: var(--eq-text-muted); cursor: pointer;
  transition: color var(--eq-dur), border-color var(--eq-dur); z-index: 3; }
.eq-product__wish:hover { color: var(--eq-accent-hover); border-color: var(--eq-accent); }
.eq-product__add { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; z-index: 3;
  background: var(--eq-ink); color: var(--eq-cream); text-align: center; padding: 1.2rem;
  border-radius: var(--eq-radius-pill); font-size: 1.2rem; font-weight: var(--eq-w-semi);
  letter-spacing: 0.08em; opacity: 0; transform: translateY(1rem);
  transition: opacity var(--eq-dur), transform var(--eq-dur); }
.eq-product:hover .eq-product__add { opacity: 1; transform: translateY(0); }
.eq-product__body { padding: 1.8rem 1.8rem 2rem; }
.eq-product__cat { font-size: var(--eq-fs-label); font-weight: var(--eq-w-medium);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--eq-text-muted);
  margin-bottom: var(--eq-space-2); }
.eq-product__name { font-size: var(--eq-fs-h4); font-weight: var(--eq-w-medium);
  letter-spacing: -0.01em; margin-bottom: var(--eq-space-3); }
.eq-price { display: flex; align-items: baseline; gap: var(--eq-space-3);
  font-variant-numeric: tabular-nums; }
.eq-price__now { font-weight: var(--eq-w-semi); font-size: var(--eq-fs-h4); }
.eq-price__was { color: var(--eq-border-strong); text-decoration: line-through; font-size: var(--eq-fs-small); }

/* Category card */
.eq-cat { position: relative; aspect-ratio: 3/4; border-radius: var(--eq-radius);
  overflow: hidden; background: var(--eq-surface-alt); border: 0.1rem solid var(--eq-border);
  display: flex; align-items: flex-end;
  transition: transform var(--eq-dur) var(--eq-ease), box-shadow var(--eq-dur) var(--eq-ease); }
.eq-cat:hover { transform: translateY(-0.5rem); box-shadow: var(--eq-shadow); }
.eq-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--eq-dur-lg) var(--eq-ease); }
.eq-cat:hover .eq-cat__img { transform: scale(1.05); }
.eq-cat__meta { position: relative; z-index: 2; width: 100%; padding: 2rem;
  background: linear-gradient(180deg, transparent, rgba(250,249,246,.92) 62%); }
.eq-cat__title { font-size: 1.7rem; font-weight: var(--eq-w-semi); letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between; }
.eq-cat__count { font-size: 1.2rem; color: var(--eq-text-muted); margin-top: 0.4rem;
  font-variant-numeric: tabular-nums; }
.eq-cat__corner { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2;
  font-size: var(--eq-fs-label); font-weight: var(--eq-w-medium); letter-spacing: 0.14em;
  color: var(--eq-text-muted); font-variant-numeric: tabular-nums; }

/* ---- MEASUREMENT RULE (signature element) --------------------------- */
.eq-rule { display: flex; border-top: 0.1rem solid var(--eq-border); flex-wrap: wrap; }
.eq-rule__seg { flex: 1; min-width: 16rem; border-right: 0.1rem solid var(--eq-border);
  padding: 2.2rem 2.4rem; position: relative; }
.eq-rule__seg:last-child { border-right: 0; }
.eq-rule__seg::before { content:""; position: absolute; top: 0; left: 2.4rem; width: 0.1rem;
  height: 0.8rem; background: var(--eq-border-strong); }
.eq-rule__k { font-size: var(--eq-fs-label); font-weight: var(--eq-w-medium);
  letter-spacing: var(--eq-ls-label); text-transform: uppercase; color: var(--eq-text-muted);
  margin-bottom: var(--eq-space-2); font-variant-numeric: tabular-nums; }
.eq-rule__v { font-size: var(--eq-fs-body); font-weight: var(--eq-w-medium); }

/* ---- INVERTED / ENGINEERED PANEL ------------------------------------ */
.eq-panel-dark { background: var(--eq-invert-bg); color: var(--eq-invert-text);
  border-radius: var(--eq-radius-lg); padding: clamp(4.4rem,6vw,8rem); }
.eq-panel-dark .eq-label { color: var(--eq-accent); }
.eq-panel-dark .eq-muted { color: #A9A9A6; }
.eq-stat__num { font-weight: var(--eq-w-light); font-size: clamp(3.8rem,5vw,6.4rem);
  line-height: 1; font-variant-numeric: tabular-nums; }
.eq-stat__num b { color: var(--eq-accent); font-weight: var(--eq-w-semi); }
.eq-stat__label { font-size: var(--eq-fs-small); color: #A9A9A6; margin-top: 1.2rem;
  line-height: 1.5; max-width: 24ch; }

/* ---- LINKS ---------------------------------------------------------- */
.eq-link-arrow { display: inline-flex; align-items: center; gap: var(--eq-space-2);
  font-size: var(--eq-fs-small); font-weight: var(--eq-w-semi); color: var(--eq-text);
  text-decoration: none; transition: gap var(--eq-dur), color var(--eq-dur); }
.eq-link-arrow:hover { color: var(--eq-accent-hover); gap: var(--eq-space-3); }
.eq-link-arrow svg { width: 1.5rem; height: 1.5rem; }

/* ---- FORM (newsletter) ---------------------------------------------- */
.eq-field { display: flex; border: 0.15rem solid var(--eq-border-strong);
  border-radius: var(--eq-radius-pill); overflow: hidden; background: var(--eq-surface);
  transition: border-color var(--eq-dur); }
.eq-field:focus-within { border-color: var(--eq-accent); }
.eq-field input { flex: 1; border: 0; background: transparent; padding: 1.5rem 2.2rem;
  font-family: var(--eq-font); font-size: 1.4rem; color: var(--eq-text); }
.eq-field input:focus { outline: none; }
.eq-field button { background: var(--eq-accent); color: var(--eq-on-accent); border: 0;
  padding: 0 2.8rem; font-size: var(--eq-fs-small); font-weight: var(--eq-w-semi);
  letter-spacing: 0.06em; cursor: pointer; transition: background var(--eq-dur); }
.eq-field button:hover { background: var(--eq-accent-hover); }

/* ---- ACCESSIBILITY -------------------------------------------------- */
.eq-scope :focus-visible,
.eq-btn:focus-visible, .eq-link-arrow:focus-visible { outline: 0.2rem solid var(--eq-accent); outline-offset: 0.3rem; }
.eq-scope ::selection { background: var(--eq-accent); color: #fff; }

/* ---- REVEAL (optional scroll animation hook) ------------------------ */
.eq-reveal { opacity: 0; transform: translateY(2.4rem);
  transition: opacity 700ms var(--eq-ease), transform 700ms var(--eq-ease); }
.eq-reveal.is-in { opacity: 1; transform: none; }