/**
 * Frontend visual polish — cross-page refinements only.
 * No structure, copy, or element changes — shadows, motion, focus, safe-areas.
 *
 * @package store-theme
 */

/* ── Elevation tokens ─────────────────────────────────────────────────────── */
:root {
  --elev-1: 0 8px 32px hsl(var(--overlay) / 0.28);
  --elev-2: 0 16px 48px hsl(var(--overlay) / 0.38);
  --elev-3: 0 24px 64px hsl(var(--overlay) / 0.48);
  --elev-brand: 0 12px 40px hsl(var(--brand) / 0.22);
  --sticky-bar-shadow: 0 -8px 32px hsl(var(--overlay) / 0.42);
  --glass-highlight: linear-gradient(180deg, hsla(0, 0%, 100%, 0.06) 0%, hsla(0, 0%, 100%, 0) 48%);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --focus-ring: 0 0 0 1px hsl(var(--brand) / 0.35), 0 0 0 4px hsl(var(--brand) / 0.12);
}

/* ── Global rendering ─────────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  image-rendering: auto;
}

::selection {
  background: hsl(var(--brand) / 0.28);
  color: #fff;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
#site-header {
  transition:
    box-shadow 0.4s var(--ease-premium),
    border-color 0.4s var(--ease-premium),
    background-color 0.4s var(--ease-premium),
    backdrop-filter 0.4s var(--ease-premium);
}

#site-header.scrolled,
#site-header[class*="shadow-"] {
  border-bottom-color: hsla(0, 0%, 100%, 0.09) !important;
  box-shadow: var(--elev-2) !important;
  background-color: hsl(var(--canvas-dark) / 0.96) !important;
}

@media (pointer: coarse) {
  #site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: hsl(var(--canvas-dark) / 0.98) !important;
  }
}

#site-header a,
#site-header button {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease-premium), box-shadow 0.2s ease;
}

#site-header button:active,
#site-header a:active {
  transform: scale(0.97);
}

/* ── Announcement bar ─────────────────────────────────────────────────────── */
.store-studio-announce {
  position: relative;
  z-index: 60;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.45;
  padding: max(9px, env(safe-area-inset-top, 0px)) 16px 9px;
  box-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.08);
}

.store-studio-announce a {
  transition: opacity 0.2s ease;
}

.store-studio-announce a:hover {
  opacity: 0.88;
}

/* ── Glass surfaces ───────────────────────────────────────────────────────── */
.glass-card {
  background-image: var(--glass-highlight);
  box-shadow: var(--elev-1), inset 0 1px 0 hsla(0, 0%, 100%, 0.05);
}

@media (pointer: coarse) {
  .glass-card-hover:active {
    background-color: hsl(var(--surface-elevated) / 0.55) !important;
    border-color: hsla(0, 0%, 100%, 0.12) !important;
    transform: scale(0.995);
  }
}

/* ── Product cards ────────────────────────────────────────────────────────── */
.product-card-premium {
  box-shadow: var(--elev-1), inset 0 1px 0 hsla(0, 0%, 100%, 0.04);
}

.product-card-premium:hover {
  box-shadow: var(--elev-3), 0 0 0 1px hsla(0, 0%, 100%, 0.08);
}

@media (pointer: coarse) {
  .product-card-premium:active {
    transform: scale(0.985);
    box-shadow: var(--elev-2);
  }
}

/* ── CTAs ─────────────────────────────────────────────────────────────────── */
.accent-gradient,
.store-sticky-cta,
#cart-drawer-checkout-btn,
.co-submit-btn {
  transition:
    transform 0.22s var(--ease-premium),
    box-shadow 0.28s var(--ease-premium),
    filter 0.22s ease !important;
}

.accent-gradient:hover,
.store-sticky-cta:hover,
#cart-drawer-checkout-btn:hover,
.co-submit-btn:hover:not(:disabled) {
  box-shadow: var(--elev-brand) !important;
  filter: brightness(1.04);
}

.accent-gradient:active,
.store-sticky-cta:active,
#cart-drawer-checkout-btn:active,
.co-submit-btn:active:not(:disabled) {
  transform: scale(0.98) !important;
  filter: brightness(0.98);
}

/* ── Form focus (contact + WC) ────────────────────────────────────────────── */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  outline: none;
  border-color: hsl(var(--brand) / 0.55) !important;
  box-shadow: var(--focus-ring);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Cart drawer ──────────────────────────────────────────────────────────── */
