/* =======================================================================
   U4T Shop Styler v3.1 — Shop Page Stylesheet
   ======================================================================= */

:root {
    --u4t-accent:     #ED4623;
    --u4t-dark:       #2D2D2C;
    --u4t-white:      #ffffff;
    --u4t-font:       'Raleway', 'Segoe UI', sans-serif;
    --u4t-transition: .22s ease;
}

/* -----------------------------------------------------------------------
   BODY — push content below fixed header (only on shop: body.u4t-active)
   ----------------------------------------------------------------------- */
body.u4t-active {
    padding-top: 148px !important;
    margin-top: 0 !important;
}
/* Theme's own .content-product-wrapper adds a further 90px top padding
   (sized for Theratio's default header), stacking on top of our fixed
   #u4t-header offset above and pushing the hero/page content down with
   a visible dead gap under the header. Zero it out across our scope. */
body.u4t-active .content-product-wrapper {
    padding-top: 0 !important;
}
@media (min-width: 769px) {
    /* Desktop header is now 2 rows (108px) since the search bar moved
       inline with the logo/actions row — 148px was sized for the old
       3-row layout and left a dead gap above the hero/page content. */
    body.u4t-active {
        padding-top: 108px !important;
    }
}

/* -----------------------------------------------------------------------
   HEADER
   ----------------------------------------------------------------------- */
#u4t-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    background: var(--u4t-dark);
    box-shadow: 0 2px 20px rgba(0,0,0,.35);
    font-family: var(--u4t-font);
}

.u4t-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 36px 0;
    display: flex;
    flex-direction: column;
}

/* ── Top row: Logo left, Actions right ── */
.u4t-top-row {
    display: flex;
    align-items: center;
    height: 68px;
    gap: 0;
}

/* Logo — 65% of top row */
.u4t-logo { flex: 0 0 65%; min-width: 0; }
.u4t-logo a { display: block; line-height: 0; text-decoration: none; }
.u4t-logo-img { width: auto; max-width: 100%; max-height: 34px; height: auto; object-fit: contain; display: block; }
.u4t-logo-text {
    color: var(--u4t-white);
    font-family: var(--u4t-font);
    font-size: 22px; font-weight: 700;
}

/* Search — full-width row 2 (sits between top-row and nav in HTML) */
.u4t-search-wrap {
    width: 100%;
    padding: 4px 0 8px;
    position: relative;
}

.u4t-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 28px;
    padding: 0 18px;
    height: 44px;
    transition: box-shadow var(--u4t-transition);
}
.u4t-search-box:focus-within { box-shadow: 0 0 0 3px rgba(237,70,35,.25); }

.u4t-search-icon { color: #aaa; flex-shrink: 0; }

#u4t-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: var(--u4t-font);
    font-size: 14px; color: #222; min-width: 0;
}
#u4t-search-input::placeholder { color: #bbb; }

.u4t-search-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid #eee;
    border-top-color: var(--u4t-accent);
    border-radius: 50%;
    animation: u4t-spin .6s linear infinite;
    flex-shrink: 0;
}
.u4t-search-wrap.is-loading .u4t-search-spinner { display: block; }
@keyframes u4t-spin { to { transform: rotate(360deg); } }

/* Dropdown */
.u4t-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.16);
    z-index: 100001;
    display: none;
    overflow: hidden;
    max-height: 380px;
    overflow-y: auto;
}
.u4t-search-dropdown.is-open { display: block; }

.u4t-search-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    text-decoration: none; color: #333;
    border-bottom: 1px solid #f2f2f2;
    transition: background var(--u4t-transition);
    font-family: var(--u4t-font);
}
.u4t-search-item:last-child { border-bottom: none; }
.u4t-search-item:hover { background: #fafafa; }
.u4t-search-item-img {
    width: 48px; height: 48px;
    object-fit: cover; border-radius: 4px;
    flex-shrink: 0; background: #f5f5f5;
}
.u4t-search-item-name { font-size: 13.5px; font-weight: 600; color: #1a1a1a; margin-bottom: 2px; }
.u4t-search-item-price { font-size: 12.5px; color: var(--u4t-accent); font-weight: 500; }
.u4t-search-msg {
    padding: 18px; text-align: center;
    font-size: 13px; color: #999;
    font-family: var(--u4t-font);
}

/* Actions */
.u4t-actions {
    flex: 0 0 35%;
    display: flex; align-items: center; justify-content: flex-end; gap: 0;
}
.u4t-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 7px;
    color: var(--u4t-white);
    text-decoration: none;
    border-radius: 6px;
    font-family: var(--u4t-font);
    font-size: 12.5px; font-weight: 500;
    transition: color var(--u4t-transition), background var(--u4t-transition);
    white-space: nowrap;
}
.u4t-action-btn:hover { color: var(--u4t-accent); background: rgba(255,255,255,.06); }
.u4t-action-btn svg { fill: currentColor; }

.u4t-cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--u4t-accent); color: #fff;
    border-radius: 9px;
    font-size: 10.5px; font-weight: 700; line-height: 1;
}

