/*
 Theme Name:   OceanWP Child - Chaisa Tea
 Theme URI:    https://chaisatea.cloudsmmmarket.com/
 Description:  Custom shop + product grid + product card design
 Author:       Chaisa Tea
 Template:     oceanwp
 Text Domain:  oceanwp-child
 Version:      4.0.0
*/

/* =========================================================
   GLOBAL
   ========================================================= */

.ct-archive,
.ct-archive *{
  box-sizing:border-box;
}

.ct-archive{
  --ct-green:#1B5E3A;
  --ct-green-dark:#124428;
  --ct-cream:#F7F8F4;
  --ct-ink:#141816;
  --ct-muted:#6E7B73;
  --ct-border:rgba(0,0,0,.08);
  --ct-wrap:1350px;
  --ct-bg:white;

  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ct-ink);
  background:
    radial-gradient(1000px 600px at 0% 0%, rgba(237,248,241,.9), transparent 60%),
    radial-gradient(1200px 700px at 100% 0%, rgba(255,247,230,.8), transparent 70%),
    #F7F7F2;
  padding:48px 0 80px;
}

.ct-arch-wrap{
  max-width:var(--ct-wrap);
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   HERO
   ========================================================= */

.ct-arch-hero{
  padding-bottom:26px;
}

.ct-arch-crumb{
  font-size:12px;
  color:var(--ct-muted);
  margin-bottom:10px;
}
.ct-arch-crumb a{
  color:var(--ct-green);
  text-decoration:none;
}
.ct-arch-crumb a:hover{
  text-decoration:underline;
}

.ct-arch-hero-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:start;
}

.ct-arch-kicker{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ct-muted);
}

.ct-arch-title{
  font-size:32px;
  font-weight:700;
  margin:6px 0 10px;
}
.ct-arch-title span{
  color:var(--ct-green);
}

.ct-arch-sub{
  font-size:14px;
  line-height:1.6;
  max-width:520px;
  color:var(--ct-muted);
}

