/* ============================================================
   ColorMensis — Mobile Responsive Layer 3.0
   Safe public-only layout overrides. Does not change desktop.
   ============================================================ */

@media (max-width: 1120px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  *, *::before, *::after { box-sizing: border-box; }
  img, video, iframe, canvas { max-width: 100%; }

  .container,
  .spb-container {
    width: min(100% - 40px, 1200px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Header switches to the mobile navigation before it starts squeezing. */
  .site-header { position: sticky; top: 0; z-index: 90; }
  .header-inner {
    width: 100%;
    min-width: 0;
    gap: 10px !important;
    padding: 10px 16px !important;
  }
  .header-inner > * { min-width: 0; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-mark { width: 52px !important; height: 52px !important; flex: 0 0 52px; }
  .brand-word { height: 31px !important; width: auto !important; max-width: 160px !important; object-fit: contain; }
  .header-cta { display: none !important; }
  .header-account-link { flex: 0 0 auto; }
  .header-account-link span { display: none !important; }
  .header-cart-link span { display: none !important; }
  .menu-toggle { display: flex !important; flex: 0 0 46px; position: relative; z-index: 102; }

  .main-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    display: block !important;
    padding: 92px 22px 40px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    background:
      radial-gradient(600px 420px at 100% 0%, color-mix(in srgb, var(--purple) 16%, transparent), transparent 65%),
      radial-gradient(520px 420px at 0% 100%, color-mix(in srgb, var(--yellow) 20%, transparent), transparent 65%),
      var(--cream) !important;
  }
  .main-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .main-nav > ul {
    width: min(100%, 460px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .main-nav > ul > li { width: 100%; }
  .main-nav > ul > li > a {
    width: 100% !important;
    min-height: 50px;
    justify-content: flex-start !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
  }
  .main-nav a::after { display: none !important; }
  .main-nav a.active { background: color-mix(in srgb, var(--purple) 10%, white); }
  .main-nav a .nav-ico { width: 21px !important; height: 21px !important; flex: 0 0 21px; }
  .nav-cta-mobile { display: block !important; margin-top: 10px !important; }
  .nav-cta-mobile .btn { justify-content: center !important; color: var(--btn-text) !important; }

  .main-nav .nav-months { display: block !important; }
  .nav-submenu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 2px 0 6px 38px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .nav-submenu li a {
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: .92rem !important;
    justify-content: flex-start !important;
  }
  .submenu-caret { display: none !important; }

  /* Main layouts */
  .hero-grid,
  .split,
  .shop-layout,
  .contact-grid,
  .cart-layout,
  .month-detail-grid,
  .account-columns,
  .price-card--promise,
  .plan-card--wide,
  .plan-card--wide .plan-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-grid, .split, .shop-layout, .contact-grid, .cart-layout, .month-detail-grid {
    gap: 34px !important;
  }

  .store-buy-panel,
  .cart-summary,
  .month-detail-copy { position: static !important; top: auto !important; }

  .grid-4, .plans-grid, .months-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Builder-created structures */
  #cm5-main, #cm5-main > *, #cm5-main section { max-width: 100% !important; }
  #cm5-main img, #cm5-main video, #cm5-main iframe { max-width: 100% !important; height: auto; }
  .spb-section { padding: 64px 0 !important; }
  .spb-columns { gap: 20px !important; }
  .spb-column { min-width: 0 !important; max-width: 100% !important; }
}

@media (max-width: 820px) {
  :root { --cm-mobile-gutter: 18px; }

  .container,
  .spb-container {
    width: calc(100% - (var(--cm-mobile-gutter) * 2)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section { padding: 58px 0 !important; }
  .page-hero { padding: 52px 0 34px !important; }
  .page-hero h1 { font-size: clamp(2.35rem, 10vw, 4.2rem) !important; line-height: .98 !important; }
  .page-hero .lede { font-size: 1rem !important; }

  h1, .hero-copy h1 { font-size: clamp(2.55rem, 11.8vw, 4.7rem) !important; line-height: .96 !important; letter-spacing: -.035em; }
  h2 { font-size: clamp(2rem, 8.5vw, 3.4rem) !important; line-height: 1.02 !important; }
  h3 { overflow-wrap: anywhere; }
  .lede { font-size: 1rem !important; line-height: 1.65 !important; }
  .overline { font-size: .73rem !important; letter-spacing: .12em !important; }

  .hero { padding: 44px 0 0 !important; }
  .hero-grid { gap: 30px !important; }
  .hero-copy .lede { max-width: none !important; margin-bottom: 24px !important; }
  .hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 24px !important; }
  .hero-ctas .btn { width: 100% !important; justify-content: center !important; }
  .hero-proof { align-items: flex-start !important; }
  .hero-card { transform: none !important; border-radius: 24px !important; }
  .hero-visual { padding: 0 6px 18px; }
  .float-chip { padding: 8px 11px !important; font-size: .76rem !important; border-radius: 13px !important; }
  .chip-sept { left: 2px !important; top: 12px !important; }
  .chip-price { right: 0 !important; bottom: 14px !important; }
  .chip-stars { left: 12px !important; bottom: -8px !important; }
  .ticker { margin-top: 44px !important; }
  .ticker-track { gap: 28px !important; }
  .ticker span { font-size: .76rem !important; white-space: nowrap; }

  .split { gap: 26px !important; }
  .split-media { border-radius: 22px !important; }
  .split-copy { min-width: 0; }
  .palette { gap: 8px !important; }
  .swatch { max-width: 100%; }

  .grid-4, .grid-3, .grid-2, .plans-grid, .months-grid, .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .card, .contact-card, .plan-card, .buy-panel { padding-left: 22px !important; padding-right: 22px !important; }

  .price-card { padding: 30px 22px !important; border-radius: 24px !important; }
  .price-row { flex-wrap: wrap !important; gap: 8px !important; }
  .price-row .amount { font-size: clamp(3rem, 16vw, 4.1rem) !important; }
  .price-note { align-items: flex-start !important; flex-wrap: wrap !important; }
  .price-card .btn { width: 100% !important; justify-content: center !important; }

  .newsletter { padding: 34px 20px !important; border-radius: 24px !important; }
  .news-form { flex-direction: column !important; }
  .news-form input, .news-form .btn { width: 100% !important; }

  .form-grid, .checkout-customer-fields, .checkout-shipping-fields, .spb-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .form-grid .span2, .checkout-shipping-fields label.full, .spb-form label:last-of-type, .spb-form button { grid-column: 1 !important; }
  input, select, textarea, button { max-width: 100%; }

  /* Store */
  .store-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .store-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .store-product-card { grid-template-columns: minmax(0, 1fr) !important; border-radius: 22px !important; }
  .store-product-media { min-height: 0 !important; aspect-ratio: 4 / 3; }
  .store-product-media img { object-fit: cover; }
  .store-product-body { padding: 24px 20px !important; }
  .store-product-footer { align-items: stretch !important; flex-direction: column !important; }
  .store-product-footer .btn { width: 100% !important; justify-content: center !important; }
  .store-coming-card { padding: 26px 20px !important; }
  .gallery .split-media, .gallery .video-shell { border-radius: 22px !important; }
  .store-plan-option { grid-template-columns: 18px minmax(0,1fr) auto !important; padding: 11px 12px !important; }
  .store-add-row { flex-direction: column !important; }
  .store-qty { width: 150px !important; }
  .store-add-btn { width: 100% !important; }
  .store-language-options { grid-template-columns: 1fr !important; }

  /* Cart / checkout */
  .cart-items { padding: 4px 16px !important; border-radius: 20px !important; }
  .cart-item {
    grid-template-columns: 84px minmax(0,1fr) 34px !important;
    gap: 12px !important;
    align-items: start !important;
  }
  .cart-item img { width: 84px !important; height: 84px !important; border-radius: 12px !important; }
  .cart-item-info h3 { font-size: 1.15rem !important; }
  .cart-item-bottom { flex-direction: column !important; align-items: flex-start !important; }
  .cart-update-row { flex-direction: column !important; align-items: stretch !important; }
  .cart-update-row .btn { width: 100% !important; justify-content: center !important; }
  .cart-summary { padding: 22px 18px !important; border-radius: 20px !important; }
  .checkout-shipping-box, .account-create-box { padding: 18px !important; }

  /* Account */
  .account-page { padding: 42px 16px !important; }
  .account-auth-card { padding: 24px 18px !important; border-radius: 22px !important; }
  .account-summary-grid { grid-template-columns: minmax(0,1fr) !important; }
  .account-hero .container { align-items: flex-start !important; flex-direction: column !important; }
  .account-order-row { grid-template-columns: minmax(0,1fr) 18px !important; }
  .account-order-status { grid-column: 1 !important; align-items: flex-start !important; }
  .order-status-top, .order-timeline { grid-template-columns: minmax(0,1fr) !important; }
  .order-timeline { gap: 10px !important; }
  .timeline-step { flex-direction: row !important; text-align: left !important; align-items: flex-start !important; }
  .tracking-card { align-items: flex-start !important; flex-wrap: wrap !important; }

  /* Months */
  .months-grid { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; }
  .month-card { border-radius: 22px !important; overflow: hidden; }
  .month-card-body { padding: 20px !important; }
  .month-main-image { width: 100% !important; height: auto !important; }
  .past-edition-buybox > div { flex-direction: column !important; align-items: flex-start !important; }

  /* Footer */
  .site-footer { border-radius: 26px 26px 0 0 !important; padding: 48px 0 24px !important; }
  .footer-grid { gap: 28px !important; }
  .footer-brand { max-width: none !important; }
  .footer-brand .brand-word { display: block !important; max-width: 170px !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
  .footer-bottom .legal { flex-wrap: wrap !important; gap: 10px 18px !important; }
  .footer-socrates img { max-height: 58px !important; }

  /* Builder 5 widgets / layouts */
  .spb-section { padding: 48px 0 !important; }
  .spb-columns { flex-direction: column !important; gap: 18px !important; }
  .spb-column { width: 100% !important; flex: 1 1 100% !important; }
  .spb-widget-heading { font-size: clamp(2rem, 10vw, 3.5rem) !important; line-height: 1 !important; }
  .spb-widget-image { max-width: 100% !important; width: auto; height: auto !important; }
  .spb-icon-box { grid-template-columns: 1fr !important; }
  .spb-gallery { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .spb-tab-nav { overflow-x: auto; }
  .spb-tab-nav button { min-width: 120px; }

  /* Generic protection against fixed desktop sizing introduced in Builder. */
  #cm5-main [style*="width"] { max-width: 100% !important; }
  #cm5-main [style*="min-width"] { min-width: 0 !important; }
  #cm5-main .container,
  #cm5-main .hero-grid,
  #cm5-main .split,
  #cm5-main .grid-2,
  #cm5-main .grid-3,
  #cm5-main .grid-4,
  #cm5-main .plans-grid,
  #cm5-main .store-grid,
  #cm5-main .shop-layout,
  #cm5-main .contact-grid,
  #cm5-main .cart-layout,
  #cm5-main .month-detail-grid { max-width: 100% !important; }
}

@media (max-width: 620px) {
  :root { --cm-mobile-gutter: 14px; }

  .announce {
    min-height: 0 !important;
    padding: 7px 12px !important;
    font-size: .68rem !important;
    line-height: 1.35 !important;
    letter-spacing: .04em !important;
    text-align: center;
  }

  .header-inner { padding: 8px 10px !important; gap: 7px !important; }
  .brand-mark { width: 43px !important; height: 43px !important; flex-basis: 43px !important; border-radius: 10px !important; }
  .brand-word { display: block !important; height: 26px !important; max-width: 122px !important; }
  .header-account-link { display: none !important; }
  .header-cart-link { padding: 7px !important; }
  .lang-switch { padding: 3px !important; gap: 1px !important; }
  .lang-link { padding: 5px 6px !important; gap: 0 !important; }
  .lang-link span { display: none !important; }
  .lang-link img { width: 19px !important; }
  .menu-toggle { width: 42px !important; height: 42px !important; flex-basis: 42px !important; border-radius: 12px !important; }

  .main-nav { padding: 82px 14px 28px !important; }
  .main-nav > ul > li > a { font-size: 1rem !important; min-height: 46px; }

  .section { padding: 46px 0 !important; }
  .hero { padding-top: 34px !important; }
  h1, .hero-copy h1 { font-size: clamp(2.25rem, 12.8vw, 3.8rem) !important; }
  h2 { font-size: clamp(1.85rem, 9.5vw, 2.8rem) !important; }

  .btn, .btn-lg { max-width: 100%; min-height: 48px; padding: 13px 18px !important; white-space: normal; text-align: center; justify-content: center; }
  .btn-block { width: 100% !important; }

  .hero-visual { padding-inline: 0; }
  .float-chip { max-width: 76%; }
  .chip-stars { display: none !important; }
  .hero-proof { font-size: .82rem !important; }
  .hero-proof .dot-stack span { width: 26px !important; height: 26px !important; }

  .faq-item summary { padding: 17px 16px !important; font-size: .96rem !important; }
  .faq-body { padding-left: 16px !important; padding-right: 16px !important; }

  .store-product-media { aspect-ratio: 1 / 1; }
  .store-product-topline { align-items: flex-start !important; flex-direction: column !important; }
  .store-product-body h3 { font-size: 2rem !important; }

  .cart-item { grid-template-columns: 68px minmax(0,1fr) 30px !important; }
  .cart-item img { width: 68px !important; height: 68px !important; }
  .summary-line { gap: 12px; }
  .summary-line > * { min-width: 0; overflow-wrap: anywhere; }

  .success-order { grid-template-columns: 1fr !important; }
  .success-order strong { text-align: left !important; }

  .spb-gallery { grid-template-columns: 1fr !important; }
  .spb-testimonial blockquote { font-size: 1.25rem !important; }
  .spb-counter strong { font-size: 3rem !important; }
}

@media (max-width: 430px) {
  .brand-word { max-width: 102px !important; }
  .lang-link { padding: 4px !important; }
  .lang-link img { width: 18px !important; }
  .header-inner { padding-inline: 8px !important; }
  .container, .spb-container { width: calc(100% - 24px) !important; }
  .price-card, .newsletter, .card, .contact-card, .plan-card, .buy-panel { border-radius: 18px !important; }
  .cart-item { grid-template-columns: 58px minmax(0,1fr) 28px !important; gap: 9px !important; }
  .cart-item img { width: 58px !important; height: 58px !important; }
}

/* ============================================================
   ColorMensis — Mobile Header / Menu / Footer polish 3.1
   Keeps desktop untouched. Loaded after the base mobile layer.
   ============================================================ */
@media (max-width: 1120px) {
  :root {
    --cm-mobile-announce-h: 48px;
    --cm-mobile-header-h: 72px;
    --cm-mobile-top-h: 120px;
  }

  /* Keep the announcement + header visible while scrolling. */
  .announce {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 120 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .site-header {
    position: fixed !important;
    top: var(--cm-mobile-announce-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 119 !important;
    box-shadow: 0 8px 24px rgba(46,36,56,.08) !important;
  }
  body.cm-mobile-fixed-header {
    padding-top: var(--cm-mobile-top-h) !important;
  }

  /* Header balance. */
  .header-inner {
    min-height: 68px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  .brand {
    flex: 1 1 auto !important;
    overflow: hidden;
  }
  .brand-mark img,
  .brand-word {
    display: block !important;
  }

  /* Languages must stay clearly visible on mobile. */
  .lang-switch {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 4px !important;
    gap: 3px !important;
    border-radius: 999px !important;
    overflow: visible !important;
  }
  .lang-link {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    overflow: visible !important;
  }
  .lang-link span { display: none !important; }
  .lang-link img {
    width: 27px !important;
    height: 27px !important;
    max-width: none !important;
    min-width: 27px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 0 0 1px rgba(46,36,56,.10) !important;
  }
  .lang-link.active {
    box-shadow: 0 5px 16px rgba(46,36,56,.14) !important;
  }

  /* Compact drawer: starts below the fixed header instead of covering it. */
  .main-nav {
    position: fixed !important;
    top: var(--cm-mobile-top-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    inset: auto 0 0 auto !important;
    width: min(100vw, 390px) !important;
    height: auto !important;
    padding: 16px 16px 24px !important;
    display: block !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background:
      radial-gradient(440px 320px at 100% 0%, color-mix(in srgb, var(--purple) 10%, transparent), transparent 68%),
      linear-gradient(180deg, #fffaf3 0%, #fff4df 100%) !important;
    border-left: 1px solid rgba(46,36,56,.08) !important;
    box-shadow: -22px 0 60px rgba(46,36,56,.16) !important;
    opacity: 1 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(102%) !important;
    transition: transform .25s ease, visibility .25s ease !important;
    z-index: 118 !important;
  }
  .main-nav.open {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  .main-nav > ul {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
  }
  .main-nav > ul > li {
    width: 100% !important;
    margin: 0 !important;
  }
  .main-nav > ul > li > a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    border-radius: 11px !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 720 !important;
    white-space: normal !important;
  }
  .main-nav > ul > li > a.active {
    background: color-mix(in srgb, var(--purple) 9%, white) !important;
  }
  .main-nav a .nav-ico {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  .main-nav .nav-months { display: block !important; }
  .main-nav .nav-submenu {
    display: grid !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 2px 0 5px 20px !important;
    padding: 0 0 0 16px !important;
    gap: 1px !important;
    border: 0 !important;
    border-left: 2px solid color-mix(in srgb, var(--sep-red) 26%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .main-nav .nav-submenu li a {
    min-height: 36px !important;
    padding: 6px 8px !important;
    justify-content: flex-start !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }
  .nav-cta-mobile {
    display: block !important;
    margin: 10px 0 0 !important;
  }
  .nav-cta-mobile .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    justify-content: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Footer: compact but still complete. */
  .site-footer {
    padding: 40px 0 22px !important;
    border-radius: 22px 22px 0 0 !important;
  }
  .site-footer .container {
    width: calc(100% - 32px) !important;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 24px 18px !important;
    margin-bottom: 30px !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }
  .footer-brand .brand { margin-bottom: 12px !important; }
  .footer-brand .brand-mark {
    width: 54px !important;
    height: 54px !important;
  }
  .footer-brand .brand-word {
    display: block !important;
    width: auto !important;
    max-width: 165px !important;
    height: 32px !important;
  }
  .footer-brand p {
    margin: 0 !important;
    max-width: 560px !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }
  .socials { margin-top: 15px !important; gap: 9px !important; }
  .socials a { width: 38px !important; height: 38px !important; }
  .footer-col { min-width: 0 !important; }
  .footer-col h4 {
    margin-bottom: 11px !important;
    font-size: .75rem !important;
    letter-spacing: .10em !important;
  }
  .footer-col ul { gap: 7px !important; }
  .footer-col a {
    gap: 7px !important;
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }
  .footer-col a .nav-ico {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }
  .footer-bottom {
    padding-top: 18px !important;
    gap: 10px !important;
    font-size: .75rem !important;
  }
  .footer-socrates { margin-top: 20px !important; }
  .footer-socrates img { max-height: 44px !important; width: auto !important; }
}

@media (max-width: 620px) {
  .announce {
    padding: 8px 12px !important;
    font-size: .75rem !important;
    line-height: 1.28 !important;
    letter-spacing: .035em !important;
  }
  .header-inner {
    min-height: 68px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
  }
  .brand-mark {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  .brand-word {
    display: block !important;
    height: 28px !important;
    max-width: 136px !important;
  }
  .lang-switch { min-height: 40px !important; }
  .lang-link {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 3px !important;
  }
  .lang-link img {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
  }
  .menu-toggle {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 12px !important;
  }
  .main-nav {
    width: 100vw !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 22px 14px !important;
  }
  .footer-col:last-child {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .brand-word { max-width: 118px !important; height: 25px !important; }
  .brand-mark { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
  .lang-link { width: 30px !important; height: 30px !important; min-width: 30px !important; }
  .lang-link img { width: 23px !important; height: 23px !important; min-width: 23px !important; }
  .menu-toggle { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .footer-grid { gap: 20px 12px !important; }
}


/* ============================================================
   ColorMensis — Mobile Menu 4.0 · estilo Sócrates
   Definitive mobile navigation layer.
   ============================================================ */
@media (max-width: 1120px) {
  :root {
    --cm-menu-purple:#9440DD;
    --cm-menu-magenta:#CB007E;
    --cm-menu-coral:#FF5757;
    --cm-menu-orange:#FF741E;
    --cm-menu-yellow:#FFD21F;
    --cm-menu-green:#5E7D49;
    --cm-menu-cyan:#3CDBE1;
    --cm-menu-blue:#0049AD;
  }

  /* Fixed top stack */
  .announce {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 220 !important;
  }
  .site-header {
    position: fixed !important;
    top: var(--cm-mobile-announce-h) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 219 !important;
    overflow: visible !important;
  }
  .header-inner {
    position: relative !important;
    z-index: 221 !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  body.cm-mobile-fixed-header { padding-top: var(--cm-mobile-top-h) !important; }

  /* Keep the mobile header clean. */
  .header-account-link,
  .header-cart-link,
  .admin-link,
  .header-cta { display:none !important; }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display:flex !important;
    align-items:center !important;
  }
  .brand-mark { flex:0 0 auto !important; }
  .brand-word { flex:0 1 auto !important; min-width:0 !important; }

  /* Languages sit ABOVE the drawer and stay visible. */
  .lang-switch {
    position: relative !important;
    z-index: 226 !important;
    flex: 0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    padding:4px !important;
    min-height:44px !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(46,36,56,.08) !important;
    border-radius:999px !important;
    box-shadow:0 8px 24px rgba(46,36,56,.10) !important;
    overflow:visible !important;
  }
  .lang-link {
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    padding:4px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:transparent !important;
    overflow:visible !important;
  }
  .lang-link span { display:none !important; }
  .lang-link img {
    display:block !important;
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    max-width:27px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
  }
  .lang-link.active {
    background:linear-gradient(135deg,var(--cm-menu-purple),var(--cm-menu-magenta)) !important;
    box-shadow:0 5px 16px rgba(148,64,221,.25) !important;
  }

  /* Socrates-like square hamburger, always above menu. */
  .menu-toggle {
    position:relative !important;
    z-index:227 !important;
    width:50px !important;
    height:50px !important;
    flex:0 0 50px !important;
    margin-left:7px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:0 !important;
    border-radius:15px !important;
    background:linear-gradient(145deg,#6C9252,#4D723A) !important;
    box-shadow:0 10px 25px rgba(73,99,58,.28) !important;
  }
  .menu-toggle span {
    display:block !important;
    width:24px !important;
    height:2px !important;
    margin:0 !important;
    border-radius:4px !important;
    background:#fff !important;
    transform-origin:center !important;
    transition:transform .22s ease,opacity .18s ease !important;
  }
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg) !important;}
  .menu-toggle.open span:nth-child(2){opacity:0 !important;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg) !important;}

  /* Backdrop behind side drawer on tablets. */
  body.cm-menu-open::before {
    content:"";
    position:fixed;
    top:var(--cm-mobile-top-h);
    left:0;
    right:0;
    bottom:0;
    z-index:210;
    background:rgba(23,18,29,.42);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }

  /* Main mobile drawer — IMPORTANT: no inset that cancels top. */
  .main-nav {
    position:fixed !important;
    top:var(--cm-mobile-top-h) !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    width:min(92vw,430px) !important;
    height:calc(100dvh - var(--cm-mobile-top-h)) !important;
    max-height:calc(100dvh - var(--cm-mobile-top-h)) !important;
    margin:0 !important;
    padding:22px 18px 30px !important;
    display:block !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    background:
      radial-gradient(320px 260px at 100% 0%,rgba(148,64,221,.12),transparent 72%),
      radial-gradient(300px 260px at 0% 100%,rgba(255,210,31,.18),transparent 72%),
      linear-gradient(180deg,#FFFDF8 0%,#FFF7EA 100%) !important;
    border:0 !important;
    border-left:1px solid rgba(46,36,56,.08) !important;
    box-shadow:-24px 0 60px rgba(46,36,56,.18) !important;
    opacity:1 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(105%) !important;
    transition:transform .28s cubic-bezier(.22,.8,.22,1),visibility .28s ease !important;
    z-index:215 !important;
  }
  .main-nav::before {
    content:"";
    display:block;
    width:100%;
    height:5px;
    margin:-22px 0 18px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,var(--cm-menu-cyan),var(--cm-menu-blue),var(--cm-menu-purple),var(--cm-menu-magenta),var(--cm-menu-coral),var(--cm-menu-orange),var(--cm-menu-yellow),#73BC25);
  }
  .main-nav.open {
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
  }
  .main-nav > ul {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    list-style:none !important;
  }
  .main-nav > ul > li {
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  .main-nav > ul > li > a {
    width:100% !important;
    min-height:56px !important;
    padding:9px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    border:1px solid rgba(46,36,56,.08) !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.82) !important;
    box-shadow:0 4px 14px rgba(46,36,56,.035) !important;
    color:var(--ink) !important;
    font-family:var(--font-body) !important;
    font-size:1.04rem !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:normal !important;
  }
  .main-nav > ul > li > a::after { display:none !important; }
  .main-nav > ul > li > a.active {
    color:#5F20A0 !important;
    border-color:rgba(148,64,221,.16) !important;
    background:linear-gradient(90deg,rgba(148,64,221,.12),rgba(203,0,126,.055)) !important;
  }
  .main-nav > ul > li > a .nav-ico {
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    padding:9px !important;
    box-sizing:border-box !important;
    border-radius:11px !important;
    color:#fff !important;
    background:linear-gradient(145deg,#7FA35E,#5E7D49) !important;
  }
  .main-nav > ul > li:nth-child(2) > a .nav-ico {background:linear-gradient(145deg,var(--cm-menu-orange),var(--cm-menu-coral)) !important;}
  .main-nav > ul > li:nth-child(3) > a .nav-ico {background:linear-gradient(145deg,var(--cm-menu-yellow),var(--cm-menu-orange)) !important;color:#493817 !important;}
  .main-nav > ul > li:nth-child(4) > a .nav-ico {background:linear-gradient(145deg,var(--cm-menu-purple),var(--cm-menu-magenta)) !important;}
  .main-nav > ul > li:nth-child(5) > a .nav-ico {background:linear-gradient(145deg,var(--cm-menu-cyan),var(--cm-menu-blue)) !important;}
  .main-nav > ul > li:nth-child(6) > a .nav-ico {background:linear-gradient(145deg,#73BC25,#5E7D49) !important;}
  .main-nav > ul > li:nth-child(7) > a .nav-ico {background:linear-gradient(145deg,var(--cm-menu-magenta),var(--cm-menu-purple)) !important;}

  /* Months submenu as a clear nested card. */
  .main-nav .nav-months { display:block !important; }
  .main-nav .submenu-caret { display:none !important; }
  .main-nav .nav-submenu {
    position:static !important;
    display:grid !important;
    width:calc(100% - 18px) !important;
    min-width:0 !important;
    margin:6px 0 0 18px !important;
    padding:7px !important;
    gap:4px !important;
    border:1px solid rgba(94,125,73,.13) !important;
    border-radius:13px !important;
    background:rgba(237,244,228,.78) !important;
    box-shadow:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
  .main-nav .nav-submenu li { width:100% !important; }
  .main-nav .nav-submenu li a {
    width:100% !important;
    min-height:40px !important;
    padding:7px 9px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
    border-radius:9px !important;
    color:var(--ink) !important;
    font-size:.92rem !important;
    font-weight:700 !important;
    background:rgba(255,255,255,.62) !important;
  }
  .month-menu-dot { width:12px !important;height:12px !important;flex:0 0 12px !important;border-radius:50% !important;box-shadow:0 0 0 3px rgba(255,255,255,.7) !important; }

  .nav-cta-mobile {
    display:block !important;
    margin-top:8px !important;
  }
  .nav-cta-mobile .btn {
    min-height:58px !important;
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:16px !important;
    background:linear-gradient(100deg,#5E7D49,#7FA35E) !important;
    color:#fff !important;
    box-shadow:0 12px 28px rgba(94,125,73,.24) !important;
    overflow:hidden !important;
  }

  /* Footer stays compact and aligned. */
  .site-footer .footer-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px 16px !important;
    align-items:start !important;
  }
  .site-footer .footer-brand { grid-column:1 / -1 !important; }
  .site-footer .footer-col { min-width:0 !important; }
  .site-footer .footer-col:last-child { grid-column:1 / -1 !important; }
  .site-footer .footer-col a { overflow-wrap:anywhere !important; }
}

@media (max-width: 620px) {
  .header-inner { padding:8px 10px !important; gap:6px !important; }
  .brand-mark { width:46px !important;height:46px !important;flex-basis:46px !important; }
  .brand-word { max-width:140px !important;height:28px !important; }
  .lang-switch { gap:2px !important;padding:3px !important; }
  .lang-link { width:31px !important;height:31px !important;min-width:31px !important;padding:3px !important; }
  .lang-link img { width:24px !important;height:24px !important;min-width:24px !important;max-width:24px !important; }
  .menu-toggle { width:48px !important;height:48px !important;flex-basis:48px !important;margin-left:5px !important; }
  .main-nav {
    width:100vw !important;
    border-left:0 !important;
    box-shadow:none !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body.cm-menu-open::before { display:none !important; }
  .site-footer .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 390px) {
  .brand-word { max-width:118px !important;height:25px !important; }
  .brand-mark { width:42px !important;height:42px !important;flex-basis:42px !important; }
  .lang-link { width:28px !important;height:28px !important;min-width:28px !important; }
  .lang-link img { width:22px !important;height:22px !important;min-width:22px !important;max-width:22px !important; }
  .menu-toggle { width:44px !important;height:44px !important;flex-basis:44px !important; }
}


/* ============================================================
   ColorMensis — Mobile Navigation 5.0 · DEFINITIVE ISOLATED UI
   Mobile controls are cloned at runtime so Builder 5/Desktop
   styles cannot hide flags or menu items.
   ============================================================ */
.cm-mobile-lang-switch,
.cm-mobile-drawer,
.cm-mobile-menu-backdrop { display:none; }

@media (max-width:1120px) {
  html.cm-menu-open,
  body.cm-menu-open { overflow:hidden !important; }

  /* Desktop/Builder navigation is not the mobile drawer anymore. */
  .site-header .main-nav { display:none !important; }
  .site-header .lang-switch { display:none !important; }

  .site-header .brand {
    position:relative !important;
    z-index:305 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    text-decoration:none !important;
  }
  .site-header .brand * { pointer-events:none !important; }

  /* Three flags always visible. */
  .cm-mobile-lang-switch {
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    width:auto !important;
    min-width:104px !important;
    max-width:112px !important;
    height:42px !important;
    padding:4px !important;
    margin-left:auto !important;
    position:relative !important;
    z-index:306 !important;
    overflow:visible !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(46,36,56,.08) !important;
    border-radius:999px !important;
    box-shadow:0 8px 24px rgba(46,36,56,.10) !important;
  }
  .cm-mobile-lang-link {
    display:grid !important;
    place-items:center !important;
    flex:0 0 31px !important;
    width:31px !important;
    min-width:31px !important;
    max-width:31px !important;
    height:31px !important;
    min-height:31px !important;
    padding:3px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .cm-mobile-lang-link span { display:none !important; }
  .cm-mobile-lang-link img {
    display:block !important;
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    margin:0 !important;
    border-radius:50% !important;
    object-fit:cover !important;
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    transform:none !important;
  }
  .cm-mobile-lang-link.active {
    background:linear-gradient(135deg,#9440DD,#CB007E) !important;
    box-shadow:0 5px 14px rgba(148,64,221,.30) !important;
  }

  .menu-toggle {
    z-index:307 !important;
    margin-left:7px !important;
  }

  /* Backdrop independent from pseudo-elements. */
  .cm-mobile-menu-backdrop {
    display:block !important;
    position:fixed !important;
    top:var(--cm-mobile-top-h,120px) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:288 !important;
    width:100% !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    background:rgba(30,24,37,.36) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .22s ease,visibility .22s ease !important;
  }
  .cm-mobile-menu-backdrop.open {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Completely independent drawer: no Builder inline styles. */
  .cm-mobile-drawer {
    display:block !important;
    position:fixed !important;
    top:var(--cm-mobile-top-h,120px) !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    z-index:300 !important;
    width:min(92vw,430px) !important;
    height:calc(100dvh - var(--cm-mobile-top-h,120px)) !important;
    max-height:calc(100dvh - var(--cm-mobile-top-h,120px)) !important;
    margin:0 !important;
    padding:18px 16px 32px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    opacity:1 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(105%) !important;
    transition:transform .28s cubic-bezier(.22,.8,.22,1),visibility .28s ease !important;
    border:0 !important;
    border-left:1px solid rgba(46,36,56,.08) !important;
    box-shadow:-22px 0 54px rgba(46,36,56,.18) !important;
    background:
      radial-gradient(280px 230px at 100% 0%,rgba(148,64,221,.10),transparent 72%),
      radial-gradient(260px 240px at 0% 100%,rgba(255,210,31,.16),transparent 72%),
      #FFF9F0 !important;
    color:#2E2438 !important;
  }
  .cm-mobile-drawer::before {
    content:"" !important;
    display:block !important;
    width:100% !important;
    height:5px !important;
    margin:-18px 0 14px !important;
    border-radius:0 0 999px 999px !important;
    background:linear-gradient(90deg,#3CDBE1,#0049AD,#9440DD,#CB007E,#FF5757,#FF741E,#FFD21F,#73BC25) !important;
  }
  .cm-mobile-drawer.open {
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(0) !important;
  }

  .cm-mobile-menu-list {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    gap:8px !important;
    list-style:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .cm-mobile-menu-list > li {
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .cm-mobile-menu-list > li > a {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:56px !important;
    height:auto !important;
    padding:9px 12px !important;
    margin:0 !important;
    gap:12px !important;
    border:1px solid rgba(46,36,56,.09) !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 4px 14px rgba(46,36,56,.04) !important;
    color:#2E2438 !important;
    -webkit-text-fill-color:#2E2438 !important;
    font-family:"DM Sans","Segoe UI",sans-serif !important;
    font-size:1.04rem !important;
    line-height:1.2 !important;
    font-weight:750 !important;
    text-decoration:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .cm-mobile-menu-list > li > a > span:not(.submenu-caret):not(.arrow) {
    display:inline !important;
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .cm-mobile-menu-list .nav-ico {
    display:block !important;
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    padding:9px !important;
    border-radius:11px !important;
    color:#fff !important;
    background:linear-gradient(145deg,#7FA35E,#5E7D49) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .cm-mobile-menu-list > li:nth-child(2) > a .nav-ico{background:linear-gradient(145deg,#FF741E,#FF5757) !important;}
  .cm-mobile-menu-list > li:nth-child(3) > a .nav-ico{background:linear-gradient(145deg,#FFD21F,#FF741E) !important;color:#493817 !important;}
  .cm-mobile-menu-list > li:nth-child(4) > a .nav-ico{background:linear-gradient(145deg,#9440DD,#CB007E) !important;}
  .cm-mobile-menu-list > li:nth-child(5) > a .nav-ico{background:linear-gradient(145deg,#3CDBE1,#0049AD) !important;}
  .cm-mobile-menu-list > li:nth-child(6) > a .nav-ico{background:linear-gradient(145deg,#73BC25,#5E7D49) !important;}
  .cm-mobile-menu-list > li:nth-child(7) > a .nav-ico{background:linear-gradient(145deg,#CB007E,#9440DD) !important;}
  .cm-mobile-menu-list > li > a.active {
    color:#6527A1 !important;
    -webkit-text-fill-color:#6527A1 !important;
    border-color:rgba(148,64,221,.20) !important;
    background:linear-gradient(90deg,rgba(148,64,221,.13),rgba(203,0,126,.05)) !important;
  }

  .cm-mobile-menu-list .submenu-caret { display:none !important; }
  .cm-mobile-menu-list .nav-submenu {
    position:static !important;
    display:grid !important;
    width:calc(100% - 18px) !important;
    min-width:0 !important;
    margin:6px 0 0 18px !important;
    padding:7px !important;
    gap:5px !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    border:1px solid rgba(94,125,73,.14) !important;
    border-radius:13px !important;
    background:rgba(237,244,228,.82) !important;
    box-shadow:none !important;
    list-style:none !important;
  }
  .cm-mobile-menu-list .nav-submenu li,
  .cm-mobile-menu-list .nav-submenu li a {
    display:flex !important;
    width:100% !important;
    height:auto !important;
    min-height:40px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
  }
  .cm-mobile-menu-list .nav-submenu li a {
    align-items:center !important;
    gap:9px !important;
    padding:7px 9px !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.75) !important;
    color:#2E2438 !important;
    -webkit-text-fill-color:#2E2438 !important;
    font-size:.93rem !important;
    font-weight:700 !important;
    text-decoration:none !important;
  }

  .cm-mobile-menu-list .nav-cta-mobile {
    display:block !important;
    margin-top:6px !important;
  }
  .cm-mobile-menu-list .nav-cta-mobile > a {
    display:flex !important;
    justify-content:center !important;
    min-height:58px !important;
    border:0 !important;
    border-radius:16px !important;
    background:linear-gradient(100deg,#5E7D49,#7FA35E) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 12px 28px rgba(94,125,73,.24) !important;
  }
}

@media (max-width:620px) {
  .header-inner {
    padding:8px 9px !important;
    gap:5px !important;
  }
  .brand-word { max-width:128px !important; }
  .cm-mobile-lang-switch {
    min-width:98px !important;
    max-width:102px !important;
    gap:1px !important;
    padding:3px !important;
  }
  .cm-mobile-lang-link {
    flex-basis:30px !important;
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
  }
  .cm-mobile-lang-link img {
    width:24px !important;min-width:24px !important;max-width:24px !important;height:24px !important;min-height:24px !important;max-height:24px !important;
  }
  .cm-mobile-drawer {
    width:100vw !important;
    border-left:0 !important;
    box-shadow:none !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .cm-mobile-menu-backdrop { display:none !important; }
}

@media (max-width:390px) {
  .brand-word { max-width:106px !important; height:24px !important; }
  .brand-mark { width:40px !important;height:40px !important;flex-basis:40px !important; }
  .cm-mobile-lang-switch { min-width:92px !important;max-width:94px !important; }
  .cm-mobile-lang-link { flex-basis:28px !important;width:28px !important;min-width:28px !important;max-width:28px !important;height:28px !important; }
  .cm-mobile-lang-link img { width:22px !important;min-width:22px !important;max-width:22px !important;height:22px !important;min-height:22px !important;max-height:22px !important; }
  .menu-toggle { width:43px !important;height:43px !important;flex-basis:43px !important;margin-left:3px !important; }
}

/* ============================================================
   ColorMensis — Mobile Home Centering 3.4
   Home hero: prevent overflow + center copy/media on phones.
   Images: center public media on mobile without affecting desktop.
   ============================================================ */
@media (max-width: 820px) {
  /* The Builder can preserve desktop widths inline; neutralize them on mobile. */
  #cm5-main .hero,
  #cm5-main .hero .container,
  #cm5-main .hero-grid,
  #cm5-main .hero-copy,
  #cm5-main .hero-copy > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #cm5-main .hero-copy,
  .hero-copy {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  #cm5-main .hero-copy h1,
  .hero-copy h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(2.15rem, 10.4vw, 3.15rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: center !important;
  }

  #cm5-main .hero-copy .overline,
  #cm5-main .hero-copy .lede,
  #cm5-main .hero-proof,
  .hero-copy .overline,
  .hero-copy .lede,
  .hero-proof {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #cm5-main .hero-copy .lede,
  .hero-copy .lede {
    width: 100% !important;
    max-width: 34rem !important;
  }

  #cm5-main .hero-ctas,
  .hero-ctas {
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #cm5-main .hero-ctas .btn,
  .hero-ctas .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #cm5-main .hero-proof,
  .hero-proof {
    justify-content: center !important;
    align-items: center !important;
  }

  /* Center every principal public image/media container on mobile. */
  #cm5-main img,
  #cm5-main video,
  .hero-card img,
  .split-media img,
  .edition-image-shell img,
  .store-product-media img,
  .month-main-image,
  .month-card img,
  .card img,
  .spb-widget-image,
  .spb-widget-image img,
  .spb-gallery img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #cm5-main .hero-visual,
  #cm5-main .hero-card,
  #cm5-main .split-media,
  #cm5-main .edition-image-shell,
  #cm5-main .video-shell,
  #cm5-main .store-product-media,
  #cm5-main .month-card-media,
  .hero-visual,
  .hero-card,
  .split-media,
  .edition-image-shell,
  .video-shell,
  .store-product-media,
  .month-card-media {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 430px) {
  #cm5-main .hero-copy h1,
  .hero-copy h1 {
    font-size: clamp(2rem, 10.2vw, 2.75rem) !important;
    line-height: 1 !important;
  }

  #cm5-main .hero-copy .overline,
  .hero-copy .overline {
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
  }

  #cm5-main .hero-visual,
  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
  }
}