/* Planter catalog — exact mockup match */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700&family=Noto+Serif+Georgian:wght@600;700&display=swap');

.pl-cat{
  --cat-bg:#fdfbf4;
  --cat-paper:#fdfbf4;
  --cat-cream:#f6efdc;
  --cat-side:#f3efe2;
  --cat-soft:#e8efd8;
  --cat-mint:#e3ebd0;
  --cat-green:#849c48;
  --cat-green-dark:#50602e;
  --cat-ink:#2c3320;
  --cat-muted:#5b6550;
  --cat-line:rgba(44,51,32,.1);
  --cat-card:#ffffff;
  --cat-media:#f6efdc;
  --cat-max:none;
  --cat-pad:clamp(20px,3vw,40px);
  --cat-sans:"Noto Sans Georgian","Noto Sans",sans-serif;
  --cat-serif:"Noto Sans Georgian","Noto Sans",sans-serif;
  background:var(--cat-bg)!important;
  color:var(--cat-ink);
  padding:0 0 64px;
  font-family:var(--cat-sans);
  -webkit-font-smoothing:antialiased;
}
body:has(.pl-cat),
main#main:has(.pl-cat){
  background:#fdfbf4!important;
}
.pl-cat *,.pl-cat *::before,.pl-cat *::after{box-sizing:border-box}
.pl-cat-shell{
  width:80%;
  max-width:none;
  margin:0 auto;
  padding:0;
}

/* —— Hero (matches homepage plant spotlight) —— */
.pl-cat-hero{
  position:relative;overflow:hidden;
  padding:clamp(36px,4.5vw,56px) 0 clamp(28px,3.5vw,40px);
  background:var(--cat-paper);
  border-bottom:1px solid rgba(44,51,32,.06);
}
.pl-cat-hero-deco{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.pl-cat-deco-blob{
  position:absolute;border-radius:50%;filter:blur(2px);
  background:radial-gradient(circle,rgba(197,214,160,.28) 0%,transparent 70%);
}
.pl-cat-deco-blob--1{width:min(280px,42vw);height:min(280px,42vw);top:-18%;right:-4%}
.pl-cat-deco-blob--2{
  width:min(220px,36vw);height:min(220px,36vw);bottom:-28%;left:-6%;
  background:radial-gradient(circle,rgba(132,156,72,.12) 0%,transparent 72%);
}
.pl-cat-deco-leaf{
  position:absolute;width:clamp(26px,3.2vw,42px);height:clamp(40px,5vw,66px);
  background:linear-gradient(180deg,rgba(143,173,80,.4) 0%,rgba(95,138,50,.28) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 2C30 14 36 28 36 40c0 10-7 18-16 22C11 58 4 50 4 40 4 28 10 14 20 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cpath d='M20 2C30 14 36 28 36 40c0 10-7 18-16 22C11 58 4 50 4 40 4 28 10 14 20 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.3;
  animation:plCatLeafFloat 16s ease-in-out infinite;
}
.pl-cat-deco-leaf::after{
  content:"";position:absolute;left:50%;top:16%;bottom:16%;width:1.5px;
  background:rgba(255,255,255,.35);border-radius:1px;transform:translateX(-50%);
}
.pl-cat-deco-leaf--1{top:12%;left:3%;transform:rotate(-18deg);animation-delay:-2s}
.pl-cat-deco-leaf--2{top:18%;right:8%;width:clamp(20px,2.6vw,32px);height:clamp(32px,4vw,50px);transform:rotate(28deg);opacity:.22;animation-delay:-7s}
.pl-cat-deco-leaf--3{bottom:14%;right:22%;transform:rotate(-32deg) scaleX(-1);opacity:.2;animation-delay:-11s}
@keyframes plCatLeafFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -8px}
}
@media (prefers-reduced-motion:reduce){.pl-cat-deco-leaf{animation:none}}

.pl-cat-hero-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,48px);
}
.pl-cat-hero-copy{flex:1 1 auto;min-width:0;max-width:36rem}
.pl-cat-crumbs{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:12px;font-weight:600;line-height:1;color:var(--cat-green);
  letter-spacing:.14em;text-transform:uppercase;
}
.pl-cat-crumbs a{color:inherit;text-decoration:none;opacity:.85}
.pl-cat-crumbs a:hover{opacity:1;color:var(--cat-green-dark)}
.pl-cat-title{
  margin:0 0 22px;max-width:14ch;
  font-family:var(--cat-serif);
  font-size:clamp(34px,4.6vw,48px);font-weight:600;
  letter-spacing:-.03em;line-height:1.12;color:var(--cat-green-dark);
}
.pl-cat-lead{
  margin:0;max-width:38ch;
  font-size:15px;font-weight:400;line-height:1.65;color:var(--cat-muted);
}

