/*
 * Chinee Children Clothing desktop brand surface
 *
 * This file is deliberately loaded only for non-mobile requests.  It changes
 * presentation tokens and visual states across public pages while leaving the
 * shared header, footer, service sidebar, and page templates untouched.
 */

@media (min-width: 769px) {
  :root {
    --brand-navy: #102943;
    --brand-navy-deep: #0b1a2a;
    --brand-coral: #f06c5d;
    --brand-gold: #f3c554;
    --brand-ivory: #f7f3ec;
    --brand-sand: #e9dfd0;
    --brand-ink: #172235;
    --brand-muted: #667085;
    --brand-coral-soft: color-mix(in srgb, var(--brand-coral) 13%, #fff);
    --brand-coral-line: color-mix(in srgb, var(--brand-coral) 28%, transparent);
    --brand-navy-soft: color-mix(in srgb, var(--brand-navy) 9%, #fff);

    /* Existing theme tokens.  !important wins over the legacy footer sheet,
       which is printed after the page content by the copied theme. */
    --c1: var(--brand-navy) !important;
    --c2: var(--brand-coral) !important;
    --red: var(--brand-navy) !important;
    --red-dark: var(--brand-navy-deep) !important;
    --red-soft: var(--brand-coral-soft) !important;
    --red-glow: color-mix(in srgb, var(--brand-coral) 24%, transparent) !important;
    --accent: var(--brand-coral) !important;
    --accent-soft: color-mix(in srgb, var(--brand-coral) 16%, #fff) !important;
    --accent-glow: color-mix(in srgb, var(--brand-coral) 24%, transparent) !important;
    --blue: var(--brand-navy) !important;
    --blue-soft: var(--brand-navy-soft) !important;
    --ink: var(--brand-ink) !important;
    --ink-2: #263348 !important;
    --ink-3: #4d5a6d !important;
    --muted: var(--brand-muted) !important;
    --muted-2: #8b96a5 !important;
    --line: rgba(16, 41, 67, 0.13) !important;
    --line-soft: rgba(16, 41, 67, 0.08) !important;
    --sand: var(--brand-sand) !important;
    --sand-2: #f0e8dc !important;
    --white: #fff !important;

    /* Page-local variable families used by the newer templates. */
    --c2-soft: color-mix(in srgb, var(--brand-coral) 55%, #fff) !important;
    --quality-green: var(--brand-coral) !important;
    --quality-green-dark: var(--brand-navy-deep) !important;
    --quality-green-soft: color-mix(in srgb, var(--brand-coral) 14%, #fff) !important;
    --quality-card: #fffaf6 !important;
    --quality-card-strong: #fff1ea !important;
    --quality-line: color-mix(in srgb, var(--brand-coral) 18%, transparent) !important;

    --service-primary: var(--brand-navy) !important;
    --service-accent: var(--brand-coral) !important;
    --service-light: #fff !important;
    --service-dark: var(--brand-navy-deep) !important;
    --service-ink: var(--brand-ink) !important;
    --service-text: #334155 !important;
    --service-muted: #5c6879 !important;
    --service-line: rgba(16, 41, 67, 0.13) !important;
    --service-soft: color-mix(in srgb, var(--brand-coral) 8%, #fff) !important;
    --service-panel: color-mix(in srgb, var(--brand-navy) 4%, #fff) !important;
    --service-icon-bg: color-mix(in srgb, var(--brand-coral) 12%, #fff) !important;
    --service-step-shadow: 0 12px 28px color-mix(in srgb, var(--brand-navy) 24%, transparent) !important;

    --az-about-brand: var(--brand-navy) !important;
    --az-about-accent: var(--brand-coral) !important;
    --az-about-brand-dark: var(--brand-navy-deep) !important;
    --az-about-blue: var(--brand-navy) !important;
    --az-about-blue-deep: var(--brand-coral) !important;
    --az-about-cyan: var(--brand-coral) !important;
    --az-about-navy: var(--brand-navy-deep) !important;
    --az-about-line-strong: color-mix(in srgb, var(--brand-coral) 24%, transparent) !important;
    --az-about-bg: var(--brand-ivory) !important;
    --az-about-bg-strong: #eee5d8 !important;

    --fluentform-primary: var(--brand-coral) !important;
    --fluentform-secondary: var(--brand-navy) !important;
  }

  /* Header, navigation, dropdowns, and the active underline. */
  .garment-nav > a::after,
  .dropdown-trigger::after {
    background: var(--brand-coral) !important;
  }

  .garment-nav > a:hover,
  .garment-nav > a.current,
  .dropdown-trigger:hover,
  .dropdown-trigger.current,
  .garment-header.is-scrolled .garment-nav > a.current,
  .garment-header.is-scrolled .dropdown-trigger.current {
    color: var(--brand-coral) !important;
  }

  .price-list-header__label {
    color: var(--brand-coral) !important;
  }

  .price-list-card:hover,
  .price-list-card:focus-visible {
    background: var(--brand-coral) !important;
    border-color: var(--brand-coral) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-coral) 24%, transparent) !important;
  }

  .products-dropdown a:hover,
  .products-dropdown a.is-active {
    background: var(--brand-navy) !important;
    color: #fff !important;
  }

  .mobile-products-panel a.is-active,
  .mobile-price-list-card.is-active {
    background: var(--brand-coral) !important;
    color: #fff !important;
  }

  /* Shared buttons and inquiry actions. */
  .btn-primary,
  .bar-cta,
  .contact-btn,
  .btn-contact,
  .service-btn,
  .flientfpb,
  .ff-btn-submit,
  form button[type="submit"],
  form input[type="submit"] {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-navy) 20%, transparent) !important;
  }

  .btn-primary:hover,
  .bar-cta:hover,
  .contact-btn:hover,
  .btn-contact:hover,
  .service-btn:hover,
  .flientfpb:hover,
  .ff-btn-submit:hover,
  form button[type="submit"]:hover,
  form input[type="submit"]:hover {
    background: var(--brand-coral) !important;
    border-color: var(--brand-coral) !important;
    color: #fff !important;
  }

  .btn-ghost:hover {
    border-color: var(--brand-gold) !important;
    color: var(--brand-navy) !important;
  }

  .az-about-btn-primary,
  .az-process-btn-primary {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-deep)) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  .az-about-btn-primary:hover,
  .az-process-btn-primary:hover,
  .az-process-btn-primary:focus-visible {
    background: linear-gradient(135deg, var(--brand-coral), var(--brand-gold)) !important;
    color: var(--brand-navy-deep) !important;
  }

  /* Shared labels, accent lines, links and pagination. */
  .eyebrow,
  .page-hero h1 em,
  .quote-cta h2 em,
  .cat-intro-label,
  .quality-badge,
  .form-kicker,
  .cp-eyebrow,
  .cp-channels-title,
  .cp-social-label,
  .service-intro span,
  .service-section-head span,
  .service-partner__copy span,
  .az-section-kicker,
  .az-about-intro-eyebrow,
  .az-about-intro-title em {
    color: var(--brand-coral) !important;
  }

  .eyebrow-line,
  .cat-intro-label::before,
  .service-intro span::before,
  .service-section-head span::before,
  .service-partner__copy span::before,
  .az-section-line {
    background: var(--brand-coral) !important;
  }

  .m-page a.page-numbers:hover {
    border-color: var(--brand-coral) !important;
    color: var(--brand-coral) !important;
  }

  .m-page .page-numbers.current {
    background: var(--brand-coral) !important;
    border-color: var(--brand-coral) !important;
    color: #fff !important;
  }

  .main-products a {
    color: var(--brand-navy) !important;
    background-image: linear-gradient(var(--brand-coral), var(--brand-coral)) !important;
  }

  .main-products a:hover {
    color: var(--brand-coral) !important;
  }

  /* Products landing page and category/product archives. */
  .categories-section {
    background: var(--brand-ivory) !important;
  }

  .category-card:hover {
    border-color: color-mix(in srgb, var(--brand-coral) 52%, #fff) !important;
    box-shadow: 0 18px 38px color-mix(in srgb, var(--brand-coral) 18%, transparent) !important;
  }

  .product-count {
    background: var(--brand-coral-soft) !important;
    color: var(--brand-navy) !important;
  }

  .count-number,
  .toolbar-info p strong,
  .product-card:hover .product-name {
    color: var(--brand-navy) !important;
  }

  .sidebar-header,
  .product-categories-link::before,
  .product-categories-link::after,
  .cat-item.active,
  .hot-tag:hover,
  .card-inquire:hover,
  .gallery-nav:hover {
    background: var(--brand-navy) !important;
    color: #fff !important;
  }

  .product-categories-link {
    border-left-color: var(--brand-coral) !important;
  }

  .product-categories-link:hover {
    color: var(--brand-coral) !important;
  }

  .cat-item:hover {
    background: var(--brand-coral-soft) !important;
    color: var(--brand-navy) !important;
  }

  .cat-item.active .cat-icon,
  .cat-item:hover .cat-icon,
  .card-badge.is-new {
    background: var(--brand-coral) !important;
  }

  .product-card:hover {
    box-shadow: 0 18px 38px color-mix(in srgb, var(--brand-navy) 16%, transparent) !important;
  }

  .feature-item i,
  .top-info-item.slogan i,
  .top-info-item.emails i,
  .top-info-item.emails a {
    color: var(--brand-coral) !important;
  }

  .top-info-item.emails a:hover {
    color: var(--brand-navy) !important;
  }

  /* Price list cards and contact details. */
  .quality-badge {
    border-color: var(--brand-coral-line) !important;
    background: var(--brand-coral-soft) !important;
  }

  .quality-copy h1,
  .quality-contact-group > i,
  a.quality-contact-value:hover {
    color: var(--brand-coral) !important;
  }

  .quality-checks {
    border-color: var(--brand-coral-line) !important;
    background: color-mix(in srgb, var(--brand-coral) 5%, #fff) !important;
  }

  .quality-check::before {
    background: var(--brand-coral) !important;
  }

  .quality-check:hover,
  .quality-check:focus-visible {
    color: var(--brand-coral) !important;
  }

  .quality-feature-icon {
    background: linear-gradient(145deg, var(--brand-navy), var(--brand-coral)) !important;
  }

  /* About, after-sales and process blocks inherit the same navy/coral system. */
  .az-about-section-head::after {
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-coral)) !important;
  }

  .az-profile-carousel-btn:focus-visible,
  .az-profile-carousel-btn:hover {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
  }

  .az-profile-carousel-thumb.is-active,
  .az-core-card:hover {
    border-color: var(--brand-coral-line) !important;
    box-shadow: 0 22px 54px color-mix(in srgb, var(--brand-coral) 14%, transparent) !important;
  }

  .service-list article:hover {
    background: color-mix(in srgb, var(--brand-coral) 6%, #fff) !important;
  }

  .service-list article:hover i {
    background: var(--brand-coral) !important;
    color: var(--brand-navy-deep) !important;
  }

  .service-steps article:not(:last-child)::after {
    border-color: var(--brand-coral) !important;
    background: var(--brand-ivory) !important;
  }

  /* Contact page: recolour the glowing panel and channel controls without
     changing its form markup or contact data. */
  .contact-section::before,
  .cp-glow {
    background: color-mix(in srgb, var(--brand-coral) 14%, transparent) !important;
  }

  .cp-eyebrow .dot,
  .cp-address-icon,
  .cp-chip:hover,
  .cp-soc:hover {
    background: var(--brand-coral) !important;
    border-color: var(--brand-coral) !important;
    color: var(--brand-navy-deep) !important;
  }

  .cp-address-icon {
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand-coral) 30%, transparent), rgba(255,255,255,.08)) !important;
    color: var(--brand-coral) !important;
  }

  .cp-heading em,
  .cp-channel-label i,
  .cp-chip,
  .cp-soc {
    color: var(--brand-coral) !important;
  }

  .cp-chip {
    border-color: color-mix(in srgb, var(--brand-coral) 36%, rgba(255,255,255,.18)) !important;
  }

  .cp-chip:hover,
  .cp-soc:hover {
    color: var(--brand-navy-deep) !important;
  }

  .contact-form-card .form-kicker {
    color: var(--brand-coral) !important;
  }

  /* Shared customer-service sidebar: data and DOM remain in sidebar-lx4.php. */
  .online_cont ul li p:nth-child(1) {
    background-image: linear-gradient(49deg, color-mix(in srgb, var(--brand-navy) 12%, #fff) 0, color-mix(in srgb, var(--brand-coral) 10%, #fff) 100%) !important;
    box-shadow: 3px 2px 10px color-mix(in srgb, var(--brand-navy) 22%, transparent) !important;
  }

  .online_cont ul li p:nth-child(3) span {
    background: var(--brand-coral) !important;
  }

  .online_cont ul li p:nth-child(3) span:nth-child(2) {
    background: var(--brand-navy) !important;
  }

  /* Footer waves and social/contact blocks are presentation-only overrides;
     the footer.php structure and copied contact data remain untouched. */
  .dibu {
    background-color: var(--brand-navy-deep) !important;
    background-image: linear-gradient(rgba(11, 26, 42, .95), rgba(11, 26, 42, .88)), url('../img/home-pc/hero-atelier.webp') !important;
    background-position: center 68% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .dibu .waves .parallax use:nth-of-type(1) {
    fill: var(--brand-navy) !important;
  }

  .dibu .waves .parallax use:nth-of-type(2) {
    fill: var(--brand-coral) !important;
  }

  .dibu .waves .parallax use:nth-of-type(3) {
    fill: var(--brand-gold) !important;
  }

  .dibu .waves .parallax use:nth-of-type(4) {
    fill: var(--brand-navy-deep) !important;
  }

  .dibu .footer-r ul {
    border-color: color-mix(in srgb, var(--brand-coral) 22%, transparent) !important;
  }

  .dibu .footer-r ul h3,
  .dibu .footer-r ul a:hover,
  .dibu .share2 a:hover {
    color: var(--brand-coral) !important;
  }

  /* Legacy inline enquiry button colours are safely covered here. */
  .lity-close:hover,
  .inquiry_title,
  #onlineService .i_message_submit,
  #onlineService button[type="submit"] {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
  }

  #onlineService .i_message_submit:hover,
  #onlineService button[type="submit"]:hover {
    background-color: var(--brand-coral) !important;
    border-color: var(--brand-coral) !important;
  }

  /* Floating global controls: remove the square button backing and apply the
     logo palette to the actual circular controls. */
  #online_qq_tab #floatShow,
  #online_qq_tab #floatShow:hover,
  #online_qq_tab #floatShow:focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .livechat-girl .girl {
    background: var(--brand-navy) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-navy) 30%, transparent) !important;
  }

  .livechat-girl::after {
    background: var(--brand-gold) !important;
    box-shadow: 0 0 0 3px var(--brand-navy) !important;
  }

  .livechat-girl .animated-circles .circle {
    background: color-mix(in srgb, var(--brand-coral) 24%, transparent) !important;
  }

  .progress-wrap {
    background: color-mix(in srgb, var(--brand-ivory) 94%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-navy) 12%, transparent), 0 10px 24px color-mix(in srgb, var(--brand-navy) 14%, transparent) !important;
  }

  .progress-wrap::after {
    color: var(--brand-navy) !important;
  }

  .progress-wrap svg.progress-circle path {
    stroke: var(--brand-coral) !important;
  }
}