/* --- catwalk-variables.css --- */
/*
 * CatWalk Theme - Semantic Design System
 * This file defines the core design tokens and semantic color logic.
 * It serves as the single source of truth for the theme engine.
 *
 * Architecture:
 * 1. Base Primitives (Hard values or User Input)
 * 2. Semantic Mapping (Role-based names)
 * 3. Component Tokens (Specific usage)
 *
 * Version: 2.0.0 (Semantic Upgrade)
 */

:root {
  /* ==========================================================================
     1. BASE PRIMITIVES (User Configurable)
     ========================================================================== */

  /* Primary Brand Color */
  --color-primary-base: #fc8dcf;
  --color-primary-rgb: 252, 141, 207;

  /* Secondary/Accent Color */
  --color-secondary-base: #171517;
  --color-secondary-rgb: 23, 21, 23;

  /* Background Base */
  --color-bg-base: #ffffff;
  --color-bg-rgb: 255, 255, 255;

  /* ==========================================================================
     2. GENERATED PALETTE (System Calculated)
     Based on primitives, we generate variations automatically.
     ========================================================================== */

  /* Primary Variations */
  /* Hover: 10% darker for interaction feedback */
  --color-primary-hover: color-mix(
    in srgb,
    var(--color-primary-base),
    black 10%
  );

  /* Active: 20% darker for active states */
  --color-primary-active: color-mix(
    in srgb,
    var(--color-primary-base),
    black 20%
  );

  /* Light/Soft: 90% lighter for backgrounds */
  --color-primary-soft: color-mix(
    in srgb,
    var(--color-primary-base),
    white 90%
  );

  /* Border: 60% lighter for subtle borders */
  --color-primary-border: color-mix(
    in srgb,
    var(--color-primary-base),
    white 60%
  );

  /* Secondary Variations */
  --color-secondary-hover: color-mix(
    in srgb,
    var(--color-secondary-base),
    white 20%
  );
  --color-secondary-soft: color-mix(
    in srgb,
    var(--color-secondary-base),
    white 95%
  );

  /* Gradients (Auto-generated from Primary) */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary-base) 0%,
    var(--color-primary-hover) 100%
  );
  --gradient-soft: linear-gradient(
    135deg,
    var(--color-primary-soft) 0%,
    var(--color-bg-base) 100%
  );

  /* ==========================================================================
     3. SEMANTIC TOKENS (Role Based)
     Use these in your CSS, never use primitives directly.
     ========================================================================== */

  /* CatWalk Legacy Aliases (Bridge for existing code) */
  --catwalk-primary: var(--color-primary-base);
  --catwalk-primary-hover: var(--color-primary-hover);
  --catwalk-primary-rgb: var(--color-primary-rgb);

  --catwalk-secondary: var(--color-secondary-base);
  --catwalk-dark: var(
    --color-secondary-base
  ); /* Added for backward compatibility */
  --catwalk-muted: var(
    --catwalk-text-muted
  ); /* Added for backward compatibility */

  /* Backgrounds */
  --catwalk-bg-main: var(--color-bg-base);
  --catwalk-bg-main-rgb: var(--color-bg-rgb);
  --catwalk-bg-light: #f8f9fa; /* Neutral light gray */
  --catwalk-bg-dark: var(--color-secondary-base);
  --catwalk-bg-primary-light: var(--color-primary-soft);

  /* Text */
  --catwalk-text-primary: var(--color-secondary-base);
  --catwalk-text-secondary: #666666;
  --catwalk-text-muted: #b5b5b5; /* #999 dark bg'de 2.5:1 idi, #b5b5b5 → 4.6:1 (WCAG AA) */
  --catwalk-text-white: #ffffff;

  /* Borders */
  --catwalk-border: #e8e8e8;
  --catwalk-border-dark: #cccccc;
  --catwalk-border-light: #f0f0f0;
  --catwalk-border-primary: var(--color-primary-border);

  /* Status Colors (Standard UX) */
  --catwalk-success-bg: #d4edda;
  --catwalk-success-text: #155724;
  --catwalk-success-border: #c3e6cb;

  --catwalk-error-bg: #f8d7da;
  --catwalk-error-text: #721c24;
  --catwalk-error-border: #f5c6cb;

  /* Solid danger (destructive actions: delete buttons, etc.) */
  --catwalk-danger: #dc3545;
  --catwalk-danger-hover: #bb2d3b;
  --catwalk-danger-rgb: 220, 53, 69;

  --catwalk-warning-bg: #fff3cd;
  --catwalk-warning-text: #856404;

  --catwalk-info-bg: #cce5ff;
  --catwalk-info-text: #004085;

  /* Fonts */
  --catwalk-font-main:
    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --catwalk-font-serif: "Didot", "Bodoni MT", serif;

  /* Shadows */
  --catwalk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --catwalk-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --catwalk-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);

  /* Radius — component corner roundness (TASK 1314). Defaults MATCH the
     existing hardcoded values, so binding components to these tokens produces
     no visual change. The admin radius mode (TASK 1315) overrides this scale
     via a :root injection so the whole theme's roundness scales together.
     Circles (50%) and intentional 0-resets stay literal — they must not scale.
     Usages carry a fallback (var(--catwalk-radius-sm, 4px)) so a stylesheet
     loaded without this file still renders identically. */
  --catwalk-radius-xs: 2px;
  --catwalk-radius-sm: 4px;
  --catwalk-radius-md: 8px;
  --catwalk-radius-lg: 12px;
  --catwalk-radius-xl: 20px;
  --catwalk-radius-pill: 999px;
  --catwalk-radius-circle: 50%;
  /* Product-card corners (TASK 1334 / D3). SHARP by default (0) so the catwalk
     default look is unchanged; the admin "rounded"/"pill" modes raise it via
     the :root injection so the product card visibly follows the roundness. */
  --catwalk-radius-card: 0;

  /* Transitions — spesifik property'ler ile (all layout reflow yaratır) */
  --catwalk-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  --catwalk-transition-fast: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;

  /* ==========================================================================
     4. EXTENDED TOKENS & MODULE ALIASES
     Derived from semantic tokens above. Provides module-specific naming.
     ========================================================================== */

  /* --- 4a. Missing RGB Values --- */
  --catwalk-black-rgb: 0, 0, 0;
  --catwalk-text-primary-rgb: var(
    --color-secondary-rgb
  ); /* For rgba() in search overlay etc. */
  --catwalk-primary-hover-rgb: 250, 115, 196;
  --catwalk-success-rgb: 212, 237, 218; /* #d4edda decomposed */

  /* --- 4b. Backgrounds --- */
  --catwalk-bg-footer: var(--color-secondary-base);
  --catwalk-bg-product: color-mix(in srgb, var(--color-secondary-base), white 93%);
  --catwalk-bg-primary-gradient-start: var(--color-primary-soft);
  --catwalk-bg-primary-gradient-end: var(--color-bg-base);

  /* --- 4c. Borders --- */
  --catwalk-border-primary: var(--color-primary-border);
  --catwalk-info-border: #b8daff; /* Bootstrap info-border equivalent */

  /* --- 4d. Font Aliases --- */
  --catwalk-font: var(--catwalk-font-main);
  --font-main: var(
    --catwalk-font-main
  ); /* Legacy shorthand used in components */

  /* --- 4e. Cart Module --- */
  --catwalk-cart-border: var(--catwalk-border);
  --catwalk-cart-bg-light: var(--catwalk-bg-primary-light);
  --catwalk-cart-text-secondary: var(--catwalk-text-secondary);
  --catwalk-cart-primary: var(--catwalk-primary);
  --catwalk-cart-primary-hover: var(--catwalk-primary-hover);
  --catwalk-cart-text: var(--catwalk-text-primary);
  --catwalk-cart-step-inactive: var(--catwalk-border-dark);

  /* --- 4f. Checkout / Cart Steps --- */
  --catwalk-step-active: var(--catwalk-primary);
  --catwalk-step-inactive: var(--catwalk-border-dark);
  --catwalk-step-text: var(--catwalk-text-primary);

  /* --- 4g. Status Badge Colors --- */
  --catwalk-status-purple-bg: #ede9fe;
  --catwalk-status-purple-text: #6b21a8;
  --catwalk-status-purple-border: #c4b5fd;
  --catwalk-status-blue-border: #90caf9;

  /* --- 4h. Compare Module ---
     Derived from primary + blue shift for visual distinction.
     Primary pink → purple-ish, primary orange → blue-ish, etc.
  */
  --catwalk-compare: color-mix(in srgb, var(--color-primary-base), blue 40%);
  --catwalk-compare-hover: color-mix(
    in srgb,
    var(--catwalk-compare),
    black 12%
  );
  --catwalk-compare-light: color-mix(
    in srgb,
    var(--catwalk-compare),
    white 40%
  );
}

/* --- catwalk-main.css --- */
/*
 * CatWalk Theme - Main Stylesheet
 * Version: 1.0.0
 * Based on: https://catwalk.axiomthemes.com/womens-fashion/
 */

/* ============================================
   CSS VARIABLES - EXTENDED
   (Core variables are in catwalk-variables.css)
   ============================================ */
:root {
  /* Cart Module Variables */
  --catwalk-cart-primary: var(--catwalk-primary);
  --catwalk-cart-primary-hover: var(--catwalk-primary-hover);
  --catwalk-cart-bg-light: var(--catwalk-bg-primary-light);
  --catwalk-cart-text: var(--catwalk-text-primary);
  --catwalk-cart-remove: var(--catwalk-error-text);

  /* Step Indicator Variables (Cart & Checkout) */
  --catwalk-step-active: var(--catwalk-primary);
  --catwalk-step-inactive: var(--catwalk-secondary);
  --catwalk-step-text: var(--catwalk-text-white);
}

/* ============================================
   SKIP NAVIGATION LINK (WCAG 2.4.1)
   ============================================ */
.catwalk-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 99999;
  padding: 12px 24px;
  background: var(--catwalk-secondary);
  color: var(--catwalk-text-white);
  font-family: var(--catwalk-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom-right-radius: 4px;
  transition: top 0.2s ease;
}

.catwalk-skip-link:focus {
  top: 0;
  outline: 3px solid var(--catwalk-primary);
  outline-offset: 2px;
}

.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ============================================
   TYPOGRAPHY - Futura PT
   ============================================ */
body {
  font-family:
    "Jost",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 18px;
  /* CatWalk uses 18px body text */
  font-weight: 400;
  line-height: 1.6;
  color: var(--catwalk-text-secondary);
  background-color: var(--catwalk-bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Jost", sans-serif;
  color: var(--catwalk-text-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
  font-weight: 700;
}

h2 {
  font-size: 1.875rem;
  font-weight: 600;
}

h3 {
  font-size: 1.75rem;
  font-weight: 500;
}

h4 {
  font-size: 1.5rem;
  font-weight: 500;
}

h5 {
  font-size: 1.25rem;
  font-weight: 400;
}

h6 {
  font-size: 1rem;
  font-weight: 400;
}

p {
  margin-bottom: 1rem;
}

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

a:hover {
  color: var(--catwalk-primary);
  text-decoration: none !important;
}

/* ============================================
   BUTTONS - CatWalk Style
   ============================================ */
.btn-catwalk {
  display: inline-block;
  padding: 12px 32px;
  background-color: var(--catwalk-primary);
  color: var(--catwalk-text-white);
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: var(--catwalk-transition);
}

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

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

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

/* ============================================
   CONTAINER & GRID
   ============================================ */
.catwalk-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.catwalk-container-fluid {
  width: 100%;
  padding: 0 20px;
}

.catwalk-grid {
  display: grid;
  gap: 30px;
}

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

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

.catwalk-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive Grid */
@media (max-width: 1024px) {
  .catwalk-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .catwalk-grid-4,
  .catwalk-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .catwalk-grid-4,
  .catwalk-grid-3,
  .catwalk-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

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

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

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

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

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

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

.bg-dark {
  background-color: var(--catwalk-bg-footer) !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.5rem !important;
}

.mt-2 {
  margin-top: 1rem !important;
}

.mt-3 {
  margin-top: 1.5rem !important;
}

.mt-4 {
  margin-top: 2rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 1rem !important;
}

.mb-3 {
  margin-bottom: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 2rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.5rem !important;
}

.pt-2 {
  padding-top: 1rem !important;
}

.pt-3 {
  padding-top: 1.5rem !important;
}

.pt-4 {
  padding-top: 2rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 1rem !important;
}

.pb-3 {
  padding-bottom: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 2rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

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

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

.fade-in {
  animation: fadeIn 0.5s ease;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease;
}

.slide-in-right {
  animation: slideInRight 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-up,
  .slide-in-right {
    animation: none;
  }

  .ri-spin {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
  box-sizing: border-box;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--catwalk-primary);
  outline-offset: 2px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
/* CatWalk Select2 Theme Override */
/* Select2 Container */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--catwalk-border) !important;
  border-radius: 0 !important;
  min-height: 48px !important;
  padding: 6px 12px !important;
  background: var(--catwalk-bg-main) !important;
  transition: var(--catwalk-transition) !important;
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
  border-color: var(--catwalk-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus
  .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open
  .select2-selection--multiple {
  border-color: var(--catwalk-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--catwalk-primary-rgb), 0.1) !important;
}

/* Single Select Arrow */
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 46px !important;
  right: 10px !important;
  border: none !important;
}

/* Mobile Sidebar Styles */
@media (max-width: 991px) {
  .catwalk-sidebar-wrapper {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100dvh;
    background: var(--catwalk-bg-main);
    z-index: 1050;
    transition: 0.3s;
    box-shadow: var(--catwalk-shadow-md);
    overflow-y: auto;
    padding-top: 20px;
  }

  .catwalk-sidebar-wrapper.active {
    left: 0;
  }

  .catwalk-mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }

  .catwalk-mobile-menu-overlay.active {
    display: block;
  }

  .mobile-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #555;
    cursor: pointer;
    z-index: 1051;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--catwalk-bg-main);
    border: 1px solid var(--catwalk-primary);
    color: var(--catwalk-primary);
    padding: 8px 15px;
    border-radius: var(--catwalk-radius-sm, 4px);
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: 500;
    transition: var(--catwalk-transition);
  }

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

@media (min-width: 992px) {
  .mobile-menu-btn,
  .mobile-close-btn,
  .catwalk-mobile-menu-overlay {
    display: none;
  }
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 34px !important;
  color: var(--catwalk-text-primary) !important;
  padding-left: 0 !important;
}

/* Multiple Select Tags */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: var(--catwalk-bg-primary-light) !important;
  border: 1px solid var(--catwalk-border-primary) !important;
  border-radius: 0 !important;
  color: var(--catwalk-text-primary) !important;
  padding: 4px 10px !important;
  margin: 4px 4px 0 0 !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: var(--catwalk-primary) !important;
  margin-right: 6px !important;
  font-size: 16px !important;
  border-right: none !important;
  /* Remove line */
  padding-right: 0 !important;
  float: none !important;
  /* Remove float */
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  color: var(--catwalk-error-text) !important;
  background: transparent !important;
}

/* Dropdown */
.select2-dropdown {
  border: 1px solid var(--catwalk-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--catwalk-shadow-md) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--catwalk-border) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: var(--catwalk-primary) !important;
  outline: none !important;
}

/* Dropdown Options */
.select2-container--default .select2-results__option {
  padding: 10px 12px !important;
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: var(--catwalk-bg-primary-light) !important;
  color: var(--catwalk-text-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--catwalk-primary) !important;
  color: var(--catwalk-text-white) !important;
}

/* Placeholder */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__placeholder,
.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--catwalk-text-muted) !important;
}

/* ============================================
   Layout stability (Website Specification: scrollbar-gutter)
   Kaydırma çubuğu için yer her zaman rezerve edilir; içerik taşan/taşmayan
   sayfalar arası yatay layout shift (CLS) önlenir.
   ============================================ */
html {
  scrollbar-gutter: stable;
}

/* Loading Animation */
@keyframes ri-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.ri-spin {
  -webkit-animation: ri-spin 2s infinite linear;
  animation: ri-spin 2s infinite linear;
  display: inline-block;
}
/* Footer Language Switcher */
.footer-bottom-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* A11y (Lighthouse color-contrast): footer koyu zemin (#121313) üzerinde ikincil
   metin #666 → 3.24:1 (yetersiz). Değişkeni SADECE footer scope'unda #909090'a
   çekerek copyright/powered-by/newsletter-privacy hepsini 4.5:1+ (~5.9:1) yapar;
   global #666 (açık zeminlerde geçerli) değişmez. */
.catwalk-footer {
  --catwalk-text-secondary: #909090;
}

.footer-bottom-content > .footer-copyright {
  justify-self: start;
}

.footer-bottom-content > .footer-powered-by {
  justify-self: center;
  text-align: center;
  margin: 0;
  color: var(--catwalk-text-secondary);
  font-size: 14px;
}

.footer-bottom-content > .footer-language-switcher {
  justify-self: end;
}

.footer-bottom .footer-powered-by .powered-by-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.footer-bottom .footer-powered-by .powered-by-link:hover,
.footer-bottom .footer-powered-by .powered-by-link:focus {
  color: var(--catwalk-primary);
}

.footer-language-switcher {
  position: relative;
}

.language-dropdown {
  position: relative;
}

.language-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(var(--color-bg-rgb), 0.3);
  color: inherit;
  padding: 0.5rem 1rem;
  border-radius: var(--catwalk-radius-sm, 4px);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.language-toggle:hover {
  background: rgba(var(--color-bg-rgb), 0.1);
  border-color: rgba(var(--color-bg-rgb), 0.5);
}

.language-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--catwalk-bg-main);
  border-radius: var(--catwalk-radius-md, 8px);
  box-shadow: var(--catwalk-shadow-lg);
  min-width: 150px;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  display: none;
  list-style: none;
  z-index: 100;
}

.language-menu.active {
  display: block;
}

.language-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--catwalk-text-primary);
  text-decoration: none;
  transition: background 0.2s ease;
}

.language-menu li a:hover,
.language-menu li.active a {
  background: var(--catwalk-bg-light);
}

.language-menu li.active a {
  font-weight: 600;
  color: var(--catwalk-primary);
}

/* Language Selection Popup Modal */
.language-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--catwalk-black-rgb), 0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.language-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.language-popup {
  background: var(--catwalk-bg-main);
  border-radius: var(--catwalk-radius-lg, 12px);
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.language-popup-overlay.active .language-popup {
  transform: translateY(0);
}

.language-popup h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--catwalk-text-primary);
}

.language-popup p {
  color: var(--catwalk-text-secondary);
  margin-bottom: 1.5rem;
}

.language-popup-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.language-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border: 2px solid var(--catwalk-border-light);
  border-radius: var(--catwalk-radius-md, 8px);
  background: var(--catwalk-bg-main);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.language-popup-btn:hover {
  border-color: var(--catwalk-primary);
  background: var(--catwalk-bg-primary-light);
}

.language-popup-btn .flag-icon {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .footer-bottom-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-bottom-content > .footer-copyright,
  .footer-bottom-content > .footer-powered-by,
  .footer-bottom-content > .footer-language-switcher {
    justify-self: center;
  }
}

/* ============================================
   Cross-document View Transitions (Website Specification: view-transitions)
   Sayfalar arası geçişlere yumuşak animasyon. Progressive enhancement —
   desteklemeyen tarayıcılar yok sayar; prefers-reduced-motion'a saygılı.
   ============================================ */
@view-transition {
  navigation: auto;
}

/* Reduced-motion: geçiş animasyonlarını kapat (geçerli pseudo-element override). */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- catwalk-components.css --- */
/*
 * CatWalk Theme - Components CSS
 * Clean, organized component styles
 * Version: 1.0.0
 */

/* ============================================
   GLOBAL LINK RESET FOR BUTTONS
   ============================================ */
a[class*="btn"],
a[class*="catwalk-action"],
a.catwalk-listing-cart-btn,
a.catwalk-related-card-title {
  text-decoration: none !important;
}

