/* =====================================================================
   WOO Redesign — Phase 1: Header / Topbar / Mega-menu / Mobile panel /
   Mini-cart drawer / Footer / Back-to-top.
   ---------------------------------------------------------------------
   Ported from UI-PROJECT-FOLDER/components/components.css + theme.css.
   Design tokens preserved 1:1 from the mockup's :root block.

   SCOPING: every rule here is namespaced under `body.woo-redesign` and,
   for header/footer/cart specifically, further scoped under the real
   container elements (`header.woo-header`, `.woo-footer-wrap`,
   `.btn-scroll-top`) that this phase adds classes to. This file must
   NEVER emit a bare selector (e.g. `.btn`, `.dropdown-menu`, `.wrap`)
   because those class names are reused by Bootstrap / the theme across
   every page on the site — an unscoped rule here would restyle pages
   that have not been redesigned yet.

   All functional class/id names used by custom.js / theme.js /
   location-bar.js (search-bar-input, cart-dropdown, countWishlist,
   cart_total_amount, action-update-cart-quantity, quantity__minus/plus,
   category-menu-toggle-btn, mega_menu, has-sub-item, get-currency-
   change-function, change-language, data-toggle="dropdown"/"collapse",
   #navbarCollapse, #cart_dropdown_close, #cart_items, ...) are left
   completely untouched — only their visual presentation is overridden
   here. No JS was modified to build this file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0) Design tokens (scoped custom properties)
   --------------------------------------------------------------------- */
body.woo-redesign {
    --woo-ink-900: #3a3a3a;
    --woo-ink-700: #47443c;
    --woo-ink-500: #726d5f;
    --woo-ink-300: #b7b2a0;
    --woo-ink-100: #e8e5d9;
    --woo-ink-050: #f5f3ea;
    --woo-olive-700: #7c8a1c;
    --woo-olive-600: #9fb023;
    --woo-olive-500: #b5c62e;
    --woo-olive-300: #d6e17f;
    --woo-olive-100: #eef3ce;
    --woo-olive-050: #f6f9e7;
    --woo-white: #ffffff;
    --woo-cream: #fbfaf0;
    --woo-rating: #3a7d44;
    --woo-radius-sm: 6px;
    --woo-radius-md: 12px;
    --woo-radius-lg: 20px;
    --woo-radius-xl: 28px;
    --woo-radius-pill: 999px;
    --woo-shadow-sm: 0 2px 8px rgba(38, 36, 32, .07);
    --woo-shadow-md: 0 10px 30px rgba(38, 36, 32, .10);
    --woo-shadow-lg: 0 24px 60px rgba(38, 36, 32, .16);
    --woo-container: 1280px;
}

/* Site-wide page background (phase 5d — every page on body.woo-redesign
   gets this background, not just individually-themed sections, so gaps
   between converted/not-yet-converted sections don't show the old
   theme's default background). `body.woo-redesign` (0,1,1) already
   outweighs every bare `body {...}` rule in theme.css/master.css/
   custom.css, and woo-redesign.css loads last, so no !important needed. */
body.woo-redesign {
    background: var(--woo-cream);
}

/* Headings inside the redesigned header/footer use Fraunces */
body.woo-redesign header.woo-header h1,
body.woo-redesign header.woo-header h2,
body.woo-redesign header.woo-header h3,
body.woo-redesign header.woo-header h4,
body.woo-redesign header.woo-header h5,
body.woo-redesign header.woo-header h6,
body.woo-redesign .woo-footer-wrap h1,
body.woo-redesign .woo-footer-wrap h2,
body.woo-redesign .woo-footer-wrap h3,
body.woo-redesign .woo-footer-wrap h4,
body.woo-redesign .woo-footer-wrap h5,
body.woo-redesign .woo-footer-wrap h6 {
    font-family: 'Fraunces', serif;
}

/* =====================================================================
   1) TOPBAR
   ===================================================================== */
body.woo-redesign header.woo-header .topbar {
    background: linear-gradient(90deg, var(--woo-ink-900) 0%, var(--woo-olive-700) 55%, var(--woo-olive-600) 100%);
    color: var(--woo-white);
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    letter-spacing: .02em;
    padding: 9px 0;
}
body.woo-redesign header.woo-header .topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--woo-container);
}
body.woo-redesign header.woo-header .topbar .container > div {
    display: flex;
    align-items: center;
}
body.woo-redesign header.woo-header .topbar-link {
    position: relative;
    color: rgba(255, 255, 255, .92);
    font-weight: 500;
    padding: 0 12px;
    white-space: nowrap;
    transition: color .2s ease;
}
body.woo-redesign header.woo-header .topbar-link:hover,
body.woo-redesign header.woo-header .topbar-link:focus {
    color: var(--woo-white);
    text-decoration: none;
}
body.woo-redesign header.woo-header .topbar .container > div > div:not(:last-child) .topbar-link,
body.woo-redesign header.woo-header .topbar-text:not(:last-child) {
    position: relative;
}
body.woo-redesign header.woo-header .topbar .dropdown-menu {
    font-size: 13px;
    border-radius: var(--woo-radius-sm);
    border-color: var(--woo-ink-100);
    box-shadow: var(--woo-shadow-md);
    font-family: 'Poppins', sans-serif;
}
body.woo-redesign header.woo-header .topbar .dropdown-item.cursor-pointer,
body.woo-redesign header.woo-header .topbar .dropdown-item {
    font-size: 13px;
    padding: .4rem 1rem;
}
body.woo-redesign header.woo-header .topbar .dropdown-item:hover,
body.woo-redesign header.woo-header .topbar .dropdown-item:active {
    background: var(--woo-olive-050);
    color: var(--woo-olive-700);
}

/* =====================================================================
   2) MAIN HEADER ROW — logo / primary nav / search / icons
   ===================================================================== */
body.woo-redesign header.woo-header {
    position: sticky;
    top: 0;
    z-index: 400;
    background: rgba(251, 249, 242, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--woo-ink-100);
    font-family: 'Poppins', sans-serif;
    color: var(--woo-ink-900);
}

body.woo-redesign header.woo-header .woo-nav-wrap {
    background: transparent !important;
}

body.woo-redesign header.woo-header .woo-logo img,
body.woo-redesign header.woo-header .mobile-logo-img {
    height: 60px !important;
    width: auto !important;
    object-fit: contain;
}

body.woo-redesign header.woo-header .woo-nav-icons {
    gap: 4px;
}

