/* ============================================================================
   LaiksPirkt — Organic Premium design system
   Overlay on top of Bootstrap 5 / AIZ theme. Pure additive styling.
   Loaded after custom-style.css so it wins the cascade.
   ========================================================================= */
:root{
  --op-cream:#EFEBDF; --op-paper:#FBFAF3; --op-paper-2:#F4F1E6;
  --op-ink:#20261A; --op-ink-soft:#4A5140; --op-line:#DAD4C4;
  --op-forest:#3B5233; --op-forest-600:#2E4228; --op-moss:#6E7F52;
  --op-honey:#DFA13A; --op-honey-ink:#3a2a08; --op-fresh:#5B8A3C; --op-berry:#9E3B47;
  --op-radius:22px; --op-radius-sm:14px;
  --op-shadow:0 1px 2px rgba(32,38,26,.04), 0 14px 34px -18px rgba(32,38,26,.26);
  --op-shadow-lg:0 2px 6px rgba(32,38,26,.05), 0 34px 60px -28px rgba(32,38,26,.36);
  --op-ease:cubic-bezier(.32,.72,0,1);
  --op-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --op-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Map Bootstrap theme vars to the palette so utilities inherit it */
  --bs-primary:#3B5233; --bs-primary-rgb:59,82,51;
  --bs-secondary:#DFA13A; --bs-secondary-rgb:223,161,58;
  --bs-body-color:#20261A; --bs-body-font-family:var(--op-sans);
  --bs-link-color:#3B5233; --bs-link-hover-color:#2E4228;

  /* Legacy inline accents (var(--lp-primary,#d43533)) → OP palette */
  --lp-primary:#3B5233; --lp-secondary:#DFA13A;
}

/* ---- Typography ------------------------------------------------------- */
body{font-family:var(--op-sans);color:var(--op-ink);background:var(--op-cream);
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:var(--op-display);font-weight:600;
  letter-spacing:-.015em;line-height:1.08}
.lead{font-weight:400}
.op-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--op-sans);
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;
  color:var(--op-moss);padding:7px 14px;border:1px solid var(--op-line);
  border-radius:999px;background:var(--op-paper)}
.op-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--op-honey)}

/* ---- Buttons ---------------------------------------------------------- */
.btn{border-radius:999px;font-family:var(--op-sans);font-weight:600;
  transition:transform .35s var(--op-ease),background-color .4s var(--op-ease),
  box-shadow .4s var(--op-ease);border-width:1px}
.btn-primary,.btn-secondary{--bs-btn-border-color:transparent;--bs-btn-hover-border-color:transparent;
  padding:.7rem 1.4rem}
.btn-primary{--bs-btn-bg:var(--op-forest);--bs-btn-hover-bg:var(--op-forest-600);
  --bs-btn-active-bg:var(--op-forest-600);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
.btn-secondary{--bs-btn-bg:var(--op-honey);--bs-btn-hover-bg:#CC8E2C;
  --bs-btn-color:var(--op-honey-ink);--bs-btn-hover-color:var(--op-honey-ink)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-1px);box-shadow:var(--op-shadow)}
.btn-primary:active,.btn-secondary:active{transform:scale(.98)}
.btn-outline-primary{--bs-btn-color:var(--op-forest);--bs-btn-border-color:var(--op-line);
  --bs-btn-hover-bg:var(--op-paper-2);--bs-btn-hover-color:var(--op-forest);
  --bs-btn-hover-border-color:var(--op-line)}
/* button-in-button trailing pip */
.op-pip{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.18);margin-left:10px;transition:transform .4s var(--op-ease)}
.btn:hover .op-pip{transform:translate(2px,-1px) scale(1.05)}
.btn-secondary .op-pip{background:rgba(58,42,8,.14)}

/* ---- Surfaces / cards ------------------------------------------------- */
.bg-light{background:var(--op-cream) !important}
.card{border:1px solid var(--op-line);border-radius:calc(var(--op-radius) + 2px);
  background:var(--op-paper);box-shadow:var(--op-shadow)}
.rounded-4{border-radius:var(--op-radius) !important}
.op-soft{box-shadow:var(--op-shadow)}
.op-soft-lg{box-shadow:var(--op-shadow-lg)}
.text-secondary{color:var(--op-ink-soft) !important}
.link-light-grey{color:var(--op-ink-soft)}

