/*
Theme Name: Anastasia's Kouzina
Theme URI: https://www.anastasiaskouzina.com.au/
Author: EWM (migrated from Shopify)
Description: Custom WooCommerce theme replicating the Anastasia's Kouzina Shopify storefront. Design tokens, typography and layout values captured directly from the live site's computed styles.
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: anastasias-kouzina
*/

/* =====================================================================
   DESIGN TOKENS  —  captured verbatim from live site computed styles
   ===================================================================== */
:root {
  /* Colour palette */
  --ak-text:          #131313;          /* body + heading text (near-black) */
  --ak-bg:            #ffffff;          /* page background */
  --ak-bg-dark:       #f2f2f2;          /* secondary / section background */
  --ak-brand:         #997a3b;          /* primary brand gold-bronze */
  --ak-brand-light:   #ab8942;
  --ak-brand-dark:    #876b34;
  --ak-link:          #d7c196;          /* link gold (lighter) */
  --ak-header-bg:     #d5ecf2;          /* header pale blue */
  --ak-sale:          #C00000;          /* sale / low-stock red */
  --ak-btn-text:      #ffffff;          /* button text */
  --ak-bg-alpha:      rgba(255,255,255,0.8);
  --ak-drop-shadow:   rgba(0,0,0,0.08);

  /* Typography */
  --ak-font:          'Jost', sans-serif;   /* single family across the whole site */
  --ak-fs-base:       16px;
  --ak-lh-base:       30px;
  --ak-fw-body:       300;
  --ak-fw-heading:    400;
  --ak-ls-heading:    1px;
  --ak-fs-h1:         29px;
  --ak-fs-h2:         23px;
  --ak-fs-h3:         20px;
  --ak-fs-h4:         18px;
  --ak-fs-h5:         16px;
  --ak-fs-h6:         15px;
  --ak-fs-nav:        14px;
  --ak-fs-btn:        18px;
  --ak-ls-btn:        2px;

  /* Layout */
  --ak-page-max:      1400px;   /* standard content width */
  --ak-page-wide:     2200px;   /* full-bleed bands (Instagram) */
  --ak-page-pad:      30px;     /* side gutter */
  --ak-gap-collection:24px;     /* 3-up collection row gap */
  --ak-gap-products:  15px;     /* product grid column gap */
  --ak-radius-img:    4px;
  --ak-announcement-h:49px;
}

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ak-font);
  font-size: var(--ak-fs-base);
  line-height: var(--ak-lh-base);
  font-weight: var(--ak-fw-body);
  color: var(--ak-text);
  background: var(--ak-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ak-brand); }

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
h1, h2, h3, h4, h5, h6, .ak-title {
  font-family: var(--ak-font);
  font-weight: var(--ak-fw-heading);
  letter-spacing: var(--ak-ls-heading);
  color: var(--ak-text);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--ak-fs-h1); line-height: 1.2; }
h2 { font-size: var(--ak-fs-h2); line-height: 1.6; }
h3 { font-size: var(--ak-fs-h3); }
h4 { font-size: var(--ak-fs-h4); }
h5 { font-size: var(--ak-fs-h5); }
h6 { font-size: var(--ak-fs-h6); }
p  { margin: 0 0 1em; }

/* Section heading style: centred with the brand-gold underline rule
   (the live theme uses --color--title-border #997a3b at 2px) */
.ak-section-title {
  text-align: center;
  margin-bottom: 1.5rem;
}
.ak-section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--ak-brand);
  margin: 0.6rem auto 0;
}

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.ak-page-width {
  max-width: var(--ak-page-max);
  margin-inline: auto;
  padding-inline: var(--ak-page-pad);
  width: 100%;
}
.ak-page-width--wide { max-width: var(--ak-page-wide); }

.ak-section { padding-block: 48px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.ak-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-block;
  font-family: var(--ak-font);
  font-size: var(--ak-fs-btn);
  font-weight: var(--ak-fw-heading);
  letter-spacing: var(--ak-ls-btn);
  text-transform: none;
  line-height: 1;
  color: var(--ak-btn-text);
  background: var(--ak-brand);
  border: none;
  border-radius: 0;
  padding: 14px 28px;
  cursor: pointer;
  transition: background .2s ease;
}
.ak-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--ak-brand-dark); color: var(--ak-btn-text); }

