/*
Theme Name: Sevenday Mart - Indian Grocery Store
Theme URI: https://sevendaymart.com
Author: Prabhas Chirala
Author URI: https://sevendaymart.com
Description: A vibrant, colorful e-commerce theme for Sevenday Mart Indian Grocery Store. Features cyan headers, bold promotional banners, and illustrated category icons.
Version: 1.2.4
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sevenday
Tags: e-commerce, woocommerce, grocery, food, colorful, custom-logo, custom-menu, featured-images

This theme is designed for Indian grocery e-commerce websites.
*/

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Primary Colors - Sevenday Mart Brand */
    --color-primary: #009BDC;
    /* Sky Blue - main brand color */
    --color-primary-dark: #0077B3;
    --color-primary-light: #4DC3F0;

    /* Secondary Brand Colors - Category Segments */
    --color-hot-food: #FF6D2E;
    /* Orange - Hot Food */
    --color-household: #FFC72C;
    /* Yellow - Household */
    --color-grocery: #00C896;
    /* Emerald Teal - Food & Grocery */
    --color-personal: #FF4A8D;
    /* Hot Pink - Personal */

    /* Accent Colors (derived from brand) */
    --color-red: #FF6D2E;
    --color-red-dark: #E55A1F;
    --color-orange: #FF6D2E;
    --color-yellow: #FFC72C;
    --color-yellow-dark: #E5B025;
    --color-green: #00C896;
    --color-green-dark: #00A67A;
    --color-pink: #FF4A8D;
    --color-teal: #00C896;

    /* Neutral Colors */
    --color-bg-cream: #F5F0E6;
    /* Warm Beige background */
    --color-bg-white: #FFFFFF;
    --color-text-dark: #333333;
    --color-text-light: #666666;
    --color-text-white: #FFFFFF;
    --color-border: #E0E0E0;

    /* Typography */
    --font-primary: 'Outfit', 'Segoe UI', sans-serif;
    --font-display: 'Fredoka One', 'Comic Sans MS', cursive;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-bg-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-3xl);
}

h4 {
    font-size: var(--font-size-2xl);
}

h5 {
    font-size: var(--font-size-xl);
}

h6 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--spacing-md);
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-red), var(--color-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section {
    padding: var(--spacing-3xl) 0;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grid {
    display: grid;
}

/* ============================================
   HEADER STYLES
   ============================================ */
.top-bar {
    background: var(--color-yellow);
    color: var(--color-text-dark);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.top-bar .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header {
    background: var(--color-primary);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.site-logo {
    display: flex;
    align-items: center;
}

.site-logo img {
    height: 50px;
    width: auto;
}

.logo-text {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    color: var(--color-text-white);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.logo-text span {
    color: var(--color-yellow);
}

/* Search Bar */
.search-bar {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.search-bar input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    padding-right: 60px;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    background: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
}

.search-bar input:focus {
    outline: 3px solid var(--color-yellow);
}

.search-bar button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-red);
    color: var(--color-text-white);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: background var(--transition-fast);
}

.search-bar button:hover {
    background: var(--color-red-dark);
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.header-phone {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-white);
    font-weight: 600;
}

.header-phone svg {
    width: 20px;
    height: 20px;
    fill: var(--color-text-white);
}

.header-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-white);
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.header-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.header-btn svg {
    width: 24px;
    height: 24px;
}

/* Main Navigation */
.main-nav {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm) 0;
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-item>a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-item>a:hover {
    color: var(--color-primary);
    background: rgba(0, 188, 212, 0.1);
}

.nav-item.highlight>a {
    color: var(--color-red);
    font-weight: 600;
}

.nav-item.highlight>a:hover {
    background: rgba(229, 57, 53, 0.1);
}

.dropdown-arrow {
    transition: transform var(--transition-fast);
}

.nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* ============================================
   MEGA MENU DROPDOWN
   ============================================ */
.mega-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 280px;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.nav-item.has-mega-menu:hover .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Prevent dropdown from closing when moving to it */
.mega-menu-dropdown::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
}

.mega-menu-content {
    display: flex;
    gap: var(--spacing-xl);
}

.mega-menu-columns {
    display: flex;
    gap: var(--spacing-xl);
}

.mega-menu-column {
    min-width: 180px;
}

.mega-menu-heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
}

.mega-menu-heading a {
    color: inherit;
    transition: color var(--transition-fast);
}

.mega-menu-heading a:hover {
    color: var(--color-primary);
}

.mega-menu-subcategory-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-subitem {
    margin-bottom: var(--spacing-xs);
}

.mega-menu-subitem a {
    display: block;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}

.mega-menu-subitem a:hover {
    color: var(--color-primary);
    padding-left: var(--spacing-sm);
}

/* Large dropdowns with multiple columns */
.nav-item.has-mega-menu:nth-child(-n+3) .mega-menu-dropdown {
    left: 0;
    transform: translateX(0) translateY(10px);
}

.nav-item.has-mega-menu:nth-child(-n+3):hover .mega-menu-dropdown {
    transform: translateX(0) translateY(0);
}

/* Right-aligned dropdowns for last items */
.nav-item.has-mega-menu:nth-last-child(-n+3) .mega-menu-dropdown {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(10px);
}

.nav-item.has-mega-menu:nth-last-child(-n+3):hover .mega-menu-dropdown {
    transform: translateX(0) translateY(0);
}

/* Featured promo area in dropdown */
.mega-menu-promo {
    min-width: 200px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    color: var(--color-text-white);
    text-align: center;
}

.mega-menu-promo h5 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.mega-menu-promo p {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    padding: var(--spacing-xl) 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
}

.hero-main {
    background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-yellow) 40%, var(--color-red) 40%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.hero-main-content {
    position: relative;
    z-index: 2;
    max-width: 50%;
}

.hero-main h2 {
    font-size: var(--font-size-xl);
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

.hero-main .highlight-text {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.hero-main .highlight-text.yellow {
    color: var(--color-yellow-dark);
}

.hero-main .highlight-text.red {
    color: var(--color-red);
}

.hero-main .highlight-text.white {
    color: var(--color-text-white);
}

.hero-tagline {
    display: inline-block;
    background: var(--color-text-dark);
    color: var(--color-text-white);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-weight: 700;
    font-size: var(--font-size-lg);
    margin: var(--spacing-md) 0;
}

.hero-main-image {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45%;
    z-index: 1;
}

.hero-sidebar {
    background: var(--color-primary-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-sidebar h3 {
    color: var(--color-red);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.hero-sidebar .highlight {
    background: var(--color-yellow);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    display: inline-block;
}

.hero-sidebar p {
    color: var(--color-primary-dark);
    font-weight: 600;
    font-size: var(--font-size-lg);
}

/* ============================================
   CATEGORY STRIP
   ============================================ */
.category-strip {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg-white);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-lg);
    justify-items: center;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-bg-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
    cursor: pointer;
    min-width: 140px;
}

.category-item:hover {
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.category-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon img,
.category-icon svg {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.category-item h4 {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
    margin: 0;
}

/* ============================================
   PROMOTIONAL BLOCKS
   ============================================ */
.promo-section {
    padding: var(--spacing-xl) 0;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.promo-card {
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promo-card.green {
    background: linear-gradient(135deg, var(--color-green) 0%, var(--color-teal) 100%);
}

.promo-card.pink {
    background: linear-gradient(135deg, var(--color-pink) 0%, #FFE4E9 100%);
}

.promo-card.red {
    background: linear-gradient(135deg, var(--color-red) 0%, var(--color-orange) 100%);
}

.promo-card.yellow {
    background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-orange) 100%);
}

.promo-card h3 {
    font-size: var(--font-size-3xl);
    color: var(--color-text-white);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.promo-card.pink h3 {
    color: var(--color-red);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 600;
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-text-dark);
    color: var(--color-text-white);
}

.btn-secondary:hover {
    background: #222;
}

.btn-yellow {
    background: var(--color-yellow);
    color: var(--color-text-dark);
}

.btn-yellow:hover {
    background: var(--color-yellow-dark);
}

.btn-red {
    background: var(--color-red);
    color: var(--color-text-white);
}

.btn-red:hover {
    background: var(--color-red-dark);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

/* ============================================
   FEATURE SECTION
   ============================================ */
.features-section {
    padding: var(--spacing-3xl) 0;
    background: var(--color-bg-white);
}

.features-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl);
}

.features-intro p {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
}

.feature-item {
    text-align: center;
    padding: var(--spacing-xl);
}

.feature-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-lg);
    border: 3px solid var(--color-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
}

.feature-icon img,
.feature-icon svg {
    width: 60px;
    height: 60px;
}

.feature-item h4 {
    color: var(--color-red);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

.feature-item p {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: 1.7;
}

/* ============================================
   DEALS SECTION
   ============================================ */
.deals-section {
    background: linear-gradient(135deg, var(--color-red) 0%, var(--color-orange) 100%);
    padding: var(--spacing-2xl) 0;
}

.deals-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.deals-badge {
    background: var(--color-yellow);
    color: var(--color-text-dark);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    text-transform: uppercase;
}

.deals-section h2 {
    color: var(--color-text-white);
    margin: 0;
}

/* ============================================
   PRODUCT CARDS
   ============================================ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-lg);
}

.product-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.product-image {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: #FAFAFA;
}

.product-image img {
    max-height: 100%;
    object-fit: contain;
}

.product-info {
    padding: var(--spacing-lg);
}

.product-category {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.product-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.product-price .current {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-red);
}

.product-price .original {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: line-through;
}

.product-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.product-actions .btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* ============================================
   SHOP BY CATEGORY SECTION
   ============================================ */
.shop-category-section {
    padding: var(--spacing-3xl) 0;
}

.shop-category-section h2 {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.shop-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-xl);
}

.shop-category-item {
    text-align: center;
}

.shop-category-image {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-category-image img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

.shop-category-item h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--color-text-dark);
    color: var(--color-text-white);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-brand .logo-text {
    margin-bottom: var(--spacing-md);
}

.footer-brand .footer-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: var(--spacing-md);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.footer-column h5 {
    color: var(--color-yellow);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
}

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.footer-column ul li a:hover {
    color: var(--color-yellow);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.social-links {
    display: flex;
    gap: var(--spacing-md);
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.social-links a:hover {
    background: var(--color-primary);
    transform: translateY(-3px);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1200px) {
    .shop-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shop-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }

    .search-bar {
        order: 3;
        max-width: 100%;
        width: 100%;
    }

    .nav-list {
        gap: var(--spacing-md);
    }

    .promo-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .shop-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .hero-main {
        padding: var(--spacing-lg);
    }

    .hero-main-content {
        max-width: 100%;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .footer-column h5 {
        font-size: 13px;
        margin-bottom: var(--spacing-sm);
    }

    .footer-column ul li {
        margin-bottom: 4px;
    }

    .footer-column ul li a {
        font-size: 12px;
    }
}

/* ============================================
   WOOCOMMERCE NOTICES (Flipkart Style) 
   ============================================ */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    padding: 15px 20px;
    margin: 0 0 20px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    border-left: 5px solid #388e3c;
    /* Default Green for Success */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #212121;
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.woocommerce-message {
    border-left-color: #388e3c;
    /* Green */
}

.woocommerce-info {
    border-left-color: #2874f0;
    /* Blue */
}

.woocommerce-error {
    border-left-color: #ff6161;
    /* Red */
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none;
    /* Remove default icons */
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    float: right;
    margin-left: 20px;
    background-color: transparent;
    color: #2874f0;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    padding: 0;
    box-shadow: none;
    font-size: 14px;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: transparent;
    color: #0056b3;
    text-decoration: underline;
}

/* Specific fix for "Undo" link */
.woocommerce-message a.restore-item {
    color: #2874f0;
    font-weight: 600;
    margin-left: 10px;
    text-decoration: none;
}

.woocommerce-message a.restore-item:hover {
    text-decoration: underline;
}

/* Mobile responsive for notices */
@media (max-width: 768px) {

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .woocommerce-message .button,
    .woocommerce-error .button,
    .woocommerce-info .button {
        float: none;
        margin-left: 0;
    }
}

/* ============================================
   WOOCOMMERCE PAGINATION
   ============================================ */
.woocommerce-pagination {
    margin: 40px 0;
    text-align: center;
}

.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    border: none !important;
}

.woocommerce-pagination ul li {
    float: none !important;
    border: none !important;
    overflow: hidden;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #212121;
}

.woocommerce-pagination ul li a:hover {
    background: #2874f0;
    color: #fff;
    border-color: #2874f0;
}

.woocommerce-pagination ul li span.current {
    background: #2874f0;
    color: #fff;
    border-color: #2874f0;
    cursor: default;
}

.woocommerce-pagination ul li .prev,
.woocommerce-pagination ul li .next {
    width: auto;
    padding: 0 15px;
}

/* -------------------------------------------------------------------------
 * User Dropdown Menu
 * ------------------------------------------------------------------------- */
.header-btn-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.sd-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--color-text-white);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.sd-dropdown-toggle:hover {
    opacity: 1;
}

.sd-dropdown-toggle svg {
    transition: transform 0.2s;
}

.sd-dropdown-toggle.sd-open svg,
.header-btn-wrapper:hover .sd-dropdown-toggle svg {
    transform: rotate(180deg);
}

.fk-user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 250px;
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 8px 0;
    border: 1px solid #f0f0f0;
}

.header-btn-wrapper:hover .fk-user-menu,
.fk-user-menu.sd-mobile-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Force-close: overrides hover when user explicitly closes via toggle */
.header-btn-wrapper.sd-menu-closed .fk-user-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
}

.fk-user-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
}

.fk-user-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fk-user-menu li {
    display: block;
    margin: 0;
}

.fk-user-menu a {
    display: block;
    padding: 12px 20px;
    color: #212121;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: 1px solid #f9f9f9;
}

.fk-user-menu li:last-child a {
    border-bottom: none;
}

.fk-user-menu a:hover {
    background: #f5faff;
    color: #2874f0;
    padding-left: 25px;
}

/* Active State in Dropdown */
.fk-user-menu li.is-active a {
    background: #f5faff;
    color: #2874f0;
    font-weight: 500;
}

/* Remove Sidebar & Full Width Content for My Account */
/* ============================================
   MY ACCOUNT PAGE REDESIGN - Sevenday Mart
   Enterprise-level design inspired by Blinkit, Flipkart, Zepto, Swiggy Instamart
   ============================================ */

/* ---- Layout: Wrapper & Grid ---- */
.sevenday-my-account-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: var(--font-primary);
}

.sevenday-account-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* ---- Sidebar ---- */
.sevenday-account-sidebar {
    width: 280px;
    flex-shrink: 0;
    background: var(--color-bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.user-profile-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--color-bg-white);
    border-bottom: 1px solid #f0f0f0;
}

.profile-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.profile-info .hello-text {
    font-size: 12px;
    color: #878787;
    margin-bottom: 0;
    display: block;
}

.profile-info .user-name {
    font-size: 15px;
    font-weight: 600;
    margin: 2px 0 0;
    color: var(--color-text-dark);
}

/* ---- Navigation ---- */
.account-nav-container {
    padding-bottom: 8px;
}

.account-nav-header {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.account-nav-header span {
    font-size: 11px;
    font-weight: 600;
    color: #878787;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f5f5f5;
}

.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 14px;
    color: var(--color-text-dark);
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: rgba(0, 155, 220, 0.04);
    color: var(--color-primary);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: rgba(0, 155, 220, 0.06);
    color: var(--color-primary);
    font-weight: 600;
    border-right: 3px solid var(--color-primary);
}

.nav-icon {
    margin-right: 14px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.nav-icon svg {
    width: 20px;
    height: 20px;
}

/* Logout icon color */
.woocommerce-MyAccount-navigation ul li:last-child .nav-icon {
    color: var(--color-hot-food);
}

/* ---- Right Content Area ---- */
.sevenday-account-content {
    flex-grow: 1;
    background: var(--color-bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    min-height: 500px;
    padding: 28px;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
}

.woocommerce-MyAccount-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-text-dark);
}

/* ============================================
   DASHBOARD
   ============================================ */
.sd-dashboard {
    /* Container for all dashboard content */
}

/* Welcome Banner */
.sd-dash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(0, 155, 220, 0.08) 0%, rgba(0, 200, 150, 0.06) 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 155, 220, 0.1);
}

.sd-dash-welcome-text h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 6px;
}

.sd-dash-welcome-text p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.sd-dash-welcome-icon {
    color: var(--color-primary);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Stats Row */
.sd-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.sd-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--color-bg-white);
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 16px 18px;
    transition: box-shadow 0.2s;
}

.sd-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.sd-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sd-stat-total {
    background: rgba(0, 155, 220, 0.1);
    color: var(--color-primary);
}

.sd-stat-pending {
    background: rgba(255, 199, 44, 0.15);
    color: var(--color-household);
}

.sd-stat-completed {
    background: rgba(0, 200, 150, 0.1);
    color: var(--color-grocery);
}

.sd-stat-addresses {
    background: rgba(255, 74, 141, 0.1);
    color: var(--color-personal);
}

.sd-stat-info {
    display: flex;
    flex-direction: column;
}

.sd-stat-number {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.2;
}

.sd-stat-label {
    font-size: 12px;
    color: #878787;
    font-weight: 500;
    margin-top: 2px;
}

/* Section Title */
.sd-dash-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 16px;
}

.sd-dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sd-dash-section-header .sd-dash-section-title {
    margin-bottom: 0;
}

.sd-dash-view-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.sd-dash-view-all:hover {
    text-decoration: underline;
}

/* Quick Action Cards */
.sd-dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.sd-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    background: var(--color-bg-white);
}

.sd-quick-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: transparent;
}

.sd-quick-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.sd-quick-card h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 4px;
}

.sd-quick-card p {
    font-size: 11px;
    color: #878787;
    margin: 0;
    line-height: 1.4;
}

/* Recent Orders */
.sd-dash-recent-orders {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.sd-recent-order-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
    background: var(--color-bg-white);
}

.sd-recent-order-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

.sd-recent-order-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f8f8f8;
}

.sd-recent-order-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sd-recent-order-info {
    flex: 1;
    min-width: 0;
}

.sd-recent-order-id {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.sd-recent-order-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.sd-item-count {
    font-size: 12px;
    color: #878787;
    font-weight: 400;
}

.sd-recent-order-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #878787;
}

.sd-recent-order-total {
    font-weight: 600;
    color: var(--color-text-dark);
}

.sd-recent-order-status {
    flex-shrink: 0;
}

/* Status Badges (shared) */
.sd-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: capitalize;
    white-space: nowrap;
}

.sd-status-pending,
.sd-status-on-hold {
    background: rgba(255, 199, 44, 0.15);
    color: #b8860b;
}

.sd-status-processing {
    background: rgba(0, 155, 220, 0.1);
    color: var(--color-primary);
}

.sd-status-completed {
    background: rgba(0, 200, 150, 0.1);
    color: #00875a;
}

.sd-status-cancelled,
.sd-status-refunded,
.sd-status-failed {
    background: rgba(255, 109, 46, 0.1);
    color: var(--color-hot-food);
}

/* ============================================
   ORDERS PAGE (Flipkart-style) — migrated from inline
   ============================================ */
.fk-orders-page-container {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Sidebar (Desktop) */
.fk-filters-sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--color-bg-white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 16px;
}

.fk-filter-header {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.fk-filter-group {
    margin-bottom: 20px;
}

.fk-filter-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.fk-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-text-dark);
    cursor: pointer;
}

.fk-filter-option input[type="checkbox"],
.fk-filter-option input[type="radio"] {
    width: 16px;
    height: 16px;
    border: 1px solid #c2c2c2;
    border-radius: 2px;
    margin: 0;
    accent-color: var(--color-primary);
}

.fk-apply-filters-btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

/* Main Content */
.fk-orders-content {
    flex: 1;
}

/* Desktop Search Bar */
.fk-desktop-search {
    display: flex;
    margin-bottom: 15px;
}

.fk-search-input-wrapper {
    flex: 1;
    position: relative;
    border: 1px solid var(--color-border);
    background: var(--color-bg-white);
    border-radius: 8px 0 0 8px;
}

.fk-search-input-wrapper input {
    width: 100%;
    border: none;
    padding: 10px 15px;
    height: 42px;
    font-size: 14px;
    font-family: var(--font-primary);
    border-radius: 8px 0 0 8px;
}

.fk-search-btn {
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-primary);
    transition: background 0.2s;
}

.fk-search-btn:hover {
    background: var(--color-primary-dark);
}

/* Mobile Header & Controls (Hidden on Desktop) */
.fk-mobile-header-bar,
.fk-mobile-controls {
    display: none;
}

/* Order Item Row (Desktop) */
.fk-order-item-card {
    background: var(--color-bg-white);
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 20px;
    transition: box-shadow 0.2s;
    text-decoration: none !important;
}

.fk-order-item-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.fk-item-img-box {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f8f8;
}

.fk-item-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fk-item-info {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.fk-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: 4px;
    line-height: 1.4;
    display: block;
}

.fk-item-price {
    flex: 0.5;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.fk-item-status-desktop {
    flex: 1.5;
}

.fk-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.fk-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.fk-status-dot.completed {
    background: var(--color-grocery);
}

.fk-status-dot.processing {
    background: var(--color-primary);
}

.fk-status-dot.cancelled {
    background: var(--color-hot-food);
}

.fk-status-dot.on-hold {
    background: var(--color-household);
}

.fk-status-dot.pending {
    background: #bbb;
}

.fk-status-dot.refunded {
    background: var(--color-hot-food);
}

.fk-status-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-dark);
}

.fk-status-desc {
    font-size: 12px;
    color: #878787;
    margin-left: 18px;
}

.fk-mobile-status-row,
.fk-mobile-rating {
    display: none;
}

/* Pagination */
.fk-pagination {
    margin-top: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.fk-pagination a,
.fk-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--color-text-dark);
    text-decoration: none;
    transition: all 0.2s;
}

.fk-pagination a:hover {
    background: rgba(0, 155, 220, 0.06);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.fk-pagination span.current {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

/* No Orders */
.fk-no-orders {
    background: var(--color-bg-white);
    padding: 48px;
    text-align: center;
    border-radius: 10px;
}

.fk-no-orders img {
    margin-bottom: 16px;
}

.fk-no-orders p {
    font-size: 14px;
    color: #878787;
    margin-bottom: 16px;
}

.fk-no-orders a {
    display: inline-block;
    padding: 10px 24px;
    background: var(--color-primary);
    color: var(--color-text-white);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* Mobile Filter Modal */
.fk-filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999999;
    display: none;
    align-items: flex-end;
}

.fk-filter-modal-overlay.open {
    display: flex;
}

.fk-filter-modal {
    width: 100%;
    background: var(--color-bg-white);
    border-radius: 16px 16px 0 0;
    padding: 0 0 60px;
    max-height: 80vh;
    animation: fk-slideUp 0.3s ease-out;
    position: relative;
    overflow-y: auto;
}

@keyframes fk-slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.fk-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.fk-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.fk-clear-btn {
    font-size: 14px;
    color: #878787;
    text-decoration: none;
    font-weight: 500;
}

.fk-modal-body {
    padding: 20px;
}

.fk-modal-section-title {
    font-size: 14px;
    color: #878787;
    margin-bottom: 12px;
    font-weight: 500;
}

.fk-item-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.fk-chip-label {
    position: relative;
    cursor: pointer;
}

.fk-chip-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.fk-chip-span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 14px;
    color: var(--color-text-dark);
    background: var(--color-bg-white);
    transition: all 0.2s;
}

.fk-chip-label input:checked~.fk-chip-span {
    background: rgba(0, 155, 220, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 500;
}

.fk-chip-span::after {
    content: '+';
    margin-left: 6px;
    font-weight: 300;
    color: #878787;
}

.fk-chip-label input:checked~.fk-chip-span::after {
    content: '\2713';
    color: var(--color-primary);
}

.fk-modal-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-bg-white);
    padding: 10px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.fk-modal-btn {
    flex: 1;
    height: 48px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-primary);
}

.fk-btn-cancel {
    background: var(--color-bg-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
}

.fk-btn-apply {
    background: var(--color-hot-food);
    color: var(--color-text-white);
}

/* ============================================
   VIEW ORDER - Timeline Design
   ============================================ */
.sd-view-order {
    /* Container */
}

.sd-vo-banner {
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.sd-vo-banner h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.sd-vo-banner p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.sd-vo-info-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--color-bg-white);
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.sd-vo-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-vo-info-label {
    font-size: 12px;
    color: #878787;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sd-vo-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.sd-vo-total {
    font-size: 16px;
    color: var(--color-primary);
}

/* Timeline */
.sd-vo-timeline-section {
    margin-bottom: 28px;
}

.sd-vo-timeline-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-text-dark);
}

.sd-vo-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0;
}

.sd-vo-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.sd-vo-step-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #bbb;
    border: 2px solid #e0e0e0;
    transition: all 0.3s;
}

.sd-step-done .sd-vo-step-dot {
    background: rgba(0, 200, 150, 0.1);
    color: var(--color-grocery);
    border-color: var(--color-grocery);
}

.sd-step-current .sd-vo-step-dot {
    background: var(--color-grocery);
    color: var(--color-text-white);
    border-color: var(--color-grocery);
    box-shadow: 0 0 0 4px rgba(0, 200, 150, 0.2);
}

.sd-vo-step-label {
    font-size: 12px;
    font-weight: 500;
    color: #878787;
    text-align: center;
}

.sd-step-done .sd-vo-step-label,
.sd-step-current .sd-vo-step-label {
    color: var(--color-text-dark);
    font-weight: 600;
}

.sd-vo-step-line {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    margin-top: 22px;
    min-width: 40px;
    border-radius: 2px;
}

.sd-line-done {
    background: var(--color-grocery);
}

/* Cancelled Message */
.sd-vo-cancelled-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(255, 109, 46, 0.08);
    border-radius: 10px;
    margin-bottom: 24px;
    color: var(--color-hot-food);
}

.sd-vo-cancelled-msg p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* Order Details Section */
.sd-vo-details {
    margin-top: 8px;
}

.sd-vo-details table {
    width: 100%;
    border-collapse: collapse;
}

.sd-vo-details table th,
.sd-vo-details table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    text-align: left;
}

.sd-vo-details table th {
    background: #f9f9f9;
    font-weight: 600;
    color: #555;
}

/* ============================================
   ADDRESSES - Card Layout
   ============================================ */
.sd-addresses-header {
    margin-bottom: 24px;
}

.sd-addresses-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--color-text-dark);
}

.sd-addresses-header p {
    font-size: 14px;
    color: #878787;
    margin: 0;
}

.sd-addresses-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sd-address-card {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg-white);
    transition: box-shadow 0.2s;
}

.sd-address-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.sd-address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.sd-address-type {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-address-icon {
    color: var(--color-primary);
    display: flex;
    align-items: center;
}

.sd-address-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sd-badge-billing {
    background: rgba(0, 155, 220, 0.1);
    color: var(--color-primary);
}

.sd-badge-shipping {
    background: rgba(0, 200, 150, 0.1);
    color: #00875a;
}

.sd-address-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(0, 155, 220, 0.2);
    transition: all 0.2s;
}

