/*
Theme Name: Agape Tewahdo
Theme URI: https://agapetewahdogift.com
Author: Agape Tewahdo Gift
Description: Three templates and nothing else — the home page, the WooCommerce product page and the blog. Header and footer are separate files. Product grids pull live from WooCommerce. No setup step: activate it and all three work.
Version: 2.8.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agape
Tags: e-commerce, blog, custom-logo, custom-menu, featured-images, translation-ready
*/

/* -----------------------------------------------------------------------
   Everything below is the Agape design system. Edit the TOKENS block to
   change colours, fonts and spacing across the whole site at once.
   ----------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. TOKENS
   Change a value here and it changes everywhere on the site.
   --------------------------------------------------------------------------- */
.agp,
.agp-scope {
  /* Primary palette — brand guidelines p.13 */
  --agape-red:        #9A1D22;
  --agape-gold:       #F6981F;
  --agape-black:      #000000;

  /* Secondary palette — brand guidelines p.14 */
  --agape-sky:        #0492F8;
  --agape-parchment:  #FDF0A1;
  --agape-oxblood:    #552018;

  /* Interaction states (derived) */
  --agape-red-hover:  #B02329;
  --agape-red-press:  #7A161A;
  --agape-gold-hover: #FFAA3D;
  --agape-gold-press: #D97F10;

  /* Warm neutral ramp */
  --n-000: #FFFFFF;
  --n-050: #FBF8F4;
  --n-100: #F3EDE6;
  --n-200: #E4DBD1;
  --n-300: #CBBFB3;
  --n-500: #8C7F75;
  --n-700: #4A403A;
  --n-900: #1A1512;

  /* Semantic */
  --surface-page:       var(--n-050);
  --surface-card:       var(--n-000);
  --surface-sunken:     var(--n-100);
  --surface-brand-soft: #F7E9E6;
  --text-body:          var(--n-900);
  --text-muted:         var(--n-500);
  --text-brand:         var(--agape-red);
  --border-hairline:    var(--n-200);
  --status-success:     #3F7A46;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--agape-red) 0%, var(--agape-oxblood) 60%, var(--agape-black) 100%);
  --gradient-light: linear-gradient(135deg, var(--agape-gold) 0%, var(--agape-red) 100%);

  /* Type */
  --font-display:  "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --font-sans:     "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ethiopic: "Noto Sans Ethiopic", sans-serif;
  --tracking-caps: .14em;

  /* Fluid display sizes — these are why the site never needs a mobile rewrite */
  --size-display-1: clamp(44px, 8vw, 96px);
  --size-display-2: clamp(40px, 7vw, 72px);
  --size-display-3: clamp(32px, 5.4vw, 56px);
  --size-heading-1: clamp(26px, 3.6vw, 40px);
  --size-heading-2: clamp(22px, 2.6vw, 30px);
  --size-heading-3: 22px;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  /* Shape */
  --radius-1: 2px;  --radius-2: 6px;  --radius-3: 10px;  --radius-4: 16px;
  --radius-pill: 999px;
  --rule-width: 3px;
  --shadow-raised:  0 1px 2px rgba(26,21,18,.08);
  --shadow-overlay: 0 18px 48px rgba(26,21,18,.22);
  --shadow-focus:   0 0 0 3px rgba(246,152,31,.55);

  --container: 1200px;
  --pad-x: clamp(20px, 4vw, 40px);
  --transition: 160ms cubic-bezier(.2,.6,.35,1);
}

/* ---------------------------------------------------------------------------
   2. SCOPE RESET
   Applies only inside .agp blocks, so the rest of your WordPress site is
   untouched.
   --------------------------------------------------------------------------- */
.agp, .agp * { box-sizing: border-box; }

.agp {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--surface-card);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.agp img, .agp svg { max-width: 100%; }
.agp p { margin: 0; }
.agp ul { margin: 0; padding: 0; list-style: none; }

.agp h1, .agp h2, .agp h3, .agp h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.agp h1 { font-size: var(--size-display-3); }
.agp h2 { font-size: var(--size-heading-1); }
.agp h3 { font-size: var(--size-heading-3); }

.agp a { color: var(--text-brand); text-decoration: none; transition: color var(--transition); }
.agp a:hover { color: var(--agape-red-hover); }
.agp :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-1); }

/* Utility for any Ge'ez text you type into a page, product or post. The site
   itself is English only — there is no language switcher. */
.agp-amharic { font-family: var(--font-ethiopic); line-height: 1.75; }

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.agp-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.agp-section { padding-block: clamp(40px, 6vw, 72px); }
.agp-section--tight { padding-block: clamp(28px, 4vw, 48px); }
.agp-section--flush-top { padding-top: 0; }

.agp-grid { display: grid; gap: var(--space-4); }
.agp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.agp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.agp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.agp-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.agp-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   4. PATTERN BANDS
   --------------------------------------------------------------------------- */
.agp-band-braid {
  height: 26px;
  background: url("assets/patterns/braid-band.svg") repeat-x center / auto 100%;
}
.agp-band-thorn {
  /*
   * The Yeshoh Aklil (Crown of Thorns) emblem, white so it reads against the
   * red-to-black hero gradient it sits on. It replaces the abstract woven
   * line pattern this band used to tile — same technique, real artwork.
   */
  height: 52px;
  background: url("assets/patterns/aklil-band.svg") repeat-x center / auto 100%;
  opacity: .92;
}

