/* ============================================================
RLAM 1MG — DESIGN SYSTEM
Authoritative stylesheet. Replaces the scraped legacy CSS.
Layered on top of Bootstrap 4 grid only (container/row/col-*).
============================================================ */
/* ---------- 1. TOKENS ---------- */
:root {
/* Brand */
--navy-900:#0b0f24;
--navy-800:#111732;
--navy-700:#1b2347;
--navy-600:#2a3460;
--orange-600:#d97100;
--orange-500:#fe880f;
--orange-400:#ff9f3d;
--orange-100:#fff3e4;
--magenta:#790a3e;
--blush:#fff5f6;
/* Neutrals */
--ink:#14161f;
--ink-70:#4a4f5e;
--ink-50:#6f7585;
--ink-30:#a3a8b5;
--line:#e7e9ef;
--line-soft:#f1f3f7;
--surface:#ffffff;
--surface-2:#f8f9fc;
/* Status */
--success:#12855f;
--success-bg:#e8f7f1;
/* Type */
--font-sans:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--fs-xs:.75rem;
--fs-sm:.875rem;
--fs-base:1rem;
--fs-lg:1.125rem;
--fs-xl:clamp(1.25rem,.6vw + 1.1rem,1.5rem);
--fs-2xl:clamp(1.5rem,1.1vw + 1.25rem,2rem);
--fs-3xl:clamp(1.875rem,1.8vw + 1.4rem,2.75rem);
--fs-4xl:clamp(2.25rem,3vw + 1.5rem,3.75rem);
/* Space */
--sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
--sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
--sp-9:5.5rem;
--section-y:clamp(3rem,6vw,5.5rem);
/* Radius */
--r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
/* Elevation — tinted with brand navy, never pure black */
--sh-xs:0 1px 2px rgba(11,15,36,.06);
--sh-sm:0 2px 6px rgba(11,15,36,.06), 0 1px 2px rgba(11,15,36,.04);
--sh-md:0 8px 24px rgba(11,15,36,.08), 0 2px 6px rgba(11,15,36,.04);
--sh-lg:0 18px 48px rgba(11,15,36,.12), 0 4px 12px rgba(11,15,36,.05);
--sh-orange:0 10px 28px rgba(254,136,15,.32);
/* Motion */
--t-fast:140ms cubic-bezier(.4,0,.2,1);
--t-med:260ms cubic-bezier(.22,.8,.28,1);
}
/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;
font-family:var(--font-sans);
font-size:var(--fs-base);
line-height:1.65;
color:var(--ink);
background:var(--surface);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--orange-600);text-decoration:none;transition:color var(--t-fast);}
a:hover{color:var(--orange-500);}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--orange-500);outline-offset:3px;border-radius:4px;}
::selection{background:var(--orange-100);color:var(--navy-800);}
/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{
margin:0 0 var(--sp-3);
font-weight:800;
line-height:1.18;
letter-spacing:-.021em;
color:var(--navy-800);
text-wrap:balance;
}
h1{font-size:var(--fs-4xl);}
h2{font-size:var(--fs-3xl);}
h3{font-size:var(--fs-2xl);}
h4{font-size:var(--fs-xl);font-weight:700;}
h5,h6{font-size:var(--fs-lg);font-weight:700;}
p{margin:0 0 var(--sp-4);}
strong,b{font-weight:700;color:var(--ink);}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.35em;}
li{margin-bottom:.4em;}
blockquote{
margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);
border-left:4px solid var(--orange-500);
background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;
font-style:italic;color:var(--ink-70);
}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--sp-5);}
section{position:relative;}
.section-pad{padding-block:var(--section-y);}
.section-head{text-align:center;max-width:720px;margin:0 auto var(--sp-7);}
.section-head h2{margin-bottom:var(--sp-3);}
.section-head p{color:var(--ink-50);font-size:var(--fs-lg);margin:0;}
.eyebrow{
display:inline-block;font-size:var(--fs-xs);font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--orange-600);
margin-bottom:var(--sp-3);
}
.accent{color:var(--orange-500);}
/* ---------- 5. BUTTONS ---------- */
.btn,.mainbtn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.wpcf7-submit,.search-submit,
.woocommerce #respond input#submit{
display:inline-flex;align-items:center;justify-content:center;gap:.55em;
padding:.85em 1.75em;
font-family:var(--font-sans);
font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;
line-height:1.2;
border:1px solid transparent;border-radius:var(--r-pill);
background:var(--orange-500);color:#fff;
cursor:pointer;text-decoration:none;
box-shadow:var(--sh-sm);
transition:background var(--t-fast),transform var(--t-med),box-shadow var(--t-med),color var(--t-fast);
}
.btn:hover,.mainbtn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.wpcf7-submit:hover,.search-submit:hover,
.woocommerce #respond input#submit:hover{
background:var(--orange-600);color:#fff;
transform:translateY(-2px);box-shadow:var(--sh-orange);
}
.btn:active,.mainbtn:active{transform:translateY(0);}
.mainbtn.big,.btn-lg{padding:1.05em 2.25em;font-size:var(--fs-base);}
.btn-ghost{
background:transparent;color:var(--navy-800);
border-color:var(--line);box-shadow:none;
}
.btn-ghost:hover{background:var(--surface-2);color:var(--navy-800);border-color:var(--ink-30);box-shadow:var(--sh-xs);transform:translateY(-1px);}
.btn-on-dark{background:#fff;color:var(--navy-800);}
.btn-on-dark:hover{background:var(--orange-500);color:#fff;}
/* ---------- 6. HEADER / NAV ---------- */
.header{
position:sticky;top:0;z-index:900;
background:var(--navy-800);
box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 24px rgba(11,15,36,.28);
}
.header .container{
display:flex;align-items:center;gap:var(--sp-5);
min-height:78px;
}
.header .brand{flex:0 0 auto;}
.header .brand img{max-width:172px;width:100%;height:auto;filter:brightness(0) invert(1);}
.header .brand .site-title{color:#fff;font-weight:800;font-size:var(--fs-xl);}
.header .nav-wrap{margin-left:auto;display:flex;align-items:center;gap:var(--sp-4);}
.nav-menu{display:flex;align-items:center;gap:var(--sp-1);list-style:none;margin:0;padding:0;}
.nav-menu li{position:relative;margin:0;}
.nav-menu > li > a{
display:block;padding:.65rem .9rem;border-radius:var(--r-sm);
color:rgba(255,255,255,.82);
font-size:var(--fs-sm);font-weight:600;white-space:nowrap;
transition:color var(--t-fast),background var(--t-fast);
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-parent > a,
.nav-menu > li.current-menu-ancestor > a{
color:#fff;background:rgba(255,255,255,.08);
}
.nav-menu > li.menu-item-has-children > a::after{
content:"";display:inline-block;margin-left:.45em;vertical-align:middle;
width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast);
}
.nav-menu .sub-menu{
position:absolute;top:calc(100% + 10px);left:0;z-index:50;
min-width:236px;padding:var(--sp-2);margin:0;list-style:none;
background:#fff;border-radius:var(--r-md);
box-shadow:var(--sh-lg);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity var(--t-fast),transform var(--t-med),visibility var(--t-fast);
}
.nav-menu .sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-menu .sub-menu a{
display:block;padding:.6rem .85rem;border-radius:var(--r-sm);
color:var(--ink-70);font-size:var(--fs-sm);font-weight:600;
transition:background var(--t-fast),color var(--t-fast);
}
.nav-menu .sub-menu a:hover{background:var(--orange-100);color:var(--orange-600);}
.sub-menu-toggle{display:none;}
.header .nav-cta{
display:inline-flex;align-items:center;gap:.5em;
padding:.7rem 1.4rem;border-radius:var(--r-pill);
background:var(--orange-500);color:#fff;
font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
box-shadow:var(--sh-sm);
transition:background var(--t-fast),transform var(--t-med),box-shadow var(--t-med);
}
.header .nav-cta:hover{background:var(--orange-600);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-orange);}
.nav-toggle{
display:none;margin-left:auto;
width:44px;height:44px;padding:0;
background:rgba(255,255,255,.08);border:0;border-radius:var(--r-sm);
cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
position:absolute;left:12px;right:12px;height:2px;border-radius:2px;
background:#fff;transition:transform var(--t-med),opacity var(--t-fast);
}
.nav-toggle span{top:50%;transform:translateY(-50%);}
.nav-toggle span::before{content:"";top:-7px;left:0;right:0;}
.nav-toggle span::after{content:"";top:7px;left:0;right:0;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:.9rem 1.4rem;background:var(--orange-500);color:#fff;font-weight:700;}
.skip-link:focus{left:0;color:#fff;}
/* ---------- 7. HERO ---------- */
.hero{
position:relative;overflow:hidden;
background:linear-gradient(120deg,var(--orange-600) 0%,var(--orange-500) 45%,var(--orange-400) 100%);
color:#fff;
}
.hero::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(1000px 420px at 88% 12%,rgba(255,255,255,.22),transparent 62%),
radial-gradient(700px 340px at 4% 96%,rgba(11,15,36,.20),transparent 60%);
pointer-events:none;
}
.hero .container{position:relative;z-index:2;}
.hero-grid{
display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--sp-7);
padding-block:clamp(3.5rem,7vw,6rem);
}
.hero .eyebrow{
color:#fff;background:rgba(255,255,255,.16);
padding:.45em 1em;border-radius:var(--r-pill);
backdrop-filter:blur(6px);letter-spacing:.12em;
}
.hero h1{color:#fff;margin-bottom:var(--sp-4);}
.hero-lede{font-size:var(--fs-lg);color:rgba(255,255,255,.92);max-width:46ch;margin-bottom:var(--sp-5);}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;}
.hero-trust{
display:flex;flex-wrap:wrap;gap:var(--sp-5);
margin-top:var(--sp-6);padding-top:var(--sp-5);
border-top:1px solid rgba(255,255,255,.22);
}
.hero-trust div{font-size:var(--fs-sm);color:rgba(255,255,255,.9);display:flex;align-items:center;gap:.5em;font-weight:600;}
.hero-trust i{font-size:1.1em;}
.hero-media{position:relative;}
.hero-media img{
width:100%;border-radius:var(--r-xl);
box-shadow:0 32px 70px rgba(11,15,36,.32);
background:rgba(255,255,255,.14);padding:var(--sp-4);
}
/* ---------- 8. BREADCRUMB ---------- */
.page-breadcrumb{background:var(--surface-2);border-bottom:1px solid var(--line);padding:var(--sp-3) 0;}
.page-breadcrumb .container{font-size:var(--fs-sm);color:var(--ink-50);}
.page-breadcrumb a{color:var(--ink-70);font-weight:600;}
.page-breadcrumb a:hover{color:var(--orange-600);}
.page-breadcrumb .sep{margin:0 .5em;color:var(--ink-30);}
/* Page hero (interior pages) */
.page-hero{background:var(--navy-800);color:#fff;padding-block:clamp(2.5rem,5vw,4rem);}
.page-hero h1{color:#fff;margin:0;}
.page-hero p{color:rgba(255,255,255,.75);margin:var(--sp-3) 0 0;max-width:62ch;}
/* ---------- 9. CARDS ---------- */
.card{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-xs);
transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:transparent;}
/* Feature / trust tiles */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-5);}
.feature-tile{
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
padding:var(--sp-6) var(--sp-5);
transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.feature-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent;}
.feature-tile .ico{
width:56px;height:56px;border-radius:var(--r-md);
display:grid;place-items:center;margin-bottom:var(--sp-4);
background:var(--orange-100);color:var(--orange-600);font-size:1.5rem;
}
.feature-tile h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.feature-tile p{color:var(--ink-50);font-size:var(--fs-sm);margin:0;}
/* ---------- 10. WOOCOMMERCE — PRODUCT LOOP ---------- */
.woocommerce ul.products,
ul.products{
display:grid!important;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:var(--sp-5);
margin:0!important;padding:0!important;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important;}
.woocommerce ul.products li.product,
ul.products li.product{
width:auto!important;float:none!important;margin:0!important;
display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-xs);text-align:left;
transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent;}
.woocommerce ul.products li.product > a:first-of-type{display:block;}
.woocommerce ul.products li.product .product-thumb,
.woocommerce ul.products li.product img{
width:100%;aspect-ratio:4/3;object-fit:contain;
background:var(--surface-2);
padding:var(--sp-5);margin:0!important;
transition:transform var(--t-med);
}
.woocommerce ul.products li.product:hover img{transform:scale(1.05);}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2{
padding:var(--sp-4) var(--sp-4) 0!important;
font-size:var(--fs-lg)!important;font-weight:700;margin:0 0 var(--sp-2);color:var(--navy-800);
}
.woocommerce ul.products li.product .price{
padding:0 var(--sp-4);margin:0 0 var(--sp-3);
color:var(--orange-600)!important;font-weight:800;font-size:var(--fs-base);
}
.woocommerce ul.products li.product .price del{color:var(--ink-30);font-weight:500;margin-right:.4em;}
.woocommerce ul.products li.product .price ins{text-decoration:none;}
.woocommerce ul.products li.product .star-rating{margin:0 var(--sp-4) var(--sp-3);font-size:.8em;color:var(--orange-500);}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .consult-button{
margin:auto var(--sp-4) var(--sp-4);
width:calc(100% - var(--sp-4) * 2);
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
position:absolute;top:var(--sp-3);left:var(--sp-3);z-index:3;
min-width:0;min-height:0;line-height:1;padding:.45em .85em;margin:0!important;
background:var(--magenta);color:#fff;
border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;
}
.woocommerce ul.products li.product{position:relative;}
/* Shop toolbar */
.woocommerce .woocommerce-result-count{color:var(--ink-50);font-size:var(--fs-sm);margin:0;}
.woocommerce .woocommerce-ordering select{max-width:260px;}
.shop-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
flex-wrap:wrap;padding-bottom:var(--sp-5);margin-bottom:var(--sp-6);
border-bottom:1px solid var(--line);
}
/* ---------- 11. SINGLE PRODUCT ---------- */
.single-product div.product{display:block;}
.product-hero{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
gap:clamp(var(--sp-5),4vw,var(--sp-8));
align-items:start;
padding-block:var(--section-y);
}
.product-gallery{
position:sticky;top:104px;
background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r-xl);padding:var(--sp-6);
}
.product-gallery img{width:100%;object-fit:contain;border-radius:var(--r-md);}
.woocommerce div.product div.images{margin:0;}
.woocommerce div.product div.images img{border-radius:var(--r-md);}
.product-summary .product-title{font-size:var(--fs-3xl);margin-bottom:var(--sp-3);}
.product-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.woocommerce div.product .product_title{font-size:var(--fs-3xl);}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
color:var(--orange-600);font-size:var(--fs-2xl);font-weight:800;margin-bottom:var(--sp-4);
}
.woocommerce div.product p.price del{color:var(--ink-30);font-size:.62em;font-weight:500;}
.woocommerce div.product p.price ins{text-decoration:none;}
.woocommerce div.product .woocommerce-product-details__short-description{
color:var(--ink-70);font-size:var(--fs-base);
padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);
border-bottom:1px solid var(--line);
}
.woocommerce div.product .stock{color:var(--success);font-weight:700;}
/* Trust strip on product */
.product-trust{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:var(--sp-3);margin:var(--sp-5) 0;
}
.product-trust div{
display:flex;align-items:center;gap:.6em;
padding:var(--sp-3) var(--sp-4);
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
font-size:var(--fs-sm);font-weight:600;color:var(--ink-70);
}
.product-trust i{color:var(--orange-500);font-size:1.1em;}
/* Variations table */
.woocommerce div.product form.cart .variations{margin-bottom:var(--sp-5);border:0;}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{padding:var(--sp-2) 0;border:0;vertical-align:middle;}
.woocommerce div.product form.cart .variations label{font-weight:700;color:var(--navy-800);margin:0;}
.pvtfw_table,.pvtfw_variation_table{
width:100%;border-collapse:separate;border-spacing:0;
border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
font-size:var(--fs-sm);
}
.pvtfw_table th{background:var(--surface-2);font-weight:700;color:var(--navy-800);text-align:left;padding:var(--sp-3) var(--sp-4);}
.pvtfw_table td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);}
/* Consultation CTA */
.consult-cta-block{
margin-top:var(--sp-5);padding:var(--sp-6);
background:linear-gradient(150deg,var(--blush),var(--orange-100));
border:1px solid rgba(254,136,15,.28);
border-radius:var(--r-lg);
}
.consult-cta-block .consult-heading{
font-size:var(--fs-xl);color:var(--magenta);margin-bottom:var(--sp-2);
}
.consult-cta-block .consult-note{color:var(--ink-70);font-size:var(--fs-sm);margin-bottom:var(--sp-5);}
.consult-steps{
display:flex;flex-wrap:wrap;gap:var(--sp-4);
margin-bottom:var(--sp-5);padding-bottom:var(--sp-5);
border-bottom:1px dashed rgba(121,10,62,.22);
}
.consult-steps div{display:flex;align-items:center;gap:.6em;font-size:var(--fs-sm);font-weight:700;color:var(--magenta);}
.consult-steps span.n{
width:26px;height:26px;flex:0 0 26px;border-radius:50%;
background:var(--magenta);color:#fff;
display:grid;place-items:center;font-size:var(--fs-xs);font-weight:800;
}
/* Product tabs */
.woocommerce div.product .woocommerce-tabs{padding-block:var(--section-y);border-top:1px solid var(--line);}
.woocommerce div.product .woocommerce-tabs ul.tabs{
display:flex;flex-wrap:wrap;gap:var(--sp-2);
padding:0!important;margin:0 0 var(--sp-6)!important;list-style:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{display:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
background:var(--surface-2)!important;border:1px solid var(--line)!important;
border-radius:var(--r-pill)!important;margin:0!important;padding:0!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
padding:.7em 1.5em!important;font-weight:700;color:var(--ink-70);font-size:var(--fs-sm);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--navy-800)!important;border-color:var(--navy-800)!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff;}
.woocommerce div.product .woocommerce-tabs .panel{
margin:0;padding:0;max-width:78ch;color:var(--ink-70);
}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-4);}
.woocommerce div.product .woocommerce-tabs .panel h3{font-size:var(--fs-xl);margin-top:var(--sp-6);}
/* Related products */
.woocommerce .related,.woocommerce .upsells{padding-block:var(--section-y);border-top:1px solid var(--line);}
.woocommerce .related > h2,.woocommerce .upsells > h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-6);}
/* ---------- 12. FORMS ---------- */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],
input[type=password],input[type=number],input[type=date],textarea,select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
width:100%;padding:.8em 1em;
font-family:inherit;font-size:var(--fs-sm);color:var(--ink);
background:var(--surface);
border:1px solid var(--line);border-radius:var(--r-sm);
transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
textarea{min-height:140px;resize:vertical;}
input:focus,textarea:focus,select:focus{
outline:none;border-color:var(--orange-500);
box-shadow:0 0 0 4px rgba(254,136,15,.15);
}
input::placeholder,textarea::placeholder{color:var(--ink-30);}
label{display:block;margin-bottom:.4em;font-size:var(--fs-sm);font-weight:700;color:var(--navy-800);}
/* CF7 */
.wpcf7-form p{margin-bottom:var(--sp-4);}
.wpcf7-form label{display:block;}
.wpcf7 form .wpcf7-response-output{
margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);
border-radius:var(--r-sm);border-width:1px;font-size:var(--fs-sm);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--success);background:var(--success-bg);color:var(--success);}
.wpcf7-not-valid-tip{color:#c0392b;font-size:var(--fs-xs);margin-top:.35em;font-weight:600;}
.consult-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.consult-form-grid .full{grid-column:1/-1;}
/* Search */
.search-form{display:flex;gap:var(--sp-2);}
.search-form .search-field{flex:1;}
.search-form .search-submit{flex:0 0 auto;padding-inline:1.25em;}
/* ---------- 13. FAQ ACCORDION ---------- */
.faq-section{background:var(--surface-2);}
.faq_list{list-style:none;padding:0;margin:0;max-width:860px;margin-inline:auto;}
.faq_list li{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-md);margin-bottom:var(--sp-3);overflow:hidden;
transition:box-shadow var(--t-med),border-color var(--t-med);
}
.faq_list li:hover{box-shadow:var(--sh-sm);}
.faq_list li.active{border-color:rgba(254,136,15,.4);box-shadow:var(--sh-md);}
.faq_list li .heading{
position:relative;cursor:pointer;
padding:var(--sp-4) 3.25rem var(--sp-4) var(--sp-5);
font-weight:700;color:var(--navy-800);font-size:var(--fs-base);
transition:color var(--t-fast);
user-select:none;
}
.faq_list li .heading:hover{color:var(--orange-600);}
.faq_list li .heading::after{
content:"";position:absolute;right:var(--sp-5);top:50%;
width:11px;height:11px;margin-top:-6px;
border-right:2.5px solid var(--orange-500);border-bottom:2.5px solid var(--orange-500);
transform:rotate(45deg);transition:transform var(--t-med);
}
.faq_list li.active .heading::after{transform:rotate(-135deg);margin-top:-2px;}
.faq_list li .contents{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows var(--t-med);
}
.faq_list li.active .contents{grid-template-rows:1fr;}
.faq_list li .contents > *{overflow:hidden;}
.faq_list li .contents p{
margin:0;padding:0 var(--sp-5) var(--sp-5);
color:var(--ink-70);font-size:var(--fs-sm);line-height:1.7;
}
/* ---------- 14. TESTIMONIALS ---------- */
.testimonial-section{background:var(--navy-800);color:#fff;}
.testimonial-section h2{color:#fff;}
.testimonial-section .section-head p{color:rgba(255,255,255,.7);}
.testi-card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--r-lg);padding:var(--sp-6);
height:100%;display:flex;flex-direction:column;
backdrop-filter:blur(8px);
}
.testi-card .stars{color:var(--orange-400);margin-bottom:var(--sp-3);font-size:var(--fs-sm);letter-spacing:.1em;}
.testi-card p.quote{
color:rgba(255,255,255,.9);font-size:var(--fs-sm);line-height:1.75;
margin:0 0 var(--sp-5);flex:1;
}
.testi-card .who{display:flex;align-items:center;gap:var(--sp-3);}
.testi-card .avatar{
width:42px;height:42px;flex:0 0 42px;border-radius:50%;
background:var(--orange-500);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:var(--fs-sm);
}
.testi-card .who strong{display:block;color:#fff;font-size:var(--fs-sm);}
.testi-card .who span{color:rgba(255,255,255,.55);font-size:var(--fs-xs);}
/* ---------- 15. BLOG ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-6);}
.post-card{
display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--sh-xs);
transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent;}
.post-card-thumb{display:block;overflow:hidden;background:var(--surface-2);}
.post-card-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--t-med);}
.post-card:hover .post-card-thumb img{transform:scale(1.05);}
.post-card-body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1;}
.post-card-date{
font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--orange-600);margin-bottom:var(--sp-2);
}
.post-card-title{font-size:var(--fs-lg);line-height:1.35;margin:0 0 var(--sp-3);}
.post-card-title a{color:var(--navy-800);}
.post-card-title a:hover{color:var(--orange-600);}
.post-card-excerpt{color:var(--ink-50);font-size:var(--fs-sm);margin:0 0 var(--sp-4);flex:1;}
.post-card-more{font-weight:700;font-size:var(--fs-sm);color:var(--orange-600);display:inline-flex;align-items:center;gap:.4em;}
.post-card:hover .post-card-more{gap:.7em;}
.post-card-more span{transition:transform var(--t-med);}
/* Single post */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--sp-8);padding-block:var(--section-y);}
.blog-article .entry-meta{
font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--orange-600);margin-bottom:var(--sp-3);
}
.blog-article > .entry-thumb{margin-bottom:var(--sp-6);border-radius:var(--r-lg);overflow:hidden;}
.blog-article .entry-content{font-size:var(--fs-lg);line-height:1.8;color:var(--ink-70);}
.blog-article .entry-content h2{font-size:var(--fs-2xl);margin-top:var(--sp-7);}
.blog-article .entry-content h3{font-size:var(--fs-xl);margin-top:var(--sp-6);}
.blog-article .entry-content img{border-radius:var(--r-md);margin-block:var(--sp-5);}
.blog-article .entry-content > p:first-of-type{font-size:1.15em;color:var(--ink);}
.entry-tags{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}
.entry-tags a{
padding:.4em 1em;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;color:var(--ink-70);
}
.entry-tags a:hover{background:var(--orange-100);border-color:transparent;color:var(--orange-600);}
/* Sidebar */
.sidebar-widgets .widget{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);
}
.sidebar-widgets .widget h4{
font-size:var(--fs-base);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);
border-bottom:2px solid var(--orange-500);display:inline-block;
}
.sidebar-widgets ul{list-style:none;padding:0;margin:0;}
.sidebar-widgets ul li{padding:.6em 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);}
.sidebar-widgets ul li:last-child{border-bottom:0;}
.sidebar-widgets ul li a{color:var(--ink-70);font-weight:600;}
.sidebar-widgets ul li a:hover{color:var(--orange-600);}
.widget-products ul.products{grid-template-columns:1fr!important;gap:var(--sp-3);}
/* Pagination */
.pagination,.woocommerce-pagination{margin-top:var(--sp-7);}
.pagination .nav-links,.woocommerce nav.woocommerce-pagination ul{
display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;border:0!important;
}
.pagination .page-numbers,.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
display:grid;place-items:center;min-width:42px;height:42px;padding:0 .75em;
background:var(--surface);border:1px solid var(--line)!important;border-radius:var(--r-sm);
color:var(--ink-70);font-weight:700;font-size:var(--fs-sm);
transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.woocommerce nav.woocommerce-pagination ul li{border:0!important;margin:0!important;}
.pagination .page-numbers:hover,.woocommerce nav.woocommerce-pagination ul li a:hover{
background:var(--orange-100);color:var(--orange-600);border-color:transparent!important;
}
.pagination .page-numbers.current,.woocommerce nav.woocommerce-pagination ul li span.current{
background:var(--navy-800);color:#fff;border-color:var(--navy-800)!important;
}
/* ---------- 16. CONTENT PAGES ---------- */
.page-wrap{padding-block:var(--section-y);}
.page-article .entry-content{max-width:78ch;font-size:var(--fs-lg);line-height:1.8;color:var(--ink-70);}
.page-article .entry-content h2{font-size:var(--fs-2xl);margin-top:var(--sp-7);}
.page-article .entry-content h3{font-size:var(--fs-xl);margin-top:var(--sp-6);}
.lead-intro{font-size:var(--fs-lg);color:var(--ink-70);}
/* Contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--sp-8);align-items:start;}
.contact-info .info-item{
display:flex;gap:var(--sp-4);align-items:flex-start;
padding:var(--sp-5);background:var(--surface-2);
border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--sp-4);
}
.contact-info .info-item .ico{
width:46px;height:46px;flex:0 0 46px;border-radius:var(--r-md);
background:var(--orange-100);color:var(--orange-600);
display:grid;place-items:center;font-size:1.2rem;
}
.contact-info .info-item h4{font-size:var(--fs-base);margin-bottom:.25em;}
.contact-info .info-item p{margin:0;color:var(--ink-50);font-size:var(--fs-sm);}
.contact-form-card{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--sh-md);
}
/* Notice / empty states */
.empty-state{
text-align:center;max-width:560px;margin-inline:auto;
padding:var(--sp-8) var(--sp-5);
}
.empty-state .ico{
width:84px;height:84px;margin:0 auto var(--sp-5);border-radius:50%;
background:var(--orange-100);color:var(--orange-500);
display:grid;place-items:center;font-size:2.25rem;
}
.empty-state h2{margin-bottom:var(--sp-3);}
.empty-state p{color:var(--ink-50);margin-bottom:var(--sp-5);}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
border-top:0!important;border-left:4px solid var(--orange-500);
background:var(--orange-100);border-radius:var(--r-sm);
padding:var(--sp-4) var(--sp-5)!important;color:var(--ink);
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:var(--orange-500);}
.woocommerce-error{border-left-color:#c0392b;background:#fdecea;}
/* ---------- 17. FOOTER ---------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.7);margin-top:var(--section-y);}
.footer-main{padding-block:var(--sp-8);}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--sp-6);}
.site-footer h4{color:#fff;font-size:var(--fs-base);margin-bottom:var(--sp-4);}
.site-footer a{color:rgba(255,255,255,.7);}
.site-footer a:hover{color:var(--orange-400);}
.site-footer .brand img{max-width:170px;filter:brightness(0) invert(1);margin-bottom:var(--sp-4);}
.footer-tagline{font-size:var(--fs-sm);line-height:1.7;max-width:34ch;}
.footer-menu{list-style:none;padding:0;margin:0;}
.footer-menu li{margin-bottom:.6em;font-size:var(--fs-sm);}
.footer-contact li{display:flex;gap:.7em;align-items:flex-start;margin-bottom:var(--sp-3);font-size:var(--fs-sm);list-style:none;}
.footer-contact{padding:0;margin:0;}
.footer-contact i{color:var(--orange-500);margin-top:.25em;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.1);padding-block:var(--sp-5);
display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
font-size:var(--fs-xs);color:rgba(255,255,255,.5);
}
.footer-legal{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.footer-disclaimer{
background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);
padding-block:var(--sp-4);font-size:var(--fs-xs);color:rgba(255,255,255,.45);line-height:1.6;
}
/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:1100px){
.blog-layout{grid-template-columns:1fr;}
.blog-layout .blog-sidebar{order:2;}
.footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:991px){
.nav-toggle{display:block;}
.header .container{min-height:66px;flex-wrap:wrap;}
.header .nav-wrap{
order:3;flex-basis:100%;margin-left:0;
display:none;flex-direction:column;align-items:stretch;gap:var(--sp-2);
padding-block:var(--sp-4);border-top:1px solid rgba(255,255,255,.1);
}
.header .nav-wrap.is-open{display:flex;}
.nav-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;}
.nav-menu > li > a{padding:.85rem .5rem;border-radius:0;}
.nav-menu > li.menu-item-has-children > a::after{float:right;margin-top:.45em;}
.nav-menu .sub-menu{
position:static;opacity:1;visibility:visible;transform:none;
box-shadow:none;background:rgba(255,255,255,.05);
border-radius:var(--r-sm);margin:0 0 var(--sp-2);padding:var(--sp-1);
display:none;
}
.nav-menu > li.is-open > .sub-menu{display:block;}
.nav-menu .sub-menu a{color:rgba(255,255,255,.78);}
.nav-menu .sub-menu a:hover{background:rgba(255,255,255,.08);color:#fff;}
.header .nav-cta{align-self:flex-start;margin-top:var(--sp-2);}
.hero-grid{grid-template-columns:1fr;gap:var(--sp-6);}
.hero-media{max-width:440px;}
.product-hero{grid-template-columns:1fr;}
.product-gallery{position:static;}
.contact-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
:root{--section-y:2.75rem;}
.container{padding-inline:var(--sp-4);}
.footer-cols{grid-template-columns:1fr;gap:var(--sp-6);}
.footer-bottom{flex-direction:column;text-align:center;align-items:center;}
.consult-form-grid{grid-template-columns:1fr;}
.woocommerce ul.products,ul.products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-4);}
.woocommerce ul.products li.product img{padding:var(--sp-3);}
.post-grid{grid-template-columns:1fr;}
.hero-trust{gap:var(--sp-3);}
.shop-toolbar{flex-direction:column;align-items:stretch;}
}
/* ---------- 19. MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
/* ============================================================
20. HEADER CART / REQUEST LIST
============================================================ */
.nav-cart{
display:inline-flex;align-items:center;gap:.55em;
padding:.7rem 1.25rem;border-radius:var(--r-pill);
background:var(--orange-500);color:#fff;
font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
box-shadow:var(--sh-sm);
transition:background var(--t-fast),transform var(--t-med),box-shadow var(--t-med);
}
.nav-cart:hover{background:var(--orange-600);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-orange);}
.nav-cart i{font-size:1.05em;}
.nav-cart-count{
display:inline-grid;place-items:center;
min-width:22px;height:22px;padding:0 .4em;
border-radius:var(--r-pill);
background:rgba(255,255,255,.25);color:#fff;
font-size:var(--fs-xs);font-weight:800;line-height:1;
}
.nav-cart.has-items .nav-cart-count{background:var(--navy-800);}
/* Loop secondary link */
.loop-consult-link{
display:block;text-align:center;
margin:0 var(--sp-4) var(--sp-4);
font-size:var(--fs-xs);font-weight:600;color:var(--ink-50);
}
.loop-consult-link:hover{color:var(--orange-600);}
/* ============================================================
21. CART / REQUEST LIST PAGE
============================================================ */
.woocommerce-cart table.cart{
width:100%;border-collapse:separate;border-spacing:0;
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
margin-bottom:var(--sp-6);
}
.woocommerce-cart table.cart th{
background:var(--surface-2);padding:var(--sp-4);
font-size:var(--fs-sm);font-weight:700;color:var(--navy-800);text-align:left;
}
.woocommerce-cart table.cart td{padding:var(--sp-4);border-top:1px solid var(--line);vertical-align:middle;}
.woocommerce-cart table.cart img{width:64px;border-radius:var(--r-sm);background:var(--surface-2);}
.woocommerce-cart table.cart .product-name a{font-weight:700;color:var(--navy-800);}
.woocommerce-cart table.cart .product-name a:hover{color:var(--orange-600);}
.woocommerce-cart .cart_totals h2{font-size:var(--fs-xl);margin-bottom:var(--sp-4);}
.woocommerce-cart .cart_totals table{width:100%;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.woocommerce-cart .cart_totals th,.woocommerce-cart .cart_totals td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);}
.cart-consult-cta{
margin-top:var(--sp-4);padding:var(--sp-5);
background:var(--orange-100);border:1px solid rgba(254,136,15,.3);
border-radius:var(--r-md);
}
.cart-consult-cta p{font-size:var(--fs-sm);color:var(--ink-70);margin-bottom:var(--sp-4);display:flex;gap:.6em;align-items:flex-start;}
.cart-consult-cta i{color:var(--orange-600);margin-top:.2em;}
.woocommerce .cart-empty{font-size:var(--fs-xl);font-weight:700;color:var(--navy-800);text-align:center;}
.woocommerce .return-to-shop{text-align:center;margin-top:var(--sp-5);}
/* ============================================================
22. HOMEPAGE — CATEGORY FEATURE + QUICK REQUEST
============================================================ */
.cat-feature{
display:grid;grid-template-columns:1fr 1.15fr;gap:var(--sp-7);align-items:center;
}
.cat-feature .media{
background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--r-xl);padding:var(--sp-6);
}
.cat-feature .media img{width:100%;object-fit:contain;}
.quick-request{
display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);
}
.quick-request .qr-media{
background:linear-gradient(150deg,var(--navy-800),var(--navy-700));
padding:var(--sp-7);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5);
}
.quick-request .qr-media img{
width:100%;border-radius:var(--r-lg);background:rgba(255,255,255,.08);padding:var(--sp-4);
}
.quick-request .qr-media .qr-title{color:#fff;font-size:var(--fs-2xl);margin:0;}
.quick-request .qr-media .qr-price{color:var(--orange-400);font-weight:800;font-size:var(--fs-xl);}
.quick-request .qr-media .qr-price small{color:rgba(255,255,255,.55);font-weight:600;font-size:var(--fs-xs);display:block;}
.quick-request .qr-facts{list-style:none;padding:0;margin:0;display:grid;gap:.6em;}
.quick-request .qr-facts li{
display:flex;gap:.6em;align-items:flex-start;
color:rgba(255,255,255,.8);font-size:var(--fs-sm);margin:0;
}
.quick-request .qr-facts i{color:var(--orange-400);margin-top:.25em;}
.quick-request .qr-form{padding:var(--sp-7);}
.quick-request .qr-form h3{font-size:var(--fs-2xl);margin-bottom:var(--sp-2);}
.quick-request .qr-form > p{color:var(--ink-50);font-size:var(--fs-sm);margin-bottom:var(--sp-5);}
.qr-packages{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5);}
.qr-packages a{
padding:.5em 1em;border:1px solid var(--line);border-radius:var(--r-pill);
font-size:var(--fs-xs);font-weight:700;color:var(--ink-70);background:var(--surface-2);
transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.qr-packages a:hover{background:var(--orange-100);border-color:transparent;color:var(--orange-600);}
@media (max-width:991px){
.cat-feature,.quick-request{grid-template-columns:1fr;}
.quick-request .qr-media{padding:var(--sp-6);}
.quick-request .qr-form{padding:var(--sp-6);}
}
/* ============================================================
23. WOOCOMMERCE SHORTCODE PAGES (cart / account) — full width
============================================================ */
.woo-page{max-width:none;}
.woo-page > .woocommerce{display:block;}
.woo-page table.shop_table{
width:100%;border-collapse:separate;border-spacing:0;
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
margin:0 0 var(--sp-6);background:var(--surface);
}
.woo-page table.shop_table th{
background:var(--surface-2);padding:var(--sp-4);
font-size:var(--fs-sm);font-weight:700;color:var(--navy-800);text-align:left;
border:0;
}
.woo-page table.shop_table td{
padding:var(--sp-4);border:0;border-top:1px solid var(--line);vertical-align:middle;
font-size:var(--fs-sm);
}
.woo-page table.shop_table td.product-thumbnail{width:96px;}
.woo-page table.shop_table td.product-thumbnail img{
width:72px;height:72px;object-fit:contain;
background:var(--surface-2);border-radius:var(--r-sm);padding:6px;
}
.woo-page table.shop_table td.product-name a{font-weight:700;color:var(--navy-800);}
.woo-page table.shop_table td.product-name a:hover{color:var(--orange-600);}
.woo-page table.shop_table .product-price,
.woo-page table.shop_table .product-subtotal{font-weight:700;color:var(--navy-800);white-space:nowrap;}
.woo-page .quantity input.qty{
width:74px;text-align:center;padding:.55em .4em;
border:1px solid var(--line);border-radius:var(--r-sm);
}
.woo-page a.remove{
display:grid;place-items:center;width:28px;height:28px;
border-radius:50%;background:var(--surface-2);color:var(--ink-50)!important;
font-size:18px;line-height:1;text-decoration:none;
}
.woo-page a.remove:hover{background:#fdecea;color:#c0392b!important;}
.woo-page .actions{padding:var(--sp-4)!important;background:var(--surface-2);}
.woo-page .coupon{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;}
.woo-page .coupon input.input-text{width:auto;min-width:200px;}
/* Cart layout: table + summary side by side on desktop */
@media (min-width:992px){
.woocommerce-cart .woo-page{
display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
gap:var(--sp-6);align-items:start;
}
.woocommerce-cart .woo-page > .woocommerce{display:contents;}
.woocommerce-cart .woo-page form.woocommerce-cart-form{grid-column:1;margin:0;}
.woocommerce-cart .woo-page .cart-collaterals{grid-column:2;margin:0;width:100%;max-width:none;}
.woocommerce-cart .woo-page .consult-cta-block{grid-column:1 / -1;}
}
.woocommerce-cart .cart-collaterals .cart_totals{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--sp-5);position:sticky;top:104px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2{
font-size:var(--fs-xl);margin-bottom:var(--sp-4);
padding-bottom:var(--sp-3);border-bottom:2px solid var(--orange-500);display:inline-block;
}
.woocommerce-cart .cart-collaterals table{border:0!important;margin:0;}
.woocommerce-cart .cart-collaterals th,
.woocommerce-cart .cart-collaterals td{
padding:var(--sp-3) 0!important;border:0!important;
border-bottom:1px solid var(--line-soft)!important;font-size:var(--fs-sm);
}
.woocommerce-cart .cart-collaterals .order-total th,
.woocommerce-cart .cart-collaterals .order-total td{
border-bottom:0!important;font-size:var(--fs-lg);font-weight:800;color:var(--navy-800);
}
/* Empty cart */
.woocommerce-cart .cart-empty{
font-size:var(--fs-xl);font-weight:700;color:var(--navy-800);
text-align:center;margin-bottom:var(--sp-4);
}
.woocommerce-cart .return-to-shop{text-align:center;}
/* ============================================================
24. UN-FLOAT WOOCOMMERCE
woocommerce-layout.css lays everything out with floats and
48% widths from the pre-flexbox era. Those rules collapse our
grid layouts (product hero, cart totals) into narrow columns.
Neutralise them here — this must stay after every layout rule.
============================================================ */
.woocommerce .col2-set,.woocommerce-page .col2-set,
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,.woocommerce-page .col2-set .col-2,
.woocommerce #content div.product div.images,.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.summary,
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .shipping_calculator,.woocommerce-page .cart-collaterals .shipping_calculator,
.woocommerce .cart-collaterals .cross-sells,.woocommerce-page .cart-collaterals .cross-sells,
.woocommerce .cart-collaterals .related,.woocommerce-page .cart-collaterals .related,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,
.woocommerce .woocommerce-result-count,.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-ordering,.woocommerce-page .woocommerce-ordering,
.woocommerce table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon,
.woocommerce form .form-row-first,.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,.woocommerce-page form .form-row-last{
float:none!important;
width:auto!important;
clear:none!important;
}
/* Product hero grid — now that the floats are gone */
.woocommerce div.product .product-hero > div.images{width:100%!important;}
.woocommerce div.product .product-hero > div.summary{width:100%!important;margin:0!important;}
/* Cart totals fills its grid cell */
.woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{width:100%!important;}
.woocommerce .cart-collaterals .cart_totals{width:100%!important;}
.woocommerce .cart-collaterals .cross-sells{display:none!important;}
/* Shipping row inside totals — stop the label column collapsing */
.woocommerce-cart .cart_totals tr th{width:42%;white-space:nowrap;}
.woocommerce-cart .cart_totals tr td{width:58%;text-align:right;}
.woocommerce-cart .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;}
.woocommerce-cart .cart_totals ul#shipping_method li{margin:0 0 .35em;text-align:right;}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
font-size:var(--fs-xs);color:var(--ink-50);text-align:right;margin:.5em 0 0;
}
.woocommerce-cart .cart_totals .shipping-calculator-button{font-size:var(--fs-xs);}
/* Buttons must never collapse into a pill-blob when text wraps */
.btn,.mainbtn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.wpcf7-submit,.search-submit{
border-radius:var(--r-pill);
text-align:center;
min-height:44px;
white-space:normal;
}
.cart-consult-cta .btn{border-radius:var(--r-md);}
/* Shop toolbar alignment (result count / ordering were floated) */
.shop-toolbar .woocommerce-result-count{margin:0!important;}
.shop-toolbar .woocommerce-ordering{margin:0!important;}
/* ============================================================
25. SINGLE PRODUCT — FINE ALIGNMENT
============================================================ */
/* Sale badge / zoom trigger must not collide */
.woocommerce div.product .product-gallery{position:sticky;top:104px;}
.woocommerce div.product div.images{position:relative;}
.woocommerce div.product .woocommerce-product-gallery__trigger{
position:absolute;top:var(--sp-3);right:var(--sp-3);left:auto;z-index:4;
width:40px;height:40px;display:grid;place-items:center;
background:#fff;border-radius:50%;box-shadow:var(--sh-sm);
font-size:0;text-indent:0;
}
.woocommerce div.product .woocommerce-product-gallery__trigger::after{
content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;
font-size:15px;color:var(--navy-800);
}
.woocommerce div.product .woocommerce-product-gallery__trigger img{display:none;}
.woocommerce div.product span.onsale{top:var(--sp-3);left:var(--sp-3);right:auto;}
/* Gallery image breathing room */
.woocommerce div.product .product-gallery .woocommerce-product-gallery__image img{
border-radius:var(--r-md);
}
/* Price — muted strikethrough, prominent current price */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce div.product .woocommerce-variation-price del{
color:var(--ink-30)!important;font-size:.55em;font-weight:600;
text-decoration:line-through;margin-right:.4em;opacity:1;
}
.woocommerce div.product p.price ins,
.woocommerce div.product .woocommerce-variation-price ins{
text-decoration:none!important;color:var(--orange-600);
}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:var(--sp-4);}
.woocommerce div.product .woocommerce-variation-price .price{
font-size:var(--fs-2xl);font-weight:800;color:var(--orange-600);
}
/* Variation selector — clean stacked rows, no table artefacts */
.woocommerce div.product form.cart table.variations{
display:block;width:100%;border:0;margin:0 0 var(--sp-4);
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr{display:block;width:100%;}
.woocommerce div.product form.cart table.variations td{
display:block;width:100%;padding:0!important;border:0!important;
}
.woocommerce div.product form.cart table.variations td.label{margin-bottom:.4em;}
.woocommerce div.product form.cart table.variations td.label label{
font-size:var(--fs-sm);font-weight:700;color:var(--navy-800);margin:0;
}
.woocommerce div.product form.cart table.variations td.value{margin-bottom:var(--sp-3);}
.woocommerce div.product form.cart table.variations select{
width:100%;max-width:340px;height:48px;
background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236f7585' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") no-repeat right 1rem center/12px 8px;
-webkit-appearance:none;appearance:none;padding-right:2.5rem;
}
.woocommerce div.product form.cart .reset_variations{
display:inline-block;margin-top:.5em;
font-size:var(--fs-xs);font-weight:700;color:var(--ink-50);
}
.woocommerce div.product form.cart .reset_variations:hover{color:var(--orange-600);}
/* Quantity + add-to-cart on one tidy row */
.woocommerce div.product form.cart{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
margin-bottom:var(--sp-5);
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation{flex:0 0 100%;}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);flex:0 0 100%;
}
.woocommerce div.product form.cart div.quantity{margin:0;float:none;}
.woocommerce div.product form.cart div.quantity input.qty,
.woocommerce .quantity input.qty{
width:92px!important;height:48px;text-align:center;
border:1px solid var(--line);border-radius:var(--r-sm);
font-weight:700;font-size:var(--fs-base);
}
.woocommerce div.product form.cart button.single_add_to_cart_button{
height:48px;margin:0;flex:1 1 auto;max-width:280px;
}
/* Product meta (SKU / category / tags) */
.woocommerce div.product .product_meta{
margin-top:var(--sp-5);padding-top:var(--sp-4);
border-top:1px solid var(--line);
font-size:var(--fs-xs);color:var(--ink-50);line-height:2;
}
.woocommerce div.product .product_meta > span{display:block;margin-bottom:.2em;}
.woocommerce div.product .product_meta a{color:var(--ink-70);font-weight:600;}
.woocommerce div.product .product_meta a:hover{color:var(--orange-600);}
/* Fill the sticky column with reassurance instead of dead space */
.gallery-aside{
margin-top:var(--sp-4);padding:var(--sp-5);
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
}
.gallery-aside h4{font-size:var(--fs-sm);margin-bottom:var(--sp-3);}
.gallery-aside ul{list-style:none;padding:0;margin:0;display:grid;gap:.7em;}
.gallery-aside li{display:flex;gap:.6em;align-items:flex-start;font-size:var(--fs-xs);color:var(--ink-70);margin:0;}
.gallery-aside i{color:var(--orange-500);margin-top:.2em;}
/* Tabs panel should use the full column, not a narrow measure */
.woocommerce div.product .woocommerce-tabs .panel{max-width:74ch;}
/* ============================================================
26. CART TOTALS — remove inherited table chrome
============================================================ */
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{
background:transparent!important;
vertical-align:top;
}
.woocommerce-cart .cart_totals table th{
font-weight:600;color:var(--ink-70);text-align:left;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods{margin:0;padding:0;list-style:none;}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{
display:block;margin-top:.4em;font-size:var(--fs-xs);color:var(--ink-50);
}
.woocommerce-cart .cart_totals .shipping-calculator-button{
display:inline-block;margin-top:.35em;font-size:var(--fs-xs);font-weight:700;
}
/* Tighten the vertical rhythm on shortcode pages */
.woocommerce-cart .page-wrap,
.woocommerce-account .page-wrap{padding-block:var(--sp-7);}
.woocommerce-cart .page-hero,
.woocommerce-account .page-hero{padding-block:var(--sp-6);}
.woocommerce-cart .page-hero h1,
.woocommerce-account .page-hero h1{font-size:var(--fs-3xl);}
/* Cart action row */
.woo-page table.shop_table td.actions{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
flex-wrap:wrap;
}
.woo-page table.shop_table td.actions .coupon{display:flex;gap:var(--sp-2);margin:0;}
.woo-page table.shop_table td.actions button[name="update_cart"]{margin-left:auto;}
/* ============================================================
27. QUICK REQUEST — compact so the whole block fits one screen
============================================================ */
.quick-request-section .section-head{margin-bottom:var(--sp-5);}
.quick-request-section .section-head p{font-size:var(--fs-base);}
.quick-request .qr-media{padding:var(--sp-6);gap:var(--sp-4);}
.quick-request .qr-media img{padding:var(--sp-3);max-height:210px;object-fit:contain;}
.quick-request .qr-media .qr-title{font-size:var(--fs-xl);}
.quick-request .qr-media .qr-price{font-size:var(--fs-lg);}
.quick-request .qr-facts{gap:.45em;}
.quick-request .qr-facts li{font-size:var(--fs-xs);}
.quick-request .qr-form{padding:var(--sp-6);}
.quick-request .qr-form h3{font-size:var(--fs-xl);margin-bottom:var(--sp-1);}
.quick-request .qr-form > p{margin-bottom:var(--sp-4);font-size:var(--fs-xs);}
.quick-request .qr-packages{margin-bottom:var(--sp-4);}
/* Tighter form inside the quick-request card only */
.quick-request .wpcf7-form p{margin-bottom:var(--sp-3);}
.quick-request .consult-form-grid{gap:var(--sp-3);}
.quick-request label{font-size:var(--fs-xs);margin-bottom:.25em;}
.quick-request input[type=text],
.quick-request input[type=email],
.quick-request input[type=tel],
.quick-request select{padding:.6em .85em;font-size:var(--fs-sm);}
.quick-request textarea{min-height:76px;padding:.6em .85em;font-size:var(--fs-sm);}
.quick-request .wpcf7-acceptance .wpcf7-list-item-label,
.quick-request .wpcf7-acceptance{font-size:var(--fs-xs);line-height:1.45;color:var(--ink-50);}
.quick-request .wpcf7-submit{margin-top:var(--sp-1);}
@media (max-width:991px){
.quick-request .qr-media img{max-height:170px;}
}
/* Quick-request section must fit a single viewport on desktop */
.quick-request-section{padding-block:var(--sp-6);}
.quick-request-section .section-head{margin-bottom:var(--sp-4);}
.quick-request-section .section-head .eyebrow{margin-bottom:var(--sp-1);}
.quick-request-section .section-head h2{font-size:var(--fs-2xl);margin-bottom:var(--sp-2);}
.quick-request-section .section-head p{font-size:var(--fs-sm);}
@media (min-width:992px){
.quick-request .qr-media img{max-height:168px;}
.quick-request .qr-media{gap:var(--sp-3);padding:var(--sp-5);}
.quick-request .qr-form{padding:var(--sp-5) var(--sp-6);}
.quick-request textarea{min-height:64px;}
}
/* Final trim: guarantee the quick-request block fits one viewport */
@media (min-width:992px){
.quick-request-section{padding-block:var(--sp-5);}
.quick-request-section .section-head p{display:none;}
.quick-request .qr-media img{max-height:140px;}
.quick-request .wpcf7-form p{margin-bottom:var(--sp-2);}
.quick-request textarea{min-height:56px;}
.quick-request .qr-packages{margin-bottom:var(--sp-3);}
}
/* Media panel reads better top-aligned than floating mid-card */
.quick-request .qr-media{justify-content:flex-start;}
.quick-request .qr-media img{
background:#fff;border-radius:var(--r-md);
padding:var(--sp-3);width:100%;object-fit:contain;
}
.quick-request .qr-facts li{align-items:center;}
/* ============================================================
28. PRODUCT CARD ALIGNMENT
WooCommerce writes an inline height:NN% on every loop image
(derived from the source aspect ratio), which staggers the
cards. Force a uniform image box so titles, prices and
buttons line up across the row.
============================================================ */
.woocommerce ul.products li.product img,
ul.products li.product img{
height:200px!important;
width:100%!important;
max-width:none!important;
aspect-ratio:auto!important;
object-fit:contain;
background:var(--surface-2);
padding:var(--sp-4);
margin:0!important;
}
@media (max-width:640px){
.woocommerce ul.products li.product img,
ul.products li.product img{height:150px!important;padding:var(--sp-3);}
}
/* Equal-height cards, button pinned to the bottom */
.woocommerce ul.products,ul.products{align-items:stretch;}
.woocommerce ul.products li.product,ul.products li.product{height:100%;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{min-height:2.6em;}
.woocommerce ul.products li.product .price{min-height:1.6em;}
/* Sidebar widget products stay compact */
.widget-products ul.products li.product img{height:120px!important;padding:var(--sp-2);}
.widget-products ul.products li.product .woocommerce-loop-product__title{min-height:0;font-size:var(--fs-sm)!important;}
/* ============================================================
29. BLOG CARD IMAGERY
Featured images are product pack shots on white, so cropping
them with object-fit:cover slices the pack. Contain them on a
tinted panel instead, and keep every card the same height.
============================================================ */
.post-card-thumb{
background:var(--surface-2);
border-bottom:1px solid var(--line);
display:grid;place-items:center;
padding:var(--sp-4);
}
.post-card-thumb img{
aspect-ratio:16/10;
object-fit:contain!important;
height:auto;max-height:200px;width:100%;
mix-blend-mode:multiply;
}
.post-card:hover .post-card-thumb img{transform:scale(1.04);}
.post-card-body{gap:0;}
.post-card-title{min-height:2.7em;}
.post-card-excerpt{min-height:4.2em;}
.post-card-more{margin-top:auto;}
@media (max-width:640px){
.post-card-thumb img{max-height:160px;}
.post-card-title,.post-card-excerpt{min-height:0;}
}
/* ============================================================
30. SINGLE POST FEATURED IMAGE
Product pack shots at native size left-align awkwardly in the
text column. Present them as a deliberate banner instead.
============================================================ */
.blog-article > .entry-thumb{
display:grid;place-items:center;
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r-lg);
padding:var(--sp-5);
margin:0 0 var(--sp-6);
overflow:hidden;
}
.blog-article > .entry-thumb img{
width:auto;max-width:100%;
max-height:300px;height:auto;
object-fit:contain;
mix-blend-mode:multiply;
}
/* Content images inside posts */
.blog-article .entry-content img{max-width:100%;height:auto;border-radius:var(--r-md);}
.blog-article .entry-content figure{margin:var(--sp-5) 0;}
/* Post body rhythm */
.blog-article .entry-content h2:first-child,
.blog-article .entry-content h3:first-child{margin-top:0;}
.blog-article .entry-content ul,
.blog-article .entry-content ol{margin-bottom:var(--sp-5);}
.blog-article .entry-content a{font-weight:600;}
/* ============================================================
31. FAQ ACCORDION — true collapse
Grid items default to min-height:auto, so a 0fr row still
showed a sliver of the answer. Force min-height:0 and clip.
Works whether the answer is wrapped in a div or a bare .
============================================================ */
.faq_list li .contents{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows var(--t-med);
}
.faq_list li.active .contents{grid-template-rows:1fr;}
.faq_list li .contents > *{
overflow:hidden;
min-height:0;
margin:0;
}
.faq_list li .contents p{
padding:0 var(--sp-5) 0;
margin:0;
color:var(--ink-70);font-size:var(--fs-sm);line-height:1.7;
}
.faq_list li.active .contents p{padding-bottom:var(--sp-5);}
.faq_list li .contents > div > p:last-child{padding-bottom:0;}
.faq_list li.active .contents > div > p:last-child{padding-bottom:var(--sp-5);}
/* ============================================================
32. HEADER — cart stays visible on mobile
The cart button now sits outside .nav-wrap so it survives the
drawer collapsing. Re-establish the desktop ordering.
============================================================ */
.header .nav-wrap{margin-left:auto;}
.header .nav-cart{flex:0 0 auto;margin-left:var(--sp-4);}
@media (max-width:991px){
.header .container{flex-wrap:wrap;gap:var(--sp-3);}
.header .brand{margin-right:auto;}
.header .nav-cart{
margin-left:0;order:2;
padding:.6rem 1rem;font-size:var(--fs-xs);
}
.header .nav-toggle{order:3;margin-left:0;}
.header .nav-wrap{order:4;margin-left:0;}
}
@media (max-width:400px){
.header .brand img{max-width:132px;}
.header .nav-cart .label{display:none;}
.header .nav-cart{padding:.6rem .8rem;}
}
/* ============================================================
33. QUICK REQUEST — balance the two columns
The product image grows to fill the navy panel so the left and
right sides finish at the same height, and the textarea is kept
short so the whole block stays within one viewport.
============================================================ */
.quick-request .qr-media{
display:flex;flex-direction:column;
justify-content:flex-start;gap:var(--sp-4);
}
.quick-request .qr-media img{
flex:1 1 auto;
width:100%;
min-height:180px;
max-height:none;
height:auto;
object-fit:contain;
background:#fff;border-radius:var(--r-md);
padding:var(--sp-4);
}
.quick-request .qr-media > div,
.quick-request .qr-facts{flex:0 0 auto;}
@media (min-width:992px){
.quick-request .qr-media img{min-height:220px;padding:var(--sp-4);}
.quick-request textarea{min-height:52px;}
.quick-request .qr-form{padding:var(--sp-5) var(--sp-6) var(--sp-6);}
}
@media (max-width:991px){
.quick-request .qr-media img{min-height:0;max-height:220px;flex:0 0 auto;}
}
/* ============================================================
34. CHECKOUT
============================================================ */
.woocommerce-checkout .woo-page{max-width:none;}
@media (min-width:992px){
.woocommerce-checkout form.checkout{
display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);
gap:var(--sp-7);align-items:start;
}
.woocommerce-checkout form.checkout #customer_details{grid-column:1;}
.woocommerce-checkout form.checkout h3#order_review_heading{grid-column:2;margin:0 0 var(--sp-4);}
.woocommerce-checkout form.checkout #order_review{grid-column:2;position:sticky;top:104px;}
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{width:100%!important;float:none!important;}
.woocommerce-checkout h3{font-size:var(--fs-xl);margin-bottom:var(--sp-4);}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .rx-declaration{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);
}
.woocommerce-checkout .form-row{margin-bottom:var(--sp-4);padding:0;}
.woocommerce-checkout .form-row label{font-size:var(--fs-sm);font-weight:700;}
.woocommerce-checkout .form-row .required{color:#c0392b;text-decoration:none;}
.woocommerce-checkout .select2-container--default .select2-selection--single{
height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
line-height:44px;padding-left:1em;color:var(--ink);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;}
/* Prescription declaration block */
.rx-declaration{
background:linear-gradient(150deg,var(--blush),var(--orange-100))!important;
border-color:rgba(254,136,15,.28)!important;
}
.rx-declaration h3{color:var(--magenta);font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.rx-declaration > p{font-size:var(--fs-sm);color:var(--ink-70);margin-bottom:var(--sp-4);}
.rx-declaration .rx-consent label{
display:flex;gap:.6em;align-items:flex-start;
font-size:var(--fs-xs);font-weight:500;color:var(--ink-70);line-height:1.5;
}
.rx-declaration .rx-consent input[type=checkbox]{width:auto;margin-top:.2em;flex:0 0 auto;}
/* Order review panel */
.woocommerce-checkout #order_review{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--sp-5);
}
.woocommerce-checkout table.shop_table{border:0!important;margin:0 0 var(--sp-4);}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{
background:transparent!important;padding:var(--sp-3) 0!important;
border:0!important;border-bottom:1px solid var(--line-soft)!important;font-size:var(--fs-sm);
}
.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td{
font-size:var(--fs-lg);font-weight:800;color:var(--navy-800);border-bottom:0!important;
}
.woocommerce-checkout #payment{background:transparent;border-radius:0;}
.woocommerce-checkout #payment .place-order{padding:0;margin-top:var(--sp-4);}
.woocommerce-checkout #payment #place_order{width:100%;float:none!important;height:52px;font-size:var(--fs-base);}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-bottom:var(--sp-3);padding:0;}
.woocommerce-checkout .wc_payment_methods{display:none;}
/* Cart note above the checkout button */
.cart-review-note{
display:flex;gap:.6em;align-items:flex-start;
font-size:var(--fs-xs);color:var(--ink-70);line-height:1.55;
background:var(--orange-100);border:1px solid rgba(254,136,15,.28);
border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
}
.cart-review-note i{color:var(--orange-600);margin-top:.15em;}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{width:100%;height:52px;font-size:var(--fs-base);}
/* Order received */
.woocommerce-order{max-width:820px;}
.woocommerce-order .woocommerce-thankyou-order-received{
font-size:var(--fs-lg);font-weight:600;color:var(--ink-70);
background:var(--success-bg);border-left:4px solid var(--success);
border-radius:var(--r-md);padding:var(--sp-5);margin-bottom:var(--sp-6);
}
.woocommerce-order ul.woocommerce-order-overview{
list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:var(--sp-3);padding:0;margin-bottom:var(--sp-6);
}
.woocommerce-order ul.woocommerce-order-overview li{
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
padding:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-50);margin:0;border-left:0;
}
.woocommerce-order ul.woocommerce-order-overview li strong{
display:block;margin-top:.3em;font-size:var(--fs-base);color:var(--navy-800);
}
/* Product summary consult link */
.summary-consult-link{
font-size:var(--fs-sm);color:var(--ink-50);margin:var(--sp-4) 0 0;
}
.summary-consult-link a{font-weight:700;}
/* Consultation tab panel */
#tab-consultation .consult-cta-block{margin-top:0;}
/* Checkout: pin the order summary beside the form, not below it */
@media (min-width:992px){
.woocommerce-checkout form.checkout{
grid-template-rows:auto 1fr;
align-items:start;
}
.woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 2;}
.woocommerce-checkout form.checkout h3#order_review_heading{grid-column:2;grid-row:1;}
.woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2;}
}
/* Final margin so the block clears shorter laptop viewports too */
@media (min-width:992px){
.quick-request-section{padding-block:var(--sp-4);}
.quick-request-section .section-head{margin-bottom:var(--sp-3);}
.quick-request-section .section-head h2{font-size:var(--fs-xl);}
.quick-request .qr-form{padding:var(--sp-5) var(--sp-6);}
.quick-request textarea{min-height:44px;}
.quick-request .wpcf7-acceptance{font-size:11px;}
}
/* ============================================================
35. SCREEN 1 — QUICK REQUEST, PROPERLY BALANCED
Heading returns to full size; height comes out of the image
and the textarea instead of shrinking the type.
============================================================ */
@media (min-width:992px){
.quick-request-section{padding-block:var(--sp-6);}
.quick-request-section .section-head{margin-bottom:var(--sp-4);}
.quick-request-section .section-head h2{font-size:var(--fs-3xl);}
.quick-request-section .section-head p{display:block;font-size:var(--fs-sm);}
.quick-request .qr-media{justify-content:space-between;padding:var(--sp-5);gap:var(--sp-4);}
.quick-request .qr-media img{
flex:0 1 auto;
max-height:250px;min-height:0;
object-fit:contain;
}
.quick-request .qr-form{padding:var(--sp-5) var(--sp-6);}
.quick-request .qr-form h3{font-size:var(--fs-2xl);}
.quick-request .qr-form > p{font-size:var(--fs-sm);margin-bottom:var(--sp-4);}
.quick-request label{font-size:var(--fs-xs);}
.quick-request textarea{min-height:60px;}
.quick-request .wpcf7-acceptance{font-size:var(--fs-xs);}
.quick-request .wpcf7-form p{margin-bottom:var(--sp-3);}
}
/* ============================================================
36. SCREEN 2 — THREE PRODUCTS PER ROW
============================================================ */
@media (min-width:992px){
.woocommerce ul.products,
ul.products{grid-template-columns:repeat(3,minmax(0,1fr));}
.widget-products ul.products{grid-template-columns:1fr;}
}
@media (min-width:640px) and (max-width:991px){
.woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* ============================================================
37. SCREEN 3 — CONTENT USES THE FULL CONTAINER
Long-form pages were clamped to a reading measure, leaving
half the container empty. Let them fill, and format lists.
============================================================ */
.page-article .entry-content,
.page-article,
.blog-article .entry-content{max-width:none;}
.page-article .entry-content > *{max-width:none;}
.entry-content p{max-width:none;}
.page-article .entry-content,
.blog-article .entry-content{
font-size:var(--fs-base);line-height:1.8;color:var(--ink-70);
}
.page-article .entry-content h2,
.blog-article .entry-content h2{
font-size:var(--fs-2xl);margin:var(--sp-7) 0 var(--sp-3);color:var(--navy-800);
}
.page-article .entry-content h3,
.blog-article .entry-content h3{
font-size:var(--fs-xl);margin:var(--sp-6) 0 var(--sp-3);color:var(--navy-800);
}
.page-article .entry-content h2:first-child,
.page-article .entry-content h3:first-child{margin-top:0;}
.page-article .entry-content p,
.blog-article .entry-content p{margin:0 0 var(--sp-4);}
/* Lists, properly formatted */
.entry-content ul,
.entry-content ol{
margin:0 0 var(--sp-5);padding-left:0;list-style:none;
}
.entry-content ol{counter-reset:rlam-ol;}
.entry-content ul li,
.entry-content ol li{
position:relative;padding-left:1.9em;margin-bottom:.65em;line-height:1.75;
}
.entry-content ul li::before{
content:"";position:absolute;left:.35em;top:.62em;
width:7px;height:7px;border-radius:50%;background:var(--orange-500);
}
.entry-content ol li{counter-increment:rlam-ol;}
.entry-content ol li::before{
content:counter(rlam-ol);position:absolute;left:0;top:.1em;
width:1.35em;height:1.35em;border-radius:50%;
background:var(--orange-100);color:var(--orange-600);
font-size:.78em;font-weight:800;display:grid;place-items:center;
}
.entry-content li > ul,
.entry-content li > ol{margin:.6em 0 0;}
.entry-content table{
width:100%;border-collapse:separate;border-spacing:0;
border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:0 0 var(--sp-5);
}
.entry-content th{background:var(--surface-2);padding:var(--sp-3) var(--sp-4);text-align:left;font-weight:700;}
.entry-content td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);}
/* Two-column long-form on wide screens keeps line length comfortable */
@media (min-width:1100px){
.page-article .entry-content{column-gap:var(--sp-8);}
}
/* ============================================================
38. SCREEN 4 — CART TABLE FORMATTING
Column widths were undefined, so the thumbnail cell ballooned
and product names wrapped mid-title. The actions row also had
the coupon and update button colliding.
============================================================ */
.woocommerce-cart table.cart{table-layout:auto;}
.woocommerce-cart table.cart th:nth-child(1),
.woocommerce-cart table.cart td.product-remove{width:56px;text-align:center;padding-left:var(--sp-3)!important;padding-right:0!important;}
.woocommerce-cart table.cart td.product-thumbnail{width:88px;padding-left:0!important;padding-right:var(--sp-3)!important;}
.woocommerce-cart table.cart td.product-thumbnail img{width:64px;height:64px;object-fit:contain;background:var(--surface-2);border-radius:var(--r-sm);padding:5px;}
.woocommerce-cart table.cart th.product-name,
.woocommerce-cart table.cart td.product-name{width:auto;min-width:180px;text-align:left;}
.woocommerce-cart table.cart td.product-name a{display:inline;white-space:normal;line-height:1.45;}
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal{width:120px;white-space:nowrap;text-align:right;}
.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity{width:120px;text-align:center;}
.woocommerce-cart table.cart td.product-quantity .quantity{display:inline-flex;}
.woocommerce-cart table.cart th{white-space:nowrap;}
/* Variation meta under the product name */
.woocommerce-cart table.cart td.product-name dl.variation{margin:.3em 0 0;font-size:var(--fs-xs);color:var(--ink-50);}
.woocommerce-cart table.cart td.product-name dl.variation dt,
.woocommerce-cart table.cart td.product-name dl.variation dd{display:inline;margin:0;font-weight:500;}
.woocommerce-cart table.cart td.product-name dl.variation dd p{margin:0;display:inline;}
/* Actions row: coupon left, update right, on one line */
.woocommerce-cart table.cart td.actions{
display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
padding:var(--sp-4)!important;background:var(--surface-2);
}
.woocommerce-cart table.cart td.actions .coupon{
display:flex;gap:var(--sp-2);align-items:center;margin:0;flex:1 1 auto;
}
.woocommerce-cart table.cart td.actions .coupon input.input-text{
width:auto!important;min-width:190px;max-width:240px;height:44px;margin:0;
}
.woocommerce-cart table.cart td.actions .coupon .button{height:44px;white-space:nowrap;}
.woocommerce-cart table.cart td.actions > button[name="update_cart"]{
margin-left:auto;height:44px;white-space:nowrap;
}
.woocommerce-cart table.cart td.actions > button[disabled]{opacity:.45;cursor:not-allowed;}
/* "Added to cart" notice */
.woocommerce-message{
display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
border-left:4px solid var(--success)!important;
background:var(--success-bg)!important;
color:var(--ink);font-size:var(--fs-sm);font-weight:600;
margin-bottom:var(--sp-5);
}
.woocommerce-message::before{display:none!important;}
.woocommerce-message .button{margin-left:auto;flex:0 0 auto;}
.woocommerce-notices-wrapper{margin-bottom:var(--sp-4);}
@media (max-width:768px){
.woocommerce-cart table.cart thead{display:none;}
.woocommerce-cart table.cart tr{display:grid;grid-template-columns:56px 72px 1fr;gap:0 var(--sp-2);align-items:center;padding:var(--sp-3);border-top:1px solid var(--line);}
.woocommerce-cart table.cart td{border:0!important;padding:var(--sp-1) 0!important;}
.woocommerce-cart table.cart td.product-name{grid-column:3;}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-quantity,
.woocommerce-cart table.cart td.product-subtotal{grid-column:3;text-align:left;width:auto;}
.woocommerce-cart table.cart td.product-price::before{content:"Price: ";color:var(--ink-50);}
.woocommerce-cart table.cart td.product-subtotal::before{content:"Subtotal: ";color:var(--ink-50);}
.woocommerce-cart table.cart td.actions{grid-column:1 / -1;display:flex;}
.woocommerce-cart table.cart td.actions .coupon input.input-text{min-width:0;flex:1;}
}
/* ============================================================
39. SCREEN 5 — PAYMENT PREFERENCE
============================================================ */
.pay-preference{
background:var(--surface);border:1px solid var(--line);
border-radius:var(--r-lg);padding:var(--sp-5);margin-bottom:var(--sp-5);
}
.pay-preference h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);}
.pay-preference > p{font-size:var(--fs-sm);color:var(--ink-50);margin-bottom:var(--sp-4);}
.pay-options{
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:var(--sp-2);margin-bottom:var(--sp-4);
}
.pay-option{
display:flex;align-items:center;gap:.6em;
padding:var(--sp-3) var(--sp-4);margin:0;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
font-size:var(--fs-sm);font-weight:600;color:var(--ink-70);
cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast);
}
.pay-option:hover{background:var(--orange-100);border-color:rgba(254,136,15,.4);}
.pay-option input[type=radio]{width:auto;margin:0;accent-color:var(--orange-500);flex:0 0 auto;}
.pay-option:has(input:checked){
background:var(--orange-100);border-color:var(--orange-500);color:var(--orange-600);
}
.pay-chosen{
background:var(--orange-100);border:1px solid rgba(254,136,15,.28);
border-radius:var(--r-md);padding:var(--sp-4);font-size:var(--fs-sm);
}
/* ============================================================
40. CATEGORY LONG-FORM DESCRIPTION
The term description is real long-form content — it renders
below the grid on a light surface, not inside the dark hero.
============================================================ */
.term-longform{background:var(--surface-2);border-top:1px solid var(--line);}
.term-longform .entry-content{max-width:none;}
.term-longform .entry-content h2{
font-size:var(--fs-2xl);margin:var(--sp-6) 0 var(--sp-3);color:var(--navy-800);
}
.term-longform .entry-content h2:first-child{margin-top:0;}
.term-longform .entry-content h3{font-size:var(--fs-xl);margin:var(--sp-5) 0 var(--sp-3);}
.term-longform .entry-content p{margin:0 0 var(--sp-4);color:var(--ink-70);}
.term-longform .entry-content ul li{margin-bottom:.75em;}
/* Keep the hero lede to a readable width */
.page-hero p{max-width:70ch;}
/* ============================================================
41. CART — FIX THUMBNAIL SIZE AND ACTIONS ROW
display:flex on a
destroys its colspan, which trapped the
coupon and update button inside the first column. Keep the cell
a table-cell and lay the children out with floats instead.
============================================================ */
.woocommerce-cart table.cart td.product-thumbnail{width:88px;}
.woocommerce-cart table.cart td.product-thumbnail a{display:block;}
.woocommerce-cart table.cart td.product-thumbnail img{
width:64px!important;height:64px!important;
max-width:none!important;min-width:64px;
object-fit:contain!important;
background:var(--surface-2);border-radius:var(--r-sm);
padding:5px;display:block;
}
.woocommerce-cart table.cart td.actions{
display:table-cell!important;
padding:var(--sp-4)!important;
background:var(--surface-2);
text-align:left;
}
.woocommerce-cart table.cart td.actions::after{content:"";display:block;clear:both;}
.woocommerce-cart table.cart td.actions .coupon{
display:inline-flex;align-items:center;gap:var(--sp-2);
float:left;margin:0;width:auto;
}
.woocommerce-cart table.cart td.actions .coupon input.input-text{
width:220px!important;height:44px;margin:0;
}
.woocommerce-cart table.cart td.actions .coupon .button{height:44px;white-space:nowrap;margin:0;}
.woocommerce-cart table.cart td.actions > button[name="update_cart"],
.woocommerce-cart table.cart td.actions > input[name="update_cart"]{
float:right;height:44px;margin:0;white-space:nowrap;
}
@media (max-width:768px){
.woocommerce-cart table.cart td.actions{display:block!important;}
.woocommerce-cart table.cart td.actions .coupon{float:none;width:100%;margin-bottom:var(--sp-3);}
.woocommerce-cart table.cart td.actions .coupon input.input-text{width:100%!important;}
.woocommerce-cart table.cart td.actions > button[name="update_cart"]{float:none;width:100%;}
}
/* ============================================================
42. PRODUCT TAB PANELS — full width + real heading hierarchy
WooCommerce prints its own ("Description") above the
content, which then starts with its own at the same size.
Hide the redundant one (the tab is already labelled) and give
the content a proper h2 / h3 / p scale.
============================================================ */
.woocommerce div.product .woocommerce-tabs .panel{
max-width:none!important;
width:100%;
}
/* WooCommerce's duplicate panel title */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child{
position:absolute!important;width:1px;height:1px;
overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
/* Content hierarchy inside the tabs */
.woocommerce div.product .woocommerce-tabs .panel h2{
font-size:var(--fs-2xl);
line-height:1.25;
margin:var(--sp-6) 0 var(--sp-3);
color:var(--navy-800);
}
.woocommerce div.product .woocommerce-tabs .panel > h2:nth-of-type(2){margin-top:0;}
.woocommerce div.product .woocommerce-tabs .panel h3{
font-size:var(--fs-xl);line-height:1.3;
margin:var(--sp-5) 0 var(--sp-2);color:var(--navy-800);
}
.woocommerce div.product .woocommerce-tabs .panel h4{
font-size:var(--fs-lg);margin:var(--sp-4) 0 var(--sp-2);color:var(--navy-800);
}
.woocommerce div.product .woocommerce-tabs .panel p{
margin:0 0 var(--sp-4);
font-size:var(--fs-base);line-height:1.8;color:var(--ink-70);
max-width:78ch;
}
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol{
margin:0 0 var(--sp-5);padding-left:0;list-style:none;max-width:78ch;
}
.woocommerce div.product .woocommerce-tabs .panel ol{counter-reset:rlam-tab-ol;}
.woocommerce div.product .woocommerce-tabs .panel li{
position:relative;padding-left:1.9em;margin-bottom:.6em;
line-height:1.75;color:var(--ink-70);
}
.woocommerce div.product .woocommerce-tabs .panel ul li::before{
content:"";position:absolute;left:.35em;top:.62em;
width:7px;height:7px;border-radius:50%;background:var(--orange-500);
}
.woocommerce div.product .woocommerce-tabs .panel ol li{counter-increment:rlam-tab-ol;}
.woocommerce div.product .woocommerce-tabs .panel ol li::before{
content:counter(rlam-tab-ol);position:absolute;left:0;top:.1em;
width:1.35em;height:1.35em;border-radius:50%;
background:var(--orange-100);color:var(--orange-600);
font-size:.78em;font-weight:800;display:grid;place-items:center;
}
.woocommerce div.product .woocommerce-tabs .panel strong{color:var(--ink);}
.woocommerce div.product .woocommerce-tabs .panel a{font-weight:600;}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes{
width:100%;max-width:720px;border:1px solid var(--line);
border-radius:var(--r-md);overflow:hidden;border-collapse:separate;border-spacing:0;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td{
padding:var(--sp-3) var(--sp-4);border:0;border-bottom:1px solid var(--line);
font-size:var(--fs-sm);text-align:left;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th{
background:var(--surface-2);font-weight:700;color:var(--navy-800);width:220px;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes p{margin:0;}
/* The consultation tab keeps its own card styling */
#tab-consultation .consult-cta-block{max-width:820px;}
/* ============================================================
43. QUICK REQUEST — kill the void in the navy panel
Centring the stack distributes the leftover space evenly
instead of dumping it all between the price and the facts.
============================================================ */
@media (min-width:992px){
.quick-request .qr-media{justify-content:center;gap:var(--sp-5);}
.quick-request .qr-media img{
flex:0 1 auto;
max-height:300px;min-height:200px;
width:100%;object-fit:contain;
}
}
/* ============================================================
44. LIST STYLING MUST NOT LEAK INTO COMPONENTS
The generic .entry-content bullet was landing on the FAQ
accordion, the product grid and the nav, all of which are
too. Scope it out of every component list.
============================================================ */
.entry-content .faq_list,
.entry-content ul.products,
.entry-content .nav-menu,
.entry-content .footer-menu,
.entry-content .qr-facts,
.entry-content .pay-options,
.entry-content .woocommerce-order-overview{
list-style:none;padding-left:0;
}
.entry-content .faq_list > li,
.entry-content ul.products > li,
.entry-content .nav-menu > li,
.entry-content .footer-menu > li,
.entry-content .qr-facts > li,
.entry-content .woocommerce-order-overview > li{
padding-left:0;
}
.entry-content .faq_list > li::before,
.entry-content ul.products > li::before,
.entry-content .nav-menu > li::before,
.entry-content .footer-menu > li::before,
.entry-content .qr-facts > li::before,
.entry-content .pay-options > li::before,
.entry-content .woocommerce-order-overview > li::before{
content:none!important;display:none!important;
}
/* Belt and braces: the accordion never carries markers */
.faq_list,.faq_list li{list-style:none!important;}
.faq_list > li{padding-left:0!important;margin-bottom:var(--sp-3);}
.faq_list > li::before,
.faq_list > li::marker{content:none!important;display:none!important;}
/* Answers inside an accordion keep their own bullets, indented properly */
.faq_list .contents ul{margin:0 0 var(--sp-3);padding-left:0;list-style:none;}
.faq_list .contents li{padding-left:1.6em;margin-bottom:.45em;}
.faq_list .contents ul li::before{
content:""!important;display:block!important;
position:absolute;left:.3em;top:.6em;
width:6px;height:6px;border-radius:50%;background:var(--orange-500);
}
/* ============================================================
45. PAYMENT PREFERENCE INSIDE THE ORDER PANEL
It now sits in the narrower right column directly above the
submit button, so it stacks one option per row.
============================================================ */
#order_review .pay-preference{
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r-md);
padding:var(--sp-4);
margin:var(--sp-4) 0 0;
}
#order_review .pay-preference h3{
font-size:var(--fs-base);margin-bottom:var(--sp-1);color:var(--navy-800);
}
#order_review .pay-preference > p{
font-size:var(--fs-xs);color:var(--ink-50);margin-bottom:var(--sp-3);line-height:1.5;
}
#order_review .pay-options{
grid-template-columns:1fr;gap:var(--sp-2);margin-bottom:var(--sp-3);
}
#order_review .pay-option{
padding:var(--sp-2) var(--sp-3);
background:var(--surface);font-size:var(--fs-sm);
}
#order_review .pay-note-field{margin:0;}
#order_review .pay-note-field label{
font-size:var(--fs-xs);font-weight:600;color:var(--ink-70);margin-bottom:.3em;display:block;
}
#order_review .pay-note-field input{height:42px;font-size:var(--fs-sm);}
@media (min-width:1200px){
#order_review .pay-options{grid-template-columns:1fr 1fr;}
}
/* ============================================================
46. 100% CONTENT WIDTH EVERYWHERE
No reading-measure clamps — text fills the container on
products, pages, posts and category descriptions.
============================================================ */
.page-article,
.page-article .entry-content,
.blog-article .entry-content,
.term-longform .entry-content,
.woocommerce div.product .woocommerce-tabs .panel{
max-width:none!important;
}
.page-article .entry-content p,
.page-article .entry-content ul,
.page-article .entry-content ol,
.blog-article .entry-content p,
.blog-article .entry-content ul,
.blog-article .entry-content ol,
.term-longform .entry-content p,
.term-longform .entry-content ul,
.term-longform .entry-content ol,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol,
.entry-content p,
.entry-content ul,
.entry-content ol{
max-width:none!important;
}
/* The consultation form stays a sensible width — a full-bleed form is unusable */
#tab-consultation .consult-cta-block{max-width:860px;}
/* ============================================================
47. IMAGE BLENDING
Product photography is shot on white. Multiply-blending it
against the tinted surface removes the hard white box so the
pack sits directly on the panel. Applied everywhere product
imagery appears: listings, gallery, cart, checkout, widgets.
============================================================ */
.woocommerce ul.products li.product img,
ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce div.product .product-gallery img,
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce-checkout table.shop_table img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.cat-feature .media img,
.post-card-thumb img,
.blog-article > .entry-thumb img,
.widget-products ul.products li.product img{
mix-blend-mode:multiply;
background:transparent!important;
}
/* The surfaces they blend against */
.woocommerce ul.products li.product,
ul.products li.product{background:var(--surface);}
.woocommerce ul.products li.product > a:first-of-type,
.woocommerce ul.products li.product .post-thumb{background:var(--surface-2);display:block;}
/* Single product gallery: drop the inner white card so the pack
sits straight on the tinted panel */
.woocommerce div.product .product-gallery{background:var(--surface-2);}
.woocommerce div.product div.images,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image a{
background:transparent!important;
}
.woocommerce div.product .product-gallery img{border-radius:0;}
/* Cart / checkout thumbs blend into their tinted chip */
.woocommerce-cart table.cart td.product-thumbnail img{background:var(--surface-2)!important;}
/* Category feature panel */
.cat-feature .media{background:var(--surface-2);}
/* Blog cards already sit on a tint */
.post-card-thumb{background:var(--surface-2);}
/* Quick-request keeps its white chip — multiply against navy
would crush the artwork, so it is deliberately excluded. */
.quick-request .qr-media img{mix-blend-mode:normal;background:#fff!important;}
/* ============================================================
48. VERTICAL RHYTHM — no doubled gaps
The footer carried its own margin-top on top of the last
section's padding-block, producing a dead band above it.
Sections already own their spacing, so the footer adds none.
============================================================ */
.site-footer{margin-top:0;}
/* Consecutive same-tint sections shouldn't double their padding */
.section-pad + .section-pad{padding-top:0;}
.section-pad + .section-pad[style*="surface-2"],
.section-pad + .faq-section,
.section-pad + .testimonial-section,
.faq-section + .section-pad,
.testimonial-section + .section-pad,
[style*="surface-2"] + .section-pad{padding-top:var(--section-y);}
/* Page shells */
.page-wrap{padding-block:var(--section-y);}
.page-wrap > .container > *:last-child{margin-bottom:0;}
.entry-content > *:last-child{margin-bottom:0;}
/* Trailing elements inside sections */
.section-pad > .container > *:last-child{margin-bottom:0;}
.post-grid > *:last-child,
.feature-grid > *:last-child{margin-bottom:0;}
/* Blog list bottom margin was doubling with the section padding */
.post-card{margin-bottom:0;}
|