/* TWO A - Theme CSS
   Brand: TWO A (Ukrainian Fashion Brand)
   Design: Minimalist, Black & White, Elegant
   Font: Ysabeau Office
*/

/* ============================================
   CSS VARIABLES & DESIGN TOKENS
   ============================================ */
:root {
  /* Colors - WCAG AA accessible (4.5:1 contrast minimum for text) */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #8a8a8a; /* Darkened from #a3a3a3 for WCAG AA (4.5:1) */
  --color-gray-500: #666666; /* Darkened from #737373 for WCAG AA (5.74:1) */
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  
  /* Non-text decorative grays (original values for borders/backgrounds) */
  --color-gray-border: #a3a3a3;
  --color-gray-placeholder: #a3a3a3;
  
  /* Status Colors */
  /* --color-success: #22c55e; */
  --color-success: #404040;
  --color-error: #ef4444;
  --color-warning: #404040;
  /* --color-warning: #f59e0b; */
  --color-info: #404040;
  
  /* Typography - Ysabeau Office (Figma: 14px, 18px line-height, weight 200) */
  --font-primary: 'Ysabeau Office', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Ysabeau Office', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --line-height-base: 18px;
  
  /* Font Sizes - Based on Figma */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-hero: clamp(48px, 10vw, 96px);
  
  /* Spacing - Based on Figma */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  
  /* Layout */
  --container-max: 1400px;
  --container-padding: 175px;
  --container-padding-mobile: 32px;
  --header-height: 44px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.15em;
  --tracking-button: 0.2em;
  
  /* Button Design Tokens (Figma: 353×52px, 14px, weight 500, 0.2em) */
  --btn-height: 52px;
  --btn-width: 353px;
  --btn-font-size: 14px;
  --btn-font-weight: 500;
  --btn-letter-spacing: 0.2em;
  --btn-border-width: 1px;
  
  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 200;
  line-height: var(--line-height-base);
  letter-spacing: 0;
  color: var(--color-black);
  background-color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.7;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/*
 * iOS Safari zooms the viewport when a focused control computes to font-size < 16px,
 * and the scale often does not reset after blur. Use at least 16px on small screens
 * for real text fields (not buttons/checkboxes/radios).
 * Avoid fixing this via viewport maximum-scale — it blocks user zoom (a11y).
 */
@media screen and (max-width: 1023px) {
  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]),
  textarea,
  select,
  .form-input,
  .form-input--textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select {
    font-size: max(16px, 1rem);
  }

  /* SelectWoo / Select2: search box in dropdown is an <input> — same 16px rule */
  .select2-container .select2-search--dropdown .select2-search__field {
    font-size: max(16px, 1rem);
  }

  /* Closed single-select shows text in __rendered; keep size consistent with fields */
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: max(16px, 1rem);
  }

  /* Higher-specificity theme overrides (checkout / account) must not stay below 16px on iOS */
  body.checkout-page .checkout-field--select .select2-container--default .select2-selection--single .select2-selection__rendered,
  .account-section .edit-address .select2-container--default .select2-selection--single .select2-selection__rendered,
  body.checkout-page .checkout-field--select .select2-dropdown,
  body.checkout-page .select2-dropdown,
  body.twoa-account-edit-address .select2-dropdown {
    font-size: max(16px, 1rem);
  }
}

/* ============================================
   FOCUS STYLES (Accessibility)
   ============================================ */
/* Remove default outline and add custom focus-visible styles */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Skip link focus */
.visually-hidden:focus {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  width: auto;
  height: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-black);
  color: var(--color-white);
  clip: auto;
  white-space: nowrap;
  z-index: 99999;
}

/* Button focus states */
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.btn--primary:focus-visible {
  outline-color: var(--color-black);
}

/* Link focus states */
a:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Form input focus states - no border/outline/box-shadow on focus */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-gray-300) !important;
}

/* Navigation focus */
.nav-link:focus-visible,
.header__icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

@media (min-width: 1024px) {
  .container {
    /* padding: 0 var(--container-padding); */
  }
}

.container--narrow {
  max-width: 900px;
  margin: 0 auto;
}

.container--wide {
  max-width: 1600px;
}

.container--full {
  max-width: 100%;
  padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
  .container--full {
    padding: 0 var(--container-padding);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

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

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

/* Page Content */
.page-content {
  padding: var(--spacing-lg) 0 var(--spacing-2xl) !important;
}

@media (min-width: 768px) {
  .page-content {
    padding: var(--spacing-2xl) 0 var(--spacing-4xl) !important;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.page-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: left;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .page-title {
    /* font-size: var(--text-4xl); */
    /* margin-bottom: var(--spacing-3xl); */
  }
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xl);
}

.label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
}

/* ============================================
   BUTTONS - Design System (Figma: 353×52, 14px, 500, 0.2em)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: var(--btn-height);
  min-height: var(--btn-height);
  font-family: var(--font-primary);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  border: var(--btn-border-width) solid var(--color-gray-500);
  background-color: transparent;
  color: var(--color-gray-500);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover,
.btn:active {
  border-color: var(--color-black);
  color: var(--color-black);
  opacity: 1;
}

/* Primary: same outline treatment as default .btn (gray → black on hover/active). */
.btn--primary {
  border: var(--btn-border-width) solid var(--color-gray-500);
  background-color: transparent;
  color: var(--color-gray-500);
}

.btn--primary:hover,
.btn--primary:active {
  border-color: var(--color-black);
  color: var(--color-black);
  background-color: transparent;
}

/* Secondary / muted / wishlist: inherit .btn gray default; explicit rules kept for clarity. */
.btn--secondary,
.btn--muted,
.btn--wishlist {
  color: var(--color-gray-500);
  border: var(--btn-border-width) solid var(--color-gray-500);
  background-color: transparent;
}

.btn--secondary:hover,
.btn--secondary:active,
.btn--muted:hover,
.btn--muted:active,
.btn--wishlist:hover,
.btn--wishlist:active {
  border-color: var(--color-black);
  color: var(--color-black);
}

.btn--wishlist.is-active {
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-gray-500);
  border: var(--btn-border-width) solid var(--color-gray-500);
}

.btn--outline:hover,
.btn--outline:active {
  background-color: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}

.btn--link {
  padding: 0;
  height: auto;
  min-height: auto;
  border: none;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: var(--tracking-wider);
}

.btn--link:hover {
  background: none;
  color: var(--color-black);
}

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

.btn--sm {
  padding: 0 20px;
  height: 40px;
  min-height: 40px;
}

.btn--lg {
  padding: 0 40px;
  height: 56px;
  min-height: 56px;
}

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

.btn:disabled:hover,
.btn:disabled:active {
  border-color: var(--color-gray-500);
  color: var(--color-gray-500);
  background-color: transparent;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  /* font-size: var(--text-md); */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-sm);
  color: var(--color-black);
}

.form-input {
  width: 100%;
  padding: 12px 0;
  font-size: var(--text-sm);
  color: var(--color-black);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
  outline: none;
  transition: border-color var(--transition-fast);
}

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

.form-input:focus {
  border-bottom-color: var(--color-gray-300);
}

.form-input--bordered {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-gray-300);
}

.form-input--bordered:focus {
  border-color: var(--color-gray-300);
}

.form-input--textarea {
  resize: vertical;
  min-height: 120px;
  border: 1px solid var(--color-gray-300);
  padding: 12px;
}

.form-input--textarea:focus {
  border-color: var(--color-gray-300);
}

.form-select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: var(--text-sm);
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  outline: none;
  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='%23737373' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--color-gray-300);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gray-border);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

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

.form-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 12px;
  height: 100%;
}

.form-checkbox-label {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.4;
}

.form-checkbox-label a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-top: var(--spacing-xs);
}

.form-success {
  color: var(--color-success);
  font-size: var(--text-sm);
  margin-top: var(--spacing-xs);
}

/* Radio buttons */
.form-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-md);
  border: 1px solid var(--color-gray-300);
  transition: border-color var(--transition-fast);
}

.form-radio:hover {
  border-color: var(--color-gray-border);
}

.form-radio.is-selected {
  border-color: var(--color-black);
}

.form-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gray-border);
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.form-radio input[type="radio"]:checked {
  border-color: var(--color-black);
  border-width: 5px;
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  transition: background-color var(--transition-base);
}

.header.scrolled,
.header.header--solid,
.header.has-mega-menu {
  background-color: var(--color-white);
}

.header.has-mega-menu {
  position: sticky;
}

.header.has-mega-menu .header__logo svg,
.header.has-mega-menu .header__logo-svg {
  fill: var(--color-black);
  color: var(--color-black);
}

.header.has-mega-menu .header__logo img {
  filter: none;
}

.header.has-mega-menu .nav-link,
.header.has-mega-menu .header__icon,
.header.has-mega-menu .header__lang,
.header.has-mega-menu .header__menu-toggle {
  color: var(--color-black);
}



.header--transparent {
  position: absolute;
  width: 100%;
  background-color: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--container-padding-mobile);
  position: relative;
}

@media (min-width: 1024px) {
  .header__inner {
    padding: 0 var(--container-padding);
  }
}

.header__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex: 1;
  min-height: var(--header-height);
}

.header__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
  justify-content: flex-end;
}

/* Logo - White on dark, black on light */
.header__logo {
  display: flex;
  align-items: center;
}

.header__logo svg,
.header__logo img {
  height: 24px;
  width: auto;
}

/* White header elements */
.header--white .header__logo svg,
.header--white .header__logo-svg {
  fill: var(--color-white);
  color: var(--color-white);
}

.header--white .header__logo img {
  filter: brightness(0) invert(1);
}

.header--white .nav-link,
.header--white .header__icon,
.header--white .header__lang,
.header--white .header__menu-toggle {
  color: var(--color-white);
}
.header.has-mega-menu .header__cart-count, .header--black .header__cart-count {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* .header--white .header__cart-count {
  background-color: var(--color-black);
  color: var(--color-white);
} */

/* Black header elements */
.header--black .header__logo svg,
.header--black .header__logo-svg {
  fill: var(--color-black);
  color: var(--color-black);
}

.header--black .header__logo img {
  filter: none;
}

.header--black .nav-link,
.header--black .header__primary-menu > .nav-item > a,
.header--black .header__icon,
.header--black .header__lang,
.header--black .header__menu-toggle {
  color: var(--color-black);
}
/* 
.header--black .header__cart-count {
  background-color: var(--color-white);
  color: var(--color-black);
} */

/* Navigation */
.header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
  }
}

.lang-switcher__menu-link.is-active {
  font-weight: 600;
}

.header__primary-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: inherit;
  padding: 8px 0;
  margin: 0;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-link:hover {
  opacity: 0.6;
}

.nav-link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.nav-link__arrow {
  width: 5px;
  height: 5px;
  padding-top: 2px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}

.nav-item.is-active .nav-link__arrow {
  transform: rotate(180deg);
}
.header--white .header__menu-toggle svg  line{
  stroke: var(--color-white);
}
/* Header Icons */
.header__icons {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: inherit;
  transition: opacity var(--transition-fast);
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.header__icon:hover {
  opacity: 0.6;
}

.header__icon svg {
  width: 19px;
  height: 18px;
}

/* Cart icon - Figma bag (19×19) */
.header__cart .header__cart-icon {
  width: 19px;
  height: 18px;
}

.header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Language Selector */
.header__lang {
  display: none;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: inherit;
}

@media (min-width: 1024px) {
  .header__lang {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lang-switcher__trigger:hover {
  opacity: 0.65;
}

.lang-switcher__trigger:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.lang-switcher__current {
  font-size: var(--text-xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.lang-switcher__current--solo.is-active {
  font-weight: 600;
}

.lang-switcher__chevron {
  display: flex;
  align-items: center;
  line-height: 0;
  transition: transform var(--transition-fast);
}

.lang-switcher__chevron svg {
  display: block;
}

.lang-switcher.is-open .lang-switcher__chevron {
  transform: rotate(180deg);
}

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 130;
  min-width: 7rem;
  margin: 0;
  padding: var(--spacing-xs) 0;
  list-style: none;
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.lang-switcher__menu-item {
  margin: 0;
  padding: 0;
}

.lang-switcher__menu-link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-black);
  text-decoration: none;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.lang-switcher__menu-link:hover,
.lang-switcher__menu-link:focus-visible {
  background-color: rgba(0, 0, 0, 0.06);
  outline: none;
}

.lang-switcher__menu-link.is-active {
  opacity: 0.45;
  pointer-events: none;
}

/* Mobile Menu Toggle */
.header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

@media (min-width: 1024px) {
  .header__menu-toggle {
    display: none;
  }
}

.header__menu-toggle svg {
  width: 22px;
  height: 22px;
}

/* ============================================
   MEGA MENU (Side Panel - appears on click)
   ============================================ */
.mega-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 270px;
  height: calc(100vh - var(--header-height));
  background-color: var(--color-white);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow-y: auto;
  padding: var(--spacing-2xl);
}

.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mega-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.mega-menu__section {
  display: flex;
  flex-direction: column;
}

.mega-menu__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
  /* margin: 0 0 var(--spacing-md); */
  /* padding-bottom: var(--spacing-xs); */
}

.mega-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-menu__list a, .mega-menu__link {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: color var(--transition-fast);
  padding: 3px 0;
  display: block;
}

.mega-menu__list a:hover, .mega-menu__link:hover {
  color: var(--color-black);
}

.mega-menu__divider {
  height: var(--spacing-lg);
  border: none;
  margin: 0;
}

/* No overlay - menu sits beside the content */
.mega-menu-overlay {
  display: none;
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--container-padding-mobile);
  border-bottom: 1px solid var(--color-gray-200);
}

.mobile-menu__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
}
a.footer__contact-item.email {
  text-decoration: underline;
}
.mobile-menu__close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.mobile-menu__nav {
  padding: var(--spacing-xl) var(--container-padding-mobile);
  max-height: 75vh;
  overflow: scroll;
}

.mobile-menu__lang {
  padding: var(--spacing-lg) var(--container-padding-mobile);
  padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
  position: absolute;
  bottom: 20px;

}

.mobile-menu__lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
}

.mobile-menu__lang-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
}

.mobile-menu__lang-value {
  font-weight: 600;
}

.lang-switcher--mobile {
  width: 100%;
  position: relative;
}

