:root{--honey:#f2b632;--honey-deep:#d88d12;--cream:#fff9ec;--cream-2:#f8efd8;--ink:#2f2b23;--green:#355b48;--green-dark:#233d31;--white:#fff;--muted:#756e61;--line:#e8dcc1;--shadow:0 18px 50px rgba(64,46,12,.10);--radius:22px;--shell:1180px}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.6 "DM Sans",system-ui,sans-serif
}

img{
  max-width:100%;
  display:block
}

a{color:inherit}

h1,h2,h3,.footer-brand{
  font-family:"Fraunces",Georgia,serif;
  line-height:1.08;
  margin:0 0 .6em
}

h1{
  font-size:clamp(2.5rem,6vw,5.2rem);
  letter-spacing:-.035em
}

h2{
  font-size:clamp(2rem,4vw,3.3rem);
  letter-spacing:-.025em
}

h3{font-size:1.35rem}

.shell{
  width:min(calc(100% - 40px),var(--shell));
  margin-inline:auto
}

.skip-link{
  position:absolute;
  left:-9999px
}

.skip-link:focus{
  left:16px;
  top:16px;
  z-index:999;
  background:#fff;
  padding:10px 14px;
  border-radius:8px
}

.announcement{
  background:var(--green-dark);
  color:#fff;
  text-align:center;
  padding:8px 16px;
  font-size:.82rem;
  letter-spacing:.07em;
  text-transform:uppercase
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,249,236,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(53,91,72,.12)
}

.header-row{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:30px
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  margin-right:auto
}

.brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--honey);
  font-size:1.5rem;
  box-shadow:0 8px 20px rgba(216,141,18,.22)
}

.brand-text{
  display:grid;
  line-height:1.1
}

.brand-text strong{
  font-family:"Fraunces",serif;
  font-size:1.25rem
}

.brand-text small{
  color:var(--muted);
  font-size:.72rem;
  margin-top:4px
}

.main-nav{
  display:flex;
  align-items:center;
  gap:24px
}

.main-nav a,
.cart-link{
  text-decoration:none;
  font-weight:700;
  font-size:.92rem
}

.main-nav a:hover,
.cart-link:hover{
  color:var(--honey-deep)
}

.cart-link{
  display:flex;
  gap:8px;
  align-items:center
}

.cart-count{
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:99px;
  background:var(--honey);
  display:grid;
  place-items:center;
  font-size:.76rem
}

.site-main{min-height:55vh}

.hero{
  overflow:hidden;
  background:linear-gradient(135deg,#fff9ec 0%,#faedc9 70%,#f4dda0 100%);
  border-bottom:1px solid var(--line)
}

.hero-grid{
  min-height:650px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px
}

.eyebrow{
  display:inline-block;
  color:var(--green);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:16px
}

.hero-lead{
  max-width:650px;
  font-size:1.18rem;
  color:#5f584d
}

.button-row,
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px
}

.trust-row{
  gap:22px;
  color:var(--green);
  font-size:.88rem;
  font-weight:700
}

.button{
  appearance:none;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font:700 .92rem/1 "DM Sans",sans-serif;
  cursor:pointer;
  transition:.2s ease
}

.button:hover{transform:translateY(-1px)}

.button.primary{
  background:var(--green);
  color:#fff;
  box-shadow:0 12px 24px rgba(53,91,72,.18)
}

.button.primary:hover{background:var(--green-dark)}

.button.secondary{
  background:transparent;
  color:var(--green);
  border:1px solid rgba(53,91,72,.35)
}

.button.dark{
  background:var(--ink);
  color:#fff
}

.button.full{width:100%}

.hero-art{
  min-height:450px;
  position:relative;
  display:grid;
  place-items:center
}

.honey-jar{
  position:relative;
  z-index:3;
  width:250px
}

.jar-lid{
  height:42px;
  background:#c28c39;
  border-radius:16px 16px 8px 8px;
  box-shadow:inset 0 -9px 0 rgba(0,0,0,.08)
}