/* Generic product-card lift (AIZ product cards use .aiz-card-box / .card) */
.aiz-card-box,.product-card{transition:transform .5s var(--op-ease),box-shadow .5s var(--op-ease)}
.aiz-card-box:hover,.product-card:hover{transform:translateY(-5px);box-shadow:var(--op-shadow-lg)}

/* ---- Header ----------------------------------------------------------- */
#header{background:color-mix(in srgb,var(--op-paper) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom-color:var(--op-line) !important}
/* sticky state (JS adds .position-fixed on scroll) */
#headerFixed.position-fixed{background:color-mix(in srgb,var(--op-paper) 93%,transparent);
  backdrop-filter:blur(14px);box-shadow:var(--op-shadow) !important;border-bottom:1px solid var(--op-line)}

/* retire legacy orange hover accent from the old theme → forest */
.lp-hover-primary{transition:color .3s var(--op-ease)}
.lp-hover-primary:hover{color:var(--op-forest) !important}
#headerTop a.text-primary,#headerBottom a.text-primary{color:var(--op-forest) !important}

/* Catalogue mega button */
.lp-megaMenu-toggle{box-shadow:var(--op-shadow)}
.lp-megaMenu-toggle:hover{transform:translateY(-1px)}

/* Search field → warm rounded pill */
#globalSearch{background:var(--op-paper-2) !important;border:1px solid var(--op-line) !important;
  border-radius:999px !important;height:39px;color:var(--op-ink);
  transition:border-color .3s var(--op-ease),box-shadow .3s var(--op-ease),background-color .3s var(--op-ease)}
#globalSearch::placeholder{color:var(--op-ink-soft);opacity:.75}
#globalSearch:focus{background:var(--op-paper) !important;border-color:var(--op-moss) !important;
  box-shadow:0 0 0 3px rgba(110,127,82,.18) !important}
#searchAutocomplete .rounded-4{border:1px solid var(--op-line);box-shadow:var(--op-shadow-lg) !important}

/* Header icon chips (cart / wishlist / login / profile) */
#headerFixed .btn.bg-light{background:var(--op-paper-2) !important;border:1px solid var(--op-line) !important;
  color:var(--op-ink);
  transition:transform .35s var(--op-ease),border-color .3s var(--op-ease),background-color .3s var(--op-ease)}
#headerFixed .btn.bg-light:hover{transform:translateY(-2px);border-color:var(--op-moss) !important;
  background:var(--op-paper) !important}
#modalCartButton:hover,#profileModalButton:hover,#loginModalButton:hover{color:var(--op-forest)}
#wishlistModalButton:hover{color:var(--op-berry);border-color:color-mix(in srgb,var(--op-berry) 40%,var(--op-line)) !important}

/* Delivery / Takeaway switch */
.lp-radio-switch{background:var(--op-paper-2) !important;border:1px solid var(--op-line)}
.lp-radio-switch label{border-radius:999px !important;
  transition:background-color .3s var(--op-ease),color .3s var(--op-ease)}
.lp-radio-switch input:checked ~ label.lp-checked-primary{background-color:var(--op-forest);color:#fff}
.lp-radio-switch input:checked ~ label.lp-checked-secondary{background-color:var(--op-honey);color:var(--op-honey-ink)}

/* Location + language nice-select → warm pill */
.nice-select{background-color:var(--op-paper-2) !important;border:1px solid var(--op-line) !important;
  border-radius:999px !important;transition:border-color .3s var(--op-ease)}
.nice-select:hover,.nice-select.open{border-color:var(--op-moss) !important}
.nice-select:after{border-color:var(--op-ink-soft)}
.nice-select .nice-select-dropdown{border-radius:var(--op-radius-sm) !important;border:1px solid var(--op-line);
  box-shadow:var(--op-shadow-lg) !important;background:var(--op-paper)}
.nice-select .option.selected{color:var(--op-forest)}
.nice-select .option:hover,.nice-select .option.focus,.nice-select .option.selected.focus{
  background-color:var(--op-cream) !important}

/* MegaMenu dropdown panel */
#megaMenu .bg-white{background:var(--op-paper) !important}
#megaMenu .bg-white.border-top{border-top-color:var(--op-line) !important;
  box-shadow:var(--op-shadow-lg) !important;border-radius:0 0 var(--op-radius) var(--op-radius);overflow:hidden}
#megaMenuCategories a{border-radius:12px;padding-left:8px;padding-right:8px;
  transition:background-color .25s var(--op-ease),color .25s var(--op-ease)}
