/* AdMart Technology — brand design system (layers on top of Bootstrap 5) */

:root {
  --navy: #0A2540;
  --royal: #1565C0;
  --sky: #42A5F5;
  --success: #2E7D32;
  --warning: #F59E0B;
  --warning-text: #A36907; /* darker amber for text on light backgrounds - #F59E0B fails WCAG AA (2.15:1) as text */
  --danger: #D32F2F;
  --bg: #F5F7FA;
  --text: #1E293B;
  --white: #FFFFFF;
  --border: #E2E8F0;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 37, 64, 0.16);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 { color: var(--navy); font-weight: 700; letter-spacing: -0.02em; }

a { color: var(--royal); text-decoration: none; }
a:hover { color: var(--sky); }

/* Baseline keyboard-focus ring for every interactive element that doesn't
   already define its own focus treatment (form fields, search bars, tabs).
   :focus-visible only fires for keyboard/programmatic focus, not mouse
   clicks, so it doesn't add visual noise to pointer users. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 2px;
}

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy); color: var(--white);
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Header */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: sticky; top: 0; z-index: 100; }
.site-header__main { background: var(--white); border-bottom: 1px solid var(--border); }
.site-header__main-inner { display: flex; align-items: center; gap: 20px; padding: 14px 20px; }

.brand { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 1.25rem; color: var(--navy); flex-shrink: 0; }
.brand__mark {
  background: linear-gradient(135deg, var(--royal), var(--sky));
  color: var(--white); padding: 4px 8px; border-radius: 8px; font-weight: 800;
}
.brand__name { color: var(--navy); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; }

