/**
 * Lagano Design System - CSS Variables
 *
 * All design tokens in one place.
 * Change colors here = change everywhere.
 *
 * NO !important needed - just use proper selectors.
 *
 * @package Lagano
 * @since 1.0.0
 */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Primary - Yellow (CTA, hover states) */
  --color-primary: #ffef0f;
  --color-primary-hover: #e6d700;
  --color-primary-active: #ccbe00;
  --color-primary-light: #fff9b3;

  /* Secondary - Purple (accents, tags, links) */
  --color-secondary: #7c3aed;
  --color-secondary-hover: #6d28d9;
  --color-secondary-active: #5b21b6;
  --color-secondary-light: #ede9fe;
  --color-secondary-dark: #5b21b6;

  /* Neutral - Grayscale */
  --color-dark: #1c1c2b;
  --color-gray-900: #212121;
  --color-gray-800: #424242;
  --color-gray-700: #616161;
  --color-gray-600: #757575;
  --color-gray-500: #9e9e9e;
  --color-gray-400: #bdbdbd;
  --color-gray-300: #e0e0e0;
  --color-gray-200: #eeeeee;
  --color-gray-100: #f5f5f5;
  --color-gray-50: #fafafa;
  --color-white: #ffffff;

  /* Text */
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-light: #999999;
  --color-text-inverse: #ffffff;

  /* Backgrounds */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f3f1;
  --color-bg-dark: #1c1c2b;

  /* Borders */
  --color-border: #1e1e1e;
  --color-border-light: #e0e0e0;

  /* Semantic */
  --color-success: #22c55e;
  --color-success-dark: #16a34a;
  --color-success-light: #dcfce7;
  --color-error: #ef4444;
  --color-error-dark: #dc2626;
  --color-error-light: #fee2e2;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  --font-primary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", "SF Mono", Monaco, Consolas, monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ========================================
     SPACING
     ======================================== */

  --space-0: 0;
  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */

  /* ========================================
     SIZING
     ======================================== */

  --max-w-sm: 24rem;       /* 384px */
  --max-w-md: 28rem;       /* 448px */
  --max-w-lg: 32rem;       /* 512px */
  --max-w-xl: 36rem;       /* 576px */
  --max-w-2xl: 42rem;      /* 672px */
  --max-w-4xl: 56rem;      /* 896px */
  --max-w-6xl: 72rem;      /* 1152px */
  --max-w-7xl: 80rem;      /* 1280px */
  --max-w-8xl: 90rem;      /* 1440px */
  --max-w-9xl: 100rem;     /* 1600px */

  --container-padding: var(--space-3);
  --container-max-width: var(--max-w-8xl);  /* Wider like Matras */

  /* ========================================
     BORDERS
     ======================================== */

  --radius-none: 0;
  --radius-sm: 0.125rem;   /* 2px */
  --radius-default: 0.25rem; /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* ========================================
     SHADOWS - Modern Style (lighter)
     ======================================== */

  --shadow-brutal-sm: 2px 2px 0 var(--color-dark);
  --shadow-brutal: 3px 3px 0 var(--color-dark);
  --shadow-brutal-md: 4px 4px 0 var(--color-dark);
  --shadow-brutal-lg: 5px 5px 0 var(--color-dark);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-none: 0 0 0 0 transparent;

  /* Card shadow - softer, more modern */
  --shadow-card: 0 2px 8px -2px rgb(0 0 0 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.08);
  --shadow-card-hover: 0 8px 24px -4px rgb(0 0 0 / 0.15), 0 12px 32px -8px rgb(0 0 0 / 0.1);

  /* ========================================
     TRANSITIONS
     ======================================== */

  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-colors: color var(--duration-150) var(--ease-in-out),
                       background-color var(--duration-150) var(--ease-in-out),
                       border-color var(--duration-150) var(--ease-in-out);
  --transition-transform: transform var(--duration-200) var(--ease-out);
  --transition-all: all var(--duration-200) var(--ease-in-out);

  /* ========================================
     Z-INDEX
     ======================================== */

  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-tooltip: 1070;
  --z-toast: 9999;
}
/**
 * Lagano CSS Reset
 *
 * Modern CSS reset based on Andy Bell's reset.
 * Sets sensible defaults for all elements.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin/padding */
* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overflow-x: clip;
}

/* Core body defaults */

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Remove list styles on ul, ol with role="list" */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core link styles */
a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
}

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

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-dark);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Paragraphs */
p {
  text-wrap: pretty;
  max-width: 75ch;
}

/* Images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Button reset */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anchor focus styles */
:target {
  scroll-margin-block: 5ex;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-dark);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * Lagano Typography
 *
 * Text styles and utilities.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   PROSE - Content Typography
   ======================================== */

.prose {
  max-width: 75ch;
  line-height: var(--leading-relaxed);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  margin-bottom: var(--space-4);
}

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

.prose ul,
.prose ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose a {
  color: var(--color-secondary);
  text-decoration: none;
}

.prose a:hover {
  color: var(--color-secondary-hover);
}

.prose strong {
  font-weight: var(--font-bold);
}

.prose blockquote {
  border-left: 4px solid var(--color-secondary);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-text-muted);
}

.prose code {
  background: var(--color-gray-100);
  padding: 0.125em 0.25em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.prose pre {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.prose pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ========================================
   TEXT UTILITIES
   ======================================== */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

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

.text-dark { color: var(--color-dark); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/**
 * Lagano Layout - Container
 *
 * Main container and wrapper styles.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   CONTAINER
   ======================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--max-w-4xl);
}

.container--wide {
  max-width: 100%;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* ========================================
   SITE STRUCTURE
   ======================================== */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

.site-content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

/* ========================================
   SECTIONS
   ======================================== */

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section--sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section--lg {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* ========================================
   PAGE HEADER
   ======================================== */

.page-header {
  padding: var(--space-8) 0;
  margin-bottom: var(--space-8);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.page-header__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin: 0;
}

.page-header__description {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .page-header__title {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .container--wide {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1440px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}
/**
 * Lagano Layout - Header
 *
 * Site header, logo, navigation, and actions.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   HEADER - Modern with depth
   ======================================== */

.header {
  background: linear-gradient(135deg, #ffffff 0%, #fdfcfa 25%, #f9f7f5 50%, #f5f3f1 75%, #faf9f8 100%);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  overflow: visible;
}

.header__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-2) var(--space-4);
}

/* ========================================
   LOGO
   ======================================== */

.header__logo {
  flex-shrink: 0;
}

.header__logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.header__logo-img {
  height: 50px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.header__logo-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .header__logo-img {
    height: 42px;
    max-width: 180px;
  }

  .header__logo-name {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 1024px) {
  .header__logo-img {
    height: 58px;
    max-width: 220px;
  }
}


/* ========================================
   HEADER SEARCH BAR
   ======================================== */

.header__search {
  position: relative;
  z-index: 1001;
  display: block;
  order: 10;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Always hide the search modal toggle button */
.header__action--search {
  display: none !important;
}

.header__search-form {
  display: flex;
  align-items: center;
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: visible;
  transition: var(--transition-all);
  position: relative;
  z-index: var(--z-dropdown);
}

.header__search-form:focus-within {
  background: var(--color-white);
  border-color: var(--color-secondary);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.12);
}

.header__search-input {
  flex: 1;
  padding: 10px var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-dark);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  min-width: 0;
}

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

.header__search-input:focus {
  outline: none;
}

.header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: var(--transition-colors);
  flex-shrink: 0;
  margin-right: 2px;
}

.header__search-form:focus-within .header__search-btn {
  color: var(--color-secondary);
}

.header__search-btn:hover {
  color: var(--color-secondary);
}

.header__search-btn svg {
  width: 18px;
  height: 18px;
}

/* ========================================
   DESKTOP NAVIGATION
   ======================================== */

.nav-desktop {
  display: none;
  flex: 1;
  margin: 0 var(--space-6);
}

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-desktop__list li {
  position: relative;
}

.nav-desktop__list a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.nav-desktop__list a:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

.nav-desktop__list .current-menu-item > a {
  background: linear-gradient(135deg, var(--color-primary) 0%, #f0d500 100%);
  color: var(--color-dark);
  box-shadow: 0 4px 15px rgba(250, 220, 0, 0.3);
}

/* Submenu - Modern dropdown */
.nav-desktop__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 10px 20px rgba(0, 0, 0, 0.1);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  list-style: none;
}

.nav-desktop__list li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(5px);
}

.nav-desktop__list .sub-menu a {
  color: var(--color-dark);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.nav-desktop__list .sub-menu a:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, #f0d500 100%);
  color: var(--color-dark);
  transform: translateX(5px);
  box-shadow: 0 4px 10px rgba(250, 220, 0, 0.3);
}

/* ========================================
   HEADER ACTIONS
   ======================================== */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
}

.header__action:hover {
  background-color: rgba(124, 58, 237, 0.1);
  color: var(--color-secondary);
}

.header__action svg {
  width: 22px;
  height: 22px;
}

/* Cart count badge */
.header__cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: 11px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__cart-count--empty {
  display: none;
}

/* Mobile layout: logo + actions + burger top row, search below */
.header__logo {
  order: 1;
}

.header__actions {
  order: 2;
}

.header__action--menu {
  order: 3;
  display: flex;
}

.header__search {
  order: 10;
}

/* ========================================
   HAMBURGER ICON
   ======================================== */

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}

.hamburger__line {
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: var(--transition-all);
}

/* Active state */
.mobile-nav-toggle[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ========================================
   SEARCH MODAL
   ======================================== */

.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: var(--transition-all);
}

.search-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.search-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.search-modal__content {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: var(--color-bg);
  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-brutal-lg);
  transform: translateY(-20px);
  transition: var(--transition-transform);
}

.search-modal[aria-hidden="false"] .search-modal__content {
  transform: translateY(0);
}

.search-modal__form {
  display: flex;
  gap: var(--space-2);
}

.search-modal__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-family: var(--font-primary);
}

.search-modal__input:focus {
  outline: none;
  border-color: var(--color-secondary);
}

.search-modal__submit {
  padding: var(--space-3);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
}

.search-modal__submit:hover {
  background: var(--color-primary-hover);
}

.search-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
}

.search-modal__close:hover {
  color: var(--color-dark);
}

/* ========================================
   RESPONSIVE - Tablet & Desktop
   ======================================== */

@media (min-width: 768px) {
  .header__container {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .header__action {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .header__container {
    flex-wrap: nowrap;
  }

  .header__search {
    order: 2;
    width: auto;
    flex: 1;
    max-width: 420px;
    margin: 0 var(--space-6);
  }

  .header__search-form {
    background: var(--color-white);
    border-color: var(--color-gray-300);
  }

  .header__search-input {
    padding: 10px var(--space-5);
    font-size: var(--text-sm);
  }

  .header__action--menu {
    display: none;
  }
}

/* ========================================
   CATEGORY BAR - Part of purple header
   ======================================== */

.category-bar {
  position: relative;
  z-index: 999;
  background: linear-gradient(135deg, #ffffff 0%, #fdfcfa 25%, #f9f7f5 50%, #f5f3f1 75%, #faf9f8 100%);
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(124, 58, 237, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.category-bar::-webkit-scrollbar {
  display: none;
}

.category-bar__container {
  display: flex;
  justify-content: center;
}

.category-bar__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  white-space: nowrap;
}

.category-bar__item {
  flex-shrink: 0;
}

.category-bar__link {
  display: block;
  padding: var(--space-3) var(--space-5);
  color: var(--color-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.category-bar__link:hover {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 100%);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
}

/* Mobile: hide category bar (links are in mobile nav) */
@media (max-width: 1023px) {
  .category-bar {
    display: none;
  }
}

/* ========================================
   POPULAR TAGS BAR
   ======================================== */

.popular-tags {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #faf8ff 0%, #f5f0ff 50%, #faf8ff 100%);
  border-top: 1px solid rgba(124, 58, 237, 0.12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.popular-tags::-webkit-scrollbar {
  display: none;
}

.popular-tags__container {
  display: flex;
  justify-content: center;
  overflow: visible;
}

.popular-tags__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  white-space: nowrap;
}

.popular-tags__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  background: var(--color-white);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.popular-tags__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.popular-tags__item:hover {
  background: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
}

/* Mobile: hide popular tags (desktop only) */
@media (max-width: 1023px) {
  .popular-tags {
    display: none;
  }
}

/* ========================================
   SEARCH AUTOCOMPLETE
   ======================================== */

.search-autocomplete {
  /* Position set by JS (fixed, top/left/width inline) */
  z-index: 9999;
  background: var(--color-white);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 40px rgba(124, 58, 237, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.08);
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: none;
}

.search-autocomplete::-webkit-scrollbar {
  display: none;
}

.search-autocomplete.is-active {
  display: block;
}

.search-autocomplete__loading,
.search-autocomplete__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.search-autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gray-100);
  transition: all 0.2s ease;
  position: relative;
}

.search-autocomplete__item:first-child {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.search-autocomplete__item:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.search-autocomplete__item:hover {
  background: linear-gradient(135deg, #faf8ff 0%, #f3edff 100%);
}

.search-autocomplete__item:hover .search-autocomplete__title {
  color: var(--color-secondary);
}

.search-autocomplete__img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.search-autocomplete__item:hover .search-autocomplete__img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.12);
}

.search-autocomplete__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-autocomplete__title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.search-autocomplete__price {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
}

/* ========================================
   SHOP SIDEBAR
   ======================================== */

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .shop-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
  }
}

.shop-sidebar {
  display: none;
}

@media (max-width: 1023px) {
  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .shop-sidebar.is-open {
    visibility: visible;
    opacity: 1;
  }

  .shop-sidebar__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 340px;
    background: var(--color-bg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .shop-sidebar.is-open .shop-sidebar__panel {
    transform: translateX(0);
  }

  .shop-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 2px solid var(--color-secondary);
    background: var(--color-white);
    flex-shrink: 0;
  }

  .shop-sidebar__title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-dark);
  }

  .shop-sidebar__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--color-dark);
    cursor: pointer;
    transition: var(--transition-all);
  }

  .shop-sidebar__close:hover {
    background: var(--color-secondary);
    color: var(--color-white);
  }

  .shop-sidebar__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
  }

  .shop-sidebar__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
}

/* Mobile filter toggle button */
.shop-toolbar__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-full);
  color: var(--color-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: var(--transition-all);
}

.shop-toolbar__filter-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.shop-toolbar__filter-btn svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 1024px) {
  .shop-toolbar__filter-btn {
    display: none;
  }

  .shop-sidebar {
    display: block;
  }

  .shop-sidebar__header,
  .shop-sidebar__overlay {
    display: none;
  }

  .shop-sidebar__panel {
    display: contents;
  }
}

.sidebar-widget {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-card);
  border: none;
  transition: box-shadow 0.3s ease;
}

.sidebar-widget:hover {
  box-shadow: var(--shadow-card-hover);
}

.sidebar-widget__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-secondary);
}

.sidebar-widget__search {
  display: flex;
  align-items: center;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  transition: all 0.2s ease;
}

.sidebar-widget__search:focus-within {
  background: var(--color-white);
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

.sidebar-widget__search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-dark);
  min-width: 0;
  padding: var(--space-1) 0;
}

.sidebar-widget__search input::placeholder {
  color: var(--color-text-light);
}

.sidebar-widget__search input:focus {
  outline: none;
}

.sidebar-widget__search svg {
  width: 18px;
  height: 18px;
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-right: var(--space-2);
}

.sidebar-widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 500px;
  overflow-y: auto;
}

.sidebar-widget__list::-webkit-scrollbar {
  width: 6px;
}

.sidebar-widget__list::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: 3px;
}

.sidebar-widget__list::-webkit-scrollbar-thumb {
  background: var(--color-secondary-light);
  border-radius: 3px;
}

.sidebar-widget__list::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

.sidebar-widget__item {
  padding: var(--space-1) 0;
}

.sidebar-widget__item label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  line-height: 1.4;
}

.sidebar-widget__item label:hover {
  color: var(--color-secondary);
  background: var(--color-secondary-light);
}

/* Custom checkbox styling */
.sidebar-widget__item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s ease;
  background: var(--color-white);
}

.sidebar-widget__item input[type="checkbox"]:hover {
  border-color: var(--color-secondary);
}

.sidebar-widget__item input[type="checkbox"]:checked {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.sidebar-widget__item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sidebar-widget__item input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

.sidebar-widget__children {
  list-style: none;
  padding-left: var(--space-6);
  margin-top: var(--space-1);
  border-left: 2px solid var(--color-gray-100);
  margin-left: var(--space-2);
}

.sidebar-widget__children .sidebar-widget__item label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
}

.sidebar-widget__children .sidebar-widget__item input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.sidebar-widget__children .sidebar-widget__item input[type="checkbox"]:checked::after {
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
}

/* ========================================
   SHOP TOOLBAR - Sorting & Results (Floating - no box)
   ======================================== */

.shop-toolbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
}

.shop-toolbar__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  text-align: right;
}

.shop-toolbar__sort {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shop-toolbar__sort label {
  font-size: var(--text-sm);
  color: var(--color-dark);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

.shop-toolbar__sort select {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-dark);
  background: var(--color-white);
  cursor: pointer;
}

.shop-toolbar__sort select:focus {
  outline: none;
  border-color: var(--color-secondary);
}

@media (min-width: 768px) {
  .shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .shop-toolbar__sort {
    grid-column: auto;
  }

  .shop-toolbar__sort select {
    min-width: 160px;
    flex: none;
  }
}
/**
 * Lagano Layout - Footer
 *
 * Site footer with widgets, links, and copyright.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   USP BAR (Above Footer)
   ======================================== */

.usp-bar {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 50%, #a78bfa 100%);
  padding: var(--space-8) 0;
}

.usp-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.usp-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
  min-width: 0;
}

.usp-bar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: var(--color-dark);
  border-radius: var(--radius-lg);
}

.usp-bar__icon svg {
  width: 24px;
  height: 24px;
}

.usp-bar__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: break-word;
}

.usp-bar__content strong {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-white);
}

.usp-bar__content span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
  .usp-bar__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .usp-bar__item {
    padding: var(--space-5);
  }

  .usp-bar__icon {
    width: 56px;
    height: 56px;
  }

  .usp-bar__icon svg {
    width: 32px;
    height: 32px;
  }

  .usp-bar__content strong {
    font-size: var(--text-lg);
  }

  .usp-bar__content span {
    font-size: var(--text-sm);
  }
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  background: var(--color-dark);
  color: var(--color-white);
  margin-top: auto;
}

.footer__container {
  padding-top: var(--space-12);
  padding-bottom: var(--space-6);
}

/* ========================================
   FOOTER WIDGETS
   ======================================== */

.footer__widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.footer__column {
  /* Widget column */
}

.footer-widget__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Footer widget lists (WordPress widgets) */
.footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__column li {
  margin-bottom: var(--space-2);
}

.footer__column a {
  color: var(--color-gray-300);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-colors);
}

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

/* ========================================
   FOOTER CONTACT
   ======================================== */

.footer__contact {
  margin-bottom: var(--space-4);
}

.footer__contact p {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.footer__contact a {
  color: var(--color-gray-300);
  text-decoration: none;
  transition: var(--transition-colors);
}

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

/* ========================================
   FOOTER SOCIAL
   ======================================== */

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-gray-800);
  border: var(--border-2) solid var(--color-gray-700);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  transition: var(--transition-all);
}

.footer__social-link:hover {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   FOOTER BOTTOM
   ======================================== */

.footer__bottom {
  border-top: var(--border-1) solid var(--color-gray-800);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.footer__copyright {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  margin: 0;
}

.footer__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__menu a {
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: var(--transition-colors);
}

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

/* ========================================
   ADDITIONAL FOOTER STYLES
   ======================================== */

.footer__about {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.footer__contact p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__contact svg {
  flex-shrink: 0;
  color: var(--color-secondary);
}

.footer__hours {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  margin-top: var(--space-4);
}

.footer__hours strong {
  color: var(--color-gray-300);
}

/* ========================================
   RESPONSIVE - Tablet
   ======================================== */

@media (min-width: 768px) {
  .footer__widgets {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ========================================
   FOOTER LOGO
   ======================================== */

.footer__logo {
  margin-bottom: var(--space-4);
}

.footer__logo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.footer__logo-link:hover .footer__logo-name {
  color: var(--color-primary);
}

.footer__logo-name {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  letter-spacing: -0.02em;
  transition: var(--transition-colors);
}

.footer__logo-name span {
  color: var(--color-primary);
}

/* ========================================
   FOOTER USP
   ======================================== */

.footer__usp {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-gray-800);
  border-radius: var(--radius-md);
}

.footer__usp p {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  margin-bottom: var(--space-1);
}

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

.footer__usp strong {
  color: var(--color-primary);
}

/* ========================================
   RESPONSIVE - Desktop
   ======================================== */

@media (min-width: 1024px) {
  .footer__widgets {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
  }
}
/**
 * Lagano Layout - Grid System
 *
 * Flexible grid for product listings and content.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   GRID BASE
   ======================================== */

.grid {
  display: grid;
  gap: var(--space-6);
}

/* ========================================
   COLUMN VARIANTS
   ======================================== */

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

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

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

/* ========================================
   PRODUCT GRID (WooCommerce)
   Auto-fill creates cards similar to bestsellers carousel (~240px)
   ======================================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* Homepage sections - responsive cards */
.section--latest .products-grid,
.section--sale .products-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

/* ========================================
   FLEX UTILITIES
   ======================================== */

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

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

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

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

.justify-end {
  justify-content: flex-end;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ========================================
   RESPONSIVE - Tablet
   ======================================== */

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

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

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  /* Homepage sections - 3 columns on tablet */
  .section--latest .products-grid,
  .section--sale .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  /* 3-column variant for puzzles */
  .products-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   RESPONSIVE - Desktop (4 columns max)
   ======================================== */

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  /* Homepage sections - 5 columns on desktop, hide 6th product */
  .section--latest .products-grid,
  .section--sale .products-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }

  .section--latest .products-grid > :nth-child(n+6),
  .section--sale .products-grid > :nth-child(n+6) {
    display: none;
  }

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

/* Large screens */
@media (min-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  /* Homepage sections - 5 columns, hide 6th product */
  .section--latest .products-grid,
  .section--sale .products-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
  }

  .section--latest .products-grid > :nth-child(n+6),
  .section--sale .products-grid > :nth-child(n+6) {
    display: none;
  }

  .products-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}
/**
 * Lagano Components - Buttons
 *
 * Brutalist design with solid colors, borders, and offset shadows.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* =========================
   BUTTON BASE
   ========================= */

.btn,
.btn--base,
.btn--primary,
.btn--secondary,
.btn--cta,
.add-to-cart-btn,
.product-card__add-to-cart,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  min-height: 44px;

  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-xl);
  cursor: pointer;

  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-in-out;
  box-shadow: var(--shadow-brutal-sm);
}

/* Hover */
.btn:hover,
.btn--base:hover,
.btn--primary:hover,
.btn--secondary:hover,
.btn--cta:hover,
.add-to-cart-btn:hover,
.product-card__add-to-cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

/* Active (pressed) */
.btn:active,
.btn--base:active,
.btn--primary:active,
.btn--secondary:active,
.btn--cta:active,
.add-to-cart-btn:active,
.product-card__add-to-cart:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-dark);
}

