/**
 * ROZE BioHealth — Shop Page CSS Customizations
 * Path: /wp-content/themes/supro-child/css/roze-shop-page.css
 */

:root {
    --rs-cream: #F2EDE3;
    --rs-cream-d: #E8E0D2;
    --rs-cream-m: #EDE7DA;
    --rs-cream-dp: #DDD5C5;
    --rs-black: #0F0F0F;
    --rs-dark: #1A1A1A;
    --rs-mid: #6A6A62;
    --rs-light: #9A9A90;
    --rs-white: #FAFAF7;
    --rs-pure-white: #FFFFFF;
    --rs-satoshi: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --rs-recia: "Recia", "Georgia", serif;
    --rs-border: rgba(0, 0, 0, 0.08);
    --rs-transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─────────────────────────────────────────────────────────────
   TOP ANNOUNCEMENT BAR — STYLE INJECTION
   ───────────────────────────────────────────────────────────────*/
.ann-bar {
    background-color: var(--rs-black) !important;
    padding: 8px 6% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    z-index: 99999 !important;
}
.ann-bar span {
    font-family: var(--rs-satoshi) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(250, 250, 247, 0.85) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.ann-bar ion-icon {
    font-size: 14px !important;
    color: #FAFAF7 !important;
}
.ann-sep {
    width: 1px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.15) !important;
}
@media (max-width: 991px) {
    .ann-bar {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .ann-sep {
        display: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────
   1. GLOBAL CANVAS, LAYOUT WRAPPERS & TYPOGRAPHY
   ───────────────────────────────────────────────────────────────*/
body.archive.post-type-archive-product,
body.tax-product_cat,
body.archive.post-type-archive-product #content.site-content,
body.tax-product_cat #content.site-content {
    background-color: var(--rs-cream) !important;
    font-family: var(--rs-satoshi);
}

/* FORCE ZERO CURVES GLOBALLY ON SHOP AND ARCHIVES */
body.archive.post-type-archive-product *,
body.tax-product_cat *,
.roze-shop-card,
.roze-shop-card *,
.card-thumbnail-wrapper,
.card-thumbnail-wrapper *,
.roze-card-inner,
.roze-card-inner *,
.widget,
.widget *,
.mobile-categories-bar,
.mobile-categories-bar *,
#primary-sidebar,
#primary-sidebar *,
#cart-panel,
#cart-panel * {
    border-radius: 0 !important;
}

/* Strict sentence-case casing overrides */
.card-btn,
.card-btn *,
.select-options-btn,
.select-options-btn *,
.card-btn-text,
.card-btn-text *,
.card-category,
.card-category *,
.toggle-btn,
.toggle-btn * {
    text-transform: none !important;
}


/* Set spacing and layout padding */
.archive.post-type-archive-product .site-content > .container-fluid,
.woocommerce-shop .site-content > .container-fluid,
.tax-product_cat .site-content > .container-fluid {
    padding-left: 16% !important;
    padding-right: 16% !important;
    padding-top: 0 !important;
    padding-bottom: 80px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Force override of Supro's default .site-content padding-top (40px) */
body.archive.post-type-archive-product .site-content,
body.tax-product_cat .site-content {
    padding-top: 0 !important;
}

/* Two-column layout grid using Flexbox (Desktop only) */
@media (min-width: 992px) {
    .archive.post-type-archive-product .site-content > .container-fluid > .row,
    .tax-product_cat .site-content > .container-fluid > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 40px !important;
    }
    .archive.post-type-archive-product .site-content > .container-fluid > .row::before,
    .archive.post-type-archive-product .site-content > .container-fluid > .row::after,
    .tax-product_cat .site-content > .container-fluid > .row::before,
    .tax-product_cat .site-content > .container-fluid > .row::after {
        display: none !important;
        content: none !important;
    }
    .archive.post-type-archive-product #primary.content-area,
    .tax-product_cat #primary.content-area {
        order: 2 !important;
        flex: 0 0 calc(82% - 40px) !important; /* Maximized width */
        max-width: calc(82% - 40px) !important;
        padding: 0 !important;
    }
    .archive.post-type-archive-product #primary-sidebar,
    .tax-product_cat #primary-sidebar {
        order: 1 !important;
        flex: 0 0 18% !important; /* Reduced sidebar width */
        max-width: 18% !important;
        padding: 0 !important;
    }
}

/* Hide Supro catalog page-header + any WPBakery empty sections on shop/category pages.
   These create the empty gap above our custom .bc breadcrumb strip. */
