/* ==========================================================================
   Shine Theme — main stylesheet
   Premium WooCommerce fashion theme by RiotShine
   --------------------------------------------------------------------------
   Sections:
   1.  Tokens & reset
   2.  Layout & typography
   3.  Buttons & forms
   4.  Header / navigation / search / cart
   5.  Hero slideshow
   6.  Home sections
   7.  Product cards & shop
   8.  Blog / content / 404
   9.  Footer
   10. Animations & reveal
   11. Responsive
   ========================================================================== */

/* 1. Tokens & reset ------------------------------------------------------ */
:root {
  --sw-font-heading: 'Cormorant Garamond', Georgia, serif;
  --sw-font-body: 'Jost', -apple-system, 'Segoe UI', sans-serif;

  --sw-color-primary: #b08d57;
  --sw-color-secondary: #2c2a28;
  --sw-color-accent: #c9a227;
  --sw-color-heading: #221f1c;
  --sw-color-body: #3a3733;
  --sw-color-bg: #faf7f2;
  --sw-color-surface: #ffffff;
  --sw-color-muted: #f1ece4;

  --sw-container: 1280px;
  --sw-section-space: 80px;
  --sw-btn-radius: 0px;
  --sw-radius: 2px;

  --sw-heading-weight: 600;
  --sw-heading-case: none;
  --sw-heading-tracking: 0.01em;

  --sw-shadow: 0 18px 50px rgba(80, 60, 30, 0.12);
  --sw-shadow-sm: 0 6px 20px rgba(80, 60, 30, 0.08);
  --sw-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  --sw-header-h: 92px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sw-color-bg);
  color: var(--sw-color-body);
  font-family: var(--sw-font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* hard guard against stray horizontal scroll */
  max-width: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--sw-transition); }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sw-font-heading);
  color: var(--sw-color-heading);
  font-weight: var(--sw-heading-weight);
  letter-spacing: var(--sw-heading-tracking);
  text-transform: var(--sw-heading-case);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sw-color-primary); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--sw-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* 2. Layout & typography ------------------------------------------------- */
.site-main { padding-block: var(--sw-section-space); min-height: 50vh; }
.site-main--front { padding-block: 0; }

.page-header { margin-bottom: 48px; text-align: center; }
.page-title { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0; }
.archive-description { max-width: 720px; margin: 12px auto 0; opacity: 0.8; }

.section-heading { margin-bottom: 48px; }
.section-heading--center { text-align: center; }
.section-heading--left { text-align: left; }
.section-heading__sub {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sw-color-primary);
  margin-bottom: 12px;
}
.section-heading__title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0; }
.section-heading__rule {
  display: block;
  width: 60px; height: 2px;
  background: var(--sw-color-primary);
  margin: 18px auto 0;
  transform-origin: center;
}
.section-heading--left .section-heading__rule { margin-left: 0; }

.entry-content { max-width: 760px; margin-inline: auto; }
.entry-content p { margin: 0 0 1.4em; }
.entry-content h2 { font-size: 2rem; margin-top: 1.6em; }

/* 3. Buttons & forms ----------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  font-family: var(--sw-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--sw-btn-radius);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--sw-transition), background var(--sw-transition), color var(--sw-transition), box-shadow var(--sw-transition);
}
.btn__label { position: relative; z-index: 2; }
.btn--lg { padding: 18px 44px; font-size: 0.9rem; }

.btn--primary { background: var(--sw-color-primary); color: #fff; }
.btn--primary:hover { transform: translateY(-3px); box-shadow: var(--sw-shadow); }

.btn--ghost { background: transparent; color: var(--sw-color-heading); border-color: currentColor; }
.btn--ghost:hover { background: var(--sw-color-heading); color: var(--sw-color-bg); transform: translateY(-3px); }

.btn--light { background: #fff; color: var(--sw-color-heading); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--sw-shadow); }

.btn__shine {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.btn:hover .btn__shine { transform: translateX(120%); }

input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], input[type="password"],
textarea, select {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--sw-font-body);
  font-size: 0.95rem;
  color: var(--sw-color-heading);
  background: var(--sw-color-surface);
  border: 1px solid var(--sw-color-muted);
  border-radius: var(--sw-radius);
  transition: border-color var(--sw-transition), box-shadow var(--sw-transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--sw-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-color-primary) 18%, transparent);
}

.search-form { display: flex; gap: 10px; max-width: 560px; margin-inline: auto; }
.search-form .search-field { flex: 1; }
.search-form .search-submit {
  padding: 13px 28px;
  background: var(--sw-color-primary);
  color: #fff; border: 0; border-radius: var(--sw-btn-radius);
  cursor: pointer; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}

/* 4. Header, topbar, navigation ------------------------------------------ */
.site-topbar {
  background: var(--sw-color-secondary);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
/* Collapse the topbar when scrolled down — restore at the top (all viewports).
   Bound to is-shrunk (hysteresis in main.js), NOT is-stuck: is-stuck flips at
   y > 20 and collapsing the bar shifts the scroll position back under it,
   which made the bar flicker on small scrolls. is-shrunk only changes at
   160/80, far wider than the bar's 38px height, so no oscillation is possible. */
.site-topbar {
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.site-header.is-shrunk .site-topbar { max-height: 0; }
.site-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; }

.social-icons { display: flex; align-items: center; gap: 12px; margin: 0; }
.social-icons a {
  display: flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%;
  opacity: 0.75;
  transition: opacity var(--sw-transition), transform var(--sw-transition), background var(--sw-transition), border-color var(--sw-transition);
}
.social-icons a:hover {
  opacity: 1; transform: translateY(-2px);
  background: var(--sw-color-primary); border-color: var(--sw-color-primary); color: #fff;
}

.site-header {
  position: sticky; top: 0; z-index: 120;
  background: var(--sw-color-header-bg, #ffffff);
  transition: box-shadow var(--sw-transition);
}
.site-header.is-stuck { box-shadow: var(--sw-shadow-sm); }

.site-header__inner {
  display: flex; align-items: center; gap: 36px;
  height: var(--sw-header-h);
  transition: height var(--sw-transition);
}
.site-header.is-shrunk .site-header__inner { height: 64px; }

.site-header__brand { display: flex; align-items: center; }
.site-header__brand img { max-height: 60px; width: 180px; transition: max-height var(--sw-transition); }
.site-header.is-shrunk .site-header__brand img { max-height: 50px; width: 160px; }
.custom-logo-link { display: block; }

.menu-toggle {
  display: none; background: none; border: 0;
  color: var(--sw-color-heading); cursor: pointer; padding: 6px;
}
.nav-close { display: none; }

.main-navigation { flex: 1; min-width: 0; }
.main-navigation ul { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; }
.main-navigation li { position: relative; }
.main-navigation a {
  position: relative; display: block; padding: 10px 0;
  font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sw-color-heading);
}
.main-navigation a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 6px;
  height: 1.5px; background: var(--sw-color-primary);
  transition: right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-navigation a:hover::after { right: 0; }
.main-navigation ul ul {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--sw-color-surface); box-shadow: var(--sw-shadow);
  padding: 14px 22px; min-width: 200px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--sw-transition), transform var(--sw-transition), visibility var(--sw-transition);
  text-align: left;
}
.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px);
}
.main-navigation ul ul a { padding: 6px 0; font-size: 0.78rem; }
.main-navigation ul ul a::after { display: none; }
.menu--fallback { display: flex; gap: 30px; list-style: none; }
.menu--fallback a { font-size: 0.85rem; }