/* Focus */
.btn:focus-visible,
.btn--base:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.btn--cta:focus-visible,
.add-to-cart-btn:focus-visible,
.product-card__add-to-cart:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce a.button.alt:focus-visible,
.woocommerce button.button.alt:focus-visible,
.woocommerce input.button.alt:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn--base:disabled,
.btn--primary:disabled,
.btn--secondary:disabled,
.btn--cta:disabled,
.add-to-cart-btn:disabled,
.product-card__add-to-cart:disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   SECONDARY - Purple (Main)
   ========================= */

.btn--secondary,
.add-to-cart-btn,
.product-card__add-to-cart,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn--secondary:hover,
.add-to-cart-btn:hover,
.product-card__add-to-cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--color-secondary-hover);
  color: var(--color-white);
  box-shadow: 4px 4px 0 var(--color-dark);
}

.btn--secondary:active,
.add-to-cart-btn:active,
.product-card__add-to-cart:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active {
  box-shadow: 1px 1px 0 var(--color-dark);
}

/* =========================
   CTA / PRIMARY - Yellow
   ========================= */

.btn--cta,
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn--cta:hover,
.btn--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-dark);
  box-shadow: 4px 4px 0 var(--color-dark);
}

.btn--cta:active,
.btn--primary:active {
  box-shadow: 1px 1px 0 var(--color-dark);
}

/* =========================
   DARK BUTTON
   ========================= */

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

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

/* =========================
   OUTLINE BUTTON
   ========================= */

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

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

/* =========================
   GHOST BUTTON
   ========================= */

.btn--ghost {
  background: transparent;
  color: var(--color-dark);
  border: none;
  box-shadow: none;
}

.btn--ghost:hover {
  background-color: var(--color-gray-100);
  transform: none;
  box-shadow: none;
}

/* =========================
   BUTTON SIZES
   ========================= */

.btn--xs {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: 32px;
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 36px;
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  min-height: 52px;
}

.btn--xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  min-height: 60px;
}

/* =========================
   FULL WIDTH
   ========================= */

.btn--full {
  width: 100%;
}

/* =========================
   ICON BUTTON
   ========================= */

.btn--icon {
  padding: var(--space-3);
}

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

/* =========================
   BUTTON GROUP
   ========================= */

.btn-group {
  display: flex;
  gap: var(--space-2);
}

.btn-group--vertical {
  flex-direction: column;
}

/* =========================
   ADD TO CART - extra styles
   ========================= */

.add-to-cart-btn,
.product-card__add-to-cart {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-bold);
}

.add-to-cart-btn svg {
  width: 18px;
  height: 18px;
}

/* Hide "View cart" link after add to cart */
.added_to_cart,
.woocommerce a.added_to_cart {
  display: none !important;
}

/* =========================
   NEUTRALIZE .added STATE
   Prevents WooCommerce green effect
   ========================= */

/* Keep button appearance unchanged when .added class is applied */
.add-to-cart-btn.added,
.product-card__add-to-cart.added,
.single_add_to_cart_button.added,
.woocommerce a.button.added,
.woocommerce button.button.added,
.woocommerce input.button.added,
.woocommerce #respond input#submit.added,
.woocommerce a.button.alt.added,
.woocommerce button.button.alt.added,
.woocommerce input.button.alt.added,
.added,
button.added,
a.added {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-dark) !important;
}

/* Hide the checkmark icon WooCommerce adds */
.add-to-cart-btn.added::after,
.product-card__add-to-cart.added::after,
.single_add_to_cart_button.added::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after,
.woocommerce #respond input#submit.added::after,
.woocommerce a.button.alt.added::after,
.woocommerce button.button.alt.added::after,
.woocommerce input.button.alt.added::after,
.added::after,
button.added::after,
a.added::after {
  display: none !important;
  content: none !important;
}
/**
 * Lagano Components - Forms
 *
 * Form inputs, selects, and validation styles.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   FORM GROUP
   ======================================== */

.form-group {
  margin-bottom: var(--space-4);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ========================================
   LABELS
   ======================================== */

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-error);
}

/* ========================================
   INPUT BASE
   ======================================== */

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-dark);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-brutal-sm), 0 0 0 3px var(--color-secondary-light);
}

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

/* ========================================
   INPUT SIZES
   ======================================== */

.form-input--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.form-input--lg {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-lg);
}

/* ========================================
   SELECT
   ======================================== */

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231c1c2b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

/* ========================================
   TEXTAREA
   ======================================== */

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ========================================
   CHECKBOX & RADIO
   ======================================== */

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-check__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  appearance: none;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-default);
  cursor: pointer;
  transition: var(--transition-all);
}

.form-check__input:checked {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.form-check__input:checked::after {
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  margin: 2px auto;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-check__input[type="radio"] {
  border-radius: var(--radius-full);
}

.form-check__input[type="radio"]:checked::after {
  width: 8px;
  height: 8px;
  margin: 4px auto;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  transform: none;
}

.form-check__label {
  font-size: var(--text-sm);
  color: var(--color-dark);
}

/* ========================================
   VALIDATION STATES
   ======================================== */

.form-input--error,
.form-select--error,
.form-textarea--error {
  border-color: var(--color-error);
}

.form-input--error:focus,
.form-select--error:focus,
.form-textarea--error:focus {
  border-color: var(--color-error);
  box-shadow: var(--shadow-brutal-sm), 0 0 0 3px var(--color-error-light);
}

.form-input--success {
  border-color: var(--color-success);
}

.form-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-error);
}

.form-help {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========================================
   QUANTITY INPUT
   ======================================== */

.quantity-input {
  display: inline-flex;
  align-items: center;
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-sm);
}

.quantity-input__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: none;
  cursor: pointer;
  transition: var(--transition-colors);
}

.quantity-input__btn:hover {
  background: var(--color-primary);
}

.quantity-input__field {
  width: 50px;
  height: 36px;
  padding: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: none;
  border-left: var(--border-1) solid var(--color-dark);
  border-right: var(--border-1) solid var(--color-dark);
}

.quantity-input__field::-webkit-outer-spin-button,
.quantity-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input__field[type=number] {
  -moz-appearance: textfield;
}

/* ========================================
   SEARCH INPUT
   ======================================== */

.search-input {
  position: relative;
}

.search-input__field {
  padding-left: var(--space-10);
}

.search-input__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}
/**
 * Lagano Components - Cards
 *
 * Card styles for products, content, and info boxes.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   CARD BASE
   ======================================== */

.card {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal);
}

.card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal-lg);
}

.card__image {
  position: relative;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: var(--transition-transform);
}

.card:hover .card__image img {
  transform: scale(1.02);
}

.card__body {
  padding: var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-dark);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--color-secondary);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.card__footer {
  padding: var(--space-4);
  border-top: var(--border-1) solid var(--color-border-light);
}

/* ========================================
   CARD VARIANTS
   ======================================== */

/* No hover effect */
.card--static {
  box-shadow: var(--shadow-brutal);
}

.card--static:hover {
  transform: none;
  box-shadow: var(--shadow-brutal);
}

/* Flat - no shadow */
.card--flat {
  box-shadow: none;
}

.card--flat:hover {
  box-shadow: none;
  transform: none;
}

/* Dark card */
.card--dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.card--dark .card__title {
  color: var(--color-white);
}

.card--dark .card__text {
  color: var(--color-gray-400);
}

/* Primary accent */
.card--primary {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Secondary accent */
.card--secondary {
  border-color: var(--color-secondary);
}

/* ========================================
   INFO BOX
   ======================================== */

.info-box {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutal-sm);
}

.info-box__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
}

.info-box__icon svg {
  width: 24px;
  height: 24px;
}

.info-box__content {
  flex: 1;
}

.info-box__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-1);
}

.info-box__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Variants */
.info-box--success {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.info-box--success .info-box__icon {
  background: var(--color-success);
  border-color: var(--color-success-dark);
  color: var(--color-white);
}

.info-box--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-light);
}

.info-box--warning .info-box__icon {
  background: var(--color-warning);
}

.info-box--error {
  border-color: var(--color-error);
  background: var(--color-error-light);
}

.info-box--error .info-box__icon {
  background: var(--color-error);
  border-color: var(--color-error-dark);
  color: var(--color-white);
}

/* ========================================
   FEATURE CARD
   ======================================== */

.feature-card {
  text-align: center;
  padding: var(--space-6);
}

.feature-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brutal-sm);
}

.feature-card__icon svg {
  width: 32px;
  height: 32px;
}

.feature-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.feature-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========================================
   HORIZONTAL CARD
   ======================================== */

.card--horizontal {
  display: flex;
}

.card--horizontal .card__image {
  flex-shrink: 0;
  width: 120px;
}

.card--horizontal .card__image img {
  height: 100%;
  object-fit: cover;
}

.card--horizontal .card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .card--horizontal .card__image {
    width: 200px;
  }
}
/**
 * Lagano Components - Badges
 *
 * Badges for sales, tags, and labels.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   BADGE BASE
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
}

/* ========================================
   BADGE VARIANTS
   ======================================== */

.badge--primary {
  background: var(--color-primary);
  color: var(--color-dark);
}

.badge--secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}

.badge--dark {
  background: var(--color-dark);
  color: var(--color-white);
}

.badge--success {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success-dark);
}

.badge--error {
  background: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error-dark);
}

.badge--warning {
  background: var(--color-warning);
  color: var(--color-dark);
}

.badge--outline {
  background: transparent;
  color: var(--color-dark);
}

/* ========================================
   SALE BADGE (PROMOCJA)
   ======================================== */

.sale-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-10);
  padding: var(--space-1) var(--space-3);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brutal-sm);
}

/* Percentage badge */
.sale-badge--percent {
  background: var(--color-error);
}

/* New product badge */
.badge--new {
  background: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success-dark);
}

/* Out of stock badge */
.badge--outofstock {
  background: var(--color-gray-500);
  color: var(--color-white);
  border-color: var(--color-gray-600);
}

/* ========================================
   TAG (Clickable)
   ======================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-secondary);
  background: var(--color-secondary-light);
  border: var(--border-1) solid var(--color-secondary);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-colors);
}

.tag:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* Tag group */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ========================================
   STOCK STATUS
   ======================================== */

.stock-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.stock-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.stock-status--instock {
  color: var(--color-success-dark);
}

.stock-status--instock::before {
  background: var(--color-success);
}

.stock-status--outofstock {
  color: var(--color-error);
}

.stock-status--outofstock::before {
  background: var(--color-error);
}

.stock-status--onbackorder {
  color: var(--color-warning);
}

.stock-status--onbackorder::before {
  background: var(--color-warning);
}

/* ========================================
   PRODUCT BADGES CONTAINER
   ======================================== */

.product-badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ========================================
   DISCOUNT PERCENTAGE
   ======================================== */

.discount-badge {
  padding: var(--space-1) var(--space-2);
  background: var(--color-error);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   CATEGORY BADGE
   ======================================== */

.category-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-gray-100);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-default);
  text-decoration: none;
  transition: var(--transition-colors);
}

.category-badge:hover {
  background: var(--color-primary);
  border-color: var(--color-dark);
}
/**
 * Lagano Components - Navigation
 *
 * Desktop navigation and dropdown menus.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   NAVIGATION BASE
   ======================================== */

.nav {
  display: flex;
  list-style: none;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

.nav__link:hover {
  background: var(--color-gray-100);
  color: var(--color-secondary);
}

.nav__link--active {
  background: var(--color-secondary);
  color: var(--color-white);
}

.nav__link--active:hover {
  background: var(--color-secondary-hover);
  color: var(--color-white);
}

/* ========================================
   DROPDOWN
   ======================================== */

.nav__item--has-children > .nav__link::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: var(--transition-transform);
}

.nav__item--has-children:hover > .nav__link::after {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition-all);
  z-index: var(--z-dropdown);
}

.nav__item--has-children:hover > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown .nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.nav__dropdown .nav__link:hover {
  background: var(--color-primary);
  color: var(--color-dark);
}

/* ========================================
   MEGA MENU
   ======================================== */

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: calc(100vw - var(--space-8));
  max-width: var(--max-w-6xl);
  padding: var(--space-6);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brutal-lg);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-all);
  z-index: var(--z-dropdown);
}

@media (min-width: 1024px) {
  .mega-menu {
    display: block;
  }
}

.nav__item--has-children:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.mega-menu__column-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.mega-menu__list {
  list-style: none;
}

.mega-menu__link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--transition-colors);
}

.mega-menu__link:hover {
  color: var(--color-secondary);
  padding-left: var(--space-2);
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__item::after {
  content: '/';
  color: var(--color-text-light);
}

.breadcrumb__item:last-child::after {
  display: none;
}

.breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: var(--transition-colors);
}

.breadcrumb__link:hover {
  color: var(--color-secondary);
}

.breadcrumb__current {
  color: var(--color-dark);
  font-weight: var(--font-medium);
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.pagination__link,
.pagination__current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.pagination__link {
  background: var(--color-white);
  color: var(--color-dark);
}

.pagination__link:hover {
  background: var(--color-primary);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

.pagination__current {
  background: var(--color-secondary);
  color: var(--color-white);
}

.pagination__dots {
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}

.pagination__prev,
.pagination__next {
  padding: 0 var(--space-3);
}

/* ========================================
   CATEGORY BAR MEGA MENU
   ======================================== */

.category-bar__item--has-mega {
  position: relative;
}

.category-bar__item--has-mega > .category-bar__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.category-bar__arrow {
  transition: transform 0.2s ease;
}

.category-bar__item--has-mega:hover .category-bar__arrow {
  transform: rotate(180deg);
}

/* Mega menu - moved to body by JS, same pattern as MiniCart */
.mega-menu {
  padding: 0;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brutal-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: var(--z-dropdown);
}

.mega-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu__container {
  padding: var(--space-6);
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.mega-menu__column {
  min-width: 150px;
}

.mega-menu__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-2) solid var(--color-dark);
}

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

.mega-menu__list li {
  margin: 0;
}

.mega-menu__list a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.15s ease;
}

.mega-menu__list a:hover {
  color: var(--color-secondary);
  padding-left: var(--space-2);
}

.mega-menu__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.mega-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  background: var(--color-secondary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--shadow-brutal-sm);
  transition: all 0.2s ease;
}

.mega-menu__view-all:hover {
  background: var(--color-secondary-hover);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

/* Responsive - hide arrows on mobile (mega menu is controlled by JS) */
@media (max-width: 767px) {
  .category-bar__arrow {
    display: none;
  }
}
/**
 * Lagano Components - Mobile Navigation
 *
 * Slide-in mobile navigation panel.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   MOBILE NAV PANEL
   ======================================== */

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  overflow: hidden;
}

.mobile-nav[aria-hidden="false"] {
  visibility: visible;
}

/* Overlay */
.mobile-nav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--duration-300) var(--ease-out);
}

.mobile-nav[aria-hidden="false"] .mobile-nav__overlay {
  opacity: 1;
}

/* Panel */
.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  background: var(--color-bg);
  border-left: var(--border-3) solid var(--color-dark);
  transform: translateX(100%);
  transition: transform var(--duration-300) var(--ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.mobile-nav[aria-hidden="false"] .mobile-nav__panel {
  transform: translateX(0);
}

/* ========================================
   HEADER
   ======================================== */

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--border-2) solid var(--color-dark);
  background: var(--color-secondary);
}

.mobile-nav__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-white);
}

.mobile-nav__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-white);
  cursor: pointer;
  transition: var(--transition-colors);
}

.mobile-nav__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   SEARCH
   ======================================== */

.mobile-nav__search {
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-bottom: var(--border-2) solid var(--color-border-light);
}

.mobile-nav__search-input {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-family: var(--font-primary);
}

.mobile-nav__search-input:focus {
  outline: none;
  border-color: var(--color-secondary);
}

/* ========================================
   MENU
   ======================================== */

.mobile-nav__menu {
  flex: 1;
  padding: var(--space-4);
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__list li {
  border-bottom: var(--border-1) solid var(--color-border-light);
}

.mobile-nav__list li:last-child {
  border-bottom: none;
}

.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--transition-colors);
}

.mobile-nav__list a:hover {
  color: var(--color-secondary);
  background: var(--color-gray-50);
}

/* Parent item with expand button */
.mobile-nav__list .menu-item-has-children {
  position: relative;
}

.mobile-nav__list .menu-item-has-children > a {
  padding-right: 48px;
}

/* Expand chevron button */
.mobile-nav__expand {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid var(--color-gray-200);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.mobile-nav__expand:hover {
  background: var(--color-gray-100);
  color: var(--color-secondary);
}

.mobile-nav__expand svg {
  transition: transform 0.25s ease;
}

.menu-item-has-children.is-open > .mobile-nav__expand svg {
  transform: rotate(180deg);
}

.menu-item-has-children.is-open > .mobile-nav__expand {
  color: var(--color-secondary);
}

/* Submenu */
.mobile-nav__list .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: var(--space-4);
  background: var(--color-gray-50);
  list-style: none;
  border-top: 1px solid var(--color-gray-200);
}

.mobile-nav__list li.menu-item-has-children.is-open > .sub-menu {
  max-height: 800px;
}

.mobile-nav__list .sub-menu li {
  border-bottom-color: var(--color-gray-200);
}

.mobile-nav__list .sub-menu a {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
}

.mobile-nav__list .sub-menu a:hover {
  color: var(--color-secondary);
  padding-left: var(--space-4);
}

/* ========================================
   SECTION TITLE
   ======================================== */

.mobile-nav__section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-2) var(--space-2);
  margin: 0;
}

/* ========================================
   CATEGORIES
   ======================================== */

.mobile-nav__categories {
  padding: 0 var(--space-4) var(--space-4);
}

.mobile-nav__list--categories a {
  padding: var(--space-2);
  font-size: var(--text-sm);
}

/* ========================================
   ACCOUNT
   ======================================== */

