/*
 * Smoke & Oak Design System
 * 
 * A premium, dark-themed design for smoke shop / vape shop applications.
 * Inspired by cigar lounge aesthetics and premium tobacco retail.
 * 
 * Color Palette:
 * - Primary: Whisky/Amber (#C4893B, #A67024)
 * - Accent: Warm wood browns (#5C4033, #8B5A2B)
 * - Base: Deep blacks and warm off-whites
 * - Smoke effect: Subtle gradients and blur
 */

:root {
    /* Core Palette */
    --smoke-900: #0D0D0D;
    --smoke-800: #1A1A1A;
    --smoke-700: #2D2D2D;
    --smoke-600: #3D3D3D;
    --smoke-500: #525252;
    --smoke-400: #737373;
    --smoke-300: #A3A3A3;
    --smoke-200: #D4D4D4;
    --smoke-100: #E8E8E8;
    --smoke-50: #F5F5F5;

    /* Whisky/Amber accent */
    --whisky-900: #5C3D12;
    --whisky-800: #7A4D14;
    --whisky-700: #8B5A1B;
    --whisky-600: #A67024;
    --whisky-500: #C4893B;
    --whisky-400: #D9A05A;
    --whisky-300: #E5B87A;
    --whisky-200: #F0D0A0;
    --whisky-100: #F8E8D0;
    --whisky-50: #FDF6EC;

    /* Wood/Brown accent */
    --wood-900: #2A1B10;
    --wood-800: #3E2914;
    --wood-700: #5C4033;
    --wood-600: #744E30;
    --wood-500: #8B5A2B;
    --wood-400: #A67744;
    --wood-300: #C09460;
    --wood-200: #D9B58C;
    --wood-100: #E8D4BC;
    --wood-50: #F5EDE4;

    /* Off-white tones */
    --cream: #FAF8F5;
    --parchment: #F5F2ED;
    --ivory: #FFFEF8;

    /* Semantic tokens */
    --primary-900: var(--whisky-900);
    --primary-800: var(--whisky-800);
    --primary-700: var(--whisky-700);
    --primary-600: var(--whisky-600);
    --primary-500: var(--whisky-500);
    --primary-400: var(--whisky-400);
    --primary-300: var(--whisky-300);
    --primary-200: var(--whisky-200);
    --primary-100: var(--whisky-100);
    --primary-50: var(--whisky-50);
    
    --accent-500: var(--wood-500);
    --accent-600: var(--wood-600);
    --accent-700: var(--wood-700);

    /* Theme variables */
    --ink: var(--cream);
    --ink-muted: var(--smoke-300);
    --paper: var(--smoke-900);
    --bg: var(--smoke-900);
    --fg: var(--cream);
    --muted: var(--smoke-400);
    --card: var(--smoke-800);
    --card-elevated: var(--smoke-700);
    --surface: var(--smoke-800);
    --border: var(--smoke-700);
    --border-subtle: var(--smoke-600);
    --ring: var(--whisky-500);

    /* Radii & Shadows */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 36px rgba(0,0,0,0.55);
    --shadow-glow: 0 0 30px rgba(196,137,59,0.15);

    /* Typography */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-heading: 'Oswald', 'Impact', sans-serif;
    --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    
    /* Arabic Typography */
    --font-display-ar: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;
    --font-heading-ar: 'Cairo', 'Noto Sans Arabic', sans-serif;
    --font-sans-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Tahoma', sans-serif;
    --h1: clamp(2.4rem, 5vw, 4.5rem);
    --h2: clamp(1.9rem, 3.5vw, 3.25rem);
    --h3: clamp(1.5rem, 2.5vw, 2.25rem);
    --h4: clamp(1.25rem, 2vw, 1.65rem);
    --body: 1rem;
    --lead: 1.125rem;
}

/* Global base */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }

