/*
Theme Name: agencyfic-pk-18-7-3-45-pm
Theme URI: https://agencyfic.com
Author: Agencyfic
Author URI: https://agencyfic.com
Description: Premium Liquid Chromium Glassmorphism WooCommerce theme for Agencyfic — a marketing agency that also sells digital products. Full WooCommerce support, customizer-driven branding, dynamic services/testimonials/FAQ, a native purchase-notification engine, and a working My Account → Wishlist tab.
Version: agencyfic.pk.18.7.3.45.pm
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agencyfic
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

:root{
  --bg:#05070d;
  --bg-2:#090d18;
  --bg-3:#0d1324;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.08);
  --chrome:linear-gradient(135deg, rgba(255,255,255,.95), rgba(192,205,225,.72) 18%, rgba(255,255,255,.22) 36%, rgba(120,132,160,.22) 54%, rgba(255,255,255,.85) 72%, rgba(212,220,235,.48));
  --chrome-dark:linear-gradient(135deg, rgba(15,18,28,.92), rgba(30,36,50,.78), rgba(14,18,30,.95));
  --glass:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.28);
  --text:#f7f9ff;
  --muted:#b8c2db;
  --muted-2:#8190ad;
  --primary:#8ea7ff;
  --primary-2:#7cf0ff;
  --accent:#d6ddff;
  --success:#43e6b0;
  --warning:#ffd56b;
  --danger:#ff7a96;
  --shadow:0 30px 90px rgba(0,0,0,.48);
  --shadow-soft:0 18px 48px rgba(0,0,0,.28);
  --radius-xl:34px;
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:14px;
  /* Widened from 1240px so pages use more of the available screen on
     laptop/desktop widths instead of leaving large unused side margins.
     This is a single variable used by .container everywhere in the theme
     (shop, product, cart, checkout, blog, static pages), so bumping it
     widens content site-wide, not just on any one template. */
  --container:1360px;
  --header-h:88px;
  --whatsapp:#25D366;
  --whatsapp-dark:#128C7E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(142,167,255,.20), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(124,240,255,.16), transparent 20%),
    radial-gradient(circle at 50% 85%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg, #03050a 0%, #070b14 34%, #080d17 100%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 30%, rgba(255,255,255,.03) 50%, transparent 72%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.05), transparent 18%),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.04), transparent 14%);
  mix-blend-mode:screen;
  opacity:.8;
  z-index:-1;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden;word-wrap:normal!important}
/* Side margin reduced to ~40% of the previous 40px (20px/side) value, per
   request, to hand that reclaimed space back to page content — product
   cards, cart rows, etc. — which were feeling compacted for width. */
.container{width:min(var(--container), calc(100% - 16px)); margin-inline:auto}

/* FIX: the topbar (announcement bar) and the nav card used to be TWO
   independently-sticky elements — .topbar stuck at top:0, and .nav stuck at
   a hardcoded top:40px, assuming the topbar would always render at exactly
   40px tall. That's only true for one exact line-length of announcement
   text: if the text was short enough to sit comfortably on one line the
   real topbar height was LESS than 40px, leaving a visible gap between the
   topbar and the floating nav card whenever the page was scrolled; if the
   text was long enough to wrap to two lines the topbar was TALLER than
   40px, so the nav card's fixed offset made it get tucked behind/clipped by
   the topbar instead. Wrapping both in one sticky container (below) removes
   the hardcoded offset entirely — the pair always sticks together as a
   single unit, in normal flow, no matter how many lines the banner text
   takes. See header.php: <div class="site-sticky-header"> wraps both. */
.site-sticky-header{position:sticky;top:0;z-index:1000}

.topbar{
  display:block;
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(142,167,255,.22), rgba(124,240,255,.20));
  color:#fff;
  font-size:13px;
  padding:10px 16px;
  text-align:center;
  letter-spacing:.2px;
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.topbar strong{font-weight:900}
.topbar a{text-decoration:underline}

.nav{margin-top:14px}
.nav-inner{
  height:var(--header-h);
  border:1px solid rgba(255,255,255,.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    linear-gradient(135deg, rgba(12,16,26,.88), rgba(25,31,45,.74));
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border-radius:28px;
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px 0 22px;position:relative;overflow:hidden;
}
.nav-inner:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 30%, transparent 70%, rgba(255,255,255,.08));
  pointer-events:none;opacity:.75;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;letter-spacing:-.03em;position:relative;z-index:1}
.brand img.custom-logo{height:38px;width:auto;border-radius:10px}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(192,205,225,.54) 24%, rgba(255,255,255,.18) 44%, rgba(94,108,138,.26) 60%, rgba(255,255,255,.72));
  box-shadow:0 12px 30px rgba(142,167,255,.26), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -8px 18px rgba(0,0,0,.14);
  display:grid;place-items:center;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.28);
}
.nav-links{display:flex;align-items:center;gap:26px;color:var(--muted);font-weight:600;font-size:14px;position:relative;z-index:1;list-style:none}
.nav-links li{position:relative}
.nav-links a:hover,.nav-links .current-menu-item>a{color:#fff;text-shadow:0 0 10px rgba(124,240,255,.25)}
.nav-links .sub-menu{
  list-style:none;position:absolute;top:calc(100% + 14px);left:0;min-width:220px;padding:10px;
  background:linear-gradient(180deg, rgba(20,24,36,.96), rgba(10,13,20,.96));
  border:1px solid rgba(255,255,255,.14);border-radius:18px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s ease;z-index:50;
}
.nav-links li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-links .sub-menu a{display:block;padding:8px 10px;border-radius:10px}
.nav-links .sub-menu a:hover{background:rgba(255,255,255,.06)}
.nav-actions{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.nav-mobile-left{display:none;align-items:center;gap:4px;position:relative;z-index:1}

.icon-btn,.btn,button.btn,input.btn{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(25,30,44,.82), rgba(10,13,20,.72));
  color:var(--text);border-radius:16px;height:46px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;cursor:pointer;transition:.25s ease;
  box-shadow:0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  font-family:inherit;font-size:14px;white-space:nowrap;line-height:1;
}
.nav-actions{flex-shrink:0}
.nav-actions .btn-primary{flex-shrink:0}
.icon-btn{position:relative}
.icon-btn .count{
  position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:10px;font-weight:900;
  border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px;
}
button.nav-hamburger{flex-direction:column;justify-content:center;gap:4px;padding:0;width:44px}
button.nav-hamburger span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;transition:.25s ease}
button.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
button.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
button.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.icon-btn:hover,.btn:hover{
  transform:translateY(-2px);border-color:rgba(255,255,255,.34);
  box-shadow:0 18px 44px rgba(0,0,0,.34), 0 0 0 1px rgba(124,240,255,.12), inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-primary,button[type="submit"],.wp-block-button__link,#place_order,.checkout-button,.single_add_to_cart_button{
  border:none!important;color:#08101f!important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(214,221,255,.72) 26%, rgba(124,240,255,.88) 62%, rgba(255,255,255,.92))!important;
  box-shadow:0 18px 36px rgba(124,240,255,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;
}

.hero{padding:34px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:stretch}

.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(18,22,34,.82), rgba(12,16,26,.62));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(24px) saturate(180%);-webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.16);
  position:relative;overflow:hidden;
}
.glass:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 22%, transparent 60%, rgba(255,255,255,.06));
  pointer-events:none;opacity:.85;
}

.hero-main{padding:38px;position:relative;min-height:640px}
.hero-main:after{content:"";position:absolute;inset:auto;width:420px;height:420px;right:-140px;top:-120px;background:radial-gradient(circle, rgba(124,240,255,.22), transparent 66%);filter:blur(18px);pointer-events:none}
.hero-main:before{content:"";position:absolute;inset:auto;width:460px;height:460px;left:-170px;bottom:-190px;background:radial-gradient(circle, rgba(142,167,255,.20), transparent 66%);filter:blur(18px);pointer-events:none}

