/*
Theme Name: REGISTERED
Theme URI: https://re-gistered.com
Description: REGISTERED — Luxury Fashion Theme with WooCommerce, bilingual AR/EN
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
WC requires at least: 8.0
Text Domain: registered
*/

/* =============================================================================
   GOOGLE FONTS — loaded via functions.php wp_enqueue_style
   Cormorant Garamond (display serif) + Inter Tight (body sans)
   Noto Sans Arabic (Arabic text)
============================================================================= */

/* =============================================================================
   DESIGN TOKENS
============================================================================= */
:root {
  --bg:          #FAF7F2;
  --banner:      #D9C7B0;
  --ink:         #3F3A35;
  --muted:       #8A8178;
  --soft:        #6A625B;
  --accent:      #9C7B5A;
  --divider:     #CCC4B8;
  --white:       #FFFFFF;
  --black:       #1A1815;

  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Inter Tight', -apple-system, sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Inter Tight', sans-serif;

  --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --speed:       0.22s;
  --shadow:      0 4px 24px rgba(63,58,53,0.07);
  --shadow-lg:   0 12px 48px rgba(63,58,53,0.12);

  --max-w:       1440px;
  --gutter:      40px;
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
}

/* =============================================================================
   RESET
============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-rtl {
  font-family: var(--font-arabic);
  direction: rtl;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; }

/* =============================================================================
   LAYOUT
============================================================================= */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =============================================================================
   TYPOGRAPHY
============================================================================= */
.t-serif  { font-family: var(--font-serif); }
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.t-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: 1.06;
  letter-spacing: 0.01em;
}
.t-display em,
.section-title em,
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--soft);
}
.section-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.1;
  color: var(--ink);
}

/* =============================================================================
   BUTTONS
============================================================================= */
.btn {
  display: inline-block;
  padding: 15px 40px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-outline {
  background: transparent;
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--bg); }

.btn-sm { padding: 10px 24px; font-size: 10px; }

/* =============================================================================
   HEADER — ANNOUNCEMENT BAR
============================================================================= */
.header-announcement {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  padding: 9px var(--gutter);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.header-announcement a { color: var(--bg); opacity: 0.85; transition: opacity var(--speed); }
.header-announcement a:hover { opacity: 1; }

/* =============================================================================
   HEADER — UTILITY BAR (language + currency)
============================================================================= */
.header-utility {
  border-bottom: 1px solid var(--divider);
  padding: 7px 0;
}
.header-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lang-switcher a,
.currency-switcher a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-end: 14px;
  transition: color var(--speed);
  text-decoration: none;
}
.lang-switcher a:hover, .lang-switcher a.active,
.currency-switcher a:hover, .currency-switcher a.active {
  color: var(--ink);
}
.lang-switcher a.active,
.currency-switcher a.active {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.currency-switcher { display: flex; flex-wrap: wrap; gap: 2px; }

/* =============================================================================
   HEADER — MAIN ROW
============================================================================= */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 300;
  transition: box-shadow var(--speed) var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow); }

.header-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 0;
  gap: 24px;
}

/* Logo */
.header-logo-wrap { text-align: center; }
.header-logo {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.38em;
  color: var(--ink);
  line-height: 1;
  text-transform: uppercase;
}
.header-logo img { max-height: 50px; width: auto; margin-inline: auto; }
.header-logo-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 8.5px;
  letter-spacing: 0.44em;
  color: var(--muted);
  margin-top: 5px;
  text-transform: uppercase;
  font-weight: 400;
}

/* Primary nav — left side */
.header-nav { display: flex; align-items: center; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-list > li { position: relative; }
.nav-list > li > a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  position: relative;
  transition: opacity var(--speed);
}
.nav-list > li > a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width var(--speed) var(--ease);
}
.nav-list > li > a:hover::after,
.nav-list > li.current-menu-item > a::after,
.nav-list > li.current-menu-ancestor > a::after { width: 100%; }
.nav-list > li > a:hover { opacity: 0.7; }

/* Dropdown */
.nav-list li.menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--divider);
  min-width: 200px;
  padding: 16px 0;
  box-shadow: var(--shadow-lg);
  z-index: 400;
}
.nav-list li.menu-item-has-children:hover > .sub-menu { display: block; }
.sub-menu li a {
  display: block;
  padding: 9px 24px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--speed), padding-left var(--speed);
}
.sub-menu li a:hover { color: var(--ink); padding-inline-start: 30px; }

/* Header actions — right side */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
.header-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  transition: color var(--speed);
  padding: 0;
}
.header-action:hover { color: var(--ink); }
.header-action svg { flex-shrink: 0; }
.header-action-label { display: none; }
@media (min-width: 1200px) { .header-action-label { display: inline; } }

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px; height: 17px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  padding: 0 4px;
  line-height: 1;
}

/* Mobile toggle */
.header-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  padding: 4px;
}
@media (max-width: 960px) {
  .header-nav { display: none; }
  .header-mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .header-main { grid-template-columns: auto 1fr auto; }
  .header-logo-wrap { text-align: center; }
  .header-actions { gap: 12px; }
  .header-action-label { display: none !important; }
}

/* =============================================================================
   HEADER — SEARCH BAR
============================================================================= */
.header-search {
  border-top: 1px solid var(--divider);
  background: var(--bg);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), padding 0.3s var(--ease);
}
.header-search.open {
  max-height: 80px;
  padding: 16px 0;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 2px;
}
.search-form input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  padding: 6px 0;
  letter-spacing: 0.04em;
}
.search-form input::placeholder { color: var(--muted); }
.search-form button {
  background: none;
  border: none;
  color: var(--muted);
  transition: color var(--speed);
}
.search-form button:hover { color: var(--ink); }

/* =============================================================================
   FEATURE STRIP
============================================================================= */
.feature-strip {
  border-bottom: 1px solid var(--divider);
}
.feature-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 13px 0;
  gap: 16px;
}
.feature-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.feature-strip-item svg { color: var(--accent); flex-shrink: 0; }
@media (max-width: 600px) {
  .feature-strip-item:nth-child(2),
  .feature-strip-item:nth-child(3) { display: none; }
}

/* =============================================================================
   MOBILE DRAWER
============================================================================= */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  pointer-events: none;
}
.mobile-drawer.open { pointer-events: auto; }
.mobile-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(63,58,53,0);
  transition: background 0.35s var(--ease);
}
.mobile-drawer.open .mobile-drawer-overlay { background: rgba(63,58,53,0.5); }
.mobile-drawer-panel {
  position: relative;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background: var(--bg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease);
  padding: 28px 28px 60px;
}
.is-rtl .mobile-drawer-panel {
  margin-inline-start: auto;
  transform: translateX(100%);
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none; border: none;
  font-size: 26px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.is-rtl .mobile-drawer-close { right: auto; left: 20px; }
.mobile-drawer-logo {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.35em;
  color: var(--ink);
  margin-top: 40px;
  margin-bottom: 36px;
  display: block;
}
.mobile-nav li a {
  display: block;
  padding: 13px 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--divider);
}
.mobile-nav li a:hover { color: var(--muted); }
.mobile-nav .sub-menu { padding-inline-start: 16px; }
.mobile-nav .sub-menu li a { font-size: 12px; color: var(--muted); }
.mobile-drawer-meta {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
}
.mobile-drawer-meta a {
  display: block;
  padding: 10px 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =============================================================================
   LINE BANNER (editorial beige strip)
============================================================================= */
.line-banner {
  background: var(--banner);
  text-align: center;
  padding: 20px var(--gutter);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.48em;
  color: var(--ink);
}
.line-banner em { font-style: italic; color: var(--soft); }

/* =============================================================================
   PAGE SECTIONS
============================================================================= */
.section { padding: 90px 0; }
.section-sm { padding: 60px 0; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head .t-eyebrow { margin-bottom: 18px; }

/* =============================================================================
   HERO
============================================================================= */
/* =============================================================================
   HERO — New design: text centred on top, two product images below side by side
   Clean luxury editorial style
============================================================================= */
.site-hero {
  padding: 72px 0 0;
  background: var(--bg);
}

/* Text block — centred, minimal */
.hero-text {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 52px;
  padding: 0 var(--gutter);
  padding-inline-start: 0;
}
.hero-eyebrow {
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 86px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 22px;
}
.hero-body {
  color: var(--soft);
  font-size: 15px;
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto 36px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Images — side by side strip below the text, full container width */
.hero-inner { display: block; }
.hero-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 100%;
}
/* Each image fills its cell — contain so nothing crops */
.hero-img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--banner);
}
.hero-img-wrap-main,
.hero-img-wrap-offset {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none;
}
.hero-img-main,
.hero-img-offset {
  position: static !important;
  width: 100% !important;
  height: 72vh !important;
  min-height: 480px;
  max-height: 800px;
  object-fit: contain !important;  /* show full image, no crop */
  object-position: bottom center;  /* models stand on floor — show feet to head */
  background: var(--banner);
  display: block;
}
.hero-img-placeholder {
  display: block;
  width: 100%;
  height: 72vh;
  min-height: 480px;
  background: var(--banner);
}

/* Hero image overlay text */
.hero-img-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 20px 18px;
  background: linear-gradient(to top, rgba(18,16,14,.62) 0%, transparent 100%);
  z-index: 3;
}
.hero-img-badge {
  display: block;
  font-size: 9px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(250,247,242,.72); margin-bottom: 5px;
}
.hero-img-cap {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 300; color: #fff; line-height: 1.2;
}

