/* ============================================================
   Linkdeets — shared stylesheet
   Palette: white ground · silver metal · navy #274472
   Type: Fraunces (display) · Hanken Grotesk (body/UI)
   ============================================================ */

:root {
  --ground:      #ffffff;
  --panel:       #f5f6f8;
  --panel-2:     #eef0f4;
  --ink:         #274472;  /* brand navy — headings & accent */
  --ink-rgb:     39, 68, 114; /* same navy, for rgba() tints */
  --ink-deep:    #1a2e4a;  /* deeper navy — strong text */
  --body:        #4a5a70;  /* slate — long-form text */
  --muted:       #8a93a3;  /* captions / meta */
  --silver-line: #e2e5ea;  /* hairline dividers */
  --silver:      #c3c9d2;
  --metal-hi:    #f3f5f8;
  --metal-lo:    #b3bbc8;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(26,46,74,.06), 0 4px 14px rgba(26,46,74,.05);
  --shadow:    0 8px 30px rgba(26,46,74,.10);
  --shadow-lg: 0 30px 70px rgba(26,46,74,.18);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 70px;
  --ticker-h: 44px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-display: "Oswald", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--body);
  background: var(--ground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-deep);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0;
  font-optical-sizing: auto;
}

p { margin: 0; }

::selection { background: rgba(39,68,114,.14); color: var(--ink-deep); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 10vw, 140px); }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }
.section--panel { background: var(--panel); }

/* A saturated brand-blue band. The page runs light for six sections, so the
   close has to arrive with weight: this lands first in azure, then the CTA
   below it goes deeper still — light, blue, deepest navy. Two radial passes
   set diagonally against the linear base keep the field from reading as a
   flat swatch. */
.section--blue {
  background:
    radial-gradient(75% 105% at 12% 0%, rgba(96, 134, 200, .34), transparent 62%),
    radial-gradient(65% 85% at 90% 100%, rgba(48, 82, 146, .55), transparent 60%),
    linear-gradient(135deg, #2f4f8c 0%, #274472 52%, #1d3560 100%);
}
.section--blue .eyebrow { color: rgba(255, 255, 255, .86); }
.section--blue h2 { color: #fff; }
/* A touch smaller than the page's prose: this is a closing line, and the
   white heading above it is carrying the weight. */
.section--blue .statement p { font-size: 1.05rem; color: rgba(255, 255, 255, .93); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  margin: 0 0 1.1rem;
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--body);
  max-width: 46ch;
}

/* Optical sizing: the larger the type, the less weight it needs to carry,
   and the tighter its leading should be. One weight and one line-height
   across every size is what makes a page read flat. */
.display-xl { font-size: clamp(2.7rem, 7vw, 5.4rem); font-weight: 500; line-height: 1.02; }
.display-l  { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 500; line-height: 1.07; }
.display-m  { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; line-height: 1.18; }

.italic-accent { font-style: normal; color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .01em;
  padding: .85em 1.5em;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 20px rgba(39,68,114,.28);
}
.btn--primary:hover {
  background: var(--ink-deep);
  box-shadow: 0 10px 28px rgba(39,68,114,.36);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--silver);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(39,68,114,.04); }

.btn--light {
  background: #fff;
  color: var(--ink-deep);
  border-color: var(--silver-line);
  box-shadow: var(--shadow-sm);
}
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* "Questions? Talk to us →" — the question steps back into slate so the
   colour lands on the action. The action carries a faint rule at rest (there
   is no hover on a phone, so it has to read as a link untouched), and a solid
   one draws across it on hover while the arrow nudges forward. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
}
.text-link__lead { color: var(--body); font-weight: 500; }
.text-link__label {
  padding-bottom: .12em;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat,
    linear-gradient(rgba(var(--ink-rgb), .22), rgba(var(--ink-rgb), .22)) 0 100% / 100% 1.5px no-repeat;
  transition: background-size .4s var(--ease);
}
.text-link:hover .text-link__label,
.text-link:focus-visible .text-link__label { background-size: 100% 1.5px, 100% 1.5px; }
.text-link .arrow { display: inline-flex; transition: transform .3s var(--ease); }
.text-link .arrow svg { width: 1em; height: 1em; }
.text-link:hover .arrow,
.text-link:focus-visible .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .text-link__label, .text-link .arrow { transition: none; }
}

/* ============================================================
   Scroll progress bar
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #274472, #4a6aa6);
  box-shadow: 0 0 8px rgba(39, 68, 114, .45);
  transform-origin: left;
  transition: width .08s linear;
}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--silver-line);
  background: rgba(255,255,255,.85);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
}
.brand .dot { color: var(--ink); }
/* Header wordmark. logo-trimmed.png is cropped to the artwork and exported at
   2x, so it renders crisply without any object-fit cropping. */
.brand__logo {
  display: block;
  height: 26px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-deep);
  position: relative;
  padding-block: .3em;
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }

