/**
 * Alcyone2026 Theme - Main Styles
 * Modern dark theme with amber/gold accents
 */

/* ============================================
   CSS Variables - Design Tokens
   ============================================ */
:root {
    /* Colors - Dark Theme */
    --color-black: #000000;
    --color-zinc-900: #18181b;
    --color-zinc-800: #27272a;
    --color-zinc-700: #3f3f46;
    --color-zinc-600: #52525b;
    --color-zinc-500: #71717a;
    --color-zinc-400: #a1a1aa;
    --color-zinc-300: #d4d4d8;
    --color-white: #ffffff;

    /* Accent Colors - Amber/Gold */
    --color-amber-600: #d97706;
    --color-amber-500: #f59e0b;
    --color-amber-400: #fbbf24;
    --color-yellow-600: #ca8a04;
    --color-yellow-500: #eab308;

    /* Semantic Colors */
    --color-primary: var(--color-amber-500);
    --color-primary-hover: var(--color-amber-400);
    --color-primary-dark: var(--color-amber-600);
    --color-background: var(--color-black);
    --color-surface: var(--color-zinc-900);
    --color-surface-hover: var(--color-zinc-800);
    --color-border: var(--color-zinc-800);
    --color-border-hover: rgba(245, 158, 11, 0.5);
    --color-text: var(--color-white);
    --color-text-muted: var(--color-zinc-400);
    --color-text-subtle: var(--color-zinc-500);

    /* Gradients */
    --gradient-primary: linear-gradient(
        to right,
        var(--color-amber-600),
        var(--color-yellow-600)
    );
    --gradient-primary-hover: linear-gradient(
        to right,
        var(--color-amber-500),
        var(--color-yellow-500)
    );
    --gradient-surface: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        rgba(24, 24, 27, 0.5)
    );

    /* Typography */
    --font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --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: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

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

    /* page width */
    --page-width: 1560px;
}

/* ============================================
   Global Link Styles - Prevent Blue Visited Links
   ============================================ */
a,
a:visited,
a:link {
    color: inherit;
}

/* Button focus/active states - dark background */
button:focus,
button:active,
.cart.table-wrapper .actions-toolbar > .action:focus,
.cart.table-wrapper .actions-toolbar > .action:active,
.action-gift:focus,
.action-gift:active {
    background: var(--color-zinc-900) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Product card links - maintain white/amber colors */
.product-slider-container a,
.product-slider-container a:visited,
.product-slider-container a:link,
.alcyone-favourites-section a,
.alcyone-favourites-section a:visited,
.alcyone-hotdeals-section a,
.alcyone-hotdeals-section a:visited,
.new-arrivals-section a,
.new-arrivals-section a:visited,
h4 a,
h4 a:visited,
h4 a:link {
    color: inherit;
    text-decoration: none;
}

h4 a:hover {
    color: var(--color-amber-400);
}

/* ============================================
   Fixed Header Content Offset
   ============================================ */

/* For pages WITHOUT hero section, add padding for fixed header */
.page-main {
    padding-top: 72px;
}

/* Homepage with hero - hero goes under header, no extra padding needed */
.cms-index-index .page-main,
.cms-home .page-main {
    padding-top: 0;
}

/* ============================================
   Tailwind-like Utility Classes
   ============================================ */

/* Display & Position */
.fixed {
    position: fixed;
}
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

/* Width & Height */
.w-full {
    width: 100%;
}
.w-4 {
    width: 1rem;
}
.w-6 {
    width: 1.5rem;
}
.w-10 {
    width: 2.5rem;
}
.h-4 {
    height: 1rem;
}
.h-6 {
    height: 1.5rem;
}
.h-10 {
    height: 2.5rem;
}

/* Flexbox */
.flex {
    display: flex;
}
.hidden {
    display: none;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.space-x-1 > * + * {
    margin-left: 0.25rem;
}
.space-x-2 > * + * {
    margin-left: 0.5rem;
}
.space-x-3 > * + * {
    margin-left: 0.75rem;
}
.space-x-4 > * + * {
    margin-left: 1rem;
}

/* Z-Index */
.z-50 {
    z-index: 50;
}

/* Padding */
.p-2 {
    padding: 0.5rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Margin */
.ml-2 {
    margin-left: 0.5rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Typography */
pre {
    background: #000000;
    color: #e1d3d3;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.font-bold {
    font-weight: 700;
}
.font-semibold {
    font-weight: 600;
}
.text-white {
    color: #ffffff;
}
.text-black {
    color: #000000;
}
.text-zinc-300 {
    color: #d4d4d8;
}

/* Background Colors */
.bg-black {
    background-color: #000000;
}
.bg-zinc-800 {
    background-color: #27272a;
}
.bg-gradient-to-br {
    background-image: linear-gradient(
        to bottom right,
        var(--tw-gradient-stops)
    );
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-amber-500 {
    --tw-gradient-from: #f59e0b;
    --tw-gradient-stops: var(--tw-gradient-from),
        var(--tw-gradient-to, rgba(245, 158, 11, 0));
}
.from-amber-600 {
    --tw-gradient-from: #d97706;
    --tw-gradient-stops: var(--tw-gradient-from),
        var(--tw-gradient-to, rgba(217, 119, 6, 0));
}
.to-yellow-600 {
    --tw-gradient-to: #ca8a04;
}
.to-yellow-500 {
    --tw-gradient-to: #eab308;
}

/* Border Radius */
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-full {
    border-radius: 9999px;
}

/* Transitions */
.transition-all {
    transition: all 300ms ease;
}
.transition-colors {
    transition: color 300ms ease, background-color 300ms ease;
}
.transition-transform {
    transition: transform 300ms ease;
}
.duration-300 {
    transition-duration: 300ms;
}

/* Hover States */
.hover\:text-amber-500:hover {
    color: #f59e0b;
}
.hover\:bg-zinc-800:hover {
    background-color: #27272a;
}
.hover\:from-amber-500:hover {
    --tw-gradient-from: #f59e0b;
    --tw-gradient-stops: var(--tw-gradient-from),
        var(--tw-gradient-to, rgba(245, 158, 11, 0));
}
.hover\:to-yellow-500:hover {
    --tw-gradient-to: #eab308;
}
.group:hover .group-hover\:text-amber-500 {
    color: #f59e0b;
}

/* Responsive */
@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }
    .md\:hidden {
        display: none;
    }
}

/* Container */
.container {
    width: 100%;
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   Base Styles
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
}

body.alcyone2026-theme {
    background-color: var(--color-background);
}

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

a:hover {
    color: var(--color-primary);
}

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

/* ============================================
   Typography
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    color: var(--color-text);
}

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

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

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

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

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

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

p {
    margin-top: 0;
    color: var(--color-text-muted);
}

/* ============================================
   Buttons
   ============================================ */
.action.primary,
button.primary,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-black);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-transform: none;
    letter-spacing: 0;
}

.action.primary:hover,
button.primary:hover,
.btn-primary:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.action.secondary,
button.secondary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.action.secondary:hover,
button.secondary:hover,
.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* PageBuilder Button Overrides */
.pagebuilder-button-primary,
a.pagebuilder-button-primary,
button.pagebuilder-button-primary,
div.pagebuilder-button-primary,
.pagebuilder-banner-button,
.pagebuilder-slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6) !important;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-black) !important;
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none !important;
}

