/* ==========================================================================
   MARZISAY DESIGN SYSTEM v1.0
   Blueprint Version 1 — approved
   Platform: WordPress + WooCommerce + Blocksy
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ms-indigo:      #171A3D;
  --ms-violet:      #6D3BD1;
  --ms-gold:        #F2B705;

  /* Semantic */
  --ms-coral:       #E23E2C;   /* discounts ONLY */
  --ms-green:       #12A374;
  --ms-blue:        #2E7DD1;
  --ms-amber:       #E08A00;

  /* Surfaces */
  --ms-white:       #FFFFFF;
  --ms-cloud:       #F7F6FB;
  --ms-lilac:       #EFE9FD;
  --ms-gold-tint:   #FFF6DC;
  --ms-green-tint:  #E8F7F1;

  /* Text */
  --ms-ink:         #171A3D;
  --ms-slate:       #4B4F6B;
  --ms-mist:        #868BA6;
  --ms-offwhite:    #F5F5FA;

  /* Lines */
  --ms-line:        #E6E6F0;

  /* Hover / active derivations */
  --ms-gold-hover:    #DFA804;
  --ms-gold-active:   #CC9A04;
  --ms-indigo-hover:  #12152F;
  --ms-indigo-active: #0D1027;
  --ms-scrim:         rgba(23, 26, 61, 0.55);

  /* Type */
  --ms-font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing — 8px base */
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 24px;
  --ms-space-6: 32px;
  --ms-space-7: 48px;
  --ms-space-8: 64px;
  --ms-space-9: 80px;

  /* Radius */
  --ms-radius-sm:   6px;
  --ms-radius-md:   10px;
  --ms-radius-lg:   12px;
  --ms-radius-xl:   16px;
  --ms-radius-full: 999px;

  /* Elevation — one shadow only */
  --ms-shadow:      0 2px 8px rgba(23, 26, 61, 0.10);
  --ms-shadow-lift: 0 4px 14px rgba(23, 26, 61, 0.08);

  /* Motion */
  --ms-transition: 180ms ease-out;

  /* Layout */
  --ms-container: 1200px;
}

/* --------------------------------------------------------------------------
   2. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
  font-family: var(--ms-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ms-slate);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.ms-heading {
  font-family: var(--ms-font-head);
  color: var(--ms-ink);
  letter-spacing: -0.01em;
  margin-top: 0;
}

h1 { font-size: 28px; font-weight: 800; line-height: 1.15; }
h2 { font-size: 22px; font-weight: 700; line-height: 1.20; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
h4 { font-size: 16px; font-weight: 600; line-height: 1.35; }

p { max-width: 68ch; }

.ms-meta { font-size: 13px; color: var(--ms-mist); line-height: 1.4; }
.ms-body-sm { font-size: 14px; line-height: 1.55; }

a { color: var(--ms-violet); text-decoration: none; transition: color var(--ms-transition); }
a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  h4 { font-size: 18px; }
}

/* Logo tagline lockup */
.ms-lockup {
  font-family: var(--ms-font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-mist);
}

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.ms-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ms-space-2);
  font-family: var(--ms-font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;      /* never ALL CAPS */
  letter-spacing: 0;
  min-height: 52px;
  padding: 0 var(--ms-space-5);
  border: none;
  border-radius: var(--ms-radius-md);
  cursor: pointer;
  transition: background-color var(--ms-transition),
              transform var(--ms-transition),
              box-shadow var(--ms-transition);
}

/* Primary — gold. Ink text ALWAYS. Never white on gold. */
.ms-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button {
  background-color: var(--ms-gold);
  color: var(--ms-ink);
  box-shadow: var(--ms-shadow);
}
.ms-btn--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover {
  background-color: var(--ms-gold-hover);
  color: var(--ms-ink);
  text-decoration: none;
}
.ms-btn--primary:active,
.woocommerce .single_add_to_cart_button:active {
  background-color: var(--ms-gold-active);
  transform: scale(0.985);
}

