/* Plant Shop — Main CSS | Mobile First */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#F7F4EF;--cream-dark:#EDE8DF;--sage:#5C7A62;--sage-dark:#3D5942;--sage-light:#ECF2ED;
  --ink:#1A1A18;--ink-soft:#4A4A46;--ink-muted:#8C8C86;--stone:#D4CEC4;--red:#B84C4C;
  --r-sm:6px;--r:12px;--r-lg:20px;
  --sh-sm:0 2px 8px rgba(26,26,24,.08);--sh-md:0 6px 28px rgba(26,26,24,.12);
  --ease:cubic-bezier(.25,.46,.45,.94);
}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* ──────────────────────────────────────────
   HEADER
────────────────────────────────────────── */
.header{background:var(--ink);position:sticky;top:0;z-index:200}
.header-content{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:0 1rem;height:56px;
}
.logo{
  display:flex;align-items:center;gap:.5rem;
  color:var(--cream);font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:500;letter-spacing:.02em;flex-shrink:0;
}
.logo i{color:var(--sage);font-size:.95rem}
.logo h1{font-size:inherit;font-weight:inherit}
.nav{display:none}
.header-search{display:none}
.header-actions{display:flex;align-items:center;gap:.5rem}

/* ──────────────────────────────────────────
   BUTTONS
────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.625rem 1.125rem;
  border:none;border-radius:var(--r-sm);
  font-size:.875rem;font-weight:500;line-height:1;
  transition:all .2s var(--ease);cursor:pointer;white-space:nowrap;-webkit-appearance:none;
}
.btn-primary{background:var(--sage);color:#fff}.btn-primary:hover{background:var(--sage-dark)}
.btn-secondary{background:var(--cream-dark);color:var(--ink)}.btn-secondary:hover{background:var(--stone)}
.btn-ghost{background:transparent;color:var(--sage);border:1.5px solid var(--sage)}.btn-ghost:hover{background:var(--sage-light)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:#a03a3a}
.btn-icon{
  position:relative;background:rgba(255,255,255,.1);color:var(--cream);
  border:1px solid rgba(255,255,255,.15);padding:.5rem .7rem;border-radius:var(--r-sm);transition:background .2s;
}
.btn-icon:hover{background:rgba(255,255,255,.18)}
.cart-count{
  position:absolute;top:-6px;right:-6px;
  background:var(--sage);color:#fff;font-size:.62rem;font-weight:700;
  width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ──────────────────────────────────────────
   HERO
────────────────────────────────────────── */
.hero{
  background:var(--ink);padding:3rem 1.25rem 3.5rem;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 60% at 50% 120%,rgba(92,122,98,.3) 0%,transparent 68%);
  pointer-events:none;
}
.hero-content{position:relative;max-width:560px;margin:0 auto}
.hero-eyebrow{
  display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sage);margin-bottom:1rem;
}
.hero-content h2{
  font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:400;
  color:var(--cream);line-height:1.18;margin-bottom:.875rem;
}
.hero-content p{color:rgba(247,244,239,.5);font-weight:300;font-size:.9rem;margin-bottom:1.75rem}

/* ──────────────────────────────────────────
   SHOP
────────────────────────────────────────── */
.shop{padding:1.75rem 1rem 3rem}
.shop .container{max-width:1280px;margin:0 auto}
.shop-controls{display:flex;flex-direction:column;gap:.625rem;margin-bottom:1.25rem}
.search-input{
  width:100%;padding:.7rem 1rem;
  border:1.5px solid var(--stone);border-radius:var(--r-sm);
  font-size:.9rem;background:#fff;color:var(--ink);
  outline:none;transition:border-color .2s;-webkit-appearance:none;
}
.search-input:focus{border-color:var(--sage)}
.category-filter,select.category-filter{
  width:100%;padding:.7rem 1rem;
  border:1.5px solid var(--stone);border-radius:var(--r-sm);
  font-size:.9rem;background:#fff;color:var(--ink);
  outline:none;cursor:pointer;transition:border-color .2s;-webkit-appearance:none;
}
.category-filter:focus{border-color:var(--sage)}