.pagebuilder-button-primary:hover,
a.pagebuilder-button-primary:hover,
button.pagebuilder-button-primary:hover,
div.pagebuilder-button-primary:hover,
.pagebuilder-banner-button:hover,
.pagebuilder-slide-button:hover {
    background: var(--gradient-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
    color: var(--color-black) !important;
}

.pagebuilder-button-secondary,
a.pagebuilder-button-secondary,
button.pagebuilder-button-secondary,
div.pagebuilder-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6) !important;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text) !important;
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none !important;
}

.pagebuilder-button-secondary:hover,
a.pagebuilder-button-secondary:hover,
button.pagebuilder-button-secondary:hover,
div.pagebuilder-button-secondary:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ============================================
   Forms
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    width: 100%;
    height: auto;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-subtle);
}

label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

/* ============================================
   Header Styles
   ============================================ */
.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--color-black);
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.page-header.scrolled {
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

/* Header Top Bar */
.header-top-bar {
    background-color: var(--color-zinc-900);
    border-bottom: 1px solid var(--color-border);
}

.header-top-bar-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--spacing-2) var(--spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
}

.header-top-left .welcome-text {
    color: var(--color-text-muted);
}

.header-top-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header-contact {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.header-contact a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
}

.header-contact a:hover {
    color: var(--color-primary);
}

.header-contact svg {
    color: var(--color-primary);
}

.header-social {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.header-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.header-social a:hover {
    color: var(--color-primary);
}

/* Header Main */
.header.content,
.header-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: var(--spacing-4) var(--spacing-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo,
.header-logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    width: auto;
}

/* Navigation */
.header-nav,
.navigation {
    display: flex;
    align-items: center;
}

.nav-sections {
    background: transparent;
}

.navigation ul {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation li {
    position: relative;
}

.navigation a {
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.navigation a:hover {
    color: var(--color-primary);
    background-color: var(--color-surface-hover);
}

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

.header-search-toggle,
.header-account-link,
.header-wishlist-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.header-search-toggle:hover,
.header-account-link:hover,
.header-wishlist-link:hover {
    color: var(--color-primary);
    background-color: var(--color-surface-hover);
}

/* Mini Cart */
.minicart-wrapper .action.showcart {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.minicart-wrapper .action.showcart:hover {
    color: var(--color-primary);
    background-color: var(--color-surface-hover);
}

.minicart-wrapper .counter.qty {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-black);
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

/* Mini Cart Dropdown */
.alcyone-minicart-dropdown,
.block-minicart {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    overflow: hidden;
}

.block-minicart .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.block-minicart .block-title strong {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.block-minicart .block-title .qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-black);
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

.block-minicart .block-title .qty.empty {
    display: none;
}

.block-minicart .block-content {
    position: relative;
    padding: var(--spacing-4) var(--spacing-6);
}

.block-minicart .action.close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-surface-hover);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: 0;
}

.block-minicart .action.close::before {
    content: "✕";
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.block-minicart .action.close:hover {
    background: var(--color-border);
}

.block-minicart .action.close:hover::before {
    color: var(--color-text);
}

.block-minicart .items-total {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.block-minicart .items-total .count {
    font-weight: 600;
    color: var(--color-text);
}

.block-minicart .subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) 0;
    margin-bottom: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.block-minicart .subtotal .label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.block-minicart .subtotal .price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

.block-minicart .actions {
    margin-top: var(--spacing-4);
    padding: 0;
}

.block-minicart .actions .primary {
    margin-bottom: var(--spacing-3);
}

.block-minicart .action.primary.checkout {
    display: block;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-black);
    text-align: center;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.block-minicart .action.primary.checkout:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.block-minicart .actions .secondary {
    text-align: center;
}

.block-minicart .action.viewcart {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: underline;
}

.block-minicart .action.viewcart:hover {
    color: var(--color-primary-hover);
}

.block-minicart .subtitle {
    display: block;
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.block-minicart .minicart-items-wrapper {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
}

.block-minicart .minicart-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.block-minicart .minicart-items .product-item {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.block-minicart .minicart-items .product-item:last-child {
    border-bottom: none;
}

.block-minicart .minicart-items .product {
    display: flex;
    gap: var(--spacing-3);
    width: 100%;
}

.block-minicart .product-item-photo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.block-minicart .product-item-photo .product-image-container {
    width: 100% !important;
    height: 100%;
    display: block;
}

.block-minicart .product-item-photo .product-image-wrapper {
    padding-bottom: 0 !important;
    width: 100%;
    height: 100%;
    display: block;
}

.block-minicart .product-item-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.block-minicart .product-item-details {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--spacing-1) var(--spacing-3);
    align-items: start;
}

.block-minicart .product-item-name {
    display: block;
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    grid-column: 1;
    grid-row: 1;
}

.block-minicart .product-item-name a {
    color: var(--color-text);
    text-decoration: none;
}

.block-minicart .product-item-name a:hover {
    color: var(--color-primary);
}

.block-minicart .product-item-pricing {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: 0;
    grid-column: 1;
    grid-row: 2;
}

.block-minicart .product-item-pricing .price {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.block-minicart .details-qty {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.block-minicart .details-qty .label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.block-minicart .details-qty .item-qty {
    width: 50px;
    height: 28px;
    padding: 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.block-minicart .product.actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    margin-top: 0;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
}

.block-minicart .product.actions .action {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: none;
}

.block-minicart .product.actions .action:hover {
    color: var(--color-primary);
}

.block-minicart .product.actions .action.delete:hover {
    color: var(--color-error);
}

.block-minicart .minicart-widgets {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

/* Body */

[data-content-type="row"][data-appearance="contained"] {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--page-width);
}

/* PayPal button in minicart */
.block-minicart .paypal.checkout {
    margin-top: var(--spacing-3);
    text-align: center;
}

.block-minicart .paypal.checkout input[type="image"] {
    max-width: 100%;
    height: auto;
}

/* Empty minicart */
.block-minicart .empty {
    padding: var(--spacing-8) var(--spacing-4);
    text-align: center;
    color: var(--color-text-muted);
}

/* Mobile Nav Toggle */
.header-nav-toggle,
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .header-nav-toggle,
    .nav-toggle {
        display: flex;
    }

    .header-nav,
    .navigation {
        display: none;
    }
}

.nav-toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-toggle-icon span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    transition: all var(--transition-base);
}

/* ============================================
   Alcyone Header 2026 - React Design Match
   ============================================ */
.alcyone-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #000000;
    border-bottom: 1px solid #27272a;
    transition: all 300ms ease;
}

.alcyone-header.scrolled {
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Logo Icon with Gradient */
.alcyone-header .w-10.h-10.rounded-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(to bottom right, #f59e0b, #ca8a04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    color: #000000;
}

/* Navigation Dropdowns */
.nav-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 300ms ease;
}

.nav-dropdown button:hover {
    color: #f59e0b;
}

.nav-dropdown button svg {
    width: 1rem;
    height: 1rem;
    transition: transform 300ms ease;
}

/* Desktop Dropdown Active State */
.nav-dropdown.dropdown-active button {
    color: #f59e0b;
}

.nav-dropdown .chevron-icon.rotate-180 {
    transform: rotate(180deg);
}

/* Desktop Dropdown Panels */
.desktop-dropdown-panel {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 49;
    background-color: #18181b;
    border-bottom: 1px solid #27272a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;
    display: none;
}

.desktop-dropdown-panel.dropdown-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hide dropdown panels on mobile */
@media (max-width: 767px) {
    .desktop-dropdown-panel {
        display: none !important;
    }
}

/* Language Dropdown Styles */
.language-dropdown,
.language-dropdown-mobile {
    position: relative;
}

.language-dropdown button,
.language-dropdown-mobile button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: all 300ms ease;
    color: #d4d4d8;
}

.language-dropdown button:hover,
.language-dropdown-mobile button:hover {
    color: #f59e0b;
    background: #27272a;
}

.language-dropdown .language-dropdown-menu,
.language-dropdown-mobile .language-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 200ms ease;
    min-width: 150px;
    z-index: 100;
}

.language-dropdown.dropdown-active .language-dropdown-menu,
.language-dropdown-mobile.dropdown-active .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-dropdown .language-dropdown-menu a,
.language-dropdown-mobile .language-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: #d4d4d8;
    text-decoration: none;
    transition: all 150ms ease;
}

