/* ==========================================================================
   E-Trust — design system
   Brand blue #252dc9 sampled directly from the live E-trust-logo-3.png.

   ELEMENTOR MAPPING
   The :root block below is the single source of truth. In Elementor, recreate
   it under Site Settings → Global Colors / Global Fonts, then this file only
   needs to supply component styles. Every --etrust-* token maps to one global.
   ========================================================================== */

:root {
  /* --- Global Colors (Elementor: Site Settings > Global Colors) --- */
  --brand:        #252dc9;   /* Primary   — logo blue */
  --brand-600:    #1c22a8;   /* Primary hover */
  --brand-700:    #161b86;   /* Primary pressed */
  --brand-50:     #eef0ff;   /* Primary tint — section backgrounds */
  --brand-100:    #dde0ff;

  --ink:          #0c1024;   /* Text       — headings */
  --ink-2:        #1a2036;   /* Secondary  — dark surfaces */
  --muted:        #5b6484;   /* Text muted — body copy, meta */
  --line:         #e4e7f2;   /* Borders */

  --bg:           #ffffff;
  --bg-soft:      #f6f7fc;   /* Accent     — alternating sections */

  --ok:           #0e9f6e;   /* In stock */
  --sale:         #e0342a;   /* Sale / urgency */
  --star:         #f5a524;
  --wa:           #25d366;   /* WhatsApp */

  /* --- Type scale --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);
  --h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);

  /* --- Layout --- */
  --wrap: 1240px;
  --gap: 24px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(12, 16, 36, .06), 0 8px 24px rgba(12, 16, 36, .06);
  --shadow-lg: 0 12px 40px rgba(12, 16, 36, .14);
}

/* ------------------------------ base ------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The hero badge/pricetag sit on negative offsets; without this they widen the
   page on narrow screens and the whole layout scrolls sideways. */
html, body { overflow-x: hidden; }
/* Grid and flex children default to min-width:auto, which lets long product
   titles push a track wider than its container. */
.hero__grid > *, .why > *, .pdp > *, .contact > *, .shop > *, .card, .card__body { min-width: 0; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(48px, 6vw, 88px) 0; }
.section--soft { background: var(--bg-soft); }

/* section heading block */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.sec-head p { color: var(--muted); margin: 6px 0 0; max-width: 60ch; }
.sec-head h2 { margin: 0; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 10px;
}

/* ------------------------------ buttons ------------------------------ */
/* Elementor: Button widget. Normal = --brand, Hover = --brand-600, radius 10px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: 600; font-size: .975rem; cursor: pointer; transition: .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 45, 201, .3); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.btn--light { background: #fff; color: var(--brand); }
.btn--light:hover { background: var(--brand-50); }
.btn--wa { background: var(--wa); color: #06301a; }
.btn--wa:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ------------------------------ announcement ------------------------------ */
/* SECTION 1 */
.topbar {
  background: var(--ink); color: #cfd4e8; font-size: .875rem;
  padding: 9px 0;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar a { color: #fff; font-weight: 600; }
.topbar__list { display: flex; gap: 22px; align-items: center; }
.topbar__list li { display: flex; align-items: center; gap: 7px; }
@media (max-width: 860px) { .topbar__list li:not(:first-child) { display: none; } }
@media (max-width: 620px) {
  .topbar { font-size: .8rem; }
  .topbar__list { display: none; }
  .topbar .wrap { justify-content: center; }
}

/* ------------------------------ header ------------------------------ */
/* SECTION 2 */
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header__main { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
/* The supplied logo is a square "tce TRUST" emblem with no wordmark, so it reads
   as a tiny unreadable mark on its own. Pairing it with a text wordmark fixes that.
   Elementor: Site Logo widget + Heading widget side by side in a flex container. */
.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo img { height: 46px; width: auto; }
.logo__word { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.logo__word small {
  display: block; font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
@media (max-width: 340px) { .logo__word { display: none; } }

.search { flex: 1; position: relative; max-width: 620px; }
.search input {
  width: 100%; padding: 13px 48px 13px 18px; border: 1.5px solid var(--line);
  border-radius: 999px; font: inherit; font-size: .95rem; background: var(--bg-soft);
  transition: .18s;
}
.search input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-50); }
.search button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--brand);
  color: #fff; cursor: pointer; display: grid; place-items: center;
}

.header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.iconbtn {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; color: var(--ink); background: transparent; border: 0; cursor: pointer;
}
.iconbtn:hover { background: var(--brand-50); color: var(--brand); }
.iconbtn__count {
  position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--sale); color: #fff; font-size: .68rem; font-weight: 700;
  border-radius: 999px; display: grid; place-items: center; line-height: 1;
}

