/*
Theme Name: Bravo Παλαιοπωλείο
Theme URI: https://bravopaleopoleio.devleoo.com
Author: Bravo Παλαιοπωλείο
Description: Custom WooCommerce theme for Bravo Παλαιοπωλείο — antiques, vintage furniture and restoration. Editorial "Broadsheet" design system with Source Serif 4, ink-on-paper palette and a cyan process accent. Greek-language storefront.
Version: 1.4.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: bravo
WC requires at least: 6.0
WC tested up to: 11.0
*/

/* ==========================================================================
   Design system tokens — Broadsheet (from the design project's styles.css)
   ========================================================================== */
:root {
  /* Warm "aged paper" palette for the antique / pawnshop feel:
     cream & sand grounds, espresso ink, a muted sage-olive accent
     (buttons, numbers, links) and a dusty terracotta secondary. */
  --color-bg: #f4ece0;
  --color-surface: #ebe0cf;
  --color-text: #2a2318;
  --color-accent: #66763f;
  --color-accent-2: #b06a4f;
  --color-divider: color-mix(in srgb, #2a2318 15%, transparent);

  --color-neutral-100: #faf5ec;
  --color-neutral-200: #f0e8da;
  --color-neutral-300: #ded2bf;
  --color-neutral-400: #c4b6a0;
  --color-neutral-500: #a3937b;
  --color-neutral-600: #82725a;
  --color-neutral-700: #665740;
  --color-neutral-800: #473a2b;
  --color-neutral-900: #2f2619;

  --color-accent-100: #eef1e6;
  --color-accent-200: #dde4cb;
  --color-accent-300: #c5d1a9;
  --color-accent-400: #a7b881;
  --color-accent-500: #899b5d;
  --color-accent-600: #5a6836;
  --color-accent-700: #495429;
  --color-accent-800: #39411f;
  --color-accent-900: #2a3015;

  --color-accent-2-100: #f6ebe4;
  --color-accent-2-200: #eed6c9;
  --color-accent-2-700: #8a4a33;
  --color-accent-2-800: #6a3826;

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --space-1: 5px;  --space-2: 10px; --space-3: 15px;
  --space-4: 20px; --space-6: 30px; --space-8: 40px;

  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2f2619 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2f2619 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2f2619 22%, transparent);

  --page-max: 1500px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); text-decoration: underline; }
p { margin: 0 0 var(--space-3); }
::selection { background: var(--color-accent-200); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.wrap { max-width: var(--page-max); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 11px 20px; border-radius: var(--radius-md);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: 8px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-700); }
.btn-block { width: 100%; }
.btn.loading, .btn.added { opacity: .7; }

/* ==========================================================================
   Top announcement bar + header
   ========================================================================== */
.topbar {
  background: var(--color-text); color: var(--color-neutral-100);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 40px; display: flex; justify-content: space-between; gap: 20px;
}
.topbar .topbar-contact { color: var(--color-neutral-400); }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-bg); padding: 0 40px;
}
.site-header .header-inner {
  display: flex; align-items: center; gap: 40px;
  padding: 18px 0 14px; border-bottom: 3px solid var(--color-text);
}
.brand { display: flex; align-items: center; gap: 14px; color: inherit; }
.brand:hover { text-decoration: none; color: inherit; }
.brand img { width: 62px; height: 62px; object-fit: contain; mix-blend-mode: multiply; }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand .brand-name { font-family: var(--font-heading); font-size: 30px; letter-spacing: -0.02em; }
.brand .brand-sub {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-top: 5px;
}