.mobile-nav__account {
  padding: var(--space-4);
  border-top: var(--border-2) solid var(--color-border-light);
  background: var(--color-bg-alt);
  margin-top: auto;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

.mobile-nav__link:hover {
  background: var(--color-gray-200);
  color: var(--color-secondary);
}

.mobile-nav__link svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

/* ========================================
   BODY LOCK
   ======================================== */

body.mobile-nav-open {
  overflow: hidden;
}

/* ========================================
   HIDE ON DESKTOP
   ======================================== */

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}
/**
 * Lagano Components - Skeleton Loading
 *
 * Placeholder skeletons for async content loading.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   SKELETON BASE
   ======================================== */

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.product-skeleton {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.product-skeleton__image {
  aspect-ratio: 1;
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

.product-skeleton__content {
  padding: var(--space-4);
}

.product-skeleton__title {
  height: 20px;
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  width: 80%;
}

.product-skeleton__price {
  height: 24px;
  width: 40%;
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 0%,
    var(--color-gray-50) 50%,
    var(--color-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
  border-radius: var(--radius-sm);
}

/* Loading container */
.products-grid__loading {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .products-grid__loading {
    grid-template-columns: repeat(4, 1fr);
  }
}
/**
 * Toast Notifications
 *
 * Subtle notification system - small toasts in top right corner.
 * Replaces WooCommerce default big inline messages.
 *
 * @package Lagano
 * @since 2.2.0
 */

/* ========================================
   TOAST CONTAINER
   ======================================== */

.toast-container {
  position: fixed;
  top: 5rem; /* Below header/cart icon */
  right: var(--space-4);
  z-index: var(--z-toast, 9999);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* ========================================
   TOAST ITEM
   ======================================== */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.toast.is-hiding {
  transform: translateX(120%);
  opacity: 0;
}

/* ========================================
   TOAST ICON
   ======================================== */

.toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast__icon svg {
  width: 12px;
  height: 12px;
  stroke: var(--color-white);
  stroke-width: 3;
}

/* ========================================
   TOAST CONTENT
   ======================================== */

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin: 0 0 2px;
  line-height: 1.3;
}

.toast__message {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Single line toast (no title) */
.toast--simple .toast__message {
  font-size: var(--text-sm);
  color: var(--color-dark);
}

/* ========================================
   TOAST CLOSE BUTTON
   ======================================== */

.toast__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast__close:hover {
  opacity: 1;
}

.toast__close svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-dark);
  stroke-width: 2;
}

/* ========================================
   TOAST VARIANTS
   ======================================== */

/* Success (green) */
.toast--success .toast__icon {
  background: var(--color-success, #22c55e);
}

.toast--success {
  border-left: 3px solid var(--color-success, #22c55e);
}

/* Error (red) */
.toast--error .toast__icon {
  background: var(--color-error, #ef4444);
}

.toast--error {
  border-left: 3px solid var(--color-error, #ef4444);
}

/* Warning (orange) */
.toast--warning .toast__icon {
  background: var(--color-warning, #f59e0b);
}

.toast--warning {
  border-left: 3px solid var(--color-warning, #f59e0b);
}

/* Info (blue) */
.toast--info .toast__icon {
  background: var(--color-info, #3b82f6);
}

.toast--info {
  border-left: 3px solid var(--color-info, #3b82f6);
}

/* ========================================
   HIDE WOOCOMMERCE DEFAULT NOTICES
   (When using toast system)
   ======================================== */

body.has-toast-notifications .woocommerce-message,
body.has-toast-notifications .woocommerce-error,
body.has-toast-notifications .woocommerce-info {
  display: none !important;
}

/* Keep notices visible in admin */
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-info a.button {
  display: none;
}

/* ========================================
   MOBILE STYLES
   ======================================== */

@media (max-width: 767px) {
  .toast-container {
    top: 4.5rem; /* Below mobile header */
    right: var(--space-3);
    left: var(--space-3);
    max-width: none;
  }

  .toast {
    padding: var(--space-3);
  }

  .toast__title {
    font-size: var(--text-xs);
  }

  .toast__message {
    font-size: 11px;
  }
}

/* ========================================
   PROGRESS BAR (auto-dismiss indicator)
   ======================================== */

.toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform-origin: left;
  animation: toast-progress linear forwards;
}

.toast--success .toast__progress {
  background: var(--color-success, #22c55e);
}

.toast--error .toast__progress {
  background: var(--color-error, #ef4444);
}

.toast--warning .toast__progress {
  background: var(--color-warning, #f59e0b);
}

.toast--info .toast__progress {
  background: var(--color-info, #3b82f6);
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
/**
 * Lagano Modules - Slider
 *
 * Styles for hero sliders and carousels (Swiper).
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   HERO SLIDER (Slider Jedrzeja)
   ======================================== */

.hero-slider {
  position: relative;
  margin-bottom: var(--space-8);
}

.hero-slider__slide {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.hero-slider__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-brutal-lg);
}

.hero-slider__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slider__content {
  position: relative;
  z-index: var(--z-10);
  padding: var(--space-6);
  max-width: 600px;
}

.hero-slider__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  text-shadow: 2px 2px 0 var(--color-dark);
}

.hero-slider__text {
  font-size: var(--text-base);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 1px 1px 0 var(--color-dark);
}

/* ========================================
   SLIDER NAVIGATION
   ======================================== */

.slider-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.slider-nav__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.slider-nav__btn:hover {
  background: var(--color-primary);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

.slider-nav__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slider-nav__btn svg {
  width: 20px;
  height: 20px;
}

/* Swiper overrides */
.swiper-button-prev,
.swiper-button-next {
  width: 44px;
  height: 44px;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutal-sm);
  transition: var(--transition-all);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--color-primary);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-dark);
}

/* ========================================
   SLIDER PAGINATION
   ======================================== */

.slider-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.slider-pagination__dot {
  width: 12px;
  height: 12px;
  background: var(--color-gray-300);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-colors);
}

.slider-pagination__dot--active {
  background: var(--color-secondary);
}

/* Swiper pagination overrides */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--color-gray-300);
  border: var(--border-2) solid var(--color-dark);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--color-secondary);
}

/* ========================================
   PRODUCT CAROUSEL
   ======================================== */

.product-carousel {
  position: relative;
  margin: var(--space-8) 0;
}

.product-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.product-carousel__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.product-carousel__nav {
  display: flex;
  gap: var(--space-2);
}

.product-carousel__wrapper {
  overflow: hidden;
}

.product-carousel__track {
  display: flex;
  gap: var(--space-4);
}

.product-carousel__slide {
  flex-shrink: 0;
  width: calc(50% - var(--space-2));
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .hero-slider__slide {
    min-height: 400px;
  }

  .hero-slider__title {
    font-size: var(--text-4xl);
  }

  .hero-slider__content {
    padding: var(--space-8);
  }

  .product-carousel__slide {
    width: calc(33.333% - var(--space-3));
  }
}

@media (min-width: 1024px) {
  .hero-slider__slide {
    min-height: 500px;
  }

  .product-carousel__slide {
    width: calc(25% - var(--space-3));
  }
}

@media (min-width: 1280px) {
  .product-carousel__slide {
    width: calc(20% - var(--space-3));
  }
}
/**
 * Lagano Modules - Brand Marquee
 *
 * Infinite scrolling brand/logo carousel.
 * Starts from container edge, overflows to the right.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   MARQUEE CONTAINER
   ======================================== */

.brand-marquee {
  padding: var(--space-8) 0;
  background: var(--color-white);
  overflow: hidden;
}

.brand-marquee__wrapper {
  overflow: hidden;
}

/* ========================================
   MARQUEE TRACK
   ======================================== */

.brand-marquee__track {
  display: flex;
  animation: marquee 20s linear infinite;
  will-change: transform;
}

.brand-marquee:hover .brand-marquee__track {
  animation-play-state: running;
}

.brand-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
  flex-shrink: 0;
}

/* ========================================
   BRAND ITEMS
   ======================================== */

.brand-marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
  text-decoration: none;
}

.brand-marquee__item:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

.brand-marquee__logo {
  height: 45px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.85;
  transition: var(--transition-all);
}

.brand-marquee__item:hover .brand-marquee__logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* ========================================
   ANIMATION
   ======================================== */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .brand-marquee {
    padding: var(--space-10) 0;
  }

  .brand-marquee__track {
    animation-duration: 30s;
  }

  .brand-marquee__logo {
    height: 55px;
    max-width: 110px;
  }

  .brand-marquee__group {
    gap: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .brand-marquee__logo {
    height: 60px;
    max-width: 120px;
  }

  .brand-marquee__group {
    gap: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track {
    animation: none;
  }

  .brand-marquee__group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
/**
 * Lagano Modules - Omnibus
 *
 * EU Omnibus directive pricing display.
 * Shows lowest price in last 30 days.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   OMNIBUS PRICE BOX
   ======================================== */

.omnibus-price {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-info-light);
  border: var(--border-1) solid var(--color-info);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-gray-700);
}

.omnibus-price__label {
  display: block;
  font-weight: var(--font-normal);
}

.omnibus-price__value {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
}

/* ========================================
   PRODUCT PAGE VARIANT
   ======================================== */

.product-omnibus {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.product-omnibus__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--space-2);
  background: var(--color-info);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--font-bold);
  vertical-align: middle;
}

.product-omnibus__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.product-omnibus__price {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
}

/* ========================================
   CARD VARIANT (Compact)
   ======================================== */

.product-card .omnibus-price {
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: 10px;
  line-height: 1.4;
}

/* ========================================
   SALE HIGHLIGHT
   ======================================== */

.omnibus-price--sale {
  background: var(--color-success-light);
  border-color: var(--color-success);
}

.omnibus-price--sale .omnibus-price__label {
  color: var(--color-success-dark);
}

/* ========================================
   TOOLTIP VARIANT
   ======================================== */

.omnibus-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}

.omnibus-tooltip__icon {
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  color: var(--color-info);
}

.omnibus-tooltip__content {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 250px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-all);
  z-index: var(--z-tooltip);
}

.omnibus-tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-dark);
}

.omnibus-tooltip:hover .omnibus-tooltip__content {
  opacity: 1;
  visibility: visible;
}

/* ========================================
   INLINE VARIANT
   ======================================== */

.omnibus-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.omnibus-inline__label {
  font-weight: var(--font-normal);
}

.omnibus-inline__price {
  font-weight: var(--font-medium);
  color: var(--color-dark);
}

/* ========================================
   NO DATA STATE
   ======================================== */

.omnibus-price--empty {
  display: none;
}
/**
 * Lagano Modules - Promo Slider
 *
 * 2x2 promotional product grid.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   PROMO SECTION
   ======================================== */

.promo-slider {
  padding: var(--space-8) 0;
}

.promo-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.promo-slider__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  position: relative;
  padding-left: var(--space-4);
}

.promo-slider__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

.promo-slider__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
}

.promo-slider__link:hover {
  color: var(--color-secondary-hover);
}

.promo-slider__link svg {
  width: 16px;
  height: 16px;
  transition: var(--transition-transform);
}

.promo-slider__link:hover svg {
  transform: translateX(4px);
}

/* ========================================
   PROMO GRID (2x2)
   ======================================== */

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

/* ========================================
   PROMO CARD
   ======================================== */

.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal);
}

.promo-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal-lg);
}

.promo-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-gray-100);
}

.promo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
  transition: var(--transition-transform);
}

.promo-card:hover .promo-card__image img {
  transform: scale(1.05);
}

/* Badges */
.promo-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-10);
}

/* Content */
.promo-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border-top: var(--border-2) solid var(--color-dark);
}

.promo-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-card__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.promo-card__title a:hover {
  color: var(--color-secondary);
}

/* Price */
.promo-card__price {
  margin-top: auto;
}

.promo-card__price-current {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.promo-card__price-old {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-left: var(--space-2);
}

/* ========================================
   COUNTDOWN TIMER
   ======================================== */

.promo-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-error);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.promo-countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promo-countdown__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

.promo-countdown__label {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  text-transform: lowercase;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .promo-grid {
    gap: var(--space-6);
  }

  .promo-card__content {
    padding: var(--space-4);
  }

  .promo-card__title {
    font-size: var(--text-base);
  }

  .promo-card__price-current {
    font-size: var(--text-xl);
  }
}

@media (min-width: 1024px) {
  .promo-slider__title {
    font-size: var(--text-3xl);
  }
}

/* ========================================
   PROMO SLIDER V2 (Banner + Carousel)
   ======================================== */

.promo-slider[data-promo-slider] {
  padding: var(--space-12) 0;
  background: var(--color-bg);
  overflow: hidden;
}

.promo-slider--alt {
  background: var(--color-bg-alt);
}

.promo-slider__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 768px) {
  .promo-slider__container {
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .promo-slider__container {
    grid-template-columns: 280px 1fr;
  }
}

/* Banner */
.promo-slider__banner {
  display: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-dark);
  height: 100%;
}

@media (min-width: 768px) {
  .promo-slider__banner {
    display: block;
  }
}

.promo-slider__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content wrapper - products above, nav below */
.promo-slider__content {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
}

/* Track wrapper - first row */
.promo-slider__track-wrapper {
  grid-row: 1;
  overflow: hidden;
  cursor: grab;
  min-height: 0;
}

.promo-slider__track-wrapper:active {
  cursor: grabbing;
}

.promo-slider__track {
  display: flex;
  gap: var(--space-4);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Item widths - calculated for 4 items */
.promo-slider__item {
  flex: 0 0 auto;
  min-width: 0;
  /* 4 items with 3 gaps between them */
  width: calc((100% - (3 * var(--space-4))) / 4);
}

/* Match hero-carousel product card styling */
.promo-slider__item .product-card {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.promo-slider__item .product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 15px 35px -10px rgba(0, 0, 0, 0.12),
    0 6px 15px -6px rgba(0, 0, 0, 0.08);
}

/* Slightly smaller image in slider cards */
.promo-slider__item .product-card__image img {
  padding: var(--space-4);
}

@media (max-width: 767px) {
  /* Mobile: native scroll-snap instead of JS transform */
  .promo-slider__track-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    cursor: default;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .promo-slider__track-wrapper::-webkit-scrollbar {
    display: none;
  }

  .promo-slider__track-wrapper:active {
    cursor: default;
  }

  .promo-slider__track {
    transform: none !important;
    transition: none;
  }

  .promo-slider__item {
    width: 75%;
    min-width: 200px;
    max-width: 280px;
    scroll-snap-align: start;
  }

  .promo-slider__nav {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: show 3 products with 2 gaps */
  .promo-slider__item {
    width: calc((100% - (2 * var(--space-4))) / 3);
  }
}

@media (min-width: 1024px) {
  /* Desktop: show 4 products with 3 gaps */
  .promo-slider__item {
    width: calc((100% - (3 * var(--space-4))) / 4);
  }
}

/* Navigation container - below products */
.promo-slider__nav {
  grid-row: 2;

  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);

  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);

  z-index: 10;

  /* Slightly lift up visually without affecting layout */
  transform: translateY(-6px);
}

/* Arrows - hidden on mobile, visible on tablet+ */
.promo-slider__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.promo-slider__arrow:hover {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(250, 220, 0, 0.3);
}

.promo-slider__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  .promo-slider__arrow {
    display: flex;
  }
}

/* Dots - like hero-split */
.promo-slider__dots {
  display: flex;
  gap: var(--space-2);
}

.promo-slider__dot {
  width: 10px;
  height: 10px;
  background: var(--color-gray-300);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
}

.promo-slider__dot--active {
  background: var(--color-primary);
  width: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(250, 220, 0, 0.4);
}

.promo-slider__dot:hover:not(.promo-slider__dot--active) {
  background: var(--color-gray-400);
}

/* ========================================
   WORLD SLIDER (Title + 2x2 Grid)
   ======================================== */

.world-slider {
  padding: var(--space-12) 0;
  background: var(--color-bg);
}

.world-slider__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  text-align: center;
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .world-slider__title {
    font-size: var(--text-3xl);
  }
}

.world-slider__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.world-slider__track-wrapper {
  flex: 1;
  overflow: hidden;
}

.world-slider__track {
  position: relative;
}

/* World slider - 2x2 grid with horizontal cards */
.world-slider__page {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .world-slider__page {
    grid-template-columns: repeat(2, 1fr);
  }
}

.world-slider__page--active {
  display: grid;
}

@media (max-width: 767px) {
  /* Mobile: native horizontal scroll instead of page toggle */
  .world-slider__track-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .world-slider__track-wrapper::-webkit-scrollbar {
    display: none;
  }

  .world-slider__track {
    display: flex;
    gap: var(--space-4);
  }

  /* Flatten pages - items become direct flex children of track */
  .world-slider__page,
  .world-slider__page--active {
    display: contents;
  }

  .world-slider__item {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .world-slider__dots {
    display: none !important;
  }
}

/* World slider item */
.world-slider__item {
  min-width: 0;
}

/* Horizontal product card layout for world slider */
.world-slider__item .product-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
  height: 100%;
  align-items: center;
}

@media (min-width: 640px) {
  .world-slider__item .product-card {
    grid-template-columns: 160px 1fr;
  }
}

@media (min-width: 1024px) {
  .world-slider__item .product-card {
    grid-template-columns: 180px 1fr;
  }
}

.world-slider__item .product-card__image {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-50);
}

.world-slider__item .product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
}

.world-slider__item .product-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  border-top: none;
}

.world-slider__item .product-card__title {
  font-size: var(--text-sm);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .world-slider__item .product-card__title {
    font-size: var(--text-base);
  }
}

.world-slider__item .product-card__footer {
  margin-top: 0;
  padding-top: 0;
}

.world-slider__item .product-card__price {
  margin-bottom: var(--space-2);
}

.world-slider__item .product-card__omnibus {
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}

.world-slider__item .product-card__add-to-cart {
  align-self: flex-start;
  width: auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

/* Arrows - same style as promo-slider */
.world-slider__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .world-slider__arrow {
    display: flex;
  }
}

.world-slider__arrow:hover {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(250, 220, 0, 0.3);
}

.world-slider__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dots - same style as promo-slider */
.world-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.world-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-gray-300);
  cursor: pointer;
  transition: all 0.3s ease;
}

.world-slider__dot:hover:not(.world-slider__dot--active) {
  background: var(--color-gray-400);
}

.world-slider__dot--active {
  background: var(--color-primary);
  width: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(250, 220, 0, 0.4);
}

/* ========================================
   MOBILE OVERRIDES (must be last to win cascade)
   ======================================== */
@media (max-width: 767px) {
  .promo-slider__nav {
    display: none !important;
  }

  .world-slider__dots {
    display: none !important;
  }

  .world-slider__item .product-card {
    grid-template-columns: 100px 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .world-slider__item .product-card__add-to-cart {
    font-size: 11px;
    padding: var(--space-2) var(--space-3);
  }
}
/**
 * Lagano - Hero Section
 *
 * Homepage hero with gradient background and floating products.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
  background: linear-gradient(135deg, #f8f5ff 0%, #ede9fe 50%, #ddd6fe 100%);
  padding: var(--space-10) 0 var(--space-16);
  overflow: hidden;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70%;
  height: 150%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* ========================================
   HERO CONTENT
   ======================================== */

.hero__content {
  text-align: center;
  z-index: 1;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.hero__title span {
  color: var(--color-secondary);
  display: inline-block;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 500px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-relaxed);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* Hero button styles moved to components/buttons.css */

/* ========================================
   HERO IMAGE GRID
   ======================================== */

.hero__image {
  display: none;
}

.hero__image-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
}

.hero__product {
  position: relative;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal);
  transition: var(--transition-all);
  aspect-ratio: 1;
}

.hero__product:hover {
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-brutal-lg);
}

.hero__product a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
}

/* Floating animation */
.hero__product--1 {
  animation: float-1 6s ease-in-out infinite;
}

.hero__product--2 {
  animation: float-2 7s ease-in-out infinite;
}

.hero__product--3 {
  animation: float-3 5s ease-in-out infinite;
}

@keyframes float-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ========================================
   CATEGORY PILLS
   ======================================== */

.category-pills {
  padding: var(--space-6) 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}

.category-pills__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-radius: var(--radius-full);
  border: var(--border-2) solid var(--color-dark);
  box-shadow: 3px 3px 0 var(--color-dark);
  transition: var(--transition-all);
  background: var(--color-primary);
  color: var(--color-dark);
}

.category-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--color-dark);
  background: var(--color-secondary);
  color: var(--color-white);
}

.category-pill:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--color-dark);
}

/* ========================================
   USP SECTION
   ======================================== */

.section--usp {
  background: var(--color-gray-50);
  padding: var(--space-12) 0;
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.usp-card {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: var(--border-2) solid var(--color-dark);
  box-shadow: var(--shadow-brutal-sm);
  transition: var(--transition-all);
}

.usp-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

.usp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-3);
}

.usp-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.usp-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ========================================
   SECTIONS
   ======================================== */

.section {
  padding: var(--space-10) 0;
}

.section--featured {
  background: var(--color-white);
}

.section--latest {
  background: var(--color-gray-50);
}

.section--sale {
  background: var(--color-bg-alt);
}

/* Section header - used for Nowości, Promocje, etc. */
.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.section__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  position: relative;
  padding-left: var(--space-4);
  margin: 0;
}

.section__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

.section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-colors);
}

.section__link:hover {
  color: var(--color-secondary-hover);
}

.section__link svg {
  width: 16px;
  height: 16px;
  transition: var(--transition-transform);
}

.section__link:hover svg {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .section__title {
    font-size: var(--text-3xl);
  }
}

/* ========================================
   RESPONSIVE - Tablet
   ======================================== */

@media (min-width: 768px) {
  .hero {
    padding: var(--space-12) 0 var(--space-20);
  }

  .hero__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .hero__content {
    text-align: left;
  }

  .hero__subtitle {
    margin-left: 0;
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .hero__image {
    display: block;
  }

  .usp-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .usp-card {
    padding: var(--space-8);
  }

  .section {
    padding: var(--space-12) 0;
  }
}

/* ========================================
   RESPONSIVE - Desktop
   ======================================== */

@media (min-width: 1024px) {
  .hero__title {
    font-size: 3.5rem;
  }

  .category-pill {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }

  .section {
    padding: var(--space-16) 0;
  }
}

/* ========================================
   HERO SPLIT - Section 1: Text + Promotional Image
   ======================================== */

/* Remove padding gap on homepage */
.site-content:has(.hero-split:first-child) {
  padding-top: 0;
}

.hero-split {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 50%, #a78bfa 100%);
  padding: var(--space-8) 0;
  overflow: hidden;
  position: relative;
}

.hero-split::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.hero-split::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 60%;
  background: radial-gradient(ellipse at 20% 80%, rgba(250, 220, 0, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-split__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-split__content {
  z-index: 2;
  text-align: center;
}

.hero-split__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, #f0d500 100%);
  color: var(--color-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 15px rgba(250, 220, 0, 0.4);
}

.hero-split__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.hero-split__title span {
  color: var(--color-primary);
  display: block;
}

.hero-split__desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 450px;
}

.hero-split__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Promotional Image */
.hero-split__image {
  position: relative;
  z-index: 1;
}

.hero-split__image-wrapper {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 10px 20px -8px rgba(0, 0, 0, 0.15);
}

.hero-split__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.hero-split__image-wrapper:hover img {
  transform: scale(1.02);
}

/* Navigation for slider */
.hero-split__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hero-split__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: var(--color-dark);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-split__arrow:hover {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(250, 220, 0, 0.3);
}

.hero-split__dots {
  display: flex;
  gap: var(--space-2);
}

.hero-split__dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-split__dot--active {
  background: var(--color-primary);
  width: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(250, 220, 0, 0.4);
}

.hero-split__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
  .hero-split {
    padding: var(--space-12) 0;
  }

  .hero-split__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

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

  .hero-split__actions {
    justify-content: flex-start;
  }

  .hero-split__arrow {
    display: flex;
  }

  .hero-split__nav {
    justify-content: flex-start;
    margin-top: var(--space-8);
  }

  .hero-split__title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
  }

  .hero-split__desc {
    font-size: var(--text-lg);
    margin-left: 0;
  }
}

@media (min-width: 1024px) {
  .hero-split {
    padding: var(--space-16) 0;
  }

  .hero-split__title {
    font-size: 3.5rem;
  }
}

/* ========================================
   HERO CAROUSEL - Section 2: Text + Product Carousel
   ======================================== */

.hero-carousel {
  background: linear-gradient(135deg, #ffffff 0%, #fdfcfa 25%, #f9f7f5 50%, #f5f3f1 75%, #faf9f8 100%);
  padding: var(--space-10) 0;
  overflow: hidden;
  position: relative;
}

.hero-carousel::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle at 70% 50%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.hero-carousel::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 10%;
  width: 40%;
  height: 80%;
  background: radial-gradient(circle, rgba(250, 220, 0, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-carousel__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.hero-carousel__content {
  z-index: 2;
  text-align: center;
}

.hero-carousel__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 100%);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.hero-carousel__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.hero-carousel__title span {
  color: var(--color-secondary);
  display: block;
}

.hero-carousel__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 400px;
}

.hero-carousel__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Product carousel area */
.hero-carousel__products {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-width: 0;
}

.hero-carousel__slider {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-4) 0;
  cursor: grab;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.hero-carousel__slider:active {
  cursor: grabbing;
}

.hero-carousel__slider::-webkit-scrollbar {
  display: none;
}

.hero-carousel__track {
  display: flex;
  gap: var(--space-4);
}

/* Mobile: show 1.5 products to hint scrolling */
.hero-carousel__item {
  flex: 0 0 75%;
  min-width: 200px;
  max-width: 280px;
  scroll-snap-align: start;
}

/* Slightly smaller image in hero carousel cards */
.hero-carousel__item .product-card__image img {
  padding: var(--space-4);
}

/* Compact product card for hero carousel */
.hero-carousel__item .product-card {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.hero-carousel__item .product-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 15px 35px -10px rgba(0, 0, 0, 0.12),
    0 6px 15px -6px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .hero-carousel {
    padding: var(--space-14) 0;
  }

  .hero-carousel__container {
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-10);
  }

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

  .hero-carousel__actions {
    justify-content: flex-start;
  }

  .hero-carousel__title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
  }

  .hero-carousel__desc {
    font-size: var(--text-lg);
    margin-left: 0;
  }

  /* Tablet: show 2 products */
  .hero-carousel__item {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .hero-carousel {
    padding: var(--space-16) 0;
  }

  .hero-carousel__title {
    font-size: 3rem;
  }

  /* Desktop: show 3 products */
  .hero-carousel__item {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    max-width: none;
  }
}

/* ========================================
   HERO SLIDER - Legacy (With Background Images)
   ======================================== */

.hero-slider {
  position: relative;
  min-height: 450px;
  overflow: hidden;
}

.hero-slider__container {
  position: relative;
}

.hero-slider__slides {
  position: relative;
}

.hero-slider__slide {
  display: none;
  position: relative;
  min-height: 450px;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.hero-slider__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  z-index: 1;
}

.hero-slider__slide--active {
  display: flex;
  align-items: center;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-slider__content {
  position: relative;
  z-index: 2;
  padding: var(--space-12) 0;
}

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

.hero-slider__badge {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.hero-slider__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-slider__title span {
  color: var(--color-primary);
}

.hero-slider__desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 400px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

.hero-slider__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Navigation arrows - positioned above dots (hidden on mobile) */
.hero-slider__nav {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: var(--space-3);
  z-index: 10;
}

.hero-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-slider__arrow:hover {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Dots - below arrows */
.hero-slider__dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
  z-index: 10;
}

.hero-slider__dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-all);
}

