.svc-main { padding: 40px 0 80px; }

.svc-head {
    max-width: 62ch;
    padding-bottom: 32px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--color-ink);
}

.svc-eyebrow {
    margin: 0 0 14px;
    letter-spacing: 0.2em;
    color: var(--color-muted);
}

.svc-title {
    margin: 0 0 18px;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

.svc-lede {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-body);
}

.svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
}

.rp-section { margin-bottom: 64px; }

.rp-h2 {
    margin: 0 0 24px;
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    font-weight: 600;
    color: var(--color-ink);
}

.rp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line-warm);
}

.rp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 120px 150px;
    align-items: baseline;
    gap: 8px 24px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--color-line-warm);
    transition: background 240ms ease;
}

.rp-row:hover { background: var(--color-cream-3); }

.rp-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-ink);
}

.rp-desc {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.rp-time {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted-soft);
}

.rp-price {
    justify-self: end;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rp-note {
    margin: 20px 0 0;
    max-width: 70ch;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.rp-cant {
    max-width: 68ch;
    padding: 26px 28px;
    background: var(--color-cream-2);
    border-left: 2px solid var(--color-gold);
}

.rp-cant p {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-body);
}

.rp-cant-link, .bg-link {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--color-ink);
    padding-bottom: 3px;
    transition: color 240ms ease, border-color 240ms ease;
}

.rp-cant-link:hover, .bg-link:hover {
    color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.rp-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--color-line-warm);
    border: 1px solid var(--color-line-warm);
}

.rp-step {
    display: flex;
    gap: 16px;
    padding: 24px 22px;
    background: var(--color-white);
}

.rp-step-n {
    flex: none;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--color-gold-dark);
    padding-top: 3px;
}

.rp-step-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 6px;
}

.rp-step-desc {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.bk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.05fr);
    gap: 1px;
    background: var(--color-line-warm);
    border: 1px solid var(--color-line-warm);
}

.bk-panel {
    background: var(--color-white);
    padding: 28px 26px;
    min-width: 0;
}

.bk-panel-head {
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--color-line-warm);
}

.bk-step {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-gold-dark);
}

.bk-h2 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--color-ink);
}

.bk-cal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bk-cal-month {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-ink);
}

.bk-cal-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-line-warm-2);
    color: var(--color-ink);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}

.bk-cal-nav:hover:not(:disabled) {
    background: var(--color-dark-ui);
    color: var(--color-white);
}

.bk-cal-nav:disabled { opacity: 0.3; cursor: default; }

.bk-cal-dows, .bk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.bk-cal-dows {
    margin-bottom: 8px;
}

.bk-cal-dows span {
    text-align: center;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted-soft);
}

.bk-day {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.bk-day:hover:not(:disabled):not(.is-selected) {
    border-color: var(--color-ink);
}

.bk-day.is-blank {
    cursor: default;
    border: 0;
}

.bk-day.is-disabled {
    color: var(--color-muted-soft);
    opacity: 0.4;
    cursor: default;
}

.bk-day.is-selected {
    background: var(--color-dark-ui);
    border-color: var(--color-ink);
    color: var(--color-white);
}

.bk-day:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 1px;
}

.bk-hint {
    margin: 16px 0 0;
    font-size: 0.6875rem;
    color: var(--color-muted-soft);
}

.bk-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.bk-slot {
    padding: 11px 6px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-line-warm-2);
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.bk-slot:hover { border-color: var(--color-ink); }

.bk-slot.is-selected {
    background: var(--color-dark-ui);
    border-color: var(--color-ink);
    color: var(--color-white);
}

.bk-slot:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.bk-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px 0;
    font-size: 0.8125rem;
    color: var(--color-muted-soft);
}

.bk-field { margin-bottom: 18px; }

.bk-fieldset {
    border: 0;
    padding: 0;
    margin-bottom: 18px;
}

.bk-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.bk-optional {
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-muted-soft);
    text-transform: none;
}

.bk-input {
    width: 100%;
    padding: 11px 12px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-ink);
    background: var(--color-white);
    border: 1px solid var(--color-line-warm-2);
    transition: border-color 200ms ease;
}