a[class*="btn"]:hover,
a[class*="btn"]:focus,
a[class*="catwalk-action"]:hover,
a[class*="catwalk-action"]:focus {
  text-decoration: none !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-catwalk {
  display: inline-block;
  padding: 14px 40px;
  background: var(--catwalk-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-catwalk:hover {
  background: var(--catwalk-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}

/* ============================================
   NAVIGATION
   ============================================ */
.catwalk-nav {
  --catwalk-nav-gutter: clamp(20px, 2.2vw, 40px);
  background: #fff;
  border-bottom: 1px solid var(--catwalk-border);
  padding: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "categories logo icons";
  align-items: center;
  position: relative;
  /* Exact from reference site */
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 10px var(--catwalk-nav-gutter) !important;
  box-sizing: border-box;
}

.catwalk-nav .nav-left {
  grid-area: categories;
}

.catwalk-nav .nav-center {
  grid-area: logo;
}

.catwalk-nav .nav-right {
  grid-area: icons;
}

.catwalk-nav--navbar_v2 .nav-wrapper {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo icons"
    "categories categories";
  row-gap: 8px;
  max-width: none;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

.catwalk-nav--navbar_v2 .nav-center {
  justify-self: start;
}

.catwalk-nav--navbar_v2 .nav-right {
  justify-self: end;
}

.catwalk-nav--navbar_v2 .nav-left {
  position: relative;
  justify-self: stretch;
  margin: 0;
  padding: 0 0;
  background: transparent;
}

.catwalk-nav--navbar_v2 .nav-left::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(-1 * var(--catwalk-nav-gutter));
  right: calc(-1 * var(--catwalk-nav-gutter));
  background: var(--catwalk-bg-light);
  border-top: 1px solid var(--catwalk-border);
  pointer-events: none;
}

.catwalk-nav--navbar_v2 .nav-left .nav-menu {
  position: relative;
  /* No z-index here: position:relative already paints the menu above the
     .nav-left::before strip via tree order. Adding z-index would create a
     stacking context that traps the dropdown's z-index:1001, dropping it
     behind the hero/slider below (dimmed + unclickable). */
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.catwalk-nav--navbar_v3 .nav-wrapper {
  grid-template-columns: 1fr;
  grid-template-areas:
    "icons"
    "logo"
    "categories";
  row-gap: 0;
  max-width: none;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.catwalk-nav--navbar_v3 .nav-right {
  position: relative;
  width: 100%;
  background: transparent;
  padding: 8px 0;
  margin: 0;
  justify-self: stretch;
  box-sizing: border-box;
}

.catwalk-nav--navbar_v3 .nav-right::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(-1 * var(--catwalk-nav-gutter));
  right: calc(-1 * var(--catwalk-nav-gutter));
  background: var(--catwalk-secondary);
  pointer-events: none;
}

.catwalk-nav--navbar_v3 .nav-right .nav-icons {
  position: relative;
  /* No z-index here: see .nav-menu above. position:relative alone paints the
     icons above the .nav-right::before topbar strip via tree order; a z-index
     would create a stacking context that traps the cart/language/profile
     dropdowns (z-index:1001/1002) behind the hero/slider below (BUG 1480). */
  justify-content: flex-end;
}

.catwalk-nav--navbar_v3 .nav-right .icon-link,
.catwalk-nav--navbar_v3 .nav-right #compare > a,
.catwalk-nav--navbar_v3 .nav-right .dealer-login-btn {
  color: #fff;
  font-size: 18px !important;
}

.catwalk-nav--navbar_v3 .nav-right .icon-link:hover,
.catwalk-nav--navbar_v3 .nav-right #compare > a:hover,
.catwalk-nav--navbar_v3 .nav-right .dealer-login-btn:hover {
  color: var(--catwalk-primary);
}

.catwalk-nav--navbar_v3 .nav-center {
  justify-self: center;
  margin: 18px 0;
}

.catwalk-nav--navbar_v3 .nav-left {
  position: relative;
  justify-self: stretch;
  margin: 0;
  padding: 0 0;
  background: transparent;
  box-sizing: border-box;
}

.catwalk-nav--navbar_v3 .nav-left::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(-1 * var(--catwalk-nav-gutter));
  right: calc(-1 * var(--catwalk-nav-gutter));
  background: var(--catwalk-bg-light);
  border-top: 1px solid var(--catwalk-border);
  pointer-events: none;
}

.catwalk-nav--navbar_v3 .nav-left .nav-menu {
  position: relative;
  /* No z-index here: see navbar_v2 .nav-menu above. A stacking context on the
     menu would trap the dropdown's z-index:1001 behind the hero/slider. */
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
}

.catwalk-nav--navbar_v4 .nav-wrapper {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo categories icons";
  column-gap: 24px;
}

.catwalk-nav--navbar_v4 .nav-center {
  justify-self: start;
}

.catwalk-nav--navbar_v4 .nav-left {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  padding: 8px 20px 8px 0;
  border-right: 1px solid var(--catwalk-border);
}

.catwalk-nav--navbar_v4 .nav-right {
  justify-self: end;
}

/* Left Menu - Categories */
.nav-left {
  justify-self: start;
}

.nav-left .nav-menu {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu li {
  position: relative;
}

.nav-menu > li > a {
  color: var(--catwalk-text-primary);
  font-family: "Jost", sans-serif;
  font-size: 17px;
  font-weight: 500;
  /* Reference uses 500, not 400 */
  text-transform: none;
  letter-spacing: normal;
  line-height: 25.5px;
  /* From reference */
  padding: 13px 15px;
  /* From reference - creates spacing */
  transition: color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Has-dropdown chevron indicator (top level) — Remix icon (symmetric, optically centered) */
.nav-menu > li.has-dropdown > a::after {
  content: "\ea4e"; /* ri-arrow-down-s-line */
  font-family: "remixicon" !important;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: 0.6;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  flex-shrink: 0;
  border: 0;
  transform: translateY(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-menu > li.has-dropdown:hover > a::after,
.nav-menu > li.has-dropdown:focus-within > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

.btn-catwalk-outline {
  display: inline-block;
  padding: 12px 35px;
  background: transparent;
  color: var(--catwalk-primary);
  border: 2px solid var(--catwalk-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-catwalk-outline:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

.nav-menu a:hover {
  color: var(--catwalk-primary);
}

/* ============================================
   MULTI-LEVEL CATEGORY DROPDOWN
   - Level 1 (top): drops down from nav item
   - Level 2 (.nav-dropdown-nested): cascades to the right
   - Hover bridge prevents flicker between trigger and menu
   ============================================ */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--catwalk-border);
  min-width: 220px;
  max-width: 320px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 1001;
  pointer-events: none;
}

/* Hover bridge — invisible spacer that keeps dropdown alive
   while moving from trigger to dropdown content */
.nav-menu li.has-dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 1000;
  pointer-events: none;
}

.nav-menu li.has-dropdown:hover::before,
.nav-menu li.has-dropdown:focus-within::before {
  pointer-events: auto;
}

.nav-menu li:hover > .nav-dropdown,
.nav-menu li:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown li {
  position: relative;
  list-style: none;
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  color: var(--catwalk-text-primary);
  line-height: 1.4;
  white-space: normal;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    padding-left 0.15s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--catwalk-bg-light);
  color: var(--catwalk-primary);
  padding-left: 20px;
}

/* Right-cascade chevron for nested dropdown trigger — Remix icon */
.nav-dropdown li.has-dropdown > a::after {
  content: "\ea6e"; /* ri-arrow-right-s-line */
  font-family: "remixicon" !important;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.5;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  flex-shrink: 0;
  border: 0;
  transform: translateX(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-dropdown li.has-dropdown:hover > a::after,
.nav-dropdown li.has-dropdown:focus-within > a::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Nested dropdown — cascade to the right */
.nav-dropdown .nav-dropdown,
.nav-dropdown-nested {
  top: -7px !important;
  left: 100%;
  margin-left: 4px;
  transform: translateX(8px);
}

.nav-dropdown li:hover > .nav-dropdown,
.nav-dropdown li:focus-within > .nav-dropdown {
  transform: translateX(0);
}

/* Hover bridge for nested level — horizontal */
.nav-dropdown li.has-dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 12px;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}

.nav-dropdown li.has-dropdown:hover::before,
.nav-dropdown li.has-dropdown:focus-within::before {
  pointer-events: auto;
}

/* Reverse cascade direction when dropdown would overflow viewport edge.
   Applied by JS in nav.blade.php on mouseenter/focusin of nested triggers. */
.nav-dropdown .nav-dropdown.cascade-left,
.nav-dropdown-nested.cascade-left {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .nav-dropdown a,
  .nav-menu > li.has-dropdown > a::after,
  .nav-dropdown li.has-dropdown > a::after {
    transition:
      opacity 0.01s linear,
      visibility 0.01s linear,
      background 0.01s linear,
      color 0.01s linear;
  }

  .nav-dropdown,
  .nav-menu li:hover > .nav-dropdown,
  .nav-menu li:focus-within > .nav-dropdown,
  .nav-dropdown li:hover > .nav-dropdown,
  .nav-dropdown li:focus-within > .nav-dropdown {
    transform: none !important;
  }

  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible {
    padding-left: 16px;
  }
}

/* Center Logo - Absolutely centered */
.nav-center {
  justify-self: center;
}

.nav-center .logo {
  display: block;
}

.nav-center .logo img {
  max-height: 48px;
  max-width: min(260px, 42vw);
  width: auto;
  display: block;
}

/* Right Icons */
.nav-right {
  justify-self: end;
}

.nav-right .nav-icons {
  display: flex;
  gap: clamp(14px, 1.5vw, 25px);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.icon-link {
  color: var(--catwalk-text-primary);
  font-size: clamp(20px, 1.35vw, 24px);
  position: relative;
  transition: color 0.3s ease;
}

/* Reset browser default styles when icon-link is a <button> element */
button.icon-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Header language/currency dropdown.
   Kept in the main CSS bundle to prevent first-paint flash before footer scripts run. */
.catwalk-header-dropdown-wrapper {
  position: relative;
}

.catwalk-header-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  margin-top: 10px;
  background: #fff;
  border-radius: var(--catwalk-radius-sm, 4px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.catwalk-dropdown-hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transform: translateY(10px);
}

.catwalk-dropdown-hidden.active {
  display: block;
  opacity: 1;
  visibility: visible;
  max-height: 500px;
  padding: 10px 0;
  transform: translateY(0);
}

.catwalk-header-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 15px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.05);
  transform: rotate(45deg);
}

.catwalk-header-dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.catwalk-header-dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 15px;
  color: #151515;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.catwalk-header-dropdown li a:hover {
  background: var(--color-primary-soft);
  color: var(--catwalk-primary);
}

.catwalk-header-dropdown li.active a {
  background: var(--color-primary-soft);
  color: var(--catwalk-primary);
  font-weight: 600;
}

.active-check {
  color: var(--catwalk-primary);
  font-size: 16px;
}

.dropdown-section {
  padding: 5px 0;
}

.dropdown-header {
  margin: 0;
  padding: 5px 15px;
  color: var(--catwalk-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.dropdown-divider {
  height: 1px;
  margin: 5px 0;
  background: var(--catwalk-border);
}

/* Review form star rating — button reset + keyboard focus ring */
.rating button.star {
  background: none;
  border: none;
  padding: 0 1px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  float: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.rating button.star::before {
  content: "\f005";
  display: block;
  font-size: 14px;
  color: #818a91;
  transition: color 0.2s linear;
}
.rating-lg button.star::before {
  font-size: 18px;
}
.rating-xl button.star::before {
  font-size: 24px;
}
.rating button.star.voted::before {
  color: #ffcc00;
}
.rating button.star:focus-visible {
  outline: 2px solid var(--catwalk-primary, #d4a574);
  outline-offset: 2px;
  border-radius: var(--catwalk-radius-xs, 2px);
}

/* ============================================
   OFF-CANVAS MENU
   ============================================ */
.catwalk-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(
    100%
  ); /* right:-500px yerine — küçük viewportlarda güvenli */
  width: 100%;
  max-width: 450px;
  height: 100dvh; /* iOS Safari gesture bar için dvh */
  background: var(--catwalk-bg-primary-light);
  /* Reference Pink */
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
  /* Softer shadow */
  z-index: 2000;
  transition: right 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  /* Smoother bezier */
  overflow-y: auto;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
}

.catwalk-offcanvas.active {
  transform: translateX(0);
}

.catwalk-offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(253, 245, 249, 0.8);
  /* Light pink overlay effect */
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  backdrop-filter: blur(2px);
}

.catwalk-offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Header with Text Brand */
.offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
  /* More spacing */
}

.offcanvas-brand {
  font-family: "Didot", "Bodoni MT", serif;
  /* Elegant serif for CATWALK */
  font-size: 32px;
  letter-spacing: -0.5px;
  color: var(--catwalk-secondary);
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
}

.offcanvas-brand:hover {
  text-decoration: none;
  color: var(--catwalk-secondary);
}

/* Close Button (White Circle) */
.offcanvas-close-btn {
  background: #fff;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: var(--catwalk-radius-circle, 50%);
  font-size: 24px;
  color: var(--catwalk-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.offcanvas-close-btn:hover {
  transform: rotate(90deg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.offcanvas-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.offcanvas-section {
  margin-bottom: 40px;
}

/* Vertical Social Links with Text */
.offcanvas-social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 35px;
  /* Large spacing */
}

.offcanvas-social-links li a {
  display: flex;
  align-items: center;
  gap: 30px;
  /* Space between icon and text */
  font-size: 16px;
  color: var(--catwalk-secondary);
  font-weight: 500;
  font-family: var(--font-main);
  transition: all 0.3s ease;
  text-decoration: none;
}

.offcanvas-social-links li a i {
  font-size: 22px;
  width: 24px;
  text-align: center;
  display: inline-block;
}

.offcanvas-social-links li a:hover {
  color: var(--catwalk-primary);
  transform: translateX(10px);
}

/* Bottom Contact Info */
.offcanvas-contact {
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  /* Very subtle line */
  padding-top: 50px;
}

.contact-item-large {
  font-size: 22px;
  font-weight: 600;
  color: var(--catwalk-secondary);
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-main);
  letter-spacing: 0.5px;
}

.contact-email-large {
  color: var(--catwalk-text-secondary);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.3s ease;
  display: block;
}

.contact-email-large:hover {
  color: var(--catwalk-primary);
  text-decoration: none;
}

@media (max-width: 576px) {
  .catwalk-offcanvas {
    width: 100%;
    padding: 30px 25px;
  }

  .offcanvas-brand {
    font-size: 24px;
  }
}

.offcanvas-contact {
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 40px;
}

.contact-item-large {
  font-size: 24px;
  font-weight: 600;
  color: var(--catwalk-secondary);
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-main);
  letter-spacing: 1px;
}

.contact-email-large {
  color: var(--catwalk-text-secondary);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-email-large:hover {
  color: var(--catwalk-primary);
}

@media (max-width: 576px) {
  .catwalk-offcanvas {
    width: 320px;
    padding: 40px 30px;
  }
}

.icon-link:hover {
  color: var(--catwalk-primary);
}

/* Cart Count Badge (Pink!) */
.cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--catwalk-primary);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--catwalk-radius-circle, 50%);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive Nav - Switch to flexbox on mobile */
@media (min-width: 1280px) and (max-width: 1439px) {
  .catwalk-nav {
    --catwalk-nav-gutter: clamp(20px, 2.4vw, 36px);
  }

  .nav-menu > li > a {
    max-width: 180px;
    padding-right: 11px;
    padding-left: 11px;
    font-size: 15px;
  }

  .nav-right .nav-icons {
    gap: 14px;
  }

  .catwalk-nav--navbar_v4 .nav-wrapper {
    column-gap: 16px;
  }

  .catwalk-nav--navbar_v4 .nav-left {
    padding-right: 14px;
  }
}

@media (max-width: 1279px) {
  .catwalk-nav {
    --catwalk-nav-gutter: 20px;
  }

  .nav-wrapper {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px !important;
    min-height: 72px;
  }

  .nav-left .nav-menu {
    display: none;
  }

  /* Logo left-aligned on mobile (like reference theme) */
  .nav-center {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /* Left align logo on mobile */
  }

  .nav-right {
    flex-shrink: 0;
  }

  .nav-right .nav-icons {
    gap: 16px;
  }

  .icon-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .nav-wrapper {
    padding: 10px 16px !important;
    min-height: 64px;
  }

  .nav-center .logo img {
    max-width: min(210px, 48vw);
    max-height: 40px;
  }

  .nav-right .nav-icons {
    gap: 8px;
  }

  .icon-link {
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .nav-right .nav-icons #compare,
  .nav-right .nav-icons .catwalk-header-dropdown-wrapper {
    display: none !important;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.catwalk-footer {
  background: var(--catwalk-bg-footer);
  color: #fff;
}

.footer-features {
  background: rgba(255, 255, 255, 0.05);
  padding: 60px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}

.feature-item i {
  font-size: 32px;
  color: var(--catwalk-primary);
  margin-bottom: 15px;
}

.feature-item h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #fff;
}

.feature-item p {
  font-size: 14px;
  color: var(--catwalk-text-muted);
  margin: 0;
}

.footer-main {
  padding: 60px 0;
}

.footer-safe-checkout {
  padding: 0 0 28px;
}

.footer-safe-checkout-inner {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-safe-checkout-inner h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.footer-safe-checkout-inner img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.footer-column h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #fff;
}

.footer-column p {
  font-size: 14px;
  color: var(--catwalk-text-muted);
  line-height: 1.8;
  margin-bottom: 10px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.footer-column ul li a {
  color: var(--catwalk-text-muted);
  font-size: 14px;
  transition: color 0.3s ease;
}

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

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: var(--catwalk-radius-circle, 50%);
  transition: all 0.3s ease;
}

.social-icon:hover {
  background: var(--catwalk-primary);
  color: #fff;
  border-radius: var(--catwalk-radius-circle, 50%);
}

.newsletter-form {
  margin-top: 20px;
}

.input-group {
  display: flex;
  gap: 0;
  /* Remove gap to prevent wrapping */
  flex-wrap: nowrap;
  /* Prevent wrapping */
}

.input-group input {
  flex: 1;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 14px;
  border-radius: 0;
}

.input-group input::placeholder {
  color: var(--catwalk-text-muted);
}

.newsletter-btn {
  width: 50px;
  height: 46px;
  background: var(--catwalk-primary);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.newsletter-btn:hover {
  background: var(--catwalk-primary-hover);
}

/* Footer Contact Links */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact .address {
  font-size: 14px;
  color: var(--catwalk-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.footer-contact .contact-link {
  color: #fff;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: all 0.3s;
}

.footer-contact .contact-link:hover {
  color: var(--catwalk-primary);
  text-decoration-color: var(--catwalk-primary);
}

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

.footer-links li {
  margin-bottom: 12px;
}

.footer-links li a {
  color: var(--catwalk-text-muted);
  font-size: 14px;
  transition: all 0.3s;
}

.footer-links li a:hover {
  color: #fff;
}

/* Newsletter Enhanced */
.newsletter-text {
  font-size: 14px;
  color: var(--catwalk-text-muted);
  margin-bottom: 15px;
}

.newsletter-input-group {
  display: flex;
  flex-wrap: nowrap;
}

.newsletter-input-group input {
  flex: 1;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 14px;
  border-right: none;
}

.newsletter-input-group input::placeholder {
  color: var(--catwalk-text-secondary);
}

.newsletter-input-group .newsletter-btn {
  width: 50px;
  height: auto;
  background: var(--catwalk-primary);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter-input-group .newsletter-btn:hover {
  background: var(--catwalk-primary-hover);
}

/* Newsletter Privacy Checkbox */
.newsletter-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--catwalk-text-secondary);
  cursor: pointer;
}

.newsletter-privacy input {
  width: 14px;
  height: 14px;
  accent-color: var(--catwalk-primary);
}

.newsletter-privacy a {
  color: var(--catwalk-primary);
  text-decoration: underline;
}

/* Footer Socials List */
.footer-socials-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-socials-list a {
  color: var(--catwalk-text-muted);
  font-size: 14px;
  transition: color 0.3s;
}

.footer-socials-list a:hover {
  color: #fff;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--catwalk-text-primary);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 999;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

/* Footer Bottom (Copyright) */
.footer-bottom {
  padding: 25px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.footer-bottom p {
  color: var(--catwalk-text-secondary);
  font-size: 14px;
  margin: 0;
}

/* Responsive Footer */
@media (max-width: 992px) {
  .features-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer-features {
    padding: 40px 0;
  }

  .footer-main {
    padding: 40px 0;
  }
}

@media (max-width: 576px) {
  .features-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-features {
    padding: 32px 0;
  }

  .footer-main {
    padding: 32px 0;
  }

  .footer-safe-checkout-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* ============================================
   HOMEPAGE
   ============================================ */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--catwalk-bg-primary-gradient-start) 0%,
    var(--catwalk-bg-primary-gradient-end) 100%
  );
  padding: 120px 0;
  text-align: center;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--catwalk-text-primary);
}

.hero-content p {
  font-size: 1.2rem;
  color: var(--catwalk-text-secondary);
  margin-bottom: 30px;
}

.products-section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 500;
  color: var(--catwalk-text-primary);
}

/* Product Card - Clean CatWalk Style */
.product-card {
  position: relative;
  transition: transform 0.3s ease;
  margin-bottom: 30px;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  background-color: var(--catwalk-bg-light) !important;
  /* Force grey background */
  padding: 20px;
  margin-bottom: 15px;
  overflow: hidden;
  height: 380px;
  /* Standardize height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
  /* Subtle zoom on hover */
}

/* Wishlist Button */
.wishlist-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #fff;
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.wishlist-btn:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

/* Quick View Overlay (Bottom Bar) */
.product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(23, 21, 23, 0.9);
  /* Dark background */
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 2;
}

.product-card:hover .product-overlay {
  transform: translateY(0);
}

.quick-view-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  padding: 15px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  display: block;
}

.quick-view-btn:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

/* Sale Badge */
.sale-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--catwalk-primary);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 2;
}

/* Price Wrapper */
.product-price-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.old-price {
  text-decoration: line-through;
  color: var(--catwalk-text-muted);
  font-size: 14px;
}

/* Product Info */
.product-info {
  text-align: center;
}

.product-info h3 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 8px;
}

.product-info h3 a {
  color: var(--catwalk-text-primary);
  transition: color 0.3s ease;
}

.product-info h3 a:hover {
  color: var(--catwalk-primary);
}

.product-price {
  font-size: 18px;
  font-weight: 500;
  color: var(--catwalk-text-primary);
}

/* ============================================
   FORMS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--catwalk-border);
  background: #fff;
  font-size: 14px;
  color: var(--catwalk-text-primary);
  transition: border-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--catwalk-primary);
  outline: none;
}

/* ============================================
   BADGES
   ============================================ */
.badge-pink {
  background: var(--catwalk-primary);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 50px;
}

.badge-sale {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--catwalk-primary);
  color: #fff;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--catwalk-primary);
  border-radius: var(--catwalk-radius-circle, 50%);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */
.alert-success {
  background: var(--catwalk-success-bg);
  border: 1px solid var(--catwalk-success-border);
  color: var(--catwalk-success-text);
  padding: 15px;
  margin-bottom: 20px;
}

.alert-error {
  background: var(--catwalk-error-bg);
  border: 1px solid var(--catwalk-error-border);
  color: var(--catwalk-error-text);
  padding: 15px;
  margin-bottom: 20px;
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px !important;
  }
}

.modal-content {
  background: #fff;
  /* padding: 30px; */
  /* Bootstrap handles padding in body/header usually */
  position: relative;
  border: none;
  /* Clean look */
  border-radius: 0;
  /* Square edges for CatWalk theme */
  width: 100%;
  /* Ensure content takes full width of dialog */
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--catwalk-text-secondary);
}

.modal-close:hover {
  color: var(--catwalk-text-primary);
}

/* ============================================
   SIDEBAR & FILTERS (CatWalk Minimal)
   ============================================ */
.filter-sidebar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.filter-group {
  border-bottom: 1px solid var(--catwalk-border);
  /* Keep separator */
  margin-bottom: 30px;
  padding-bottom: 25px;
}

.filter-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--catwalk-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

/* Category List */
.filter-options ul li a {
  color: var(--catwalk-text-secondary);
  font-size: 14px;
  transition: all 0.2s ease;
  position: relative;
  padding-left: 0;
}

.filter-options ul li a:hover,
.filter-options ul li a.active {
  color: var(--catwalk-primary);
  padding-left: 5px;
  /* Slight movement */
}

/* Checkboxes */
.filter-label {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--catwalk-text-secondary);
  transition: color 0.2s;
}

.filter-label:hover {
  color: var(--catwalk-primary);
}

.filter-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--catwalk-border-dark);
  margin-right: 12px;
  position: relative;
  transition: all 0.2s ease;
}

.filter-checkbox:checked {
  background-color: var(--catwalk-primary);
  border-color: var(--catwalk-primary);
}

.filter-checkbox:checked::after {
  content: "✓";
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Color Swatches (If implemented via class) */
.color-swatch-input {
  display: none;
}

.color-swatch-label {
  width: 25px;
  height: 25px;
  border-radius: var(--catwalk-radius-circle, 50%);
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid var(--catwalk-border);
  position: relative;
}

.color-swatch-input:checked + .color-swatch-label::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 1px solid var(--catwalk-text-primary);
  border-radius: var(--catwalk-radius-circle, 50%);
}

/* Shop Banner */
.shop-banner {
  background: linear-gradient(135deg, #f7adc2 0%, #eeaeca 100%);
  padding: 60px 0;
  text-align: center;
  color: white;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

.shop-banner h1 {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ============================================
   PRODUCT CARD HOVER (Reference Style)
   ============================================ */
.product-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
  /* Invisible border by default to prevent layout shift */
  padding-bottom: 50px;
  /* Space for button sliding up */
  background: #fff;
  overflow: hidden;
  /* Contain the button */
}

/* On Hover: Pink Border & Shadow */
.product-card:hover {
  border-color: #f7adc2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
  z-index: 2;
}

/* Button: Initially Hidden/Lowered */
.select-options-btn {
  position: absolute;
  bottom: -50px;
  /* Hidden below */
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  border-radius: 0;
  /* Full width look usually implies squared off or container fitting */
  z-index: 3;
}

/* Show Button on Hover */
.product-card:hover .select-options-btn {
  display: block !important;
  /* Override inline display:none if present */
  bottom: 0px;
  opacity: 1;
}

/* Adjust Product Info to avoid overlap if needed */
.product-info {
  position: relative;
  background: #fff;
  z-index: 4;
  transition: transform 0.3s;
}

/* Optional: Slide info up slightly or keep it static? 
   Reference image has button OVER or replacing content? 
   Let's just slide button up over bottom padding. */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Card Typography (Overrides) */
.product-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-bottom: 0.25rem !important;
}

.old-price {
  text-decoration: line-through;
  font-size: 13px !important;
  color: #6c757d;
  margin-right: 0.5rem;
}

.product-price {
  font-size: 16px !important;
  font-weight: bold !important;
  color: var(--catwalk-text-primary) !important;
}

.select-options-btn {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 0 !important;
  border: none !important;
  background-color: var(--catwalk-primary) !important;
  text-transform: uppercase;
  color: #fff !important;
}

/* ============================================
   LISTING CARD SPECIFIC STYLES
   ============================================ */
.listing-card .product-image {
  position: relative;
  overflow: hidden;
}

/* Quick View Bar (Dark) - Over image bottom */
.listing-card .product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(34, 34, 34, 0.95);
  padding: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.listing-card:hover .product-overlay {
  transform: translateY(0);
}

.listing-card .quick-view-btn {
  color: #fff;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.listing-card .quick-view-btn:hover {
  color: var(--catwalk-primary);
}

/* ==========================================================================
   UPDATED PRODUCT CARD (Listing Page)
   ========================================================================== */

/* Card Container */
.product-card {
  transition: all 0.3s ease;
  padding-bottom: 10px;
  background: #fff;
}

.product-card:hover {
  /* Intentionally no visual changes on hover for this old class */
  cursor: pointer;
}

/* Image Wrapper */
.product-image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Flag Icons */
.flag-icon {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: var(--catwalk-radius-xs, 2px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-image-wrapper img {
  transition: transform 0.5s ease;
}

.product-card:hover .product-image-wrapper img {
  transform: scale(1.05);
}

/* Quick View Overlay (Eye Icon) */
.quick-view-overlay {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 5;
}

.product-card:hover .quick-view-overlay {
  opacity: 1;
  visibility: visible;
}

.quick-view-trigger {
  width: 45px;
  height: 45px;
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--catwalk-text-primary);
  background: #fff;
  border: none;
  transition: all 0.2s;
}

.quick-view-trigger:hover {
  background: var(--catwalk-primary, #ff6f61);
  color: #fff;
}

/* Product Info */
.product-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--catwalk-text-primary);
  margin-bottom: 5px;
  text-transform: capitalize;
}

.product-price {
  font-size: 14px;
  color: var(--catwalk-text-secondary);
}

.product-price .current-price {
  color: var(--catwalk-text-primary);
  font-weight: 600;
}

/* Action Button (Bag Icon) */
.hover-action-btn {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.3s ease;
}

.product-card:hover .hover-action-btn {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: var(--catwalk-radius-circle, 50%);
  /* Optional circle bg, or just icon */
  color: var(--catwalk-text-primary);
  font-size: 16px;
  text-decoration: none;
  transition: color 0.2s;
}

.btn-action:hover {
  color: var(--catwalk-primary, #ff6f61);
}

/* ==========================================================================
   SHOP BANNER - Theme Pink Background (Matches /shop/ reference)
   ========================================================================== */
.shop-banner {
  background: var(--catwalk-primary);
  padding: 60px 0;
  margin-bottom: 40px;
}

.shop-banner h1 {
  font-family: var(--catwalk-font);
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.shop-banner .breadcrumb {
  justify-content: center;
  padding-left: 0;
  text-align: center;
  display: inline-flex !important;
  /* Make breadcrumb only as wide as its content for true centering */
  margin: 0 auto;
  /* Center the inline-flex element */
}

/* Remove Bootstrap's default padding from breadcrumb items to prevent double padding */
.shop-banner .breadcrumb-item {
  padding-left: 0;
  font-size: 13px !important;
  /* Uniform font-size to fix vertical misalignment */
  display: flex !important;
  /* Flex to allow vertical centering */
  align-items: center !important;
  /* Center items vertically */
}

.shop-banner .breadcrumb-item a,
.shop-banner .breadcrumb-item.active {
  color: #fff !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shop-banner .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.7);
  padding: 0 8px;
  /* Equal padding on both sides of separator */
}

/* ==========================================================================
   LOAD MORE BUTTON (Matches /shop/ reference - pink solid)
   ========================================================================== */
.load-more-container {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.btn-catwalk-outline,
#load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--catwalk-primary);
  border: none;
  border-radius: 0;
  color: #fff;
  padding: 17px 54px;
  font-family: var(--catwalk-font);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-catwalk-outline:hover,
#load-more-btn:hover {
  background: var(--catwalk-dark);
  color: #fff;
}

#load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   RESPONSIVE UTILITIES (Restored)
   ========================================================================== */
.mobile-filters {
  display: block;
}

.desktop-filters {
  display: none;
}

@media (min-width: 992px) {
  /* Changed to 992px (lg) to match bootstrap grid used in listing */
  .mobile-filters {
    display: none;
  }

  .desktop-filters {
    display: block;
  }
}

/* ============================================================================
   CATWALK HOMEPAGE PRODUCT CARD (Matches "New Arrivals" Section)
   ============================================================================ */

/* Base Variables */

/* Card Container */
.catwalk-product-card {
  position: relative;
  margin-bottom: 35px;
}

/* Image Container */
.catwalk-product-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--catwalk-product-aspect, 1 / 1);
  background: var(--catwalk-bg-light);
  /* Follows the admin corner-roundness mode (TASK 1334 / D3). Default 0 (sharp)
     keeps the catwalk look unchanged; rounded/pill round the card image. */
  border-radius: var(--catwalk-radius-card, 0);
}

.catwalk-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Gallery Dots (Listeleme sayfalar� i�in) */
.product-gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  pointer-events: auto;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--catwalk-radius-circle, 50%);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-dot.active {
  background: var(--catwalk-primary);
  border-color: var(--catwalk-primary);
  width: 10px;
  height: 10px;
}