.lang-switcher--mobile .lang-switcher__trigger {
  width: 100%;
  justify-content: flex-start;
  padding: var(--spacing-sm) 0;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.lang-switcher--mobile .lang-switcher__label {
  flex-shrink: 0;
  margin-right: var(--spacing-md);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.lang-switcher--mobile .lang-switcher__current {
  margin-left: auto;
  margin-right: var(--spacing-xs);
  font-weight: 600;
}

.lang-switcher--mobile .lang-switcher__menu {
  position: static;
  top: auto;
  right: auto;
  width: 100%;
  min-width: 50px;
  margin-top: var(--spacing-sm);
  box-shadow: none;
  border: 1px solid var(--color-gray-200);
  position: absolute;
  z-index: 111;
}

.lang-switcher--mobile .lang-switcher__menu-link {
  padding: 0.65rem 1rem;
  font-size: var(--text-sm);
}

.mobile-nav__item {
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap:10px;
  padding: var(--spacing-sm) 0;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  text-decoration: none;
}

.mobile-nav__submenu {
  display: none;
  padding-bottom: var(--spacing-md);
}

.mobile-nav__item.is-open .mobile-nav__submenu {
  display: block;
}

.mobile-nav__sublink {
  display: block;
  padding: var(--spacing-xs) 0;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
.mobile-nav__submenu-divider {
  display: block;
  height: var(--line-height-base);
}
/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 500px;
  overflow: hidden;
}

/* Full viewport hero for homepage */
.hero--home {
  height: 100vh;
  margin-top: calc(-1 * var(--header-height));
}

.hero__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Darker at top for white header/menu contrast. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.24) 24%,
    rgba(0, 0, 0, 0.1) 48%,
    rgba(0, 0, 0, 0) 72%
  );
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(100%);
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(100%);
  background-color: #1a1a1a;
}

.form-group.special-magrin {
  margin-bottom: 0;
}

.hero__image--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #333 0%, #555 50%, #333 100%);
}

.hero__content {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  width: 100%;
  padding: 0 var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .hero__content {
    bottom: 12%;
  }
}

.hero__logo {
  display: inline-block;
}

.hero__logo-img,
.hero__logo-svg {
  width: 100%;
  height: auto;
  max-width: 600px;
  max-height: 120px;
  display: block;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero__logo-img,
  .hero__logo-svg {
    max-width: 800px;
    max-height: 160px;
  }
}

@media (min-width: 1024px) {
  .hero__logo-img,
  .hero__logo-svg {
    max-width: 1000px;
    max-height: 200px;
  }
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: 300;
  font-style: italic;
  color: #ffffff;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin: 0;
  text-indent: 0.4em; /* Compensate for letter-spacing on last letter */
}

@media (max-width: 767px) {
  .hero {
    height: calc(100vh - var(--header-height));
    min-height: 400px;
  }
  
  .hero--home {
    height: 100vh;
  }
  
  .hero__content {
    bottom: 15%;
  }
  
  .hero__logo-img {
    max-width: 280px;
    max-height: 56px;
  }
  
  .hero__title {
    letter-spacing: 0.25em;
    text-indent: 0.25em;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background-color: var(--color-white);
  padding: var(--spacing-3xl) 0 var(--spacing-xl);
  margin-top: auto;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}
.footer__two_columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
 
}
@media (max-width: 768px) {
  .footer__two_columns {order: 2;}
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 2fr  1fr;
    gap: var(--spacing-3xl);
  }
  .footer__two_columns {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer__contact-item {
  font-size: var(--text-sm);
  color: var(--color-black);
  line-height: 1.6;
}

.footer__contact-item:hover {
  text-decoration: underline;
  opacity: 1;
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
}
@media (max-width: 768px) {
  .footer__social {
    margin-top: 0;
  }
}
.footer__social-link {
  font-size: var(--text-sm);
  color: var(--color-black);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.footer__links li a{
  line-height: 1.6;
}

.footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer__menu .menu-item {
  margin: 0;
}

.footer__menu a {
  font-size: var(--text-sm);
  color: var(--color-black);
  line-height: 1.6;
}

.footer__menu a:hover {
  text-decoration: underline;
  opacity: 1;
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--color-black);
  line-height: 1.6;
}

.footer__link:hover {
  text-decoration: underline;
  opacity: 1;
}

.footer__newsletter {
  max-width: 400px;
}

.footer__newsletter-title {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.footer__newsletter-form {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-black);
  position: relative;
}
.footer__newsletter-form .checkout-field__error {
  position: absolute;
  bottom: -21px;
}
.footer__newsletter-input {
  flex: 1;
  padding: var(--spacing-sm) 0;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  outline: none;
}

.footer__newsletter-input::placeholder {
  color: var(--color-gray-placeholder);
}

.footer__newsletter-btn {
  padding: var(--spacing-sm) 0;
  background: transparent;
  border: none;
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  cursor: pointer;
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}

.footer__newsletter-btn:hover {
  opacity: 0.6;
}

.footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

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

.footer__legal {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
}

.footer__legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  align-items: flex-start;
  
}
@media (max-width: 768px) {
  .footer__legal {
    gap: 7px;
  }
  .footer__legal::before{
    display: block;
    content: '';
    width: 50%;
    height: 1px;

    margin-bottom: var(--spacing-xl);
  }
  .footer__legal-menu {
    gap: 0;
    flex-direction: column;
  }
  .footer__copyright{
    text-align: center;
    margin-top: var(--spacing-lg);
  }
}
.footer__legal-menu .menu-item {
  margin: 0;
}

.footer__legal-menu a {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.footer__legal-menu a:hover {
  color: var(--color-black);
  opacity: 1;
}

.footer__legal-link {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.footer__legal-link:hover {
  color: var(--color-black);
  opacity: 1;
}

/* ============================================
   PRODUCT CARD
   ============================================ */
.product-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "media"
    "meta";
    gap: var(--spacing-md);
}

.product-card__image-link {
  grid-area: media;
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__meta-link {
  grid-area: meta;
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-gray-100);
  margin-bottom: var(--spacing-md);
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), opacity var(--transition-base);
}

.product-card__img--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.product-card:hover .product-card__img--primary {
  opacity: 0;
}

.product-card:hover .product-card__img--hover {
  opacity: 1;
}

.product-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

.product-card__badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 4px 8px;
  background-color: var(--color-white);
}

.product-card__badge--sale {
  background-color: var(--color-black);
  color: var(--color-white);
}

.product-card__badge--soldout {
  background-color: var(--color-black);
  color: var(--color-white);
}

.product-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.product-card__title {
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

.product-card__meta-link .product-card__title {
  color: var(--color-black);
}

.product-card__price {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.product-card__price-original {
  text-decoration: line-through;
  color: var(--color-gray-400);
}

.product-card__price-sale {
  color: var(--color-black);
}

/* Product Card Actions */
.product-card__actions {
  grid-area: media;
  justify-self: end;
  align-self: start;
  z-index: 5;
  margin: var(--spacing-sm) var(--spacing-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
}

.product-card__actions > * {
  pointer-events: auto;
}

/* Hover specs overlay (Figma: color + sizes on image) */
.product-card__specs-overlay {
  grid-area: media;
  align-self: end;
  justify-self: stretch;
  z-index: 3;
  padding: 0 ;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__specs-overlay,
  .product-card:focus-within .product-card__specs-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .product-card--specs-dismissed .product-card__specs-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px);
  }
}

.product-card__specs-inner {
  position: relative;
  pointer-events: auto;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md);
  background-color: var(--color-white);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
}

.product-card__specs-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}

.product-card__specs-close:hover {
  opacity: 0.55;
}

.product-card__specs-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.product-card__specs-block {
  display: row;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.product-card__specs-block--sizes {
  /* margin-top: var(--spacing-md); */
  padding-top: var(--spacing-sm);
  /* border-top: 1px solid var(--color-gray-200); */
}

.product-card__specs-block--sizes-first {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.product-card__specs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
}

.product-card__specs-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}

.product-card__specs-swatch {
  display: block;
  width: 20px;
  height: 20px;
  /* border: 1px solid var(--color-gray-300); */
  box-sizing: border-box;
}

.product-card__specs-swatch-wrap.is-active .product-card__specs-swatch {
  /* outline: 1px solid var(--color-black); */
  outline-offset: 2px;
}

.product-card__specs-color-name {
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.product-card__specs-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: baseline;
}

.product-card__specs-size {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-400);
  text-decoration: none;
}

.product-card__specs-size.is-active {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.product-card__wishlist svg,
.product-card__quick-add svg {
  width: 100%;
  height: 100%;
  padding: 6px;
}

.product-card__quick-add svg {
  stroke: #666;
}

.product-card__wishlist svg {
  stroke: none;
}

.product-card__wishlist,
.product-card__quick-add {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #666;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  padding: 0;
}

.product-card__wishlist:hover,
.product-card__quick-add:hover svg {
  color: #000;
}

.product-card__quick-add:hover svg {
  stroke: #000;
}

.product-card__wishlist .wishlist-icon__fill,
.product-card__wishlist .wishlist-icon__ring {
  transition: opacity var(--transition-fast);
}

.product-card__wishlist .wishlist-icon__fill {
  opacity: 0;
}

.product-card__wishlist .wishlist-icon__ring {
  opacity: 1;
}

.product-card__wishlist.is-active {
  color: var(--color-black);
}

.product-card__wishlist.is-active .wishlist-icon__fill {
  opacity: 1;
}

.product-card__wishlist.is-active .wishlist-icon__ring {
  opacity: 0;
}

/* .product-card__quick-add {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
}

.product-card__quick-add .product-card__quick-add-icon {
  transition: stroke var(--transition-fast);
}

.product-card__quick-add:hover {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
  opacity: 1;
} */

/* Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat( 1fr);
  gap: var(--spacing-lg);
}

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

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

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

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

/* ============================================
   COLLECTION / SHOP PAGE
   ============================================ */
.collection-page {
  padding: var(--spacing-lg) 0 var(--spacing-4xl);
}

/* Breadcrumb */
.collection-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-lg);
}

.collection-breadcrumb__link {
  color: var(--color-black);
  text-decoration: none;
  font-weight: 600;
}

.collection-breadcrumb__link:hover {
  opacity: 0.6;
}

.collection-breadcrumb__sep {
  color: var(--color-black) !important;
}

.collection-breadcrumb__current {
  color: var(--color-gray-500);
}

.collection-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2xl);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.collection-page__title-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.collection-page__title {
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.collection-page__inner {
  display: block;
}

.collection-products {
  width: 100%;
}

/* Filter Sidebar - Slides from Right */
.filter-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100%;
  background-color: var(--color-white);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  padding: var(--spacing-xl);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

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

.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.filter-sidebar__title {
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.filter-sidebar__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
}

.filter-sidebar__close:hover {
  opacity: 0.6;
}

.filter-group {
  /* border-bottom: 1px solid var(--color-gray-200); */
  margin-bottom: var(--spacing-md);
}

.filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) 0;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-black);
}

.filter-group__toggle svg {
  transition: transform var(--transition-fast);
}

.filter-group.is-open .filter-group__toggle svg {
  transform: rotate(180deg);
}

.filter-group__content {
  display: none;
  padding-bottom: var(--spacing-md);
}

.filter-group.is-open .filter-group__content {
  display: block;
}

@media (max-width: 768px) {
  .filter-group.is-open .filter-group__content {
      padding-left: var(--spacing-2xl);
  }
  .filter-price__inputs {
    align-items: flex-start;
    gap: var(--spacing-sm);
    align-content: flex-start;
    /* flex-direction: column; */
}
}
.filter-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.filter-checkbox input {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-gray-border);
  appearance: none;
  cursor: pointer;
  border-radius: 0;
}

.filter-checkbox input:checked {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.filter-checkbox__label {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.filter-checkbox--color .filter-checkbox__swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--color-gray-300);
  box-sizing: border-box;
}

.filter-checkbox__count {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

/* Color Swatches for Filter */
.filter-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.filter-color {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.filter-color__swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-gray-300);
  flex-shrink: 0;
}

.filter-color__label {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.filter-color input:checked + .filter-color__swatch {
  outline: 1px solid var(--color-black);
  outline-offset: 2px;
}

/* Size Options for Filter */
.filter-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.filter-size {
  cursor: pointer;
}

.filter-size__label {
  display: block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.filter-size input:checked + .filter-size__label {
  color: var(--color-black);
  font-weight: 500;
}

.filter-size:hover .filter-size__label {
  color: var(--color-black);
}

/* Price Range Filter */
.filter-price {
  padding: var(--spacing-md) 0;
}

.filter-price__slider {
  width: 100%;
  height: 2px;
  background-color: var(--color-gray-300);
  position: relative;
  margin-bottom: var(--spacing-md);
}

.filter-price__track {
  position: absolute;
  height: 100%;
  background-color: var(--color-black);
}

.filter-price__inputs {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.filter-price__input {
  flex: 1;
  padding: var(--spacing-sm);
  font-size: var(--text-sm);
  border: 1px solid var(--color-gray-300);
  text-align: center;
  -moz-appearance: textfield;
  max-width: 120px;
}

.filter-price__input::-webkit-outer-spin-button,
.filter-price__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.filter-price__separator {
  color: var(--color-gray-400);
}

.filter-price__range {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-sm);
}

/* Filter Apply Button - Figma: 353×52, secondary (outlined) */
.filter-apply {
  margin-top: var(--spacing-xl);
}

.collection-filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--spacing-sm) 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}

.collection-filter-toggle:hover {
  opacity: 0.6;
}

.collection-filter-toggle svg {
  margin-left: var(--spacing-xs);
}

.collection-empty {
  text-align: center;
  padding: var(--spacing-4xl) 0;
}

.collection-empty p {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-xl);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-3xl);
}

.pagination__link,
.pagination__current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-fast);
}

.pagination__link:hover {
  border-color: var(--color-black);
  color: var(--color-black);
  opacity: 1;
}

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

/* ============================================
   SINGLE PRODUCT PAGE
   ============================================ */
.product-page {
  /* padding: var(--spacing-lg) 0 var(--spacing-3xl); */
}

.product-page__breadcrumb {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xl);
  color: var(--color-gray-400);
  font-weight: 600;
}

.product-page__breadcrumb a {
  color: var(--color-black);
  text-decoration: none;
}

.product-page__breadcrumb span {
  color: var(--color-gray-400);
}

.product-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 1024px) {
  .product-page__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }
}

/* Product Gallery */
.product-gallery {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--spacing-md);
}

.product-gallery__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.product-gallery__thumb {
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  border: none;
  padding: 0;
  background: none;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Slides container — desktop: only active slide visible */
.product-gallery__slides {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.product-gallery__slides.is-dragging {
  cursor: grabbing;
}

.product-gallery__slide {
  display: none;
  width: 100%;
  height: 100%;
}

.product-gallery__slide.is-active {
  display: block;
}

.product-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

.product-gallery__dots {
  display: none;
}

@media (max-width: 767px) {
  .filter-sidebar{max-width: 100%;}
  .product-gallery {
    grid-template-columns: 1fr;
    margin-left: calc(-1 * var(--container-padding-mobile));
    margin-right: calc(-1 * var(--container-padding-mobile));
    width: calc(100% + 2 * var(--container-padding-mobile));
  }

  .product-gallery__main {
    width: 100%;
    aspect-ratio: 3/4;
    background-color: transparent;
    position: relative;
    overflow: hidden;
  }

  .product-gallery__slides {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
    will-change: transform;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
  }

  .product-gallery__slide {
    display: block;
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
  }

  .product-gallery__thumbs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    order: 2;
    overflow-x: auto;
    gap: 8px;
    padding: 12px var(--container-padding-mobile);
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
  }

  .product-gallery__thumb {
    width: 60px;
    height: 80px;
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
  }

  .product-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    order: 3;
  }

  .product-gallery__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--color-black);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
  }

  .product-gallery__dot.is-active {
    background: var(--color-black);
  }

  .product-gallery__nav {
    display: none;
  }
}

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active {
  opacity: 1;
}

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