/* Categories strip */
.categories-container{
  display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin-bottom:1rem;padding-bottom:2px;
}
.categories-container::-webkit-scrollbar{display:none}
.category-btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;
  background:#fff;border:1.5px solid var(--stone);border-radius:999px;
  font-size:.78rem;font-weight:500;color:var(--ink-soft);
  cursor:pointer;transition:all .2s var(--ease);flex-shrink:0;white-space:nowrap;
}
.category-btn i{font-size:.7rem}
.category-count{
  background:var(--cream-dark);color:var(--ink-muted);
  font-size:.66rem;padding:.1rem .35rem;border-radius:999px;min-width:18px;text-align:center;transition:all .2s;
}
.category-btn:hover{border-color:var(--sage);color:var(--sage)}
.category-btn.active{background:var(--sage);border-color:var(--sage);color:#fff}
.category-btn.active .category-count{background:rgba(255,255,255,.22);color:#fff}
.results-count{font-size:.78rem;color:var(--ink-muted);margin-bottom:1rem}

/* ──────────────────────────────────────────
   PLANTS GRID
────────────────────────────────────────── */
.plants-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.875rem;
}

/* ──────────────────────────────────────────
   PLANT CARD
────────────────────────────────────────── */
.plant-card{
  background:#fff;border-radius:var(--r);border:1.5px solid var(--cream-dark);
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.plant-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--stone)}