.pl-cat-hero-art{
  position:relative;flex:0 0 auto;
  width:min(220px,28vw);height:min(180px,22vw);
  display:grid;place-items:center;
}
.pl-cat-hero-ring{
  position:absolute;inset:8%;
  border-radius:50%;
  border:1px solid rgba(132,156,72,.22);
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.7) 0%,rgba(232,239,216,.55) 45%,rgba(197,214,160,.2) 100%);
}
.pl-cat-hero-icon{
  position:absolute;z-index:1;
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid #e7ddca;
  color:var(--cat-green);
  box-shadow:0 14px 28px -18px rgba(44,51,32,.45);
}
.pl-cat-hero-icon svg{width:26px;height:26px;display:block}
.pl-cat-hero-icon--a{top:8%;left:6%;transform:rotate(-8deg)}
.pl-cat-hero-icon--b{top:28%;right:0;transform:rotate(7deg)}
.pl-cat-hero-icon--c{bottom:6%;left:28%;transform:rotate(-3deg)}

/* —— Body —— */
.pl-cat-body{
  display:grid;grid-template-columns:280px minmax(0,1fr);
  gap:36px;align-items:start;padding-top:18px;
}

/* —— Sidebar —— */
.pl-cat-aside{
  background:var(--cat-side);
  border-radius:20px;
  padding:22px 18px 24px;
  position:sticky;top:96px;
  border:1px solid rgba(26,26,26,.04);
}
.pl-cat-block + .pl-cat-block{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(26,26,26,.07);
}
.pl-cat-block-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 14px;
}
.pl-cat-block-title{
  margin:0;font-size:14px;font-weight:700;color:var(--cat-ink);
  letter-spacing:-.01em;
}
.pl-cat-chev{width:14px;height:14px;color:var(--cat-green);opacity:.75}

.pl-cat-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pl-cat-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:8px 6px;border:0;border-radius:10px;background:transparent;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--cat-ink);
  text-align:left;cursor:pointer;transition:background .15s ease;
}
.pl-cat-item:hover{background:rgba(255,255,255,.55)}
.pl-cat-item.is-active{background:rgba(255,255,255,.85)}
.pl-cat-ico{
  width:22px;height:22px;flex:0 0 auto;
  display:grid;place-items:center;
  background:transparent;color:var(--cat-green);
}
.pl-cat-ico svg{width:18px;height:18px;display:block}
.pl-cat-item > span{flex:1;min-width:0;line-height:1.3;font-weight:500}
.pl-cat-badge{
  margin:0;padding:0;min-width:0;height:auto;border-radius:0;
  background:transparent!important;color:var(--cat-green)!important;
  font-size:12.5px;font-weight:600;font-style:normal;line-height:1;
}

/* Price */
.pl-cat-price-labels{
  display:flex;justify-content:space-between;margin:2px 0 12px;
  font-size:12px;font-weight:500;color:var(--cat-muted);
}
.pl-cat-range{
  position:relative;height:28px;display:flex;align-items:center;margin:0 2px;
}
.pl-cat-range-track{
  position:absolute;left:0;right:0;height:4px;border-radius:999px;
  background:#dfe3d6;
}
.pl-cat-range-fill{
  position:absolute;height:4px;border-radius:999px;background:var(--cat-green);
}
.pl-cat-range input[type=range]{
  position:absolute;left:0;width:100%;margin:0;appearance:none;
  background:transparent;pointer-events:none;height:28px;
}
.pl-cat-range input[type=range]:first-of-type{z-index:2}
.pl-cat-range input[type=range]:last-of-type{z-index:3}
.pl-cat-range input[type=range]::-webkit-slider-thumb{
  appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:50%;
  background:var(--cat-green);border:0;
  box-shadow:0 1px 3px rgba(0,0,0,.15);cursor:pointer;
}
.pl-cat-range input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:16px;height:16px;border-radius:50%;
  background:var(--cat-green);border:0;
  box-shadow:0 1px 3px rgba(0,0,0,.15);cursor:pointer;
}

/* Checks */
.pl-cat-checks{display:grid;gap:10px}
.pl-cat-check{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--cat-ink);user-select:none;
}
.pl-cat-check input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pl-cat-box{
  width:17px;height:17px;border-radius:4px;flex:0 0 auto;
  border:1.5px solid #c5c9bb;background:#fff;
  display:grid;place-items:center;transition:all .15s ease;
}
.pl-cat-check input:checked + .pl-cat-box{
  background:var(--cat-green);border-color:var(--cat-green);
}
.pl-cat-box svg{width:10px;height:10px;opacity:0;color:#fff}
.pl-cat-check input:checked + .pl-cat-box svg{opacity:1}

/* —— Toolbar —— */
.pl-cat-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:4px 0 20px;flex-wrap:wrap;
}
.pl-cat-count{margin:0;font-size:13.5px;font-weight:400;color:var(--cat-muted)}
.pl-cat-tools{display:flex;align-items:center;gap:8px}
.pl-cat-select{
  appearance:none;border:1px solid #e2e2de;background:#fff;
  border-radius:12px;padding:11px 38px 11px 14px;
  font:inherit;font-size:13px;font-weight:500;
  color:var(--cat-ink);cursor:pointer;min-height:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23708238' d='M1.2 1.5 6 6.2 10.8 1.5' stroke='%23708238' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.pl-cat-modes{display:flex;gap:6px}
.pl-cat-mode{
  width:42px;height:42px;border-radius:12px;border:0;
  background:#ecece8;color:#9a9a9a;cursor:pointer;
  display:grid;place-items:center;transition:background .15s ease,color .15s ease;
}
.pl-cat-mode svg{width:17px;height:17px}
.pl-cat-mode.is-active{background:var(--cat-soft);color:var(--cat-green)}

/* —— Cards (pixel match) —— */
.pl-cat-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
}
.pl-cat-card{
  position:relative;
  background:#fff;
  border-radius:28px;
  border:1px solid rgba(26,26,26,.06);
  box-shadow:0 10px 30px -18px rgba(26,26,26,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease;
}
.pl-cat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px -16px rgba(26,26,26,.28);
}
.pl-cat-card-media{
  position:relative;
  margin:0;
  aspect-ratio:1/1;
  background:#f7f7f2;
  border-radius:0;
  overflow:hidden;
}
.pl-cat-card-media a{
  display:block;
  height:100%;width:100%;padding:0;
}
.pl-cat-card-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .4s ease;
}
.pl-cat-card:hover .pl-cat-card-media img{transform:scale(1.03)}

