/*
Theme Name: SELESE
Theme URI: https://selese.gr
Author: SELESE Developer
Author URI: https://selese.gr
Description: Custom WooCommerce theme for SELESE — Greek boutique jewelry & accessories eshop. Every product 7€.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Private
Text Domain: selese
Tags: woocommerce, ecommerce, boutique, jewelry, feminine
*/

/* ═══════════════════════════════════════════════════════════════
   ABOUT THIS FILE
   This is the SINGLE source of truth for all site styling.
   The WordPress Customizer → Additional CSS box should be EMPTY.
   Everything that used to live there (shop hero, product cards,
   mobile nav, pagination, cart icon, mobile fixes) now lives here,
   organized by section and driven by the tokens below.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  /* Colors */
  --bg:           #F6E3DF;
  --bg-soft:      #FAF1EF;
  --pearl:        #FFFDFC;   /* near-white: nav, button text, footer text-on-dark */
  --surface:      #FFF8F6;   /* warm off-white: product card body */
  --ink:          #2B2424;
  --text-muted:   #7A6660;
  --rose:         #B9828D;
  --champagne:    #C8A46A;
  --antique-gold: #9A6F3A;
  --border:       rgba(154,111,58,.18);
  --border-soft:  rgba(154,111,58,.10);
  --card-border:  rgba(43,36,36,.08);

  /* Typography */
  --ff-serif: 'Cormorant', Georgia, serif;
  --ff-body:  'DM Sans', system-ui, sans-serif;

  /* Radius scale — one system, used everywhere */
  --radius-sm:   4px;   /* inputs, small chips */
  --radius-md:   8px;   /* single-product images, tables */
  --radius-lg:   16px;  /* product cards on mobile */
  --radius-xl:   22px;  /* product cards on desktop/tablet */
  --radius-pill: 999px; /* buttons, pills, avatars */

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Elevation */
  --shadow-sm: 0 2px 12px rgba(43,36,36,.06);
  --shadow-md: 0 6px 32px rgba(43,36,36,.09);
  --shadow-lg: 0 16px 56px rgba(43,36,36,.12);

  /* Layout */
  --nav-h: 60px;
  --max-w: 1280px;
}

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body { max-width:100%; overflow-x:hidden; }
body {
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }
ul { list-style:none; }

/* Accessibility */
.screen-reader-text {
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute !important; word-wrap:normal !important;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ink); color:var(--pearl); padding:10px 18px;
  font-size:13px; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--champagne); outline-offset:2px; }

.container { max-width:var(--max-w); margin:0 auto; padding:0 28px; }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }
.reveal-delay-3 { transition-delay:.24s; }
.reveal-delay-4 { transition-delay:.32s; }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ═══════════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════════ */
#masthead {
  position:sticky; top:0; z-index:900;
  height:var(--nav-h);
  background:rgba(246,227,223,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .3s;
}
body.admin-bar #masthead { top:32px; }
@media screen and (max-width:782px) { body.admin-bar #masthead { top:46px; } }
#masthead.scrolled { box-shadow:var(--shadow-sm); }

.nav-inner {
  height:100%; max-width:var(--max-w); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.site-title a, .site-title .custom-logo-link {
  font-family:var(--ff-serif); font-size:22px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink);
  transition:color .2s; display:inline-flex; align-items:center;
}
.site-title a:hover { color:var(--rose); }
.site-title img.custom-logo { max-height:42px; width:auto; }

.main-navigation ul { display:flex; gap:36px; }
.main-navigation a {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:400; color:var(--text-muted); transition:color .2s;
  position:relative; padding-bottom:3px;
}
.main-navigation a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--champagne);
  transition:width .35s var(--ease-out);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color:var(--ink); }
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after { width:100%; }

.nav-actions { display:flex; align-items:center; gap:10px; }

/* Cart — clean bag icon (replaces old text-pill cart link) */
.nav-cart-icon {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-pill);
  color:var(--ink); background:transparent;
  transition:background .25s var(--ease-out), color .25s;
}
.nav-cart-icon:hover { background:rgba(185,130,141,.10); color:var(--rose); }
.nav-cart-icon .nav-bag { display:block; }
.nav-cart-icon .cart-count {
  position:absolute; top:4px; right:2px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:var(--radius-pill);
  background:var(--champagne); color:var(--ink);
  font-family:var(--ff-body); font-size:10px; font-weight:700;
  line-height:17px; text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}
