/* ============================================================
   HOUSE OF SASSY — Mobile Supplement
   Supplements main.css + style.css for complete mobile coverage.
   Every rule here is inside a max-width media query.
   Desktop (min-width: 768px+) is NEVER affected.
   ============================================================ */

/* ── 0. WHATSAPP WIDGET — hidden by default, revealed via pull-tab ── */
@media (max-width: 767px) {

  /* Slide the whole widget off-screen to the left by default */
  #whatsapp-widget {
    transform: translateX(calc(-100% - 1.5rem)) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  }
  /* When revealed (class added by JS), slide it in */
  #whatsapp-widget.wa-visible {
    transform: translateX(0) !important;
  }

  /* Pull-tab: small pill fixed to the left edge at the same height as the widget */
  #wa-pull-tab {
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 299;
    width: 28px;
    height: 52px;
    background: #25D366;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    transition: width 0.2s;
    border: none;
    padding: 0;
  }
  #wa-pull-tab:active { width: 34px; }

  /* WhatsApp chevron arrow inside the tab */
  #wa-pull-tab svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: transform 0.3s;
  }
  /* When widget is open, flip the arrow to point left (close) */
  #whatsapp-widget.wa-visible ~ #wa-pull-tab svg,
  #wa-pull-tab.wa-open svg {
    transform: scaleX(-1);
  }
}

/* ── 1. GLOBAL MOBILE FOUNDATION ── */
@media (max-width: 767px) {

  /* Safe bottom padding: prevents floating WhatsApp + cart from
     obscuring bottom-of-page CTAs, footer links, checkout buttons */
  body:not(.sco-page):not(.page-template-page-coming-soon) {
    padding-bottom: 88px;
  }

  /* iOS safe area insets — home indicator bar on iPhone X+ */
  #moderncart-floating-cart {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  #whatsapp-widget {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Prevent iOS auto-zoom on inputs (<16px triggers zoom) —
     WooCommerce native forms not covered by the global 20px rule */
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="password"],
  .woocommerce input[type="number"],
  .woocommerce select,
  .woocommerce textarea,
  .wc-block-components-text-input input,
  .wc-block-components-select select,
  .wc-block-components-textarea textarea {
    font-size: 16px !important;
  }
}

