/* ============================================================
   GLOBAL COMPONENTS — Section 4
   ============================================================ */

/* ── 4.1 Announcement bar ───────────────────────────────── */
.announce{
  height:36px;background:var(--sand);border-bottom:1px solid var(--rule);
  display:grid;place-items:center;overflow:hidden;position:relative;
}
.announce ul{position:relative;height:36px;width:100%}
.announce li{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
  padding-inline:var(--s-16);text-align:center;
}
.announce li[aria-hidden=false]{opacity:1;transform:none}
[dir=rtl] .announce li{letter-spacing:0;text-transform:none;font-size:11.5px}

/* ── 4.2 Utility row ────────────────────────────────────── */
.utility{
  height:34px;background:var(--ivory);border-bottom:1px solid var(--rule);
  font-size:var(--t-10);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);
}
[dir=rtl] .utility{letter-spacing:0;text-transform:none;font-size:11.5px}
.utility .wrap{height:34px;display:flex;align-items:center;justify-content:space-between}
.utility ul{display:flex;align-items:center;gap:var(--s-24)}
.utility a,.utility button{color:var(--mist);transition:color var(--dur) var(--ease)}
.utility a:hover,.utility button:hover{color:var(--onyx)}
.utility svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2}
.u-market{display:inline-flex;align-items:center;gap:7px}
.lang-toggle span{color:var(--mist)}
.lang-toggle [aria-current=true]{color:var(--onyx)}
/* The glyphs are tiny; pad the hit area out to a usable touch target
   without changing how the toggle looks. */
.lang-toggle button{padding:8px 6px;min-width:30px;min-height:30px}
@media (max-width:900px){ .utility{display:none} }

/* ── 4.3 Main header ────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--ivory);border-bottom:1px solid var(--rule);
  transition:box-shadow var(--dur) var(--ease);
}
.header.is-stuck{box-shadow:0 12px 32px rgba(20,22,26,.05)}
/* Direct child only. The mega panels are inside <header>, so an unscoped
   `.header .wrap` would also fix THEIR height at 76px and collapse them. */
.header > .wrap{
  height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:height var(--dur) var(--ease);
}
.header.is-stuck > .wrap{height:62px}

/* brand — centre column */
.brand{display:flex;align-items:center;gap:var(--s-12);justify-self:center;
  /* clear space = 45% of mark height (34px * .45 ≈ 15px) */
  padding-inline:15px}
.brand .emblem{width:34px;height:34px;flex:none;transition:width var(--dur) var(--ease),height var(--dur) var(--ease)}
.header.is-stuck .brand .emblem{width:28px;height:28px}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:var(--f-display);font-weight:500;font-size:var(--t-18);
  letter-spacing:.24em;text-transform:uppercase;color:var(--onyx);
  transition:font-size var(--dur) var(--ease);
}
.header.is-stuck .brand-name{font-size:15px}
.brand-sub{
  font-family:var(--f-body);font-weight:300;font-size:7px;letter-spacing:.46em;
  text-transform:uppercase;color:var(--mist);margin-top:4px;
}
[dir=rtl] .brand-name,[dir=rtl] .brand-sub{
  font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-weight:700;
}
[dir=rtl] .brand-sub{font-size:9px;font-weight:400}

/* nav */
.nav{display:flex;align-items:center;gap:var(--s-24)}
.nav > li > a,.nav > li > button{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-11);letter-spacing:.18em;text-transform:uppercase;
  color:var(--onyx);padding-block:10px;
}
[dir=rtl] .nav > li > a,[dir=rtl] .nav > li > button{letter-spacing:0;text-transform:none;font-size:var(--t-14)}
.nav .caret{width:8px;height:8px;stroke:var(--mist);stroke-width:1.4;fill:none;
  transition:transform var(--dur) var(--ease)}
.nav [aria-expanded=true] .caret{transform:rotate(180deg)}
/* hover underline: 1px champagne rule scaling from the inline-start edge */
.nav > li > a::after,.nav > li > button::after{
  content:"";position:absolute;inset-inline-start:0;bottom:2px;height:1px;width:100%;
  background:var(--champagne);transform:scaleX(0);transform-origin:inline-start;
  transition:transform 450ms var(--ease);
}
.nav > li > a:hover::after,.nav > li > button:hover::after,
.nav > li > a[aria-current=page]::after,.nav [aria-expanded=true]::after{transform:scaleX(1)}
/* PLATINUM tier-1 marker — a 4px champagne diamond. Never on any other item. */
.nav .tier1::before{
  content:"";width:4px;height:4px;background:var(--champagne);
  transform:rotate(45deg);margin-inline-end:8px;flex:none;
}