.site-header__actions { display: flex; align-items: center; gap: 20px; }
.header-action {
  position: relative; display: flex; padding: 4px;
  background: none; border: 0; color: var(--sw-color-heading); cursor: pointer;
  transition: color var(--sw-transition), transform var(--sw-transition);
}
.header-action:hover { color: var(--sw-color-primary); transform: translateY(-2px); }
.sw-cart-count {
  position: absolute; top: -4px; right: -9px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sw-color-primary); color: #fff;
  font-size: 0.62rem; font-weight: 600; border-radius: 999px;
}

.site-search {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--sw-color-surface); box-shadow: var(--sw-shadow-sm);
  padding: 20px 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--sw-transition), transform var(--sw-transition), visibility var(--sw-transition);
}
.site-search.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* 5. Hero slideshow ------------------------------------------------------- */
.hero {
  position: relative;
  height: calc(100vh - var(--sw-header-h));
  min-height: 560px; max-height: 92vh;
  overflow: hidden;
  color: #fff;
}
.hero__track, .hero__slide { position: absolute; inset: 0; }
/* Layered crossfade: the incoming slide fades in ON TOP of the outgoing one
   (which stays fully visible beneath it). Fading both slides at once made the
   whole hero dip to ~50% brightness mid-transition — the "jump/cut". */
.hero__slide {
  opacity: 0; visibility: hidden; z-index: 1;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.hero__slide.is-active {
  opacity: 1; visibility: visible; z-index: 3;
  transition: opacity 0.9s ease, visibility 0s;
}
.hero__slide.is-leaving {
  opacity: 1; visibility: visible; z-index: 2;
}

.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  /* Resting state equals the animation's end state, so removing the Ken-Burns
     animation when a slide goes out never visibly snaps the zoom back. */
  transform: scale(1.12);
}
@media (prefers-reduced-motion: no-preference) {
  /* 6s matches the 6000ms autoplay so each zoom finishes exactly as the next
     slide arrives. */
  .hero__slide.is-active .hero__bg { animation: sw-kenburns 6s ease-out forwards; }
}
@keyframes sw-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.5) 100%);
}

.hero__content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.hero__sub {
  font-size: 0.85rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
}
.hero__title {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  color: #fff; margin: 0 0 30px;
}

/* Staggered entrance for active slide content */
.hero__sub, .hero__title, .hero__content .btn {
  opacity: 0; transform: translateY(24px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.is-active .hero__sub { animation: sw-hero-in 0.8s 0.15s cubic-bezier(0.22,1,0.36,1) forwards; }
  .hero__slide.is-active .hero__title { animation: sw-hero-in 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) forwards; }
  .hero__slide.is-active .hero__content .btn { animation: sw-hero-in 0.9s 0.45s cubic-bezier(0.22,1,0.36,1) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sub, .hero__title, .hero__content .btn { opacity: 1; transform: none; }
}
@keyframes sw-hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Autoplay progress — the fill animates from 0 to 100% over the slide
   duration; when it completes, JS shows the next slide and restarts it.
   Keep the 6s here in sync with DURATION in assets/js/main.js. */
.hero__progress {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: min(340px, 62vw); height: 3px;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  overflow: hidden;
}
.hero__progress__fill {
  display: block; width: 0; height: 100%;
  background: #fff; border-radius: 999px;
}
.hero__progress__fill.is-running {
  animation: sw-hero-progress 6s linear forwards;
}
@keyframes sw-hero-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* 6. Home sections -------------------------------------------------------- */
.home-section { padding-block: var(--sw-section-space); }
.home-section + .home-section { padding-top: 0; }
.home-section--flush { padding-block: 0; }
.home-featured__more { text-align: center; margin-top: 44px; }

/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.home-categories__more { text-align: center; margin-top: 44px; }
.cat-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--sw-radius);
  aspect-ratio: 3 / 4;
}
.cat-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-tile:hover img { transform: scale(1.08); }
.cat-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55) 100%);
  transition: opacity var(--sw-transition);
}
.cat-tile__label {
  position: absolute; bottom: 22px; left: 0; right: 0; z-index: 2;
  text-align: center;
  color: #fff; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* Promo banner */
.home-promo {
  position: relative; overflow: hidden;
  min-height: 480px;
  display: flex; align-items: center;
  padding-block: 0;
}
.home-promo__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.home-promo__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.15) 100%);
}
.home-promo__content {
  position: relative; z-index: 2;
  text-align: left; max-width: 640px;
}
.home-promo__sub {
  display: block; color: rgba(255,255,255,0.85);
  font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 16px;
}
.home-promo__title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 30px; }

