/* --- 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 */
  /* Admin panelinden seçilen font (frontend.blade.php <head> içinde :root
     üzerinde --site-font olarak basılır). Tanımlı değilse tema varsayılanı
     Jost devreye girer. Bileşenler bu token'ı kullanmalı; sabit "Jost"
     yazmak admin seçimini ezer. */
  --catwalk-font-main: var(
    --site-font,
    "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;

  /* Layout Builder block inner container width. Every home block's .lb-*-inner
     container binds to this token so all blocks share ONE standard width
     instead of the historical per-block 1200/1240/1400/1600px mix. Usages
     carry the same 1400px fallback so a stylesheet loaded without this file
     still renders identically. Deliberately narrow content blocks (newsletter,
     campaign-banner overlay) keep their own smaller widths. */
  --catwalk-block-max: 1400px;
  /* Matching horizontal padding for those containers, so every block's CONTENT
     edge lines up too (the historical 15/20/30px mix left blocks visually
     misaligned even at the same max-width). */
  --catwalk-block-pad: 20px;

  /* 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: var(--catwalk-font);
  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: var(--catwalk-font);
  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;
}

/* ==========================================================================
   Navbar Builder (Faz 3) — per-block responsive visibility
   BlockRenderer::wrapVisibility() only emits .lb-vis when a breakpoint is
   actually hidden, so untouched blocks never get this wrapper. display:contents
   keeps the wrapper out of the layout — essential inside the header's flex
   zones, where a plain div would become a flex item and change the spacing —
   and the media queries below flip it to none. Breakpoints follow the theme's
   existing bootstrap tiers.
   ========================================================================== */
.lb-vis {
  display: contents;
}

@media (min-width: 992px) {
  .lb-vis.lb-hide-desktop {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .lb-vis.lb-hide-tablet {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .lb-vis.lb-hide-mobile {
    display: none;
  }
}

/* ==========================================================================
   Navbar Builder (Faz 2) — block-composed header (.catwalk-nav--builder)
   The shell reuses .nav-wrapper's grid areas (left→categories, center→logo,
   right→icons) so the Faz 1 overlay/announcement-bar rules apply unchanged.
   Each zone lays its blocks out horizontally. Some core rules are scoped to a
   zone (e.g. ".nav-left .nav-menu"), but the builder can place a block in ANY
   zone — so the equivalents are re-applied zone-agnostically here.
   ========================================================================== */
.catwalk-nav--builder .nav-left,
.catwalk-nav--builder .nav-center,
.catwalk-nav--builder .nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.catwalk-nav--builder .nav-left {
  justify-content: flex-start;
}

.catwalk-nav--builder .nav-center {
  justify-content: center;
}

.catwalk-nav--builder .nav-right {
  justify-content: flex-end;
}

/* ── Row backgrounds (Kadence model) ───────────────────────────────────────
   A header row can carry its own background colour (header_row_backgrounds());
   the shell puts it on the wrapper as inline `background`+`color`. The row's
   links, icons and menu items then inherit that auto-contrasted colour so a
   utility bar (announcement + account + locale) reads as one coloured strip
   instead of a pill beside bare icons. */
.catwalk-nav--builder .nav-row--has-bg a,
.catwalk-nav--builder .nav-row--has-bg .icon-link,
.catwalk-nav--builder .nav-row--has-bg .nav-icons i,
.catwalk-nav--builder .nav-row--has-bg .nav-menu > li > a,
.catwalk-nav--builder .nav-row--has-bg button.mobile-menu-toggle {
  color: inherit;
}

/* A row can carry its background as frosted glass instead of a flat fill: the
   shell already put the chosen colour on the wrapper at reduced alpha, so this
   only adds the blur. Same auto-contrasted text colour — a translucent tint is
   the same hue, so what was readable on the solid fill stays readable. */
.catwalk-nav--builder .nav-wrapper.nav-row--glass,
.catwalk-nav--builder .nav-mobile-bar.nav-row--glass {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

/* Dropdown panels keep their own light background, so their inner links stay
   dark even when the trigger row is a dark colour. */
.catwalk-nav--builder .nav-row--has-bg .nav-dropdown a,
.catwalk-nav--builder .nav-row--has-bg .nav-mega-list a,
.catwalk-nav--builder .nav-row--has-bg .user-dropdown-menu a {
  color: var(--catwalk-text-primary, #151515);
}

/* Fixed-height row (row settings): the shell sets height inline; keep the items
   centred and stop the announcement bar's own min-height from fighting it, so a
   short utility bar stays short even next to a taller icon block. Padding is
   trimmed so the chosen height is the actual height. */
.catwalk-nav--builder .nav-row--fixed-h {
  /* Beat the base .nav-wrapper `padding: 10px ... !important` (line ~340) so the
     chosen height is the whole row — otherwise 20px of vertical padding pushes
     the content past a short row's background, leaving it half-clipped. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
.catwalk-nav--builder .nav-row--fixed-h .catwalk-announcement-bar,
.catwalk-nav--builder .nav-row--fixed-h .catwalk-announcement-inner {
  min-height: 0;
}
/* When a short height is chosen, scale the row's content to fit instead of
   letting it set the floor. The zone containers carry a 1.6em line-height that
   reserves ~29px of line box even for a small icon — collapse it so a compact
   utility bar can actually be compact. */
.catwalk-nav--builder .nav-row--fixed-h .nav-left,
.catwalk-nav--builder .nav-row--fixed-h .nav-center,
.catwalk-nav--builder .nav-row--fixed-h .nav-right {
  line-height: 1;
}
/* Icons are an icon font sized by font-size; shrink them in proportion to the
   chosen height (--nav-row-h, set inline), but never past their natural 20px so
   a tall row keeps normal icons. ~0.62 keeps a little breathing room. */
.catwalk-nav--builder .nav-row--fixed-h .icon-link,
.catwalk-nav--builder .nav-row--fixed-h .icon-link > i,
.catwalk-nav--builder .nav-row--fixed-h [class^="ri-"],
.catwalk-nav--builder .nav-row--fixed-h [class*=" ri-"] {
  line-height: 1;
  font-size: min(20px, calc(var(--nav-row-h, 32px) * 0.62));
}

/* Zone-aware pop-over alignment.
   Header blocks can now sit in any zone (left / center / right), but each
   pop-over is hard-anchored to one edge: locale, account and mini-cart open
   leftward (right:0); the category menu opens rightward (left:0). Placed on the
   wrong side they open off-screen and clip. Flip the anchor to match the zone so
   every panel opens inward. Centre keeps its default — it has room both ways.
   Scoped to --builder so the legacy navbars are untouched. */

/* Left zone: right-anchored panels flip to open rightward. */
.catwalk-nav--builder .nav-left .catwalk-header-dropdown,
.catwalk-nav--builder .nav-left .user-dropdown-menu,
.catwalk-nav--builder .nav-left .catwalk-cart-dropdown {
  left: 0;
  right: auto;
}
/* Move each panel's arrow to the flipped edge (keeps it under the trigger). */
.catwalk-nav--builder .nav-left .catwalk-header-dropdown::before,
.catwalk-nav--builder .nav-left .user-dropdown-menu::before {
  left: 15px;
  right: auto;
}
.catwalk-nav--builder .nav-left .user-dropdown-menu::after {
  left: 14px;
  right: auto;
}
.catwalk-nav--builder .nav-left .catwalk-cart-dropdown::before {
  left: 12px;
  right: auto;
}

/* Right zone: the category menu's first-level dropdown flips to open leftward.
   Nested levels keep their own JS-driven cascade (see .cascade-left). */
.catwalk-nav--builder .nav-right .nav-menu > li > .nav-dropdown {
  left: auto;
  right: 0;
}

/* Open panels sit ABOVE the announcement bar (z-index 1100). The announcement
   can now live in any row, so a menu / dropdown dropping from the main row over
   the BOTTOM row was landing behind the announcement (it out-z-indexed the
   panels at 1001/1002). Lift every builder-header panel above it. (.nav-mega is
   raised in the block's own style.css — its rule ships after this bundle, so a
   copy here would just lose the cascade.) */
.catwalk-nav--builder .nav-dropdown,
.catwalk-nav--builder .catwalk-header-dropdown,
.catwalk-nav--builder .user-dropdown-menu,
.catwalk-nav--builder #cart_items .catwalk-cart-dropdown {
  z-index: 1200;
}

/* ==================================================================
   Mobile bar (≤1279px) — a dedicated header arrangement.
   OPT-IN: only rendered (and only takes over) when the merchant assigns a
   mobile zone; the shell then adds .catwalk-nav--has-mobile-bar. Below the
   breakpoint it replaces the desktop MAIN and BOTTOM rows with its own
   left / center / right bar, while the TOP row (announcement / utility strip)
   stays visible above it so a mobile announcement is never lost. Above the
   breakpoint the bar is hidden and the desktop rows render as usual.
   ================================================================== */
.catwalk-nav--builder .nav-mobile-bar {
  display: none;
}
@media (max-width: 1279px) {
  /* Hide the desktop rows that the bar replaces — keep the top row. */
  .catwalk-nav--builder.catwalk-nav--has-mobile-bar .nav-wrapper:not(.nav-wrapper--top) {
    display: none !important;
  }
  .catwalk-nav--builder.catwalk-nav--has-mobile-bar .nav-mobile-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    min-height: 64px;
  }
  .catwalk-nav--builder .nav-mobile-left {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .catwalk-nav--builder .nav-mobile-center {
    justify-self: center;
    display: flex;
    align-items: center;
  }
  .catwalk-nav--builder .nav-mobile-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* The bar always carries the drawer trigger; make sure it shows here.
     It is a control, not a surface: the base rule gives it an opaque
     --catwalk-bg-main background, which is invisible on a light bar but lands as
     a white square on a smoked one — and its hamburger, drawn with currentColor,
     then disappears into it. Transparent + inherit lets the bar decide, so the
     icon is dark on a light bar and light on a dark one with no per-case rule. */
  .catwalk-nav--builder .nav-mobile-bar .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
  }
  /* The brand sits in the left slot by default now (controls moved to the
     thumb-side right), but a merchant can still place it centre — cap both. */
  .catwalk-nav--builder .nav-mobile-left .logo img,
  .catwalk-nav--builder .nav-mobile-center .logo img {
    max-height: 40px;
    width: auto;
  }
  /* Icon links inside the bar keep a comfortable tap target. */
  .catwalk-nav--builder .nav-mobile-bar .icon-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The compact bar is the default mobile header and stays pinned to the top.
     Fixed, not sticky: body/html carry overflow-x:hidden, which turns them into
     scroll containers that break position:sticky; fixed pins to the viewport
     regardless. The compound selector (…--builder.…--has-mobile-bar) also lifts
     specificity above the ≤991.98px overlay `position:static` reset so an overlay
     home still pins. header_shell's inline script pads <body> by the bar's height.
     A solid background keeps content from showing through the pinned bar. */
  .catwalk-nav--builder.catwalk-nav--has-mobile-bar,
  body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar,
  body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--has-mobile-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
  }
}

/* The mobile bar defaults to a solid light bar, so its logo and icons must stay
   dark even when the page is in transparent-overlay mode — otherwise the
   overlay's white/inverted logo vanishes on the bar's light background. The
   compound .catwalk-nav--builder.catwalk-nav--has-mobile-bar prefix lifts the
   specificity above the overlay-color-auto/white recolor + logo-invert rules.
   Not in a media query — .nav-mobile-bar is display:none on desktop anyway, so
   the rule is inert there.

   The bar is no longer always light, and it can stop being light in two separate
   ways — so both are excluded here. :not(.nav-row--has-bg) is the row it wears;
   :not(.catwalk-nav--surface) is the header's own colour, which reaches the
   mobile bar without any row involved. Missing the second one painted dark icons
   onto a dark header on phones: the hamburger survived only because it was never
   in this list, which is precisely how the gap showed up. */
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .logo,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .icon-link,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .nav-icons i {
  color: var(--catwalk-text-primary, #151515);
}
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .logo img {
  filter: none;
}

/* A header with a colour of its own answers for the mobile bar too, and the
   answer is neither of the two constants above: not the overlay's white (the bar
   is opaque here at every scroll position) and not the theme's dark (the header
   may well be dark itself). It is the bar's own ink — which is white on a dark
   header and dark on a light one, so one rule covers both and neither can be
   left behind the way the icons were. */
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar.catwalk-nav--surface .nav-mobile-bar:not(.nav-row--has-bg) .logo,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar.catwalk-nav--surface .nav-mobile-bar:not(.nav-row--has-bg) a,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar.catwalk-nav--surface .nav-mobile-bar:not(.nav-row--has-bg) .icon-link,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar.catwalk-nav--surface .nav-mobile-bar:not(.nav-row--has-bg) .nav-icons i,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar.catwalk-nav--surface .nav-mobile-bar:not(.nav-row--has-bg) button.mobile-menu-toggle {
  color: var(--nav-glass-ink);
}

/* A bar that carries its own background follows that background's contrast, and
   its logo drops the overlay invert for the same reason a coloured desktop row
   does. */
.catwalk-nav--builder .nav-mobile-bar.nav-row--has-bg .logo,
.catwalk-nav--builder .nav-mobile-bar.nav-row--has-bg .icon-link,
.catwalk-nav--builder .nav-mobile-bar.nav-row--has-bg .nav-icons i,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar .nav-mobile-bar.nav-row--has-bg .logo,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar .nav-mobile-bar.nav-row--has-bg .icon-link,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--has-mobile-bar .nav-mobile-bar.nav-row--has-bg .nav-icons i {
  color: inherit;
}

/* ==================================================================
   Header content width (header_width setting).
   The wrapper stays full-width so a row background spans edge to edge; its
   content is centred to --header-content-w (set inline on the nav) via
   symmetric padding. Desktop only — below the breakpoint the flex / mobile
   layout keeps its own gutters. The !important beats the base .nav-wrapper
   `padding … !important`.
   ================================================================== */
@media (min-width: 1280px) {
  .catwalk-nav--builder.catwalk-nav--fixed-width .nav-wrapper {
    padding-left: max(20px, calc((100% - var(--header-content-w)) / 2)) !important;
    padding-right: max(20px, calc((100% - var(--header-content-w)) / 2)) !important;
  }
}

/* ── Extra header rows (top / bottom) ──────────────────────────────────────
   The main row keeps the untouched .nav-wrapper grid, so everything Faz 1 built
   on top of it (overlay, sticky, announcement offset) still applies. Top and
   bottom rows are separate wrappers stacked above/below it, and only exist when
   a block was actually placed in them (header_shell skips empty rows) — a
   single-row header is byte-identical to what it rendered before.

   This is what lets the builder reproduce the legacy presets: navbar_v2 puts the
   category menu on a bottom row, navbar_v3 stacks icons / logo / categories. */
.catwalk-nav--builder .nav-wrapper--top,
.catwalk-nav--builder .nav-wrapper--bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
}

.catwalk-nav--builder .nav-wrapper--top {
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--catwalk-border);
}

.catwalk-nav--builder .nav-wrapper--bottom {
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1px solid var(--catwalk-border);
}

/* A row with content in only one region shouldn't leave the other two holding
   space open — the filled region takes the whole row instead. */
.catwalk-nav--builder .nav-wrapper--top > .nav-left:empty,
.catwalk-nav--builder .nav-wrapper--top > .nav-center:empty,
.catwalk-nav--builder .nav-wrapper--top > .nav-right:empty,
.catwalk-nav--builder .nav-wrapper--bottom > .nav-left:empty,
.catwalk-nav--builder .nav-wrapper--bottom > .nav-center:empty,
.catwalk-nav--builder .nav-wrapper--bottom > .nav-right:empty {
  display: none;
}

.catwalk-nav--builder .nav-wrapper--top:has(> .nav-left:empty):has(> .nav-right:empty),
.catwalk-nav--builder .nav-wrapper--bottom:has(> .nav-left:empty):has(> .nav-right:empty) {
  grid-template-columns: 1fr;
}

/* Transparent overlay mode: the extra rows sit on the hero too, so their
   dividers must not paint a hard line across the image. */
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper--top,
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper--bottom {
  border-color: rgba(255, 255, 255, 0.18);
}

body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder .nav-wrapper--top,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder .nav-wrapper--bottom {
  border-color: var(--catwalk-border);
}

/* The category menu keeps its own list styling from the core .nav-menu rules;
   this only guarantees the row layout regardless of which zone it sits in. */
.catwalk-nav--builder .nav-menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   Navbar Builder (Faz 1) — Transparent overlay header
   The home hero's per-instance "overlay_navbar" toggle + the "Transparent
   header" theme setting put .has-overlay-hero on <body> (navbar_overlay_active).
   The navbar then sits transparently over the first (hero) block and turns
   solid once the page is scrolled — JS adds .navbar-scrolled to <body>.
   Desktop only; the mobile bar stays solid for legibility (reset below).
   ========================================================================== */
/* Sitting ON the hero is what both overlay modes have in common, so the
   positioning belongs to has-overlay-hero. */
body.has-overlay-hero .catwalk-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Clearing the bar, though, is only what "start transparent" means. Applied to
   every overlay mode it made the other one unreachable: a merchant who chose
   "keep the header's background over the hero" got the transparent bar anyway,
   so the two settings looked identical on a solid header. */
body.has-overlay-hero.overlay-mode-transparent .catwalk-nav {
  background: transparent;
  border-bottom-color: transparent;
}

/* ==========================================================================
   Header Settings — sticky + frosted glass (both opt-in, default off)
   ========================================================================== */

/* Sticky: position:fixed, not sticky. body/html carry overflow-x:hidden, which
   turns them into scroll containers and breaks position:sticky outright.
   header_shell pads <body> by the nav's height so the page doesn't slide under
   it — except over a hero, where the header is meant to sit on top. */
.catwalk-nav--builder.catwalk-nav--sticky,
body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ── Frosted glass bar ─────────────────────────────────────────────────────
   The bar is a surface like any row: header_shell puts its tint and its
   auto-contrasted ink on the element as --nav-glass-bg / --nav-glass-ink, read
   from one colour the merchant picked. There is no light/dark variant class any
   more — a dark tint yields light ink because readable_text_color said so, the
   same way a dark row does. */
.catwalk-nav--builder.catwalk-nav--surface {
  --nav-glass-bg: #ffffff;
  --nav-glass-ink: inherit;
}

/* Over the hero the bar obeys the hero mode: "transparent" clears it until the
   page scrolls, "background" keeps its band on the artwork — the look two
   independent booleans could never produce. Off the hero it is simply the
   header's background. */
.catwalk-nav--builder.catwalk-nav--surface,
body.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface {
  background: var(--nav-glass-bg);
  border-bottom-color: transparent;
  color: var(--nav-glass-ink);
}

/* Frosted is the SURFACE plus a blur, not a different kind of header. Splitting
   the two is what lets a solid bar carry the merchant's colour through exactly
   the same contrast, panel and overlay rules: "Solid" used to be the only option
   with no colour of its own, so the one control named "Header background" could
   not actually give the header a background. */
.catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur,
body.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

body.overlay-mode-transparent .catwalk-nav--builder.catwalk-nav--surface {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* The bar states its colour once; its items inherit it. Listing items with an
   explicit colour is how the hamburger once ended up dark on a smoked bar — it
   simply wasn't in the list. This is the same item list the row-background
   treatment uses, so the two can't drift apart. */
.catwalk-nav--builder.catwalk-nav--surface a,
.catwalk-nav--builder.catwalk-nav--surface .icon-link,
.catwalk-nav--builder.catwalk-nav--surface .nav-icons i,
.catwalk-nav--builder.catwalk-nav--surface .nav-menu > li > a,
.catwalk-nav--builder.catwalk-nav--surface button.mobile-menu-toggle {
  color: inherit;
}

/* Every surface answers for its own contrast, so the bar's ink stops at the
   edge of anything that paints its own background:

   1. A ROW with its own colour — auto-contrasted from that colour, so a white
      row inside a smoked bar still gets dark items.
   2. A PANEL that drops out of the bar (dropdown, mega, account/locale menus).
      Those follow the bar's material instead: a frosted bar gets frosted
      panels, at a higher opacity so text stays readable over page content. */
.catwalk-nav--builder.catwalk-nav--surface .nav-row--has-bg,
.catwalk-nav--builder.catwalk-nav--surface .nav-row--has-bg a,
.catwalk-nav--builder.catwalk-nav--surface .nav-row--has-bg .icon-link,
.catwalk-nav--builder.catwalk-nav--surface .nav-row--has-bg .nav-icons i {
  color: inherit;
}

/* A panel is the same material as the bar it drops out of — same tint, same
   alpha, same blur. Its border and shadow come from the theme's light palette,
   which reads as a pale outline round a dark panel and makes the two look like
   unrelated boxes; on glass the line is the ink at low alpha instead. */
.catwalk-nav--builder.catwalk-nav--surface .nav-dropdown,
.catwalk-nav--builder.catwalk-nav--surface .nav-mega,
.catwalk-nav--builder.catwalk-nav--surface .user-dropdown-menu,
.catwalk-nav--builder.catwalk-nav--surface .catwalk-header-dropdown {
  background: var(--nav-glass-bg);
  color: var(--nav-glass-ink);
  border-color: var(--nav-glass-line, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur .nav-dropdown,
.catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur .nav-mega,
.catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur .user-dropdown-menu,
.catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur .catwalk-header-dropdown {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* Every other item reads its colour off the surface; a logo is artwork and can't,
   so on a dark header it kept its own colours and a dark logo vanished. Inverting
   it there is the same answer the theme already gives over a dark hero, and the
   merchant's "original" choice still opts out (header_shell won't set the flag).
   A row that paints its own lighter background overrules the bar underneath it —
   that is the surface the logo is actually sitting on. */
.catwalk-nav--builder.catwalk-nav--surface .logo img {
  filter: none;
}

.catwalk-nav--builder.catwalk-nav--surface[data-nav-ink="light"] .logo img {
  filter: brightness(0) invert(1);
}

/* Over the hero the bar only owns the logo once it is actually painting: keeping
   its background there, or solidified by a scroll. While it is clear the logo is
   sitting on the artwork, and the overlay colour setting is the one that knows
   what that artwork looks like. */
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface .logo img,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface .logo img {
  filter: none;
}

body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface[data-nav-ink="light"] .logo img,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface[data-nav-ink="light"] .logo img {
  filter: brightness(0) invert(1);
}

.catwalk-nav--builder .nav-wrapper.nav-row--has-bg[data-row-text="dark"] .logo img,
.catwalk-nav--builder .nav-mobile-bar.nav-row--has-bg[data-row-text="dark"] .logo img {
  filter: none;
}

/* The theme's hover wash is a light fill — a white band across a smoked panel.
   Derive it from the ink so it reads as a highlight on whatever the surface is. */
.catwalk-nav--builder.catwalk-nav--surface .nav-dropdown a:hover,
.catwalk-nav--builder.catwalk-nav--surface .nav-dropdown a:focus-visible,
.catwalk-nav--builder.catwalk-nav--surface .nav-mega a:hover,
.catwalk-nav--builder.catwalk-nav--surface .nav-mega a:focus-visible,
.catwalk-nav--builder.catwalk-nav--surface .user-dropdown-menu a:hover,
.catwalk-nav--builder.catwalk-nav--surface .user-dropdown-menu a:focus-visible,
.catwalk-nav--builder.catwalk-nav--surface .catwalk-header-dropdown li a:hover,
.catwalk-nav--builder.catwalk-nav--surface .catwalk-header-dropdown li a:focus-visible {
  background: var(--nav-glass-hover, rgba(255, 255, 255, 0.12));
  color: var(--nav-glass-ink);
}

/* A panel hangs off the menu ITEM, whose bottom is the row's vertical padding
   above the bar's own bottom — so it opened from *inside* the header. Invisible
   while both were white; an obvious seam once the panel took the bar's colour.
   Stretching the zone doesn't help: a grid item cannot cover its parent's
   padding. So the panel is pushed down by exactly that padding, declared once
   here and mirrored by the fixed-height row that removes it. */
.catwalk-nav--builder .nav-wrapper {
  --nav-row-pad-bottom: 10px;
}

.catwalk-nav--builder .nav-row--fixed-h {
  --nav-row-pad-bottom: 0px;
}

/* Only the dropdown needs it. A mega panel is positioned against the ROW (its
   item goes position:static so the panel can span the full width), so its
   `top: 100%` already lands on the row's bottom — adding the padding there
   pushed it 10px clear of the bar and opened a gap instead of closing one. */
.catwalk-nav--builder .nav-menu > li > .nav-dropdown {
  top: calc(100% + var(--nav-row-pad-bottom, 0px));
}

/* The mega panel divides its columns with the theme's border token too, one
   level in from the panel's own outline. Same reasoning, same source: a line
   drawn for a white panel is a bright scratch across a smoked one. */
.catwalk-nav--builder.catwalk-nav--surface .nav-mega-heading {
  border-bottom-color: var(--nav-glass-line, transparent);
}

.catwalk-nav--builder.catwalk-nav--surface .nav-dropdown a,
.catwalk-nav--builder.catwalk-nav--surface .nav-mega a,
.catwalk-nav--builder.catwalk-nav--surface .user-dropdown-menu a,
.catwalk-nav--builder.catwalk-nav--surface .catwalk-header-dropdown a {
  color: inherit;
}

/* The blur reads as a smear on browsers that can't composite it, so fall back to
   the more opaque tint there. It overrides `background`, not `--nav-glass-bg`:
   the variable is set inline by header_shell, and an inline declaration always
   beats a stylesheet one, so redefining the variable here would do nothing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .catwalk-nav--builder.catwalk-nav--surface,
  body.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface,
  body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface,
  .catwalk-nav--builder.catwalk-nav--surface .nav-dropdown,
  .catwalk-nav--builder.catwalk-nav--surface .nav-mega,
  .catwalk-nav--builder.catwalk-nav--surface .user-dropdown-menu,
  .catwalk-nav--builder.catwalk-nav--surface .catwalk-header-dropdown {
    background: var(--nav-glass-opaque, rgba(255, 255, 255, 0.96));
  }
}

/* Top-bar text/icons recolored per the header's overlay color mode
   (navbar_overlay_color, chosen on the logo block → body.overlay-color-*):
   auto/white → white, dark → dark, original → untouched. Scoped to the bar's
   own items — NOT ".catwalk-nav a" (that would also hit open dropdown links,
   which sit on a white panel and would vanish). */
body.has-overlay-hero.overlay-color-auto .catwalk-nav,
body.has-overlay-hero.overlay-color-auto .catwalk-nav .nav-menu > li > a,
body.has-overlay-hero.overlay-color-auto .catwalk-nav .icon-link,
body.has-overlay-hero.overlay-color-auto .catwalk-nav .nav-icons i,
body.has-overlay-hero.overlay-color-auto .catwalk-nav .logo,
body.has-overlay-hero.overlay-color-white .catwalk-nav,
body.has-overlay-hero.overlay-color-white .catwalk-nav .nav-menu > li > a,
body.has-overlay-hero.overlay-color-white .catwalk-nav .icon-link,
body.has-overlay-hero.overlay-color-white .catwalk-nav .nav-icons i,
body.has-overlay-hero.overlay-color-white .catwalk-nav .logo {
  color: #fff;
}

/* Dark mode — dark text/icons for a light hero. */
body.has-overlay-hero.overlay-color-dark .catwalk-nav,
body.has-overlay-hero.overlay-color-dark .catwalk-nav .nav-menu > li > a,
body.has-overlay-hero.overlay-color-dark .catwalk-nav .icon-link,
body.has-overlay-hero.overlay-color-dark .catwalk-nav .nav-icons i,
body.has-overlay-hero.overlay-color-dark .catwalk-nav .logo {
  color: var(--catwalk-text-primary, #151515);
}

/* A plain (non-frosted) bar told to keep its background over the hero is not
   see-through either, so the recolour above must not reach it: its surface is
   the theme's own light bar and its items belong in the theme's own dark ink.
   Whitened, they were white on white the moment that mode was chosen. Declared
   before the row-background rule below so a row that paints itself still wins. */
body.has-overlay-hero.overlay-mode-background .catwalk-nav:not(.catwalk-nav--surface),
body.has-overlay-hero.overlay-mode-background .catwalk-nav:not(.catwalk-nav--surface) .nav-menu > li > a,
body.has-overlay-hero.overlay-mode-background .catwalk-nav:not(.catwalk-nav--surface) .icon-link,
body.has-overlay-hero.overlay-mode-background .catwalk-nav:not(.catwalk-nav--surface) .nav-icons i,
body.has-overlay-hero.overlay-mode-background .catwalk-nav:not(.catwalk-nav--surface) .logo {
  color: var(--catwalk-text-primary, #151515);
}

body.has-overlay-hero.overlay-mode-background .catwalk-nav:not(.catwalk-nav--surface) .logo img {
  filter: none;
}

/* Dropdown / mega-menu panels have their own white background, so their links
   keep normal dark text in every mode — EXCEPT on a frosted bar, where the
   panels take the bar's tint and its auto-contrasted ink instead. Written from
   the panel's own background rather than the mode, which is the rule this whole
   file follows: whoever paints the surface decides the ink on it. */
body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .nav-dropdown a,
body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .catwalk-header-dropdown a,
body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .catwalk-header-dropdown .dropdown-header,
body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .user-dropdown-menu a {
  color: var(--catwalk-text-primary, #151515);
}

/* Logo recolor: auto/white invert dark logos to white; dark makes them solid
   black; original leaves the artwork untouched (no filter). */
body.has-overlay-hero.overlay-color-auto .catwalk-nav .logo img,
body.has-overlay-hero.overlay-color-white .catwalk-nav .logo img {
  filter: brightness(0) invert(1);
}
body.has-overlay-hero.overlay-color-dark .catwalk-nav .logo img {
  filter: brightness(0);
}

/* A row with its OWN background is NOT transparent over the hero, so the overlay
   recolor (which whitens/inverts the bar's items) must not touch it — otherwise
   a white icon lands on a light row background and vanishes. The row's own
   auto-contrast colour (set inline on the wrapper) wins instead. The extra
   `.nav-wrapper` in the compound lifts specificity above the overlay-color-*
   rules just above. */
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper.nav-row--has-bg a,
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper.nav-row--has-bg .icon-link,
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper.nav-row--has-bg .nav-icons i,
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper.nav-row--has-bg .nav-menu > li > a,
body.has-overlay-hero .catwalk-nav--builder .nav-wrapper.nav-row--has-bg .logo {
  color: inherit;
}
/* The same argument one level up, for the BAR. A frosted bar is only see-through
   while it is over the hero in "start transparent" mode and the page has not
   moved. In "keep the background" mode, and from the first scroll, it paints its
   own surface — so the overlay recolour has to stop there too and the bar's
   auto-contrasted ink take over. Without this a white frosted bar carried its
   hero-white items onto its own white surface and vanished the moment the
   merchant scrolled; the dark bar had the mirror problem from the other rule. */
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface,
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface .nav-menu > li > a,
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface .icon-link,
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface .nav-icons i,
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface .logo,
body.has-overlay-hero.overlay-mode-background .catwalk-nav--builder.catwalk-nav--surface button.mobile-menu-toggle,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface .nav-menu > li > a,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface .icon-link,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface .nav-icons i,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface .logo,
body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface button.mobile-menu-toggle {
  color: var(--nav-glass-ink);
}

/* The logo artwork is NOT listed here. On a bar with its own colour the single
   rule near the top decides it from that colour's ink, in every state — over the
   hero, scrolled, or plain. Naming the states again would mean answering the
   same question twice and getting different answers: a "leave it alone" here put
   a dark logo back onto a dark bar the moment the page scrolled. */

body.has-overlay-hero .catwalk-nav--builder .nav-wrapper.nav-row--has-bg .logo img {
  filter: none;
}

/* Scrolled — solidify back to the default light navbar and pin it. */
body.has-overlay-hero.navbar-scrolled .catwalk-nav {
  position: fixed;
  background: #fff;
  border-bottom-color: var(--catwalk-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* "Solidify back to light" is only true when the scrolled bar IS light. A glass
   bar keeps the merchant's own colour through the scroll, and it states that
   colour once for its items to inherit — so naming the items here and handing
   them the theme's dark ink put dark text on a dark bar the moment the page
   moved. The bar still pins itself above (position is not in question); only
   the colour is, and on glass the surface already answers for it. */
body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface),
body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) a,
body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) .nav-menu > li > a,
body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) .icon-link,
body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) .nav-icons i,
body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) .logo {
  color: var(--catwalk-text-primary, #151515);
}

body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) .logo img {
  filter: none;
}

/* Mobile: keep the navbar solid — a transparent bar over a cropped hero on a
   small viewport hurts legibility more than it helps. */
@media (max-width: 991.98px) {
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface),
  body.has-overlay-hero.navbar-scrolled .catwalk-nav:not(.catwalk-nav--surface) {
    position: static;
    background: #fff;
    border-bottom-color: var(--catwalk-border);
    box-shadow: none;
  }

  /* Same decision for a bar with its own colour, in that colour rather than
     white: it stops going clear over the hero here and stands on its own
     near-opaque tint. Left to the desktop rules it went transparent while the
     mobile reset below still forced dark ink into it — dark items floating on
     the artwork. */
  body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--surface,
  body.overlay-mode-transparent .catwalk-nav--builder.catwalk-nav--surface,
  body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface {
    /* Surface only — no `position` here. This compound is specific enough to beat
       the sticky rule, so pinning it would have quietly cancelled "stay at the top
       while scrolling" on phones for anyone using a frosted bar. */
    background: var(--nav-glass-opaque, rgba(255, 255, 255, 0.96));
    border-bottom-color: transparent;
    box-shadow: none;
    color: var(--nav-glass-ink);
  }

  body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur,
  body.overlay-mode-transparent .catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur,
  body.has-overlay-hero.navbar-scrolled .catwalk-nav--builder.catwalk-nav--surface.catwalk-nav--blur {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
  /* The bar defaults to solid white here, so its items MUST be dark. The desktop
     overlay recolor (.overlay-color-auto/-white → white text + logo-invert) is one
     class more specific than this reset, so without !important it wins and paints
     white items onto the white bar — the logo and icons vanish. !important lets the
     solid-bar colour win regardless of the chosen overlay colour mode.
     :not(.nav-row--has-bg) because a bar that carries the main row's background is
     no longer necessarily light; there its own auto-contrast is the authority, and
     an !important here would overrule it. A glass bar is excluded for exactly the
     same reason — it too paints its own surface — and it has to be named
     separately because the colour lives on the bar, not on a row inside it. */
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface),
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) a,
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .icon-link,
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .nav-icons i,
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .nav-mobile-bar:not(.nav-row--has-bg) .logo {
    color: var(--catwalk-text-primary, #151515) !important;
  }
  /* Same exclusion as the ink reset above: a bar carrying its own colour answers
     for its logo too, and an !important here would overrule that on phones — the
     one width where the bar is never see-through and the colour is fully on show. */
  body.has-overlay-hero .catwalk-nav:not(.catwalk-nav--surface) .logo img {
    filter: none !important;
  }

  /* Here the bar is never clear, so it owns the logo at every scroll position —
     no "is it painting yet" question to ask. */
  body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--surface .logo img {
    filter: none;
  }

  body.has-overlay-hero .catwalk-nav--builder.catwalk-nav--surface[data-nav-ink="light"] .logo img {
    filter: brightness(0) invert(1);
  }
}

.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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font) !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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
}

/* 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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  font-size: 28px;
  font-weight: 500;
  color: var(--catwalk-cart-text);
  margin: 0 0 15px 0;
}

.catwalk-cart-empty p {
  font-family: var(--catwalk-font);
  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: var(--catwalk-font);
  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) {
  /* Legacy navbars use the LEFT zone for desktop menu links, so hiding it on
     mobile (the hamburger drawer replaces it) is correct there. The block-based
     builder header, however, lets the merchant place the LOGO (or any block) in
     the left zone — hiding it wiped the logo out on mobile. Scope the left-zone
     hide to legacy only; the builder's own mobile CSS governs its layout. The
     desktop mega-menu list (.nav-menu) stays hidden for both — it can't fit a
     phone and the drawer covers it. */
  .catwalk-nav:not(.catwalk-nav--builder) .nav-left,
  .catwalk-nav .nav-menu {
    display: none !important;
  }

  /* Builder left zone stays a flex row so its block (typically the logo) sits
     vertically centred like the right-zone icons. */
  .catwalk-nav--builder .nav-left {
    display: flex;
    align-items: center;
  }

  .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;
  }

  /* The search entry is a button, not a link — it opens the overlay rather than
     navigating. Strip the UA button styling so it sits in the list exactly like
     its <a> siblings. */
  button.mobile-menu-link {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    gap: 10px;
  }

  .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;
  }
}