/* ── Navigation row (no visible separator) ── */
.u4t-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    gap: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    border-top: 1px solid var(--u4t-dark);
}
.u4t-nav-link {
    color: var(--u4t-white);
    text-decoration: none;
    font-family: var(--u4t-font);
    font-size: clamp(10px, 1.6vw, 12.5px);
    font-weight: 600;
    letter-spacing: clamp(0.4px, 0.12vw, 1.2px);
    text-transform: uppercase;
    padding: 6px clamp(8px, 1.8vw, 18px);
    border-radius: 3px;
    transition: color var(--u4t-transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.u4t-nav-link:hover,
.u4t-nav-link.is-active { color: var(--u4t-accent); }

/* -----------------------------------------------------------------------
   HERO
   ----------------------------------------------------------------------- */
.u4t-hero {
    position: relative;
    width: 100%;
    height: 72vh; min-height: 420px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 64px;
}
.u4t-hero::before {
    content: '';
    position: absolute;
    inset: -9%;
    background-image: var(--u4t-hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(0.87); /* ~13% zoom-out: reveals more of the source image */
    transform-origin: center;
    z-index: 0;
}
.u4t-hero-overlay {
    position: absolute; inset: 0;
    background: rgba(20,16,14,.38);
    z-index: 1;
}
.u4t-hero-content {
    position: relative; z-index: 2;
    text-align: center; padding: 0 24px;
}
.u4t-hero-title {
    font-family: var(--u4t-font);
    font-size: clamp(27px, 4.6vw, 55px); /* ~17% smaller than before */
    font-weight: 580; /* ~17% lighter than 700 (Raleway variable supports this) */
    color: var(--u4t-white);
    letter-spacing: 2px;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
    line-height: 1.15; margin: 0;
}

/* -----------------------------------------------------------------------
   PRODUCT CARDS — ShopLentor "Product Grid Modern" widget (confirmed markup)
   Card wrapper:    div.product.woolentor-product-item
   Image wrapper:   .woolentor-product-image
   Actions row:     .woolentor-quick-actions
     - wishlist:    .woolentor-quick-action.woolentor-wishlist-btn > a.wishsuite-btn
     - quick view:  button.woolentor-quickview-btn
     - compare:     .woolentor-quick-action > a.woolentor-compare
   Title:           h3.woolentor-product-title
   Add to cart:     a.woolentor-cart-btn.add_to_cart_button
   ----------------------------------------------------------------------- */

/* Remove any leftover sorting/filter widgets on the shop page.
   Confirmed real wrapper: .woolentor-product-filters (results count +
   sort dropdown + grid/list switcher) — hidden directly by its actual
   class, since it does not contain the substring "woolentor-filter". */
body.u4t-active .woolentor-product-filters,
body.u4t-active .woocommerce-ordering,
body.u4t-active .woocommerce-result-count,
body.u4t-active [class*="woolentor-filter"],
body.u4t-active [class*="woolentor-sorting"],
body.u4t-active [class*="orderby"] {
    display: none !important;
}

/* ── FIX: ShopLentor renders BOTH a grid-view and list-view copy of every
   product's content; if its own stylesheet isn't toggling visibility
   correctly, both stack on top of each other — causing oversized cards.
   Force only the grid copy to show. ── */
body.u4t-active .woolentor-grid-card .woolentor-list-view-content {
    display: none !important;
}
body.u4t-active .woolentor-grid-card .woolentor-grid-view-content {
    display: block !important;
}

/* ── FIX: the Elementor section/widget wrapping the product grid is
   constrained to a narrow fixed width by Elementor's own layout settings
   (leftover from a previous design), causing squeezed columns. Force full
   width; background matches the page (#2D2D2C), individual cards stand
   out as their own rounded white tiles. ── */
body.u4t-active .elementor-element-96b8c5f {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 36px !important;
    background: #2D2D2C !important;
}
body.u4t-active .elementor-element-05a39eb,
body.u4t-active .elementor-element-05a39eb .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}
/* Fallback in case the IDs above differ in future page edits: catch any
   Elementor flex container that directly wraps our product grid widget */
body.u4t-active .e-con:has([class*="elementor-widget-woolentor-product-grid"]) {
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    background: #2D2D2C !important;
}

/* ── Constrain the grid itself. CONFIRMED via real markup: the actual
   grid parent holding all product cards as direct children is
   .woolentor-product-grid-modern (id is dynamic per page load, so we
   target by class only) — NOT .elementor-widget-container, which is
   just its outer wrapper. ── */
body.u4t-active .woolentor-product-grid-modern {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* ── Card chrome: white rounded tile sitting against the dark page
   background, so each card reads as a distinct product container. ── */
body.u4t-active .woolentor-product-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.18) !important;
}
body.u4t-active .woolentor-product-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
body.u4t-active .woolentor-product-image img.woolentor-product-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease !important;
}
body.u4t-active .product.woolentor-product-item:hover .woolentor-product-image img.woolentor-product-img {
    transform: scale(1.05) !important;
}
body.u4t-active .woolentor-product-content {
    padding: 12px 12px 16px !important;
    text-align: center !important;
}
body.u4t-active .woolentor-product-category {
    display: block;
    font-family: var(--u4t-font);
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    margin-bottom: 3px !important;
}
body.u4t-active .woolentor-product-price {
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    color: var(--u4t-accent) !important;
    font-size: 13px !important;
    margin: 4px 0 2px !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .woolentor-product-price .woocommerce-price-suffix {
    color: #aaa !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
}
/* Price reverses to dark on card hover (title goes accent, price goes dark) */
body.u4t-active .product.woolentor-product-item:hover .woolentor-product-price {
    color: var(--u4t-dark) !important;
}

/* Card hover — subtle lift, image zoom carries most of the effect */
body.u4t-active .product.woolentor-product-item {
    transition: transform .28s ease !important;
}
body.u4t-active .product.woolentor-product-item:hover {
    transform: translateY(-4px) !important;
}

/* Remove dark overlay on image hover */
body.u4t-active .woolentor-product-image::before,
body.u4t-active .woolentor-product-image::after,
body.u4t-active .woolentor-product-card::before,
body.u4t-active .woolentor-product-card::after {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
}

/* Hide Quick View button entirely */
body.u4t-active .woolentor-quickview-btn {
    display: none !important;
}

/* Hide the Compare action */
body.u4t-active .woolentor-quick-actions > div.woolentor-quick-action:has(.woolentor-compare) {
    display: none !important;
}

/* Wishlist — hidden until card hover, then fades in top-right (matches
   reference site's icon-reveal-on-hover behavior) */
body.u4t-active .woolentor-quick-actions {
    position: absolute !important;
    top: 10px !important; right: 10px !important;
    left: auto !important; bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: none !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    transition: opacity .25s ease, transform .25s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
}
body.u4t-active .product.woolentor-product-item:hover .woolentor-quick-actions {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Wishlist button styling — icon only, circular pill */
body.u4t-active .woolentor-wishlist-btn {
    display: flex !important;
}
body.u4t-active .woolentor-wishlist-btn .wishsuite-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
    color: #333;
    transition: background var(--u4t-transition), color var(--u4t-transition);
}
body.u4t-active .woolentor-wishlist-btn .wishsuite-btn:hover {
    background: var(--u4t-accent);
    color: #fff;
}
body.u4t-active .woolentor-wishlist-btn .wishsuite-btn-text {
    display: none !important;
}
body.u4t-active .woolentor-wishlist-btn .wishsuite-btn svg {
    width: 15px;
    height: 15px;
}

/* Product title: Raleway, black → accent on card hover, centered */
body.u4t-active .woolentor-product-title {
    margin: 0 !important;
    font-size: 13.5px !important;
}
body.u4t-active .woolentor-product-title,
body.u4t-active .woolentor-product-title a {
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    color: #111 !important;
    text-decoration: none !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .product.woolentor-product-item:hover .woolentor-product-title,
body.u4t-active .product.woolentor-product-item:hover .woolentor-product-title a {
    color: var(--u4t-accent) !important;
}

/* Add to cart — full-width rectangular button matching reference design,
   accent background by default, dark on hover. Hidden until the specific
   card is hovered. Colors are reinforced via JS (see u4t-scripts.js) to
   guarantee they win regardless of any conflicting plugin CSS. */
body.u4t-active .woolentor-product-actions {
    text-align: center !important;
    margin-top: 14px !important;
    height: 42px !important; /* reserve space so layout doesn't jump on reveal */
}
body.u4t-active .woolentor-cart-btn,
body.u4t-active a.add_to_cart_button.woolentor-cart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--u4t-accent) !important;
    border: none !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(4px) !important;
    transition: background-color var(--u4t-transition), color var(--u4t-transition), opacity .22s ease, transform .22s ease, visibility .22s !important;
}
body.u4t-active .product.woolentor-product-item:hover .woolentor-cart-btn,
body.u4t-active .product.woolentor-product-item:hover a.add_to_cart_button.woolentor-cart-btn {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
body.u4t-active .woolentor-cart-btn .cart-icon,
body.u4t-active a.add_to_cart_button.woolentor-cart-btn .cart-icon {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
}
body.u4t-active .woolentor-cart-btn:hover,
body.u4t-active a.add_to_cart_button.woolentor-cart-btn:hover {
    background-color: var(--u4t-dark) !important;
    color: #ffffff !important;
}

/* View cart link — no hover background change, stays as-is on hover */
body.u4t-active .woocommerce-message a.button,
body.u4t-active .added_to_cart.wc-forward,
body.u4t-active a.added_to_cart {
    color: var(--u4t-accent) !important;
    border-color: var(--u4t-accent) !important;
    background: transparent !important;
}

/* -----------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */
#u4t-footer {
    background: #0a0a0a;   /* very dark — matches footer.png */
    color: rgba(255,255,255,.8);
    font-family: var(--u4t-font);
    margin-top: 80px;
}

.u4t-footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 52px 48px 44px;
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 40px;
    align-items: start;
}

/* ── Brand col ── */
.u4t-fcol-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.u4t-footer-logo-link { display: inline-block; line-height: 0; }
.u4t-footer-logo-img { width: 220px; max-width: 100%; height: auto; }

/* Social icons — centered, white, no hover color change */
.u4t-social { display: flex; gap: 16px; align-items: center; justify-content: center; }
.u4t-social-link {
    color: #ffffff;
    line-height: 0;
    display: inline-flex;
}
.u4t-social-link:hover { color: #ffffff; }

/* ── Navigation col (two sub-columns) ── */
.u4t-fcol-nav {
    display: flex;
    gap: 100px;
    justify-content: center;
    align-items: flex-start;
    padding-top: 4px;
}
.u4t-fnav-col { display: flex; flex-direction: column; gap: 22px; }
.u4t-fnav-col:first-of-type { margin-left: -7%; }
.u4t-footer-link {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color var(--u4t-transition);
}
.u4t-footer-link:hover { color: var(--u4t-white); }

/* ── Contact col ── */
.u4t-fcol-contact { padding-top: 2px; }

.u4t-footer-contact-heading {
    font-family: var(--u4t-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--u4t-white);
    letter-spacing: 1px;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.u4t-footer-contact-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.u4t-footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.65);
}
.u4t-contact-label {
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    font-weight: 500;
}
.u4t-footer-contact-list a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color var(--u4t-transition);
}
.u4t-footer-contact-list a:hover { color: var(--u4t-accent); }

/* ── Bottom copyright bar ── */
.u4t-footer-copyright {
    background: var(--u4t-dark);
    text-align: center;
    padding: 16px 24px;
}
.u4t-footer-copyright p {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-family: var(--u4t-font);
    font-size: 12.5px;
    letter-spacing: .5px;
}

/* -----------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .u4t-header-inner { padding: 0 20px; }
    .u4t-footer-inner {
        grid-template-columns: 1fr 1fr;
        padding: 40px 24px 32px;
    }
    .u4t-fcol-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 32px; }
    .u4t-fcol-nav   { justify-content: flex-start; gap: 60px; }
    .u4t-fnav-col:first-of-type { margin-left: 0; }
}

.u4t-nav-link .u4t-nav-short { display: none; }
.u4t-nav-link .u4t-nav-full { display: inline; }

@media (max-width: 768px) {
    body.u4t-active { padding-top: 152px !important; }

    .u4t-nav-link .u4t-nav-full { display: none; }
    .u4t-nav-link .u4t-nav-short { display: inline; }

    .u4t-header-inner { padding: 0 16px; }
    /* Top row: logo still 65%, actions 35% — same proportions at all sizes */
    .u4t-logo { flex: 0 0 65%; }
    .u4t-actions { flex: 0 0 35%; }
    .u4t-logo-img { max-height: 28px; }
    .u4t-account-label { display: none; }
    /* Search stays as full-width row 2 — no changes needed */
    /* Nav stays nowrap with clamp font — no changes needed */

    .u4t-hero { height: 50vh; margin-bottom: 40px; }

    .u4t-footer-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .u4t-fcol-brand { flex-direction: column; align-items: center; }
    .u4t-fcol-nav { justify-content: center; gap: 48px; }
    .u4t-fnav-col:first-of-type { margin-left: 0; }
    /* Keep each column's links left-aligned with each other — the
       inherited text-align:center from .u4t-footer-inner was centering
       each link's TEXT within a full-width stretched box, so short
       words (HOME) sat visibly offset from longer ones (PORTFOLIO). */
    .u4t-fnav-col { align-items: flex-start; text-align: left; }
    .u4t-footer-contact-list li { justify-content: center; }
}