.ct-arch-tags{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ct-tag{
  padding:6px 14px;
  border-radius:999px;
  background:rgba(27,94,58,.08);
  border:1px solid rgba(27,94,58,.18);
  font-size:12px;
  color:var(--ct-green);
}

.ct-arch-badges{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:16px;
}
.ct-badge{
  padding:8px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.ct-badge-label{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ct-green);
}
.ct-badge-text{
  font-size:13px;
}

/* Right brew card */
.ct-arch-hero-card{
  position:relative;
}
.ct-hero-card-inner{
  border-radius:20px;
  padding:22px 20px;
  background:
    radial-gradient(500px 300px at 0% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(500px 300px at 100% 100%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg,#1B5E3A,#124428);
  color:#fff;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.ct-hero-small{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.8;
}
.ct-hero-heading{
  margin:8px 0 10px;
  font-size:18px;
}
.ct-hero-steps{
  list-style:none;
  padding:0;
  margin:12px 0;
}
.ct-hero-steps li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  margin:4px 0;
}
.ct-hero-steps li span{
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
.ct-hero-note{
  font-size:12px;
  opacity:.85;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.ct-arch-toolbar{
  margin-bottom:16px;
}

.ct-arch-toolbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 18px;
  background:#ffffff;
  border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.03);
}

.ct-filter-toggle{
  border:none;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(27,94,58,.10);
  color:var(--ct-green);
  font-size:13px;
  cursor:pointer;
}

.ct-toolbar-chips{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ct-chip{
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  background:#F2F3EE;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--ct-ink);
}
.ct-chip:hover{
  background:rgba(27,94,58,.08);
  border-color:rgba(27,94,58,.25);
  color:var(--ct-green);
}

.ct-toolbar-sort{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
}
.ct-toolbar-sort .woocommerce-result-count{
  margin:0;
  color:var(--ct-muted);
}
.ct-toolbar-sort .woocommerce-ordering{
  margin:0;
}
.ct-toolbar-sort select{
  border-radius:999px;
  padding:6px 12px;
  border:1px solid rgba(0,0,0,.12);
  font-size:12px;
  background:#fff;
}

/* =========================================================
   FILTER PANEL
   ========================================================= */

.ct-arch-filter-panel{
  display:none;
  padding:14px 0;
}
.ct-arch-filter-panel.is-open{
  display:block;
}

.ct-arch-filter-grid{
  border-radius:20px;
  background:#ffffff;
  padding:18px 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 32px rgba(0,0,0,.06);
}

.ct-filter-col h3{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ct-muted);
  margin-bottom:8px;
}

.ct-filter-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ct-filter-list li{
  font-size:13px;
  padding:4px 0;
}

/* =========================================================
   PRODUCT GRID (4-3-2-1)
   ========================================================= */

.ct-arch-grid{
  margin-top:20px;
}

.ct-arch-grid ul.products{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.ct-arch-grid ul.products::before,
.ct-arch-grid ul.products::after{
  display:none !important;
}

.ct-arch-grid ul.products li.product{
  float:none !important;
  margin:0 !important;
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.ct-prod-card{
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 12px 24px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ct-prod-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.10);
  border-color:rgba(27,94,58,.25);
}

/* Thumbnail with hover gallery */
.ct-prod-media{
  display:block;
}

.ct-prod-thumb-wrap{
  position:relative;
  height:210px;
  background:#F3F6F1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ct-prod-thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .25s ease, transform .25s ease;
}

.ct-main-img{
  position:relative;
  z-index:1;
}
.ct-hover-img{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:2;
}
.ct-prod-card:hover .ct-main-img{
  transform:scale(1.03);
}
.ct-prod-card:hover .ct-hover-img{
  opacity:1;
}

/* Discount badge */
.ct-discount-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;                      /* <— important */

  background:#ffffff;
  color:#E53935;
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}


/* Body */
.ct-prod-body{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Top line: category + size */
.ct-prod-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.ct-prod-cat{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ct-muted);
}
.ct-prod-cat a{
  color:inherit;
  text-decoration:none;
}

.ct-prod-size{
  font-size:11px;
  padding:3px 8px;
  background:#F2F4F0;
  border-radius:999px;
  color:var(--ct-ink);
}

/* Title */
.ct-prod-title{
  font-size:15px;
  font-weight:600;
  margin:0;
}
.ct-prod-title a{
  color:var(--ct-ink);
  text-decoration:none;
}
.ct-prod-title a:hover{
  color:var(--ct-green);
}

/* Price + rating */
.ct-prod-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.ct-prod-price{
  font-size:14px;
}

/* MRP + discounted price colors */
.ct-prod-price del{
  color:#A5ADA8;
  font-size:12px;
  margin-right:4px;
}
.ct-prod-price ins{
  color:var(--ct-green);
  font-weight:700;
  font-size:16px;
  text-decoration:none;
}

/* Rating */
.ct-prod-rating{
  font-size:12px;
}

/* Footer */
.ct-prod-footer{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ct-prod-note{
  font-size:11px;
  color:var(--ct-muted);
}

.ct-prod-cta .button{
  width:100%;
  text-align:center;
  font-size:13px;
  border-radius:999px;
  padding:8px 14px;
  background:var(--ct-green);
  color:white;
  border:none;
}
.ct-prod-cta .button:hover{
  background:var(--ct-green-dark);
}

/* =========================================================
   PAGINATION
   ========================================================= */

.ct-arch-pagination{
  margin-top:26px;
  display:flex;
  justify-content:center;
}

.ct-arch-pagination .woocommerce-pagination ul.page-numbers{
  list-style:none;
  display:flex;
  gap:8px;
  margin:0;
  padding:0;
}

.ct-arch-pagination .woocommerce-pagination li{
  margin:0;
}

.ct-arch-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  color:var(--ct-ink);
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
}
.ct-arch-pagination .page-numbers.current{
  background:var(--ct-green);
  color:#fff;
  border-color:var(--ct-green);
}
.ct-arch-pagination .page-numbers:hover:not(.current){
  border-color:var(--ct-green);
  color:var(--ct-green);
}

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

@media (max-width:1200px){
  .ct-arch-grid ul.products{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:900px){
  .ct-arch-hero-grid{
    grid-template-columns:1fr;
  }
  .ct-arch-hero-card{
    order:-1;
  }
  .ct-arch-grid ul.products{
    grid-template-columns:repeat(2,1fr);
  }
  .ct-arch-filter-grid{
    grid-template-columns:1fr;
  }
  .ct-arch-toolbar-inner{
    flex-direction:column;
    align-items:flex-start;
    border-radius:18px;
  }
}

@media (max-width:600px){
  .ct-arch-wrap{
    padding:0 16px;
  }
  .ct-arch-title{
    font-size:26px;
  }
  .ct-arch-grid ul.products{
    grid-template-columns:1fr;
  }
  .ct-toolbar-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .ct-toolbar-chips::-webkit-scrollbar{
    height:3px;
  }
  .ct-toolbar-chips::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.15);
    border-radius:999px;
  }
}
/* ============================================================
   CUSTOM SORT DROPDOWN — FINAL CLEAN VERSION
   ============================================================ */

/* Hide native select completely (but keep functional for Woo) */
.ct-toolbar-sort .woocommerce-ordering select.ct-sort-native-hidden{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
}

/* Ensure only our elements remain visible */
.ct-toolbar-sort .woocommerce-ordering.ct-sort-enhanced{
  position:relative;
  display:inline-block;
}

/* Hide every child inside Woo ordering EXCEPT:
   - our button (ct-sort-display)
   - our dropdown list (ct-sort-list)
   - the hidden native select */
.ct-toolbar-sort .woocommerce-ordering.ct-sort-enhanced 
  > *:not(.ct-sort-display):not(.ct-sort-list):not(select){
    display:none !important;
}

/* ============================================================
   Custom pill button
   ============================================================ */
.ct-sort-display{
  position:relative;
  display:inline-flex;
  align-items:center;

  padding:8px 32px 8px 14px;
  border-radius:999px;

  background:#FFFFFF;
  border:1px solid rgba(27,94,58,.35);
  box-shadow:0 4px 10px rgba(0,0,0,.06);

  font-family:'Poppins', sans-serif;
  font-size:12px;
  font-weight:500;
  color:#1A1E1C;

  cursor:pointer;
  outline:none;
}

/* Green arrow */
.ct-sort-display::after{
  content:"▾";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#1B5E3A;
}

/* Hover effect */
.ct-sort-display:hover{
  border-color:#1B5E3A;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}

/* ============================================================
   Dropdown list panel
   ============================================================ */
.ct-sort-list{
  position:absolute;
  right:0;
  top:calc(100% + 6px);

  min-width:210px;
  background:#FFFFFF;

  list-style:none;
  margin:0;
  padding:6px 0;

  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.18);

  display:none;
  z-index:50;
}

.ct-sort-list.is-open{
  display:block;
}

/* Options */
.ct-sort-list li{
  padding:7px 14px;
  font-size:13px;
  font-family:'Poppins', sans-serif;
  color:#1A1E1C;
  cursor:pointer;
  white-space:nowrap;
}

/* Hover */
.ct-sort-list li:hover{
  background:#F3F6F1;
  color:#1B5E3A;
}

/* Active selected option */
.ct-sort-list li.is-active{
  background:rgba(27,94,58,.07);
  color:#1B5E3A;
  font-weight:600;
}
/* Sticky toolbar under header on desktop */
@media (min-width: 901px){
  .ct-arch-toolbar{
    position:sticky;
    top:105px;           /* adjust if your header is taller/shorter */
    z-index:30;
  }
}
/* Make desktop Filters button non-clickable */
.ct-filter-static{
  pointer-events:none !important;
  cursor:default !important;
  opacity:1;
}

/* Remove hover pointer from desktop version */
@media (min-width: 901px){
  .ct-filter-static:hover{
    background-color:#F0F4F0; /* optional subtle hover */
  }
}
/* Hide toolbar for mobile */
@media (max-width: 768px){
    .ct-arch-toolbar{
        display:none !important;
    }
}
/* =============== CHAI HERO (SECTION 1) =============== */

.chai-landing-product,
.chai-landing-product *{
  box-sizing:border-box;
}

.chai-landing-product{
  --ct-green:#194A33;
  --ct-green-dark:#0f2d1f;
  --ct-cream:#F9F3E8;
  --ct-paper:#ffffff;
  --ct-ink:#181E18;
  --ct-muted:#6B7A72;
  --ct-radius-lg:26px;
  --ct-radius-md:18px;
  --ct-radius-pill:999px;
  --ct-shadow-lg:0 24px 60px rgba(0,0,0,.18);
  --ct-shadow-md:0 16px 40px rgba(0,0,0,.12);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* container */
.ct-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* HERO background */
.ct-hero-sec{
  position:relative;
  padding:24px 0 60px;
  background:url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-DEKSTOP-BG-4.webp') center/cover no-repeat;
}
@media (max-width:768px){
  .ct-hero-sec{
    padding:16px 0 40px;
    background:url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-MOB-BG-2.webp') center/cover no-repeat;
  }
}


/* top strip */
.ct-hero-offer-bar{
  position:relative;
  z-index:1;
  background:#0E7B36;
  color:#ffffff;
  text-align:center;
  padding:6px 0;
}
.ct-hero-offer-bar p{
  margin:0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* grid wrapper */
.ct-hero-wrap{
  position:relative;
  z-index:1;
  margin-top:22px;
}
.ct-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr);
  gap:32px;
  align-items:flex-start;
}
@media (max-width:960px){
  .ct-hero-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* LEFT: gallery */
.ct-hero-media{
  background:var(--ct-paper);
  border-radius:var(--ct-radius-lg);
  padding:18px 18px 14px;
  box-shadow:var(--ct-shadow-lg);
  border:1px solid rgba(0,0,0,.05);
}
.ct-hero-main{
  border-radius:22px;
  overflow:hidden;
}
.ct-hero-main-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:22px;
}
.ct-hero-thumbs{
  margin-top:12px;
  padding:6px 8px;
  border-radius:30px;
  background:rgba(0,0,0,.05);
  display:flex;
  gap:8px;
  overflow-x:auto;
}
.ct-thumb-btn{
  border:none;
  padding:0;
  background:transparent;
  flex:0 0 64px;
  max-width:64px;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ct-thumb-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ct-thumb-btn.is-active{
  box-shadow:0 0 0 2px #ffffff, 0 0 0 4px var(--ct-green);
}
.ct-thumb-btn:hover{
  transform:translateY(-1px);
}

/* RIGHT card */
.ct-hero-content{
  background:var(--ct-paper);
  border-radius:var(--ct-radius-lg);
  padding:24px 26px 22px;
  box-shadow:var(--ct-shadow-lg);
  border:1px solid rgba(0,0,0,.05);
}

/* rating pill */
.ct-rating-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,201,76,.26);
  font-size:12px;
  margin-bottom:10px;
}
.ct-rating-stars .star-rating{
  margin:0;
}
.ct-rating-text{
  font-weight:500;
}