/* Secondary — indigo */
.ms-btn--secondary,
.ms-buy-now {
  background-color: var(--ms-indigo);
  color: #FFFFFF;
}
.ms-btn--secondary:hover,
.ms-buy-now:hover { background-color: var(--ms-indigo-hover); color: #FFFFFF; text-decoration: none; }
.ms-btn--secondary:active,
.ms-buy-now:active { background-color: var(--ms-indigo-active); transform: scale(0.985); }

/* Tertiary / ghost */
.ms-btn--ghost {
  background-color: transparent;
  color: var(--ms-ink);
  border: 1.5px solid var(--ms-ink);
}
.ms-btn--ghost:hover { background-color: var(--ms-ink); color: #FFFFFF; text-decoration: none; }

/* Ghost on dark bands */
.ms-btn--ghost-dark {
  background-color: transparent;
  color: #FFFFFF;
  border: 1.5px solid #FFFFFF;
}
.ms-btn--ghost-dark:hover { background-color: #FFFFFF; color: var(--ms-ink); text-decoration: none; }

/* WhatsApp */
.ms-btn--whatsapp { background-color: #25D366; color: #FFFFFF; }
.ms-btn--whatsapp:hover { background-color: #1FB558; color: #FFFFFF; text-decoration: none; }

/* Text link button */
.ms-btn--link {
  background: none; border: none; padding: 0; min-height: auto;
  color: var(--ms-violet); font-weight: 600;
}
.ms-btn--link:hover { text-decoration: underline; }

/* Destructive */
.ms-btn--danger { background: none; border: none; padding: 0; min-height: auto; color: var(--ms-coral); }

/* States */
.ms-btn:focus-visible,
.woocommerce .button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(109, 59, 209, 0.35);
}
.ms-btn:disabled,
.ms-btn.disabled,
.woocommerce .button:disabled {
  background-color: var(--ms-line) !important;
  color: var(--ms-mist) !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Full width on mobile */
@media (max-width: 767px) {
  .ms-btn--primary,
  .ms-btn--secondary,
  .woocommerce .single_add_to_cart_button,
  .woocommerce .checkout-button,
  .woocommerce #place_order { width: 100%; }
}

@media (min-width: 768px) {
  .ms-btn, .woocommerce .button { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   4. CARDS
   -------------------------------------------------------------------------- */
.ms-card,
.woocommerce ul.products li.product {
  background: var(--ms-white);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  transition: transform var(--ms-transition),
              border-color var(--ms-transition),
              box-shadow var(--ms-transition);
}
.ms-card:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-2px);
  border-color: var(--ms-violet);
  box-shadow: var(--ms-shadow-lift);
}

/* Product card image area */
.woocommerce ul.products li.product img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--ms-cloud);
  width: 100%;
  height: auto;
  margin-bottom: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ms-font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--ms-ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Content card */
.ms-card__body { padding: var(--ms-space-3); }
@media (min-width: 768px) { .ms-card__body { padding: var(--ms-space-4); } }

.ms-card--content { padding: var(--ms-space-5); }
.ms-card--content .ms-card__icon { width: 28px; height: 28px; color: var(--ms-violet); margin-bottom: var(--ms-space-3); }

/* --------------------------------------------------------------------------
   5. PRICING
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product .price,
.ms-price {
  font-family: var(--ms-font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ms-ink);
  line-height: 1.1;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: 26px; color: var(--ms-ink); }

.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del,
.ms-price__old {
  font-family: var(--ms-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--ms-mist);
  text-decoration: line-through;
  opacity: 1;
  margin-right: var(--ms-space-2);
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins { text-decoration: none; background: none; font-weight: 700; }

.ms-price__tax-note { font-size: 12px; color: var(--ms-mist); display: block; margin-top: var(--ms-space-1); }
.ms-price__saving { font-size: 13px; color: var(--ms-green); font-weight: 600; display: block; margin-top: var(--ms-space-1); }

/* Discount badge — CORAL, discounts only */
.woocommerce span.onsale,
.ms-badge--sale {
  background-color: var(--ms-coral);
  color: #FFFFFF;
  font-family: var(--ms-font-head);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--ms-radius-sm);
  min-height: auto;
  min-width: auto;
  top: var(--ms-space-3);
  left: var(--ms-space-3);
  right: auto;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. CHIPS / BADGES
   -------------------------------------------------------------------------- */
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--ms-radius-full);
  line-height: 1.4;
}
.ms-chip--cod    { background: var(--ms-green-tint); color: var(--ms-green); }
.ms-chip--lilac  { background: var(--ms-lilac); color: var(--ms-ink); }
.ms-chip--info   { background: #E7F0FA; color: var(--ms-blue); }
.ms-chip--amber  { background: #FBF0DC; color: var(--ms-amber); }

/* Search quick chips (mobile) */
.ms-quickchips { display: flex; gap: var(--ms-space-2); overflow-x: auto; padding: var(--ms-space-3) var(--ms-space-4); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ms-quickchips::-webkit-scrollbar { display: none; }
.ms-quickchips a {
  flex: 0 0 auto; height: 32px; display: inline-flex; align-items: center;
  padding: 0 var(--ms-space-4); background: var(--ms-lilac); color: var(--ms-ink);
  border-radius: var(--ms-radius-full); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.ms-quickchips a:hover { text-decoration: none; background: #E4DAFB; }

/* --------------------------------------------------------------------------
   7. STOCK STATUS
   -------------------------------------------------------------------------- */
.ms-stock { display: inline-flex; align-items: center; gap: var(--ms-space-2); font-size: 14px; font-weight: 600; }
.ms-stock::before { content: "●"; font-size: 11px; }
.ms-stock--in   { color: var(--ms-green); }
.ms-stock--low  { color: var(--ms-amber); }
.ms-stock--out  { color: var(--ms-mist); }

.woocommerce div.product .stock.in-stock { color: var(--ms-green); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock { color: var(--ms-mist); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. TRUST BLOCKS
   -------------------------------------------------------------------------- */
.ms-cod-box {
  background: var(--ms-green-tint);
  border: 1px solid var(--ms-green);
  border-radius: var(--ms-radius-lg);
  padding: var(--ms-space-4);
  margin: var(--ms-space-4) 0;
  display: flex;
  gap: var(--ms-space-3);
}
.ms-cod-box__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--ms-green); }
.ms-cod-box__title { font-family: var(--ms-font-head); font-size: 15px; font-weight: 700; color: var(--ms-ink); margin: 0 0 2px; }
.ms-cod-box__text  { font-size: 14px; color: var(--ms-slate); margin: 0; }

.ms-delivery-box { border: 1px solid var(--ms-line); border-radius: var(--ms-radius-lg); padding: var(--ms-space-4); margin: var(--ms-space-4) 0; }
.ms-delivery-box li { display: flex; align-items: center; gap: var(--ms-space-3); font-size: 14px; color: var(--ms-slate); padding: 6px 0; list-style: none; }
.ms-delivery-box ul { margin: 0; padding: 0; }

.ms-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ms-space-3); text-align: center; padding: var(--ms-space-4) 0; }
.ms-trust-row__item svg { width: 24px; height: 24px; color: var(--ms-violet); margin: 0 auto var(--ms-space-2); display: block; }
.ms-trust-row__item span { font-size: 12px; color: var(--ms-slate); line-height: 1.3; display: block; }

/* Benefits tick list */
.ms-benefits { list-style: none; margin: var(--ms-space-4) 0; padding: 0; }
.ms-benefits li {
  position: relative; padding-left: 28px; margin-bottom: var(--ms-space-2);
  font-size: 15px; color: var(--ms-ink); line-height: 1.5;
}
.ms-benefits li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ms-green); font-weight: 700; font-size: 16px;
}

/* --------------------------------------------------------------------------
   9. SECTION BANDS
   -------------------------------------------------------------------------- */
.ms-section { padding: var(--ms-space-7) 0; }
.ms-section--cloud     { background: var(--ms-cloud); }
.ms-section--lilac     { background: var(--ms-lilac); }
.ms-section--gold-tint { background: var(--ms-gold-tint); }
.ms-section--indigo    { background: var(--ms-indigo); color: var(--ms-offwhite); }
.ms-section--indigo h1,
.ms-section--indigo h2,
.ms-section--indigo h3,
.ms-section--indigo h4 { color: #FFFFFF; }
.ms-section--indigo p  { color: var(--ms-offwhite); }
.ms-section--indigo svg { color: var(--ms-gold); }

.ms-section__head { text-align: center; margin-bottom: var(--ms-space-6); }
.ms-section__sub  { font-size: 15px; color: var(--ms-slate); margin: var(--ms-space-2) 0 0; margin-inline: auto; }

.ms-container { max-width: var(--ms-container); margin-inline: auto; padding-inline: var(--ms-space-4); }

@media (min-width: 768px) {
  .ms-section { padding: var(--ms-space-9) 0; }
  .ms-container { padding-inline: var(--ms-space-6); }
}

/* --------------------------------------------------------------------------
   10. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.ms-announce {
  background: var(--ms-indigo);
  color: var(--ms-offwhite);
  font-size: 13px;
  text-align: center;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ms-announce__item { display: none; opacity: 0; transition: opacity 400ms ease; }
.ms-announce__item.is-active { display: block; opacity: 1; }
.ms-announce__sep { display: none; }
.ms-announce__close {
  position: absolute; right: var(--ms-space-4); top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ms-offwhite); cursor: pointer;
  width: 24px; height: 24px; line-height: 1; opacity: 0.7;
}
@media (min-width: 768px) {
  .ms-announce { height: 36px; }
  .ms-announce__item { display: inline; opacity: 1; }
  .ms-announce__sep { display: inline; margin: 0 var(--ms-space-3); opacity: 0.45; }
}

/* --------------------------------------------------------------------------
   11. FORMS & INPUTS
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.ms-input {
  font-family: var(--ms-font-body);
  font-size: 16px;             /* 16px stops iOS auto-zoom — do not lower */
  color: var(--ms-ink);
  background: var(--ms-white);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-md);
  padding: 14px var(--ms-space-4);
  min-height: 52px;
  width: 100%;
  transition: border-color var(--ms-transition), box-shadow var(--ms-transition);
}
.woocommerce form .form-row textarea { min-height: 96px; line-height: 1.5; }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.ms-input:focus {
  outline: none;
  border-color: var(--ms-violet);
  box-shadow: 0 0 0 3px rgba(109, 59, 209, 0.30);
}

.woocommerce form .form-row label {
  font-family: var(--ms-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-ink);
  margin-bottom: 6px;
  display: block;
}
.woocommerce form .form-row .required { color: var(--ms-coral); text-decoration: none; }

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--ms-coral); }

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea { border-color: var(--ms-green); }

