
:root{
 --color-primary:#E67E22;--color-primary-dark:#D35400;--color-primary-light:#F39C12;
 --color-accent-light:#FFF9E6;--color-accent-bright:#FFE66D;
 --color-secondary:#27AE60;--color-secondary-dark:#229954;
 --color-accent:#F39C12;
 --color-neutral:#34495E;--color-neutral-light:#7F8C8D;--color-neutral-dark:#2C3E50;
 --color-light:#ECF0F1;--color-white:#FFFFFF;--color-dark:#2C3E50;
 --color-text-primary:#2C3E50;--color-text-secondary:#7F8C8D;
 --color-success:#27AE60;--color-warning:#F39C12;--color-error:#E74C3C;--color-info:#3498DB;
 --font-heading:'Poppins',sans-serif;--font-body:'Inter',sans-serif;
 --font-size-base:16px;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.125rem;
 --font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--font-size-5xl:3rem;--font-size-6xl:3.75rem;
 --font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;
 --line-height-tight:1.25;--line-height-normal:1.6;--line-height-relaxed:1.8;
 --space-xs:.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:4rem;--space-3xl:6rem;
 --radius-sm:.25rem;--radius-md:.5rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;
 --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
 --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
 --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
 --transition-base:250ms cubic-bezier(.4,0,.2,1);
 --container-max-width:1200px;--container-padding:1.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--font-size-base);line-height:var(--line-height-normal);
 color:var(--color-text-primary);background:var(--color-white);-webkit-font-smoothing:antialiased}
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:var(--line-height-tight);
 color:var(--color-text-primary);margin:0 0 var(--space-md)}
a{color:var(--color-primary);text-decoration:none;transition:color 150ms cubic-bezier(.4,0,.2,1)}
a:hover{color:var(--color-accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
.container{max-width:var(--container-max-width);margin:0 auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}
.skip-link{position:absolute;top:-48px;left:0;background:var(--color-primary);color:#fff;padding:var(--space-sm);z-index:2000}
.skip-link:focus{top:0;color:#fff}

/* ---------- header ---------- */
.site-header{background:#fff;box-shadow:var(--shadow-md);position:sticky;top:0;z-index:900}
.main-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) 0}
.logo{font-family:var(--font-heading);font-size:var(--font-size-2xl);font-weight:800}
.logo a{color:var(--color-text-primary)}
.logo a{display:inline-block;padding:.5rem .25rem;min-height:44px;min-width:44px;line-height:1.4}
.logo strong{color:var(--color-primary)}
.nav-right{display:flex;align-items:center;gap:var(--space-md)}
.nav-menu{display:flex;align-items:center;gap:var(--space-md)}
.nav-link{color:var(--color-text-primary);font-weight:500;padding:.75rem .25rem;position:relative;display:inline-block}
.nav-link::after{content:'';position:absolute;bottom:.25rem;left:0;width:0;height:2px;background:var(--color-primary);transition:width var(--transition-base)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:var(--color-primary)}
.cart-link{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;font-family:var(--font-heading);font-weight:600;color:var(--color-text-primary);min-height:44px}
.cart-link img{width:1.5rem;height:1.5rem}
.cart-count{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);font-size:.75rem;line-height:1;min-width:1.25rem;height:1.25rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem}
.mobile-menu-toggle{display:none;flex-direction:column;justify-content:space-around;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:8px}
.hamburger{width:30px;height:3px;background:var(--color-text-primary);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-base)}
.hamburger::before,.hamburger::after{content:'';position:absolute;width:30px;height:3px;background:var(--color-text-primary);border-radius:var(--radius-sm);transition:all var(--transition-base)}
.hamburger::before{top:-8px}.hamburger::after{top:8px}
.mobile-menu-toggle.active .hamburger{background:transparent}
.mobile-menu-toggle.active .hamburger::before{transform:rotate(45deg);top:0}
.mobile-menu-toggle.active .hamburger::after{transform:rotate(-45deg);top:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-heading);
 font-weight:600;text-align:center;cursor:pointer;border:2px solid transparent;padding:.75rem 1.5rem;
 font-size:var(--font-size-md);line-height:1.5;border-radius:var(--radius-lg);transition:all var(--transition-base);white-space:nowrap;min-height:48px}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff}