.bk-input::placeholder { color: var(--color-muted-soft); }

.bk-input:focus {
    outline: none;
    border-color: var(--color-ink);
}

.bk-input.has-error { border-color: #B3261E; }

.bk-textarea { resize: vertical; line-height: 1.6; }

.bk-error {
    display: block;
    margin-top: 5px;
    font-size: 0.6875rem;
    color: #B3261E;
}

.bk-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bk-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-body);
    cursor: pointer;
}

.bk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: 22px 26px;
    background: var(--color-cream-2);
    border: 1px solid var(--color-line-warm);
}

.bk-summary-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted-soft);
    margin-bottom: 6px;
}

.bk-summary-value {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--color-muted);
}

.bk-summary-value.is-set { color: var(--color-ink); }

.bk-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.bg-part { margin-bottom: 72px; }

.bg-part-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--color-line-warm);
}

.bg-part-n {
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    color: var(--color-gold-dark);
}

.bg-part-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 600;
    color: var(--color-ink);
}

.bg-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-line-warm);
    border: 1px solid var(--color-line-warm);
}

.bg-card {
    background: var(--color-white);
    padding: 28px 26px;
    min-width: 0;
}

.bg-h3 {
    margin: 0 0 14px;
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--color-ink);
}

.bg-p {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-body);
}

.bg-p:last-child { margin-bottom: 0; }

.bg-mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8125rem;
    padding: 1px 5px;
    background: var(--color-cream-2);
    border: 1px solid var(--color-line-warm-2);
}

.bg-defs {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px 18px;
    margin: 0 0 16px;
}

.bg-defs--wide { grid-template-columns: 72px minmax(0, 1fr); }

.bg-defs dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
    padding-top: 2px;
}

.bg-defs dd {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.bg-rx {
    max-width: 76ch;
    padding: 30px 32px;
    background: var(--color-cream-2);
    border: 1px solid var(--color-line-warm);
}

.bg-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
    flex-wrap: wrap;
}


/* ───────────────────────────────────────────────────────────────────────────
   TR-GRID  (New Arrivals 2-row horizontal scroll carousel)
   ─────────────────────────────────────────────────────────────────────────── */
.tr-viewport {
    position: relative;
    padding: 0 44px;
    margin: 0 -44px;
}
.tr-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--color-white);
    border: 1px solid var(--color-line-warm-2);
    border-radius: 50%;
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: 0 2px 14px rgba(26,26,26,0.12);
    transition: background 200ms, border-color 200ms, color 200ms;
}
.tr-prev { left: -22px; transform: translateY(-50%); }
.tr-next { right: -22px; transform: translateY(-50%); }
.tr-nav:hover:not(:disabled) {
    background: var(--color-dark-ui);
    border-color: var(--color-ink);
    color: var(--color-white);
}
.tr-nav:disabled { opacity: 0.28; cursor: default; }
.tr-nav.is-idle { display: none; }
.tr-nav:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.tr-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 4);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 4px 4px 8px;
    margin: -4px -4px -8px;
    scroll-padding-inline: 4px;
    align-items: start;
}
.tr-grid::-webkit-scrollbar { display: none; }

.tr-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-snap-align: start;
    min-width: 0;
}

.tr-col .product-card {
    width: 100%;
    flex-shrink: 0;
}


/* ───────────────────────────────────────────────────────────────────────────
   HEADER / NAV
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   CATEGORY CARDS (cc-track)
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   SHOP / LISTING PAGE
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   CART PAGE
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   CHECKOUT PAGE
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   LENS MODAL
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   WHATSAPP FLOAT
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   RX INPUTS
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   TRUST BAR
   ─────────────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────────────
   BRAND STRIP
   ─────────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════


/* ═══════════════════════════════════════════════════════
   THANK YOU PAGE  (woocommerce/checkout/thankyou.php)
   ═══════════════════════════════════════════════════════ */

.page-thankyou-body { background: var(--color-page); }

.ty-main { padding: 32px 0 80px; }

