/* ChicCharms final mobile architecture and stabilization layer */

/* Rebuilt mobile luxury app experience */
@media (max-width: 768px) {
  /* Hide desktop hero/home elements that are replaced by the mobile app shell */
  .cc-final-announcement,
  .cc-final-home {
    display: none;
  }

  :root {
    --cc-app-ink: #201716;
    --cc-app-muted: rgba(32, 23, 22, 0.58);
    --cc-app-rose: #a85f72;
    --cc-app-rose-2: #d78a9d;
    --cc-app-gold: #b99663;
    --cc-app-ivory: #fffaf5;
    --cc-app-blush: #fff0f3;
    --cc-app-champagne: #f7ead8;
    --cc-app-line: rgba(32, 23, 22, 0.1);
    --cc-app-shadow: 0 14px 32px rgba(64, 39, 34, 0.12);
    --cc-app-soft-shadow: 0 8px 20px rgba(64, 39, 34, 0.08);
    --cc-app-radius: 24px;
    --cc-app-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  body {
    background:
      radial-gradient(circle at 18% -8%, rgba(247, 234, 216, 0.9), transparent 34%),
      linear-gradient(180deg, #fffaf5 0%, #fff3f4 42%, #fffaf7 100%) !important;
    color: var(--cc-app-ink);
  }

  .cc-app-header {
    position: sticky !important;
    top: calc(var(--admin-return-banner-height, 0px) + 28px) !important;
    z-index: 100 !important;
    min-height: 62px !important;
    background: rgba(255, 250, 245, 0.78) !important;
    border-bottom: 1px solid rgba(185, 150, 99, 0.12) !important;
    box-shadow: 0 6px 22px rgba(64, 39, 34, 0.06) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  }

  .cc-app-header-inner {
    min-height: 62px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
  }

  .cc-app-logo {
    justify-self: center;
    color: var(--cc-app-ink);
    font: 600 1.18rem/1 "Playfair Display", Georgia, serif;
    text-decoration: none;
    letter-spacing: 0;
  }

  .cc-app-logo span {
    color: var(--cc-app-rose);
  }

  .cc-app-header-actions {
    display: flex;
    gap: 8px;
  }

  .cc-app-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(32, 23, 22, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    text-decoration: none;
    transition: transform 180ms var(--cc-app-ease), box-shadow 180ms ease;
  }

  .cc-app-icon-btn:active {
    transform: scale(0.94);
  }

  .cc-app-icon-btn svg,
  .mobile-bottom-tab svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cc-app-icon-btn em {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--cc-app-rose);
    color: #fff;
    font: 700 0.58rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-app-search-pill {
    min-height: 52px !important;
    margin: 14px 16px 0 !important;
    border: 1px solid rgba(185, 150, 99, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 12px 28px rgba(64, 39, 34, 0.1) !important;
  }

  .cc-app-search-pill svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--cc-app-rose);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cc-app-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px));
    background:
      linear-gradient(180deg, rgba(255, 250, 245, 0.98), rgba(255, 241, 244, 0.98)),
      var(--cc-app-ivory);
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 260ms ease, transform 320ms var(--cc-app-ease);
  }

  .cc-app-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .cc-app-search-top {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .cc-app-search-top .cc-app-icon-btn {
    font: 500 1.5rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-search-input {
    min-height: 52px;
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(32, 23, 22, 0.1);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-app-search-input svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--cc-app-rose);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cc-app-search-input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cc-app-ink);
    font: 500 0.94rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-search-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 24px;
  }

  .cc-app-overline {
    margin: 18px 0 10px;
    color: var(--cc-app-rose);
    font: 800 0.66rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .cc-app-chip-row,
  .cc-app-search-cats {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-chip-row button,
  .cc-app-search-cats a {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border: 1px solid rgba(185, 150, 99, 0.2);
    border-radius: 999px;
    background: #fff;
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    font: 700 0.78rem/1 Jost, system-ui, sans-serif;
    text-decoration: none;
  }

  .cc-app-search-products {
    display: grid;
    gap: 10px;
  }

  .cc-app-search-products a {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--cc-app-line);
    border-radius: 20px;
    background: #fff;
    color: var(--cc-app-ink);
    text-decoration: none;
  }

  .cc-app-search-products img {
    width: 58px;
    aspect-ratio: 1;
    border-radius: 16px;
    object-fit: cover;
    object-position: center top;
  }

  .cc-app-search-products span {
    font: 700 0.86rem/1.2 Jost, system-ui, sans-serif;
  }

  .cc-app-search-products strong {
    color: var(--cc-app-rose);
    font: 800 0.82rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-category-rail {
    padding-top: 18px !important;
    padding-bottom: 8px !important;
  }

  .cc-final-category {
    flex-basis: 76px !important;
  }

  .cc-final-category img {
    width: 68px !important;
    height: 68px !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    outline: 1px solid rgba(185, 150, 99, 0.2);
    box-shadow: 0 10px 24px rgba(64, 39, 34, 0.13) !important;
  }

  .cc-final-category b {
    color: rgba(32, 23, 22, 0.7) !important;
    font-weight: 700 !important;
  }

  .cc-app-hero {
    padding: 10px 16px 4px;
  }

  .cc-app-hero-card {
    position: relative;
    min-height: min(112vw, 470px);
    display: block;
    overflow: hidden;
    border-radius: 30px;
    background: #221817;
    color: #fffaf5;
    box-shadow: 0 18px 42px rgba(64, 39, 34, 0.18);
    text-decoration: none;
  }

  .cc-app-hero-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .cc-app-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(32, 23, 22, 0.02) 0%, rgba(32, 23, 22, 0.22) 42%, rgba(32, 23, 22, 0.72) 100%),
      radial-gradient(circle at 12% 16%, rgba(255, 250, 245, 0.18), transparent 34%);
  }

  .cc-app-offer {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 18px;
    background: rgba(255, 250, 245, 0.9);
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    font: 700 0.66rem/1.2 Jost, system-ui, sans-serif;
    text-align: center;
    animation: ccAppFloat 3.8s ease-in-out infinite;
  }

  .cc-app-offer b {
    color: var(--cc-app-rose);
  }

  .cc-app-hero-copy {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
  }

  .cc-app-hero-copy span {
    display: inline-flex;
    margin-bottom: 10px;
    color: rgba(255, 250, 245, 0.78);
    font: 800 0.64rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .cc-app-hero-copy h1 {
    max-width: 12ch;
    margin: 0;
    font: 500 clamp(1.95rem, 9vw, 2.8rem)/0.96 "Playfair Display", Georgia, serif;
    letter-spacing: 0;
  }

  .cc-app-hero-copy p {
    max-width: 29ch;
    margin: 12px 0 16px;
    color: rgba(255, 250, 245, 0.82);
    font: 400 0.88rem/1.5 Jost, system-ui, sans-serif;
  }

  .cc-app-hero-copy strong {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 999px;
    background: #fffaf5;
    color: var(--cc-app-ink);
    font: 800 0.72rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cc-final-promo-card {
    border-radius: 26px !important;
    box-shadow: 0 14px 30px rgba(64, 39, 34, 0.14) !important;
  }

  .cc-app-trust {
    gap: 10px !important;
  }

  .cc-app-trust span {
    border-color: rgba(185, 150, 99, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-final-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-weight: 500 !important;
  }

  .cc-final-kicker {
    color: var(--cc-app-rose) !important;
  }

  .cc-final-product {
    border: 1px solid rgba(185, 150, 99, 0.18) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 12px 28px rgba(64, 39, 34, 0.1) !important;
    transition: transform 180ms var(--cc-app-ease), box-shadow 180ms ease;
  }

  .cc-final-product:active {
    transform: scale(0.97);
  }

  .cc-final-product-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 22px 22px 14px 14px;
    background: var(--cc-app-blush);
  }

  .cc-final-product-media img {
    width: 100%;
    aspect-ratio: 4 / 5.25 !important;
    display: block;
    object-fit: cover;
    object-position: center top;
  }

  .cc-final-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 5;
    /* Pill layout — text must stay inside */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 24px);
    /* Geometry */
    padding: 6px 10px;
    border-radius: 999px;
    /* Appearance */
    background: rgba(255, 250, 245, 0.92);
    color: var(--cc-app-rose);
    font: 900 0.58rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* No transform on badge */
    transform: none;
  }

  .cc-final-heart,
  .cc-final-quick {
    position: absolute;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 250, 245, 0.94);
    color: var(--cc-app-rose);
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-final-heart {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .cc-final-quick {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    color: #fff;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    font: 900 1.1rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-product-name {
    margin: 11px 11px 6px !important;
    color: var(--cc-app-ink);
    font-weight: 700 !important;
  }

  .cc-final-price-row {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 11px 8px !important;
  }

  .cc-final-price-row strong {
    color: var(--cc-app-ink) !important;
  }

  .cc-final-price-row s {
    color: var(--cc-app-muted);
    font-size: 0.68rem;
  }

  .cc-final-price-row em {
    padding: 4px 6px;
    border-radius: 999px;
    background: var(--cc-app-champagne);
    color: #7f6137;
    font: 800 0.58rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-final-card-cta {
    min-height: 34px;
    display: grid;
    place-items: center;
    margin: 0 10px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fffaf5;
    font: 800 0.66rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .cc-app-mood-grid,
  .cc-app-story-grid {
    display: grid;
    gap: 12px;
    padding: 0 16px;
  }

  .cc-app-mood {
    position: relative;
    min-height: 164px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--cc-app-ink);
    color: #fffaf5;
    box-shadow: var(--cc-app-shadow);
    text-decoration: none;
  }

  .cc-app-mood img,
  .cc-app-story img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .cc-app-mood::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(32, 23, 22, 0.7), rgba(32, 23, 22, 0.08));
  }

  .cc-app-mood span,
  .cc-app-mood strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-left: 16px;
  }

  .cc-app-mood span {
    margin-top: 92px;
    color: rgba(255, 250, 245, 0.72);
    font: 800 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-mood strong {
    max-width: 14ch;
    margin-top: 6px;
    font: 500 1.38rem/1.04 "Playfair Display", Georgia, serif;
  }

  .cc-app-story {
    position: relative;
    min-height: 138px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--cc-app-ink);
    color: #fffaf5;
  }

  .cc-app-story::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(32, 23, 22, 0.72));
  }

  .cc-app-story div {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1;
  }

  .cc-app-story span {
    display: block;
    color: rgba(255, 250, 245, 0.7);
    font: 800 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-story strong {
    display: block;
    margin-top: 5px;
    font: 500 1.1rem/1.08 "Playfair Display", Georgia, serif;
  }

  .cc-app-backdrop,
  .cc-app-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    border: 0;
    background: rgba(32, 23, 22, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }

  .cc-app-backdrop.is-open,
  .cc-app-cart-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .cc-app-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 210;
    width: min(88vw, 360px);
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 0 30px 30px 0;
    background:
      linear-gradient(180deg, rgba(255, 250, 245, 0.98), rgba(255, 241, 244, 0.98)),
      var(--cc-app-ivory);
    box-shadow: 18px 0 40px rgba(32, 23, 22, 0.2);
    transform: translateX(-104%);
    transition: transform 340ms var(--cc-app-ease);
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-drawer.is-open {
    transform: translateX(0);
  }

  .cc-app-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
  }

  .cc-app-drawer-head span {
    display: block;
    color: var(--cc-app-ink);
    font: 600 1.32rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-app-drawer-head strong {
    display: block;
    margin-top: 6px;
    color: var(--cc-app-muted);
    font: 500 0.78rem/1.3 Jost, system-ui, sans-serif;
  }

  .cc-app-menu-list,
  .cc-app-menu-foot {
    display: grid;
    gap: 8px;
  }

  .cc-app-menu-list a,
  .cc-app-menu-foot a,
  .cc-app-menu-foot button {
    min-height: 50px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(32, 23, 22, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    font: 700 0.9rem/1 Jost, system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
  }

  .cc-app-menu-list i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--cc-app-champagne);
    color: #7f6137;
    font-style: normal;
  }

  .cc-app-menu-foot {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--cc-app-line);
  }

  .cc-app-menu-foot a,
  .cc-app-menu-foot button {
    grid-template-columns: 24px minmax(0, 1fr);
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .cc-app-menu-foot svg,
  .cc-app-menu-list svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cc-app-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 68px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 28px !important;
    background: rgba(255, 250, 245, 0.86) !important;
    box-shadow: 0 18px 42px rgba(64, 39, 34, 0.18) !important;
    backdrop-filter: blur(16px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
  }

  .mobile-bottom-tab {
    border: 0;
    background: transparent;
    border-radius: 20px;
    transition: transform 180ms var(--cc-app-ease), background 180ms ease, color 180ms ease;
  }

  .mobile-bottom-tab.is-active {
    background: var(--cc-app-blush);
    color: var(--cc-app-rose) !important;
  }

  .mobile-bottom-tab:active {
    transform: translateY(-2px) scale(0.97);
  }

  .cc-app-cart-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 220;
    max-height: 78vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 14px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, #fffaf5, #fff2f4);
    box-shadow: 0 -18px 42px rgba(32, 23, 22, 0.18);
    transform: translateY(calc(100% + 110px));
    transition: transform 340ms var(--cc-app-ease);
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-cart-drawer.is-open {
    transform: translateY(0);
  }

  .cc-app-cart-head,
  .cc-app-ship div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .cc-app-cart-head span,
  .cc-app-ship span {
    color: var(--cc-app-muted);
    font: 700 0.68rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-cart-head strong {
    display: block;
    margin-top: 4px;
    font: 500 1.35rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-app-ship {
    padding: 13px;
    border: 1px solid rgba(185, 150, 99, 0.2);
    border-radius: 20px;
    background: #fff;
  }

  .cc-app-ship i {
    display: block;
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-app-rose) var(--p), rgba(32, 23, 22, 0.08) var(--p));
  }

  .cc-app-cart-items {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-cart-items article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 20px;
    background: #fff;
  }

  .cc-app-cart-img {
    width: 58px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: var(--cc-app-blush);
    color: var(--cc-app-rose);
    font: 800 0.8rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cc-app-cart-items strong {
    display: block;
    overflow: hidden;
    color: var(--cc-app-ink);
    font: 800 0.84rem/1.15 Jost, system-ui, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cc-app-cart-items span {
    color: var(--cc-app-muted);
    font: 600 0.72rem/1.4 Jost, system-ui, sans-serif;
  }

  .cc-app-empty-cart {
    padding: 24px 16px;
    border: 1px dashed rgba(185, 150, 99, 0.3);
    border-radius: 24px;
    background: #fff;
    text-align: center;
  }

  .cc-app-empty-cart strong,
  .cc-app-empty-cart span,
  .cc-app-empty-cart a {
    display: block;
  }

  .cc-app-empty-cart a,
  .cc-app-checkout {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fffaf5;
    font: 900 0.76rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .cc-app-cart-trust {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cc-app-cart-trust span {
    flex: 0 0 auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--cc-app-muted);
    font: 700 0.64rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-checkout {
    justify-content: space-between;
    padding: 0 18px;
    margin-top: 0;
  }

  .cart-page,
  .cc-app-account-page {
    padding: 18px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(247, 234, 216, 0.9), transparent 34%),
      linear-gradient(180deg, #fffaf5, #fff3f4 52%, #fffaf7) !important;
  }

  .cart-page .container,
  .acc-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .cart-header {
    margin: 16px 0 18px !important;
  }

  .cart-header h1,
  .panel-title {
    font: 500 2rem/1.05 "Playfair Display", Georgia, serif !important;
  }

  .cart-layout,
  .acc-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .cart-item,
  .cart-summary,
  .cart-empty,
  .acc-profile-card,
  .acc-nav,
  .acc-card,
  .stat-box {
    border: 1px solid rgba(185, 150, 99, 0.16) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--cc-app-soft-shadow) !important;
  }

  .cart-summary {
    position: static !important;
  }

  .cart-summary .btn-checkout,
  .d11-sticky-cart-cta,
  .btn-checkout {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose)) !important;
  }

  .d11-sticky-cart-cta {
    left: 14px !important;
    right: 14px !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    border-radius: 24px !important;
  }

  .d11-sticky-cart-cta.d11-hidden {
    display: none !important;
  }

  .cc-app-account-hero {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(185, 150, 99, 0.18);
    border-radius: 28px;
    background: linear-gradient(135deg, #fff, var(--cc-app-blush));
    box-shadow: var(--cc-app-shadow);
  }

  .cc-app-account-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fffaf5;
    font: 700 1.1rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-app-account-hero span {
    color: var(--cc-app-rose);
    font: 800 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-account-hero h1 {
    margin: 5px 0 6px;
    font: 500 1.55rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-app-account-hero p {
    margin: 0;
    color: var(--cc-app-muted);
    font: 500 0.82rem/1.4 Jost, system-ui, sans-serif;
  }

  .acc-sidebar {
    position: static !important;
  }

  .acc-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: none;
  }

  .acc-nav-btn {
    flex: 0 0 auto;
    min-height: 40px;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--cc-app-blush) !important;
    white-space: nowrap;
  }

  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  @keyframes ccAppFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  @media (max-width: 360px) {
    .cc-app-header-inner {
      grid-template-columns: 40px minmax(0, 1fr) auto;
      padding-inline: 10px;
    }

    .cc-app-icon-btn {
      width: 38px;
      height: 38px;
    }

    .cc-app-logo {
      font-size: 1.02rem;
    }

    .cc-app-hero-copy h1 {
      font-size: 1.82rem;
    }

    .cc-final-product,
    .related-card {
      min-width: 132px !important;
    }
  }
}

/* Final app-authority overrides: keep the rebuilt mobile experience above older layers. */
@media (max-width: 768px) {
  .cc-app-header {
    min-height: 62px !important;
    background: rgba(255, 250, 245, 0.78) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  }

  .cc-app-header .cc-app-header-inner {
    min-height: 62px !important;
    height: 62px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    padding: 8px 14px !important;
  }

  .cc-app-header [data-cc-app-menu],
  .cc-app-header .cc-app-icon-btn {
    display: inline-grid !important;
  }

  .cc-app-header .cc-app-logo {
    grid-column: 2 !important;
    justify-self: center !important;
  }

  .cc-app-header .cc-app-header-actions {
    grid-column: 3 !important;
    display: flex !important;
  }

  .cc-app-search-pill {
    min-height: 52px !important;
    margin: 14px 16px 0 !important;
    border-radius: 999px !important;
  }

  .cc-app-hero {
    display: block !important;
    padding: 10px 16px 4px !important;
  }

  .cc-app-hero-card {
    min-height: min(112vw, 470px) !important;
    border-radius: 30px !important;
  }

  .cc-app-bottom-nav.mobile-bottom-nav {
    min-height: 68px !important;
    border-radius: 28px !important;
    background: rgba(255, 250, 245, 0.86) !important;
    backdrop-filter: blur(16px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
  }

  .cc-app-home .cc-final-product {
    border-radius: 24px !important;
    box-shadow: 0 12px 28px rgba(64, 39, 34, 0.1) !important;
  }

  .cc-app-home .cc-final-product-media img {
    aspect-ratio: 4 / 5.25 !important;
  }

  .cc-app-home .cc-final-card-cta {
    display: grid !important;
  }

  .auth-page {
    min-height: 100dvh !important;
    display: block !important;
    padding: 22px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 18% 0%, rgba(247, 234, 216, 0.9), transparent 34%),
      linear-gradient(180deg, #fffaf5, #fff2f4 58%, #fffaf7) !important;
  }

  .auth-wrap {
    max-width: none !important;
    padding-top: 12px;
  }

  .auth-card {
    padding: 34px 20px 28px !important;
    border: 1px solid rgba(185, 150, 99, 0.16) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 42px rgba(64, 39, 34, 0.12) !important;
  }

  .auth-logo,
  .auth-card h1 {
    font-family: "Playfair Display", Georgia, serif !important;
  }

  .auth-tabs {
    border-radius: 18px !important;
    background: rgba(32, 23, 22, 0.04) !important;
  }

  .auth-tab.active,
  .auth-btn {
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose)) !important;
    box-shadow: 0 14px 28px rgba(168, 95, 114, 0.22) !important;
  }

  .auth-field input {
    min-height: 52px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 768px) {
  :root {
    --cc-ink: #241316;
    --cc-soft-ink: rgba(36, 19, 22, 0.72);
    --cc-muted: rgba(36, 19, 22, 0.58);
    --cc-rose: #e0487a;
    --cc-hot: #ff4f8b;
    --cc-candy: #ffe1ea;
    --cc-ivory: #fff8f2;
    --cc-blush: #fff0f5;
    --cc-line: rgba(224, 72, 122, 0.16);
    --cc-radius: 20px;
    --cc-shadow: 0 12px 28px rgba(224, 72, 122, 0.14);
    --cc-header-h: 58px;
  }

  body {
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 225, 234, 0.9), transparent 28%),
      linear-gradient(180deg, #fff8f2 0%, #fff1f6 48%, #fffaf7 100%);
  }

  .cc-final-announcement {
    min-height: 28px;
    background: linear-gradient(90deg, #241316, #9f3158 48%, #241316);
  }

  .cc-final-announcement-track {
    animation-duration: 15s;
  }

  .cc-final-announcement span {
    padding: 8px 16px;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .navbar {
    top: calc(var(--admin-return-banner-height, 0px) + 28px);
    min-height: var(--cc-header-h);
    background: rgba(255, 248, 242, 0.98) !important;
    box-shadow: 0 8px 24px rgba(224, 72, 122, 0.12) !important;
  }

  .nav-inner {
    min-height: var(--cc-header-h) !important;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 8px 12px !important;
  }

  .logo {
    font-size: 1.08rem;
  }

  .mobile-commerce-menu,
  .mobile-commerce-icon {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    border-color: rgba(224, 72, 122, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(224, 72, 122, 0.1);
  }

  .cc-final-home {
    background: transparent;
  }

  .cc-final-search-button {
    min-height: 44px;
    margin-top: 10px;
    border-radius: 999px;
    border-color: rgba(224, 72, 122, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 24px rgba(224, 72, 122, 0.12);
    color: rgba(36, 19, 22, 0.58);
    font-size: 0.84rem;
  }

  .cc-final-category-rail {
    gap: 12px;
    padding: 14px 14px 2px;
  }

  .cc-final-category {
    flex-basis: 68px;
  }

  .cc-final-category img,
  .cc-final-category span:first-child {
    width: 62px;
    height: 62px;
    margin-bottom: 7px;
    border: 2px solid #fff;
    box-shadow: 0 8px 20px rgba(224, 72, 122, 0.18);
  }

  .cc-final-category b {
    font: 700 0.66rem/1.1 Jost, system-ui, sans-serif;
    color: var(--cc-soft-ink);
  }

  .cc-final-promo-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 6px;
  }

  .cc-final-promo-rail::-webkit-scrollbar {
    display: none;
  }

  .cc-final-promo-card {
    position: relative;
    flex: 0 0 78vw;
    max-width: 330px;
    min-height: 148px;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: 24px;
    background: #2c171b;
    color: #fff;
    box-shadow: 0 16px 34px rgba(224, 72, 122, 0.2);
    text-decoration: none;
  }

  .cc-final-promo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .cc-final-promo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(36, 19, 22, 0.76), rgba(224, 72, 122, 0.12));
  }

  .cc-final-promo-card span,
  .cc-final-promo-card strong,
  .cc-final-promo-card em {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 58%;
    margin-left: 16px;
  }

  .cc-final-promo-card span {
    width: max-content;
    margin-top: 16px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--cc-hot);
    font: 800 0.56rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .cc-final-promo-card strong {
    margin-top: 12px;
    font: 700 1.28rem/1.02 "Playfair Display", Georgia, serif;
  }

  .cc-final-promo-card em {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.84);
    font: 700 0.72rem/1.2 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-final-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 10px 14px 2px;
  }

  .cc-final-trust span {
    min-height: 38px;
    border-radius: 999px;
    background: #fff;
    color: var(--cc-hot);
    font-size: 0.66rem;
    box-shadow: 0 8px 18px rgba(224, 72, 122, 0.08);
  }

  .cc-final-section {
    padding-top: 18px;
  }

  .cc-final-section--tight {
    padding-top: 14px;
  }

  .cc-final-head {
    padding: 0 14px 10px;
    align-items: center;
  }

  .cc-final-kicker {
    margin-bottom: 5px;
    color: var(--cc-hot);
    font-size: 0.58rem;
  }

  .cc-final-title {
    font: 800 1.08rem/1.08 Jost, system-ui, sans-serif;
  }

  .cc-final-link {
    color: var(--cc-hot);
    font-size: 0.62rem;
  }

  .cc-final-rail {
    gap: 12px;
    padding: 0 14px 8px;
  }

  .cc-final-product {
    position: relative;
    flex: 0 0 44vw;
    min-width: 148px;
    max-width: 178px;
    display: grid;
    grid-template-rows: auto auto auto;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(224, 72, 122, 0.14);
  }

  .cc-final-product-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 22px 22px 16px 16px;
    aspect-ratio: 4 / 5;
    background: var(--cc-candy);
  }

  .cc-final-product-media img,
  .cc-final-product img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  .cc-final-badge,
  .cc-final-heart,
  .cc-final-quick {
    position: absolute;
    z-index: 2;
  }

  .cc-final-badge {
    left: 9px;
    top: 9px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 24px);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--cc-hot);
    font: 900 0.55rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-style: normal;
    transform: none;
  }

  .cc-final-heart,
  .cc-final-quick {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--cc-hot);
    box-shadow: 0 8px 18px rgba(36, 19, 22, 0.14);
    font: 900 1rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-heart {
    right: 9px;
    top: 9px;
  }

  .cc-final-heart.is-active {
    background: var(--cc-hot);
    color: #fff;
  }

  .cc-final-quick {
    right: 9px;
    bottom: 9px;
    background: #241316;
    color: #fff;
  }

  .cc-final-product-name,
  .cc-final-product span:not(.cc-final-product-media):not(.cc-final-price-row) {
    min-height: 34px;
    margin: 9px 10px 3px;
    color: var(--cc-ink);
    font: 800 0.78rem/1.16 Jost, system-ui, sans-serif;
  }

  .cc-final-price-row {
    display: flex !important;
    min-height: 22px;
    align-items: baseline;
    gap: 5px;
    margin: 0 10px 12px !important;
    overflow: hidden;
    white-space: nowrap;
  }

  .cc-final-price-row strong {
    margin: 0;
    color: var(--cc-hot);
    font: 900 0.84rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-price-row s {
    color: rgba(36, 19, 22, 0.38);
    font: 700 0.66rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-price-row em {
    color: #15935f;
    font: 900 0.58rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-final-collection-grid {
    gap: 10px;
    padding: 0 14px;
  }

  .cc-final-collection {
    min-height: 124px;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(224, 72, 122, 0.14);
  }

  .cc-final-gallery-rail {
    gap: 10px;
    padding: 0 14px 8px;
  }

  .cc-final-gallery-rail img {
    flex-basis: 38vw;
    width: 38vw;
    border-radius: 22px;
    box-shadow: 0 12px 24px rgba(224, 72, 122, 0.14);
  }

  .cc-final-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px;
  }

  .cc-final-review,
  .cc-final-faq details {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(224, 72, 122, 0.1);
  }

  .cc-final-footer {
    margin-top: 18px;
    padding: 28px 16px 18px;
    background: linear-gradient(135deg, #241316, #7c2749);
  }

  .product-grid-lux {
    gap: 14px 10px !important;
  }

  .product-card-lux {
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 30px rgba(224, 72, 122, 0.14) !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .lux-img-container {
    border-radius: 22px 22px 16px 16px !important;
  }

  .lux-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 5 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .mobile-product-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 20px) !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .mobile-product-badge,
  .lux-badge {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--cc-hot) !important;
    box-shadow: 0 8px 18px rgba(36, 19, 22, 0.12);
  }

  .lux-quick-add {
    display: block !important;
    position: absolute !important;
    right: 9px !important;
    bottom: 9px !important;
  }

  .lux-quick-add-btn {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    overflow: hidden;
    border-radius: 50% !important;
    padding: 0 !important;
    background: #241316 !important;
    color: transparent !important;
    box-shadow: 0 8px 18px rgba(36, 19, 22, 0.16) !important;
  }

  .lux-quick-add-btn::after {
    content: "+";
    color: #fff;
    font: 900 1.05rem/1 Jost, system-ui, sans-serif;
  }

  .lux-product-info {
    padding: 9px 10px 11px !important;
  }

  .lux-product-name {
    min-height: 34px;
    font: 800 0.78rem/1.16 Jost, system-ui, sans-serif !important;
  }

  .lux-cart-btn {
    min-height: 34px;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #241316, #e0487a) !important;
  }

  .mobile-bottom-nav,
  .cc-global-bottom-nav {
    border-radius: 24px;
    border: 0;
    box-shadow: 0 14px 34px rgba(224, 72, 122, 0.22);
  }

  .product-img-frame {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 14px !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 34px rgba(224, 72, 122, 0.16);
  }

  .pdp-zoom-trigger,
  .pdp-float-btn {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--cc-hot) !important;
    box-shadow: 0 8px 18px rgba(36, 19, 22, 0.14) !important;
  }

  .product-gallery-thumbs {
    padding: 10px 14px 2px !important;
  }

  .product-info-col {
    padding: 0 14px !important;
  }

  .product-category-tag,
  .pdp-rating-row,
  .pdp-promise-row,
  .product-meta-grid,
  .pdp-benefit-grid article,
  .pdp-story-card,
  .pdp-review-system,
  .pdp-faq details,
  .trust-pillar {
    border: 0 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 24px rgba(224, 72, 122, 0.1) !important;
  }

  .product-title {
    font-family: Jost, system-ui, sans-serif !important;
    font-weight: 900 !important;
  }

  .product-price-main {
    color: var(--cc-hot) !important;
  }

  .pdp-sticky-buy {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(224, 72, 122, 0.22) !important;
  }

  .pdp-buy-now,
  .btn-add-cart {
    border-radius: 999px !important;
    background: linear-gradient(90deg, #241316, #e0487a) !important;
  }

  .related-card {
    border-radius: 22px !important;
    box-shadow: 0 14px 30px rgba(224, 72, 122, 0.14);
  }
}

@media (max-width: 768px) {
  :root {
    --cc-ink: #211816;
    --cc-soft-ink: rgba(33, 24, 22, 0.68);
    --cc-muted: rgba(33, 24, 22, 0.54);
    --cc-rose: #a85f72;
    --cc-gold: #b89561;
    --cc-ivory: #fffaf6;
    --cc-blush: #fff3f5;
    --cc-line: rgba(33, 24, 22, 0.1);
    --cc-radius: 8px;
    --cc-shadow: 0 10px 24px rgba(56, 34, 30, 0.08);
    --cc-header-h: 72px;
    --cc-dock-h: 76px;
    --cc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cc-header-h) + 18px);
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: var(--cc-ivory);
    color: var(--cc-ink);
    padding-bottom: calc(var(--cc-dock-h) + 18px + env(safe-area-inset-bottom, 0px));
  }

  body.lux-drawer-open,
  body.lux-search-open,
  body.cc-modal-open,
  body.d7-menu-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y;
  }

  body > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  * {
    -webkit-tap-highlight-color: transparent;
  }

  .cc-loading-screen,
  .cc-mobile-brand,
  .mobile-commerce-rails,
  .cc-mobile-footer,
  .cc-onboarding-toast,
  .cc-recent-purchase,
  .cc-mini-cart,
  .mobile-promo-slider,
  .hero,
  .marquee-wrap,
  .d6-brand-story,
  .d6-marquee,
  .categories,
  .d6-campaign {
    display: none !important;
  }

  .cc-final-announcement {
    position: sticky;
    top: var(--admin-return-banner-height, 0px);
    z-index: 99;
    display: block;
    min-height: 32px;
    overflow: hidden;
    border-bottom: 1px solid var(--cc-line);
    background: #211816;
    color: #fffaf6;
  }

  .cc-final-announcement-track {
    display: flex;
    width: max-content;
    animation: ccFinalTicker 26s linear infinite;
  }

  .cc-final-announcement span {
    flex: 0 0 auto;
    padding: 10px 18px 9px;
    color: rgba(255, 250, 246, 0.9);
    font: 700 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @keyframes ccFinalTicker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .navbar {
    position: sticky;
    top: calc(var(--admin-return-banner-height, 0px) + 32px);
    z-index: 100;
    min-height: var(--cc-header-h);
    border-bottom: 1px solid rgba(33, 24, 22, 0.08);
    background: rgba(255, 250, 246, 0.96) !important;
    box-shadow: 0 8px 22px rgba(56, 34, 30, 0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: box-shadow 180ms ease, transform 220ms var(--cc-ease);
  }

  .nav-inner {
    min-height: var(--cc-header-h) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding: 10px 14px !important;
  }

  .logo {
    justify-self: center;
    color: var(--cc-ink);
    font: 600 1.16rem/1 "Playfair Display", Georgia, serif;
    letter-spacing: 0;
    white-space: nowrap;
    transform: none !important;
    position: static !important;
  }

  .nav-inner > .logo:first-child {
    grid-column: 1 / -1;
  }

  .mobile-commerce-menu,
  .mobile-commerce-actions {
    display: inline-flex !important;
  }

  .mobile-commerce-menu {
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
    box-shadow: none;
  }

  .mobile-commerce-actions {
    justify-self: end;
    gap: 8px;
  }

  .mobile-commerce-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
    color: var(--cc-ink);
  }

  .nav-links,
  .nav-actions,
  .mobile-commerce-search,
  .mobile-category-strip {
    display: none !important;
  }

  .cc-final-home {
    display: block;
    overflow-x: hidden;
    overflow-y: visible;
    background:
      linear-gradient(180deg, #fffaf6 0%, #fff 36%, #fff8f6 100%);
  }

  .cc-final-section {
    padding: 24px 0 0;
  }

  .cc-final-section--break {
    padding-top: 40px;
  }

  .cc-final-pad {
    padding-inline: 16px;
  }

  .cc-final-kicker {
    margin: 0 0 8px;
    color: var(--cc-rose);
    font: 700 0.66rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-final-title {
    margin: 0;
    color: var(--cc-ink);
    font: 500 1.32rem/1.12 "Playfair Display", Georgia, serif;
    letter-spacing: 0;
  }

  .cc-final-copy {
    margin: 8px 0 0;
    color: var(--cc-muted);
    font: 400 0.86rem/1.5 Jost, system-ui, sans-serif;
  }

  .cc-final-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px 12px;
  }

  .cc-final-link {
    flex: 0 0 auto;
    color: var(--cc-rose);
    font: 700 0.68rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .cc-final-search-button {
    width: calc(100% - 32px);
    min-height: 50px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 16px 16px 0;
    padding: 0 14px;
    border: 1px solid rgba(33, 24, 22, 0.12);
    border-radius: var(--cc-radius);
    background: #fff;
    color: var(--cc-muted);
    box-shadow: var(--cc-shadow);
    font: 400 0.9rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-search-button strong {
    justify-self: end;
    color: var(--cc-rose);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .cc-final-category-rail,
  .cc-final-rail,
  .cc-final-gallery-rail,
  .product-gallery-thumbs,
  .related-grid,
  .pdp-review-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .cc-final-category-rail::-webkit-scrollbar,
  .cc-final-rail::-webkit-scrollbar,
  .cc-final-gallery-rail::-webkit-scrollbar,
  .product-gallery-thumbs::-webkit-scrollbar,
  .related-grid::-webkit-scrollbar,
  .pdp-review-rail::-webkit-scrollbar {
    display: none;
  }

  .cc-final-category-rail {
    padding: 18px 16px 4px;
  }

  .cc-final-category {
    flex: 0 0 72px;
    scroll-snap-align: start;
    color: var(--cc-ink);
    text-align: center;
    text-decoration: none;
  }

  .cc-final-category img,
  .cc-final-category span:first-child {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 1px solid rgba(33, 24, 22, 0.1);
    background: #fff;
    object-fit: cover;
    object-position: center;
  }

  .cc-final-category b {
    display: block;
    font: 500 0.72rem/1.18 Jost, system-ui, sans-serif;
  }

  .cc-final-hero {
    display: block;
    margin-top: 24px;
  }

  .cc-final-hero-card {
    position: relative;
    display: block;
    min-height: clamp(360px, 88dvw, 520px);
    overflow: hidden;
    color: #fff;
    background: #211816;
    text-decoration: none;
  }

  .cc-final-hero-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .cc-final-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(33, 24, 22, 0.04), rgba(33, 24, 22, 0.58));
  }

  .cc-final-hero-content {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 1;
  }

  .cc-final-hero-content h1 {
    max-width: 12ch;
    margin: 0;
    font: 500 2rem/1 "Playfair Display", Georgia, serif;
    letter-spacing: 0;
  }

  .cc-final-hero-content p {
    max-width: 28ch;
    margin: 10px 0 18px;
    color: rgba(255, 255, 255, 0.82);
    font: 400 0.9rem/1.5 Jost, system-ui, sans-serif;
  }

  .cc-final-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: var(--cc-radius);
    background: #fffaf6;
    color: var(--cc-ink);
    font: 700 0.72rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cc-final-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
  }

  .cc-final-trust span {
    min-height: 66px;
    display: grid;
    place-items: center;
    padding: 10px 6px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
    color: var(--cc-soft-ink);
    text-align: center;
    font: 600 0.68rem/1.25 Jost, system-ui, sans-serif;
  }

  .cc-final-rail {
    padding: 0 16px 10px;
  }

  .cc-final-product {
    flex: 0 0 42vw;
    max-width: 172px;
    min-width: 142px;
    scroll-snap-align: start;
    overflow: hidden;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
    color: var(--cc-ink);
    text-decoration: none;
  }

  .cc-final-product img {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: block;
    object-fit: cover;
    object-position: center top;
    background: var(--cc-blush);
  }

  .cc-final-product span {
    display: -webkit-box;
    min-height: 38px;
    margin: 10px 10px 4px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font: 500 0.8rem/1.2 Jost, system-ui, sans-serif;
  }

  .cc-final-product strong {
    display: block;
    margin: 0 10px 12px;
    color: var(--cc-rose);
    font: 700 0.84rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-editorial,
  .cc-final-newsletter {
    margin: 0 16px;
    padding: 18px 16px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
    box-shadow: var(--cc-shadow);
  }

  .cc-final-editorial img {
    width: 100%;
    aspect-ratio: 16 / 11;
    display: block;
    margin-top: 14px;
    border-radius: var(--cc-radius);
    object-fit: cover;
    object-position: center top;
  }

  .cc-final-collection-grid {
    display: grid;
    gap: 12px;
    padding: 0 16px;
  }

  .cc-final-collection {
    position: relative;
    min-height: 158px;
    overflow: hidden;
    border-radius: var(--cc-radius);
    color: #fff;
    text-decoration: none;
    background: #211816;
  }

  .cc-final-collection img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .cc-final-collection::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(33, 24, 22, 0.64), rgba(33, 24, 22, 0.08));
  }

  .cc-final-collection div {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 1;
  }

  .cc-final-collection strong {
    display: block;
    font: 500 1.18rem/1.1 "Playfair Display", Georgia, serif;
  }

  .cc-final-collection span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.78);
    font: 400 0.78rem/1.3 Jost, system-ui, sans-serif;
  }

  .cc-final-proof {
    padding: 0 16px;
  }

  .cc-final-proof blockquote {
    margin: 0;
    padding: 18px 16px;
    border-left: 1px solid var(--cc-gold);
    background: #fff;
    color: var(--cc-soft-ink);
    font: 400 0.92rem/1.55 "Playfair Display", Georgia, serif;
  }

  .cc-final-gallery-rail {
    display: flex;
    gap: 10px;
    padding: 0 16px 10px;
  }

  .cc-final-gallery-rail img {
    flex: 0 0 34vw;
    width: 34vw;
    max-width: 142px;
    aspect-ratio: 3 / 4;
    scroll-snap-align: start;
    border-radius: var(--cc-radius);
    object-fit: cover;
    object-position: center top;
    background: var(--cc-blush);
  }

  .cc-final-review-grid,
  .cc-final-faq {
    display: grid;
    gap: 10px;
    padding: 0 16px;
  }

  .cc-final-review,
  .cc-final-faq details {
    padding: 14px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fff;
  }

  .cc-final-review strong,
  .cc-final-faq summary {
    color: var(--cc-ink);
    font: 600 0.86rem/1.3 Jost, system-ui, sans-serif;
  }

  .cc-final-review p,
  .cc-final-faq p {
    margin: 8px 0 0;
    color: var(--cc-muted);
    font: 400 0.82rem/1.5 Jost, system-ui, sans-serif;
  }

  .cc-final-newsletter form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
    margin-top: 14px;
  }

  .cc-final-newsletter input,
  .cc-final-newsletter button {
    min-height: 44px;
    border-radius: var(--cc-radius);
    font: 500 0.82rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-newsletter input {
    min-width: 0;
    border: 1px solid var(--cc-line);
    padding: 0 12px;
    background: #fffaf6;
  }

  .cc-final-newsletter button {
    border: 0;
    background: var(--cc-ink);
    color: #fff;
  }

  .cc-final-footer {
    padding: 40px 16px 18px;
    background: #211816;
    color: rgba(255, 250, 246, 0.82);
  }

  .cc-final-footer-brand {
    color: #fffaf6;
    font: 500 1.4rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-final-footer nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  .cc-final-footer a {
    color: rgba(255, 250, 246, 0.74);
    font: 500 0.78rem/1.2 Jost, system-ui, sans-serif;
    text-decoration: none;
  }

  .bestsellers.section {
    padding: 40px 0 10px !important;
    background: #fff;
  }

  .bestsellers .container {
    width: 100%;
    padding-inline: 16px;
  }

  .bestsellers-header-d3 {
    text-align: left;
  }

  .bestsellers-tagline,
  .collection-divider,
  .collection-footer-note {
    display: none !important;
  }

  .lux-filter-bar {
    position: sticky;
    top: calc(var(--admin-return-banner-height, 0px) + 32px + var(--cc-header-h) - 1px);
    z-index: 120;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px -16px 18px;
    padding: 12px 16px;
    border-block: 1px solid var(--cc-line);
    border-radius: 0 !important;
    background: rgba(255, 250, 246, 0.98);
    box-shadow: 0 8px 18px rgba(56, 34, 30, 0.05);
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-global-bottom-nav.mobile-bottom-nav {
    z-index: 120 !important;
  }

  .lux-filter-label {
    display: none;
  }

  .lux-search-wrap {
    width: 100%;
    min-width: 0;
  }

  .lux-search-input {
    min-height: 44px;
    border-radius: var(--cc-radius) !important;
    background: #fff !important;
  }

  .lux-selects {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .lux-select {
    width: 100%;
    min-height: 42px;
    border-radius: var(--cc-radius) !important;
    background: #fff !important;
    font-size: 0.78rem;
  }

  .product-grid-lux {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .product-card-lux {
    display: grid !important;
    grid-template-rows: auto 1fr;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--cc-line) !important;
    border-radius: var(--cc-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    will-change: auto !important;
    /* paint-only containment: does NOT create a new layout containing block,
       so absolutely-positioned badge children render correctly */
    contain: paint;
  }

  .lux-img-container {
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: var(--cc-blush);
  }

  .lux-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    transition: opacity 160ms ease !important;
    filter: none !important;
    content-visibility: auto;
  }

  .lux-hover-layer,
  .lux-quick-add {
    display: none !important;
  }

  /* ── Badge visibility: show badges, hide non-badge overlay elements ── */
  .lux-badges {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 5 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  .mobile-product-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 20px) !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .lux-product-info {
    display: grid !important;
    grid-template-rows: auto auto auto 1fr auto auto;
    gap: 6px;
    padding: 10px !important;
  }

  .lux-product-name {
    min-height: 38px;
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--cc-ink) !important;
    font: 500 0.82rem/1.22 Jost, system-ui, sans-serif !important;
    text-decoration: none;
  }

  .lux-product-desc,
  .lux-product-category {
    display: none !important;
  }

  .mobile-product-rating {
    display: block !important;
    color: var(--cc-muted);
    font-size: 0.68rem;
  }

  .lux-product-bottom {
    align-self: end;
    display: grid !important;
    gap: 4px;
    min-height: 42px;
  }

  .lux-price {
    color: var(--cc-rose) !important;
    font: 700 0.9rem/1 Jost, system-ui, sans-serif !important;
  }

  .lux-cart-btn {
    width: 100%;
    min-height: 38px;
    margin-top: 4px;
    border-radius: var(--cc-radius) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    box-shadow: none !important;
  }

  .lux-empty-state {
    grid-column: 1 / -1;
    padding: 28px 18px;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: #fffaf6;
    text-align: center;
  }

  .mobile-bottom-nav,
  .cc-global-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    min-height: 62px;
    padding: 7px 8px;
    border: 1px solid rgba(33, 24, 22, 0.1);
    border-radius: var(--cc-radius);
    background: rgba(255, 250, 246, 0.98);
    box-shadow: 0 12px 30px rgba(56, 34, 30, 0.14);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-bottom-tab {
    min-width: 0;
    display: grid;
    place-items: center;
    gap: 3px;
    color: var(--cc-muted);
    text-decoration: none;
    font: 600 0.62rem/1 Jost, system-ui, sans-serif;
  }

  .mobile-bottom-tab svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-bottom-tab.is-active {
    color: var(--cc-rose);
  }

  .lux-mobile-drawer {
    top: calc(var(--admin-return-banner-height, 0px) + 10px);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(88vw, 360px);
    overflow: hidden !important;
    border-radius: 0 var(--cc-radius) var(--cc-radius) 0 !important;
    background: #fffaf6 !important;
    box-shadow: 18px 0 38px rgba(33, 24, 22, 0.18) !important;
    transform: translateX(-104%) !important;
    transition: transform 280ms var(--cc-ease) !important;
    will-change: transform;
    max-height: calc(100dvh - var(--admin-return-banner-height, 0px) - 20px - env(safe-area-inset-bottom, 0px));
  }

  .lux-mobile-drawer.is-open {
    transform: translateX(0) !important;
  }

  .lux-drawer-scroll,
  .lux-search-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .lux-search-overlay {
    z-index: 200;
    background: #fffaf6 !important;
    transform: none !important;
    overflow: hidden !important;
    height: 100dvh;
  }

  .lux-mobile-drawer-backdrop,
  .cc-filter-sheet-backdrop,
  .cc-bottom-sheet-backdrop,
  .cc-newsletter-backdrop {
    z-index: 150 !important;
    touch-action: pan-y;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-mobile-filter-trigger,
  .cc-mobile-sort-trigger {
    z-index: 110 !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: var(--cc-radius) !important;
    box-shadow: 0 10px 22px rgba(56, 34, 30, 0.12) !important;
  }

  .cc-filter-sheet,
  .cc-bottom-sheet,
  .cc-newsletter-modal {
    z-index: 200 !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .lux-search-field,
  .lux-search-close,
  .lux-search-chip,
  .lux-category-chip,
  .lux-suggestion-item,
  .lux-search-product {
    border-radius: var(--cc-radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-filter-sheet,
  .cc-bottom-sheet,
  .cc-newsletter-modal {
    border-radius: 28px 28px 0 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-bottom-sheet,
  .cc-newsletter-modal {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    display: block !important;
    padding: 14px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-bottom: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 252, 249, 0.99), rgba(255, 244, 248, 0.98)),
      #fffaf6 !important;
    box-shadow: 0 -14px 32px rgba(56, 34, 30, 0.14) !important;
    transform: translate3d(0, calc(100% + 120px), 0) !important;
    transition: transform 360ms var(--cc-ease) !important;
    will-change: transform;
  }

  .cc-bottom-sheet.is-open,
  .cc-newsletter-modal.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .cc-newsletter-modal {
    display: grid !important;
    gap: 12px;
    color: var(--cc-ink);
  }

  .cc-sheet-handle {
    margin-bottom: 6px !important;
  }

  .cc-newsletter-close {
    top: 14px !important;
    right: 16px !important;
    z-index: 2;
  }

  .cc-newsletter-modal .cc-sheet-title {
    max-width: calc(100% - 48px);
    margin: 2px 0 0 !important;
    font: 500 1.42rem/1.08 "Playfair Display", Georgia, serif !important;
    letter-spacing: 0 !important;
  }

  .cc-newsletter-modal .cc-sheet-copy {
    margin: 0 !important;
    color: var(--cc-muted) !important;
    font: 400 0.9rem/1.48 Jost, system-ui, sans-serif !important;
  }

  .cc-newsletter-modal input {
    min-height: 50px !important;
    margin-top: 2px !important;
    border-radius: 18px !important;
    background: #fff !important;
  }

  .cc-newsletter-submit {
    min-height: 50px !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #211816, #8d4b5f) !important;
    color: #fffaf6 !important;
    box-shadow: 0 10px 22px rgba(56, 34, 30, 0.14) !important;
  }

  .cc-filter-sheet {
    bottom: 0 !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .product-page {
    min-height: 100dvh !important;
    padding: 18px 0 calc(98px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  .product-page .container,
  #productContent,
  .product-layout,
  .product-img-col {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  .product-layout,
  .product-skeleton {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  .product-skeleton .skeleton-img,
  .product-skeleton .skeleton-block {
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  .product-img-col {
    position: static !important;
  }

  .product-img-frame {
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    aspect-ratio: 4 / 5 !important;
    min-height: auto !important;
    max-height: min(68dvh, 560px) !important;
    overflow: hidden !important;
  }

  .product-img-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    filter: none !important;
  }

  .product-gallery-thumbs {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 16px 2px;
    margin: 0 !important;
  }

  .product-gallery-thumb {
    flex: 0 0 58px;
    scroll-snap-align: start;
    border-radius: var(--cc-radius) !important;
  }

  .product-info-col {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
  }

  .product-img-caption,
  .product-info-col > *,
  .product-meta-grid,
  .product-actions,
  .trust-pillars,
  .pdp-benefit-grid,
  .pdp-story-card,
  .pdp-review-system,
  .pdp-faq {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .product-title {
    font: 500 1.55rem/1.12 "Playfair Display", Georgia, serif !important;
    letter-spacing: 0 !important;
  }

  .product-price-row,
  .price-row {
    align-items: baseline;
  }

  .product-actions {
    display: grid !important;
    gap: 10px;
  }

  .pdp-sticky-buy,
  .product-sticky-cta,
  .pdp-sticky-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 930 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.86fr) minmax(0, 1.18fr) !important;
    gap: 10px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--cc-line) !important;
    border-radius: 0 !important;
    background: rgba(255, 250, 246, 0.98) !important;
    box-shadow: 0 -10px 24px rgba(56, 34, 30, 0.1) !important;
    transform: translateY(110%);
    transition: transform 220ms var(--cc-ease) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .pdp-sticky-meta,
  .pdp-sticky-qty {
    min-width: 0;
  }

  .pdp-sticky-meta span,
  .pdp-sticky-meta strong,
  .pdp-sticky-qty span {
    white-space: nowrap;
  }

  .pdp-sticky-buy.is-visible,
  .product-sticky-cta.is-visible,
  .pdp-sticky-bar.is-visible {
    transform: translateY(0) !important;
  }

  .product-sticky-cta,
  .pdp-sticky-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pdp-sticky-buy button,
  .product-sticky-cta button,
  .pdp-sticky-bar button,
  .pdp-sticky-buy a,
  .product-sticky-cta a,
  .pdp-sticky-bar a {
    min-height: 48px !important;
    border-radius: var(--cc-radius) !important;
  }

  .related-grid {
    display: flex !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    padding-bottom: 10px;
  }

  .related-card {
    flex: 0 0 42vw;
    max-width: 174px;
    scroll-snap-align: start;
    border-radius: var(--cc-radius) !important;
    overflow: hidden;
  }

  .related-card-img {
    aspect-ratio: 4 / 5 !important;
  }

  @media (max-width: 360px) {
    .product-grid-lux {
      gap: 12px 8px !important;
    }

    .lux-product-info {
      padding: 9px !important;
    }

    .cc-final-product {
      flex-basis: 46vw;
      min-width: 132px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
    }
  }
}

/* Mobile commerce hotfix: sheet, rail, safe-area and overflow stability. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html {
    height: 100% !important;
    overflow-y: hidden !important;
  }

  body {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .navbar,
  .navbar.mobile-compact {
    z-index: 100 !important;
    min-height: var(--cc-header-h) !important;
    height: auto !important;
    padding: 0 !important;
  }

  .navbar .nav-inner,
  .navbar.mobile-compact .nav-inner {
    min-height: var(--cc-header-h) !important;
    height: var(--cc-header-h) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .mobile-bottom-nav,
  .cc-global-bottom-nav {
    z-index: 120 !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateZ(0);
  }

  .cc-newsletter-backdrop,
  .cc-bottom-sheet-backdrop,
  .cc-filter-sheet-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 150 !important;
    background: rgba(36, 19, 22, 0.34) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-newsletter-backdrop.is-open,
  .cc-bottom-sheet-backdrop.is-open,
  .cc-filter-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .cc-newsletter-modal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 200 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px !important;
    box-sizing: border-box !important;
    padding: 14px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 252, 249, 0.99), rgba(255, 244, 248, 0.99)),
      #fffaf6 !important;
    box-shadow: 0 -12px 28px rgba(56, 34, 30, 0.16) !important;
    transform: translate3d(0, calc(100% + 120px), 0) !important;
    transition: transform 340ms var(--cc-ease, cubic-bezier(0.16, 1, 0.3, 1)) !important;
    will-change: transform;
    touch-action: pan-y;
  }

  .cc-newsletter-modal.is-open {
    transform: translate3d(0, 0, 0) !important;
  }

  .cc-newsletter-modal .cc-sheet-handle {
    flex: 0 0 auto;
    width: 42px !important;
    height: 4px !important;
    margin: 0 auto 4px !important;
    border-radius: 999px;
    background: rgba(36, 19, 22, 0.18) !important;
  }

  .cc-newsletter-modal .cc-sheet-title,
  .cc-newsletter-modal .cc-sheet-copy,
  .cc-newsletter-modal input,
  .cc-newsletter-submit {
    flex: 0 0 auto;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cc-newsletter-modal .cc-sheet-title {
    max-width: calc(100% - 52px) !important;
    margin: 0 !important;
  }

  .cc-newsletter-modal .cc-sheet-copy {
    margin: 0 0 2px !important;
  }

  .cc-newsletter-modal input {
    min-height: 52px !important;
    padding-inline: 16px !important;
    border: 1px solid rgba(36, 19, 22, 0.12) !important;
    outline: none !important;
  }

  .cc-newsletter-submit {
    position: sticky;
    bottom: 0;
    min-height: 52px !important;
    margin-top: 2px !important;
  }

  .cc-bottom-sheet {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 82vh !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cc-filter-sheet {
    z-index: 200 !important;
    max-height: 82vh !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pdp-sticky-buy,
  .product-sticky-cta,
  .pdp-sticky-bar,
  .cc-mobile-filter-trigger,
  .cc-mobile-sort-trigger {
    z-index: 110 !important;
  }

  .pdp-sticky-buy,
  .product-sticky-cta,
  .pdp-sticky-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cc-final-home {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .cc-final-search-button {
    margin-top: 10px !important;
  }

  .cc-final-category-rail,
  .cc-final-promo-rail,
  .cc-final-rail,
  .cc-final-gallery-rail,
  .product-gallery-thumbs,
  .related-grid,
  .pdp-review-rail {
    display: flex !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
    scroll-padding-inline: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .cc-final-category-rail::after,
  .cc-final-promo-rail::after,
  .cc-final-rail::after,
  .cc-final-gallery-rail::after,
  .related-grid::after,
  .pdp-review-rail::after {
    content: "";
    flex: 0 0 2px;
  }

  .cc-final-category,
  .cc-final-promo-card,
  .cc-final-product,
  .cc-final-gallery-rail img,
  .related-card,
  .pdp-review-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .cc-final-promo-card {
    width: min(78vw, 330px) !important;
  }

  .cc-final-product,
  .related-card {
    width: min(42vw, 172px) !important;
    min-width: 142px !important;
    max-width: 172px !important;
  }

  .cc-final-promo-card img,
  .cc-final-product img,
  .cc-final-gallery-rail img,
  .cc-final-collection img,
  .lux-img-container img,
  .related-card-img img,
  .product-img-frame img {
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    filter: none !important;
  }

  .cc-final-promo-card,
  .cc-final-product,
  .cc-final-collection,
  .product-card-lux,
  .related-card {
    box-shadow: 0 10px 22px rgba(224, 72, 122, 0.1) !important;
  }

  .hero,
  .hero-inner,
  .hero-visual,
  .mobile-promo-slider,
  .cc-loading-screen {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Final app-authority overrides: keep the rebuilt mobile experience above older layers. */
@media (max-width: 768px) {
  .cc-app-header {
    min-height: 62px !important;
    background: rgba(255, 250, 245, 0.78) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
  }

  .cc-app-header .cc-app-header-inner {
    min-height: 62px !important;
    height: 62px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    padding: 8px 14px !important;
  }

  .cc-app-search-pill {
    min-height: 52px !important;
    margin: 14px 16px 0 !important;
    border-radius: 999px !important;
  }

  .cc-app-hero {
    display: block !important;
    padding: 10px 16px 4px !important;
  }

  .cc-app-hero-card {
    min-height: min(112vw, 470px) !important;
    border-radius: 30px !important;
  }

  .cc-app-bottom-nav.mobile-bottom-nav {
    min-height: 68px !important;
    border-radius: 28px !important;
    background: rgba(255, 250, 245, 0.86) !important;
    backdrop-filter: blur(16px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
  }

  .cc-app-home .cc-final-product {
    border-radius: 24px !important;
    box-shadow: 0 12px 28px rgba(64, 39, 34, 0.1) !important;
  }

  .cc-app-home .cc-final-product-media img {
    aspect-ratio: 4 / 5.25 !important;
  }

  .cc-app-home .cc-final-card-cta {
    display: grid !important;
  }
}

/* D16 mobile-first luxury app authority layer */
@media (max-width: 768px) {
  :root {
    --cc-app-ink: #211816;
    --cc-app-muted: rgba(33, 24, 22, 0.62);
    --cc-app-soft: #fffaf5;
    --cc-app-blush: #fff0f3;
    --cc-app-blush-2: #ffe4eb;
    --cc-app-rose: #a85f72;
    --cc-app-rose-2: #d88b9d;
    --cc-app-gold: #b99663;
    --cc-app-champagne: #f7ead8;
    --cc-app-line: rgba(33, 24, 22, 0.1);
    --cc-app-shadow: 0 18px 42px rgba(67, 40, 35, 0.14);
    --cc-app-soft-shadow: 0 10px 24px rgba(67, 40, 35, 0.09);
    --cc-app-ease: cubic-bezier(0.16, 1, 0.3, 1);
  }

  html {
    scroll-behavior: smooth;
    background: var(--cc-app-soft);
  }

  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(circle at 18% -6%, rgba(247, 234, 216, 0.95), transparent 35%),
      radial-gradient(circle at 98% 12%, rgba(255, 228, 235, 0.78), transparent 34%),
      linear-gradient(180deg, #fffaf5 0%, #fff2f5 48%, #fffaf7 100%) !important;
    color: var(--cc-app-ink);
    -webkit-tap-highlight-color: transparent;
  }

  body.lux-search-open,
  body.lux-drawer-open,
  body.cc-modal-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.cc-mobile-home-ready main > :not(#ccFinalHome),
  body.cc-mobile-home-ready > footer:not(.cc-final-footer) {
    display: none !important;
  }

  body.cc-mobile-home-ready main {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cc-final-announcement {
    display: block !important;
    position: relative;
    z-index: 90;
    height: 28px;
    overflow: hidden;
    background: #211816;
    color: #fffaf5;
  }

  .cc-final-announcement-track {
    display: flex;
    width: max-content;
    animation: ccLuxuryMarquee 22s linear infinite;
  }

  .cc-final-announcement span {
    flex: 0 0 auto;
    padding: 8px 18px;
    font: 700 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.86;
  }

  .cc-app-header.navbar {
    position: sticky !important;
    top: var(--admin-return-banner-height, 0px) !important;
    z-index: 180 !important;
    min-height: 62px !important;
    border: 0 !important;
    background: rgba(255, 250, 245, 0.84) !important;
    box-shadow: 0 8px 28px rgba(67, 40, 35, 0.07) !important;
    backdrop-filter: blur(16px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.16) !important;
  }

  .cc-app-header.is-glass {
    background: rgba(255, 250, 245, 0.72) !important;
    box-shadow: 0 12px 34px rgba(67, 40, 35, 0.12) !important;
  }

  .cc-app-header-inner {
    height: 62px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
    padding: 8px 13px !important;
    box-sizing: border-box;
  }

  .cc-app-logo {
    grid-column: 2;
    justify-self: center;
    color: var(--cc-app-ink) !important;
    font: 600 1.17rem/1 "Playfair Display", Georgia, serif !important;
    letter-spacing: 0 !important;
    text-decoration: none;
  }

  .cc-app-logo span {
    color: var(--cc-app-rose);
  }

  .cc-app-header-actions {
    display: flex !important;
    align-items: center;
    gap: 7px;
  }

  .cc-app-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(33, 24, 22, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    text-decoration: none;
    transition: transform 180ms var(--cc-app-ease), background 180ms ease, box-shadow 180ms ease;
  }

  .cc-app-icon-btn:active,
  .mobile-bottom-tab:active,
  .cc-final-product:active,
  .cc-final-promo-card:active,
  .cc-final-category:active {
    transform: scale(0.96);
  }

  .cc-app-icon-btn svg,
  .mobile-bottom-tab svg,
  .cc-final-heart svg,
  .cc-final-quick svg,
  .cc-app-cart-qty svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cc-app-icon-btn em {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--cc-app-rose);
    color: #fff;
    font: 800 0.58rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-final-home.cc-app-home {
    display: block !important;
    overflow: clip visible !important;
    padding: 0 0 28px !important;
    contain: layout style;
  }

  .cc-app-search-pill.cc-final-search-button {
    min-height: 52px !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 8px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(185, 150, 99, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--cc-app-ink) !important;
    box-shadow: 0 14px 32px rgba(67, 40, 35, 0.1) !important;
    text-align: left;
  }

  .cc-app-search-pill span {
    overflow: hidden;
    color: rgba(33, 24, 22, 0.52);
    font: 600 0.86rem/1 Jost, system-ui, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cc-app-search-pill strong {
    color: var(--cc-app-rose);
    font: 800 0.68rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cc-final-category-rail {
    display: flex !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 12px 16px 14px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch;
  }

  .cc-final-category-rail::-webkit-scrollbar,
  .cc-final-promo-rail::-webkit-scrollbar,
  .cc-app-cart-trust::-webkit-scrollbar,
  .acc-nav::-webkit-scrollbar {
    display: none;
  }

  .cc-final-category {
    flex: 0 0 76px !important;
    display: grid !important;
    justify-items: center;
    gap: 8px;
    color: var(--cc-app-ink);
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform 180ms var(--cc-app-ease);
  }

  .cc-final-category span {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    padding: 3px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff, var(--cc-app-blush));
    box-shadow: 0 12px 24px rgba(67, 40, 35, 0.12);
  }

  .cc-final-category img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .cc-final-category b {
    max-width: 76px;
    overflow: hidden;
    color: rgba(33, 24, 22, 0.72);
    font: 800 0.68rem/1.15 Jost, system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cc-app-hero {
    display: block !important;
    padding: 8px 16px 6px !important;
  }

  .cc-app-hero-card {
    position: relative;
    min-height: min(124vw, 520px) !important;
    display: block !important;
    overflow: hidden;
    border-radius: 32px !important;
    background: #211816;
    color: #fffaf5;
    box-shadow: 0 24px 52px rgba(67, 40, 35, 0.2);
    text-decoration: none;
    isolation: isolate;
  }

  .cc-app-hero-card img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: scale(1.01);
  }

  .cc-app-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(180deg, rgba(33, 24, 22, 0.02) 0%, rgba(33, 24, 22, 0.18) 44%, rgba(33, 24, 22, 0.76) 100%),
      radial-gradient(circle at 12% 14%, rgba(255, 250, 245, 0.2), transparent 36%);
  }

  .cc-app-hero-copy {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1;
  }

  .cc-app-hero-copy span,
  .cc-app-hero-glass span,
  .cc-final-kicker,
  .cc-app-overline {
    color: var(--cc-app-rose);
    font: 900 0.63rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .cc-app-hero-copy span {
    display: inline-flex;
    margin-bottom: 10px;
    color: rgba(255, 250, 245, 0.78);
  }

  .cc-app-hero-copy h1 {
    max-width: 12ch;
    margin: 0;
    color: #fffaf5;
    font: 500 clamp(2.08rem, 9.5vw, 3.1rem)/0.94 "Playfair Display", Georgia, serif !important;
    letter-spacing: 0 !important;
  }

  .cc-app-hero-copy p {
    max-width: 30ch;
    margin: 13px 0 16px;
    color: rgba(255, 250, 245, 0.84);
    font: 500 0.9rem/1.5 Jost, system-ui, sans-serif;
  }

  .cc-app-hero-copy strong {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 999px;
    background: #fffaf5;
    color: var(--cc-app-ink);
    font: 900 0.7rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cc-app-hero-glass,
  .cc-app-offer {
    position: absolute;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(255, 250, 245, 0.88);
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .cc-app-hero-glass {
    left: 14px;
    top: 14px;
    padding: 10px 13px;
    border-radius: 18px;
  }

  .cc-app-hero-glass b {
    display: block;
    margin-top: 4px;
    color: var(--cc-app-ink);
    font: 800 0.78rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-offer {
    right: 14px;
    top: 14px;
    padding: 10px 12px;
    border-radius: 18px;
    color: rgba(33, 24, 22, 0.72);
    font: 800 0.66rem/1.25 Jost, system-ui, sans-serif;
    text-align: center;
    animation: ccAppFloat 3.8s ease-in-out infinite;
  }

  .cc-app-offer b {
    color: var(--cc-app-rose);
  }

  .cc-final-promo-rail {
    display: flex !important;
    gap: 14px !important;
    padding: 16px 16px 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cc-final-promo-card {
    position: relative;
    flex: 0 0 min(78vw, 324px) !important;
    min-height: 142px;
    overflow: hidden;
    border-radius: 28px !important;
    background: var(--cc-app-ink);
    color: #fffaf5;
    box-shadow: var(--cc-app-shadow) !important;
    text-decoration: none;
    scroll-snap-align: start;
    isolation: isolate;
  }

  .cc-final-promo-card img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .cc-final-promo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(33, 24, 22, 0.72), rgba(33, 24, 22, 0.14));
  }

  .cc-final-promo-card span,
  .cc-final-promo-card strong,
  .cc-final-promo-card em {
    position: relative;
    z-index: 1;
    display: block;
    margin-left: 16px;
  }

  .cc-final-promo-card span {
    margin-top: 52px;
    color: rgba(255, 250, 245, 0.7);
    font: 900 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-final-promo-card strong {
    max-width: 12ch;
    margin-top: 6px;
    font: 500 1.42rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-final-promo-card em {
    margin-top: 5px;
    color: rgba(255, 250, 245, 0.82);
    font: 500 0.78rem/1.3 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-app-trust {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px !important;
    padding: 10px 16px 2px !important;
  }

  .cc-app-trust span {
    min-height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(185, 150, 99, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    color: rgba(33, 24, 22, 0.7);
    box-shadow: var(--cc-app-soft-shadow);
    font: 800 0.66rem/1.1 Jost, system-ui, sans-serif;
    text-align: center;
  }

  .cc-final-section {
    margin: 24px 0 0 !important;
    padding: 0 16px !important;
  }

  .cc-final-head {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px !important;
  }

  .cc-final-title {
    margin: 4px 0 0 !important;
    color: var(--cc-app-ink);
    font: 500 1.56rem/1.05 "Playfair Display", Georgia, serif !important;
    letter-spacing: 0 !important;
  }

  .cc-final-link {
    flex: 0 0 auto;
    color: var(--cc-app-rose);
    font: 900 0.66rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .cc-app-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    width: 100%;
  }

  .cc-app-product-grid .cc-final-product {
    position: relative;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid !important;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid rgba(185, 150, 99, 0.18) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 14px 30px rgba(67, 40, 35, 0.1) !important;
    animation: ccCardIn 520ms var(--cc-app-ease) both;
    animation-delay: calc(var(--delay, 0) * 45ms);
  }

  .cc-final-product-link,
  .cc-final-product-name {
    color: inherit;
    text-decoration: none;
  }

  .cc-final-product-link {
    display: block;
  }

  .cc-final-product-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 22px 22px 14px 14px;
    background: var(--cc-app-blush);
  }

  .cc-final-product-media img {
    width: 100% !important;
    aspect-ratio: 4 / 5.35 !important;
    display: block;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .cc-final-badge {
    position: absolute;
    left: 9px;
    top: 9px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 52px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 250, 245, 0.92);
    color: var(--cc-app-rose);
    font: 900 0.55rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    transform: none;
  }

  .cc-final-heart,
  .cc-final-quick {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--cc-app-soft-shadow);
    transition: transform 180ms var(--cc-app-ease), background 180ms ease, color 180ms ease;
  }

  .cc-final-heart {
    top: 9px;
    right: 9px;
    width: 34px;
    height: 34px;
    background: rgba(255, 250, 245, 0.94);
    color: var(--cc-app-rose);
  }

  .cc-final-heart.is-active {
    background: var(--cc-app-rose);
    color: #fff;
  }

  .cc-final-quick {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fff;
  }

  .cc-final-quick.is-active {
    transform: scale(1.12);
  }

  .cc-final-product-info {
    display: grid;
    gap: 8px;
    padding: 10px 10px 11px;
  }

  .cc-final-product-name {
    display: -webkit-box !important;
    min-height: 2.35em;
    overflow: hidden;
    color: var(--cc-app-ink);
    font: 800 0.82rem/1.18 Jost, system-ui, sans-serif !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cc-final-price-row {
    display: flex !important;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .cc-final-price-row strong {
    color: var(--cc-app-ink);
    font: 900 0.86rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-price-row s {
    color: rgba(33, 24, 22, 0.42);
    font: 700 0.66rem/1 Jost, system-ui, sans-serif;
  }

  .cc-final-price-row em {
    padding: 4px 6px;
    border-radius: 999px;
    background: var(--cc-app-champagne);
    color: #7f6137;
    font: 900 0.55rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-final-card-cta {
    min-height: 35px;
    display: grid !important;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fffaf5;
    font: 900 0.63rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .cc-app-mood-grid,
  .cc-app-story-grid,
  .cc-final-collection-grid {
    display: grid;
    gap: 12px;
  }

  .cc-app-mood,
  .cc-app-story,
  .cc-final-collection {
    position: relative;
    min-height: 158px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--cc-app-ink);
    color: #fffaf5;
    box-shadow: var(--cc-app-shadow);
    text-decoration: none;
    isolation: isolate;
  }

  .cc-app-mood img,
  .cc-app-story img,
  .cc-final-collection img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .cc-app-mood::after,
  .cc-app-story::after,
  .cc-final-collection::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(33, 24, 22, 0.76), rgba(33, 24, 22, 0.08));
  }

  .cc-app-mood span,
  .cc-app-mood strong,
  .cc-app-story div,
  .cc-final-collection div {
    position: relative;
    z-index: 1;
  }

  .cc-app-mood span,
  .cc-app-story span {
    display: block;
    margin: 88px 0 0 16px;
    color: rgba(255, 250, 245, 0.72);
    font: 900 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-mood strong,
  .cc-app-story strong {
    display: block;
    max-width: 15ch;
    margin: 6px 0 0 16px;
    font: 500 1.38rem/1.04 "Playfair Display", Georgia, serif;
  }

  .cc-app-story div,
  .cc-final-collection div {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
  }

  .cc-app-story span {
    margin: 0;
  }

  .cc-app-story strong {
    margin-left: 0;
  }

  .cc-final-collection strong,
  .cc-final-collection span {
    display: block;
  }

  .cc-final-collection strong {
    font: 500 1.34rem/1.05 "Playfair Display", Georgia, serif;
  }

  .cc-final-collection span {
    margin-top: 6px;
    color: rgba(255, 250, 245, 0.78);
    font: 600 0.82rem/1.3 Jost, system-ui, sans-serif;
  }

  .cc-final-footer {
    margin: 28px 16px 0 !important;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid rgba(185, 150, 99, 0.16);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-final-footer-brand {
    color: var(--cc-app-ink);
    font: 600 1.45rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-final-copy {
    margin: 8px 0 16px;
    color: var(--cc-app-muted);
    font: 500 0.84rem/1.45 Jost, system-ui, sans-serif;
  }

  .cc-final-footer nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 9px;
  }

  .cc-final-footer a {
    padding: 9px 11px;
    border-radius: 999px;
    background: var(--cc-app-blush);
    color: var(--cc-app-ink);
    font: 800 0.68rem/1 Jost, system-ui, sans-serif;
    text-decoration: none;
  }

  .cc-app-backdrop,
  .cc-app-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 205;
    border: 0;
    background: rgba(33, 24, 22, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }

  .cc-app-backdrop.is-open,
  .cc-app-cart-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .cc-app-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 230;
    width: min(90vw, 380px);
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 0 32px 32px 0;
    background:
      linear-gradient(180deg, rgba(255, 250, 245, 0.98), rgba(255, 241, 244, 0.98)),
      var(--cc-app-soft);
    box-shadow: 22px 0 48px rgba(33, 24, 22, 0.22);
    transform: translateX(-104%);
    transition: transform 360ms var(--cc-app-ease);
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-drawer.is-open {
    transform: translateX(0);
  }

  .cc-app-drawer-head,
  .cc-app-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .cc-app-drawer-head span,
  .cc-app-cart-head span {
    display: block;
    color: var(--cc-app-rose);
    font: 900 0.63rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .cc-app-drawer-head strong,
  .cc-app-cart-head strong {
    display: block;
    margin-top: 5px;
    color: var(--cc-app-ink);
    font: 500 1.32rem/1.06 "Playfair Display", Georgia, serif;
  }

  .cc-app-drawer-feature {
    position: relative;
    min-height: 150px;
    margin: 18px 0;
    overflow: hidden;
    border-radius: 26px;
    background: var(--cc-app-ink);
    color: #fffaf5;
    box-shadow: var(--cc-app-shadow);
  }

  .cc-app-drawer-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .cc-app-drawer-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(33, 24, 22, 0.76), rgba(33, 24, 22, 0.1));
  }

  .cc-app-drawer-feature div {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 1;
  }

  .cc-app-drawer-feature span,
  .cc-app-drawer-feature strong,
  .cc-app-drawer-feature a {
    display: block;
  }

  .cc-app-drawer-feature span {
    color: rgba(255, 250, 245, 0.72);
    font: 900 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-drawer-feature strong {
    margin-top: 5px;
    font: 500 1.4rem/1.05 "Playfair Display", Georgia, serif;
  }

  .cc-app-drawer-feature a {
    width: max-content;
    margin-top: 11px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #fffaf5;
    color: var(--cc-app-ink);
    font: 900 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .cc-app-menu-list,
  .cc-app-menu-foot {
    display: grid;
    gap: 10px;
  }

  .cc-app-menu-list a,
  .cc-app-menu-foot a {
    min-height: 62px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid rgba(185, 150, 99, 0.16);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    text-decoration: none;
  }

  .cc-app-menu-list img {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    object-fit: cover;
    object-position: center top;
  }

  .cc-app-menu-list b,
  .cc-app-menu-list em {
    display: block;
  }

  .cc-app-menu-list b {
    font: 800 0.92rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-menu-list em {
    margin-top: 4px;
    color: var(--cc-app-muted);
    font: 600 0.72rem/1.2 Jost, system-ui, sans-serif;
    font-style: normal;
  }

  .cc-app-menu-foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-app-line);
  }

  .cc-app-menu-foot a {
    min-height: 48px;
    grid-template-columns: 24px minmax(0, 1fr) 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font: 800 0.86rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(96px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(circle at 20% 0%, rgba(247, 234, 216, 0.98), transparent 35%),
      linear-gradient(180deg, rgba(255, 250, 245, 0.99), rgba(255, 241, 244, 0.99));
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: opacity 260ms ease, transform 340ms var(--cc-app-ease);
  }

  .cc-app-search-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .cc-app-search-top {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .cc-app-search-input {
    min-height: 52px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(185, 150, 99, 0.18);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-app-search-input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cc-app-ink);
    font: 600 0.94rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-search-body {
    overflow-y: auto;
    padding-top: 22px;
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-overline {
    margin: 18px 0 10px;
  }

  .cc-app-chip-row,
  .cc-app-search-cats,
  .cc-app-cart-trust {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-chip-row button,
  .cc-app-search-cats a,
  .cc-app-cart-trust span {
    flex: 0 0 auto;
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border: 1px solid rgba(185, 150, 99, 0.18);
    border-radius: 999px;
    background: #fff;
    color: var(--cc-app-ink);
    box-shadow: var(--cc-app-soft-shadow);
    font: 800 0.76rem/1 Jost, system-ui, sans-serif;
    text-decoration: none;
  }

  .cc-app-search-products {
    display: grid;
    gap: 10px;
    padding-bottom: 20px;
  }

  .cc-app-search-products a {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(185, 150, 99, 0.16);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--cc-app-ink);
    text-decoration: none;
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-app-search-products img {
    width: 60px;
    aspect-ratio: 1;
    border-radius: 17px;
    object-fit: cover;
    object-position: center top;
  }

  .cc-app-search-products span {
    overflow: hidden;
    font: 800 0.86rem/1.2 Jost, system-ui, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cc-app-search-products strong {
    color: var(--cc-app-rose);
    font: 900 0.82rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-cart-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 235;
    max-height: min(78dvh, 640px);
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    gap: 13px;
    padding: 9px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, #fffaf5, #fff2f4);
    box-shadow: 0 -22px 48px rgba(33, 24, 22, 0.22);
    transform: translateY(calc(100% + 120px));
    transition: transform 360ms var(--cc-app-ease);
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-cart-drawer.is-open {
    transform: translateY(0);
  }

  .cc-app-cart-grabber {
    width: 44px;
    height: 5px;
    margin: 0 auto 2px;
    border-radius: 999px;
    background: rgba(33, 24, 22, 0.16);
  }

  .cc-app-ship {
    padding: 13px;
    border: 1px solid rgba(185, 150, 99, 0.18);
    border-radius: 21px;
    background: #fff;
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-app-ship div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--cc-app-muted);
    font: 800 0.68rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cc-app-ship i {
    display: block;
    height: 7px;
    margin-top: 11px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-app-rose) var(--p), rgba(33, 24, 22, 0.08) var(--p));
  }

  .cc-app-cart-items {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cc-app-cart-items article {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(185, 150, 99, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--cc-app-soft-shadow);
  }

  .cc-app-cart-img {
    width: 62px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 18px;
    background: var(--cc-app-blush);
    color: var(--cc-app-rose);
    font: 900 0.78rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cc-app-cart-items strong,
  .cc-app-cart-items span {
    display: block;
  }

  .cc-app-cart-items strong {
    overflow: hidden;
    color: var(--cc-app-ink);
    font: 900 0.84rem/1.16 Jost, system-ui, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cc-app-cart-items span {
    margin-top: 3px;
    color: var(--cc-app-muted);
    font: 700 0.72rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-cart-items article > b {
    color: var(--cc-app-rose);
    font: 900 0.8rem/1 Jost, system-ui, sans-serif;
  }

  .cc-app-cart-qty {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 5px;
    border-radius: 999px;
    background: var(--cc-app-blush);
  }

  .cc-app-cart-qty button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--cc-app-ink);
  }

  .cc-app-cart-qty em {
    min-width: 16px;
    color: var(--cc-app-ink);
    font: 900 0.76rem/1 Jost, system-ui, sans-serif;
    font-style: normal;
    text-align: center;
  }

  .cc-app-empty-cart {
    padding: 26px 18px;
    border: 1px dashed rgba(185, 150, 99, 0.34);
    border-radius: 24px;
    background: #fff;
    text-align: center;
  }

  .cc-app-empty-cart strong,
  .cc-app-empty-cart span,
  .cc-app-empty-cart a {
    display: block;
  }

  .cc-app-empty-cart strong {
    color: var(--cc-app-ink);
    font: 500 1.38rem/1.08 "Playfair Display", Georgia, serif;
  }

  .cc-app-empty-cart span {
    max-width: 26ch;
    margin: 8px auto 0;
    color: var(--cc-app-muted);
    font: 600 0.84rem/1.45 Jost, system-ui, sans-serif;
  }

  .cc-app-empty-cart a,
  .cc-app-checkout {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fffaf5;
    font: 900 0.74rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .cc-app-checkout {
    justify-content: space-between;
    margin-top: 0;
    padding: 0 18px;
  }

  .cc-app-bottom-nav.mobile-bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 190 !important;
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 28px !important;
    background: rgba(255, 250, 245, 0.86) !important;
    box-shadow: 0 20px 48px rgba(67, 40, 35, 0.2) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  }

  .mobile-bottom-tab {
    min-width: 0;
    display: grid !important;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: rgba(33, 24, 22, 0.58) !important;
    font: 800 0.58rem/1 Jost, system-ui, sans-serif;
    text-decoration: none;
    transition: transform 180ms var(--cc-app-ease), background 180ms ease, color 180ms ease;
  }

  .mobile-bottom-tab.is-active {
    background: var(--cc-app-blush);
    color: var(--cc-app-rose) !important;
  }

  .mobile-bottom-tab span {
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cart-toast {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(18px) !important;
    width: auto !important;
    border-radius: 999px !important;
    background: rgba(33, 24, 22, 0.94) !important;
    color: #fffaf5 !important;
    box-shadow: var(--cc-app-shadow) !important;
    text-align: center;
  }

  .cart-toast.show {
    transform: translateY(0) !important;
  }

  .cart-page,
  .checkout-page,
  .auth-page,
  .cc-app-account-page,
  .cc-mobile-account-page,
  .cc-mobile-cart-page {
    min-height: 100dvh !important;
    padding: 18px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 16% 0%, rgba(247, 234, 216, 0.9), transparent 34%),
      linear-gradient(180deg, #fffaf5, #fff3f4 52%, #fffaf7) !important;
  }

  .cart-page .container,
  .checkout-page .container,
  .acc-container,
  .auth-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cart-header,
  .checkout-header {
    margin: 16px 0 18px !important;
  }

  .cart-header h1,
  .checkout-header h1,
  .panel-title {
    color: var(--cc-app-ink) !important;
    font: 500 2rem/1.05 "Playfair Display", Georgia, serif !important;
    letter-spacing: 0 !important;
  }

  .cart-layout,
  .checkout-layout,
  .acc-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .cart-item,
  .cart-summary,
  .cart-empty,
  .checkout-form-card,
  .checkout-summary,
  .auth-card,
  .acc-profile-card,
  .acc-nav,
  .acc-card,
  .stat-box,
  .order-card,
  .address-card {
    border: 1px solid rgba(185, 150, 99, 0.16) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--cc-app-soft-shadow) !important;
  }

  .cart-item {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .cart-item-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
  }

  .cart-item-right {
    grid-column: 1 / -1;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .qty-controls {
    min-height: 40px;
    border: 0 !important;
    background: var(--cc-app-blush) !important;
  }

  .qty-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .btn-remove,
  .btn-checkout,
  .btn-place-order,
  .btn-auth,
  .btn-google,
  .btn-prime,
  .btn-secondary,
  #toggleEditProfileBtn,
  #saveProfileBtn,
  #cancelEditProfileBtn {
    min-height: 48px !important;
    border-radius: 999px !important;
  }

  .btn-checkout,
  .btn-place-order,
  .btn-auth,
  .btn-prime {
    border: 0 !important;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose)) !important;
    color: #fffaf5 !important;
    box-shadow: var(--cc-app-soft-shadow) !important;
  }

  .cart-summary,
  .checkout-summary {
    position: static !important;
    order: 2;
  }

  .checkout-summary {
    order: -1;
  }

  .trust-banner,
  .cart-trust-strip,
  .summary-trust,
  .payment-secure-note {
    border-radius: 20px !important;
    background: var(--cc-app-blush) !important;
  }

  .checkout-form-card input,
  .checkout-form-card textarea,
  .auth-form-group input,
  .acc-card input,
  .acc-card textarea,
  .acc-card select {
    min-height: 50px !important;
    border: 1px solid rgba(185, 150, 99, 0.18) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .payment-method-options {
    grid-template-columns: 1fr !important;
  }

  .payment-method-option {
    border-radius: 20px !important;
    background: #fff !important;
  }

  .auth-card {
    width: 100% !important;
    padding: 24px 18px !important;
  }

  .auth-logo a {
    color: var(--cc-app-ink) !important;
    font: 600 1.72rem/1 "Playfair Display", Georgia, serif !important;
  }

  .auth-tabs {
    padding: 5px !important;
    border-radius: 999px !important;
    background: var(--cc-app-blush) !important;
  }

  .auth-tab {
    min-height: 42px !important;
    border-radius: 999px !important;
  }

  .auth-tab.active {
    background: #fff !important;
    color: var(--cc-app-rose) !important;
    box-shadow: var(--cc-app-soft-shadow) !important;
  }

  .cc-app-account-hero,
  .cc-mobile-account-page .cc-app-account-hero {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(185, 150, 99, 0.18);
    border-radius: 28px;
    background: linear-gradient(135deg, #fff, var(--cc-app-blush));
    box-shadow: var(--cc-app-shadow);
  }

  .cc-app-account-avatar,
  .cc-mobile-account-page .cc-app-account-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose));
    color: #fffaf5;
    font: 700 1.1rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-app-account-hero span,
  .cc-mobile-account-page .cc-app-account-hero span {
    color: var(--cc-app-rose);
    font: 900 0.62rem/1 Jost, system-ui, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cc-app-account-hero h1,
  .cc-mobile-account-page .cc-app-account-hero h1 {
    margin: 5px 0 6px;
    color: var(--cc-app-ink);
    font: 500 1.55rem/1 "Playfair Display", Georgia, serif;
  }

  .cc-app-account-hero p,
  .cc-mobile-account-page .cc-app-account-hero p {
    margin: 0;
    color: var(--cc-app-muted);
    font: 600 0.82rem/1.4 Jost, system-ui, sans-serif;
  }

  .acc-sidebar,
  .cc-mobile-account-page .acc-sidebar {
    position: static !important;
  }

  .acc-nav,
  .cc-mobile-account-page .acc-nav {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    padding: 8px !important;
    scrollbar-width: none;
  }

  .acc-nav-btn,
  .cc-mobile-account-page .acc-nav-btn {
    flex: 0 0 auto;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--cc-app-blush) !important;
    white-space: nowrap;
  }

  .acc-nav-btn.active,
  .cc-mobile-account-page .acc-nav-btn.active {
    background: var(--cc-app-ink) !important;
    color: #fffaf5 !important;
  }

  .stat-grid,
  .cc-mobile-account-page .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  @keyframes ccLuxuryMarquee {
    to { transform: translateX(-50%); }
  }

  @keyframes ccAppFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  @keyframes ccCardIn {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 360px) {
    .cc-app-header-inner {
      grid-template-columns: 40px minmax(0, 1fr) auto !important;
      padding-inline: 10px !important;
    }

    .cc-app-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 14px;
    }

    .cc-app-logo {
      font-size: 1.04rem !important;
    }

    .cc-app-product-grid {
      gap: 12px 10px;
    }

    .cc-final-product-info {
      padding: 9px 8px 10px;
    }

    .cc-final-card-cta {
      letter-spacing: 0.06em;
    }
  }

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

/* ============================================================
   D17 — MOBILE UX REFINEMENT PASS
   Issues fixed:
   1. Cart / bottom-sheet stuck overlay + scroll lock
   2. Homepage category rail = earrings only
   3. Hero section cleanup (spacing, overlap)
   4. Bottom nav refinement (lighter, floating)
   5. Full mobile spacing luxury pass
   ============================================================ */

@media (max-width: 768px) {

  /* ──────────────────────────────────────────────
     CART / BOTTOM-SHEET — COMPLETE FIX
     Proper z-index hierarchy:
       body           (scroll host)
       bottom-nav     z-index: 190
       backdrop       z-index: 200
       cart-drawer    z-index: 210
       menu-drawer    z-index: 220
       search-overlay z-index: 230
  ─────────────────────────────────────────────── */

  /* Scroll lock: ONLY applied when modal is open */
  body.cc-modal-open {
    overflow: hidden !important;
    touch-action: none !important;
    /* Do NOT apply position:fixed — causes scroll jump on iOS */
  }

  /* Cart backdrop — sits above bottom nav, below cart */
  .cc-app-cart-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
    border: 0 !important;
    background: rgba(33, 24, 22, 0.46) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 280ms ease !important;
    /* Critical: no backdrop-filter — causes compositing bugs */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-app-cart-backdrop.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Cart drawer — sits above backdrop */
  .cc-app-cart-drawer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    /* Bottom offset = bottom-nav height + safe area — NO overlap */
    bottom: 0 !important;
    z-index: 210 !important;
    /* Height: leaves breathing room above, never covers full screen */
    max-height: min(72dvh, 580px) !important;
    min-height: 220px;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 28px 28px 0 0 !important;
    background: linear-gradient(180deg, #fffaf5 0%, #fff4f6 100%) !important;
    box-shadow: 0 -20px 52px rgba(33, 24, 22, 0.22),
                0 -1px 0 rgba(185, 150, 99, 0.14) !important;
    /* Starts fully below viewport */
    transform: translateY(100%) !important;
    transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform !important;
  }

  .cc-app-cart-drawer.is-open {
    transform: translateY(0) !important;
  }

  /* Cart inner scroll area */
  .cc-app-cart-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Grabber handle */
  .cc-app-cart-grabber {
    width: 40px !important;
    height: 4px !important;
    margin: 10px auto 8px !important;
    border-radius: 999px !important;
    background: rgba(33, 24, 22, 0.14) !important;
    flex: 0 0 auto;
  }

  /* Cart head */
  .cc-app-cart-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 16px 12px !important;
    flex: 0 0 auto;
  }

  /* Shipping progress bar */
  .cc-app-ship {
    flex: 0 0 auto;
    margin: 0 16px !important;
    padding: 12px !important;
    border: 1px solid rgba(185, 150, 99, 0.18) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 16px rgba(67, 40, 35, 0.07) !important;
  }

  /* Cart items scrollable */
  .cc-app-cart-items {
    display: grid !important;
    gap: 10px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Trust strip */
  .cc-app-cart-trust {
    flex: 0 0 auto;
    gap: 8px !important;
  }

  /* Checkout CTA */
  .cc-app-checkout {
    flex: 0 0 auto !important;
    min-height: 52px !important;
    margin: 4px 0 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, var(--cc-app-ink), var(--cc-app-rose)) !important;
    justify-content: space-between;
    padding-inline: 20px !important;
  }

  /* ──────────────────────────────────────────────
     CATEGORY RAIL — EARRINGS ONLY
     All other categories hidden via JS, but CSS
     fallback ensures only earrings show.
  ─────────────────────────────────────────────── */

  /* Hide all generated categories except earrings */
  .cc-final-category-rail .cc-final-category:not([data-final-category="everyday-elegance"]):not(.cc-cat-earrings) {
    display: none !important;
  }

  .cc-final-category-rail {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 18px 20px 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  /* Single earring category: luxurious, larger, editorial */
  .cc-final-category.cc-cat-earrings,
  .cc-final-category[data-final-category="everyday-elegance"] {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .cc-final-category.cc-cat-earrings span,
  .cc-final-category[data-final-category="everyday-elegance"] span {
    width: 82px !important;
    height: 82px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--cc-app-champagne), var(--cc-app-blush)) !important;
    box-shadow: 0 14px 32px rgba(67, 40, 35, 0.16) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
  }

  .cc-final-category.cc-cat-earrings b,
  .cc-final-category[data-final-category="everyday-elegance"] b {
    font: 900 0.74rem/1 Jost, system-ui, sans-serif !important;
    color: var(--cc-app-rose) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ──────────────────────────────────────────────
     HERO SECTION CLEANUP
  ─────────────────────────────────────────────── */

  .cc-app-hero {
    display: block !important;
    padding: 16px 16px 8px !important; /* More breathing room above */
  }

  .cc-app-hero-card {
    position: relative !important;
    min-height: min(118vw, 500px) !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    /* No additional fixed elements overlapping */
    isolation: isolate !important;
  }

  /* Hero copy: more generous bottom spacing */
  .cc-app-hero-copy {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 22px !important;
    z-index: 2 !important;
  }

  .cc-app-hero-copy h1 {
    max-width: 14ch !important;
    font: 500 clamp(2rem, 9vw, 2.9rem)/0.96 "Playfair Display", Georgia, serif !important;
    margin-bottom: 10px !important;
  }

  .cc-app-hero-copy p {
    margin: 10px 0 18px !important;
    max-width: 28ch !important;
    font-size: 0.88rem !important;
    line-height: 1.52 !important;
  }

  /* Glass badge: top-left, well above copy */
  .cc-app-hero-glass {
    top: 16px !important;
    left: 16px !important;
    z-index: 2 !important;
  }

  /* Offer badge: top-right */
  .cc-app-offer {
    top: 16px !important;
    right: 16px !important;
    z-index: 2 !important;
    /* Remove animation on small screens for performance */
    animation: none !important;
  }

  /* ──────────────────────────────────────────────
     BOTTOM NAVIGATION — REFINED, SUBTLE, FLOATING
  ─────────────────────────────────────────────── */

  .cc-app-bottom-nav.mobile-bottom-nav,
  .mobile-bottom-nav.cc-global-bottom-nav,
  .mobile-bottom-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 190 !important;
    /* Slimmer height */
    min-height: 60px !important;
    max-height: 60px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 6px !important;
    /* Refined frosted glass */
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 22px !important;
    background: rgba(255, 250, 245, 0.88) !important;
    box-shadow:
      0 8px 24px rgba(67, 40, 35, 0.12),
      0 2px 8px rgba(67, 40, 35, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
    transform: translateZ(0) !important;
  }

  /* Tab items: refined sizing */
  .mobile-bottom-tab {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: rgba(33, 24, 22, 0.46) !important;
    font: 700 0.57rem/1 Jost, system-ui, sans-serif !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
                background 160ms ease,
                color 160ms ease !important;
  }

  .mobile-bottom-tab svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.7 !important;
  }

  .mobile-bottom-tab span {
    font-size: 0.57rem !important;
  }

  .mobile-bottom-tab.is-active {
    background: rgba(255, 240, 243, 0.9) !important;
    color: var(--cc-app-rose) !important;
  }

  .mobile-bottom-tab:active {
    transform: scale(0.92) translateY(-1px) !important;
  }

  /* ──────────────────────────────────────────────
     BODY PADDING — account for slimmer nav
  ─────────────────────────────────────────────── */

  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ──────────────────────────────────────────────
     LUXURY SPACING PASS
  ─────────────────────────────────────────────── */

  /* Homepage: generous top breathing room */
  .cc-final-home.cc-app-home {
    padding: 0 0 32px !important;
  }

  /* Search pill */
  .cc-app-search-pill.cc-final-search-button {
    min-height: 54px !important;
    margin: 18px 16px 10px !important;
  }

  /* Category rail spacing */
  .cc-final-category-rail {
    padding: 10px 20px 18px !important;
  }

  /* Section spacing */
  .cc-final-section {
    margin: 28px 0 0 !important;
    padding: 0 16px !important;
  }

  /* Section head */
  .cc-final-head {
    margin: 0 0 16px !important;
  }

  /* Product grid */
  .cc-app-product-grid {
    gap: 16px 12px !important;
  }

  /* Product card inner spacing */
  .cc-final-product-info {
    gap: 10px !important;
    padding: 12px 12px 13px !important;
  }

  /* Promo rail */
  .cc-final-promo-rail {
    padding: 8px 16px 12px !important;
    gap: 14px !important;
  }

  /* Trust strip */
  .cc-app-trust,
  .cc-final-trust {
    gap: 10px !important;
    padding: 12px 16px 4px !important;
  }

  .cc-app-trust span,
  .cc-final-trust span {
    min-height: 46px !important;
    border-radius: 20px !important;
  }

  /* Story / mood grid */
  .cc-app-mood-grid,
  .cc-app-story-grid,
  .cc-final-collection-grid {
    gap: 14px !important;
  }

  /* Cart page bottom spacing */
  .cart-page,
  .cc-app-account-page {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Sticky cart CTA */
  .d11-sticky-cart-cta {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ──────────────────────────────────────────────
     DRAWER BACKDROP — correct z-index
  ─────────────────────────────────────────────── */

  .cc-app-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 215 !important;
    background: rgba(33, 24, 22, 0.44) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 260ms ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cc-app-backdrop.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .cc-app-drawer {
    z-index: 225 !important;
  }

  .cc-app-search-overlay {
    z-index: 235 !important;
  }

  /* ──────────────────────────────────────────────
     SORT BUTTON — clear of bottom nav
  ─────────────────────────────────────────────── */

  .cc-mobile-sort-trigger,
  .cc-mobile-filter-trigger {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 115 !important;
  }

  /* ──────────────────────────────────────────────
     PREVENT GHOST LAYERS
     Ensure nothing with is-open persists visually
  ─────────────────────────────────────────────── */

  .cc-app-cart-drawer:not(.is-open),
  .cc-app-drawer:not(.is-open),
  .cc-app-search-overlay:not(.is-open) {
    pointer-events: none !important;
  }

  .cc-app-cart-backdrop:not(.is-open),
  .cc-app-backdrop:not(.is-open) {
    pointer-events: none !important;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 0s 280ms !important;
  }

  .cc-app-cart-backdrop.is-open,
  .cc-app-backdrop.is-open {
    visibility: visible;
    transition: opacity 280ms ease, visibility 0s 0s !important;
  }
}

/* ──────────────────────────────────────────────
   SMALL SCREEN TWEAKS
─────────────────────────────────────────────── */
@media (max-width: 390px) {
  .cc-app-bottom-nav.mobile-bottom-nav,
  .mobile-bottom-nav {
    left: 8px !important;
    right: 8px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 20px !important;
  }

  .mobile-bottom-tab {
    height: 40px !important;
  }

  .mobile-bottom-tab svg {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-bottom-tab span {
    font-size: 0.54rem !important;
  }
}

/* Production mobile rescue: stabilize the active mobile layer without touching desktop. */
@media (max-width: 767px) {
  html {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  body {
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  body.lux-search-open,
  body.lux-drawer-open,
  body.cc-modal-open,
  body.d7-menu-open,
  body.ma-menu-open,
  body.p3-sheet-open {
    touch-action: pan-y;
  }

  body.cc-mobile-home-ready main > :not(#ccFinalHome),
  body.cc-mobile-home-ready > footer:not(.cc-final-footer) {
    display: revert !important;
  }

  body.cc-mobile-home-ready #ccFinalHome:empty {
    display: none !important;
  }

  .d6-reveal,
  .d6-reveal-left,
  .d6-reveal-right,
  .d6-reveal-scale {
    opacity: 1;
    visibility: visible;
  }

  .navbar,
  #navbar,
  .shop-header {
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .navbar .nav-inner,
  #navbar .nav-inner,
  .shop-header {
    min-height: 58px;
    align-items: center;
  }

  .navbar .logo,
  #navbar .logo,
  .shop-logo {
    line-height: 1;
    white-space: nowrap;
  }

  .shop-announcement {
    height: 30px;
    min-height: 30px;
  }

  .shop-header {
    top: 0;
    z-index: 130;
  }

  .shop-shell {
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .shop-search {
    margin-top: 0;
  }

  .shop-hero {
    margin-top: 8px;
  }

  .shop-bar {
    top: calc(58px + env(safe-area-inset-top, 0px));
  }

  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px 10px;
    padding: 12px 14px 18px;
    touch-action: pan-y;
  }

  .shop-card {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    contain: layout paint;
  }

  .shop-card-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }

  .shop-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .shop-card-badge {
    max-width: calc(100% - 54px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shop-card-body {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 7px;
    padding: 10px;
  }

  .shop-card h2 {
    min-height: 36px;
    margin: 0;
  }

  .shop-card button[data-add] {
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  .product-grid-lux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .product-card-lux {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    contain: layout paint;
  }

  .lux-img-container {
    aspect-ratio: 4 / 5;
  }

  .lux-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .lux-badges {
    top: 8px;
    left: 8px;
    right: 42px;
    align-items: flex-start;
  }

  .mobile-product-badge,
  .lux-badge {
    max-width: 100%;
    min-height: 22px;
    padding: 6px 8px;
    font-size: 0.55rem;
    line-height: 1;
    white-space: nowrap;
  }

  .lux-product-info {
    min-width: 0;
    gap: 7px;
    padding: 10px;
  }

  .lux-product-name {
    min-height: 36px;
    overflow: hidden;
  }

  .lux-cart-btn {
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  .ma-bottom-nav,
  .mobile-bottom-nav {
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    min-height: calc(62px + env(safe-area-inset-bottom, 0px));
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    padding: 4px 4px env(safe-area-inset-bottom, 0px);
  }

  .ma-nav-tab,
  .mobile-bottom-tab {
    min-width: 0;
    height: 52px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
  }

  .ma-nav-tab svg,
  .mobile-bottom-tab svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .ma-nav-tab span,
  .mobile-bottom-tab span {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.56rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .p5-sticky-checkout {
    left: 10px;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 170;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px 9px 14px;
    border-radius: 22px;
  }

  .p5-sticky-total {
    min-width: 0;
  }

  .p5-sticky-btn {
    min-height: 42px;
    padding: 0 16px;
    white-space: nowrap;
  }

  .cart-page {
    padding-bottom: calc(154px + env(safe-area-inset-bottom, 0px));
  }

  .acc-page.cc-app-account-page,
  .acc-page {
    padding-top: 72px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .cc-app-account-hero,
  .acc-profile-card,
  .acc-nav,
  .acc-card,
  .stat-box {
    border-radius: 20px;
  }

  .cc-app-account-hero {
    grid-template-columns: 64px minmax(0, 1fr);
    margin: 0 0 14px;
    padding: 16px;
  }

  .cc-app-account-avatar,
  .acc-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }

  .acc-profile-card {
    padding: 18px 14px;
  }

  .acc-nav {
    gap: 8px;
    padding: 8px;
  }

  .acc-card {
    padding: 16px;
  }

  .info-row {
    gap: 12px;
    align-items: flex-start;
  }

  .info-val {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}