/* Lookbook */
.look-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.look-tile__link { display: block; }
.look-tile {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--sw-radius);
  aspect-ratio: 4 / 5;
  cursor: pointer;
}
.look-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.look-tile:hover img { transform: scale(1.07); }
.look-tile__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.look-tile__caption svg { transform: rotate(-45deg); }

/* Testimonials */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi-card {
  margin: 0; padding: 34px 30px;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
}
.testi-card__stars { display: flex; gap: 3px; color: var(--sw-color-accent); margin-bottom: 16px; }
.testi-card__text { font-size: 0.98rem; line-height: 1.8; margin: 0 0 20px; }
.testi-card__meta { display: flex; flex-direction: column; }
.testi-card__meta strong { color: var(--sw-color-heading); font-size: 0.9rem; }
.testi-card__meta span { font-size: 0.78rem; opacity: 0.65; }

/* Newsletter */
.home-newsletter { padding-bottom: calc(var(--sw-section-space) * 1.25); }
.newsletter-box {
  max-width: 680px; margin-inline: auto; text-align: center;
  padding: 56px 40px;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
}
.newsletter-box__text { margin: 0 auto 28px; max-width: 460px; opacity: 0.75; }
.newsletter-form {
  display: flex; gap: 10px; max-width: 480px; margin-inline: auto;
}
.newsletter-form input { flex: 1; }

/* Blog cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post-card {
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  overflow: hidden;
  box-shadow: var(--sw-shadow-sm);
  transition: transform var(--sw-transition), box-shadow var(--sw-transition);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sw-shadow); }
.post-card__thumb { display: block; overflow: hidden; aspect-ratio: 3 / 2; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.post-card:hover .post-card__thumb img { transform: scale(1.06); }
.post-card__body { padding: 26px 26px 30px; }
.post-card__meta { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sw-color-primary); margin-bottom: 10px; }
.post-card__title { font-size: 1.35rem; margin: 0 0 12px; }
.post-card__title a:hover { color: var(--sw-color-primary); }
.post-card__excerpt { font-size: 0.92rem; opacity: 0.8; }
.post-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sw-color-heading);
}
.post-card__more svg { transition: transform var(--sw-transition); }
.post-card__more:hover { color: var(--sw-color-primary); }
.post-card__more:hover svg { transform: translateX(5px); }

/* 7. Product cards & shop ------------------------------------------------ */
.sw-product-wrap { padding-block: var(--sw-section-space); }
.sw-shop-grid { padding-block: var(--sw-section-space); }
.sw-shop-grid:has(.sw-sidebar) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  align-items: start;
}
.sw-sidebar .widget {
  background: var(--sw-color-surface);
  padding: 24px;
  border-radius: var(--sw-radius);
  margin-bottom: 24px;
}
.sw-sidebar .widget-title { font-size: 1rem; margin-bottom: 14px; }

/* Product loop grid */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 24px;
  margin: 0 0 40px !important;
  padding: 0 !important;
}
/* WooCommerce's columns-N classes keep the grid in sync with the
   Customizer "products per row" setting (literal values — no var() in
   repeat(), which is unreliable across browsers). */
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  overflow: hidden;
  transition: transform var(--sw-transition), box-shadow var(--sw-transition);
}
ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: var(--sw-shadow);
}
/* Product card media block (from the theme's content-product.php override):
   wraps sale badge + hover image + thumbnail. The block has a fixed 4:5
   aspect ratio and both images object-fit: cover it, so main and hover
   images are framed identically — and a square legacy thumbnail can never
   clip the top of a portrait photo (it crops the sides instead). */
.woocommerce-loop-product__link { display: block; }
.sw-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sw-color-muted);
}
/* NOTE: this selector's specificity (0,5,1) must stay ABOVE WooCommerce's
   ".woocommerce ul.products li.product a img" rules (0,4,1), which force
   height:auto + margins on every image inside a product link and were
   shrinking both card images inside the aspect-ratio box, letting the hover
   image spill over the card. Both images now absolutely fill the media box —
   deterministic, independent of the source files' dimensions. */
.woocommerce ul.products li.product .sw-card-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.woocommerce ul.products li.product .sw-product-card__hover-img {
  opacity: 0;
  z-index: 2;
}
ul.products li.product:hover .sw-product-card__hover-img { opacity: 1; transform: scale(1.04); }
/* Fade the MAIN image out only when a hover image exists — and exclude the
   hover image itself from this rule (it is also an img inside the media
   block, and this selector's higher specificity would otherwise fade it out
   too, leaving the card blank white). */
ul.products li.product.sw-has-hover-img:hover .sw-card-media img:not(.sw-product-card__hover-img) { opacity: 0; }

span.onsale {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  min-width: 0; min-height: 0; line-height: 1;
  margin: 0 !important; padding: 6px 12px;
  background: var(--sw-color-accent); color: #fff;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--sw-radius);
}