/* actions */
.actions{display:flex;align-items:center;gap:var(--s-16);justify-self:end}
.actions button,.actions a{position:relative;display:grid;place-items:center;
  width:34px;height:34px;color:var(--onyx)}
.actions svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.2}
.badge{
  position:absolute;top:-1px;inset-inline-end:-1px;min-width:15px;height:15px;
  padding-inline:4px;background:var(--onyx);color:var(--ivory);border-radius:var(--r-1);
  font-size:9px;line-height:15px;text-align:center;font-variant-numeric:tabular-nums;
}
.badge[data-count="0"]{display:none}
.burger{display:none}
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:grid;width:34px;height:34px;place-items:center}
}

/* ── mobile header ──────────────────────────────────────────
   At 375px the desktop lockup needs 426px of a 335px row, so the
   brand and actions are tightened here. Desktop is untouched.     */
@media (max-width:900px){
  .header > .wrap{grid-template-columns:auto 1fr auto;gap:8px}
  .brand{padding-inline:0;gap:8px}
  .brand .emblem,.header.is-stuck .brand .emblem{width:26px;height:26px}
  .brand-name,.header.is-stuck .brand-name{font-size:13px;letter-spacing:.16em}
  .brand-sub{font-size:6px;letter-spacing:.34em;margin-top:3px}
  .actions{gap:2px}
  .actions button,.actions a{width:32px;height:32px}
  .actions svg{width:17px;height:17px}
  /* Account lives in the drawer on mobile — the row cannot hold five targets. */
  .actions .act-account{display:none}
}
@media (max-width:360px){
  .brand-name{font-size:11px;letter-spacing:.12em}
  .brand-sub{display:none}
}

/* ── 4.4 Mega menu ──────────────────────────────────────── */
.mega{
  position:absolute;inset-inline:0;top:100%;z-index:var(--z-mega);
  background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  opacity:0;transform:translateY(8px);pointer-events:none;visibility:hidden;
  /* visibility is a STEP delayed to the end of the fade, never a duration —
     transitioning it as a duration freezes the panel mid-animation. */
  transition:opacity 380ms var(--ease),transform 380ms var(--ease),visibility 0s linear 380ms;
}
.mega[data-open=true]{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity 380ms var(--ease),transform 380ms var(--ease),visibility 0s;
}
.mega .wrap{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:var(--s-48);
  padding-block:var(--s-48)}
/* Mega-menu column labels are navigation labels, not document structure —
   they are divs so they do not break the h1→h2→h3 outline before <main>. */