.eyebrow{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 14px;color:#ecf2ff;font-weight:800;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

h1,h2,h3,h4{font-family:inherit;color:var(--text)}
h1{font-size:clamp(44px, 6vw, 78px);line-height:.92;letter-spacing:-.07em;margin:18px 0 16px;max-width:12ch;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero p{color:var(--muted);font-size:17px;line-height:1.7;max-width:58ch;margin:0 0 26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px}
.trust-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#edf2ff;font-size:13px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* Colour-tinted variants for the product-page trust row so each pill reads at a glance */
.trust-row-product{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 10px}
.trust-row-product .trust-pill{
  font-weight:800;border-width:1.5px;justify-content:center;text-align:center;
  padding:9px 10px;font-size:12.5px;height:auto;
}
.trust-row-product .trust-pill-blue{background:rgba(124,167,255,.14);border-color:rgba(124,167,255,.4);color:#cfe0ff}
.trust-row-product .trust-pill-amber{background:rgba(255,184,77,.14);border-color:rgba(255,184,77,.42);color:#ffd9a0}
.trust-row-product .trust-pill-green{background:rgba(67,230,176,.14);border-color:rgba(67,230,176,.42);color:#9ff2d8}
.trust-row-product .trust-pill-purple{background:rgba(190,142,255,.16);border-color:rgba(190,142,255,.44);color:#ddc7ff}
.trust-row-product .trust-pill-teal{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.4);color:#a7f0bd}
.trust-row-product .trust-pill-gold{background:rgba(255,213,107,.16);border-color:rgba(255,213,107,.46);color:#ffe9b0}

@media (max-width:480px){
  .trust-row-product .trust-pill{font-size:11.5px;padding:8px 6px;gap:5px}
}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.stat{padding:18px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), rgba(7,10,18,.36);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.stat strong{display:block;font-size:26px;letter-spacing:-.05em;margin-bottom:6px}
.stat span{color:var(--muted);font-size:13px}

.hero-side{display:grid;gap:22px}
.side-card{padding:22px;border-radius:28px;overflow:hidden;position:relative}
.side-card .label{font-size:12px;font-weight:900;color:#f0f4ff;text-transform:uppercase;letter-spacing:.14em}
.product-showcase{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.mini-product{display:flex;gap:14px;padding:14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:inherit;text-decoration:none;transition:.2s ease}
a.mini-product:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);transform:translateY(-2px)}
.mini-product img{width:88px;height:88px;object-fit:cover;border-radius:16px}
.mini-product h3{margin:0 0 6px;font-size:15px}
.mini-product p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.price-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.price{font-weight:900;font-size:18px}
.old,del{color:var(--muted-2);text-decoration:line-through;font-size:13px}
ins{text-decoration:none}
.badge{font-size:12px;font-weight:900;border-radius:999px;padding:6px 10px;display:inline-flex}
.badge.sale,.onsale{background:rgba(255,122,150,.15);color:#ffbfd0;border:1px solid rgba(255,122,150,.22)}

.section{padding:22px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.section-head h2{margin:0;font-size:28px;letter-spacing:-.04em}
.section-head p{margin:0;color:var(--muted);max-width:60ch;line-height:1.6}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.card{padding:20px;border-radius:26px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), rgba(12,16,26,.62);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.10);transition:.25s ease;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.12), transparent 26%, transparent 72%, rgba(255,255,255,.05));pointer-events:none;opacity:.8}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26);box-shadow:0 24px 56px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12)}
/* FIX: .card:hover's translateY lift is meant for browsable product/service
   cards, not forms — on the Login/Register cards it meant the whole card
   (and everything inside it, including the password field) physically
   shifted position for the 0.25s .card transition every time a cursor
   entered the card, and on touch devices a "hover" state can get applied
   on tap-down and cleared on tap-up at slightly different coordinates,
   which is a well-known cause of a tap appearing to land on the wrong
   element (or nothing). Forms should never move under the person's cursor
   while they're trying to click into a field, so the auth cards opt out
   of the lift/shadow-on-hover effect entirely. */
.agencyfic-auth-card:hover{transform:none;box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.10)}

.category{min-height:180px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.category:after{content:"";position:absolute;inset:auto -35px -50px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle, rgba(124,240,255,.24), transparent 70%);filter:blur(10px)}
.category h3{margin:0;font-size:18px}
.category span{color:var(--muted);font-size:13px}

.product-card,ul.products li.product{overflow:hidden!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column;height:100%}
.product-thumb,ul.products li.product a img{aspect-ratio:1;background:#10182f;width:100%;height:100%;object-fit:contain;display:block}
.product-body{padding:18px;display:flex;flex-direction:column;flex:1 1 auto}
.product-body h3{flex:0 0 auto}
.product-body p{flex:0 0 auto}
/* FIX: category label + sale badge sat in a plain flex row with no
   shrink/truncation rules, so on narrower cards (2-column mobile grid) a
   longer category name and the "-100%" badge fought for the same space —
   the badge either got squeezed into overlapping the title below it, or
   the two sat closer than any real margin. Now: the category label is the
   only side allowed to shrink/truncate (ellipsis instead of colliding with
   its neighbour), the badge/star-rating side is fixed at its natural size
   and never compressed, and flex-wrap+row-gap give a clean top margin if
   there's ever genuinely not enough width for both on one line. */
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;row-gap:6px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.meta>span:first-child{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta .badge,.meta .stars{flex:0 0 auto;white-space:nowrap}
.stars,.star-rating{color:#ffd56b;letter-spacing:2px;font-size:13px}
.star-rating span:before{color:#ffd56b}
.product-card h3,ul.products li.product .woocommerce-loop-product__title{margin:10px 0 8px!important;font-size:17px;line-height:1.35;padding:0 18px}
.product-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65;min-height:42px}
.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;gap:12px;padding-inline:18px;padding-bottom:18px}
.product-footer .price-wrap{display:flex;flex-direction:column;flex-shrink:1;min-width:0}
.product-footer .current{font-size:20px;font-weight:900}
.product-footer .old{font-size:12px}
/* The "Add to cart" / "View product" button: fixed, content-hugging box that
   never shrinks or wraps its text, so it always keeps a clean single-line
   label with proper padding no matter how tight the row gets. */
.product-footer .button,
.product-footer .add_to_cart_button{
  flex:0 0 auto;flex-shrink:0;white-space:nowrap;
  height:40px;line-height:1;padding:0 16px!important;font-size:13px!important;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;z-index:2; /* stay above .product-card-link so it's still independently clickable */
}
/* Whole-card "stretched link": covers the entire product card so tapping
   anywhere on it (image, category, title, description) opens the product
   page. z-index:1 keeps it BELOW the Add to Cart button (z-index:2 above),
   so that button remains independently clickable/tappable on top of it. */
.product-card-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
ul.products li.product .price{padding:0 18px;display:block;font-size:20px;font-weight:900}
ul.products li.product{list-style:none}

.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#eef2ff;font-size:13px;font-weight:700}

.split{display:grid;grid-template-columns:1.02fr .98fr;gap:18px;align-items:stretch}
.feature-list{display:grid;gap:12px;margin-top:16px}
.feature-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.feature-item b{display:block;margin-bottom:4px}
.feature-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

/* ---- Service cards: used on the homepage ("How We Help Businesses Grow" +
   Why Choose Us) and on the Services archive page (archive-service.php:
   all-services grid + Why Choose Agencyfic cards). ---- */
.service-grid{align-items:stretch}
.service-card{display:flex;flex-direction:column;gap:10px}
.service-card .svc-icon{
  width:46px;height:46px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(135deg, rgba(142,167,255,.20), rgba(124,240,255,.14));
  border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;font-size:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.service-card h3{margin:2px 0 0;font-size:17px;letter-spacing:-.01em}
.service-card h3 a{color:inherit}
.service-card h3 a:hover{color:var(--primary-2)}
.service-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;flex:1}
.service-card .svc-link{margin-top:2px;color:var(--primary-2);font-weight:800;font-size:13px}
.service-card .svc-link:hover{text-decoration:underline}
@media(max-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- Interior page hero (Services / About / Contact) — a lighter, single
   column version of the homepage's two-column .hero-main so inner pages
   don't inherit its 640px min-height (which assumes a side panel next to
   it). Used by archive-service.php. ---- */
.page-hero{padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.page-hero .eyebrow{justify-content:center}
.page-hero h1{max-width:18ch;margin-inline:auto}
.page-hero .hero p,.page-hero p{max-width:640px;margin-inline:auto}
.page-hero .hero-actions{justify-content:center}
@media(max-width:720px){
  .page-hero{padding:34px 20px}
}

/* ---- WhatsApp spotlight card (Services page) — reuses the theme's own
   --whatsapp brand color variables already defined in :root (also used by
   the floating WhatsApp button in footer.php), so it visually matches
   rather than importing a separate hardcoded green. ---- */
.wa-spotlight{
  background:linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  border:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.wa-spotlight .section-head{justify-content:center;text-align:center;margin-bottom:6px}
.wa-spotlight .section-head h2,.wa-spotlight .section-head p{color:#fff}
.wa-spotlight .section-head p{margin-inline:auto;max-width:70ch}
.wa-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:20px}
.wa-feature{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.10);padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.14)}
.wa-feature .wa-icon{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:18px}
.wa-feature b{display:block;color:#fff;margin-bottom:4px;font-size:14px}
.wa-feature p{margin:0;color:rgba(255,255,255,.92);font-size:13px;line-height:1.5}

#tailored-plan .card h3{margin:0 0 8px;font-size:18px}
#tailored-plan .card p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}

.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.logo{padding:16px;text-align:center;border-radius:18px;color:#dbe4ff;background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05)), rgba(12,16,26,.58);border:1px solid rgba(255,255,255,.10);font-weight:900;letter-spacing:.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

.faq details{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:18px;padding:16px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer;font-weight:800}
.faq p{color:var(--muted);line-height:1.7;margin:12px 0 0}

.blog-card img{height:220px;width:100%;object-fit:cover;border-radius:18px}
.blog-card h3{margin:14px 0 8px}
.blog-card p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}

.footer{margin:30px 0 110px;padding:26px 0 12px}
.footer-inner{padding:28px;border-radius:32px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), rgba(12,16,26,.64);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr; gap:22px}
.footer h4{margin:0 0 14px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer li,.footer p{color:var(--muted);line-height:1.7}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;margin-top:18px;border-top:1px solid rgba(255,255,255,.1);color:var(--muted-2);font-size:13px}

.mobile-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(680px, calc(100% - 20px));display:none;gap:8px;justify-content:space-between;padding:10px;background:rgba(10,14,22,.82);backdrop-filter: blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:22px;box-shadow:var(--shadow);z-index:998}
.mobile-nav a{flex:1;text-align:center;padding:10px 8px;border-radius:16px;color:#dce4ff;font-size:12px;font-weight:800}
.mobile-nav a:hover,.mobile-nav a.active{background:rgba(255,255,255,.08)}

.whatsapp{position:fixed;right:18px;bottom:18px;z-index:1010;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-dark));box-shadow:0 18px 36px rgba(37,211,102,.26);color:#fff;border:1px solid rgba(255,255,255,.18);transition:.25s ease;pointer-events:auto}
.whatsapp:hover{transform:translateY(-3px) scale(1.03)}
.whatsapp svg{width:28px;height:28px;display:block;fill:#fff}

/* FIX: this used to be display:none <-> display:flex, driven by a
   one-shot @keyframes animation that only ever plays on the way IN.
   Toggling display is an instant, un-transitionable jump — so when a
   new notification needed to replace one still on screen, the old fix
   for that (in theme.js) had nowhere to animate FROM, and the content
   changed with a visible "snap" instead of a smooth swap. Using
   opacity/transform + a real `transition` (reversible at any point,
   in either direction) instead of display + keyframes means fading
   out and back in — see showBubble() in theme.js — always looks like
   a clean, single, deliberate hand-off between products, never a glitch. */
.notif{
  position:fixed;left:18px;bottom:92px;z-index:1200;width:min(360px, calc(100% - 20px));padding:14px;border-radius:22px;
  background:rgba(12,16,26,.84);border:1px solid rgba(255,255,255,.14);backdrop-filter: blur(20px) saturate(180%);box-shadow:var(--shadow);
  display:flex;overflow:hidden;
  opacity:0;transform:translateX(-24px);pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.notif.show{opacity:1;transform:translateX(0);pointer-events:auto}
.notif img{width:56px;height:56px;border-radius:16px;object-fit:cover;margin-right:12px}
.notif h4{margin:0 0 4px;font-size:14px}
.notif p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.notif .x{margin-left:auto;color:#fff;opacity:.7;cursor:pointer;font-size:18px;padding:2px 6px}

.mini-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mini-tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;color:#e8edff}

.searchbar{margin-top:18px;display:flex;gap:10px;align-items:center;padding:12px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.searchbar input{flex:1;background:transparent;border:none;outline:none;color:#fff;font:inherit}
.searchbar input::placeholder{color:#93a0c5}
.section-divider{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);margin:18px 0}

.rating-bar{display:grid;gap:8px;margin-top:14px}
.rating-row{display:grid;grid-template-columns:64px 1fr 42px;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--warning),#fff2b1)}
.small{font-size:13px;color:var(--muted)}

/* Forms, comments, WooCommerce base elements */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],textarea,select{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#fff;padding:12px 14px;font:inherit;width:100%;
}
/* FIX: the closed <select> box above already matches the dark theme, but its
   dropdown option list (billing_country, billing_state, the phone country
   code field, etc.) is a native browser popup that ignores the page's own
   background — it rendered stark white with the OS's default blue highlight.
   Setting colour directly on <option> is honoured by Chrome/Edge/Firefox for
   the list's background and text; the hover/selected row highlight colour
   itself is OS-controlled in Chrome specifically and can't be fully
   overridden with CSS alone, but this brings it in line with the theme
   everywhere else. Solid hex values are used (not the translucent rgba()
   tokens elsewhere) because native popups aren't composited over the page
   background, so a translucent colour would just look washed-out/white. */
select option{
  background-color:#0d1324;
  color:var(--text);
  padding:10px 14px;
}
select option:checked,
select option:hover{
  background-color:var(--primary);
  color:#08101f;
}
table.shop_table{width:100%;border-collapse:separate;border-spacing:0 10px}
table.shop_table th,table.shop_table td{padding:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  list-style:none;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);margin:0 0 20px;
}
/* FIX: all four notice types shared one neutral grey style, so a server-side
   error (e.g. the new "password too short" / "passwords don't match" checks
   in functions.php) looked identical to a success message. Tinting error
   red and success green makes these instantly readable — matches the same
   --danger/--success colours used by the new password-strength indicator. */
.woocommerce-error{background:rgba(255,122,150,.12)!important;border-color:rgba(255,122,150,.45)!important;color:#ffe3ea}
.woocommerce-message{background:rgba(67,230,176,.10)!important;border-color:rgba(67,230,176,.4)!important}

/* WooCommerce: generic .button class (coupon apply, update cart, my-account save, etc.) */
a.button,button.button,input.button,.wc-forward{
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(25,30,44,.82), rgba(10,13,20,.72))!important;
  color:var(--text)!important;border-radius:16px!important;height:46px;padding:0 18px!important;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800!important;cursor:pointer;transition:.25s ease;line-height:1;white-space:nowrap;
  box-shadow:0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
a.button:hover,button.button:hover,input.button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.34)!important}
a.button.alt,.checkout-button,#place_order,.single_add_to_cart_button,.add_to_cart_button{
  border:none!important;color:#08101f!important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(214,221,255,.72) 26%, rgba(124,240,255,.88) 62%, rgba(255,255,255,.92))!important;
  box-shadow:0 18px 36px rgba(124,240,255,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
a.button.disabled,button.button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* FIX: "Pay for order" / gateway receipt page (e.g. Razorpay's "Pay Now" +
   "Cancel" buttons). This markup is echoed by the payment gateway plugin
   itself, not by any template in this theme, and it doesn't always carry
   the "button"/"button alt" classes the rest of the site relies on — so
   the browser fell back to its own plain, unstyled button chrome. Rather
   than guess at one exact class/ID, this catches every clickable control
   on the order-pay screen by tag + type (and by its literal label as a
   last resort), so it always gets the same theme styling no matter what
   markup the gateway renders. */
.woocommerce-order-pay input[type="submit"],
.woocommerce-order-pay button[type="submit"],
.woocommerce-order-pay button:not(.agencyfic-password-toggle),
.woocommerce-order-pay a.button,
.woocommerce-order-pay input[type="button"],
.woocommerce-order-pay #payment a,
form[name="razorpayform"] input[type="submit"],
form[name="razorpayform"] a,
input[value="Pay Now"],
input[value="Cancel"],
a.button.cancel{
  border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(25,30,44,.82), rgba(10,13,20,.72))!important;
  color:var(--text)!important;border-radius:16px!important;height:46px;min-width:120px;padding:0 18px!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  font-weight:800!important;font-size:15px!important;font-family:inherit!important;
  cursor:pointer;transition:.25s ease;line-height:1;white-space:nowrap;text-decoration:none!important;
  box-shadow:0 14px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  margin:0 10px 10px 0;
}
.woocommerce-order-pay input[type="submit"]:hover,
.woocommerce-order-pay button[type="submit"]:hover,
.woocommerce-order-pay a.button:hover,
form[name="razorpayform"] input[type="submit"]:hover,
input[value="Pay Now"]:hover,
input[value="Cancel"]:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.34)!important}

/* The primary "Pay Now" action gets the same bright gradient treatment as
   the theme's other primary CTAs (#place_order, checkout button, etc). */
.woocommerce-order-pay input[type="submit"],
.woocommerce-order-pay button[type="submit"],
form[name="razorpayform"] input[type="submit"],
input[value="Pay Now"]{
  border:none!important;color:#08101f!important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(214,221,255,.72) 26%, rgba(124,240,255,.88) 62%, rgba(255,255,255,.92))!important;
  box-shadow:0 18px 36px rgba(124,240,255,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.woocommerce-order-pay #payment,
.woocommerce-order-pay p + form[name="razorpayform"]{display:flex;flex-wrap:wrap;gap:0}

/* Shop / archive product grid */
ul.products{list-style:none;margin:0;padding:0}
ul.products::after{content:none}
.woocommerce-result-count{color:var(--muted);font-size:14px}
.woocommerce-ordering select{width:auto;min-width:200px}
.woocommerce-pagination{margin-top:26px}
.woocommerce-pagination ul{list-style:none;display:flex;gap:8px;padding:0;margin:0;flex-wrap:wrap}
.woocommerce-pagination .page-numbers,nav.woocommerce-pagination a.page-numbers,nav.woocommerce-pagination span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 10px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);font-weight:700;font-size:14px;
}
.woocommerce-pagination .page-numbers.current,.woocommerce-pagination a.page-numbers:hover{
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#08101f;border-color:transparent;
}

/* Quantity stepper */
.quantity{display:inline-flex;align-items:center}
.quantity .qty{width:64px!important;text-align:center;padding:12px 8px!important}

/* Star rating (fallback for elements outside .stars/.star-rating that WC still outputs) */
.star-rating{overflow:hidden;position:relative;height:1.2em;line-height:1.2em;width:5.4em;font-family:inherit}
.star-rating:before{content:"☆☆☆☆☆";position:absolute;top:0;left:0;color:#ffd56b}
.star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}
.star-rating span:before{content:"★★★★★";top:0;position:absolute;left:0}

/* Product tabs (single product page) */
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:inline-block;padding:10px 4px;font-weight:800;color:var(--muted)}
.woocommerce-tabs ul.tabs li.active a{color:var(--text);border-bottom:2px solid var(--accent)}
.woocommerce-tabs .panel{color:var(--muted);line-height:1.8}

/* My Account dashboard */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.woocommerce-MyAccount-navigation a{display:block;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text);font-weight:700}
.woocommerce-MyAccount-navigation li.is-active a{background:linear-gradient(135deg,var(--primary),var(--accent));color:#08101f}
.woocommerce-MyAccount-content{margin-top:20px}

/* ===================== My Account: Wishlist tab ===================== */
.agencyfic-wishlist-loading{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:48px 20px;color:var(--muted);font-weight:700;
}
.agencyfic-wishlist-spinner{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);
  animation:agencyficWishlistSpin .7s linear infinite;
}
@keyframes agencyficWishlistSpin{to{transform:rotate(360deg)}}