h1 { font-size: var(--h1); line-height: 1.1; font-family: var(--font-display); }
h2 { font-size: var(--h2); line-height: 1.15; font-family: var(--font-display); }
h3 { font-size: var(--h3); line-height: 1.2; }
h4 { font-size: var(--h4); line-height: 1.25; }
p { font-size: var(--body); }
.lead { font-size: var(--lead); color: var(--muted); }

/* Smoke effect gradients */
.smoke-gradient {
    background: 
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(196,137,59,0.08), transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(139,90,43,0.06), transparent 50%),
        var(--bg);
}

.smoke-glow {
    position: relative;
}
.smoke-glow::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(196,137,59,0.12), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

/* Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: transform .15s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    cursor: pointer;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-primary { 
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600)); 
    color: var(--smoke-900); 
    border-color: var(--whisky-600);
    font-weight: 700;
}
.btn-primary:hover { 
    background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500)); 
}

.btn-outline { 
    background: transparent; 
    color: var(--whisky-400); 
    border-color: var(--whisky-500);
}
.btn-outline:hover { 
    background: rgba(196,137,59,0.1); 
    border-color: var(--whisky-400);
}

.btn-ghost {
    background: rgba(255,255,255,0.05);
    color: var(--cream);
    border-color: rgba(255,255,255,0.15);
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { 
    transform: translateY(-4px); 
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border-color: var(--whisky-700);
}

.input, .select, .textarea {
    width: 100%;
    background: var(--smoke-800);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    color: var(--fg);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--whisky-500);
    box-shadow: 0 0 0 3px rgba(196,137,59,0.2);
}
.input::placeholder, .textarea::placeholder {
    color: var(--smoke-500);
}

/* Navigation */
.shop-nav {
    background: rgba(13,13,13,0.95);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.2) blur(12px);
}
.shop-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.65rem 1rem;
}
.shop-logo {
    min-width: 0;
    max-width: min(48vw, 12rem);
    line-height: 0;
}
.shop-logo img,
.logo-image {
    height: auto;
    max-height: 2.25rem;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
@media (min-width: 768px) {
    .shop-nav-inner { gap: 1.5rem; padding: 0.85rem 1.25rem; }
    .shop-logo { max-width: none; }
    .shop-logo img,
    .logo-image { height: 3rem; max-height: none; }
}
.shop-nav-links {
    display: none;
    align-items: center;
    flex-shrink: 0;
    gap: 2rem;
}
@media (min-width: 768px) {
    .shop-nav-links { display: flex; }
}
.shop-nav-link {
    color: var(--smoke-200);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.shop-nav-link:hover,
.shop-nav-link.is-active {
    color: var(--whisky-400);
    border-bottom-color: var(--whisky-500);
}
.shop-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.shop-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--smoke-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.shop-icon-btn:hover { background: var(--smoke-700); color: var(--whisky-400); }
.shop-cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--whisky-500);
    color: var(--smoke-900);
    font-size: 10px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
}
.shop-lang {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--smoke-800);
    color: var(--cream);
    border-radius: var(--radius-md);
    padding: 0.4rem 2rem 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    min-height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23C4893B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
}
.shop-lang:focus {
    outline: none;
    border-color: var(--whisky-500);
    box-shadow: 0 0 0 3px rgba(196,137,59,0.2);
}

/* Hero Section */
.shop-hero {
    background:
        radial-gradient(ellipse 100% 60% at 70% 30%, rgba(196,137,59,0.12), transparent 50%),
        radial-gradient(ellipse 80% 50% at 10% 80%, rgba(139,90,43,0.08), transparent 50%),
        linear-gradient(180deg, var(--smoke-900) 0%, var(--smoke-800) 100%);
    padding: 3rem 1rem 4rem;
    min-height: 70vh;
    display: flex;
    align-items: center;
}
.shop-hero-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    gap: 2.5rem;
    align-items: center;
    width: 100%;
}
@media (min-width: 1024px) {
    .shop-hero-inner {
        grid-template-columns: 1.1fr 0.9fr;
        min-height: 50vh;
        padding: 2rem 1rem 3rem;
    }
}
.shop-hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 1.05;
    color: var(--cream);
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}
.shop-hero-copy h1 span {
    color: var(--whisky-400);
}
.shop-hero-copy p {
    color: var(--smoke-300);
    font-size: 1.1rem;
    max-width: 34rem;
    margin: 0 0 2rem;
    line-height: 1.7;
}