.main-nav {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto; font-size: 16px;
}
.main-nav .menu-list {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav .menu-list li { list-style: none; margin: 0; padding: 0; }
.main-nav a { color: inherit; }
.main-nav a:hover { color: var(--color-accent); text-decoration: none; }
.main-nav .menu-item.current-menu-item > a,
.main-nav a[aria-current="page"] { color: var(--color-accent-700); }
.main-nav .cart-link {
  border-bottom: 1px solid var(--color-accent); padding-bottom: 2px;
}
.main-nav .cart-count { color: var(--color-neutral-700); }
.header-rule { height: 1px; background: var(--color-text); opacity: 0.35; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; color: var(--color-text);
  margin-left: auto;
}

/* Mega menu (categories dropdown) */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-neutral-100); box-shadow: var(--shadow-lg);
  padding: 34px 40px 40px; max-height: 74vh; overflow: auto;
  display: none;
}
.mega.open { display: block; }
.mega-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 26px;
}
.mega-head .label {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.mega-cols { columns: 4 220px; column-gap: 44px; }
.mega-cat { break-inside: avoid; margin-bottom: 26px; }
.mega-cat > a {
  display: flex; gap: 10px; align-items: baseline; color: inherit;
  font-family: var(--font-heading); font-size: 19px; margin-bottom: 6px;
}
.mega-cat > a:hover { color: var(--color-accent-700); text-decoration: none; }
.mega-cat .num { color: var(--color-accent); font-size: 12px; letter-spacing: 0.06em; }
.mega-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mega-cat ul a { color: var(--color-neutral-700); font-size: 15px; }

/* ==========================================================================
   Sections / home
   ========================================================================== */
.section { padding: 0 40px 90px; }
.section .wrap { width: 100%; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px; margin-bottom: 30px;
}
.section-head h2 { font-size: 34px; margin: 0; }
.kicker {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 22px;
}

.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 60px; align-items: end; padding: 70px 40px 80px; max-width: var(--page-max);
  margin: 0 auto;
}
.hero h1 {
  font-size: 76px; line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 26px; max-width: 15ch; text-wrap: pretty;
}
.hero p.lede {
  font-size: 20px; line-height: 1.5; max-width: 46ch;
  color: var(--color-neutral-800); text-wrap: pretty;
}
.hero .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-media { height: 470px; min-width: 0; position: relative; }
/* Hero brand panel — the logo lockup on the sand ground, in place of a photo.
   Contained rather than covering, so the artwork stays crisp at its own size. */
.hero-brand {
  display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-divider);
}
.hero-brand img { width: auto; max-width: 62%; max-height: 76%; }

/* Image placeholder tiles (used where no photo exists yet) */
.imgslot {
  position: relative; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--color-text) 4%, transparent) 0 14px,
      transparent 14px 28px),
    var(--color-surface);
  border: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--color-neutral-600); font-size: 14px; padding: 24px; overflow: hidden;
}
.imgslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* category index list */
.cat-index {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 44px;
}
.cat-index a {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 0; color: inherit;
  border-bottom: 1px solid var(--color-divider);
}
.cat-index a:hover { color: var(--color-accent-700); text-decoration: none; }
.cat-index .num { color: var(--color-accent); font-size: 12px; min-width: 18px; }
.cat-index .name { font-family: var(--font-heading); font-size: 18px; }
.cat-index .count { margin-left: auto; font-size: 13px; color: var(--color-neutral-600); }

/* product grid + cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 48px 40px;
}
.product-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Carousel ("Νέες αφίξεις") — native scroll-snap track, arrows in the section head.
   --cs-per is how many cards fit a view; fractional values leave a peek of the next. */