.pl-cat-card-body{
  background:#fff;
  padding:18px 20px 18px;
  display:flex;flex-direction:column;gap:0;
  flex:1;
}
.pl-cat-card-name{
  margin:0;
  font-size:17px;font-weight:700;line-height:1.3;
  color:#1a1a1a;text-decoration:none;
  letter-spacing:-.015em;
}
.pl-cat-card-name:hover{color:#3d4d1e}
.pl-cat-card-cat{
  margin:6px 0 0;
  font-size:13px;font-weight:400;color:#888;line-height:1.35;
}
.pl-cat-card-foot{
  margin-top:auto;padding-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pl-cat-card-price{
  margin:0;
  font-size:20px;font-weight:700;color:#3d4d1e;line-height:1;
  letter-spacing:-.02em;
}
.pl-cat-cart{
  width:44px;height:44px;border:0;border-radius:12px;cursor:pointer;
  background:#e2edd1;color:#3d4d1e;
  display:grid;place-items:center;
  transition:background .15s ease,transform .15s ease;
  flex:0 0 auto;
}
.pl-cat-cart:hover{background:#d7e6c0;transform:scale(1.03)}
.pl-cat-cart:disabled{opacity:.4;cursor:not-allowed;transform:none}
.pl-cat-cart svg{width:18px;height:18px}

.pl-cat-empty{
  grid-column:1/-1;min-height:220px;display:grid;place-items:center;
  border:1px dashed var(--cat-line);border-radius:16px;color:var(--cat-muted);
  background:#fff;
}
.pl-cat-more{
  display:block;margin:28px auto 0;padding:12px 28px;border-radius:999px;
  border:1px solid #e2e2de;background:#fff;color:var(--cat-ink);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.pl-cat-more:hover{border-color:var(--cat-green);color:var(--cat-green)}

/* Trust */
.pl-cat-trust{
  margin-top:40px;padding:24px 20px;border-radius:20px;
  background:var(--cat-side);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  border:1px solid rgba(26,26,26,.04);
}
.pl-cat-trust-item{display:flex;align-items:flex-start;gap:12px;min-width:0}
.pl-cat-trust-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;background:transparent;color:var(--cat-green);
}
.pl-cat-trust-ico svg{width:20px;height:20px}
.pl-cat-trust-item p{
  margin:0;font-size:13px;line-height:1.45;font-weight:600;color:var(--cat-green-dark);
}

.pl-cat-suggest{
  margin:14px 0 0;
}
.pl-cat-suggest p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--cat-muted);
}
.pl-cat-suggest button{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  margin:0;
  font:inherit;
  font-weight:700;
  color:var(--cat-green-dark);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.pl-cat-suggest button:hover{color:var(--cat-green)}

@media (max-width:1100px){
  .pl-cat-shell{width:90%}
  .pl-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .pl-cat-shell{width:92%}
  .pl-cat-body{grid-template-columns:1fr;gap:22px}
  .pl-cat-aside{position:static}
  .pl-cat-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-cat-hero-art{width:160px;height:140px}
  .pl-cat-hero-icon{width:46px;height:46px;border-radius:14px}
  .pl-cat-hero-icon svg{width:22px;height:22px}
}
@media (max-width:640px){
  .pl-cat-shell{width:100%;padding:0 16px}
  .pl-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pl-cat-title{font-size:32px}
  .pl-cat-hero-inner{flex-direction:column;align-items:flex-start}
  .pl-cat-hero-art{align-self:flex-end;margin-top:-8px;width:140px;height:120px;opacity:.9}
  .pl-cat-deco-leaf--3{display:none}
  .pl-cat-trust{grid-template-columns:1fr}
  .pl-cat-card-media{margin:0}
  .pl-cat-card-body{padding:14px 14px 14px}
  .pl-cat-card{border-radius:22px}
  .pl-cat-card-name{font-size:15px}
  .pl-cat-card-price{font-size:17px}
  .pl-cat-cart{width:40px;height:40px}
}