/* ── 2. HEADER ── */
@media (max-width: 1023px) {

  /* Hamburger: header.transparent has white icon but the header bg is
     nearly-white (rgba 96% opacity) — white icon on white = invisible.
     Force dark on mobile at all scroll states. */
  #site-header.transparent .mobile-menu-btn,
  #site-header .mobile-menu-btn {
    color: var(--sassy-dark, #1a0810) !important;
  }

  /* Logo centering: switch header-inner to a 3-column grid so the logo
     always lands in the middle column regardless of icon-group width */
  .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }
  .desktop-nav { display: none !important; }
  .site-logo {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Ensure cart badge is always visible on mobile */
  span.cart-badge {
    display: flex !important;
    min-width: 18px !important;
    height: 18px !important;
  }

  /* Header icons — full 44px touch target */
  .header-icon-btn {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── 3. MOBILE TAP UNLOCK ── */
/* Root cause: decorative absolute-positioned layers lack pointer-events:none
   in some states, and the hero-bg scales via JS transform (parallax) which
   can push its hit-testing area outside the hero section on iOS Safari.
   Fix: lock every decorative layer to pointer-events:none and lift all
   interactive regions into their own stacking context above them. */
@media (max-width: 767px) {

  /* Kill pointer-events on every known decorative overlay/background */
  .hero-bg,
  .hero-bg img,
  .hero-overlay,
  .hero-overlay-2,
  .leopard-bg,
  .footer-leopard,
  .grain-overlay::after,
  .shop-body::before,
  .tiktok-carousel-section::before,
  .brand-story .story-overlay-1,
  .brand-story .story-overlay-2,
  .brand-story .story-bg,
  .brand-story .story-bg img,
  .category-card .overlay,
  .product-card .image-overlay {
    pointer-events: none !important;
  }

  /* Lift interactive regions above any stray decorative layer.
     Only .product-card-wrap gets z-index — NOT .product-card (the <a>),
     which would bury the .card-btn-layer add-to-cart/quickview buttons */
  #site-header        { position: relative !important; z-index: 100 !important; }
  .hero-content       { position: relative !important; z-index: 10  !important; }
  .hero-ctas          { position: relative !important; z-index: 10  !important; }
  .categories-section .container,
  .products-section   .container,
  .deals-section      .container,
  .testimonials-section .container,
  .newsletter-section .container { position: relative !important; z-index: 2 !important; }
  .product-card-wrap  { position: relative !important; z-index: 1   !important; }
  .category-card      { position: relative !important; z-index: 1   !important; }

  /* Explicit touch-action on every interactive element to prevent iOS
     treating them as potential scroll-start candidates */
  .btn-primary, .btn-ghost, .btn-wishlist,
  .product-card, .product-card-wrap,
  .category-card,
  .card-action-btn, .wishlist-btn,
  .header-icon-btn, .mobile-menu-btn,
  .nav-btn, .dot-btn,
  .tiktok-follow-btn,
  a, button {
    touch-action: manipulation !important;
  }
}

/* ── 3. SHOP / ARCHIVE PAGE ── */
@media (max-width: 767px) {

  /* Filter pills row: horizontal scroll so all pills are accessible
     without wrapping to multiple lines */
  .filter-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.4rem !important;
    padding: 0 1rem 0.5rem !important;
    margin: 0 -1rem 1rem !important;
    scrollbar-width: none !important;
  }
  .filter-pills::-webkit-scrollbar { display: none; }

  .filter-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    padding: 0.5rem 1rem !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Shop topbar — count left, sort right on one line */
  .shop-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1rem !important;
    gap: 0.5rem !important;
  }
  .shop-count {
    font-size: 11px !important;
  }
  .shop-sort select {
    font-size: 13px !important;
    padding: 0.4rem 0.75rem !important;
    min-height: 40px !important;
  }

  /* Shop products grid — 2 columns (may already be handled in style.css,
     but explicitly ensuring it here for archive page) */
  .shop-products-grid,
  ul.products.columns-4,
  ul.products.columns-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }

  /* Shop page body top padding reduction */
  .shop-body { padding-top: 1.5rem !important; }
}

/* ── 4. SINGLE PRODUCT PAGE ── */
@media (max-width: 767px) {

  /* Tighten outer padding */
  .product-detail {
    padding: 1.5rem 0 4rem !important;
  }

  /* Breadcrumb — compact on small screens */
  .product-breadcrumb {
    font-size: 11px !important;
    margin-bottom: 1rem !important;
    gap: 0.25rem !important;
  }

  /* Product name — scale down for narrow viewport */
  .product-detail-name {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
    margin-bottom: 0.75rem !important;
  }

  /* Price — readable but not oversized */
  .product-detail-price .current-price {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
  }

  /* Description — more compact leading */
  .product-detail-desc {
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
  }

  /* Fragrance notes box — compact */
  .fragrance-notes {
    padding: 1rem !important;
    margin: 1rem 0 !important;
  }
  .notes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.375rem !important;
  }
  .note-label {
    font-size: 10px !important;
  }
  .note-values {
    font-size: 12px !important;
  }

  /* Product actions row — add to cart + wishlist */
  .product-actions {
    margin: 1.25rem 0 !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  .product-actions form.cart {
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
  }
  /* Quantity input — min touch target */
  .product-actions .quantity {
    flex-shrink: 0 !important;
  }
  .product-actions .quantity input.qty {
    width: 52px !important;
    height: 50px !important;
    font-size: 16px !important;
  }
  /* Add to cart button — fills remaining width */
  .product-actions .single_add_to_cart_button,
  .product-add-btn {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 0 1rem !important;
    height: 50px !important;
  }
  /* Wishlist button */
  .btn-wishlist {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
  }

  /* Trust badges — wrap naturally, smaller text */
  .trust-badges {
    gap: 0.625rem !important;
    padding-top: 1rem !important;
  }
  .trust-badge {
    font-size: 12px !important;
  }
  .trust-badge svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Related products heading */
  .related-products-section {
    padding-top: 2rem !important;
  }
}