.section-tools { display: flex; align-items: center; gap: 20px; }
.cs-nav { display: inline-flex; gap: 6px; }
.cs-btn {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  font-family: var(--font-heading); font-size: 21px; line-height: 1; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.cs-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.cs-btn:disabled { opacity: .28; cursor: default; }
.cs-static .cs-nav { display: none; }
.carousel-track {
  --cs-gap: 40px; --cs-per: 4;
  display: flex; gap: var(--cs-gap);
  overflow-x: auto; overscroll-behavior-x: none;
  /* Χωρίς αυτό, το iOS WebKit προσθέτει το περιεχόμενο του scroller στο
     scrollable πλάτος του document και η σελίδα σέρνεται οριζόντια. */
  contain: paint;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * {
  flex: 0 0 calc((100% - (var(--cs-per) - 1) * var(--cs-gap)) / var(--cs-per));
  scroll-snap-align: start;
}
.pcard { display: flex; flex-direction: column; gap: 11px; }
.pcard .pcard-media { height: 300px; min-width: 0; position: relative; }
.pcard.compact .pcard-media { height: 280px; }
.pcard .pcard-cat {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.pcard h3 { font-size: 22px; margin: 0; line-height: 1.15; }
.pcard h3 a { color: inherit; }
.pcard h3 a:hover { color: var(--color-accent-700); text-decoration: none; }
.pcard .pcard-meta { margin: 0; font-size: 15px; color: var(--color-neutral-700); }
.pcard .pcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px;
}
.pcard .price { font-family: var(--font-heading); font-size: 21px; }
.pcard .price del { color: var(--color-neutral-500); font-weight: 400; margin-right: 6px; }
.pcard .price ins { text-decoration: none; }

/* highlighted pieces */
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: 60px;
}
.highlight { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; }
.highlight-media { height: 380px; min-width: 0; position: relative; }
.highlight .eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.highlight h3 { font-size: 30px; margin: 12px 0 14px; line-height: 1.1; }
.highlight p { font-size: 16px; color: var(--color-neutral-800); margin-bottom: 18px; }

/* story / stats */
.split {
  padding: 0 40px 100px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 80px; align-items: start; max-width: var(--page-max); margin: 0 auto;
}
.split h2 { font-size: 34px; margin: 0 0 20px; }
.split p { font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px,100%),1fr)); gap: 40px; }
.stat .num { font-family: var(--font-heading); font-size: 46px; margin: 0; line-height: 1; }
.stat .lbl { font-size: 14px; color: var(--color-neutral-700); margin: 6px 0 0; }

/* visit */
.visit {
  padding: 0 40px 110px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
  gap: 60px; align-items: stretch; max-width: var(--page-max); margin: 0 auto;
}
.visit h2 { font-size: 34px; margin: 0 0 20px; }
.visit .field-label {
  margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.visit-media { min-height: 380px; min-width: 0; position: relative; }

/* ==========================================================================
   About / restore pages
   ========================================================================== */
.page-head { padding: 80px 40px 60px; max-width: 1100px; margin: 0 auto; }
.page-head h1 {
  font-size: 68px; line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 30px; max-width: 22ch; text-wrap: pretty;
}
.page-head .lede {
  font-size: 22px; line-height: 1.55; max-width: 58ch;
  color: var(--color-neutral-800); font-style: italic;
}
.about-body {
  padding: 0 40px 90px; display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 70px; align-items: start;
  max-width: var(--page-max); margin: 0 auto;
}
.about-body .prose { font-size: 18px; line-height: 1.65; color: var(--color-neutral-800); }
.about-media { display: flex; flex-direction: column; gap: 24px; }
.steps {
  padding: 0 40px 90px; max-width: var(--page-max); margin: 0 auto;
}
.steps h2 { font-size: 34px; margin: 0 0 34px; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); gap: 50px; }
.step .step-num { font-family: var(--font-heading); font-size: 15px; color: var(--color-accent); margin: 0 0 10px; }
.step h3 { font-size: 22px; margin: 0 0 10px; }
.step p { font-size: 16px; color: var(--color-neutral-800); margin: 0; }

.service {
  padding: 60px 40px 100px; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; align-items: center;
  max-width: var(--page-max); margin: 0 auto;
}
.service h2 { font-size: 44px; line-height: 1.08; margin: 0 0 20px; max-width: 18ch; }
.service p { font-size: 18px; line-height: 1.6; color: var(--color-neutral-800); max-width: 48ch; }
.service-media { height: 420px; min-width: 0; position: relative; }

/* ==========================================================================
   Store (WooCommerce archive) + single
   ========================================================================== */
