@charset "utf-8";
/* =====================================================================
   REDESIGN LAYER — The Tag Team Care
   Modeled on the structure/polish of yourboostingwellness.com: layered
   hero with eyebrow + pill badges + floating trust bar, framed About
   card, dark "why it works" band with glass feature cards, full 8-item
   product grid, CTA banner, lime-bordered footer. All copy is the
   site's own existing text -- only layout, color, shape and motion
   change. Loaded last (after style.css/inner.css/media.css).
   ===================================================================== */

:root {
  --cream: #FFF6EC;
  --paper: #FFFFFF;
  --sand: #FBE7D6;
  --ink: #241A3D;
  --muted: #6E6680;
  --line: rgba(36, 26, 61, 0.12);
  --lime: #FFBD3E;
  --lime-deep: #EDA10F;
  --forest: #4B2996;
  --forest-deep: #2C1763;
  --coral: #FF5D73;
  --coral-deep: #E13358;
  --grad-brand: linear-gradient(135deg, var(--forest) 0%, var(--coral) 100%);
  --grad-brand-deep: linear-gradient(135deg, var(--forest-deep) 0%, var(--coral-deep) 100%);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-soft: 0 20px 46px -26px rgba(43, 20, 80, 0.40);
  --shadow-lift: 0 30px 60px -22px rgba(43, 20, 80, 0.50);
  --shadow-glow: 0 18px 40px -14px rgba(255, 93, 115, 0.45);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-display: "Fraunces", "Playfair Display", serif;
  --font-body: "Figtree", "Outfit", sans-serif;
}

::selection { background: var(--lime); color: #2C1763; }
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); }
h1, h2, h3 { font-family: var(--font-display); }

.eyebrow-label { display: inline-block; margin-bottom: 14px; font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lime-deep); }
.eyebrow-label.light { color: var(--lime); }
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.center-row { width: 100%; float: left; text-align: center; margin-top: 10px; }

/* ---------------------------------------------------------------------
   Sitewide leftovers from the old template that were leaking through:
   .common-heading/.common-heading2 still carried the old Playfair
   Display + navy (#012f78) styling on every page (products, shop,
   contact, cancel, thankyou), and several small UI bits (breadcrumb
   bar, cookie buttons, checkout submit button) still used the old navy
   instead of the new palette. Forcing them here makes every page --
   not just the homepage -- consistent with the redesign.
   --------------------------------------------------------------------- */
.common-heading, .common-heading2 { font-family: var(--font-display) !important; text-transform: none !important; letter-spacing: -.01em; }
.common-heading { color: var(--ink) !important; font-weight: 600 !important; }
.common-heading span {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--forest);
  font-weight: 700 !important; font-style: italic;
}
.common-heading2 { color: var(--lime-deep) !important; font-weight: 700 !important; }
.common-heading2 span { color: var(--ink) !important; font-weight: 800 !important; }

.shopBreadcrm { background: var(--forest) !important; }
.yes-btn, .no-btn, .submit-btn, .safe-head span, .contact_send_btn { background: var(--forest) !important; }
.yes-btn:hover, .no-btn:hover, .submit-btn:hover, .contact_send_btn:hover { background: var(--forest-deep) !important; }
.top_seller_product img { border-bottom-color: var(--line) !important; }

/* ---------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------- */
.nav-sec { background: rgba(251, 247, 236, 0.92) !important; backdrop-filter: blur(10px); border-bottom-color: var(--line) !important; }
ul.menu-list li a { color: var(--ink) !important; font-weight: 700; letter-spacing: .5px; position: relative; }
ul.menu-list li a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -2px; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
ul.menu-list li a:hover::after { transform: scaleX(1); }
.crt-txt-no { color: var(--coral-deep) !important; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.shop-btn {
  width: auto !important;
  height: 54px !important;
  line-height: 54px !important;
  padding: 0 32px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest) 45%, var(--coral) 100%) !important;
  background-size: 180% 180% !important;
  background-position: 0% 50% !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-position .5s var(--ease);
}
.shop-btn .arw { transition: transform .3s var(--ease); }
.shop-btn:hover .arw { transform: translateX(4px); }
.shop-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  z-index: -1;
}
.shop-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-glow); background-position: 100% 50% !important; }
.shop-btn:hover::before { transform: translateX(120%); }
.shop-btn.outline { background: transparent !important; border: 1.5px solid rgba(255,255,255,.65) !important; box-shadow: none; }
.shop-btn.outline:hover { background: rgba(255,255,255,.14) !important; box-shadow: none; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.banner {
  background: radial-gradient(120% 140% at 8% 0%, rgba(255,189,62,.45), transparent 55%), linear-gradient(120deg, var(--cream) 0%, var(--cream) 55%, var(--sand) 100%) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 70px 0 0 !important;
}
.banner::before, .banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: blobFloat 9s ease-in-out infinite;
}
.banner::before { width: 240px; height: 240px; top: 10%; right: 22%; background: radial-gradient(circle at 35% 35%, rgba(255,93,115,.3), transparent 70%); }
.banner::after { width: 200px; height: 200px; bottom: 18%; right: 4%; background: radial-gradient(circle at 35% 35%, rgba(75,41,150,.2), transparent 70%); animation-delay: 1.3s; animation-duration: 11s; }
@keyframes blobFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.06); } }