/* Section headers */
.shop-page-header {
    padding: 3rem 1rem 2rem;
    text-align: center;
    background: linear-gradient(180deg, var(--smoke-800) 0%, var(--smoke-900) 100%);
}
.shop-page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--cream);
    margin: 0 0 0.5rem;
}
.shop-kicker {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--whisky-500);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.shop-page-header .lead {
    max-width: 36rem;
    margin: 0 auto;
    color: var(--smoke-400);
}

/* Product Cards */
.product-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border-color: var(--whisky-700);
}
.product-card-image {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--smoke-700);
}
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.15rem 1.25rem 1.25rem;
    flex: 1;
}
.product-card-body h3 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cream);
    margin: 0;
}
.product-card-body h3 a {
    color: inherit;
    text-decoration: none;
}
.product-price {
    color: var(--whisky-400);
    font-weight: 650;
    font-size: 1.1rem;
}
.product-price .was {
    color: var(--smoke-500);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: line-through;
    margin-inline-start: 0.4rem;
}
.product-card-badge {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    background: rgba(13,13,13,0.85);
    color: var(--whisky-400);
    border: 1px solid var(--whisky-700);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.product-card-badge.is-deal {
    background: var(--whisky-600);
    color: var(--smoke-900);
    border-color: var(--whisky-500);
}
.product-card-badge.is-new {
    background: var(--wood-600);
    color: var(--cream);
    border-color: var(--wood-500);
}
.product-card-stock {
    position: absolute;
    bottom: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}
.product-card-stock.sold-out { background: var(--smoke-600); }
.product-card-stock.low { background: #b45309; }
.product-card.is-sold-out { opacity: 0.7; }

.btn-product-primary,
.btn-product-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, transform .15s ease;
}
.btn-product-primary {
    background: var(--smoke-700);
    border: 1px solid var(--smoke-600);
    color: var(--whisky-400);
}
.btn-product-primary:hover { background: var(--smoke-600); }
.btn-product-secondary {
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600));
    border: 1px solid var(--whisky-600);
    color: var(--smoke-900);
}
.btn-product-secondary:hover { 
    background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500)); 
}
.btn-product-secondary:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Footer */
.shop-footer {
    background: var(--smoke-900);
    color: var(--smoke-300);
    margin-top: 4rem;
    padding: 3.5rem 0 2rem;
    border-top: 1px solid var(--border);
}
.shop-footer a { color: var(--smoke-400); text-decoration: none; transition: color .2s; }
.shop-footer a:hover { color: var(--whisky-400); }
.shop-footer h4 {
    color: var(--cream);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.shop-footer-brand {
    color: var(--whisky-400);
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

/* Health Warning Banner */
.health-warning {
    background: var(--smoke-800);
    border-top: 1px solid var(--border);
    padding: 1rem;
    text-align: center;
}
.health-warning p {
    margin: 0;
    color: var(--smoke-400);
    font-size: 0.75rem;
    line-height: 1.5;
    max-width: 72rem;
    margin: 0 auto;
}
.health-warning strong {
    color: var(--whisky-500);
    font-weight: 700;
}

/* Age Gate */
.age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.age-gate-content {
    background: var(--smoke-800);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    max-width: 28rem;
    text-align: center;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.age-gate-logo {
    max-width: 120px;
    margin: 0 auto 1.5rem;
}
.age-gate h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--cream);
    margin: 0 0 1rem;
}
.age-gate p {
    color: var(--smoke-400);
    margin: 0 0 2rem;
    line-height: 1.6;
}
.age-gate-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.age-gate-yes {
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600));
    color: var(--smoke-900);
    border: none;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background .2s;
}
.age-gate-yes:hover {
    background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500));
}
.age-gate-no {
    background: transparent;
    color: var(--smoke-400);
    border: 1px solid var(--smoke-600);
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.age-gate-no:hover {
    border-color: var(--smoke-500);
    color: var(--smoke-300);
}
.age-gate-warning {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--smoke-500);
    line-height: 1.5;
}