.agencyfic-wishlist-empty{
  text-align:center;padding:52px 24px;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.agencyfic-wishlist-empty-icon{font-size:40px;line-height:1;color:var(--danger);margin-bottom:6px}
.agencyfic-wishlist-empty h3{margin:0 0 4px;font-size:19px}
.agencyfic-wishlist-empty p{margin:0 0 18px;color:var(--muted);max-width:40ch}

.agencyfic-wishlist-grid{margin-top:4px}

.wishlist-thumb-wrap{position:relative}
/* Sits above .product-card-link's z-index:1, mirroring .gallery-actions on
   the single product page, so the heart button stays independently
   clickable even though the whole card is also a stretched link. */
.agencyfic-wishlist-remove{
  position:absolute;top:12px;right:12px;z-index:3;
  width:38px;height:38px;font-size:15px;
}
/* Note: the mobile "always 2 columns" rule for ul.products.grid-2/3/4
   further down in this file already covers .agencyfic-wishlist-grid too,
   since it carries both the "products" and "grid-3" classes. */

.content-wrap{padding:30px 0}
/* Tighter top gap on the product page between the breadcrumb line and the
   product gallery/image now that the duplicate breadcrumb row is gone. */
body.single-product .content-wrap{padding-top:16px}
/* On mobile the sticky topbar + header already take up their own space, so
   the page content underneath doesn't need a second, separate large gap on
   top of that — this is the "empty space under the header" fix. */
@media (max-width:720px){
  .content-wrap{padding:14px 0 24px}
}
/* Themes ANY content typed or pasted into a WordPress Page/Post editor —
   including content copied from Word/Google Docs/another site/an AI tool,
   which usually carries its own inline color/background styles — so it
   always matches the dark glassmorphism design instead of showing through
   with its original light-mode "raw html" colours. Inline styles normally
   beat CSS classes, so the neutralising rules near the bottom use
   !important on purpose. */
.entry-content{color:var(--muted);line-height:1.8;font-size:16px}
.entry-content > *:first-child{margin-top:0}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{
  color:var(--text) !important;background:none !important;font-family:inherit;
}
.entry-content p,.entry-content li,.entry-content span,.entry-content div,.entry-content td,.entry-content th{
  color:inherit !important;background:none !important;
}
.entry-content a{color:var(--primary-2) !important;text-decoration:underline;background:none !important}
.entry-content a:hover{color:var(--accent) !important}
.entry-content strong,.entry-content b{color:var(--text) !important}
.entry-content ul,.entry-content ol{padding-left:22px;margin:0 0 18px}
.entry-content li{margin-bottom:8px}
.entry-content blockquote{
  margin:20px 0;padding:16px 20px;border-left:3px solid var(--primary);
  background:rgba(255,255,255,.04) !important;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--muted) !important;font-style:italic;
}
.entry-content hr{border:none;border-top:1px solid var(--border);margin:26px 0}
.entry-content img{max-width:100%;height:auto;border-radius:var(--radius-md)}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 20px;background:none !important}
.entry-content table th,.entry-content table td{padding:10px 14px;border:1px solid var(--border);color:var(--muted) !important;background:none !important}
.entry-content table th{color:var(--text) !important;background:rgba(255,255,255,.05) !important}
.entry-content code{background:rgba(255,255,255,.08);color:var(--primary-2);padding:2px 6px;border-radius:6px;font-size:.9em}
.entry-content pre{background:rgba(0,0,0,.3) !important;padding:16px;border-radius:var(--radius-sm);overflow-x:auto}
.entry-content pre code{background:none;padding:0}
/* Neutralise stray inline-styled elements (e.g. a full block pasted from
   another site/export) that carry their own light background/text colour,
   so pasted content can never break out of the dark theme. */
.entry-content [style*="background"]{background:none !important;background-color:transparent !important}
.entry-content [style*="color"]{color:inherit !important}

/* ===================== About / Contact page hardening ===================== */
/* These two pages should look IDENTICAL to the rest of the site — same dark
   background, same glass cards, same accent colors as the homepage. If
   anything else on the install (an old cached copy of the page, a page-builder
   plugin, or a block with its own inline background/text color) ever tries to
   render a different color scheme here, these rules — scoped tightly to the
   body classes WordPress adds for these two specific templates, and marked
   !important — win regardless of where the conflicting style came from. */
body.page-template-template-about-php,
body.page-template-template-contact-php{
  background:
    radial-gradient(circle at 15% 10%, rgba(142,167,255,.20), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(124,240,255,.16), transparent 20%),
    radial-gradient(circle at 50% 85%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg, #03050a 0%, #070b14 34%, #080d17 100%) !important;
}
body.page-template-template-about-php .site-main,
body.page-template-template-contact-php .site-main{background:none !important}
body.page-template-template-about-php .card,
body.page-template-template-contact-php .card{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), rgba(12,16,26,.62) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:var(--muted) !important;
}
body.page-template-template-about-php .glass,
body.page-template-template-contact-php .glass{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)), linear-gradient(135deg, rgba(18,22,34,.82), rgba(12,16,26,.62)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:var(--muted) !important;
}
body.page-template-template-about-php h1,
body.page-template-template-about-php h2,
body.page-template-template-about-php h3,
body.page-template-template-about-php h4,
body.page-template-template-contact-php h1,
body.page-template-template-contact-php h2,
body.page-template-template-contact-php h3,
body.page-template-template-contact-php h4{color:var(--text) !important;background:none !important}
body.page-template-template-about-php p,
body.page-template-template-about-php li,
body.page-template-template-about-php span,
body.page-template-template-contact-php p,
body.page-template-template-contact-php li,
body.page-template-template-contact-php span{color:inherit !important;background:none !important}
body.page-template-template-about-php .btn,
body.page-template-template-contact-php .btn{
  background:rgba(255,255,255,.06) !important;color:var(--text) !important;border:1px solid var(--border) !important;
}
body.page-template-template-about-php .btn-primary,
body.page-template-template-contact-php .btn-primary{
  border:none !important;color:#08101f !important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(214,221,255,.72) 26%, rgba(124,240,255,.88) 62%, rgba(255,255,255,.92)) !important;
}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}

@media (max-width:1100px){
  .nav-links{display:none}
  .hero-grid,.split,.footer-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .logo-strip{grid-template-columns:repeat(3,1fr)}
  .hero-main{min-height:auto}

  /* Compact icon-only header: hamburger + search on the left, logo centred,
     wishlist + cart on the right. The primary menu itself is hidden here —
     on mobile it's rendered as a separate popup overlay (see
     .mobile-menu-overlay below) instead of living inside .nav-inner, so a
     closed/hidden menu never reserves layout space inside the header card
     (that was the cause of the empty gap under the logo) and an open menu
     is never clipped by nav-inner's overflow:hidden + backdrop-filter. */
  .nav-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:10px}
  .nav-mobile-left{display:flex;grid-column:1;grid-row:1}
  .nav-inner .brand{grid-column:2;grid-row:1;justify-self:center}
  .nav-inner .nav-actions{grid-column:3;grid-row:1;justify-self:end}
  .main-navigation{display:none}
  .nav-search-desktop,.nav-cta{display:none}

  .nav-mobile-left .icon-btn,
  .nav-actions .icon-btn{background:none;border:none;box-shadow:none;height:auto;width:auto;padding:6px}
  .nav-mobile-left .icon-btn:hover,
  .nav-actions .icon-btn:hover{transform:none;background:rgba(255,255,255,.08);border-radius:12px}
}
/* ===================== Mobile menu popup ===================== */
/* Lives outside .nav-inner on purpose (see header.php) so it is never
   clipped by the header card's overflow:hidden/backdrop-filter, and never
   affects the header's own height while closed. */
