@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');

:root{
  --green:#0A2B49;
  --green-deep:#3f77ac;
  --mint:#7daedb;
  --cream:#F1EFE9;
  --ink:#10549A;
  --muted:#EC6623;
  --gold:#3f77ac;
  --radius:1.1rem;

  /* -- home redesign supporting tokens (derived from brand palette above) -- */
  --paper:#FBF6EC;
  --stitch:rgba(10,43,73,.28);
  --stitch-light:rgba(255,255,255,.55);
  --tag-shadow:0 10px 24px rgba(10,43,73,.12);
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

body{
  font-family:'Quicksand',sans-serif;
  color:var(--ink);
  background:var(--cream);
}
h1,h2,h3,h4,.brand-font{
  font-family:'Fredoka',sans-serif;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--green-deep);
  color:#fff;
  font-size:.85rem;
  padding:.4rem 0;
}
.topbar a{ color:#fff; text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }

/* ---------- Header ---------- */
.site-header{
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.site-header .navbar-brand img{ max-height:48px; }
.site-header .nav-link{
  font-weight:600;
  color:var(--ink);
}
.site-header .nav-link:hover,.site-header .nav-link.active{ color:var(--green-deep); }
.cart-badge{
  background:var(--gold);
  color:#fff;
  border-radius:50%;
  font-size:.7rem;
  padding:.05rem .4rem;
  position:relative;
  top:-8px;
  right:6px;
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--green) 0%,var(--mint) 100%);
  padding:5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.hero.has-image,
.hero.has-video{
  padding:7rem 0 6rem;
}
.hero-video{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-video-overlay{
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.35); z-index:1;
}
.hero .container{ z-index:2; }
.hero h1{
  font-size:2.75rem;
  font-weight:600;
  line-height:1.35;
}
.hero p.lead{ color:#5f5259; }
.hero.has-image p.lead,
.hero.has-video p.lead{ color:#fff; }
/* Each line of the heading gets its own background "highlight" box as it wraps -
   matches the boxed-text style from the reference banner, no manual line-breaking needed. */
.hero-highlight{
  color:#fff;
  padding:.15em .35em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  line-height:1.5;
}
.btn-hero-outline{
  border:2px solid #fff;
  color:#fff;
  border-radius:2rem;
  padding:.6rem 1.75rem;
  font-weight:600;
  background:transparent;
}
.btn-hero-outline:hover{ background:#fff; color:var(--ink); }
.btn-brand{
  background:var(--green-deep);
  border-color:var(--green-deep);
  color:#fff;
  border-radius:2rem;
  padding:.65rem 1.75rem;
  font-weight:600;
}
.btn-brand:hover{ background:#dc7c8e; border-color:#dc7c8e; color:#fff; }
.btn-brand-outline{
  border:2px solid var(--green-deep);
  color:var(--green-deep);
  border-radius:2rem;
  padding:.6rem 1.75rem;
  font-weight:600;
  background:transparent;
}
.btn-brand-outline:hover{ background:var(--green-deep); color:#fff; }

/* ---------- Feature strip ---------- */
.feature-strip{ padding:3rem 0; }
.feature-item .icon-circle{
  width:64px;height:64px;border-radius:50%;
  background:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin:0 auto 1rem;
  color:var(--green-deep);
}

/* ---------- Category grid ---------- */
.category-card{
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  display:block;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .2s ease;
}
.category-card:hover{ transform:translateY(-4px); }
.category-card img{
  width:100%;height:220px;object-fit:cover;
}
.category-card .cat-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);
  color:#fff;padding:1rem;font-weight:600;font-family:'Fredoka',sans-serif;
}

/* ---------- Product cards ---------- */
.product-card{
  border:none;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.09); }
.product-card img{ width:100%; height:220px; object-fit:cover; background:#f3ede6; }
.product-card .price{ font-weight:700; color:var(--green-deep); }
.price-strike{ text-decoration:line-through; color:var(--muted); font-weight:400; font-size:.9rem; }
.badge-featured{
  background:var(--gold); color:#fff; font-weight:600;
}
.badge-soft{
  background:var(--mint); color:#2f5b46; border-radius:2rem; padding:.3rem .8rem; font-size:.8rem; font-weight:600;
}

/* ---------- About / content section ---------- */
.about-section{ background:#fff; border-radius:2rem; }
.section-underline{
  width:70px; height:3px; background:var(--green-deep); border-radius:2px;
}

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:#fff;
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  height:100%;
}
.testimonial-card .stars{ color:var(--gold); letter-spacing:2px; }

/* ---------- Stats ---------- */
.stats-strip{
  background:var(--green-deep);
  color:#fff;
  padding:3rem 0;
  border-radius:2rem;
}
.stats-strip .stat-number{
  font-family:'Fredoka',sans-serif;
  font-size:2.5rem;
  font-weight:600;
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative; overflow:hidden;
  background:var(--green); color:rgba(255,255,255,.72);
  padding:0 0 1.5rem;
}
.site-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.4px, transparent 1.4px);
  background-size:22px 22px; opacity:.6;
}
.site-footer > .stitch-wave{ position:relative; z-index:1; margin-bottom:2.5rem; }
.site-footer > .container{ position:relative; z-index:1; }
.site-footer a{ color:rgba(255,255,255,.72); text-decoration:none; }
.site-footer a:hover{ color:var(--gold); }
.site-footer h6{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem;
  position:relative; padding-bottom:.7rem;
}
.site-footer h6::after{
  content:''; position:absolute; left:0; bottom:0; width:28px; height:3px;
  background:var(--gold); border-radius:2px;
}
.footer-brand-row{ text-align:center; padding-bottom:2.5rem; margin-bottom:2.5rem; border-bottom:1.5px dashed rgba(255,255,255,.18); }
.footer-brand{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.4rem; color:#fff;
}
.footer-brand img{ max-height:44px; background:#fff; padding:.4rem .8rem; border-radius:.6rem; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.footer-tagline{ max-width:460px; margin:.75rem auto 0; color:rgba(255,255,255,.65); font-size:.92rem; }
.social-icons{ display:flex; justify-content:center; }
.social-icons a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08); border:1.5px dashed rgba(255,255,255,.2);
  margin-right:.5rem; color:#fff;
}
.social-icons a:hover{ background:var(--gold); border-color:var(--gold); color:var(--green); }
.footer-bottom{
  border-top:1.5px dashed rgba(255,255,255,.18);
  margin-top:2.5rem;padding-top:1.5rem;font-size:.85rem;color:rgba(255,255,255,.5);
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed; bottom:24px; right:24px; z-index:1000;
  width:56px;height:56px;border-radius:50%;
  background:#25D366; color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

/* ---------- Auth / forms ---------- */
.auth-card{
  background:#fff;border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:2.5rem;
}

/* ---------- Admin ---------- */
.admin-sidebar{
  background:#3c2f34; min-height:100vh; color:#e7dde0;
}
.admin-sidebar a{
  color:#cdbfc4; display:block; padding:.6rem 1.2rem; text-decoration:none; border-radius:.5rem;
}
.admin-sidebar a:hover,.admin-sidebar a.active{ background:var(--green-deep); color:#fff; }
.admin-sidebar .brand{ color:#fff; font-family:'Fredoka',sans-serif; padding:1rem 1.2rem; }
.stat-card{
  background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.stat-card .stat-value{ font-size:1.8rem; font-weight:700; font-family:'Fredoka',sans-serif; }

/* =========================================================
   HOME PAGE — SECTION REDESIGN
   Signature: a "handcrafted workshop" motif — dashed stitch
   lines, punched-hole hang tags and pinned swatch cards —
   carried consistently through every section on the home page.
   Scoped to .home-* classes so shop/blog/cart/etc. are untouched.
   ========================================================= */

/* Reusable stitched wave divider between sections */
.stitch-wave{
  width:100%; height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24' viewBox='0 0 60 24'%3E%3Cpath d='M0 12 Q15 1 30 12 T60 12' fill='none' stroke='%230A2B49' stroke-width='2' stroke-dasharray='3 6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:60px 24px;
  background-position:center;
}
.stitch-wave--light{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24' viewBox='0 0 60 24'%3E%3Cpath d='M0 12 Q15 1 30 12 T60 12' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-dasharray='3 6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
}

/* Shared section header ("hang tag" eyebrow) used across home sections */
.home-section-head{ text-align:center; margin-bottom:2.75rem; }
.home-section-head .eyebrow-tag{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep);
  background:var(--paper); border:1.5px dashed var(--stitch);
  padding:.4rem 1rem; border-radius:2rem;
}
.home-section-head .eyebrow-tag .dot{ width:6px;height:6px;border-radius:50%;background:var(--gold); }
.home-section-head h2{ margin-top:.6rem; font-size:2rem; }
.home-section-head .stitch-rule{
  width:80px; height:0; margin:1rem auto 0;
  border-top:2px dashed var(--stitch);
}

/* ---------- Hero (minimal/clean) ---------- */
.home-hero{
  position:relative; overflow:hidden;
  padding:7.5rem 0 6.5rem;
  background:var(--green);
}
.home-hero.has-image,.home-hero.has-video{ padding:8.5rem 0 7rem; }
.home-hero .hero-video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.home-hero .hero-video-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.home-hero .container{ position:relative; z-index:2; max-width:720px; }
.home-hero .eyebrow-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Fredoka',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.7);
  margin-bottom:1.5rem;
}
.home-hero .eyebrow-tag .dot{ width:5px;height:5px;border-radius:50%;background:var(--gold); }
.home-hero h1{ font-size:clamp(2.4rem,4.6vw,3.35rem); font-weight:600; line-height:1.25; color:#fff; letter-spacing:-.01em; }
.home-hero.has-image h1,.home-hero.has-video h1{ color:#fff; }
.home-hero p.lead{ color:rgba(255,255,255,.75); font-size:1.05rem; }
.home-hero .hero-highlight{
  --hl:#f2b84b;
  position:relative; color:var(--hl); padding:0 .05em;
}
.home-hero .stitch-wave{ position:absolute; left:0; right:0; bottom:0; z-index:2; opacity:.5; }

/* ---------- Feature strip (hang tags) ---------- */
.home-feature-strip{ position:relative; z-index:3; margin-top:-2.25rem; padding-bottom:1rem; }
.home-feature-strip .feature-tag{
  background:var(--paper); border:1.5px dashed var(--stitch); border-radius:14px;
  padding:1.6rem 1rem 1.3rem; text-align:center; position:relative;
  box-shadow:var(--tag-shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.home-feature-strip .col-md-3:nth-child(odd) .feature-tag{ transform:rotate(-1.4deg); }
.home-feature-strip .col-md-3:nth-child(even) .feature-tag{ transform:rotate(1.2deg); }
.home-feature-strip .feature-tag:hover{ transform:translateY(-4px) rotate(0deg); box-shadow:0 16px 28px rgba(10,43,73,.16); }
.home-feature-strip .feature-tag::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; background:var(--cream); border:1.5px dashed var(--stitch);
}
.home-feature-strip .icon-circle{
  width:58px; height:58px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin:0 auto .9rem; color:#fff;
}
.home-feature-strip h6{ font-family:'Fredoka',sans-serif; margin-bottom:.3rem; }

/* ---------- Category grid ---------- */
.home-category-card{ display:block; position:relative; margin-bottom:1.5rem; color:inherit; text-decoration:none; }
.home-category-card .cat-frame{
  border-radius:16px; overflow:hidden; border:3px solid #fff;
  outline:1.5px dashed var(--stitch); outline-offset:5px;
  box-shadow:var(--tag-shadow); transition:box-shadow .25s ease;
}
.home-category-card img{ width:100%; height:230px; object-fit:cover; display:block; transition:transform .5s ease; }
.home-category-card:hover img{ transform:scale(1.07); }
.home-category-card:hover .cat-frame{ box-shadow:0 16px 30px rgba(10,43,73,.18); }
.home-category-card .cat-tag{
  position:absolute; bottom:-14px; left:22px;
  background:var(--green); color:#fff; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:.92rem; padding:.5rem 1rem; border-radius:8px;
  box-shadow:var(--tag-shadow); transform:rotate(-2deg);
}
.home-category-card .cat-tag span{ opacity:.7; font-weight:400; font-size:.78rem; }

/* ---------- About (professional, single centered column) ---------- */
.home-about{
  background:#fff; border-radius:20px; padding:4rem 3.5rem;
  border:1px solid rgba(10,43,73,.08); box-shadow:0 20px 45px rgba(10,43,73,.06);
  text-align:center;
}
.home-about-head{ margin-bottom:2.25rem; }
.home-about-eyebrow{
  display:inline-block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green-deep); margin-bottom:.65rem;
}
.home-about-head h2{ margin-bottom:1.1rem; }
.home-about-rule{ width:52px; height:3px; background:var(--gold); border-radius:2px; margin:0 auto; }
.home-about-content{ max-width:680px; margin:0 auto; text-align:left; }
.home-about-content .content-body{ font-size:1.02rem; }
.home-about-content .content-body + .content-body{ margin-top:1.4rem; }

/* ---------- Testimonials (pinned swatch cards) ---------- */
.home-testimonial{
  background:#fff; border-radius:6px 6px 18px 18px; padding:2.1rem 1.75rem 1.75rem;
  position:relative; border:1.5px dashed var(--stitch);
  box-shadow:0 10px 22px rgba(10,43,73,.1); transition:transform .25s ease;
}
.home-testimonial::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--muted);
  box-shadow:0 2px 5px rgba(0,0,0,.28);
}
.home-testimonial .quote-mark{ font-family:'Fredoka',sans-serif; font-size:2.6rem; color:var(--gold); line-height:1; opacity:.85; }
.col-md-4:nth-child(odd) .home-testimonial{ transform:rotate(-1.1deg); }
.col-md-4:nth-child(even) .home-testimonial{ transform:rotate(1deg); }
.home-testimonial:hover{ transform:translateY(-3px) rotate(0deg); }

/* ---------- Stats ribbon ---------- */
.home-stats-banner{
  position:relative; background:var(--green); color:#fff;
  border-radius:22px; padding:1.75rem 2rem 2.5rem; overflow:hidden;
}
.home-stats-banner .stitch-wave{ margin:0 0 1.25rem; opacity:.9; }
.home-stats-banner .stat-number{
  font-family:'Fredoka',sans-serif; font-size:2.6rem; font-weight:700; color:var(--gold);
}
.home-stats-banner .stat-label{ font-size:.9rem; letter-spacing:.02em; color:rgba(255,255,255,.85); }

@media (max-width:575.98px){
  .home-feature-strip .feature-tag,
  .home-testimonial{ transform:none !important; }
}

/* =========================================================
   ADMIN DASHBOARD — REDESIGN
   Everything below is scoped under .admin-body so the
   storefront (which shares this stylesheet) is unaffected.
   ========================================================= */
.admin-body{ background:var(--paper); }

/* ---------- Sidebar ---------- */
.admin-body .admin-sidebar{
  width:258px; min-width:258px;
  background:var(--green);
  min-height:100vh;
  display:flex; flex-direction:column;
  position:sticky; top:0; align-self:flex-start; height:100vh;
}
.admin-body .admin-sidebar .brand{
  display:flex; align-items:center; gap:.7rem;
  color:#fff; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem;
  padding:1.35rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.08);
}
.admin-body .admin-sidebar .brand-mark{
  width:36px; height:36px; border-radius:10px; background:var(--gold);
  color:var(--green); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex:none;
}
.admin-body .admin-role-tag{ color:rgba(255,255,255,.55); }
.admin-body .admin-sidebar nav{ flex:1; overflow-y:auto; padding-bottom:1rem; }
.admin-body .nav-group-label{
  display:block; color:rgba(255,255,255,.4); font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; padding:1rem 1.2rem .35rem;
}
.admin-body .admin-sidebar nav a{
  display:flex; align-items:center; gap:.65rem;
  color:rgba(255,255,255,.78); padding:.55rem 1.1rem; margin:0 .5rem;
  border-radius:.6rem; font-size:.92rem; font-weight:500; text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.admin-body .admin-sidebar nav a i{ width:18px; text-align:center; font-size:.95rem; }
.admin-body .admin-sidebar nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-body .admin-sidebar nav a.active{ background:var(--gold); color:var(--green); font-weight:600; }
.admin-body .admin-sidebar-footer{
  border-top:1px solid rgba(255,255,255,.08); padding:.75rem .6rem 1rem;
}
.admin-body .admin-sidebar-footer a{
  display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.78);
  padding:.55rem 1.1rem; border-radius:.6rem; text-decoration:none; font-size:.9rem;
}
.admin-body .admin-sidebar-footer a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-body .btn-logout{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:none; border:none; color:rgba(255,255,255,.6); padding:.55rem 1.1rem;
  border-radius:.6rem; font-size:.9rem;
}
.admin-body .btn-logout:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* ---------- Topbar ---------- */
.admin-body .admin-topbar{
  background:#fff; border-bottom:1px solid rgba(10,43,73,.08);
  padding:1.1rem 1.75rem; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.admin-body .admin-topbar h3{ font-family:'Fredoka',sans-serif; font-size:1.35rem; color:var(--green); }
.admin-body .admin-topbar-sub{ font-size:.8rem; color:#8a9aa8; }

/* ---------- Stat cards ---------- */
.admin-body .stat-card{
  background:#fff; border-radius:16px; padding:1.4rem 1.5rem;
  box-shadow:0 4px 14px rgba(10,43,73,.05); border-top:3px solid var(--green-deep);
  position:relative;
}
.admin-body .stat-card-icon{
  width:38px; height:38px; border-radius:10px; background:var(--paper);
  color:var(--green-deep); display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; margin-bottom:.75rem;
}
.admin-body .stat-card--accent-a{ border-top-color:var(--green-deep); }
.admin-body .stat-card--accent-a .stat-card-icon{ color:var(--green-deep); }
.admin-body .stat-card--accent-b{ border-top-color:var(--gold); }
.admin-body .stat-card--accent-b .stat-card-icon{ color:#b9861f; background:rgba(242,184,75,.15); }
.admin-body .stat-card--accent-c{ border-top-color:var(--muted); }
.admin-body .stat-card--accent-c .stat-card-icon{ color:var(--muted); background:rgba(236,102,35,.12); }
.admin-body .stat-card--accent-d{ border-top-color:#3f9c6d; }
.admin-body .stat-card--accent-d .stat-card-icon{ color:#3f9c6d; background:rgba(63,156,109,.12); }
.admin-body .stat-card .stat-value{ font-family:'Fredoka',sans-serif; font-size:1.9rem; color:var(--green); }

/* ---------- Cards / tables ---------- */
.admin-body .card{ border:none; border-radius:16px; box-shadow:0 4px 14px rgba(10,43,73,.05); }
.admin-body .card-header{ background:#fff !important; border-bottom:1px solid rgba(10,43,73,.07); font-weight:600; color:var(--green); border-radius:16px 16px 0 0 !important; padding:1rem 1.4rem; }
.admin-body .table{ margin-bottom:0; }
.admin-body .table thead th{
  background:var(--paper); color:#5c6b78; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:none; padding:.85rem 1.4rem;
}
.admin-body .table td{ padding:.85rem 1.4rem; vertical-align:middle; border-color:rgba(10,43,73,.06); }
.admin-body .table tbody tr:hover{ background:rgba(63,119,172,.04); }

/* ---------- Buttons / badges / forms ---------- */
.admin-body .btn-outline-secondary{
  border-color:rgba(10,43,73,.18); color:var(--green-deep); border-radius:.6rem;
}
.admin-body .btn-outline-secondary:hover{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
.admin-body .btn-outline-danger{ border-radius:.6rem; }
.admin-body .btn-brand, .admin-body .btn-brand-outline{ border-radius:.7rem; }
.admin-body .badge{ font-weight:600; border-radius:.5rem; padding:.4em .65em; }
.admin-body .badge.bg-dark{ background:var(--green) !important; }
.admin-body .form-control:focus, .admin-body .form-select:focus{
  border-color:var(--green-deep); box-shadow:0 0 0 .2rem rgba(63,119,172,.15);
}
.admin-body .nav-tabs{ border-bottom:1px solid rgba(10,43,73,.1); }
.admin-body .nav-tabs .nav-link{ color:#5c6b78; border:none; font-weight:600; padding:.6rem 1.1rem; }
.admin-body .nav-tabs .nav-link.active{ color:var(--green-deep); border-bottom:2.5px solid var(--green-deep); background:transparent; }
.admin-body .pagination .page-link{ color:var(--green-deep); border-radius:.5rem; margin:0 .15rem; border-color:rgba(10,43,73,.12); }
.admin-body .pagination .page-item.active .page-link{ background:var(--green-deep); border-color:var(--green-deep); }

@media (max-width:991.98px){
  .admin-body .admin-sidebar{ position:relative; height:auto; min-height:auto; width:100%; min-width:100%; }
  .admin-body .d-flex:has(.admin-sidebar){ flex-direction:column; }
}

/* =========================================================
   PRODUCT TILE — used on Shop grid, Home "Featured Products"
   and related-products. Same "handcrafted workshop" motif as
   the rest of the home page (dashed stitching + pinned tag).
   ========================================================= */
.product-tile{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:16px;
  padding:.85rem .85rem 1.1rem; height:100%; position:relative;
  display:flex; flex-direction:column;
  box-shadow:var(--tag-shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.product-tile::before{
  content:''; position:absolute; top:-7px; left:1.4rem;
  width:13px; height:13px; border-radius:50%; background:var(--cream);
  border:1.5px dashed var(--stitch); z-index:2;
}
.product-tile:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(10,43,73,.16); }
.product-tile__badge{
  position:absolute; top:.7rem; right:-.4rem; z-index:3;
  background:var(--gold); color:#fff; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:.7rem; letter-spacing:.03em; padding:.32rem .7rem; border-radius:6px 2px 2px 6px;
  box-shadow:0 4px 10px rgba(10,43,73,.18); transform:rotate(3deg);
}
.product-tile__badge::after{
  content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border-style:solid; border-width:6px 0 6px 6px; border-color:transparent transparent transparent #c88f2e;
}
.product-tile__frame{
  display:block; position:relative; border-radius:12px; overflow:hidden;
  border:3px solid #fff; outline:1.5px dashed var(--stitch); outline-offset:4px;
  margin:0 0 1rem; box-shadow:0 3px 10px rgba(10,43,73,.08);
}
.product-tile__frame img{
  width:100%; height:190px; object-fit:cover; display:block; background:#f3ede6;
  transition:transform .5s ease;
}
.product-tile:hover .product-tile__frame img{ transform:scale(1.08); }
.product-tile__stock-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,43,73,.55); color:#fff; font-family:'Fredoka',sans-serif; font-weight:600;
  font-size:.85rem; letter-spacing:.03em;
}
.product-tile__low-stock{
  position:absolute; left:.5rem; bottom:.5rem; background:var(--muted); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.02em; padding:.25rem .55rem; border-radius:2rem;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.product-tile__body{ display:flex; flex-direction:column; flex:1; }
.product-tile__cat{
  display:inline-block; font-family:'Fredoka',sans-serif; font-size:.66rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); opacity:.75; margin-bottom:.3rem;
}
.product-tile__name{ font-size:.98rem; margin-bottom:.35rem; line-height:1.3; }
.product-tile__name a{ color:var(--ink); text-decoration:none; }
.product-tile__name a:hover{ color:var(--green-deep); }
.product-tile__price{ font-family:'Fredoka',sans-serif; font-weight:600; color:var(--green-deep); margin-bottom:.75rem; }
.product-tile__body form,
.product-tile__body .btn{ margin-top:auto; }

/* =========================================================
   SHARED PAGE COMPONENTS
   Hero band, filter toolbar/panel, chips, empty state and
   pagination — the workshop motif (stitch waves, hang tags,
   dashed frames) reused across Shop, Blog, and other listing
   pages for visual continuity with the home page.
   ========================================================= */

/* ---------- Hero band ---------- */
.page-hero{
  position:relative; overflow:hidden; padding:4.5rem 0 4rem; text-align:center;
  background:
    radial-gradient(ellipse 60% 65% at 15% 20%, rgba(242,184,75,.3), transparent 60%),
    radial-gradient(ellipse 55% 60% at 90% 90%, rgba(216,199,148,.32), transparent 60%),
    var(--green);
}
.page-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.4px, transparent 1.4px);
  background-size:22px 22px; opacity:.6;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .eyebrow-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Fredoka',sans-serif; font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(255,255,255,.12); border:1.5px dashed var(--stitch-light);
  padding:.45rem 1.1rem; border-radius:2rem; margin-bottom:1.1rem;
}
.page-hero .eyebrow-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.page-hero h1{ color:#fff; font-size:clamp(2rem,3.6vw,2.75rem); margin-bottom:.5rem; }
.page-hero p{ color:rgba(255,255,255,.82); max-width:520px; margin:0 auto; }
.page-hero .stitch-wave{ position:absolute; left:0; right:0; bottom:0; z-index:2; }

/* ---------- Toolbar (search + sort) ---------- */
.filter-toolbar{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:18px;
  box-shadow:var(--tag-shadow); padding:1.25rem 1.5rem; margin-top:-2.75rem; position:relative; z-index:3;
}
.filter-toolbar .form-control,
.filter-toolbar .form-select{
  border-radius:2rem; border-color:rgba(10,43,73,.15); padding:.6rem 1.1rem;
}
.filter-toolbar .form-control:focus,
.filter-toolbar .form-select:focus{
  border-color:var(--green-deep); box-shadow:0 0 0 .2rem rgba(63,119,172,.12);
}
.filter-toolbar .input-group .btn{ border-radius:0 2rem 2rem 0; }
.filter-toolbar .input-group .form-control{ border-radius:2rem 0 0 2rem; }

/* ---------- Active filter chips ---------- */
.filter-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--paper); border:1.5px dashed var(--stitch); color:var(--green-deep);
  font-size:.8rem; font-weight:600; padding:.35rem .5rem .35rem .9rem; border-radius:2rem;
}
.filter-chip a{ color:var(--muted); text-decoration:none; display:flex; }
.filter-chip a:hover{ color:var(--green); }

/* ---------- Category filter list (hang tags) ---------- */
.filter-panel{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:18px;
  padding:1.5rem; box-shadow:var(--tag-shadow); position:sticky; top:1.5rem;
}
.filter-panel h6{
  font-family:'Fredoka',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-deep); margin-bottom:1rem;
}
.filter-link{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .8rem; border-radius:.7rem; margin-bottom:.3rem;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.92rem;
  transition:background .15s ease, color .15s ease;
}
.filter-link:hover{ background:var(--paper); color:var(--green-deep); }
.filter-link.active{ background:var(--gold); color:#fff; }
.filter-link.active .filter-count{ color:rgba(255,255,255,.85); }
.filter-count{ font-size:.78rem; font-weight:500; color:#9aa8b3; }

/* ---------- Results meta + empty state ---------- */
.results-meta{ font-size:.9rem; color:#7d8b98; }
.empty-state{
  text-align:center; padding:3.5rem 1.5rem; background:var(--paper);
  border:1.5px dashed var(--stitch); border-radius:20px;
}
.empty-state .icon-circle{
  width:64px; height:64px; border-radius:50%; background:#fff; color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 1rem;
  box-shadow:var(--tag-shadow);
}

/* ---------- Storefront pagination ---------- */
.pagination-wrap .pagination{ justify-content:center; margin-top:1rem; }
.pagination-wrap .page-link{
  color:var(--green-deep); border-radius:.6rem; margin:0 .2rem; border-color:rgba(10,43,73,.12);
}
.pagination-wrap .page-item.active .page-link{ background:var(--green-deep); border-color:var(--green-deep); }

@media (max-width:991.98px){
  .filter-panel{ position:relative; top:0; margin-bottom:1.5rem; }
}

/* =========================================================
   BLOG TILE — post cards on the Blog index & related articles
   ========================================================= */
.blog-tile{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:16px;
  padding:.85rem .85rem 1.25rem; height:100%; position:relative;
  display:flex; flex-direction:column;
  box-shadow:var(--tag-shadow); transition:transform .25s ease, box-shadow .25s ease;
}
.blog-tile::before{
  content:''; position:absolute; top:-7px; left:1.4rem;
  width:13px; height:13px; border-radius:50%; background:var(--cream);
  border:1.5px dashed var(--stitch); z-index:2;
}
.blog-tile:hover{ transform:translateY(-5px); box-shadow:0 16px 30px rgba(10,43,73,.16); }
.blog-tile__frame{
  display:block; position:relative; border-radius:12px; overflow:hidden;
  border:3px solid #fff; outline:1.5px dashed var(--stitch); outline-offset:4px;
  margin:0 0 1rem; box-shadow:0 3px 10px rgba(10,43,73,.08);
}
.blog-tile__frame img{
  width:100%; height:190px; object-fit:cover; display:block; background:#f3ede6;
  transition:transform .5s ease;
}
.blog-tile:hover .blog-tile__frame img{ transform:scale(1.08); }
.blog-tile__body{ display:flex; flex-direction:column; flex:1; }
.blog-tile__cat{
  display:inline-flex; align-self:flex-start; font-family:'Fredoka',sans-serif; font-size:.66rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep);
  background:var(--paper); border:1.5px dashed var(--stitch); border-radius:2rem;
  padding:.28rem .7rem; margin-bottom:.6rem;
}
.blog-tile__name{ font-size:1.05rem; margin-bottom:.5rem; line-height:1.35; }
.blog-tile__name a{ color:var(--ink); text-decoration:none; }
.blog-tile__name a:hover{ color:var(--green-deep); }
.blog-tile__excerpt{ color:#6b7783; font-size:.88rem; line-height:1.55; margin-bottom:.85rem; flex:1; }
.blog-tile__meta{ font-size:.76rem; color:#9aa8b3; margin-bottom:.6rem; }
.blog-tile__meta i{ margin-right:.25rem; }
.blog-tile__link{ color:var(--green-deep); font-weight:700; font-size:.88rem; text-decoration:none; margin-top:auto; }
.blog-tile__link:hover{ color:var(--muted); }

/* ---------- Single post ---------- */
.post-meta-row{
  display:inline-flex; align-items:center; gap:.9rem; flex-wrap:wrap; justify-content:center;
  font-size:.85rem; color:#7d8b98;
}
.post-meta-row i{ color:var(--gold); margin-right:.3rem; }
.post-hero-frame{
  border-radius:16px; overflow:hidden; border:3px solid #fff;
  outline:1.5px dashed var(--stitch); outline-offset:5px;
  box-shadow:var(--tag-shadow); margin-bottom:2rem;
}
.post-hero-frame img{ width:100%; display:block; max-height:460px; object-fit:cover; }
.post-sidebar-card{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:18px;
  padding:1.5rem; box-shadow:var(--tag-shadow); position:sticky; top:1.5rem;
}
.post-sidebar-card h6{
  font-family:'Fredoka',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-deep); margin-bottom:1rem;
}
.post-sidebar-card .related-link{
  display:flex; gap:.15rem; align-items:flex-start;
  padding:.6rem .3rem; border-radius:.6rem; margin-bottom:.15rem;
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.9rem; line-height:1.4;
  transition:background .15s ease, color .15s ease;
  border-bottom:1px dashed rgba(10,43,73,.1);
}
.post-sidebar-card .related-link:last-child{ border-bottom:none; }
.post-sidebar-card .related-link:hover{ color:var(--green-deep); background:var(--paper); }

/* =========================================================
   CONTACT PAGE — REDESIGN
   ========================================================= */
.contact-info-card{
  background:var(--green); color:#fff; border-radius:20px; padding:2.25rem;
  position:relative; overflow:hidden; box-shadow:var(--tag-shadow); height:100%;
}
.contact-info-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.4px);
  background-size:20px 20px; opacity:.6;
}
.contact-info-card > *{ position:relative; z-index:1; }
.contact-info-card h6{
  font-family:'Fredoka',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:1.4rem;
}
.contact-info-row{
  display:flex; align-items:flex-start; gap:.9rem; margin-bottom:1.4rem;
}
.contact-info-row .icon-circle{
  width:42px; height:42px; min-width:42px; border-radius:50%; background:var(--gold);
  color:var(--green); display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.contact-info-row .label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:.15rem; }
.contact-info-row .value{ font-weight:600; }
.contact-info-row .value a{ color:#fff; text-decoration:none; }
.contact-info-row .value a:hover{ color:var(--gold); }
.contact-social{ display:flex; gap:.6rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1.5px dashed rgba(255,255,255,.2); }
.contact-social a{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff;
}
.contact-social a:hover{ background:var(--gold); color:var(--green); }
.contact-form-card{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:20px;
  padding:2.25rem; box-shadow:var(--tag-shadow);
}
.contact-form-card .form-control,
.contact-form-card textarea.form-control{
  border-radius:.9rem; border-color:rgba(10,43,73,.15); padding:.7rem 1rem;
}
.contact-form-card .form-control:focus{
  border-color:var(--green-deep); box-shadow:0 0 0 .2rem rgba(63,119,172,.12);
}
.contact-form-card .form-label{ color:var(--ink); }

/* =========================================================
   RICH CONTENT TYPOGRAPHY
   Styles admin-authored HTML (.content-body) consistently
   across text pages (About/Privacy/Terms/Return), product
   descriptions, blog posts, and the home "About" section.
   ========================================================= */
.content-body{ color:#4a5561; font-size:1.02rem; line-height:1.8; }
.content-body > *:last-child{ margin-bottom:0; }
.content-body h1,.content-body h2,.content-body h3,.content-body h4{
  font-family:'Fredoka',sans-serif; color:var(--green); line-height:1.3;
  margin-top:2rem; margin-bottom:.9rem;
}
.content-body h1{ font-size:1.9rem; }
.content-body h2{ font-size:1.55rem; }
.content-body h3{ font-size:1.3rem; }
.content-body h4{ font-size:1.1rem; }
.content-body > h1:first-child,
.content-body > h2:first-child,
.content-body > h3:first-child{ margin-top:0; }
.content-body p{ margin-bottom:1.2rem; }
.content-body a{ color:var(--green-deep); text-decoration:underline; text-decoration-color:rgba(63,119,172,.35); text-underline-offset:2px; }
.content-body a:hover{ color:var(--muted); }
.content-body strong{ color:var(--ink); }
.content-body ul,.content-body ol{ padding-left:1.4rem; margin-bottom:1.2rem; }
.content-body li{ margin-bottom:.45rem; }
.content-body li::marker{ color:var(--gold); }
.content-body blockquote{
  border-left:3px dashed var(--stitch); background:var(--paper);
  padding:1rem 1.4rem; margin:1.75rem 0; border-radius:0 14px 14px 0;
  color:#5c6b78; font-style:italic;
}
.content-body img{ max-width:100%; height:auto; border-radius:14px; margin:1.75rem 0; box-shadow:var(--tag-shadow); }
.content-body hr{ border:none; border-top:1.5px dashed var(--stitch); margin:2.25rem 0; }
.content-body table{ width:100%; margin-bottom:1.5rem; border-collapse:collapse; }
.content-body table th,.content-body table td{ padding:.65rem .9rem; border:1px solid rgba(10,43,73,.1); text-align:left; }
.content-body table th{ background:var(--paper); font-family:'Fredoka',sans-serif; color:var(--green); }

/* =========================================================
   CART / CHECKOUT / THANK YOU — REDESIGN
   Reuses the same workshop card language established on the
   Contact & Shop pages (page-hero, stitch-wave, dashed frames,
   contact-info-card / contact-form-card) for visual continuity
   across the purchase flow.
   ========================================================= */

/* ---- Cart line items ---- */
.cart-card{ background:#fff; border:1.5px dashed var(--stitch); border-radius:20px; box-shadow:var(--tag-shadow); overflow:hidden; }
.cart-line{ display:flex; align-items:center; gap:1.1rem; padding:1.25rem 1.75rem; flex-wrap:wrap; }
.cart-line-border{ border-bottom:1.5px dashed var(--stitch); }
.cart-line-thumb{ width:64px; height:64px; object-fit:cover; border-radius:.9rem; background:var(--paper); flex-shrink:0; }
.cart-line-info{ flex:1 1 160px; min-width:0; }
.cart-line-name{ font-weight:600; color:var(--ink); }
.cart-line-price{ font-size:.85rem; color:#7d8b98; }
.cart-qty-form{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.cart-qty-input{ width:66px; border-radius:.7rem; text-align:center; }
.cart-line-subtotal{ width:100px; text-align:right; font-weight:700; color:var(--green-deep); flex-shrink:0; }
.cart-remove-btn{
  border:none; background:transparent; color:#c65b6c; font-size:1.05rem;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.cart-remove-btn:hover{ background:rgba(198,91,108,.12); }
.cart-summary-card .order-row{ display:flex; justify-content:space-between; margin-bottom:.6rem; color:rgba(255,255,255,.85); }
.cart-summary-card .order-total-row{
  display:flex; justify-content:space-between; font-weight:700; font-size:1.15rem; color:#fff;
  padding-top:1rem; margin-top:.5rem; border-top:1.5px dashed rgba(255,255,255,.2);
}
.link-ghost-light{ color:rgba(255,255,255,.7); text-decoration:none; }
.link-ghost-light:hover{ color:#fff; }

/* ---- Checkout ---- */
.checkout-steps{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:.5rem; flex-wrap:wrap; }
.checkout-steps .step-pill{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600;
  color:rgba(255,255,255,.55); letter-spacing:.05em; text-transform:uppercase;
}
.checkout-steps .step-pill.active{ color:#fff; }
.checkout-steps .step-sep{ color:rgba(255,255,255,.3); }
.payment-option{
  display:block; border:1.5px dashed var(--stitch); border-radius:14px;
  padding:1rem 1.1rem; margin-bottom:.9rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.payment-option:hover{ border-color:var(--green-deep); }
.payment-option:has(input:checked){ border-color:var(--green-deep); border-style:solid; background:var(--paper); }
.payment-option .form-check-input:checked{ background-color:var(--green-deep); border-color:var(--green-deep); }
.checkout-section-title{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem; color:var(--green);
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.4rem;
}
.checkout-section-title .icon-circle{
  width:36px; height:36px; font-size:1rem; background:var(--paper); color:var(--green-deep);
}

/* ---- Thank you ---- */
.success-icon-circle{
  width:84px; height:84px; border-radius:50%; background:var(--gold); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; margin:0 auto 1.25rem;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}
.order-number-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.14);
  border:1.5px dashed var(--stitch-light); padding:.4rem 1.1rem; border-radius:2rem;
  font-weight:600; color:#fff; margin-top:.75rem; font-size:.92rem;
}
.next-step-card{
  background:var(--green); color:#fff; border-radius:20px; padding:2.25rem;
  position:relative; overflow:hidden; box-shadow:var(--tag-shadow);
}
.next-step-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.4px, transparent 1.4px);
  background-size:20px 20px; opacity:.6;
}
.next-step-card > *{ position:relative; z-index:1; }
.next-step-card h6{
  font-family:'Fredoka',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:1rem;
}

@media (max-width:767.98px){
  .cart-line-subtotal{ order:3; text-align:left; width:auto; margin-right:auto; }
  .cart-remove-btn{ order:4; }
}

/* =========================================================
   FAQ SECTION — REDESIGN
   Custom accordion styling to replace raw Bootstrap defaults,
   matching the dashed-card / paper / gold workshop language
   used across the rest of the site. Shared across Home, Shop,
   Blog, and static Pages via partials.faq-section.
   ========================================================= */
.faq-accordion{
  --bs-accordion-active-color: var(--green-deep);
  --bs-accordion-active-bg: var(--paper);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-icon-width: 1.1rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233f77ac'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f2b84b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq-accordion .accordion-item{
  background:#fff; border:1.5px dashed var(--stitch); border-radius:16px;
  margin-bottom:1rem; overflow:hidden; box-shadow:var(--tag-shadow);
}
.faq-accordion .accordion-item:last-child{ margin-bottom:0; }
.faq-accordion .accordion-button{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.02rem; color:var(--green);
  padding:1.3rem 1.6rem;
}
.faq-accordion .accordion-button:not(.collapsed){
  color:var(--green-deep); background:var(--paper); box-shadow:none;
}
.faq-accordion .accordion-body{ padding:0 1.6rem 1.6rem; color:#5c6b78; line-height:1.75; font-size:.96rem; }

/* =========================================================
   PRODUCT DETAIL & BLOG POST — REDESIGN
   Clean, elevated presentation (breadcrumb, framed media,
   refined typography) replacing plain Bootstrap defaults,
   consistent with the site's professional card language.
   ========================================================= */

/* ---- Shared breadcrumb ---- */
.page-breadcrumb{ font-size:.85rem; color:#8a96a3; }
.page-breadcrumb--center{ text-align:center; }
.page-breadcrumb a{ color:#8a96a3; text-decoration:none; }
.page-breadcrumb a:hover{ color:var(--green-deep); }
.page-breadcrumb i{ font-size:.62rem; margin:0 .4rem; vertical-align:middle; color:#c3ccd3; }
.page-breadcrumb span{ color:var(--ink); font-weight:600; }

/* ---- Product detail ---- */
.product-image-frame{
  border-radius:20px; overflow:hidden; border:1px solid rgba(10,43,73,.08);
  box-shadow:0 20px 45px rgba(10,43,73,.08);
}
.product-image-frame img{ width:100%; display:block; object-fit:cover; max-height:560px; }
.product-detail-panel .badge-soft{ letter-spacing:.03em; }
.product-price-row{ display:flex; align-items:baseline; gap:.75rem; margin:.5rem 0 1.1rem; }
.product-price{ font-family:'Fredoka',sans-serif; font-size:2rem; font-weight:600; color:var(--green-deep); }
.product-short-desc{ color:#5c6b78; font-size:1.02rem; line-height:1.7; margin-bottom:1.75rem; }
.product-add-form{ margin-bottom:.9rem; }
.product-qty-input{ width:90px; border-radius:.8rem; text-align:center; }
.stock-note{ font-size:.85rem; color:var(--green-deep); font-weight:600; margin-bottom:1.75rem; }
.stock-note i{ margin-right:.35rem; }
.out-of-stock-badge{
  display:inline-block; background:#f4e2e2; color:#a94442; font-weight:600;
  padding:.6rem 1.4rem; border-radius:2rem; margin-bottom:1.75rem; font-size:.9rem;
}
.product-divider{ height:1px; background:rgba(10,43,73,.08); margin-bottom:1.75rem; }