/*
  STYLE.CSS
  -----------------------------------------------------------
  Design tokens live at the top as CSS custom properties. Everything
  else is built from those tokens, so the whole site's look can be
  adjusted from one place.

  Sizing convention: the root font-size is set to 62.5% of the browser
  default (16px), which makes 1rem exactly equal to 10px. From then on
  every size in this file is written in rem, e.g. 1.5rem = 15px.
*/

/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --color-paper: #efeae0; /* main background */
  --color-paper-soft: #f7f4ee; /* card / panel background */
  --color-ink: #201c16; /* primary text, dark backgrounds */
  --color-ink-soft: #5c5645; /* secondary text */
  --color-border: #dbd3c0;
  --color-gold: #c98a2c; /* brand accent */
  --color-gold-dark: #a86f1f;
  --color-crimson: #a6321e; /* calls to action */
  --color-crimson-dark: #872718;
  --color-teal: #2e6b63; /* secondary accent — used sparingly for freshness */
  --color-teal-dark: #204d47;
  --color-teal-tint: #e3ece9;
  --color-terracotta: #c1573a; /* warm accent for badges/gradients */
  --color-terracotta-dark: #9c4429;
  --color-terracotta-tint: #f5e6de;
  --color-plum: #6e3b57; /* deep accent for the checkout steps band */
  --color-plum-dark: #542c42;
  --color-plum-tint: #efe3ea;
  --color-mustard: #d9a441; /* warm highlight, distinct from gold */
  --color-mustard-tint: #f8ecd6;
  --color-green: #3f6b4a; /* confirmation / success */
  --color-white: #ffffff;

  /* Type
     Fraunces/Inter don't include Georgian (Mkhedruli) glyphs, so the
     site uses the Noto Georgian family instead, which covers the same
     serif/sans-serif pairing. */
  --font-display: "Noto Serif Georgian", Georgia, serif;
  --font-body:
    "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-tiny: 1.3rem;
  --fs-small: 1.5rem;
  --fs-body: 1.7rem;
  --fs-lead: 2rem;
  --fs-h3: 2.6rem;
  --fs-h2: 3.8rem;
  --fs-h1: 5.4rem;
  --fs-display: 8rem;

  /* Spacing */
  --space-1: 0.8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-4: 3.2rem;
  --space-5: 4.8rem;
  --space-6: 6.4rem;
  --space-7: 9.6rem;
  --space-8: 12.8rem;

  /* Layout */
  --content-width: 132rem;
  --radius-sm: 3px;
  --radius-md: 6px;
  --border-hairline: 1px solid var(--color-border);
  --transition-quick: 180ms ease;
}

/* ---------- Scroll reveal animations ---------- */
/* Paired with setUpScrollReveal() in main.js. An element starts nudged
   off to one side and transparent, then eases into place the first
   time it scrolls into view. Respects reduced-motion preferences. */
/* The opacity/transform starting state only applies once the "js-enabled"
   class (set by an inline script in <head>) confirms JavaScript actually
   ran. Without it, [data-reveal] elements are just normal, fully visible
   content — so a visitor with JS blocked never ends up with permanently
   invisible sections. */
.js-enabled [data-reveal] {
  opacity: 0;
  transition:
    opacity 1300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.js-enabled [data-reveal="up"] {
  transform: translateY(4.8rem);
}

.js-enabled [data-reveal="down"] {
  transform: translateY(-4.8rem);
}

.js-enabled [data-reveal="left"] {
  transform: translateX(-4.8rem);
}

.js-enabled [data-reveal="right"] {
  transform: translateX(4.8rem);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-paper);
  min-height: 100vh;
}

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

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

ul,
ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}

/* Respect people who have asked their system to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible keyboard focus everywhere, styled instead of removed. */
:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */
.content-width {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section {
  padding-block: var(--space-7);
}

#featured {
  background-color: var(--color-teal-tint);
  padding-block: var(--space-4) var(--space-7);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

#featured .section-heading {
  margin-bottom: var(--space-3);
}

.section-heading__title {
  font-size: var(--fs-h2);
}

.section-heading__link {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-ink-soft);
  padding-bottom: 2px;
  white-space: nowrap;
  transition:
    color var(--transition-quick),
    border-color var(--transition-quick);
}

.section-heading__link:hover {
  color: var(--color-crimson);
  border-color: var(--color-crimson);
}

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

