/* ==========================================================================
   JusArt — Atelier, adapted

   Warm paper ground, ink-brown type, one confident persimmon 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:    #7C46C9;
  --accent-dk: #6534AB;
  --accent-sf: #F3ECFD;

  /* supporting chips — real SFAIH pastels, used small */
  --butter: #FFE9BF;
  --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 168-colour ribbon closing the hero */
.hero-header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:7px; z-index:3;
  background:linear-gradient(90deg,
    #FBD3DE 0 7.14%, #FCB3C7 7.14% 14.28%, #FCC791 14.28% 21.42%, #FFE9BF 21.42% 28.56%,
    #F2EFA2 28.56% 35.7%, #C6DF9C 35.7% 42.84%, #CDE9D8 42.84% 49.98%, #A8DCCB 49.98% 57.12%,
    #CBDFF6 57.12% 64.26%, #A3C6EA 64.26% 71.4%, #C0C8F7 71.4% 78.54%, #DED2F8 78.54% 85.68%,
    #E7B6E4 85.68% 92.82%, #7C46C9 92.82% 100%);
}
.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='%237C46C9' 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(108,52,171,.24),0 12px 26px -12px rgba(108,52,171,.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(108,52,171,.24),0 18px 34px -12px rgba(108,52,171,.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,#FBD3DE,#FCC791,#F2EFA2,#CDE9D8,#CBDFF6,#DED2F8,#7C46C9);
}
.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,#FFE0B8 0%,#FBD3DE 48%,#CBDFF6 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,#FBD3DE,#FCC791,#F2EFA2,#CDE9D8,#CBDFF6,#DED2F8,#7C46C9);
  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:   #7C46C9;
  --secondary-color: #6534AB;
  --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(108,52,171,.24),0 12px 26px -12px rgba(108,52,171,.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; }

/* ==========================================================================
   JusArt template specifics

   Different chrome from sfaih: a fixed-top bar with a purple utility strip
   above a white navbar, and a `.product-hero` carrying an animated five-stop
   rainbow gradient. Same treatment as before - calm the ground, let the
   products carry the colour.
   ========================================================================== */

/* the utility strip and the animated hero gradient both go */
.topbar, .topbar.bg-primary{ display:none !important; }
.container-fluid.fixed-top{ background:transparent !important; }
.navbar.navbar-light.bg-white{
  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;
}
.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{
  background: var(--accent-sf) !important; color: var(--accent-dk) !important;
}

.product-hero{
  background:
    radial-gradient(1000px 620px at 86% 4%,  #EFE4FB 0%, rgba(239,228,251,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;
  animation:none !important;
  padding:clamp(3.4rem,7vw,6rem) 0 clamp(3rem,6vw,5rem) !important;
  margin-top:0 !important; position:relative;
}
.product-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:7px;
  background:linear-gradient(90deg,
    #FBD3DE 0 7.14%, #FCB3C7 7.14% 14.28%, #FCC791 14.28% 21.42%, #FFE9BF 21.42% 28.56%,
    #F2EFA2 28.56% 35.7%, #C6DF9C 35.7% 42.84%, #CDE9D8 42.84% 49.98%, #A8DCCB 49.98% 57.12%,
    #CBDFF6 57.12% 64.26%, #A3C6EA 64.26% 71.4%, #C0C8F7 71.4% 78.54%, #DED2F8 78.54% 85.68%,
    #E7B6E4 85.68% 92.82%, #7C46C9 92.82% 100%);
}
/* the hero text was white on a saturated gradient; it is now ink on cream */
.product-hero h1, .product-hero .display-4, .product-hero .display-5,
.product-hero .text-white{ color: var(--ink) !important; }
.product-hero .lead.text-white, .product-hero p.text-white{ color: var(--ink-2) !important; }
.product-hero .btn-custom{
  border:0 !important;
  box-shadow:0 1px 2px rgba(108,52,171,.24),0 12px 26px -12px rgba(108,52,171,.75) !important;
}

/* body padding: the template reserves space for the fixed bar it no longer needs */
body{ padding-top:0 !important; }
.hero-header, .page-header{ margin-top:0 !important; }

.feature-box{
  background: var(--paper-2) !important; border:1px solid var(--line-2) !important;
  border-radius: var(--r-card) !important; box-shadow: var(--sh-1) !important;
  padding:1.6rem 1.7rem !important;
}
.feature-box h4{ font-size:1.15rem !important; }

/* the generated guide cards and line grids */
.guide-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;
  color: var(--ink) !important;
}
.guide-card:hover{ transform:translateY(-4px); box-shadow: var(--sh-2) !important; }
.guide-card h5{ color: var(--ink) !important; }

/* alerts the template uses for the intro block */
.alert{
  background: var(--t-lilac) !important; border:1px solid #E3D4FA !important;
  border-radius: var(--r-card) !important; color: var(--ink-2) !important;
}
.alert-warning{ background: var(--t-butter) !important; border-color:#F6E3B8 !important; }

/* footer newsletter button inherits an inline purple */
.subscribe-btn{ background: var(--accent) !important; }

/* ==========================================================================
   Header: full-bleed, and no longer sitting on top of the hero

   The template wraps the navbar in `.container-fluid.fixed-top > .container`,
   so the painted bar was only as wide as the centred container - it left the
   hero showing down both edges. And because `fixed-top` is out of flow, the
   template compensated with `.product-hero { margin-top:100px }`; once that was
   removed the h1 slid underneath the bar.

   Making the wrapper `sticky` fixes both at once: the bar paints edge to edge,
   and it occupies layout space again so nothing needs a magic offset.
   ========================================================================== */
.container-fluid.fixed-top{
  position:-webkit-sticky !important; position:sticky !important; top:0 !important;
  left:auto !important; right:auto !important; width:100% !important;
  background: rgba(253,250,246,.9) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
  padding:0 !important;
}
.container-fluid.fixed-top > .container,
.container-fluid.fixed-top > .container.px-0{
  max-width:1320px; padding-left:1rem !important; padding-right:1rem !important;
}
/* the bar itself is now painted by the wrapper */
.navbar.navbar-light.bg-white{
  background:transparent !important; border:0 !important;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none !important;
}
.navbar-toggler{
  border:1px solid var(--line) !important; border-radius:14px !important;
  padding:.45rem .7rem !important;
}
.navbar-toggler:focus{ box-shadow:0 0 0 3px var(--accent-sf) !important; }
.navbar-collapse{ background:transparent !important; }

@media (max-width:1199.98px){
  /* the collapsed menu needs its own ground once the bar is translucent */
  .navbar-collapse.collapse.show, .navbar-collapse.collapsing{
    background: var(--paper) !important;
    border:1px solid var(--line-2); border-radius:20px;
    padding:.6rem .4rem; margin-top:.6rem;
    box-shadow: var(--sh-2);
  }
  .navbar .dropdown-menu{ box-shadow:none !important; border:0 !important; }
}
@media (max-width:575.98px){
  .product-hero{ padding:2.4rem 0 2.6rem !important; }
  .product-hero h1,.product-hero .display-4,.product-hero .display-5{
    font-size:2.05rem !important;
  }
  .product-hero .btn-custom{ padding:.8rem 1.5rem !important; }
}

/* ==========================================================================
   Reviewer avatars

   The template wraps the photo in an unsized div and lets `.img-fluid` size it
   (width:100%, height:auto), so the natural aspect ratio comes through. Adding
   border-radius:50% to that turned every portrait-shaped photo into an ellipse.
   Give the frame a fixed square and crop the photo into it.
   ========================================================================== */
.testimonial-item .bg-secondary,
.testimonial-item .bg-secondary.rounded{
  flex:0 0 auto !important; width:78px !important; height:78px !important;
  padding:3px !important; border-radius:50% !important; overflow:hidden;
}
.testimonial-item .bg-secondary img,
.testimonial-img, img.testimonial-img{
  width:100% !important; height:100% !important;
  aspect-ratio:1/1 !important; object-fit:cover !important; object-position:center top;
  border-radius:50% !important; display:block !important; max-width:none !important;
}
@media (max-width:575.98px){
  .testimonial-item .bg-secondary,
  .testimonial-item .bg-secondary.rounded{ width:64px !important; height:64px !important; }
  .testimonial-item .ms-4{ margin-left:1rem !important; }
}