@import url("fonts.css");

/* ===== base (matches design source) ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fbf9f2;color:#1d2a1f;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#2f5d3a;text-decoration:none}
a:hover{color:#4a8b3f}
input,select,textarea,button{font-family:inherit}
img{max-width:100%;display:block}

@keyframes sjfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sjslide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

/* ===== hover / focus classes (replace inline style-hover/style-focus) ===== */
.hov-nav:hover{background:#ece4d3}
.hov-tel:hover{color:#4a8b3f}
.hov-darken:hover{background:#2f5d3a}
.hov-border:hover{border-color:#4a8b3f}
.hov-card:hover{border-color:#4a8b3f;transform:translateY(-3px)}
.hov-cream:hover{background:#f2f0c3}
.hov-darkgreen:hover{background:#4a8b3f}
.hov-footer-link:hover{opacity:1;color:#d9e86a}
.field{transition:border-color .15s}
.field:focus{border-color:#4a8b3f;outline:none}

/* ===== responsive grid helpers (override inline grid-template-columns on small screens) ===== */
@media (max-width: 980px){
  .sj-hero-grid{grid-template-columns:1fr !important;gap:36px !important}
  .sj-grid-3{grid-template-columns:repeat(2,1fr) !important}
  .sj-grid-4{grid-template-columns:repeat(2,1fr) !important}
  .sj-grid-2{grid-template-columns:1fr !important}
  .sj-service-row{grid-template-columns:1fr !important}
  .sj-service-row .sj-svc-thumb{height:160px !important}
  .sj-pricing-grid{grid-template-columns:1fr !important}
  .sj-contact-grid{grid-template-columns:1fr !important}
  .sj-steps-grid{grid-template-columns:1fr !important}
  .sj-why-grid{grid-template-columns:1fr !important}
  .sj-h1{font-size:44px !important}
  .sj-h1-lg{font-size:38px !important}
  .sj-h2{font-size:32px !important}
  .sj-cta-row{flex-direction:column !important;align-items:stretch !important}
  header .sj-navlinks{display:none !important}
  header .sj-burger{display:flex !important}
  header .sj-navlinks.sj-open{display:flex !important;position:absolute;top:100%;left:0;right:0;background:#fbf9f2;flex-direction:column;padding:10px 16px 16px;border-bottom:1px solid #e3ddcb;gap:2px}
}
@media (max-width: 640px){
  .sj-grid-3{grid-template-columns:1fr !important}
  .sj-grid-4{grid-template-columns:1fr !important}
  .sj-h1{font-size:36px !important}
  .sj-h1-lg{font-size:32px !important}
  .cart-drawer-panel{width:100% !important}
}

/* ===== header ===== */
.sj-burger{display:none;width:38px;height:38px;border-radius:9px;border:1.5px solid #d7d0bd;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.sj-burger span,.sj-burger span::before,.sj-burger span::after{content:"";display:block;width:16px;height:2px;background:#1d2a1f;position:relative}
.sj-burger span::before{position:absolute;top:-5px}
.sj-burger span::after{position:absolute;top:5px}

/* ===== FAQ (native details/summary styled to match design) ===== */
.sj-faq{background:#fff;border:1px solid #e3ddcb;border-radius:14px;padding:4px 24px;margin-bottom:10px}
.sj-faq summary{list-style:none;cursor:pointer;padding:16px 0;font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.sj-faq summary::-webkit-details-marker{display:none}
.sj-faq summary::after{content:"+";font-size:20px;color:#4a8b3f;line-height:1}
.sj-faq[open] summary::after{content:"\2212"}
.sj-faq .sj-faq-a{font-size:15.5px;line-height:1.7;color:#4c5a49;padding-bottom:18px}

/* ===== cart drawer ===== */
.cart-overlay{position:fixed;inset:0;z-index:60;display:none}
.cart-overlay.sj-open{display:flex;justify-content:flex-end}
.cart-overlay .backdrop{position:absolute;inset:0;background:rgba(29,42,31,.45)}
.cart-drawer-panel{position:relative;width:430px;max-width:100%;background:#fbf9f2;height:100%;display:flex;flex-direction:column;animation:sjslide .28s ease both;box-shadow:-14px 0 40px rgba(29,42,31,.2)}
.cart-line{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #ece7d9}
.cart-qty-btn{padding:5px 11px;cursor:pointer;background:#fff;font-weight:700;border:none}

/* ===== cookie banner ===== */
.cookie-banner{position:fixed;bottom:18px;left:18px;right:18px;z-index:70;display:flex;justify-content:center;pointer-events:none}
.cookie-banner.sj-hidden{display:none}
.cookie-banner .box{pointer-events:auto;background:#fff;border:1px solid #ded6c2;border-radius:18px;box-shadow:0 16px 44px rgba(29,42,31,.18);padding:22px 26px;max-width:920px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* ===== misc ===== */
button{border:none;background:none}
.skip-link{position:absolute;left:-999px;top:0;background:#1d2a1f;color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}
.sj-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.sj-photo-wrap{overflow:hidden}

.range-freq[data-active="true"]{background:#4a8b3f !important;color:#fff !important}
.extra-opt[data-active="true"]{background:#4a8b3f !important;color:#fff !important}
.cat-pill[data-active="true"]{background:#1d2a1f !important;color:#f7f6ee !important}

.js-only{display:none}
.no-js .js-only{display:none !important}