/* shop.css */

.trust-bar { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; background:white; border-radius:16px; padding:1rem 1.5rem; box-shadow:0 4px 20px rgba(0,0,0,.05); margin-bottom:1rem; }
.tb-item { font-size:.78rem; font-weight:700; color:var(--soft); display:flex; align-items:center; gap:.3rem; }

/* Plans */
.plans-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:2rem; }
.plan-card   { background:white; border-radius:32px; overflow:hidden; box-shadow:0 12px 60px rgba(0,0,0,.09); transition:transform .35s,box-shadow .35s; display:flex; flex-direction:column; }
.plan-card:hover { transform:translateY(-8px); box-shadow:0 24px 80px rgba(0,0,0,.13); }

.plan-header { padding:2.5rem 2.5rem 2rem; text-align:center; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:220px; }
.kiddo-header    { background:linear-gradient(145deg,#fffde0,#fff4b0,#ffe066); }
.original-header { background:linear-gradient(145deg,#e8f5e0,#d4f0c0,#b8e890); }

.plan-chip-art { position:absolute; top:20px; right:20px; width:100px; height:100px; pointer-events:none; }

.plan-badge-new, .plan-badge-featured {
  position:absolute; top:16px; left:16px;
  font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px;
}
.plan-badge-new      { background:rgba(0,0,0,.1); color:var(--dark); }
.plan-badge-featured { background:var(--green); color:white; }

.plan-icon   { font-size:2.5rem; margin-bottom:.6rem; }
.plan-name   { font-family:var(--fdisp); font-size:1.8rem; font-weight:900; color:var(--dark); margin-bottom:.3rem; }
.plan-tagline{ font-size:.88rem; color:var(--soft); margin-bottom:1rem; }
.plan-price-display { display:flex; align-items:baseline; gap:.3rem; }
.plan-price  { font-family:var(--fdisp); font-size:3.5rem; font-weight:900; color:var(--green-dk); line-height:1; }
.plan-period { font-size:1rem; color:var(--soft); font-family:var(--fbody); }
.plan-included { font-size:.8rem; color:var(--soft); margin-top:.5rem; }

.plan-body { padding:2.5rem; flex:1; display:flex; flex-direction:column; }
.plan-features { display:flex; flex-direction:column; gap:.6rem; margin-bottom:2rem; }
.pf { font-size:.9rem; color:var(--soft); display:flex; align-items:center; gap:.5rem; }

/* Flavour options */
.selector-group { margin-bottom:1.5rem; }
.sel-label   { font-size:.82rem; font-weight:700; color:var(--text); display:block; margin-bottom:.6rem; }
.flavour-options { display:flex; gap:.6rem; flex-wrap:wrap; }
.fopt { cursor:pointer; }
.fopt input { display:none; }
.fopt span  { display:inline-block; padding:8px 16px; border-radius:12px; border:1.5px solid #e0e0d4; font-size:.88rem; font-weight:700; color:var(--soft); transition:all .2s; }
.fopt input:checked + span { background:var(--green); color:white; border-color:var(--green); }
.fopt:hover span { border-color:var(--green); color:var(--green); }

/* Qty slider */
.qty-selector { background:rgba(61,122,31,.04); border:1px solid rgba(61,122,31,.12); border-radius:18px; padding:1.5rem; margin-bottom:1.5rem; }
.qty-header   { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; }
.qty-val-display { font-family:var(--fdisp); font-size:1.5rem; font-weight:900; color:var(--green-dk); }
.bags-range   { width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:linear-gradient(90deg,var(--green-md) 0%,var(--green-lt) 100%); outline:none; margin-bottom:.5rem; cursor:pointer; }
.bags-range::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:white; border:3px solid var(--green); box-shadow:0 2px 8px rgba(42,86,16,.25); cursor:pointer; transition:transform .2s; }
.bags-range::-webkit-slider-thumb:hover { transform:scale(1.2); }
.qty-track-labels { display:flex; justify-content:space-between; font-size:.68rem; color:#bbb; font-weight:700; margin-bottom:.8rem; }
.qty-pricing-info { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; font-size:.82rem; }
.qpi-base   { color:var(--soft); }
.qpi-extra  { color:var(--gold-dk,var(--gold)); font-weight:700; }
.qpi-total  { font-family:var(--fdisp); font-weight:900; color:var(--green-dk); font-size:1rem; margin-left:auto; }

/* Pricing table */
.pricing-table { background:rgba(0,0,0,.02); border-radius:16px; padding:1.25rem; }
.pt-title { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-bottom:.8rem; }
.pt-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.pt-row   { border-radius:10px; padding:.5rem .4rem; text-align:center; border:1.5px solid transparent; transition:all .2s; }
.pt-row.pt-active { background:var(--green); border-color:var(--green); }
.pt-row.pt-active .pt-bags, .pt-row.pt-active .pt-price { color:white; }
.pt-bags  { display:block; font-size:.68rem; font-weight:700; color:var(--soft); }
.pt-price { display:block; font-family:var(--fdisp); font-size:.82rem; font-weight:900; color:var(--green-dk); }
.pt-note  { font-size:.72rem; color:var(--soft); margin-top:.6rem; line-height:1.4; opacity:.7; }

.plan-btn { margin-top:1.5rem !important; font-size:1rem !important; }
.plan-note { font-size:.75rem; color:var(--soft); text-align:center; margin-top:.8rem; opacity:.7; }

/* Compare */
.compare-table { margin:0; }
.ct-wrap { overflow-x:auto; border-radius:20px; box-shadow:0 6px 32px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06); }
.ct-wrap table { width:100%; border-collapse:collapse; background:white; }
.ct-wrap th, .ct-wrap td { padding:1rem 1.4rem; text-align:left; border-bottom:1px solid rgba(0,0,0,.06); font-size:.9rem; }
.ct-wrap thead tr th { background:var(--green-dk); color:white; font-family:var(--fdisp); font-weight:700; font-size:.88rem; padding:1.2rem 1.4rem; }
.ct-wrap thead tr th:first-child { background:#1a3a0a; }
.ct-wrap thead tr th:not(:first-child) { text-align:center; }
.ct-wrap td:first-child { font-weight:700; color:var(--text); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.ct-wrap td:not(:first-child) { text-align:center; color:var(--soft); }
.ct-wrap tbody tr:nth-child(even) td { background:rgba(61,122,31,.03); }
.ct-wrap tbody tr:last-child td { border:none; }
.ct-wrap tbody tr:hover td { background:rgba(61,122,31,.06); }
.ct-check { color:var(--green); font-size:1.1rem; font-weight:900; }
.ct-cross { color:#ccc; font-size:1rem; }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.faq-item { background:white; border-radius:18px; padding:1.5rem; box-shadow:0 4px 20px rgba(0,0,0,.05); }
.faq-q { font-family:var(--fdisp); font-weight:700; font-size:1rem; color:var(--dark); margin-bottom:.5rem; }
.faq-a { font-size:.88rem; color:var(--soft); line-height:1.7; }

/* Manual order */
.manual-order { background:linear-gradient(135deg,rgba(61,122,31,.06),rgba(61,122,31,.03)); border:1px solid rgba(61,122,31,.15); border-radius:24px; padding:2.5rem; }
.mo-inner { display:flex; gap:1.5rem; align-items:flex-start; }
.mo-icon  { font-size:2.5rem; flex-shrink:0; }
.mo-title { font-family:var(--fdisp); font-weight:700; font-size:1.2rem; margin-bottom:.4rem; color:var(--dark); }
.mo-body  { font-size:.9rem; color:var(--soft); line-height:1.65; }

@media(max-width:900px) {
  .plans-grid { grid-template-columns:1fr; }
  .faq-grid   { grid-template-columns:1fr; }
  .pt-grid    { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:680px) {
  .pt-grid    { grid-template-columns:repeat(2,1fr); }
  .mo-inner   { flex-direction:column; }
  .trust-bar  { justify-content:flex-start; }
  .plan-header { min-height:180px; }
  .plan-price  { font-size:2.8rem; }
}