.is-hidden {
  display: none !important;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 1.4rem 2.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition:
    background-color var(--transition-quick),
    color var(--transition-quick),
    border-color var(--transition-quick),
    transform var(--transition-quick);
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  background-color: var(--color-plum);
  color: var(--color-paper-soft);
}

.button--primary:hover {
  background-color: var(--color-plum-dark);
}

.button--outline {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.button--outline:hover {
  background-color: var(--color-ink);
  color: var(--color-paper-soft);
}

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

/* The hero section has a dark (--color-ink) background. The default
   .button--primary and .button--outline styles are tuned for light
   backgrounds — dark text/borders on a dark backdrop — so they need
   their own high-contrast treatment inside the hero specifically. */
.hero .button--primary {
  background-color: var(--color-gold);
  color: var(--color-ink);
}

.hero .button--primary:hover {
  background-color: var(--color-gold-dark);
}

.hero .button--outline {
  background-color: transparent;
  color: var(--color-paper-soft);
  border-color: var(--color-paper-soft);
}

.hero .button--outline:hover {
  background-color: var(--color-paper-soft);
  color: var(--color-ink);
}

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

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-paper);
  border-bottom: 3px solid var(--color-teal);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.site-logo {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.site-logo span {
  color: var(--color-crimson);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__link {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-ink);
  position: relative;
  padding-bottom: 3px;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-crimson);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-quick);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

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

.cart-link.is-active {
  color: var(--color-crimson);
}

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
}

.cart-link svg {
  width: 2.4rem;
  height: 2.4rem;
}

.cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 1.9rem;
  height: 1.9rem;
  padding-inline: 4px;
  border-radius: 999px;
  background-color: var(--color-crimson);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 4rem;
  height: 4rem;
}

.nav-toggle span {
  display: block;
  width: 2.4rem;
  height: 2px;
  background-color: var(--color-ink);
  transition:
    transform var(--transition-quick),
    opacity var(--transition-quick);
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--color-plum) 0%,
    var(--color-ink) 55%,
    var(--color-teal-dark) 100%
  );
  color: var(--color-paper-soft);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-5);
}

.hero__copy {
  padding-block: var(--space-5);
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.02;
  margin-bottom: var(--space-4);
  max-width: 14ch;
}

.hero__description {
  font-size: var(--fs-lead);
  color: #cfc8b4;
  max-width: 42ch;
  margin-bottom: var(--space-5);
}

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

.hero__image-wrap {
  position: relative;
  height: 100%;
  min-height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__image-wrap::before {
  content: "";
  position: absolute;
  inset: 6%;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(201, 138, 44, 0.35),
      transparent 55%
    ),
    radial-gradient(circle at 70% 70%, rgba(46, 107, 99, 0.3), transparent 55%);
  filter: blur(4rem);
  z-index: 0;
}

.hero__image {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 48rem;
  border-radius: var(--radius-md);
  transform: rotate(-6deg);
  box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.35);
  animation: hero-settle 900ms ease both;
}

@keyframes hero-settle {
  from {
    opacity: 0;
    transform: rotate(-6deg) translateY(3rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg) translateY(0) scale(1);
  }
}

.hero__tag {
  position: absolute;
  bottom: 6%;
  left: 6%;
  background-color: var(--color-paper-soft);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
  animation: hero-tag-rise 900ms 400ms ease both;
}

@keyframes hero-tag-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__tag-label {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--color-ink-soft);
  margin-bottom: 2px;
}

.hero__tag-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background-color: var(--color-mustard-tint);
  border-bottom: var(--border-hairline);
}

.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--space-4);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border-left: var(--border-hairline);
}

.trust-item:first-child {
  border-left: none;
}

.trust-item svg {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  color: var(--color-gold);
}

.trust-item:nth-child(2) svg {
  color: var(--color-teal);
}

.trust-item:nth-child(3) svg {
  color: var(--color-terracotta);
}

.trust-item:nth-child(4) svg {
  color: var(--color-plum);
}

.trust-item__title {
  font-size: var(--fs-small);
  font-weight: 600;
}

.trust-item__description {
  font-size: var(--fs-tiny);
  color: var(--color-ink-soft);
}

