/* ============================================================
   Sweet Farm Co. — shared site chrome (header + footer)
   Loaded by every page. Edit this ONE file to change the
   header/footer look everywhere at once.
   ============================================================ */

/* ---------- UTILITY STRIP ---------- */
.utility-strip{background:var(--plum);color:var(--parchment);position:relative;z-index:61;}
.utility-strip .wrap{display:flex;align-items:center;justify-content:space-between;padding:9px 32px;}
.strip-links{display:flex;gap:22px;}
.strip-links a{color:rgba(247,239,223,0.85);text-decoration:none;font-size:12.5px;font-weight:500;}
.strip-links a:hover{color:#fff;}
.strip-search-btn{background:none;border:none;color:rgba(247,239,223,0.85);cursor:pointer;padding:4px;display:flex;align-items:center;}
.strip-search-btn:hover{color:#fff;}
.strip-search-box{max-height:0;overflow:hidden;background:rgba(0,0,0,0.15);transition:max-height .25s ease;}
.strip-search-box.open{max-height:70px;}
.strip-search-inner{display:flex;gap:10px;padding:12px 32px;}
.strip-search-inner input{flex:1;padding:9px 14px;border-radius:100px;border:none;font-size:13px;background:rgba(247,239,223,0.95);color:var(--plum);}
.strip-search-inner input:focus{outline:none;}
.strip-search-inner button{background:var(--honey);color:var(--plum);border:none;border-radius:100px;padding:9px 18px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.strip-search-inner button:hover{opacity:0.9;}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:#F7EFDF;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 16px -10px rgba(43,23,18,.35);
  transition:border-color .3s ease, box-shadow .3s ease;
}
header.scrolled{border-color:var(--line);box-shadow:0 8px 24px -18px rgba(43,23,18,.4);background:rgba(247,239,223,0.43);}
header .wrap,.utility-strip .wrap{max-width:1160px;padding-left:32px;padding-right:32px;}
nav.wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--plum);}
.brand-logo{height:54px;width:auto;display:block;}
.navlinks{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:14.5px;font-weight:500;}
.navlinks a{text-decoration:none;position:relative;padding-bottom:3px;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--berry);transition:width .25s ease;}
.navlinks a:hover::after{width:100%;}
.navlinks a.current::after{width:100%;}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,0.1);color:#000;
  padding:9px 16px;border-radius:100px;
  font-size:10.8px;font-weight:600;text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.nav-cta:hover{background:#000;color:#fff;transform:translateY(-1px);}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:4px;}
.menu-btn span{display:block;width:22px;height:2px;background:var(--plum);margin:5px 0;transition:.25s;}
.menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn.active span:nth-child(2){opacity:0;}
.menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.cta-short{display:none;}
.mobile-menu{display:none;flex-direction:column;background:var(--card);border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mobile-menu.open{max-height:400px;}
.mobile-menu a{padding:16px 32px;font-size:15px;font-weight:500;text-decoration:none;color:var(--plum);border-bottom:1px solid var(--line);}
.mobile-menu a:active{background:rgba(124,42,52,0.06);}

/* ---------- FOOTER ---------- */
footer{background:var(--card);border-top:1px solid var(--line);padding:64px 0 28px;}
footer .wrap{max-width:1160px;padding-left:32px;padding-right:32px;}
.foot-top{display:grid;grid-template-columns:1.3fr 0.7fr 0.7fr 1fr;gap:40px;margin-bottom:52px;}
.foot-brand .brand{margin-bottom:14px;}
.foot-brand p{font-size:13.5px;color:rgba(43,23,18,.62);line-height:1.6;max-width:280px;margin:0 0 20px;}
.foot-socials{display:flex;gap:10px;}
.foot-socials a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:13px;transition:background .2s ease,color .2s ease;
}
.foot-socials a:hover{background:var(--berry);color:#fff;border-color:var(--berry);}
.foot-col h5{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(43,23,18,.5);margin:0 0 16px;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-col a{font-size:14px;text-decoration:none;color:var(--plum);}
.foot-col a:hover{color:var(--berry);}
.foot-col address{font-style:normal;font-size:13.5px;line-height:1.7;color:rgba(43,23,18,.65);}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:rgba(43,23,18,.5);
}
.foot-bottom a{text-decoration:underline;}
.dashboard-btn{
  display:inline-block;background:var(--berry);color:#fff !important;
  text-decoration:none !important;padding:4px 12px;border-radius:100px;
  font-size:11.5px;font-weight:600;margin-left:4px;
}
.dashboard-btn:hover{background:var(--berry-dark);}

/* ---------- CONTACT POPUP ---------- */
.contact-modal-overlay{
  position:fixed;inset:0;background:rgba(43,23,18,0.55);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.contact-modal-overlay.open{opacity:1;pointer-events:auto;}
.contact-modal{
  background:var(--card);width:100%;max-width:440px;border-radius:16px;
  padding:36px 32px;box-shadow:0 18px 40px -22px rgba(43,23,18,0.4);
  position:relative;transform:scale(0.96);opacity:0;transition:transform .2s ease,opacity .2s ease;
}
.contact-modal-overlay.open .contact-modal{transform:scale(1);opacity:1;}
.contact-modal-close{
  position:absolute;top:14px;right:14px;background:rgba(43,23,18,0.06);border:none;
  width:30px;height:30px;border-radius:50%;font-size:17px;cursor:pointer;color:var(--plum);line-height:1;
}
.contact-modal-close:hover{background:rgba(43,23,18,0.12);}
.contact-modal h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;margin:0 0 8px;color:var(--plum);}
.contact-modal p{font-size:13px;color:rgba(43,23,18,.62);line-height:1.55;margin:0 0 20px;}
.contact-modal label{display:block;font-size:11px;font-weight:600;color:rgba(43,23,18,.6);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;}
.contact-modal input,.contact-modal textarea{
  width:100%;padding:11px 14px;border-radius:8px;border:1.5px solid var(--line-strong);
  font-size:14px;background:var(--parchment);color:var(--plum);font-family:'Inter',sans-serif;
  margin-bottom:16px;box-sizing:border-box;
}
.contact-modal input:focus,.contact-modal textarea:focus{outline:none;border-color:var(--berry);}
.contact-modal textarea{min-height:100px;resize:vertical;}
.contact-form-error{color:var(--berry);font-size:12.5px;margin:-8px 0 14px;}
.contact-modal button[type=submit]{
  width:100%;background:var(--berry);color:#fff;border:none;border-radius:100px;
  padding:13px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s ease;
}
.contact-modal button[type=submit]:hover{background:var(--berry-dark);}
.contact-modal button[type=submit]:disabled{opacity:0.75;cursor:default;}

/* ---------- INLINE EDIT (staff pencil icons) ---------- */
.sf-ck-wrap{position:relative;}
.sf-edit-pencil{
  position:absolute;top:2px;right:2px;z-index:40;
  width:26px;height:26px;border-radius:6px;border:none;
  background:rgba(43,23,18,0.82);color:#fff;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0.55;transition:opacity .15s ease,background .15s ease;
}
.sf-ck-wrap:hover .sf-edit-pencil{opacity:1;}
.sf-edit-pencil:hover{background:var(--berry);opacity:1 !important;}
.sf-edit-cam{top:8px;right:8px;width:32px;height:32px;font-size:14px;}
[data-ck].sf-editing{outline:2px dashed var(--berry);outline-offset:5px;border-radius:3px;}
.sf-edit-toast{
  position:fixed;bottom:24px;right:24px;z-index:500;
  background:var(--plum);color:#fff;padding:11px 20px;border-radius:8px;
  font-size:13px;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,0,0,0.4);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.sf-edit-toast.show{opacity:1;transform:translateY(0);}
.sf-edit-toast.error{background:var(--berry);}

/* ---------- CART (header icon + popup) ---------- */
.cart-icon-btn{
  position:relative;background:none;border:none;cursor:pointer;color:var(--plum);
  display:flex;align-items:center;justify-content:center;padding:6px;margin-left:4px;
}
.cart-icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cart-icon-badge{
  position:absolute;top:-2px;right:-2px;background:var(--berry);color:#fff;
  font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.cart-modal{max-width:420px;max-height:82vh;display:flex;flex-direction:column;}
.cart-modal-items{overflow-y:auto;flex:1;margin:0 -32px;padding:0 32px;max-height:340px;}
.cart-empty{padding:30px 10px;text-align:center;color:rgba(43,23,18,.5);font-size:13.5px;}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#eee;}
.cart-item-info{flex:1;min-width:0;}
.cart-item-info h4{font-size:13.5px;font-weight:600;margin:0 0 4px;}
.cart-item-info .size{font-size:11.5px;color:rgba(43,23,18,.55);margin:0 0 8px;}
.qty-row{display:flex;align-items:center;gap:10px;}
.qty-btn{width:24px;height:24px;border:1px solid var(--line-strong);background:#fff;border-radius:5px;cursor:pointer;font-size:14px;line-height:1;}
.qty-val{font-size:13px;font-weight:600;min-width:16px;text-align:center;}
.remove-btn{margin-left:auto;font-size:12px;color:var(--berry);cursor:pointer;background:none;border:none;text-decoration:underline;}
.item-price{font-family:'Fraunces',serif;font-weight:600;font-size:14px;white-space:nowrap;}
.cart-modal-footer{border-top:1px solid var(--line);padding-top:16px;margin-top:14px;}
.cart-modal-subtotal{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:6px;}
.cart-modal-shipnote{font-size:12px;color:rgba(43,23,18,.6);margin:0 0 16px;}
.checkout-btn{
  width:100%;background:var(--berry);color:#fff;border:none;border-radius:100px;
  padding:14px;font-size:14.5px;font-weight:700;cursor:pointer;
}
.checkout-btn:hover{background:var(--berry-dark);}
.continue-shopping-btn{
  width:100%;background:none;border:1.5px solid var(--line-strong);color:var(--plum);
  border-radius:100px;padding:12px;font-size:13.5px;font-weight:600;cursor:pointer;
  margin-top:10px;
}
.continue-shopping-btn:hover{border-color:var(--berry);color:var(--berry);}
.cart-modal.checkout-active{max-width:520px;}
#cartModalCheckoutView{flex:1;min-height:0;overflow-y:auto;}
.cart-back-btn{background:none;border:none;color:var(--berry);font-size:13px;font-weight:600;cursor:pointer;padding:0 0 14px;text-decoration:underline;}
.cart-checkout-container{min-height:200px;}
.cart-checkout-loading{padding:40px 10px;text-align:center;color:rgba(43,23,18,.55);font-size:13.5px;}

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:400;
  transform:translateY(100%);opacity:0;transition:transform .3s ease,opacity .3s ease;
  background:var(--plum);color:var(--parchment);
  box-shadow:0 -10px 30px -14px rgba(0,0,0,0.4);
}
.cookie-banner.show{transform:translateY(0);opacity:1;}
.cookie-banner-inner{
  max-width:1160px;margin:0 auto;padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie-banner-inner p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(247,239,223,0.88);max-width:640px;}
.cookie-banner-inner p a{color:var(--honey);text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-btn{border-radius:100px;padding:10px 22px;font-size:13px;font-weight:700;cursor:pointer;border:1.5px solid transparent;}
.cookie-accept{background:var(--berry);color:#fff;}
.cookie-accept:hover{background:var(--berry-dark);}
.cookie-decline{background:none;border-color:rgba(247,239,223,0.4);color:var(--parchment);}
.cookie-decline:hover{border-color:var(--parchment);}

@media (max-width:600px){
  .cookie-banner-inner{padding:16px 20px;flex-direction:column;align-items:flex-start;}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .navlinks{display:none;}
  .menu-btn{display:block;}
  .mobile-menu{display:flex;}
  .cta-full{display:none;}
  .cta-short{display:inline;}
  .brand-logo{height:32px;}
  .foot-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .utility-strip .wrap{gap:14px;}
  .strip-links{
    min-width:0;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;gap:16px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .strip-links::-webkit-scrollbar{display:none;}
  .strip-links a{flex-shrink:0;}
  .strip-search-btn{flex-shrink:0;}
}
@media (max-width:600px){
  .brand-logo{height:27px;}
  .foot-top{grid-template-columns:1fr;gap:32px;}
  header .wrap,footer .wrap,.utility-strip .wrap{padding-left:20px;padding-right:20px;}
}