/* =========================================================
   KONIRY — BASE
   Design tokens, reset, typography, buttons, and small shared
   UI primitives reused across every other stylesheet (sec-head,
   breadcrumbs, accordions, skip link). Loaded first — everything
   else depends on the CSS variables defined here.
   ========================================================= */

:root{
  --ink:#1F2422;          /* deep forest-charcoal */
  --body:#5B615E;         /* soft grey-green text */
  --bg:#FFFFFF;
  --sand:#F5F1EA;         /* warm section bg */
  --clay:#EDE5D8;         /* card bg */
  --sage:#E3E9E2;         /* accent bg */
  --accent:#2E4B3F;       /* deep green CTA */
  --accent-hover:#1F3A30;
  --r-lg:28px; --r-md:20px; --r-pill:100px;
  --shadow:0 24px 60px -20px rgba(31,36,34,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;line-height:1.12;letter-spacing:-.5px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
section{padding:96px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:var(--r-pill);font-size:15.5px;font-weight:600;text-decoration:none;transition:.3s;border:none;cursor:pointer;font-family:inherit}
.btn-dark{background:var(--accent);color:#fff}
.btn-dark:hover{background:var(--accent-hover);transform:translateY(-2px);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.btn-line{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn.btn-disabled,.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn .ar{transition:.3s}
.btn:hover .ar{transform:translateX(4px)}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.center{text-align:center}

/* shared section heading, reused by homepage sections, shop, blog, search */
.sec-head{max-width:660px;margin:0 auto 60px;text-align:center}
.sec-head h2{font-size:44px;margin-bottom:16px}
.sec-head p{color:var(--body);font-size:17.5px}

/* decorative star glyphs (hero rating line, testimonial cards) —
   distinct from .koniry-stars/.star-rating, WooCommerce's own live
   product rating, defined in shop.css */
.stars{color:#F4C95D;letter-spacing:3px}

/* testimonial card — used on the homepage AND the single product
   page (template-parts/product/testimonials.php), hence living here
   in the shared base file rather than home.css or product.css alone */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.t-card{background:#fff;border-radius:var(--r-lg);padding:38px 34px}
.t-card .stars{font-size:15px;margin-bottom:18px;display:block}
.t-card p{font-size:15.5px;color:var(--body);margin-bottom:24px}
.t-who{display:flex;align-items:center;gap:14px}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--sage);color:var(--accent);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.t-who b{display:block;font-size:14.5px}
.t-who span{font-size:13px;color:var(--body)}
@media(max-width:1000px){
  .t-grid{grid-template-columns:1fr}
}

/* shared accordion primitive (FAQ today; Phase 5 reuses this on the product page) */
details{background:var(--sand);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden}
summary{padding:24px 30px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:17px;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;color:var(--accent);font-weight:300;flex-shrink:0}
details[open] summary::after{content:"–"}
details p{padding:0 30px 26px;color:var(--body);font-size:15.5px;max-width:660px}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:14px 22px;z-index:999;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

/* shared breadcrumb trail, used on every non-home page template */
.breadcrumb-trail{font-size:13.5px;color:var(--body);margin-bottom:30px}
.breadcrumb-trail a{color:var(--body);text-decoration:none}
.breadcrumb-trail a:hover{color:var(--accent)}
.breadcrumb-trail .sep{margin:0 8px;opacity:.6}

/* AI-generated image disclosure badge (reused wherever an AI-assisted photo is used) */
.ai-disclosure{position:absolute;bottom:14px;right:14px;background:rgba(31,36,34,.72);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.5px;padding:5px 10px;border-radius:var(--r-pill);z-index:2}

@media(max-width:1000px){
  section{padding:64px 0}
  .sec-head h2{font-size:31px}
}