/* Planter store chrome — atmosphere, motion, inner pages */
:root{
  --pl-cream:#f6efdc;--pl-paper:#fdfbf4;--pl-ink:#2c3320;--pl-moss:#50602e;
  --pl-spring:#849c48;--pl-spring-bright:#a1b863;--pl-blush:#e57e93;
  --pl-muted:#5b6550;--pl-line:rgba(44,51,32,.12);
  --pl-display:"Fraunces","Noto Serif Georgian",Georgia,serif;
  --pl-body:"Inter","Noto Sans Georgian",system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--pl-cream)!important;color:var(--pl-ink);font-family:var(--pl-body);overflow-x:hidden}
main#main{background:transparent!important}
::selection{background:#a1b863;color:#2c3320}

/* Atmosphere */
.pl-atmosphere{
  position:fixed;inset:-10% 0 0;z-index:0;pointer-events:none;will-change:transform;
  background:
    radial-gradient(35% 45% at 18% 22%, rgba(132,156,72,.28), transparent 70%),
    radial-gradient(30% 40% at 82% 18%, rgba(189,207,139,.3), transparent 70%),
    radial-gradient(40% 45% at 70% 78%, rgba(161,184,99,.2), transparent 70%),
    radial-gradient(28% 36% at 28% 82%, rgba(247,200,210,.18), transparent 70%),
    #f6efdc;
}
.pl-grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pl-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,#a1b863,#849c48);pointer-events:none;transition:width .05s linear;
}
#app,.skip-to-main-content-link{position:relative;z-index:1}

/* Reveal motion — NEVER hide content (opacity stays 1). Soft lift only after JS. */
.pl-reveal,.pl7-reveal,.pl6-reveal,.pl5-reveal,.pl4-reveal{
  opacity:1;transform:none;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.pl-ready .pl-reveal:not(.is-in),
.pl-ready .pl7-reveal:not(.is-in),
.pl-ready .pl6-reveal:not(.is-in),
.pl-ready .pl5-reveal:not(.is-in),
.pl-ready .pl4-reveal:not(.is-in){
  transform:translate3d(0,16px,0);
}
.pl-reveal.is-in,.pl7-reveal.is-in,.pl6-reveal.is-in,.pl5-reveal.is-in,.pl4-reveal.is-in{
  opacity:1;transform:none;
}
@media (prefers-reduced-motion:reduce){
  .pl-reveal,.pl7-reveal,.pl6-reveal,.pl5-reveal,.pl4-reveal{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .pl-cursor-dot,.pl-cursor-ring{display:none!important}
}

/* Header */
header.shadow-gray,header.pl-header{
  background:rgba(253,251,244,.55)!important;
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid rgba(44,51,32,.08)!important;
  box-shadow:none!important;
  transition:background .3s ease, box-shadow .3s ease;
}
header.pl-header.is-scrolled{
  background:rgba(253,251,244,.9)!important;
  box-shadow:0 12px 40px -28px rgba(44,51,32,.4)!important;
}
header .border-b{border-color:transparent!important}

.pl-nav{display:flex;align-items:center;gap:22px}
.pl-nav a{position:relative;font-size:14px;font-weight:500;color:var(--pl-ink);text-decoration:none;padding:4px 0}
.pl-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:linear-gradient(90deg,#a1b863,#849c48);transition:width .25s ease;
}
.pl-nav a:hover::after,.pl-nav a.is-active::after{width:100%}
.pl-nav a:hover{color:var(--pl-moss)}
.pl-cta-store{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:600;color:#fff;text-decoration:none;
  background:linear-gradient(120deg,#849c48 0%,#a1b863 45%,#6d7d40 100%);
  background-size:200% 200%;animation:plStoreGrad 6s ease infinite;
  box-shadow:0 10px 28px -16px rgba(132,156,72,.8);transition:transform .2s ease;
}
.pl-cta-project{
  display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--pl-ink);text-decoration:none;
  border:1px solid rgba(44,51,32,.15);background:rgba(253,251,244,.7);transition:transform .2s ease,border-color .2s ease;
}
.pl-cta-project:hover{border-color:var(--pl-spring);background:rgba(246,239,220,.95)}
@keyframes plStoreGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.pl-nav-host ~ .flex.items-center.gap-5{display:none!important}

/* Buttons */
.primary-button{background:var(--pl-ink)!important;border-color:var(--pl-ink)!important;border-radius:9999px!important}
.primary-button:hover{background:var(--pl-spring)!important;border-color:var(--pl-spring)!important}
.secondary-button{border-radius:9999px!important;border-color:rgba(44,51,32,.25)!important;color:var(--pl-ink)!important}

/* Cursor */
.pl-cursor-dot,.pl-cursor-ring{
  position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;will-change:transform;
}
.pl-cursor-dot{width:8px;height:8px;border-radius:50%;background:var(--pl-spring)}
.pl-cursor-ring{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(132,156,72,.55);
  transition:width .2s ease,height .2s ease,background .2s ease,border-color .2s ease;
}
.pl-cursor-ring.is-hot{width:72px;height:72px;background:rgba(161,184,99,.18);border-color:rgba(161,184,99,.7)}
@media (hover:none),(pointer:coarse){.pl-cursor-dot,.pl-cursor-ring{display:none!important}}

/* —— Inner pages —— */
main#main .container{max-width:1180px}
main#main h1,
main#main h2.font-dmserif,
main#main .pl-page-title,
main#main [class*="font-dmserif"]{
  font-family:var(--pl-display)!important;
  color:var(--pl-ink)!important;
  letter-spacing:-.02em;
}
main#main .container > h1,
main#main .container > div > h1{
  font-size:clamp(32px,4vw,48px)!important;
  margin-bottom:1rem;
}