.language-dropdown .language-dropdown-menu a:hover,
.language-dropdown-mobile .language-dropdown-menu a:hover {
    background: #27272a;
    color: #ffffff;
}

.language-dropdown .chevron-icon {
    transition: transform 300ms ease;
}

.language-dropdown.dropdown-active .chevron-icon {
    transform: rotate(180deg);
}

/* Header Minicart Custom Styles */
.header-minicart,
.header-minicart-mobile {
    position: relative;
}

.header-minicart .minicart-wrapper,
.header-minicart-mobile .minicart-wrapper {
    position: static;
    margin-left: 0 !important;
}

.header-minicart .action.showcart,
.header-minicart-mobile .action.showcart {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    color: #d4d4d8;
    transition: all 300ms ease;
}

.header-minicart .action.showcart:hover,
.header-minicart-mobile .action.showcart:hover {
    color: #f59e0b;
    background: transparent;
}

.header-minicart .action.showcart .counter.qty,
.header-minicart-mobile .action.showcart .counter.qty {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #000000;
    background: linear-gradient(to right, #d97706, #ca8a04);
    border-radius: 9999px;
}

/* Mobile Menu Toggle */
.nav-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
    display: none;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
}

body.nav-open .mobile-menu-panel {
    display: block;
}

.mobile-nav-section {
    padding-bottom: 0.75rem;
}

.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    text-align: left;
}

.mobile-nav-toggle .chevron-icon {
    transition: transform 0.2s ease;
}

.mobile-nav-toggle.expanded .chevron-icon,
.mobile-nav-toggle .chevron-icon.rotate-180 {
    transform: rotate(180deg);
}

.mobile-submenu {
    padding-left: 1rem;
    margin-top: 0.5rem;
    overflow: hidden;
}

.mobile-submenu.hidden {
    display: none;
}

.mobile-submenu a {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-zinc-400);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mobile-submenu a:hover {
    color: var(--color-amber-400);
}

/* Hide menu panel on desktop */
@media (min-width: 768px) {
    .mobile-menu-panel {
        display: none !important;
    }
}

/* Hide Magento Default Cart Text */
.header-minicart .action.showcart .text,
.header-minicart-mobile .action.showcart .text {
    display: none;
}

/* Hide ::before cart icon - using SVG in template instead */
.header-minicart .action.showcart::before,
.header-minicart-mobile .action.showcart::before {
    display: none !important;
    content: none !important;
}

@media only screen and (max-width: 639px) {
    .minicart-wrapper {
        margin-top: 0 !important;
    }
}

#mobile-menu-panel {
    margin-top: 90px;
}

/* ============================================
   Page bottom Styles
   ============================================ */

.page-wrapper > .page-bottom {
    max-width: unset !important;
    width: 100% !important;
}

.page-wrapper > .page-bottom > section,
.page-wrapper > .page-bottom > div {
    width: 100% !important;
}

/* ============================================
   Footer Styles
   ============================================ */
.page-footer {
    background-color: var(--color-zinc-900);
    border-top: 1px solid var(--color-border);
    margin-top: 0;
}

.footer-container {
    max-width: var(--);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

/* Footer Top - Newsletter */
.footer-top {
    padding: var(--spacing-16) 0;
    border-bottom: 1px solid var(--color-border);
}

.footer-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.newsletter-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.newsletter-subtitle {
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.newsletter-form-wrapper {
    flex-shrink: 0;
}

.newsletter-form-wrapper form {
    display: flex;
    gap: var(--spacing-3);
}

.newsletter-form-wrapper input[type="email"] {
    min-width: 300px;
}

/* Footer Main */
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: var(--spacing-12);
    padding: var(--spacing-16) 0;
}

.footer-column-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

/* Footer About */
.footer-about .footer-logo a {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.footer-logo .logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-black);
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
}

.footer-logo .logo-text {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.footer-about-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.footer-social {
    display: flex;
    gap: var(--spacing-3);
}

.footer-social .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-muted);
    background-color: var(--color-zinc-800);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.footer-social .social-link:hover {
    color: var(--color-black);
    background: var(--gradient-primary);
}

/* Footer Links */
.footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links-list li {
    margin-bottom: var(--spacing-3);
}

.footer-links-list a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.footer-links-list a:hover {
    color: var(--color-primary);
}

/* Footer Contact */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.footer-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.footer-contact-info .contact-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.footer-contact-info .contact-item a {
    color: var(--color-text-muted);
}

.footer-contact-info .contact-item a:hover {
    color: var(--color-primary);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6) 0;
    border-top: 1px solid var(--color-border);
}

.footer-copyright p {
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    margin: 0;
}

.footer-payments {
    display: flex;
    gap: var(--spacing-3);
}

.footer-payments .payment-icon {
    width: 40px;
    height: 24px;
    background-color: var(--color-zinc-800);
    border-radius: var(--radius-sm);
}

/* ============================================
   Page Main Content
   ============================================ */
/* Override base Magento layout max-width */
@media (min-width: 768px), print {
    .navigation,
    .breadcrumbs,
    .page-header .header.panel,
    .header.content,
    .footer.content,
    .page-wrapper > .widget,
    .block.category.event,
    .top-container,
    .page-main {
        max-width: var(--page-width) !important;
    }
}

.block.category.event,
.top-container,
.page-main {
    max-width: var(--page-width) !important;
}

.page-main {
    max-width: var(--page-width) !important;
    margin: 0 auto;
    padding: calc(100px + var(--spacing-8)) var(--spacing-6) 0;
}

.page-title-wrapper {
    margin-bottom: var(--spacing-8);
}

/* ============================================
   Product Cards
   ============================================ */
.product-item,
.product-card {
    position: relative;
    background: var(--gradient-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all var(--transition-slow);
}

.product-item:hover,
.product-card:hover {
    border-color: var(--color-border-hover);
    transform: scale(1.02);
}

.product-item-photo,
.product-card-image {
    position: relative;
    overflow: hidden;
    background-color: var(--color-zinc-800);
}

.product-item-photo img,
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-item:hover .product-item-photo img,
.product-card:hover .product-card-image img {
    transform: scale(1.1);
}

.product-item-details,
.product-card-content {
    padding: var(--spacing-5);
}

.product-item-name,
.product-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-3);
    transition: color var(--transition-base);
}

.product-item:hover .product-item-name,
.product-card:hover .product-card-title {
    color: var(--color-primary);
}

.product-item-price,
.product-card-price {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

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

.old-price .price {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-subtle);
    text-decoration: line-through;
}

/* Product Rating */
.rating-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.rating-result {
    display: flex;
    gap: 2px;
}

.rating-result span {
    color: var(--color-primary);
}

/* Add to Cart Button */
.product-item .action.tocart,
.product-card .btn-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    margin-top: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-black);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}
button,
.cart.table-wrapper .actions-toolbar > .action,
.action-gift {
    border: 0;
    background: var(--color-zinc-900);
}

.product-item .action.tocart:hover,
.product-card .btn-add-to-cart:hover {
    background: var(--gradient-primary-hover);
}