.sd-address-edit-btn:hover {
    background: rgba(0, 155, 220, 0.06);
}

.sd-address-card-body {
    padding: 20px 18px;
}

.sd-address-card-body address {
    border: none;
    padding: 0;
    background: transparent;
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text-dark);
    font-size: 14px;
}

/* Empty Address State */
.sd-address-empty {
    text-align: center;
    padding: 20px 0;
}

.sd-address-empty svg {
    margin-bottom: 12px;
    color: #ccc;
}

.sd-address-empty p {
    font-size: 14px;
    color: #878787;
    margin: 0 0 14px;
}

.sd-add-address-btn {
    display: inline-block;
    padding: 8px 20px;
    background: var(--color-primary);
    color: var(--color-text-white);
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.sd-add-address-btn:hover {
    background: var(--color-primary-dark);
}

/* ============================================
   EDIT ACCOUNT FORM - Sectioned Cards
   ============================================ */
.sd-edit-account {
    /* Container */
}

.sd-account-section {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
    background: var(--color-bg-white);
}

.sd-account-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.sd-account-section-header svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.sd-account-section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0;
}

.sd-account-section-body {
    padding: 24px 20px;
}

.sd-form-row-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sd-form-row-group .woocommerce-form-row {
    margin-bottom: 16px;
}

.sd-form-help {
    font-size: 12px;
    color: #878787;
    margin-top: 4px;
    display: block;
}

.sd-password-note {
    font-size: 13px;
    color: #878787;
    margin-bottom: 20px;
    font-style: italic;
}

.sd-account-submit {
    padding: 0;
    margin-top: 4px;
}

.sd-btn-primary,
a.sd-btn-primary {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    font-family: var(--font-primary);
}

.sd-btn-primary:hover,
a.sd-btn-primary:hover {
    background: var(--color-primary-dark);
}

/* ============================================
   DOWNLOADS - Card Grid
   ============================================ */
.sd-downloads-header {
    margin-bottom: 24px;
}

.sd-downloads-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--color-text-dark);
}

.sd-downloads-header p {
    font-size: 14px;
    color: #878787;
    margin: 0;
}

.sd-downloads-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-download-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    background: var(--color-bg-white);
    transition: box-shadow 0.2s;
}

.sd-download-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.sd-download-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(0, 155, 220, 0.08);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sd-download-info {
    flex: 1;
    min-width: 0;
}

.sd-download-product {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--color-text-dark);
}

.sd-download-product a {
    color: var(--color-text-dark);
    text-decoration: none;
}

.sd-download-product a:hover {
    color: var(--color-primary);
}

.sd-download-file {
    font-size: 13px;
    color: #878787;
    margin: 0 0 6px;
}

.sd-download-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #999;
}

.sd-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--color-primary);
    color: var(--color-text-white);
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    flex-shrink: 0;
}

.sd-download-btn:hover {
    background: var(--color-primary-dark);
}

/* Downloads Empty State */
.sd-downloads-empty {
    text-align: center;
    padding: 60px 20px;
}

.sd-empty-icon {
    color: #d0d0d0;
    margin-bottom: 16px;
}

.sd-downloads-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 8px;
}

.sd-downloads-empty p {
    font-size: 14px;
    color: #878787;
    margin: 0 0 20px;
}

/* ============================================
   ORDERS TABLE STYLES (WC Default fallback)
   ============================================ */
table.woocommerce-orders-table {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

table.woocommerce-orders-table thead th {
    background: #f9f9f9;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    color: #555;
    text-align: left;
    font-size: 13px;
}

table.woocommerce-orders-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--color-text-dark);
    font-size: 14px;
    vertical-align: middle;
}

table.woocommerce-orders-table tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-orders-table__cell-order-number a {
    font-weight: 600;
    color: var(--color-primary);
}

.woocommerce-button.view {
    padding: 6px 16px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s;
}

.woocommerce-button.view:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
}

/* ============================================
   PAYMENT METHODS
   ============================================ */
.sevenday-payment-methods-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.payment-method-card {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-white);
    transition: box-shadow 0.2s;
}

.payment-method-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.payment-method-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.payment-icon {
    font-size: 32px;
    color: #878787;
    width: 32px;
    height: 32px;
}

.method-details {
    display: flex;
    flex-direction: column;
}

.method-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.method-number {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
    letter-spacing: 1px;
}

.method-expiry {
    font-size: 12px;
    color: #878787;
    margin-top: 2px;
}

.payment-method-actions {
    display: flex;
    gap: 14px;
}

.method-action-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.method-action-link:hover {
    text-decoration: underline;
}

.method-action-link.delete {
    color: var(--color-hot-food);
}

/* ============================================
   FORM STYLES (Shared)
   ============================================ */
.woocommerce-form-row {
    margin-bottom: 18px;
}

.woocommerce-form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-text-dark);
    font-weight: 500;
}

.woocommerce-form-row label .required {
    color: var(--color-hot-food);
}

.woocommerce-form-row .input-text {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: var(--color-bg-white);
    box-shadow: none;
    font-family: var(--font-primary);
}

.woocommerce-form-row .input-text:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 155, 220, 0.1);
}

fieldset {
    border: 1px solid #f0f0f0;
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: #fafafa;
}

legend {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
    padding: 0 10px;
    background: transparent;
}

.woocommerce-Button.button {
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: var(--font-primary);
}

.woocommerce-Button.button:hover {
    background: var(--color-primary-dark);
}

/* ============================================
   ANIMATIONS — My Account Mobile
   ============================================ */
@keyframes sdMSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sdMPulseRing {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .sd-m-stats-bar,
    .sd-dash-quick-actions,
    .sd-dash-recent-orders,
    .sd-dash-section-header,
    .sd-address-card,
    .sd-download-card,
    .sd-m-hero-avatar {
        animation: none !important;
    }
}

/* ============================================
   RESPONSIVE — My Account (App-Quality Mobile)
   ============================================ */

/* Mobile-only elements — hidden on desktop */
.sd-m-hero {
    display: none;
}

.sd-m-stats-bar {
    display: none;
}

.sd-vo-bottom-bar {
    display: none;
}

.sd-nav-mobile-heading {
    display: none;
}

.sd-mobile-back-bar {
    display: none;
}

.nav-chevron {
    display: none;
}

.sd-dash-desktop-only {
    display: block;
}

/* Account pages: hide grocery nav & page title at ALL viewports */
.woocommerce-account .main-nav {
    display: none !important;
}
.woocommerce-account .sd-page-header {
    display: none !important;
}

/* ============================================
   RESPONSIVE — My Account (Tablet ≤ 1024px)
   Strip the "card-in-cream" desktop layout.
   Make everything full-width white.
   ============================================ */
@media (max-width: 1024px) {
    /* White background all the way through — no cream/beige */
    body.woocommerce-account {
        background: #fff !important;
    }
    .woocommerce-account .site-main {
        background: #fff;
    }
    .woocommerce-account .sd-page-wrapper {
        padding: 0;
        background: #fff !important;
    }
    .woocommerce-account .sd-page-wrapper > .container {
        padding: 0 16px;
        max-width: 100%;
    }
    /* Remove floating card appearance */
    .woocommerce-account .sd-page-article {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
    /* Wrapper fills screen */
    .woocommerce-account .sevenday-my-account-wrapper {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    /* Sidebar + content spacing */
    .woocommerce-account .sevenday-account-grid {
        gap: 16px;
    }
    .woocommerce-account .sevenday-account-sidebar {
        width: 220px;
    }
    .woocommerce-account .sevenday-account-content {
        padding: 20px;
        min-width: 0;
    }

    /* ── Footer: full-width, consistent padding ── */
    .woocommerce-account .site-footer .container {
        max-width: 100%;
        padding: 0 16px;
    }
    .woocommerce-account .site-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .woocommerce-account .site-footer .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {

    /* ===========================================
       APP SHELL — Nuclear reset: strip ALL wrappers to 0
       Every layer from <body> to dashboard content must be
       padding:0, margin:0, max-width:100%, width:100%
       so content reaches viewport edges.
       =========================================== */

    /* Body background — eliminate beige bleed on all sides */
    body.woocommerce-account {
        background: #f5f5f8 !important;
    }
    /* Sub-pages: white background all the way through */
    body.woocommerce-account:not(.myaccount-dashboard) {
        background: #fff !important;
    }

    /* Layer 1: <main class="site-main"> */
    .woocommerce-account .site-main {
        background: #f5f5f8;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Layer 2: .sd-page-wrapper (from page.php) */
    .woocommerce-account .sd-page-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        background: #f5f5f8 !important;
        min-height: auto !important;
    }

    /* Layer 3: .container (the main culprit — has 24px side padding) */
    .woocommerce-account .sd-page-wrapper > .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Layer 4: .sd-page-article (from page.php) */
    .woocommerce-account .sd-page-article {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* Layer 5: .sevenday-my-account-wrapper */
    .woocommerce-account .sevenday-my-account-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: calc(100vh - 120px);
    }

    /* Layer 6: .sevenday-account-grid */
    .woocommerce-account .sevenday-account-grid {
        flex-direction: column;
        gap: 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Layer 7: .sevenday-account-content */
    .sevenday-account-content {
        width: 100% !important;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100% !important;
        background: #f5f5f8;
        border-radius: 0;
        padding: 0 !important;
        min-height: auto;
        border: none;
        box-shadow: none;
        overflow-x: hidden;
    }

    /* Layer 8: .woocommerce-MyAccount-content — base reset */
    .woocommerce-account .woocommerce-MyAccount-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Dashboard inner content — zero padding, hero goes edge-to-edge */
    .myaccount-dashboard .woocommerce-MyAccount-content {
        padding: 0 !important;
    }

    /* Layer 9: .sd-dashboard wrapper */
    .myaccount-dashboard .sd-dashboard {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Notices wrapper — kill the 20px padding from header.php inline style */
    .woocommerce-account .woocommerce-notices-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide desktop sidebar profile (mobile hero replaces it) */
    .user-profile-summary {
        display: none !important;
    }

    .sevenday-account-sidebar {
        width: 100% !important;
        flex: 0 0 auto;
        min-width: 0;
        max-width: 100% !important;
        border-radius: 0;
        box-shadow: none;
        border: none;
        background: #fff;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ===========================================
       NAVIGATION — Vertical menu list (app-style)
       =========================================== */

    /* Hide desktop nav header */
    .account-nav-header {
        display: none !important;
    }

    /* Mobile heading "Your Information" */
    .sd-nav-mobile-heading {
        display: block !important;
        font-size: 12px;
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 16px 16px 6px;
        background: #f5f5f8;
    }

    /* Nav container — white card on dashboard, hidden on sub-pages */
    .account-nav-container {
        position: relative;
        background: #fff;
        box-shadow: none;
        padding: 0;
    }

    /* Remove old scroll fade */
    .account-nav-container::after {
        display: none;
    }

    /* Vertical list */
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-direction: column;
        overflow: visible;
        white-space: normal;
        gap: 0;
        padding: 0;
        margin: 0;
        border: none;
        list-style: none;
    }

    .woocommerce-MyAccount-navigation ul li {
        flex: none;
        border: none !important;
        border-bottom: 1px solid #f0f0f2 !important;
    }

    .woocommerce-MyAccount-navigation ul li:last-child {
        border-bottom: none !important;
    }

    /* Each nav link — row with icon, label, chevron */
    .woocommerce-MyAccount-navigation ul li a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 15px 16px;
        font-size: 15px;
        font-weight: 500;
        color: #333;
        text-decoration: none;
        min-height: 52px;
        border-bottom: none;
        transition: background 0.15s;
        background: none;
    }

    .woocommerce-MyAccount-navigation ul li a:active {
        background: #f8f8fa;
    }

    /* Icon circle */
    .woocommerce-MyAccount-navigation ul li a .nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(0, 155, 220, 0.08);
        color: var(--color-primary);
        flex-shrink: 0;
        margin-right: 0;
    }

    .woocommerce-MyAccount-navigation ul li a .nav-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Label takes up space */
    .woocommerce-MyAccount-navigation ul li a .nav-label {
        flex: 1;
        min-width: 0;
    }

    /* Chevron arrow */
    .woocommerce-MyAccount-navigation ul li a .nav-chevron {
        display: block !important;
        flex-shrink: 0;
        color: #ccc;
        margin-left: auto;
    }

    /* Active/current item highlight */
    .woocommerce-MyAccount-navigation ul li.is-active a {
        color: var(--color-primary);
        font-weight: 600;
        background: rgba(0, 155, 220, 0.04);
        border-bottom: none;
        border-right: none;
    }

    .woocommerce-MyAccount-navigation ul li.is-active a .nav-icon {
        background: rgba(0, 155, 220, 0.15);
    }

    /* Logout item — special red styling */
    .woocommerce-MyAccount-navigation ul li:last-child a .nav-icon {
        background: rgba(255, 74, 74, 0.08);
        color: #e53935;
    }

    .woocommerce-MyAccount-navigation ul li:last-child a {
        color: #e53935;
    }

    .woocommerce-MyAccount-navigation ul li:last-child a .nav-chevron {
        display: none;
    }

    /* ===========================================
       DASHBOARD PAGE — Show sidebar nav as content
       =========================================== */

    /* On dashboard: reorder so content (hero) shows first, then sidebar (nav list) */
    .myaccount-dashboard .sevenday-account-grid {
        display: flex;
        flex-direction: column;
    }

    .myaccount-dashboard .sevenday-account-content {
        order: 1;
    }

    .myaccount-dashboard .sevenday-account-sidebar {
        order: 2;
        background: transparent !important;
        padding: 0 !important;
    }

    /* On dashboard: nav list goes edge-to-edge, no card wrapper */
    .myaccount-dashboard .account-nav-container {
        background: #fff;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        padding: 0;
    }

    /* On mobile landing page: hide desktop dashboard content (nav list IS the dashboard) */
    .sd-dash-desktop-only {
        display: none !important;
    }

    /* Hide "Dashboard" nav item on mobile — landing page IS the dashboard */
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard {
        display: none;
    }

    /* ===========================================
       SUB-PAGES — Hide sidebar, show only content
       =========================================== */

    /* On sub-pages (not dashboard): hide the entire sidebar */
    .woocommerce-account:not(.myaccount-dashboard) .sevenday-account-sidebar {
        display: none !important;
    }

    /* ===========================================
       SUB-PAGES — Full-screen takeover (same as Orders page)
       Back bar becomes the header, content fills viewport.
       =========================================== */
    .woocommerce-account:not(.myaccount-dashboard) .sevenday-account-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999999;
        overflow-y: auto;
        background: #fff;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0;
        box-shadow: none;
    }

    /* Sub-page inner content padding */
    .woocommerce-account:not(.myaccount-dashboard) .woocommerce-MyAccount-content {
        padding: 10px 16px 16px;
    }

    /* Addresses — tighten spacing */
    .sd-addresses-header {
        margin-bottom: 14px;
    }
    .sd-addresses-header h2 {
        font-size: 16px;
        margin: 0 0 4px;
    }
    .sd-addresses-header p {
        font-size: 13px;
    }

    /* View Order — flush layout */
    .sd-view-order {
        padding-top: 0;
    }
    .sd-vo-banner {
        margin-top: 0;
    }

    /* Edit Account — compact sections */
    .sd-account-section {
        margin-bottom: 10px;
    }
    .sd-account-section-header {
        padding: 12px 14px;
    }
    .sd-account-section-body {
        padding: 10px 14px 14px;
    }

    /* ===========================================
       MOBILE BACK BAR — Sub-page header with back arrow
       =========================================== */
    .sd-mobile-back-bar {
        display: flex !important;
        align-items: center;
        gap: 8px;
        background: #fff;
        padding: 12px 14px;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .sd-back-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f5f5f8;
        color: #333;
        text-decoration: none;
        flex-shrink: 0;
    }

    .sd-back-link:active {
        background: #eee;
    }

    .sd-back-title {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        font-family: var(--font-primary);
    }

    /* ===========================================
       DASHBOARD — Hide desktop, show mobile
       =========================================== */
    .sd-dash-welcome {
        display: none !important;
    }

    .sd-dash-stats {
        display: none !important;
    }

    /* ---- Mobile Profile Hero ---- */
    .sd-m-hero {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 0;
    }

    .sd-m-hero-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(145deg, #009BDC 0%, #0080c0 45%, #00C896 100%);
    }

    .sd-m-hero-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 25% 85%, rgba(255, 255, 255, 0.09) 0%, transparent 55%),
            radial-gradient(circle at 75% 15%, rgba(255, 255, 255, 0.07) 0%, transparent 45%);
    }

    .sd-m-hero-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 32px 24px 40px;
    }

    .sd-m-hero-avatar {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid rgba(255, 255, 255, 0.85);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        margin-bottom: 14px;
        animation: sdMPulseRing 3s ease-in-out infinite;
    }

    .sd-m-hero-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sd-m-hero-name {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        margin: 0 0 2px;
        line-height: 1.2;
        font-family: var(--font-primary);
    }

    .sd-m-hero-email {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
        margin: 0 0 14px;
    }

    .sd-m-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 10.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.14);
        padding: 5px 14px;
        border-radius: 20px;
        margin-bottom: 16px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .sd-m-hero-badge svg {
        opacity: 0.75;
    }

    .sd-m-hero-edit {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        color: var(--color-primary);
        font-size: 12px;
        font-weight: 600;
        padding: 9px 24px;
        border-radius: 24px;
        text-decoration: none;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12);
        min-height: 38px;
        transition: transform 0.15s;
        font-family: var(--font-primary);
    }

    .sd-m-hero-edit:active {
        transform: scale(0.96);
    }

    /* ---- Mobile Stats Bar (floating card) ---- */
    .sd-m-stats-bar {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;
        margin: -24px 12px 0;
        padding: 16px 8px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        position: relative;
        z-index: 2;
        animation: sdMSlideUp 0.4s ease 0.1s both;
    }

    .sd-m-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .sd-m-stat-num {
        font-size: 20px;
        font-weight: 800;
        color: #222;
        line-height: 1.1;
        font-family: var(--font-primary);
    }

    .sd-m-stat-lbl {
        font-size: 10px;
        font-weight: 500;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .sd-m-stat-divider {
        width: 1px;
        height: 28px;
        background: #eee;
        flex-shrink: 0;
    }

    /* ===========================================
       QUICK ACTIONS — 3-column icon grid
       =========================================== */
    .sd-dash-section-title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #333;
        padding: 0;
    }

    .sd-dash-quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 20px;
        animation: sdMSlideUp 0.35s ease 0.1s both;
    }

    .sd-quick-card {
        display: flex;
        padding: 14px 6px 12px;
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #f0f0f0;
        box-shadow: none;
        gap: 5px;
        min-height: 84px;
        text-decoration: none;
    }

    .sd-quick-card:active {
        transform: scale(0.97);
    }

    .sd-quick-card .sd-quick-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-bottom: 0;
    }

    .sd-quick-card .sd-quick-icon svg {
        width: 20px;
        height: 20px;
    }

    .sd-quick-card h4 {
        font-size: 11px;
        font-weight: 600;
        margin: 0;
        color: #444;
        line-height: 1.2;
    }

    .sd-quick-card p {
        display: none;
    }

    /* ===========================================
       RECENT ORDERS — Vertical card stack
       =========================================== */
    .sd-dash-section-header {
        margin-bottom: 10px;
        align-items: center;
        animation: sdMSlideUp 0.35s ease 0.15s both;
    }

    .sd-dash-view-all {
        font-size: 12px;
        white-space: nowrap;
    }

    .sd-dash-recent-orders {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        animation: sdMSlideUp 0.35s ease 0.2s both;
    }

    .sd-recent-order-card {
        flex: none;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #f0f0f0;
        box-shadow: none;
        align-items: center;
    }

    .sd-recent-order-img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .sd-recent-order-info {
        flex: 1;
        min-width: 0;
    }

    .sd-recent-order-id {
        font-size: 11px;
    }

    .sd-recent-order-name {
        font-size: 13px;
    }

    .sd-recent-order-meta {
        font-size: 11px;
    }

    .sd-recent-order-status {
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid #f0f0f0;
    }

    /* ===========================================
       VIEW ORDER — Tracking app feel
       =========================================== */
    .sd-view-order {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* Status banner — full width bleed */
    .sd-vo-banner {
        border-radius: 0 !important;
        border-left: none !important;
        border-top: 4px solid;
        margin: 0 -14px 14px;
        padding: 18px 14px;
    }

    .sd-vo-banner h2 {
        font-size: 18px;
    }

    .sd-vo-banner p {
        font-size: 13px;
    }

    /* Info card — 2x2 grid */
    .sd-vo-info-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        border-radius: 12px;
        background: #fff;
        box-shadow: none;
        overflow: hidden;
        border: 1px solid #f0f0f0;
        margin-bottom: 12px;
    }

    .sd-vo-info-item {
        padding: 13px 14px;
        border-bottom: 1px solid #f0f0f0;
    }

    .sd-vo-info-item:nth-child(odd) {
        border-right: 1px solid #f0f0f0;
    }

    .sd-vo-info-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .sd-vo-info-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .sd-vo-info-value {
        font-size: 13px;
    }

    /* Timeline — white card */
    .sd-vo-timeline-section {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        padding: 16px;
        box-shadow: none;
        margin-bottom: 12px;
    }

    .sd-vo-timeline-section h3 {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .sd-vo-timeline {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0 0 12px;
    }

    .sd-vo-step {
        flex-direction: row;
        gap: 14px;
    }

    .sd-vo-step-line {
        width: 3px;
        height: 22px;
        min-width: unset;
        margin-top: 0;
        margin-left: 17px;
    }

    /* Order details — card with scroll */
    .sd-vo-details {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        padding: 14px;
        box-shadow: none;
        overflow-x: auto;
    }

    .sd-vo-details table {
        min-width: 480px;
    }

    /* Cancelled message */
    .sd-vo-cancelled-msg {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        padding: 18px;
        box-shadow: none;
    }

    /* Sticky bottom action bar */
    .sd-vo-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        padding: 10px 16px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        gap: 8px;
    }

    .sd-vo-bottom-bar .sd-vo-bar-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 44px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        border: none;
        font-family: var(--font-primary);
    }

    .sd-vo-bar-btn:active {
        transform: scale(0.97);
    }

    .sd-vo-bar-btn--back {
        background: #f0f0f3;
        color: #333;
    }

    .sd-vo-bar-btn--reorder {
        background: var(--color-primary);
        color: #fff;
    }

    .sd-vo-bar-btn--help {
        background: rgba(0, 155, 220, 0.08);
        color: var(--color-primary);
    }

    /* ===========================================
       ADDRESSES — Colored card stack
       =========================================== */
    .sd-addresses-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sd-address-card {
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid #f0f0f0;
        overflow: hidden;
        animation: sdMSlideUp 0.35s ease both;
    }

    .sd-address-card:nth-child(1) {
        border-left: 4px solid var(--color-primary);
        animation-delay: 0.05s;
    }

    .sd-address-card:nth-child(2) {
        border-left: 4px solid var(--color-grocery);
        animation-delay: 0.1s;
    }

    .sd-address-card:nth-child(n+3) {
        border-left: 4px solid var(--color-primary);
        animation-delay: 0.15s;
    }

    .sd-address-card-header {
        padding: 12px 14px;
    }

    .sd-address-card-body {
        padding: 12px 14px;
    }

    .sd-address-card-body address {
        font-size: 13px;
        line-height: 1.6;
    }

    .sd-address-edit-btn {
        min-height: 44px;
        padding: 8px 16px;
        border-radius: 22px;
        font-size: 12px;
    }

    .sd-add-address-btn {
        display: block;
        width: 100%;
        text-align: center;
        border-radius: 12px;
        padding: 14px 20px;
        font-size: 14px;
        min-height: 44px;
    }

    /* ===========================================
       EDIT ACCOUNT — Clean form cards
       =========================================== */
    .sd-account-section {
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        box-shadow: none;
        background: #fff;
        margin-bottom: 12px;
    }

    .sd-account-section-header {
        padding: 14px 16px;
    }

    .sd-account-section-header h3 {
        font-size: 14px;
    }

    .sd-account-section-body {
        padding: 14px 16px;
    }

    /* Micro-label inputs */
    .sd-edit-account .woocommerce-form-row label,
    .sd-account-section .woocommerce-form-row label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #999;
        font-weight: 600;
        margin-bottom: 5px;
    }

    /* 16px font prevents iOS zoom */
    .sd-edit-account input[type="text"],
    .sd-edit-account input[type="email"],
    .sd-edit-account input[type="password"],
    .sd-edit-account input[type="tel"],
    .sd-edit-account select,
    .sd-edit-account textarea,
    .sd-account-section input[type="text"],
    .sd-account-section input[type="email"],
    .sd-account-section input[type="password"],
    .sd-account-section input[type="tel"],
    .sd-account-section select,
    .sd-account-section textarea {
        font-size: 16px !important;
        border-radius: 12px;
        min-height: 48px;
        padding: 12px 14px;
        border: 1.5px solid #e5e5e5;
        transition: border-color 0.2s;
        width: 100%;
        box-sizing: border-box;
    }

    .sd-edit-account input:focus,
    .sd-account-section input:focus,
    .sd-edit-account select:focus,
    .sd-account-section select:focus {
        border-color: var(--color-primary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 155, 220, 0.08);
    }

    .sd-form-row-group {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Sticky save button */
    .sd-account-submit {
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: #fff;
        margin: 0 -14px;
        padding: 12px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }

    .sd-account-submit .sd-btn-primary,
    .sd-edit-account .sd-btn-primary,
    .sd-edit-account button[type="submit"] {
        width: 100%;
        min-height: 48px;
        border-radius: 12px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ===========================================
       DOWNLOADS — File manager cards
       =========================================== */
    .sd-download-card {
        flex-wrap: nowrap;
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid #f0f0f0;
        background: #fff;
        padding: 14px;
        gap: 12px;
        animation: sdMSlideUp 0.35s ease both;
    }

    .sd-download-card:nth-child(1) {
        animation-delay: 0.05s;
    }

    .sd-download-card:nth-child(2) {
        animation-delay: 0.1s;
    }

    .sd-download-card:nth-child(3) {
        animation-delay: 0.15s;
    }

    .sd-download-card:nth-child(4) {
        animation-delay: 0.2s;
    }

    .sd-download-icon {
        background: linear-gradient(135deg, rgba(0, 155, 220, 0.1), rgba(0, 200, 150, 0.1));
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    .sd-download-product {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    .sd-download-file {
        font-size: 12px;
    }

    .sd-download-meta {
        flex-direction: column;
        gap: 2px;
        font-size: 11px;
    }

    /* Circular icon-only download button */
    .sd-download-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 50%;
        padding: 0;
        font-size: 0;
        justify-content: center;
        flex-shrink: 0;
    }

    .sd-download-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* ===========================================
       PAYMENT METHODS — Stacked cards
       =========================================== */
    .payment-method-card {
        flex-direction: column;
        align-items: stretch;
        border-radius: 12px;
        box-shadow: none;
        border: 1px solid #f0f0f0;
        border-left: 4px solid var(--color-primary);
        padding: 14px;
        gap: 12px;
    }

    .payment-method-info {
        gap: 12px;
    }

    .payment-method-actions {
        display: flex;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .payment-method-actions .method-action-link {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        background: rgba(0, 155, 220, 0.06);
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

    .payment-method-actions .method-action-link.delete {
        background: rgba(255, 109, 46, 0.06);
    }

    /* ===========================================
       GENERAL POLISH
       =========================================== */

    /* Touch target enforcement */
    .woocommerce-account a.button,
    .woocommerce-account button,
    .woocommerce-account input[type="submit"],
    .woocommerce-account .woocommerce-Button {
        min-height: 44px;
        border-radius: 10px;
    }

    /* Notices */
    .woocommerce-account .woocommerce-info,
    .woocommerce-account .woocommerce-message,
    .woocommerce-account .woocommerce-error {
        border-radius: 12px;
        margin: 0 16px 12px;
        font-size: 13px;
    }

    .woocommerce-account fieldset {
        border-radius: 14px;
    }

    /* Content heading */
    .woocommerce-MyAccount-content h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }

}

/* ============================================
   RESPONSIVE — My Account (Mid-Small ≤ 600px)
   ============================================ */
@media (max-width: 600px) {

    /* Quick actions: 2 columns for mid-small screens */
    .sd-dash-quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Recent order cards slightly narrower */
    .sd-recent-order-card {
        flex: 0 0 240px;
    }

    /* View order info: 2x2 stays but tighter */
    .sd-vo-info-item {
        padding: 11px 12px;
    }
}

/* ============================================
   RESPONSIVE — My Account (Ultra-Small ≤ 480px)
   ============================================ */
@media (max-width: 480px) {

    /* Profile hero — tighter on small screens */
    .sd-m-hero-inner {
        padding: 22px 16px 32px;
    }

    .sd-m-hero-avatar {
        width: 64px;
        height: 64px;
    }

    .sd-m-hero-name {
        font-size: 17px;
    }

    .sd-m-hero-email {
        font-size: 11px;
    }

    .sd-m-hero-edit {
        font-size: 11px;
        padding: 7px 18px;
        min-height: 34px;
    }

    .sd-m-hero-badge {
        font-size: 9.5px;
        padding: 4px 12px;
    }

    /* Stats bar — tighter */
    .sd-m-stats-bar {
        margin: -20px 10px 0;
        padding: 12px 4px;
    }

    .sd-m-stat-num {
        font-size: 17px;
    }

    .sd-m-stat-lbl {
        font-size: 9px;
    }

    .sd-m-stat-divider {
        height: 24px;
    }

    /* Sub-pages: tighten inner padding on small screens */
    .woocommerce-account:not(.myaccount-dashboard) .woocommerce-MyAccount-content {
        padding: 8px 12px 14px;
    }

    /* Addresses — compact */
    .sd-addresses-header {
        margin-bottom: 10px;
    }

    /* Edit Account — compact */
    .sd-account-section-header {
        padding: 10px 12px;
    }
    .sd-account-section-body {
        padding: 8px 12px 12px;
    }

    /* Dashboard content — tighter padding on small screens */
    /* Nav list tighter on small screens */
    .woocommerce-MyAccount-navigation ul li a {
        padding: 13px 14px;
        font-size: 14px;
        gap: 12px;
        min-height: 48px;
    }

    .woocommerce-MyAccount-navigation ul li a .nav-icon {
        width: 36px;
        height: 36px;
    }

    .woocommerce-MyAccount-navigation ul li a .nav-icon svg {
        width: 18px;
        height: 18px;
    }

    .sd-nav-mobile-heading {
        font-size: 11px;
        padding: 14px 14px 5px;
    }

    /* Quick actions: 2 columns, shorter cards */
    .sd-dash-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-quick-card {
        min-height: 72px;
        padding: 12px 6px 10px;
    }

    .sd-quick-card .sd-quick-icon {
        width: 36px;
        height: 36px;
    }

    .sd-quick-card .sd-quick-icon svg {
        width: 18px;
        height: 18px;
    }

    /* Recent orders: already stacked vertically at 768px */

    /* View order: tighter margins at 480px */
    .sd-vo-banner {
        margin: 0 -12px 12px;
        padding: 16px 12px;
    }

    /* View order info: single column */
    .sd-vo-info-card {
        grid-template-columns: 1fr;
    }

    .sd-vo-info-item {
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0;
    }

    .sd-vo-info-item:last-child {
        border-bottom: none;
    }

    /* Sticky save button — tighter at 480px */
    .sd-account-submit {
        margin: 0 -12px;
        padding: 10px 12px;
    }

}

/* Orders page mobile styles */
@media (max-width: 900px) {
    .fk-filters-sidebar {
        display: none;
    }

    .fk-desktop-search {
        display: none;
    }

    .fk-item-price {
        display: none;
    }

    .fk-item-status-desktop {
        display: none;
    }

    .fk-orders-page-container {
        display: block;
        background: #f1f3f6;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999999;
        overflow-y: auto;
        margin: 0 !important;
        padding: 0 !important;
    }

    .fk-mobile-header-bar {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 16px;
        background: var(--color-bg-white);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        position: sticky;
        top: 0;
        z-index: 1000;
        height: 56px;
    }

    .fk-mobile-back-btn {
        color: var(--color-text-dark);
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .fk-mobile-page-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-text-dark);
        margin: 0;
        line-height: 1;
        flex: 1;
    }

    .fk-mobile-header-icons {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .fk-mobile-icon-btn {
        color: var(--color-text-dark);
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    .fk-mobile-controls {
        display: flex;
        gap: 10px;
        padding: 10px 16px;
        background: var(--color-bg-white);
        border-bottom: 1px solid #f0f0f0;
    }

    .fk-mobile-search {
        flex: 1;
        position: relative;
    }

    .fk-mobile-search input {
        width: 100%;
        height: 40px;
        background: var(--color-bg-white);
        border: 1px solid #c2c2c2;
        border-radius: 8px;
        padding-left: 40px;
        font-size: 14px;
        margin: 0;
        box-shadow: none;
    }

    .fk-mobile-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #878787;
    }

    .fk-mobile-filter-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--color-bg-white);
        border: none;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-dark);
        padding: 0 10px;
        cursor: pointer;
    }

    .fk-order-item-card {
        flex-direction: row;
        border: none;
        border-bottom: 4px solid #f1f3f6;
        border-radius: 0;
        margin-bottom: 0;
        padding: 16px;
        gap: 14px;
        align-items: flex-start;
        position: relative;
        background: var(--color-bg-white);
    }

    .fk-orders-content {
        padding-bottom: 50px;
    }

    .fk-item-img-box {
        width: 60px;
        height: 60px;
    }

    .fk-item-info {
        flex: 1;
        gap: 4px;
        min-width: 0;
    }

    .fk-mobile-status-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;
    }

    .fk-mobile-status-row .fk-status-dot {
        width: 8px;
        height: 8px;
    }

    .fk-mobile-status-text {
        font-size: 14px;
        color: var(--color-text-dark);
        font-weight: 400;
    }

    .fk-item-title {
        font-size: 14px;
        color: #878787;
        font-weight: 400;
        margin: 0;
        -webkit-line-clamp: 2;
    }

    .fk-mobile-rating {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 4px;
    }

    .fk-stars {
        color: #e0e0e0;
        font-size: 16px;
        letter-spacing: 2px;
    }

    .fk-rate-text {
        font-size: 12px;
        color: #878787;
    }

    .fk-order-item-card::after {
        content: '\203A';
        font-size: 24px;
        color: var(--color-text-dark);
        margin-left: 8px;
        align-self: center;
    }

    .fk-no-more-orders {
        display: block;
        text-align: center;
        padding: 20px;
        color: #878787;
        font-size: 14px;
        background: #f1f3f6;
    }
}