.gallery-dot:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

/* Gallery Navigation Arrows (Anasayfa i�in) */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gallery-arrow i {
  font-size: 20px;
  color: var(--catwalk-text-primary);
  pointer-events: none;
  /* �kona t�klan�nca event parent button'a gitsin */
}

.gallery-arrow-prev {
  left: 8px;
}

.gallery-arrow-next {
  right: 8px;
}

/* Hover'da oklar� g�ster */
.catwalk-product-image:hover .gallery-arrow,
.catwalk-listing-image:hover .gallery-arrow,
.home-product-image-wrapper:hover .gallery-arrow {
  opacity: 1;
}

.gallery-arrow:hover {
  background: var(--catwalk-primary);
  transform: translateY(-50%) scale(1.1);
}

.gallery-arrow:hover i {
  color: #fff;
}

/* �lk/son g�rseldeyken ilgili oku gizle */
.gallery-arrow.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.catwalk-product-card:hover .catwalk-product-image img {
  transform: scale(1.05);
}

/* Wishlist Button (Heart - Top Right) */
.catwalk-wishlist-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: #fff;
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--catwalk-dark);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 5;
}

.catwalk-product-card:hover .catwalk-wishlist-btn {
  opacity: 1;
  transform: translateY(0);
}

.catwalk-wishlist-btn:hover {
  color: var(--catwalk-primary);
}

.catwalk-wishlist-btn:hover i {
  transform: scale(1.1);
}

/* Quick View Overlay */
.catwalk-quick-view-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 5;
}

.catwalk-product-card:hover .catwalk-quick-view-overlay,
.catwalk-product-card:focus-within .catwalk-quick-view-overlay {
  opacity: 1;
  transform: translateY(0);
}

.catwalk-quick-view-btn {
  background: #fff;
  border: 1px solid var(--catwalk-dark);
  color: var(--catwalk-dark);
  font-family: var(--catwalk-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.catwalk-quick-view-btn:hover {
  background: var(--catwalk-dark);
  color: #fff;
}

/* Badges */
.catwalk-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 0 15px;
  font-family: var(--catwalk-font);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 3;
}

.catwalk-badge-sale {
  background: var(--catwalk-primary);
  color: #fff;
}

.catwalk-badge-flash {
  background: var(--catwalk-dark);
  color: #fff;
}

.catwalk-badge-flash img {
  width: 40px;
  height: auto;
  border-radius: var(--catwalk-radius-circle, 50%);
}

/* Product Info */
.catwalk-product-info {
  padding-top: 18px;
  text-align: center;
}

/* Product Title */
.catwalk-product-title {
  font-family: var(--catwalk-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  color: var(--catwalk-dark);
}

.catwalk-product-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.catwalk-product-title a:hover {
  color: var(--catwalk-primary);
}

/* Product Rating */
.catwalk-product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.catwalk-product-rating .star-rating {
  font-size: 12px;
  line-height: 1;
}

.catwalk-rating-value {
  font-size: 12px;
  color: var(--catwalk-text-secondary);
  font-family: var(--catwalk-font);
}

/* Product Price */
.catwalk-product-price {
  margin-top: 8px;
  font-family: var(--catwalk-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--catwalk-muted);
}

.catwalk-old-price {
  text-decoration: line-through;
  margin-right: 8px;
  color: var(--catwalk-muted);
}

.catwalk-current-price {
  color: var(--catwalk-muted);
}

/* ============================================================================
   HOMEPAGE PRODUCT GRID
   ============================================================================ */

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

@media (min-width: 576px) {
  .catwalk-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 20px;
  }
}

@media (min-width: 768px) {
  .catwalk-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 25px;
  }
}

@media (min-width: 992px) {
  .catwalk-products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 35px 30px;
  }

  .catwalk-product-title {
    font-size: 19px;
  }

  .catwalk-product-price {
    font-size: 18px;
    margin-top: 11px;
  }
}

/* ============================================================================
   CATWALK LISTING PAGE PRODUCT CARD (Matches "/shop/" Design)
   ============================================================================ */

/* Card Container */
.catwalk-listing-card {
  position: relative;
  margin-bottom: 30px;
}

/* Image Container */
.catwalk-listing-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--catwalk-product-aspect, 1 / 1);
  background: var(--catwalk-bg-light);
}

.catwalk-listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.catwalk-listing-card:hover .catwalk-listing-image img {
  transform: scale(1.05);
}

/* Wishlist Button - VISIBLE BY DEFAULT per /shop/ reference */
.catwalk-listing-wishlist {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--catwalk-dark);
  cursor: pointer;
  opacity: 1;
  /* VISIBLE by default */
  transition: all 0.3s ease;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.catwalk-listing-wishlist:hover {
  color: var(--catwalk-primary);
  transform: scale(1.1);
}

/* ===========================================================================
   TODAY'S DEAL FLOATING WIDGET (Bottom Left Button + Sidebar)
   =========================================================================== */

/* Floating Button (Bottom Left) */
.todays-deal-float-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    var(--catwalk-primary),
    var(--catwalk-primary-hover)
  );
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(var(--color-primary-rgb), 0.5);
  transition: all 0.3s ease;
}

.todays-deal-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(var(--color-primary-rgb), 0.7);
}

.todays-deal-float-btn i {
  animation: flame-pulse 1.5s ease-in-out infinite;
}

@keyframes flame-pulse {
  0%,
  100% {
    transform: scale(1);
  }

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

/* Deal Count Badge */
.deal-count {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background: #fff;
  color: var(--catwalk-primary);
  border-radius: var(--catwalk-radius-circle, 50%);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Sidebar Panel */
.todays-deal-sidebar {
  position: fixed;
  top: 0;
  left: -400px;
  width: 380px;
  height: 100dvh;
  background: #fff;
  z-index: 1001;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
  transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}

.todays-deal-sidebar.active {
  left: 0;
}

/* Sidebar Header */
.todays-deal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  background: linear-gradient(
    135deg,
    var(--catwalk-primary),
    var(--catwalk-primary-hover)
  );
  color: #fff;
  border-bottom: 3px solid var(--color-primary-hover);
}

.todays-deal-header h3 {
  margin: 0;
  font-family: var(--catwalk-font);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.todays-deal-header i {
  font-size: 24px;
  animation: flame-pulse 1.5s ease-in-out infinite;
}

.todays-deal-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--catwalk-radius-circle, 50%);
  transition: background 0.3s;
}

.todays-deal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Products List */
.todays-deal-products {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

/* Individual Deal Item */
.todays-deal-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.1),
    rgba(var(--color-primary-rgb), 0.05)
  );
  border: 1px solid var(--catwalk-border);
  border-radius: var(--catwalk-radius-md, 8px);
  margin-bottom: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.todays-deal-item:hover {
  border-color: var(--catwalk-primary);
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.15),
    rgba(var(--color-primary-rgb), 0.1)
  );
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.15);
  transform: translateX(5px);
}

.deal-item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--catwalk-bg-light);
}

.deal-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deal-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deal-item-info h4 {
  margin: 0 0 8px 0;
  font-family: var(--catwalk-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--catwalk-dark);
}

.deal-item-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deal-item-price .old-price {
  text-decoration: line-through;
  color: var(--catwalk-text-muted);
  font-size: 13px;
}

.deal-item-price .current-price {
  color: #d81b60;
  font-weight: 700;
  font-size: 16px;
}

.deal-item-price .login-to-see {
  color: var(--catwalk-primary);
  font-size: 13px;
  font-weight: 500;
}

/* Overlay */
.todays-deal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.todays-deal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Responsive */
@media (max-width: 576px) {
  .todays-deal-sidebar {
    width: 320px;
    left: -320px;
  }

  .todays-deal-float-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
    bottom: 20px;
    left: 20px;
  }

  .deal-count {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

/* Today's Deal Badge (Bottom Left) */
.catwalk-todays-deal-badge {
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e53935;
  color: #fff;
  font-family: var(--catwalk-font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 3px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.4);
}

.catwalk-todays-deal-badge i {
  font-size: 13px;
  animation: flame 1.5s ease-in-out infinite;
}

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

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

/* Quick View Button (Centered Eye Icon) */
.catwalk-listing-quick-view {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.catwalk-listing-card:hover .catwalk-listing-quick-view {
  opacity: 1;
}

.catwalk-listing-quick-view-btn {
  width: 50px;
  height: 50px;
  background: #fff;
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--catwalk-dark);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.catwalk-listing-quick-view-btn:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

/* Cart Overlay (Bottom) */
.catwalk-listing-cart-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 5;
}

.catwalk-listing-card:hover .catwalk-listing-cart-overlay {
  transform: translateY(0);
}

.catwalk-listing-cart-btn {
  display: block;
  width: 100%;
  background: var(--catwalk-primary);
  color: #fff;
  font-family: var(--catwalk-font);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  padding: 15px 20px;
  transition: background 0.3s ease;
}

.catwalk-listing-cart-btn:hover {
  background: var(--catwalk-dark);
  color: #fff;
}

/* Badges */
.catwalk-listing-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  padding: 0 12px;
  font-family: var(--catwalk-font);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 3;
}

.catwalk-listing-badge-sale {
  background: var(--catwalk-primary);
  color: #fff;
}

.catwalk-listing-badge-flash {
  background: linear-gradient(135deg, #ff5a00, #ff2d55);
  color: #fff;
}

.catwalk-listing-badge-stock {
  background: var(--catwalk-secondary);
  color: #fff;
}

/* Product Info */
.catwalk-listing-info {
  padding-top: 15px;
  text-align: center;
}

/* Product Title */
.catwalk-listing-title {
  font-family: var(--catwalk-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  color: var(--catwalk-dark);
}

.catwalk-listing-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.catwalk-listing-title a:hover {
  color: var(--catwalk-primary);
}

/* Product Price */
.catwalk-listing-price {
  margin-top: 8px;
  font-family: var(--catwalk-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--catwalk-muted);
}

.catwalk-listing-old-price {
  text-decoration: line-through;
  margin-right: 8px;
  color: var(--catwalk-muted);
}

.catwalk-listing-current-price {
  color: var(--catwalk-muted);
}

/* Listing Color Swatches */
.catwalk-listing-colors {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.1s ease,
    transform 0.1s ease;
}

.catwalk-listing-card:hover .catwalk-listing-colors {
  opacity: 1;
  transform: translateY(0);
}

.catwalk-color-dot {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--catwalk-radius-circle, 50%);
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.catwalk-color-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--catwalk-radius-circle, 50%);
  background: var(--swatch-color, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.catwalk-color-dot:hover,
.catwalk-color-dot:focus {
  transform: scale(1.1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  outline: none;
}

.catwalk-color-more {
  font-size: 11px;
  color: var(--catwalk-muted);
  line-height: 12px;
}

@media (hover: none) {
  .catwalk-listing-colors {
    opacity: 1;
    transform: none;
  }
}

/* Cart Button Wrapper - Absolute positioning to prevent layout shift */
.catwalk-listing-cart-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
  z-index: 10;
}

.catwalk-listing-card:hover .catwalk-listing-cart-wrap {
  opacity: 1;
  padding: 12px;
  transform: translateY(0);
}

/* Add border on hover */
.catwalk-listing-card:hover {
  border: 1px solid #e0e0e0;
  padding: 12px;
  padding-bottom: 64px;
  z-index: 300;
  background: white;
  margin: -12px;
}

.catwalk-listing-cart-btn {
  display: block;
  width: 100%;
  background: var(--catwalk-primary);
  color: #fff;
  font-family: var(--catwalk-font);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  padding: 12px 20px;
  border: none;
  border-radius: 0;
  transition: background 0.3s ease;
  cursor: pointer;
}

.catwalk-listing-cart-btn:hover {
  background: var(--catwalk-dark);
  color: #fff;
}

/* Responsive adjustments for listing page */
@media (min-width: 992px) {
  .catwalk-listing-title {
    font-size: 17px;
  }

  .catwalk-listing-price {
    font-size: 16px;
  }
}

/* ==========================================================================
   CHECKBOX FIX (Override corrupted encoding)
   ========================================================================== */
.filter-checkbox:checked::after {
  content: "\2714" !important;
}

/* Load More Button Loading State */
#load-more-btn .btn-text,
#load-more-btn .btn-loading {
  display: inline-flex;
  align-items: center;
}

#load-more-btn .spinner-border {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (Matches CatWalk Reference)
   ========================================================================== */

/* Main Product Section - More Breathing Room */
.product-details-area {
  padding: 40px 0 60px;
  background: #fff;
}

.product-details-area .container {
  max-width: 1400px;
}

.product-details-area .bg-white {
  padding: 0 !important;
  background: transparent !important;
}

/* Column gutter overrides only when columns sit side-by-side on desktop.
   On mobile both columns stack, so extra side padding here would push the
   product info inward and break alignment with the gallery above it. */
@media (min-width: 992px) {
  .product-details-area .col-lg-6:first-child {
    padding-right: 30px;
  }

  .product-details-area .col-lg-6:last-child {
    padding-left: 30px;
  }

  .product-description-wrapper {
    padding: 0 15px;
  }
}

/* Breadcrumb */
.catwalk-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.catwalk-breadcrumb .breadcrumb-item {
  font-size: 13px;
  color: #b0a9ad;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catwalk-breadcrumb .breadcrumb-item a {
  color: #b0a9ad;
  text-decoration: none;
  transition: color 0.3s ease;
}

.catwalk-breadcrumb .breadcrumb-item a:hover {
  color: var(--catwalk-primary);
}

.catwalk-breadcrumb .breadcrumb-item.active {
  color: var(--catwalk-text-muted);
}

.catwalk-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: #b0a9ad;
  padding: 0 8px;
}

/* Product Title */
.catwalk-product-title {
  font-family: var(--catwalk-font), sans-serif;
  font-size: 35px;
  font-weight: 500;
  color: var(--catwalk-secondary);
  line-height: 1.2;
  margin-bottom: 20px;
  margin-top: 0;
}

.catwalk-price-old {
  font-size: 18px;
  color: var(--catwalk-text-muted);
}

.catwalk-price-old del {
  text-decoration: line-through;
}

.catwalk-price-current {
  font-size: 28px;
  font-weight: 500;
  color: var(--catwalk-secondary);
  font-family: var(--catwalk-font);
}

/* Color Swatches */
.checkbox-color li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.checkbox-color input[type="radio"] {
  display: none;
}

.checkbox-color label {
  display: block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 0;
  margin: 0;
  border: 2px solid var(--catwalk-border-dark);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.checkbox-color input[type="radio"]:checked + label {
  border-color: var(--catwalk-secondary);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--catwalk-secondary);
}

.checkbox-color label:hover {
  transform: scale(1.1);
}

.catwalk-variant-label {
  width: 95px;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* Quantity selector must keep its fixed width so the +/- buttons never clip
   when the parent flex row runs out of space on very narrow viewports. */
.catwalk-quantity-selector {
  flex-shrink: 0;
}

/* Allow the "X available" hint to wrap below the selector when the row
   can't fit on a single line (≤ ~360px viewports). */
.product-quantity {
  flex-wrap: wrap;
  row-gap: 6px;
}

@media (max-width: 360px) {
  .catwalk-variant-label {
    width: 70px;
    font-size: 11px;
  }
}

/* Size Selection */
.checkbox-alphanumeric li {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}

.checkbox-alphanumeric input[type="radio"] {
  display: none;
}

.checkbox-alphanumeric label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  font-size: 13px;
  padding: 0 8px;
  margin: 0;
  text-align: center;
  font-family: var(--catwalk-font);
  font-weight: 400;
  border: 1px solid #f3d4ee;
  background: transparent;
  color: var(--catwalk-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  border-radius: 0;
}

.checkbox-alphanumeric input[type="radio"]:checked + label {
  background: var(--catwalk-primary);
  border-color: var(--catwalk-primary);
  color: #fff;
}

.checkbox-alphanumeric label:hover {
  border-color: var(--catwalk-primary);
}

/* Quantity Input - Horizontal Layout with visible +/- buttons */
.input-group--style-2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 160px !important;
  border: 1px solid #f3d4ee;
  position: relative;
}

.input-group--style-2 .form-control {
  height: 50px;
  width: 70px !important;
  border: none !important;
  border-left: 1px solid #f3d4ee !important;
  border-right: 1px solid #f3d4ee !important;
  border-radius: 0 !important;
  text-align: center;
  font-size: 16px;
  font-family: var(--catwalk-font);
  padding: 0 !important;
  flex: 1;
  order: 2;
}

.input-group--style-2 .input-group-btn {
  display: flex !important;
  align-items: stretch !important;
}

.input-group--style-2 .input-group-btn:first-child {
  order: 1;
}

.input-group--style-2 .input-group-btn:last-child {
  order: 3;
}

.input-group--style-2 .btn-number {
  position: relative !important;
  background: transparent;
  border: none;
  width: 45px;
  height: 50px;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--catwalk-secondary);
  transition: all 0.3s ease;
  font-size: 16px;
}

.input-group--style-2 .btn-number:hover:not(:disabled) {
  background: #f8f0f5;
  color: var(--catwalk-primary);
}

.input-group--style-2 .btn-number:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.input-group--style-2 .btn-number i,
.input-group--style-2 .btn-number .la {
  font-size: 14px !important;
  line-height: 1;
}

/* Quantity Loading Overlay */
.quantity-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.quantity-loading.active {
  display: flex;
}