/* Product Badges */
.product-label,
.product-badge {
    position: absolute;
    top: var(--spacing-4);
    left: var(--spacing-4);
    z-index: 10;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-white);
    border-radius: var(--radius-full);
}

.product-label.sale,
.product-badge.discount {
    background: linear-gradient(to right, #dc2626, #ef4444);
}

.product-label.new,
.product-badge.new {
    background: linear-gradient(to right, #059669, #10b981);
}

/* Wishlist Button */
.product-item .action.towishlist,
.product-card .btn-wishlist {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-white);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
}

.product-item .action.towishlist:hover,
.product-card .btn-wishlist:hover {
    background: var(--gradient-primary);
}

/* ============================================
   Category Page
   ============================================ */

.filter-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.filter-options-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-3);
}

.filter-options-content {
    margin-bottom: var(--spacing-6);
}

.filter-options-content .item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-base);
}

.filter-options-content .item:hover {
    color: var(--color-primary);
}

/* Product Grid - Remove grid-template-columns to let Tailwind handle it */
.products-grid {
    display: grid !important;
    gap: var(--spacing-6);
}

/* Highlight pages product grid wrapper - Don't set columns on wrapper */
.products-wrapper.products-grid {
    display: block !important;
}

/* Highlight pages product grid - let Tailwind handle columns */
ol.products-grid,
.products-wrapper ol.products-grid {
    display: grid !important;
    gap: var(--spacing-6) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.products-grid .product-item,
.products-grid > .product-item,
.products-grid .product-items > .product-item,
.products-grid > li {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-4);
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   Product Detail Page
   ============================================ */

.catalog-product-view .product-info-main .page-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
}

.catalog-product-view .product-info-price {
    margin-bottom: var(--spacing-6);
}

.catalog-product-view .price-box .price {
    font-size: var(--font-size-3xl);
}

.catalog-product-view .product-add-form {
    margin-top: var(--spacing-6);
}

/* Quantity Selector */
.qty-wrapper,
.field.qty {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.qty-wrapper input,
input.qty {
    width: 80px;
    text-align: center;
}

/* Product Gallery */
.gallery-placeholder,
.product.media {
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* Product Tabs */
.product.info.detailed {
    margin-top: var(--spacing-12);
}

.product.data.items {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.product.data.items > .item.title {
    background-color: var(--color-surface);
}

.product.data.items > .item.title > .switch {
    padding: var(--spacing-4) var(--spacing-6);
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-base);
}

.product.data.items > .item.title.active > .switch,
.product.data.items > .item.title > .switch:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.product.data.items > .item.content {
    padding: var(--spacing-6);
    background-color: var(--color-surface);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-8);
    }

    .footer-about {
        grid-column: span 2;
    }
}

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

    .header-top-bar {
        display: none;
    }

    .footer-newsletter {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form-wrapper input[type="email"] {
        min-width: auto;
        width: 100%;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .footer-about {
        grid-column: span 1;
        text-align: center;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-4);
        text-align: center;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.container {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.bg-surface {
    background-color: var(--color-surface) !important;
}

.rounded-2xl {
    border-radius: var(--radius-2xl) !important;
}

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn var(--transition-slow) ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.8s ease forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-slow) ease forwards;
}

/* ============================================
   Hero Section
   ============================================ */
.alcyone-hero {
    /* Height determined by content */
}

.alcyone-hero .hero-particles .animate-pulse {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.alcyone-hero .hero-glow {
    pointer-events: none;
}

/* Blur effect for older browsers */
.blur-3xl {
    filter: blur(64px);
}

/* Backdrop blur for badges */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Text gradient clipping */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Hover Glow Effect */
.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

/* ============================================
   Product Slider Styles
   ============================================ */
.product-slider-container {
    position: relative;
}

.product-slider-container .slider-viewport {
    overflow: visible;
    margin: 0;
    padding: 0;
}

.product-slider-container .slider-viewport-wrapper {
    position: relative;
    margin: 0;
    padding: 1rem 0;
    overflow: hidden;
}

.product-slider-container .slider-items-container {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-out;
    gap: 1.5rem;
    width: max-content;
    margin: 0;
    padding: 0;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Slider item base styles - widths set by JavaScript */
.product-slider-container .slider-item {
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.product-slider-container .slider-item:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.product-slider-container .slider-nav {
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease,
        border-color 0.3s ease;
}

.product-slider-container:hover .slider-nav {
    opacity: 1;
}

.product-slider-container .slider-nav:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
}

.product-slider-container .slider-dot {
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.product-slider-container .slider-dot:hover {
    transform: scale(1.2);
}

.product-slider-container .slider-dot.bg-amber-500 {
    background-color: var(--color-amber-500);
}

/* Responsive slider adjustments - nav button sizes only */
@media (max-width: 900px) {
    .product-slider-container .slider-nav {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 640px) {
    .product-slider-container .slider-nav {
        display: none;
    }
}

/* ============================================
   Modal Styles
   ============================================ */

.modal-slide .modal-inner-wrap,
.modal-popup .modal-inner-wrap {
    background-color: rgba(10, 10, 10, 0.8);
    border-radius: var(--radius-xl);
}
.suggestpage-activity {
    background: var(--color-zinc-900) !important;
}
.suggestpage-activity .col-2 {
    background: var(--color-zinc-900) !important;
}

/* ============================================
   Product View Page Styles
   ============================================ */

/* Product page layout */
.catalog-product-view .page-wrapper {
    background-color: var(--color-black);
}

.catalog-product-view .page-main {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Reset default columns behavior */
.catalog-product-view .columns {
    display: block;
    padding: 0;
}

.catalog-product-view .column.main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 3rem 1.5rem;
    width: 100%;
    float: none;
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Make gallery and info main take proper grid positions */
/* Override Magento's default width: 57% styles */
.catalog-product-view .product.media {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.catalog-product-view .product-info-main {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Product details spans full width */
.catalog-product-view .product.info.detailed,
.catalog-product-view .product-details-tabs {
    grid-column: 1 / -1;
}

/* Related products spans full width */
.catalog-product-view .block.related,
.catalog-product-view .related-products-section {
    grid-column: 1 / -1;
}

/* Override Magento's default 57% width at 768px breakpoint */
@media screen and (min-width: 768px) {
    .page-layout-1column .product.media,
    .catalog-product-view .product.media {
        width: 100% !important;
        float: none !important;
    }

    .page-layout-1column .product-info-main,
    .catalog-product-view .product-info-main {
        width: 100% !important;
        float: none !important;
    }
}

@media (max-width: 1024px) {
    .catalog-product-view .column.main {
        grid-template-columns: 1fr;
    }

    .catalog-product-view .product.media,
    .catalog-product-view .product-info-main {
        grid-column: 1;
        width: 100% !important;
    }

    .catalog-product-view .product-info-main {
        grid-row: 2;
    }
}

/* Product Media/Gallery */
.catalog-product-view .product.media {
    position: relative;
    align-self: start;
}

.catalog-product-view .gallery-placeholder {
    aspect-ratio: 1/1;
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        var(--color-zinc-800)
    );
}

.catalog-product-view .gallery-placeholder__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--color-zinc-800);
    border-radius: 1.5rem;
}

/* Gallery navigation */
.catalog-product-view .gallery-prev,
.catalog-product-view .gallery-next,
.catalog-product-view .fotorama__arr {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.catalog-product-view .fotorama__arr--prev {
    left: 1rem;
}

.catalog-product-view .fotorama__arr--next {
    right: 1rem;
}

.catalog-product-view .gallery-prev:hover,
.catalog-product-view .gallery-next:hover,
.catalog-product-view .fotorama__arr:hover {
    background-color: var(--color-amber-500);
}

/* Fotorama gallery overrides */
.catalog-product-view .fotorama__stage {
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        var(--color-zinc-800)
    );
}

.catalog-product-view .fotorama__stage__shaft {
    width: 100% !important;
    height: 100% !important;
}

.catalog-product-view .fotorama__stage__frame {
    width: 100% !important;
    height: 100% !important;
}

.catalog-product-view .fotorama__img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    position: relative !important;
}

.catalog-product-view .fotorama__thumb-border {
    border-color: var(--color-amber-500) !important;
}

.catalog-product-view .fotorama__nav-wrap {
    margin-top: 1rem;
}

.catalog-product-view .fotorama__nav__shaft {
    gap: 0.75rem;
}

.catalog-product-view .fotorama__thumb {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 2px solid var(--color-zinc-800);
    transition: border-color 0.3s ease;
}

.catalog-product-view .fotorama__thumb:hover {
    border-color: var(--color-zinc-600);
}

.catalog-product-view .fotorama__active .fotorama__thumb {
    border-color: var(--color-amber-500);
}

/* Product Info Main */
.catalog-product-view .product-info-main {
    padding: 0;
}

/* Brand and title container */
.catalog-product-view .product-brand-title {
    margin-bottom: 1.5rem;
}

/* Product Price Box */
.catalog-product-view .product-view-price-box {
    margin: 1.5rem 0;
}

.catalog-product-view .product-view-price-box .price {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-amber-400);
}

.catalog-product-view .product-view-price-box .old-price .price {
    font-size: 1.5rem;
    color: var(--color-zinc-500);
    text-decoration: line-through;
}

/* Product Info Price Container */
.catalog-product-view .product-info-price {
    margin-bottom: 1.5rem;
}

.catalog-product-view .product-info-stock-sku {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--color-zinc-500);
    font-size: 0.875rem;
}

/* Swatches / Options */
.catalog-product-view .swatch-opt {
    margin: 1.5rem 0;
}

.catalog-product-view .swatch-attribute {
    margin-bottom: 1.5rem;
}

.catalog-product-view .swatch-attribute-label {
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.75rem;
    display: block;
}

.catalog-product-view .swatch-attribute-selected-option {
    color: var(--color-amber-400);
    margin-left: 0.5rem;
}

.catalog-product-view .swatch-option {
    min-width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    border: 2px solid var(--color-zinc-700);
    transition: all 0.3s ease;
    cursor: pointer;
}

.catalog-product-view .swatch-option:hover {
    border-color: var(--color-zinc-500);
}

.catalog-product-view .swatch-option.selected {
    border-color: var(--color-amber-500);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

.catalog-product-view .swatch-option.text {
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--color-white);
    font-weight: 600;
}

.catalog-product-view .swatch-option.text.selected {
    background: rgba(245, 158, 11, 0.1);
}

.catalog-product-view .swatch-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
}

.catalog-product-view .swatch-option.disabled::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #ef4444;
    transform: rotate(45deg);
}