/* The drawer lives next to the cart icon in the header, which the block-built
   header hides wholesale on mobile — a display:none ancestor cannot be undone
   from CSS, so the script moves the whole container out to <body>. The container
   carries the icon too, so park it out of the flow and drop the duplicate icon:
   the bar has its own, and the drawer inside is position:fixed either way. */
/* display:contents, not a zero-sized fixed box. A fixed container creates its
   own stacking context, which trapped the drawer's z-index:9999 inside it: the
   container itself resolved to z-index:auto, so the 9998 overlay painted over
   the drawer and swallowed every click on the cart's contents. Removing the box
   entirely lets the drawer keep its own fixed positioning and z-index in the
   body's context, where it outranks the overlay as intended. */
#cart_items.cart-drawer-portal {
  display: contents;
}

#cart_items.cart-drawer-portal > .cart-icon {
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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: var(--catwalk-font);
    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 Top Announcement Bar (Navbar Builder Faz 2)
   Louren-style scrolling promo strip fed by Announcements (position=1,
   published) via top_announcements(). One message centered + prev/next
   arrows (swiper). Sits above the navbar for every navbar_vX variant.
   ============================================ */
:root {
    --catwalk-announcement-h: 40px;
}

.catwalk-announcement-bar {
    position: relative;
    z-index: 1100;
    width: 100%;
    min-height: var(--catwalk-announcement-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    overflow: hidden;
}

.catwalk-announcement-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 1100px;
    padding: 0 16px;
}