@media (max-width: 768px) {
  .site-hero { padding-top: 48px; }
  .hero-title { font-size: clamp(38px, 9vw, 64px); }
  .hero-images { grid-template-columns: 1fr; gap: 3px; }
  .hero-img-main,
  .hero-img-offset { height: 88vw !important; min-height: 320px; }
}
@media (max-width: 480px) {
  .site-hero { padding-top: 32px; }
  .hero-text { margin-bottom: 32px; }
  .hero-img-main,
  .hero-img-offset { height: 100vw !important; min-height: 280px; }
}

/* =============================================================================
   CATEGORY EDIT GRID
============================================================================= */
.edit-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--divider);
  border-block: 1px solid var(--divider);
}
@media (max-width: 960px)  { .edit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px)  { .edit-grid { grid-template-columns: repeat(2, 1fr); } }

.edit-cell {
  background: var(--bg);
  padding: 36px 20px;
  text-align: center;
  display: block;
  color: inherit;
  transition: background var(--speed) var(--ease);
}
.edit-cell:hover { background: var(--banner); }
.edit-cell-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.edit-cell-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* =============================================================================
   PRODUCT CARD
============================================================================= */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 20px;
}
@media (max-width: 1100px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } }

.product-card { position: relative; }

.product-card-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--banner);
  margin-bottom: 14px;
}
.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
  display: block;
}
.product-card:hover .product-card-image img { transform: scale(1.04); }
.product-card-placeholder { width: 100%; height: 100%; background: var(--banner); }

.product-badge {
  position: absolute;
  top: 12px; inset-inline-start: 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 2;
}
.product-badge.sale { background: var(--accent); }

.product-wishlist-btn {
  position: absolute;
  top: 10px; inset-inline-end: 10px;
  background: none; border: none;
  color: var(--muted);
  z-index: 2;
  transition: color var(--speed);
}
.product-wishlist-btn:hover { color: var(--ink); }

.product-card-cta {
  position: absolute;
  bottom: 14px;
  inset-inline: 14px;
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
  text-align: center;
}
.product-card:hover .product-card-cta { opacity: 1; }

/* WC add-to-cart inside card */
.product-card-cta .button,
.product-card-cta .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  padding: 11px 16px !important;
  background: rgba(250,247,242,0.92) !important;
  color: var(--ink) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  transition: all var(--speed) !important;
}
.product-card-cta .button:hover {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

.product-card-info { padding: 2px 0; }
.product-card-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 6px;
}
.product-card-name:hover { color: var(--muted); }
.product-card-price { font-size: 14px; color: var(--accent); font-weight: 400; }
.product-card-price del { color: var(--muted); font-size: 12px; margin-inline-end: 4px; }

/* =============================================================================
   SHOP / ARCHIVE LAYOUT
============================================================================= */
.shop-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .shop-wrap { grid-template-columns: 1fr; }
  .shop-sidebar { display: none; }
  .shop-sidebar.open { display: block; }
}

.shop-sidebar {}
.filter-group { margin-bottom: 32px; }
.filter-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  padding: 5px 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--speed);
}
.filter-option:hover, .filter-option.active { color: var(--ink); }
.filter-option-count {
  margin-inline-start: auto;
  font-size: 10px;
  color: var(--divider);
}
.filter-size-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.size-btn {
  min-width: 44px; height: 44px;
  border: 1px solid var(--divider);
  background: none;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--speed);
  text-decoration: none;
}
.size-btn:hover, .size-btn.active {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 36px;
}
.shop-result-count { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; }
.shop-sort select {
  border: 1px solid var(--divider);
  background: none;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}

/* =============================================================================
   SINGLE PRODUCT
============================================================================= */
.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: 40px; }
}

.product-gallery-main {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--banner);
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.thumb-item {
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--speed);
}
.thumb-item.active, .thumb-item:hover { opacity: 1; }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }

.product-info {}
.product-info-breadcrumb { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 8px; }
.product-info-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
}
.product-info-price {
  font-size: 19px;
  color: var(--accent);
  margin-bottom: 28px;
  font-weight: 400;
}
.product-info-price del { color: var(--muted); font-size: 14px; margin-inline-end: 6px; }

.size-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sizes-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }

.add-to-cart-row { display: flex; gap: 10px; margin-bottom: 22px; }
.add-to-cart-btn {
  flex: 1;
  padding: 17px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--speed);
}
.add-to-cart-btn:hover { background: transparent; color: var(--ink); }
.add-to-cart-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.wishlist-btn {
  width: 54px;
  border: 1px solid var(--divider);
  background: none;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--speed);
}
.wishlist-btn:hover { border-color: var(--ink); color: var(--ink); }

.delivery-note { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 28px; display: flex; align-items: center; gap: 8px; }

/* Product accordion */
.product-accordion { border-top: 1px solid var(--divider); }
.accordion-item { border-bottom: 1px solid var(--divider); }
.accordion-trigger {
  width: 100%;
  background: none; border: none;
  padding: 17px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  text-align: start;
}
.accordion-trigger svg { transition: transform var(--speed); flex-shrink: 0; }
.accordion-item.open .accordion-trigger svg { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s var(--ease);
}
.accordion-item.open .accordion-body { max-height: 500px; }
.accordion-content {
  padding-bottom: 20px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.85;
}

/* =============================================================================
   CART
============================================================================= */
.cart-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) { .cart-wrap { grid-template-columns: 1fr; } }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  text-align: start; padding: 14px 0;
  border-bottom: 1px solid var(--divider);
}
.cart-table td {
  padding: 22px 0;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.cart-item-img { width: 76px; height: 100px; object-fit: cover; background: var(--banner); }
.cart-item-name { font-family: var(--font-serif); font-size: 17px; font-weight: 400; }
.cart-item-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.qty-box {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--divider);
  padding: 6px 12px;
}
.qty-box button { background: none; border: none; font-size: 15px; color: var(--muted); }
.qty-box input {
  width: 28px; text-align: center; border: none; background: none;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink);
}

.order-summary {
  background: var(--white);
  border: 1px solid var(--divider);
  padding: 32px;
}
.order-summary-title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.order-summary-row {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--muted);
  padding: 9px 0; border-bottom: 1px solid var(--divider);
}
.order-summary-total {
  display: flex; justify-content: space-between;
  font-size: 15px; color: var(--ink); font-weight: 500;
  padding: 18px 0;
}

/* =============================================================================
   CHECKOUT
============================================================================= */
.checkout-wrap {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1024px) { .checkout-wrap { grid-template-columns: 1fr; } }

.checkout-section-title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.checkout-field-wrap { margin-bottom: 20px; }
.checkout-label {
  display: block; font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.checkout-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--divider);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 14px; color: var(--ink);
  outline: none;
  transition: border-color var(--speed);
}
.checkout-input:focus { border-color: var(--ink); }
.checkout-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .checkout-grid-2 { grid-template-columns: 1fr; } }

/* =============================================================================
   FOOTER
============================================================================= */
.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding: 72px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 60px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand-logo {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.36em;
  color: var(--bg);
  display: block;
  margin-bottom: 16px;
}
.footer-brand-about {
  font-size: 13px;
  color: rgba(250,247,242,0.55);
  line-height: 1.8;
  max-width: 280px;
  margin-bottom: 24px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(250,247,242,0.22);
  display: flex; align-items: center; justify-content: center;
  color: rgba(250,247,242,0.55);
  transition: all var(--speed);
}
.footer-social a:hover { border-color: var(--bg); color: var(--bg); }

.footer-col-title {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(250,247,242,0.45);
  margin-bottom: 20px;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: 13px;
  color: rgba(250,247,242,0.7);
  transition: color var(--speed);
}
.footer-links a:hover { color: var(--bg); }

.footer-bottom {
  padding-top: 36px;
  border-top: 1px solid rgba(250,247,242,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(250,247,242,0.38);
  letter-spacing: 0.1em;
}
@media (max-width: 600px) { .footer-bottom { flex-direction: column; gap: 14px; text-align: center; } }

/* =============================================================================
   PAGINATION
============================================================================= */
.pagination-wrap {
  display: flex; gap: 4px; justify-content: center;
  padding-top: 56px;
}
.pagination-wrap a,
.pagination-wrap span {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--divider);
  font-size: 12px; color: var(--muted);
  transition: all var(--speed);
}
.pagination-wrap a:hover,
.pagination-wrap span.current {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink);
}

/* =============================================================================
   WOOCOMMERCE GLOBAL OVERRIDES
============================================================================= */
.woocommerce-notices-wrapper { padding: 0; }
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  background: var(--banner) !important;
  border-top-color: var(--accent) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--divider) !important;
  background: var(--white) !important;
  font-family: var(--font-sans) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--ink) !important; }