.hero-slider__dot--active {
  background: var(--color-primary);
  width: 30px;
  border-radius: 5px;
}

.hero-slider__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
  .hero-slider,
  .hero-slider__slide {
    min-height: 550px;
  }

  .hero-slider__content {
    padding: var(--space-16) 0;
  }

  .hero-slider__title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
  }

  .hero-slider__desc {
    font-size: var(--text-lg);
  }

  .hero-slider__nav {
    display: flex;
    bottom: 100px;
  }

  .hero-slider__dots {
    bottom: 40px;
  }
}

/* ========================================
   CATEGORY SHOWCASE - Cards with Products
   Layout: Big image LEFT | Category name + link RIGHT
   ======================================== */

.category-showcase {
  padding: var(--space-12) 0;
  background: linear-gradient(135deg, #ffffff 0%, #fdfcfa 25%, #f9f7f5 50%, #f5f3f1 75%, #faf9f8 100%);
}

.category-showcase__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.category-showcase__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.category-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Card: horizontal layout - image left, info right */
.category-showcase__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px -2px rgba(0, 0, 0, 0.08),
    0 12px 24px -4px rgba(0, 0, 0, 0.05);
  min-height: 200px;
}

.category-showcase__card:hover {
  transform: translateY(-6px);
  border-color: rgba(124, 58, 237, 0.15);
  box-shadow:
    0 4px 8px rgba(124, 58, 237, 0.08),
    0 16px 32px -8px rgba(124, 58, 237, 0.2),
    0 24px 48px -12px rgba(0, 0, 0, 0.12);
}

/* Product image - LEFT side, bigger */
.category-showcase__product {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: linear-gradient(145deg, #fafafa 0%, #f5f3f1 60%, #ede9fe 100%);
  order: 1;
}

.category-showcase__product-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.category-showcase__card:hover .category-showcase__product-img {
  transform: scale(1.08);
}

/* Hide product name and price - only show image */
.category-showcase__product-info {
  display: none;
}

/* Info section - RIGHT side with purple background */
.category-showcase__info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 50%, #7c3aed 100%);
  order: 2;
  overflow: hidden;
}

/* Decorative shapes on purple section */
.category-showcase__info::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.category-showcase__info::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.category-showcase__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  margin: 0 0 var(--space-3);
}

.category-showcase__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.category-showcase__link svg {
  transition: transform 0.3s ease;
}

.category-showcase__card:hover .category-showcase__link svg {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .category-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .category-showcase__title {
    font-size: var(--text-3xl);
  }

  .category-showcase__product-img {
    max-width: 160px;
  }

  .category-showcase__name {
    font-size: var(--text-lg);
  }
}

@media (min-width: 1024px) {
  .category-showcase {
    padding: var(--space-16) 0;
  }

  .category-showcase__card {
    min-height: 220px;
  }

  .category-showcase__product-img {
    max-width: 180px;
  }

  .category-showcase__name {
    font-size: var(--text-xl);
  }
}

/* ========================================
   PROMO BANNER
   ======================================== */

.promo-banner {
  padding: var(--space-10) 0;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 50%, #a78bfa 100%);
}

.promo-banner__content {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-2xl);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.promo-banner__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.promo-banner__desc {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .promo-banner__title {
    font-size: var(--text-3xl);
  }
}

/* Cream variant - Pearl/Steel gradient */
.promo-banner--cream {
  background: linear-gradient(135deg, #ffffff 0%, #fdfcfa 25%, #f9f7f5 50%, #f5f3f1 75%, #faf9f8 100%);
}

.promo-banner--cream .promo-banner__content {
  background: var(--color-white);
  border: 2px solid var(--color-secondary);
  box-shadow:
    0 10px 40px rgba(124, 58, 237, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.05);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.promo-banner--cream .promo-banner__title {
  color: var(--color-dark);
  text-shadow: none;
}

.promo-banner--cream .promo-banner__desc {
  color: var(--color-text-muted);
}

/* ========================================
   NEWSLETTER SECTION
   ======================================== */

.newsletter-section {
  padding: var(--space-12) 0;
  background: linear-gradient(135deg, #f8f5ff 0%, #ede9fe 100%);
}

.newsletter-section__content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.newsletter-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.newsletter-section__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.newsletter-section__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.newsletter-section__form input[type="email"] {
  padding: var(--space-4);
  font-size: var(--text-base);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  font-family: var(--font-primary);
}

.newsletter-section__form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-secondary);
}

@media (min-width: 640px) {
  .newsletter-section__form {
    flex-direction: row;
  }

  .newsletter-section__form input[type="email"] {
    flex: 1;
  }
}

/* ========================================
   PRODUCTS SLIDER
   ======================================== */

.products-slider {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.products-slider::-webkit-scrollbar {
  display: none;
}

.products-slider__track {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
}

.products-slider__item {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .products-slider__item {
    flex: 0 0 300px;
  }
}

/* ========================================
   OMNIBUS PRICE
   ======================================== */

.product-card__omnibus {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
/**
 * Lagano Theme - SEO Content Section
 *
 * Styled content section for SEO text on homepage.
 *
 * @package Lagano
 * @since 2.3.0
 */

/* ========================================
   SEO CONTENT SECTION
   ======================================== */

.seo-content {
  padding: var(--space-12) 0;
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
}

.seo-content__wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.seo-content__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-8);
  text-align: center;
}

/* Two Column Layout */
.seo-content__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .seo-content__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.seo-content__column h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
  margin-top: var(--space-5);
}

.seo-content__column h3:first-child {
  margin-top: 0;
}

.seo-content__column p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

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

.seo-content__column strong {
  color: var(--color-text);
  font-weight: var(--font-medium);
}

/* Footer Section */
.seo-content__footer {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}

.seo-content__footer h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  text-align: center;
}

/* Features List */
.seo-content__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .seo-content__features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.seo-content__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
}

.seo-content__features li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

.seo-content__features li strong {
  color: var(--color-dark);
  font-weight: var(--font-medium);
}
/**
 * Lagano WooCommerce - General
 *
 * Base WooCommerce overrides and utilities.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   WOOCOMMERCE RESET
   ======================================== */

.woocommerce,
.woocommerce-page {
  /* Remove WooCommerce defaults */
}

/* Hide default WooCommerce messages styling, use our own */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutal-sm);
  list-style: none;
}

.woocommerce-message {
  background: var(--color-success-light);
  border-color: var(--color-success);
}

.woocommerce-info {
  background: var(--color-info-light);
  border-color: var(--color-info);
}

.woocommerce-error {
  background: var(--color-error-light);
  border-color: var(--color-error);
}

.woocommerce-error li {
  color: var(--color-error-dark);
}

/* ========================================
   PRICE DISPLAY
   ======================================== */

.woocommerce .price,
.price {
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.woocommerce .price del,
.price del {
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  text-decoration: line-through;
  opacity: 0.7;
}

.woocommerce .price ins,
.price ins {
  text-decoration: none;
  color: var(--color-dark);
}

/* Sale price styling */
.woocommerce .price del + ins {
  margin-left: var(--space-2);
}

/* ========================================
   STAR RATINGS
   ======================================== */

.star-rating {
  display: inline-flex;
  font-size: 14px;
  color: var(--color-primary);
  letter-spacing: 2px;
}

.star-rating::before {
  content: '★★★★★';
  color: var(--color-gray-300);
}

.star-rating span {
  overflow: hidden;
  position: absolute;
}

.star-rating span::before {
  content: '★★★★★';
  color: var(--color-primary);
}

/* ========================================
   QUANTITY SELECTOR
   ======================================== */

.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-sm);
}

.woocommerce .quantity .qty {
  width: 50px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: none;
  border-left: var(--border-1) solid var(--color-dark);
  border-right: var(--border-1) solid var(--color-dark);
  -moz-appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ========================================
   BUTTONS - Base styles in buttons.css
   Only additional WooCommerce-specific overrides here
   ======================================== */

/* WooCommerce button styles are defined in components/buttons.css */

/* ========================================
   TABS
   ======================================== */

.woocommerce-tabs {
  margin-top: var(--space-8);
}

.woocommerce-tabs .tabs {
  display: flex;
  list-style: none;
  border-bottom: var(--border-2) solid var(--color-dark);
  margin-bottom: var(--space-6);
}

.woocommerce-tabs .tabs li {
  margin-bottom: -2px;
}

.woocommerce-tabs .tabs li a {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  text-decoration: none;
  border: var(--border-2) solid transparent;
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: var(--transition-colors);
}

.woocommerce-tabs .tabs li a:hover {
  background: var(--color-gray-100);
}

.woocommerce-tabs .tabs li.active a {
  background: var(--color-white);
  border-color: var(--color-dark);
  color: var(--color-secondary);
}

.woocommerce-tabs .panel {
  padding: var(--space-6);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ========================================
   BREADCRUMB
   ======================================== */

.woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.woocommerce-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--color-secondary);
}

/* ========================================
   SALE FLASH
   ======================================== */

.woocommerce span.onsale {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-10);
  padding: var(--space-1) var(--space-3);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   NOTICES
   ======================================== */

.woocommerce-notices-wrapper {
  margin-bottom: var(--space-6);
}

/* ========================================
   SHOP TOOLBAR
   Layout defined in header.css (grid mobile / flex desktop).
   Only cosmetic overrides here.
   ======================================== */

.shop-toolbar .woocommerce-ordering select,
.shop-toolbar__sort select {
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: var(--color-white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

/* ========================================
   PAGE HEADER
   ======================================== */

.page-header {
  margin-bottom: var(--space-4);
  text-align: left;
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 2px solid var(--color-secondary);
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  color: var(--color-dark);
  line-height: 1.2;
}

.page-header__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
  margin: 0;
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-header__brand-logo {
  max-width: 120px;
  margin: 0 auto var(--space-4);
  padding: var(--space-3);
  background: var(--color-white);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-header__brand-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.page-header--brand .page-header__desc {
  max-width: none;
  margin: 0;
}

/* Brand logo: hide on mobile */
.page-header__brand-logo {
  display: none;
}

@media (min-width: 768px) {
  .page-header {
    text-align: left;
    padding: var(--space-6) 0;
    margin-bottom: var(--space-6);
    border-bottom: none;
  }

  .page-header:not(.page-header--brand) {
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-left: 4px solid var(--color-secondary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  .page-header__title {
    font-size: var(--text-3xl);
  }

  .page-header__desc {
    font-size: var(--text-base);
    max-width: 700px;
    margin: 0;
    -webkit-line-clamp: unset;
    display: block;
  }

  .page-header--brand {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    text-align: left;
    padding: var(--space-6);
  }

  .page-header__brand-logo {
    display: block;
    flex-shrink: 0;
    margin: 0;
    max-width: 140px;
  }

  .page-header__brand-info {
    flex: 1;
    min-width: 0;
  }

  .page-header--brand .page-header__title {
    margin-bottom: var(--space-2);
  }

  .page-header--brand .page-header__desc {
    line-height: var(--leading-relaxed);
  }
}

/* Shop toolbar count — cosmetic only, layout in header.css */

/* ========================================
   PAGINATION
   ======================================== */

.pagination {
  margin-top: var(--space-8);
  text-align: center;
}

.pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.pagination li {
  margin: 0;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-all);
}

.pagination a:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brutal-sm);
}

.pagination .current {
  background: var(--color-secondary);
  color: var(--color-white);
}

.pagination .prev,
.pagination .next {
  padding: var(--space-2) var(--space-4);
}

/* ========================================
   NO PRODUCTS
   ======================================== */

.no-products {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
}

.no-products p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
  .woocommerce-tabs .tabs {
    flex-direction: column;
    border-bottom: none;
  }

  .woocommerce-tabs .tabs li {
    margin-bottom: 0;
  }

  .woocommerce-tabs .tabs li a {
    border: var(--border-2) solid var(--color-dark);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
  }

  .woocommerce-tabs .tabs li.active a {
    background: var(--color-secondary);
    color: var(--color-white);
  }

  .woocommerce-tabs .panel {
    border-radius: var(--radius-lg);
    border-top: var(--border-2) solid var(--color-dark);
  }
}
/**
 * Lagano WooCommerce - Product Card
 *
 * Product card styles for archive/shop pages.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   PRODUCT CARD - Modern with depth
   ======================================== */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.07),
    0 2px 4px -1px rgba(0, 0, 0, 0.04);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 12px 24px -8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   PRODUCT IMAGE
   ======================================== */

.product-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-gray-50);
}

.product-card__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  transition: var(--transition-transform);
}

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

/* Wishlist button */
.product-card__wishlist {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-10);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-all);
  opacity: 0;
}

.product-card:hover .product-card__wishlist {
  opacity: 1;
}

.product-card__wishlist:hover {
  background: var(--color-error);
  color: var(--color-white);
}

.product-card__wishlist svg {
  width: 18px;
  height: 18px;
}

/* ========================================
   BADGES
   ======================================== */

.product-card__badges {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.product-card__badge {
  padding: var(--space-1) var(--space-3);
  font-size: 10px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.product-card__badge--sale {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 100%);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.product-card__badge--new {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* ========================================
   PRODUCT CONTENT
   ======================================== */

.product-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
}

/* Category */
.product-card__category {
  font-size: var(--text-xs);
  color: var(--color-secondary);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-1);
}

.product-card__category a {
  color: inherit;
  text-decoration: none;
}

.product-card__category a:hover {
  text-decoration: none;
  color: var(--color-secondary-hover);
}

/* Title */
.product-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.product-card__title a:hover {
  color: var(--color-secondary);
}

/* Author (for books) */
.product-card__author {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Rating */
.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.product-card__stars {
  font-size: 12px;
  color: var(--color-primary);
  letter-spacing: 1px;
}

.product-card__rating-count {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ========================================
   PRICE & ACTION
   ======================================== */

.product-card__footer {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.product-card__price-current {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.product-card__price-old {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Add to cart button - inherits base from buttons.css */
.product-card__add-to-cart {
  margin-top: auto;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* ========================================
   QUANTITY BUTTONS - MATCH CART STYLE
   ======================================== */

.product-card__quantity,
.product-card .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

/* Quantity buttons */
.product-card__quantity .qty-btn,
.product-card .quantity .qty-btn {
  width: 32px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: none;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-all);
}

.product-card__quantity .qty-btn--minus,
.product-card .quantity .qty-btn--minus {
  border-right: var(--border-1) solid var(--color-dark);
}

.product-card__quantity .qty-btn--plus,
.product-card .quantity .qty-btn--plus {
  border-left: var(--border-1) solid var(--color-dark);
}

.product-card__quantity .qty-btn:hover,
.product-card .quantity .qty-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.product-card__quantity input[type="number"],
.product-card .quantity input[type="number"],
.product-card__quantity .qty,
.product-card .quantity .qty {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 36px;
  padding: 0 !important;
  border: none !important;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  -moz-appearance: textfield;
  background: transparent;
  color: var(--color-dark);
}

.product-card__quantity input::-webkit-outer-spin-button,
.product-card__quantity input::-webkit-inner-spin-button,
.product-card .quantity input::-webkit-outer-spin-button,
.product-card .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Omnibus price - directly under price */
.product-card__omnibus {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Out of stock */
.product-card--outofstock .product-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
}

.product-card--outofstock .product-card__add-to-cart {
  background: var(--color-gray-300);
  cursor: not-allowed;
}

/* ========================================
   QUICK VIEW (Optional)
   ======================================== */

.product-card__quick-view {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-2) var(--space-4);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: var(--transition-all);
  cursor: pointer;
}

.product-card:hover .product-card__quick-view {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.product-card__quick-view:hover {
  background: var(--color-secondary);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .product-card__content {
    padding: var(--space-4);
  }

  .product-card__title {
    font-size: var(--text-base);
  }

  .product-card__price-current {
    font-size: var(--text-xl);
  }

  .product-card__add-to-cart {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}

/* ========================================
   WOOCOMMERCE DEFAULT OVERRIDES
   ======================================== */

.woocommerce ul.products li.product {
  margin: 0;
  padding: 0;
  width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: 0;
  margin: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--color-dark);
  font-size: var(--text-lg);
}

.woocommerce ul.products li.product .button {
  margin-top: var(--space-2);
}

/* ========================================
   HIDE "VIEW CART" LINK AFTER ADD TO CART
   ======================================== */

.added_to_cart,
.woocommerce a.added_to_cart {
  display: none !important;
}

/* ========================================
   NEUTRALIZE .added STATE
   Prevents WooCommerce green effect
   ======================================== */

.product-card__add-to-cart.added,
.add-to-cart-btn.added {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-dark) !important;
}

.product-card__add-to-cart.added::after,
.add-to-cart-btn.added::after {
  display: none !important;
  content: none !important;
}
/**
 * Lagano WooCommerce - Single Product
 *
 * Product detail page styles.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   PRODUCT LAYOUT
   ======================================== */

.single-product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ========================================
   PRODUCT GALLERY
   ======================================== */

.product-gallery {
  position: relative;
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-white);
  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-lg);
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
}

.product-gallery__thumbnails {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.product-gallery__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.product-gallery__thumb:hover,
.product-gallery__thumb--active {
  border-color: var(--color-secondary);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-1);
}

/* Sale badge */
.product-gallery .sale-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}

/* ========================================
   PRODUCT INFO
   ======================================== */

.product-info {
  display: flex;
  flex-direction: column;
}

/* Breadcrumb */
.product-info__breadcrumb {
  margin-bottom: var(--space-4);
}

/* Category */
.product-info__category {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.product-info__category a {
  color: inherit;
  text-decoration: none;
}

/* Title */
.product-info__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

/* Author (for books) */
.product-info__author {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.product-info__author a {
  color: var(--color-secondary);
  text-decoration: none;
}

.product-info__author a:hover {
  text-decoration: none;
  color: var(--color-secondary-hover);
}

/* Rating */
.product-info__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.product-info__stars {
  font-size: 18px;
  color: var(--color-primary);
  letter-spacing: 2px;
}

.product-info__rating-link {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-decoration: none;
}

.product-info__rating-link:hover {
  text-decoration: none;
  color: var(--color-secondary-hover);
}

/* ========================================
   PRICE BOX
   ======================================== */

.product-price-box {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-brutal-sm);
}

.product-price-box__current {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.product-price-box__old {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-left: var(--space-3);
}

.product-price-box__savings {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-success-light);
  color: var(--color-success-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
}

/* ========================================
   ADD TO CART FORM
   ======================================== */

.product-add-to-cart {
  margin-bottom: var(--space-6);
}

.product-add-to-cart__quantity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.product-add-to-cart__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
}

.product-add-to-cart__button {
  width: auto;
  min-width: 150px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.product-add-to-cart__button:hover {
  background: var(--color-primary-hover);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal-lg);
}

.product-add-to-cart__button:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-none);
}

/* ========================================
   STOCK STATUS
   ======================================== */

.product-stock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.product-stock__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

.product-stock--instock .product-stock__dot {
  background: var(--color-success);
}

.product-stock--instock {
  color: var(--color-success-dark);
}

.product-stock--outofstock .product-stock__dot {
  background: var(--color-error);
}

.product-stock--outofstock {
  color: var(--color-error);
}

/* ========================================
   PRODUCT META
   ======================================== */

.product-meta {
  padding-top: var(--space-4);
  border-top: var(--border-1) solid var(--color-border-light);
}

.product-meta__item {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.product-meta__label {
  color: var(--color-text-muted);
}

.product-meta__value {
  color: var(--color-dark);
  font-weight: var(--font-medium);
}

.product-meta__value a {
  color: var(--color-secondary);
  text-decoration: none;
}

.product-meta__value a:hover {
  text-decoration: none;
  color: var(--color-secondary-hover);
}

/* ========================================
   PRODUCT FEATURES
   ======================================== */

.product-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.product-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutal-sm);
}

.product-feature__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.product-feature__icon svg {
  width: 20px;
  height: 20px;
}

.product-feature__text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .single-product-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .product-info__title {
    font-size: var(--text-3xl);
  }

  .product-price-box__current {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  .single-product-layout {
    grid-template-columns: 1.2fr 1fr;
  }

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

/* ========================================
   PRODUCT-SINGLE (New Template)
   ======================================== */

.product-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .product-single {
    grid-template-columns: 420px 1fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .product-single {
    grid-template-columns: 500px 1fr;
    gap: var(--space-10);
  }
}

@media (min-width: 1200px) {
  .product-single {
    grid-template-columns: 550px 1fr;
    gap: var(--space-12);
  }
}

/* Gallery */
.product-single__gallery {
  position: relative;
}

.product-single__main-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.product-single__main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
}

.product-single__main-image .product-card__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.product-single__thumbnails {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

.product-single__thumbnails::-webkit-scrollbar {
  display: none;
}

.product-single__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 4px;
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-all);
}

.product-single__thumb:hover,
.product-single__thumb.active {
  border-color: var(--color-secondary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.product-single__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .product-single__thumb {
    width: 64px;
    height: 64px;
  }
}

/* Info Section */
.product-single__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: break-word;
}

.product-single__category {
  margin-bottom: var(--space-2);
}

.product-single__category a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  margin-right: var(--space-2);
  margin-bottom: var(--space-1);
}

.product-single__category a:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.product-single__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .product-single__title {
    font-size: var(--text-3xl);
  }
}

.product-single__sku {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Price */
.product-single__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.product-single__price-current {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.product-single__price-old {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Stock */
.product-single__stock {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.product-single__stock--instock {
  color: var(--color-success-dark);
}

.product-single__stock--instock svg {
  color: var(--color-success);
}

.product-single__stock--outofstock {
  color: var(--color-error);
}

.product-single__stock--outofstock svg {
  color: var(--color-error);
}

/* Excerpt */
.product-single__excerpt {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.product-single__excerpt p {
  margin-bottom: var(--space-2);
}

/* Add to Cart Form */
.product-single__add-to-cart {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Modern Quantity Selector - Pill Style (matches cart) */
.product-single__quantity {
  display: inline-flex;
  align-items: stretch;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-sm);
}

.quantity-btn {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: none;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-all);
}

.quantity-btn--minus {
  border-right: var(--border-1) solid var(--color-dark);
}

.quantity-btn--plus {
  border-left: var(--border-1) solid var(--color-dark);
}

.quantity-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.quantity-input {
  width: 50px;
  padding: 0;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  border: none;
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-dark);
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
}

.quantity-input:focus {
  outline: none;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* WooCommerce default quantity override */
.quantity.quantity--with-btns {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-sm);
}

.quantity__btn {
  width: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: none;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-all);
}

.quantity__btn--minus {
  border-right: var(--border-1) solid var(--color-dark);
}

.quantity__btn--plus {
  border-left: var(--border-1) solid var(--color-dark);
}

.quantity__btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.quantity__stock-warning {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-secondary, #7c3aed);
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius-lg);
  padding: 8px 14px;
  margin-top: -16px;
  margin-bottom: 8px;
  white-space: nowrap;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.quantity__stock-warning::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: #faf5ff;
  border-top: 1px solid #ddd6fe;
  border-left: 1px solid #ddd6fe;
  transform: rotate(45deg);
}

.quantity__stock-warning-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.quantity input[type="number"] {
  width: 45px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  border: none;
  background: transparent;
  color: var(--color-dark);
  -moz-appearance: textfield;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-single__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
}

.product-single__btn.is-loading {
  pointer-events: none;
  color: transparent;
}

.product-single__btn.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

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

/* Brand Logo */
.product-single__brand {
  display: flex;
  margin-bottom: var(--space-4);
}

.product-single__brand a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.product-single__brand a:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}