.product-gallery__main {
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-gray-100);
  position: relative;
}

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

.product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  /* border: 1px solid var(--color-gray-300); */
  /* background: rgba(255, 255, 255, 0.9); */
  color: var(--color-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  line-height: 1;
  opacity: 0.4;
}

.product-gallery__nav--prev {
  left: 12px;
}

.product-gallery__nav--next {
  right: 12px;
}

.product-gallery__nav:hover {
  /* background: var(--color-white); */
}

.product-gallery__nav:hover svg path {
  stroke: var(--color-black);
}

.product-gallery__nav:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 1px;
}

/* Fullscreen lightbox (main product image — Fancybox-like) */
.product-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10080;
  box-sizing: border-box;
}
.product-gallery-lightbox__close span {
  position: absolute;
  top: 4px;
}
html.is-product-gallery-lightbox-open,
body.is-product-gallery-lightbox-open {
  overflow: hidden;
}

.product-gallery-lightbox[hidden] {
  display: none !important;
}

.product-gallery-lightbox:not([hidden]) {
  display: block;
}

.product-gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.product-gallery-lightbox__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px 64px;
  pointer-events: none;
}

.product-gallery-lightbox__panel > * {
  pointer-events: auto;
}

.product-gallery-lightbox__stage {
  position: relative;
  max-width: min(96vw, 1200px);
  max-height: 85vh;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.product-gallery-lightbox__stage.is-zoomed {
  cursor: grab;
  touch-action: none;
}

.product-gallery-lightbox__stage.is-zoomed:active {
  cursor: grabbing;
}

.product-gallery-lightbox__img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.product-gallery-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.product-gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}

.product-gallery-lightbox__close:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.product-gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.product-gallery-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}

.product-gallery-lightbox__nav--prev {
  left: 12px;
}

.product-gallery-lightbox__nav--next {
  right: 12px;
}

.product-gallery-lightbox__nav:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.product-gallery-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 767px) {
  .product-gallery-lightbox__panel {
    padding: 48px 12px 56px;
  }

  .product-gallery-lightbox__nav--prev {
    left: 4px;
  }

  .product-gallery-lightbox__nav--next {
    right: 4px;
  }
}

/* Product Info */
.product-info {
  max-width: 450px;
}

.product-info__title {
  font-size: var(--text-lg);
  font-weight: 400;
  margin: 0 0 var(--spacing-xl);
}

.product-info__description {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.product-info__price {
  display: flex;
  align-items: flex-start;
  /* gap: var(--spacing-); */
  flex-direction: column-reverse;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.product-info__price-current {
  font-size: var(--text-lg);
  font-weight: 500;
}

.product-info__price-original {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  text-decoration: line-through;
}

/* WooCommerce price HTML (del/ins) for variable products on sale */
.product-info__price del {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  text-decoration: line-through;
}

.product-info__price ins {
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: 500;
}

/* Product Colors */
.product-colors {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  /* margin-bottom: var(--spacing-lg); */
  padding-bottom: var(--spacing-lg);
  flex-direction: column;
  align-content: flex-start;
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.product-colors__label {
  /* font-size: var(--text-xs); */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
  margin-right: var(--spacing-xs);
}

.product-colors__swatches {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.product-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-gray-200);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.product-color-swatch:hover {
  transform: scale(1.1);
}

.product-color-swatch.is-active,
.product-color-swatch[aria-selected="true"] {
  /* box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-black); */
  border-color:  var(--color-black) !important;
}

.product-color-swatch--white,
.product-color-swatch[style*="white"],
.product-color-swatch[style*="#fff"],
.product-color-swatch[style*="#FFF"] {
  border-color: var(--color-gray-300);
}

.product-colors__name {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  /* margin-left: var(--spacing-sm); */
  text-transform: capitalize;
}

.product-info__made-to-order {
  display: block;
  margin: 0 0 var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-black, #000);
}

.product-accordions .accordion {
  border: none;
}
@media screen and (max-width: 768px) {
  .product-colors__name {
    font-size: var(--text-base);
    margin-left: 0;
  }
  
}
/* Variant Selector */
.product-option {
  margin-bottom: var(--spacing-lg);
}

.product-option__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-sm);
}

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

.product-option__guide {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
}

.product-option__guide:hover {
  color: var(--color-black);
}

.product-option__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* Color Swatch */
.color-swatch {
  display: inline-block;
  cursor: pointer;
}

.color-swatch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.color-swatch__circle {
  width: 24px;
  height: 24px;
  display: block;
  border: 1px solid var(--color-gray-300);
  transition: all var(--transition-fast);
}

.color-swatch input:checked + .color-swatch__circle {
  outline: 1px solid var(--color-black);
  outline-offset: 2px;
}

/* Size Option Buttons */
.size-option-btn {
  /* font-size: var(--text-sm); */
  color: var(--color-gray-500);
  text-decoration: none;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 4px;
  transition: color var(--transition-fast);
  line-height: 1.4;
}

.size-option-btn:hover,
.size-option-btn.is-active {
  color: var(--color-black);
  font-weight: 600;
  text-decoration: underline;
  /* background-color: #ededed; */
}

.product-option--size.has-error .product-option__header-text {
  color: var(--color-error, #c00);
}

/* Legacy size-option (radio-based) */
.size-option {
  display: inline-block;
  cursor: pointer;
}

.size-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.size-option__label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 0;
  display: block;
  transition: color var(--transition-fast);
}

.size-option input:checked + .size-option__label {
  color: var(--color-black);
  font-weight: 500;
}

.size-option:hover .size-option__label {
  color: var(--color-black);
}

/* Quantity Selector */
.quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
}

.quantity-selector__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-gray-600);
  transition: all var(--transition-fast);
  padding: 0;
  line-height: 1;
}

.quantity-selector__btn:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
}

.quantity-selector__btn:active {
  background-color: var(--color-gray-200);
}

.quantity-selector__input {
  width: 48px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 400;
  border: none;
  /* border-left: 1px solid var(--color-gray-300); */
  /* border-right: 1px solid var(--color-gray-300); */
  -moz-appearance: textfield;
  padding: 8px 0;
  background-color: transparent;
  color: var(--color-black);
  outline: none;
}

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

.quantity-selector__input:focus {
  background-color: var(--color-gray-50);
}

/* Product Add to Cart */
.product-add-to-cart {
  margin-bottom: var(--spacing-md);
}

/* WooCommerce Variations Form Overrides */
.variations_form .variations {
  margin-bottom: 0;
}

.variations_form .variations td,
.variations_form .variations th {
  padding: 0;
  border: none;
  vertical-align: middle;
}

.variations_form .variations .label {
  display: none;
}

.variations_form .variations .value select,
.twoa-hidden-select {
  display: none !important;
}

.variations_form .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 32px;
  height: var(--btn-height);
  min-height: var(--btn-height);
  font-family: var(--font-primary);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  border: var(--btn-border-width) solid var(--color-gray-500);
  background-color: transparent;
  color: var(--color-gray-500);
  transition: all var(--transition-base);
  cursor: pointer;
  margin-bottom: var(--spacing-md);
}

.variations_form .single_add_to_cart_button:hover,
.variations_form .single_add_to_cart_button:active {
  border-color: var(--color-black);
  color: var(--color-black);
  background-color: transparent;
}

.variations_form .single_add_to_cart_button.disabled,
.variations_form .single_add_to_cart_button.wc-variation-selection-needed {
  opacity: 0.4;
  cursor: not-allowed;
}

.variations_form .woocommerce-variation-add-to-cart {
  margin-top: var(--spacing-lg);
}

.variations_form .woocommerce-variation-add-to-cart .quantity {
  display: block;
}

.variations_form .woocommerce-variation-price {
  display: none;
}

.variations_form .reset_variations {
  display: none !important;
}

/* Size guide header for variable products */
.product-option__header--variable {
  margin-bottom: var(--spacing-lg);
}

.product-option__header-text {
  /* font-size: var(--text-sm); */
  color: var(--color-gray-500);
}

/* Size header: label and selected value on same line, selected value bold */
.product-option--size .product-option__header-text .product-option__label {
  display: inline;
  margin-bottom: 0;
}

.product-option__label {
  text-decoration: none;
  text-underline-offset: 3px;
}

.product-option__selected-size {
  display: inline;
  text-decoration: none;
  text-underline-offset: 3px;
}

.product-option__selected-size.has-value {
  color: var(--color-black);
  font-weight: 700;
}

/* Size Chart Popup */
.size-chart-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.size-chart-popup.is-open {
  opacity: 1;
  visibility: visible;
}

.size-chart-popup__inner {
  position: relative;
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-white);
  padding: var(--spacing-3xl);
}

@media (max-width: 767px) {
  .size-chart-popup__inner {
    padding: var(--spacing-xl);
  }
}

.size-chart-popup__close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  z-index: 10;
  transition: opacity var(--transition-fast);
}

.size-chart-popup__close:hover {
  opacity: 0.6;
}

.size-chart-popup__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--spacing-xl);
}

.size-chart-popup__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-xl);
}

.size-chart-popup__table th {
  font-size: var(--text-lg);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  text-align: center;
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.size-chart-popup__table th:first-child {
  text-align: center;
}

.size-chart-popup__table td {
  font-size: var(--text-base);
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-sm);
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
}

.size-chart-popup__table td:first-child {
  text-align: center;
  color: var(--color-black);
}

.size-chart-popup__help {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-black);
  margin: 0 0 var(--spacing-xl);
  line-height: 1.6;
}

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

/* Product page wishlist: same btn--secondary as Add to cart; heart toggles like .product-card__wishlist (no bg change on active) */
.product-wishlist {
  margin-top: var(--spacing-md);
  gap: var(--spacing-sm);
}
.product-wishlist span{display: none;}
.product-wishlist.is-active span{display: block;}
.product-wishlist .wishlist-icon {
  flex-shrink: 0;
  width: 23px;
  height: 19px;
  stroke: none;
}

.product-wishlist .wishlist-icon__fill,
.product-wishlist .wishlist-icon__ring {
  transition: opacity var(--transition-fast);
}

.product-wishlist .wishlist-icon__fill {
  opacity: 0;
}

.product-wishlist .wishlist-icon__ring {
  opacity: 1;
}

.product-wishlist.is-active .wishlist-icon__fill {
  opacity: 1;
}

.product-wishlist.is-active .wishlist-icon__ring {
  opacity: 0;
}

/* Accordion */
.accordion {
  border-top: 1px solid var(--color-gray-200);
}

.accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) 0;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-black);
}

.accordion__toggle svg {
  transition: transform var(--transition-fast);
  color: var(--color-black);
}

.accordion.is-open .accordion__toggle svg {
  transform: rotate(180deg);
}

.accordion__content {
  display: none;
  padding-bottom: var(--spacing-md);
}

.accordion.is-open .accordion__content {
  display: block;
}

.accordion__content p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* ============================================
   DELIVERY & PAYMENT PAGE (ACF)
   ============================================ */
.delivery-payment-page {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
}

.delivery-payment__layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: var(--spacing-xl);
}

.delivery-payment__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-xl));
  align-self: start;
}

.delivery-payment__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delivery-payment__nav-link {
  font-size: var(--text-base);
  font-weight: 200;
  color: var(--color-gray-500);
  line-height: 1.4;
  text-transform: none;
}

.delivery-payment__nav-link.is-active {
  color: var(--color-black);
  font-weight: 700;
}

.delivery-payment__main {
  min-width: 0;
}

.delivery-payment__section {
  padding: 0 0 var(--spacing-2xl);
}
.delivery-payment__content a{
  text-decoration: underline;
}
.delivery-payment__content strong{
  font-weight: 700;
}

.delivery-payment__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-md);
  color: var(--color-black);
}

.delivery-payment__content p {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

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

.delivery-payment__empty {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  padding: var(--spacing-lg) 0;
}

@media (max-width: 767px) {
  .delivery-payment__layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .delivery-payment__sidebar {
    display: none;
  }

  .delivery-payment__section {
    padding: var(--spacing-lg) 0;
  }
}

/* Privacy / legal editor content — match delivery-payment typography */
.delivery-payment--legal .delivery-payment__main {
  min-width: 0;
}

.delivery-payment--legal .delivery-payment__content .legal-intro {
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-gray-200);
}

.delivery-payment--legal .delivery-payment__content .legal-section {
  padding: 0 0 var(--spacing-2xl);
}

.delivery-payment--legal .delivery-payment__content .legal-section__title,
.delivery-payment--legal .delivery-payment__content .legal-content h2 {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-md);
  color: var(--color-black);
}

.delivery-payment--legal .delivery-payment__content .legal-content p,
.delivery-payment--legal .delivery-payment__content .legal-intro p {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.delivery-payment--legal .delivery-payment__content .legal-content p:last-child {
  margin-bottom: 0;
}

.delivery-payment--legal .delivery-payment__content .legal-content strong {
  font-weight: 700;
}

.delivery-payment--legal .delivery-payment__content .legal-content a {
  text-decoration: underline;
}

.delivery-payment--legal .delivery-payment__content .legal-intro__date {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

.delivery-payment--legal .delivery-payment__content .legal-content ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.delivery-payment--legal .delivery-payment__content .legal-content ul li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.delivery-payment--legal .delivery-payment__content .legal-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-gray-400);
}

.delivery-payment--legal .delivery-payment__content .legal-contact a {
  color: var(--color-black);
  text-underline-offset: 2px;
}

.delivery-payment--legal .delivery-payment__content .legal-contact__note {
  margin-top: var(--spacing-lg);
  font-style: italic;
  color: var(--color-gray-500);
  font-size: var(--text-base);
}

@media (max-width: 767px) {
  .delivery-payment--legal .delivery-payment__content .legal-section {
    padding: var(--spacing-lg) 0;
  }
}

/* Returns & exchange — editor content (same page rhythm as delivery-payment) */
.delivery-payment--returns .delivery-payment__main {
  min-width: 0;
  margin-left: 220px;
}

.delivery-payment--returns .delivery-payment__content.legal-page__entry > .wp-block-group:first-child,
.delivery-payment--returns .delivery-payment__content.legal-page__entry > *:first-child {
  margin-top: 0;
}

.delivery-payment--returns .info-section {
  margin-bottom: var(--spacing-3xl);
}

.delivery-payment--returns .info-section__title {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-black);
}

.delivery-payment--returns .info-block {
  margin-bottom: var(--spacing-xl);
}

.delivery-payment--returns .info-block__title {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-md);
  color: var(--color-black);
}

.delivery-payment--returns .info-block__content {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-600);
}

.delivery-payment--returns .info-block__content p {
  margin-bottom: var(--spacing-md);
}

.delivery-payment--returns .info-block__content p:last-child {
  margin-bottom: 0;
}

.delivery-payment--returns .info-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0 0;
}

.delivery-payment--returns .info-list li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.delivery-payment--returns .info-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-gray-400);
}

.delivery-payment--returns .info-note {
  background-color: var(--color-gray-100);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.delivery-payment--returns .info-note p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}

.delivery-payment--returns .info-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.delivery-payment--returns .info-step {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.delivery-payment--returns .info-step__number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: var(--text-base);
  font-weight: 500;
  flex-shrink: 0;
}