.bnr-eyebrow { position: relative; z-index: 1; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--coral-deep); margin-bottom: 14px; float: left; width: 100%; animation: fadeUp .8s var(--ease) both; }
.bnr-p1 { display: none; }
.bnr-p2 { position: relative; z-index: 1; color: var(--ink) !important; font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -.01em; animation: fadeUp .8s var(--ease) .08s both; }
.bnr-p2 span {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--forest);
  font-weight: 700 !important; font-style: italic;
}
.bnr-p3 { position: relative; z-index: 1; color: var(--muted) !important; animation: fadeUp .8s var(--ease) .16s both; }
.bnr-rit .shop-btn { position: relative; z-index: 1; animation: fadeUp .8s var(--ease) .24s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.bnr-badges { position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; padding: 0; animation: fadeUp .8s var(--ease) .32s both; }
.bnr-badges li { background: var(--grad-brand-deep); color: #fff; border-radius: 999px; padding: 10px 20px; font-size: 13px; text-align: left; line-height: 1.3; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bnr-badges li:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.bnr-badges li span { display: block; font-weight: 800; font-size: 13px; color: var(--lime); }

.bnr-rit-mid {
  position: relative; z-index: 1;
  background: none !important;
  height: auto !important;
  min-height: 320px;
  margin: 56px 0 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}
.bnr-rit-mid::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 780px; max-width: 92%; height: 460px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(75,41,150,.4) 0%, rgba(255,93,115,.2) 50%, transparent 72%);
  filter: blur(18px);
  z-index: 0;
  animation: glowPulse 7s ease-in-out infinite;
}
.bnr-rit-mid::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 520px; max-width: 80%; height: 36px;
  border-radius: 50%;
  background: rgba(43,20,80,.3);
  filter: blur(16px);
  z-index: 0;
}
@keyframes glowPulse { 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: .8; transform: translateX(-50%) scale(1.06); } }
.bnr-btl, .bnr-btl2 {
  position: relative; z-index: 1;
  display: block;
  height: 420px; width: auto; max-width: none;
  margin: 0 !important;
  align-self: center;
  animation: floatBottle 6s ease-in-out infinite;
  filter: drop-shadow(0 26px 30px rgba(43,20,80,.35));
}
.bnr-btl2 { margin-left: -40px !important; animation-delay: .5s; }
@media (max-width: 1023px) { .bnr-btl, .bnr-btl2 { height: 300px; } }
@media (max-width: 600px) { .bnr-btl, .bnr-btl2 { height: 190px; } .bnr-btl2 { margin-left: 18px !important; } }
@keyframes floatBottle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.trust-bar {
  position: relative;
  z-index: 2;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 46px 0 0;
  padding: 26px 10px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  transform: translateY(40%);
}
.trust-bar li { flex: 1 1 22%; display: flex; align-items: center; gap: 12px; justify-content: center; padding: 10px 14px; border-right: 1px solid var(--line); transition: transform .3s var(--ease); }
.trust-bar li:last-child { border-right: 0; }
.trust-bar li:hover { transform: translateY(-4px); }
.trust-bar p { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; text-align: left; }
.trust-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--grad-brand); color: #fff; transition: transform .3s var(--ease), border-radius .3s var(--ease); }
.trust-bar li:hover .trust-ic { transform: rotate(-8deg) scale(1.08); border-radius: 50%; }
.trust-ic svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------
   About Us
   --------------------------------------------------------------------- */
.section-1 { background: var(--cream) !important; padding-top: 80px !important; }
.about-grid { display: flex; align-items: center; gap: 56px; text-align: left; }
.about-media { position: relative; flex: 0 0 42%; transition: transform .5s var(--ease); }
.about-media::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: calc(var(--radius-xl) + 14px);
  background: var(--grad-brand);
  opacity: .55;
  filter: blur(26px);
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}
.about-media:hover { transform: translateY(-6px) rotate(-1deg); }
.about-media:hover::before { opacity: .85; filter: blur(34px); }
.about-media .sec2-people { position: static !important; display: block; width: 100%; max-width: 100%; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lift); border: 4px solid var(--paper); }
.about-tag { position: absolute; left: 20px; bottom: 20px; background: var(--grad-brand-deep); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-soft); }
.s1-innr { position: static !important; float: none !important; width: 100%; flex: 1 1 auto; display: block; text-align: left !important; }
.s1-innr .common-heading, .s1-innr .common-para { text-align: left; color: var(--ink); }
.s1-innr .common-heading span { color: var(--forest); }
.s1-innr .clearall { display: none; }