.ms-field-error { font-size: 13px; color: var(--ms-coral); margin-top: 6px; display: block; }

/* --------------------------------------------------------------------------
   12. CHECKOUT
   -------------------------------------------------------------------------- */
.woocommerce-checkout .ms-checkout-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ms-space-4); border-bottom: 1px solid var(--ms-line);
}
.woocommerce-checkout .ms-checkout-header__secure {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ms-green);
}

/* Single payment method — render as a card, not a radio list */
.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-green-tint);
  padding: var(--ms-space-4);
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box {
  background: transparent; color: var(--ms-slate); font-size: 14px; padding: var(--ms-space-2) 0 0;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #place_order {
  background: var(--ms-gold);
  color: var(--ms-ink);
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  width: 100%;
}

.ms-checkout-terms { font-size: 12px; color: var(--ms-mist); text-align: center; margin-top: var(--ms-space-3); }

.ms-checkout-trust {
  display: flex; justify-content: center; gap: var(--ms-space-4);
  padding: var(--ms-space-4) 0; font-size: 12px; color: var(--ms-slate);
  border-top: 1px solid var(--ms-line); margin-top: var(--ms-space-5);
}

/* Collapsed coupon */
.woocommerce-checkout .woocommerce-form-coupon-toggle { font-size: 13px; }