.mobile-menu-overlay{
  position:fixed!important;inset:0!important;z-index:2200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:104px 16px 24px;
  background:rgba(5,7,13,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.mobile-menu-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu-panel{
  width:100%;max-width:420px;max-height:calc(100vh - 128px);overflow-y:auto;
  padding:18px;border-radius:24px;
  transform:translateY(-14px);opacity:0;transition:transform .22s ease,opacity .22s ease;
}
.mobile-menu-overlay.is-open .mobile-menu-panel{transform:translateY(0);opacity:1}
.mobile-menu-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mobile-menu-panel-title{font-weight:900;font-size:16px}
.mobile-menu-close{width:38px;height:38px;padding:0;border-radius:12px}
.mobile-nav-links{list-style:none;display:flex;flex-direction:column;gap:2px}
.mobile-nav-links li{width:100%}
.mobile-nav-links a{display:block;padding:12px 14px;border-radius:14px;font-weight:700;color:var(--text)}
.mobile-nav-links a:hover,
.mobile-nav-links .current-menu-item>a{background:rgba(255,255,255,.08);color:#fff}
.mobile-nav-links .sub-menu{list-style:none;display:none;margin:2px 0 4px 12px;padding-left:10px;border-left:1px solid rgba(255,255,255,.12)}
.mobile-nav-links li.menu-item-has-children.is-open>.sub-menu{display:flex;flex-direction:column;gap:2px}
.mobile-nav-links .sub-menu a{padding:9px 12px;font-weight:600;font-size:14px}
body.agencyfic-menu-open{overflow:hidden}

@media (max-width:720px){
  .mobile-menu-overlay{padding-top:66px}
  /* Was calc(100% - 36px) = ~18px margin per side. Per request, reduced to
     ~40% of that (36px -> 14px, ~7px per side) so mobile content — product
     grid, cart rows, etc. — gets more usable width instead of sitting in
     unused edge margin. This is intentionally tight; if cards ever look
     like they're touching the glass edge too much, raise 14px back up. */
  .container{width:min(var(--container), calc(100% - 14px))}
  .nav{margin-top:0}
  .nav-inner{border-radius:0 0 24px 24px;height:52px;padding-inline:14px}
  .hero{padding-top:18px}
  h1{max-width:none}
  .hero-stats,.grid-4,.grid-3,.grid-2,.logo-strip,.split{grid-template-columns:1fr}
  /* The WooCommerce shop/category product grid is excluded from the collapse
     above: it always keeps a 2-column ("2x2") layout, even on small phones,
     matching standard ecommerce shop-page UX. */
  ul.products.grid-2,ul.products.grid-3,ul.products.grid-4{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .product-body{padding:12px}
  .product-body h3,ul.products li.product .woocommerce-loop-product__title{font-size:14px!important;padding:0 12px;margin:8px 0 6px!important}
  .product-body p{font-size:12px;min-height:0}
  .product-footer{padding-inline:12px;padding-bottom:12px;flex-wrap:wrap}
  .product-footer .current{font-size:16px}
  ul.products li.product .price{padding:0 12px;font-size:16px}
  .mobile-nav{display:flex}
  .notif{bottom:86px;left:12px}
  .whatsapp{bottom:92px}
  .section-head{flex-direction:column;align-items:flex-start}
  .brand-mark{display:none}
}

/* ===================== Single product: gallery overlays ===================== */
.agencyfic-gallery-wrap{position:relative}
.agencyfic-gallery-wrap .onsale{
  position:absolute;top:-14px;left:20px;z-index:6;margin:0;padding:7px 15px;
  border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.01em;
  background:rgba(255,122,150,.16);color:#ffd7e0;border:1px solid rgba(255,122,150,.36);
  backdrop-filter:blur(10px) saturate(160%);
  /* Sits roughly half above the image (over the card's padding) and half
     overlapping its top edge, instead of stamped fully on top of the photo. */
}
.gallery-actions{position:absolute;top:16px;right:16px;z-index:5;display:flex;gap:8px}
.gallery-icon-btn{
  width:42px;height:42px;border-radius:999px;display:grid;place-items:center;padding:0;
  background:rgba(8,11,18,.55);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.24);color:#fff;font-size:17px;cursor:pointer;transition:.2s ease;
}
.gallery-icon-btn:hover{transform:translateY(-2px);background:rgba(8,11,18,.78);border-color:rgba(255,255,255,.4)}
.gallery-icon-btn.active{color:var(--danger);border-color:rgba(255,122,150,.55)}
.gallery-icon-btn.copied{color:var(--success);border-color:rgba(67,230,176,.5)}
.agencyfic-share-icon{display:block}
.gallery-icon-btn.copied .agencyfic-share-icon{display:none}
.gallery-icon-btn.copied:after{content:"✓";font-size:16px;font-weight:900;line-height:1}

/* Zoom magnifier trigger on the product gallery — removed per design request */
.woocommerce-product-gallery__trigger{display:none!important}
.gallery-rating-badge{
  position:absolute;left:16px;bottom:16px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;background:rgba(8,11,18,.72);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.2);font-weight:800;font-size:13px;color:#fff;
}
.grb-star{color:var(--warning)}
.grb-sep{color:var(--muted-2)}

/* ===================== Single product: add-to-cart row ===================== */
.buy-now-btn{
  background:linear-gradient(135deg,#ffe08a,#ffb84d)!important;color:#241700!important;
  box-shadow:0 18px 36px rgba(255,184,77,.28), inset 0 1px 0 rgba(255,255,255,.65)!important;
  border-radius:16px!important;height:50px;
}
.trust-row-product{margin-bottom:4px}

/* ===================== Single product: reviews ===================== */
.agencyfic-reviews{margin-top:6px}
/* No reviewer avatar/picture, ever — name + rating only, matching the
   reference design. Defensive: this theme's own template never calls
   get_avatar(), but this guards against any plugin/override that might. */
.agencyfic-reviews .avatar,.agencyfic-reviews img.avatar{display:none!important}
.review-summary{display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:stretch;margin:18px 0 28px}
.review-summary-score{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:22px 16px}
.review-summary-score strong{font-size:36px;letter-spacing:-.04em;color:var(--success);line-height:1}
.review-summary-score span{color:var(--muted);font-size:13px}
/* Rating breakdown (Very Good / Good / Ok-Ok / Bad / Very Bad rows next to
   the score card). Fixed here specifically:
   - the label column was too narrow (64px) for words like "Very Good",
     which wrapped onto two lines and threw off row alignment/height.
   - the bar track was almost invisible (8% white on a dark card), so rows
     just looked like blank space before the count.
   - the count wasn't aligned/weighted consistently against the label. */
.review-summary-bars{align-self:center;padding:2px 0}
.review-summary-bars .rating-row{grid-template-columns:96px 1fr 32px;gap:14px}
.review-summary-bars .rating-row>span:first-child{white-space:nowrap}
.review-summary-bars .rating-row>span:last-child{text-align:right;font-weight:800;color:var(--text)}
.review-summary-bars .bar{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.08)}

.review-photos{margin-bottom:28px}
.review-photos h3{margin:0 0 12px;font-size:17px}
.review-photos-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
/* FIX: this used to be width:100% + a fixed height:110px — since the grid
   cell's width is whatever 1fr resolves to (not necessarily 110px), the
   thumbnails came out as uneven rectangles instead of clean squares.
   aspect-ratio:1/1 forces each tile to always be exactly as tall as it is
   wide, whatever that width ends up being, with object-fit:cover cropping
   the photo to fill it — matching a uniform square grid. */
.review-photo-thumb{display:block;width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden}
.review-photo-thumb img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.1)}
.review-photo-more{display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-weight:800;font-size:13px;text-align:center}

.agencyfic-review-list{display:grid;gap:14px;margin:18px 0}
.agencyfic-review-list li.review{list-style:none}
.agencyfic-review-list li.agencyfic-review-hidden{display:none}
.review-card{padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.review-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:8px}
.review-rating-chip{background:rgba(67,230,176,.14);color:#8ef2d2;border:1px solid rgba(67,230,176,.25);padding:3px 9px;border-radius:999px;font-weight:900;font-size:12px}
/* Rating-chip colour tiers — green/amber/red, using the theme's existing
   success/warning/danger tokens, instead of one flat colour for every
   star count (5★ and 1★ reviews shouldn't look the same). */
.review-rating-chip.is-good{background:color-mix(in srgb, var(--success) 16%, transparent);color:var(--success);border-color:color-mix(in srgb, var(--success) 30%, transparent)}
.review-rating-chip.is-mid{background:color-mix(in srgb, var(--warning) 18%, transparent);color:var(--warning);border-color:color-mix(in srgb, var(--warning) 32%, transparent)}
.review-rating-chip.is-bad{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger);border-color:color-mix(in srgb, var(--danger) 30%, transparent)}
.review-verdict{font-weight:800;color:var(--text)}
.review-verified{margin-left:auto;color:var(--success);font-weight:700;font-size:12px}
.review-card-body{color:var(--text);line-height:1.7;margin-bottom:12px}
/* Body text + this review's own attached photos (if any), side by side —
   text grows to fill the space, photos stay a fixed small square size. */
.review-card-main{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.review-card-main .review-card-body{margin-bottom:0;flex:1;min-width:0}
.review-card-photos{display:flex;gap:8px;flex-shrink:0}
.review-photo-thumb-small{width:64px;height:64px;aspect-ratio:1/1;overflow:hidden;flex-shrink:0}
.review-photo-thumb-small img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:12px}
@media (max-width:520px){
  .review-photo-thumb-small{width:48px;height:48px}
}
.review-card-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.review-helpful-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--muted);border-radius:999px;padding:6px 12px;font-weight:700;font-size:12px;cursor:pointer;transition:.2s ease}
.review-helpful-btn:hover{border-color:rgba(255,255,255,.3);color:var(--text)}
.review-helpful-btn.voted{color:var(--primary-2);border-color:rgba(124,240,255,.35);cursor:default}
.agencyfic-view-all-reviews{margin:4px 0 26px;display:inline-flex}

/* "Add a review" heading — WordPress core wraps this in a plain, unstyled
   <h3 class="comment-reply-title">. Without a rule here it just inherits
   the browser's bare default h3 size/spacing, so visually it read as part
   of the review list above it instead of its own section. A top border +
   generous top padding gives it a clear break, and the font size/weight
   matches the "Customer Ratings & Reviews" heading above it for
   consistency. */
.comment-reply-title{
  display:block;margin:32px 0 18px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);
}
.comment-reply-title small{display:block;margin-top:6px;font-size:13px;font-weight:600}
.comment-reply-title small a{color:var(--primary-2)}

.comment-form-rating{margin-bottom:14px}
.comment-form-rating label,.comment-form-comment label{display:block;font-weight:800;margin-bottom:8px;font-size:14px}

/* Interactive star rating — five radio inputs styled as stars, no JS
   required. Rendered in reverse DOM order (5★ first) inside a
   row-reverse flex container so they display left-to-right as 1-5, while
   letting a plain CSS sibling selector light up a star AND every star
   before it (i.e. every star that comes AFTER it in this reversed markup)
   on hover or once selected. */
.agencyfic-star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;width:fit-content}
.agencyfic-star-rating input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.agencyfic-star-rating label{
	font-size:30px;line-height:1;color:rgba(255,255,255,.18);cursor:pointer;
	transition:color .15s ease,transform .15s ease;user-select:none;
}
.agencyfic-star-rating label:hover,
.agencyfic-star-rating label:hover ~ label,
.agencyfic-star-rating input:checked ~ label{color:var(--warning)}
.agencyfic-star-rating input:focus-visible + label{outline:2px solid var(--primary-2);outline-offset:2px;border-radius:6px}
.agencyfic-star-rating label:active{transform:scale(1.15)}

/* FIX: WordPress core's comment_form() renders the Submit control as a plain
   <input type="submit">, not a <button> — every existing CTA rule in this
   theme keys off .btn / button[type="submit"], so this one fell through
   the cracks and showed up as the browser's unstyled default button. Give
   it the exact same pill shape, gradient and hover-lift as the rest of the
   site's primary buttons (#place_order, .single_add_to_cart_button, etc). */
#commentform input#submit,
.comment-form input[type="submit"]{
	border:none!important;cursor:pointer;font-family:inherit;
	display:inline-flex;align-items:center;justify-content:center;
	height:48px;padding:0 28px;border-radius:16px;
	font-weight:800;font-size:15px;letter-spacing:.01em;
	color:#08101f!important;
	background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(214,221,255,.72) 26%, rgba(124,240,255,.88) 62%, rgba(255,255,255,.92))!important;
	box-shadow:0 18px 36px rgba(124,240,255,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;
	transition:.25s ease;
}
#commentform input#submit:hover,
.comment-form input[type="submit"]:hover{transform:translateY(-2px)}

/* Review photo attachment field */
.comment-form-photos{margin-bottom:14px}
.comment-form-photos label{display:block;font-weight:800;margin-bottom:8px;font-size:14px}
.comment-form-photos input[type="file"]{
	display:block;width:100%;padding:10px 14px;border-radius:14px;
	background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.22);
	color:var(--muted);font-size:13px;font-family:inherit;cursor:pointer;
}
.comment-form-photos input[type="file"]::file-selector-button{
	margin-right:12px;border:none;border-radius:10px;padding:8px 14px;
	background:rgba(255,255,255,.1);color:var(--text);font-weight:700;font-size:12px;cursor:pointer;
}
.comment-form-photos .description{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

/* Review-gate message shown to logged-in visitors who haven't bought the product */
.agencyfic-review-gate{padding:16px 18px;margin:10px 0 6px;text-align:center;color:var(--muted);font-size:14px}

/* Simple lightbox for review photos */
.agencyfic-lightbox-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(3,5,10,.9);display:none;align-items:center;justify-content:center;padding:30px;
}
.agencyfic-lightbox-overlay.show{display:flex}
.agencyfic-lightbox-overlay img{max-width:min(92vw,900px);max-height:86vh;border-radius:18px;box-shadow:var(--shadow)}
.agencyfic-lightbox-close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center}

@media (max-width:720px){
  .review-summary{grid-template-columns:1fr}
  .review-summary-score{padding:18px 16px}
  .review-photos-grid{grid-template-columns:repeat(3,1fr)!important}
  .gallery-icon-btn{width:38px;height:38px;font-size:15px}
}

/* ===================== Single product: full page layout system ===================== */
.woocommerce div.product{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:20px 38px;
  align-items:start;
}
.woocommerce div.product > .agencyfic-gallery-wrap{grid-column:1;grid-row:1;min-width:0}
.woocommerce div.product > div.summary{grid-column:2;grid-row:1;min-width:0}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products{grid-column:1/-1;margin-top:10px}

/* Gallery — a single square "stage" image plus a custom thumbnail row built
   by theme.js (no FlexSlider, so nothing fights this layout with inline styles). */
.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery__wrapper{margin:0;padding:0;list-style:none;position:relative}

.woocommerce-product-gallery__image{
  position:relative!important;width:100%!important;max-width:100%!important;
  border-radius:var(--radius-lg);overflow:hidden;background:#10182f;border:1px solid rgba(255,255,255,.1);
}
.woocommerce-product-gallery__image:before{content:""!important;display:block!important;padding-top:100%!important;width:100%}
.woocommerce-product-gallery__image > a{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important}
.woocommerce-product-gallery__image img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center;border-radius:inherit;cursor:zoom-in;max-width:none!important;
}
.woocommerce-product-gallery__image.agencyfic-gallery-hidden{display:none}

