/*
Theme Name: Uwcamerabeveiliger
Theme URI: https://uwcamerabeveiliger.nl
Author: Elevate Business Development
Author URI: https://elevate-bd.nl
Description: Custom WordPress/WooCommerce-thema voor Uwcamerabeveiliger.nl. Reproduceert de huisstijl, header, footer en homepage van het goedgekeurde HTML-prototype. Fase 1: huisstijl + header/footer + homepage + basisstyling WooCommerce.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: uwcamerabeveiliger
*/

/* =========================================================================
   1. KLEUREN & TYPOGRAFIE (1-op-1 overgenomen uit prototype/template.html)
   ========================================================================= */
:root{
  --ink:#1c1c1c; --head:#06232B; --ink-soft:#4a5c6b; --paper:#fcfcfc; --card:#FFFFFF;
  --blue:#113971; --navy:#172e43; --blue-soft:#e7eef8; --blue-mid:#20549c;
  --green:#54B362; --green-hover:#6DCC7B; --green-soft:#e6f4e9;
  --orange:#fb8e28; --orange-ink:#5a2e00;
  --line:#d3dce5; --line-soft:#e5ebf1;
  --topbar:#113971; --topbar-ink:#c3d0de;
  --shadow:0 1px 3px rgba(17,57,113,.08),0 4px 16px rgba(17,57,113,.07);
  --shadow-lift:0 4px 10px rgba(17,57,113,.12),0 12px 32px rgba(17,57,113,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#dfe8ef; --head:#f2f7fa; --ink-soft:#96aab9; --paper:#0d1a26; --card:#142a3c;
    --blue:#6f9bd6; --navy:#0a141d; --blue-soft:#1c3850; --blue-mid:#8db4e8;
    --green:#54B362; --green-hover:#6DCC7B; --green-soft:#173525;
    --orange:#fb8e28; --orange-ink:#2b1600;
    --line:#28455c; --line-soft:#1e3648;
    --topbar:#0a141d; --topbar-ink:#7e94a8;
    --shadow:0 1px 3px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3);
    --shadow-lift:0 4px 10px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"]{
  --ink:#1c1c1c; --head:#06232B; --ink-soft:#4a5c6b; --paper:#fcfcfc; --card:#FFFFFF;
  --blue:#113971; --navy:#172e43; --blue-soft:#e7eef8; --blue-mid:#20549c;
  --green:#54B362; --green-hover:#6DCC7B; --green-soft:#e6f4e9;
  --orange:#fb8e28; --orange-ink:#5a2e00;
  --line:#d3dce5; --line-soft:#e5ebf1;
  --topbar:#113971; --topbar-ink:#c3d0de;
  --shadow:0 1px 3px rgba(17,57,113,.08),0 4px 16px rgba(17,57,113,.07);
  --shadow-lift:0 4px 10px rgba(17,57,113,.12),0 12px 32px rgba(17,57,113,.12);
}
:root[data-theme="dark"]{
  --ink:#dfe8ef; --head:#f2f7fa; --ink-soft:#96aab9; --paper:#0d1a26; --card:#142a3c;
  --blue:#6f9bd6; --navy:#0a141d; --blue-soft:#1c3850; --blue-mid:#8db4e8;
  --green:#54B362; --green-hover:#6DCC7B; --green-soft:#173525;
  --orange:#fb8e28; --orange-ink:#2b1600;
  --line:#28455c; --line-soft:#1e3648;
  --topbar:#0a141d; --topbar-ink:#7e94a8;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3);
  --shadow-lift:0 4px 10px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 Lato,"Segoe UI",system-ui,sans-serif}