.store { padding: 50px 40px 100px; max-width: var(--page-max); margin: 0 auto; }
.store-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.store-head h1 { font-size: 54px; margin: 0; letter-spacing: -0.03em; }
.store-head .result { font-size: 15px; color: var(--color-neutral-600); }
.store-intro { font-size: 17px; color: var(--color-neutral-800); max-width: 60ch; margin-bottom: 40px; }
.store-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 60px; align-items: start; }

/* Collapsible category list. Category pages render collapsed (see woocommerce.php);
   the toggle sits top-left above the grid and swaps its own label. */
.store-bar { display: flex; margin: 0 0 24px; }
.cats-toggle { gap: 10px; }
.cats-toggle-icon {
  width: 15px; height: 11px; flex: none;
  background:
    linear-gradient(currentColor 0 0) 0 0    / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 50%  / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 100% 1.5px no-repeat;
}
.store-layout.cats-collapsed { grid-template-columns: minmax(0, 1fr); }
.store-layout.cats-collapsed .store-side { display: none; }
.store-side { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 4px; }
.store-side .side-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-600); margin: 0 0 12px;
}
.store-side a { color: inherit; font-size: 16px; padding: 5px 0; display: block; }
.store-side a.active { color: var(--color-accent-700); }
.store-side ul {
  list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--color-divider);
}
.store-side ul a { color: var(--color-neutral-700); font-size: 14px; }
.store-note { margin-top: 60px; font-size: 16px; color: var(--color-neutral-700); }

/* WooCommerce loop grid — override the plugin's column list with our grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 48px 40px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
  text-align: left;
}
.woocommerce ul.products li.product .pcard-media { display: block; margin-bottom: 4px; }
.woocommerce ul.products li.product a img { margin: 0; }
.woocommerce ul.products li.product .button { margin: 0; }
.woocommerce ul.products li.product .added_to_cart { display: none; }

.woocommerce-result-count { color: var(--color-neutral-600); font-size: 15px; }
.woocommerce-ordering { margin-bottom: 24px; }
.woocommerce-ordering select {
  font: inherit; padding: 8px 10px; background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); color: var(--color-text);
}

/* single product */
.single-wrap { padding: 50px 40px 100px; max-width: 1200px; margin: 0 auto; }
.woocommerce div.product { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; }
.woocommerce div.product .product_title { font-size: 40px; margin: 0 0 14px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-family: var(--font-heading); font-size: 26px; color: var(--color-text); }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 17px; color: var(--color-neutral-800); }
.woocommerce div.product form.cart { margin-top: 24px; }
.woocommerce .woocommerce-tabs { grid-column: 1 / -1; margin-top: 30px; }
.woocommerce div.product .images img { border: 1px solid var(--color-divider); }
.woocommerce .quantity input.qty {
  width: 64px; padding: 8px; font: inherit; text-align: center;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface);
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit.alt,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  background: var(--color-accent); color: var(--color-bg);
  border-radius: var(--radius-md); padding: 11px 20px; font-size: 15px;
  border: 0; cursor: pointer; transition: background .15s ease;
}
.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(--color-accent-600); color: var(--color-bg);
}
.woocommerce .pcard a.button, .woocommerce .pcard button { padding: 8px 14px; font-size: 14px; }

/* messages / notices — WooCommerce prepends an icon-font glyph via ::before
   that renders as a tofu box on this classic theme; we remove it and use our
   own chrome (top rule + surface fill). */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews,
.woocommerce-checkout .woocommerce-info, .woocommerce-account .woocommerce-info {
  border-top: 3px solid var(--color-accent); background: var(--color-neutral-100);
  padding: 14px 18px; list-style: none; margin: 0 0 24px; border-radius: var(--radius-md);
  color: var(--color-text); font-size: 15px; position: relative;
}
.woocommerce-message::before, .woocommerce-info::before,
.woocommerce-error::before, .woocommerce-noreviews::before,
.woocommerce ul.cart_list li::before, .woocommerce .woocommerce-message::before {
  content: none !important; display: none !important;
}
.woocommerce-error, .woocommerce-error li { list-style: none; margin-left: 0; padding-left: 0; }
.woocommerce-error { border-top-color: var(--color-accent-2); padding: 14px 18px; }
.woocommerce-message .button, .woocommerce-message .wc-forward { margin: 0 0 0 14px; }

