/* =====================================================================
   Solviya design system.
   Sections 1-8 are ported from the static site's styles.css; section 9
   onward maps WooCommerce's own markup onto those same styles.
   ===================================================================== */

/* ---------- 1. Tokens + base ---------- */
:root{
  --kp:#00AB55; --kpd:#00994B; --kdeep:#0A5228; --kacc:#F0A93A;
  --kprice:#C23A2A; --kink:#1B2A22; --kmut:#6E7A71; --kline:#E6E9E3; --kcream:#f4f6f8;
  --footer:#13843F;
}
body{
  margin:0;
  font-family:'Plus Jakarta Sans','Hind Siliguri',sans-serif;
  font-size:14px;line-height:26px;color:var(--kink);background:#fff;
  -webkit-font-smoothing:antialiased;
}
.bn{font-family:'Plus Jakarta Sans','Hind Siliguri',sans-serif;}
/* The parent theme underlines links from two places that both outrank a plain
   `body a` rule: reset.css `a,a:visited` and theme.css `.page-content a`.
   Solviya's design has no underlined links, so match their specificity.
   These selectors set *only* text-decoration: adding a colour here would give
   `body a:visited` (0,1,2) more weight than component rules like
   `.navrow a` (0,1,1), repainting visited menu links and buttons. */