.mega .mega-h{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);
  margin-bottom:var(--s-16);font-weight:400;
}
[dir=rtl] .mega .mega-h{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.mega li + li{margin-top:11px}
.mega li a{font-size:var(--t-14);color:var(--slate);transition:color var(--dur) var(--ease)}
.mega li a:hover{color:var(--onyx)}
.mega-feature{
  border-inline-start:1px solid var(--rule);padding-inline-start:var(--s-32);
}
.mega-feature .frame{margin-bottom:var(--s-16)}
.mega-feature .mega-ft{font-family:var(--f-head);font-size:var(--t-18);color:var(--onyx);margin-bottom:6px}
.mega-feature p{font-size:var(--t-12);color:var(--mist);margin-bottom:var(--s-16)}
@media (max-width:1180px){ .mega{display:none} }

/* ── 4.5 Mobile drawer ──────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:rgba(20,22,26,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease);
}
.scrim[data-open=true]{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:calc(var(--z-drawer) + 1);
  width:min(400px,88vw);background:var(--paper);border-inline-end:1px solid var(--rule);
  display:flex;flex-direction:column;
  transform:translateX(-100%);visibility:hidden;
  transition:transform 500ms var(--ease),visibility 0s linear 500ms;
}
[dir=rtl] .drawer{transform:translateX(100%)}
.drawer[data-open=true]{
  transform:none;visibility:visible;
  transition:transform 500ms var(--ease),visibility 0s;
}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-24) var(--s-24);border-bottom:1px solid var(--rule);flex:none;
}
.drawer-body{flex:1;overflow-y:auto;padding:var(--s-8) var(--s-24)}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding-block:var(--s-16);border-bottom:1px solid var(--rule);
  font-size:var(--t-12);letter-spacing:.18em;text-transform:uppercase;color:var(--onyx);
}
[dir=rtl] .acc-btn{letter-spacing:0;text-transform:none;font-size:var(--t-15)}
.acc-btn .tier1::before{
  content:"";display:inline-block;width:4px;height:4px;background:var(--champagne);
  transform:rotate(45deg);margin-inline-end:8px;
}
.acc-btn .plus{width:11px;height:11px;stroke:var(--mist);stroke-width:1.3;fill:none;
  transition:transform var(--dur) var(--ease)}
.acc-btn[aria-expanded=true] .plus{transform:rotate(45deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease)}
.acc-panel ul{padding-block:var(--s-12)}
.acc-panel li a{display:block;padding-block:9px;font-size:var(--t-14);color:var(--slate)}
.drawer-foot{
  flex:none;padding:var(--s-24);border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:var(--s-16);
}
.drawer-foot .meta{
  display:flex;justify-content:space-between;font-size:var(--t-10);
  letter-spacing:.18em;text-transform:uppercase;color:var(--mist);
}
[dir=rtl] .drawer-foot .meta{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.x-btn{width:30px;height:30px;display:grid;place-items:center}
.x-btn svg{width:16px;height:16px;stroke:var(--onyx);stroke-width:1.3;fill:none}

/* ── 4.6 Trust strip ────────────────────────────────────── */
.trust{
  background:var(--sand);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.trust ul{display:grid;grid-template-columns:repeat(5,1fr)}
.trust li{
  padding:var(--s-32) var(--s-16);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.trust li + li{border-inline-start:1px solid var(--rule)}
.trust svg{width:20px;height:20px;stroke:var(--champagne);fill:none;stroke-width:1.1}
.trust strong{
  font-size:var(--t-10);letter-spacing:.18em;text-transform:uppercase;
  color:var(--onyx);font-weight:400;
}
[dir=rtl] .trust strong{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.trust span{font-size:11.5px;color:var(--mist);line-height:1.5}
@media (max-width:1000px){
  .trust ul{grid-template-columns:repeat(2,1fr)}
  .trust li{border-inline-start:0 !important;border-top:1px solid var(--rule)}
  .trust li:nth-child(odd){border-inline-end:1px solid var(--rule)}
  .trust li:nth-child(-n+2){border-top:0}
  .trust li:last-child{grid-column:1/-1;border-inline-end:0}
}

/* ── 4.7 Footer ─────────────────────────────────────────── */
.footer{background:var(--sand);border-top:1px solid var(--rule)}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;
  gap:var(--s-48);padding-block:var(--s-64);
}
.footer h3{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);
  margin-bottom:var(--s-24);font-weight:400;
}
[dir=rtl] .footer h3{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.footer li + li{margin-top:10px}
.footer li a{font-size:var(--t-13,13px);color:var(--slate);transition:color var(--dur) var(--ease)}
.footer li a:hover{color:var(--onyx)}
.footer-brand .emblem{width:46px;height:46px;margin-bottom:var(--s-16)}
.footer-brand p{font-size:var(--t-12);color:var(--mist);margin-top:var(--s-12);max-width:30ch}
.footer-ar{font-family:var(--f-ar);font-weight:700;font-size:var(--t-16);color:var(--onyx);
  letter-spacing:0;margin-top:6px}

.nl-form{display:flex;align-items:center;gap:var(--s-8);
  border-bottom:1px solid var(--rule);padding-bottom:8px;max-width:320px}
.nl-form:focus-within{border-bottom-color:var(--champagne)}
.nl-form input{
  flex:1;background:transparent;border:0;outline:none;padding:6px 0;
  font-size:var(--t-14);color:var(--onyx);
}
.nl-form input::placeholder{color:var(--mist)}
.nl-form button{color:var(--gold-ink);display:grid;place-items:center;padding:4px}
.nl-form svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.3}

.socials{display:flex;gap:var(--s-16);margin-top:var(--s-24)}
.socials a{color:var(--mist);transition:color var(--dur) var(--ease)}
.socials a:hover{color:var(--gold-ink)}
.socials svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.2}

.pay-row{
  display:flex;flex-wrap:wrap;gap:var(--s-8);padding-block:var(--s-24);
  border-top:1px solid var(--rule);
}
.pay-chip{
  border:1px solid var(--champagne);border-radius:var(--r-1);padding:6px 12px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
}
[dir=rtl] .pay-chip{letter-spacing:0;text-transform:none;font-size:var(--t-11)}
.legal{background:var(--ivory);border-top:1px solid var(--rule)}
.legal .wrap{
  display:flex;flex-wrap:wrap;gap:var(--s-16);justify-content:space-between;
  padding-block:var(--s-16);font-size:var(--t-10);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);
}
[dir=rtl] .legal .wrap{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.legal ul{display:flex;gap:var(--s-16);flex-wrap:wrap}
@media (max-width:1000px){
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-32)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr} }