.product-single__brand img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* USP */
.product-single__usp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.product-single__usp-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.product-single__usp-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-secondary);
}

/* Description */
.product-single__description {
  margin-bottom: var(--space-12);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
}

.product-single__description h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-dark);
}

.product-single__content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* Override any imported product description styling */
.product-single__content > div,
.product-single__content > section {
  all: unset;
  display: block;
}

.product-single__content p {
  margin-bottom: var(--space-4);
}

.product-single__content ul,
.product-single__content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.product-single__content li {
  margin-bottom: var(--space-2);
}

/* Clean up any styled blocks from product imports (NOT for --custom descriptions) */
.product-single__description .product-single__content [style],
.product-single__description .product-single__content [style*="background"],
.product-single__description .product-single__content .wp-block-group,
.product-single__description .product-single__content .wp-block-cover,
.product-single__description .product-single__content .wp-block-columns,
.product-single__description .product-single__content .wp-block-column {
  all: unset !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 var(--space-4) 0 !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
}

.product-single__description .product-single__content .wp-block-cover__inner-container,
.product-single__description .product-single__content .wp-block-group__inner-container {
  all: unset !important;
  display: block !important;
}

.product-single__content h1,
.product-single__content h2,
.product-single__content h3,
.product-single__content h4 {
  all: unset !important;
  display: block !important;
  font-weight: var(--font-bold) !important;
  color: var(--color-dark) !important;
  margin: var(--space-4) 0 var(--space-2) 0 !important;
}

.product-single__content h2 {
  font-size: var(--text-xl) !important;
}

.product-single__content h3 {
  font-size: var(--text-lg) !important;
}

.product-single__content h4 {
  font-size: var(--text-base) !important;
}

.product-single__content p {
  all: unset !important;
  display: block !important;
  margin-bottom: var(--space-4) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--color-text) !important;
}

.product-single__content em,
.product-single__content i {
  font-style: italic !important;
}

.product-single__content strong,
.product-single__content b {
  font-weight: var(--font-bold) !important;
}

.product-single__content blockquote {
  all: unset !important;
  display: block !important;
  margin: var(--space-4) 0 !important;
  padding: var(--space-4) !important;
  padding-left: var(--space-5) !important;
  border-left: 3px solid var(--color-secondary) !important;
  background: var(--color-gray-50) !important;
  font-style: italic !important;
  color: var(--color-text) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

.product-single__content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-lg) !important;
  margin: var(--space-4) 0 !important;
}

.product-single__content a {
  color: var(--color-secondary) !important;
  text-decoration: underline !important;
}

.product-single__content a:hover {
  color: var(--color-secondary-hover) !important;
}

/* Related Products */
.product-single__related {
  margin-bottom: var(--space-12);
}

.product-single__related h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-secondary);
}

.breadcrumb__separator {
  color: var(--color-gray-400);
}

.breadcrumb__current {
  color: var(--color-dark);
  font-weight: var(--font-medium);
}

/* Omnibus - directly under price */
.product-single__omnibus {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-4);
}

/* Shorter add to cart button - compact design */
.product-single__add-to-cart .btn,
.product-single__add-to-cart .single_add_to_cart_button,
.product-single__btn {
  padding: 10px 16px !important;
  font-size: var(--text-sm) !important;
  min-width: auto !important;
}

/* Mobile: constrain product info, hide brand logo */
@media (max-width: 767px) {
  .product-single__info {
    max-width: 100%;
    overflow: hidden;
  }

  .product-single__excerpt {
    word-break: break-word;
  }

  .product-single__add-to-cart {
    max-width: 100%;
  }

  .product-single__add-to-cart .product-single__btn,
  .product-single__add-to-cart .single_add_to_cart_button {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-single__brand {
    display: none;
  }

  .product-single__usp {
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }

  .product-single__usp-item {
    font-size: var(--text-xs);
  }
}

/* ========================================
   PRODUCT LIGHTBOX
   ======================================== */

.product-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-lightbox--active {
  opacity: 1;
  visibility: visible;
}

.product-lightbox__container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-lightbox__image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.product-lightbox__close {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.product-lightbox__close:hover {
  transform: scale(1.1);
}

.product-lightbox__close svg {
  width: 20px;
  height: 20px;
  color: var(--color-dark);
}

.product-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.product-lightbox__nav:hover {
  transform: translateY(-50%) scale(1.1);
  background: var(--color-primary);
}

.product-lightbox__nav--prev {
  left: -70px;
}

.product-lightbox__nav--next {
  right: -70px;
}

.product-lightbox__nav svg {
  width: 24px;
  height: 24px;
  color: var(--color-dark);
}

/* Make main image clickable */
.product-single__main-image img {
  cursor: zoom-in;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .product-lightbox__close {
    top: 10px;
    right: 10px;
  }

  .product-lightbox__nav--prev {
    left: 10px;
  }

  .product-lightbox__nav--next {
    right: 10px;
  }
}
/**
 * Lagano WooCommerce - Product Description
 *
 * Unified styling for product descriptions with columns, boxes, and images.
 * Supports custom layouts while maintaining design consistency.
 *
 * @package Lagano
 * @since 2.0.0
 */

/* ========================================
   PRODUCT DESCRIPTION BASE
   ======================================== */

.product-description {
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-8);
}

.product-description__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
}

.product-description__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

/* ========================================
   CONTENT AREA
   ======================================== */

.product-description__content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.product-description__content p {
  margin-bottom: var(--space-4);
}

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

/* ========================================
   COLUMNS LAYOUT
   ======================================== */

.desc-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.desc-columns--2 {
  grid-template-columns: 1fr;
}

.desc-columns--3 {
  grid-template-columns: 1fr;
}

.desc-columns--sidebar {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .desc-columns--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .desc-columns--sidebar {
    grid-template-columns: 2fr 1fr;
  }

  .desc-columns--sidebar-left {
    grid-template-columns: 1fr 2fr;
  }
}

.desc-column {
  min-width: 0;
}

/* ========================================
   INFO BOXES
   ======================================== */

.desc-box {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.desc-box:last-child {
  margin-bottom: 0;
}

/* Default box - light gray */
.desc-box--default {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
}

/* Primary box - yellow accent */
.desc-box--primary {
  background: linear-gradient(135deg, rgba(250, 220, 0, 0.1) 0%, rgba(250, 220, 0, 0.05) 100%);
  border: 2px solid var(--color-primary);
  border-left-width: 4px;
}

/* Secondary box - purple accent */
.desc-box--secondary {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.03) 100%);
  border: 2px solid var(--color-secondary);
  border-left-width: 4px;
}

/* Success box - green */
.desc-box--success {
  background: rgba(34, 197, 94, 0.08);
  border: 2px solid var(--color-success);
  border-left-width: 4px;
}

/* Warning box - orange */
.desc-box--warning {
  background: rgba(251, 146, 60, 0.08);
  border: 2px solid #fb923c;
  border-left-width: 4px;
}

/* Info box - blue */
.desc-box--info {
  background: rgba(59, 130, 246, 0.08);
  border: 2px solid #3b82f6;
  border-left-width: 4px;
}

.desc-box__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.desc-box__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.desc-box__content {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* ========================================
   FEATURE GRID
   ======================================== */

.desc-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .desc-features {
    grid-template-columns: repeat(4, 1fr);
  }
}

.desc-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.desc-feature:hover {
  background: var(--color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.desc-feature__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.desc-feature__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.desc-feature__value {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ========================================
   SPECIFICATIONS TABLE
   ======================================== */

.desc-specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

.desc-specs tr {
  border-bottom: 1px solid var(--color-gray-100);
}

.desc-specs tr:last-child {
  border-bottom: none;
}

.desc-specs th,
.desc-specs td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
}

.desc-specs th {
  width: 40%;
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
  background: var(--color-gray-50);
}

.desc-specs td {
  color: var(--color-dark);
  font-weight: var(--font-medium);
}

.desc-specs tr:nth-child(odd) th {
  background: var(--color-gray-100);
}

/* ========================================
   IMAGE LAYOUTS
   ======================================== */

.desc-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.desc-image img {
  width: 100%;
  height: auto;
  display: block;
}

.desc-image--float-left {
  float: left;
  max-width: 300px;
  margin-right: var(--space-4);
  margin-bottom: var(--space-4);
}

.desc-image--float-right {
  float: right;
  max-width: 300px;
  margin-left: var(--space-4);
  margin-bottom: var(--space-4);
}

.desc-image--full {
  width: 100%;
}

.desc-image--caption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2);
  background: var(--color-gray-50);
}

/* Gallery grid */
.desc-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .desc-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.desc-gallery__item {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-all);
}

.desc-gallery__item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.desc-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   LISTS
   ======================================== */

.desc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.desc-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.desc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

/* Checkmark list */
.desc-list--check li::before {
  content: "\2713";
  background: none;
  color: var(--color-success);
  font-weight: bold;
  width: auto;
  height: auto;
  top: 0;
}

/* Numbered list */
.desc-list--numbered {
  counter-reset: desc-counter;
}

.desc-list--numbered li {
  counter-increment: desc-counter;
}

.desc-list--numbered li::before {
  content: counter(desc-counter);
  background: var(--color-secondary);
  color: var(--color-white);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  top: 2px;
}

/* ========================================
   QUOTES & CALLOUTS
   ======================================== */

.desc-quote {
  padding: var(--space-5);
  padding-left: var(--space-6);
  background: var(--color-gray-50);
  border-left: 4px solid var(--color-secondary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-bottom: var(--space-6);
  font-style: italic;
}

.desc-quote__text {
  font-size: var(--text-lg);
  color: var(--color-dark);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.desc-quote__author {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: normal;
}

.desc-callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-secondary-light) 0%, rgba(124, 58, 237, 0.05) 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.desc-callout__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.desc-callout__content {
  flex: 1;
}

.desc-callout__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.desc-callout__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* ========================================
   ACCORDIONS / EXPANDABLE SECTIONS
   ======================================== */

.desc-accordion {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.desc-accordion__item {
  border-bottom: 1px solid var(--color-gray-200);
}

.desc-accordion__item:last-child {
  border-bottom: none;
}

.desc-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  text-align: left;
  transition: var(--transition-all);
}

.desc-accordion__header:hover {
  background: var(--color-gray-100);
}

.desc-accordion__icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.desc-accordion__item.open .desc-accordion__icon {
  transform: rotate(180deg);
}

.desc-accordion__content {
  padding: var(--space-4);
  display: none;
}

.desc-accordion__item.open .desc-accordion__content {
  display: block;
}

/* ========================================
   PRODUCT-THEMED COLORS (CSS Variables)
   ======================================== */

/* These can be set dynamically based on product cover colors */
.product-description[data-theme="warm"] {
  --desc-accent: #f59e0b;
  --desc-accent-light: rgba(245, 158, 11, 0.1);
}

.product-description[data-theme="cool"] {
  --desc-accent: #3b82f6;
  --desc-accent-light: rgba(59, 130, 246, 0.1);
}

.product-description[data-theme="nature"] {
  --desc-accent: #22c55e;
  --desc-accent-light: rgba(34, 197, 94, 0.1);
}

.product-description[data-theme="dark"] {
  --desc-accent: #6366f1;
  --desc-accent-light: rgba(99, 102, 241, 0.1);
}

/* Apply theme accent to elements */
.product-description[data-theme] .desc-box--themed {
  background: var(--desc-accent-light);
  border-color: var(--desc-accent);
}

.product-description[data-theme] .desc-list li::before {
  background: var(--desc-accent);
}

.product-description[data-theme] .desc-quote {
  border-left-color: var(--desc-accent);
}

/* ========================================
   CLEARFIX & UTILITIES
   ======================================== */

.desc-clear::after {
  content: "";
  display: table;
  clear: both;
}

.desc-spacer {
  height: var(--space-6);
}

.desc-spacer--sm {
  height: var(--space-3);
}

.desc-spacer--lg {
  height: var(--space-10);
}

.desc-divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: var(--space-6) 0;
}

/* ========================================
   HERO SECTION
   ======================================== */

.desc-hero {
  position: relative;
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-secondary-light) 0%, rgba(124, 58, 237, 0.05) 100%);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.desc-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(250, 220, 0, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.desc-hero__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
  position: relative;
}

@media (min-width: 768px) {
  .desc-hero__title {
    font-size: var(--text-3xl);
  }
}

.desc-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  position: relative;
}

.desc-hero--dark {
  background: linear-gradient(135deg, var(--color-dark) 0%, #2d2d2d 100%);
}

.desc-hero--dark .desc-hero__title,
.desc-hero--dark .desc-hero__subtitle {
  color: var(--color-white);
}

/* ========================================
   INFO BOX VARIANTS (User examples)
   ======================================== */

/* CTA Box - Call to action */
.desc-box--cta {
  background: linear-gradient(135deg, var(--color-primary) 0%, #f0d500 100%);
  border: 3px solid var(--color-dark);
  text-align: center;
  padding: var(--space-6);
}

.desc-box--cta .desc-box__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

/* Gradient Box */
.desc-box--gradient {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(250, 220, 0, 0.1) 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-xl);
}

/* Quote Box */
.desc-box--quote {
  position: relative;
  padding-left: var(--space-6);
  background: var(--color-gray-50);
  border: none;
  border-left: 4px solid var(--color-secondary);
  font-style: italic;
}

.desc-box--quote::before {
  content: '"';
  position: absolute;
  top: var(--space-2);
  left: var(--space-3);
  font-size: 48px;
  color: var(--color-secondary);
  opacity: 0.3;
  line-height: 1;
}

/* Highlighted Box */
.desc-box--highlight {
  background: var(--color-primary);
  border: 3px solid var(--color-dark);
  box-shadow: 4px 4px 0 var(--color-dark);
}

.desc-box--highlight .desc-box__title {
  color: var(--color-dark);
}

/* ========================================
   ADDITIONAL COLUMN VARIANTS
   ======================================== */

/* Wide first column (70/30 split) */
.desc-columns--wide-left {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .desc-columns--wide-left {
    grid-template-columns: 2fr 1fr;
  }
}

/* Wide second column (30/70 split) */
.desc-columns--wide-right {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .desc-columns--wide-right {
    grid-template-columns: 1fr 2fr;
  }
}

/* Equal 4 columns */
.desc-columns--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .desc-columns--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
   STATS / NUMBERS DISPLAY
   ======================================== */

.desc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .desc-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.desc-stat {
  text-align: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.desc-stat__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.desc-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========================================
   TABS
   ======================================== */

.desc-tabs {
  margin-bottom: var(--space-6);
}

.desc-tabs__nav {
  display: flex;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.desc-tabs__btn {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-colors);
  position: relative;
}

.desc-tabs__btn:hover {
  color: var(--color-secondary);
}

.desc-tabs__btn.active {
  color: var(--color-secondary);
}

.desc-tabs__btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-secondary);
}

.desc-tabs__panel {
  display: none;
}

.desc-tabs__panel.active {
  display: block;
}

/* ========================================
   BADGES / TAGS
   ======================================== */

.desc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.desc-badge--primary {
  background: var(--color-primary);
  color: var(--color-dark);
}

.desc-badge--secondary {
  background: var(--color-secondary);
  color: var(--color-white);
}

.desc-badge--success {
  background: var(--color-success);
  color: var(--color-white);
}

.desc-badge--warning {
  background: #fb923c;
  color: var(--color-white);
}

.desc-badge--outline {
  background: transparent;
  border: 1px solid var(--color-gray-300);
  color: var(--color-text);
}

.desc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ========================================
   TIMELINE
   ======================================== */

.desc-timeline {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.desc-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-200);
}

.desc-timeline__item {
  position: relative;
  padding-bottom: var(--space-5);
}

.desc-timeline__item:last-child {
  padding-bottom: 0;
}

.desc-timeline__dot {
  position: absolute;
  left: calc(-1 * var(--space-6) + 4px);
  top: 2px;
  width: 12px;
  height: 12px;
  background: var(--color-secondary);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-full);
}

.desc-timeline__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.desc-timeline__text {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ========================================
   COMPARISON TABLE
   ======================================== */

.desc-comparison {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  overflow-x: auto;
  display: block;
}

@media (min-width: 768px) {
  .desc-comparison {
    display: table;
  }
}

.desc-comparison thead th {
  background: var(--color-secondary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-weight: var(--font-bold);
}

.desc-comparison thead th:first-child {
  background: var(--color-dark);
}

.desc-comparison tbody td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--color-gray-100);
}

.desc-comparison tbody td:first-child {
  text-align: left;
  font-weight: var(--font-medium);
  background: var(--color-gray-50);
}

.desc-comparison .check-yes {
  color: var(--color-success);
}

.desc-comparison .check-no {
  color: var(--color-error);
}

/* ========================================
   CUSTOM-STYLED PRODUCT DESCRIPTION
   For descriptions with inline styles - minimal wrapper styling only
   ======================================== */

.product-single__description--custom {
  margin-bottom: var(--space-8);
}

.product-single__description--custom > h2 {
  display: block;
  background: var(--color-primary);
  color: var(--color-dark);
  padding: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Content inside custom descriptions is NOT styled - respects inline styles */
.product-single__description--custom .product-single__content {
  /* No styling - let inline styles take over */
}

/* ========================================
   AUTO-STYLED PRODUCT DESCRIPTION
   Plain HTML elements are automatically styled
   ======================================== */

.product-single__description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* Headings */
.product-single__description h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--color-primary);
  display: inline-block;
}

.product-single__description h2:first-child {
  margin-top: 0;
}

.product-single__description h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  margin: var(--space-6) 0 var(--space-3);
}

.product-single__description h4 {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin: var(--space-5) 0 var(--space-2);
}

/* Paragraphs */
.product-single__description p {
  margin-bottom: var(--space-4);
}

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

/* Strong/Bold text highlight */
.product-single__description strong,
.product-single__description b {
  color: var(--color-dark);
  font-weight: var(--font-bold);
}

/* Unordered Lists - styled bullets */
.product-single__description ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.product-single__description ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.product-single__description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

/* Nested lists */
.product-single__description ul ul {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.product-single__description ul ul li::before {
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border: 2px solid var(--color-secondary);
}

/* Ordered Lists - numbered */
.product-single__description ol {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  counter-reset: desc-ol;
}

.product-single__description ol li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
  counter-increment: desc-ol;
}

.product-single__description ol li::before {
  content: counter(desc-ol);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blockquotes - info box style */
.product-single__description blockquote {
  position: relative;
  margin: var(--space-6) 0;
  padding: var(--space-5);
  padding-left: var(--space-6);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.03) 100%);
  border: 2px solid var(--color-secondary);
  border-left-width: 5px;
  border-radius: var(--radius-lg);
  font-style: normal;
}

.product-single__description blockquote p {
  margin-bottom: var(--space-2);
}

.product-single__description blockquote p:last-child {
  margin-bottom: 0;
}

/* Tables */
.product-single__description table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.product-single__description table th,
.product-single__description table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.product-single__description table th {
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: var(--font-bold);
}

.product-single__description table tr:nth-child(even) td {
  background: var(--color-gray-50);
}

/* Links */
.product-single__description a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--transition-colors);
}

.product-single__description a:hover {
  color: var(--color-dark);
}

/* Images - constrained size */
.product-single__description img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-4) auto;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Images in paragraphs - inline/float style */
.product-single__description p img {
  max-width: 300px;
  float: right;
  margin: 0 0 var(--space-4) var(--space-4);
}

/* Clear floats after sections */
.product-single__description h2,
.product-single__description h3 {
  clear: both;
}

/* Multiple images in a row - gallery style */
.product-single__description p img + img {
  margin-left: var(--space-3);
}

/* Horizontal rule */
.product-single__description hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  margin: var(--space-8) 0;
  border-radius: var(--radius-full);
}

/* Code blocks */
.product-single__description code {
  background: var(--color-gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 0.9em;
}

/* Feature highlight boxes (using <div> with specific text patterns) */
.product-single__description > p:first-of-type {
  font-size: var(--text-lg);
  color: var(--color-dark);
  line-height: var(--leading-relaxed);
}

/* Emphasis text */
.product-single__description em,
.product-single__description i {
  color: var(--color-secondary);
  font-style: italic;
}

/* ========================================
   SECTION HEADERS - Yellow background style
   ======================================== */

.product-single__description h2 {
  display: block;
  background: var(--color-primary);
  color: var(--color-dark);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-8) 0 var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-single__description h2:first-child {
  margin-top: 0;
}

/* ========================================
   NUMBERED STEPS GRID (auto-detect ol at top level)
   ======================================== */

.product-single__description > ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  background: var(--color-gray-50);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  margin: var(--space-6) 0;
}

.product-single__description > ol > li {
  background: var(--color-white);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-single__description > ol > li::before {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-3);
  font-size: var(--text-lg);
  line-height: 40px;
}