/* ---------- Product grid & cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.product-card {
  display: block;
  background-color: var(--color-paper-soft);
  border: var(--border-hairline);
  border-top: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color var(--transition-quick),
    transform var(--transition-quick);
}

.product-card[data-category="sneakers"] {
  border-top-color: var(--color-teal);
}

.product-card[data-category="flats"] {
  border-top-color: var(--color-mustard);
}

.product-card[data-category="boots"] {
  border-top-color: var(--color-plum);
}

.product-card[data-category="sandals"] {
  border-top-color: var(--color-terracotta);
}

.product-card:hover {
  border-color: var(--color-ink);
  transform: translateY(-4px);
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-border);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

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

.product-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background-color: var(--color-teal);
  color: var(--color-white);
  font-size: var(--fs-tiny);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  z-index: 1;
}

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

.product-card__category {
  font-size: var(--fs-tiny);
  color: var(--color-ink-soft);
  margin-bottom: 4px;
  text-transform: capitalize;
}

.product-card__name {
  font-size: var(--fs-lead);
  margin-bottom: 6px;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-card__price {
  font-weight: 700;
  font-size: var(--fs-lead);
}

.product-card__colors {
  display: flex;
  gap: 5px;
}

.color-dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------- Filters (shop page) ---------- */
.shop-header {
  padding-block: var(--space-5) var(--space-4);
  border-bottom: var(--border-hairline);
}

.shop-header__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-2);
}

.shop-header__description {
  color: var(--color-ink-soft);
  max-width: 60ch;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.filter-chip {
  padding: 0.8rem 1.8rem;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
  transition:
    background-color var(--transition-quick),
    color var(--transition-quick),
    border-color var(--transition-quick);
}

.filter-chip.is-active,
.filter-chip:hover {
  background-color: var(--color-ink);
  color: var(--color-paper-soft);
}

.filter-chip[data-category="sneakers"] {
  background-color: var(--color-teal-tint);
  border-color: var(--color-teal);
  color: var(--color-teal-dark);
}

.filter-chip[data-category="sneakers"].is-active,
.filter-chip[data-category="sneakers"]:hover {
  background-color: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-paper-soft);
}

.filter-chip[data-category="flats"] {
  background-color: var(--color-mustard-tint);
  border-color: var(--color-mustard);
  color: var(--color-gold-dark);
}

.filter-chip[data-category="flats"].is-active,
.filter-chip[data-category="flats"]:hover {
  background-color: var(--color-mustard);
  border-color: var(--color-mustard);
  color: var(--color-ink);
}

.filter-chip[data-category="boots"] {
  background-color: var(--color-plum-tint);
  border-color: var(--color-plum);
  color: var(--color-plum-dark);
}

.filter-chip[data-category="boots"].is-active,
.filter-chip[data-category="boots"]:hover {
  background-color: var(--color-plum);
  border-color: var(--color-plum);
  color: var(--color-paper-soft);
}

.filter-chip[data-category="sandals"] {
  background-color: var(--color-terracotta-tint);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta-dark);
}

.filter-chip[data-category="sandals"].is-active,
.filter-chip[data-category="sandals"]:hover {
  background-color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: var(--color-paper-soft);
}

.shop-products {
  padding-bottom: var(--space-7);
}

.empty-state {
  padding-block: var(--space-6);
  text-align: center;
  color: var(--color-ink-soft);
}

/* ---------- Feature / value sections ---------- */
.feature-band {
  background-color: var(--color-crimson);
  /* background: linear-gradient(
    120deg,
    var(--color-gold) 0%,
    var(--color-terracotta) 100%
  ); */
  color: var(--color-paper-soft);
}

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

.feature-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  background-color: var(--color-gold);
  color: var(--color-ink);
  margin-bottom: var(--space-3);
  line-height: 1;
}

.feature-card:nth-child(2) .feature-card__number {
  background-color: var(--color-mustard);
}

.feature-card:nth-child(3) .feature-card__number {
  background-color: var(--color-terracotta);
  color: var(--color-paper-soft);
}

.feature-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.feature-card__description {
  color: var(--color-terracotta-tint);
  max-width: 38ch;
}

/* ---------- Newsletter / CTA band ---------- */
.cta-band {
  background: linear-gradient(
    120deg,
    var(--color-gold) 0%,
    var(--color-terracotta) 100%
  );
  color: var(--color-ink);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  flex-wrap: wrap;
}

.cta-band__title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}

.cta-band form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cta-band input[type="email"] {
  padding: 1.3rem 1.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink);
  min-width: 28rem;
  background-color: var(--color-paper-soft);
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(
    160deg,
    var(--color-ink) 0%,
    var(--color-plum-dark) 100%
  );
  color: #cfc8b4;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
}

.footer-brand__logo {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--color-paper-soft);
  margin-bottom: var(--space-2);
}

.footer-brand__description {
  max-width: 34ch;
  font-size: var(--fs-small);
}