/* Add to Cart Box */
.catalog-product-view .box-tocart {
    margin: 1.5rem 0;
}

.catalog-product-view .product-addtocart-wrapper {
    margin-top: 1.5rem;
}

/* Hide default stock status block under product name - we show it inline with quantity */
.catalog-product-view .product-info-stock-sku {
    display: none !important;
}

.catalog-product-view .stock-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.catalog-product-view .stock.available,
.catalog-product-view .stock.unavailable {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.catalog-product-view .stock.available {
    color: var(--color-emerald-400);
}

.catalog-product-view .stock.unavailable {
    color: var(--color-red-400);
}

/* Quantity Input */
.catalog-product-view .field.qty {
    margin-bottom: 1.5rem;
}

.catalog-product-view .field.qty .label {
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.75rem;
    display: block;
}

.catalog-product-view .qty-input,
.catalog-product-view input.qty {
    width: 4rem;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-zinc-800);
    border-right: 1px solid var(--color-zinc-800);
    padding: 0.75rem;
    color: var(--color-white);
    font-size: 1rem;
}

.catalog-product-view .qty-input:focus,
.catalog-product-view input.qty:focus {
    outline: none;
}

/* Hide number input spinners */
.catalog-product-view input[type="number"]::-webkit-outer-spin-button,
.catalog-product-view input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.catalog-product-view input[type="number"] {
    -moz-appearance: textfield;
}

/* Add to Cart Button */
.catalog-product-view .product-action-buttons {
    display: flex !important;
    width: 100% !important;
    gap: 1rem;
}

.catalog-product-view .product-action-buttons button {
    flex-shrink: 0;
}

.catalog-product-view .product-action-buttons button svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex-shrink: 0;
}

/* Hide PayPal and other express checkout containers in action buttons */
.catalog-product-view .product-action-buttons .paypal-button,
.catalog-product-view .product-action-buttons .paypal-buttons,
.catalog-product-view .product-action-buttons .paypal-button-container,
.catalog-product-view .product-action-buttons .actions-secondary,
.catalog-product-view .product-action-buttons [class*="paypal"],
.catalog-product-view .product-action-buttons .braintree-paypal-button,
.catalog-product-view .product-action-buttons .checkout-methods-items {
    display: none !important;
}

/* Hide empty child containers */
.catalog-product-view .product-action-buttons > div:empty,
.catalog-product-view .product-action-buttons > span:empty {
    display: none !important;
}

.catalog-product-view .action.tocart {
    flex: 1;
    min-width: 200px;
    padding: 1rem 2rem;
    background: linear-gradient(
        to right,
        var(--color-amber-600),
        var(--color-yellow-600)
    );
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-black);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
}

.catalog-product-view .action.tocart:hover {
    background: linear-gradient(
        to right,
        var(--color-amber-500),
        var(--color-yellow-500)
    );
}

.catalog-product-view .action.tocart:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Social Links / Add To */
.catalog-product-view .product-social-links {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.catalog-product-view .product-social-links .action {
    padding: 1rem;
    border: 1px solid var(--color-zinc-700);
    border-radius: 0.75rem;
    color: var(--color-white);
    background: transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.catalog-product-view .product-social-links .action:hover {
    border-color: var(--color-zinc-500);
}

/* Add to Wishlist / Compare Links - Side by Side */
.catalog-product-view .product-addto-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem;
    margin: 1rem 0;
}

.catalog-product-view .product-addto-links a,
.catalog-product-view .product-addto-links .action {
    padding: 0.5rem 0;
    border: none;
    color: var(--color-zinc-400);
    background: transparent;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    text-decoration: none;
}

.catalog-product-view .product-addto-links a::before,
.catalog-product-view .product-addto-links .action::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.catalog-product-view .product-addto-links .towishlist::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.catalog-product-view .product-addto-links .tocompare::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M8 3H3v5'/%3E%3Cpath d='M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3'/%3E%3Cpath d='m15 9 6-6'/%3E%3Cpath d='M16 21h5v-5'/%3E%3Cpath d='M8 21H3v-5'/%3E%3Cpath d='m15 15 6 6'/%3E%3Cpath d='M3 21l5-5'/%3E%3C/svg%3E");
}

.catalog-product-view .product-addto-links a:hover,
.catalog-product-view .product-addto-links .action:hover {
    color: var(--color-amber-400);
}

.catalog-product-view .product-addto-links a:hover::before,
.catalog-product-view .product-addto-links .action:hover::before {
    opacity: 1;
    filter: brightness(1.5) sepia(1) hue-rotate(-10deg) saturate(5);
}

