/*
Theme Name:  Caffiero Child
Theme URI:   https://caffiero.gr
Author:      Caffiero Coffee Roasters
Description: Caffiero eshop theme — Astra Child. Premium specialty coffee, B2C & B2B, WooCommerce ready.
Version:     1.0.0
Template:    astra
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
Text Domain: caffiero-child
Tags:        woocommerce, e-commerce, astra-child, custom-colors, custom-logo
*/

/* ─── GOOGLE FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* ─── DESIGN TOKENS ────────────────────────────────────────────────── */
:root {
  --gold:        #C9933A;
  --gold-lt:     #E8C57A;
  --gold-dk:     #8B6020;
  --gold-pale:   #FDF5E8;
  --dark:        #1A1005;
  --espresso:    #2D1A08;
  --brown:       #5C3D1E;
  --sage:        #7A9E78;
  --cream:       #FAF7F2;
  --white:       #FFFFFF;
  --g100:        #F5F1EB;
  --g200:        #EDE8DF;
  --g300:        #D4CABF;
  --g500:        #8C7B6A;
  --g700:        #4A3F33;
  --border:      #E2D9CE;
  --shadow:      0 2px 14px rgba(26,16,5,.08);
  --shadow-lg:   0 8px 36px rgba(26,16,5,.15);
  --r:           6px;
  --r-lg:        12px;
  --tr:          .22s ease;
  --f-body:      'Inter', sans-serif;
  --f-display:   'Playfair Display', serif;
  --f-label:     'Inter', sans-serif;
  --max:         1380px;
  --gap:         28px;
}

/* ─── ASTRA OVERRIDES — Global ─────────────────────────────────────── */
body {
  font-family: var(--f-body) !important;
  font-size: 15px !important;
  color: var(--g700) !important;
  background: var(--white) !important;
  -webkit-font-smoothing: antialiased;
}

/* Astra typography overrides */
.ast-site-identity .site-title,
.ast-site-identity .site-title a { font-family: var(--f-display) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display) !important; color: var(--dark) !important; }
h1.uagb-image-heading, h2.uagb-image-heading, h3.uagb-image-heading, h4.uagb-image-heading, h5.uagb-image-heading, h6.uagb-image-heading { color: #ffffff !important; }
p, li, span, div { font-family: var(--f-body); }

/* ─── ASTRA HEADER OVERRIDES ───────────────────────────────────────── */
#masthead,
.site-header,
.ast-primary-header-bar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 12px rgba(26,16,5,.06) !important;
}

/* Logo */
.ast-site-identity .site-title a {
  font-family: var(--f-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.ast-site-identity .site-title a span { color: var(--gold); }
.ast-site-identity .site-description {
  font-family: var(--f-label) !important;
  font-size: 8.5px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--g500) !important;
}

/* Search */
.ast-search-menu-icon .search-field,
.ast-header-search .search-field {
  border: 1.5px solid var(--border) !important;
  border-radius: 40px !important;
  font-family: var(--f-body) !important;
  font-size: 13.5px !important;
  background: var(--g100) !important;
}
.ast-search-menu-icon .search-field:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,147,58,.12) !important;
}

/* ─── ASTRA NAV OVERRIDES ──────────────────────────────────────────── */
.main-navigation,
#site-navigation,
.ast-main-header-bar-alignment {
  background: var(--cream) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Nav links */
.main-navigation ul li a,
.ast-primary-nav ul li a,
#site-navigation ul li a {
  font-family: var(--f-label) !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--g700) !important;
  padding: 11px 17px !important;
  transition: color var(--tr) !important;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
  color: var(--gold) !important;
  background: transparent !important;
}

/* Dropdown */
.main-navigation ul ul {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--gold) !important;
  box-shadow: var(--shadow-lg) !important;
}
.main-navigation ul ul li a {
  font-size: 11.5px !important;
  border-bottom: 1px solid var(--g100) !important;
}

/* ─── ANNOUNCEMENT BAR ─────────────────────────────────────────────── */
.caffiero-announcement {
  background: var(--dark);
  color: var(--gold-lt);
  text-align: center;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.caffiero-announcement a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }
