/* ==========================================================================
   Glass UI layer — gradient + glassmorphism buttons, form controls and
   a light frosted-glass treatment on surfaces. Loaded last; overrides only.
   ========================================================================== */
:root{
  --g-blur:blur(14px) saturate(160%);
  --g-bg:rgba(255,255,255,.62);--g-bg-strong:rgba(255,255,255,.82);
  --g-bd:rgba(255,255,255,.7);--g-bd-soft:rgba(15,30,70,.10);
  --g-shadow:0 8px 28px -10px rgba(11,18,32,.18),inset 0 1px 0 rgba(255,255,255,.65);
  --g-grad:linear-gradient(135deg,color-mix(in srgb,var(--primary) 82%,#7aa7ff) 0%,var(--primary) 45%,var(--primary-h) 100%);
  --g-glow:color-mix(in srgb,var(--primary) 55%,transparent);
}
:root[data-theme=dark]{
  --g-bg:rgba(24,34,58,.55);--g-bg-strong:rgba(20,29,50,.8);
  --g-bd:rgba(255,255,255,.12);--g-bd-soft:rgba(255,255,255,.12);
  --g-shadow:0 8px 28px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
}

/* Soft ambient colour behind the page so the glass has something to refract */
body{background-image:radial-gradient(900px 500px at 8% -5%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 60%),radial-gradient(800px 500px at 100% 20%,rgba(255,196,0,.08),transparent 60%);background-attachment:fixed}

/* ---------- Buttons ---------- */
.btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-page a.button,.woocommerce #respond input#submit{
  position:relative;overflow:hidden;isolation:isolate;border-radius:14px;letter-spacing:.01em;
  transition:transform .2s,box-shadow .25s,background-position .4s,border-color .2s,color .2s,filter .2s;
}
.btn::after,.woocommerce a.button::after,.woocommerce button.button::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .6s;
}
.btn:hover::after,.woocommerce a.button:hover::after,.woocommerce button.button:hover::after{transform:translateX(130%)}
.btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translateY(-2px)}
.btn:active,.woocommerce a.button:active,.woocommerce button.button:active{transform:translateY(0)}