/* -----------------------------------------------------------------------
   CART PAGE — WooCommerce Cart Block (confirmed real markup, standard
   WC Blocks class names — same across every WooCommerce install).
   Whole cart wrapped in a white rounded panel against the dark page
   background, same pattern as the shop product grid.
   ----------------------------------------------------------------------- */
body.u4t-active .wp-block-woocommerce-cart {
    max-width: 1100px;
    margin: 24px auto 80px;
    padding: 40px 36px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    font-family: var(--u4t-font);
}

/* Page titles ("Cart", "My account", "WishSuite", etc.) — sit directly on
   the dark background with poor default contrast in the theme's own
   styling. Rather than chase each theme's specific title class per page,
   hide ANY h1 on our target pages except our own hero title (which is
   shop-only and explicitly excluded here). */
body.u4t-active h1:not(.u4t-hero-title):not(.product_title) {
    display: none !important;
}

/* Cart-reserve "high demand" notice banner — match width/rounding to the
   main cart panel directly below it, with matching top margin so it sits
   at the same horizontal alignment */
body.u4t-active [class*="cart-reserve"],
body.u4t-active [class*="woolentor-cart-reserve"] {
    max-width: 1100px !important;
    margin: 48px auto 0 !important;
    padding: 18px 36px !important;
    border-radius: 14px !important;
    font-family: var(--u4t-font) !important;
}

/* Empty cart state */
body.u4t-active .wc-block-cart__empty-cart__title,
body.u4t-active .wp-block-woocommerce-empty-cart-block h2 {
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
    color: var(--u4t-dark) !important;
}
body.u4t-active .wp-block-woocommerce-empty-cart-block .wp-block-separator {
    border-color: #eee !important;
}

/* "New in store" upsell grid shown on empty cart — match shop card style */
body.u4t-active .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
}
body.u4t-active .wc-block-grid__product {
    background: #faf9f8;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 0 14px;
    text-align: center;
    transition: box-shadow var(--u4t-transition);
}
body.u4t-active .wc-block-grid__product:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
body.u4t-active .wc-block-grid__product-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
body.u4t-active .wc-block-grid__product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
body.u4t-active .wc-block-grid__product-title {
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--u4t-dark) !important;
    margin: 10px 0 2px !important;
}
body.u4t-active .wc-block-grid__product-price {
    font-family: var(--u4t-font) !important;
    color: var(--u4t-accent) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
body.u4t-active .wc-block-grid__product-add-to-cart .add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    background-color: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    transition: background-color var(--u4t-transition) !important;
}
body.u4t-active .wc-block-grid__product-add-to-cart .add_to_cart_button:hover {
    background-color: var(--u4t-dark) !important;
}

/* Filled cart — line items */
body.u4t-active .wc-block-cart-items th,
body.u4t-active .wc-block-cart-items__header-image,
body.u4t-active .wc-block-cart-items__header-product,
body.u4t-active .wc-block-cart-items__header-total {
    font-family: var(--u4t-font) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 11px;
    color: #999 !important;
}
body.u4t-active .wc-block-cart-item__product-name,
body.u4t-active .wc-block-components-product-name {
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    color: var(--u4t-dark) !important;
}
body.u4t-active .wc-block-components-product-price .wc-block-components-formatted-money-amount,
body.u4t-active .wc-block-cart-item__total .price {
    color: var(--u4t-accent) !important;
    font-weight: 600 !important;
}
body.u4t-active .wc-block-cart-item__remove-link {
    color: #999 !important;
    font-family: var(--u4t-font) !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .wc-block-cart-item__remove-link:hover {
    color: var(--u4t-accent) !important;
}

/* Order summary / totals panel */
body.u4t-active .wp-block-woocommerce-cart-order-summary-block,
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block,
body.u4t-active .wc-block-components-totals-wrapper {
    background: #ffffff !important;
    border-radius: 10px;
    padding: 20px;
}
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block * {
    background-color: transparent !important;
}
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block,
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text,
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name,
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label,
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block p,
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block span:not(.wc-block-formatted-money-amount) {
    color: var(--u4t-dark) !important;
}
body.u4t-active .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value {
    color: var(--u4t-accent) !important;
    font-weight: 700 !important;
}

/* New in store cross-sell grid — match shop grid card behavior:
   remove compare + wishlist text link, heart icon top-right, add-to-cart
   revealed only on hover. */
body.u4t-active .wc-block-grid__product .compare.button {
    display: none !important;
}
body.u4t-active .wc-block-grid__product {
    padding-bottom: 48px !important;
}
body.u4t-active .wc-block-grid__product .tinv-wraper.tinvwl-loop-button-wrapper {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 6 !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.u4t-active .wc-block-grid__product .tinvwl_add_to_wishlist_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
    color: #333 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    transition: background var(--u4t-transition), color var(--u4t-transition) !important;
}
body.u4t-active .wc-block-grid__product .tinvwl_add_to_wishlist_button::before {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
}
body.u4t-active .wc-block-grid__product .tinvwl_add_to_wishlist_button:hover {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
}
body.u4t-active .wc-block-grid__product .tinvwl-tooltip {
    display: none !important;
}
body.u4t-active .wc-block-grid__product .wc-block-grid__product-add-to-cart {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 14px 14px !important;
    width: auto !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}
body.u4t-active .wc-block-grid__product:hover .wc-block-grid__product-add-to-cart {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Empty-cart "New in store" cross-sell grid (WC core Product-New block) —
   core WC CSS assumes a flexbox grid (flex:1 0 25%; max-width:25%) but the
   live markup renders a CSS grid instead, so max-width:25% resolves against
   the 224px grid CELL (56px!) instead of the row, crushing each card into
   a single vertical column of text. Force items to fill their grid cell. */
body.u4t-active .wc-block-grid__product {
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
}

/* Order notes textarea — invisible dark-on-dark by default */
body.u4t-active .wc-block-components-textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 4px !important;
}

/* Checkout Place Order button sits directly on the dark page background,
   unlike the cart's Proceed to Checkout button (which sits on a light
   panel) — needs a hover color other than our dark #2D2D2C. */
body.u4t-active .wc-block-components-checkout-place-order-button:hover {
    background-color: var(--u4t-accent) !important;
    opacity: .85 !important;
}
body.u4t-active .wc-block-components-totals-item__label,
body.u4t-active .wc-block-components-totals-item__value {
    font-family: var(--u4t-font) !important;
}
body.u4t-active .wc-block-components-totals-item.wc-block-cart__totals-row--full-width .wc-block-components-totals-item__value,
body.u4t-active .wc-block-cart__totals-row .wc-block-components-totals-item__value {
    color: var(--u4t-accent) !important;
    font-weight: 700 !important;
}

/* Proceed to Checkout button */
body.u4t-active .wp-block-woocommerce-proceed-to-checkout-block .wp-element-button,
body.u4t-active .wc-block-cart__submit-button,
body.u4t-active .wc-block-components-checkout-place-order-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background-color: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 3px !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    transition: background-color var(--u4t-transition) !important;
}
body.u4t-active .wp-block-woocommerce-proceed-to-checkout-block .wp-element-button:hover,
body.u4t-active .wc-block-cart__submit-button:hover {
    background-color: var(--u4t-dark) !important;
}

/* Coupon form */
body.u4t-active .wc-block-components-totals-coupon__button,
body.u4t-active .wc-block-cart__totals-coupon-form .wc-block-components-button {
    background-color: var(--u4t-dark) !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    font-family: var(--u4t-font) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    transition: background-color var(--u4t-transition) !important;
}
body.u4t-active .wc-block-components-totals-coupon__button:hover,
body.u4t-active .wc-block-cart__totals-coupon-form .wc-block-components-button:hover {
    background-color: var(--u4t-accent) !important;
}

@media (max-width: 768px) {
    body.u4t-active .wp-block-woocommerce-cart {
        margin: 32px 16px 60px;
        padding: 24px 20px;
    }
}

/* -----------------------------------------------------------------------
   CHECKOUT PAGE — comprehensive white text for left panel
   The left panel (contact info, billing, shipping, payment) sits
   directly on the dark #2D2D2C page background. All labels, headings,
   help text, descriptions, and standalone text must be white.
   Input field TEXT stays dark (white background inputs).
   ----------------------------------------------------------------------- */