/* -- search bar (keeps .search-bar-input / .search_form / .search-card / .search-result-box) -- */
body.woo-redesign header.woo-header .woo-search-bar {
    background: var(--woo-ink-050);
    border: 1.5px solid transparent;
    border-radius: var(--woo-radius-pill);
    padding: 3px 3px 3px 16px;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign header.woo-header .woo-search-bar:focus-within {
    background: var(--woo-white);
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign header.woo-header .woo-search-bar .search-bar-input {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--woo-ink-900);
    box-shadow: none !important;
}
body.woo-redesign header.woo-header .woo-search-bar .search-bar-input:focus {
    box-shadow: none !important;
    outline: none;
}
body.woo-redesign header.woo-header .woo-search-bar .search-bar-input::placeholder {
    color: var(--woo-ink-500);
}
body.woo-redesign header.woo-header .woo-search-submit {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--woo-ink-900);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign header.woo-header .woo-search-submit:hover {
    background: var(--woo-olive-600);
}
body.woo-redesign header.woo-header .woo-search-submit .input-group-text {
    background: transparent;
    border: none;
    padding: 0;
}
body.woo-redesign header.woo-header .woo-search-submit .czi-search {
    color: var(--woo-white) !important;
    font-size: 15px;
}
body.woo-redesign header.woo-header .search-card,
body.woo-redesign header.woo-header .mobile-search-card {
    border-radius: var(--woo-radius-lg);
    border-color: var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
    font-family: 'Poppins', sans-serif;
}

/* -- round icon buttons (wishlist / account / cart / stuck-toggler) + badges -- */
body.woo-redesign header.woo-header .navbar-tool-icon-box {
    position: relative;
    background: transparent !important;
    border-radius: 50%;
    color: var(--woo-ink-900);
    transition: background .2s ease;
}
body.woo-redesign header.woo-header .navbar-tool-icon-box:hover {
    background: var(--woo-ink-100) !important;
}
body.woo-redesign header.woo-header .navbar-tool-icon-box .navbar-tool-icon {
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .navbar-tool-label,
body.woo-redesign header.woo-header .countWishlist {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--woo-radius-pill);
    border: 1.5px solid var(--woo-cream);
}
body.woo-redesign header.woo-header .navbar-tool-text small {
    color: var(--woo-ink-500);
}
body.woo-redesign header.woo-header .navbar-tool-text .cart-total-price {
    color: var(--woo-ink-900);
}

/* -- account / currency / language dropdown panels (generic pattern) -- */
body.woo-redesign header.woo-header .dropdown-menu {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    box-shadow: var(--woo-shadow-md);
    font-family: 'Poppins', sans-serif;
    padding: 8px;
}
body.woo-redesign header.woo-header .dropdown-menu .dropdown-item {
    border-radius: var(--woo-radius-sm);
    font-size: 13.5px;
    color: var(--woo-ink-700);
    padding: 8px 12px;
    transition: background .15s ease, color .15s ease;
}
body.woo-redesign header.woo-header .dropdown-menu .dropdown-item:hover,
body.woo-redesign header.woo-header .dropdown-menu .dropdown-item:focus,
body.woo-redesign header.woo-header .dropdown-menu .dropdown-item:active {
    background: var(--woo-olive-050);
    color: var(--woo-olive-700);
}
body.woo-redesign header.woo-header .dropdown-menu .dropdown-divider {
    border-color: var(--woo-ink-100);
}
body.woo-redesign header.woo-header .__auth-dropdown {
    min-width: 190px;
}

/* =====================================================================
   3) SECOND NAV ROW — Home / Brand / Offers / Publication House /
      All Vendors / Vendor Zone + category toggle button
   ===================================================================== */
body.woo-redesign header.woo-header .navbar-stuck-menu {
    background: var(--woo-white);
    border-top: 1px solid var(--woo-ink-100);
}
/* Defensive: this row (and the #navbarCollapse it wraps) is driven by a
   JS-toggled `.show`/`.navbar-stuck` accordion state in the base theme
   (see theme.js stuckNavbarMenuToggle/stickyNavbar) meant for a mobile
   slide-down menu. At tablet/desktop widths it must render at full,
   unclipped height regardless of that JS state, or the primary nav
   links (Home/Brand/Offers/Publication House/All Vendors) collapse to
   zero visible height. */
@media (min-width: 768px) {
    body.woo-redesign header.woo-header .navbar-stuck-menu,
    body.woo-redesign header.woo-header .navbar-stuck-menu #navbarCollapse,
    body.woo-redesign header.woo-header .navbar-stuck-menu .navbar-collapse {
        display: block !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
    }
    body.woo-redesign header.woo-header .navbar-stuck-menu .container > .navbar-collapse,
    body.woo-redesign header.woo-header .navbar-stuck-menu #navbarCollapse {
        display: flex !important;
        align-items: center;
    }
}
body.woo-redesign header.woo-header .woo-primary-links > .nav-item > .nav-link,
body.woo-redesign header.woo-header .category-menu-toggle-btn {
    position: relative;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--woo-ink-700);
    padding: 14px 12px 13px;
    transition: color .2s ease;
}
body.woo-redesign header.woo-header .woo-primary-links > .nav-item > .nav-link::after,
body.woo-redesign header.woo-header .category-menu-toggle-btn::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2.5px;
    background: var(--woo-olive-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
body.woo-redesign header.woo-header .woo-primary-links > .nav-item:hover > .nav-link,
body.woo-redesign header.woo-header .woo-primary-links > .nav-item.active > .nav-link,
body.woo-redesign header.woo-header .category-menu-toggle-btn:hover {
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-primary-links > .nav-item:hover > .nav-link::after,
body.woo-redesign header.woo-header .category-menu-toggle-btn:hover::after {
    transform: scaleX(1);
}
body.woo-redesign header.woo-header .category-menu-toggle-btn-text {
    font-weight: 600;
}

/* "Offers" / "Vendor Zone" trigger buttons (rendered as .btn.dropdown-toggle) */
body.woo-redesign header.woo-header .woo-primary-links .btn.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border: none;
    border-radius: var(--woo-radius-pill);
    padding: 8px 18px !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: none;
    transition: background .2s ease;
}
body.woo-redesign header.woo-header .woo-primary-links .btn.dropdown-toggle:hover,
body.woo-redesign header.woo-header .woo-primary-links .btn.dropdown-toggle:focus {
    background: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign header.woo-header .woo-primary-links .nav-item {
    display: flex;
    align-items: center;
}
body.woo-redesign header.woo-header .count-value {
    color: var(--woo-ink-500);
    font-size: 12px;
}

/* =====================================================================
   4) CATEGORY MEGA-MENU
   ---------------------------------------------------------------------
   The base theme's `.megamenu-wrap` is a click-to-reveal, absolutely
   positioned overlay (Amazon-style: click "Categories" -> a floating
   sidebar+flyout panel appears, position:absolute / visibility:hidden
   by default, toggled via a `.show` class from `.category-menu-toggle-btn`
   in custom.js). The mockup instead wants an ALWAYS-VISIBLE horizontal
   bar of category links with a hover-triggered flyout per item — so this
   section fully overrides the base positioning/display model rather than
   just recoloring it. The redundant secondary category UIs the old theme
   also renders at certain breakpoints (`.mega-nav` toggle button,
   `.mega-nav1` in-flow flat tree list) are hidden below since this bar
   now covers category browsing on every breakpoint.
   ===================================================================== */
body.woo-redesign header.woo-header .mega-nav,
body.woo-redesign header.woo-header .mega-nav1 {
    display: none !important;
}
body.woo-redesign header.woo-header .megamenu-wrap.woo-green-nav {
    position: static;
    visibility: visible;
    opacity: 1;
    width: 100%;
    background: var(--woo-olive-600);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
body.woo-redesign header.woo-header .woo-green-nav .container {
    padding: 0 40px;
    max-width: var(--woo-container);
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu-wrap {
    position: static;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    scrollbar-width: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu::-webkit-scrollbar {
    display: none;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li {
    position: relative;
    padding: 0;
    flex-shrink: 0;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li:not(:last-child) {
    border-bottom: none !important;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 14px;
    color: rgba(255, 255, 255, .95) !important;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li > a img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    flex-shrink: 0;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li > a:hover,
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li:hover > a {
    background: var(--woo-olive-700);
    color: #fff !important;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li > a i {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 11px;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li > a:hover i {
    color: #fff !important;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu-wrap li.text-center {
    margin-left: auto;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu-wrap li.text-center > a {
    color: var(--woo-ink-900) !important;
    background: var(--woo-olive-500);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--woo-radius-pill);
    padding: 7px 16px !important;
    align-self: center;
    margin: 0 4px;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu-wrap li.text-center > a:hover {
    background: var(--woo-olive-300) !important;
    color: var(--woo-ink-900) !important;
}
/* subcategory flyout: hidden by default, shown on hover of its parent <li> */
body.woo-redesign header.woo-header .woo-green-nav .mega_menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    width: max-content;
    min-width: 300px;
    max-width: 680px;
    min-height: 0;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    background: var(--woo-white) !important;
    border-radius: 0 var(--woo-radius-lg) var(--woo-radius-lg) var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-lg) !important;
    padding: 22px 26px;
    row-gap: 14px;
    column-gap: 24px;
    z-index: 500;
}
body.woo-redesign header.woo-header .woo-green-nav .category-menu > li:hover .mega_menu {
    display: grid;
}
body.woo-redesign header.woo-header .woo-green-nav .mega_menu_inner:not(:nth-child(4n)) {
    border-right-color: var(--woo-ink-100) !important;
}
body.woo-redesign header.woo-header .woo-green-nav .mega_menu h6 a {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-green-nav .mega_menu_inner a {
    color: var(--woo-ink-500);
    font-size: 13px;
    transition: color .15s ease, padding-left .2s ease;
    display: inline-block;
}
body.woo-redesign header.woo-header .woo-green-nav .mega_menu_inner a:hover {
    color: var(--woo-olive-700);
    padding-left: 4px;
}
@media (max-width: 767.98px) {
    body.woo-redesign header.woo-header .megamenu-wrap.woo-green-nav {
        display: none !important;
    }
}

/* =====================================================================
   5) MOBILE TOGGLER + COLLAPSE PANEL
   ===================================================================== */
body.woo-redesign header.woo-header .navbar-toggler {
    border-radius: 50%;
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-mobile-panel.show,
body.woo-redesign header.woo-header .woo-mobile-panel.collapsing {
    background: var(--woo-cream);
    border-top: 1px solid var(--woo-ink-100);
}
body.woo-redesign header.woo-header .woo-mobile-panel .nav-link {
    color: var(--woo-ink-700);
    font-weight: 500;
    padding: 11px 4px;
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign header.woo-header .woo-mobile-panel .dropdown-item {
    font-size: 14px;
}
body.woo-redesign header.woo-header .logout-btn .nav-link {
    color: #c0392b;
}

/* =====================================================================
   6) MINI-CART DRAWER (existing .cart-dropdown Bootstrap dropdown-menu,
      reskinned to match the mockup's mini-cart drawer look — kept as a
      docked dropdown panel, not converted to a fixed slide-in panel, so
      its existing mouseenter/#cart_dropdown_close JS keeps working
      untouched).
   ===================================================================== */
body.woo-redesign header.woo-header .woo-mini-cart {
    background: var(--woo-cream);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-lg);
    overflow: hidden;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-head {
    background: var(--woo-white);
    border-bottom: 1px solid var(--woo-ink-100);
    padding: 16px 18px;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-head h6 {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-mini-cart #cart_dropdown_close {
    color: var(--woo-ink-500);
}
body.woo-redesign header.woo-header .woo-mini-cart #cart_dropdown_close:hover {
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-body {
    padding: 14px 16px 16px;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-savings {
    color: var(--woo-olive-700);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-item {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 10px;
    margin-bottom: 10px;
    transition: border-color .2s ease;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-item:hover {
    border-color: var(--woo-olive-300);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-thumb {
    border-radius: var(--woo-radius-sm);
    overflow: hidden;
    background: var(--woo-olive-050);
}
body.woo-redesign header.woo-header .woo-mini-cart .widget-product-title a {
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign header.woo-header .woo-mini-cart .widget-product-meta .fs-15 {
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-qty {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--woo-ink-050);
    border-radius: var(--woo-radius-pill);
    padding: 2px;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-qty .cart-qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .2s ease;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-qty .cart-qty-btn:hover {
    background: var(--woo-olive-500);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-qty .cart-qty-input {
    background: transparent;
    border: none;
    width: 26px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--woo-ink-900);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-free {
    background: var(--woo-olive-050);
    border-radius: var(--woo-radius-md);
    padding: 10px 12px;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-progress {
    background: var(--woo-ink-100) !important;
    height: 6px;
    border-radius: var(--woo-radius-pill);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-progress .progress-bar {
    background: var(--woo-olive-500) !important;
    border-radius: var(--woo-radius-pill);
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-subtotal-row {
    border-top: 1px solid var(--woo-ink-100);
    padding-top: 12px;
    margin-top: 4px;
}
body.woo-redesign header.woo-header .woo-mini-cart .cart_total_amount {
    color: var(--woo-ink-900);
    font-weight: 700;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-expand-btn {
    border-radius: var(--woo-radius-pill) !important;
    border-color: var(--woo-ink-300) !important;
    color: var(--woo-ink-700) !important;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-expand-btn:hover {
    background: var(--woo-ink-100) !important;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-checkout-btn.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-checkout-btn.btn--primary:hover {
    background: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign header.woo-header .woo-mini-cart .mc-empty {
    padding: 34px 12px;
    color: var(--woo-ink-500);
}

/* =====================================================================
   7) FOOTER
   ===================================================================== */
body.woo-redesign .woo-footer-wrap {
    font-family: 'Poppins', sans-serif;
    margin-top: 40px;
}

/* quick-access tiles row (about/contact/faq/blog) */
body.woo-redesign .woo-footer-tiles .footer-slide-item {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: none !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-footer-tiles .footer-slide-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--woo-shadow-md) !important;
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-footer-tiles .heading {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-footer-tiles .des {
    color: var(--woo-ink-500);
}

body.woo-redesign .woo-footer {
    background: linear-gradient(180deg, #2b2925 0%, #232019 100%) !important;
    color: rgba(255, 255, 255, .78);
}
body.woo-redesign .woo-footer .footer-header {
    color: var(--woo-white);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .04em;
}
body.woo-redesign .woo-footer .widget-list-link {
    color: rgba(255, 255, 255, .6);
    font-size: 13.5px;
    transition: color .2s ease, padding-left .2s ease;
    display: inline-block;
}
body.woo-redesign .woo-footer .widget-list-link:hover {
    color: var(--woo-olive-300);
    padding-left: 4px;
    text-decoration: none;
}
body.woo-redesign .woo-footer .widget-list-item {
    padding: 3px 0;
}
body.woo-redesign .woo-footer .subscribe-border {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--woo-radius-pill) !important;
    color: var(--woo-white);
}
body.woo-redesign .woo-footer .subscribe-border::placeholder {
    color: rgba(255, 255, 255, .45);
}
body.woo-redesign .woo-footer .subscribe-button {
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    transition: background .2s ease;
}
body.woo-redesign .woo-footer .subscribe-button:hover {
    background: var(--woo-olive-600);
}
body.woo-redesign .woo-footer .social-btn {
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: background .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-footer .social-btn:hover {
    background: var(--woo-olive-500) !important;
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-footer .address_under_line,
body.woo-redesign .woo-footer hr {
    border-color: rgba(255, 255, 255, .14);
}
body.woo-redesign .woo-footer-bottom {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
body.woo-redesign .woo-footer-bottom p,
body.woo-redesign .woo-footer-bottom .widget-list-link {
    color: rgba(255, 255, 255, .5);
    font-size: 12.5px;
}
body.woo-redesign .woo-footer-bottom .widget-list-link:hover {
    color: var(--woo-olive-300);
}

/* new grid-based footer content (brand / company / account / categories / contact) */
body.woo-redesign .woo-footer .footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding: 56px 0 40px;
}
body.woo-redesign .woo-footer .footer-brand .footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: var(--woo-radius-lg);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: 18px;
    transition: background .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-footer .footer-brand .footer-logo:hover {
    background: #fff;
    border-color: rgba(181, 198, 46, .45);
}
body.woo-redesign .woo-footer .footer-brand .footer-logo img {
    height: 56px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}
body.woo-redesign .woo-footer .footer-brand p {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .55);
    max-width: 260px;
    margin: 0 0 20px;
}
body.woo-redesign .woo-footer .footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
body.woo-redesign .woo-footer .footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
    text-transform: lowercase;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-footer .footer-social a:hover {
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    border-color: var(--woo-olive-500);
}
body.woo-redesign .woo-footer .footer-col h4 {
    color: var(--woo-white);
    font-size: 15.5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin: 0 0 18px;
}
body.woo-redesign .woo-footer .footer-col a {
    display: block;
    font-size: 13.5px;
    padding: 5.5px 0;
    color: rgba(255, 255, 255, .6);
    transition: color .2s ease, padding-left .2s ease;
}
body.woo-redesign .woo-footer .footer-col a:hover {
    color: var(--woo-olive-300);
    padding-left: 5px;
    text-decoration: none;
}
body.woo-redesign .woo-footer .footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woo-redesign .woo-footer .footer-contact li {
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    padding: 6px 0;
    color: rgba(255, 255, 255, .65);
    align-items: flex-start;
    line-height: 1.55;
}
body.woo-redesign .woo-footer .footer-contact svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--woo-olive-500);
}
body.woo-redesign .woo-footer .footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .45);
}
body.woo-redesign .woo-footer .footer-bottom-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woo-redesign .woo-footer .footer-bottom-links a {
    color: rgba(255, 255, 255, .45);
}
body.woo-redesign .woo-footer .footer-bottom-links a:hover {
    color: var(--woo-olive-300);
}
body.woo-redesign .woo-footer .pay-badges {
    display: flex;
    gap: 6px;
}
body.woo-redesign .woo-footer .pay-badges span {
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .6);
}
@media (max-width: 900px) {
    body.woo-redesign .woo-footer .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}
@media (max-width: 640px) {
    body.woo-redesign .woo-footer .footer-main {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   8) BACK TO TOP (single singleton button rendered in app.blade.php)
   ===================================================================== */
body.woo-redesign .btn-scroll-top.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    box-shadow: var(--woo-shadow-lg);
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .btn-scroll-top.btn--primary:hover {
    background: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}

/* =====================================================================
   10) PRODUCT CARDS (phase 2)
   ---------------------------------------------------------------------
   Applies to the new `.prod-card` markup added to the six product-card
   partials (_category-single-product, _filter-single-product,
   _inline-single-product[-without-eye], _product-card-1/2). All
   selectors are scoped under body.woo-redesign + the new dedicated
   class names (.prod-card, .prod-media, .prod-body, .woo-mini-card, ...)
   so nothing here touches _feature-product / _feature-deal-product /
   _seller-products-product-details or any other partial that still
   shares legacy classes (out-of-stock-overlay, flash_deal_product, ...)
   with the six files above but was not part of this redesign pass.

   Functional classes/attributes are left completely untouched — only
   presentation is layered on top:
     - .clickable (custom.js whole-row click-through)
     - .stopPropagation, .action-product-quick-view[data-product-id]
       (quick-view modal, custom.js renderQuickViewFunction())
     - .get-view-by-onclick[data-link] (custom.js flash-deal click-through)
     - .out-of-stock-overlay / .out_fo_stock (stock gating markup)
   ===================================================================== */
body.woo-redesign .prod-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.woo-redesign .prod-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .prod-card.out-of-stock-card:hover {
    transform: none;
}

/* ---- media ---- */
body.woo-redesign .prod-card .prod-media {
    position: relative;
    height: 190px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}
/* the <img> link is wrapped in a Bootstrap "d-flex pb-0" div (shared,
   distinguishing marker across all four grid partials) before reaching
   the <a> — stretch just that wrapper + its anchor so the image fills
   the media box. Deliberately NOT a bare `.prod-media > div` selector,
   since badge wrapper divs (.prod-tag / discount off-badge) are also
   direct children of .prod-media and must keep their own small size. */
body.woo-redesign .prod-card .prod-media > div.pb-0,
body.woo-redesign .prod-card .prod-media > div.pb-0 > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
/* scoped to the product-photo wrapper specifically (not `.prod-media img`
   broadly) so this never touches the small 16px digital/physical type
   icon or the quick-view eye icon that also live inside .prod-media */
body.woo-redesign .prod-card .prod-media > div.pb-0 img {
    width: auto !important;
    height: auto !important;
    max-width: 82% !important;
    max-height: 82% !important;
    object-fit: contain;
    padding: 0;
    border: none !important;
    transition: transform .35s ease;
}
body.woo-redesign .prod-card:hover .prod-media > div.pb-0 img {
    transform: scale(1.04);
}

/* ---- badges ---- */
body.woo-redesign .prod-card .prod-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
}
/* Bare <span style="background:...;color:..."> badges (e.g. Certified
   Organic / Natural in theme-views/partials/_product-card.blade.php)
   carry no class of their own — this gives them the pill shape/size the
   inline background/color rely on. Previously only defined under the
   .woo-home-style-grid scope (which home.blade.php's own carousel wrapper
   doesn't actually use), so this badge rendered as unstyled plain text on
   every homepage category carousel. Scoped to the shared .prod-card base
   instead so it applies everywhere this partial is used. */
body.woo-redesign .prod-card .prod-tag > span {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--woo-radius-pill);
    letter-spacing: .03em;
    line-height: normal;
}
body.woo-redesign .prod-card .prod-tag .organic-badge,
body.woo-redesign .prod-card .prod-tag.organic-badge {
    display: inline-block;
    font-size: 9.5px !important;
    font-weight: 700;
    padding: 3px 9px !important;
    border-radius: var(--woo-radius-pill) !important;
    letter-spacing: .03em;
    line-height: normal;
}
body.woo-redesign .prod-card .off-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-block;
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--woo-radius-pill);
    letter-spacing: .03em;
    line-height: normal;
}
body.woo-redesign .prod-card .prod-tag ~ .off-badge {
    top: 38px;
}
body.woo-redesign .prod-card .for-discount-value-null {
    display: none;
}

/* ---- out of stock ---- */
body.woo-redesign .prod-card .out-of-stock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 243, 234, .72);
    z-index: 2;
}
body.woo-redesign .prod-card .out_fo_stock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: var(--woo-ink-900);
    color: var(--woo-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--woo-radius-pill);
    white-space: nowrap;
}

/* ---- quick-view / product-type actions (top-right icon stack) ---- */
body.woo-redesign .prod-card .quick-view {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
/* _filter-single-product.blade.php (clearance-sale card) has both the
   wishlist heart (.wish-btn, top:8px/right:8px) and this quick-view icon
   stack in the same top-right corner of .prod-media — push quick-view
   down below the heart so they don't overlap. Only matches when a
   .wish-btn sibling is actually present, so _product-card.blade.php
   (no .quick-view at all) and other cards are unaffected. */
body.woo-redesign .prod-card .wish-btn ~ .quick-view {
    top: 46px;
}
body.woo-redesign .prod-card .quick-view .quick-view-tag {
    gap: 6px !important;
}
body.woo-redesign .prod-card .quick-view .btn-circle {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--woo-white) !important;
    border: 1px solid var(--woo-ink-100) !important;
    color: var(--woo-ink-500);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--woo-shadow-sm);
    transition: color .2s, transform .2s, border-color .2s, background .2s;
}
body.woo-redesign .prod-card .quick-view .btn-circle:hover {
    transform: scale(1.1);
    color: var(--woo-olive-700);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .prod-card .quick-view .btn-circle img {
    width: 16px !important;
    height: 16px !important;
}
body.woo-redesign .prod-card .quick-view .czi-eye {
    font-size: 15px;
    line-height: 1;
}

/* ---- body ---- */
body.woo-redesign .prod-card .prod-body,
body.woo-redesign .prod-card .single-product-details {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}
body.woo-redesign .prod-card .prod-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    min-height: 37px;
    color: var(--woo-ink-900) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}
body.woo-redesign .prod-card .prod-name a,
body.woo-redesign .prod-card h3.prod-name a,
body.woo-redesign .prod-card h4.prod-name a {
    color: inherit !important;
    text-decoration: none;
}

/* ---- rating ---- */
body.woo-redesign .prod-card .rating-show {
    display: flex !important;
    align-items: center;
    text-align: left !important;
    margin-bottom: 9px !important;
    justify-content: flex-start !important;
}
body.woo-redesign .prod-card .rating-show .d-inline-block {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    background: var(--woo-rating);
    color: var(--woo-white);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}
body.woo-redesign .prod-card .rating-show .tio-star,
body.woo-redesign .prod-card .rating-show .tio-star-half,
body.woo-redesign .prod-card .rating-show .tio-star-outlined {
    color: var(--woo-white) !important;
    font-size: 10px;
}
body.woo-redesign .prod-card .rating-show .badge-style {
    color: var(--woo-white) !important;
    font-size: 10px;
    margin-left: 2px;
}

/* ---- price ---- */
body.woo-redesign .prod-card .product-price {
    justify-content: flex-start !important;
    margin-top: auto;
}
body.woo-redesign .prod-card .product-price .text-accent {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .prod-card .product-price del,
body.woo-redesign .prod-card .product-price .category-single-product-price {
    font-size: 11.5px !important;
    color: var(--woo-ink-300) !important;
}

/* ---- trust indicators ---- */
body.woo-redesign .prod-card .badge-soft-success {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}

/* =====================================================================
   11) FLASH-DEAL / HORIZONTAL MINI CARDS (phase 2)
   ---------------------------------------------------------------------
   _product-card-1 / _product-card-2 keep their horizontal layout; this
   only reskins colors, radii and type to match .prod-card. Scoped under
   the dedicated `.woo-mini-card` class added to those two partials only
   — NOT under the shared `.flash_deal_product` class, so
   _feature-deal-product / _seller-products-product-details (which reuse
   that legacy class but are outside this redesign pass) are unaffected.
   ===================================================================== */
body.woo-redesign .woo-mini-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    overflow: hidden;
    position: relative;
    box-shadow: none !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--woo-shadow-sm);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-mini-card .flash-deals-background-image {
    background: linear-gradient(150deg, var(--woo-olive-050) 0%, var(--woo-ink-050) 100%);
    border-radius: var(--woo-radius-sm);
    overflow: hidden;
}
body.woo-redesign .woo-mini-card .off-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--woo-radius-pill);
    letter-spacing: .03em;
}
body.woo-redesign .woo-mini-card .flash-product-title {
    color: var(--woo-ink-900) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    font-size: 13px !important;
}
body.woo-redesign .woo-mini-card .flash-product-price {
    color: var(--woo-ink-900) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
}
body.woo-redesign .woo-mini-card .category-single-product-price {
    color: var(--woo-ink-300) !important;
    font-size: 11.5px !important;
}
body.woo-redesign .woo-mini-card .flash-product-review {
    color: var(--woo-rating);
}
body.woo-redesign .woo-mini-card .flash-product-review .tio-star,
body.woo-redesign .woo-mini-card .flash-product-review .tio-star-half,
body.woo-redesign .woo-mini-card .flash-product-review .tio-star-outlined {
    color: var(--woo-rating) !important;
    font-size: 11px;
}
body.woo-redesign .woo-mini-card .badge-style2 {
    color: var(--woo-ink-500) !important;
    font-size: 11px;
}
body.woo-redesign .woo-mini-card .badge-soft-success {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-mini-card .out-of-stock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 243, 234, .72);
    z-index: 2;
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-mini-card .out-of-stock-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: var(--woo-ink-900);
    color: var(--woo-white);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--woo-radius-pill);
    white-space: nowrap;
}

/* =====================================================================
   12) RESPONSIVE
   ===================================================================== */
@media (max-width: 767px) {
    body.woo-redesign header.woo-header .woo-logo img,
    body.woo-redesign header.woo-header .mobile-logo-img {
        height: 42px !important;
    }
    body.woo-redesign .prod-card .prod-media {
        height: 150px;
    }
}

/* =====================================================================
   13) HOME PAGE (phase 3)
   ---------------------------------------------------------------------
   Everything below is scoped under `.woo-home-page`, the class added
   to the single wrapper div in home.blade.php (`<div class="__inline-61
   d-flex flex-column gap-20 woo-home-page">`) that contains every home
   section, from the hero slider through the company-reliability trust
   strip. Scoping to that wrapper — instead of just `body.woo-redesign`
   — is required here because several sections reuse generic Bootstrap/
   theme class names (.card, .owl-nav, h2/h3, .rating-show, .text-accent,
   .widget-product-title, ...) that also appear on category/vendor/
   product-listing pages that are not part of this redesign pass yet;
   without the `.woo-home-page` scope those rules would leak there too.

   Functional / JS-hooked selectors are left completely untouched
   (verified against public/assets/front-end/js/home.js + custom.js):
     .hero-slider, .categories--slider, .flash-deal-slider,
     .flash-deal-slider-mobile, .featured_products_listSlide,
     .new-arrivals-product, .category-wise-product-slider,
     .brands-slider, .others-store-slider, .footer-top-slider,
     .promotional-banner-slider, .cz-countdown*, .get-view-by-onclick,
     .action-product-quick-view, .stopPropagation, .clickable,
     data-slide-items / data-loop / data-countdown attributes — only
     new classes were added alongside them for styling hooks.
   ===================================================================== */

/* ---- 13.1 shared rail head / boxed "panel" pattern reused by most
   sections (featured products, flash-deal, categories, clearance sale,
   top sellers, deal of the day, best-selling, top-rated,
   category-wise rails) ---- */
body.woo-redesign .woo-home-page .woo-panel-head {
    margin-bottom: 12px;
}
body.woo-redesign .woo-home-page .woo-panel-title {
    font-family: 'Fraunces', serif !important;
    font-weight: 600 !important;
    color: var(--woo-ink-900) !important;
    letter-spacing: -.01em;
}
body.woo-redesign .woo-home-page .woo-panel-sub {
    color: var(--woo-ink-500) !important;
    font-size: 13px;
    font-weight: 400 !important;
}
body.woo-redesign .woo-home-page .woo-panel-icon {
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-home-page .woo-panel {
    background: var(--woo-white) !important;
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: none !important;
}
body.woo-redesign .woo-home-page .woo-panel-soft {
    background: var(--woo-olive-050) !important;
    border-color: var(--woo-olive-100) !important;
}

/* view-all link — shared `.view-all-btn-text` class used by every rail */
body.woo-redesign .woo-home-page .view-all-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--woo-ink-900);
    border-bottom: 1.5px solid var(--woo-ink-900);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-home-page .view-all-btn-text:hover {
    color: var(--woo-olive-700);
    border-color: var(--woo-olive-700);
    text-decoration: none;
}

/* owl-carousel nav arrows -> circular buttons, echoes the mockup's
   `.car-arrow`. Presentation only — owl.carousel still renders/drives
   these buttons itself via the untouched JS init calls. */
body.woo-redesign .woo-home-page .owl-carousel .owl-nav button.owl-prev,
body.woo-redesign .woo-home-page .owl-carousel .owl-nav button.owl-next {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--woo-white) !important;
    border: 1px solid var(--woo-ink-100) !important;
    color: var(--woo-ink-900) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--woo-shadow-md);
    transition: background .2s ease, color .2s ease, transform .2s ease;
    font-size: 13px;
}
body.woo-redesign .woo-home-page .owl-carousel .owl-nav button.owl-prev:hover,
body.woo-redesign .woo-home-page .owl-carousel .owl-nav button.owl-next:hover {
    background: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-home-page .owl-carousel .owl-dots .owl-dot span {
    background: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-home-page .owl-carousel .owl-dots .owl-dot.active span {
    background: var(--woo-olive-500) !important;
}

/* ---- 13.2 hero slider (_home-top-slider) ---- */
body.woo-redesign .woo-home-page .woo-hero-frame,
body.woo-redesign .woo-home-page .woo-hero-frame .hero-slider {
    border-radius: var(--woo-radius-xl);
    overflow: hidden;
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-home-page .__slide-img,
body.woo-redesign .woo-home-page .__slide-img-170 {
    border-radius: var(--woo-radius-xl);
}
/* Hero is now a full-width banner (the category rail that used to share
   this row is covered by the always-visible header nav bar instead —
   matching the mockup's persistent horizontal category strip). */
body.woo-redesign .woo-home-page .woo-hero-col--full {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* ---- 13.3 category grid (_category-section-home: desktop grid +
   mobile `.categories--slider` owl carousel) ---- */
body.woo-redesign .woo-home-page .woo-cat-card {
    transition: transform .25s ease;
}
body.woo-redesign .woo-home-page .woo-cat-circle {
    width: 82px;
    height: 82px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--woo-white);
    border: 1.5px solid var(--woo-ink-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
body.woo-redesign .woo-home-page .woo-cat-circle img {
    width: 66%;
    height: 66%;
    object-fit: contain;
}
body.woo-redesign .woo-home-page .woo-cat-card:hover .woo-cat-circle {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-500);
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-home-page .woo-cat-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    color: var(--woo-ink-900) !important;
}

/* ---- 13.4 flash deal (_flash-deal) ---- */
body.woo-redesign .woo-home-page .woo-flash-wrap {
    padding: 18px !important;
}
body.woo-redesign .woo-home-page .woo-countdown-card .countdown-background {
    background: linear-gradient(120deg, var(--woo-ink-900) 0%, var(--woo-olive-700) 100%) !important;
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .woo-home-page .woo-countdown-card .cz-countdown-value {
    color: var(--woo-white);
}
body.woo-redesign .woo-home-page .woo-countdown-card .cz-countdown-text {
    color: rgba(255, 255, 255, .7);
}
body.woo-redesign .woo-home-page .woo-countdown-card .progress-bar.flash-deal-progress-bar {
    background: var(--woo-olive-500) !important;
}
body.woo-redesign .woo-home-page .woo-countdown-card .progress {
    background: rgba(255, 255, 255, .18) !important;
}

/* ---- 13.5 top sellers / vendor carousel card (_top-sellers) ---- */
body.woo-redesign .woo-home-page .woo-vendor-card {
    display: block;
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-home-page .woo-vendor-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-home-page .woo-vendor-card .other-store-logo {
    border: 3px solid var(--woo-white) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-home-page .woo-vendor-card h3 {
    font-family: 'Fraunces', serif !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-home-page .woo-vendor-card .info-area {
    border-top: 1px solid var(--woo-ink-100);
}

/* ---- 13.6 deal of the day (_deal-of-the-day) ---- */
body.woo-redesign .woo-home-page .woo-deal-card {
    background: var(--woo-olive-050) !important;
    border: 1px solid var(--woo-olive-100);
    border-radius: var(--woo-radius-lg) !important;
    overflow: hidden;
}
body.woo-redesign .woo-home-page .woo-deal-card .recommended-product-card {
    background: transparent !important;
}
body.woo-redesign .woo-home-page .woo-deal-cta.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-home-page .woo-deal-cta.btn--primary:hover {
    background: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}

/* ---- 13.7 best-selling / top-rated list cards (share identical
   markup pattern, styled once via the shared .woo-list-* classes) ---- */
body.woo-redesign .woo-home-page .woo-list-item {
    display: block;
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.woo-redesign .woo-home-page .woo-list-item:hover {
    border-color: var(--woo-olive-300);
    box-shadow: var(--woo-shadow-sm);
    transform: translateY(-2px);
}
body.woo-redesign .woo-home-page .woo-list-thumb {
    background: linear-gradient(150deg, var(--woo-olive-050) 0%, var(--woo-ink-050) 100%);
    border-radius: var(--woo-radius-sm);
    overflow: hidden;
}
body.woo-redesign .woo-home-page .woo-list-thumb img {
    object-fit: contain;
}
body.woo-redesign .woo-home-page .woo-list-body .widget-product-title,
body.woo-redesign .woo-home-page .woo-list-body .widget-product-title span {
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-home-page .woo-list-body .rating-show .badge-style {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .woo-home-page .woo-list-body .text-accent {
    color: var(--woo-ink-900) !important;
    font-weight: 700 !important;
}

/* ---- 13.8 banner images (main-section banner + footer promo slider) --- */
body.woo-redesign .woo-home-page .woo-banner-img {
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-sm);
}

/* ---- 13.9 brand strip ---- */
body.woo-redesign .woo-home-page .woo-brand-tile {
    transition: transform .25s ease;
}
body.woo-redesign .woo-home-page .woo-brand-item {
    display: block;
    max-width: 110px;
    margin: 0 auto;
    padding: 10px;
    border-radius: var(--woo-radius-md) !important;
    border: 1px solid var(--woo-ink-100);
    background: var(--woo-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-home-page .woo-brand-tile:hover .woo-brand-item {
    border-color: var(--woo-olive-300);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-home-page .woo-brand-logo {
    width: 100%;
    height: 62px;
    object-fit: contain;
}
body.woo-redesign .woo-home-page .woo-brand-name a {
    color: var(--woo-ink-700) !important;
    font-weight: 500;
}

/* ---- 13.10 company reliability trust strip (_company-reliability) ---- */
body.woo-redesign .woo-home-page .woo-trust-strip .shopping-method-icon {
    border: 1px solid var(--woo-ink-100) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-home-page .woo-trust-strip p {
    color: var(--woo-ink-700);
    font-weight: 500;
    font-size: 13.5px;
}

/* =====================================================================
   14) HOME PAGE RESPONSIVE
   ===================================================================== */
@media (max-width: 767px) {
    body.woo-redesign .woo-home-page .woo-cat-circle {
        width: 64px;
        height: 64px;
    }
    body.woo-redesign .woo-home-page .woo-flash-wrap {
        padding: 12px !important;
    }
    body.woo-redesign .woo-home-page .woo-hero-frame,
    body.woo-redesign .woo-home-page .woo-hero-frame .hero-slider,
    body.woo-redesign .woo-home-page .__slide-img,
    body.woo-redesign .woo-home-page .__slide-img-170,
    body.woo-redesign .woo-home-page .woo-banner-img {
        border-radius: var(--woo-radius-lg);
    }
}

/* =====================================================================
   15) SHOP / LISTING PAGE (resources/themes/default/web-views/products/
   view.blade.php + its partials). This single template renders every
   product-listing route (all-products, category, brand, best-selling,
   top-rated, most-favorite, latest, discounted, clearance, featured-
   deal, flash-deals, etc.) driven by query params, so reskinning it
   here covers all of them.

   SCOPING: everything below is scoped under `.woo-shop-page`, the
   wrapper class added to view.blade.php's outer container. Several of
   the classes touched here (.search-page-header, .sorting-item,
   .cz-sidebar, .menu--caret-accordion, .attribute-list, .pagination,
   .page-item, .page-link, .card, .form-control ...) are generic/shared
   with other not-yet-redesigned pages (vendor-shop reuses
   _product-list-header.blade.php directly), so nothing here may be
   left unscoped.

   FUNCTIONAL HOOKS PRESERVED (verified against product-list-filter.js,
   custom.js and theme.js — only visual presentation is changed, no
   selector was renamed):
     .product-list-filter (form), .product-list-filter-input (sort_by /
     product_type / data_from selects), .search-page-button /
     .search-page-button-input, .action-search-products-by-price,
     #min_price / #max_price, #price_range_slider / .slider-range /
     .slider-thumb / #thumb_min / #thumb_max, #ajax-products-view,
     #paginator-ajax, .get-view-by-onclick / [data-link], .menu--caret /
     .menu--caret-accordion / .card-header / .card-body (accordion),
     .search-product-attribute / .search-product-attribute-container /
     #search-brand, .filter-show-btn, #shop-sidebar / .cz-sidebar,
     .cz-sidebar-header .close / [data-dismiss="sidebar"],
     .sidebar-overlay, #SearchParameters, #products-search-data-backup,
     the hidden offer_type/data_from/category_id/brand_id inputs, and
     .view-page-item-count (ajax response target).
   ===================================================================== */

/* ---- 15.1 breadcrumb ---- */
body.woo-redesign .woo-shop-page .woo-shop-breadcrumb {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 16px;
}
body.woo-redesign .woo-shop-page .woo-shop-breadcrumb a {
    color: var(--woo-ink-500);
    transition: color .2s ease;
}
body.woo-redesign .woo-shop-page .woo-shop-breadcrumb a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-shop-page .woo-shop-breadcrumb-sep {
    margin: 0 6px;
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-shop-page .woo-shop-breadcrumb-current {
    color: var(--woo-ink-900);
    font-weight: 500;
}

/* ---- 15.2 toolbar / _product-list-header ---- */
body.woo-redesign .woo-shop-page .search-page-header {
    display: flex;
    align-items: center;
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    padding: 16px 20px;
}
body.woo-redesign .woo-shop-page .woo-shop-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 19px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-shop-page .woo-shop-count {
    font-size: 13px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-shop-page .woo-shop-count .view-page-item-count {
    color: var(--woo-olive-700);
    font-weight: 700;
}
body.woo-redesign .woo-shop-page .woo-shop-search .search-page-button-input {
    border: 1.5px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-ink-050);
    font-size: 13.5px;
    padding-top: .55rem;
    padding-bottom: .55rem;
}
body.woo-redesign .woo-shop-page .woo-shop-search .search-page-button-input:focus {
    background: var(--woo-white);
    border-color: var(--woo-olive-500) !important;
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-shop-page .woo-shop-search .search-page-button {
    background: var(--woo-ink-900);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    inset-inline-end: 4px;
}
body.woo-redesign .woo-shop-page .woo-shop-sort .sorting-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--woo-white);
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    padding: 8px 16px;
}
body.woo-redesign .woo-shop-page .woo-shop-sort .sorting-item svg path {
    stroke: var(--woo-ink-500);
}
body.woo-redesign .woo-shop-page .woo-shop-sort .sorting-item label {
    font-size: 13px;
    color: var(--woo-ink-700);
    font-weight: 500;
    white-space: nowrap;
}
body.woo-redesign .woo-shop-page .woo-shop-sort .sorting-item select {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--woo-ink-900);
    font-weight: 500;
    cursor: pointer;
    outline: none;
}
body.woo-redesign .woo-shop-page .woo-shop-filter-btn {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-md) !important;
    color: var(--woo-white);
}

/* ---- 15.3 two-column layout ---- */
body.woo-redesign .woo-shop-page .woo-shop-layout {
    padding-top: 20px !important;
}
body.woo-redesign .woo-shop-page .woo-shop-content {
    min-height: 240px;
}

/* ---- 15.4 filter sidebar panel ---- */
body.woo-redesign .woo-shop-page .woo-filter-panel {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-sm);
    padding: 20px !important;
}
body.woo-redesign .woo-shop-page .woo-filter-panel-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-shop-page .woo-filter-panel-title {
    font-family: 'Fraunces', serif;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-shop-page .woo-filter-panel-head .close {
    font-size: 1.2rem;
    color: var(--woo-ink-500);
    opacity: 1;
    display: none;
}
body.woo-redesign .woo-shop-page .woo-filter-clear-all {
    display: block;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--woo-ink-500);
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--woo-ink-100);
    transition: color .2s ease;
}
body.woo-redesign .woo-shop-page .woo-filter-clear-all:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-shop-page .woo-filter-clear-all i {
    font-size: 11px;
    margin-inline-end: 4px;
}

/* ---- 15.5 facet groups (shared shell for every _filter-* partial) ---- */
body.woo-redesign .woo-shop-page .woo-facet {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-shop-page .woo-facet:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
body.woo-redesign .woo-shop-page .woo-facet-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--woo-ink-700) !important;
}
body.woo-redesign .woo-shop-page .woo-facet select.product-list-filter-input,
body.woo-redesign .woo-shop-page .woo-facet select.form-control {
    width: 100%;
    border: 1.5px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    background-color: var(--woo-ink-050) !important;
    font-size: 13px;
    padding: 8px 12px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-shop-page .woo-facet select:focus {
    outline: none;
    border-color: var(--woo-olive-500) !important;
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}

/* organic / dietary toggle */
body.woo-redesign .woo-shop-page .woo-facet-check-label {
    font-size: 13.5px;
    color: var(--woo-ink-700);
    padding: 6px 10px;
    border-radius: var(--woo-radius-md);
    transition: background .2s ease;
}
body.woo-redesign .woo-shop-page .woo-facet-check-label:hover {
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-shop-page .woo-facet-check-mark {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
body.woo-redesign .woo-shop-page .woo-facet-check-active,
body.woo-redesign .woo-shop-page .woo-facet-check-active.text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
    background: var(--woo-olive-050);
}

/* price facet */
body.woo-redesign .woo-shop-page .woo-price-inputs .form-control {
    border: 1.5px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-sm) !important;
    font-size: 13px;
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-shop-page .woo-price-inputs .action-search-products-by-price {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    flex-shrink: 0;
}
body.woo-redesign .woo-shop-page #price_range_slider {
    position: relative;
    height: 4px;
    background: var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
}
body.woo-redesign .woo-shop-page #price_range_slider .slider-range {
    position: absolute;
    top: 0;
    height: 4px;
    background: var(--woo-olive-500);
    border-radius: var(--woo-radius-pill);
}
body.woo-redesign .woo-shop-page #price_range_slider .slider-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-inline-start: -8px;
    background: var(--woo-white);
    border: 3px solid var(--woo-olive-600);
    border-radius: 50%;
    box-shadow: var(--woo-shadow-sm);
    cursor: pointer;
}

/* categories accordion */
body.woo-redesign .woo-shop-page .product-categories-list .card-header {
    padding: 8px 0;
}
body.woo-redesign .woo-shop-page .product-categories-list .for-hover-label,
body.woo-redesign .woo-shop-page .product-categories-list label {
    font-size: 13.5px;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-shop-page .product-categories-list img {
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-shop-page .product-categories-list .text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
}
body.woo-redesign .woo-shop-page .menu--caret i {
    transition: transform .2s ease;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-shop-page .menu--caret-accordion.open > .card-header .menu--caret i {
    transform: rotate(90deg);
    color: var(--woo-olive-700);
}

/* brand / publishing-house / author search + list */
body.woo-redesign .woo-shop-page .search-product-attribute-container .cz-filter-search {
    border: 1.5px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-ink-050);
    font-size: 12.5px;
}
body.woo-redesign .woo-shop-page .__brands-cate-wrap {
    max-height: 220px;
}
body.woo-redesign .woo-shop-page .__brands-cate-wrap .brand li {
    font-size: 13.5px;
    color: var(--woo-ink-700);
    padding: 7px 8px;
    border-radius: var(--woo-radius-sm);
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-shop-page .__brands-cate-wrap .brand li:hover {
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-shop-page .__brands-cate-wrap .brand li.text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-shop-page .__brands-cate-badge span {
    font-size: 11px;
    color: var(--woo-ink-500);
    background: var(--woo-ink-050);
    border-radius: var(--woo-radius-pill);
    padding: 1px 8px;
}
body.woo-redesign .woo-shop-page .__brands-cate-wrap .brand li.text-primary .__brands-cate-badge span {
    background: var(--woo-olive-100);
    color: var(--woo-olive-700);
}

/* ---- 15.6 ajax product grid + pagination + empty state ---- */
body.woo-redesign .woo-shop-page .woo-shop-grid-item {
    margin-bottom: 4px;
}
body.woo-redesign .woo-shop-page .woo-shop-pagination .pagination {
    gap: 6px;
    flex-wrap: wrap;
}
body.woo-redesign .woo-shop-page .woo-shop-pagination .page-item .page-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50% !important;
    border-color: var(--woo-ink-100);
    color: var(--woo-ink-700);
    font-size: 13px;
    font-weight: 600;
}
body.woo-redesign .woo-shop-page .woo-shop-pagination .page-item.active .page-link {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-shop-page .woo-shop-pagination .page-item.disabled .page-link {
    color: var(--woo-ink-300);
    background: transparent;
}
body.woo-redesign .woo-shop-page .woo-shop-pagination .page-link:hover {
    background: var(--woo-olive-100);
    border-color: var(--woo-olive-300);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-shop-page .woo-shop-pagination .page-link:focus {
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}

body.woo-redesign .woo-shop-page .woo-shop-empty {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-shop-page .woo-shop-empty-inner {
    text-align: center;
}
body.woo-redesign .woo-shop-page .woo-shop-empty-img {
    max-width: 160px;
    margin: 0 auto 16px;
    opacity: .85;
}
body.woo-redesign .woo-shop-page .woo-shop-empty-text {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    color: var(--woo-ink-700) !important;
}

/* =====================================================================
   16) SHOP PAGE RESPONSIVE
   ===================================================================== */
@media (max-width: 991.98px) {
    body.woo-redesign .woo-shop-page .woo-filter-panel-head .close {
        display: block;
    }
    body.woo-redesign .woo-shop-page .woo-filter-panel {
        border-radius: 0 !important;
        box-shadow: none;
        border: none;
        height: 100%;
    }
}
@media (max-width: 767px) {
    body.woo-redesign .woo-shop-page .search-page-header {
        padding: 14px;
        border-radius: var(--woo-radius-md);
    }
    body.woo-redesign .woo-shop-page .woo-shop-title {
        font-size: 16px;
    }
}

/* =====================================================================
   17a) PDP SUPPORTING PARTIALS (phase 5b)
   ---------------------------------------------------------------------
   Reskins three self-contained partials included from
   products/details.blade.php (owned by the parallel phase-5a pass, not
   touched here):
     17.1 _seller-products-product-details.blade.php — "more from this
          seller" rail. This partial reuses the legacy `.flash_deal_product`
          markup that is ALSO shared by _feature-deal-product and other
          not-yet-redesigned partials, so every rule below hangs off the
          new `.woo-seller-rail-card` class added only to this partial's
          root element — `.flash_deal_product` itself is never touched.
     17.2 _product-reviews.blade.php — individual review cards + seller
          reply blocks + their "read more" modals, scoped under the new
          `.woo-review-card` / `.woo-review-reply` / `.woo-review-modal`
          classes added only inside that partial.
     17.3 _quick-view-data.blade.php — the AJAX-loaded quick-view modal
          body (site-wide, opened via `.action-product-quick-view`),
          scoped under the new `.woo-quick-view` class added to its root
          `.modal-body`. Every functional class/id/data-attribute this
          markup shares with custom.js (addToCartDynamicForm,
          add-to-cart-details-form, product-add-to-cart-button,
          product-buy-now-button, product-action-add-wishlist,
          product-restock-request-button, product-generated-variation-code,
          product-exist-in-cart-list, btn-number[data-type/data-field],
          quick-view-preview-image-by-color, wishlist_icon_*,
          countWishlist-*, close-quick-view-modal, share-on-social-media,
          quickviewSlider2/quickviewSliderThumb2 swiper hooks) is left
          100% intact — only colors/spacing/type/radii are layered on.
     17.4 _product-preview-modal.blade.php — the digital-file preview
          modal (#product-preview-modal), scoped under the new
          `.woo-preview-modal` class added to its root `.modal`.
   ===================================================================== */

/* ---- 17.1 seller cross-sell rail card ---- */
body.woo-redesign .woo-seller-rail-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 10px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-seller-rail-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--woo-shadow-sm);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-seller-rail-card .for-discount-value {
    background: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-sm);
    font-size: 10.5px !important;
}
body.woo-redesign .woo-seller-rail-card .image-default-bg-color {
    background: var(--woo-ink-050);
    border-radius: var(--woo-radius-sm);
    overflow: hidden;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.woo-redesign .woo-seller-rail-card .image-default-bg-color img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
body.woo-redesign .woo-seller-rail-card .flash_deal_product_details {
    flex: 1;
    min-width: 0;
}
body.woo-redesign .woo-seller-rail-card .flash-product-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    font-size: 13.5px;
    color: var(--woo-ink-900);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
body.woo-redesign .woo-seller-rail-card .flash-product-price {
    color: var(--woo-ink-900) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
body.woo-redesign .woo-seller-rail-card .category-single-product-price {
    color: var(--woo-ink-300) !important;
    font-size: 11.5px !important;
}
body.woo-redesign .woo-seller-rail-card .flash-product-review {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}
body.woo-redesign .woo-seller-rail-card .flash-product-review .tio-star,
body.woo-redesign .woo-seller-rail-card .flash-product-review .tio-star-half,
body.woo-redesign .woo-seller-rail-card .flash-product-review .tio-star-outlined {
    color: var(--woo-rating) !important;
    font-size: 11px;
}
body.woo-redesign .woo-seller-rail-card .badge-style2 {
    color: var(--woo-ink-500) !important;
    font-size: 11px;
}
body.woo-redesign .woo-seller-rail-card .badge-soft-success {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}

/* ---- 17.2 PDP review cards ---- */
body.woo-redesign .woo-review-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 18px 16px;
    margin-left: 0;
    margin-right: 0;
}
body.woo-redesign .woo-review-card .media img {
    width: 48px;
    height: 48px;
    border: 2px solid var(--woo-olive-100);
}
body.woo-redesign .woo-review-card .media-body > span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-review-card .sr-star.czi-star-filled {
    color: var(--woo-rating) !important;
}
body.woo-redesign .woo-review-card .media-body .text-body.text-nowrap {
    font-size: 12.5px;
    color: var(--woo-ink-500) !important;
    font-weight: 600;
}
body.woo-redesign .woo-review-card p.text-body {
    color: var(--woo-ink-700) !important;
    font-size: 13.5px;
    line-height: 1.7;
}
body.woo-redesign .woo-review-card .cz-image-zoom {
    border-radius: var(--woo-radius-sm) !important;
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-review-card .col-md-2 .float-end {
    font-size: 12px !important;
    color: var(--woo-ink-300) !important;
    font-weight: 500 !important;
}
body.woo-redesign .woo-review-card a.text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
    font-size: 12.5px;
}
body.woo-redesign .woo-review-reply {
    background: var(--woo-olive-050) !important;
    border: 1px solid var(--woo-olive-100);
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .woo-review-reply h6 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-review-reply p {
    color: var(--woo-ink-700) !important;
    font-size: 13.5px;
}
body.woo-redesign .woo-review-reply a.text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
    font-size: 12.5px;
}
body.woo-redesign .woo-review-modal .modal-content {
    border-radius: var(--woo-radius-lg);
    border: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .woo-review-modal .modal-header {
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-review-modal .modal-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-review-modal .modal-body p {
    color: var(--woo-ink-700) !important;
    line-height: 1.7;
}

/* ---- 17.3 quick-view modal ---- */
body.woo-redesign .woo-quick-view {
    padding: 18px 22px 22px;
}
body.woo-redesign .woo-quick-view .close-quick-view-modal {
    background: var(--woo-ink-050) !important;
    border-color: var(--woo-ink-100) !important;
    color: var(--woo-ink-700);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-quick-view .close-quick-view-modal:hover {
    background: var(--woo-ink-900) !important;
    color: var(--woo-white);
}

/* image column */
body.woo-redesign .woo-quick-view .quickviewSlider2 {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-quick-view .discount-badge {
    background: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    padding: 5px 12px !important;
    font-weight: 700;
    letter-spacing: .02em;
}
body.woo-redesign .woo-quick-view .cz-product-gallery-icons .btn-circle {
    background: var(--woo-white) !important;
    border-color: var(--woo-ink-100) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-quick-view .cz-product-gallery-icons .product-action-add-wishlist {
    background: var(--woo-white);
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-quick-view .cz-product-gallery-icons .product-action-add-wishlist .fa-heart {
    color: #d6547a !important;
}
body.woo-redesign .woo-quick-view .cz-product-gallery-icons .product-action-add-wishlist .fa-heart-o {
    color: var(--woo-ink-700) !important;
}
body.woo-redesign .woo-quick-view .share_btn.btn-outline-primary {
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-quick-view .share_dropdown {
    border-radius: var(--woo-radius-md);
    box-shadow: var(--woo-shadow-md);
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-quick-view .quickviewSliderThumb2 .swiper-slide {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-sm) !important;
    cursor: pointer;
    opacity: .65;
    transition: opacity .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-quick-view .quickviewSliderThumb2 .swiper-slide-thumb-active,
body.woo-redesign .woo-quick-view .quickviewSliderThumb2 .swiper-slide:hover {
    opacity: 1;
    border-color: var(--woo-olive-500) !important;
}
body.woo-redesign .woo-quick-view .swiper-quickview-button-next,
body.woo-redesign .woo-quick-view .swiper-quickview-button-prev {
    color: var(--woo-ink-900);
}

/* details column */
body.woo-redesign .woo-quick-view .details > a.d-block.pb-2 {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
body.woo-redesign .woo-quick-view .details > a.fs-18.fw-bold.text-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900) !important;
    text-decoration: none;
    line-height: 1.35;
}
body.woo-redesign .woo-quick-view .pro .sr-star.czi-star-filled,
body.woo-redesign .woo-quick-view .pro .sr-star.czi-star-filled.active {
    color: var(--woo-rating) !important;
}
body.woo-redesign .woo-quick-view .pro .web-text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-quick-view .pro .border-middle-14px {
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-quick-view .discounted-unit-price {
    color: var(--woo-ink-900) !important;
    font-size: 22px !important;
    font-family: 'Poppins', sans-serif;
}
body.woo-redesign .woo-quick-view .product-total-unit-price {
    color: var(--woo-ink-300) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

/* color swatches */
body.woo-redesign .woo-quick-view .checkbox-color label {
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-quick-view .checkbox-color input:checked ~ label {
    border-color: var(--woo-olive-600) !important;
    box-shadow: 0 0 0 2px var(--woo-olive-100);
}

/* choice-option chips */
body.woo-redesign .woo-quick-view .checkbox-alphanumeric--style-1 label {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-sm) !important;
    color: var(--woo-ink-700);
    font-weight: 600;
    background: var(--woo-white);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
body.woo-redesign .woo-quick-view .checkbox-alphanumeric input:checked ~ label {
    border-color: var(--woo-olive-600) !important;
    background: var(--woo-olive-050);
    color: var(--woo-olive-700) !important;
}

/* quantity stepper */
body.woo-redesign .woo-quick-view .quantity-box {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .woo-quick-view .quantity-box .btn-number {
    background: var(--woo-ink-050) !important;
    color: var(--woo-ink-900) !important;
    font-weight: 700;
}
body.woo-redesign .woo-quick-view .quantity-box .input-number {
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-quick-view .product-details-chosen-price-amount {
    color: var(--woo-olive-700) !important;
}

/* action buttons */
body.woo-redesign .woo-quick-view .product-add-and-buy-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.woo-redesign .woo-quick-view .btn-secondary.product-buy-now-button {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}
body.woo-redesign .woo-quick-view .btn--primary.product-add-to-cart-button {
    background: var(--woo-olive-500) !important;
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 700;
}
body.woo-redesign .woo-quick-view .btn-secondary.product-buy-now-button:hover {
    background: var(--woo-olive-700) !important;
    border-color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-quick-view .btn--primary.product-add-to-cart-button:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-quick-view .product-action-add-wishlist {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-quick-view .product-action-add-wishlist .fa-heart {
    color: #d6547a !important;
}
body.woo-redesign .woo-quick-view .request-restock-btn.btn-outline-primary {
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-quick-view .request-restock-btn.btn-outline-primary:hover {
    background: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-quick-view .alert-danger {
    background: #fbe9e9;
    border: 1px solid #f0c4c4;
    color: #a13a3a;
    border-radius: var(--woo-radius-md);
    font-size: 13px;
}

/* ---- 17.4 digital-file preview modal ---- */
body.woo-redesign .woo-preview-modal .modal-content {
    border-radius: var(--woo-radius-lg);
    border: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
    overflow: hidden;
}
body.woo-redesign .woo-preview-modal .modal-header {
    border-bottom: 1px solid var(--woo-ink-100);
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-preview-modal .modal-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-preview-modal .modal-body .btn-primary {
    background: var(--woo-olive-500) !important;
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}
body.woo-redesign .woo-preview-modal .modal-body .btn-primary:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}

/* ---- 17.5 responsive ---- */
@media (max-width: 767px) {
    body.woo-redesign .woo-quick-view {
        padding: 14px 16px 18px;
    }
    body.woo-redesign .woo-quick-view .quickviewSlider2 {
        border-radius: var(--woo-radius-md) !important;
    }
    body.woo-redesign .woo-review-card {
        padding: 14px 12px;
    }
}

/* =====================================================================
   17) PRODUCT DETAILS PAGE (resources/themes/default/web-views/products/
   details.blade.php + _product-details-sticky.blade.php).

   SCOPING: `.woo-pdp-page` is added to details.blade.php's outer
   `__inline-23` container AND (separately, since it is rendered as a
   sibling include, not a descendant) to the root element of
   _product-details-sticky.blade.php. Everything below is scoped under
   `.woo-pdp-page`, so generic/shared classnames reused elsewhere in the
   app (.card, .btn, .btn-secondary, .badge, .nav-tabs, .quantity-box,
   .checkbox-color, .btn-circle, .badge-danger ...) are never left bare.

   FUNCTIONAL HOOKS PRESERVED (verified against product-details.js,
   custom.js's swiper/easyzoom init, cartQuantityInitialize(),
   getVariantPrice(), addToCart(), commonFunctionalityForProductView(),
   updateProductDetailsTopSection()/updateProductDetailsBottomSection() —
   only visual presentation is changed here, no selector/attribute/name
   was renamed or removed):
     .quickviewSlider2 / .quickviewSliderThumb2 (Swiper + thumbs init),
     .swiper-quickview-button-next/-prev, .easyzoom (easyZoom init),
     data-color on .swiper-slide (inline color->slide script),
     .addToCartDynamicForm / .add-to-cart-details-form /
     .add-to-cart-sticky-form, .product-cart-option-container,
     input[name=color] / input[name=variant_key] / choice inputs +
     .focus-preview-image-by-color, .btn-number[data-type/data-field] /
     .input-number / .product-details-cart-qty, .quantity-box (closest()
     lookup target), .product-generated-variation-code /
     .product-generated-variation-text, .product-exist-in-cart-list,
     .product-add-to-cart-button[data-form/data-add/data-update],
     .product-buy-now-button[data-form/data-auth/data-route],
     .product-restock-request-section / .product-restock-request-button
     [data-form/data-auth/data-default/data-requested],
     .product-add-and-buy-section, .product-action-add-wishlist
     [data-product-id] / .wishlist_icon_{id} (fa-heart/fa-heart-o) /
     .wishlist-tooltip .add/.remove / .countWishlist-{id} / .countWishlist,
     .product-details-chosen-price-section / -amount, .discounted-unit-
     price / .product-total-unit-price / .discounted_badge /
     .discounted-badge-element, .product-bottom-section-price,
     .product-details-sticky-color-name, .product-details-sticky /
     -section / -top / -bottom / -collapse-btn / .multi-variation-product,
     .nav-tabs / .tab_link[data-toggle=tab][href], #reviews anchor,
     .see-more-details / .details-content-wrap, .view_more_button /
     #product-review-list, .share-on-social-media[data-action], the
     `#route-*` / `#products-details-page-data` / `#all-msg-container`
     data spans, and every @if/@foreach around variants, stock, digital
     vs physical, restock, trust indicators and seller/vendor info.
   No JS file was modified to build this section.
   ===================================================================== */

/* ---- 17.1 breadcrumb ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-breadcrumb {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 16px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-breadcrumb a {
    color: var(--woo-ink-500);
    transition: color .2s ease;
}
body.woo-redesign .woo-pdp-page .woo-pdp-breadcrumb a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-pdp-page .woo-pdp-breadcrumb-sep {
    margin: 0 6px;
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-pdp-page .woo-pdp-breadcrumb-current {
    color: var(--woo-ink-900);
    font-weight: 500;
}

/* ---- 17.2 top card (gallery + info) ----
   Phase 5e: only the product image itself should look "boxed" (it gets
   its own white/rounded treatment in 17.3 below) — the surrounding hero
   card and the description/reviews card sit flat on the page background,
   matching the mockup (no big white card wrapping the whole hero or the
   tab content). */
body.woo-redesign .woo-pdp-page .card.card-body.flex-grow-0,
body.woo-redesign .woo-pdp-page .__review-overview.card.card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ---- 17.3 gallery ---- */
body.woo-redesign .woo-pdp-page .pd-img-wrap .quickviewSlider2.swiper-container {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-pdp-page .pd-img-wrap .quickviewSlider2 img {
    object-fit: contain;
    background: var(--woo-white);
}
body.woo-redesign .woo-pdp-page .discount-badge-wrapper {
    top: 12px;
    left: 12px;
}
body.woo-redesign .woo-pdp-page .discount-badge-wrapper .discount-badge {
    background: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill);
    padding: 6px 14px !important;
    font-weight: 700;
}
body.woo-redesign .woo-pdp-page .cz-product-gallery-icons .btn-circle {
    background: var(--woo-white) !important;
    border-color: var(--woo-ink-100) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-pdp-page .cz-product-gallery-icons .product-action-add-wishlist,
body.woo-redesign .woo-pdp-page .cz-product-gallery-icons .share_btn.btn-outline-primary {
    background: var(--woo-white);
    border-color: var(--woo-ink-100) !important;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page .cz-product-gallery-icons .fa-heart {
    color: #e0533d !important;
}
body.woo-redesign .woo-pdp-page .quickviewSliderThumb2 .swiper-slide {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    cursor: pointer;
    transition: border-color .2s ease;
    overflow: hidden;
}
body.woo-redesign .woo-pdp-page .quickviewSliderThumb2 .swiper-slide img {
    object-fit: contain;
    background: var(--woo-white);
}
body.woo-redesign .woo-pdp-page .quickviewSliderThumb2 .swiper-slide-thumb-active {
    border-color: var(--woo-olive-500) !important;
    border-width: 2px !important;
}
body.woo-redesign .woo-pdp-page .swiper-quickview-button-next,
body.woo-redesign .woo-pdp-page .swiper-quickview-button-prev {
    color: var(--woo-ink-900);
}

/* ---- 17.4 title / meta / trust badges ---- */
body.woo-redesign .woo-pdp-page .product-cart-option-container > h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page .product-cart-option-container .pro .star-rating .tio-star,
body.woo-redesign .woo-pdp-page .product-cart-option-container .pro .star-rating .tio-star-half,
body.woo-redesign .woo-pdp-page .product-cart-option-container .pro .star-rating .tio-star-outlined {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-pdp-page .product-cart-option-container .pro .badge-soft-success {
    background: var(--woo-olive-100);
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-pdp-page .digital-product-authors {
    font-size: 13px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-pdp-page .digital-product-authors a {
    color: var(--woo-olive-700);
}

/* ---- 17.5 price ---- */
body.woo-redesign .woo-pdp-page .addToCartDynamicForm .text-accent,
body.woo-redesign .woo-pdp-page .add-to-cart-sticky-form .text-accent {
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-pdp-page .discounted-unit-price {
    color: var(--woo-ink-900);
    font-weight: 700;
}
body.woo-redesign .woo-pdp-page .product-total-unit-price {
    color: var(--woo-ink-300) !important;
}

/* ---- 17.6 variant / color / choice option rows ---- */
body.woo-redesign .woo-pdp-page .product-description-label {
    font-weight: 600;
    color: var(--woo-ink-700) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px !important;
}
body.woo-redesign .woo-pdp-page .checkbox-color label {
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-pdp-page .checkbox-color input:checked ~ label {
    border-color: var(--woo-olive-600) !important;
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-pdp-page .checkbox-alphanumeric--style-1 label {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-sm) !important;
    color: var(--woo-ink-700);
    font-weight: 600;
}
body.woo-redesign .woo-pdp-page .checkbox-alphanumeric--style-1 input:checked ~ label {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
}

/* ---- 17.7 quantity stepper ---- */
body.woo-redesign .woo-pdp-page .quantity-box {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-white);
}
body.woo-redesign .woo-pdp-page .quantity-box .btn-number {
    background: var(--woo-ink-050) !important;
    color: var(--woo-ink-900) !important;
    font-weight: 700;
}
body.woo-redesign .woo-pdp-page .quantity-box .btn-number:first-child {
    border-radius: var(--woo-radius-pill) 0 0 var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-pdp-page .quantity-box .btn-number:last-child {
    border-radius: 0 var(--woo-radius-pill) var(--woo-radius-pill) 0 !important;
}
body.woo-redesign .woo-pdp-page .quantity-box .input-number {
    font-weight: 600;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page .product-details-chosen-price-amount {
    color: var(--woo-ink-900);
    font-family: 'Fraunces', serif;
}

/* ---- 17.8 CTA buttons ---- */
body.woo-redesign .woo-pdp-page .product-add-to-cart-button.btn--primary {
    background: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    border: none !important;
    font-weight: 600;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.woo-redesign .woo-pdp-page .product-add-to-cart-button.btn--primary:hover {
    background: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
    box-shadow: var(--woo-shadow-md);
    transform: translateY(-1px);
}
body.woo-redesign .woo-pdp-page .product-buy-now-button.btn-secondary {
    background: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    border: none !important;
    font-weight: 600;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
body.woo-redesign .woo-pdp-page .product-buy-now-button.btn-secondary:hover {
    background: var(--woo-olive-600) !important;
    box-shadow: var(--woo-shadow-md);
    transform: translateY(-1px);
}
body.woo-redesign .woo-pdp-page .product-add-and-buy-section .btn-secondary:disabled,
body.woo-redesign .woo-pdp-page .product-add-and-buy-section .btn--primary:disabled {
    background: var(--woo-ink-100) !important;
    color: var(--woo-ink-500) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-pdp-page .product-cart-option-container > .product-add-and-buy-section-parent > .product-add-and-buy-section .product-action-add-wishlist,
body.woo-redesign .woo-pdp-page .product-details-sticky-bottom .product-action-add-wishlist {
    border-radius: var(--woo-radius-pill) !important;
    border-color: var(--woo-ink-100) !important;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page .product-action-add-wishlist .fa-heart {
    color: #e0533d !important;
}
body.woo-redesign .woo-pdp-page .request-restock-btn.btn-outline-primary {
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-pdp-page .product-add-and-buy-section-parent .alert-danger {
    border-radius: var(--woo-radius-md);
    font-size: 13px;
}

/* ---- 17.9 tabs / description ---- */
body.woo-redesign .woo-pdp-page .nav--tabs {
    border-bottom: 2px solid var(--woo-ink-100);
    justify-content: flex-start !important;
    gap: 28px !important;
}
body.woo-redesign .woo-pdp-page .nav--tabs .tab_link {
    padding: 14px 0 !important;
    font-weight: 500;
    font-size: 14px;
    color: var(--woo-ink-500) !important;
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: -2px;
    background: none !important;
    box-shadow: inset 0 -2px 0 0 transparent;
    transition: box-shadow .2s ease, color .2s ease;
}
body.woo-redesign .woo-pdp-page .nav--tabs .tab_link.active {
    font-weight: 600;
    color: var(--woo-ink-900) !important;
    box-shadow: inset 0 -2px 0 0 var(--woo-olive-500);
}
body.woo-redesign .woo-pdp-page .p-details-description {
    color: var(--woo-ink-700);
    line-height: 1.75;
    font-size: 14px;
}
body.woo-redesign .woo-pdp-page .see-more-details.btn-outline-primary {
    border-radius: var(--woo-radius-pill);
}

/* ---- 17.10 reviews summary ---- */
body.woo-redesign .woo-pdp-page .overall_review {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page #reviews .progress {
    border-radius: var(--woo-radius-pill);
    background: var(--woo-ink-050);
    overflow: hidden;
}
body.woo-redesign .woo-pdp-page #reviews .progress-bar {
    border-radius: var(--woo-radius-pill);
}
body.woo-redesign .woo-pdp-page .view_more_button.web--bg-primary {
    background: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}

/* ---- 17.11 below-hero strip: seller card (phase 5i — the shipping/
   trust strip that used to render here moved into the Benefits tab, see
   17.20 below. Seller card moved out from beside the hero into a
   full-width row below it in phase 5c, so the hero itself can span the
   full page width like the mockup) ---- */
body.woo-redesign .woo-pdp-page .__inline-31 {
    margin-top: 20px;
    max-width: 340px;
}

/* ---- seller/shop card (phase 5h — restyled to match the .woo-vendor-card
   design from the /vendors listing page: gradient banner, overlapping
   circular avatar, name+verified badge, address, rating/products/since
   stats row, "Visit Store" CTA. Real data: $wooShop is either
   $product->seller->shop or getInHouseShopConfig(), computed once in the
   blade above this block — see details.blade.php around __inline-31) ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card {
    display: flex;
    flex-direction: column;
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card:hover {
    box-shadow: var(--woo-shadow-md);
    transform: translateY(-2px);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-cover {
    height: 64px;
    background: linear-gradient(120deg, var(--woo-olive-700), var(--woo-olive-500));
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--woo-white);
    margin: -30px 0 0 22px;
    box-shadow: var(--woo-shadow-sm);
    position: relative;
    overflow: hidden;
    background: var(--woo-white);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-avatar-fallback {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--woo-white);
    background: var(--woo-olive-600);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-closed-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 58, 58, .82);
    color: var(--woo-white);
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    padding: 2px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-body {
    padding: 10px 20px 18px;
    display: flex;
    flex-direction: column;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-cover-link {
    display: block;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--woo-ink-900) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-name:hover {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-verified-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-loc {
    font-size: 12px;
    color: var(--woo-ink-500);
    margin-top: 3px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-stats {
    display: flex;
    gap: 18px;
    margin: 14px 0;
    padding: 12px 0;
    border-top: 1px solid var(--woo-ink-100);
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-stats b {
    display: block;
    font-size: 15px;
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-stats span {
    font-size: 10.5px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-cta {
    flex: 1 1 auto;
    padding: 11px;
    border-radius: var(--woo-radius-md);
    border: 1.5px solid var(--woo-ink-900);
    background: transparent;
    color: var(--woo-ink-900) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card:hover .wv-cta {
    background: var(--woo-ink-900);
    color: var(--woo-white) !important;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-chat-btn {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--woo-radius-md);
    border: none;
    background: var(--woo-ink-900);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-chat-btn img {
    width: 18px;
    height: 18px;
    -o-object-fit: contain;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-chat-btn:hover {
    background: var(--woo-olive-600);
    transform: translateY(-1px);
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-chat-btn:disabled {
    background: var(--woo-ink-100);
    cursor: not-allowed;
}
body.woo-redesign .woo-pdp-page .woo-pdp-seller-card .wv-chat-btn:disabled img {
    filter: none;
    opacity: .4;
}
body.woo-redesign .woo-pdp-page .view-all-btn-text {
    color: var(--woo-olive-700);
    font-weight: 600;
    font-size: 13px;
}

/* ---- 17.12 similar products section — no outer card, sits flat on the
   page background like the rest of the page (individual .prod-card
   product tiles inside keep their own box styling) ---- */
body.woo-redesign .woo-pdp-page .card.__card.border-0 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
body.woo-redesign .woo-pdp-page .card.__card.border-0 > .card-body {
    padding: 0 !important;
}

/* ---- 17.13 sticky add-to-cart bar ---- */
body.woo-redesign .woo-pdp-page.product-details-sticky-section {
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .woo-pdp-page.product-details-sticky-section .product-details-sticky-collapse-btn {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-pdp-page.product-details-sticky-section .product-bottom-section-price {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pdp-page.product-details-sticky-section .discounted_badge {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border-radius: var(--woo-radius-pill);
}

/* ---- 17.14 responsive ---- */
@media (max-width: 767.98px) {
    body.woo-redesign .woo-pdp-page .product-cart-option-container > h2 {
        font-size: 20px;
    }
}

/* ---- 17.15 brand eyebrow (phase 5c — mockup parity pass) ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-brand-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--woo-olive-700);
    margin-bottom: 6px;
}

/* ---- 17.16 save amount ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-save-amount {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--woo-olive-700) !important;
}

/* ---- 17.17 key highlights box ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-highlights {
    margin-top: 4px;
    padding: 20px;
    background: var(--woo-olive-050);
    border-radius: var(--woo-radius-md);
}
body.woo-redesign .woo-pdp-page .woo-pdp-highlights h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-900);
    margin-bottom: 12px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-highlights ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}
body.woo-redesign .woo-pdp-page .woo-pdp-highlights li {
    font-size: 13px;
    color: var(--woo-ink-700);
    padding-left: 22px;
    position: relative;
}
body.woo-redesign .woo-pdp-page .woo-pdp-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--woo-olive-600);
    font-weight: 700;
}

/* ---- 17.18 CTA button visual order (Add to Cart first, Buy Now second) ---- */
body.woo-redesign .woo-pdp-page .product-add-and-buy-section {
    display: flex;
    flex-wrap: wrap;
}
body.woo-redesign .woo-pdp-page .product-add-and-buy-section .product-add-to-cart-button {
    order: 1;
}
body.woo-redesign .woo-pdp-page .product-add-and-buy-section .product-buy-now-button {
    order: 2;
}

/* ---- 17.19 write-a-review CTA ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-write-review {
    background: var(--woo-olive-050);
    border: 1px solid var(--woo-olive-100);
    border-radius: var(--woo-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-write-review h5 {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    color: var(--woo-ink-900);
    margin-bottom: 6px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-write-review p {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 16px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-write-review .btn-outline-primary {
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    background: transparent !important;
}
body.woo-redesign .woo-pdp-page .woo-pdp-write-review .btn-outline-primary:hover {
    background: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
}

/* ---- 17.20 benefits tab (phase 5f — reuses the same real trust-
   indicator/highlight facts as the Key Highlights box, laid out as a
   card grid like the mockup's Benefits tab, instead of fabricated
   per-product copy. Phase 5i: the company-reliability strip (Fast
   Delivery / Safe Payment / 7 Days Return / 100% Authentic) that used
   to render as its own strip below the hero now renders as extra cards
   in this same grid instead, using their real configured icons) ---- */
body.woo-redesign .woo-pdp-page .woo-pdp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
body.woo-redesign .woo-pdp-page .woo-pdp-benefit-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--woo-olive-050);
    border-radius: var(--woo-radius-md);
    padding: 18px 20px;
    font-size: 14px;
    color: var(--woo-ink-900);
    font-weight: 500;
}
body.woo-redesign .woo-pdp-page .woo-pdp-benefit-check {
    color: var(--woo-olive-600);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
body.woo-redesign .woo-pdp-page .woo-pdp-benefit-icon {
    width: 34px;
    height: 34px;
    padding: 7px;
    -o-object-fit: contain;
    object-fit: contain;
    background: var(--woo-olive-100);
    border-radius: 50%;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    body.woo-redesign .woo-pdp-page .woo-pdp-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   18) CART PAGE (web-views/cart/cart-list.blade.php,
       web-views/cart/_cart-details.blade.php). The DOM here is a real
       transactional table/list (quantity AJAX, coupon apply/remove,
       item removal) — every rule below targets EXISTING structural /
       functional classnames (never touches route()/JS-bound selectors),
       scoped under .woo-cart-page so bootstrap-y classnames reused here
       (.card, .qty, .cart_total, .cart_information ...) can't leak onto
       not-yet-redesigned pages. .woo-cart-page also wraps the shared
       web-views/partials/_order-summary.blade.php sidebar when it is
       rendered on this page (that partial file itself is untouched —
       it is also reused, unscoped, on the checkout pages).
   ===================================================================== */

/* ---- 18.1 page shell / heading ---- */
body.woo-redesign .woo-cart-page {
    background: transparent;
}
body.woo-redesign .woo-cart-page .woo-cart-heading {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 36px);
    color: var(--woo-ink-900);
    text-align: left;
}
body.woo-redesign .woo-cart-page .woo-cart-heading-count {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-cart-crumb {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 8px;
    padding: 0 4px;
}
body.woo-redesign .woo-cart-crumb a {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-cart-crumb a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-cart-crumb span {
    color: var(--woo-ink-900);
    font-weight: 500;
}

/* ---- 18.2 item group card + shop header row ---- */
body.woo-redesign .woo-cart-page .cart_information {
    background: var(--woo-white);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    padding: 0;
    border: 1px solid var(--woo-ink-100);
    overflow: hidden;
}
body.woo-redesign .woo-cart-page .cart_information .card-header {
    background: var(--woo-ink-050);
    border-bottom: 1px solid var(--woo-ink-100);
    padding: 14px 16px;
}
body.woo-redesign .woo-cart-page .cart_information .card-header a.text-primary {
    color: var(--woo-ink-900) !important;
    font-weight: 600;
    transition: color .2s ease;
}
body.woo-redesign .woo-cart-page .cart_information .card-header a.text-primary:hover {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-cart-page input.shop-head-check,
body.woo-redesign .woo-cart-page input.shop-item-check {
    accent-color: var(--woo-olive-600);
    width: 16px;
    height: 16px;
}
body.woo-redesign .woo-cart-page .select-method-border {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
}

/* ---- 18.3 desktop table ---- */
body.woo-redesign .woo-cart-page .__cart-table.table thead.thead-light th {
    background: transparent;
    border: none;
    color: var(--woo-ink-500);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
body.woo-redesign .woo-cart-page table.__cart-table tbody tr {
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-cart-page table.__cart-table tbody tr:last-child {
    border-bottom: none;
}
body.woo-redesign .woo-cart-page table.__cart-table td {
    border: none;
    padding: 14px 12px;
}
body.woo-redesign .woo-cart-page .__img-62,
body.woo-redesign .woo-cart-page .__img-48 {
    border-radius: var(--woo-radius-md) !important;
    background: var(--woo-olive-050);
    object-fit: cover;
}
body.woo-redesign .woo-cart-page table.__cart-table td a {
    color: var(--woo-ink-900);
    font-weight: 600;
    transition: color .2s ease;
}
body.woo-redesign .woo-cart-page table.__cart-table td a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-cart-page .__text-12px {
    color: var(--woo-ink-500);
}

/* ---- 18.4 mobile item row card ---- */
body.woo-redesign .woo-cart-page .woo-cart-item-row {
    background: var(--woo-white);
}
body.woo-redesign .woo-cart-page .woo-cart-item-row.border-bottom {
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-cart-page .woo-cart-item-row a {
    color: var(--woo-ink-900);
    font-weight: 600;
}

/* ---- 18.5 quantity stepper (shared row/column .qty markup) ---- */
body.woo-redesign .woo-cart-page .qty {
    background: var(--woo-ink-050);
    border-radius: var(--woo-radius-pill);
    padding: 3px;
}
body.woo-redesign .woo-cart-page .qty_plus,
body.woo-redesign .woo-cart-page .qty_minus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}
body.woo-redesign .woo-cart-page .qty_plus:hover,
body.woo-redesign .woo-cart-page .qty_minus:hover {
    background: var(--woo-olive-300);
}
body.woo-redesign .woo-cart-page .qty_input {
    background: transparent;
    border: none;
    width: 34px;
    text-align: center;
    font-weight: 700;
    color: var(--woo-ink-900);
}

/* ---- 18.6 free-delivery progress ---- */
body.woo-redesign .woo-cart-page .free-delivery-area {
    background: var(--woo-olive-050);
    border-radius: var(--woo-radius-md);
    padding: 10px 14px;
    margin-left: 12px;
    margin-right: 12px;
}
body.woo-redesign .woo-cart-page .free-delivery-progress.progress {
    background: var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    height: 6px;
    margin-top: 8px;
}
body.woo-redesign .woo-cart-page .free-delivery-progress .progress-bar {
    background: var(--woo-olive-500);
    border-radius: var(--woo-radius-pill);
}

/* ---- 18.7 order note ---- */
body.woo-redesign .woo-cart-page textarea#order_note {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-cart-page textarea#order_note:focus {
    border-color: var(--woo-olive-500) !important;
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}

/* ---- 18.8 empty-cart state ---- */
body.woo-redesign .woo-cart-page .woo-cart-empty {
    background: var(--woo-white);
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-sm);
    border: none;
}
body.woo-redesign .woo-cart-page .woo-cart-empty img {
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}
body.woo-redesign .woo-cart-page .woo-cart-empty p {
    color: var(--woo-ink-500);
    font-size: 15px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- 18.9 order summary sidebar (shared _order-summary partial,
        reached here only because .woo-cart-page wraps it on this page) ---- */
body.woo-redesign .woo-cart-page .order-summery-aside .__cart-total {
    background: var(--woo-white);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    border: 1px solid var(--woo-ink-100);
    padding: 20px;
}
body.woo-redesign .woo-cart-page .order-summery-aside .cart_total {
    background: transparent;
    padding: 0;
}
body.woo-redesign .woo-cart-page .order-summery-aside .cart_title {
    color: var(--woo-ink-500);
    font-weight: 500 !important;
}
body.woo-redesign .woo-cart-page .order-summery-aside .cart_value {
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-cart-page .order-summery-aside .cart_title.text-primary {
    color: var(--woo-ink-900) !important;
    font-family: 'Fraunces', serif;
    font-size: 17px;
}
body.woo-redesign .woo-cart-page .order-summery-aside .cart_value {
    font-size: 15px;
}
body.woo-redesign .woo-cart-page .order-summery-aside h6.text-primary {
    background: var(--woo-olive-050);
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-md);
    padding: 10px 14px;
    font-size: 13px;
}
body.woo-redesign .woo-cart-page .order-summery-aside hr {
    border-color: var(--woo-ink-100);
    opacity: 1;
}
body.woo-redesign .woo-cart-page .order-summery-aside .coupon-code-form .form-control {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-white) !important;
}
body.woo-redesign .woo-cart-page .order-summery-aside .coupon-code-form .input_code {
    font-size: 13.5px;
}
body.woo-redesign .woo-cart-page .order-summery-aside #apply-coupon-code.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    letter-spacing: .03em;
}
body.woo-redesign .woo-cart-page .order-summery-aside .pt-2 > .form-control.rounded-pill {
    background: var(--woo-olive-050) !important;
    border: 1px solid var(--woo-olive-300) !important;
}
body.woo-redesign .woo-cart-page .order-summery-aside .get-view-by-onclick {
    border-radius: 50%;
    transition: background .2s ease;
}
body.woo-redesign .woo-cart-page .order-summery-aside .get-view-by-onclick:hover {
    background: var(--woo-ink-100);
}
body.woo-redesign .woo-cart-page .order-summery-aside .light-box {
    background: var(--woo-olive-050) !important;
    border-radius: var(--woo-radius-md);
}
body.woo-redesign .woo-cart-page .order-summery-aside .proceed_to_next_button.action-checkout-function {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-cart-page .order-summery-aside .proceed_to_next_button.action-checkout-function:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-cart-page .order-summery-aside > .d-flex.justify-content-center a.text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
}

/* ---- 18.10 mobile sticky checkout bar ---- */
body.woo-redesign .woo-cart-page .bottom-sticky3 {
    background: var(--woo-white) !important;
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .woo-cart-page .bottom-sticky3 .proceed_to_next_button {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}

/* ---- 18.11 responsive ---- */
@media (max-width: 991.98px) {
    body.woo-redesign .woo-cart-page .cart_information {
        border-radius: var(--woo-radius-lg);
    }
}

/* ---- 18.12 pixel-match pass vs UI-PROJECT-FOLDER/cart.html: hide the
        bootstrap table's column-label header row (product/unit price/
        qty/total) so each seller group reads as a flat item list like
        the mockup, raise the sticky offset to clear the taller sticky
        header, and add a real "Start shopping" CTA to the empty state
        (route('products') — a genuine link, not decorative). No table
        markup, row structure, or JS-bound class/id touched. ---- */
body.woo-redesign .woo-cart-page .__cart-table.table thead.thead-light {
    display: none;
}
body.woo-redesign .woo-cart-page .order-summery-aside .__cart-total_sticky {
    top: 140px;
}
body.woo-redesign .woo-cart-page .woo-cart-empty-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--woo-ink-900);
    margin-top: 6px;
    margin-bottom: 10px;
}
body.woo-redesign .woo-cart-page .woo-cart-empty-cta {
    margin-top: 8px;
}

/* ---- 18.13 pixel-match pass #2: flatten the desktop bootstrap table
        into a single flex row per item (thumb+name | qty stepper | line
        total | remove ✕), matching cart.html's compact row design,
        purely via CSS display overrides — the <table>/<tr>/<td> markup,
        and every JS-bound class/data-attribute inside it, is untouched.
        A new `.woo-cart-remove` span (wired to the existing global
        removeProductFromCartList() from cart-details.js — no new JS)
        was added per row in the blade, and the per-seller `.card-header`
        (shop name / shipping picker) is now only rendered when the cart
        has more than one seller group, so the common single-seller cart
        reads as one clean card exactly like the mockup. ---- */
body.woo-redesign .woo-cart-page .__cart-table.table tbody {
    display: block;
}
body.woo-redesign .woo-cart-page .__cart-table.table tbody tr {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}
body.woo-redesign .woo-cart-page .__cart-table.table tbody td {
    display: flex;
    align-items: center;
    border: none !important;
    padding: 0 !important;
}
body.woo-redesign .woo-cart-page .__cart-table.table tbody td.__w-45 {
    flex: 1;
    min-width: 0;
    order: 1;
}
/* unit-price column hidden — the line total column (below) already
   covers it; showing both duplicated a single-quantity row like the
   mockup's and looked redundant once quantities differ. */
body.woo-redesign .woo-cart-page .__cart-table.table tbody td.__w-15p:nth-child(2) {
    display: none;
}
body.woo-redesign .woo-cart-page .__cart-table.table tbody td.__w-15p:nth-child(3) {
    order: 2;
    flex: 0 0 auto;
}
body.woo-redesign .woo-cart-page .__cart-table.table tbody td.__w-15p.text-end {
    order: 3;
    flex: 0 0 auto;
    min-width: 72px;
    justify-content: flex-end;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-cart-page .woo-cart-remove-cell {
    order: 4;
    flex: 0 0 auto;
}
body.woo-redesign .woo-cart-page .woo-cart-item-brand {
    color: var(--woo-olive-700);
    font-size: 12px;
    font-weight: 500;
}
body.woo-redesign .woo-cart-page .woo-cart-remove {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--woo-ink-300);
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}
body.woo-redesign .woo-cart-page .woo-cart-remove:hover {
    color: #d0484f;
    background: #fdf0f0;
}
/* mobile row: same remove ✕, appended as a third flex child next to the
   qty stepper (that row's outer wrapper is already `d-flex justify-
   content-between`, so no extra markup was needed to slot it in). */
body.woo-redesign .woo-cart-page .woo-cart-item-row {
    position: relative;
}
body.woo-redesign .woo-cart-page .woo-cart-item-row .woo-cart-remove {
    align-self: flex-start;
}

/* =====================================================================
   32) WISHLIST PAGE — pixel-match reskin of UI-PROJECT-FOLDER/
   wishlist.html (resources/themes/default/web-views/users-profile/
   account-wishlist.blade.php + partials/_wish-list-data.blade.php).

   Scoped under a NEW `.woo-wishlist-page` class (added to the outer
   container in account-wishlist.blade.php only) rather than the
   already-shared `.woo-account-page`/`.wishlist-item` selectors used
   by section 22.7, because `.wishlist-item` markup is also reused
   inline by account-restock-requests.blade.php — turning it into a
   vertical product-tile grid here must not affect that other page.
   The account sidebar (`_profile-aside`) is real navigation the
   mockup's standalone page doesn't have; it's kept per "keep all
   functionality" and left unscoped by this section. All functional
   classes/ids (`#set-wish-list`, `#row_id{id}`, `.remove--icon.
   function-remove-wishList[data-id]`, `#wishlist_paginated_page`,
   `.woo-pagination`) are untouched — see section 22.4/30 for pagination.
   ===================================================================== */

body.woo-redesign .woo-wishlist-crumb {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 18px;
    padding: 0 4px;
}
body.woo-redesign .woo-wishlist-crumb a {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-wishlist-crumb a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-wishlist-crumb span {
    color: var(--woo-ink-900);
    font-weight: 500;
}

body.woo-redesign .woo-wishlist-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(20px, 2.4vw, 26px) !important;
    font-weight: 600 !important;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-wishlist-title span {
    font-size: 15px;
    color: var(--woo-ink-500);
    font-weight: 400;
}
body.woo-redesign .woo-wishlist-continue,
body.woo-redesign .woo-wishlist-clear-all {
    border: 1.5px solid var(--woo-ink-900);
    color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-wishlist-continue:hover {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-wishlist-clear-all {
    border-color: #e74c3c;
    color: #e74c3c;
}
body.woo-redesign .woo-wishlist-clear-all:hover {
    background: #e74c3c;
    color: var(--woo-white);
}

/* ---- wishlist grid (replaces the vertical d-flex list with a
        product-tile grid matching the mockup) ---- */
body.woo-redesign .woo-wishlist-page .wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
body.woo-redesign .woo-wishlist-page .wishlist-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.woo-redesign .woo-wishlist-page .wishlist-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-wishlist-page .wishlist-img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: var(--woo-radius-md);
    overflow: hidden;
    background: var(--woo-olive-050);
    margin-bottom: 10px;
}
body.woo-redesign .woo-wishlist-page .wishlist-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .remove--icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .remove--icon:hover {
    background: #ff4444;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .remove--icon:hover i {
    color: var(--woo-white) !important;
}
body.woo-redesign .woo-wishlist-page .wishlist-cont {
    width: 100%;
    display: block;
}
body.woo-redesign .woo-wishlist-page .wishlist-text {
    width: 100%;
}
body.woo-redesign .woo-wishlist-page .wishlist-text .font-name a {
    font-size: 13.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.woo-redesign .woo-wishlist-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    width: 100%;
}
body.woo-redesign .woo-wishlist-empty-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--woo-ink-900);
    margin-top: 4px;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    body.woo-redesign .woo-wishlist-page .wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767.98px) {
    body.woo-redesign .woo-wishlist-page .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body.woo-redesign .woo-wishlist-head {
        align-items: flex-start !important;
    }
}
@media (max-width: 420px) {
    body.woo-redesign .woo-wishlist-page .wishlist-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

/* =====================================================================
   19) CHECKOUT FLOW (web-views/checkout/shipping.blade.php,
       phone-verification.blade.php, payment.blade.php, complete.blade.php
       + shared partials _checkout-steps.blade.php, _order-summary.blade.php).

   This is a REAL transactional flow (address entry/selection, OTP
   verification, payment method selection, order placement) — every
   rule below targets EXISTING structural/functional classnames only;
   no form action/method, field name attribute, route() call, or JS
   selector was touched (verified against shipping.js, payment.js,
   custom.js's actionCheckoutFunctionInit()/checkoutFromShipping()/
   checkoutFromPayment(), and the inline OTP ajax script in
   phone-verification.blade.php). Scoped under `.woo-checkout-page`,
   added to the outer container of shipping/phone-verification/payment
   (also wraps their shared _order-summary.blade.php include). The
   complete.blade.php success page carries its own
   `.woo-checkout-page.woo-checkout-complete` pair on the same element
   since it doesn't include _checkout-steps or _order-summary — rules
   specific to it are scoped `.woo-checkout-complete`. The payment
   step's two modals (#selectPaymentMethod, #wallet_submit_button) sit
   outside the container in the DOM, so they're targeted directly by
   their (page-unique) ids instead.
   ===================================================================== */

/* ---- 19.1 step indicator (_checkout-steps.blade.php) ---- */
body.woo-redesign .woo-checkout-page .checkout-steps-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 560px;
    margin: 0 auto;
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    position: relative;
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step::before {
    content: '';
    position: absolute;
    top: 17px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--woo-ink-100);
    z-index: 0;
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step:first-child::before {
    display: none;
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step.completed::before {
    background: var(--woo-olive-500);
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step-circle {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--woo-white);
    border: 2px solid var(--woo-ink-100);
    color: var(--woo-ink-500);
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step.completed .step-circle {
    background: var(--woo-olive-500);
    border-color: var(--woo-olive-500);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step.active .step-circle {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step p {
    font-size: 12.5px !important;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step.completed p,
body.woo-redesign .woo-checkout-page .checkout-steps-custom .step.active p {
    color: var(--woo-ink-900) !important;
    font-weight: 600 !important;
}

/* ---- 19.2 shared card shell (.card, .__card used across all 4 steps) ---- */
body.woo-redesign .woo-checkout-page .card,
body.woo-redesign .woo-checkout-page .__card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-checkout-page .checkout_details h4 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}

/* ---- 19.3 saved-address dropdown ---- */
body.woo-redesign .woo-checkout-page .list-group-item {
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-checkout-page .add-another-address .dropdown-toggle {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    background: var(--woo-ink-050);
    color: var(--woo-ink-900);
    font-weight: 500;
}
body.woo-redesign .woo-checkout-page .saved-address-dropdown {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    box-shadow: var(--woo-shadow-md);
    padding: 6px;
}
body.woo-redesign .woo-checkout-page .saved-address-dropdown .dropdown-item {
    border-radius: var(--woo-radius-sm);
    padding: 10px 12px;
}
body.woo-redesign .woo-checkout-page .saved-address-dropdown .dropdown-item:hover {
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-checkout-page .saved-address-dropdown .dropdown-item.active,
body.woo-redesign .woo-checkout-page .saved-address-dropdown .dropdown-item.active:hover {
    background: var(--woo-olive-100);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-checkout-page .saved-address-dropdown .dropdown-item i.tio-briefcase {
    color: var(--woo-olive-700);
}

/* ---- 19.4 address form fields (shipping + billing forms share the same
        markup: .form-group > label + .form-control/select/textarea) ---- */
body.woo-redesign .woo-checkout-page .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--woo-ink-900);
    margin-bottom: 6px;
    display: inline-block;
}
body.woo-redesign .woo-checkout-page .form-control {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
    font-family: inherit;
    font-size: 14px;
    padding: 11px 15px;
    color: var(--woo-ink-900);
    background-color: var(--woo-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-checkout-page .form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 3px var(--woo-olive-100);
    outline: none;
}
body.woo-redesign .woo-checkout-page textarea.form-control {
    min-height: 90px;
    resize: vertical;
}
body.woo-redesign .woo-checkout-page .bootstrap-select .dropdown-toggle.form-control,
body.woo-redesign .woo-checkout-page .bootstrap-select > .dropdown-toggle {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
    background-color: var(--woo-white);
    font-family: inherit;
    font-size: 14px;
    padding: 11px 15px;
}
body.woo-redesign .woo-checkout-page .bootstrap-select .dropdown-menu {
    border-radius: var(--woo-radius-md);
    border: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-md);
}

/* ---- 19.5 map location picker ---- */
body.woo-redesign .woo-checkout-page .location-map-canvas-area,
body.woo-redesign .woo-checkout-page .location-map-billing-canvas-area {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 10px;
    overflow: hidden;
}
body.woo-redesign .woo-checkout-page .location-map-canvas-area.map-area-alert-danger,
body.woo-redesign .woo-checkout-page .location-map-billing-canvas-area.map-area-alert-danger {
    border-color: #dc3545;
}
body.woo-redesign .woo-checkout-page #location_map_canvas,
body.woo-redesign .woo-checkout-page #location_map_canvas_billing {
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-checkout-page .location-search-input-field {
    border: 1px solid var(--woo-ink-100) !important;
    font-family: inherit;
    padding: 10px 14px;
}

/* ---- 19.6 checkboxes (save address / same-as-shipping / create account / terms) ---- */
body.woo-redesign .woo-checkout-page input[type="checkbox"] {
    accent-color: var(--woo-olive-600);
}
body.woo-redesign .woo-checkout-page .alert--info {
    background: var(--woo-olive-050);
    border-radius: var(--woo-radius-md);
    padding: 12px 16px;
    color: var(--woo-ink-700);
    font-size: 13px;
}

/* ---- 19.7 primary CTA buttons ---- */
body.woo-redesign .woo-checkout-page .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-checkout-page .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-checkout-page .btn-outline-primary {
    border-radius: var(--woo-radius-pill);
    border-color: var(--woo-ink-900);
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-checkout-page .btn-outline-primary:hover {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}

/* ---- 19.8 phone-verification card ---- */
body.woo-redesign .woo-checkout-page .phone-verification-card {
    max-width: 520px;
    margin: 0 auto;
}
body.woo-redesign .woo-checkout-page .phone-verification-card .czi-phone {
    font-size: 44px;
    color: var(--woo-olive-600);
}
body.woo-redesign .woo-checkout-page .phone-verification-card h4 {
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-checkout-page .phone-input-wrapper {
    margin-bottom: 20px;
    text-align: left;
}
body.woo-redesign .woo-checkout-page .otp-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}
body.woo-redesign .woo-checkout-page .otp-input-group input.otp-input {
    width: 50px;
    height: 55px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    border-radius: var(--woo-radius-sm);
    border: 2px solid var(--woo-ink-100);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-checkout-page .otp-input-group input.otp-input:focus {
    border-color: var(--woo-olive-500);
    outline: none;
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-checkout-page .resend-timer {
    font-size: 13px;
    color: var(--woo-ink-500);
}

/* ---- 19.9 payment method cards (COD / wallet / digital gateways / offline) ---- */
body.woo-redesign .woo-checkout-page .bg-light {
    background: var(--woo-ink-050) !important;
    border-radius: var(--woo-radius-md);
}
body.woo-redesign .woo-checkout-page .bg-primary-light {
    background: var(--woo-olive-050) !important;
    border-radius: var(--woo-radius-md);
}
body.woo-redesign .woo-checkout-page .p-20 .card.cursor-pointer {
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-checkout-page .p-20 .card.cursor-pointer:hover {
    border-color: var(--woo-olive-500);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-checkout-page .click-if-alone {
    border-radius: var(--woo-radius-md);
    padding: 14px 18px !important;
}
body.woo-redesign .woo-checkout-page .custom-radio {
    accent-color: var(--woo-olive-600);
    border-color: var(--woo-ink-300) !important;
}
body.woo-redesign .woo-checkout-page .digital_payment {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    background: var(--woo-white);
    padding: 4px 14px;
    transition: border-color .2s ease;
}
body.woo-redesign .woo-checkout-page #pay_offline {
    accent-color: var(--woo-olive-600);
}
body.woo-redesign .woo-checkout-page .offline_payment_button {
    border-radius: var(--woo-radius-pill);
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-checkout-page .offline_payment_button:hover {
    border-color: var(--woo-olive-500);
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-checkout-page .bring_change_amount_details {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-checkout-page a#bring_change_amount_btn {
    color: var(--woo-olive-700) !important;
}

/* ---- 19.10 payment modals (#selectPaymentMethod, #wallet_submit_button —
        page-unique ids, siblings outside .woo-checkout-page in the DOM) ---- */
body.woo-redesign #selectPaymentMethod .modal-content,
body.woo-redesign #wallet_submit_button .modal-content {
    border-radius: var(--woo-radius-lg);
    border: none;
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign #selectPaymentMethod .form-control,
body.woo-redesign #wallet_submit_button .form-control {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign #wallet_submit_button .modal-title {
    font-family: 'Fraunces', serif;
}
body.woo-redesign #selectPaymentMethod .btn--primary,
body.woo-redesign #wallet_submit_button .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
}

/* ---- 19.11 order-complete page ---- */
body.woo-redesign .woo-checkout-complete .card {
    border: none;
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-checkout-complete .fa-check-circle {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-checkout-complete h6.font-black {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-checkout-complete p.text-center {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-checkout-complete .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign .woo-checkout-complete .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-checkout-complete .row.mt-4 .col-12 a:not(.btn) {
    color: var(--woo-olive-700);
    font-weight: 600;
}
body.woo-redesign .woo-checkout-complete #guestAccountSection {
    background: var(--woo-ink-050);
    border-radius: var(--woo-radius-md);
    padding: 24px 16px;
}
body.woo-redesign .woo-checkout-complete #guestAccountSection h6 {
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-checkout-complete #guestAccountForm .form-control {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-checkout-complete #guestAccountForm .form-control.bg-light {
    background: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-checkout-complete .btn-outline-primary {
    border-radius: var(--woo-radius-pill);
    border-color: var(--woo-ink-900);
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-checkout-complete .btn-outline-primary:hover {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}

/* ---- 19.12 order summary sidebar on checkout pages (shared
        _order-summary.blade.php partial — same visual rules as the cart
        page's 18.9 block, duplicated here because the ancestor wrapper
        class differs per page) ---- */
body.woo-redesign .woo-checkout-page .order-summery-aside .__cart-total {
    background: var(--woo-white);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    border: 1px solid var(--woo-ink-100);
    padding: 20px;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .cart_total {
    background: transparent;
    padding: 0;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .cart_title {
    color: var(--woo-ink-500);
    font-weight: 500 !important;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .cart_value {
    color: var(--woo-ink-900);
    font-size: 15px;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .cart_title.text-primary {
    color: var(--woo-ink-900) !important;
    font-family: 'Fraunces', serif;
    font-size: 17px;
}
body.woo-redesign .woo-checkout-page .order-summery-aside h6.text-primary {
    background: var(--woo-olive-050);
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-md);
    padding: 10px 14px;
    font-size: 13px;
}
body.woo-redesign .woo-checkout-page .order-summery-aside hr {
    border-color: var(--woo-ink-100);
    opacity: 1;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .coupon-code-form .form-control {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-white) !important;
}
body.woo-redesign .woo-checkout-page .order-summery-aside #apply-coupon-code.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .pt-2 > .form-control.rounded-pill {
    background: var(--woo-olive-050) !important;
    border: 1px solid var(--woo-olive-300) !important;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .get-view-by-onclick:hover {
    background: var(--woo-ink-100);
    border-radius: 50%;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .light-box {
    background: var(--woo-olive-050) !important;
    border-radius: var(--woo-radius-md);
}
body.woo-redesign .woo-checkout-page .order-summery-aside .payment-input-checkbox {
    accent-color: var(--woo-olive-600);
}
body.woo-redesign .woo-checkout-page .order-summery-aside .proceed_to_next_button.action-checkout-function {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .proceed_to_next_button.action-checkout-function.disabled,
body.woo-redesign .woo-checkout-page .order-summery-aside .proceed_to_next_button.action-checkout-function.custom-disabled {
    opacity: .5;
    pointer-events: none;
}
body.woo-redesign .woo-checkout-page .order-summery-aside .proceed_to_next_button.action-checkout-function:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-checkout-page .order-summery-aside > .d-flex.justify-content-center a.text-primary {
    color: var(--woo-olive-700) !important;
    font-weight: 600;
}
body.woo-redesign .woo-checkout-page .bottom-sticky3 {
    background: var(--woo-white) !important;
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .woo-checkout-page .bottom-sticky3 .proceed_to_next_button {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-checkout-page .bottom-sticky3 .payment-input-checkbox {
    accent-color: var(--woo-olive-600);
}

/* ---- 19.13 responsive ---- */
@media (max-width: 767.98px) {
    body.woo-redesign .woo-checkout-page .checkout-steps-custom .step p {
        font-size: 11px !important;
    }
    body.woo-redesign .woo-checkout-page .otp-input-group input.otp-input {
        width: 44px;
        height: 48px;
        font-size: 18px;
    }
}

/* =====================================================================
   20) AUTH PAGES (phase 8) — resources/themes/default/web-views/
   customer-views/auth/{login,register,recover-password,reset-password,
   verify,verify-otp,_otp-login-verify,_otp-update-info}.blade.php +
   their shared partials/_email, _phone, _password, _remember-me,
   _recaptcha, _sign-up-instruction, _firebase-recaptcha-container.

   login.blade.php / signup.html mockup match; the OTP + recover/reset/
   verify steps have no mockup equivalent, so they reuse this same
   card-shell / input / button system to read as one cohesive flow.

   Every rule below targets EXISTING structural/functional classnames
   and ids only — no form action/method, field name attribute,
   route() call, or JS selector was touched. Verified against
   custom.js's `.password-toggle-btn` click handler, `.otp-login-btn`/
   `.manual-login-btn` step toggle (which also flips
   `.auth-login-type-input`'s value and the required attr on
   `.auth-email-input`/`.auth-password-input`/
   `.phone-input-with-country-picker`), the `#inputChecked`→`#sign-up`
   disabled toggle, `.customer-centralize-login-form` submit handler,
   and verify-otp.js's `.otp-field` auto-advance/paste handling +
   `.verifyCounter` resend-timer countdown + `.resend-otp-button`.
   The recaptcha/firebase containers (`.default-captcha-container`,
   `#login-default-captcha-section`, `.generate-firebase-auth-recaptcha`,
   `.render-grecaptcha-response`, `#recaptcha_element`) and the
   `.or-sign-in-with` absolutely-positioned/rotated divider (whose
   width is set at runtime by inline script in login.blade.php to
   equal `.or-sign-in-with-row`'s height) are only ever given spacing/
   color rules here — never position, width, or transform.

   Scoped under `.woo-auth-page`, added to the outer `.container` on
   every page/step listed above.
   ===================================================================== */

/* ---- 20.1 page shell + generic headings ---- */
body.woo-redesign .woo-auth-page {
    min-height: 55vh;
}
body.woo-redesign .woo-auth-page h2,
body.woo-redesign .woo-auth-page h5.font-black {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}

/* ---- 20.2 card shell (.login-card used by login/register,
        .card used by recover/reset/verify/otp steps) ---- */
body.woo-redesign .woo-auth-page .login-card,
body.woo-redesign .woo-auth-page .card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-auth-page .login-card {
    padding: 38px 36px;
}
body.woo-redesign .woo-auth-page .card .card-body {
    padding: 30px 28px;
}
body.woo-redesign .woo-auth-page .login-card img.w-70px {
    width: 64px;
    height: 64px;
    padding: 14px;
    background: var(--woo-olive-050);
    border-radius: 50%;
    object-fit: contain;
}
body.woo-redesign .woo-auth-page .card-body .text-center img {
    width: 56px;
    height: 56px;
    padding: 14px;
    background: var(--woo-olive-050);
    border-radius: 50%;
    object-fit: contain;
}
body.woo-redesign .woo-auth-page .fa-check-circle {
    color: var(--woo-olive-600) !important;
}

/* ---- 20.3 form fields (.form-group > .form-label + .form-control,
        shared by every partial listed above) ---- */
body.woo-redesign .woo-auth-page .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-auth-page .input-required-icon {
    color: var(--woo-olive-600);
}
body.woo-redesign .woo-auth-page .form-control {
    padding: 13px 18px;
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    font-family: inherit;
    font-size: 14px;
    background: var(--woo-white);
    color: var(--woo-ink-900);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-auth-page .form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
    outline: none;
}
body.woo-redesign .woo-auth-page .form-control.is-invalid {
    border-color: #d0484f;
}
body.woo-redesign .woo-auth-page .invalid-feedback,
body.woo-redesign .woo-auth-page .password-error {
    color: #d0484f;
    font-size: 12px;
}

/* ---- 20.4 password visibility toggle (.password-toggle wraps the
        input + the .password-toggle-btn label/checkbox/icon) ---- */
body.woo-redesign .woo-auth-page .password-toggle {
    position: relative;
}
body.woo-redesign .woo-auth-page .password-toggle .form-control {
    padding-right: 46px;
}
body.woo-redesign .woo-auth-page .password-toggle-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}
body.woo-redesign .woo-auth-page .password-toggle-btn:hover {
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-auth-page .password-toggle-btn input.custom-control-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
body.woo-redesign .woo-auth-page .password-toggle-indicator {
    font-size: 16px;
    color: var(--woo-ink-500);
}

/* ---- 20.5 checkboxes (remember-me / terms) ---- */
body.woo-redesign .woo-auth-page .custom-control-input {
    accent-color: var(--woo-olive-600);
}
body.woo-redesign .woo-auth-page .custom-control-label {
    font-size: 13px;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-auth-page .text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-auth-page .custom-control-label.text-primary {
    color: var(--woo-ink-700) !important;
    font-weight: 500;
}

/* ---- 20.6 OTP entry (verify / verify-otp / _otp-login-verify) ---- */
body.woo-redesign .woo-auth-page .forget-password-otp {
    gap: 10px !important;
}
body.woo-redesign .woo-auth-page .otp-field {
    width: 48px;
    height: 54px;
    padding: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
    color: var(--woo-ink-900);
    background: var(--woo-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-auth-page .otp-field:focus {
    outline: none;
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-auth-page .resend_otp_custom p {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-auth-page .verifyTimer,
body.woo-redesign .woo-auth-page .verifyCounter {
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-auth-page .resend-otp-button {
    color: var(--woo-olive-700);
    font-weight: 600;
}
body.woo-redesign .woo-auth-page .resend-otp-button:hover {
    color: var(--woo-olive-600);
}
body.woo-redesign .woo-auth-page .resend-otp-button:disabled {
    opacity: .5;
}

/* ---- 20.7 primary buttons ---- */
body.woo-redesign .woo-auth-page .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    padding-top: 13px;
    padding-bottom: 13px;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-auth-page .btn--primary:hover:not(:disabled) {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-auth-page .btn--primary:disabled {
    opacity: .5;
}

/* ---- 20.8 social / OTP-vs-manual login switch buttons ---- */
body.woo-redesign .woo-auth-page .social-media-login-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    background: var(--woo-white);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--woo-ink-900);
    transition: border-color .2s ease, background .2s ease;
}
body.woo-redesign .woo-auth-page .social-media-login-btn:hover {
    border-color: var(--woo-olive-500);
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-auth-page .social-media-login-btn img {
    width: 20px;
    height: 20px;
}
body.woo-redesign .woo-auth-page .or-sign-in-with {
    color: var(--woo-ink-500) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
body.woo-redesign .woo-auth-page .or-sign-in-with::before,
body.woo-redesign .woo-auth-page .or-sign-in-with::after {
    background: var(--woo-ink-100);
}

/* ---- 20.9 recaptcha / firebase container spacing only (ids/classes
        consumed by google-recaptcha-init.js / firebase are untouched) ---- */
body.woo-redesign .woo-auth-page .dynamic-default-and-recaptcha-section,
body.woo-redesign .woo-auth-page .default-captcha-container,
body.woo-redesign .woo-auth-page .generate-firebase-auth-recaptcha {
    margin: 14px 0;
}

/* ---- 20.10 misc links ---- */
body.woo-redesign .woo-auth-page a.text-primary:hover {
    color: var(--woo-olive-600) !important;
}

/* ---- 20.11 responsive ---- */
@media (max-width: 575.98px) {
    body.woo-redesign .woo-auth-page .login-card {
        padding: 26px 20px;
    }
    body.woo-redesign .woo-auth-page .card .card-body {
        padding: 22px 18px;
    }
    body.woo-redesign .woo-auth-page .otp-field {
        width: 40px;
        height: 46px;
        font-size: 16px;
    }
}

/* =====================================================================
   21) ACCOUNT / PROFILE SIDEBAR (shared across all users-profile/* pages)
   ===================================================================== */
body.woo-redesign .woo-profile-aside {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    padding: 18px;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-profile-aside .widget-title {
    margin-bottom: 2px;
}
body.woo-redesign .woo-profile-aside .widget-title > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--woo-radius-md);
    color: var(--woo-ink-700);
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-profile-aside .widget-title > a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--woo-ink-500);
    transition: color .2s ease;
}
body.woo-redesign .woo-profile-aside .widget-title > a:hover {
    background: var(--woo-olive-050);
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-profile-aside .widget-title > a:hover svg {
    color: var(--woo-olive-600);
}
body.woo-redesign .woo-profile-aside .widget-title > a.active-menu {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    font-weight: 600;
}
body.woo-redesign .woo-profile-aside .widget-title > a.active-menu svg {
    color: var(--woo-olive-500);
}
body.woo-redesign .woo-profile-aside .aside-link {
    font-family: inherit;
}
body.woo-redesign .woo-profile-aside .customer-account-delete-by-route {
    color: #d0484f;
}
body.woo-redesign .woo-profile-aside .customer-account-delete-by-route:hover {
    background: #fdf0f0;
    color: #d0484f;
}
body.woo-redesign .woo-profile-aside .profile-aside-close-btn {
    color: var(--woo-ink-500);
}
@media (max-width: 991px) {
    body.woo-redesign .woo-profile-aside {
        border-radius: 0;
    }
}

/* =====================================================================
   22) ACCOUNT PAGES (phase 9) — orders / wishlist / coupons / refer&earn /
       restock-requests / refund request+details / review submission forms.
       Shared wrapper class `.woo-account-page` is added to the outer
       `.container` of each page (see users-profile/*.blade.php). All
       real Blade loops, route()/form actions, CSRF and JS hook classes
       (click-to-copy-coupon, click-to-copy-data-value, call-route-alert,
       get-order-again-function, spartanMultiImagePicker `.coba`, etc.)
       are left completely untouched — only visual retinting.
   ===================================================================== */

/* ---- 22.1 shared card / heading / button language ---- */
body.woo-redesign .woo-account-page {
    font-family: 'Poppins', sans-serif;
}
body.woo-redesign .woo-account-page .card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-account-page .card-header {
    background: var(--woo-white);
    border-bottom: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) var(--woo-radius-lg) 0 0 !important;
    padding: 18px 22px;
}
body.woo-redesign .woo-account-page .card-header h5.__ml-20 {
    margin-left: 0 !important;
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .card-body {
    padding: 22px;
}
body.woo-redesign .woo-account-page h5.font-bold,
body.woo-redesign .woo-account-page h5.font-semi-bold {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page h5.font-bold span,
body.woo-redesign .woo-account-page h5.font-semi-bold span {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .profile-aside-btn {
    background: var(--woo-ink-900) !important;
    border: none !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .woo-account-page .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-account-page .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .btn-secondary {
    background: var(--woo-white);
    border: 1.5px solid var(--woo-ink-900);
    color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .btn-secondary:hover {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-account-page .btn-soft-danger {
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    background: #fdecea;
}
body.woo-redesign .woo-account-page .btn-soft-danger:hover {
    background: #f8d3d0;
}

/* ---- 22.2 status badges (order status pills) ---- */
body.woo-redesign .woo-account-page .status-badge {
    font-weight: 600;
    letter-spacing: .02em;
    padding: 5px 14px;
}
body.woo-redesign .woo-account-page .status-badge.badge-soft-success {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-account-page .status-badge.badge-soft-danger {
    background: #fdecea !important;
    color: #c62828 !important;
}
body.woo-redesign .woo-account-page .status-badge.badge-soft-primary {
    background: var(--woo-ink-050) !important;
    color: var(--woo-ink-700) !important;
}
body.woo-redesign .woo-account-page .edit-text {
    color: var(--woo-olive-700) !important;
}

/* ---- 22.3 sort/filter box (order history "sort by") ---- */
body.woo-redesign .woo-account-page .border.rounded.py-1.px-3 {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-ink-050);
    padding: 8px 16px !important;
}
body.woo-redesign .woo-account-page #orderFilter {
    font-weight: 600;
    color: var(--woo-ink-700);
    cursor: pointer;
}

/* ---- 22.4 pagination (bootstrap default, used by orders/wishlist/coupons/restock) ---- */
body.woo-redesign .woo-account-page .pagination {
    gap: 6px;
    flex-wrap: wrap;
}
body.woo-redesign .woo-account-page .page-item .page-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50% !important;
    border-color: var(--woo-ink-100);
    color: var(--woo-ink-700);
    font-size: 13px;
    font-weight: 600;
}
body.woo-redesign .woo-account-page .page-item.active .page-link {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-account-page .page-item.disabled .page-link {
    color: var(--woo-ink-300);
    background: transparent;
}
body.woo-redesign .woo-account-page .page-link:hover {
    background: var(--woo-olive-100);
    border-color: var(--woo-olive-300);
    color: var(--woo-ink-900);
}

/* ---- 22.5 empty states (orders / wishlist / coupons / restock) ---- */
body.woo-redesign .woo-account-page .login-card.w-100.border-0.shadow-none {
    padding: 30px 10px;
}
body.woo-redesign .woo-account-page .text-center.py-5 img,
body.woo-redesign .woo-account-page .text-center.py-3 img {
    opacity: .8;
}
body.woo-redesign .woo-account-page h5.text-muted,
body.woo-redesign .woo-account-page .text-center h5.fs-14 {
    font-family: 'Poppins', sans-serif;
    color: var(--woo-ink-500) !important;
    font-weight: 500;
}

/* ---- 22.6 order history: order card ---- */
body.woo-redesign .woo-account-page .cus-shadow {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
    background: var(--woo-white);
    box-shadow: var(--woo-shadow-sm);
    transition: box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-account-page .cus-shadow:hover {
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300) !important;
}
body.woo-redesign .woo-account-page .media-order .w-70px.border.rounded {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    overflow: hidden;
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-account-page .media-order .cont a.fs-14.font-semibold {
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .media-order .cont a.fs-14.font-semibold:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-account-page .media-order .web-text-primary.fs-16.font-bold {
    color: var(--woo-olive-700) !important;
    font-family: 'Fraunces', serif;
    font-size: 18px !important;
}
body.woo-redesign .woo-account-page .myorder-dropdown .dropdown-menu {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    box-shadow: var(--woo-shadow-md);
    padding: 6px;
}
body.woo-redesign .woo-account-page .myorder-dropdown .dropdown-item {
    border-radius: var(--woo-radius-sm);
    padding: 9px 10px;
    font-weight: 500;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-account-page .myorder-dropdown .dropdown-item:hover {
    background: var(--woo-olive-050);
    color: var(--woo-olive-700);
}
/* order-placed success modal (sibling of .woo-account-page, same page) */
body.woo-redesign #order_successfully .modal-content {
    border-radius: var(--woo-radius-lg);
    border: none;
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign #order_successfully .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign #order_successfully .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}

/* ---- 22.7 wishlist + restock-requests: shared `.wishlist-item` row card
        (rendered by partials/_wish-list-data.blade.php, included only from
        account-wishlist.blade.php; account-restock-requests.blade.php uses
        the same markup pattern inline). Base layout/spacing stays as-is
        (style.css) — only retint colors/radius/shadow. ---- */
body.woo-redesign .woo-account-page .wishlist-item {
    border-color: var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    transition: box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-account-page .wishlist-item:hover {
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-account-page .wishlist-item.restock-request-item {
    background: var(--woo-olive-050) !important;
}
body.woo-redesign .woo-account-page .wishlist-img img {
    border-radius: var(--woo-radius-md);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-account-page .wishlist-img .for-discount-value {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border-radius: var(--woo-radius-sm);
    padding: 2px 6px;
}
body.woo-redesign .woo-account-page .wishlist-text .font-name a {
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .wishlist-text .font-name a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-account-page .wishlist-text .sellerName {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .wishlist-text .sellerName .text-dark,
body.woo-redesign .woo-account-page .wishlist-text .sellerName .shop-name {
    color: var(--woo-ink-700) !important;
}
body.woo-redesign .woo-account-page .wishlist-text .amount .flash-product-price,
body.woo-redesign .woo-account-page .wishlist-text .amount .discounted-unit-price,
body.woo-redesign .woo-account-page .wishlist-text .amount .product-total-unit-price:not(del) {
    color: var(--woo-olive-700) !important;
    font-weight: 700;
    font-family: 'Fraunces', serif;
    font-size: 15px;
}
body.woo-redesign .woo-account-page .wishlist-text .amount del {
    color: var(--woo-ink-300) !important;
    font-weight: 400;
}
body.woo-redesign .woo-account-page .wishlist-item .star-rating i.text-warning {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-account-page .remove--icon,
body.woo-redesign .woo-account-page .close-stock-req {
    background: var(--woo-ink-050);
    transition: background .2s ease;
}
body.woo-redesign .woo-account-page .remove--icon:hover,
body.woo-redesign .woo-account-page .close-stock-req:hover {
    background: #fdecea;
}
body.woo-redesign .woo-account-page .remove--icon i {
    color: #e0555c;
}

/* ---- 22.8 coupons: ticket-style card (base layout from style.css .ticket-*) ---- */
body.woo-redesign .woo-account-page .ticket-box {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-account-page .ticket-box:hover {
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-account-page .ticket-start {
    background: linear-gradient(135deg, var(--woo-olive-050), var(--woo-white));
}
body.woo-redesign .woo-account-page .ticket-amount {
    color: var(--woo-olive-700);
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-account-page .ticket-start p {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .ticket-start .shop-name {
    color: var(--woo-olive-700);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .ticket-border {
    border-inline-start-color: var(--woo-ink-100);
    border-inline-start-style: dashed;
}
body.woo-redesign .woo-account-page .ticket-border::after,
body.woo-redesign .woo-account-page .ticket-border::before {
    background-color: var(--woo-cream);
}
body.woo-redesign .woo-account-page .ticket-welcome-btn {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    outline: none !important;
    border-radius: var(--woo-radius-pill);
    font-weight: 700;
    letter-spacing: .03em;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-account-page .ticket-welcome-btn:hover {
    background: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .ticket-end h6 {
    color: var(--woo-ink-700);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .ticket-end p {
    color: var(--woo-ink-500);
}

/* ---- 22.9 refer & earn ---- */
body.woo-redesign .woo-account-page .refer_and_earn_section .banner-img img {
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .woo-account-page .primary-heading {
    color: var(--woo-ink-900) !important;
    font-family: 'Fraunces', serif;
    font-size: 22px !important;
}
body.woo-redesign .woo-account-page .secondary-heading {
    color: var(--woo-ink-500) !important;
    font-weight: 500 !important;
}
body.woo-redesign .woo-account-page .text-secondary-color {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .woo-account-page .refer_code_box {
    border-color: var(--woo-olive-300) !important;
    background: var(--woo-olive-050);
    height: auto;
    padding: 12px 20px !important;
}
body.woo-redesign .woo-account-page .refer_code_box .refer_code {
    color: var(--woo-ink-900);
    font-family: 'Fraunces', serif;
    letter-spacing: .04em;
}
body.woo-redesign .woo-account-page .refer_code_box .refer_code_copy i.text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-account-page .share-icons-heading {
    color: var(--woo-ink-500);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .08em;
}
body.woo-redesign .woo-account-page .share-on-social span,
body.woo-redesign .woo-account-page .share-on-social a {
    transition: transform .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-account-page .share-on-social span:hover,
body.woo-redesign .woo-account-page .share-on-social a:hover {
    transform: translateY(-3px);
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-account-page .information-section {
    background-color: var(--woo-ink-050);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-account-page .information-section h4 {
    color: var(--woo-ink-900);
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-account-page .information-section .custom-info-icon {
    border-color: var(--woo-olive-500);
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-account-page .information-section li {
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-account-page .information-section li .item-custom-index {
    color: var(--woo-olive-700);
    font-weight: 700;
}

/* ---- 22.10 refund request form ---- */
body.woo-redesign .woo-account-page .headerTitle {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .box-shadow-sm {
    box-shadow: var(--woo-shadow-sm) !important;
    border-radius: var(--woo-radius-lg) !important;
}
body.woo-redesign .woo-account-page .box-shadow-sm .card {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid var(--woo-ink-100);
    border-radius: 0;
}
body.woo-redesign .woo-account-page .input-label {
    font-weight: 600;
    color: var(--woo-ink-700);
    font-size: 13.5px;
    margin-bottom: 6px;
    display: inline-block;
}
body.woo-redesign .woo-account-page .form-control {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 10px 14px;
    font-size: 13.5px;
}
body.woo-redesign .woo-account-page .form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-account-page select.form-control[name="rating"] {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23726d5f'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 38px;
    cursor: pointer;
}

/* ---- 22.11 refund/review forms: modal-footer action row ---- */
body.woo-redesign .woo-account-page .modal-footer {
    border-top: 1px solid var(--woo-ink-100);
    padding-top: 18px;
    margin-top: 6px;
    background: transparent;
}

/* ---- 22.12 refund details fragment — self-scoped (this markup is loaded
        both as a full-page render AND injected via ajax into a modal owned
        by account-order-details.blade.php, so it does NOT rely on a
        `.woo-account-page` ancestor). ---- */
body.woo-redesign .woo-refund-details-frag {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: 'Poppins', sans-serif;
}
body.woo-redesign .woo-refund-details-frag .border.rounded.bg-white {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-refund-details-frag h6 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-refund-details-frag .price-discount {
    background: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign .woo-refund-details-frag .text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-refund-details-frag .__color-coral {
    color: #d98a3d;
    font-weight: 700;
}
body.woo-redesign .woo-refund-details-frag .__color-1573ff {
    color: #1565c0;
    font-weight: 700;
}
body.woo-redesign .woo-refund-details-frag .__color-01ff2cfa {
    color: var(--woo-olive-700);
    font-weight: 700;
}
body.woo-redesign .woo-refund-details-frag .__color-ff2a05fa {
    color: #c62828;
    font-weight: 700;
}
body.woo-redesign .woo-refund-details-frag img.border.rounded.border-primary-light {
    border-radius: var(--woo-radius-md) !important;
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-refund-details-frag .woo-refund-empty .btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    padding: 8px 24px;
    font-weight: 600;
}
body.woo-redesign .woo-refund-details-frag .woo-refund-empty .btn--primary:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}

/* ---- 22.13 responsive ---- */
@media (max-width: 575.98px) {
    body.woo-redesign .woo-account-page .ticket-box {
        flex-direction: column;
    }
    body.woo-redesign .woo-account-page .ticket-border {
        border-inline-start: none;
        border-top: 1.5px dashed var(--woo-ink-100);
    }
}

/* =====================================================================
   22) WALLET PAGE (web-views/users-profile/user-wallet.blade.php).
       Real balance figure ($totalWalletBalance), a real add-fund-bonus
       carousel loop ($addFundBonusList), a real payment-gateway loop
       ($paymentGatewayList) inside the #addFundToWallet modal, a real
       transaction loop ($walletTransactionList) with filter dropdown
       (GET form to route('wallet')) and Laravel pagination. Every rule
       below targets EXISTING structural classnames only — nothing in
       user-wallet.js (#transactionFilterBtn, #filterCloseBtn,
       #dateRangeInput, .transaction_filter_by, .earn-checkbox,
       .add-fund-carousel) was touched, and no loop/route/id was
       removed. Scoped under .woo-account-page .woo-wallet-page, both
       added purely as classnames on the existing container/section.
       The #addFundToWallet modal is a DOM descendant of the section so
       it is reachable under the same scope; nothing on this page lives
       outside .woo-account-page.
   ===================================================================== */

/* ---- 22.1 page shell / heading ---- */
body.woo-redesign .woo-account-page.woo-account-page,
body.woo-redesign .woo-account-page .woo-wallet-page,
body.woo-redesign .woo-account-page .woo-loyalty-page {
    background: transparent;
}
body.woo-redesign .woo-wallet-page > .card,
body.woo-redesign .woo-loyalty-page > .card,
body.woo-redesign .woo-loyalty-page .loyalty-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm) !important;
}
body.woo-redesign .woo-wallet-page h5.font-bold,
body.woo-redesign .woo-loyalty-page h5.font-bold {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900);
}

/* ---- 22.2 balance card (shared .card.btn--primary balance banner,
        reused as-is on the loyalty points card below) ---- */
body.woo-redesign .woo-wallet-page .card.btn--primary,
body.woo-redesign .woo-loyalty-page .card.btn--primary {
    background: linear-gradient(135deg, var(--woo-ink-900) 0%, var(--woo-olive-700) 130%) !important;
    border: none !important;
    border-radius: var(--woo-radius-lg) !important;
    overflow: hidden;
}
body.woo-redesign .woo-wallet-page .card.btn--primary .wallet-card-bg,
body.woo-redesign .woo-loyalty-page .card.btn--primary .wallet-card-bg {
    opacity: .16;
}
body.woo-redesign .woo-wallet-page .card.btn--primary h2,
body.woo-redesign .woo-loyalty-page .card.btn--primary h3 {
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-wallet-page .card.btn--primary .btn-light {
    background: var(--woo-cream);
    border: none;
    border-radius: var(--woo-radius-pill);
    transition: background .2s ease, transform .2s ease;
}
body.woo-redesign .woo-wallet-page .card.btn--primary .btn-light:hover {
    background: var(--woo-olive-100);
}
body.woo-redesign .woo-wallet-page .card.btn--primary .btn-light .text-primary {
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-wallet-page .card.btn--primary .btn-light .text-accent {
    color: var(--woo-olive-700) !important;
}

/* ---- 22.3 add-fund bonus carousel ($addFundBonusList loop) ---- */
body.woo-redesign .woo-wallet-page .add-fund-carousel-card {
    background: var(--woo-olive-050);
    border-color: var(--woo-olive-300) !important;
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .woo-wallet-page .add-fund-carousel-card .text-accent {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-wallet-page .add-fund-carousel-card .text-dark {
    color: var(--woo-ink-700) !important;
}
body.woo-redesign .woo-wallet-page .add-fund-carousel.owl-theme .owl-dots .owl-dot span {
    background: var(--woo-ink-100);
}
body.woo-redesign .woo-wallet-page .add-fund-carousel.owl-theme .owl-dots .owl-dot.active span,
body.woo-redesign .woo-wallet-page .add-fund-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--woo-olive-600);
}

/* ---- 22.4 #addFundToWallet modal (route('customer.add-fund-request')
        form, $paymentGatewayList loop) ---- */
body.woo-redesign .woo-wallet-page #addFundToWallet .modal-content {
    border: none;
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .woo-wallet-page #addFundToWallet h4 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-wallet-page #add-fund-amount-input {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-wallet-page #add-fund-amount-input:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-wallet-page .gateways_list .form--check .form-check-label {
    border: 1px solid var(--woo-ink-100);
    background: var(--woo-white);
    margin-bottom: 8px;
    transition: border-color .2s ease, background .2s ease;
}
body.woo-redesign .woo-wallet-page .gateways_list .form--check:hover .form-check-label {
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-wallet-page .gateways_list .form--check .form-check-input:checked ~ .form-check-label {
    border-color: var(--woo-olive-600);
    background: var(--woo-olive-050) !important;
}
body.woo-redesign .woo-wallet-page .gateways_list .check-icon {
    border-color: var(--woo-ink-300);
}
body.woo-redesign .woo-wallet-page .gateways_list .check-icon circle {
    fill: var(--woo-olive-600);
}
body.woo-redesign .woo-wallet-page #add_fund_to_wallet_form_btn.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease;
}
body.woo-redesign .woo-wallet-page #add_fund_to_wallet_form_btn.btn--primary:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}

/* ---- 22.5 transaction filter dropdown (shared markup/JS on both
        the wallet and loyalty pages: #transactionFilterBtn,
        #filterCloseBtn, .transaction_filter_by, .earn-checkbox,
        #dateRangeInput) ---- */
body.woo-redesign .woo-wallet-page .transaction-filter_dropdown,
body.woo-redesign .woo-loyalty-page .transaction-filter_dropdown {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-md) !important;
    overflow: hidden;
}
body.woo-redesign .woo-wallet-page #transactionFilterBtn,
body.woo-redesign .woo-loyalty-page #transactionFilterBtn {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    color: var(--woo-ink-700) !important;
    background: var(--woo-white);
}
body.woo-redesign .woo-wallet-page #transactionFilterBtn:hover,
body.woo-redesign .woo-loyalty-page #transactionFilterBtn:hover {
    border-color: var(--woo-olive-500) !important;
}
body.woo-redesign .woo-wallet-page #transactionFilterBtn .fa-filter,
body.woo-redesign .woo-loyalty-page #transactionFilterBtn .fa-filter {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-wallet-page .transaction_filter_by label,
body.woo-redesign .woo-loyalty-page .transaction_filter_by label {
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-wallet-page .transaction_filter_by label.btn-outline-primary,
body.woo-redesign .woo-loyalty-page .transaction_filter_by label.btn-outline-primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
}
body.woo-redesign .woo-wallet-page .transaction_filter_by label.btn-outline-secondary,
body.woo-redesign .woo-loyalty-page .transaction_filter_by label.btn-outline-secondary {
    border-color: var(--woo-ink-100) !important;
    color: var(--woo-ink-700) !important;
}
body.woo-redesign .woo-wallet-page .earn-checkbox,
body.woo-redesign .woo-loyalty-page .earn-checkbox {
    accent-color: var(--woo-olive-600);
}
body.woo-redesign .woo-wallet-page #dateRangeInput,
body.woo-redesign .woo-loyalty-page #dateRangeInput {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .woo-wallet-page #dateRangeInput:focus,
body.woo-redesign .woo-loyalty-page #dateRangeInput:focus {
    border-color: var(--woo-olive-500) !important;
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-wallet-page .transaction-filter_dropdown .btn-outline-secondary,
body.woo-redesign .woo-loyalty-page .transaction-filter_dropdown .btn-outline-secondary {
    border-radius: var(--woo-radius-pill) !important;
    color: var(--woo-ink-700);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-wallet-page .transaction-filter_dropdown .btn--primary,
body.woo-redesign .woo-loyalty-page .transaction-filter_dropdown .btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-wallet-page .transaction-filter_dropdown .count,
body.woo-redesign .woo-loyalty-page .transaction-filter_dropdown .count {
    background: #d0484f !important;
}

/* ---- 22.6 transaction / points history rows ($walletTransactionList,
        $loyaltyPointList loops — mirrors the cart-page line-item row
        vocabulary from section 18) ---- */
body.woo-redesign .woo-wallet-page .bg-light,
body.woo-redesign .woo-loyalty-page .bg--light {
    background: var(--woo-ink-050) !important;
    border-radius: var(--woo-radius-md) !important;
    border: 1px solid transparent;
    transition: border-color .2s ease;
}
body.woo-redesign .woo-wallet-page .bg-light:hover,
body.woo-redesign .woo-loyalty-page .bg--light:hover {
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-wallet-page .bg-light .text-info,
body.woo-redesign .woo-loyalty-page .bg--light .text-info,
body.woo-redesign .woo-loyalty-page .bg--light .text-success {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-wallet-page .bg-light .text-danger,
body.woo-redesign .woo-loyalty-page .bg--light .text-danger {
    color: #d0484f !important;
}
body.woo-redesign .woo-wallet-page .bg-light h6.text-muted,
body.woo-redesign .woo-loyalty-page .bg--light h6.text-muted,
body.woo-redesign .woo-wallet-page .bg-light div.text-muted,
body.woo-redesign .woo-loyalty-page .bg--light div.text-muted {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .woo-wallet-page .bg-light .fs-18,
body.woo-redesign .woo-loyalty-page .bg--light .fs-18 {
    color: var(--woo-ink-900);
}

/* ---- 22.7 empty state ---- */
body.woo-redesign .woo-wallet-page h6.text-muted.mt-3,
body.woo-redesign .woo-loyalty-page h6.text-muted.mt-3 {
    color: var(--woo-ink-500);
    font-weight: 500;
}

/* ---- 22.8 pagination footer (Paginator::useBootstrap markup) ---- */
body.woo-redesign .woo-wallet-page .card-footer .pagination,
body.woo-redesign .woo-loyalty-page .card-footer .pagination {
    gap: 6px;
    flex-wrap: wrap;
}
body.woo-redesign .woo-wallet-page .card-footer .page-item .page-link,
body.woo-redesign .woo-loyalty-page .card-footer .page-item .page-link {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50% !important;
    border-color: var(--woo-ink-100);
    color: var(--woo-ink-700);
    font-size: 13px;
    font-weight: 600;
}
body.woo-redesign .woo-wallet-page .card-footer .page-item.active .page-link,
body.woo-redesign .woo-loyalty-page .card-footer .page-item.active .page-link {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-wallet-page .card-footer .page-item.disabled .page-link,
body.woo-redesign .woo-loyalty-page .card-footer .page-item.disabled .page-link {
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-wallet-page .card-footer .page-link:hover,
body.woo-redesign .woo-loyalty-page .card-footer .page-link:hover {
    background: var(--woo-olive-100);
    border-color: var(--woo-olive-300);
    color: var(--woo-ink-900);
}

/* =====================================================================
   23) LOYALTY POINTS PAGE (web-views/users-profile/user-loyalty.blade.php).
       Real points balance ($totalLoyaltyPoint), real conversion config
       ($loyaltyPointMinimumPoint / $loyaltyPointExchangeRate via
       loyaltyPointToLocalCurrency()), a real points-history loop
       ($loyaltyPointList) sharing the filter/pagination markup styled
       in section 22.5/22.8 above, and a real convert-to-currency modal
       posting to route('loyalty-exchange-currency'). The modal and the
       mobile sticky CTA bar sit OUTSIDE the .woo-account-page wrapper
       in the DOM (siblings after the closing container div), so they
       are styled here as page-global selectors, same technique used
       for #selectPaymentMethod / #wallet_submit_button in section 19.10.
   ===================================================================== */

/* ---- 23.1 "how to use" info box + hover popover ---- */
body.woo-redesign .woo-loyalty-page .my-wallet-card-content {
    background: var(--woo-olive-050);
    color: var(--woo-ink-700);
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .woo-loyalty-page .my-wallet-card-content .subtitle {
    color: var(--woo-olive-700);
}
body.woo-redesign .how-to-use-hover-ele {
    background: var(--woo-olive-050);
    border-radius: var(--woo-radius-md);
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .how-to-use-hover-ele .subtitle {
    color: var(--woo-olive-700);
}

/* ---- 23.2 convert-to-currency triggers (button appears 3x in the
        markup: desktop info box, mobile inline, mobile sticky bar —
        all share .btn--primary + .alert-insufficient-loyalty-point,
        JS-bound in user-loyalty.js, left untouched) ---- */
body.woo-redesign .woo-loyalty-page .btn--primary,
body.woo-redesign .bottom-sticky4 .btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease;
}
body.woo-redesign .woo-loyalty-page .btn--primary:hover,
body.woo-redesign .bottom-sticky4 .btn--primary:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-loyalty-page .btn--primary.alert-insufficient-loyalty-point,
body.woo-redesign .bottom-sticky4 .btn--primary.alert-insufficient-loyalty-point {
    opacity: .55;
}

/* ---- 23.3 mobile sticky CTA bar ---- */
body.woo-redesign .bottom-sticky4 {
    background: var(--woo-white) !important;
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}

/* ---- 23.4 #convertToCurrency modal (route('loyalty-exchange-currency')) ---- */
body.woo-redesign #convertToCurrency .modal-content {
    border: none;
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign #convertToCurrency .modal-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign #convertToCurrency .form-control {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
}
body.woo-redesign #convertToCurrency .form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign #convertToCurrency .text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign #convertToCurrency .my-wallet-card-content {
    background: var(--woo-olive-050);
}
body.woo-redesign #convertToCurrency .my-wallet-card-content .subtitle {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign #convertToCurrency button[type="submit"].btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign #convertToCurrency button[type="submit"].btn--primary:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}

/* =====================================================================
   22) ACCOUNT DASHBOARD / ADDRESS BOOK / ADDRESS EDIT
   Scoped under `.woo-account-page`, added to the outer content wrapper
   on user-account.blade.php, account-address.blade.php and
   account-address-edit.blade.php (all under users-profile/*). Mirrors
   the dashboard-card visual language from the account.html mockup
   (white card, --woo-radius-lg, --woo-shadow-sm, Fraunces headings)
   and the rounded/olive-focus input language from the auth pages
   (section 20) and checkout forms (section 19).
   ===================================================================== */

/* ---- 22.1 shared card shell + headings ---- */
body.woo-redesign .woo-account-page .card {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-account-page .woo-account-heading {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900);
    font-size: 18px;
}

/* ---- 22.2 user-account.blade.php: profile-info card + edit form ---- */
body.woo-redesign .woo-account-page .profile-img img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--woo-olive-100);
}
body.woo-redesign .woo-account-page .profile-img .change-profile-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--woo-ink-900);
    border-radius: 50%;
    border: 2px solid var(--woo-white);
    cursor: pointer;
    transition: background .2s ease;
}
body.woo-redesign .woo-account-page .profile-img .change-profile-icon:hover {
    background: var(--woo-olive-600);
}
body.woo-redesign .woo-account-page .profile--info h5 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-account-page .form-control,
body.woo-redesign .woo-account-page .iti input,
body.woo-redesign .woo-account-page input.phone-input-with-country-picker {
    padding: 13px 18px;
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    font-family: inherit;
    font-size: 14px;
    background: var(--woo-white);
    color: var(--woo-ink-900);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-account-page .form-control:focus,
body.woo-redesign .woo-account-page input.phone-input-with-country-picker:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
    outline: none;
}
body.woo-redesign .woo-account-page .form-control:disabled {
    background: var(--woo-ink-050);
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .password-toggle .form-control {
    padding-right: 46px;
}
body.woo-redesign .woo-account-page .password-toggle-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
body.woo-redesign .woo-account-page .password-toggle-btn:hover {
    background: var(--woo-ink-050);
}
body.woo-redesign .woo-account-page .password-toggle-indicator {
    font-size: 16px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .password-error {
    color: #d0484f;
    font-size: 12px;
}
body.woo-redesign .woo-account-page .btn--primary {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border: none;
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-account-page .btn--primary:hover {
    background: var(--woo-olive-600);
    color: var(--woo-ink-900);
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-account-page .delete-account-dropdown-menu {
    border-radius: var(--woo-radius-md);
    border: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-account-page .delete-account-dropdown-menu .dropdown-item.call-route-alert {
    color: #c0392b;
    font-size: 13.5px;
}
body.woo-redesign .woo-account-page .delete-account-dropdown-menu .dropdown-item.call-route-alert:hover {
    background: #fdf0f0;
}
body.woo-redesign .woo-account-page .bottom-sticky_ele {
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: 0 -6px 20px rgba(38, 36, 32, .08);
}
body.woo-redesign .woo-account-page .bottom-sticky_ele .btn--primary {
    border-radius: var(--woo-radius-pill);
}

/* ---- 22.3 account-address.blade.php: address card list ---- */
body.woo-redesign .woo-account-page section > .card.card-body.border-0 {
    padding: 28px;
}
body.woo-redesign .woo-account-page #add_new_address {
    border-radius: var(--woo-radius-pill);
}
body.woo-redesign .woo-account-page .card.__shadow {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
body.woo-redesign .woo-account-page .card.__shadow:hover {
    box-shadow: var(--woo-shadow-md);
    transform: translateY(-2px);
}
body.woo-redesign .woo-account-page .card.__shadow .card-header.bg-aliceblue {
    background: var(--woo-olive-050) !important;
    border-bottom: 1px solid var(--woo-ink-100) !important;
}
body.woo-redesign .woo-account-page .card.__shadow .card-header h6 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
    text-transform: capitalize;
}
body.woo-redesign .woo-account-page .card.__shadow .card-header .text-primary {
    color: var(--woo-ink-700) !important;
    transition: color .2s ease;
}
body.woo-redesign .woo-account-page .card.__shadow .card-header a[title="Edit Address"]:hover {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-account-page .card.__shadow .card-header .remove-address-by-modal {
    color: #c0392b !important;
    transition: color .2s ease;
}
body.woo-redesign .woo-account-page .card.__shadow .card-header .remove-address-by-modal:hover {
    color: #a53226 !important;
}
body.woo-redesign .woo-account-page .card.__shadow .card-body {
    font-size: 13.5px;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-account-page .card.__shadow .card-body .font-nameA {
    display: block;
    padding: 3px 0;
}
body.woo-redesign .woo-account-page .card.__shadow .card-body .fw-semibold.min-w-60px {
    color: var(--woo-ink-500);
    font-weight: 600;
}

/* ---- 22.4 add/edit address modal (shared markup with edit page form) ---- */
body.woo-redesign .woo-account-page .modal-content {
    border: none;
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-lg);
    overflow: hidden;
}
body.woo-redesign .woo-account-page .modal-header {
    border-bottom: 1px solid var(--woo-ink-100);
    padding: 20px 24px;
}
body.woo-redesign .woo-account-page .modal-body {
    padding: 24px;
}
body.woo-redesign .woo-account-page .modal-footer {
    border-top: 1px solid var(--woo-ink-100);
    padding: 16px 24px;
}
body.woo-redesign .woo-account-page .modal-footer .btn--primary {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border: none;
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .modal-footer .btn--primary:hover {
    background: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .modal-footer .btn-secondary,
body.woo-redesign .woo-account-page .modal-footer .closeB {
    background: var(--woo-ink-050);
    color: var(--woo-ink-700);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign .woo-account-page .modal-footer .btn-secondary:hover,
body.woo-redesign .woo-account-page .modal-footer .closeB:hover {
    background: var(--woo-ink-100);
    color: var(--woo-ink-900);
}

/* ---- 22.5 address-type / billing-type radio pills (.donate-now,
        shared by the add-address modal and account-address-edit.blade.php) ---- */
body.woo-redesign .woo-account-page .donate-now li {
    list-style: none;
}
body.woo-redesign .woo-account-page .donate-now input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
body.woo-redesign .woo-account-page .donate-now label.component {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: var(--woo-radius-pill);
    border: 1.5px solid var(--woo-ink-100);
    background: var(--woo-white);
    color: var(--woo-ink-700);
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-account-page .donate-now input[type="radio"]:checked + label.component {
    background: var(--woo-olive-500) !important;
    border-color: var(--woo-olive-500);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .donate-now input[type="radio"]:focus-visible + label.component {
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}

/* ---- 22.6 address form fields (modal + edit page share this markup) ---- */
body.woo-redesign .woo-account-page .form-row .form-group label,
body.woo-redesign .woo-account-page .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--woo-ink-900);
    margin-bottom: 6px;
    display: inline-block;
}
body.woo-redesign .woo-account-page .form-row .form-control,
body.woo-redesign .woo-account-page textarea.form-control {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
    font-family: inherit;
    font-size: 14px;
    padding: 11px 15px;
    color: var(--woo-ink-900);
    background-color: var(--woo-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-account-page .form-row .form-control:focus,
body.woo-redesign .woo-account-page textarea.form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 3px var(--woo-olive-100);
    outline: none;
}
body.woo-redesign .woo-account-page textarea.form-control {
    min-height: 90px;
    resize: vertical;
}
body.woo-redesign .woo-account-page .bootstrap-select .dropdown-toggle.form-control,
body.woo-redesign .woo-account-page .bootstrap-select > .dropdown-toggle {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
    background-color: var(--woo-white);
    font-family: inherit;
    font-size: 14px;
    padding: 11px 15px;
}
body.woo-redesign .woo-account-page .bootstrap-select .dropdown-menu {
    border-radius: var(--woo-radius-md);
    border: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-md);
}

/* ---- 22.7 map location picker (add-address modal + edit page,
        same underlying component/ids as the checkout shipping form) ---- */
body.woo-redesign .woo-account-page .map-area-alert-border {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 10px;
    overflow: hidden;
}
body.woo-redesign .woo-account-page .map-area-alert-border.map-area-alert-danger {
    border-color: #dc3545;
}
body.woo-redesign .woo-account-page #location_map_canvas {
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-account-page .location-search-input-field {
    border: 1px solid var(--woo-ink-100) !important;
    font-family: inherit;
    padding: 10px 14px;
}
body.woo-redesign .woo-account-page .map-address-alert {
    display: inline-block;
    margin-top: 4px;
}

/* ---- 22.8 empty state (no addresses saved) ---- */
body.woo-redesign .woo-account-page .text-center.text-capitalize.pb-5 h5 {
    color: var(--woo-ink-500);
    font-weight: 500;
}
body.woo-redesign .woo-account-page .text-center.text-capitalize.pb-5 img {
    opacity: .6;
}

/* =====================================================================
   24) SUPPORT TICKETS (resources/themes/default/web-views/users-profile/
       account-tickets.blade.php + ticket-view.blade.php). Both pages
       gained one structural change only: their whole @section('content')
       is wrapped in a new `<div class="woo-account-page">`. Every other
       element — the "submit a ticket" modal + form, the delete-confirm
       modal, the desktop table / mobile card loops over $supportTickets,
       and the reply form on the thread page — is untouched markup.

   FUNCTIONAL HOOKS PRESERVED (verified against account-ticket.blade.js
   and ticket-view.js — only visual presentation is changed below):
     #open-ticket (both the modal id AND the form id), route('ticket-submit'),
     .attachmentfiles / .upload_images_area / .filearray /
     .selected-files-container (new-ticket attachment picker JS),
     .delete-ticket-by-modal[data-link] / #delete-ticket-modal /
     #delete-ticket-link (delete-confirm flow), .get-view-by-onclick
     [data-link] (mobile row -> ticket link), .profile-aside-btn (mobile
     sidebar toggle), .bottom-sticky_ele / .bottom-sticky_offset (sticky
     mobile "add ticket" CTA), route('support-ticket.index'/.delete/
     .close/.comment), #f_p_v_up1 / .filearray / #selected-files-container
     (reply attachment picker — ticket-view.js), .ticket-view-control
     textarea[name=comment], data-lightbox="mygallery" attachment
     thumbnails, {{ $supportTickets->links() }} pagination.
   No JS file was modified to build this section.
   ===================================================================== */

/* ---- 24.1 new-ticket modal + delete-confirm modal ---- */
body.woo-redesign .woo-account-page #open-ticket.modal .modal-content,
body.woo-redesign .woo-account-page #delete-ticket-modal .modal-content {
    border: none;
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .woo-account-page #open-ticket .modal-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page #open-ticket label {
    color: var(--woo-ink-700);
    font-size: 13px;
}
body.woo-redesign .woo-account-page #open-ticket .form-control {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    font-size: 13.5px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page #open-ticket .form-control:focus {
    border-color: var(--woo-olive-500) !important;
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-account-page .upload_images_area label img {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .woo-account-page .upload_img_box {
    border-color: var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-account-page .uploaded-file-item {
    background: var(--woo-ink-050);
    border-radius: var(--woo-radius-sm);
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-account-page .btn--primary {
    background: var(--woo-ink-900) !important;
    border: none !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
body.woo-redesign .woo-account-page .btn--primary:hover {
    background: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
    transform: translateY(-1px);
}
body.woo-redesign .woo-account-page .btn-secondary,
body.woo-redesign .woo-account-page .bg--secondary {
    background: var(--woo-ink-050) !important;
    border: none !important;
    color: var(--woo-ink-700) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-account-page #delete-ticket-link.btn-primary {
    background: #d0484f !important;
    border-color: #d0484f !important;
    border-radius: var(--woo-radius-pill) !important;
}

/* ---- 24.2 ticket list: card / table / badges / row actions ---- */
body.woo-redesign .woo-account-page section > .__card,
body.woo-redesign .woo-account-page .card.__card {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-account-page .__table-2 thead th {
    background: var(--woo-ink-050);
    color: var(--woo-ink-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px !important;
    padding-top: 12px;
    padding-bottom: 12px;
}
body.woo-redesign .woo-account-page .__table-2 tbody tr {
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-account-page .__table-2 tbody tr:last-child {
    border-bottom: none;
}
body.woo-redesign .woo-account-page .__table-2 tbody td {
    vertical-align: middle;
    padding-top: 14px;
    padding-bottom: 14px;
}
body.woo-redesign .woo-account-page .__badge.badge-warning {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-account-page .__badge.badge-danger {
    background: #fdeceb !important;
    color: #c0392b !important;
}
body.woo-redesign .woo-account-page .__action-btn {
    border: 1px solid var(--woo-ink-100);
    transition: border-color .2s ease, background .2s ease;
}
body.woo-redesign .woo-account-page .__action-btn:hover {
    background: var(--woo-olive-050);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-account-page .page-link {
    border-color: var(--woo-ink-100) !important;
    color: var(--woo-ink-700) !important;
    border-radius: var(--woo-radius-sm) !important;
}
body.woo-redesign .woo-account-page .page-item.active .page-link {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
}

/* ---- 24.3 mobile ticket cards + sticky "add ticket" CTA ---- */
body.woo-redesign .woo-account-page .get-view-by-onclick.bg-white {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
    box-shadow: none !important;
}
body.woo-redesign .woo-account-page .bottom-sticky_ele {
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}

/* ---- 24.4 ticket-view: thread header ---- */
body.woo-redesign .woo-account-page .bg-section.rounded {
    background: var(--woo-ink-050) !important;
    border-radius: var(--woo-radius-lg) !important;
}
body.woo-redesign .woo-account-page .support_ticket_head-media img {
    border: 2px solid var(--woo-white);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-account-page .btn-outline-danger {
    border-radius: var(--woo-radius-pill) !important;
}

/* ---- 24.5 ticket-view: conversation bubbles ---- */
body.woo-redesign .woo-account-page .__media-wrapper {
    background: var(--woo-cream);
}
body.woo-redesign .woo-account-page .__incoming-msg .message-text,
body.woo-redesign .woo-account-page .__outgoing-msg .message-text {
    display: inline-block;
    max-width: 460px;
    padding: 10px 16px !important;
    font-size: 13.5px;
    line-height: 1.55;
    box-shadow: none !important;
}
body.woo-redesign .woo-account-page .__incoming-msg .message-text {
    background: var(--woo-white) !important;
    color: var(--woo-ink-900) !important;
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: 4px var(--woo-radius-md) var(--woo-radius-md) var(--woo-radius-md) !important;
}
body.woo-redesign .woo-account-page .__outgoing-msg .message-text {
    background: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
    border: none !important;
    border-radius: var(--woo-radius-md) 4px var(--woo-radius-md) var(--woo-radius-md) !important;
}
body.woo-redesign .woo-account-page .__media-wrapper .time_date {
    color: var(--woo-ink-300) !important;
    font-size: 11px;
}
body.woo-redesign .woo-account-page .__media-wrapper img.rounded[data-lightbox] {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-sm) !important;
}

/* ---- 24.6 ticket-view: reply composer ---- */
body.woo-redesign .woo-account-page .card-footer {
    background: var(--woo-white);
    border-top: 1px solid var(--woo-ink-100) !important;
}
body.woo-redesign .woo-account-page .ticket-view-control {
    font-size: 13.5px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .ticket-view-control::placeholder {
    color: var(--woo-ink-300);
}

/* =====================================================================
   25) CHAT INBOX (resources/themes/default/web-views/users-profile/
       inbox/index.blade.php + inbox/messages.blade.php). index.blade.php
       gained one structural change: `woo-account-page` was appended to
       the existing outer `.__chat-seller` div's class list (the class
       chatting.js keys nothing off of directly, so this is purely
       additive). messages.blade.php is never given a wrapper of its own
       — it is always rendered as a descendant of `.__chat-seller
       .woo-account-page` (both on first page load via @include and on
       every AJAX conversation-switch / send, since the JS only replaces
       the innerHTML of #chatting-messages-section, which itself stays
       inside that scope), so the rules below reach it either way.

   FUNCTIONAL HOOKS PRESERVED (verified against chatting.js, emoji.js,
   picmo-emoji.js, select-multiple-file.js and
   select-multiple-image-for-message.js — only visual presentation is
   changed below, no id/class/name/route was renamed, removed or added
   to any element that JS binds to):
     #myInput (contact search), .list_filter / .chat_list.get-ajax-
     message-view[data-user-id] (conversation switch, .active toggling),
     #count-unread-messages-{id}, #chatting-post-url[data-url],
     #chatting-messages-section (AJAX swap target — untouched id),
     .profile-image / .profile-name (updated via AJAX response),
     .temporarily-closed-sticky-alert, .chatting-messages-form (AJAX
     submit), #select-media / #select-file (file pickers), #trigger /
     #msgInputValue (picmo emoji popup anchor + insertion target),
     #msgSendBtn, .circle-progress / #svg / #bar (upload progress ring),
     .image-array / .file-array / #selected-media-container /
     #selected-files-container (attachment preview + hidden re-submit
     inputs), #get-file-icon / #message-media-error / #get-video-
     preview-icon (data-* driven JS), .uploaded-file-item / .pdf-file-
     name / .zip-wrapper / .zip-images / .zip-download / .extra-images /
     #imgViewModal{id} / .imgView-slider / .imgView-item / .imgView-
     owl-prev/-next / .video-element / .modal_video-play-btn (message
     attachment rendering + owl carousel + zip download + video preview,
     all driven by chatting.js and select-multiple-image-for-message.js).
   No JS file was modified to build this section.
   ===================================================================== */

/* ---- 25.1 sidebar shell: tabs + search ---- */
body.woo-redesign .woo-account-page .chat--sidebar-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) 0 0 var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
    overflow: hidden;
}
@media (max-width: 991.98px) {
    body.woo-redesign .woo-account-page .chat--sidebar-card {
        border-radius: var(--woo-radius-lg);
        margin-bottom: 16px;
    }
}
body.woo-redesign .woo-account-page .chat--sidebar-top {
    background: var(--woo-ink-050);
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-account-page .chat--sidebar-card .nav--tabs .nav-link {
    color: var(--woo-ink-500) !important;
    font-weight: 600;
    border-bottom: 2px solid transparent !important;
}
body.woo-redesign .woo-account-page .chat--sidebar-card .nav--tabs .nav-link.active {
    color: var(--woo-ink-900) !important;
    border-color: var(--woo-olive-500) !important;
}
body.woo-redesign .woo-account-page .chatting-search-border {
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-pill) !important;
    background: var(--woo-white) !important;
    box-shadow: none !important;
}
body.woo-redesign .woo-account-page .chatting-search-border #myInput {
    font-size: 13px;
}

/* ---- 25.2 conversation list ---- */
body.woo-redesign .woo-account-page .inbox_chat {
    background: var(--woo-white);
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list {
    border-bottom: 1px solid var(--woo-ink-100);
    transition: background .15s ease;
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list:hover {
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list.active {
    background: var(--woo-olive-050) !important;
    border-inline-start-color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list img {
    border: 2px solid var(--woo-white);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list h5 {
    color: var(--woo-ink-900);
    font-weight: 500;
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list h5.active-text {
    font-weight: 700 !important;
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list .last-msg {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .inbox_chat .chat_list .date {
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-account-page .new-msg.btn--primary {
    padding: 2px 8px !important;
    font-size: 10.5px !important;
}

/* ---- 25.3 message panel shell ---- */
body.woo-redesign .woo-account-page .Chat.__shadow,
body.woo-redesign .woo-account-page section > .card.Chat {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-inline-start: none;
    box-shadow: var(--woo-shadow-sm);
}
@media (max-width: 991.98px) {
    body.woo-redesign .woo-account-page .Chat.__shadow,
    body.woo-redesign .woo-account-page section > .card.Chat {
        border-inline-start: 1px solid var(--woo-ink-100);
        border-radius: var(--woo-radius-lg) !important;
    }
}
body.woo-redesign .woo-account-page .msg-user {
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-account-page .msg-user img.profile-image {
    border: 2px solid var(--woo-white);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-account-page .msg-user h5.profile-name {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .msg_history {
    background: var(--woo-cream);
}

/* ---- 25.4 empty-state (no conversation selected) ---- */
body.woo-redesign .woo-account-page section > .card.Chat.d-flex {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-account-page section > .card.Chat.d-flex .text-body {
    color: var(--woo-ink-500) !important;
}

/* ---- 25.5 message bubbles (inbox/messages.blade.php) ---- */
body.woo-redesign .woo-account-page .received_withdraw_msg p {
    background: var(--woo-white) !important;
    color: var(--woo-ink-900) !important;
    border: 1px solid var(--woo-ink-100) !important;
    border-radius: 4px var(--woo-radius-md) var(--woo-radius-md) var(--woo-radius-md) !important;
    padding: 10px 14px !important;
    font-size: 13.5px;
}
body.woo-redesign .woo-account-page .send_msg p.btn--primary {
    background: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
    border-radius: var(--woo-radius-md) 4px var(--woo-radius-md) var(--woo-radius-md) !important;
    padding: 10px 14px !important;
    font-size: 13.5px;
    font-weight: 400;
}
body.woo-redesign .woo-account-page .incoming_msg_img img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
body.woo-redesign .woo-account-page [data-toggle="tooltip"] {
    cursor: default;
}

/* ---- 25.6 message attachments: file chips ---- */
body.woo-redesign .woo-account-page .uploaded-file-item {
    background: var(--woo-ink-050);
    color: var(--woo-ink-700);
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-account-page .uploaded-file-item small {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-page .btn--download {
    background: var(--woo-white) !important;
    border: 1px solid var(--woo-ink-100);
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-account-page .btn--download:hover {
    background: var(--woo-olive-050) !important;
}

/* ---- 25.7 message attachments: image / video grid + zip modal ---- */
body.woo-redesign .woo-account-page .zip-images a.aspect-1 {
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-account-page .extra-images {
    background: rgba(58, 58, 58, .72);
}
body.woo-redesign .woo-account-page .video-play-btn {
    background: var(--woo-white);
    border-radius: 50%;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page .imgViewModal .btn--download {
    background: var(--woo-white) !important;
}
body.woo-redesign .woo-account-page .imgViewModal .btn-close {
    background: var(--woo-white);
    border-radius: 50%;
}
body.woo-redesign .woo-account-page .imgView-slider_buttons .owl-btn {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border-radius: 50%;
}

/* ---- 25.8 "temporarily closed" / vacation notice ---- */
body.woo-redesign .woo-account-page .temporarily-closed-sticky-alert .alert-box {
    background: var(--woo-olive-050);
    border: 1px solid var(--woo-olive-300);
    border-radius: var(--woo-radius-md);
    color: var(--woo-ink-700);
}

/* ---- 25.9 composer ---- */
body.woo-redesign .woo-account-page .type_msg {
    background: var(--woo-white);
    border-top: 1px solid var(--woo-ink-100) !important;
}
body.woo-redesign .woo-account-page .type_msg label.text-primary {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-account-page .type_msg label.text-primary:hover {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-account-page #msgInputValue {
    font-size: 13.5px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-account-page #msgInputValue::placeholder {
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-account-page #msgSendBtn {
    color: var(--woo-ink-900);
    transition: color .2s ease, transform .2s ease;
}
body.woo-redesign .woo-account-page #msgSendBtn:hover {
    color: var(--woo-olive-600);
    transform: translateX(1px);
}
body.woo-redesign .woo-account-page .image-array .upload_img_box,
body.woo-redesign .woo-account-page .file-array .upload_img_box {
    border-color: var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .woo-account-page .circle-progress .inner {
    background: rgba(251, 249, 242, .85);
    color: var(--woo-ink-900);
    font-size: 12px;
    font-weight: 600;
}
body.woo-redesign .woo-account-page #svg #bar {
    stroke: var(--woo-olive-600);
}

/* ---- 25.10 responsive ---- */
@media (max-width: 575.98px) {
    body.woo-redesign .woo-account-page .received_withdraw_msg,
    body.woo-redesign .woo-account-page .send_msg {
        width: 88% !important;
    }
    body.woo-redesign .woo-account-page .received_withdraw_msg p,
    body.woo-redesign .woo-account-page .send_msg p.btn--primary {
        max-width: 100%;
    }
}


/* =====================================================================
   WOO Redesign — Phase 9: Account "Order Details" cluster
   Files: users-profile/account-order-details.blade.php +
   users-profile/account-details/{partial,seller-info,reviews,
   track-order,delivery-man-info}.blade.php
   ---------------------------------------------------------------------
   Every rule below is scoped under `.order-details-page` (the page-level
   wrapper class added to each of the 6 files' outer container, alongside
   the shared `.woo-account-page` class already used by sibling account
   pages) or, for the two Bootstrap modals that render outside that
   container (verifyViewModal / orderDuePaymentInfoModal), under their
   unique #id. No functional class/id/data-attribute used by
   account-order-details.js, custom.js (.get-view-by-onclick,
   .call-route-alert, .get-order-again-function,
   .action-digital-product-download, .action-get-refund-details,
   data-toggle/data-target modal wiring, .order-details-nav tab hrefs,
   route()-driven data-link/data-route values) was touched — visual only.
   ===================================================================== */

/* ---- 23.1 order summary header (account-details/partial.blade.php) ---- */
body.woo-redesign .order-details-page .order-details-summary-head h4 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .order-details-summary-head .edit-text {
    color: var(--woo-ink-500);
    font-style: italic;
}
body.woo-redesign .order-details-page .order-details-summary-head .date {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .order-details-page .order-details-summary-head .__badge {
    border-radius: var(--woo-radius-pill);
    padding: 5px 14px;
    font-weight: 600;
    letter-spacing: .02em;
}
body.woo-redesign .order-details-page .order-details-summary-head .__badge.badge-soft-success {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-color: var(--woo-olive-300) !important;
}
body.woo-redesign .order-details-page .order-details-summary-head .__badge.badge-soft-danger {
    background: #fdecea !important;
    color: #c0392b !important;
    border-color: #f5c6c0 !important;
}
body.woo-redesign .order-details-page .order-details-summary-head .__badge.badge-soft-primary,
body.woo-redesign .order-details-page .order-details-summary-head .__badge-soft-primary {
    background: var(--woo-ink-050) !important;
    color: var(--woo-ink-700) !important;
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .order-details-page .order-details-summary-head .btn-outline-primary {
    border: 1.5px solid var(--woo-ink-900);
    color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    background: transparent;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .order-details-page .order-details-summary-head .btn-outline-primary:hover {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .order-details-page .order-details-summary-head .btn--primary.get-view-by-onclick {
    border-radius: var(--woo-radius-pill) !important;
}

/* ---- 23.2 tab nav (.order-details-nav — pill tabs, same idea as
        the mockup's .oh-tab) ---- */
body.woo-redesign .order-details-page .order-details-nav {
    gap: 8px !important;
    border-bottom: 1px solid var(--woo-ink-100);
    padding-bottom: 14px;
}
body.woo-redesign .order-details-page .order-details-nav > * {
    padding: 9px 18px !important;
    border-radius: var(--woo-radius-pill) !important;
    border: 1px solid var(--woo-ink-100) !important;
    background: var(--woo-white) !important;
    color: var(--woo-ink-700) !important;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.woo-redesign .order-details-page .order-details-nav > *:hover {
    border-color: var(--woo-olive-300) !important;
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .order-details-page .order-details-nav > *.active {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
}

/* ---- 23.3 info boxes (order info / payment info / shipping / billing
        / verification-code / "reorder?" prompt) ---- */
body.woo-redesign .order-details-page .light-box {
    background: var(--woo-olive-050) !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .order-details-page .light-box h6 {
    color: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .light-box .bg-white {
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .order-details-page .light-box .text-primary,
body.woo-redesign .order-details-page .light-box .web-text-primary {
    color: var(--woo-olive-700) !important;
}

/* ---- 23.4 main content shell + item table ---- */
body.woo-redesign .order-details-page .bg-white.cus-shadow.rounded-10 {
    box-shadow: var(--woo-shadow-sm) !important;
    border-radius: var(--woo-radius-lg) !important;
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .order-details-page .border.overflow-hidden.rounded-10 {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
}
body.woo-redesign .order-details-page table.table thead.thead-light {
    background: var(--woo-ink-050) !important;
}
body.woo-redesign .order-details-page table.table thead th {
    color: var(--woo-ink-700);
    border: none !important;
}
body.woo-redesign .order-details-page table.table tbody tr {
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .order-details-page table.table tbody tr:last-child {
    border-bottom: none;
}
body.woo-redesign .order-details-page table.table td,
body.woo-redesign .order-details-page table.table th {
    border-top: none;
}
body.woo-redesign .order-details-page table .media-body a {
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .order-details-page table .media-body a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .order-details-page .for-discount-value {
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border-radius: var(--woo-radius-sm);
}
body.woo-redesign .order-details-page .amount {
    color: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .action-digital-product-download.soft-primary {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-sm) !important;
}

/* ---- 23.5 totals / summary card + cancel-order action ---- */
body.woo-redesign .order-details-page .row.justify-content-end .bg-white.border.rounded {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .order-details-page .calculation-table tr.border-top td {
    border-top: 1px dashed var(--woo-ink-100) !important;
    padding-top: 12px;
}
body.woo-redesign .order-details-page .calculation-table .title-semidark {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .order-details-page .call-route-alert.btn-soft-danger {
    border: 1.5px solid #f2c9c4 !important;
    border-radius: var(--woo-radius-pill) !important;
    background: transparent !important;
    font-weight: 600;
    transition: background .2s ease;
}
body.woo-redesign .order-details-page .call-route-alert.btn-soft-danger:hover {
    background: #fdecea !important;
}

/* ---- 23.6 mobile sticky "reorder" bar (renders outside the page
        container, so it is scoped by its own distinctive classes
        rather than by an ancestor) ---- */
body.woo-redesign .order-details-sticky-bar {
    border-top: 1px solid var(--woo-ink-100);
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign .order-details-sticky-bar .btn--primary {
    background: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}

/* ---- 23.7 payment-verification modals (render outside the page
        container in account-order-details.blade.php; ids are unique
        to this file so scoping by #id is safe) ---- */
body.woo-redesign #verifyViewModal .modal-content,
body.woo-redesign #orderDuePaymentInfoModal .modal-content {
    border-radius: var(--woo-radius-lg);
    border: none;
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign #verifyViewModal h5,
body.woo-redesign #verifyViewModal h6,
body.woo-redesign #orderDuePaymentInfoModal h5 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}

/* ---- 23.8 seller / vendor info tab (account-details/seller-info.blade.php) ---- */
body.woo-redesign .order-details-page .order-details-seller-card {
    border: none;
    box-shadow: var(--woo-shadow-sm);
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .order-details-page .order-details-seller-card .media.border {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md);
}
body.woo-redesign .order-details-page .order-details-seller-card .other-store-logo {
    border-radius: var(--woo-radius-md);
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .order-details-page .order-details-seller-card .seller-info-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .order-details-seller-card .rating-show .tio-star,
body.woo-redesign .order-details-page .order-details-seller-card .rating-show .tio-star-half,
body.woo-redesign .order-details-page .order-details-seller-card .rating-show .tio-star-outlined {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .order-details-page .order-details-seller-card .badge-style {
    color: var(--woo-ink-500);
}
body.woo-redesign .order-details-page .order-details-seller-card .btn-soft-info {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
    border: none;
    font-weight: 600;
    transition: background .2s ease;
}
body.woo-redesign .order-details-page .order-details-seller-card .btn-soft-info:hover:not(:disabled) {
    background: var(--woo-olive-300) !important;
}
body.woo-redesign .order-details-page .order-details-seller-card .temporary-closed {
    background: rgba(58, 58, 58, .75);
    color: var(--woo-white);
    border-radius: var(--woo-radius-md);
}

/* ---- 23.9 reviews tab (account-details/reviews.blade.php) ---- */
body.woo-redesign .order-details-page .order-details-review-card {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .order-details-page .order-details-review-card .review-item-img {
    border-radius: var(--woo-radius-md);
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .order-details-page .order-details-review-card .review-item-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .order-details-review-card .btn-warning {
    background: var(--woo-olive-500) !important;
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}
body.woo-redesign .order-details-page .order-details-review-card .btn-warning:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}
body.woo-redesign .order-details-page .order-details-review-card .tio-star-half.text-warning {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .order-details-page .order-details-review-card .review-reply {
    background: var(--woo-olive-050) !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign .order-details-page .order-details-empty-card img {
    opacity: .6;
}
body.woo-redesign .order-details-page .order-details-empty-card p {
    color: var(--woo-ink-500);
}

/* ---- 23.10 track-order tab (account-details/track-order.blade.php) ---- */
body.woo-redesign .order-details-page .order-details-track-card {
    box-shadow: var(--woo-shadow-sm);
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .order-details-page .order-track_wrapper .icon-svg.bg-soft-5 {
    background: var(--woo-olive-050) !important;
}
body.woo-redesign .order-details-page .order-track_wrapper li h6 {
    color: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .order-track_wrapper li .title-semidark {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .order-details-page .order-track_wrapper li.order-active-placed .icon-svg,
body.woo-redesign .order-details-page .order-track_wrapper li.order-step-next .icon-svg {
    background: var(--woo-olive-500) !important;
}
body.woo-redesign .order-details-page .order-track_wrapper li.order-active-placed .icon-svg svg path,
body.woo-redesign .order-details-page .order-track_wrapper li.order-step-next .icon-svg svg path {
    fill: var(--woo-ink-900);
}
body.woo-redesign .order-details-page .order-track_wrapper .web-text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .order-details-page .order-track_wrapper .border-left {
    border-color: var(--woo-ink-100) !important;
}

/* ---- 23.11 delivery-man info tab (account-details/delivery-man-info.blade.php) ---- */
body.woo-redesign .order-details-page .delivery-man-info-box {
    box-shadow: var(--woo-shadow-sm) !important;
    border-radius: var(--woo-radius-lg) !important;
}
body.woo-redesign .order-details-page .delivery-man-info-box .rating-show .tio-star,
body.woo-redesign .order-details-page .delivery-man-info-box .rating-show .tio-star-half,
body.woo-redesign .order-details-page .delivery-man-info-box .rating-show .tio-star-outlined {
    color: var(--woo-olive-600) !important;
}
body.woo-redesign .order-details-page .delivery-man-info-box .btn-soft-info {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
    border: none;
    font-weight: 600;
}
body.woo-redesign .order-details-page .delivery-man-info-box .btn-warning {
    background: var(--woo-olive-500) !important;
    border-color: var(--woo-olive-500) !important;
    color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}
body.woo-redesign .order-details-page .order-details-3p-card,
body.woo-redesign .order-details-page .order-details-empty-card {
    box-shadow: var(--woo-shadow-sm);
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .order-details-page .order-details-3p-card .border.rounded {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign #submitReviewModal .modal-content {
    border-radius: var(--woo-radius-lg);
    border: none;
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign #submitReviewModal .rating-label input.rating {
    accent-color: var(--woo-olive-600);
}

/* =====================================================================
   26) STATIC / BUSINESS PAGES (phase 10) — business_page.blade.php (single
       shared template for About Us / Terms & Conditions / Privacy Policy /
       Return Policy / Cancellation Policy / Gift Card / any other
       admin-authored "business page"), contact-us.blade.php and
       help-topics.blade.php. Shared wrapper class `.woo-static-page` is
       added to each page's outer content div; page-specific classes
       (`.woo-legal-page`, `.woo-contact-page`, `.woo-help-page`) scope the
       rest. Functional selectors (form action/method/field names, CSRF,
       recaptcha containers, `[data-bg-img]`, `data-toggle="collapse"` /
       `data-target`, `.phone-input-with-country-picker`) are all untouched.
   ===================================================================== */

/* ---- 26.1 shared eyebrow / crumbs used on all three pages ---- */
body.woo-redesign .woo-static-page .woo-legal-crumbs,
body.woo-redesign .woo-static-page .ct-crumbs {
    font-size: 13px;
    color: var(--woo-ink-700);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.woo-redesign .woo-static-page .woo-legal-crumbs a {
    color: var(--woo-ink-700);
    transition: color .2s ease;
}
body.woo-redesign .woo-static-page .woo-legal-crumbs a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-static-page .woo-legal-crumb-sep {
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-static-page .woo-legal-crumb-current {
    color: var(--woo-ink-500);
}

/* =====================================================================
   26.2 LEGAL / BUSINESS PAGE (business_page.blade.php)
   ===================================================================== */
body.woo-redesign .woo-legal-page .woo-legal-hero {
    background: linear-gradient(120deg, var(--woo-olive-050) 0%, var(--woo-olive-100) 60%, var(--woo-olive-300) 130%);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-xl);
    padding: 2.75rem 1.5rem !important;
}
body.woo-redesign .woo-legal-page .woo-legal-hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900) !important;
    letter-spacing: -.01em;
}
body.woo-redesign .woo-legal-page .woo-legal-hero:after {
    /* the legacy dark-overlay pseudo-element is only useful when a real
       banner photo is present; the gradient above already gives good
       contrast for plain-text titles, so soften the default overlay */
    --opacity: .18;
}

body.woo-redesign .woo-legal-page .woo-legal-card {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-legal-page .woo-legal-card .card-body {
    padding: 2.5rem;
}
@media (max-width: 575.98px) {
    body.woo-redesign .woo-legal-page .woo-legal-card .card-body {
        padding: 1.5rem;
    }
}

/* generic typography for admin-authored rich-text HTML — deliberately
   broad descendant selectors since the WYSIWYG output has no fixed
   class names and this one template renders many different pages */
body.woo-redesign .woo-legal-page .woo-legal-body {
    max-width: 780px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-legal-page .woo-legal-body h1,
body.woo-redesign .woo-legal-page .woo-legal-body h2,
body.woo-redesign .woo-legal-page .woo-legal-body h3,
body.woo-redesign .woo-legal-page .woo-legal-body h4,
body.woo-redesign .woo-legal-page .woo-legal-body h5,
body.woo-redesign .woo-legal-page .woo-legal-body h6 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 1.7em 0 .55em;
}
body.woo-redesign .woo-legal-page .woo-legal-body h1:first-child,
body.woo-redesign .woo-legal-page .woo-legal-body h2:first-child,
body.woo-redesign .woo-legal-page .woo-legal-body h3:first-child {
    margin-top: 0;
}
body.woo-redesign .woo-legal-page .woo-legal-body h1 { font-size: clamp(24px, 2.6vw, 30px); }
body.woo-redesign .woo-legal-page .woo-legal-body h2 { font-size: clamp(20px, 2.3vw, 25px); }
body.woo-redesign .woo-legal-page .woo-legal-body h3 { font-size: 18px; }
body.woo-redesign .woo-legal-page .woo-legal-body h4,
body.woo-redesign .woo-legal-page .woo-legal-body h5,
body.woo-redesign .woo-legal-page .woo-legal-body h6 { font-size: 16px; }
body.woo-redesign .woo-legal-page .woo-legal-body p {
    margin: 0 0 1em;
}
body.woo-redesign .woo-legal-page .woo-legal-body a {
    color: var(--woo-olive-700);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.woo-redesign .woo-legal-page .woo-legal-body a:hover {
    color: var(--woo-olive-600);
}
body.woo-redesign .woo-legal-page .woo-legal-body strong,
body.woo-redesign .woo-legal-page .woo-legal-body b {
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-legal-page .woo-legal-body ul,
body.woo-redesign .woo-legal-page .woo-legal-body ol {
    margin: 0 0 1.1em;
    padding-left: 1.35em;
}
body.woo-redesign .woo-legal-page .woo-legal-body ul {
    list-style: disc;
}
body.woo-redesign .woo-legal-page .woo-legal-body ol {
    list-style: decimal;
}
body.woo-redesign .woo-legal-page .woo-legal-body li {
    margin-bottom: .5em;
    line-height: 1.8;
}
body.woo-redesign .woo-legal-page .woo-legal-body li::marker {
    color: var(--woo-olive-500);
}
body.woo-redesign .woo-legal-page .woo-legal-body blockquote {
    background: var(--woo-olive-050);
    border-left: 4px solid var(--woo-olive-500);
    border-radius: var(--woo-radius-md);
    padding: 16px 20px;
    margin: 0 0 1.25em;
    font-size: 14.5px;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-legal-page .woo-legal-body hr {
    border: none;
    border-top: 1px solid var(--woo-ink-100);
    margin: 2em 0;
}
body.woo-redesign .woo-legal-page .woo-legal-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--woo-radius-md);
    margin: .5em 0;
}
body.woo-redesign .woo-legal-page .woo-legal-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 0 1.25em;
}
body.woo-redesign .woo-legal-page .woo-legal-body th {
    background: var(--woo-ink-050);
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--woo-ink-900);
    border: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-legal-page .woo-legal-body td {
    padding: 12px 16px;
    border: 1px solid var(--woo-ink-100);
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-legal-page .woo-legal-body table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    color: var(--woo-ink-900);
    margin-bottom: .5em;
}

/* =====================================================================
   26.3 CONTACT US (contact-us.blade.php)
   ===================================================================== */
body.woo-redesign .woo-contact-page .woo-contact-hero {
    background: linear-gradient(120deg, var(--woo-olive-050) 0%, var(--woo-olive-100) 60%, var(--woo-olive-300) 130%);
    border-bottom: 1px solid var(--woo-ink-100);
    padding: 44px 0 30px;
}
body.woo-redesign .woo-contact-page .woo-contact-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--woo-olive-700);
    margin-bottom: 6px;
}
body.woo-redesign .woo-contact-page .woo-contact-hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-contact-page .woo-contact-hero-sub {
    max-width: 560px;
    margin: 12px auto 0;
    color: var(--woo-ink-700);
    font-size: 14.5px;
    line-height: 1.7;
}

body.woo-redesign .woo-contact-page .woo-contact-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
}
body.woo-redesign .woo-contact-page .woo-contact-chip {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    padding: 15px 20px;
    box-shadow: var(--woo-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    color: var(--woo-ink-900);
    min-width: 220px;
}
body.woo-redesign .woo-contact-page .woo-contact-chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-contact-page .woo-contact-chip-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--woo-olive-100);
    color: var(--woo-olive-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
body.woo-redesign .woo-contact-page .woo-contact-chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}
body.woo-redesign .woo-contact-page .woo-contact-chip-text strong {
    font-size: 13.5px;
    color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-contact-page .woo-contact-chip-text span {
    color: var(--woo-ink-500);
}

body.woo-redesign .woo-contact-page .woo-contact-grid {
    align-items: stretch;
}
body.woo-redesign .woo-contact-page .woo-contact-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
body.woo-redesign .woo-contact-page .for-contact-image {
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-md);
    width: 100%;
    height: auto;
    object-fit: cover;
}
body.woo-redesign .woo-contact-page .woo-contact-card {
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-sm);
    height: 100%;
}
body.woo-redesign .woo-contact-page .woo-contact-card .card-body {
    padding: 2.25rem;
}
body.woo-redesign .woo-contact-page .woo-contact-card h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-contact-page .woo-contact-card label {
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-contact-page .woo-contact-card .form-control {
    background: var(--woo-cream);
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--woo-ink-900);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body.woo-redesign .woo-contact-page .woo-contact-card .form-control:focus {
    background: var(--woo-white);
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-contact-page .woo-contact-card .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    padding: 13px 30px;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-contact-page .woo-contact-card .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-contact-page .woo-contact-card .dynamic-default-and-recaptcha-section,
body.woo-redesign .woo-contact-page .woo-contact-card .default-captcha-container {
    margin: 14px 0;
}

@media (max-width: 991.98px) {
    body.woo-redesign .woo-contact-page .woo-contact-chip {
        min-width: 0;
        flex: 1 1 220px;
    }
}
@media (max-width: 575.98px) {
    body.woo-redesign .woo-contact-page .woo-contact-card .card-body {
        padding: 1.5rem;
    }
}

/* =====================================================================
   26.4 HELP CENTRE / FAQ (help-topics.blade.php)
   ===================================================================== */
body.woo-redesign .woo-help-page .woo-help-hero {
    background: linear-gradient(120deg, var(--woo-olive-050) 0%, var(--woo-olive-100) 60%, var(--woo-olive-300) 130%);
    border-bottom: 1px solid var(--woo-ink-100);
    padding-bottom: 6px;
}
body.woo-redesign .woo-help-page .woo-help-eyebrow {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--woo-olive-700);
    margin-top: 8px;
}
body.woo-redesign .woo-help-page .woo-help-hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--woo-ink-900) !important;
}

body.woo-redesign .woo-help-page .woo-help-list-wrap {
    background: transparent;
}
body.woo-redesign .woo-help-page .woo-help-item {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    margin-bottom: 14px;
    box-shadow: var(--woo-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
body.woo-redesign .woo-help-page .woo-help-item:hover {
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-help-page .woo-help-item-head {
    margin: 0 !important;
    align-items: center;
}
body.woo-redesign .woo-help-page .woo-help-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--woo-olive-100);
    color: var(--woo-olive-700) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 0 !important;
}
body.woo-redesign .woo-help-page .woo-help-toggle {
    width: 100%;
    text-align: left;
    padding: 14px 16px 14px 0 !important;
    text-decoration: none !important;
}
body.woo-redesign .woo-help-page .woo-help-question {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--woo-ink-900);
    position: relative;
    padding-right: 26px !important;
}
body.woo-redesign .woo-help-page .woo-help-question:after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--woo-olive-700);
    transition: transform .2s ease;
}
body.woo-redesign .woo-help-page .woo-help-toggle:not(.collapsed) .woo-help-question:after {
    content: '\2212';
}
body.woo-redesign .woo-help-page .woo-help-answer {
    padding: 0 16px 20px 50px !important;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--woo-ink-500);
}

@media (max-width: 575.98px) {
    body.woo-redesign .woo-help-page .woo-help-answer {
        padding-left: 16px !important;
    }
}

/* =====================================================================
   27) VENDOR / SELLER PAGES (phase 12a) — seller-view/sellers.blade.php,
       shopview.blade.php, shop-info-card.blade.php, auth/register.blade.php
       + auth/partial/*, products/flash-deals.blade.php.
       These pages already reuse the phase-4 shop-page classes
       (.woo-shop-page/.woo-shop-sidebar/.woo-filter-panel/.woo-shop-content/
       .woo-shop-pagination/.woo-shop-empty/.woo-shop-breadcrumb) so most of
       their layout is already styled — this section covers the
       vendor-specific additions only.
   ===================================================================== */
body.woo-redesign .woo-vendor-hero {
    background: linear-gradient(120deg, var(--woo-olive-050) 0%, var(--woo-cream) 100%) !important;
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg) !important;
}
body.woo-redesign .woo-vendor-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-vendor-hero-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-vendor-hero-sub {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .woo-vendor-hero-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}
body.woo-redesign .woo-vendor-hero-stat strong {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-vendor-hero-stat span {
    font-size: 12.5px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-vendor-hero-search .search-page-button-input {
    border-radius: var(--woo-radius-pill);
    border: 1.5px solid var(--woo-ink-100);
    background: var(--woo-white);
}
body.woo-redesign .woo-vendor-hero-search .search_button .input-group-text {
    background: var(--woo-ink-900);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.woo-redesign .woo-vendor-card {
    display: block;
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-vendor-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300);
}
body.woo-redesign .woo-vendor-card .other-store-banner {
    height: 110px;
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-vendor-card .other-store-logo {
    width: 74px;
    height: 74px;
    border: 3px solid var(--woo-white);
    box-shadow: var(--woo-shadow-sm);
    margin-top: -37px;
    background: var(--woo-white);
}
body.woo-redesign .woo-vendor-card .name-area {
    padding: 8px 14px 4px;
}
body.woo-redesign .woo-vendor-card .name-area h5 {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    color: var(--woo-ink-900);
    margin-bottom: 6px;
}
body.woo-redesign .woo-vendor-card .info-area {
    padding: 0 14px 14px;
    border-top: 1px dashed var(--woo-ink-100);
    margin-top: 6px;
    padding-top: 10px;
}
body.woo-redesign .woo-vendor-card .info-item h6 {
    color: var(--woo-olive-700) !important;
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-vendor-card .temporary-closed {
    background: rgba(58, 58, 58, .82);
    color: var(--woo-white);
    font-size: 11px;
    inset: 0;
}

/* ---- vendor listing page (/vendors) — hero/toolbar/grid relaunch,
   matched to UI-PROJECT-FOLDER/vendors.html. Scoped under .woo-vendor-page
   .woo-vendor-grid/.woo-vendor-toolbar so it never touches the homepage
   top-sellers carousel above (which reuses .woo-vendor-card as a bare
   wrapper but has none of the .wv-* / .woo-vendor-grid descendants). ---- */
body.woo-redesign .woo-vendor-page .woo-vendor-hero {
    padding: 32px 36px;
    margin: 24px 0;
}
body.woo-redesign .woo-vendor-page .woo-vendor-hero-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(26px, 3.2vw, 38px);
    color: var(--woo-ink-900) !important;
    margin: 8px 0 10px;
    text-transform: none;
    max-width: 640px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-hero-title em {
    font-style: italic;
    color: var(--woo-olive-700);
    font-weight: 500;
}
body.woo-redesign .woo-vendor-page .woo-vendor-hero-sub {
    max-width: 580px;
    line-height: 1.6;
}
body.woo-redesign .woo-vendor-page .woo-vendor-hero-stats {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    margin-top: 20px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-hero-stats > div strong {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--woo-ink-900);
    display: block;
}
body.woo-redesign .woo-vendor-page .woo-vendor-hero-stats > div span {
    font-size: 12px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-vendor-page .woo-vendor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-toolbar-title {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card {
    display: flex;
    flex-direction: column;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-cover {
    height: 78px;
    background: linear-gradient(120deg, var(--woo-olive-700), var(--woo-olive-500));
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card:nth-child(6n+2) .wv-cover {
    background: linear-gradient(120deg, var(--woo-ink-700), var(--woo-ink-300));
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card:nth-child(6n+3) .wv-cover {
    background: linear-gradient(120deg, var(--woo-olive-600), var(--woo-olive-300));
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card:nth-child(6n+4) .wv-cover {
    background: linear-gradient(120deg, var(--woo-ink-900), var(--woo-olive-600));
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card:nth-child(6n+5) .wv-cover {
    background: linear-gradient(120deg, var(--woo-ink-500), var(--woo-olive-300));
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card:nth-child(6n+6) .wv-cover {
    background: linear-gradient(120deg, var(--woo-olive-500), var(--woo-olive-050));
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--woo-white);
    margin: -32px 0 0 24px;
    box-shadow: var(--woo-shadow-sm);
    position: relative;
    overflow: hidden;
    background: var(--woo-white);
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-avatar-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--woo-white);
    background: var(--woo-olive-600);
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-closed-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(58, 58, 58, .82);
    color: var(--woo-white);
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.1;
    padding: 4px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-body {
    padding: 12px 24px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--woo-ink-900);
    display: flex;
    align-items: center;
    gap: 6px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-verified-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-loc {
    font-size: 12.5px;
    color: var(--woo-ink-500);
    margin-top: 3px;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-stats {
    display: flex;
    gap: 22px;
    margin: 16px 0;
    padding: 14px 0;
    border-top: 1px solid var(--woo-ink-100);
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-stats b {
    font-size: 16px;
    font-family: 'Fraunces', serif;
    display: block;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-stats span {
    font-size: 11px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card .wv-cta {
    margin-top: auto;
    width: 100%;
    padding: 12px;
    border-radius: var(--woo-radius-md);
    border: 1.5px solid var(--woo-ink-900);
    background: transparent;
    color: var(--woo-ink-900);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-vendor-page .woo-vendor-grid .woo-vendor-card:hover .wv-cta {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
@media (max-width: 1024px) {
    body.woo-redesign .woo-vendor-page .woo-vendor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    body.woo-redesign .woo-vendor-page .woo-vendor-grid {
        grid-template-columns: 1fr;
    }
    body.woo-redesign .woo-vendor-page .woo-vendor-hero {
        padding: 24px;
    }
    body.woo-redesign .woo-vendor-page .woo-vendor-hero-stats {
        gap: 24px;
    }
}

/* ---- vendor shop-info card (banner header on an individual store page) ---- */
body.woo-redesign .woo-shop-banner-wrap {
    border-radius: var(--woo-radius-lg);
    overflow: hidden;
    position: relative;
}
body.woo-redesign .woo-shop-banner-img {
    border-radius: var(--woo-radius-lg);
}
body.woo-redesign .woo-shop-info-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-shop-info-card .seller-details {
    padding: 10px;
}
body.woo-redesign .woo-shop-info-logo {
    width: 90px;
    height: 90px;
    border-radius: var(--woo-radius-md);
    border: 3px solid var(--woo-white);
    box-shadow: var(--woo-shadow-sm);
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-shop-badge-closed {
    background: rgba(58, 58, 58, .85) !important;
    color: var(--woo-white) !important;
    border-radius: var(--woo-radius-md);
    font-size: 10.5px;
}
body.woo-redesign .woo-shop-info-name {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-shop-info-rating,
body.woo-redesign .woo-shop-info-stats {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-shop-info-actions .chat-with-seller-button.btn--primary {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-shop-info-actions .chat-with-seller-button.btn--primary:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
}
body.woo-redesign .woo-vendor-chat-modal .modal-content {
    border-radius: var(--woo-radius-lg);
    border: none;
}
body.woo-redesign .woo-vendor-chat-modal .modal-header {
    background: var(--woo-ink-900) !important;
    color: var(--woo-white);
    border-radius: var(--woo-radius-lg) var(--woo-radius-lg) 0 0;
}
body.woo-redesign .woo-vendor-chat-modal .modal-header .close {
    color: var(--woo-white);
}
body.woo-redesign .woo-vendor-chat-modal textarea.form-control {
    border-radius: var(--woo-radius-md);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-vendor-chat-modal .btn--primary {
    background: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
}

/* ---- vendor registration / onboarding flow ---- */
body.woo-redesign .woo-vendor-auth-page {
    background: linear-gradient(180deg, var(--woo-cream) 0%, var(--woo-olive-050) 100%);
}
body.woo-redesign .woo-vendor-auth-shell {
    background: var(--woo-white) !important;
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-md);
}
body.woo-redesign .woo-vendor-auth-form-card {
    border-radius: var(--woo-radius-lg) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-vendor-auth-page h3,
body.woo-redesign .woo-vendor-auth-page h4,
body.woo-redesign .woo-vendor-auth-page h5,
body.woo-redesign .woo-vendor-auth-page .section-title,
body.woo-redesign .woo-vendor-auth-page .section-title-style-2 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-vendor-auth-page .form-control {
    border-radius: var(--woo-radius-md);
    border-color: var(--woo-ink-100);
    padding: 11px 16px;
}
body.woo-redesign .woo-vendor-auth-page .form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-vendor-auth-page label {
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-vendor-auth-page .btn--primary,
body.woo-redesign .woo-vendor-auth-page .proceed-to-next-btn,
body.woo-redesign .woo-vendor-auth-page #vendor-apply-submit {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    border-radius: var(--woo-radius-pill) !important;
    font-weight: 600;
}
body.woo-redesign .woo-vendor-auth-page .btn--primary:hover,
body.woo-redesign .woo-vendor-auth-page .proceed-to-next-btn:hover {
    background: var(--woo-olive-600) !important;
    border-color: var(--woo-olive-600) !important;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-vendor-auth-page .bg-section--2 {
    background: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-vendor-auth-page .card {
    border-radius: var(--woo-radius-md);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-vendor-auth-page .accordion__custom .card-header {
    background: var(--woo-white);
}
body.woo-redesign .woo-vendor-auth-page .faq-title {
    color: var(--woo-ink-900);
    font-weight: 600;
}

/* ---- flash-deals listing page ---- */
body.woo-redesign .woo-flash-deals-page .woo-shop-breadcrumb {
    margin-top: 16px;
}

/* =====================================================================
   28) BLOG SECTION (phase 12b) — resources/themes/default/web-views/blogs/
       (index.blade.php, index-popular.blade.php, details.blade.php,
       blog-layouts.blade.php [standalone "app webview" layout, now also
       loads woo-redesign.css + fonts + `woo-redesign` body class so this
       section applies there too], and partials/*).
   ===================================================================== */
body.woo-redesign .woo-blog-page {
    font-family: 'Poppins', sans-serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-banner {
    background: linear-gradient(120deg, var(--woo-olive-050) 0%, var(--woo-cream) 100%) !important;
    border-radius: var(--woo-radius-lg) !important;
}
body.woo-redesign .woo-blog-banner-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-blog-banner-subtitle {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .woo-blog-tabs {
    flex-wrap: wrap;
}
body.woo-redesign .woo-blog-tab-link {
    border-radius: var(--woo-radius-pill) !important;
    border-color: var(--woo-ink-100) !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-700);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.woo-redesign .woo-blog-tab.active .woo-blog-tab-link {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
    color: var(--woo-white) !important;
}
body.woo-redesign .woo-blog-tab-link:hover {
    border-color: var(--woo-olive-500) !important;
}
body.woo-redesign .woo-blog-search-form .form-control {
    border-radius: var(--woo-radius-pill);
    border-color: var(--woo-ink-100);
}
body.woo-redesign .woo-blog-search-form .form-control:focus {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-blog-card {
    border-radius: var(--woo-radius-lg) !important;
    border: 1px solid var(--woo-ink-100) !important;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.woo-redesign .woo-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-300) !important;
}
body.woo-redesign .woo-blog-card_image {
    position: relative;
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-blog-card_category-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--woo-ink-900);
    color: var(--woo-white);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--woo-radius-pill);
    letter-spacing: .03em;
}
body.woo-redesign .woo-blog-card_title {
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-blog-card_title a {
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-card_excerpt {
    color: var(--woo-ink-500);
    font-size: 13px;
}
body.woo-redesign .woo-blog-card_date {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-blog-card--featured .woo-blog-card_image {
    max-height: 320px;
}
body.woo-redesign .woo-blog-sidebar-card {
    border-radius: var(--woo-radius-lg) !important;
    border-color: var(--woo-ink-100) !important;
    box-shadow: var(--woo-shadow-sm);
}
body.woo-redesign .woo-blog-sidebar-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-recent-post {
    padding: 8px 0;
    border-bottom: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-blog-recent-post:last-child {
    border-bottom: none;
}
body.woo-redesign .woo-blog-recent-post h6 a {
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-pagination .page-link {
    border-radius: var(--woo-radius-pill) !important;
    margin: 0 3px;
    border-color: var(--woo-ink-100);
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-blog-pagination .page-item.active .page-link {
    background: var(--woo-ink-900) !important;
    border-color: var(--woo-ink-900) !important;
}
body.woo-redesign .woo-blog-empty-state {
    border-radius: var(--woo-radius-lg) !important;
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-blog-empty-state_title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-empty-state_text {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-blog-download-app {
    border-radius: var(--woo-radius-lg);
    background-color: var(--woo-ink-900);
    background-size: cover;
    background-position: center;
    padding: 40px 24px;
}
body.woo-redesign .woo-blog-download-app_title {
    font-family: 'Fraunces', serif;
}
body.woo-redesign .woo-blog-download-app_btn {
    font-weight: 600;
    color: var(--woo-ink-900) !important;
}
/* details page */
body.woo-redesign .woo-blog-toc-card {
    border-radius: var(--woo-radius-lg) !important;
    border: 1px solid var(--woo-ink-100) !important;
}
body.woo-redesign .woo-blog-toc-title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .scrollspy-blog-details-menu a {
    color: var(--woo-ink-500);
    font-size: 13px;
}
body.woo-redesign .scrollspy-blog-details-menu a.active {
    color: var(--woo-olive-700);
    font-weight: 600;
}
body.woo-redesign .woo-blog-details_category {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
    border-radius: var(--woo-radius-pill) !important;
}
body.woo-redesign .woo-blog-details_title {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-details_meta {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-blog-details_content {
    font-size: 15px;
    line-height: 1.85;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-blog-details_content h2,
body.woo-redesign .woo-blog-details_content h3 {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-share-btn img,
body.woo-redesign .woo-blog-share-row .share-on-social-media img {
    border-radius: 50%;
    padding: 7px;
    background: var(--woo-olive-050);
    transition: background .2s ease, transform .2s ease;
}
body.woo-redesign .woo-blog-share-btn:hover img,
body.woo-redesign .woo-blog-share-row .share-on-social-media:hover img {
    background: var(--woo-olive-500);
    transform: translateY(-2px);
}
body.woo-redesign .woo-blog-share-heading,
body.woo-redesign .woo-blog-popular-heading {
    font-family: 'Fraunces', serif;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-blog-popular-more {
    color: var(--woo-olive-700);
    font-weight: 600;
}
/* app-embedded blog preloader */
body.woo-redesign .woo-app-blog-preloader {
    position: fixed;
    inset: 0;
    background: var(--woo-cream);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.woo-redesign .woo-app-blog-preloader .app-ball {
    background: var(--woo-olive-500) !important;
}
@media (max-width: 767.98px) {
    body.woo-redesign .woo-vendor-card .other-store-logo {
        width: 60px;
        height: 60px;
        margin-top: -30px;
    }
    body.woo-redesign .woo-blog-details_title {
        font-size: 20px;
    }
}

/* =====================================================================
   29) DISCOUNTED PRODUCTS PAGE (resources/themes/default/web-views/
   products/view.blade.php when $pageType === 'discounted', its hero
   partial _discounted-hero.blade.php, and the .woo-shop-page--discounted
   / search-page-header--discounted / .woo-home-style-grid modifier
   classes added to the shared view.blade.php / _product-list-header.
   blade.php / _ajax-products.blade.php partials).

   SCOPING: every rule is namespaced under body.woo-redesign plus one of
   the modifier classes above — all of them are only ever printed by
   Blade when $pageType === 'discounted', so this section cannot affect
   best-selling / top-rated / most-favorite / clearance-sale / any other
   route that reuses the same templates.

   The product card on this page is the homepage's own card component
   (resources/themes/default/theme-views/partials/_product-card.blade.php,
   already used by home.blade.php's carousels), included as-is — no
   markup was forked. .woo-home-style-grid is the wrapper class
   _ajax-products.blade.php adds around each grid item on this page only,
   giving 29.3's rules enough specificity to win over section 10's
   `body.woo-redesign .prod-card` shop-card rules further up this file
   (both target the same bare class names the homepage card uses).
   home.blade.php's card CSS relies on the unprefixed ink, olive, white,
   cream, radius and shadow custom properties (--ink-900, --olive-500,
   --white, --cream, --radius-md, --shadow-md, --rating, etc.), which
   are already declared globally in the shared layout
   (layouts/front-end/app.blade.php's own :root block) — nothing new
   was declared for them here.
   ===================================================================== */

/* ---- 29.1 hero banner ---- */
body.woo-redesign .woo-discounted-hero {
    background: linear-gradient(120deg, #fdf0f0, #f9e3dd);
    border-radius: var(--woo-radius-xl);
    padding: 44px 40px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
body.woo-redesign .woo-discounted-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}
body.woo-redesign .woo-discounted-hero-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c0562e;
}
body.woo-redesign .woo-discounted-hero-title {
    position: relative;
    z-index: 1;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-size: clamp(28px, 3.4vw, 42px);
    margin: 8px 0 10px;
    max-width: 640px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-discounted-hero-title em {
    font-style: italic;
    color: #c0562e;
}
body.woo-redesign .woo-discounted-hero-desc {
    position: relative;
    z-index: 1;
    color: var(--woo-ink-700);
    font-size: 15px;
    max-width: 560px;
    line-height: 1.6;
}
body.woo-redesign .woo-discounted-hero-promo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    background: var(--woo-ink-900);
    color: var(--woo-white);
    padding: 8px 18px;
    border-radius: var(--woo-radius-pill);
    font-size: 13px;
    font-weight: 600;
}
body.woo-redesign .woo-discounted-hero-promo span {
    color: var(--woo-olive-300);
}
@media (max-width: 640px) {
    body.woo-redesign .woo-discounted-hero {
        padding: 32px 24px;
    }
}

/* ---- 29.2 toolbar (full width now the sidebar is gone) ----
   Selector is qualified with .woo-shop-page (matching section 15.2's
   `body.woo-redesign .woo-shop-page .search-page-header` card rule) so
   this has equal specificity and, coming later in the file, wins —
   stripping the white card/border/shadow/padding so the toolbar sits
   flush on the page background as in the mockup. */
body.woo-redesign .woo-shop-page .search-page-header--discounted {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
body.woo-redesign .woo-deals-count {
    font-size: 14px;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-deals-sort {
    padding: 10px 16px;
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    font-family: inherit;
    font-size: 13px;
    color: var(--woo-ink-700);
    background: var(--woo-white);
    cursor: pointer;
}

/* ---- 29.3 product card: reuses the exact same .prod-card design already
   built for the homepage carousels (resources/themes/default/web-views/
   home.blade.php, theme-views/partials/_product-card.blade.php), copied
   verbatim rather than extracted, so the homepage file is not touched.

   home.blade.php's card CSS uses BARE selectors (.prod-card, .prod-media,
   .wish-btn, ...) that rely on the unprefixed :root tokens (--ink-900,
   --olive-500, ...) already defined globally by the shared layout
   (resources/themes/default/layouts/front-end/app.blade.php) — those
   tokens are available here too, so no palette values are re-declared.

   SCOPING: every rule below is qualified by `.woo-home-style-grid`, the
   wrapper class _ajax-products.blade.php adds around each grid item only
   when $pageType === 'discounted'. Bare `.prod-card` (used by the
   homepage) has lower specificity than this shop page's own
   `body.woo-redesign .prod-card` rules (section 10 above), so without
   this qualifier the shop page's card styling would win and the
   homepage look would not actually apply — the extra class name gives
   these rules enough specificity to take precedence instead. */
body.woo-redesign .woo-home-style-grid .prod-card {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.woo-redesign .woo-home-style-grid .prod-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--olive-300);
}
body.woo-redesign .woo-home-style-grid .prod-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 6;
    transition: height .25s ease;
}
body.woo-redesign .woo-home-style-grid .prod-card:has(span[style*="e8f5e9"])::before {
    height: 6px;
    background: linear-gradient(90deg, #2e7d32 0%, #7cc46a 100%);
}
body.woo-redesign .woo-home-style-grid .prod-card:has(span[style*="fff3e0"])::before {
    height: 6px;
    background: linear-gradient(90deg, #e65100 0%, #ff9a52 100%);
}
body.woo-redesign .woo-home-style-grid .prod-media {
    position: relative;
    height: 240px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
    background: transparent;
    overflow: hidden;
    perspective: 900px;
}
body.woo-redesign .woo-home-style-grid .prod-media .p-img {
    position: relative;
    z-index: 1;
    max-width: 82%;
    max-height: 82%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
body.woo-redesign .woo-home-style-grid .prod-card:hover .p-img {
    transform: scale(1.04);
}
body.woo-redesign .woo-home-style-grid .prod-media .p-emoji {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
    transition: transform .35s ease;
    filter: drop-shadow(0 12px 14px rgba(38, 36, 32, .16));
}
body.woo-redesign .woo-home-style-grid .prod-card:hover .p-emoji {
    transform: scale(1.12) rotate(-4deg);
}
body.woo-redesign .woo-home-style-grid .prod-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
}
body.woo-redesign .woo-home-style-grid .prod-tag span {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .03em;
}
body.woo-redesign .woo-home-style-grid .off-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    background: var(--olive-500);
    color: var(--ink-900);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .03em;
    z-index: 3;
}
body.woo-redesign .woo-home-style-grid .prod-tag ~ .off-badge {
    top: 38px;
}
body.woo-redesign .woo-home-style-grid .off-badge.new {
    background: var(--ink-900);
    color: var(--white);
}
body.woo-redesign .woo-home-style-grid .wish-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    background: var(--white);
    border: 1px solid var(--ink-100);
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ink-500);
    padding: 0 !important;
    overflow: hidden;
    line-height: 1 !important;
    transition: color .2s, transform .2s, border-color .2s, background .2s;
    z-index: 4;
}
body.woo-redesign .woo-home-style-grid .wish-btn:hover {
    transform: scale(1.12);
    color: #d0484f;
    border-color: #d0484f;
}
body.woo-redesign .woo-home-style-grid .wish-btn.active,
body.woo-redesign .woo-home-style-grid .wish-btn:has(.fa-heart) {
    color: #d0484f;
    border-color: #d0484f;
    background: #fdf0f0;
}
body.woo-redesign .woo-home-style-grid .wish-btn svg {
    width: 15px;
    height: 15px;
}
body.woo-redesign .woo-home-style-grid .wish-btn i {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 1 !important;
    display: inline-block !important;
}
body.woo-redesign .woo-home-style-grid .prod-body {
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(150deg, var(--olive-050) 0%, var(--ink-050) 100%);
}
body.woo-redesign .woo-home-style-grid .prod-body > a {
    text-decoration: none;
    color: inherit;
}
body.woo-redesign .woo-home-style-grid .prod-brand {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--olive-700);
    margin-bottom: 5px;
}
body.woo-redesign .woo-home-style-grid .prod-name {
    display: -webkit-box;
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4;
    margin-bottom: 2px;
    min-height: 20px;
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.woo-redesign .woo-home-style-grid .prod-size {
    font-size: 11.5px;
    color: var(--ink-500);
    margin-bottom: 7px;
}
body.woo-redesign .woo-home-style-grid .rating-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}
body.woo-redesign .woo-home-style-grid .rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--rating);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2.5px 7px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
body.woo-redesign .woo-home-style-grid .rating-chip svg {
    width: 9px;
    height: 9px;
    fill: currentColor;
}
body.woo-redesign .woo-home-style-grid .rating-count {
    font-size: 11px;
    color: var(--ink-500);
}
body.woo-redesign .woo-home-style-grid .prod-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}
body.woo-redesign .woo-home-style-grid .prod-price b {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink-900);
}
body.woo-redesign .woo-home-style-grid .prod-price s {
    font-size: 11.5px;
    color: var(--ink-300);
    text-decoration: line-through;
}
body.woo-redesign .woo-home-style-grid .prod-price .pct {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--olive-700);
}
body.woo-redesign .woo-home-style-grid .buy-btn {
    display: block;
    margin-top: auto;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--olive-500);
    color: var(--ink-900);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s, transform .2s;
}
body.woo-redesign .woo-home-style-grid .buy-btn:hover {
    background: var(--olive-600);
    transform: translateY(-1px);
}

/* =====================================================================
   30) SITE-WIDE PILL PAGINATION (resources/views/pagination/woo-pill.
   blade.php, the app-wide replacement for Laravel's bootstrap-4
   pagination view on every front-end list page: shop grid, blog,
   account orders/tickets/restock-requests/coupons, wallet, loyalty,
   wishlist, seller directory, brand list, ...). Markup uses bare
   anchors/spans (no .page-item/.page-link), so it is independent of
   the older bootstrap-4-shaped rules elsewhere in this file.
   ===================================================================== */
body.woo-redesign .woo-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}
body.woo-redesign .woo-pagination .woo-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
body.woo-redesign .woo-pagination .woo-page-num {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--woo-ink-700);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-pagination a.woo-page-num:hover {
    background: var(--woo-olive-100);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-pagination .woo-page-num.active {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-pagination .woo-page-num--dots {
    cursor: default;
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-pagination .btn.disabled {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}
body.woo-redesign .woo-pagination .btn.disabled:hover {
    transform: none;
}

/* =====================================================================
   31) AUTH PAGES — pixel-match reskin of UI-PROJECT-FOLDER/login.html
   and signup.html (resources/themes/default/web-views/customer-views/
   auth/{login,register}.blade.php + their shared partials/_email,
   _password, _remember-me, _sign-up-instruction).

   This supersedes section 20's lighter color/font-only pass for these
   two pages specifically: the Blade markup for login/register now
   uses the mockup's own structural classnames (auth-section, auth-box,
   auth-head, auth-card, field, pass-wrap, auth-row, check-lbl,
   auth-divider, social-grid, social-btn, auth-alt, auth-submit)
   directly, laid over the still-present original functional classes
   (form-group, form-control, invalid-feedback, login-card, btn--primary,
   social-media-login-btn, or-sign-in-with, custom-control-input) so nothing
   selector-bound in custom.js (`.customer-centralize-login-form` submit
   handler, `.otp-login-btn`/`.manual-login-btn` step toggle,
   `.auth-login-type-input`, `.auth-email-input`/`.auth-password-input`/
   `.phone-input-with-country-picker` required-attr toggling, `#si-email`,
   `#si-password`, `#customer-register-form` AJAX submit, `#inputChecked`→
   `#sign-up` disabled toggle) was renamed or removed. The password
   show/hide eye button uses a NEW class (`.pass-toggle-js`) with its own
   tiny inline script (see `_pass-toggle-script.blade.php`) instead of the
   old non-functional checkbox toggle, so it's a real, working improvement
   with no legacy handler to conflict with.
   ===================================================================== */

body.woo-redesign .woo-auth-page.auth-section {
    padding: 40px 0 64px;
    min-height: 55vh;
    display: flex;
    align-items: center;
}
body.woo-redesign .woo-auth-page .auth-box {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
body.woo-redesign .woo-auth-page .auth-box.wide {
    max-width: 640px;
}
body.woo-redesign .woo-auth-page .auth-head {
    text-align: center;
    margin-bottom: 26px;
}
body.woo-redesign .woo-auth-page .auth-head h1 {
    font-family: 'Fraunces', serif;
    font-size: clamp(26px, 3.2vw, 36px);
    color: var(--woo-ink-900);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
body.woo-redesign .woo-auth-page .auth-head-icon {
    height: 28px;
    width: 28px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
}
body.woo-redesign .woo-auth-page .auth-head p {
    color: var(--woo-ink-500);
    font-size: 15px;
}

/* ---- 31.1 card shell (overrides 20.2's plainer padding) ---- */
body.woo-redesign .woo-auth-page .auth-card.login-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-md);
    padding: 36px 34px;
}
@media (max-width: 575.98px) {
    body.woo-redesign .woo-auth-page .auth-card.login-card {
        padding: 26px 20px;
    }
}

/* ---- 31.2 fields (.field wraps label + .form-control + .field-error;
        overrides 20.3's input metrics to match the mockup exactly) ---- */
body.woo-redesign .woo-auth-page .field.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
body.woo-redesign .woo-auth-page .field > label {
    font-size: 13px;
    font-weight: 600;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-auth-page .form-control {
    padding: 14px 18px;
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    background: var(--woo-white);
    color: var(--woo-ink-900);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-auth-page .form-control::placeholder {
    color: var(--woo-ink-300);
}
body.woo-redesign .woo-auth-page .form-control:focus {
    outline: none;
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-auth-page .field.invalid .form-control {
    border-color: #d0484f;
}
body.woo-redesign .woo-auth-page .field.invalid .form-control:focus {
    box-shadow: 0 0 0 4px #fbe3e4;
}
body.woo-redesign .woo-auth-page .field-error.invalid-feedback {
    font-size: 12px;
    color: #d0484f;
    display: none;
}
body.woo-redesign .woo-auth-page .field.invalid .field-error {
    display: block;
}
body.woo-redesign .woo-auth-page .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ---- 31.3 password visibility toggle (new working button, replaces
        the old non-functional checkbox+icon in section 20.4) ---- */
body.woo-redesign .woo-auth-page .password-toggle.pass-wrap {
    position: relative;
}
body.woo-redesign .woo-auth-page .pass-wrap .form-control {
    padding-right: 46px;
}
body.woo-redesign .woo-auth-page .pass-toggle-js {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--woo-ink-500);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
}
body.woo-redesign .woo-auth-page .pass-toggle-js:hover {
    background: var(--woo-ink-050);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-auth-page .pass-toggle-js svg {
    width: 18px;
    height: 18px;
}
body.woo-redesign .woo-auth-page .pass-meter {
    height: 5px;
    border-radius: var(--woo-radius-pill);
    background: var(--woo-ink-100);
    margin-top: 9px;
    overflow: hidden;
}
body.woo-redesign .woo-auth-page .pass-meter i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: var(--woo-radius-pill);
    transition: width .25s ease, background .25s ease;
}
body.woo-redesign .woo-auth-page .pass-hint {
    font-size: 11.5px;
    color: var(--woo-ink-500);
    margin-top: 5px;
}

/* ---- 31.4 remember-me / forgot-password row + terms checkbox ---- */
body.woo-redesign .woo-auth-page .auth-row.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    gap: 10px;
    flex-wrap: wrap;
}
body.woo-redesign .woo-auth-page .check-lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--woo-ink-700);
    cursor: pointer;
    margin: 0;
}
body.woo-redesign .woo-auth-page .check-lbl.start {
    align-items: flex-start;
    line-height: 1.5;
    font-size: 12.5px;
    color: var(--woo-ink-500);
    margin-bottom: 22px;
}
body.woo-redesign .woo-auth-page .check-lbl input {
    accent-color: var(--woo-olive-600);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin: 0;
}
body.woo-redesign .woo-auth-page .check-lbl.start input {
    margin-top: 2px;
}
body.woo-redesign .woo-auth-page .check-lbl a {
    color: var(--woo-olive-700);
    font-weight: 500;
}
body.woo-redesign .woo-auth-page .auth-link {
    font-size: 13px;
    color: var(--woo-olive-700);
    font-weight: 500;
}
body.woo-redesign .woo-auth-page .auth-link:hover {
    color: var(--woo-olive-600);
}

/* ---- 31.5 primary submit button (overrides 20.7 sizing) ---- */
body.woo-redesign .woo-auth-page .btn--primary.auth-submit {
    width: 100%;
    padding: 16px;
    font-size: 15px;
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
}
body.woo-redesign .woo-auth-page .btn--primary.auth-submit:hover:not(:disabled) {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}

/* ---- 31.6 divider + social buttons ---- */
body.woo-redesign .woo-auth-page .auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--woo-ink-500);
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
}
body.woo-redesign .woo-auth-page .auth-divider::before,
body.woo-redesign .woo-auth-page .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--woo-ink-100);
}
body.woo-redesign .woo-auth-page .social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
body.woo-redesign .woo-auth-page .social-btn.social-media-login-btn {
    padding: 12px;
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    background: var(--woo-white);
    justify-content: center;
}
body.woo-redesign .woo-auth-page .social-btn.social-media-login-btn:hover {
    border-color: var(--woo-olive-500);
    background: var(--woo-olive-050);
}

/* ---- 31.7 bottom "sign up instead" / "sign in instead" link ---- */
body.woo-redesign .woo-auth-page .auth-alt {
    text-align: center;
    font-size: 14px;
    color: var(--woo-ink-500);
    margin-top: 22px;
}
body.woo-redesign .woo-auth-page .auth-alt a {
    color: var(--woo-olive-700);
    font-weight: 600;
}
body.woo-redesign .woo-auth-page .auth-alt a:hover {
    color: var(--woo-olive-600);
}

/* ---- 31.8 responsive ---- */
@media (max-width: 500px) {
    body.woo-redesign .woo-auth-page .field-row {
        grid-template-columns: 1fr;
    }
    body.woo-redesign .woo-auth-page .social-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   32b) WISHLIST PAGE — pixel-match follow-up (continues section 32,
   which lives earlier in the file right after section 18/CART PAGE —
   appended here instead of moved in place to avoid reflowing that block).
   Covers: "My Wishlist ♡ (N items)" heading wording, the real "Add to
   Bag" button (posts to route('cart.add'), see account-wishlist.blade.php
   @push('script')), badge text format ("X% OFF"), and the always-red
   heart/remove icon (every card on this page is, by definition, already
   wishlisted).
   ===================================================================== */
body.woo-redesign .woo-wishlist-heart {
    color: #e74c3c;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}
body.woo-redesign .woo-wishlist-count {
    font-size: 15px;
    color: var(--woo-ink-500);
    font-weight: 400;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .remove--icon {
    background: var(--woo-white) !important;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .remove--icon i {
    color: #e74c3c !important;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .remove--icon:hover {
    background: #fdf0f0 !important;
}
body.woo-redesign .woo-wishlist-page .wishlist-img .for-discount-value {
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
body.woo-redesign .woo-wishlist-page .wishlist-brand {
    display: block;
    color: var(--woo-olive-700) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
    margin-bottom: 3px;
}
body.woo-redesign .woo-wishlist-page .wishlist-brand a {
    color: inherit !important;
}
body.woo-redesign .woo-wishlist-page .wishlist-add-to-bag {
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    background: transparent;
    border: 1.5px solid var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    color: var(--woo-ink-900);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-wishlist-page .wishlist-add-to-bag:hover {
    background: var(--woo-ink-900);
    color: var(--woo-white);
}
body.woo-redesign .woo-wishlist-pagination {
    margin-top: 30px;
}

/* =====================================================================
   33) ACCOUNT PROFILE PAGE — pixel-match reskin of UI-PROJECT-FOLDER/
   account.html's page header (resources/themes/default/web-views/
   users-profile/user-account.blade.php).

   account.html itself renders a dashboard-overview variant (recent
   orders / default address / reward points) that has no equivalent in
   this app's data model for this route — user-account.blade.php is the
   real "edit my profile" form (name/email/phone/password/avatar), which
   the mockup's sidebar links to as "Settings" but never builds out. So
   only the shared page chrome (breadcrumb + big Fraunces page title)
   is pixel-matched here; the card below it already got its card/
   input/button treatment from section 22.2 in an earlier pass and is
   untouched. The shared `.woo-profile-aside` sidebar (section 21) is
   left as-is — it carries real navigation across 18 account pages.
   ===================================================================== */
body.woo-redesign .woo-account-crumb {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 10px;
    padding: 0 4px;
}
body.woo-redesign .woo-account-crumb a {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-account-crumb a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-account-crumb span {
    color: var(--woo-ink-900);
    font-weight: 500;
}
body.woo-redesign .woo-account-page-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    color: var(--woo-ink-900);
    letter-spacing: -.01em;
    margin: 0 4px 22px;
}

/* =====================================================================
   34) ALL CATEGORIES PAGE — rebuild of resources/themes/default/
   web-views/products/categories.blade.php to match UI-PROJECT-FOLDER/
   categories.html (this page had zero prior reskin work — no mockup
   sub-view like the account pages, so it's a real structural rebuild,
   not a chrome-only patch).

   Reuses the exact `.cat-grid`/`.cat-card`/`.cat-circle` widget already
   proven on the home page (home.blade.php's own inline <style>, section
   "CATEGORY CIRCLES") — duplicated here rather than shared, since home's
   version lives in an inline <style> block scoped to that file only.
   Kept the pre-existing `?search=` category-name filter (categories.html
   has no search box in its hero) as a compact pill search, matching the
   mega-nav's `.search-bar` styling rather than dropping it.
   ===================================================================== */
body.woo-redesign .woo-categories-page .woo-cat-hero {
    background: var(--woo-olive-050);
    border-bottom: 1px solid var(--woo-ink-100);
    padding: 34px 0 30px;
}
body.woo-redesign .woo-categories-page section.section {
    padding: 56px 0;
    overflow: hidden;
}
body.woo-redesign .woo-categories-page .woo-cat-crumb {
    font-size: 13px;
    color: var(--woo-ink-500);
    margin-bottom: 10px;
}
body.woo-redesign .woo-categories-page .woo-cat-crumb a {
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-categories-page .woo-cat-crumb a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-categories-page .woo-cat-crumb span {
    color: var(--woo-ink-900);
    font-weight: 500;
}
body.woo-redesign .woo-categories-page .woo-cat-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
body.woo-redesign .woo-categories-page .woo-cat-hero-row h1 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--woo-ink-900);
    margin: 0 0 8px;
}
body.woo-redesign .woo-categories-page .woo-cat-hero-row p {
    color: var(--woo-ink-500);
    max-width: 560px;
    margin: 0;
    font-size: 15px;
}
body.woo-redesign .woo-categories-page .woo-cat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--woo-white);
    border: 1.5px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-pill);
    padding: 6px 8px 6px 18px;
    flex: 0 1 320px;
    min-width: 220px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-categories-page .woo-cat-search:focus-within {
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 4px var(--woo-olive-100);
}
body.woo-redesign .woo-categories-page .woo-cat-search svg:first-child {
    color: var(--woo-ink-500);
    flex-shrink: 0;
}
body.woo-redesign .woo-categories-page .woo-cat-search input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-categories-page .woo-cat-search button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--woo-ink-900);
    color: var(--woo-white);
    border: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-categories-page .woo-cat-search button:hover {
    background: var(--woo-olive-600);
    color: var(--woo-ink-900);
}

/* ---- 34.1 section head + category-circle quick-browse row ---- */
body.woo-redesign .woo-categories-page .woo-section-head {
    margin-bottom: 28px;
}
body.woo-redesign .woo-categories-page .woo-cat-eyebrow {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-categories-page .woo-section-head h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--woo-ink-900);
    margin-top: 8px;
}
body.woo-redesign .woo-categories-page .cat-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 18px;
}
body.woo-redesign .woo-categories-page .cat-card {
    text-align: center;
    cursor: pointer;
}
body.woo-redesign .woo-categories-page .cat-circle {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--woo-white);
    border: 1.5px solid var(--woo-ink-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(30px, 3.2vw, 46px);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
body.woo-redesign .woo-categories-page .cat-circle img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    transition: transform .3s ease;
}
body.woo-redesign .woo-categories-page .cat-card:hover img {
    transform: scale(1.1);
}
body.woo-redesign .woo-categories-page .cat-card:hover .cat-circle {
    transform: translateY(-6px) scale(1.03);
    box-shadow: var(--woo-shadow-md);
    border-color: var(--woo-olive-500);
    background: var(--woo-olive-050);
}
body.woo-redesign .woo-categories-page .cat-card b {
    font-size: 13px;
    font-weight: 600;
    display: block;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-categories-page .cat-card span {
    font-size: 11px;
    color: var(--woo-ink-500);
}

/* ---- 34.2 detailed listing: one card per category + its sub-categories ---- */
body.woo-redesign .woo-categories-page .allcats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
body.woo-redesign .woo-categories-page .accat-card {
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-lg);
    padding: 22px;
    transition: box-shadow .2s ease, transform .2s ease;
}
body.woo-redesign .woo-categories-page .accat-card:hover {
    box-shadow: var(--woo-shadow-md);
    transform: translateY(-2px);
}
body.woo-redesign .woo-categories-page .accat-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--woo-ink-100);
}
body.woo-redesign .woo-categories-page .accat-ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--woo-olive-050);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}
body.woo-redesign .woo-categories-page .accat-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.woo-redesign .woo-categories-page .accat-head h3 {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-categories-page .accat-head span {
    font-size: 12.5px;
    color: var(--woo-olive-700);
    font-weight: 500;
}
body.woo-redesign .woo-categories-page .accat-view {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
    padding: 9px 18px;
    border-radius: var(--woo-radius-pill);
    background: var(--woo-olive-500);
    color: var(--woo-ink-900);
    font-size: 13px;
    font-weight: 600;
    transition: background .2s ease;
}
body.woo-redesign .woo-categories-page .accat-view:hover {
    background: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-categories-page .accat-subs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}
body.woo-redesign .woo-categories-page .accat-subs a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-categories-page .accat-subs a:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-categories-page .accat-subs a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--woo-olive-500);
    flex: none;
}

/* ---- 34.3 empty state ---- */
body.woo-redesign .woo-categories-page .woo-cat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    text-align: center;
}
body.woo-redesign .woo-categories-page .woo-cat-empty img {
    opacity: .6;
}
body.woo-redesign .woo-categories-page .woo-cat-empty h5 {
    color: var(--woo-ink-500);
    font-size: 14px;
    font-weight: 500;
}

/* ---- 34.4 responsive ---- */
@media (max-width: 1100px) {
    body.woo-redesign .woo-categories-page .cat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 760px) {
    body.woo-redesign .woo-categories-page .woo-cat-hero-row {
        align-items: stretch;
    }
    body.woo-redesign .woo-categories-page .woo-cat-search {
        flex-basis: 100%;
    }
    body.woo-redesign .woo-categories-page .allcats {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    body.woo-redesign .woo-categories-page .cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    body.woo-redesign .woo-categories-page .accat-subs {
        grid-template-columns: 1fr;
    }
    body.woo-redesign .woo-categories-page .accat-head .accat-view {
        display: none;
    }
}

/* ---- 35) DIGITAL PRODUCT DOWNLOAD — OTP verification modal (order tracking page) ---- */
body.woo-redesign .woo-otp-modal .modal-content {
    border: none;
    border-radius: var(--woo-radius-lg);
    box-shadow: var(--woo-shadow-lg);
    padding: 8px 8px 32px;
}
body.woo-redesign .woo-otp-modal .modal-header {
    padding-bottom: 0;
}
body.woo-redesign .woo-otp-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--woo-radius-pill);
    background: var(--woo-ink-050);
    color: var(--woo-ink-700);
    opacity: 1;
    transition: background .2s ease;
}
body.woo-redesign .woo-otp-modal-close:hover {
    background: var(--woo-ink-100);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-otp-content {
    padding: 0 24px;
}
body.woo-redesign .woo-otp-icon {
    max-width: 160px;
}
body.woo-redesign .woo-otp-title {
    font-family: var(--woo-font-display, inherit);
    color: var(--woo-ink-900);
    font-weight: 700;
}
body.woo-redesign .woo-otp-desc {
    color: var(--woo-ink-500);
    font-size: 14px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
body.woo-redesign .woo-otp-timer {
    color: var(--woo-olive-700) !important;
    font-size: 13px;
}
body.woo-redesign .woo-otp-fields .otp-field {
    width: 48px;
    height: 54px;
    padding: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-sm);
    color: var(--woo-ink-900);
    background: var(--woo-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.woo-redesign .woo-otp-fields .otp-field:focus {
    outline: none;
    border-color: var(--woo-olive-500);
    box-shadow: 0 0 0 3px var(--woo-olive-100);
}
body.woo-redesign .woo-otp-content .verify-message {
    color: #c0392b;
    font-size: 13px;
}
body.woo-redesign .woo-otp-actions .btn--primary {
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    border-radius: var(--woo-radius-pill);
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
body.woo-redesign .woo-otp-actions .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-white);
}
body.woo-redesign .woo-otp-actions .resend-otp-button {
    background: transparent;
    border-color: var(--woo-ink-100);
    color: var(--woo-ink-700);
}
body.woo-redesign .woo-otp-actions .resend-otp-button:hover {
    background: var(--woo-ink-050);
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-otp-actions .resend-otp-button:disabled {
    opacity: .5;
}
body.woo-redesign .woo-otp-content--failed .woo-otp-desc {
    max-width: 400px;
}
@media (max-width: 420px) {
    body.woo-redesign .woo-otp-fields .otp-field {
        width: 42px;
        height: 48px;
    }
}

/* =====================================================================
   36) ORDER TRACKING (guest) + DIGITAL PRODUCT DOWNLOAD (guest) — no
   UI-PROJECT-FOLDER mockup exists for either flow, so this is a fresh
   build reusing the exact same skeleton/tokens as the AUTH pages
   (section 31: auth-section/wrap/auth-box/auth-head/auth-card/
   field/field-row/btn--primary.auth-submit) since all three pages are,
   visually, the same shape: a centered card with a short form. Covers:
   - resources/themes/default/web-views/order/tracking-page.blade.php
     (GET /track-order — guest order-id + phone lookup form)
   - resources/themes/default/web-views/order/tracking.blade.php
     (GET /track-order/result-view, /track-order/last — re-search bar
     + status timeline + "View Order Details" modal trigger)
   - resources/themes/default/web-views/order/digital-product-download.
     blade.php (GET /digital-product-download-pos — guest order-id +
     email lookup form + ready-to-download list)
   All three already carry `.woo-auth-page` as an ancestor class (added
   to the outer <section>, not combined with `.auth-section` on the
   result/download pages, so the auth page's `min-height:55vh` centering
   rule — scoped to the compound `.woo-auth-page.auth-section` selector —
   only actually engages on the single-form lookup page; on the two
   pages with more content below the form it's a structural no-op since
   the block naturally grows past 55vh). No route/controller/JS/variable
   was touched — only Blade markup was re-wrapped with new classes
   layered next to the untouched functional ones (`@csrf`, input
   `name=`s, `getDownloadFileUsingFileUrl`, `data-file-path`, the
   `#order-details`/`#digital_product_order_otp_verify` modal ids, the
   `order_track-list`/`icon-svg`/`order-active-placed`/`order-step-next`
   classes already used identically by the account-order-details
   "track-order" tab in section 23.10 above).
   ===================================================================== */

/* ---- 36.1 shared lookup-form card (all 3 pages reuse section 31's
        .auth-box/.auth-head/.auth-card chrome via the shared .woo-auth-page
        ancestor; this just adds the page-specific extras) ---- */
body.woo-redesign .woo-auth-page .auth-head {
    position: relative;
}
body.woo-redesign .woo-auth-page .lookup-clear-link {
    position: absolute;
    top: -6px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--woo-ink-500);
}
body.woo-redesign .woo-auth-page .lookup-clear-link:hover {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-auth-page .lookup-clear-link .tio-refresh {
    color: inherit;
}

/* ---- 36.2 compact 3-up row (2 fields + inline submit) used by the
        tracking.blade.php re-search bar and the digital-download form —
        section 31's plain .field-row stays 2-up/stacked-button for the
        standalone /track-order page ---- */
body.woo-redesign .woo-auth-page .field-row.field-row-3 {
    grid-template-columns: 1fr 1fr auto;
    align-items: stretch;
}
body.woo-redesign .woo-auth-page .field-row.field-row-3 .btn--primary.auth-submit {
    width: auto;
    white-space: nowrap;
    padding: 0 26px;
}
@media (max-width: 640px) {
    body.woo-redesign .woo-auth-page .field-row.field-row-3 {
        grid-template-columns: 1fr;
    }
    body.woo-redesign .woo-auth-page .field-row.field-row-3 .btn--primary.auth-submit {
        width: 100%;
        padding: 14px;
    }
}

/* ---- 36.3 alert (session 'Error' flash on /track-order) ---- */
body.woo-redesign .woo-lookup-page .alert-danger {
    background: #fbe9e9;
    border: 1px solid #f0c4c4;
    color: #a13a3a;
    border-radius: var(--woo-radius-md);
    font-size: 13px;
    padding: 12px 16px;
    margin-bottom: 18px;
}
body.woo-redesign .woo-lookup-page .alert-danger .closet {
    float: right;
    cursor: pointer;
    font-weight: 700;
}

/* ---- 36.4 truck illustration (/track-order empty state) ---- */
body.woo-redesign .woo-lookup-page .lookup-illustration {
    text-align: center;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--woo-ink-100);
}
body.woo-redesign .woo-lookup-page .lookup-illustration img {
    max-width: 180px;
    opacity: .85;
}

/* ---- 36.5 track-order RESULT page (tracking.blade.php): result card +
        heading + timeline (timeline classes mirror section 23.10 1:1,
        same markup, different page wrapper) ---- */
body.woo-redesign .woo-track-page .track-result-card {
    max-width: 900px;
    margin: 34px auto 0;
    background: var(--woo-white);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-xl);
    box-shadow: var(--woo-shadow-md);
    padding: 34px 36px;
}
@media (max-width: 575.98px) {
    body.woo-redesign .woo-track-page .track-result-card {
        padding: 24px 18px;
    }
}
body.woo-redesign .woo-track-page .track-result-heading {
    text-align: center;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(20px, 2.6vw, 26px);
    color: var(--woo-ink-900);
    margin: 0 0 28px;
}
body.woo-redesign .woo-track-page .track-result-id {
    color: var(--woo-olive-700);
}
body.woo-redesign .woo-track-page .order-track_wrapper .icon-svg.bg-soft-5 {
    background: var(--woo-olive-050) !important;
}
body.woo-redesign .woo-track-page .order-track_wrapper li h6 {
    color: var(--woo-ink-900);
}
body.woo-redesign .woo-track-page .order-track_wrapper li .title-semidark {
    color: var(--woo-ink-500) !important;
}
body.woo-redesign .woo-track-page .order-track_wrapper li.order-active-placed .icon-svg,
body.woo-redesign .woo-track-page .order-track_wrapper li.order-step-next .icon-svg {
    background: var(--woo-olive-500) !important;
}
body.woo-redesign .woo-track-page .order-track_wrapper li.order-active-placed .icon-svg svg path,
body.woo-redesign .woo-track-page .order-track_wrapper li.order-step-next .icon-svg svg path {
    fill: var(--woo-ink-900);
}
body.woo-redesign .woo-track-page .order-track_wrapper .web-text-primary {
    color: var(--woo-olive-700) !important;
}
body.woo-redesign .woo-track-page .order-track_wrapper .border-left {
    border-color: var(--woo-ink-100) !important;
}
body.woo-redesign .woo-track-page .btn--primary {
    border-radius: var(--woo-radius-pill);
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
    font-weight: 600;
}
body.woo-redesign .woo-track-page .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}

/* ---- 36.6 order-details modal (#order-details, triggered from the
        track-result-card's "View Order Details" button) — CSS-token-only
        pass over the existing markup (payment/edit-history conditionals
        left completely untouched, only visual chrome restyled) ---- */
body.woo-redesign #order-details .modal-content {
    border-radius: var(--woo-radius-lg);
    border: none;
    box-shadow: var(--woo-shadow-lg);
}
body.woo-redesign #order-details .bg-light,
body.woo-redesign #order-details .light-box {
    background: var(--woo-ink-050) !important;
}
body.woo-redesign #order-details .rounded-10 {
    border-radius: var(--woo-radius-md) !important;
}
body.woo-redesign #order-details .__table thead.light-box tr {
    background: var(--woo-olive-050) !important;
}
body.woo-redesign #order-details table img.rounded.border {
    border-color: var(--woo-ink-100) !important;
    border-radius: var(--woo-radius-sm) !important;
}
body.woo-redesign #order-details .btn--primary {
    border-radius: var(--woo-radius-pill);
    background: var(--woo-ink-900);
    border-color: var(--woo-ink-900);
}
body.woo-redesign #order-details .btn--primary:hover {
    background: var(--woo-olive-600);
    border-color: var(--woo-olive-600);
    color: var(--woo-ink-900);
}
body.woo-redesign #order-details .__badge.soft-primary {
    background: var(--woo-olive-100) !important;
    color: var(--woo-olive-700) !important;
}

/* ---- 36.7 digital-product-download-pos: info banner + download list ---- */
body.woo-redesign .woo-download-page .download-info-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--woo-olive-050);
    border: 1px solid var(--woo-olive-100);
    border-radius: var(--woo-radius-md);
    padding: 16px 18px;
    font-size: 14px;
    color: var(--woo-ink-700);
    margin-top: 8px;
}
body.woo-redesign .woo-download-page .download-info-banner img {
    flex-shrink: 0;
    width: 22px;
}
body.woo-redesign .woo-download-page .download-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
body.woo-redesign .woo-download-page .download-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--woo-ink-050);
    border: 1px solid var(--woo-ink-100);
    border-radius: var(--woo-radius-md);
    padding: 12px 16px;
}
body.woo-redesign .woo-download-page .download-media {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
body.woo-redesign .woo-download-page .download-media a {
    color: var(--woo-ink-900);
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.woo-redesign .woo-download-page .download-thumb {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--woo-radius-sm);
    border: 1px solid var(--woo-ink-100);
    flex-shrink: 0;
}
body.woo-redesign .woo-download-page .download-action {
    flex-shrink: 0;
}