.delivery-payment--returns .info-step__content {
  flex: 1;
  min-width: 0;
}

.delivery-payment--returns .info-step__title {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--spacing-sm);
  color: var(--color-black);
}

.delivery-payment--returns .info-step__content p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}

.delivery-payment--returns .info-contact {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-gray-200);
}

.delivery-payment--returns .info-contact p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-sm);
}

.delivery-payment--returns .info-contact a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.delivery-payment--returns .info-contact__hours {
  color: var(--color-gray-500);
  margin-top: var(--spacing-md);
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .delivery-payment--returns .info-section {
    margin-bottom: var(--spacing-2xl);
  }
}

/* Related Products */
.related-products {
  margin-top: var(--spacing-4xl);
  padding-top: var(--spacing-3xl);
  border-top: 1px solid var(--color-gray-200);
}

.related-products__title {
  font-size: var(--text-xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-2xl);
}

.related-products__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.related-products__nav {
  display: none;
  align-items: center;
  gap: 22px;
  padding-top: 4px;
}

.related-products__nav-btn {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.related-products__nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.related-products__slider {
  width: 100%;
}

.related-products__viewport {
  width: 100%;
}

/* Related products: keep hover effects isolated to the exact card image area */
.related-products .product-card .product-card__img--primary {
  opacity: 1;
}

.related-products .product-card .product-card__img--hover {
  opacity: 0;
}

.related-products .product-card .product-card__specs-overlay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

@media (hover: hover) and (pointer: fine) {
  .related-products .product-card:hover .product-card__img--primary,
  .related-products .product-card:focus-within .product-card__img--primary {
    opacity: 1;
  }

  .related-products .product-card:hover .product-card__img--hover,
  .related-products .product-card:focus-within .product-card__img--hover {
    opacity: 0;
  }

  .related-products .product-card:hover .product-card__specs-overlay,
  .related-products .product-card:focus-within .product-card__specs-overlay {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
  }

  .related-products .product-card .product-card__image-link:hover .product-card__img--primary,
  .related-products .product-card .product-card__image-link:focus-visible .product-card__img--primary {
    opacity: 0;
  }

  .related-products .product-card .product-card__image-link:hover .product-card__img--hover,
  .related-products .product-card .product-card__image-link:focus-visible .product-card__img--hover {
    opacity: 1;
  }

  .related-products .product-card .product-card__image-link:hover ~ .product-card__specs-overlay,
  .related-products .product-card .product-card__image-link:focus-visible ~ .product-card__specs-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .related-products {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
  }

  .related-products__title {
    margin-bottom: var(--spacing-lg);
    line-height: 1.15;
  }

  .related-products__nav {
    display: inline-flex;
  }

  .related-products__viewport {
    overflow: hidden;
    touch-action: pan-y;
  }

  .related-products__track {
    display: flex;
    gap: 0;
    transition: transform 0.3s ease;
    will-change: transform;
  }

  .related-products__track > .product-card {
    flex: 0 0 100%;
    width: 100%;
  }

  .related-products__track .product-card__image {
    margin-bottom: var(--spacing-sm);
  }

  .related-products__track.is-dragging {
    transition: none;
    cursor: grabbing;
  }
}

/* ============================================
   CHECKOUT FLOW (Cart + Checkout Combined)
   ============================================ */
.checkout-flow {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
}

.checkout-flow__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .checkout-flow__title {
    font-size: var(--text-3xl);
  }
}

/* Checkout Steps Navigation */
.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-3xl);
  padding: 0 var(--spacing-md);
}

.checkout-steps__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  opacity: 0.3;
  transition: opacity var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.checkout-steps__item:hover {
  opacity: 0.6;
}

.checkout-steps__item.is-active {
  position: relative;
  opacity: 1;
}
.checkout-steps__item.is-active::before {
  content: '';
  position: absolute;
  bottom:-24px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
}


.checkout-steps__item.is-active:hover {
  opacity: 1;
}

.checkout-steps__number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-black);
  font-size: var(--text-lg);
  font-weight: 500;
  /* border: 1px solid var(--color-gray-300); */
  border-radius: 50%;
  transition: all var(--transition-base);
}

.checkout-steps__item.is-active .checkout-steps__number {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.checkout-steps__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: 400;
}

@media (max-width: 767px) {
  .checkout-steps__label {
    /* display: none; */
  }
  .checkout-steps__item{
    display: none;
  }
  .checkout-steps__item.is-active{
    display: flex;
  }
  .checkout-steps__number {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
  }
  .checkout-steps__item.is-active::before{display: none;}
}

.checkout-steps__line {
  width: 60px;
  height: 1px;
  /* background-color: var(--color-gray-300); */
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .checkout-steps__line {
    width: 20px;
  }
}

@media (min-width: 768px) {
  .checkout-steps__line {
    width: 80px;
  }
}

/* Checkout Flow Layout */
.checkout-flow__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .checkout-flow__layout {
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-4xl);
  }
}

.checkout-flow__main {
  min-width: 0;
}

.checkout-flow__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-xl));
  align-self: start;
  /* padding: var(--spacing-xl); */
  padding: 0;
  background-color: transparent;
  border-radius: 4px;
}

@media (max-width: 1023px) {
  .checkout-flow__sidebar {
    position: static;
    order: -1;
    padding: var(--spacing-lg);
  }
}
@media (max-width: 1023px) {
  .checkout-flow__sidebar {
   width: 100%;
  }
}

/* Cart Items List (Step 1) */
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cart-item-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 var(--spacing-md);
  align-items: start;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-gray-200);
  position: relative;
}

@media (min-width: 768px) {
  .cart-item-row {
    grid-template-columns: 90px 1fr;
    gap: 0 var(--spacing-lg);
    padding: var(--spacing-xl) 0;
  }
}

.cart-item-row:first-child {
  padding-top: 0;
}

.cart-item-row__remove {
  position: absolute;
  top: var(--spacing-lg);
  right: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
  z-index: 1;
}

.cart-item-row:first-child .cart-item-row__remove {
  top: 0;
}

@media (min-width: 768px) {
  .cart-item-row__remove {
    top: 50%;
    left: 0;
  }
  .cart-item-row:first-child .cart-item-row__remove {
    top: 50%;
    left: 0;
  }
}

.cart-item-row__remove:hover {
  color: var(--color-black);
}

.cart-item-row__image {
  grid-row: 1 / 3;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  /* background-color: var(--color-gray-100); */
}

.cart-item-row .cart-item-row__image{
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: flex-end;
}
.cart-item-row__image-inner {
  max-width: 70%;
}
.cart-item-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-row__info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  min-width: 0;
  padding-right: 28px;
}

.cart-item-row__name {
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
  line-height: 1.5;
  min-width: 0;
  flex: 1;
}

.cart-item-row__name a {
  color: var(--color-black);
  text-decoration: none;
}

.cart-item-row__price {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.cart-item-row__price del {
  font-weight: 400;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
}

.cart-item-row__price ins {
  text-decoration: none;
  font-weight: 500;
}

.cart-item-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-self: start;
  padding-right: 28px;
}

.cart-item-row__quantity {
  margin: 0;
}

.cart-item-row__attrs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--spacing-sm);
}

.cart-item-row__color {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
}

.cart-item-row__color-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gray-300);
  flex-shrink: 0;
}

.cart-item-row__size {
  font-size: var(--text-xs);
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart-item-row__cancel {
  grid-column: 2 / -1;
  margin-top: var(--spacing-xs);
}

.cart-item-row__cancel-btn {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: absolute;
  right: 0;
  bottom: 42px;
}

.cart-item-row__cancel-btn:hover {
  color: var(--color-black);
}

/* Checkout Promo Code */
.checkout-promo {
  margin-bottom: var(--spacing-lg);
}

.checkout-promo__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-xs);
  color: var(--color-black);
}

.checkout-promo__hint {

  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-sm);
  line-height: 1.5;
}

.checkout-promo__field {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-300);
  min-height: var(--spacing-xl);
}

.checkout-promo__input {
  flex: 1;
  padding: 0 var(--spacing-md) 0 0;
  border: none;
  background: transparent;
  
  outline: none;
  color: var(--color-black);
}

.checkout-promo__input::placeholder {
  color: var(--color-gray-placeholder);
}

.checkout-promo__btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
  border: none;
  background: transparent;
  height: auto;
  min-height: auto;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
}

.checkout-promo__btn:hover {
  color: var(--color-gray-600);
  background: transparent;
  border: none;
}

.checkout-promo__applied {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-black);
  margin-top: var(--spacing-sm);
  font-size: var(--text-sm);
}

.checkout-promo__applied-check {
  flex-shrink: 0;
  color: var(--color-black);
}

.checkout-promo__applied-code {
  flex: 1;
  min-width: 0;
}

.checkout-promo__remove {
  flex-shrink: 0;
  color: var(--color-gray-500);
  text-decoration: none;
  font-size: var(--text-lg);
  line-height: 1;
  transition: color var(--transition-fast);
}

.checkout-promo__remove:hover {
  color: var(--color-black);
}

/* Checkout Totals */
.checkout-totals {
  margin-bottom: var(--spacing-lg);
}

.checkout-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--text-sm);
}

.checkout-totals__row span:first-child {
  color: var(--color-black);
  font-weight: 400;
}

.checkout-totals__row span:last-child {
  font-weight: 600;
  color: var(--color-black);
}

.checkout-totals__row--subtotal {
  padding-top: var(--spacing-md);
}

.checkout-totals__row--subtotal span:first-child {
  font-weight: 600;
}

.checkout-totals__row--subtotal .checkout-totals__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.checkout-totals__original-price {
  color: var(--color-gray-500);
  text-decoration: line-through;
  font-weight: 400;
}

/* Checkout Next Button */
.checkout-next-btn {
  width: 100%;
  margin-bottom: var(--spacing-md);
}

/* Checkout Step Content */
.checkout-step {
  margin-bottom: var(--spacing-xl);
}

.checkout-step--hidden {
  display: none;
}

.checkout-step__title {
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xl);
  color: var(--color-black);
}

/* Checkout Section */
.checkout-section {
  margin-bottom: var(--spacing-xl);
}

.checkout-section__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-md);
  color: var(--color-black);
}

/* Shipping Type Toggle */
.shipping-type-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.shipping-type-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

.shipping-type-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.shipping-type-option__radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-gray-border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all var(--transition-fast);
}

.shipping-type-option input:checked + .shipping-type-option__radio {
  border-color: var(--color-black);
  border-width: 9px;
}

.shipping-type-option__label {
  color: var(--color-gray-600);
}

.shipping-type-option input:checked ~ .shipping-type-option__label {
  color: var(--color-black);
}

/* Checkout Fields */
.checkout-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.checkout-field {
  position: relative;
}

.checkout-field__input {
  width: 100%;
  padding: var(--spacing-md) 0 var(--spacing-xs);
  font-size: var(--text-sm);
  color: var(--color-black);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
  outline: none;
  transition: border-color var(--transition-fast);
}

.checkout-field__input::placeholder {
  color: var(--color-gray-placeholder);
}

.checkout-field__input:focus {
  border-bottom-color: var(--color-gray-300);
}

.checkout-field--select {
  position: relative;
}

.checkout-field__select {
  appearance: none;
  cursor: pointer;
  padding-right: var(--spacing-xl);
}

.checkout-field__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

.checkout-field--select:has(.select2-container) .checkout-field__arrow {
  display: none;
}

/* Continue Button */
.checkout-continue-btn {
  width: 100%;
  margin-top: var(--spacing-xl);
}

/* Payment - Mono Info Block */
.payment-mono-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-black);
  background-color: var(--color-gray-100);
  margin-bottom: var(--spacing-lg);
}

.payment-mono-info__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: 50%;
}

.payment-mono-info__icon svg {
  width: 22px;
  height: 22px;
}

.payment-mono-info__content {
  flex: 1;
  min-width: 0;
}

.payment-mono-info__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}

.payment-mono-info__description {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: 0;
  letter-spacing: 0.02em;
}

.payment-mono-notice {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: 1.6;
  margin: 0 0 var(--spacing-xl);
  max-width: 50ch;
}

/* Place Order Block - Privacy + Button */
.checkout-place-order {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  clear: both;
  width: 100%;
}

/* Override WooCommerce layout float rules */
.woocommerce-page #payment #place_order,
.woocommerce #payment #place_order,
.checkout-submit-btn {
  float: none !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  font-size: var(--text-xs);
  order: 2;
}

.woocommerce-page #payment .wc-terms-and-conditions,
.woocommerce #payment .wc-terms-and-conditions,
.woocommerce-page #payment .terms,
.woocommerce #payment .terms {
  float: none !important;
  padding: 0;
  width: 100%;
}

/* Privacy policy - compact, readable */
.woocommerce-checkout-payment .woocommerce-privacy-policy-text {
  margin-bottom: 0;
  padding: var(--spacing-md) 0;
  font-size: 11px;
  color: var(--color-gray-500);
  line-height: 1.6;
  order: 1;
}

.woocommerce-checkout-payment .woocommerce-privacy-policy-text p {
  margin: 0 0 var(--spacing-xs);
}

.woocommerce-checkout-payment .woocommerce-privacy-policy-text p:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout-payment .woocommerce-privacy-policy-text a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper {
  float: none !important;
  width: 100%;
  margin-bottom: var(--spacing-lg);
  order: 1;
}

/* Back Button */
.checkout-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm) 0;
  margin-top: var(--spacing-2xl);
  transition: color var(--transition-fast);
}

.checkout-back-btn:hover {
  color: var(--color-black);
}

.checkout-back-btn svg {
  flex-shrink: 0;
}

/* Payment step container - better spacing */
[data-checkout-step="3"] .checkout-step__title {
  margin-bottom: var(--spacing-xl);
}

[data-checkout-step="3"] #payment {
  margin-top: 0;
}

/* Order Summary Box (Sidebar) */
.order-summary-box {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.order-summary-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  /* border-bottom: 1px solid var(--color-gray-200); */
  align-items: center;
}

.order-summary-item__image {
  width: 72px;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-gray-100);
  /* border: 1px solid var(--color-gray-200); */
}

.order-summary-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-summary-item__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.order-summary-item__name {
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
  line-height: 1.4;
  color: var(--color-black);
}

.order-summary-item__attr {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.order-summary-item__color-dot {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-gray-300);
  flex-shrink: 0;
}

.order-summary-item__size-link {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.order-summary-item__price {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-black);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.order-summary-item__price del {
  font-weight: 400;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
}

.order-summary-item__price ins {
  text-decoration: none;
}

/* Order Summary Totals */
.order-summary-totals {
  padding-top: var(--spacing-lg);
}

.order-summary-totals__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--text-sm);
}

.order-summary-totals__row span:first-child {
  color: var(--color-gray-600);
}

.order-summary-totals__row span:last-child {
  font-weight: 500;
  color: var(--color-black);
}

.order-summary-totals__row--shipping span:first-child {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.order-summary-totals__row--total {
  padding-top: var(--spacing-lg);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--text-base);
}

.order-summary-totals__row--total span:first-child {
  font-weight: 500;
  color: var(--color-black);
}