/* Hero */
.ty-hero {
    text-align: center;
    padding: 48px 24px 40px;
}
.ty-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E8F7EE;
    margin-bottom: 20px;
}
.ty-check .material-symbols-outlined {
    font-size: 36px;
    color: var(--color-success);
}
.ty-heading {
    font-size: clamp(22px, 4vw, 30px);
    margin: 0 0 10px;
    color: var(--color-ink);
}
.ty-sub {
    font-size: 15px;
    color: var(--color-muted);
    margin: 0;
}

/* Layout */
.ty-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: start;
}
.ty-col-main { display: flex; flex-direction: column; gap: 18px; }
.ty-col-side  { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }

/* Cards */
.ty-card {
    background: var(--color-white);
    border: 1px solid var(--color-border-warm);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ty-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-sand);
}
.ty-card-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
}
.ty-order-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
}

/* Meta grid */
.ty-meta-grid  { display: flex; flex-direction: column; gap: 10px; }
.ty-meta-row   { display: flex; gap: 12px; font-size: 13.5px; }
.ty-meta-label { color: var(--color-muted); min-width: 80px; flex-shrink: 0; }
.ty-meta-val   { color: var(--color-ink); font-weight: 500; }

/* Items */
.ty-items { display: flex; flex-direction: column; gap: 14px; }
.ty-item  { display: flex; align-items: flex-start; gap: 14px; }
.ty-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-sand);
    flex-shrink: 0;
    background: var(--color-cream);
}
.ty-item-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted-soft);
}
.ty-item-img--placeholder .material-symbols-outlined { font-size: 22px; }
.ty-item-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.ty-item-name  { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.ty-item-meta  { font-size: 12px; color: var(--color-muted); }
.ty-item-lens  { color: var(--color-gold-dark); }
.ty-item-qty   { font-size: 12px; color: var(--color-muted-soft); }
.ty-item-price { font-size: 14px; font-weight: 700; color: var(--color-ink); flex-shrink: 0; }

/* Total row */
.ty-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--color-sand);
}
.ty-total-label { font-size: 13px; font-weight: 600; color: var(--color-muted); }
.ty-total-val   { font-size: 17px; font-weight: 700; color: var(--color-ink); }

/* Steps */
.ty-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ty-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ty-step-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-sand);
    flex-shrink: 0;
    color: var(--color-ink);
    counter-increment: step;
}
.ty-step-ico .material-symbols-outlined { font-size: 18px; }
.ty-step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 6px;
}
.ty-step-body strong { font-size: 13.5px; color: var(--color-ink); }
.ty-step-body span   { font-size: 12.5px; color: var(--color-muted); }

/* WhatsApp + shop buttons */
.ty-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--color-whatsapp);
    color: #fff;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.ty-wa-btn:hover { background: var(--color-whatsapp-hover); color: #fff; }