.quantity-loading i {
  font-size: 18px;
  color: var(--catwalk-primary);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Vertical Accordion */
.catwalk-accordion {
  margin-top: 40px;
}

.catwalk-accordion-item {
  border-bottom: 1px solid var(--catwalk-border);
}

.catwalk-accordion-item:last-child {
  border-bottom: none;
}

.catwalk-accordion-header {
  padding: 0;
}

.catwalk-accordion-button {
  width: 100%;
  padding: 25px 0;
  text-align: left;
  background: transparent;
  border: none;
  font-family: var(--catwalk-font);
  font-size: 24px;
  font-weight: 500;
  color: var(--catwalk-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
}

.catwalk-accordion-button:hover {
  color: var(--catwalk-primary);
}

.catwalk-accordion-button:focus {
  outline: none;
}

.catwalk-accordion-icon {
  font-size: 24px;
  transition: transform 0.3s ease;
}

.catwalk-accordion-button:not(.collapsed) .catwalk-accordion-icon {
  transform: rotate(180deg);
}

.catwalk-accordion-body {
  padding: 0 0 30px 0;
  color: var(--catwalk-text-secondary);
  line-height: 1.8;
}

.catwalk-accordion-body p {
  margin-bottom: 15px;
}

/* Related Products */
.catwalk-related-products {
  padding: 60px 0;
  margin-top: 40px;
  border-top: 1px solid var(--catwalk-border);
}

.catwalk-related-title {
  font-family: var(--catwalk-font);
  font-size: 28px;
  font-weight: 500;
  color: var(--catwalk-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   CATWALK IMAGE GALLERY - Thumbnails LEFT, Main Image RIGHT
   ========================================================================== */
/* Sticky behavior only for Desktop */
@media (min-width: 992px) {
  .catwalk-sticky-column {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    z-index: 10;
  }
}

.catwalk-gallery {
  position: relative;
  padding-left: 115px; /* 90px thumbs + 25px gap */
}

/* Thumbnail Wrapper - contains scroll buttons, fades, and thumbs */
.catwalk-gallery-thumbs-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 90px;
  display: flex;
  flex-direction: column;
}

/* Scroll Arrow Buttons */
.thumb-scroll-btn {
  display: none; /* hidden by default, shown by JS when scrollable */
  width: 100%;
  height: 28px;
  border: none;
  background: var(--catwalk-bg-light);
  color: var(--catwalk-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    color 0.2s ease,
    background 0.2s ease;
  z-index: 2;
}

.thumb-scroll-btn:hover {
  color: var(--catwalk-primary);
  background: var(--catwalk-border);
}

/* Gradient Fade Overlays */
.thumb-fade {
  position: absolute;
  left: 0;
  width: 90px;
  height: 30px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumb-fade-top {
  top: 28px; /* below scroll-up button */
  background: linear-gradient(
    to bottom,
    var(--catwalk-bg-light) 0%,
    transparent 100%
  );
}

.thumb-fade-bottom {
  bottom: 28px; /* above scroll-down button */
  background: linear-gradient(
    to top,
    var(--catwalk-bg-light) 0%,
    transparent 100%
  );
}

.thumb-fade.visible {
  opacity: 1;
}

/* Thumbnails - Vertical on LEFT */
.catwalk-gallery-thumbs {
  flex: 1;
  min-height: 0;
  width: 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.catwalk-gallery-thumbs::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.catwalk-thumb-item {
  width: 90px;
  min-height: 90px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--catwalk-border-dark);
  transition: all 0.3s ease;
  overflow: hidden;
  background: var(--catwalk-bg-light);
}

.catwalk-thumb-item:hover {
  border-color: var(--catwalk-border-dark);
}

.catwalk-thumb-item.active {
  border-color: var(--catwalk-primary);
}

.catwalk-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main Image - on RIGHT */
.catwalk-gallery-main {
  position: relative;
  background: var(--catwalk-bg-light);
}

.catwalk-main-image {
  width: 100%;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.3s ease;
}

/* Flash Deal Badge */
.catwalk-gallery-main .flash-icon {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
}

/* Mobile Responsive - Stack vertically */
@media (max-width: 576px) {
  .catwalk-gallery {
    padding-left: 0;
    display: flex;
    flex-direction: column-reverse;
  }

  .catwalk-gallery-thumbs-wrapper {
    position: static;
    flex-direction: row;
    width: 100%;
  }

  .catwalk-gallery-thumbs {
    position: static;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
  }

  .catwalk-thumb-item {
    width: 70px;
    min-height: 70px;
    flex-shrink: 0;
  }

  /* Hide vertical scroll indicators on mobile */
  .thumb-scroll-btn,
  .thumb-fade {
    display: none !important;
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .catwalk-product-title {
    font-size: 24px;
  }

  .catwalk-price-current {
    font-size: 22px;
  }

  .catwalk-breadcrumb .breadcrumb-item {
    font-size: 13px;
  }
}

/* ==========================================================================
   RELATED PRODUCTS CARD - NEW DESIGN
   ========================================================================== */
.catwalk-related-card {
  text-align: left;
}

.catwalk-related-card-image {
  position: relative;
  background: var(--catwalk-bg-light);
  overflow: hidden;
}

.catwalk-related-card-image > a {
  display: block;
}

.catwalk-related-card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.catwalk-related-card:hover .catwalk-related-card-image img {
  transform: scale(1.05);
}

/* Action Buttons - Centered, shown on hover */
.catwalk-related-card-actions {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
}

.catwalk-related-card:hover .catwalk-related-card-actions {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.catwalk-action-btn {
  width: 45px;
  height: 45px;
  border-radius: var(--catwalk-radius-circle, 50%);
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: var(--catwalk-secondary);
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.catwalk-action-btn:hover {
  background: var(--catwalk-primary);
  color: white;
  transform: scale(1.1);
  text-decoration: none;
}

/* Card Info */
.catwalk-related-card-info {
  padding: 18px 0;
}

.catwalk-related-card-title {
  display: block;
  font-family: var(--catwalk-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--catwalk-secondary);
  text-decoration: none;
  margin-bottom: 8px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.catwalk-related-card-title:hover {
  color: var(--catwalk-primary);
}

.catwalk-related-card-price {
  font-family: var(--catwalk-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--catwalk-text-muted);
}

.catwalk-related-card-price .old-price {
  text-decoration: line-through;
  color: var(--catwalk-border-dark);
  margin-right: 8px;
}

/* Related Products Section Title */
.catwalk-related-products .catwalk-related-title {
  font-family: var(--catwalk-font);
  font-size: 28px;
  font-weight: 500;
  color: var(--catwalk-dark);
  margin-bottom: 40px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .catwalk-related-card-image {
    padding: 20px;
  }

  .catwalk-action-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .catwalk-related-card-title {
    font-size: 14px;
  }

  .catwalk-related-card-price {
    font-size: 13px;
  }
}

/* ==========================================================================
   LIGHTBOX ZOOM MODAL
   ========================================================================== */
.catwalk-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catwalk-lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.catwalk-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90%;
  max-height: 90%;
}

.catwalk-lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  display: block;
}

.catwalk-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

.catwalk-lightbox-close:hover {
  color: var(--catwalk-primary);
}

body.lightbox-open {
  overflow: hidden;
}

/* ============================================
   USER DROPDOWN MENU
   ============================================ */
.nav-user-dropdown {
  position: relative;
}

.user-dropdown-toggle {
  cursor: pointer;
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  background: #fff;
  border: 1px solid var(--catwalk-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 240px;
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

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

.user-dropdown-header {
  padding: 20px;
  border-bottom: 1px solid var(--catwalk-border);
  background: var(--catwalk-bg-light);
}

.user-dropdown-name {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--catwalk-text-primary);
  margin-bottom: 4px;
}

.user-dropdown-email {
  display: block;
  font-size: 13px;
  color: var(--catwalk-text-muted);
}

.user-dropdown-items {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.user-dropdown-items li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--catwalk-text-primary);
  transition: all 0.2s ease;
}

.user-dropdown-items li a:hover {
  background: var(--catwalk-bg-light);
  color: var(--catwalk-primary);
}

.user-dropdown-items li a i {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--catwalk-border);
  margin: 8px 0;
}

.user-dropdown-items .logout-link {
  color: #dc3545;
}

.user-dropdown-items .logout-link:hover {
  background: #fff5f5;
  color: #dc3545;
}

/* Arrow pointer on dropdown */
.user-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 15px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}

.user-dropdown-menu::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--catwalk-border);
  z-index: -1;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .user-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }

  .user-dropdown-menu.active {
    transform: translateY(0);
  }

  .user-dropdown-menu::before,
  .user-dropdown-menu::after {
    display: none;
  }
}

/* ============================================
   HOMEPAGE PRODUCT CARD (ISOLATED DESIGN)
   ============================================ */
.catwalk-home-product-card {
  position: relative;
  margin-bottom: 30px;
  /* Transparan: diğer ürün kartlarıyla (.catwalk-product-card) standart —
     renkli zeminli sayfalarda (ör. flash deal) kart kutu gibi görünmesin (task 418) */
  background: transparent;
  transition: all 0.3s ease;
}

.home-product-image-wrapper {
  position: relative;
  background-color: var(--catwalk-bg-light);
  /* Light gray background */
  width: 100%;
  aspect-ratio: var(--catwalk-product-aspect, 1 / 1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 15px;
}

.home-product-image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
  z-index: 1;
}

.catwalk-home-product-card:hover .home-product-image-wrapper img {
  transform: scale(1.05);
}

/* Hover Overlay - Darken image */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  /* Slight darken effect */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.catwalk-home-product-card:hover .hover-overlay {
  opacity: 1;
}

/* Wishlist Button - Top Right */
.home-wishlist-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  border-radius: var(--catwalk-radius-circle, 50%);
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--catwalk-text-primary);
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease;
  opacity: 0;
  /* Hidden by default? No, usually visible */
  opacity: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.home-wishlist-btn:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

/* Quick View Button - Centered below image */
.home-quick-view-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  /* Remove padding from wrapper */
  background: rgba(255, 255, 255, 0.9);
  /* Adding background for visibility */
  transform: translateY(100%);
  /* Start hidden below */
  transition: all 0.3s ease;
  z-index: 10;
}

.catwalk-home-product-card:hover .home-quick-view-wrapper {
  transform: translateY(0);
  /* Slide up into view */
}

.home-quick-view-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--catwalk-text-primary);
  cursor: pointer;
  display: flex;
  /* Changed to flex for full centering */
  align-items: center;
  justify-content: center;
  /* Center content */
  width: 100%;
  /* Full width */
  padding: 10px;
  /* Add padding here */
  gap: 5px;
  transition: color 0.3s ease;
}

.home-quick-view-btn:hover {
  color: var(--catwalk-primary);
}

/* Product Info */
.home-product-info {
  margin-top: 15px;
}

.home-product-info .product-title {
  font-size: 16px;
  font-weight: 500;
  /* Bolder as per screenshot */
  margin-bottom: 8px;
  line-height: 1.4;
}

.home-product-info .product-title a {
  color: var(--catwalk-text-primary);
}

.home-product-info .product-title a:hover {
  color: var(--catwalk-primary);
}

/* Price / Add to Cart Toggle */
.price-action-wrapper {
  position: relative;
  height: 24px;
  /* Fixed height to prevent layout shift */
  overflow: hidden;
}

.price-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: translateY(0);
  opacity: 1;
}

.action-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: translateY(20px);
  opacity: 0;
}

.catwalk-home-product-card:hover .price-view {
  transform: translateY(-20px);
  opacity: 0;
}

.catwalk-home-product-card:hover .action-view {
  transform: translateY(0);
  opacity: 1;
}

.home-add-to-cart-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--catwalk-text-secondary);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.home-add-to-cart-btn:hover {
  color: var(--catwalk-primary);
}

.price-view .current-price {
  font-size: 15px;
  color: var(--catwalk-text-secondary);
  /* Lighter gray for price */
}

.price-view .old-price {
  font-size: 14px;
  text-decoration: line-through;
  color: var(--catwalk-text-muted);
  margin-right: 5px;
}

/* ============================================
   MODAL CENTERING FIX
   ============================================ */
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100dvh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

@media (min-width: 576px) {
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
}

/* ============================================================================
   ERROR PAGES (CatWalk Theme)
   Generic styles for all error pages (403, 404, 500, 503, etc.)
   ============================================================================ */

.catwalk-error-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fffefe;
  padding: 40px 20px;
}

.catwalk-error-content {
  text-align: center;
  max-width: 600px;
}

.catwalk-error-number {
  font-family: var(--catwalk-font, "Jost", sans-serif);
  font-size: 320px;
  color: var(--catwalk-primary);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: -5px;
}

.catwalk-error-heading {
  font-family: var(--catwalk-font, "Jost", sans-serif);
  font-size: 47px;
  color: var(--catwalk-dark, var(--catwalk-secondary));
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: 15px;
  line-height: 1.2;
}

.catwalk-error-text {
  font-family: var(--catwalk-font, "Jost", sans-serif);
  font-size: 16px;
  color: var(--catwalk-text-secondary);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.catwalk-error-button {
  background: var(--catwalk-primary);
  color: #fff !important;
  padding: 17px 54px;
  font-family: var(--catwalk-font, "Jost", sans-serif);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none !important;
  display: inline-block;
  border-radius: 0;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: none;
}

.catwalk-error-button:hover {
  background: var(--catwalk-dark, var(--catwalk-secondary));
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive Design */
@media (max-width: 768px) {
  .catwalk-error-number {
    font-size: 180px;
    letter-spacing: -3px;
  }

  .catwalk-error-heading {
    font-size: 32px;
  }

  .catwalk-error-text {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .catwalk-error-container {
    min-height: 70vh;
  }

  .catwalk-error-number {
    font-size: 120px;
    letter-spacing: -2px;
  }

  .catwalk-error-heading {
    font-size: 24px;
    margin-top: 15px;
  }

  .catwalk-error-text {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .catwalk-error-button {
    padding: 14px 40px;
    font-size: 14px;
  }
}

/* ============================================
   SWEETALERT2 THEME OVERRIDES
   ============================================ */
.swal2-popup {
  border-radius: 0 !important;
  font-family: "Jost", sans-serif !important;
  padding: 40px !important;
}

.swal2-title {
  color: var(--catwalk-secondary) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

.swal2-content {
  color: var(--catwalk-text-secondary) !important;
  font-size: 16px !important;
}

/* Success Icon - Make it Pink */
.swal2-icon.swal2-success {
  border-color: var(--catwalk-primary) !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: var(--catwalk-primary) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border: 4px solid rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Error Icon */
.swal2-icon.swal2-error {
  border-color: #dc3545 !important;
}

.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
  background-color: #dc3545 !important;
}

/* Confirm Button */
.swal2-confirm.btn-catwalk {
  background: var(--catwalk-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 15px 40px !important;
  box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.3) !important;
  transition: all 0.3s ease;
}

.swal2-confirm.btn-catwalk:hover {
  background: var(--catwalk-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(var(--color-primary-rgb), 0.4) !important;
}

.swal2-actions {
  margin-top: 30px !important;
}

/* ===== VARIANT SIDEBAR ===== */

.mobile-user-menu-section {
  background: var(--catwalk-bg-light);
  padding: 5px 15px;
}
.mobile-user-menu-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--catwalk-text-muted);
  text-transform: uppercase;
}
.mobile-menu-logout {
  color: var(--catwalk-error-text);
}

/* --- catwalk-variant-sidebar.css --- */
/* ===== VARIANT SIDEBAR ===== */

/* More Options Button - Minimal Style */
.variant-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(var(--catwalk-primary-rgb), 0.05);
  border: 1px solid var(--catwalk-primary);
  color: var(--catwalk-primary);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--catwalk-radius-sm, 4px);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.3px;
}

.variant-more-btn:hover {
  background: rgba(var(--catwalk-primary-rgb), 0.1);
  border-color: var(--catwalk-primary-hover);
  color: var(--catwalk-primary-hover);
}

.variant-more-btn:active {
  transform: scale(0.98);
  background: rgba(var(--color-primary-rgb), 0.15);
}

.variant-more-btn i {
  font-size: 18px;
}

/* Variant Expand/Collapse Button (Main Page) */
.variant-expand-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--catwalk-border-dark);
  color: var(--catwalk-text-secondary);
  font-size: 20px;
  border-radius: var(--catwalk-radius-sm, 4px);
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
  vertical-align: middle;
}

.variant-expand-btn:hover {
  border-color: var(--catwalk-primary);
  color: var(--catwalk-primary);
  background: rgba(var(--catwalk-primary-rgb), 0.05);
}

.variant-expand-btn.expanded {
  border-color: var(--catwalk-primary);
  color: var(--catwalk-primary);
  background: rgba(var(--catwalk-primary-rgb), 0.1);
}

.variant-expand-btn i {
  font-size: 20px;
  line-height: 1;
}

/* Sidebar Expand/Collapse Button */
.sidebar-variant-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1.5px solid var(--catwalk-primary);
  color: var(--catwalk-primary);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--catwalk-radius-xl, 20px);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

.sidebar-variant-expand-btn:hover {
  background: var(--catwalk-primary);
  color: #fff;
}

.sidebar-variant-expand-btn.expanded {
  background: var(--catwalk-primary);
  color: #fff;
}

.sidebar-variant-expand-btn i {
  font-size: 16px;
}

/* Sidebar Overlay with Glassmorphism */
.variant-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

/* Sidebar Container */
.variant-sidebar {
  position: fixed;
  top: 0;
  right: -500px;
  width: 100%;
  max-width: 500px;
  height: 100dvh;
  background: #fff;
  z-index: 9999;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.variant-sidebar.active {
  right: 0;
}

.variant-sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Top Right Close Button */
.variant-sidebar-close-top {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--catwalk-text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.variant-sidebar-close-top:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: rotate(90deg);
  color: var(--catwalk-text-primary);
}

/* Product Info Header */
.variant-sidebar-product-info {
  display: flex;
  gap: 16px;
  padding: 24px 30px;
  background: #fff;
  border-bottom: 1px solid var(--catwalk-border);
}

.sidebar-product-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--catwalk-radius-md, 8px);
  overflow: hidden;
  border: 1px solid var(--catwalk-border);
}

.sidebar-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-product-details {
  flex: 1;
  min-width: 0;
}

.sidebar-product-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--catwalk-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sidebar-price-current {
  font-size: 20px;
  font-weight: 700;
  color: var(--catwalk-primary-hover);
}

.sidebar-price-old {
  font-size: 15px;
  color: var(--catwalk-text-muted);
  text-decoration: line-through;
}

.sidebar-product-stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--catwalk-text-secondary);
}

.sidebar-product-stock i {
  font-size: 16px;
  color: var(--catwalk-primary);
}

.sidebar-product-stock strong {
  color: var(--catwalk-secondary);
}

/* Sidebar Section Header */
.variant-sidebar-header {
  padding: 20px 30px 16px;
  border-bottom: 1px solid var(--catwalk-border);
  background: var(--catwalk-bg-light);
}

.variant-sidebar-header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--catwalk-secondary);
}

.sidebar-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--catwalk-text-secondary);
}

/* Sidebar Body */
.variant-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  background: var(--catwalk-bg-light);
}

.variant-sidebar-body::-webkit-scrollbar {
  width: 8px;
}

.variant-sidebar-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.variant-sidebar-body::-webkit-scrollbar-thumb {
  background: var(--catwalk-primary);
  border-radius: var(--catwalk-radius-sm, 4px);
}

.variant-sidebar-body::-webkit-scrollbar-thumb:hover {
  background: var(--catwalk-primary-hover);
}

/* Variant Sections */
.sidebar-variant-section {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar-variant-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--catwalk-secondary);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--catwalk-primary);
}

.sidebar-variant-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Choice Items (Beden, Kumaş, etc.) */
.sidebar-choice-item {
  position: relative;
}

.sidebar-choice-item input[type="radio"] {
  display: none;
}

.sidebar-choice-item label {
  display: block;
  padding: 10px 14px;
  border: 1.5px solid var(--catwalk-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--catwalk-secondary);
  background: #fff;
}

.sidebar-choice-item label:hover {
  border-color: var(--catwalk-primary);
  background: var(--catwalk-bg-primary-light);
}

.sidebar-choice-item input[type="radio"]:checked + label {
  background: linear-gradient(
    135deg,
    var(--catwalk-primary) 0%,
    var(--catwalk-primary-hover) 100%
  );
  border-color: var(--catwalk-primary-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--catwalk-primary-rgb), 0.3);
}

/* Color Items */
.sidebar-color-item {
  position: relative;
}

.sidebar-color-item input[type="radio"] {
  display: none;
}

.sidebar-color-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--catwalk-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

.sidebar-color-item label:hover {
  border-color: var(--catwalk-primary);
  background: var(--catwalk-bg-primary-light);
}

.sidebar-color-item input[type="radio"]:checked + label {
  border-color: var(--catwalk-primary-hover);
  background: var(--catwalk-bg-primary-light);
  box-shadow: 0 0 0 3px rgba(var(--catwalk-primary-rgb), 0.2);
}

.sidebar-color-swatch {
  width: 44px;
  height: 44px;
  border-radius: var(--catwalk-radius-circle, 50%);
  border: 2px solid var(--catwalk-border);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-color-item label span {
  font-size: 14px;
  font-weight: 500;
  color: var(--catwalk-secondary);
}

/* Footer Action Buttons */
.variant-sidebar-footer {
  display: flex;
  gap: 12px;
  padding: 20px 30px;
  background: #fff;
  border-top: 1px solid var(--catwalk-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.btn-sidebar-apply,
.btn-sidebar-add-cart {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--catwalk-radius-md, 8px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sidebar-apply {
  background: #fff;
  color: var(--catwalk-primary-hover);
  border: 2px solid var(--catwalk-primary-hover);
}

.btn-sidebar-apply:hover {
  background: var(--catwalk-bg-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--catwalk-primary-hover-rgb), 0.2);
}

.btn-sidebar-add-cart {
  flex: 1;
  display: inline-flex;
  /* Override JS inline-block with flex */
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(
    135deg,
    var(--catwalk-primary) 0%,
    var(--catwalk-primary-hover) 100%
  );
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--catwalk-primary-rgb), 0.3);
  border: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--catwalk-radius-md, 8px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sidebar-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.4);
}

.btn-sidebar-apply i,
.btn-sidebar-add-cart i {
  font-size: 18px;
}

/* Footer Action Buttons - Catwalk Style */
.variant-sidebar-footer {
  display: flex;
  gap: 12px;
  padding: 20px 30px;
  background: #fff;
  border-top: 1px solid var(--catwalk-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

.btn-sidebar-apply {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: #fff;
  border: 2px solid var(--catwalk-primary);
  color: var(--catwalk-primary);
  font-size: 16px;
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sidebar-apply:hover {
  background: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--catwalk-primary-rgb), 0.2);
}

.btn-sidebar-apply i {
  font-size: 18px;
}

.btn-sidebar-add-cart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(
    135deg,
    var(--catwalk-primary) 0%,
    var(--catwalk-primary-hover) 100%
  );
  border: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--catwalk-primary-rgb), 0.35);
}

.btn-sidebar-add-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.5);
}

.btn-sidebar-add-cart:active {
  transform: translateY(0);
}

.btn-sidebar-add-cart i {
  font-size: 18px;
}

.btn-sidebar-out-of-stock {
  flex: 1;
  display: none;
  /* Override JS inline-block with flex */
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--catwalk-radius-md, 8px);
  background: var(--catwalk-border);
  color: var(--catwalk-text-muted);
  cursor: not-allowed;
}

.btn-sidebar-out-of-stock i {
  font-size: 18px;
}

/* Overlay */
.variant-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.variant-sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .variant-sidebar {
    max-width: 100%;
    right: -100%;
  }

  .variant-sidebar-product-info {
    padding: 20px;
  }

  .sidebar-product-image {
    width: 70px;
    height: 70px;
  }

  .sidebar-product-title {
    font-size: 15px;
  }

  .sidebar-price-current {
    font-size: 18px;
  }

  .variant-sidebar-header {
    padding: 16px 20px 12px;
  }

  .variant-sidebar-header h3 {
    font-size: 16px;
  }

  .variant-sidebar-body {
    padding: 20px;
  }

  .sidebar-variant-section {
    padding: 16px;
  }

  .sidebar-variant-title {
    font-size: 16px;
  }

  .variant-sidebar-footer {
    padding: 16px 20px;
    flex-direction: column;
  }

  .variant-more-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .sidebar-product-image {
    width: 60px;
    height: 60px;
  }

  .sidebar-product-title {
    font-size: 14px;
  }

  .sidebar-price-current {
    font-size: 16px;
  }

  .sidebar-variant-title {
    font-size: 15px;
  }

  .sidebar-choice-item label,
  .sidebar-color-item label {
    padding: 12px 16px;
    font-size: 14px;
  }

  .sidebar-color-swatch {
    width: 36px;
    height: 36px;
  }

  .btn-sidebar-apply,
  .btn-sidebar-add-cart {
    font-size: 14px;
    padding: 12px 16px;
  }
}

/* --- catwalk-mobile-variants.css --- */
/* Mobile Variant Button */
.mobile-variant-button-wrapper {
    width: 100%;
}

.btn-mobile-variants {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--catwalk-primary) 0%, var(--catwalk-primary-hover) 100%);
    border: none;
    color: var(--catwalk-text-white);
    font-size: 16px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--catwalk-primary-rgb), 0.35);
}

.btn-mobile-variants:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--catwalk-primary-rgb), 0.5);
    filter: brightness(1.05);
}

.btn-mobile-variants i {
    font-size: 20px;
}

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

/* Hide mobile button on desktop */
@media (min-width: 768px) {
    .mobile-variant-button-wrapper {
        display: none !important;
    }
}
/* --- catwalk-variant-scroll.css --- */
/* Variant options wrapper - allow wrap but collapse extra rows */
.variant-options-wrapper {
    position: relative;
}

/* Collapsed state - only show first row */
.variant-options-wrapper.collapsed .checkbox-alphanumeric,
.variant-options-wrapper.collapsed .checkbox-color {
    max-height: 60px;
    overflow: hidden;
}

/* Expanded state - show all */
.variant-options-wrapper.expanded .checkbox-alphanumeric,
.variant-options-wrapper.expanded .checkbox-color {
    max-height: none;
}

/* Expand/collapse button positioned after options */
.variant-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--catwalk-border);
    color: var(--catwalk-text-secondary);
    font-size: 20px;
    border-radius: var(--catwalk-radius-sm, 4px);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.variant-dropdown-btn:hover {
    border-color: var(--catwalk-primary);
    color: var(--catwalk-primary);
    background: rgba(var(--catwalk-primary-rgb), 0.05);
}

.variant-dropdown-btn.expanded {
    border-color: var(--catwalk-primary);
    color: var(--catwalk-primary);
    background: rgba(var(--catwalk-primary-rgb), 0.1);
}

.variant-dropdown-btn i {
    font-size: 20px;
    line-height: 1;
}

/* Variant Overflow Button - Opens Sidebar */
.variant-overflow-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--catwalk-border);
    color: var(--catwalk-text-secondary);
    font-size: 20px;
    border-radius: var(--catwalk-radius-sm, 4px);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    vertical-align: middle;
}

.variant-overflow-btn:hover {
    border-color: var(--catwalk-primary);
    color: var(--catwalk-primary);
    background: rgba(var(--catwalk-primary-rgb), 0.05);
}

.variant-overflow-btn i {
    font-size: 20px;
    line-height: 1;
}
/* --- catwalk-dropdown.css --- */
/* ============================================
   CATWALK DROPDOWN MENU STYLES — DEPRECATED
   ============================================
   All multi-level category dropdown styles have been consolidated into
   catwalk-components.css under "MULTI-LEVEL CATEGORY DROPDOWN".

   This file is kept empty intentionally so the existing <link> tag in
   frontend.blade.php keeps working without 404s. Do not re-add rules here
   unless you also remove them from catwalk-components.css — the two would
   fight in cascade order (this file loads later and would win).
   ============================================ */

/* --- catwalk-cart.css --- */
/**
 * CatWalk Cart Page Styles
 * ========================
 * Matches the reference design from catwalk.axiomthemes.com/cart/
 * 
 * Colors: Driven by CSS variables (--catwalk-primary, --catwalk-secondary, etc.)
 */

/* ============================================
   CART PAGE BANNER
   ============================================ */
.catwalk-cart-banner {
  background-color: var(--catwalk-cart-bg-light);
  padding: 60px 0 40px;
  text-align: center;
}

.catwalk-cart-banner h1 {
  font-family: "Jost", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  margin: 0;
  letter-spacing: 1px;
}

/* ============================================
   3-STEP PROGRESS INDICATOR
   ============================================ */
.catwalk-cart-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 30px;
  flex-wrap: wrap;
}

.catwalk-cart-step {
  display: flex;
  align-items: center;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}

.catwalk-cart-step.active {
  background-color: var(--catwalk-step-active);
  color: var(--catwalk-step-text);
}

.catwalk-cart-step.inactive {
  background-color: var(--catwalk-step-inactive);
  color: var(--catwalk-step-text);
}

.catwalk-cart-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--catwalk-radius-circle, 50%);
  border: 1px solid currentColor;
  margin-right: 10px;
  font-size: 12px;
}

/* ============================================
   CART MAIN SECTION
   ============================================ */
.catwalk-cart-section {
  padding: 60px 0;
  background-color: var(--catwalk-bg-main);
}

.catwalk-cart-container {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  max-width: 100%; /* Full width */
  margin: 0 auto;
  padding: 0 40px; /* Increased padding */
}

/* ============================================
   CART TABLE
   ============================================ */