/* Cart Panel */
.order-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}
.order-panel-overlay.active { display: block; }
.order-panel {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: min(100%, 26.5rem);
    height: 100%;
    height: 100dvh;
    background: var(--smoke-800);
    color: var(--cream);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    display: none;
    flex-direction: column;
}
.order-panel.open { display: flex; }

.shop-cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--smoke-800);
}
.shop-cart-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.05;
    color: var(--cream);
    margin: 0;
}
.shop-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.25rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}
.shop-cart-item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.95rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
}
.shop-cart-thumb {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smoke-700);
    border: 1px solid var(--border);
}
.shop-cart-thumb img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}
.shop-cart-info h3 {
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0 0 0.3rem;
    color: var(--cream);
}
.shop-cart-empty {
    text-align: center;
    padding: 3.25rem 0.5rem 2rem;
}
.shop-cart-empty h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.15;
    margin: 0 0 0.65rem;
    color: var(--cream);
}
.shop-cart-empty p {
    margin: 0 0 1.4rem;
    color: var(--smoke-400);
}
.shop-cart-foot {
    padding: 1.1rem 1.25rem 1.35rem;
    border-top: 1px solid var(--border);
    background: var(--smoke-700);
}
.shop-cart-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.shop-cart-sum span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--smoke-400);
}
.shop-cart-sum strong {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--cream);
}
.shop-cart-go,
.shop-cart-foot .lp-btn-solid {
    width: 100%;
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600));
    color: var(--smoke-900);
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.shop-cart-go:hover,
.shop-cart-foot .lp-btn-solid:hover { 
    background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500)); 
}
.shop-cart-keep {
    display: block;
    margin-top: 0.75rem;
    text-align: center;
    color: var(--whisky-500);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.shop-cart-keep:hover { color: var(--whisky-400); }
.shop-cart-foot.is-empty .shop-cart-sum,
.shop-cart-foot.is-empty .shop-cart-go { display: none; }
.shop-cart-remove {
    border: 0;
    background: none;
    padding: 0 0 0.55rem;
    color: var(--smoke-500);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.shop-cart-remove:hover { color: var(--whisky-500); }

/* Catalog filters */
.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}
#catalog-search {
    flex: 1 1 12rem;
    width: auto;
    max-width: 22rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    background: var(--smoke-800);
    color: var(--cream);
}
#catalog-search::placeholder { color: var(--smoke-500); }
#catalog-search:focus {
    outline: none;
    border-color: var(--whisky-500);
    box-shadow: 0 0 0 3px rgba(196,137,59,0.2);
}
.catalog-sort select {
    min-height: 40px;
    padding: 0.45rem 2rem 0.45rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--smoke-800);
    color: var(--cream);
    font-size: 0.88rem;
}
.catalog-bubbles {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    padding: 0.1rem 0 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.catalog-chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 9.5rem;
    min-height: 34px;
    padding: 0.28rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--smoke-800);
    color: var(--smoke-300);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.catalog-chip:hover { border-color: var(--whisky-600); color: var(--whisky-400); }
.catalog-chip.is-on {
    background: var(--whisky-600);
    border-color: var(--whisky-500);
    color: var(--smoke-900);
}