/* Red rule that sits under every section heading — the brand's signature move */
.agp-rule { height: var(--rule-width); background: var(--agape-red); border: 0; margin: 0; }

/* ---------------------------------------------------------------------------
   5. TYPE ROLES
   --------------------------------------------------------------------------- */
.agp-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.agp-eyebrow--gold  { color: var(--agape-gold); }
.agp-eyebrow--brand { color: var(--text-brand); }
.agp-eyebrow--light { color: rgba(255,255,255,.6); }

.agp-lede    { font-size: 18px; line-height: 1.6; }
.agp-body-sm { font-size: 14px; line-height: 1.6; }
.agp-caption { font-size: 12px; line-height: 1.4; }
.agp-muted   { color: var(--text-muted); }
.agp-measure { max-width: 46ch; }

.agp-display-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 1; color: var(--agape-gold);
}

/* Section head: eyebrow + title + optional action, then the red rule */
.agp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.agp-head__text { display: flex; flex-direction: column; gap: var(--space-2); }
.agp-head + .agp-rule { margin-bottom: var(--space-6); }

/* ---------------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------------- */
.agp .agp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 12px 20px;
  font-family: var(--font-sans); font-size: 16px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius-2);
  cursor: pointer; text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform 80ms ease;
}
.agp .agp-btn:active { transform: translateY(1px); }

.agp .agp-btn--primary   { background: var(--agape-red); color: #fff; }
.agp .agp-btn--primary:hover   { background: var(--agape-red-hover); color: #fff; }
.agp .agp-btn--primary:active  { background: var(--agape-red-press); }

.agp .agp-btn--secondary { background: var(--agape-gold); color: var(--agape-oxblood); }
.agp .agp-btn--secondary:hover  { background: var(--agape-gold-hover); color: var(--agape-oxblood); }
.agp .agp-btn--secondary:active { background: var(--agape-gold-press); }

.agp .agp-btn--outline   { background: transparent; color: var(--text-brand); border: 2px solid var(--agape-red); }
.agp .agp-btn--outline:hover    { background: var(--surface-brand-soft); color: var(--text-brand); }

.agp .agp-btn--inverse   { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.agp .agp-btn--inverse:hover    { background: rgba(255,255,255,.14); color: #fff; }

.agp .agp-btn--ghost     { background: transparent; color: var(--text-body); }
.agp .agp-btn--ghost:hover      { background: var(--surface-sunken); }

.agp .agp-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 14px; }
.agp .agp-btn--lg { min-height: 52px; padding: 16px 28px; font-size: 18px; }
.agp .agp-btn--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------------------
   7. CARD / BADGE / TAG
   --------------------------------------------------------------------------- */
.agp .agp-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  padding: var(--space-5);
}
.agp .agp-card--flush { padding: 0; overflow: hidden; }
.agp .agp-card--sunken { background: var(--surface-sunken); }
.agp .agp-card--link { color: var(--text-body); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.agp .agp-card--link:hover { border-color: var(--agape-red); box-shadow: var(--shadow-raised); transform: translateY(-2px); }

.agp-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--radius-1);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.agp-badge--brand   { background: var(--agape-red); color: #fff; }
.agp-badge--accent  { background: var(--agape-gold); color: var(--agape-oxblood); }
.agp-badge--inverse { background: var(--agape-black); color: #fff; }
.agp-badge--soft    { background: var(--surface-brand-soft); color: var(--text-brand); }

.agp .agp-tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline); background: var(--surface-card);
  font-size: 13px; color: var(--text-body); cursor: pointer;
  transition: all var(--transition);
}
.agp .agp-tag:hover { border-color: var(--agape-red); color: var(--text-brand); }
.agp .agp-tag--on { background: var(--agape-red); border-color: var(--agape-red); color: #fff; }
.agp .agp-tag--on:hover { color: #fff; }

.agp-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-pill);
  background: var(--surface-brand-soft); color: var(--text-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}

/* ---------------------------------------------------------------------------
   8. FORMS
   --------------------------------------------------------------------------- */
.agp-field { display: flex; flex-direction: column; gap: 6px; }
.agp-label { font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.agp-label .agp-req { color: var(--agape-red); }

.agp-input, .agp-select, .agp-textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font-family: var(--font-sans); font-size: 16px; color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-2);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.agp-textarea { min-height: 120px; padding-top: 12px; resize: vertical; }
.agp-input::placeholder, .agp-textarea::placeholder { color: var(--n-300); }
.agp-input:focus, .agp-select:focus, .agp-textarea:focus {
  outline: none; border-color: var(--agape-red); box-shadow: var(--shadow-focus);
}
.agp-hint { font-size: 12px; color: var(--text-muted); }

.agp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.agp-check input { width: 16px; height: 16px; accent-color: var(--agape-red); }

/* ---------------------------------------------------------------------------
   9. HEADER
   --------------------------------------------------------------------------- */
.agp-header { position: sticky; top: 0; z-index: 30; background: var(--surface-card); }

.agp-topbar {
  background: var(--agape-black); color: #fff;
  padding: 8px var(--pad-x);
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-size: 12px;
  text-align: center;
}
.agp-topbar__note { color: rgba(255,255,255,.75); }


.agp-bar { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--pad-x); }

/* The logo files are complete lockups — the wordmark is part of the artwork,
   so nothing is typeset alongside them. Height drives the size; width follows
   the 2.64:1 aspect ratio of the cropped viewBox. */
.agp-logo { color: inherit; display: flex; align-items: center; flex: 0 0 auto; }
.agp-logo img { height: 46px; width: auto; display: block; }

.agp-nav { display: flex; gap: var(--space-5); flex: 1; }
.agp-nav a {
  font-size: 13px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-body); padding-bottom: 4px; border-bottom: 3px solid transparent;
}
.agp-nav a:hover { color: var(--text-brand); }
.agp-nav a.is-on { color: var(--text-brand); font-weight: 700; border-bottom-color: var(--agape-red); }

.agp-search { width: 220px; flex: 0 0 auto; position: relative; }
.agp-search .agp-input { padding-left: 38px; min-height: 40px; font-size: 14px; }
.agp-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: flex; }