.catwalk-cart-table {
  width: 100%;
  border-collapse: collapse;
}

.catwalk-cart-table thead th {
  background-color: var(--catwalk-cart-bg-light);
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  padding: 20px 15px;
  text-align: left;
  border: none;
}

.catwalk-cart-table thead th:first-child {
  padding-left: 20px;
}

.catwalk-cart-table thead th:last-child {
  text-align: right;
  padding-right: 20px;
}

.catwalk-cart-table tbody td {
  padding: 25px 15px;
  vertical-align: middle;
  border-bottom: 1px solid var(--catwalk-border);
  font-family: "Jost", sans-serif;
}

/* Remove Button Cell */
.catwalk-cart-table .cart-remove {
  width: 60px;
  text-align: center;
}

.catwalk-cart-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--catwalk-text-primary); /* Default black */
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  line-height: 1;
}

.catwalk-cart-remove-btn:hover {
  color: var(--catwalk-cart-primary); /* Theme color on hover */
  transform: scale(1.1);
}

.catwalk-cart-table .cart-remove {
  text-align: right;
  padding-right: 0;
  width: 60px;
}

/* Product Image */
.catwalk-cart-table .cart-thumbnail {
  width: 100px;
}

.catwalk-cart-table .cart-thumbnail img {
  width: 80px;
  height: 100px;
  object-fit: cover;
}

/* Product Name */
.catwalk-cart-table .cart-product-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
}

.catwalk-cart-table .cart-product-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.catwalk-cart-table .cart-product-name a:hover {
  color: var(--catwalk-cart-primary);
}

/* Price */
.catwalk-cart-table .cart-price {
  font-size: 16px;
  font-weight: 400;
  color: var(--catwalk-cart-text-secondary);
  white-space: nowrap; /* Prevent wrapping */
}

/* Quantity */
.catwalk-cart-table .cart-quantity {
  width: 140px;
}

/* Subtotal */
.catwalk-cart-table .cart-subtotal {
  text-align: right;
  font-size: 16px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  padding-right: 20px;
  white-space: nowrap; /* Prevent wrapping */
}

/* ============================================
   QUANTITY CONTROLS
   ============================================ */
.catwalk-qty-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--catwalk-cart-border);
  border-radius: 0;
  background: var(--catwalk-bg-main);
}

.catwalk-qty-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--catwalk-cart-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.catwalk-qty-btn:hover {
  background-color: var(--catwalk-cart-bg-light);
}

.catwalk-qty-input {
  width: 50px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--catwalk-cart-border);
  border-right: 1px solid var(--catwalk-cart-border);
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  appearance: textfield;
  -moz-appearance: textfield;
}

.catwalk-qty-input::-webkit-outer-spin-button,
.catwalk-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
   CART ACTIONS ROW
   ============================================ */
.catwalk-cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  margin-top: 20px;
  border-top: 1px solid var(--catwalk-border);
  flex-wrap: wrap;
  gap: 20px;
}

.catwalk-coupon-form {
  display: flex;
  gap: 10px;
}

.catwalk-coupon-input {
  width: 200px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--catwalk-cart-border);
  font-family: "Jost", sans-serif;
  font-size: 14px;
  color: var(--catwalk-cart-text);
}

.catwalk-coupon-input::placeholder {
  color: var(--catwalk-text-muted);
}

.catwalk-coupon-btn {
  height: 48px;
  padding: 0 25px;
  background-color: var(--catwalk-secondary);
  color: var(--catwalk-text-white);
  border: none;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.catwalk-coupon-btn:hover {
  background-color: var(--color-secondary-hover);
}

.catwalk-update-cart-btn {
  height: 48px;
  padding: 0 30px;
  background-color: var(--catwalk-text-secondary);
  color: var(--catwalk-text-white);
  border: none;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.catwalk-update-cart-btn:hover {
  background-color: var(--catwalk-text-muted);
}

/* ============================================
   CART TOTALS SIDEBAR
   ============================================ */
.catwalk-cart-totals {
  background-color: #fff;
  padding: 30px;
  border: 1px solid var(--catwalk-border);
  position: sticky;
  top: 120px;
}

.catwalk-cart-totals-title {
  font-family: "Jost", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--catwalk-border);
}

.catwalk-cart-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-family: "Jost", sans-serif;
  font-size: 15px;
  border-bottom: 1px solid var(--catwalk-border-light);
}

.catwalk-cart-totals-row:last-of-type {
  border-bottom: none;
}

.catwalk-cart-totals-label {
  color: var(--catwalk-text-primary, #171517);
  font-weight: 400;
}

.catwalk-cart-totals-value {
  color: var(--catwalk-text-primary, #171517);
  font-weight: 500;
}

.catwalk-cart-totals-row.total {
  padding: 20px 0;
  margin-top: 10px;
  border-top: 2px solid var(--catwalk-cart-text);
  border-bottom: none;
}

.catwalk-cart-totals-row.total .catwalk-cart-totals-label,
.catwalk-cart-totals-row.total .catwalk-cart-totals-value {
  font-size: 18px;
  font-weight: 600;
}

/* Checkout Button */
.catwalk-checkout-btn {
  display: block;
  width: 100%;
  height: 54px;
  background-color: var(--catwalk-cart-primary);
  color: var(--catwalk-text-white);
  border: none;
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 25px;
  text-align: center;
  line-height: 54px;
  text-decoration: none;
}

.catwalk-checkout-btn:hover {
  background-color: var(--catwalk-cart-primary-hover);
  color: var(--catwalk-text-white);
  text-decoration: none;
}

/* Continue Shopping Link */
.catwalk-continue-shopping {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  text-decoration: none;
  margin-top: 20px;
  transition: color 0.2s ease;
}

.catwalk-continue-shopping:hover {
  color: var(--catwalk-cart-primary);
}

/* ============================================
   EMPTY CART
   ============================================ */
.catwalk-cart-empty {
  text-align: center;
  padding: 80px 20px;
}

.catwalk-cart-empty-icon {
  font-size: 80px;
  color: var(--catwalk-cart-border);
  margin-bottom: 20px;
}

.catwalk-cart-empty h2 {
  font-family: "Jost", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  margin: 0 0 15px 0;
}

.catwalk-cart-empty p {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  color: var(--catwalk-cart-text-secondary);
  margin: 0 0 30px 0;
}

.catwalk-cart-empty .catwalk-checkout-btn {
  display: inline-block;
  width: auto;
  padding: 0 40px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 991px) {
  .catwalk-cart-container {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 30px;
  }

  .catwalk-cart-totals {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  /* Banner */
  .catwalk-cart-banner {
    padding: 36px 0 24px;
  }

  .catwalk-cart-banner h1 {
    font-size: 32px;
  }

  /* Steps: clean connector-line stepper (circle numbers + labels below) */
  .catwalk-cart-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 0;
    margin: 24px auto 0;
    padding: 0 12px;
    max-width: 480px;
    background: transparent;
    flex-wrap: nowrap;
    position: relative;
  }

  .catwalk-cart-step {
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-self: start;
    text-align: center;
    padding: 0 2px;
    background: transparent !important;
    color: var(--catwalk-text-secondary) !important;
    font-size: 10px;
    letter-spacing: 0.2px;
    line-height: 1.2;
    word-break: keep-all;
    overflow-wrap: anywhere;
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 72px;
  }

  .catwalk-cart-step .catwalk-step-label {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .catwalk-cart-step.active {
    color: var(--catwalk-cart-primary, var(--catwalk-primary)) !important;
    font-weight: 600;
  }

  .catwalk-cart-step-number {
    width: 32px;
    height: 32px;
    background: #fff;
    border: 2px solid var(--catwalk-border, #d6d6d6);
    color: var(--catwalk-text-secondary);
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
    flex-shrink: 0;
  }

  .catwalk-cart-step.active .catwalk-cart-step-number {
    background: var(--catwalk-cart-primary, var(--catwalk-primary));
    border-color: var(--catwalk-cart-primary, var(--catwalk-primary));
    color: #fff;
  }

  /* Connector line between step circles */
  .catwalk-cart-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: var(--catwalk-border, #d6d6d6);
    z-index: 0;
  }

  /* Cart section padding */
  .catwalk-cart-section {
    padding: 30px 0;
  }

  .catwalk-cart-container {
    padding: 0 16px;
    gap: 24px;
  }

  /* Cart row: image left, name + price + qty/subtotal on right */
  .catwalk-cart-table thead {
    display: none;
  }

  .catwalk-cart-table tbody tr {
    display: grid;
    grid-template-columns: 90px auto 1fr;
    grid-template-areas:
      "image name name"
      "image price price"
      "image qty subtotal";
    gap: 8px 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--catwalk-border);
    position: relative;
  }

  .catwalk-cart-table tbody td {
    padding: 0;
    border: none;
    display: block;
  }

  .catwalk-cart-table .cart-thumbnail {
    grid-area: image;
    width: 90px;
  }

  .catwalk-cart-table .cart-thumbnail img {
    width: 90px;
    height: 110px;
    object-fit: cover;
  }

  .catwalk-cart-table .cart-product-name {
    grid-area: name;
    padding-right: 36px;
    font-size: 14px;
    line-height: 1.35;
    align-self: start;
  }

  .catwalk-cart-table .cart-price {
    grid-area: price;
    width: auto;
    font-size: 13px;
    color: var(--catwalk-cart-text-secondary);
    align-self: center;
    white-space: nowrap;
  }

  .catwalk-cart-table .cart-quantity {
    grid-area: qty;
    width: auto;
    align-self: center;
  }

  .catwalk-cart-table .cart-subtotal {
    grid-area: subtotal;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    align-self: center;
    padding-right: 0;
    white-space: nowrap;
  }

  .catwalk-cart-table .cart-remove {
    position: absolute;
    top: 12px;
    right: 0;
    width: auto;
    padding: 0;
    text-align: right;
  }

  .catwalk-cart-remove-btn {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }

  /* Compact qty controls on mobile */
  .catwalk-qty-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .catwalk-qty-input {
    width: 40px;
    height: 32px;
    font-size: 13px;
  }

  /* Cart actions */
  .catwalk-cart-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 20px 0;
    gap: 14px;
  }

  .catwalk-continue-shopping {
    margin-top: 0;
    justify-content: center;
  }

  .catwalk-coupon-form {
    flex-direction: row;
    gap: 8px;
  }

  .catwalk-coupon-input {
    width: 100%;
    height: 42px;
    font-size: 13px;
    padding: 0 14px;
  }

  .catwalk-coupon-btn,
  .catwalk-update-cart-btn {
    height: 42px;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  /* Cart Totals sidebar — compact */
  .catwalk-cart-totals {
    padding: 20px;
  }

  .catwalk-cart-totals-title {
    font-size: 18px;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
  }

  .catwalk-cart-totals-row {
    padding: 9px 0;
    font-size: 13px;
  }

  .catwalk-cart-totals-row.total {
    padding: 14px 0;
  }

  .catwalk-cart-totals-row.total .catwalk-cart-totals-label,
  .catwalk-cart-totals-row.total .catwalk-cart-totals-value {
    font-size: 15px;
  }

  .catwalk-checkout-btn {
    height: 46px;
    line-height: 46px;
    font-size: 13px;
    letter-spacing: 1px;
    margin-top: 18px;
  }
}

@media (max-width: 480px) {
  .catwalk-cart-banner {
    padding: 28px 0 20px;
  }

  .catwalk-cart-banner h1 {
    font-size: 26px;
    letter-spacing: 0.5px;
  }

  .catwalk-cart-steps {
    padding: 0 8px;
  }

  .catwalk-cart-step {
    padding: 0 2px;
    font-size: 9px;
    letter-spacing: 0.2px;
  }

  .catwalk-cart-step-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .catwalk-cart-step:not(:last-child)::after {
    top: 13px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
  }

  .catwalk-cart-section {
    padding: 24px 0;
  }

  .catwalk-cart-container {
    padding: 0 12px;
  }

  /* Tighter cart row on small phones */
  .catwalk-cart-table tbody tr {
    grid-template-columns: 76px auto 1fr;
    gap: 6px 12px;
    padding: 14px 0;
  }

  .catwalk-cart-table .cart-thumbnail,
  .catwalk-cart-table .cart-thumbnail img {
    width: 76px;
  }

  .catwalk-cart-table .cart-thumbnail img {
    height: 95px;
  }

  .catwalk-cart-table .cart-product-name {
    font-size: 13px;
    padding-right: 32px;
  }

  .catwalk-cart-totals {
    padding: 16px;
  }

  .catwalk-cart-totals-title {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .catwalk-cart-totals-row {
    padding: 8px 0;
    font-size: 13px;
  }

  .catwalk-checkout-btn {
    height: 44px;
    line-height: 44px;
    font-size: 12px;
  }

  .catwalk-coupon-input {
    height: 40px;
    font-size: 12px;
  }

  .catwalk-coupon-btn,
  .catwalk-update-cart-btn {
    height: 40px;
    padding: 0 14px;
    font-size: 11px;
  }
}

/* ============================================
   GUEST CHECKOUT POPUP CARD
   ============================================ */
#GuestCheckout .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: 0 15px 40px rgba(var(--catwalk-primary-rgb), 0.15);
  overflow: hidden;
}

#GuestCheckout .modal-body {
  padding: 50px;
}

#GuestCheckout .close-btn-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

#GuestCheckout .close {
  opacity: 0.5;
  transition: opacity 0.3s;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  outline: none;
  padding: 0;
  margin: 0;
}

#GuestCheckout .close:hover {
  opacity: 1;
}

.popup-title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--catwalk-text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.catwalk-form-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--catwalk-secondary);
  margin-bottom: 8px;
}

.or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 30px 0;
  color: var(--catwalk-text-muted);
  font-size: 13px;
  letter-spacing: 1px;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--catwalk-border);
}

.or-divider:not(:empty)::before {
  margin-right: 15px;
}

.or-divider:not(:empty)::after {
  margin-left: 15px;
}

.catwalk-link-dark {
  color: var(--catwalk-text-primary);
  text-decoration: none;
  transition: color 0.3s;
}

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

/* ============================================
   CART DROPDOWN & MODALS
   ============================================ */

/* Cart Count Styling */
.cart-count {
  position: absolute;
  top: -5px;
  right: -8px;
  background: var(--catwalk-primary, #ff69b4);
  color: #fff;
  border-radius: var(--catwalk-radius-circle, 50%);
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  text-align: center;
  font-weight: 700;
  border-top: 1px solid var(--catwalk-border-light);
}

/* Sharp Edges & Dark Theme for Dropdown */
.catwalk-cart-dropdown {
  background-color: var(--catwalk-bg-dark);
  border: none;
  min-width: 330px;
  margin-top: 10px;
  border-radius: 0 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
}
.catwalk-cart-dropdown:before {
  content: "";
  position: absolute;
  top: -8px;
  right: 12px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--catwalk-bg-dark);
  z-index: 1001;
}

/* Scrollbar */
.c-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.c-scrollbar::-webkit-scrollbar-track {
  background: var(--catwalk-text-primary);
}
.c-scrollbar::-webkit-scrollbar-thumb {
  background: var(--catwalk-text-secondary);
  border-radius: 0;
}
.c-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--catwalk-text-secondary);
}

/* Buttons */
.btn-catwalk-primary {
  background-color: var(--catwalk-primary, #ff69b4);
  border: 1px solid var(--catwalk-primary, #ff69b4);
  border-radius: 0 !important;
  font-weight: 500;
  padding: 8px 0;
  color: #fff;
}
.btn-catwalk-primary:hover {
  background-color: var(--catwalk-primary-hover);
  color: #fff;
}
.btn-outline-light {
  border-color: #fff;
  color: #fff;
  border-radius: 0 !important;
  padding: 8px 0;
  background: transparent;
}
.btn-outline-light:hover {
  background: var(--catwalk-bg-main);
  color: var(--catwalk-text-primary);
}
.dc-image img {
  border-radius: 0 !important;
}

/* Sharp Edges for Modals */
.catwalk-popup-card {
  border-radius: 0 !important;
  border: none;
  overflow: hidden;
}
.catwalk-popup-card .btn,
.catwalk-popup-card .form-control,
.catwalk-added-product {
  border-radius: 0 !important;
}

.catwalk-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1050;
  font-size: 24px;
  color: var(--catwalk-text-primary);
  border: none;
  background: transparent;
  opacity: 0.5;
}
.catwalk-modal-close:hover {
  opacity: 1;
}

.catwalk-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: var(--catwalk-radius-circle, 50%); /* Icon circle stays round */
  font-size: 30px;
  background-color: #28a745;
  color: white;
}
.catwalk-text-primary {
  color: var(--catwalk-primary, #ff69b4);
}

.btn-outline-dark {
  border-color: #ccc;
  background: transparent;
}
.btn-dark {
  background-color: #343a40;
  border-color: #343a40;
  border-radius: 0;
  color: #fff;
}

/* Quick View Elements */
.catwalk-qv-img {
  height: 500px;
  object-fit: cover;
}
.catwalk-qv-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

/* Radio Items */
.catwalk-radio-item input {
  display: none;
}
.catwalk-radio-item label {
  display: block;
  padding: 5px 15px;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 0;
  transition: all 0.2s;
}
.catwalk-radio-item input:checked + label {
  border-color: var(--catwalk-text-primary);
  background: var(--catwalk-text-primary);
  color: #fff;
}

/* Color Swatches */
.catwalk-color-radio input {
  display: none;
}
.catwalk-color-swatch {
  display: block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 0;
  margin: 0;
  cursor: pointer;
  border: 2px solid var(--catwalk-border-dark);
  transition: all 0.3s ease;
  position: relative;
}
.catwalk-color-radio input:checked + .catwalk-color-swatch {
  border-color: var(--catwalk-secondary);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--catwalk-secondary);
}

.catwalk-color-radio:hover .catwalk-color-swatch {
  transform: scale(1.1);
}

/* ============================================
   STOCK CHANGES MODAL
   ============================================ */
.catwalk-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.catwalk-modal {
  background: #fff;
  max-width: 500px;
  width: 90%;
  border-radius: var(--catwalk-radius-sm, 4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.catwalk-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--catwalk-border-light, #eee);
}

.catwalk-modal-header h3 {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--catwalk-cart-text, #333);
}

.catwalk-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  line-height: 1;
}

.catwalk-modal-close:hover {
  color: #333;
}

.catwalk-modal-body {
  padding: 16px 24px;
}

.catwalk-modal-body p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

.catwalk-stock-changes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.catwalk-stock-changes-list li {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--catwalk-radius-sm, 4px);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.catwalk-stock-changes-list li i {
  font-size: 18px;
  flex-shrink: 0;
}

.stock-change-removed {
  background: #fef2f2;
  color: #991b1b;
}

.stock-change-removed i {
  color: #dc2626;
}

.stock-change-adjusted {
  background: #fffbeb;
  color: #92400e;
}

.stock-change-adjusted i {
  color: #f59e0b;
}

.stock-change-variant {
  color: #888;
  font-size: 13px;
}

.catwalk-modal-footer {
  padding: 12px 24px 20px;
  text-align: right;
}

.catwalk-modal-footer .catwalk-checkout-btn {
  min-width: 100px;
}

/* ============================================
   STOCK CAP ALERT (Add to Cart Modal)
   ============================================ */
.catwalk-stock-cap-alert {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 12px 16px;
}

/* --- catwalk-mobile-menu.css --- */
/* ============================================
   CATWALK MOBILE MENU
   Breakpoint: 1280px
   ============================================ */

@media (min-width: 1280px) {
  .mobile-menu-toggle,
  .mobile-menu-overlay,
  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 1279px) {
  .catwalk-nav .nav-left,
  .catwalk-nav .nav-menu {
    display: none !important;
  }

  .catwalk-nav .nav-wrapper {
    padding: 12px 20px !important;
  }

  .catwalk-nav .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--catwalk-bg-main);
    color: var(--catwalk-text-primary);
    cursor: pointer;
    margin-left: 0 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 0.2s ease,
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .mobile-menu-toggle:hover {
    color: var(--catwalk-primary);
    border-color: var(--catwalk-primary);
  }

  .mobile-menu-toggle:focus-visible,
  .mobile-menu-close:focus-visible,
  .mobile-submenu-toggle:focus-visible,
  .mobile-menu-link:focus-visible {
    outline: 2px solid var(--catwalk-primary);
    outline-offset: 2px;
  }

  .mobile-menu-toggle .hamburger-icon,
  .mobile-menu-toggle .hamburger-icon::before,
  .mobile-menu-toggle .hamburger-icon::after {
    width: 20px;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease,
      top 0.2s ease;
  }

  .mobile-menu-toggle .hamburger-icon {
    position: relative;
    display: block;
  }

  .mobile-menu-toggle .hamburger-icon::before,
  .mobile-menu-toggle .hamburger-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .mobile-menu-toggle .hamburger-icon::before {
    top: -6px;
  }

  .mobile-menu-toggle .hamburger-icon::after {
    top: 6px;
  }

  .mobile-menu-toggle.active .hamburger-icon {
    opacity: 0;
  }

  .mobile-menu-toggle.active .hamburger-icon::before {
    top: 0;
    opacity: 1;
    transform: rotate(45deg);
  }

  .mobile-menu-toggle.active .hamburger-icon::after {
    top: 0;
    opacity: 1;
    transform: rotate(-45deg);
  }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
    z-index: 9998;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 92vw);
    height: 100dvh;
    background-color: var(--catwalk-bg-main);
    color: var(--catwalk-text-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 9999;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-right: env(safe-area-inset-right, 0);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu.active {
    transform: translateX(0);
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--catwalk-border);
    position: sticky;
    top: 0;
    background: var(--catwalk-bg-main);
    z-index: 1;
  }

  .mobile-logo img {
    max-height: 24px;
    width: auto;
    display: block;
  }

  .mobile-menu-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--catwalk-border);
    border-radius: var(--catwalk-radius-circle, 50%);
    background: transparent;
    color: var(--catwalk-text-primary);
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 0.2s ease,
      color 0.2s ease;
  }

  .mobile-menu-close:hover {
    color: var(--catwalk-primary);
    border-color: var(--catwalk-primary);
  }

  .mobile-menu-list,
  .mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu-item {
    border-bottom: 1px solid var(--catwalk-border);
  }

  .mobile-menu-row {
    display: flex;
    align-items: stretch;
    width: 100%;
  }

  .mobile-menu-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: var(--catwalk-text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu-link:hover {
    background-color: var(--catwalk-bg-light);
    color: var(--catwalk-primary);
  }

  .mobile-menu-link.level-1 {
    padding-left: 34px;
    font-size: 14px;
  }

  .mobile-menu-link.level-2,
  .mobile-menu-link.level-3 {
    padding-left: 48px;
    font-size: 14px;
  }

  .mobile-submenu-toggle {
    width: 48px;
    min-width: 48px;
    border: 0;
    border-left: 1px solid var(--catwalk-border);
    background: transparent;
    color: var(--catwalk-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .mobile-submenu-toggle:hover {
    color: var(--catwalk-primary);
    background-color: var(--catwalk-bg-light);
  }

  .mobile-submenu-toggle i {
    font-size: 18px;
    transition: transform 0.2s ease;
  }

  .mobile-menu-item.expanded > .mobile-menu-row .mobile-submenu-toggle i {
    transform: rotate(180deg);
  }

  .mobile-submenu {
    background: var(--catwalk-bg-light);
  }

  .mobile-menu-count {
    margin-left: 6px;
    color: var(--catwalk-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  .nav-icons > li:last-child {
    display: none !important;
  }

  .nav-icons > li.catwalk-header-dropdown-wrapper {
    display: none !important;
  }

  /* Cart dropdown becomes a slide-in drawer on mobile */
  #cart_items .catwalk-cart-dropdown {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 92vw !important;
    max-width: 420px !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.25s ease;
    z-index: 9999;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 !important;
    -webkit-overflow-scrolling: touch;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
  }

  body.cart-drawer-open #cart_items .catwalk-cart-dropdown {
    transform: translateX(0) !important;
  }

  /* Ensure inner content is fully visible & not constrained by legacy widths */
  #cart_items .catwalk-cart-dropdown > li,
  #cart_items .catwalk-cart-dropdown .dropdown-cart,
  #cart_items .catwalk-cart-dropdown .dropdown-cart-items,
  #cart_items .catwalk-cart-dropdown .dc-item,
  #cart_items .catwalk-cart-dropdown .dc-total,
  #cart_items .catwalk-cart-dropdown .dc-content,
  #cart_items .catwalk-cart-dropdown .dc-image {
    opacity: 1 !important;
    visibility: visible !important;
  }

  #cart_items .catwalk-cart-dropdown > li {
    display: block;
    width: 100%;
    list-style: none;
  }

  #cart_items .catwalk-cart-dropdown .dropdown-cart {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Override legacy float layout so cart items render correctly inside drawer */
  #cart_items .catwalk-cart-dropdown .dc-image {
    float: none !important;
    width: auto !important;
    flex-shrink: 0;
  }

  #cart_items .catwalk-cart-dropdown .dc-content {
    float: none !important;
    width: auto !important;
    padding-left: 0 !important;
    min-width: 0;
  }

  #cart_items .catwalk-cart-dropdown .dc-item {
    padding: 0 !important;
  }

  /* Hide desktop arrow on mobile */
  #cart_items .catwalk-cart-dropdown:before {
    display: none !important;
  }

  #cart_items .catwalk-cart-dropdown .dropdown-cart-items {
    max-height: none !important;
  }

  .catwalk-cart-drawer-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    background: var(--catwalk-bg-dark);
    z-index: 1;
    list-style: none;
  }

  .catwalk-cart-drawer-title {
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .catwalk-cart-drawer-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--catwalk-radius-circle, 50%);
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 0.2s ease,
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .catwalk-cart-drawer-close:hover,
  .catwalk-cart-drawer-close:focus-visible {
    color: var(--catwalk-primary);
    border-color: var(--catwalk-primary);
    outline: none;
  }

  .cart-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
    z-index: 9998;
  }

  .cart-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  body.cart-drawer-open {
    overflow: hidden;
  }

  .mobile-menu-lang-link .mobile-menu-flag {
    width: 18px;
    height: 12px;
    margin-right: 10px;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .mobile-menu-link.active {
    color: var(--catwalk-primary);
    font-weight: 600;
  }

  .mobile-menu-check {
    margin-left: auto;
    color: var(--catwalk-primary);
    font-size: 18px;
  }
}