.ty-shop-btn {
    display: block;
    text-align: center;
    border: 1.5px solid var(--color-border-warm);
    color: var(--color-ink);
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.ty-shop-btn:hover { border-color: var(--color-dark-ui); background: var(--color-cream); }

/* Not found state */
.ty-not-found {
    text-align: center;
    padding: 80px 24px;
}
.ty-not-found .material-symbols-outlined { font-size: 52px; color: var(--color-muted-soft); display: block; margin-bottom: 16px; }
.ty-not-found h1 { font-size: 24px; margin-bottom: 10px; }
.ty-not-found p  { font-size: 14px; color: var(--color-muted); margin-bottom: 24px; }

/* Responsive */
@media (max-width: 900px) {
    .ty-layout { grid-template-columns: 1fr; }
    .ty-col-side { position: static; }
}
@media (max-width: 600px) {
    .ty-main   { padding: 20px 0 60px; }
    .ty-hero   { padding: 32px 16px 28px; }
    .ty-card   { padding: 18px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT US, ABOUT US, BUYING GUIDE, EYE EXAM — new page CSS
   Append to: css/pages.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── SHARED UTILITIES ──────────────────────────────────────────────────── */
.cu-section,
.ab-section,
.ee-section,
.bg-guide-section { margin-bottom: 72px; }

.cu-section-heading,
.ab-center-heading,
.ee-section-heading { margin: 0 0 32px; font-size: clamp(1.375rem,2.2vw,1.875rem); font-weight:600; color:var(--color-ink); }

.ab-cta-box {
    text-align: center;
    padding: 56px 32px;
    background: var(--color-cream-2);
    border: 1px solid var(--color-line-warm);
}
.ab-cta-heading { margin:0 0 28px; font-size:clamp(1.5rem,2.6vw,2.25rem); font-weight:600; color:var(--color-ink); }
.ab-cta-actions { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.ab-cta-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px;
    font-family:var(--font-body); font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--color-ink); background:transparent; border:1px solid var(--color-ink);
    text-decoration:none; transition:background 200ms,color 200ms;
}
.ab-cta-outline:hover { background:var(--color-ink); color:var(--color-white); }

.ab-img-placeholder {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    background:var(--color-cream-2); border:1px dashed var(--color-line-warm-2);
    color:var(--color-muted-soft);
}
.ab-img-placeholder .material-symbols-outlined { font-size:40px; opacity:0.4; }
.ab-img-placeholder small { font-size:0.6875rem; }

.ab-body-p { margin:0 0 16px; font-size:0.9375rem; line-height:1.8; color:var(--color-body); }
.ab-section-eyebrow { margin:0 0 10px; letter-spacing:0.2em; color:var(--color-muted); }
.ab-section-heading { margin:0 0 20px; font-size:clamp(1.5rem,2.6vw,2.125rem); font-weight:600; color:var(--color-ink); }

.bg-link {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.625rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--color-ink); text-decoration:none; border-bottom:1px solid var(--color-ink); padding-bottom:3px;
    transition:color 200ms,border-color 200ms; margin-top:20px;
}
.bg-link:hover { color:var(--color-gold-dark); border-color:var(--color-gold-dark); }

/* ─────────────────────────────────────────────────────────────────────────
   CONTACT US
   ───────────────────────────────────────────────────────────────────────── */

/* Hero */
.cu-main { padding:40px 0 80px; }

.cu-hero {
    max-width:62ch;
    padding-bottom:32px;
    margin-bottom:56px;
    border-bottom:1px solid var(--color-ink);
}
.cu-eyebrow { margin:0 0 14px; letter-spacing:0.2em; color:var(--color-muted); }
.cu-hero-heading { margin:0 0 16px; font-size:clamp(2rem,4.4vw,3.25rem); font-weight:600; line-height:1; letter-spacing:-0.015em; color:var(--color-ink); }
.cu-hero-lede { margin:0; font-size:1.0625rem; line-height:1.75; color:var(--color-body); }

/* Gallery */
.cu-gallery { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4px; }
.cu-gallery-main { grid-row:span 2; }
.cu-gallery-img { display:block; width:100%; height:100%; object-fit:cover; }
.cu-gallery-img--main { aspect-ratio:5/4; }
.cu-gallery-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.cu-gallery-thumb { aspect-ratio:1/1; overflow:hidden; }
.cu-gallery-thumb .cu-gallery-img { aspect-ratio:1/1; }
.cu-gallery-placeholder {
    aspect-ratio:3/4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background:var(--color-cream-2); border:1px dashed var(--color-line-warm-2); color:var(--color-muted-soft); font-size:0.75rem; text-align:center;
}
.cu-gallery-placeholder .material-symbols-outlined { font-size:36px; opacity:0.35; }
.cu-gallery-thumb.cu-gallery-placeholder { aspect-ratio:1/1; }

/* Store info grid */
.cu-info-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
    background:var(--color-line-warm); border:1px solid var(--color-line-warm);
}
.cu-info-card {
    display:flex; align-items:flex-start; gap:16px;
    padding:28px 24px; background:var(--color-white);
}
.cu-info-icon { font-size:22px; color:var(--color-gold-dark); flex:none; margin-top:2px; }
.cu-info-label {
    margin:0 0 6px; font-size:0.5625rem; font-weight:700; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--color-muted-soft);
}
.cu-info-value { margin:0; font-size:0.9375rem; line-height:1.65; color:var(--color-ink); font-style:normal; }
.cu-info-note { margin:4px 0 0; font-size:0.8125rem; color:var(--color-muted-soft); }
.cu-info-link { text-decoration:none; color:var(--color-ink); transition:color 180ms; }
.cu-info-link:hover { color:var(--color-gold-dark); }