.agp-icons { display: flex; align-items: center; gap: var(--space-1); }
.agp-iconbtn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-2);
  background: transparent; color: var(--text-body); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.agp-iconbtn:hover { background: var(--surface-sunken); color: var(--text-brand); }
/* Telegram's own brand blue, so this icon reads as "Telegram" at a glance
   rather than blending into the neutral account/cart icons beside it. */
.agp-iconbtn.agp-telegram { color: #29A9EA; }
.agp-iconbtn.agp-telegram:hover { background: rgba(41,169,234,.12); color: #229ED9; }
.agp-cart { position: relative; display: inline-flex; }
.agp-cart__count {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--agape-red); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.agp-burger { display: none; }

/* ---------------------------------------------------------------------------
   10. HERO
   --------------------------------------------------------------------------- */
.agp-hero { position: relative; background: var(--gradient-brand); color: #fff; overflow: hidden; }
.agp-hero h1 { font-size: var(--size-display-2); line-height: .92; }
.agp-hero__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-7); align-items: center;
  padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 72px);
}
.agp-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.agp-hero p { color: rgba(255,255,255,.85); max-width: 40ch; }
/* An uploaded hero image. No background so transparent PNGs show the gradient
   behind them, and no cropping so the image keeps its own aspect ratio. */
.agp-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: center;
  background: none;
  border: 0;
  border-radius: 0;
}
@media (max-width: 860px) {
  .agp-hero__img { max-height: 360px; }
}

/* Continuously scrolling category ticker. The track holds two copies of the
   list, so sliding it exactly half its width lands back where it started and
   the loop is seamless. */
