/* ============================================================================
   KFE — custom single product layout
   partdo-child/assets/css/kfe-product.css

   Every class is prefixed .kfe- so nothing collides with Partdo.
   To re-skin the entire page, edit only the :root block.
   ========================================================================= */

.kfe-product{
  /* ---- palette ---- */
  --kfe-ink:#14181c;
  --kfe-ink-2:#4b555e;
  --kfe-ink-3:#7f8a94;
  --kfe-line:#e4e7ea;
  --kfe-line-2:#eef0f2;
  --kfe-surface:#fff;
  --kfe-surface-2:#f2f6f6;   /* tinted section band — noticeably not white */
  --kfe-surface-3:#e6efee;   /* image wells, icon chips */

  --kfe-brand:#0e5a54;
  --kfe-brand-dark:#0a423d;
  --kfe-brand-tint:#e8f2f1;
  --kfe-gold:#a67c2e;
  --kfe-gold-tint:#faf4e8;
  --kfe-danger:#b4342a;
  --kfe-danger-tint:#fdf1f0;
  --kfe-ok:#1e7a4d;

  /* ---- shape ---- */
  --kfe-r-sm:6px;
  --kfe-r:10px;
  --kfe-r-lg:16px;

  /* ---- type ---- */
  --kfe-serif:'Fraunces',Georgia,serif;

  /* Set this to your Partdo sticky header height so the two stickies
     don't stack and eat the viewport. Measure it, don't guess. */
  --kfe-header-h:0px;
}

/* ---------------------------------------------------------------------------
   LAYOUT PRIMITIVES

   NOTE: these sections render INSIDE Partdo's own container (the <article>
   sits within whatever wrapper single-product.php provides). So we do not
   set a max-width or horizontal padding here — that would double up with
   Partdo's container and produce a narrow, inset column.

   For the same reason tinted sections are contained cards rather than
   full-bleed bands: a full-bleed background inside a container needs
   negative-margin hacks that break the moment the theme's container
   width changes.
   ------------------------------------------------------------------------ */
.kfe-sections{margin-top:16px;clear:both}
.kfe-section{padding:40px 0;border-top:1px solid var(--kfe-line-2)}
.kfe-section:first-child{border-top:0}
.kfe-section.is-tinted{
  background:linear-gradient(180deg,var(--kfe-surface-2),#fbfdfd);
  border:1px solid #d8e5e3;
  border-radius:var(--kfe-r-lg);
  padding:48px 40px;
  margin-block:32px
}

.kfe-sec-head{margin-bottom:32px;max-width:70ch}
.kfe-eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kfe-brand)}
.kfe-eyebrow::before{
  content:"";display:inline-block;width:20px;height:2px;
  background:var(--kfe-brand);vertical-align:middle;margin-right:9px;
  position:relative;top:-1px
}
.kfe-sec-title{font-family:var(--kfe-serif);font-size:clamp(26px,3.2vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:10px 0 14px;color:var(--kfe-brand-dark)}
.kfe-sub{font-size:17px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.kfe-mt{margin-top:28px}
.kfe-lede{font-size:16px;color:var(--kfe-ink-2);max-width:66ch;line-height:1.75}
.kfe-small{font-size:13px;color:var(--kfe-ink-3);margin-top:18px}

.kfe-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.kfe-grid-2.is-top{align-items:start}
.kfe-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kfe-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---------------------------------------------------------------------------
   SUMMARY ADDITIONS  (injected into woocommerce_single_product_summary)
   ------------------------------------------------------------------------ */
.kfe-tagline{font-size:16px;color:var(--kfe-ink-2);margin:6px 0 16px}

.kfe-spec-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--kfe-line);border:1px solid var(--kfe-line);
  border-radius:var(--kfe-r);overflow:hidden;margin:20px 0
}
.kfe-spec-strip div{background:var(--kfe-brand-tint);padding:14px 12px;text-align:center}
.kfe-spec-strip b{display:block;font-family:var(--kfe-serif);font-size:19px;font-weight:600;line-height:1.1;color:var(--kfe-brand-dark)}
.kfe-spec-strip span{display:block;font-size:10.5px;color:var(--kfe-ink-3);text-transform:uppercase;letter-spacing:.07em;margin-top:5px}