#megaMenuCategories a:hover{background:var(--op-cream);color:var(--op-forest) !important}

/* Bottom category nav row */
#headerBottom li a{transition:transform .35s var(--op-ease)}
#headerBottom li a img{transition:transform .35s var(--op-ease)}
#headerBottom li a:hover{transform:translateY(-3px)}
#headerBottom li a:hover img,#headerBottom .lp-nav-active a img{transform:scale(1.07)}
#headerBottom .lp-nav-active{position:relative}
#headerBottom .lp-nav-active::after{content:"";position:absolute;left:50%;bottom:-3px;
  transform:translateX(-50%);width:22px;height:3px;border-radius:3px;background:var(--op-honey)}

/* Featured categories row */
#headerFixedBottom li a{transition:color .3s var(--op-ease)}
#headerFixedBottom li a:hover{color:var(--op-forest) !important}

/* Mobile hamburger */
.lp-navbar-toggler-icon{transition:opacity .3s var(--op-ease)}
.navbar-toggler:hover .lp-navbar-toggler-icon{opacity:.7}

/* ---- Footer ----------------------------------------------------------- */
footer.bg-brown,#footer.bg-brown{background:var(--op-forest-600) !important}

/* ---- Section rhythm --------------------------------------------------- */
.op-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:2rem;flex-wrap:wrap}
.op-sec-head h2{font-size:clamp(28px,3.4vw,40px);margin:0}
.op-link-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;
  color:var(--op-forest);white-space:nowrap}

/* ---- HERO ------------------------------------------------------------- */
.op-hero .op-slide{position:relative;border-radius:calc(var(--op-radius) + 6px);
  overflow:hidden;box-shadow:var(--op-shadow-lg);min-height:440px;display:flex;align-items:center}
