/*
Theme Name: PepDepot
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1782590714
Updated: 2026-06-27 20:05:14

*/

/* =====================================================================
   PEP DEPOT — Child theme global layer (Layer 2)
   Hello Elementor child theme › style.css  (append below the theme header)

   This is the ONLY place tokens + base components are defined for HTML blocks.
   HTML blocks reference these by var()/class name — they never redefine them.
   Keep in sync with "Pep Depot — Master Design System & Page Spec" Part 1.
   ===================================================================== */

/* ---- FONTS ----
   Loaded via functions.php enqueue (pd-google-fonts). Production: self-host
   the .woff2 files via @font-face with font-display:swap. */

:root{
  /* ---- Brand (canonical — no legacy aliases) ---- */
  --pd-forest:#13241B; --pd-paper:#F4F1E7; --pd-emerald:#1E7A4D;
  --pd-spring:#34B36B; --pd-gold:#C9971C; --pd-pine-panel:#1C3A2A;
  --pd-sale:#B0461E; --pd-whatsapp:#25D366;
  --pd-emerald-dark:#155C3A; --pd-gold-dark:#A8731A;
  --pd-paper-2:#E9E4D6; --pd-line:#D9D3C3; --pd-white:#FFFFFF;
  --pd-ink-70:rgba(19,36,27,.66); --pd-ink-12:rgba(19,36,27,.12);

  /* ---- Surfaces ---- */
  --surface-page:var(--pd-paper); --surface-card:var(--pd-white);
  --surface-inset:var(--pd-paper-2); --surface-dark:var(--pd-pine-panel);
  --surface-ink:var(--pd-forest);

  /* ---- Text ---- */
  --text-strong:var(--pd-forest); --text-body:var(--pd-pine-panel);
  --text-muted:var(--pd-ink-70); --text-on-dark:var(--pd-paper);
  --text-on-primary:#F4F1E7;

  /* ---- Brand aliases ---- */
  --brand-primary:var(--pd-emerald); --brand-secondary:var(--pd-spring);
  --brand-accent:var(--pd-gold);

  /* ---- Borders ---- */
  --border-hairline:var(--pd-line); --border-strong:var(--pd-forest);
  --bw-hair:1px; --bw-strong:2px; --keyline-brass:3px;

  /* ---- State ---- */
  --state-instock:var(--pd-spring); --state-sale:var(--pd-sale);
  --state-trade:var(--pd-gold);
  --state-error:var(--pd-sale);

  /* ---- Focus (WCAG 2.4.7) ---- */
  --focus-ring:0 0 0 3px rgba(30,122,77,.45);

  /* ---- Type ---- */
  --font-display:'Anton','Archivo Black',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;
  --font-price:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;
  --lh-display:.96; --lh-heading:1.04; --lh-body:1.55;
  --ls-display:.01em; --ls-eyebrow:.18em; --ls-label:.08em;

  /* ---- Spacing ---- */
  --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;

  /* ---- Radius ---- */
  --radius-sm:8px; --radius-md:12px; --radius-card:16px; --radius-lg:24px; --radius-pill:999px;

  /* ---- Shadow ---- */
  --shadow-sm:0 1px 2px rgba(28,32,36,.08);
  --shadow-card:0 2px 4px rgba(28,32,36,.06),0 8px 24px rgba(28,32,36,.08);
  --shadow-lift:0 4px 8px rgba(28,32,36,.10),0 16px 40px rgba(28,32,36,.14);

  /* ---- Layout ---- */
  --container:1280px;
}

/* =====================================================================
   BASE COMPONENTS  (centralized — blocks use these classes, never restyle)
   Typography for native widgets is handled by Elementor Global Fonts.
   The --font-* tokens above are available for raw HTML blocks to reference.
   ===================================================================== */

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:14px;
  line-height:1; text-transform:uppercase; letter-spacing:.07em; text-decoration:none;
  padding:14px 26px; border:var(--bw-strong) solid transparent;
  border-radius:var(--radius-pill); cursor:pointer;
  transition:background-color .16s ease, color .16s ease, transform .06s ease;
}
.btn:active{transform:scale(.98);}
.btn:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.btn[disabled],.btn.is-disabled{
  background:var(--pd-line); color:var(--text-muted);
  border-color:var(--pd-line); opacity:.6; pointer-events:none;
}