.nav-cart-icon .cart-count:empty,
.nav-cart-icon .cart-count[data-empty="1"] { display:none; }
.cart-count.pop { animation:count-pop .35s var(--ease-out); }
@keyframes count-pop { 50% { transform:scale(1.5); } }

/* Hamburger toggle — mobile only */
.nav-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0; border:none; background:transparent;
  cursor:pointer; border-radius:var(--radius-pill); transition:background .25s;
}
.nav-toggle:hover { background:rgba(185,130,141,.10); }
.nav-toggle-bar {
  display:block; width:20px; height:1.5px; margin:0 auto;
  background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .3s;
}

/* Mobile slide-in panel */
.mobile-nav {
  position:fixed; top:0; left:0; width:82%; max-width:340px;
  height:100%; height:100dvh;
  background:var(--bg-soft); z-index:1200; padding:32px 28px;
  transform:translateX(-100%); transition:transform .35s var(--ease-out);
  display:flex; flex-direction:column; box-shadow:var(--shadow-md);
  overflow-y:auto;
}
body.mobile-nav-open .mobile-nav { transform:translateX(0); }
.mobile-nav-overlay {
  position:fixed; inset:0; background:rgba(43,36,36,.45);
  z-index:1100; opacity:0; transition:opacity .35s var(--ease-out);
}
body.mobile-nav-open .mobile-nav-overlay { opacity:1; }
body.mobile-nav-open { overflow:hidden; }
.mobile-nav-close {
  position:absolute; top:18px; right:20px; width:38px; height:38px;
  border:none; background:transparent; font-size:30px; line-height:1;
  color:var(--ink); cursor:pointer; border-radius:var(--radius-pill);
  transition:background .25s;
}
.mobile-nav-close:hover { background:rgba(185,130,141,.10); }
.mobile-nav-brand {
  font-family:var(--ff-serif); font-size:26px; letter-spacing:.14em;
  color:var(--ink); margin:6px 0 34px;
}
.mobile-nav .mobile-menu-list {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px; flex:1;
}
.mobile-nav .mobile-menu-list li { margin:0; }
.mobile-nav .mobile-menu-list a {
  display:block; font-family:var(--ff-serif); font-size:22px; font-weight:300;
  color:var(--ink); padding:14px 0; border-bottom:1px solid var(--border-soft);
  transition:color .25s, padding-left .25s;
}
.mobile-nav .mobile-menu-list a:hover,
.mobile-nav .mobile-menu-list .current-menu-item > a { color:var(--rose); padding-left:6px; }
.mobile-nav-cta {
  display:block; text-align:center; margin-top:24px; padding:14px;
  background:var(--ink); color:var(--pearl); border-radius:var(--radius-pill);
  font-family:var(--ff-body); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; transition:background .3s;
}
.mobile-nav-cta:hover { background:var(--rose); color:var(--pearl); }

/* Nav breakpoint: hamburger takes over at 860px.
   (Deliberately NOT merged with the 768px content breakpoint below —
   the full nav genuinely doesn't fit between 769–860px, which was
   the original bug this hamburger fixed.) */
@media (max-width:860px) {
  .nav-toggle { display:flex; }
  .main-navigation { display:none; }
  .nav-inner { justify-content:space-between; }
  .site-title { position:absolute; left:50%; transform:translateX(-50%); }
}
@media (min-width:861px) {
  .mobile-nav, .mobile-nav-overlay { display:none !important; }
}

