/* ==========================================================================
   ZEGJAW — Atelier, adapted

   Warm paper ground, ink type, one confident pine-green accent, and the
   colour coming from the products themselves rather than from a rainbow
   background. Soft optical serif display (Fraunces) against a modern grotesk
   (Plus Jakarta Sans). Stacked rounded panels, hairline cards, blended product
   shots on tinted plates. Text unchanged — layout adjusted with CSS only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* paper + ink */
  --paper:    #FDFAF6;
  --paper-2:  #FFFFFF;
  --paper-3:  #F7F1E9;
  --ink:      #2A211C;
  --ink-2:    #6E625A;
  --ink-3:    #9A8D84;
  --line:     #EDE3D8;
  --line-2:   #F5EDE4;

  /* the one strong colour */
  --accent:    #23794A;
  --accent-dk: #185B37;
  --accent-sf: #E8F4EC;

  /* supporting chips — tool yellow and cool greys, used small */
  --butter: #FFE3A8;
  --blush:  #FBD3DE;
  --mint:   #CDE9D8;
  --sky:    #CBDFF6;
  --lilac:  #DED2F8;
  --sage:   #E4EDDC;

  /* tint grounds */
  --t-butter:#FFF8EC;
  --t-blush: #FFF2F4;
  --t-mint:  #F0F8F2;
  --t-sky:   #F1F6FD;
  --t-lilac: #F7F3FD;

  --r-card: 24px;
  --r-panel: 40px;
  --sh-1: 0 1px 2px rgba(42,33,28,.05), 0 10px 26px -14px rgba(42,33,28,.22);
  --sh-2: 0 2px 6px rgba(42,33,28,.06), 0 28px 60px -26px rgba(42,33,28,.34);
  --step: 1.7rem;
}

/* ---------- foundations ------------------------------------------------ */
html{ scroll-behavior:smooth; }
body,.container-fluid,.bg-light,.bg-white,.fruite,.testimonial,.featurs{
  background: var(--paper) !important;
}
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  color: var(--ink-2) !important;
  font-size:17px; line-height:1.7; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background: var(--butter); color: var(--ink); }

h1,h2,h3,h4,h5,h6,.display-5,.page-title,.category-title,.navbar-brand{
  font-family:'Fraunces','Plus Jakarta Sans',Georgia,serif !important;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  color: var(--ink) !important;
  font-weight:700 !important;
  letter-spacing:-.022em !important;
  line-height:1.08 !important;
}
h1,.display-5{ font-size:clamp(2.7rem,5.4vw,4.3rem) !important; font-weight:800 !important; }
h2{ font-size:clamp(2rem,3.4vw,2.9rem) !important; }
h3{ font-size:clamp(1.35rem,2vw,1.75rem) !important; }
h4{ font-size:1.2rem !important; }
h5{ font-size:1.08rem !important; letter-spacing:-.012em !important; }
.product-title,.guide-card h5{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
  font-weight:700 !important; letter-spacing:-.018em !important; line-height:1.3 !important;
  color: var(--ink) !important;
}
p,li{ color: var(--ink-2) !important; }
p{ max-width:70ch; }
.lead{ font-size:1.14rem !important; color: var(--ink-2) !important; }
a{ color: var(--accent-dk); text-underline-offset:3px; }
a:hover{ color: var(--accent); }
.text-muted,.text-white-50{ color: var(--ink-3) !important; }
.text-primary{ color: var(--accent-dk) !important; }
.text-secondary{ color: var(--ink-3) !important; }
.text-dark{ color: var(--ink) !important; }
hr{ border-color: var(--line) !important; opacity:1; }

/* soften every inherited corner */
[class*="rounded"]{ border-radius:18px !important; }
.rounded-pill{ border-radius:999px !important; }
.rounded-circle{ border-radius:50% !important; }

/* ---------- section rhythm: stacked panels, alternating grounds -------- */
#bestsellers,#testimonials,#products,#features,#about-brand,
#guides,#compare,#where-to-buy,#faq{
  padding-top:calc(var(--step)*3.2) !important;
  padding-bottom:calc(var(--step)*3.2) !important;
  border:0 !important;
  position:relative;
}
#bestsellers  { background: var(--paper) !important; }
#products     { background: var(--paper) !important; }
#compare      { background: var(--paper) !important; }
#faq          { background: var(--paper) !important; }

/* inset rounded panels — the "sheets on a desk" look */
#testimonials,#features,#guides,#where-to-buy,#about-brand{
  max-width:min(1560px,calc(100% - 44px)) !important;
  margin-inline:auto !important;
  border-radius: var(--r-panel) !important;
}
#testimonials { background: var(--t-blush) !important; }
#features     { background: var(--t-mint) !important;  padding-block:calc(var(--step)*2.2) !important; }
#about-brand  { background: var(--paper-2) !important; border:1px solid var(--line-2) !important; }
#guides       { background: var(--t-lilac) !important; }
#where-to-buy { background: var(--t-sky) !important; }

/* section heads: centred, with a small accent dot */
#bestsellers > .container > .text-center > h2,
#testimonials .testimonial-header h2,
#products .text-center h2{
  margin-bottom:.6rem !important;
}
#bestsellers .text-center > h2::after,
#testimonials .testimonial-header h2::after,
#products .text-center h2::after,
#guides .text-center h2::after{
  content:''; display:inline-block; width:9px; height:9px; border-radius:50%;
  background: var(--accent); margin-left:.34em; vertical-align:.12em;
}
#products .text-center.mb-5{ margin-bottom:3.4rem !important; }
#products .text-center h2.display-5{ font-size:clamp(2rem,3.4vw,2.9rem) !important; color:var(--ink) !important; }