/* Hide drawer header on desktop */
@media (min-width: 1280px) {
  .catwalk-cart-drawer-header {
    display: none !important;
  }

  .cart-overlay {
    display: none !important;
  }
}

/* High-specificity defensive overrides for the mobile cart drawer */
@media (max-width: 1279px) {
  html body #cart_items.dropdown ul.catwalk-cart-dropdown {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 92vw !important;
    max-width: 420px !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(100%) !important;
    z-index: 9999 !important;
  }

  html body.cart-drawer-open #cart_items.dropdown ul.catwalk-cart-dropdown {
    transform: translateX(0) !important;
  }

  html body .cart-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9998 !important;
  }
}

@media (max-width: 480px) {
  .mobile-menu {
    width: 100%;
    max-width: 100%;
  }

  .catwalk-nav .nav-right .nav-icons {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-overlay,
  .mobile-menu-toggle,
  .mobile-menu-toggle .hamburger-icon,
  .mobile-menu-toggle .hamburger-icon::before,
  .mobile-menu-toggle .hamburger-icon::after,
  .mobile-menu-link,
  .mobile-submenu-toggle,
  .mobile-submenu-toggle i {
    transition: none !important;
  }
}

/* --- catwalk-mobile-listing.css --- */
/* ============================================================================
   CATWALK MOBILE PRODUCT LISTING — Touch-friendly UX optimisation
   Applies only to viewports <= 991px (Bootstrap lg breakpoint)
   ============================================================================ */

@media (max-width: 991.98px) {
  /* ------------------------------------------------------------------
       PAGE-LEVEL — prevent any accidental horizontal overflow
       ------------------------------------------------------------------ */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ------------------------------------------------------------------
       SHOP BANNER — Reduce wasted vertical space on small screens
       ------------------------------------------------------------------ */
  .shop-banner {
    padding: 28px 0 22px !important;
    margin-bottom: 18px !important;
  }

  .shop-banner h1 {
    font-size: 1.65rem !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
  }

  .shop-banner .breadcrumb-item,
  .shop-banner .breadcrumb-item a,
  .shop-banner .breadcrumb-item.active {
    font-size: 11px !important;
    letter-spacing: 0.6px !important;
  }

  /* Tighten section vertical padding */
  section.py-4 {
    padding-top: 0 !important;
    padding-bottom: 24px !important;
  }

  /* Container side padding tweak — must be >= 15px so Bootstrap's row
     (margin: -15px) does not overflow the viewport. */
  .container-fluid.px-5 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .col-lg-10[style*="padding-left: 28px"] {
    padding-left: 0 !important;
  }

  /* Keep the listing column's own gutters consistent with the row gutters
     to prevent overflow accumulation. */
  .col-lg-10.col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ------------------------------------------------------------------
       FILTER / SORT BAR — Sticky, accessible, clearer
       ------------------------------------------------------------------ */
  .catwalk-mobile-filter-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--catwalk-bg-main);
    gap: 8px !important;
    padding: 10px 15px;
    margin: 0 -15px 14px !important;
    border-bottom: 1px solid var(--catwalk-border);
  }

  .catwalk-mobile-btn {
    min-height: 44px;
    padding: 10px 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    border-radius: 0 !important;
    border: 1px solid var(--catwalk-border-dark) !important;
    font-weight: 600 !important;
  }

  .catwalk-mobile-btn i {
    font-size: 16px;
  }

  /* Active state hint when filters/sort applied */
  .catwalk-mobile-btn.has-active {
    border-color: var(--catwalk-primary) !important;
    color: var(--catwalk-primary) !important;
  }

  .catwalk-mobile-btn .filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--catwalk-primary);
    color: var(--catwalk-text-white);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
  }

  /* ------------------------------------------------------------------
       PRODUCT GRID — Better gutters and spacing
       Note: keep row margins at -15px to avoid horizontal scroll caused by
       Bootstrap row width calc. Use column padding for gutter control.
       ------------------------------------------------------------------ */
  #product-list.row {
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding-left: 9px;
    padding-right: 9px;
  }

  #product-list > .col-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .catwalk-listing-item {
    margin-bottom: 18px !important;
  }

  /* ------------------------------------------------------------------
       PRODUCT CARD — Mobile-first layout
       ------------------------------------------------------------------ */
  .catwalk-listing-card {
    margin-bottom: 8px;
    background: var(--catwalk-bg-main);
    overflow: hidden;
  }

  /* Disable hover transforms / borders that fire on tap */
  .catwalk-listing-card:hover {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    background: var(--catwalk-bg-main) !important;
    z-index: auto !important;
  }

  .catwalk-listing-card:hover .catwalk-listing-image img {
    transform: none !important;
  }

  .catwalk-listing-image {
    background: var(--catwalk-bg-product);
  }

  /* ------------------------------------------------------------------
       WISHLIST BUTTON — Larger tap target, single icon (no compare)
       ------------------------------------------------------------------ */
  .catwalk-listing-wishlist {
    width: 38px !important;
    height: 38px !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 17px !important;
    background: rgba(var(--catwalk-bg-main-rgb), 0.95) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: var(--catwalk-shadow-sm) !important;
  }

  .catwalk-listing-wishlist.active {
    color: var(--catwalk-primary) !important;
  }

  /* HIDE compare button on mobile — power-user feature, adds clutter */
  .catwalk-listing-compare {
    display: none !important;
  }

  /* ------------------------------------------------------------------
       BADGES — Smaller and clearer at the top-left
       ------------------------------------------------------------------ */
  .catwalk-listing-badge {
    top: 10px !important;
    left: 10px !important;
    height: 22px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }

  /* ------------------------------------------------------------------
       MOBILE QUICK CART BUTTON — Always visible bottom-right of image
       ------------------------------------------------------------------ */
  .catwalk-listing-mobile-cart {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--catwalk-radius-circle, 50%);
    background: var(--catwalk-secondary);
    color: var(--catwalk-text-white);
    font-size: 18px;
    cursor: pointer;
    z-index: 6;
    box-shadow: var(--catwalk-shadow-md);
    transition:
      transform 0.15s ease,
      background-color 0.2s ease;
  }

  .catwalk-listing-mobile-cart:active {
    transform: scale(0.92);
    background: var(--catwalk-primary);
  }

  .catwalk-listing-mobile-cart:hover {
    background: var(--catwalk-primary);
    color: var(--catwalk-text-white);
  }

  .catwalk-listing-mobile-cart .ri-add-line,
  .catwalk-listing-mobile-cart i {
    line-height: 1;
  }

  /* When the card has variants, show a subtle dot indicator on the cart icon */
  .catwalk-listing-mobile-cart.has-variants::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: var(--catwalk-radius-circle, 50%);
    background: var(--catwalk-primary);
    border: 1.5px solid var(--catwalk-secondary);
  }

  /* Hide the legacy hover cart wrap on mobile (replaced by mobile cart btn) */
  .catwalk-listing-cart-wrap {
    display: none !important;
  }

  /* ------------------------------------------------------------------
       PRODUCT INFO — Left-aligned, clearer hierarchy
       ------------------------------------------------------------------ */
  .catwalk-listing-info {
    padding: 10px 4px 6px !important;
    text-align: left !important;
  }

  .catwalk-listing-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
    color: var(--catwalk-text-primary) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
  }

  .catwalk-listing-title a {
    color: inherit !important;
  }

  .catwalk-listing-price {
    margin-top: 2px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--catwalk-text-primary) !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .catwalk-listing-current-price {
    color: var(--catwalk-text-primary) !important;
    font-weight: 600 !important;
  }

  .catwalk-listing-old-price {
    font-size: 12px !important;
    margin-right: 0 !important;
    color: var(--catwalk-text-muted) !important;
  }

  /* ------------------------------------------------------------------
       COLOR SWATCHES — Visible by default on mobile
       ------------------------------------------------------------------ */
  .catwalk-listing-colors {
    opacity: 1 !important;
    transform: none !important;
    justify-content: flex-start !important;
    margin-top: 6px !important;
    gap: 6px !important;
  }

  .catwalk-color-dot {
    width: 16px;
    height: 16px;
  }

  .catwalk-color-dot::before {
    width: 12px;
    height: 12px;
  }

  .catwalk-color-more {
    font-size: 10px !important;
    line-height: 16px !important;
    align-self: center;
  }

  /* ------------------------------------------------------------------
       GALLERY DOTS — Minor positioning fix on mobile
       ------------------------------------------------------------------ */
  .product-gallery-dots {
    bottom: 6px !important;
  }

  .gallery-dot {
    width: 6px !important;
    height: 6px !important;
  }

  /* ------------------------------------------------------------------
       LOAD MORE BUTTON — Smaller, outline-style on mobile
       ------------------------------------------------------------------ */
  #load-more-container {
    margin-top: 8px !important;
  }

  #load-more-btn {
    padding: 11px 28px !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    background: transparent !important;
    color: var(--catwalk-text-primary) !important;
    border: 1.5px solid var(--catwalk-text-primary) !important;
    border-radius: 0 !important;
    min-height: 44px;
  }

  #load-more-btn:hover,
  #load-more-btn:focus {
    background: var(--catwalk-text-primary) !important;
    color: var(--catwalk-text-white) !important;
  }

  /* ------------------------------------------------------------------
       MOBILE FILTER DRAWER — Tighter accordion spacing when collapsed
       ------------------------------------------------------------------ */
  .catwalk-filter-group .catwalk-filter-header {
    padding: 12px 0 !important;
  }

  .catwalk-filter-group .catwalk-filter-options {
    padding-bottom: 12px !important;
  }

  /* Footer with both Clear and Apply actions */
  .catwalk-sidebar-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .catwalk-sidebar-footer .catwalk-clear-btn {
    flex: 0 0 auto;
    padding: 14px 18px;
    background: transparent;
    color: var(--catwalk-text-primary);
    border: 1px solid var(--catwalk-border-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .catwalk-sidebar-footer .catwalk-clear-btn:hover {
    background: var(--catwalk-bg-light);
  }

  .catwalk-sidebar-footer .catwalk-apply-btn {
    flex: 1 1 auto;
  }
}

/* ============================================================================
   ADD-TO-CART MODAL — Bottom-sheet style on mobile
   Applies to both #addToCart (quick view) and the post-add confirmation since
   they both render inside the same modal element.
   ============================================================================ */
@media (max-width: 767.98px) {
  /* Disable Bootstrap's "modal-open" right padding (prevents content shift) */
  body.modal-open {
    padding-right: 0 !important;
  }

  /* The modal viewport container — keep it pinned at viewport bottom */
  #addToCart {
    padding: 0 !important;
  }

  /* Override modal-dialog & modal-dialog-centered so the dialog wraps content
     and sticks to the bottom of the viewport (true bottom-sheet behaviour). */
  #addToCart .modal-dialog,
  #addToCart .modal-dialog.modal-dialog-centered,
  #addToCart .modal-dialog.modal-xl,
  #addToCart .modal-dialog.modal-lg {
    display: block !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    pointer-events: auto !important;
  }

  #addToCart.show .modal-dialog {
    transform: translateY(0) !important;
  }

  #addToCart .modal-content,
  #addToCart .modal-content.catwalk-popup-card {
    border-radius: 14px 14px 0 0 !important;
    border: none !important;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(var(--catwalk-black-rgb), 0.18);
    overflow: hidden;
  }

  /* Drag-handle hint at the top of the sheet */
  #addToCart .modal-content::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--catwalk-border-dark);
    border-radius: var(--catwalk-radius-xs, 2px);
    z-index: 10;
    pointer-events: none;
  }

  /* Modal body becomes the only scroll surface */
  #addToCart .modal-body,
  #addToCart .catwalk-quickview-body,
  #addToCart .catwalk-added-body {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    padding-top: 22px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* ---- Quick View: stack image + info, fit gallery to mobile ---- */
  #addToCart .catwalk-quickview-body .row.no-gutters > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #addToCart .catwalk-qv-carousel {
    margin: 0 -16px 14px;
    background: var(--catwalk-bg-product);
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }

  #addToCart .catwalk-qv-carousel .carousel-item {
    transition: transform 0.4s ease;
  }

  #addToCart .catwalk-qv-img {
    height: auto !important;
    max-height: 60vh;
    object-fit: contain !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    -webkit-user-drag: none;
  }

  #addToCart .carousel-control-prev,
  #addToCart .carousel-control-next {
    width: 36px;
    opacity: 0.7;
  }

  #addToCart .catwalk-qv-info {
    padding: 6px 0 !important;
  }

  #addToCart .catwalk-qv-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  /* Action button row in quick view: stack vertically on phones for full tap targets */
  #addToCart .catwalk-qv-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  #addToCart .catwalk-qv-actions .btn-catwalk,
  #addToCart .catwalk-qv-actions .catwalk-btn-add-cart,
  #addToCart .catwalk-qv-actions .catwalk-btn-buy-now {
    flex: 1 1 100%;
    min-width: 0;
    margin-right: 0 !important;
    min-height: 48px;
  }

  #addToCart .catwalk-qv-actions .catwalk-modal-action-btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 48px;
  }

  #addToCart .catwalk-modal-close {
    top: 10px;
    right: 10px;
    z-index: 11;
  }

  /* ---- AddedToCart confirmation modal — already block-level layout ---- */
  #addToCart .catwalk-added-actions .btn,
  #addToCart .catwalk-added-actions .btn-block {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================================
   LOAD MORE — spinner + skeleton (theme-wide, not just mobile)
   Bootstrap 4.1.1 has no built-in spinner (added in 4.2), so we ship our own.
   ============================================================================ */
#load-more-btn .btn-text,
#load-more-btn .btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#load-more-btn .btn-loading {
  letter-spacing: 0.05em;
}

#load-more-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

/* Custom spinner — 14px circle, theme-tinted, smooth rotation.
   `!important` and explicit `from` keyframe protect the animation against
   parent `transition: all` rules and Bootstrap btn transitions. */
.catwalk-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--catwalk-radius-circle, 50%);
  flex-shrink: 0;
  transform-origin: 50% 50%;
  animation: catwalk-spin 0.7s linear infinite !important;
  transition: none !important;
  will-change: transform;
}

@keyframes catwalk-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton placeholder cards — pulse opacity for a gentler, calmer feel
   than a shimmer gradient (matches user request). */
.catwalk-skeleton-card {
  display: block;
  background: var(--catwalk-bg-main);
}

.catwalk-skeleton-image,
.catwalk-skeleton-line {
  background-color: var(--catwalk-bg-light);
  border-radius: 0;
  animation: catwalk-skeleton-pulse 1.4s ease-in-out infinite;
}

.catwalk-skeleton-image {
  width: 100%;
  aspect-ratio: var(--catwalk-product-aspect, 1 / 1);
  margin-bottom: 12px;
}

.catwalk-skeleton-line {
  height: 12px;
  margin-bottom: 8px;
}

.catwalk-skeleton-line.is-short {
  width: 50%;
}

.catwalk-skeleton-line.is-medium {
  width: 75%;
}

@keyframes catwalk-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Reduced motion: keep the pulse but slow it down; spinner stays as is
   but slower for users sensitive to fast motion. */
@media (prefers-reduced-motion: reduce) {
  .catwalk-spinner {
    animation-duration: 1.5s !important;
  }

  .catwalk-skeleton-image,
  .catwalk-skeleton-line {
    animation-duration: 2.2s;
  }
}

/* ============================================================================
   FINER MOBILE BREAKPOINT — phones (<= 480px)
   ============================================================================ */
@media (max-width: 480px) {
  .shop-banner {
    padding: 22px 0 18px !important;
  }

  .shop-banner h1 {
    font-size: 1.4rem !important;
  }

  .catwalk-listing-mobile-cart {
    width: 38px;
    height: 38px;
    bottom: 8px;
    right: 8px;
    font-size: 17px;
  }

  .catwalk-listing-wishlist {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
  }
}

/* --- catwalk-search.css --- */
/* ============================================
   CATWALK SEARCH OVERLAY STYLES
   Fullscreen search based on reference theme
   ============================================ */

/* Search Overlay - Hidden by default */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--catwalk-bg-main-rgb), 0.98);
  /* Reference: Almost white, slight transparency */
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  /* Align to top */
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding-top: 120px;
  /* Space from top - reference uses approx 120-150px */
}

/* Half Screen on Desktop */
@media (min-width: 992px) {
  .search-overlay {
    height: 50vh !important;
    /* Back to half height */
    align-items: center;
    padding-top: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Prevent visual leaks */
  }
}

/* Active State */
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Search Container */
.search-overlay .search-container {
  width: 100%;
  max-width: 900px;
  /* Reference uses similar width */
  padding: 0 40px;
}

/* Close Button (X) */
.search-overlay .search-close {
  position: absolute;
  top: 40px;
  right: 55px;
  /* Match nav padding */
  background: none;
  border: none;
  font-size: 32px;
  /* Large X */
  color: var(--catwalk-text-primary);
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  transition: color 0.3s ease, transform 0.2s ease;
  font-weight: 300;
  /* Thin font */
}

.search-overlay .search-close:hover {
  color: var(--catwalk-primary);
  transform: rotate(90deg);
  /* Fun rotation on hover */
}

/* Search Form */
.search-overlay .search-form {
  position: relative;
  width: 100%;
}

/* Search Input */
.search-overlay .search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(var(--catwalk-text-primary-rgb), 0.15);
  /* Subtle underline */
  background: transparent;
  font-family: "Jost", sans-serif;
  font-size: 28px;
  /* Reference: 28.8px - large and bold */
  font-weight: 400;
  color: var(--catwalk-secondary);
  /* Near-black from reference */
  padding: 20px 60px 20px 0;
  /* Right padding for icon */
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.search-overlay .search-input::placeholder {
  color: rgba(var(--catwalk-text-primary-rgb), 0.4);
  /* Subtle placeholder */
}

.search-overlay .search-input:focus {
  border-bottom-color: var(--catwalk-primary);
  /* Pink underline on focus */
}

/* Search Icon (inside input) */
.search-overlay .search-submit {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: var(--catwalk-text-primary);
  cursor: pointer;
  padding: 10px;
  transition: color 0.3s ease;
}

.search-overlay .search-submit:hover {
  color: var(--catwalk-primary);
}

/* Search Results Container */
.search-overlay .search-results {
  margin-top: 40px;
  max-height: calc(50vh - 140px); /* Fits within 50vh overlay */
  overflow-y: auto;
  padding-right: 10px;
}

/* Results styling */
.search-overlay .search-results .title {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--catwalk-text-primary);
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--catwalk-text-primary-rgb), 0.1);
}

.search-overlay .search-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-overlay .search-results li {
  margin-bottom: 10px;
}

.search-overlay .search-results a {
  color: var(--catwalk-text-primary);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease;
  display: block;
  padding: 8px 0;
}

.search-overlay .search-results a:hover {
  color: var(--catwalk-primary);
}

/* Product results with images */
.search-overlay .search-product {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-overlay .search-product .image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 0; /* Sharp edges */
  overflow: hidden;
}

.search-overlay .search-product .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-overlay .search-product .product-name {
  font-weight: 500;
}

.search-overlay .search-product .price-box {
  font-size: 14px;
  color: var(--catwalk-primary);
}

/* Search Overlay Logo (Far Left) */
.search-overlay-logo {
  position: absolute;
  top: 50px;
  left: 60px;
  z-index: 10;
}

.search-overlay-logo img {
  height: 30px;
  /* Adjust based on logo design */
  width: auto;
}

.search-overlay-logo .text-logo {
  font-family: "Didot", "Bodoni MT", serif;
  font-size: 24px;
  color: var(--catwalk-text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Mobile/Tablet: Adjust logo position */
@media (max-width: 991px) {
  .search-overlay-logo {
    display: block;
    top: 30px;
    left: 20px;
  }

  .search-overlay-logo img {
    height: 24px;
  }
}

/* Ensure it's visible on desktop */
@media (min-width: 992px) {
  .search-overlay-logo {
    display: block !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .search-overlay {
    padding-top: 80px;
  }

  .search-overlay .search-container {
    padding: 0 20px;
  }

  .search-overlay .search-close {
    top: 20px;
    right: 20px;
    font-size: 28px;
  }

  .search-overlay .search-input {
    font-size: 22px;
    padding: 15px 50px 15px 0;
  }
}

/* --- catwalk-message-seller.css --- */
/* Message Seller Button */
.message-seller-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--catwalk-bg-main);
    border: 1px solid var(--catwalk-border) !important;
    color: var(--catwalk-text-secondary) !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--catwalk-radius-sm, 4px);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.3px;
    width: 100%;
}

.message-seller-btn:hover {
    border-color: var(--catwalk-primary) !important;
    color: var(--catwalk-primary) !important;
    background: rgba(var(--catwalk-primary-rgb), 0.05) !important;
}

.message-seller-btn:active,
.message-seller-btn:focus {
    transform: scale(0.98);
    background: rgba(var(--catwalk-primary-rgb), 0.1) !important;
    border-color: var(--catwalk-primary) !important;
    color: var(--catwalk-primary) !important;
    outline: none;
    box-shadow: none;
}
/* --- catwalk-wishlist-icon.css --- */
/* Wishlist Icon Button - Circular Design */
.catwalk-wishlist-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: var(--catwalk-bg-main);
    border: 1px solid var(--catwalk-border);
    border-radius: var(--catwalk-radius-circle, 50%);
    color: var(--catwalk-text-secondary);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}

.catwalk-wishlist-icon-btn:hover {
    border-color: var(--catwalk-text-muted);
    color: var(--catwalk-text-primary);
    background: var(--catwalk-bg-light);
}

.catwalk-wishlist-icon-btn.active {
    border-color: var(--catwalk-text-primary);
    color: var(--catwalk-text-primary);
    background: var(--catwalk-bg-light);
}

.catwalk-wishlist-icon-btn:active,
.catwalk-wishlist-icon-btn:focus {
    transform: scale(0.95);
    outline: none;
    box-shadow: none;
}

.catwalk-wishlist-icon-btn i {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive gap support */
.gap-2 {
    gap: 0.5rem !important;
}
/* --- catwalk-blog.css --- */
/* ============================================
   cat WALK BLOG SECTION STYLES
   2-column layout matching reference theme
   ============================================ */

.blog-section {
    padding: 100px 0;
    background-color: var(--catwalk-bg-main);
}

/* 2-Column Header */
.blog-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    align-items: flex-start;
}

.blog-header-left .blog-title {
    font-family: 'Jost', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--catwalk-text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

.blog-header-right {
    padding-top: 10px;
}

.blog-header-right p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--catwalk-text-secondary);
    margin-bottom: 15px;
}

.blog-header-right .blog-subtitle {
    font-weight: 500;
    color: var(--catwalk-text-primary);
}

/* Blog Posts Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.blog-post-card {
    position: relative;
    overflow: hidden;
}

.blog-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    aspect-ratio: 4 / 5;
    /* Tall images like reference theme */
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-post-card:hover .blog-image img {
    transform: scale(1.05);
}

/* Blog Content */
.blog-content {
    padding: 0;
}