/* ═══════════════════════════════════════════
   BUTTONS — theme + WooCommerce harmonised
═══════════════════════════════════════════ */
.btn-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:var(--pearl);
  padding:12px 28px; border-radius:var(--radius-pill); border:0;
  font-family:var(--ff-body);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  line-height:1.2;
  transition:background .3s,transform .3s var(--ease-out),box-shadow .3s;
  cursor:pointer; text-decoration:none;
}
.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background:var(--rose); color:var(--pearl);
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}
.woocommerce a.button.disabled, .woocommerce a.button:disabled { opacity:.55; }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink);
  padding:11px 26px; border-radius:var(--radius-pill);
  border:1px solid var(--border);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:400;
  transition:border-color .3s,color .3s,transform .3s var(--ease-out);
}
.btn-outline:hover { border-color:var(--champagne); color:var(--antique-gold); transform:translateY(-2px); }

.woocommerce a.added_to_cart {
  display:inline-block; margin-top:8px; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--rose);
}

/* ═══════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════ */
.sec { padding:84px 0; }
.sec-alt { background:var(--bg-soft); }
.sec-pearl { background:var(--pearl); }
.sec-header { text-align:center; margin-bottom:48px; }
.sec-label {
  font-size:11px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--champagne); font-weight:400; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.sec-label::before,.sec-label::after { content:''; width:18px; height:1px; background:var(--champagne); opacity:.6; }