/* ---------------------------------------------------------------------
   Why it works (dark)
   --------------------------------------------------------------------- */
.strip2 { background: linear-gradient(170deg, var(--forest-deep), var(--forest)) !important; padding: 90px 0 !important; position: relative; overflow: hidden; }
.strip2 .common-heading { color: #fff !important; }
.strip2 .common-heading span { background: none !important; -webkit-text-fill-color: var(--lime) !important; color: var(--lime) !important; }
.strip2 .common-para { color: rgba(255,255,255,.75) !important; }
.strip2 .section-head { max-width: 680px; }

.why-grid { display: grid; grid-template-columns: .9fr 1.4fr; gap: 28px; align-items: stretch; }
.why-media { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 20px; transition: transform .5s var(--ease); }
.why-media:hover { transform: translateY(-6px); }
.why-media .strp-btl1 { position: static; width: 100%; max-width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); transition: box-shadow .5s var(--ease); }
.why-media:hover .strp-btl1 { box-shadow: var(--shadow-glow); }
.why-media .shop-btn {
  position: static; width: 100%;
  background: linear-gradient(135deg, var(--lime) 0%, var(--lime) 45%, var(--lime-deep) 100%) !important;
  color: var(--forest-deep) !important;
}

ul.strp-list2 { gap: 20px; }
ul.strp-list2 li {
  position: relative;
  overflow: hidden;
  width: calc(50% - 10px) !important;
  background: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2);
  padding: 26px 24px 26px 64px !important;
  transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  color: rgba(255,255,255,.8) !important;
}
ul.strp-list2 li::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 45%);
  pointer-events: none;
}
ul.strp-list2 li:hover {
  transform: translateY(-6px);
  background: linear-gradient(155deg, rgba(255,255,255,.2), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 14px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.28);
}
ul.strp-list2 li img {
  position: absolute; left: 22px; top: 22px;
  width: 38px; height: 38px;
  transition: transform .4s var(--ease);
}
ul.strp-list2 li:hover img { transform: rotate(-10deg) scale(1.08); }
ul.strp-list2 li span { color: var(--lime) !important; font-weight: 700; }

/* ---------------------------------------------------------------------
   Product grid
   --------------------------------------------------------------------- */
.section-3 { background: var(--paper) !important; padding: 90px 0 !important; }
.top_seller { gap: 22px; }
/* Homepage shows 5 product cards -- 3 on the first row, 2 centered below,
   instead of the 4-column grid used on the full products listing. */
.top_seller--home { justify-content: center; }
.top_seller--home .top_seller_box { width: calc((100% - 44px) / 3) !important; }
.top_seller_box {
  position: relative;
  width: calc(25% - 17px) !important;
  background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(145deg, var(--line), var(--line));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-image .45s var(--ease);
}
.top_seller_box:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-glow);
  background-image: linear-gradient(var(--paper), var(--paper)), var(--grad-brand);
}
.top_seller_product { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.top_seller_product img {
  border-bottom: none !important;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--sand), var(--cream) 70%);
  padding: 14px;
  transition: transform .6s var(--ease);
}
.top_seller_box:hover .top_seller_product img { transform: scale(1.08) rotate(-1deg); }

/* Category tag -- sits in the top-right corner of every card */
.prod-tag {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  background: var(--paper);
  color: var(--forest);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

/* Clean placeholder for products whose photo hasn't been uploaded yet --
   a soft gradient tile with a package icon, instead of a broken image. */
.top_seller_product.no-image {
  aspect-ratio: 1 / 1;
  background: radial-gradient(120% 120% at 30% 20%, var(--sand), var(--cream) 70%);
}
.top_seller_product.no-image a { display: flex; width: 100%; height: 100%; }
.prod-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 100%; color: var(--muted);
  transition: transform .6s var(--ease);
}
.top_seller_box:hover .prod-placeholder { transform: scale(1.06); }
.prod-placeholder svg { width: 34px; height: 34px; color: var(--forest); opacity: .55; }
.prod-placeholder em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

.seller_box_product_name h3 { color: var(--ink) !important; font-size: 18px !important; font-family: var(--font-display); font-weight: 600 !important; }
.product_price h3 { color: var(--ink) !important; border-color: var(--line) !important; }
.product_price h3 span { color: var(--coral-deep) !important; font-weight: 800 !important; }
.top_seller_content .top_seller_button.shop-btn { width: 100%; border-radius: 14px !important; }