.blog-meta {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.blog-line {
    display: inline-block;
    width: 25px;
    height: 1px;
    background-color: var(--catwalk-text-primary);
    margin-right: 15px;
}


.blog-date {
    color: var(--catwalk-text-muted);
    font-weight: 500;
}

.blog-post-title {
    font-family: 'Jost', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 15px;
    margin-bottom: 0;
}

.blog-post-title a {
    color: var(--catwalk-text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title a:hover {
    color: var(--catwalk-primary);
}

/* Responsive */
@media (max-width: 991px) {
    .blog-section {
        padding: 60px 0;
    }

    .blog-header {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .blog-header-left .blog-title {
        font-size: 32px;
    }

    .blog-grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .blog-section {padding: 40px 0;
    }

    .blog-header-left .blog-title {
        font-size: 28px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-image {
        aspect-ratio: 4 / 3;
        /* Shorter on mobile */
    }

    .blog-post-title {
        font-size: 20px;
    }
}

/* --- catwalk-promo.css --- */

/* ============================================
   cat WALK PROMO BANNER STYLES
   Full width section with parallax background
   ============================================ */

.catwalk-promo-banner {
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.catwalk-promo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}

.promo-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.promo-title {
    color: var(--catwalk-text-white);
    font-family: 'Jost', sans-serif;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 40px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.btn-catwalk-outline {
    display: inline-block;
    padding: 16px 45px;
    border: 2px solid var(--catwalk-text-white);
    color: var(--catwalk-text-white);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-catwalk-outline:hover {
    background: var(--catwalk-text-white);
    color: var(--catwalk-bg-footer);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .catwalk-promo-banner {
        height: 500px;
        background-attachment: scroll; /* Disable parallax on mobile/tablet for performance */
    }
    
    .promo-title {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .catwalk-promo-banner {
        height: 400px;
    }
    
    .promo-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .btn-catwalk-outline {
        padding: 14px 35px;
        font-size: 12px;
    }
}

/* ============================================
   PROMOTION BADGE — Product Cards
   ============================================ */

.catwalk-badge-promo {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    border-radius: var(--catwalk-radius-sm, 4px);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    animation: badge-pulse 2.5s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    50%       { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
}

/* ============================================
   CAMPAIGN BANNER — Storefront Hero Promo
   ============================================ */

.campaign-banner-section {
    padding: 0;
    overflow: hidden;
}

.campaign-banner-inner {
    position: relative;
    min-height: 280px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    border-radius: var(--catwalk-radius-lg, 12px);
    overflow: hidden;
    margin: 30px 0;
}

.campaign-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0,0,0,0.65) 40%, transparent 100%);
    z-index: 1;
}

.campaign-banner-content {
    position: relative;
    z-index: 2;
    padding: 50px 60px;
    max-width: 600px;
}

.campaign-banner-tag {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    margin-bottom: 16px;
}

.campaign-banner-title {
    font-family: 'Jost', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.campaign-banner-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 28px;
    line-height: 1.6;
}

.campaign-banner-btn {
    display: inline-block;
    background: #fff;
    color: #333;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 13px 35px;
    border-radius: var(--catwalk-radius-sm, 4px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.campaign-banner-btn:hover {
    background: #e74c3c;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231,76,60,0.4);
}

/* Countdown Timer */
.campaign-countdown {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.campaign-countdown-item {
    text-align: center;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border-radius: var(--catwalk-radius-md, 8px);
    padding: 10px 16px;
    min-width: 60px;
}

.campaign-countdown-value {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.campaign-countdown-label {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .campaign-banner-inner   { min-height: 220px; }
    .campaign-banner-content { padding: 30px; }
    .campaign-banner-title   { font-size: 24px; }
    .campaign-banner-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%); }
}


/*
 * Flash deal styles — extracted from inline <style> blocks
 * in flash_deal home section and flash_deal_details page (Sprint 2.4).
 */

/* === flash_deal.blade.php block 1 === */
/* Flash Deal Banner - Full Width Under Slider */
        .flash-deal-banner {
            background: linear-gradient(135deg, var(--flash-deal-bg-start, var(--color-primary-base)) 0%, var(--flash-deal-bg-end, var(--color-primary-base)) 100%);
            padding: 25px 0;
            position: relative;
            overflow: hidden;
        }

        .flash-deal-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }

        .flash-deal-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            position: relative;
            z-index: 1;
        }

        /* Flash Info */
        .flash-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .flash-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--flash-deal-badge-bg, rgba(255, 255, 255, 0.15));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 12px 24px;
            border-radius: 50px;
            color: var(--flash-deal-text-color, var(--catwalk-text-white));
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 1px solid rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.3);
            position: relative;
            overflow: hidden;
            animation: ledGlow 2s ease-in-out infinite;
        }

        /* LED Işık Efekti */
        @keyframes ledGlow {

            0%,
            100% {
                box-shadow:
                    0 0 5px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.3),
                    0 0 10px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.3),
                    0 0 20px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.2),
                    inset 0 0 10px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.1);
            }

            50% {
                box-shadow:
                    0 0 10px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.5),
                    0 0 20px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.5),
                    0 0 40px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.3),
                    0 0 60px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.2),
                    inset 0 0 15px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.2);
            }
        }

        /* Kenardan Geçen Işık */
        .flash-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.4),
                    transparent);
            animation: ledSweep 3s ease-in-out infinite;
        }

        @keyframes ledSweep {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 100%;
            }
        }

        .flash-badge i {
            font-size: 18px;
            filter: drop-shadow(0 0 8px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.8));
        }

        .flash-title {
            color: var(--flash-deal-text-color, var(--catwalk-text-white));
            font-size: 22px;
            font-weight: 600;
            margin: 0;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        /* Countdown */
        .flash-countdown {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .countdown-item {
            background: var(--flash-deal-countdown-bg, var(--catwalk-bg-main));
            padding: 12px 18px;
            border-radius: 10px;
            text-align: center;
            min-width: 60px;
            box-shadow: var(--catwalk-shadow-md);
        }

        .countdown-item .num {
            display: block;
            font-size: 24px;
            font-weight: 700;
            color: var(--flash-deal-countdown-text, var(--catwalk-primary));
            line-height: 1;
        }

        .countdown-item .label {
            font-size: 10px;
            color: var(--catwalk-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
            display: block;
        }

        .countdown-sep {
            font-size: 24px;
            font-weight: 700;
            color: var(--flash-deal-text-color, var(--catwalk-text-white));
        }

        /* CTA Button */
        .flash-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--flash-deal-btn-bg, var(--catwalk-bg-main));
            color: var(--flash-deal-btn-text, var(--catwalk-primary));
            padding: 14px 28px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--catwalk-transition);
            box-shadow: var(--catwalk-shadow-md);
        }

        .flash-cta:hover {
            background: var(--flash-deal-bg-end, var(--catwalk-secondary));
            color: var(--flash-deal-text-color, var(--catwalk-text-white));
            transform: translateY(-2px);
            box-shadow: var(--catwalk-shadow-lg);
        }

        .flash-cta i {
            transition: var(--catwalk-transition-fast);
        }

        .flash-cta:hover i {
            transform: translateX(5px);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .flash-deal-content {
                flex-wrap: wrap;
                justify-content: center;
                text-align: center;
            }

            .flash-info {
                flex-direction: column;
                width: 100%;
            }

            .countdown-item {
                padding: 10px 14px;
                min-width: 50px;
            }

            .countdown-item .num {
                font-size: 20px;
            }
        }

        @media (max-width: 576px) {
            .flash-deal-banner {
                padding: 20px 0;
            }

            .flash-title {
                font-size: 18px;
            }

            .countdown-item {
                padding: 8px 10px;
                min-width: 45px;
            }

            .countdown-item .num {
                font-size: 16px;
            }

            .flash-cta {
                padding: 12px 24px;
                font-size: 13px;
            }
        }

/* === flash_deal_details.blade.php block 1 === */
/* Flash Deal Page - Catwalk Style */
        .flash-deal-page {
            background: var(--catwalk-bg-light);
            min-height: 60vh;
        }

        /* Hero with Banner */
        .flash-hero {
            position: relative;
            height: 350px;
            overflow: hidden;
        }

        .flash-hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .flash-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, var(--flash-deal-bg-start, rgba(var(--color-primary-rgb), 0.9)) 0%, var(--flash-deal-bg-end, rgba(var(--color-primary-rgb), 0.85)) 100%);
        }

        .flash-hero-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--flash-deal-text-color, #fff);
        }

        .flash-hero-content h1 {
            font-size: 42px;
            font-weight: 600;
            margin: 15px 0 25px;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
        }

        /* Simple Header (no banner) */
        .flash-header-simple {
            background: linear-gradient(135deg, var(--flash-deal-bg-start, var(--catwalk-primary)) 0%, var(--flash-deal-bg-end, var(--catwalk-primary-hover)) 100%);
            padding: 60px 0;
            text-align: center;
            color: var(--flash-deal-text-color, #fff);
        }

        .flash-header-simple h1 {
            font-size: 36px;
            font-weight: 600;
            margin: 15px 0 25px;
        }

        /* Flash Badge - Glassmorphism with LED Effects */
        .flash-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--flash-deal-badge-bg, rgba(255, 255, 255, 0.15));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: 14px 28px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--flash-deal-text-color, #fff);
            border: 1px solid rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.3);
            position: relative;
            overflow: hidden;
            animation: ledGlow 2s ease-in-out infinite;
        }

        /* LED Glow Animation */
        @keyframes ledGlow {

            0%,
            100% {
                box-shadow:
                    0 0 5px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.3),
                    0 0 10px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.4),
                    0 0 20px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.2),
                    inset 0 0 10px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.1);
            }

            50% {
                box-shadow:
                    0 0 10px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.5),
                    0 0 20px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.6),
                    0 0 40px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.4),
                    0 0 60px rgba(var(--flash-deal-bg-start-rgb, var(--catwalk-primary-rgb)), 0.2),
                    inset 0 0 15px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.2);
            }
        }

        /* Light Sweep Effect */
        .flash-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.4),
                    transparent);
            animation: ledSweep 3s ease-in-out infinite;
        }

        @keyframes ledSweep {
            0% {
                left: -100%;
            }

            50%,
            100% {
                left: 100%;
            }
        }

        .flash-badge i {
            font-size: 20px;
            filter: drop-shadow(0 0 8px rgba(var(--flash-deal-text-color-rgb, 255, 255, 255), 0.8));
        }

        /* Countdown */
        .flash-countdown {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
        }

        .countdown-item {
            background: var(--flash-deal-countdown-bg, rgba(255, 255, 255, 0.95));
            padding: 15px 20px;
            border-radius: 10px;
            text-align: center;
            min-width: 70px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

        .countdown-item span {
            display: block;
            font-size: 28px;
            font-weight: 700;
            color: var(--flash-deal-countdown-text, var(--catwalk-primary));
            line-height: 1;
        }

        .countdown-item small {
            font-size: 11px;
            color: var(--catwalk-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 5px;
            display: block;
        }

        .flash-countdown .sep {
            font-size: 28px;
            font-weight: 700;
            color: var(--flash-deal-text-color, #fff);
        }

        /* Products Section */
        .flash-products {
            padding: 60px 0;
        }

        /* Expired State */
        .flash-expired {
            padding: 100px 0;
            text-align: center;
        }

        .expired-content i {
            font-size: 60px;
            color: var(--catwalk-border);
            margin-bottom: 20px;
        }

        .expired-content h2 {
            font-size: 28px;
            color: var(--catwalk-text-primary);
            margin-bottom: 10px;
        }

        .expired-content p {
            color: var(--catwalk-text-muted);
            margin-bottom: 25px;
        }

        .back-home {
            display: inline-block;
            background: var(--catwalk-primary);
            color: #fff;
            padding: 14px 30px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }

        .back-home:hover {
            background: var(--catwalk-primary-hover);
            transform: translateY(-2px);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .flash-hero {
                height: 280px;
            }

            .flash-hero-content h1 {
                font-size: 28px;
            }

            .flash-header-simple h1 {
                font-size: 26px;
            }

            .countdown-item {
                padding: 10px 14px;
                min-width: 55px;
            }

            .countdown-item span {
                font-size: 20px;
            }
        }

/* --- catwalk-brands.css --- */
/**
 * CatWalk Theme - Brand Logos Section
 * Infinite marquee animation with custom cursor effect (reference theme inspired)
 */

.catwalk-brand-logos {
  padding: 80px 0;
  background: var(--catwalk-bg-light);
  position: relative;
  overflow: hidden;
  cursor: none; /* Hide default cursor for custom effect */
}

/* Custom Cursor - Smooth movement with color inversion */
.catwalk-brand-logos::before {
  content: "";
  position: fixed;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* Smoother cubic-bezier transition */
  transition: left 0.08s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.08s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease,
    transform 0.2s ease;
  z-index: 9999;
  opacity: 0;
  /* Dark black background with color inversion */
  background: var(--catwalk-text-primary);
  mix-blend-mode: difference;
}

.catwalk-brand-logos:hover::before {
  opacity: 1;
}

/* Section Header */
.brand-logos-header {
  margin-bottom: 60px;
}

.brand-subtitle {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--catwalk-text-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.brand-title {
  font-size: 36px;
  font-weight: 300;
  color: var(--catwalk-text-primary);
  margin: 0;
  line-height: 1.2;
}

/* Marquee Container */
.brand-logos-grid {
  display: flex;
  overflow: hidden; /* Hide scrollbar */
  overflow-x: hidden; /* Explicitly hide horizontal scrollbar */
  position: relative;
  width: 100%;
  user-select: none;
}

/* Marquee Track - Infinite scroll effect */
.brand-logos-grid::before,
.brand-logos-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.brand-logos-grid::before {
  left: 0;
  background: linear-gradient(to right, var(--catwalk-bg-light), transparent);
}

.brand-logos-grid::after {
  right: 0;
  background: linear-gradient(to left, var(--catwalk-bg-light), transparent);
}

/* Marquee Inner - holds the scrolling content */
.brand-marquee-inner {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  width: max-content; /* Let content determine width */
  animation: marquee 20s linear infinite; /* Faster animation: 20s instead of 30s */
  will-change: transform;
}

/* Removed hover pause - animation continues on mouse over */

/* Duplicate set for seamless loop */
.brand-marquee-inner .brand-logo-item {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 40px;
  transition: transform 0.3s ease;
}

/* Logo Image — explicit height eliminates CLS (intrinsic aspect ignored) */
.brand-logo-img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.4);
  opacity: 0.5;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.catwalk-brand-logos:hover .brand-logo-img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

.brand-logo-item:hover .brand-logo-img {
  transform: scale(1.05);
}

/* Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Design */

/* Large Tablets and Small Desktops */
@media (max-width: 1199px) {
  .brand-marquee-inner .brand-logo-item {
    width: 180px;
    padding: 25px 35px;
  }

  .brand-title {
    font-size: 32px;
  }
}

/* Tablets */
@media (max-width: 991px) {
  .catwalk-brand-logos {
    padding: 60px 0;
  }

  .brand-marquee-inner .brand-logo-item {
    width: 160px;
    padding: 20px 30px;
  }

  .brand-logos-header {
    margin-bottom: 40px;
  }

  .brand-title {
    font-size: 28px;
  }

  /* Disable custom cursor on touch devices */
  .catwalk-brand-logos {
    cursor: default;
  }

  .catwalk-brand-logos::before {
    display: none;
  }
}

/* Mobile Landscape */
@media (max-width: 767px) {
  .catwalk-brand-logos {
    padding: 50px 0;
  }

  .brand-marquee-inner .brand-logo-item {
    width: 140px;
    padding: 15px 25px;
  }

  .brand-logo-img {
    height: 50px;
  }

  .brand-title {
    font-size: 24px;
  }

  .brand-subtitle {
    font-size: 12px;
    letter-spacing: 1.5px;
  }
}

/* Mobile Portrait */
@media (max-width: 575px) {
  .catwalk-brand-logos {
    padding: 40px 0;
  }

  .brand-marquee-inner .brand-logo-item {
    width: 120px;
    padding: 12px 20px;
  }

  .brand-logo-img {
    height: 40px;
  }

  .brand-title {
    font-size: 22px;
  }

  .brand-logos-header {
    margin-bottom: 30px;
  }

  /* Faster animation on mobile */
  .brand-marquee-inner {
    animation-duration: 20s;
  }
}

/* Accessibility - Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-inner {
    animation: none;
  }

  /* Keep overflow hidden even when animation is disabled */
  .brand-logos-grid {
    overflow-x: hidden; /* Changed from auto to hidden */
    /* Users can still see all logos by using drag or arrow keys */
  }
}

/* Performance Optimization */
.brand-marquee-inner {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- catwalk-slider.css --- */
/**
 * CatWalk Theme - Hero Slider Styles
 * Inspired by Slider Revolution design from reference website
 */

.catwalk-hero-slider {
  position: relative;
  width: 100%;
  height: 700px;
  /* aspect-ratio fallback: CLS önler, yüklenmeden önce alan rezerve eder */
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--catwalk-bg-footer);
}

@media (max-width: 768px) {
  .catwalk-hero-slider {
    height: 400px;
    aspect-ratio: 4 / 3;
  }
}

/* Swiper Container */
.hero-swiper {
  width: 100%;
  height: 100%;
}

/* Slide */
.swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background Image with Ken Burns Effect */
.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .slide-background {
    transition: transform 7s ease-out;
  }
}

/* Content Wrapper */
.slide-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.35)
  );
}

/* Slide Content */
.slide-content {
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
  animation: fadeInUp 0.8s ease-out;
}

/* Subtitle */
.slide-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--catwalk-bg-main);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
  opacity: 0.9;
}

/* Title */
.slide-title {
  font-family: "Jost", sans-serif;
  font-size: 47px;
  font-weight: 500;
  color: var(--catwalk-bg-main);
  line-height: 1.2;
  margin: 0 0 40px 0;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

/* Button Wrapper */
.slide-button-wrapper {
  margin-top: 40px;
}

/* Button - Matching reference site */
.slide-button {
  display: inline-block;
  padding: 0 42px;
  height: 52px;
  line-height: 52px;
  background-color: var(--catwalk-bg-main);
  color: var(--catwalk-bg-footer);
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: 1.6px solid var(--catwalk-bg-main);
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-button:hover {
  background-color: var(--catwalk-bg-footer) !important; /* Dark background instead of transparent */
  color: var(--catwalk-bg-main) !important;
  border-color: var(--catwalk-bg-footer) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  text-decoration: none !important; /* Prevent underline */
}

/* Navigation Arrows - Using Remix Icons */
.hero-arrow {
  width: 60px !important;
  height: 60px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(3px);
}

.hero-arrow i {
  font-size: 50px;
  line-height: 1;
  color: inherit;
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* CRITICAL: Remove Swiper's default arrow */
.hero-arrow::after {
  content: "" !important;
  display: none !important;
}

.swiper-button-prev.hero-arrow {
  left: 40px;
}

.swiper-button-next.hero-arrow {
  right: 40px;
}

.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Pagination Bullets - Bottom center, circular */
.hero-pagination {
  bottom: 30px !important;
  text-align: center;
}

.hero-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--catwalk-radius-circle, 50%);
  margin: 0 6px;
  opacity: 1;
  transition: all 0.3s ease;
}

.hero-pagination .swiper-pagination-bullet-active {
  background: #fff;
  transform: scale(1.3);
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */

/* Large Tablets and Small Desktops */
@media (max-width: 1199px) {
  .catwalk-hero-slider {
    height: 600px;
  }

  .slide-title {
    font-size: 42px;
  }
}

/* Tablets */
@media (max-width: 991px) {
  .catwalk-hero-slider {
    height: 500px;
  }

  .slide-title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .slide-subtitle {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .slide-button {
    padding: 0 35px;
    height: 48px;
    line-height: 48px;
    font-size: 15px;
  }

  .hero-arrow {
    width: 45px;
    height: 45px;
  }

  .swiper-button-prev.hero-arrow {
    left: 20px;
  }

  .swiper-button-next.hero-arrow {
    right: 20px;
  }
}

/* Mobile Landscape */
@media (max-width: 767px) {
  .catwalk-hero-slider {
    height: 450px;
  }

  .slide-title {
    font-size: 32px;
    margin-bottom: 25px;
  }

  .slide-subtitle {
    font-size: 12px;
  }

  .slide-button {
    padding: 0 30px;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
  }
}

/* Mobile Portrait */
@media (max-width: 575px) {
  .catwalk-hero-slider {
    height: 400px;
  }

  .slide-title {
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 1.3;
  }

  .slide-subtitle {
    font-size: 11px;
    margin-bottom: 15px;
  }

  .slide-button-wrapper {
    margin-top: 30px;
  }

  .slide-button {
    padding: 0 25px;
    height: 42px;
    line-height: 42px;
    font-size: 13px;
  }

  /* Hide arrows on very small screens */
  .hero-arrow {
    width: 40px;
    height: 40px;
  }

  .swiper-button-prev.hero-arrow {
    left: 10px;
  }

  .swiper-button-next.hero-arrow {
    right: 10px;
  }

  .hero-pagination {
    bottom: 20px !important;
  }
}

/* Performance Optimization */
.slide-background,
.swiper-slide {
  will-change: transform;
  backface-visibility: hidden;
}

/* --- catwalk-popup-announcement.css --- */
/**
 * PopupAnnouncement Component Styles
 * 
 * Provides styling for popup announcements with multiple templates:
 * - centered: Classic centered modal
 * - left_image: Image on left, content on right
 * - right_image: Content on left, image on right
 * - fullscreen: Full viewport popup
 * - minimal: Small, compact popup
 */

/* ==========================================================================
   Overlay
   ========================================================================== */
.popup-announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-announcement-overlay.active {
  opacity: 1;
  visibility: visible;
}

.popup-announcement-overlay .popup-overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

/* ==========================================================================
   Popup Container - Base Styles
   ========================================================================== */
.popup-announcement {
  position: relative;
  background: var(--catwalk-bg-main);
  border-radius: var(--catwalk-radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.popup-announcement-overlay.active .popup-announcement {
  transform: translateY(0) scale(1);
}

/* Close Button */
.popup-announcement-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--catwalk-radius-circle, 50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--catwalk-text-primary);
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.popup-announcement-close:hover {
  background: var(--catwalk-bg-main);
  transform: rotate(90deg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Template: Centered (Default)
   ========================================================================== */
.popup-announcement.template-centered {
  width: 90%;
  max-width: 500px;
  text-align: center;
}

.popup-announcement.template-centered .popup-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.popup-announcement.template-centered .popup-content {
  padding: 30px;
}

.popup-announcement.template-centered .popup-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--catwalk-text-primary);
  line-height: 1.3;
}

.popup-announcement.template-centered .popup-short-desc {
  font-size: 1.1rem;
  color: var(--catwalk-primary);
  font-weight: 500;
  margin-bottom: 10px;
}

.popup-announcement.template-centered .popup-description {
  font-size: 1rem;
  color: var(--catwalk-text-secondary);
  line-height: 1.6;
  margin-bottom: 25px;
}

/* ==========================================================================
   Template: Left Image
   ========================================================================== */
.popup-announcement.template-left_image {
  width: 90%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
}

.popup-announcement.template-left_image .popup-image-container {
  flex: 0 0 45%;
  min-height: 350px;
}

.popup-announcement.template-left_image .popup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-announcement.template-left_image .popup-content {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-announcement.template-left_image .popup-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--catwalk-text-primary);
}

.popup-announcement.template-left_image .popup-short-desc {
  font-size: 1.1rem;
  color: var(--catwalk-primary);
  font-weight: 500;
  margin-bottom: 10px;
}

.popup-announcement.template-left_image .popup-description {
  font-size: 1rem;
  color: var(--catwalk-text-secondary);
  line-height: 1.7;
  margin-bottom: 25px;
}

/* ==========================================================================
   Template: Right Image
   ========================================================================== */
.popup-announcement.template-right_image {
  width: 90%;
  max-width: 800px;
  display: flex;
  flex-direction: row-reverse;
}

.popup-announcement.template-right_image .popup-image-container {
  flex: 0 0 45%;
  min-height: 350px;
}

.popup-announcement.template-right_image .popup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-announcement.template-right_image .popup-content {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-announcement.template-right_image .popup-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--catwalk-text-primary);
}

.popup-announcement.template-right_image .popup-short-desc {
  font-size: 1.1rem;
  color: var(--catwalk-primary);
  font-weight: 500;
  margin-bottom: 10px;
}

.popup-announcement.template-right_image .popup-description {
  font-size: 1rem;
  color: var(--catwalk-text-secondary);
  line-height: 1.7;
  margin-bottom: 25px;
}

/* ==========================================================================
   Template: Fullscreen
   ========================================================================== */
.popup-announcement.template-fullscreen {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.popup-announcement.template-fullscreen .popup-content {
  text-align: center;
  padding: 60px;
  max-width: 700px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.popup-announcement.template-fullscreen .popup-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--catwalk-text-primary);
}

.popup-announcement.template-fullscreen .popup-short-desc {
  font-size: 1.25rem;
  color: var(--catwalk-primary);
  font-weight: 500;
  margin-bottom: 15px;
}

.popup-announcement.template-fullscreen .popup-description {
  font-size: 1.1rem;
  color: var(--catwalk-text-secondary);
  line-height: 1.7;
  margin-bottom: 30px;
}

.popup-announcement.template-fullscreen .popup-announcement-close {
  top: 25px;
  right: 25px;
  width: 44px;
  height: 44px;
  font-size: 24px;
}

/* ==========================================================================
   Template: Minimal
   ========================================================================== */
.popup-announcement.template-minimal {
  width: 90%;
  max-width: 380px;
  text-align: center;
  border-radius: 16px;
}

.popup-announcement.template-minimal .popup-content {
  padding: 35px 30px;
}

.popup-announcement.template-minimal .popup-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--catwalk-text-primary);
}