#cart-drawer-backdrop:not(.hidden) {
  background: radial-gradient(120% 120% at 50% 0%, hsla(222, 30%, 4%, 0.55), hsla(222, 40%, 2%, 0.82)) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

#cart-drawer {
  box-shadow: -24px 0 80px hsl(var(--overlay) / 0.55), inset 1px 0 0 hsla(0, 0%, 100%, 0.04) !important;
  background-image: var(--glass-highlight);
}

#cart-drawer-items > div,
#cart-drawer .rounded-2xl {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* ── Sticky bars (home + product) ─────────────────────────────────────────── */
.home-sticky-react-desktop > div,
#sticky-product-bar > div,
#sticky-product-bar-desktop > div {
  box-shadow: var(--sticky-bar-shadow) !important;
}

#sticky-product-bar > div {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}

#sticky-product-bar-desktop > div {
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Live order popup ─────────────────────────────────────────────────────── */
#live-order-popup:not(.hidden) {
  box-shadow: var(--elev-2), 0 0 0 1px hsla(0, 0%, 100%, 0.06);
  background-image: var(--glass-highlight);
}

@media (max-width: 767px) {
  .home-page #live-order-popup {
    bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Thank-you page ───────────────────────────────────────────────────────── */
.ty-page section .rounded-\[24px\],
.ty-page .rounded-2xl.border {
  box-shadow: var(--elev-1), inset 0 1px 0 hsla(0, 0%, 100%, 0.04);
}

.store-ty-phone-notice {
  box-shadow: 0 8px 28px hsl(var(--brand) / 0.12);
}

.ty-success-icon {
  animation: ty-icon-glow 3s ease-in-out infinite;
}

@keyframes ty-icon-glow {
  0%, 100% { box-shadow: 0 0 40px hsl(142 65% 44% / 0.2); }
  50%      { box-shadow: 0 0 56px hsl(142 65% 44% / 0.35); }
}

/* ── Static pages (about, contact, policy, categories) ───────────────────── */
.page-template-page-about .glass-card,
.page-template-page-contact .glass-card,
.page-template-page-policy .glass-card,
.page-template-page-categories .glass-card,
.page-template-page-thank-you .glass-card {
  box-shadow: var(--elev-1), inset 0 1px 0 hsla(0, 0%, 100%, 0.04);
}

.page-template-page-categories a.group {
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}

.page-template-page-categories a.group:hover {
  box-shadow: var(--elev-2);
}

/* ── Shop / archive ───────────────────────────────────────────────────────── */
.post-type-archive-product .product-card-premium,
.tax-product_cat .product-card-premium {
  isolation: isolate;
}

/* ── Product page sections ────────────────────────────────────────────────── */
#product-page-root section {
  scroll-margin-top: 5rem;
}

#product-page-root .glass-card,
#product-page-root .rounded-2xl.border-white\/\[0\.07\] {
  box-shadow: var(--elev-1);
}

.bundle-active {
  box-shadow: 0 0 0 1px hsl(var(--brand) / 0.25), 0 12px 36px hsl(var(--brand) / 0.12) !important;
}

/* ── COD confirmation — soften heavy glow ─────────────────────────────────── */
#cod-confirmation .rounded-\[3rem\] {
  box-shadow: var(--elev-brand), var(--elev-2) !important;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer[role="contentinfo"] {
  border-top-color: hsla(0, 0%, 100%, 0.06) !important;
}

footer[role="contentinfo"] a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ── Section rhythm ─────────────────────────────────────────────────────────── */
.store-section-subtitle {
  text-wrap: pretty;
}

.store-section-title {
  text-wrap: balance;
}

/* ── Scrollbars (desktop) ─────────────────────────────────────────────────── */
@media (pointer: fine) {
  .co-scroll::-webkit-scrollbar,
  #cart-drawer-scroll::-webkit-scrollbar {
    width: 5px;
  }

  .co-scroll::-webkit-scrollbar-thumb,
  #cart-drawer-scroll::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 100%, 0.14);
    border-radius: 999px;
  }

  .co-scroll::-webkit-scrollbar-thumb:hover,
  #cart-drawer-scroll::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 100%, 0.22);
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ty-success-icon {
    animation: none;
  }

  #site-header,
  .accent-gradient,
  .glass-card-hover,
  .product-card-premium {
    transition: none !important;
  }
}