.woocommerce label { font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--muted) !important; font-weight: 400 !important; }
/* WC buttons */
.woocommerce a.button, .woocommerce button.button,
.woocommerce input[type=submit], .woocommerce #respond input#submit,
.woocommerce button.button.alt {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 14px 32px !important;
  transition: all var(--speed) !important;
  box-shadow: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input[type=submit]:hover {
  background: transparent !important;
  color: var(--ink) !important;
}
/* WC titles */
.woocommerce-loop-product__title {
  font-family: var(--font-serif) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
}
.woocommerce ul.products li.product .price { color: var(--accent) !important; }
.woocommerce span.onsale {
  background: var(--accent) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  min-width: unset !important;
  min-height: unset !important;
  line-height: 1.4 !important;
}
/* Star ratings */
.woocommerce .star-rating, .woocommerce .star-rating::before { color: var(--accent) !important; }
/* Variation dropdowns */
.woocommerce-variation-add-to-cart .variations select {
  border: 1px solid var(--divider) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
}
/* Quantity */
.woocommerce .quantity .qty {
  border: 1px solid var(--divider) !important;
  border-radius: 0 !important;
  font-family: var(--font-sans) !important;
}
/* Tabs on single product */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* =============================================================================
   RTL
============================================================================= */
html[dir="rtl"] .hero-img-main  { inset-inline-start: 0; inset-inline-end: auto; }
html[dir="rtl"] .hero-img-offset{ inset-inline-end: 0; inset-inline-start: auto; }
html[dir="rtl"] .sub-menu li a:hover { padding-inline-start: 24px; padding-inline-end: 30px; }

/* =============================================================================
   UTILITY
============================================================================= */
.text-center { text-align: center; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(90deg, var(--banner) 25%, #e5dacb 50%, var(--banner) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Newsletter section */
.newsletter-section {
  background: var(--ink);
  color: var(--bg);
  padding: 72px 0;
  text-align: center;
}
.newsletter-section .section-title { color: var(--bg); }
.newsletter-section .section-title em { color: var(--banner); }
.newsletter-section p { color: rgba(250,247,242,0.65); margin: 16px auto 36px; max-width: 420px; font-size: 14px; }
.newsletter-form { display: flex; max-width: 460px; margin: 0 auto; gap: 0; }
.newsletter-form input {
  flex: 1; padding: 15px 18px;
  border: 1px solid rgba(250,247,242,0.25);
  background: rgba(250,247,242,0.07);
  color: var(--bg);
  font-family: var(--font-sans); font-size: 13px;
  outline: none;
}
.newsletter-form input::placeholder { color: rgba(250,247,242,0.4); }
.newsletter-form button {
  padding: 15px 28px;
  background: var(--bg); color: var(--ink);
  border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 10px;
  font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  transition: opacity var(--speed);
}
.newsletter-form button:hover { opacity: 0.85; }

/* =============================================================================
   HEADER v2 — matches Image 2 layout exactly
   Row 1: lang (gtranslate) left | currencies right
   Row 2: [hamburger + search-bar] LEFT | nav CENTRE | logo RIGHT
   Row 3: SEARCH · ACCOUNT · BAG (below, centred under logo area)
============================================================================= */

/* Row 1 — util bar */
.header-util-bar {
  border-bottom: 1px solid var(--divider);
  padding: 7px 0;
  background: var(--bg);
}
.header-util-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gtranslate-wrap {
  font-size: 10px;
  letter-spacing: 0.18em;
}
/* GTranslate widget styling */
.gtranslate-wrap select,
.gtranslate-wrap .gt_switcher,
.gtranslate-wrap a {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
}
.gtranslate-wrap a:hover { color: var(--ink) !important; }

.currency-switcher { display: flex; gap: 2px; align-items: center; }
.currency-switcher a {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 2px 6px;
  transition: color var(--speed);
}
.currency-switcher a:hover { color: var(--ink); }
.currency-switcher a.active {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

/* Row 2 — main row */
.site-header { background: var(--bg); border-bottom: 1px solid var(--divider); position: sticky; top: 0; z-index: 300; transition: box-shadow var(--speed); }
.site-header.scrolled { box-shadow: var(--shadow); }

.header-main-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 18px 0 0;
}

/* LEFT: hamburger + inline search */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-hamburger {
  display: none; /* shows on mobile */
  background: none; border: none; color: var(--ink);
  padding: 4px; cursor: pointer; flex-shrink: 0;
}
.header-search-inline {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  gap: 8px;
  width: 320px;
}
.header-search-inline svg { color: var(--muted); flex-shrink: 0; }
.header-search-inline input {
  border: none; background: none;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--ink); width: 100%; outline: none;
  letter-spacing: 0.06em;
}
.header-search-inline input::placeholder { color: var(--muted); font-size: 11px; }

/* CENTRE: nav */
.header-centre { display: flex; justify-content: center; }

/* RIGHT: logo */
.header-logo-wrap { text-align: right; }
.header-logo {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.38em;
  color: var(--ink);
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
}
.header-logo img { max-height: 48px; width: auto; display: inline-block; }
.header-logo-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 0.44em;
  color: var(--muted);
  margin-top: 5px;
  text-transform: uppercase;
  text-align: center;
}

/* Row 3 — actions (SEARCH · ACCOUNT · BAG) */
.header-actions-row {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--divider);
}
/* On desktop show actions right-aligned below logo */
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-action {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); background: none; border: none;
  cursor: pointer; text-decoration: none;
  transition: color var(--speed);
}
.header-action:hover { color: var(--ink); }
.header-action svg { flex-shrink: 0; }
.cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  background: var(--ink); color: var(--bg);
  border-radius: 50%; font-size: 9px; font-weight: 600;
  padding: 0 4px; line-height: 1;
}

/* Search overlay */
.header-search-overlay {
  background: var(--bg);
  border-top: 1px solid var(--divider);
  max-height: 0; overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease;
}
.header-search-overlay.open {
  max-height: 80px;
  padding: 14px 0;
}
.search-form-overlay {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--divider);
}
.search-form-overlay input {
  flex: 1; border: none; background: none;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--ink); outline: none; padding: 6px 0;
}
.search-form-overlay button {
  background: none; border: none; color: var(--muted); cursor: pointer;
}

/* Responsive */
@media (max-width: 1100px) {
  .header-search-inline { width: 220px; }
}
@media (max-width: 960px) {
  .header-main-row { grid-template-columns: auto 1fr auto; gap: 12px; }
  .header-hamburger { display: flex; }
  .header-centre { display: none; }
  .header-search-inline { width: 100%; max-width: 260px; }
  .header-logo-wrap { text-align: center; }
  .header-actions-row { justify-content: center; }
}
@media (max-width: 480px) {
  .header-search-inline { display: none; }
  .header-main-row { grid-template-columns: auto 1fr auto; }
}

/* =============================================================================
   INNER PAGE HERO BANNER
============================================================================= */
.page-hero {
  background: var(--banner);
  padding: 64px 0 52px;
  text-align: center;
}
.page-hero .t-eyebrow { margin-bottom: 14px; }
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
}
.page-hero p {
  color: var(--soft);
  font-size: 15px;
  max-width: 520px;
  margin: 16px auto 0;
  line-height: 1.75;
}

/* =============================================================================
   CONTENT SECTIONS (About, Story, FAQ, etc.)
============================================================================= */
.content-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 72px var(--gutter);
}
.content-wrap h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  color: var(--ink);
  margin: 48px 0 18px;
  line-height: 1.15;
}
.content-wrap h2:first-child { margin-top: 0; }
.content-wrap p {
  color: var(--soft);
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 18px;
}
.content-wrap ul, .content-wrap ol {
  padding-inline-start: 24px;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 18px;
}
.content-wrap ul { list-style: disc; }
.content-wrap ol { list-style: decimal; }
.content-divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 48px 0;
}

/* FAQ accordion */
.faq-list { margin: 0; padding: 0; }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-trigger {
  width: 100%; background: none; border: none;
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.06em; color: var(--ink);
  cursor: pointer; text-align: start;
}
.faq-trigger svg { flex-shrink: 0; transition: transform var(--speed); }
.faq-item.open .faq-trigger svg { transform: rotate(180deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-body { max-height: 400px; }
.faq-content { padding-bottom: 20px; color: var(--muted); font-size: 14px; line-height: 1.85; }

/* Lookbook grid */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
@media (max-width: 768px) { .lookbook-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lookbook-grid { grid-template-columns: 1fr; } }
.lookbook-item { aspect-ratio: 3/4; overflow: hidden; background: var(--banner); }
.lookbook-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.lookbook-item:hover img { transform: scale(1.04); }

/* Sizing table */
.sizing-table { width: 100%; border-collapse: collapse; margin: 28px 0; }
.sizing-table th {
  background: var(--ink); color: var(--bg);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 16px; text-align: start; font-weight: 500;
}
.sizing-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--divider);
  font-size: 13px; color: var(--soft);
}
.sizing-table tr:hover td { background: var(--banner); }

/* Shipping table */
.shipping-table { width: 100%; border-collapse: collapse; margin: 28px 0; }
.shipping-table th {
  background: var(--banner);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 16px; text-align: start; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--divider);
}
.shipping-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--divider);
  font-size: 13px; color: var(--soft);
}
.badge-free {
  background: #d4edda; color: #155724;
  font-size: 9px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 3px 8px;
}

/* =============================================================================
   PRODUCT CARD — IMAGE FLIP ON HOVER
============================================================================= */
.product-card-image { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--banner); margin-bottom: 14px; }
.product-card-image .img-primary,
.product-card-image .img-hover {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity 0.45s ease, transform 0.55s ease;
    display: block;
}
.product-card-image .img-primary  { opacity: 1;  z-index: 1; }
.product-card-image .img-hover    { opacity: 0;  z-index: 2; transform: scale(1.03); }
.product-card:hover .img-primary  { opacity: 0; }
.product-card:hover .img-hover    { opacity: 1; transform: scale(1); }
.product-card:hover .img-primary  { transform: scale(1.03); }
.product-no-img { width:100%;height:100%;background:var(--banner); }

/* =============================================================================
   SINGLE PRODUCT PAGE — matches Ounass reference
============================================================================= */
.single-product-page { padding-bottom: 0; }
.spd-container {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: start;
    padding-top: 32px;
    padding-bottom: 80px;
}
@media (max-width: 1024px) { .spd-container { grid-template-columns: 1fr; gap: 40px; } }

/* Gallery */
.spd-gallery { display: grid; grid-template-columns: 88px 1fr; gap: 10px; }
@media (max-width: 600px) { .spd-gallery { grid-template-columns: 1fr; } }