/* account / sign-in button */
.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid var(--silver-line);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: .82rem;
  padding: .45em .95em;
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.account-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.account-btn.is-user {
  gap: .45rem;
  padding: .28rem .65rem .28rem .3rem;
  border: 1px solid var(--silver-line);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
}
.account-btn.is-user:hover { background: rgba(39,68,114,.06); color: var(--ink); border-color: var(--silver-line); }
.account-btn .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.account-btn.is-user .avatar { width: 26px; height: 26px; }
.account-btn .avatar--initial {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, #35558c 0%, #274472 75%);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}
.account-btn__name {
  font-size: .85rem; font-weight: 600; color: var(--ink);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-btn__chev { color: var(--body); transition: transform .2s var(--ease); }
.account-btn[aria-expanded="true"] .account-btn__chev { transform: rotate(180deg); }

/* modern account dropdown */
.account { position: relative; display: inline-flex; }
.account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 330px;
  max-width: calc(100vw - 1.5rem);
  background: #fff;
  border: 1px solid var(--silver-line);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(26,46,74,.18);
  padding: .6rem;
  z-index: 60;
  transform-origin: top right;
  animation: account-pop .16s var(--ease);
}
.account-menu[hidden] { display: none; }

/* On a phone the 330px panel is anchored to the account button's right edge —
   but that button sits to the LEFT of the cart and the hamburger, so the panel
   ran off the left side of the screen with its contents cut in half. Span the
   viewport instead.
   `position: fixed` here resolves against .site-header, whose backdrop-filter
   makes it a containing block. That is why `top` is written from --header-h and
   not 100%: the header is pinned to the top of the viewport, so this lands just
   under the bar whichever of the two ends up being the containing block. */
@media (max-width: 560px) {
  .account-menu {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: .7rem;
    right: .7rem;
    width: auto;
    max-width: none;
    transform-origin: top center;
    /* The contact & delivery form is tall — keep it on screen. */
    max-height: calc(100vh - var(--header-h) - 2rem);
    overflow-y: auto;
  }
}
@keyframes account-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.account-menu__head {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .5rem .75rem;
  border-bottom: 1px solid var(--silver-line);
}
.account-menu__head .avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%; object-fit: cover;
}
.account-menu__head .avatar--initial {
  display: inline-grid; place-items: center;
  background: linear-gradient(145deg, #35558c 0%, #274472 75%);
  color: #fff;
  font-size: 1.15rem; font-weight: 700;
}
.account-menu__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.account-menu__nameRow { display: flex; align-items: center; gap: .3rem; }
.account-menu__name { font-weight: 700; font-size: .9rem; color: var(--ink-deep); }
.account-menu__edit {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; color: var(--body);
  border-radius: 6px; cursor: pointer; flex: 0 0 auto;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.account-menu__edit:hover { background: rgba(39,68,114,.08); color: var(--ink); }

/* contact & delivery details section */
.account-menu__details {
  border-top: 1px solid var(--silver-line);
  padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.account-menu__detailsHead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--body);
}
.account-menu__detailLine {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .83rem; color: var(--ink);
}
.account-menu__detailLine svg { flex-shrink: 0; margin-top: .12em; color: var(--body); }
.account-menu__detailLine--addr { color: var(--body); }
.account-menu__detailLine--addr span { white-space: pre-wrap; }
.account-menu__detailLine--empty { color: var(--body); font-style: italic; }
.account-menu__mapLink { text-decoration: none; font-weight: 600; color: var(--ink); }
.account-menu__mapLink:hover span { text-decoration: underline; }
.account-menu__detailsForm { display: flex; flex-direction: column; gap: .55rem; }
.account-menu__textarea { resize: vertical; }
.account-menu__fieldRow { display: grid; grid-template-columns: .7fr 1.3fr; gap: .45rem; }
.account-menu__fieldRow--even { grid-template-columns: 1fr 1fr; }
.account-menu__fieldRow .account-menu__input { min-width: 0; }
.account-menu__formError { margin: 0; font-size: .78rem; color: #e5484d; }

/* inline name editor */
.account-menu__editform { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.account-menu__input {
  width: 100%;
  border: 1px solid var(--silver-line);
  border-radius: 9px;
  padding: .6em .75em;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink);
}
.account-menu__input:focus { outline: 2px solid var(--ink-deep); outline-offset: 0; }
.account-menu__editbtns { display: flex; gap: .4rem; }
.account-menu__save,
.account-menu__cancel {
  font-size: .8rem; font-weight: 600;
  padding: .4em .85em; border-radius: 8px; cursor: pointer;
  font-family: inherit;
}
.account-menu__save { border: none; background: var(--ink); color: #fff; }
.account-menu__save:hover { background: var(--ink-deep); }
.account-menu__save:disabled { opacity: .6; cursor: default; }
.account-menu__cancel { border: 1px solid var(--silver-line); background: transparent; color: var(--ink); }
.account-menu__cancel:hover { background: rgba(39,68,114,.06); }
.account-menu__email {
  font-size: .78rem; color: var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* links out of the menu (purchase history) — quieter than Sign out, which
   stays the only bordered control in the dropdown */
.account-menu__link {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .55rem; padding: .6em .9em;
  border-radius: 10px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: .85rem;
  transition: background .2s var(--ease);
}
.account-menu__link svg { flex-shrink: 0; color: var(--body); }
.account-menu__link:hover { background: rgba(39,68,114,.06); }
.account-menu__signout {
  width: 100%; margin-top: .35rem;
  border: 1px solid var(--silver-line); background: transparent;
  color: var(--ink); font-weight: 600; font-size: .85rem;
  padding: .65em .8em; border-radius: 10px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.account-menu__signout:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: none;
  border: none;
  color: var(--ink-deep);
  font-weight: 500;
  font-size: .95rem;
  padding: .4em;
}
.cart-btn .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border-radius: 100px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--ink-deep);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .brand__logo { height: 26px; }
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    padding: 1rem var(--gutter) 1.6rem;
    border-bottom: 1px solid var(--silver-line);
    box-shadow: 0 18px 40px rgba(26, 46, 74, .12);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  /* The <li> has to carry the full width, otherwise a row divider only spans
     the text and the list reads as a set of ragged underlines. */
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding-block: 1.05rem;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav-links li + li a { border-top: 1px solid var(--silver-line); }
  .nav-links a::after { display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.6rem, 4vh, 3rem);
  /* Fill the viewport below the sticky header. `svh` keeps the whole hero
     visible on phones, where `vh` sits under the browser chrome. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  /* extra room at the bottom so the centred content clears the ticker */
  padding-block: clamp(48px, 8vh, 90px) calc(clamp(48px, 8vh, 90px) + var(--ticker-h));
  background:
    /* 1: soft brand glow behind the product, 2: navy wash from the top-left,
       3: vertical fade that lands on --panel so the next section joins
       seamlessly instead of meeting it with a hard edge. */
    radial-gradient(48% 46% at 76% 44%, rgba(var(--ink-rgb), .16) 0%, transparent 70%),
    radial-gradient(78% 68% at 0% -12%, rgba(var(--ink-rgb), .38) 0%, rgba(var(--ink-rgb), .13) 42%, transparent 74%),
    linear-gradient(180deg, #e9effa 0%, #f4f7fc 48%, var(--panel) 100%);
}
.hero-center { max-width: 880px; margin-inline: auto; }
.hero h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
}
.hero .lede {
  margin: 0 auto 1.8rem;
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  max-width: 40ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

/* ---- split hero: copy on the left, phone + card on the right ---- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  text-align: left;
}
.hero-copy { max-width: 38rem; }

/* One clear step per level: kicker → headline → lede → brand line → actions.
   Spacing tightens where items belong together and opens where they don't. */
.hero-eyebrow {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.hero-grid h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  letter-spacing: -.02em;
  line-height: 1.14;
  margin: 0 0 1.65rem;
}
.hero-grid .lede {
  font-size: clamp(1.08rem, 1.25vw, 1.3rem);
  line-height: 1.65;
  max-width: 44ch;
  margin: 0 0 2.15rem;
}
/* Brand line: quieter than the headline, but standing on its own. */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 600;
  color: var(--ink-deep);
  margin: 0 0 2.6rem;
}
.hero-grid .hero-actions { justify-content: flex-start; }

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-phone {
  width: min(240px, 54%);
  height: auto;
  transform: rotate(9deg);
  filter: drop-shadow(0 34px 62px rgba(15, 23, 42, .3));
}
/* Black card overlapping the phone — reuses the .card-3d component. */
.hero-card.card-3d {
  position: absolute;
  left: 0;
  bottom: 9%;
  width: min(285px, 66%);
  transform: rotate(-14deg);
  animation: none;
  z-index: 2;
}
/* Solid-black finish + wordmark, matched to the product photo. */
.hero-card.card-3d--onyx {
  background: linear-gradient(145deg, #1b1d21 0%, #08090b 52%, #17191d 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    0 2px 1px rgba(255, 255, 255, .06) inset,
    0 34px 64px rgba(5, 7, 10, .45),
    0 12px 24px rgba(5, 7, 10, .32);
}
.hero-card.card-3d::after { opacity: .2; } /* keep the sheen subtle on black */
.hero-card.card-3d .card-face { padding: 20px 22px; }
.hero-card.card-3d--onyx .card-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.hero-card.card-3d--onyx .card-name .dot { display: none; }
.hero-card.card-3d--onyx .card-signal { color: #fff; }
.hero-card.card-3d--onyx .card-tagline {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .22em;
  color: #fff;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .hero-copy { max-width: 40rem; margin-inline: auto; }
  .hero-grid .lede { margin-inline: auto; }
  .hero-grid .hero-actions { justify-content: center; }
  .hero-phone { width: min(205px, 50%); }
  .hero-card.card-3d { width: min(215px, 50%); left: 4%; bottom: 6%; }
}

/* ---- running strip of selling points, pinned to the bottom of the hero ---- */
.hero-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ticker-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-deep);
}
/* Two identical sets sit side by side; shifting the track by exactly half its
   width lands the second set where the first began, so the loop is seamless. */
.hero-ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 34s linear infinite;
}
.hero-ticker:hover .hero-ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero-ticker__set {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem; /* must match the gap, or the loop jumps */
}
.hero-ticker span {
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}
.hero-ticker i {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}
@media (prefers-reduced-motion: reduce) {
  .hero-ticker__track { animation: none; }
}

/* ---- infinite card carousel ---- */
/* TEMP: naka-hide muna ang card carousel — ibalik kapag marami nang
   card designs. Alisin lang ang `display: none` sa ibaba. */
.hero-carousel {
  display: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cc-track {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  width: max-content;
  padding-block: 30px;
  animation: cc-scroll 40s linear infinite;
}
.cc-track:hover { animation-play-state: paused; }
@keyframes cc-scroll { to { transform: translateX(-50%); } }

.cc-card {
  flex: 0 0 auto;
  width: clamp(244px, 26vw, 320px);
}
/* flat, still cards inside the moving track */
.cc-card.card-3d {
  transform: none;
  animation: none;
  transform-origin: right center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
/* hover: the left edge lifts toward you, like a card tilting up */
.cc-card.card-3d:hover {
  transform: perspective(1100px) rotateY(26deg) translateY(-10px);
  box-shadow:
    0 2px 1px rgba(255,255,255,.4) inset,
    0 45px 80px rgba(26,46,74,.32),
    0 18px 30px rgba(26,46,74,.22);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .cc-track { animation: none; }
  .cc-card.card-3d:hover { transform: translateY(-8px); }
}

/* ---------- the metal card (hero centerpiece) ---------- */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  perspective: 1400px;
}
.card-3d {
  position: relative;
  width: min(370px, 78vw);
  aspect-ratio: 1.586 / 1;
  border-radius: 22px;
  transform: rotateX(8deg) rotateY(-16deg) rotateZ(1deg);
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, #fafcff 0%, #d7dde6 26%, #eef1f6 48%, #b9c2cf 72%, #e6eaf0 100%);
  box-shadow:
    0 2px 1px rgba(255,255,255,.7) inset,
    0 40px 80px rgba(26,46,74,.30),
    0 12px 24px rgba(26,46,74,.18);
  border: 1px solid rgba(255,255,255,.6);
  animation: floaty 7s var(--ease) infinite;
}
.card-3d::after { /* brushed-metal sheen sweep */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 47%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  animation: sheen 7s var(--ease) infinite;
  mix-blend-mode: screen;
}
.card-3d .card-face {
  position: absolute;
  inset: 0;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-3d .card-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-deep);
  letter-spacing: -0.02em;
}
.card-3d .card-name .dot { color: var(--ink); }
.card-3d .card-chip {
  width: 46px; height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f4f86, #1a2e4a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(26,46,74,.4);
  position: relative;
}
.card-3d .card-chip::before,
.card-3d .card-chip::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.22);
}
.card-3d .card-chip::before { inset: 9px 0; height: 1px; top: 50%; }
.card-3d .card-chip::after { inset: 0 50%; width: 1px; }
.card-3d .card-handle {
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--ink);
  font-weight: 600;
}
.card-3d .card-row { display: flex; align-items: center; justify-content: space-between; }
.card-3d .card-signal { color: var(--ink); display: inline-flex; }
.card-3d .card-tagline {
  font-size: .82rem;
  letter-spacing: .2em;
  font-weight: 300;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
}
.card-3d--blue .card-signal, .card-3d--blue .card-tagline { color: #cfe0ff; }
.card-3d--onyx .card-signal, .card-3d--onyx .card-tagline { color: #cfe0ff; }

/* NFC tap ripple */
.tap-ripple {
  position: absolute;
  right: -6%;
  top: 18%;
  width: 90px; height: 90px;
  pointer-events: none;
}
.tap-ripple span {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 7s var(--ease) infinite;
}
.tap-ripple span:nth-child(2) { animation-delay: .4s; }
.tap-ripple span:nth-child(3) { animation-delay: .8s; }

@keyframes floaty {
  0%, 100% { transform: rotateX(8deg) rotateY(-16deg) translateY(0); }
  50%      { transform: rotateX(6deg) rotateY(-12deg) translateY(-14px); }
}
@keyframes sheen {
  0%, 70%, 100% { background-position: 120% 0; }
  82%           { background-position: -40% 0; }
}
@keyframes ripple {
  0%, 55% { transform: scale(.3); opacity: 0; }
  62%     { opacity: .8; }
  100%    { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d::after, .tap-ripple span { animation: none; }
  .card-3d::after { opacity: .4; }
}

/* ---------- blue finish ---------- */
.card-3d--blue {
  background:
    linear-gradient(135deg, #35589a 0%, #274472 42%, #1a2e4a 72%, #2f4f86 100%);
  border: 1px solid rgba(140, 175, 240, .35);
  box-shadow:
    0 2px 1px rgba(255,255,255,.12) inset,
    0 40px 80px rgba(26,46,74,.40),
    0 12px 24px rgba(26,46,74,.28);
}
.card-3d--blue::after { /* keep a softer sheen on the darker face */
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 47%, transparent 60%);
  background-size: 250% 100%;
}
.card-3d--blue .card-name { color: #f3f7ff; }
.card-3d--blue .card-name .dot { color: #8fb4ff; }
.card-3d--blue .card-handle { color: #b9cdf2; }
.card-3d--blue .card-chip {
  background: linear-gradient(135deg, #dfe7f4, #aebcd2 60%, #c6d2e8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.3);
}

/* ---------- onyx finish ---------- */
.card-3d--onyx {
  background: linear-gradient(140deg, #2c3445 0%, #12161f 56%, #283044 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 2px 1px rgba(255,255,255,.08) inset,
    0 30px 60px rgba(10,14,22,.4),
    0 10px 20px rgba(10,14,22,.3);
}
.card-3d--onyx .card-name { color: #eef1f6; }
.card-3d--onyx .card-name .dot { color: #eef1f6; }
.card-3d--onyx .card-handle { color: #aab4c4; }
.card-3d--onyx .card-chip {
  background: linear-gradient(135deg, #cfd6e2, #9aa3b3 60%, #c1c9d6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4);
}

/* ============================================================
   Feature rows / cards
   ============================================================ */
.section-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.section-head.center { margin-inline: auto; text-align: center; }
/* `60ch` resolves against the 1rem body font, so it is far too narrow for a
   display-size headline — `--wide` gives centred heads room to breathe. */
.section-head--wide { max-width: 52rem; }
.section-head .lede { margin-top: 1.15rem; }
.section-head.center .lede { margin-inline: auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (max-width: 820px) { .feature-grid { grid-template-columns: 1fr; } }

/* Homepage features: 2 x 2 boxes. Half-width boxes give every feature room
   for a full sentence, instead of the cramped wrapping a 4-up row caused. */
.feature-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .feature-grid--2x2 { grid-template-columns: 1fr; } }

.feature-grid--2x2 .feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.15rem;
  align-items: stretch; /* every card in view shares the tallest height */
  padding: clamp(1.7rem, 2.4vw, 2.2rem);
  border-radius: 20px;
  border-color: rgba(26, 46, 74, .07);
  box-shadow: 0 1px 2px rgba(26, 46, 74, .04), 0 12px 32px rgba(26, 46, 74, .06);
}
.feature-grid--2x2 .feature:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 46, 74, .07); /* keep the surface stable on hover */
  box-shadow: 0 2px 4px rgba(26, 46, 74, .05), 0 20px 48px rgba(26, 46, 74, .11);
}
.feature-grid--2x2 .feature .ico {
  grid-row: span 2; /* icon column runs alongside the heading and copy */
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(39, 68, 114, .07);
  margin-bottom: 0;
}
.feature-grid--2x2 .feature .ico svg { width: 21px; height: 21px; }
.feature-grid--2x2 .feature h3 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin-bottom: .45rem;
}
.feature-grid--2x2 .feature p { font-size: .98rem; line-height: 1.65; }

@media (max-width: 480px) {
  .feature-grid--2x2 .feature { gap: 0 .9rem; }
  .feature-grid--2x2 .feature .ico { width: 40px; height: 40px; border-radius: 12px; }
}

.feature {
  background: #fff;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.feature .ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef1f6, #dfe4ec);
  color: var(--ink);
  margin-bottom: 1.3rem;
}
.feature .ico svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.3rem; margin-bottom: .55rem; }
.feature p { font-size: .98rem; }
.feature p + p { margin-top: .7rem; }

/* split / showcase row */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.split.reverse .split-media,
.split.reverse .hero-media { order: 2; }

/* A hero photo that stands on its own — no panel behind it, no fixed frame to
   crop against. The width/height attributes on the <img> let the browser
   reserve the space before the file lands, so the text beside it never jumps;
   height:auto is what keeps those attributes from fixing the rendered height. */
/* A photo inside the framed panel: contained and centred, never cropped.
   The panel keeps its own aspect ratio, so a picture of any shape sits in the
   same frame as the one beside it. */
.split-media img {
  /* Pinned to the frame rather than sized with percentages: the panel's height
     comes from aspect-ratio, and a percentage height against that resolves to
     auto, which let a square photo grow past the frame and get clipped at the
     bottom — the opposite of the "never cropped" this rule promises. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media,
  .split.reverse .hero-media { order: 0; }
}
/* Spec list beside the card — dot markers with a hanging indent, so wrapped
   lines align under the text rather than the marker. */
.split-copy .lede { margin: 1.2rem 0 1.6rem; }
.spec-list {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.spec-list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--body);
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .38;
}

.split-media {
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #eef1f6, #dfe4ec);
  aspect-ratio: 4/3.4;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--silver-line);
  display: grid;
  place-items: center;
}

/* ============================================================
   Steps (How it works)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  counter-reset: step;
}
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* Four steps go two-up rather than four-across: at a quarter of the row each
   column is too narrow to carry a picture and a paragraph. */
.steps--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .steps--four { grid-template-columns: 1fr; } }

/* The picture sits above the step, so the eye meets the moment before it
   reads what happens in it. The rule above it belongs to the step, so the
   media hangs below that line rather than cutting through it. */
.step__media {
  /* Shorter than the square artwork it holds, so the row of steps stays
     shallow. The images are contained rather than cropped, and the panel is
     painted the artwork's own flat background (#e8eef2) rather than a
     gradient — so the letterboxing on either side of a square picture is
     invisible and every step reads as one full-bleed panel. Change this
     colour only alongside the artwork. */
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #e8eef2;
  border: 1px solid var(--silver-line);
  position: relative;
}
/* Absolutely positioned rather than width/height:100% — a percentage height
   against a box whose own height comes from aspect-ratio resolves to auto in
   Chrome, so the image grew to its natural square and object-fit had nothing
   to work with. Pinning to the edges makes the box definite, so `cover` crops
   from the centre instead of the picture spilling out of the bottom. */
.step__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* --- Click to see the whole picture ---
   The strip above crops on purpose. This is the way out of the crop: a quiet
   control that sits on the image, grows on hover, and opens the full artwork
   over the page. Added by lightbox.js, so a visitor without JavaScript simply
   sees the cropped strip and nothing broken. */
.media-zoom {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--silver-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  cursor: zoom-in;
  transition: transform 0.18s ease, background 0.18s ease;
  backdrop-filter: blur(4px);
}
.media-zoom:hover,
.media-zoom:focus-visible {
  transform: scale(1.08);
  background: #fff;
}
.has-zoom { cursor: zoom-in; }

.lightbox {
  --lb-pad: clamp(1rem, 4vw, 3rem);
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  /* An auto row grows to fit the picture, which makes the image's own
     max-height:100% resolve against the picture rather than the screen — so a
     tall image simply ran off the bottom. A 1fr row is the screen minus the
     padding, and minmax(0,…) lets it actually shrink. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--lb-pad);
  background: rgba(16, 22, 34, 0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* contain, never cover: the point of opening this is to see all of it. */
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: #eef1f6;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.lightbox__close {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.4rem);
  right: clamp(0.8rem, 2vw, 1.4rem);
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .media-zoom { transition: none; }
}

.step {
  position: relative;
  padding-top: 2.2rem;
  border-top: 1px solid var(--silver-line);
}
.step .num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 1.4rem;
}
.step h3 { font-size: 1.5rem; margin-bottom: .7rem; }
.step p { font-size: 1rem; }

/* ============================================================
   Shop
   ============================================================ */
.shop-hero { padding-block: clamp(48px, 7vw, 90px); text-align: center; }
.shop-hero .display-l { margin-bottom: 1rem; }
/* A title-only hero carries no trailing gap — nothing follows it to separate */
.shop-hero .display-l:last-child { margin-bottom: 0; }
.shop-hero .lede { margin-inline: auto; }

/* shop search + filter pills */
.shop-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}
.shop-search { position: relative; width: 100%; max-width: 420px; }
.shop-search svg {
  position: absolute; left: 1em; top: 50%; transform: translateY(-50%);
  color: var(--body);
}
.shop-search input {
  width: 100%;
  padding: .72em 1em .72em 2.7em;
  border: 1px solid var(--silver-line);
  border-radius: 100px;
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: #fff;
}
.shop-search input:focus { outline: 2px solid var(--ink-deep); outline-offset: 0; }

/* shop pagination */
.shop-pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .45rem; margin-top: clamp(2rem, 4vw, 3rem);
}
.pager-btn {
  min-width: 40px; height: 40px; padding: 0 .55em;
  border: 1px solid var(--silver-line); background: transparent; color: var(--ink);
  font-weight: 600; font-size: .9rem; font-family: inherit;
  border-radius: 100px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pager-btn:hover:not(:disabled):not(.is-active) { border-color: var(--ink); }
.pager-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager-btn:disabled { opacity: .35; cursor: not-allowed; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } }

/* placeholder / empty / error messages span all columns and center */
.product-grid > p,
.blog-grid > p {
  grid-column: 1 / -1;
  text-align: center;
  margin-inline: auto;
}

.product {
  background: #fff;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product .pic {
  aspect-ratio: 1.3/1;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--panel-2);
  border-bottom: 1px solid var(--silver-line);
}
/* contain, hindi cover: buo at nakasentro lagi ang produkto — walang bahagi
   ng card na naputol para lang mapuno ang kahon. */
.product .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* featured product highlight — pill only */
.product .feature-flag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35em;
  background: var(--ink-deep); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4em .8em; border-radius: 100px;
  box-shadow: 0 6px 16px rgba(26,46,74,.28);
}
.product .pic.metal  { background: linear-gradient(140deg,#f6f8fb,#cfd6e0 55%,#eaedf2); }
.product .pic.onyx   { background: linear-gradient(140deg,#33405a,#1a2233 60%,#2c3a52); }
.product .pic.azure  { background: linear-gradient(140deg,#3a5894,#274472 60%,#4a6aa6); }
.product .pic.digital{ background: linear-gradient(140deg,#eef1f6,#dfe4ec); }

.mini-card {
  width: 64%;
  aspect-ratio: 1.586/1;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(26,46,74,.28);
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
}
.mini-card.metal  { background: linear-gradient(135deg,#fafcff,#cdd5e0 50%,#eef1f6); color: var(--ink-deep); }
.mini-card.onyx   { background: linear-gradient(135deg,#46536e,#10172a 60%,#37445e); color: #eaeef5; }
.mini-card.azure  { background: linear-gradient(135deg,#3f63a6,#1f3a66 60%,#365c9c); color: #eef3fb; }
.mini-card .dot { color: #fff; }
.mini-card.metal .dot { color: var(--ink); }

.product .body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product .badge,
.pd-info .badge {
  align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: rgba(39,68,114,.08);
  padding: .35em .8em; border-radius: 100px;
}
.product h3 { font-size: 1.3rem; }
.product .desc { font-size: .92rem; color: var(--body); flex: 1; }
.product .foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.product .price { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-deep); font-weight: 500; }
.product .price .cents { font-size: .9rem; vertical-align: super; }
.add-btn {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  padding: .6em 1.2em;
  border-radius: 100px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.add-btn:hover { background: var(--ink); color: #fff; }

/* shop card actions: cart icon + Buy now */
.product .foot .actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.add-btn.icon-btn { padding: .55em; display: inline-grid; place-items: center; line-height: 0; }
.buy-btn {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .6em 1.2em;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.buy-btn:hover { background: var(--ink-deep); }
.buy-btn:disabled { opacity: .5; cursor: not-allowed; }
.add-btn.added { background: var(--ink); color: #fff; }

/* --- Price block: launch price against list price ------------------------
   Used on the card and in the detail view. When a compare-at price exists the
   old figure is struck through and the offer is named in a tag, so a lower
   number reads as a deliberate promotion — never as a typo. */
.price-block { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.price-row { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.price-block .price {
  font-family: var(--font-display); font-size: 1.4rem;
  color: var(--ink-deep); font-weight: 500; line-height: 1;
}
.price-was { font-size: .95rem; color: var(--muted); text-decoration-thickness: 1.5px; }

/* --- Launch-offer badge -------------------------------------------------
   Sits directly above the price it is talking about, so the offer, the old
   figure and the new one read as one thought. The element itself is nothing
   but a lit border: a conic gradient that rotates around a brushed-silver
   pill, so the offer reads as premium rather than as a clearance sticker.

   `--launch-spin` needs @property to be animatable; where that is not
   supported the gradient simply holds still, which still looks like silver. */
@property --launch-spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.launch-tag {
  align-self: flex-start;
  display: inline-flex; padding: 1.6px;
  border-radius: 100px;
  /* Isang matalim na puting sinag at isang mas malambot sa kabila — ganito
     kumikislap ang tunay na metal habang iniikutan ng ilaw. */
  background: conic-gradient(
    from var(--launch-spin),
    #78879b 0deg, #ffffff 22deg, #dbe3ee 42deg,
    #74839a 110deg, #66748a 190deg, #eef3f9 250deg,
    #8d9bb0 290deg, #78879b 360deg);
  animation: launch-spin 3.2s linear infinite;
}
.launch-tag > span {
  border-radius: inherit;
  padding: .4em .8em;
  background: linear-gradient(135deg, #ffffff, #dde5ef 42%, #f8fafd 58%, #ccd6e3);
  color: var(--ink-deep);
  font-size: .54rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
@keyframes launch-spin { to { --launch-spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .launch-tag { animation: none; } }

/* --- Product detail modal ------------------------------------------------
   The full pitch for one product. Two columns on a desktop — gallery left,
   everything else right — stacking on a phone. Reuses .qty-btn/.qty-val from
   the cart and .add-btn/.buy-btn from the card so the controls match. */
.pd-modal {
  position: fixed; inset: 0; z-index: 260;
  display: grid; place-items: center; padding: 1rem;
}
.pd-modal__overlay { position: absolute; inset: 0; background: rgba(15, 20, 35, .55); }
.pd-modal__panel {
  position: relative;
  width: min(920px, 100%);
  max-height: calc(100vh - 2rem);
  background: #fff; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 20, 35, .3);
}
.pd-modal__close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--body);
  font-size: 1.45rem; line-height: 1; display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(26, 46, 74, .14);
}
.pd-modal__close:hover { color: var(--ink); }
.pd-modal__body {
  overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
@media (max-width: 760px) {
  .pd-modal__body { grid-template-columns: 1fr; }
}

.pd-gallery { display: flex; flex-direction: column; gap: .8rem; }
/* Square, gaya ng karaniwan sa e-commerce. Ang larawan ng card ay halos
   parisukat, kaya sa 4/3 na kahon ito lumiliit at nawawalan ng balanse ang
   espasyo sa itaas at ibaba. */
.pd-gallery__main {
  aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: var(--panel-2); display: grid; place-items: center;
}
.pd-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-gallery__main .mini-card { width: 70%; }
/* Thumbnail strip. Up to THUMBS_VISIBLE (5) it is a plain row; past that the
   shop.js adds .is-sliding and the arrows, and the row becomes one scrolling
   track so the modal never grows a second line of thumbnails. */
.pd-thumbs { display: flex; align-items: center; gap: .5rem; }
.pd-gallery__thumbs { display: flex; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.pd-thumbs.is-sliding .pd-gallery__thumbs {
  flex: 1; flex-wrap: nowrap; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none;
}
.pd-thumbs.is-sliding .pd-gallery__thumbs::-webkit-scrollbar { display: none; }
/* Eksaktong lima ang kasya sa nakikitang bahagi, gaano man kaliit ang natira
   matapos ang mga arrow: 100% bawasan ang apat na gap, hatiin sa lima. */
.pd-thumbs.is-sliding .pd-thumb {
  flex: 0 0 calc((100% - 2.4rem) / 5);
  width: auto; height: auto; aspect-ratio: 1 / 1;
}
.pd-thumbs__nav {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--silver-line); border-radius: 100px;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pd-thumbs__nav:hover:not(:disabled) { border-color: var(--ink); }
.pd-thumbs__nav:disabled { opacity: .3; cursor: default; }
.pd-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 10px; overflow: hidden; padding: 0;
  border: 2px solid var(--silver-line); background: var(--panel-2); cursor: pointer;
  transition: border-color .2s var(--ease);
}
/* contain, hindi cover: ang thumbnail ay pagpipilian, kaya dapat makita ang
   buong larawan — hindi ang gitnang bahagi lang nito. */
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-thumb:hover { border-color: var(--silver); }
.pd-thumb.is-active { border-color: var(--ink); }

.pd-info { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pd-title {
  margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1;
  color: var(--ink-deep); text-wrap: balance;
}
.pd-desc { margin: 0; color: var(--body); font-size: .98rem; }
.pd-features {
  margin: 0; padding: 0 0 0 1.15rem;
  display: grid; gap: .38rem; color: var(--body); font-size: .93rem;
}
.pd-features li::marker { color: var(--ink); }

.pd-qty {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  border: 1px solid var(--silver-line); border-radius: 100px; padding: .2rem .35rem;
}
.pd-qty .qty-btn { width: 32px; height: 32px; font-size: 1.15rem; }
.pd-qty .qty-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.pd-qty .qty-val { min-width: 22px; font-size: .95rem; }

.pd-stores { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pd-stores__label { font-size: .8rem; color: var(--body); margin-right: .1rem; }

/* Price and the two buttons share the last row; the price gets the display
   size here since there is room for it to carry the weight. */
.pd-buy {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--silver-line);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.pd-info .price-block .price { font-size: 1.9rem; }
.pd-actions { display: flex; align-items: center; gap: .6rem; }

/* announcement bar */
.announce-bar {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: var(--ink-deep); color: #fff;
  font-size: .85rem; font-weight: 500;
  padding: .6em 2.5em; text-align: center;
  position: relative;
}
.announce-bar__msg { color: #fff; text-decoration: none; }
.announce-bar__msg strong { font-weight: 700; }
.announce-bar a.announce-bar__msg:hover { text-decoration: underline; }
.announce-bar__close {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; opacity: .7;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.announce-bar__close:hover { opacity: 1; }

/* hanging promo (homepage hero, right side) */
.promo-hang-wrap {
  position: absolute;
  top: 0;
  right: clamp(1rem, 6vw, 6rem);
  z-index: 3;
}
.promo-hang-wrap[hidden] { display: none; }
.promo-hang {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: promo-sway 4.5s ease-in-out infinite;
}
.promo-hang__rope {
  width: 2px;
  height: clamp(26px, 5vh, 54px);
  background: var(--ink-deep);
  opacity: .55;
}
.promo-hang__card {
  position: relative;
  width: clamp(150px, 13vw, 188px);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 1.1rem;
  background: linear-gradient(140deg, #3a5894, #274472 60%, #1f3a66);
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 44px rgba(26, 46, 74, .32);
}
.promo-hang__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,20,35,.1), rgba(15,20,35,.72));
}
.promo-hang__pin {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-deep);
  box-shadow: 0 0 0 3px #fff;
  z-index: 2;
}
.promo-hang__content { position: relative; z-index: 1; }
.promo-hang__content h3 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.05;
}
.promo-hang__content p { color: #fff; opacity: .9; font-size: .82rem; margin-top: .25rem; }
.promo-hang__btn {
  display: inline-block;
  margin-top: .7rem;
  background: #fff;
  color: var(--ink-deep);
  font-weight: 700;
  font-size: .72rem;
  padding: .45em .95em;
  border-radius: 100px;
}
@keyframes promo-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) { .promo-hang { animation: none; } }

/* On smaller screens the hanging promo would overlap the hero text —
   reflow it into a normal full-width banner below the hero content. */
@media (max-width: 840px) {
  .promo-hang-wrap {
    position: static;
    right: auto;
    width: 100%;
    order: 9; /* place after the hero text + carousel */
    padding-inline: clamp(1.2rem, 5vw, 2rem);
    margin-top: .5rem;
  }
  .promo-hang { animation: none; align-items: stretch; }
  .promo-hang__rope,
  .promo-hang__pin { display: none; }
  .promo-hang__card {
    width: 100%;
    aspect-ratio: auto;
    min-height: 160px;
    border-radius: var(--radius);
  }
}

/* cart drawer */
.cart-drawer { position: fixed; inset: 0; z-index: 200; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(15, 20, 30, .45);
  animation: cart-fade .2s ease;
}
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(400px, 92vw);
  background: #fff;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 50px rgba(26, 46, 74, .2);
  animation: cart-slide .25s var(--ease);
}
@keyframes cart-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes cart-fade { from { opacity: 0; } to { opacity: 1; } }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--silver-line);
}
.cart-drawer__head h3 { font-size: 1.3rem; }
.cart-drawer__close {
  border: none; background: none; font-size: 1.7rem; line-height: 1;
  cursor: pointer; color: var(--body);
}
.cart-drawer__close:hover { color: var(--ink); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: .6rem 1.4rem; }
.cart-empty { color: var(--body); text-align: center; padding: 2.5rem 0; }
.cart-item {
  display: flex; gap: .9rem; padding: 1rem 0;
  align-items: flex-start;
  border-bottom: 1px solid var(--silver-line);
}
/* Checkout selection — an unticked line stays visible and editable, it just
   fades back so the chosen ones read as the order. */
.cart-item.is-unselected .cart-item__img,
.cart-item.is-unselected .cart-item__info { opacity: .45; }

/* The tick is boxed to exactly the thumbnail's height and centred in it, so
   the checkbox, the image and the product name sit on one line. Centring it
   in the row instead would drop it to the middle of a box whose height comes
   from the quantity and store-link rows below — which is what made it look
   stranded beside the picture. */
.cart-item__pick {
  flex: 0 0 auto;
  height: 64px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cart-item__pick input,
.cart-selectall input {
  width: 18px; height: 18px; margin: 0;
  accent-color: var(--ink); cursor: pointer;
}
.cart-item__pick input:focus-visible,
.cart-selectall input:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}

/* Matching the row's gap puts "Select all" at the same x as the thumbnails,
   and its checkbox at the same x as theirs — one clean left edge down the
   whole list. */
.cart-selectall {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--silver-line);
  font-size: .82rem; font-weight: 600; color: var(--body);
  cursor: pointer; user-select: none;
  transition: color .2s var(--ease);
}
.cart-selectall:hover { color: var(--ink); }
/* The count sits at the far end of the header row, out of the way of the label. */
.cart-selectall__n { margin-left: auto; font-weight: 500; color: var(--muted); }
.cart-item__img {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 10px; overflow: hidden;
  background: #eef1f6; border: 1px solid var(--silver-line);
}
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cart-item__name { font-weight: 700; color: var(--ink-deep); }
.cart-item__meta { font-size: .85rem; color: var(--body); }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; margin-top: .1rem; }
.cart-item__qty {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--silver-line); border-radius: 100px; padding: .12rem .25rem;
}
.qty-btn {
  width: 24px; height: 24px; border: none; background: transparent;
  border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1;
  color: var(--ink); display: grid; place-items: center;
}
.qty-btn:hover { background: rgba(39, 68, 114, .08); }
.qty-val { min-width: 16px; text-align: center; font-weight: 600; font-size: .85rem; }
.cart-item__line { font-weight: 700; color: var(--ink-deep); font-size: .92rem; }
.cart-item__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

/* store icon buttons (dynamic marketplace links) */
.store-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--silver-line); background: #fff;
  display: inline-grid; place-items: center; overflow: hidden;
  text-decoration: none; color: var(--ink); font-size: .8rem; font-weight: 700;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.store-btn:hover {
  border-color: var(--ink); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 46, 74, .12);
}
/* Iisang bounding box ang bawat logo (contain) para pantay-pantay ang laki,
   pero may hangin sa paligid — hindi punong-puno ang bilog. */
.store-btn img {
  width: 60%; height: 60%;
  object-fit: contain;
}
.store-btn--initial {
  background: #c7c7cc; /* apple-style system gray */
  border-color: #c7c7cc;
  color: #fff;
  font-size: .85rem;
}
.store-btn--initial:hover { background: #b0b0b6; border-color: #b0b0b6; }
.cart-item__stores { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.cart-item__stores-label { font-size: .74rem; color: var(--body); margin-right: .1rem; }
.cart-item__buy {
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-size: .78rem; font-weight: 600; padding: .4em .9em;
  border-radius: 100px; cursor: pointer; text-decoration: none;
}
.cart-item__buy:hover { background: var(--ink-deep); }
.cart-item__buy:disabled { opacity: .5; cursor: not-allowed; }
.cart-drawer__foot {
  padding: 1.2rem 1.4rem; border-top: 1px solid var(--silver-line);
  display: flex; flex-direction: column; gap: .7rem;
}
.cart-drawer__count { font-size: .8rem; color: var(--body); }
.cart-drawer__total {
  display: flex; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ink-deep);
}
.cart-drawer__clear {
  border: 1px solid var(--silver-line); background: transparent; color: var(--ink);
  font-weight: 600; padding: .7em 1em; border-radius: 100px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cart-drawer__clear:hover { background: #e5484d; color: #fff; border-color: #e5484d; }
.cart-drawer__checkout {
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-weight: 600; padding: .8em 1em; border-radius: 100px; cursor: pointer;
  transition: background .2s var(--ease);
}
.cart-drawer__checkout:hover { background: var(--ink-deep); }
.cart-drawer__checkout:disabled { opacity: .5; cursor: not-allowed; }

/* checkout (manual QR payment) */
.cart-checkout { padding: 1.1rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.co-back {
  align-self: flex-start; border: 0; background: transparent; color: var(--body);
  font-size: .85rem; font-weight: 600; cursor: pointer; padding: 0;
}
.co-back:hover { color: var(--ink); }
.co-stepper { display: flex; align-items: center; gap: .6rem; }
.co-step {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; color: var(--body); white-space: nowrap;
}
.co-step i {
  font-style: normal; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem;
  border: 1.5px solid var(--silver-line); color: var(--body);
}
.co-step.is-active { color: var(--ink-deep); }
.co-step.is-active i { background: var(--ink); border-color: var(--ink); color: #fff; }
.co-step.is-done i { border-color: var(--ink); color: var(--ink); }
.co-stepper__bar { flex: 1; height: 1.5px; background: var(--silver-line); }
.co-stepper__bar.is-done { background: var(--ink); }
.co-summary {
  border: 1px solid var(--silver-line); border-radius: 12px;
  padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem;
}
.co-line { display: flex; justify-content: space-between; font-size: .88rem; color: var(--body); }
.co-line em { font-style: normal; color: var(--body); opacity: .7; }
.co-line--total {
  border-top: 1px solid var(--silver-line); padding-top: .5rem; margin-top: .2rem;
  font-weight: 700; color: var(--ink-deep);
}
/* Subtotal and delivery fee: quieter than the item lines above and the total
   below. The zone sits as a small tag beside "Shipping" so the fee explains
   itself without a footnote. */
.co-line--sub { color: var(--muted); font-size: .92rem; }
.co-line--sub em {
  font-style: normal; font-size: .72rem; margin-left: .45em;
  padding: .12em .55em; border: 1px solid var(--silver-line); border-radius: 100px;
}
.co-title { margin: .3rem 0 0; font-size: .95rem; color: var(--ink-deep); }
.co-hint { font-size: .82rem; color: var(--body); }
/* Links inside a hint line — the review modal points at the Contact page. */
.co-hint a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.co-hint a:hover { color: var(--ink-deep); }
.co-error {
  font-size: .84rem; color: #e5484d; background: rgba(229, 72, 77, .08);
  border: 1px solid rgba(229, 72, 77, .3); border-radius: 10px; padding: .6em .9em; margin: 0;
}
.co-methods { display: flex; flex-wrap: wrap; gap: .5rem; }
.co-method {
  border: 1px solid var(--silver-line); background: transparent; color: var(--ink);
  font-size: .84rem; font-weight: 600; padding: .5em 1.1em; border-radius: 100px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.co-method:hover { border-color: var(--ink); }
.co-method.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.co-qr {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  border: 1px solid var(--silver-line); border-radius: 12px; padding: 1rem; text-align: center;
}
.co-qr img { width: min(230px, 100%); border-radius: 10px; }
.co-qr__info { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; color: var(--body); }
.co-qr__info strong { color: var(--ink-deep); }
.co-upload {
  display: block; border: 1.5px dashed var(--silver-line); border-radius: 12px;
  padding: 1rem; text-align: center; cursor: pointer; font-size: .85rem; color: var(--body);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.co-upload:hover { border-color: var(--ink); }
.co-upload.has-file { border-style: solid; border-color: var(--ink); color: var(--ink-deep); font-weight: 600; }
/* Huwag putulin ang mga normal na salita — mahahabang filenames lang
   ang hahatiin kung talagang hindi kasya. */
.co-upload__label { overflow-wrap: anywhere; word-break: normal; }
.co-ref {
  border: 1px solid var(--silver-line); border-radius: 10px; padding: .7em .9em;
  font: inherit; font-size: .88rem; color: var(--ink); width: 100%;
}
.co-ref:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.co-address { resize: vertical; min-height: 70px; }
/* Ang iOS Safari ay nagzu-zoom sa anumang field na wala pang 16px kapag
   tinapikan — at hindi na maayos bumabalik, kaya parang tumatalon ang buong
   checkout habang nagta-type. Sa telepono, walang field na papayagang
   lumiit sa 16px; sa desktop nananatili ang maliit na sukat. */
@media (max-width: 820px) {
  .co-ref { font-size: 16px; }
}

.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.co-fields--house { grid-template-columns: .7fr 1.3fr; }
.co-fields .co-ref { min-width: 0; }

/* Buy now modal (single-product QR payment) */
.bn-modal {
  position: fixed; inset: 0; z-index: 260;
  display: grid; place-items: center; padding: 1rem;
}
.bn-modal__overlay { position: absolute; inset: 0; background: rgba(15, 20, 35, .55); }
.bn-modal__panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(780px, calc(100vh - 2rem));
  background: #fff; border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 20, 35, .3);
}
.bn-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--silver-line);
}
.bn-modal__head h3 {
  margin: 0; font-family: var(--font-display);
  font-size: 1.25rem; color: var(--ink-deep);
}
.bn-modal__close {
  border: 0; background: transparent; font-size: 1.5rem; line-height: 1;
  color: var(--body); cursor: pointer; padding: .1em .3em;
}
.bn-modal__close:hover { color: var(--ink); }
.bn-modal__body { flex: 1; overflow-y: auto; }
.bn-modal__foot {
  padding: 1rem 1.4rem; border-top: 1px solid var(--silver-line);
  display: flex; flex-direction: column; gap: .7rem;
}
.bn-product {
  display: flex; align-items: center; gap: .8rem;
  border: 1px solid var(--silver-line); border-radius: 12px; padding: .7rem .9rem;
}
.bn-product__img {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: var(--panel);
}
.bn-product__img img { width: 100%; height: 100%; object-fit: cover; }
.bn-product__info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bn-product__info strong { color: var(--ink-deep); font-size: .95rem; }
.bn-product__info span { color: var(--body); font-weight: 600; }
.bn-stores { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
/* Mas maliit na QR sa modal para kita ang buong step nang halos walang scroll */
.bn-modal .co-qr img { width: min(170px, 100%); }
.bn-modal .co-qr { padding: .8rem; }

/* checkout success */
.cart-success {
  padding: 3rem 1.6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.cart-success__icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 1.5rem;
  display: grid; place-items: center;
}
.cart-success h4 { margin: 0; font-size: 1.15rem; color: var(--ink-deep); }
.cart-success p { margin: 0; font-size: .9rem; color: var(--body); max-width: 30ch; }
.cart-success__link {
  margin-top: .3rem; font-size: .88rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.cart-success__link:hover { color: var(--ink-deep); }

/* Payment result modal — pagbabalik mula sa HitPay (pay-return.js).
   SADYANG walang scrollbar: ang laman ang pinaliliit sa maiikling screen
   (tingnan ang max-height queries sa ibaba) para magkasya. Sa sobrang ikli
   lang (landscape na phone) ito nagiging swipe-able — nakatago pa rin ang
   scrollbar, pero hindi kailanman natatakpan ang "Done". */
.pr-modal {
  position: fixed; inset: 0; z-index: 280;
  display: grid; place-items: center; padding: 1rem;
}
.pr-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(15, 20, 35, .55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: cart-fade .25s var(--ease);
}
.pr-modal__panel {
  position: relative;
  width: min(420px, 100%);
  background: #fff; border-radius: 22px;
  padding: 2rem 1.75rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  box-shadow: 0 24px 60px rgba(15, 20, 35, .3);
  animation: pr-rise .35s var(--ease);
}
.pr-modal__panel::-webkit-scrollbar { display: none; }
.pr-modal__panel:focus { outline: none; }
.pr-content { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ang icon sa taas-gitna — pare-pareho ang sukat sa bawat estado, kaya hindi
   tumatalon ang layout pagpalit mula "confirming" papuntang success */
.pr-icon {
  position: relative; width: 76px; height: 76px; margin-bottom: 1.1rem;
  display: grid; place-items: center; border-radius: 50%; flex-shrink: 0;
}
/* positioned, para ang ripple (::before) ay nasa LIKOD nito, hindi ibabaw */
.pr-icon > svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.pr-icon--checking { background: rgba(var(--ink-rgb), .06); }
.pr-glyph {
  width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  animation: pr-pop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
.pr-glyph svg { width: 50%; height: 50%; }
.pr-icon--unpaid .pr-glyph { background: rgba(214, 148, 38, .13); color: #b27a14; }
.pr-icon--failed .pr-glyph { background: rgba(229, 72, 77, .11); color: #c23438; }
.pr-icon--signin .pr-glyph { background: rgba(var(--ink-rgb), .08); color: var(--ink); }

.pr-spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3.5px solid rgba(var(--ink-rgb), .14); border-top-color: var(--ink);
  animation: pr-turn .8s linear infinite;
}

/* success: biglang lumilitaw ang bilog, iginuguhit ang check, at may isang
   alon na lumalawak palabas */
.pr-check { animation: pr-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.pr-check__disc { fill: var(--ink); }
.pr-check__tick {
  fill: none; stroke: #fff; stroke-width: 4.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pr-draw .4s .3s var(--ease) forwards;
}
.pr-icon--paid::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(var(--ink-rgb), .22); opacity: 0;
  animation: pr-ripple .9s .25s var(--ease) forwards;
}

.pr-title {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 1.6rem; line-height: 1.15; letter-spacing: .01em; color: var(--ink-deep);
}
.pr-text { margin: .55rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--body); max-width: 34ch; }

.pr-summary {
  width: 100%; margin-top: 1.2rem; padding: .85rem 1rem;
  background: var(--panel); border-radius: 14px; text-align: left;
}
.pr-items { display: flex; flex-direction: column; gap: .45rem; padding-bottom: .7rem; margin-bottom: .6rem; border-bottom: 1px solid var(--silver-line); }
.pr-item { display: flex; align-items: center; gap: .7rem; font-size: .88rem; }
.pr-item img {
  width: 38px; height: 38px; object-fit: contain; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--silver-line); background: #fff;
}
.pr-item__name {
  flex: 1; min-width: 0; font-weight: 600; color: var(--ink-deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-item__qty { color: var(--muted); font-size: .8rem; }
.pr-more { margin: 0; font-size: .78rem; color: var(--muted); }
.pr-rows { margin: 0; display: grid; gap: .3rem; }
.pr-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .84rem; }
.pr-row dt { color: var(--muted); white-space: nowrap; }
.pr-row dd { margin: 0; min-width: 0; text-align: right; font-weight: 600; color: var(--ink-deep); overflow-wrap: anywhere; }
.pr-row--total dd { font-family: var(--font-display); font-size: 1.05rem; }
/* reference no.: maliit at gray, may copy button sa dulo */
.pr-row--ref { align-items: center; }
.pr-row--ref dd { display: flex; align-items: center; justify-content: flex-end; gap: .2rem; font-weight: 500; }
.pr-ref { font-size: .74rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.pr-copy {
  flex-shrink: 0; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.pr-copy:hover { background: rgba(var(--ink-rgb), .08); color: var(--ink); }
.pr-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pr-copy svg { width: 14px; height: 14px; }
.pr-copy.is-copied { color: var(--ink); }

.pr-note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); max-width: 36ch; overflow-wrap: anywhere; }

.pr-actions { width: 100%; margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pr-actions .btn { width: 100%; justify-content: center; }
.pr-actions .btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.pr-actions .btn:disabled:hover { background: var(--ink); }
.pr-retry {
  border: 0; background: transparent; padding: .45rem .6rem;
  font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pr-retry:hover { color: var(--ink-deep); }

@keyframes pr-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pr-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@keyframes pr-ripple { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes pr-turn { to { transform: rotate(360deg); } }

@media (max-width: 400px) {
  .pr-modal__panel { padding: 1.7rem 1.25rem 1.25rem; }
  .pr-title { font-size: 1.45rem; }
}
/* Maiikling screen (landscape na phone, maliit na laptop): paliitin ang laman
   para magkasya pa rin nang walang scroll. */
@media (max-height: 640px) {
  .pr-modal__panel { padding: 1.4rem 1.4rem 1.1rem; }
  .pr-icon { width: 60px; height: 60px; margin-bottom: .8rem; }
  .pr-spin { width: 36px; height: 36px; }
  .pr-title { font-size: 1.35rem; }
  .pr-summary { margin-top: .9rem; }
  .pr-item img { display: none; }
  .pr-actions { margin-top: 1rem; }
}
@media (max-height: 600px) {
  .pr-note { display: none; }
}
@media (max-height: 520px) {
  .pr-items { display: none; }
}
@media (max-height: 420px) {
  .pr-icon { width: 48px; height: 48px; margin-bottom: .6rem; }
  .pr-spin { width: 30px; height: 30px; }
  .pr-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-modal__overlay, .pr-modal__panel, .pr-check, .pr-glyph, .pr-icon--paid::before { animation: none; }
  .pr-check__tick { animation: none; stroke-dashoffset: 0; }
  .pr-spin { animation-duration: 1.6s; }
}

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff;
  padding: .8em 1.3em; border-radius: 100px;
  font-size: .88rem; font-weight: 500;
  box-shadow: 0 12px 30px rgba(26, 46, 74, .28);
  opacity: 0; pointer-events: none; z-index: 300;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: #fff;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card .cover {
  aspect-ratio: 16/9;
  position: relative;
  border-bottom: 1px solid var(--silver-line);
  background: linear-gradient(140deg,#f6f8fb,#cfd6e0 55%,#eaedf2);
}
.blog-card .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-card .feature-flag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35em;
  background: var(--ink-deep); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4em .8em; border-radius: 100px;
  box-shadow: 0 6px 16px rgba(26,46,74,.28);
}
.blog-card .cover--empty {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--ink-deep);
}
.blog-card .content { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.blog-card .meta { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.blog-card h3 {
  font-size: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .excerpt {
  font-size: .92rem;
  color: var(--body);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .read-more { margin-top: .7rem; font-weight: 600; font-size: .85rem; color: var(--ink-deep); }
.blog-card:hover .read-more { text-decoration: underline; }

/* single article page */
.article { max-width: 760px; margin: 0 auto; }
.article__back {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--body); text-decoration: none; font-weight: 600; font-size: .9rem;
  margin-bottom: 1.6rem;
}
.article__back:hover { color: var(--ink); }
.article__cover {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--radius);
  overflow: hidden; margin-bottom: 1.8rem;
  background: linear-gradient(140deg, #f6f8fb, #cfd6e0);
  border: 1px solid var(--silver-line);
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article__meta {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .6rem;
}
.article__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
  color: var(--ink-deep); margin-bottom: 1rem;
}
.article__excerpt { font-size: 1.15rem; color: var(--body); margin-bottom: 1.6rem; }
.article__body { font-size: 1.02rem; color: var(--ink); line-height: 1.8; }

/* rich article content (mula sa admin editor) */
.article__body h1,
.article__body h2,
.article__body h3,
.article__body h4 {
  font-family: var(--font-display);
  color: var(--ink-deep);
  line-height: 1.2;
  margin: 1.6em 0 .55em;
}
.article__body h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.article__body h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.article__body h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.article__body h4 { font-size: 1.1rem; }
.article__body p { margin: 0 0 1em; }
.article__body strong { font-weight: 700; color: inherit; }
.article__body a { color: var(--ink-deep); text-decoration: underline; text-underline-offset: 2px; }
.article__body a:hover { opacity: .8; }
.article__body ul,
.article__body ol { margin: 0 0 1.2em; padding-left: 1.5em; display: block; }
.article__body li { margin-bottom: .4em; }
.article__body blockquote {
  margin: 1.4em 0; padding: .6em 1.2em;
  border-left: 3px solid var(--ink);
  color: var(--body); font-style: italic;
}
.article__body img { max-width: 100%; border-radius: 12px; margin: 1.2em 0; }

/* Quill editor classes (alignment, sizes, indent) */
.article__body .ql-align-center { text-align: center; }
.article__body .ql-align-right { text-align: right; }
.article__body .ql-align-justify { text-align: justify; }
.article__body .ql-size-small { font-size: .85em; }
.article__body .ql-size-large { font-size: 1.3em; }
.article__body .ql-size-huge { font-size: 1.7em; }
.article__body .ql-indent-1 { padding-left: 2em; }
.article__body .ql-indent-2 { padding-left: 4em; }
.article__body .ql-indent-3 { padding-left: 6em; }

/* compare strip */
.assurance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
@media (max-width: 760px) { .assurance { grid-template-columns: repeat(2,1fr); } }
.assurance .item .ico { color: var(--ink); margin-bottom: .6rem; }
.assurance .item h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--ink-deep); margin-bottom: .25rem; }
.assurance .item p { font-size: .88rem; color: var(--muted); }

/* ============================================================
   About
   ============================================================ */
.about-hero { padding-block: clamp(64px, 9vw, 130px); }
.about-hero .display-xl { max-width: 16ch; margin-bottom: 1.6rem; }
.about-hero .lede { font-size: clamp(1.15rem,1.6vw,1.4rem); max-width: 54ch; }

.values { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.6rem,3vw,2.8rem); }
@media (max-width: 820px){ .values { grid-template-columns: 1fr; } }
.value { border-top: 1px solid var(--silver-line); padding-top: 1.6rem; }
.value h3 { font-size: 1.35rem; margin-bottom: .6rem; }

/* Long-form copy gets looser leading than the lede above it: small text
   needs more air between lines, large text needs less. That inversion is
   what separates the two voices without changing colour. */
.split-copy p:not(.lede):not(.about-claim):not(.eyebrow),
.statement p,
.smart-list dd,
.smart-list dt {
  font-size: 1.125rem;
  line-height: 1.7;
}
.split-copy p + p { margin-top: 1rem; }
/* The first paragraph after a heading needs its own opening gap — it has no
   sibling paragraph above it to inherit one from. */
.split-copy h1 + p,
.split-copy h2 + p { margin-top: 1.2rem; }
/* A one-line kicker wants no leading of its own. */
.eyebrow { line-height: 1.4; }

/* The line that carries the page's claim. 600 rather than 700 — it needs to
   step above the paragraphs around it, not shout over the heading. */
.about-claim {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 1.2rem;
  line-height: 1.55;
}

/* SMART values: the term is the letter, the description explains it. */
.smart-list { margin: 1.6rem 0 0; display: grid; gap: 1.3rem; }
.smart-list dt { font-weight: 600; color: var(--ink-deep); margin-bottom: .25rem; }
.smart-list dd { margin: 0; color: var(--body); }

/* A centred block of statement copy — narrow enough to read in one breath.
   Used by the four stacked panels and by the closing commitment. */
.statement { max-width: 64ch; margin-inline: auto; text-align: center; }
.statement p { color: var(--body); }
.statement p + p { margin-top: 1rem; }

/* Temporary image placeholders. Each names the shot that belongs there, so
   nothing ships as an anonymous grey box and swapping in the real photo is a
   one-line change. Delete .ph along with the last placeholder. */
.ph {
  display: grid;
  place-items: center;
  gap: .7rem;
  padding: 1.6rem;
  text-align: center;
  color: var(--muted);
}
.ph svg { opacity: .45; }
.ph span { font-size: .88rem; line-height: 1.5; max-width: 26ch; color: var(--body); }
.ph strong {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .5;
  margin-bottom: .3rem;
}

.bignum-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; text-align: center; }
@media (max-width: 700px){ .bignum-row { grid-template-columns: 1fr; gap: 2.4rem; } }
.bignum .n { font-family: var(--font-display); font-size: clamp(2.6rem,5vw,3.6rem); color: var(--ink); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.bignum .l { color: var(--body); margin-top: .6rem; font-size: .98rem; }

.timeline { max-width: 720px; margin-inline: auto; }
.tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 1.6rem; padding-block: 1.6rem; border-bottom: 1px solid var(--silver-line); }
.tl-item:last-child { border-bottom: none; }
.tl-item .year { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); font-weight: 600; }
.tl-item h3 { font-size: 1.2rem; margin-bottom: .4rem; }
@media (max-width: 560px){ .tl-item { grid-template-columns: 1fr; gap: .4rem; } }

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }

/* Support details under the contact copy — ruled off so they read as
   reference information rather than as more of the invitation above. */
.contact-details {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--silver-line);
}
.contact-details h2 { font-size: 1.2rem; margin-bottom: .9rem; }
.contact-details p { color: var(--body); }
.contact-details p + p { margin-top: .5rem; }
.contact-details strong { color: var(--ink-deep); }
.contact-details a:hover { text-decoration: underline; }
@media (max-width: 820px){ .contact-grid { grid-template-columns: 1fr; } }

.contact-info .display-l { margin-bottom: 1.2rem; }
/* Three separate thoughts, so they need air between them rather than running
   together as one block. */
.contact-info .lede + .lede { margin-top: .9rem; }
.contact-info .lede a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.contact-info .lede a:hover { color: var(--ink-deep); }
.contact-list { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start; }
.contact-list .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--panel-2); color: var(--ink); }
.contact-list .k { font-weight: 700; color: var(--ink-deep); font-size: .95rem; }
.contact-list .v { font-size: .95rem; color: var(--body); }
.contact-list a.v { text-decoration: none; transition: color .2s var(--ease); }
.contact-list a.v:hover { color: var(--ink); text-decoration: underline; }

.form {
  background: #fff;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-deep); margin-bottom: .5rem; letter-spacing: .01em; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-deep);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .85em 1em;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(39,68,114,.10);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 520px){ .field-row { grid-template-columns: 1fr; } }
.form .btn--primary { width: 100%; justify-content: center; margin-top: .4rem; }
.form-note { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 1rem; }
/* The note is only an error channel now — take up no room until it has text. */
.form-note:empty { display: none; }
.field-count { display: block; text-align: right; font-size: .74rem; color: var(--muted); margin-top: .35rem; }
.form-success {
  display: none;
  background: rgba(39,68,114,.06);
  border: 1px solid rgba(39,68,114,.18);
  color: var(--ink-deep);
  border-radius: var(--radius-sm);
  padding: 1.4rem;
  text-align: center;
  font-weight: 500;
}
.form-success.show { display: block; }

/* ============================================================
   CTA band + footer
   ============================================================ */
/* Capability chips — a light, scannable strip of what ships with the card.
   Kept light on purpose: the navy CTA below it should stay the only dark
   block on the page, otherwise both lose their weight. */
.chip-grid {
  display: grid;
  /* Three columns for six chips: two full rows, no chip left hanging on a
     row of its own. */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.1rem);
}
@media (max-width: 860px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } }

.chip {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem 1.15rem;
  background: #fff;
  border: 1px solid rgba(var(--ink-rgb), .09);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26, 46, 74, .04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(26, 46, 74, .06), 0 18px 36px rgba(26, 46, 74, .14);
}
/* the icon tile inverts on hover: navy tile, white glyph */
.chip:hover .chip__ico { background: var(--ink); color: #fff; }
.chip__ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(var(--ink-rgb), .07);
  color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.chip__ico svg { width: 19px; height: 19px; }
.chip > span:last-child {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-deep);
}

.cta-band {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(2.6rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 48ch; margin: 0 auto 2rem; }
.cta-band .btn--light { box-shadow: 0 10px 30px rgba(0,0,0,.2); }
/* An optional bold tagline between the paragraph and the button. The lead
   paragraph tightens up so the two read as one block. */
.cta-band .cta-band__lead { font-size: 1.125rem; margin-bottom: 1rem; }
.cta-band .cta-band__tag { font-size: 1.125rem; color: #fff; font-weight: 600; margin: 0 auto 2rem; letter-spacing: .01em; }
.cta-band::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 80% at 80% -10%, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
}

.site-footer {
  background: #fff;
  border-top: 1px solid var(--silver-line);
  padding-block: clamp(48px, 6vw, 72px) 2.2rem;
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (max-width: 820px){
  /* Brand + newsletter sa buong lapad sa taas; ang tatlong link columns
     ay maghahati sa isang row sa ilalim. */
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Three columns need about 560px before "Terms & Conditions" starts wrapping.
   Below that the footer becomes a single column — every section reads straight
   down, one after another, rather than splitting into uneven side-by-side
   blocks that leave half a row empty. */
@media (max-width: 560px){
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
}
/* The copyright and the social icons still fit side by side at 560px; they
   only need stacking once the row itself runs out. */
@media (max-width: 480px){
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: .8rem; }
}
.footer-brand .brand { font-size: 1.5rem; line-height: 1; display: inline-block; }
.footer-brand p { margin-top: .9rem; font-size: .92rem; color: var(--muted); max-width: 30ch; }

/* The registered address and support lines, carried on every page. <address>
   is the element for a business's own contact block; its italic default is
   the only thing that needs turning off. */
address { font-style: normal; }
.footer-contact {
  margin-top: 1.1rem;
  display: grid;
  gap: .45rem;
  max-width: 34ch;
  font-size: .88rem;
  color: var(--muted);
}
/* Each line is icon + text on a fixed two-column track, so an address that
   wraps aligns under its own first line rather than under the icon. */
.footer-contact > * {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: .55rem;
  align-items: start;
}
.footer-contact svg {
  width: 15px;
  height: 15px;
  margin-top: .18em;
  opacity: .85;
}
.footer-contact a:hover { color: var(--ink); }

/* BIR registration mark — centred on its own row between the link columns
   and the copyright rule, so it reads as a placed accreditation rather than
   something filling a gap in the columns. No rule of its own: the one above
   the copyright is enough. Shown whole as issued (badge, RDO and QR
   together); the width is set by the QR, which stops scanning off a screen
   much narrower. */
.footer-trust {
  /* Close under the columns — the image already carries ~20px of white above
     its artwork, which supplies most of the gap. */
  margin-top: clamp(.4rem, 1.5vw, 1rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  justify-content: center;
}
.footer-bir {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}
/* The band's own padding is the gap now; the bottom row keeps its rule. */
.footer-trust + .footer-bottom { margin-top: 0; }
/* On the four-column footer the mark rises into the space under the two
   short middle columns, its artwork level with "Join our newsletter". The
   brand column is the tallest at every width here and ends with the
   newsletter block, so the lift is that block's height plus the white the
   image carries above its artwork. */
@media (min-width: 821px) {
  .footer-trust { margin-top: -5rem; }
}

/* footer newsletter subscribe */
.footer-news-wrap { margin-top: 1.5rem; }
/* Opens the subscribe modal — the fields themselves live in there. */
.news-open {
  border: none; background: var(--ink); color: #fff;
  font-weight: 600; font-size: .85rem; padding: .68em 1.7em; border-radius: 100px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.news-open:hover { background: var(--ink-deep); transform: translateY(-1px); }
/* Inverted for the navy blog panel, where a dark fill would disappear. */
.news-open--light { background: #fff; color: var(--ink-deep); padding: .82em 2rem; font-size: .92rem; }
.news-open--light:hover { background: rgba(255,255,255,.9); }
.footer-news__title {
  font-family: var(--font-body); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .7rem;
}
.footer-col h4 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer-col a { font-size: .95rem; color: var(--body); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: clamp(2.4rem,4vw,3.4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--silver-line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--muted);
}
/* Brand marks, not labels. --ink is the brand navy (#274472); taking it from
   the token keeps them in step if the brand colour ever moves. */
.footer-bottom .socials { display: flex; align-items: center; gap: .35rem; }
.footer-bottom .socials a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--ink);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.footer-bottom .socials svg { width: 19px; height: 19px; display: block; }
.footer-bottom .socials a:hover {
  background: rgba(var(--ink-rgb), .1);
  transform: translateY(-2px);
}
.footer-bottom .socials a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .footer-bottom .socials a { transition: background .2s var(--ease); }
  .footer-bottom .socials a:hover { transform: none; }
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Each stacked panel owns a whole screen, so its type has to scale up to
   match. At the page's base sizes the copy reads as a small block marooned in
   the middle of an empty viewport. The measure tightens as the type grows, or
   the lines run too long to track across. */
.stack .eyebrow { font-size: .85rem; }
.stack .display-m { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.stack .statement { max-width: 54ch; }
.stack .statement p { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }

/* ============================================================
   Sticky stacking sections
   ============================================================
   Each section pins at the top of the viewport and the next one scrolls up
   over it, so the page reads like cards being laid down. Pure CSS: sticky
   elements paint in document order, so a later section is already above an
   earlier one — no z-index bookkeeping.

   Two things make the overlap legible: every section needs an OPAQUE
   background (or you see straight through to the pinned one beneath), and a
   rounded top edge with a soft shadow above it, so the arriving section has
   a visible leading edge.

   Only the four statement panels stack; the rest of the page scrolls
   plainly. The effect is gated on viewport HEIGHT as well as width, because
   a pinned panel taller than the viewport would have its bottom cut off with
   no way to scroll to it. Below that height the panels fall back to ordinary
   flow — a clean fallback, not a broken one. */
@media (min-width: 1024px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .stack > section {
    position: sticky;
    top: 0;
    background: #fff;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -16px 40px rgba(26, 46, 74, .07);
    /* Every panel is exactly one screen tall with its content centred inside
       it. That is what keeps a pinned panel readable: the arriving panel
       covers it from the bottom edge upward, rather than slicing through a
       paragraph that was jammed against the top of the viewport. */
    min-height: 100vh;
    display: grid;
    align-content: center;
    padding-block: clamp(44px, 5vw, 70px);
  }

  /* Alternating grounds. Four white panels sliding over each other read as
     one flat page — the tone change is what makes each arriving layer
     visible as a separate card. */
  .stack > section:nth-child(even) { background: var(--panel); }

  /* Nothing is above the first section, so it needs no leading edge. */
  .stack > section:first-child {
    border-radius: 0;
    box-shadow: none;
  }

  /* Whatever follows the stack is unpositioned, so a pinned panel would
     paint over it. Lifting it into the stacking order keeps the order of the
     page honest. */
  .stack ~ section {
    position: relative;
    z-index: 1;
  }
}

/* ============================================================
   Reviews — published wall + "leave a review" modal
   ============================================================ */
/* The wall is a snapping carousel: 4 cards fit the track, and the arrows
   page across by exactly one screenful. Cards stay a fixed fraction of the
   track width so a partial card never sits at the edge. */
.review-carousel { position: relative; }
.review-grid {
  --rv-gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  grid-auto-flow: column;
  /* Two across. Wider cards fit a normal-length review without truncating,
     which is what made the ellipsis show up at three and four across. */
  grid-auto-columns: calc((100% - var(--rv-gap)) / 2);
  gap: var(--rv-gap);
  align-items: stretch; /* every card in view shares the tallest height */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* `overflow-x` clips on BOTH axes, so the card shadows need real room here.
     The negative margin pulls the padding back out, keeping the first card
     flush with the page content. */
  padding: 1.1rem 1.6rem 2.6rem;
  margin-inline: -1.6rem;
  scroll-padding-inline: 1.6rem;
}
.review-grid::-webkit-scrollbar { display: none; }
.review-grid > .review-card { scroll-snap-align: start; }
/* The hidden attribute only carries display:none from the UA sheet, so the
   author display above beats it and the element stays on screen. Both this
   and .rv-arrow are toggled from reviews.js, so both need the override —
   without it an emptied wall keeps showing its old cards alongside the
   no-reviews-yet line. */
.review-grid[hidden] { display: none; }
@media (max-width: 840px) {
  .review-grid { grid-auto-columns: 88%; } /* one card, next one peeking */
}

.rv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--ink-rgb), .1);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-deep);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(26, 46, 74, .08), 0 10px 24px rgba(26, 46, 74, .1);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.rv-arrow svg { width: 20px; height: 20px; }
.rv-arrow--prev { left: clamp(-58px, -3.4vw, -14px); }
.rv-arrow--next { right: clamp(-58px, -3.4vw, -14px); }
.rv-arrow:disabled { opacity: .3; cursor: default; }
.rv-arrow:not(:disabled):hover { transform: translateY(-50%) scale(1.07); }
.rv-arrow[hidden] { display: none; }
/* On touch widths the swipe is the control, so the arrows step aside. */
@media (max-width: 700px) { .rv-arrow { display: none; } }

/* The quote is the content, so it carries the weight: darker and larger than
   the stars, which are only a rating glance. A hairline separates the words
   from who said them, and the attribution is pinned to the bottom so every
   card in view lines up. */
.review-card {
  background: #fff;
  border: 1px solid rgba(var(--ink-rgb), .07);
  border-radius: 22px;
  padding: clamp(1.7rem, 2.2vw, 2.1rem);
  box-shadow: 0 1px 2px rgba(26, 46, 74, .04), 0 14px 36px rgba(26, 46, 74, .07);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(26, 46, 74, .05), 0 22px 50px rgba(26, 46, 74, .11);
}
.review-stars { display: flex; gap: .15rem; margin-bottom: 1.15rem; }
.review-stars .rv-star { width: 17px; height: 17px; color: var(--silver-line); display: inline-flex; }
.review-stars .rv-star.is-on { color: #f5a623; }
.review-stars svg { width: 100%; height: 100%; }
.review-quote {
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-deep);
  margin-bottom: 1.5rem;
  /* Between three and six lines: short quotes cannot squash the card, long
     ones cannot stretch it into a column. */
  min-height: 4.86em;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-person {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: auto; /* sits on the bottom edge whatever the quote length */
  padding-top: 1.25rem;
  border-top: 1px solid rgba(var(--ink-rgb), .08);
}
.review-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--ink-rgb), .08);
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .06);
  color: var(--ink-deep);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
}
/* The photo covers the initials, so a broken image falls back to them. */
.review-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-who strong {
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-deep);
  line-height: 1.35;
}
.review-who small { font-size: .8rem; color: var(--muted); line-height: 1.35; }


.review-empty { text-align: center; color: var(--muted); margin: 0; }
.review-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.review-cta .btn:disabled { opacity: .55; cursor: default; }
.review-cta[hidden] { display: none; }
.review-note { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }

/* leave-a-review modal */
.rv-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.rv-modal__overlay { position: absolute; inset: 0; background: rgba(15, 20, 35, .55); }
.rv-modal__panel {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100vh - 2rem);
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 20, 35, .3);
}
.rv-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--silver-line);
}
.rv-modal__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-deep);
}
.rv-modal__close {
  /* Keeps the close control at the right edge even on the success screen,
     where the heading is hidden and space-between would otherwise pull it
     across to the left. */
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--body);
  cursor: pointer;
  padding: .1em .3em;
}
.rv-modal__close:hover { color: var(--ink); }
.rv-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.rv-modal__foot { padding: 1rem 1.4rem; border-top: 1px solid var(--silver-line); display: flex; flex-direction: column; }

.rv-pick { display: flex; gap: .3rem; }
.rv-pick button {
  border: 0;
  background: transparent;
  padding: 0;
  width: 34px;
  height: 34px;
  color: var(--silver-line);
  cursor: pointer;
  transition: transform .15s var(--ease), color .15s var(--ease);
}
.rv-pick button.is-on { color: #f5a623; }
.rv-pick button:hover { transform: scale(1.12); }
.rv-pick svg { width: 100%; height: 100%; }
.rv-textarea { resize: vertical; min-height: 110px; }
/* honeypot — hindi nakikita ng tao, sinusulatan lang ng bots */
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- Location dropdowns (PSGC pickers) ---------------------------------
   A native <select> renders its own arrow differently on every platform, so
   the control is stripped back and given one inline chevron. The extra right
   padding keeps a long barangay name from running underneath it. */
.co-select,
.account-menu__select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8a8e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8em center;
  background-size: .7em auto;
  padding-right: 2.2em;
  cursor: pointer;
  /* Truncate rather than stretch the grid — some barangay names are long. */
  text-overflow: ellipsis;
}
.co-select:disabled,
.account-menu__select:disabled {
  color: var(--ink-soft, #8a8a8e);
  background-color: #fafafa;
  cursor: default;
}
/* The empty placeholder option reads as a hint, not as a chosen value. */
.co-select:has(option[value=""]:checked),
.account-menu__select:has(option[value=""]:checked) {
  color: var(--ink-soft, #8a8a8e);
}
.co-select option,
.account-menu__select option { color: var(--ink); }
.account-menu__select { background-position: right .55em center; padding-right: 1.9em; }

/* On phones the city/barangay pair is too cramped side by side. */
@media (max-width: 480px) {
  .cart-checkout .co-fields:has(.co-select) { grid-template-columns: 1fr; }
}

/* --- Always-on header CTA ---------------------------------------------
   The buy path has to stay one tap away wherever the visitor wanders, so
   this pill lives in the sticky header on every page and is never folded
   into the hamburger menu. It only shortens its label as space runs out. */
.nav-cta {
  padding: .6em 1.25em;
  font-size: .9rem;
}
.nav-cta__short { display: none; }

/* Narrow desktop / tablet — the full label starts crowding the nav links. */
@media (max-width: 1080px) {
  .nav-cta__full { display: none; }
  .nav-cta__short { display: inline; }
}

/* The menu-panel copy of the CTA is desktop-hidden; the header copy owns it
   there. Below 860px they swap, which is what un-crowds the header row. */
.nav-menu-cta-li { display: none; }

@media (max-width: 860px) {
  .nav { gap: .6rem; }
  .nav-actions { gap: .5rem; }

  /* Out of the header, into the menu — the row has no space left for it. */
  .nav-cta { display: none; }
  .nav-menu-cta-li { display: block; }
  /* .nav-links a outranks .btn--primary on specificity, so the pill has to
     restate what it needs — colour above all, or it renders dark on navy. */
  .nav-links li + li.nav-menu-cta-li a {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.05em 1.5em;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    border-top: 0;
  }
  .nav-menu-cta-li a:hover { color: #fff; }
  /* The sliding underline belongs to the text links, not to a filled button. */
  .nav-menu-cta-li a::after { display: none; }

  /* Account control drops to a bare glyph so the row breathes. */
  .account-btn__label,
  .account-btn__name,
  .account-btn__chev { display: none; }
  .account-btn,
  .account-btn.is-user {
    width: 38px; height: 38px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
  }
  .account-btn.is-user .avatar { width: 30px; height: 30px; }
  .cart-btn { padding: .35em; gap: .35em; }
}

@media (max-width: 420px) {
  .brand__logo { height: 23px; }
  .nav-actions { gap: .35rem; }
  .account-btn,
  .account-btn.is-user { width: 34px; height: 34px; }
  .account-btn.is-user .avatar { width: 27px; height: 27px; }
  .nav-toggle { padding: 6px 4px; }
}

/* --- Blog subscribe block ---------------------------------------------
   A reader who has just finished an article is the likeliest subscriber, so
   the ask gets its own panel here rather than only sitting in the footer.
   One centred column — headline, promise, button — so once the copy has been
   read, the button is the only thing left on the line of sight. */
.blog-sub {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(2.6rem, 6vw, 4.8rem) clamp(1.6rem, 4vw, 3.2rem);
  background: var(--ink);
  border-radius: var(--radius-lg);
  color: #fff;
}
/* Headline and paragraph share one measure, so they read as a single block
   rather than a wide title over a narrow paragraph. */
.blog-sub__title,
.blog-sub__lede { max-width: 42rem; }
.blog-sub__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}
.blog-sub__lede {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}
/* The panel's one action, so it is sized as one — larger than the footer's
   compact Subscribe it shares a class with. */
.blog-sub .news-open--light {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding: 1em 2.6em;
  font-size: 1.02rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

/* --- "Deliver to" card in checkout -------------------------------------
   Shipping detail is the one thing a customer cannot correct after paying,
   so it is shown on both steps with an Edit affordance beside it. */
.co-addr {
  border: 1px solid var(--silver-line);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  background: rgba(var(--ink-rgb), .02);
}
.co-addr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .4rem;
}
.co-addr__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--body);
}
.co-addr__edit {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.co-addr__edit:hover { color: var(--ink-deep); }
.co-addr__phone { font-size: .86rem; font-weight: 600; color: var(--ink-deep); }
.co-addr__lines { margin-top: .15rem; font-size: .86rem; line-height: 1.5; color: var(--body); }
.co-addr__map {
  display: inline-block;
  margin-top: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The empty first option is a prompt, not a value — grey it so the field does
   not look already answered. */
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field select option { color: var(--ink); }

/* A locked field still submits its value, so it reads as fixed rather than
   broken — greyed but legible, and clearly not an empty input. */
.co-ref[readonly] {
  background: #f5f6f8;
  color: var(--body);
  cursor: default;
}
.co-ref[readonly]:focus { outline-color: var(--silver); }
.co-hint--tight { margin-top: -.35rem; font-size: .78rem; }

.rv-link {
  display: inline-block;
  margin-top: .2rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Auth pages (sign in / sign up / forgot / reset) -------------------- */
.auth-hero { padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem); }
.auth-card {
  max-width: 30rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--silver-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4.5vw, 2.8rem);
  box-shadow: 0 14px 44px rgba(26, 46, 74, .08);
}
.auth-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  text-align: center;
}
.auth-sub { margin-top: .55rem; text-align: center; font-size: .95rem; color: var(--body); }
.auth-form { display: grid; gap: .55rem; margin-top: 1.5rem; }
.auth-label { margin-top: .45rem; font-size: .8rem; font-weight: 600; color: var(--ink-deep); }
.auth-link {
  justify-self: start;
  font-size: .82rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-submit { justify-content: center; width: 100%; margin-top: .6rem; }

/* password field + show/hide eye */
.pw-wrap { position: relative; }
.pw-wrap .co-ref { width: 100%; padding-right: 2.9em; }
.pw-toggle {
  position: absolute; right: .35em; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center;
  background: none; border: 0; padding: .5em;
  color: var(--muted); cursor: pointer;
}
.pw-toggle:hover, .pw-toggle.is-on { color: var(--ink); }

/* live password guidance */
.pw-checks {
  list-style: none; margin: .1rem 0 0; padding: .75rem .95rem;
  display: grid; gap: .3rem;
  background: rgba(var(--ink-rgb), .03);
  border: 1px solid var(--silver-line); border-radius: 12px;
  font-size: .8rem; color: var(--body);
}
.pw-checks li { display: flex; align-items: center; gap: .5em; }
.pw-checks li::before { content: "○"; color: var(--muted); font-size: .8em; }
.pw-checks li.ok { color: var(--ink-deep); }
.pw-checks li.ok::before { content: "●"; color: #16a34a; }
.pw-meter { display: flex; align-items: center; gap: .6rem; margin-top: .1rem; }
.pw-checks[hidden], .pw-meter[hidden] { display: none; }
.pw-meter i { flex: 1; display: block; height: 5px; border-radius: 99px; background: var(--silver-line); overflow: hidden; }
.pw-meter i span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .25s var(--ease), background .25s var(--ease); }
.pw-meter em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--body); min-width: 3.4em; text-align: right; }

/* divider + Google button + footer link */
.auth-divider {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.25rem 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--silver-line); }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  width: 100%; padding: .8em 1.5em;
  border: 1px solid var(--silver-line); border-radius: 100px;
  background: #fff; font: inherit; font-size: .93rem; font-weight: 600; color: var(--ink-deep);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.auth-google:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), .03); }
.auth-google:disabled { opacity: .6; cursor: default; }
.auth-foot { margin-top: 1.4rem; text-align: center; font-size: .9rem; color: var(--body); }
.auth-foot a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* honeypot: physically present for bots, gone for people and screen readers */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Cloudflare Turnstile slot — collapses to nothing until a widget renders */
.ts-slot { min-height: 0; }
.ts-slot iframe { max-width: 100%; }

/* Sign-up only: two fields per row and a two-column checklist, so that one
   longer form still fits a single viewport. The other auth cards keep the
   default stacked layout. */
.auth-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; align-items: start; }
.auth-field { display: grid; gap: .5rem; min-width: 0; }
.auth-card--compact { max-width: 34rem; }
.auth-card--compact .auth-title { font-size: clamp(1.5rem, 3.2vw, 1.9rem); }
.auth-card--compact .auth-form { gap: .5rem; margin-top: 1.15rem; }
.auth-card--compact .auth-label { margin-top: .3rem; }
.auth-card--compact .auth-divider { margin: .95rem 0; }
.auth-card--compact .auth-foot { margin-top: 1.05rem; }
.auth-card--compact .pw-checks { grid-template-columns: 1fr 1fr; gap: .28rem .9rem; padding: .6rem .85rem; }
@media (max-width: 560px) {
  .auth-2col { grid-template-columns: 1fr; }
  .auth-card--compact .pw-checks { grid-template-columns: 1fr; }
}

/* --- "What's included" scattered stage ----------------------------------
   Above 900px the chips leave the grid and float scattered around the
   heading, each drifting gently on its own rhythm, with soft navy glows
   blurred into both sides. Below 1100px the plain grid returns — narrower
   than that, the scattered chips start colliding. */
.chip-stage { position: relative; }
.chip-stage .section-head { position: relative; z-index: 2; }

@media (min-width: 1101px) {
  .chip-stage { min-height: 600px; }
  .chip-stage .section-head {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 0;
    width: max-content;
    max-width: 34rem;
  }

  /* blurry side glows */
  .chip-stage::before,
  .chip-stage::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ink-rgb), .28), transparent 68%);
    filter: blur(60px);
    pointer-events: none;
  }
  .chip-stage::before { left: -160px; transform: translateY(-50%); }
  .chip-stage::after { right: -160px; transform: translateY(-40%); }

  .chip-stage .chip-grid { position: static; display: block; }
  .chip-stage .chip {
    position: absolute;
    z-index: 1;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(26, 46, 74, .1);
    /* --r: each chip's resting tilt. Both the float keyframes and the hover
       state have to repeat it, or the chip jumps. */
    transform: rotate(var(--r, 0deg));
    animation: chip-drift var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
  }

  /* A ring around the centred heading: three mirrored left/right pairs. The
     middle pair sits closest to the edges because the heading is widest at
     that height, so the two longest labels take it — they have the most room
     there before they would run into the text.
     These are positioned per nth-of-type, so a chip added to the markup
     without a rule here lands unpositioned on top of the heading. */
  .chip-stage .chip:nth-of-type(6) { top: 4%;  left: 22%;  --r: -2deg;   --dur: 8s;   --delay: -1s; }
  .chip-stage .chip:nth-of-type(5) { top: 4%;  right: 22%; --r: 2deg;    --dur: 9s;   --delay: -3s; }
  .chip-stage .chip:nth-of-type(2) { top: 44%; left: 4%;   --r: 1.5deg;  --dur: 9.5s; --delay: -4s; }
  .chip-stage .chip:nth-of-type(3) { top: 44%; right: 4%;  --r: -1.5deg; --dur: 8.8s; --delay: -5s; }
  .chip-stage .chip:nth-of-type(1) { top: 84%; left: 20%;  --r: 2deg;    --dur: 10s;  --delay: -6s; }
  .chip-stage .chip:nth-of-type(4) { top: 84%; right: 20%; --r: -2deg;   --dur: 8.2s; --delay: -3.6s; }

  .chip-stage .chip:hover {
    animation: none;
    transform: rotate(0deg) translateY(-6px) scale(1.04);
    box-shadow: 0 20px 44px rgba(26, 46, 74, .18);
  }
}

@keyframes chip-drift {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50% { transform: rotate(var(--r, 0deg)) translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .chip-stage .chip { animation: none; }
}

/* --- Legal pages (privacy, terms) --------------------------------------- */
.legal-body {
  max-width: 46rem;
  margin-inline: auto;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--body);
}
.legal-body h2 {
  margin: 2.2rem 0 .7rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-deep);
  /* an anchored section lands clear of the sticky header */
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.legal-body p { margin: 0 0 1rem; }
.legal-body ul { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .5rem; }
.legal-body a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Sub-headings inside a policy section (e.g. "Personal and Contact
   Information"), and the email/phone block that closes most of them. */
.legal-body h3 {
  margin: 1.5rem 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-deep);
}
.legal-body strong { color: var(--ink-deep); }
.legal-contact {
  padding: .9rem 1.1rem;
  background: rgba(var(--ink-rgb), .04);
  border: 1px solid var(--silver-line);
  border-radius: 12px;
  line-height: 1.8;
}

/* ============================================================
   Purchase history (/orders)
   A receipt wall, not a dashboard: one card per order, the status
   spelled out in words, and the paperwork tucked behind a toggle.
   ============================================================ */
.orders { display: flex; flex-direction: column; gap: 1.6rem; }

/* empty / signed-out / error states share one centred panel */
.orders__state {
  border: 1px dashed var(--silver-line);
  border-radius: var(--radius);
  padding: clamp(2.4rem, 6vw, 4rem) 1.6rem;
  text-align: center;
  color: var(--body);
}
.orders__stateTitle {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--ink-deep);
  margin: 0 0 .5rem;
}
.orders__state p { margin: 0 auto; max-width: 46ch; font-size: .95rem; }
/* Inline links inside the copy only — the buttons below keep their own colour */
.orders__state p a { color: var(--ink); font-weight: 600; }
.orders__stateActions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 1.6rem;
}
.orders__stateActions a { text-decoration: none; }