/* form fields on cart / checkout / account */
.woocommerce form .form-row { margin: 0 0 14px; }
.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.select2-container--default .select2-selection--single {
  width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 15px;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus { border-color: var(--color-accent); outline: none; }
.woocommerce-checkout #payment { background: var(--color-neutral-100); border-radius: var(--radius-md); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--color-divider); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order-table { font-size: 15px; }

/* cart / checkout / account (light theming) */
.wc-page { padding: 50px 40px 100px; max-width: 1200px; margin: 0 auto; }
.wc-page h1 { font-size: 48px; margin: 0 0 30px; }
.woocommerce table.shop_table { border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.woocommerce table.shop_table th { font-family: var(--font-heading); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-text); color: var(--color-neutral-200);
  padding: 60px 40px 40px;
}
.site-footer .footer-grid {
  display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,1fr));
  gap: 50px; max-width: var(--page-max); margin: 0 auto;
}
.site-footer .foot-logo {
  /* The lockup is dark-brown ink on transparency, so it needs a paper ground to
     read against the espresso footer. */
  width: 148px; height: auto; margin: 0 0 22px;
  background: var(--color-neutral-100);
  padding: 14px; border-radius: var(--radius-lg);
}
.site-footer .foot-brand { font-family: var(--font-heading); font-size: 26px; margin: 0 0 6px; color: var(--color-neutral-100); }
.site-footer .foot-sub {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 0 0 20px;
}
.site-footer p { font-size: 16px; color: var(--color-neutral-300); max-width: 34ch; }
.site-footer .foot-col { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.site-footer .foot-col .foot-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 0 0 6px;
}
.site-footer .foot-col a { color: var(--color-neutral-200); }
.site-footer .foot-col a:hover { color: var(--color-accent-300); }
.site-footer .foot-accent { color: var(--color-accent-300); }
.site-footer .foot-copy {
  margin: 46px auto 0; max-width: var(--page-max);
  font-size: 13px; color: var(--color-neutral-500);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .carousel-track { --cs-per: 2.2; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px 56px; }
  .hero h1 { font-size: 54px; }
  .hero-media { height: 340px; }
  .split, .visit, .about-body, .service { grid-template-columns: 1fr; gap: 40px; }
  .highlight { grid-template-columns: 1fr; }
  .store-layout { grid-template-columns: 1fr; }
  .store-side { position: static; }
  .woocommerce div.product { grid-template-columns: 1fr; gap: 30px; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .section-head { gap: 14px 20px; }
  .section-head h2 { flex: 1 1 100%; }
  .section-tools { width: 100%; justify-content: space-between; }
  .carousel-track { --cs-per: 1.15; --cs-gap: 24px; }
  .topbar { padding: 7px 20px; font-size: 11px; }
  .topbar .topbar-contact { display: none; }
  .site-header { padding: 0 20px; }
  .site-header .header-inner { gap: 16px; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-neutral-100); box-shadow: var(--shadow-lg);
    padding: 4px 20px 14px; z-index: 39; font-size: 17px;
  }
  .main-nav.open { display: flex; }
  .main-nav .menu-list {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .main-nav .menu-list li { width: 100%; }
  .main-nav .menu-list a,
  .main-nav .cart-link {
    display: block; width: 100%; padding: 15px 2px;
    border-bottom: 1px solid var(--color-divider); border-radius: 0;
  }
  /* the categories mega-dropdown is a desktop affordance — the mobile menu
     reaches categories through "Κατάστημα"; hide it here to keep things clean */
  .main-nav .mega-trigger { display: none !important; }
  .main-nav .cart-link {
    border-bottom: 0; padding-bottom: 4px; margin-top: 4px;
    color: var(--color-accent-700); font-family: var(--font-heading);
  }
  .main-nav .cart-count { color: var(--color-neutral-600); }
  .section, .split, .visit, .steps, .about-body, .service, .store { padding-left: 20px; padding-right: 20px; }
  .hero { padding: 32px 20px 40px; }
  .hero h1 { font-size: 40px; }
  .page-head { padding: 48px 20px 40px; }
  .page-head h1 { font-size: 44px; }
  .store-head h1 { font-size: 38px; }
  .mega-cols { columns: 2 160px; }
  .site-footer { padding: 48px 20px 32px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ==========================================================================
   Motion & micro-interactions
   ========================================================================== */
html { scroll-behavior: smooth; }

/* Page entrance — runs from a synchronous <head> flag, so no JS dependency. */
@keyframes bravoPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.bravo-js body { animation: bravoPageIn .45s ease both; }

/* Top navigation progress bar (loading experience) */
#bravo-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
#bravo-progress.active { opacity: 1; }
#bravo-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 70%, transparent);
  transition: width .3s ease;
}

/* Scroll-reveal — pre-reveal hidden state only when JS is active */
html.bravo-js :is(
  .hero > div, .section-head, .cat-index a, .pcard, .highlight,
  .split > *, .visit > *, .stat, .steps .step, .page-head > *,
  .service > *, .about-body > *, .store-intro
) {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
}
html.bravo-js .is-visible { opacity: 1 !important; transform: none !important; }
/* Failsafe (script never ran) + reduced-motion: force everything visible */
html.bravo-reveal-all :is(
  .hero > div, .section-head, .cat-index a, .pcard, .highlight,
  .split > *, .visit > *, .stat, .steps .step, .page-head > *,
  .service > *, .about-body > *, .store-intro
) { opacity: 1 !important; transform: none !important; }

/* Header lifts a soft shadow once the page is scrolled */
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 6px 22px color-mix(in srgb, #2d2b2b 12%, transparent); }

/* Buttons — subtle lift */
.btn { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 34%, transparent); }
.btn-secondary:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Product cards — image zoom + card lift on hover */
.pcard .pcard-media { overflow: hidden; border-radius: var(--radius-md); }
.pcard .pcard-media .imgslot { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.pcard:hover .pcard-media .imgslot { transform: scale(1.045); }
.pcard h3 a { transition: color .15s ease; }
.pcard { transition: transform .2s ease; }

/* Category index rows — arrow slide on hover */
.cat-index a { transition: color .15s ease, padding-left .2s ease; }
.cat-index a:hover { padding-left: 6px; }
.highlight .highlight-media .imgslot { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.highlight:hover .highlight-media .imgslot { transform: scale(1.03); }

/* Nav link underline grow */
.main-nav .menu-list a { position: relative; }
.main-nav .menu-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.main-nav .menu-list a:hover::after,
.main-nav .menu-item.current-menu-item > a::after { transform: scaleX(1); }

/* Mega menu + mobile menu entrance */
@keyframes bravoDropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega.open { animation: bravoDropIn .22s ease both; }
@media (max-width: 720px) { .main-nav.open { animation: bravoDropIn .2s ease both; } }

/* Lazy images fade in as they decode */
img.bravo-img { opacity: 0; transition: opacity .6s ease; }
img.bravo-img.loaded, img.bravo-img[data-loaded="1"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
  html { scroll-behavior: auto; }
  html.bravo-js body { animation: none; }
  html.bravo-js :is(
    .hero > div, .section-head, .cat-index a, .pcard, .highlight,
    .split > *, .visit > *, .stat, .steps .step, .page-head > *,
    .service > *, .about-body > *, .store-intro
  ) { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pcard:hover .pcard-media .imgslot,
  .highlight:hover .highlight-media .imgslot { transform: none; }
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
  #bravo-progress span { transition: none; }
  img.bravo-img { opacity: 1; transition: none; }
}