.op-hero .op-slide::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(24,30,18,.72) 0%,rgba(24,30,18,.32) 46%,transparent 72%)}
.op-hero img.op-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.op-hero .op-slide-inner{position:relative;z-index:1;max-width:560px;padding:clamp(28px,5vw,64px);color:#fff}
.op-hero h1{color:#fff;font-size:clamp(32px,4.6vw,58px);margin-bottom:1rem;text-wrap:balance}
.op-hero .lead{color:rgba(255,255,255,.9);max-width:400px;margin-bottom:1.6rem}
.op-hero .op-eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  color:#EBE4CF;margin-bottom:1.2rem}

/* ---- BENEFITS --------------------------------------------------------- */
.op-benefit{display:flex;gap:14px;align-items:center;background:var(--op-paper);
  border:1px solid var(--op-line);border-radius:var(--op-radius);padding:16px 18px;
  height:100%;box-shadow:var(--op-shadow);transition:transform .5s var(--op-ease)}
.op-benefit:hover{transform:translateY(-3px)}
.op-benefit img{width:46px;height:46px;object-fit:contain;flex:none}
.op-benefit b{font-size:14.5px;display:block;line-height:1.2}
.op-benefit span{font-size:12.5px;color:var(--op-ink-soft)}

/* ---- Reveal on scroll ------------------------------------------------- */
.op-rise{opacity:0;transform:translateY(20px);filter:blur(5px);
  transition:opacity .8s var(--op-ease),transform .8s var(--op-ease),filter .8s var(--op-ease)}
.op-rise.op-in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.op-rise{opacity:1;transform:none;filter:none;transition:none}}

/* ---- Product cards (weeks / superprice / popular use .productCard) ---- */
.productCard{border:1px solid var(--op-line) !important;
  border-radius:calc(var(--op-radius) + 2px) !important;
  box-shadow:var(--op-shadow) !important;background:var(--op-paper);overflow:hidden;
  transition:transform .5s var(--op-ease),box-shadow .5s var(--op-ease)}
.productCard:hover{transform:translateY(-5px);box-shadow:var(--op-shadow-lg) !important}
/* info/discount tags → honey & forest soft pills */
.productCard .bg-danger{background:var(--op-honey) !important;color:var(--op-honey-ink) !important;
  border-radius:999px !important;font-weight:700}
.productCard .bg-info{background:var(--op-forest) !important;border-radius:999px !important}
.productCard .bg-secondary{background:var(--op-moss) !important;border-radius:999px !important}
/* main price forest instead of red; the honey −% chip carries the deal signal */
.productCard .text-danger{color:var(--op-forest) !important}
.productCard del{color:var(--op-ink-soft) !important}
/* wishlist */
.productCard .lp-btn-fav{border:1px solid var(--op-line) !important;
  background:var(--op-paper) !important;border-radius:50% !important;transition:color .3s var(--op-ease)}
.productCard .lp-btn-fav:hover{color:var(--op-berry) !important}
.productCard .showCardImageOverlay{box-shadow:var(--op-shadow)}
.productCard .lp-rating{color:var(--op-honey)}

/* ---- Categories (range) ----------------------------------------------- */
.op-cat-card{transition:transform .5s var(--op-ease),box-shadow .5s var(--op-ease)}
.op-cat-card:hover{transform:translateY(-5px);box-shadow:var(--op-shadow-lg)}
.op-cat-media{overflow:hidden}
.op-cat-media img{transition:transform .8s var(--op-ease)}
.op-cat-card:hover .op-cat-media img{transform:scale(1.05)}
.op-cat-tag{background:color-mix(in srgb,var(--op-forest-600) 84%,transparent) !important;
  border-radius:999px !important;backdrop-filter:blur(4px);font-weight:600}
.op-cat-card .lp-desc-list a{border-radius:8px;padding-left:6px;padding-right:6px;
  transition:background-color .3s var(--op-ease),color .3s var(--op-ease)}
.op-cat-card .lp-desc-list a:hover{background:var(--op-paper-2);color:var(--op-forest) !important}
.op-cat-more{color:var(--op-forest) !important}
.op-cat-more svg{transition:transform .35s var(--op-ease)}
.op-cat-more:hover svg{transform:translateX(3px)}
.op-cat-card hr{border-color:var(--op-line) !important;opacity:1}

/* ---- Suppliers (trust cards) ------------------------------------------ */
.op-sup-card{transition:transform .5s var(--op-ease),box-shadow .5s var(--op-ease)}
.op-sup-card:hover{transform:translateY(-5px);box-shadow:var(--op-shadow-lg)}
.op-sup-media{overflow:hidden}
.op-sup-media img{transition:transform .8s var(--op-ease)}
.op-sup-card:hover .op-sup-media img{transform:scale(1.05)}
.op-sup-badge{top:12px;left:12px;padding:5px 10px 5px 8px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;color:var(--op-honey-ink);background:var(--op-honey);
  border-radius:999px;box-shadow:var(--op-shadow);z-index:2}
.op-sup-logo{border:2px solid var(--op-paper);box-shadow:var(--op-shadow);background:var(--op-paper);
  margin-top:-30px;position:relative;z-index:2}
.op-sup-meta{min-width:0}
.op-sup-of{color:var(--op-ink-soft)}
.op-sup-of strong{color:var(--op-forest)}

/* ---- CTA (become a farmer / buyer) ------------------------------------ */
.op-cta-card{transition:transform .5s var(--op-ease),box-shadow .5s var(--op-ease)}
.op-cta-card:hover{transform:translateY(-5px);box-shadow:var(--op-shadow-lg)}
.op-cta-media{overflow:hidden}
.op-cta-media img{transition:transform .9s var(--op-ease)}
.op-cta-card:hover .op-cta-media img{transform:scale(1.04)}
.op-cta-card .card-body svg{transition:transform .35s var(--op-ease)}
.op-cta-card:hover .card-body a[href] svg{transform:translateX(4px)}

/* ---- How it works (steps) --------------------------------------------- */
.op-step{position:relative;background:var(--op-paper);border:1px solid var(--op-line);
  border-radius:var(--op-radius);padding:34px 22px 24px;text-align:center;
  transition:transform .5s var(--op-ease),box-shadow .5s var(--op-ease)}
.op-step:hover{transform:translateY(-4px);box-shadow:var(--op-shadow)}
.op-step-num{position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--op-honey);color:var(--op-honey-ink);font-family:var(--op-display);
  font-weight:600;font-size:15px;box-shadow:var(--op-shadow)}
.op-step-img{max-height:96px;width:auto;object-fit:contain;margin-inline:auto}

/* ---- Points (feature panel) ------------------------------------------- */
.op-points{background:var(--op-paper-2);border:1px solid var(--op-line);
  border-radius:calc(var(--op-radius) + 6px)}
.op-points-pip{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--op-forest) 12%,transparent);color:var(--op-forest)}
.op-points h4{font-size:16px}