/* ── 5. CART PAGE ── */
@media (max-width: 767px) {

  /* Size pills in cart — wrap and sufficient touch target */
  .sassy-cart-pills {
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    margin-top: 0.5rem !important;
  }
  .sassy-var-pill {
    min-height: 36px !important;
    padding: 0.2rem 0.75rem !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Cart table quantity input */
  .sassy-cart-item .qty,
  .woocommerce-cart table.cart input.qty {
    font-size: 16px !important;
    width: 52px !important;
    min-height: 44px !important;
  }

  /* Cart totals box */
  .sassy-cart-totals-box {
    margin-top: 1.5rem !important;
  }

  /* Checkout button from cart page */
  .sassy-checkout-btn,
  .woocommerce .checkout-button {
    font-size: 14px !important;
    padding: 1rem !important;
    min-height: 52px !important;
  }

  /* WooCommerce block cart — stacked layout */
  .wp-block-woocommerce-cart {
    display: block !important;
  }
  .wp-block-woocommerce-cart-items-block,
  .wp-block-woocommerce-cart-totals-block {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 6. CHECKOUT PAGE ── */
@media (max-width: 767px) {

  /* Checkout header bar */
  .sco-bar {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
  /* Hide secure badge on very small screens — show on slightly larger */
  .sco-secure-badge {
    display: none !important;
  }
  .sco-back-link {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .sco-brand {
    font-size: 13px !important;
  }

  /* Checkout section padding */
  .sassy-checkout-section {
    padding: 1.5rem 0 5rem !important;
  }

  /* WooCommerce blocks checkout inputs */
  .sassy-checkout-form input,
  .sassy-checkout-form select,
  .sassy-checkout-form textarea {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* Payment method radio options */
  .wc_payment_method label {
    font-size: 14px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Place order button — large and thumb-zone friendly */
  .sassy-checkout-form #place_order,
  .wc-block-components-checkout-place-order-button {
    min-height: 56px !important;
    font-size: 14px !important;
  }
}

/* Show secure badge above 480px */
@media (min-width: 480px) {
  .sco-secure-badge {
    display: flex !important;
  }
}

/* ── 7. MODERN CART SLIDE-OUT ── */
@media (max-width: 767px) {

  /* Slide-out width — wider feels better on phone */
  #moderncart-slide-out-modal.moderncart-cart-style-slideout #moderncart-slide-out {
    width: 90vw !important;
    max-width: 380px !important;
  }

  /* Cart item rows in slide-out — more breathing room */
  .moderncart-cart-item {
    padding: 12px 16px !important;
  }

  /* Checkout button in slide-out */
  .moderncart-slide-out-footer .checkout-button,
  .moderncart-slide-out-footer a.btn {
    min-height: 52px !important;
    font-size: 14px !important;
  }
}

/* ── 8. WISHLIST PAGE ── */
@media (max-width: 767px) {

  .wishlist-grid,
  .page-wishlist .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.625rem !important;
  }
  .wishlist-empty {
    padding: 3rem 1rem !important;
    text-align: center !important;
  }
}

/* ── 9. FAQ PAGE ── */
@media (max-width: 767px) {

  .faq-hero {
    padding: 2.5rem 0 2rem !important;
  }
  .faq-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }
  /* FAQ accordion items — bigger tap target */
  .faq-item-header,
  .faq-question {
    min-height: 52px !important;
    padding: 0.875rem 0 !important;
    font-size: 15px !important;
  }
}

/* ── 10. SPECIALTY / MINIS PAGES ── */
@media (max-width: 767px) {

  .page-minis .products-section,
  .page-specialty .products-section {
    padding: 2rem 0 !important;
  }
}

/* ── 11. ABOUT PAGE ── */
@media (max-width: 767px) {

  .about-hero {
    padding: 4rem 0 3rem !important;
  }
  .about-hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ── 12. WooCommerce NATIVE NOTICES ── */
@media (max-width: 767px) {

  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info {
    font-size: 14px !important;
    padding: 0.875rem 1rem !important;
  }
  .woocommerce-error li::before {
    font-size: 1em !important;
  }
  /* Continue shopping / back links */
  .woocommerce-error .button,
  .woocommerce-message .button {
    min-height: 44px !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ── 13. QUICK VIEW MODAL ── */
@media (max-width: 767px) {

  #quick-view-modal {
    align-items: flex-end !important; /* sheet-from-bottom on mobile */
  }
  .qv-panel {
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .qv-close {
    top: 0.75rem !important;
    right: 0.75rem !important;
  }
}

/* ── 14. ANNOUNCEMENT BAR ── */
@media (max-width: 480px) {

  /* Hide 2nd and 3rd messages on very small phones */
  #announcement-bar .msg.hidden-sm {
    display: none !important;
  }
}

/* ── 15. REVIEW MODAL ── */
@media (max-width: 767px) {

  .sassy-rmodal-overlay {
    padding: 0.75rem !important;
  }
  .sassy-review-modal {
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }
}

/* ── 16. COOKIE CONSENT BANNER ── */
@media (max-width: 767px) {

  #cookie-consent-banner > div {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }
  #cookie-consent-banner p {
    font-size: 13px !important;
  }
  #cookie-accept-all,
  #cookie-accept-essential {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
}

/* ── MOBILE DRAWER SOCIAL BUTTONS ── */
.drawer-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.drawer-social-btn {
  width: 40px;
  height: 40px;
  border: 1px solid oklch(0.72 0.12 350 / 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.25 0.01 50 / 0.5);
  border-radius: 4px;
  transition: border-color 0.2s, color 0.2s;
  touch-action: manipulation;
}
.drawer-social-btn:active {
  border-color: var(--sassy-hot-pink);
  color: var(--sassy-hot-pink);
}
.drawer-social-btn svg {
  width: 18px;
  height: 18px;
}

/* ── CART MOBILE LAYOUT FIXES ── */
/* Based on ui-ux-pro-max: touch targets ≥44px, compact spacing,
   readable font-size, no horizontal overflow */
@media (max-width: 767px) {

  /* ── Size swap modal ("Review Your Cart") ─────────────────── */
  .sassy-rmodal-overlay {
    padding: 0.5rem !important;
    align-items: flex-end !important; /* sheet slides up from bottom */
  }
  .sassy-rmodal-box {
    padding: 1.25rem 1rem 1.5rem !important;
    max-height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Size variant pills — 2-column grid to halve height ───── */
  .sassy-var-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
  }
  .sassy-var-pill {
    font-size: 12px !important;
    padding: 0.55rem 0.5rem !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    min-height: 44px !important; /* touch target */
  }

  /* Cart size pills inside Modern Cart items stay compact */
  .sassy-cart-pills .sassy-var-pill {
    font-size: 11px !important;
    padding: 0.3rem 0.5rem !important;
    min-height: 36px !important;
  }

  /* ── Modern Cart popup — tighter on mobile ────────────────── */
  #moderncart-slide-out-modal.moderncart-cart-style-popup
  #moderncart-slide-out {
    width: calc(100vw - 1rem) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }
  .moderncart-slide-out-header {
    padding: 0.75rem 1rem !important;
  }
  .moderncart-slide-out-header h2,
  .moderncart-slide-out-header .moderncart-cart-title {
    font-size: 16px !important;
  }
  .moderncart-cart-item {
    padding: 0.75rem 1rem !important;
  }
  .moderncart-cart-item-image img {
    width: 60px !important;
    height: 60px !important;
  }
  .moderncart-cart-item-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  .moderncart-cart-item-price,
  .moderncart-price {
    font-size: 13px !important;
  }

  /* ── Order Summary box (custom sassy cart page) ────────────── */
  .sassy-cart-totals-box {
    padding: 1rem !important;
  }
  .sassy-totals-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
  }
  .sassy-totals-row {
    font-size: 0.875rem !important;
    padding: 0.25rem 0 !important;
  }
  .sassy-totals-divider {
    margin: 0.6rem 0 !important;
  }

  /* ── Modern Cart order summary / totals ──────────────────── */
  .moderncart-order-summary-item,
  .moderncart-cart-line-items__subtotal,
  .moderncart-cart-line-items__total {
    font-size: 13px !important;
  }

  /* ── Checkout button — single line, full width ───────────── */
  .sassy-checkout-btn,
  .moderncart-slide-out-footer .checkout-button,
  .moderncart-slide-out-footer a.btn,
  .btn-total-price {
    font-size: 13px !important;
    padding: 0.875rem 1rem !important;
    min-height: 52px !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
  }

  /* Quantity selector in cart — proper touch size */
  .moderncart-quantity-selector,
  .sassy-cart-qty {
    height: 44px !important;
  }
  .moderncart-quantity-selector button {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
  .moderncart-quantity-selector input {
    font-size: 16px !important;
    min-width: 40px !important;
  }

  /* Free shipping progress bar — compact */
  .moderncart-free-shipping-bar,
  .moderncart-slide-out-free-shipping-bar-wrapper {
    padding: 0.5rem 1rem !important;
    font-size: 12px !important;
  }
}

/* ── CART POPUP OVERFLOW + ORDER SUMMARY HEADING FIX ── */
@media (max-width: 767px) {

  /* Modern Cart popup — prevent right bleed */
  #moderncart-slide-out-modal.moderncart-cart-style-popup {
    padding: 0 0.5rem !important;
  }
  #moderncart-slide-out-modal.moderncart-cart-style-popup #moderncart-slide-out {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* "Order Summary" heading — reduce from ~2.5rem to 1.2rem */
  .moderncart-order-summary-style-style1 .moderncart-cart-header-title,
  .moderncart-slide-out .moderncart-cart-title,
  .sassy-cart-totals-box .sassy-totals-title,
  [class*="order-summary"] h2,
  [class*="order-summary"] h3 {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
  }

  /* Subtotal / total row text */
  .moderncart-order-summary-item label,
  .moderncart-order-summary-item span {
    font-size: 13px !important;
  }

  /* Item product name wraps cleanly */
  .moderncart-cart-item-title,
  .moderncart-cart-item-product-name {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Price in cart item */
  .moderncart-price,
  .moderncart-cart-item-price {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
}

/* ── CART POPUP OVERFLOW — TARGETED FIX ── */
@media (max-width: 767px) {

  /* Root fix: reset left position when overriding width.
     Modern Cart sets left:10% via CSS var; our wide width + 10% offset
     pushes the right edge past the viewport. Pin to 1rem each side. */
  #moderncart-slide-out-modal.moderncart-cart-style-popup #moderncart-slide-out {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /* Cart item row — flex children must be allowed to shrink */
  .moderncart-cart-item-container {
    overflow: hidden !important;
    padding: 12px 10px 12px 10px !important;
    gap: 8px !important;
  }
  .moderncart-cart-item-product,
  .moderncart-cart-item-product-name {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
  }
  /* Price + remove button — shrink to content, don't expand */
  .moderncart-price,
  .moderncart-cart-item-actions-remove {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* "Order Summary" h3 — currently 30px display font, too large */
  .moderncart-cart-total h3,
  .moderncart-order-summary-style-style1 h3,
  .moderncart-order-summary-style-style2 h3 {
    font-family: var(--font-body, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: oklch(0.25 0.01 50 / 0.5) !important;
    margin-bottom: 0.5rem !important;
  }

  /* Subtotal / total values — keep them on one line */
  .moderncart-order-summary-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    padding: 3px 0 !important;
  }
  .moderncart-order-summary-item label,
  .moderncart-order-summary-item span,
  .moderncart-order-summary-item .moderncart-price {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Slide-out cart area — scrollable so items don't overflow height */
  .moderncart-slide-out-cart {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── PILL SIZING — compact rectangular chips (ui-ux-pro-max) ── */
/* Rule: touch-target ≥44px, no circular blobs from 999px radius + wrapping text.
   Switch to 8px rectangular chips: readable, compact, 2-col grid. */
@media (max-width: 767px) {

  /* Override the default 999px full-circle pill shape */
  .sassy-cart-pills .sassy-var-pill,
  .sassy-var-pills .sassy-var-pill {
    border-radius: 8px !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }

  /* Grid container for the pills — evenly split 2 columns */
  .sassy-cart-pills,
  .sassy-var-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
}