.agencyfic-gallery-thumbs{
  display:flex;flex-wrap:nowrap;gap:10px;margin:14px 0 0;padding:2px 2px 8px;list-style:none;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.agencyfic-gallery-thumbs::-webkit-scrollbar{height:6px}
.agencyfic-gallery-thumbs::-webkit-scrollbar-track{background:transparent}
.agencyfic-gallery-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.agencyfic-gallery-thumb{
  width:74px;height:74px;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;
  border:2px solid rgba(255,255,255,.12);background:none;opacity:.65;transition:.2s ease;flex-shrink:0;
}
.agencyfic-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.agencyfic-gallery-thumb.is-active,.agencyfic-gallery-thumb:hover{opacity:1;border-color:var(--primary-2)}

.pswp__img{object-fit:contain}

/* Summary column */
.summary.entry-summary{padding-top:2px;min-width:0}
.summary .product_title{font-size:clamp(22px,3vw,30px);line-height:1.28;letter-spacing:-.02em;margin:0 0 12px;color:var(--text)}
.summary .woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.summary .woocommerce-product-rating .star-rating{font-size:15px}
.summary .woocommerce-review-link{color:var(--muted);font-size:13px}
.summary p.price,
.summary .price{
  font-size:clamp(24px,3vw,30px);font-weight:900;margin:4px 0 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--text);
}
.summary .price ins{text-decoration:none;color:var(--text)}
.summary .price del{font-size:.6em;font-weight:600;color:var(--muted-2);opacity:.8}
.agencyfic-save-badge{display:inline-flex;align-items:center;gap:2px;color:var(--success);font-weight:900;font-size:.56em;order:-1}
.summary .woocommerce-product-details__short-description{color:var(--muted);line-height:1.75;margin:0 0 22px;font-size:15px}
.summary .woocommerce-product-details__short-description p:first-child{margin-top:0}

/* Variations */
.summary table.variations{width:100%;border:none;margin:0 0 6px;display:block}
.summary table.variations tbody{display:block}
.summary table.variations tr{display:block;margin-bottom:18px}
.summary table.variations th.label{display:block;font-weight:800;margin-bottom:10px;font-size:14px;color:var(--text)}
.summary table.variations td.value{display:block}
.summary table.variations select{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.woocommerce-variation-add-to-cart{margin-top:6px}
.woocommerce-variation-add-to-cart .reset_variations{display:inline-block;margin:10px 0 0;font-size:13px;color:var(--muted);text-decoration:underline}
.woocommerce-variation{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:14px}
.woocommerce-variation .price{font-size:20px!important;margin:0!important}
.woocommerce-variation-availability{margin-top:6px;font-size:13px;color:var(--muted)}

/* Swatches — progressive enhancement rendered by JS over the hidden <select> */
.agencyfic-swatch-row{display:flex;flex-wrap:wrap;gap:10px}
.agencyfic-swatch{
  min-width:46px;height:46px;padding:0 16px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);color:var(--text);font-weight:700;font-size:14px;cursor:pointer;
  transition:.2s ease;font-family:inherit;
}
.agencyfic-swatch:hover{border-color:rgba(255,255,255,.32)}
.agencyfic-swatch.is-selected{border-color:var(--primary-2);background:linear-gradient(135deg, rgba(124,240,255,.2), rgba(142,167,255,.12));box-shadow:0 0 0 2px rgba(124,240,255,.16), inset 0 1px 0 rgba(255,255,255,.14)}
.agencyfic-swatch.is-disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.agencyfic-swatch.agencyfic-swatch-color{width:44px;min-width:44px;height:44px;padding:0;border-radius:999px;border-width:3px;border-color:transparent;background:rgba(255,255,255,.06)}
.agencyfic-swatch.agencyfic-swatch-color.is-selected{border-color:var(--primary-2)}
.agencyfic-swatch.agencyfic-swatch-color span{width:100%;height:100%;border-radius:999px;display:block;border:1px solid rgba(255,255,255,.35)}

/* Quantity stepper */
.quantity.agencyfic-quantity{display:inline-flex;align-items:stretch;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);height:46px}
.quantity.agencyfic-quantity .qty-btn{
  width:42px;border:none;background:transparent;color:var(--text);font-size:19px;font-weight:700;cursor:pointer;display:grid;place-items:center;
  transition:.2s ease;font-family:inherit;line-height:1;padding:0;
}
.quantity.agencyfic-quantity .qty-btn:hover{background:rgba(255,255,255,.08)}
.quantity.agencyfic-quantity .qty-btn:active{transform:scale(.9)}
.quantity.agencyfic-quantity input.qty{
  width:52px!important;text-align:center;border:none!important;
  border-left:1px solid rgba(255,255,255,.12)!important;border-right:1px solid rgba(255,255,255,.12)!important;
  border-radius:0!important;background:transparent!important;padding:0!important;font-weight:800;height:100%;-moz-appearance:textfield;
}
.quantity.agencyfic-quantity input.qty::-webkit-outer-spin-button,
.quantity.agencyfic-quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Quantity is hidden on the single product page: every product here is a
   digital product, so there's no need to choose a quantity — the hidden
   input still submits its default value of 1, cart math is unaffected. */
body.single-product .quantity.agencyfic-quantity{display:none!important}

/* Add-to-cart / Buy-now row */
form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:4px}
form.cart .agencyfic-cta-row{display:flex;align-items:stretch;gap:12px;flex:1 1 260px;min-width:240px}
/* Both buttons share one box model so they always render as two equal-size,
   equally-spaced, perfectly aligned pills — regardless of the different
   underlying CSS classes each button carries (WooCommerce's own
   .single_add_to_cart_button vs. the theme's custom .buy-now-btn). */
form.cart .agencyfic-cta-row .single_add_to_cart_button,
form.cart .agencyfic-cta-row .buy-now-btn{
  flex:1 1 0;width:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  height:50px;line-height:1.1;
  margin:0;padding:0 20px;border-radius:16px;
  font-size:15px;font-weight:800;
  text-align:center;white-space:nowrap;
}

/* Meta / SKU / categories */
.product_meta{margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:var(--muted);display:grid;gap:6px}
.product_meta a{color:var(--muted);text-decoration:underline}

/* Tabs panel */
.woocommerce-Tabs-panel table.shop_attributes{width:100%;border-collapse:collapse}
.woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce-Tabs-panel table.shop_attributes td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:transparent}
.woocommerce-Tabs-panel table.shop_attributes th{width:180px;font-weight:800;color:var(--text)}

/* Review text truncation ("...Read More") */
.review-card-body.agencyfic-truncated{position:relative}
.review-card-body .agencyfic-read-more{color:var(--primary-2);font-weight:800;cursor:pointer;white-space:nowrap}