/* small kicker */
.ct-hero-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ct-green);
  margin-bottom:6px;
}

/* title + subtitle */
.ct-hero-title{
  font-size:32px;
  line-height:1.2;
  margin:0 0 6px;
  color:var(--ct-green-dark);
}
.ct-hero-subtitle{
  margin:0 0 10px;
  font-size:15px;
  color:var(--ct-muted);
}

/* bullet list */
.ct-hero-bullets{
  list-style:none;
  margin:0 0 10px;
  padding:0;
}
.ct-hero-bullets li{
  display:flex;
  gap:6px;
  align-items:flex-start;
  font-size:13px;
  color:var(--ct-ink);
  margin-bottom:4px;
}
.ct-hero-bullets i{
  color:#1FA94F;
  margin-top:2px;
}

/* flavour meta line */
.ct-hero-meta{
  font-size:13px;
  color:var(--ct-green);
  font-weight:500;
  margin:2px 0 10px;
}

/* CTA block */
.ct-hero-cta-block{
  margin-top:6px;
  padding:12px 14px 10px;
  border-radius:22px;
  background:linear-gradient(135deg,#F9F3E8,#FFFFFF);
  box-shadow:var(--ct-shadow-md);
}

/* price */
.ct-hero-price .price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:0 0 10px;
}
.ct-hero-price .price del{
  font-size:13px;
  color:var(--ct-muted);
}
.ct-hero-price .price ins{
  text-decoration:none;
  font-size:26px;
  font-weight:700;
  color:#1FA94F;
}

/* cart row */
.ct-hero-cart form.cart{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:stretch;
}

/* quantity pill */
.ct-hero-cart .quantity,
.ct-hero-cart .quantity *{
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.ct-hero-cart .quantity{
  display:flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.16) !important;
  background:#F9F3E8 !important;
  padding:4px 10px;
}
.ct-hero-cart .quantity .qty{
  width:50px;
  text-align:center;
  font-size:14px;
  -moz-appearance:textfield;
}
.ct-hero-cart .quantity .qty::-webkit-inner-spin-button,
.ct-hero-cart .quantity .qty::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* add to cart */
.ct-hero-cart .single_add_to_cart_button{
  flex:1;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,#0F7C3A 0%,#0C5D2B 70%,#0A4C23 100%);
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  font-weight:600;
  padding:10px 18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 16px 40px rgba(9,61,29,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ct-hero-cart .single_add_to_cart_button::after{
  content:"\f061";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:12px;
}
.ct-hero-cart .single_add_to_cart_button:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 50px rgba(9,61,29,.7);
}

/* mobile adjustments */
@media (max-width:768px){
  .ct-hero-content{
    padding:18px 16px 18px;
  }
  .ct-hero-title{
    font-size:24px;
  }
  .ct-hero-price .price ins{
    font-size:22px;
  }
  .ct-hero-cart form.cart{
    flex-direction:column;
  }
  .ct-hero-cart .single_add_to_cart_button{
    width:100%;
  }
}

/* ================= AFTER HERO WRAPPER ================= */

.ct-after-hero{
  padding:40px 0 60px;
  background:#fff;
}
.ct-tabs-wrap{
  margin-bottom:40px;
}

/* you can style tabs/related later section-by-section */
/* ================= HERO TWEAKS ================= */

/* Price row: price + save badge on one line */
.ct-hero-price{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

/* Make sure NO theme default colours leak in */
.ct-hero-price .price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:0;
}
.ct-hero-price .price del,
.ct-hero-price .price del .amount{
  font-size:13px;
  color:var(--ct-muted) !important;
}
.ct-hero-price .price ins,
.ct-hero-price .price ins .amount{
  text-decoration:none;
  font-size:26px;
  font-weight:700;
  color:#1FA94F !important;
}

/* Save badge */
.ct-save-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  background:#FFEBD8;
  border:1px solid rgba(214,125,37,.18);
  font-size:11px;
  font-weight:600;
  color:#A45A11;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ct-save-badge .ct-save-amount .amount{
  font-weight:700;
}
.ct-save-badge .ct-save-percent{
  font-weight:700;
}