.woocommerce-loop-product__title {
  font-family: var(--sw-font-body);
  font-size: 0.95rem !important; font-weight: 500;
  padding: 16px 18px 0 !important;
  color: var(--sw-color-heading);
}
.woocommerce-loop-product__title:hover { color: var(--sw-color-primary); }
ul.products li.product .price {
  display: block;
  padding: 6px 18px 2px;
  color: var(--sw-color-primary);
  font-size: 1rem; font-weight: 600;
}
ul.products li.product .price del { opacity: 0.45; margin-right: 6px; color: var(--sw-color-body); }
ul.products li.product .price ins { text-decoration: none; color: var(--sw-color-primary); }

/* Quick-add — always-visible pill under the price (never hidden behind a
   hover state, so the main buying action is always on screen). */
ul.products li.product .sw-quick-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 36px);
  margin: 8px 18px 18px;
  padding: 13px 18px;
  border: 0;
  line-height: 1;
  background: var(--sw-color-primary);
  color: #fff;
  border-radius: var(--sw-btn-radius);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--sw-transition), transform var(--sw-transition), box-shadow var(--sw-transition);
}
ul.products li.product .sw-quick-add:hover {
  background: var(--sw-color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--sw-shadow-sm);
}
ul.products li.product .sw-quick-add svg { width: 15px; height: 15px; flex-shrink: 0; }
.sw-quick-add__label { display: inline; }
ul.products li.product .sw-quick-add--view {
  background: transparent;
  color: var(--sw-color-heading);
  border: 1px solid var(--sw-color-muted);
}
ul.products li.product .sw-quick-add--view:hover {
  background: var(--sw-color-heading);
  border-color: var(--sw-color-heading);
  color: var(--sw-color-bg);
}
.sw-quick-add.added { display: none !important; }

/* Shop / archive page header band — breadcrumb, title and product search
   organized in one full-width band above the grid. */
.woocommerce .sw-shop-head,
.sw-shop-head {
  background: var(--sw-color-surface);
  border-bottom: 1px solid var(--sw-color-muted);
  padding: 34px 0 30px;
}
.sw-shop-head .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 8px 40px;
  align-items: center;
}
.sw-shop-head .woocommerce-breadcrumb {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 0.78rem;
  opacity: 0.75;
}
.sw-shop-head .page-title {
  grid-column: 1;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  margin: 0;
}
.sw-shop-head__search { grid-column: 2; grid-row: 2; }
.sw-shop-head__search .woocommerce-product-search {
  display: flex;
  gap: 8px;
  margin: 0;
}
.sw-shop-head__search input[type="search"] {
  flex: 1;
  height: 46px;
  margin: 0;
}
.sw-shop-head__search button[type="submit"] {
  height: 46px;
  padding: 0 22px;
  background: var(--sw-color-secondary);
  color: #fff;
  border: 0;
  border-radius: var(--sw-btn-radius);
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--sw-transition);
}
.sw-shop-head__search button[type="submit"]:hover { background: var(--sw-color-primary); }
.sw-shop-head + .sw-shop-grid { padding-top: 28px; }

