/* Final readability and layout corrections. Loaded last so it wins over the earlier style layers. */
:root {
  --action: #0068d6;
  --action-hover: #0057b8;
  --quiet-text: #566479;
  --touch-target: 44px;
}
[data-theme=dark] {
  --action: #1677e6;
  --action-hover: #2b88f0;
  --quiet-text: #a9b8cc;
}

/* ---------- Contrast ---------- */
html body .primary,
html body .card-button,
html body .header-search button,
html body .discovery-tabs button.active,
html body .account-nav button.active.wallet-nav-item {
  background: var(--action) !important;
  color: #fff !important;
}
html body .primary:hover,
html body .card-button:hover { background: var(--action-hover) !important; }
html body .price.free,
html body .text-link,
html body .secondary { color: var(--action); }
[data-theme=dark] body .price.free,
[data-theme=dark] body .text-link,
[data-theme=dark] body .secondary { color: #8cc2ff; }
html body .count,
html body .section-meta,
html body .compare-price,
html body .reference-note,
html body .breadcrumbs button,
html body .breadcrumbs span,
html body .catalog-bottom,
html body .catalog-pagination span,
html body .catalog-heading p,
html body .account-menu-label,
html body .card-meta,
html body .product-specs dt,
html body .price small { color: var(--quiet-text) !important; }
[data-theme=dark] body .purchase-benefits strong,
[data-theme=dark] body .sidebar-note strong,
[data-theme=dark] body .notice strong,
[data-theme=dark] body .product-sharing strong,
[data-theme=dark] body .overview-platforms span,
[data-theme=dark] body .sidebar-note { color: var(--text) !important; }
[data-theme=dark] body .eyebrow { color: #8cc2ff !important; }
html body .modal-heading .icon-button { color: var(--quiet-text); }
html body .cart-total strong { color: var(--text) !important; }

/* ---------- Generated covers ---------- */
html body .auto-cover .cover-name { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
/* In small thumbnails the name already stands next to the cover. */
html body .home-overview .cover-name,
html body .catalog-view-list .cover-name,
html body .cart-item > .auto-cover .cover-name,
html body .order-item .auto-cover .cover-name,
html body .suggestion-monogram + .cover-name { display: none; }
html body .home-overview .cover-folder,
html body .catalog-view-list .cover-folder { width: 44px; }
html body .cart-item > .auto-cover .cover-folder,
html body .order-item .auto-cover .cover-folder { display: flex; width: 34px; }
html body .home-overview .cover-platform,
html body .catalog-view-list .cover-platform,
html body .cart-item > .auto-cover .cover-platform,
html body .order-item .auto-cover .cover-platform { font-size: 11px; }
[data-theme=dark] body .auto-cover { filter: brightness(.86) saturate(.92); }

/* ---------- Product text ---------- */
html body .product-prose { white-space: normal; overflow-wrap: break-word; line-height: 1.75; max-width: 72ch; }
html body .product-prose p { margin: 0 0 .9em; }
html body .product-prose ul,
html body .product-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
html body .product-prose li { margin-bottom: .4em; }

/* ---------- Cart and coupon ---------- */
html body .cart-line { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; color: var(--quiet-text); font-size: 14px; }
html body .cart-line.cart-discount { color: #0f7a43; font-weight: 600; }
[data-theme=dark] body .cart-line.cart-discount { color: #6fdc9f; }
html body .coupon-row { display: flex; align-items: flex-end; gap: 10px; }
html body .coupon-row .form-field { flex: 1; margin: 0; }
html body .coupon-row .secondary { min-height: var(--touch-target); padding-inline: 18px; }
html body #couponStatus.coupon-error { color: #c0392b; }
html body #couponStatus:empty { display: none; }
html body .form-field[hidden] { display: none !important; }
html body .customer-form + details,
html body .customer-form ~ details { margin-top: 18px; }

/* ---------- Account menu ---------- */
html body .account-nav .wallet-nav-item:not(.active):not([aria-current=page]) { background: transparent; border-color: transparent; box-shadow: none; color: inherit; }

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  html body .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "search search";
    align-items: center;
    height: auto !important;
    gap: 10px 12px !important;
    padding-block: 10px;
  }
  html body .header-inner > .brand { grid-area: brand; justify-self: start; }
  html body .header-inner > .header-actions { grid-area: actions; margin: 0; width: auto; justify-content: flex-end; gap: 8px !important; }
  html body .header-inner > .header-search { grid-area: search; width: 100%; max-width: none; margin: 0; }
  html body .header-wallet span { display: none; }
  /* The shelf row keeps its download button visible. */
  html body .discovery-shelf .product-card { min-width: 0; }
  html body .discovery-shelf .card-body { min-width: 0; }
  html body .discovery-shelf .card-bottom { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  html body .discovery-shelf .card-title { overflow-wrap: break-word; }
}
@media (max-width: 700px) {
  html body { font-size: 15px; }
  html body .card-description,
  html body .product-lead,
  html body .form-note,
  html body .info-prose p { font-size: 14px; line-height: 1.6; }
  html body .card-button,
  html body .primary,
  html body .secondary,
  html body .filter-button,
  html body .discovery-tabs button,
  html body .header-cart,
  html body .sign-in { min-height: var(--touch-target); }
  html body .card-utilities button { min-width: var(--touch-target); min-height: var(--touch-target); }
  html body .footer-links button { min-height: 40px; padding-inline: 10px; font-size: 13px; }
  html body main { padding-bottom: 84px; }
}

/* Language picker sits in the header bar so guests can switch too. */
.header-language { display: flex; align-items: center; flex-shrink: 0; }
.header-language .language-trigger { min-height: 40px; }
@media (max-width: 640px) {
  .header-language .language-trigger { min-height: 38px; }
}

/* Guest account menu: clear Sign in / Create account buttons. */
html body .header-account-popover .account-menu-auth { display: grid; gap: 8px; padding: 6px 5px 12px; margin-bottom: 5px; border-bottom: 1px solid #e1eaf4; }
html body .header-account-popover .account-menu-auth button { justify-content: center; min-height: 42px; border-radius: 9px; font-size: 13px; font-weight: 700; text-align: center; }
html body .header-account-popover .account-menu-auth .primary { background: #0068d6; border: 1px solid #0068d6; color: #fff; }
html body .header-account-popover .account-menu-auth .primary:hover { background: #0058b8; border-color: #0058b8; color: #fff; }
html body .header-account-popover .account-menu-auth .secondary { background: #fff; border: 1px solid #cfe0f3; color: #0068d6; }
html body .header-account-popover .account-menu-auth .secondary:hover { background: #edf6ff; border-color: #008dff; color: #0068d6; }
html[data-theme=dark] body .header-account-popover .account-menu-auth { border-color: #354962; }
html[data-theme=dark] body .header-account-popover .account-menu-auth .secondary { background: transparent; border-color: #3a4c65; color: #91c9ff; }
html[data-theme=dark] body .header-account-popover .account-menu-auth .secondary:hover { background: #24405b; }

/* Small phones: keep logo, language, cart, theme and account on one row. */
@media (max-width: 480px) {
  html body .header-inner > .header-actions { gap: 4px !important; }
  html body .header-language .language-trigger { gap: 0; padding: 6px 7px; }
  html body .header-language .language-trigger > svg:last-child { display: none; }
}
@media (max-width: 400px) {
  html body .header-inner > .brand .brand-name { font-size: 20px; }
}
@media (max-width: 340px) {
  html body .header-inner > .brand .brand-name { display: none; }
}

/* ---------- Sign in / Create account: split layout ---------- */
html body dialog.auth-dialog { width: min(940px, calc(100% - 30px)); padding: 0; overflow: auto; border-radius: 20px; }
html body dialog.auth-dialog #dialogBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; min-height: 580px; }
html body .auth-dialog .auth-art { grid-column: 1; grid-row: 1 / span 2; position: relative; overflow: hidden; margin: 12px; border-radius: 16px; background: #062650; min-height: 260px; }
html body .auth-dialog .auth-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html body .auth-art-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 30px 32px; color: #fff; background: linear-gradient(180deg, rgba(3, 20, 46, 0) 0%, rgba(3, 20, 46, .78) 38%, rgba(3, 20, 46, .92) 100%); }
html body .auth-art-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fd2ff; }
html body .auth-art-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #39b6ff; }
html body .auth-art-copy strong { display: block; margin: 10px 0 10px; font-size: 30px; line-height: 1.12; letter-spacing: -.8px; color: #fff; }
html body .auth-art-copy p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.6; color: #d4e5fa; }
html body .auth-dialog .modal-heading { grid-column: 2; grid-row: 1; padding: 36px 40px 0; align-items: flex-start; }
html body .auth-dialog .modal-heading h2 { font-size: 30px; letter-spacing: -.9px; color: #0f2540; }
html body .auth-dialog .auth-panel { grid-column: 2; grid-row: 2; padding: 6px 40px 34px; }
html body .auth-dialog .auth-panel > .form-note:first-child { margin-top: 0; color: #5b6b80; }
html body .auth-dialog .google-signin { background: #fff; border-color: #d5dfeb; color: #1f2d3d; font-weight: 600; min-height: 48px; border-radius: 10px; }
html body .auth-dialog .google-signin:hover { background: #f5f9fe; border-color: #9cc8f5; }
html body .auth-dialog .google-signin > span { display: inline-flex; font: inherit; }
html body .auth-dialog .auth-form input { min-height: 46px; }
html[data-theme=dark] body .auth-dialog .modal-heading h2 { color: #e6eefa; }
html[data-theme=dark] body .auth-dialog .auth-panel > .form-note:first-child { color: #a9bad0; }
html[data-theme=dark] body .auth-dialog .google-signin { background: #1b2a3e; border-color: #3a4c65; color: #e2eaf5; }
@media (max-width: 760px) {
  html body dialog.auth-dialog #dialogBody { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-height: 0; }
  html body .auth-dialog .auth-art { grid-column: 1; grid-row: 1; min-height: 150px; margin: 10px 10px 0; }
  html body .auth-art-copy { padding: 18px 20px; }
  html body .auth-art-copy strong { font-size: 21px; margin: 6px 0 0; }
  html body .auth-art-copy p { display: none; }
  html body .auth-dialog .modal-heading { grid-column: 1; grid-row: 2; padding: 20px 20px 0; }
  html body .auth-dialog .modal-heading h2 { font-size: 24px; }
  html body .auth-dialog .auth-panel { grid-column: 1; grid-row: 3; padding: 4px 20px 22px; }
}
html body .auth-dialog .auth-form input { border-color: #d5dfeb; color: #1f2d3d; }
html body .auth-dialog .auth-form input::placeholder { color: #94a3b8; }
html body .auth-dialog .auth-form input:focus { border-color: #0068d6; box-shadow: 0 0 0 3px rgba(0, 104, 214, .14); outline: none; }
html body .auth-dialog .auth-form label { color: #334155; }
html body .auth-dialog .auth-form .text-link { padding-left: 0; padding-right: 0; justify-self: start; }
html body .auth-dialog .auth-switch { color: #5b6b80; }
html body .auth-dialog .auth-switch button { color: #0068d6; font-weight: 700; }
html[data-theme=dark] body .auth-dialog .auth-form input { background: #111c2c; border-color: #3a4c65; color: #e0eafa; }
html[data-theme=dark] body .auth-dialog .auth-form label, html[data-theme=dark] body .auth-dialog .auth-switch { color: #a9bad0; }
html[data-theme=dark] body .auth-dialog .auth-switch button { color: #7cc0ff; }