.order-summary-totals__row--total span:last-child {
  font-weight: 500;
  font-size: var(--text-lg);
}

.order-summary-totals__row--total .checkout-totals__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.order-summary-totals__row--total .checkout-totals__original-price {
  color: var(--color-gray-500);
  text-decoration: line-through;
  font-weight: 400;
}

/* Empty Cart */
.cart-empty {
  text-align: center;
  padding: var(--spacing-4xl) 0;
}

.cart-empty p {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-xl);
}

/* Thank You Page */
.thankyou-page {
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
}

.thankyou-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.thankyou-title {
  font-size: clamp(44px, 5.2vw, 56px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0 0 6px;
}

@media (min-width: 768px) {
  .thankyou-title {
    font-size: var(--text-2xl);
  }
}

.thankyou-subtitle {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.15;
  margin: 0 0 clamp(64px, 8vw, 96px);
}

@media (min-width: 768px) {
  .thankyou-subtitle {
    font-size: var(--text-2xl);
  }
}

.thankyou-message {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-xl);
}

.thankyou-products {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
  margin-bottom: clamp(48px, 7vw, 84px);
}

.thankyou-product {
  width: clamp(88px, 12vw, 140px);
  text-align: center;
}

@media (min-width: 768px) {
  .thankyou-product {
    width: 100px;
  }
}

.thankyou-product__image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: transparent;
}

.thankyou-product__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thankyou-product__qty {
  display: block;
  margin-bottom: 10px;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1;
  color: var(--color-gray-500);
  text-align: right;
}

.thankyou-details {
  margin-bottom: clamp(42px, 6vw, 70px);
  text-align: left;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.thankyou-details__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: var(--spacing-lg);
  align-items: baseline;
  padding: 10px 0;
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.thankyou-details__label {
  /* font-size: var(--text-2xl); */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-black);
  line-height: 1.2;
}

.thankyou-details__value {
  /* font-size: var(--text-2xl); */
  color: var(--color-black);
  line-height: 1.2;
}

.thankyou-actions {
  margin-top: var(--spacing-xl);
}

.thankyou-btn {
  width: 340px;
  max-width: 620px;
  min-height: 52px;
  letter-spacing: 0.18em;
  /* font-size: var(--text-2xl); */
}

@media (max-width: 767px) {
  .thankyou-title {
    font-size: 24px;
  }

  .thankyou-subtitle {
    font-size: 24px;
    margin-bottom: 48px;
  }

  .thankyou-products {
    gap: 18px;
    margin-bottom: 42px;
  }

  .thankyou-product {
    width: 80px;
  }

  .thankyou-product__qty {
    font-size: var(--text-base);
    margin-bottom: 8px;
  }

  .thankyou-details {
    max-width: 100%;
  }

  .thankyou-details__row {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    padding: 12px 0;
  }

  .thankyou-details__label,
  .thankyou-details__value {
    /* font-size: var(--text-lg); */
  }

  .thankyou-btn {
    min-height: 64px;
    font-size: var(--text-lg);
    letter-spacing: 0.12em;
    width: 100%;
  }
}

/* WooCommerce Order Details on Thank You page */
.thankyou-page .woocommerce-order-details,
.thankyou-page .woocommerce-customer-details {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
  display: none;
}

.thankyou-page .woocommerce-order-details {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-gray-200);
}

.thankyou-page .woocommerce-order-details__title,
.thankyou-page .woocommerce-column__title {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--spacing-lg);
  color: var(--color-black);
}

/* Order details table */
.thankyou-page .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.thankyou-page .woocommerce-table--order-details thead th {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-black);
  text-align: left;
  color: var(--color-black);
}

.thankyou-page .woocommerce-table--order-details thead th:last-child {
  text-align: right;
}

.thankyou-page .woocommerce-table--order-details td {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: top;
  color: var(--color-black);
}

.thankyou-page .woocommerce-table--order-details td:last-child {
  text-align: right;
  white-space: nowrap;
}

.thankyou-page .woocommerce-table--order-details td.product-name {
  font-weight: 400;
}

.thankyou-page .woocommerce-table--order-details td.product-name a {
  color: var(--color-black);
  text-decoration: none;
}

.thankyou-page .woocommerce-table--order-details td.product-name a:hover {
  text-decoration: underline;
  opacity: 1;
}

.thankyou-page .woocommerce-table--order-details tfoot th {
  font-size: var(--text-sm);
  font-weight: 400;
  padding: var(--spacing-sm) 0;
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-black);
}

.thankyou-page .woocommerce-table--order-details tfoot td {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--spacing-sm) 0;
  text-align: right;
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-black);
}

.thankyou-page .woocommerce-table--order-details tfoot tr:last-child th,
.thankyou-page .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: none;
  padding-top: var(--spacing-md);
  font-weight: 500;
}

/* Customer details (billing & shipping addresses) */
.thankyou-page .woocommerce-customer-details {
  margin-top: var(--spacing-2xl);
}

.thankyou-page .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
}

@media (max-width: 767px) {
  .thankyou-page .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  .checkout-flow__layout{gap: var(--spacing-sm);}
}

.thankyou-page .woocommerce-column--billing-address,
.thankyou-page .woocommerce-column--shipping-address {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-gray-600);
}

.thankyou-page .woocommerce-column--billing-address address,
.thankyou-page .woocommerce-column--shipping-address address {
  font-style: normal;
}

.thankyou-page .woocommerce-column--billing-address address p,
.thankyou-page .woocommerce-column--shipping-address address p {
  margin: 0;
}

/* Hide the dummy 00000 postcode from display */
.thankyou-page .woocommerce-customer-details address br + br {
  display: none;
}

/* Checkout Field Error State */
.checkout-field__input.error {
  border-bottom-color: var(--color-error);
}

/* Nova Poshta City Dropdown - see consolidated styles below */

/* WooCommerce Checkout Overrides */
.woocommerce-checkout .woocommerce-NoticeGroup {
  margin-bottom: var(--spacing-xl);
}

.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info {
  list-style: none;
  padding: var(--spacing-md) var(--spacing-lg);
  margin: 0 0 var(--spacing-lg);
}

/* Checkout notices inside theme layout — monochrome, matches checkout fields / buttons */
.checkout-flow .woocommerce-notices-wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto var(--spacing-xl);
}

.checkout-flow .woocommerce-notices-wrapper > *:last-child {
  margin-bottom: 0 !important;
}

.checkout-flow .woocommerce-notices-wrapper .woocommerce-error,
.checkout-flow .woocommerce-notices-wrapper .woocommerce-info,
.checkout-flow .woocommerce-notices-wrapper .woocommerce-message,
.checkout-flow .woocommerce-NoticeGroup-checkout .woocommerce-error,
.checkout-flow .woocommerce-NoticeGroup-checkout .woocommerce-info {
  list-style: none;
  margin: 0 0 var(--spacing-md) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-black) !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
}

.checkout-flow .woocommerce-notices-wrapper .woocommerce-error,
.checkout-flow .woocommerce-NoticeGroup-checkout .woocommerce-error {
  border-left: 3px solid var(--color-error) !important;
}

.checkout-flow .woocommerce-notices-wrapper .woocommerce-error::before,
.checkout-flow .woocommerce-notices-wrapper .woocommerce-info::before,
.checkout-flow .woocommerce-notices-wrapper .woocommerce-message::before,
.checkout-flow .woocommerce-NoticeGroup-checkout .woocommerce-error::before {
  display: none !important;
}

.checkout-flow .woocommerce-notices-wrapper .woocommerce-error li,
.checkout-flow .woocommerce-notices-wrapper .woocommerce-info li,
.checkout-flow .woocommerce-NoticeGroup-checkout .woocommerce-error li {
  margin: 0 0 var(--spacing-xs);
  padding: 0;
}

.checkout-flow .woocommerce-notices-wrapper .woocommerce-error li:last-child,
.checkout-flow .woocommerce-notices-wrapper .woocommerce-info li:last-child,
.checkout-flow .woocommerce-NoticeGroup-checkout .woocommerce-error li:last-child {
  margin-bottom: 0;
}

.checkout-flow .woocommerce-notices-wrapper a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-flow .woocommerce-notices-wrapper a:hover {
  color: var(--color-gray-600);
}

/* Hide "added to cart" messages on checkout and cart pages - they're not useful there */
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-message {
  display: none !important;
}

/* Hide duplicate page titles on checkout and cart */
.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .page-header,
.woocommerce-cart .page-header {
  display: none;
}

/* Hide default WooCommerce checkout elements we don't need */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields {
  display: none;
}

/* Hide shipping calculator in checkout sidebar */
.woocommerce-checkout .woocommerce-shipping-calculator {
  display: none;
}

/* Shipping methods in order summary sidebar */
.woocommerce-shipping-methods {
  list-style: none;
  padding: 0;
  margin: var(--spacing-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.woocommerce-shipping-methods li label {
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
}

.woocommerce-shipping-methods li input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--color-gray-400);
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.woocommerce-shipping-methods li input[type="radio"]:checked {
  border-color: var(--color-black);
  border-width: 9px;
}

/* Single shipping method (no choice needed) */
.woocommerce-shipping-methods li input[type="hidden"] + label {
  font-weight: 500;
}

/* Shipping totals row layout */
.order-summary-totals__row--shipping {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.order-summary-totals__row--shipping > span:first-child {
  flex-shrink: 0;
}

/* Custom div-based shipping template */
.woocommerce-shipping-totals.shipping {
  width: 100%;
}

.woocommerce-shipping-totals .shipping-methods-wrapper {
  width: 100%;
}

/* Shipping method section in step 2 */
.checkout-section--shipping-method {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
}

.checkout-section--shipping-method .woocommerce-shipping-methods {
  margin: 0;
}

.checkout-section--shipping-method .woocommerce-shipping-totals.shipping {
  margin: 0;
}

/* Сайдбар: приховати вибір доставки на кроці «Оплата» (індикатор data-step="3"), коли вже є read-only summary. Без :has() — не застосовувати глобально display:none. */
.checkout-flow:has(.checkout-steps__item[data-step="3"].is-active) .checkout-section.checkout-section--shipping-method {
  display: none;
}

/* Courier address fields */
.courier-address-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-md);
  gap: var(--spacing-md);
}

.checkout-fields__row {
  display: flex;
  gap: var(--spacing-md);
}

.checkout-field--half {
  flex: 1;
}

/* Shipping summary on step 3 (read-only) */
.checkout-section--shipping-summary {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.shipping-summary__method {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-black);
  margin: 0 0 var(--spacing-xs);
}

.shipping-summary__detail {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0 0 2px;
}

/* Sidebar shipping value (read-only) */
.order-summary-totals__shipping-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.order-summary-totals__shipping-method {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  font-weight: 400;
}

.order-summary-totals__shipping-cost {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-black);
}

/* Loading state for form */
.checkout-flow.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.checkout-flow__sidebar .checkout-step__title{
  display: none;
}
/* Mobile Order Summary Toggle */
@media (max-width: 1023px) {
  .checkout-flow__sidebar {
    background-color: var(--color-gray-50);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }
  
  .checkout-flow__layout {
    display: flex;
    flex-direction: column;
  }
  
  .checkout-flow__sidebar {
    order: 2;
  }
  
  .checkout-flow__main {
    order: 1;
  }
  .checkout-flow__sidebar .checkout-step__title{
    display: block;
    font-weight: 700;
  }
}

/* Mobile Cart Item Layout */
@media (max-width: 767px) {
  .cart-item-row {
    grid-template-columns: 16px 60px 1fr;
    gap: var(--spacing-sm);
  }
  
  .cart-item-row__image {
    width: 60px;
  }
  
  .cart-item-row__info {
    grid-column: 3;
  }
  
  .cart-item-row__meta {
    grid-column: 3;
  }
  
  .cart-item-row__cancel {
    grid-column: 2 / -1;
    margin-top: var(--spacing-sm);
    text-align: right;
  }
  
  .checkout-promo {
    margin-bottom: var(--spacing-lg);
  }
  .checkout-flow__layout .cart-item-row__remove {display: none;}
}

/* Legacy Cart/Checkout Page Support */
.cart-page {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
}
.error404 .page-title{text-align: center;}
.checkout-page {
  /* padding: var(--spacing-2xl) 0 var(--spacing-4xl); */
}

/* Nova Poshta Fields */
.nova-poshta-fields {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
}

/* Order Summary */
.checkout-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-xl));
  align-self: start;
}

.order-summary {
  background-color: var(--color-gray-100);
  padding: var(--spacing-xl);
}

.order-summary__title {
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xl);
  color: var(--color-black);
}

.order-summary__items {
  margin-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.order-summary__item {
  display: flex;
  gap: var(--spacing-md);
  padding: 0;
}

.order-summary__item-image {
  width: 70px;
  aspect-ratio: 3/4;
  background-color: var(--color-white);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.order-summary__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-summary__item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 500;
  border-radius: 50%;
  border: 2px solid var(--color-white);
}

.order-summary__item-details {
  flex: 1;
  min-width: 0;
}

.order-summary__item-title {
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
  color: var(--color-black);
}

.order-summary__item-variant {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: 1.4;
}

.order-summary__item-price {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-black);
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
}

/* ============================================
   AUTH PAGES (Login/Register)
   ============================================ */
.auth-page {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--header-height));
}

@media (min-width: 1024px) {
  .auth-page {
    grid-template-columns: 1fr 1fr;
  }
}

.auth-page__image {
  display: none;
  background-color: var(--color-gray-100);
  overflow: hidden;
}

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

.auth-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.auth-image--placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-color: var(--color-gray-200);
}

.auth-page__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--container-padding-mobile);
  flex-wrap: wrap;
}
.woocommerce-notices-wrapper {
  width: 100%;
}
.auth-form {
  width: 100%;
  max-width: 380px;
}

.auth-form__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--spacing-sm);
}

.auth-form__subtitle {
  font-size: var(--text-sm);
  color: var(--color-black);
  margin: 0 0 var(--spacing-2xl);
  text-transform: uppercase;
}

.auth-form__subtitle a {
  color: var(--color-black);
  font-weight: 500;
  text-decoration: none;
}

.auth-form__subtitle a:hover {
  text-decoration: underline;
}

.auth-form__submit {
  margin-top: var(--spacing-lg);
}

.auth-form__footer {
  margin-top: var(--spacing-xl);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-align: center;
}

.auth-form__footer a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-gray-500);
}

.auth-form__notice {
  margin-bottom: var(--spacing-lg);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-gray-100);
  border-left: 2px solid var(--color-black);
}

.auth-form__legal {
  margin-top: var(--spacing-xs);
  /* font-size: var(--text-xs); */
  color: var(--color-gray-500);
  line-height: 1.2;
}