/* Product detail page */
body.is-pdp { background: var(--smoke-900); }
.pdp { padding: 1.25rem 0 3.5rem; }
.pdp-wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.pdp-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.35rem;
    font-size: 0.8rem;
    color: var(--smoke-500);
}
.pdp-crumb a { color: var(--whisky-500); text-decoration: none; }
.pdp-crumb a:hover { color: var(--whisky-400); }
.pdp-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 900px) {
    .pdp-grid {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 3.5rem;
        align-items: start;
    }
}
.pdp-stage {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smoke-800);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.pdp-stage img {
    width: 88%;
    height: 88%;
    object-fit: contain;
}
.pdp-kicker {
    margin: 0 0 0.65rem;
    color: var(--whisky-500);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pdp-buy h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    color: var(--cream);
    margin: 0 0 0.85rem;
}
.pdp-price .product-price { font-size: 1.5rem; }
.pdp-lede {
    margin: 1.15rem 0 0;
    color: var(--smoke-400);
    line-height: 1.7;
    font-size: 1.02rem;
}
.pdp-actions {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 1.6rem;
}
.pdp-qty {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smoke-500);
}
.pdp-qty input {
    width: 4.6rem;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 1rem;
    background: var(--smoke-800);
    color: var(--cream);
}
.pdp-add,
.pdp .lp-btn-solid {
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600));
    color: var(--smoke-900);
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    cursor: pointer;
    flex: 1;
    min-height: 48px;
}
.pdp-add:hover,
.pdp .lp-btn-solid:hover {
    background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500));
}
.pdp-add:disabled { opacity: 0.45; cursor: not-allowed; }

.pdp-badge {
    position: absolute;
    top: 0.85rem;
    inset-inline-start: 0.85rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pdp-badge.is-deal { background: var(--whisky-600); color: var(--smoke-900); }
.pdp-badge.is-new { background: var(--wood-600); color: var(--cream); }
.pdp-badge.is-out { background: var(--smoke-600); color: var(--cream); }

.pdp-thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    margin-top: 0.85rem;
    padding-bottom: 0.2rem;
}
.pdp-thumb {
    flex: 0 0 auto;
    width: 4.25rem;
    height: 4.25rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    background: var(--smoke-700);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp-thumb.is-on { border-color: var(--whisky-500); }

.pdp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.15rem;
}
.pdp-tags a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    color: var(--smoke-300);
    text-decoration: none;
    font-size: 0.78rem;
    background: var(--smoke-800);
}
.pdp-tags a:hover {
    border-color: var(--whisky-600);
    color: var(--whisky-400);
}

.pdp-notes {
    display: grid;
    gap: 2rem;
    margin-top: 3.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--border);
}
@media (min-width: 800px) {
    .pdp-notes { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.pdp-notes h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: 0 0 1rem;
    color: var(--cream);
}
.pdp-notes ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pdp-notes li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--smoke-300);
}

/* Checkout */
.co { padding: 1.25rem 0 7.5rem; }
.co-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    color: var(--cream);
    margin: 0;
}
.co-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 960px) {
    .co-grid { grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr); gap: 3.25rem; }
}
.co-form {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}
.co-block h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 0 0 1.15rem;
    color: var(--cream);
}
.co-field { margin: 0 0 1rem; }
.co-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--smoke-500);
}
.co-field label .need {
    color: var(--whisky-500);
    margin-inline-start: 0.2rem;
}
.co-field input,
.co-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--smoke-800);
    color: var(--cream);
    font-size: 1rem;
}
.co-field textarea {
    min-height: 6.5rem;
    resize: vertical;
}
.co-field input::placeholder,
.co-field textarea::placeholder {
    color: var(--smoke-500);
}
.co-field input:focus,
.co-field textarea:focus {
    outline: none;
    border-color: var(--whisky-500);
    box-shadow: 0 0 0 3px rgba(196,137,59,0.2);
}
.co-hint { color: var(--smoke-500); }
.co-submit,
.co-form .lp-btn-solid {
    width: 100%;
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600));
    color: var(--smoke-900);
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.9rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.co-submit:hover { background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500)); }
.co-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.co-reassure {
    margin: 0.85rem 0 0;
    color: var(--smoke-500);
    font-size: 0.9rem;
    text-align: center;
}
.co-summary {
    background: var(--smoke-800);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1.4rem;
}
@media (min-width: 960px) {
    .co-summary { position: sticky; top: 5.5rem; }
}
.co-summary h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0;
    color: var(--cream);
}
.co-sum-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 0.35rem;
    border-top: 1px solid var(--border);
}
.co-sum-line span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--smoke-500);
}
.co-sum-line strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cream);
}
.co-done h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--cream);
    margin: 0 0 0.75rem;
}
.co-done p { color: var(--smoke-400); line-height: 1.7; }
.co-done-num {
    display: inline-block;
    margin: 1rem 0 1.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    background: var(--smoke-800);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cream);
}