@media (min-width: 992px) {
  .woocommerce-checkout .woocommerce-checkout-review-order { position: sticky; top: 24px; }
}

/* --------------------------------------------------------------------------
   13. PRODUCT PAGE
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
  font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ms-ink);
}
@media (min-width: 768px) { .woocommerce div.product .product_title { font-size: 26px; } }

/* Hide the rating row entirely when there are no reviews.
   Never show an empty star row or "0 reviews". */
.woocommerce div.product .woocommerce-product-rating:empty,
.woocommerce div.product .ms-no-reviews .woocommerce-product-rating { display: none !important; }

/* Quantity stepper */
.ms-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-md); overflow: hidden; }
.ms-qty button {
  width: 44px; min-height: 44px; background: var(--ms-cloud); border: none;
  font-size: 18px; color: var(--ms-ink); cursor: pointer; line-height: 1;
}
.ms-qty button:hover { background: var(--ms-lilac); }
.ms-qty input {
  width: 56px; text-align: center; border: none; font-size: 16px;
  font-weight: 600; color: var(--ms-ink); -moz-appearance: textfield;
}
.ms-qty input::-webkit-outer-spin-button,
.ms-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Buy Now sits directly under Add to Cart */
.ms-buy-now { margin-top: var(--ms-space-3); display: block; text-align: center; }