.spd-thumbs { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 600px) { .spd-thumbs { flex-direction: row; order: 2; } }
.spd-thumb {
    width: 88px; aspect-ratio: 1;
    overflow: hidden; cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--speed);
    flex-shrink: 0;
}
.spd-thumb.active, .spd-thumb:hover { border-color: var(--ink); }
.spd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.spd-main-image { position: relative; }
.spd-main-wrap  { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--banner); }
.spd-main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s; }

.spd-prev, .spd-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(250,247,242,.85); border: 1px solid var(--divider);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--ink); cursor: pointer;
    transition: background var(--speed); z-index: 5;
}
.spd-prev { left: 12px; }
.spd-next { right: 12px; }
.spd-prev:hover, .spd-next:hover { background: var(--ink); color: var(--bg); }

/* Info panel */
.spd-info { padding-top: 8px; }
.spd-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.spd-brand {
    font-size: 13px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink);
    font-family: var(--font-sans);
}
.spd-badge {
    background: var(--ink); color: var(--bg);
    font-size: 9px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; padding: 3px 10px;
}
.spd-title {
    font-family: var(--font-serif); font-size: clamp(22px,2.5vw,32px);
    font-weight: 300; line-height: 1.2; color: var(--ink);
    margin-bottom: 10px;
}
.spd-price { font-size: 20px; color: var(--accent); margin-bottom: 24px; font-weight: 400; }
.spd-price del { color: var(--muted); font-size: 14px; margin-inline-end: 6px; }

/* Attributes */
.spd-attr-group { margin-bottom: 20px; }
.spd-attr-label {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 10px; display: flex;
    justify-content: space-between; align-items: center;
}
.spd-size-guide-link {
    font-size: 11px; color: var(--muted); text-decoration: underline;
    letter-spacing: .1em; text-transform: none;
}
.spd-sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.spd-size-btn { display: inline-block; cursor: pointer; }
.spd-size-btn input { display: none; }
.spd-size-btn span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 46px; padding: 0 10px;
    border: 1px solid var(--divider);
    font-size: 12px; letter-spacing: .08em; color: var(--ink);
    transition: all var(--speed); cursor: pointer;
}
.spd-size-btn input:checked + span,
.spd-size-btn:hover span { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Color swatches */
.spd-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.spd-color-swatch { display: inline-block; cursor: pointer; }
.spd-color-swatch input { display: none; }
.spd-swatch-dot {
    display: block; width: 44px; height: 44px;
    border: 2px solid transparent; border-radius: 0;
    transition: border-color var(--speed);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
    cursor: pointer;
}
.spd-color-swatch input:checked + .spd-swatch-dot,
.spd-color-swatch:hover .spd-swatch-dot { border-color: var(--ink); }

/* Shipping bar */
.spd-shipping-bar {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg); border: 1px solid var(--divider);
    padding: 14px 16px; margin-bottom: 16px;
    font-size: 13px; color: var(--ink);
}

/* Add to bag row */
.spd-add-row { display: flex; gap: 10px; margin-bottom: 24px; }
.spd-add-btn {
    flex: 1; padding: 18px;
    background: var(--accent); color: var(--bg);
    border: 2px solid var(--accent);
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
    transition: all var(--speed);
}
.spd-add-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.spd-add-btn:disabled { opacity: .45; cursor: not-allowed; }
.spd-wish-btn {
    width: 56px; border: 1px solid var(--divider); background: none;
    color: var(--muted); cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: all var(--speed);
}
.spd-wish-btn:hover { border-color: var(--ink); color: var(--ink); }

/* Tabs */
.spd-tabs { margin-top: 24px; }
.spd-tab-nav {
    display: flex; border-bottom: 1px solid var(--divider);
    gap: 0; overflow-x: auto; scrollbar-width: none;
}
.spd-tab-nav::-webkit-scrollbar { display: none; }
.spd-tab-btn {
    background: none; border: none; border-bottom: 2px solid transparent;
    padding: 12px 18px; font-family: var(--font-sans);
    font-size: 12px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    cursor: pointer; white-space: nowrap;
    transition: color var(--speed), border-color var(--speed);
    margin-bottom: -1px;
}
.spd-tab-btn.active, .spd-tab-btn:hover { color: var(--ink); border-bottom-color: var(--ink); }

.spd-tab-panel { display: none; }
.spd-tab-panel.active { display: block; }
.spd-tab-body {
    padding: 20px 0;
    font-size: 14px; color: var(--soft); line-height: 1.85;
}

/* Help bar */
.spd-help-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
    padding: 20px 0; border-top: 1px solid var(--divider);
    margin-top: 8px;
}
.spd-help-label { font-size: 13px; font-weight: 500; color: var(--accent); }
.spd-help-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px;
    transition: color var(--speed);
}
.spd-help-link:hover { color: var(--accent); }
.spd-product-code {
    margin-inline-start: auto; font-size: 11px;
    color: var(--muted); letter-spacing: .1em;
}

/* =============================================================================
   CATEGORY PAGE HERO
============================================================================= */
.cat-hero {
    position: relative;
    min-height: 320px;
    display: flex; align-items: flex-end;
    background-color: var(--banner);
    background-size: cover; background-position: center;
    padding: 48px 0;
}
.cat-hero-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(26,24,21,.65) 0%,rgba(26,24,21,.1) 60%); }
.cat-hero-text { position:relative;z-index:2; padding: 0 var(--gutter); max-width: var(--max-w); margin: 0 auto; width:100%; }
.cat-hero-text h1 { font-family:var(--font-serif);font-size:clamp(36px,5vw,60px);font-weight:300;color:var(--bg);line-height:1.1; }
.cat-hero-text p  { color:rgba(250,247,242,.75);font-size:15px;max-width:520px;margin-top:10px; }

/* Category tab bar */
.cat-tabs-bar { border-bottom: 1px solid var(--divider); background: var(--bg); position: sticky; top: 0; z-index: 200; }
.cat-tabs { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; padding: 0 var(--gutter); max-width: var(--max-w); margin: 0 auto; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
    padding: 14px 20px; font-size:11px; font-weight:500; letter-spacing:.16em;
    text-transform:uppercase; color:var(--muted); white-space:nowrap;
    border-bottom: 2px solid transparent; text-decoration:none;
    transition: color var(--speed), border-color var(--speed);
    margin-bottom: -1px;
}
.cat-tab.active, .cat-tab:hover { color:var(--ink); border-bottom-color:var(--ink); }

/* =============================================================================
   SHOP TOP FILTER BAR (replaces ugly sidebar)
============================================================================= */
.shop-top-filters {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 16px 0; border-bottom: 1px solid var(--divider);
    margin-bottom: 32px;
}
.shop-cat-links { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-cat-chip {
    padding: 7px 16px;
    border: 1px solid var(--divider);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    transition: all var(--speed);
}
.shop-cat-chip:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Full-width products grid (no sidebar) */
.products-grid-full {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .products-grid-full { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px)  { .products-grid-full { grid-template-columns: repeat(2,1fr); } }

/* =============================================================================
   CONTACT PAGE
============================================================================= */
.contact-form .contact-field-group { margin-bottom: 18px; }
@media (max-width: 768px) {
    .spd-gallery { grid-template-columns: 1fr; }
    .spd-thumbs  { flex-direction: row; }
    .spd-thumb   { width: 64px; }
}

/* =============================================================================
   OUNASS-STYLE SINGLE PRODUCT PAGE (pdp = product detail page)
   Matches the screenshot exactly: NunitoSans body, Portrait serif headings
   Primary color: #b87253 (copper/terracotta for price & add to bag)
============================================================================= */

/* Layout */
.ounass-pdp { padding-bottom: 0; }
.pdp-wrap {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 48px;
    align-items: start;
    padding-top: 24px;
    padding-bottom: 80px;
}
@media (max-width: 1100px) { .pdp-wrap { grid-template-columns: 1fr 380px; gap: 32px; } }
@media (max-width: 900px)  { .pdp-wrap { grid-template-columns: 1fr; } }

/* ── Gallery ── */
.pdp-gallery {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px;
    position: sticky;
    top: 120px;
}
@media (max-width: 600px) {
    .pdp-gallery { grid-template-columns: 1fr; }
    .pdp-thumbstrip { display: flex; flex-direction: row; order: 2; }
}

.pdp-thumbstrip { display: flex; flex-direction: column; gap: 6px; }
.pdp-thumb {
    width: 80px; aspect-ratio: 3/4;
    border: 2px solid transparent;
    overflow: hidden; cursor: pointer;
    transition: border-color var(--speed);
    flex-shrink: 0;
    background: var(--banner);
}
.pdp-thumb.active,
.pdp-thumb:hover { border-color: var(--ink); }
.pdp-thumb img { width:100%;height:100%;object-fit:cover;display:block; }

.pdp-main-wrap {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #f5f5f5;
}
.pdp-main-wrap img { width:100%;height:100%;object-fit:cover;display:block; }

.pdp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.9);
    border: 1px solid #dee1e5;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #202020; cursor: pointer;
    transition: background var(--speed); z-index: 5;
    border-radius: 0;
}
.pdp-prev { left: 10px; }
.pdp-next { right: 10px; }
.pdp-arrow:hover { background: var(--ink); color: var(--bg); }