/* Shop / archive toolbar: results count left, sorting right on one row. */
.woocommerce .woocommerce-result-count {
  float: left;
  margin: 0;
  line-height: 44px;
  font-size: 0.82rem;
  opacity: 0.7;
}
.woocommerce .woocommerce-ordering {
  float: right;
  margin: 0 0 24px;
}
.woocommerce .woocommerce-ordering select {
  width: auto;
  height: 44px;
  padding: 0 34px 0 14px;
  font-size: 0.85rem;
}
.woocommerce ul.products { clear: both; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-info, .woocommerce-error {
  background: var(--sw-color-surface);
  border-top: 3px solid var(--sw-color-primary);
  padding: 16px 20px;
  border-radius: var(--sw-radius);
  clear: both;
}

/* Single product — full grid takeover. WooCommerce's own float styles
   (div.images { float:left; width:48% }) were out-ranking the theme's grid,
   which shrank the gallery, left a huge gap and leaked the two-column layout
   onto mobile. Specificity + !important resets take over here. */
.woocommerce div.product,
.woocommerce-page div.product {
  display: grid;
  /* Tighter 6/5 split + smaller gap so the portrait-cropped gallery stays
     inside the viewport height on desktop (fits ~768px-tall screens). */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 36px;
  align-items: start;
}
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
  grid-column: 1;
  grid-row: 1;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
/* Keep the gallery inside the screen height on desktop: the 4:5 portrait
   crop can otherwise grow ~830px tall on a ~676px viewport, forcing a scroll
   before the summary starts. Zoom / lightbox still work (WooCommerce swaps
   the src, the element keeps max-width:100%). */
.woocommerce div.product div.images .flex-viewport,
.woocommerce-page div.product div.images .flex-viewport {
  max-height: calc(100vh - var(--sw-header-h));
  overflow: hidden;
}
.woocommerce div.product div.images .flex-viewport img,
.woocommerce-page div.product div.images .flex-viewport img {
  width: 100% !important;
  max-height: calc(100vh - var(--sw-header-h));
  object-fit: contain;
}
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
/* Tabs, related and upsells run full-width below the columns. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > section.related,
.woocommerce div.product > section.up-sells { grid-column: 1 / -1; }
.woocommerce div.product div.images img { width: 100%; height: auto; }
/* Single product page: calm the page paddings so the product starts closer
   to the fold — .site-main (80px) and .sw-product-wrap (80px) stack, and the
   summary column needs every spare pixel of the viewport height. */
.single-product .site-main { padding-block: 40px 24px; }
.single-product .sw-product-wrap { padding-block: 0; }
.single-product .sw-product-wrap__main { padding-bottom: 48px; }
/* Normalize the vertical rhythm inside the summary column (~28px steps). */
.single-product .summary > * { margin-top: 0; }
.single-product .summary > * + * { margin-top: 28px; }
.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary form.cart { margin-top: 28px; }
.single-product .product_title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.single-product .summary .price { color: var(--sw-color-primary); font-size: 1.4rem; font-weight: 600; }
.single-product .woocommerce-product-details__short-description { opacity: 0.85; margin-bottom: 20px; }

/* Simple products: qty + button on one row. */
.single-product form.cart:not(.variations_form) {
  display: flex;
  gap: 12px;
  margin: 24px 0;
}
/* Variable products: the form also contains the variations table, so the
   form stacks and only the qty/button row is flexed — flexing the form
   pushed the qty/button BESIDE the swatches. */
.single-product form.cart.variations_form { display: block; margin: 24px 0; }
.single-product form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex !important;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

/* Quantity — matches the button height, no raw spinner arrows. */
.woocommerce .quantity { display: inline-flex; }
.woocommerce .quantity .qty {
  width: 74px;
  height: 50px;
  text-align: center;
  border: 1px solid var(--sw-color-muted);
  border-radius: var(--sw-btn-radius);
  background: var(--sw-color-surface);
  color: var(--sw-color-heading);
  font-size: 1rem;
  appearance: textfield;
  -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to cart — dark, solid, unwrapped (matches the reference design). */
.single-product .single_add_to_cart_button {
  padding: 16px 44px;
  background: var(--sw-color-secondary);
  color: #fff;
  border: 0;
  border-radius: var(--sw-btn-radius);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--sw-transition), box-shadow var(--sw-transition), background var(--sw-transition);
}
.single-product .single_add_to_cart_button:hover {
  background: var(--sw-color-primary);
  transform: translateY(-2px);
  box-shadow: var(--sw-shadow);
}
.single-product .product_meta { font-size: 0.82rem; opacity: 0.7; border-top: 1px solid var(--sw-color-muted); padding-top: 18px; }

/* Variations table: stack each attribute (label above its swatches) instead
   of WooCommerce's side-by-side cells. */
.woocommerce table.variations {
  border: 0 !important;
  border-collapse: collapse;
  margin: 0;
}
.woocommerce table.variations tr { display: block; margin-bottom: 22px; }
.woocommerce table.variations td {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.woocommerce table.variations td.label { padding: 0 0 10px !important; }
.woocommerce table.variations label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-color-heading);
}
.sw-swatch-wrap .reset_variations {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sw-color-primary);
}

.sw-trust-badges {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 28px 0; list-style: none; padding: 0;
}
.sw-trust-badge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 10px; text-align: center;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
}
.sw-trust-badge__icon { color: var(--sw-color-primary); }
.sw-trust-badge__text strong { display: block; font-size: 0.8rem; color: var(--sw-color-heading); }
.sw-trust-badge__text small { font-size: 0.7rem; opacity: 0.6; }

.single-product .woocommerce-tabs ul.tabs {
  display: flex; gap: 28px; padding: 0; margin: 56px 0 0;
  border-bottom: 1px solid var(--sw-color-muted);
}
.single-product .woocommerce-tabs ul.tabs::before { display: none; }
.single-product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 14px 2px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sw-color-body);
  border-bottom: 2px solid transparent;
  transition: color var(--sw-transition), border-color var(--sw-transition);
}
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--sw-color-heading);
  border-bottom-color: var(--sw-color-primary);
}

/* Variation swatches (color circles / size labels) -------------------------- */
.sw-swatch-wrap { position: relative; }
.sw-swatch-wrap select {
  position: absolute;
  left: -9999px;
}
.sw-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.sw-swatch {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--sw-transition), box-shadow var(--sw-transition), border-color var(--sw-transition), background var(--sw-transition);
}
.sw-swatch--color {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.sw-swatch--color.is-active {
  box-shadow: 0 0 0 2px var(--sw-color-bg), 0 0 0 4px var(--sw-color-heading);
}
.sw-swatch--color:hover { transform: scale(1.08); }
.sw-swatch--label {
  padding: 10px 18px;
  background: var(--sw-color-surface);
  border: 1px solid var(--sw-color-muted);
  border-radius: var(--sw-btn-radius);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sw-color-heading);
}
.sw-swatch--label:hover { border-color: var(--sw-color-heading); }
.sw-swatch--label.is-active {
  border-color: var(--sw-color-heading);
  box-shadow: inset 0 0 0 1px var(--sw-color-heading);
}
.sw-swatch--view:hover { transform: translateY(-2px); }

.woocommerce-pagination ul, .page-numbers {
  display: flex; justify-content: center; gap: 8px;
  list-style: none; padding: 0; margin: 40px 0 0;
}
.woocommerce-pagination ul li .page-numbers,
.page-numbers li .page-numbers {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--sw-color-muted);
  border-radius: var(--sw-radius);
  font-size: 0.85rem;
  transition: background var(--sw-transition), color var(--sw-transition), border-color var(--sw-transition);
}
.woocommerce-pagination ul li .page-numbers:hover,
.page-numbers li .page-numbers:hover,
.page-numbers li .page-numbers.current {
  background: var(--sw-color-primary); border-color: var(--sw-color-primary); color: #fff;
}

