/* =============================================
   HUNNY'S URBAN HOMESTEAD — MASTER STYLESHEET
   Paste this into Zoho Commerce:
   Website → Design → Custom CSS
   ============================================= */
 
/* GLOBAL */
.huh-pg { max-width: 680px; margin: 0 auto; }
.huh-sl { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8fb840; margin-bottom: .4rem; }
.huh-st { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700; color: #1c2e10; margin-bottom: .35rem; line-height: 1.25; }
.huh-ss { font-size: .88rem; color: #666; margin-bottom: 1.5rem; line-height: 1.65; }
 
/* HERO */
.huh-hero { background: #1c2e10; padding: 3rem 2rem 2.5rem; position: relative; overflow: hidden; }
.huh-hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: #2d4a18; opacity: .45; }
.huh-hero::after { content: ''; position: absolute; bottom: -50px; left: -40px; width: 190px; height: 190px; border-radius: 50%; background: #3a5c20; opacity: .3; }
.huh-hbadge { display: inline-flex; align-items: center; gap: 6px; background: #8fb840; color: #1c2e10; font-size: 11px; font-weight: 500; letter-spacing: .08em; padding: 4px 12px; border-radius: 20px; margin-bottom: 1rem; text-transform: uppercase; position: relative; z-index: 1; }
.huh-hname { font-size: .75rem; color: #7aab5c; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem; position: relative; z-index: 1; }
.huh-hhead { font-family: Georgia, serif; font-size: 2.4rem; font-weight: 700; color: #f5f0e8; line-height: 1.1; margin-bottom: .75rem; position: relative; z-index: 1; }
.huh-hhead em { color: #d4e87a; font-style: normal; }
.huh-hrenv { font-family: Georgia, serif; font-size: 1rem; font-style: italic; color: #8aaa6a; margin-bottom: 1.2rem; position: relative; z-index: 1; line-height: 1.5; }
.huh-hrenv span { color: #d4e87a; }
.huh-hsub { font-size: .95rem; color: #7aab5c; font-weight: 300; line-height: 1.65; margin-bottom: 1.6rem; max-width: 440px; position: relative; z-index: 1; }
.huh-hsub strong { color: #c8e088; font-weight: 500; }
.huh-hcta { display: inline-block; background: #d4e87a; color: #1c2e10; font-size: .93rem; font-weight: 500; padding: 13px 26px; border-radius: 4px; text-decoration: none; position: relative; z-index: 1; margin-right: .7rem; }
.huh-hctag { display: inline-block; border: 1px solid #4a6a30; color: #8aaa6a; font-size: .88rem; padding: 12px 20px; border-radius: 4px; text-decoration: none; position: relative; z-index: 1; }
.huh-hproof { display: flex; gap: 1.4rem; margin-top: 1.6rem; position: relative; z-index: 1; flex-wrap: wrap; }
.huh-hpi { display: flex; align-items: center; gap: 5px; color: #6a9a4c; font-size: .79rem; }
 
/* TRUST BAR */
.huh-trust { background: #f5f0e8; padding: 0; display: flex; justify-content: center; gap: 0; border-bottom: 1px solid #ddd8ce; }
.huh-tpill { display: flex; align-items: center; gap: 10px; padding: 1.1rem 1.4rem; border-right: 1px solid #ddd8ce; flex: 1; }
.huh-tpill:last-child { border-right: none; }
.huh-tpill-icon { color: #8fb840; font-size: 20px; flex-shrink: 0; }
.huh-tpill-text strong { display: block; font-size: .85rem; color: #1c2e10; line-height: 1.2; margin-bottom: .2rem; }
.huh-tpill-text span { font-size: .72rem; color: #7a9060; font-weight: 400; line-height: 1.3; }
 
/* SHOP CATEGORIES */
.huh-shop { padding: 2.2rem 2rem; background: #fff; }
.huh-cat-btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.2rem; }
.huh-cat-btn { display: block; background: #1c2e10; color: #d4e87a; font-size: .85rem; font-weight: 500; padding: 14px 8px; border-radius: 4px; text-decoration: none; text-align: center; }
 
/* DEFINITION */
.huh-def-section { padding: 2.5rem 2rem; background: #f5f0e8; }
.huh-def-headline { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #1c2e10; line-height: 1.2; margin-bottom: 1.4rem; }
.huh-def-headline em { color: #8fb840; font-style: normal; }
.huh-def-block { background: #fff; border-left: 3px solid #8fb840; border-radius: 0 8px 8px 0; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.huh-def-word { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: #1c2e10; margin-bottom: .2rem; }
.huh-def-phon { font-size: .78rem; color: #8fb840; margin-bottom: .6rem; }
.huh-def-main { font-size: .92rem; color: #1c2e10; line-height: 1.7; font-weight: 500; }
.huh-reclaim-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
.huh-rpill { background: #1c2e10; border-radius: 6px; padding: .9rem; text-align: center; }
.huh-rpill-icon { font-size: 1.3rem; margin-bottom: .4rem; }
.huh-rpill-text { font-size: .78rem; color: #d4e87a; font-weight: 500; line-height: 1.3; }
 
/* PERMISSION */
.huh-permission { padding: 2.5rem 2rem; background: #fff; }
.huh-sunlight-bar { background: #1c2e10; border-radius: 8px; padding: 1.2rem 1.6rem; margin-bottom: 1.6rem; display: flex; align-items: center; gap: 12px; }
.huh-sunlight-icon { font-size: 1.8rem; flex-shrink: 0; }
.huh-sunlight-text { font-family: Georgia, serif; font-size: 1.15rem; color: #d4e87a; font-weight: 700; line-height: 1.3; }
.huh-spot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin-bottom: 1.5rem; }
.huh-spot-card { background: #f5f0e8; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.huh-spot-icon { font-size: 1.6rem; }
.huh-spot-name { font-size: .85rem; font-weight: 500; color: #1c2e10; line-height: 1.3; }
.huh-spot-what { font-size: .76rem; color: #5a7a40; line-height: 1.4; }
.huh-dogrun { background: #f0f6e8; border-left: 3px solid #8fb840; border-radius: 0 8px 8px 0; padding: 1.2rem 1.4rem; }
.huh-dogrun-label { font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #8fb840; margin-bottom: .5rem; }
.huh-dogrun-story { font-family: Georgia, serif; font-size: .95rem; font-style: italic; color: #2d4a1a; line-height: 1.65; margin-bottom: .6rem; }
.huh-dogrun-result { font-size: .82rem; color: #3a6614; font-weight: 500; }
 
/* CONTRAST */
.huh-contrast { padding: 2.2rem 2rem; background: #fafaf7; }
.huh-contrast-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.huh-ccard { padding: 1.2rem; border-radius: 8px; border: 1px solid #e0dbd2; }
.huh-ccard-them { background: #fff; }
.huh-ccard-mid { background: #fff8f0; border-color: #f0d8b8; }
.huh-ccard-us { background: #f0f6e8; border-color: #b8d88a; }
.huh-ccard-head { display: flex; align-items: center; gap: 8px; margin-bottom: .9rem; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.huh-ccard-them .huh-ccard-head { color: #aaa; }
.huh-ccard-mid .huh-ccard-head { color: #b07830; }
.huh-ccard-us .huh-ccard-head { color: #3a6614; }
.huh-citem { display: flex; align-items: flex-start; gap: 7px; margin-bottom: .65rem; font-size: .84rem; line-height: 1.45; }
.huh-ccard-them .huh-citem { color: #888; }
.huh-ccard-mid .huh-citem { color: #666; }
.huh-ccard-us .huh-citem { color: #2d4a1a; }
.huh-standout { font-family: Georgia, serif; font-size: .92rem; font-weight: 700; color: #7a4010; font-style: italic; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid #f0d8b8; }
.huh-closer { font-family: Georgia, serif; font-size: .95rem; font-weight: 700; color: #1c2e10; font-style: italic; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid #b8d88a; }
 
/* CATEGORIES */
.huh-categories { padding: 2.2rem 2rem; background: #f5f0e8; }
.huh-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.3rem; }
.huh-cat-card { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e0dbd2; }
.huh-cat-img { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: #f0f6e8; }
.huh-cat-card-medicine .huh-cat-img { background: #1c2e10; }
.huh-cat-body { padding: .8rem 1rem 1rem; }
.huh-cat-name { font-weight: 700; font-size: .87rem; color: #1c2e10; margin-bottom: .3rem; }
.huh-cat-desc { font-size: .76rem; color: #555; line-height: 1.5; }
 
/* PHILOSOPHY TEASER */
.huh-phil-teaser { padding: 2.5rem 2rem; background: #1c2e10; text-align: center; }
.huh-pt-text { font-family: Georgia, serif; font-size: 1.4rem; color: #f5f0e8; font-weight: 700; line-height: 1.35; margin-bottom: .5rem; }
.huh-pt-text em { color: #d4e87a; font-style: normal; }
.huh-pt-sub { font-size: .88rem; color: #7aab5c; font-style: italic; margin-bottom: 1.4rem; }
.huh-pt-btn { display: inline-block; background: #d4e87a; color: #1c2e10; font-size: .88rem; font-weight: 500; padding: 12px 24px; border-radius: 4px; text-decoration: none; }
 
/* STORY */
.huh-story { padding: 2.5rem 2rem; background: #f5f0e8; }
.huh-story-inner { display: grid; grid-template-columns: 80px 1fr; gap: 1.2rem; align-items: start; }
.huh-avatar { width: 80px; height: 80px; border-radius: 50%; background: #c8e088; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 1.6rem; color: #1c2e10; font-weight: 700; flex-shrink: 0; border: 3px solid #8fb840; }
.huh-sname { font-weight: 700; font-size: .95rem; color: #1c2e10; margin-bottom: .1rem; }
.huh-srole { font-size: .75rem; color: #8fb840; margin-bottom: .8rem; }
.huh-stext { font-size: .9rem; color: #444; line-height: 1.75; }
.huh-stext strong { color: #1c2e10; font-weight: 600; }
.huh-scloser { font-family: Georgia, serif; font-size: 1rem; color: #1c2e10; font-weight: 700; margin-top: .8rem; line-height: 1.4; }
.huh-slink { display: inline-flex; align-items: center; gap: 5px; margin-top: .6rem; color: #8fb840; font-size: .8rem; text-decoration: none; }
.huh-gbadge { display: inline-flex; align-items: center; gap: 5px; margin-top: .8rem; background: #1c2e10; color: #d4e87a; font-size: .75rem; padding: 6px 14px; border-radius: 20px; }
 
/* COMMUNITY */
.huh-community { padding: 2.5rem 2rem; background: #fff; }
.huh-comm-headline { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #1c2e10; line-height: 1.2; margin-bottom: .6rem; }
.huh-comm-body { font-size: .92rem; color: #444; line-height: 1.75; margin-bottom: 1.8rem; }
.huh-comm-body strong { color: #1c2e10; }
.huh-comm-closer { background: #1c2e10; border-radius: 8px; padding: 1.6rem 1.8rem; text-align: center; }
.huh-comm-closer-top { font-family: Georgia, serif; font-size: 1.1rem; color: #d4e87a; font-weight: 700; margin-bottom: .5rem; }
.huh-comm-closer-mid { font-size: .85rem; color: #a8c488; margin-bottom: 1.2rem; line-height: 1.5; }
.huh-comm-closer-bottom { font-family: Georgia, serif; font-size: 1.2rem; color: #f5f0e8; font-weight: 700; padding-top: 1rem; border-top: 1px solid #2d4a18; }
.huh-comm-cta { display: flex; gap: .8rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.huh-comm-btn { display: inline-block; background: #d4e87a; color: #1c2e10; font-size: .82rem; font-weight: 500; padding: 10px 18px; border-radius: 4px; text-decoration: none; }
.huh-comm-link { display: inline-flex; align-items: center; gap: 5px; color: #7aab5c; font-size: .82rem; text-decoration: none; padding: 10px 4px; }
 
/* =============================================
   MOBILE RESPONSIVE STYLES
   Applies to screens 768px and smaller
   ============================================= */
 
@media (max-width: 768px) {
 
  /* HERO */
  .huh-hhead {
    font-size: 1.8rem !important;
  }
 
  .huh-hrenv {
    font-size: .88rem !important;
  }
 
  .huh-hsub {
    font-size: .88rem !important;
  }
 
  .huh-hcta {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: .8rem !important;
    text-align: center !important;
  }
 
  .huh-hctag {
    display: block !important;
    text-align: center !important;
  }
 
  .huh-hproof {
    flex-direction: column !important;
    gap: .6rem !important;
  }
 
  /* TRUST BAR */
  .huh-trust {
    flex-direction: column !important;
  }
 
  .huh-tpill {
    border-right: none !important;
    border-bottom: 1px solid #ddd8ce !important;
    padding: .9rem 1.4rem !important;
  }
 
  .huh-tpill:last-child {
    border-bottom: none !important;
  }
 
  /* SHOP CATEGORIES */
  .huh-cat-btn-grid {
    grid-template-columns: 1fr 1fr !important;
  }
 
  /* DEFINITION */
  .huh-def-headline {
    font-size: 1.3rem !important;
  }
 
  .huh-reclaim-row {
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
  }
 
  /* PERMISSION */
  .huh-sunlight-text {
    font-size: .95rem !important;
  }
 
  .huh-spot-grid {
    grid-template-columns: 1fr !important;
  }
 
  /* CONTRAST */
  .huh-st {
    font-size: 1.2rem !important;
  }
 
  /* CATEGORIES */
  .huh-cat-grid {
    grid-template-columns: 1fr !important;
  }
 
  /* PHILOSOPHY */
  .huh-opening {
    font-size: 1.2rem !important;
  }
 
  .huh-turn {
    grid-template-columns: 1fr !important;
  }
 
  .huh-phil-cards {
    grid-template-columns: 1fr !important;
  }
 
  .huh-pt-text {
    font-size: 1.1rem !important;
  }
 
  /* STORY */
  .huh-story-inner {
    grid-template-columns: 1fr !important;
  }
 
  .huh-avatar {
    margin-bottom: .8rem !important;
  }
 
  /* COMMUNITY */
  .huh-comm-headline {
    font-size: 1.3rem !important;
  }
 
  .huh-comm-cta {
    flex-direction: column !important;
    align-items: center !important;
  }
 
  /* CHOICE BLOCK */
  .huh-choice-row {
    gap: .4rem !important;
  }
 
  .huh-choice-item {
    font-size: .9rem !important;
  }
 
}
 
/* =============================================
   SMALL MOBILE — 480px and smaller
   ============================================= */
 
@media (max-width: 480px) {
 
  .huh-hhead {
    font-size: 1.5rem !important;
  }
 
  .huh-hero {
    padding: 2rem 1.2rem 2rem !important;
  }
 
  .huh-def-section,
  .huh-permission,
  .huh-contrast,
  .huh-categories,
  .huh-philosophy,
  .huh-story,
  .huh-community,
  .huh-shop,
  .huh-phil-teaser {
    padding: 1.8rem 1.2rem !important;
  }
 
  .huh-cat-btn-grid {
    grid-template-columns: 1fr !important;
  }
 
  .huh-comm-closer {
    padding: 1.2rem !important;
  }
 
}