.jar-glass{
  height:300px;
  margin:0 12px;
  background:linear-gradient(160deg,rgba(255,255,255,.5),rgba(242,182,50,.18)),#eeb22d;
  border:10px solid rgba(255,255,255,.5);
  border-radius:28px 28px 52px 52px;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow),inset 0 -50px 70px rgba(160,95,0,.18)
}

.jar-glass span{
  background:#fff5d8;
  padding:20px 28px;
  border-radius:50%;
  text-align:center;
  font-family:"Fraunces",serif;
  font-size:1.8rem;
  line-height:1.05;
  color:var(--green)
}

.honeycomb{
  position:absolute;
  width:110px;
  height:95px;
  background:rgba(242,182,50,.25);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)
}

.c1{
  left:8%;
  top:12%
}

.c2{
  right:7%;
  top:25%;
  transform:scale(.75)
}

.c3{
  left:20%;
  bottom:5%;
  transform:scale(.55)
}

.section{padding-block:84px}

.section-heading{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:end;
  margin-bottom:30px
}

.section-heading h2{margin-bottom:0}

.text-link{
  font-weight:800;
  color:var(--green);
  text-decoration:none
}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}

.product-grid.mini{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.product-card{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 30px rgba(64,46,12,.05)
}

.product-image-wrap{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  background:#f5e9ca;
  overflow:hidden
}

.product-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}

.product-card:hover .product-image-wrap img{
  transform:scale(1.025)
}

.product-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:4rem;
  background:linear-gradient(145deg,#f9efcf,#f1d58c)
}

.product-placeholder.large{
  min-height:500px;
  border-radius:var(--radius)
}

.badge{
  position:absolute;
  top:14px;
  left:14px;
  background:var(--ink);
  color:white;
  padding:7px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800
}

.badge.sale{background:var(--honey-deep)}

.product-card-body{
  padding:18px 20px 22px
}

.product-card h2,
.product-card h3{
  font-family:"DM Sans",sans-serif;
  font-size:1.03rem;
  margin:0 0 6px
}

.product-card a{text-decoration:none}

.price{
  margin:0;
  color:var(--green);
  font-weight:800
}

.story-band{
  background:var(--green);
  color:#fff
}

.story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0
}

.story-card{
  padding:48px 42px;
  border-right:1px solid rgba(255,255,255,.18)
}

.story-card:last-child{border-right:0}

.icon-card span{font-size:2rem}

.icon-card h3{
  margin:12px 0 8px
}

.icon-card p{
  margin:0;
  color:rgba(255,255,255,.78)
}

.split-section{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:70px;
  align-items:center
}

.split-section p{
  font-size:1.08rem;
  color:var(--muted)
}

.quote-card{
  background:#fff;
  border:1px solid var(--line);
  padding:48px;
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

.quote-card p{
  font-family:"Fraunces",serif;
  font-size:1.7rem;
  line-height:1.35;
  color:var(--ink)
}

.cta-band{
  background:var(--honey);
  padding:55px 0
}

.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.cta-inner h2{margin:0}

.page-hero{
  background:linear-gradient(135deg,#f9edca,#fff9ec);
  border-bottom:1px solid var(--line)
}

.page-hero.compact{
  padding:72px 0
}

.page-hero.compact h1{
  font-size:clamp(2.6rem,5vw,4.6rem)
}

.page-hero p{
  max-width:720px;
  color:var(--muted);
  font-size:1.05rem
}

.category-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:32px
}

.category-nav a{
  background:#fff;
  border:1px solid var(--line);
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:.86rem
}

.pagination-wrap{
  margin-top:44px;
  text-align:center
}

.pagination a,
.pagination span{
  display:inline-block;
  margin:3px;
  padding:8px 12px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line);
  text-decoration:none
}

.product-page{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:64px;
  align-items:start
}

.product-gallery{
  display:grid;
  gap:18px
}

.product-gallery img{
  width:100%;
  border-radius:var(--radius);
  background:#f4ead0
}

.product-info{
  position:sticky;
  top:125px
}

.back-link{
  display:inline-block;
  margin-bottom:26px;
  text-decoration:none;
  color:var(--muted);
  font-weight:700
}