.ak-btn--outline {
  background: transparent;
  color: var(--ak-text);
  border: 2px solid var(--ak-brand);
}
.ak-btn--outline:hover { background: var(--ak-brand); color: var(--ak-btn-text); }

/* =====================================================================
   ANNOUNCEMENT BAR  (49px, dark text)
   ===================================================================== */
.ak-announcement {
  min-height: var(--ak-announcement-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: .5px;
  text-align: center;
  background: #212121;          /* live announcement bar charcoal */
  color: #ffffff;
}
.ak-announcement .ak-page-width { text-align: center; }

/* =====================================================================
   HEADER  (pale-blue band #d5ecf2, ~207px tall with logo + nav)
   ===================================================================== */
.ak-header { background: var(--ak-header-bg); }
.ak-header__inner { padding-block: 18px; }

/* top row: logo centred, icons pinned right */
.ak-header__top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}
.ak-header__logo { text-align: center; }
.ak-header__logo img { max-width: 285px; height: auto; }   /* --header-logo-width */
.ak-header__actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
}

/* nav row: centred under the logo */
.ak-header__nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;                                  /* --font--nav-spacing */
  list-style: none;
  margin: 0; padding: 8px 0 0;
}
.ak-header__nav a {
  font-size: var(--ak-fs-nav);
  font-weight: var(--ak-fw-body);
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* =====================================================================
   HERO SLIDESHOW  (~588px)
   ===================================================================== */
.ak-hero {
  position: relative;
  min-height: 588px;
  display: flex;
  align-items: center;
  background-color: var(--ak-header-bg);   /* fallback before a hero image is set */
  background-size: cover;
  background-position: center;
}
.ak-hero__content {
  max-width: var(--ak-page-max);
  margin-inline: auto;
  padding-inline: var(--ak-page-pad);
  width: 100%;
}
/* left-aligned translucent overlay card, as on the live site */
.ak-hero__card {
  background: rgba(255, 255, 255, 0.8);
  padding: 40px 44px;
  max-width: 520px;
}
.ak-hero__title {
  font-size: clamp(28px, 3vw, 40px);
  color: var(--ak-brand);
  margin-bottom: 18px;
}
.ak-hero__card .ak-hero__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--ak-brand);
  margin-top: 14px;
}
.ak-hero__text { margin-bottom: 24px; }
@media (max-width: 600px) { .ak-hero__card { max-width: none; } }

/* =====================================================================
   3-UP COLLECTION ROW  (flex, 24px gap, e.g. Catering / Bakery / Hampers)
   ===================================================================== */
.ak-collection-row {
  display: flex;
  gap: var(--ak-gap-collection);
  flex-wrap: wrap;
}
.ak-collection-row > * { flex: 1 1 0; min-width: 240px; }
.ak-collection-card { position: relative; overflow: hidden; border-radius: var(--ak-radius-img); }
.ak-collection-card img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.ak-collection-card__label {
  position: absolute; inset: auto 0 0 0;
  padding: 16px; text-align: center;
  color: #fff; font-size: var(--ak-fs-h3); font-weight: var(--ak-fw-heading);
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}

/* =====================================================================
   FEATURED PRODUCTS GRID  (4-up, 15px column gap; seasonal section)
   ===================================================================== */
.ak-products {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--ak-gap-products);
  row-gap: 32px;
}
.ak-products > * { flex: 0 0 calc(25% - (var(--ak-gap-products) * 3 / 4)); }
.ak-product__img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border-radius: var(--ak-radius-img); }
.ak-product__title { font-size: var(--ak-fs-h5); font-weight: var(--ak-fw-body); margin: 12px 0 4px; }
.ak-product__price { color: var(--ak-text); font-weight: var(--ak-fw-heading); }
.ak-product__price del { color: var(--ak-text); opacity: .5; font-weight: var(--ak-fw-body); }
.ak-product__price ins { color: var(--ak-sale); text-decoration: none; }