/* ============================================
   INSTAMART STYLE - QUICK COMMERCE REDESIGN
   Brand Color System: Sky Blue + Beige Foundation
   Secondary Accents: Orange, Yellow, Green, Pink
   ============================================ */

/* Top Bar - Delivery Messaging (Teal/Green - Food & Grocery segment) */
.instamart-top-bar {
    background: var(--color-green);
    color: var(--color-text-white);
    padding: 8px 0;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.instamart-top-bar .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}

.instamart-top-bar .delivery-msg {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.instamart-top-bar .delivery-msg svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-white);
}

.instamart-top-bar .delivery-time {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

/* Instamart Header */
.instamart-header {
    background: var(--color-primary);
    padding: var(--spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow var(--transition-normal);
}

.instamart-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.instamart-header .header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/* Location Selector - Subtle on Sky Blue header */
.location-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--color-text-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
}

.location-selector:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.location-selector svg {
    width: 20px;
    height: 20px;
}

.location-selector .location-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.location-selector .location-label {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.location-selector .location-value {
    font-weight: 600;
}

/* Instamart Search Bar */
.instamart-search {
    flex: 1;
    max-width: 550px;
    position: relative;
}

.instamart-search input {
    width: 100%;
    padding: 14px 20px;
    padding-left: 50px;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    background: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.instamart-search input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), var(--shadow-md);
}

.instamart-search input::placeholder {
    color: var(--color-text-light);
}

.instamart-search .search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
}

.instamart-search .search-icon svg {
    width: 20px;
    height: 20px;
}

.ref-pc-search-wrapper {
    position: relative;
    flex: 1;
}

/* ===== Live Search Dropdown ===== */
.sd-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-height: 420px;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sd-search-open .sd-search-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sd-search-results {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Loading state */
.sd-search-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.sd-search-loading[style*="block"] {
    display: flex;
}

.sd-search-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: sd-spin 0.6s linear infinite;
}

@keyframes sd-spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.sd-search-empty {
    display: none;
    padding: 24px 20px;
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Group labels */
.sd-search-group-label {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    text-transform: uppercase;
}

/* Search item row */
.sd-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s ease;
    cursor: pointer;
}

.sd-search-item:hover,
.sd-search-highlighted {
    background: #f0f4ff;
}

/* Thumbnail */
.sd-search-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-search-thumb svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-light);
}

/* Name & meta */
.sd-search-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sd-search-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-search-sub {
    font-size: 12px;
    color: var(--color-text-light);
}

/* Price (products) */
.sd-search-price {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.sd-search-price del {
    color: var(--color-text-light);
    font-weight: 400;
    font-size: 12px;
}

.sd-search-price ins {
    text-decoration: none;
}

/* Arrow (categories) */
.sd-search-arrow {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--color-text-light);
    font-weight: 300;
}

/* View all results link */
.sd-search-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sd-search-view-all:hover {
    background: #f0f7ff;
}

/* Mobile: full-width fixed overlay */
@media (max-width: 480px) {
    .sd-search-dropdown {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        max-height: 50vh;
        border-radius: var(--radius-md);
    }
}

/* Instamart Header Actions */
.instamart-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.instamart-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-white);
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.instamart-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.instamart-btn svg {
    width: 22px;
    height: 22px;
}

/* Cart Button - Brand Style (Yellow accent on Sky Blue header) */
.instamart-cart-btn {
    background: var(--color-yellow);
    color: var(--color-text-dark) !important;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    position: relative;
}

.instamart-cart-btn:hover {
    background: var(--color-yellow-dark);
}

.instamart-cart-btn .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-orange);
    color: white;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instamart-cart-btn .cart-count.bounce {
    animation: cartBounce 0.5s ease;
}

@keyframes cartBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

/* ============================================
   INSTAMART HERO SECTION
   Brand: Beige base with Sky Blue accent
   ============================================ */
.instamart-hero {
    background: var(--color-bg-cream);
    padding: var(--spacing-2xl) 0;
    position: relative;
    overflow: hidden;
}

.instamart-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: 50%;
    opacity: 0.1;
}

.instamart-hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xl);
}

.hero-text {
    max-width: 500px;
}

.hero-badge {
    display: inline-block;
    background: var(--color-orange);
    color: white;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
}

.hero-text h1 {
    font-size: 3rem;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.hero-text p {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xl);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.hero-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.hero-image {
    max-width: 450px;
}

.hero-image img {
    width: 100%;
    height: auto;
}

/* ============================================
   CIRCULAR CATEGORY GRID
   Brand: Beige section, subtle category accents
   ============================================ */
.category-circle-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
}

.category-circle-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: var(--spacing-lg);
}

.category-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.category-circle-item:hover {
    transform: translateY(-5px);
}

.category-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
}

.category-circle-item:hover .category-circle {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.category-circle svg,
.category-circle img {
    width: 45px;
    height: 45px;
}

.category-circle-item .category-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
    margin: 0;
}

/* Category Circle Colors - Soft pastels aligned with brand segments */
/* Food & Grocery - Teal/Green accent */
.category-circle.grocery {
    background: linear-gradient(135deg, #E8F5F0 0%, #D4EDE5 100%);
    border-color: rgba(0, 200, 150, 0.2);
}

/* Snacks - Orange accent (Hot Food segment) */
.category-circle.snacks {
    background: linear-gradient(135deg, #FFF5EE 0%, #FFE8D9 100%);
    border-color: rgba(255, 109, 46, 0.2);
}

/* Beverages - Sky Blue accent (Primary) */
.category-circle.beverages {
    background: linear-gradient(135deg, #E8F6FC 0%, #D0EDFA 100%);
    border-color: rgba(0, 155, 220, 0.2);
}

/* Dairy & Bakery - Yellow accent (Household segment) */
.category-circle.dairy {
    background: linear-gradient(135deg, #FFFBEB 0%, #FFF3C7 100%);
    border-color: rgba(255, 199, 44, 0.2);
}

/* Household - Yellow accent */
.category-circle.household {
    background: linear-gradient(135deg, #FFFBEB 0%, #FFF3C7 100%);
    border-color: rgba(255, 199, 44, 0.2);
}

/* Personal Care - Pink accent */
.category-circle.personal {
    background: linear-gradient(135deg, #FFF0F5 0%, #FFE4ED 100%);
    border-color: rgba(255, 74, 141, 0.2);
}

/* Baby & Kids - Sky Blue accent */
.category-circle.baby {
    background: linear-gradient(135deg, #E8F6FC 0%, #D0EDFA 100%);
    border-color: rgba(0, 155, 220, 0.2);
}

/* Health & Wellness - Teal/Green accent */
.category-circle.health {
    background: linear-gradient(135deg, #E8F5F0 0%, #D4EDE5 100%);
    border-color: rgba(0, 200, 150, 0.2);
}

/* Seasonal & Deals - Orange accent for excitement */
.category-circle.deals {
    background: linear-gradient(135deg, #FFF5EE 0%, #FFE8D9 100%);
    border-color: rgba(255, 109, 46, 0.3);
}

/* ============================================
   HORIZONTAL SCROLL SECTIONS
   Brand: Beige background, Sky Blue primary actions
   ============================================ */
.horizontal-scroll-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg-cream);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-title h2 {
    font-size: var(--font-size-2xl);
    margin: 0;
    color: var(--color-text-dark);
}

.section-title .emoji {
    font-size: 1.5rem;
}

.countdown-timer {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-orange);
    color: white;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.countdown-timer svg {
    width: 16px;
    height: 16px;
}

.see-all-link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
}

.see-all-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Horizontal Scroll Container */
.horizontal-scroll-wrapper {
    position: relative;
}

.horizontal-scroll-container {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: var(--spacing-sm) 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Scroll Arrows - Sky Blue accent on hover */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
    color: var(--color-text-dark);
}

.scroll-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.scroll-arrow.prev {
    left: -20px;
}

.scroll-arrow.next {
    right: -20px;
}

.scroll-arrow svg {
    width: 20px;
    height: 20px;
}

/* ============================================
   PRODUCT CARD - HORIZONTAL STYLE
   Brand: White cards, Sky Blue buttons, Orange badges
   ============================================ */
.product-card-horizontal {
    flex: 0 0 200px;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    position: relative;
    border: 1px solid var(--color-border);
}

.product-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.product-card-horizontal .discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-orange);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    z-index: 2;
}

.product-card-horizontal .product-image {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--color-bg-white);
}

.product-card-horizontal .product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-card-horizontal .product-info {
    padding: var(--spacing-md);
    background: var(--color-bg-white);
}

.product-card-horizontal .product-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-xs);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 40px;
    text-decoration: none;
}

.product-card-horizontal .product-name:hover {
    color: var(--color-primary);
}

.product-card-horizontal .product-weight {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.product-card-horizontal .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.product-card-horizontal .price-info {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.product-card-horizontal .sale-price {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-dark);
}

.product-card-horizontal .regular-price {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    text-decoration: line-through;
}

/* Primary action button - Sky Blue (brand primary) */
.product-card-horizontal .add-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.product-card-horizontal .add-btn:hover {
    background: var(--color-primary-dark);
    transform: scale(1.05);
}

.product-card-horizontal .add-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.product-card-horizontal .add-btn.added {
    background: var(--color-green);
}

/* ============================================
   HOT DEALS SECTION
   Brand: Beige base with subtle warm tint
   ============================================ */
.hot-deals-section {
    background: var(--color-bg-cream);
    border-bottom: 1px solid var(--color-border);
}

.hot-deals-section .section-title h2 {
    color: var(--color-text-dark);
}

/* ============================================
   BESTSELLERS SECTION
   Brand: Clean beige background
   ============================================ */
.bestsellers-section {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
}

/* No products message */
.no-products {
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    padding: var(--spacing-2xl);
    text-align: center;
    width: 100%;
}

/* ============================================
   DELIVERY OPTIONS SECTION
   Brand: Beige base with Sky Blue accents
   ============================================ */
.delivery-options-section {
    background: var(--color-bg-cream);
    padding: var(--spacing-3xl) 0;
    position: relative;
}

.delivery-options-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
}

.delivery-options-section h2 {
    text-align: center;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-2xl);
}

.delivery-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.delivery-option-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.delivery-option-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.delivery-option-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
}

.delivery-option-icon svg {
    width: 35px;
    height: 35px;
    color: white;
}

.delivery-option-card h3 {
    color: var(--color-text-dark);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

.delivery-option-card .price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.delivery-option-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   SEVENDAY CAFÉ & PIZZA PROMO SECTION
   ============================================ */
.sevenday-promo-section {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg-cream);
}

.sevenday-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-lg);
}

/* Promo Card Base */
.sevenday-promo-card {
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sevenday-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Grab n' Go Card - Orange/Warm */
.promo-grab-go {
    background: linear-gradient(135deg, #FF8C42 0%, #FF6D2E 100%);
    color: white;
}

.promo-grab-go::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* Café Card - Rich Brown/Coffee */
.promo-cafe {
    background: linear-gradient(135deg, #FFC72C 0%, #E5B025 100%);
    color: #333;
}

.promo-cafe::before {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 180px;
    height: 180px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

/* Café card text adjustments for yellow background */
.promo-cafe .promo-card-title,
.promo-cafe .promo-card-subtitle,
.promo-cafe .promo-time-badge {
    color: #333;
}

.promo-cafe .promo-card-badge {
    background: rgba(0, 0, 0, 0.15);
    color: #333;
}

.promo-cafe .promo-card-cta {
    background: #333;
    color: #FFC72C;
}

.promo-cafe .promo-card-cta:hover {
    background: #222;
}

.promo-cafe .promo-card-visual svg {
    stroke: rgba(0, 0, 0, 0.15);
}

/* Pizza Card - Red/Italian */
.promo-pizza {
    background: linear-gradient(135deg, #FF6D2E 0%, #E55A1F 100%);
    color: white;
}

.promo-pizza::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -15%;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* Promo Card Content */
.promo-card-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
    backdrop-filter: blur(4px);
}

/* In-Store Only Badge */
.in-store-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-primary);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 155, 220, 0.3);
    z-index: 5;
}

.in-store-badge svg {
    width: 12px;
    height: 12px;
}

.promo-cafe .in-store-badge {
    background: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.promo-card-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
    line-height: 1.2;
}

.promo-card-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin: 0 0 var(--spacing-md);
    line-height: 1.4;
}

.promo-price-tag {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: var(--spacing-sm);
}

.promo-price-tag .currency {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-top: 4px;
}

.promo-price-tag .amount {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.promo-price-tag .cents {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-top: 4px;
}

.promo-card-note {
    font-size: 11px;
    opacity: 0.8;
    margin: 0;
}

.promo-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: white;
    color: var(--color-text-dark);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-top: auto;
    align-self: flex-start;
}

.promo-card-cta:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.promo-card-cta svg {
    width: 16px;
    height: 16px;
}

/* Promo Card Icon/Image */
.promo-card-visual {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 100px;
    height: 100px;
    opacity: 0.9;
}

.promo-card-visual svg {
    width: 100%;
    height: 100%;
}

/* Large Feature Card - Spans 2 columns */
.promo-feature-card {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    align-items: center;
}

.promo-feature-card .promo-content {
    padding-right: var(--spacing-xl);
}

.promo-feature-card .promo-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.promo-feature-card .promo-visual img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
}

/* Sevenday Brand Highlight */
.sevenday-brand-text {
    font-family: var(--font-display);
    letter-spacing: 1px;
}

.sevenday-brand-text span {
    color: var(--color-yellow);
}

/* Time Badge */
.promo-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    margin-top: var(--spacing-sm);
}

.promo-time-badge svg {
    width: 14px;
    height: 14px;
}

/* Responsive Promo Grid */
@media (max-width: 992px) {
    .sevenday-promo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .promo-feature-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .sevenday-promo-section {
        padding: var(--spacing-md) 0;
    }

    .sevenday-promo-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .promo-feature-card {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }

    .promo-feature-card .promo-visual {
        display: none;
    }

    .sevenday-promo-card {
        min-height: auto;
        padding: var(--spacing-md);
    }

    .promo-card-badge {
        font-size: 9px;
        padding: 3px 8px;
    }

    .promo-card-title {
        font-size: var(--font-size-base);
    }

    .promo-card-subtitle {
        font-size: 11px;
        margin-bottom: var(--spacing-sm);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .promo-price-tag {
        margin-bottom: var(--spacing-sm);
    }

    .promo-price-tag .amount {
        font-size: 1.75rem;
    }

    .promo-price-tag .currency,
    .promo-price-tag .cents {
        font-size: 0.875rem;
    }

    .promo-card-cta {
        padding: 8px 14px;
        font-size: 12px;
    }

    .promo-card-visual {
        width: 50px;
        height: 50px;
        opacity: 0.4;
        right: 10px;
        bottom: 10px;
    }

    .promo-time-badge {
        font-size: 11px;
    }

    .in-store-badge {
        font-size: 8px;
        padding: 3px 6px;
        top: 8px;
        right: 8px;
    }

    .in-store-badge svg {
        width: 10px;
        height: 10px;
    }

    .promo-card-note {
        display: none;
    }
}

@media (max-width: 480px) {
    .sevenday-promo-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
    }

    .sevenday-promo-grid::-webkit-scrollbar {
        display: none;
    }

    .sevenday-promo-card {
        min-width: 260px;
        max-width: 280px;
        min-height: auto;
        padding: var(--spacing-md);
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .promo-card-title {
        font-size: var(--font-size-base);
        margin-bottom: 4px;
    }

    .promo-card-subtitle {
        -webkit-line-clamp: 2;
    }

    .promo-price-tag .amount {
        font-size: 1.5rem;
    }

    .promo-card-visual {
        width: 45px;
        height: 45px;
    }

    .promo-card-cta {
        padding: 6px 12px;
        font-size: 11px;
    }

    .promo-card-cta svg {
        width: 12px;
        height: 12px;
    }

    /* Feature card as horizontal scroll too */
    .promo-feature-card {
        min-width: 90%;
        grid-template-columns: 1fr;
    }

    .promo-feature-card .promo-content {
        padding: var(--spacing-md);
    }
}

/* ============================================
   BLINKIT-STYLE CATEGORY GRID
   ============================================ */
.bk-category-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg-white);
}

.bk-category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.bk-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg-cream);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.bk-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
    background: var(--color-bg-white);
}

.bk-category-card .category-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bk-category-card .category-image img,
.bk-category-card .category-image svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bk-category-card .category-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* ============================================
   BLINKIT-STYLE PRODUCT STRIPS
   ============================================ */
.bk-product-strip {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
}

.bk-product-strip:nth-child(even) {
    background: var(--color-bg-cream);
}

.bk-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.bk-strip-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.bk-strip-title h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.bk-strip-title .strip-icon {
    font-size: 1.3rem;
}

.bk-see-all {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bk-see-all:hover {
    text-decoration: underline;
}

/* Horizontal Scroll Container - Blinkit Style */
.bk-scroll-container {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bk-scroll-container::-webkit-scrollbar {
    display: none;
}

/* ============================================
   BLINKIT-STYLE PRODUCT CARD
   ============================================ */
.bk-product-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-fast);
    position: relative;
}

.bk-product-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

/* Time Badge */
.bk-product-card .time-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-bg-cream);
    color: var(--color-text-dark);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 2;
}

.bk-product-card .time-badge svg {
    width: 10px;
    height: 10px;
}

/* Discount Badge */
.bk-product-card .discount-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    z-index: 2;
}

/* Product Image - 1:1 Aspect Ratio */
.bk-product-card .bk-product-image {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    background: var(--color-bg-white);
}

.bk-product-card .bk-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Product Info */
.bk-product-card .bk-product-info {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.bk-product-card .bk-product-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dark);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 34px;
    text-decoration: none;
}

.bk-product-card .bk-product-name:hover {
    color: var(--color-primary);
}

.bk-product-card .bk-product-unit {
    font-size: 11px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.bk-product-card .bk-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
}

.bk-product-card .bk-price-info {
    display: flex;
    flex-direction: column;
}

.bk-product-card .bk-current-price {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-dark);
}

.bk-product-card .bk-original-price {
    font-size: 11px;
    color: var(--color-text-light);
    text-decoration: line-through;
}

/* Unified ADD Button - All Pages */
.bk-add-btn {
    background: #388E3C;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    font-family: inherit;
}

.bk-add-btn:hover {
    background: #2E7D32;
}

.bk-add-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.bk-add-btn.added {
    background: #2E7D32;
}

/* Cart Control Container */
.bk-cart-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bk-cart-control.loading {
    pointer-events: none;
}

.bk-cart-control.loading .bk-add-btn,
.bk-cart-control.loading .bk-qty-control {
    opacity: 0.7;
}

/* Spinner overlay */
.bk-cart-control.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(56, 142, 60, 0.3);
    border-top-color: #388E3C;
    border-radius: 50%;
    animation: spinLoader 0.6s linear infinite;
    z-index: 10;
}

@keyframes spinLoader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Quantity Control - Hidden by default */
.bk-qty-control {
    display: none;
    align-items: center;
    background: #388E3C;
    border-radius: 6px;
    overflow: hidden;
}