@media (max-width:900px){
  .woocommerce div.product{grid-template-columns:1fr}
  .woocommerce div.product > div.summary{grid-column:1;grid-row:2}

  /* On the product page the sticky Add to Cart / Buy Now bar replaces the
     general site bottom nav (rather than stacking on top of it), so the
     visitor always has one clear, uncluttered action bar at the bottom. */
  body.single-product .mobile-nav{display:none!important}
  body.single-product{padding-bottom:96px}
  /* backdrop-filter / transform on ANY ancestor creates a new containing
     block, which would otherwise trap our position:fixed CTA bar inside
     that ancestor instead of the viewport — strip it from every ancestor
     between the bar and <body>, not just the outer product card. */
  body.single-product .agencyfic-product-card,
  body.single-product .woocommerce div.product,
  body.single-product .summary.entry-summary{
    transform:none!important;filter:none!important;perspective:none!important;will-change:auto!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  body.single-product .agencyfic-product-card{ padding:22px!important; }
  form.cart{flex-direction:column;align-items:stretch;gap:14px;position:static}
  form.cart .agencyfic-cta-row{
    position:fixed!important;left:0;right:0;bottom:0;top:auto;z-index:1500;margin:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(9,13,24,.94);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
    border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -14px 34px rgba(0,0,0,.35);
    pointer-events:auto;visibility:visible!important;opacity:1!important;
  }
  /* Keep the bar visually stable and tappable even while a button is in its
     "adding…" loading state — never let it collapse or disappear mid-tap. */
  form.cart .agencyfic-cta-row .single_add_to_cart_button,
  form.cart .agencyfic-cta-row .buy-now-btn{
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  form.cart .agencyfic-cta-row .single_add_to_cart_button.is-loading,
  form.cart .agencyfic-cta-row .buy-now-btn.is-loading{opacity:.7;pointer-events:none}
  body.single-product .whatsapp{bottom:104px;z-index:1400}
  body.single-product .notif{bottom:98px}
}

@media (max-width:720px){
  .agencyfic-swatch{min-width:42px;height:42px;padding:0 12px;font-size:13px}
}

/* ===================== Customer Reviews Auto-Slider ===================== */
.agencyfic-reviews-slider{margin-top:28px;padding:28px;overflow:hidden}
.agencyfic-reviews-slider-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.agencyfic-reviews-slider-head h3{margin:0;font-size:19px}
.agencyfic-reviews-slider-controls{display:flex;gap:8px}
.agencyfic-reviews-nav{
  width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:var(--text);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.2s ease;
}
.agencyfic-reviews-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.agencyfic-reviews-slider-track{position:relative;min-height:150px}
.agencyfic-reviews-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(16px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;
}
.agencyfic-reviews-slide.is-active{position:relative;opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}
.agencyfic-reviews-stars{color:var(--warning);font-size:16px;letter-spacing:2px;margin-bottom:10px}
.agencyfic-reviews-text{font-size:16px;line-height:1.7;color:var(--text);margin:0 0 18px;font-style:italic}
.agencyfic-reviews-author{display:flex;align-items:center;gap:12px}
.agencyfic-reviews-avatar{
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
  font-weight:900;color:#0b0f18;font-size:17px;flex:none;
}
.agencyfic-reviews-author strong{display:block;font-size:14px;color:var(--text)}
.agencyfic-reviews-author span{display:block;font-size:12.5px;color:var(--muted)}
.agencyfic-reviews-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.agencyfic-reviews-dot{
  width:8px;height:8px;border-radius:999px;border:none;background:rgba(255,255,255,.22);
  cursor:pointer;padding:0;transition:.2s ease;
}
.agencyfic-reviews-dot.is-active{width:22px;border-radius:999px;background:var(--primary-2)}
@media (max-width:720px){
  .agencyfic-reviews-slider{padding:20px}
  .agencyfic-reviews-slider-head h3{font-size:16px}
  .agencyfic-reviews-text{font-size:14.5px}
}

/* ===================== Checkout: editable quantity stepper ===================== */
.agencyfic-checkout-review-table .product-quantity-col{width:132px;text-align:center}
.agencyfic-checkout-review-table .quantity.agencyfic-quantity{height:38px;margin:0 auto}
.agencyfic-checkout-review-table .quantity.agencyfic-quantity .qty-btn{width:34px;font-size:15px}
.agencyfic-checkout-review-table .quantity.agencyfic-quantity input.qty{width:38px;padding:0!important}

/* FIX: tfoot rows (Subtotal / Total) inherited the generic
   `table.shop_table th,td{background;border}` rule meant for the line-item
   grid above, which gave the label <th> and the value <td colspan="2"> two
   separate boxes of mismatched width sitting side by side — reading as
   disconnected/misaligned rather than "this number belongs to this row".
   This clears that per-cell box and treats each row as one paired unit:
   label left, value right, one shared underline per row. */
.agencyfic-checkout-review-table tfoot th,
.agencyfic-checkout-review-table tfoot td{
  background:transparent!important;border:none!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:12px 4px!important;vertical-align:middle;
}
.agencyfic-checkout-review-table tfoot th{text-align:left;font-weight:600;color:var(--muted)}
.agencyfic-checkout-review-table tfoot td{text-align:right;font-weight:800;color:var(--text)}
.agencyfic-checkout-review-table tfoot tr.order-total th,
.agencyfic-checkout-review-table tfoot tr.order-total td{
  border-bottom:none!important;padding-top:16px!important;font-size:18px;font-weight:900;
}
.agencyfic-checkout-review-table tfoot tr.order-total td{color:var(--primary-2)}
@media (max-width:720px){
  .agencyfic-checkout-review-table thead{display:none}
  .agencyfic-checkout-review-table,.agencyfic-checkout-review-table tbody,.agencyfic-checkout-review-table tr,.agencyfic-checkout-review-table td{display:block;width:100%}
  .agencyfic-checkout-review-table tr.cart_item{padding:12px;margin-bottom:10px}
  .agencyfic-checkout-review-table td{border:none!important;background:transparent!important;padding:6px 0!important}
  .agencyfic-checkout-review-table .product-quantity-col{width:auto;text-align:left}
  .agencyfic-checkout-review-table .quantity.agencyfic-quantity{margin:6px 0 0}
  .agencyfic-checkout-review-table tfoot th,.agencyfic-checkout-review-table tfoot td{display:table-cell;width:auto}
  .agencyfic-checkout-review-table tfoot tr{display:table;width:100%;table-layout:fixed}
}

/* ===================== WooCommerce Cart Page (classic shortcode table) ===================== */
/* IMPORTANT CONTEXT: inc/woocommerce.php disables WooCommerce's default
   frontend stylesheet entirely (`add_filter('woocommerce_enqueue_styles',
   '__return_empty_array')`), which is what strips ALL of WooCommerce's own
   responsive table behaviour (the mobile column-stacking + data-title labels
   that normally come from woocommerce.css's ".shop_table_responsive" rules).
   The theme's CSS previously only re-implemented that styling for the
   Cart/Checkout BLOCKS markup (.wc-block-cart-items etc., below) — the
   classic shortcode cart table (table.shop_table.cart, produced by
   woocommerce/cart/cart.php) was left with only the bare generic
   `table.shop_table` rule (fixed padding, no responsive handling at all),
   so on a phone screen it rendered as a literal 6-column table too wide for
   the viewport — hence "Quantity" running off the right edge. Everything
   below gives that classic table its own full desktop + mobile treatment,
   matching the visual language already used for the blocks version. */

.woocommerce-cart-form,
table.shop_table.cart,
table.shop_table.cart *{box-sizing:border-box}

table.shop_table.cart{
  width:100%;max-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;
}
table.shop_table.cart thead th{
  background:transparent!important;border:none!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
  padding:0 10px 12px!important;text-align:left;
  color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
}
table.shop_table.cart tbody tr.cart_item{border-bottom:1px solid rgba(255,255,255,.08)}
table.shop_table.cart td{
  background:transparent!important;border:none!important;
  padding:18px 10px!important;vertical-align:middle;color:var(--text);min-width:0;
}
table.shop_table.cart td.product-remove{width:34px;padding-right:0!important;text-align:center}
table.shop_table.cart td.product-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;
  background:rgba(255,122,150,.12);color:var(--danger)!important;
  font-size:18px;line-height:1;text-decoration:none;transition:.2s ease;
}
table.shop_table.cart td.product-remove a.remove:hover{background:rgba(255,122,150,.24);transform:scale(1.08)}
table.shop_table.cart td.product-thumbnail{width:84px}
table.shop_table.cart td.product-thumbnail img{
  width:72px;height:72px;object-fit:cover;border-radius:14px;
}
table.shop_table.cart td.product-name{font-weight:800;overflow-wrap:anywhere}
table.shop_table.cart td.product-name a{color:var(--text);font-weight:800}
table.shop_table.cart td.product-name a:hover{color:var(--primary-2)}
table.shop_table.cart td.product-name dl.variation{margin:6px 0 0;font-size:12.5px;color:var(--muted);overflow:hidden}
table.shop_table.cart td.product-name dl.variation dt,
table.shop_table.cart td.product-name dl.variation dd,
table.shop_table.cart td.product-name dl.variation dd p{display:inline;margin:0}
table.shop_table.cart td.product-price,
table.shop_table.cart td.product-subtotal{white-space:nowrap;font-weight:700}
table.shop_table.cart td.product-price del,
table.shop_table.cart td.product-subtotal del{color:var(--muted-2);font-weight:500;margin-right:6px}
table.shop_table.cart td.product-price ins,
table.shop_table.cart td.product-subtotal ins{text-decoration:none;color:var(--text)}
table.shop_table.cart td.product-subtotal{text-align:right;font-weight:900}
table.shop_table.cart td.product-quantity .quantity.agencyfic-quantity{height:42px}

/* Coupon + Update cart row (a single <tr><td colspan="6" class="actions">) */
table.shop_table.cart td.actions{
  border-top:1px solid rgba(255,255,255,.08)!important;
  padding:22px 10px 6px!important;
}
table.shop_table.cart .coupon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
table.shop_table.cart .coupon label{display:none}
table.shop_table.cart .coupon input#coupon_code{flex:1 1 220px;min-width:0;height:46px;padding:0 14px!important}
table.shop_table.cart .coupon .button,
table.shop_table.cart td.actions>button[name="update_cart"]{flex:0 0 auto}

@media (max-width:900px){
  table.shop_table.cart td{padding:14px 8px!important}
  table.shop_table.cart td.product-thumbnail{width:64px}
  table.shop_table.cart td.product-thumbnail img{width:56px;height:56px}
}

/* Mobile: turn each cart row into a stacked card instead of a squeezed
   table row. Price/Quantity/Subtotal cells already ship with a data-title
   attribute from WooCommerce core's cart.php template (e.g.
   data-title="Price"), so `content:attr(data-title)` gives each value a
   clear label with no extra markup needed.
   Breakpoint widened from 720px to 860px, and thead is hidden four
   different ways at once (display, height, overflow, visibility), as
   defense-in-depth in case any other CSS on the live site — a caching
   layer serving a stale file, a plugin, page builder, etc. — was
   partially fighting a single display:none rule. */
@media (max-width:860px){
  table.shop_table.cart thead{
    display:none!important;height:0!important;overflow:hidden!important;visibility:hidden!important;
  }
  table.shop_table.cart,
  table.shop_table.cart tbody,
  table.shop_table.cart tr,
  table.shop_table.cart th,
  table.shop_table.cart td{display:block!important;width:100%}

  table.shop_table.cart tr.cart_item{
    position:relative;display:flex!important;flex-wrap:wrap;
    padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  table.shop_table.cart tr.cart_item:last-of-type{border-bottom:none}
  table.shop_table.cart tr.cart_item td{padding:0!important}

  table.shop_table.cart td.product-remove{
    order:1;position:absolute;top:0;right:0;width:auto;
  }
  table.shop_table.cart td.product-thumbnail{order:2;flex:0 0 60px;width:60px}
  table.shop_table.cart td.product-thumbnail img{width:56px;height:56px}
  table.shop_table.cart td.product-name{
    order:3;flex:1 1 calc(100% - 72px);align-self:center;
    padding-left:12px!important;padding-right:30px!important;font-size:14.5px;
  }
  table.shop_table.cart td.product-price,
  table.shop_table.cart td.product-quantity,
  table.shop_table.cart td.product-subtotal{
    order:4;flex:1 1 0;min-width:0;margin-top:12px;font-size:14px;
  }
  table.shop_table.cart td.product-price::before,
  table.shop_table.cart td.product-subtotal::before{
    content:attr(data-title);display:block;margin-bottom:4px;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted-2);font-weight:800;
  }
  table.shop_table.cart td.product-quantity{order:5}
  table.shop_table.cart td.product-quantity .quantity.agencyfic-quantity{height:36px}
  table.shop_table.cart td.product-quantity .qty-btn{width:30px;font-size:14px}
  table.shop_table.cart td.product-quantity input.qty{width:30px}
  table.shop_table.cart td.product-subtotal{order:6;text-align:right}

  table.shop_table.cart td.actions{padding:18px 0 0!important}
  table.shop_table.cart .coupon{flex-direction:column;align-items:stretch}
  table.shop_table.cart .coupon input#coupon_code,
  table.shop_table.cart .coupon .button,
  table.shop_table.cart td.actions>button[name="update_cart"]{width:100%}
}

/* FIX: order-received ("Order received") and order-pay pages — the
   downloads table and the order-details table are plain multi-column
   WooCommerce core tables with no responsive handling (they never got
   the same treatment as table.shop_table.cart above), so on narrow
   screens they just kept their full desktop column width and pushed
   the "Download" column off the edge of the viewport instead of
   wrapping. WooCommerce core adds a data-title attribute to every td in
   both tables, so the same content:attr(data-title) label trick used
   for the cart table works here without any template changes. */
@media (max-width:680px){
  table.shop_table.order_details,
  table.shop_table.order_downloads,
  table.shop_table.my_account_orders,
  table.woocommerce-table--order-details,
  table.woocommerce-table--order-downloads{
    display:block;width:100%;max-width:100%;border-spacing:0;
  }
  table.shop_table.order_details thead,
  table.shop_table.order_downloads thead,
  table.shop_table.my_account_orders thead{
    display:none!important;height:0!important;overflow:hidden!important;visibility:hidden!important;
  }
  table.shop_table.order_details tbody,
  table.shop_table.order_details tr,
  table.shop_table.order_details th,
  table.shop_table.order_details td,
  table.shop_table.order_downloads tbody,
  table.shop_table.order_downloads tr,
  table.shop_table.order_downloads th,
  table.shop_table.order_downloads td,
  table.shop_table.my_account_orders tbody,
  table.shop_table.my_account_orders tr,
  table.shop_table.my_account_orders th,
  table.shop_table.my_account_orders td{
    display:block!important;width:100%;box-sizing:border-box;
  }
  table.shop_table.order_details tr,
  table.shop_table.order_downloads tr,
  table.shop_table.my_account_orders tr{
    margin-bottom:12px;padding:6px 14px;border-radius:16px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  }
  table.shop_table.order_details tr:last-child,
  table.shop_table.order_downloads tr:last-child,
  table.shop_table.my_account_orders tr:last-child{margin-bottom:0}
  table.shop_table.order_details td,
  table.shop_table.order_downloads td,
  table.shop_table.my_account_orders td{
    display:flex!important;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 0!important;background:transparent!important;border:none!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;text-align:right;overflow-wrap:anywhere;
  }
  table.shop_table.order_details td:last-child,
  table.shop_table.order_downloads td:last-child,
  table.shop_table.my_account_orders td:last-child{border-bottom:none!important}
  table.shop_table.order_details td::before,
  table.shop_table.order_downloads td::before,
  table.shop_table.my_account_orders td::before{
    content:attr(data-title);flex:0 0 auto;text-align:left;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted-2);font-weight:800;
  }
  table.shop_table.order_downloads td.download-file a.woocommerce-MyAccount-downloads-file,
  table.shop_table.order_downloads td a.button{margin:0}
}

/* ===================== Cart totals / collaterals sidebar ===================== */
.cart-collaterals{margin-top:30px;display:flow-root}
.cart_totals{
  max-width:420px;margin-left:auto;padding:24px;border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), rgba(12,16,26,.62);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.10);
}
.cart_totals h2{margin:0 0 16px;font-size:20px}
.cart_totals table.shop_table{width:100%;border-collapse:collapse;background:transparent}
.cart_totals table.shop_table tr th,
.cart_totals table.shop_table tr td{
  background:transparent!important;border:none!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:12px 0!important;text-align:left;font-weight:600;color:var(--muted);
}
.cart_totals table.shop_table tr td{text-align:right;color:var(--text);font-weight:700}
.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.order-total td{
  border-bottom:none!important;padding-top:16px!important;font-size:19px;font-weight:900;color:var(--text);
}
.cart_totals table.shop_table tr.order-total td{color:var(--primary-2)}
.wc-proceed-to-checkout{margin-top:18px}
.wc-proceed-to-checkout a.checkout-button{width:100%;display:flex;justify-content:center}
.woocommerce-shipping-calculator{margin-top:4px}
.woocommerce-shipping-calculator .shipping-calculator-button{
  color:var(--primary-2)!important;font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;
}
.woocommerce-shipping-calculator .shipping-calculator-form{margin-top:12px;display:grid;gap:10px}

@media (max-width:900px){
  .cart_totals{max-width:100%;margin-left:0}
}

/* Cross-sells ("You may be interested in...") on the cart page */
/* FIX: cross-sells reused whatever grid-N class the shop-grid column
   filter assigned it (grid-2 minimum), and the mobile shop-grid rule
   force-keeps 2 columns even on phones — great for a full shop grid, but
   here it squeezed the one-or-two recommended items into narrow half-width
   cards with cramped, misaligned-looking content. Cross-sells now get
   their own sizing: real cards (240–320px), as many per row as actually
   fit, instead of a fixed column count. */
.cross-sells{margin-top:34px}
.cross-sells h2{font-size:20px;margin:0 0 16px}
.cross-sells ul.products.grid-2,
.cross-sells ul.products.grid-3,
.cross-sells ul.products.grid-4{
  grid-template-columns:repeat(auto-fit,minmax(240px,300px))!important;
  justify-content:flex-start;gap:18px;
}
@media (max-width:480px){
  .cross-sells ul.products.grid-2,
  .cross-sells ul.products.grid-3,
  .cross-sells ul.products.grid-4{
    grid-template-columns:minmax(0,340px)!important;
  }
}

/* ===================== WooCommerce Cart & Checkout BLOCKS ===================== */
/* The Cart/Checkout page content sits inside the same ".card.glass" wrapper
   every static page uses. That wrapper uses overflow:hidden + backdrop-filter,
   which is fine for plain text pages, but the Cart/Checkout blocks measure
   their OWN container width to decide their responsive (mobile) layout, and
   backdrop-filter creates a new containing block that traps their fixed-
   position "Proceed to Checkout" bar inside the card instead of the screen.
   Both of those together are what was causing the cut-off prices / broken
   alignment on the Cart page — so those two pages get an unclipped wrapper. */
body.woocommerce-cart .card.glass,
body.woocommerce-checkout .card.glass{
  overflow:visible;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding:22px!important;
}
body.woocommerce-cart,
body.woocommerce-checkout{overflow-x:hidden}

.wc-block-cart,.wc-block-checkout{color:var(--text);max-width:100%}

/* Checkout BLOCK form fields (Contact info / Billing address / etc.)
   These fields keep WooCommerce's native white input background, but they
   were inheriting `color:var(--text)` (near-white, #f7f9ff) from the
   .wc-block-checkout rule above. That made both the typed-in text and the
   floating "hint" label (e.g. "Email address", "First name", "ZIP Code")
   almost invisible against the white field background. Forcing a dark grey
   here fixes readability without touching the dark glass UI elsewhere. */