/* Flavour line as a pill badge */
.ct-hero-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(25,74,51,.06);
  color:var(--ct-green-dark);
  font-size:12px;
  font-weight:500;
  margin:4px 0 10px;
}
.ct-hero-meta::before{
  content:"\f5c4"; /* mug-hot icon */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:11px;
  color:var(--ct-green);
}

/* Mobile: qty + button on one row */
@media (max-width:768px){
  .ct-hero-cart form.cart{
    flex-direction:row;     /* keep in one row */
    flex-wrap:wrap;
  }
  .ct-hero-cart .quantity{
    flex:0 0 38%;
  }
  .ct-hero-cart .single_add_to_cart_button{
    flex:1;
    width:auto;             /* no forced full-width */
  }
}
/* ============ MOBILE HERO OVERFLOW FIX ============ */
@media (max-width: 768px){

  /* Make sure every hero wrapper is locked to viewport width */
  .chai-landing-product,
  .ct-hero-sec,
  .ct-wrap,
  .ct-hero-wrap,
  .ct-hero-grid,
  .ct-hero-media,
  .ct-hero-content{
    max-width:100%;
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  /* Grid: single column, no chance to exceed width */
  .ct-hero-grid{
    display:block;
  }

  /* Cards: full-width blocks */
  .ct-hero-media,
  .ct-hero-content{
    border-radius:20px;
    padding-left:16px;
    padding-right:16px;
    box-sizing:border-box;
  }

  /* Thumbnails: keep scroll inside, not page-level */
  .ct-hero-thumbs{
    max-width:100%;
    overflow-x:auto;
  }

  /* Cart row: never push wider than screen */
  .ct-hero-cart form.cart{
    width:100%;
    max-width:100%;
    gap:8px;
    flex-wrap:wrap;
  }
  .ct-hero-cart .quantity{
    flex:0 0 40%;
  }
  .ct-hero-cart .single_add_to_cart_button{
    flex:1 1 60%;
  }

  /* Absolute safety: hero cannot create horizontal scroll */
  .ct-hero-sec{
    overflow-x:hidden;
  }
}
/* =========================================================
   MOBILE — Fix spacing + align qty + button in one row
   ========================================================= */
@media (max-width: 768px){

  /* Add visible gap between gallery card and product details card */
  .ct-hero-media{
    margin-bottom:22px !important;
  }

  /* Fix layout so product content card doesn't stick directly underneath thumbnail bar */
  .ct-hero-content{
    margin-top:10px;
  }

  /* ---- Quantity + Add to Cart in One Row ---- */
  .ct-hero-cart form.cart{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
    width:100%;
  }

  .ct-hero-cart .quantity{
    flex:0 0 34% !important;
    min-width:100px;
  }

  .ct-hero-cart .single_add_to_cart_button{
    flex:1 1 auto !important;
    width:auto !important;
  }
}

/* Extra fix for very small screens (≤480px): tighter layout */
@media (max-width: 480px){
  .ct-hero-cart form.cart{
    gap:6px;
  }

  .ct-hero-cart .quantity{
    flex:0 0 38% !important;
  }
}
/* ========= MOBILE: Compact Qty + Button to fit One Row ========= */
@media (max-width: 768px){

  /* Smaller quantity pill */
  .ct-hero-cart .quantity{
    flex:0 0 28% !important;
    padding:2px 6px !important;
    border-radius:20px !important;
  }
  .ct-hero-cart .quantity .qty{
    width:38px !important;
    font-size:13px !important;
  }
  .ct-hero-cart .quantity button{
    font-size:12px !important;
  }

  /* Smaller Add-to-Cart button */
  .ct-hero-cart .single_add_to_cart_button{
    padding:10px 14px !important;
    font-size:12px !important;
    letter-spacing:0.08em !important;
    border-radius:22px !important;
    white-space:nowrap;
  }
  .ct-hero-cart .single_add_to_cart_button::after{
    font-size:10px !important;
  }

  /* Tighter spacing */
  .ct-hero-cart form.cart{
    gap:8px !important;
  }
}

/* Extra compact mode for very small screens */
@media (max-width: 480px){
  .ct-hero-cart .quantity{
    flex:0 0 32% !important;
  }
  .ct-hero-cart .single_add_to_cart_button{
    flex:1;
  }
}

/* =========================================
   BENEFIT SECTION — LIGHT / CREAM THEME
=========================================*/
.ct-benefits-sec{
  position:relative;
  padding:80px 0 90px;
  text-align:center;
  color:#123222;
  background:
    linear-gradient(180deg,#FAFBF7 0%,#F6FAF4 40%,#F3F7F2 100%),
    url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-DEKSTOP-BG-8.webp') center/cover no-repeat;
  overflow:hidden;
}
@media (max-width:768px){
  .ct-benefits-sec{
    padding:60px 0 70px;
    background:
      linear-gradient(180deg,#FAFBF7 0%,#F6FAF4 45%,#F2F7F1 100%),
      url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-MOB-BG-6.webp') center/cover no-repeat;
  }
}



.ct-benefits-sec .ct-wrap{
  position:relative;
  z-index:2;
}

/* heading */
.ct-benefits-title{
  font-size:32px;
  font-weight:700;
  margin:0 0 28px;
  line-height:1.3;
  color:#123222;
}
@media(max-width:768px){
  .ct-benefits-title{
    font-size:24px;
    margin-bottom:22px;
  }
}

/* grid */
.ct-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px 22px;
  max-width:1100px;
  margin:0 auto;
}
@media(max-width:900px){
  .ct-benefits-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media(max-width:640px){
  .ct-benefits-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* light cards */
.ct-benefit-card{
  text-align:center;
  padding:22px 20px 20px;
  border-radius:20px;
  background:#FFFFFF;
  border:1px solid rgba(23,68,39,.06);
  box-shadow:0 10px 26px rgba(15,63,35,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ct-benefit-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(15,63,35,.15);
  border-color:rgba(23,68,39,.18);
}

/* icon pill — light green */
.ct-benefit-icon{
  width:62px;
  height:62px;
  margin:0 auto 12px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%, #FFFFFF, #F6FDF7),
    radial-gradient(circle at 70% 80%, #B8EAC7, #5AAE6F);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(24,94,54,.25);
}
.ct-benefit-icon img{
  width:32px;
  height:32px;
  object-fit:contain;
}

/* text */
.ct-benefit-card h3{
  font-size:17px;
  font-weight:600;
  margin:6px 0 4px;
  color:#17422A;
}
.ct-benefit-card p{
  font-size:14px;
  line-height:1.6;
  max-width:270px;
  margin:0 auto;
  color:#486858;
  opacity:.95;
}

@media(max-width:480px){
  .ct-benefit-card{
    padding:20px 18px 18px;
  }
  .ct-benefit-card p{
    font-size:13px;
  }
}
/* ========= FINAL FIX — PERFECT MOBILE CENTER & NO TOUCHING ========= */
@media (max-width: 768px){

  .ct-benefits-sec{
    padding:44px 0 52px;
    background:
      linear-gradient(180deg,#FAFBF7 0%,#F6FAF4 45%,#F2F7F1 100%),
      url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-MOB-BG-6.webp')
      center/cover no-repeat;
    overflow-x:hidden; /* prevents overflow scroll */
    text-align:center;
  }

  /* Container padding balanced left/right */
  .ct-benefits-sec .ct-wrap{
    max-width:480px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px; /* right side safe space ensured */
    box-sizing:border-box;
  }

  /* Single column layout */
  .ct-benefits-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    width:100%;
    max-width:100%;
    justify-items:center;
    overflow:hidden;
  }

  /* CARD — ensure perfect center and safe spacing */
  .ct-benefit-card{
    width:100%;
    max-width:340px;
    padding:20px 18px;
    margin:0 auto;
    box-sizing:border-box;
  }

  .ct-benefit-card h3{ font-size:15px; }
  .ct-benefit-card p{ font-size:13px; }
}



/* =========================================
   COMPARISON SECTION — DESKTOP
=========================================*/
.ct-compare-sec{
  padding:80px 0 90px;
  background:#F5FBEF; /* pale green like reference */
  color:#14251A;
}

.ct-compare-sec .ct-wrap{
  max-width:960px;
  margin:0 auto;
  padding:0 16px;
  box-sizing:border-box;
}

/* Heading & subtitle */
.ct-compare-title{
  font-size:30px;
  font-weight:700;
  text-align:center;
  margin:0 0 8px;
}
.ct-compare-subtitle{
  text-align:center;
  font-size:14px;
  line-height:1.6;
  max-width:540px;
  margin:0 auto 26px;
  color:#6C7B6E;
}

/* Card around table + CTA */
.ct-compare-card{
  max-width:820px;
  margin:0 auto;
}

/* Table base */
.ct-compare-table{
  position:relative;
  background:#FFFFFF;
  border-radius:18px;
  box-shadow:0 20px 45px rgba(8,60,30,.14);
  overflow:hidden;
  border:1px solid rgba(12,74,40,.10);
}

/* 3-column grid each row */
.ct-compare-head,
.ct-compare-row{
  display:grid;
  grid-template-columns:1.6fr 1.1fr 1.1fr;
}

/* Header row */
.ct-compare-head{
  font-size:14px;
  font-weight:600;
  color:#13251A;
  background:linear-gradient(180deg,#F7FBF2 0%,#F1F7EB 100%);
}
.ct-compare-head > div{
  padding:10px 18px;
}
.ct-compare-head .ct-cell-our,
.ct-compare-head .ct-cell-other{
  text-align:center;
}

/* Body rows */
.ct-compare-row{
  font-size:14px;
  align-items:center;
}
.ct-compare-row > div{
  padding:11px 18px;
}
.ct-compare-row:nth-child(odd){
  background:#FFFFFF;
}
.ct-compare-row:nth-child(even){
  background:#F8FBF5;  /* alternating stripe */
}

/* Feature column */
.ct-cell-feature{
  text-align:left;
  font-weight:500;
  color:#182F1F;
}

/* Our column text */
.ct-cell-our{
  text-align:center;
  color:#1A7E3B; /* green like ticks */
  font-weight:600;
}

/* Other column text */
.ct-cell-other{
  text-align:center;
  color:#D6433B; /* red like crosses / Often Bitter */
  font-weight:600;
}

/* Highlight middle column with border around all cells */
.ct-compare-table::before{
  content:"";
  position:absolute;
  top:38px;       /* under header label */
  bottom:10px;
  left:calc( (1.6 / (1.6 + 1.1 + 1.1)) * 100% );
  right:calc( (1.1 / (1.6 + 1.1 + 1.1)) * 100% );
  border:2px solid rgba(11,102,45,.9);
  border-radius:14px;
  pointer-events:none;
}

/* CTA bar (desktop) */
.ct-compare-cta-wrap{
  margin-top:26px;
  text-align:center;
}

.ct-compare-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 40px;
  min-width:280px;
  border-radius:999px;
  border:none;
  background:linear-gradient(90deg,#0F8A3B 0%,#0A5A2D 100%);
  color:#FFFFFF;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(4,69,32,.45);
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

/* Hover / active */
.ct-compare-cta:hover{
  background:linear-gradient(90deg,#10A243 0%,#0A5A2D 100%);
  transform:translateY(-1px);
  box-shadow:0 22px 46px rgba(4,69,32,.55);
  filter:brightness(1.03);
}
.ct-compare-cta:active{
  transform:translateY(1px);
  box-shadow:0 10px 26px rgba(4,69,32,.45);
}

/* =========================================
   COMPARISON SECTION — MOBILE (CARD VIEW)
=========================================*/
@media (max-width: 768px){

  .ct-compare-sec{
    padding:44px 0 50px;
  }

  .ct-compare-sec .ct-wrap{
    padding:0 16px;
    box-sizing:border-box;
  }

  .ct-compare-title{
    font-size:22px;
    margin-bottom:10px;
  }

  .ct-compare-subtitle{
    font-size:13px;
    margin:0 auto 20px;
  }

  /* Narrower card wrapper */
  .ct-compare-card{
    max-width:480px;
    margin:0 auto;
  }

  /* Table becomes stack of cards */
  .ct-compare-table{
    background:transparent;
    border:none;
    box-shadow:none;
    border-radius:0;
    overflow:visible;
    position:relative;
  }

  /* Hide desktop header + middle outline */
  .ct-compare-head{
    display:none;
  }
  .ct-compare-table::before{
    display:none;
  }

  /* Each row = one card */
  .ct-compare-row{
    display:block;
    margin-bottom:14px;
    border-radius:16px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 12px 28px rgba(8,60,30,.12);
    border:1px solid rgba(12,74,40,.10);
    font-size:13px;
  }

  .ct-compare-row > div{
    padding:10px 14px;
  }

  /* Feature label on top strip */
  .ct-cell-feature{
    background:#F5FBEF;
    font-weight:600;
    color:#182F1F;
    border-bottom:1px solid rgba(12,74,40,.06);
    text-align:left;
  }

  /* Our / Other lines with inline labels */
  .ct-cell-our,
  .ct-cell-other{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-align:left;
  }

  .ct-cell-our::before,
  .ct-cell-other::before{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    opacity:.85;
    white-space:nowrap;
  }

  .ct-cell-our::before{
    content:"Chaisa Tea";
    color:#166534;
  }

  .ct-cell-other::before{
    content:"Regular Chai";
    color:#B91C1C;
  }

  .ct-cell-our,
  .ct-cell-other{
    font-size:13px;
  }

  /* CTA: full-width but not overflowing */
  .ct-compare-cta-wrap{
    margin-top:22px;
    text-align:center;
  }

  .ct-compare-cta{
    width:100%;
    max-width:320px;
    padding:12px 24px;
    font-size:13px;
    margin:0 auto;
    display:inline-flex;
    box-sizing:border-box;
  }
}

/* Extra small phones */
@media (max-width: 480px){
  .ct-compare-sec .ct-wrap{
    padding:0 14px;
  }
  .ct-compare-title{
    font-size:20px;
  }
  .ct-compare-row{
    border-radius:14px;
  }
  .ct-compare-cta{
    max-width:100%;
    font-size: 12px;
  }
}



/* =============== HOW IT WORKS / BREW SECTION =============== */

.ct-how-sec,
.ct-how-sec * {
  box-sizing: border-box;
}

.ct-how-sec {
  position: relative;
  padding: 80px 0 90px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: #123321;
  background:
    url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-DEKSTOP-BG-5.webp')
    center top / cover no-repeat;
}

@media (max-width: 768px) {
  .ct-how-sec {
    padding: 56px 0 70px;
    background:
      url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-MOB-BG-3.webp')
      center top / cover no-repeat;
  }
}



.ct-how-wrap {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 1;
}

.ct-how-head {
  text-align: center;
  margin-bottom: 40px;
}

.ct-how-title {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: #1c2d18;
  margin: 0;
}

/* GRID */

.ct-how-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}

.ct-how-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Steps */

.ct-how-step {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 14px;
  align-items: flex-start;
}

.ct-how-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3fbf4;
  border: 1px solid rgba(8,107,53,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #0b6a36;
  box-shadow: 0 6px 16px rgba(4,79,36,.18);
}

.ct-how-step-text h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #183320;
}

.ct-how-step-text p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  color: #4b6654;
}

/* Center packet */

.ct-how-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-how-pack {
  background: radial-gradient(circle at 50% 0, rgba(255,255,255,.9) 0, rgba(255,255,255,.6) 45%, transparent 70%);
  padding: 24px 26px 18px;
  border-radius: 26px;
  box-shadow:
    0 20px 45px rgba(7,52,26,.32),
    0 0 0 1px rgba(255,255,255,.8);
}

.ct-how-pack img {
  display: block;
  max-width: 220px;
  border-radius: 14px;
}

/* CTA BAR */

.ct-how-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 14px 18px 14px 24px;
  box-shadow: 0 16px 40px rgba(7,43,24,.12);
  border: 1px solid rgba(10,98,51,.08);
}

.ct-how-cta-msg span {
  font-size: 14px;
  color: #294632;
}

/* CTA BUTTON (rounded, gradient, hover) */

.ct-how-cta-btn {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, #0f8f40 0%, #0b5c2f 100%);
  box-shadow: 0 12px 26px rgba(6,96,45,.5);
  transform: translateY(0);
  transition:
    box-shadow .2s ease,
    transform .2s ease,
    background .25s ease;
}

.ct-how-cta-btn .ct-how-cta-arrow {
  font-size: 15px;
}

.ct-how-cta-btn:hover {
  background: linear-gradient(90deg, #11a247 0%, #0f6b37 100%);
  box-shadow: 0 18px 40px rgba(5,84,40,.55);
  transform: translateY(-1px);
}

.ct-how-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(5,84,40,.45);
}

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

@media (max-width: 900px) {
  .ct-how-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .ct-how-center {
    order: -1;
  }

  .ct-how-pack img {
    max-width: 210px;
    margin: 0 auto;
  }

  .ct-how-cta-bar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 22px;
    padding: 14px 16px 16px;
  }

  .ct-how-cta-btn {
    justify-content: center;
    width: 100%;
  }

  .ct-how-title {
    font-size: 22px;
  }
}
/* ---- MAKE EACH STEP A CARD ---- */

/* base layout stays same, now styled as card */
.ct-how-step{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:flex-start;

  padding:14px 18px 14px 12px;
  margin:0;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(10,90,47,.06);
  box-shadow:0 14px 30px rgba(10,60,32,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ct-how-step:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px rgba(10,60,32,.16);
  border-color:rgba(10,90,47,.18);
}

/* number badge a bit larger & more “floating” */
.ct-how-step-circle{
  width:40px;
  height:40px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%, #ffffff, #f3fbf4);
  border:1px solid rgba(8,107,53,.16);
  box-shadow:0 8px 18px rgba(4,79,36,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  color:#0b6a36;
}

/* tighten text inside card */
.ct-how-step-text h3{
  margin:0 0 4px;
  font-size:15px;
  font-weight:600;
}
.ct-how-step-text p{
  margin:0;
  font-size:13px;
  line-height:1.55;
}

/* mobile: cards full-width, softer shadow */
@media (max-width:768px){
  .ct-how-col{
    gap:16px;
  }
  .ct-how-step{
    padding:12px 16px 12px 12px;
    box-shadow:0 10px 24px rgba(10,60,32,.12);
  }
}
/* ================= MOBILE OPTIMIZATION — HOW TO BREW ================= */
@media (max-width: 900px){

  /* overall padding & width */
  .ct-how-wrap{
    padding:0 16px;
  }

  /* stack: image first, then all steps */
  .ct-how-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:28px;
  }

  .ct-how-center{
    order:-1;
    justify-content:center;
  }

  .ct-how-pack{
    margin:0 auto;
    padding:18px 18px 14px;
    border-radius:22px;
  }

  .ct-how-pack img{
    max-width:220px;
  }

  /* steps full-width cards */
  .ct-how-col{
    gap:14px;
  }

  .ct-how-step{
    grid-template-columns:40px minmax(0,1fr);
    padding:12px 14px 12px 12px;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(10,60,32,.12);
  }

  .ct-how-step-circle{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .ct-how-step-text h3{
    font-size:14px;
    margin-bottom:3px;
  }

  .ct-how-step-text p{
    font-size:12px;
    line-height:1.5;
  }

  /* title a bit smaller */
  .ct-how-title{
    font-size:22px;
  }

  /* CTA bar: stacked, full-width button */
  .ct-how-cta-bar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    border-radius:20px;
    padding:12px 14px 14px;
  }

  .ct-how-cta-msg{
    text-align:center;
  }

  .ct-how-cta-msg span{
    font-size:13px;
  }

  .ct-how-cta-btn{
    width:100%;
    justify-content:center;
    padding:11px 20px;
    font-size:13px;
  }
}

@media (max-width: 480px){
  .ct-how-title{
    font-size:20px;
  }
}
/* ================= REVIEWS SECTION ================= */

.ct-reviews-sec {
  background:#F6FAF3;
  padding:80px 0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.ct-reviews-sec .ct-wrap {
  max-width:1150px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* ---- Heading ---- */

.ct-review-head {
  text-align:center;
  margin-bottom:48px;
}

.ct-review-head .ct-stars i {
  color:#F4B000;
  font-size:18px;
}

.ct-review-sub {
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  margin:6px 0 10px;
  color:#3d4b43;
  text-transform:uppercase;
}

.ct-review-title {
  font-size:34px;
  font-weight:700;
  color:#1a361e;
  margin:0;
}

/* ---- Grid + Cards ---- */

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

.ct-review-card {
  background:#ffffff;
  border-radius:16px;
  padding:22px 22px 24px;
  text-align:left;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 14px 28px rgba(0,0,0,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}

.ct-review-card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(0,0,0,.09);
}

.ct-stars-row {
  margin-bottom:10px;
}

.ct-stars-row i {
  color:#F4B000;
  font-size:17px;
}

/* headline in card */
.ct-review-card h3 {
  font-size:16px;
  font-weight:700;
  margin:0 0 10px;
  color:#1c301e;
}

.ct-review-text {
  font-size:14px;
  line-height:1.55;
  color:#4f5c55;
  margin:0 0 18px;
}

/* user row */

.ct-review-user {
  display:flex;
  align-items:center;
  gap:12px;
}

.ct-review-user img {
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
}

.ct-name {
  display:block;
  font-size:14px;
  font-weight:700;
  color:#15301a;
}

.ct-role {
  display:block;
  font-size:12px;
  color:#73907b;
}

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

/* tablet: 2 cards per row */
@media (max-width: 992px) {
  .ct-reviews-sec {
    padding:60px 0;
  }

  .ct-review-title {
    font-size:28px;
  }

  .ct-review-grid {
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
  }

  .ct-review-card {
    padding:18px 18px 20px;
  }

  .ct-review-text {
    font-size:13px;
  }
}

/* mobile: 1 card per row, relaxed spacing */
@media (max-width: 640px) {
  .ct-reviews-sec {
    padding:48px 0 56px;
  }

  .ct-reviews-sec .ct-wrap {
    padding:0 16px;
  }

  .ct-review-head {
    margin-bottom:28px;
  }

  .ct-review-title {
    font-size:22px;
    line-height:1.3;
  }

  .ct-review-sub {
    font-size:11px;
  }

  .ct-review-grid {
    grid-template-columns:1fr;
    gap:14px;
  }

  .ct-review-card {
    padding:16px 16px 18px;
    border-radius:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.07);
  }

  .ct-review-card h3 {
    font-size:14px;
    margin-bottom:8px;
  }

  .ct-review-text {
    font-size:12px;
    margin-bottom:12px;
  }

  .ct-review-user img {
    width:36px;
    height:36px;
  }

  .ct-name {
    font-size:13px;
  }

  .ct-role {
    font-size:11px;
  }
}

/* =========================================================
   NUTRITIONAL FACTS — PREMIUM CLEAN DESIGN (DESKTOP + MOBILE)
========================================================= */

.ct-nutri-sec{
  position:relative;
  padding:80px 0 90px;
  background:linear-gradient(135deg,#f8fafc 0%,#fefaf6 50%,#f9f5ef 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#123026;
  overflow:hidden;
}

.ct-nutri-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* -------- HEADINGS -------- */

.ct-nutri-head{
  text-align:center;
  max-width:620px;
  margin:0 auto 48px;
}

.ct-nutri-title{
  font-size:32px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:12px;
  color:#102A19;
}

.ct-nutri-sub{
  font-size:15px;
  line-height:1.65;
  color:rgba(0,0,0,.63);
  margin:0;
}

/* -------- GRID (DESKTOP) -------- */

.ct-nutri-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}

/* -------- CARDS -------- */

.ct-nutri-card{
  background:#fff;
  border-radius:18px;
  padding:22px;
  border:1px solid rgba(20,40,25,.06);
  box-shadow:0 18px 42px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;
  justify-content:center;
  align-items:center;
}

.ct-nutri-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 48px rgba(0,0,0,.08);
}

.ct-nutri-inner{
  width:100%;
  max-width:420px;
  border-radius:14px;
  overflow:hidden;
}

.ct-nutri-inner img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   MOBILE REBUILD — NEW DESIGN
========================================================= */

@media(max-width:900px){

  .ct-nutri-sec{
    padding:60px 0 70px;
  }

  .ct-nutri-title{
    font-size:26px;
  }

  .ct-nutri-sub{
    font-size:14px;
  }

  .ct-nutri-grid{
    grid-template-columns:1fr;
    gap:20px;
    max-width:480px;
    margin:0 auto;
  }

  .ct-nutri-card{
    padding:18px;
  }
}

/* ---- Phone Layout ---- */
@media(max-width:600px){

  .ct-nutri-sec{
    padding:50px 0 60px;
    overflow-x:hidden;
  }

  .ct-nutri-wrap{
    padding:0 18px;
  }

  .ct-nutri-title{
    font-size:22px;
  }

  .ct-nutri-sub{
    font-size:13px;
  }

  /* Center cards perfectly */
  .ct-nutri-grid{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:18px;
    align-items:center;
  }

  /* Safe padding so nothing touches screen */
  .ct-nutri-card{
    width:100%;
    max-width:380px;
    margin:0 auto;
    padding:14px;
    box-shadow:0 16px 32px rgba(0,0,0,.05);
  }

  .ct-nutri-inner{
    max-width:100%;
  }
}

/* ---- Ultra-Small Phones ---- */
@media(max-width:430px){

  .ct-nutri-card{
    max-width:350px;
    padding:12px;
  }

  .ct-nutri-title{
    font-size:20px;
  }
}
/* ===== HARD MOBILE FIX — NUTRITION SECTION ===== */
@media (max-width: 600px){

  /* Kill any weird inherited width/padding */
  .ct-nutri-sec{
    padding:48px 0 56px;
    overflow-x:hidden;
  }

  .ct-nutri-wrap{
    max-width:100%;
    margin:0 auto;
    padding:0;               /* reset */
    box-sizing:border-box;
  }

  /* Central column with equal left/right padding */
  .ct-nutri-grid{
    width:100%;
    max-width:420px;         /* keeps it narrow */
    margin:0 auto;
    padding:0 18px;          /* equal gap on both sides */
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
  }

  .ct-nutri-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:12px;
    box-sizing:border-box;
    box-shadow:0 16px 32px rgba(0,0,0,.05);
  }

  .ct-nutri-inner{
    width:100%;
    max-width:100%;
    border-radius:10px;
    overflow:hidden;
  }

  .ct-nutri-inner img{
    display:block;
    width:100%;
    height:auto;
  }

  .ct-nutri-head{
    padding:0 18px;
    margin-bottom:24px;
  }

  .ct-nutri-title{
    font-size:20px;
  }

  .ct-nutri-sub{
    font-size:13px;
  }
}
/* =============== FAQ / Sips of Clarity =============== */

.ct-faq-sec,
.ct-faq-sec *{
  box-sizing:border-box;
}

.ct-faq-sec{
  position:relative;
  padding:80px 0 90px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#1f2c1d;
  background:
    url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-DEKSTOP-BG-3.webp')
    center top / cover no-repeat;
}

@media(max-width:768px){
  .ct-faq-sec{
    padding:60px 0 70px;
    background:
      url('https://chaisatea.cloudsmmmarket.com/wp-content/uploads/2025/11/CHAI-MOB-BG-7.webp')
      center top / cover no-repeat;
  }
}



.ct-faq-wrap{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
  z-index:1;
}

/* heading */

.ct-faq-head{
  text-align:center;
  margin-bottom:26px;
}

.ct-faq-title{
  font-size:30px;
  line-height:1.25;
  margin:0;
  font-weight:700;
  color:#1f3320;
}

/* accordion container */

.ct-faq-accordion{
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(8,60,32,.12);
  border:1px solid rgba(10,76,40,.06);
  overflow:hidden;
}

/* item */

.ct-faq-item + .ct-faq-item{
  border-top:1px solid rgba(15,23,42,.04);
}

.ct-faq-trigger{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:#1f3320;
  text-align:left;
}

.ct-faq-toggle{
  flex:0 0 26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(12,83,45,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  box-shadow:0 8px 16px rgba(5,73,38,.15);
}

.ct-faq-toggle::before{
  content:'+';
  font-size:16px;
  line-height:1;
  color:#0b6a36;
}

.ct-faq-item.is-open .ct-faq-toggle::before,
.ct-faq-trigger[aria-expanded="true"] .ct-faq-toggle::before{
  content:'✕';
}

.ct-faq-question{
  flex:1 1 auto;
}

/* panel */

.ct-faq-panel{
  padding:0 18px 0 56px;
  max-height:0;
  overflow:hidden;
  transition:max-height .22s ease;
  background:#ffffff;
}

.ct-faq-panel p{
  margin:0 0 12px;
  padding-bottom:10px;
  font-size:13px;
  line-height:1.6;
  color:#4b5d4f;
}

/* CTA bar */

.ct-faq-cta-bar{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#ffffff;
  border-radius:999px;
  padding:12px 16px 12px 20px;
  box-shadow:0 16px 40px rgba(7,43,24,.15);
  border:1px solid rgba(10,90,47,.08);
}

.ct-faq-cta-text span{
  font-size:14px;
  color:#294632;
}

/* button pill */

.ct-faq-cta-btn{
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 26px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#ffffff;
  background:linear-gradient(90deg,#0f8f40 0%,#0b5c2f 100%);
  box-shadow:0 14px 32px rgba(5,84,40,.55);
  transition:background .2s ease, transform .18s ease, box-shadow .18s ease;
}

.ct-faq-cta-arrow{
  font-size:14px;
}

.ct-faq-cta-btn:hover{
  background:linear-gradient(90deg,#11a347 0%,#0c6734 100%);
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(5,84,40,.6);
}

.ct-faq-cta-btn:active{
  transform:translateY(0);
  box-shadow:0 10px 24px rgba(5,84,40,.5);
}

/* ========== MOBILE ========== */
@media(max-width:768px){
  .ct-faq-title{
    font-size:22px;
  }
  .ct-faq-panel{
    padding:0 14px 0 52px;
  }
  .ct-faq-cta-bar{
    flex-direction:column;
    align-items:stretch;
    border-radius:20px;
    padding:12px 14px 14px;
  }
  .ct-faq-cta-text{
    text-align:center;
  }
  .ct-faq-cta-btn{
    justify-content:center;
    width:100%;
  }
}