/* 8. Blog single, 404, comments ------------------------------------------- */
.single-post { max-width: 820px; margin-inline: auto; }
.single-post__thumb { margin-bottom: 40px; border-radius: var(--sw-radius); overflow: hidden; }
.single-post__header { text-align: center; margin-bottom: 32px; }
.single-post__title { font-size: clamp(2rem, 4vw, 3rem); }
.single-post__meta { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sw-color-primary); margin-bottom: 14px; }
.single-post__footer .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.single-post__footer .tag-list a {
  padding: 6px 14px;
  background: var(--sw-color-surface);
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid var(--sw-color-muted);
}
.single-post__footer .tag-list a:hover { border-color: var(--sw-color-primary); color: var(--sw-color-primary); }

.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; }
.post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { font-size: 0.88rem; font-weight: 600; }
.post-navigation .nav-sub { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; margin-bottom: 4px; }

.error-404 { text-align: center; padding: 40px 0 20px; }
.error-404__code {
  font-size: clamp(6rem, 16vw, 11rem);
  font-family: var(--sw-font-heading);
  color: var(--sw-color-primary);
  line-height: 1; margin: 0;
}
.error-404__title { font-size: 1.6rem; margin: 12px 0 8px; }
.error-404__text { opacity: 0.7; margin-bottom: 28px; }
.error-404 .search-form { margin-bottom: 28px; }

.comments-area { margin-top: 64px; }
.comment-list { list-style: none; padding: 0; }
.comment-list ol.children { list-style: none; padding-left: 36px; }
.comment-body { padding: 24px; margin-bottom: 18px; background: var(--sw-color-surface); border-radius: var(--sw-radius); }
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--sw-color-heading); }
.comment-metadata, .comment-metadata a { font-size: 0.75rem; opacity: 0.6; }
.reply a { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--sw-color-primary); }
.comment-content p:last-child { margin-bottom: 0; }
.comment-respond { margin-top: 40px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { margin-bottom: 16px; }
.comment-form .submit {
  padding: 14px 34px;
  background: var(--sw-color-primary); color: #fff;
  border: 0; border-radius: var(--sw-btn-radius);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--sw-transition), box-shadow var(--sw-transition);
}
.comment-form .submit:hover { transform: translateY(-3px); box-shadow: var(--sw-shadow); }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: var(--sw-section-space);
  background: var(--sw-color-secondary);
  color: rgba(255, 255, 255, 0.72);
}
.site-footer .widget-title, .site-footer h4 { color: #fff; }
.site-footer a:hover { color: var(--sw-color-accent); }

.site-footer__widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-block: 64px 48px;
}
.site-footer .widget ul { list-style: none; padding: 0; }
.site-footer .widget ul li { padding: 5px 0; font-size: 0.9rem; }
.site-footer .widget ul li a { color: rgba(255,255,255,0.72); }
.site-footer .widget ul li a:hover { color: #fff; }

/* Default detailed footer columns (About / Latest news / Tags / Newsletter).
   Rendered when no Footer Column widget areas are active. */
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.25fr 1.2fr 1fr 1.1fr;
  gap: 48px;
  padding-block: 64px 48px;
}
.footer-col__title {
  color: #fff; font-size: 1rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 26px;
}
.footer-about__text { margin: 0 0 22px; line-height: 1.8; font-size: 0.92rem; }