/* ── 4.8 Floating WhatsApp ──────────────────────────────── */
.wa-float{
  position:fixed;bottom:26px;inset-inline-end:26px;z-index:var(--z-wa);
  width:52px;height:52px;border-radius:50%;background:var(--emerald);
  display:grid;place-items:center;
  transition:transform var(--dur) var(--ease);
}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:26px;height:26px;fill:var(--ivory)}

/* ── product card (6.3 / Section 8) ─────────────────────── */
.p-card{position:relative;background:var(--paper);border:1px solid var(--rule)}
.p-card .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.p-card .media img,.p-card .media .asset-ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
  transition:opacity 500ms var(--ease);
}
.p-card .media .alt{opacity:0}
.p-card:hover .media .alt,.p-card:focus-within .media .alt{opacity:1}
.p-card .body{padding:var(--s-16)}
.p-card .name{font-family:var(--f-head);font-size:17px;color:var(--onyx);line-height:1.3}
[dir=rtl] .p-card .name{font-family:var(--f-ar);font-weight:700;font-size:var(--t-15)}
.p-card .mat{font-size:var(--t-12);color:var(--mist);margin-top:5px}
.p-card .price{font-size:var(--t-15);color:var(--onyx);margin-top:10px;
  font-variant-numeric:tabular-nums}
.p-card .por{font-size:var(--t-12);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:10px}
.wish{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:32px;height:32px;
  display:grid;place-items:center;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-1);opacity:0;transition:opacity var(--dur) var(--ease);
}
.p-card:hover .wish,.p-card:focus-within .wish,.wish:focus-visible{opacity:1}
@media (hover:none){ .wish{opacity:1} }
.wish svg{width:15px;height:15px;stroke:var(--onyx);fill:none;stroke-width:1.3}
.wish[aria-pressed=true] svg{fill:var(--onyx)}
/* badge — 1px champagne border, NEVER a filled pill */
.p-badge{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  border:1px solid var(--champagne);border-radius:var(--r-1);background:var(--paper);
  padding:4px 9px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);
}
[dir=rtl] .p-badge{letter-spacing:0;text-transform:none;font-size:var(--t-11)}

/* ── modal ──────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;
  padding:var(--s-24);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.modal[data-open=true]{opacity:1;pointer-events:auto}
.modal::before{content:"";position:absolute;inset:0;background:rgba(20,22,26,.35);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-panel{
  position:relative;background:var(--paper);border:1px solid var(--rule);
  width:min(520px,100%);max-height:88vh;overflow-y:auto;padding:var(--s-32);
}
.modal-panel h2{font-family:var(--f-head);font-size:var(--t-22);color:var(--onyx);
  margin-bottom:var(--s-8)}
.modal-panel .x-btn{position:absolute;top:var(--s-16);inset-inline-end:var(--s-16)}

/* ── forms ──────────────────────────────────────────────── */
.field{display:block;margin-bottom:var(--s-16)}
.field > span{
  display:block;font-size:var(--t-10);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mist);margin-bottom:7px;
}
[dir=rtl] .field > span{letter-spacing:0;text-transform:none;font-size:var(--t-12)}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-1);
  padding:12px 14px;font-size:var(--t-14);color:var(--onyx);outline:none;
  transition:border-color var(--dur) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--champagne)}
.field textarea{min-height:100px;resize:vertical}
.err{color:var(--error);font-size:var(--t-12);margin-top:5px}