.btn-secondary{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}
.btn-secondary:hover{background:var(--color-secondary-dark);border-color:var(--color-secondary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#fff}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-small{padding:.5rem 1rem;font-size:var(--font-size-sm);min-height:44px}
.btn-large{padding:1rem 2rem;font-size:var(--font-size-lg)}
.btn-block{width:100%}

/* ---------- hero / sections ---------- */
.hero{background:linear-gradient(135deg,#E67E22 0%,#F39C12 100%);color:#fff;padding:var(--space-3xl) 0;text-align:center}
.hero-headline{color:#fff;font-size:var(--font-size-5xl);margin-bottom:var(--space-md);line-height:1.1}
.hero-subheadline{font-size:var(--font-size-xl);margin:0 auto var(--space-xl);color:rgba(255,255,255,.95);max-width:700px}
.hero .btn-primary{background:#fff;color:var(--color-primary);border-color:#fff}
.hero .btn-primary:hover{background:var(--color-light);border-color:var(--color-light);color:var(--color-primary-dark)}
section{padding:var(--space-3xl) 0}
.section-title{text-align:center;margin-bottom:var(--space-2xl);position:relative}
.section-title::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));margin:var(--space-md) auto 0;border-radius:var(--radius-full)}
.section-intro{max-width:720px;margin:0 auto var(--space-2xl);text-align:center;color:var(--color-text-secondary)}

/* ---------- product/service cards ---------- */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-lg)}
.product-card{background:#fff;padding:var(--space-xl) var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
 transition:all var(--transition-base);text-align:center;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}
.product-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
 border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-md)}
.product-icon img{width:40px;height:40px}
.product-model{font-size:var(--font-size-sm);color:var(--color-text-secondary);letter-spacing:.05em;margin-bottom:var(--space-xs)}
.product-card h3{font-size:1.25rem;margin-bottom:var(--space-xs)}
.product-tagline{font-size:var(--font-size-sm);color:var(--color-accent);font-weight:600;margin-bottom:var(--space-xs)}
.product-blurb{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-grow:1;margin-bottom:var(--space-md)}
.product-price{font-family:var(--font-heading);font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--space-md);color:var(--color-text-primary)}
.product-actions{display:flex;flex-direction:column;gap:var(--space-xs)}

/* category band */
.cat-band{background:var(--color-light);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);
 display:flex;align-items:center;gap:var(--space-md)}
.cat-band img{width:2.5rem;height:2.5rem;flex:none}
.cat-band h3{margin:0;font-size:1.25rem}
.cat-band p{margin:.25rem 0 0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}
.empty-cat{border:2px dashed var(--color-text-light);border-radius:var(--radius-lg);padding:var(--space-lg);text-align:center;color:var(--color-text-secondary);margin-top:var(--space-md)}
.empty-cat a{display:inline-block;padding:.5rem .25rem;min-height:44px;line-height:1.4}