.caffiero-announcement .sep { opacity: .3; }

/* ─── ASTRA CONTENT AREA ───────────────────────────────────────────── */
.ast-container, .container, .ast-page-builder-template .entry-content {
  max-width: var(--max) !important;
}
.site-content { background: var(--white) !important; }

/* ─── ASTRA SIDEBAR ────────────────────────────────────────────────── */
.widget-area .widget,
#secondary .widget {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: none;
}
.widget-area .widget-title,
#secondary .widget-title {
  font-family: var(--f-label) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--g500) !important;
  margin-bottom: 14px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid var(--border) !important;
}
.widget-area ul li a { color: var(--g700) !important; font-size: 13.5px !important; }
.widget-area ul li a:hover { color: var(--gold) !important; }

/* ─── WOOCOMMERCE — SHOP PAGE ──────────────────────────────────────── */
/* Remove Astra's default WC styles that conflict */
.woocommerce-page .site-main { padding: 0 !important; }

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  float: none !important;
  margin: 0 0 36px !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--white) !important;
  overflow: hidden !important;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr) !important;
  padding: 0 0 16px !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(201,147,58,.4) !important;
}

/* Product image */
.woocommerce ul.products li.product a img {
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  transition: transform .4s ease !important;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04) !important; }

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--f-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  padding: 13px 16px 4px !important;
  line-height: 1.28 !important;
}

/* Product price */
.woocommerce ul.products li.product .price {
  font-family: var(--f-display) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  padding: 0 16px 4px !important;
  display: block !important;
}
.woocommerce ul.products li.product .price del { color: var(--g500) !important; font-size: 14px !important; }
.woocommerce ul.products li.product .price ins { text-decoration: none !important; color: #c0392b !important; }

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--dark) !important;
  color: var(--gold-lt) !important;
  font-family: var(--f-label) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 10px 16px !important;
  margin: 8px 16px 0 !important;
  display: block !important;
  width: calc(100% - 32px) !important;
  text-align: center !important;
  transition: background var(--tr) !important;
  cursor: pointer !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--gold) !important;
  color: #fff !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--gold) !important;
  color: #fff !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--gold-dk) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background: #c0392b !important;
  border-radius: 3px !important;
  font-family: var(--f-label) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  min-height: unset !important;
  min-width: unset !important;
  padding: 4px 10px !important;
  line-height: 1.5 !important;
  top: 10px !important;
  left: 10px !important;
}

/* Star ratings */
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before { color: var(--gold) !important; }

/* ─── WOOCOMMERCE — SINGLE PRODUCT ────────────────────────────────── */
.woocommerce div.product div.summary .price {
  font-family: var(--f-display) !important;
  font-size: 28px !important;
  color: var(--dark) !important;
}
.woocommerce div.product .product_title {
  font-family: var(--f-display) !important;
  font-size: clamp(26px, 3.5vw, 40px) !important;
  color: var(--dark) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--f-label) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-top-color: var(--gold) !important;
}

/* ─── WOOCOMMERCE — CART & CHECKOUT ───────────────────────────────── */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout {
  font-family: var(--f-body) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 10px 13px !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  outline: none !important;
}
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,147,58,.1) !important;
}
.woocommerce-message { border-top-color: var(--gold) !important; }
.woocommerce-error { border-top-color: #c0392b !important; }

/* ─── WOOCOMMERCE — PAGINATION ─────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--f-label) !important;
  font-size: 12px !important;
  border-color: var(--border) !important;
  color: var(--g700) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

/* ─── ASTRA BREADCRUMB ─────────────────────────────────────────────── */
.ast-breadcrumbs-wrapper,
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--f-body) !important;
  font-size: 12.5px !important;
  color: var(--g500) !important;
  background: var(--g100) !important;
  padding: 9px 0 !important;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--g500) !important; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--gold) !important; }

/* ─── ASTRA FOOTER OVERRIDES ───────────────────────────────────────── */
.site-footer,
#colophon,
.ast-footer-overlay {
  background: var(--dark) !important;
  color: rgba(255,255,255,.55) !important;
}
.site-footer .widget-title,
#colophon .widget-title {
  font-family: var(--f-label) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}