.kfe-tiers{border:1px solid var(--kfe-line);border-radius:var(--kfe-r);overflow:hidden;margin:18px 0}
.kfe-tiers table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0}
.kfe-tiers th{background:var(--kfe-brand);font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#fff;padding:11px 16px;text-align:left;border:0}
.kfe-tiers td{padding:11px 16px;border:0;border-top:1px solid var(--kfe-line-2)}
.kfe-tiers tr:hover td{background:var(--kfe-brand-tint)}
.kfe-tiers .ta-r{text-align:right;font-weight:600}
.kfe-tiers .disc{color:var(--kfe-ok);font-weight:500}
.kfe-tiers-note{font-size:12px;color:var(--kfe-ink-3);padding:10px 16px;margin:0;border-top:1px solid var(--kfe-line-2)}

.kfe-assure{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0 0;padding:0}
.kfe-assure li{position:relative;padding-left:26px;font-size:13px;color:var(--kfe-ink-2);line-height:1.55}
.kfe-assure li::before{
  content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;
  background:var(--kfe-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e5a54' stroke-width='3.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat
}

.kfe-pro-notice{
  margin-top:20px;background:var(--kfe-gold-tint);border:1px solid #ecdcbc;
  border-left:3px solid var(--kfe-gold);border-radius:var(--kfe-r-sm);
  padding:14px 16px;font-size:13px;color:#6a4f16;line-height:1.6
}
.kfe-pro-notice b{color:#543d0e}

.kfe-widget-slot{margin-top:18px}
.kfe-widget-slot.is-footer{margin:0 0 48px}

/* ---------------------------------------------------------------------------
   STICKY SECTION NAV
   ------------------------------------------------------------------------ */
.kfe-navtabs{
  position:sticky;top:var(--kfe-header-h);z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-block:1px solid var(--kfe-line);margin-top:40px;clear:both
}
.kfe-navtabs-inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.kfe-navtabs-inner::-webkit-scrollbar{display:none}
.kfe-navtabs a{
  padding:16px;font-size:13.5px;font-weight:500;color:var(--kfe-ink-2);
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s
}
.kfe-navtabs a:hover{color:var(--kfe-brand)}
.kfe-navtabs a.on{color:var(--kfe-brand);border-bottom-color:var(--kfe-brand);font-weight:600}

/* offset anchor targets so the sticky nav doesn't cover section headings */
.kfe-section{scroll-margin-top:calc(var(--kfe-header-h) + 64px)}

/* ---------------------------------------------------------------------------
   A+ CONTENT
   ------------------------------------------------------------------------ */
.kfe-aplus{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:56px}
.kfe-aplus:last-child{margin-bottom:0}
.kfe-aplus.flip .kfe-a-media{order:2}
.kfe-a-media{background:var(--kfe-surface-3);border-radius:var(--kfe-r-lg);overflow:hidden;aspect-ratio:4/3}
.kfe-a-media img{width:100%;height:100%;object-fit:cover}
.kfe-a-body h3{font-family:var(--kfe-serif);font-size:26px;font-weight:600;letter-spacing:-.01em;margin:8px 0 12px;color:var(--kfe-brand-dark)}
.kfe-a-body p{color:var(--kfe-ink-2)}

/* ---- No image? Clean bordered panel instead of an empty grey well ---- */
.kfe-aplus.no-media{
  display:block;
  padding:30px 34px;margin-bottom:18px;
  background:var(--kfe-surface);
  border:1px solid #dde5e4;
  border-left:3px solid var(--kfe-brand);
  border-radius:var(--kfe-r);
  box-shadow:0 1px 2px rgba(14,90,84,.04),0 6px 18px rgba(14,90,84,.04)
}
.kfe-aplus.no-media h3{margin:6px 0 12px;font-size:22px}
.kfe-aplus.no-media .kfe-a-body{max-width:88ch}
.kfe-aplus.no-media p{font-size:14.5px}

@media(max-width:782px){
  .kfe-aplus.no-media{padding:24px 22px}
}

/* ---------------------------------------------------------------------------
   CARDS
   ------------------------------------------------------------------------ */
.kfe-card{
  background:var(--kfe-surface);border:1px solid #dde5e4;border-radius:var(--kfe-r);
  padding:24px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(14,90,84,.04),0 6px 18px rgba(14,90,84,.05);
  transition:box-shadow .18s,transform .18s
}
.kfe-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--kfe-brand)}
.kfe-card:hover{box-shadow:0 2px 4px rgba(14,90,84,.06),0 14px 32px rgba(14,90,84,.10);transform:translateY(-2px)}
.kfe-card b{display:block;font-size:15px;font-weight:600;margin-bottom:7px;color:var(--kfe-brand-dark)}
.kfe-card p{font-size:13.5px;color:var(--kfe-ink-2);line-height:1.65;margin:0 0 10px}
.kfe-card p:last-child{margin-bottom:0}
.kfe-num{font-family:var(--kfe-serif);font-size:32px;font-weight:600;color:var(--kfe-brand);line-height:1;margin-bottom:10px}

/* ---------------------------------------------------------------------------
   TABLES
   ------------------------------------------------------------------------ */
.kfe-tbl-wrap{border:1px solid var(--kfe-line);border-radius:var(--kfe-r);overflow:hidden;overflow-x:auto;background:var(--kfe-surface)}
table.kfe-data{width:100%;border-collapse:collapse;font-size:14px;min-width:440px;margin:0}
table.kfe-data th{background:var(--kfe-brand);text-align:left;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:13px 18px;border:0}
table.kfe-data tbody tr:nth-child(even) td{background:#fafcfc}
table.kfe-data td{padding:13px 18px;border:0;border-bottom:1px solid var(--kfe-line-2);vertical-align:top}
table.kfe-data tr:last-child td{border-bottom:0}
table.kfe-data td:first-child{font-weight:500;color:var(--kfe-ink)}
table.kfe-data tr.hl td{background:var(--kfe-brand-tint)}

/* ---------------------------------------------------------------------------
   STEPS
   ------------------------------------------------------------------------ */
ol.kfe-steps{list-style:none;counter-reset:kfes;margin:18px 0 0;padding:0}
ol.kfe-steps li{counter-increment:kfes;position:relative;padding:0 0 22px 52px;margin:0}
ol.kfe-steps li::before{
  content:counter(kfes);position:absolute;left:0;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--kfe-brand);color:#fff;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center
}
ol.kfe-steps li::after{content:"";position:absolute;left:15.5px;top:34px;bottom:6px;width:1px;background:var(--kfe-line)}
ol.kfe-steps li:last-child{padding-bottom:0}
ol.kfe-steps li:last-child::after{display:none}
ol.kfe-steps b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px}
ol.kfe-steps p{font-size:13.5px;color:var(--kfe-ink-2);margin:0}