/* Desktop search bar */
.header-search { flex: 1; display: flex; align-items: stretch; max-width: 640px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.header-search__type { border: none; border-right: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; padding: 0 10px; font-weight: 600; }
.header-search__input { flex: 1; border: none; padding: 11px 14px; font-size: 0.95rem; outline: none; min-width: 0; }
.header-search__submit { border: none; background: var(--royal); color: var(--white); padding: 0 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.header-search__submit:hover { background: #0d4c94; }
.header-search:focus-within { box-shadow: 0 0 0 2px var(--royal); }
.header-search--mobile { display: none; }

.header-icons--mobile { display: none; margin-left: auto; }

/* Desktop account / wishlist / cart cluster */
.header-account { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.header-account__orders,
.header-account__toggle {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.15;
  padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--text);
  font-family: inherit;
}
.header-account__orders:hover, .header-account__toggle:hover { border-color: var(--border); background: var(--bg); }
.header-account__line1 { font-size: 0.72rem; color: #64748B; }
.header-account__line2 { font-size: 0.86rem; font-weight: 700; color: var(--navy); }
.header-account__menu { min-width: 260px; padding: 8px; border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.header-account__menu-heading { font-weight: 700; color: var(--navy); padding: 8px 12px 4px; }
.header-account__menu .dropdown-item { padding: 8px 12px; border-radius: 6px; font-weight: 500; }
.header-account__menu .dropdown-item:hover { background: rgba(21,101,192,0.08); color: var(--royal); }
.header-account__menu .badge { margin-left: 6px; }
.header-account__logout-form { margin: 0; }
.header-account__logout { width: 100%; text-align: left; border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--danger); font-weight: 600; }
.header-account__signin { margin: 4px 12px 8px; width: calc(100% - 24px); }
.header-account__new { font-size: 0.82rem; color: #64748B; text-align: center; margin: 0 0 6px; }

.header-account__icon-link { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 8px; color: var(--navy); }
.header-account__icon-link:hover { background: var(--bg); color: var(--royal); }
.header-account__cart-label { font-weight: 700; font-size: 0.86rem; }
.header-icon__badge {
  position: absolute; top: -2px; right: -2px; background: var(--warning); color: var(--navy);
  font-size: 0.65rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--white);
}
.header-icon__badge--cart { background: var(--danger); color: var(--white); }
.header-account__cart .header-icon__badge { top: -4px; right: 10px; }

/* Platform Safety Initiative, Phase 10: notification bell live-preview dropdown */
.notification-bell__toggle .header-icon__badge { top: -4px; right: -4px; }
.notification-bell__menu { min-width: 320px; max-width: 360px; padding: 0; border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden; }
.notification-bell__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--border); }
.notification-bell__head form { margin: 0; }
.notification-bell__mark-all { background: none; border: none; color: var(--royal); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; }
.notification-bell__mark-all:hover { text-decoration: underline; }
.notification-bell__list { max-height: 360px; overflow-y: auto; }
.notification-bell__item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.notification-bell__item:last-child { border-bottom: none; }
.notification-bell__item:hover { background: var(--bg); }
.notification-bell__item--unread { background: rgba(21,101,192,0.05); }
.notification-bell__item strong { display: block; font-size: 0.88rem; color: var(--navy); }
.notification-bell__item p { margin: 3px 0 0; font-size: 0.82rem; color: #64748B; }
.notification-bell__item-time { display: block; margin-top: 4px; font-size: 0.72rem; color: #94A3B8; }
.notification-bell__empty { padding: 24px 14px; text-align: center; color: #64748B; font-size: 0.88rem; }
.notification-bell__view-all { display: block; text-align: center; padding: 10px 14px; font-size: 0.85rem; font-weight: 600; color: var(--royal); border-top: 1px solid var(--border); background: var(--bg); }
.notification-bell__view-all:hover { background: rgba(21,101,192,0.08); }

/* Second row: horizontally-scrollable browse/category strip */
.site-header__categories { background: var(--navy); overflow: hidden; position: relative; }
.site-header__categories-inner {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding: 0 20px; max-width: 1200px; margin: 0 auto;
}
/* Fade hint so a row that scrolls further doesn't look like it just ends. */
.site-header__categories::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(90deg, transparent, var(--navy)); pointer-events: none;
}

/* Generic horizontally-scrollable chip row (quick category nav, etc.) on a
   light section background - same fade-hint idea as the header browse row. */
.chip-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; position: relative; }
.chip-row a { white-space: nowrap; flex-shrink: 0; }
.chip-row-wrap { position: relative; }
.chip-row-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 4px; width: 28px;
  background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none;
}
.site-header__categories-inner::-webkit-scrollbar { height: 4px; }
.site-header__categories-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
.site-header__category-link {
  color: #E2E8F0; font-size: 0.85rem; font-weight: 600; padding: 10px 14px; white-space: nowrap; flex-shrink: 0; border-bottom: 2px solid transparent;
}
.site-header__category-link:hover, .site-header__category-link.active { color: var(--white); background: rgba(255,255,255,0.08); border-bottom-color: var(--sky); }

/* Mobile drawer */
.mobile-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(10, 37, 64, 0.5); z-index: 199;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.mobile-drawer-backdrop.open { opacity: 1; visibility: visible; }
.mobile-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 86%; max-width: 340px; background: var(--white);
  z-index: 200; box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mobile-drawer__close { background: none; border: none; cursor: pointer; padding: 8px; color: var(--navy); border-radius: 8px; }
.mobile-drawer__close:hover { background: var(--bg); }
.mobile-drawer__user { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mobile-drawer__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), #0B75CB); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
.mobile-drawer__user-name { font-weight: 700; color: var(--navy); }
.mobile-drawer__user-email { font-size: 0.8rem; color: #64748B; word-break: break-all; }
.mobile-drawer__nav { display: flex; flex-direction: column; padding: 8px; }
.mobile-drawer__link {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 8px; color: var(--text); font-weight: 500; position: relative;
}
.mobile-drawer__link:hover, .mobile-drawer__link.active { background: rgba(21,101,192,0.08); color: var(--royal); }
.mobile-drawer__link-icon { flex-shrink: 0; color: #64748B; }
.mobile-drawer__link:hover .mobile-drawer__link-icon, .mobile-drawer__link.active .mobile-drawer__link-icon { color: var(--royal); }
.mobile-drawer__link-badge { margin-left: auto; }
.mobile-drawer__divider { height: 1px; background: var(--border); margin: 4px 16px; flex-shrink: 0; }
.mobile-drawer__footer { margin-top: auto; padding: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.mobile-drawer__footer form { margin: 0; }
.mobile-drawer__logout {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: 8px;
  border: 1px solid var(--danger); background: #FEF2F2; color: var(--danger); font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit;
}
.mobile-drawer__logout:hover { background: var(--danger); color: var(--white); }
body.drawer-open { overflow: hidden; }

@media (min-width: 721px) {
  .mobile-drawer, .mobile-drawer-backdrop { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; padding: 10px 20px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; }
.btn-primary { background: var(--royal); color: var(--white); }
.btn-primary:hover { background: #0d4c94; color: var(--white); }
.btn-outline { border-color: var(--border); color: var(--navy); background: var(--white); }
.btn-outline:hover { border-color: var(--royal); color: var(--royal); }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; border-radius: 10px; }
.btn-block { width: 100%; }

/* Alerts */
.alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-left: 4px solid var(--royal); background: #EFF6FF; margin: 0; }
.alert--success { border-color: var(--success); background: #ECFDF5; }
.alert--error { border-color: var(--danger); background: #FEF2F2; }
.alert--warning { border-color: var(--warning-text); background: #FFFBEB; }
.alert--info { border-color: var(--royal); background: #EFF6FF; }
.alert__close { background: none; border: none; font-size: 1.2rem; cursor: pointer; line-height: 1; color: inherit; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--navy) 0%, #123a63 60%, var(--royal) 100%); color: var(--white); padding: 88px 0 96px; }
.hero__eyebrow { color: var(--sky); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 3.25rem); margin: 12px 0 16px; max-width: 780px; }
.hero p.lead { color: #CBD5E1; font-size: 1.15rem; max-width: 620px; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.search-bar { background: var(--white); border-radius: var(--radius); padding: 8px; display: flex; gap: 8px; box-shadow: var(--shadow-lg); max-width: 640px; }
.search-bar input { flex: 1; min-width: 0; border: none; padding: 12px 16px; font-size: 1rem; border-radius: 8px; outline: none; }
.search-bar button { border-radius: 8px; }
.search-bar:focus-within { box-shadow: var(--shadow-lg), 0 0 0 2px var(--royal); }

/* Sections */
.section { padding: 72px 0; }
.section--alt { background: var(--white); }
.section__header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section__eyebrow { color: var(--royal); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
.section__header p { color: #64748B; }

.grid { display: grid; gap: 24px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Email Marketing System, Phase 30 (Mobile Responsiveness): wraps a wide
   data table so it scrolls horizontally within its own box on narrow
   viewports instead of forcing the whole page to scroll sideways. Additive
   utility class, applied only to tables added by this initiative - no
   existing page's markup was changed to use it. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.category-card { text-align: center; padding: 28px 16px; }
.category-card__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 12px; background: rgba(21,101,192,0.1); display: flex; align-items: center; justify-content: center; color: var(--royal); font-weight: 700; font-size: 1.3rem; }

.product-card__image { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--sky), var(--royal)); border-radius: 8px; margin: -24px -24px 16px; }
.product-card__price { font-weight: 700; color: var(--navy); font-size: 1.1rem; }
.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(46,125,50,0.06); color: var(--success); text-transform: uppercase; letter-spacing: 0.04em; }

.plan-card { display: flex; flex-direction: column; }
.plan-card__price { font-size: 2rem; font-weight: 800; color: var(--navy); margin: 8px 0 4px; }
.plan-card__price span { font-size: 0.95rem; font-weight: 500; color: #64748B; }
.plan-card ul { list-style: none; padding: 0; margin: 20px 0; flex: 1; }
.plan-card li { padding: 6px 0; padding-left: 26px; position: relative; color: #475569; }
.plan-card li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.plan-card--featured { border-color: var(--royal); box-shadow: var(--shadow-md); position: relative; }
.plan-card__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--royal); color: var(--white); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 14px; border-radius: 999px;
}
.plan-card li.plan-card__item--excluded { color: #94A3B8; }
.plan-card li.plan-card__item--excluded::before { content: '\2715'; color: var(--danger); }

.step-card { text-align: center; }
.step-card__num { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 16px; }

.testimonial { background: var(--white); border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); }
.testimonial__quote { font-style: italic; color: #334155; }
.testimonial__author { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; }
.testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--royal)); }

.cta-band { background: var(--navy); color: var(--white); border-radius: var(--radius); padding: 56px; text-align: center; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #CBD5E1; }

.newsletter-form { display: flex; gap: 10px; max-width: 480px; margin: 20px auto 0; }
.newsletter-form input { flex: 1; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border); }

/* Forms */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.form-control { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; font-family: inherit; }
.form-control:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(21,101,192,0.15); }
.form-error { color: var(--danger); font-size: 0.85rem; margin-top: 4px; }
.form-hint { color: #64748B; font-size: 0.85rem; margin-top: 4px; }

.page-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 48px 0; }
.page-hero h1 { margin: 0 0 8px; }
.page-hero p { color: #64748B; max-width: 620px; margin: 0; }

.empty-state { text-align: center; padding: 64px 20px; color: #64748B; }

/* Footer */
/* Newsletter signup band (Email Marketing System, Phase 2) - two variants,
   one shared markup/JS (includes/newsletter-signup.php,
   assets/js/newsletter-signup.js). `--compact` is the light, low-key band
   used inline within a page's own content; `--community` is the more
   prominent feature treatment used once per page via includes/footer.php,
   just above the footer itself. */
.newsletter-signup { padding: 48px 0; text-align: center; }
.newsletter-signup__inner { max-width: 560px; margin: 0 auto; }
.newsletter-signup__title { margin: 4px 0 8px; }
.newsletter-signup__subtitle { color: #64748B; margin: 0 0 20px; }
.newsletter-signup__row { display: flex; gap: 10px; }
.newsletter-signup__input { flex: 1; min-width: 0; }
.newsletter-signup__submit { white-space: nowrap; }
.newsletter-signup__status { margin: 14px 0 0; text-align: left; }

.newsletter-signup--compact { background: var(--white); }
.newsletter-signup--community {
  padding: 56px 0;
  background: linear-gradient(135deg, var(--navy), var(--royal));
}
.newsletter-signup--community .newsletter-signup__title,
.newsletter-signup--community .section__eyebrow { color: var(--white); }
.newsletter-signup--community .newsletter-signup__subtitle { color: rgba(255,255,255,0.85); }

@media (max-width: 480px) {
  .newsletter-signup__row { flex-direction: column; }
  .newsletter-signup__submit { width: 100%; }
}

/* includes/footer.php places the community-variant band immediately
   before <footer> on every page - collapse the footer's own top margin
   in that one case so the two navy/royal sections sit flush against each
   other instead of showing a gap of the page's light background between
   them. `.site-footer` keeps its normal margin-top anywhere else. */
.newsletter-signup + .site-footer { margin-top: 0; }

.site-footer { background: var(--navy); color: #CBD5E1; padding: 56px 0 0; margin-top: 80px; }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.brand--footer { color: var(--white); }
.site-footer__tagline { color: #94A3B8; margin-top: 8px; }
.site-footer__col h4 { color: var(--white); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; }
.site-footer__col a { display: block; color: #94A3B8; padding: 4px 0; }
.site-footer__col a:hover { color: var(--sky); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px; text-align: center; color: #64748B; font-size: 0.85rem; }
.site-footer__bottom a { color: #94A3B8; font-size: 0.82rem; }
.site-footer__bottom a:hover { color: var(--sky); }

/* Dashboard sidebar (Phase 11+) */
.dashboard-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }

/* Platform QA Initiative, Phase 17: cart.php and checkout.php both had this
   exact two-column grid as an inline style (main content + order-summary
   sidebar) with no responsive override possible on inline styles - at
   mobile widths the sidebar was squeezed into ~40% of a narrow viewport
   instead of stacking below, causing overlapping/truncated text (coupon
   and gift-card inputs cut to "Co[de]"/"Gi[ft]") and hidden buttons.
   Extracted to a real class, same 900px collapse breakpoint already used
   by .dashboard-layout just above, so both pages share one fix. */
.cart-checkout-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; }
.dashboard-sidebar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; height: fit-content; }
.dashboard-sidebar__link { display: block; padding: 10px 14px; border-radius: 8px; color: var(--text); font-weight: 500; }
.dashboard-sidebar__link:hover, .dashboard-sidebar__link.active { background: rgba(21,101,192,0.08); color: var(--royal); }

/* Error pages */
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.error-page__code { font-size: 5rem; font-weight: 800; color: var(--royal); line-height: 1; }

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .cart-checkout-layout { grid-template-columns: 1fr; }
}

/* ===================================================================
   Phase 2: colorful marketplace homepage — banner carousel, category
   cards, horizontal product/service carousels, quick view modal
   =================================================================== */

/* Promotional banner carousel */
.banner-carousel { position: relative; overflow: hidden; border-radius: var(--radius); }
.banner-carousel__track { display: flex; transition: transform .5s ease; }
.banner-carousel__slide {
  flex: 0 0 100%; min-height: 320px; display: flex; align-items: center; color: var(--white);
  padding: 48px; position: relative; overflow: hidden;
}
.banner-carousel__slide::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 30%, rgba(255,255,255,0.14), transparent 55%); pointer-events: none; }
.banner-carousel__content { max-width: 520px; position: relative; z-index: 1; }
.banner-carousel__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.85); }
.banner-carousel__slide h2 { color: var(--white); font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin: 8px 0 12px; }
.banner-carousel__slide p { color: rgba(255,255,255,0.9); font-size: 1.02rem; margin: 0 0 22px; }
.banner-carousel__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.banner-carousel__actions .btn-outline { border-color: rgba(255,255,255,0.6); color: var(--white); background: transparent; }
.banner-carousel__actions .btn-outline:hover { background: rgba(255,255,255,0.12); }
.banner-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: none; color: var(--navy); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-md); transition: background .15s ease;
}
.banner-carousel__arrow:hover { background: var(--white); }
.banner-carousel__arrow--prev { left: 16px; }
.banner-carousel__arrow--next { right: 16px; }
.banner-carousel__arrow[disabled] { opacity: 0.35; cursor: default; }
.banner-carousel__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.banner-carousel__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; }
.banner-carousel__dot.active { background: var(--white); width: 22px; border-radius: 5px; }

/* Colorful category cards */
.cat-card {
  display: flex; flex-direction: column; padding: 22px; border-radius: var(--radius); color: var(--white);
  position: relative; overflow: hidden; min-height: 240px; border: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cat-card__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.cat-card::before {
  content: ''; position: absolute; inset: 0; background: rgba(10, 37, 64, 0.18); pointer-events: none;
}
.cat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,37,64,0.08) 0%, rgba(10,37,64,0.22) 100%); pointer-events: none; }
.cat-card > * { position: relative; z-index: 1; }
.cat-card__icon-wrap { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.3rem; font-weight: 800; }
.cat-card h3 { color: var(--white); font-size: 1.05rem; margin: 0 0 4px; }
.cat-card p { color: rgba(255,255,255,0.95); font-size: 0.82rem; margin: 0 0 16px; flex: 1; }
.cat-card__cta { align-self: flex-start; font-size: 0.82rem; font-weight: 700; color: var(--white); border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 6px 14px; }
.cat-card__cta:hover { background: rgba(255,255,255,0.18); color: var(--white); }

/* Light gradient stops are darkened from their original pastel values so
   white card text keeps at least 4.5:1 contrast (WCAG AA) even at the
   lightest corner - see Phase 6 contrast audit. */
.cat-card--blue { background: linear-gradient(135deg, #1565C0, #0B75CB); }
.cat-card--purple { background: linear-gradient(135deg, #6D28D9, #7E55F8); }
.cat-card--navy { background: linear-gradient(135deg, #0A2540, #1E3A5F); }
.cat-card--sky { background: linear-gradient(135deg, #0284C7, #067BAF); }
.cat-card--orange { background: linear-gradient(135deg, #EA580C, #B95504); }
.cat-card--teal { background: linear-gradient(135deg, #0D9488, #1A8174); }
.cat-card--indigo { background: linear-gradient(135deg, #4338CA, #5664F6); }
.cat-card--cyan { background: linear-gradient(135deg, #0891B2, #0B7E90); }
.cat-card--pink { background: linear-gradient(135deg, #DB2777, #DF117D); }
.cat-card--green { background: linear-gradient(135deg, #15803D, #188640); }
.cat-card--red { background: linear-gradient(135deg, #B91C1C, #E80B0B); }
.cat-card--amber { background: linear-gradient(135deg, #B45309, #986E03); }

.cat-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* Full category card (categories.php) - colorful gradient header identical
   to the homepage's cat-card, with a white body listing subcategories so
   the same color language extends to a page that needs more detail than
   the homepage teaser cards. */
.cat-card-full { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.cat-card-full__header { padding: 20px 22px; color: var(--white); position: relative; overflow: hidden; }
.cat-card-full__header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 100%, rgba(255,255,255,0.16), transparent 60%); pointer-events: none; }
.cat-card-full__header .cat-card__icon-wrap { margin-bottom: 10px; }
.cat-card-full__header h3 { color: var(--white); margin: 0; font-size: 1.05rem; position: relative; z-index: 1; }
.cat-card-full__header a { color: var(--white); }
.cat-card-full__body { padding: 14px 22px 18px; flex: 1; }
.cat-card-full__body ul { list-style: none; padding: 0; margin: 0; }
.cat-card-full__body li { padding: 6px 0; font-size: 0.88rem; border-bottom: 1px solid var(--border); }
.cat-card-full__body li:last-child { border-bottom: none; }
.cat-card-full__body li a { color: var(--text); }
.cat-card-full__body li a:hover { color: var(--royal); }
.cat-card-full__body li span { color: #94A3B8; font-size: 0.82rem; }
.cat-card-full__empty { color: #94A3B8; font-size: 0.85rem; padding: 6px 0; }

/* Vendor directory card (marketplace/vendors.php) - matches the mkt-card
   family's badge/verified-checkmark treatment instead of ad-hoc styling. */
.vendor-card { display: block; color: inherit; padding: 20px; }
.vendor-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vendor-card__logo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.vendor-card__name { font-size: 1rem; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.vendor-card__country { color: #64748B; font-size: 0.82rem; margin: 0; }
.vendor-card__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.vendor-card__rating { font-size: 0.85rem; color: #64748B; margin: 0 0 6px; }
.vendor-card__meta { font-size: 0.82rem; color: #64748B; margin: 0; }

/* ==========================================================================
   Marketplace Densification Initiative, Phase 4: Amazon-density-inspired
   merchandising cards (includes/marketplace-cards.php's admart_render_*
   catalog functions). One card type per file section below - all reuse the
   site's existing .card/.cat-card--* color system rather than introducing
   a second palette.
   ========================================================================== */

/* Catalog tile card - a title + up to 4 image tiles + "Shop more" link
   (Amazon-style "Tech Essentials" card). Desktop: 2x2 internal grid.
   Tablet/mobile: collapses to fewer columns via the existing grid--4
   breakpoint rules, no separate media query needed. */
.catalog-card { display: flex; flex-direction: column; padding: 20px; }
.catalog-card__title { font-size: 1rem; margin: 0 0 14px; font-weight: 700; }
.catalog-card__tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: min-content; gap: 14px 10px; flex: 1; align-content: start; }
.catalog-card__tile { display: block; color: inherit; text-align: center; }
.catalog-card__tile-media { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #F1F5F9; margin-bottom: 6px; }
.catalog-card__tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.catalog-card__tile:hover .catalog-card__tile-media img { transform: scale(1.05); }
.catalog-card__tile-label { font-size: 0.78rem; color: var(--text); line-height: 1.3; display: block; min-height: 2.6em; }
.catalog-card__more { margin-top: 16px; font-size: 0.85rem; font-weight: 600; color: var(--royal); display: inline-block; }
.catalog-card__more:hover { text-decoration: underline; }

/* Large feature card - one big image, short copy, single CTA. */
.feature-card { position: relative; border-radius: var(--radius); overflow: hidden; color: var(--white); min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; box-shadow: var(--shadow-sm); }
.feature-card__media { position: absolute; inset: 0; z-index: 0; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Full darkening, not just a bottom fade - the demo product images used as
   feature-card backdrops are gradient placeholders with their own baked-in
   text label (generate_demo_images.php), which double-exposes with the
   card's own title/description unless the overlay covers the whole image,
   not just its lower third. Real photos look fine under this too. */
.feature-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,37,64,0.5) 0%, rgba(10,37,64,1) 30%, rgba(10,37,64,1) 100%); }
.feature-card__body { position: relative; z-index: 1; }
.feature-card__eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin: 0 0 6px; }
.feature-card__title { font-size: 1.4rem; margin: 0 0 8px; color: var(--white); }
.feature-card__desc { font-size: 0.9rem; opacity: .92; margin: 0 0 16px; max-width: 480px; }
.feature-card__cta { display: inline-block; }

/* Deal card - title + up to 4 compact product tiles with discount badge. */
.deal-card { display: flex; flex-direction: column; padding: 20px; }
.deal-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 10px; }
.deal-card__title { font-size: 1rem; margin: 0; font-weight: 700; }
.deal-card__more { font-size: 0.82rem; font-weight: 600; color: var(--royal); white-space: nowrap; }
.deal-card__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.deal-card__tile { display: block; color: inherit; position: relative; }
.deal-card__tile-media { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #F1F5F9; position: relative; }
.deal-card__tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deal-card__tile-badge { position: absolute; top: 6px; left: 6px; background: var(--danger); color: var(--white); font-size: 0.68rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; z-index: 1; }
.deal-card__tile-price { font-size: 0.8rem; margin: 6px 0 0; }
.deal-card__tile-price .strike { color: #94A3B8; text-decoration: line-through; font-size: 0.72rem; margin-left: 4px; }

/* Vendor catalog card - title + up to 4 vendor tiles (logo/name/badge). */
.vendor-catalog-card { display: flex; flex-direction: column; padding: 20px; }
.vendor-catalog-card__title { font-size: 1rem; margin: 0 0 14px; font-weight: 700; }
.vendor-catalog-card__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; flex: 1; }
.vendor-catalog-card__tile { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; gap: 6px; }
.vendor-catalog-card__logo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.vendor-catalog-card__logo-fallback { width: 64px; height: 64px; border-radius: 12px; background: rgba(21,101,192,0.1); color: var(--royal); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.vendor-catalog-card__name { font-size: 0.8rem; line-height: 1.25; display: flex; align-items: center; gap: 3px; justify-content: center; }
.vendor-catalog-card__more { margin-top: 14px; font-size: 0.85rem; font-weight: 600; color: var(--royal); }

/* Marketplace Densification Initiative, Phase 8: Vendor Spotlight - a
   full-width "Discover {Vendor}" module (banner, logo, name, verified
   badge, rating, category, up to 4 real sample listings, Visit Store +
   Follow) - distinct from the compact 4-logo vendor-catalog-card above,
   which is a merchandising tile, not a single-vendor feature module. */
.vendor-spotlight { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.vendor-spotlight__banner { height: 140px; background-size: cover; background-position: center; background-color: var(--navy); position: relative; }
.vendor-spotlight__banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,37,64,0.1) 0%, rgba(10,37,64,0.55) 100%); }
.vendor-spotlight__header { display: flex; align-items: flex-end; gap: 16px; padding: 0 24px; margin-top: -40px; position: relative; z-index: 1; flex-wrap: wrap; }
.vendor-spotlight__logo { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; border: 3px solid var(--white); background: var(--white); flex-shrink: 0; }
.vendor-spotlight__logo-fallback { width: 80px; height: 80px; border-radius: 16px; border: 3px solid var(--white); background: rgba(21,101,192,0.1); color: var(--royal); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.6rem; flex-shrink: 0; }
.vendor-spotlight__identity { flex: 1; min-width: 200px; padding-bottom: 6px; }
.vendor-spotlight__eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--royal); margin: 0 0 2px; }
.vendor-spotlight__name { font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: 6px; }
.vendor-spotlight__meta { color: #64748B; font-size: 0.85rem; margin: 4px 0 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vendor-spotlight__actions { display: flex; gap: 8px; padding-bottom: 6px; }
.vendor-spotlight__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px 24px; }
.vendor-spotlight__item { display: block; color: inherit; text-align: center; }
.vendor-spotlight__item-media { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #F1F5F9; display: block; margin-bottom: 6px; }
.vendor-spotlight__item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vendor-spotlight__item-title { font-size: 0.8rem; line-height: 1.3; display: block; }
.vendor-spotlight__item-price { font-size: 0.8rem; font-weight: 700; color: var(--navy); margin: 2px 0 0; }

@media (max-width: 640px) {
  .catalog-card__tiles, .deal-card__tiles, .vendor-catalog-card__tiles { grid-template-columns: repeat(2, 1fr); }
  .feature-card { min-height: 220px; padding: 20px; }
  .feature-card__title { font-size: 1.15rem; }
  .vendor-spotlight__items { grid-template-columns: repeat(2, 1fr); }
  .vendor-spotlight__actions { width: 100%; }
  .vendor-spotlight__actions form, .vendor-spotlight__actions a { flex: 1; }
}

/* Horizontal carousel engine (products/services/promos) */
.hz-carousel { position: relative; }
.hz-carousel__viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hz-carousel__viewport::-webkit-scrollbar { display: none; }
.hz-carousel__track { display: flex; gap: 20px; }
.hz-carousel__item { flex: 0 0 calc((100% - 5 * 20px) / 6); scroll-snap-align: start; min-width: 0; }
.hz-carousel__arrow {
  position: absolute; top: 40%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border); color: var(--navy); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-md); transition: opacity .15s ease, transform .15s ease;
}
.hz-carousel__arrow:hover { transform: translateY(-50%) scale(1.06); color: var(--royal); }
.hz-carousel__arrow--prev { left: -18px; }
.hz-carousel__arrow--next { right: -18px; }
.hz-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }

/* Product / service cards (Phase 2) */
.mkt-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; min-width: 0; }
.mkt-card__media { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--sky), var(--royal)); overflow: hidden; }
.mkt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mkt-card:hover .mkt-card__media img { transform: scale(1.06); }
.mkt-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 1; }
.mkt-card__badge { font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.mkt-card__badge--sale { background: var(--danger); color: var(--white); }
.mkt-card__badge--featured { background: var(--warning); color: var(--navy); }
.mkt-card__badge--new { background: var(--success); color: var(--white); }
.mkt-card__wishlist {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.92);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); z-index: 1; padding: 0;
}
.mkt-card__wishlist:hover { background: var(--white); color: var(--danger); }
.mkt-card__wishlist.active { color: var(--danger); }
.mkt-card__wishlist.active svg { fill: currentColor; }
.mkt-card__quickview {
  position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: center; padding: 8px; border-radius: 8px;
  background: rgba(10,37,64,0.85); color: var(--white); font-size: 0.78rem; font-weight: 700; border: none; cursor: pointer;
  opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; z-index: 1;
}
.mkt-card:hover .mkt-card__quickview { opacity: 1; transform: translateY(0); }
.mkt-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.mkt-card__vendor { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: #64748B; margin: 0 0 4px; }
.mkt-card__verified { color: var(--royal); display: inline-flex; }
.mkt-card__title {
  font-size: 0.95rem; font-weight: 600; color: var(--navy); margin: 0 0 6px; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; line-height: 1.3;
}
.mkt-card__title:hover { color: var(--royal); }
.mkt-card__rating { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: #64748B; margin-bottom: 6px; }
.mkt-card__rating strong { color: var(--navy); }
.mkt-card__stars { color: var(--warning-text); letter-spacing: -1px; }
.mkt-card__price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.mkt-card__price { font-size: 1.08rem; font-weight: 800; color: var(--navy); }
.mkt-card__price--from { font-size: 0.72rem; font-weight: 600; color: #64748B; text-transform: uppercase; }
.mkt-card__price-original { font-size: 0.82rem; color: #94A3B8; text-decoration: line-through; }
.mkt-card__discount { font-size: 0.72rem; font-weight: 800; color: var(--danger); }
.mkt-card__stock { font-size: 0.76rem; font-weight: 600; margin-bottom: 8px; }
.mkt-card__stock--in { color: var(--success); }
.mkt-card__stock--low { color: var(--warning-text); }
.mkt-card__stock--out { color: var(--danger); }
.mkt-card__meta { font-size: 0.76rem; color: #94A3B8; margin-bottom: 10px; }
.mkt-card__actions { margin-top: auto; display: flex; gap: 8px; }
.mkt-card__actions form { flex: 1; margin: 0; min-width: 0; }
.mkt-card__btn {
  width: 100%; padding: 8px 10px; border-radius: 7px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--royal); background: var(--royal); color: var(--white); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mkt-card__btn:hover { background: #0d4c94; }
.mkt-card__btn--outline { background: var(--white); color: var(--royal); }
.mkt-card__btn--outline:hover { background: rgba(21,101,192,0.08); }

@media (max-width: 480px) {
  /* Side-by-side Cart/View no longer fit a 2-up mobile card without
     squeezing one button's label unreadably - stack them instead. */
  .mkt-card__actions { flex-direction: column; }
}

/* Quick View modal content */
.qv-modal__body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.qv-modal__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.qv-modal__title { font-size: 1.2rem; margin: 0 0 8px; }
.qv-modal__desc { color: #64748B; font-size: 0.9rem; margin: 12px 0; }

/* Marketplace browse/search page (Phase 3) */
.search-hero { background: linear-gradient(120deg, var(--navy), var(--royal)); padding: 36px 0 30px; color: var(--white); }
.search-hero h1 { color: var(--white); margin: 10px 0 0; font-size: 1.8rem; }
.search-hero .search-bar { box-shadow: var(--shadow-lg); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: rgba(255,255,255,0.75); }
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.breadcrumb span { color: rgba(255,255,255,0.5); }

.search-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.search-filters { position: sticky; top: 84px; }
.search-filters-toggle-btn { display: none; margin-bottom: 16px; align-items: center; gap: 8px; }
.search-filters-toggle-checkbox { display: none; }
.search-filters-toggle-checkbox:focus-visible ~ .search-filters-toggle-btn { outline: 2px solid var(--royal); outline-offset: 2px; }

.search-results__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle__btn { padding: 7px 10px; background: var(--white); color: #64748B; display: flex; align-items: center; border-right: 1px solid var(--border); }
.view-toggle__btn:last-child { border-right: none; }
.view-toggle__btn.active { background: var(--royal); color: var(--white); }
.view-toggle__btn:hover:not(.active) { background: var(--bg); }

/* Location scope filters (IP Geolocation Phase 3) - Nearby / Same Country /
   International / Worldwide, on marketplace/search.php and vendors.php. */
.location-scope-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.location-scope-filters__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--text); font-size: 0.85rem; font-weight: 600;
}
.location-scope-filters__chip:hover { border-color: var(--royal); color: var(--royal); }
.location-scope-filters__chip.active { background: var(--royal); border-color: var(--royal); color: var(--white); }

.search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.search-grid--list { grid-template-columns: 1fr; }
.search-grid--list .mkt-card { flex-direction: row; }
.search-grid--list .mkt-card__media { width: 220px; min-width: 220px; aspect-ratio: 4/3; }
.search-grid--list .mkt-card__body { flex: 1; }
.search-grid--list .mkt-card__title { -webkit-line-clamp: 1; min-height: 0; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; align-items: center; }
.pagination__ellipsis { color: #94A3B8; padding: 0 4px; }
.pagination__arrow { font-weight: 800; }

@media (max-width: 1180px) {
  .hz-carousel__item { flex-basis: calc((100% - 3 * 20px) / 4); }
  .cat-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hz-carousel__item { flex-basis: calc((100% - 2 * 16px) / 3); }
  .hz-carousel__track { gap: 16px; }
  .cat-card-grid { grid-template-columns: repeat(2, 1fr); }
  .qv-modal__body { grid-template-columns: 1fr; }
  .search-layout { grid-template-columns: 1fr; }
  .search-filters-toggle-btn { display: inline-flex; }
  .search-filters-toggle-checkbox {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .search-filters { display: none; position: static; }
  .search-filters-toggle-checkbox:checked ~ .search-filters { display: block; margin-bottom: 20px; }
  .search-grid--list .mkt-card__media { width: 160px; min-width: 160px; }

  /* The full desktop header (logo + search bar + account/wishlist/cart labels)
     doesn't fit at tablet widths - the search input gets squeezed to near
     nothing. Switch to the mobile hamburger + drawer header here instead of
     at 720px, reusing the same drawer already built and tested for phones. */
  .nav-toggle { display: block; }
  .header-search { display: none; }
  .header-icons--mobile { display: flex; align-items: center; gap: 4px; }
  .header-account { display: none; }
  .header-search--mobile { display: block; padding: 0 14px 12px; }
  .header-search--mobile form { display: flex; align-items: stretch; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
  .header-search--mobile input { flex: 1; border: none; padding: 10px 12px; font-size: 0.95rem; outline: none; min-width: 0; }
  .header-search--mobile button { border: none; background: var(--royal); color: var(--white); padding: 0 16px; cursor: pointer; }
  .site-header__main-inner { padding: 12px 14px; gap: 8px; }
}

/* Platform QA Initiative, Phase 17: at true narrow-phone widths (~320-360px,
   confirmed via real Chrome DevTools Protocol device-metrics emulation -
   headless Chrome's plain --window-size flag has an undocumented ~512px
   floor on this environment that made a naive screenshot test invisibly
   render every "mobile" width the same and silently pass), the hamburger +
   full "Ad Mart Technology" wordmark + search/wishlist/cart icons no longer
   all fit on one row and the icon row is pushed a few px past the viewport
   edge. Trimming the wordmark's font-size (never truncating or hiding it -
   brand legibility matters more than a few px) and the icon gap closes it. */
@media (max-width: 400px) {
  .brand { font-size: 1.05rem; gap: 3px; }
  .header-icons--mobile { gap: 2px; }
}
@media (max-width: 720px) {
  .hz-carousel__item { flex-basis: calc((100% - 14px) / 2); }
  .hz-carousel__track { gap: 14px; }
  .hz-carousel__arrow { width: 34px; height: 34px; }
  .hz-carousel__arrow--prev { left: 2px; }
  .hz-carousel__arrow--next { right: 2px; }
  .banner-carousel__slide { min-height: 260px; padding: 28px 20px; }
  .banner-carousel__actions .btn { padding: 8px 16px; font-size: 0.88rem; }
  /* Arrows collide with wrapped heading/paragraph text once the slide grows
     taller on narrow screens - swipe (already wired) and the dots below
     cover navigation instead. */
  .banner-carousel__arrow { display: none; }
  .mkt-card__title { font-size: 0.86rem; min-height: 2.4em; }
  .mkt-card__price { font-size: 0.95rem; }
  .mkt-card__quickview { display: none; }
  .search-hero h1 { font-size: 1.4rem; }
  .search-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .search-grid--list .mkt-card { flex-direction: column; }
  .search-grid--list .mkt-card__media { width: 100%; min-width: 0; aspect-ratio: 4/3; }
}

/* Product/service detail pages (Phase 4) */
.pd-gallery__main { border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--sky), var(--royal)); }
.pd-gallery__main img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pd-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-gallery__thumb { width: 74px; height: 56px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; opacity: 0.75; transition: opacity .15s ease, border-color .15s ease; }
.pd-gallery__thumb:hover { opacity: 1; }
.pd-gallery__thumb.active { opacity: 1; border-color: var(--royal); }

.pd-detail-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.buybox { position: sticky; top: 84px; }

.tabs { margin-top: 24px; border: none; padding: 0; }
/* Visually hidden but still focusable/tabbable - display:none would drop
   these radios from the tab order entirely and make the tabs unreachable
   by keyboard. */
.tabs__radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tabs__nav { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs__nav label { padding: 10px 18px; font-weight: 600; font-size: 0.92rem; color: #64748B; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; user-select: none; }
.tabs__nav label:hover { color: var(--royal); }
.tabs__panel { display: none; }

#pd-tab-desc:checked ~ .tabs__nav label[for="pd-tab-desc"],
#pd-tab-specs:checked ~ .tabs__nav label[for="pd-tab-specs"],
#pd-tab-versions:checked ~ .tabs__nav label[for="pd-tab-versions"],
#pd-tab-reviews:checked ~ .tabs__nav label[for="pd-tab-reviews"],
#pd-tab-qa:checked ~ .tabs__nav label[for="pd-tab-qa"],
#svc-tab-overview:checked ~ .tabs__nav label[for="svc-tab-overview"],
#svc-tab-faqs:checked ~ .tabs__nav label[for="svc-tab-faqs"],
#svc-tab-reviews:checked ~ .tabs__nav label[for="svc-tab-reviews"] {
  color: var(--royal); border-bottom-color: var(--royal);
}

#pd-tab-desc:focus-visible ~ .tabs__nav label[for="pd-tab-desc"],
#pd-tab-specs:focus-visible ~ .tabs__nav label[for="pd-tab-specs"],
#pd-tab-versions:focus-visible ~ .tabs__nav label[for="pd-tab-versions"],
#pd-tab-reviews:focus-visible ~ .tabs__nav label[for="pd-tab-reviews"],
#pd-tab-qa:focus-visible ~ .tabs__nav label[for="pd-tab-qa"],
#svc-tab-overview:focus-visible ~ .tabs__nav label[for="svc-tab-overview"],
#svc-tab-faqs:focus-visible ~ .tabs__nav label[for="svc-tab-faqs"],
#svc-tab-reviews:focus-visible ~ .tabs__nav label[for="svc-tab-reviews"] {
  outline: 2px solid var(--royal); outline-offset: 2px;
}

#pd-tab-desc:checked ~ #pd-panel-desc,
#pd-tab-specs:checked ~ #pd-panel-specs,
#pd-tab-versions:checked ~ #pd-panel-versions,
#pd-tab-reviews:checked ~ #pd-panel-reviews,
#pd-tab-qa:checked ~ #pd-panel-qa,
#svc-tab-overview:checked ~ #svc-panel-overview,
#svc-tab-faqs:checked ~ #svc-panel-faqs,
#svc-tab-reviews:checked ~ #svc-panel-reviews {
  display: block;
}

.rating-breakdown { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 20px; max-width: 320px; }
.rating-breakdown__row { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 8px; font-size: 0.8rem; color: #64748B; }
.rating-breakdown__bar { background: var(--bg); border-radius: 999px; height: 8px; overflow: hidden; }
.rating-breakdown__fill { background: var(--warning); height: 100%; border-radius: 999px; }

/* Currency switcher (Multi-Currency Phase 1) - reused in the desktop
   header, mobile drawer, footer, and customer/vendor dashboards. */
.currency-switcher { display: inline-flex; }
.currency-switcher__select {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px 6px 8px; font-size: 0.82rem; font-weight: 700;
  background: var(--white); color: var(--navy); cursor: pointer; font-family: inherit;
}
.currency-switcher__select:hover { border-color: var(--royal); }
.currency-switcher__select:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 2px rgba(21,101,192,0.15); }
.currency-switcher--footer .currency-switcher__select {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--white);
}
.currency-switcher--footer .currency-switcher__select option { color: var(--navy); }
.mobile-drawer__currency { padding: 14px 16px 4px; }
.mobile-drawer__currency .currency-switcher__select { width: 100%; padding: 10px 12px; }
.page-hero__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Location selector (IP Geolocation Phase 2) - the "📍 Delivering to X"
   control, reused in the desktop header and mobile drawer. */
.location-selector__trigger {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 0.8rem; font-weight: 600; background: var(--white); color: var(--navy);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.location-selector__trigger:hover { border-color: var(--royal); color: var(--royal); }
.location-selector__trigger svg { flex-shrink: 0; color: var(--royal); }
.location-selector__label strong { color: inherit; }
.location-selector__menu { min-width: 280px; max-width: min(320px, calc(100vw - 32px)); padding: 8px; border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.location-selector__heading { font-weight: 700; color: var(--navy); padding: 6px 10px 8px; margin: 0; font-size: 0.85rem; }
.location-selector__list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.location-selector__option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  border: none; background: none; cursor: pointer; font-size: 0.88rem; color: var(--text); font-family: inherit;
}
.location-selector__option:hover { background: rgba(21,101,192,0.08); color: var(--royal); }
.location-selector__option.active { background: rgba(21,101,192,0.1); color: var(--royal); font-weight: 700; }
.location-selector__footer { border-top: 1px solid var(--border); margin-top: 6px; padding: 10px 10px 4px; }
.location-selector__toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: #64748B; font-weight: 400; cursor: pointer; }
.location-selector__privacy-note { font-size: 0.74rem; color: #94A3B8; margin: 8px 0 2px; }
.mobile-drawer__location { padding: 4px 16px 14px; }
.mobile-drawer__location .location-selector__trigger { width: 100%; justify-content: flex-start; padding: 10px 12px; }
.mobile-drawer__location .location-selector__menu { position: static !important; width: 100%; box-shadow: none; transform: none !important; margin-top: 8px; }

@media (max-width: 900px) {
  .buybox { position: static; }
}

@media (max-width: 720px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 0 64px; }
  .pd-detail-layout { grid-template-columns: 1fr !important; }
  .tabs__nav { gap: 0; }
  .tabs__nav label { padding: 8px 12px; font-size: 0.86rem; }

  /* Larger touch targets for the location selector and scope-filter chips
     (IP Geolocation Phase 5) - 8px/7px padding measures under the ~44px
     minimum recommended tap size on a phone. */
  .location-selector__option { padding: 12px 10px; font-size: 0.92rem; }
  .location-selector__list { max-height: 45vh; }
  .location-scope-filters { gap: 10px; }
  .location-scope-filters__chip { padding: 10px 16px; font-size: 0.88rem; }
}

/* AI Support Chat Widget (AI Automation Ecosystem, Phase 2) - a floating
   launcher + panel, included site-wide from includes/footer.php but only
   rendered when the customer_support agent is enabled. */
.ai-support-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1050; }
.ai-support-widget__launcher {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: var(--royal); color: var(--white); border: none; font-weight: 700; font-size: 0.9rem;
  cursor: pointer; box-shadow: var(--shadow-lg); font-family: inherit;
}
.ai-support-widget__launcher:hover { background: var(--navy); }
.ai-support-widget__panel {
  position: absolute; right: 0; bottom: 62px; width: 340px; max-width: calc(100vw - 40px);
  background: var(--white); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-support-widget__header {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  background: var(--navy); color: var(--white);
}
.ai-support-widget__close { background: none; border: none; color: var(--white); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ai-support-widget__messages { padding: 14px 16px; max-height: 320px; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ai-support-widget__msg { font-size: 0.86rem; line-height: 1.4; padding: 8px 12px; border-radius: 10px; max-width: 88%; white-space: pre-wrap; }
.ai-support-widget__msg--bot { background: var(--bg); color: var(--text); align-self: flex-start; }
.ai-support-widget__msg--user { background: var(--royal); color: var(--white); align-self: flex-end; }
.ai-support-widget__msg--note { background: rgba(46,125,50,0.1); color: var(--success); align-self: center; text-align: center; font-weight: 600; max-width: 100%; }
.ai-support-widget__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.ai-support-widget__form input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 0.86rem; }

/* Newsletter Popup (Platform Safety Initiative, Phase 9) - a standard
   Bootstrap modal (see includes/newsletter-popup.php) with a
   glassmorphism treatment layered on top: a translucent, blurred panel
   over a soft gradient, rather than a flat opaque card. Self-contained
   light/dark handling via prefers-color-scheme, since this codebase has
   no site-wide dark-mode toggle to hook into for anything else. */
.newsletter-popup .modal-dialog { max-width: 460px; }
.newsletter-popup__content {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.92), rgba(10, 37, 64, 0.92));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  color: var(--white);
  overflow: hidden;
}
.newsletter-popup__close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.85;
}
.newsletter-popup__close:hover { opacity: 1; }
.newsletter-popup__body { padding: 40px 32px 32px; text-align: center; }
.newsletter-popup__eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700;
  color: rgba(255, 255, 255, 0.75); margin: 0 0 8px;
}
.newsletter-popup__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; color: var(--white); }
.newsletter-popup__subtitle { font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin: 0 0 22px; }
.newsletter-popup__row { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-popup__input {
  flex: 1; min-width: 180px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12); color: var(--white); padding: 11px 14px;
}
.newsletter-popup__input::placeholder { color: rgba(255, 255, 255, 0.65); }
.newsletter-popup__input:focus {
  background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.7);
  color: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.newsletter-popup__submit { border-radius: 10px; padding: 11px 20px; font-weight: 700; white-space: nowrap; }
.newsletter-popup__status { margin: 12px 0 0; text-align: left; }
.newsletter-popup__fineprint { margin: 16px 0 0; font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); }

@media (prefers-color-scheme: dark) {
  .newsletter-popup__content {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.94));
    border-color: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 480px) {
  .newsletter-popup .modal-dialog { max-width: calc(100vw - 24px); }
  .newsletter-popup__body { padding: 32px 22px 24px; }
  .newsletter-popup__row { flex-direction: column; }
}

@media (max-width: 480px) {
  .ai-support-widget { right: 12px; bottom: 12px; }
  .ai-support-widget__panel { width: calc(100vw - 24px); }
}