/* Map */
.cu-map-wrap { border:1px solid var(--color-line-warm); overflow:hidden; }
.cu-map { display:block; width:100%; min-height:460px; border:0; }

/* Social */
.cu-social-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--color-line-warm); border:1px solid var(--color-line-warm); }
.cu-social-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:36px 24px; background:var(--color-white); text-decoration:none;
    transition:background 180ms; text-align:center;
}
.cu-social-card:hover { background:var(--color-cream-2); }
.cu-social-icon { font-size:28px; color:var(--color-gold-dark); }
.cu-social-name { font-size:0.9375rem; font-weight:600; color:var(--color-ink); }
.cu-social-handle { font-size:0.75rem; color:var(--color-muted-soft); }
.cu-social-card--wa .cu-social-icon { color:var(--color-whatsapp); }

/* CTA */
.cu-cta-section { margin-bottom:0; }
.cu-cta-box {
    text-align:center; padding:60px 32px;
    background:#636464; color:var(--color-white);
}
.cu-cta-icon { font-size:40px; color:var(--color-gold); margin-bottom:16px; display:block; }
.cu-cta-heading { margin:0 0 14px; font-size:clamp(1.5rem,2.6vw,2.25rem); font-weight:600; color:var(--color-white); }
.cu-cta-lede { margin:0 auto 28px; max-width:50ch; font-size:0.9375rem; line-height:1.7; color:rgba(255,255,255,0.72); }
.cu-cta-actions { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.cu-wa-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; background:var(--color-whatsapp); color:var(--color-white);
    font-family:var(--font-body); font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    text-decoration:none; transition:background 200ms;
}
.cu-wa-btn:hover { background:var(--color-whatsapp-hover); color:var(--color-white); }

/* ─────────────────────────────────────────────────────────────────────────
   ABOUT US
   ───────────────────────────────────────────────────────────────────────── */

.ab-main { padding:40px 0 80px; }

/* Hero */
.ab-hero {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:48px; align-items:center; margin-bottom:80px;
    padding-bottom:64px; border-bottom:1px solid var(--color-line-warm);
}
.ab-eyebrow { margin:0 0 14px; letter-spacing:0.2em; color:var(--color-muted); }
.ab-hero-heading { margin:0 0 16px; font-size:clamp(2rem,4.4vw,3rem); font-weight:600; line-height:1.05; letter-spacing:-0.015em; color:var(--color-ink); }
.ab-hero-sub { margin:0; font-size:1.125rem; line-height:1.7; color:var(--color-muted); }
.ab-hero-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ab-hero-img-wrap .ab-img-placeholder { aspect-ratio:4/3; }

/* Story */
.ab-story-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.ab-story-img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.ab-story-img-wrap .ab-img-placeholder { aspect-ratio:3/4; }

/* Why choose us */
.ab-why-section { padding-top:64px; border-top:1px solid var(--color-line-warm); }
.ab-why-grid {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
    background:var(--color-line-warm); border:1px solid var(--color-line-warm);
}
.ab-why-card { background:var(--color-white); padding:32px 26px; }
.ab-why-icon { font-size:28px; color:var(--color-gold-dark); display:block; margin-bottom:16px; }
.ab-why-title { display:block; margin:0 0 10px; font-size:1.0625rem; font-weight:600; color:var(--color-ink); }
.ab-why-body { margin:0; font-size:0.8125rem; line-height:1.75; color:var(--color-muted); }

/* Values */
.ab-values-section { padding-top:64px; border-top:1px solid var(--color-line-warm); }
.ab-values-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
    background:var(--color-line-warm); border:1px solid var(--color-line-warm);
}
.ab-value-block { background:var(--color-white); padding:36px 28px; }
.ab-value-num { display:block; font-size:0.6875rem; font-weight:700; letter-spacing:0.18em; color:var(--color-gold-dark); margin-bottom:12px; }
.ab-value-title { display:block; margin:0 0 12px; font-size:1.25rem; font-weight:600; color:var(--color-ink); }
.ab-value-body { margin:0; font-size:0.875rem; line-height:1.8; color:var(--color-muted); }