/* Short Description / Overview */
.catalog-product-view .product.overview {
    color: var(--color-zinc-400);
    line-height: 1.75;
    margin: 1.5rem 0;
}

/* Product Details Tabs Section */
.catalog-product-view .product-details-tabs {
    background-color: var(--color-zinc-950);
    padding: 3rem 0;
    margin-top: 0;
}

.catalog-product-view .product.info.detailed {
    background-color: var(--color-zinc-950);
    padding: 3rem 0;
}

/* Tab buttons */
.catalog-product-view .tab-btn {
    background: none;
    border: none;
    cursor: pointer;
}

/* Tab content */
.catalog-product-view .tab-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Description content */
.catalog-product-view .product-description-content {
    color: var(--color-zinc-400);
}

.catalog-product-view .product-description-content p {
    margin-bottom: 1rem;
}

.catalog-product-view .product-description-content ul,
.catalog-product-view .product-description-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.catalog-product-view .product-description-content li {
    margin-bottom: 0.5rem;
}

/* Specifications table */
.catalog-product-view .specifications-tab-content .table-wrapper {
    overflow: hidden;
    border-radius: 1rem;
}

/* Related Products Section */
.catalog-product-view .related-products-section {
    background-color: var(--color-black);
    padding: 4rem 0;
}

/* Breadcrumbs */
.catalog-product-view .breadcrumbs {
    padding: 2rem 0 0;
}

.catalog-product-view .breadcrumbs .items {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.catalog-product-view .breadcrumbs a {
    color: var(--color-zinc-400);
    transition: color 0.3s ease;
}

.catalog-product-view .breadcrumbs a:hover {
    color: var(--color-amber-400);
}

.catalog-product-view .breadcrumbs .item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2352525b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    background-size: contain;
    vertical-align: middle;
}

.catalog-product-view .breadcrumbs strong {
    color: var(--color-white);
    font-weight: 500;
}

/* Hide default page title (using custom template) */
.catalog-product-view .page-title-wrapper.product {
    display: none;
}

/* Scrollbar hide utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .catalog-product-view .column.main {
        gap: 2rem;
        padding: 1.5rem 0;
    }

    .catalog-product-view .product.media {
        position: static;
    }

    .catalog-product-view .product-view-price-box .price {
        font-size: 1.75rem;
    }

    .catalog-product-view .action.tocart {
        width: 100%;
        min-width: auto;
    }
}

/* ============================================
   Category Pages - CMS Content Styling
   ============================================ */

/* Category CMS content (PageBuilder rows) */
.category-view
    .category-cms
    [data-content-type="row"][data-appearance="contained"]
    > [data-element="inner"] {
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 50px;
}

/* ============================================
   Category/Page Hero Component (Tailwind-style utilities)
   ============================================ */

/* Hero container with gradient background */
.category-hero {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.category-hero.bg-gradient-to-br.from-zinc-900.via-black.to-zinc-900 {
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        var(--color-black),
        var(--color-zinc-900)
    );
}

.category-hero.border-b.border-zinc-800 {
    border-bottom-color: var(--color-zinc-800);
}

/* Container utilities */
.category-hero .container {
    width: 100%;
    box-sizing: border-box;
}

.category-hero .container.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.category-hero .container.max-w-\[1560px\] {
    max-width: 1560px;
}

.category-hero .container.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.category-hero .container.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Flexbox utilities */
.category-hero .flex {
    display: flex;
}

.category-hero .items-end {
    align-items: flex-end;
}

.category-hero .justify-between {
    justify-content: space-between;
}

/* Typography utilities */
.category-hero .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.category-hero .font-bold {
    font-weight: 700;
}

.category-hero .mb-4 {
    margin-bottom: 1rem;
}

.category-hero .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.category-hero .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.category-hero .max-w-2xl {
    max-width: 42rem;
}

/* Color utilities */
.category-hero .text-zinc-400 {
    color: var(--color-zinc-400);
}

.category-hero .text-zinc-500 {
    color: var(--color-zinc-500);
}

.category-hero .text-amber-400 {
    color: var(--color-amber-400);
}

/* Gradient text - applies gradient as text color, not background */
.category-hero
    .bg-gradient-to-r.from-amber-400.to-yellow-500.bg-clip-text.text-transparent {
    background: linear-gradient(to right, var(--color-amber-400), #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Visibility utilities */
.category-hero .hidden {
    display: none;
}

.category-hero .text-right {
    text-align: right;
}

/* Responsive utilities */
@media (min-width: 768px) {
    .category-hero .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }

    .category-hero .md\:block {
        display: block;
    }
}

/* ============================================
   Partner/Contact Form Page Styling
   ============================================ */

/* Partner page background */
.partner-index-index,
.contact-index-index {
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        var(--color-black),
        var(--color-zinc-900)
    );
}

/* Partner Hero Wrapper - Full width before main */
.partner-hero-wrapper {
    padding-top: 120px; /* Account for fixed header */
    padding-bottom: var(--spacing-12);
    padding-left: 25px;
    padding-right: 25px;
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        var(--color-black)
    );
    border-bottom: 1px solid var(--color-zinc-800);
}

.partner-hero-wrapper .page-title-wrapper {
    max-width: 1560px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}

.partner-hero-wrapper .page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    background: linear-gradient(to right, var(--color-amber-400), #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--spacing-4) 0;
}

.partner-hero-wrapper .hero-description {
    color: var(--color-zinc-400);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    max-width: 42rem;
    margin: 0;
}

.fieldset>.legend {
    font-size: 1.7rem !important;
}

@media (min-width: 768px), print {
    .fieldset > .field:not(.choice) > .label {
        padding: 6px 15px 0 0;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box;
        float: left;
    }
}

@media (min-width: 768px) {
    .partner-hero-wrapper .page-title {
        font-size: var(--font-size-5xl);
    }
}

/* Partner page layout */
.partner-index-index .page-main,
.contact-index-index .page-main {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-16);
}

/* Remove old title styles when using hero wrapper */
.partner-index-index .page-main .page-title-wrapper {
    display: none;
}

/* Contact page title with gradient - full width (legacy support) */
.contact-index-index .page-title-wrapper {
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-12) var(--spacing-6);
    border-bottom: 1px solid var(--color-zinc-800);
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        var(--color-black)
    );
}

.contact-index-index .page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    background: linear-gradient(to right, var(--color-amber-400), #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 1560px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .partner-index-index .page-title,
    .contact-index-index .page-title {
        font-size: var(--font-size-5xl);
    }
}

/* Columns container - fix 50% width issue */
.partner-index-index .columns,
.contact-index-index .columns {
    display: block;
    padding: 0 var(--spacing-6);
    max-width: 1560px;
    margin: 0 auto;
}

.partner-index-index .column.main,
.contact-index-index .column.main {
    width: 100%;
    float: none;
}

/* Form container */
.partner-index-index .form.contact,
.contact-index-index .form.contact,
#partner-form {
    width: 100%;
    background: linear-gradient(
        to bottom right,
        var(--color-zinc-900),
        rgba(0, 0, 0, 0.5)
    );
    border: 1px solid var(--color-zinc-800);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-sizing: border-box;
}

/* Legend styling */
.partner-index-index .legend,
.contact-index-index .legend,
#partner-form .legend,
.partner-index-index .fieldset .legend,
.contact-index-index .fieldset .legend,
#partner-form .fieldset .legend {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0 0 var(--spacing-4) 0 !important;
    margin-left: 0 !important;
    padding: 0 0 var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-zinc-700);
    width: 100%;
    float: none;
}