.agp-hero__ticker {
  border-top: 1px solid rgba(255,255,255,.16);
  padding: 14px 0;
  overflow: hidden;
  font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: rgba(255,255,255,.7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.agp-hero__ticker-track {
  display: flex;
  width: max-content;
  animation: agp-ticker 45s linear infinite;
}
.agp-hero__ticker-set { display: flex; gap: 28px; padding-right: 28px; }
.agp-hero__ticker a {
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--transition);
}
.agp-hero__ticker a:hover { color: var(--agape-gold); }
.agp-hero__ticker:hover .agp-hero__ticker-track { animation-play-state: paused; }

@keyframes agp-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Anyone who has asked their system to reduce motion gets a still, scrollable
   row instead of a moving one. */
@media (prefers-reduced-motion: reduce) {
  .agp-hero__ticker-track { animation: none; }
  .agp-hero__ticker { overflow-x: auto; }
}

/* Dark full-bleed section (story hero, CTA) */
.agp-dark { background: var(--agape-black); color: #fff; }
.agp-dark h1, .agp-dark h2, .agp-dark h3 { color: #fff; }
.agp-dark p { color: rgba(255,255,255,.8); }
.agp-dark .agp-muted { color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------------------
   11. MEDIA PLACEHOLDER
   Swap each .agp-media for an <img> once real photography exists.
   --------------------------------------------------------------------------- */
.agp-media {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 220px; padding: 0 12px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  background: repeating-linear-gradient(135deg, #EFE7DD 0 10px, #F6F0E8 10px 20px);
  border-radius: var(--radius-2);
}
.agp-media--red {
  color: rgba(255,255,255,.7);
  background: repeating-linear-gradient(135deg, #8E1A1F 0 10px, #9A1D22 10px 20px);
}
.agp-media--tall { min-height: 340px; }
.agp-media--sq   { aspect-ratio: 1 / 1; min-height: 0; }
.agp-media--wide { aspect-ratio: 4 / 3; min-height: 0; }
.agp-media--fill { height: 100%; border-radius: 0; }
.agp-media--ring { border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-3); }

/* ---------------------------------------------------------------------------
   12. PRODUCT CARD
   --------------------------------------------------------------------------- */
.agp-product { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.agp-product__media { position: relative; }
.agp-product__media .agp-media { border-radius: 0; min-height: 220px; }
.agp-product__badge { position: absolute; top: 12px; left: 12px; }
.agp-product__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.agp-product__cat { font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.agp-product__name { font-size: 20px; }
.agp-product__name a { color: inherit; }
.agp-product__name a:hover { color: var(--text-brand); }
.agp-product__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }
.agp-price { font-family: var(--font-sans); font-weight: 500; font-size: 16px; }
.agp-price--lg { font-size: 30px; font-weight: 500; }

/* ---------------------------------------------------------------------------
   13. SPLIT PANEL (the red "build a package" block)
   --------------------------------------------------------------------------- */
.agp-split {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-3); overflow: hidden;
  background: var(--agape-red); color: #fff;
}
.agp-split__copy { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; padding: clamp(28px, 4vw, 48px); }
.agp-split h2 { color: #fff; }
.agp-split p { color: rgba(255,255,255,.85); max-width: 44ch; }
.agp-split__mark { height: 64px; width: auto; }
/* The panel image fills its half of the block whatever shape it is. */
.agp-split__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 860px) {
  .agp-split__img { min-height: 240px; }
}

.agp-stats { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.agp-stat { display: flex; flex-direction: column; gap: 2px; }
.agp-stat__n { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--agape-gold); }
.agp-stat__l { font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(255,255,255,.7); }
.agp-stat--lg .agp-stat__n { font-size: 48px; color: #fff; }

/* ---------------------------------------------------------------------------
   14. TESTIMONIALS
   --------------------------------------------------------------------------- */
.agp-quote { display: flex; flex-direction: column; gap: var(--space-4); }
.agp-quote__mark { font-family: var(--font-display); font-size: 48px; line-height: .5; color: var(--agape-red); height: 24px; }
.agp-quote__who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.agp-quote__name { font-size: 14px; font-weight: 500; }

/* ---------------------------------------------------------------------------
   15. SHOP LAYOUT
   --------------------------------------------------------------------------- */
.agp-shop { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); align-items: start; }
.agp-filters { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 150px; }
.agp-filters__group { display: flex; flex-direction: column; gap: var(--space-3); }
.agp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.agp-crumbs { display: flex; gap: 8px; font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); }
.agp-crumbs a { color: var(--text-muted); }
.agp-crumbs a:hover { color: var(--text-brand); }

/* ---------------------------------------------------------------------------
   16. PRODUCT DETAIL
   --------------------------------------------------------------------------- */
.agp-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.agp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-2); }
.agp-spec { display: flex; justify-content: space-between; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--border-hairline); font-size: 14px; }
.agp-spec dt { color: var(--text-muted); }
.agp-spec dd { margin: 0; font-weight: 500; text-align: right; }
.agp-qty { display: flex; align-items: center; border: 1px solid var(--border-hairline); border-radius: var(--radius-2); overflow: hidden; }
.agp-qty button { width: 40px; height: 44px; border: 0; background: var(--surface-card); font-size: 18px; cursor: pointer; color: var(--text-body); }
.agp-qty button:hover { background: var(--surface-sunken); }
.agp-qty input { width: 48px; height: 44px; border: 0; text-align: center; font-family: var(--font-sans); font-size: 16px; }

/* ---------------------------------------------------------------------------
   17. CONTACT
   --------------------------------------------------------------------------- */
.agp-contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-6); align-items: start; }
.agp-detail { display: flex; gap: var(--space-3); align-items: flex-start; }
.agp-detail__icon { color: var(--agape-red); margin-top: 2px; display: flex; flex: 0 0 auto; }
.agp-detail__text { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------------------------- */
.agp-footer { background: var(--agape-black); color: #fff; }
.agp-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); padding-block: var(--space-7); }
.agp-footer a { color: rgba(255,255,255,.75); font-size: 14px; }
.agp-footer a:hover { color: var(--agape-gold); }
.agp-footer p, .agp-footer span { color: rgba(255,255,255,.7); }
.agp-footer h4 { color: var(--agape-gold); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.agp-footer__col { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.agp-footer__logo img { height: 50px; width: auto; }
.agp-footer .agp-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: #fff; }
.agp-footer .agp-input::placeholder { color: rgba(255,255,255,.45); }
.agp-social { display: flex; gap: 12px; margin-top: 4px; }
.agp-social a { display: inline-flex; }
.agp-legal {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: var(--space-4);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.55);
}
.agp-newsletter { display: flex; gap: 8px; width: 100%; max-width: 340px; }

/* ---------------------------------------------------------------------------
   19. RESPONSIVE
   Three breakpoints, matching Elementor's own tablet/mobile stops.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .agp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .agp-hero__inner { grid-template-columns: 1fr; }
  .agp-shop { grid-template-columns: 1fr; }
  .agp-filters { position: static; }
  .agp-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .agp-search { display: none; }
  .agp-nav { gap: var(--space-4); }
}

@media (max-width: 860px) {
  .agp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .agp-pdp, .agp-contact, .agp-split { grid-template-columns: 1fr; }
  .agp-split { border-radius: var(--radius-3); }

  /* Header collapses to a checkbox-driven drawer — no JavaScript required */
  .agp-burger { display: inline-flex; }
  .agp-bar { flex-wrap: wrap; gap: var(--space-4); }
  .agp-nav {
    order: 10; flex-basis: 100%; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height var(--transition);
  }
  .agp-nav a { padding: 12px 0; border-bottom: 1px solid var(--border-hairline); width: 100%; }
  .agp-nav a.is-on { border-bottom-color: var(--agape-red); }
  .agp-menu-toggle:checked ~ .agp-bar .agp-nav { max-height: 320px; }
  .agp-topbar { flex-direction: column; gap: 4px; text-align: center; }
}

