:root {
  --green: #2fb36f;
  --green-dark: #1f8f55;
  --green-soft: #eef9f2;
  --bg: #f5faf7;
  --text: #1c2a1f;
  --muted: #607067;
  --border: #d3e9da;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); overflow-x: hidden; }

.top-header {
  background: var(--green);
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.2fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1.1rem;
}
.brand-area { display: flex; align-items: center; gap: 0.6rem; }
.brand-link { color: inherit; text-decoration: none; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 999px; border: 2px solid #fff; display: grid; place-items: center; overflow: hidden;
  cursor: pointer; font-size: 0.7rem; font-weight: 700;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-text {
  margin: 0;
  text-transform: lowercase;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  outline: none;
}
.search-area input { width: 100%; border: none; border-radius: 6px; padding: 0.55rem 0.8rem; }
.top-links { display: flex; justify-content: flex-end; align-items: center; gap: 0.9rem; }
.top-links a, .basket-btn { color: #fff; text-decoration: none; background: transparent; border: none; cursor: pointer; font-size: 0.9rem; }

.main-nav { background: #fff; border-bottom: 1px solid var(--border); padding: 0.55rem 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.main-nav a { text-decoration: none; color: #30503a; font-size: 0.8rem; font-weight: 700; }

.full-width { max-width: 100%; }
.workspace { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0.9rem 1.1rem 1.2rem; width: 100%; }
.customer-pane { min-width: 0; width: 100%; }
.admin-pane {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0.8rem; position: sticky; top: 0.5rem; height: fit-content;
}
.admin-pane h3 { margin: 0; }
.admin-pane p { margin: 0.35rem 0 0.8rem; color: var(--muted); font-size: 0.9rem; }

.hero-carousel, .promo-carousel, .catalog-block {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.hero-carousel { position: relative; min-height: clamp(260px, 44vh, 560px); width: 100%; }
.promo-carousel { position: relative; min-height: 64px; margin-top: 0.7rem; }
.catalog-block { margin-top: 0.8rem; padding: 0.8rem; }
.section-head h3 { margin: 0; }

.carousel-toolbar { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; display: flex; gap: 0.4rem; }
.carousel-toolbar label { background: rgba(255,255,255,.95); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem 0.45rem; font-size: 0.72rem; cursor: pointer; }
.slides { position: relative; min-height: inherit; }
.slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
.slide.active { opacity: 1; pointer-events: auto; }
.hero-carousel .slide { background-size: cover; background-position: center; }
.slide-content { margin: clamp(1rem, 7vh, 4rem) 1rem; max-width: min(370px, 92%); background: rgba(239,249,243,.9); border:1px solid #d5ebde; border-radius: 8px; padding: .9rem; }
.slide-content h2 { margin: 0; }
.slide-content p { color: #496052; margin-bottom: 0; }
.promo-carousel .slide { display:grid; place-items:center; background: var(--green-soft); }

.carousel-btn { position:absolute; top:50%; transform: translateY(-50%); width:30px; height:30px; border:none; border-radius:50%; background:rgba(255,255,255,.82); cursor:pointer; }
.carousel-btn.prev { left: .5rem; }
.carousel-btn.next { right: .5rem; }
.dots { position:absolute; left:50%; transform: translateX(-50%); bottom:.55rem; display:flex; gap:.3rem; }
.dot { width:8px; height:8px; border:none; border-radius:50%; background:#839388; }
.dot.active { background: var(--green-dark); }

.product-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 220px)); gap:.65rem; margin-top:.6rem; align-items: stretch; justify-content: start; }
.product-card { border:1px solid var(--border); background:#f8fffb; border-radius:8px; padding:.7rem; display:flex; flex-direction:column; min-height: 100%; height: 100%; }
.product-thumb { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 6px; background: #e8efe9; display: block; }
.product-card h4 { margin:.45rem 0 .25rem; }
.product-card p { margin:.2rem 0; color: var(--muted); font-size:.85rem; }
.product-card h4 { min-height: 2.8rem; }
.product-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.category-price { color: var(--green-dark)!important; font-weight:700; }
.card-actions { display:grid; grid-template-columns: 1fr 1fr; gap:.45rem; margin-top:auto; }
.product-card button, .secondary-btn { border:none; border-radius:5px; background: var(--green); color:#fff; padding:.45rem; cursor:pointer; }
.secondary-btn { background:#548d67; }

.manager-form { display:grid; grid-template-columns: 1fr; gap:.45rem; margin-bottom: .8rem; }
.manager-form input, .manager-form select, .manager-form button {
  padding:.5rem; border:1px solid var(--border); border-radius:5px;
}
.manager-form button { background: var(--green); border:none; color:#fff; font-weight:700; }

.site-footer {
  margin: 0 1.1rem 1rem;
  width: calc(100% - 2.2rem);
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:.8rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.socials { display:flex; gap:.8rem; align-items:center; }
.socials a { color: var(--green-dark); text-decoration: none; font-weight: 700; }

.basket-modal {
  position: fixed; right: 0; top: 0; height: 100vh; width: min(470px,95vw); background:#fff; border-left:1px solid var(--border); z-index:40;
  transform: translateX(100%); transition: transform .25s ease; display:flex; flex-direction:column; padding:1rem;
}
.basket-modal.open { transform: translateX(0); }
.basket-modal-head { display:flex; justify-content:space-between; align-items:center; }
.basket-modal-head h2 { margin:0; }
.basket-modal-head button { border:none; background:transparent; font-size:1.5rem; cursor:pointer; }
.progress-track { width:100%; height:12px; border-radius:999px; background:#e2e2e2; margin-top:.7rem; }
.progress-track span { display:block; height:100%; width:0; background:#2eb43f; border-radius:inherit; }
.delivery-note strong { color: var(--green-dark); }
.basket-list { list-style:none; margin:.3rem 0 1rem; padding:0; flex:1; overflow:auto; }
.basket-list li { border-top:1px solid #ececec; padding:.7rem 0; display:flex; justify-content:space-between; gap:.7rem; }
.item-title { margin:0; font-size:1rem; font-weight:600; }
.item-price { margin:.2rem 0; font-weight:700; font-size:1rem; }
.qty-controls { display:flex; align-items:center; gap:.4rem; }
.qty-controls button { width:28px; height:28px; border:1px solid #ccc; background:#fff; border-radius:6px; cursor:pointer; }
.basket-footer { border-top:1px solid #ececec; padding-top:.7rem; }
.basket-footer p { display:flex; justify-content:space-between; }
.view-basket, .go-checkout { display:block; text-align:center; border-radius:8px; padding:.72rem; text-decoration:none; margin-top:.5rem; font-size:1.05rem; }
.view-basket { border:1px solid #ddd; color:#233228; }
.go-checkout { background:#2eb43f; color:#fff; font-size:1.15rem; font-weight:700; }

.product-modal {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center;
}
.product-modal[hidden] { display: none; }
.product-dialog {
  width: min(560px, 94vw); background:#fff; border-radius: 10px; border:1px solid var(--border); padding: 1rem; position: relative;
}
.close-modal { position:absolute; right:.6rem; top:.5rem; border:none; background:transparent; font-size:1.2rem; cursor:pointer; }
#modalImage { width:100%; max-height:250px; object-fit:cover; border-radius:6px; }
.change-image-label { margin-top: .6rem; display: inline-block; color: var(--green-dark); font-weight: 700; cursor: pointer; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:30; }

.checkout-page, .account-page { background:#f3f3f3; }
.checkout-top { background:#ffffff; color:#1e2a39; border-bottom:1px solid #dfe9e3; display:flex; justify-content:space-between; padding:0.95rem 1.2rem; }
.checkout-main { padding: 1.1rem; max-width: 1400px; margin: 0 auto; }
.steps-track { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.step-dot { flex:1; text-align:center; position:relative; }
.step-dot span { width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center; background:#c9c9c9; color:#fff; font-weight:700; }
.step-dot.active span { background:#4b4b4b; }
.step-dot p { margin:.35rem 0 0; }
.checkout-notice { background:#3f97cb; color:#fff; padding:.75rem; border-radius:5px; }
.checkout-notice a { color:#fff; }

.coupon-note { margin: .7rem 0 0; }
.coupon-note a { color: #1a1a1a; font-weight: 700; }
.check-row { display:flex!important; align-items:center; gap:.45rem; margin:.8rem 0; }
.check-row input { width:auto!important; }
.delivery-title { margin:.6rem 0 .45rem; font-weight:400; }
.address-box { border:1px dashed #d9e2dd; border-radius:8px; padding:1rem; display:grid; gap:.55rem; background:#fbfdfb; }
.address-btn { border:1px solid #93c59f; background:#fff; color:#3a9447; padding:.65rem .85rem; border-radius:6px; cursor:pointer; font-weight:700; width:fit-content; }
.location-status { margin:0; color:#5d6e66; font-size:.9rem; }
.shipping-note { margin:.6rem 0; padding:.6rem; border:1px solid #e7e7e7; border-radius:6px; color:#495850; background:#fafafa; }
.terms-note { font-size:.92rem; color:#4f5f56; }
.terms-note a { color:#b97b00; }

 .address-modal[hidden] {
  display: none !important;
}

.address-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 22, 0.5);
  display: grid;
  place-items: center;
  z-index: 60;
  padding: 1rem;
}
.address-modal-card {
  width: min(620px, 96vw);
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid #d8e5de;
  display: grid;
  gap: 0.7rem;
}
.close-address-modal {
  justify-self: end;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.location-suggestions {
  list-style:none;
  margin:-0.2rem 0 0;
  padding:0;
  max-height:180px;
  overflow:auto;
  border:1px solid #d9e6df;
  border-radius:8px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.location-suggestions li + li { border-top:1px solid #edf2ef; }
.location-suggestions button {
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:.5rem .65rem;
  cursor:pointer;
}
.location-suggestions button:hover { background:#f4faf6; }
.suggest-main { display:block; font-weight:700; color:#233128; }
.suggest-sub { display:block; color:#637269; font-size:.86rem; }

.address-map-frame {
  width: 100%;
  height: 290px;
  border: 1px solid #dbe6df;
  border-radius: 8px;
}
.address-modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
body.modal-open {
  overflow: hidden;
}
.payment-prompt { margin-top:.8rem; border:1px solid #dce9e2; background:#f9fdfb; border-radius:8px; padding:.8rem; }
.payment-prompt h4 { margin:.1rem 0 .35rem; font-size:1.05rem; }
.payment-prompt p { margin:.25rem 0 .6rem; }
.checkout-layout { display:grid; grid-template-columns:1.2fr .9fr; gap:1.25rem; margin-top: 1rem; }
.checkout-form, .checkout-summary { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1.25rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.checkout-form label { display:block; font-size:.86rem; }
.checkout-form input, .checkout-form textarea { width:100%; margin-top:.28rem; padding:.62rem; border:1px solid #d0d7d2; border-radius:6px; }
.basket-items { list-style:none; padding:0; margin:.6rem 0; display:grid; gap:.45rem; }
.basket-items li { display:flex; justify-content:space-between; }
.summary-box { border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; margin:.7rem 0; padding:.5rem 0; }
.summary-box p { display:flex; justify-content:space-between; }
.summary-box .total { font-weight:700; }
.pay-box { display:grid; gap:.3rem; margin-bottom:.6rem; }
.checkout-action, .primary-btn { border:none; border-radius:6px; background:#2eb43f; color:#fff; padding:.75rem 1.2rem; font-size:1.05rem; cursor:pointer; width:100%; }
.empty-basket { color: var(--muted); }

.account-wrap { width:min(1500px,95%); margin:1rem auto; }
.back-home { color: #333; font-weight:700; }
.account-wrap h1 { font-size:3.5rem; font-weight:300; margin:.5rem 0 1.2rem; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.account-grid h2 { font-size:2rem; font-weight:300; }
.account-grid label { display:block; font-size:1.15rem; margin-bottom:1rem; }
.account-grid input { width:100%; margin-top:.35rem; font-size:1.05rem; padding:.7rem; border:1px solid #cfd4db; border-radius:8px; background:#e5ebf7; }
.remember { display:flex!important; align-items:center; gap:.4rem; }
.remember input { width:24px; margin:0; }
.account-link { display:block; margin-top:1rem; color:#b97b00; font-weight:700; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .admin-pane { position: static; }
}
@media (max-width: 900px) {
  .top-header { grid-template-columns:1fr; }
  .top-links { justify-content:flex-start; }
  .checkout-layout, .account-grid, .form-grid { grid-template-columns:1fr; }
  .steps-track { flex-direction: column; }
}

.catalog-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.tab-btn { border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 0.42rem 0.8rem; cursor: pointer; font-weight: 700; }
.tab-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.section-head h3 a { color: inherit; text-decoration: none; }
.section-head h3 a:hover { text-decoration: underline; }
.banner-link { display: block; height: 100%; color: inherit; text-decoration: none; }

@media (max-width: 700px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.45rem;
  }
}