.product-single__description > ol > li strong {
  display: block;
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

/* ========================================
   SPECIFICATION TABLES - Yellow header
   ======================================== */

.product-single__description table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-single__description table th {
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.product-single__description table td {
  border-bottom: 1px solid var(--color-gray-100);
}

.product-single__description table tr:last-child td {
  border-bottom: none;
}

.product-single__description table tr:hover td {
  background: rgba(255, 239, 15, 0.1);
}

/* Table section headers (rows that span full width) */
.product-single__description table tr td[colspan] {
  background: var(--color-gray-100);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

/* ========================================
   CTA BOX - Yellow call to action
   ======================================== */

.product-single__description blockquote {
  background: var(--color-primary);
  border: 3px solid var(--color-dark);
  border-left-width: 3px;
  color: var(--color-dark);
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  font-style: normal;
}

.product-single__description blockquote p {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.product-single__description blockquote p:last-child {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin-bottom: 0;
}

.product-single__description blockquote a {
  color: var(--color-dark);
  text-decoration: underline;
  font-weight: var(--font-bold);
}

/* ========================================
   SIMPLE BULLET LISTS (not grid)
   ======================================== */

.product-single__description ul:not(.desc-list) {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.product-single__description ul:not(.desc-list) li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.product-single__description ul:not(.desc-list) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-secondary);
  border-radius: 50%;
}

.product-single__description ul:not(.desc-list) li strong:first-child {
  color: var(--color-dark);
  font-weight: var(--font-bold);
}
/**
 * Lagano WooCommerce - Cart
 *
 * Shopping cart page styles.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   CART LAYOUT
   ======================================== */

.cart-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ========================================
   CART TABLE
   ======================================== */

.cart-table {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal);
}

.cart-table__header {
  display: none;
  padding: var(--space-4);
  background: var(--color-gray-100);
  border-bottom: var(--border-2) solid var(--color-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ========================================
   CART ITEM
   ======================================== */

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-1) solid var(--color-border-light);
}

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

/* Product image - clean look without heavy border */
.cart-item__image {
  background: var(--color-gray-50);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cart-item__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--space-2);
}

/* Product details */
.cart-item__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cart-item__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.cart-item__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.cart-item__title a:hover {
  color: var(--color-secondary);
}

.cart-item__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Price */
.cart-item__price {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cart-item__price-value {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
}

/* Quantity and subtotal row */
.cart-item__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.cart-item__subtotal {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

/* Remove button - subtle, clean style */
.cart-item__remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-all);
  color: var(--color-text-muted);
}

.cart-item__remove:hover {
  background: var(--color-error);
  color: var(--color-white);
}

.cart-item__remove svg {
  width: 18px;
  height: 18px;
}

/* ========================================
   CART TOTALS
   ======================================== */

.cart-totals {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

.cart-totals__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.cart-totals__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}

.cart-totals__row--total {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-2) solid var(--color-dark);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.cart-totals__label {
  color: var(--color-text-muted);
}

.cart-totals__value {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
}

/* Shipping options */
.cart-totals__shipping {
  padding: var(--space-3) 0;
  border-bottom: var(--border-1) solid var(--color-border-light);
}

.cart-totals__shipping-options {
  margin-top: var(--space-2);
}

.cart-totals__shipping-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  cursor: pointer;
}

.cart-totals__shipping-option input {
  accent-color: var(--color-secondary);
}

/* Checkout button */
.cart-totals__checkout {
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-decoration: none;
  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-xl);
  display: block;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-md);
}

.cart-totals__checkout:hover {
  background: var(--color-primary-hover);
  color: var(--color-dark);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal-lg);
}

/* Continue shopping */
.cart-totals__continue {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-decoration: none;
}

.cart-totals__continue:hover {
  text-decoration: none;
  color: var(--color-secondary-hover);
}

/* ========================================
   COUPON FORM
   ======================================== */

.coupon-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-1) solid var(--color-border-light);
}

.coupon-form__input {
  flex: 1;
  padding: var(--space-3);
  font-size: var(--text-sm);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
}

.coupon-form__input:focus {
  outline: none;
  border-color: var(--color-secondary);
}

.coupon-form__button {
  padding: var(--space-3) var(--space-4);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.coupon-form__button:hover {
  background: var(--color-secondary);
}

/* ========================================
   EMPTY CART
   ======================================== */

.cart-empty {
  text-align: center;
  padding: var(--space-12);
}

.cart-empty__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-full);
}

.cart-empty__icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
}

.cart-empty__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.cart-empty__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ========================================
   MINI CART (Header dropdown)
   ======================================== */

.mini-cart {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brutal-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition-all);
  z-index: 9999;
}

/* Show mini-cart on hover (desktop only) */
@media (min-width: 768px) {
  .header__cart-wrapper:hover .mini-cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.mini-cart--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mini-cart__header {
  padding: var(--space-4);
  border-bottom: var(--border-2) solid var(--color-dark);
  font-weight: var(--font-bold);
}

.mini-cart__content {
  display: block;
}

.mini-cart__items {
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-2);
}

.mini-cart__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-gray-200);
}

.mini-cart__item:last-child {
  border-bottom: none;
}

.mini-cart__item-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.mini-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.mini-cart__item-details {
  flex: 1;
  min-width: 0;
}

.mini-cart__item-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  text-decoration: none;
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-cart__item-title:hover {
  color: var(--color-secondary);
}

.mini-cart__item-price {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.mini-cart__item-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: var(--transition-colors);
  padding: 0;
  margin-left: auto;
  align-self: center;
}

.mini-cart__item-remove:hover {
  background: var(--color-gray-100);
  color: var(--color-error, #dc2626);
}

.mini-cart__item-remove svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.mini-cart__item.is-removing {
  opacity: 0.5;
  pointer-events: none;
}

.mini-cart__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.mini-cart__footer {
  padding: var(--space-4);
  border-top: var(--border-2) solid var(--color-dark);
}

.mini-cart__total {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.mini-cart__total strong {
  font-weight: var(--font-bold);
  color: var(--color-dark);
}

.mini-cart__btn {
  display: block;
  width: 100%;
  padding: var(--space-3);
  background: var(--color-secondary);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-lg);
  transition: var(--transition-colors);
}

.mini-cart__btn:hover {
  background: var(--color-secondary-hover);
  color: var(--color-white);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .cart-table__header {
    display: grid;
    grid-template-columns: 100px 2fr 1fr 120px 1fr 40px;
    gap: var(--space-4);
    align-items: center;
  }

  .cart-item {
    grid-template-columns: 100px 2fr 1fr 120px 1fr 40px;
    align-items: center;
    gap: var(--space-4);
  }

  .cart-item__actions {
    display: contents;
  }

  .cart-item__quantity {
    justify-content: center;
  }

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

  .cart-item__remove-col {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .cart-page {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

  .cart-summary {
    position: sticky;
    top: var(--space-6);
  }
}

/* Mobile cart item adjustments */
@media (max-width: 767px) {
  .cart-item {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    position: relative;
  }

  .cart-item__image {
    grid-row: 1 / 3;
  }

  .cart-item__details {
    grid-column: 2;
  }

  .cart-item__price,
  .cart-item__quantity,
  .cart-item__subtotal {
    grid-column: 2;
  }

  .cart-item__remove-col {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
  }

  .cart-actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cart-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ========================================
   SHIPPING SECTION - Lagano Custom Style
   ======================================== */

/* Main shipping container */
.cart-totals__shipping {
  padding: var(--space-4) 0;
  border-bottom: var(--border-1) solid var(--color-border-light);
}

/* Hide WooCommerce default table structure */
.cart-totals__shipping table,
.cart-totals__shipping tr,
.cart-totals__shipping th,
.cart-totals__shipping td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cart-totals__shipping th {
  display: none !important;
}

/* Shipping package */
.shipping-package {
  margin-bottom: var(--space-4);
}

.shipping-package:last-child {
  margin-bottom: 0;
}

.shipping-package__header {
  margin-bottom: var(--space-3);
}

.shipping-package__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Shipping methods list */
.shipping-methods-list,
.woocommerce-shipping-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Shipping method item */
.shipping-method-item,
.woocommerce-shipping-methods li {
  list-style: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
  margin: 0 !important;
}

.shipping-method-item::before,
.shipping-method-item::marker,
.woocommerce-shipping-methods li::before,
.woocommerce-shipping-methods li::marker {
  display: none !important;
  content: none !important;
}

.shipping-method-item:hover,
.woocommerce-shipping-methods li:hover {
  border-color: var(--color-secondary);
  background: var(--color-white);
}

.shipping-method-item--selected {
  border-color: var(--color-secondary);
  background: var(--color-white);
}

/* Radio button styling */
.shipping-method-item__radio,
.shipping-method-item input[type="radio"],
.woocommerce-shipping-methods input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: var(--border-2) solid var(--color-dark) !important;
  border-radius: var(--radius-full) !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  cursor: pointer;
  position: relative;
  background: var(--color-white) !important;
  flex-shrink: 0;
}

.shipping-method-item input[type="radio"]:checked,
.woocommerce-shipping-methods input[type="radio"]:checked {
  border-color: var(--color-secondary) !important;
  background: var(--color-secondary) !important;
}

.shipping-method-item input[type="radio"]:checked::after,
.woocommerce-shipping-methods input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--color-white) !important;
  border-radius: var(--radius-full) !important;
}

/* Label styling */
.shipping-method-item__label,
.woocommerce-shipping-methods label {
  flex: 1;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.shipping-method-item__name {
  display: block;
  color: var(--color-dark);
  font-weight: var(--font-medium);
}

/* Hide shipping method images inside labels */
.shipping-method-item__label img,
.shipping-method-item__name img,
.woocommerce-shipping-methods label img {
  display: none !important;
}

/* Hide ALL plugin default logos (without our class) */
.shipping-method-item > img:not(.shipping-method-logo),
.woocommerce-shipping-methods li > img:not(.shipping-method-logo) {
  display: none !important;
}

/* Style our shipping method logos (aligned right) */
.shipping-method-logo {
  display: block !important;
  max-width: 60px;
  max-height: 40px;
  width: auto;
  height: auto;
  margin-left: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* Shipping destination */
.shipping-destination,
.woocommerce-shipping-destination {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-1) solid var(--color-border-light);
}

/* Shipping notice */
.shipping-notice {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  margin: 0;
}

/* ========================================
   INPOST & ORLEN PLUGINS OVERRIDE
   ======================================== */

/* InPost geowidget button */
.easypack_show_geowidget,
#easypack_show_geowidget,
.easypack-widget-btn,
.inpost-select-point {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) !important;
  background: var(--color-primary) !important;
  color: var(--color-dark) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-semibold) !important;
  border: var(--border-2) solid var(--color-dark) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: var(--transition-all);
  text-decoration: none !important;
}

.easypack_show_geowidget:hover,
#easypack_show_geowidget:hover,
.easypack-widget-btn:hover,
.inpost-select-point:hover {
  background: var(--color-primary-hover) !important;
}

/* Selected parcel machine info */
#selected-parcel-machine,
.selected-point-info,
.easypack-selected-point {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: #e8f5e9 !important;
  border: var(--border-1) solid #4caf50 !important;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* Orlen Paczka point selector */
.orlen-select-point,
.orlenpaczka-select-btn,
.orlen-widget.button,
.orlen-modal-button {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) !important;
  background: #D91C00 !important;
  color: var(--color-white) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-semibold) !important;
  border: var(--border-2) solid var(--color-dark) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  margin-top: var(--space-2);
  transition: var(--transition-all);
}

.orlen-select-point:hover,
.orlenpaczka-select-btn:hover,
.orlen-widget.button:hover,
.orlen-modal-button:hover {
  background: #b81800 !important;
}

/* Orlen pickup point field container */
#orlen_paczka_pickup_point_field {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: #fff3cd;
  border: 2px solid #D91C00;
  border-radius: var(--radius-lg);
  /* Debug: force show */
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#orlen_paczka_pickup_point_field h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
}

#orlen_paczka_pickup_point_label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

/* Shipping method logos */
.shipping-method-logo {
  flex-shrink: 0;
  margin-left: auto;
}

.shipping-method-logo--orlen {
  height: 36px !important;
  width: auto !important;
}

/* Override any bullet styling from WooCommerce */
.cart-totals__shipping ul,
.cart-totals__shipping li {
  list-style: none !important;
  list-style-type: none !important;
}

/* ========================================
   QUANTITY INPUT - MODERN STYLE (matches product-single)
   ======================================== */

.cart-item__quantity {
  display: flex;
  align-items: center;
}

.cart-item__quantity .quantity {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-sm);
}

/* Quantity buttons - match product-single style */
.cart-item__quantity .quantity__btn,
.cart-item__quantity .qty-btn {
  width: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: none;
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-all);
}

.cart-item__quantity .quantity__btn--minus,
.cart-item__quantity .qty-btn--minus {
  border-right: var(--border-1) solid var(--color-dark);
}

.cart-item__quantity .quantity__btn--plus,
.cart-item__quantity .qty-btn--plus {
  border-left: var(--border-1) solid var(--color-dark);
}

.cart-item__quantity .quantity__btn:hover,
.cart-item__quantity .qty-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.cart-item__quantity .quantity input[type="number"],
.cart-item__quantity .qty {
  width: 45px !important;
  min-width: 45px !important;
  max-width: 45px !important;
  height: 40px;
  padding: 0 !important;
  border: none !important;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  -moz-appearance: textfield;
  background: transparent;
  color: var(--color-dark);
}

.cart-item__quantity .quantity input::-webkit-outer-spin-button,
.cart-item__quantity .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-item__quantity .quantity input:focus {
  outline: none;
}

/* ========================================
   CART ACTIONS ROW
   ======================================== */

.cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  margin-top: var(--space-4);
}

.cart-actions .btn--outline {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

.cart-actions .btn--dark {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
}

/* ========================================
   OVERRIDE WOOCOMMERCE DEFAULTS
   ======================================== */

/* Force no borders on product image */
.cart-item__image,
.cart-item__image a,
.cart-item__image img {
  border: none !important;
  box-shadow: none !important;
}

/* Force no borders on remove button */
.cart-item__remove,
.cart-item__remove-col a,
a.cart-item__remove {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.cart-item__remove:hover,
.cart-item__remove-col a:hover,
a.cart-item__remove:hover {
  background: var(--color-error) !important;
  color: var(--color-white) !important;
}

/* Remove column styling */
.cart-item__remove-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   HIDE UPDATE CART BUTTON - auto-update instead
   ======================================== */

button[name="update_cart"],
input[name="update_cart"],
.update-cart-btn,
.woocommerce-cart-form__contents button[name="update_cart"] {
  display: none !important;
}

/* ========================================
   COUPON INPUT STYLING
   ======================================== */

.coupon-form__input,
#coupon_code {
  color: var(--color-dark) !important;
  background: var(--color-white) !important;
}

.coupon-form__input::placeholder,
#coupon_code::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.coupon-form__input::-webkit-input-placeholder,
#coupon_code::-webkit-input-placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.coupon-form__input::-moz-placeholder,
#coupon_code::-moz-placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.coupon-form__input:-ms-input-placeholder,
#coupon_code:-ms-input-placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* ========================================
   CART AJAX UPDATE
   ======================================== */

.woocommerce-cart-form.is-updating {
  position: relative;
  pointer-events: none;
}

.woocommerce-cart-form.is-updating::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

.woocommerce-cart-form.is-updating::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: cart-spin 0.8s linear infinite;
  z-index: 11;
}

@keyframes cart-spin {
  to { transform: rotate(360deg); }
}
/**
 * Lagano WooCommerce - Checkout
 *
 * Checkout page styles.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   CHECKOUT LAYOUT
   ======================================== */

.checkout-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.checkout-main,
.checkout-sidebar {
  min-width: 0;
}

/* ========================================
   CHECKOUT SECTIONS
   ======================================== */

.checkout-section {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: none;
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.checkout-section:last-child {
  margin-bottom: 0;
}

.checkout-section__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-2) solid var(--color-dark);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Hide section numbers */
.checkout-section__number {
  display: none;
}

/* ========================================
   FORM FIELDS
   ======================================== */

.checkout-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.checkout-form__field {
  /* Single field */
}

.checkout-form__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
}

.checkout-form__label .required {
  color: var(--color-error);
}

.checkout-form__input,
.checkout-form__select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
  box-shadow: none;
}

@media (min-width: 768px) {
  .checkout-form__input,
  .checkout-form__select {
    box-shadow: var(--shadow-brutal-sm);
  }
}

.checkout-form__input:focus,
.checkout-form__select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-brutal-sm), 0 0 0 3px var(--color-secondary-light);
}

/* ========================================
   SHIPPING METHODS
   ======================================== */

/* Shipping row - td uses colspan="2" for full width */
tr.woocommerce-shipping-totals.shipping > td {
  padding: var(--space-4) 0 !important;
  border: none !important;
  background: transparent !important;
}

tr.woocommerce-shipping-totals.shipping .shipping-label {
  display: block;
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

/* Shipping methods list - full width */
tr.woocommerce-shipping-totals .woocommerce-shipping-methods {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

tr.woocommerce-shipping-totals .woocommerce-shipping-methods li {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--space-3) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--color-gray-50) !important;
  border: var(--border-2) solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  cursor: pointer;
  transition: var(--transition-all);
  box-sizing: border-box !important;
  text-align: left !important;
}

tr.woocommerce-shipping-totals .woocommerce-shipping-methods li:hover {
  border-color: var(--color-secondary);
}

tr.woocommerce-shipping-totals .woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

tr.woocommerce-shipping-totals .woocommerce-shipping-methods input[type="radio"] {
  accent-color: var(--color-secondary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

tr.woocommerce-shipping-totals .woocommerce-shipping-methods label {
  display: block !important;
  flex: 1;
  cursor: pointer;
  text-align: left !important;
  /* Reset - usuń wszelkie box style z label */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Shipping method name - single line, bold, left aligned */
tr.woocommerce-shipping-totals .woocommerce-shipping-methods .shipping-method-name {
  font-weight: var(--font-semibold);
  white-space: nowrap;
  text-align: left !important;
}

/* Force left align on all shipping method content */
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods li,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods label,
.woocommerce-checkout-review-order-table .woocommerce-shipping-methods span {
  text-align: left !important;
}

.shipping-methods {
  margin-top: var(--space-4);
}

.shipping-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: var(--transition-all);
}

.shipping-method:hover {
  border-color: var(--color-secondary);
}

.shipping-method--selected {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

.shipping-method__radio {
  margin-top: var(--space-1);
  accent-color: var(--color-secondary);
}

.shipping-method__content {
  flex: 1;
}

.shipping-method__name {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.shipping-method__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.shipping-method__price {
  font-weight: var(--font-bold);
  color: var(--color-dark);
  white-space: nowrap;
}

/* InPost/Orlen pickup point selector */
.shipping-method__pickup {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-white);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.shipping-method__pickup-btn {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.shipping-method__pickup-btn:hover {
  background: var(--color-primary-hover);
}

.shipping-method__selected-point {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-success-light);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* ========================================
   ORDER REVIEW (AJAX-refreshable)
   ======================================== */

.order-review-wrapper {
  padding: 0;
}

.order-review__items {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.order-review__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.order-review__item-image {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.order-review__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-review__item-details {
  flex: 1;
  min-width: 0;
}

.order-review__item-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  line-height: 1.3;
}

.order-review__item-qty {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.order-review__item-price {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  white-space: nowrap;
}

.order-review__totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order-review__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}

.order-review__row--shipping {
  padding: var(--space-2) 0;
}

.order-review__row--total {
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 2px solid var(--color-dark);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

/* InPost/Orlen selector table reset */
.inpost-orlen-selector {
  border-collapse: collapse;
}

.inpost-orlen-selector tr,
.inpost-orlen-selector th,
.inpost-orlen-selector td {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
}

/* ========================================
   INPOST GEOWIDGET BUTTON
   ======================================== */

.easypack-parcel-machine {
  display: block !important;
  margin-top: var(--space-4);
}

.easypack-parcel-machine-label {
  display: none !important;
}

.easypack-parcel-machine-select {
  display: block;
  width: 100%;
}

.easypack_show_geowidget,
#easypack_show_geowidget,
.easypack-parcel-machine .easypack_show_geowidget {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-align: center;
  text-decoration: none;
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.easypack_show_geowidget::before,
#easypack_show_geowidget::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.easypack_show_geowidget:hover,
#easypack_show_geowidget:hover {
  background: var(--color-secondary-hover);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

#selected-parcel-machine,
.selected-parcel-machine {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: #fff8dc;
  border: var(--border-2) solid #FFCD00;
  border-radius: var(--radius-lg);
}

#selected-parcel-machine:not(.hidden-paczkomat-data),
.selected-parcel-machine:not(.hidden-paczkomat-data) {
  display: block !important;
}

.hidden-paczkomat-data {
  display: none !important;
}

#selected-parcel-machine .easypack-visible-point-header,
.selected-parcel-machine .easypack-visible-point-header {
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

#selected-parcel-machine .easypack-visible-point-description,
.selected-parcel-machine .easypack-visible-point-description,
#selected-parcel-machine-id {
  display: block;
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* InPost jBox modal styling */
.jBox-Modal {
  z-index: 99999 !important;
}

.jBox-overlay {
  z-index: 99998 !important;
  background: rgba(0, 0, 0, 0.6) !important;
}

.jBox-title {
  font-size: var(--text-lg) !important;
  font-weight: var(--font-bold) !important;
  padding: var(--space-4) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.jBox-content {
  padding: 0 !important;
}

.jBox-closeButton {
  background: var(--color-dark) !important;
  color: var(--color-white) !important;
}

/* InPost geowidget container */
inpost-geowidget,
#inpost-geowidget {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
}

/* ========================================
   ORLEN PACZKA BUTTON
   ======================================== */

.orlen-paczka-select,
.orlen-point-select,
.orlen-pickup-button,
[class*="orlen"][class*="button"],
[class*="orlen"][class*="select"] {
  display: inline-block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-sm);
}

.orlen-paczka-select:hover,
.orlen-point-select:hover,
.orlen-pickup-button:hover,
[class*="orlen"][class*="button"]:hover,
[class*="orlen"][class*="select"]:hover {
  background: var(--color-secondary-dark);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal);
}

.orlen-selected-point,
[class*="orlen"][class*="selected"] {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-secondary-light);
  border: var(--border-2) solid var(--color-secondary);
  border-radius: var(--radius-lg);
}

/* Orlen Paczka Pickup Row */
.orlen-pickup-row {
  display: none;
}

.orlen-pickup-row.is-visible {
  display: table-row;
}

#orlen-pickup-container {
  padding: var(--space-3) 0;
}

/* Orlen Widget Button */
.orlen-widget.pickup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: #D91C00;
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  transition: var(--transition-all);
}

.orlen-widget.pickup-button:hover {
  background-color: #b31600;
  transform: translateY(-1px);
}

#orlen_paczka_pickup_point_label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* Orlen Selected Point Success */
#orlen_paczka_pickup_point_label .orlen-point-success {
  background: #e8f5e9;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid #4caf50;
}

/* Shipping Method Logo */
.shipping-method-logo {
  height: 32px;
  width: auto;
  margin-left: auto;
  display: block;
  flex-shrink: 0;
}

.shipping-method-logo--orlen {
  height: 48px;
  width: auto;
}

/* Hide Orlen plugin's default inline logo/icon */
.woocommerce-shipping-methods label[for*="orlen"] > img:first-of-type,
.woocommerce-shipping-methods label[for*="orlen"] > span > img,
.shipping_method_label img:not(.shipping-method-logo),
input[id*="orlen"] + label > img:first-child {
  display: none !important;
}

/* ========================================
   PAYMENT METHODS
   ======================================== */

.payment-methods {
  margin-top: var(--space-4);
}

.payment-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: var(--transition-all);
}

.payment-method:hover {
  border-color: var(--color-secondary);
}

.payment-method--selected {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

.payment-method__radio {
  margin-top: var(--space-1);
  accent-color: var(--color-secondary);
}

.payment-method__icon {
  width: 48px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.payment-method__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.payment-method__content {
  flex: 1;
}

.payment-method__name {
  font-weight: var(--font-semibold);
}

.payment-method__description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ========================================
   ORDER SUMMARY
   ======================================== */

.order-summary {
  /* Sticky removed - was overlapping payment section on scroll */
}

.order-summary__items {
  margin-bottom: var(--space-4);
}

.order-summary__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-1) solid var(--color-border-light);
}

.order-summary__item:last-child {
  border-bottom: none;
}

.order-summary__item-image {
  width: 60px;
  height: 60px;
  background: var(--color-gray-50);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.order-summary__item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-summary__item-details {
  flex: 1;
}

.order-summary__item-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
}

.order-summary__item-qty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.order-summary__item-price {
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Totals */
.order-summary__totals {
  border-top: var(--border-2) solid var(--color-dark);
  padding-top: var(--space-4);
}

.order-summary__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.order-summary__row--total {
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: var(--border-2) solid var(--color-dark);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

/* ========================================
   PLACE ORDER
   ======================================== */

.checkout-submit {
  margin-top: var(--space-6);
}

.checkout-submit__terms {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.checkout-submit__terms input {
  margin-top: var(--space-1);
  accent-color: var(--color-secondary);
}

.checkout-submit__terms a {
  color: var(--color-secondary);
}

.checkout-submit__button {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-md);
}

.checkout-submit__button:hover {
  background: var(--color-primary-hover);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal-lg);
}

.checkout-submit__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-brutal-md);
}

/* ========================================
   ORDER RECEIVED (Thank you page)
   ======================================== */

.order-received {
  text-align: center;
  padding: var(--space-8);
}

.order-received__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-success-light);
  border: var(--border-3) solid var(--color-success);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-brutal);
}