/* ---------- product detail ---------- */
.pd-wrap{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start}
.pd-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.pd-header .product-icon{width:96px;height:96px;margin:0;flex:none}
.pd-header .product-icon img{width:48px;height:48px}
.pd-tagline{color:var(--color-accent);font-weight:600;margin:0}
.pd-desc p{line-height:var(--line-height-relaxed);color:var(--color-text-primary)}
.pd-features{list-style:none;padding:0;margin:var(--space-lg) 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.pd-features li{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.pd-features li img{width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem}
.buy-box{background:var(--color-light);border-radius:var(--radius-lg);padding:var(--space-xl);position:sticky;top:110px}
.buy-box .model{font-size:var(--font-size-sm);color:var(--color-text-secondary);letter-spacing:.05em}
.buy-box .price{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;margin:.25rem 0 var(--space-xs)}
.buy-box .price-note{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-lg)}
.buy-box ul{list-style:none;padding:0;margin:0 0 var(--space-lg);font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.buy-box ul li{display:flex;gap:.5rem;align-items:center;margin-bottom:var(--space-xs)}
.buy-box ul img{width:1.1rem;height:1.1rem}
.related{background:var(--color-light)}
.related .catalog-grid{margin-top:0}

/* ---------- trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-lg)}
.trust-item{padding:var(--space-lg);border-left:4px solid var(--color-secondary);background:var(--color-light);border-radius:var(--radius-md)}
.trust-item h3{color:var(--color-secondary);font-size:1.125rem;margin-bottom:var(--space-xs)}
.trust-item p{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}

/* ---------- cart / checkout ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-family:var(--font-heading);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);padding:var(--space-sm) 0;border-bottom:2px solid var(--color-light)}
.cart-table td{padding:var(--space-md) 0;border-bottom:1px solid var(--color-light);vertical-align:middle}
.cart-item-name{font-family:var(--font-heading);font-weight:600;color:var(--color-text-primary)}
.cart-item-model{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.qty-stepper{display:inline-flex;align-items:center;border:2px solid var(--color-light);border-radius:var(--radius-md)}
.qty-stepper button,.qty-stepper input{flex:none}
.qty-stepper button{width:44px;height:44px;background:#fff;border:none;font-size:1.25rem;cursor:pointer;color:var(--color-primary)}
.qty-stepper input{width:44px;height:44px;text-align:center;border:none;font-family:var(--font-body);font-size:1rem}
.remove-link{background:none;border:none;color:var(--color-error);cursor:pointer;font-size:var(--font-size-sm);padding:.5rem;min-height:44px}
.summary-card{background:var(--color-light);border-radius:var(--radius-lg);padding:var(--space-xl);position:sticky;top:110px}
.summary-row{display:flex;justify-content:space-between;margin-bottom:var(--space-sm)}
.summary-row.total{border-top:2px solid var(--color-neutral-light);padding-top:var(--space-sm);margin-top:var(--space-sm);font-family:var(--font-heading);font-weight:700;font-size:var(--font-size-lg)}
.steps{display:flex;gap:var(--space-xs);margin-bottom:var(--space-xl);flex-wrap:wrap}
.step{flex:1;min-width:120px;text-align:center;padding:var(--space-sm) var(--space-xs);border-radius:var(--radius-md);background:var(--color-light);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-family:var(--font-heading);font-weight:600}
.step.done{background:#DFF3E7;color:var(--color-secondary-dark)}
.step.current{background:var(--color-primary);color:#fff}
.checkout-card{background:#fff;border:2px solid var(--color-light);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-lg)}
.acct-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg);flex-wrap:wrap}
.acct-tab{flex:1;min-width:140px;padding:.75rem;border:2px solid var(--color-light);border-radius:var(--radius-md);background:#fff;cursor:pointer;font-family:var(--font-heading);font-weight:600;text-align:center;color:var(--color-text-secondary);min-height:48px}
.acct-tab.selected{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-accent-light)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-lg)}
.form-group{margin-bottom:var(--space-lg)}
.form-group label{display:block;font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text-primary)}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=tel],.form-group select,.form-group textarea{
 width:100%;padding:.85rem;border:2px solid #E0E0E0;border-radius:var(--radius-md);font-size:1rem;font-family:var(--font-body);min-height:48px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary)}
.required{color:var(--color-error)}
.pay-option{display:flex;align-items:flex-start;gap:var(--space-sm);border:2px solid var(--color-light);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-sm);cursor:pointer}
.pay-option.selected{border-color:var(--color-secondary);background:#F2FBF5}
.pay-option.disabled{opacity:.55;cursor:not-allowed}
.pay-option input{width:22px;height:22px;min-width:22px;flex:none;margin-top:.2rem;accent-color:var(--color-primary)}
.pay-option .pay-name{font-family:var(--font-heading);font-weight:600}
.pay-option .pay-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.agree-row{display:flex;align-items:flex-start;gap:var(--space-sm);margin:var(--space-lg) 0}
.agree-row input{width:24px;height:24px;min-width:24px;flex:none;margin-top:.15rem;accent-color:var(--color-primary)}
.agree-row label{font-size:var(--font-size-sm);color:var(--color-text-secondary);display:inline-flex;align-items:flex-start;gap:.35rem;line-height:1.6}
.agree-row label a{display:inline-block;padding:.5rem .15rem;min-height:44px;line-height:1.4}
.notice{background:var(--color-accent-light);border-left:4px solid var(--color-primary);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-bottom:var(--space-lg)}
.notice.green{background:#F2FBF5;border-left-color:var(--color-secondary)}

/* ---------- footer ---------- */
.site-footer{background:var(--color-dark);color:rgba(255,255,255,.8);padding:var(--space-3xl) 0 var(--space-lg)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-xl);margin-bottom:var(--space-2xl)}
.footer-section h3,.footer-section h4{color:#fff;margin-bottom:var(--space-md)}
.footer-logo{font-size:var(--font-size-2xl)}
.footer-logo strong{color:var(--color-primary)}
.footer-tagline{color:var(--color-primary);font-weight:600;margin:0 0 var(--space-sm)}
.footer-description{font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.footer-links,.footer-contact{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:0}
.footer-links a{color:rgba(255,255,255,.8);display:flex;align-items:center;padding:.5rem 0;min-height:44px}
.footer-links a:hover{color:var(--color-primary)}
.footer-contact li{margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);min-height:44px}
.footer-contact a{color:rgba(255,255,255,.8);display:inline-flex;align-items:center;min-height:44px}
.footer-contact img{width:1.25rem;height:1.25rem;flex:none}
.footer-contact a:hover{color:var(--color-primary)}
.social-links a{width:44px;height:44px;background:rgba(255,255,255,.1);border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;transition:all 150ms cubic-bezier(.4,0,.2,1);color:rgba(255,255,255,.8)}
.social-links a:hover{background:var(--color-primary);transform:translateY(-3px);color:#fff}
.social-links img{width:1.5rem;height:1.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--space-lg);text-align:center}
.copyright,.footer-credits{font-size:var(--font-size-sm);color:rgba(255,255,255,.6);margin:0 0 var(--space-xs)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--color-dark);color:#fff;
 padding:1rem 1.5rem;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);z-index:1500;opacity:0;transition:all var(--transition-base);
 font-family:var(--font-heading);font-weight:600;display:flex;gap:.6rem;align-items:center;max-width:92vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast img{width:1.4rem;height:1.4rem}

/* ---------- responsive ---------- */
@media (max-width:1024px){
 .pd-wrap,.cart-layout{grid-template-columns:1fr;gap:var(--space-xl)}
 .buy-box,.summary-card{position:static}
}
@media (max-width:640px){
 :root{--font-size-6xl:2.5rem;--font-size-5xl:2rem;--font-size-4xl:1.75rem;--font-size-3xl:1.5rem;--space-3xl:3rem;--space-2xl:2.5rem;--container-padding:1rem}
 .main-nav{padding:var(--space-sm) 0}
 .nav-menu{position:fixed;top:0;right:-100%;width:min(280px,84vw);height:100vh;background:#fff;flex-direction:column;
  align-items:flex-start;padding:calc(var(--space-2xl) + 60px) var(--space-lg);box-shadow:var(--shadow-xl);
  transition:right var(--transition-base);z-index:950;overflow-y:auto}
 .nav-menu.open{right:0}
 .nav-link{width:100%;padding:.9rem 0;font-size:var(--font-size-lg);min-height:44px}
 .mobile-menu-toggle{display:flex;z-index:960}
 .hero{padding:var(--space-2xl) 0}
 section{padding:var(--space-2xl) 0}
 .catalog-grid{grid-template-columns:1fr;gap:var(--space-md)}
 .pd-features{grid-template-columns:1fr}
 .form-grid{grid-template-columns:1fr}
 .cart-table .hide-m{display:none}
 .footer-grid{grid-template-columns:1fr}
 .btn:not(.toast-btn){width:100%}
 .qty-wrap{display:flex;align-items:center;gap:var(--space-xs)}
 .cart-table thead{display:none}
 .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
 .cart-table tr{border:2px solid var(--color-light);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}
 .cart-table td{border:none;padding:var(--space-xs) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}
 .cart-table td::before{content:attr(data-label);font-family:var(--font-heading);font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:600;flex:none}
 .cart-table td[data-label="Remove"]::before{content:""}
 .qty-stepper button,.qty-stepper input{width:48px}
 .breadcrumb{overflow-x:auto}
}
@media (max-width:400px){
 .logo{font-size:1.35rem}
 .buy-box .price{font-size:2rem}
 .step{min-width:100px}
}

/* --- B-only: breadcrumb --- */
.breadcrumb-bar{background:var(--color-light);border-bottom:1px solid #dde3e6}
.breadcrumb{display:flex;align-items:center;gap:.5rem;padding:.65rem 0;font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-wrap:wrap}
.breadcrumb a{color:var(--color-text-secondary);display:inline-block;padding:.5rem .45rem;min-height:44px;line-height:1.4}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb .sep{color:var(--color-text-light)}
.breadcrumb .here{color:var(--color-primary);font-weight:600}
/* --- B-only: shop affordances on cards --- */
.product-card{padding:0 0 var(--space-lg);text-align:left;overflow:hidden}
.product-card .card-media{background:linear-gradient(135deg,var(--color-accent-light),#FFF4DE);padding:var(--space-lg);text-align:center;position:relative}
.product-card .card-media img{width:56px;height:56px}
.price-badge{position:absolute;top:12px;right:12px;background:var(--color-primary);color:#fff;font-family:var(--font-heading);
 font-weight:700;font-size:.9rem;padding:.35rem .7rem;border-radius:var(--radius-full)}
.cat-chip{display:inline-block;background:var(--color-light);color:var(--color-text-secondary);font-size:.72rem;font-weight:600;
 letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-full);padding:.3rem .7rem;margin:var(--space-md) var(--space-lg) .4rem}
.product-card h3,.product-tagline,.product-blurb,.product-model{margin-left:var(--space-lg);margin-right:var(--space-lg)}
.product-card h3{font-size:1.15rem}
.product-price{margin:0 var(--space-lg) var(--space-sm);display:flex;align-items:baseline;gap:.5rem}
.price-was{font-size:var(--font-size-sm);color:var(--color-text-light);text-decoration:line-through;font-weight:400}
.stock-ok{margin:0 var(--space-lg) var(--space-md);display:flex;align-items:center;gap:.4rem;color:var(--color-secondary-dark);font-size:var(--font-size-sm);font-weight:600}
.stock-ok img{width:1.1rem;height:1.1rem}
.product-actions{padding:0 var(--space-lg)}
/* --- B-only: filter chips --- */
.filter-row{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-xl);justify-content:center}
.chip{border:2px solid var(--color-light);background:#fff;color:var(--color-text-secondary);font-family:var(--font-heading);font-weight:600;
 font-size:var(--font-size-sm);padding:.5rem 1.1rem;border-radius:var(--radius-full);cursor:pointer;min-height:44px;transition:all 150ms}
.chip.on,.chip:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-accent-light)}
/* --- B-only: mini-cart drawer --- */
.drawer-scrim{position:fixed;inset:0;background:rgba(44,62,80,.5);opacity:0;pointer-events:none;transition:opacity var(--transition-base);z-index:1000}
.drawer{position:fixed;top:0;right:-360px;width:min(340px,88vw);height:100vh;background:#fff;z-index:1010;box-shadow:var(--shadow-xl);
 transition:right var(--transition-base);display:flex;flex-direction:column}