/* headline numbers */
.orders__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.orders__stat {
  border: 1px solid var(--silver-line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 1.1rem 1.3rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.orders__statN {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500; line-height: 1; color: var(--ink);
}
.orders__statL {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* status filter chips */
.orders__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.orders__chip {
  border: 1px solid var(--silver-line); background: transparent; color: var(--ink);
  font-family: inherit; font-size: .84rem; font-weight: 600;
  padding: .5em 1.05em; border-radius: 100px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.orders__chip em { font-style: normal; opacity: .55; margin-left: .25em; }
.orders__chip:hover { border-color: var(--ink); }
.orders__chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.orders__none { color: var(--body); font-size: .95rem; margin: 0; }

/* --- Purchase history on a phone -------------------------------------------
   Three stat cards stacked full-width ate the whole first screen for three
   short numbers, and the chips wrapped so the last one sat orphaned on its own
   line. So: the stats collapse into one receipt-style block of label/value
   rows, and the chips become a single swipeable strip. -------------------- */
@media (max-width: 640px) {
  .orders__stats {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--silver-line);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden;
  }
  /* row-reverse puts the label at the left edge and the number at the right,
     without reordering the markup that the wide layout needs. */
  .orders__stat {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: 0;
    border-radius: 0;
    padding: .8rem 1rem;
  }
  .orders__stat + .orders__stat { border-top: 1px solid var(--silver-line); }
  .orders__statN { font-size: 1.25rem; }
  .orders__statL { font-size: .7rem; letter-spacing: .06em; }

  /* One row that scrolls, rather than an uneven two-row wrap. */
  .orders__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Bleed to the gutters so the strip reads as scrollable, not clipped. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .orders__filters::-webkit-scrollbar { display: none; }
  .orders__chip { flex: 0 0 auto; font-size: .8rem; padding: .45em .95em; }
}

/* The track's three steps plus two bars cannot share a line with the label on
   a narrow screen. Handled at the end of this section, after the card rules
   themselves — same specificity, so it has to come later to win. */

/* pager */
.orders__pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.orders__pagerInfo { font-size: .85rem; color: var(--body); }
.orders__pagerBtns { display: flex; gap: .5rem; }
.orders__pageBtn {
  border: 1px solid var(--silver-line); background: transparent; color: var(--ink);
  font-family: inherit; font-size: .84rem; font-weight: 600;
  padding: .55em 1.2em; border-radius: 100px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.orders__pageBtn:hover:not(:disabled) { border-color: var(--ink); background: rgba(var(--ink-rgb), .05); }
.orders__pageBtn:disabled { opacity: .45; cursor: not-allowed; }

/* the cards */
.orders__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.order-card {
  border: 1px solid var(--silver-line);
  border-radius: var(--radius);
  background: #fff;
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column; gap: .75rem;
  box-shadow: var(--shadow-sm);
}
.order-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
}
.order-card__id { display: flex; flex-direction: column; gap: .1rem; }
.order-card__ref {
  font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 600; letter-spacing: .02em; color: var(--ink-deep);
}
.order-card__date { font-size: .82rem; color: var(--muted); }
.order-card__dateShort { display: none; }

.order-status {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
  padding: .42em .9em; border-radius: 100px; border: 1px solid transparent;
}
.order-status.is-pending { background: rgba(214, 148, 38, .1); border-color: rgba(214, 148, 38, .35); color: #9a6a11; }
.order-status.is-paid { background: rgba(30, 133, 90, .1); border-color: rgba(30, 133, 90, .32); color: #1a6d4a; }
.order-status.is-rejected { background: rgba(229, 72, 77, .09); border-color: rgba(229, 72, 77, .32); color: #c23438; }

.order-card__items {
  border-top: 1px solid var(--silver-line);
  border-bottom: 1px solid var(--silver-line);
  padding: .7rem 0; display: flex; flex-direction: column; gap: .4rem;
}
.order-item {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: .9rem; align-items: center; font-size: .9rem;
}
/* May thumbnail ang item? Apat na column — larawan muna, tulad ng cart. */
.order-item:has(.order-item__img) { grid-template-columns: auto 1fr auto auto; }
.order-item__img {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--silver-line);
  background: #f4f6fa; flex-shrink: 0;
}
.order-item__name { color: var(--ink-deep); min-width: 0; overflow-wrap: anywhere; }
.order-item__qty { color: var(--muted); font-size: .82rem; }
.order-item__line { color: var(--body); font-weight: 600; white-space: nowrap; }

.order-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.order-card__count { font-size: .82rem; color: var(--muted); }
.order-card__total { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-deep); }
.order-card__note { margin: 0; font-size: .84rem; color: var(--body); }

/* Delivery track — the second axis, kept visually distinct from the payment
   badge in the header and always introduced by its own label. */
.order-track {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  border-top: 1px solid var(--silver-line); padding-top: .8rem;
}
.order-track__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-right: .2rem;
}
/* The icon inherits the step's colour, so one rule per state tints both the
   glyph and its label — no separate "done dot" to keep in sync. */
.order-track__step {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .8rem; color: var(--silver); white-space: nowrap;
}
.order-track__step svg { width: 15px; height: 15px; flex-shrink: 0; }
.order-track__step.is-done { color: var(--ink); }
.order-track__step.is-active { color: var(--ink-deep); font-weight: 700; }
.order-track__step.is-active svg { width: 17px; height: 17px; }
.order-track__bar {
  flex: 1 1 12px; min-width: 12px; height: 1.5px;
  background: var(--silver-line);
}
.order-track__bar.is-done { background: var(--ink); }
.order-track__cancelled {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .8rem; font-weight: 700; color: #c23438;
}
.order-track__cancelled svg { width: 15px; height: 15px; flex-shrink: 0; }

.order-card__toggle {
  align-self: flex-start; border: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: .84rem; font-weight: 600;
  color: var(--ink); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.order-card__toggle:hover { color: var(--ink-deep); }

/* Ang daan pabalik sa hindi natapos na HitPay checkout — button ang hitsura,
   dahil ito ang pinakamahalagang kilos sa isang hindi pa bayad na order. */
.order-card__paylink {
  align-self: flex-start;
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  padding: .55em 1.2em;
  border-radius: 999px;
  text-decoration: none;
}
.order-card__paylink:hover { background: var(--ink-deep); }

.order-card__details {
  border-top: 1px solid var(--silver-line);
  padding-top: .85rem; display: flex; flex-direction: column; gap: .5rem;
}
.order-card__details[hidden] { display: none; }
.order-detail { display: grid; grid-template-columns: 130px 1fr; gap: .8rem; font-size: .86rem; }
@media (max-width: 520px) { .order-detail { grid-template-columns: 1fr; gap: .15rem; } }
.order-detail__k {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding-top: .12em;
}
.order-detail__v { color: var(--ink-deep); overflow-wrap: anywhere; }
.order-card__receipt,
.order-card__help {
  font-size: .85rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; width: fit-content;
}
.order-card__help { color: var(--body); }

/* Order cards on a phone. Last in the section on purpose: these selectors are
   no more specific than the rules above, so source order is what makes them
   win — moving this block earlier silently disables it. */
@media (max-width: 560px) {
  /* The desktop padding left the header a few pixels short of fitting, so the
     status badge dropped onto its own line. Reclaiming them keeps the order ref
     and the badge on one row, and gives the item names and track room too. */
  .order-card { padding: 1.05rem 1.1rem; gap: .65rem; }
  .order-status { font-size: .66rem; padding: .36em .7em; letter-spacing: .04em; }
  .order-card__ref { font-size: .98rem; }
  .order-card__date { font-size: .76rem; }
  .order-card__dateFull { display: none; }
  .order-card__dateShort { display: inline; }

  /* Three steps plus two bars cannot share a line with the label here — the
     bars collapse and the row reads as broken. Label takes its own line. */
  .order-track { gap: .35rem .4rem; padding-top: .7rem; }
  .order-track__label { flex: 0 0 100%; margin-right: 0; }
  .order-track__step { font-size: .72rem; gap: .3rem; }
  .order-track__step svg { width: 13px; height: 13px; }
  .order-track__step.is-active svg { width: 15px; height: 15px; }
  .order-track__bar { flex: 1 1 8px; min-width: 8px; }
}

/* ============================================================
   FAQs
   Native <details>, so the open/close behaviour, keyboard support and
   screen-reader semantics come from the browser rather than from script.
   The default disclosure triangle is replaced by a drawn chevron that
   rotates — `list-style: none` plus the WebKit pseudo-element are both
   needed to hide the built-in marker across browsers.
   ============================================================ */
.faq {
  max-width: 46rem;
  margin-inline: auto;
  border-top: 1px solid var(--silver-line);
}
.faq-item { border-bottom: 1px solid var(--silver-line); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem .25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-deep);
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: .38em;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--ink); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-answer {
  padding: 0 3rem .3rem .25rem;
  display: flex; flex-direction: column; gap: .85rem;
}
.faq-answer p { margin: 0; font-size: .96rem; color: var(--body); }
@media (max-width: 560px) {
  .faq-item summary { font-size: .96rem; gap: 1rem; }
  .faq-answer { padding-right: 1.6rem; }
}

.faq-cta {
  max-width: 46rem;
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.faq-cta p { margin: 0; color: var(--body); }
.faq-cta a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}