/* Sticky add-to-cart bar (mobile) */
.ms-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--ms-white);
  border-top: 1px solid var(--ms-line);
  box-shadow: 0 -2px 12px rgba(23, 26, 61, 0.10);
  padding: var(--ms-space-2) var(--ms-space-4);
  padding-bottom: calc(var(--ms-space-2) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--ms-space-3);
  transform: translateY(110%);
  transition: transform 220ms ease-out;
}
.ms-sticky-atc.is-visible { transform: translateY(0); }
.ms-sticky-atc__thumb { width: 40px; height: 40px; border-radius: var(--ms-radius-sm); object-fit: contain; background: var(--ms-cloud); flex: 0 0 auto; }
.ms-sticky-atc__price { font-family: var(--ms-font-head); font-size: 17px; font-weight: 700; color: var(--ms-ink); flex: 1 1 auto; }
.ms-sticky-atc__btn { flex: 0 0 auto; min-height: 44px; padding: 0 var(--ms-space-4); }
@media (min-width: 768px) { .ms-sticky-atc { display: none; } }

/* When the sticky ATC is present, hide the site bottom nav — never stack both */
body.ms-has-sticky-atc .ms-bottom-nav { display: none; }

/* Reviews empty state */
.ms-reviews-empty { text-align: center; padding: var(--ms-space-6) var(--ms-space-4); background: var(--ms-cloud); border-radius: var(--ms-radius-lg); }
.ms-reviews-empty h3 { margin-bottom: var(--ms-space-2); }
.ms-reviews-empty p  { color: var(--ms-slate); margin: 0 auto var(--ms-space-4); }

/* Accordions */
.ms-accordion { border-bottom: 1px solid var(--ms-line); }
.ms-accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: var(--ms-space-4) 0; cursor: pointer;
  font-family: var(--ms-font-head); font-size: 16px; font-weight: 600; color: var(--ms-ink);
  text-align: left; min-height: 44px;
}
.ms-accordion__panel { display: none; padding-bottom: var(--ms-space-4); font-size: 15px; color: var(--ms-slate); }
.ms-accordion.is-open .ms-accordion__panel { display: block; }
.ms-accordion__icon { transition: transform var(--ms-transition); flex: 0 0 auto; }
.ms-accordion.is-open .ms-accordion__icon { transform: rotate(180deg); }