/* Visit */
.ab-visit-section { padding-top:64px; border-top:1px solid var(--color-line-warm); }
.ab-visit-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:center; }
.ab-visit-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.ab-visit-img-wrap .ab-img-placeholder { aspect-ratio:16/9; }
.ab-hours {
    display:flex; align-items:center; gap:10px;
    margin:0 0 24px; font-size:0.9375rem; color:var(--color-muted);
}
.ab-hours-icon { font-size:18px; color:var(--color-gold-dark); }
.ab-visit-wa { margin-top:8px; }

/* CTA strip */
.ab-cta-section { margin-bottom:0; }

/* ─────────────────────────────────────────────────────────────────────────
   BUYING GUIDE
   ───────────────────────────────────────────────────────────────────────── */

.bg-main { padding:40px 0 80px; }

.bg-guide-section { padding-bottom:72px; border-bottom:1px solid var(--color-line-warm); }
.bg-guide-section:last-of-type { border-bottom:0; }

.bg-guide-head { display:flex; align-items:baseline; gap:16px; margin-bottom:40px; padding-bottom:14px; border-bottom:1px solid var(--color-line-warm); }
.bg-guide-num { font-size:1rem; letter-spacing:0.2em; color:var(--color-gold-dark); }
.bg-guide-title { margin:0; font-size:clamp(1.5rem,2.6vw,2.125rem); font-weight:600; color:var(--color-ink); }

.bg-section-lede { max-width:70ch; font-size:0.9375rem; line-height:1.8; color:var(--color-body); margin:0 0 40px; }

.bg-sub-section { margin-bottom:48px; }
.bg-sub-section:last-child { margin-bottom:0; }
.bg-sub-heading { margin:0 0 12px; font-size:clamp(1.125rem,1.8vw,1.375rem); font-weight:600; color:var(--color-ink); }
.bg-sub-lede { max-width:68ch; font-size:0.9375rem; line-height:1.8; color:var(--color-body); margin:0 0 24px; }

/* Face shapes */
.bg-face-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
    background:var(--color-line-warm); border:1px solid var(--color-line-warm); margin-bottom:4px;
}
.bg-face-card { background:var(--color-white); padding:22px 20px; }
.bg-face-shape { display:block; font-size:1rem; font-weight:600; color:var(--color-ink); margin-bottom:8px; }
.bg-face-rec { margin:0; font-size:0.8125rem; line-height:1.7; color:var(--color-muted); }

/* Size */
.bg-size-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
    background:var(--color-line-warm); border:1px solid var(--color-line-warm);
}
.bg-size-card { background:var(--color-white); padding:28px 24px; text-align:center; }
.bg-size-num { display:block; font-size:2.5rem; font-weight:600; letter-spacing:-0.02em; color:var(--color-ink); margin-bottom:6px; }
.bg-size-label { display:block; font-size:0.5625rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-gold-dark); margin-bottom:10px; }
.bg-size-desc { margin:0; font-size:0.8125rem; line-height:1.7; color:var(--color-muted); }

/* Lens comparison table */
.bg-table-wrap { overflow-x:auto; border:1px solid var(--color-line-warm); }
.bg-table { width:100%; border-collapse:collapse; font-size:0.875rem; }
.bg-table th {
    text-align:left; padding:14px 18px;
    font-size:0.5625rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--color-muted-soft); background:var(--color-cream-2);
    border-bottom:1px solid var(--color-line-warm);
}
.bg-table td { padding:14px 18px; color:var(--color-body); border-bottom:1px solid var(--color-line-warm); vertical-align:top; }
.bg-table tr:last-child td { border-bottom:0; }
.bg-table tr:hover td { background:var(--color-cream-3); }
.bg-td-index { font-weight:700; color:var(--color-ink); white-space:nowrap; }
.bg-td-stars { letter-spacing:2px; color:var(--color-gold-dark); }
.bg-td-note { color:var(--color-muted); font-size:0.8125rem; }