.footer-heading {
  font-size: var(--fs-small);
  color: var(--color-paper-soft);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.footer-links li {
  margin-bottom: 0.9rem;
}

.footer-links a {
  font-size: var(--fs-small);
  transition: color var(--transition-quick);
}

.footer-links a:hover {
  color: var(--color-paper-soft);
}

.footer-bottom {
  border-top: 1px solid #423d30;
  padding-block: var(--space-3);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-tiny);
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding-block: var(--space-3);
  font-size: var(--fs-tiny);
  color: var(--color-ink-soft);
}

.breadcrumb a:hover {
  color: var(--color-crimson);
}

/* ---------- Product detail page ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-5) var(--space-7);
}

.product-detail__gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-border);
  margin-bottom: var(--space-2);
  cursor: zoom-in;
}

.product-detail__gallery-main img,
.product-detail__gallery-main video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

[data-slide-content] {
  width: 100%;
  height: 100%;
}

/* Shown when a color has a video slot but no file has been added yet
   (see the "video" field on a color in products.js). Keeps the gallery
   fully functional and honest about what's coming, instead of a broken
   video tag or an empty box. */
.video-slide-placeholder {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.video-slide-placeholder__icon {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background-color: rgba(32, 28, 22, 0.65);
  color: var(--color-paper-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lead);
  padding-left: 4px;
}

.video-slide-placeholder__label {
  background-color: rgba(32, 28, 22, 0.65);
  color: var(--color-paper-soft);
  font-size: var(--fs-tiny);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}

.gallery-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(32, 28, 22, 0.35);
  color: var(--color-paper-soft);
  font-size: var(--fs-tiny);
}

/* Hover-to-zoom: JS sets transform-origin to track the cursor while
   this class is applied, so the image appears to magnify around
   wherever the shopper is looking. Only kicks in with a mouse. */
@media (hover: hover) and (pointer: fine) {
  .product-detail__gallery-main.is-zoomed img {
    transform: scale(2);
  }
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-paper-soft);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  box-shadow: 0 2px 8px rgba(32, 28, 22, 0.25);
  opacity: 0;
  transition:
    opacity var(--transition-quick),
    background-color var(--transition-quick);
}

.product-detail__gallery-main:hover .gallery-arrow {
  opacity: 1;
}

.gallery-arrow:hover {
  background-color: var(--color-white);
}

.gallery-arrow--prev {
  left: var(--space-2);
}

.gallery-arrow--next {
  right: var(--space-2);
}

/* Thumbnail carousel: a single-line, horizontally scrolling strip so a
   shoe with many photos stays the same height instead of wrapping onto
   extra rows and pushing into the price/color/size area below.
   The prev/next arrows sit on top of the strip, semi-transparent, and
   are invisible until you hover the strip — and even then, each one
   only shows up if there's actually more content in that direction
   (JS toggles the "can-scroll" class; see updateThumbsOverflowArrows
   in product.js). A product with only a couple of photos never shows
   arrows at all, since there's nothing to scroll to. */
.product-detail__gallery {
  /* Without this, a grid item's default min-width is based on its
     content's natural size — so a strip of 20+ non-wrapping thumbnails
     would force this whole column (and the main image with it) wider
     than intended, pushing the info column off to the right instead of
     scrolling. This is the fix for that. */
  min-width: 0;
}

.product-detail__gallery-thumbs {
  position: relative;
  min-width: 0;
}

.product-detail__gallery-thumbs-track {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
}

.product-detail__gallery-thumbs-track::-webkit-scrollbar {
  display: none;
}

.gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
  transition: outline-color var(--transition-quick);
}

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

.gallery-thumb.is-selected {
  outline-color: var(--color-ink);
  outline-width: 2px;
}

.thumbs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(32, 28, 22, 0.55);
  color: var(--color-paper-soft);
  font-size: var(--fs-tiny);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition-quick),
    background-color var(--transition-quick);
  z-index: 2;
}

.thumbs-arrow--prev {
  left: 0;
}

.thumbs-arrow--next {
  right: 0;
}

.thumbs-arrow:hover {
  background-color: rgba(32, 28, 22, 0.8);
}

.product-detail__category {
  color: var(--color-ink-soft);
  text-transform: capitalize;
  font-size: var(--fs-small);
  margin-bottom: var(--space-1);
}

.product-detail__name {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-2);
}