/* Landing page sections */
.lp-wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.lp-kicker {
    margin: 0 0 1rem;
    color: var(--whisky-500);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.lp-section-head { margin-bottom: 2rem; max-width: 34rem; }
.lp-section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    color: var(--cream);
    margin: 0;
}
.lp-section-note {
    margin: 0.65rem 0 0;
    color: var(--smoke-500);
}
.lp-rail { 
    padding: 4.5rem 0 3.5rem; 
    background: var(--smoke-800); 
}
.lp-rail-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
    .lp-rail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.lp-btn-solid,
.lp-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.lp-btn-solid {
    background: linear-gradient(135deg, var(--whisky-500), var(--whisky-600));
    color: var(--smoke-900);
    border: none;
}
.lp-btn-solid:hover {
    background: linear-gradient(135deg, var(--whisky-400), var(--whisky-500));
}
.lp-btn-ghost {
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--cream);
    background: transparent;
}
.lp-btn-ghost:hover {
    border-color: var(--whisky-500);
    color: var(--whisky-400);
}

/* Mobile menu */
#mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.8);
}
#mobile-menu:not(.hidden) { display: block; }
.shop-menu-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(100%, 20rem);
    overflow-y: auto;
    background: var(--smoke-800);
    color: var(--cream);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
[dir="rtl"] .shop-menu-panel { transform: translateX(-100%); }
#mobile-menu.active .shop-menu-panel {
    transform: translateX(0);
}
#mobile-menu .shop-nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: none;
    font-size: 1.05rem;
    color: var(--cream);
}
#mobile-menu .shop-nav-link:hover {
    color: var(--whisky-400);
}

/* Filter bar */
.filter-bar-container {
    position: sticky;
    top: 72px;
    z-index: 40;
    background: rgba(26,26,26,0.95);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.25rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .shop-hero { padding: 2rem 1rem 3rem; min-height: auto; }
    .shop-hero-copy h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
    .lp-rail { padding: 3rem 0 2.5rem; }
    .shop-footer { margin-top: 2rem; }
}

/* Admin override for dark theme consistency */
body.admin-dark {
    --bg: var(--smoke-900);
    --fg: var(--cream);
    --card: var(--smoke-800);
    --surface: var(--smoke-800);
    --border: var(--smoke-700);
}

/* =====================================================
   Landing Page Category Chips (lp-aisles)
   ===================================================== */

.lp-aisles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.lp-aisles a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(250, 248, 245, 0.18);
    color: var(--cream);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    background: rgba(250, 248, 245, 0.05);
    transition: all 0.2s ease;
}

.lp-aisles a:hover {
    border-color: var(--whisky-500);
    color: var(--whisky-400);
    background: rgba(196, 137, 59, 0.1);
}

/* =====================================================
   Landing Page Promise Section
   ===================================================== */