/* =====================================================================
   BUILD YOUR OWN HAMPER  (image + text block, ~510px)
   ===================================================================== */
.ak-hamper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.ak-hamper__media img { width: 100%; height: 100%; object-fit: cover; }
.ak-hamper__text {
  background: var(--ak-header-bg);
  padding: 48px;
}
@media (max-width: 800px) { .ak-hamper { grid-template-columns: 1fr; } }

/* =====================================================================
   TESTIMONIALS  ("What our customers are saying")
   ===================================================================== */
.ak-testimonials { background: var(--ak-bg-dark); text-align: center; }
.ak-testimonials__quote { max-width: 56ch; margin-inline: auto; font-size: var(--ak-fs-h4); }

/* =====================================================================
   INSTAGRAM BAND  (wider — up to 2200px)
   ===================================================================== */
.ak-instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.ak-instagram-grid img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
@media (max-width: 900px) { .ak-instagram-grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   FOOTER  ("More info")
   ===================================================================== */
.ak-footer {
  background: var(--ak-bg);
  border-top: 1px solid var(--ak-bg-dark);
  padding-block: 48px;
}
.ak-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}
.ak-footer h4 { font-size: var(--ak-fs-h5); letter-spacing: 1px; }
.ak-footer a { font-weight: var(--ak-fw-body); }
.ak-footer a:hover { color: var(--ak-brand); }

/* =====================================================================
   RESPONSIVE: collapse product grid to 2-up on narrow screens
   ===================================================================== */
@media (max-width: 749px) {
  .ak-products > * { flex: 0 0 calc(50% - (var(--ak-gap-products) / 2)); }
}

/* === homepage polish (v1.0.5) === */
.ak-header__top { min-height: 72px; }
.ak-header__nav ul { padding-top: 4px; }
.ak-hero__card { padding: 32px 36px; }
.ak-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 940px;
  margin: 0 auto;
}
.ak-testimonial { margin: 0; }
.ak-testimonial blockquote { margin: 0 0 14px; font-style: italic; font-size: 17px; line-height: 1.7; color: var(--ak-text); }
.ak-testimonial figcaption { font-weight: 400; letter-spacing: 1px; color: var(--ak-brand); text-transform: uppercase; font-size: 14px; }
@media (max-width: 700px){ .ak-testimonials__grid { grid-template-columns: 1fr; } }

/* === live-match: section titles are gold #997a3b ~28px on live === */
.ak-section-title { color: var(--ak-brand); font-size: 28px; }

/* === live-match: rotating announcement bar === */
.ak-announcement__bar { display:flex; align-items:center; justify-content:center; gap:16px; min-height:38px; }
.ak-announcement__track { flex:0 1 auto; text-align:center; }
.ak-announcement__msg { display:none; }
.ak-announcement__msg.is-active { display:block; }
.ak-announcement__msg a { color:#fff; text-decoration:underline; }
.ak-announcement__arrow { background:none; border:0; color:#fff; font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; opacity:.75; }
.ak-announcement__arrow:hover { opacity:1; }

/* === live-match: header icon actions === */
.ak-icon { color:var(--ak-text); display:inline-flex; align-items:center; position:relative; }
.ak-icon:hover { color:var(--ak-brand); }
.ak-cart-count { position:absolute; top:-7px; right:-9px; background:var(--ak-brand); color:#fff; font-size:10px; line-height:1; border-radius:10px; padding:2px 5px; }

/* === live-match: Authentic Greek Fine Foods band === */
.ak-band__inner { display:flex; gap:44px; align-items:center; }
.ak-band__media { flex:1 1 50%; }
.ak-band__media img { width:100%; height:auto; display:block; }
.ak-band__text { flex:1 1 50%; }
.ak-band__text p { margin:14px 0 24px; }
@media (max-width:768px){ .ak-band__inner { flex-direction:column; gap:24px; } }