body.drawer-open .drawer{right:0}
body.drawer-open .drawer-scrim{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-light)}
.drawer-head h3{margin:0;font-size:1.15rem}
.drawer-close{background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--color-text-secondary);width:44px;height:44px;line-height:1}
.drawer-items{flex:1;overflow-y:auto;padding:var(--space-md) var(--space-lg)}
.d-item{display:flex;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-light)}
.d-item .di-icon{width:44px;height:44px;background:var(--color-accent-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex:none}
.d-item .di-icon img{width:26px;height:26px}
.di-name{font-family:var(--font-heading);font-weight:600;font-size:.9rem}
.di-meta{font-size:.78rem;color:var(--color-text-secondary)}
.drawer-foot{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-light)}
/* --- B-only: sticky mobile buy bar --- */
.sticky-buy{display:none}
@media (max-width:640px){
 .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -4px 12px rgba(0,0,0,.12);
  padding:.6rem var(--container-padding);gap:var(--space-sm);align-items:center;z-index:900}
 .sticky-buy .sb-price{font-family:var(--font-heading);font-weight:700;font-size:1.25rem}
 .sticky-buy .sb-price small{display:block;font-size:.68rem;color:var(--color-text-secondary);font-weight:500}
 .sticky-buy .btn{flex:1;width:auto;min-width:0}
 body{padding-bottom:76px}
}

