/* ============================================================================
   UrbWellness — UI POLISH LAYER
   Loaded last. Adds the interaction/motion/depth language that makes the
   storefront feel premium. Structure & layout untouched — this is feel only.
   Easing: ease-out cubic for entrances, quick cubic for presses.
   ============================================================================ */

:root {
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-press: cubic-bezier(.4, 0, .2, 1);
    --shadow-card: 0 10px 30px rgba(64, 54, 32, .12);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, .05);
}

/* --- Headings: preserve authored case (kills "Shop By Category") --- */
.sec h2, .sec h2.center, .promise h2, .faq h2, .news h2, .head-row h2,
.uw-reviews__title, .hcard h1, .hcard h2, .trust h4, .card .ct2, .pcard .pt,
.cat h4, .info h1, .pdp h1 { text-transform: none; }

/* --- Text selection on-brand --- */
::selection { background: rgba(107, 110, 61, .22); }

/* --- Smooth in-page scrolling --- */
html { scroll-behavior: smooth; }

/* --- Keyboard focus: visible, on-brand, but never on mouse click --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, .swatch:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 2px;
    border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   PRODUCT CARDS (homepage carousels, PDP recommended, archive)
   Lift + image zoom + title tint — the core "alive" interaction.
   ============================================================ */
.pcard, .card {
    transition: transform .3s var(--ease);
    will-change: transform;
}
.pcard:hover, .card:hover { transform: translateY(-5px); }

.pcard .pimg, .card .cimg {
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pcard:hover .pimg, .card:hover .cimg { box-shadow: var(--shadow-card); }
.card:hover .cimg { border-color: transparent; }

.pcard .pimg img, .card .cimg img {
    transition: transform .55s var(--ease);
    will-change: transform;
}
.pcard:hover .pimg img, .card:hover .cimg img { transform: scale(1.05); }

.pcard .pt, .card .ct2 { transition: color .2s ease; }
.pcard:hover .pt, .card:hover .ct2 { color: var(--olive); }

/* ============================================================
   CATEGORY TILES — same language
   ============================================================ */
.cat .thumb { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cat:hover .thumb { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.cat .thumb img { transition: transform .55s var(--ease); }
.cat:hover .thumb img { transform: scale(1.06); }
.cat h4 { transition: color .2s ease; }
.cat:hover h4 { color: var(--olive); }

/* ============================================================
   BUTTONS — clean darken + subtle lift/press.
   (No directional-fill pseudo: behind a solid background it was
   invisible and only read as a green↔purple jitter. Base colors
   come from main.css / woocommerce.css; this is depth + motion only.)
   ============================================================ */
.btn, .single_add_to_cart_button, .woocommerce .button {
    transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .12s var(--ease-press);
}
.btn:hover, .single_add_to_cart_button:hover, .woocommerce .button:hover {
    box-shadow: 0 8px 20px rgba(107, 110, 61, .28);
}
.btn:active, .single_add_to_cart_button:active, .woocommerce .button:active {
    transform: translateY(1px);
}

/* --- Newsletter / search submit inherit the same feel --- */
.news button, .uw-search-form .btn { transition: background .28s var(--ease), box-shadow .28s; }
.news button:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }

/* ============================================================
   HEADER — hairline at rest, real shadow once scrolled
   ============================================================ */
.header { transition: box-shadow .3s var(--ease), background .3s; }
.header.uw-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .09); }

/* --- Nav links: animated underline --- */
.uw-meganav > .uw-nav-item > a {
    position: relative;
}
.uw-meganav > .uw-nav-item > a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%; height: 2px;
    background: var(--olive);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--ease);
}
.uw-meganav > .uw-nav-item:hover > a::after { transform: scaleX(1); }

/* --- Header icons: gentle hover --- */
.hicons a { transition: transform .2s var(--ease), opacity .2s; display: inline-flex; }
.hicons a:hover { transform: translateY(-1px); opacity: .7; }

/* ============================================================
   CAROUSEL ARROWS — fill on hover
   ============================================================ */
.arrows button { transition: background .22s var(--ease), border-color .22s, opacity .2s, transform .12s; }
.arrows button:not(.is-off):hover { background: var(--olive); border-color: var(--olive); }
.arrows button:not(.is-off):hover svg { stroke: #fff; }
.arrows button:not(.is-off):active { transform: scale(.94); }

/* ============================================================
   FAQ — smooth marker + gentle row hover
   ============================================================ */
.faq summary .pm { transition: transform .25s var(--ease); }
.faq details { transition: box-shadow .25s var(--ease); }
.faq details:hover { box-shadow: var(--shadow-soft); }
.faq summary:hover { color: var(--olive); }

/* ============================================================
   PDP — swatches, stepper, gallery micro-feedback
   ============================================================ */
.swatch { transition: background .18s var(--ease), border-color .18s, color .18s, transform .12s; }
.swatch:active { transform: scale(.96); }
.qbtn { transition: background .18s var(--ease), color .18s; }
.qbtn:hover { background: #f2f1ec; color: #000; }
.gallery .main img { transition: transform .5s var(--ease); }
.gallery .main:hover img { transform: scale(1.04); }
.gallery .main { cursor: zoom-in; }

/* --- Collection toolbar controls --- */
.filter-btn, .sort, form.woocommerce-ordering select.orderby {
    transition: border-color .2s var(--ease), box-shadow .2s;
}
.filter-btn:hover, .sort:hover, form.woocommerce-ordering select.orderby:hover {
    border-color: #999;
}
.filters label a { transition: color .18s; }

/* ============================================================
   MEGA-MENU — softer entrance + tile lift
   ============================================================ */
.uw-mega { transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; }
.uw-mm-thumb { transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.uw-mm-tile:hover .uw-mm-thumb { transform: translateY(-4px); box-shadow: var(--shadow-card); }

/* ============================================================
   CART DRAWER — richer overlay + line-item hover
   ============================================================ */
#uw-drawer ul.cart_list li { transition: background .18s var(--ease); }
#uw-drawer ul.cart_list li:hover { background: #faf9f6; }

/* ============================================================
   GLOBAL: add-to-cart loading spinner alignment + WC ".added" flash
   ============================================================ */
.single_add_to_cart_button.loading { opacity: .75; pointer-events: none; }
.single_add_to_cart_button.loading::after {
    content: "";
    width: 15px; height: 15px; margin-left: 10px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: uw-spin .7s linear infinite;
}
@keyframes uw-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Respect reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .pcard:hover, .card:hover, .cat:hover .thumb, .uw-mm-tile:hover .uw-mm-thumb { transform: none; }
}