.catwalk-announcement-swiper {
    flex: 0 1 auto;
    max-width: 640px;
    overflow: hidden;
}

.catwalk-announcement-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
}

.catwalk-ann-text {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

a.catwalk-ann-text:hover {
    text-decoration: underline;
}

.catwalk-ann-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.7;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.catwalk-ann-nav:hover {
    opacity: 1;
}

/* CTA button (announcement button_text) — a pill that inherits the bar's
   auto-contrast colour so it reads on any background. */
.catwalk-ann-cta {
    flex: 0 0 auto;
    margin-left: 12px;
    padding: 3px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.catwalk-ann-cta:hover {
    opacity: 0.72;
    text-decoration: none;
}

/* Dismiss (X) — pinned to the far right so it stays put next to the centred
   message; the shopper closes the bar and it's remembered in the browser. */
.catwalk-announcement-bar--dismissible {
    position: relative;
}

.catwalk-ann-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.6;
    font-size: 18px;
    line-height: 1;
    transition: opacity 0.2s ease;
}

.catwalk-ann-close:hover {
    opacity: 1;
}

/* Reserve room for the close (X) on BOTH sides so the centred message + its
   prev/next arrows never slide under it. Symmetric padding keeps the message
   centred; the right 44px covers the 24px button + its 10px offset with a gap. */
.catwalk-announcement-bar--dismissible .catwalk-announcement-inner {
    padding-left: 44px;
    padding-right: 44px;
}

/* Transparent overlay navbar coordination: the overlay navbar is
   position:absolute; top:0 (catwalk-components.css), which would sit ON TOP of
   the bar. When the bar is present, push the absolute navbar down by the bar
   height. On scroll the bar scrolls away and the fixed navbar pins to top:0.
   These 2-class selectors out-specify the single-class overlay rule. */
body.has-announcement-bar.has-overlay-hero .catwalk-nav {
    top: var(--catwalk-announcement-h);
}

body.has-announcement-bar.has-overlay-hero.navbar-scrolled .catwalk-nav {
    top: 0;
}

@media (max-width: 575px) {
    .catwalk-announcement-bar {
        font-size: 12px;
    }

    .catwalk-announcement-inner {
        gap: 8px;
        padding: 0 8px;
    }
}

/* --- 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: var(--catwalk-font);
  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: var(--catwalk-font);
  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: var(--catwalk-font);
  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);
}