/* Coatings */
.bg-coat-grid { display:flex; flex-direction:column; gap:1px; background:var(--color-line-warm); border:1px solid var(--color-line-warm); }
.bg-coat-card { display:flex; align-items:flex-start; gap:18px; padding:20px 22px; background:var(--color-white); }
.bg-coat-icon { font-size:22px; color:var(--color-gold-dark); flex:none; margin-top:2px; }
.bg-coat-name { display:block; font-size:1rem; font-weight:600; color:var(--color-ink); margin-bottom:6px; }
.bg-coat-desc { margin:0; font-size:0.8125rem; line-height:1.75; color:var(--color-muted); }

/* Lifestyle */
.bg-life-grid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
    background:var(--color-line-warm); border:1px solid var(--color-line-warm);
}
.bg-life-card { background:var(--color-white); padding:28px 24px; }
.bg-life-icon { font-size:24px; color:var(--color-gold-dark); display:block; margin-bottom:12px; }
.bg-life-title { display:block; font-size:1rem; font-weight:600; color:var(--color-ink); margin-bottom:10px; }
.bg-life-rec { margin:0; font-size:0.8125rem; line-height:1.75; color:var(--color-muted); }

/* Need help */
.bg-help-section { border-bottom:0; }
.bg-help-inner { text-align:center; padding:56px 32px; background:var(--color-gold-tint); border:1px solid var(--color-gold-soft); }
.bg-help-icon { font-size:40px; color:var(--color-gold-dark); margin-bottom:16px; display:block; }
.bg-help-heading { margin:0 0 14px; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; color:var(--color-ink); }
.bg-help-lede { max-width:54ch; margin:0 auto 28px; font-size:0.9375rem; line-height:1.75; color:var(--color-body); }
.bg-help-actions { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.bg-visit-link {
    font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--color-ink); text-decoration:none; border-bottom:1px solid var(--color-ink); padding-bottom:3px;
    transition:color 200ms,border-color 200ms;
}
.bg-visit-link:hover { color:var(--color-gold-dark); border-color:var(--color-gold-dark); }
.bg-cta-section { margin-bottom:0; }

/* ─────────────────────────────────────────────────────────────────────────
   EYE EXAM
   ───────────────────────────────────────────────────────────────────────── */

.ee-main { padding:40px 0 80px; }
.ee-section { margin-bottom:72px; }
.ee-section-heading { margin:0 0 28px; font-size:clamp(1.375rem,2.2vw,1.875rem); font-weight:600; color:var(--color-ink); }

/* Steps — extend existing rp-steps with icon variant */
.ee-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ee-step-icon { font-size:22px; color:var(--color-gold-dark); flex:none; }

/* Booking section */
.ee-booking-section { padding-top:56px; border-top:1px solid var(--color-line-warm); }

/* FAQ */
.ee-faq { max-width:72ch; }
.ee-faq-q {
    margin:0; padding:20px 0 10px;
    font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--color-ink);
    border-top:1px solid var(--color-line-warm);
}
.ee-faq-q:first-child { border-top:0; padding-top:0; }
.ee-faq-a { margin:0 0 4px; padding:0 0 20px; font-size:0.9375rem; line-height:1.8; color:var(--color-body); }

.ee-cta-section { margin-bottom:0; }

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .ab-why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ee-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
    .cu-gallery { grid-template-columns:1fr; }
    .cu-gallery-img--main { aspect-ratio:16/9; }
    .cu-gallery-thumbs { grid-template-columns:repeat(4,1fr); }
    .cu-info-grid { grid-template-columns:1fr; }
    .cu-social-row { grid-template-columns:1fr; }

    .ab-hero { grid-template-columns:1fr; gap:32px; }
    .ab-story-grid { grid-template-columns:1fr; }
    .ab-values-grid { grid-template-columns:1fr; }
    .ab-visit-grid { grid-template-columns:1fr; }

    .bg-face-grid { grid-template-columns:repeat(2,1fr); }
    .bg-life-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px) {
    .ab-why-grid { grid-template-columns:1fr; }
    .bg-face-grid { grid-template-columns:1fr; }
    .bg-size-grid { grid-template-columns:1fr; }
    .bg-life-grid { grid-template-columns:1fr; }
    .ee-steps { grid-template-columns:1fr; }
    .cu-gallery-thumbs { grid-template-columns:repeat(2,1fr); }
    .cu-social-row { grid-template-columns:1fr; }
    .bg-table th, .bg-table td { padding:10px 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   BUYING GUIDE — blog-style prose  (add to css/pages.css)
   ═══════════════════════════════════════════════════════════════════════════ */

.bg-main { padding: 40px 0 0; }

/* ── Prose column ─────────────────────────────────────────────────────────── */
.bg-prose {
    max-width: 72ch;
    margin: 0 auto 80px;
    padding-bottom: 64px;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.bg-prose h2 {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 56px 0 16px;
    padding-top: 56px;
    border-top: 1px solid var(--color-line-warm);
}

.bg-prose h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.bg-prose h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin: 32px 0 10px;
}

.bg-prose h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    margin: 24px 0 8px;
}

/* ── Body text ────────────────────────────────────────────────────────────── */
.bg-prose p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--color-body);
    margin: 0 0 18px;
}