/* ── Info panel ── */
.pdp-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pdp-brand-badges { display: flex; align-items: center; gap: 10px; }
.pdp-brand {
    font-family: var(--font-sans);
    font-size: 14px; font-weight: 700;
    letter-spacing: .05em; color: #202020;
    text-transform: uppercase;
}
.pdp-exclusive-badge {
    background: transparent;
    border: 1px solid #202020;
    font-size: 9px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #202020; padding: 3px 8px;
}
.pdp-follow-btn {
    display: flex; align-items: center; gap: 5px;
    background: none; border: 1px solid #dee1e5;
    padding: 7px 14px;
    font-family: var(--font-sans);
    font-size: 11px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: #2d2d2d; cursor: pointer;
    transition: all var(--speed);
}
.pdp-follow-btn:hover { border-color: #202020; }

.pdp-title {
    font-family: var(--font-sans);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 400;
    color: #202020;
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: .01em;
}

.pdp-price-row { margin-bottom: 10px; }
.pdp-price {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 400;
    color: #b87253; /* Ounass copper/amber */
}
.pdp-price del { color: #999; font-size: 15px; margin-inline-end: 6px; }

.pdp-sep { border: none; border-top: 1px solid #dee1e5; margin: 16px 0; }

/* Attr labels */
.pdp-attr-block { margin-bottom: 20px; }
.pdp-attr-label-row {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pdp-attr-label {
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600;
    color: #202020; letter-spacing: .03em;
    text-transform: uppercase;
}
.pdp-selected-color {
    font-weight: 400; text-transform: none;
    color: #666; font-size: 13px;
}
.pdp-size-guide-link {
    font-size: 12px; font-weight: 500;
    color: #b87253; text-decoration: underline;
    text-underline-offset: 2px; letter-spacing: .05em;
    text-transform: uppercase;
}

/* Color swatches — shows variation images (like Ounass) */
.pdp-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-color-option { display: inline-block; cursor: pointer; }
.pdp-color-option input { display: none; }
.pdp-swatch-img {
    display: block;
    width: 60px; height: 80px;
    background-size: cover; background-position: center;
    border: 2px solid transparent;
    transition: border-color var(--speed);
}
.pdp-swatch-dot {
    display: block;
    width: 44px; height: 44px;
    background: var(--banner);
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
    transition: border-color var(--speed);
}
.pdp-color-option input:checked + .pdp-swatch-img,
.pdp-color-option:hover .pdp-swatch-img { border-color: #202020; }
.pdp-color-option input:checked + .pdp-swatch-dot,
.pdp-color-option:hover .pdp-swatch-dot { border-color: #202020; }

/* Size dropdown — Ounass style */
.pdp-size-select-wrap {
    position: relative;
    border: 1px solid #dee1e5;
    background: #fff;
}
.pdp-size-select {
    width: 100%; padding: 14px 40px 14px 16px;
    border: none; background: transparent;
    font-family: var(--font-sans); font-size: 14px; color: #202020;
    -webkit-appearance: none; appearance: none;
    cursor: pointer; outline: none;
}
.pdp-select-chevron {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); pointer-events: none;
    color: #666;
}

/* Shipping bar */
.pdp-shipping-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid #dee1e5; padding: 14px 16px;
    margin-bottom: 16px;
    font-family: var(--font-sans); font-size: 13px; color: #202020;
}
.pdp-shipping-text { display: flex; flex-direction: column; gap: 2px; }
.pdp-shipping-text strong { font-weight: 600; font-size: 13px; }
.pdp-shipping-text span { font-size: 12px; color: #666; }

/* CTA row */
.pdp-cta-row { display: flex; gap: 10px; margin-bottom: 24px; }
.pdp-add-btn {
    flex: 1; padding: 17px 24px;
    background: #b87253;
    color: #fff;
    border: none;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
    transition: background var(--speed);
}
.pdp-add-btn:hover:not(:disabled) { background: #9a6042; }
.pdp-add-btn:disabled { background: #ccc; cursor: not-allowed; }
.pdp-wish-btn {
    width: 56px; border: 1px solid #dee1e5;
    background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #666; transition: all var(--speed);
}
.pdp-wish-btn:hover { border-color: #202020; color: #202020; }

/* Tabs — exactly like screenshot */
.pdp-tabs { margin-top: 8px; }
.pdp-tab-nav {
    display: flex;
    border-bottom: 1px solid #dee1e5;
    overflow-x: auto; scrollbar-width: none;
}
.pdp-tab-nav::-webkit-scrollbar { display: none; }
.pdp-tab {
    flex-shrink: 0;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    padding: 15px 12px;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    color: #666; cursor: pointer;
    white-space: nowrap;
    transition: color var(--speed), border-color var(--speed);
    margin-bottom: -1px;
}
.pdp-tab.active, .pdp-tab:hover { color: #202020; border-bottom-color: #202020; }

.pdp-tab-panels { border: 1px solid #dee1e5; border-top: none; }
.pdp-panel {
    display: none;
    padding: 20px;
    font-family: var(--font-sans);
    font-size: 14px; color: #3d4042; line-height: 1.8;
}
.pdp-panel.active { display: block; }

/* Delivery table */
.pdp-delivery-table { width: 100%; border-collapse: collapse; }
.pdp-delivery-table td {
    padding: 9px 0; border-bottom: 1px solid #dee1e5;
    font-size: 13px; color: #3d4042;
}
.pdp-delivery-table td:last-child { text-align: end; }
.pdp-free-badge {
    background: #e8f5e9; color: #2e7d32;
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    padding: 2px 8px; text-transform: uppercase;
}

/* Help bar — exactly like Ounass */
.pdp-help-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 18px 0;
    border-top: 1px solid #dee1e5;
    margin-top: 0;
}
.pdp-need-help {
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 500;
    color: #b87253;
}
.pdp-help-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: #202020;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color var(--speed);
}
.pdp-help-link:hover { color: #b87253; }
.pdp-product-code {
    margin-inline-start: auto;
    font-family: var(--font-sans);
    font-size: 12px; color: #999; letter-spacing: .05em;
}

/* ── Currency Switcher Plugin styles ── */
.currency-switcher-wrap {
    font-size: 10px;
    letter-spacing: .16em;
}
/* Style the plugin's output to match our header */
.currency-switcher-wrap ul,
.currency-switcher-wrap .woocommerce-currency-switcher-form {
    display: flex !important;
    gap: 2px !important;
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
    align-items: center !important;
}
.currency-switcher-wrap ul li a,
.currency-switcher-wrap a {
    font-family: var(--font-sans) !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    padding: 2px 5px !important;
    transition: color var(--speed) !important;
}
.currency-switcher-wrap ul li a:hover,
.currency-switcher-wrap a:hover,
.currency-switcher-wrap ul li.current a,
.currency-switcher-wrap a.current { color: var(--ink) !important; }
.currency-switcher-wrap ul li.current a,
.currency-switcher-wrap a.current {
    border-bottom: 1px solid var(--ink) !important;
    padding-bottom: 1px !important;
}
/* Dropdown style if using drop_down_box shortcode */
.currency-switcher-wrap select {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--divider) !important;
    font-family: var(--font-sans) !important;
    font-size: 10px !important;
    letter-spacing: .15em !important;
    color: var(--muted) !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
}

/* =============================================================================
   FIXES: Currency in a row | PDP responsive | Currency symbol display
============================================================================= */

/* ── 1. CURRENCY SWITCHER — force single row, all options inline ── */
/* Override plugin's ul/li stacking with horizontal flex */
.currency-switcher-wrap,
.currency-switcher-wrap ul,
.currency-switcher-wrap ol,
.currency-switcher-wrap form,
.currency-switcher-wrap .woocommerce-currency-switcher-form,
.woocommerce-currency-switcher,
.woocommerce-currency-switcher ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.currency-switcher-wrap li,
.woocommerce-currency-switcher li {
    display: inline-flex !important;
    align-items: center !important;
}
.currency-switcher-wrap li a,
.currency-switcher-wrap a,
.woocommerce-currency-switcher li a,
.woocommerce-currency-switcher a {
    display: inline-block !important;
    font-family: var(--font-sans) !important;
    font-size: 10px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    transition: color var(--speed) !important;
    line-height: 1.4 !important;
}
.currency-switcher-wrap li a:hover,
.currency-switcher-wrap a:hover,
.woocommerce-currency-switcher li a:hover { color: var(--ink) !important; }
.currency-switcher-wrap li.active a,
.currency-switcher-wrap li.current a,
.currency-switcher-wrap a.active,
.currency-switcher-wrap a.current,
.woocommerce-currency-switcher li.current a {
    color: var(--ink) !important;
    font-weight: 500 !important;
    border-bottom: 1px solid var(--ink) !important;
    padding-bottom: 1px !important;
}
/* Separator between currencies */
.currency-switcher-wrap li + li::before,
.woocommerce-currency-switcher li + li::before {
    content: '' !important;
    display: inline-block !important;
    width: 1px !important;
    height: 10px !important;
    background: var(--divider) !important;
    margin: 0 2px !important;
    vertical-align: middle !important;
}

/* Also fix our manual fallback switcher */
.currency-switcher { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; }
.currency-switcher a { white-space: nowrap !important; }

/* ── 2. PRODUCT PAGE — RESPONSIVE (mobile first) ── */

/* On mobile: stack gallery vertically, thumbs go BELOW main image as a row */
@media (max-width: 900px) {
    /* PDP outer layout: single column */
    .pdp-wrap {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding-top: 16px !important;
    }
    /* Gallery: un-sticky on mobile */
    .pdp-gallery {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 768px) {
    /* Gallery: main image full width, thumbs below in a horizontal row */
    .pdp-gallery {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    /* Main image first */
    .pdp-main-wrap {
        order: 1 !important;
        width: 100% !important;
        aspect-ratio: 3/4 !important;
    }
    /* Thumbstrip: horizontal row below main image */
    .pdp-thumbstrip {
        order: 2 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }
    .pdp-thumbstrip::-webkit-scrollbar { display: none !important; }
    .pdp-thumb {
        width: 64px !important;
        min-width: 64px !important;
        aspect-ratio: 3/4 !important;
        flex-shrink: 0 !important;
    }

    /* Info panel: full width, comfortable padding */
    .pdp-info { padding: 0 !important; }

    /* Tabs: scrollable */
    .pdp-tab-nav { flex-wrap: nowrap !important; overflow-x: auto !important; }
    .pdp-tab { font-size: 12px !important; padding: 11px 14px !important; }

    /* CTA button full width on mobile */
    .pdp-cta-row { gap: 8px !important; }
    .pdp-add-btn { font-size: 12px !important; padding: 16px 20px !important; }

    /* Help bar wrap on mobile */
    .pdp-help-bar { gap: 10px !important; flex-wrap: wrap !important; }
    .pdp-product-code { margin-inline-start: 0 !important; width: 100% !important; }

    /* Color swatches scrollable on mobile */
    .pdp-color-swatches { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 4px !important; }
    .pdp-color-swatches::-webkit-scrollbar { display: none !important; }
}

@media (max-width: 480px) {
    .pdp-title { font-size: 17px !important; }
    .pdp-price { font-size: 17px !important; }
    .pdp-thumb { width: 54px !important; min-width: 54px !important; }
    .pdp-tab { font-size: 11px !important; padding: 10px 10px !important; }
}

/* ── 3. LANGUAGE SWITCHER — show currency codes not Arabic text ── */
/* GTranslate can override the currency label — keep it as code text */
.gtranslate-wrap,
.gtranslate_wrapper {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
/* Ensure GTranslate dropdown text stays readable */
.gtranslate-wrap select,
.gtranslate_wrapper select {
    font-size: 10px !important;
    color: var(--muted) !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    letter-spacing: .1em !important;
}
/* The currency should ALWAYS show as code (KWD, SAR) not Arabic translation */
/* This targets the currency plugin's text nodes */
.woocommerce-currency-switcher a,
.currency-switcher a,
.currency-switcher-wrap a {
    font-variant-numeric: normal !important;
    unicode-bidi: plaintext !important;
    direction: ltr !important; /* Keep currency codes LTR even on Arabic pages */
    font-family: var(--font-sans) !important;
}

/* =============================================================================
   PDP — LAYOUT FIX: fit on one screen like screenshot
   Main image shorter so info panel shows fully without scroll
============================================================================= */

/* Desktop: tighten the aspect ratio so it matches screenshot */
.pdp-main-wrap {
    aspect-ratio: auto !important; /* was 2/3 — less tall, matches screenshot */
    max-height: 90vh;              /* never taller than viewport */
    overflow: hidden;
}
.pdp-main-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* contain = sharp, no cropping distortion */
    object-position: center top;
    background: #f5f5f5;
    display: block;
}

/* Thumbstrip — match shorter main image */
.pdp-thumb {
    width: 72px !important;
    aspect-ratio: 3/4 !important;
}
.pdp-gallery {
    grid-template-columns: 72px 1fr !important;
    align-items: start !important;
}

/* Info panel — reduce top padding so it's tighter */
.pdp-info {
    padding-top: 0 !important;
    background: var(--bg);
}
.pdp-wrap {
    padding-top: 16px !important;
    align-items: start !important;
}

/* =============================================================================
   PDP — ZOOM HINT OVERLAY
============================================================================= */
.pdp-main-wrap { position: relative !important; cursor: zoom-in !important; }

.pdp-zoom-hint {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.85);
    border: 1px solid #dee1e5;
    display: flex; align-items: center; justify-content: center;
    color: #202020;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    z-index: 4;
}
.pdp-main-wrap:hover .pdp-zoom-hint { opacity: 1; }

/* =============================================================================
   LIGHTBOX — full screen image viewer with zoom
============================================================================= */
.pdp-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.pdp-lightbox.open {
    display: flex;
}

/* Close button */
.pdp-lb-close {
    position: fixed;
    top: 20px; right: 24px;
    background: none; border: none;
    color: #fff; font-size: 32px;
    cursor: pointer; line-height: 1;
    z-index: 10000;
    opacity: .8; transition: opacity .2s;
}
.pdp-lb-close:hover { opacity: 1; }

/* Main lightbox image */
.pdp-lb-img-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    max-width: 90vw; max-height: 85vh;
    overflow: hidden;
    cursor: zoom-in;
}
.pdp-lb-img-wrap.zoomed { cursor: zoom-out; }

#pdp-lb-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
    transform-origin: center center;
    user-select: none;
}
.pdp-lb-img-wrap.zoomed #pdp-lb-img {
    transform: scale(2);
    cursor: zoom-out;
}

/* Lightbox nav arrows */
.pdp-lb-prev,
.pdp-lb-next {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; font-size: 28px;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s;
    z-index: 10000;
}
.pdp-lb-prev { left: 20px; }
.pdp-lb-next { right: 20px; }
.pdp-lb-prev:hover, .pdp-lb-next:hover { background: rgba(255,255,255,.2); }

/* Lightbox thumbstrip at bottom */
.pdp-lb-thumbs {
    display: flex; gap: 6px;
    margin-top: 14px;
    overflow-x: auto;
    max-width: 90vw;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.pdp-lb-thumbs::-webkit-scrollbar { display: none; }
.pdp-lb-thumb {
    width: 50px; height: 66px;
    object-fit: cover; object-position: top;
    opacity: .55; cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: opacity .2s, border-color .2s;
}
.pdp-lb-thumb.active,
.pdp-lb-thumb:hover { opacity: 1; border-color: #fff; }

/* Counter */
.pdp-lb-counter {
    position: fixed;
    bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.55);
    font-size: 12px; letter-spacing: .12em;
    z-index: 10000;
}

/* =============================================================================
   HEADER v3 — Logo centre, nav left, nav+actions right, no search
============================================================================= */
.header-main-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 0;
    gap: 0;
    border-bottom: 1px solid var(--divider);
}
.header-nav-left  { justify-self: start; }
.header-logo-wrap { justify-self: center; text-align: center; }
.header-nav-right-wrap {
    justify-self: end;
    display: flex; align-items: center; gap: 20px;
}
.header-nav-right .nav-list { gap: 20px; }

/* Hide old search row and search inline */
.header-actions-row,
.header-search-inline,
.header-search-overlay,
.header-search-overlay.open { display: none !important; }

/* Actions */
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-action {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); background: none; border: none;
    cursor: pointer; text-decoration: none; transition: color var(--speed);
}
.header-action:hover { color: var(--ink); }
.cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 50%;
    background: var(--ink); color: var(--bg);
    font-size: 9px; font-weight: 600; padding: 0 4px; line-height: 1;
}

/* Mobile */
@media (max-width: 960px) {
    .header-main-row { grid-template-columns: auto 1fr auto; gap: 12px; }
    .header-nav-left  { display: none; }
    .header-nav-right { display: none; }
    .header-logo-wrap { justify-self: center; }
    .header-nav-right-wrap { gap: 10px; }
    .header-hamburger { display: flex; }
}
@media (min-width: 961px) {
    .header-hamburger { display: none !important; }
}

/* =============================================================================
   VIDEO HERO SLIDER
============================================================================= */
.video-slider {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 500px;
    max-height: 900px;
    overflow: hidden;
    background: var(--ink);
}
.video-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .8s ease;
    pointer-events: none;
}
.video-slide.active { opacity: 1; pointer-events: auto; }

.video-slide-bg {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.video-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,24,21,.65) 0%, rgba(26,24,21,.15) 55%, transparent 100%);
}
.video-slide-text {
    position: absolute;
    bottom: 12%; left: 8%; max-width: 560px;
    z-index: 3;
}
.video-slide-title {
    font-family: var(--font-serif);
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 300; line-height: 1.08;
    color: var(--bg);
    margin: 0;
}
.video-slide-title em { font-style: italic; color: var(--banner); }

/* Dots */
.video-slider-dots {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 5;
}
.vsd-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(250,247,242,.4); border: none; cursor: pointer;
    transition: background .3s, transform .3s; padding: 0;
}
.vsd-dot.active { background: var(--bg); transform: scale(1.3); }