h1,h2,h3,.price,.dfont{font-family:"new-science",Bahnschrift,"Segoe UI",system-ui,sans-serif;color:var(--head)}
h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.12;text-wrap:balance;margin:0 0 .5rem;font-weight:700}
h2{font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.18;text-wrap:balance;margin:0 0 .75rem;font-weight:700}
h3{font-size:1.1rem;margin:0 0 .4rem;font-weight:700}
p{margin:.4rem 0 .9rem}
a{color:inherit}
img{max-width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.eyebrow{font-family:"new-science",Bahnschrift,"Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--orange);font-weight:700;margin:0 0 .4rem}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
.stars{color:var(--orange);letter-spacing:.1em;font-size:.9rem}

/* screenreader-only skip link (WP-standaard, geen equivalent in prototype nodig) */
.skip-link{position:absolute;left:-9999px;top:auto;background:var(--blue);color:#fff;padding:12px 18px;z-index:999;border-radius:0 0 8px 0}
.skip-link:focus{left:0;top:0}

/* ===== header ===== */
.topbar{background:var(--topbar);color:#fff;font-size:.82rem}
.topbar .wrap{display:flex;gap:8px 22px;align-items:center;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar .rev{font-weight:700;display:flex;align-items:center;gap:8px}
.topbar .rev .g{color:#fff;font-weight:400;opacity:.85}
.topbar nav{margin-left:auto;display:flex;gap:8px 20px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;opacity:.92}
.topbar a:hover{opacity:1;text-decoration:underline}
header.site{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
body.admin-bar header.site{top:32px}
@media screen and (max-width:782px){ body.admin-bar header.site{top:46px} }
.navrow{display:flex;align-items:center;gap:18px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:46px;width:auto;display:block}
nav.main{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap;align-items:center}
nav.main a{text-decoration:none;padding:8px 12px;border-radius:6px;font-size:.97rem;color:var(--ink);font-weight:600;display:inline-block}
nav.main a:hover{background:var(--blue-soft)}
nav.main li.current-menu-item>a,nav.main li.current_page_item>a{color:var(--blue);font-weight:800}
:root[data-theme="dark"] nav.main li.current-menu-item>a{color:var(--blue-mid)}
.navcta{display:contents}
nav.main a.shopitem{background:var(--blue);color:#fff;margin-left:6px}
nav.main a.shopitem:hover{background:var(--blue-mid)}
:root[data-theme="dark"] nav.main a.shopitem{color:#0d1a26}
nav.main .mobonly{display:none}
.cartbtn{display:flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--line);border-radius:8px;padding:7px 12px;color:var(--ink);text-decoration:none}
.cartbtn:hover{border-color:var(--blue)}
.cartbtn .count{background:var(--orange);color:var(--orange-ink);border-radius:99px;font-size:.75rem;font-weight:700;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;border:none;border-radius:8px;padding:12px 22px;font-weight:700;text-decoration:none;font-size:.98rem;font-family:Lato,"Segoe UI",sans-serif;transition:background .15s}
.btn:hover{background:var(--green-hover);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--blue);background:transparent}
.btn.white{background:#fff;color:var(--navy)}
.btn.white:hover{background:#eef3f8}
.btn.dark{background:var(--blue);color:#fff}
.btn.dark:hover{background:var(--blue-mid)}
:root[data-theme="dark"] .btn.dark{color:#0d1a26}
.btn.small{padding:8px 14px;font-size:.88rem}

/* dropdown "Camera beveiliging" (standaard WP-menustructuur: li.menu-item-has-children > ul.sub-menu) */
nav.main li{position:relative}
nav.main li.menu-item-has-children>a::after{content:" \25BE";font-size:.8em}
nav.main ul.sub-menu{display:none;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);min-width:250px;padding:8px;z-index:70;flex-direction:column;gap:0}
nav.main li.menu-item-has-children:hover>ul.sub-menu,
nav.main li.menu-item-has-children:focus-within>ul.sub-menu{display:flex}
nav.main ul.sub-menu a{padding:9px 13px;border-radius:6px;font-size:.92rem;font-weight:600;color:var(--ink)}
nav.main ul.sub-menu a:hover{background:var(--blue-soft);color:var(--head)}

/* hamburgermenu (mobiel) */
.menubtn{display:none;background:none;border:1.5px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--ink);align-items:center;gap:6px;font-weight:700}
@media(max-width:900px){
  .menubtn{display:flex;margin-left:auto}
  header.site .btn.small{display:none}
  .topbar nav a:not([href^="tel"]){display:none}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);flex-direction:column;flex-wrap:nowrap;gap:0;padding:8px 18px 0;margin:0;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift);z-index:60;max-height:calc(100vh - 130px);overflow-y:auto}
  nav.main.open{display:flex}
  nav.main ul{flex-direction:column;align-items:stretch;width:100%}
  nav.main a{padding:13px 10px;font-size:1rem;font-weight:600;border-radius:0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
  nav.main a:hover{background:none;color:var(--blue)}
  nav.main ul.sub-menu{position:static;border:none;box-shadow:none;min-width:0;background:var(--blue-soft);border-radius:12px;padding:6px 8px;margin:0 0 10px}
  nav.main li.menu-item-has-children:hover>ul.sub-menu,
  nav.main li.menu-item-has-children:focus-within>ul.sub-menu{display:none}
  nav.main li.menu-item-has-children.sub-open>ul.sub-menu{display:flex}
  .navcta{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:0;background:var(--card);margin:12px -18px 0;padding:12px 18px 16px;border-top:1px solid var(--line);box-shadow:0 -8px 16px rgba(6,35,43,.07)}
  nav.main a.shopitem{display:block;background:var(--blue);color:#fff;border-radius:10px;text-align:center;font-weight:800;margin:0;border-bottom:none}
  nav.main .mobonly{display:block;background:var(--green);color:#fff;border-radius:10px;text-align:center;margin:0;padding:14px 12px;font-weight:800}
}

/* ===== blocks ===== */
main{min-height:60vh}
section.band{padding:52px 0}
section.band.tint{background:var(--card);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
/* hoofdsite-hero: afgerond paneel zoals op de site */
.homehero{position:relative;margin:24px 0 8px;border-radius:22px;overflow:hidden;color:#fff;padding:64px 48px;background:var(--navy);background-size:cover;background-position:center;min-height:420px}
.homehero::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(13,42,88,.92) 0%,rgba(17,57,113,.72) 50%,rgba(17,57,113,.15) 100%)}
.homehero>div{position:relative;max-width:560px;z-index:2}
.homehero h1{color:#fff;font-size:clamp(2rem,5vw,3.1rem)}
.homehero ul.check li{color:#e7eef8;margin:.6rem 0}
.homehero ul.check li::before{background:var(--green);color:#fff;border-radius:99px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;top:2px}
.homehero .monteur{position:absolute;right:36px;bottom:0;height:92%;max-height:460px;width:auto;z-index:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}
@media(max-width:1100px){.homehero .monteur{display:none}}
@media(max-width:1100px){.homehero{min-height:0}}
@media(max-width:640px){.homehero{padding:36px 24px 32px}}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s}
.card.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card.flush{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.flush .inner{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.card h3 a{text-decoration:none}
.cardimg{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-bottom:1px solid var(--line-soft)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;border-radius:5px;padding:2px 8px;background:var(--blue-soft);color:var(--blue)}
:root[data-theme="dark"] .tag{color:var(--blue-mid)}
ul.check{list-style:none;padding:0;margin:.5rem 0}
ul.check li{padding-left:28px;position:relative;margin:.45rem 0}
ul.check li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.sechead{text-align:center;max-width:44em;margin:0 auto 28px}
.sechead p{color:var(--ink-soft)}

/* diensten & branches (hoofdsite) */
.dienst{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:block;text-decoration:none;box-shadow:var(--shadow)}
.dienst img{width:100%;height:100%;object-fit:cover;display:block}
.dienst .shade{position:absolute;inset:0;background:linear-gradient(rgba(6,35,43,.15),rgba(6,35,43,.65))}
.dienst .dt{position:absolute;left:0;right:0;top:42%;text-align:center;color:#fff;font-family:"new-science",Bahnschrift,sans-serif;font-weight:700;font-size:1.4rem}
.dienst .btn{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;white-space:nowrap;padding:9px 16px;font-size:.82rem}
@media(max-width:900px){
  .dienst .dt{font-size:1.2rem}
  .dienst .btn{padding:8px 14px;font-size:.78rem;bottom:14px}
}
.btile{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/2;display:block}
.btile img{width:100%;height:100%;object-fit:cover;display:block}
.btile .shade{position:absolute;inset:0;background:rgba(6,35,43,.32)}
.btile .bt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"new-science",Bahnschrift,sans-serif;font-weight:700;font-size:1.15rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.brancherow{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* blauwe banden (specialist + werkwijze) */
.blueband{background:linear-gradient(135deg,#0d2a58,var(--blue));color:#dbe5f1;border-radius:22px;padding:40px;margin:0}
.blueband h2,.blueband h3{color:#fff}
.wwgrid{display:grid;gap:14px;grid-template-columns:repeat(5,1fr);margin-top:20px}
@media(max-width:1000px){.wwgrid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.wwcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:34px 14px 16px;font-size:.8rem;line-height:1.55;text-align:center;position:relative;margin-top:26px}
.wwcard .wico{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:99px;background:#20549c;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.wwcard .wico img{width:26px;height:26px}
.wwcard strong{display:block;color:#fff;font-size:1rem;margin-bottom:8px;font-family:"new-science",Bahnschrift,sans-serif}
.swipehint{display:none}
@media(max-width:900px){
  .wwgrid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(70vw,250px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .wwgrid>*{scroll-snap-align:start}
  .swipehint{display:block;text-align:center;font-size:.76rem;font-weight:700;letter-spacing:.03em;color:#cfe0f5;margin:4px 0 0}
}

/* Google reviews */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.gcard .ghead{display:flex;gap:10px;align-items:center}
.gcard .gav{width:38px;height:38px;border-radius:99px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.gcard .gname{font-weight:700;color:var(--head);line-height:1.2}
.gcard .glogo{margin-left:auto;font-weight:900;color:var(--blue)}
.gcard p{font-size:.88rem;margin:.6rem 0 .2rem}
.gcard .vcheck{color:var(--blue-mid);font-size:.8rem}
.revslider{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,330px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px}
.revslider>*{scroll-snap-align:start}

/* instructievideo's */
.vid{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;transition:transform .15s, box-shadow .15s}
.vid:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vid .shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(6,35,43,.88))}
.vid .playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);width:46px;height:46px;border-radius:99px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;padding-left:4px}
.vid .vt{position:absolute;left:12px;right:12px;bottom:10px;color:#fff;font-weight:700;font-size:.88rem;line-height:1.3}

/* 2- en 3-koloms rijen die op mobiel een slider worden */
.slider3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(max-width:900px){
  .slider3{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:min(70vw,260px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .slider3>*{scroll-snap-align:start}
  .branches{display:none}
  .homehero .monteur{display:none}
}

/* contactformulier */
form.offerte{display:grid;gap:14px}
form.offerte label{font-weight:700;font-size:.9rem;color:var(--head);display:grid;gap:6px}
form.offerte input,form.offerte select,form.offerte textarea{font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);width:100%}
form.offerte textarea{min-height:110px;resize:vertical}
form.offerte .row2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:560px){form.offerte .row2{grid-template-columns:1fr}}
form.offerte .chk{display:flex;gap:10px;align-items:center;font-weight:400;font-size:.85rem;color:var(--ink-soft)}
form.offerte .chk input{width:auto}

footer.site{background:var(--blue);color:#c3d0de;margin-top:56px;padding:40px 0 32px;font-size:.9rem}
:root[data-theme="dark"] footer.site{background:var(--topbar);color:var(--topbar-ink)}
footer.site a{color:#fff;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer.site strong{color:#fff}

/* =========================================================================
   2. BASISSTYLING WOOCOMMERCE (fase 1: kleuren/knoppen/fonts kloppen,
      geen custom pixel-perfect layout — dat komt in een latere fase)
   ========================================================================= */
.woocommerce, .woocommerce-page{color:var(--ink);font:16px/1.65 Lato,"Segoe UI",system-ui,sans-serif}
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area{max-width:1120px;margin:0 auto;padding:32px 22px 56px}
.woocommerce h1.page-title,
.woocommerce-page h1.page-title,
.woocommerce h1,.woocommerce h2,.woocommerce h3{font-family:"new-science",Bahnschrift,"Segoe UI",system-ui,sans-serif;color:var(--head)}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:#fff;border:none;border-radius:8px;padding:12px 22px;
  font-weight:700;font-size:.98rem;font-family:Lato,"Segoe UI",sans-serif;
  text-transform:none;transition:background .15s;box-shadow:none
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{background:var(--green-hover);color:#fff}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background:var(--blue);color:#fff}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background:var(--blue-mid)}
.woocommerce span.onsale{background:var(--orange);color:var(--orange-ink);font-weight:700;box-shadow:none}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--blue);font-weight:700;font-family:"new-science",Bahnschrift,sans-serif}
.woocommerce ul.products li.product{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s}
.woocommerce ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.woocommerce ul.products li.product a img{border-radius:10px}
.woocommerce nav.woocommerce-pagination ul{border:none;gap:6px;display:flex}
.woocommerce nav.woocommerce-pagination ul li{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{color:var(--ink);padding:8px 13px}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--blue);color:#fff}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border:1px solid var(--line);background:var(--card)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--blue-soft)}
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.woocommerce table.shop_table th{background:var(--blue-soft);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-bottom:1px solid var(--line-soft)}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--card);color:var(--ink)}
.woocommerce-checkout #payment{background:var(--card);border:1px solid var(--line);border-radius:14px}
.woocommerce-checkout #payment div.payment_box{background:var(--blue-soft)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--blue-soft)}
.woocommerce-info,.woocommerce-message,.woocommerce-noticelist{border-top-color:var(--blue);background:var(--blue-soft);color:var(--ink)}
.woocommerce-error{border-top-color:var(--orange);background:var(--green-soft)}
.woocommerce .star-rating{color:var(--orange)}
.woocommerce-message .button,.woocommerce-error .button,.woocommerce-info .button{background:var(--blue)}