/* The logo's palette, as a preview (5 October). On only for a browser that asked for it
   with ?theme=logo (Program.cs sets the cookie, App.razor the attribute); every rule here
   is scoped to it, so without it the store is exactly the approved mock.

   The logo is a ribbon running cyan -> blue -> purple -> magenta, over an indigo wordmark.
   The mock took one end of it - the magenta - and paired it with a plum that is in no
   part of the logo. Here:
     magenta  - the action colour: buttons, prices, the cart, what to press
     indigo   - the brand's ink: headings, the dark bars, the footer
     sky      - the second voice: what is new, links, delivery, the selected thing
     ribbon   - the signature, used sparingly: the hero, a hairline over the footer,
                the active tab's underline, the account's cards
   Neutrals turn from the mock's pink-greys to cool indigo-greys, so the magenta reads
   as an accent again rather than tinting the whole page. */

:root[data-theme="logo"] {
  --soter-primary: #e4246c;
  --soter-primary-dark: #c2185b;
  --soter-primary-soft: #fdeef4;
  --soter-plum: #1f1c5c;
  --soter-plum-2: #2e2a7f;
  --soter-ink: #1c1a45;
  --soter-muted: #6a6987;
  --soter-border: #e6e6f1;
  --soter-surface: #f6f6fb;
  --soter-shadow: 0 16px 42px rgba(31, 28, 92, .09);

  --brand-indigo: #2e2a7f;
  --brand-indigo-soft: #eeeef8;
  --brand-purple: #602484;
  --brand-sky: #1890cc;
  --brand-cyan: #3cc4e4;
  --brand-sky-soft: #eaf6fc;
  --brand-ribbon: linear-gradient(115deg, #3cc4e4 0%, #1890cc 28%, #602484 64%, #e4246c 100%);
  --brand-ribbon-soft: linear-gradient(115deg, rgba(60, 196, 228, .14), rgba(96, 36, 132, .10) 55%, rgba(228, 36, 108, .14));
  --tone: #f3f3f9;
}

/* ---- Type and links ---------------------------------------------------------------- */
:root[data-theme="logo"] h1, :root[data-theme="logo"] h2, :root[data-theme="logo"] h3,
:root[data-theme="logo"] .section-title { color: var(--brand-indigo); }
:root[data-theme="logo"] .section-kicker { color: var(--brand-sky); letter-spacing: .02em; }
:root[data-theme="logo"] .breadcrumb-item.active { color: var(--brand-sky); }
:root[data-theme="logo"] .form-control:focus, :root[data-theme="logo"] .form-select:focus,
:root[data-theme="logo"] .header-search .form-control:focus, :root[data-theme="logo"] .directory-search input:focus {
  border-color: var(--brand-cyan); box-shadow: 0 0 0 4px rgba(60, 196, 228, .16);
}

/* ---- Buttons: magenta to press, with the ribbon's warmth on hover ------------------- */
:root[data-theme="logo"] .btn-primary {
  --bs-btn-bg: var(--soter-primary); --bs-btn-border-color: var(--soter-primary);
  --bs-btn-hover-bg: var(--soter-primary-dark); --bs-btn-hover-border-color: var(--soter-primary-dark);
  --bs-btn-active-bg: var(--soter-primary-dark); --bs-btn-active-border-color: var(--soter-primary-dark);
  box-shadow: 0 8px 20px rgba(228, 36, 108, .22);
}
:root[data-theme="logo"] .btn-primary:hover { background-image: linear-gradient(115deg, #e4246c, #a1257c); }
:root[data-theme="logo"] .btn-outline-primary { --bs-btn-color: var(--brand-indigo); --bs-btn-border-color: #cfcfe6; --bs-btn-hover-bg: var(--brand-indigo); --bs-btn-hover-border-color: var(--brand-indigo); --bs-btn-hover-color: #fff; }
:root[data-theme="logo"] .add-cart-btn { background: var(--soter-primary); box-shadow: 0 6px 14px rgba(228, 36, 108, .25); }
:root[data-theme="logo"] .add-cart-btn:hover { background: linear-gradient(115deg, #e4246c, #a1257c); }
:root[data-theme="logo"] .quantity-control button:hover { background: var(--brand-sky-soft); color: var(--brand-sky); }

/* ---- The header ------------------------------------------------------------------ */
:root[data-theme="logo"] .announcement-bar { position: relative; background: var(--brand-indigo); }
:root[data-theme="logo"] .announcement-bar::after { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--brand-ribbon); content: ""; }
:root[data-theme="logo"] .announcement-bar a { color: #8fe0f3; }
:root[data-theme="logo"] .category-navbar .nav-link { color: var(--soter-ink); }
:root[data-theme="logo"] .category-navbar .nav-link:hover, :root[data-theme="logo"] .category-navbar .nav-link.active { color: var(--brand-indigo); }
:root[data-theme="logo"] .category-navbar .nav-link::after { height: 3px; background: var(--brand-ribbon); }
:root[data-theme="logo"] .cart-count, :root[data-theme="logo"] .favorite-count { background: var(--soter-primary); }

/* ---- Heroes and dark panels: indigo, lit by the ribbon ----------------------------- */
:root[data-theme="logo"] .hero-card, :root[data-theme="logo"] .offers-hero, :root[data-theme="logo"] .offer-panel,
:root[data-theme="logo"] .auth-visual, :root[data-theme="logo"] .article-cover,
:root[data-theme="logo"] .editorial-hero, :root[data-theme="logo"] .lookbook-hero, :root[data-theme="logo"] .season-guide {
  background: radial-gradient(120% 140% at 0% 100%, #602484 0%, transparent 55%), radial-gradient(90% 120% at 100% 0%, #1890cc 0%, transparent 50%), var(--brand-indigo);
}
:root[data-theme="logo"] .hero-card { box-shadow: 0 22px 50px rgba(31, 28, 92, .22); }
:root[data-theme="logo"] .hero-copy .eyebrow { color: #8fe0f3; }
:root[data-theme="logo"] .hero-copy h1, :root[data-theme="logo"] .article-cover h1 { color: #fff; }
:root[data-theme="logo"] .hero-copy h1 strong { --glint-base: linear-gradient(115deg, #3cc4e4, #f2679b); }
:root[data-theme="logo"] .hero-copy::before { background: radial-gradient(circle, rgba(60, 196, 228, .22), rgba(228, 36, 108, .12) 45%, transparent 68%); }
:root[data-theme="logo"] .auth-visual-copy { background: rgba(31, 28, 92, .86); }
:root[data-theme="logo"] .auth-visual-copy h2, :root[data-theme="logo"] .auth-visual-copy h3 { color: #fff; }
:root[data-theme="logo"] .signup-benefits .section-kicker, :root[data-theme="logo"] .signup-benefits li i { color: #8fe0f3; }
:root[data-theme="logo"] .signup-visual::after { background: rgba(31, 28, 92, .5); }
:root[data-theme="logo"] .article-cover::after { background: linear-gradient(0deg, rgba(31, 28, 92, .9), rgba(31, 28, 92, .35) 55%, rgba(31, 28, 92, 0)); }
:root[data-theme="logo"] .article-cover-copy > span { color: #8fe0f3; }
:root[data-theme="logo"] .hero-card > .img-placeholder { background: var(--brand-ribbon); color: rgba(255, 255, 255, .35); }

/* ---- Page heads: a quiet wash of the ribbon instead of flat grey ------------------ */
:root[data-theme="logo"] .page-hero { position: relative; overflow: hidden; background: var(--brand-ribbon-soft), #fbfbfe; border-bottom: 0; }
:root[data-theme="logo"] .page-hero::after { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--brand-ribbon); opacity: .85; content: ""; }

/* ---- Cards ------------------------------------------------------------------------ */
:root[data-theme="logo"] .product-card:hover { border-color: #c9c6ec; box-shadow: 0 18px 40px rgba(31, 28, 92, .12); }
:root[data-theme="logo"] .product-thumb, :root[data-theme="logo"] .detail-main-image, :root[data-theme="logo"] .detail-thumb,
:root[data-theme="logo"] :is(.mini-product, .cart-item, .order-products, .checkout-line, .return-pick, .offcanvas-cart-item, .suggestion-item) :is(img, .img-placeholder),
:root[data-theme="logo"] img[data-fallback]:not(.is-loaded) { background: var(--tone); }
:root[data-theme="logo"] .img-placeholder { background: var(--tone); color: #c5c4dc; }
:root[data-theme="logo"] .img-placeholder.is-fallback { background: repeating-linear-gradient(135deg, #f6f6fb 0 12px, #efeff7 12px 24px); }
:root[data-theme="logo"] .product-badge { background: var(--soter-primary); color: #fff; box-shadow: 0 4px 10px rgba(228, 36, 108, .25); }
:root[data-theme="logo"] .product-brand { color: var(--brand-sky); font-weight: 700; }
:root[data-theme="logo"] .price span, :root[data-theme="logo"] .detail-price span { color: var(--soter-muted); }
:root[data-theme="logo"] .category-card:hover .category-image { border-color: #b9e6f3; box-shadow: 0 14px 28px rgba(24, 144, 204, .12); }
:root[data-theme="logo"] .detail-feature i { color: var(--brand-sky); }
:root[data-theme="logo"] .detail-thumb.active { border-color: var(--brand-sky); box-shadow: 0 0 0 3px rgba(60, 196, 228, .18); }
:root[data-theme="logo"] .detail-tabs .nav-link.active { border-bottom: 3px solid transparent; border-image: var(--brand-ribbon) 1; color: var(--brand-indigo); }

/* ---- The account --------------------------------------------------------------- */
:root[data-theme="logo"] .account-nav a:hover, :root[data-theme="logo"] .account-nav a.active { background: var(--brand-indigo-soft); color: var(--brand-indigo); }
:root[data-theme="logo"] .stat-icon.is-sky { background: var(--brand-sky-soft); color: var(--brand-sky); }
:root[data-theme="logo"] .stat-icon.is-violet { background: #f1ebf7; color: var(--brand-purple); }
:root[data-theme="logo"] .stat-link:hover { border-color: #c9c6ec; box-shadow: 0 12px 26px rgba(31, 28, 92, .1); }
:root[data-theme="logo"] .balance-card.is-wallet { background: linear-gradient(135deg, #602484, #a1257c 55%, #e4246c); }
:root[data-theme="logo"] .balance-card.is-points { background: linear-gradient(135deg, #1f1c5c, #1890cc 70%, #3cc4e4); }
:root[data-theme="logo"] .wallet-strip { background: linear-gradient(90deg, var(--brand-sky-soft), #fff); border-color: #c9ecf7; color: var(--brand-indigo); }
:root[data-theme="logo"] .wallet-strip:hover { color: var(--brand-indigo); border-color: var(--brand-cyan); }
:root[data-theme="logo"] .address-card.default { border-color: #b9e6f3; background: #f6fbfe; }
:root[data-theme="logo"] .order-head { background: var(--soter-surface); }
:root[data-theme="logo"] .filter-panel, :root[data-theme="logo"] .summary-card, :root[data-theme="logo"] .account-sidebar { box-shadow: 0 12px 35px rgba(31, 28, 92, .05); }
:root[data-theme="logo"] .form-check-input:checked { background-color: var(--brand-indigo); border-color: var(--brand-indigo); }

/* ---- The footer: indigo, with the ribbon as its top edge --------------------------- */
:root[data-theme="logo"] .site-footer { position: relative; background: #1a1850; }
:root[data-theme="logo"] .site-footer::before { position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--brand-ribbon); content: ""; }
:root[data-theme="logo"] .site-footer a:hover { color: #8fe0f3; }

/* ---- Skeletons, toasts --------------------------------------------------------------- */
:root[data-theme="logo"] .sk-block, :root[data-theme="logo"] .sk-line { background: #ececf5; }
:root[data-theme="logo"] .sk-card { border-color: #ececf5; }
/* The toast's bar stays its own green or red - faint, like the base one (6 October). */

/* ---- Second pass, from the screenshots --------------------------------------------- */
/* The hero's photograph carries the mock's plum in its shadows. An indigo wash over the
   side the words sit on brings it into the palette without recolouring the products. */
:root[data-theme="logo"] .hero-card::before { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: "";
  background: linear-gradient(270deg, rgba(31, 28, 92, 0) 38%, rgba(31, 28, 92, .78) 62%, rgba(31, 28, 92, .94) 100%); }
:root[data-theme="logo"] .auth-visual::before { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: "";
  background: linear-gradient(0deg, rgba(31, 28, 92, .55), rgba(31, 28, 92, .15) 60%, rgba(31, 28, 92, 0)); }
:root[data-theme="logo"] .auth-visual-copy { z-index: 2; }
/* The promise strip under the hero: each icon in one of the logo's colours, in order. */
:root[data-theme="logo"] .trust-item i { color: var(--brand-sky) !important; }
:root[data-theme="logo"] .trust-item:nth-child(2) i { color: #1d6fb8 !important; }
:root[data-theme="logo"] .trust-item:nth-child(3) i { color: var(--brand-purple) !important; }
:root[data-theme="logo"] .trust-item:nth-child(4) i { color: #a1257c !important; }
:root[data-theme="logo"] .trust-item:nth-child(5) i { color: var(--soter-primary) !important; }
:root[data-theme="logo"] .category-image { background: var(--tone); }
/* The two standing links in the menu: the magazine reads in sky, the offers in magenta. */
:root[data-theme="logo"] .offer-nav-link[href="magazine"] { background: var(--brand-sky-soft) !important; color: var(--brand-sky) !important; }
/* On a phone the words sit under the picture, across its whole width. */
@media (max-width: 767.98px) {
  :root[data-theme="logo"] .hero-card::before { background: linear-gradient(0deg, rgba(31, 28, 92, .94) 0%, rgba(31, 28, 92, .7) 45%, rgba(31, 28, 92, .1) 80%); }
}
:root[data-theme="logo"] .hero-card::after { background: rgba(31, 28, 92, .25); }
/* Headings on the dark surfaces stay white - the indigo above is for the light page. */
:root[data-theme="logo"] :is(.site-footer, .hero-card, .offers-hero, .offer-panel, .auth-visual, .article-cover, .balance-card, .editorial-hero, .lookbook-hero, .season-guide, .lookbook-card, .smart-story, .story-card--dark) :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
:root[data-theme="logo"] .site-footer :is(h2, h3, h4, h5, h6) { color: #fff; }
/* The contact page in the logo's palette. */
:root[data-theme="logo"] .contact-icon { background: var(--brand-sky-soft); color: var(--brand-sky); }
:root[data-theme="logo"] .contact-card.is-primary { background: var(--brand-ribbon-soft), #fff; border-color: #d9d7f0; }
:root[data-theme="logo"] .contact-card.is-primary .contact-icon { background: var(--brand-ribbon); color: #fff; }
:root[data-theme="logo"] .contact-visual-copy { background: linear-gradient(0deg, rgba(31, 28, 92, .96) 0%, rgba(31, 28, 92, .82) 45%, rgba(31, 28, 92, 0)); }
:root[data-theme="logo"] .page-body h2 { color: var(--brand-indigo); }
:root[data-theme="logo"] .page-body li::marker { color: var(--brand-sky); }
:root[data-theme="logo"] .page-note { background: var(--brand-sky-soft); }
:root[data-theme="logo"] .page-note i { color: var(--brand-sky); }
:root[data-theme="logo"] .footer-social a:hover { background: var(--brand-ribbon); }
:root[data-theme="logo"] .page-body blockquote { border-inline-start-color: var(--brand-sky); background: var(--brand-sky-soft); }
/* The header in the logo's palette: indigo for the standing pieces, the ribbon on the
   all-departments button, magenta kept for the offers and the counts. */
:root[data-theme="logo"] .header-cart { background: var(--brand-indigo); box-shadow: 0 10px 22px rgba(31, 28, 92, .25); }
/* A way into the list, not an offer (6 October): solid indigo, no ribbon and no glow, so
   it stops out-shouting the offers chip at the other end of the strip. */
:root[data-theme="logo"] .cat-all { background: var(--brand-indigo); box-shadow: none; }
:root[data-theme="logo"] .cat-all:hover, :root[data-theme="logo"] .cat-all.is-current { background: #1f1c5c; }
:root[data-theme="logo"] .cat-link:hover { color: var(--brand-indigo); }
:root[data-theme="logo"] .cat-link.is-current { background: var(--brand-indigo-soft); color: var(--brand-indigo); }
:root[data-theme="logo"] .cat-extra.is-magazine { background: var(--brand-sky-soft); color: var(--brand-sky); }
:root[data-theme="logo"] .cat-extra.is-magazine:hover, :root[data-theme="logo"] .cat-extra.is-magazine.is-current { background: var(--brand-sky); color: #fff; }
:root[data-theme="logo"] .cat-extra.is-offers { background: linear-gradient(115deg, #e4246c, #a1257c); box-shadow: 0 6px 16px rgba(228, 36, 108, .28); }
:root[data-theme="logo"] .store-header .header-search .form-control:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 5px rgba(60, 196, 228, .16); }
:root[data-theme="logo"] .store-header .header-action:hover .header-action-icon, :root[data-theme="logo"] .store-header .header-action.is-current .header-action-icon { background: var(--brand-indigo-soft); color: var(--brand-indigo); }
:root[data-theme="logo"] .store-header.is-scrolled { box-shadow: 0 10px 30px rgba(31, 28, 92, .1); }
/* The sign-in pages in the logo's palette. */
:root[data-theme="logo"] .auth2-kicker { color: var(--brand-sky); }
:root[data-theme="logo"] .auth2-title { color: var(--brand-indigo); }
:root[data-theme="logo"] .auth2-input:focus-within { border-color: var(--brand-cyan); box-shadow: 0 0 0 4px rgba(60, 196, 228, .16); }
:root[data-theme="logo"] .auth2-label-row a { color: var(--brand-sky); }
:root[data-theme="logo"] .auth2-alt:hover { border-color: var(--brand-indigo); background: var(--brand-indigo-soft); }
:root[data-theme="logo"] .auth2-alt > i { background: var(--brand-indigo-soft); color: var(--brand-indigo); }
:root[data-theme="logo"] .auth2-visual { background: var(--brand-indigo); }
:root[data-theme="logo"] .auth2-visual::after { background: linear-gradient(0deg, rgba(31, 28, 92, .94) 0%, rgba(31, 28, 92, .5) 45%, rgba(96, 36, 132, .15) 100%); }
:root[data-theme="logo"] .auth2-visual-copy h2 { color: #fff; }
:root[data-theme="logo"] .auth2-badge { border-color: rgba(143, 224, 243, .45); color: #bfeefa; }
:root[data-theme="logo"] .offline-icon { background: var(--brand-sky-soft); color: var(--brand-sky); }
:root[data-theme="logo"] .auth2 .form-control:focus, :root[data-theme="logo"] .auth2 .form-select:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 4px rgba(60, 196, 228, .16); }
:root[data-theme="logo"] .signup-progress-step.is-active { border-color: #b9e6f3; background: var(--brand-sky-soft); color: var(--brand-indigo); }
:root[data-theme="logo"] .signup-progress-step.is-active span { background: var(--brand-ribbon); }
:root[data-theme="logo"] .signup-step-heading > i { background: var(--brand-indigo-soft); color: var(--brand-indigo); }

/* The header's hover glow in the palette's own colours (6 October): an indigo halo for
   the account, and the heart fills magenta - the colour it is when something is saved. */
:root[data-theme="logo"] .header-action.is-account:hover .header-action-icon { background: var(--brand-indigo-soft); color: var(--brand-indigo); box-shadow: 0 0 0 4px rgba(46, 42, 127, .08), 0 6px 16px rgba(46, 42, 127, .18); }
:root[data-theme="logo"] .header-action.is-favorites:hover .header-action-icon { background: var(--soter-primary-soft); color: var(--soter-primary); box-shadow: 0 0 0 4px rgba(228, 36, 108, .10), 0 6px 16px rgba(228, 36, 108, .22); }