/* Arrows */
.video-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
    color: var(--bg); width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; cursor: pointer; z-index: 5;
    transition: background .2s;
}
.vs-prev { left: 20px; }
.vs-next { right: 20px; }
.video-slider-arrow:hover { background: rgba(255,255,255,.25); }
@media (max-width: 768px) {
    .video-slider { height: 60vh; min-height: 360px; }
    .video-slide-text { bottom: 8%; left: 5%; right: 5%; }
    .video-slide-title { font-size: clamp(28px, 7vw, 44px); }
    .video-slider-arrow { display: none; }
}

/* =============================================================================
   HOMEPAGE CATEGORY SECTIONS — Ounass editorial style
============================================================================= */
.hp-cat-sections { display: flex; flex-direction: column; }
.hp-cat-row { display: flex; }
.hp-cat-row.hp-cat-full { /* single full-width section */ }
.hp-cat-row.hp-cat-halves { /* two half sections */ }
.hp-cat-row.hp-cat-halves .hp-cat-section { flex: 1; }

.hp-cat-section {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
/* Full width sections */
.hp-cat-row.hp-cat-full .hp-cat-section { width: 100%; }
/* Portrait style — taller */
.hp-cat-section.portrait .hp-cat-img { aspect-ratio: 4/5; }
/* Default landscape */
.hp-cat-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover; object-position: center top;
    display: block;
    transition: transform .8s ease;
}
.hp-cat-row.hp-cat-halves .hp-cat-img { aspect-ratio: 3/4; }
.hp-cat-section:hover .hp-cat-img { transform: scale(1.03); }