/* Latest news list with date badges */
.footer-news { list-style: none; margin: 0; padding: 0; }
.footer-news__item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.footer-news__item:last-child { border-bottom: 0; }
.footer-news__link {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  color: rgba(255, 255, 255, 0.78); text-decoration: none;
  transition: color var(--sw-transition);
}
.footer-news__link:hover { color: #fff; }
.footer-news__date {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 6px 8px; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px;
}
.footer-news__day { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.1; }
.footer-news__month { color: rgba(255, 255, 255, 0.6); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-news__title { font-size: 0.92rem; line-height: 1.5; }

/* Tag chips */
.footer-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-tag {
  display: inline-block; padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 3px;
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); text-decoration: none;
  transition: background var(--sw-transition), border-color var(--sw-transition), color var(--sw-transition);
}
.footer-tag:hover { background: #fff; border-color: #fff; color: var(--sw-color-secondary); }
.footer-tags__empty { font-size: 0.85rem; opacity: 0.7; margin: 0; }

/* Newsletter column */
.footer-newsletter__text { margin: 0 0 20px; line-height: 1.7; font-size: 0.92rem; }
.footer-newsletter__form { display: flex; flex-direction: column; gap: 12px; }
.footer-newsletter__form input[type="email"] {
  width: 100%; padding: 13px 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  color: #fff; font-size: 0.9rem; outline: none;
  transition: border-color var(--sw-transition), background var(--sw-transition);
}
.footer-newsletter__form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-newsletter__form input[type="email"]:focus { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.1); }
.footer-newsletter__form .btn { align-self: flex-start; }
.footer-newsletter__msg { margin: 10px 0 0; font-size: 0.82rem; }
.footer-newsletter__msg.is-ok { color: var(--sw-color-accent); }

/* Payment method badges */
.site-footer__payments { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 26px; }
.pay-badges {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; height: 34px; padding: 0 12px;
  background: #fff; border-radius: 5px;
  font-size: 0.82rem; font-weight: 700; color: #1a1f36;
  letter-spacing: 0.02em; line-height: 1;
}
.pay-badge--visa { color: #1a1f71; font-style: italic; letter-spacing: 0.06em; }
.pay-badge--paypal { font-style: italic; }
.pay-badge--paypal .pay-paypal__a { color: #003087; }
.pay-badge--paypal .pay-paypal__b { color: #009cde; margin-left: 1px; }
.pay-badge--stripe { color: #635bff; text-transform: lowercase; font-size: 0.9rem; }
.pay-badge--mastercard { gap: 0; }
.pay-mc { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
.pay-mc--red { background: #eb001b; }
.pay-mc--orange { background: #f79e1b; margin-left: -8px; mix-blend-mode: multiply; }
.pay-badge--cod {
  font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; line-height: 1.3; color: #2b2b33; padding: 0 10px;
}

.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 28px;
}
.site-footer__bar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.footer-menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.footer-menu a {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.footer-menu a:hover { color: #fff; }
.social-icons--footer a { color: rgba(255, 255, 255, 0.72); }

.site-footer__copy {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 18px;
  font-size: 0.75rem;
  text-align: center;
}
.site-footer__copy a { color: #fff; }

/* Back to top */
.back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 90;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sw-color-primary); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity var(--sw-transition), transform var(--sw-transition), visibility var(--sw-transition), background var(--sw-transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--sw-color-secondary); }
.back-to-top svg { transform: rotate(-90deg); }

/* 10. Reveal animations --------------------------------------------------- */
[data-sw-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--sw-reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-sw-reveal="left"] { transform: translateX(-40px); }
[data-sw-reveal="right"] { transform: translateX(40px); }
[data-sw-reveal="zoom"] { transform: scale(0.94); }
[data-sw-reveal="fade"] { transform: none; }
[data-sw-reveal].is-visible,
.sw-js-ready [data-sw-reveal].is-visible { opacity: 1; transform: none; }

/* 11. Skin-specific overrides — the three distinct looks ------------------ */
/* MAISON — elegant editorial: refined serif, thin rules, generous letter-spacing */
.skin-maison .section-heading__sub { font-style: italic; text-transform: none; letter-spacing: 0.08em; font-size: 0.95rem; font-family: var(--sw-font-heading); }
.skin-maison .main-navigation a { letter-spacing: 0.18em; }

/* NOIR — bold streetwear: heavy uppercase, hard edges, inverted surfaces */
.skin-noir .site-header {
	border-bottom: 1px solid var(--sw-color-muted);
	/* The Noir skin keeps its dark header even though the header background
	   color control defaults to white. */
	background: var(--sw-color-surface);
}
.skin-noir .section-heading__title { font-weight: 700; }
.skin-noir ul.products li.product { background: transparent; border: 1px solid var(--sw-color-muted); }
.skin-noir ul.products li.product:hover { background: var(--sw-color-surface); }
.skin-noir .sw-quick-add { background: var(--sw-color-primary); }
.skin-noir .sw-quick-add:hover { background: #fff; color: #0e0e10; }
.skin-noir .testi-card { background: var(--sw-color-surface); border: 1px solid var(--sw-color-muted); box-shadow: none; }
.skin-noir .newsletter-box { background: var(--sw-color-surface); border: 1px solid var(--sw-color-muted); box-shadow: none; }
.skin-noir .hero__title { letter-spacing: 0.06em; }
.skin-noir .cat-tile__label { letter-spacing: 0.28em; }

/* FRESH — bright minimal: soft cards, pill buttons, playful accents */
.skin-fresh .btn { letter-spacing: 0.05em; }
.skin-fresh ul.products li.product { box-shadow: var(--sw-shadow-sm); border-radius: 16px; }
.skin-fresh .testi-card, .skin-fresh .newsletter-box { border-radius: 20px; }
.skin-fresh .cat-tile, .skin-fresh .look-tile { border-radius: 16px; }
.skin-fresh .section-heading__rule { width: 44px; height: 5px; border-radius: 999px; background: var(--sw-color-primary); }
.skin-fresh .hero__progress { height: 4px; }
.skin-fresh .hero__progress__fill { background: var(--sw-color-primary); }

/* 12. Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .woocommerce div.product,
  .woocommerce-page div.product { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { grid-column: 1; grid-row: auto; }
  /* Stacked layout: let the gallery grow naturally again (no viewport cap,
     no letterboxing) and restore the page rhythm trimmed for desktop. */
  .woocommerce div.product div.images .flex-viewport { max-height: none; }
  .woocommerce div.product div.images .flex-viewport img { max-height: none; object-fit: initial; }
  .single-product .site-main { padding-block: var(--sw-section-space); }
  .single-product .sw-product-wrap { padding-block: var(--sw-section-space); }
  .sw-shop-grid:has(.sw-sidebar) { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .site-header__inner { gap: 18px; justify-content: space-between; }
  .site-header__brand { order: 2; }
  .site-header__actions { order: 3; }
  .menu-toggle { display: flex; order: 1; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }

  .main-navigation {
    position: fixed; top: 0; right: 0; z-index: 200;
    width: min(340px, 88vw); height: 100vh;
    background: var(--sw-color-surface);
    padding: 84px 34px 34px;
    transform: translateX(105%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
    flex: none;
    overflow-y: auto;
  }
  .main-navigation.is-open { transform: translateX(0); }
  .main-navigation ul { flex-direction: column; align-items: flex-start; gap: 20px; }
  .main-navigation ul ul {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; padding: 8px 0 0 18px; background: transparent;
  }
  .main-navigation a::after { display: none; }
  .nav-close {
    display: flex; position: absolute; top: 22px; right: 24px;
    background: none; border: 0; color: var(--sw-color-heading); cursor: pointer; padding: 8px;
  }
  body.nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 119;
    background: rgba(0, 0, 0, 0.45);
  }
}

@media (max-width: 767px) {
  :root { --sw-header-h: 72px; --sw-section-space: 56px; }
  .hero { min-height: 480px; max-height: 70vh; }
  .cat-grid, .post-grid, .testi-grid, .look-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 12px; }
  /* Shop header band stacks on mobile */
  .sw-shop-head .container { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sw-shop-head__search { grid-column: 1; grid-row: auto; }
  /* Compact cards so 2/row breathes on phones */
  .woocommerce-loop-product__title { padding: 12px 12px 0 !important; font-size: 0.85rem !important; }
  ul.products li.product .price { padding: 4px 12px 0; font-size: 0.9rem; }
  ul.products li.product .sw-quick-add {
    width: calc(100% - 24px);
    margin: 6px 12px 12px;
    padding: 10px 8px;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    gap: 6px;
  }
  ul.products li.product .sw-quick-add svg { width: 13px; height: 13px; }
  .sw-trust-badges { grid-template-columns: 1fr; }
  .site-footer__widgets { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__bar-inner { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; }
  .home-promo { min-height: 400px; }
  .post-navigation .nav-links { flex-direction: column; gap: 16px; }
  .post-navigation .nav-next { text-align: left; }
}

@media (max-width: 479px) {
  /* One product per row on small phones — 2/row squeezed the cards */
  ul.products { grid-template-columns: minmax(0, 1fr) !important; gap: 24px; }
  ul.products li.product .sw-quick-add { width: calc(100% - 32px); margin: 8px 16px 16px; }
  .woocommerce-loop-product__title { padding: 14px 16px 0 !important; }
  ul.products li.product .price { padding: 4px 16px 0; }
  .cat-grid, .look-grid { grid-template-columns: 1fr; }
  .site-topbar__right { display: none; }
  .site-topbar__inner { justify-content: center; }
}

/* About page template ------------------------------------------------------ */
.site-main--about { padding-block: 0; }

.about-hero {
  position: relative;
  min-height: 46vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: #fff; text-align: center;
}
.about-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.55)); }
.about-hero__content { position: relative; z-index: 2; padding-block: 80px; }
.about-hero__sub {
  display: block; font-size: 0.82rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); margin-bottom: 16px;
}
.about-hero__title { color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); margin: 0; }

.about-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
  padding-block: calc(var(--sw-section-space) * 0.9) calc(var(--sw-section-space) * 0.5);
}
.about-intro__text h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
.about-intro__img { border-radius: var(--sw-radius); overflow: hidden; box-shadow: var(--sw-shadow); }

.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-block: calc(var(--sw-section-space) * 0.5) calc(var(--sw-section-space) * 0.75);
  text-align: center;
}
.about-stat {
  padding: 34px 16px;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
}
.about-stat__num {
  display: block;
  font-family: var(--sw-font-heading);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  color: var(--sw-color-primary);
  line-height: 1; margin-bottom: 10px;
}
.about-stat__label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }

.about-values { padding-block: 0 calc(var(--sw-section-space) * 0.8); }
.about-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-value {
  padding: 38px 30px;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
  text-align: center;
}
.about-value__icon {
  display: inline-flex; width: 58px; height: 58px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--sw-color-primary);
  background: color-mix(in srgb, var(--sw-color-primary) 12%, transparent);
  margin-bottom: 18px;
}
.about-value h3 { font-size: 1.25rem; margin: 0 0 10px; }
.about-value p { font-size: 0.92rem; opacity: 0.75; margin: 0; }

.about-gallery { overflow: hidden; }
.about-gallery__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.about-gallery__grid img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-gallery__grid img:hover { transform: scale(1.05); }

.about-cta {
  text-align: center;
  padding-block: calc(var(--sw-section-space) * 0.85) calc(var(--sw-section-space) * 0.9);
}
.about-cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.about-cta p { max-width: 520px; margin: 0 auto 26px; opacity: 0.75; }
.about-cta .btn { margin: 6px 8px; }

@media (max-width: 767px) {
  .about-intro { grid-template-columns: 1fr; gap: 32px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-values__grid { grid-template-columns: 1fr; }
  .about-gallery__grid { grid-template-columns: 1fr; }
  .about-gallery__grid img { aspect-ratio: 4 / 3; }
}

/* Contact page template ----------------------------------------------------- */
.site-main--contact { padding-block: 0; }
.contact-intro {
  max-width: 720px; margin: 0 auto;
  padding-top: calc(var(--sw-section-space) * 0.7);
  text-align: center;
}
.contact-intro p { margin: 0; opacity: 0.8; }

.contact-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: 48px;
  align-items: start;
  padding-block: calc(var(--sw-section-space) * 0.5) calc(var(--sw-section-space) * 0.85);
}
.contact-form-wrap {
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
  padding: 40px 36px;
}
.contact-form-wrap h2 { margin-top: 0; }

.sw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sw-form-field { margin-bottom: 16px; }
.sw-form-field label {
  display: block; margin-bottom: 8px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sw-color-heading);
}
.sw-form-field label span { color: var(--sw-color-primary); }
.sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sw-notice {
  padding: 14px 18px; border-radius: var(--sw-radius);
  font-size: 0.9rem; line-height: 1.6;
}
.sw-notice--success { background: #e6f6ea; color: #1e6b3a; }
.sw-notice--error { background: #fdecec; color: #b32d2e; margin-bottom: 20px; }

.contact-info-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--sw-color-surface);
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow-sm);
  padding: 22px 20px; margin-bottom: 14px;
}
.contact-info-card__icon { display: flex; color: var(--sw-color-primary); flex-shrink: 0; }
.contact-info-card__text h3 { margin: 0 0 4px; font-size: 1.05rem; }
.contact-info-card__text p { margin: 0; font-size: 0.9rem; opacity: 0.75; word-break: break-word; }

@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr; }
  .sw-form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 30px 22px; }
}

/* 13. Accessibility: reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-sw-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* == END OF FILE == */