.btn-primary,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce a.button.checkout,.woocommerce .button.alt{
  background:var(--g-grad);background-size:140% 140%;border-color:rgba(255,255,255,.28);color:var(--on-primary,#fff);
  box-shadow:0 10px 24px -10px var(--g-glow),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce a.button.checkout:hover{
  background:var(--g-grad);background-size:140% 140%;background-position:100% 100%;border-color:rgba(255,255,255,.4);color:var(--on-primary,#fff);
  box-shadow:0 16px 30px -10px var(--g-glow),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-light{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.7));border-color:rgba(255,255,255,.8);color:#0B1220;backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:0 8px 20px -10px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.btn-light:hover{background:linear-gradient(135deg,#fff,var(--blue-50));color:var(--link)}
.btn-outline,.woocommerce a.button:not(.alt):not(.checkout),.woocommerce button.button:not(.alt),.woocommerce input.button:not(.alt){
  background:var(--g-bg);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1.5px solid var(--g-bd-soft);color:var(--ink);box-shadow:var(--g-shadow);
}
.btn-outline:hover,.woocommerce a.button:not(.alt):not(.checkout):hover,.woocommerce button.button:not(.alt):hover,.woocommerce input.button:not(.alt):hover{
  background:linear-gradient(135deg,#1a2a4d,var(--ink));border-color:transparent;color:#fff;box-shadow:0 14px 26px -12px rgba(11,18,32,.6);
}
.btn-soft{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,transparent),color-mix(in srgb,var(--primary) 6%,transparent));border-color:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--link);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
.btn-soft:hover{background:var(--g-grad);color:var(--on-primary,#fff);box-shadow:0 12px 24px -10px var(--g-glow)}
.btn:focus-visible,.woocommerce .button:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:3px}
.btn[disabled],.woocommerce button.button:disabled{filter:grayscale(.4)}

/* Header / pills / small buttons */
.cart-btn{background:var(--g-bg);border:1px solid var(--g-bd);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow);transition:transform .2s,box-shadow .25s,background .25s,color .2s}
.cart-btn:hover{background:var(--g-grad);color:var(--on-primary,#fff);transform:translateY(-2px);box-shadow:0 12px 24px -10px var(--g-glow)}
.search button{background:var(--g-grad)}
.search button:hover{filter:brightness(1.12);background:var(--g-grad)}
.hdr-link,.icon-btn,.nav-toggle,.search-toggle{transition:background .2s,transform .2s,box-shadow .2s}
.hdr-link:hover,.icon-btn:hover,.nav-toggle:hover,.search-toggle:hover{background:var(--g-bg-strong);box-shadow:var(--g-shadow);transform:translateY(-1px)}
.chip{background:var(--g-bg);border:1px solid var(--g-bd-soft);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:all .2s}
.chip:hover{background:color-mix(in srgb,var(--primary) 12%,var(--g-bg));transform:translateY(-1px)}
.chip.on{background:var(--g-grad);border-color:rgba(255,255,255,.3);color:var(--on-primary,#fff);box-shadow:0 8px 18px -8px var(--g-glow)}
.cta .chip{background:rgba(255,255,255,.14)}
.pager button,.pager a,.page-numbers{transition:all .2s}
.pager button:hover:not([disabled]),.page-numbers:hover{transform:translateY(-1px);box-shadow:var(--g-shadow)}
.page-numbers.current,.pager .on,.pager .current{background:var(--g-grad)!important;color:var(--on-primary,#fff)!important;border-color:transparent!important;box-shadow:0 8px 18px -8px var(--g-glow)}

/* Variation / option pills */
.opt label,.opt .vals button{background:var(--g-bg);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);border-radius:12px;transition:all .2s}
.opt label:hover,.opt .vals button:hover{transform:translateY(-1px);box-shadow:var(--g-shadow)}
.opt input:checked+label,.opt .vals button.on{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 8%,transparent));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent),var(--g-shadow)}

/* Quantity stepper */
.qty{border-radius:14px;background:var(--g-bg);border-color:var(--g-bd-soft);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow)}
.qty button{transition:background .2s,color .2s}
.qty button:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--link)}

/* ---------- Text inputs, selects, textareas ---------- */
.field input,.field select,.field textarea,.price-f input,.select,.coupon input,
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,
.woocommerce-ordering select.orderby,.opt-select select,.vd-vendor select,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce form .form-row input[type=text],.woocommerce form .form-row input[type=email],.woocommerce form .form-row input[type=tel],
.woocommerce form .form-row input[type=password],.woocommerce form .form-row input[type=number],.woocommerce .coupon input.input-text,.woocommerce-page input.input-text{
  background-color:var(--g-bg);border:1.5px solid var(--g-bd-soft);border-radius:14px;
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 2px rgba(11,18,32,.05),inset 0 1px 0 rgba(255,255,255,.5);
  transition:border-color .2s,box-shadow .25s,background-color .2s;
}
.qty input.input-text,.woocommerce-page .qty input.input-text{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.field input:hover,.field select:hover,.field textarea:hover,.select:hover,.woocommerce form .form-row input:hover,.woocommerce form .form-row select:hover{border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.field input:focus,.field select:focus,.field textarea:focus,.price-f input:focus,.select:focus,.coupon input:focus,
.comment-form input:focus,.comment-form textarea:focus,.woocommerce-ordering select.orderby:focus,
.woocommerce form .form-row input:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{
  background-color:var(--g-bg-strong);border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent),0 8px 20px -10px var(--g-glow);
}
.search{background:var(--g-bg);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);border-color:var(--g-bd-soft);box-shadow:var(--g-shadow)}
.search:focus-within{background:var(--g-bg-strong)}

/* Custom dropdown arrow on every native select */
select:not([multiple]):not(.select2-hidden-accessible),.search select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23244F7D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.search select{padding-right:34px;background-position:right 12px center}
select option{background:#fff;color:#0B1220}
:root[data-theme=dark] select option{background:#141d32;color:#E6ECF7}

/* select2 (Woo country/state) + dropdown panels */
.select2-container--default .select2-selection--single{background:var(--g-bg);border:1.5px solid var(--g-bd-soft);border-radius:14px;backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.select2-container--open .select2-selection--single,.select2-container--default.select2-container--focus .select2-selection--single{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.select2-dropdown{background:var(--g-bg-strong);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);border:1px solid var(--g-bd);border-radius:14px;box-shadow:0 20px 40px -16px rgba(11,18,32,.35)}
.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background:var(--g-grad)}

/* ---------- Checkboxes & radios ---------- */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none;appearance:none;flex:none;position:relative;display:inline-grid;place-content:center;
  width:20px;height:20px;margin:0;cursor:pointer;vertical-align:middle;
  background:var(--g-bg);border:1.5px solid color-mix(in srgb,var(--ink-3) 55%,transparent);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;
}
.f-list input[type=checkbox],.check input,.pay-opt input[type=radio],.woocommerce input[type=checkbox],.woocommerce input[type=radio]{width:20px;height:20px}
input[type=checkbox]{border-radius:7px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--primary);transform:scale(1.06)}
input[type=checkbox]::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) scale(0);margin-top:-2px;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
input[type=radio]::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--g-grad);border-color:transparent;box-shadow:0 4px 12px -3px var(--g-glow),inset 0 1px 0 rgba(255,255,255,.4)}
input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1)}
input[type=radio]:checked::after{transform:scale(1)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 40%,transparent);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
/* visually hidden helper inputs keep their original behaviour */
.opt input,.rate-in input,.vd-drop input{-webkit-appearance:none;appearance:none;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.opt input::after,.rate-in input::after,.vd-drop input::after{content:none}

/* ---------- Glass surfaces (kept subtle) ---------- */
.hdr-main{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
.cat-list,.fly,.sub,.drawer{background:var(--g-bg-strong);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);border-color:var(--g-bd)}
.drawer-foot{background:var(--g-bg);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
.scrim{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pcard,.cat-card,.brand,.pay-opt,#payment li.wc_payment_method,.woocommerce-message,.woocommerce-info{
  background-color:var(--g-bg);border-color:var(--g-bd-soft);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow);
}
.pay-opt:has(input:checked),#payment li.wc_payment_method:has(input:checked){background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 14%,transparent),color-mix(in srgb,var(--primary) 5%,transparent));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent),var(--g-shadow)}

/* Single-product buy buttons keep their own gradient; add a glass edge */
.buy .btn-cart,.buy .btn-buy{border:1px solid rgba(255,255,255,.35)}

@media (prefers-reduced-motion:reduce){.btn,.btn::after,input[type=checkbox]::after,input[type=radio]::after{transition:none}}
@supports not (backdrop-filter:blur(1px)){:root{--g-bg:rgba(255,255,255,.92);--g-bg-strong:#fff}:root[data-theme=dark]{--g-bg:#18223a;--g-bg-strong:#141d32}}