@media (max-width: 620px) {
  .agp-grid--2, .agp-grid--3, .agp-grid--4 { grid-template-columns: 1fr; }
  .agp-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .agp-footer__grid { grid-template-columns: 1fr; }
  .agp-stats { gap: var(--space-5); }
  .agp .agp-btn--block-mobile { display: flex; width: 100%; }
  .agp-hero__copy .agp-row { width: 100%; }
  .agp-hero__copy .agp-row .agp-btn { flex: 1 1 100%; }
  .agp-legal { flex-direction: column; gap: 8px; }
}

/* The checkbox that drives the mobile menu is never visible */
.agp-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------------------
   20. ELEMENTOR COMPATIBILITY
   Elementor's containers add their own padding and constrain width. These
   rules let a full-bleed band (hero, footer, dark section) escape it.
   Add the CSS class `agp-fullbleed` to the Elementor container.
   --------------------------------------------------------------------------- */
.agp-fullbleed { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.elementor-widget-html .agp { margin: 0; }
.elementor-section .agp-wrap { padding-inline: 0; }


/* ===========================================================================
   WOOCOMMERCE
   Restyles WooCommerce's own shop, product, cart and checkout templates.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------------- */
.woocommerce, .woocommerce-page,
.woocommerce div.product, .woocommerce ul.products {
  font-family: var(--font-sans);
  color: var(--text-body);
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.05;
  color: var(--text-body);
}

.woocommerce a { color: var(--agape-red); }
.woocommerce a:hover { color: var(--agape-red-hover); }

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--agape-red); }

/* ---------------------------------------------------------------------------
   2. Buttons — one language everywhere
   --------------------------------------------------------------------------- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--agape-red);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  padding: 13px 24px;
  line-height: 1.3;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background: var(--agape-red-hover);
  color: #fff;
}
.woocommerce a.button:active,
.woocommerce button.button:active { background: var(--agape-red-press); }

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled { opacity: .45; }

/* Secondary actions read as outlines */
.woocommerce .cart .button.wc-backward,
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop .button {
  background: transparent;
  color: var(--agape-red);
  border: 2px solid var(--agape-red);
}
.woocommerce .cart .button.wc-backward:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce .return-to-shop .button:hover {
  background: var(--surface-brand-soft);
  color: var(--agape-red);
}

/* ---------------------------------------------------------------------------
   3. Product loop (shop + category archives)
   --------------------------------------------------------------------------- */
.woocommerce ul.products {
  display: grid;
  gap: 20px;
  margin: 0 0 32px !important;
  padding: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }

.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 0 18px !important;
  background: #fff;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--agape-red);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(26, 21, 18, .08);
}
.woocommerce ul.products li.product a img {
  margin: 0 0 14px !important;
  width: 100%;
  height: auto;
  /* 1:1 to match WooCommerce's own catalog thumbnail, which is square by
     default. Cropping to anything else here would crop an already-cropped
     image a second time and lose more of the photo. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--surface-sunken);
  display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text-body);
  padding: 0 16px 6px !important;
  margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  padding: 0 16px;
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-body) !important;
  padding: 0 16px;
  margin-top: auto;
  display: block;
}
.woocommerce ul.products li.product .price del { color: var(--text-muted); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--agape-red); }
.woocommerce ul.products li.product .star-rating { margin: 6px 16px; font-size: 13px; }

.woocommerce ul.products li.product .button {
  margin: 12px 16px 0 !important;
  align-self: flex-start;
  background: transparent;
  color: var(--agape-red);
  border: 2px solid var(--agape-red);
  font-size: 13px;
  padding: 8px 14px;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--surface-brand-soft);
  color: var(--agape-red);
}
.woocommerce ul.products li.product .added_to_cart {
  margin: 8px 16px 0;
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Sale flash */
/* ---------------------------------------------------------------------------
   Availability on the product card
   WooCommerce says nothing about stock in the grid, so a shopper only finds
   out after clicking through. The badge carries the meaning; the fade carries
   it at a glance.
   --------------------------------------------------------------------------- */
.woocommerce ul.products li.product { position: relative; }

.woocommerce ul.products li.product .agp-stock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: 2px;
  padding: 5px 10px;
  color: #fff;
  background: var(--n-700);
}
.woocommerce ul.products li.product .agp-stock.is-backorder {
  background: var(--agape-gold-press);
}

/* A product can be discounted AND unavailable. Side by side the two badges
   collide once the card narrows, so when both are present the stock badge
   drops beneath the sale flash instead of racing it across the card. */
.woocommerce ul.products li.product:has(.onsale) .agp-stock {
  top: 42px;
  left: 12px;
  right: auto;
}

/* The picture fades, never the words — a greyed-out name is hard to read and
   the price still needs to be legible to somebody deciding to come back. */
.woocommerce ul.products li.product.agp-unavailable a img { opacity: .55; }
.woocommerce ul.products li.product.agp-unavailable:hover a img { opacity: .72; }
.woocommerce ul.products li.product.agp-is-out .price { opacity: .7; }

.woocommerce span.onsale {
  background: var(--agape-red);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 5px 10px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
}

/* Result count + ordering */
.woocommerce .woocommerce-result-count {
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.woocommerce .woocommerce-ordering select {
  font-family: var(--font-sans);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  padding: 10px 14px;
  min-height: 44px;
  background: #fff;
  color: var(--text-body);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  color: var(--text-body);
  font-size: 14px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--surface-brand-soft);
  border-color: var(--agape-red);
  color: var(--agape-red);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--agape-red);
  border-color: var(--agape-red);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   4. Single product
   --------------------------------------------------------------------------- */
