/* ==========================================================================
   SKY-BLUE THEME  -  the one central place for this site's colours.
   Loaded after storefront.css and experience.css on every page.
   Change the values in :root to re-tint the whole site.
   Product photos, the promotion banner and videos are never recoloured.
   ========================================================================== */
:root{
  /* theme palette */
  --sky-1:#EAF6FD;            /* main page background */
  --sky-2:#D6EEFB;            /* alternate section background */
  --coway-blue:#0073B5;       /* buttons, top bar, footer */
  --coway-blue-deep:#005B91;  /* dark feature bands, hover states */
  --sky-bright:#00A0E0;       /* bright accents (lines, dots, focus) */
  --card:#FFFFFF;             /* cards */
  --card-tint:#F5FBFE;        /* very pale blue surfaces */
  --text-on-blue:#FFFFFF;
  --soft-on-blue:#E3F3FC;     /* secondary text on the deep blue bands */
  --text-soft:#476274;        /* small secondary text on sky tints */
  --blue-on-tint:#00639C;     /* blue text on the deeper sky tint */
  --line-sky:#B4D8EE;         /* hairlines on sky tints */

  /* the original site's variables, re-pointed at the theme */
  --blue:var(--coway-blue);
  --blue-dark:var(--coway-blue-deep);
  --ink:#102F42;
  --muted:var(--text-soft);
  --line:var(--line-sky);
  --light:var(--sky-1);
  --cream:var(--card-tint);
}

/* ---- page and section backgrounds ------------------------------------ */
body{background:var(--sky-1)}
::selection{background:#A9DBF5}

/* full-width alternate bands (paint only; no layout change) */
.category-section,.home-cinema,.product-stories{
  background:var(--sky-2);
  box-shadow:0 0 0 100vmax var(--sky-2);
  clip-path:inset(0 -100vmax);
  --blue:var(--blue-on-tint);
}
.plans-bg,.quote-banner{background:var(--sky-2);--blue:var(--blue-on-tint)}
.quote-banner p:not(.eyebrow){color:var(--text-soft)}
.quote-banner .btn.white{--blue:var(--coway-blue)}

/* ---- top bar, header -------------------------------------------------- */
.topbar{background:var(--coway-blue);color:var(--text-on-blue)}
.topbar a:hover{color:var(--text-on-blue);text-decoration:underline;text-underline-offset:3px}
.header{background:#EAF6FDF0;border-bottom:1px solid var(--line-sky)}
.brand>img{mix-blend-mode:multiply} /* logo file has a white box; blend it into the tint */
.brand span{color:var(--text-soft);border-left-color:var(--line-sky)}
#mobile-menu{background:var(--sky-1)}

/* ---- buttons ---------------------------------------------------------- */
.btn.dark{background:var(--coway-blue);color:#fff}
.btn.dark:hover{background:var(--coway-blue-deep);color:#fff}
.btn.primary:hover{color:#fff}
.btn.outline{background:#FFFFFFB8}
.btn.white:hover{background:var(--sky-2)}
.text-link{border-bottom-color:var(--sky-bright)}
:focus-visible{outline-color:var(--sky-bright)}

/* ---- cards and surfaces ---------------------------------------------- */
.category-card{background:var(--card)}
.category-card:hover{background:var(--card-tint)}
.hero-slide,.hero-slide-caption{background:var(--card)}
.hero-carousel [data-hero-dot]:before{background:#8FBFDD}
.hero-carousel [data-hero-dot][aria-pressed=true]:before{background:var(--coway-blue)}
.filters,.quote-form,.no-results,.offer-card,.finder-result,.match-card{background:var(--card)}
.room-panel{background:var(--card)}
.room-tabs button[aria-selected=true]{background:var(--card)}
.room-tabs button:hover{background:var(--card-tint)}
.range-pill{background:var(--sky-2);color:var(--blue-on-tint)}
.compare-table th{background:var(--sky-1)}
.icon-button{background:var(--sky-1);color:var(--text-soft)}
.match-line>span{background:var(--sky-2);color:var(--blue-on-tint)}
.match-result{background:var(--sky-2)}
.mobile-cta{border-top-color:var(--line-sky)}
.mobile-cta>button{border-color:var(--coway-blue);color:var(--coway-blue-deep)}

/* ---- deep blue feature bands (were dark navy) ------------------------- */
.finder-banner,.in-action-section,.compare-bar{background:var(--coway-blue-deep);color:var(--text-on-blue)}
.finder-banner .eyebrow,.in-action-section .eyebrow,.in-action-section .video-copy>span{color:var(--soft-on-blue)}
.finder-banner p:not(.eyebrow),.in-action-section .section-note,.in-action-section .video-copy>p{color:var(--soft-on-blue)}
.finder-banner a:hover,.in-action-section a:hover{color:#fff}
.in-action-section .video-poster{border-color:#3D8FC2}
.finder-banner .btn.white:hover,.in-action-section .btn.white:hover{color:var(--ink)}

/* ---- footer ----------------------------------------------------------- */
footer{background:var(--coway-blue);color:var(--text-on-blue);border-top:4px solid var(--sky-bright)}
footer .brand>img{mix-blend-mode:screen;filter:invert(1) grayscale(1) brightness(4)} /* white logo on blue */
footer .brand span{color:#fff;border-left-color:#FFFFFF66}
.footer-main>div>p,.footer-main small{color:#fff}
.footer-main h3{color:#fff}
.footer-main>div>a:not(.brand),.footer-main>div>button{color:#fff}
.footer-main>div>button:hover,.footer-main>div>a:not(.brand):hover,footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-main .footer-phone{color:#fff!important}
.footer-legal{border-top-color:#FFFFFF59;color:#fff}

/* ---- disclaimer: normal size, always visible -------------------------- */
.footer-legal p{font-size:14px;line-height:1.7;color:#fff;max-width:900px}
.footer-legal>span{color:#fff}
.standalone-legal{padding-block:28px;margin-top:60px}
@media print{footer.standalone-legal,footer{display:block!important;background:#fff;color:#000}.footer-main{display:none}.footer-legal p,.footer-legal>span{color:#000}}

/* ---- small grey labels: darkened to keep WCAG AA (4.5:1) on the tints -- */
body .product-copy .model,body .detail-copy .model,body .story-number,body .contact-steps b,
body .detail-price p,body .feature-list>div>span,body .mini-label,body .hero-swipe-hint,
body .hero-swipe-hint span,body .match-result span,body .match-line small,
body .plan-checklist>div>span,body .product-price small,body .room-tabs button span,
body .quote-fields label,body .breadcrumbs a,body .breadcrumbs span,body .price-footnote,
body .detail-support,body .guide-grid article>span,body details>summary>span{color:var(--text-soft)}
body .breadcrumbs a:hover{color:var(--coway-blue)}
body .in-action-section .video-note{color:var(--soft-on-blue)}
body .room-copy li span{background:var(--sky-2);color:var(--blue-on-tint)}

/* ---- 404 page: keep its disclaimer at the bottom of the screen -------- */
body:has(>.standalone-legal){min-height:100vh;display:flex;flex-direction:column}
body:has(>.standalone-legal)>.standalone-legal{margin-top:auto}
body .faq-list summary span,body details summary>span,body .quote-form label,body .quote-form .quote-fields label{color:var(--text-soft)}