.product-info h1{
  font-size:clamp(2.4rem,4vw,4.2rem)
}

.product-price{
  font-size:1.35rem;
  color:var(--green);
  font-weight:800;
  margin-bottom:24px
}

.rich-copy{color:#5e574c}

.buy-form{
  display:grid;
  gap:10px;
  margin:32px 0;
  padding:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px
}

.buy-form label,
.contact-form label{
  font-size:.8rem;
  font-weight:800;
  margin-top:4px
}

.select-field,
.quantity-field,
.contact-form input,
.contact-form textarea{
  width:100%;
  min-height:48px;
  border:1px solid #d8ccb1;
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  font:inherit;
  color:inherit
}

.quantity-field{max-width:100px}

.contact-form textarea{
  min-height:160px;
  resize:vertical
}

.status-box,
.success-box{
  padding:22px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  margin:26px 0
}

.product-notes{
  border-top:1px solid var(--line);
  margin-top:28px
}

.product-notes>div{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:12px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  font-size:.9rem
}

.product-notes span{
  color:var(--muted)
}

.cart-page{max-width:980px}

.cart-list{
  display:grid;
  gap:14px
}

.cart-item{
  display:grid;
  grid-template-columns:110px 1fr 110px 120px;
  gap:20px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px
}

.cart-thumb{
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:#f5e9ca
}

.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:cover
}

.cart-details h2{
  font-family:"DM Sans",sans-serif;
  font-size:1.05rem;
  margin:0 0 6px
}

.cart-details p{
  margin:2px 0;
  color:var(--muted);
  font-size:.88rem
}

.cart-qty{
  display:grid;
  gap:4px
}

.cart-qty label,
.cart-qty small{
  font-size:.72rem
}

.cart-quantity{
  width:70px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px
}

.cart-line-price{
  font-weight:800;
  text-align:right
}

.cart-summary{
  margin:24px 0 0 auto;
  width:min(100%,460px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px
}

.cart-summary>div:first-child{
  display:flex;
  justify-content:space-between;
  font-size:1.2rem
}

.cart-summary p{
  color:var(--muted);
  font-size:.85rem
}

.cart-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap
}

.empty-state{
  text-align:center;
  padding:65px 25px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius)
}

.big-icon{font-size:3rem}

.contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px
}

.contact-card{
  display:grid;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.contact-card span{
  color:var(--muted)
}

.contact-form{
  display:grid;
  gap:8px;
  background:#fff;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

.recaptcha-note{
  font-size:.75rem;
  color:var(--muted)
}

.maintenance-page{
  min-height:75vh;
  display:grid;
  place-items:center;
  padding:40px
}

.custom-page-copy{
  width:min(calc(100% - 40px),860px);
  margin:0 auto;
  padding:72px 0
}

.custom-page-copy h1{
  font-size:clamp(2.6rem,5vw,4.6rem)
}

.custom-page-copy h2{
  font-size:1.8rem;
  margin-top:1.5em
}

.custom-page-copy p,
.custom-page-copy li{
  color:#5f584d
}

.maintenance-card{
  max-width:650px;
  text-align:center;
  background:#fff;
  padding:55px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

.site-footer{
  background:var(--green-dark);
  color:#fff;
  padding:58px 0 20px
}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:40px
}

.footer-grid h2{
  font-family:"DM Sans",sans-serif;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.1em
}

.footer-grid a{
  display:block;
  text-decoration:none;
  color:rgba(255,255,255,.75);
  margin:7px 0
}

.footer-grid p{
  color:rgba(255,255,255,.7)
}

.footer-brand{font-size:1.7rem}

.muted{opacity:.65}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:26px;
  margin-top:35px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.78rem;
  color:rgba(255,255,255,.58)
}


/* ==================================================
   AFFILIATION LOGOS
   ================================================== */

.why-copy{min-width:0}

.veteran-line{
  margin:0 0 22px;
  color:var(--ink)!important;
  font-size:1.05rem!important;
  font-weight:800
}

.affiliation-block{
  margin:26px 0 22px;
  padding-top:22px;
  border-top:1px solid var(--line)
}

.affiliation-label{
  display:block;
  margin-bottom:14px;
  color:var(--green);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}

.affiliation-logos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch
}