body.tax-product_cat .vc_row-full-width {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}
.woocommerce-products-header {
    position: relative !important;
    left: auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--rs-border) !important;
    padding-bottom: 16px !important;
}
.woocommerce-products-header img {
    display: none !important;
}
.woocommerce-products-header .page-title {
    font-family: var(--rs-recia) !important;
    font-size: 38px !important;
    font-weight: 400 !important; /* Recia 400 */
    color: var(--rs-black) !important;
    margin: 0 !important;
    text-transform: none !important; /* No uppercase/capitalize */
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

/* Hide theme's default breadcrumbs globally on shop and category archives */
.archive.post-type-archive-product .breadcrumbs,
.tax-product_cat .breadcrumbs,
.archive.post-type-archive-product .page-header-title .breadcrumbs,
.tax-product_cat .page-header-title .breadcrumbs,
.woocommerce-breadcrumb {
    display: none !important;
}

/* Hide the default WooCommerce products-header —
   we inject our own .roze-page-title-wrap via PHP hook */
body.woocommerce-shop .woocommerce-products-header,
body.tax-product_cat .woocommerce-products-header {
    display: none !important;
}

/* Custom page title block — matches mockup .shop-page-title */
.roze-page-title-wrap {
    padding-bottom: 2% !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  padding-top: 2% !important;
  margin-bottom: 2% !important;
}
.roze-page-title {
    font-family: var(--rs-recia) !important;
    font-size: 38px !important;
    font-weight: 400 !important;
    color: var(--rs-black) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

/* ─────────────────────────────────────────────────────────────
   SHOP TOOLBAR — Matches mockup .shop-toolbar exactly:
   white bg, border, result count LEFT, sort select RIGHT.
   Rendered by roze_shop_toolbar_open() PHP hook above ul.products.
   ───────────────────────────────────────────────────────────────*/
.roze-shop-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: var(--rs-pure-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 14px 20px !important;
    margin-bottom: 24px !important;
}
/* Result count — left side */
.roze-toolbar-count .woocommerce-result-count {
    font-family: var(--rs-satoshi) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--rs-mid) !important;
    margin: 0 !important;
}
/* Sort dropdown & filter button wrapper — right side */
.roze-toolbar-sort {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.roze-toolbar-sort .woocommerce-ordering {
    margin: 0 !important;
}
.roze-toolbar-sort .woocommerce-ordering select {
    font-family: var(--rs-satoshi) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--rs-dark) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background-color: transparent !important;
    cursor: pointer !important;
    padding: 8px 30px 8px 12px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: none !important;
    /* SVG chevron matching mockup */
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236A6A62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
}

/* Prevent white background flash — force cream bg on all content columns */
body.woocommerce-shop,
body.tax-product_cat {
    background-color: #F2EDE3 !important; /* matches --cream hex so it's set BEFORE CSS vars load */
}
body.woocommerce-shop #primary,
body.tax-product_cat #primary,
body.woocommerce-shop .site-content > .container-fluid > .row > [class*="col-"],
body.tax-product_cat .site-content > .container-fluid > .row > [class*="col-"] {
    background-color: transparent !important;
}

/* Header/Breadcrumbs Casing Override */
.ann span,
.nav-links a {
    text-transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   BLACK STRIP BREADCRUMBS BANNER
   ───────────────────────────────────────────────────────────────*/
.bc {
    padding: 16px 6% !important;
    background: var(--rs-black) !important;
    border-bottom: none !important;
    width: 100% !important;
}
.bc-i {
    max-width: var(--rs-max) !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    letter-spacing: .04em !important;
    font-family: var(--rs-satoshi) !important;
}
.bc-i a {
    color: rgba(255, 255, 255, 0.5) !important;
    transition: color .2s ease !important;
    text-transform: none !important;
}
.bc-i a:hover {
    color: var(--rs-white) !important;
}
.bc-i ion-icon {
    font-size: 11px !important;
    opacity: .5 !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Full-width breadcrumb — break out of Bootstrap column container.
   Uses the standard full-bleed CSS technique so the black strip
   spans 100vw regardless of the parent column width. */
body.woocommerce-shop .bc,
body.tax-product_cat .bc {
    width: 100vw !important;
    margin-left: calc(-1 * (100vw - 100%) / 2) !important;
    margin-right: calc(-1 * (100vw - 100%) / 2) !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ─────────────────────────────────────────────────────────────
   2. SIDEBAR CUSTOM STYLING (LEFT COLUMN)
   ───────────────────────────────────────────────────────────────*/
#primary-sidebar {
    background: transparent !important;
    border: none !important;
}

/* Style widgets as clean sharp boxes */
#primary-sidebar .widget {
    background: var(--rs-pure-white) !important;
    border: 1px solid var(--rs-border) !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}

#primary-sidebar .widget-title {
    font-family: var(--rs-recia) !important;
    font-size: 18px !important;
    font-weight: 400 !important; /* Recia 400 */
    color: var(--rs-black) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--rs-border) !important;
    text-transform: none !important; /* No uppercase/capitalize */
}