.popup-announcement.template-minimal .popup-short-desc {
  font-size: 1rem;
  color: var(--catwalk-primary);
  margin-bottom: 8px;
}

.popup-announcement.template-minimal .popup-description {
  font-size: 0.95rem;
  color: var(--catwalk-text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.popup-announcement.template-minimal .popup-announcement-close {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  font-size: 16px;
}

/* ==========================================================================
   CTA Button
   ========================================================================== */
.popup-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.popup-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.popup-cta-button:active {
  transform: translateY(0);
}

.popup-cta-button i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.popup-cta-button:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes popupShake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

@keyframes popupPulse {
  0%,
  100% {
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 25px 80px rgba(var(--catwalk-primary-rgb), 0.4);
  }
}

.popup-announcement.animate-attention {
  animation: popupPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */
@media (max-width: 768px) {
  /* Left/Right Image templates stack vertically on mobile */
  .popup-announcement.template-left_image,
  .popup-announcement.template-right_image {
    flex-direction: column;
    max-width: 90%;
  }

  .popup-announcement.template-left_image .popup-image-container,
  .popup-announcement.template-right_image .popup-image-container {
    flex: none;
    min-height: 180px;
  }

  .popup-announcement.template-left_image .popup-content,
  .popup-announcement.template-right_image .popup-content {
    padding: 25px;
  }

  .popup-announcement.template-left_image .popup-title,
  .popup-announcement.template-right_image .popup-title {
    font-size: 1.4rem;
  }

  /* Fullscreen adjustments */
  .popup-announcement.template-fullscreen .popup-content {
    padding: 30px 20px;
    margin: 20px;
    border-radius: var(--catwalk-radius-lg, 12px);
  }

  .popup-announcement.template-fullscreen .popup-title {
    font-size: 1.75rem;
  }

  .popup-announcement.template-fullscreen .popup-description {
    font-size: 1rem;
  }

  /* Centered adjustments */
  .popup-announcement.template-centered .popup-content {
    padding: 20px;
  }

  .popup-announcement.template-centered .popup-title {
    font-size: 1.4rem;
  }

  /* Button adjustments */
  .popup-cta-button {
    padding: 12px 24px;
    font-size: 0.9rem;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .popup-announcement {
    margin: 10px;
    max-height: 85vh;
  }

  .popup-announcement.template-centered .popup-image {
    height: 150px;
  }

  .popup-announcement-close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* --- catwalk-actions.css --- */
/* =========================================
   WISHLIST & COMPARE ACTION BUTTONS
   ========================================= */

/* Default State (Not Active) */
.catwalk-wishlist-btn,
.home-wishlist-btn,
.catwalk-listing-wishlist,
.catwalk-compare-btn,
.home-compare-btn,
.catwalk-listing-compare {
  background: var(--catwalk-bg-main);
  color: var(--catwalk-text-primary);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Hover State */
.catwalk-wishlist-btn:hover,
.home-wishlist-btn:hover,
.catwalk-listing-wishlist:hover,
.catwalk-compare-btn:hover,
.home-compare-btn:hover,
.catwalk-listing-compare:hover {
  background: var(--catwalk-primary);
  color: var(--catwalk-text-white);
  border-color: var(--catwalk-primary);
}

/* Active State (Wishlisted) - Pink Background, White Icon */
.catwalk-wishlist-btn.active,
.home-wishlist-btn.active,
.catwalk-listing-wishlist.active {
  background: var(--catwalk-primary) !important;
  color: var(--catwalk-text-white) !important;
  border-color: var(--catwalk-primary) !important;
}

/* Ensure icons inherit color properly */
.catwalk-wishlist-btn i,
.home-wishlist-btn i,
.catwalk-listing-wishlist i {
  color: inherit;
  transition: color 0.3s ease;
}

/* =========================================
   MODAL ACTION BUTTONS (Add to Cart Modal)
   ========================================= */

/* Modal Action Buttons - Base Style */
.catwalk-modal-action-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--catwalk-bg-main);
  color: var(--catwalk-text-primary);
  border: 1px solid var(--catwalk-border);
  border-radius: 0px !important;
  margin-left: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.catwalk-modal-action-btn i {
  font-size: 20px;
  transition: all 0.3s ease;
}

/* Hover State */
.catwalk-modal-action-btn:hover {
  background: var(--catwalk-primary);
  color: var(--catwalk-text-white);
  border-color: var(--catwalk-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--catwalk-primary-rgb), 0.35);
}

.catwalk-modal-action-btn:hover i {
  transform: scale(1.15);
}

/* Active State - Wishlist (Primary Pink) */
.catwalk-modal-action-btn.active {
  background: var(--catwalk-primary);
  color: var(--catwalk-text-white);
  border-color: var(--catwalk-primary);
  box-shadow: 0 2px 8px rgba(var(--catwalk-primary-rgb), 0.3);
}

.catwalk-modal-action-btn.active i {
  color: var(--catwalk-text-white) !important;
}

.catwalk-modal-action-btn.active:hover {
  background: var(--catwalk-primary-hover);
  border-color: var(--catwalk-primary-hover);
  box-shadow: 0 4px 14px rgba(var(--catwalk-primary-rgb), 0.4);
}

/* Active State - Compare (Secondary/Purple tint for differentiation) */
.catwalk-modal-compare-btn.active {
  background: linear-gradient(135deg, var(--catwalk-compare-light) 0%, var(--catwalk-compare) 100%) !important;
  color: var(--catwalk-text-white) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

.catwalk-modal-compare-btn.active i {
  color: var(--catwalk-text-white) !important;
}

.catwalk-modal-compare-btn.active:hover {
  background: linear-gradient(135deg, var(--catwalk-compare) 0%, var(--catwalk-compare-hover) 100%) !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4) !important;
}

/* Pulse animation on click for feedback */
@keyframes catwalk-btn-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.catwalk-modal-action-btn:active {
  animation: catwalk-btn-pulse 0.2s ease;
}

/* Compare Button Active State - Alternative styling */
.catwalk-compare-btn.active,
.home-compare-btn.active,
.catwalk-listing-compare.active {
  background: linear-gradient(135deg, var(--catwalk-compare-light) 0%, var(--catwalk-compare) 100%) !important;
  color: var(--catwalk-text-white) !important;
  border-color: transparent !important;
}

.catwalk-compare-btn.active i,
.home-compare-btn.active i,
.catwalk-listing-compare.active i {
  color: var(--catwalk-text-white) !important;
}

/* Tooltip enhancement for modal buttons */
.catwalk-modal-action-btn[data-toggle="tooltip"] {
  cursor: pointer;
}

/* =========================================
   PRODUCT DETAIL ACTION BUTTONS
   ========================================= */

/* Product Detail Action Buttons - Base Style */
.catwalk-detail-action-btn {
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.catwalk-detail-action-btn i {
  transition: all 0.3s ease;
}

.catwalk-detail-action-btn:hover {
  color: var(--catwalk-primary) !important;
}

.catwalk-detail-action-btn:hover i {
  transform: scale(1.2);
}

/* Active State - Wishlist */
.catwalk-detail-action-btn.active {
  color: var(--catwalk-primary) !important;
}

.catwalk-detail-action-btn.active i {
  color: var(--catwalk-primary) !important;
}

/* Active State - Compare (Purple) */
.catwalk-detail-compare-btn.active {
  color: var(--catwalk-compare) !important;
}

.catwalk-detail-compare-btn.active i {
  color: var(--catwalk-compare) !important;
}

.catwalk-detail-compare-btn:hover {
  color: var(--catwalk-compare) !important;
}

/* --- catwalk-cookie-consent.css --- */
/*
 * CatWalk Theme - Cookie Consent Banner
 * GDPR/KVKK Compliant Cookie Notice
 * Version: 1.0.0
 */

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.catwalk-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    var(--catwalk-bg-primary-light) 100%
  );
  border-top: 3px solid var(--catwalk-primary);
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  z-index: 9999;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.catwalk-cookie-banner.show {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}

/* Cookie Icon */
.cookie-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    var(--catwalk-primary) 0%,
    var(--catwalk-primary-hover) 100%
  );
  border-radius: var(--catwalk-radius-circle, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.3);
}

/* Cookie Text */
.cookie-text {
  flex: 1;
  min-width: 300px;
}

.cookie-text h4 {
  font-family: "Jost", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--catwalk-text-primary);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cookie-text p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--catwalk-text-secondary);
  margin: 0;
}

.cookie-link {
  color: var(--catwalk-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.cookie-link:hover {
  color: var(--catwalk-primary-hover);
  text-decoration: underline;
}

/* Cookie Actions */
.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cookie-btn i {
  font-size: 18px;
}

.cookie-btn-accept {
  background: linear-gradient(
    135deg,
    var(--catwalk-primary) 0%,
    var(--catwalk-primary-hover) 100%
  );
  color: #fff;
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.3);
}

.cookie-btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.4);
}

.cookie-btn-decline {
  background: #fff;
  color: var(--catwalk-text-secondary);
  border: 1px solid var(--catwalk-border);
}

.cookie-btn-decline:hover {
  background: var(--catwalk-bg-light);
  border-color: var(--catwalk-border-dark);
  color: var(--catwalk-text-primary);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  .catwalk-cookie-banner {
    padding: 15px 0;
  }

  .cookie-banner-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .cookie-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .cookie-text {
    min-width: auto;
  }

  .cookie-text h4 {
    font-size: 16px;
    justify-content: center;
  }

  .cookie-text p {
    font-size: 13px;
  }

  .cookie-actions {
    flex-direction: column;
    width: 100%;
  }

  .cookie-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {
  .cookie-text h4 {
    font-size: 15px;
  }

  .cookie-text p {
    font-size: 12px;
  }

  .cookie-btn {
    font-size: 13px;
    padding: 10px 18px;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .catwalk-cookie-banner {
    display: none !important;
  }
}

/* --- catwalk-dealer-login.css --- */
/* =============================================
 * Dealer Login Button (Bayi Girişi)
 * Coral/red CTA button for dealer mode
 * ============================================= */

.dealer-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background-color: var(--catwalk-primary);
    color: var(--catwalk-text-white) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 25px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--catwalk-primary-rgb), 0.3);
}

.dealer-login-btn:hover {
    background-color: var(--catwalk-primary-hover);
    box-shadow: 0 4px 15px rgba(var(--catwalk-primary-rgb), 0.45);
    transform: translateY(-1px);
    color: var(--catwalk-text-white) !important;
    text-decoration: none !important;
}

.dealer-login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--catwalk-primary-rgb), 0.3);
}

/* Mobile menu override */
.catwalk-mobile-menu .dealer-login-btn {
    display: block;
    text-align: center;
    margin: 10px 15px;
    padding: 12px 20px;
    border-radius: 25px;
}
/* --- catwalk-auth.css --- */
/*
 * CatWalk Theme - Authentication Pages CSS
 * Used for Login, Registration, Password Reset, and Auth Modal
 * ============================================ */

.login-wrapper {
  display: flex;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* Left Side - Video/Visual Background */
.visual-side {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: none;
  height: 100%;
}

@media (min-width: 992px) {
  .visual-side {
    display: block;
  }
}

.visual-side video,
.visual-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--catwalk-black-rgb), 0.2);
}

/* Right Side - Form */
.form-side {
  flex: 0 0 500px;
  background: var(--catwalk-bg-main);
  display: flex;
  flex-direction: column;
  padding: 80px 60px 40px;
  position: relative;
  box-shadow: -5px 0 30px rgba(var(--catwalk-black-rgb), 0.05);
  z-index: 10;
  height: 100dvh;
  overflow-y: auto;
}

@media (max-width: 576px) {
  .form-side {
    flex: 1;
    padding: 70px 30px 30px;
    width: 100%;
  }
}

/* Back Button */
.back-btn {
  position: absolute;
  top: 40px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--catwalk-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--catwalk-transition);
  z-index: 20;
}

@media (max-width: 576px) {
  .back-btn {
    top: 20px;
    left: 20px;
  }
}

.back-btn:hover {
  color: var(--catwalk-primary);
  text-decoration: none;
}

/* Form Content Container */
.login-content {
  width: 100%;
  max-width: 380px;
  margin: auto;
}

.brand-logo {
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-logo img {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.page-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--catwalk-text-primary);
  text-align: center;
}

@media (max-width: 576px) {
  .page-title {
    font-size: 26px;
  }
}

.page-subtitle {
  color: var(--catwalk-text-secondary);
  font-size: 16px;
  margin-bottom: 40px;
  text-align: center;
  line-height: 1.5;
}

/* Form Elements */
.catwalk-form-group {
  margin-bottom: 25px;
  position: relative;
}

.catwalk-form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--catwalk-text-primary);
}

.catwalk-form-control {
  width: 100%;
  padding: 15px;
  font-size: 15px;
  border: 1px solid var(--catwalk-border);
  background: var(--catwalk-bg-light);
  border-radius: var(--catwalk-radius-sm, 4px);
  transition: var(--catwalk-transition);
  font-family: var(--catwalk-font-main);
}

.catwalk-form-control:focus {
  background: var(--catwalk-bg-main);
  border-color: var(--catwalk-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--catwalk-primary-rgb), 0.1);
}

.catwalk-form-control.is-invalid {
  border-color: var(--catwalk-error-border);
}

.forgot-password {
  display: block;
  text-align: right;
  font-size: 13px;
  color: var(--catwalk-text-secondary);
  margin-top: 8px;
  transition: var(--catwalk-transition);
}

.forgot-password:hover {
  color: var(--catwalk-primary);
  text-decoration: none;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background: var(--catwalk-primary);
  color: var(--catwalk-text-white);
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 20px;
  cursor: pointer;
  transition: var(--catwalk-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit:hover {
  background: var(--catwalk-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(var(--catwalk-primary-rgb), 0.3);
  color: var(--catwalk-text-white);
}

.register-link,
.login-link {
  text-align: center;
  margin-top: 30px;
  font-size: 15px;
  color: var(--catwalk-text-primary);
}

.register-link a,
.login-link a {
  color: var(--catwalk-primary);
  font-weight: 600;
  margin-left: 5px;
  transition: var(--catwalk-transition);
}

.register-link a:hover,
.login-link a:hover {
  color: var(--catwalk-primary-hover);
  text-decoration: underline;
}

/* Password Toggle Support */
.password-wrapper {
  position: relative;
}

.password-wrapper input {
  padding-right: 45px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--catwalk-text-muted);
  padding: 5px;
  font-size: 18px;
  transition: var(--catwalk-transition);
}

.password-toggle:hover {
  color: var(--catwalk-primary);
}

/* Auth Utilities */
.remember-me-label,
.terms-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--catwalk-text-secondary);
}

.terms-label {
  font-size: 13px;
}

.catwalk-checkbox-custom {
  width: auto !important;
  margin: 0 !important;
  accent-color: var(--catwalk-primary);
}

.dealer-login-container {
  margin-top: 25px;
}

.dealer-login-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 28px;
  font-size: 15px;
  background: var(--catwalk-bg-dark);
  color: var(--catwalk-text-white);
  border-radius: var(--catwalk-radius-sm, 4px);
  text-decoration: none !important;
  transition: var(--catwalk-transition);
}

.dealer-login-btn:hover {
  background: var(--catwalk-secondary);
  color: var(--catwalk-text-white);
  transform: translateY(-2px);
  box-shadow: var(--catwalk-shadow-md);
}

/* Social Login Styles */
.social-login-divider {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.social-login-divider::before,
.social-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--catwalk-border);
}

.social-login-divider span {
  padding: 0 15px;
  color: var(--catwalk-text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.social-login-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--catwalk-radius-sm, 4px);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: var(--catwalk-transition);
  border: 1px solid var(--catwalk-border);
}

.btn-google {
  background: var(--catwalk-bg-main);
  color: var(--catwalk-text-primary);
}

.btn-google:hover {
  background: var(--catwalk-bg-light);
  border-color: var(--catwalk-border-dark);
  box-shadow: 0 2px 8px rgba(var(--catwalk-black-rgb), 0.08);
}

.btn-facebook {
  background: #1877f2;
  color: var(--catwalk-text-white);
  border-color: #1877f2;
}

.btn-facebook:hover {
  background: #166fe5;
  border-color: #166fe5;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

.btn-facebook svg path {
  fill: var(--catwalk-text-white);
}

.btn-twitter {
  background: #1da1f2;
  color: var(--catwalk-text-white);
  border-color: #1da1f2;
}

.btn-twitter:hover {
  background: #1a91da;
  border-color: #1a91da;
  box-shadow: 0 2px 8px rgba(29, 161, 242, 0.3);
}

.btn-twitter svg path {
  fill: var(--catwalk-text-white);
}

/* Alert Styles */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: var(--catwalk-radius-sm, 4px);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.catwalk-auth-alert {
  animation: slideInDown 0.3s ease;
  padding: 12px 16px;
  border-radius: 6px;
}

.alert-success {
  background-color: var(--catwalk-success-bg);
  border-color: var(--catwalk-success-border);
  color: var(--catwalk-success-text);
}

.alert-danger,
.alert-error {
  background-color: var(--catwalk-error-bg);
  border-color: var(--catwalk-error-border);
  color: var(--catwalk-error-text);
}

.alert-warning {
  background-color: var(--catwalk-warning-bg);
  border-color: var(--catwalk-warning-text);
  color: var(--catwalk-warning-text);
}

.catwalk-invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: var(--catwalk-error-text);
}

/* Verification Pages Utilities */
.catwalk-verify-box {
  padding: 20px;
  border-radius: var(--catwalk-radius-md, 8px);
  margin-bottom: 25px;
  text-align: center;
}

.catwalk-verify-warning {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--catwalk-primary);
}

.catwalk-verify-success {
  background: #e8f5e9;
  border-left: 4px solid var(--catwalk-success-border);
}

.catwalk-verify-icon {
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
}

.catwalk-verify-expired-alert {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--catwalk-primary-hover);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  margin-bottom: 25px;
  border-radius: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.catwalk-btn-no-radius {
  border-radius: 0 !important;
}

/* ============================================
   CATWALK AUTH MODAL STYLES (Appended)
   ============================================ */

/* Dialog Sizing */
.catwalk-auth-dialog {
  max-width: 440px;
  margin: 1rem;
}

@media (min-width: 576px) {
  .catwalk-auth-dialog {
    margin: 1.75rem auto;
  }
}

/* Modal Content */
.catwalk-auth-content {
  border: none;
  border-radius: 0;
  box-shadow: 0 25px 50px -12px rgba(var(--catwalk-black-rgb), 0.25);
  overflow: hidden;
  position: relative;
  background: var(--catwalk-bg-main);
}

/* Close Button */
.catwalk-auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--catwalk-text-secondary);
  font-size: 24px;
  transition: var(--catwalk-transition);
  z-index: 10;
  border-radius: var(--catwalk-radius-circle, 50%);
}

.catwalk-auth-close:hover {
  background: var(--catwalk-bg-light);
  color: var(--catwalk-text-primary);
}

/* Body */
.catwalk-auth-body {
  padding: 40px 36px;
}

@media (max-width: 480px) {
  .catwalk-auth-body {
    padding: 32px 24px;
  }
}

/* Header */
.catwalk-auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.catwalk-auth-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--catwalk-text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.catwalk-auth-subtitle {
  font-size: 15px;
  color: var(--catwalk-text-secondary);
  margin: 0;
}

/* Form Styles */
.catwalk-auth-form {
  margin-bottom: 24px;
}

.catwalk-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.catwalk-label-row .catwalk-form-label {
  margin-bottom: 0;
}

.catwalk-forgot-link {
  font-size: 13px;
  color: var(--catwalk-primary);
  text-decoration: none;
  transition: var(--catwalk-transition);
}

.catwalk-forgot-link:hover {
  color: var(--catwalk-primary-hover);
  text-decoration: underline;
}

/* Input Wrapper */
.catwalk-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.catwalk-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--catwalk-text-muted);
  font-size: 18px;
  pointer-events: none;
  transition: var(--catwalk-transition);
  z-index: 1;
}

.catwalk-form-input {
  width: 100%;
  padding: 14px 48px 14px 50px !important;
  border: 1px solid var(--catwalk-border);
  border-radius: 0;
  font-size: 15px;
  color: var(--catwalk-text-primary);
  background: var(--catwalk-bg-main);
  transition: var(--catwalk-transition);
}

.catwalk-form-input:focus {
  outline: none;
  border-color: var(--catwalk-primary);
  box-shadow: 0 0 0 3px rgba(var(--catwalk-primary-rgb), 0.1);
}

.catwalk-form-input:focus + .catwalk-input-icon,
.catwalk-input-wrapper:focus-within .catwalk-input-icon {
  color: var(--catwalk-primary);
}

.catwalk-form-input::placeholder {
  color: var(--catwalk-text-muted);
  padding-left: 0;
}

/* Password Toggle */
.catwalk-password-toggle {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--catwalk-text-muted);
  font-size: 18px;
  padding: 4px;
  transition: var(--catwalk-transition);
}

.catwalk-password-toggle:hover {
  color: var(--catwalk-text-primary);
}

/* Checkbox */
.catwalk-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--catwalk-text-secondary);
}

.catwalk-checkbox input {
  display: none;
}

.catwalk-checkbox-mark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--catwalk-border-dark);
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--catwalk-transition);
}

.catwalk-checkbox input:checked + .catwalk-checkbox-mark {
  background: var(--catwalk-primary);
  border-color: var(--catwalk-primary);
}

.catwalk-checkbox input:checked + .catwalk-checkbox-mark::after {
  content: "✓";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

/* Submit Button */
.catwalk-auth-submit {
  width: 100%;
  padding: 16px 24px;
  background: var(--catwalk-primary);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--catwalk-transition);
  margin-top: 24px;
}

.catwalk-auth-submit:hover {
  background: var(--catwalk-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--catwalk-primary-rgb), 0.4);
}

.catwalk-auth-submit i {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.catwalk-auth-submit:hover i {
  transform: translateX(4px);
}

/* Divider */
.catwalk-auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0;
}

.catwalk-auth-divider::before,
.catwalk-auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--catwalk-border);
}

.catwalk-auth-divider span {
  padding: 0 16px;
  font-size: 12px;
  color: var(--catwalk-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Social Buttons */
.catwalk-social-buttons {
  display: flex;
  gap: 12px;
}

.catwalk-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--catwalk-border);
  background: var(--catwalk-bg-main);
  color: var(--catwalk-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: var(--catwalk-transition);
}

.catwalk-social-btn i {
  font-size: 18px;
}

.catwalk-social-btn:hover {
  border-color: var(--catwalk-text-primary);
  background: var(--catwalk-bg-light);
}

.catwalk-social-google:hover {
  border-color: #ea4335;
  color: #ea4335;
}

.catwalk-social-facebook:hover {
  border-color: #1877f2;
  color: #1877f2;
}

.catwalk-social-twitter:hover {
  border-color: #1da1f2;
  color: #1da1f2;
}

@media (max-width: 400px) {
  .catwalk-social-buttons {
    flex-direction: column;
  }
}

/* Guest Section */
.catwalk-guest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: transparent;
  border: 2px solid var(--catwalk-text-primary);
  color: var(--catwalk-text-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  transition: var(--catwalk-transition);
}

.catwalk-guest-btn:hover {
  background: var(--catwalk-text-primary);
  color: #fff;
}

.catwalk-guest-btn i:last-child {
  transition: transform 0.2s ease;
}

.catwalk-guest-btn:hover i:last-child {
  transform: translateX(4px);
}

/* Footer */
.catwalk-auth-footer {
  text-align: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--catwalk-border);
}

.catwalk-auth-footer p {
  margin: 0;
  font-size: 14px;
  color: var(--catwalk-text-secondary);
}

.catwalk-register-link {
  color: var(--catwalk-primary);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  transition: var(--catwalk-transition);
}

.catwalk-register-link:hover {
  color: var(--catwalk-primary-hover);
  text-decoration: underline;
}

/* Modal Animation Enhancement */
#catwalk-auth-modal .modal-dialog {
  transform: scale(0.95) translateY(-10px);
  transition: transform 0.3s ease;
}

#catwalk-auth-modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}