.affiliation-logo{
  min-width:0;
  min-height:106px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(64,46,12,.045);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}

.affiliation-logo:hover{
  transform:translateY(-2px);
  border-color:rgba(216,141,18,.45);
  box-shadow:0 10px 24px rgba(64,46,12,.08)
}

.affiliation-logo:focus-visible{
  outline:3px solid rgba(242,182,50,.55);
  outline-offset:3px
}

.affiliation-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:72px;
  object-fit:contain
}

.affiliation-logo--homegrown img{
  max-height:82px
}

.affiliation-logo--hives img{
  max-height:54px
}

.why-link{
  display:inline-block;
  margin-top:2px
}


/* ==================================================
   FULL-WIDTH TOP BANNER
   ================================================== */

.angels-top-banner{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  overflow:hidden !important
}

.angels-top-banner a{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important
}

.angels-top-banner img{
  display:block !important;
  visibility:visible !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important
}


/* ==================================================
   REMOVE ONLY THE SMALL BIG CARTEL DUPLICATE BANNER

   Big Cartel's original logo slot generates Banner.png
   with h=400 and w=400. The large custom banner uses
   a different image size, so it is not affected.
   ================================================== */

img[src*="Banner.png"][src*="h=400"][src*="w=400"]{
  display:none !important;
  visibility:hidden !important
}

a:has(img[src*="Banner.png"][src*="h=400"][src*="w=400"]){
  display:none !important
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media(max-width:900px){

  .site-header{
    position:relative
  }

  .header-row{
    flex-wrap:wrap;
    padding:12px 0
  }

  .main-nav{
    display:flex;
    order:3;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    padding:4px 0 8px;
    gap:18px
  }

  .hero-grid,
  .product-page,
  .split-section,
  .contact-grid{
    grid-template-columns:1fr
  }

  .hero-grid{
    min-height:auto;
    padding:70px 0 50px
  }

  .hero-art{
    min-height:420px
  }

  .product-info{
    position:static
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .product-grid.mini{
    grid-template-columns:repeat(2,1fr)
  }

  .story-grid{
    grid-template-columns:1fr
  }

  .story-card{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18)
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .cart-item{
    grid-template-columns:90px 1fr 90px
  }

  .cart-line-price{
    grid-column:2/-1
  }

  .cta-inner{
    align-items:flex-start;
    flex-direction:column
  }
}


@media(max-width:700px){

  .affiliation-logos{
    grid-template-columns:1fr
  }

  .affiliation-logo{
    min-height:92px
  }

  .affiliation-logo img{
    max-height:68px
  }

  .affiliation-logo--homegrown img{
    max-height:78px
  }

  .affiliation-logo--hives img{
    max-height:50px
  }
}


@media(max-width:580px){

  .shell{
    width:min(calc(100% - 28px),var(--shell))
  }

  .header-row{
    min-height:72px
  }

  .brand-text small{
    display:none
  }

  .hero-copy h1{
    font-size:2.7rem
  }

  .hero-art{
    min-height:350px
  }

  .honey-jar{
    width:205px
  }

  .jar-glass{
    height:245px
  }

  .product-grid,
  .product-grid.mini{
    grid-template-columns:1fr
  }

  .section{
    padding-block:62px
  }

  .section-heading{
    align-items:flex-start;
    flex-direction:column
  }

  .story-card{
    padding:36px 24px
  }

  .footer-grid{
    grid-template-columns:1fr
  }

  .footer-bottom{
    flex-direction:column
  }

  .cart-item{
    grid-template-columns:76px 1fr;
    align-items:start
  }

  .cart-qty{
    grid-column:2
  }

  .cart-line-price{
    grid-column:2;
    text-align:left
  }

  .cart-actions{
    flex-direction:column
  }

  .cart-actions .button{
    width:100%
  }
}