.order-received__icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-success);
}

.order-received__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.order-received__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 768px) {
  .checkout-section {
    padding: var(--space-6);
    box-shadow: var(--shadow-brutal);
    margin-bottom: var(--space-6);
  }

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

  .checkout-form__row--full {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  .checkout-page {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* ========================================
   ORDER DETAILS (Thank You Page)
   ======================================== */

.order-received-page {
  max-width: 800px;
  margin: 0 auto;
}

.order-received--failed {
  border-color: var(--color-error);
}

.order-received__icon--error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

.order-received__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Order Details Info */
.order-details {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

.order-details__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.order-details__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .order-details__info {
    grid-template-columns: 1fr;
  }
}

.order-details__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.order-details__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.order-details__value {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
}

.order-details__value--total {
  font-size: var(--text-lg);
  color: var(--color-secondary);
}

/* Order Products */
.order-products {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

.order-products__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.order-products__list {
  margin-bottom: var(--space-4);
}

.order-products__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-1) solid var(--color-border);
}

.order-products__item:last-child {
  border-bottom: none;
}

.order-products__image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-50);
}

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

.order-products__details {
  flex: 1;
  min-width: 0;
}

.order-products__name {
  display: block;
  font-weight: var(--font-medium);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.order-products__name a {
  color: inherit;
  text-decoration: none;
}

.order-products__name a:hover {
  color: var(--color-secondary);
}

.order-products__qty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.order-products__price {
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Totals */
.order-products__totals {
  border-top: var(--border-2) solid var(--color-dark);
  padding-top: var(--space-4);
}

.order-products__total-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.order-products__total-row--total {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  border-top: 2px solid var(--color-dark);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

/* Order Address */
.order-address {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

.order-address__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.order-address__content {
  font-style: normal;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

/* ========================================
   CHECKOUT FORM FIELDS (WooCommerce)
   ======================================== */

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  margin-bottom: var(--space-4);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
  display: none;
}

/* Standard labels above inputs - simpler, no click issues */
.form-row {
  position: relative;
  margin-bottom: var(--space-4);
  min-width: 0;
}

/* Labels - ensure they don't block input clicks */
.form-row label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-secondary);
  position: static;
  pointer-events: auto;
}

.form-row label .required {
  color: var(--color-error);
}

/* Hide optional text but show required asterisk */
.form-row label .optional {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
}

/* Inputs - ensure they're clickable */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
  background: var(--color-white);
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: text;
}

/* Hide all placeholders - use purple labels only */
.form-row input::placeholder,
.form-row textarea::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-row-wide {
  width: 100%;
}

/* First and last name fields - ensure proper stacking */
.form-row-first,
.form-row-last {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Ensure first/last inputs are clickable */
.form-row-first input,
.form-row-first select,
.form-row-last input,
.form-row-last select,
#billing_first_name,
#billing_last_name {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  cursor: text !important;
}

@media (min-width: 768px) {
  .form-row-first {
    float: left;
    width: 48%;
  }

  .form-row-last {
    float: right;
    width: 48%;
  }
}

/* Clearfix for form rows */
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after {
  content: '';
  display: table;
  clear: both;
}

/* Select2 styling */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: var(--space-3) var(--space-4);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: var(--space-3);
}

/* Order Summary Edit Link */
.order-summary__edit {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-decoration: none;
}

.order-summary__edit:hover {
  color: var(--color-secondary-hover);
}

/* Payment method box description — reset, styled via .payment-method__description */
.payment-method .payment_box {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Terms checkbox */
.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--space-4);
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.woocommerce-form__label-for-checkbox input {
  margin-top: 3px;
  accent-color: var(--color-secondary);
}

.woocommerce-form__label-for-checkbox a {
  color: var(--color-secondary);
}

/* Clean up terms checkbox area */
.checkout-submit__terms .form-row {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkout-submit__terms .form-row::before,
.checkout-submit__terms .form-row::after {
  display: none;
}

/* Hide dotted underline on required asterisk */
.checkout-submit__terms abbr.required {
  text-decoration: none;
  border-bottom: none;
}

/* ========================================
   CART ACTIONS
   ======================================== */

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-100);
}

/* ========================================
   CHECKOUT - HIDE DUPLICATE ELEMENTS
   ======================================== */

/* Hide duplicate notes field */
#order_comments_field,
.woocommerce-additional-fields__field-wrapper:empty,
.woocommerce-additional-fields h3 {
  display: none !important;
}

/* Hide country selector (Poland only) */
#billing_country_field,
#shipping_country_field,
.woocommerce-billing-fields__field-wrapper .country_select,
.woocommerce-shipping-fields__field-wrapper .country_select {
  display: none !important;
}

/* Hide all placeholders completely - use floating labels only */
/* Exception: #coupon_code keeps visible placeholder */
.form-row input:not(#coupon_code)::placeholder,
.form-row textarea::placeholder,
.woocommerce-checkout input:not(#coupon_code)::placeholder,
.woocommerce-checkout textarea::placeholder,
.woocommerce input:not(#coupon_code)::placeholder,
.woocommerce textarea::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

/* Also hide webkit/moz specific placeholders */
.woocommerce-checkout input:not(#coupon_code)::-webkit-input-placeholder,
.woocommerce-checkout textarea::-webkit-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.woocommerce-checkout input:not(#coupon_code)::-moz-placeholder,
.woocommerce-checkout textarea::-moz-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.woocommerce-checkout input:not(#coupon_code):-ms-input-placeholder,
.woocommerce-checkout textarea:-ms-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

/* Exclude checkbox and radio labels from floating */
.form-row.create-account label,
.woocommerce-form__label-for-checkbox {
  position: static !important;
  transform: none !important;
  background: transparent !important;
  font-size: var(--text-sm) !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

/* Billing/Shipping section titles */
.woocommerce-checkout h3#ship-to-different-address {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.woocommerce-checkout h3#ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  cursor: pointer;
}

.woocommerce-checkout h3#ship-to-different-address input {
  accent-color: var(--color-secondary);
}

/* Place order button styling */
#place_order {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: var(--border-3) solid var(--color-dark);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-brutal-md);
}

#place_order:hover {
  background: var(--color-primary-hover);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal-lg);
}

#place_order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Payment methods styling */
.payment-methods {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-method {
  margin-bottom: var(--space-3);
  background: var(--color-gray-50);
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.payment-method:hover {
  border-color: var(--color-secondary);
}

.payment-method__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  width: 100%;
}

.payment-method__radio {
  accent-color: var(--color-secondary);
  flex-shrink: 0;
}

/* Selected state */
.payment-method:has(input:checked) {
  border-color: var(--color-secondary);
  background: var(--color-secondary-light);
}

.payment-method__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.payment-method img {
  max-height: 24px;
  width: auto;
}

.payment-method__description {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.payment-method__description p {
  margin: 0;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
  width: 100%;
  margin-bottom: var(--space-4);
  table-layout: fixed;
  word-wrap: break-word;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.woocommerce-checkout-review-order-table th {
  font-weight: var(--font-semibold);
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  border-bottom: none;
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

/* Coupon form */
.checkout_coupon {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.checkout_coupon input[type="text"] {
  flex: 1;
}

.checkout_coupon button {
  padding: var(--space-3) var(--space-4);
  background: var(--color-dark);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: var(--transition-colors);
}

.checkout_coupon button:hover {
  background: var(--color-secondary);
}

/* ========================================
   HIDE DUPLICATE SHIPPING SECTIONS
   ======================================== */

/* Hide second shipping package (duplicates) */
.shipping-package ~ .shipping-package,
.woocommerce-shipping-totals ~ .woocommerce-shipping-totals,
tr.shipping ~ tr.shipping {
  display: none !important;
}

/* ========================================
   WOOCOMMERCE NOTICES - PREVENT GRID BREAK
   ======================================== */

/* WooCommerce notices inside checkout grid must span full width */
.checkout-page > .woocommerce-notices-wrapper,
.checkout-page > .woocommerce-error,
.checkout-page > .woocommerce-message,
.checkout-page > .woocommerce-info,
.checkout-page > .woocommerce-NoticeGroup,
.checkout-page > ul.woocommerce-error,
.checkout-page > ul.woocommerce-message {
  grid-column: 1 / -1;
}

/* ========================================
   THANK YOU PAGE - DEFAULT WOOCOMMERCE OUTPUT
   ======================================== */

/* Order Details (from woocommerce_thankyou hook) */
.woocommerce-order-details {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

.woocommerce-order-details__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-2) solid var(--color-dark);
}

/* Order Details Table */
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-table--order-details thead th {
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce-table--order-details tbody .product-name {
  font-weight: var(--font-medium);
}

.woocommerce-table--order-details tbody .product-name a {
  color: var(--color-dark);
  text-decoration: none;
}

.woocommerce-table--order-details tbody .product-name a:hover {
  color: var(--color-secondary);
}

.woocommerce-table--order-details tfoot th {
  font-weight: var(--font-medium);
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  border-bottom: none;
  padding-top: var(--space-4);
}

/* Customer Details (Billing/Shipping addresses) */
.woocommerce-customer-details {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

.woocommerce-customer-details .woocommerce-column {
  margin-bottom: var(--space-6);
}

.woocommerce-customer-details .woocommerce-column:last-child {
  margin-bottom: 0;
}

.woocommerce-customer-details .woocommerce-column__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.woocommerce-customer-details address {
  font-style: normal;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.woocommerce-customer-details address p {
  margin: 0 0 var(--space-1);
}

/* Two column layout for addresses on larger screens */
@media (min-width: 768px) {
  .woocommerce-customer-details .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .woocommerce-customer-details .col2-set .woocommerce-column {
    margin-bottom: 0;
  }
}
/**
 * Lagano WooCommerce - My Account
 *
 * Styles for login, register, and account dashboard.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   ACCOUNT PAGE WRAPPER
   ======================================== */

.account-page {
  padding: var(--space-8) 0 var(--space-16);
  min-height: 60vh;
}

.account-page__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  text-align: center;
  margin-bottom: var(--space-8);
}

/* ========================================
   ACCOUNT FORMS CONTAINER
   ======================================== */

.account-forms {
  max-width: 480px;
  margin: 0 auto;
}

.account-forms--dual {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 960px;
}

@media (min-width: 768px) {
  .account-forms--dual {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-8);
  }
}

/* ========================================
   ACCOUNT FORM CARD
   ======================================== */

.account-form {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

@media (min-width: 768px) {
  .account-form {
    padding: var(--space-8);
  }
}

.account-form__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.account-form__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-brutal-sm);
}

.account-form__icon--secondary {
  background: var(--color-secondary-light);
}

.account-form__icon svg {
  color: var(--color-dark);
}

.account-form__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.account-form__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.form-group {
  margin-bottom: var(--space-4);
}

.form-group--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--color-secondary);
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

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

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
}

.form-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-checkbox__mark {
  width: 20px;
  height: 20px;
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-default);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
}

.form-checkbox input:checked + .form-checkbox__mark {
  background: var(--color-primary);
}

.form-checkbox input:checked + .form-checkbox__mark::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid var(--color-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.form-checkbox__label {
  color: var(--color-text);
}

/* Link */
.form-link {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
}

.form-link:hover {
  color: var(--color-secondary-hover);
  text-decoration: underline;
}

/* Info box */
.form-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-light);
  border: var(--border-1) solid var(--color-info);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.form-info svg {
  flex-shrink: 0;
  color: var(--color-info);
  margin-top: 2px;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn--full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

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

.btn--secondary:hover {
  background: var(--color-secondary-hover);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-md);
}

/* ========================================
   DIVIDER
   ======================================== */

.account-forms__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

@media (max-width: 767px) {
  .account-forms__divider {
    padding: var(--space-2) 0;
  }

  .account-forms__divider::before,
  .account-forms__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
  }

  .account-forms__divider span {
    padding: 0 var(--space-4);
  }
}

@media (min-width: 768px) {
  .account-forms__divider {
    flex-direction: column;
    padding: 0 var(--space-4);
  }

  .account-forms__divider::before,
  .account-forms__divider::after {
    content: '';
    width: 1px;
    flex: 1;
    background: var(--color-border-light);
  }

  .account-forms__divider span {
    padding: var(--space-4) 0;
  }
}

/* ========================================
   BENEFITS LIST
   ======================================== */

.account-form__benefits {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-1) solid var(--color-border-light);
}

.account-form__benefits h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.account-form__benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.account-form__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

.account-form__benefits li svg {
  flex-shrink: 0;
  color: var(--color-success);
}

/* ========================================
   WOOCOMMERCE NOTICES (within account page)
   ======================================== */

.account-page .woocommerce-notices-wrapper {
  max-width: 960px;
  margin: 0 auto var(--space-6);
}

.account-page .woocommerce-error,
.account-page .woocommerce-message,
.account-page .woocommerce-info {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: var(--border-2) solid;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.account-page .woocommerce-error {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error-dark);
}

.account-page .woocommerce-message {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

.account-page .woocommerce-info {
  background: var(--color-info-light);
  border-color: var(--color-info);
  color: var(--color-text);
}

/* ========================================
   MY ACCOUNT DASHBOARD (when logged in)
   ======================================== */

.woocommerce-MyAccount-navigation {
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-8);
    max-width: var(--max-w-6xl);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
  }

  .woocommerce-MyAccount-navigation {
    margin-bottom: 0;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-brutal-sm);
}

.woocommerce-MyAccount-navigation li {
  border-bottom: var(--border-1) solid var(--color-border-light);
}

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

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: var(--transition-all);
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-primary-light);
  color: var(--color-dark);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-primary);
  font-weight: var(--font-bold);
}

.woocommerce-MyAccount-content {
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-brutal-sm);
}

@media (min-width: 768px) {
  .woocommerce-MyAccount-content {
    padding: var(--space-8);
  }
}

/* Tables in account */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-1) solid var(--color-border-light);
}

.woocommerce-MyAccount-content th {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-gray-50);
}

/* Address cards */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .woocommerce-Addresses {
    grid-template-columns: repeat(2, 1fr);
  }
}

.woocommerce-Address {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.woocommerce-Address-title h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0;
}

.woocommerce-Address-title .edit {
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

/* ========================================
   DASHBOARD - WELCOME MESSAGE
   ======================================== */

.woocommerce-MyAccount-content > p:first-child {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.woocommerce-MyAccount-content > p:first-child strong {
  color: var(--color-dark);
  font-weight: var(--font-bold);
}

.woocommerce-MyAccount-content > p:first-child a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: var(--transition-colors);
}

.woocommerce-MyAccount-content > p:first-child a:hover {
  text-decoration: underline;
}

/* Dashboard links */
.woocommerce-MyAccount-content > p a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--font-medium);
}

.woocommerce-MyAccount-content > p a:hover {
  text-decoration: underline;
}

/* ========================================
   ORDERS LIST PAGE
   ======================================== */

.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.woocommerce-orders-table thead {
  display: none;
}

@media (min-width: 768px) {
  .woocommerce-orders-table thead {
    display: table-header-group;
  }
}

.woocommerce-orders-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-gray-50);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.woocommerce-orders-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-1) solid var(--color-border-light);
  vertical-align: middle;
}

.woocommerce-orders-table tbody tr {
  display: block;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-gray-50);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .woocommerce-orders-table tbody tr {
    display: table-row;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
}

.woocommerce-orders-table tbody tr:hover {
  background: var(--color-gray-50);
}

.woocommerce-orders-table td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: none;
}

.woocommerce-orders-table td::before {
  content: attr(data-title);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .woocommerce-orders-table td {
    display: table-cell;
    padding: var(--space-4);
    border-bottom: var(--border-1) solid var(--color-border-light);
  }

  .woocommerce-orders-table td::before {
    display: none;
  }
}

/* Order number */
.woocommerce-orders-table__cell-order-number a {
  color: var(--color-dark);
  font-weight: var(--font-bold);
  text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover {
  color: var(--color-secondary);
}

/* Order status badges */
.woocommerce-orders-table__cell-order-status {
  font-weight: var(--font-medium);
}

/* Order total */
.woocommerce-orders-table__cell-order-total {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
}

/* Order actions */
.woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

.woocommerce-orders-table__cell-order-actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-default);
  text-decoration: none;
  transition: var(--transition-all);
  margin-left: var(--space-2);
}

.woocommerce-orders-table__cell-order-actions a:first-child {
  margin-left: 0;
}

.woocommerce-orders-table__cell-order-actions a:hover {
  background: var(--color-primary-hover);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--color-dark);
}

/* No orders message */
.woocommerce-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-info-light);
  border: var(--border-2) solid var(--color-info);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--text-base);
}

.woocommerce-info::before {
  content: '';
  display: none;
}

.woocommerce-info a.button {
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-default);
  text-decoration: none;
  transition: var(--transition-all);
}

.woocommerce-info a.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   SINGLE ORDER VIEW
   ======================================== */

.woocommerce-order-details {
  margin-bottom: var(--space-6);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-2) solid var(--color-dark);
}

/* Order details table */
.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.woocommerce-table--order-details thead th {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-gray-50);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.woocommerce-table--order-details tbody td {
  border-bottom: var(--border-1) solid var(--color-border-light);
}

.woocommerce-table--order-details .product-name {
  font-weight: var(--font-medium);
}

.woocommerce-table--order-details .product-name a {
  color: var(--color-dark);
  text-decoration: none;
}

.woocommerce-table--order-details .product-name a:hover {
  color: var(--color-secondary);
}

.woocommerce-table--order-details .product-quantity {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.woocommerce-table--order-details tfoot th {
  font-weight: var(--font-medium);
  text-align: left;
}

.woocommerce-table--order-details tfoot td {
  text-align: right;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  padding-top: var(--space-4);
  border-top: var(--border-2) solid var(--color-dark);
  border-bottom: none;
}

/* Customer details in order view */
.woocommerce-customer-details {
  margin-top: var(--space-6);
}

.woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .woocommerce-columns--addresses {
    grid-template-columns: repeat(2, 1fr);
  }
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

.woocommerce-column--billing-address address,
.woocommerce-column--shipping-address address {
  font-style: normal;
  line-height: var(--leading-relaxed);
}

.woocommerce-column--billing-address address p,
.woocommerce-column--shipping-address address p {
  margin: 0 0 var(--space-1);
}

/* Order again button */
.order-again .button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--transition-all);
  margin-top: var(--space-4);
}

.order-again .button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   EDIT ACCOUNT FORM
   ======================================== */

.woocommerce-EditAccountForm {
  max-width: 600px;
}

.woocommerce-EditAccountForm .form-row {
  margin-bottom: var(--space-4);
}

.woocommerce-EditAccountForm label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.woocommerce-EditAccountForm label .required {
  color: var(--color-secondary);
}

.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.woocommerce-EditAccountForm input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

/* Fieldset for password change */
.woocommerce-EditAccountForm fieldset {
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
  background: var(--color-gray-50);
}

.woocommerce-EditAccountForm legend {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  padding: 0 var(--space-2);
}

/* Save button */
.woocommerce-EditAccountForm .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  margin-top: var(--space-4);
}

.woocommerce-EditAccountForm .woocommerce-Button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   EDIT ADDRESSES PAGE
   ======================================== */

.woocommerce-address-fields .form-row {
  margin-bottom: var(--space-4);
}

.woocommerce-address-fields label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.woocommerce-address-fields label .required {
  color: var(--color-secondary);
}

.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.woocommerce-address-fields input:focus,
.woocommerce-address-fields select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

.woocommerce-address-fields select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231c1c2b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

/* Two column layout for name fields */
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
  width: 100%;
}

@media (min-width: 640px) {
  .woocommerce-address-fields .form-row-first,
  .woocommerce-address-fields .form-row-last {
    display: inline-block;
    width: calc(50% - var(--space-2));
  }

  .woocommerce-address-fields .form-row-first {
    margin-right: var(--space-2);
  }

  .woocommerce-address-fields .form-row-last {
    margin-left: var(--space-2);
  }
}

/* Save address button */
.woocommerce-address-fields button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  margin-top: var(--space-4);
}

.woocommerce-address-fields button[type="submit"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   DOWNLOADS PAGE
   ======================================== */

.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-table--order-downloads thead {
  display: none;
}

@media (min-width: 768px) {
  .woocommerce-table--order-downloads thead {
    display: table-header-group;
  }
}

.woocommerce-table--order-downloads th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-gray-50);
  border-bottom: var(--border-2) solid var(--color-dark);
}

.woocommerce-table--order-downloads tbody tr {
  display: block;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-gray-50);
  border: var(--border-1) solid var(--color-border-light);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .woocommerce-table--order-downloads tbody tr {
    display: table-row;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
}

.woocommerce-table--order-downloads td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: none;
}

.woocommerce-table--order-downloads td::before {
  content: attr(data-title);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .woocommerce-table--order-downloads td {
    display: table-cell;
    padding: var(--space-4);
    border-bottom: var(--border-1) solid var(--color-border-light);
  }

  .woocommerce-table--order-downloads td::before {
    display: none;
  }
}

.woocommerce-table--order-downloads .download-product a {
  color: var(--color-dark);
  font-weight: var(--font-medium);
  text-decoration: none;
}

.woocommerce-table--order-downloads .download-product a:hover {
  color: var(--color-secondary);
}

.woocommerce-table--order-downloads .download-file a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  background: var(--color-secondary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-default);
  text-decoration: none;
  transition: var(--transition-all);
}

.woocommerce-table--order-downloads .download-file a:hover {
  background: var(--color-secondary-hover);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--color-dark);
}

/* ========================================
   LOST PASSWORD / RESET PASSWORD
   ======================================== */

.woocommerce-ResetPassword {
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-brutal);
}