/* ============================================================
   speak_tech — OpenCart overlay (on top of Variant B mock CSS)
   ============================================================ */
/* Top utility bar */
.topbar{background:var(--color-dark);color:rgba(255,255,255,.85);font-size:var(--font-size-sm)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:40px;gap:var(--space-sm)}
.topbar a{color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .6rem}
.topbar a:hover{color:var(--color-accent-bright)}
.topbar .dropdown-menu{color:var(--color-text-primary)}
.topbar .dropdown-toggle{min-height:44px}
.topbar-left{display:flex;align-items:center;gap:var(--space-sm)}
.topbar-right{display:flex;align-items:center;gap:var(--space-sm)}
/* OC carousel controls — enlarge hit area */
.carousel-control-prev,.carousel-control-next{min-width:44px;min-height:44px;width:44px;height:44px;top:50%;transform:translateY(-50%);border-radius:var(--radius-md);background:rgba(44,62,80,.35);margin:0 .25rem}
.carousel-indicators [data-bs-target]{width:30px;height:30px;background:transparent;border:none}

/* Category nav chips (menu.twig override) */
.cat-nav-wrap{padding:var(--space-md) 0 var(--space-xs)}
.cat-nav{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.cat-chip{border:2px solid var(--color-light);background:#fff;color:var(--color-text-secondary);font-family:var(--font-heading);font-weight:600;font-size:var(--font-size-sm);padding:.5rem 1.1rem;border-radius:var(--radius-full);cursor:pointer;min-height:44px;transition:all 150ms;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.cat-chip:hover,.cat-drop.show .cat-chip{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-accent-light)}
.cat-chip i{font-size:.75rem}

/* Page titles + layout */
.main-content{min-height:50vh}
.page-title{margin:var(--space-lg) 0}
.cat-band{margin-top:var(--space-md)}
#content{min-width:0}

/* Alerts */
.alert{border-radius:var(--radius-md);border:1px solid transparent}
.alert-success{background:#F2FBF5;border-color:#BFE8D0;color:var(--color-secondary-dark)}
.alert-danger{background:#FDECEA;border-color:#F5C6C2;color:var(--color-error)}
.alert-info{background:var(--color-accent-light);border-color:#F9E2AC;color:var(--color-neutral-dark)}
.alert-dismissible .btn-close{cursor:pointer}

/* Forms (OC) */
.form-control,.form-select{width:100%;padding:.85rem;border:2px solid #E0E0E0;border-radius:var(--radius-md);font-size:1rem;font-family:var(--font-body);min-height:48px;background:#fff;color:var(--color-text-primary)}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(230,126,34,.12)}
.form-label{display:block;font-weight:600;margin-bottom:var(--space-xs);color:var(--color-text-primary)}
textarea.form-control{min-height:100px}

/* Cart table (Variant B + OC) */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-family:var(--font-heading);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);padding:var(--space-sm) 0;border-bottom:2px solid var(--color-light)}
.cart-table td{padding:var(--space-md) 0;border-bottom:1px solid var(--color-light);vertical-align:middle}
.summary-card{background:var(--color-light);border-radius:var(--radius-lg);padding:var(--space-xl);position:sticky;top:110px}
.summary-row{display:flex;justify-content:space-between;margin-bottom:var(--space-sm)}
.summary-row.total{border-top:2px solid var(--color-neutral-light);padding-top:var(--space-sm);margin-top:var(--space-sm);font-family:var(--font-heading);font-weight:700;font-size:var(--font-size-lg)}
.qty-wrap{display:flex;align-items:center;gap:var(--space-xs)}
.qty-btn{width:44px;height:44px;flex:none}

/* Steps */
.steps{display:flex;gap:var(--space-xs);margin:var(--space-lg) 0;flex-wrap:wrap}
.step{flex:1;min-width:120px;text-align:center;padding:var(--space-sm) var(--space-xs);border-radius:var(--radius-md);background:var(--color-light);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-family:var(--font-heading);font-weight:600}
.step.done{background:#DFF3E7;color:var(--color-secondary-dark)}
.step.current{background:var(--color-primary);color:#fff}

/* Product detail */
.pd-wrap{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:start}
.buy-box{background:var(--color-light);border-radius:var(--radius-lg);padding:var(--space-xl);position:sticky;top:110px}
.buy-box .model{font-size:var(--font-size-sm);color:var(--color-text-secondary);letter-spacing:.05em}
.buy-box .price{font-family:var(--font-heading);font-size:2.5rem;font-weight:700;margin:.25rem 0 var(--space-xs)}
.buy-box .price-was{font-size:var(--font-size-sm);color:var(--color-neutral-light);text-decoration:line-through;font-weight:400}
.opt-radio-item{display:flex;align-items:center;gap:var(--space-sm);padding:.5rem 0;min-height:44px;cursor:pointer}
.opt-radio-item input{width:22px;height:22px;min-width:22px;flex:none;accent-color:var(--color-primary)}

/* Product card (thumb.twig) */
.product-card{background:#fff;padding:0 0 var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-base);text-align:left;display:flex;flex-direction:column;overflow:hidden}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}
.card-media{background:linear-gradient(135deg,var(--color-accent-light),#FFF4DE);padding:var(--space-lg);text-align:center;position:relative;min-height:110px;display:flex;align-items:center;justify-content:center}
.card-media-img{width:56px;height:56px;object-fit:contain}
.card-media-fallback{width:56px;height:56px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary),var(--color-accent));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem}
.price-badge{position:absolute;top:12px;right:12px;background:var(--color-primary);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:.9rem;padding:.35rem .7rem;border-radius:var(--radius-full)}
.product-card h3{font-size:1.15rem;margin:var(--space-sm) var(--space-lg) .4rem}
.product-card h3 a{color:var(--color-text-primary);display:inline-flex;align-items:center;min-height:44px;padding:.25rem 0}
.product-card h3 a:hover{color:var(--color-primary)}
/* Featured/latest module on home — ensure tap-friendly link areas */
#content .product-thumb h4 a,#content .product-thumb .description a{min-height:44px;display:inline-flex;align-items:center}
#content .product-thumb a{min-height:44px}
.product-model{font-size:var(--font-size-sm);color:var(--color-text-secondary);letter-spacing:.05em;margin:0 var(--space-lg) var(--space-xs)}
.product-blurb{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-grow:1;margin:0 var(--space-lg) var(--space-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stock-ok{margin:0 var(--space-lg) var(--space-md);display:flex;align-items:center;gap:.4rem;color:var(--color-secondary-dark);font-size:var(--font-size-sm);font-weight:600}
.cat-chip[class]{margin:var(--space-md) var(--space-lg) .4rem}

/* Drawer items (common/cart.twig) */
.d-item{display:flex;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-light);align-items:flex-start}
.di-icon{width:44px;height:44px;background:var(--color-accent-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex:none;color:var(--color-primary);font-size:1.1rem}
.di-icon img{width:26px;height:26px;object-fit:contain}
.di-body{flex:1;min-width:0}
.di-name{font-family:var(--font-heading);font-weight:600;font-size:.9rem}
.di-name a{color:var(--color-text-primary)}
.di-meta{font-size:.78rem;color:var(--color-text-secondary)}
.di-price{font-family:var(--font-heading);font-weight:700;font-size:.9rem}
.drawer-remove{background:none;border:none;color:var(--color-error);cursor:pointer;width:44px;height:44px;font-size:1.1rem;flex:none}
.d-empty{text-align:center;padding:var(--space-xl) var(--space-md);color:var(--color-text-secondary)}
.d-empty i{font-size:2rem;color:var(--color-neutral-light);margin-bottom:var(--space-sm);display:block}
.drawer-foot .btn{margin-bottom:var(--space-sm)}

/* Pagination (OC) */
.pagination{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;padding:0;margin:0}
.pagination li a,.pagination li span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .75rem;border:2px solid var(--color-light);border-radius:var(--radius-md);color:var(--color-text-secondary);font-weight:600}
.pagination li.active span{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.pagination li a:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* Review list */
#review{background:var(--color-light);border-radius:var(--radius-lg);padding:var(--space-lg)}
.rating .fa-star{color:var(--color-accent-bright)}
.rating .fa-regular.fa-star{color:var(--color-neutral-light)}

/* Footer dark fixes */
.site-footer h3,.site-footer h4{color:#fff;margin-bottom:var(--space-md)}
.footer-links a,.footer-contact li,.footer-contact a{color:rgba(255,255,255,.8)}
.footer-contact{list-style:none;padding:0;margin:0}
.footer-contact li{margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);min-height:44px}
.footer-social a{width:44px;height:44px;background:rgba(255,255,255,.1);border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);margin-right:.5rem}
.footer-social a:hover{background:var(--color-primary);color:#fff}

/* Bootstrap dropdown within nav (menu override) */
.cat-drop .dropdown-menu{border:2px solid var(--color-light);border-radius:var(--radius-md);padding:.5rem}
.cat-drop .dropdown-item{border-radius:var(--radius-sm);min-height:44px;display:flex;align-items:center}
.cat-drop .dropdown-item:hover{background:var(--color-accent-light);color:var(--color-primary)}

@media (max-width:1024px){
  .pd-wrap,.cart-layout{grid-template-columns:1fr;gap:var(--space-xl)}
  .buy-box,.summary-card{position:static}
}
@media (max-width:640px){
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border:2px solid var(--color-light);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}
  .cart-table td{border:none;padding:var(--space-xs) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}
  .cart-table td::before{content:attr(data-label);font-family:var(--font-heading);font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:600;flex:none}
  .cart-table td[data-label="Remove"]::before{content:""}
  .hide-m{display:none!important}
  .topbar-right .d-none{display:inline!important}
  .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -4px 12px rgba(0,0,0,.12);padding:.6rem var(--container-padding);gap:var(--space-sm);align-items:center;z-index:900}
  .sticky-buy .sb-price{font-family:var(--font-heading);font-weight:700;font-size:1.25rem}
  .sticky-buy .sb-price small{display:block;font-size:.68rem;color:var(--color-text-secondary);font-weight:500}
  .sticky-buy .btn{flex:1;width:auto;min-width:0}
  body{padding-bottom:76px}
}
@media (max-width:400px){
  .step{min-width:100px}
  .buy-box .price{font-size:2rem}
}

/* ============================================================
   speak_tech — Stage-3 feedback fixes
   ============================================================ */
/* 1. Product-box spacing — never touching */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem;align-items:stretch}
.product-card{margin:0}
/* Home feature/latest module space out */
.product-layout .product-thumb{height:100%}
#content .row .product-thumb,.product-layout{margin-bottom:0}
#content [class*="product-layout"]{padding-bottom:0}

/* 2. Left column — replace Bootstrap blue with Speak.Tech palette */
#column-left .list-group{--bs-list-group-border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md)}
#column-left .list-group-item{border:1px solid var(--color-light);color:var(--color-text-secondary);font-weight:500;font-family:var(--font-heading);font-size:var(--font-size-sm);min-height:44px;display:flex;align-items:center;padding:.75rem 1rem}
#column-left .list-group-item:hover{background:var(--color-accent-light);color:var(--color-primary)}
#column-left .list-group-item.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
#column-left .list-group-item.active:hover{color:#fff}
#column-left .list-group-item a{color:inherit;display:flex;align-items:center;width:100%}
/* left column banner spacing */
#column-left .carousel{margin-bottom:var(--space-lg)}
#column-left .carousel-inner img{border-radius:var(--radius-lg)}

/* 3. Footer — tighter line spacing */
.site-footer{padding:var(--space-2xl) 0 var(--space-lg)}
.footer-grid{margin-bottom:var(--space-xl);gap:var(--space-xl)}
.footer-section h3,.footer-section h4{margin-bottom:var(--space-sm);font-size:1.05rem}
.footer-description{margin:0 0 var(--space-sm);line-height:1.55}
.footer-tagline{margin:0 0 var(--space-xs);font-size:var(--font-size-sm)}
.footer-links a{padding:.35rem 0;min-height:40px;line-height:1.4}
.footer-contact li{margin-bottom:var(--space-xs);min-height:38px}
.footer-contact{line-height:1.4}
.footer-section p{line-height:1.5;margin:0 0 var(--space-xs)}
.footer-bottom{padding-top:var(--space-md);margin-top:var(--space-md)}
.footer-bottom p{margin:0 0 4px;font-size:var(--font-size-sm)!important}

/* 4. Get Started form — service interest chips (low-effort) */
.interest-grid{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.interest-chip{border:2px solid var(--color-light);background:#fff;border-radius:var(--radius-full);cursor:pointer;transition:all 150ms;display:inline-flex;align-items:center;min-height:44px;padding:.3rem .3rem}
.interest-chip input{position:absolute;opacity:0;width:0;height:0}
.interest-chip span{font-family:var(--font-heading);font-weight:600;font-size:var(--font-size-sm);color:var(--color-text-secondary);padding:.45rem 1rem;border-radius:var(--radius-full);line-height:1}
.interest-chip:hover{border-color:var(--color-primary)}
.interest-chip:hover span{color:var(--color-primary)}
.interest-chip:has(input:checked){border-color:var(--color-primary);background:var(--color-accent-light)}
.interest-chip:has(input:checked) span{color:var(--color-primary)}
.interest-chip:focus-within{outline:2px solid var(--color-primary);outline-offset:2px}

/* 5. Blog list */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.blog-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;transition:all var(--transition-base)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.blog-card-media{background:var(--color-accent-light);min-height:120px;display:flex;align-items:center;justify-content:center}
.blog-card-media img{max-height:140px;object-fit:cover}
.blog-card-body{padding:var(--space-md) var(--space-lg) var(--space-lg)}
.blog-card-body h2{font-size:1.15rem;margin-bottom:var(--space-xs)}
.blog-card-body h2 a{color:var(--color-text-primary);display:inline-block;min-height:44px;line-height:1.4;padding:.2rem 0}
.blog-card-body h2 a:hover{color:var(--color-primary)}
.blog-meta,.blog-post-meta{display:flex;gap:var(--space-md);flex-wrap:wrap;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}
.blog-card-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex-grow:1;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-cover{width:100%;border-radius:var(--radius-lg)}
.blog-post{max-width:820px}
.blog-post-body{line-height:var(--line-height-relaxed);color:var(--color-text-primary)}
.blog-post-body h2{margin-top:var(--space-lg)}
.blog-post-cover{max-height:360px;width:auto;max-width:100%;border-radius:var(--radius-lg);margin:var(--space-sm) 0 var(--space-lg)}
.blog-tags{margin-top:var(--space-lg);font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.blog-tags a{color:var(--color-primary);min-height:44px;display:inline-flex;align-items:center}

/* 6. Info pages */
.info-page{max-width:820px;line-height:var(--line-height-relaxed)}
.info-page h2{margin-top:var(--space-lg);color:var(--color-primary)}

@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
}

/* 7. Tap-target hardening (mobile nav + footer links) */
.nav-menu a{min-height:44px}
#navMenu .nav-link{padding:.9rem 0;min-height:44px;display:flex;align-items:center}
.footer-links a{min-height:44px;padding:.5rem 0}
.footer-links a,.footer-contact a{line-height:1.5}
@media (max-width:640px){
  .nav-menu.open a{min-height:48px;padding:.75rem 0}
}

/* 8. Social Share+ overlay — keep brand + ≥44px tap targets */
.social-share-section .social-share-wrapper{background:var(--color-light);border:1px solid var(--color-light);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);margin:0}
.social-share-section .social-share-label{font-family:var(--font-heading);font-weight:600;color:var(--color-text-primary);font-size:var(--font-size-sm)}
.social-share-section .social-share-btn{min-height:44px;min-width:44px;padding:.5rem .9rem;border-radius:var(--radius-md);font-family:var(--font-heading);font-weight:600}

/* 9. Nav spacing + green confirm button (feedback) */
.nav-menu{gap:.5rem}
.nav-menu .nav-link,.nav-menu .cart-link{padding:.5rem .4rem;white-space:nowrap}
.nav-menu .btn.nav-cta{margin-left:.25rem}
.main-nav{padding:.5rem 0}
.btn-confirm,.btn-success{background:var(--color-secondary);color:#fff;border-color:var(--color-secondary)}
.btn-confirm:hover,.btn-success:hover{background:var(--color-secondary-dark);border-color:var(--color-secondary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
#checkout-payment .btn-confirm,#checkout-payment .btn-success{min-height:52px;font-size:var(--font-size-lg);padding:.85rem 2rem}