.woocommerce div.product { margin-bottom: 48px; }

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--text-body);
  margin: 0 0 10px;
}

/* The red rule under the title — the brand's signature move */
.woocommerce div.product .product_title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: var(--agape-red);
  margin-top: 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 500;
  color: var(--text-body);
  margin: 18px 0;
}
.woocommerce div.product p.price del { color: var(--text-muted); font-size: 22px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--agape-red); }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 52ch;
  margin-bottom: 24px;
}

/* Gallery */
.woocommerce div.product div.images img { border-radius: var(--radius-2); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 10px; gap: 8px; display: flex; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; flex: 1; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  opacity: .75;
  transition: opacity .16s ease, border-color .16s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--agape-red);
}

/* Quantity + add to cart */
.woocommerce div.product form.cart { margin-bottom: 24px; }
.woocommerce div.product form.cart div.quantity { margin-right: 12px; }
.woocommerce .quantity .qty {
  font-family: var(--font-sans);
  font-size: 16px;
  height: 48px;
  width: 76px;
  padding: 0 8px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  background: #fff;
  color: var(--text-body);
}
.woocommerce div.product form.cart .button {
  font-size: 16px;
  padding: 15px 28px;
  min-height: 48px;
  vertical-align: top;
}

/* Variations */
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.woocommerce div.product form.cart .variations select {
  font-family: var(--font-sans);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  padding: 10px 14px;
  min-height: 44px;
  background: #fff;
}

/* Meta (SKU, categories, tags) */
.woocommerce div.product .product_meta {
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-hairline);
  padding-top: 18px;
  margin-top: 8px;
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as { font-size: 13px; }

/* Stock */
.woocommerce div.product .stock { color: #3F7A46; font-weight: 500; }
/* A chip rather than a line of coloured text, so it reads as a state and not
   as a passing remark. */
.woocommerce div.product .stock.out-of-stock {
  display: inline-block;
  background: var(--n-700);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 7px 12px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs { margin-top: 40px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-hairline);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 18px;
  display: block;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--text-body); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--agape-red);
  font-weight: 700;
  border-bottom-color: var(--agape-red);
}
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  max-width: 68ch;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-size: 24px;
  margin-bottom: 12px;
}

/* Reviews */
.woocommerce #reviews #comments h2 { font-size: 24px; }
.woocommerce #reviews .comment_container {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  padding: 18px;
  background: #fff;
}
.woocommerce #review_form input[type=text],
.woocommerce #review_form input[type=email],
.woocommerce #review_form textarea {
  font-family: var(--font-sans);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  padding: 12px 14px;
  width: 100%;
}
.woocommerce .star-rating span { color: var(--agape-gold); }
.woocommerce p.stars a { color: var(--agape-gold); }

/* Related / upsells */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce .cart-collaterals .cross-sells > h2 {
  font-family: var(--font-display);
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.woocommerce div.product .related,
.woocommerce div.product .upsells {
  margin-top: 48px;
  border-top: 3px solid var(--agape-red);
  padding-top: 28px;
}

/* ---------------------------------------------------------------------------
   5. Notices
   --------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-sans);
  border-top-color: var(--agape-red);
  background: var(--surface-sunken);
  color: var(--text-body);
  border-radius: var(--radius-2);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--agape-red); }
.woocommerce-message .button,
.woocommerce-info .button { font-size: 13px; padding: 9px 16px; }

/* ---------------------------------------------------------------------------
   6. Cart, checkout, account
   --------------------------------------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  border-collapse: separate;
  font-family: var(--font-sans);
}
.woocommerce table.shop_table th {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--border-hairline); }
.woocommerce-cart table.cart img { width: 68px; border-radius: 4px; }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 26px;
}

.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 {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  min-height: 46px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2);
  background: #fff;
  color: var(--text-body);
}
.woocommerce form .form-row label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--agape-red);
  box-shadow: 0 0 0 3px rgba(246, 152, 31, .45);
}

.woocommerce-checkout #payment { background: var(--surface-sunken); border-radius: var(--radius-2); }
.woocommerce-checkout #payment div.payment_box { background: #fff; border-radius: var(--radius-2); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }

/* ---------------------------------------------------------------------------
   7. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products.columns-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product .product_title { font-size: 34px; }
}
@media (max-width: 620px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 12px 12px; font-size: 12px; }
  .woocommerce div.product form.cart div.quantity { margin-bottom: 10px; }
}


/* ---------------------------------------------------------------------------
   WORDPRESS
   Accessibility helpers, admin bar, alignment, and the prose styles the blog
   uses. The static preview had no need for these.
   --------------------------------------------------------------------------- */
body.agp-site { margin: 0; background: var(--surface-page); }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; display: block;
  top: 8px; left: 8px; z-index: 100000; padding: 12px 20px;
  background: var(--agape-red); color: #fff; border-radius: var(--radius-2);
}

.admin-bar .agp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .agp-header { top: 46px; } }

.agp-search form { margin: 0; }