/* Specs table */
.ms-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.ms-specs tr:nth-child(odd) { background: var(--ms-cloud); }
.ms-specs th, .ms-specs td { text-align: left; padding: var(--ms-space-3) var(--ms-space-4); border: none; }
.ms-specs th { font-weight: 600; color: var(--ms-ink); width: 40%; }
.ms-specs td { color: var(--ms-slate); }

/* How to use — numbered steps */
.ms-steps { counter-reset: ms-step; list-style: none; padding: 0; margin: 0; }
.ms-steps li { counter-increment: ms-step; position: relative; padding-left: 44px; margin-bottom: var(--ms-space-4); }
.ms-steps li::before {
  content: counter(ms-step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--ms-font-head); font-size: 18px; font-weight: 800; color: var(--ms-violet);
}

/* --------------------------------------------------------------------------
   14. CART DRAWER
   -------------------------------------------------------------------------- */
.ms-freeship-bar { background: var(--ms-cloud); border-radius: var(--ms-radius-md); padding: var(--ms-space-3); margin-bottom: var(--ms-space-4); }
.ms-freeship-bar__text { font-size: 13px; color: var(--ms-slate); margin: 0 0 var(--ms-space-2); }
.ms-freeship-bar__track { height: 6px; background: var(--ms-line); border-radius: var(--ms-radius-full); overflow: hidden; }
.ms-freeship-bar__fill  { height: 100%; background: var(--ms-gold); border-radius: var(--ms-radius-full); transition: width 300ms ease-out; }
.ms-freeship-bar--done .ms-freeship-bar__fill { background: var(--ms-green); }

.ms-empty-state { text-align: center; padding: var(--ms-space-7) var(--ms-space-4); }
.ms-empty-state svg { width: 48px; height: 48px; color: var(--ms-mist); margin-bottom: var(--ms-space-4); }
.ms-empty-state h3 { margin-bottom: var(--ms-space-2); }
.ms-empty-state p  { color: var(--ms-slate); margin-bottom: var(--ms-space-5); }

/* --------------------------------------------------------------------------
   15. CATEGORY TILES
   -------------------------------------------------------------------------- */
.ms-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ms-space-3); }
.ms-cat-tile { text-align: center; text-decoration: none; display: block; }
.ms-cat-tile__icon {
  width: 72px; height: 72px; margin: 0 auto var(--ms-space-2);
  background: var(--ms-lilac); border-radius: var(--ms-radius-full);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ms-transition), transform var(--ms-transition);
}
.ms-cat-tile__icon svg { width: 32px; height: 32px; color: var(--ms-violet); }
.ms-cat-tile:hover .ms-cat-tile__icon { background: #E4DAFB; transform: translateY(-2px); }
.ms-cat-tile__label { font-size: 12px; font-weight: 600; color: var(--ms-ink); line-height: 1.3; }
.ms-cat-tile__count { font-size: 11px; color: var(--ms-mist); display: block; }
.ms-cat-tile:hover { text-decoration: none; }

@media (min-width: 768px) {
  .ms-cat-grid { grid-template-columns: repeat(6, 1fr); gap: var(--ms-space-5); }
  .ms-cat-tile__label { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   16. VALUE BAR / WHY-US GRID
   -------------------------------------------------------------------------- */
.ms-value-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ms-space-4); padding: var(--ms-space-5) 0; border-top: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); }
.ms-value-bar__item { text-align: center; }
.ms-value-bar__item svg { width: 24px; height: 24px; color: var(--ms-violet); margin: 0 auto var(--ms-space-2); display: block; }
.ms-value-bar__title { font-family: var(--ms-font-head); font-size: 13px; font-weight: 700; color: var(--ms-ink); display: block; }
.ms-value-bar__text  { font-size: 11px; color: var(--ms-slate); display: block; line-height: 1.35; }