.auth-form__forgot {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-form__forgot:hover {
  color: var(--color-black);
}

/* Inline message banners */
.auth-form__messages {
  margin-bottom: var(--spacing-md);
  min-height: 0;
}

.auth-message {
  padding: var(--spacing-sm) var(--spacing-md);
  /* font-size: var(--text-sm); */
  line-height: 1.5;
  border-radius: 0;
}

.auth-message--error {
  background-color: #fff5f5;
  color: #c00;
  border-left: 2px solid #c00;
}

.auth-message--success {
  background-color: var(--color-success);
  color: var(--color-white);
  border-left: 2px solid var(--color-success);
}
.auth-form .form-input{
  padding-top: 0;
}
/* Row layout for remember-me + forgot */
.form-group--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

/* Password input wrapper (input + show/hide toggle) */
.form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-wrap .form-input {
  padding-right: 44px;
  flex: 1;
}

.form-input-toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-gray-400);
  line-height: 1;
  display: flex;
  align-items: center;
}

.form-input-toggle-pw:hover {
  color: var(--color-black);
}

/* Password strength indicator */
.password-strength {
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 10px;
}

.password-strength__bar {
  flex: 1;
  height: 3px;
  background-color: var(--color-gray-200);
  position: relative;
  overflow: hidden;
}

.password-strength__fill {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}

.password-strength__bar--1 .password-strength__fill {
  width: 33%;
  background-color: #ef4444;
}

.password-strength__bar--2 .password-strength__fill {
  width: 66%;
  background-color: #f59e0b;
}

.password-strength__bar--3 .password-strength__fill {
  width: 100%;
  background-color: #22c55e;
}

.password-strength__label {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  white-space: nowrap;
}

/* Form hint (error/info below input) */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-xs);
}

.form-hint--error {
  color: #c00;
}

/* Button loading spinner */
.btn-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   ACCOUNT PAGES
   ============================================ */
.account-page {
  /* padding: var(--spacing-lg) 0 var(--spacing-3xl); */
}

@media (min-width: 768px) {
  .account-page {
    /* padding: var(--spacing-2xl) 0 var(--spacing-4xl); */
  }
}

.account-page__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .account-page__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--spacing-4xl);
  }
}

.account-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
}

@media (min-width: 768px) {
  .account-page__inner {
    grid-template-columns: 165px 1fr;
    gap: var(--spacing-lg);
  }
}
@media (min-width: 1024px) {
  .account-page__inner {
    grid-template-columns: 310px 1fr;
    gap: var(--spacing-lg);
  }
}

.account-sidebar {
  border-right: none;
}
@media (min-width: 768px) {
  .account-sidebar {
    padding-right: var(--spacing-xl);
    border-right: 1px solid var(--color-gray-200);
  }
}
@media (min-width: 1024px) {
  .account-sidebar {
    padding-right: var(--spacing-3xl);
    border-right: 1px solid var(--color-gray-200);
  }
}


.account-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-nav__link {
  display: block;
  padding: var(--spacing-sm) 0;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.account-nav__link:hover {
  color: var(--color-black);
  opacity: 1;
}

.account-nav__link.is-active {
  color: var(--color-black);
  font-weight: 500;
  border-bottom: 1px solid var(--color-black);
  padding-bottom: calc(var(--spacing-sm) - 1px);
  opacity: 1;
}

.account-nav__link--logout {
  color: var(--color-gray-400);
  margin-top: var(--spacing-md);
}

.account-content {
  max-width: 600px;
}

.account-section {
  margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
  .account-section {
    margin-bottom: var(--spacing-3xl);
  }
}

.account-section__title {
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-sm);
}



.account-section__subtitle {
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-xl);
  /* margin-top: var(--spacing-3xl); */
}

.account-section--security {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-3xl);
  /* border-top: 1px solid var(--color-gray-200); */
}
@media (min-width: 768px) {
  .account-section__title, .account-section__subtitle {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-2xl);
  }
}
.account-form {
  max-width: 600px;
}

.account-form .form-input.is-invalid {
  border-bottom-color: var(--color-error, #dc3545);
}

.account-form .form-input-error {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-error, #dc3545);
  margin-top: var(--spacing-xs);
}

/* My Account — edit address: one column, label above input (override global .form-row 2-col grid). */
.account-section .edit-address .woocommerce-address-fields__field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 600px;
}

.account-section .edit-address .woocommerce-address-fields__field-wrapper > p.form-row,
.account-section .edit-address .woocommerce-address-fields__field-wrapper p.form-row.form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  width: 100%;
  max-width: 100%;
  float: none;
  clear: both;
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  gap: var(--spacing-xs);
  grid-template-columns: none;
}

@media (min-width: 768px) {
  .account-section .edit-address .woocommerce-address-fields__field-wrapper > p.form-row,
  .account-section .edit-address .woocommerce-address-fields__field-wrapper p.form-row.form-group {
    grid-template-columns: 1fr;
    display: flex;
  }
}

.account-section .edit-address .woocommerce-address-fields__field-wrapper .woocommerce-input-wrapper {
  width: 100%;
}

.account-section .edit-address .woocommerce-address-fields__field-wrapper label,
.account-section .edit-address .woocommerce-address-fields__field-wrapper .form-label {
  display: block;
  width: 100%;
  margin: 0 0 var(--spacing-xs);
}

.account-section .edit-address .woocommerce-address-fields__field-wrapper input.form-input,
.account-section .edit-address .woocommerce-address-fields__field-wrapper select.form-input,
.account-section .edit-address .woocommerce-address-fields__field-wrapper textarea.form-input,
.account-section .edit-address .woocommerce-address-fields__field-wrapper select.country_select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-sm) 0;
  border: none;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-base);
  font-family: inherit;
  background: transparent;
  border-radius: 0;
}

.account-section .edit-address .woocommerce-address-fields__field-wrapper textarea.form-input {
  min-height: 5rem;
  resize: vertical;
}

/* SelectWoo / Select2 — theme (checkout NP warehouse + My Account edit address; same underline + black highlight). */
.account-section .edit-address .select2-container,
body.checkout-page .checkout-field--select .select2-container {
  width: 100% !important;
  max-width: 100%;
}

.account-section .edit-address .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 0;
  border: none;
  border-bottom: 1px solid var(--color-gray-200);
  border-radius: 0;
  background: transparent;
  padding: var(--spacing-sm) 0;
}

body.checkout-page .checkout-field--select .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 0;
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
  border-radius: 0;
  background: transparent;
  padding: var(--spacing-md) 0;
}

.account-section .edit-address .select2-container--default .select2-selection--single .select2-selection__rendered,
body.checkout-page .checkout-field--select .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  padding-right: 1.75rem;
  line-height: 1.4;
  font-family: inherit;
  color: inherit;
}

.account-section .edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: var(--text-base);
}

body.checkout-page .checkout-field--select .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: var(--text-sm);
}

.account-section .edit-address .select2-container--default .select2-selection--single .select2-selection__arrow,
body.checkout-page .checkout-field--select .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0;
  top: 0;
}

.account-section .edit-address .select2-container--default.select2-container--open .select2-selection--single,
.account-section .edit-address .select2-container--default.select2-container--focus .select2-selection--single {
  border-bottom-color: var(--color-gray-400);
}

body.checkout-page .checkout-field--select .select2-container--default.select2-container--open .select2-selection--single,
body.checkout-page .checkout-field--select .select2-container--default.select2-container--focus .select2-selection--single {
  border-bottom-color: var(--color-gray-400);
}

.account-section .edit-address .select2-dropdown {
  border-color: var(--color-gray-200);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-base);
}

body.checkout-page .checkout-field--select .select2-dropdown {
  border-color: var(--color-gray-300);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-sm);
}

.account-section .edit-address .select2-search--dropdown .select2-search__field,
body.checkout-page .checkout-field--select .select2-search--dropdown .select2-search__field {
  border-color: var(--color-gray-200);
  border-radius: 0;
  font-family: inherit;
}

body.checkout-page .checkout-field--select .select2-search--dropdown .select2-search__field {
  border-color: var(--color-gray-300);
}

/* Account state dropdown when appended to body; other checkout Select2 not inside .checkout-field--select. */
body.twoa-account-edit-address .select2-dropdown {
  border-color: var(--color-gray-200);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-base);
}

body.checkout-page .select2-dropdown {
  border-color: var(--color-gray-300);
  border-radius: 0;
  font-family: inherit;
  font-size: var(--text-sm);
}

/* NP warehouse SelectWoo: dropdown on body must stack above footer / layout */
body.checkout-page .select2-container--open {
  z-index: 10060;
}

body.checkout-page .select2-container--open .select2-dropdown {
  z-index: 10061;
}

body.twoa-account-edit-address .select2-results__option--highlighted,
body.twoa-account-edit-address .select2-container--default .select2-results__option--highlighted,
body.checkout-page .select2-results__option--highlighted,
body.checkout-page .select2-container--default .select2-results__option--highlighted {
  background-color: var(--color-gray-100) !important;
  color: var(--color-black) !important;
}

body.twoa-account-edit-address .select2-results__option[aria-selected="true"],
body.checkout-page .select2-results__option[aria-selected="true"] {
  background-color: var(--color-gray-100);
  color: var(--color-black);
}

body.twoa-account-edit-address .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
body.checkout-page .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
  background-color: var(--color-gray-100) !important;
  color: var(--color-black) !important;
}

body.twoa-account-edit-address .select2-search--dropdown .select2-search__field:focus,
body.checkout-page .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-black);
  outline: 2px solid var(--color-black);
  outline-offset: 1px;
  box-shadow: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group--submit {
  margin-top: var(--spacing-xl);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-xs);
}

/* Orders Table */
.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th,
.orders-table td {
  padding: var(--spacing-md) 0;
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.orders-table th {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
  padding-bottom: var(--spacing-lg);
}

.orders-table td {
  padding: var(--spacing-lg) 0;
  padding-right: var(--spacing-md);
}

.orders-table td a {
  text-decoration: none;
  color: var(--color-black);
}

.orders-table td a:hover {
  text-decoration: underline;
}

.orders-table__cell--ttn {
  font-size: var(--text-xs);
}

.orders-table__cell--ttn a {
  font-family: monospace, monospace;
  word-break: break-all;
}

.orders-table__no-ttn {
  color: var(--color-gray-400);
}

/* My Account — view order endpoint */
.account-view-order .woocommerce-order-details,
.account-view-order .woocommerce-customer-details,
.account-view-order .woocommerce-OrderUpdates {
  margin-top: var(--spacing-2xl);
}

.account-view-order .woocommerce-order-details__title,
.account-view-order .woocommerce-column__title,
.account-view-order .woocommerce-OrderUpdates-title {
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-lg);
}

.account-view-order .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
}

.account-view-order .woocommerce-table--order-details th,
.account-view-order .woocommerce-table--order-details td {
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-md) 0;
  text-align: left;
  font-size: var(--text-sm);
}

.account-view-order .woocommerce-table--order-details thead th {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.account-view-order .woocommerce-table--order-details td:last-child,
.account-view-order .woocommerce-table--order-details th:last-child {
  text-align: right;
}

.account-view-order .woocommerce-table--order-details td.product-name a {
  color: var(--color-black);
  text-decoration: none;
}

.account-view-order .woocommerce-table--order-details td.product-name a:hover {
  text-decoration: underline;
}

.account-view-order__meta {
  display: grid;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.account-view-order__meta-item {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.account-view-order__meta-label {
  /* font-size: var(--text-xs); */
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
}

.account-view-order__meta-value {
  font-size: var(--text-sm);
}

.account-view-order__pay-box {
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0 var(--spacing-2xl);
}

.account-view-order__pay-note {
  margin-bottom: var(--spacing-md);
  font-size: var(--text-sm);
}

.account-view-order__block {
  margin-top: var(--spacing-2xl);
}

.account-view-order__heading {
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-lg);
}

.account-view-order__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* border-top: 1px solid var(--color-gray-200); */
}

.account-view-order__item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.account-view-order__item-thumb-wrap {
  width: 72px;
}

.account-view-order__item-image {
  display: block;
  width: 100%;
  height: auto;
}

.account-view-order__item-name {
  margin: 0;
  font-size: var(--text-sm);
}

.account-view-order__item-name a {
  text-decoration: none;
  color: var(--color-black);
}

.account-view-order__item-name a:hover {
  text-decoration: underline;
}

.account-view-order__item-qty {
  font-weight: 400;
}

.account-view-order__item-meta {
  margin-top: var(--spacing-xs);
  /* font-size: var(--text-xs); */
  list-style: none;
  padding: 0;
}

.account-view-order__item-meta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-view-order__item-meta li {
  margin: 0;
}

.account-view-order__item-meta p {
  display: inline;
  margin: 0;
}

.account-view-order__item-color {
  margin: var(--spacing-xs) 0 0;
  /* font-size: var(--text-xs); */
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-view-order__item-color-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-gray-300);
  /* border-radius: 50%; */
  display: inline-block;
}

.account-view-order__item-meta li {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.account-view-order__item-total {
  font-size: var(--text-sm);
  white-space: nowrap;
}

.account-view-order__totals {
  margin-top: var(--spacing-lg);
  /* border-top: 1px solid var(--color-gray-200); */
}

.account-view-order__total-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  /* border-bottom: 1px solid var(--color-gray-200); */
  /* font-size: var(--text-sm); */
}

.account-view-order__total-row--grand {
  font-weight: 500;
}

.account-view-order__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
  display: none;
}

.account-view-order__addresses {
  margin-top: var(--spacing-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.account-view-order__address {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
  /* font-size: var(--text-sm); */
}

.account-view-order__address p {
  margin: var(--spacing-xs) 0 0;
}

@media (min-width: 992px) {
  .account-view-order__addresses {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .account-view-order__item {
    grid-template-columns: 56px 1fr;
  }

  .account-view-order__item-thumb-wrap {
    width: 56px;
  }

  .account-view-order__item-total {
    grid-column: 2;
  }
}

/* Wishlist — CSS Grid (desktop: 3 cols; mobile: product + price/action rail, Figma) */
.wishlist-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.wishlist-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}

.wishlist-table__tbody {
  display: flex;
  flex-direction: column;
}

.wishlist-table__header-row,
.wishlist-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--spacing-md);
  border-bottom: 1px solid var(--color-gray-200);
}

.wishlist-table__rail,
.wishlist-table__rail--head {
  display: contents;
}

.wishlist-table__header {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  text-align: left;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;
}

.wishlist-table__header--price {
  white-space: nowrap;
}

.wishlist-table__header--action {
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
  min-width: 210px;
}

.wishlist-table__cell {
  font-weight: 600;
}

.wishlist-table__cell--action .btn.btn--secondary.btn--sm {
  width: 100%;
  min-width: 210px;
}

@media screen and (max-width: 768px) {
  .wishlist-table__cell--action .btn.btn--secondary.btn--sm {
    width: auto;
    border: none !important;
    min-width: 0;
  }
  span.wishlist-table__add-icon path {
    stroke: var(--color-gray-500);
  }
}

.wishlist-table__cell--product {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-right: var(--spacing-lg);
  min-width: 0;
}

.wishlist-table__cell--price {
  white-space: nowrap;
  text-align: left;
}

/* WooCommerce sale price uses <del>/<ins>; <ins> has UA default underline — reset like cart/product. */
/* .wishlist-table__cell--price del {
  font-weight: 400;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
  text-decoration: line-through;
}

.wishlist-table__cell--price ins {
  text-decoration: none;
  font-weight: 500;
} */

.wishlist-table__cell--price ins .woocommerce-Price-amount,
.wishlist-table__cell--price ins,
.wishlist-table__cell--price ins bdi {
  text-decoration: none;
}