/* Product Categories list */
#primary-sidebar .widget_product_categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#primary-sidebar .widget_product_categories ul li {
    padding: 10px 0 !important;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06) !important;
    font-family: var(--rs-satoshi) !important;
    font-size: 14px !important;
    color: var(--rs-mid) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
#primary-sidebar .widget_product_categories ul li:last-child {
    border-bottom: none !important;
}
#primary-sidebar .widget_product_categories ul li a {
    color: var(--rs-mid) !important;
    transition: color 0.2s ease;
}
#primary-sidebar .widget_product_categories ul li.current-cat > a {
    color: var(--rs-black) !important;
    font-weight: 500 !important;
    border-bottom: 1.5px solid var(--rs-black) !important;
    padding-bottom: 2px !important;
}
#primary-sidebar .widget_product_categories ul li a:hover {
    color: var(--rs-black) !important;
}
#primary-sidebar .widget_product_categories ul li .count {
    font-size: 11px !important;
    background-color: var(--rs-cream) !important;
    color: var(--rs-dark) !important;
    padding: 2px 8px !important;
    font-weight: 500 !important;
}

/* Price range slider widget override */
.widget_price_filter .price_slider {
    background-color: var(--rs-cream-d) !important;
    height: 4px !important;
    border: none !important;
    margin-bottom: 24px !important;
    position: relative !important;
}
.widget_price_filter .price_slider_wrapper .ui-widget-header {
    background-color: var(--rs-black) !important;
}
.widget_price_filter .ui-slider .ui-slider-handle {
    width: 16px !important;
    height: 16px !important;
    background-color: var(--rs-pure-white) !important;
    border: 2px solid var(--rs-black) !important;
    cursor: pointer !important;
    outline: none !important;
    top: -6px !important;
    box-shadow: none !important;
    transition: transform 0.1s ease !important;
}
.widget_price_filter .ui-slider .ui-slider-handle:hover {
    transform: scale(1.15);
}
.widget_price_filter .price_slider_amount {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: var(--rs-satoshi) !important;
    font-size: 13px !important;
    color: var(--rs-mid) !important;
}
.widget_price_filter .price_slider_amount .price_label {
    order: 1 !important;
}
.widget_price_filter .price_slider_amount .button {
    order: 2 !important;
    background-color: var(--rs-black) !important;
    color: var(--rs-pure-white) !important;
    border: none !important;
    padding: 8px 18px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    text-transform: none !important;
}
.widget_price_filter .price_slider_amount .button:hover {
    opacity: 0.85 !important;
}

/* ─────────────────────────────────────────────────────────────
   3. SHOP HEADER & TOOLBAR
   ───────────────────────────────────────────────────────────────*/
.shop-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    background: var(--rs-pure-white) !important;
    border: 1px solid var(--rs-border) !important;
    padding: 14px 28px !important;
}
.shop-toolbar .product-found {
    font-family: var(--rs-satoshi) !important;
    font-size: 14px !important;
    color: var(--rs-mid) !important;
}
.shop-toolbar .woocommerce-ordering {
    margin: 0 !important;
}
.shop-toolbar .woocommerce-ordering select {
    background-color: transparent !important;
    border: 1px solid var(--rs-border) !important;
    padding: 8px 30px 8px 12px !important;
    font-family: var(--rs-satoshi) !important;
    font-size: 13px !important;
    color: var(--rs-dark) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236A6A62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 10px !important;
    cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────────────
   4. DYNAMIC MOBILE CATEGORY ICONS BAR
   ───────────────────────────────────────────────────────────────*/
.mobile-categories-bar {
    display: none; /* Desktop hidden */
    background-color: var(--rs-pure-white);
    border-bottom: 1px solid var(--rs-border);
    padding: 16px 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    margin-bottom: 24px;
}
.mobile-categories-bar::-webkit-scrollbar {
    display: none;
}
.mobile-categories-container {
    display: inline-flex;
    padding: 0 6%;
    gap: 16px;
}
.mobile-category-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    cursor: pointer;
}
.mobile-category-icon-box {
    width: 48px;
    height: 48px;
    border: 1px solid var(--rs-border);
    background-color: var(--rs-cream-m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--rs-dark);
    margin-bottom: 6px;
    transition: all 0.25s ease;
}
.mobile-category-pill.active .mobile-category-icon-box {
    background-color: var(--rs-black);
    border-color: var(--rs-black);
    color: var(--rs-white);
}
.mobile-category-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--rs-mid);
    transition: color 0.25s ease;
}
.mobile-category-pill.active .mobile-category-label {
    color: var(--rs-black);
}