.site-footer ul li a,
#colophon ul li a {
  color: rgba(255,255,255,.45) !important;
  font-size: 13px !important;
}
.site-footer ul li a:hover,
#colophon ul li a:hover { color: var(--gold) !important; }
.ast-footer-copyright {
  font-size: 12px !important;
  color: rgba(255,255,255,.28) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

/* ─── SHOP TOPBAR (Astra ordering dropdown) ────────────────────────── */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  color: var(--g700) !important;
  padding: 8px 32px 8px 12px !important;
  outline: none !important;
}
.woocommerce-result-count {
  font-size: 13.5px !important;
  color: var(--g500) !important;
  font-family: var(--f-body) !important;
}

/* ─── B2B BANNER ───────────────────────────────────────────────────── */
.caffiero-b2b-banner {
  background: linear-gradient(135deg, var(--espresso) 0%, #180c02 100%);
  padding: 56px var(--gap);
  position: relative;
  overflow: hidden;
}
.caffiero-b2b-banner::before {
  content: 'B2B';
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-size: 200px; font-weight: 700;
  color: rgba(201,147,58,.05); line-height: 1; pointer-events: none;
}
.b2b-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.b2b-eyebrow { font-family: var(--f-label); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.caffiero-b2b-banner h2 { font-family: var(--f-display); font-size: clamp(24px,3vw,38px); color: #fff; margin-bottom: 10px; }
.caffiero-b2b-banner p { color: rgba(255,255,255,.6); font-size: 15px; max-width: 500px; margin-bottom: 24px; }
.b2b-features { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-width: 260px; }
.b2b-feat { background: rgba(255,255,255,.04); border: 1px solid rgba(201,147,58,.18); border-radius: var(--r); padding: 9px 13px; font-family: var(--f-label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt); display: flex; align-items: center; gap: 7px; }
.b2b-feat::before { content: '✓'; color: var(--gold); font-size: 11px; }

/* ─── BUTTONS ──────────────────────────────────────────────────────── */
.btn-caffiero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; font-family: var(--f-label);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--r); cursor: pointer; border: 2px solid transparent;
  line-height: 1; transition: all var(--tr); white-space: nowrap;
}
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-dk); border-color: var(--gold-dk); color: #fff; transform: translateY(-1px); }
.btn-dark-c { background: var(--dark); color: var(--gold-lt); border-color: var(--dark); }
.btn-dark-c:hover { background: var(--espresso); color: var(--gold-lt); }

/* ─── USP STRIP ────────────────────────────────────────────────────── */
.caffiero-usp { background: var(--dark); padding: 0; }
.usp-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gap); display: grid; grid-template-columns: repeat(4,1fr); }
.usp-item { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-right: 1px solid rgba(255,255,255,.06); }
.usp-item:last-child { border-right: none; }
.usp-item svg { width: 26px; height: 26px; color: var(--gold); stroke-width: 1.5; flex-shrink: 0; }
.usp-item strong { display: block; font-family: var(--f-label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.usp-item span { font-size: 12px; color: rgba(255,255,255,.42); }

/* ─── INTENSITY BAR ────────────────────────────────────────────────── */
.intensity-row { display: flex; align-items: center; gap: 8px; margin: 8px 16px; }
.intensity-label { font-family: var(--f-label); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--g500); white-space: nowrap; }
.intensity-dots { display: flex; gap: 2.5px; }
.intensity-dots span { width: 16px; height: 4px; border-radius: 2px; background: var(--g200); }
.intensity-dots span.on { background: var(--gold); }

/* ─── MOBILE ───────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .usp-grid { grid-template-columns: repeat(2,1fr); }
  .b2b-inner { grid-template-columns: 1fr; }
  .caffiero-b2b-banner::before { display: none; }
}

@media (max-width: 600px) {
  .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
  .usp-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── MITSOS ─────────────────────────────────────── */

/* Global rendering improvement */
body {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* Greek typography fix */
:lang(el) {
  letter-spacing: 0.02em;
  font-weight: 400;
}