.hp-cat-placeholder {
    width: 100%; aspect-ratio: 16/9;
    background: var(--banner);
}
.hp-cat-dark-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,24,21,.6) 0%, rgba(26,24,21,.1) 50%, transparent 100%);
    pointer-events: none;
}
.hp-cat-text {
    position: absolute; z-index: 3;
    padding: 20px 32px;
    max-width: 500px;
}
.hp-cat-sub {
    font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(250,247,242,.75); margin-bottom: 8px;
    font-family: var(--font-sans);
}
.hp-cat-name {
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 300; line-height: 1.1;
    color: var(--bg); margin: 0 0 14px;
}
.hp-cat-cta {
    display: inline-block;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--bg);
    border-bottom: 1px solid rgba(250,247,242,.6);
    padding-bottom: 2px;
    font-family: var(--font-sans);
    transition: border-color .2s;
}
.hp-cat-section:hover .hp-cat-cta { border-color: var(--bg); }

@media (max-width: 768px) {
    .hp-cat-row.hp-cat-halves { flex-direction: column; }
    .hp-cat-img { aspect-ratio: 4/5 !important; }
    .hp-cat-text { padding: 16px 20px; }
    .hp-cat-name { font-size: clamp(24px, 6vw, 36px); }
}

/* =============================================================================
   FOLLOW POPUP
============================================================================= */
.follow-popup-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(63,58,53,.6);
    align-items: center; justify-content: center;
}
.follow-popup-overlay.open { display: flex; }
.follow-popup {
    background: var(--bg);
    width: 100%; max-width: 460px;
    padding: 48px 44px;
    position: relative;
    box-shadow: 0 24px 80px rgba(63,58,53,.2);
    animation: popup-in .3s ease;
}
@keyframes popup-in { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@media (max-width: 520px) { .follow-popup { padding: 36px 24px; margin: 0 16px; } }
.follow-popup-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none;
    font-size: 24px; color: var(--muted); cursor: pointer; line-height: 1;
}
.follow-popup-close:hover { color: var(--ink); }
.follow-popup-inner {}
.follow-form input {
    border: 1px solid var(--divider) !important;
    font-family: var(--font-sans) !important;
    transition: border-color .2s !important;
}
.follow-form input:focus { border-color: var(--ink) !important; outline: none !important; }

/* =============================================================================
   HOMEPAGE EDITORIAL SECTIONS — contained, spaced, independent
   - Aligned with site container (same max-width as product grid)
   - Each section row has its own padding/spacing
   - 1-col, 2-col, 3-col all sit inside the container with gap between images
============================================================================= */

/* Outer wrapper — inside the page flow */
.hp-editorial {
    display: flex;
    flex-direction: column;
    gap: 0; /* rows stack, spacing is on each row */
}

/* Every row sits inside the container */
.hp-sec-row {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-top: 56px;
    padding-bottom: 56px;
    width: 100%;
    box-sizing: border-box;
}

/* Full-width single-image row */
.hp-sec-full {
    display: flex;
    flex-direction: column;
}
.hp-sec-full .hp-sec-panel { width: 100%; }

/* 2-column halves row */
.hp-sec-halves {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 3-column thirds row */
.hp-sec-thirds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Panel (individual image card) ── */
.hp-sec-panel {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
a.hp-sec-panel:hover .hp-sec-img { transform: scale(1.03); }

/* ── Image wrap — aspect ratio per layout ── */
.hp-sec-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

/* Full-width: wide cinematic landscape */
/* Images: use natural proportions with a sensible min-height.
   object-fit: cover fills the space gracefully regardless of image size */
.hp-sec-full .hp-sec-img-wrap    { min-height: 380px; max-height: 700px; height: 55vw; }
.hp-sec-halves .hp-sec-img-wrap  { min-height: 340px; max-height: 680px; height: 52vw; }
.hp-sec-thirds .hp-sec-img-wrap  { min-height: 280px; max-height: 560px; height: 34vw; }

.hp-sec-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;  /* slightly from top — shows model from head */
    display: block;
    transition: transform .7s ease;
}

/* Dark gradient overlay */
.hp-sec-dark-ov {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(18,16,14,.75) 0%,
        rgba(18,16,14,.3) 45%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 1;
}

/* ── Text overlay (inside image) ── */
.hp-sec-text {
    position: absolute;
    z-index: 3;
    padding: 28px 32px !important;
    max-width: 480px;
}
/* Override inline style for bottom-left default if not set */
.hp-sec-text { bottom: 8%; left: 5%; }

/* Eyebrow */
.hp-sec-eyebrow {
    font-family: var(--font-sans);
    font-size: 10px; font-weight: 600;
    letter-spacing: .32em; text-transform: uppercase;
    margin: 0 0 8px;
    opacity: .85;
    display: block;
}

/* Heading */
.hp-sec-heading {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3.5vw, 52px);
    font-weight: 300; line-height: 1.08;
    margin: 0 0 12px;
}
/* Smaller in 2-col */
.hp-sec-halves .hp-sec-heading { font-size: clamp(22px, 3vw, 40px); }
/* Smaller in 3-col */
.hp-sec-thirds .hp-sec-heading { font-size: clamp(16px, 2vw, 26px); }

/* Paragraph */
.hp-sec-para {
    font-family: var(--font-sans);
    font-size: 13px; line-height: 1.72;
    margin: 0 0 18px; max-width: 340px;
    opacity: .88;
}
.hp-sec-thirds .hp-sec-para { font-size: 12px; margin-bottom: 12px; }