@media (min-width: 768px) {
  .woocommerce-ResetPassword {
    padding: var(--space-8);
  }
}

.woocommerce-ResetPassword p {
  margin-bottom: var(--space-4);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.woocommerce-ResetPassword .form-row {
  margin-bottom: var(--space-4);
}

.woocommerce-ResetPassword label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="email"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.woocommerce-ResetPassword input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

.woocommerce-ResetPassword .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
}

.woocommerce-ResetPassword .woocommerce-Button:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-sm);
}

/* ========================================
   NAVIGATION ICONS
   ======================================== */

.woocommerce-MyAccount-navigation li a::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* Wishlist icon */
.woocommerce-MyAccount-navigation li a[href*="wish"] a::before,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--woo-wish-list a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c2b' stroke-width='2'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* ========================================
   WOOCOMMERCE BUTTONS (Generic)
   ======================================== */

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-primary);
  color: var(--color-dark);
  background: var(--color-primary);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-all);
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-brutal-sm);
}

/* Alt/outline button style */
.woocommerce-MyAccount-content .button.alt,
.woocommerce-MyAccount-content .woocommerce-Button--secondary {
  background: var(--color-white);
  color: var(--color-dark);
}

/* ========================================
   MOBILE NAVIGATION (Horizontal scroll)
   ======================================== */

@media (max-width: 767px) {
  .woocommerce-account.logged-in .woocommerce {
    padding: var(--space-4) var(--space-3);
  }

  .woocommerce-MyAccount-navigation {
    margin-bottom: var(--space-4);
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
  }

  .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }

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

  .woocommerce-MyAccount-navigation li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-xl);
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    text-align: center;
    min-height: 68px;
  }

  .woocommerce-MyAccount-navigation li a::before {
    width: 22px;
    height: 22px;
    opacity: 0.6;
  }

  .woocommerce-MyAccount-navigation li a:hover,
  .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
  }

  .woocommerce-MyAccount-navigation li.is-active a::before,
  .woocommerce-MyAccount-navigation li a:hover::before {
    filter: brightness(0) invert(1);
    opacity: 1;
  }

  /* Content area - lighter on mobile */
  .woocommerce-MyAccount-content {
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    background: var(--color-white);
  }

  /* Welcome message - cleaner */
  .woocommerce-MyAccount-content > p:first-child {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .woocommerce-MyAccount-content > p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
  }
}
/**
 * Lagano Pages - Contact
 *
 * Contact page styles.
 *
 * @package Lagano
 * @since 2.0.0
 */

/* ========================================
   PAGE HEADER CENTERED
   ======================================== */

.page-header--centered {
  text-align: center;
  margin-bottom: var(--space-10);
}

.page-header--centered .page-header__title {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
}

.page-header--centered .page-header__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* ========================================
   CONTACT PAGE LAYOUT
   ======================================== */

.contact-page {
  padding-bottom: var(--space-12);
}

/* ========================================
   CONTACT CARDS
   ======================================== */

.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 640px) {
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  text-align: center;
  transition: var(--transition-all);
}

.contact-card:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1);
  transform: translateY(-4px);
}

.contact-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border-radius: var(--radius-xl);
}

.contact-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.contact-card__text {
  font-size: var(--text-base);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.contact-card__text a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--font-semibold);
}

.contact-card__text a:hover {
  text-decoration: underline;
}

.contact-card__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========================================
   CONTACT FORM SECTION
   ======================================== */

.contact-form-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .contact-form-section {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-10);
  }
}

.contact-form-container {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

@media (min-width: 768px) {
  .contact-form-container {
    padding: var(--space-8);
  }
}

.contact-form__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.contact-form__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* Form Fields */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form__field {
  margin-bottom: var(--space-4);
}

.contact-form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.contact-form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-dark);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.contact-form__input::placeholder {
  color: var(--color-text-muted);
}

.contact-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 120px;
}

/* Consent checkbox */
.contact-form__consent {
  margin-top: var(--space-2);
}

.contact-form__checkbox-label {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  cursor: pointer;
}

.contact-form__checkbox-label input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-secondary);
}

.contact-form__checkbox-label a {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* Submit button */
.contact-form__submit {
  margin-top: var(--space-4);
  width: 100%;
}

@media (min-width: 640px) {
  .contact-form__submit {
    width: auto;
  }
}

/* ========================================
   FAQ SIDEBAR
   ======================================== */

.contact-faq {
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.contact-faq__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-gray-200);
}

.contact-faq__item {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.contact-faq__item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.contact-faq__question {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.contact-faq__answer {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.contact-faq__answer a {
  color: var(--color-secondary);
  text-decoration: underline;
}
/**
 * Lagano Pages - Legal
 *
 * Styles for legal pages (Regulamin, Privacy Policy, Returns).
 *
 * @package Lagano
 * @since 2.0.0
 */

/* ========================================
   NARROW CONTAINER
   ======================================== */

.container--narrow {
  max-width: 800px;
}

/* ========================================
   LEGAL HEADER
   ======================================== */

.legal-header {
  text-align: center;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: var(--space-8);
}

.legal-header__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .legal-header__title {
    font-size: var(--text-4xl);
  }
}

.legal-header__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ========================================
   LEGAL CONTENT LAYOUT
   ======================================== */

.legal-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .legal-content {
    grid-template-columns: 220px 1fr;
    gap: var(--space-10);
  }
}

/* ========================================
   TABLE OF CONTENTS
   ======================================== */

.legal-toc {
  position: sticky;
  top: 120px;
  align-self: start;
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

@media (max-width: 767px) {
  .legal-toc {
    position: static;
    order: 2;
  }
}

.legal-toc__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gray-200);
}

.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}

.legal-toc__list li {
  counter-increment: toc-counter;
  margin-bottom: var(--space-2);
}

.legal-toc__list a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color 0.2s;
}

.legal-toc__list a::before {
  content: counter(toc-counter) ".";
  color: var(--color-secondary);
  font-weight: var(--font-semibold);
  min-width: 20px;
}

.legal-toc__list a:hover {
  color: var(--color-secondary);
}

/* ========================================
   LEGAL ARTICLE
   ======================================== */

.legal-article {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.legal-section {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-100);
  scroll-margin-top: 120px;
}

.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.legal-section h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.legal-section h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.legal-section p {
  margin-bottom: var(--space-3);
}

.legal-section ul,
.legal-section ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.legal-section li {
  margin-bottom: var(--space-2);
}

.legal-section a {
  color: var(--color-secondary);
  text-decoration: underline;
}

.legal-section a:hover {
  color: var(--color-secondary-hover);
}

.legal-section strong {
  color: var(--color-dark);
}

/* ========================================
   HIGHLIGHT BOX (for Returns page)
   ======================================== */

.legal-highlight {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--color-secondary-light) 0%, rgba(124, 58, 237, 0.05) 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .legal-highlight {
    flex-direction: column;
    text-align: center;
  }
}

.legal-highlight__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .legal-highlight__icon {
    margin: 0 auto;
  }
}

.legal-highlight__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.legal-highlight__content p {
  color: var(--color-text);
  margin: 0;
}

/* ========================================
   STEPS (for Returns page)
   ======================================== */

.legal-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.legal-step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.legal-step__number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.legal-step__content h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  margin: 0 0 var(--space-1) 0;
}

.legal-step__content p {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}

/* ========================================
   COLUMNS (for Returns page)
   ======================================== */

.legal-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 640px) {
  .legal-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

.legal-column {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.legal-column h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  margin: 0 0 var(--space-3) 0;
}

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

.legal-column li {
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.legal-column li:last-child {
  border-bottom: none;
}

.legal-column--success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--color-success);
}

.legal-column--success h3 {
  color: var(--color-success-dark);
}

.legal-column--success svg {
  color: var(--color-success);
}

.legal-column--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error);
}

.legal-column--error h3 {
  color: var(--color-error);
}

.legal-column--error svg {
  color: var(--color-error);
}

/* ========================================
   ADDRESS BOX
   ======================================== */

.legal-address {
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  font-style: normal;
}

.legal-address p {
  margin: 0 0 var(--space-1) 0;
}

.legal-address p:last-child {
  margin: 0;
}
/**
 * Lagano Pages - Blog
 *
 * Blog listing and post styles.
 *
 * @package Lagano
 * @since 2.0.0
 */

/* ========================================
   BLOG HEADER
   ======================================== */

.blog-header {
  text-align: center;
  padding: var(--space-8) 0;
  margin-bottom: var(--space-8);
}

.blog-header__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.blog-header__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ========================================
   FEATURED POST
   ======================================== */

.blog-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  padding: var(--space-5);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
}

@media (min-width: 768px) {
  .blog-featured {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
    padding: var(--space-6);
  }
}

.blog-featured__image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/9;
}

.blog-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-featured__image:hover img {
  transform: scale(1.05);
}

.blog-featured__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.blog-featured__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.blog-featured__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.blog-featured__category {
  padding: var(--space-1) var(--space-2);
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.blog-featured__category:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.blog-featured__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
  .blog-featured__title {
    font-size: var(--text-3xl);
  }
}

.blog-featured__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.blog-featured__title a:hover {
  color: var(--color-secondary);
}

.blog-featured__excerpt {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* ========================================
   BLOG LAYOUT
   ======================================== */

.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr 300px;
    gap: var(--space-10);
  }
}

/* ========================================
   BLOG GRID
   ======================================== */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   BLOG CARD
   ======================================== */

.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition-all);
}

.blog-card:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1);
  transform: translateY(-4px);
}

.blog-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.05);
}

.blog-card__content {
  padding: var(--space-4);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.blog-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.blog-card__category {
  padding: 2px var(--space-2);
  background: var(--color-gray-100);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.blog-card__category:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.blog-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.blog-card__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--color-secondary);
}

.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-secondary);
  text-decoration: none;
}

.blog-card__link svg {
  transition: transform 0.2s ease;
}

.blog-card__link:hover svg {
  transform: translateX(4px);
}

/* ========================================
   BLOG SIDEBAR
   ======================================== */

.blog-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .blog-sidebar {
    display: block;
  }
}

.blog-widget {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.blog-widget__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-gray-100);
}

/* Categories List */
.blog-widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-widget__item {
  margin-bottom: var(--space-2);
}

.blog-widget__item:last-child {
  margin-bottom: 0;
}

.blog-widget__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.blog-widget__item a:hover {
  background: var(--color-gray-50);
  color: var(--color-secondary);
}

.blog-widget__count {
  padding: 2px var(--space-2);
  background: var(--color-gray-100);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}

/* Recent Posts */
.blog-widget__recent {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-widget__recent-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.blog-widget__recent-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog-widget__recent-item:first-child {
  padding-top: 0;
}

.blog-widget__recent-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.blog-widget__recent-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-widget__recent-content {
  flex: 1;
  min-width: 0;
}

.blog-widget__recent-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-dark);
  text-decoration: none;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.blog-widget__recent-title:hover {
  color: var(--color-secondary);
}

.blog-widget__recent-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* CTA Widget */
.blog-widget--cta {
  background: linear-gradient(135deg, var(--color-secondary-light) 0%, rgba(124, 58, 237, 0.05) 100%);
  border-color: var(--color-secondary);
}

.blog-widget--cta p {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* ========================================
   BLOG PAGINATION
   ======================================== */

.blog-pagination {
  margin-top: var(--space-8);
}

.blog-pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-pagination__item a,
.blog-pagination__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-pagination__item a:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.blog-pagination__item span.current {
  background: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

/* ========================================
   BLOG EMPTY STATE
   ======================================== */

.blog-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}

.blog-empty svg {
  color: var(--color-gray-300);
  margin-bottom: var(--space-4);
}

.blog-empty h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.blog-empty p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

/* ========================================
   POSTS GRID (from index.php)
   ======================================== */

.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

@media (min-width: 640px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition-all);
}

.post-card:hover {
  border-color: var(--color-secondary);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.1);
}

.post-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__content {
  padding: var(--space-4);
}

.post-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.post-card__title a {
  color: var(--color-dark);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-secondary);
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* ========================================
   SINGLE POST
   ======================================== */

.single-post {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-8) 0;
}

/* Header */
.single-post__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.single-post__categories {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.single-post__category {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-colors);
}

.single-post__category:hover {
  background: var(--color-secondary-dark, #6d28d9);
  color: var(--color-white);
}

.single-post__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-dark);
}

.single-post__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.single-post__meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.single-post__meta svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* Thumbnail */
.single-post__thumbnail {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.single-post__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.single-post__content {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--color-text);
}

.single-post__content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: var(--space-8) 0 var(--space-4);
  color: var(--color-dark);
}

.single-post__content h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: var(--space-6) 0 var(--space-3);
  color: var(--color-dark);
}

.single-post__content p {
  margin-bottom: var(--space-4);
}

.single-post__content ul,
.single-post__content ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.single-post__content li {
  margin-bottom: var(--space-2);
}

.single-post__content blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-secondary);
  background: var(--color-gray-50);
  font-style: italic;
  color: var(--color-text-muted);
}

.single-post__content a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-post__content a:hover {
  color: var(--color-secondary-dark, #6d28d9);
}

.single-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
}

/* Tags */
.single-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}

.single-post__tags-label {
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.single-post__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-gray-100);
  color: var(--color-text);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-colors);
}

.single-post__tag:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* Author Box */
.single-post__author-box {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-radius: var(--radius-xl);
}

.single-post__author-avatar img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.single-post__author-info {
  flex: 1;
}

.single-post__author-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.single-post__author-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
  color: var(--color-dark);
}

.single-post__author-bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Post Navigation */
.single-post__navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-gray-200);
}

.single-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--transition-all);
}

.single-post__nav-link:hover {
  background: var(--color-gray-100);
}

.single-post__nav-link--next {
  text-align: right;
}

.single-post__nav-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.single-post__nav-link--next .single-post__nav-label {
  justify-content: flex-end;
}

.single-post__nav-label svg {
  width: 14px;
  height: 14px;
}

.single-post__nav-title {
  font-weight: var(--font-semibold);
  color: var(--color-dark);
  font-size: var(--text-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 767px) {
  .single-post__title {
    font-size: var(--text-2xl);
  }

  .single-post__content {
    font-size: var(--text-base);
  }

  .single-post__author-box {
    flex-direction: column;
    text-align: center;
  }

  .single-post__author-avatar {
    display: flex;
    justify-content: center;
  }

  .single-post__navigation {
    grid-template-columns: 1fr;
  }

  .single-post__nav-link--next {
    text-align: left;
  }

  .single-post__nav-link--next .single-post__nav-label {
    justify-content: flex-start;
  }
}
/**
 * Lagano Pages - About
 *
 * About Us page styles.
 *
 * @package Lagano
 * @since 2.0.0
 */

/* ========================================
   ABOUT HERO
   ======================================== */

.about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-10) 0;
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .about-hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12);
  }
}

.about-hero__content {
  text-align: center;
}

@media (min-width: 768px) {
  .about-hero__content {
    text-align: left;
  }
}

.about-hero__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .about-hero__title {
    font-size: var(--text-5xl);
  }
}

.about-hero__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.about-hero__image {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-secondary-light) 0%, rgba(250, 220, 0, 0.2) 100%);
}

.about-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   ABOUT SECTION
   ======================================== */

.about-section {
  margin-bottom: var(--space-12);
}

.about-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .about-section__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.about-section__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-5);
}

.about-section__content p {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* Values Grid */
.about-section__values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .about-section__values {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-section__values {
    grid-template-columns: 1fr;
  }
}

.about-value {
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-align: center;
}

@media (min-width: 1024px) {
  .about-value {
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
  }
}

.about-value__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary-light);
  color: var(--color-secondary);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-3);
}

@media (min-width: 1024px) {
  .about-value__icon {
    margin: 0;
    grid-row: span 2;
  }
}

.about-value__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-1);
}

.about-value__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}

/* ========================================
   ABOUT FEATURES
   ======================================== */

.about-features {
  margin-bottom: var(--space-12);
  padding: var(--space-10);
  background: var(--color-gray-50);
  border-radius: var(--radius-2xl);
}

.about-features__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  text-align: center;
  margin-bottom: var(--space-8);
}

.about-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .about-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-feature {
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: var(--transition-all);
}

.about-feature:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.about-feature__number {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-secondary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.about-feature__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.about-feature__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0;
}

/* ========================================
   ABOUT STATS
   ======================================== */

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-secondary) 0%, #8b5cf6 100%);
  border-radius: var(--radius-2xl);
}

@media (min-width: 768px) {
  .about-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.about-stat {
  text-align: center;
  padding: var(--space-4);
}

.about-stat__number {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
  line-height: 1;
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .about-stat__number {
    font-size: var(--text-4xl);
  }
}

.about-stat__label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   ABOUT CTA
   ======================================== */

.about-cta {
  text-align: center;
  padding: var(--space-10);
  margin-bottom: var(--space-12);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
}

.about-cta__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.about-cta__text {
  font-size: var(--text-lg);
  color: var(--color-text);
  max-width: 600px;
  margin: 0 auto var(--space-6);
}

.about-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
/**
 * Lagano Pages - Brands
 *
 * Styles for the brands/publishers listing page.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   BRANDS PAGE
   ======================================== */

.brands-page {
  padding: var(--space-8) 0 var(--space-16);
}

.brands-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .brands-page__title {
    font-size: var(--text-3xl);
  }
}

/* ========================================
   CONTROLS
   ======================================== */

.brands-page__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.brands-page__search {
  flex: 1;
  min-width: 200px;
  max-width: 500px;
}

.brands-page__search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-brutal-sm);
  transition: var(--transition-all);
}

.brands-page__search-input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-light);
}

.brands-page__search-input::placeholder {
  color: var(--color-text-light);
}

.brands-page__counter {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}

/* ========================================
   BRANDS GRID
   ======================================== */

.brands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .brands-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .brands-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .brands-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1280px) {
  .brands-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========================================
   BRAND CARD
   ======================================== */

.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-4);
  background: var(--color-white);
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: var(--transition-all);
}

.brand-card:hover {
  border-color: var(--color-dark);
  box-shadow: var(--shadow-brutal-sm);
  transform: translate(-2px, -2px);
}

.brand-card__image {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.brand-card__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: 1;
  transition: var(--transition-all);
}

.brand-card:hover .brand-card__image img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.brand-card__placeholder {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-100);
  border: var(--border-2) solid var(--color-border-light);
  border-radius: var(--radius-lg);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.brand-card:hover .brand-card__placeholder {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.brand-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-align: center;
  line-height: var(--leading-tight);
}

.brand-card:hover .brand-card__name {
  color: var(--color-dark);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.brands-page__empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
/**
 * Lagano Utilities - Spacing
 *
 * Margin and padding utility classes.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   MARGIN
   ======================================== */

/* Margin - All sides */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-auto { margin: auto; }

/* Margin - Horizontal */
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin - Vertical */
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* Margin - Top */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* Margin - Bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* Margin - Left */
.ml-0 { margin-left: var(--space-0); }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

/* Margin - Right */
.mr-0 { margin-right: var(--space-0); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }

/* ========================================
   PADDING
   ======================================== */

/* Padding - All sides */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Padding - Horizontal */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

/* Padding - Vertical */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* Padding - Top */
.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.pt-8 { padding-top: var(--space-8); }

/* Padding - Bottom */
.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-8 { padding-bottom: var(--space-8); }

/* Padding - Left */
.pl-0 { padding-left: var(--space-0); }
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }

/* Padding - Right */
.pr-0 { padding-right: var(--space-0); }
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }

/* ========================================
   GAP (for flex/grid)
   ======================================== */

.gap-0 { gap: var(--space-0); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ========================================
   SPACE BETWEEN (children)
   ======================================== */

.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }

.space-x-2 > * + * { margin-left: var(--space-2); }
.space-x-3 > * + * { margin-left: var(--space-3); }
.space-x-4 > * + * { margin-left: var(--space-4); }
/**
 * Lagano Utilities - Display
 *
 * Display, visibility, and responsive utilities.
 *
 * @package Lagano
 * @since 1.0.0
 */

/* ========================================
   DISPLAY
   ======================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* ========================================
   VISIBILITY
   ======================================== */

.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   POSITION
   ======================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* Position values */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.inset-0 { inset: 0; }

/* ========================================
   Z-INDEX
   ======================================== */

.z-0 { z-index: var(--z-0); }
.z-10 { z-index: var(--z-10); }
.z-20 { z-index: var(--z-20); }
.z-30 { z-index: var(--z-30); }
.z-40 { z-index: var(--z-40); }
.z-50 { z-index: var(--z-50); }

/* ========================================
   OVERFLOW
   ======================================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ========================================
   WIDTH & HEIGHT
   ======================================== */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-screen { width: 100vw; }
.max-w-full { max-width: 100%; }
.min-w-0 { min-width: 0; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ========================================
   BORDER RADIUS
   ======================================== */

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-default); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ========================================
   BACKGROUNDS
   ======================================== */

.bg-white { background-color: var(--color-white); }
.bg-dark { background-color: var(--color-dark); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-transparent { background-color: transparent; }

/* ========================================
   BORDERS
   ======================================== */

.border { border: var(--border-1) solid var(--color-border); }
.border-2 { border: var(--border-2) solid var(--color-border); }
.border-3 { border: var(--border-3) solid var(--color-border); }
.border-0 { border: 0; }

.border-dark { border-color: var(--color-dark); }
.border-light { border-color: var(--color-border-light); }
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

.border-t { border-top: var(--border-1) solid var(--color-border); }
.border-b { border-bottom: var(--border-1) solid var(--color-border); }
.border-l { border-left: var(--border-1) solid var(--color-border); }
.border-r { border-right: var(--border-1) solid var(--color-border); }

/* ========================================
   SHADOWS
   ======================================== */

.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-default); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-brutal { box-shadow: var(--shadow-brutal); }
.shadow-brutal-lg { box-shadow: var(--shadow-brutal-lg); }

/* ========================================
   CURSOR
   ======================================== */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ========================================
   POINTER EVENTS
   ======================================== */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ========================================
   USER SELECT
   ======================================== */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ========================================
   RESPONSIVE DISPLAY
   ======================================== */

/* Hide on mobile */
.hide-mobile {
  display: block;
}

/* Show only on mobile */
.show-mobile {
  display: none;
}

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

  .show-mobile {
    display: block;
  }
}

/* Hide on tablet and below */
@media (max-width: 1023px) {
  .hide-tablet {
    display: none;
  }
}

/* Show only on desktop */
@media (min-width: 1024px) {
  .show-desktop {
    display: block;
  }
}

/* ========================================
   TRANSITIONS
   ======================================== */

.transition { transition: var(--transition-all); }
.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-none { transition: none; }

/* ========================================
   OPACITY
   ======================================== */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ========================================
   TEXT UTILITIES
   ======================================== */

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text colors */
.text-white { color: var(--color-white); }
.text-dark { color: var(--color-dark); }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }

/* Text sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* Font weight */
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* Text transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Whitespace */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }

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