.wc-block-checkout input[type=text],
.wc-block-checkout input[type=email],
.wc-block-checkout input[type=tel],
.wc-block-checkout input[type=number],
.wc-block-checkout input[type=search],
.wc-block-checkout .wc-block-components-combobox-control input,
.wc-block-checkout select,
.wc-block-checkout textarea{
  color:#333844!important;
}
/* FIX: the rule above covers typed-in text and the floating hint label
   (targeted below), but not the browser's native ::placeholder pseudo-
   element some fields also render before the floating label activates.
   Without this, that placeholder text falls back to a very pale default
   color that's nearly invisible on the white field background. Setting it
   explicitly — and forcing opacity:1, since some browsers dim placeholder
   text by default — keeps every state of these fields readable. */
.wc-block-checkout input[type=text]::placeholder,
.wc-block-checkout input[type=email]::placeholder,
.wc-block-checkout input[type=tel]::placeholder,
.wc-block-checkout input[type=number]::placeholder,
.wc-block-checkout input[type=search]::placeholder,
.wc-block-checkout textarea::placeholder{
  color:#6b7280!important;
  opacity:1!important;
}
.wc-block-checkout [class*="wc-block-components"] label,
.wc-block-checkout [class*="wc-block-components"] label span{
  color:#6b7280!important;
  opacity:1!important;
}

/* box-sizing + min-width:0 below is the actual fix for the cut-off price /
   "Save ₹x" badge on the cart page: flex/grid children default to a min
   width equal to their content's natural (nowrap) size, so once the row
   didn't have room for image + name + price side by side, the price/badge
   simply got pushed past the edge of the phone screen instead of wrapping.
   Forcing border-box sizing and min-width:0 lets everything shrink/wrap to
   fit its column instead of overflowing. */
