/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ─── Original: Custom thumbnail size in product image gallery ──────────────
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 * ─────────────────────────────────────────────────────────────────────────── */

/* DESKTOP */
.woocommerce .flex-control-thumbs {
    margin: 10px 30px 10px -10px !important;
    width: 100% !important;
    display: flex;
}
ol.flex-control-nav.flex-control-thumbs li {
    width: 15% !important;
}

/* PHONES */
@media (max-width: 414px) {
    ol.flex-control-nav.flex-control-thumbs li {
        width: 18% !important;
    }
}

/* TABLETS */
@media (min-width: 568px) and (max-width: 768px) {
    .woocommerce .flex-control-thumbs {
        margin: 10px 0px 10px -5px !important;
        width: 15% !important;
    }
    ol.flex-control-nav.flex-control-thumbs li {
        width: 90% !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce .flex-control-thumbs {
        margin: 10px 0px 10px -5px !important;
        width: 12% !important;
    }
    ol.flex-control-nav.flex-control-thumbs li {
        width: 100% !important;
    }
}

/* Product page image thumbnails on left side */
@media (min-width: 568px) {
    .woocommerce .flex-control-nav {
        position: absolute;
        top: -10px;
        left: 0px;
    }
    .flex-control-thumbs {
        display: flex;
        flex-direction: column;
    }
}
@media (min-width: 568px) and (max-width: 768px) {
    .woocommerce .flex-viewport {
        width: 86.5% !important;
        left: 100px !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce .flex-viewport {
        width: 87% !important;
        left: 95px !important;
    }
}
@media (min-width: 1025px) {
    .woocommerce .flex-viewport {
        width: 85% !important;
        left: 80px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODX.GR – Custom sidebar + topbar layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties ─────────────────────────────────────────────────── */
:root {
    --sidebar-width:    280px;   /* expanded width */
    --sidebar-narrow:   80px;    /* collapsed width (icons only) */
    --topbar-height:    100px;   /* ← updated from 70px */
    --sidebar-bg:       #C68DF0; /* light purple */
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-text:     #FFEDFE;
    --topbar-bg:        #ffffff;
    --topbar-border:    #e5e7eb;
    --transition-speed: 300ms;
    --mobile-header-height: 60px;
}

/* ── Reset Astra defaults that fight the layout ────────────────────────────── */
.ast-container,
.ast-flex,
#ast-fixed-header,
.ast-primary-header-bar {
    display: none !important;
}

/* ── Page-level offsets ─────────────────────────────────────────────────────
   Desktop (≥ 1025px):  content pushed right by full sidebar width            */
@media (min-width: 1025px) {
    #page {
        margin-left: 280px !important;
        margin-left: var(--sidebar-width) !important;
        padding-top:  100px !important;
        padding-top:  var(--topbar-height) !important;
        transition: margin-left var(--transition-speed) ease;
    }

    /* When sidebar is collapsed (body.open / body.opening) */
    body.open #page,
    body.opening #page {
        margin-left: 80px !important;
        margin-left: var(--sidebar-narrow) !important;
    }
}

/* Tablet (768px – 1024px): sidebar collapsed by default */
@media (min-width: 768px) and (max-width: 1024px) {
    #page {
        margin-left: 80px !important;
        margin-left: var(--sidebar-narrow) !important;
        padding-top:  100px !important;
        padding-top:  var(--topbar-height) !important;
        transition: margin-left var(--transition-speed) ease;
    }
}

/* Mobile (< 768px): no sidebar offset, add mobile header space */
@media (max-width: 767px) {
    #page {
        margin-left: 0 !important;
        padding-top: 60px !important;
        padding-top: var(--mobile-header-height) !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR
   NOTE: position:fixed !important beats any Elementor/Astra ancestor transform
   ════════════════════════════════════════════════════════════════════════════ */
.site-sidebar {
    position:   fixed !important;
    top:        0 !important;
    left:       0 !important;
    width:      280px !important;
    width:      var(--sidebar-width) !important;
    height:     100vh !important;
    background: #C68DF0 !important;
    background: var(--sidebar-bg) !important;
    z-index:    9000 !important;
    overflow:   hidden !important;
    display:    flex !important;
    flex-direction: column !important;
    transition: width var(--transition-speed) ease !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !important;
}

/* Collapsed (body.open / body.opening) */
body.open .site-sidebar,
body.opening .site-sidebar {
    width: 80px !important;
    width: var(--sidebar-narrow) !important;
}

/* ── Hover-to-expand on devices that support hover (desktop pointer) ───────── */
@media (hover: hover) and (pointer: fine) {
    body.open .site-sidebar:hover,
    body.opening .site-sidebar:hover {
        width: 280px !important;
        width: var(--sidebar-width) !important;
    }
    /* When hovered-open, show labels */
    body.open .site-sidebar:hover .nav-label,
    body.open .site-sidebar:hover .sidebar-title,
    body.opening .site-sidebar:hover .nav-label,
    body.opening .site-sidebar:hover .sidebar-title {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
}

/* Hidden off-screen on mobile */
body.left .site-sidebar {
    transform: translateX(-100%) !important;
}


/* ── Navigation list ────────────────────────────────────────────────────────── */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding:    100px 0 8px;   /* 100px gap at the top */
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
}

.sidebar-nav .nav-item {
    display: block;
    width:   100%;
}

.sidebar-nav .nav-item a {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     10px 16px;
    text-decoration: none;
    color:       #FFEDFE;
    color:       var(--sidebar-text);
    white-space: nowrap;
    border-radius: 0;
    transition:  background 0.15s ease;
    min-height:  54px;
}
.sidebar-nav .nav-item a:hover,
.sidebar-nav .nav-item.active a {
    background: rgba(255, 255, 255, 0.08);
    background: var(--sidebar-hover-bg);
}

/* SVG icons */
.sidebar-nav .nav-item svg {
    flex-shrink: 0;
    min-width:   38px;
    width:       38px;
    height:      38px;
}

/* Text labels */
.sidebar-nav .nav-label {
    font-size:   13px;
    font-weight: 500;
    color:       #FFEDFE;
    color:       var(--sidebar-text);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    opacity:     1;
    transform:   translateX(0);
    transition:  opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/* Hide labels in collapsed state */
body.open .sidebar-nav .nav-label,
body.opening .sidebar-nav .nav-label {
    opacity:   0;
    transform: translateX(-8px);
}


/* ════════════════════════════════════════════════════════════════════════════
   TOP BAR  (desktop + tablet)
   ─ Grid layout: logo (left) | search (center) | actions (right)
   NOTE: position:fixed !important + left !important beat Elementor transforms
   ════════════════════════════════════════════════════════════════════════════ */
.site-topbar {
    position:   fixed !important;
    top:        0 !important;
    right:      0 !important;
    height:     100px !important;
    height:     var(--topbar-height) !important;
    background: #ffffff !important;
    background: var(--topbar-bg) !important;
    border-bottom: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--topbar-border);
    z-index:    8900 !important;

    /* ── Grid: column 1 and 3 equal, column 2 (search) auto-sized ── */
    display:               grid !important;
    grid-template-columns: 1fr 3fr 1fr !important;
    align-items:           center !important;

    padding:    0 24px;
    gap:        250px;
    box-sizing: border-box;

    /* Width adapts to sidebar */
    left:       280px !important;
    left:       var(--sidebar-width) !important;
    transition: left var(--transition-speed) ease;
}

body.open .site-topbar,
body.opening .site-topbar {
    left: 80px !important;
    left: var(--sidebar-narrow) !important;
}

/* Hide top bar on mobile */
@media (max-width: 767px) {
    .site-topbar { display: none !important; }
}

/* ── Logo — grid column 1, left-aligned ────────────────────────────────────── */
.topbar-logo {
    display:      flex;
    align-items:  center;
    justify-self: start;   /* pin to left edge of its grid cell */
}
.topbar-logo img {
    max-height: 80px;      /* ← updated from 50px */
    width:      auto;
}

/* ── Search — grid column 2 (auto), truly centered ─────────────────────────── */
.topbar-search {
    position:   relative; /* dropdown is absolutely positioned inside */
    width:      100%;
    max-width:  1440px;
}
.topbar-search-form {
    display:      flex;
    align-items:  center;
    background:   #f3f4f6;
    border-radius: 8px;
    overflow:     hidden;
    border:       1px solid #e5e7eb;
    transition:   border-color 0.2s;
}
.topbar-search-form:focus-within {
    border-color: #C68DF0;
    border-color: var(--sidebar-bg);
    box-shadow:   0 0 0 2px rgba(198, 141, 240, 0.15);
}
.topbar-search-form input[type="search"] {
    flex:       1;
    border:     none;
    background: transparent;
    padding:    18px 20px;
    font-size:  18px;
    outline:    none;
    color:      #111827;
    min-width:  0;
}
.topbar-search-form input[type="search"]::placeholder { color: #9ca3af; }
.topbar-search-form button {
    border:     none;
    background: transparent;
    padding:    0 20px;
    cursor:     pointer;
    color:      #6b7280;
    display:    flex;
    align-items: center;
}
.topbar-search-form button:hover { color: #C68DF0; color: var(--sidebar-bg); }

/* ── Live search results dropdown ──────────────────────────────────────────── */
.topbar-search-results {
    position:  absolute;
    top:       calc(100% + 4px);
    left:      0;
    right:     0;
    background: #fff;
    border:    1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index:   9100;
    overflow:  hidden;
    display:   none; /* shown by JS */
}
.topbar-search-results.is-visible {
    display: block;
}
.search-result-item {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     10px 14px;
    text-decoration: none;
    color:       #111827;
    border-bottom: 1px solid #f3f4f6;
    transition:  background 0.15s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f9fafb; }
.search-result-item img,
.search-result-item .no-img {
    width:        100px;
    height:       100px;
    object-fit:   cover;
    border-radius: 6px;
    flex-shrink:  0;
    background:   #f3f4f6;
    display:      block;
}
.search-result-info {
    display:   flex;
    flex-direction: column;
    gap:       2px;
    min-width: 0;
}
.search-result-title {
    font-size:     13px;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.search-result-sku {
    font-size: 11px;
    color:     #9ca3af;
}
.search-result-price {
    font-size:   13px;
    font-weight: 600;
    color:       #C68DF0;
    color:       var(--sidebar-bg);
}

/* ── Actions — grid column 3, right-aligned ────────────────────────────────── */
.topbar-actions {
    display:      flex;
    align-items:  center;
    gap:          8px;
    flex-shrink:  0;
    justify-self: end;   /* pin to right edge of its grid cell */
}

/* shared button/link style */
.topbar-account,
.topbar-cart,
.topbar-wishlist {
    display:      flex;
    align-items:  center;
    gap:          6px;
    padding:      8px 12px;
    border-radius: 8px;
    color:        #374151;
    text-decoration: none;
    font-size:    13px;
    font-weight:  500;
    background:   transparent;
    border:       none;
    cursor:       pointer;
    transition:   background 0.15s ease, color 0.15s ease;
    position:     relative;
}
.topbar-account:hover,
.topbar-cart:hover,
.topbar-wishlist:hover {
    background: #f3f4f6;
    color:      #C68DF0;
    color:      var(--sidebar-bg);
}

/* SVG size — the HTML width/height attrs are the primary defence;
   these CSS rules are a secondary layer */
.topbar-account svg,
.topbar-cart svg,
.topbar-wishlist svg {
    width:      27px !important;
    height:     27px !important;
    max-width:  27px !important;
    max-height: 27px !important;
    fill:       currentColor;
    flex-shrink: 0;
    display:    inline-block;
}

/* Cart count badge */
.modx-cart-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      #C68DF0;
    background:      var(--sidebar-bg);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    border-radius:   50%;
    min-width:       18px;
    height:          18px;
    padding:         0 4px;
    line-height:     1;
}
/* Hide badge when 0 */
.modx-cart-count:empty,
.modx-cart-count[data-count="0"] {
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE HEADER  (visible only on mobile)
   NOTE: position:fixed !important beats Elementor transforms
   ════════════════════════════════════════════════════════════════════════════ */
.site-mobile-header {
    display: none !important;
}
@media (max-width: 767px) {
    .site-mobile-header {
        display:      flex !important;
        align-items:  center !important;
        position:     fixed !important;
        top:          0 !important;
        left:         0 !important;
        right:        0 !important;
        height:       60px !important;
        height:       var(--mobile-header-height) !important;
        background:   #fff !important;
        border-bottom: 1px solid #e5e7eb;
        padding:      0 16px;
        z-index:      9100 !important;
        gap:          12px;
        box-shadow:   0 1px 4px rgba(0,0,0,0.06);
    }
    .mobile-logo {
        flex:  1;
        display: flex;
        justify-content: center;
    }
    .mobile-logo img {
        max-height: 36px;
        width:      auto;
    }
    .mobile-burger {
        background:  none;
        border:      none;
        cursor:      pointer;
        padding:     4px;
        color:       #374151;
        flex-shrink: 0;
    }
    .mobile-actions {
        display:     flex;
        align-items: center;
        gap:         4px;
        flex-shrink: 0;
    }
    .mobile-actions a,
    .mobile-actions button {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           36px;
        height:          36px;
        border-radius:   50%;
        background:      none;
        border:          none;
        cursor:          pointer;
        color:           #374151;
        position:        relative;
        padding:         0;
    }
    .mobile-actions a:hover,
    .mobile-actions button:hover {
        background: #f3f4f6;
    }
    .mobile-actions svg {
        fill: currentColor;
    }
    /* Mobile cart count badge */
    .mobile-actions .modx-cart-count {
        position:  absolute;
        top:       -2px;
        right:     -2px;
        font-size: 10px;
        min-width: 16px;
        height:    16px;
    }

    /* Slide-in sidebar on mobile — !important beats Elementor */
    .site-sidebar {
        width:      280px !important;
        width:      var(--sidebar-width) !important;
        transform:  translateX(-100%) !important;
        transition: transform var(--transition-speed) ease !important;
        z-index:    9500 !important;
    }
    body:not(.left) .site-sidebar {
        transform: translateX(0) !important;
    }
}

@media (min-width: 768px) {
    .site-mobile-header { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   MINI-CART PANEL
   NOTE: transform:translateX(100%) !important keeps it hidden until .open
   ════════════════════════════════════════════════════════════════════════════ */
.modx-mini-cart {
    position:   fixed !important;
    top:        0 !important;
    right:      0 !important;
    width:      360px !important;
    max-width:  100vw !important;
    height:     100vh !important;
    background: #fff !important;
    z-index:    10000 !important;
    transform:  translateX(100%) !important;
    transition: transform var(--transition-speed) ease !important;
    display:    flex !important;
    flex-direction: column !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.modx-mini-cart.open {
    transform: translateX(0) !important;
}

.modx-mini-cart-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 20px 16px;
    border-bottom:   1px solid #e5e7eb;
    flex-shrink:     0;
}
.modx-mini-cart-header h3 {
    margin:      0;
    font-size:   18px;
    font-weight: 600;
    color:       #111827;
}
#modx-cart-close {
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       6px;
    border-radius: 6px;
    color:         #6b7280;
    display:       flex;
    align-items:   center;
    transition:    background 0.15s;
}
#modx-cart-close:hover { background: #f3f4f6; color: #111827; }

.modx-mini-cart-body {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
}

/* WooCommerce mini-cart inner styles */
.modx-mini-cart-body .woocommerce-mini-cart {
    list-style: none;
    padding:    0;
    margin:     0;
}
.modx-mini-cart-body .woocommerce-mini-cart-item {
    display:       flex;
    gap:           12px;
    padding:       12px 0;
    border-bottom: 1px solid #f3f4f6;
}
.modx-mini-cart-body .woocommerce-mini-cart-item img {
    width:        64px;
    height:       64px;
    object-fit:   cover;
    border-radius: 6px;
    flex-shrink:  0;
}
.modx-mini-cart-body .woocommerce-mini-cart-item .remove {
    font-size:       18px;
    color:           #9ca3af;
    text-decoration: none;
    line-height:     1;
}
.modx-mini-cart-body .woocommerce-mini-cart-item .remove:hover { color: #ef4444; }

.modx-mini-cart-body .woocommerce-mini-cart__total {
    font-weight: 600;
    font-size:   15px;
    padding:     12px 0 4px;
    border-top:  1px solid #e5e7eb;
}
.modx-mini-cart-body .woocommerce-mini-cart__buttons {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     12px;
}
.modx-mini-cart-body .woocommerce-mini-cart__buttons .button,
.modx-mini-cart-body .woocommerce-mini-cart__buttons a.button {
    display:         block;
    text-align:      center;
    padding:         12px;
    border-radius:   8px;
    font-weight:     600;
    font-size:       14px;
    text-decoration: none;
    transition:      background 0.15s, color 0.15s;
}
.modx-mini-cart-body .woocommerce-mini-cart__buttons .button:first-child {
    background: #f3f4f6;
    color:      #374151;
}
.modx-mini-cart-body .woocommerce-mini-cart__buttons .button:first-child:hover {
    background: #e5e7eb;
}
.modx-mini-cart-body .woocommerce-mini-cart__buttons .checkout {
    background: #C68DF0;
    background: var(--sidebar-bg);
    color:      #fff !important;
}
.modx-mini-cart-body .woocommerce-mini-cart__buttons .checkout:hover {
    background: #581c87;
}

/* Cart overlay */
.modx-cart-overlay {
    display:    none !important;
    position:   fixed !important;
    inset:      0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index:    9999 !important;
    transition: opacity var(--transition-speed) ease;
}
.modx-cart-overlay.open { display: block !important; }

/* Prevent body scroll when cart is open */
body.cart-open { overflow: hidden; }


/* ════════════════════════════════════════════════════════════════════════════
   TABLET ADJUSTMENTS  (768px – 1024px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-sidebar {
        width: 80px !important;
        width: var(--sidebar-narrow) !important; /* collapsed by default */
    }

    .site-topbar {
        left: 80px !important;
        left: var(--sidebar-narrow) !important;
    }
    body.open .site-topbar,
    body.opening .site-topbar {
        left: 80px !important;
        left: var(--sidebar-narrow) !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   BUTTONS — remove Astra default border-radius and box-shadow
   ════════════════════════════════════════════════════════════════════════════ */
button,
.ast-button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border-radius: 0 !important;
    box-shadow:    none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MISC: hide the Astra default header container if it leaks through
   ════════════════════════════════════════════════════════════════════════════ */
#ast-desktop-header,
#masthead,
.ast-site-header-wrap,
.main-header-bar-wrap,
.ast-primary-sticky-header {
    display: none !important;
}

/* Ensure Elementor page content has correct spacing inside #content */
.elementor-page .site-content > .elementor {
    padding: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   WOO MY ACCOUNT — LOGIN FORM
   ════════════════════════════════════════════════════════════════════════════ */

/* Login / forgot-password page: narrow centred card (NOT logged in) */
.woocommerce-account:not(.logged-in) .woocommerce {
    max-width: 480px;
    margin:    48px auto;
}

/* Dashboard: full-width flex layout (logged in) */
.woocommerce-account.logged-in .woocommerce {
    max-width:   none !important;
    margin:      32px !important;
    display:     flex !important;
    gap:         24px !important;
    align-items: flex-start !important;
}

/* ── Collapse WooCommerce 2-column layout (login + register side by side) ── */
.woocommerce-account .col2-set {
    display: block !important;
    width:   100% !important;
}
.woocommerce-account .col2-set .u-column1,
.woocommerce-account .col2-set .u-column2 {
    width:    100% !important;
    float:    none !important;
    padding:  0 !important;
}
/* Hide the WooCommerce H2 headings — our tabs replace them */
.woocommerce-account .col2-set h2 {
    display: none !important;
}

/* ── Tab switcher ── */
.modx-account-card {
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 16px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.07);
    overflow:      hidden;
}

.modx-account-tabs {
    display:       flex;
    border-bottom: 1.5px solid #e5e7eb;
}

.modx-tab {
    flex:            1;
    padding:         16px;
    background:      #f9fafb;
    border:          none !important;
    border-radius:   0 !important;
    box-shadow:      none !important;
    font-size:       14px;
    font-weight:     600;
    color:           #6b7280;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s;
    letter-spacing:  0.02em;
}
.modx-tab:first-child {
    border-right: 1.5px solid #e5e7eb !important;
}
.modx-tab.is-active {
    background: #fff;
    color:      #C68DF0;
}
.modx-tab:hover:not(.is-active) {
    background: #f3f4f6;
    color:      #374151;
}

/* The form card — on the form itself (fallback when only login exists)
   and on the JS wrapper when both login+register are present            */
.woocommerce-form-login,
.modx-account-card {
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 16px !important;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.07) !important;
    overflow:      hidden;
}
.woocommerce-form-login {
    padding: 40px !important;
}
/* When wrapped by JS, remove duplicate border/shadow from individual forms */
.modx-account-card .woocommerce-form-login,
.modx-account-card .woocommerce-form-register {
    border:     none !important;
    box-shadow: none !important;
    padding:    40px !important;
}

/* Labels */
.woocommerce-form-login .woocommerce-form__label,
.woocommerce-form-register .woocommerce-form__label {
    display:        block;
    font-size:      13px;
    font-weight:    600;
    color:          #374151;
    margin-bottom:  6px;
    letter-spacing: 0.02em;
}

/* Text / email / password inputs */
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
    width:         100%;
    padding:       13px 16px !important;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size:     15px !important;
    color:         #111827;
    background:    #f9fafb;
    box-shadow:    none !important;
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.2s, box-shadow 0.2s;
}
.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="email"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-register input[type="text"]:focus,
.woocommerce-form-register input[type="email"]:focus,
.woocommerce-form-register input[type="password"]:focus {
    border-color: #C68DF0 !important;
    box-shadow:   0 0 0 3px rgba(198, 141, 240, 0.18) !important;
    background:   #fff;
}

/* ── Fix eye button: contained inside the password field ── */
/* The WC structure is: span.woocommerce-input-wrapper > span.password-input > input + span.show-password-input */
.woocommerce-form-login .woocommerce-input-wrapper {
    display: block !important;
    width:   100% !important;
}
.woocommerce-form-login .password-input {
    position: relative !important;
    display:  block !important;
    width:    100% !important;
}
.woocommerce-form-login .password-input input[type="password"] {
    padding-right: 50px !important;
    width:         100% !important;
    box-sizing:    border-box !important;
}
.woocommerce-form-login .show-password-input {
    position:        absolute !important;
    right:           1px !important;
    top:             1px !important;
    bottom:          1px !important;
    width:           44px !important;
    background:      transparent !important;
    border:          none !important;
    border-radius:   0 7px 7px 0 !important;
    box-shadow:      none !important;
    margin:          0 !important;
    padding:         0 !important;
    cursor:          pointer;
    color:           #9ca3af;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    line-height:     1 !important;
    transition:      color 0.15s;
    z-index:         2;
}
.woocommerce-form-login .show-password-input:hover {
    color:       #C68DF0;
    background:  rgba(198, 141, 240, 0.07) !important;
}
.woocommerce-form-login .show-password-input::before {
    font-size:   17px;
    line-height: 1;
}

/* Remember me */
.woocommerce-form-login .woocommerce-form__label-for-checkbox {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    color:       #6b7280;
    cursor:      pointer;
}
.woocommerce-form-login .woocommerce-form__input-checkbox {
    width:        16px;
    height:       16px;
    accent-color: #C68DF0;
    flex-shrink:  0;
}

/* Submit buttons */
.woocommerce-form-register .woocommerce-form-register__submit {
    width:          100% !important;
    padding:        14px !important;
    background:     #C68DF0 !important;
    color:          #fff !important;
    font-size:      15px !important;
    font-weight:    600;
    border:         none !important;
    border-radius:  8px !important;
    cursor:         pointer;
    box-shadow:     none !important;
    letter-spacing: 0.02em;
    transition:     background 0.2s;
}
.woocommerce-form-register .woocommerce-form-register__submit:hover {
    background: #a855f7 !important;
}

/* Form row spacing — register */
.woocommerce-form-register p {
    margin-bottom: 20px;
}

/* Submit button */
.woocommerce-form-login .woocommerce-form-login__submit {
    width:          100% !important;
    padding:        14px !important;
    background:     #C68DF0 !important;
    color:          #fff !important;
    font-size:      15px !important;
    font-weight:    600;
    border:         none !important;
    border-radius:  8px !important;
    cursor:         pointer;
    box-shadow:     none !important;
    letter-spacing: 0.02em;
    transition:     background 0.2s;
}
.woocommerce-form-login .woocommerce-form-login__submit:hover {
    background: #a855f7 !important;
}

/* Lost password link */
.woocommerce-LostPassword {
    margin-top: 12px;
    text-align: center;
}
.woocommerce-LostPassword a {
    font-size:       13px;
    color:           #C68DF0;
    text-decoration: none;
}
.woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* Form row spacing */
.woocommerce-form-login p {
    margin-bottom: 20px;
}
.woocommerce-form-login p:last-child {
    margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   WOO MY ACCOUNT — DASHBOARD  (logged-in view)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Left nav panel ── */
.woocommerce-MyAccount-navigation {
    width:         220px;
    flex-shrink:   0;
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin:     0;
    padding:    8px 0;
}
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #f3f4f6;
}
.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation li a {
    display:         block;
    padding:         14px 20px;
    color:           #374151;
    text-decoration: none;
    font-size:       14px;
    font-weight:     500;
    transition:      background 0.15s, color 0.15s, padding-left 0.15s;
    border-left:     3px solid transparent;
}
.woocommerce-MyAccount-navigation li a:hover {
    background:   rgba(198, 141, 240, 0.08);
    color:        #C68DF0;
    padding-left: 23px;
}
.woocommerce-MyAccount-navigation li.is-active a {
    background:   rgba(198, 141, 240, 0.12);
    color:        #C68DF0;
    font-weight:  600;
    border-left:  3px solid #C68DF0;
    padding-left: 17px;
}

/* ── Right content card ── */
.woocommerce-MyAccount-content {
    flex:          1;
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 12px;
    padding:       32px;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
    min-width:     0;
    font-size:     14px;
    color:         #374151;
    line-height:   1.7;
}
.woocommerce-MyAccount-content strong {
    color:       #111827;
    font-weight: 600;
}
.woocommerce-MyAccount-content a {
    color:           #C68DF0;
    text-decoration: none;
}
.woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

/* ── Orders table ── */
.woocommerce-MyAccount-orders.shop_table {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
}
.woocommerce-MyAccount-orders thead th {
    padding:        10px 14px;
    background:     #f9fafb;
    border-bottom:  2px solid #e5e7eb;
    color:          #6b7280;
    font-size:      12px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align:     left;
}
.woocommerce-MyAccount-orders tbody td {
    padding:       12px 14px;
    border-bottom: 1px solid #f3f4f6;
    color:         #374151;
}
.woocommerce-MyAccount-orders tbody tr:last-child td {
    border-bottom: none;
}
.woocommerce-MyAccount-orders tbody tr:hover td {
    background: #fafafa;
}
.woocommerce-MyAccount-orders .button {
    padding:       6px 14px !important;
    background:    #C68DF0 !important;
    color:         #fff !important;
    border-radius: 6px !important;
    font-size:     12px !important;
    font-weight:   600;
}
.woocommerce-MyAccount-orders .button:hover {
    background: #b87de8 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   WOO MY ACCOUNT — FORGOT PASSWORD FORM
   ════════════════════════════════════════════════════════════════════════════ */

/* Card wrapper — same look as login */
.woocommerce-account .woocommerce-ResetPassword {
    background:    #fff;
    border:        1.5px solid #e5e7eb;
    border-radius: 16px !important;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.07) !important;
    padding:       40px !important;
    box-sizing:    border-box;
}

/* Intro paragraph */
.woocommerce-ResetPassword > p:first-child {
    font-size:     14px;
    color:         #6b7280;
    margin-bottom: 28px;
    line-height:   1.6;
}
.woocommerce-ResetPassword > p:first-child a {
    color:           #C68DF0;
    text-decoration: none;
}
.woocommerce-ResetPassword > p:first-child a:hover {
    text-decoration: underline;
}

/* Label */
.woocommerce-ResetPassword .woocommerce-form__label {
    display:        block;
    font-size:      13px;
    font-weight:    600;
    color:          #374151;
    margin-bottom:  6px;
    letter-spacing: 0.02em;
}

/* Row — full width so input stretches properly */
.woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-ResetPassword .woocommerce-input-wrapper {
    display:    block !important;
    width:      100% !important;
    margin-bottom: 20px;
}

/* Input field — full width of card */
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword .woocommerce-Input {
    width:         100% !important;
    padding:       13px 16px !important;
    border:        1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size:     15px !important;
    color:         #111827;
    background:    #f9fafb;
    box-shadow:    none !important;
    outline:       none;
    box-sizing:    border-box !important;
    transition:    border-color 0.2s, box-shadow 0.2s;
}
.woocommerce-ResetPassword input[type="text"]:focus {
    border-color: #C68DF0 !important;
    box-shadow:   0 0 0 3px rgba(198, 141, 240, 0.18) !important;
    background:   #fff;
}

/* Submit button — sidebar purple */
.woocommerce-ResetPassword input[type="submit"],
.woocommerce-ResetPassword button[type="submit"] {
    width:          100% !important;
    padding:        14px !important;
    background:     #C68DF0 !important;
    color:          #fff !important;
    font-size:      15px !important;
    font-weight:    600;
    border:         none !important;
    border-radius:  8px !important;
    cursor:         pointer;
    box-shadow:     none !important;
    letter-spacing: 0.02em;
    transition:     background 0.2s;
    margin-top:     8px;
    display:        block;
}
.woocommerce-ResetPassword input[type="submit"]:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
    background: #b87de8 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE SEARCH BAR  (slides in below the mobile header)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Search icon button inside .mobile-actions */
    .mobile-search-toggle {
        display:         flex !important;
        align-items:     center;
        justify-content: center;
        width:           36px;
        height:          36px;
        border-radius:   50%;
        background:      none;
        border:          none;
        cursor:          pointer;
        color:           #374151;
        padding:         0;
        flex-shrink:     0;
    }
    .mobile-search-toggle:hover { background: #f3f4f6; }
    .mobile-search-toggle svg   { fill: currentColor; }

    /* The slide-down search bar */
    .site-mobile-search {
        position:   fixed !important;
        top:        60px !important;
        top:        var(--mobile-header-height) !important;
        left:       0 !important;
        right:      0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e5e7eb;
        padding:    10px 16px;
        z-index:    9090 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);

        /* Hidden by default — slide up */
        transform:  translateY(-110%) !important;
        transition: transform 0.25s ease;
    }
    .site-mobile-search.is-open {
        transform: translateY(0) !important;
    }

    /* Inner form wrapper */
    .mobile-search-form {
        display:       flex;
        align-items:   center;
        background:    #f3f4f6;
        border:        1.5px solid #e5e7eb;
        border-radius: 8px;
        overflow:      hidden;
        transition:    border-color 0.2s;
    }
    .mobile-search-form:focus-within {
        border-color: #C68DF0;
        box-shadow:   0 0 0 2px rgba(198, 141, 240, 0.15);
    }
    .mobile-search-input {
        flex:       1;
        border:     none !important;
        background: transparent !important;
        padding:    12px 14px !important;
        font-size:  15px !important;
        outline:    none !important;
        color:      #111827;
        min-width:  0;
        box-shadow: none !important;
    }
    .mobile-search-input::placeholder { color: #9ca3af; }
    .mobile-search-btn {
        border:     none;
        background: transparent;
        padding:    0 14px;
        cursor:     pointer;
        color:      #6b7280;
        display:    flex;
        align-items: center;
        height:     44px;
    }
    .mobile-search-btn:hover { color: #C68DF0; }
    .mobile-search-btn svg   { fill: currentColor; }

    /* Results dropdown below the search bar */
    .mobile-search-results {
        position:   relative;
        left:       auto;
        right:      auto;
        top:        6px;
        background: #fff;
        border:     1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        overflow:   hidden;
        display:    none;
        max-height: 60vh;
        overflow-y: auto;
    }
    .mobile-search-results.is-visible { display: block; }

    /* Give page content space when search bar is open */
    body.mobile-search-open #page {
        padding-top: calc(60px + 64px) !important; /* mobile header + search bar */
    }
}