.sec-title {
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(32px,4vw,50px); line-height:1.1; color:var(--ink);
}
.sec-title em { font-style:italic; color:var(--rose); }
.sec-sub { font-size:14px; color:var(--text-muted); font-weight:300; margin-top:12px; line-height:1.8; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  min-height:min(78vh, 720px);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:64px 28px; position:relative; overflow:hidden;
  background:var(--bg);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; opacity:.5;
}
.hero::after {
  content:''; position:absolute; width:600px; height:400px;
  background:radial-gradient(ellipse,rgba(200,164,106,.12) 0%,transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.hero-content { position:relative; z-index:1; max-width:640px; }
.hero-eyebrow {
  font-size:11px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--champagne); font-weight:400; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.hero-eyebrow::before,.hero-eyebrow::after { content:''; width:24px; height:1px; background:var(--champagne); opacity:.7; }
.hero-title {
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(42px,7vw,78px); line-height:1.05; color:var(--ink);
  margin-bottom:18px; letter-spacing:-.01em;
}
.hero-title em { font-style:italic; color:var(--rose); }
.hero-sub { font-size:15px; font-weight:300; color:var(--text-muted); line-height:1.8; margin-bottom:38px; max-width:460px; margin-left:auto; margin-right:auto; }
.hero-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════
   TRUST BAR (server-rendered marquee)
═══════════════════════════════════════════ */
.trust-bar { background:var(--ink); padding:13px 0; overflow:hidden; }
.trust-track {
  display:flex; width:max-content; flex-wrap:nowrap; will-change:transform;
  animation:selese-marquee 30s linear infinite;
}
.trust-track:hover { animation-play-state:paused; }
@keyframes selese-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.trust-item {
  display:inline-flex; align-items:center; gap:9px; padding:0 38px;
  white-space:nowrap; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,253,252,.6); font-weight:300;
  flex:0 0 auto;
}
@media (prefers-reduced-motion:reduce) { .trust-track { animation-duration:60s; } }

/* ═══════════════════════════════════════════
   CATEGORY CARDS
═══════════════════════════════════════════ */
.cats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.cat-card { position:relative; overflow:hidden; aspect-ratio:3/4; display:block; transition:transform .5s var(--ease-out); }
.cat-card:hover { transform:scale(.99); z-index:2; }
.cat-card:hover .cat-img-inner { transform:scale(1.05); }
.cat-card:hover .cat-overlay { opacity:1; }
.cat-img-inner { width:100%; height:100%; transition:transform .8s var(--ease-out); display:flex; align-items:center; justify-content:center; }
.cat-img-inner img { width:100%; height:100%; object-fit:cover; }
.cat-jewelry { background:linear-gradient(165deg,#f2dce0,#e8c8ce); }
.cat-bags    { background:linear-gradient(165deg,#e4e0f0,#d4cce8); }
.cat-access  { background:linear-gradient(165deg,#e0eee4,#ccded0); }
.cat-gifts   { background:linear-gradient(165deg,#f2ebe0,#e4d8c8); }
.cat-placeholder-icon { font-size:64px; opacity:.45; }
.cat-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(43,36,36,.65) 0%,transparent 55%); opacity:0; transition:opacity .4s; }
.cat-body { position:absolute; bottom:0; left:0; right:0; padding:22px 20px; z-index:1; }
.cat-label { font-size:9px; letter-spacing:.35em; text-transform:uppercase; color:rgba(255,253,252,.85); margin-bottom:4px; text-shadow:0 1px 8px rgba(43,36,36,.4); }
.cat-name { font-family:var(--ff-serif); font-size:20px; font-weight:300; color:var(--ink); transition:color .3s; }
.cat-card:hover .cat-name { color:var(--pearl); }

/* ═══════════════════════════════════════════
   SHOP HERO + CATEGORY FILTER CHIPS
═══════════════════════════════════════════ */
.shop-hero {
  text-align:center; padding:60px 20px 36px; background:var(--bg-soft);
  border-bottom:1px solid var(--border-soft); margin-bottom:40px;
}
.shop-hero-inner { max-width:640px; margin:0 auto 28px; }
.shop-hero-title {
  font-family:var(--ff-serif); font-weight:300; font-size:clamp(36px,5vw,58px);
  line-height:1.05; color:var(--ink); margin:6px 0 12px;
}
.shop-hero-sub { font-size:13px; letter-spacing:.04em; color:var(--text-muted); font-weight:300; }
.shop-filter { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:760px; margin:0 auto; }
.shop-chip {
  display:inline-flex; align-items:center; padding:9px 20px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--pearl); color:var(--text-muted);
  font-family:var(--ff-body); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:400; transition:all .25s var(--ease-out);
}
.shop-chip:hover { border-color:var(--champagne); color:var(--ink); transform:translateY(-1px); }
.shop-chip.is-active { background:var(--ink); color:var(--pearl); border-color:var(--ink); }

/* ═══════════════════════════════════════════
   WOOCOMMERCE — PRODUCT GRID + CARDS
   Consolidated from the working Additional CSS
═══════════════════════════════════════════ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:28px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none;
  clear:both;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display:none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float:none !important;
  width:auto !important;
  margin:0 !important;
  clear:none !important;
  padding:0 0 14px !important;
  background:#FFF8F6 !important;
  border:1px solid rgba(43,36,36,.08) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  text-align:left;
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease-out),box-shadow .4s,border-color .3s;
}

.woocommerce ul.products li.product:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-md) !important;
  border-color:var(--border) !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
  display:block !important;
  width:100% !important;
  line-height:0 !important;
  overflow:hidden !important;
  background:#F6E3DF !important;
  border-radius:22px 22px 0 0 !important;
}

/* Product image: this is the working Additional CSS appearance.
   A light zoom fills the frame without the heavy 1.28 crop. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:#F6E3DF !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  border-radius:22px 22px 0 0 !important;
  transform:scale(1.14) !important;
  transform-origin:center center !important;
  transition:transform .6s var(--ease-out);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  background:#FFF8F6 !important;
  color:var(--ink) !important;
  font-family:var(--ff-serif) !important;
  font-weight:400;
  font-size:15px !important;
  line-height:1.35 !important;
  text-align:center !important;
  min-height:0 !important;
  margin:0 !important;
  padding:18px 14px 4px !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  hyphens:none !important;
  position:relative !important;
  z-index:2 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  background:#FFF8F6 !important;
  display:block !important;
  text-align:center !important;
  color:var(--champagne) !important;
  font-size:15px !important;
  font-weight:600 !important;
  font-style:normal;
  margin:0 !important;
  padding:2px 14px 14px !important;
  line-height:1.3 !important;
  position:relative !important;
  z-index:2 !important;
}

.woocommerce ul.products li.product .price .amount {
  color:var(--champagne) !important;
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce-page ul.products li.product a.button,
.woocommerce-page ul.products li.product a.add_to_cart_button {
  display:block !important;
  width:calc(100% - 28px) !important;
  margin:0 14px 0 !important;
  padding:11px 10px !important;
  border-radius:999px !important;
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:0 !important;
  white-space:nowrap !important;
  text-align:center !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
  line-height:1.2 !important;
  background:var(--ink) !important;
  color:var(--pearl) !important;
  border:1px solid var(--ink) !important;
  text-transform:uppercase !important;
  transition:background .3s,border-color .3s,color .3s;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce-page ul.products li.product a.button:hover,
.woocommerce-page ul.products li.product a.add_to_cart_button:hover {
  background:var(--champagne) !important;
  border-color:var(--champagne) !important;
  color:var(--ink) !important;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color:var(--champagne); }

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background:var(--pearl); color:var(--rose);
  border:1px solid var(--border); border-radius:20px;
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  min-height:0; line-height:1; padding:6px 12px; margin:12px;
  position:relative; top:auto; left:auto;
}

/* Placeholder tiles for products without photos */
.pc-img-placeholder { aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; font-size:56px; opacity:.55; }
.pc-ph-0 { background:linear-gradient(145deg,#f5dce0,#edd0d6); }
.pc-ph-1 { background:linear-gradient(145deg,#e2def5,#d6d0ed); }
.pc-ph-2 { background:linear-gradient(145deg,#ddf0e2,#d0edd6); }
.pc-ph-3 { background:linear-gradient(145deg,#f5f0df,#ede8d0); }
.pc-ph-4 { background:linear-gradient(145deg,#f5e8ee,#edd6e0); }
.pc-ph-5 { background:linear-gradient(145deg,#f0ddf5,#e8d0ed); }
.pc-ph-6 { background:linear-gradient(145deg,#f5eedf,#ede4d0); }
.pc-ph-7 { background:linear-gradient(145deg,#dde8f5,#d0dced); }

/* ═══════════════════════════════════════════
   SHOP TOOLBAR — sorting, result count, pagination
═══════════════════════════════════════════ */

/* Sorting dropdown */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  font-family:var(--ff-body);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--ink);
  background-color:var(--pearl);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:11px 38px 11px 18px;
  cursor:pointer;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8A46A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}

.woocommerce .woocommerce-ordering select:hover {
  border-color:var(--champagne);
}

.woocommerce .woocommerce-ordering select:focus {
  border-color:var(--champagne);
  box-shadow:0 0 0 3px rgba(200,164,106,.15);
}

.woocommerce .woocommerce-ordering {
  margin-bottom:28px;
}


/* Result count */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-family:var(--ff-body);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--text-muted);
  margin:0;
  padding-top:11px;
}

.woocommerce .products {
  clear:both;
}


/* Pagination — desktop and tablet */
.woocommerce nav.woocommerce-pagination {
  width:100%;
  margin:56px 0 28px;
  padding:0 12px;
  text-align:center;
}

.woocommerce nav.woocommerce-pagination ul {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
}

.woocommerce nav.woocommerce-pagination ul li {
  float:none;
  margin:0;
  padding:0;
  border:0;
  overflow:visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 10px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  background:var(--pearl);
  color:var(--text-muted);
  font-family:var(--ff-body);
  font-size:13px;
  line-height:1;
  text-decoration:none;
  box-sizing:border-box;
  transition:
    background-color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    color .25s var(--ease-out),
    transform .25s var(--ease-out);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background:var(--bg-soft);
  color:var(--ink);
  border-color:var(--champagne);
  transform:translateY(-1px);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background:var(--ink);
  color:var(--pearl);
  border-color:var(--ink);
}

.woocommerce nav.woocommerce-pagination ul li span.dots {
  min-width:24px;
  padding:0;
  background:transparent;
  border:0;
  color:var(--text-muted);
}

.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  min-width:46px;
  padding:0 14px;
}


/* Pagination — mobile */
@media (max-width:640px) {

  .woocommerce nav.woocommerce-pagination {
    margin:38px 0 32px;
    padding:0 8px;
  }

  .woocommerce nav.woocommerce-pagination ul {
    display:flex;
    width:100%;
    gap:7px;
    flex-wrap:wrap;
  }

  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span {
    min-width:40px;
    height:40px;
    padding:0 9px;
    font-size:13px;
  }

  /*
   * On the first pages, hide the final three page links
   * so the pagination does not become crowded.
   * The Next arrow remains visible.
   */
  .woocommerce nav.woocommerce-pagination ul li:nth-last-child(2),
  .woocommerce nav.woocommerce-pagination ul li:nth-last-child(3),
  .woocommerce nav.woocommerce-pagination ul li:nth-last-child(4) {
    display:none;
  }

  .woocommerce nav.woocommerce-pagination ul li span.dots {
    display:flex;
    min-width:22px;
    height:40px;
  }

  .woocommerce nav.woocommerce-pagination ul li a.prev,
  .woocommerce nav.woocommerce-pagination ul li a.next {
    min-width:44px;
    padding:0 13px;
  }
}

/* ═══════════════════════════════════════════
   WOOCOMMERCE — SINGLE PRODUCT
═══════════════════════════════════════════ */
.woocommerce div.product div.summary .product_title {
  font-family:var(--ff-serif); font-weight:300; font-size:clamp(30px,4vw,44px);
  line-height:1.1; margin-bottom:12px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family:var(--ff-serif); font-style:italic;
  font-size:42px; color:var(--champagne);
}
.woocommerce div.product div.images img { border-radius:var(--radius-md); }
.woocommerce div.product form.cart div.quantity .qty {
  border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:10px; font-family:var(--ff-body); background:var(--pearl);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color:var(--champagne); }

/* ═══════════════════════════════════════════
   WOOCOMMERCE — CART / CHECKOUT / FORMS
═══════════════════════════════════════════ */
.woocommerce table.shop_table {
  border:1px solid var(--border-soft); border-radius:var(--radius-md);
}
.woocommerce table.shop_table th {
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-muted); font-weight:500;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:11px 14px; font-family:var(--ff-body); font-size:14px;
  background:var(--pearl); color:var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline:none; border-color:var(--champagne); box-shadow:none;
}
.woocommerce-message, .woocommerce-info {
  background:var(--bg-soft); border-top-color:var(--champagne); color:var(--ink);
}
.woocommerce-error { border-top-color:var(--rose); }
.woocommerce-message a.button, .woocommerce-info a.button { background:var(--ink); }

/* ═══════════════════════════════════════════
   PROMISE / WHY
═══════════════════════════════════════════ */
.promise-sec { background:var(--ink); padding:92px 0; text-align:center; position:relative; overflow:hidden; }
.promise-sec::before { content:''; position:absolute; width:500px; height:300px; background:radial-gradient(ellipse,rgba(200,164,106,.12),transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.promise-content { position:relative; z-index:1; }
.promise-label { font-size:11px; letter-spacing:.38em; text-transform:uppercase; color:var(--champagne); opacity:.85; margin-bottom:16px; }
.promise-headline { font-family:var(--ff-serif); font-weight:300; font-size:clamp(44px,8vw,88px); line-height:.95; color:var(--pearl); margin-bottom:20px; letter-spacing:-.015em; }
.promise-headline em { font-style:italic; color:var(--champagne); }
.promise-sub { font-size:15px; font-weight:300; color:rgba(255,253,252,.55); line-height:1.8; margin-bottom:34px; max-width:480px; margin-left:auto; margin-right:auto; }
.promise-chips { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.promise-chip { border:1px solid rgba(200,164,106,.25); color:rgba(255,253,252,.65); padding:8px 18px; border-radius:32px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:300; }

.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:44px; }
.why-card { padding:34px 26px; background:var(--pearl); border:1px solid var(--border-soft); transition:background .3s,transform .4s var(--ease-out); position:relative; overflow:hidden; }
.why-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--rose),var(--champagne)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.why-card:hover { background:var(--bg-soft); transform:translateY(-3px); }
.why-card:hover::after { transform:scaleX(1); }
.why-icon { width:44px; height:44px; border-radius:10px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px; transition:background .3s,color .3s; }
.why-card:hover .why-icon { background:var(--rose); border-color:var(--rose); }
.why-title { font-family:var(--ff-serif); font-size:18px; font-weight:300; color:var(--ink); margin-bottom:8px; }
.why-desc { font-size:13px; font-weight:300; color:var(--text-muted); line-height:1.8; }

/* ═══════════════════════════════════════════
   GENERIC PAGE / ARCHIVE / 404
═══════════════════════════════════════════ */
.page-wrap { padding:64px 0 88px; }
.page-wrap-narrow { max-width:780px; }
.page-title {
  font-family:var(--ff-serif); font-weight:300;
  font-size:clamp(36px,5vw,56px); line-height:1.08; margin-bottom:26px;
}
.page-title em { font-style:italic; color:var(--rose); }
.entry-content { font-size:15px; font-weight:300; color:var(--text-muted); line-height:2; }
.entry-content p { margin-bottom:18px; }
.entry-content h2,.entry-content h3 { font-family:var(--ff-serif); font-weight:400; color:var(--ink); margin:30px 0 12px; }
.entry-content a { color:var(--antique-gold); border-bottom:1px solid var(--border); }
.entry-content ul { list-style:disc; padding-left:22px; margin-bottom:18px; }
.entry-content ol { padding-left:22px; margin-bottom:18px; }

.archive-list { display:grid; gap:28px; }
.archive-item { background:var(--pearl); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:28px; }
.archive-item h2 { font-family:var(--ff-serif); font-weight:300; font-size:26px; margin-bottom:8px; }
.archive-item time { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); }

.error-404 { text-align:center; padding:110px 28px 130px; }
.error-404 .e404-code { font-family:var(--ff-serif); font-style:italic; font-size:clamp(80px,16vw,150px); color:var(--rose); line-height:1; }
.error-404 p { color:var(--text-muted); font-weight:300; margin:14px 0 30px; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#colophon { background:var(--ink); padding:60px 0 40px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.fg-logo { font-family:var(--ff-serif); font-size:20px; font-weight:300; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne); margin-bottom:12px; display:block; }
.fg-desc { font-size:12px; font-weight:300; color:rgba(255,253,252,.38); line-height:1.9; margin-bottom:18px; }
.fg-socials { display:flex; gap:9px; }
.fg-soc {
  width:34px; height:34px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,253,252,.12); background:transparent;
  color:rgba(255,253,252,.45); font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .25s,color .25s,transform .25s var(--ease-out);
}
.fg-soc:hover { border-color:var(--champagne); color:var(--champagne); transform:scale(1.1); }
.fg-col-title { font-size:9px; letter-spacing:.38em; text-transform:uppercase; color:var(--champagne); margin-bottom:16px; font-weight:400; }
.fg-links { display:flex; flex-direction:column; gap:10px; }
.fg-links a { font-size:12px; font-weight:300; color:rgba(255,253,252,.4); transition:color .2s; }
.fg-links a:hover { color:var(--champagne); }
.footer-bottom { border-top:1px solid rgba(255,253,252,.07); padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.footer-bottom p { font-size:10px; letter-spacing:.12em; color:rgba(255,253,252,.25); }

/* ═══════════════════════════════════════════
   RESPONSIVE
   Breakpoints in play (each one intentional):
     1024px — general section grids (categories/why/footer)
      900px — product grid steps to 3 columns
      860px — nav switches to hamburger (see header block above)
      768px — general content / single-product mobile layout
      640px — product grid steps to 2 columns
      380px — small-phone tightening
═══════════════════════════════════════════ */
@media (max-width:1024px) {
  .cats-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:900px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:20px !important;
  }
  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img,
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img {
    transform:scale(1.16) !important;
  }
}

@media (max-width:768px) {
  .container { padding:0 18px; }
  .sec { padding:54px 0; }

  /* Shop toolbar: result count on top (centered), sorting full-width below */
  .woocommerce .woocommerce-result-count,
  .woocommerce-page .woocommerce-result-count {
    float:none; display:block; text-align:center;
    margin:0 0 14px; padding:0; font-size:12px;
  }
  .woocommerce .woocommerce-ordering,
  .woocommerce-page .woocommerce-ordering {
    float:none; margin:0 auto 24px; display:block; width:100%; max-width:340px;
  }
  .woocommerce .woocommerce-ordering select,
  .woocommerce-page .woocommerce-ordering select { width:100%; text-align:center; }
  .hero { padding:54px 18px; min-height:72vh; }
  .hero-title { font-size:clamp(38px,11vw,54px); }
  .btn-primary, .btn-outline { min-height:48px; }
  .cats-grid { grid-template-columns:1fr 1fr; gap:2px; }
  .cat-placeholder-icon { font-size:48px; }
  .why-grid { grid-template-columns:1fr 1fr; gap:2px; }
  .why-card { padding:24px 18px; }
  .promise-headline { font-size:clamp(42px,13vw,68px); }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .page-wrap { padding:40px 0 64px; }
  .shop-hero { padding:40px 16px 28px; margin-bottom:28px; }
  .shop-chip { padding:8px 16px; font-size:11px; }

  /* Single product — prevent horizontal overflow, tidy up form row */
  html, body { overflow-x:hidden; max-width:100%; }
  .woocommerce div.product,
  .woocommerce-page div.product {
    width:100%; max-width:100%; overflow-x:hidden;
    padding-left:16px; padding-right:16px;
  }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce-page div.product div.images,
  .woocommerce-page div.product div.summary {
    float:none; width:100%; max-width:100%; margin:0 0 24px; padding:0;
  }
  .woocommerce div.product .product_title { font-size:32px; line-height:1.1; word-break:normal; overflow-wrap:anywhere; }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size:32px; line-height:1.1; }
  .woocommerce div.product form.cart {
    display:flex; align-items:center; gap:10px; width:100%; max-width:100%; flex-wrap:nowrap;
  }
  .woocommerce div.product form.cart div.quantity { flex:0 0 58px; width:58px; margin:0; }
  .woocommerce div.product form.cart .qty { width:58px; height:48px; text-align:center; }
  .woocommerce div.product form.cart .button {
    flex:1 1 auto; min-width:0; width:auto; max-width:100%;
    font-size:12px; letter-spacing:.10em; padding:15px 14px;
    border-radius:var(--radius-pill); white-space:nowrap;
  }
  .woocommerce div.product .product_meta { font-size:14px; line-height:1.5; word-break:break-word; overflow-wrap:anywhere; }
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .woocommerce-tabs .panel,
  .woocommerce div.product .woocommerce-Tabs-panel { width:100%; max-width:100%; overflow-x:hidden; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { padding:0; margin:20px 0; width:100%; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { width:auto; max-width:100%; margin:0; }
  .woocommerce #reviews,
  .woocommerce #review_form_wrapper,
  .woocommerce #review_form,
  .woocommerce #reviews textarea,
  .woocommerce #reviews input { width:100%; max-width:100%; }
}

@media (max-width:640px) {
  .container { padding:0 12px; }
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    border-radius:16px !important;
    padding-bottom:10px !important;
  }
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
  .woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
    border-radius:16px 16px 0 0 !important;
  }
  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img,
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img {
    border-radius:16px 16px 0 0 !important;
    object-fit:cover !important;
    padding:0 !important;
    transform:scale(1.18) !important;
  }
  .woocommerce ul.products li.product:hover a img {
    transform:scale(1.18) !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-size:13px !important;
    line-height:1.3 !important;
    padding:16px 10px 3px !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce-page ul.products li.product .price {
    font-size:15px !important;
    padding:2px 10px 12px !important;
  }
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button,
  .woocommerce-page ul.products li.product a.button,
  .woocommerce-page ul.products li.product a.add_to_cart_button {
    width:calc(100% - 20px) !important;
    margin:0 10px 0 !important;
    padding:10px 6px !important;
    font-size:10px !important;
    letter-spacing:.07em !important;
  }

}

@media (max-width:380px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { gap:10px !important; }
  .woocommerce ul.products li.product a img,
  .woocommerce-page ul.products li.product a img,
  .woocommerce ul.products li.product img,
  .woocommerce-page ul.products li.product img {
    object-fit:cover !important;
    padding:0 !important;
    transform:scale(1.20) !important;
  }
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.add_to_cart_button,
  .woocommerce-page ul.products li.product a.button,
  .woocommerce-page ul.products li.product a.add_to_cart_button {
    font-size:9px !important;
    padding:9px 4px !important;
    letter-spacing:.04em !important;
  }
  .hero-title { font-size:36px; }
  .why-grid { grid-template-columns:1fr; }
}