.bk-cart-control.has-items .bk-qty-control {
    display: flex;
}

.bk-cart-control.has-items .bk-add-btn {
    display: none;
}

.bk-qty-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #388E3C;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: background var(--transition-fast);
}

.bk-qty-btn:hover {
    background: #2E7D32;
}

.bk-qty-btn.bk-qty-minus {
    border-radius: 6px 0 0 6px;
}

.bk-qty-btn.bk-qty-plus {
    border-radius: 0 6px 6px 0;
}

.bk-qty-value {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #388E3C;
    font-weight: 700;
    font-size: 13px;
}

/* Error state */
.bk-cart-control.error .bk-qty-control {
    background: var(--color-red);
    animation: shake 0.3s ease;
}

.bk-cart-control.error .bk-qty-btn {
    background: var(--color-red);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* ============================================
   BLINKIT RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1200px) {
    .bk-category-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .bk-category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .bk-category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

    .bk-category-card {
        padding: var(--spacing-sm);
    }

    .bk-category-card .category-image {
        width: 60px;
        height: 60px;
    }

    .bk-category-card .category-label {
        font-size: var(--font-size-xs);
    }

    .bk-product-card {
        flex: 0 0 140px;
    }

    .bk-strip-title h3 {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 480px) {
    .bk-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bk-category-card .category-image {
        width: 50px;
        height: 50px;
    }

    .bk-product-card {
        flex: 0 0 130px;
    }

    .bk-product-card .bk-product-info {
        padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
    }

    .bk-product-card .bk-product-name {
        font-size: 12px;
        min-height: 32px;
    }

    .bk-product-card .bk-add-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .bk-product-card .bk-qty-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    .bk-product-card .bk-qty-value {
        min-width: 24px;
        height: 24px;
        font-size: 12px;
    }
}

/* ============================================
   INSTAMART RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1200px) {
    .category-circle-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .delivery-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   GLOBAL — Tablet (≤ 1024px)
   Location selector + button text labels make
   the header overflow at tablet widths. Fix:
   hide location, wrap search to row 2, icons only.
   Also kill beige body background at tablet.
   ============================================ */
@media (max-width: 1024px) {

    /* Kill beige background — looks like gaps at tablet */
    body {
        background: #fff;
    }
    .site-main {
        background: #fff;
    }

    /* Tighten container padding */
    .container {
        padding: 0 16px;
    }

    /* Hide location selector — saves ~180px */
    .location-selector {
        display: none;
    }

    /* Wrap header: search drops to row 2 */
    .instamart-header .header-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Search bar — full width on second row */
    .instamart-search {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
        margin-top: 4px;
    }

    .instamart-search input {
        padding: 10px 16px 10px 42px;
        font-size: var(--font-size-sm);
    }

    /* Actions: icons only, tighter gaps */
    .instamart-actions {
        gap: 6px;
        margin-left: auto;
    }

    .instamart-btn span {
        display: none;
    }

    .instamart-btn {
        padding: 6px 10px;
    }

    .instamart-btn svg {
        width: 20px;
        height: 20px;
    }

    .instamart-cart-btn {
        padding: 6px 14px;
    }
}

@media (max-width: 768px) {

    /* Top Bar - Single line, compact */
    .instamart-top-bar {
        padding: 6px 0;
    }

    .instamart-top-bar .container {
        flex-direction: row;
        gap: var(--spacing-sm);
        justify-content: center;
        flex-wrap: nowrap;
    }

    .instamart-top-bar .delivery-msg {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .instamart-top-bar .delivery-time {
        padding: 2px 8px;
        font-size: 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Header - Compact layout */
    .instamart-header {
        padding: var(--spacing-sm) 0;
    }

    .instamart-header .header-inner {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    /* Logo smaller on mobile */
    .site-logo .logo-text {
        font-size: var(--font-size-xl);
    }

    /* Hide location selector on mobile - save space */
    .location-selector {
        display: none;
    }

    /* Search bar full width below logo/actions */
    .instamart-search {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
        margin-top: var(--spacing-xs);
    }

    .instamart-search input {
        padding: 10px 16px 10px 42px;
        font-size: var(--font-size-sm);
    }

    /* Actions stay compact */
    .instamart-actions {
        margin-left: auto;
    }

    /* Hero */
    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    /* Category Grid */
    .category-circle-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .category-circle {
        width: 70px;
        height: 70px;
    }

    .category-circle svg,
    .category-circle img {
        width: 35px;
        height: 35px;
    }

    /* Scroll Arrows */
    .scroll-arrow {
        display: none;
    }

    /* Delivery Options */
    .delivery-options-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    /* Top Bar - Even more compact */
    .instamart-top-bar {
        padding: 4px 0;
    }

    .instamart-top-bar .delivery-msg {
        font-size: 10px;
    }

    .instamart-top-bar .delivery-time {
        font-size: 9px;
        padding: 2px 6px;
    }

    .instamart-top-bar .delivery-msg svg {
        width: 14px;
        height: 14px;
    }

    /* Header - Minimal */
    .instamart-header {
        padding: 8px 0;
    }

    .instamart-actions {
        gap: var(--spacing-xs);
    }

    .instamart-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .instamart-btn span {
        display: none;
    }

    .instamart-btn svg {
        width: 20px;
        height: 20px;
    }

    .instamart-cart-btn {
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .instamart-search input {
        padding: 8px 14px 8px 38px;
    }

    .instamart-search .search-icon {
        left: 12px;
    }

    .instamart-search .search-icon svg {
        width: 16px;
        height: 16px;
    }

    /* Hero */
    .instamart-hero {
        padding: var(--spacing-xl) 0;
    }

    .hero-text h1 {
        font-size: 1.5rem;
    }

    .hero-text p {
        font-size: var(--font-size-base);
    }

    .hero-badge {
        font-size: 10px;
        padding: 4px 12px;
    }

    .hero-cta {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    .hero-image {
        max-width: 280px;
    }

    /* Category Grid */
    .category-circle-section {
        padding: var(--spacing-xl) 0;
    }

    .category-circle-grid {
        gap: var(--spacing-sm);
    }

    .category-circle {
        width: 56px;
        height: 56px;
    }

    .category-circle svg,
    .category-circle img {
        width: 26px;
        height: 26px;
    }

    .category-circle-item .category-name {
        font-size: 10px;
    }

    /* Product Cards */
    .product-card-horizontal {
        flex: 0 0 150px;
    }

    .product-card-horizontal .product-image {
        height: 120px;
    }

    .product-card-horizontal .add-btn {
        padding: 6px 12px;
        font-size: var(--font-size-xs);
    }

    /* Section Headers */
    .horizontal-scroll-section {
        padding: var(--spacing-xl) 0;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .section-title h2 {
        font-size: var(--font-size-lg);
    }

    .section-title .emoji {
        font-size: 1.2rem;
    }

    .countdown-timer {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Delivery Options */
    .delivery-options-section {
        padding: var(--spacing-2xl) 0;
    }

    .delivery-options-section h2 {
        font-size: var(--font-size-xl);
    }

    .delivery-option-card {
        padding: var(--spacing-lg);
    }

    .delivery-option-icon {
        width: 56px;
        height: 56px;
    }

    .delivery-option-icon svg {
        width: 28px;
        height: 28px;
    }

    .delivery-option-card h3 {
        font-size: var(--font-size-lg);
    }

    .delivery-option-card .price {
        font-size: var(--font-size-xl);
    }
}

/* ============================================
   WOOCOMMERCE SHOP PAGE - ENHANCED MOBILE
   ============================================ */

/* Shop Page Container */
.woocommerce .woocommerce-products-header {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
}

.woocommerce .woocommerce-products-header__title {
    font-size: var(--font-size-2xl);
    color: var(--color-text-dark);
    margin: 0;
}

.woocommerce .woocommerce-result-count {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

.woocommerce .woocommerce-ordering {
    margin: 0;
}

.woocommerce .woocommerce-ordering select {
    padding: 10px 35px 10px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-white);
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    cursor: pointer;
}

/* Product Grid */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/* Individual Product Card */
.woocommerce ul.products li.product {
    float: none;
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    position: relative;
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

/* Sale Badge */
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-orange);
    color: white;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    z-index: 5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    min-width: auto;
    min-height: auto;
    line-height: 1.4;
}

/* Product Image */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product>a>img,
.woocommerce ul.products li.product img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    padding: var(--spacing-md);
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    margin: 0;
    display: block;
    border-radius: 15px 15px 0 0;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-dark);
    padding: var(--spacing-sm) var(--spacing-md) 0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 40px;
}

/* Product Price */
.woocommerce ul.products li.product .price {
    padding: var(--spacing-xs) var(--spacing-md);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    font-family: var(--font-primary);
}

.woocommerce ul.products li.product .price del {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    order: 2;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: var(--font-size-base);
    order: 1;
}

.woocommerce ul.products li.product .price>.amount,
.woocommerce ul.products li.product .price>span>.amount {
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: var(--font-size-base);
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_simple {
    display: block;
    margin: auto var(--spacing-md) var(--spacing-md);
    background: #388E3C;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background: #2E7D32;
    color: white;
}

.woocommerce ul.products li.product .button.loading {
    opacity: 0.7;
    pointer-events: none;
}

.woocommerce ul.products li.product .button.added {
    background: #2E7D32;
    color: white;
}

.woocommerce ul.products li.product .added_to_cart {
    display: block;
    text-align: center;
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md);
    color: #388E3C;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* Star Rating */
.woocommerce ul.products li.product .star-rating {
    margin: var(--spacing-xs) var(--spacing-md);
    font-size: 12px;
}

/* ============================================
   SHOP PAGE RESPONSIVE - TABLET
   ============================================ */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }
}

/* ============================================
   SHOP PAGE RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 768px) {

    /* Shop header */
    .woocommerce .woocommerce-products-header {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .woocommerce .woocommerce-products-header__title {
        font-size: var(--font-size-xl);
    }

    /* Toolbar - result count and ordering */
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        width: 100%;
        text-align: center;
        margin-bottom: var(--spacing-sm);
    }

    .woocommerce .woocommerce-ordering select {
        width: 100%;
    }

    /* 3-Column Grid on Mobile */
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 0 var(--spacing-xs);
    }

    /* Compact Product Card */
    .woocommerce ul.products li.product {
        border-radius: 12px;
    }

    .woocommerce ul.products li.product .onsale {
        top: 4px;
        left: 4px;
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 6px;
    }

    .woocommerce ul.products li.product img {
        height: 110px;
        padding: var(--spacing-xs);
        border-radius: 11px 11px 0 0;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: 11px;
        padding: 4px 6px 0;
        min-height: 30px;
        -webkit-line-clamp: 2;
    }

    .woocommerce ul.products li.product .price {
        padding: 2px 6px;
    }

    .woocommerce ul.products li.product .price ins,
    .woocommerce ul.products li.product .price>.amount {
        font-size: 13px;
    }

    .woocommerce ul.products li.product .price del {
        font-size: 10px;
    }

    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button {
        margin: auto 6px 6px;
        padding: 6px 8px;
        font-size: 10px;
        border-width: 1.5px;
    }

    .woocommerce ul.products li.product .star-rating {
        display: none;
    }

    .woocommerce ul.products li.product .added_to_cart {
        padding: 4px 6px 6px;
        font-size: 9px;
    }
}

/* ============================================
   SHOP PAGE RESPONSIVE - SMALL MOBILE
   ============================================ */
@media (max-width: 380px) {
    .woocommerce ul.products {
        gap: 5px;
    }

    .woocommerce ul.products li.product img {
        height: 90px;
        border-radius: 10px 10px 0 0;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: 10px;
        min-height: 26px;
    }

    .woocommerce ul.products li.product .price ins,
    .woocommerce ul.products li.product .price>.amount {
        font-size: 12px;
    }

    .woocommerce ul.products li.product .button {
        padding: 5px 6px;
        font-size: 9px;
    }
}

/* ============================================
   SINGLE PRODUCT PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .woocommerce div.product {
        padding: var(--spacing-md);
    }

    .woocommerce div.product div.images {
        margin-bottom: var(--spacing-lg);
    }

    .woocommerce div.product .product_title {
        font-size: var(--font-size-xl);
    }

    .woocommerce div.product p.price {
        font-size: var(--font-size-2xl);
    }

    .woocommerce div.product .quantity {
        margin-right: var(--spacing-sm);
    }

    .woocommerce div.product .single_add_to_cart_button {
        padding: 12px 24px;
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   CART PAGE MOBILE ENHANCEMENTS
   ============================================ */
@media (max-width: 768px) {
    .woocommerce-cart-form__contents {
        display: block;
    }

    .woocommerce-cart-form__contents thead {
        display: none;
    }

    .woocommerce-cart-form__contents tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border);
        position: relative;
    }

    .woocommerce-cart-form__contents .product-thumbnail {
        grid-row: span 3;
    }

    .woocommerce-cart-form__contents .product-thumbnail img {
        width: 80px;
        height: 80px;
        object-fit: contain;
    }

    .woocommerce-cart-form__contents .product-name {
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

    .woocommerce-cart-form__contents .product-price,
    .woocommerce-cart-form__contents .product-subtotal {
        font-size: var(--font-size-sm);
    }

    .woocommerce-cart-form__contents .product-quantity {
        display: flex;
        align-items: center;
    }

    .woocommerce-cart-form__contents .product-remove {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }

    .woocommerce-cart-form__contents .actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .woocommerce-cart-form__contents .coupon {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .woocommerce-cart-form__contents .coupon input {
        width: 100%;
    }
}

/* ============================================
   MOBILE SHOP ENHANCEMENTS - STICKY FILTER
   ============================================ */
@media (max-width: 768px) {

    /* Sticky sorting/filter bar */
    .woocommerce-notices-wrapper+.woocommerce-result-count,
    .woocommerce-notices-wrapper~.woocommerce-ordering,
    .woocommerce>.woocommerce-result-count,
    .woocommerce>.woocommerce-ordering {
        position: sticky;
        top: 60px;
        background: var(--color-bg-cream);
        z-index: 50;
        padding: var(--spacing-sm) 0;
    }

    /* Better touch targets for mobile */
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        display: flex;
        flex-direction: column;
    }

    /* Quick add button - larger touch target */
    .woocommerce ul.products li.product .button {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Product card shadow on touch */
    .woocommerce ul.products li.product:active {
        transform: scale(0.98);
        box-shadow: var(--shadow-sm);
    }
}

/* ============================================
   CATEGORY FILTER CHIPS (Mobile)
   ============================================ */
.shop-category-filter {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.shop-category-filter::-webkit-scrollbar {
    display: none;
}

.shop-category-chip {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.shop-category-chip:hover,
.shop-category-chip.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ============================================
   LOADING SKELETON FOR PRODUCTS
   ============================================ */
.product-skeleton {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.product-skeleton .skeleton-image {
    width: 100%;
    height: 180px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.product-skeleton .skeleton-text {
    height: 14px;
    margin: 10px 15px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.product-skeleton .skeleton-text.short {
    width: 60%;
}

.product-skeleton .skeleton-button {
    height: 40px;
    margin: 10px 15px 15px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@media (max-width: 768px) {
    .product-skeleton .skeleton-image {
        height: 140px;
    }

    .product-skeleton .skeleton-text {
        height: 12px;
        margin: 8px 10px;
    }

    .product-skeleton .skeleton-button {
        height: 36px;
        margin: 8px 10px 10px;
    }
}

/* ============================================
   EMPTY SHOP STATE
   ============================================ */
.woocommerce-no-products-found {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.woocommerce-no-products-found .woocommerce-info {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
    border-left: none;
}

.woocommerce-no-products-found .woocommerce-info::before {
    content: '🔍';
    display: block;
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

/* ============================================
   SHOP PAGE QUANTITY CONTROLS
   ============================================ */
.woo-qty-control {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto var(--spacing-md) var(--spacing-md);
    background: #388E3C;
    border-radius: 6px;
    overflow: hidden;
}

.woo-qty-control.loading {
    opacity: 0.7;
    pointer-events: none;
}

.woo-qty-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #388E3C;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    transition: background var(--transition-fast);
}

.woo-qty-btn:hover {
    background: #2E7D32;
}

.woo-qty-value {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #388E3C;
    font-weight: 700;
    font-size: 15px;
}

@media (max-width: 768px) {
    .woo-qty-control {
        margin: auto var(--spacing-sm) var(--spacing-sm);
    }

    .woo-qty-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .woo-qty-value {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .woo-qty-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .woo-qty-value {
        min-width: 28px;
        height: 30px;
        font-size: 12px;
    }
}

/* ============================================
   MOBILE SHOP FILTER & SORT UI
   ============================================ */

/* Mobile Filter/Sort Toolbar - Fixed at bottom */
.mobile-shop-toolbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
}

.mobile-shop-toolbar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.mobile-toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: var(--color-bg-white);
    border: none;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Filter on Left (first), Sort on Right (second) */
.mobile-toolbar-btn:first-child {
    border-right: 1px solid var(--color-border);
}

.mobile-toolbar-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.mobile-toolbar-btn:active {
    background: var(--color-bg-cream);
}

.mobile-toolbar-btn.active {
    color: var(--color-primary);
}

/* Sort Dropdown Panel */
.mobile-sort-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 70vh;
    overflow-y: auto;
}

.mobile-sort-panel.active {
    transform: translateY(0);
}

.mobile-sort-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: var(--color-bg-white);
}

.mobile-sort-header h3 {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
}

.mobile-sort-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-cream);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--color-text-dark);
}

.mobile-sort-options {
    padding: 8px 0;
}

.mobile-sort-option {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mobile-sort-option:hover,
.mobile-sort-option:active {
    background: var(--color-bg-cream);
}

.mobile-sort-option.active {
    color: var(--color-primary);
    font-weight: 600;
}

.mobile-sort-option.active::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-right: 12px;
}

.mobile-sort-option svg {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    opacity: 0.6;
}

/* Filter Drawer - Slides from Left */
.mobile-filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    background: var(--color-bg-white);
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-filter-drawer.active {
    transform: translateX(0);
}

.mobile-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-primary);
    color: white;
}

.mobile-filter-header h3 {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
}

.mobile-filter-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: white;
}

.mobile-filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.mobile-filter-section {
    border-bottom: 1px solid var(--color-border);
}

.mobile-filter-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
    background: var(--color-bg-cream);
}

.mobile-filter-section-header svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.mobile-filter-section.open .mobile-filter-section-header svg {
    transform: rotate(180deg);
}

.mobile-filter-section-body {
    padding: 12px 20px;
    display: none;
}

.mobile-filter-section.open .mobile-filter-section-body {
    display: block;
}

.mobile-filter-option {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-dark);
    cursor: pointer;
}

.mobile-filter-option input[type="checkbox"],
.mobile-filter-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    accent-color: var(--color-primary);
}

.mobile-filter-option .count {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-light);
}

/* Price Range Slider */
.mobile-price-range {
    padding: 10px 0;
}

.mobile-price-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mobile-price-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-price-input label {
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
}

.mobile-price-input input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 14px;
}

.mobile-price-input input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Filter Footer - Apply/Clear Buttons */
.mobile-filter-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 20px;
    background: var(--color-bg-white);
    border-top: 1px solid var(--color-border);
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

.mobile-filter-clear {
    padding: 14px;
    background: var(--color-bg-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
}

.mobile-filter-apply {
    padding: 14px;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.mobile-filter-apply:hover {
    background: var(--color-primary-dark);
}

/* Overlay */
.mobile-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-filter-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Active Filter Tags */
.mobile-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
}

.mobile-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.mobile-filter-tag-remove {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    color: white;
    line-height: 1;
}

/* Show toolbar only on mobile */
@media (max-width: 768px) {
    .mobile-shop-toolbar {
        display: block;
    }

    /* Hide default WooCommerce ordering on mobile */
    .woocommerce .woocommerce-ordering {
        display: none;
    }
}

/* Desktop - Hide mobile elements */
@media (min-width: 769px) {

    .mobile-shop-toolbar,
    .mobile-sort-panel,
    .mobile-filter-drawer,
    .mobile-filter-overlay {
        display: none !important;
    }
}

/* ============================================
   REDESIGNED FRONT PAGE - FRESH GROCERY STYLE
   ============================================ */

/* --- Shared Section Header --- */
.ref-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.ref-section-header h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.ref-view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.ref-view-all:hover {
    text-decoration: underline;
}

/* ============================================
   HERO SECTION - Full-bleed BG Image, Centered
   ============================================ */
.ref-hero-section {
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
    background: #f5f0e6;
}

.ref-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
}

.ref-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.40) 50%,
            rgba(0, 0, 0, 0.30) 100%);
    z-index: 1;
}

.ref-hero-section .container {
    position: relative;
    z-index: 2;
}

.ref-hero-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--spacing-3xl) 0;
}

.ref-hero-content h1 {
    font-size: 2.85rem;
    font-weight: 700;
    color: white;
    line-height: 1.18;
    margin: 0 0 var(--spacing-lg);
    letter-spacing: -0.3px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Trust badges row */
.ref-hero-trust {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.ref-hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.ref-hero-trust span:not(:last-child)::after {
    content: '\00b7';
    margin-left: 6px;
    font-size: 1.2rem;
    opacity: 0.5;
}

.ref-hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.ref-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 15px 34px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.ref-hero-btn.primary {
    background: var(--color-green);
    color: white;
    border-color: var(--color-green);
}

.ref-hero-btn.primary:hover {
    background: var(--color-green-dark);
    border-color: var(--color-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 200, 150, 0.4);
}

.ref-hero-btn.secondary {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}

.ref-hero-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

/* ============================================
   CATEGORY SECTION - Image Cards
   ============================================ */
.ref-category-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg-white);
}

.ref-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--spacing-md);
}

.ref-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: white;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.ref-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.ref-category-img {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-cream);
}

.ref-category-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-category-img svg {
    width: 50px;
    height: 50px;
}

.ref-category-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

.ref-category-count {
    font-size: 11px;
    color: var(--color-text-light, #888);
    font-weight: 400;
    margin-top: 2px;
}

.ref-category-view-all .ref-category-img {
    background: rgba(0, 155, 220, 0.08);
    border: 2px dashed rgba(0, 155, 220, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-category-view-all .ref-category-img svg {
    width: 32px;
    height: 32px;
}

.ref-category-view-all:hover .ref-category-img {
    background: rgba(0, 155, 220, 0.15);
    border-color: rgba(0, 155, 220, 0.5);
}

/* ============================================
   WEEKLY DEALS STRIP - Simple One-line
   ============================================ */
.ref-deals-strip {
    background: linear-gradient(90deg, #D32F2F 0%, #B71C1C 100%);
    padding: 14px 0;
}

.ref-deals-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.ref-deals-strip-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: white;
    min-width: 0;
}

.ref-deals-strip-label {
    font-weight: 700;
    font-size: var(--font-size-base);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.ref-deals-strip-sep {
    opacity: 0.4;
    font-weight: 300;
}

.ref-deals-strip-msg {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-deals-strip-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.ref-deals-strip-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ref-deals-strip-timer svg {
    opacity: 0.7;
}

.ref-deals-strip-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: white;
    color: #D32F2F;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.ref-deals-strip-btn:hover {
    background: #FFF8F8;
    transform: scale(1.03);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ============================================
   BEST SELLERS - Product Card Grid
   ============================================ */
.ref-bestsellers-section {
    padding: var(--spacing-2xl) 0;
    background: var(--color-bg-cream);
}

.ref-bestsellers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
}

.ref-product-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
    position: relative;
    display: flex;
    flex-direction: column;
}

.ref-product-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-light);
    transform: translateY(-3px);
}

/* Rank Badge */
.ref-rank-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 155, 220, 0.35);
}

.ref-product-card:nth-child(1) .ref-rank-badge {
    background: linear-gradient(135deg, #FFD700, #FFA000);
    box-shadow: 0 2px 6px rgba(255, 160, 0, 0.4);
}

.ref-product-card:nth-child(2) .ref-rank-badge {
    background: linear-gradient(135deg, #B0BEC5, #78909C);
    box-shadow: 0 2px 6px rgba(120, 144, 156, 0.4);
}

.ref-product-card:nth-child(3) .ref-rank-badge {
    background: linear-gradient(135deg, #CD7F32, #A0522D);
    box-shadow: 0 2px 6px rgba(160, 82, 45, 0.4);
}

.ref-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-orange);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    z-index: 2;
}

.ref-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: var(--color-bg-white);
    aspect-ratio: 1;
}

.ref-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ref-product-info {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ref-product-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-dark);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 40px;
    margin-bottom: var(--spacing-sm);
}

.ref-product-name:hover {
    color: var(--color-primary);
}

.ref-product-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.ref-price-current {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-dark);
}

.ref-price-original {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    text-decoration: line-through;
}

/* Best Sellers - Cart control full width */
.ref-product-card .bk-cart-control {
    width: 100%;
    display: flex;
    margin-top: auto;
}

.ref-product-card .bk-add-btn {
    width: 100%;
    padding: 10px 0;
    font-size: 13px;
}

.ref-product-card .bk-qty-control {
    width: 100%;
    justify-content: space-between;
}

.ref-product-card .bk-qty-btn {
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.ref-product-card .bk-qty-value {
    flex: 1;
    height: 34px;
    font-size: 14px;
}

/* ============================================
   RESPONSIVE - Redesigned Sections
   ============================================ */
@media (max-width: 992px) {
    .ref-hero-content h1 {
        font-size: 2.4rem;
    }

    .ref-hero-section {
        min-height: 400px;
    }

    .ref-hero-bg-img {
        object-position: center 70%;
    }

    .ref-bestsellers-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }

    .ref-product-image {
        padding: var(--spacing-md);
    }

    .ref-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .ref-category-img {
        width: 75px;
        height: 75px;
    }
}