/* Mobile filter trigger layout */
.mobile-filter-trigger {
    display: none;
    background-color: var(--rs-black);
    color: var(--rs-pure-white);
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    gap: 6px;
}

/* ─────────────────────────────────────────────────────────────
   5. COMPACT MINIMALIST CATALOG CARDS
   ───────────────────────────────────────────────────────────────*/
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;        /* matches mockup .products-grid gap */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transition: opacity 0.23s ease !important; /* smooth AJAX fade */
}
/* AJAX category loading state — JS adds this class before fetching */
ul.products.rz-loading {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Title wrap full-width + proper flex layout when moved above .row by JS */
.roze-page-title-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* Override default WooCommerce widths, floats, and Supro padding */
ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important; /* Overrides Supro 15px padding */
    position: relative !important;
}

.roze-shop-card .roze-card-inner {
    background-color: var(--rs-pure-white);
    border: 1px solid var(--rs-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: box-shadow var(--rs-transition);
}
.roze-shop-card:hover .roze-card-inner {
    /* Thin, very light grey border on hover — not harsh black */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(15, 15, 15, 0.05);
}

/* Thumbnail Wrapper */
.card-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background-color: var(--rs-cream-m);
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.card-image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.card-image-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.card-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}
.card-image-container img.hover-img {
    opacity: 0;
    z-index: 2;
}
.product-card:hover .card-image-container img.hover-img {
    opacity: 1;
}
.product-card:hover .card-image-container img.main-img {
    transform: scale(1.03);
}

/* Card Badges (Sharp Rectangles) */
.card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-family: var(--rs-satoshi);
}
.card-badge.best-seller {
    background-color: var(--rs-black);
    color: var(--rs-white);
}
.card-badge.sale {
    background-color: var(--rs-mid);
    color: var(--rs-white);
}

/* Card Details Area */
.card-details {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-category {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--rs-mid) !important;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: none !important; /* Strict sentence case override */
}
.card-category a,
.card-category span,
.card-category ion-icon {
    color: var(--rs-mid) !important;
    text-decoration: none !important;
}

.card-title {
    font-family: var(--rs-recia) !important;
    font-size: 18px !important;
    font-weight: 400 !important; /* Recia 400 */
    line-height: 1.3 !important;
    margin: 0 0 6px 0 !important;
    min-height: 48px; /* Alignment */
    text-transform: none !important;
}
.card-title a {
    color: var(--rs-black) !important;
    text-decoration: none !important;
}
.card-title a:hover {
    color: var(--rs-mid) !important;
}

/* Rating Stars (Black Vector Shape) */
.card-rating-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.stars-row {
    display: flex;
    gap: 3px;
}
.str {
    width: 11px;
    height: 11px;
    background: var(--rs-dark);
    clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    -webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.str.empty {
    background: rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important;
}
.rating-number {
    font-size: 12px;
    font-weight: 500;
    color: var(--rs-dark);
}
.rating-count {
    font-size: 12px;
    color: var(--rs-mid);
    white-space: nowrap !important;
}

/* Dynamic Variation Swatches */
.card-swatches {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.card-swatches-placeholder {
    height: 0 !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}
.swatch-pill {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border: 1px solid rgba(0, 0, 0, .1);
    color: var(--rs-mid);
    background-color: transparent;
    transition: all 0.2s ease;
}
.swatch-pill.active {
    border-color: var(--rs-black);
    color: var(--rs-black);
    background-color: var(--rs-cream-d);
}

/* Prices */
.card-price-display {
    font-size: 15px;
    font-weight: 500;
    color: var(--rs-black);
    margin-bottom: 12px;
    min-height: 22px; /* single-line height only — toggle handles equal spacing */
}
.roze-card-price {
    font-family: var(--rs-satoshi);
}
/* sub-inline-text no longer used (replaced by toggle buttons) */
.sub-inline-text {
    display: none !important;
}
.roze-card-price del {
    color: var(--rs-light) !important;
    font-size: 13px !important;
    margin-right: 5px !important;
    text-decoration: line-through !important;
}
.roze-card-price ins {
    text-decoration: none !important;
    font-weight: 500 !important;
    color: var(--rs-black) !important;
}

/* Subscription Toggles (Sharp Rectangular Pills) */
.card-subscription-toggle {
    display: flex;
    border: 1px solid rgba(0, 0, 0, .08);
    background-color: var(--rs-pure-white);
    margin-bottom: 14px;
    padding: 2px;
}
.card-toggle-placeholder {
    /* Same height as .card-subscription-toggle so non-subscription cards
       stay the same total height as subscription cards */
    height: 34px;       /* matches toggle inner content height */
    margin-bottom: 14px;
}
.toggle-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 6px 2px;
    font-family: var(--rs-satoshi) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--rs-mid);
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-transform: none !important; /* Strict sentence case */
    white-space: nowrap !important; /* Prevent text wrapping */
}
.toggle-btn.active {
    background-color: var(--rs-black) !important;
    color: var(--rs-pure-white) !important;
}
.toggle-disc-badge {
    background-color: var(--rs-black);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--rs-white);
    font-size: 9px;
    padding: 1px 4px;
    font-weight: 500;
}
.toggle-btn.active .toggle-disc-badge {
    background-color: var(--rs-pure-white);
    color: var(--rs-black);
    border-color: var(--rs-pure-white);
}