.wc-block-cart-items,.wc-block-cart-items *{box-sizing:border-box}
table.wc-block-cart-items{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed}
.wc-block-cart-items__header{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
table.wc-block-cart-items th{background:transparent!important;border:none!important;border-bottom:1px solid rgba(255,255,255,.1)!important;padding:0 0 10px!important}
.wc-block-cart-items__row{border-bottom:1px solid rgba(255,255,255,.08);min-width:0}
table.wc-block-cart-items td{background:transparent!important;border:none!important;padding:16px 8px!important;vertical-align:top;min-width:0}
.wc-block-cart-item__image{width:88px}
.wc-block-cart-item__image img{border-radius:14px;object-fit:cover;max-width:100%;height:auto}
.wc-block-cart-item__product{min-width:0}
.wc-block-components-product-name{color:var(--text)!important;font-weight:800;overflow-wrap:anywhere}
.wc-block-components-product-metadata{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.wc-block-cart-item__remove-link{color:var(--danger)!important}
.wc-block-cart-item__total{width:100px;min-width:0;text-align:right;padding-right:2px!important}
.wc-block-cart-item__total,.wc-block-cart-item__total *{color:var(--text)}
.wc-block-cart-item__total-price-and-sale-badge-wrapper{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-wrap:wrap;max-width:100%;
}
.wc-block-components-product-price{overflow-wrap:anywhere;text-align:right;max-width:100%}
.wc-block-components-sale-badge{
  background:rgba(67,230,176,.14)!important;color:#8ef2d2!important;
  border:1px solid rgba(67,230,176,.25)!important;border-radius:999px!important;font-weight:800!important;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.wc-block-components-product-price del{color:var(--muted-2)}
.wc-block-components-product-price ins{color:var(--text);text-decoration:none}

@media (max-width:480px){
  .wc-block-cart-item__image{width:68px}
  .wc-block-cart-item__total{width:84px}
  table.wc-block-cart-items td{padding:14px 6px!important}
  .wc-block-components-sale-badge{font-size:11px!important;padding:3px 9px!important}
  .wc-block-components-product-price{font-size:15px}
}

/* Quantity stepper — same visual language as the classic ".qty-btn" stepper */
.wc-block-components-quantity-selector{
  display:inline-flex;align-items:stretch;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  overflow:hidden;background:rgba(255,255,255,.04);height:42px;
}
.wc-block-components-quantity-selector__button{
  width:38px;border:none!important;background:transparent!important;color:var(--text)!important;
  font-size:17px;font-weight:700;cursor:pointer;box-shadow:none!important;
}
.wc-block-components-quantity-selector__button:hover{background:rgba(255,255,255,.08)!important}
.wc-block-components-quantity-selector__input{
  background:transparent!important;border:none!important;color:var(--text)!important;
  border-left:1px solid rgba(255,255,255,.12)!important;border-right:1px solid rgba(255,255,255,.12)!important;
  width:46px!important;text-align:center;font-weight:800;height:100%;padding:0!important;
}

/* Totals / order-summary sidebar card */
.wc-block-components-panel,.wc-block-cart__totals-title,.wc-block-components-totals-item{color:var(--text)}
.wc-block-components-totals-item,.wc-block-components-totals-footer-item{border-color:rgba(255,255,255,.1)!important}
.wc-block-components-totals-coupon-link,.wc-block-components-panel__button{color:var(--primary-2)!important}
.wc-block-components-totals-coupon__input input,.wc-block-components-totals-coupon__input .wc-block-components-text-input input{width:100%}

.wc-block-components-button{
  border:none!important;color:#08101f!important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(214,221,255,.72) 26%, rgba(124,240,255,.88) 62%, rgba(255,255,255,.92))!important;
  border-radius:16px!important;font-weight:800!important;
  box-shadow:0 18px 36px rgba(124,240,255,.18), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.wc-block-components-button:hover{transform:translateY(-2px)}

/* Mobile sticky "Proceed to Checkout" bar (default is a plain white strip,
   which no longer fits once its container isn't backdrop-filtered anymore). */
.wc-block-cart__submit-container{
  background:rgba(9,13,24,.94)!important;
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
}
.wc-block-cart__submit-container:before{color:rgba(0,0,0,.35)!important}

/* ===================== Checkout BLOCK: injected quantity stepper ===================== */
.wc-block-components-order-summary-item .agencyfic-checkout-block-qty{
  height:34px;margin-top:8px;width:max-content;
}
.wc-block-components-order-summary-item .agencyfic-checkout-block-qty .qty-btn{width:30px;font-size:14px}
.wc-block-components-order-summary-item .agencyfic-checkout-block-qty input.qty{width:34px;padding:0!important}
.wc-block-components-order-summary-item .agencyfic-checkout-block-qty.is-updating{opacity:.55;pointer-events:none}

/* ===================== Contact page: WhatsApp Quick Enquiry form ===================== */
.wa-form{margin-top:4px}
.wa-form .form-row{display:flex;gap:12px;margin-bottom:14px}
.wa-form .field{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.wa-form .full{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.wa-form label{font-size:13px;font-weight:700;color:var(--muted)}
.wa-form textarea{min-height:100px;resize:vertical}

.service-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.service-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:var(--muted);font-weight:700;font-size:13px;font-family:inherit;
  cursor:pointer;transition:.2s ease;
}
.service-chip:hover{border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.service-chip .check{opacity:0;font-size:12px;transition:.2s ease}
.service-chip.selected{
  background:linear-gradient(135deg, rgba(37,211,102,.24), rgba(37,211,102,.08));
  border-color:rgba(37,211,102,.55);color:#eafff2;
}
.service-chip.selected .check{opacity:1}

.btn-whatsapp{
  width:100%;border:none!important;
  background:linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark))!important;
  color:#fff!important;
  box-shadow:0 18px 36px rgba(37,211,102,.28), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn-whatsapp:hover{transform:translateY(-2px)}

.wa-sent-badge{
  display:inline-flex;gap:8px;align-items:center;
  background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);
  padding:8px 14px;border-radius:999px;color:#eafff2;font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;margin-top:12px;transition:opacity .3s ease;
}
.wa-sent-badge.show{opacity:1}

.alt-link{display:block;text-align:center;margin-top:12px;color:var(--muted);font-weight:700;font-size:13px;text-decoration:underline}
.alt-link:hover{color:var(--text)}

@media(max-width:600px){
  .wa-form .form-row{flex-direction:column;gap:14px}
  .btn-whatsapp{padding:0 16px;height:52px;font-size:16px}
}

/* ===================== My Account: Login / Register ===================== */
/* Two glass cards side by side (Login | Register) instead of WooCommerce's
   default unstyled 2-column table markup — this is what makes the Register
   form clearly visible/usable instead of blending into an unstyled page. */
.agencyfic-login-register{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin:6px 0 30px}
.agencyfic-login-register--solo{grid-template-columns:minmax(0,480px);justify-content:center}
.agencyfic-auth-card .woocommerce-form-row{margin:0 0 16px}
.agencyfic-auth-card label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.agencyfic-auth-card .required{color:var(--danger, #ff7a96)}
.agencyfic-auth-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.agencyfic-auth-actions .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.agencyfic-auth-actions .woocommerce-form__input-checkbox{width:auto}
.agencyfic-auth-card .woocommerce-form-login__submit,
.agencyfic-auth-card .woocommerce-form-register__submit{width:100%;height:48px}
.agencyfic-auth-card .woocommerce-LostPassword{margin-top:16px;font-size:13px;text-align:center}
.agencyfic-auth-card .woocommerce-LostPassword a{color:var(--primary-2)}
.agencyfic-auth-card p:not(.woocommerce-form-row):not(.form-row){color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 16px}

@media(max-width:820px){
  .agencyfic-login-register{grid-template-columns:1fr}
}

/* ===================== Account: Password fields ===================== */
/* Show/hide "eye" toggle + a much simpler strength meter for the
   Register and Set-password (form-reset-password.php) forms. The old
   default WooCommerce meter required 12+ mixed-case/number/symbol
   characters before it stopped calling a password "weak" and disabled
   the submit button below that; here 6 characters is always enough to
   submit — character variety only moves the label from Weak to Medium
   to Hard, it's shown for information, never enforced. See "Account
   password fields" in assets/js/theme.js for the logic behind this. */
/* FIX (this revision): every earlier version of this fix (contrast bump,
   min-height on the wrapper, z-index pinning on the input) kept the eye
   button as position:absolute floating ON TOP of the input, with the two
   elements sharing the exact same rectangle of screen space and relying
   on z-index/stacking-context rules to sort out who receives a click.
   That is fragile by construction — reported live behaviour (username
   field works, password field next to it does not react to clicks at
   all) is exactly what happens when an ancestor's backdrop-filter/
   transform/isolation creates a compositing layer that reorders paint
   order in a way z-index alone can't fix, and it's browser/GPU dependent
   so it can pass in one browser and fail in another.
   The real fix is to stop overlapping them. This turns the wrapper into
   a flex row: the <input> and the toggle <button> are genuine siblings
   sitting side-by-side, each with their own real, non-overlapping box.
   There is no absolute positioning left anywhere in this block, so there
   is no rectangle of the input that a click could ever be intercepted
   away from — the button only ever occupies its own 44px-wide flex slot
   at the end of the row. */
.agencyfic-password-wrap{
  display:flex;align-items:stretch;
  min-height:46px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.09);
}
.agencyfic-password-wrap input[type=password],
.agencyfic-password-wrap input[type=text]{
  display:block!important;
  /* FIX: the eye icon showed up on the LEFT with a big unlabeled blank
     box to its right — that's what happens when this flex row's visual
     order doesn't match the input-then-button order the templates write
     (most likely a cached/older copy of the account page HTML still
     being served — see agencyfic_no_cache_on_account_pages() in
     inc/account-reliability.php). Rather than depend on document order
     at all, both the input and the toggle now get an explicit CSS
     `order` — order:1 for the input, order:2 for the toggle in the rule
     below — so the field is always the big left/typing area and the eye
     is always the small slot on the right, regardless of what markup
     order an old cached page happens to serve. */
  order:1;
  box-sizing:border-box!important;
  flex:1 1 0%!important;
  width:auto!important;
  min-width:0!important; /* lets a flex item shrink below its content size instead of overflowing the row */
  min-height:44px!important;
  line-height:normal!important;
  padding:12px 14px!important;
  margin:0!important;
  border:none!important;
  background:transparent!important;
  color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  cursor:text!important;
  -webkit-user-select:text!important;
  user-select:text!important;
}
/* FIX: with no override, Chrome/Edge/Safari apply their OWN autofill
   styling (a pale yellow/white background + forced dark text) the moment
   a saved username/password is suggested for this field — on this dark
   glass theme that reads as "the box turned white and my typing
   disappeared" (the forced text colour can end up invisible against
   whichever background wins the fight), which looks exactly like a
   non-functioning field even though the browser is still recording every
   keystroke. This repaints the autofilled state to match the theme instead
   of fighting it, and keeps the text visibly white. */
.agencyfic-password-wrap input:-webkit-autofill,
.agencyfic-password-wrap input:-webkit-autofill:hover,
.agencyfic-password-wrap input:-webkit-autofill:focus,
.agencyfic-password-wrap input:-webkit-autofill:active,
.woocommerce-form input:-webkit-autofill,
.woocommerce-form input:-webkit-autofill:hover,
.woocommerce-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px rgba(30,34,48,.95) inset!important;
  box-shadow:0 0 0 1000px rgba(30,34,48,.95) inset!important;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
.agencyfic-password-wrap:focus-within{
  outline:2px solid var(--primary-2);
  outline-offset:1px;
}

/* FIX: on Edge/Safari/some Android browsers, the OS/browser draws its OWN
   built-in "reveal password" control (a native eye icon, or — before its
   graphic finishes rendering on a dark background — a plain grey/white box)
   right on top of the input. That native control is what showed up as a
   stray "white rectangle" button next to (or instead of) our own eye icon.
   It isn't part of our markup, so it can only be switched off with CSS —
   there is no JS handle for it. This block turns it off everywhere so the
   only button anyone ever sees is ours. */
.agencyfic-password-wrap input[type=password]::-ms-reveal,
.agencyfic-password-wrap input[type=password]::-ms-clear,
.agencyfic-password-wrap input[type=text]::-ms-reveal,
.agencyfic-password-wrap input[type=text]::-ms-clear{
  display:none;width:0;height:0;
}
.agencyfic-password-wrap input::-webkit-textfield-decoration-container{
  visibility:hidden;
}
.agencyfic-password-wrap input::-webkit-credentials-auto-fill-button,
.agencyfic-password-wrap input::-webkit-strong-password-auto-fill-button,
.agencyfic-password-wrap input::-webkit-caps-lock-indicator{
  display:none!important;visibility:hidden;pointer-events:none;
  position:absolute;right:0;
}
/* Belt-and-suspenders: if anything other than the input and our own toggle
   ever ends up inside the wrap (a stray native/plugin-injected control),
   keep it hidden so it can never show up as a second button or steal a
   flex slot from the two real children. */
.agencyfic-password-wrap > *:not(input):not(.agencyfic-password-toggle){
  display:none!important;
}

.agencyfic-password-toggle{
  position:static; /* no longer floats over the input — see note above */
  order:2; /* always the right-hand slot — see the order:1 note on the input above */
  flex:0 0 44px;
  margin:0;width:44px;height:auto;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;outline:none;border-radius:0;
  color:var(--muted);cursor:pointer;padding:0;line-height:0;font-size:0;
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:.2s ease;
  /* FIX: theme.js injects the eye SVG via innerHTML after the page loads,
     so on a slow connection (or if the script fails to load at all) the
     toggle briefly — or permanently — rendered as an empty box with no
     icon, which is what "not showing properly" looked like. This CSS
     background-image is a static eye icon that's visible immediately and
     with no JS dependency; once theme.js runs it draws its own SVG on top
     (identical glyph, just interactive), so there's no visible change,
     only a guaranteed fallback if JS is slow/blocked. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%23b8c2db' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5 5 12 5s10.5 7 10.5 7-3.5 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
}
.agencyfic-password-toggle:hover,.agencyfic-password-toggle:focus-visible{color:var(--primary-2);background-color:rgba(255,255,255,.07)}
.agencyfic-password-toggle svg{display:block;width:18px;height:18px;pointer-events:none;margin:0}

.agencyfic-password-field{margin-bottom:4px}

/* Strength meter — hidden until 6+ characters are typed (below that,
   "weak/medium/hard" isn't a meaningful distinction; the 6-character
   minimum itself is only surfaced via .agencyfic-pw-error on submit). */
.agencyfic-pw-strength{display:flex;align-items:center;gap:10px;margin-top:10px;visibility:hidden}
.agencyfic-pw-strength-bar{flex:1 1 auto;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.agencyfic-pw-strength-bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--danger);transition:width .25s ease,background .25s ease}
.agencyfic-pw-strength-label{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--danger)}
.agencyfic-pw-strength[data-level="weak"]{visibility:visible}
.agencyfic-pw-strength[data-level="weak"] .agencyfic-pw-strength-bar span{width:33%;background:var(--danger)}
.agencyfic-pw-strength[data-level="weak"] .agencyfic-pw-strength-label{color:var(--danger)}
.agencyfic-pw-strength[data-level="medium"]{visibility:visible}
.agencyfic-pw-strength[data-level="medium"] .agencyfic-pw-strength-bar span{width:66%;background:var(--warning)}
.agencyfic-pw-strength[data-level="medium"] .agencyfic-pw-strength-label{color:var(--warning)}
.agencyfic-pw-strength[data-level="hard"]{visibility:visible}
.agencyfic-pw-strength[data-level="hard"] .agencyfic-pw-strength-bar span{width:100%;background:var(--success)}
.agencyfic-pw-strength[data-level="hard"] .agencyfic-pw-strength-label{color:var(--success)}

.agencyfic-pw-hint{display:block;margin-top:8px;font-size:12px;line-height:1.6;color:var(--muted)}

/* Themed inline error banner — replaces the default browser validation
   tooltip / plain-text WooCommerce notice for "too short" and "passwords
   don't match", shown instantly client-side as the person types/submits. */
.agencyfic-pw-error{
  display:flex;align-items:flex-start;gap:10px;
  margin:4px 0 18px;padding:12px 16px;border-radius:16px;
  background:rgba(255,122,150,.12);border:1px solid rgba(255,122,150,.45);
  color:#ffe3ea;font-size:13px;font-weight:700;line-height:1.5;
  animation:agencyficPwErrorIn .2s ease;
}
.agencyfic-pw-error[hidden]{display:none}
.agencyfic-pw-error:before{
  content:"!";flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:var(--danger);color:#2b0410;font-weight:900;
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
@keyframes agencyficPwErrorIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ===================== WooCommerce Cart Page — card redesign ===================== */
/* Replaces the old <table class="shop_table cart"> approach (see the classic
   ".shop_table.cart" rules further up — now unused/dead on the cart page,
   left in place only in case a caching layer serves an old cached page
   during deploy) with a single-column stacked-card layout per the approved
   design: thumbnail, name + line total, price + "Save ₹x" badge, short
   description, quantity stepper + trash icon, coupon accordion and a
   simplified "Estimated total" + checkout row. */

.agencyfic-cart2,
.agencyfic-cart2 *{box-sizing:border-box}

.agencyfic-cart2__items{display:flex;flex-direction:column}

.agencyfic-cart2-item{
  display:flex;gap:16px;padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.agencyfic-cart2-item:first-child{padding-top:6px}

.agencyfic-cart2-item__thumb{flex:0 0 92px;width:92px;height:92px}
.agencyfic-cart2-item__thumb a,
.agencyfic-cart2-item__thumb img{
  width:92px;height:92px;object-fit:cover;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
}

.agencyfic-cart2-item__body{flex:1 1 auto;min-width:0}

.agencyfic-cart2-item__top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.agencyfic-cart2-item__name{font-weight:800;font-size:16px;overflow-wrap:anywhere}
.agencyfic-cart2-item__name a{color:var(--text)}
.agencyfic-cart2-item__name a:hover{color:var(--primary-2)}
.agencyfic-cart2-item__name dl.variation{margin:6px 0 0;font-size:12.5px;color:var(--muted);overflow:hidden}
.agencyfic-cart2-item__name dl.variation dt,
.agencyfic-cart2-item__name dl.variation dd,
.agencyfic-cart2-item__name dl.variation dd p{display:inline;margin:0}
.agencyfic-cart2-item__linetotal{font-weight:900;font-size:16px;white-space:nowrap;flex:0 0 auto}

.agencyfic-cart2-item__price-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px;
}
.agencyfic-cart2-item__price{font-weight:700;font-size:14px}
.agencyfic-cart2-item__price del{color:var(--muted-2);font-weight:500;margin-right:6px}
.agencyfic-cart2-item__price ins{text-decoration:none;color:var(--primary-2)}

.agencyfic-cart2-item__desc{
  margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.agencyfic-cart2-item__actions-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
}
.agencyfic-cart2-item__qty .quantity.agencyfic-quantity{height:44px}

.agencyfic-cart2-item__remove{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(255,122,150,.28);color:var(--danger);flex:0 0 auto;
  transition:.2s ease;
}
.agencyfic-cart2-item__remove svg{width:18px;height:18px;fill:currentColor}
.agencyfic-cart2-item__remove:hover{background:rgba(255,122,150,.16);transform:scale(1.05)}

/* Coupon accordion ("Add coupons") */
.agencyfic-cart2__actions{padding-top:18px}
.agencyfic-cart2__coupon{border-top:1px solid rgba(255,255,255,.08)}
.agencyfic-cart2__coupon summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;color:var(--primary-2);font-weight:700;font-size:14.5px;
}
.agencyfic-cart2__coupon summary::-webkit-details-marker{display:none}
.agencyfic-cart2__coupon summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.agencyfic-cart2__coupon[open] summary svg{transform:rotate(180deg)}
.agencyfic-cart2__coupon-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:18px}
.agencyfic-cart2__coupon-inner input#coupon_code{flex:1 1 220px;min-width:0;height:46px;padding:0 14px!important}
.agencyfic-cart2__coupon-inner .button{flex:0 0 auto}

.agencyfic-cart2__update-btn{
  width:100%;margin-top:4px;background:transparent!important;color:var(--muted)!important;
  border:1px solid var(--border)!important;
}
.agencyfic-cart2__update-btn:hover{color:var(--text)!important;border-color:var(--border-strong)!important}

/* Totals / collaterals */
.agencyfic-cart2__collaterals{border-top:1px solid rgba(255,255,255,.08);margin-top:22px;padding-top:22px}
.agencyfic-cart2__coupons-applied{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.agencyfic-cart2__coupon-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(124,240,255,.1);border:1px solid rgba(124,240,255,.28);
  font-size:12.5px;font-weight:700;color:var(--primary-2);text-transform:uppercase;letter-spacing:.02em;
}
.agencyfic-cart2__coupon-remove{color:var(--danger);font-weight:900}

.agencyfic-cart2__totals-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;font-size:14px;color:var(--muted);
}
.agencyfic-cart2__totals-row--total{
  border-top:1px solid rgba(255,255,255,.08);margin-top:6px;padding-top:16px;
  font-size:18px;font-weight:900;color:var(--text);
}
.agencyfic-cart2__totals-row--total span:last-child{color:var(--primary-2)}

.agencyfic-cart2__checkout-row{display:flex;align-items:stretch;margin-top:20px}
.agencyfic-cart2__checkout-row .checkout-button{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  height:54px;border-radius:999px;font-size:15.5px;width:100%;
}

@media (max-width:640px){
  .agencyfic-cart2-item{gap:12px;padding:18px 0}
  .agencyfic-cart2-item__thumb,
  .agencyfic-cart2-item__thumb a,
  .agencyfic-cart2-item__thumb img{flex:0 0 76px;width:76px;height:76px}
  .agencyfic-cart2-item__name,
  .agencyfic-cart2-item__linetotal{font-size:14.5px}
  .agencyfic-cart2__checkout-row .checkout-button{height:50px;font-size:14.5px}
}

/* ===================== Checkout: Country/Region + State select2 fields ===================== */
/* WooCommerce enhances the Country/Region and State fields with the select2
   library by default. Every OTHER checkout field (street address, town/city,
   PIN code, etc.) is a plain <input> and already picks up the theme's
   general input[type=text] styling above — but select2 hides the native
   <select> and renders its own markup instead, so those two fields were
   falling back to the browser's bare default look instead of matching the
   dark, rounded field design used everywhere else. This restyles select2's
   generated markup (closed box, dropdown panel, and search field inside the
   dropdown) to match the same background/border/radius/height as the rest
   of the form fields exactly. */

.select2-container{width:100%!important;font-family:inherit}

.select2-container .select2-selection--single{
  height:48px!important;display:flex;align-items:center;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:14px!important;
  padding:0 14px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff;line-height:normal;padding:0;padding-right:22px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted)}
.select2-container .select2-selection--single .select2-selection__arrow{
  height:100%;top:0;right:10px;width:20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--muted) transparent transparent transparent;border-width:6px 5px 0 5px;margin-left:-5px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent var(--muted) transparent;border-width:0 5px 6px 5px;
}
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--primary)!important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{color:var(--muted)}

/* Dropdown panel (appended to <body>, so it needs its own dark skin) */
.select2-dropdown{
  background:#0d1324!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:14px!important;overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.select2-search--dropdown{padding:10px;background:transparent}
.select2-search--dropdown .select2-search__field{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:10px!important;color:#fff!important;padding:8px 10px!important;outline:none;
}
.select2-results__options{max-height:260px}
.select2-container--default .select2-results__option{color:var(--muted);padding:9px 14px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:rgba(142,167,255,.18)!important;color:var(--text)!important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
  background:rgba(124,240,255,.1);color:var(--primary-2);
}
.select2-results__option{scrollbar-width:thin}