/* nav */
.nav { border-top: 1px solid var(--line); }
.nav__list { display: flex; gap: 4px; align-items: center; }
.nav__list > li > a {
  display: block; padding: 14px 16px; font-weight: 600; font-size: .94rem; color: var(--ink);
  border-bottom: 2px solid transparent; transition: .15s;
}
.nav__list > li > a:hover, .nav__list > li > a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.nav__all > a { background: var(--brand); color: #fff !important; border-radius: 8px; margin-right: 10px; border-bottom-color: transparent !important; }
.burger { display: none; }
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: grid; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .header__main { flex-wrap: wrap; }
}

/* ------------------------------ hero ------------------------------ */
/* SECTION 3 */
.hero {
  background:
    radial-gradient(900px 420px at 88% 8%, rgba(37, 45, 201, .16), transparent 62%),
    linear-gradient(170deg, #f4f6ff 0%, #fdfdff 58%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: clamp(40px, 5vw, 76px) 0; }
.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead { font-size: 1.125rem; color: var(--muted); max-width: 52ch; margin-bottom: 28px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.hero__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow);
}
.chip svg { color: var(--ok); }

.hero__visual { position: relative; }
.hero__card {
  display: block; /* it's an <a> — without this the inline box leaks outside the card */
  background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.hero__card img { border-radius: 12px; aspect-ratio: 1; object-fit: contain; background: #fff; }
.hero__badge {
  position: absolute; top: -14px; left: -14px; background: var(--sale); color: #fff;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  box-shadow: var(--shadow); z-index: 2;
}
.hero__pricetag {
  position: absolute; bottom: 18px; right: -12px; background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow-lg);
}
.hero__pricetag span {
  display: block; font-size: .72rem; opacity: .7; letter-spacing: .08em; text-transform: uppercase;
  max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__pricetag strong { font-size: 1.5rem; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__visual { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
  /* pull the floating badge/tag back inside the card so nothing overhangs */
  .hero__badge { left: 0; top: -10px; }
  .hero__pricetag { right: 0; bottom: 12px; }
  .hero__pricetag span { max-width: 150px; }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* ------------------------------ trust bar ------------------------------ */
/* SECTION 4 */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.trust__item { background: #fff; padding: 26px 22px; display: flex; gap: 14px; align-items: flex-start; }
.trust__item svg { flex-shrink: 0; color: var(--brand); }
.trust__item strong { display: block; font-size: .98rem; }
.trust__item span { font-size: .86rem; color: var(--muted); }
@media (max-width: 880px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust { grid-template-columns: 1fr; } }

/* ------------------------------ category grid ------------------------------ */
/* SECTION 5 */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.cat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-align: center; transition: .2s; position: relative; overflow: hidden;
}
.cat:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat__img { height: 110px; display: grid; place-items: center; margin-bottom: 14px; }
.cat__img img { max-height: 110px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.cat strong { display: block; font-size: 1rem; }
.cat span { font-size: .85rem; color: var(--muted); }
@media (max-width: 980px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cats { grid-template-columns: repeat(2, 1fr); gap: 14px; } .cat { padding: 16px; } .cat__img { height: 84px; } .cat__img img { max-height: 84px; } }

/* ------------------------------ product grid ------------------------------ */
/* SECTION 6 — in WordPress this is the WooCommerce "Products" widget */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: .15s;
}
.tab:hover { border-color: var(--brand); color: var(--brand); }
.tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1040px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .grid, .grid--3 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px)  { .grid, .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: .2s; position: relative;
}
.card:hover { border-color: var(--brand-100); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; aspect-ratio: 1; background: #fff; padding: 14px; }
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge { padding: 4px 10px; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.badge--sale { background: var(--sale); color: #fff; }
.badge--new { background: var(--brand); color: #fff; }
.badge--stock { background: #e7f7f0; color: var(--ok); }

.card__wish {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); display: grid; place-items: center;
  cursor: pointer; opacity: 0; transform: translateX(6px); transition: .18s; color: var(--muted); z-index: 2;
}
.card:hover .card__wish { opacity: 1; transform: none; }
.card__wish:hover, .card__wish[aria-pressed="true"] { color: var(--sale); border-color: var(--sale); }

.card__body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.card__brand { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.card__title { font-size: .95rem; font-weight: 600; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a:hover { color: var(--brand); }
.card__stock { font-size: .8rem; color: var(--ok); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.card__stock i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.price { font-size: 1.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.price del { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 7px; }
.card__add {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; border: 0; background: var(--brand-50);
  color: var(--brand); display: grid; place-items: center; cursor: pointer; transition: .16s;
}
.card__add:hover { background: var(--brand); color: #fff; }

/* ------------------------------ services ------------------------------ */
/* SECTION 7 */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.svc__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
  transition: .2s;
}
.svc__item:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.svc__icon {
  width: 54px; height: 54px; border-radius: 14px; background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 18px;
}
.svc__item p { color: var(--muted); font-size: .95rem; }
.svc__item ul { display: grid; gap: 8px; margin-top: 16px; }
.svc__item li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.svc__item li svg { flex-shrink: 0; color: var(--ok); margin-top: 3px; }
@media (max-width: 880px) { .svc { grid-template-columns: 1fr; } }

/* ------------------------------ deal banner ------------------------------ */
/* SECTION 8 */
.deal {
  background: linear-gradient(120deg, var(--brand-700), var(--brand) 55%, #4b52e8);
  border-radius: 20px; color: #fff; padding: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; overflow: hidden;
}
.deal h2 { color: #fff; }
.deal p { color: rgba(255, 255, 255, .85); max-width: 46ch; }
.deal__visual { display: grid; place-items: center; }
.deal__visual img { max-height: 260px; width: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .3)); }
@media (max-width: 880px) { .deal { grid-template-columns: 1fr; text-align: center; } .deal p { margin-inline: auto; } .deal .btn { margin-inline: auto; } }

/* ------------------------------ brands ------------------------------ */
/* SECTION 9 */
.brands { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.brands span {
  padding: 14px 30px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-weight: 700; color: var(--muted); letter-spacing: .04em; font-size: .95rem; transition: .18s;
}
.brands span:hover { color: var(--brand); border-color: var(--brand); }

/* ------------------------------ stats / why ------------------------------ */
/* SECTION 10 */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.why__list { display: grid; gap: 20px; margin-top: 24px; }
.why__list li { display: flex; gap: 14px; align-items: flex-start; }
.why__list svg { flex-shrink: 0; color: var(--brand); margin-top: 2px; }
.why__list strong { display: block; }
.why__list span { color: var(--muted); font-size: .93rem; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: #fff; padding: 30px; text-align: center; }
.stat strong { display: block; font-size: 2.4rem; color: var(--brand); line-height: 1; letter-spacing: -.03em; }
.stat span { font-size: .88rem; color: var(--muted); }
@media (max-width: 880px) { .why { grid-template-columns: 1fr; gap: 36px; } }

/* ------------------------------ testimonials ------------------------------ */
/* SECTION 11 */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.quote__stars { color: var(--star); margin-bottom: 12px; letter-spacing: 2px; }
.quote p { font-size: .97rem; color: var(--ink-2); }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote__av { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-weight: 700; }
.quote footer strong { display: block; font-size: .92rem; }
.quote footer span { font-size: .82rem; color: var(--muted); }
@media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } }

/* ------------------------------ CTA ------------------------------ */
/* SECTION 12 */
.cta { background: var(--ink); color: #fff; border-radius: 20px; padding: clamp(36px, 5vw, 64px); text-align: center; }
.cta h2 { color: #fff; }
.cta p { color: #b9c0da; max-width: 54ch; margin-inline: auto; }
.cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ------------------------------ footer ------------------------------ */
/* SECTION 13 */
.footer { background: var(--ink); color: #aab2ce; padding-top: 64px; font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 48px; }
.footer h4 { color: #fff; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.footer a:hover { color: #fff; }
.footer__links { display: grid; gap: 11px; }
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer__logo { height: 46px; width: auto; filter: brightness(0) invert(1); }
.footer__brand .logo__word { color: #fff; }
.footer__brand .logo__word small { color: #8f98b8; }
.footer__contact li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; }
.footer__contact svg { flex-shrink: 0; color: var(--brand); margin-top: 3px; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08);
  display: grid; place-items: center; color: #fff; transition: .18s;
}
.footer__social a:hover { background: var(--brand); transform: translateY(-2px); }
.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; display: flex;
  justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .85rem;
}
.footer__pay { display: flex; gap: 8px; align-items: center; }
.footer__pay span { background: rgba(255, 255, 255, .1); padding: 5px 11px; border-radius: 6px; font-size: .76rem; font-weight: 600; color: #fff; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ------------------------------ floating WhatsApp ------------------------------ */
.wafab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 26px rgba(37, 211, 102, .45);
  transition: .2s;
}
.wafab:hover { transform: scale(1.07); }

/* ------------------------------ page header (inner pages) ------------------------------ */
.pagehead { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 40px 0; }
.crumbs { font-size: .87rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a:hover { color: var(--brand); }
.pagehead h1 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }

/* ------------------------------ shop layout ------------------------------ */
.shop { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.filters { position: sticky; top: 110px; display: grid; gap: 26px; }
.filters h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.filters label { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: .93rem; }
.filters input { accent-color: var(--brand); width: 16px; height: 16px; }
.filters label span { color: var(--muted); margin-left: auto; font-size: .82rem; }
.shop__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.shop__bar select { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .92rem; background: #fff; }
@media (max-width: 900px) { .shop { grid-template-columns: 1fr; } .filters { position: static; } }

/* ------------------------------ single product ------------------------------ */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pdp__media { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; background: #fff; position: sticky; top: 110px; }
.pdp__media img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.pdp h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.pdp__price { font-size: 2.2rem; font-weight: 800; color: var(--brand); letter-spacing: -.03em; margin: 6px 0 18px; }
.pdp__buy { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qty button { width: 42px; height: 48px; border: 0; background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--muted); }
.qty button:hover { background: var(--brand-50); color: var(--brand); }
.qty input { width: 48px; height: 48px; border: 0; text-align: center; font: inherit; font-weight: 600; }
.specs { width: 100%; border-collapse: collapse; margin-top: 12px; }
.specs th, .specs td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.specs th { color: var(--muted); font-weight: 600; width: 40%; background: var(--bg-soft); }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 32px; } .pdp__media { position: static; } }

/* ------------------------------ contact ------------------------------ */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .95rem; background: #fff; transition: .16s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.infocard { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.infocard li { display: flex; gap: 14px; margin-bottom: 20px; }
.infocard svg { flex-shrink: 0; color: var(--brand); margin-top: 3px; }
.infocard strong { display: block; margin-bottom: 2px; }
.infocard span, .infocard a { color: var(--muted); }
.infocard a:hover { color: var(--brand); }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 24px; }
.map iframe { width: 100%; height: 300px; border: 0; display: block; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ------------------------------ about ------------------------------ */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 40px; }
.prose p { color: var(--muted); }
.prose strong { color: var(--ink); }

/* ------------------------------ utility ------------------------------ */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.hide-sm { display: initial; }
@media (max-width: 700px) { .hide-sm { display: none; } }
.muted { color: var(--muted); }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover, .cat:hover, .svc__item:hover, .btn:hover { transform: none; }
}

/* ==========================================================================
   WORDPRESS LAYER
   Everything above is etrust-site/assets/css/style.css verbatim — the design
   system. This block only bridges it to WordPress/WooCommerce markup, which the
   static build never had to deal with. Keep the two separated so the design file
   can be re-copied from source without losing this.
   ========================================================================== */

/* --- product media: hold the square -----------------------------------------
   `.card__media` sets aspect-ratio: 1 and `img { height: 100% }`. In the static
   build every image was a pre-squared WebP so that was never tested. WooCommerce
   serves uncropped thumbnails, and a percentage height against an auto-height box
   is circular — the image falls back to its intrinsic height and stretches the
   box, which shows up as product photos subtly the wrong shape. Taking the image
   out of flow lets the ratio win. */
.card__media { overflow: hidden; }
.card__link {
  position: absolute;
  inset: 14px;              /* matches .card__media padding */
  display: block;
}
.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- second image on hover, as the old site did ---------------------------- */
.card__img--alt { opacity: 0; transition: opacity .28s ease; }
.card__img--main { transition: opacity .28s ease, transform .3s ease; }
.card:hover .card__img--alt,
.card:focus-within .card__img--alt { opacity: 1; }
.card:hover .card__img--main,
.card:focus-within .card__img--main { opacity: 0; }
.card:hover .card__img { transform: scale(1.04); }

/* --- spec chips -------------------------------------------------------------
   Not in the source design, which had a separate `short` name field. This
   catalogue keeps every spec inside the product title, so without these the grid
   showed three identical-looking laptops whose only difference (Ultra 5/7/9) was
   the part being clamped off. */
.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card__specs .spec {
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.card__specs .spec--cpu {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand);
}
.card__specs .spec--gpu {
  background: #f3ecfd;
  border-color: #e2d4fb;
  color: #6023c0;
}
.card__title { min-height: 2.7em; }   /* keeps card bodies aligned across a row */

/* --- WooCommerce's add-to-cart wearing .card__add's clothes ------------------
   Woo renders <a class="button add_to_cart_button ajax_add_to_cart"> and its own
   classes must be kept (dropping them breaks AJAX), so style that element to
   match .card__add rather than replacing the markup. Scoped through .woocommerce
   for the specificity to beat both Blocksy's button rules and this file's own
   generic .button styles. */
.woocommerce .card__foot .button,
.woocommerce .card__foot .add_to_cart_button {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 0;
  line-height: 0;
  box-shadow: none;
  cursor: pointer;
  transition: .16s;
}
.woocommerce .card__foot .button:hover,
.woocommerce .card__foot .add_to_cart_button:hover {
  background: var(--brand);
  color: #fff;
}
.woocommerce .card__foot .add_to_cart_button svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* "Read more" on unpriced products is a link to the product, not an add-to-cart:
   giving it the cart glyph would promise an action it does not perform. */
.woocommerce .card__foot .button:not(.add_to_cart_button) {
  width: auto;
  height: 38px;
  padding: 0 14px;
  font-size: .8rem;
  line-height: 38px;
  border-radius: 8px;
}
/* Woo appends a "View cart" link after an AJAX add; in a 42px slot it lands as
   stray text over the card. */
.card__foot .added_to_cart { display: none; }

/* YITH renders its own wishlist markup; .card__wish is the positioned shell. */
.card__wish { padding: 0; }
.card__wish .yith-wcwl-add-to-wishlist { margin: 0; }
.card__wish a { display: grid; place-items: center; width: 100%; height: 100%; }
.card__wish .feedback,
.card__wish .yith-wcwl-add-to-wishlist span { display: none; }

/* --- full-bleed hero --------------------------------------------------------
   The hero is an Elementor section capped at its container width, which left grey
   gutters and made the page read as boxed. Negative margins rather than
   `width: 100vw` — 100vw counts the scrollbar and overflows by its width. */
.etr-hero {
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --- two-way scroll reveal --------------------------------------------------
   Animates in on entry and back out when leaving upwards, so scrolling up reads
   the same as scrolling down. Additive only: `.reveal` is applied by JS, so with
   no JS or reduced-motion nothing is ever hidden. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1),
              transform .5s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-above { opacity: 0; transform: translateY(-18px); }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-above {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- shop bits the static design didn't need --------------------------------
   Its sidebar was JS-rendered checkboxes filtering an in-memory array. WordPress
   navigates to real category URLs instead, so the category filter is a link list
   and needs its own styling; the design only styled `.filters label`. */
.flist { list-style: none; margin: 0; padding: 0; }
.flist a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: .93rem;
  color: var(--ink);
}
.flist a:hover { color: var(--brand); }
.flist a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.flist span { color: var(--muted); margin-left: auto; font-size: .82rem; }

/* Mobile filter toggle — the static build had no server-rendered sidebar to
   collapse, so this control did not exist there. */
.fbtn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
}
@media (max-width: 900px) {
  .fbtn { display: inline-flex; }
  .filters { display: none; }
  .filters.open { display: grid; }
}

.shop__main { min-width: 0; }   /* let the grid shrink instead of overflowing */

/* Pagination — no equivalent in a single-page static shop.

   ⚠️ These rules used to target ONLY `.woocommerce-pagination ul` and matched
   nothing on this site. Blocksy filters Woo's pagination away and renders
   `<nav class="ct-pagination"><div class="ct-hidden-sm">` with bare
   `<a class="page-numbers">` children and no list at all — so the pager was
   being styled entirely by Blocksy's own stylesheet. Measured: current page
   #1559ed at 4px radius, which is Blocksy's blue, not this design's #252dc9
   at 10px, so the one control below every grid on the site was off-palette.

   Both vocabularies are kept: Woo's is what renders if Blocksy ever stops
   filtering it, and after the documented rollback to the `blocksy` theme.
   `nav.ct-pagination` carries a tag for specificity, because Blocksy sets
   display/justification on that element itself. */
.woocommerce-pagination ul,
nav.ct-pagination,
nav.ct-pagination > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-pagination ul,
nav.ct-pagination {
  margin: 32px 0 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span,
nav.ct-pagination a.page-numbers,
nav.ct-pagination span.page-numbers {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.woocommerce-pagination a:hover,
nav.ct-pagination a.page-numbers:hover { border-color: var(--brand); color: var(--brand); }
.woocommerce-pagination .current,
nav.ct-pagination span.page-numbers.current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
/* The "…" gap indicator is not a destination, so it should not look like one. */
nav.ct-pagination span.page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--muted);
  min-width: 24px;
  padding: 0;
}
nav.ct-pagination svg { width: 9px; height: 9px; }

/* Woo emits the result count as a <p> and the sorting control as a <form>, both
   block elements with their own margins, dropped straight into the flex
   `.shop__bar`. The 16px bottom margin on the count made it sit optically high
   against the 40px select. The design's bar has two plain inline children. */
.shop__bar .woocommerce-result-count,
.shop__bar .woocommerce-ordering {
  margin: 0;
}

/* Sidebar max-price control. `.shop__bar select` styles the sorting dropdown in
   the bar; the design never had a select in the sidebar, so this one needs its
   own rule rather than inheriting one. */
.fprice select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: .92rem;
  background: #fff;
  color: var(--ink);
}
.fprice select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}
/* Visible only when theme.js has not run — it sets [hidden] on this button. */
.fprice__go {
  margin-top: 10px;
  width: 100%;
}
/* The `hidden` attribute alone does NOT hide this. `.btn` sets
   `display: inline-flex`, as does Blocksy's `[type="submit"]` rule, and any
   author `display` declaration beats the UA stylesheet's
   `[hidden] { display: none }`. The button stayed visible on the live page even
   though its `hidden` property read `true` — which is also why checking
   `el.hidden` rather than the computed display missed it. */
.fprice__go[hidden] {
  display: none;
}

/* The sticky sidebar offsets for a header that is sticky in the design; ours is
   two rows tall (search + nav), so the original 110px sat too high. */
@media (min-width: 901px) {
  .filters { top: 130px; }
}

/* --- screen-reader utilities ------------------------------------------------
   The design system defines none of these: the static page hid its search label
   with the `hidden` attribute and had no skip link at all. WordPress and
   WooCommerce emit `.screen-reader-text` throughout, and this theme uses `.sr`
   (front-page h1, icon-button labels) and `.visually-hidden` (search label), so
   all three need a definition or that text renders visibly — which is exactly
   what "Skip to content" and "Search products" were doing on the live page. */
.visually-hidden,
.screen-reader-text,
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused, then a real, visible control. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 10px 0;
}
.skip:focus {
  left: 0;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Visible focus everywhere — the design file sets none. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   GRID / TYPE / BUTTON CORRECTIONS
   ========================================================================== */

/* --- three columns everywhere -----------------------------------------------
   The homepage product rows are Elementor WooCommerce widgets that bake their
   column count into the markup as .columns-4 / .columns-5, so the PHP
   `loop_shop_columns` filter never reaches them. At five across the cards were
   222px — too narrow for a name, spec chips, a price and a button, which is a
   large part of why the grid felt cramped. Override the widget's own classes so
   the homepage matches the shop. */
.woocommerce ul.products,
.woocommerce .products.columns-2,
.woocommerce .products.columns-3,
.woocommerce .products.columns-4,
.woocommerce .products.columns-5,
.woocommerce .products.columns-6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .woocommerce ul.products,
  .woocommerce .products[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce .products[class*="columns-"] {
    grid-template-columns: 1fr;
  }
}

/* --- headings were clipping their descenders --------------------------------
   `.pagehead h1` measured 46px tall against 49px of content: the "p" in
   "Laptops" was being sliced. The design's clamp() sizes assume a line-height
   that the inherited heading rules were not giving it. Set one explicitly and
   stop anything from cropping the overflow. */
.pagehead h1,
.pdp h1,
.card__title,
h1, h2, h3 {
  line-height: 1.25;
  overflow-wrap: break-word;
}
.pagehead h1,
.pdp h1 {
  overflow: visible;
  padding-bottom: 2px;   /* descender room at the largest clamp size */
}

/* --- add to cart: a real button ---------------------------------------------
   Was a 42px icon-only square, which read as a minor utility next to the price.
   It is the one action these pages exist to get clicked, so give it a solid
   fill, a label and a proper hit area. Still scoped through .woocommerce so it
   beats both Blocksy's button styles and this file's generic .button rules. */
.woocommerce .card__foot .button,
.woocommerce .card__foot .add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(37, 45, 201, .22);
  cursor: pointer;
  transition: background .16s, box-shadow .16s, transform .16s;
}
.woocommerce .card__foot .button:hover,
.woocommerce .card__foot .add_to_cart_button:hover {
  background: var(--brand-600);
  box-shadow: 0 4px 16px rgba(37, 45, 201, .3);
  transform: translateY(-1px);
}
.woocommerce .card__foot .button:active,
.woocommerce .card__foot .add_to_cart_button:active {
  background: var(--brand-700);
  transform: none;
}
.woocommerce .card__foot .add_to_cart_button svg {
  width: 17px;
  height: 17px;
  display: block;
  flex-shrink: 0;
}
.woocommerce .card__foot .button.loading {
  opacity: .65;
  pointer-events: none;
}
/* "Read more" (no price) is a link to the product, not an add-to-cart — keep it
   secondary so it cannot be mistaken for one. */
.woocommerce .card__foot .button:not(.add_to_cart_button) {
  background: var(--brand-50);
  color: var(--brand);
  box-shadow: none;
}
.woocommerce .card__foot .button:not(.add_to_cart_button):hover {
  background: var(--brand-100);
  box-shadow: none;
}

/* Price and button share a row; the price may wrap, the action must not shrink. */
.card__foot { gap: 12px; flex-wrap: wrap; }
.card__foot .price { min-width: 0; }
.woocommerce .card__foot .button { flex-shrink: 0; }

/* At two columns the card narrows enough that label + price compete; drop the
   label and go back to a square icon rather than let either wrap. */
@media (max-width: 1100px) and (min-width: 561px) {
  .woocommerce .card__foot .add_to_cart_button .btn__label { display: none; }
  .woocommerce .card__foot .add_to_cart_button { width: 44px; padding: 0; }
}

/* --- one typeface across the whole site -------------------------------------
   The design loads no webfont: --font is a system stack that resolves to Segoe UI
   on Windows and San Francisco on macOS. Elementor's kit was applying Roboto to
   headings inside its sections, so the homepage ran two typefaces at once —
   Roboto section headings above Segoe UI product cards.

   functions.php dequeues the Roboto files; this covers the inline per-widget
   typography Elementor writes into the page, which a dequeue cannot reach.
   Scoped to Elementor rather than global so it cannot fight the design system. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-button .elementor-button,
.elementor-widget-woocommerce-products,
.elementor-heading-title,
.elementor-element,
.elementor-kit-7 {
  font-family: var(--font);
}

/* Elementor section headings should read as this site's h2, not as a widget's
   own default: same size ramp and tracking as the rest of the page. */
.elementor-widget-heading .elementor-heading-title {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* --- price parity between homepage rows and the shop ------------------------
   The same .card markup rendered its price at 15px/600 inside an Elementor
   products widget but 20.8px/800 on the shop, because Elementor's widget styles
   win on specificity. The price is the number people scan for — it should not
   change size depending on which page the card happens to sit on. */
.card__foot .price,
.elementor-widget-woocommerce-products .card__foot .price {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -.02em;
}
.card__foot .price del {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: 7px;
}
.card__foot .price ins {
  text-decoration: none;
}

/* --- wishlist button --------------------------------------------------------
   YITH renders this CLIENT-SIDE: the server emits an empty
   <div class="yith-add-to-wishlist-button-block"> and its JS builds the control
   afterwards. Styling the classic `.yith-wcwl-add-to-wishlist` markup therefore
   matched nothing, and the real element — an <a> 104x63 with the words "Add to
   wishlist" at 16px — spilled out over the top-right of every card on hover.

   Collapse it to the icon-only circle the design specifies. font-size: 0 on the
   anchor kills the label wherever YITH puts it (it is a bare text node, not a
   wrappable span), and the icon is sized explicitly so it survives that. */
.card__wish { padding: 0; }
.card__wish .yith-add-to-wishlist-button-block { margin: 0; width: 100%; height: 100%; }
.card__wish .yith-wcwl-add-to-wishlist-button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  color: inherit;
}
.card__wish .yith-wcwl-icon,
.card__wish svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}
/* The loading state ships its own spinner and a reserved text width. */
.card__wish .yith-wcwl-add-to-wishlist-button--loading { opacity: .5; }
.card__wish .yith-wcwl-add-to-wishlist-button span,
.card__wish .yith-wcwl-tooltip,
.card__wish .yith-wcwl-feedback { display: none !important; }
/* Added state: fill the heart in the sale colour so the change is legible. */
.card__wish .yith-wcwl-add-to-wishlist-button--added,
.card__wish .yith-wcwl-add-to-wishlist-button:hover { color: var(--sale); }

/* --- wishlist button, PHP-template markup -----------------------------------
   The comment above describes YITH's React mode, which is no longer what runs.
   The theme now forces `php-templates` (see the yith_wcwl_rendering_method filter
   in functions.php) because the React build cost 1,235 kB to draw one heart. The
   React rules above are deliberately KEPT so that reverting the filter needs no
   CSS change.

   Server-rendered markup is three levels deep instead of one:

     div.yith-wcwl-add-to-wishlist.wishlist-fragment
       > div.yith-wcwl-add-button            (or .yith-wcwl-wishlistaddedbrowse
                                              / .yith-wcwl-wishlistexistsbrowse
                                              once the item is on a list)
           > a.add_to_wishlist > svg + span

   `.card__wish` is a 36px grid cell, so every wrapper in that chain has to be told
   to fill it or the anchor collapses to the icon's intrinsic box in the corner. */
.card__wish .yith-wcwl-add-to-wishlist,
.card__wish .yith-wcwl-add-button,
.card__wish .yith-wcwl-wishlistaddedbrowse,
.card__wish .yith-wcwl-wishlistexistsbrowse {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
/* The label is a real <span> here, not a bare text node, so it can be hidden
   outright rather than crushed with font-size: 0. */
.card__wish .yith-wcwl-add-to-wishlist a > span,
.card__wish .yith-wcwl-add-to-wishlist .yith-wcwl-tooltip,
.card__wish .blockUI { display: none !important; }
/* Already-on-a-list is a different element, not a state class on the same one. */
.card__wish .yith-wcwl-wishlistaddedbrowse a,
.card__wish .yith-wcwl-wishlistexistsbrowse a { color: var(--sale); }

/* PDP wishlist: rendered bare into .pdp__summary by the Woo summary hook, with no
   positioned shell around it. Kept quiet — the WhatsApp CTA below it is the primary
   action on this page and the heart must not compete with it. */
.pdp__summary .yith-wcwl-add-to-wishlist { margin: 14px 0 0; }
.pdp__summary .yith-wcwl-add-to-wishlist a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.pdp__summary .yith-wcwl-add-to-wishlist a:hover { color: var(--sale); }
.pdp__summary .yith-wcwl-add-to-wishlist svg,
.pdp__summary .yith-wcwl-add-to-wishlist .yith-wcwl-icon { width: 17px; height: 17px; flex: none; }
.pdp__summary .yith-wcwl-add-to-wishlist .yith-wcwl-tooltip { display: none; }

/* --- PDP: no price on file ---------------------------------------------------
   Six products carry no price, so WooCommerce refuses to make them purchasable and
   renders no add-to-cart form at all. The template used to leave `.pdp__price` empty
   above a "Ask us about business and bulk pricing." line, which read as a page that
   had failed to load rather than one that wants a phone call. See
   etrust_child_has_price().

   Deliberately NOT styled like a price: it is a sentence, so it takes the 2.2rem
   number style down to something that sits correctly next to body copy, and drops
   the brand colour so it cannot be mistaken for a figure. */
.pdp__price--request {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
/* The design system defines no `.stock` rules at all — the template's <i> is an
   empty inline element with no box, so it paints nothing. Sized only inside this new
   state, on purpose: giving every .stock line a dot would change the appearance of
   all 128 priced products, which is not what this change is for. Amber rather than
   green or red because "ask us" is neither in stock nor unavailable. */
.stock--enquire {
  color: var(--star);
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stock--enquire i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--star);
  display: inline-block;
  flex: none;
}
/* With no add-to-cart form present, the WhatsApp button is the only action on the
   page, so it stops being a secondary link and gets the emphasis of one. */
.btn--primary-cta {
  box-shadow: 0 10px 24px rgba(37, 211, 102, .28);
  font-size: 1.02rem;
}
/* The three trust lines under the buy area, and the short description above it.
   Neither exists in the design system: etrust-site/product.html carries a
   `table.specs` there instead, which this catalogue cannot fill — it has no SKUs
   and no attributes, so a specs table would render a column of em dashes. The
   perks list says the same three things the PDP already promises in prose.

   Both classes had ZERO rules before this, so `.perks` rendered as an unstyled
   list with its inline SVG icons jammed against the text. */
.pdp__excerpt {
  color: var(--muted);
  margin: 0 0 18px;
}
.pdp__excerpt p:last-child {
  margin-bottom: 0;
}
.perks {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.perks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
}
.perks li b {
  color: var(--ink);
  font-weight: 700;
}
/* flex: none so a long second line cannot squeeze the icon, and the small top
   offset optically centres it against the first line of text rather than the
   whole block. */
.perks svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--brand);
}
/* ---------------------------------------------------------------------------
   Product data tabs (description / reviews)

   The design system has NO tabs component — etrust-site/product.html puts a
   `table.specs` in the summary column instead and has no tab strip at all. So
   .woocommerce-tabs, .wc-tabs, .woocommerce-Tabs-panel and .woocommerce-Reviews
   had **zero** rules between them and rendered as a bare unstyled list above
   unstyled body copy, flush to the section edge.

   Styled here rather than removed because the description is the only place the
   full spec sheet lives — every product's specs are prose in post_content, and
   the shop cards can only surface four of them as chips.
   --------------------------------------------------------------------------- */
.woocommerce-tabs {
  margin: 0;
}
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0 0 26px;
  padding: 0 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs li {
  margin: 0;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--brand);
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
/* Woo hides inactive panels with a `style="display:none"` attribute, so panels
   need no rule of their own — only the typography inside them. */
.woocommerce-Tabs-panel {
  max-width: 78ch;
  color: var(--ink);
  line-height: 1.7;
}
.woocommerce-Tabs-panel > h2:first-child {
  font-size: 1.3rem;
  margin: 0 0 14px;
}
.woocommerce-Tabs-panel p {
  margin: 0 0 12px;
}
.woocommerce-Tabs-panel strong,
.woocommerce-Tabs-panel b {
  color: var(--ink);
}
/* This catalogue's descriptions were imported with Tailwind utility classes
   (`pn-product-detail-*`, `text-xl`, `text-gray-600`, `mb-4`) still on them. No
   Tailwind is loaded — and none should be — so those classes resolve to nothing
   and the block inherits from the panel above. Named here so the next person
   does not go looking for a missing stylesheet: the markup is the import's, the
   styling is deliberately ours. */
.pn-product-detail-description-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
}
.pn-product-detail-description-body {
  color: var(--ink);
}
.woocommerce-Reviews .woocommerce-Reviews-title {
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.woocommerce-Reviews .woocommerce-noreviews {
  color: var(--muted);
  margin: 0;
}
/* ---------------------------------------------------------------------------
   Cart and checkout (WooCommerce Blocks)

   These two pages are the block-based cart/checkout, not the classic shortcode
   ones, and the design system has no rules for either — `etrust-site/` only ever
   contained index, shop, product, about and contact. Blocksy's parent stylesheet
   is deliberately kept enqueued to dress them (DEPLOY-storefront.md), and that
   is still the right call: this block only reconciles the parts that read as a
   different website, and deliberately leaves the block layout alone.

   The primary actions were Blocksy's `--theme-button-background-initial-color`,
   measured rgb(40, 114, 250) at 3px radius — against this design's #252dc9 at
   var(--radius-sm). "Proceed to Checkout" and "Place Order" are the two most
   important buttons on the site and were the only ones not wearing its palette.
   --------------------------------------------------------------------------- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--brand);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: .18s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--brand-600);
}
/* Radio cards for shipping and payment: Blocksy leaves these on its own accent,
   so a selected option highlighted in a blue the rest of the site never uses. */
.wc-block-components-radio-control__option:has(input:checked),
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--brand);
}
.wc-block-components-radio-control__input:checked {
  accent-color: var(--brand);
}
/* Text inputs, to match the site's field treatment (see `.field input`). */
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}
/* Links inside the funnel — coupon toggle, "Add apartment", terms. */
.wc-block-components-panel__button,
.wc-block-components-checkout-step__description a,
.wc-block-components-address-form__address_2-toggle {
  color: var(--brand);
}