@media (max-width: 768px) {
    .ref-hero-section {
        min-height: 350px;
    }

    .ref-hero-bg-img {
        object-position: center 65%;
    }

    .ref-hero-content {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    .ref-hero-content h1 {
        font-size: 1.75rem;
    }

    .ref-hero-trust span {
        font-size: var(--font-size-xs);
    }

    /* Deals strip - clean 2-line layout */
    .ref-deals-strip-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
    }

    .ref-deals-strip-left {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 6px;
    }

    .ref-deals-strip-sep {
        display: none;
    }

    .ref-deals-strip-msg {
        display: none;
    }

    .ref-deals-strip-label {
        font-size: 15px;
    }

    .ref-deals-strip-right {
        gap: 10px;
    }

    .ref-deals-strip-btn {
        padding: 6px 16px;
        font-size: 13px;
    }

    .ref-section-header h2 {
        font-size: var(--font-size-xl);
    }

    /* Category horizontal scroll on mobile - show 4-5 visible */
    .ref-category-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
    }

    .ref-category-grid::-webkit-scrollbar {
        display: none;
    }

    .ref-category-card {
        flex: 0 0 76px;
        scroll-snap-align: start;
        padding: 8px 4px;
        border-radius: 10px;
    }

    .ref-category-img {
        width: 48px;
        height: 48px;
    }

    .ref-category-name {
        font-size: 11px;
        line-height: 1.2;
    }

    /* Best Sellers - horizontal scroll, 4-5 visible on mobile */
    .ref-bestsellers-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
    }

    .ref-bestsellers-grid::-webkit-scrollbar {
        display: none;
    }

    .ref-bestsellers-grid .ref-product-card {
        flex: 0 0 calc((100% - 24px) / 4);
        scroll-snap-align: start;
        min-width: 0;
    }

    .ref-bestsellers-grid .ref-product-image {
        padding: 6px;
        aspect-ratio: 1;
    }

    .ref-bestsellers-grid .ref-product-info {
        padding: 6px;
    }

    .ref-bestsellers-grid .ref-product-name {
        font-size: 11px;
        min-height: 28px;
        -webkit-line-clamp: 2;
        margin-bottom: 4px;
    }

    .ref-bestsellers-grid .ref-product-price {
        margin-bottom: 6px;
        gap: 2px;
    }

    .ref-bestsellers-grid .ref-price-current {
        font-size: 13px;
    }

    .ref-bestsellers-grid .ref-price-original {
        font-size: 10px;
    }

    .ref-bestsellers-grid .bk-add-btn {
        padding: 5px 4px;
        font-size: 10px;
        letter-spacing: 0;
        width: 100%;
    }

    .ref-bestsellers-grid .bk-qty-control {
        width: 100%;
        justify-content: space-between;
    }

    .ref-bestsellers-grid .bk-qty-btn {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .ref-bestsellers-grid .bk-qty-value {
        flex: 1;
        height: 24px;
        font-size: 11px;
    }

    .ref-rank-badge {
        width: 20px;
        height: 20px;
        font-size: 9px;
        top: 4px;
        right: 4px;
    }

    .ref-product-badge {
        font-size: 9px;
        padding: 2px 5px;
        top: 4px;
        left: 4px;
    }
}

@media (max-width: 480px) {
    .ref-hero-section {
        min-height: 320px;
    }

    .ref-hero-bg-img {
        object-position: center 60%;
    }

    .ref-hero-content {
        padding: var(--spacing-xl) var(--spacing-sm);
    }

    .ref-hero-content h1 {
        font-size: 1.4rem;
    }

    .ref-hero-btn {
        padding: 12px 22px;
        font-size: var(--font-size-sm);
    }

    .ref-hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .ref-hero-btn {
        width: 100%;
        justify-content: center;
    }

    .ref-bestsellers-grid .ref-product-card {
        flex: 0 0 calc((100% - 24px) / 4);
    }

    .ref-bestsellers-grid .ref-product-image {
        padding: 4px;
    }

    .ref-bestsellers-grid .ref-product-info {
        padding: 5px;
    }

    .ref-bestsellers-grid .ref-product-name {
        font-size: 10px;
        min-height: 24px;
    }

    .ref-bestsellers-grid .ref-price-current {
        font-size: 12px;
    }

    .ref-bestsellers-grid .bk-add-btn {
        padding: 4px 3px;
        font-size: 9px;
        border-radius: 4px;
        width: 100%;
    }

    .ref-bestsellers-grid .bk-qty-btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .ref-bestsellers-grid .bk-qty-value {
        height: 20px;
        font-size: 10px;
    }

    .ref-rank-badge {
        width: 18px;
        height: 18px;
        font-size: 8px;
        top: 3px;
        right: 3px;
    }

    .ref-category-card {
        flex: 0 0 68px;
        padding: 6px 4px;
    }

    .ref-category-img {
        width: 42px;
        height: 42px;
    }

    .ref-category-name {
        font-size: 10px;
    }
}

/* ==========================================
   Shop Sidebar Dynamic Filters
   ========================================== */

/* Back link */
.ref-filter-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-primary, #009BDC);
    text-decoration: none;
    margin-bottom: 12px;
    font-weight: 500;
}

.ref-filter-back-link:hover {
    text-decoration: underline;
}

/* Category link with thumbnail */
.ref-filter-cat-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    width: 100%;
}

.ref-filter-cat-link:hover {
    color: var(--color-primary, #009BDC);
}

/* Category thumbnail */
.ref-filter-cat-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
    flex-shrink: 0;
}

/* Category count */
.ref-filter-cat-count {
    margin-left: auto;
    font-size: 12px;
    color: #999;
}

/* Active category highlight */
.ref-filter-item--active {
    background: rgba(0, 155, 220, 0.06);
    border-radius: 6px;
    padding: 2px 8px;
    margin-left: -8px;
    margin-right: -8px;
}