body a,
body a:visited,
.page-content a,
.page-content a:visited,
.comments-area a,
.comments-area a:visited{text-decoration:none;}
body a{color:#212b36;cursor:pointer;}
body a:hover{color:var(--kp);}
img{max-width:100%;}
input,button,textarea,select{font-family:inherit;}
::placeholder{color:#9aa39c;}
input:focus,textarea:focus,select:focus{outline:2px solid var(--kp);outline-offset:1px;}
button{cursor:pointer;}
.kw{max-width:1200px;margin:0 auto;padding:0 20px;width:100%;}
.solviya-hidden{display:none !important;}

/* The parent theme's reset paints every button crimson on hover/focus
   (`button:hover{background-color:#c36}`), which outranks a plain class rule.
   Solviya's buttons style their own hover, so neutralise it at equal weight;
   anything that wants a hover fill sets it again below. */
.hs-arrow:hover,.hs-arrow:focus,
.hamb:hover,.hamb:focus,
.hsearch-toggle:hover,.hsearch-toggle:focus,
.trash:hover,.trash:focus,
.drawer .dh button:hover,.drawer .dh button:focus,
.qty-sm button:hover,.qty-sm button:focus,
.viewtog:hover,.viewtog:focus,
.solviya-update-cart:hover,.solviya-update-cart:focus{background-color:transparent;}

/* Hello Elementor centres .site-main and caps it at ~1140px on non-Elementor
   pages (`body:not([class*=elementor-page-]) .site-main`), which pushed the
   shop / product / cart content 30px in from the full-width header. Solviya
   pages carry their own gutter through .kw, so the wrapper is made full width
   at the parent's own specificity — mine loads later, so it wins. */
.site-main,
body:not([class*="elementor-page-"]) .site-main{max-width:100%;width:100%;padding:0;margin:0;}
.site-main > .page-content{max-width:100%;padding:0;}
.page-header{display:none;}

/* ---------- 2. Layout grids ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.cart-grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start;}
.checkout-grid{display:grid;grid-template-columns:1fr 440px;gap:48px;align-items:start;}
/* Grid items default to min-width:auto, so a column will not shrink below its
   content's min-content width. Without this the single-column mobile layout
   keeps the inputs and product cards at their intrinsic width and they spill
   past the bordered card. min-width:0 lets the 1fr track shrink to fit. */
.checkout-grid > div{min-width:0;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* ---- Product grid category tabs ---- */
.pt-tabs{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 0 34px;scrollbar-width:none;}
.pt-tabs::-webkit-scrollbar{display:none;}
.pt-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;padding:6px 6px 0;cursor:pointer;color:var(--kink);}
/* The parent reset paints button:hover pink; the tab must stay flat — only the
   label's underline and text turn green. */
.pt-tab:hover,.pt-tab:focus{background:none;color:var(--kink);outline:none;}
.pt-ico{width:46px;height:46px;display:flex;align-items:center;justify-content:center;}
.pt-ico svg{width:44px;height:44px;}
.pt-ico img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.pt-ico i{font-size:34px;line-height:1;color:var(--kp);}
.pt-lbl{display:inline-block;text-align:center;white-space:nowrap;
  font-size:14px;line-height:26px;font-weight:500;letter-spacing:.5px;
  border-bottom:1px solid #eee;padding-bottom:10px;transition:color .15s,border-color .15s;}
.pt-tab:hover .pt-lbl,
.pt-tab.on .pt-lbl{color:var(--kp);border-bottom-color:var(--kp);}
.pt-panel[hidden]{display:none;}
@media (min-width:721px){.pt-tabs{justify-content:center;gap:12px;}}
@media (max-width:720px){.pt-ico{width:40px;height:40px;}.pt-ico svg{width:38px;height:38px;}.pt-tab{padding:6px 12px 0;}}

.only-mobile{display:none;}
.hamb{display:none;}
.nav-links{display:flex;}
@media (max-width:1024px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px){
  .cart-grid{grid-template-columns:1fr;gap:24px;}
  .checkout-grid{grid-template-columns:1fr;gap:28px;}
  .shop-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  /* Shop keeps two cards per row on phones, matching the home page grid. */
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  /* On phones the cards have no padding (image goes edge-to-edge) and no hover
     effect — a tap must not leave the border/shadow stuck on. The grid-scoped
     selectors outrank the base `.pcard` rule that is defined later in the file. */
  .prod-grid .pcard,
  .shop-grid .pcard,
  .pslider .pcard{padding:0;border-radius:0;}
  .prod-grid .pcard:hover,
  .shop-grid .pcard:hover,
  .pslider .pcard:hover{border-color:transparent;box-shadow:none;}
  /* Slider cards on phones are the narrowest place the Bangla add-to-cart label
     appears, so trim the button gutters so it stays on one line. */
  .pslider .add-btn{padding:0 10px;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .only-mobile{display:block;}
  .only-desktop{display:none !important;}
  .hamb{display:flex;}
  .nav-links{display:none;}
  .kw{padding:0 16px;}
}
@keyframes koraFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes koraSlide{from{transform:translateX(-100%);}to{transform:none;}}

/* ---------- 3. Header ---------- */
/* The parent theme lays .site-header / .site-footer out as centred flex rows
   capped at the customizer's content width (`.site-header:not(.dynamic-header)`
   → max-width:800px). Solviya's bars are full-bleed and hold their own .kw
   gutter, so both rules are undone here — matching the parent's two-class
   specificity, or these would lose. */
header.site-header.solviya-header,
footer.site-footer.solviya-footer{
  display:block;width:100%;max-width:100%;margin:0;padding:0;
}

header.solviya-header{position:sticky;top:0;z-index:50;}
.hbar{background:#00A651;    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #FFFFFF3D;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}
/* Vertical padding only (longhand), so .kw's horizontal gutter survives — the
   shorthand `padding:20px 0` used to zero it, letting the cart badge (right:-10px)
   poke past the viewport edge and cause a mobile horizontal scroll. */
.hbar-in{display:flex;align-items:center;gap:16px;padding-top:20px;padding-bottom:20px;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo span{color:#fff;font-weight:800;font-size:28px;letter-spacing:-.02em;}
/* Uploaded logos are scaled to the bar rather than the other way round. */
.logo img{max-height:48px;width:auto;}
/* A thin white border rings a grey input and a green button that sit flush
   against each other, matching the reference. The earlier version padded the
   container, which left a white gap between the two — the visible mismatch. The
   rounded container clips the button and input corners via overflow:hidden, so
   the children carry no radius of their own. */
.hsearch {
    flex: 1;
    display: flex;
    width: 420px !important;
    background: #F1F3F5;
    border: 1px solid #fff;
    border-radius: 6px;
    overflow: hidden;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #919EAB52;
    border-radius: 6px 6px 6px 6px;
    background: #fff;
    /* max-width: 100%; */
}
.hsearch input{flex:1;border:none;border-radius:0;padding:0 15px;font-size:16px;min-width:0;background:#F4F6F8;height:44px;color: #212b36; min-width: 135px;}
.hsearch input:focus{outline:none;}
.hsearch button{background:#00A651;color:#fff;border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: #DCE0E4;border-radius:0;padding:0px 16px 0px 16px;font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center;white-space:nowrap;transition:.15s;}
.hsearch button:hover{background-color:var(--kp);}
.hicons{margin-left:auto;display:flex;align-items:center;gap:24px;}
/* Scoped to the direct icon links (account) and the cart toggle only — a bare
   `.hicons a` would also paint every link inside the mini-cart flyout white. */
.hicons > a,.hcart-toggle{color:#fff;display:flex;position:relative;}
.hicons > a:hover,.hcart-toggle:hover{color:#EAF3EC;}
/* Account and cart icons sized to the reference header. */
.hicons > a svg,.hcart-toggle svg{width:35px;height:35px;}
.badge{position:absolute;top:-8px;right:-10px;background:var(--kacc);color:#fff;font-size:12px;font-weight:800;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* ---- Header mini-cart flyout ---- */
.hcart{position:relative;display:flex;}
.hcart-toggle{color:#fff;display:flex;position:relative;cursor:pointer;}
.solviya-minicart{position:absolute;top:calc(100% + 16px);right:0;width:380px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:14px;box-shadow:0 16px 44px rgba(20,30,25,.18);z-index:200;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.hcart.open .solviya-minicart{opacity:1;visibility:visible;transform:none;}
/* Little pointer up to the cart icon. */
.solviya-minicart::before{content:"";position:absolute;top:-8px;right:26px;width:16px;height:16px;background:#fff;transform:rotate(45deg);border-radius:3px;}
.solviya-minicart.sm-busy{opacity:.55;pointer-events:none;}
.widget_shopping_cart_content{position:relative;}

.sm-items{list-style:none;margin:0;padding:8px 0;max-height:60vh;overflow-y:auto;}
.sm-item{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;}
.sm-item + .sm-item{border-top:1px solid var(--kline);}
.sm-thumb{flex-shrink:0;display:block;}
.sm-thumb img{width:56px;height:56px;border-radius:9px;object-fit:cover;display:block;}
.sm-info{flex:1;min-width:0;}
.sm-name,.sm-name:visited{display:block;font-size:14px;line-height:1.45;color:var(--kink);font-weight:500;margin-bottom:10px;}
.sm-name:hover{color:var(--kp);}
.sm-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sm-qty{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid var(--kline);border-radius:8px;overflow:hidden;}
.sm-qty .sm-step{flex:0 0 30px;width:30px;height:30px;padding:0;border:none;background:#fff;color:#555;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sm-qty .sm-step:hover{background:#f4f6f5;color:#222;}
/* Higher specificity than the parent reset's input[type=text]{width:100%}. */
.sm-qty input.sm-qty-input{flex:0 0 42px;width:42px;height:30px;border:none;border-left:1px solid var(--kline);border-right:1px solid var(--kline);
  text-align:center;font-size:14px;font-family:inherit;color:var(--kink);background:#fff;border-radius:0;}
.sm-price{color:var(--kprice);font-weight:800;font-size:15px;white-space:nowrap;}
.sm-remove{flex-shrink:0;background:none;border:none;color:var(--kmut);cursor:pointer;padding:4px;line-height:0;}
.sm-remove:hover{color:var(--kprice);}
.sm-foot{border-top:1px solid var(--kline);padding:16px 18px 18px;}
.sm-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sm-total span:first-child{font-size:16px;color:var(--kink);}
.sm-total-amt,.sm-total-amt .amount{color:var(--kprice);font-weight:800;font-size:20px;}
.sm-actions{display:flex;gap:12px;}
.sm-btn{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 10px;border-radius:9px;font-weight:700;font-size:15px;transition:.15s;}
.sm-checkout,.sm-checkout:visited{background:var(--kp);color:#fff;}
.sm-checkout:hover{background:var(--kpd);color:#fff;}
.sm-viewcart,.sm-viewcart:visited{background:#fff;color:var(--kink);border:1px solid var(--kline);}
.sm-viewcart:hover{border-color:var(--kp);color:var(--kp);}
.sm-empty{margin:0;padding:28px 18px;text-align:center;color:var(--kmut);}

.hamb{background:transparent;border:none;padding:4px;color:#fff;align-items:center;}
.hsearch-toggle{display:none;background:transparent;border:none;padding:4px;color:#fff;align-items:center;}
/* Mobile search: collapsed until the header search icon is tapped. */
.msearch{display:none;max-height:0;padding-bottom:0;overflow:hidden;transition:max-height .28s ease,padding-bottom .28s ease;}
body.search-open .msearch{max-height:70px;padding-bottom:12px;}
.msearch form{display:flex;}
.msearch input{flex:1;border:none;border-radius:10px 0 0 10px;padding:11px 14px;font-size:16px;min-width:0;}
.msearch button{background:var(--kpd);color:#fff;border:none;border-radius:0 10px 10px 0;padding:0 18px;font-weight:700;}
nav.navbar{background:#00994B;}
/* The links are a single nowrap row and only hide at <=720px, so between there
   and roughly 860px the last one overflowed the page. Wrapping costs nothing on
   desktop, where the row still fits on one line. */
/* Menu items centred within the content width. */
.navrow{gap:44px;padding:8px 20px;flex-wrap:wrap;justify-content:center;}
/* Bigger and bolder, matching the reference nav bar. */
.navrow a,
.navrow a:visited{letter-spacing: .01em;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #FFFFFF;}
.navrow a:hover,
.navrow a.on{color:#EAF7EE;}
.navrow a.on{font-weight:700;}
@media (min-width:721px){
  /* Logo and icons split the leftover space evenly, which lands the search
     bar in the centre of the header. */
  .logo{flex:1 1 0;}
  /* Narrows on small laptops so both sides keep room for the logo; if a side
     hits its min-content width the bar can no longer sit centred. */
  .hsearch{flex:0 1 min(420px, 100% - 340px);}
  .hicons{flex:1 1 0;margin-left:0;justify-content:flex-end;}
}
@media (max-width:720px){
  .hsearch-toggle{display:flex;}
  .msearch{display:block;}
  /* Logo centred between the hamburger and the icon cluster. */
  .hbar-in{position:relative;}
  .logo{position:absolute;left:50%;transform:translateX(-50%);}
  .hicons{gap:16px;}
  /* Cart and account live in the bottom app bar on mobile, so drop the account
     link and the cart flyout from the header, keeping only the search toggle. */
  .hicons > a,
  .hicons .hcart{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .msearch{transition:none;}
}

main{min-height:60vh;}
.page{animation:koraFade .3s ease;}
/* Larger crumbs with dark text and a grey separator, matching the reference. */
.breadcrumb{font-size:14px;color:var(--kink);font-weight:500;padding:0;}
.breadcrumb a,
.breadcrumb a:visited{color:#212b36;font-weight:500;font-size:14px;}
.breadcrumb a:hover{color:var(--kp);}
.breadcrumb .crumb-sep{color:var(--kmut);margin:0 10px;}
/* The current (last) crumb is dark like Home, just a lighter weight. */
.breadcrumb .crumb-current,
.breadcrumb .crumb-current:visited{color:var(--kink);font-weight:500;}
.breadcrumb .crumb-current:hover{color:var(--kp);}

/* ---------- 4. Hero slider ----------
   Image-only: each slide is one full-width banner. The height comes from the
   image itself rather than a fixed aspect-ratio, so the artwork is never
   cropped — the width/height attributes WordPress prints keep the space
   reserved before it loads. */
/* Full-bleed: the banner runs edge to edge at every width. */
.hslider{position:relative;margin:0;overflow:hidden;}
.hs-track{display:flex;align-items:flex-start;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.hs-slide{min-width:100%;}
.hs-slide .hs-link{display:block;}
.hs-slide .hs-img{display:block;width:100%;height:auto;}
/* On phones the wide banner would scale down to a thin strip, so give it a
   taller fixed height and crop the sides (centred) to fill it. */
@media (max-width:640px){
  .hs-slide .hs-img{height:clamp(180px,52vw,240px);object-fit:cover;object-position:center;}
}
/* Editor-only hint when no images have been picked yet. */
.hs-empty{aspect-ratio:1410/295;display:flex;align-items:center;justify-content:center;
          border:2px dashed var(--kline);color:var(--kmut);font-size:15px;font-weight:600;background:var(--kcream);}
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;
          color:#fff;padding:8px;line-height:0;opacity:.9;z-index:2;}
.hs-arrow:hover{opacity:1;}
.hs-prev{left:14px;} .hs-next{right:14px;}
.hs-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:7px;z-index:2;}
.hs-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.55);}
.hs-dots button:hover,.hs-dots button:focus{background-color:rgba(255,255,255,.85);}
.hs-dots button.on,.hs-dots button.on:hover,.hs-dots button.on:focus{background-color:var(--kp);}

/* ---------- 5. Review slider ----------
   The arrows sit clear of the cards, as in the reference: the slider reserves a
   gutter with padding and the arrows live in it, so they never cover a card and
   never hang off the page. */
.rev-slider{position:relative;margin-top:34px;padding:0 64px;}
.rev-view{overflow:hidden;}
.rev-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.rev-item{min-width:calc(100% / 3);padding:0 12px;}
.rev-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
           background:#fff;box-shadow:0 4px 16px rgba(16,24,40,.16);color:var(--kink);border:none;
           display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s;}
.rev-arrow:hover,.rev-arrow:focus{background-color:var(--kp);color:#fff;box-shadow:0 6px 20px rgba(16,24,40,.22);}
.rev-arrow:disabled{opacity:.35;cursor:default;box-shadow:0 4px 16px rgba(16,24,40,.10);}
.rev-arrow:disabled:hover{background-color:#fff;color:var(--kink);}
.rev-prev{left:0;} .rev-next{right:0;}
@media (max-width:860px){
  .rev-slider{padding:0 52px;}
  .rev-item{min-width:50%;}
}
@media (max-width:640px){
  .rev-slider{padding:0;}
  .rev-item{min-width:100%;}
  .rev-prev{left:-6px;} .rev-next{right:-6px;}
  .rev-arrow{width:42px;height:42px;}
}

/* ---------- 6. Sections + product card ---------- */
.sec{padding:48px 0 8px;}
.sec-title{text-align:center;font-size:24px;font-weight:700;line-height:40.8px;letter-spacing:-.01em;margin:0;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px;}
.sec-head h2{font-size:24px;font-weight:700;line-height:40.8px;letter-spacing:-.01em;margin:0;}
/* "Shop all →" reads as an action, so it takes the brand green. */
.sec-head a,
.sec-head a:visited{color:var(--kp);white-space:nowrap;}
.sec-head a:hover{color:var(--kpd);}

/* A transparent 1px border is reserved so hovering only recolours it — no
   layout shift. Hover adds a rounded border and a soft shadow, no lift. */
/* The single product item (main div) carries the padding + hover border; the
   image and info divs inside have none, so they align at the same left edge. */
.pcard{border:1px solid transparent;border-radius:12px;overflow:hidden;background:#fff;padding:10px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,box-shadow .2s;}
.pcard:hover{border-color:var(--kline);box-shadow:0 6px 20px rgba(16,24,40,.08);}
.pimg{position:relative;aspect-ratio:1/1;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:0;overflow:hidden;}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;}
.pimg .plabel{color:#b7bcae;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.pbadge{position:absolute;top:10px;right:10px;background:#E01212;color:#fff;font-size:13px;font-weight:700;padding:5px 10px;border-radius:20px;z-index:1;}
.pbody{padding:0;display:flex;flex-direction:column;gap:8px;flex:1;}
/* Product name shows in full on every card (home, shop, category, related) —
   never truncated. A two-line minimum keeps short names from making the grid
   look cramped; longer names simply wrap to as many lines as they need. */
.pname{font-size:14px;font-weight:400;line-height:22px;cursor:pointer;min-height:44px;margin:0;}
.pname a{color:inherit;}
.pname a:hover{color:var(--kp);}
.prow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.stars{color:var(--kacc);font-size:16px;letter-spacing:1px;}
.stars .empty{color:#D8DBD4;}
.rcount{color:var(--kmut);font-size:14px;}
.price-old{color:#919eab;text-decoration:line-through;font-size:16px;font-weight:600;}
.price-old .woocommerce-Price-amount{color:#919eab;}
.price{color:var(--kprice);font-weight:600;font-size:16px;line-height:24px;}
.price .woocommerce-Price-amount{color:var(--kprice);}
.add-btn{margin-top:auto;background:var(--kp);color:#fff;border:none;border-radius:6px;height:40px;padding:0 20px;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;text-align:center;white-space:nowrap;}
.add-btn:hover,.add-btn:focus{background:var(--kpd);color:#fff;}
/* While WooCommerce's AJAX add is in flight it adds `.loading`; show a spinner
   after the label and mute the button, like the reference. */
.add-btn.loading{opacity:.65;pointer-events:none;}
.add-btn.loading::after{
  content:"";flex-shrink:0;width:15px;height:15px;margin-left:2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:solviya-spin .7s linear infinite;
}
@keyframes solviya-spin{to{transform:rotate(360deg);}}
.add-btn.added::after{content:'';border:none;animation:none;margin:0;width:0;height:0;}
/* Label matches the border. */
.btn-ghost,
body a.btn-ghost,
body a.btn-ghost:visited{display:inline-block;background:transparent;color:var(--kp);border:1.5px solid var(--kp);border-radius:10px;padding:12px 34px;font-weight:700;font-size:16px;transition:.15s;}
.btn-ghost:hover,
body a.btn-ghost:hover{background-color:var(--kp);color:#fff;}

/* After an AJAX add the card's own button becomes "View Cart" (see
   assets/js/solviya.js), so WooCommerce's separate appended link is hidden.
   The `a` element selector matches WooCommerce's own `.woocommerce
   a.added_to_cart`, which a bare `.pcard .added_to_cart` would lose to. */
.pcard a.added_to_cart{display:none;}

/* ---------- 6b. Product slider ----------
   Same mechanism as the review slider: the track translates and stops at both
   ends. Item widths and gaps mirror the .prod-grid breakpoints (4 / 3 / 2 per
   view) so a slider lines up exactly with a grid above it — hence the gap-based
   sizing rather than item padding, which would inset the first and last card. */
.pslider{position:relative;}
.ps-view{overflow:hidden;}
.ps-track{display:flex;gap:22px;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.ps-item{flex:0 0 calc((100% - 66px) / 4);min-width:0;display:flex;}
.ps-item > .pcard{width:100%;}
.ps-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
          background:#fff;box-shadow:0 4px 16px rgba(16,24,40,.16);color:var(--kink);border:none;
          display:flex;align-items:center;justify-content:center;z-index:2;transition:.15s;}
.ps-arrow:hover,.ps-arrow:focus{background-color:var(--kp);color:#fff;box-shadow:0 6px 20px rgba(16,24,40,.22);}
.ps-arrow:disabled{opacity:.35;cursor:default;box-shadow:0 4px 16px rgba(16,24,40,.10);}
.ps-arrow:disabled:hover{background-color:#fff;color:var(--kink);}
.ps-prev{left:-22px;} .ps-next{right:-22px;}
@media (max-width:1024px){.ps-item{flex-basis:calc((100% - 44px) / 3);}}
@media (max-width:720px){
  .ps-track{gap:12px;}
  .ps-item{flex-basis:calc((100% - 12px) / 2);}
  .ps-arrow{width:42px;height:42px;}
}

/* The product slider keeps its cards flush with the grid above, so its arrows
   have only .kw's 20px gutter to sit in and would hang 2px off the page below
   ~1204px. Pull them in there. (The review slider reserves its own gutter with
   padding, so it is not affected.) This has to come after the slider's own
   `left`/`right` rules, which share its specificity. */
@media (max-width:1240px){
  .ps-prev{left:-6px;}
  .ps-next{right:-6px;}
}

/* ---------- 7. Testimonials + trust ---------- */
.tcard{background:#fff;border:1px solid var(--kline);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;height:100%;}
.tcard p{margin:0;}
/* `.elementor img{border-radius:0}` (0,1,1) would square the photo off, so the
   avatar rule needs the extra weight to keep it round. */
.avatar,
img.avatar,
.elementor img.avatar{width:52px;height:52px;flex-shrink:0;border-radius:50%;background:#dfe4dc;object-fit:cover;}
.trust-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 8px;}
.trust-item h3{font-size:18px;font-weight:800;margin:0;}
.trust-item p{color:var(--kmut);font-size:15px;line-height:1.5;margin:0;}

/* ---------- 8. Footer, drawer, mobile bar ---------- */
footer.solviya-footer{background:var(--footer);color:#EAF3EC;}
.foot-in{padding:56px 0 46px;text-align:center;}
.foot-in p{margin:0;}
.flourish{display:flex;align-items:center;justify-content:center;gap:16px;}
.flourish .ln{height:1px;flex:1;max-width:190px;background:rgba(236,226,196,.4);}
.foot-h{color:#fff;font-weight:700;line-height:1.5;margin:0;}
.foot-logo{display:flex;align-items:center;justify-content:center;gap:10px;}
.foot-logo span{color:#fff;font-weight:800;font-size:29px;letter-spacing:-.02em;}
.foot-logo img{max-height:56px;width:auto;}
/* An office or phone block with nothing in it must not leave a gap. */
.solviya-office-hq:empty,
.solviya-office-uk:empty,
.solviya-phone:empty,
.solviya-social:empty{display:none;}
/* Footer social buttons mirror the Elementor social-icon widget: a 52px circle
   (26px --icon-size + 2 × .5em padding) filled with the brand green, the glyph
   sized to --icon-size, gap of 16px between them, growing to 1.1× on hover. */
.social{display:flex;justify-content:center;gap:16px;}
.social a{
  width:52px;height:52px;border-radius:50%;background:#00A651;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;font-size:26px;line-height:26px;
  transition:transform .3s;
}
.social a:hover{transform:scale(1.1);background:#00A651;color:#fff;opacity:.9;}
.social a i{display:block;width:1em;height:1em;position:relative;line-height:1;color:#fff;}
/* Copyright links (Customizer → Solviya → Footer): underlined on hover only. */
.solviya-copyright a{color:inherit;text-decoration:none;}
.solviya-copyright a:hover,
.solviya-copyright a:focus{text-decoration:underline;}
.pays{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:760px;margin:0 auto;}
.pay-chip{background:#fff;font-weight:800;font-size:13px;padding:9px 14px;border-radius:8px;border:1px solid #eef0ec;letter-spacing:.01em;}

.drawer-wrap{display:none;}
body.menu-open .drawer-wrap{display:block;}
.scrim{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45);}
.drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:#fff;z-index:101;padding:22px;overflow:auto;animation:koraSlide .25s ease;}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.drawer .dh span{font-weight:800;font-size:24px;color:var(--kp);}
.drawer .dh button{background:transparent;border:none;font-size:28px;color:var(--kmut);line-height:1;}
.drawer .dl{display:flex;flex-direction:column;}
.drawer .dl a{padding:14px 0;border-bottom:1px solid var(--kline);font-weight:600;font-size:16px;color:var(--kink);}

/* Mobile bottom app bar */
.mobilebar{display:none;}
.mobilebar a .lb{font-size:11px;font-weight:600;}
@media (max-width:720px){
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--kline);box-shadow:0 -4px 20px rgba(0,0,0,.08);padding:8px 4px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;}
  .mobilebar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--kmut);position:relative;}
  .mobilebar a.on{color:var(--kp);}
  .mobilebar a:hover{color:var(--kp);}
  .mobilebar .mbadge{position:absolute;top:-5px;right:26%;background:var(--kprice);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-weight:800;}
  body{padding-bottom:70px;}
}

@media (max-width:720px){
  .sec{padding:34px 0 6px;}
  .sec-title{font-size:24px;}
  .sec-head h2{font-size:21px;}
  .h1{font-size:27px;}
  .hbar-in{gap:12px;padding-top:12px;padding-bottom:12px;}
  .logo span{font-size:24px;}
  .foot-in{padding:44px 0 40px;}
}

/* =====================================================================
   9. WooCommerce
   ===================================================================== */
.h1{font-size:24px;font-weight:800;margin:0;}
.woocommerce .kw{max-width:1200px;}
/* On mobile the design drops the breadcrumb and the page titles (Cart, Checkout,
   My account, …) and goes straight to the content. The single product page keeps
   its product name, which is `.pd-title`, not `.h1`. */
@media (max-width:720px){
  .breadcrumb{display:none;}
  .h1{display:none;}
}

/* Notices — a soft card with a green accent bar, a check badge on the left and
   the action link (e.g. View cart) pushed to the right. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  background:#f4f7f5;border:1px solid var(--kline);border-left:4px solid var(--kp);
  border-top:1px solid var(--kline);border-radius:10px;padding:16px 22px;margin:0 0 30px;
  font-size:15px;color:var(--kink);list-style:none;
}
.woocommerce-notices-wrapper .woocommerce-error{border-left-color:var(--kprice);}
/* Swap WooCommerce's font glyph for a filled check badge. */
.woocommerce-notices-wrapper .woocommerce-message::before{
  content:"";position:static;flex-shrink:0;width:22px;height:22px;margin:0;border-radius:50%;
  background:var(--kp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  color:transparent;font-size:0;
}
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before{display:none;}
/* The View cart / action button sits at the right end of the notice. */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .button.wc-forward{
  order:9;margin-left:auto;
}
.woocommerce .button.wc-forward,
.woocommerce a.button{background:var(--kp);color:#fff;border-radius:8px;font-weight:700;text-transform:none;padding:11px 24px;}
.woocommerce a.button:hover{background:var(--kpd);color:#fff;}

/* ---- Shop archive ----
   The loop is rendered by woocommerce/archive-product.php with the design's own
   `.shop-grid` of `.pcard`s, so WooCommerce's `ul.products` styles never apply. */
.shop-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.shop-head .breadcrumb{margin:0;}
.shop-back,.shop-back:visited{color:var(--kmut);font-weight:700;}
.shop-back:hover{color:var(--kp);}

.shop-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
          margin-bottom:26px;border-bottom:1px solid var(--kline);padding-bottom:18px;}
.woocommerce .shop-top .woocommerce-result-count{margin:0;font-size:15px;color:var(--kmut);float:none;}
.shop-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.woocommerce .shop-tools .woocommerce-ordering{margin:0;float:none;display:flex;align-items:center;gap:12px;}
.shop-sort-label{font-size:14px;color:var(--kmut);margin:0;white-space:nowrap;}
.sel{border:1px solid var(--kline);border-radius:9px;padding:10px 14px;font-size:15px;background:#fff;color:var(--kink);}

.viewtogs{display:flex;gap:6px;}
.viewtog{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;
         border:1px solid var(--kline);background:#fff;color:var(--kmut);padding:0;transition:.15s;}
.viewtog:hover,.viewtog:focus{color:var(--kp);border-color:var(--kp);background-color:#fff;}
.viewtog.on,.viewtog.on:hover,.viewtog.on:focus{background-color:var(--kp);border-color:var(--kp);color:#fff;}

/* Grid is the default view; `.is-list` is applied by assets/js/solviya.js. */
.shop-grid.is-list{grid-template-columns:1fr;gap:16px;}
.shop-grid.is-list .pcard{flex-direction:row;border:1px solid var(--kline);border-radius:12px;padding:0;gap:0;}
.shop-grid.is-list .pcard:hover{transform:none;box-shadow:none;border-color:var(--kp);}
.shop-grid.is-list .pimg{width:210px;flex-shrink:0;border-radius:12px 0 0 12px;}
.shop-grid.is-list .pbody{padding:20px 22px;gap:10px;justify-content:center;}
.shop-grid.is-list .pname{font-size:18px;line-height:1.4;min-height:0;}
.shop-grid.is-list .add-btn{margin-top:6px;align-self:flex-start;padding:0 30px;}
@media (max-width:720px){
  .shop-grid.is-list .pimg{width:120px;}
  .shop-grid.is-list .pbody{padding:14px;}
  .shop-grid.is-list .pname{font-size:15px;}
  .shop-grid.is-list .add-btn{align-self:stretch;}
}

.woocommerce .woocommerce-ordering{margin-bottom:22px;}
/* Pagination — the design's `.pager` / `.pgn`: rounded squares, the current
   page filled green. WooCommerce renders a <ul> of <li>, so the numbers are
   styled on the inner <a>/<span> and the list furniture is stripped. */
.woocommerce nav.woocommerce-pagination{margin-top:40px;text-align:center;}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers{
  border:none;display:flex;gap:8px;justify-content:center;align-items:center;
  margin:0;padding:0;list-style:none;white-space:normal;
}
.woocommerce nav.woocommerce-pagination ul li{border:none;margin:0;padding:0;overflow:visible;float:none;display:block;}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:40px;height:40px;padding:0 10px;border-radius:9px;border:1px solid var(--kline);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  color:var(--kink);background:#fff;transition:.15s;line-height:1;margin:0;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus{background-color:#fff;border-color:var(--kp);color:var(--kp);}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current{background-color:var(--kp);border-color:var(--kp);color:#fff;}

/* ---- Cart ----
   WooCommerce lays the cart out with floats and 48% widths
   (`.woocommerce .cart-collaterals .cart_totals{float:right;width:48%}`).
   The design uses a CSS grid instead, so those are undone here at matching
   specificity — a plain `.cart_totals` rule would lose to WooCommerce's. */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals{width:100%;}
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{float:none;width:100%;}
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells{float:none;width:100%;}
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-checkout .cart-collaterals .cart_totals table th,
#add_payment_method .cart-collaterals .cart_totals table th{width:auto;}
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2{float:none;width:100%;}

.cart-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--kline);}
.cart-thumb{width:72px;height:72px;flex-shrink:0;border-radius:10px;overflow:hidden;border:1px solid var(--kline);background:var(--kcream);}
.cart-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.cart-name{flex:1;min-width:0;font-size:16px;font-weight:400;line-height:1.4;}
.qty-sm{display:inline-flex;align-items:center;border:1px solid var(--kline);border-radius:9px;overflow:hidden;background:#fff;}
.qty-sm button{background:#fff;border:none;width:34px;height:38px;font-size:18px;color:var(--kink);padding:0;}
.qty-sm button:hover{color:var(--kp);}
.qty-sm input.qty{width:40px;text-align:center;font-weight:400;font-size:16px;border:none;padding:0;height:38px;
  -moz-appearance:textfield;appearance:textfield;background:#fff;}
.qty-sm input.qty::-webkit-outer-spin-button,
.qty-sm input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.trash{background:transparent;border:none;color:var(--kmut);padding:6px;line-height:0;display:inline-flex;}
.trash:hover{color:var(--kprice);}
/* Cart remove: WooCommerce sizes a.remove to 1em with display:block, so the
   trash SVG overflowed and sat off-centre inside the (red, on-hover) circle.
   Give it a real box and centre the icon. */
.cart-row .trash.remove,
.cart-row a.remove{
  width:34px;height:34px;flex-shrink:0;padding:0;font-size:0;line-height:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.cart-row .trash.remove svg,
.cart-row a.remove svg{width:18px;height:18px;}
/* Continue Shopping / Update Cart both read as green actions. */
.cart-actions-row{display:flex;justify-content:space-between;align-items:center;padding-top:18px;gap:16px;flex-wrap:wrap;}
.cart-continue,
.cart-continue:visited{font-weight:700;font-size:15px;color:var(--kp);}
.cart-continue:hover{color:var(--kpd);}
.cart-update{background:transparent;border:none;font-weight:700;font-size:15px;color:var(--kp);padding:0;}
.cart-update:hover,.cart-update:focus{color:var(--kpd);background-color:transparent;}
.totals{background:var(--kcream);border:1px solid var(--kline);border-radius:6px;padding:24px;}
.totals h3{font-size:22px;font-weight:800;margin:0 0 18px;}
.trow{display:flex;justify-content:space-between;font-size:16px;padding:8px 0;gap:12px;}
.trow .mut{color:var(--kmut);}
.ttotal{display:flex;justify-content:space-between;font-size:18px;padding:14px 0;border-top:1px solid var(--kline);gap:12px;}
.btn-block{display:block;width:100%;text-align:center;background:var(--kp);color:#fff;border:none;border-radius:11px;padding:15px;font-weight:800;font-size:16px;margin-top:8px;}
.btn-block:hover{background:var(--kpd);color:#fff;}
.coupon{display:flex;gap:12px;flex-wrap:wrap;}
.coupon input{border:1px solid var(--kline);border-radius:10px;padding:13px 16px;font-size:15px;min-width:260px;flex:1;max-width:340px;}
.coupon button{background:var(--kp);color:#fff;border:none;border-radius:10px;padding:0 30px;font-weight:700;}
.coupon button:hover{background:var(--kpd);}
@media (max-width:720px){
  .cart-row{flex-wrap:wrap;gap:10px;}
  .cart-name{flex:1 1 100%;order:-1;}
  .coupon input{min-width:0;}
}

/* Cart totals rows, styled to read as the design's `.trow` / `.ttotal`.
   See the note in woocommerce/cart/cart-totals.php for why this stays a table.
   Selectors carry the `.woocommerce` prefix to outrank the plugin's own
   `.woocommerce table.shop_table` borders and padding. */
.woocommerce .totals table.shop_table,
.woocommerce-page .totals table.shop_table{border:none;background:transparent;margin:0;border-radius:0;width:100%;}
.woocommerce .totals table.shop_table th,
.woocommerce .totals table.shop_table td,
.woocommerce-page .totals table.shop_table th,
.woocommerce-page .totals table.shop_table td{border:none;padding:8px 0;font-size:16px;vertical-align:top;}
/* The panel supplies the cream fill; the parent theme's table striping would
   band individual rows on top of it. Cover the cells and the amount wrapper too
   — the grey band was sitting on the amount `td`, not the row. */
.totals table.shop_table tr,
.totals table.shop_table tbody tr,
.totals table.shop_table tbody th,
.totals table.shop_table tbody td,
.totals table.shop_table tfoot th,
.totals table.shop_table tfoot td,
.totals table.shop_table th,
.totals table.shop_table td,
.totals table.shop_table td .woocommerce-Price-amount,
.totals table.shop_table tr:nth-child(2n),
.totals table.shop_table tr:nth-child(odd){background:transparent;}
.woocommerce .totals table.shop_table th,
.woocommerce-page .totals table.shop_table th{font-weight:400;color:var(--kmut);text-align:left;}
.woocommerce .totals table.shop_table td,
.woocommerce-page .totals table.shop_table td{text-align:right;}
.totals table.shop_table td .woocommerce-Price-amount{color:var(--kprice);font-weight:700;}
.woocommerce .totals table.shop_table tr.order-total th,
.woocommerce .totals table.shop_table tr.order-total td,
.woocommerce-page .totals table.shop_table tr.order-total th,
.woocommerce-page .totals table.shop_table tr.order-total td{border-top:1px solid var(--kline);padding-top:14px;font-size:18px;font-weight:800;color:var(--kink);}
.totals table.shop_table tr.order-total td .woocommerce-Price-amount{font-size:18px;}
.totals ul#shipping_method{list-style:none;margin:0;padding:0;}
.totals ul#shipping_method li{margin:0;padding:0;font-weight:600;}
.totals .woocommerce-shipping-destination{font-size:13px;color:var(--kmut);margin:6px 0 0;}
.totals .shipping-calculator-button{font-size:13px;color:var(--kp);font-weight:700;}
/* The proceed button now sits outside the `.totals` box (see cart-totals.php). */
.cart_totals .wc-proceed-to-checkout{padding:0;margin-top:14px;}
.cart_totals .wc-proceed-to-checkout a.checkout-button{
  display:block;width:100%;text-align:center;background:var(--kp);color:#fff;border:none;
  border-radius:11px;padding:15px;font-weight:800;font-size:16px;margin:0;
}
.cart_totals .wc-proceed-to-checkout a.checkout-button:hover{background:var(--kpd);color:#fff;}

/* Coupon heading (moved off an inline style so it can shrink on phones). */
.cart-coupon-title{font-size:20px;font-weight:800;margin:0 0 12px;}
/* WooCommerce tints every 2nd responsive-table cell on mobile, which banded the
   Shipment row inside the totals box. Keep the box background uniform. */
.woocommerce-cart .totals table.shop_table tr:nth-child(2n) td{background:transparent;}
/* Mobile cart: smaller headings, a compact Apply button under the input, and the
   checkout button sitting below the (uniform, soft-grey) totals box. */
@media (max-width:720px){
  .cart-coupon-title{font-size:17px;}
  .totals{padding:18px;}
  .totals h3{font-size:18px;margin:0 0 14px;}
  .coupon{flex-direction:column;align-items:stretch;gap:10px;}
  .coupon input{max-width:none;}
  .coupon button{align-self:flex-start;padding:11px 28px;}

  /* Proceed to Checkout (cart) and Place order (checkout) stick to the bottom,
     full width, just above the mobile bottom-nav bar (which is 68px tall). */
  .woocommerce-cart .cart_totals .wc-proceed-to-checkout{
    position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:80;
    margin:0;padding:0;box-shadow:0 -4px 16px rgba(16,24,40,.12);
  }
  .woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button{border-radius:0;padding:16px;}
  .woocommerce-cart .cart-grid{padding-bottom:74px;}

  body.woocommerce-checkout #payment #place_order{
    position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:80;
    width:auto;margin:0;border-radius:0;padding:16px;box-shadow:0 -4px 16px rgba(16,24,40,.12);
  }
  .woocommerce-checkout #payment{padding-bottom:74px;}
}

/* Cart page: every rounded element shares a 6px radius. The `.woocommerce-cart`
   scope raises specificity above each component's own radius rule. */
.woocommerce-cart .totals,
.woocommerce-cart .cart-thumb,
.woocommerce-cart .qty-sm,
.woocommerce-cart .coupon input,
.woocommerce-cart .coupon button,
.woocommerce-cart .cart_totals .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-error{border-radius:6px;}

/* ---- Checkout ---- */
.co-note{font-size:15px;font-weight:800;text-transform:capitalize;padding:14px 0;border-bottom:1px solid var(--kline);margin:0;}
.co-note a{font-weight:500;color:var(--kp);}
.co-note a:hover{color:var(--kpd);}

/* WooCommerce prints the "Returning customer?" and "Have a coupon?" toggles as
   info notices; the design shows them as plain `.co-note` rules. */
.solviya-co-notes{margin-bottom:28px;}
/* Arriving at checkout straight from "Buy Now": the coupon toggle is hidden,
   since it is noise for a one-click purchase. Regular checkout keeps it. */
body.solviya-bn-checkout .solviya-co-notes{display:none;}
.solviya-co-notes .woocommerce-info,
.solviya-co-notes .woocommerce-form-login-toggle .woocommerce-info,
.solviya-co-notes .woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent;border:none;border-bottom:1px solid var(--kline);border-radius:0;
  padding:14px 0;margin:0;font-size:15px;font-weight:800;text-transform:capitalize;color:var(--kink);
  list-style:none;
}
.solviya-co-notes .woocommerce-info::before{display:none;}
.solviya-co-notes .woocommerce-info a{font-weight:500;color:var(--kp);text-transform:none;}
.solviya-co-notes .woocommerce-info a:hover{color:var(--kpd);}
.field-in{border:1px solid var(--kline);border-radius:10px;padding:13px 15px;font-size:15px;width:100%;}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:18px;}
.pay-card{border:1.5px solid var(--kline);background:#fff;border-radius:12px;padding:16px;}
.pay-card.on{border-color:var(--kp);background:rgba(21,162,74,.05);}
.pay-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;border:2px solid #c3c9c2;display:inline-block;}
.pay-card.on .pay-dot{border-color:var(--kp);box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 6px var(--kp);}

/* WooCommerce renders the fields; these rules give them the design's look. */
.woocommerce form .form-row{padding:0;margin:0 0 14px;display:block;}
.woocommerce form .form-row label{font-weight:600;font-size:14px;display:block;margin-bottom:6px;color:var(--kink);}
.woocommerce form .form-row .required{color:var(--kprice);text-decoration:none;}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single{
  border:1px solid var(--kline);border-radius:10px;padding:13px 15px;font-size:15px;width:100%;
  background:#fff;color:var(--kink);line-height:normal;height:auto;box-shadow:none;
}
.woocommerce form .form-row textarea{resize:vertical;min-height:88px;}
/* WooCommerce core (woocommerce.css) styles textareas through
   `.form-row .input-text` at a higher specificity than the plain `textarea`
   selector above, which left Street address and Order notes with a darker
   border and 4px radius. Match that specificity so they look like the inputs. */
.woocommerce form .form-row textarea.input-text{
  border:1px solid var(--kline);border-radius:10px;padding:13px 15px;font-size:15px;
  background:#fff;color:var(--kink);
}
/* Street address (সম্পূর্ণ ঠিকানা) sits a bit shorter than the default textarea. */
.woocommerce form .form-row textarea#billing_address_1{min-height:58px;}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered{padding:0;line-height:1.5;color:var(--kink);}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:10px;}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--kprice);}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--kp);}
.solviya-field-error{display:block;color:var(--kprice);font-size:13px;line-height:1.5;margin-top:6px;font-weight:600;}
.woocommerce-checkout h2,
.woocommerce-checkout h3{font-size:22px;font-weight:800;margin:0 0 16px;}
#customer_details h2{font-size:22px;font-weight:800;margin-bottom:16px;}
.woocommerce-checkout #payment{background:transparent;border-radius:0;}
/* When Cash on delivery is the only gateway, hide the chooser (heading is also
   skipped server-side). The single COD option stays checked in the DOM, so the
   order still submits with no "select a payment method" error. */
body.solviya-hide-payment .woocommerce-checkout #payment ul.payment_methods{display:none;}
.woocommerce-checkout #payment ul.payment_methods{padding:0;border:none;display:flex;flex-direction:column;gap:12px;}
.woocommerce-checkout #payment ul.payment_methods li{
  border:1.5px solid var(--kline);background:#fff;border-radius:6px;padding:16px;list-style:none;margin:0;
}
.woocommerce-checkout #payment ul.payment_methods li.solviya-pay-on{border-color:var(--kp);background:rgba(21,162,74,.05);}
.woocommerce-checkout #payment ul.payment_methods li label{font-weight:700;font-size:15px;display:inline-block;margin:0;}
.woocommerce-checkout #payment ul.payment_methods li img{display:none;}
.woocommerce-checkout #payment div.payment_box{background:transparent;padding:8px 0 0;margin:6px 0 0;font-size:12px;color:var(--kmut);}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #payment div.form-row.place-order{padding:0;margin:16px 0 0;}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text{font-size:13px;color:var(--kmut);line-height:1.6;margin:16px 0;}
.woocommerce-checkout #payment #place_order{
  display:block;width:100%;background:var(--kp);color:#fff;border:none;border-radius:6px;
  padding:16px;font-size:17px;font-weight:800;float:none;
}
.woocommerce-checkout #payment #place_order:hover{background:var(--kpd);}
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .checkout_coupon{border:1px solid var(--kline);border-radius:12px;padding:20px;margin:14px 0;}

/* ---- Checkout: outer bordered card ----
   The whole checkout section (lead heading + billing/product grid) sits in a
   soft rounded card. .kw already gives the 1200px max-width and centring, so
   this only adds the border, radius and inner padding. The inline padding that
   used to live on the wrapper was moved here so the border wraps it. */
.solviya-checkout-page{
  border:2px solid #e2e8f0;border-radius:1.5rem;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  padding:32px 40px 48px;margin-top:24px;margin-bottom:60px;
}
@media (max-width:720px){
  /* .solviya-checkout-page is also the .kw element (width:100%, margin:0 auto).
     Below 1200px the auto side-margins collapse to 0, so the card's border used
     to sit flush against the viewport edges. width:auto lets real side-margins
     inset the whole card from the screen (the outer gap), while padding keeps
     the inputs off the border (the inner gap). box-sizing:border-box means the
     16px margins reduce the width instead of causing horizontal overflow. */
  .solviya-checkout-page{width:auto;margin:16px 16px 40px;padding:24px 18px 32px;}
}

/* ---- Checkout: lead heading + section headings ---- */
.checkout-lead{
  text-align:center;font-size:clamp(20px,3vw,30px);font-weight:800;color:var(--kink);
  line-height:1.45;max-width:760px;margin:6px auto 30px;padding-bottom:24px;
  border-bottom: 4px dashed var(--kline);
}
.woocommerce-checkout #customer_details .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading{
  font-size:22px;font-weight:800;color:var(--kink);
  margin:0 0 20px;padding-bottom:12px;border-bottom:2px dashed var(--kline);
}

/* ---- Checkout editable cart (প্রোডাক্ট ডিটেইল) ----
   review-order.php renders div cards, not a table, so the `.totals` cream box
   that wraps the review order on the cart page is neutralised here and the
   cards carry their own styling. */
.woocommerce-checkout .totals{background:transparent;border:none;border-radius:0;padding:0;}
.co-products{position:relative;transition:opacity .15s;}
.co-products.co-busy{opacity:.55;pointer-events:none;}
.co-prod-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:14px;font-weight:700;color:var(--kmut);
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--kline);
}
.co-prod{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--kline);border-radius:10px;background:#fff;
  padding:14px;margin-top:14px;box-shadow:0 1px 3px rgba(27,42,34,.04);
}
.co-prod-thumb{flex:0 0 64px;width:64px;}
.co-prod-thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block;}
.co-prod-main{flex:1 1 auto;min-width:0;}
.co-prod-name{
  font-weight:700;font-size:15px;color:var(--kink);line-height:1.4;margin:0 0 4px;
  /* Clamp long names to two lines with an ellipsis, like the reference, so a
     wordy title never pushes the row layout around. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.co-prod-main .variation,
.co-prod-main dl.variation{font-size:12px;color:var(--kmut);margin:0 0 8px;}
.co-prod-main dl.variation dt,
.co-prod-main dl.variation dd{display:inline;margin:0;font-weight:400;}
.co-prod-qty{margin-top:8px;}
.co-prod-qty .co-qty-input{width:44px;}
.co-prod-side{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.co-prod-price{margin:0;font-weight:800;font-size:16px;color:var(--kprice);white-space:nowrap;}
.co-prod-price .co-prod-was{display:inline-block;margin-left:6px;font-weight:600;font-size:13px;color:var(--kmut);}
.co-prod-remove{font-size:13px;color:var(--kmut);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;}
.co-prod-remove:hover{color:var(--kprice);}

.co-totals{margin-top:22px;border-top:1px solid var(--kline);padding-top:16px;}
.co-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;font-size:16px;}
.co-total-row > span:first-child{color:var(--kmut);}
.co-total-row > span:last-child{font-weight:700;color:var(--kink);}
.co-total-row .woocommerce-Price-amount{color:var(--kprice);font-weight:700;}
.co-total-row.co-grand{border-top:1px solid var(--kline);margin-top:6px;padding-top:14px;font-size:19px;}
.co-total-row.co-grand > span{font-weight:800;color:var(--kink);}
.co-total-row.co-grand .woocommerce-Price-amount{font-size:19px;}

/* ---- Product detail ----
   Ported from the static site's styles.css. The review list is namespaced
   `.pdrev-*`: the source reused `.rev-item` for both the testimonial carousel
   and this list, and the later rule silently broke the carousel wherever both
   appeared on one page. */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
/* WooCommerce floats the gallery and summary at 48% each
   (`.woocommerce div.product div.summary{float:right;width:48%}`), which inside
   a grid cell squeezed the right column to ~250px. Undo it so each column fills
   its grid track. The `div.summary` element selector matches WooCommerce's own
   specificity — a bare `.summary` would lose to it. */
.woocommerce div.product .solviya-gallery,
.woocommerce div.product div.summary,
.woocommerce div.product div.entry-summary{float:none;width:auto;margin:0;}
/* WooCommerce spaces the rating with margin-bottom:1.618em; the summary's own
   flex gap already handles spacing here. */
.woocommerce div.product .woocommerce-product-rating{margin-bottom:0;}
/* Short description — shown between the rating and the price when present. */
.summary .woocommerce-product-details__short-description{color:#3a453e;font-size:16px;line-height:1.7;margin:0;}
.summary .woocommerce-product-details__short-description p{margin:0 0 8px;}
.summary .woocommerce-product-details__short-description p:last-child{margin-bottom:0;}
.summary .woocommerce-product-details__short-description ul,
.summary .woocommerce-product-details__short-description ol{margin:0 0 8px;padding-left:20px;}
/* The gallery column is the positioning context for the sale badge, which
   WooCommerce would otherwise float at the top-left of the whole product. */
.pd-media{position:relative;}
/* A full round red badge showing "X% OFF" (see solviya_sale_flash_percentage).
   The `.woocommerce` prefix and `span` element match WooCommerce's own
   `.woocommerce span.onsale`, whose olive fill would otherwise win. */
.woocommerce .pd-media span.onsale,
.pd-media .onsale{position:absolute;top:14px;right:14px;left:auto;z-index:3;margin:0;
  width:66px;height:66px;border-radius:50%;padding:0;min-height:0;min-width:0;
  background-color:#E01212;color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:14px;font-weight:800;line-height:1.15;letter-spacing:.01em;}

/* Square corners on the product imagery. */
.gallery-main{position:relative;border:1px solid var(--kline);border-radius:0;overflow:hidden;aspect-ratio:1/1;background:var(--kcream);display:flex;align-items:center;justify-content:center;}
/* Click the image (or the magnify trigger below) to open the full-screen zoom
   dialog — see initZoomDialog in assets/js/solviya.js. */
.gallery-main img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in;transition:transform .2s ease;}
/* Full-screen zoom trigger — a white circular magnifier, top-right of the
   main image (see woocommerce/single-product/product-image.php). */
.solviya-zoom-trigger{
  position:absolute;top:14px;right:14px;z-index:2;
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;color:var(--kink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(27,42,34,.18);transition:.15s;
}
/* When a sale badge is present it takes the top-right corner, so the magnifier
   drops just below it, centred under the 66px round badge. */
.solviya-zoom-trigger.has-badge{top:92px;right:23px;}
.solviya-zoom-trigger:hover,
.solviya-zoom-trigger:focus{background:var(--kp);color:#fff;box-shadow:0 3px 14px rgba(27,42,34,.28);}
/* Slide the swapped image fully in from the right, so the change reads even
   when the picked image matches the current one. A full-width translate with
   an ease-out curve makes it a smooth carousel-style slide rather than a nudge;
   .gallery-main clips the incoming image with overflow:hidden. */
@keyframes gallerySlideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.gallery-main img.gallery-slide{animation:gallerySlideIn .5s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion:reduce){.gallery-main img.gallery-slide{animation:none;}}
/* Small fixed-size thumbnails in a row, as on the reference. */
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.thumb{width:72px;height:72px;flex:0 0 72px;border:1px solid var(--kline);border-radius:0;background:var(--kcream);overflow:hidden;padding:0;cursor:pointer;}
.thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.thumb.on,.thumb:hover{border-color:var(--kp);background-color:var(--kcream);}
/* ---- Full-screen image zoom dialog (see initZoomDialog in solviya.js) ----
   The image opens enlarged so it overflows the stage; drag/pinch/wheel to
   explore, thumbnail rail switches images. */
.szoom{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;}
.szoom[hidden]{display:none;}
html.szoom-lock{overflow:hidden;}
.szoom__backdrop{position:absolute;inset:0;background:rgba(20,26,23,.94);}
.szoom__stage{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab;}
.szoom.is-grabbing .szoom__stage{cursor:grabbing;}
.szoom__img{max-width:none;display:block;user-select:none;-webkit-user-drag:none;will-change:transform;transform-origin:center center;}
.szoom__close{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s;}
.szoom__close:hover,.szoom__close:focus{background:rgba(255,255,255,.32);}
.szoom__thumbs{position:absolute;z-index:3;right:16px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;max-height:82vh;overflow-y:auto;padding:4px;}
.szoom__thumb{width:60px;height:60px;flex:0 0 60px;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:#fff;padding:0;cursor:pointer;opacity:.55;transition:.15s;}
.szoom__thumb.on,.szoom__thumb:hover{opacity:1;border-color:#fff;}
.szoom__thumb img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:720px){
  /* Rail drops to a scrollable strip along the bottom on phones — centred, with
     no overlay band behind it. */
  .szoom__thumbs{right:auto;top:auto;left:0;bottom:0;transform:none;flex-direction:row;width:100%;
    max-height:none;overflow-x:auto;overflow-y:hidden;background:none;gap:8px;justify-content:center;}
  .szoom__thumb{width:54px;height:54px;flex:0 0 54px;}
  .szoom__close{top:12px;right:12px;width:40px;height:40px;}
}
.pd-title{font-size:24px;font-weight:700;line-height:1.35;margin:0;}
.pd-title .w{color:var(--kmut);font-size:16px;font-weight:500;}
/* Product subtitle (pack size, e.g. "৫০০গ্রাম"): inline beside the name on the
   product page, on its own line under the name on grid cards. */
.solviya-subtitle{display:inline-block;margin-left:9px;margin-right:0;font-size:16px;line-height:24px;color:#637381;font-weight:500;}
.pbody .solviya-subtitle{display:block;margin-left:0;font-size:15px;line-height:22px;font-weight:400;}
.pd-price{color:var(--kprice);font-weight:800;font-size:20px;}
.pd-price .woocommerce-Price-amount{color:var(--kprice);}
.pd-price del{color:#919eab;font-weight:600;font-size:16px;margin-right:8px;}
.pd-price del .woocommerce-Price-amount{color:#919eab;}
.pd-price ins{text-decoration:none;}
/* The add-to-cart form stacks the quantity box and the CTAs; the gap keeps the
   buttons off the quantity field. */
.woocommerce div.product form.cart{display:flex;flex-direction:column;gap:16px;margin:0;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--kline);border-radius:6px;overflow:hidden;background:#fff;width:max-content;height:48px;}
.qty button{background:#fff;border:none;width:44px;height:46px;font-size:22px;color:var(--kink);padding:0;}
.qty button:hover,.qty button:focus{background-color:#fff;color:var(--kp);}
.qty input.qty-input{width:52px;text-align:center;font-weight:700;border:none;height:46px;font-size:16px;padding:0;
  background:#fff;color:var(--kink);-moz-appearance:textfield;appearance:textfield;}
.qty input.qty-input::-webkit-outer-spin-button,
.qty input.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* The two CTAs share the full summary width equally; 48px tall, 6px radius. */
.cta-row{display:flex;gap:14px;width:100%;max-width:none;}
/* Add to cart takes the deep green; Buy now takes the primary green. */
.cta-primary{flex:1 1 0;height:48px;background:var(--kdeep);color:#fff;border:none;border-radius:6px;padding:0 15px;font-weight:800;font-size:16px;transition:.15s;}
.cta-primary:hover,.cta-primary:focus{background-color:var(--kdeep);color:#fff;filter:brightness(1.15);}
.cta-buy{flex:1 1 0;height:48px;background:var(--kp);color:#fff;border:none;border-radius:6px;padding:0 15px;font-weight:800;font-size:16px;transition:.15s;}
.cta-buy:hover,.cta-buy:focus{background-color:var(--kpd);color:#fff;}
.meta{border-top:1px solid var(--kline);padding-top:16px;display:flex;flex-direction:column;gap:8px;font-size:15px;color:#42504a;}
.meta p{margin:0;}
.meta .lbl{color:var(--kmut);}
.meta a,.meta a:visited{color:#42504a;}
.meta a:hover{color:var(--kp);}
.pd-stock{font-size:15px;font-weight:700;color:var(--kp);margin:0;}
.pd-stock.out{color:var(--kprice);}

.tabs{margin-top:44px;border-bottom:1px solid var(--kline);display:flex;gap:28px;flex-wrap:wrap;}
.tab{background:transparent;border:none;padding:0 0 14px;font-size:16px;font-weight:700;border-bottom:3px solid transparent;color:var(--kmut);margin-bottom:-1px;}
.tab:hover,.tab:focus{background-color:transparent;color:var(--kink);}
.tab.on,.tab.on:hover{color:var(--kp);border-bottom-color:var(--kp);background-color:transparent;}
.tab-body{padding-top:24px;max-width:900px;color:#3a453e;font-size:16px;line-height:1.9;}
.tab-body p{margin-bottom:12px;}
.tab-body .h{font-weight:700;color:var(--kink);margin:14px 0 6px;}
/* The static design wrote its description headings as `<p class="h">`, which
   inherits the 16px body size. Real product content uses actual heading tags,
   which would otherwise pick up the theme's much larger h1-h6 sizes — so they
   are matched to `.h` here. */
.tab-body h1,
.tab-body h2,
.tab-body h3,
.tab-body h4,
.tab-body h5,
.tab-body h6{font-size:16px;font-weight:700;color:var(--kink);margin:14px 0 6px;line-height:1.6;}
.tab-body ul,
.tab-body ol{margin:0 0 12px;padding-left:24px;}
.tab-body li{margin-bottom:4px;}
.tab-body img{max-width:100%;height:auto;border-radius:10px;}
.tab-body table{width:100%;border-collapse:collapse;font-size:15px;}
.tab-body table th,
.tab-body table td{border:1px solid var(--kline);padding:10px 12px;text-align:left;}
.tab-panel[hidden]{display:none;}

.rev-wrap{max-width:900px;padding-top:24px;}
.rev-h{font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--kink);text-transform:uppercase;margin-bottom:18px;}
.rev-h-sub{padding-top:6px;border-top:1px solid var(--kline);margin-top:24px;padding-top:20px;}
.rev-summary{display:flex;gap:34px;align-items:center;flex-wrap:wrap;margin-bottom:30px;}
.rev-avg{display:flex;flex-direction:column;align-items:center;gap:6px;}
.rev-avg .circle{width:96px;height:96px;border-radius:50%;border:2px solid var(--kprice);display:flex;align-items:center;justify-content:center;color:var(--kprice);font-size:26px;font-weight:800;}
.rev-avg .n{font-size:14px;color:var(--kmut);}
.rev-bars{flex:1;min-width:280px;display:flex;flex-direction:column;gap:8px;}
.rev-bar{display:flex;align-items:center;gap:12px;font-size:14px;}
.rev-bar .lab{width:52px;color:var(--kink);}
.rev-bar .track{flex:1;height:16px;border-radius:4px;background:#EEF0EC;overflow:hidden;position:relative;}
/* `.fill` is a <span>, and the source design left it inline — so its height and
   the inline width="%" the template sets were both ignored and the bar never
   filled. The track itself escaped this only because it is a flex item. */
.rev-bar .fill{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--kp),var(--kp) 8px,#1fb457 8px,#1fb457 16px);}
.rev-bar .pct{width:40px;text-align:right;color:var(--kmut);}
.rev-listtitle{font-size:16px;font-weight:700;margin:8px 0 18px;}
.pdrev-list{list-style:none;margin:0;padding:0;}
.pdrev-item{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--kline);}
.pdrev-item .who{flex-shrink:0;width:120px;text-align:center;}
.pdrev-item .who .avatar{margin:0 auto 8px;}
.pdrev-item .who .nm{font-weight:700;font-size:14px;line-height:1.3;}
.pdrev-item .body .date{color:var(--kmut);font-size:13px;}
.pdrev-item .body .txt{margin-top:8px;font-size:15px;color:#3a453e;}
.pdrev-item .body .txt p{margin:0 0 8px;}
.rev-form{margin-top:20px;background:#f4f6f8;border:1px solid var(--kline);border-radius:14px;padding:32px 26px 26px;}
/* Submit sits at the bottom-right of the form, as in the reference. */
.rev-form .form-submit{margin:0;text-align:right;}
.rev-form .form-submit .submit-btn{float:none;display:inline-block;}
.rev-form h3{font-size:20px;font-weight:800;margin-bottom:6px;}
.rev-form .note{font-size:14px;color:var(--kmut);margin-bottom:18px;}
.rev-form label.field{display:block;font-size:14px;font-weight:600;margin-bottom:8px;}
.req,.required{color:var(--kprice);text-decoration:none;}
.rate-stars{display:flex;gap:6px;font-size:24px;color:#D8DBD4;margin-bottom:18px;}
.rate-stars .s{cursor:pointer;}
.rate-stars .s.on{color:var(--kacc);}
.rev-form textarea,
.rev-form input[type=text],
.rev-form input[type=email]{width:100%;border:1px solid var(--kline);border-radius:10px;padding:13px 15px;font-size:15px;margin-bottom:14px;background:#fff;}
.rev-form textarea{resize:vertical;min-height:120px;}
.rev-form p{margin:0;}
.rev-form .comment-form-cookies-consent{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:18px;}
.rev-form .comment-form-cookies-consent input{margin:0;}
.rev-form .comment-form-cookies-consent label{font-size:14px;font-weight:400;}
.rev-form .form-submit{margin:0;}

/* The rating widget is WooCommerce's own `p.stars`: each link hides its text
   with a negative text-indent and draws a star from the icon font in ::before,
   swapping the glyph between outline and filled. Only the size and colour are
   changed here — touching width/height/text-indent would expose the "1 of 5
   stars" label WooCommerce is hiding. */
.rev-form p.stars{display:flex;margin:0 0 18px;line-height:1;}
.rev-form p.stars span{display:flex;gap:6px;}
.woocommerce .rev-form p.stars a{font-size:24px;color:#D8DBD4;}
.woocommerce .rev-form p.stars a::before{color:inherit;}
.woocommerce .rev-form p.stars:hover a,
.woocommerce .rev-form p.stars.selected a.active,
.woocommerce .rev-form p.stars.selected a:not(.active){color:var(--kacc);}
.woocommerce .rev-form p.stars.selected a.active ~ a{color:#D8DBD4;}

.submit-btn{background:var(--kp);color:#fff;border:none;border-radius:10px;padding:12px 28px;font-weight:800;font-size:15px;}
.submit-btn:hover,.submit-btn:focus{background-color:var(--kpd);color:#fff;}
/* WooCommerce paints the review submit grey via `.woocommerce #respond
   input#submit` (0,2,1), which outranks `.submit-btn`. */
.woocommerce #review_form #respond input#submit,
.woocommerce #respond input#submit.submit-btn{
  background-color:var(--kp);color:#fff;border:none;border-radius:10px;
  padding:12px 28px;font-weight:800;font-size:15px;float:none;
}
.woocommerce #review_form #respond input#submit:hover,
.woocommerce #respond input#submit.submit-btn:hover{background-color:var(--kpd);color:#fff;}
/* Matching the reference product page's related heading. */
.related-title{font-size:20px;font-weight:600;margin-bottom:20px;color:var(--kink);}

@media (max-width:860px){
  .pd-grid{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:720px){
  .pd-title{font-size:24px;}
  .rev-summary{gap:20px;}
  .pdrev-item .who{width:84px;}
  /* Stack the Add to cart / Buy now buttons full-width on mobile. */
  .cta-row{max-width:none;flex-direction:column;}
  .cta-row .cta-primary,
  .cta-row .cta-buy{flex:0 0 auto;width:100%;height:52px;}
  /* Centre the product gallery thumbnails on mobile. */
  .thumbs{justify-content:center;}
}

/* ---- My account ----
   The design uses a CSS grid; WooCommerce lays the account out with floats
   (`.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}`
   and content at 68%), which inside a grid cell shrank the nav to ~75px and
   clipped the labels. Both are neutralised at the plugin's own specificity. */
.account-grid{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start;}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:auto;}

/* Navigation sidebar, styled as a card of links. */
.woocommerce-MyAccount-navigation{background:var(--kcream);border:1px solid var(--kline);border-radius:16px;padding:10px;}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-MyAccount-navigation li{margin:0;border:none;}
.woocommerce-MyAccount-navigation li a{
  display:block;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:600;color:var(--kink);transition:.15s;
}
.woocommerce-MyAccount-navigation li a:hover{background:#fff;color:var(--kp);}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--kp);color:#fff;}
.woocommerce-MyAccount-navigation li.is-active a:hover{background:var(--kpd);color:#fff;}

.woocommerce-MyAccount-content{min-width:0;font-size:16px;color:#42504a;line-height:1.7;}
.woocommerce-MyAccount-content p{margin:0 0 14px;}
.woocommerce-MyAccount-content a:not(.button){color:var(--kp);font-weight:600;}
.woocommerce-MyAccount-content a:not(.button):hover{color:var(--kpd);}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{font-size:20px;font-weight:800;color:var(--kink);margin:0 0 14px;}
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type=submit]{
  display:inline-block;background:var(--kp);color:#fff;border:none;border-radius:10px;
  padding:13px 26px;font-weight:700;font-size:15px;transition:.15s;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type=submit]:hover{background:var(--kpd);color:#fff;}

/* Orders / downloads tables. */
.woocommerce-MyAccount-content table.shop_table{border:1px solid var(--kline);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;width:100%;}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td{border:none;border-bottom:1px solid var(--kline);padding:14px 16px;font-size:14px;text-align:left;}
.woocommerce-MyAccount-content table.shop_table thead th{background:var(--kcream);font-weight:700;color:var(--kmut);}
.woocommerce-MyAccount-content table.shop_table tr:last-child td{border-bottom:none;}

/* Account / address forms reuse the checkout field styling. */
.woocommerce-MyAccount-content form .form-row label{font-weight:600;font-size:14px;display:block;margin-bottom:6px;}
.woocommerce-MyAccount-content .woocommerce-Addresses{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px;}
.woocommerce-MyAccount-content .woocommerce-Address{border:1px solid var(--kline);border-radius:12px;padding:20px;}
.woocommerce-MyAccount-content .woocommerce-Address address{font-style:normal;line-height:1.8;font-size:15px;}

@media (max-width:860px){
  .account-grid{grid-template-columns:1fr;gap:22px;}
  .woocommerce-MyAccount-navigation{padding:8px;}
  .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:6px;}
  .woocommerce-MyAccount-navigation li a{padding:9px 14px;}
  .woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:1fr;}
}

/* Login / register form. */
.solviya-account-login #customer_login.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:40px;width:100%;}
.solviya-account-login #customer_login .col-1,
.solviya-account-login #customer_login .col-2{float:none;width:auto;max-width:none;
  border:1px solid var(--kline);border-radius:16px;padding:28px;}
.solviya-account-login h2{font-size:22px;font-weight:800;margin:0 0 18px;}
.solviya-account-login .woocommerce-form-row label{font-weight:600;font-size:14px;display:block;margin-bottom:6px;}
.solviya-account-login .woocommerce-Input{width:100%;border:1px solid var(--kline);border-radius:10px;padding:13px 15px;font-size:15px;}
.solviya-account-login button[type=submit]{
  background:var(--kp);color:#fff;border:none;border-radius:10px;padding:13px 28px;font-weight:700;font-size:15px;
}
.solviya-account-login button[type=submit]:hover{background:var(--kpd);color:#fff;}
.solviya-account-login .lost_password a,
.solviya-account-login .woocommerce-LostPassword a{color:var(--kp);font-weight:600;}
@media (max-width:720px){
  .solviya-account-login #customer_login.col2-set{grid-template-columns:1fr;gap:24px;}
}

/* Lost / reset password: a single narrow column inside a soft card. */
.solviya-lost-password > p,
.solviya-lost-password form.woocommerce-ResetPassword{max-width:520px;}
.solviya-lost-password > p{font-size:15px;color:var(--kmut);line-height:1.7;margin:0 0 20px;}
.solviya-lost-password form.woocommerce-ResetPassword{border:1px solid var(--kline);border-radius:16px;padding:28px;}
.solviya-lost-password form.woocommerce-ResetPassword .form-row{margin-bottom:18px;}
.solviya-lost-password form.woocommerce-ResetPassword .woocommerce-Input{width:100%;}

/* ---- Order received / thank you ---- */
.ord-strip{background:var(--kcream);border:1px solid var(--kline);border-radius:14px;padding:24px;display:flex;flex-wrap:wrap;gap:28px;}
.ord-strip .cell + .cell{border-left:1px solid var(--kline);padding-left:28px;}
.ord-strip .k{font-size:12px;color:var(--kmut);font-weight:600;letter-spacing:.04em;margin:0;}
.ord-strip .v{font-weight:800;font-size:18px;margin:4px 0 0;}
.ord-table{border:1px solid var(--kline);border-radius:12px;overflow:hidden;}
.ord-table .r{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--kline);font-size:15px;}
.ord-table .r.hd{font-weight:700;}
.ord-table .r.sh{background:var(--kcream);font-weight:700;}
.ord-addr{border:1px solid var(--kline);border-radius:12px;padding:22px;max-width:520px;font-size:15px;line-height:1.9;color:#42504a;}
.ord-addr p{margin:0;}
.ord-addr .nm{font-weight:700;color:var(--kink);}
@media (max-width:720px){
  .ord-strip .cell + .cell{border-left:none;padding-left:0;}
}