/* ---------------------------------------------------------------------
   CTA banner
   --------------------------------------------------------------------- */
.cta-section { background: var(--cream); padding: 0 0 90px; }
.cta-card { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--forest-deep), var(--forest)); border-radius: var(--radius-xl); padding: 72px 64px; text-align: center; isolation: isolate; }
.cta-card::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; right: -120px; top: -140px; background: radial-gradient(circle, rgba(255,189,62,.3), transparent 70%); z-index: -1; }
.cta-card .common-heading { color: #fff !important; }
.cta-card .common-heading span { background: none !important; -webkit-text-fill-color: var(--lime) !important; color: var(--lime) !important; }
.cta-card .common-para { color: rgba(255,255,255,.75) !important; max-width: 520px; margin: 0 auto; }
.cta-card .shop-btn { margin-top: 26px; }

/* ---------------------------------------------------------------------
   Scroll reveal — staggered
   --------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.top_seller .top_seller_box:nth-child(1) { transition-delay: 0s; }
.top_seller .top_seller_box:nth-child(2) { transition-delay: .06s; }
.top_seller .top_seller_box:nth-child(3) { transition-delay: .12s; }
.top_seller .top_seller_box:nth-child(4) { transition-delay: .18s; }
.top_seller .top_seller_box:nth-child(5) { transition-delay: .24s; }
.top_seller .top_seller_box:nth-child(6) { transition-delay: .3s; }
.top_seller .top_seller_box:nth-child(7) { transition-delay: .36s; }
.top_seller .top_seller_box:nth-child(8) { transition-delay: .42s; }
ul.strp-list2 li:nth-child(1) { transition-delay: 0s; }
ul.strp-list2 li:nth-child(2) { transition-delay: .08s; }
ul.strp-list2 li:nth-child(3) { transition-delay: .16s; }
ul.strp-list2 li:nth-child(4) { transition-delay: .24s; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.footer { background: var(--forest-deep) !important; border-top: 3px solid var(--lime) !important; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-top: 48px !important; }
.footer_link-row { gap: 20px; }
.footer_col-3, .footer_col-4 { width: 31% !important; }
.footer-link-heading { color: var(--lime) !important; }
ul.foter-links li a, ul.foter-links li span, ul.foter-links li { color: rgba(255,255,255,.82) !important; }
ul.foter-links li a { transition: color .3s var(--ease), padding-left .3s var(--ease); display: inline-block; }
ul.foter-links li a:hover { color: var(--lime) !important; padding-left: 4px; }
.copyright-section { background: var(--forest-deep); }
.copyright-text2, .ftr-tx { color: rgba(255,255,255,.55) !important; }
.copyright-text2 a { color: var(--lime) !important; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .trust-bar { transform: none; flex-wrap: wrap; margin-top: 26px; }
  .trust-bar li { flex: 1 1 45%; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 10px; }
  .about-grid { flex-direction: column; }
  .about-media { flex: none; width: 100%; }
  .why-grid { grid-template-columns: 1fr; }
  .top_seller_box, .top_seller--home .top_seller_box { width: calc(50% - 11px) !important; }
}
@media (max-width: 767px) {
  .section-1 { padding-top: 60px !important; }
  .banner::before, .banner::after { display: none; }
  ul.strp-list2 li { width: 100% !important; padding-left: 54px !important; }
  .top_seller_box, .top_seller--home .top_seller_box { width: 100% !important; }
  .cta-card { padding: 48px 26px; }
  .trust-bar li { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   Product detail -- side-by-side size/option selector (shop.php).
   Used whenever a product has two variants (e.g. a 10-day pack and a
   1-bottle pack); clicking an option swaps the active price/image/desc
   via JS. Deliberately two boxes side by side, never a dropdown.
   --------------------------------------------------------------------- */
.sub-option { margin-top: 10px; float: left; width: 100%; }
p.points-hed { font-family: var(--font-display); font-size: 16px !important; font-weight: 800 !important; color: var(--ink) !important; letter-spacing: .02em; margin-top: 4px !important; }
.variant-pick { display: flex; width: 100%; float: left; box-sizing: border-box; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.variant-opt {
  flex: 1 1 180px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.variant-opt:hover { border-color: var(--coral); transform: translateY(-3px); }
.variant-opt.active { border-color: var(--forest); background: var(--cream); box-shadow: var(--shadow-glow); transform: translateY(-2px) scale(1.02); }
.variant-opt input[type="radio"] { display: none; }
.variant-opt .variant-qty { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink); }
.variant-opt .variant-price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--forest); }
@media (max-width: 480px) { .variant-opt { flex: 1 1 100%; } }