/* Link / CTA */
.hp-sec-btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
}
.hp-sec-btn-underline {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.hp-sec-btn-button-outline {
    border: 1px solid currentColor;
    padding: 9px 22px;
}
.hp-sec-btn-button-fill {
    background: #fff; color: var(--ink) !important;
    padding: 10px 24px;
}

/* ── Below-image text ── */
.hp-sec-below-text {
    padding: 16px 0 4px;
    text-align: center;
}
.hp-sec-below-text .hp-sec-eyebrow { justify-content: center; display: block; }
.hp-sec-below-text .hp-sec-heading { font-size: clamp(14px, 2vw, 20px); margin-bottom: 4px; font-family: var(--font-sans); font-weight: 400; letter-spacing: .04em; }
.hp-sec-below-text .hp-sec-para    { font-size: 12px; color: var(--soft); }
.hp-sec-below-text .hp-sec-btn     { color: var(--ink); margin-top: 6px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .hp-sec-row { padding-top: 40px; padding-bottom: 40px; }
    .hp-sec-full .hp-sec-img-wrap  { height: 46vw; }
}
@media (max-width: 768px) {
    .hp-sec-row   { padding-top: 28px; padding-bottom: 28px; }
    .hp-sec-halves { grid-template-columns: 1fr; gap: 12px; }
    .hp-sec-thirds { grid-template-columns: 1fr 1fr; gap: 12px; }
    .hp-sec-full .hp-sec-img-wrap,
    .hp-sec-halves .hp-sec-img-wrap  { height: 72vw; max-height: none; }
    .hp-sec-thirds .hp-sec-img-wrap  { height: 52vw; max-height: none; }
    .hp-sec-text { padding: 20px 20px !important; }
    .hp-sec-thirds .hp-sec-para { display: none; }
}
@media (max-width: 480px) {
    .hp-sec-thirds  { grid-template-columns: 1fr; gap: 10px; }
    .hp-sec-thirds .hp-sec-img-wrap  { height: 72vw; }
    .hp-sec-thirds .hp-sec-para      { display: block; }
    .hp-sec-heading { font-size: clamp(22px, 7vw, 34px) !important; }
}


/* Hero image wrap styles moved to main hero block above */

/* =============================================================================
   HOMEPAGE EDITORIAL SECTION BLOCKS
   Each .hp-section-block is fully independent, padded, separated
   4 layouts: full / two-col / three-col / featured
============================================================================= */

/* ── Outer wrapper — just stacks sections ── */
.hp-editorial { display: flex; flex-direction: column; }

/* ── Each independent section block ── */
.hp-section-block {
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid var(--divider); /* visual separator */
}
.hp-section-block:first-child { border-top: none; }

/* ── Section title (above images, outside) ── */
.hp-section-header {
    margin-bottom: 28px;
    text-align: center;
}
.hp-section-title {
    font-family: var(--font-serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 300;
    color: var(--ink);
    letter-spacing: 0.02em;
    margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT ① FULL WIDTH
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hp-layout-full { display: block; }
.hp-layout-full .hp-panel { display: block; width: 100%; }
.hp-layout-full .hp-panel-img-wrap {
    /* Natural height — image decides, no forced crop */
    height: auto;
    min-height: 280px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT ② TWO COLUMNS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hp-layout-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start; /* don't stretch cells to match heights */
}
.hp-layout-two-col .hp-panel-img-wrap {
    height: auto;
    min-height: 220px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT ③ THREE COLUMNS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hp-layout-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.hp-layout-three-col .hp-panel-img-wrap {
    height: auto;
    min-height: 180px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT ④ FEATURED — 1 big left + 2 stacked right
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hp-layout-featured {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    align-items: start;
}
.hp-feat-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hp-panel-featured-main .hp-panel-img-wrap  { height: auto; min-height: 280px; }
.hp-panel-featured-small .hp-panel-img-wrap { height: auto; min-height: 140px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PANEL — shared styles
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hp-panel {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    overflow: visible; /* allow below-text to flow out */
}
a.hp-panel:hover .hp-panel-img { transform: scale(1.04); }

.hp-panel-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden; /* clip the image zoom */
    background: var(--banner);
}
.hp-panel-img {
    width: 100%;
    height: 100%;
    /* contain = full image always visible, no cropping ever */
    object-fit: contain;
    object-position: center bottom; /* show feet of model at bottom */
    display: block;
    background: var(--banner);      /* neutral bg fills the gaps */
    transition: transform .6s ease;
}
.hp-panel-placeholder {
    width: 100%; height: 100%;
    min-height: 200px;
    background: var(--banner);
}

/* Dark gradient overlay */
.hp-panel-dark-ov {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(15,13,11,.78) 0%,
        rgba(15,13,11,.25) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

/* ── Overlay text (ON the image) ── */
.hp-panel-text {
    position: absolute;
    z-index: 3;
    padding: 24px 28px;
    max-width: 90%;
}
.hp-panel-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px; font-weight: 700;
    letter-spacing: .32em; text-transform: uppercase;
    color: rgba(250,247,242,.8);
    margin-bottom: 8px;
}
.hp-panel-heading {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3vw, 52px);
    font-weight: 600;     /* BOLD as requested */
    line-height: 1.08;
    color: #fff;
    margin: 0 0 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
/* Smaller headings in 3-col and small stacked panels */
.hp-layout-three-col .hp-panel-heading,
.hp-panel-featured-small .hp-panel-heading { font-size: clamp(16px, 2vw, 28px); }

.hp-panel-para {
    font-family: var(--font-sans);
    font-size: 14px;     /* bigger than before */
    font-weight: 400;
    line-height: 1.7;
    color: rgba(250,247,242,.9);
    margin: 0 0 16px;
    max-width: 380px;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
/* Smaller para in 3-col */
.hp-layout-three-col .hp-panel-para { font-size: 12px; }

.hp-panel-cta {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(250,247,242,.7);
    padding-bottom: 2px;
    transition: border-color .2s;
}
a.hp-panel:hover .hp-panel-cta { border-color: #fff; }

/* ── Below-image text ── */
.hp-panel-below {
    padding: 16px 4px 8px;
    text-align: center;
}
.hp-panel-eyebrow-below {
    display: block;
    font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
}
.hp-panel-heading-below {
    font-family: var(--font-sans);
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 500; letter-spacing: .04em;
    color: var(--ink); margin: 0 0 6px;
}
.hp-panel-para-below {
    font-size: 12px; color: var(--soft); line-height: 1.6; margin: 0 0 8px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
    .hp-section-block { padding-top: 48px; padding-bottom: 48px; }
    .hp-layout-featured { grid-template-columns: 1.3fr 1fr; }
}
@media (max-width: 768px) {
    .hp-section-block  { padding-top: 36px; padding-bottom: 36px; }
    .hp-section-title  { font-size: clamp(22px, 5vw, 32px); }
    .hp-section-header { margin-bottom: 20px; }

    /* Two-col stacks on mobile — natural heights preserved */
    .hp-layout-two-col { grid-template-columns: 1fr; gap: 12px; }
    .hp-layout-two-col .hp-panel-img-wrap { height: auto; min-height: 200px; }

    /* Three-col: 2 columns on tablet */
    .hp-layout-three-col { grid-template-columns: 1fr 1fr; gap: 12px; }
    .hp-layout-three-col .hp-panel:last-child { display: block; } /* always show all */

    /* Featured stacks on mobile */
    .hp-layout-featured { grid-template-columns: 1fr; }
    .hp-feat-stack { flex-direction: row; }
    .hp-panel-featured-main .hp-panel-img-wrap  { height: auto; min-height: 200px; }
    .hp-panel-featured-small .hp-panel-img-wrap { height: auto; min-height: 140px; }
}
@media (max-width: 480px) {
    .hp-section-block { padding-top: 28px; padding-bottom: 28px; }
    .hp-layout-three-col { grid-template-columns: 1fr; gap: 10px; }
    .hp-feat-stack { flex-direction: column; }
    .hp-panel-text { padding: 14px 16px !important; }
    .hp-panel-heading { font-size: clamp(20px, 6.5vw, 34px) !important; }
    .hp-panel-para    { font-size: 13px !important; }
}

/* Swatch button active state */
.pdp-swatch-btn {
    background: none; border: 2px solid transparent;
    padding: 0; cursor: pointer; display: inline-block;
    transition: border-color .2s;
}
.pdp-swatch-btn.active .pdp-swatch-img,
.pdp-swatch-btn.active .pdp-swatch-dot { border-color: #202020 !important; }
.pdp-swatch-btn:hover .pdp-swatch-img,
.pdp-swatch-btn:hover .pdp-swatch-dot  { border-color: #888 !important; }

/* WC single_add_to_cart_button disabled state */
.pdp-add-btn:disabled,
.pdp-add-btn.disabled { background: #ccc !important; cursor: not-allowed !important; }

/* =============================================================================
   WC ADD-TO-CART — styled to match screenshot 2 exactly
   SIZE label+SIZE GUIDE row → full dropdown → COLOR label → image swatches
   → ADD TO BAG full-width + wishlist beside it
============================================================================= */

/* ── Variations table layout ── */
.pdp-wc-cart .variations {
    width: 100%;
    border: none;
    border-spacing: 0;
    margin-bottom: 20px;
    display: block; /* override WC table display */
}
.pdp-wc-cart .variations tbody,
.pdp-wc-cart .variations tr { display: block; }

/* Each attribute row */
.pdp-wc-cart .variations tr {
    margin-bottom: 20px;
}

/* Label cell — SIZE: [left] SIZE GUIDE [right] */
.pdp-wc-cart .variations .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0;
}
.pdp-wc-cart .variations .label label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #202020;
    margin: 0;
}
/* Size guide link — injected via JS next to SIZE label */
.pdp-size-guide-inline {
    font-size: 12px;
    font-weight: 500;
    color: #b87253;
    text-decoration: underline;
    text-underline-offset: 2px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Value cell */
.pdp-wc-cart .variations .value {
    display: block;
    padding: 0;
}

/* Reset link — hide */
.pdp-wc-cart .reset_variations { display: none !important; }

/* ── SELECT dropdowns (SIZE and any non-color attributes) ── */
.pdp-wc-cart .variations select {
    width: 100%;
    padding: 14px 44px 14px 16px;
    border: 1px solid #dee1e5;
    background-color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    color: #202020;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: border-color .2s;
}
.pdp-wc-cart .variations select:focus { border-color: #202020; outline: none; }

/* ── COLOR swatches — shown via JS, hides the select ── */
.pdp-wc-cart .variations select.pdp-color-hidden { display: none !important; }
.pdp-color-swatches-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.pdp-color-swatch-img {
    width: 64px;
    height: 84px;
    object-fit: cover;
    object-position: top center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s;
    display: block;
    background: var(--banner);
}
.pdp-color-swatch-img.active,
.pdp-color-swatch-img:hover { border-color: #202020; }
/* Fallback dot when no image */
.pdp-color-swatch-dot {
    width: 44px; height: 44px;
    border: 2px solid transparent;
    background: var(--banner);
    cursor: pointer;
    transition: border-color .2s;
    display: block;
}
.pdp-color-swatch-dot.active,
.pdp-color-swatch-dot:hover { border-color: #202020; }

/* ── Variation description + price ── */
.pdp-wc-cart .woocommerce-variation-description {
    font-size: 13px; color: var(--muted); margin: 8px 0;
}
.pdp-wc-cart .woocommerce-variation-price { margin: 0 0 12px; }
.pdp-wc-cart .woocommerce-variation-price .price {
    font-size: 20px; color: #b87253; font-family: var(--font-sans);
}

/* ── ADD TO BAG row: below variations, full width ── */
.pdp-wc-cart .woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: row;   /* button + wishlist side by side */
    gap: 10px;
    align-items: stretch;
    margin-top: 20px;
    width: 100%;
}
/* Simple product cart form */
.pdp-wc-cart form.cart {
    
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
    margin-top: 20px;
    width: 100%;
}
/* Hide quantity */
.pdp-wc-cart .quantity { display: none !important; }

/* ADD TO BAG — full width #b87253 copper (matches screenshot exactly) */
.pdp-wc-cart .single_add_to_cart_button {
    flex: 1;
    padding: 18px 24px;
    background: #b87253;
    color: #fff;
    border: none;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: background .25s;
    text-align: center;
    line-height: 1;
    display: block;
}
.pdp-wc-cart .single_add_to_cart_button:hover:not(:disabled) { background: #9a6042; }
.pdp-wc-cart .single_add_to_cart_button:disabled,
.pdp-wc-cart .single_add_to_cart_button.disabled { background: #c8b8ae; cursor: not-allowed; }

/* Wishlist heart — 58px square beside ADD TO BAG */
.pdp-wc-cart .pdp-wish-btn,
.pdp-wish-btn {
    width: 58px;
    min-width: 58px;
    height: auto;
    border: 1px solid #dee1e5;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: all .2s;
    flex-shrink: 0;
    border-radius: 0;
}
.pdp-wc-cart .pdp-wish-btn:hover,
.pdp-wish-btn:hover { border-color: #b87253; color: #b87253; }

/* Out of stock */
.pdp-wc-cart .out-of-stock {
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); padding: 8px 0;
}

/* =============================================================================
   PDP PAGE BACKGROUND — #FAF7F2 matches screenshot
============================================================================= */
.single-product-page,
.single-product-page .pdp-wrap,
.single-product-page .pdp-info,
.single-product-page .pdp-gallery { background: var(--bg); }

/* Shipping row — compact, above add to cart */
.pdp-shipping-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e8e3dd;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--bg);
}
.pdp-shipping-text { display: flex; flex-direction: column; gap: 2px; }
.pdp-shipping-text strong { font-weight: 600; font-size: 13px; color: var(--ink); }
.pdp-shipping-text span   { font-size: 12px; color: var(--muted); }