/* Logo size */
body.u4t-active .custom-logo,
body.u4t-active .wp-block-site-logo img {
    max-width: 210px !important;
    width: auto !important;
    height: auto !important;
}

/* Breadcrumbs */
body.u4t-active [class*="breadcrumb"],
body.u4t-active [class*="breadcrumb"] a,
body.u4t-active [class*="breadcrumb"] span {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}

/* Broad white text rule for the entire checkout form panel.
   Catches every heading, label, description, and help text
   regardless of exact WooCommerce Blocks class naming. */
body.u4t-active .wp-block-woocommerce-checkout-fields-block,
body.u4t-active .wc-block-checkout__main,
body.u4t-active .wc-block-checkout__form,
body.u4t-active .wc-block-checkout__contact-fields,
body.u4t-active .wc-block-checkout__billing-fields,
body.u4t-active .wc-block-checkout__shipping-fields,
body.u4t-active .wc-block-checkout__payment-method,
body.u4t-active .wc-block-checkout__payment {
    color: #ffffff !important;
}

/* All text nodes, labels, paragraphs, spans within left panel */
body.u4t-active .wc-block-checkout__main *:not(input):not(select):not(textarea):not(button),
body.u4t-active .wc-block-components-checkout-step__heading,
body.u4t-active .wc-block-components-checkout-step__heading-text,
body.u4t-active .wc-block-components-checkout-step__description,
body.u4t-active .wc-block-components-checkout-step__description *,
body.u4t-active .wc-block-components-checkbox__label,
body.u4t-active .wc-block-checkout__create-account label,
body.u4t-active .wc-block-checkout__create-account,
body.u4t-active .wc-block-components-checkout-step p,
body.u4t-active .wc-block-components-checkout-step span:not(button span),
body.u4t-active [class*="login-prompt"],
body.u4t-active [class*="login-prompt"] *:not(a),
body.u4t-active [class*="return-to-cart"],
body.u4t-active .wc-block-checkout__payment-method p,
body.u4t-active .wc-block-checkout__payment-method label,
body.u4t-active .wc-block-components-payment-method-label,
body.u4t-active .wc-block-components-payment-method-description {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}

/* Links in checkout form */
body.u4t-active [class*="login-prompt"] a {
    color: var(--u4t-accent) !important;
}

/* Floating labels that sit INSIDE white input/select boxes — must read as
   light gray suggestion text, not white (which was invisible on white). */
body.u4t-active .wc-block-checkout__main .wc-block-components-text-input label,
body.u4t-active .wc-block-checkout__main .wc-blocks-components-select__label,
body.u4t-active .wc-block-components-text-input label,
body.u4t-active .wc-blocks-components-select__label {
    color: #999999 !important;
}

/* Keep input field text dark (white bg inputs) */
body.u4t-active .wc-block-checkout__main input,
body.u4t-active .wc-block-checkout__main select,
body.u4t-active .wc-block-checkout__main textarea {
    color: #222222 !important;
}

/* Privacy Policy / Terms links — white default, accent on hover */
body.u4t-active .wc-block-checkout__terms a,
body.u4t-active .wc-block-checkout__privacy-text a,
body.u4t-active .wc-block-components-checkout-policies-link a,
body.u4t-active [class*="policies-link"] a {
    color: #ffffff !important;
    text-decoration: underline !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .wc-block-checkout__terms a:hover,
body.u4t-active .wc-block-checkout__privacy-text a:hover,
body.u4t-active [class*="policies-link"] a:hover {
    color: var(--u4t-accent) !important;
}
body.u4t-active .wc-block-checkout__terms,
body.u4t-active .wc-block-checkout__privacy-text {
    color: #ffffff !important;
}



/* -----------------------------------------------------------------------
   MY ACCOUNT PAGE — classic WooCommerce login/register template
   (myaccount/form-login.php) — extremely stable, standard class names
   across virtually every WooCommerce install, high confidence here.
   ----------------------------------------------------------------------- */

/* "My account" page title — covered by the universal h1 hide above */

/* "Login" / "Register" column headings */
body.u4t-active #customer_login h2 {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
}

/* Login/Register form containers — labels, paragraph copy, checkbox
   label text all turn white to read against the dark page background */
body.u4t-active .u-column1.col-1,
body.u4t-active .u-column2.col-2 {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}

/* Typed input text stays dark — readable against the white input boxes,
   not affected by the white color cascading from the column above */
body.u4t-active .u-column1.col-1 input,
body.u4t-active .u-column2.col-2 input {
    color: #222222 !important;
}

/* Keep the required-field asterisk red and visible against the dark bg */
body.u4t-active .u-column1.col-1 .required,
body.u4t-active .u-column2.col-2 .required {
    color: #ff5252 !important;
}

/* "Lost your password?" and "privacy policy" links — accent color
   instead of the theme's default pink, with a subtle dark hover */
body.u4t-active .woocommerce-LostPassword a,
body.u4t-active .woocommerce-privacy-policy-text a {
    color: var(--u4t-accent) !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .woocommerce-LostPassword a:hover,
body.u4t-active .woocommerce-privacy-policy-text a:hover {
    color: var(--u4t-dark) !important;
}


/* My Account — logged-in dashboard navigation and content */
body.u4t-active .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}
body.u4t-active .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.u4t-active .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 10px 0 !important;
    color: var(--u4t-accent) !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    letter-spacing: .5px !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .woocommerce-MyAccount-navigation li a:hover,