/* ---------- navigation -------------------------------------------------- */
.navbar{
  background: rgba(253,250,246,.86) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
  box-shadow:none !important;
  padding:.55rem 0 !important;
}
.navbar-brand,.navbar-brand.d-flex{
  color: var(--ink) !important; font-weight:800 !important;
  font-size:1.55rem !important; letter-spacing:-.03em !important;
}
.navbar-brand::after{
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--accent); display:inline-block; margin-left:5px; vertical-align:.55em;
}
.navbar-brand img{ display:none !important; }
.navbar .nav-link,.navbar .nav-link.text-white{
  color: var(--ink) !important; font-weight:600 !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:.95rem; letter-spacing:-.01em;
  padding:.44rem .92rem !important; border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.navbar .nav-link:hover,.navbar .nav-item.show .nav-link{
  background: var(--accent-sf) !important; color: var(--accent-dk) !important;
}
.navbar-toggler{ border-color: var(--line) !important; border-radius:14px !important; }
.navbar-toggler:focus{ box-shadow:0 0 0 3px var(--accent-sf) !important; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%232A211C' stroke-width='2.2' stroke-linecap='round' d='M5 9h20M5 15h20M5 21h20'/%3E%3C/svg%3E") !important;
}
.dropdown-menu{
  background: var(--paper-2) !important;
  border:1px solid var(--line-2) !important;
  border-radius:18px !important; padding:.5rem !important;
  box-shadow: var(--sh-2) !important; margin-top:.5rem !important;
}
.dropdown-item{
  color: var(--ink) !important; font-weight:500 !important;
  border-radius:12px !important; padding:.5rem .8rem !important; font-size:.94rem;
}
.dropdown-item:hover{ background: var(--accent-sf) !important; color: var(--accent-dk) !important; }
.dropdown-item.active,.dropdown-item:active{ background: var(--accent) !important; color:#fff !important; }

/* ---------- hero -------------------------------------------------------- */
.hero-header{
  margin-top:0 !important; margin-bottom:0 !important;
  position:relative; overflow:hidden;
  background:
    radial-gradient(1000px 620px at 86% 4%,  #FFE3D3 0%, rgba(255,227,211,0) 62%),
    radial-gradient(760px 560px at 2% 96%,   #E6F2EA 0%, rgba(230,242,234,0) 60%),
    radial-gradient(620px 460px at 46% 110%, #FFF3D6 0%, rgba(255,243,214,0) 62%),
    var(--paper) !important;
}
.hero-header .container.py-5{
  padding-top:clamp(3rem,7vw,6.2rem) !important;
  padding-bottom:clamp(3.4rem,8vw,6.8rem) !important;
  position:relative; z-index:2;
}
/* the strip closing the hero — JusArt used a 168-colour ribbon for its marker
   range; a tool brand gets its own two colours instead */
.hero-header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:6px; z-index:3;
  background:linear-gradient(90deg,#185B37,#23794A 45%,#F0A500);
}
.hero-header .row{ align-items:center !important; }

/* eyebrow → a chip */
.hero-header h4,.hero-header h4.text-secondary{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--paper-2); color: var(--ink) !important;
  border:1px solid var(--line);
  font-size:.82rem !important; font-weight:600 !important;
  letter-spacing:.02em !important; text-transform:uppercase;
  padding:.45rem .95rem .45rem .8rem; border-radius:999px;
  box-shadow:0 1px 2px rgba(42,33,28,.05);
  margin-bottom:1.6rem !important;
}
.hero-header h4::before{
  content:''; width:7px; height:7px; border-radius:50%; background: var(--accent);
}
/* headline: kill the inline Allura + rainbow clip */
.hero-header h1,
h1.rainbow-gradient-text,
.rainbow-gradient-text{
  font-family:'Fraunces','Plus Jakarta Sans',Georgia,serif !important;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:clamp(2.8rem,5.6vw,4.5rem) !important;
  font-weight:800 !important; line-height:1.02 !important; letter-spacing:-.032em !important;
  color: var(--ink) !important;
  background:none !important; -webkit-text-fill-color: var(--ink) !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  max-width:14ch; position:relative; padding-bottom:.36em;
}
.hero-header h1::after{
  content:''; position:absolute; left:2px; bottom:.02em;
  width:min(330px,62%); height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 13' preserveAspectRatio='none'%3E%3Cpath d='M4 9C62 3 116 12 168 6.5S268 2.5 316 8' fill='none' stroke='%2323794A' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
.hero-header .d-flex.align-items-center.flex-grow-1{ flex-grow:0 !important; margin-bottom:2.1rem; }
.hero-header .d-flex.align-items-start{ display:block !important; }

/* the carousel card, floating on a tilted plate */
.hero-header .col-lg-5{ position:relative; }
.hero-header .col-lg-5::before{
  content:''; position:absolute; inset:6% -3% 10% 2%;
  background: linear-gradient(150deg,var(--butter),var(--blush) 55%,var(--sky));
  border-radius:44px; transform:rotate(-5deg); z-index:0; opacity:.75;
}
.hero-header .carousel{ position:relative; z-index:1; }
.hero-header .fruite-item{
  background: var(--paper-2) !important;
  border:1px solid var(--line-2) !important;
  border-radius:28px !important; overflow:hidden;
  box-shadow: var(--sh-2) !important;
}
.hero-header .fruite-item .p-4{ border:0 !important; padding:1.1rem 1.3rem 1.35rem !important; }
.hero-header .fruite-item h4{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:1rem !important; font-weight:700 !important; letter-spacing:-.018em !important;
  line-height:1.35 !important; margin:0 !important;
}
.hero-header .fruite-img{ background: var(--t-butter) !important; padding:.9rem .9rem 0 !important; }
.hero-header .fruite-img img{ mix-blend-mode:multiply; border-radius:16px !important; }
.carousel-control-prev,.carousel-control-next{ width:12% !important; opacity:.55; }
.carousel-control-prev-icon,.carousel-control-next-icon{ filter:invert(1) grayscale(1) brightness(.35); }

/* ---------- buttons ----------------------------------------------------- */
.btn{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:700 !important; letter-spacing:-.012em !important;
  border-radius:999px !important; border-width:1.5px !important;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease,background .16s ease;
}
.btn-custom,.btn-primary,.hero-cta-button,.btn-success,.btn-warning,.subscribe-btn{
  background: var(--accent) !important; border-color: var(--accent) !important;
  color:#fff !important;
  box-shadow:0 1px 2px rgba(24,91,55,.24),0 12px 26px -12px rgba(24,91,55,.75) !important;
}
.btn-custom:hover,.btn-primary:hover,.hero-cta-button:hover,
.btn-success:hover,.btn-warning:hover,.subscribe-btn:hover{
  background: var(--accent-dk) !important; border-color: var(--accent-dk) !important;
  color:#fff !important; transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(24,91,55,.24),0 18px 34px -12px rgba(24,91,55,.85) !important;
}
.hero-cta-button{ padding:.95rem 2.1rem !important; font-size:1.03rem !important; }
.btn-outline-primary,.btn-outline-secondary,.btn-light{
  background: var(--paper-2) !important; color: var(--ink) !important;
  border-color: var(--line) !important; box-shadow:0 1px 2px rgba(42,33,28,.05) !important;
}
.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-light:hover{
  background: var(--accent-sf) !important; color: var(--accent-dk) !important;
  border-color: var(--accent) !important; transform:translateY(-2px);
}
.btn-sm{ font-size:.86rem !important; padding:.5rem 1rem !important; }
.btn .fa-eye{ display:none !important; }
.back-to-top{
  background: var(--accent) !important; border-color: var(--accent) !important;
  box-shadow: var(--sh-2) !important;
}

/* ---------- cards ------------------------------------------------------- */
.product-card,.fruite-item,.guide-card,.testimonial-item,.featurs-item{
  background: var(--paper-2) !important;
  border:1px solid var(--line-2) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-1) !important;
  overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease;
}
.product-card:hover,.fruite-item:hover,.guide-card:hover,.testimonial-item:hover{
  transform:translateY(-5px);
  box-shadow: var(--sh-2) !important;
  border-color: var(--line) !important;
}
.product-image-wrapper,.fruite-img{
  padding:1.05rem !important; border-radius:0 !important;
  display:flex; align-items:center; justify-content:center;
}
.product-image-wrapper img,.fruite-img img{
  mix-blend-mode:multiply; border-radius:14px !important;
}
/* tint plates cycle through the brand pastels */
.row > [class*="col-"]:nth-child(6n+1) .product-image-wrapper{ background: var(--t-blush) !important; }
.row > [class*="col-"]:nth-child(6n+2) .product-image-wrapper{ background: var(--t-butter) !important; }
.row > [class*="col-"]:nth-child(6n+3) .product-image-wrapper{ background: var(--t-mint) !important; }
.row > [class*="col-"]:nth-child(6n+4) .product-image-wrapper{ background: var(--t-sky) !important; }
.row > [class*="col-"]:nth-child(6n+5) .product-image-wrapper{ background: var(--t-lilac) !important; }
.row > [class*="col-"]:nth-child(6n+6) .product-image-wrapper{ background:#F6F2EC !important; }
#bestsellers .row > [class*="col-"]:nth-child(1) .fruite-img{ background: var(--t-blush) !important; }
#bestsellers .row > [class*="col-"]:nth-child(2) .fruite-img{ background: var(--t-butter) !important; }
#bestsellers .row > [class*="col-"]:nth-child(3) .fruite-img{ background: var(--t-mint) !important; }
#bestsellers .fruite-item .p-4{ border:0 !important; padding:1.15rem 1.35rem 1.5rem !important; }
#bestsellers .fruite-item h4{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:1.02rem !important; font-weight:700 !important; letter-spacing:-.018em !important;
  line-height:1.35 !important; text-align:left; margin-bottom:.55rem !important;
}
#bestsellers .fruite-item p{ text-align:left; font-size:.95rem !important; }
#bestsellers .fruite-item .d-flex.justify-content-center{ justify-content:flex-start !important; }
.product-info{ padding:1rem 1.15rem 1.25rem !important; }
.product-info .btn{ margin-top:.85rem !important; }

/* badges */
.bestseller-badge,.sales-badge{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:.7rem !important; font-weight:700 !important;
  letter-spacing:.03em; text-transform:uppercase;
  border-radius:999px !important; padding:.32rem .72rem !important;
  box-shadow:0 2px 8px rgba(42,33,28,.12) !important;
  color: var(--ink) !important; background: var(--butter) !important;
  top:14px !important; left:14px !important;
}
.sales-badge{ background: var(--paper-2) !important; border:1px solid var(--line); }
.sales-badge i{ color: var(--accent) !important; }

/* ---------- category rows ---------------------------------------------- */
.category-section{ margin-bottom:calc(var(--step)*2.6) !important; }
.category-section > .d-flex{
  border-bottom:1px solid var(--line-2); padding-bottom:1rem; margin-bottom:1.7rem !important;
}
.category-icon{
  width:46px; height:46px; border-radius:15px !important;
  display:flex; align-items:center; justify-content:center;
  background: var(--blush) !important; color: var(--ink) !important;
}
.category-icon i{ color: var(--ink) !important; font-size:1.05rem; }
.category-section:nth-of-type(2) .category-icon{ background: var(--butter) !important; }
.category-section:nth-of-type(3) .category-icon{ background: var(--mint) !important; }
.category-section:nth-of-type(4) .category-icon{ background: var(--sky) !important; }
.category-section:nth-of-type(5) .category-icon{ background: var(--lilac) !important; }
.category-title{ font-size:clamp(1.4rem,2.2vw,1.85rem) !important; }
.btn-view-all{ white-space:nowrap; }

/* ---------- features ---------------------------------------------------- */
.featurs-item{ padding:2rem 1.4rem !important; box-shadow:none !important; background:var(--paper-2) !important; }
.featurs-icon{
  width:58px !important; height:58px !important;
  background: var(--accent) !important; border-radius:18px !important;
  display:flex !important; align-items:center; justify-content:center;
}
.featurs-icon i{ color:#fff !important; font-size:1.15rem; }
.featurs-item h5{ margin-bottom:.35rem !important; }
.featurs-item p{ margin:0 auto !important; font-size:.95rem !important; }

/* ---------- testimonials ------------------------------------------------ */
.testimonial-item{ padding:1.9rem 1.9rem !important; }
.testimonial-item p{ color: var(--ink) !important; font-size:1.04rem !important; line-height:1.65 !important; }
.testimonial-item .border-bottom{ border-color: var(--line-2) !important; }
.testimonial-quote i,.fa-quote-right{ color: var(--blush) !important; }
.testimonial-item h4{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:1rem !important; font-weight:700 !important; margin-bottom:.1rem !important;
}
.testimonial-item .ms-4 p{ font-size:.86rem !important; color: var(--ink-3) !important; padding-bottom:.5rem !important; }
.testimonial-item .bg-secondary{ background: var(--blush) !important; border-radius:50% !important; padding:3px; }
.testimonial-img,.testimonial-item img{ border-radius:50% !important; }
.fa-star,.fas.fa-star{ color: var(--accent) !important; font-size:.82rem; }

/* ---------- brand story ------------------------------------------------- */
#about-brand h3{ color: var(--ink) !important; }
#about-brand h3::before{
  content:''; display:block; width:34px; height:4px; border-radius:99px;
  background: var(--accent); margin-bottom:.9rem;
}
#about-brand p{ font-size:1.01rem !important; }

/* ---------- guides ------------------------------------------------------ */
.guide-card{ padding:1.5rem 1.55rem !important; height:100%; }
.guide-card h5{ margin-bottom:.5rem !important; }
.guide-card p{ font-size:.9rem !important; color: var(--ink-2) !important; }
.guide-card::after{
  content:'→'; display:block; margin-top:.9rem; color: var(--accent);
  font-weight:700; transform:translateX(0); transition:transform .18s ease;
}
.guide-card:hover::after{ transform:translateX(5px); }

/* ---------- comparison table -------------------------------------------- */
#compare .table-responsive{
  background: var(--paper-2); border:1px solid var(--line-2);
  border-radius: var(--r-card); padding:.4rem .6rem; box-shadow: var(--sh-1);
  margin-top:1.8rem;
}
.table{ border-color: var(--line-2) !important; margin-bottom:0 !important; }
.table thead th{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:.78rem !important; text-transform:uppercase; letter-spacing:.06em;
  color: var(--ink-3) !important; border-bottom:1px solid var(--line) !important;
  padding:1rem .8rem !important; background:transparent !important;
}
.table td,.table th{ border-color: var(--line-2) !important; padding:.9rem .8rem !important; color: var(--ink-2) !important; }
.table td strong{ color: var(--ink) !important; }
.cmp-win{
  color:#2F7D57 !important; font-weight:700 !important;
  background:#E9F5EE; padding:.2rem .6rem; border-radius:999px; display:inline-block;
}
.cmp-lose{ color: var(--ink-3) !important; font-weight:600 !important; }

/* ---------- where to buy ------------------------------------------------ */
#where-to-buy .col-lg-5 > div{
  background: var(--paper-2) !important; border:1px solid var(--line-2) !important;
  border-radius: var(--r-card) !important; padding:1.8rem !important;
  box-shadow: var(--sh-1);
}
#where-to-buy ul{ padding-left:1.1rem; }
#where-to-buy li{ margin-bottom:.6rem; }

/* ---------- FAQ --------------------------------------------------------- */
.accordion-item{
  background: var(--paper-2) !important; border:1px solid var(--line-2) !important;
  border-radius:18px !important; margin-bottom:.75rem; overflow:hidden;
  box-shadow:0 1px 2px rgba(42,33,28,.04);
}
.accordion-button{
  font-family:'Fraunces',Georgia,serif !important;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:1.1rem !important; font-weight:600 !important; letter-spacing:-.016em !important;
  color: var(--ink) !important; background: var(--paper-2) !important;
  padding:1.1rem 1.3rem !important; box-shadow:none !important;
}
.accordion-button:not(.collapsed){ background: var(--accent-sf) !important; color: var(--accent-dk) !important; }
.accordion-button:focus{ box-shadow:0 0 0 3px var(--accent-sf) !important; }
.accordion-button::after{ filter:sepia(1) saturate(4) hue-rotate(-20deg); }
.accordion-body{ padding:.2rem 1.3rem 1.35rem !important; color: var(--ink-2) !important; }

/* ---------- footer ------------------------------------------------------ */
.footer,.container-fluid.bg-dark,.copyright.bg-dark{
  background: #241D19 !important; color:#C9BDB4 !important;
  border:0 !important;
}
.footer{ margin-top:0 !important; position:relative; }
.footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#185B37,#23794A 45%,#F0A500);
}
.footer h3,.footer h4,.footer h5,.footer .text-primary{
  color:#FFF7F0 !important; font-family:'Fraunces',Georgia,serif !important;
}
.footer p,.footer li,.footer .text-white-50{ color:#A8998E !important; }
.footer a,.footer .btn-link{ color:#D9CDC4 !important; text-decoration:none !important; }
.footer a:hover,.footer .btn-link:hover{ color: #FFB59E !important; letter-spacing:0 !important; }
.footer-border{ border-color:rgba(255,255,255,.1) !important; }
.footer .btn-outline-secondary{
  background:transparent !important; color:#D9CDC4 !important;
  border-color:rgba(255,255,255,.2) !important; box-shadow:none !important;
}
.footer .btn-outline-secondary:hover{ background: var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.footer input.form-control{
  border-radius:999px !important; background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important; color:#fff !important;
}
.amazon-disclosure{ color:#8C7E74 !important; font-size:.84rem; }

/* ---------- template corrections ---------------------------------------- */
#spinner,.topbar{ display:none !important; }
.hero-header,.page-header{ margin-top:0 !important; }
@media (min-width:992px){ .hero-header{ margin-top:0 !important; } }
.am-links a{ color: var(--accent-dk) !important; }
.am-intro p{ font-size:1.05rem !important; }

@media (max-width:991.98px){
  #testimonials,#features,#guides,#where-to-buy,#about-brand{
    max-width:calc(100% - 20px) !important; border-radius:28px !important;
  }
  .hero-header h1{ max-width:none; }
  .hero-header .col-lg-5::before{ display:none; }
}

/* ==========================================================================
   Corrections against the inherited template's own inline overrides
   ========================================================================== */

/* the diamond crosshatch ornament baked into the hero — gone */
.hero-header::before{ display:none !important; content:none !important; }

/* the eyebrow chip must not catch the carousel card titles */
.hero-header .fruite-item h4,
.carousel .fruite-item h4{
  display:block !important; text-transform:none !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
  letter-spacing:-.018em !important; font-size:1rem !important;
  color: var(--ink) !important; margin:0 !important;
}
.hero-header .fruite-item h4::before{ content:none !important; }
.carousel .fruite-item .p-4{ background: var(--paper-2) !important; }

/* product grid: the template builds a square with padding-top:100% and an
   absolutely-placed cover image. Keep the square, letterbox the shot on the
   tint plate instead of cropping it. */
.product-image-wrapper{
  padding:0 !important; padding-top:100% !important;
  position:relative !important; display:block !important;
  border-radius:0 !important;
}
.product-image{
  position:absolute !important; top:14px !important; left:14px !important;
  width:calc(100% - 28px) !important; height:calc(100% - 28px) !important;
  object-fit:contain !important; mix-blend-mode:multiply;
  border-radius:12px !important;
}
.product-card:hover .product-image{ transform:scale(1.04) !important; }
.product-card{ box-shadow: var(--sh-1) !important; border-radius: var(--r-card) !important; }
.product-title{ font-size:.97rem !important; min-height:2.6em; }

/* carousel arrows: ink triangles on soft white discs, off the artwork */
.hero-header .carousel-control-prev,
.hero-header .carousel-control-next{
  width:38px !important; height:38px !important; border-radius:50% !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow:0 2px 10px rgba(42,33,28,.16) !important;
  border:1px solid var(--line-2) !important; opacity:1 !important;
  top:42% !important;
}
.hero-header .carousel-control-prev{ margin-left:10px !important; }
.hero-header .carousel-control-next{ margin-right:10px !important; }
.carousel-control-prev-icon,.carousel-control-next-icon{
  filter:none !important; width:0 !important; height:0 !important;
}
.carousel-control-prev-icon::before{
  border-width:7px 9px 7px 0 !important;
  border-color:transparent #2A211C transparent transparent !important;
}
.carousel-control-next-icon::before{
  border-width:7px 0 7px 9px !important;
  border-color:transparent transparent transparent #2A211C !important;
}

/* features icons: the inline sheet forces a green square — replace it */
.featurs .featurs-item .featurs-icon{
  background: var(--accent) !important; border-radius:18px !important;
  width:58px !important; height:58px !important;
}
.featurs .featurs-item .featurs-icon::after{ display:none !important; }

/* owl nav on the reviews rail */
.testimonial .owl-nav .owl-next{
  width:42px !important; height:42px !important; border-radius:50% !important;
  background: var(--paper-2) !important; border:1px solid var(--line) !important;
  color: var(--ink) !important; box-shadow: var(--sh-1) !important;
  top:-70px !important;
}
.testimonial .owl-nav .owl-next:hover{ background: var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }

/* tighten the seam between best sellers and the reviews panel */
#bestsellers{ padding-bottom:calc(var(--step)*1.8) !important; }
#bestsellers .row.justify-content-center.mt-5{ margin-top:2.4rem !important; }
#testimonials{ margin-top:1rem !important; }
#products{ padding-top:calc(var(--step)*3) !important; }

/* the guide grid keeps its cards level */
#guides .row{ align-items:stretch; }

/* hero composition: give the card a plate it actually sits on */
@media (min-width:992px){
  .hero-header .container.py-5{ min-height:600px; display:flex; align-items:center; }
  .hero-header .container.py-5 > .row{ width:100%; }
}
.hero-header .col-lg-5::before{
  inset:4% 5% 6% -4% !important;
  transform:rotate(-4.5deg) !important;
  opacity:1 !important;
  background:linear-gradient(145deg,#FFF1D6 0%,#E8F4EC 55%,#DCEBE1 100%) !important;
  border-radius:40px !important;
}
.hero-header .col-lg-5::after{
  content:''; position:absolute; right:2%; top:2%;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFF3D6,#FFD9A8);
  z-index:0; opacity:.85;
}
.hero-header .fruite-item{ margin:0 6% 0 2%; }

/* the template repeats its arrow rules in a later <style> block, so these need
   the extra class to win on specificity rather than on order */
.hero-header .carousel .carousel-control-prev-icon,
.hero-header .carousel .carousel-control-next-icon{
  width:0 !important; height:0 !important; background-image:none !important;
  display:flex; align-items:center; justify-content:center;
}
.hero-header .carousel .carousel-control-prev-icon::before{
  border-width:7px 9px 7px 0 !important;
  border-color:transparent #2A211C transparent transparent !important;
}
.hero-header .carousel .carousel-control-next-icon::before{
  border-width:7px 0 7px 9px !important;
  border-color:transparent transparent transparent #2A211C !important;
}
.hero-header .carousel .carousel-control-prev,
.hero-header .carousel .carousel-control-next{
  width:40px !important; height:40px !important; border-radius:50% !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow:0 3px 14px rgba(42,33,28,.18) !important;
  border:1px solid var(--line-2) !important; opacity:1 !important;
  top:44% !important; transform:translateY(-50%) !important;
  transition:background .16s ease, transform .16s ease;
}
.hero-header .carousel .carousel-control-prev{ left:2px !important; margin:0 !important; }
.hero-header .carousel .carousel-control-next{ right:5.5% !important; margin:0 !important; }
.hero-header .carousel .carousel-control-prev:hover,
.hero-header .carousel .carousel-control-next:hover{ background:#fff !important; }

/* features: the template's later block forces a green icon — outrank it */
#features .featurs .featurs-item .featurs-icon,
#features .featurs-item .featurs-icon.bg-secondary{
  background: var(--accent) !important; background-color: var(--accent) !important;
  border-radius:18px !important; width:60px !important; height:60px !important;
}
#features .featurs .featurs-item .featurs-icon::after{ display:none !important; }
#features .featurs-item{
  padding:2.4rem 1.6rem !important; border:1px solid rgba(42,33,28,.06) !important;
}
#features .row{ --bs-gutter-x:1.6rem; }
#features .featurs-item h5{ font-size:1.15rem !important; margin-bottom:.4rem !important; }

/* brand story: a readable column, not a wall */
#about-brand .container{ max-width:1180px; }
#about-brand p{ font-size:1.03rem !important; line-height:1.78 !important; color:var(--ink-2) !important; }
#about-brand .row{ --bs-gutter-x:4rem; }
#about-brand h3{ font-size:1.5rem !important; }

/* seams */
#products{ padding-bottom:calc(var(--step)*1.6) !important; }
#features{ margin-top:1.2rem !important; }
#about-brand{ margin-top:1.2rem !important; }
#guides{ margin-top:1.2rem !important; }
#where-to-buy{ margin-top:1.2rem !important; }

/* footer social buttons read as buttons */
.footer .btn-square,.footer .btn.btn-outline-secondary.rounded-circle{
  border:1px solid rgba(255,255,255,.18) !important;
}

/* ==========================================================================
   Category, product and guide pages (they carry their own inline <style>)
   ========================================================================== */

.page-header,.page-hero,.category-hero{
  background:
    radial-gradient(900px 460px at 78% 0%, #FFE3D3 0%, rgba(255,227,211,0) 62%),
    radial-gradient(700px 420px at 6% 100%, #E6F2EA 0%, rgba(230,242,234,0) 60%),
    var(--paper) !important;
  border-bottom:1px solid var(--line-2);
}
.page-header::before,.page-header::after{ display:none !important; }
.page-title{ font-size:clamp(2.4rem,4.6vw,3.6rem) !important; }
.page-subtitle{ color: var(--ink-2) !important; font-size:1.12rem !important; }

/* subcategory rules: a soft accent underline, not a hard yellow bar */
.subcategory-title{
  color: var(--ink) !important;
  border-bottom:0 !important; padding-bottom:0 !important;
  position:relative; padding-left:0 !important; margin-bottom:1.4rem !important;
}
.subcategory-title::after{
  content:''; display:block; width:64px; height:5px; border-radius:99px;
  background: var(--accent); margin-top:.6rem;
}

/* the tag chips under each product: soft, on-palette */
.badge.bg-primary,.badge.bg-secondary{
  background: var(--paper-3) !important; color: var(--ink-2) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:600 !important; font-size:.72rem !important;
  border-radius:999px !important; padding:.34rem .7rem !important;
  border:1px solid var(--line);
}
.badge.bg-primary{ background: var(--accent-sf) !important; color: var(--accent-dk) !important; border-color:#E3D4FA; }

/* the in-page link stack reads as chips instead of a wall of orange */
.am-links{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.am-links li{ margin:0 !important; }
.am-links a{
  display:inline-block; background: var(--paper-2); color: var(--ink) !important;
  border:1px solid var(--line); border-radius:999px;
  padding:.44rem .95rem; font-size:.9rem; font-weight:600;
  text-decoration:none !important; transition:background .16s ease,border-color .16s ease;
}
.am-links a:hover{ background: var(--accent-sf); border-color: var(--accent); color: var(--accent-dk) !important; }

/* breadcrumbs */
.breadcrumb{ background:transparent !important; font-size:.9rem; }
.breadcrumb a{ color: var(--accent-dk) !important; }
.breadcrumb-item.active,.breadcrumb-item+.breadcrumb-item::before{ color: var(--ink-3) !important; }

/* swatch chips on the colour-chart page keep their own colours, just softer edges */
.swatch,.swatch-card{ border-radius:14px !important; overflow:hidden; }

/* category pages call it .hero-section */
.hero-section{
  background:
    radial-gradient(900px 460px at 78% 0%, #FFE3D3 0%, rgba(255,227,211,0) 62%),
    radial-gradient(700px 420px at 6% 100%, #E6F2EA 0%, rgba(230,242,234,0) 60%),
    var(--paper) !important;
  border-bottom:1px solid var(--line-2);
  padding:clamp(3rem,6vw,5rem) 0 clamp(2.4rem,4vw,3.4rem) !important;
  position:relative;
}
.hero-section::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:linear-gradient(90deg,#185B37,#23794A 45%,#F0A500);
  opacity:.9;
}

/* ---------- small screens ----------------------------------------------- */
html,body{ overflow-x:hidden; max-width:100%; }
@media (max-width:991.98px){
  .hero-header h1,.hero-header h1.rainbow-gradient-text{
    font-size:clamp(2rem,7.4vw,2.9rem) !important; max-width:none !important;
  }
  .hero-header .fruite-item{ margin:0 !important; }
  .hero-header .col-lg-5::after{ display:none; }
  .hero-header .container.py-5{ min-height:0; display:block; }
  #about-brand .row{ --bs-gutter-x:1.5rem; }
}
@media (max-width:575.98px){
  body{ font-size:16px; }
  .hero-header h1,.hero-header h1.rainbow-gradient-text{ font-size:2.05rem !important; }
  .hero-header h1::after{ width:64%; height:10px; }
  h2{ font-size:1.7rem !important; }
  h3{ font-size:1.3rem !important; }
  .hero-cta-button{ padding:.85rem 1.5rem !important; font-size:.98rem !important; }
  .hero-header .container.py-5{ padding-top:2.4rem !important; padding-bottom:2.6rem !important; }
  #bestsellers,#testimonials,#products,#features,#about-brand,
  #guides,#compare,#where-to-buy,#faq{ padding-top:2.6rem !important; padding-bottom:2.6rem !important; }
  #testimonials,#features,#guides,#where-to-buy,#about-brand{
    max-width:calc(100% - 16px) !important; border-radius:24px !important;
  }
  .table{ font-size:.9rem; }
}

/* ==========================================================================
   Product pages — they drive everything from two :root variables, so the
   cheapest correct fix is to redefine those, then patch what they don't reach.
   ========================================================================== */
:root{
  --primary-color:   #23794A;
  --secondary-color: #185B37;
  --dark-color:      #2A211C;
  --light-bg:        #FDFAF6;
}

/* NOTE: .product-title is the product PAGE's h1 *and* the class on every
   product card title (h3 on category pages, h5 on the homepage). Scope the big
   display treatment to the h1 or every card title inflates to 35px. */
h1.product-title{
  font-family:'Fraunces',Georgia,serif !important;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:clamp(1.7rem,2.6vw,2.2rem) !important;
  letter-spacing:-.024em !important; line-height:1.12 !important;
  color: var(--ink) !important; margin-bottom:1rem !important;
}
h3.product-title,h5.product-title,.similar-product-title{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;
  font-size:.97rem !important; font-weight:700 !important;
  letter-spacing:-.018em !important; line-height:1.35 !important;
  color: var(--ink) !important;
}

/* the green "bought in past month" bar → a quiet pill */
.badge-sales,.similar-sales-badge{
  display:inline-flex !important; align-items:center; gap:.35rem;
  width:auto !important; background: var(--t-mint) !important;
  color:#2F7D57 !important; border:1px solid #CDE9D8 !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:700 !important; font-size:.76rem !important;
  letter-spacing:.02em; text-transform:uppercase;
  padding:.34rem .8rem !important; border-radius:999px !important;
}
.badge-sales i,.similar-sales-badge i{ color:#2F7D57 !important; }

/* icon tiles: flat accent, rounded square, no gradient */
.spec-icon,.hero-feature-icon,.feature-icon{
  background: var(--accent) !important; border-radius:16px !important;
  box-shadow:none !important;
}
.feature-icon{ width:64px !important; height:64px !important; border-radius:20px !important; }
.spec-icon,.hero-feature-icon{ border-radius:14px !important; }
.spec-icon i,.hero-feature-icon i,.feature-icon i{ color:#fff !important; }

/* the amazon CTA matches every other CTA on the network */
.btn-amazon{
  background: var(--accent) !important; border:0 !important; color:#fff !important;
  border-radius:999px !important; font-weight:700 !important;
  box-shadow:0 1px 2px rgba(24,91,55,.24),0 12px 26px -12px rgba(24,91,55,.75) !important;
}
.btn-amazon:hover{ background: var(--accent-dk) !important; transform:translateY(-2px); }

/* section rules: a short accent bar, not an orange gradient */
.section-title{ text-align:center; }
.section-title::after{
  background: var(--accent) !important; height:5px !important;
  width:60px !important; border-radius:99px !important;
}

/* cards and gallery */
.hero-feature-item,.similar-product-card,.spec-item,.review-card{
  background: var(--paper-2) !important;
  border:1px solid var(--line-2) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-1) !important;
}
.similar-product-image-wrapper{ background: var(--t-butter) !important; }
.similar-product-image{ object-fit:contain !important; padding:12px; mix-blend-mode:multiply; }
.similar-product-card:hover .similar-product-image{ transform:scale(1.04) !important; }
.carousel-item img{ border-radius:20px !important; }
.thumbnail-img{ border:2px solid var(--line) !important; border-radius:12px !important; }
.thumbnail-img:hover{ border-color: var(--accent) !important; }

/* product-page carousel arrows: discs, not orange blobs */
.carousel-control-prev-icon,.carousel-control-next-icon{
  background-color: rgba(255,255,255,.94) !important;
  box-shadow:0 3px 14px rgba(42,33,28,.18) !important;
}
.description-section{ background: var(--paper) !important; }

/* product-page gallery arrows: Bootstrap's chevron is white and would vanish on
   the white disc, so paint a dark one */
.carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A211C'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:45% 45% !important;
}
.carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A211C'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:45% 45% !important;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
  border-radius:50% !important; border:1px solid var(--line-2) !important;
}
.hero-header .carousel .carousel-control-prev-icon,
.hero-header .carousel .carousel-control-next-icon{
  background-image:none !important; border:0 !important;
}

/* The template absolutely-positions any <a> inside a carousel slide
   (style.css `.carousel-item a`), which collapses the slide to zero height as
   soon as each slide carries its own affiliate link. */
.hero-header .carousel-item a.carousel-slider-link{
  position:static !important; transform:none !important;
  background:none !important; font-size:inherit !important;
  display:block !important; width:100%; color:inherit !important;
}

/* ==========================================================================
   Whole-card click targets (stage 3)

   Every product card is clickable end to end and lands on Amazon. The link is
   an overlay rather than a wrapper because the cards already contain anchors
   and HTML forbids nesting them. A small Details chip sits above the overlay
   and keeps the internal link to the product page reachable - 45 of the 81
   product pages have that card as their only internal inbound link.
   ========================================================================== */
.product-card,.similar-product-card,#bestsellers .fruite-item{ position:relative; }
.card-amz{
  position:absolute; inset:0; z-index:2; border-radius:inherit;
  text-indent:-9999px; overflow:hidden;
}
.card-amz:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:inherit;
}
.card-details{
  position:absolute; top:12px; right:12px; z-index:3;
  display:inline-block; background:rgba(255,255,255,.94);
  border:1px solid var(--line); color:var(--ink) !important;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; line-height:1;
  padding:.4rem .65rem; border-radius:999px; text-decoration:none !important;
  box-shadow:0 2px 8px rgba(42,33,28,.14);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.card-details:hover{
  background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important;
}
/* the Details chip owns the top-right corner, so the long "N+ bought in past
   month" badge drops to the foot of the image where nothing competes with it */
.sales-badge,.similar-sales-badge{
  top:auto !important; bottom:12px !important; left:12px !important; right:auto !important;
  max-width:calc(100% - 24px);
}
.bestseller-badge{ top:12px !important; left:12px !important; right:auto !important; }
/* the card lifts as one object on hover */
.product-card:hover,.similar-product-card:hover{ transform:translateY(-5px); }

/* `.product-card a` in style.css is display:flex/height:100%, which stretches
   the Details chip into a full-height column. Pin it back to a chip. */
.card-details{
  display:inline-block !important; width:auto !important; height:auto !important;
  flex:0 0 auto !important;
}
.card-amz{ display:block !important; height:auto !important; }

/* ---------- utility pages: sitemap and 404 ------------------------------ */
#sitemap .sm-list a{ color: var(--ink) !important; }
#sitemap .sm-list a:hover{ color: var(--accent-dk) !important; }
#sitemap .sm-group{ box-shadow: var(--sh-1); }
body:has(#sitemap) .hero-header .container.py-5,
body:has(#guides.utility) .hero-header .container.py-5{ min-height:0 !important; }
.hero-header .container.py-5.text-center{ min-height:0 !important; display:block !important; }
.hero-header .text-center h1{ max-width:none; margin-inline:auto; }
.hero-header .text-center h1::after{ left:50%; transform:translateX(-50%); }
.hero-header .text-center h4{ margin-inline:auto; }


/* ==========================================================================
   ZEGJAW template specifics

   Same chrome as JusArt: a fixed-top bar with a coloured utility strip above a
   white navbar. Same treatment — calm the ground, let the yellow tools carry
   the colour. The bootstrap variables the template drives everything from are
   redefined rather than chased selector by selector.
   ========================================================================== */

:root{
  --bs-primary:   #23794A;
  --bs-secondary: #F0A500;
  --primary-color:   #23794A;
  --secondary-color: #185B37;
  --dark-color:      #1F2421;
  --light-bg:        #FDFAF6;
}

.topbar, .topbar.bg-primary{ display:none !important; }
.container-fluid.fixed-top{ background:transparent !important; }
.navbar.navbar-light.bg-white{
  background: rgba(253,250,246,.88) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
  box-shadow:none !important;
}
.navbar-brand h2{
  font-family:'Fraunces',Georgia,serif !important;
  font-size:1.5rem !important; color: var(--ink) !important;
  letter-spacing:-.03em !important;
}
.navbar .nav-item.nav-link, .navbar .nav-link{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  color: var(--ink) !important; font-weight:600 !important;
  font-size:.95rem !important; padding:.44rem .92rem !important;
  border-radius:999px;
}
.navbar .nav-link:hover,.navbar .nav-item.show .nav-link,
.navbar .nav-item.nav-link.active{
  background: var(--accent-sf) !important; color: var(--accent-dk) !important;
}
.navbar .dropdown-menu{
  border:1px solid var(--line) !important; border-radius:14px !important;
  box-shadow:0 18px 40px -18px rgba(31,36,33,.35) !important;
  padding:.4rem !important; background: var(--paper-2) !important;
}
.navbar .dropdown-item{
  font-family:'Plus Jakarta Sans',sans-serif !important; font-size:.9rem !important;
  border-radius:10px !important; padding:.5rem .7rem !important; color: var(--ink) !important;
}
.navbar .dropdown-item:hover,.navbar .dropdown-item.active{
  background: var(--accent-sf) !important; color: var(--accent-dk) !important;
}

/* the hero ground: the template ships a grey gradient with a diagonal weave */
.hero-header{
  background:
    radial-gradient(900px 560px at 88% 6%, var(--t-butter) 0%, rgba(255,248,236,0) 60%),
    radial-gradient(720px 520px at 4% 94%, var(--t-mint) 0%, rgba(240,248,242,0) 58%),
    var(--paper) !important;
  border-bottom:1px solid var(--line-2);
}

/* generated pages */
.page-hero{
  background: var(--paper-3) !important; border-bottom:1px solid var(--line) !important;
}
.page-hero h1{ font-family:'Fraunces',Georgia,serif !important; letter-spacing:-.02em; }
.prose h2,.page-hero h1,#collections h2,#bestsellers h2{
  font-family:'Fraunces',Georgia,serif !important; letter-spacing:-.02em;
}
.product-card,.guide-card{
  border:1px solid var(--line) !important; border-radius:18px !important;
  background: var(--paper-2) !important;
}
.product-card:hover,.guide-card:hover{
  box-shadow:0 16px 38px -18px rgba(31,36,33,.32) !important;
}
h3.product-title,h5.product-title,.guide-card h5{
  font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important;
}
table.spec-table thead th{ background: var(--paper-3) !important; }
.note{ background: var(--t-butter) !important; border-color: var(--line) !important;
  border-left-color: var(--accent) !important; border-radius:14px !important; }


/* ---- sticky header ------------------------------------------------------
   main.js hides the template's 55px utility strip on scroll with
   `$('.fixed-top').css('top', -55)`. The Atelier skin removes that strip
   entirely, so the same line drags the *navbar* off the top of the screen and
   the header stops sticking. An !important declaration in a stylesheet beats a
   non-important inline style, so this pins it without touching the shared JS.  */
.container-fluid.fixed-top{ top:0 !important; }