/*
Theme Name: Jaydema Foods
Theme URI: https://jaydemafoods.com
Author: Hi-Mars Tech and Brands
Author URI: https://www.himars.com.ng
Description: Custom WooCommerce theme for Jaydema Foods — Nigerian local foods, flours, spices, superfoods and personal shopping/gifting services.
Version: 3.31
Requires PHP: 7.4
Text Domain: jaydema
*/

:root{
  --jd-green: #2f9e44;
  --jd-green-dark: #1f7a30;
  --jd-green-light: #eaf7ea;
  --jd-gold: #e0a233;
  --jd-navy: #1c2f4a;
  --jd-red: #ef5b53;
  --jd-cream: #f4faf2;
  --jd-gray: #59615b;
  --jd-border: #e6ece6;
  --jd-radius: 10px;
}

*{box-sizing:border-box;}
/* Body copy sits at 450. Poppins ships static 400 and 500 faces, and the
   CSS font-matching rules resolve a 450 request upward to 500, so this is
   a deliberate half-step that becomes a true half-step if a variable
   Poppins is ever loaded. Paired with darker greys, since perceived
   weight is as much contrast as it is stroke thickness. */
body{margin:0;font-family:'Poppins',Arial,sans-serif;font-weight:450;color:#333b36;background:#fff;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:var(--jd-navy);margin:0 0 .5em;font-weight:700;letter-spacing:-.01em;}
h1{font-size:46px;line-height:1.15;}
h2{font-size:32px;line-height:1.25;}
h3{font-size:22px;}
h4{font-size:17px;margin-bottom:.35em;}
p{color:var(--jd-gray);font-weight:450;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1240px;margin:0 auto;padding:0 20px;}
.jd-center{text-align:center;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.jd-skip-link{position:absolute;left:-9999px;}
.jd-skip-link:focus{left:10px;top:10px;z-index:999;background:#fff;padding:10px 16px;border-radius:6px;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--jd-gold);outline-offset:2px;}

.btn{display:inline-block;background:var(--jd-green);color:#fff;padding:14px 30px;border-radius:6px;font-weight:600;border:none;cursor:pointer;transition:background .2s;font-family:inherit;font-size:15px;}
.btn:hover{background:var(--jd-green-dark);color:#fff;}
.btn-red{background:var(--jd-red);}
.btn-red:hover{background:#d6473f;}
.btn-outline{background:transparent;border:2px solid var(--jd-green);color:var(--jd-green);}
.btn-outline:hover{background:var(--jd-green);color:#fff;}
.btn-outline-light{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff;}
.btn-outline-light:hover{background:#fff;color:var(--jd-green-dark);}

/* Top bar */
.jd-topbar{background:var(--jd-green-dark);color:#fff;font-size:13px;padding:7px 0;}
.jd-topbar-viewport{display:flex;align-items:center;overflow:hidden;}
.jd-topbar-track{display:flex;align-items:center;gap:14px;width:100%;white-space:nowrap;}
.jd-topbar-track .jd-topbar-contact{margin-left:auto;}
.jd-topbar-sep,
.jd-topbar-clone{display:none;}

/* Header */
/* Sticky header. The green announcement bar scrolls away with the page —
   it is read once — while the bar you navigate with stays put. */
.jd-header{
  padding:14px 0;border-bottom:1px solid #eee;
  position:sticky;top:0;z-index:50;background:#fff;
  transition:padding .18s, box-shadow .18s;
}
/* Shadow only — no padding change. Anything that alters the header's
   height while it is sticky moves the document and makes it oscillate. */
.jd-header.is-stuck{box-shadow:0 6px 22px rgba(0,0,0,.10);}
.jd-header .jd-logo{transition:transform .18s ease;transform-origin:left center;}
.jd-header.is-stuck .jd-logo{transform:scale(.88);}
/* Clear the WordPress admin bar, which is itself fixed to the top. */
body.admin-bar .jd-header{top:32px;}
@media screen and (max-width:782px){body.admin-bar .jd-header{top:46px;}}
.jd-header .container{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;}
.jd-logo img,
.jd-logo .custom-logo{max-height:72px !important;width:auto !important;height:auto !important;object-fit:contain;}
@media (max-width:640px){.jd-logo img,.jd-logo .custom-logo{max-height:54px !important;}}

.jd-nav ul{list-style:none;display:flex;gap:38px;margin:0;padding:0;}
.jd-nav a{font-weight:600;color:var(--jd-navy);}
.jd-nav a:hover{color:var(--jd-green);}
.jd-header-icons{display:flex;align-items:center;gap:20px;}
.jd-header-icons a{position:relative;font-size:20px;color:var(--jd-navy);}
.jd-badge{position:absolute;top:-8px;right:-10px;background:var(--jd-green);color:#fff;font-size:11px;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.jd-badge[hidden]{display:none;}
/* WooCommerce's own spinner/tick states on an AJAX add */
.jd-product-card a.button.loading{opacity:.7;pointer-events:none;position:relative;}
.jd-product-card a.button.added{background:var(--jd-green-dark) !important;}
/* A wider, taller search field. It is the fastest route to a product
   on a 47-item catalogue, so it earns the space. */
.jd-search{position:relative;display:flex;align-items:center;border:1px solid #dcdcdc;border-radius:30px;padding:10px 18px;flex:1;min-width:230px;max-width:420px;background:#fafbfa;transition:border-color .15s,background .15s;}
.jd-search:focus-within{border-color:var(--jd-green);background:#fff;box-shadow:0 0 0 3px rgba(47,158,68,.12);}
.jd-search input{border:none;outline:none;flex:1;font-size:15px;background:transparent;font-family:inherit;min-width:0;}
.jd-search button{background:none;border:none;cursor:pointer;color:var(--jd-green-dark);font-size:17px;padding:0 0 0 8px;}
.jd-mobile-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--jd-navy);}

/* ============================================================
   HERO — dark, full-bleed, product-led
   ============================================================
   The pale version put a small pack picture next to large type on a
   near-white field, so the eye landed on the heading and slid past the
   product. Inverting it — dark ground, type reduced, packs enlarged and
   given room — makes the product the thing you see first, which is what
   a food shop is selling. */
.jd-hero{
  position:relative;
  padding:78px 0 116px;
  overflow:hidden;
  background:#0d2416;
  isolation:isolate;
}
.jd-hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 28%, rgba(64,166,88,.42) 0%, rgba(64,166,88,0) 58%),
    radial-gradient(90% 80% at 10% 90%, rgba(224,162,51,.20) 0%, rgba(224,162,51,0) 55%),
    linear-gradient(135deg,#123018 0%,#0f2a1c 45%,#12283c 100%);
}
/* A faint diagonal weave keeps the dark ground from looking like flat ink */
.jd-hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.05;
  background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 9px);
}
.jd-hero .container{position:relative;z-index:2;}

.jd-hero-badge{
  display:inline-block;background:var(--jd-gold);color:#20180a;
  font-weight:600;padding:7px 18px;border-radius:20px;margin-bottom:20px;font-size:13px;letter-spacing:.01em;
}
.jd-hero h1{
  font-size:42px;line-height:1.12;color:#fff;margin:0 0 16px;
  text-shadow:0 2px 20px rgba(0,0,0,.28);
}
.jd-hero p{color:#cfe3d4;font-size:16.5px;margin:0 0 28px;max-width:460px;}
.jd-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* Price flag sits under the copy now, rather than floating over the packs
   where it covered the two bags behind it. */
.jd-hero-price{
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:30px;padding:14px 22px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.jd-hero-price .amount{color:var(--jd-gold);font-size:26px;font-weight:700;line-height:1;}
.jd-hero-price .unit{color:#b9d3c0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.jd-hero-price .label{color:#dbeade;font-size:12.5px;flex-basis:100%;line-height:1.4;}

/* Slider */
.jd-hero-slider{position:relative;}
.jd-hero-slides{position:relative;}
/* Packs take the larger share of the row — 1fr copy to 1.25fr image. */
.jd-hero-slide{display:none;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center;min-height:430px;}
.jd-hero-slide.is-active{display:grid;animation:jd-fade .55s ease;}
.jd-hero-image{position:relative;display:flex;align-items:center;justify-content:center;}
.jd-hero-image img{
  /* Capped so a tall service composite cannot push past the wave at the
     bottom of the hero the way an uncapped 100% width did. */
  width:auto;max-width:100%;max-height:430px;height:auto;margin:0 auto;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.42));
}
.jd-hero-image.is-icon{
  min-height:300px;border-radius:20px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
}
.jd-hero-image.is-icon i{font-size:108px;color:var(--jd-gold);}

.jd-hero-dots{display:flex;justify-content:center;gap:9px;margin-top:26px;}
.jd-hero-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.28);cursor:pointer;padding:0;transition:width .2s,background .2s;}
.jd-hero-dot.is-active{width:26px;border-radius:6px;background:var(--jd-gold);}
.jd-hero-arrow{
  position:absolute;top:46%;transform:translateY(-50%);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  width:44px;height:44px;border-radius:50%;cursor:pointer;color:#fff;z-index:5;
  backdrop-filter:blur(4px);transition:background .18s;
}
.jd-hero-arrow:hover{background:rgba(255,255,255,.24);}
.jd-hero-prev{left:-14px;}
.jd-hero-next{right:-14px;}
.jd-hero-wave{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:3;}

/* Trust bar */
.jd-trustbar{background:#fff;border-bottom:1px solid var(--jd-border);padding:26px 0;}
.jd-trustbar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.jd-trust-item{display:flex;gap:14px;align-items:center;}
.jd-trust-item i{font-size:24px;color:var(--jd-green);width:40px;text-align:center;flex-shrink:0;}
.jd-trust-item strong{display:block;color:var(--jd-navy);font-size:15px;font-weight:600;}
.jd-trust-item span{display:block;font-size:13.5px;color:var(--jd-gray);font-weight:450;line-height:1.45;}

/* Sections */
.jd-section{padding:70px 0;}
.jd-section-title{text-align:center;margin-bottom:40px;}
.jd-section-title p{margin:6px 0 0;font-size:15px;}

/* Category grid */
.jd-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.jd-cat-card{background:var(--jd-green-light);border:1px solid #dcefdc;border-radius:var(--jd-radius);text-align:center;padding:26px 12px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.jd-cat-card:hover{border-color:var(--jd-green);transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.08);}
.jd-cat-photo{display:block;width:104px;height:104px;margin:0 auto 14px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.09);}
.jd-cat-photo img{width:100%;height:100%;object-fit:cover;}
.jd-search-thumb img{object-fit:contain;background:#fff;}
.jd-compare-slot img{object-fit:contain;background:#fff;}
.jd-row-image img{object-fit:contain !important;background:#fff;}
.jd-cat-card.has-image{padding-top:22px;}
.jd-cat-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:#fff;color:var(--jd-green);font-size:26px;box-shadow:0 4px 10px rgba(0,0,0,.06);}
.jd-cat-card h4{font-size:15px;margin:0;}
.jd-cat-count{display:block;font-size:12px;color:var(--jd-gray);margin-top:4px;}
.jd-cat-card-services{background:var(--jd-navy);border-color:var(--jd-navy);}
.jd-cat-card-services h4{color:#fff;}
.jd-cat-card-services .jd-cat-count{color:#c3d3e6;}
.jd-cat-card-services .jd-cat-icon{background:rgba(255,255,255,.12);color:var(--jd-gold);box-shadow:none;}

/* Sub-category chips */
.jd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.jd-chip{display:inline-block;background:#fff;border:1px solid var(--jd-border);border-radius:30px;padding:7px 16px;font-size:13px;font-weight:500;color:var(--jd-navy);transition:background .15s,border-color .15s,color .15s;}
.jd-chip:hover{background:var(--jd-green-light);border-color:var(--jd-green);color:var(--jd-green-dark);}
.jd-chip.is-active{background:var(--jd-green);border-color:var(--jd-green);color:#fff;}

/* Browse Every Item — tabbed directory */
.jd-directory{background:var(--jd-cream);}
.jd-dir-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px;}
.jd-dir-tab{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--jd-border);border-radius:30px;padding:10px 20px;font-family:'Poppins',Arial,sans-serif;font-size:14px;font-weight:600;color:var(--jd-navy);cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.jd-dir-tab:hover{border-color:var(--jd-green);color:var(--jd-green-dark);}
.jd-dir-tab.is-active{background:var(--jd-green);border-color:var(--jd-green);color:#fff;}
.jd-dir-tab-count{background:rgba(28,47,74,.08);border-radius:20px;padding:1px 8px;font-size:12px;font-weight:600;}
.jd-dir-tab.is-active .jd-dir-tab-count{background:rgba(255,255,255,.24);color:#fff;}
.jd-dir-panel{display:none;}
.jd-dir-panel.is-active{display:block;animation:jd-fade .3s ease;}
.jd-dir-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.jd-dir-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--jd-border);border-left:3px solid var(--jd-green);border-radius:8px;padding:14px 16px;transition:transform .15s,box-shadow .15s,border-left-color .15s;}
.jd-dir-item:hover{transform:translateX(3px);box-shadow:0 6px 16px rgba(0,0,0,.07);border-left-color:var(--jd-gold);}
.jd-dir-item-name{font-size:14.5px;font-weight:500;color:var(--jd-navy);line-height:1.3;}
.jd-dir-item-count{font-size:12px;color:var(--jd-gray);background:var(--jd-green-light);border-radius:20px;padding:2px 9px;flex-shrink:0;}
.jd-dir-all{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-weight:600;color:var(--jd-green-dark);font-size:15px;}
.jd-dir-all:hover{gap:14px;color:var(--jd-green);}
.jd-dir-all i{transition:transform .15s;}

/* Tabs */
.jd-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:34px;flex-wrap:wrap;}
.jd-tab{background:transparent;border:1px solid var(--jd-border);border-radius:30px;padding:9px 22px;font-family:inherit;font-size:14px;font-weight:600;color:var(--jd-navy);cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.jd-tab:hover{border-color:var(--jd-green);color:var(--jd-green);}
.jd-tab.is-active{background:var(--jd-green);border-color:var(--jd-green);color:#fff;}
.jd-tab-panel{display:none;}
.jd-tab-panel.is-active{display:block;}
.jd-empty{text-align:center;color:var(--jd-gray);padding:20px 0;}

/* Product cards */
/* Row gap is deliberately larger than the column gap. Equal gaps make
   stacked rows read as one dense block; a taller row gap separates them
   without spreading the row itself apart. */
.jd-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 18px;}
.jd-product-card{border:1px solid var(--jd-border);border-radius:var(--jd-radius);overflow:hidden;background:#fff;transition:box-shadow .2s;display:flex;flex-direction:column;}
.jd-product-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.1);}
/* Product images are pouch renders on a white field, so they must be
   shown whole. object-fit:cover was slicing the zip off the top and the
   shadow off the bottom of every bag. `contain` plus a white ground fits
   the whole pack in, and the small inset keeps it off the card edges. */
.jd-product-card .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;display:block;padding:10px;}
.jd-product-card .thumb img{width:100%;height:100%;object-fit:contain;}
.jd-product-card .body{padding:14px;display:flex;flex-direction:column;flex:1;}
/* Card titles use Poppins, not Playfair. At 15px a serif reads thin and
   decorative; a semibold sans is what makes a product name scannable in a
   grid. Section headings stay Playfair, so the brand pairing is intact. */
.jd-product-title{font-family:'Poppins',Arial,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.005em;color:var(--jd-navy);margin:0 0 6px;line-height:1.3;}
.jd-product-title a:hover{color:var(--jd-green);}
.jd-product-card .short-desc{font-size:13px;color:var(--jd-gray);font-weight:450;margin:4px 0 10px;line-height:1.4;}
.jd-product-card .price{color:var(--jd-red);font-weight:700;font-size:17px;margin-top:auto;margin-bottom:10px;}
.jd-product-card .price del{color:#aaa;font-weight:400;font-size:14px;margin-right:6px;}
.jd-price-request{color:var(--jd-navy);font-weight:600;font-size:15px;}
.jd-flag{position:absolute;top:10px;left:10px;color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;}
.jd-flag-sale{background:var(--jd-red);}
.jd-flag-oos{background:var(--jd-navy);left:auto;right:10px;}

/* Bulk / export band */
.jd-band{background:var(--jd-navy);color:#fff;padding:64px 0;}
.jd-band-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center;}
.jd-band h2{color:#fff;}
.jd-band p{color:#cddaea;max-width:560px;}
.jd-band-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.jd-band-list{list-style:none;margin:0;padding:0;}
.jd-band-list li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);color:#e4ecf5;font-size:15px;}
.jd-band-list li:last-child{border-bottom:none;}
.jd-band-list i{color:var(--jd-gold);margin-right:10px;}

/* How Ordering Works — each step gets its own colour so the sequence reads
   at a glance and the section doesn't disappear into the page. */
.jd-steps-section{background:linear-gradient(180deg,#fff 0%,var(--jd-cream) 100%);}
.jd-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;}
.jd-step{position:relative;padding:34px 28px 30px;border-radius:16px;background:#fff;border:1px solid var(--jd-border);overflow:hidden;transition:transform .2s,box-shadow .2s;}
.jd-step:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.09);}
.jd-step::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--jd-step-color);}
.jd-step-1{--jd-step-color:var(--jd-green);--jd-step-tint:#eaf7ea;}
.jd-step-2{--jd-step-color:var(--jd-gold);--jd-step-tint:#fdf3e2;}
.jd-step-3{--jd-step-color:var(--jd-navy);--jd-step-tint:#e9eef5;}
.jd-step-num{position:absolute;top:26px;right:26px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--jd-step-color);color:#fff;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:16px;}
.jd-step-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:16px;background:var(--jd-step-tint);color:var(--jd-step-color);font-size:24px;margin-bottom:18px;}
.jd-step h4{margin-bottom:8px;font-size:19px;padding-right:40px;}
.jd-step p{font-size:14.5px;margin:0;}

/* Breathing room under the tabbed product row's button */
.jd-tabs-cta{margin-top:44px;}

/* Reviews */
.jd-reviews{background:var(--jd-cream);}
.jd-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.jd-review-card{background:#fff;border:1px solid var(--jd-border);border-radius:var(--jd-radius);padding:28px;margin:0;}
.jd-review-card p{font-size:15px;color:#4a4a4a;margin:0 0 16px;}
.jd-review-card cite{font-style:normal;font-weight:600;color:var(--jd-navy);font-size:14px;}

/* Newsletter */
.jd-newsletter{background:var(--jd-green-dark);padding:52px 0;}
.jd-newsletter-inner{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.jd-newsletter h2{color:#fff;font-size:26px;margin:0;}
.jd-newsletter p{color:#d6efd6;margin:6px 0 0;font-size:15px;}
.jd-newsletter-form{display:flex;gap:10px;}
.jd-newsletter-form input{flex:1;border:none;border-radius:6px;padding:14px 16px;font-family:inherit;font-size:15px;}
.jd-newsletter-form .btn{background:var(--jd-gold);color:var(--jd-navy);white-space:nowrap;}
.jd-newsletter-form .btn:hover{background:#c98f22;color:var(--jd-navy);}

/* Homepage promo banners */
.jd-promo-banner{background-size:cover;background-position:center;padding:70px 0;text-align:center;}
.jd-promo-banner-inner h2{color:#fff;font-size:30px;}
.jd-promo-banner-inner p{color:#eaf7ea;max-width:520px;margin:10px auto 22px;}
.jd-promo-price{font-size:22px;color:#fff !important;font-weight:700;}

/* ============================================================
   OUR SERVICES
   ============================================================
   Was flat green cards on a flat green field, which gave the section no
   depth and left the gold icons floating. Now it borrows the hero's
   treatment — a dark gradient ground with a warm glow — so the cards can
   sit on it as lit glass rather than as slightly different green.
   Content is left-aligned too: centred text blocks are fine for one line
   and awkward for three. */
.jd-services{
  position:relative;
  background:linear-gradient(160deg,#12301c 0%,#0f2a1c 42%,#13283b 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.jd-services::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(70% 60% at 82% 12%, rgba(224,162,51,.16) 0%, rgba(224,162,51,0) 60%),
    radial-gradient(60% 55% at 8% 92%, rgba(64,166,88,.20) 0%, rgba(64,166,88,0) 62%);
}
.jd-services .jd-section-title h2{color:#fff;}
.jd-services .jd-section-title p{color:#b7ccbd;}

.jd-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

.jd-service-card{
  position:relative;display:block;overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;padding:28px 26px 26px;
  text-align:left;
  transition:background .22s, border-color .22s, transform .22s, box-shadow .22s;
}
/* A gold rule that draws itself in on hover, rather than four cards that
   all look permanently highlighted. */
.jd-service-card::after{
  content:"";position:absolute;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--jd-gold),#f0c877);
  transition:width .28s ease;
}
.jd-service-card:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(224,162,51,.42);
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
}
.jd-service-card:hover::after{width:100%;}

.jd-service-icon{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:0 0 18px;border-radius:15px;
  background:linear-gradient(140deg,rgba(224,162,51,.26),rgba(224,162,51,.07));
  border:1px solid rgba(224,162,51,.32);
  color:var(--jd-gold);font-size:22px;
  transition:transform .22s;
}
.jd-service-card:hover .jd-service-icon{transform:scale(1.07) rotate(-4deg);}

.jd-service-card h4{color:#fff;font-size:18px;margin:0 0 8px;line-height:1.3;}
.jd-service-card p{color:#c3d8ca;font-size:14.5px;font-weight:450;margin:0;line-height:1.6;}
.jd-service-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:var(--jd-gold);
}
.jd-service-card:hover .jd-service-more{gap:13px;}
.jd-service-more i{transition:transform .15s;}

/* Photo variant keeps the same shell, with the image bled to the edges */
.jd-service-card.has-photo{padding:0;}
.jd-service-photo{aspect-ratio:16/10;overflow:hidden;background:rgba(255,255,255,.06);}
.jd-service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.jd-service-card.has-photo:hover .jd-service-photo img{transform:scale(1.05);}
.jd-service-card.has-photo .jd-service-body{padding:22px 24px 26px;}

.jd-services-empty{grid-column:1 / -1;background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.3);border-radius:16px;padding:26px;}
.jd-services-empty p{color:#dbeade;margin:0;font-size:14px;}
.jd-services-empty strong{color:#fff;}

/* Per-category homepage product rows */
.jd-category-row{padding:60px 0;}
.jd-category-row:nth-of-type(even){background:var(--jd-cream);}
.jd-category-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:14px;}
.jd-category-row-head h2{margin:0;font-size:26px;}

/* Page banners */
.jd-page-banner{background:linear-gradient(135deg,var(--jd-green) 0%,var(--jd-green-dark) 100%);padding:56px 0;text-align:center;color:#fff;}
/* With artwork behind it the banner grows, and the type moves left so it
   sits on the darker end of the overlay rather than over the picture. */
.jd-page-banner.has-bg{
  background-size:cover;background-position:center right;
  padding:74px 0;text-align:left;
}
.jd-page-banner.has-bg .container{max-width:1240px;}
.jd-page-banner.has-bg h1{max-width:660px;}
.jd-page-banner.has-bg p{margin-left:0;max-width:560px;}
@media (max-width:760px){
  .jd-page-banner.has-bg{padding:52px 0;background-position:center;}
  .jd-page-banner.has-bg h1{font-size:30px;}
}
.jd-page-banner h1{color:#fff;margin:0;font-size:38px;}
.jd-page-banner p{color:#dff5df;margin:8px auto 0;max-width:640px;}
.jd-crumbs{font-size:13px;color:#cdebcd;margin-bottom:14px;}
.jd-crumbs a:hover{color:#fff;text-decoration:underline;}
.jd-crumbs span{margin:0 6px;}
.jd-crumb-current{color:#fff;font-weight:600;}

/* Shop filter bar + toolbar */
.jd-shop-filter{background:#fff;border-bottom:1px solid var(--jd-border);padding:16px 0;position:sticky;top:var(--jd-header-h,84px);z-index:15;}
.jd-shop-filter-inner{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.jd-shop-filter-inner::-webkit-scrollbar{height:4px;}
.jd-shop-filter-inner::-webkit-scrollbar-thumb{background:#d8e6d8;border-radius:4px;}
.jd-shop-filter .jd-chip{white-space:nowrap;}
.jd-shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--jd-border);}
.jd-shop-toolbar .woocommerce-result-count{margin:0;color:var(--jd-gray);font-size:14px;}
.jd-shop-toolbar .woocommerce-ordering{margin:0;}
.jd-shop-toolbar select{border:1px solid var(--jd-border);border-radius:6px;padding:9px 14px;font-family:inherit;font-size:14px;background:#fff;color:var(--jd-navy);}

/* Footer */
.jd-footer{background:var(--jd-green-dark);color:#e3f3e3;padding:60px 0 20px;}
.jd-footer h4{color:#fff;font-size:16px;}
.jd-footer p{color:#dcf3dc;font-size:14px;}
.jd-footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1.2fr 1fr 1.4fr;gap:26px;}
.jd-footer-list{list-style:none;padding:0;margin:0;font-size:14px;}
.jd-footer-list li{margin-bottom:7px;}
.jd-footer a{color:#dcf3dc;}
.jd-footer a:hover{color:var(--jd-gold);}
.jd-footer-bottom{color:#bfe3bf;border-top:1px solid rgba(255,255,255,.15);margin-top:40px;padding-top:20px;text-align:center;font-size:13px;}

/* Floating WhatsApp */
.jd-whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:60;background:#25d366;color:#fff;border-radius:40px;padding:13px 20px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;box-shadow:0 8px 22px rgba(0,0,0,.2);}
.jd-whatsapp-float i{font-size:20px;}
.jd-whatsapp-float:hover{background:#1eb455;color:#fff;}

/* WooCommerce overrides */
/* CRITICAL: WooCommerce's own stylesheet adds a clearfix
   `.woocommerce ul.products::before/::after { content:" "; display:table; }`.
   That was written for a float layout. Inside a CSS grid those two
   pseudo-elements become real grid items, and ::before silently eats the
   first cell of the first row — which is why the shop page rendered with an
   empty first column and every product shifted one place to the right.
   Killing the pseudo-elements is the fix; do not remove these two rules. */
ul.products::before,
ul.products::after,
.jd-product-grid::before,
.jd-product-grid::after,
.jd-blog-grid::before,
.jd-blog-grid::after,
.jd-cat-grid::before,
.jd-cat-grid::after{display:none !important;content:none !important;}

ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:38px 18px;list-style:none;padding:0;margin:0;}
ul.products li.product{margin:0 !important;width:auto !important;float:none !important;clear:none !important;}
ul.products li.product.first,
ul.products li.product.last{clear:none !important;}
.jd-product-card a.button,
.jd-product-card .button{display:inline-block;margin-top:0;background:var(--jd-green);color:#fff;padding:9px 18px;border-radius:6px;font-size:13px;font-weight:600;align-self:flex-start;border:none;cursor:pointer;}
.jd-product-card a.button:hover,
.jd-product-card .button:hover{background:var(--jd-green-dark);color:#fff;}
.jd-product-card .added_to_cart{display:inline-block;margin-left:8px;font-size:13px;color:var(--jd-green-dark);text-decoration:underline;}
.woocommerce-pagination{text-align:center;margin-top:40px;}
.woocommerce-pagination ul{display:inline-flex;gap:6px;list-style:none;padding:0;border:none !important;}
.woocommerce-pagination ul li{border:none !important;}
.woocommerce-pagination a,
.woocommerce-pagination span{display:block;min-width:40px;padding:9px 12px;border:1px solid var(--jd-border);border-radius:6px;color:var(--jd-navy);}
.woocommerce-pagination span.current{background:var(--jd-green);border-color:var(--jd-green);color:#fff;}
.woocommerce-no-products-found{padding:40px 0;text-align:center;}

.single-product .summary .price{color:var(--jd-red);font-size:26px;font-weight:700;}
.single-product .cart .button,
.single-product a.button{background:var(--jd-red);color:#fff;padding:14px 30px;border-radius:6px;font-weight:600;border:none;cursor:pointer;}
.single-product .cart .button:hover{background:var(--jd-green-dark);}
.single-product .woocommerce-product-gallery{border-radius:var(--jd-radius);overflow:hidden;}
.related.products > h2{font-family:'Playfair Display',serif;color:var(--jd-navy);}

/* ============================================================
   CART — grid, not table
   ============================================================
   The default cart table kept sizing its own columns and pushing the
   price, quantity and subtotal off the right-hand edge of the screen. It
   survived declared widths and it survived `table-layout: fixed`, so the
   template no longer uses a table at all. Each line is a grid whose
   columns are declared here and negotiated with nothing.
   ============================================================ */
.jd-cart{
  display:grid !important;
  grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);
  gap:34px;align-items:start;
}
.jd-cart .woocommerce-cart-form,
.jd-cart .jd-cart-form{min-width:0;max-width:100%;float:none !important;width:auto !important;}

.jd-cart-list{
  background:#fff;border:1px solid var(--jd-border);border-radius:14px;
  overflow:hidden;color:#333b36;
}

/* thumb | name | price | qty | subtotal | remove */
.jd-cart-head,
.jd-cart-line{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) 118px 112px 124px 46px;
  align-items:center;gap:14px;
  padding:16px 16px;
}
.jd-cart-head{
  background:var(--jd-cream);border-bottom:1px solid var(--jd-border);
  padding-top:14px;padding-bottom:14px;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--jd-navy);
}
.jd-cart-line{border-bottom:1px solid var(--jd-border);}
.jd-cart-line:last-of-type{border-bottom:none;}

.jd-cl-thumb img{
  width:70px;height:70px;object-fit:contain;background:#fff;
  border:1px solid var(--jd-border);border-radius:9px;padding:4px;display:block;}
.jd-cl-name{min-width:0;font-size:15px;line-height:1.4;overflow-wrap:anywhere;}
.jd-cl-name a{font-weight:600;color:var(--jd-navy);}
.jd-cl-name a:hover{color:var(--jd-green);}
.jd-cl-name dl.variation{margin:5px 0 0;font-size:13px;color:var(--jd-gray);}
.jd-cl-name dl.variation dt,
.jd-cl-name dl.variation dd,
.jd-cl-name dl.variation dd p{display:inline;margin:0;}
.jd-cl-price,
.jd-cl-sub{font-size:15px;color:#333b36;}
.jd-cl-sub{font-weight:700;color:var(--jd-red);}
.jd-cl-qty .quantity{margin:0;}
.jd-cl-qty input.qty{width:82px !important;}
.jd-cl-remove{text-align:right;}
.jd-cl-remove a.remove{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:#f2f4f2;color:var(--jd-gray) !important;
  font-size:18px;line-height:1;text-decoration:none;}
.jd-cl-remove a.remove:hover{background:var(--jd-red);color:#fff !important;}

.jd-cart-actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--jd-cream);border-top:1px solid var(--jd-border);padding:18px 16px;}
.jd-cart-actions .coupon{display:flex;gap:10px;align-items:center;}
.jd-cart-actions .coupon input#coupon_code{width:200px !important;padding:12px 14px;}
.jd-cart-actions .jd-update-cart{margin-left:auto;}

/* Totals card. WooCommerce floats this right at 48% by default, which is
   what put it on top of the items. */
.cart-collaterals{width:100% !important;float:none !important;min-width:0;}
.cart-collaterals .cart_totals{
  width:100% !important;float:none !important;
  background:#fff;border:1px solid var(--jd-border);border-radius:14px;padding:24px;
  position:sticky;top:calc(var(--jd-header-h,84px) + 18px);}
.cart-collaterals h2{font-size:20px;margin:0 0 14px;color:var(--jd-navy);}
.cart-collaterals table{width:100%;border-collapse:collapse;table-layout:fixed;}
.cart-collaterals th{text-align:left;padding:12px 0;font-size:14px;color:var(--jd-gray);
  font-weight:500;border-bottom:1px solid var(--jd-border);text-transform:none;
  letter-spacing:0;background:none;}
.cart-collaterals td{text-align:right;padding:12px 0;font-size:15px;font-weight:600;
  color:var(--jd-navy);border-bottom:1px solid var(--jd-border);}
.cart-collaterals tr.order-total th,
.cart-collaterals tr.order-total td{border-bottom:none;padding-top:16px;font-size:18px;}
.cart-collaterals tr.order-total td{color:var(--jd-red);font-weight:700;}
.cart-collaterals .wc-proceed-to-checkout{padding-top:18px;}
.cart-collaterals .checkout-button{display:block;text-align:center;width:100%;}
.cart-collaterals .woocommerce-shipping-destination,
.cart-collaterals .shipping-calculator-button{font-size:13px;}

.woocommerce-cart .cart-empty,
.woocommerce-cart .return-to-shop{text-align:center;}
.woocommerce-cart .return-to-shop{margin-top:18px;}

/* Checkout */
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:auto !important;float:none !important;}
.woocommerce-checkout table.shop_table{table-layout:fixed;width:100%;border-collapse:separate;
  border-spacing:0;background:#fff;border:1px solid var(--jd-border);border-radius:14px;
  overflow:hidden;color:#333b36;}
.woocommerce-checkout table.shop_table th{background:var(--jd-cream);color:var(--jd-navy);
  text-align:left;padding:14px;font-size:13px;}
.woocommerce-checkout table.shop_table td{padding:14px;border-bottom:1px solid var(--jd-border);
  overflow-wrap:anywhere;}
.woocommerce #payment{background:#fff;border:1px solid var(--jd-border);border-radius:14px;
  padding:20px;margin-top:20px;}
.woocommerce #payment #place_order{width:100%;}

@media (max-width:1080px){
  .jd-cart{grid-template-columns:1fr;gap:24px;}
  .cart-collaterals .cart_totals{position:static;}
  .woocommerce-checkout .col2-set{grid-template-columns:1fr;}
}

@media (max-width:820px){
  /* Six columns cannot be read at this width at any font size, so each
     line becomes a small card: picture left, everything else stacked
     beside it, and the column headings printed inline from data-label. */
  .jd-cart-head{display:none;}
  .jd-cart-list{background:transparent;border:none;overflow:visible;}
  .jd-cart-line{
    grid-template-columns:86px minmax(0,1fr) 34px;
    grid-template-areas:"thumb name remove" "thumb price price" "thumb qty sub";
    row-gap:8px;background:#fff;border:1px solid var(--jd-border);
    border-radius:14px;margin-bottom:14px;padding:16px;}
  .jd-cl-thumb{grid-area:thumb;align-self:start;}
  .jd-cl-name{grid-area:name;}
  .jd-cl-price{grid-area:price;}
  .jd-cl-qty{grid-area:qty;}
  .jd-cl-sub{grid-area:sub;text-align:right;}
  .jd-cl-remove{grid-area:remove;}
  .jd-cl-price::before,
  .jd-cl-sub::before{content:attr(data-label) ": ";color:var(--jd-gray);
    font-size:12.5px;font-weight:500;text-transform:none;}
  .jd-cart-actions{background:#fff;border:1px solid var(--jd-border);border-radius:14px;padding:16px;}
  .jd-cart-actions .coupon{width:100%;}
  .jd-cart-actions .coupon input#coupon_code{width:100% !important;}
  .jd-cart-actions .jd-update-cart{margin-left:0;width:100%;}
}

@media (max-width:420px){
  .jd-cart-line{grid-template-columns:64px minmax(0,1fr) 30px;padding:14px;}
  .jd-cl-thumb img{width:56px;height:56px;}
  .cart-collaterals .cart_totals{padding:20px 16px;}
}

.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;border:1px solid #eee;border-radius:var(--jd-radius);overflow:hidden;}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid #eee;}
.woocommerce-MyAccount-navigation li a{display:block;padding:12px 18px;}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--jd-green);color:#fff;}
.woocommerce-MyAccount-content .button{background:var(--jd-green);border-radius:6px;color:#fff;}

/* Responsive */
@media (max-width:1100px){
  .jd-cat-grid{grid-template-columns:repeat(3,1fr);}
  .jd-footer-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:960px){
  h1{font-size:34px;}
  h2{font-size:26px;}
  .jd-hero{padding:46px 0 84px;}
  .jd-hero h1{font-size:31px;}
  .jd-hero-arrow{display:none;}
  /* Image first on a narrow screen — the packs are the hook */
  .jd-hero-slide{grid-template-columns:1fr;gap:26px;min-height:0;}
  .jd-hero-image{order:-1;}
  .jd-hero p{max-width:none;}
  ul.products{grid-template-columns:repeat(2,1fr) !important;}
  .jd-trustbar-grid{grid-template-columns:repeat(2,1fr);}
  .jd-cat-grid{grid-template-columns:repeat(3,1fr);}
  .jd-browse-grid{grid-template-columns:repeat(2,1fr);}
  .jd-product-grid{grid-template-columns:repeat(2,1fr);}
  .jd-service-grid{grid-template-columns:repeat(2,1fr);}
  .jd-band-grid{grid-template-columns:1fr;}
  .jd-steps{grid-template-columns:1fr;}
  .jd-review-grid{grid-template-columns:1fr;}
  .jd-newsletter-inner{grid-template-columns:1fr;}
  .jd-footer-grid{grid-template-columns:repeat(2,1fr);}
  /* Header order on a narrow screen: logo, then account/cart, then the
     menu button on the RIGHT where a thumb reaches it, then the search
     across the full width, then the panel itself. */
  .jd-header .container{gap:12px;}
  .jd-logo{order:1;margin-right:auto;}
  .jd-header-icons{order:2;gap:16px;}
  .jd-mobile-toggle{display:block;order:3;margin-left:4px;}
  .jd-search{order:4;max-width:none;width:100%;flex-basis:100%;}
  /* The panel drops over the page instead of shoving it down. Pushing
     the hero and everything under it several hundred pixels every time
     the menu opened made the page feel like it was jumping. */
  .jd-header{position:relative;}
  .jd-nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:45;
    background:#fff;border-top:1px solid #eee;
    box-shadow:0 18px 34px rgba(0,0,0,.16);
    max-height:72vh;overflow-y:auto;padding:4px 20px 12px;
  }
  .jd-nav.is-open{display:block;animation:jd-drop .18s ease;}
  .jd-nav ul{flex-direction:column;gap:0;}
  .jd-nav li{border-bottom:1px solid #eee;}
  /* Bigger tap targets — 12px rows were tight for a thumb */
  .jd-nav a{display:block;padding:15px 4px;font-size:16px;}
  .jd-nav a:active{background:var(--jd-green-light);}
  /* One scrolling line instead of three stacked ones. Both tracks move
     together and each is exactly the viewport's content width, so shifting
     by -100% lands the clone precisely where the original started. */
  .jd-topbar{font-size:12.5px;padding:6px 0;}
  .jd-topbar .container{padding:0;}
  .jd-topbar-viewport{width:100%;}
  .jd-topbar-track{width:auto;flex:0 0 auto;gap:22px;padding-right:22px;animation:jd-marquee 22s linear infinite;}
  .jd-topbar-clone{display:flex;}
  .jd-topbar-sep{display:inline;opacity:.6;}
  .jd-topbar-track .jd-topbar-contact{margin-left:0;}
  .jd-whatsapp-float span{display:none;}
  .jd-whatsapp-float{padding:15px;border-radius:50%;}
}
@media (max-width:640px){
  .jd-header{padding:10px 0;}
  .jd-topbar .container{font-size:11.5px;}
  .jd-cat-grid{grid-template-columns:repeat(2,1fr);}
  .jd-browse-grid{grid-template-columns:1fr;}
  .jd-service-grid{grid-template-columns:1fr;}
  .jd-footer-grid{grid-template-columns:1fr;}
  .jd-newsletter-form{flex-direction:column;}
  .jd-section{padding:48px 0;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}


/* ============================================================
   FORM FIELDS — one consistent field style sitewide
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single{
  border:1px solid var(--jd-border);
  border-radius:8px;
  padding:12px 14px;
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  color:#3a3a3a;
  background:#fff;
  width:100%;
  transition:border-color .15s, box-shadow .15s;
}
select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2f4a' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;}
input:focus,textarea:focus,select:focus{border-color:var(--jd-green);box-shadow:0 0 0 3px rgba(47,158,68,.16);outline:none;}
input::placeholder,textarea::placeholder{color:#9aa39a;}
label{font-weight:500;color:var(--jd-navy);font-size:14px;}

/* The header search and the quantity box are the two exceptions —
   they must not stretch to full width. */
.jd-search input{border:none;padding:0;border-radius:0;background:transparent;box-shadow:none !important;}
.jd-search input:focus{border:none;box-shadow:none !important;}
.quantity input.qty{width:76px !important;text-align:center;padding:12px 6px;}

/* ============================================================
   BUTTONS — overrides WooCommerce's default purple (#7f54b3)
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .widget_shopping_cart a.button,
.wc-block-components-button{
  background-color:var(--jd-green) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  font-family:'Poppins',Arial,sans-serif !important;
  font-weight:600 !important;
  font-size:15px !important;
  padding:14px 28px !important;
  line-height:1.2 !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background-color .18s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover{background-color:var(--jd-green-dark) !important;color:#fff !important;}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled{background-color:#c9d6c9 !important;cursor:not-allowed;}

/* Product-card buttons stay small — the sitewide rule above is too big for a card */
.jd-product-card a.button,
.jd-product-card .button,
.woocommerce .jd-product-card a.button,
.woocommerce .jd-product-card .button{padding:9px 18px !important;font-size:13px !important;border-radius:6px !important;align-self:flex-start;}

/* Leftover Compare / Add to wishlist plugin buttons — styled down to
   quiet secondary links rather than competing with Add to cart.
   If you are not using those plugins, deactivate them instead. */
.compare.button,
.yith-wcwl-add-to-wishlist a,
.woocommerce a.compare.button{
  background:transparent !important;
  color:var(--jd-gray) !important;
  border:1px solid var(--jd-border) !important;
  padding:8px 16px !important;
  font-size:13px !important;
  font-weight:500 !important;
  border-radius:6px !important;
}
.compare.button:hover,
.woocommerce a.compare.button:hover{background:var(--jd-green-light) !important;color:var(--jd-green-dark) !important;}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.jd-single-crumbs{background:var(--jd-cream);border-bottom:1px solid var(--jd-border);padding:14px 0;}
.jd-crumbs-dark{color:var(--jd-gray);margin:0;}
.jd-crumbs-dark a{color:var(--jd-gray);}
.jd-crumbs-dark a:hover{color:var(--jd-green);text-decoration:underline;}
.jd-crumbs-dark .jd-crumb-current{color:var(--jd-navy);}

.single-product div.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;}
.single-product div.product::before,
.single-product div.product::after{display:none !important;content:none !important;}
.single-product div.product .woocommerce-product-gallery{width:100% !important;float:none !important;margin:0 !important;border:1px solid var(--jd-border);border-radius:var(--jd-radius);overflow:hidden;background:#fff;padding:12px;}
.single-product div.product .woocommerce-product-gallery img{object-fit:contain;}
.single-product div.product .summary{width:100% !important;float:none !important;margin:0 !important;}
.single-product div.product .jd-product-about,
.single-product div.product .woocommerce-tabs,
.single-product div.product .jd-product-detail,
.single-product div.product .related,
.single-product div.product .up-sells{grid-column:1 / -1;}

.single-product .summary .product_title{font-size:34px;margin:0 0 10px;line-height:1.2;}
.single-product .summary .price{color:var(--jd-red) !important;font-size:30px;font-weight:700;margin:0 0 6px;display:block;}
.single-product .summary .price del{color:#aaa;font-weight:400;font-size:20px;margin-right:8px;}
.single-product .summary .price ins{text-decoration:none;}
.single-product .woocommerce-product-details__short-description{font-size:16px;color:#4d4d4d;padding:16px 0;border-top:1px solid var(--jd-border);border-bottom:1px solid var(--jd-border);margin:16px 0;}
.single-product .woocommerce-product-details__short-description p{margin:0;color:#4d4d4d;}

.jd-stock-line{font-size:14px;font-weight:500;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.jd-stock-line.is-in{color:var(--jd-green-dark);}
.jd-stock-line.is-out{color:#b3564f;}

.single-product form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 !important;}
.single-product form.cart .quantity{margin:0 !important;}
.single-product .product_meta{font-size:13px;color:var(--jd-gray);border-top:1px solid var(--jd-border);padding-top:16px;margin-top:20px;}
.single-product .product_meta > span{display:block;margin-bottom:5px;}
.single-product .product_meta a{color:var(--jd-green-dark);}
.single-product .product_meta a:hover{text-decoration:underline;}

/* WhatsApp order buttons */
.jd-single-whatsapp{margin:6px 0 20px;}
.jd-wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#25d366;color:#fff !important;border-radius:8px;padding:14px 28px;font-weight:600;font-size:15px;transition:background .18s;}
.jd-wa-btn:hover{background:#1eb455;color:#fff;}
.jd-wa-btn i{font-size:19px;}
.jd-wa-btn-block{display:flex;width:100%;margin-top:12px;}
.jd-wa-note{display:block;font-size:12.5px;color:var(--jd-gray);margin-top:8px;line-height:1.45;}
.jd-cart-whatsapp{margin-top:14px;}

/* Delivery / packing / payment assurances */
.jd-assurances{list-style:none;margin:22px 0 0;padding:20px;background:var(--jd-cream);border-radius:var(--jd-radius);border:1px solid var(--jd-border);}
.jd-assurances li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:#4d4d4d;line-height:1.5;padding:8px 0;}
.jd-assurances li:first-child{padding-top:0;}
.jd-assurances li:last-child{padding-bottom:0;}
.jd-assurances i{color:var(--jd-green);font-size:15px;width:20px;text-align:center;flex-shrink:0;margin-top:3px;}
.jd-assurances strong{color:var(--jd-navy);}

/* "About this product" — the full description, promoted out of its tab */
.jd-product-about{margin-top:56px;padding-top:44px;border-top:1px solid var(--jd-border);}
.jd-product-about-inner{max-width:760px;}
.jd-product-about h2{font-size:26px;margin-bottom:16px;}
.jd-product-about-body p{font-size:16px;color:#4d4d4d;margin:0 0 1em;}
.jd-product-specs{display:grid;grid-template-columns:auto 1fr;gap:0;margin:28px 0 0;border-top:1px solid var(--jd-border);}
.jd-product-specs dt{padding:12px 24px 12px 0;font-weight:600;color:var(--jd-navy);font-size:14px;border-bottom:1px solid var(--jd-border);}
.jd-product-specs dd{padding:12px 0;margin:0;color:var(--jd-gray);font-size:14px;border-bottom:1px solid var(--jd-border);}

/* Remaining tabs (additional info, reviews) */
.woocommerce-tabs{margin-top:52px;}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:6px;padding:0 !important;margin:0 0 24px !important;border-bottom:1px solid var(--jd-border) !important;}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after{display:none !important;content:none !important;}
.woocommerce-tabs ul.tabs li{background:transparent !important;border:none !important;border-radius:0 !important;margin:0 !important;padding:0 !important;box-shadow:none !important;}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{display:none !important;content:none !important;}
.woocommerce-tabs ul.tabs li a{display:block;padding:12px 20px !important;font-weight:600 !important;color:var(--jd-gray) !important;border-bottom:3px solid transparent;font-family:'Poppins',Arial,sans-serif;font-size:15px;}
.woocommerce-tabs ul.tabs li.active a{color:var(--jd-navy) !important;border-bottom-color:var(--jd-green);}
.woocommerce-tabs .panel h2{font-size:22px;}

.related.products,
.up-sells{margin-top:56px;padding-top:44px;border-top:1px solid var(--jd-border);}
.related.products > h2,
.up-sells > h2{font-size:26px;margin-bottom:26px;}

/* Tighten the gap the sticky filter bar left above the shop toolbar */
.jd-woo-wrap{padding-top:40px;}

@media (max-width:960px){
  .single-product div.product{grid-template-columns:1fr;gap:28px;}
  .single-product .summary .product_title{font-size:27px;}
  .single-product .summary .price{font-size:25px;}
  .single-product form.cart{width:100%;}
  .single-product form.cart .button{flex:1;}
  .jd-product-specs{grid-template-columns:1fr;}
  .jd-product-specs dt{border-bottom:none;padding-bottom:0;}
}


/* ============================================================
   WISHLIST / COMPARE / QUICK VIEW
   ============================================================ */

/* Card action buttons. Hidden until hover on pointer devices; always
   visible on touch, where there is no hover to reveal them. */
.jd-product-card{position:relative;}
.jd-card-actions{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:7px;z-index:3;}
.jd-card-action{width:36px;height:36px;border-radius:50%;border:1px solid var(--jd-border);background:rgba(255,255,255,.96);color:var(--jd-navy);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.09);opacity:0;transform:translateX(8px);transition:opacity .18s,transform .18s,background .15s,color .15s;}
.jd-product-card:hover .jd-card-action,
.jd-card-action:focus-visible{opacity:1;transform:none;}
.jd-card-action:hover{background:var(--jd-green);border-color:var(--jd-green);color:#fff;}
.jd-card-action.is-on{opacity:1;transform:none;background:var(--jd-green);border-color:var(--jd-green);color:#fff;}
.jd-js-wishlist.is-on{background:var(--jd-red);border-color:var(--jd-red);}
@media (hover:none){.jd-card-action{opacity:1;transform:none;}}

/* Header wishlist counter */
.jd-wishlist-link{position:relative;}

/* Single product tool links */
.jd-single-tools{display:flex;gap:20px;flex-wrap:wrap;margin:4px 0 18px;}
.jd-tool-link{background:none;border:none;padding:0;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--jd-gray);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .15s;}
.jd-tool-link:hover{color:var(--jd-green-dark);}
.jd-tool-link.is-on{color:var(--jd-green-dark);font-weight:600;}
.jd-js-wishlist.jd-tool-link.is-on{color:var(--jd-red);}

/* Modals */
body.jd-modal-open{overflow:hidden;}
.jd-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.jd-modal[hidden]{display:none;}
.jd-modal-backdrop{position:absolute;inset:0;background:rgba(16,28,20,.6);animation:jd-fade .2s ease;}
.jd-modal-box{position:relative;background:#fff;border-radius:14px;max-width:880px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:jd-pop .22s ease;}
.jd-modal-wide .jd-modal-box{max-width:1140px;}
@keyframes jd-pop{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.jd-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:none;background:#f1f5f1;color:var(--jd-navy);font-size:16px;cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center;}
.jd-modal-close:hover{background:var(--jd-green);color:#fff;}
.jd-modal-body{padding:0;}
.jd-modal-loading{padding:60px 30px;text-align:center;color:var(--jd-gray);}

/* Quick view */
.jd-qv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;}
.jd-qv-image{position:relative;background:var(--jd-green-light);display:flex;align-items:center;justify-content:center;min-height:340px;}
.jd-qv-image{background:#fff;}
.jd-qv-image img{width:100%;height:100%;object-fit:contain;padding:14px;}
.jd-qv-info{padding:36px 34px 34px;}
.jd-qv-info h2{font-size:26px;margin:0 0 10px;line-height:1.2;}
.jd-qv-price{color:var(--jd-red);font-size:25px;font-weight:700;margin-bottom:10px;}
.jd-qv-price del{color:#aaa;font-weight:400;font-size:18px;margin-right:7px;}
.jd-qv-desc{font-size:15px;color:#4d4d4d;margin:14px 0 22px;padding-top:14px;border-top:1px solid var(--jd-border);}
.jd-qv-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.jd-wa-btn-sm{padding:11px 20px;font-size:14px;}
.jd-qv-meta{font-size:12.5px;color:var(--jd-gray);margin:18px 0 0;}
.jd-qv-full{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--jd-green-dark);text-decoration:underline;}

/* Compare drawer */
.jd-compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--jd-border);box-shadow:0 -6px 24px rgba(0,0,0,.1);padding:14px 0;animation:jd-slide-up .25s ease;}
.jd-compare-bar[hidden]{display:none;}
@keyframes jd-slide-up{from{transform:translateY(100%);}to{transform:none;}}
.jd-compare-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.jd-compare-slots{display:flex;gap:10px;flex:1;overflow-x:auto;}
.jd-compare-slot{position:relative;display:flex;align-items:center;gap:9px;border:1px solid var(--jd-border);border-radius:8px;padding:7px 30px 7px 8px;min-width:190px;background:#fff;}
.jd-compare-slot img{width:40px;height:40px;object-fit:cover;border-radius:5px;flex-shrink:0;}
.jd-compare-slot span{font-size:12.5px;line-height:1.3;color:var(--jd-navy);font-weight:500;}
.jd-compare-slot.is-empty{border-style:dashed;justify-content:center;padding:7px 12px;color:#a8b5a8;}
.jd-compare-slot.is-empty span{color:#a8b5a8;font-weight:400;}
.jd-slot-remove{position:absolute;top:4px;right:6px;background:none;border:none;font-size:17px;line-height:1;color:#b0bcb0;cursor:pointer;padding:2px;}
.jd-slot-remove:hover{color:var(--jd-red);}
.jd-compare-bar-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.jd-compare-bar-actions .btn{padding:11px 26px;}
.jd-compare-clear{background:none;border:none;font-family:inherit;font-size:13.5px;color:var(--jd-gray);cursor:pointer;text-decoration:underline;}
.jd-compare-clear:hover{color:var(--jd-red);}
body.jd-has-compare .jd-whatsapp-float{bottom:96px;}

/* Compare table */
.jd-compare-title{padding:30px 30px 0;margin:0 0 20px;font-size:24px;}
.jd-compare-scroll{overflow-x:auto;padding:0 30px 30px;}
.jd-compare-table{border-collapse:collapse;width:100%;min-width:640px;}
.jd-compare-table th[scope="row"]{text-align:left;font-size:13px;font-weight:600;color:var(--jd-gray);width:130px;padding:14px 16px 14px 0;vertical-align:top;border-bottom:1px solid var(--jd-border);white-space:nowrap;}
.jd-compare-table td{padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--jd-border);border-left:1px solid var(--jd-border);font-size:14px;color:#4d4d4d;min-width:180px;}
.jd-row-image td{padding-top:0;}
.jd-row-image img{width:100%;max-width:150px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:var(--jd-green-light);}
.jd-compare-drop{display:block;margin-top:8px;background:none;border:none;padding:0;font-family:inherit;font-size:12.5px;color:var(--jd-gray);text-decoration:underline;cursor:pointer;}
.jd-compare-drop:hover{color:var(--jd-red);}
.jd-compare-name{font-weight:600;color:var(--jd-navy);font-size:15px;}
.jd-compare-name:hover{color:var(--jd-green);}
.jd-compare-price{color:var(--jd-red);font-weight:700;font-size:16px;}
.jd-compare-desc{font-size:13px;line-height:1.5;}
.jd-stock-pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 11px;border-radius:20px;}
.jd-stock-pill.is-in{background:var(--jd-green-light);color:var(--jd-green-dark);}
.jd-stock-pill.is-out{background:#fdecea;color:#b3564f;}
.jd-row-cart td{border-bottom:none;}

/* Toast */
.jd-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:120;background:var(--jd-navy);color:#fff;padding:13px 24px;border-radius:30px;font-size:14px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;}
.jd-toast.is-on{opacity:1;transform:translate(-50%,0);}
body.jd-has-compare .jd-toast{bottom:104px;}

/* Empty state (wishlist page) */
.jd-empty-state{text-align:center;padding:70px 20px;max-width:440px;margin:0 auto;}
.jd-empty-state i{font-size:46px;color:#cfe0cf;margin-bottom:18px;display:block;}
.jd-empty-state h2{font-size:24px;margin-bottom:8px;}
.jd-empty-state p{margin-bottom:24px;}

@media (max-width:960px){
  .jd-dir-grid{grid-template-columns:repeat(2,1fr);}
  .jd-qv{grid-template-columns:1fr;}
  .jd-qv-image{min-height:240px;max-height:280px;}
  .jd-qv-info{padding:26px 22px;}
  .jd-compare-bar-inner{flex-direction:column;align-items:stretch;gap:12px;}
  .jd-compare-slot.is-empty{display:none;}
  .jd-compare-bar-actions{justify-content:space-between;}
  .jd-compare-title{padding:26px 20px 0;}
  .jd-compare-scroll{padding:0 20px 24px;}
}
@media (max-width:640px){
  .jd-dir-grid{grid-template-columns:1fr;}
  .jd-dir-tab{padding:8px 15px;font-size:13px;}
}


/* ============================================================
   ABOUT — homepage strip and About Us page share these styles
   ============================================================ */
.jd-eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--jd-green-dark);background:var(--jd-green-light);border-radius:20px;padding:5px 14px;margin-bottom:16px;}
.jd-about-strip{background:#fff;}
.jd-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.jd-about-grid-page{align-items:start;}
.jd-about-copy h2{font-size:32px;line-height:1.22;margin-bottom:16px;}
.jd-about-copy p{font-size:16px;margin:0 0 1em;}

.jd-about-photos{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;}
.jd-about-photos.is-single{grid-template-columns:1fr;}
.jd-about-photo{margin:0;border-radius:16px;overflow:hidden;background:var(--jd-green-light);}
.jd-about-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.jd-about-photo-main{aspect-ratio:3/4;}
.jd-about-photos.is-single .jd-about-photo-main{aspect-ratio:4/3;}
.jd-about-photo-stack{display:grid;grid-template-rows:1fr 1fr;gap:16px;}
.jd-about-photo-stack .jd-about-photo{aspect-ratio:4/3;}
.jd-about-placeholder{border:2px dashed #cfe0cf;border-radius:16px;padding:46px 30px;text-align:center;background:var(--jd-cream);}
.jd-about-placeholder i{font-size:32px;color:#b8cdb8;margin-bottom:12px;display:block;}
.jd-about-placeholder p{font-size:13.5px;margin:0;}

.jd-about-stats{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 28px;}
.jd-about-stat{flex:1;min-width:130px;background:var(--jd-cream);border-left:3px solid var(--jd-green);border-radius:8px;padding:16px 18px;}
.jd-about-stat strong{display:block;font-family:'Playfair Display',Georgia,serif;font-size:26px;color:var(--jd-navy);line-height:1.1;}
.jd-about-stat span{display:block;font-size:12.5px;color:var(--jd-gray);margin-top:4px;line-height:1.35;}

.jd-about-hero{padding-top:36px;}
.jd-about-hero figure{margin:0;border-radius:16px;overflow:hidden;max-height:420px;}
.jd-about-hero img{width:100%;height:100%;object-fit:cover;}

/* About Us — how we work */
.jd-values{background:var(--jd-cream);}
.jd-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.jd-value-card{background:#fff;border:1px solid var(--jd-border);border-radius:14px;padding:28px 24px;}
.jd-value-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--jd-green-light);color:var(--jd-green-dark);font-size:20px;margin-bottom:16px;}
.jd-value-card h4{font-size:17px;margin-bottom:8px;}
.jd-value-card p{font-size:14px;margin:0;}

@media (max-width:960px){
  .jd-about-grid{grid-template-columns:1fr;gap:34px;}
  .jd-about-copy h2{font-size:26px;}
  .jd-value-grid{grid-template-columns:repeat(2,1fr);}
  .jd-steps{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .jd-value-grid{grid-template-columns:1fr;}
  .jd-about-photos{grid-template-columns:1fr;}
  .jd-about-photo-main{aspect-ratio:4/3;}
  .jd-about-photo-stack{grid-template-rows:auto;grid-template-columns:1fr 1fr;}
  .jd-about-stat{min-width:100%;}
}


/* ============================================================
   AJAX SHOP FILTERING
   ============================================================ */
#jd-shop-results{position:relative;min-height:200px;transition:opacity .18s;}
#jd-shop-results.is-loading{opacity:.45;pointer-events:none;}
#jd-shop-results.is-loading::after{
  content:"";position:absolute;top:70px;left:50%;width:38px;height:38px;margin-left:-19px;
  border:3px solid var(--jd-green-light);border-top-color:var(--jd-green);border-radius:50%;
  animation:jd-spin .7s linear infinite;z-index:5;
}
@keyframes jd-spin{to{transform:rotate(360deg);}}
@keyframes jd-marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
.jd-shop-sub .jd-chips{margin-bottom:0;}

/* ============================================================
   LIVE SEARCH DROPDOWN
   ============================================================ */
.jd-search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--jd-border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16);z-index:60;overflow:hidden;max-height:70vh;overflow-y:auto;}
.jd-search-results[hidden]{display:none;}
.jd-search-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid #f1f5f1;transition:background .12s;}
.jd-search-item:last-of-type{border-bottom:none;}
.jd-search-item:hover,
.jd-search-item:focus{background:var(--jd-green-light);}
.jd-search-thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--jd-green-light);}
.jd-search-thumb img{width:100%;height:100%;object-fit:cover;}
.jd-search-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.jd-search-name{font-family:'Poppins',Arial,sans-serif;font-size:14px;font-weight:600;color:var(--jd-navy);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jd-search-name mark{background:#fdf0cd;color:inherit;padding:0 1px;border-radius:2px;}
.jd-search-meta{font-size:12.5px;color:var(--jd-gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jd-search-meta .amount,
.jd-search-meta bdi{color:var(--jd-red);font-weight:600;}
.jd-search-meta del{display:none;}
.jd-search-loading,
.jd-search-empty{padding:20px 16px;font-size:13.5px;color:var(--jd-gray);text-align:center;}
.jd-search-empty a{display:block;margin-top:8px;color:var(--jd-green-dark);font-weight:600;text-decoration:underline;}
.jd-search-all{display:block;padding:13px 14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--jd-green-dark);background:var(--jd-cream);border-top:1px solid var(--jd-border);}
.jd-search-all:hover{background:var(--jd-green-light);}

/* ============================================================
   PRICE RANGE NOTE (products priced as a range, not by pack size)
   ============================================================ */
.jd-price-note{display:block;font-size:12px;font-weight:500;color:var(--jd-gray);margin-top:3px;line-height:1.3;}
.jd-price-note-single{font-size:13.5px;color:var(--jd-gray);margin:-2px 0 14px;line-height:1.5;}
.jd-price-note-single .jd-price-note{display:inline;font-size:inherit;color:var(--jd-navy);font-weight:600;margin:0;}

/* Variable product "from ₦x – ₦y" range on cards */
.jd-product-card .price .woocommerce-Price-amount{white-space:nowrap;}

/* Services empty state (admins only in practice) */

@media (max-width:960px){
  /* Was position:fixed with top:auto. Inside a flex container that
     resolves to the field's own position, so the panel sat on top of the
     input and you could not see what you were typing. Anchoring it below
     the field fixes that. */
  .jd-search-results{position:absolute;top:calc(100% + 10px);left:0;right:0;max-height:56vh;}
  .jd-search-item{padding:13px 14px;}
  .jd-search-thumb{width:52px;height:52px;}
}


/* ============================================================
   SERVICES ARCHIVE — one full section per service, no pagination
   ============================================================ */
.jd-service-nav{background:#fff;border-bottom:1px solid var(--jd-border);padding:16px 0;position:sticky;top:var(--jd-header-h,84px);z-index:15;}
.jd-service-nav-inner{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.jd-service-nav-inner::-webkit-scrollbar{height:4px;}
.jd-service-nav-inner::-webkit-scrollbar-thumb{background:#d8e6d8;border-radius:4px;}
.jd-service-nav .jd-chip{white-space:nowrap;}

.jd-service-sections{overflow:hidden;}
.jd-service-section{padding:72px 0;scroll-margin-top:170px;}
.jd-service-section:nth-of-type(even){background:var(--jd-cream);}
.jd-service-section-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
/* Alternate which side the picture sits on, without changing DOM order —
   so a screen reader still hears heading before image on every section. */
.jd-service-section.is-reversed .jd-service-section-media{order:2;}

.jd-service-section-media figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--jd-green-light);box-shadow:0 14px 34px rgba(0,0,0,.08);}
.jd-service-section-media figure img{width:100%;height:100%;object-fit:cover;display:block;}
.jd-service-section-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:4/3;border-radius:18px;border:2px dashed #cfe0cf;background:var(--jd-green-light);color:var(--jd-green);text-align:center;padding:24px;}
.jd-service-section-icon i{font-size:56px;}
.jd-service-section-icon span{font-size:12.5px;color:var(--jd-gray);max-width:220px;line-height:1.4;}

.jd-service-section-copy h2{font-size:31px;line-height:1.2;margin-bottom:14px;}
.jd-service-lead{font-size:17px;color:#3f3f3f;font-weight:500;margin:0 0 14px;}
.jd-service-section-copy p{font-size:15.5px;}
.jd-service-section-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;}
.jd-service-readmore{font-size:14px;font-weight:600;color:var(--jd-green-dark);text-decoration:underline;}
.jd-service-readmore:hover{color:var(--jd-green);}

@media (max-width:960px){
  .jd-service-section{padding:48px 0;}
  .jd-service-section-inner{grid-template-columns:1fr;gap:28px;}
  /* On one column the image always leads, whichever side it took on desktop */
  .jd-service-section.is-reversed .jd-service-section-media{order:0;}
  .jd-service-section-copy h2{font-size:25px;}
}

@keyframes jd-drop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
  /* No auto-scrolling ticker for anyone who has asked the browser to stop
     moving things. It becomes a normal line they can swipe. */
  .jd-topbar-track{animation:none !important;}
  .jd-topbar-clone{display:none !important;}
  .jd-topbar-viewport{overflow-x:auto;}
}

/* ============================================================
   COMPACT CARDS — homepage rows
   ============================================================
   The homepage is a scan, not a read. Four descriptions per row made it
   a wall of grey text and pushed the price below the fold on mobile.
   Title and price only here; the shop and category pages keep the
   descriptions, because that is where someone is comparing. */
.jd-grid-compact{gap:30px 14px;}
.jd-grid-compact .short-desc{display:none;}
.jd-grid-compact .body{padding:12px 12px 14px;}
.jd-grid-compact .jd-product-title{font-size:16px;font-weight:700;line-height:1.28;margin:0 0 6px;}
.jd-grid-compact .price{font-size:16px;margin-bottom:10px;}
.jd-grid-compact .jd-price-note{font-size:11px;}
.jd-grid-compact a.button,
.jd-grid-compact .button,
.woocommerce .jd-grid-compact a.button{padding:8px 15px !important;font-size:12.5px !important;}
.jd-grid-compact .thumb{padding:6px;}

/* ============================================================
   NUTRITION NOTES
   ============================================================ */
.jd-nutrition{margin-top:52px;padding-top:44px;border-top:1px solid var(--jd-border);}
.jd-nutrition-archive{margin:0 0 10px;padding:34px 0 0;border-top:none;}
.jd-nutrition-inner{max-width:780px;}
.jd-nutrition h2{font-size:25px;margin-bottom:14px;}
.jd-nutrition-lead{font-size:16.5px;color:#454545;margin:0 0 18px;}
.jd-nutrition-points{list-style:none;margin:0 0 20px;padding:0;}
.jd-nutrition-points li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:15px;color:#4d4d4d;line-height:1.55;}
.jd-nutrition-points i{color:var(--jd-green);font-size:13px;margin-top:5px;flex-shrink:0;}
.jd-nutrition-kitchen{background:var(--jd-cream);border-left:3px solid var(--jd-green);border-radius:0 8px 8px 0;padding:14px 18px;font-size:15px;color:#4a4a4a;margin:0 0 26px;}
.jd-nutrition-kitchen strong{color:var(--jd-navy);}

.jd-references{border:1px solid var(--jd-border);border-radius:12px;padding:22px 24px;background:#fff;}
.jd-references h3{font-size:17px;margin:0 0 4px;}
.jd-ref-intro{font-size:14px;margin:0 0 14px;}
.jd-references ul{list-style:none;margin:0 0 18px;padding:0;}
.jd-references li{padding:8px 0;border-bottom:1px solid #f0f4f0;font-size:14px;}
.jd-references li:last-of-type{border-bottom:none;}
.jd-references a{font-weight:600;color:var(--jd-green-dark);text-decoration:underline;}
.jd-references a:hover{color:var(--jd-green);}
.jd-references a i{font-size:11px;margin-left:3px;}
.jd-references li span{display:block;color:var(--jd-gray);font-size:13px;margin-top:2px;}
.jd-disclaimer{font-size:13px;color:var(--jd-gray);line-height:1.6;margin:0;padding-top:14px;border-top:1px solid var(--jd-border);}
.jd-disclaimer strong{color:var(--jd-navy);}

@media (max-width:960px){
  .jd-grid-compact{gap:26px 12px;}
  .jd-nutrition h2{font-size:21px;}
  .jd-nutrition-lead{font-size:15.5px;}
}
@media (max-width:640px){
  .jd-grid-compact{gap:22px 10px;}
  .jd-grid-compact .body{padding:10px 10px 12px;}
  .jd-grid-compact .jd-product-title{font-size:14.5px;}
  .jd-grid-compact .price{font-size:15px;}
  .jd-references{padding:18px 16px;}
}

/* ============================================================
   RELATED AND UP-SELL PRODUCTS
   ============================================================
   These sit inside the single product page's own CSS grid, which was
   fighting the card layout — the cards came out with the image beside the
   text instead of above it, and squeezed into three narrow columns. The
   rules below re-assert the card shape inside that context. */
.related.products ul.products,
.up-sells ul.products{grid-template-columns:repeat(4,1fr) !important;gap:32px 18px !important;}
.related.products .jd-product-card,
.up-sells .jd-product-card{display:flex !important;flex-direction:column !important;width:auto !important;}
.related.products .jd-product-card .thumb,
.up-sells .jd-product-card .thumb{width:100% !important;aspect-ratio:1/1;flex:0 0 auto;}
.related.products .jd-product-card .body,
.up-sells .jd-product-card .body{padding:12px 12px 14px;}
/* Related items are a nudge, not a comparison — the name and price do the
   work and four descriptions underneath a product page is noise. */
.related.products .jd-product-card .short-desc,
.up-sells .jd-product-card .short-desc{display:none;}
.related.products .jd-product-title,
.up-sells .jd-product-title{font-size:15.5px;}
.related.products .jd-product-card .price,
.up-sells .jd-product-card .price{font-size:15.5px;margin-bottom:10px;}
.related.products .jd-product-card a.button,
.up-sells .jd-product-card a.button{padding:8px 15px !important;font-size:12.5px !important;}

@media (max-width:960px){
  .related.products ul.products,
  .up-sells ul.products{grid-template-columns:repeat(2,1fr) !important;}
}

/* ============================================================
   PREFORMATTED-CONTEXT RESET
   ============================================================
   The cart was rendering in a monospace font, with enormous gaps between
   elements and content running off the right-hand edge without wrapping.
   Those three symptoms together have one cause: the output is sitting
   inside a `white-space: pre` context — almost certainly a Preformatted
   or Code block in the Cart page's content, with the shortcode pasted
   into it.

   Under `white-space: pre` every newline and tab in the template becomes
   visible whitespace, nothing wraps, and the browser switches to its
   monospace default. That is why my two attempts at fixing column widths
   changed nothing: the widths were never the problem.

   The real fix is to edit the Cart page so the shortcode sits in an
   ordinary block — see the README. This is the safety net, so the page is
   readable either way.
   ============================================================ */
.jd-woo-wrap,
.jd-woo-wrap > *,
.jd-cart,
.woocommerce-cart-form,
.cart-collaterals{
  white-space:normal !important;
  font-family:'Poppins',Arial,sans-serif;
}

/* A <pre> wrapping WooCommerce output is never intentional, so strip its
   code styling back to nothing. :has() does the precise version; the
   direct-child rule is the fallback for browsers without it. */
.jd-woo-wrap pre:has(.jd-cart),
.jd-woo-wrap pre:has(.woocommerce),
.jd-woo-wrap pre:has(form.woocommerce-cart-form),
.jd-woo-wrap pre:has(.woocommerce-checkout),
.jd-woo-wrap > pre,
.jd-woo-wrap .jd-results-inner > pre{
  white-space:normal !important;
  font-family:'Poppins',Arial,sans-serif !important;
  background:none !important;border:none !important;
  padding:0 !important;margin:0 !important;
  overflow:visible !important;font-size:inherit !important;line-height:inherit !important;
}

/* Headings keep the brand serif despite the reset above */
.jd-woo-wrap h1,.jd-woo-wrap h2,.jd-woo-wrap h3,.jd-woo-wrap h4,
.jd-cart h1,.jd-cart h2,.jd-cart h3,.jd-cart h4,
.cart-collaterals h2{font-family:'Playfair Display',Georgia,serif;}

/* =====================================================================
   BLOG ARCHIVE  (v3.9)
   The blog used to borrow .jd-product-card, which had been tuned down to
   title-and-price only. Cards came out cramped, ragged in height, with
   "Read More" floating wherever the excerpt happened to stop. Its own
   layout now.
   ===================================================================*/

.jd-blog-archive{padding-top:54px;}

/* ---- Lead story ---- */
.jd-blog-lead{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  background:#fff;border:1px solid var(--jd-border);border-radius:16px;
  overflow:hidden;margin-bottom:42px;
  box-shadow:0 2px 14px rgba(28,47,74,.05);
}
.jd-blog-lead-media{display:block;position:relative;min-height:320px;background:var(--jd-green-light);}
.jd-blog-lead-media img{width:100%;height:100%;object-fit:cover;display:block;}
.jd-blog-lead-body{padding:42px 44px;display:flex;flex-direction:column;justify-content:center;}
.jd-blog-lead-body h2{font-size:31px;line-height:1.25;margin:10px 0 14px;}
.jd-blog-lead-body h2 a{color:var(--jd-navy);}
.jd-blog-lead-body h2 a:hover{color:var(--jd-green-dark);}

/* ---- Card grid ---- */
.jd-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;}

/* Same clearfix trap as the product grid: WooCommerce and several plugins
   still emit float-era ::before/::after on list wrappers, and inside a
   grid those become real grid items that silently eat the first cell. */
.jd-blog-grid::before,.jd-blog-grid::after{display:none !important;content:none !important;}

.jd-blog-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--jd-border);border-radius:14px;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jd-blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(28,47,74,.09);
  border-color:#d5e4d5;
}

/* A fixed aspect ratio is what keeps the row of titles on one line.
   Letting each image set its own height is why the cards were ragged. */
.jd-blog-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--jd-green-light);}
.jd-blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.jd-blog-card:hover .jd-blog-card-media img{transform:scale(1.045);}

/* flex:1 on the body, margin-top:auto on the link — that pair is what
   pins every "Read More" to the same baseline whatever the excerpt does. */
.jd-blog-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.jd-blog-card-body h3{font-size:19px;line-height:1.32;margin:9px 0 10px;}
.jd-blog-card-body h3 a{color:var(--jd-navy);}
.jd-blog-card-body h3 a:hover{color:var(--jd-green-dark);}

.jd-blog-excerpt{font-size:14.5px;line-height:1.62;margin:0 0 18px;color:var(--jd-gray);}
.jd-blog-lead-body .jd-blog-excerpt{font-size:16px;margin-bottom:22px;}
.jd-blog-lead-body .jd-blog-meta{font-size:12px;gap:9px;}

.jd-blog-more{
  margin-top:auto;align-self:flex-start;
  color:var(--jd-green-dark);font-weight:600;font-size:14.5px;
  display:inline-flex;align-items:center;gap:8px;
}
.jd-blog-more i{transition:transform .18s ease;}
.jd-blog-more:hover i{transform:translateX(4px);}

/* ---- Meta line ---- */
.jd-blog-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  font-size:11px;color:#7b837d;font-weight:500;
  text-transform:uppercase;letter-spacing:.03em;
}
.jd-blog-cat{
  background:var(--jd-green-light);color:var(--jd-green-dark);
  padding:3px 9px;border-radius:999px;font-weight:700;letter-spacing:.04em;
}
.jd-blog-cat:hover{background:var(--jd-green);color:#fff;}
.jd-blog-dot{color:#c3cbc4;}

/* ---- Fallback thumbnail ---- */
.jd-blog-thumb-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;width:100%;height:100%;min-height:180px;
  color:var(--jd-green-dark);
}
.jd-blog-thumb-fallback i{font-size:38px;opacity:.75;}
.jd-blog-thumb-fallback span{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.8;
}

.jd-blog-empty{
  background:var(--jd-cream);border:1px dashed var(--jd-border);
  border-radius:12px;padding:38px;text-align:center;
}

/* ---- Pagination ----
   Own component. Nothing here depends on a .woocommerce ancestor, which
   is what broke it: the li elements had no display rule that matched and
   stacked full-width down the page. */
.jd-pagination{margin-top:48px;}
.jd-pagination ul{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px;list-style:none;margin:0;padding:0;
}
.jd-pagination li{margin:0;}
.jd-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 13px;
  border:1px solid var(--jd-border);border-radius:9px;
  background:#fff;color:var(--jd-navy);
  font-weight:600;font-size:14.5px;line-height:1;
  transition:background .16s, color .16s, border-color .16s;
}
.jd-pagination a.page-numbers:hover{
  background:var(--jd-green-light);border-color:#cfe4cf;color:var(--jd-green-dark);
}
.jd-pagination .page-numbers.current{
  background:var(--jd-green);border-color:var(--jd-green);color:#fff;
}
.jd-pagination .page-numbers.dots{border-color:transparent;background:none;color:#98a09a;}

@media (max-width:1024px){
  .jd-blog-grid{grid-template-columns:repeat(2,1fr);}
  .jd-blog-lead{grid-template-columns:1fr;}
  .jd-blog-lead-media{min-height:0;aspect-ratio:16/9;}
  .jd-blog-lead-body{padding:30px 28px 34px;}
  .jd-blog-lead-body h2{font-size:26px;}
}
@media (max-width:640px){
  .jd-blog-grid{grid-template-columns:1fr;gap:22px;}
  .jd-blog-archive{padding-top:36px;}
  .jd-blog-lead-body h2{font-size:23px;}
  .jd-pagination .page-numbers{min-width:38px;height:38px;padding:0 10px;font-size:13.5px;}
}

/* =====================================================================
   WHATSAPP CHECKOUT  (v3.10)
   ===================================================================*/
.jd-wa-form{
  margin-top:22px;padding:24px 24px 26px;
  background:#f3fbf4;border:1px solid #cfe8d3;border-radius:14px;
}
.jd-wa-form h3{font-size:19px;margin:0 0 6px;}
.jd-wa-form-intro{font-size:14px;margin:0 0 18px;color:var(--jd-gray);}
.jd-wa-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.jd-wa-fields .jd-wa-wide{grid-column:1 / -1;}
.jd-wa-fields label{display:flex;flex-direction:column;gap:6px;}
.jd-wa-fields label > span{font-size:13px;font-weight:600;color:var(--jd-navy);}
.jd-wa-fields label em{font-weight:400;color:#8a918c;font-style:normal;}
.jd-wa-fields abbr{color:var(--jd-red);text-decoration:none;border:none;}
.jd-wa-fields input,.jd-wa-fields textarea{
  width:100%;padding:11px 13px;font-family:inherit;font-size:15px;
  border:1px solid #cfe0d1;border-radius:8px;background:#fff;color:var(--jd-navy);
}
.jd-wa-fields input:focus,.jd-wa-fields textarea:focus{
  outline:none;border-color:var(--jd-green);box-shadow:0 0 0 3px rgba(47,158,68,.14);
}
.jd-wa-fields textarea{resize:vertical;min-height:60px;}
.jd-wa-error{
  background:#fdecea;border:1px solid #f3c3bf;color:#9b2f27;
  padding:10px 13px;border-radius:8px;font-size:14px;margin:0 0 14px;
}
#jd-wa-place[disabled]{opacity:.65;cursor:progress;}
.jd-wa-form .jd-wa-note{display:block;margin-top:10px;font-size:12.5px;color:#6f776f;text-align:center;}

@media (max-width:600px){
  .jd-wa-fields{grid-template-columns:1fr;}
  .jd-wa-form{padding:20px 18px 22px;}
}

/* =====================================================================
   OCTOBER: PROMO STRIP, PROTEINS, COMING SOON  (v3.11)
   ===================================================================*/

.jd-promo-strip{
  background:linear-gradient(90deg,var(--jd-gold) 0%,#f0b957 55%,var(--jd-gold) 100%);
  color:#2a1e07;font-size:14px;font-weight:600;padding:10px 0;text-align:center;
}
.jd-promo-strip .container{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.jd-promo-strip strong{
  background:rgba(255,255,255,.72);padding:2px 9px;border-radius:5px;
  font-weight:700;letter-spacing:.06em;
}

/* Next day delivery. On the card it is a flash in the corner of the
   image; on the product page it is a line under the price, where the
   question "when will it get here" is actually being asked. */
.jd-next-day-flash{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--jd-navy);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
}
.jd-next-day{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--jd-green-light);color:var(--jd-green-dark);
  border-radius:8px;padding:9px 14px;margin:0 0 16px;
  font-size:14.5px;font-weight:600;
}

/* Coming soon is not out of stock. Out of stock is grey and final;
   this is the brand gold, because it is an invitation to come back. */
.jd-coming-soon{
  display:inline-block;background:#fdf3e2;color:#8a5f16;
  border:1px solid #f0dcb4;border-radius:8px;
  padding:8px 14px;font-weight:600;font-size:14.5px;
}
.jd-product-card .jd-coming-soon{padding:5px 10px;font-size:12.5px;}

/* Hero price is now a link to the product it quotes. */
a.jd-hero-price{text-decoration:none;display:inline-flex;flex-direction:column;gap:2px;}
a.jd-hero-price:hover .amount{text-decoration:underline;text-underline-offset:3px;}
.jd-hero-price .unit{text-transform:uppercase;letter-spacing:.07em;font-size:11px;opacity:.8;}
.jd-hero-price .amount .woocommerce-Price-amount{color:var(--jd-gold);font-size:26px;font-weight:700;}

.jd-market-price{
  display:inline-flex;align-items:center;gap:8px;
  background:#fdf3e2;color:#8a5f16;border:1px solid #f0dcb4;border-radius:8px;
  padding:9px 14px;margin:0 0 16px;font-size:14px;font-weight:600;
}

/* A market price is a range, not a number. Set slightly tighter than a
   normal price so the two figures still read as one block. */
.jd-market-range{letter-spacing:-.01em;}
.jd-market-price{
  display:flex;align-items:flex-start;gap:9px;
  background:#fdf3e2;border:1px solid #f0dcb4;color:#7d5713;
  border-radius:9px;padding:11px 14px;margin:0 0 16px;
  font-size:14px;line-height:1.5;
}
.jd-market-price i{margin-top:3px;}

/* Ingredients, stated plainly under the price — the one fact a herbal
   tea buyer most wants to check before anything else. */
.jd-ingredients{
  font-size:14.5px;line-height:1.55;color:var(--jd-gray);
  background:var(--jd-cream);border-left:3px solid var(--jd-green);
  padding:10px 14px;border-radius:0 8px 8px 0;margin:0 0 16px;
}
.jd-ingredients strong{color:var(--jd-navy);}

/* =====================================================================
   REVIEWS AND REFERRALS  (v3.21)
   ===================================================================*/

.jd-stars{color:var(--jd-gold);letter-spacing:1px;}

/* Rating line in the product summary. Present even at zero reviews,
   because that is when the invitation matters most. */
.jd-review-link{font-size:14.5px;margin:0 0 14px;color:var(--jd-gray);}
.jd-review-link a{color:var(--jd-green-dark);font-weight:600;}

.jd-card-rating{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--jd-gray);}

/* Reviews band: its own section after the product, not a tab. */
.jd-reviews-band{background:var(--jd-cream);border-top:1px solid var(--jd-border);padding:52px 0 60px;margin-top:48px;}
.jd-reviews-band #reviews,
.jd-reviews-band #comments{max-width:820px;}
.jd-reviews-band h2,.jd-reviews-band h3{font-size:24px;}

.jd-reviews-empty{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px dashed var(--jd-border);border-radius:12px;
  padding:22px 24px;margin-bottom:26px;
}
.jd-reviews-empty i{font-size:28px;color:var(--jd-green);}
.jd-reviews-empty p{margin:0;font-size:15px;}

/* Review & Win */
.jd-review-promo{
  display:flex;gap:18px;align-items:flex-start;
  background:linear-gradient(135deg,#fdf6e7 0%,#fdf1dd 100%);
  border:1px solid #f0dcb4;border-radius:14px;
  padding:22px 24px;margin:0 0 26px;
}
.jd-review-promo-icon{
  flex:0 0 46px;height:46px;border-radius:50%;
  background:var(--jd-gold);color:#2a1e07;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.jd-review-promo h3{margin:0 0 6px;font-size:19px;}
.jd-review-promo p{margin:0 0 8px;font-size:14.5px;}
.jd-review-promo-fine{color:#7d5713;font-size:13.5px !important;margin:0 !important;}

.jd-review-disclosure{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--jd-border);
  font-size:12.5px;color:#7b837d;line-height:1.6;
}

/* Refer & Win, on the thank-you page */
.jd-referral{
  background:var(--jd-green-light);border:1px solid #cfe4cf;border-radius:16px;
  padding:30px 28px;margin:34px 0;text-align:center;
}
.jd-referral h2{font-size:24px;margin:0 0 8px;}
.jd-referral > p{max-width:520px;margin:0 auto 20px;}
.jd-referral-code{
  display:inline-flex;align-items:center;gap:14px;
  background:#fff;border:2px dashed var(--jd-green);border-radius:12px;
  padding:14px 20px;margin-bottom:18px;
}
.jd-referral-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--jd-gray);font-weight:600;}
.jd-referral-code strong{font-size:26px;letter-spacing:.12em;color:var(--jd-navy);font-family:'Poppins',sans-serif;}
.jd-ref-copy{
  background:var(--jd-green);color:#fff;border:none;border-radius:7px;
  padding:8px 14px;font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
}
.jd-ref-copy:hover{background:var(--jd-green-dark);}
.jd-referral-fine{font-size:12.5px;color:#6f776f;margin:14px 0 0;}

.jd-review-product{font-weight:400;color:var(--jd-gray);}
.jd-review-card .jd-stars{display:block;margin-bottom:8px;font-size:15px;}

@media (max-width:600px){
  .jd-review-promo{flex-direction:column;gap:12px;}
  .jd-referral-code{flex-direction:column;gap:10px;}
  .jd-reviews-empty{flex-direction:column;text-align:center;}
}

/* =====================================================================
   PRODUCT DETAIL: DESCRIPTION AND REVIEWS SIDE BY SIDE  (v3.22)
   ===================================================================*/

.jd-product-detail{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:56px;
  align-items:start;
  margin-top:46px;
  padding-top:40px;
  border-top:1px solid var(--jd-border);
}

/* Same float-era clearfix trap as the product and blog grids: a stray
   ::before becomes a real grid item and silently takes the first cell. */
.jd-product-detail::before,
.jd-product-detail::after{display:none !important;content:none !important;}

/* WooCommerce's tab wrapper is grid child one. Its own top border and
   margin would double up with the row's, so they come off. */
/* The rule above that makes .woocommerce-tabs span the product grid is a
   descendant selector, so it still matches once the tabs are nested in
   this grid -- and spanning BOTH columns here is what pushes the reviews
   onto a second row. Reset it. */
.jd-product-detail .woocommerce-tabs{grid-column:auto !important;margin:0 !important;padding:0 !important;border:none !important;min-width:0;}
.jd-product-detail .woocommerce-tabs .panel{margin:0 !important;padding:0 !important;}

/* The reviews column reads as a panel rather than a full-width band. */
.jd-reviews-col{
  background:var(--jd-cream);
  border:1px solid var(--jd-border);
  border-radius:16px;
  padding:28px 28px 32px;
  min-width:0;
}
.jd-reviews-head{font-size:24px;margin:0 0 18px;}
.jd-reviews-col #comments,
.jd-reviews-col .woocommerce-Reviews{max-width:none;}
.jd-reviews-col #comments > h2{display:none;}  /* heading printed above */
.jd-reviews-col .comment-form{margin-top:4px;}
.jd-reviews-col .comment-form input[type="text"],
.jd-reviews-col .comment-form input[type="email"],
.jd-reviews-col .comment-form textarea{
  width:100%;padding:11px 13px;font-family:inherit;font-size:15px;
  border:1px solid #d7e0d8;border-radius:8px;background:#fff;
}
.jd-reviews-col .comment-form textarea{min-height:110px;resize:vertical;}
.jd-reviews-col .commentlist{list-style:none;margin:0 0 22px;padding:0;}
.jd-reviews-col .commentlist li{
  background:#fff;border:1px solid var(--jd-border);border-radius:11px;
  padding:16px 18px;margin:0 0 12px;
}

@media (max-width:1024px){
  .jd-product-detail{grid-template-columns:1fr;gap:34px;}
  .jd-reviews-col{padding:24px 20px 26px;}
}

/* =====================================================================
   HERO PROMO SLIDE  (v3.24)
   Same bones as the other hero slides — copy left, packs right — with
   the gold pulled forward so it reads as an offer at a glance.
   ===================================================================*/

.jd-hero-slide-promo .jd-hero-copy h1{font-size:clamp(38px,5vw,62px);line-height:1.04;margin-bottom:14px;}
.jd-hero-badge-promo{background:var(--jd-gold);color:#2a1e07;font-weight:700;}

.jd-promo-code{
  display:inline-flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.1);
  border:2px dashed var(--jd-gold);border-radius:11px;
  padding:11px 16px;margin:0 0 22px;
  backdrop-filter:blur(2px);
}
.jd-promo-code-label{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  color:#dfe7d8;font-weight:600;
}
.jd-promo-code strong{
  font-size:23px;letter-spacing:.14em;color:#fff;
  font-family:'Poppins',sans-serif;font-weight:700;line-height:1;
}
.jd-promo-copy{
  background:var(--jd-gold);color:#2a1e07;border:none;border-radius:7px;
  padding:7px 13px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;
  transition:filter .15s;
}
.jd-promo-copy:hover{filter:brightness(1.08);}
.jd-promo-note{font-size:13px;color:#cfe0cd;margin:14px 0 0;}

@media (max-width:640px){
  .jd-promo-code{width:100%;justify-content:space-between;gap:8px;padding:10px 12px;}
  .jd-promo-code strong{font-size:19px;letter-spacing:.1em;}
  .jd-hero-slide-promo .jd-hero-copy h1{font-size:34px;}
}

/* =====================================================================
   SIGN IN  (v3.30)
   Brand panel left, form right. The Google button sits above the
   password fields, because most returning customers do not remember
   whether they ever set a password here.
   ===================================================================*/

.jd-auth{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:0;align-items:stretch;
  max-width:1040px;margin:0 auto;
  background:#fff;border:1px solid var(--jd-border);
  border-radius:18px;overflow:hidden;
  box-shadow:0 10px 40px rgba(28,47,74,.07);
}
.jd-auth::before,.jd-auth::after{display:none !important;content:none !important;}

/* ---- Brand side ---- */
.jd-auth-brand{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#17402a 0%,#0f2c1d 55%,#132f20 100%);
  color:#fff;padding:46px 40px;
  display:flex;align-items:center;
}
.jd-auth-brand-inner{position:relative;z-index:1;width:100%;}
.jd-auth-eyebrow{
  display:inline-block;background:rgba(224,162,51,.18);color:var(--jd-gold);
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:18px;
}
.jd-auth-brand h2{color:#fff;font-size:34px;line-height:1.12;margin:0 0 12px;}
.jd-auth-brand p{color:#cfe0cd;font-size:15px;line-height:1.6;margin:0 0 26px;}

.jd-auth-points{list-style:none;margin:0;padding:0;display:grid;gap:13px;}
.jd-auth-points li{
  display:flex;align-items:center;gap:12px;
  color:#e6f0e4;font-size:14.5px;font-weight:500;
}
.jd-auth-points i{
  flex:0 0 32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--jd-gold);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.jd-auth-packs{
  display:block;width:118%;max-width:none;margin:30px 0 -46px -9%;
  opacity:.92;pointer-events:none;
}

/* ---- Form side ---- */
.jd-auth-panel{padding:46px 44px;min-width:0;}
.jd-auth-head h1{font-size:30px;margin:0 0 7px;}
.jd-auth-head p{font-size:14.5px;margin:0 0 26px;}

/* The slot the social-login plugin renders into. Styling the slot
   rather than the button means the layout survives whichever plugin
   provides it and whatever markup it chooses. */
.jd-auth-social:empty{display:none;}
.jd-auth-social{margin:0 0 4px;}
.jd-auth-social > *{width:100% !important;max-width:none !important;}
.jd-auth-social a,
.jd-auth-social button,
.jd-auth-social .nsl-button{
  width:100% !important;
  min-height:50px;border-radius:10px !important;
  font-family:inherit !important;font-weight:600 !important;font-size:15px !important;
  display:flex !important;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 1px 2px rgba(28,47,74,.08) !important;
}
.jd-auth-social iframe{width:100% !important;}

.jd-auth-or{
  display:flex;align-items:center;gap:14px;
  margin:22px 0;color:#8d958f;font-size:13px;
}
.jd-auth-or::before,.jd-auth-or::after{
  content:"";flex:1;height:1px;background:var(--jd-border);
}

.jd-auth-form .woocommerce-form-row{margin:0 0 16px;}
.jd-auth-form label{
  display:block;font-size:13.5px;font-weight:600;
  color:var(--jd-navy);margin:0 0 6px;
}
.jd-auth-form .required{color:var(--jd-red);text-decoration:none;}
.jd-auth-form input[type="text"],
.jd-auth-form input[type="email"],
.jd-auth-form input[type="password"]{
  width:100%;padding:13px 15px;font-family:inherit;font-size:15.5px;
  border:1px solid #d7e0d8;border-radius:10px;background:#fcfdfc;
  color:var(--jd-navy);transition:border-color .15s, box-shadow .15s, background .15s;
}
.jd-auth-form input:focus{
  outline:none;background:#fff;border-color:var(--jd-green);
  box-shadow:0 0 0 3px rgba(47,158,68,.13);
}

.jd-auth-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:4px 0 20px;flex-wrap:wrap;
}
/* Beats ".jd-auth-form label" above, which is display:block and bold —
   without this the checkbox and its words run together. */
.jd-auth-form label.jd-auth-remember{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;color:var(--jd-gray);
  margin:0;cursor:pointer;
}
.jd-auth-form label.jd-auth-remember input{margin:0;width:auto;accent-color:var(--jd-green);}
.jd-auth-lost{font-size:14px;color:var(--jd-green-dark);font-weight:600;}

.jd-auth-submit{width:100%;padding:14px 20px;font-size:15.5px;border-radius:10px;}

.jd-auth-switch{
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--jd-border);
  font-size:14.5px;color:var(--jd-gray);text-align:center;
}
.jd-auth-switch a{font-weight:600;color:var(--jd-green-dark);}

/* Registration stays out of the way until asked for, so the page opens
   as one clear task rather than two competing ones. */
.jd-auth-register{display:none;margin-top:26px;padding-top:24px;border-top:1px solid var(--jd-border);}
.jd-auth-register:target{display:block;}
.jd-auth-register h2{font-size:21px;margin:0 0 16px;}
.jd-auth-note{font-size:13.5px;color:var(--jd-gray);background:var(--jd-cream);padding:11px 14px;border-radius:8px;}

.jd-auth-skip{
  display:flex;align-items:flex-start;gap:10px;
  margin:24px 0 0;padding:13px 15px;
  background:var(--jd-green-light);border-radius:10px;
  font-size:13.5px;color:var(--jd-green-dark);line-height:1.55;
}
.jd-auth-skip i{margin-top:2px;font-size:16px;}

@media (max-width:900px){
  .jd-auth{grid-template-columns:1fr;max-width:520px;}
  /* The brand panel is decoration; on a phone it would push the form
     below the fold, so it goes rather than stacking. */
  .jd-auth-brand{display:none;}
  .jd-auth-panel{padding:32px 24px 34px;}
  .jd-auth-head h1{font-size:26px;}
}