.product-detail__price {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.product-detail__short-description {
  color: var(--color-ink-soft);
  font-size: var(--fs-lead);
  margin-bottom: var(--space-5);
  max-width: 48ch;
}

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

.option-group__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.option-group__label span {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-paper-soft);
  font-size: 1.1rem;
  font-style: italic;
  font-family: Georgia, serif;
  margin-left: 6px;
  vertical-align: middle;
  transition: background-color var(--transition-quick);
}

.info-icon:hover {
  background-color: var(--color-teal);
}

.swatch-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.swatch {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 1px solid var(--color-border);
  outline-offset: 2px;
  cursor: pointer;
  transition:
    outline-color var(--transition-quick),
    transform var(--transition-quick);
}

.swatch:hover {
  transform: scale(1.06);
}

.swatch.is-selected {
  outline-color: var(--color-ink);
  border-color: var(--color-paper);
  box-shadow: 0 0 0 2px var(--color-ink);
}

.size-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.size-option,
.material-option {
  min-width: 5.2rem;
  height: 5.2rem;
  padding-inline: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition:
    border-color var(--transition-quick),
    background-color var(--transition-quick),
    color var(--transition-quick);
}

.size-option:hover,
.material-option:hover {
  border-color: var(--color-ink);
}

.size-option.is-selected,
.material-option.is-selected {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper-soft);
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.quantity-control button {
  width: 4.4rem;
  height: 4.6rem;
  font-size: var(--fs-lead);
  font-weight: 600;
}

.quantity-control span {
  min-width: 4rem;
  text-align: center;
  font-weight: 600;
}

.product-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.form-hint {
  font-size: var(--fs-tiny);
  color: var(--color-crimson);
  min-height: 1.8rem;
}

.product-detail__accordion {
  border-top: var(--border-hairline);
  margin-top: var(--space-5);
}

.accordion-item {
  border-bottom: var(--border-hairline);
}

.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  font-weight: 600;
  text-align: left;
}

.accordion-item__trigger .accordion-icon {
  transition: transform var(--transition-quick);
  font-size: 2rem;
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-item__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 260ms ease;
}

.accordion-item.is-open .accordion-item__panel {
  max-height: 40rem;
}

.accordion-item__panel-inner {
  padding-bottom: var(--space-3);
  color: var(--color-ink-soft);
}

.accordion-item__panel-inner ul {
  padding-left: var(--space-3);
  list-style: disc;
}

.accordion-item__panel-inner li {
  margin-bottom: 0.6rem;
}

/* ---------- Cart page ---------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-5);
  align-items: flex-start;
  padding-block: var(--space-5) var(--space-8);
}

.page-title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-5);
}

.cart-line {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-hairline);
}

.cart-line__image {
  width: 9rem;
  height: 9rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-border);
}

.cart-line__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-line__name {
  font-weight: 600;
  margin-bottom: 4px;
}

.cart-line__meta {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-2);
}

.cart-line__remove {
  font-size: var(--fs-tiny);
  color: var(--color-crimson);
  text-decoration: underline;
}

.cart-line__end {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cart-line__price {
  font-weight: 700;
}

.summary-card {
  background-color: var(--color-paper-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: sticky;
  top: 9rem;
}

.summary-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
  color: var(--color-ink-soft);
}

.summary-row--total {
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--fs-lead);
  border-top: var(--border-hairline);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

.empty-cart {
  padding-block: var(--space-7);
  text-align: center;
}

.empty-cart p {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

/* ---------- Checkout form ---------- */
.checkout-form {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}

.checkout-form__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-ink);
}

.form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-field .field-error {
  font-size: var(--fs-tiny);
  color: var(--color-crimson);
  min-height: 1.6rem;
}

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

/* ---------- Contact page ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  padding-block: var(--space-4) var(--space-8);
}

.contact-form .form-field textarea {
  min-height: 14rem;
}

.contact-details {
  background-color: var(--color-paper-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  height: fit-content;
}

.contact-details__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.contact-details dt {
  font-weight: 600;
  margin-top: var(--space-2);
}

.contact-details dd {
  color: var(--color-ink-soft);
}

/* ---------- Confirmation page ---------- */
.confirmation {
  padding-block: var(--space-7) var(--space-8);
  max-width: 76rem;
  margin-inline: auto;
}

.confirmation__icon {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.confirmation__icon svg {
  width: 3rem;
  height: 3rem;
}

.confirmation__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-2);
}

.confirmation__lede {
  color: var(--color-ink-soft);
  font-size: var(--fs-lead);
  margin-bottom: var(--space-5);
  max-width: 60ch;
}