.ref-filter-item--active .ref-filter-cat-link {
    color: var(--color-primary, #009BDC);
    font-weight: 600;
}

/* Price filter inputs */
.ref-price-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.ref-price-input-group {
    flex: 1;
    min-width: 80px;
}

.ref-price-input-group label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.ref-price-input-field {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.ref-price-input-field:focus {
    border-color: var(--color-primary, #009BDC);
}

.ref-price-apply-btn {
    width: 100%;
    padding: 9px 16px;
    background: var(--color-primary, #009BDC);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.2s;
}

.ref-price-apply-btn:hover {
    opacity: 0.9;
}

/* Active filter tags (toolbar) */
.ref-active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary, #009BDC);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.ref-active-filter-tag:hover {
    opacity: 0.85;
    color: white;
}

/* Clear all link */
.ref-clear-filters {
    font-size: 13px;
    color: #999;
    text-decoration: none;
    padding: 6px 0;
}

.ref-clear-filters:hover {
    color: var(--color-primary, #009BDC);
    text-decoration: underline;
}

/* Mobile filter thumbnails */
.mobile-filter-cat-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}

/* Mobile back link */
.mobile-filter-back-link {
    display: block;
    font-size: 13px;
    color: var(--color-primary, #009BDC);
    text-decoration: none;
    margin-bottom: 10px;
    font-weight: 500;
}

.mobile-filter-back-link:hover {
    text-decoration: underline;
}

/* Mobile price range label */
.mobile-price-range-label {
    font-size: 12px;
    color: #888;
    margin: 0 0 8px;
}

/* Mobile filter count badge */
.mobile-filter-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--color-primary, #009BDC);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==========================================
   Mobile Category Strip (Blinkit-style)
   ========================================== */

/* Hidden on desktop by default */
.mobile-cat-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: var(--sd-sidebar-top, 90px);
    align-self: start;
    height: calc(100vh - var(--sd-sidebar-top, 90px) - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
    border-right: 1px solid #f0f0f0;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    z-index: 20;
}

/* Thin scrollbar for category strip */
.mobile-cat-strip::-webkit-scrollbar {
    width: 3px;
}

.mobile-cat-strip::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-cat-strip::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

/* Individual category item */
.mobile-cat-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    text-decoration: none;
    color: #666;
    width: 76px;
    text-align: center;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mobile-cat-strip-item:hover {
    color: #333;
}

/* Active category */
.mobile-cat-strip-item--active {
    background: rgba(0, 155, 220, 0.08);
    border-left-color: var(--color-primary, #009BDC);
    color: var(--color-primary, #009BDC);
}

.mobile-cat-strip-item--active .mobile-cat-strip-name {
    font-weight: 600;
    color: var(--color-primary, #009BDC);
}

.mobile-cat-strip-item--active .mobile-cat-strip-thumb {
    border-color: var(--color-primary, #009BDC);
}

/* Category thumbnail */
.mobile-cat-strip-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
    margin-bottom: 4px;
    transition: border-color 0.2s;
}

/* Fallback initial letter */
.mobile-cat-strip-initial {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary, #009BDC);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* "All" / back icon circle */
.mobile-cat-strip-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mobile-cat-strip-item--active .mobile-cat-strip-icon {
    background: rgba(0, 155, 220, 0.12);
}

.mobile-cat-strip-icon svg {
    stroke: #666;
}

.mobile-cat-strip-item--active .mobile-cat-strip-icon svg {
    stroke: var(--color-primary, #009BDC);
}

/* Category name label */
.mobile-cat-strip-name {
    font-size: 10px;
    line-height: 1.2;
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    font-family: 'Outfit', sans-serif;
}


/* ============================================
   ARCHIVE / SHOP PAGE STYLES
   (Extracted from woocommerce/archive-product.php)
   ============================================ */

/* Fresh Grocery Style Archive/Category Page */
.ref-shop-page {
    background: #F5F5F5;
    min-height: 100vh;
    padding: 0 0 60px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #333;
}

.ref-shop-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Shop Top Bar */
.ref-shop-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: white;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: var(--sd-topbar-top, 0px);
    z-index: 40;
}

.ref-shop-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    padding: 4px 8px 4px 0;
    border-right: 1px solid #e0e0e0;
    margin-right: 4px;
    transition: color 0.2s;
}

.ref-shop-back:hover {
    color: var(--color-primary, #009BDC);
}

.ref-shop-back svg {
    flex-shrink: 0;
}

.ref-shop-topbar-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-shop-topbar-count {
    font-size: 13px;
    color: #888;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Sort Toolbar (inside main content) */
.ref-shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    gap: 15px;
    flex-wrap: wrap;
    background: white;
    border-bottom: 1px solid #e8e8e8;
}

.ref-toolbar-left {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.ref-toolbar-count {
    font-size: 14px;
    color: #666;
}

.ref-toolbar-right {
    display: flex;
    align-items: center;
}

.ref-sort-select {
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    padding: 8px 15px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    outline: none;
}

/* Layout Grid */
.ref-shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
}

/* Sidebar */
.ref-sidebar {
    background: white;
    padding: 16px;
    border-right: 1px solid #e8e8e8;
    align-self: start;
    position: sticky;
    top: var(--sd-sidebar-top, 49px);
    max-height: calc(100vh - var(--sd-sidebar-top, 49px));
    overflow-y: auto;
}

/* Main Content Area */
.ref-main-content {
    background: white;
    padding: 0;
}

.ref-filter-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
}

.ref-filter-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ref-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ref-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ref-filter-item {
    margin-bottom: 10px;
}

.ref-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.ref-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s;
}

.ref-filter-input:checked + .ref-checkbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.ref-checkbox::after {
    content: '\2713';
    color: white;
    font-size: 12px;
    display: none;
}

.ref-filter-input:checked + .ref-checkbox::after {
    display: block;
}

.ref-filter-input {
    display: none;
}


.ref-main-content .woocommerce-notices-wrapper {
    padding: 0;
}

.ref-main-content .woocommerce-notices-wrapper:empty {
    display: none;
}

/* Product Grid */
.ref-products-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #e8e8e8;
}

/* Product Card */
.ref-prod-card {
    background: white;
    border: none;
    border-radius: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: background 0.2s;
    position: relative;
    height: 100%;
}

.ref-prod-card:hover {
    background: #fafcff;
    box-shadow: none;
    transform: none;
}

.ref-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FF6D2E;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.ref-prod-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: 12px;
}

.sd-rating-stars-static {
    margin-bottom: 8px;
    font-size: 18px;
}

.sd-rating-stars-static .star-rating {
    margin: 0;
    float: none;
    color: #ffc107;
}

.sd-rating-stars-static .star-rating::before {
    color: #e0e0e0;
}

.ref-prod-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
    line-height: 1.3;
}

.ref-prod-title a {
    color: inherit;
    text-decoration: none;
}

.ref-prod-price {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.ref-prod-price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

.ref-prod-price del {
    font-size: 13px;
    color: #999;
    font-weight: 400;
}

.ref-prod-price ins {
    text-decoration: none;
}

.ref-prod-old-price {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 6px;
}

.ref-prod-unit {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}

/* Cart Control in Product Card */
.ref-cart-control {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.ref-cart-control .bk-add-btn,
.ref-add-btn {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
}

.ref-cart-control .bk-qty-control {
    width: 100%;
    justify-content: space-between;
}

.ref-cart-control .bk-qty-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.ref-cart-control .bk-qty-value {
    flex: 1;
    height: 36px;
    font-size: 15px;
}

/* Pagination */
.ref-pagination {
    margin-top: 40px;
    text-align: center;
    grid-column: 1/-1;
}

.ref-pagination ul.page-numbers {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.ref-pagination ul.page-numbers li {
    display: inline-block;
}

.ref-pagination .page-numbers li a,
.ref-pagination .page-numbers li span {
    display: inline-block;
    padding: 8px 14px;
    background: white;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.ref-pagination .page-numbers li span.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.ref-pagination .page-numbers li a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Archive - Responsive Tablet */
@media (max-width: 1200px) {
    .ref-products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
    }
}

/* Archive - Responsive Mobile */
@media (max-width: 768px) {
    .ref-shop-layout {
        grid-template-columns: 76px 1fr;
        /* White left column background — full grid height, no grey line */
        background: linear-gradient(to right, white 76px, transparent 76px);
    }

    .ref-sidebar {
        display: none;
    }

    .mobile-cat-strip {
        display: flex;
        top: var(--sd-sidebar-top, 90px);
        height: calc(100vh - var(--sd-sidebar-top, 90px));
    }

    .ref-shop-toolbar {
        display: none;
    }

    .ref-shop-page {
        padding-bottom: 0;
    }

    .ref-main-content {
        padding-bottom: 56px;
    }

    /* Bottom bar covers right column only — sidebar extends beneath */
    .mobile-shop-toolbar {
        left: 76px;
    }

    .ref-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
    }

    .ref-prod-card {
        padding: 8px;
        border-radius: 0;
    }

    .ref-prod-image {
        margin-bottom: 6px;
    }

    .ref-prod-title {
        font-size: 11px;
        height: 28px;
        margin-bottom: 4px;
    }

    .ref-prod-price {
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 2px;
    }

    .ref-prod-price del {
        font-size: 10px;
    }

    .ref-prod-unit {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .ref-cart-control .bk-add-btn,
    .ref-add-btn {
        padding: 6px 0;
        font-size: 11px;
    }

    .ref-cart-control .bk-qty-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .ref-cart-control .bk-qty-value {
        height: 28px;
        font-size: 12px;
    }

    .ref-card-badge {
        font-size: 8px;
        padding: 2px 7px;
        top: 5px;
        left: 5px;
        border-radius: 12px;
    }

    .ref-shop-topbar {
        padding: 10px 12px;
        gap: 10px;
        position: sticky;
        top: var(--sd-topbar-top, 0px);
        z-index: 40;
    }

    .ref-shop-topbar-title {
        font-size: 16px;
    }

    .ref-shop-back span {
        display: none;
    }

    .ref-shop-back {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }
}

/* Archive - Responsive Small Mobile */
@media (max-width: 480px) {
    .ref-shop-layout {
        grid-template-columns: 66px 1fr;
        background: linear-gradient(to right, white 66px, transparent 66px);
    }

    .mobile-shop-toolbar {
        left: 66px;
    }

    .mobile-cat-strip-item {
        width: 66px;
        padding: 8px 4px;
    }

    .mobile-cat-strip-thumb,
    .mobile-cat-strip-initial,
    .mobile-cat-strip-icon {
        width: 40px;
        height: 40px;
    }

    .mobile-cat-strip-initial {
        font-size: 15px;
    }

    .mobile-cat-strip-name {
        font-size: 9px;
        max-width: 58px;
    }

    .ref-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
    }

    .ref-prod-card {
        padding: 6px;
    }

    .ref-prod-image {
        margin-bottom: 6px;
    }

    .ref-prod-title {
        font-size: 10px;
        height: 26px;
    }

    .ref-prod-price {
        font-size: 12px;
    }

    .ref-prod-old-price {
        font-size: 9px;
    }

    .ref-cart-control .bk-add-btn,
    .ref-add-btn {
        padding: 5px 0;
        font-size: 10px;
        border-radius: 5px;
    }

    .ref-cart-control .bk-qty-control {
        border-radius: 5px;
    }

    .ref-cart-control .bk-qty-btn {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .ref-cart-control .bk-qty-value {
        height: 24px;
        font-size: 11px;
        min-width: 20px;
    }

    .ref-cart-control .bk-qty-btn.bk-qty-minus {
        border-radius: 5px 0 0 5px;
    }

    .ref-cart-control .bk-qty-btn.bk-qty-plus {
        border-radius: 0 5px 5px 0;
    }

    .ref-shop-title {
        font-size: 18px;
    }
}


/* ============================================
   SINGLE PRODUCT PAGE STYLES
   (Extracted from woocommerce/single-product.php)
   ============================================ */

/* SEVENDAY MART — SINGLE PRODUCT (Quick Commerce Style) */

/* Page Shell */
.sd-page {
    background: var(--color-bg-white, #fff);
    min-height: auto;
    padding-bottom: 80px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text-dark, #333);
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
    .sd-page {
        padding-bottom: 0;
        min-height: 600px;
    }
}

/* WooCommerce Notices */
.sd-page .woocommerce-message {
    background: #e8f5e9;
    border-left: 3px solid #388E3C;
    color: #1b5e20;
    padding: 12px 16px;
    margin: 0;
    font-size: 14px;
}

.sd-page .woocommerce-message a {
    color: #388E3C;
    font-weight: 600;
}

.sd-page .woocommerce-error {
    background: #fff3e0;
    border-left: 3px solid var(--color-hot-food, #FF6D2E);
    color: #bf360c;
    padding: 12px 16px;
    margin: 0;
    font-size: 14px;
    list-style: none;
}

/* Breadcrumb (desktop only) */
.sd-breadcrumb {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 14px 24px 10px;
    font-size: 13px;
    color: #999;
    max-width: 1200px;
    margin: 0 auto;
}

.sd-breadcrumb a {
    color: var(--color-text-light, #666);
    text-decoration: none;
    transition: color 0.15s;
}

.sd-breadcrumb a:hover {
    color: var(--color-primary, #009BDC);
}

.sd-breadcrumb-sep {
    margin: 0 2px;
    color: #ccc;
}

/* Product Hero */
.sd-hero {
    background: var(--color-bg-white, #fff);
}

.sd-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Gallery */
.sd-gallery {
    text-align: center;
    padding: 20px 16px 0;
    position: relative;
}

.sd-gallery-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    touch-action: pan-y;
}

.sd-gallery-main img {
    max-width: 280px;
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.2s;
    display: block;
    margin: 0 auto;
}

.sd-sale-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-hot-food, #FF6D2E);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
}

/* Slider Dots */
.sd-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 0 4px;
}

.sd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    transition: all 0.25s;
    cursor: pointer;
}

.sd-dot.active {
    background: var(--color-primary, #009BDC);
    width: 22px;
    border-radius: 4px;
}

/* Thumbnails (desktop only) */
.sd-thumbs {
    display: none;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 14px 0 4px;
    flex-wrap: wrap;
}

.sd-thumb {
    width: 58px;
    height: 58px;
    border: 2px solid var(--color-border, #E0E0E0);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 3px;
    background: white;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.sd-thumb:hover {
    border-color: var(--color-primary-light, #4DC3F0);
}

.sd-thumb.active {
    border-color: var(--color-primary, #009BDC);
    box-shadow: 0 0 0 1px var(--color-primary, #009BDC);
}

.sd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Product Details */
.sd-details {
    padding: 16px;
}

/* Brand / Category Meta */
.sd-brand-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.sd-brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--color-border, #E0E0E0);
    object-fit: cover;
    background: #f9f9f9;
    flex-shrink: 0;
}

.sd-brand-initial {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #e0f3ff;
    color: var(--color-primary, #009BDC);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.sd-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 34px;
}

.sd-brand-text a {
    color: var(--color-text-dark, #333);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    transition: color 0.15s;
}

.sd-brand-text small {
    font-size: 11px;
    color: var(--color-text-light, #666);
    font-weight: 400;
    line-height: 1.3;
}

.sd-brand-text a:hover {
    color: var(--color-primary, #009BDC);
}

/* Title */
.sd-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark, #333);
    line-height: 1.35;
    margin: 0 0 10px;
}

/* Stats Row */
.sd-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--color-text-light, #666);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.sd-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.sd-stat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.sd-stat-dot--green {
    background: #388E3C;
}

.sd-stat-dot--orange {
    background: #ff9800;
}

/* Rating pill in hero */
.sd-stat-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

/* Variant Selector */
.sd-variant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sd-variant-box {
    border: 1.5px solid var(--color-border, #E0E0E0);
    padding: 8px 18px;
    border-radius: 8px;
    text-align: center;
    min-width: 80px;
    cursor: default;
    transition: all 0.2s;
}

.sd-variant-box.active {
    border-color: var(--color-primary, #009BDC);
    background: #e0f3ff;
}

.sd-variant-box span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark, #333);
    line-height: 1.3;
}

.sd-variant-box small {
    color: var(--color-text-light, #666);
    font-size: 12px;
}

/* Price Area */
.sd-price-area {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sd-price-now {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-dark, #333);
    letter-spacing: -0.3px;
}

.sd-price-now .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

.sd-price-was {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.sd-price-off {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #009BDC);
    background: #e0f3ff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Desktop CTA (hidden on mobile) */
.sd-desktop-cta {
    display: none;
    margin-bottom: 16px;
}

.sd-cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sd-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-border, #E0E0E0);
    border-radius: 8px;
    overflow: hidden;
    height: 44px;
}

.sd-qty-btn {
    width: 40px;
    height: 100%;
    background: white;
    border: none;
    font-size: 18px;
    color: var(--color-text-dark, #333);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    user-select: none;
    font-family: inherit;
}

.sd-qty-btn:hover {
    background: #f5f5f5;
}

.sd-qty-btn:active {
    background: #eee;
}

.sd-qty-val {
    width: 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark, #333);
    border-left: 1px solid var(--color-border, #E0E0E0);
    border-right: 1px solid var(--color-border, #E0E0E0);
    line-height: 44px;
}

.sd-cta-btn {
    flex: 1;
    height: 44px;
    background: #388E3C;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.sd-cta-btn:hover {
    background: #2E7D32;
}

/* Added state for desktop CTA button */
.sd-cta-btn--added {
    background: #2E7D32 !important;
}

/* Mobile CTA - hidden on desktop, shown on mobile */
.sd-mobile-cta {
    margin-bottom: 12px;
}

.sd-mobile-cta .bk-cart-control {
    width: 100%;
    display: flex;
}

.sd-mobile-cta .bk-add-btn {
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    border-radius: 8px;
}

.sd-mobile-cta .bk-qty-control {
    width: 100%;
    justify-content: space-between;
    border-radius: 8px;
}

.sd-mobile-cta .bk-qty-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
}

.sd-mobile-cta .bk-qty-value {
    flex: 1;
    height: 44px;
    font-size: 16px;
}

/* Out of Stock */
.sd-out-of-stock {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    color: #e65100;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
}

/* "View product details" expandable */
.sd-expand {
    border-top: 1px solid #f0f0f0;
    margin-top: 12px;
}

.sd-expand summary {
    color: var(--color-primary, #009BDC);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    user-select: none;
    transition: color 0.15s;
}

.sd-expand summary::-webkit-details-marker {
    display: none;
}

.sd-expand summary::marker {
    display: none;
    content: '';
}

.sd-expand summary:hover {
    color: var(--color-primary-dark, #0077B3);
}

.sd-expand-chevron {
    transition: transform 0.3s;
    font-size: 16px;
    line-height: 1;
}

.sd-expand[open] .sd-expand-chevron {
    transform: rotate(180deg);
}

.sd-expand-body {
    padding: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-light, #666);
}

.sd-expand-body p {
    margin: 0 0 10px;
}

.sd-expand-body p:last-child {
    margin-bottom: 0;
}

.sd-expand-body ul {
    padding-left: 18px;
    margin: 6px 0;
}

.sd-expand-body li {
    margin-bottom: 4px;
}

/* Horizontal Scroll Sections */
.sd-section {
    background: var(--color-bg-white, #fff);
    padding: 16px;
    border-bottom: 8px solid var(--color-bg-cream, #F5F0E6);
}

.sd-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.sd-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark, #333);
}

.sd-section-arrow {
    font-size: 22px;
    color: var(--color-text-light, #666);
    text-decoration: none;
    padding: 4px 8px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.sd-section-arrow:hover {
    color: var(--color-primary, #009BDC);
}

/* Horizontal Scroll Container */
.sd-hscroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sd-hscroll::-webkit-scrollbar {
    display: none;
}

/* Mini Product Card */
.sd-hcard {
    min-width: 130px;
    max-width: 130px;
    background: var(--color-bg-white, #fff);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 8px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}

.sd-hcard:hover {
    border-color: #ccc;
}

.sd-hcard-img-wrap {
    position: relative;
    text-align: center;
    margin-bottom: 6px;
}

.sd-hcard-img-wrap a {
    display: block;
    line-height: 0;
}

.sd-hcard-img-wrap img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.sd-hcard-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--color-hot-food, #FF6D2E);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.3;
}

.sd-hcard-add {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: #388E3C;
    color: white;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}

.sd-hcard-add:hover {
    background: #2E7D32;
    color: white;
}

.sd-hcard-add.added::after {
    content: ' \2713';
}

/* bk-cart-control inside sd-hcard (Similar / Top / Also Bought) */
.sd-hcard-cart {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
}

.sd-hcard-cart .bk-add-btn {
    padding: 5px 14px;
    font-size: 11px;
    border-radius: 6px;
    min-width: 0;
    letter-spacing: 0.5px;
}

.sd-hcard-cart .bk-qty-control {
    border-radius: 6px;
    height: 28px;
    min-width: 80px;
}

.sd-hcard-cart .bk-qty-btn {
    width: 26px;
    height: 28px;
    font-size: 14px;
}

.sd-hcard-cart .bk-qty-value {
    font-size: 12px;
    min-width: 22px;
    height: 28px;
    line-height: 28px;
}

.sd-hcard-name {
    font-size: 12px;
    color: var(--color-text-dark, #333);
    height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 4px 0;
    line-height: 1.35;
}

.sd-hcard-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-dark, #333);
    margin: 0;
    margin-top: auto;
}

.sd-hcard-price del {
    font-size: 11px;
    color: #999;
    font-weight: 400;
}

.sd-hcard-price ins {
    text-decoration: none;
}

.sd-hcard-price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

/* Reviews Section (expandable wrapper) */
.sd-reviews-section {
    background: var(--color-bg-white, #fff);
}

.sd-reviews-section summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: white;
    transition: background 0.1s;
}

.sd-reviews-section summary:active {
    background: #f9f9f9;
}

.sd-reviews-section summary::-webkit-details-marker {
    display: none;
}

.sd-reviews-section summary::marker {
    display: none;
    content: '';
}

.sd-reviews-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-dark, #333);
    margin: 0;
}

.sd-reviews-arrow {
    width: 24px;
    height: 24px;
    color: var(--color-text-light, #666);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sd-reviews-section[open] .sd-reviews-arrow {
    transform: rotate(180deg);
}

.sd-reviews-body {
    padding: 0 20px 24px;
    animation: sdSlideDown 0.2s ease-out;
}

@keyframes sdSlideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sticky Footer */
.sd-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-white, #fff);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 200;
    gap: 16px;
}

.sd-footer-info {
    min-width: 0;
}

.sd-footer-info p {
    margin: 0;
    font-size: 10px;
    color: #999;
    line-height: 1.3;
}

.sd-footer-price {
    margin: 2px 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text-dark, #333);
    line-height: 1.2;
}

.sd-footer-price .woocommerce-Price-amount {
    font-size: inherit;
    font-weight: inherit;
}

.sd-footer-btn {
    background: #388E3C;
    color: white;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.sd-footer-btn:hover {
    background: #2E7D32;
}

.sd-footer-btn--disabled {
    background: #ccc;
    cursor: not-allowed;
}

.sd-footer-btn--disabled:hover {
    background: #ccc;
}

/* Single Product - Desktop */
@media (min-width: 768px) {
    .sd-breadcrumb {
        display: flex;
    }

    .sd-hero-inner {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
        padding: 20px 24px;
        max-width: 1100px;
        margin: 0 auto;
    }

    .sd-gallery {
        flex: 0 0 40%;
        max-width: 400px;
        padding: 0;
    }

    .sd-gallery-main {
        min-height: 300px;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        padding: 12px;
    }

    .sd-gallery-main img {
        max-width: 100%;
        max-height: 400px;
    }

    .sd-gallery-main:hover img {
        transform: scale(1.1);
        transition: transform 0.2s ease-out;
    }

    .sd-dots {
        display: none;
    }

    .sd-thumbs {
        display: flex;
        justify-content: center;
        margin-top: 12px;
    }

    .sd-details {
        flex: 1;
        padding: 0 0 0 16px;
    }

    .sd-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .sd-price-now {
        font-size: 26px;
    }

    .sd-price-was {
        font-size: 15px;
    }

    .sd-desktop-cta {
        display: block;
    }

    .sd-mobile-cta {
        display: none;
    }

    /* Sections */
    .sd-section {
        padding: 30px 40px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        border-bottom: none;
    }

    .sd-section-header h3 {
        font-size: 20px;
    }

    .sd-hcard {
        min-width: 170px;
        max-width: 170px;
    }

    .sd-hcard-img-wrap img {
        width: 130px;
        height: 130px;
    }

    .sd-reviews-section {
        max-width: 1200px;
        margin: 0 auto 40px;
        border-radius: 12px;
        border-bottom: none;
        overflow: hidden;
    }

    .sd-reviews-section summary {
        padding: 24px 40px;
    }

    .sd-reviews-body {
        padding: 0 40px 30px;
    }

    /* Hide Sticky Footer on Desktop */
    .sd-footer {
        display: none;
    }
}

/* Single Product - Large Desktop */
@media (min-width: 1024px) {
    .sd-hero-inner {
        padding: 40px 60px;
        gap: 60px;
    }

    .sd-gallery-main img {
        max-width: 440px;
    }

    .sd-title {
        font-size: 28px;
    }

    .sd-hcard {
        min-width: 190px;
        max-width: 190px;
    }

    .sd-hcard-img-wrap img {
        width: 150px;
        height: 150px;
    }
}

/* Single Product - Small Mobile */
@media (max-width: 480px) {
    .sd-gallery-main {
        min-height: 220px;
    }

    .sd-gallery-main img {
        max-width: 240px;
    }

    .sd-title {
        font-size: 16px;
    }

    .sd-price-now {
        font-size: 20px;
    }

    .sd-stats {
        font-size: 11px;
        gap: 10px;
    }

    .sd-brand-meta {
        gap: 8px;
    }

    .sd-brand-logo,
    .sd-brand-initial {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .sd-brand-text a {
        font-size: 12px;
    }

    .sd-brand-text small {
        font-size: 10px;
    }

    .sd-variant-box {
        padding: 6px 14px;
        min-width: 70px;
    }

    .sd-variant-box span {
        font-size: 12px;
    }

    .sd-variant-box small {
        font-size: 11px;
    }

    .sd-hcard {
        min-width: 115px;
        max-width: 115px;
        padding: 6px;
    }

    .sd-hcard-img-wrap img {
        width: 85px;
        height: 85px;
    }

    .sd-hcard-name {
        font-size: 11px;
        height: 28px;
    }

    .sd-hcard-price {
        font-size: 12px;
    }

    .sd-hcard-add {
        padding: 3px 10px;
        font-size: 10px;
    }

    .sd-hcard-cart .bk-add-btn {
        padding: 3px 10px;
        font-size: 10px;
    }

    .sd-hcard-cart .bk-qty-control {
        height: 24px;
        min-width: 70px;
    }

    .sd-hcard-cart .bk-qty-btn {
        width: 22px;
        height: 24px;
        font-size: 12px;
    }

    .sd-hcard-cart .bk-qty-value {
        font-size: 11px;
        min-width: 18px;
        height: 24px;
        line-height: 24px;
    }

    .sd-footer {
        padding: 8px 12px;
    }

    .sd-footer-price {
        font-size: 16px;
    }

    .sd-footer-btn {
        padding: 10px 22px;
        font-size: 13px;
    }
}


/* ============================================
   CART PAGE STYLES
   (Extracted from woocommerce/cart/cart.php)
   ============================================ */

/* Flipkart Style Cart Page */
.fk-cart-page {
    background: var(--color-bg-cream);
    min-height: 100vh;
    padding: 20px 0 60px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.fk-cart-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.fk-cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 15px;
    align-items: start;
}

/* Cart Header */
.fk-cart-header {
    background: white;
    padding: 16px 24px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #f0f0f0;
}

.fk-cart-title {
    font-size: 18px;
    font-weight: 500;
    color: #212121;
    margin: 0;
}

/* Cart Main */
.fk-cart-main {
    background: white;
    border-radius: 4px;
}

/* Cart Item */
.fk-cart-item {
    display: flex;
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.fk-cart-item:last-child {
    border-bottom: none;
}

.fk-cart-item-img {
    width: 112px;
    min-width: 112px;
    margin-right: 20px;
}

.fk-cart-item-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.fk-cart-item-details {
    flex: 1;
}

.fk-cart-item-title {
    font-size: 16px;
    color: #212121;
    margin: 0 0 8px;
    font-weight: 400;
    line-height: 1.4;
}

.fk-cart-item-title a {
    color: #212121;
    text-decoration: none;
}

.fk-cart-item-title a:hover {
    color: #2874f0;
}

.fk-cart-item-seller {
    font-size: 14px;
    color: #878787;
    margin-bottom: 12px;
}

.fk-cart-item-price {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.fk-cart-price {
    font-size: 18px;
    font-weight: 600;
    color: #212121;
}

.fk-cart-mrp {
    font-size: 14px;
    color: #878787;
    text-decoration: line-through;
}

.fk-cart-discount {
    font-size: 14px;
    color: #388e3c;
    font-weight: 500;
}

/* Quantity Controls */
.fk-cart-qty {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fk-qty-controls {
    display: flex;
    align-items: center;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
}

.fk-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 18px;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fk-qty-btn:hover {
    background: #f0f0f0;
}

.fk-qty-btn:disabled {
    color: #c2c2c2;
    cursor: not-allowed;
}

.fk-qty-value {
    width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    padding: 6px 0;
}

/* Cart Actions */
.fk-cart-actions {
    display: flex;
    gap: 20px;
}

.fk-cart-action {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.fk-cart-action:hover {
    color: #2874f0;
}

.fk-cart-remove {
    color: #212121;
}

/* Delivery Info */
.fk-cart-delivery {
    margin-top: 12px;
    font-size: 13px;
    color: #212121;
}

.fk-cart-delivery .free {
    color: #388e3c;
    font-weight: 500;
}

/* Cart Section Headers (Split Cart) */
.fk-cart-section {
    margin-bottom: 2px;
}

.fk-cart-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: #f0f9ff;
    border-bottom: 2px solid #009BDC;
}

.fk-cart-section-header--pizza-cafe {
    background: #fff5f0;
    border-bottom-color: #FF6D2E;
}

.fk-cart-section-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fk-cart-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #212121;
}

.fk-cart-section-count {
    font-size: 14px;
    color: #878787;
    font-weight: 400;
}

.fk-cart-section-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.fk-cart-section-badge--grocery {
    background: #e8f5e9;
    color: #2e7d32;
}

.fk-cart-section-badge--pizza-cafe {
    background: #fff3e0;
    color: #e65100;
}

.fk-cart-section-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #fff8f5;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #bf360c;
}

/* Pizza/Cafe Item Variations */
.fk-cart-item--pizza-cafe {
    border-left: 3px solid #FF6D2E;
}

.fk-cart-item-icon-placeholder {
    width: 100%;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff5f0;
    border-radius: 8px;
}

.fk-cart-delivery--pickup .pickup {
    color: #FF6D2E;
    font-weight: 500;
}

/* Place Order Button (Bottom of items) */
.fk-cart-checkout-bar {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
}

.fk-place-order-btn {
    display: inline-block;
    background: #fb641b;
    color: white;
    padding: 16px 80px;
    border: none;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fk-place-order-btn:hover {
    background: #e85d19;
    color: white;
}

/* Price Summary Sidebar */
.fk-cart-sidebar {
    position: sticky;
    top: 80px;
}

.fk-price-box {
    background: white;
    border-radius: 4px;
}

.fk-price-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    font-weight: 600;
    color: #878787;
    text-transform: uppercase;
}

.fk-price-rows {
    padding: 16px 24px;
}

.fk-price-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 16px;
    color: #212121;
}

.fk-price-row.total {
    border-top: 1px dashed #e0e0e0;
    margin-top: 8px;
    padding-top: 16px;
    font-size: 18px;
    font-weight: 600;
}

.fk-price-row .discount {
    color: #388e3c;
}

.fk-save-msg {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    color: #388e3c;
    font-size: 14px;
    font-weight: 600;
}

/* Coupon Section */
.fk-coupon-box {
    background: white;
    border-radius: 4px;
    margin-top: 15px;
    padding: 20px 24px;
}

.fk-coupon-title {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 12px;
}

.fk-coupon-form {
    display: flex;
    gap: 10px;
}

.fk-coupon-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    font-size: 14px;
}

.fk-coupon-btn {
    padding: 12px 24px;
    background: white;
    border: 1px solid #2874f0;
    color: #2874f0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
}

.fk-coupon-btn:hover {
    background: #f0f5ff;
}

/* Safe & Secure */
.fk-safe-box {
    margin-top: 15px;
    padding: 20px;
    text-align: center;
    color: #878787;
    font-size: 12px;
}

.fk-safe-box svg {
    display: block;
    margin: 0 auto 8px;
}

/* Empty Cart */
.fk-empty-cart {
    background: white;
    border-radius: 4px;
    padding: 60px 20px;
    text-align: center;
}

.fk-empty-cart svg {
    width: 80px;
    height: 80px;
    color: #c2c2c2;
    margin-bottom: 20px;
}

.fk-empty-cart h2 {
    font-size: 18px;
    color: #212121;
    margin-bottom: 10px;
}

.fk-empty-cart p {
    color: #878787;
    margin-bottom: 20px;
}

.fk-shop-btn {
    display: inline-block;
    background: #2874f0;
    color: white;
    padding: 14px 40px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 600;
}

/* Cart Empty - Recommendation Add to Cart Button */
.fk-add-cart-sm {
    display: inline-block;
    background: #388E3C;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s;
    text-align: center;
}

.fk-add-cart-sm:hover {
    background: #2E7D32;
    color: white;
}

.fk-add-cart-sm.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Cart - Responsive Tablet */
@media (max-width: 900px) {
    .fk-cart-layout {
        grid-template-columns: 1fr;
    }

    .fk-cart-sidebar {
        position: static;
    }
}

/* Cart - Responsive Mobile */
@media (max-width: 768px) {
    .fk-cart-page {
        padding: 10px 0 20px;
    }

    .fk-cart-container {
        padding: 0 10px;
    }

    .fk-cart-section-header {
        padding: 10px 16px;
    }

    .fk-cart-section-title {
        font-size: 13px;
    }

    .fk-cart-section-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .fk-cart-section-notice {
        padding: 8px 16px;
        font-size: 12px;
    }

    .fk-cart-item-icon-placeholder {
        height: 80px;
    }

    .fk-cart-header {
        padding: 14px 16px;
    }

    .fk-cart-title {
        font-size: 16px;
    }

    .fk-cart-item {
        padding: 14px 16px;
        gap: 12px;
    }

    .fk-cart-item-img {
        width: 80px;
        min-width: 80px;
        margin-right: 0;
    }

    .fk-cart-item-title {
        font-size: 14px;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .fk-cart-item-seller {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .fk-cart-item-price {
        gap: 8px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .fk-cart-price {
        font-size: 16px;
    }

    .fk-cart-mrp {
        font-size: 12px;
    }

    .fk-cart-discount {
        font-size: 12px;
    }

    .fk-cart-qty {
        gap: 10px;
        margin-bottom: 10px;
    }

    .fk-qty-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .fk-qty-value {
        width: 36px;
        font-size: 13px;
        padding: 5px 0;
    }

    .fk-cart-actions {
        gap: 16px;
    }

    .fk-cart-action {
        font-size: 12px;
    }

    .fk-cart-delivery {
        margin-top: 8px;
        font-size: 12px;
    }

    .fk-cart-checkout-bar {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px 16px;
        text-align: center;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 10;
    }

    .fk-place-order-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 6px;
    }

    .fk-price-box {
        border-radius: 8px;
    }

    .fk-price-header {
        padding: 14px 16px;
    }

    .fk-price-rows {
        padding: 12px 16px;
    }

    .fk-price-row {
        padding: 8px 0;
        font-size: 14px;
    }

    .fk-price-row.total {
        font-size: 16px;
        padding-top: 12px;
    }

    .fk-save-msg {
        padding: 12px 16px;
        font-size: 13px;
    }

    .fk-coupon-box {
        padding: 16px;
        border-radius: 8px;
    }

    .fk-coupon-form {
        flex-direction: column;
        gap: 8px;
    }

    .fk-coupon-input {
        padding: 12px 14px;
        font-size: 14px;
    }

    .fk-coupon-btn {
        padding: 12px 20px;
        font-size: 13px;
        text-align: center;
    }

    .fk-safe-box {
        padding: 16px;
    }
}

/* Cart - Responsive Small Mobile */
@media (max-width: 480px) {
    .fk-cart-item-img {
        width: 70px;
        min-width: 70px;
    }

    .fk-cart-price {
        font-size: 15px;
    }

    .fk-cart-item-title {
        font-size: 13px;
    }

    .fk-qty-btn {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .fk-qty-value {
        width: 32px;
        font-size: 12px;
    }
}


/* ============================================
   CHECKOUT PAGE STYLES
   (Extracted from woocommerce/checkout/form-checkout.php)
   ============================================ */

/* Flipkart Style Checkout Page */
.fk-checkout-page {
    background: var(--color-bg-cream);
    min-height: 100vh;
    padding: 20px 0 60px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.fk-checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.fk-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 15px;
    align-items: start;
}

/* Section Card */
.fk-checkout-section {
    background: white;
    border-radius: 4px;
    margin-bottom: 15px;
}

.fk-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.fk-section-num {
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    color: #878787;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.fk-section-num.active {
    background: #2874f0;
    color: white;
}

.fk-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    text-transform: uppercase;
    margin: 0;
}

.fk-section-content {
    padding: 24px;
}

/* Login Section */
.fk-login-section .fk-login-info {
    color: #212121;
    font-size: 14px;
}

.fk-login-section .fk-login-email {
    font-weight: 600;
    margin-left: 10px;
}

.fk-guest-note {
    color: #878787;
    font-size: 13px;
    margin-top: 8px;
}

/* Form Styles */
.fk-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.fk-form-row.full {
    grid-template-columns: 1fr;
}

.fk-form-group {
    position: relative;
}

.fk-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #878787;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.fk-form-group label .required {
    color: #ff6161;
}

.fk-form-group input,
.fk-form-group select,
.fk-form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    font-size: 14px;
    color: #212121;
    background: white;
}

.fk-form-group input:focus,
.fk-form-group select:focus,
.fk-form-group textarea:focus {
    outline: none;
    border-color: #2874f0;
}

.fk-form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Shipping Methods */
.fk-shipping-methods {
    margin-top: 20px;
}

.fk-shipping-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
}

.fk-shipping-method:hover {
    border-color: #2874f0;
}

.fk-shipping-method.selected {
    border-color: #2874f0;
    background: #f0f5ff;
}

.fk-shipping-method input {
    width: 20px;
    height: 20px;
    accent-color: #2874f0;
}

.fk-shipping-label {
    flex: 1;
}

.fk-shipping-name {
    font-size: 14px;
    font-weight: 500;
    color: #212121;
}

.fk-shipping-desc {
    font-size: 12px;
    color: #878787;
    margin-top: 2px;
}

.fk-shipping-price {
    font-size: 14px;
    font-weight: 600;
    color: #388e3c;
}

/* Payment Methods */
.fk-payment-methods {
    margin-top: 20px;
}

.fk-payment-method {
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}

.fk-payment-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fk-payment-header input {
    width: 20px;
    height: 20px;
    accent-color: #2874f0;
}

.fk-payment-header label {
    font-size: 14px;
    font-weight: 500;
    color: #212121;
    cursor: pointer;
    margin: 0;
}

.fk-payment-content {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #f0f0f0;
}

/* Continue Button */
.fk-continue-btn {
    display: inline-block;
    background: #fb641b;
    color: white;
    padding: 16px 60px;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    margin-top: 20px;
}

.fk-continue-btn:hover {
    background: #e85d19;
}

/* Order Summary Sidebar */
.fk-checkout-sidebar {
    position: sticky;
    top: 80px;
}

.fk-order-box {
    background: white;
    border-radius: 4px;
}

.fk-order-header {
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    font-weight: 600;
    color: #878787;
    text-transform: uppercase;
}

/* Order Items */
.fk-order-items {
    padding: 16px 24px;
    max-height: 300px;
    overflow-y: auto;
}

.fk-order-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.fk-order-item:last-child {
    border-bottom: none;
}

.fk-order-item-img {
    width: 60px;
    min-width: 60px;
}

.fk-order-item-img img {
    width: 100%;
    height: auto;
}

.fk-order-item-info {
    flex: 1;
}

.fk-order-item-name {
    font-size: 14px;
    color: #212121;
    margin-bottom: 4px;
    line-height: 1.3;
}

.fk-order-item-qty {
    font-size: 12px;
    color: #878787;
}

.fk-order-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
}

/* Price Details */
.fk-price-details {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

/* Place Order Footer */
.fk-order-footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

.fk-secure-info {
    text-align: center;
    padding: 16px;
    color: #878787;
    font-size: 12px;
}

.fk-secure-info svg {
    vertical-align: middle;
    margin-right: 6px;
}

/* WooCommerce Checkout Overrides */
.woocommerce-form-row,
.fk-checkout-page .form-row {
    margin-bottom: 0 !important;
}

#billing_country_field,
#shipping_country_field {
    display: none;
}

.woocommerce-checkout .select2-container {
    width: 100% !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 48px;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px;
    padding-left: 16px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
}

/* Checkout - Responsive */
@media (max-width: 900px) {
    .fk-checkout-layout {
        grid-template-columns: 1fr;
    }

    .fk-checkout-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .fk-checkout-page {
        padding: 10px 0 80px;
    }

    .fk-checkout-container {
        padding: 0 10px;
    }

    .fk-checkout-layout {
        gap: 10px;
    }

    .fk-section-header {
        padding: 14px 16px;
        gap: 10px;
    }

    .fk-section-title {
        font-size: 14px;
    }

    .fk-section-num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .fk-section-content {
        padding: 16px;
    }

    .fk-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 14px;
    }

    .fk-form-group input,
    .fk-form-group select,
    .fk-form-group textarea {
        padding: 12px 14px;
        font-size: 14px;
    }

    .fk-form-group label {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .fk-form-group textarea {
        min-height: 80px;
    }

    .fk-shipping-method {
        padding: 12px;
        gap: 10px;
    }

    .fk-shipping-name {
        font-size: 13px;
    }

    .fk-shipping-desc {
        font-size: 11px;
    }

    .fk-payment-method {
        padding: 12px;
    }

    .fk-payment-header label {
        font-size: 13px;
    }

    .fk-payment-content {
        padding-top: 12px;
        margin-top: 12px;
    }

    .fk-continue-btn {
        width: 100%;
        padding: 14px 20px;
        text-align: center;
        font-size: 14px;
    }

    .fk-order-header {
        padding: 12px 16px;
        font-size: 11px;
    }

    .fk-order-items {
        padding: 12px 16px;
        max-height: 200px;
    }

    .fk-order-item {
        padding: 10px 0;
        gap: 10px;
    }

    .fk-order-item-img {
        width: 48px;
        min-width: 48px;
    }

    .fk-order-item-name {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .fk-order-item-qty {
        font-size: 11px;
    }

    .fk-order-item-price {
        font-size: 13px;
        white-space: nowrap;
    }

    .fk-price-details {
        padding: 12px 16px;
    }

    .fk-price-row {
        font-size: 13px;
        padding: 6px 0;
    }

    .fk-price-row.total {
        font-size: 15px;
        padding-top: 12px;
    }

    .fk-order-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 12px 16px;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        z-index: 99;
        border-top: 1px solid #f0f0f0;
    }

    .fk-place-order-btn {
        padding: 14px;
        font-size: 15px;
        border-radius: 4px;
    }

    .fk-secure-info {
        padding: 10px 16px;
        font-size: 11px;
    }

    .woocommerce-checkout .select2-container--default .select2-selection--single {
        height: 44px;
    }

    .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px;
        padding-left: 14px;
        font-size: 14px;
    }

    .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px;
    }

    .fk-login-section .fk-login-info {
        font-size: 13px;
    }

    .fk-login-section .fk-login-email {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        word-break: break-all;
    }

    .fk-guest-note {
        font-size: 12px;
    }

    .woocommerce-checkout #payment .payment_methods li {
        padding: 10px 12px;
    }

    .woocommerce-checkout #payment .payment_box {
        padding: 10px 12px;
        font-size: 13px;
    }

    .woocommerce-checkout #place_order {
        padding: 14px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .fk-checkout-page {
        padding: 8px 0 76px;
    }

    .fk-checkout-container {
        padding: 0 8px;
    }

    .fk-section-header {
        padding: 12px 14px;
    }

    .fk-section-title {
        font-size: 13px;
    }

    .fk-section-content {
        padding: 14px;
    }

    .fk-form-group input,
    .fk-form-group select,
    .fk-form-group textarea {
        padding: 10px 12px;
        font-size: 13px;
    }

    .fk-form-group label {
        font-size: 10px;
    }

    .fk-order-item-img {
        width: 40px;
        min-width: 40px;
    }

    .fk-order-item-name {
        font-size: 12px;
    }

    .fk-order-item-price {
        font-size: 12px;
    }

    .fk-price-row {
        font-size: 12px;
    }

    .fk-price-row.total {
        font-size: 14px;
    }

    .fk-place-order-btn {
        padding: 12px;
        font-size: 14px;
    }

    .fk-continue-btn {
        padding: 12px 16px;
        font-size: 13px;
    }

    .woocommerce-checkout .select2-container--default .select2-selection--single {
        height: 40px;
    }

    .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px;
        font-size: 13px;
    }

    .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
    }
}


/* ============================================
   THANK YOU / ORDER RECEIVED PAGE STYLES
   (Extracted from woocommerce/checkout/thankyou.php)
   ============================================ */

/* Order Received Page - Professional Styling */
.fk-thankyou-page {
    background: white;
    width: 100%;
    padding: 0;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.fk-thankyou-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Success Header */
.fk-success-header {
    background: linear-gradient(135deg, #388e3c 0%, #4caf50 100%);
    border-radius: 0;
    padding: 40px 30px;
    text-align: center;
    color: white;
    margin-bottom: 0;
}

.fk-success-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: fkScaleIn 0.5s ease-out;
}

@keyframes fkScaleIn {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.fk-success-icon svg {
    width: 45px;
    height: 45px;
    stroke: #388e3c;
    stroke-width: 3;
}

.fk-success-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
}

.fk-success-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

/* Order Info Bar */
.fk-order-info-bar {
    background: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.fk-order-number {
    font-size: 14px;
    color: #878787;
}

.fk-order-number strong {
    color: #212121;
    font-size: 16px;
}

.fk-order-date {
    font-size: 14px;
    color: #878787;
}

/* Status Tracker */
.fk-status-tracker {
    background: white;
    padding: 30px;
    border-bottom: 1px solid #f0f0f0;
}

.fk-status-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin: 0 0 25px;
}

.fk-status-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.fk-status-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: #e0e0e0;
    z-index: 1;
}

.fk-status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.fk-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 18px;
    color: #878787;
}

.fk-status-step.active .fk-step-icon {
    background: #388e3c;
    color: white;
}

.fk-status-step.completed .fk-step-icon {
    background: #388e3c;
    color: white;
}

.fk-step-label {
    font-size: 12px;
    color: #878787;
    text-align: center;
}

.fk-status-step.active .fk-step-label,
.fk-status-step.completed .fk-step-label {
    color: #388e3c;
    font-weight: 600;
}

/* Main Content Grid */
.fk-thankyou-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 20px;
    margin-top: 20px;
}

/* Order Items Card */
.fk-order-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

.fk-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fk-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin: 0;
}

.fk-card-badge {
    font-size: 12px;
    background: #e8f5e9;
    color: #388e3c;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
}

/* Thank You - Order Items */
.fk-thankyou-page .fk-order-items {
    padding: 0;
}

.fk-thankyou-page .fk-order-item {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.fk-thankyou-page .fk-order-item:last-child {
    border-bottom: none;
}

.fk-item-image {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.fk-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fk-item-details {
    flex: 1;
}

.fk-item-name {
    font-size: 14px;
    color: #212121;
    margin: 0 0 6px;
    font-weight: 500;
}

.fk-item-seller {
    font-size: 12px;
    color: #878787;
    margin-bottom: 8px;
}

.fk-item-qty {
    font-size: 12px;
    color: #878787;
}

.fk-item-price {
    text-align: right;
}

.fk-item-total {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
}

.fk-item-unit {
    font-size: 12px;
    color: #878787;
    margin-top: 4px;
}

/* Sidebar */
.fk-thankyou-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Price Summary */
.fk-price-summary {
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

/* Thank You - Payment Method */
.fk-thankyou-page .fk-payment-method {
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #212121;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}

.fk-payment-icon {
    width: 24px;
    height: 24px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Address Cards */
.fk-address-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

.fk-address-title {
    font-size: 12px;
    font-weight: 600;
    color: #878787;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.fk-address-name {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 6px;
}

.fk-address-text {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.fk-address-phone {
    font-size: 13px;
    color: #212121;
    margin-top: 8px;
}

/* Action Buttons */
.fk-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.fk-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #ff6600;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.fk-btn-primary:hover {
    background: #e55b00;
    color: white;
}

.fk-btn-secondary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: white;
    color: #2874f0;
    border: 1px solid #2874f0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.fk-btn-secondary:hover {
    background: #f0f5ff;
    color: #2874f0;
}

/* Help Section */
.fk-help-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.fk-help-title {
    font-size: 14px;
    color: #212121;
    margin: 0 0 10px;
}

.fk-help-text {
    font-size: 13px;
    color: #878787;
    margin: 0 0 15px;
}

.fk-help-link {
    color: #2874f0;
    text-decoration: none;
    font-weight: 500;
}

/* Thank You - Email Notice */
.fk-email-notice {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-top: 15px;
    text-align: center;
}

.fk-email-notice p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Thank You - No Order Found */
.fk-no-order {
    background: white;
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
}

.fk-no-order svg {
    margin-bottom: 20px;
}

.fk-no-order h2 {
    font-size: 20px;
    color: #212121;
    margin: 0 0 10px;
}

.fk-no-order p {
    color: #878787;
    margin: 0 0 20px;
}

/* Thank You - Responsive */
@media (max-width: 900px) {
    .fk-thankyou-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .fk-success-header {
        padding: 30px 20px;
    }

    .fk-success-title {
        font-size: 22px;
    }

    .fk-order-info-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .fk-status-steps {
        flex-direction: column;
        gap: 20px;
    }

    .fk-status-steps::before {
        display: none;
    }

    .fk-status-step {
        flex-direction: row;
        gap: 15px;
    }

    .fk-step-icon {
        margin-bottom: 0;
    }

    .fk-thankyou-page .fk-order-item {
        flex-wrap: wrap;
    }

    .fk-item-price {
        width: 100%;
        text-align: left;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #f0f0f0;
    }

    .fk-action-buttons {
        flex-direction: column;
    }
}


/* ============================================
   BLOG LISTING (index.php) STYLES
   ============================================ */

.sd-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    padding: 3rem 0;
}

.sd-blog-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.sd-blog-thumbnail {
    height: 200px;
    overflow: hidden;
}

.sd-blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-blog-body {
    padding: 1.5rem;
}

.sd-blog-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.sd-blog-title a {
    color: #333;
    text-decoration: none;
}

.sd-blog-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

.sd-blog-excerpt {
    color: #666;
    line-height: 1.6;
}

.sd-blog-readmore {
    margin-top: 1rem;
    display: inline-block;
}

.sd-blog-empty {
    text-align: center;
    padding: 4rem 0;
}


/* ============================================
   STATIC PAGE (page.php) STYLES
   ============================================ */

.sd-page-wrapper {
    padding: 3rem 0;
    background: var(--color-bg-cream);
    min-height: 60vh;
}

.sd-page-article {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.sd-page-header {
    margin-bottom: 2rem;
    text-align: center;
}

.sd-page-title {
    font-size: 2.5rem;
    color: var(--color-red);
    margin-bottom: 0.5rem;
}

.sd-page-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}


/* ============================================
   SINGLE POST (single.php) STYLES
   ============================================ */

.sd-single-wrapper {
    padding: 3rem 0;
    background: var(--color-bg-cream);
}

.sd-single-article {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

.sd-single-featured {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.sd-single-featured img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.sd-single-inner {
    padding: 2.5rem;
}

.sd-single-header {
    margin-bottom: 2rem;
}

.sd-single-categories {
    margin-bottom: 1rem;
}

.sd-single-cat-badge {
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    text-transform: uppercase;
    display: inline-block;
}

.sd-single-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.sd-single-meta {
    display: flex;
    gap: 1.5rem;
    color: #666;
    font-size: 0.9rem;
}

.sd-single-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

.sd-single-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.sd-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sd-single-tags strong {
    margin-right: 0.5rem;
}

.sd-single-tag {
    background: #f5f5f5;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
}

.sd-single-nav {
    max-width: 900px;
    margin: 2rem auto 0;
    display: flex;
    justify-content: space-between;
}

.sd-single-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* ============================================
   SEARCH RESULTS (search.php) STYLES
   ============================================ */

.sd-search-wrapper {
    background: var(--color-bg-cream);
    padding: 3rem 0;
    min-height: 60vh;
}

.sd-search-header {
    text-align: center;
    margin-bottom: 3rem;
}

.sd-search-title {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.sd-search-title .sd-search-query {
    color: var(--color-red);
}

.sd-search-form {
    max-width: 500px;
    margin: 0 auto;
}

.sd-search-form form {
    display: flex;
    gap: 0.5rem;
}

.sd-search-form input[type="search"] {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
}

.sd-search-count {
    color: #666;
    margin-bottom: 2rem;
}

.sd-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.sd-search-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.sd-search-thumbnail {
    height: 180px;
    overflow: hidden;
}

.sd-search-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-search-body {
    padding: 1.25rem;
}

.sd-search-type {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sd-search-card-title {
    font-size: 1.1rem;
    margin: 0.5rem 0;
    line-height: 1.3;
}

.sd-search-card-title a {
    color: #333;
    text-decoration: none;
}

.sd-search-excerpt {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.sd-search-viewmore {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.sd-search-pagination {
    margin-top: 2rem;
    text-align: center;
}

.sd-search-noresults {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
}

.sd-search-noresults svg {
    margin-bottom: 1.5rem;
}

.sd-search-noresults h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.sd-search-noresults p {
    color: #666;
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================
   404 ERROR PAGE (404.php) STYLES
   ============================================ */

.sd-404-wrapper {
    background: var(--color-bg-cream);
    padding: 5rem 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.sd-404-container {
    text-align: center;
}

.sd-404-content {
    max-width: 600px;
    margin: 0 auto;
}

.sd-404-number {
    font-size: 8rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1;
}

.sd-404-number .sd-404-zero {
    color: var(--color-red);
}

.sd-404-icon {
    margin: 2rem 0;
}

.sd-404-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
}

.sd-404-text {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.sd-404-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.sd-404-search {
    margin-top: 3rem;
}

.sd-404-search p {
    color: #666;
    margin-bottom: 1rem;
}

.sd-404-search form {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
    margin: 0 auto;
}

.sd-404-search input[type="search"] {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
}


/* ============================================
   WOOCOMMERCE PAGE WRAPPER (woocommerce.php) STYLES
   ============================================ */

.sd-wc-page-wrapper {
    padding: 2rem 0;
    background: var(--color-bg-cream);
    min-height: 60vh;
}

.sd-wc-page-article {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}


/* ============================================
   JS ANIMATION & UTILITY STYLES
   (Extracted from assets/js/main.js)
   ============================================ */

/* Header scroll effects */
.site-header.scrolled,
.instamart-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.site-header.header-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

/* Search focus state */
.search-bar.focused input,
.instamart-search.focused input {
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.3);
}

/* Category bounce animation */
.category-icon.bounce,
.category-circle.bounce {
    animation: bounceIcon 0.5s ease;
}

@keyframes bounceIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Cart added animation */
.cart-btn.cart-added,
.instamart-cart-btn.cart-added {
    animation: cartPulse 0.6s ease;
}

.cart-count.bounce {
    animation: countBounce 0.5s ease;
}

@keyframes cartPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes countBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

/* Scroll animations */
.category-item,
.category-circle-item,
.promo-card,
.feature-item,
.product-card,
.product-card-horizontal,
.shop-category-item,
.delivery-option-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.category-item.animated,
.category-circle-item.animated,
.promo-card.animated,
.feature-item.animated,
.product-card.animated,
.product-card-horizontal.animated,
.shop-category-item.animated,
.delivery-option-card.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations for category circles */
.category-circle-item:nth-child(1).animated {
    transition-delay: 0.05s;
}

.category-circle-item:nth-child(2).animated {
    transition-delay: 0.1s;
}

.category-circle-item:nth-child(3).animated {
    transition-delay: 0.15s;
}

.category-circle-item:nth-child(4).animated {
    transition-delay: 0.2s;
}

.category-circle-item:nth-child(5).animated {
    transition-delay: 0.25s;
}

.category-circle-item:nth-child(6).animated {
    transition-delay: 0.3s;
}

.category-circle-item:nth-child(7).animated {
    transition-delay: 0.35s;
}

.category-circle-item:nth-child(8).animated {
    transition-delay: 0.4s;
}

.category-circle-item:nth-child(9).animated {
    transition-delay: 0.45s;
}

/* Staggered animations for delivery options */
.delivery-option-card:nth-child(1).animated {
    transition-delay: 0.1s;
}

.delivery-option-card:nth-child(2).animated {
    transition-delay: 0.2s;
}

.delivery-option-card:nth-child(3).animated {
    transition-delay: 0.3s;
}

/* Loading button */
.add_to_cart_button.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Blinkit-style ADD button states */
.bk-add-btn.added {
    background: #2E7D32 !important;
    color: white !important;
    border-color: #2E7D32 !important;
}

.add_to_cart_button.loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Scroll arrow hidden state */
.scroll-arrow.hidden {
    opacity: 0.3;
    pointer-events: none;
}

/* Mobile nav */
@media (max-width: 768px) {
    .nav-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .nav-list.active {
        display: flex;
    }

    /* Hide scroll arrows on mobile */
    .scroll-arrow {
        display: none !important;
    }
}

/* ============================================
   Login & Register Customizer Plugin Overrides
   (easy-login-woocommerce / xoo-el)
   Sevenday Mart Theme Integration
   ============================================ */

/* --- Overlay --- */
.xoo-el-popup-active .xoo-el-opac {
    opacity: 0.45 !important;
    background-color: #1a1a2e !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- Modal positioning --- */
.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-modal:before {
    display: none;
    /* Remove the old inline-block centering hack */
}

/* --- Inner modal card --- */
.xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal {
    border-radius: 20px;
    overflow: hidden;
    max-width: 420px !important;
    width: 92%;
    height: auto !important;
    max-height: 90vh;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
    display: inline-flex;
    vertical-align: middle;
    animation: sdPopupSlideIn 0.3s ease-out;
}

@keyframes sdPopupSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hide sidebar - clean compact look */
.xoo-el-sidebar {
    display: none !important;
}

.xoo-el-srcont {
    width: 100%;
    background-color: #fff;
}

/* --- Close button --- */
span.xoo-el-close {
    right: 12px !important;
    top: 12px !important;
    width: 34px;
    height: 34px;
    background: #f5f0e6;
    color: #1a1a2e;
    font-size: 13px;
    box-shadow: none;
    transition: all 0.2s ease;
    z-index: 200;
}

span.xoo-el-close:hover {
    background: #ede7d9;
    color: #e63030;
    transform: rotate(90deg);
}

/* --- Header / Tabs --- */
.xoo-el-header {
    padding-top: 6px;
}

.xoo-el-form-container ul.xoo-el-tabs {
    padding: 0 28px 0 !important;
    gap: 0;
    border-bottom: 1.5px solid #f0ece4;
    margin-bottom: 4px;
}

.xoo-el-form-container ul.xoo-el-tabs li {
    background: transparent !important;
    color: #999 !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
    flex-grow: 0;
}

.xoo-el-form-container ul.xoo-el-tabs li:hover {
    color: #1a1a2e !important;
}

.xoo-el-form-container ul.xoo-el-tabs li.xoo-el-active {
    background: transparent !important;
    color: #009BDC !important;
    border-bottom-color: #009BDC;
    pointer-events: none;
}

/* --- Main content area --- */
.xoo-el-main {
    padding: 28px 28px 24px !important;
    font-family: 'Outfit', sans-serif;
}

/* --- Form labels --- */
.xoo-el-form-container label.xoo-el-form-label,
.xoo-el-main label {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 4px;
}

/* --- Form fields container --- */
.xoo-el-fields {
    margin-bottom: 4px;
}

.xoo-aff-group {
    margin-bottom: 16px;
}

/* --- Input fields --- */
.xoo-el-main .xoo-aff-input-group input,
.xoo-el-main .xoo-aff-input-group select,
.xoo-el-main input[type="text"],
.xoo-el-main input[type="email"],
.xoo-el-main input[type="password"],
.xoo-el-main input[type="tel"],
.xoo-el-main input[type="number"] {
    border: 1.5px solid #e8e3da !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px;
    padding: 12px 16px !important;
    background: #faf8f4;
    color: #1a1a2e;
    transition: all 0.2s ease;
    height: auto;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}

.xoo-el-main .xoo-aff-input-group input::placeholder {
    color: #aaa;
    font-weight: 400;
}

.xoo-el-main .xoo-aff-input-group input:focus,
.xoo-el-main input[type="text"]:focus,
.xoo-el-main input[type="email"]:focus,
.xoo-el-main input[type="password"]:focus,
.xoo-el-main input[type="tel"]:focus,
.xoo-el-main input[type="number"]:focus {
    border-color: #009BDC !important;
    background: #fff !important;
    box-shadow: 0 0 0 3.5px rgba(0, 155, 220, 0.10);
    outline: none !important;
}

/* Input icon styling */
.xoo-aff-input-group svg.xoo-aff-input-icon {
    color: #009BDC;
    opacity: 0.7;
}

/* Password toggle */
.xoo-aff-pw-toggle {
    color: #999;
}

.xoo-aff-pw-toggle:hover {
    color: #009BDC;
}

/* --- Remember me & Forgot password row --- */
.xoo-aff-group.xoo-el-login-btm-fields {
    margin-bottom: 8px;
    margin-top: -4px;
}

.xoo-aff-group.xoo-el-login-btm-fields .xoo-el-form-label {
    font-size: 13px;
    color: #777;
}

.xoo-aff-group.xoo-el-login-btm-fields input[type="checkbox"] {
    accent-color: #009BDC;
    width: 15px;
    height: 15px;
    border-radius: 4px;
}

a.xoo-el-lostpw-tgr,
.xoo-el-lostpw-tgr {
    color: #009BDC !important;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    text-decoration: none !important;
}

a.xoo-el-lostpw-tgr:hover,
.xoo-el-lostpw-tgr:hover {
    color: #0088c2 !important;
    text-decoration: underline !important;
}

/* --- Submit button --- */
.xoo-el-form-container button.button.btn.xoo-el-action-btn,
.xoo-el-form-container button.xoo-el-action-btn {
    background: #009BDC !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    font-size: 15px !important;
    padding: 0 24px;
    height: 48px !important;
    color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100% !important;
    margin: 8px 0 !important;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: 0 4px 14px rgba(0, 155, 220, 0.3);
}

.xoo-el-form-container button.button.btn.xoo-el-action-btn:hover,
.xoo-el-form-container button.xoo-el-action-btn:hover {
    background: #0088c2 !important;
    box-shadow: 0 6px 20px rgba(0, 155, 220, 0.4);
    transform: translateY(-1px);
}

.xoo-el-form-container button.button.btn.xoo-el-action-btn:active,
.xoo-el-form-container button.xoo-el-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 155, 220, 0.25);
}

/* Spinner inside button */
.xoo-el-action-btn .xoo-el-spinner {
    color: #fff;
    margin-left: 8px;
}

/* --- Notices (Error / Success / Warning) --- */
.xoo-el-notice {
    width: 100% !important;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    margin-bottom: 14px;
}

.xoo-el-notice-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 10px;
}

.xoo-el-notice-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 10px 14px;
    border-radius: 10px;
}

.xoo-el-notice-warning {
    background: #fffbeb;
    border: 1px solid #fed7aa;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 10px;
}

/* --- Navigation footer (switch between login/register) --- */
span.xoo-el-nav-ft {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: #777;
    margin-top: 16px;
}

span.xoo-el-nav-ft .xoo-el-login-tgr,
span.xoo-el-nav-ft .xoo-el-reg-tgr {
    color: #009BDC;
    font-weight: 600;
    cursor: pointer;
}

span.xoo-el-nav-ft .xoo-el-login-tgr:hover,
span.xoo-el-nav-ft .xoo-el-reg-tgr:hover {
    text-decoration: underline;
}

/* --- OTP / Verification Code --- */
form.xoo-el-code-form {
    margin: 16px 0;
}

.xoo-el-code-sent-txt {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

span.xoo-el-code-no-change {
    color: #009BDC;
    font-weight: 600;
}

form.xoo-el-code-form input.xoo-el-code-input {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    border-bottom: 2.5px solid #e8e3da;
    max-width: 44px;
    transition: border-color 0.2s ease;
}

form.xoo-el-code-form input.xoo-el-code-input:focus {
    border-bottom-color: #009BDC !important;
}

.xoo-el-code-input-cont {
    column-gap: 16px;
    margin-bottom: 24px;
}

button.button.btn.xoo-el-code-submit-btn {
    background: #009BDC !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600;
    font-size: 14px !important;
    color: #fff !important;
    padding: 12px 32px;
    text-transform: none;
    box-shadow: 0 4px 14px rgba(0, 155, 220, 0.3);
    transition: all 0.2s ease;
}

button.button.btn.xoo-el-code-submit-btn:hover {
    background: #0088c2 !important;
    transform: translateY(-1px);
}

a.xoo-el-code-resend-link {
    color: #009BDC !important;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

a.xoo-el-code-resend-link:hover {
    text-decoration: underline !important;
}

/* --- Lost password form --- */
.xoo-el-form-resetpw .xoo-el-form-txt,
.xoo-el-section-lostpw .xoo-el-form-txt {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

/* --- Single form heading (if used) --- */
span.xoo-el-sing-head {
    font-family: 'Fredoka One', cursive;
    font-size: 26px;
    color: #1a1a2e;
    margin-bottom: 6px;
}

span.xoo-el-sing-subtxt {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #777;
}

/* --- Header image --- */
img.xoo-el-head-img {
    max-width: 120px;
    margin-bottom: 20px;
}

/* --- Processing / loading state --- */
.xoo-el-processing {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Scrollbar inside modal --- */
.xoo-el-srcont::-webkit-scrollbar {
    width: 5px;
}

.xoo-el-srcont::-webkit-scrollbar-track {
    background: transparent;
}

.xoo-el-srcont::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}

/* --- Form action link area --- */
form.xoo-el-action-form {
    margin-top: 16px;
}

/* --- WooCommerce My Account inline form --- */
.xoo-el-form-container.xoo-el-form-inline {
    max-width: 440px;
    margin: 20px auto;
    background: #fff;
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* --- Password strength meter --- */
.xoo-el-main .woocommerce-password-strength {
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    padding: 6px 12px;
    margin-top: 6px;
}

/* ---- RESPONSIVE ---- */

/* Tablet */
@media (max-width: 768px) {
    .xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal {
        max-width: 400px !important;
        width: 94%;
    }
}

/* Mobile — full-width bottom sheet style */
@media (max-width: 480px) {
    .xoo-el-container:not(.xoo-el-style-slider) .xoo-el-modal {
        align-items: flex-end;
    }

    .xoo-el-container:not(.xoo-el-style-slider) .xoo-el-inmodal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        animation: sdPopupSlideUp 0.35s ease-out;
    }

    @keyframes sdPopupSlideUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .xoo-el-main {
        padding: 24px 20px 28px !important;
    }

    .xoo-el-form-container ul.xoo-el-tabs {
        padding: 0 20px 0 !important;
    }

    span.xoo-el-close {
        right: 16px !important;
        top: 16px !important;
    }
}

/* ============================================
   RATINGS & REVIEWS — Quick-Commerce Style
   (Blinkit / Zepto / Flipkart Minutes inspired)
   ============================================ */

/* Container */
.sd-rv {
    padding: 0;
}

/* ── Rating Summary Row ── */
.sd-rv-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    flex-wrap: wrap;
}

.sd-rv-summary-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Green rating pill badge */
.sd-rv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.sd-rv-badge--empty {
    background: #d1d5db;
    padding: 6px 10px;
}

.sd-rv-badge-star {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sd-rv-badge-num {
    font-size: 18px;
}

.sd-rv-counts {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.sd-rv-counts-num {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.sd-rv-counts-sep {
    color: #999;
    font-size: 13px;
}

.sd-rv-no-ratings {
    color: #999 !important;
    font-weight: 500 !important;
}

/* Rate Product button */
.sd-rv-write-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #009BDC;
    background: #fff;
    border: 1.5px solid #009BDC;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.sd-rv-write-btn:hover {
    background: #009BDC;
    color: #fff;
}

/* ── Rating Distribution Bars ── */
.sd-rv-bars {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sd-rv-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sd-rv-bar-row:last-child {
    margin-bottom: 0;
}

.sd-rv-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    width: 28px;
    flex-shrink: 0;
}

.sd-rv-bar-label svg {
    color: #9ca3af;
}

.sd-rv-bar-track {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.sd-rv-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.sd-rv-bar-count {
    font-size: 13px;
    font-weight: 600;
    color: #888;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Review Form ── */
.sd-rv-form-wrap {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    animation: sdRvSlideIn 0.3s ease-out;
}

@keyframes sdRvSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sd-rv-form-card {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.sd-rv-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sd-rv-form-header h3 {
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
}

.sd-rv-form-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.sd-rv-form-close:hover {
    color: #374151;
}

.sd-rv-must-buy {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    padding: 20px;
}

/* Form fields inside review form */
.sd-rv-form-card #respond {
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
}

.sd-rv-form-card .comment-reply-title {
    display: none;
}

.sd-rv-form-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.sd-rv-form-card input[type="text"],
.sd-rv-form-card input[type="email"],
.sd-rv-form-card textarea,
.sd-rv-form-card select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    margin-bottom: 14px;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.sd-rv-form-card input:focus,
.sd-rv-form-card textarea:focus,
.sd-rv-form-card select:focus {
    border-color: #009BDC;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 155, 220, 0.1);
}

.sd-rv-form-card textarea {
    resize: vertical;
    min-height: 100px;
}

.sd-rv-form-card input[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #009BDC;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.sd-rv-form-card input[type="submit"]:hover {
    background: #0088c2;
}

/* Star rating input (WooCommerce) */
.sd-rv-form-card .comment-form-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sd-rv-form-card .comment-form-rating label {
    margin-bottom: 0;
}

.sd-rv-form-card .comment-form-rating select {
    width: auto;
    min-width: 140px;
    margin-bottom: 0;
}

.comment-form-rating p.stars {
    margin-bottom: 0;
    display: flex;
    gap: 4px;
}

.comment-form-rating p.stars a {
    position: relative;
    height: 1em;
    width: 1em;
    text-indent: -999em;
    display: inline-block;
    text-decoration: none;
    font-size: 28px;
    color: #ffc107;
}

.comment-form-rating p.stars a::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-family: WooCommerce;
    content: "\e021";
    text-indent: 0;
    color: #d1d5db;
    transition: color 0.15s;
}

.comment-form-rating p.stars a:hover::before,
.comment-form-rating p.stars a:hover~a::before,
.comment-form-rating p.stars.selected a.active::before,
.comment-form-rating p.stars.selected a.active~a::before,
.comment-form-rating p.stars.selected a:not(.active)::before,
.comment-form-rating p.stars.selected a:not(.active)~a::before {
    content: "\e020";
    color: #ffc107;
}

.comment-form-rating p.stars:hover a::before {
    content: "\e021";
    color: #d1d5db;
}

.comment-form-rating p.stars:hover a:hover::before,
.comment-form-rating p.stars:hover a:hover~a::before {
    content: "\e020";
    color: #ffc107;
}

.comment-form-rating p.stars.selected a.active::before,
.comment-form-rating p.stars.selected a.active~a::before {
    content: "\e020";
    color: #ffc107;
}

/* ── Reviews List ── */
.sd-rv-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 14px;
    gap: 12px;
}

.sd-rv-list-title {
    font-size: 16px;
    font-weight: 800;
    color: #1f2937;
}

.sd-rv-sort {
    padding: 8px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Review list */
.sd-rv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual review card */
.sd-rv-card {
    padding: 18px 0;
    border-bottom: 1px solid #f3f4f6;
    list-style: none;
}

.sd-rv-card:last-child {
    border-bottom: none;
}

.sd-rv-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Colored initial avatar */
.sd-rv-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}

.sd-rv-card-meta {
    flex: 1;
    min-width: 0;
}

.sd-rv-card-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.sd-rv-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

/* Verified buyer badge */
.sd-rv-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1.4;
}

.sd-rv-verified svg {
    color: #16a34a;
    flex-shrink: 0;
}

.sd-rv-card-rating-date {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Small star pill on each review */
.sd-rv-card-stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.sd-rv-card-stars svg {
    flex-shrink: 0;
}

.sd-rv-card-date {
    font-size: 12px;
    color: #9ca3af;
}

/* Review body */
.sd-rv-card-body {
    margin-top: 10px;
    padding-left: 52px;
}

.sd-rv-card-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Helpful / Not helpful */
.sd-rv-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-left: 52px;
}

.sd-rv-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.sd-rv-helpful-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}

.sd-rv-helpful-btn svg {
    flex-shrink: 0;
}

.sd-rv-helpful--active {
    border-color: #009BDC;
    color: #009BDC;
    background: #f0f9ff;
}

.sd-rv-helpful--active:hover {
    border-color: #009BDC;
    color: #009BDC;
    background: #f0f9ff;
}

/* ── Pagination ── */
.sd-rv-pagination {
    padding: 16px 0;
    text-align: center;
}

.sd-rv-pagination ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0;
    margin: 0;
}

.sd-rv-pagination li a,
.sd-rv-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s;
}

.sd-rv-pagination li a:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.sd-rv-pagination li .current {
    background: #009BDC;
    border-color: #009BDC;
    color: #fff;
}

/* ── Empty State ── */
.sd-rv-empty {
    text-align: center;
    padding: 48px 20px;
}

.sd-rv-empty-icon {
    margin-bottom: 16px;
    color: #d1d5db;
}

.sd-rv-empty-icon svg {
    width: 48px;
    height: 48px;
}

.sd-rv-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
    margin: 0 0 6px;
}

.sd-rv-empty-sub {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .sd-rv-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .sd-rv-write-btn {
        width: 100%;
        justify-content: center;
    }

    .sd-rv-form-card {
        padding: 18px;
    }

    .sd-rv-card-body,
    .sd-rv-card-actions {
        padding-left: 0;
    }

    .sd-rv-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sd-rv-sort {
        width: 100%;
    }
}

/* ============================================
   WISHLIST / SAVE FOR LATER
   ============================================ */

/* Heart Icon Button */
.sd-wishlist-heart {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 5;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sd-wishlist-heart:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sd-wishlist-heart svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #888;
    stroke-width: 2;
    transition: fill 0.2s ease, stroke 0.2s ease;
    pointer-events: none;
}

.sd-wishlist-heart.sd-wishlisted svg {
    fill: #FF4A8D;
    stroke: #FF4A8D;
}

/* Pop animation on toggle */
@keyframes sdHeartPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.sd-wishlist-heart.sd-heart-animating {
    animation: sdHeartPop 0.4s ease;
}

/* Size overrides for different card types */
.sd-hcard .sd-wishlist-heart,
.sd-hcard-img-wrap .sd-wishlist-heart {
    width: 26px;
    height: 26px;
    top: 4px;
    right: 4px;
}

.sd-hcard .sd-wishlist-heart svg,
.sd-hcard-img-wrap .sd-wishlist-heart svg {
    width: 13px;
    height: 13px;
}

.sd-gallery-main .sd-wishlist-heart {
    width: 40px;
    height: 40px;
    top: 12px;
    right: 12px;
}

.sd-gallery-main .sd-wishlist-heart svg {
    width: 20px;
    height: 20px;
}

/* Move discount badge to left on bk-product-card to avoid collision */
.bk-product-card {
    position: relative;
}

.bk-product-card .discount-badge {
    left: 8px;
    right: auto;
}

/* Ensure ref-product-card has relative positioning for heart */
.ref-product-card {
    position: relative;
}


/* ref-prod-card — smaller heart for compact shop cards */
.ref-prod-card {
    position: relative;
}

.ref-prod-card .sd-wishlist-heart {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
}

.ref-prod-card .sd-wishlist-heart svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 480px) {
    .ref-prod-card .sd-wishlist-heart {
        width: 22px;
        height: 22px;
        top: 2px;
        right: 2px;
    }
    .ref-prod-card .sd-wishlist-heart svg {
        width: 11px;
        height: 11px;
    }
}

/* fk-rec-card positioning for heart */
.fk-rec-card {
    position: relative;
}

/* Header Wishlist Button */
.instamart-wishlist-btn {
    position: relative;
}

.instamart-wishlist-btn .wishlist-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #FF4A8D;
    color: white;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.instamart-wishlist-btn .wishlist-count.sd-hidden {
    display: none;
}

/* Saved for Later Section (Cart Page) */
.fk-saved-section {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
    padding: 20px 24px;
}

.fk-saved-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: #212121;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.fk-saved-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: opacity 0.3s ease;
}

.fk-saved-item:last-child {
    border-bottom: none;
}

.fk-saved-item-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.fk-saved-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fk-saved-item-details {
    flex: 1;
    min-width: 0;
}

.fk-saved-item-name {
    font-size: 14px;
    color: #212121;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fk-saved-item-name a {
    color: inherit;
    text-decoration: none;
}

.fk-saved-item-price {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 8px;
}

.fk-saved-item-actions {
    display: flex;
    gap: 16px;
}

.fk-saved-item-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 0;
}

.fk-move-to-cart {
    color: #2874f0;
}

.fk-remove-saved {
    color: #878787;
}

@media (max-width: 600px) {
    .fk-saved-item {
        flex-wrap: wrap;
    }
    .fk-saved-item-img {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   WISHLIST PAGE
   ============================================ */
.sd-wishlist-page {
    background: var(--color-bg-cream, #F5F0E6);
    min-height: 70vh;
    padding: 30px 0 60px;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sd-wishlist-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.sd-wishlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.sd-wishlist-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.sd-wishlist-header .sd-wishlist-count-label {
    font-size: 14px;
    color: #878787;
    font-weight: 400;
}

.sd-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sd-wishlist-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
}

.sd-wishlist-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sd-wishlist-card.sd-removing {
    opacity: 0;
    transform: scale(0.9);
}

.sd-wishlist-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e0e0e0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    font-size: 14px;
    color: #878787;
    transition: background 0.2s;
    padding: 0;
    line-height: 1;
}

.sd-wishlist-card-remove:hover {
    background: #fff;
    color: #212121;
}

.sd-wishlist-card-img {
    padding: 16px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.sd-wishlist-card-img a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sd-wishlist-card-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.sd-wishlist-card-body {
    padding: 12px 16px 16px;
}

.sd-wishlist-card-name {
    font-size: 14px;
    color: #212121;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
    line-height: 1.4;
}

.sd-wishlist-card-name a {
    color: inherit;
    text-decoration: none;
}

.sd-wishlist-card-price {
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    margin-bottom: 4px;
}

.sd-wishlist-card-price del {
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    margin-left: 6px;
}

.sd-wishlist-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-primary, #009BDC);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    z-index: 4;
}

.sd-wishlist-card-cart {
    margin-top: 10px;
}

/* Empty wishlist state */
.sd-wishlist-empty {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 8px;
}

.sd-wishlist-empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.sd-wishlist-empty-icon svg {
    width: 100%;
    height: 100%;
}

.sd-wishlist-empty h2 {
    font-size: 20px;
    font-weight: 600;
    color: #212121;
    margin: 0 0 8px;
}

.sd-wishlist-empty p {
    font-size: 14px;
    color: #878787;
    margin: 0 0 24px;
}

.sd-wishlist-empty .sd-wishlist-cta {
    display: inline-block;
    background: var(--color-primary, #009BDC);
    color: white;
    padding: 12px 36px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
}

.sd-wishlist-empty .sd-wishlist-cta:hover {
    background: #0088c4;
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
    .sd-wishlist-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sd-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .sd-wishlist-card-img {
        height: 140px;
        padding: 12px;
    }
    .sd-wishlist-header h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .sd-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .sd-wishlist-card-body {
        padding: 8px 10px 12px;
    }
    .sd-wishlist-card-name {
        font-size: 13px;
    }
}

/* ============================================
   INFINITE SCROLL - Loading Sentinel
   ============================================ */
.ref-load-more-sentinel {
    width: 100%;
    min-height: 1px;
    padding: 0;
    background: white;
}

.ref-load-more-spinner {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    font-size: 13px;
    color: #888;
    font-family: 'Outfit', sans-serif;
    background: white;
}


.ref-load-more-sentinel.ref-loading .ref-load-more-spinner {
    display: flex;
}

.ref-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e8e8e8;
    border-top-color: #009BDC;
    border-radius: 50%;
    animation: refSpin 0.7s linear infinite;
}

@keyframes refSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   THREE PILLARS — Homepage Section
   ============================================ */
.ref-pillars-section {
    padding: 40px 0 48px;
}

.ref-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ref-pillars-card {
    position: relative;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ref-pillars-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.ref-pillars-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ref-pillars-card:hover .ref-pillars-img {
    transform: scale(1.06);
}

.ref-pillars-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ref-pillars-content {
    position: relative;
    z-index: 2;
    padding: 28px 24px;
    color: #fff;
    width: 100%;
}

.ref-pillars-title {
    font-family: 'Fredoka One', cursive;
    font-size: 28px;
    margin: 0 0 6px;
    color: #fff;
}

.ref-pillars-tagline {
    font-size: 14px;
    margin: 0 0 16px;
    opacity: 0.92;
    line-height: 1.4;
    color: #fff;
}

.ref-pillars-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease;
}

.ref-pillars-card:hover .ref-pillars-cta {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 768px) {
    .ref-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-pillars-card {
        min-height: 260px;
    }
    .ref-pillars-title {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .ref-pillars-grid {
        grid-template-columns: 1fr;
    }
    .ref-pillars-card {
        min-height: 220px;
    }
}

/* ============================================
   PIZZA & CAFE PAGE — Hero
   ============================================ */
.ref-pc-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ref-pc-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ref-pc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.7), rgba(26, 26, 46, 0.5));
}

.ref-pc-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 600px;
}

.ref-pc-hero-content h1 {
    font-family: 'Fredoka One', cursive;
    font-size: 42px;
    margin: 0 0 12px;
    color: #fff;
}

.ref-pc-hero-content p {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   PIZZA & CAFE PAGE — Tab Navigation
   ============================================ */
.ref-pc-tabs {
    background: #fff;
    border-bottom: 2px solid #eee;
    z-index: 90;
    transition: box-shadow 0.2s;
}

.ref-pc-tabs-sticky {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ref-pc-tabs-inner {
    display: flex;
    gap: 0;
}

.ref-pc-tab {
    flex: 1;
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}

.ref-pc-tab:hover {
    color: #1a1a2e;
}

.ref-pc-tab.active {
    color: #009BDC;
    border-bottom-color: #009BDC;
}

/* ============================================
   PIZZA & CAFE PAGE — Pizza Filters
   ============================================ */
.ref-pc-filters {
    padding: 20px 0 8px;
    background: #f9f7f2;
}

.ref-pc-filters-inner {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ref-pc-filter-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1.5px solid #ddd;
    background: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.ref-pc-filter-btn:hover {
    border-color: #009BDC;
    color: #009BDC;
}

.ref-pc-filter-btn.active {
    background: #009BDC;
    border-color: #009BDC;
    color: #fff;
}

/* ============================================
   PIZZA & CAFE PAGE — Collection Sections
   ============================================ */
.ref-pc-collection {
    padding: 32px 0 16px;
}

.ref-pc-collection-title {
    font-family: 'Fredoka One', cursive;
    font-size: 24px;
    color: #1a1a2e;
    margin: 0 0 20px;
}

/* ============================================
   PIZZA & CAFE PAGE — Pizza Cards
   ============================================ */
.ref-pc-pizza-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ref-pc-pizza-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ref-pc-pizza-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.ref-pc-filter-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    width: fit-content;
}

.ref-pc-pizza-name {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 6px;
}

.ref-pc-pizza-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ref-pc-pizza-toppings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.ref-pc-topping-pill {
    display: inline-block;
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 8px;
    font-size: 11px;
    color: #666;
}

.ref-pc-pizza-prices {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.ref-pc-size-price {
    font-size: 14px;
    color: #333;
}

.ref-pc-size-price strong {
    color: #009BDC;
    margin-right: 2px;
}

.ref-pc-order-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #009BDC;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: auto;
    text-align: center;
    width: 100%;
}

.ref-pc-order-btn:hover {
    background: #0087c3;
}

/* ============================================
   PIZZA & CAFE PAGE — Build Your Own
   ============================================ */
.ref-pc-byo {
    padding: 32px 0 48px;
    background: #f9f7f2;
}

.ref-pc-byo-subtitle {
    font-size: 15px;
    color: #666;
    margin: -12px 0 24px;
}

.ref-pc-byo-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ref-pc-byo-tier-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    border: 1px solid #eee;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ref-pc-byo-tier-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.ref-pc-byo-tier-card h3 {
    font-family: 'Fredoka One', cursive;
    font-size: 22px;
    color: #FF6D2E;
    margin: 0 0 4px;
}

.ref-pc-byo-topping-count {
    font-size: 13px;
    color: #888;
    margin: 0 0 12px;
}

.ref-pc-byo-tier-card .ref-pc-pizza-prices {
    justify-content: center;
}

.ref-pc-byo-tier-card .ref-pc-order-btn {
    background: #FF6D2E;
}

.ref-pc-byo-tier-card .ref-pc-order-btn:hover {
    background: #e55a1f;
}

/* ============================================
   PIZZA & CAFE PAGE — Cafe Sections
   ============================================ */
.ref-pc-cafe-section {
    padding: 28px 0 12px;
}

.ref-pc-cafe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.ref-pc-cafe-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

.ref-pc-cafe-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.ref-pc-cafe-item-name {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.ref-pc-cafe-sizes {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.ref-pc-cafe-single-price {
    font-size: 18px;
    font-weight: 700;
    color: #FF6D2E;
    margin-bottom: 12px;
}

.ref-pc-cafe-size-note {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

.ref-pc-cafe-card .ref-pc-order-btn {
    margin-top: auto;
}

/* ============================================
   PIZZA & CAFE PAGE — Ordering Modal
   ============================================ */
.ref-pc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ref-pc-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    padding: 32px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.ref-pc-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.2s;
}

.ref-pc-modal-close:hover {
    color: #333;
}

.ref-pc-modal-title {
    font-family: 'Fredoka One', cursive;
    font-size: 24px;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.ref-pc-modal-desc {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.4;
}

.ref-pc-modal-section {
    margin-bottom: 20px;
}

.ref-pc-modal-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ref-pc-modal-radio,
.ref-pc-modal-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.ref-pc-modal-radio input,
.ref-pc-modal-check input {
    accent-color: #009BDC;
    width: 16px;
    height: 16px;
}

.ref-pc-modal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Included topping pill — distinct green tint */
.ref-pc-topping-included {
    background: #e8f8f0;
    color: #1a7a50;
    border: 1px solid #c8ecd8;
}

/* ---- Extra Toppings Grid ---- */
.ref-pc-extras-section h4 {
    margin-bottom: 10px;
}

.ref-pc-extras-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 12px;
}

.ref-pc-extra-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1.5px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 13px;
}

.ref-pc-extra-option:hover {
    border-color: #FF6D2E;
    background: #fff8f4;
}

.ref-pc-extra-option input {
    accent-color: #FF6D2E;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ref-pc-extra-option input:checked ~ .ref-pc-extra-name {
    font-weight: 600;
    color: #1a1a2e;
}

.ref-pc-extra-name {
    flex: 1;
    color: #444;
}

.ref-pc-extra-price {
    font-weight: 600;
    color: #FF6D2E;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .ref-pc-extras-grid {
        gap: 4px 8px;
    }
    .ref-pc-extra-option {
        padding: 5px 8px;
        font-size: 12px;
    }
    .ref-pc-extra-price {
        font-size: 11px;
    }
}

.ref-pc-modal-single-price {
    font-size: 22px;
    font-weight: 700;
    color: #FF6D2E;
    margin: 0;
}

.ref-pc-modal-single-price span {
    font-size: 14px;
    font-weight: 400;
    color: #999;
}

.ref-pc-modal-qty-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ref-pc-modal-qty-section h4 {
    margin: 0;
}

.ref-pc-modal-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.ref-pc-qty-btn {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ref-pc-qty-btn:hover {
    background: #e8e8e8;
}

#modal-qty {
    width: 36px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}

.ref-pc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: 8px;
}

.ref-pc-modal-total {
    font-size: 18px;
    color: #1a1a2e;
}

.ref-pc-modal-total strong {
    font-size: 22px;
    color: #FF6D2E;
}

.ref-pc-modal-add-btn {
    padding: 12px 32px;
    background: #009BDC;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.ref-pc-modal-add-btn:hover {
    background: #0087c3;
}

.ref-pc-modal-add-btn.loading {
    opacity: 0.7;
    cursor: wait;
}

.ref-pc-byo-counter {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* ============================================
   PIZZA & CAFE PAGE — Responsive
   ============================================ */
@media (max-width: 1024px) {
    .ref-pc-pizza-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-pc-byo-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ref-pc-hero {
        min-height: 180px;
    }
    .ref-pc-hero-content h1 {
        font-size: 26px;
    }
    .ref-pc-pizza-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .ref-pc-cafe-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-pc-modal {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0;
    }
    .ref-pc-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }
    /* Close button stays at top inside modal, doesn't scroll */
    .ref-pc-modal-close {
        position: static;
        align-self: flex-end;
        flex-shrink: 0;
        margin: 12px 16px 0 0;
        font-size: 28px;
        padding: 4px 8px;
    }
    /* Body scrolls independently */
    .ref-pc-modal-body {
        overflow-y: auto;
        flex: 1;
        padding: 0 28px 28px;
    }
}

@media (max-width: 480px) {
    .ref-pc-hero {
        min-height: 140px;
    }
    .ref-pc-hero-content h1 {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .ref-pc-hero-content p {
        font-size: 13px;
    }
    /* 2 per row grids */
    .ref-pc-pizza-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .ref-pc-cafe-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .ref-pc-byo-tiers {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    /* Compact pizza cards */
    .ref-pc-pizza-card { padding: 12px; }
    .ref-pc-pizza-name { font-size: 14px; margin-bottom: 4px; }
    .ref-pc-pizza-desc { font-size: 11px; -webkit-line-clamp: 2; margin-bottom: 6px; }
    .ref-pc-topping-pill { font-size: 10px; padding: 1px 6px; }
    .ref-pc-pizza-toppings { margin-bottom: 8px; }
    .ref-pc-pizza-prices { gap: 8px; margin-bottom: 8px; }
    .ref-pc-size-price { font-size: 12px; }
    .ref-pc-order-btn { padding: 8px 12px; font-size: 12px; }
    .ref-pc-filter-tag { font-size: 10px; padding: 2px 8px; margin-bottom: 6px; }
    /* Compact cafe cards */
    .ref-pc-cafe-card { padding: 12px; }
    .ref-pc-cafe-item-name { font-size: 14px; margin-bottom: 4px; }
    .ref-pc-cafe-sizes { gap: 6px; margin-bottom: 8px; }
    .ref-pc-cafe-single-price { font-size: 15px; margin-bottom: 8px; }
    /* Compact BYO tier cards */
    .ref-pc-byo-tier-card { padding: 14px 10px; }
    .ref-pc-byo-tier-card h3 { font-size: 18px; }
    .ref-pc-byo-topping-count { font-size: 12px; }
    /* Collection titles */
    .ref-pc-collection-title { font-size: 18px; margin-bottom: 12px; }
    .ref-pc-modal {
        max-height: 95vh;
    }
    .ref-pc-modal-close {
        margin: 8px 12px 0 0;
    }
    .ref-pc-modal-body {
        padding: 0 16px 20px;
    }
    .ref-pc-modal-title {
        font-size: 20px;
    }
    .ref-pc-modal-section {
        margin-bottom: 14px;
    }
    /* Topping options: 2 per row in modal */
    .ref-pc-modal-section:has(> .ref-pc-modal-radio),
    .ref-pc-modal-section:has(> .ref-pc-modal-check) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 8px;
    }
    .ref-pc-modal-section:has(> .ref-pc-modal-radio) > h4,
    .ref-pc-modal-section:has(> .ref-pc-modal-check) > h4 {
        grid-column: 1 / -1;
    }
    .ref-pc-modal-radio,
    .ref-pc-modal-check {
        padding: 6px 0;
        font-size: 13px;
    }
    .ref-pc-modal-footer {
        flex-direction: column;
        align-items: stretch;
        padding-top: 14px;
    }
    .ref-pc-modal-total {
        text-align: center;
    }
    .ref-pc-modal-total strong {
        font-size: 20px;
    }
    .ref-pc-modal-add-btn {
        width: 100%;
    }
}

/* Ultra-small screens */
@media (max-width: 360px) {
    .ref-pc-pizza-card, .ref-pc-cafe-card { padding: 10px; }
    .ref-pc-pizza-name, .ref-pc-cafe-item-name { font-size: 13px; }
    .ref-pc-pizza-desc { display: none; }
}

/* ============================================
   PIZZA & CAFE — Full Page Vibe Override
   Scoped under .pizza-cafe-page body class.
   Transforms grocery blue → warm food tones.
   ============================================ */

/* -- Hide grocery categories nav on desktop -- */
.pizza-cafe-page .main-nav {
    display: none;
}

/* -- Top bar: warm dark with orange accent -- */
.pizza-cafe-page .instamart-top-bar {
    background: #2D1810;
    color: #f5e6d8;
}

.pizza-cafe-page .instamart-top-bar .delivery-msg svg {
    color: #FF6D2E;
}

.pizza-cafe-page .instamart-top-bar .delivery-time {
    background: rgba(255, 109, 46, 0.2);
    color: #ffcdb2;
}

/* -- Header: dark charcoal with warm undertone -- */
.pizza-cafe-page .instamart-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #2D1810 100%);
}

.pizza-cafe-page .instamart-header .instamart-search input {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.pizza-cafe-page .instamart-header .instamart-search input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.pizza-cafe-page .instamart-header .instamart-search .search-icon svg {
    stroke: rgba(255, 255, 255, 0.5);
}

/* Cart button goes orange on pizza-cafe page */
.pizza-cafe-page .instamart-cart-btn {
    background: #FF6D2E !important;
    color: #fff !important;
}

.pizza-cafe-page .instamart-cart-btn:hover {
    background: #e55a1f !important;
}

/* -- Navigation bar: warm cream -- */
.pizza-cafe-page .main-nav {
    background: #FFF8F0;
    border-bottom-color: #f0dcc8;
}

.pizza-cafe-page .main-nav .nav-item a {
    color: #5a3e2b;
}

.pizza-cafe-page .main-nav .nav-item a:hover,
.pizza-cafe-page .main-nav .nav-item.highlight a {
    color: #FF6D2E;
}

/* -- Page background: warm off-white -- */
.pizza-cafe-page .site-main {
    background: #FFF8F0;
}

.pizza-cafe-page {
    background: #FFF8F0;
}

/* -- Override primary accent throughout page -- */
.pizza-cafe-page .ref-pc-tab.active {
    color: #FF6D2E;
    border-bottom-color: #FF6D2E;
}

.pizza-cafe-page .ref-pc-filter-btn.active {
    background: #FF6D2E;
    border-color: #FF6D2E;
    color: #fff;
}

.pizza-cafe-page .ref-pc-filter-btn.active:hover {
    color: #fff;
}

.pizza-cafe-page .ref-pc-filter-btn:hover {
    border-color: #FF6D2E;
    color: #FF6D2E;
}

.pizza-cafe-page .ref-pc-size-price strong {
    color: #FF6D2E;
}

.pizza-cafe-page .ref-pc-order-btn {
    background: #FF6D2E;
}

.pizza-cafe-page .ref-pc-order-btn:hover {
    background: #e55a1f;
}

.pizza-cafe-page .ref-pc-modal-add-btn {
    background: #FF6D2E;
}

.pizza-cafe-page .ref-pc-modal-add-btn:hover {
    background: #e55a1f;
}

.pizza-cafe-page .ref-pc-modal-radio input,
.pizza-cafe-page .ref-pc-modal-check input {
    accent-color: #FF6D2E;
}

/* -- Tabs: warm background -- */
.pizza-cafe-page .ref-pc-tabs {
    background: #FFF8F0;
    border-bottom-color: #f0dcc8;
}

/* -- Filters strip: slightly warmer -- */
.pizza-cafe-page .ref-pc-filters {
    background: #FFF3E8;
}

/* -- Pizza cards: subtle warm border -- */
.pizza-cafe-page .ref-pc-pizza-card {
    border-color: #f0dcc8;
}

.pizza-cafe-page .ref-pc-pizza-card:hover {
    box-shadow: 0 6px 20px rgba(255, 109, 46, 0.1);
}

/* -- Cafe cards: warm tones -- */
.pizza-cafe-page .ref-pc-cafe-card {
    border-color: #f0dcc8;
}

.pizza-cafe-page .ref-pc-cafe-card:hover {
    box-shadow: 0 4px 16px rgba(255, 109, 46, 0.08);
}

/* -- BYO section: warm cream bg -- */
.pizza-cafe-page .ref-pc-byo {
    background: #FFF3E8;
}

.pizza-cafe-page .ref-pc-byo-tier-card {
    border-color: #f0dcc8;
}

/* -- Collection sections: warm bg -- */
.pizza-cafe-page .ref-pc-collection {
    background: transparent;
}

.pizza-cafe-page .ref-pc-cafe-section {
    background: transparent;
}

/* -- Topping pills: warm tint -- */
.pizza-cafe-page .ref-pc-topping-pill {
    background: #FFF3E8;
    color: #8B5E3C;
}

/* ============================================
   ENTRANCE EXPERIENCE — Pizza & Cafe
   Curtain reveal + hero zoom + scroll animations
   ============================================ */

/* --- Entrance Curtain Overlay --- */
.ref-pc-entrance {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ref-pc-entrance-left,
.ref-pc-entrance-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, #2D1810 0%, #4A2C1E 50%, #2D1810 100%);
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1;
}

.ref-pc-entrance-left {
    left: 0;
    transform: translateX(0);
}

.ref-pc-entrance-right {
    right: 0;
    transform: translateX(0);
}

.ref-pc-entrance.open .ref-pc-entrance-left {
    transform: translateX(-100%);
}

.ref-pc-entrance.open .ref-pc-entrance-right {
    transform: translateX(100%);
}

/* Center welcome text */
.ref-pc-entrance-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    animation: pcEntrancePulse 0.6s ease-out forwards;
}

.ref-pc-entrance-icon {
    display: block;
    margin: 0 auto 12px;
    color: #FF6D2E;
    animation: pcSteamRise 1.2s ease-in-out infinite;
}

.ref-pc-entrance-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 4px;
    opacity: 0;
    animation: pcFadeUp 0.5s 0.2s ease-out forwards;
}

.ref-pc-entrance-name {
    font-family: 'Fredoka One', cursive;
    font-size: 48px;
    color: #FF6D2E;
    margin: 0 0 8px;
    opacity: 0;
    animation: pcFadeUp 0.5s 0.4s ease-out forwards;
}

.ref-pc-entrance-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #f5e6d8;
    letter-spacing: 2px;
    margin: 0;
    opacity: 0;
    animation: pcFadeUp 0.5s 0.6s ease-out forwards;
}

/* Fade out entrance content when curtains open */
.ref-pc-entrance.open .ref-pc-entrance-content {
    animation: pcFadeOut 0.4s ease-in forwards;
}

/* Remove from DOM after animation */
.ref-pc-entrance.done {
    display: none;
}

/* --- Hero entrance zoom --- */
.ref-pc-anim-hero .ref-pc-hero-bg {
    transform: scale(1.15);
    transition: transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ref-pc-anim-hero.hero-entered .ref-pc-hero-bg {
    transform: scale(1);
}

.ref-pc-anim-hero .ref-pc-hero-content h1 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    transition-delay: 0.2s;
}

.ref-pc-anim-hero .ref-pc-hero-content p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: 0.5s;
}

.ref-pc-anim-hero.hero-entered .ref-pc-hero-content h1,
.ref-pc-anim-hero.hero-entered .ref-pc-hero-content p {
    opacity: 1;
    transform: translateY(0);
}

/* --- Scroll-reveal sections --- */
.ref-pc-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ref-pc-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger pizza cards within a revealed collection */
.ref-pc-reveal.revealed .ref-pc-pizza-card,
.ref-pc-reveal.revealed .ref-pc-cafe-card,
.ref-pc-reveal.revealed .ref-pc-byo-tier-card {
    opacity: 0;
    animation: pcCardPop 0.5s ease-out forwards;
}

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(1),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(1),
.ref-pc-reveal.revealed .ref-pc-byo-tier-card:nth-child(1) { animation-delay: 0.05s; }

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(2),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(2),
.ref-pc-reveal.revealed .ref-pc-byo-tier-card:nth-child(2) { animation-delay: 0.12s; }

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(3),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(3),
.ref-pc-reveal.revealed .ref-pc-byo-tier-card:nth-child(3) { animation-delay: 0.19s; }

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(4),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(4),
.ref-pc-reveal.revealed .ref-pc-byo-tier-card:nth-child(4) { animation-delay: 0.26s; }

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(5),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(5) { animation-delay: 0.33s; }

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(6),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(6) { animation-delay: 0.40s; }

.ref-pc-reveal.revealed .ref-pc-pizza-card:nth-child(7),
.ref-pc-reveal.revealed .ref-pc-cafe-card:nth-child(7) { animation-delay: 0.47s; }

/* --- Keyframes --- */
@keyframes pcEntrancePulse {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes pcSteamRise {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes pcFadeUp {
    0%   { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes pcFadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes pcCardPop {
    0%   { opacity: 0; transform: translateY(25px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Responsive entrance --- */
@media (max-width: 768px) {
    .ref-pc-entrance-name {
        font-size: 36px;
    }
    .ref-pc-entrance-title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ref-pc-entrance-name {
        font-size: 28px;
    }
}

/* -- Footer stays same (no override needed) -- */