.lp-promise {
    background: var(--smoke-800);
    color: var(--cream);
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.lp-promise-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.lp-promise p {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    margin: 0;
}

.lp-promise ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.3rem;
    padding: 0;
    margin: 0;
    list-style: none;
    color: var(--smoke-400);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* RTL adjustments for promise section */
html[dir="rtl"] .lp-promise-inner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .lp-promise ul {
    flex-direction: row-reverse;
}

html[dir="rtl"] .lp-aisles {
    flex-direction: row-reverse;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .lp-aisles {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .lp-aisles::-webkit-scrollbar {
        display: none;
    }
    
    .lp-aisles a {
        flex: 0 0 auto;
        min-height: 40px;
    }
    
    .lp-promise {
        padding: 1.15rem 0;
    }
    
    .lp-promise-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .lp-promise ul {
        justify-content: center;
    }
}

/* =====================================================
   RTL (Arabic) Support
   ===================================================== */

/* Arabic font imports are in base.html - these are the font-family overrides */
html[dir="rtl"] {
    --font-display: var(--font-display-ar);
    --font-heading: var(--font-heading-ar);
    --font-sans: var(--font-sans-ar);
}

html[dir="rtl"] body {
    font-family: var(--font-sans-ar);
    letter-spacing: 0;
}

html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3 {
    font-family: var(--font-heading-ar);
    letter-spacing: 0;
}

html[dir="rtl"] .shop-hero-copy h1,
html[dir="rtl"] .shop-footer-brand {
    font-family: var(--font-display-ar);
}

/* RTL-specific layout adjustments using logical properties */
html[dir="rtl"] .shop-nav-inner {
    flex-direction: row-reverse;
}

html[dir="rtl"] .shop-nav-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .shop-nav-actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .shop-cart-count {
    inset-inline-start: auto;
    inset-inline-end: -6px;
}

html[dir="rtl"] .shop-cart-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .shop-cart-info {
    text-align: start;
}

html[dir="rtl"] .pdp-main {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pdp-gallery {
    margin-inline-end: 0;
    margin-inline-start: 2rem;
}

/* RTL icon flip for directional icons */
html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] .icon-chevron-right {
    transform: scaleX(-1);
}

/* RTL text alignment */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* RTL form elements */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: start;
}

html[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: start;
}

/* RTL product card */
html[dir="rtl"] .pdp-kicker::after {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* RTL checkout and forms */
html[dir="rtl"] .checkout-form label {
    text-align: start;
}

/* RTL breadcrumb separator */
html[dir="rtl"] .breadcrumb-sep {
    transform: scaleX(-1);
}

/* RTL category chips */
html[dir="rtl"] .cat-chip {
    flex-direction: row-reverse;
}

/* RTL admin panel */
html[dir="rtl"] .admin-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-inline-start: none;
    border-inline-end: 1px solid var(--border);
}

html[dir="rtl"] .admin-content {
    margin-inline-start: 0;
    margin-inline-end: 250px;
}

/* Mobile RTL adjustments */
@media (max-width: 767px) {
    html[dir="rtl"] .shop-menu-panel {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
    
    html[dir="rtl"] .pdp-main {
        flex-direction: column;
    }
    
    html[dir="rtl"] .pdp-gallery {
        margin-inline-start: 0;
    }
}

/* =====================================================
   Home Page Category Chips and Feature List Styling
   ===================================================== */

/* Category chips on home page */
.home-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
}

.home-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: var(--smoke-800);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--cream);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.home-cat-chip:hover {
    background: var(--smoke-700);
    border-color: var(--whisky-500);
    color: var(--whisky-400);
    transform: translateY(-2px);
}

.home-cat-chip svg,
.home-cat-chip .cat-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

/* Feature list styling */
.home-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
    margin: 2rem 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.home-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.home-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--whisky-600), var(--whisky-700));
    border-radius: 50%;
    color: var(--cream);
}

.home-feature-icon svg {
    width: 24px;
    height: 24px;
}

.home-feature-text {
    display: flex;
    flex-direction: column;
}

.home-feature-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cream);
}

.home-feature-desc {
    font-size: 0.85rem;
    color: var(--muted);
}

/* RTL feature list */
html[dir="rtl"] .home-feature {
    flex-direction: row-reverse;
}

html[dir="rtl"] .home-feature-text {
    text-align: start;
}

@media (max-width: 640px) {
    .home-features {
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    
    .home-cat-chip {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}