/*
 * getusedphones.com brand stylesheet — Trust Navy.
 * Tokens from the Claude Design export (research/phone-business/brand/Design-Tokens.dc.html;
 * see 23-brand-guidelines.md §3/§4). All pairs pass WCAG AA. Mobile-first, 375px.
 */

:root {
  --gup-primary: #123A5E;
  --gup-primary-dark: #0D2D4A;
  --gup-secondary: #44617D;
  --gup-accent: #2E7CF6;
  --gup-surface: #F6F8FB;
  --gup-footer: #0B2439;
  --gup-text: #1C2B36;
  --gup-text-muted: #6E7E8D;
  --gup-border: #E4EAF0;
  --gup-success: #19794B;
  --gup-warning: #955B00;
  --gup-error: #C2362F;
  --gup-grade-a-bg: #123A5E;
  --gup-grade-a-text: #FFFFFF;
  --gup-grade-b-bg: #E3ECF6;
  --gup-grade-b-text: #234E73;
  --gup-radius: 10px;
}

body {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--gup-text);
}
h1, h2, h3, .gup-display {
  font-family: 'Sora', sans-serif;
  color: var(--gup-primary-dark);
  letter-spacing: -0.01em;
}
body { font-size: 1rem; line-height: 1.55; }          /* >=16px */
small, .gup-muted { color: var(--gup-text-muted); font-size: 0.875rem; }
.gup-eyebrow { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--gup-text-muted); }

/* Icons (Lucide) */
.gup-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.15em; }
.gup-ico svg { width: 1.1em; height: 1.1em; stroke-width: 2; }

