/* ═══════════════════════════════════════════════════════════════════ CENFORCE WEBSHOP — "Clinical-direct" concept (Keeps/Nurx lane) White/near-black/bold-yellow-accent (swapped from the original single blue accent). Sharp-to-8px radius. Condensed display type + clean sans body. No gradients, no moodiness, no pill buttons. Confidence through plain statements of fact, not lifestyle imagery or exclusivity language. ═══════════════════════════════════════════════════════════════════ */ :root{ --ink:#1A1A1A; --ink2:#000000; /* ---- Yellow accent system (replaces the old single-blue #1D5FE0 token). Pure yellow fails WCAG contrast as text-on-white or white-on-yellow, so this is a 4-step system rather than one swap-in value: --yellow pure #FFD600 — big surface fills only (buttons, badges, selected states) always paired with near-black text. --yellow-d deep amber #B08600 — hover states on filled elements, AND the default for small icons/borders/dots/underlines on white where pure yellow reads as washed-out. --yellow-ink dark gold #7A5900 — the ONLY value used for standalone readable text (labels, numbers, headline accent words, price highlights) on light backgrounds. ~6.4:1 contrast on white, passes AA. --yellow-l pale wash #FFF3BF — tinted chip/badge backgrounds sitting behind near-black text. ---- */ --yellow:#FFD600; --yellow-d:#B08600; --yellow-ink:#7A5900; --yellow-l:#FFF3BF; --paper:#FFFFFF; --paper-warm:#FAFAF9; --tile:#F2F1EE; --text1:#1A1A1A; --text2:#54524E; --text3:#6B6862; /* darkened from #88857F (~3.68:1, fails AA) to ~5.55:1 on white / ~5.24:1 on --paper-warm, passes WCAG AA for body-size text */ --line:#E4E2DC; --r:6px; --r-lg:10px; --shadow:0 1px 4px rgba(26,26,26,.05),0 10px 24px rgba(26,26,26,.06); --shadow-md:0 4px 10px rgba(26,26,26,.06),0 20px 44px rgba(26,26,26,.12); --shadow-lift:0 16px 32px -12px rgba(26,26,26,.22); --font-display:'Barlow Condensed',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; /* ---- Back-compat aliases: template-parts (cart/checkout drawer, quiz, header, footer, my-account) reference these names directly in inline styles. Most of those remaining call-sites are small icons/borders/dots on white, so --flame now defaults to the visible --yellow-d amber rather than the washed-out pure yellow; the handful of call sites that are actually large fills or readable text were edited directly to var(--yellow) / var(--yellow-ink) at the source (see each template). ---- */ --flame:var(--yellow-d); --flame-d:#8F6C00; --flame-l:var(--yellow); --cream:var(--paper-warm); --cream2:var(--tile); } /* Account-details field hint text: match site body font, override WooCommerce/browser default italic serif */ #account_display_name_description, #account_display_name_description em, .woocommerce-account .description, .woocommerce form .form-row .description, .woocommerce-EditAccountForm .description{font-family:var(--font-body) !important;font-style:normal !important;} *{box-sizing:border-box} ::selection{background:var(--yellow);color:var(--ink)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--paper-warm)} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--paper-warm)} ::-webkit-scrollbar-thumb:hover{background:var(--text3)} html{overflow-x:clip;scrollbar-color:var(--line) var(--paper-warm)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--yellow-d);outline-offset:2px} body{margin:0;font-family:var(--font-body);color:var(--text1);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit} .font-display{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em} .max-w-7xl{max-width:1260px} .mx-auto{margin-left:auto;margin-right:auto} .px-4{padding-left:16px;padding-right:16px} .hidden{display:none} /* ---- Buttons: sharp/modest radius only, solid fills, no pill/gradient ---- */ .btn-flame{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink);padding:15px 30px;border-radius:var(--r);font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--yellow);cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease} .btn-flame:hover{background:var(--yellow-d);border-color:var(--yellow-d);transform:translateY(-2px);box-shadow:var(--shadow)} .btn-flame:active{background:var(--ink2);border-color:var(--ink2);color:#fff;transform:translateY(0);box-shadow:none} .btn-dark{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:14px 28px;border-radius:var(--r);font-weight:700;font-size:14px;text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .15s ease,transform .15s ease} .btn-dark:hover{background:var(--ink2);transform:translateY(-2px)} .btn-outline{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--ink);padding:14px 28px;border-radius:var(--r);font-weight:700;font-size:14px;text-decoration:none;border:1.5px solid var(--line);cursor:pointer;transition:all .15s ease} .btn-outline:hover{border-color:var(--ink);background:var(--paper-warm)} .btn-outline-dark{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--ink);padding:13px 26px;border-radius:var(--r);font-weight:700;font-size:14px;text-decoration:none;border:1.5px solid var(--line);cursor:pointer;transition:all .15s ease} .btn-outline-dark:hover{border-color:var(--yellow-d);color:var(--yellow-ink);background:var(--yellow-l)} .eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow-ink);background:var(--yellow-l);padding:6px 12px;border-radius:99px} .badge-dark{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;padding:5px 11px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.03em} /* ---- Header ---- */ header.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .hdr-row{display:flex;align-items:center;justify-content:space-between;padding:18px 16px;gap:24px} .wordmark{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:-.01em} .vx-logo{display:inline-flex;align-items:center;gap:9px} .vx-logo-mark{display:inline-flex;width:44px;height:44px;flex-shrink:0} .vx-logo-mark svg{width:100%;height:100%} .vx-fcol .vx-logo{gap:8px} .vx-fcol .vx-logo-mark{width:34px;height:34px} .hdr-nav{display:flex;gap:28px;align-items:center} .hdr-nav a{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--text2);transition:color .15s;position:relative;padding-bottom:4px} .hdr-nav a.active,.hdr-nav a:hover{color:var(--ink)} .hdr-nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--yellow-d)} .hdr-actions{display:flex;align-items:center;gap:10px} .icon-link{position:relative;width:40px;height:40px;border-radius:var(--r);background:var(--paper-warm);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);transition:all .15s ease;border:1px solid var(--line)} .icon-link:hover{background:var(--ink);border-color:var(--ink);color:#fff} .icon-link .count{position:absolute;top:-6px;right:-6px;background:var(--yellow);color:var(--ink);font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff} /* ---- Mobile nav toggle: hidden on desktop, becomes the only way to reach primary nav links below 760px where the 5-link inline nav has no room. ---- */ .hdr-burger{display:none;width:40px;height:40px;border-radius:var(--r);background:var(--paper-warm);border:1px solid var(--line);align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-size:18px} .hdr-nav-head{display:none} @media(max-width:760px){ .hdr-burger{display:flex} .hdr-nav{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:20px 24px 24px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);z-index:70;overflow-y:auto} .hdr-nav.is-open{transform:translateX(0)} .hdr-nav-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 0 20px;margin-bottom:12px;border-bottom:1px solid var(--line)} .hdr-nav-head-label{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--text2)} .hdr-nav-close{width:40px;height:40px;border-radius:50%;background:var(--paper-warm);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;font-size:15px;transition:background .2s ease} .hdr-nav-close:hover{background:var(--yellow);border-color:var(--yellow)} .hdr-nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;font-family:var(--font-display);font-weight:700} .hdr-nav a.active::after{display:none} .hdr-nav a.active{color:var(--yellow-ink)} body.vx-nav-open{overflow:hidden} } /* ---- Promo/compliance strip above header (Nurx-style) ---- */ .promo-strip{background:var(--ink);color:#fff;text-align:center;padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.01em} /* The currency switcher (mu-plugin) docks into this strip on some sites via data-mam-dock, making it flex with the switcher pinned right. On phones the strip text - "Licensed pharmacy partners / 14-16 day discreet US shipping / Real pharmacist support" - plus the switcher together no longer fit on one line and wrapped/overflowed - client-reported. Below 640px, scroll the text as a marquee instead of wrapping it; the switcher stays a normal (non-scrolling) flex sibling so it's still clickable. .promo-strip-track[aria-hidden] is the duplicate copy needed for a seamless loop - hidden outside the media query so desktop shows the text once, exactly as before. */ .promo-strip-track[aria-hidden]{display:none} @media(max-width:640px){ .promo-strip{overflow:hidden} .promo-strip-text{display:block;flex:1;min-width:0;overflow:hidden} .promo-strip-marquee{display:flex;width:max-content;animation:promo-marquee 14s linear infinite} .promo-strip-track{flex-shrink:0;padding-right:40px;white-space:nowrap} .promo-strip-track[aria-hidden]{display:block} } @keyframes promo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .promo-strip strong{color:var(--yellow);font-weight:800} @media(max-width:480px){.promo-strip{font-size:10.5px;padding:7px 10px;line-height:1.5}} /* ---- Hero: light bg, real product-pack photography, plain statements ---- */ .hero-clinical{background:var(--paper);padding:56px 0 0;overflow:hidden} .hero-clinical-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center} @media(max-width:900px){.hero-clinical-grid{grid-template-columns:1fr;gap:32px}} .hero-clinical-copy{max-width:520px;padding-bottom:56px} .hero-clinical h1{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.6vw,64px);line-height:.96;color:var(--ink);margin:18px 0 20px;letter-spacing:-.01em} .hero-clinical h1 .accent{color:var(--yellow-ink);position:relative;white-space:nowrap} .hero-clinical h1 .accent::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.22em;background:var(--yellow);z-index:-1;opacity:.55} .hero-clinical p{color:var(--text2);font-size:16px;line-height:1.65;max-width:460px;margin-bottom:30px} .hero-clinical-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px} .hero-clinical-facts{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text3)} .hero-clinical-facts span{display:flex;align-items:center;gap:6px} .hero-clinical-facts i{color:var(--yellow-d)} .hero-clinical-photo{position:relative;background:var(--tile);height:100%;min-height:420px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-lg);box-shadow:var(--shadow-lift)} .hero-clinical-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)} /* Floating verified-rating card on the hero photo - a small authenticity cue (Keeps/Hims-style) rather than pure lifestyle imagery. */ .hero-rating-badge{position:absolute;left:20px;bottom:20px;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:12px 16px;display:flex;align-items:center;gap:10px;max-width:220px} .hero-rating-badge .ico{display:flex;align-items:center;justify-content:center;color:var(--yellow-ink);font-size:20px;flex-shrink:0} .hero-rating-badge .txt{font-size:11.5px;color:var(--text2);line-height:1.3} .hero-rating-badge .txt strong{color:var(--ink);font-weight:800} @media(max-width:900px){.hero-clinical-photo{min-height:280px}} @media(max-width:480px){.hero-clinical{padding:36px 0 0}.hero-clinical-copy{padding-bottom:36px}.hero-clinical-cta{flex-direction:column}.hero-clinical-cta .btn-flame,.hero-clinical-cta .btn-outline-dark{justify-content:center;width:100%}.hero-clinical-facts{gap:12px 20px}.hero-rating-badge{left:12px;bottom:12px;padding:10px 12px}} /* ---- Stat bar: directly under hero, ink background, plain numbers ---- */ .stat-bar{background:var(--ink)} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .stat-cell{padding:26px 20px;text-align:center;border-left:1px solid rgba(255,255,255,.12)} .stat-cell:first-child{border-left:none} .stat-cell .n{font-family:var(--font-display);font-weight:800;font-size:28px;color:#fff} .stat-cell .l{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;margin-top:4px} @media(max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}.stat-cell:nth-child(2n+1){border-left:none}.stat-cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}} /* ---- Comparison spec table: decision-support, spreadsheet-plain ---- */ .compare-table{width:100%;border-collapse:collapse;background:var(--paper)} .compare-table th{text-align:left;padding:15px 18px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);border-bottom:2px solid var(--ink)} .compare-table th.hl{color:var(--yellow-ink)} .compare-table td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text2)} .compare-table tr:last-child td{border-bottom:none} .compare-table td.hl{color:var(--ink);font-weight:700} .compare-table td.prod-name{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)} .compare-table tbody tr:hover{background:var(--yellow-l)} @media(max-width:640px){.compare-table th,.compare-table td{padding:12px 12px;font-size:13px}} /* ---- Product showcase: flat clean grid, product photo + facts (not a moody overlay bento) ---- */ .showcase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.showcase-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.showcase-grid{grid-template-columns:1fr;gap:14px}} .showcase-item{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;background:var(--paper);transition:border-color .15s ease,transform .2s ease,box-shadow .2s ease} .showcase-item:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:var(--shadow-lift)} .showcase-item .ph{background:var(--tile);height:160px;overflow:hidden;position:relative} .showcase-item .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease} .showcase-item:hover .ph img{transform:scale(1.06)} .showcase-item .bd{padding:16px} .showcase-item .cat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow-ink);margin-bottom:5px} .showcase-item .name{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:15px;line-height:1.25;margin-bottom:6px} .showcase-item .price{font-size:13px;font-weight:700;color:var(--ink)} /* ---- Why-us: numbered benefit stack, single column, plain facts ---- */ .benefit-stack{display:flex;flex-direction:column} .benefit-row{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line);align-items:start} .benefit-row:last-child{border-bottom:1px solid var(--line)} .benefit-row .num{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);line-height:1;background:var(--yellow);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .benefit-row h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 8px} .benefit-row p{font-size:14px;color:var(--text2);line-height:1.7;margin:0;max-width:520px} @media(max-width:480px){.benefit-row{grid-template-columns:40px 1fr;gap:14px;padding:20px 0}.benefit-row .num{width:36px;height:36px;font-size:14px}} /* ---- Testimonial carousel: Swiper.js (CDN, MIT) — was a plain unscrollable overflow row with no snap/controls; converted to a real touch-swipe / pagination carousel so it reads as a designed module, not a text list. ---- */ .review-swiper{padding-bottom:44px!important;overflow-x:hidden!important;overflow-y:visible!important} .review-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--paper);height:auto;transition:box-shadow .2s ease,border-color .2s ease} .review-swiper .swiper-slide{height:auto;display:flex} .review-swiper .swiper-slide .review-card{width:100%} .review-card:hover{box-shadow:var(--shadow);border-color:var(--ink)} .review-stars{display:flex;gap:2px;margin-bottom:12px} .review-stars i{color:var(--yellow-d);font-size:12px} .review-card p{font-size:14px;line-height:1.65;color:var(--text1);margin:0 0 16px} .review-name{font-size:12.5px;font-weight:700;color:var(--ink)} .review-loc{font-size:11.5px;color:var(--text3)} .review-swiper .swiper-pagination{bottom:0!important} .review-swiper .swiper-pagination-bullet{background:var(--line);opacity:1;width:7px;height:7px} .review-swiper .swiper-pagination-bullet-active{background:var(--yellow-d);width:20px;border-radius:4px} .review-nav{display:flex;gap:8px} .review-nav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s} .review-nav button:hover{border-color:var(--ink);background:var(--ink);color:#fff} .review-nav button.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none} /* ---- Shop page: top tab filter ---- */ .shop-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:32px;border-bottom:1px solid var(--line)} .shop-tabs a{flex-shrink:0;padding:12px 4px;margin-right:24px;font-size:13.5px;font-weight:700;color:var(--text3);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s;display:inline-flex;align-items:center;gap:6px} .shop-tabs a i{font-size:12px;color:var(--yellow-d)} .shop-tabs a.active,.shop-tabs a:hover{color:var(--ink);border-bottom-color:var(--yellow-d)} @media(max-width:480px){.shop-tabs a{margin-right:16px;font-size:12.5px}} /* ---- Product grid & card ---- */ .shop-filter-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:100%} .shop-sort-form{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-top:2px;max-width:100%} @media(max-width:560px){ .shop-filter-row{flex-direction:column;align-items:stretch} .shop-sort-form{width:100%} .shop-sort-form select{flex:1;min-width:0} } .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.shop-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.shop-grid{grid-template-columns:1fr;gap:14px}} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .15s ease,box-shadow .15s ease} .product-card{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;position:relative;transition:border-color .15s ease,box-shadow .2s ease,transform .2s ease} .product-card:hover{border-color:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(-4px)} .prod-img-wrap{background:var(--tile);position:relative;overflow:hidden;height:200px} .prod-img-wrap img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .35s ease} .product-card:hover .prod-img-wrap img{transform:scale(1.06)} .prod-body{padding:16px 18px;border-top:1px solid var(--line)} .prod-cat{font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--yellow-ink);margin-bottom:6px} .prod-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:8px;line-height:1.3} .prod-price{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)} /* ---- Single product: spec-strip tags, sharp tags not pills ---- */ .pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start} /* Grid items default to min-width:auto (content-based min size) - long pack-pill label text with no wrap room was forcing the single mobile column wider than the viewport, dragging image/details/pack-table/ add-to-cart along with it and clipping them off-screen (body has overflow-x:hidden, so the excess width doesn't scroll, it's just cut off) - client-reported on mobile. */ .pdp-grid > *{min-width:0} @media(max-width:900px){.pdp-grid{grid-template-columns:1fr;gap:32px}} .pdp-img{background:var(--tile);border-radius:var(--r-lg);aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;cursor:zoom-in} .pdp-img img{width:100%;height:100%;object-fit:cover} .pdp-img .zoom-hint{position:absolute;bottom:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:14px;box-shadow:var(--shadow)} .spec-strip{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px} .spec-pill{display:flex;flex-direction:column;gap:2px;background:var(--paper-warm);border:1px solid var(--line);border-radius:4px;padding:9px 14px} .spec-pill .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)} .spec-pill .v{font-size:12.5px;font-weight:700;color:var(--ink)} .pdp-trust-strip{display:flex;gap:20px;flex-wrap:wrap;padding:16px 18px;background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--r);margin-top:18px} .pdp-trust-strip span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);font-weight:600} .pdp-trust-strip i{color:var(--yellow-d);font-size:14px} .pdp-desc{color:var(--text2);line-height:1.8;font-size:14px} .pdp-desc h1,.pdp-desc h2,.pdp-desc h3,.pdp-desc h4{font-family:var(--font-display);font-weight:700;color:var(--ink);margin:1.5em 0 .6em} .pdp-desc h1{font-size:24px} .pdp-desc h2{font-size:20px} .pdp-desc h3{font-size:16px} .pdp-desc h4{font-size:14px} .pdp-desc h1:first-child,.pdp-desc h2:first-child,.pdp-desc h3:first-child,.pdp-desc h4:first-child{margin-top:0} .pdp-desc p{margin:0 0 1em} .pdp-desc ul{list-style:none;padding:0;margin:0 0 1em} .pdp-desc ol{margin:0 0 1em;padding-left:1.3em} .pdp-desc ol li{margin-bottom:8px;line-height:1.6} .pdp-desc table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:13.5px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)} .pdp-desc table thead th{background:var(--tile);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)} .pdp-desc table tbody td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--text2);line-height:1.6;vertical-align:top} .pdp-desc table tbody tr:last-child td{border-bottom:none} .pdp-desc table tbody td:first-child{color:var(--ink);font-weight:700;width:32%} .pdp-desc ul li{position:relative;padding-left:22px;margin-bottom:8px;line-height:1.6} .pdp-desc ul li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--yellow-d)} @media(max-width:480px){.pdp-grid{gap:24px}.spec-strip{gap:6px}.spec-pill{padding:7px 11px}} /* ---- Spec-grid box (redesign of the old flat .spec-strip pill row): real grid lines via gap+background trick (no per-cell border juggling needed regardless of field count), micro-label + bold value hierarchy, small eyebrow header above so it reads as a considered module. ---- */ .spec-grid-label{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:22px 0 10px} .spec-grid-label i{color:var(--yellow-d)} .spec-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px} .spec-cell{background:var(--paper);padding:13px 16px;transition:background .15s ease;box-shadow:-1px -1px 0 0 var(--line);margin:1px 0 0 1px} .spec-cell:hover{background:var(--paper-warm)} .spec-cell .k{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:4px} .spec-cell .v{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3} @media(max-width:640px){.spec-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:400px){.spec-cell{padding:11px 13px}.spec-cell .v{font-size:12.5px}} .spec-table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:22px} .spec-table{width:100%;border-collapse:collapse} .spec-table tr{border-bottom:1px solid var(--line)} .spec-table tr:last-child{border-bottom:none} .spec-table td{padding:12px 16px;vertical-align:top} .spec-table td.k{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);width:38%;white-space:nowrap;background:var(--paper-warm)} .spec-table td.v{font-size:13px;font-weight:700;color:var(--ink)} @media(max-width:480px){.spec-table td{padding:10px 12px}.spec-table td.k{font-size:9px;white-space:normal}} /* ---- Average-rating summary row (title area, links down to #reviews) ---- */ .pdp-rating-row{display:flex;align-items:center;gap:8px;margin:2px 0 4px} .pdp-rating-row .stars{display:flex;gap:1px;font-size:12.5px} .pdp-rating-row .avg{font-weight:700;font-size:13px;color:var(--ink)} .pdp-rating-row .count{font-size:12.5px;color:var(--text3);text-decoration:underline;text-underline-offset:2px} .pdp-rating-row .count:hover{color:var(--yellow-ink)} /* ---- Pack-size selector (critical fix: variable products previously rendered a flat simple-product buy box with no way to choose a pack size at all — see woocommerce/single-product.php). One radio-styled pill per variation; JS toggles .is-selected, swaps the price shown on the Add to Cart button, and rebuilds the hidden attribute_* fields to match the selected variation. ---- */ .pack-select{display:flex;flex-direction:column;gap:8px} .pack-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .15s ease,background .15s ease;position:relative} .pack-pill:hover{border-color:var(--yellow-d)} .pack-pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .pack-pill-label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ink);min-width:0} .pack-pill-label::before{content:'';width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;transition:all .15s ease;box-sizing:border-box} .pack-pill-price{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text2);flex-shrink:0} .pack-pill.is-selected{border-color:var(--ink);background:var(--yellow-l)} .pack-pill.is-selected .pack-pill-label::before{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3px var(--yellow-l)} .pack-pill.is-selected .pack-pill-price{color:var(--ink)} .pack-pill-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--yellow-ink);background:var(--yellow-l);padding:3px 8px;border-radius:3px} .pack-pill.is-selected .pack-pill-badge{background:var(--paper);} @media(max-width:400px){.pack-pill{padding:11px 13px}.pack-pill-label{font-size:13px;gap:8px}.pack-pill-price{font-size:14px}} /* ---- Product reviews (WooCommerce core review template, loaded via comments_template() -> WC_Comments::comments_template_loader()). Themes the default WC markup/classnames to match the site instead of relying on WooCommerce's own generic frontend stylesheet. ---- */ #reviews.woocommerce-Reviews{margin-top:4px;max-width:760px} .woocommerce-Reviews-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin:0 0 18px} ol.commentlist{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px} ol.commentlist li.review,ol.commentlist li.comment{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;background:var(--paper)} .commentlist .comment_container{display:flex;gap:14px;align-items:flex-start} .commentlist .avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0} .commentlist .comment-text{flex:1;min-width:0} .commentlist .star-rating{margin-bottom:6px} .woocommerce-review__author{font-weight:700;font-size:13.5px;color:var(--ink)} .woocommerce-review__dash{color:var(--text3);margin:0 4px} .woocommerce-review__published-date{font-size:11.5px;color:var(--text3)} .commentlist .description p{font-size:13.5px;color:var(--text2);line-height:1.7;margin:6px 0 0} /* Star widget: overlay-by-percentage trick so it renders correctly even if WooCommerce's own icon-font stylesheet isn't enqueued by this theme. */ .star-rating{position:relative;height:14px;line-height:14px;font-size:14px;width:5.4em;font-family:sans-serif;letter-spacing:2px;color:var(--line);overflow:hidden} .star-rating::before{content:"\2605\2605\2605\2605\2605";position:absolute;top:0;left:0;color:var(--line)} .star-rating span{position:absolute;top:0;left:0;overflow:hidden;color:var(--yellow-d)} .star-rating span::before{content:"\2605\2605\2605\2605\2605";position:absolute;top:0;left:0} #review_form_wrapper{border-top:1px solid var(--line);padding-top:24px;max-width:760px} #respond .comment-reply-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);display:block;margin-bottom:14px} #respond .comment-form-rating{margin-bottom:14px} #respond p label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);margin-bottom:6px} #respond textarea,#respond input[type=text],#respond input[type=email]{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper)} #respond textarea:focus,#respond input:focus{outline:none;border-color:var(--yellow-d);box-shadow:0 0 0 3px var(--yellow-l)} #respond p{margin:0 0 14px} #respond .form-submit{margin-bottom:0} #respond #submit,#respond input#submit.submit{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:9px;background:var(--yellow)!important;color:var(--ink)!important;padding:13px 26px;border-radius:var(--r);font-weight:700!important;font-size:13.5px;border:1px solid var(--yellow)!important;cursor:pointer} #respond #submit:hover,#respond input#submit.submit:hover{background:var(--yellow-d)!important;border-color:var(--yellow-d)!important} .woocommerce-noreviews{color:var(--text3);font-size:13.5px} .woocommerce-verified{color:var(--yellow-ink);font-size:11px;font-weight:700} /* ---- Rich-text content tables (product description, page/post content) sitewide: any a content editor adds via the WYSIWYG editor gets wrapped in a scrollable container by JS (see functions.php wp_footer hook) and themed here — border, header row, zebra striping, horizontal scroll on mobile — instead of rendering as bare unstyled HTML. ---- */ .vx-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 1.4em} .vx-table-scroll table{width:100%;min-width:460px;border-collapse:collapse;margin:0;font-size:13.5px} .vx-table-scroll table thead{background:var(--ink)} .vx-table-scroll table th{padding:12px 16px;text-align:left;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap} .vx-table-scroll table td{padding:12px 16px;border-top:1px solid var(--line);color:var(--text2);font-size:13.5px} .vx-table-scroll table tbody tr:nth-child(even){background:var(--paper-warm)} .vx-table-scroll table tbody tr:hover{background:var(--yellow-l)} .vx-table-scroll table:not(:has(thead)) tr:first-child td{background:var(--ink);color:#fff;font-weight:700;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em} /* ---- Shop-by-category rail (homepage) ---- */ .cat-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.cat-rail{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.cat-rail{grid-template-columns:1fr;gap:12px}} .cat-card{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;background:var(--paper);transition:all .18s ease} .cat-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow-lift)} .cat-card .ico{width:46px;height:46px;border-radius:50%;background:var(--yellow-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:19px;color:var(--yellow-ink)} .cat-card .name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:2px} .cat-card .count{font-size:12px;color:var(--text3)} /* ---- Header search (icon toggles an overlay panel scoped to WooCommerce product search: hidden post_type=product field + GET to home_url so WooCommerce's own template_loader routes results through the themed archive-product.php shop grid). ---- */ .vx-search-panel{position:fixed;top:0;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(26,26,26,.1);padding:18px 16px;z-index:50;transform:translateY(-100%);opacity:0;transition:transform .22s cubic-bezier(.22,.61,.36,1),opacity .22s ease;pointer-events:none} .vx-search-panel.is-open{transform:translateY(0);opacity:1;pointer-events:auto} .vx-search-form{position:relative;max-width:640px;margin:0 auto;display:flex;gap:10px;align-items:center} .vx-search-form input[type=search]{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--paper-warm)} .vx-search-form input[type=search]:focus{outline:none;border-color:var(--yellow-d);background:var(--paper)} .vx-search-form button[type=submit]{display:flex;align-items:center;gap:8px;background:var(--yellow);color:var(--ink);border:1px solid var(--yellow);border-radius:var(--r);padding:13px 20px;font-weight:700;font-size:14px;cursor:pointer;flex-shrink:0} .vx-search-form button[type=submit]:hover{background:var(--yellow-d)} .vx-search-close{width:40px;height:40px;border-radius:var(--r);border:1px solid var(--line);background:var(--paper-warm);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .vx-search-close:hover{border-color:var(--ink)} /* ---- Live search suggestions dropdown (client-reported: no suggestions shown as-you-type) ---- */ .vx-search-suggest{display:none;position:absolute;left:0;right:0;top:100%;margin-top:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);max-height:360px;overflow-y:auto;z-index:5} .vx-search-suggest.is-open{display:block} .vx-search-suggest-item{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;border-bottom:1px solid var(--line)} .vx-search-suggest-item:last-child{border-bottom:none} .vx-search-suggest-item:hover{background:var(--paper-warm)} .vx-search-suggest-img{width:36px;height:36px;border-radius:var(--r);overflow:hidden;background:var(--tile);flex-shrink:0} .vx-search-suggest-img img{width:100%;height:100%;object-fit:cover} .vx-search-suggest-name{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)} .vx-search-suggest-price{font-size:12.5px;font-weight:700;color:var(--yellow-ink);flex-shrink:0} @media(max-width:640px){.vx-search-suggest{max-height:280px}} /* ---- Fields ---- */ .label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);margin-bottom:6px} .field{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper)} .field:focus{outline:none;border-color:var(--yellow-d);box-shadow:0 0 0 3px var(--yellow-l)} /* ---- Footer: ink background, plain link list, no gradient ---- */ footer.site-footer{background:var(--ink);color:rgba(255,255,255,.6)} .vx-newsletter{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:44px} .vx-newsletter h3{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin:0 0 4px} .vx-newsletter p{font-size:13px;color:rgba(255,255,255,.55);margin:0} .vx-newsletter form{display:flex;gap:10px;flex-shrink:0;width:100%;max-width:360px} .vx-newsletter input{flex:1;padding:12px 14px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-family:var(--font-body);font-size:13.5px} .vx-newsletter input::placeholder{color:rgba(255,255,255,.4)} .vx-newsletter input:focus{outline:none;border-color:var(--yellow)} .vx-trust-row{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)} .vx-trust-row span{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.6);font-weight:600} .vx-trust-row i{color:var(--yellow);font-size:16px} .vx-fcol h4{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 18px} .vx-fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .vx-fcol a{font-size:13.5px;color:rgba(255,255,255,.65);text-decoration:none;transition:color .15s} .vx-fcol a:hover{color:var(--yellow)} @media(max-width:640px){.vx-newsletter{flex-direction:column;align-items:flex-start;padding:24px}.vx-newsletter form{max-width:100%}.vx-trust-row{gap:16px 24px}} /* ---- Scroll-reveal ---- */ [data-aos]{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)} [data-aos].aos-in{opacity:1;transform:none} [data-aos="left"]{transform:translateX(-22px)} [data-aos="left"].aos-in{transform:none} [data-aos="right"]{transform:translateX(22px)} [data-aos="right"].aos-in{transform:none} @media(prefers-reduced-motion:reduce){[data-aos]{opacity:1!important;transform:none!important;transition:none!important}} /* Per-item stagger reveal for grid containers: rather than fading the whole .cat-rail/.showcase-grid/.benefit-stack in as one block, the container itself becomes a plain visibility wrapper and each direct child gets its own fade, with an incremental transitionDelay set per-child by the IntersectionObserver in header.php (0.06-0.1s per item) so grids read as "considered," not a single flat block. */ .cat-rail[data-aos],.showcase-grid[data-aos],.benefit-stack[data-aos]{opacity:1;transform:none;transition:none} .cat-rail[data-aos]>*,.showcase-grid[data-aos]>*,.benefit-stack[data-aos]>*{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)} .cat-rail[data-aos].aos-in>*,.showcase-grid[data-aos].aos-in>*,.benefit-stack[data-aos].aos-in>*{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.cat-rail[data-aos]>*,.showcase-grid[data-aos]>*,.benefit-stack[data-aos]>*{opacity:1!important;transform:none!important;transition:none!important}} /* Add-to-cart success pulse (item 14): brief scale pulse on the button, restrained rather than bouncy, matching the site's clinical motion register. */ .vx-atc-pulse{animation:vxAtcPulse .18s ease-out} @keyframes vxAtcPulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}} @media(prefers-reduced-motion:reduce){.vx-atc-pulse{animation:none}} /* Pack-size price crossfade (item 15): #vxPackPrice fades out/in around its text swap instead of an instant innerHTML snap, using the existing selected-state yellow wash so the update reads as deliberate. */ #vxPackPrice{display:inline-block;transition:opacity .15s ease,color .15s ease} #vxPackPrice.vx-price-fade{opacity:0;color:var(--yellow-ink)} /* ---- Callout / note-tip content block (client request, [callout] shortcode in functions.php, usable in both product descriptions and blog/page content) ---- */ .vx-callout{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line);margin:0 0 1.4em;background:var(--paper-warm)} .vx-callout-ico{font-size:16px;margin-top:2px;flex-shrink:0} .vx-callout-label{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px} .vx-callout-body p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text2)} .vx-callout-body p:not(:last-child){margin-bottom:.6em} .vx-callout-tip{background:var(--yellow-l);border-color:var(--yellow-d)} .vx-callout-tip .vx-callout-ico,.vx-callout-tip .vx-callout-label{color:var(--yellow-ink)} .vx-callout-warning{background:#FEF2F2;border-color:#dc2626} .vx-callout-warning .vx-callout-ico,.vx-callout-warning .vx-callout-label{color:#dc2626} .vx-callout-info{background:var(--tile);border-color:var(--line)} .vx-callout-info .vx-callout-ico,.vx-callout-info .vx-callout-label{color:var(--text2)} /* ---- WooCommerce overrides ---- */ .woocommerce table.shop_table,.wc-block-cart,.wc-block-checkout{font-family:var(--font-body)} .woocommerce a.button,.woocommerce button.button,.wc-block-components-button:not(.is-link)>.wc-block-components-button__text,.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button,.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button{background:var(--yellow)!important;color:var(--ink)!important;border-radius:var(--r)!important;font-weight:700!important} .woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--yellow-d)!important;color:var(--ink)!important} .woocommerce-MyAccount-navigation ul{list-style:none;padding:0} .woocommerce-MyAccount-navigation li a{display:block;padding:12px 16px;border-radius:var(--r);text-decoration:none;color:var(--text2);font-weight:600;font-size:14px} .woocommerce-MyAccount-navigation li.is-active a{background:var(--yellow-l);color:var(--yellow-ink)} .woocommerce-message,.woocommerce-info{border-top-color:var(--yellow-d)!important} /* ---- Mini-cart (cart drawer content, rendered via wc_get_template) ---- */ .woocommerce-mini-cart.cart_list{list-style:none;margin:0;padding:0;min-width:0} .woocommerce-mini-cart-item.mini_cart_item{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);min-width:0} .woocommerce-mini-cart-item.mini_cart_item:first-child{border-top:1px solid var(--line)} .woocommerce-mini-cart-item.mini_cart_item img{width:56px;height:56px;object-fit:cover;border-radius:var(--r);background:var(--paper-warm);flex-shrink:0} .woocommerce-mini-cart-item.mini_cart_item a:not(.remove){font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;line-height:1.3;display:block;padding-right:22px;flex:1;min-width:0;overflow-wrap:break-word} .woocommerce-mini-cart-item.mini_cart_item .quantity{display:block;font-size:12px;color:var(--text3);margin-top:4px} .woocommerce-mini-cart-item.mini_cart_item .remove.remove_from_cart_button{position:absolute;top:14px;right:0;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:var(--paper-warm);color:var(--text2);text-decoration:none;font-size:14px} .woocommerce-mini-cart-item.mini_cart_item .remove.remove_from_cart_button:hover{background:var(--yellow);color:var(--ink)} /* Visual hit-target stays a modest 20px circle to match the drawer's dense list density, but the tappable area is expanded to the 44px touch-target floor via a transparent ::before so it doesn't cost layout space. */ .woocommerce-mini-cart-item.mini_cart_item .remove.remove_from_cart_button::before{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)} .woocommerce-mini-cart__total.total{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);padding:18px 0;border-top:1.5px solid var(--ink);margin:6px 0 14px} .woocommerce-mini-cart__buttons.buttons{display:flex;flex-direction:column;gap:10px} .woocommerce-mini-cart__buttons.buttons a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-decoration:none;padding:13px 20px;border-radius:var(--r);font-weight:700;font-size:13.5px;min-height:44px} .woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout){background:transparent;color:var(--ink);border:1.5px solid var(--line)} .woocommerce-mini-cart__buttons.buttons a.wc-forward:not(.checkout):hover{border-color:var(--yellow-d);color:var(--yellow-ink)} .woocommerce-mini-cart__buttons.buttons a.checkout{background:var(--yellow);color:var(--ink);border:1px solid var(--yellow)} .woocommerce-mini-cart__buttons.buttons a.checkout:hover{background:var(--yellow-d)} .woocommerce-mini-cart__empty-message{text-align:center;padding:40px 0;color:var(--text3);font-size:13.5px;display:flex;flex-direction:column;align-items:center;gap:14px} .woocommerce-mini-cart__empty-message::before{content:'\f22e';font-family:'bootstrap-icons';font-size:32px;color:var(--cream2)} /* ---- Cart quantity stepper: woocommerce_quantity_input() ships a bare number input with no theme styling at all (browser-default spinner, ~24px tall) - themed here to match .field and given a 44px min touch target for mobile. Covers both the full cart page and mini-cart/drawer. ---- */ .quantity input.qty,input.qty{width:64px;min-height:44px;padding:8px 10px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);text-align:center} .quantity input.qty:focus,input.qty:focus{outline:none;border-color:var(--yellow-d)} @media(max-width:480px){.quantity input.qty,input.qty{width:56px}} /* ---- Checkout drawer content: WC's own form rendered inline ---- */ #vxCheckoutBody .woocommerce-billing-fields h3,#vxCheckoutBody #order_review_heading{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);margin:0 0 12px} #vxCheckoutBody .form-row label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);margin-bottom:6px;display:block} #vxCheckoutBody input.input-text,#vxCheckoutBody select,#vxCheckoutBody textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper)} #vxCheckoutBody input.input-text:focus,#vxCheckoutBody select:focus,#vxCheckoutBody textarea:focus{outline:none;border-color:var(--yellow-d)} #vxCheckoutBody table.shop_table{width:100%;border-collapse:collapse;font-size:13.5px} #vxCheckoutBody table.shop_table th,#vxCheckoutBody table.shop_table td{padding:10px 0;border-bottom:1px solid var(--line);text-align:left} #vxCheckoutBody table.shop_table td{text-align:right} #vxCheckoutBody table.shop_table th{text-align:left;color:var(--text2)} #vxCheckoutBody .wc_payment_methods{list-style:none;margin:16px 0;padding:0} #vxCheckoutBody .wc_payment_method{border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px} #vxCheckoutBody .payment_box{margin-top:10px;font-size:13px;color:var(--text2)} #vxCheckoutBody #place_order{width:100%;background:var(--yellow);color:var(--ink);border:1px solid var(--yellow);border-radius:var(--r);padding:15px 20px;font-weight:700;font-size:14.5px;cursor:pointer;margin-top:16px} #vxCheckoutBody #place_order:hover{background:var(--yellow-d)} #vxCheckoutBody #place_order:disabled{opacity:.6;cursor:default} #vxCheckoutBody .woocommerce-error,#vxCheckoutBody .woocommerce-NoticeGroup-checkout ul{list-style:none;margin:0 0 16px;padding:14px 16px;border-radius:var(--r);background:#fef2f2;color:#dc2626;font-size:13px} /* The full-page checkout template's 2-column grid is sized for the viewport via a max-width media query, but inside the 600px-wide checkout drawer the viewport itself is still desktop-width - so that media query never fires even though the drawer's actual content column is narrow. Force single column whenever the checkout markup renders inside the drawer specifically. */ #vxCheckoutBody #vxCheckoutLayout{grid-template-columns:1fr!important;gap:24px!important} #vxCheckoutBody #order_review{position:static!important;top:auto!important} /* ---- Full-page checkout (woocommerce/checkout/form-checkout.php): same payment-method + form theming as the drawer above, previously only scoped to #vxCheckoutBody so the standalone /checkout/ page rendered the payment methods list with WooCommerce's bare default styling instead of matching the site. ---- */ .woocommerce-checkout .form-row{margin-bottom:16px} .woocommerce-checkout .form-row label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);margin-bottom:6px;display:block} .woocommerce-checkout input.input-text,.woocommerce-checkout select,.woocommerce-checkout textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper)} .woocommerce-checkout input.input-text:focus,.woocommerce-checkout select:focus,.woocommerce-checkout textarea:focus{outline:none;border-color:var(--yellow-d)} .woocommerce-checkout table.shop_table{width:100%;border-collapse:collapse;font-size:13.5px} .woocommerce-checkout table.shop_table th,.woocommerce-checkout table.shop_table td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left} .woocommerce-checkout table.shop_table td:not(.product-name){text-align:right} .woocommerce-checkout table.shop_table th{text-align:left;color:var(--text2)} .woocommerce-checkout .wc_payment_methods{list-style:none;margin:16px 0;padding:0} .woocommerce-checkout .wc_payment_method{border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px} .woocommerce-checkout .payment_box{margin-top:10px;font-size:13px;color:var(--text2)} .woocommerce-checkout #place_order{width:100%;background:var(--yellow)!important;color:var(--ink)!important;border:1px solid var(--yellow)!important;border-radius:var(--r);padding:15px 20px;font-weight:700;font-size:14.5px;cursor:pointer;margin-top:16px} .woocommerce-checkout #place_order:hover{background:var(--yellow-d)!important} .woocommerce-checkout .woocommerce-error,.woocommerce-checkout .woocommerce-NoticeGroup-checkout ul{list-style:none;margin:0 0 16px;padding:14px 16px;border-radius:var(--r);background:#fef2f2;color:#dc2626;font-size:13px} /* ---- Rx upload (site-core plugin, checkout step 1 — both the full /checkout/ page and the AJAX-loaded checkout drawer). Previously hardcoded a raw #cc0000 dashed border with no design-token integration and a bare unstyled ; brought in line with the rest of the checkout's card/ token system and given real hover/focus states plus 44px+ touch targets. ---- */ .site-core-rx-upload{margin-bottom:20px;padding:18px;border:1.5px solid var(--line);border-top:3px solid var(--ink);border-radius:var(--r-lg);background:var(--paper-warm)} .site-core-rx-upload-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px} .site-core-rx-upload-ico{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px} .site-core-rx-upload-title{font-family:var(--font-display);font-size:15px;color:var(--ink);margin:0 0 3px} .site-core-rx-upload-sub{font-size:12.5px;color:var(--text3);margin:0;line-height:1.5} .site-core-rx-upload-file{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:12px 14px;border:1.5px dashed var(--line);border-radius:var(--r);background:var(--paper);cursor:pointer;transition:border-color .15s ease,background .15s ease} .site-core-rx-upload-file:hover{border-color:var(--yellow-d);background:var(--yellow-l)} .site-core-rx-upload-file:focus-within{border-color:var(--yellow-d);outline:2px solid var(--yellow-d);outline-offset:2px} .site-core-rx-upload-file i{font-size:16px;color:var(--yellow-ink);flex-shrink:0} .site-core-rx-upload-file-text{font-size:12.5px;color:var(--text2);line-height:1.4} .site-core-rx-upload-file.has-file{border-style:solid;border-color:var(--yellow-d)} .site-core-rx-upload-file.has-file .site-core-rx-upload-file-text{color:var(--ink);font-weight:600} .site-core-rx-upload-file.is-disabled{opacity:.5;cursor:default;pointer-events:none} .site-core-rx-upload-file input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .site-core-rx-upload-checkbox{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-size:12.5px;color:var(--text2);cursor:pointer} .site-core-rx-upload-checkbox input[type="checkbox"]{width:18px;height:18px;flex-shrink:0;accent-color:var(--yellow-d);cursor:pointer} @media(max-width:480px){.site-core-rx-upload{padding:16px}.site-core-rx-upload-file-text{font-size:12px}} /* ---- Contact preferences (site-core plugin, checkout step 2) - same off-brand hardcoded #ccc/#ef4444/#666 issue the Rx upload block had; brought in line with the same card/token system. ---- */ .site-core-contact-preferences{margin-bottom:20px;padding:18px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--paper-warm)} .site-core-contact-title{font-family:var(--font-display);font-size:15px;color:var(--ink);margin:0 0 4px} .site-core-contact-req{color:var(--yellow-d)} .site-core-contact-sub{font-size:12.5px;color:var(--text3);margin:0 0 12px;line-height:1.5} .site-core-contact-methods{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .site-core-contact-pill{display:flex;align-items:center;gap:7px;min-height:44px;border:1.5px solid var(--line);border-radius:99px;padding:9px 16px;cursor:pointer;font-size:13px;color:var(--text2);background:var(--paper);transition:border-color .15s ease,background .15s ease,color .15s ease} .site-core-contact-pill:hover{border-color:var(--yellow-d)} .site-core-contact-pill:has(input:checked){border-color:var(--yellow-d);background:var(--yellow-l);color:var(--yellow-ink);font-weight:600} .site-core-contact-pill input[type="checkbox"]{width:16px;height:16px;accent-color:var(--yellow-d);cursor:pointer} .wa-float{position:fixed;bottom:74px;left:16px;z-index:400;width:48px;height:48px;background:linear-gradient(135deg,#25d366,#128c4a);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.45);transition:all .3s cubic-bezier(.34,1.4,.64,1);text-decoration:none} .wa-float:hover{transform:scale(1.15) rotate(8deg);box-shadow:0 8px 32px rgba(37,211,102,.55)} @media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}} .woocommerce-MyAccount-content table th,.woocommerce-MyAccount-content table td{text-align:left;vertical-align:middle} /* ---- Order-received / thank-you / view-order pages - previously fully unstyled default WooCommerce markup, jarring next to the rest of the custom-designed site. Matches the card/table language used elsewhere (checkout review table, mini-cart). ---- */ .woocommerce-order{max-width:900px;margin:0 auto;padding:clamp(32px,6vw,56px) 20px} .woocommerce-order>.woocommerce-notice,.woocommerce-thankyou-order-received{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3vw,26px);color:var(--ink);letter-spacing:-.01em;line-height:1.35;margin:0 0 24px;padding:0;background:none} .woocommerce-order-overview{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:0 0 32px;padding:20px 24px;border:1.5px solid var(--line);border-radius:var(--r-lg);background:var(--paper-warm)} .woocommerce-order-overview li{font-size:13px;color:var(--text3)} .woocommerce-order-overview li strong{display:block;margin-top:4px;font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink)} .woocommerce-order-details__title,.woocommerce-column__title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin:0 0 16px} table.woocommerce-table--order-details{width:100%;border-collapse:collapse;margin-bottom:28px;font-size:13.5px} table.woocommerce-table--order-details thead th{background:var(--ink);color:#fff;text-align:left;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:12px 16px} table.woocommerce-table--order-details thead th.product-total,table.woocommerce-table--order-details tfoot td:last-child{text-align:right} table.woocommerce-table--order-details tbody td,table.woocommerce-table--order-details tfoot td,table.woocommerce-table--order-details tfoot th{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--text1)} table.woocommerce-table--order-details tbody td.product-total,table.woocommerce-table--order-details tfoot td{text-align:right} table.woocommerce-table--order-details tfoot tr:last-child th,table.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:none;padding-top:16px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)} .woocommerce-customer-details{margin-top:8px} .woocommerce-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none;padding:0;margin:0 0 24px} .woocommerce-column{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:20px} .woocommerce-column address{font-style:normal;font-size:13.5px;color:var(--text2);line-height:1.7} @media(max-width:640px){.woocommerce-columns{grid-template-columns:1fr}table.woocommerce-table--order-details{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}} /* Verify-email form (guest order-received page) unstyled by default */ .woocommerce-verify-email{max-width:480px;margin:20px 0 32px} .woocommerce-verify-email .input-text{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);outline:none;box-sizing:border-box;margin-bottom:14px;display:block} .woocommerce-verify-email .input-text:focus{outline:none;border-color:var(--yellow-d)} .woocommerce-verify-email .woocommerce-button{display:inline-flex;align-items:center;justify-content:center;width:100%;background:var(--yellow) !important;color:var(--ink) !important;border:1px solid var(--yellow) !important;border-radius:var(--r);padding:15px 20px;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none} .woocommerce-verify-email .woocommerce-button:hover{background:var(--yellow-d) !important} /* ---- My Account inner section (post-login): Orders/Addresses/Account Details/Log Out content) - previously theme.css only had a handful of nav-link rules (superseded anyway by #vxAccountGrid's own scoped