/* ---------------------------------------------------------------------------
   RICH TEXT (WYSIWYG fields) — ticked lists
   ------------------------------------------------------------------------ */
.kfe-rich{font-size:14px;color:var(--kfe-ink-2);line-height:1.7}
.kfe-rich ul{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.kfe-rich ul li{position:relative;padding-left:27px}
.kfe-rich ul li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--kfe-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e5a54' stroke-width='3.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat
}
.kfe-rich.is-warn ul li::before{
  background:var(--kfe-danger-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4342a' stroke-width='3.5'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/9px no-repeat
}

/* ---------------------------------------------------------------------------
   TIMELINE
   ------------------------------------------------------------------------ */
.kfe-timeline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;margin-top:36px}
.kfe-timeline::before{content:"";position:absolute;left:6%;right:6%;top:13px;height:2px;background:linear-gradient(90deg,var(--kfe-brand),var(--kfe-brand-tint))}
.kfe-tl{position:relative;text-align:center;padding:0 10px}
.kfe-tl .dot{width:28px;height:28px;border-radius:50%;background:var(--kfe-surface);border:2px solid var(--kfe-brand);margin:0 auto 14px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.kfe-tl .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--kfe-brand)}
.kfe-tl b{display:block;font-family:var(--kfe-serif);font-size:21px;font-weight:600;margin-bottom:5px}
.kfe-tl span{font-size:13px;color:var(--kfe-ink-2);line-height:1.55;display:block}