/* Note text */
.partner-index-index .field.note,
.contact-index-index .field.note,
#partner-form .field.note {
    color: var(--color-zinc-400);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-6);
    width: 100%;
}

/* Override Magento's default field pseudo-element spacing */
.partner-index-index .fieldset > .field:before,
.contact-index-index .fieldset > .field:before,
#partner-form .fieldset > .field:before,
.partner-index-index .fieldset > .field.no-label:before,
.contact-index-index .fieldset > .field.no-label:before,
#partner-form .fieldset > .field.no-label:before,
.partner-index-index .fieldset > .field.choice:before,
.contact-index-index .fieldset > .field.choice:before,
#partner-form .fieldset > .field.choice:before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Form fields */
.partner-index-index .fieldset,
.contact-index-index .fieldset,
#partner-form .fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-5);
}

.partner-index-index .field,
.contact-index-index .field,
#partner-form .field {
    margin-bottom: 0;
    width: 100%;
}

/* Labels */
.partner-index-index .field .label,
.contact-index-index .field .label,
#partner-form .field .label {
    display: block;
    color: var(--color-zinc-300);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-2);
}

/* Required field indicator */
.partner-index-index .field.required .label span::after,
.contact-index-index .field.required .label span::after,
#partner-form .field.required .label span::after {
    content: " *";
    color: var(--color-amber-500);
}

/* Control wrapper */
.partner-index-index .field .control,
.contact-index-index .field .control,
#partner-form .field .control {
    width: 100%;
}

/* Input fields */
.partner-index-index .input-text,
.contact-index-index .input-text,
#partner-form .input-text,
.partner-index-index textarea,
.contact-index-index textarea,
#partner-form textarea {
    width: 100%;
    background-color: var(--color-zinc-800);
    border: 1px solid var(--color-zinc-700);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    font-size: var(--font-size-base);
    padding: var(--spacing-3) var(--spacing-4);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.partner-index-index .input-text:focus,
.contact-index-index .input-text:focus,
#partner-form .input-text:focus,
.partner-index-index textarea:focus,
.contact-index-index textarea:focus,
#partner-form textarea:focus {
    outline: none;
    border-color: var(--color-amber-500);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.partner-index-index .input-text::placeholder,
.contact-index-index .input-text::placeholder,
#partner-form .input-text::placeholder,
.partner-index-index textarea::placeholder,
.contact-index-index textarea::placeholder,
#partner-form textarea::placeholder {
    color: var(--color-zinc-500);
}

/* Textarea */
.partner-index-index textarea,
.contact-index-index textarea,
#partner-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Submit button - override Magento's default margin-left: 25.8% */
.partner-index-index .actions-toolbar,
.contact-index-index .actions-toolbar,
#partner-form .actions-toolbar,
.partner-index-index .column.main form .actions-toolbar,
.contact-index-index .column.main form .actions-toolbar,
.column:not(.sidebar-main) #partner-form .actions-toolbar,
.column:not(.sidebar-additional) #partner-form .actions-toolbar {
    margin-top: var(--spacing-8);
    margin-left: 0 !important;
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-zinc-800);
    grid-column: span 2;
}

.partner-index-index .action.submit,
.contact-index-index .action.submit,
#partner-form .action.submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--color-black);
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: var(--spacing-3) var(--spacing-8);
    cursor: pointer;
    transition: all 0.3s ease;
}

.partner-index-index .action.submit:hover,
.contact-index-index .action.submit:hover,
#partner-form .action.submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
}

/* Two-column layout for form on larger screens */
@media (min-width: 768px) {
    .partner-index-index .fieldset,
    .contact-index-index .fieldset,
    #partner-form .fieldset {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-index-index .legend,
    .contact-index-index .legend,
    #partner-form .legend,
    .partner-index-index .field.note,
    .contact-index-index .field.note,
    #partner-form .field.note,
    .partner-index-index .field.comment,
    .contact-index-index .field.comment,
    #partner-form .field.comment,
    .partner-index-index .actions-toolbar,
    .contact-index-index .actions-toolbar,
    #partner-form .actions-toolbar {
        grid-column: span 2;
    }
}

/* ============================================
   CMS Pages - Content Styling
   ============================================ */

/* CMS pages (About Us, etc.) need proper header offset */
.cms-page-view .page-main {
    padding-top: 120px;
    padding-bottom: var(--spacing-16);
}

.cms-page-view .page-main .page-title-wrapper {
    margin-bottom: var(--spacing-8);
}

.cms-page-view .page-main .page-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    background: linear-gradient(to right, var(--color-amber-400), #eab308);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cms-page-view .page-main .column.main {
    color: var(--color-zinc-300);
    line-height: 1.7;
}

.cms-page-view .page-main .column.main h2,
.cms-page-view .page-main .column.main h3,
.cms-page-view .page-main .column.main h4 {
    color: var(--color-white);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.cms-page-view .page-main .column.main p {
    margin-bottom: var(--spacing-4);
}

.cms-page-view .page-main .column.main a {
    color: var(--color-amber-500);
    transition: color 0.3s ease;
}

.cms-page-view .page-main .column.main a:hover {
    color: var(--color-amber-400);
}

/* ============================================
   FAQ Pages - Dark Theme Override
   ============================================ */

/* FAQ Page Container */
.faq-index-index,
.faq-category-categorylist {
    background-color: var(--color-black);
}

.faq-index-index .page-main,
.faq-category-categorylist .page-main {
    background-color: var(--color-black);
    padding: var(--spacing-8);
    padding-top: 120px; /* Account for fixed header */
}

/* FAQ Page Content Area */
.faqpage-container,
.faqpage_collapse,
.faqpage_default {
    background-color: transparent;
    color: var(--color-white);
}

/* Expand/Collapse Links */
.faq-index-index .link,
.faq-category-categorylist .link {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

/* FAQ Action Links (Reset, Expand All, Collapse All) */
a#faq-reset,
a#expandall,
a#collapseall,
.faq-index-index .link a,
.faq-category-categorylist .link a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gradient-primary) !important;
    background-color: var(--color-amber-500) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-black) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    padding: var(--spacing-3) var(--spacing-6) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    float: none !important;
    margin-left: 0 !important;
    line-height: 1.5 !important;
}

a#faq-reset:hover,
a#expandall:hover,
a#collapseall:hover,
.faq-index-index .link a:hover,
.faq-category-categorylist .link a:hover {
    background: var(--gradient-primary-hover) !important;
    color: var(--color-black) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* FAQ Category Headers */
.faqpage_category {
    background-color: var(--color-zinc-900) !important;
    border: 1px solid var(--color-zinc-800) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-4) var(--spacing-6) !important;
    margin-bottom: var(--spacing-4) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.faqpage_category:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background-color: var(--color-zinc-800) !important;
}