/* Buttons */
.gup-btn, .gup-btn:visited {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 12px 20px; border-radius: var(--gup-radius);
  font-family: 'Sora', sans-serif; font-weight: 600; text-decoration: none; cursor: pointer;
}
.gup-btn--primary { background: var(--gup-primary); color: #fff; border: 0; }
.gup-btn--primary:hover { background: var(--gup-primary-dark); color: #fff; }
.gup-btn--ghost { background: #fff; color: var(--gup-primary); border: 1.5px solid var(--gup-primary); }

/* Hero */
.gup-hero { background: var(--gup-primary); color: #fff; padding: 40px 20px; border-radius: 14px; }
.gup-hero h1 { color: #fff; font-size: clamp(1.8rem, 6vw, 3rem); margin: 0 0 12px; }
.gup-hero p { color: #dce7f2; max-width: 46ch; }
.gup-hero .gup-pill { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,.12); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 0.8125rem; margin-bottom: 14px; }

/* Trust strip (footer of hero / sitewide) */
.gup-trust-strip { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; background: var(--gup-surface); border-top: 1px solid var(--gup-border); border-bottom: 1px solid var(--gup-border); }
.gup-trust-strip .item { display: flex; align-items: center; gap: 8px; color: var(--gup-text); font-size: 0.9375rem; }
.gup-trust-strip .gup-ico svg { color: var(--gup-success); }
@media (min-width: 768px) { .gup-trust-strip { grid-template-columns: repeat(4, 1fr); } }

/* PDP trust module (repeated on every product) */
.gup-trust-module { border: 1px solid var(--gup-border); border-radius: var(--gup-radius); padding: 16px; margin: 16px 0; background: #fff; }
.gup-trust-module ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gup-trust-module li { display: flex; align-items: flex-start; gap: 10px; }
.gup-trust-module li .gup-ico svg { color: var(--gup-primary); margin-top: 2px; }

/* Stock badges */
.gup-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.gup-stock--instock { background: rgba(25,121,75,.12); color: var(--gup-success); }
.gup-stock--eta { background: rgba(149,92,0,.12); color: var(--gup-warning); }

/* Sticky mobile buy bar (PDP) */
.gup-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #fff; border-top: 1px solid var(--gup-border); box-shadow: 0 -4px 16px rgba(11,36,57,.08); }
.gup-sticky-buy .price { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--gup-primary-dark); }
.gup-sticky-buy .gup-btn { flex: 0 0 auto; }
@media (min-width: 768px) { .gup-sticky-buy { display: none; } }   /* PDP sticky bar is mobile-only */

/* Page prose (long-form copy pages) */
.gup-prose { max-width: 760px; margin: 0 auto; }
.gup-prose h2 { font-family: 'Sora', sans-serif; font-size: 1.6rem; margin: 1.9rem 0 .6rem; color: var(--gup-primary-dark); }
.gup-prose h3 { font-family: 'Sora', sans-serif; font-size: 1.25rem; margin: 1.5rem 0 .5rem; color: var(--gup-primary-dark); }
.gup-prose p, .gup-prose li { font-size: 1.0625rem; line-height: 1.7; }
.gup-prose ul, .gup-prose ol { padding-left: 1.2rem; }
.gup-prose li { margin: .3rem 0; }
.gup-prose a { color: var(--gup-primary); }
.gup-prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.gup-prose th, .gup-prose td { border: 1px solid var(--gup-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.gup-prose th { background: var(--gup-surface); }
.gup-prose blockquote { border-left: 4px solid var(--gup-primary); margin: 1.2rem 0; padding: .5rem 0 .5rem 1rem; color: var(--gup-secondary); font-style: italic; }
.gup-prose code { background: var(--gup-surface); padding: 1px 5px; border-radius: 4px; }

/* Home sections + CTA band */
.gup-section { max-width: 1100px; margin: 40px auto 10px; }
.gup-section h2 { font-family: 'Sora', sans-serif; font-size: 1.6rem; color: var(--gup-primary-dark); margin: .2rem 0; }
.gup-cta { max-width: 1100px; margin: 44px auto; background: var(--gup-primary); color: #fff; border-radius: 14px; padding: 32px; text-align: center; }
.gup-cta h2 { color: #fff; font-family: 'Sora', sans-serif; margin-top: 0; }
.gup-cta p { color: #dce7f2; }
/* On the navy band, invert the buttons so the PRIMARY action (Shop iPhones) is the
   bold white button and the secondary (Why UK-used) is a subtle outline. */
.gup-cta .gup-btn--primary { background: #fff; color: var(--gup-primary); border: 0; }
.gup-cta .gup-btn--primary:hover { background: #e9eef3; color: var(--gup-primary); }
.gup-cta .gup-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.gup-cta .gup-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Hero/value/steps spacing when stacked on the home page */
.gup-hero, .gup-trust-strip, .gup-steps, .gup-section, .gup-cta, .gup-prose { margin-left: auto; margin-right: auto; }
.gup-hero { max-width: 1100px; margin-top: 8px; }

/* Hide the redundant page title on the front page (the hero carries it) */
.home .entry-hero-container, .home .page-title, .home .entry-header .entry-title, .home .entry-hero { display: none; }

/* Inner-page titles sit centered on white (match the hi-fi), not in Kadence's
   200px gray hero band. */
.entry-hero-container-inner, .archive-hero-container-inner { background: #ffffff !important; }
.entry-hero .entry-header, .entry-hero .archive-header,
.archive-hero-container-inner .archive-header {
  min-height: 0 !important;
  padding: 52px 0 6px !important;
  text-align: center;
}
.entry-hero .entry-title, .entry-hero .archive-title { color: var(--gup-primary-dark); }

/* How-it-works steps */
.gup-steps { list-style: none; counter-reset: gup; padding-left: 0; display: grid; gap: 14px; }
.gup-steps li { counter-increment: gup; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--gup-surface); border: 1px solid var(--gup-border); border-radius: var(--gup-radius); }
.gup-steps li .gup-ico svg { color: var(--gup-primary); }

/* Cookie consent banner */
.gup-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--gup-footer); color: #e3ecf6; font-size: 0.9375rem; }
.gup-consent-actions { display: flex; gap: 8px; }
.gup-consent .gup-btn { min-height: 38px; padding: 8px 16px; }
/* Dark consent bar: make Accept the visible (white) primary, Decline the outline. */
.gup-consent .gup-btn--primary { background: #fff; color: var(--gup-primary); border: 0; }
.gup-consent .gup-btn--primary:hover { background: #e9eef3; color: var(--gup-primary); }
.gup-consent .gup-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.gup-consent .gup-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Footer */
.site-footer { background: var(--gup-footer); color: #cdd8e3; }
.gup-footer { background: var(--gup-footer); color: #cdd8e3; padding: 24px 16px; }
.gup-footer-inner { max-width: 1100px; margin: 0 auto; }

/* Newsletter opt-in (footer) */
.gup-subscribe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.gup-subscribe-copy { display: flex; flex-direction: column; flex: 1 1 280px; }
.gup-subscribe-copy strong { color: #fff; font-family: 'Sora', sans-serif; font-size: 1.05rem; }
.gup-subscribe-copy span { font-size: .9rem; color: #aab8c6; }
.gup-subscribe-fields { display: flex; gap: 8px; flex: 1 1 320px; }
.gup-subscribe-fields input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: #fff; color: #0B2439; font-size: .95rem; }
.gup-subscribe-fields button { flex: 0 0 auto; height: 44px; padding: 0 20px; border: 0; border-radius: 9px; background: #fff; color: #0B2439; font-weight: 700; font-size: .95rem; cursor: pointer; }
.gup-subscribe-fields button:hover { background: #e9eef3; }
.gup-subscribe-fields button:disabled { opacity: .6; cursor: default; }
.gup-subscribe-msg { flex: 1 1 100%; margin: 0; font-size: .9rem; }
.gup-subscribe-msg.is-ok { color: #7fe0a8; }
.gup-subscribe-msg.is-err { color: #ffb4ad; }
.gup-subscribe-fine { flex: 1 1 100%; margin: 0; font-size: .75rem; color: #8595a4; }

/* Copyright pinned to the very bottom of our footer; hide Kadence's own bottom bar. */
.gup-footer-copyright { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: #8595a4; }
.site-bottom-footer-wrap { display: none !important; }
.gup-footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 0 0 12px; }
.gup-footer-menu a { color: #cdd8e3; text-decoration: none; font-size: 0.9375rem; }
.gup-footer-menu a:hover { color: #fff; text-decoration: underline; }
.gup-footer-legal { color: #8ea3b6; font-size: 0.8125rem; margin: 0; }

/* ============================================================
   Hi-fi layout overrides (match HiFi-Screens.dc.html)
   ============================================================ */
html, body { overflow-x: hidden; }

/* Dark navy global header with white nav (Trust Navy) */
#masthead, .site-header, .site-header-wrap, .site-main-header-wrap,
.site-top-header-wrap, .site-bottom-header-wrap, .kadence-sticky-header.item-is-fixed {
  background-color: #0B2439 !important;
  border-bottom: 0 !important;
}
.site-header .site-title a, .site-branding a, .site-header .site-title,
.header-navigation .menu li a, .header-navigation a, .site-header-item a,
.header-menu-container a, .site-header .header-cart-button, .site-header a {
  color: #ffffff !important;
}
.site-header .site-title a { font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.header-navigation .menu li a:hover, .site-header a:hover { color: #9ec3e6 !important; }
.site-header .menu-toggle, .site-header .menu-toggle-open { color: #fff !important; }

/* Full-bleed hero, seamless under the header */
.home .content-container, .home .site-content, .home .entry-content { padding-top: 0 !important; }
.gup-hero {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: 0; padding: 0; border-radius: 0;
  background: #123A5E; color: #fff;
}
.gup-hero-inner { max-width: 1140px; margin: 0 auto; padding: 56px 24px; display: grid; gap: 28px; }
@media (min-width: 900px) { .gup-hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; padding: 76px 24px; } }
.gup-hero h1 { color: #fff; font-family: 'Sora', sans-serif; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; margin: .4rem 0 1rem; }
.gup-hero p { color: #cfdcea; font-size: 1.1rem; max-width: 48ch; }
.gup-hero .gup-pill { background: rgba(255,255,255,.14); color: #fff; }
.gup-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.gup-hero-media { min-height: 320px; border-radius: 14px; background: #16466e; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 24px); }
/* When an admin sets a hero image, drop the striped placeholder and show the photo. */
.gup-hero-media:has(img) { background: none; min-height: 0; }
.gup-hero-media img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 899px) { .gup-hero-media { min-height: 190px; } }

/* Hero buttons */
.gup-btn--light { background: #fff; color: #123A5E; border: 0; }
.gup-btn--light:hover { background: #eef3f8; color: #0D2D4A; }
.gup-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.gup-btn--outline:hover { border-color: #fff; color: #fff; }

/* Full-bleed light trust / value strip with centered content */
.gup-trust-strip {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50% - 558px)); padding-right: max(24px, calc(50% - 558px));
  background: var(--gup-surface); border-top: 1px solid var(--gup-border); border-bottom: 1px solid var(--gup-border);
}

/* Center home sections to the same width as the hero inner */
.gup-section, .gup-cta { max-width: 1140px; }

/* WooCommerce buttons + product cards to brand */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.woocommerce #respond input#submit, .wc-block-components-button {
  background: #123A5E !important; color: #fff !important; border-radius: 8px !important;
  font-family: 'Sora', sans-serif !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #0D2D4A !important; }
.woocommerce ul.products li.product .price, .price { color: #0D2D4A; font-family: 'Sora', sans-serif; }
.woocommerce ul.products li.product { border: 1px solid var(--gup-border); border-radius: 12px; padding: 12px; background: #fff; }
/* Per-model SEO hubs: "shop by model" chips + the category-archive intro copy. */
.gup-model-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 22px; }
.gup-model-links__label { font-weight: 600; color: var(--gup-primary-dark); margin-right: 2px; }
.gup-model-links a { display: inline-flex; padding: 6px 14px; border: 1px solid var(--gup-border); border-radius: 999px; background: #fff; color: var(--gup-primary-dark); text-decoration: none; font-size: 0.9375rem; }
.gup-model-links a:hover { background: var(--gup-primary); color: #fff; border-color: var(--gup-primary); }
/* Model-hub intro copy lives in Kadence's .archive-description wrapper (centered by default);
   left-align the long prose + FAQ for readability and constrain the measure. */
.archive-description { max-width: 820px; margin: 0 auto 24px; text-align: left; }
.archive-description h2 { font-size: 1.3rem; margin-top: 1.4rem; }
.archive-description h3 { font-size: 1.05rem; margin-top: 1rem; }
.archive-description .gup-prose > p:first-child { font-size: 1.05rem; }
/* Uniform, square product thumbnail (placeholder or real photo) so cards never stretch tall. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
	width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
	background: #eef2f7; border-radius: 8px; margin-bottom: 12px;
}

/* Remove the gap between the dark header and the full-bleed hero on the home page */
.home #primary, .home .content-area, .home .site-main, .home #main,
.home .content-container, .home .entry-content, .home .single-entry,
.home .entry-content-wrap, .home article { padding-top: 0 !important; margin-top: 0 !important; }
.home .content-container { padding-bottom: 0 !important; }
.home .gup-hero { margin-top: 0 !important; }

/* ============================================================
   How it works — numbered band (match HiFi-Screens 01 Home)
   ============================================================ */
.gup-how { max-width: 1140px; margin: 44px auto; padding: 0 24px; }
.gup-how-title { font-family: 'Sora', sans-serif; font-size: 1.6rem; color: var(--gup-primary-dark); margin: 0 0 18px; }
.gup-how-grid { background: #EEF3F8; border-radius: 14px; padding: 28px; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .gup-how-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.gup-how-step { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gup-how-num { width: 40px; height: 40px; border-radius: 50%; background: var(--gup-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; }
.gup-how-step h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.05rem; margin: 0; color: var(--gup-text); }
.gup-how-step p { margin: 0; font-size: 0.9rem; color: #44617D; line-height: 1.5; }

/* How-it-works PAGE variant (4 cards + verification band, matches 07 How it works) */
.gup-how--page { text-align: center; }
.gup-how--page .gup-how-title { font-size: 2rem; margin-bottom: 6px; }
.gup-how-lead { color: #44617D; font-size: 1.05rem; max-width: 560px; margin: 0 auto 22px; line-height: 1.5; }
.gup-how-grid--4 { background: transparent; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 768px) { .gup-how-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.gup-how-grid--4 .gup-how-step { background: #fff; border: 1px solid var(--gup-border); border-radius: 12px; padding: 22px; }
.gup-verify-band { display: flex; gap: 16px; align-items: center; justify-content: center; text-align: left; background: #EEF3F8; border-radius: 14px; padding: 24px 28px; margin-top: 24px; }
.gup-verify-band .gup-ico svg { width: 26px; height: 26px; color: var(--gup-primary); flex: none; }
.gup-verify-band h3 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0 0 4px; }
.gup-verify-band p { margin: 0; color: #44617D; font-size: 0.95rem; line-height: 1.5; }

/* Trust strip icons navy to match the design (was success-green) */
.gup-trust-strip .gup-ico svg { color: var(--gup-primary) !important; }
.gup-trust-strip .item { font-weight: 500; }

/* Featured section heading aligned to the section content width */
.gup-section { padding: 0 24px; }
/* Home featured grid: constrain to the same container as the "Featured iPhones" heading so
   the title left-aligns with the first product card. */
.home ul.products { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.gup-section .gup-eyebrow { margin-bottom: 4px; }

/* ============================================================
   Header brand lockup + cart (match HiFi-Screens header)
   ============================================================ */
.site-title { display: inline-flex !important; align-items: center; gap: 8px; }
.site-title .gup-logo-ico { display: inline-flex; align-items: center; color: #fff; font-size: 1.15em; }
.site-title .gup-logo-ico svg { width: 1.15em; height: 1.15em; }
.site-title .gup-logo-name { text-transform: lowercase; }
.site-title .gup-logo-tld { color: #7AA5C6; font-weight: 500; text-transform: lowercase; }
.gup-cart-item > a { display: inline-flex !important; align-items: center; gap: 6px; }
.gup-cart-item .gup-ico svg { width: 1.1em; height: 1.1em; }

/* ============================================================
   PDP — Veend "pay small small" example + gallery note
   ============================================================ */
.gup-veend-example { border: 1.5px dashed #2E7CF6; border-radius: 10px; background: #F5F9FF; padding: 16px; margin: 16px 0; }
.gup-veend-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gup-veend-head > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--gup-primary); }
.gup-veend-tag { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: .08em; color: var(--gup-text-muted); }
.gup-veend-now { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--gup-text); margin: 8px 0 2px; }
.gup-veend-rest { font-size: 0.85rem; color: #44617D; margin: 0; }
.gup-veend-fine { font-family: 'Space Mono', monospace; font-size: 0.65rem; line-height: 1.5; color: var(--gup-text-muted); border-top: 1px dashed #BCD2E6; padding-top: 8px; margin: 10px 0 0; }
.gup-gallery-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8rem; color: var(--gup-text-muted); line-height: 1.45; margin: 10px 0 0; }
.gup-gallery-note .gup-ico { flex: none; margin-top: 2px; }

/* ============================================================
   Round 2 polish — cards, centering, logo, prose width, track order
   ============================================================ */

/* Kadence hides the add-to-cart action in an absolute, hover-revealed wrap;
   the design shows it always. Pin it into the card flow, full width. */
.woocommerce ul.products li.product .product-action-wrap {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  margin-top: 12px;
  width: 100%;
}

/* Full-width "Add to cart" in product cards (shop, featured, related) */
.woocommerce ul.products li.product .product-details .button,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button {
  position: relative;
  display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px; width: 100%; text-align: center;
  margin-top: 12px; padding: 12px 14px; box-sizing: border-box; float: none;
}
/* "Added" state: let Kadence collapse the label and show only the centered check
   (our font-size override would otherwise keep the text and push the tick off-centre). */
.woocommerce ul.products li.product .button.added { font-size: 0 !important; gap: 0; }
.woocommerce ul.products li.product .button.added .kadence-svg-iconset { margin: 0; font-size: 1rem; }
.woocommerce ul.products li.product .added_to_cart {
  display: block; text-align: center; margin-top: 6px;
  background: transparent !important; color: var(--gup-primary) !important; text-decoration: underline;
}
.woocommerce ul.products li.product .product-details { display: flex; flex-direction: column; height: 100%; }
.woocommerce ul.products li.product .price { margin-top: 4px; }

/* Center each trust-strip item (was left-aligned / looked left-floating) */
.gup-trust-strip .item { justify-content: center; text-align: center; }

/* Center the content of each how-it-works step */
.gup-how-step { align-items: center; text-align: center; }

/* Logo lockup: tight ".com" against the name (was too much space) */
.site-title { gap: 0 !important; }
.site-title .gup-logo-name { margin-left: 9px; }
.site-title .gup-logo-tld { margin-left: 1px; }

/* (Home long-form prose uses the default single-column .gup-prose treatment,
   per founder preference — the earlier width/2-column experiment was reverted.) */

/* Cart count in the nav */
.gup-cart-item > a { gap: 6px; }
.gup-cart-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.gup-cart-count.has-items { background: #fff; color: #0B2439 !important; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; padding: 0 6px; }

/* ---- Track order page (matches HiFi-Screens / 06 Track order) ---- */
.gup-track { display: grid; gap: 28px; max-width: 1140px; margin: 8px auto 40px; padding: 0 24px; box-sizing: border-box; }
@media (min-width: 860px) { .gup-track { grid-template-columns: 320px 1fr; align-items: start; } }
.gup-track-title { font-family: 'Sora', sans-serif; font-size: 1.6rem; color: var(--gup-primary-dark); margin: 0 0 6px; }
.gup-track-sub { color: var(--gup-text-muted); margin: 0 0 16px; font-size: 0.95rem; }
.gup-track-form { display: flex; flex-direction: column; gap: 14px; }
.gup-track-form .gup-field { display: flex; flex-direction: column; gap: 5px; }
.gup-track-form label { font-size: 0.8rem; color: #44617D; font-weight: 500; }
.gup-track-form input { width: 100%; max-width: 100%; box-sizing: border-box; height: 46px; border: 1px solid var(--gup-border); border-radius: 8px; padding: 0 12px; background: #fff; font-size: 0.95rem; }
.gup-track-form input:focus { outline: 2px solid var(--gup-primary); border-color: var(--gup-primary); }
.gup-track-form .gup-btn--primary { justify-content: center; height: 48px; }
.gup-track-result { min-height: 120px; }
.gup-track-empty { background: var(--gup-surface); border: 1px dashed var(--gup-border); border-radius: 12px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--gup-text-muted); }
.gup-track-empty .gup-ico svg { width: 28px; height: 28px; color: var(--gup-primary); }
.gup-track-empty.is-error .gup-ico svg { color: #b32d2e; }
.gup-track-empty p { margin: 0; max-width: 36ch; }
/* Return request form: keep fields inside the container (long select options
   were sizing the control wider than the screen). */
.gup-return-form { max-width: 520px; }
.gup-return-form p { margin: 0 0 16px; }
.gup-return-form label { display: block; font-weight: 600; }
.gup-return-form input,
.gup-return-form select,
.gup-return-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--gup-border);
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fff;
}
.gup-return-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230B2439' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.gup-return-form button { width: auto; }

/* Returns page: form on the left, "what to expect" panel on the right (fills the
   desktop whitespace); stacks on mobile. */
.gup-returns-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 860px) {
  .gup-returns-layout { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; }
}
.gup-returns-main { min-width: 0; }
.gup-returns-main .gup-return-form { max-width: none; }
.gup-returns-aside { min-width: 0; }
.gup-returns-card { background: var(--gup-surface); border: 1px solid var(--gup-border); border-radius: 12px; padding: 24px 28px; }
.gup-returns-card h2 { font-family: 'Sora', sans-serif; font-size: 1.15rem; color: var(--gup-primary-dark); margin: 0 0 8px; }
.gup-returns-card h3 { font-family: 'Sora', sans-serif; font-size: 1rem; color: var(--gup-primary-dark); margin: 20px 0 6px; }
.gup-returns-card p { margin: 0 0 12px; color: var(--gup-text-muted); font-size: 0.95rem; }
.gup-returns-list { list-style: none; margin: 0 0 4px; padding: 0; }
.gup-returns-list li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--gup-text-muted); font-size: 0.95rem; }
.gup-returns-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--gup-primary); }

.gup-track-card { background: #fff; border: 1px solid var(--gup-border); border-radius: 12px; padding: 24px; }
.gup-track-ordno { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; display: block; margin-bottom: 6px; }
.gup-track-imei { display: block; font-size: 0.85rem; color: #5a6b7b; margin-bottom: 16px; }
.gup-timeline { list-style: none; padding: 0; margin: 0; }
.gup-timeline li { display: flex; gap: 14px; }
.gup-timeline .gup-tl-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--gup-border); position: relative; }
.gup-timeline .gup-tl-dot .gup-ico svg { width: 15px; height: 15px; color: #fff; }
.gup-timeline li:not(.is-last) .gup-tl-dot::after { content: ""; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + 18px); background: var(--gup-border); }
.gup-timeline li.done .gup-tl-dot { background: var(--gup-success); border-color: var(--gup-success); }
.gup-timeline li.done:not(.is-last) .gup-tl-dot::after { background: var(--gup-success); }
.gup-timeline li.current .gup-tl-dot { background: var(--gup-primary); border-color: var(--gup-primary); }
.gup-timeline .gup-tl-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 20px; }
.gup-timeline li.is-last .gup-tl-body { padding-bottom: 0; }
.gup-timeline .gup-tl-label { font-size: 0.95rem; font-weight: 600; color: var(--gup-text); }
.gup-timeline li.upcoming .gup-tl-label { color: #9aadbd; font-weight: 500; }
.gup-timeline .gup-tl-now { font-size: 0.78rem; color: #955B00; font-weight: 600; }
.gup-track-ship { margin: 18px 0 0; font-size: 0.9rem; color: var(--gup-text-muted); }
.gup-link { color: var(--gup-primary); font-weight: 600; }

/* Left-align the Kadence footer copyright row (was centered) and constrain it to the
   same 1100px column as our legal bar (.gup-footer-inner) so the left edges line up. */
.site-bottom-footer-wrap .site-container { max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; box-sizing: border-box; }
@media (max-width: 1132px) { .site-bottom-footer-wrap .site-container { padding-left: 16px; padding-right: 16px; } }
.site-bottom-footer-wrap .site-footer-row,
.site-bottom-footer-wrap .site-footer-row-column-layout-row,
.site-bottom-footer-wrap .footer-widget-area-inner,
.site-bottom-footer-wrap .site-footer-section-inner { justify-content: flex-start !important; text-align: left !important; }

/* ============================================================
   Round 3 — hi-fi compliance: grading cards, PDP specs, shop filter, cart/checkout
   ============================================================ */

/* Grading page — Grade A / Grade B cards (match 08 Grading) */
.gup-grades { max-width: 1100px; margin: 0 auto 8px; padding: 0 24px; box-sizing: border-box; }
.gup-grades-lead { text-align: center; color: #44617D; font-size: 1.05rem; max-width: 560px; margin: 0 auto 22px; line-height: 1.5; }
.gup-grades-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .gup-grades-row { grid-template-columns: 1fr 1fr; } }
.gup-grades-card { background: #fff; border: 1px solid var(--gup-border); border-radius: 12px; overflow: hidden; }
.gup-grades-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--gup-border); }
.gup-grades-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--gup-text); }
.gup-grades-list { list-style: none; margin: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; }
.gup-grades-list li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #44617D; }
.gup-grades-list svg { width: 18px; height: 18px; color: var(--gup-success); flex: none; }
/* Higher specificity + !important: a later theme rule was zeroing this margin-top, leaving
   the button touching the grade cards. */
.gup-grades .gup-grades-cta { text-align: center; margin: 56px 0 8px !important; }
.gup-grades-cta .gup-btn { display: inline-flex; align-items: center; gap: 8px; }
.gup-grades-cta .gup-btn svg { width: 1.1em; height: 1.1em; }

/* PDP spec rows (03 PDP) */
.gup-specs { margin: 16px 0 0; }
.gup-specs > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--gup-border); font-size: 0.9rem; }
.gup-specs > div:last-child { border-bottom: 0; }
.gup-specs dt { color: var(--gup-text-muted); margin: 0; }
.gup-specs dd { margin: 0; font-weight: 500; color: var(--gup-text); }
.gup-specs dd.gup-spec-delivery { color: #955B00; }

/* Shop — Grade filter pills (02 Shop) */
.gup-shop-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.gup-shop-filter .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--gup-text-muted); margin-right: 4px; }
.gup-shop-filter .lbl .gup-ico svg, .gup-shop-filter .lbl svg { width: 16px; height: 16px; }
.gup-shop-filter a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none; border: 1px solid var(--gup-border); color: #44617D; background: #fff; }
.gup-shop-filter a.is-active { background: var(--gup-primary); color: #fff; border-color: var(--gup-primary); }
.gup-shop-filter a:hover { border-color: var(--gup-primary); }

/* Cart / checkout — Veend handoff notes (04/05) */
.gup-veend-note { display: flex; gap: 10px; align-items: flex-start; border: 1.5px dashed #2E7CF6; background: #F5F9FF; border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; color: var(--gup-text); margin: 14px 0; line-height: 1.45; }
.gup-veend-note svg { width: 20px; height: 20px; color: #2E7CF6; flex: none; }
.woocommerce-cart .gup-veend-note, .woocommerce-checkout .gup-veend-note { max-width: 640px; }

/* ============================================================
   Round 4 — mobile compliance (cart icon, 2-col shop, cart cards)
   ============================================================ */

/* Mobile header: show the icon-only logo (the full wordmark is tight alongside the
   cart + hamburger on small screens). Desktop keeps the full lockup. */
.mobile-site-branding .site-title .gup-logo-name,
.mobile-site-branding .site-title .gup-logo-tld { display: none !important; }
.mobile-site-branding .site-title { gap: 0 !important; }
.mobile-site-branding .site-title .gup-logo-ico svg { width: 30px; height: 30px; }

/* Persistent cart icon in the mobile header (injected next to the hamburger) */
.gup-mobile-cart { position: relative; display: inline-flex; align-self: center; align-items: center; justify-content: center; color: #fff !important; padding: 6px 5px; margin-right: 2px; }
.gup-mobile-cart svg { width: 24px; height: 24px; }
.gup-mobile-cart-badge { position: absolute; top: 1px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #fff; color: #0B2439; font-size: 0.6rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #0B2439; }

/* Shop: 2-column product grid on mobile (match hi-fi 02) */
@media (max-width: 768px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; display: grid !important; }
  .woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 8px !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 0.9rem; }
  .woocommerce ul.products li.product .price { font-size: 0.95rem; }
  .woocommerce ul.products li.product .product-details .button,
  .woocommerce ul.products li.product .button { padding: 9px 6px !important; font-size: 0.62rem !important; letter-spacing: 0 !important; line-height: 1.2; white-space: normal; }
  .woocommerce ul.products li.product .product-details .button svg,
  .woocommerce ul.products li.product .button svg { width: 0.95em; height: 0.95em; }
  /* Added state: collapse the label so only the centered check shows (overrides the
     mobile font-size above, which otherwise keeps the wrapped text + an off-centre tick). */
  .woocommerce ul.products li.product .product-details .button.added,
  .woocommerce ul.products li.product .button.added { font-size: 0 !important; min-height: 44px; }
  .woocommerce ul.products li.product .button.added svg { width: 1.1em; height: 1.1em; }
  .woocommerce ul.products li.product .gup-grade { top: 12px; left: 12px; font-size: 0.66rem; padding: 4px 8px; }
}

/* Cart: card-style line items on mobile (match hi-fi 04) */
@media (max-width: 768px) {
  .woocommerce-cart table.cart.shop_table_responsive thead { display: none; }
  .woocommerce-cart table.cart.shop_table_responsive tbody tr.cart_item {
    display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; row-gap: 6px;
    position: relative; border: 1px solid var(--gup-border); border-radius: 12px;
    padding: 14px 14px 14px 14px; margin: 0 0 12px; background: #fff !important;
  }
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td {
    display: block; width: auto; padding: 0; margin: 0; border: 0; text-align: left !important;
    font-size: 0.9rem; background: transparent !important;
  }
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td.product-quantity { text-align: left !important; }
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td .quantity { justify-content: flex-start; }
  .woocommerce-cart table.cart.shop_table_responsive tr.cart_item td::before { display: none !important; content: "" !important; }
  .woocommerce-cart table.cart .product-thumbnail { grid-column: 1; grid-row: 1 / span 5; align-self: start; }
  .woocommerce-cart table.cart .product-thumbnail img { width: 72px; height: auto; border-radius: 8px; border: 1px solid var(--gup-border); }
  .woocommerce-cart table.cart .product-name { grid-column: 2; font-family: 'Sora', sans-serif; font-weight: 600; padding-right: 34px; }
  .woocommerce-cart table.cart .product-price { grid-column: 2; color: var(--gup-text-muted); }
  .woocommerce-cart table.cart .product-price::before { content: "Price: " !important; display: inline !important; }
  .woocommerce-cart table.cart .product-quantity { grid-column: 2; margin-top: 2px; }
  .woocommerce-cart table.cart .product-subtotal { grid-column: 2; font-weight: 700; }
  .woocommerce-cart table.cart .product-subtotal::before { content: "Subtotal: " !important; display: inline !important; color: var(--gup-text-muted); font-weight: 400; }
  .woocommerce-cart table.cart .product-remove { position: absolute; top: 8px; right: 10px; }
  .woocommerce-cart table.cart .product-remove a.remove { margin: 0; font-size: 1.4rem; line-height: 1; }
}