/* Product cards */
main#main .group{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  border-radius:18px;
}
main#main .group.pl-tilt{transform-style:preserve-3d}
main#main .group:hover{box-shadow:0 22px 44px -30px rgba(44,51,32,.4)}
main#main .group img{transition:transform .7s cubic-bezier(.22,1,.36,1)!important;border-radius:14px}
main#main .group:hover img{transform:scale(1.04)}
main#main .group .bg-white,
main#main .group [class*="bg-white"]{
  background:rgba(253,251,244,.92)!important;
  backdrop-filter:blur(8px);
}

/* Category toolbar / filters */
main#main .border,
main#main [class*="border-zinc"],
main#main [class*="border-gray"]{border-color:rgba(44,51,32,.1)!important}
main#main input,main#main select,main#main textarea{
  border-radius:14px!important;
  border-color:rgba(44,51,32,.14)!important;
  background:rgba(253,251,244,.85)!important;
}
main#main input:focus,main#main select:focus,main#main textarea:focus{
  border-color:var(--pl-spring)!important;
  outline-color:var(--pl-spring);
}

/* Breadcrumbs */
main#main nav ol,main#main nav ul{font-size:13px}
main#main nav a{color:var(--pl-muted);transition:color .2s ease}
main#main nav a:hover{color:var(--pl-spring)}

/* PDP */
main#main .sticky{backdrop-filter:blur(0)}
main#main [class*="text-navyBlue"],
main#main .text-navyBlue{color:var(--pl-ink)!important}
main#main .bg-navyBlue{background:var(--pl-ink)!important}

/* CMS / about content */
main#main .pl-about h1{font-family:var(--pl-display)!important;color:var(--pl-ink)!important}
main#main .pl-about .pl-sub{color:var(--pl-spring)!important}
main#main .pl-about .pl-values li{
  background:rgba(253,251,244,.8)!important;
  border-color:rgba(44,51,32,.1)!important;
}

/* Footer / services */
footer, .bg-white:has(> footer){background:var(--pl-paper)!important}
footer a{transition:color .2s ease}
footer a:hover{color:var(--pl-spring)!important}
section:has([class*="icon-truck"]),
.container:has(.icon-truck){background:transparent!important}

/* Homepage product carousel polish */
main#main .product-card,
main#main [class*="product-card"]{
  border-radius:22px!important;
  overflow:hidden;
  background:rgba(253,251,244,.9)!important;
  border:1px solid rgba(44,51,32,.08)!important;
  box-shadow:none!important;
  transition:transform .25s ease, border-color .25s ease;
}
main#main .product-card:hover,
main#main [class*="product-card"]:hover{
  transform:translateY(-4px);
  border-color:rgba(132,156,72,.35)!important;
}
main#main .product-card img{transition:transform .5s ease}
main#main .product-card:hover img{transform:scale(1.04)}