/* ---- Newsletter band -------------------------------------------------- */
.op-news{background:radial-gradient(120% 140% at 100% 0%,var(--op-forest) 0%,var(--op-forest-600) 68%);
  border-radius:calc(var(--op-radius) + 10px);color:#fff;box-shadow:var(--op-shadow-lg);
  position:relative;overflow:hidden}
.op-news h2{color:#fff}
.op-news p{color:rgba(255,255,255,.86)}
.op-news .form-control{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.96)}
.op-news .form-control:focus{box-shadow:0 0 0 .25rem rgba(223,161,58,.35);border-color:var(--op-honey)}
.op-eyebrow--onforest{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#EBE4CF}
.op-eyebrow--onforest::before{background:var(--op-honey)}

/* ---- Product detail --------------------------------------------------- */
/* gallery frame + controls */
.splide__track.rounded-4{border:1px solid var(--op-line);box-shadow:var(--op-shadow);background:var(--op-paper)}
.splide__arrow{background:var(--op-paper-2) !important;border:1px solid var(--op-line) !important;
  box-shadow:var(--op-shadow);transition:transform .3s var(--op-ease),background-color .3s var(--op-ease)}
.splide__arrow:hover{background:var(--op-paper) !important;transform:translateY(-1px)}
.lp-btn-fav{background:var(--op-paper-2) !important;border:1px solid var(--op-line) !important;
  border-radius:12px !important;
  transition:transform .3s var(--op-ease),border-color .3s var(--op-ease),color .3s var(--op-ease)}
.lp-btn-fav:hover{transform:translateY(-2px);color:var(--op-berry);
  border-color:color-mix(in srgb,var(--op-berry) 40%,var(--op-line)) !important}
.lp-btn-fav.active{color:var(--op-berry)}

/* price → forest premium (was red); in-stock → fresh green */
#productPrice.text-danger{color:var(--op-forest-600) !important}
#discountedPrice{color:var(--op-ink-soft) !important}
#productInStock.text-danger{color:var(--op-fresh) !important}

/* qty input */
#productQty.form-control{background:var(--op-paper-2) !important;border:1px solid var(--op-line) !important;
  border-radius:10px !important;color:var(--op-ink)}

/* tab nav → honey underline on active */
.lp-nav-tabs .nav-link{color:var(--op-ink-soft);border-bottom-color:transparent !important;
  transition:color .25s var(--op-ease),border-color .25s var(--op-ease)}
.lp-nav-tabs .nav-link:hover{color:var(--op-forest)}
.lp-nav-tabs .nav-link.active{color:var(--op-forest) !important;font-weight:700;
  border-bottom-color:var(--op-honey) !important;background:transparent}

/* description body */
#productDescription{font-family:var(--op-sans);color:var(--op-ink-soft)}

/* ---- AIZ bridge (cart/checkout on shop layout use aiz-core classes) --- */
/* aiz components read --primary/--secondary-base/--success (not --bs-*) */
:root{
  --primary:#3B5233; --hov-primary:#2E4228; --soft-primary:rgba(59,82,51,.12);
  --secondary-base:#DFA13A; --hov-secondary-base:#CC8E2C; --soft-secondary-base:rgba(223,161,58,.15);
  --success:#5B8A3C; --soft-success:rgba(91,138,60,.14);
  --gray:#6E7F52; --gray-dark:#4A5140;
}
/* checkout content surfaces (cart page wraps items in #cart-summary) */
#cart-summary .border{border-color:var(--op-line) !important;border-radius:var(--op-radius) !important;
  background:var(--op-paper) !important;box-shadow:var(--op-shadow)}
#cart-summary .list-group-item{border-color:var(--op-line) !important;background:transparent}
#cart-summary .btn.rounded-0{border-radius:999px !important}
/* stepper step boxes */
.border-bottom-6px{border-radius:var(--op-radius-sm);border-color:var(--op-line) !important}
.col.done .border-bottom-6px{border-bottom-color:var(--op-fresh) !important}
.col.active .border-bottom-6px{border-bottom-color:var(--op-honey) !important}

/* ---- Dark theme (respects existing toggle via data-theme) ------------- */
:root[data-theme="dark"]{
  --op-cream:#161911; --op-paper:#1E2318; --op-paper-2:#232920;
  --op-ink:#ECEADD; --op-ink-soft:#A7AD98; --op-line:#333B2A;
  --op-forest:#8FB07A; --op-forest-600:#A6C491; --op-honey:#E7B15A; --op-honey-ink:#141810;
  --bs-body-color:#ECEADD; --bs-primary:#8FB07A;
}