body.u4t-active .woocommerce-MyAccount-navigation li.is-active a {
    color: #ffffff !important;
}
/* Dashboard content area — white text */
body.u4t-active .woocommerce-MyAccount-content,
body.u4t-active .woocommerce-MyAccount-content p,
body.u4t-active .woocommerce-MyAccount-content table,
body.u4t-active .woocommerce-MyAccount-content td,
body.u4t-active .woocommerce-MyAccount-content th {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active .woocommerce-MyAccount-content h2,
body.u4t-active .woocommerce-MyAccount-content h3,
body.u4t-active .woocommerce-MyAccount-content h4 {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
}
body.u4t-active .woocommerce-MyAccount-content a {
    color: var(--u4t-accent) !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .woocommerce-MyAccount-content a:hover {
    color: #ffffff !important;
}
/* Order table borders */
body.u4t-active .woocommerce-MyAccount-content table.shop_table {
    border-color: rgba(255,255,255,.12) !important;
}
body.u4t-active .woocommerce-MyAccount-content table.shop_table th,
body.u4t-active .woocommerce-MyAccount-content table.shop_table td {
    border-color: rgba(255,255,255,.08) !important;
}
/* -----------------------------------------------------------------------
   WISHLIST PAGE — TI WooCommerce Wishlist (ti-woocommerce-wishlist)
   Confirmed real markup from templates/ti-wishlist.php + ti-wishlist-empty.php:
   outer wrapper .tinv-wishlist, table .tinvwl-table-manage-list, rows
   tr.wishlist_item, cells .product-remove/.product-thumbnail/.product-name/
   .product-price/.product-stock/.product-action, icon font .ftinvwl,
   pagination .tinv-lists-nav, empty state p.cart-empty.woocommerce-info.
   ----------------------------------------------------------------------- */

/* Outer wrapper — white rounded panel matching cart page */
body.u4t-active .tinv-wishlist {
    max-width: 1100px !important;
    margin: 28px auto 16px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.25) !important;
    padding: 0 !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active .tinv-wishlist form {
    margin: 0 !important;
}

/* Empty state */
body.u4t-active .tinv-wishlist p.cart-empty.woocommerce-info {
    padding: 40px 24px !important;
    margin: 0 !important;
    text-align: center !important;
    color: #999 !important;
    font-family: var(--u4t-font) !important;
    font-size: 14px !important;
    border: none !important;
    background: none !important;
}
body.u4t-active .tinv-wishlist p.return-to-shop {
    text-align: center !important;
    padding: 0 24px 32px !important;
    margin: 0 !important;
}
body.u4t-active .tinv-wishlist p.return-to-shop a.button.wc-backward {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 3px !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 12px 22px !important;
    transition: background-color var(--u4t-transition) !important;
}
body.u4t-active .tinv-wishlist p.return-to-shop a.button.wc-backward:hover {
    background-color: var(--u4t-dark) !important;
}

/* Table */
body.u4t-active .tinvwl-table-manage-list {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
    font-family: var(--u4t-font) !important;
}

/* Header row */
body.u4t-active .tinvwl-table-manage-list thead th {
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #999 !important;
    border-bottom: 1px solid #eee !important;
    padding: 18px 14px !important;
    background: #ffffff !important;
    text-align: left !important;
}

/* Product rows */
body.u4t-active .tinvwl-table-manage-list tbody tr.wishlist_item td {
    padding: 16px 14px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f2f2f2 !important;
    color: #333 !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active .tinvwl-table-manage-list tbody tr.wishlist_item:last-child td {
    border-bottom: none !important;
}

/* Remove (X icon) button */
body.u4t-active .tinvwl-table-manage-list .product-remove button {
    background: none !important;
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    color: #aaa !important;
    font-size: 15px !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .tinvwl-table-manage-list .product-remove button:hover {
    color: var(--u4t-accent) !important;
}

/* Thumbnail */
body.u4t-active .tinvwl-table-manage-list .product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

/* Product name link */
body.u4t-active .tinvwl-table-manage-list .product-name a {
    color: var(--u4t-accent) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .tinvwl-table-manage-list .product-name a:hover {
    color: var(--u4t-dark) !important;
}

/* Price */
body.u4t-active .tinvwl-table-manage-list .product-price {
    color: var(--u4t-accent) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Stock status icons (ftinvwl-check / ftinvwl-times) */
body.u4t-active .tinvwl-table-manage-list .product-stock .stock {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    color: #666 !important;
}
body.u4t-active .tinvwl-table-manage-list .product-stock .stock .ftinvwl-check {
    color: #2e7d32 !important;
}
body.u4t-active .tinvwl-table-manage-list .product-stock .stock.out-of-stock .ftinvwl-times {
    color: #c62828 !important;
}

/* Add to cart button in wishlist row */
body.u4t-active .tinvwl-table-manage-list .product-action button.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background-color: var(--u4t-accent) !important;
    border: none !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    padding: 9px 14px !important;
    cursor: pointer !important;
    transition: background-color var(--u4t-transition) !important;
}
body.u4t-active .tinvwl-table-manage-list .product-action button.button:hover {
    background-color: var(--u4t-dark) !important;
}

/* Checkbox column */
body.u4t-active .tinvwl-table-manage-list .product-cb {
    width: 32px !important;
    text-align: center !important;
}

/* Pagination / nav below the panel — sits directly on the dark page bg */
body.u4t-active .tinv-lists-nav {
    max-width: 1100px !important;
    margin: 0 auto 80px !important;
    text-align: center !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active .tinv-lists-nav a,
body.u4t-active .tinv-lists-nav span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    margin: 0 3px !important;
    padding: 0 8px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: rgba(255,255,255,.7) !important;
    background: rgba(255,255,255,.08) !important;
    transition: background var(--u4t-transition), color var(--u4t-transition) !important;
}
body.u4t-active .tinv-lists-nav a:hover,
body.u4t-active .tinv-lists-nav span.current {
    background: var(--u4t-accent) !important;
    color: #fff !important;
}
/* -----------------------------------------------------------------------
   SINGLE PRODUCT PAGE v6.10
   ----------------------------------------------------------------------- */

body.u4t-active.single-product .woocommerce {
    max-width: 1140px !important;
    margin: 36px auto 0 !important;
    padding: 0 36px !important;
    background: transparent !important;
}

/* Breadcrumb */
body.u4t-active .woocommerce-breadcrumb {
    font-family: var(--u4t-font) !important;
    font-size: 12px !important;
    color: rgba(255,255,255,.4) !important;
    margin-bottom: 24px !important;
}
body.u4t-active .woocommerce-breadcrumb a {
    color: rgba(255,255,255,.55) !important;
    text-decoration: none !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active .woocommerce-breadcrumb a:hover { color: var(--u4t-accent) !important; }

/* Two-column product area — flex-wrap:wrap so related section gets its own row */
body.u4t-active .woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 52px !important;
    align-items: flex-start !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Gallery ── */
body.u4t-active .woocommerce-product-gallery {
    flex: 0 0 42% !important;
    max-width: 42% !important;
    position: relative !important;
    opacity: 1 !important;
}
body.u4t-active .woocommerce-product-gallery__image,
body.u4t-active .woocommerce-product-gallery__image a {
    display: block !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
    cursor: default !important; /* suppress zoom cursor */
}
body.u4t-active .woocommerce-product-gallery .wp-post-image,
body.u4t-active .woocommerce-product-gallery__image img {
    width: 100% !important;
    max-height: 380px !important;
    height: 380px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 10px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    transition: none !important; /* no hover movement */
    transform: none !important;
}
/* Kill WooCommerce's zoom overlay completely */
body.u4t-active .zoomImg { display: none !important; }
body.u4t-active .woocommerce-product-gallery__trigger { display: none !important; }

/* Thumbnail strip */
body.u4t-active .flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
}
body.u4t-active .flex-control-thumbs li { flex: 0 0 58px !important; }
body.u4t-active .flex-control-thumbs li img {
    width: 58px !important;
    height: 58px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    opacity: .5 !important;
    border: 2px solid transparent !important;
    transition: opacity .2s, border-color .2s !important;
}
body.u4t-active .flex-control-thumbs li img.flex-active,
body.u4t-active .flex-control-thumbs li img:hover {
    opacity: 1 !important;
    border-color: var(--u4t-accent) !important;
}

/* Wishlist pill on gallery — positioned by JS */
body.u4t-active .u4t-gallery-wishlist {
    position: absolute !important;
    top: 10px !important; right: 10px !important;
    z-index: 10 !important;
    width: 34px !important; height: 34px !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #333 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
    transition: background var(--u4t-transition), color var(--u4t-transition) !important;
    font-size: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.u4t-active .u4t-gallery-wishlist:hover {
    background: var(--u4t-accent) !important;
    color: #fff !important;
}
/* Show only the heart SVG path; hide loading spinner + check groups */
body.u4t-active .u4t-gallery-wishlist svg { width: 15px !important; height: 15px !important; }
body.u4t-active .u4t-gallery-wishlist svg g.loading,
body.u4t-active .u4t-gallery-wishlist svg g.check { display: none !important; }
body.u4t-active .u4t-gallery-wishlist svg path.heart { display: block !important; }

/* ── Summary ── */
body.u4t-active .summary.entry-summary {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Title */
body.u4t-active .product_title.entry-title {
    font-family: var(--u4t-font) !important;
    font-size: clamp(20px, 2.4vw, 30px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    display: block !important;
}

/* Price */
body.u4t-active .summary .price {
    display: block !important;
    font-family: var(--u4t-font) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--u4t-accent) !important;
    margin: 0 0 18px !important;
}
body.u4t-active .summary .price bdi { color: var(--u4t-accent) !important; }
body.u4t-active .summary .price .woocommerce-price-suffix {
    font-size: 12px !important; font-weight: 400 !important;
    color: rgba(255,255,255,.4) !important;
}

/* Description */
body.u4t-active .woocommerce-product-details__short-description {
    font-family: var(--u4t-font) !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
    color: rgba(255,255,255,.72) !important;
    margin: 0 0 22px !important;
}
body.u4t-active .woocommerce-product-details__short-description p {
    margin: 0 !important; color: inherit !important;
}

/* Attributes / dimensions */
body.u4t-active .woocommerce-product-attributes {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 26px !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active .woocommerce-product-attributes-item {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body.u4t-active .woocommerce-product-attributes-item:first-child {
    border-top: 1px solid rgba(255,255,255,.08) !important;
}
/* Unify border color: WooCommerce core puts its own dotted black
   border-bottom directly on th/td (on top of our solid gray border on
   the row), which shows as a mismatched double border. Strip it so the
   only visible line is our single grayish row border. */
body.u4t-active .woocommerce-product-attributes-item__label,
body.u4t-active .woocommerce-product-attributes-item__value {
    border: none !important;
}
body.u4t-active .woocommerce-product-attributes-item__label {
    padding: 10px 16px 10px 0 !important;
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
    color: rgba(255,255,255,.38) !important; width: 36% !important;
}
body.u4t-active .woocommerce-product-attributes-item__value {
    padding: 10px 0 10px 16px !important;
    font-size: 14px !important; font-weight: 500 !important;
    color: rgba(255,255,255,.82) !important;
}
/* WooCommerce core's woocommerce-smallscreen.css forces the label and
   value onto separate stacked block lines below 768px. Force them back
   into a single row (label column + value column), same spirit as
   desktop, per explicit preference. */
@media (max-width: 768px) {
    body.u4t-active .woocommerce-product-attributes-item {
        display: flex !important;
        align-items: baseline !important;
        width: 100% !important;
    }
    body.u4t-active .woocommerce-product-attributes-item__label {
        display: block !important;
        flex: 0 0 36% !important;
        max-width: 36% !important;
        width: 36% !important;
        padding: 10px 12px 10px 0 !important;
    }
    body.u4t-active .woocommerce-product-attributes-item__value {
        display: block !important;
        flex: 1 1 auto !important;
        max-width: 64% !important;
        width: auto !important;
        padding: 10px 0 10px 12px !important;
    }
}
/* Remove WooCommerce core's even-row zebra-stripe tint so the table has
   no row background at all. */
body.u4t-active .woocommerce-product-attributes tr:nth-child(even) td,
body.u4t-active .woocommerce-product-attributes tr:nth-child(even) th,
body.u4t-active table.shop_attributes tr:nth-child(even) td,
body.u4t-active table.shop_attributes tr:nth-child(even) th,
body.u4t-active .woocommerce-product-attributes-item:nth-child(even) {
    background: transparent !important;
}
body.u4t-active .woocommerce-product-attributes-item__value p {
    margin: 0 !important; color: inherit !important;
}

/* Cart row */
body.u4t-active .cart {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}
body.u4t-active .cart .quantity { display: none !important; }

/* Add to Cart — accent, stays accent */
body.u4t-active .single_add_to_cart_button {
    flex: 1 !important;
    background-color: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 3px !important;
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    padding: 14px 24px !important;
    cursor: pointer !important;
    transition: opacity var(--u4t-transition) !important;
}
body.u4t-active .single_add_to_cart_button:hover {
    background-color: var(--u4t-accent) !important;
    opacity: .82 !important;
}

/* Hide unwanted elements */
body.u4t-active .summary .wishsuite-button,
body.u4t-active .summary a.wishsuite-btn:not(.u4t-gallery-wishlist),
body.u4t-active .summary a[class*="wishsuite"]:not(.u4t-gallery-wishlist),
body.u4t-active .summary [class*="wishsuite-product"],
body.u4t-active .htcompare-btn,
body.u4t-active .yith-woocompare-add-button,
body.u4t-active .posted_in,
body.u4t-active.single-product form.cart .tinv-wraper:not(.u4t-gallery-wishlist) { display: none !important; }
/* .woocommerce-tabs (Description/Additional Info/Reviews) re-enabled per request */


/* ── Our own related products (replaces WooCommerce/ShopLentor output) ── */
body.u4t-active .u4t-related {
    margin-top: 52px;
    padding-top: 48px;
    border-top: 1px solid rgba(255,255,255,.12);
    margin-bottom: 80px;
}
body.u4t-active .u4t-related-heading {
    font-family: var(--u4t-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin: 0 0 24px;
}
body.u4t-active .u4t-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
body.u4t-active .u4t-related-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.2);
    transition: transform .25s ease;
}
body.u4t-active .u4t-related-card:hover {
    transform: translateY(-4px);
}
body.u4t-active .u4t-related-img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
body.u4t-active .u4t-related-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease;
}
body.u4t-active .u4t-related-card:hover .u4t-related-img {
    transform: scale(1.05);
}
body.u4t-active .u4t-related-info {
    padding: 12px 14px 16px;
}
body.u4t-active .u4t-related-title {
    font-family: var(--u4t-font);
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
    transition: color var(--u4t-transition);
    line-height: 1.35;
}
body.u4t-active .u4t-related-card:hover .u4t-related-title {
    color: var(--u4t-accent);
}
body.u4t-active .u4t-related-price {
    font-family: var(--u4t-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--u4t-accent);
}

/* Related products re-enabled per request — styled in the RELATED
   PRODUCTS section appended at the end of this file. */

/* Responsive */
@media (max-width: 768px) {
    body.u4t-active.single-product .woocommerce { padding: 0 16px !important; margin: 20px auto 0 !important; }
    body.u4t-active .woocommerce div.product { gap: 28px !important; }
    body.u4t-active .woocommerce-product-gallery,
    body.u4t-active .summary.entry-summary { flex: 0 0 100% !important; max-width: 100% !important; }
    body.u4t-active .related.products ul.products { grid-template-columns: 1fr !important; }
}

/* -----------------------------------------------------------------------
   PRODUCT CATEGORY / TAG ARCHIVE PAGES
   Inherits all header, footer, dark background and card CSS from the
   shop page automatically (same body.u4t-active scope).
   Extra rules here handle category-specific layout elements.
   ----------------------------------------------------------------------- */

/* Page wrapper — match shop page layout */
body.u4t-active.tax-product_cat .woocommerce,
body.u4t-active.tax-product_tag .woocommerce {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 36px !important;
    background: transparent !important;
}

/* Category title / description banner — hide (same treatment as shop title) */
body.u4t-active .woocommerce-products-header,
body.u4t-active .woocommerce-products-header__title,
body.u4t-active .term-description,
body.u4t-active .category-image { display: none !important; }

/* Standard WooCommerce loop fallback — if this category page does NOT
   use the ShopLentor Elementor widget, it outputs ul.products li.product.
   Style these cards to match our shop card aesthetic. */
body.u4t-active ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    max-width: 80% !important;
    margin: 32px auto 64px !important;
}
body.u4t-active ul.products::before,
body.u4t-active ul.products::after {
    content: none !important;
    display: none !important;
}

body.u4t-active ul.products li.product {
    width: 100% !important;
    float: none !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.18) !important;
    transition: transform .28s ease !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.u4t-active ul.products li.product:hover {
    transform: translateY(-4px) !important;
}
body.u4t-active ul.products li.product a img:not(.attachment-woocommerce_thumbnail) {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
body.u4t-active ul.products li.product:hover a img {
    transform: scale(1.05) !important;
}
body.u4t-active ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--u4t-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #111 !important;
    padding: 14px 14px 4px !important;
    margin: 0 !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active ul.products li.product:hover .woocommerce-loop-product__title {
    color: var(--u4t-accent) !important;
}
body.u4t-active ul.products li.product .price {
    display: block !important;
    font-family: var(--u4t-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--u4t-accent) !important;
    padding: 2px 14px 14px !important;
    margin: 0 !important;
}
body.u4t-active ul.products li.product .price .woocommerce-price-suffix {
    font-size: 10.5px !important;
    color: #aaa !important;
    font-weight: 400 !important;
}

/* Add to cart button on standard loop cards —
   hidden until card hover, same style as shop cards */
body.u4t-active ul.products li.product a.button.add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 14px 14px !important;
    padding: 10px !important;
    background: var(--u4t-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: var(--u4t-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(4px) !important;
    transition: background-color var(--u4t-transition), opacity .22s ease,
                visibility .22s ease, transform .22s ease !important;
}
body.u4t-active ul.products li.product:hover a.button.add_to_cart_button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
body.u4t-active ul.products li.product:hover a.button.add_to_cart_button:hover {
    background: var(--u4t-dark) !important;
}

/* Hide quick view / compare on standard loop */
body.u4t-active ul.products li.product .yith-wcqv-button,
body.u4t-active ul.products li.product [class*="quick-view"],
body.u4t-active ul.products li.product [class*="quickview"],
body.u4t-active ul.products li.product .htcompare-btn,
body.u4t-active ul.products li.product [class*="compare"] { display: none !important; }

/* Pagination */
body.u4t-active .woocommerce-pagination {
    text-align: center !important;
    margin: 0 0 64px !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active .woocommerce-pagination a,
body.u4t-active .woocommerce-pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 3px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: rgba(255,255,255,.7) !important;
    background: rgba(255,255,255,.08) !important;
    transition: background var(--u4t-transition), color var(--u4t-transition) !important;
}
body.u4t-active .woocommerce-pagination a:hover,
body.u4t-active .woocommerce-pagination span.current {
    background: var(--u4t-accent) !important;
    color: #fff !important;
}


/* -----------------------------------------------------------------------
   PRODUCT CARD OVERRIDES — Theratio theme's actual product-loop markup
   Confirmed real structure: li.product > div.product-media > (img +
   div.wrapper-add-to-cart[.add-to-cart-inner > a.add_to_cart_button,
   button.woosq-btn (quick view), div.tinv-wraper...>a.tinvwl_add_to_wishlist_button
   (heart icon via ::before, tinvwl-webfont), a.compare.button]), then
   h2.woocommerce-loop-product__title > a, span.price (siblings of product-media).
   ----------------------------------------------------------------------- */

/* Grid alignment — explicit start alignment so rows never look ragged/offset */
body.u4t-active ul.products {
    justify-content: start !important;
    justify-items: stretch !important;
}

/* Product image — show full image uncropped, matching single product page */
body.u4t-active ul.products li.product .product-media {
    background: #ffffff !important;
    position: static !important;
}
body.u4t-active ul.products li.product img.attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

/* Title — brand red (was white-on-white, invisible) */
body.u4t-active ul.products li.product .woocommerce-loop-product__title,
body.u4t-active ul.products li.product .woocommerce-loop-product__title a {
    color: var(--u4t-accent) !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
}

/* Price — bold, brand dark */
body.u4t-active ul.products li.product .price,
body.u4t-active ul.products li.product .price .woocommerce-Price-amount,
body.u4t-active ul.products li.product .price bdi {
    color: var(--u4t-dark) !important;
    font-weight: 700 !important;
}
body.u4t-active ul.products li.product .price .woocommerce-price-suffix {
    font-weight: 400 !important;
    color: #999 !important;
}

/* Neutralize the theme's own image-overlay wrapper — we reposition each
   action individually instead of using its built-in overlay behavior */
body.u4t-active ul.products li.product .wrapper-add-to-cart {
    position: static !important;
    top: auto !important;
    right: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Remove Quick View and Compare entirely */
body.u4t-active ul.products li.product .woosq-btn,
body.u4t-active ul.products li.product .compare.button {
    display: none !important;
}

/* Wishlist — icon-only heart, fixed top-right of the card, always visible,
   with breathing room from the edge (not flush against the border) */
body.u4t-active ul.products li.product .tinv-wraper.tinvwl-loop-button-wrapper {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 6 !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    /* Neutralize the .woocommerce/.tinv-wishlist panel styling (page
       padding, card shadow/radius) this wrapper inherits purely from
       sharing those classes — none of it belongs on this icon wrapper. */
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.u4t-active ul.products li.product .tinvwl_add_to_wishlist_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
    color: #333 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    transition: background var(--u4t-transition), color var(--u4t-transition) !important;
}
body.u4t-active ul.products li.product .tinvwl_add_to_wishlist_button::before {
    font-size: 15px !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
}
body.u4t-active ul.products li.product .tinvwl_add_to_wishlist_button:hover {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
}
/* Hide the plugin's own tooltip text bubble to keep it icon-only */
body.u4t-active ul.products li.product .tinvwl-tooltip {
    display: none !important;
}

/* Add to cart — reveal at the bottom of the card, below title + price,
   on hovering anywhere over the card */
body.u4t-active ul.products li.product {
    padding-bottom: 48px !important;
}
body.u4t-active ul.products li.product .add-to-cart-inner {
    position: static !important;
}
body.u4t-active ul.products li.product .add-to-cart-inner a.add_to_cart_button {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 14px 14px !important;
    width: auto !important;
    z-index: 5 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}
body.u4t-active ul.products li.product:hover .add-to-cart-inner a.add_to_cart_button {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
body.u4t-active ul.products li.product .add-to-cart-inner a.add_to_cart_button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--u4t-accent) !important;
    border: none !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    transition: background-color var(--u4t-transition) !important;
}
body.u4t-active ul.products li.product .add-to-cart-inner a.add_to_cart_button:hover {
    background-color: var(--u4t-dark) !important;
}

/* -----------------------------------------------------------------------
   CONTENT WIDTH — constrain single product / cart / checkout / my-account
   to match the product grid's 80% width (was full-bleed 100%)
   ----------------------------------------------------------------------- */
body.u4t-active.single-product div.product {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
body.u4t-active.woocommerce-cart .wp-block-woocommerce-cart {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.u4t-active.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.u4t-active.woocommerce-account .woocommerce {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* -----------------------------------------------------------------------
   SINGLE PRODUCT — wishlist moved to a heart icon over the gallery image
   (matches the shop-grid card treatment). See RELOCATED WISHLIST ICON
   section further down for the .u4t-gallery-wishlist styling; the
   original text link stays in the DOM (for the plugin's own JS) but is
   hidden via the .tinv-wraper rule above.
   ----------------------------------------------------------------------- */


/* -----------------------------------------------------------------------
   CART — WooCommerce Blocks markup (wp-block-woocommerce-cart-*), not the
   classic shortcode cart. Fixes low-contrast totals panel (gray text on
   near-white card) and gives the quantity stepper a visible treatment.
   ----------------------------------------------------------------------- */
body.u4t-active.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block,
body.u4t-active.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block * {
    color: var(--u4t-dark) !important;
}
body.u4t-active.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
    border-radius: 12px !important;
    padding: 20px !important;
}
body.u4t-active.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item__value,
body.u4t-active.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--u4t-accent) !important;
    font-weight: 700 !important;
}
body.u4t-active.woocommerce-cart .wc-block-components-quantity-selector {
    border-color: rgba(255,255,255,.25) !important;
}
body.u4t-active.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    color: var(--u4t-accent) !important;
}
body.u4t-active.woocommerce-cart .wc-block-cart-item__product-name,
body.u4t-active.woocommerce-cart .wc-block-cart-item__product-name a {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
    font-weight: 600 !important;
}
body.u4t-active.woocommerce-cart .wc-block-components-product-price .wc-block-components-formatted-money-amount {
    color: var(--u4t-accent) !important;
    font-weight: 700 !important;
}
body.u4t-active.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a {
    border-radius: 4px !important;
    font-family: var(--u4t-font) !important;
    letter-spacing: 1px !important;
}


/* -----------------------------------------------------------------------
   CHECKOUT — WooCommerce Blocks markup. Country/state <select> elements
   render with a transparent background + dark text, which is invisible
   against the dark page (unlike the text inputs, which already have a
   white background from the theme's default block styling).
   ----------------------------------------------------------------------- */
body.u4t-active.woocommerce-checkout .wp-block-woocommerce-checkout select,
body.u4t-active.woocommerce-checkout .wc-block-components-select .wc-block-components-select__select {
    background-color: #ffffff !important;
    color: #222222 !important;
}
body.u4t-active.woocommerce-checkout .wp-block-woocommerce-checkout h2,
body.u4t-active.woocommerce-checkout .wc-block-components-checkout-step__title {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    border-radius: 4px !important;
    font-family: var(--u4t-font) !important;
    letter-spacing: 1px !important;
}

/* -----------------------------------------------------------------------
   FORM.CART — was a squeezed flex row (flex:1 + flex-shrink on the Add
   to Cart button caused it to collapse to ~48px, wrapping "ADD TO CART"
   one letter per line). Rebuilt as a full-width vertical stack:
   Add to Cart, then Apple Pay below it, each 100% of the summary column.
   ----------------------------------------------------------------------- */
body.u4t-active.single-product form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 28px !important;
}
body.u4t-active.single-product form.cart button.single_add_to_cart_button {
    flex: 0 0 auto !important;
    width: 100% !important;
    white-space: nowrap !important;
    order: 1 !important;
}
body.u4t-active.single-product form.cart #moyasar-apple-pay-product-container {
    flex: 0 0 auto !important;
    width: 100% !important;
    order: 2 !important;
    margin: 0 !important;
}
body.u4t-active.single-product form.cart #moyasar-apple-pay-product-container apple-pay-button {
    width: 100% !important;
    display: block !important;
    height: 48px !important;
    --apple-pay-button-width: 100%;
}
body.u4t-active.single-product form.cart .woocommerce-error { order: 3 !important; width: 100% !important; }


/* -----------------------------------------------------------------------
   RELOCATED WISHLIST ICON — clone appended into the gallery by
   initProductGalleryWishlist() (u4t-scripts.js), matching the shop-grid
   card's heart-icon treatment. The original text link (inside form.cart)
   is hidden via the .tinv-wraper rule near the top of this file.
   ----------------------------------------------------------------------- */
body.u4t-active.single-product .u4t-gallery-wishlist-wrap {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 6 !important;
    width: auto !important;
    height: auto !important;
    /* Neutralize whatever this wrapper's shared classes (.woocommerce,
       .tinv-wishlist) normally style elsewhere — page container padding,
       wishlist-panel background/shadow/radius — none of which belongs on
       this small relocated icon wrapper. */
    max-width: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.u4t-active.single-product .u4t-gallery-wishlist.tinvwl_add_to_wishlist_button {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    color: #333 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: background var(--u4t-transition), color var(--u4t-transition) !important;
}
body.u4t-active.single-product .u4t-gallery-wishlist::before {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
}
body.u4t-active.single-product .u4t-gallery-wishlist:hover {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
}
body.u4t-active.single-product .u4t-gallery-wishlist .tinvwl-tooltip { display: none !important; }


/* -----------------------------------------------------------------------
   TABS — left-align (was centered); brand red for the active tab label
   and its underline.
   ----------------------------------------------------------------------- */
body.u4t-active.single-product .woocommerce-tabs ul.tabs {
    text-align: left !important;
}
body.u4t-active.single-product .woocommerce-tabs .woocommerce-Tabs-panel,
body.u4t-active.single-product .woocommerce-tabs .woocommerce-Tabs-panel * {
    text-align: left !important;
}
body.u4t-active.single-product .woocommerce-tabs ul.tabs li a {
    color: rgba(255,255,255,.55) !important;
    transition: color var(--u4t-transition) !important;
}
body.u4t-active.single-product .woocommerce-tabs ul.tabs li:hover a {
    color: var(--u4t-accent) !important;
    border-color: var(--u4t-accent) !important;
}
body.u4t-active.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #ED4623 !important;
    border-color: #ED4623 !important;
}
body.u4t-active.single-product .woocommerce-tabs ul.tabs li.active a:link,
body.u4t-active.single-product .woocommerce-tabs ul.tabs li.active a:visited {
    color: #ED4623 !important;
}
body.u4t-active.single-product .woocommerce-tabs ul.tabs li h2 {
    text-align: left !important;
}

/* Mobile: keep all 3 tabs on one row (shrink to fit) instead of letting
   the inline-block labels wrap into a stacked list, one per line, with
   its panel content trailing directly beneath each label. */
@media (max-width: 768px) {
    body.u4t-active.single-product .woocommerce-tabs ul.tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 4px !important;
    }
    body.u4t-active.single-product .woocommerce-tabs ul.tabs li {
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: left !important;
    }
    body.u4t-active.single-product .woocommerce-tabs ul.tabs li a {
        display: block !important;
        padding: 8px 1px !important;
        font-size: clamp(5px, 1.75vw, 11px) !important;
        letter-spacing: normal !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-align: left !important;
    }
}


/* -----------------------------------------------------------------------
   REVIEW STARS — interactive rating picker (comment form) and the
   read-only average-rating display. White outline by default, brand red
   when filled/selected.
   ----------------------------------------------------------------------- */
body.u4t-active.single-product p.stars a::before { color: #ffffff !important; }
body.u4t-active.single-product p.stars:hover a::before { color: var(--u4t-accent) !important; }
body.u4t-active.single-product p.stars a:hover ~ a::before { color: #ffffff !important; }
body.u4t-active.single-product p.stars.selected a.active::before { color: var(--u4t-accent) !important; }
body.u4t-active.single-product p.stars.selected a.active ~ a::before { color: #ffffff !important; }
body.u4t-active.single-product p.stars.selected a:not(.active)::before { color: var(--u4t-accent) !important; }
body.u4t-active.single-product .star-rating::before { color: #ffffff !important; }
body.u4t-active.single-product .star-rating span::before { color: var(--u4t-accent) !important; }


/* -----------------------------------------------------------------------
   REVIEW FORM — inputs/labels were near-invisible (transparent bg, no
   border, muted text) against the dark page background.
   ----------------------------------------------------------------------- */
body.u4t-active.single-product #commentform label,
body.u4t-active.single-product #commentform .comment-reply-title {
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active.single-product #commentform input[type="text"],
body.u4t-active.single-product #commentform input[type="email"],
body.u4t-active.single-product #commentform input[type="url"],
body.u4t-active.single-product #commentform textarea {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active.single-product #commentform input[type="text"]::placeholder,
body.u4t-active.single-product #commentform input[type="email"]::placeholder,
body.u4t-active.single-product #commentform textarea::placeholder {
    color: rgba(255,255,255,.4) !important;
}
body.u4t-active.single-product #commentform input:focus,
body.u4t-active.single-product #commentform textarea:focus {
    border-color: var(--u4t-accent) !important;
    outline: none !important;
}
body.u4t-active.single-product #commentform .form-submit input#submit {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--u4t-font) !important;
    letter-spacing: .6px !important;
    padding: 12px 24px !important;
}


/* -----------------------------------------------------------------------
   RELATED PRODUCTS — re-enabled (was hidden), 1-3 items from the same
   category (WooCommerce default behaviour + posts_per_page filter in
   PHP). Reuses the shop-grid card CSS via the shared ul.products/li
   markup, scaled ~40% smaller, thumbnail-only (no title/price), with
   the same hover-reveal add-to-cart button.
   ----------------------------------------------------------------------- */
body.u4t-active.single-product .related.products {
    width: 100% !important;
    margin: 56px 0 0 !important;
    padding-top: 40px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
}
body.u4t-active.single-product .related.products > h2 {
    font-family: var(--u4t-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.5) !important;
    text-align: left !important;
    margin: 0 0 20px !important;
}
body.u4t-active.single-product .related.products ul.products {
    max-width: 100% !important;
    margin: 0 !important;
    grid-template-columns: repeat(auto-fill, minmax(129px, 1fr)) !important;
    gap: 16px !important;
}
body.u4t-active.single-product .related.products ul.products li.product .star-rating {
    display: none !important;
}
body.u4t-active.single-product .related.products ul.products li.product {
    padding-bottom: 40px !important;
}
body.u4t-active.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px !important;
    margin-top: 8px !important;
}
body.u4t-active.single-product .related.products ul.products li.product > .price {
    font-size: 12px !important;
}
body.u4t-active.single-product .related.products ul.products li.product img.attachment-woocommerce_thumbnail {
    padding: 12px !important;
}

/* -----------------------------------------------------------------------
   MY ACCOUNT — Login form: white card, dark labels, brand red button.
   The "Login" heading previously sat flush against the fixed header
   (top:148px, exactly the header's height) — added clearance.
   ----------------------------------------------------------------------- */
body.u4t-active.woocommerce-account .woocommerce > h2,
body.u4t-active.woocommerce-account .woocommerce-MyAccount-content > h2 {
    margin-top: 32px !important;
    color: #ffffff !important;
    font-family: var(--u4t-font) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login label {
    color: var(--u4t-dark) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login .woocommerce-Input {
    background: #f7f7f6 !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    color: #1a1a1a !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login .lost_password a {
    color: var(--u4t-accent) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login__submit {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    padding: 12px 28px !important;
    transition: opacity var(--u4t-transition) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login__submit:hover {
    background: #2D2D2C !important;
    opacity: 1 !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login .lost_password a:hover {
    color: #2D2D2C !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login p.form-row:has(.woocommerce-form-login__submit) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login p.form-row:has(.woocommerce-form-login__submit)::before,
body.u4t-active.woocommerce-account .woocommerce-form-login p.form-row:has(.woocommerce-form-login__submit)::after {
    content: none !important;
    display: none !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login__submit {
    float: none !important;
    order: 1;
}
body.u4t-active.woocommerce-account .woocommerce-form-login__rememberme {
    order: 2;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
    accent-color: #ED4623 !important;
    margin: 0 !important;
}

/* Register box — mirrors the login box styling exactly */
body.u4t-active.woocommerce-account .woocommerce-form-register {
    background: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register label {
    color: var(--u4t-dark) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register p {
    color: var(--u4t-dark) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register .woocommerce-Input {
    background: #f7f7f6 !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    color: #1a1a1a !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-link {
    color: var(--u4t-accent) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register .woocommerce-privacy-policy-link:hover {
    color: #2D2D2C !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register__submit {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--u4t-font) !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    padding: 12px 28px !important;
    transition: background var(--u4t-transition) !important;
}
body.u4t-active.woocommerce-account .woocommerce-form-register__submit:hover {
    background: #2D2D2C !important;
}
body.u4t-active.woocommerce-account .u-columns.col2-set {
    margin-bottom: 60px !important;
}

/* WooCommerce info notices (e.g. "temporary password" dashboard notice) —
   white card, dark text, red icon + top separator, applied site-wide
   across all in-scope shop pages. */
body.u4t-active .woocommerce-info {
    background: #ffffff !important;
    color: var(--u4t-dark) !important;
    border-top: 3px solid #ED4623 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.15) !important;
    border-radius: 4px !important;
}
body.u4t-active .woocommerce-info::before {
    color: #ED4623 !important;
}
body.u4t-active .woocommerce-info a:not(.button) {
    color: var(--u4t-accent) !important;
}
body.u4t-active .woocommerce-info .button {
    background: var(--u4t-accent) !important;
    color: #ffffff !important;
    border: none !important;
}
body.u4t-active .woocommerce-info .button:hover {
    background: #2D2D2C !important;
}

/* WooCommerce success notices (e.g. "added to your cart") — same white
   card / dark text / red icon + top separator treatment as the info
   notices above. The "Continue Shopping" outline button already uses
   our brand red via the .woocommerce-message a.button rule elsewhere. */
body.u4t-active .woocommerce-message {
    background: #ffffff !important;
    color: var(--u4t-dark) !important;
    border-top: 3px solid #ED4623 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.15) !important;
    border-radius: 4px !important;
}
body.u4t-active .woocommerce-message::before {
    color: #ED4623 !important;
}

/* Login / Register columns — equal height side-by-side boxes on desktop */
@media (min-width: 769px) {
    body.u4t-active.woocommerce-account .u-columns.col2-set {
        display: flex !important;
        align-items: stretch !important;
        gap: 40px;
        margin-bottom: 60px !important;
    }
    body.u4t-active.woocommerce-account .u-columns.col2-set .u-column1.col-1,
    body.u4t-active.woocommerce-account .u-columns.col2-set .u-column2.col-2 {
        float: none !important;
        width: 50% !important;
        margin: 0 !important;
    }
    body.u4t-active.woocommerce-account .u-columns.col2-set .woocommerce-form-login,
    body.u4t-active.woocommerce-account .u-columns.col2-set .woocommerce-form-register {
        height: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}


/* -----------------------------------------------------------------------
   HEADER — search bar relocated inline between logo and actions on
   desktop only (moved via initDesktopHeaderSearch() in u4t-scripts.js,
   which adds/removes the --search-inline modifier class). Mobile keeps
   the original stacked structure untouched.
   ----------------------------------------------------------------------- */
@media (min-width: 769px) {
    .u4t-top-row.u4t-top-row--search-inline {
        gap: 24px;
    }
    .u4t-top-row--search-inline .u4t-logo {
        flex: 0 0 auto;
        width: 180px;
        max-width: 220px;
    }
    .u4t-top-row--search-inline .u4t-actions {
        flex: 0 0 auto;
    }
    .u4t-top-row--search-inline > .u4t-search-wrap {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
}