/* Primary = solid emerald */
.btn-primary{background:var(--pd-emerald); color:var(--text-on-primary); border-color:var(--pd-emerald);}
.btn-primary:hover{background:var(--pd-spring); border-color:var(--pd-spring);}
.btn-primary:active{background:var(--pd-emerald-dark); border-color:var(--pd-emerald-dark);}

/* Secondary = solid FOREST (visually distinct from primary) */
.btn-secondary{background:var(--pd-forest); color:var(--pd-paper); border-color:var(--pd-forest);}
.btn-secondary:hover{background:var(--pd-pine-panel); border-color:var(--pd-pine-panel);}

/* Outline (on paper) */
.btn-outline{background:transparent; color:var(--pd-forest); border-color:var(--pd-forest);}
.btn-outline:hover{background:var(--pd-forest); color:var(--pd-paper);}

/* Outline (on dark panels) */
.btn-outline-paper{background:transparent; color:var(--pd-paper); border-color:rgba(244,241,232,.5);}
.btn-outline-paper:hover{background:var(--pd-paper); color:var(--pd-forest); border-color:var(--pd-paper);}

/* WhatsApp — paper text matches the mock & WhatsApp brand.
   NOTE: paper-on-#25D366 is below WCAG AA. For AA, change color to var(--pd-forest). */
.btn-wa{background:var(--pd-whatsapp); color:var(--pd-paper); border-color:var(--pd-whatsapp);}
.btn-wa:hover{filter:brightness(.94);}
.btn-wa svg,.btn-wa .ico{width:18px; height:18px;}

.btn-sm{padding:10px 18px; font-size:12.5px;}

/* ---------- BADGES ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.08em;
  padding:6px 11px; border:var(--bw-strong) solid transparent; border-radius:var(--radius-pill);
}
.badge-stock{background:var(--pd-emerald); color:var(--pd-paper);}
.badge-stock::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--pd-paper);}
.badge-trade{background:var(--pd-gold); color:var(--pd-forest);}
.badge-ink{background:var(--pd-forest); color:var(--pd-paper);}
.badge-special{background:var(--pd-sale); color:var(--pd-paper);}

/* ---------- TRADE PANEL (black + gold) ----------
   One definition for: PDP trade CTA, home trade band, full trade-accounts panel. */
.trade-panel{
  background:var(--pd-forest); color:var(--text-on-dark);
  border-radius:var(--radius-card); padding:var(--space-5);
}
.trade-panel .trade-accent{color:var(--pd-gold);}
.trade-panel .trade-muted{color:rgba(244,241,232,.66);}

.trade-cta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--pd-forest); color:var(--text-on-dark);
  border-radius:var(--radius-card); padding:var(--space-4) var(--space-5);
  text-decoration:none; transition:transform .06s ease;
}
.trade-cta:hover{transform:translateY(-1px);}
.trade-cta:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.trade-cta__sub{color:var(--pd-gold); font-size:13px;}
.trade-cta__arrow{color:var(--pd-gold);}

/* ---------- INPUTS ---------- */
.field{
  height:50px; width:100%; box-sizing:border-box;
  border:var(--bw-strong) solid var(--pd-line); border-radius:var(--radius-md);
  background:var(--surface-card); padding:0 16px;
  font-family:var(--font-body); font-size:14.5px; color:var(--text-strong);
}
.field::placeholder{color:var(--text-muted);}
.field:focus{outline:none; border-color:var(--pd-forest); box-shadow:var(--focus-ring);}
.field.is-invalid{border-color:var(--state-error);}
.field--search{border-radius:var(--radius-pill);}

/* ---------- PRODUCT CARD ---------- */
.product-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-card); border:var(--bw-hair) solid var(--pd-line);
  border-radius:var(--radius-card); box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease;
}
.product-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-card);}