.wishlist-table__cell--action {
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}

.wishlist-table__add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.wishlist-table__add-icon {
  display: none;
  line-height: 0;
}

.wishlist-table__add-icon svg {
  display: block;
}

.wishlist-table__remove {
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  padding: var(--spacing-xs);
  line-height: 1;
  transition: color var(--transition-fast);
}

.wishlist-table__remove:hover {
  color: var(--color-black);
}

.wishlist-table__product {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  text-decoration: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.wishlist-table__image {
  width: 60px;
  aspect-ratio: 3/4;
  background-color: var(--color-gray-100);
  flex-shrink: 0;
}

.wishlist-table__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wishlist-table__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0;
}

.wishlist-table__name {
  /* font-size: var(--text-sm); */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-black);
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wishlist-table__attr {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.wishlist-table__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.wishlist-table__color-label {
  flex-shrink: 0;
  font-weight: inherit;
}

.wishlist-table__color-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  align-items: center;
}

.wishlist-table__color-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.wishlist-table__swatch {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid var(--color-gray-300);
  box-sizing: border-box;
}

.wishlist-table__color-name {
  line-height: 1.2;
}

.wishlist-table__sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: 0;
}

.wishlist-table__sizes-label {
  flex-shrink: 0;
  font-weight: inherit;
}

.wishlist-table__sizes-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-sm);
  line-height: 1.2;
}

.wishlist-table__size-item {
  display: inline-block;
  line-height: inherit;
}

@media (max-width: 600px) {
  .wishlist-table__thead {
    display: none;
  }

  .wishlist-table__header-row,
  .wishlist-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
  }

  .wishlist-table__row .wishlist-table__rail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    gap: var(--spacing-md);
  }

  .wishlist-table__cell--product {
    padding-right: 0;
    gap: var(--spacing-sm);
    align-items: flex-start;
  }

  .wishlist-table__remove {
    align-self: flex-start;
    margin-top: 2px;
  }

  .wishlist-table__product {
    gap: var(--spacing-md);
    align-items: flex-start;
  }

  .wishlist-table__image {
    width: 56px;
  }

  .wishlist-table__name {
    padding-top: 0;
  }

  .wishlist-table__cell--price {
    font-size: var(--text-xs);
    text-align: right;
    white-space: normal;
    text-transform: uppercase;
  }

  .wishlist-table__cell--action {
    text-align: right;
  }

  .wishlist-table__color-name,
  .wishlist-table__sizes-list,
  .wishlist-table__size-item {
    text-transform: lowercase;
  }

  .wishlist-table__size-item {
    /* text-decoration: underline; */
    text-underline-offset: 3px;
  }

  .wishlist-table__add-text {
    display: none;
  }

  .wishlist-table__add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wishlist-table__cell--action .wishlist-table__add-to-cart {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
  }
}

/* Delivery Address */
.delivery-address {
  margin-bottom: var(--spacing-xl);
}

.delivery-address__label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
  margin-bottom: var(--spacing-sm);
}

.delivery-address__content {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-black);
  margin-bottom: var(--spacing-md);
}

.delivery-address__content p {
  margin: 0;
}

.delivery-address__edit {
  font-size: var(--text-sm);
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.delivery-address__empty {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-md);
}

.account-empty {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ============================================
   BLOG
   ============================================ */
.blog-page {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
  max-width: 1000px;
  margin: 0 auto;
}

.blog-page .container--full {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.blog-page__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

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

.blog-card__link {
  display: block;
}

.blog-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: var(--color-gray-100);
  margin-bottom: var(--spacing-md);
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.03);
}

.blog-card__placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-200);
}

.blog-card__content {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--spacing-sm);
}

.blog-card__title {
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
  line-height: 1.4;
  color: var(--color-black);
}

.blog-card__date {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.blog-page__more {
  text-align: center;
  margin-top: var(--spacing-3xl);
}

.blog-page__empty {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  padding: var(--spacing-4xl) 0;
}

/* Article */
.article-page {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-xl);
}

.article-back:hover {
  color: var(--color-black);
  opacity: 1;
}

.article-header {
  margin-bottom: var(--spacing-xl);
}

.article-date {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-sm);
}

.article-title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.3;
  max-width: 800px;
}

.article-image {
  max-width: 900px;
  margin-bottom: var(--spacing-2xl);
}

.article-image__img {
  width: 100%;
  height: auto;
}

.article-content {
  max-width: 700px;
  font-size: var(--text-base);
  line-height: 1.8;
}

.article-content h2,
.article-content h3 {
  font-size: var(--text-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: var(--spacing-2xl) 0 var(--spacing-md);
}

.article-content p {
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-700);
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-page {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
}

.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
}

@media (min-width: 1024px) {
  .contact-page__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-info__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-2xl);
}

.contact-info__item {
  margin-bottom: var(--spacing-lg);
}

.contact-info__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-xs);
  color: var(--color-gray-500);
}

.contact-info__value {
  font-size: var(--text-sm);
  color: var(--color-black);
}

.contact-form-wrapper {
  max-width: 500px;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-section {
  padding: var(--spacing-3xl) 0;
}

.about-section__text {
  max-width: 900px;
  margin: 0 auto;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-gray-600);
}

.about-image-full {
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

.about-image-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.about-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  padding: var(--spacing-3xl) 0;
}

@media (min-width: 768px) {
  .about-split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.about-split__image {
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--color-gray-200);
}

.about-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-split__content {
  padding: 0 var(--spacing-xl);
}

.about-split__title {
  font-size: var(--text-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--spacing-md);
}

.about-split__text {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-gray-600);
}

/* ============================================
   OVERLAY
   ============================================ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   LOADING STATES
   ============================================ */
.loading {
  pointer-events: none;
  opacity: 0.5;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-top-color: var(--color-black);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   ALERTS & NOTICES
   ============================================ */
.alert {
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  font-size: var(--text-sm);
}

.alert--success {
  background-color: var(--color-success);
  border: 1px solid #86efac;
  color: var(--color-white);
}

.alert--error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.alert--warning {
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.alert--info {
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  color: #404040;
}

/* ============================================
   WOOCOMMERCE OVERRIDES
   ============================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: var(--spacing-md) var(--spacing-lg) !important;
  margin-bottom: var(--spacing-lg) !important;
  font-size: var(--text-sm) !important;
  border-top: none !important;
}

.woocommerce-message {
  background-color: #fff !important;
  border: 1px solid var(--wp--preset--color--cyan-bluish-gray) !important;
  color: var(--color-black) !important;
}

.woocommerce-message::before {
  color: #166534 !important;
}

.woocommerce-info {
  background-color: #f5f5f5 !important;
  border: 1px solid #e5e5e5 !important;
  color: #404040 !important;
}

.woocommerce-info::before {
  color: #404040 !important;
}

.woocommerce-error {
  background-color: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

.woocommerce-error::before {
  color: #dc2626 !important;
}

/* Reset WooCommerce default button styles - match theme .btn (gray outline → black on hover/active). */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: var(--btn-height);
  min-height: var(--btn-height);
  font-family: var(--font-primary);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  border: var(--btn-border-width) solid var(--color-gray-500);
  background-color: transparent;
  color: var(--color-gray-500);
  transition: all var(--transition-base);
  cursor: pointer;
  border-radius: 0;
}

.woocommerce a.button:hover,
.woocommerce a.button:active,
.woocommerce button.button:hover,
.woocommerce button.button:active,
.woocommerce input.button:hover,
.woocommerce input.button:active,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:active {
  background-color: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: transparent;
  border: var(--btn-border-width) solid var(--color-gray-500);
  color: var(--color-gray-500);
}

.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:active {
  background-color: transparent;
  border-color: var(--color-black);
  color: var(--color-black);
}

.woocommerce a.button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button.disabled,
.woocommerce #respond input#submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled:active,
.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled:active,
.woocommerce button.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled:active,
.woocommerce input.button.disabled:hover,
.woocommerce #respond input#submit:disabled:hover,
.woocommerce #respond input#submit:disabled:active {
  border-color: var(--color-gray-500);
  color: var(--color-gray-500);
  background-color: transparent;
}

/* WooCommerce form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: 12px 16px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-gray-300);
  border-radius: 0;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-gray-300);
  outline: none;
  box-shadow: none;
}

.woocommerce form .form-row label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--spacing-sm);
}

/* ============================================
   NEWSLETTER POPUP
   ============================================ */
.newsletter-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

.newsletter-popup.is-open {
  opacity: 1;
  visibility: visible;
}

.newsletter-popup__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background-color: var(--color-white);
  overflow: hidden;
}

@media (min-width: 768px) {
  .newsletter-popup__inner {
    flex-direction: row;
    max-width: 800px;
  }
}

.newsletter-popup__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  z-index: 10;
  transition: opacity var(--transition-fast);
}

.newsletter-popup__close:hover {
  opacity: 0.6;
}

.newsletter-popup__image {
  
  width: auto;
  
  height: 30%;
  overflow: hidden;
  object-fit: cover;
}

@media (min-width: 768px) {
  .newsletter-popup__image {
    display: block;
    width: 50%;
    flex-shrink: 0;
  }
}

.newsletter-popup__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.newsletter-popup__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
}

@media (min-width: 768px) {
  .newsletter-popup__content {
    padding: var(--spacing-3xl);
  }
}

.newsletter-popup__title {
  font-size: var(--text-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
  margin: 0 0 var(--spacing-2xl);
}
@media (max-width: 768px) {
  .newsletter-popup__title {
    text-align: center;
  }
}

.newsletter-popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.newsletter-popup__form .form-group {
  margin-bottom: 0;
}

.newsletter-popup__form .form-input--bordered {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-300);
  font-size: var(--text-sm);
}

.newsletter-popup__form .form-input--bordered:focus {
  border-color: var(--color-gray-300);
}

.newsletter-popup__submit {
  margin-top: var(--spacing-sm);
}

.newsletter-popup__privacy {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-lg);
  line-height: 1.5;
}

.newsletter-popup__privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================
   CART SIDEBAR
   ============================================ */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background-color: var(--color-white);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}

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

.cart-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  /* border-bottom: 1px solid var(--color-gray-200); */
  flex-shrink: 0;
}

.cart-sidebar__title {
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.cart-sidebar__close {
  padding: var(--spacing-sm);
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}

.cart-sidebar__close:hover {
  opacity: 0.6;
}

.cart-sidebar__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg) var(--spacing-lg) var(--container-padding) ;
}

.cart-sidebar__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  /* padding-right: var(--spacing-md); */
}

/* @media (max-width: 768px) {
  .cart-sidebar__items {
  padding-right: var(--spacing-xs);

  }
} */
 .lost_reset_password .form-input-wrap {
  gap: 10px;
  align-items: center;
  flex-direction: column;
}
.lost_reset_password  .form-input-wrap .form-input{position: relative;}
.lost_reset_password  .form-input-toggle-pw {position: absolute;right: 0;top: 10%;}
.cart-sidebar__item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-lg);
  /* border-bottom: 1px solid var(--color-gray-200); */
}

.cart-sidebar__item:last-child {
  border-bottom: none;
}

.cart-sidebar__cancel {
  margin: 0;
  padding: var(--spacing-xs) 0;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-gray-600);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  bottom: var(--text-2xl);
  position: absolute;
}

.cart-sidebar__cancel:hover {
  color: var(--color-black);
}

.cart-sidebar__cancel:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.cart-sidebar__item-image {
  width: 55px;
  aspect-ratio: 3/4;
  background-color: var(--color-gray-100);
}

.cart-sidebar__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-sidebar__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cart-sidebar__item-name {
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
}

.cart-sidebar__item-qty {
  font-size: var(--text-base);
  color: var(--color-gray-500);
}

/* Cart sidebar quantity selector - compact to match checkout style */
.cart-sidebar__item-qty .quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-gray-300);
  background-color: var(--color-white);
}

.cart-sidebar__item-qty .quantity-selector__btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-gray-600);
  transition: all var(--transition-fast);
  padding: 0;
  line-height: 1;
}

.cart-sidebar__item-qty .quantity-selector__btn:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
}

.cart-sidebar__item-qty .quantity-selector__input {
  width: 36px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 400;
  border: none;
  /* border-left: 1px solid var(--color-gray-300);
  border-right: 1px solid var(--color-gray-300); */
  -moz-appearance: textfield;
  padding: 4px 0;
  background-color: transparent;
  color: var(--color-black);
  outline: none;
}

.cart-sidebar__item-qty .quantity-selector__input::-webkit-outer-spin-button,
.cart-sidebar__item-qty .quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-sidebar__item-attrs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.cart-sidebar__item-color {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-gray-600);
}

.cart-sidebar__item-color-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-gray-300);
  flex-shrink: 0;
}

.cart-sidebar__item-size {
  color: var(--color-black);
  text-underline-offset: 2px;
}
.cart-sidebar__item-size span{
  text-decoration: underline;
font-weight: 700;
}
.cart-sidebar__item-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.cart-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: var(--spacing-xl);
}

.cart-sidebar__empty p {
  color: var(--color-gray-500);
  font-size: var(--text-base);
}

.continue-shopping-btn {
  font-size: var(--text-sm);
  font-weight: 300;
  /* text-transform: uppercase; */
  width: 100%;
  text-align: center;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
  text-decoration: underline;
}
.cart-sidebar__footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  /* border-top: 1px solid var(--color-gray-200); */
  flex-shrink: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 111111111;
  background: var(--color-white);
}

.cart-sidebar__total {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
}

.cart-sidebar__total .checkout-totals__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-sidebar__total .checkout-totals__original-price {
  color: var(--color-gray-500);
  text-decoration: line-through;
  font-weight: 400;
}

.cart-sidebar__checkout {
  width: 100%;
  text-align: center;
}

/* ============================================
   IMPROVED CHECKOUT FIELDS
   ============================================ */
.checkout-field__input {
  width: 100%;
  padding: var(--spacing-md) 0 var(--spacing-xs);

  font-size: var(--text-sm);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
  border-radius: 0;
  outline: none;
  transition: border-color var(--transition-fast);
}

.checkout-field__input:focus {
  border-bottom-color: var(--color-gray-300);
}

.checkout-field__input.error,
.checkout-field__input.is-invalid {
  border-bottom-color: var(--color-error);
}

.checkout-field__input.is-valid {
  border-bottom-color: var(--color-black);
}

.checkout-field__error {
  display: none;
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--spacing-xs);
}

.checkout-field__input.is-invalid + .checkout-field__error,
.checkout-field__input.error ~ .checkout-field__error {
  display: block;
}

/* Nova Poshta Autocomplete Dropdown */
.nova-poshta-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  margin-top: -1px;
}

.nova-poshta-dropdown__item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color var(--transition-fast);
}

.nova-poshta-dropdown__item:hover,
.nova-poshta-dropdown__item.is-selected {
  background-color: var(--color-gray-100);
}

.nova-poshta-dropdown__item:last-child {
  border-bottom: none;
}

.nova-poshta-dropdown__item-area {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: 2px;
}

.nova-poshta-dropdown__loading,
.nova-poshta-dropdown__empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