/* Dynamic Hover Ingredient Tags — hidden (would cause empty gap in cards) */
.card-hover-tags {
    display: none !important;
}

/* CTA Actions — always at bottom of flex column via margin-top:auto */
.card-actions {
    margin-top: auto;
}
.card-btn {
    width: 100% !important;
    height: 42px !important;
    background-color: var(--rs-black) !important;
    color: var(--rs-white) !important;
    border: 1px solid var(--rs-black) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--rs-satoshi) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    padding: 0 10px !important;
    text-transform: none !important; /* Strict sentence case */
    text-decoration: none !important;
}
.card-btn:hover {
    opacity: 0.85 !important;
    background-color: var(--rs-dark) !important;
    border-color: var(--rs-dark) !important;
    color: var(--rs-white) !important;
}
.card-btn-icon {
    font-size: 14px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    transition: transform var(--rs-transition);
}
.card-btn.select-options-btn:hover .card-btn-icon {
    transform: rotate(90deg);
}

/* Button Statuses */
.card-btn.loading {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}
.card-btn.loading .card-btn-icon {
    animation: rozeBtnSpin 0.8s linear infinite;
}
.card-btn.success {
    background-color: var(--rs-dark) !important;
    border-color: var(--rs-dark) !important;
}

@keyframes rozeBtnSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* ─────────────────────────────────────────────────────────────
   7. RESPONSIVENESS (MOBILE & TABLET DRAWER SYSTEMS)
   ───────────────────────────────────────────────────────────────*/
@media (max-width: 1199px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 991px) {
    /* Enable mobile category menu list horizontal bar */
    .mobile-categories-bar {
        display: block !important;
    }
    
    /* Toggle Mobile filter button display on toolbar */
    .mobile-filter-trigger {
        display: inline-flex !important;
    }
    
    /* Turn Sidebar into sliding filter drawer on mobile */
    #primary-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 320px !important;
        height: 100vh !important;
        background-color: var(--rs-white) !important;
        z-index: 10001 !important;
        overflow-y: auto !important;
        transition: right var(--rs-transition) !important;
        padding: 30px !important;
        box-shadow: -6px 0 20px rgba(0, 0, 0, 0.05) !important;
        order: 1 !important;
        flex: 0 0 320px !important;
        max-width: 320px !important;
    }
    #primary-sidebar.active {
        right: 0 !important;
    }
    
    /* Force main area full width */
    #primary.content-area {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Mobile Filter Header elements */
    .mobile-filter-header {
        display: flex !important;
        justify-content: flex-end !important;
        margin-bottom: 24px !important;
    }
    .mobile-filter-close {
        background: none !important;
        border: none !important;
        font-size: 26px !important;
        cursor: pointer !important;
        color: var(--rs-dark) !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Background Dimming Overlay for Mobile Drawer Filter */
    .mobile-filter-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.4) !important;
        z-index: 10000 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity var(--rs-transition) !important;
    }
    .mobile-filter-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 767px) {
    /* Reduce container padding on mobile to maximize card width */
    .archive.post-type-archive-product .site-content > .container-fluid,
    .woocommerce-shop .site-content > .container-fluid,
    .tax-product_cat .site-content > .container-fluid {
        padding-left: 6% !important;
        padding-right: 6% !important;
    }
    
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .card-title {
        min-height: auto !important;
    }
}