/* Cheeko v2 visual language. The catalog layout and card artwork stay intact. */
:root {
  --brand: #F0521D;
  --brand-dark: #C93E0F;
  --ink: #231A10;
  --muted: #7A6E5D;
  --line: #EDE4D6;
  --tint: #FFF4E3;
  --soft: #F7F1E6;
  --sun: #FFC81A;
  --display-font: "Gabarito", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body-font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono-font: "Spline Sans Mono", ui-monospace, monospace;

  /* Bridge the existing catalog components to the v2 tokens. */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--soft);
  --text-main: var(--ink);
  --text-muted: var(--muted);
  --text-link: var(--brand);
  --color-border: var(--line);
  --color-border-active: var(--brand);
  --color-orange: var(--brand);
  --color-success: #2F6B4F;
  --font-family: var(--body-font);
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-sm: 0 8px 22px rgba(35, 26, 16, .10);
  --shadow-md: 0 18px 44px rgba(35, 26, 16, .13);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--body-font);
  color: var(--ink);
  line-height: 1.65;
  letter-spacing: 0;
  padding-bottom: 0;
}
button, input, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Header and logo use the same asset, type, and spacing as the v2 site. */
header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-container { min-height: 68px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.logo {
  width: 100px;
  height: 40px;
  flex: 0 0 100px;
  background: url("../img/logo.png") center / contain no-repeat;
  font-size: 0;
}
.logo-emoji, .logo > span:last-child { visibility: hidden; }
.header-links {
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 700;
}
.header-link { color: var(--ink); }
.header-link:hover, .header-link.active { color: var(--brand); }
.cart-trigger, .parent-mode-btn {
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--display-font);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(35, 26, 16, .05);
}
.cart-trigger:hover, .parent-mode-btn:hover {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--ink);
}
.cart-trigger {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}
.cart-trigger:hover {
  background: #473526;
  border-color: #473526;
  color: #FFFFFF;
}
#cartCountBadge { background: var(--sun); color: var(--ink); border-radius: 99px; }
#likedCardsBtn {
  background: #FFFFFF !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
#likedCardsBtn:hover { border-color: var(--brand) !important; }
#likedCountBadge { background: var(--brand) !important; }