/* Зона зображення — квадрат однаковий для всіх */
.plant-image{
  position:relative;
  aspect-ratio:1/1;
  background:var(--sage-light);
  overflow:hidden;
  flex-shrink:0;
}
.plant-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.plant-card:hover .plant-img{transform:scale(1.04)}
.plant-emoji{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:3rem;line-height:1;user-select:none;
}
.plant-badge{
  position:absolute;top:8px;left:8px;
  background:var(--red);color:#fff;
  font-size:.62rem;font-weight:700;padding:.18rem .45rem;
  border-radius:4px;letter-spacing:.04em;z-index:2;
}
.plant-info{padding:.75rem;display:flex;flex-direction:column;flex:1;gap:.2rem}
.plant-name{
  font-size:.88rem;font-weight:500;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;
}
.plant-category{font-size:.72rem;color:var(--ink-muted);margin:0}
.plant-price{margin:.25rem 0 0;font-size:.88rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.plant-card-footer{display:flex;gap:.4rem;margin-top:auto;padding-top:.625rem}
.details-small{
  flex:1;padding:.45rem .35rem;
  background:var(--cream);border:1.5px solid var(--stone);border-radius:var(--r-sm);
  font-size:.72rem;font-weight:500;color:var(--ink-soft);transition:all .2s;
}
.details-small:hover{border-color:var(--sage);color:var(--sage);background:var(--sage-light)}
.add-small{
  flex:1;padding:.45rem .35rem;
  background:var(--sage);border:none;border-radius:var(--r-sm);
  font-size:.72rem;font-weight:500;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:.25rem;
  transition:background .2s;white-space:nowrap;
}
.add-small:hover{background:var(--sage-dark)}

/* No results */
.no-results{text-align:center;padding:3rem 1.5rem;color:var(--ink-muted);grid-column:1/-1}
.no-results h3{font-size:1rem;font-weight:500;margin:.875rem 0 .4rem;color:var(--ink-soft)}
.no-results p{font-size:.85rem}

/* ──────────────────────────────────────────
   СЛАЙДЕР В КАРТЦІ
────────────────────────────────────────── */
.img-slider{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}
.slider-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.slider-img.active{opacity:1;pointer-events:auto}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.82);border:none;border-radius:50%;
  width:28px;height:28px;font-size:1.1rem;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.18);
  opacity:0;transition:opacity .15s,background .15s;
}
.plant-image:hover .slider-arrow{opacity:1}
.slider-prev{left:6px}.slider-next{right:6px}
.slider-arrow:hover{background:#fff}
.slider-dots{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;z-index:3;
}
.slider-dot{
  width:6px;height:6px;border-radius:50%;border:none;
  background:rgba(255,255,255,.55);cursor:pointer;padding:0;
  transition:background .2s,transform .2s;
}
.slider-dot.active{background:#fff;transform:scale(1.3)}

/* ──────────────────────────────────────────
   CART DRAWER
────────────────────────────────────────── */
.cart-drawer{position:fixed;inset:0;z-index:400;pointer-events:none}
.cart-drawer.active{pointer-events:all}
.cart-drawer::before{
  content:'';position:absolute;inset:0;
  background:rgba(26,26,24,.42);opacity:0;
  transition:opacity .3s var(--ease);backdrop-filter:blur(2px);
}
.cart-drawer.active::before{opacity:1}
.cart-drawer-inner{
  position:absolute;top:0;right:0;width:100%;height:100%;
  background:var(--cream);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--ease);
  box-shadow:-6px 0 32px rgba(26,26,24,.12);
}
.cart-drawer.active .cart-drawer-inner{transform:translateX(0)}
.cart-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--stone);flex-shrink:0;
}
.cart-drawer-header h2{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:500}
.close-btn{
  background:none;border:none;font-size:1.5rem;
  color:var(--ink-muted);cursor:pointer;line-height:1;padding:.25rem;transition:color .2s;
}
.close-btn:hover{color:var(--ink)}
.cart-items{flex:1;overflow-y:auto;padding:.875rem 1.25rem}
.cart-item{
  display:grid;grid-template-columns:52px 1fr auto auto;
  align-items:center;gap:.75rem;padding:.875rem 0;border-bottom:1px solid var(--cream-dark);
}
.cart-item-image{
  width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--sage-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cart-item-img{width:100%;height:100%;object-fit:cover}
.cart-item-info{min-width:0}
.cart-item-info h3{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-info p{font-size:.8rem;color:var(--ink-muted);margin-top:.1rem}
.cart-item-quantity{display:flex;align-items:center;gap:.3rem}
.cart-item-quantity button{
  width:26px;height:26px;border-radius:50%;background:var(--cream-dark);border:none;font-size:1rem;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:background .2s;
}
.cart-item-quantity button:hover{background:var(--stone)}
.cart-item-quantity span{font-size:.875rem;font-weight:500;min-width:20px;text-align:center}
.cart-item-total{display:none}
.remove-item{background:none;border:none;color:var(--ink-muted);font-size:.8rem;padding:.25rem;transition:color .2s;flex-shrink:0}
.remove-item:hover{color:var(--red)}
#cartSummary{padding:.875rem 1.25rem 1.5rem;flex-shrink:0}
.cart-total{border:1.5px solid var(--cream-dark);border-radius:var(--r);padding:1.125rem;background:#fff}
.cart-total h3{font-family:'Cormorant Garamond',serif;font-size:1.15rem;margin-bottom:.875rem}
.checkout-btn{
  width:100%;padding:.875rem;background:var(--sage);color:#fff;
  border:none;border-radius:var(--r-sm);font-family:inherit;font-size:.9rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  cursor:pointer;transition:background .2s;margin-bottom:.5rem;
}
.checkout-btn:hover{background:var(--sage-dark)}

/* ──────────────────────────────────────────
   MODALS
────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:flex-end;
  background:rgba(26,26,24,.48);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
}
.modal.active{opacity:1;pointer-events:all}
.modal-content{
  background:var(--cream);border-radius:var(--r-lg) var(--r-lg) 0 0;
  width:100%;max-height:92vh;overflow-y:auto;padding:1.5rem 1.25rem;
  position:relative;transform:translateY(20px);
  transition:transform .3s var(--ease);box-shadow:0 -4px 32px rgba(26,26,24,.15);
}
.modal-content::before{
  content:'';display:block;width:40px;height:4px;
  background:var(--stone);border-radius:2px;margin:0 auto .75rem;
}
.modal.active .modal-content{transform:translateY(0)}
.modal-large{max-height:94vh;padding:0;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.modal-header h2{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:500}

/* Plant detail modal — центрування на десктопі */
.plant-modal {
  align-items: flex-end;
}
.plant-modal .modal-content {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%;
  max-height: 92vh;
}
@media(min-width: 640px) {
  .plant-modal {
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .plant-modal .modal-content {
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 900px;
    max-height: 88vh;
  }
}

/* Plant detail modal */
.plant-modal .close-btn{
  position:absolute;top:.875rem;right:.875rem;z-index:10;
  background:rgba(26,26,24,.5);color:#fff;border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;backdrop-filter:blur(4px);
}
.plant-details{display:grid;grid-template-columns:1fr}
.plant-detail-image{
  position:relative;height:220px;background:var(--sage-light);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.plant-detail-img{width:100%;height:100%;object-fit:cover}
.plant-detail-info{padding:1.25rem}
.product-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem}
.availability{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--sage);font-weight:500}
.article-number{font-size:.72rem;color:var(--ink-muted)}
.plant-detail-name{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:500;line-height:1.18;margin-bottom:.3rem}
.plant-category{font-size:.78rem;color:var(--ink-muted);margin-bottom:1rem}
.pricing-section{margin-bottom:1.25rem}
.price-promo,.price-regular{display:flex;align-items:baseline;gap:.5rem}
.price-main{font-size:1.4rem;font-weight:600;color:var(--ink)}
.price-old{font-size:.95rem;text-decoration:line-through;color:var(--ink-muted)}
.price-period{font-size:.72rem;color:var(--ink-muted)}
.add-to-cart-btn{
  width:100%;padding:.875rem;background:var(--sage);color:#fff;
  border:none;border-radius:var(--r-sm);font-family:inherit;font-size:.9rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  cursor:pointer;transition:background .2s;
}
.add-to-cart-btn:hover{background:var(--sage-dark)}
.product-description h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:.4rem;margin-top:.875rem}
.product-description p{font-size:.875rem;color:var(--ink-soft);line-height:1.65}

/* ── Галерея в деталях ── */
.detail-gallery{display:flex;flex-direction:column;gap:.625rem}
.detail-main-img-wrap{
  position:relative;border-radius:12px;overflow:hidden;
  background:#f5f5f0;aspect-ratio:4/3;
}
.detail-main-img-wrap .plant-detail-img{
  width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s;
}
.detail-thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.detail-thumb{
  width:60px;height:60px;object-fit:cover;border-radius:8px;
  border:2px solid transparent;cursor:pointer;opacity:.65;
  transition:border-color .2s,opacity .2s;
}
.detail-thumb:hover{opacity:.9}
.detail-thumb.active{border-color:var(--sage);opacity:1}

/* Order form */
.form-group{margin-bottom:.875rem}
.form-group label{
  display:block;font-size:.72rem;font-weight:500;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem;
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.7rem .875rem;border:1.5px solid var(--stone);border-radius:var(--r-sm);
  font-size:.9rem;background:#fff;color:var(--ink);outline:none;
  transition:border-color .2s;-webkit-appearance:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--sage)}
.form-group .btn-primary{width:100%;justify-content:center;padding:.875rem;margin-top:.25rem}

/* ──────────────────────────────────────────
   ABOUT / CONTACT / FOOTER
────────────────────────────────────────── */
.about,.contact{padding:2.5rem 1.25rem}
.about{background:#fff}.contact{background:var(--cream-dark)}
.about .container,.contact .container{max-width:720px;margin:0 auto}
.about h2,.contact h2{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;margin-bottom:.75rem}
.about p,.contact p{font-size:.875rem;color:var(--ink-soft);line-height:1.7}
.contact-info{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.contact-info p{display:flex;align-items:center;gap:.5rem}
.contact-info i{color:var(--sage)}
.contact-info a{color:var(--ink-soft);transition:color .2s}.contact-info a:hover{color:var(--sage)}
.footer{background:var(--ink);color:rgba(247,244,239,.35);text-align:center;padding:1.25rem;font-size:.78rem}

/* Notifications */
.notification{animation:notifIn .25s var(--ease) both;font-size:.85rem;font-weight:500}
@keyframes notifIn{from{opacity:0;transform:translateY(-8px) translateX(6px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════
   480px+
══════════════════════════════════════════ */
@media(min-width:480px){
  .hero-content h2{font-size:2.4rem}
  .plant-emoji{font-size:3.5rem}
  .contact-info{flex-direction:row;flex-wrap:wrap}
}

/* ══════════════════════════════════════════
   640px+ (tablet)
══════════════════════════════════════════ */
@media(min-width:640px){
  .header-content{padding:0 1.5rem;height:60px}
  .logo{font-size:1.35rem}
  .nav{display:flex;gap:1.5rem;align-items:center}
  .nav a{font-size:.85rem;color:rgba(247,244,239,.65);transition:color .2s}
  .nav a:hover{color:var(--cream)}

  .hero{padding:4.5rem 2rem 5.5rem}
  .hero-content h2{font-size:2.8rem}

  .shop{padding:2.5rem 1.5rem 4rem}
  .shop-controls{flex-direction:row;align-items:center}
  .search-input{flex:1;width:auto}
  .category-filter,select.category-filter{width:auto}

  .plants-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}

  .cart-drawer-inner{width:400px}
  .cart-item-total{display:block;font-size:.875rem;font-weight:500;white-space:nowrap}
  .cart-item{grid-template-columns:52px 1fr auto auto auto}

  .modal{align-items:center;padding:1rem}
  .modal-content{
    border-radius:var(--r-lg);max-width:500px;padding:2rem;
    transform:translateY(12px);box-shadow:var(--sh-md);
  }
  .modal-content::before{display:none}
  .modal-large{max-width:860px;padding:0;border-radius:var(--r-lg)}

  .plant-details{grid-template-columns:1fr 1fr}
  .plant-detail-image{height:100%;min-height:380px}
  .plant-detail-img{min-height:380px}
  .detail-main-img-wrap{aspect-ratio:1/1}
  .detail-thumb{width:72px;height:72px}
}

/* ══════════════════════════════════════════
   1024px+ (desktop)
══════════════════════════════════════════ */
@media(min-width:1024px){
  .header-content{padding:0 2rem;max-width:1280px;margin:0 auto}
  .header-search{
    display:flex;flex:1;max-width:440px;align-items:center;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
    border-radius:var(--r-sm);padding:0 .875rem;height:38px;gap:.5rem;transition:all .2s;
  }
  .header-search:focus-within{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.25)}
  .header-search i{color:rgba(255,255,255,.38);font-size:.82rem;flex-shrink:0}
  .header-search input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-size:.875rem;font-weight:300}
  .header-search input::placeholder{color:rgba(255,255,255,.32)}

  .hero{padding:5.5rem 2rem 6.5rem}
  .hero-content h2{font-size:3.4rem}

  .shop{padding:3.5rem 2rem 5rem}
  .shop .container{padding:0 1rem}

  .plants-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}

  .about,.contact{padding:3.5rem 2rem}
  .cart-drawer-inner{width:420px}
  .plant-detail-image{min-height:420px}
  .plant-detail-img{min-height:420px}
  .plant-detail-info{padding:2rem}
}

/* ═══════════════════════════════════════════
   ДОДАТИ В КІНЕЦЬ main.css
   Сторінка товару: галерея ліворуч, інфо праворуч
   Слайдер карток
═══════════════════════════════════════════ */

/* ── Слайдер в картці ── */
.img-slider{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit}
.slider-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;pointer-events:none}
.slider-img.active{opacity:1;pointer-events:auto}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.82);border:none;border-radius:50%;
  width:28px;height:28px;font-size:1.1rem;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;
  color:#1A1A18;box-shadow:0 2px 6px rgba(0,0,0,.18);
  opacity:0;transition:opacity .15s,background .15s;
}
.plant-image:hover .slider-arrow{opacity:1}
.slider-prev{left:6px}.slider-next{right:6px}
.slider-arrow:hover{background:#fff}
.slider-dots{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:3}
.slider-dot{width:6px;height:6px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.slider-dot.active{background:#fff;transform:scale(1.3)}

/* ══════════════════════════════════════════
   СТОРІНКА ТОВАРУ — PD (Product Detail)
══════════════════════════════════════════ */

/* Modal overrides для великої сторінки товару */
.plant-modal .modal-content {
  padding: 0;
  overflow: hidden;
}
.plant-modal .modal-content::before { display: none; }

/* Контейнер деталей — мобайл: стек */
#plantDetails {
  display: grid;
  grid-template-columns: 1fr;
  max-height: 90vh;
  overflow-y: auto;
}

/* ── Галерея (ліва колонка) ── */
.pd-gallery {
  position: relative;
  background: #F7F4EF;
  display: flex;
  flex-direction: row;
  gap: .5rem;
  padding: 1rem;
  align-items: flex-start;
}
.pd-gallery--empty {
  justify-content: center;
  align-items: center;
  min-height: 240px;
}

/* Мініатюри — горизонтально внизу на мобайлі */
.pd-thumbs {
  display: flex;
  flex-direction: row;
  gap: .375rem;
  order: 2;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  padding-top: .5rem;
}
.pd-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .6;
  transition: border-color .2s, opacity .2s;
  flex-shrink: 0;
}
.pd-thumb:hover { opacity: .85; }
.pd-thumb.active { border-color: #5C7A62; opacity: 1; }

/* Головне фото */
.pd-main-wrap {
  position: relative;
  order: 1;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.pd-main-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
  background: var(--sage-light);
}
.pd-badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
}

/* ── Інфо (права колонка) ── */
.pd-info {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.pd-category { margin-bottom: .25rem; }
.pd-quick-order {
  width: 100%;
  justify-content: center;
  margin-top: .375rem;
}

/* Ціна */
.price-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.price-row--old { margin-top: .15rem; }
.price-main { font-size: 1.5rem; font-weight: 700; color: #1A1A18; }
.price-badge {
  background: #e91e63;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 4px;
  letter-spacing: .04em;
}
.price-old { font-size: .9rem; text-decoration: line-through; color: #8C8C86; }
.price-period { font-size: .75rem; color: #8C8C86; }

/* Галерея — стек на мобайлі: спочатку фото, потім мініатюри */
.pd-gallery {
  flex-wrap: wrap;
}
.pd-main-wrap { order: 1; }
.pd-thumbs    { order: 2; }

/* ══════════════════════════════════════════
   640px+ — ліво/право layout
══════════════════════════════════════════ */
@media(min-width: 640px) {
  #plantDetails {
    grid-template-columns: 1fr 1fr;
    max-height: 85vh;
    overflow: hidden;
  }

  .pd-gallery {
    flex-direction: row;
    align-items: flex-start;
    padding: 1.25rem;
    height: 100%;
    overflow-y: auto;
    gap: .625rem;
  }

  /* Мініатюри — вертикально зліва */
  .pd-thumbs {
    flex-direction: column;
    order: 1;
    width: auto;
    flex-wrap: nowrap;
    padding-top: 0;
    gap: .5rem;
    flex-shrink: 0;
  }
  .pd-thumb {
    width: 60px;
    height: 60px;
  }

  /* Головне фото — праворуч від мініатюр, займає решту */
  .pd-main-wrap {
    order: 2;
    flex: 1;
  }
  .pd-main-img {
    aspect-ratio: 1/1;
  }

  .pd-info {
    padding: 1.75rem;
    overflow-y: auto;
    height: 100%;
  }
  .price-main { font-size: 1.75rem; }
}

@media(min-width: 1024px) {
  #plantDetails {
    grid-template-columns: 55% 45%;
    max-height: 80vh;
  }
  .pd-thumb { width: 68px; height: 68px; }
  .pd-gallery { padding: 1.5rem; }
  .pd-info { padding: 2rem 2rem 2rem 1.5rem; }
}

/* ══════════════════════════════════════════
   SCROLL LOCK — блокує скрол сторінки під попапами
══════════════════════════════════════════ */
body.scroll-locked {
  overflow: hidden;
  /* На iOS потрібен position:fixed щоб заблокувати скрол */
  position: fixed;
  width: 100%;
}