@media (min-width: 768px) {
  .ms-value-bar { grid-template-columns: repeat(4, 1fr); }
  .ms-value-bar__item svg { width: 28px; height: 28px; }
  .ms-value-bar__title { font-size: 15px; }
  .ms-value-bar__text  { font-size: 13px; }
}

/* COD 3-step timeline */
.ms-steps-timeline { list-style: none; padding: 0; margin: 0; counter-reset: ms-tl; }
.ms-steps-timeline li { counter-increment: ms-tl; position: relative; padding-left: 56px; padding-bottom: var(--ms-space-5); }
.ms-steps-timeline li::before {
  content: counter(ms-tl, decimal-leading-zero);
  position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  background: var(--ms-lilac); color: var(--ms-violet); border-radius: var(--ms-radius-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ms-font-head); font-weight: 800; font-size: 14px;
}
.ms-steps-timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px;
  width: 2px; background: var(--ms-line);
}
@media (min-width: 768px) {
  .ms-steps-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ms-space-6); }
  .ms-steps-timeline li { padding-left: 0; padding-top: 56px; padding-bottom: 0; }
  .ms-steps-timeline li::before { left: 0; }
  .ms-steps-timeline li:not(:last-child)::after { left: 48px; top: 19px; right: -24px; bottom: auto; width: auto; height: 2px; }
}

/* --------------------------------------------------------------------------
   17. MOBILE BOTTOM NAV
   -------------------------------------------------------------------------- */
.ms-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
  background: var(--ms-white); border-top: 1px solid var(--ms-line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.ms-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 60px; font-size: 10px; font-weight: 500; color: var(--ms-slate);
}
.ms-bottom-nav a:hover { text-decoration: none; }
.ms-bottom-nav a.is-active { color: var(--ms-violet); }
.ms-bottom-nav svg { width: 22px; height: 22px; }
.ms-bottom-nav__badge {
  position: absolute; top: 6px; margin-left: 14px;
  background: var(--ms-coral); color: #FFFFFF; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: var(--ms-radius-full);
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
@media (min-width: 768px) { .ms-bottom-nav { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 60px; } }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.ms-footer { background: var(--ms-indigo); color: var(--ms-offwhite); }
.ms-footer a { color: var(--ms-offwhite); font-size: 14px; }
.ms-footer a:hover { color: #FFFFFF; text-decoration: underline; }
.ms-footer h4 { color: #FFFFFF; font-size: 15px; margin-bottom: var(--ms-space-3); }
.ms-footer__bottom { border-top: 1px solid rgba(245, 245, 250, 0.12); padding: var(--ms-space-4) 0; font-size: 13px; color: var(--ms-mist); text-align: center; }

.ms-trust-strip { background: var(--ms-gold-tint); padding: var(--ms-space-5) 0; }
.ms-trust-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ms-space-4); text-align: center; }
.ms-trust-strip svg { width: 26px; height: 26px; color: var(--ms-ink); margin: 0 auto var(--ms-space-2); display: block; }
.ms-trust-strip span { font-size: 13px; font-weight: 600; color: var(--ms-ink); }
@media (min-width: 768px) { .ms-trust-strip__grid { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   19. UTILITIES & SAFETY
   -------------------------------------------------------------------------- */
.ms-hide-mobile { display: none; }
@media (min-width: 768px) { .ms-hide-mobile { display: block; } .ms-hide-desktop { display: none; } }

/* Horizontal scroll anywhere is a bug */
html, body { overflow-x: hidden; max-width: 100%; }

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Never let anything cover the sticky ATC bar */
body.ms-has-sticky-atc .ht-ctc,
body.ms-has-sticky-atc .ht_ctc_style { bottom: 76px !important; }

/* No WhatsApp bubble on checkout — every link is an exit */
body.woocommerce-checkout .ht-ctc,
body.woocommerce-checkout .ht_ctc_style { display: none !important; }