.order-code-card {
  background-color: var(--color-ink);
  color: var(--color-paper-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.order-code-card__label {
  font-size: var(--fs-small);
  color: #cfc8b4;
  margin-bottom: var(--space-1);
}

.order-code-card__code {
  font-family: var(--font-display);
  font-size: 4.4rem;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.payment-instructions {
  background-color: var(--color-paper-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.payment-instructions__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.payment-instructions ol {
  list-style: decimal;
  padding-left: var(--space-3);
}

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

.bank-details {
  background-color: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-block: var(--space-2);
}

.bank-details__row {
  display: flex;
  justify-content: space-between;
  padding-block: 0.6rem;
  font-size: var(--fs-small);
}

.bank-details__row:not(:last-child) {
  border-bottom: var(--border-hairline);
}

.deadline-notice {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  background-color: #fbeee9;
  border: 1px solid #e3b6a8;
  color: var(--color-crimson-dark);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  margin-bottom: var(--space-5);
}

.order-summary-card {
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.order-summary-card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.order-summary-card__title--spaced {
  margin-top: var(--space-4);
}

.order-summary-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: var(--border-hairline);
  font-size: var(--fs-small);
}

.order-summary-line__image {
  flex: 0 0 auto;
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-border);
}

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

.order-summary-line__details {
  flex: 1 1 auto;
}

.order-summary-line__name {
  font-weight: 600;
  color: var(--color-ink);
}

.order-summary-line__meta {
  color: var(--color-ink-soft);
}

.order-summary-line__price {
  flex: 0 0 auto;
  font-weight: 600;
}

.confirmation__contact-details dt {
  font-weight: 600;
  margin-top: var(--space-2);
}

.confirmation__contact-details dd {
  color: var(--color-ink-soft);
}

.confirmation__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Not found / generic message page ---------- */
.message-page {
  padding-block: var(--space-8);
  text-align: center;
}

.message-page__title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-3);
}

.message-page__description {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

/* ---------- Toast (add-to-cart confirmation) ---------- */
.toast {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(1.5rem);
  background-color: var(--color-ink);
  color: var(--color-paper-soft);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition-quick),
    transform var(--transition-quick);
  z-index: 200;
}

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

/* ---------- Size guide modal ---------- */
/* Built and opened via main.js when the "i" button next to the size
   selector on a product page is clicked. */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(32, 28, 22, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-quick);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  max-width: 72rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(1.6rem);
  transition: transform var(--transition-quick);
}

.modal-overlay.is-open .modal-dialog {
  transform: translateY(0);
}

.modal-dialog__header {
  background: linear-gradient(
    120deg,
    var(--color-teal) 0%,
    var(--color-plum) 100%
  );
  color: var(--color-paper-soft);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.modal-dialog__eyebrow {
  font-size: var(--fs-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.modal-dialog__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.modal-dialog__intro {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
}

.modal-dialog__columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal-dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-paper-soft);
  background-color: rgba(255, 255, 255, 0.15);
  transition: background-color var(--transition-quick);
}

.modal-dialog__close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.modal-dialog__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  padding-right: var(--space-5);
}

.modal-dialog__image {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.modal-dialog__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  counter-reset: guide-step;
}

.modal-dialog__steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.modal-dialog__steps li::before {
  counter-increment: guide-step;
  content: counter(guide-step);
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--color-teal-tint);
  color: var(--color-teal-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-dialog__steps li:nth-child(2)::before {
  background-color: var(--color-mustard-tint);
  color: var(--color-gold-dark);
}

.modal-dialog__steps li:nth-child(3)::before {
  background-color: var(--color-terracotta-tint);
  color: var(--color-terracotta-dark);
}

.modal-dialog__steps li:nth-child(4)::before {
  background-color: var(--color-plum-tint);
  color: var(--color-plum-dark);
}

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin-bottom: var(--space-3);
}

.size-guide-table th,
.size-guide-table td {
  padding: 0.8rem 1rem;
  border-bottom: var(--border-hairline);
  text-align: left;
}

.size-guide-table th {
  background-color: var(--color-teal-tint);
  color: var(--color-teal-dark);
  font-weight: 700;
}

.modal-dialog__note {
  font-size: var(--fs-tiny);
  color: var(--color-ink-soft);
  background-color: var(--color-mustard-tint);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

@media (min-width: 48em) {
  .modal-dialog__columns {
    flex-direction: row;
    align-items: flex-start;
  }

  .modal-dialog__image-col {
    flex: 0 0 24rem;
  }

  .modal-dialog__info-col {
    flex: 1 1 auto;
    min-width: 0;
  }
}