/* Blog post body */
.agp-prose > * + * { margin-top: 1.15em; }
.agp-prose h2 { font-size: var(--size-heading-2); margin-top: 1.7em; }
.agp-prose h3 { font-size: var(--size-heading-3); margin-top: 1.4em; }
.agp-prose ul, .agp-prose ol { padding-left: 1.4em; list-style: revert; }
.agp-prose li + li { margin-top: .4em; }
.agp-prose img { height: auto; border-radius: var(--radius-2); }
.agp-prose blockquote {
  margin: 0; padding-left: var(--space-5);
  border-left: var(--rule-width) solid var(--agape-red); font-size: 18px;
}
.agp-prose code {
  font-family: ui-monospace, Menlo, monospace; font-size: .9em;
  background: var(--surface-sunken); padding: 2px 5px; border-radius: var(--radius-1);
}
.agp-prose a { text-decoration: underline; }
.agp-prose p { margin: 0; }

.alignwide { max-width: min(1100px, 100%); margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { display: block; margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }

/* Pagination */
.agp .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.agp .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-2);
  color: var(--text-body); font-size: 14px;
}
.agp .page-numbers:hover { border-color: var(--agape-red); color: var(--text-brand); }
.agp .page-numbers.current { background: var(--agape-red); border-color: var(--agape-red); color: #fff; }

/* Blog cards keep the product-card shape but never stretch a missing image */
.agp-product__media .agp-media--wide { border-radius: 0; }

/* Comments */
.agp .comment-list { list-style: none; padding: 0; }
.agp .comment-body { border-bottom: 1px solid var(--border-hairline); padding: 18px 0; }
.agp .comment-form input[type=text], .agp .comment-form input[type=email],
.agp .comment-form input[type=url], .agp .comment-form textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font-sans); font-size: 15px;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-2);
}
.agp .comment-form input[type=submit] {
  background: var(--agape-red); color: #fff; border: 0; cursor: pointer;
  border-radius: var(--radius-2); padding: 13px 24px;
  font-family: var(--font-sans); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}


/* ---------------------------------------------------------------------------
   PROCEED TO CHECKOUT
   White button, so the primary step out of the cart reads as the clear,
   bright action against the red used everywhere else. Covers both the classic
   cart (.checkout-button) and WooCommerce's block cart.
   --------------------------------------------------------------------------- */
.woocommerce .cart_totals .checkout-button,
.woocommerce a.checkout-button,
.woocommerce a.button.alt.checkout-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-components-button.contained {
  background: #FFFFFF !important;
  color: var(--agape-red) !important;
  border: 2px solid var(--agape-red) !important;
  border-radius: var(--radius-2) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 28px !important;
  box-shadow: none !important;
  transition: background .16s ease, color .16s ease;
}
.woocommerce .cart_totals .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover {
  background: var(--surface-brand-soft) !important;
  color: var(--agape-red) !important;
  border-color: var(--agape-red) !important;
}
/* The block button paints its label in a nested span. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-button.contained .wc-block-components-button__text {
  color: var(--agape-red) !important;
}

/* Checkout form, matched to the Agape field styling */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 14px;
}
.woocommerce-checkout #place_order {
  background: var(--agape-red) !important;
  color: #fff !important;
  width: 100%;
  font-size: 17px;
  padding: 16px 28px !important;
}
.woocommerce-checkout #place_order:hover { background: var(--agape-red-hover) !important; }

/* The single delivery box is a textarea; keep it the same shape as the inputs */
.woocommerce form .form-row textarea#billing_address_1 {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}
.woocommerce form .form-row select#agape_occasion { height: 46px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { display: grid; gap: 4px; }


/* ---------------------------------------------------------------------------
   SHOP FILTER PANEL
   --------------------------------------------------------------------------- */
.agp-shop { display: grid; grid-template-columns: 250px 1fr; gap: var(--space-6); align-items: start; }
.agp-shop__results { min-width: 0; }

.agp-filters {
  display: flex; flex-direction: column; gap: var(--space-5);
  position: sticky; top: 130px;
}
.agp-filters__group { display: flex; flex-direction: column; gap: 10px; }
.agp-filters__group .agp-input { font-size: 14px; min-height: 40px; }

.agp-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agp-filter-list li { margin: 0; }
.agp-filter-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; margin-left: -10px;
  font-size: 14px; color: var(--text-body); border-radius: var(--radius-2);
  text-decoration: none; transition: background var(--transition), color var(--transition);
}
.agp-filter-list a:hover { background: var(--surface-sunken); color: var(--text-brand); }
.agp-filter-list a.is-on { background: var(--surface-brand-soft); color: var(--text-brand); font-weight: 500; }
.agp-filter-count { font-size: 12px; color: var(--text-muted); }
.agp-filter-list a.is-on .agp-filter-count { color: var(--text-brand); }

.agp-price-form { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.agp-price-form .agp-input { width: 100%; min-width: 0; padding: 8px 10px; }
.agp-price-form__dash { color: var(--text-muted); }
.agp-price-form .agp-btn { flex: 0 0 auto; padding: 8px 12px; }

.agp-filters__active .agp-tags { gap: 6px; }
.agp-filters__active .agp-tag { font-size: 12px; padding: 5px 10px; }
.agp-filters__help { gap: 8px; padding: 16px; }

/* The archive's own sorting dropdown is redundant beside the panel */
.agp-shop .woocommerce-ordering { display: none; }
.agp-shop .woocommerce-result-count { margin-bottom: 16px; }

@media (max-width: 1024px) {
  .agp-shop { grid-template-columns: 1fr; }
  .agp-filters { position: static; }
  .agp-filter-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .agp-filter-list a { border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); margin-left: 0; padding: 7px 12px; }
  .agp-filter-list a.is-on { border-color: var(--agape-red); }
  .agp-price-form { max-width: 340px; }
}