.bg-prose p:last-child { margin-bottom: 0; }

/* ── Lists ────────────────────────────────────────────────────────────────── */
.bg-prose ul,
.bg-prose ol {
    margin: 0 0 20px;
    padding-left: 1.4em;
}

.bg-prose li {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--color-body);
    margin-bottom: 6px;
}

.bg-prose ul li::marker { color: var(--color-gold-dark); }
.bg-prose ol li::marker { color: var(--color-gold-dark); font-weight: 600; }

/* ── Definition list — use for "Term: Description" pairs ─────────────────── */
.bg-prose dl { margin: 0 0 20px; }

.bg-prose dt {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-top: 14px;
}

.bg-prose dd {
    margin: 3px 0 0 0;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-muted);
    padding-left: 1em;
    border-left: 2px solid var(--color-gold-soft);
}

/* ── Blockquote — use for tips / callouts ─────────────────────────────────── */
.bg-prose blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--color-gold-tint);
    border-left: 3px solid var(--color-gold);
}

.bg-prose blockquote p {
    margin: 0;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--color-ink);
}

/* ── Horizontal rule — section divider ───────────────────────────────────── */
.bg-prose hr {
    border: none;
    border-top: 1px solid var(--color-line-warm);
    margin: 48px 0;
}

/* ── Table — lens comparison, size guide etc ─────────────────────────────── */
.bg-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 20px 0 28px;
}

.bg-prose thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-muted-soft);
    background: var(--color-cream-2);
    border-bottom: 1px solid var(--color-line-warm);
}

.bg-prose tbody td {
    padding: 12px 14px;
    color: var(--color-body);
    border-bottom: 1px solid var(--color-line-warm);
    vertical-align: top;
}

.bg-prose tbody tr:last-child td { border-bottom: none; }
.bg-prose tbody tr:hover td { background: var(--color-cream-3); }

/* ── Strong / em ──────────────────────────────────────────────────────────── */
.bg-prose strong { font-weight: 600; color: var(--color-ink); }
.bg-prose em     { font-style: italic; color: var(--color-muted); }

/* ── Links ────────────────────────────────────────────────────────────────── */
.bg-prose a {
    color: var(--color-brand-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 180ms;
}
.bg-prose a:hover { color: var(--color-gold-dark); }

/* ── CTA strip at bottom ──────────────────────────────────────────────────── */
.bg-cta-strip {
    border-top: 1px solid var(--color-line-warm);
    padding: 56px 0 80px;
}

.bg-cta-inner {
    max-width: 72ch;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.bg-cta-text { flex: 1; min-width: 0; }

.bg-cta-heading {
    margin: 0 0 8px;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: var(--color-ink);
}

.bg-cta-lede {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.bg-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    flex-wrap: wrap;
}

.bg-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 22px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--color-whatsapp);
    text-decoration: none;
    transition: background 200ms;
}
.bg-wa-btn:hover {
    background: var(--color-whatsapp-hover);
    color: var(--color-white);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .bg-prose { margin-bottom: 56px; }
    .bg-cta-inner { flex-direction: column; align-items: flex-start; }
    .bg-cta-actions { width: 100%; }
    .bg-prose table { font-size: 0.8125rem; }
    .bg-prose thead th,
    .bg-prose tbody td { padding: 10px 10px; }
}