/* ---------------------------------------------------------------------------
   CALLOUTS
   ------------------------------------------------------------------------ */
.kfe-callout{border-radius:var(--kfe-r);padding:22px 24px;font-size:14px;line-height:1.7;margin-top:24px}
.kfe-callout b{display:block;margin-bottom:6px;font-size:14.5px}
.kfe-callout p{margin:0 0 10px}
.kfe-callout p:last-child{margin-bottom:0}
.kfe-callout.is-info{background:var(--kfe-brand-tint);border:1px solid #c9e0dd;color:#0c443f}
.kfe-callout.is-warn{background:var(--kfe-danger-tint);margin-bottom: 28px;border:1px solid #f3d3d0;color:#7d2620}
.kfe-callout.is-note{background:var(--kfe-gold-tint);border:1px solid #ecdcbc;color:#6a4f16}

/* ---------------------------------------------------------------------------
   KIT CONTENTS
   ------------------------------------------------------------------------ */
.kfe-kit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kfe-kit-item{
  border:1px solid #dde5e4;border-left:3px solid var(--kfe-brand);
  border-radius:var(--kfe-r);padding:18px 20px;background:var(--kfe-surface)
}
.kfe-kit-item b{display:block;font-size:14px;font-weight:600}
.kfe-kit-item span{display:block;font-size:12.5px;color:var(--kfe-ink-3)}

/* ---------------------------------------------------------------------------
   SUMMARY COLUMN POLISH  (Partdo's .product-detail cell)

   Partdo does not use .summary.entry-summary — it uses .product-detail.
   Scoped to .kfe-product so only products with the layout enabled change.
   ------------------------------------------------------------------------ */
.kfe-product .product-detail .woocommerce-product-details__short-description{
  color:var(--kfe-ink-2);border-left:2px solid var(--kfe-brand);
  padding-left:16px;margin:18px 0
}

/* ---------------------------------------------------------------------------
   SUMMARY COLUMN ORDER

   Reorders the right-hand column visually, without touching a single plugin
   hook. Flexbox `order` only affects direct children, so everything not
   named below keeps its original relative position (default order: 4).

   Target reading order:
     0  Yuko star rating
     1  Product title
     2  Tagline
     3  Price
     4  In-stock badge
     5  everything else, unchanged — spec strip, tiers, cart, notices, etc.

   The Yuko rating is targeted with :first-child rather than a class name.
   It renders at hook priority 9 and nothing else is registered below that,
   so it is always the first element in this column. That avoids depending
   on Yuko's markup, which could change between plugin versions.
   ------------------------------------------------------------------------ */
.kfe-product .product-detail{display:flex;flex-direction:column}
.kfe-product .product-detail > *{order:5}
.kfe-product .product-detail > *:first-child{order:0}   /* Yuko stars */
.kfe-product .product-detail > .product_title{order:1}
.kfe-product .product-detail > .kfe-tagline{order:2}
.kfe-product .product-detail > .price{order:3}
.kfe-product .product-detail > .stock{order:4}

/* Price — larger, heavier, brand colour */
.kfe-product .product-detail > .price{
  font-family:var(--kfe-serif);
  font-size:34px;
  font-weight:700;
  line-height:1.1;
  color:var(--kfe-brand-dark);
  margin:12px 0 8px
}
/* Sale price: strike-through original small and muted, new price full size */
.kfe-product .product-detail > .price del{
  font-size:19px;font-weight:400;opacity:.45;margin-right:10px
}
.kfe-product .product-detail > .price ins{text-decoration:none;font-weight:700}
.kfe-product .product-detail > .price small,
.kfe-product .product-detail > .price .woocommerce-price-suffix{
  font-family:var(--kfe-sans,inherit);font-size:12px;font-weight:400;color:var(--kfe-ink-3)
}

/* In-stock badge — sits directly under the price */
.kfe-product .product-detail > .stock{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;margin:0 0 16px
}
.kfe-product .product-detail > .stock.in-stock{color:var(--kfe-ok)}
.kfe-product .product-detail > .stock.out-of-stock{color:var(--kfe-danger)}

/* Optional: make Partdo's gallery follow the summary on long pages.
   Comment out if Partdo's vertical-thumbnail mode misbehaves. */
@media(min-width:992px){
  .kfe-product .single-product-wrapper .product-gallery{position:sticky;top:calc(var(--kfe-header-h) + 24px)}
}

/* ---------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------ */
.kfe-faq{border:1px solid var(--kfe-line);border-radius:var(--kfe-r);overflow:hidden;background:var(--kfe-surface)}
.kfe-faq details{border-bottom:1px solid var(--kfe-line-2)}
.kfe-faq details:last-child{border-bottom:0}
.kfe-faq summary{list-style:none;cursor:pointer;padding:19px 56px 19px 22px;font-size:15px;font-weight:600;position:relative;transition:background .15s}
.kfe-faq summary::-webkit-details-marker{display:none}
.kfe-faq summary:hover{background:var(--kfe-surface-2)}
.kfe-faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--kfe-ink-3);border-bottom:2px solid var(--kfe-ink-3);
  transform:rotate(45deg);transition:transform .2s
}
.kfe-faq details[open] summary{color:var(--kfe-brand)}
.kfe-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.kfe-faq .ans{padding:0 22px 20px;font-size:14px;color:var(--kfe-ink-2);line-height:1.75;max-width:80ch}

/* ---------------------------------------------------------------------------
   REFERENCES + LEGAL
   ------------------------------------------------------------------------ */
ol.kfe-refs{font-size:12.5px;color:var(--kfe-ink-3);line-height:1.9;counter-reset:kfer;list-style:none;margin:32px 0 0;padding:0}
ol.kfe-refs li{counter-increment:kfer;padding-left:26px;position:relative}
ol.kfe-refs li::before{content:"[" counter(kfer) "]";position:absolute;left:0;font-variant-numeric:tabular-nums}
ol.kfe-refs a{color:var(--kfe-brand)}

.kfe-legal{background:var(--kfe-surface-2);border-top:1px solid var(--kfe-line);padding:40px 0;font-size:12.5px;color:var(--kfe-ink-3);line-height:1.8}
.kfe-legal b{color:var(--kfe-ink-2)}
.kfe-legal p{margin:0 0 12px}
.kfe-legal p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */
@media(max-width:1024px){
  .kfe-grid-4{grid-template-columns:repeat(2,1fr)}
  .kfe-kit{grid-template-columns:repeat(2,1fr)}
  .kfe-aplus{grid-template-columns:1fr;gap:28px}
  .kfe-aplus.flip .kfe-a-media{order:0}
}
@media(max-width:782px){
  .kfe-section{padding:44px 0}
  .kfe-section.is-tinted{padding:36px 20px;margin-block:24px}
  .kfe-spec-strip{grid-template-columns:repeat(2,1fr)}
  .kfe-grid-2,.kfe-grid-3{grid-template-columns:1fr}
  .kfe-assure{grid-template-columns:1fr}
  .kfe-timeline{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,1fr);gap:32px 0}
  .kfe-timeline::before{display:none}
}
@media(max-width:520px){
  .kfe-grid-4,.kfe-kit{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   PRINT — practitioners do print these for their prep room
   ------------------------------------------------------------------------ */
@media print{
  .kfe-navtabs,.kfe-widget-slot{display:none}
  .kfe-faq details{border:0}
  .kfe-faq details:not([open]) .ans{display:block}
  .kfe-section{padding:18px 0;break-inside:avoid}
}