/* ---------------------------------------------------------------------------
   BLOG
   --------------------------------------------------------------------------- */

/* Post card. The image is locked to 3:2 and cropped to fill, so a row lines up
   whatever shape the uploaded photos are — and a post with no image occupies
   exactly the same space rather than shrinking. */
.agp-post { display: flex; flex-direction: column; padding: 0; overflow: hidden; gap: 0; }
.agp-post__media { display: block; line-height: 0; }
.agp-post__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  background: var(--surface-sunken);
  border-radius: 0;
}
.agp-post__img--empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 16px;
  font-family: var(--font-display); font-size: 18px; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.15; color: var(--text-muted);
  background: repeating-linear-gradient(135deg, #EFE7DD 0 10px, #F6F0E8 10px 20px);
}
.agp-post__body {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); flex: 1;
}
.agp-post__cat {
  font-size: 12px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-muted);
}
.agp-post__title { font-size: 20px; line-height: 1.15; }
.agp-post__title a { color: inherit; }
.agp-post__title a:hover { color: var(--text-brand); }
.agp-post__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: auto; padding-top: var(--space-2);
}
.agp-card.agp-post:hover { border-color: var(--agape-red); }

/* Filter row above the listing */
.agp-blog-filters {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.agp-blog-filters__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.agp-blog-filters__cats .agp-tag { display: inline-flex; align-items: center; gap: 7px; }
.agp-blog-filters__cats .agp-filter-count { font-size: 11px; color: var(--text-muted); }
.agp-blog-filters__cats .agp-tag--on .agp-filter-count { color: #fff; }
.agp-blog-filters__search { flex: 0 0 240px; max-width: 100%; }
.agp-blog-filters__search .agp-input { min-height: 40px; font-size: 14px; }

@media (max-width: 620px) {
  .agp-blog-filters { flex-direction: column; gap: var(--space-4); }
  .agp-blog-filters__search { flex: 1 1 auto; width: 100%; }
}

/* -----------------------------------------------------------------------
   Product video — the TikTok link set on each product
   ----------------------------------------------------------------------- */

.agp .agp-video-link,
.woocommerce .agp-video-link,
.woocommerce div.product .agp-video-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 var(--space-4);
  padding: 11px 18px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-1);
  background: var(--surface-sunken);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.agp .agp-video-link:hover,
.woocommerce .agp-video-link:hover,
.woocommerce div.product .agp-video-link:hover {
  border-color: var(--agape-red);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
}
.agp-video-link__ic {
  display: inline-flex;
  color: var(--agape-red);
}

/* The ▶ corner on a catalogue card whose product has a clip. */
.woocommerce ul.products li.product .agp-video-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(26, 21, 18, .72);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding-left: 2px;
  pointer-events: none;
}

/* -----------------------------------------------------------------------
   First-time greeting
   ----------------------------------------------------------------------- */

.agp-greet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.agp-greet.is-open { display: flex; }

.agp-greet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 21, 18, .64);
  opacity: 0;
  transition: opacity .25s ease;
}
.agp-greet.is-open .agp-greet__backdrop { opacity: 1; }

.agp-greet__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - var(--space-7));
  overflow-y: auto;
  background: var(--surface-card);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-7) var(--space-6) var(--space-6);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.agp-greet.is-open .agp-greet__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.agp-greet__card:focus { outline: none; }

.agp-greet__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.agp-greet__close:hover { background: var(--surface-sunken); color: var(--text-body); }

.agp-greet__mark { display: flex; justify-content: center; margin-bottom: var(--space-4); }
.agp-greet__mark .agp-logo img { height: 40px; width: auto; }

.agp-greet__msg {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.6;
}

.agp-greet__verse {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--surface-brand-soft);
  border-radius: var(--radius-2);
}
.agp-greet__verse p {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--agape-oxblood);
}
.agp-greet__verse cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-brand);
}

@media (max-width: 480px) {
  .agp-greet__card { padding: var(--space-6) var(--space-4) var(--space-5); }
}

/* ---------------------------------------------------------------------------
   TELEGRAM CTA
   The homepage "Order Through Telegram" band, and the smaller inline prompt
   reused on the cart, checkout and shop pages.
   --------------------------------------------------------------------------- */
.agp-tgcta { background: var(--gradient-brand); color: #fff; }
.agp-tgcta h2 { color: #fff; margin: var(--space-4) 0 var(--space-3); }
.agp-tgcta p { color: rgba(255,255,255,.82); margin-bottom: var(--space-5); }
.agp-tgcta__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12); color: var(--agape-gold);
}

.agp-tgprompt {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  flex-wrap: wrap; text-align: center;
  padding: var(--space-4) var(--space-5); margin-block: var(--space-6);
  background: var(--surface-brand-soft); border-radius: var(--radius-2);
}
.agp-tgprompt__text { color: var(--text-body); font-size: 14px; }

@media (max-width: 620px) {
  .agp-tgcta__ic { width: 52px; height: 52px; }
  .agp-tgcta__ic svg { width: 26px; height: 26px; }
}