/* Ensure city input field container is positioned */
.checkout-field--select {
  position: relative;
}

/* Ukraine Shipping Fields Container */
.checkout-fields__ukraine {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.checkout-fields__ukraine .checkout-field {
  margin-bottom: 0;
}

/* Warehouse Type Filter */
.warehouse-type-filter {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.warehouse-type-btn {
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-family: var(--font-primary);
  border: 1px solid var(--color-gray-300);
  background: var(--color-white);
  color: var(--color-black);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.warehouse-type-btn.is-active,
.warehouse-type-btn:hover {
  background: var(--color-gray-500);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* Warehouse Select Optgroups */
.checkout-field__select optgroup {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-black);
  background: var(--color-gray-100);
  padding: var(--spacing-sm) 0;
}

.checkout-field__select optgroup option {
  font-weight: 400;
  padding-left: var(--spacing-md);
  background: var(--color-white);
}

/* Checkout Step Indicator - Improved */
.checkout-steps__item.is-completed .checkout-steps__number {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.checkout-steps__item.is-completed .checkout-steps__number::after {
  content: '✓';
  font-size: 12px;
}

/* ============================================
   SEARCH OVERLAY
   ============================================ */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  display: flex;
  flex-direction: column;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-overlay__inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 1024px) {
  .search-overlay__inner {
    padding: 0 var(--spacing-xl);
  }
}

.search-overlay__header {
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

.search-overlay__form {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.search-overlay__icon {
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  color: var(--color-black);
  padding: 0;
}

.search-overlay__input::placeholder {
  color: var(--color-gray-400);
}

.search-overlay__input::-webkit-search-cancel-button,
.search-overlay__input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.search-overlay__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-black);
  padding: 0;
  transition: opacity var(--transition-fast);
}

.search-overlay__close:hover {
  opacity: 0.6;
}

.search-overlay__results {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg) 0;
  -webkit-overflow-scrolling: touch;
}

.search-overlay__status {
  text-align: center;
  padding: var(--spacing-2xl) 0;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.search-overlay__status--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.search-overlay__spinner {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-gray-200);
  border-top-color: var(--color-black);
  border-radius: 50%;
  animation: search-spin 0.6s linear infinite;
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

.search-results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

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

.search-result__item {
  display: block;
  text-decoration: none;
  color: var(--color-black);
  transition: opacity var(--transition-fast);
}

.search-result__item:hover {
  opacity: 0.7;
}

.search-result__image {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--color-gray-100);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.search-result__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result__title {
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: 1.4;
  margin-bottom: 2px;
}

.search-result__price {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.search-results__footer {
  text-align: center;
  padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.search-results__view-all {
  display: inline-block;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  color: var(--color-black);
  text-decoration: none;
  padding: 12px 32px;
  border: 1px solid var(--color-black);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.search-results__view-all:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
  
  .cart-sidebar {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}


#post-8 .page-title, #post-9 .page-title, #post-10 .page-title {
  display: none;
}

.woocommerce-Price-currencySymbol {
  display: inline;
}

.woocommerce-Price-amount {
  white-space: nowrap;
}


/* Contact Page */
.contact-page {
  padding: var(--spacing-2xl) 0 var(--spacing-4xl);
}

/* Page Title */
.contact-page__title {
  font-size: var(--text-2xl);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--spacing-3xl);
}

/* Contact Info Grid */
.contact-info-grid {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
  /* border-bottom: 1px solid var(--color-gray-200); */
  max-width: 45%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .contact-info-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-xl);
  max-width: 70%;

  }
}

.contact-info-item {
  text-align: center;
}

.contact-info-item__label {
  display: block;
  font-size: var(--text-lg);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-black);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-black);
  line-height: 1.6;
}

.contact-info-item__value {
  font-size: var(--text-base);
  color: var(--color-black);
  line-height: 1.8;
}

a.contact-info-item__value:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Contact Main */
.contact-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3xl);
}

@media (min-width: 1024px) {
  .contact-main {
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: var(--spacing-sm);
  }
}

/* Contact Form Section */
.contact-form-section {
  max-width: 600px;
}

.contact-form-section__title {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.3;
  margin: 0 0 var(--spacing-2xl);
}

.contact-form .form-group {
  margin-bottom: var(--spacing-xl);
}

.contact-form .form-input--textarea {
  min-height: 100px;
  border: none;
  border-bottom: 1px solid var(--color-gray-300);
  padding: var(--spacing-sm) 0;
  resize: none;
}

.contact-form .form-input--textarea:focus {
  border-bottom-color: var(--color-gray-300);
}

.contact-form__submit {
  margin-top: var(--spacing-xl);
  width: 280px;
  max-width: 100%;
}

/* Contact Image */
.contact-image {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-color: var(--color-gray-200);
}

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

.contact-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-image__placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-color: var(--color-gray-200);
}

/* Mobile Styles */
@media (max-width: 767px) {
  .contact-form-section {
      max-width: none;
      order: 2;
  }
}

/* Editor / blocks: first block flush top inside privacy content */
.delivery-payment--legal .delivery-payment__content.legal-page__entry > .wp-block-group:first-child,
.delivery-payment--legal .delivery-payment__content.legal-page__entry > *:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   About page (templates/page-about.php + ACF)
   -------------------------------------------------------------------------- */
.about-page {
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-4xl);
}

.about-page__title {
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: var(--spacing-3xl);
  letter-spacing: 0.1em;
}

.about-page__intro {
  max-width: 954px;
  margin: 0 0 var(--spacing-4xl);
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
}

.about-page__intro p {
  margin-bottom: var(--spacing-md);
}

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

.about-page__intro h2 {
  margin: 6.1rem 0 0 0;
  text-transform: uppercase;
}
.about-page__intro ul, .about-page__last-inner ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.15em;
  margin: 1.3rem 0 0;
}
.about-page__last-inner h2{
  font-size: var(--text-2xl);
  line-height: 1.2;
}

.about-page__intro ul li {
  margin: 1.3rem 0 0;
  padding-left: 0.35em;
}

.about-page__intro ul li:first-child {
  margin-top: 0;
}

.about-page__intro ul li::marker {
  color: var(--color-black);
}

/* Кастомний маркер для пунктів з класом (якщо list-style знято) */
.about-page__intro li.about-page__introli,
.about-page__introli {
  position: relative;
  list-style: none;
  padding-left: 1.1rem;
}

.about-page__intro li.about-page__introli:first-child,
.about-page__introli:first-child {
  margin-top: 0;
}

.about-page__intro li.about-page__introli::before,
.about-page__introli::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-black);
}
/* Repeater: mobile = image, then text (stacked) */
.about-page__strip {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.about-page__strip-media {
  position: relative;
  width: 100%;
  min-height: 280px;
  background-color: var(--color-gray-200);
  overflow: hidden;
}

.about-page__strip-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page__strip-placeholder {
  width: 100%;
  min-height: 280px;
  aspect-ratio: 4 / 5;
  background-color: #d9d9d9;
}

.about-page__strip-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-2xl) 0;
  box-sizing: border-box;
}

/* Same horizontal rhythm as .container — text does not extend past site content edges */
.about-page__strip-text {
  max-width: var(--container-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
  box-sizing: border-box;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  text-align: left;
}

.about-page__strip-text p {
  margin-bottom: var(--spacing-md);
}

.about-page__strip-text p:last-child {
  margin-bottom: 0;
}

/* Desktop: 50% / 50%, full viewport height, alternate sides */
@media (min-width: 768px) {
  .about-page__strip {
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
  }

  .about-page__strip--alt {
    flex-direction: row-reverse;
  }

  .about-page__strip-media,
  .about-page__strip-body {
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
    min-height: 100vh;
  }

  .about-page__strip-media {
    min-height: 0;
  }

  .about-page__strip-placeholder {
    min-height: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .about-page__strip-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .about-page__strip-body {
    padding: var(--spacing-3xl) 0;
  }
}

@media (min-width: 1024px) {
  .about-page__strip-text {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}

/* Full-viewport video */
.about-page__video-section {
  width: 100%;
  background-color: #000;
}

@media (min-width: 1045px) {
  .about-page__strip-text {
    padding-left: var(--container-padding);
    padding-right: 50%;
  }
  .about-page__strip--alt .about-page__strip-text {
    padding-right: var(--container-padding);
    padding-left: 50%;
  }

}
/* Мобільні: на всю ширину контенту з боковим падінгом контейнера */


.about-page__video-inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background-color: #000;
  box-sizing: border-box;
}

.about-page__video-inner > .about-page__video-file,
.about-page__video-file {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* oEmbed iframe: cover viewport (16:9 crop) */
.about-page__video-inner > iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  min-height: 100%;
  height: 56.25vw;
  max-width: none;
  border: 0;
  transform: translate(-50%, -50%);
}

.about-page__video-inner > div:only-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-page__video-inner > div:only-child iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  min-height: 100%;
  height: 56.25vw;
  max-width: none;
  border: 0;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .about-page__video-inner > iframe,
  .about-page__video-inner > div:only-child iframe {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    transform: none;
    aspect-ratio: auto;
  }
}

/* last_text: full width */
.about-page__last {
  width: 100%;
  padding: var(--spacing-4xl) var(--spacing-md);
  box-sizing: border-box;
}

.about-page__last-inner {
  max-width: 954px;
  margin: 0 auto;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 14px;
  line-height: 18px;
  color: var(--color-black);
  text-align: center;
}

.about-page__last-inner p {
  margin-bottom: var(--spacing-md);
}

.about-page__last-inner p:last-child {
  margin-bottom: 0;
}

/* Теги з the_content(), не класи .h2 (Bootstrap-стиль) */
.style-pages h2,
.style-pages h3,
.style-pages h4,
.style-pages h5,
.style-pages h6,
.style-pages .h2,
.style-pages .h3,
.style-pages .h4,
.style-pages .h5,
.style-pages .h6 {
  margin: var(--spacing-md) 0;
}
.style-pages ul {   
  list-style-type: disc;
  padding: 0 0 0 1rem;
  margin-bottom: var(--spacing-md);
}
.product-wishlist.is-active{
  color: var(--color-black);
  border: var(--btn-border-width) solid var(--color-black);
}
.collection-page__mobile-togle-view {
  display: none;
  align-items: center;
  gap: var(--spacing-sm);
}

.collection-page__mobile-togle-view button.one_image_view,
.collection-page__mobile-togle-view button.grid_view {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  gap: 2px;
}
.collection-page__mobile-togle-view button.one_image_view.is-active,
.collection-page__mobile-togle-view button.grid_view.is-active {
  display: flex;
}

.collection-page__mobile-togle-view .one_image_view span {
  display: flex;
  border: 1px solid var(--color-gray-500);
  width: 12px;
  height: 12px;
  position: relative;
}
/* .collection-page__mobile-togle-view .one_image_view span::before, .collection-page__mobile-togle-view .one_image_view span::after {
  content: '';
  display: block;
  position: absolute;
  top: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-500);
} */
.collection-page__mobile-togle-view .one_image_view span::after {
  bottom: -3px;
  top: auto;
}
.collection-page__mobile-togle-view .one_image_view.is-active span, .collection-page__mobile-togle-view .grid_view.is-active span {
  border: 1px solid var(--color-black);
}
.collection-page__mobile-togle-view .grid_view span {
  display: flex;
  border: 1px solid gray;
  width: 5px;
  height: 12px;
}
.oder-list-mobile {
  display: none;
}
@media (max-width: 767px) {
  .collection-page__mobile-togle-view {
    display: flex;
    gap: var(--spacing-sm);
}
.collection-products .product-grid.product-grid-one_image {
  grid-template-columns: 1fr;
}
.collection-products .product-grid.product-grid-grid {
  grid-template-columns: repeat(2, 1fr);
}
  .about-page__video-section {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    box-sizing: border-box;
    padding: 0 var(--container-padding-mobile);
    background: none;
  }
  .about-page__video-inner{
    min-height: auto;
    min-height: auto;
  }
  .about-page__video-inner > .about-page__video-file, .about-page__video-file{
    position: relative;
  }
  .about-page__strip-media {
    padding: 0 var(--container-padding-mobile);
    background: none; 
  }
  .about-page__strip-text, .about-page__last-inner{
    text-align: left;
  }
  .about-page__intro h2{
    margin-top: 3rem;
    font-size: var(--text-base);
  }
  .about-page__intro{
    margin: 0 0 var(--spacing-2xl);
  }
  .about-page__last {
    width: 100%;
    padding: var(--spacing-2xl) var(--spacing-md);
    box-sizing: border-box;
  }
  .mobile-nav__item.is-open .mobile-nav__submenu{
    padding: var(--spacing-xs) 0 0;
  }
  .auth-form__subtitle{
    margin: 0 0 var(--spacing-xl);
  }
  .auth-page__content {
      padding: var(--spacing-3xl) 0;
  }
  .auth-page{
    min-height: auto;
    display: block;
  }
  .cart-sidebar__footer{
    /* bottom: var(--spacing-xl); */
    height: 200px;
  }
  .footer__newsletter-title{
    font-size: var(--text-base);
    line-height: 1.2;
    font-weight: 600;
  }
.delivery-payment--returns .delivery-payment__main {
  margin-left: 0;
}
button.newsletter-popup__close svg {
  stroke: var(--color-white);
}
svg.hero__logo-svg {
  max-width: 113px;
}
.checkout-steps {
      justify-content: flex-start;
      padding:0;
}
  .checkout-steps__line {
        display: none;
    }
    .checkout-steps__item.is-active.first-step{
      margin-left: var(--spacing-md);
    }
    button.btn.btn--secondary {
      width: 100%;
  }
  table.orders-table.woocommerce-orders-table.web-table {
    display: none;
}
.oder-list-mobile {
  display: block;
}
.oder-list-mobile__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--color-gray-200);

  margin: var(--spacing-sm) 0 0;
  padding: var(--spacing-sm) 0;
}
.oder-list-mobile__item-content{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.product-wishlist{
  margin-top:0;
}
.cart-item-row__info{
  padding-right: 0;
}
.auth-page__content .form-checkbox input[type="checkbox"]{
  width: 24px;
  height: 24px;
}
.auth-page__content .form-checkbox{
  align-items: center;
  align-content: center;

}
.auth-page__content .form-checkbox-label {line-height: 1;}
/* .cart-item-row__cancel-btn{bott} */
.account-view-order__meta{
  gap: var(--spacing-sm);
}
.account-section__title {
  margin-bottom: var(--spacing-xl);
}
.account-view-order__total-row{
  padding: var(--spacing-xs) 0;
}
.woocommerce-notices-wrapper .woocommerce-message {    text-align: center;}
.contact-info-item__label {max-width: 200px;}
.contact-info-item__value.email-fix-mobile{margin-left: -16px;}
.cart-sidebar__item:last-child{margin-bottom: 15px;}
.mobile-nav__item.is-open {margin-bottom: var(--spacing-md);}
.size-chart-popup__close {top:auto;}
.size-chart-popup__table th{font-size: var(--text-base);}
.size-chart-popup__table td{font-size: var(--text-xs);     padding: var(--spacing-md)  var(--spacing-sm);}
.size-chart-popup__title {font-size: var(--text-xl);}

}