/* Page heading and browsing controls. */
main > section:first-child > span {
  color: var(--brand) !important;
  font-family: var(--display-font);
  font-size: 13px !important;
  letter-spacing: .06em !important;
}
main > section:first-child > h1 {
  color: var(--ink) !important;
  font-family: var(--display-font);
  font-size: clamp(40px, 5.6vw, 68px) !important;
  font-weight: 800;
  letter-spacing: -.015em !important;
  line-height: 1.06 !important;
}
main > section:first-child > p {
  color: #6B5F4E !important;
  font-family: var(--body-font);
  line-height: 1.65;
}
.catalog-sidebar {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.filter-title {
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
}
.filter-checkbox-row { color: var(--ink); }
.filter-checkbox-row input { accent-color: var(--brand); }
.search-input, #sortSelect {
  color: var(--ink) !important;
  background: #FFFFFF;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  font-family: var(--body-font);
}
.search-input:focus, #sortSelect:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(240, 82, 29, .12);
}
.catalog-sidebar a[href="index.html"] {
  background: var(--brand) !important;
  border-radius: 99px !important;
  font-family: var(--display-font);
  font-weight: 800;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 10px 24px rgba(240, 82, 29, .24);
}
.catalog-sidebar a[href="index.html"]:hover { background: var(--brand-dark) !important; }
.catalog-tab {
  background: var(--soft);
  color: #6B5F4E;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-family: var(--display-font);
  font-size: 13.5px;
  font-weight: 800;
}
.catalog-tab:hover { color: var(--brand); background: var(--tint); }
.catalog-tab.active { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.category-header-block {
  background: var(--tint) !important;
  border-left-color: var(--brand) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.category-header-title {
  font-family: var(--display-font) !important;
  color: var(--ink) !important;
  letter-spacing: -.015em;
}
.category-header-desc { color: #6B5F4E !important; }
.catalog-counter { color: var(--muted); }

/* The existing artwork gradients and thumbnail symbols are deliberately untouched. */
.catalog-card-item { font-family: var(--body-font); }
.card-artwork-wrapper {
  box-shadow: 0 8px 22px rgba(35, 26, 16, .10);
}
.card-artwork-wrapper.has-image {
  aspect-ratio: 0.63;
  background: #FFFFFF;
}
.card-artwork-wrapper.myo.has-image { border: 0; }
.card-artwork-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.coming-soon-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(255, 250, 241, .76);
}
.coming-soon-overlay span {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 800;
}
.catalog-card-item:hover .card-artwork-wrapper {
  box-shadow: 0 18px 44px rgba(35, 26, 16, .17);
}
.catalog-card-item .play-btn:disabled,
.catalog-card-item .add-to-cart-btn:disabled,
.detail-modal-box button:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.card-ribbon, .card-ribbon.best-seller {
  background: var(--brand);
  border-radius: 99px;
  font-family: var(--display-font);
}
.play-preview-link, .play-btn {
  border-color: var(--brand);
  color: var(--brand);
  border-radius: 99px;
  font-family: var(--display-font);
  font-weight: 800;
}
.play-preview-link:hover, .play-btn:hover {
  background: var(--tint);
  opacity: 1;
}
.play-icon-blue, .play-btn.playing { background: var(--brand); }
.fav-btn { color: var(--muted); }
.fav-btn:hover, .fav-btn.active { color: var(--brand); }
.card-title-text, .catalog-card-title {
  color: var(--ink);
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: -.01em;
}
.card-author-text, .catalog-card-desc, .card-meta-info { color: var(--muted); }
.card-price-row > span { color: var(--ink) !important; font-family: var(--display-font); }
.card-price-row > .included-label { font-size: .82rem !important; color: var(--brand) !important; }
.card-price-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.add-to-cart-circle-btn {
  width: 100%;
  min-height: 42px;
  height: auto;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--display-font);
  font-size: .88rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(35, 26, 16, .22);
}
.add-to-cart-circle-btn:hover { background: #473526; }
.catalog-card-item .add-to-cart-btn:disabled {
  background: var(--soft);
  color: var(--muted);
  opacity: 1;
}
.age-badge-bottom, .lang-badge {
  background: var(--tint);
  color: #7A4E16;
  border-radius: 99px;
}

/* All overlays inherit the same cream surfaces and warm type. */
.modal-overlay, .cart-drawer-overlay { background: rgba(35, 26, 16, .42); }
.modal-box, .detail-modal-box {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(35, 26, 16, .18);
}
.modal-head, .cart-drawer-header { border-bottom: 1px solid var(--line); }
.modal-headline, .cart-drawer-title, .playback-title, .lock-title,
.detail-modal-title, .tracklist-heading, .share-heading, .dashboard-heading {
  font-family: var(--display-font);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.015em;
}
.modal-close-trigger, .cart-drawer-close { color: var(--muted); }
.modal-close-trigger:hover, .cart-drawer-close:hover { color: var(--brand); }
.rotating-vinyl-disk {
  background: var(--ink);
  border-color: var(--soft);
}
.minutes-pill, .active-profile-badge, .session-stat-pill {
  background: var(--tint);
  border-color: var(--line);
  color: var(--ink);
}
.profile-name, .tier-upgrade-label {
  font-family: var(--display-font);
  font-weight: 800;
  color: var(--ink);
}
.tier-upgrade-card { border-color: var(--line); border-radius: 16px; }
.tier-upgrade-card:hover { border-color: var(--brand); }
.detail-says-quote { font-family: var(--display-font); color: var(--brand); }
.playback-timer { color: var(--muted); font-family: var(--mono-font); }
.session-stat-pill, .step-indicator-wrapper {
  background: var(--tint);
  border-color: var(--line);
  color: var(--ink);
}
.action-cta-btn, .upgrade-btn-catalog, .card-btn-primary,
.detail-action-primary, .checkout-btn, .mic-pulse-btn {
  background: var(--brand);
  color: #FFFFFF;
  border-radius: 99px;
  font-family: var(--display-font);
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(240, 82, 29, .24);
}
.action-cta-btn:hover, .upgrade-btn-catalog:hover, .card-btn-primary:hover,
.detail-action-primary:hover, .checkout-btn:hover, .mic-pulse-btn:hover {
  background: var(--brand-dark);
}
.share-btn-action, .detail-action-secondary, .card-btn-secondary {
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: 99px;
  font-family: var(--display-font);
  font-weight: 800;
}
.share-btn-action:hover, .detail-action-secondary:hover, .card-btn-secondary:hover {
  background: var(--tint);
  border-color: var(--brand);
  color: var(--brand);
}
.detail-modal-price, .detail-modal-author { color: var(--brand); }
.detail-modal-price.included-label,
.detail-modal-price.coming-soon-label { font-size: .9rem !important; }
.detail-modal-price.coming-soon-label { color: var(--muted) !important; }
.detail-stats-grid, .tracklist-section, .share-section { border-color: var(--line); }
.detail-stat-item, .detail-desc-paragraph, .track-row { color: var(--ink); }
.track-duration { color: var(--muted); font-family: var(--mono-font); }
.chat-bubble.cheeko { background: var(--soft); color: var(--ink); }
.chat-bubble.child { background: var(--brand); color: #FFFFFF; }
.chat-status-tip { color: var(--muted); }
.tier-upgrade-card.active { border-color: var(--brand); background: var(--tint); }
.tier-upgrade-card.active .tier-upgrade-price { color: var(--brand); }
.stat-progress-fill, .stat-bar-item:nth-child(2) .stat-progress-fill { background: var(--brand); }
.stat-progress-bg { background: var(--soft); }
.toggle-slider { background: #C9BB9E; }
.toggle-switch-wrapper input:checked + .toggle-slider { background: var(--brand); }

/* Cart and its feedback states. */
.cart-drawer { background: #FFFFFF; box-shadow: -8px 0 32px rgba(35, 26, 16, .15); }
.cart-drawer-footer, .qty-btn, .cart-item-thumbnail { background: var(--soft); }
.cart-item-row, .cart-summary-row.total { border-color: var(--line); }
.cart-empty-state, .cart-item-meta, .cart-summary-row { color: var(--muted); }
.qty-btn:hover { background: var(--tint); }
.cart-item-price, .cart-summary-row.total { color: var(--ink); }
.cart-item-title { font-family: var(--display-font); }
.cart-item-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.qty-spinner { border-color: var(--line); border-radius: 8px; }
.cart-item-remove { color: var(--brand); }
footer { background: #FFFFFF !important; border-color: var(--line) !important; }

button:active, .catalog-sidebar a[href="index.html"]:active {
  transform: scale(.98);
}
@media (max-width: 768px) {
  .header-container { gap: 12px; }
  .header-links { gap: 12px; }
  .catalog-sidebar { border-radius: 16px; }
}
@media (max-width: 600px) {
  .container-fluid { padding-left: 16px; padding-right: 16px; }
  .header-container { flex-wrap: wrap; }
  .header-links { gap: 10px; font-size: 12px; }
  .profile-meta-wrap { width: 100%; justify-content: flex-end; }
  main > section:first-child > h1 { font-size: clamp(34px, 9vw, 44px) !important; }
  .catalog-tabs { overflow-x: auto; }
  .modal-box, .detail-modal-box { width: min(94vw, 600px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Keep the desktop catalog intact; make browsing and selecting comfortable on phones. */
.preview-label-mobile { display: none; }
.intro-mobile { display: none; }
@media (max-width: 768px) {
  .container-fluid { padding-left: 16px; padding-right: 16px; }
  main.container-fluid { padding-top: 24px !important; }
  main > section:first-child { margin-bottom: 24px !important; }
  main > section:first-child > h1 { font-size: clamp(32px, 7vw, 48px) !important; }
  main > section:first-child > p { font-size: .95rem !important; line-height: 1.45; }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 20px; }
  .catalog-layout > section { min-width: 0; }
  .catalog-sidebar { padding: 16px; }
  .catalog-sidebar .filter-group { margin-bottom: 16px; }
  .catalog-sidebar .filter-group:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .catalog-sidebar .filter-group:nth-child(2) .filter-title { grid-column: 1 / -1; margin-bottom: 0; }
  .filter-checkbox-row {
    min-height: 48px;
    margin: 0;
    padding: 8px 10px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #FFFFFF;
    font-size: .8rem;
    line-height: 1.2;
  }
  .filter-checkbox-row input { width: 18px; height: 18px; flex: 0 0 18px; }
  .search-wrapper { margin-bottom: 0; }
  .search-input { min-height: 48px; font-size: 16px; }
  .catalog-sidebar > div:last-child { margin-top: 16px !important; padding-top: 16px !important; }
  .catalog-sidebar a[href="index.html"] { min-height: 44px; display: flex !important; align-items: center; justify-content: center; }
  .catalog-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    gap: 8px !important;
    padding-bottom: 8px;
    margin-bottom: 14px !important;
    scroll-snap-type: x proximity;
  }
  .catalog-tab { flex: 0 0 auto; min-height: 44px; padding: 9px 14px; white-space: nowrap; scroll-snap-align: start; }
  .category-header-block { padding: 12px 14px !important; margin-bottom: 16px !important; }
  .catalog-content-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    margin-bottom: 16px !important;
  }
  .sort-selector-wrapper { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 12px !important; }
  #sortSelect { min-width: 0; width: 100%; min-height: 48px; font-size: .875rem !important; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-bottom: 32px; }
  .catalog-card-item { min-width: 0; min-height: 0; }
  .card-artwork-wrapper { border-radius: 11px; margin-bottom: 4px; }
  .card-row-actions { gap: 4px; margin: 6px 0 4px; }
  .play-preview-link { flex: 1 1 auto; min-width: 0; min-height: 44px; justify-content: center; gap: 4px; padding: 6px; font-size: .75rem; white-space: nowrap; }
  .play-icon-blue { width: 20px; height: 20px; flex: 0 0 20px; }
  .preview-label { display: none; }
  .preview-label-mobile { display: inline; }
  .fav-btn { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
  .card-title-text { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.4em; font-size: .9rem; line-height: 1.2; }
  .card-author-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; margin-bottom: 8px; font-size: .72rem; line-height: 1.3; }
  .card-price-row { gap: 8px; }
  .card-price-row > span { font-size: .9rem !important; line-height: 1.2; min-height: 2.4em; }
  .add-to-cart-circle-btn { min-height: 48px; padding: 8px; }
  .card-ribbon { top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 4px 7px; font-size: .55rem; line-height: 1.2; }
  .coming-soon-overlay span { padding: 6px 8px; font-size: 11px; }
  .detail-modal-box, .modal-box { max-height: calc(100dvh - 32px); }
  .detail-modal-top-row { flex-direction: column; gap: 14px !important; }
  .detail-modal-artwork-col { width: 110px !important; }
  .detail-modal-info-col { width: 100%; min-width: 0; }
  .detail-modal-title { font-size: 1.45rem; }
  .detail-stats-grid { gap: 10px; }
}

@media (max-width: 480px) {
  main.container-fluid { padding-top: 16px !important; }
  main > section:first-child { margin-bottom: 16px !important; }
  .intro-desktop { display: none; }
  .intro-mobile { display: inline; }
  .catalog-sidebar > div:last-child, .category-header-block { display: none; }
  .header-container { flex-wrap: nowrap; gap: 8px; }
  .logo { width: 78px; height: 36px; flex-basis: 78px; }
  .profile-meta-wrap { width: auto; gap: 6px !important; margin-left: auto; }
  .cart-trigger, #likedCardsBtn { min-height: 44px; padding: 0 8px !important; font-size: .73rem !important; white-space: nowrap; }
  #likedCountBadge { margin-left: 0 !important; padding: 2px 6px !important; }
  .detail-modal-actions { gap: 8px !important; }
  .detail-action-primary, .detail-action-secondary { min-width: 0; padding: 10px 8px !important; }
}