.faqpage_category a,
.faqpage_category .categories,
.faqpage_category .view-category {
    color: var(--color-white) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.faqpage_category .fa-plus,
.faqpage_category .fa-minus {
    color: var(--color-amber-500) !important;
    font-size: var(--font-size-base) !important;
}

/* FAQ Questions Container */
.faqpage_questions {
    background-color: transparent !important;
    padding: 0 !important;
}

/* FAQ Question Items */
.faq-index-index .faqpage_question_wrapper,
.faq-category-categorylist .faqpage_question_wrapper,
.faqpage_question_wrapper {
    background-color: var(--color-zinc-900) !important;
    background: var(--color-zinc-900) !important;
    border: 1px solid var(--color-zinc-800) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--spacing-3) !important;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.faq-index-index .faqpage_question_wrapper:hover,
.faq-category-categorylist .faqpage_question_wrapper:hover,
.faqpage_question_wrapper:hover {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.faqpage_question {
    padding: var(--spacing-4) !important;
    margin: 0 !important;
    font-size: var(--font-size-base) !important;
}

a.faq-question {
    color: var(--color-zinc-300) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--spacing-3) !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease !important;
}

a.faq-question:hover {
    color: var(--color-amber-400) !important;
}

a.faq-question .fa-caret-right {
    color: var(--color-amber-500) !important;
    min-width: 1rem;
    transition: transform 0.3s ease;
}

.faqpage_question_wrapper .fa-caret-right {
    transform: rotate(90deg);
    top: 10px !important;
}

.faqpage_question.open a.faq-question .fa-caret-right {
    transform: rotate(-90deg);
    top: 1px !important;
}

/* FAQ Answer Block */
.faqpage_question_block {
    background-color: var(--color-zinc-800) !important;
    padding: var(--spacing-4) var(--spacing-6) !important;
    border-top: 1px solid var(--color-zinc-700);
}

.faqpage_answer {
    color: var(--color-zinc-300) !important;
    line-height: 1.7 !important;
    font-size: var(--font-size-base) !important;
}

.faqpage_answer p {
    margin: 0 0 var(--spacing-4);
    color: var(--color-zinc-300);
}

.faqpage_answer p:last-child {
    margin-bottom: 0;
}

.faqpage_answer a {
    color: var(--color-amber-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faqpage_answer a:hover {
    color: var(--color-amber-400);
}

/* FAQ Search Form */
#faq-search-form {
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-zinc-800);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    width: 100%;
    float: none;
    text-align: left;
}

#faq-search-form h4 {
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

/* Search form input + button wrapper */
#faq-search-form fieldset,
#faq-search-form .field {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
}

#faq-search-form .text-input,
#faq-search-form input[type="text"] {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-text) !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    flex: 1 1 auto !important;
    min-width: 250px !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
    float: none !important;
}

#faq-search-form .text-input:focus,
#faq-search-form input[type="text"]:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

#faq-search-form .text-input::placeholder,
#faq-search-form input[type="text"]::placeholder {
    color: var(--color-text-subtle);
}

#faq-search-form button,
#faq-search-form .button,
#faq-search-form input[type="submit"],
#faq-search-form a#faq-reset {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    color: var(--color-black) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    padding: var(--spacing-3) var(--spacing-6) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    height: auto !important;
    line-height: 1.5 !important;
}

#faq-search-form button:hover,
#faq-search-form .button:hover,
#faq-search-form input[type="submit"]:hover,
#faq-search-form a#faq-reset:hover {
    background: var(--gradient-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* FAQ Buttons */
.faq_ask_button,
button.button.faq_ask_button,
.faq-index-index .page-main .button,
.faq-category-categorylist .page-main .button {
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-black) !important;
    font-weight: 600 !important;
    padding: var(--spacing-3) var(--spacing-6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.faq_ask_button:hover,
button.button.faq_ask_button:hover,
.faq-index-index .page-main .button:hover,
.faq-category-categorylist .page-main .button:hover {
    background: var(--gradient-primary-hover) !important;
    transform: translateY(-1px);
}

/* FAQ Sidebar */
.faq-index-index .sidebar,
.faq-category-categorylist .sidebar {
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-zinc-800);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

a.faq-link.faq-navigator {
    background-color: var(--color-zinc-800) !important;
    border-bottom: 1px solid var(--color-zinc-700) !important;
    color: var(--color-zinc-300) !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

a.faq-link.faq-navigator:hover,
a.faq-link.faq-navigator.active {
    background-color: var(--color-zinc-700) !important;
    color: var(--color-amber-500) !important;
}

a.faq-link.faq-navigator:first-child {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

a.faq-link.faq-navigator:last-child {
    border-bottom: none !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Category header in sidebar */
.category {
    background-color: var(--color-zinc-900) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: var(--spacing-4) !important;
    font-size: var(--font-size-lg) !important;
}

/* FAQ Description */
.faq-page-description {
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-zinc-800);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.faq-page-description .description {
    color: var(--color-zinc-300);
    line-height: 1.7;
    position: static;
}

/* FAQ List Items */
.faq-index-index ul > li,
.faq-index-index ol > li,
.faq-category-categorylist ul > li,
.faq-category-categorylist ol > li {
    color: var(--color-zinc-300);
    font-weight: 400;
}

/* No FAQs Message */
.available p,
.faqpage_question a.faq-question i.fa-thumbs-o-down {
    color: var(--color-zinc-400);
}

/* Page Title (hidden by default but styled if shown) */
.faq-index-index .page-title,
.faq-category-categorylist .page-title {
    color: var(--color-white);
}

/* Responsive FAQ Styles */
@media (max-width: 768px) {
    .faq-index-index .page-main,
    .faq-category-categorylist .page-main {
        padding: var(--spacing-4);
    }

    .faqpage_questions {
        margin-left: 0 !important;
    }

    .faqpage_category {
        padding: var(--spacing-3) var(--spacing-4) !important;
    }

    #faq-search-form {
        padding: var(--spacing-4);
    }
}

/* ==========================================================================
   Sidebar Additional - Spacing between blocks
   ========================================================================== */

.sidebar.sidebar-additional .block {
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--color-zinc-800);
}

.sidebar.sidebar-additional .block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ==========================================================================
   Toolbar Limiter - Show per page control
   ========================================================================== */

.field.limiter {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.field.limiter .label {
    margin-bottom: 0;
}

.field.limiter .control {
    display: inline-flex;
}

.field.limiter .limiter-options {
    background-color: var(--color-zinc-800);
    border: 1px solid var(--color-zinc-700);
    border-radius: var(--radius-md);
    color: var(--color-zinc-300);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
}

.field.limiter .limiter-text {
    color: var(--color-zinc-400);
    font-size: var(--font-size-sm);
}

/* Hide cookie status message to prevent FOUC */
#cookie-status,
.cookie-status-message {
    display: none !important;
}

/* ============================================
   Sparsh Product Inquiry Button
   ============================================ */
.sparsh_product_inquiry_button {
    margin-top: 1rem;
}

.sparsh_product_inquiry_link,
a.sparsh_product_inquiry_link,
.alcyone-quick-add-form a.sparsh_product_inquiry_link,
.product-item a.sparsh_product_inquiry_link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--color-black) !important;
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    width: auto !important;
}

.sparsh_product_inquiry_link:hover,
a.sparsh_product_inquiry_link:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3) !important;
    color: var(--color-black) !important;
}

/* Widget-specific: Don't override transforms for positioned buttons in widgets */
.alcyone-add-to-cart-form.sparsh_product_inquiry_link {
    position: absolute !important;
    display: flex !important;
    padding: 0.5rem 1.5rem !important;
}

.alcyone-add-to-cart-form.sparsh_product_inquiry_link:hover {
    transform: translateX(-50%) translateY(0) !important;
}

.sparsh_product_inquiry_link svg,
a.sparsh_product_inquiry_link svg {
    width: 1rem !important;
    height: 1rem !important;
    stroke: currentColor !important;
}

/* Override Sparsh module default styles at all screen sizes */
@media screen and (min-width: 768px) {
    a.sparsh_product_inquiry_link,
    .product-item a.sparsh_product_inquiry_link,
    .product-info-main a.sparsh_product_inquiry_link {
        font-size: 1rem !important;
        line-height: 1.25rem !important;
        padding: 0.5rem 1rem !important;
        width: auto !important;
    }
}