/* Store design, "Collector's Shelf" in white and blue (TVShowCo, Nov 2026).
   Every colour is a token below, set per colour scheme: html[data-scheme="shaded" | "white" | "twotone"], chosen in
   wp-admin → TVShow features → Colour scheme. No attribute = shaded. Mobile first: 640px tablet, 992px header,
   1024px desktop. The cart, checkout and account contents have their own snippet ("Store design: cart, checkout &
   account"), which uses these same tokens. The product picture strip (.tvm) has its own snippet ("Media: style") and
   is themed only through its --tvm-* properties. */

:root, :root[data-scheme="shaded"] {
  --c-page: #F3F7FB; --c-card: #FFFFFF; --c-card-line: transparent; --c-band: #EAF1F8; --c-shelf: #DCE6F0; --c-shelf-shadow: rgba(0, 56, 95, .16);
  --c-line: #DFE7F0; --c-line-2: #C3D1E0; --c-ink: #202833; --c-ink-2: #4A5563; --c-blue: #005A9E; --c-blue-dark: #00477D; --c-blue-light: #3E8FCF; --c-navy: #00385F;
  --c-hero: var(--c-page); --c-hero-ink: var(--c-ink); --c-hero-ink-2: var(--c-ink-2); --c-hero-accent: var(--c-blue); --c-hero-btn: var(--c-blue); --c-hero-btn-ink: #FFFFFF;
  --c-spot: #00385F; --c-spot-ink: #FFFFFF; --c-on-dark: #D7EBF9; --c-on-dark-2: #B9CCDD;
  --c-icon: #0564BA; --c-ok: #1F7A4D; --c-tag: #00385F; --c-tag-ink: #FFFFFF; --c-save: #E5F0FA; --c-save-ink: #005A9E;
  --c-star: #005A9E; --c-star-empty: #C6D3E1; --c-field: #FFFFFF;
  --sh-card: 0 1px 2px rgba(0, 56, 95, .05), 0 10px 24px -14px rgba(0, 56, 95, .28);
  color-scheme: light;
}
:root { --f-head: 'Fraunces', Georgia, 'Times New Roman', serif; --f-text: 'Manrope', system-ui, 'Segoe UI', sans-serif; --r: 12px; --r-sm: 8px; --gut: 16px; --max: 1240px; }
:root[data-scheme="white"] {
  --c-page: #FFFFFF; --c-card-line: #E3EAF2; --c-band: #EEF4FA; --c-shelf: #E6EDF4; --c-shelf-shadow: rgba(0, 56, 95, .10); --c-line: #E3EAF2;
  --c-hero: #FFFFFF; --sh-card: none;
}
:root[data-scheme="twotone"] {
  --c-page: #FFFFFF; --c-card-line: #E3EAF2; --c-band: #F3F7FB; --c-shelf: #DCE6F0; --c-line: #DFE7F0;
  --c-hero: #005A9E; --c-hero-ink: #FFFFFF; --c-hero-ink-2: rgba(255, 255, 255, .9); --c-hero-accent: #D7EBF9; --c-hero-btn: #FFFFFF; --c-hero-btn-ink: #005A9E;
  --c-spot: #005A9E; --sh-card: none;
}
@media (min-width: 640px) { :root { --gut: 24px; } }
@media (min-width: 1024px) { :root { --gut: 32px; } }

/* ---------------------------------------------------------------- base */
/* while the web fonts load (review, 2 Nov: the hero's text re-wrapped when Fraunces arrived and Best sellers jumped,
   CLS 0.13 at 1280px; on a slow phone the hero's cases jumped up after sliding out): the hero title's and lede's
   stand-in fonts are Georgia and Arial scaled to the widths of Fraunces and Manrope (measured at the 64px title; at
   phone sizes the hero comes out within 1px), so the hero keeps its height when they swap in. The loaded page is
   unchanged. */
@font-face { font-family: "TVS Fraunces Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600; font-style: normal; size-adjust: 86.6%; }
@font-face { font-family: "TVS Fraunces Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 500; font-style: italic; size-adjust: 94.4%; }
@font-face { font-family: "TVS Fraunces Fallback Sm"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600; font-style: normal; size-adjust: 90.5%; } /* phones: the title is 34-40px there, where Fraunces' optical size draws it wider */
@font-face { font-family: "TVS Fraunces Fallback Sm"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 500; font-style: italic; size-adjust: 99.1%; }
@font-face { font-family: "TVS Manrope Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; font-style: normal; size-adjust: 100.3%; }
body { margin: 0; background: var(--c-page) !important; color: var(--c-ink); font: 400 15.5px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#brx-content { background: var(--c-page); }
#brx-content .brxe-shortcode, #brx-content .brxe-div, #brx-footer .brxe-shortcode, #brx-header .brxe-shortcode { min-width: 0; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; color: inherit; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p, figure, blockquote, dl, dd { margin: 0; }
blockquote { border: 0; padding: 0; font: inherit; }
blockquote cite { opacity: 1; }
figcaption { margin: 0; color: inherit; font-size: inherit; text-align: inherit; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }
.nw { white-space: nowrap; }
.tvsco-ic { flex: none; display: block; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kicker, .kicker.brxe-heading { font: 700 11.5px/1.3 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
.tvsco-stars { position: relative; display: inline-block; width: var(--w); line-height: 0; color: var(--c-star-empty); vertical-align: middle; flex: none; }
.tvsco-stars svg { display: block; }
.tvsco-stars__fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--c-star); }
.btn, .brxe-button.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-sm); background: var(--c-blue); color: #FFFFFF; font: 700 13.5px/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.btn:hover { background: var(--c-blue-dark); color: #FFFFFF; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--c-blue-light); outline-offset: 2px; }
.btn--ghost, .brxe-button.btn--ghost { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-card); }
.link, .brxe-text-link.link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-blue); font: 700 14.5px/1.3 var(--f-text); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.link { position: relative; }
.link::before { content: ""; position: absolute; inset: -11px -6px; } /* a 44px tap area around the 22px link (owner's review, 2 Nov), invisible */
.link::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.sec-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; margin-bottom: 22px; }
.sec-hd h2 { font-size: clamp(26px, 6vw, 38px); line-height: 1.12; }
.sec-hd__sub, .sec-hd__note { color: var(--c-ink-2); font-size: 14.5px; }
.sec-hd__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sec-hd__note b { color: var(--c-ink); }
.sec-hd--stack { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 18px; row-gap: 4px; }
.sec-hd--stack .sec-hd__sub { grid-row: 2; }
.sec-hd--stack .link { grid-row: 1 / span 2; align-self: center; }

/* ---------------------------------------------------------------- header */
#brx-header { position: relative; z-index: 60; background: var(--c-card); }
#brx-header { overflow-anchor: none; } /* the browser never keeps its place by a header part: opening the phone search moved its own field out of the header and the page jumped 32px (review, 2 Nov) */
/* announcement bar: wp-admin → TVShow features → Announcement bar (off: not on the page at all). The background comes
   from its colour field (--ann-bg on the element); the text is white or dark, whichever reads best on that colour,
   unless the Text colour field says otherwise. */
.annbar { --ann-bg: #005A9E; background: var(--ann-bg); color: #FFFFFF; color: lch(from var(--ann-bg) calc((49.4 - l) * 1000) 0 0); }
.annbar[data-ink="white"] { color: #FFFFFF; }
.annbar[data-ink="dark"] { color: #202833; }
.annbar__in { display: flex; align-items: center; justify-content: center; min-height: 40px; padding-block: 8px; text-align: center; }
.annbar__text { margin: 0; font: 700 13.5px/1.4 var(--f-text); letter-spacing: .02em; color: inherit; text-wrap: balance; }
a.annbar__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.annbar__text:hover { text-decoration-thickness: 2px; }
a.annbar__text:focus-visible { outline-color: currentColor; }
.hd { position: relative; background: var(--c-card); border-bottom: 1px solid var(--mb-edge, var(--c-line)); }
.hd__top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 64px; }
.hd__left { display: flex; align-items: center; justify-self: start; min-width: 0; }
.hd__logo { justify-self: center; font-size: 23px; line-height: 1; }
.tvsco-logo-link { display: block; text-decoration: none; line-height: 0; }
.tvsco-logo { display: block; overflow: visible; }
.hd__right { justify-self: end; display: flex; align-items: center; }
.hd__cart { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; height: 44px; color: var(--c-ink); font: 700 14px/1 var(--f-text); text-decoration: none; }
.hd__cartlabel { display: none; }
.tvsco-count { box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-blue); color: #FFFFFF; font: 800 11px/20px var(--f-text); text-align: center; }
.hd__cart .tvsco-count { position: absolute; top: 3px; left: 25px; }
.tvsco-count[hidden] { display: none; }
/* search: an icon on phones and tablets (FiboSearch's phone search opens as a panel over the dimmed page, below), a field from 992px */
.hd__search { display: flex; align-items: center; }
.hd__search .dgwt-wcas-search-wrapp { min-width: 0; max-width: none; margin: 0; }
.hd__search .dgwt-wcas-search-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; }
.hd__search .dgwt-wcas-search-icon svg, .hd__search .dgwt-wcas-ico-magnifier-handler { display: block; width: 20px; height: 20px; margin: 0; fill: var(--c-ink) !important; }
.hd__search .dgwt-wcas-sf-wrapp { background: transparent !important; padding: 0 !important; }
.hd__search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { height: 44px !important; border-radius: 999px !important; border: 1.5px solid var(--c-line-2) !important; background: var(--c-page) !important; color: var(--c-ink) !important; font: 500 14px var(--f-text) !important; padding-left: 44px !important; box-shadow: none !important; }
.hd__search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus { border-color: var(--c-blue) !important; background: var(--c-card) !important; }
/* keyboard focus: the site's focus ring (3px light blue, 2px off) on the search field and its buttons too (polish review D) */
#brx-header .hd__search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus-visible, #brx-header .hd__search :is(.dgwt-wcas-search-submit, .dgwt-wcas-search-icon, .dgwt-wcas-close):focus-visible { outline: 3px solid var(--c-blue-light) !important; outline-offset: 2px !important; }
#brx-header .hd__search .dgwt-wcas-sf-wrapp :is(.dgwt-wcas-search-submit, .dgwt-wcas-close):focus-visible { outline-offset: -3px !important; } /* the magnifier and × inside the pill: their ring inside it, clear of the words */
.hd__search .dgwt-wcas-sf-wrapp input::placeholder { color: var(--c-ink-2); opacity: 1; }
.hd__search .dgwt-wcas-search-submit { left: 6px !important; right: auto !important; top: 0 !important; height: 44px !important; min-height: 44px !important; width: 36px !important; background: transparent !important; padding: 0 !important; }
.hd__search .dgwt-wcas-search-submit svg path { fill: var(--c-ink-2) !important; }
.hd__search .dgwt-wcas-search-submit::before, .hd__search .dgwt-wcas-search-submit::after { display: none !important; }
#brx-header .hd__search .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { padding-right: 42px !important; } /* a long search stays clear of the × (review, 2 Nov) */
#brx-header .hd__search .dgwt-wcas-sf-wrapp :is(.dgwt-wcas-close, .dgwt-wcas-preloader) { right: 12px !important; left: auto !important; margin-right: 0 !important; } /* FiboSearch's clear × and spinner at the pill's right end */
.dgwt-wcas-suggestions-wrapp, .dgwt-wcas-details-wrapp { border-color: var(--c-line) !important; border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: 0 18px 40px -18px rgba(0, 56, 95, .4); font-family: var(--f-text) !important; }
.dgwt-wcas-suggestion { font-family: var(--f-text) !important; color: var(--c-ink) !important; }
.dgwt-wcas-suggestion-selected { background: var(--c-band) !important; }
.dgwt-wcas-st strong, .dgwt-wcas-suggestion strong { color: var(--c-blue) !important; }
/* search on phones and tablets (owner, 2 Nov: "open as an overlay instead of taking the whole screen and turning it
   white"): FiboSearch's own phone search (it brings up the keyboard straight away), drawn as a white panel at the top
   with the page dimmed behind it: the field (16px type, so phones don't zoom), its results under it inside the panel,
   and × (FiboSearch's return button) to close; a tap on the dimmed page ("Header & footer parts") or Escape closes it
   too. FiboSearch hides the page behind its search on iPhones; here the page stays, still. */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-overlay-mobile { position: fixed; inset: 0; width: auto; height: auto; overflow: hidden; background: rgba(0, 32, 56, .5); animation: tvsco-fade .15s ease-out; }
@keyframes tvsco-fade { from { opacity: 0; } }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; height: auto; max-height: 100%; padding: max(12px, env(safe-area-inset-top, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)) 12px max(var(--gut), env(safe-area-inset-left, 0px)); background: var(--c-card); border-radius: 0 0 var(--r) var(--r); box-shadow: 0 24px 48px -20px rgba(0, 32, 56, .6); }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp-mobile { order: 1; flex: 1 1 0; width: auto; min-width: 0; max-width: none; margin: 0; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-sf-wrapp { padding: 0 !important; background: transparent !important; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input { box-sizing: border-box; height: 44px !important; padding: 0 16px 0 44px !important; border: 1.5px solid var(--c-blue) !important; border-radius: 999px !important; background: var(--c-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5563' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 15px center / 19px no-repeat !important; color: var(--c-ink) !important; font: 500 16px/1.2 var(--f-text) !important; box-shadow: none !important; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp input::placeholder { color: var(--c-ink-2); opacity: 1; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-close { display: none !important; } /* one × only: the panel's own */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return { order: 2; position: relative; flex: none; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important; background: var(--c-band) !important; cursor: pointer; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return svg { display: none; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: var(--c-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return:focus-visible { outline: 3px solid var(--c-blue-light); outline-offset: 2px; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-suggestions-wrapp, html.dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios .dgwt-wcas-om-bar .dgwt-wcas-suggestions-wrapp { order: 3; flex: 1 0 100%; position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-height: calc(100vh - 92px) !important; max-height: calc(100dvh - 92px) !important; margin: 4px calc(-1 * var(--gut)) -12px; padding: 0 var(--gut) 8px; overflow-y: auto; overscroll-behavior: contain; border: 0 !important; border-top: 1px solid var(--c-line) !important; border-radius: 0 0 var(--r) var(--r); box-shadow: none; background: transparent; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-suggestions-wrapp:not(:has(.dgwt-wcas-suggestion)) { display: none !important; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-suggestion { padding-left: 0; padding-right: 0; font-size: 15px; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-st-title { font-weight: 600; }
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-suggestion-headline .dgwt-wcas-st { font: 700 11.5px/1.3 var(--f-text); letter-spacing: .14em; color: var(--c-blue); border-color: var(--c-line) !important; }
html.dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios, html.dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios body { overflow: hidden; }
html.dgwt-wcas-overlay-mobile-on.dgwt-wcas-is-ios body > :is(#brx-header, #brx-content, #brx-footer) { display: block; }
/* from 992px the header's own field: while it is in use, FiboSearch's "Darkened background" (its setting, on since
   2 Nov) dims the page around the field and its results, in the same tint as the phone panel */
.dgwt-wcas-darkened-overlay { opacity: .5 !important; } /* FiboSearch: 15% black; its four parts overlap, so the tint goes on the whole */
.dgwt-wcas-darkened-overlay > div { background-color: rgb(0, 32, 56) !important; animation: tvsco-fade .15s ease-out; }
.hd__search .dgwt-wcas-search-wrapp { transition: background-color .15s ease-out; }
.hd__search .dgwt-wcas-search-wrapp.dgwt-wcas-search-darkoverl-on { background-color: color-mix(in srgb, rgb(0, 32, 56) 50%, var(--c-card)); box-shadow: 0 0 0 5px color-mix(in srgb, rgb(0, 32, 56) 50%, var(--c-card)); } /* the dim leaves the field's box clear: tint its corners round the pill too */
/* the keyboard focus ring sits 2-5px outside the field: the dim's four parts (FiboSearch: left, top, right, bottom of
   the field) leave a 5px wider hole, inside their own boxes so nothing grows, and the field's tint covers that band */
.dgwt-wcas-darkened-overlay > div { box-sizing: border-box; border: 0 solid transparent; background-clip: padding-box; }
.dgwt-wcas-darkened-overlay > div:nth-child(1) { border-right-width: 5px; }
.dgwt-wcas-darkened-overlay > div:nth-child(2) { border-bottom-width: 5px; }
.dgwt-wcas-darkened-overlay > div:nth-child(3) { border-left-width: 5px; }
.dgwt-wcas-darkened-overlay > div:nth-child(4) { border-top-width: 5px; }
/* menu: the row of main categories (one line on phones), and the category panels (below) */
.hd__nav { position: static; background: var(--mb-bg, transparent); border-top: 1px solid var(--mb-top, var(--c-line)); }
#brx-header .hd__nav > .bricks-nav-menu-wrapper { display: block; }
.hd__nav .bricks-nav-menu { --mb-gap: clamp(22px, calc(7.5vw - 22px), 88px); display: flex; gap: var(--mb-gap); width: max-content; max-width: 100%; margin: 0 auto; padding: 0 var(--gut); height: 44px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.hd__nav .bricks-nav-menu::-webkit-scrollbar { display: none; }
.hd__nav .bricks-nav-menu > li { margin: 0; flex: none; }
.hd__nav .bricks-nav-menu > li > a, .hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a { padding: 6px 0 4px; font: 700 12.5px/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mb-ink, var(--c-ink)); text-decoration: none; border-bottom: 2px solid transparent; }
.hd__nav .bricks-nav-menu > li > a:hover, .hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover, .hd__nav .bricks-nav-menu > li.current-menu-item > a, .hd__nav .bricks-nav-menu > li.current-menu-ancestor > .brx-submenu-toggle > a, .hd__nav .bricks-nav-menu > li.current-menu-item > .brx-submenu-toggle > a, .hd__nav .bricks-nav-menu > li.is-open > .brx-submenu-toggle > a { border-color: var(--mb-line, var(--c-blue)); }
.hd__nav .bricks-nav-menu > li > a:focus-visible, .hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a:focus-visible, .hd__nav .brx-submenu-toggle button:focus-visible { outline-color: var(--mb-focus, var(--c-blue-light)); }
.hd__nav .bricks-nav-menu .brx-submenu-toggle button { display: none; }
.hd__nav .bricks-nav-menu .sub-menu { display: none !important; }
/* category panels (owner, 2 Nov: "like the old site does, but in a better style"): Cartoons, Family and Live Action
   each open a white panel of their shows, "Show All" (the category page) first on a pale band; open while the
   category is li.is-open (the "Header & footer parts" script: tap or click, or a resting mouse). Phones and tablets:
   the panel spans the screen under the menu bar, two columns of 44px rows (three from 560px); from 992px it drops
   under its own category as before. The open category is underlined in the bar, like the page you are on. */
.hd__nav .bricks-nav-menu > li.is-open > .sub-menu { display: grid !important; opacity: 1; visibility: visible; pointer-events: auto; animation: tvsco-panel .14s ease-out; }
@keyframes tvsco-panel { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .hd__nav .bricks-nav-menu > li.is-open > .sub-menu { animation: none; } }
.hd__nav .bricks-nav-menu > li > .sub-menu { box-sizing: border-box; position: absolute; z-index: 5; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; margin: 0; padding: 10px; list-style: none; background: var(--c-card); color: var(--c-ink); line-height: 1.3; text-align: left; }
.hd__nav .bricks-nav-menu .sub-menu > li { margin: 0; min-width: 0; }
.hd__nav .bricks-nav-menu .sub-menu a { box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: var(--c-ink); font: 600 14.5px/1.3 var(--f-text); letter-spacing: 0; text-transform: none; text-decoration: none; }
.hd__nav .bricks-nav-menu .sub-menu a:hover, .hd__nav .bricks-nav-menu .sub-menu .current-menu-item > a { background: var(--c-band); color: var(--c-blue); }
.hd__nav .bricks-nav-menu .sub-menu .menu-item-showall { grid-column: 1 / -1; margin-bottom: 6px; }
.hd__nav .bricks-nav-menu .sub-menu .menu-item-showall > a { gap: 8px; background: var(--c-band); color: var(--c-blue); font-weight: 800; }
.hd__nav .bricks-nav-menu .sub-menu .menu-item-showall > a::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.hd__nav .bricks-nav-menu .sub-menu .menu-item-showall > a:hover { background: color-mix(in srgb, var(--c-blue) 10%, var(--c-card)); }
@media (max-width: 991px) {
  .hd__nav .bricks-nav-menu-wrapper, .hd__nav .bricks-nav-menu, .hd__nav .bricks-nav-menu > li.menu-item-has-children { position: static; }
  .hd__nav .bricks-nav-menu .sub-menu a { white-space: normal; overflow-wrap: anywhere; } /* a long show name wraps inside its own column (review, 2 Nov) */
  .hd__nav .bricks-nav-menu > li > .sub-menu { left: 0; right: 0; top: 100%; width: auto; min-width: 0; padding: 10px max(var(--gut), env(safe-area-inset-right, 0px)) 14px max(var(--gut), env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--c-line); box-shadow: 0 20px 32px -20px rgba(0, 32, 56, .45); transform: none; }
}
@media (min-width: 560px) and (max-width: 991px) { .hd__nav .bricks-nav-menu > li > .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { /* FiboSearch's icon (it opens the search panel below; without its phone search the field would open under the header row, full width) */
  /* the wrapper is the icon's 44px box; in full-screen mode FiboSearch lays a tap link over the whole wrapper, so the
     wrapper keeps its own position there (static would stretch that link over the header: logo, cart and menu) */
  #brx-header .hd__search .dgwt-wcas-search-wrapp { width: 44px; max-width: 44px; }
  #brx-header .hd__search .dgwt-wcas-search-wrapp:not(.dgwt-wcas-mobile-overlay-trigger-active) { position: static; }
  html:not(.dgwt-wcas-overlay-mobile-on) #brx-header .hd__search .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon .dgwt-wcas-search-form { left: var(--gut) !important; right: var(--gut) !important; top: 58px !important; width: auto !important; min-width: 0 !important; }
  #brx-header .hd__search .dgwt-wcas-search-icon-arrow { display: none !important; }
}
@media (max-width: 559px) {
  /* phones (owner, 2 Nov): all five links on one line, spread from 12px off the left edge to 12px off the right; the
     type eases from 10.5px with no letter-spacing at 360px to 12px / 1.5px at 480px (half a pixel under the earlier
     phone sizes, owner 2 Nov; 12.5px again from 560px); each link 40px tall */
  .hd__nav .bricks-nav-menu { justify-content: space-between; gap: 0; box-sizing: border-box; width: 100%; margin: 0; padding: 0 12px; overflow: visible; }
  .hd__nav .bricks-nav-menu > li > a, .hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a { box-sizing: border-box; display: flex; align-items: center; min-height: 40px; padding: 0; border-bottom: 0; font-size: clamp(10.5px, calc(10.5px + (100vw - 360px) * .0125), 12px); letter-spacing: clamp(0px, calc((100vw - 360px) * .0125), 1.5px); background: linear-gradient(currentColor, currentColor) 0 calc(50% + 11px) / 0 2px no-repeat; }
  .hd__nav .bricks-nav-menu > li > a:hover, .hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover, .hd__nav .bricks-nav-menu > li.current-menu-item > a, .hd__nav .bricks-nav-menu > li.current-menu-ancestor > .brx-submenu-toggle > a, .hd__nav .bricks-nav-menu > li.current-menu-item > .brx-submenu-toggle > a, .hd__nav .bricks-nav-menu > li.is-open > .brx-submenu-toggle > a { background-image: linear-gradient(var(--mb-line, var(--c-blue)), var(--mb-line, var(--c-blue))); background-size: 100% 2px; }
}
/* the menu bar: the logo's blue #005A9E (chosen by the owner, 1 Nov): white text 7.1:1, white underline, no
   hairline. The row reads its colours from --mb-*; the dropdown panels stay white. On staging the other
   concepts can still be compared (?menubar=default | blue | dark | light):
   default  the white row with hairlines
   blue     #0070BA, the original site's bar: white text 5.2:1
   dark     #00385F, the footer's navy: white text 12.1:1, light-blue underline and arrows
   light    #D7EBF9, the logo's light blue: navy text 9.9:1, brand-blue underline, a fine edge under it */
:root { --mb-bg: #005A9E; --mb-top: #005A9E; --mb-edge: #005A9E; --mb-ink: #FFFFFF; --mb-line: #FFFFFF; --mb-focus: #FFFFFF; }
html[data-menubar="default"] { --mb-bg: transparent; --mb-top: var(--c-line); --mb-edge: var(--c-line); --mb-ink: var(--c-ink); --mb-line: var(--c-blue); --mb-focus: var(--c-blue-light); }
html[data-menubar="blue"] { --mb-bg: #0070BA; --mb-top: #0070BA; --mb-edge: #0070BA; --mb-ink: #FFFFFF; --mb-line: #FFFFFF; --mb-focus: #FFFFFF; }
html[data-menubar="dark"] { --mb-bg: #00385F; --mb-top: #00385F; --mb-edge: #00385F; --mb-ink: #FFFFFF; --mb-line: #A3D0F0; --mb-focus: #FFFFFF; }
html[data-menubar="light"] { --mb-bg: #D7EBF9; --mb-top: #D7EBF9; --mb-edge: #B9D5EC; --mb-ink: #00385F; --mb-line: #005A9E; --mb-focus: #005A9E; }

/* ---------------------------------------------------------------- footer: promise band + navy footer */
#brx-footer { background: var(--c-navy); }
.promise { background: var(--c-band); border-top: 1px solid var(--c-line); padding-block: 32px; }
.promise__list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.promise__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.promise__list .tvsco-ic { grid-row: span 2; color: var(--c-blue); }
.promise__list b { font: 600 18px/1.3 var(--f-head); color: var(--c-ink); }
.promise__list span { font-size: 14px; color: var(--c-ink-2); }
.ft { background: var(--c-navy); color: #E6EEF6; padding-block: 40px 22px; }
.ft__in { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 18px; }
.ft__brand { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; font-size: 26px; }
.ft__brand p { font-size: 14px; line-height: 1.6; color: var(--c-on-dark-2); max-width: 46ch; }
.ft__title, .ft h2 { margin: 0 0 10px; font: 700 11.5px/1.3 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #A3D0F0; }
.ft__col { display: grid; align-content: start; }
.ft__col a { display: block; padding: 5px 0; font-size: 14px; color: #E6EEF6; text-decoration: none; }
.ft__col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.ft__secure { grid-column: 1 / -1; display: grid; align-content: start; gap: 6px; }
.ft__lock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #E6EEF6; }
.ft__lock::before { content: ""; width: 17px; height: 17px; flex: none; background: #A3D0F0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ft__pay { font-size: 13px; color: var(--c-on-dark-2); }
.ft__copy { margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; color: var(--c-on-dark-2); }

/* ---------------------------------------------------------------- product cards on a shelf */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
/* the white picture box (owner, 2 Nov): the case keeps its size (102.5% of the card's width, as in the earlier 4:5 box)
   with the same white above and below it, --case-pad, about half the 4:5 box's (19px at 390px, 32px at 1280px); the
   card's tag sits in the box's bottom-left corner, 10px in from both edges, over the case's corner if need be (as on
   the home page's Best sellers), so the text under the box starts at the same height on every card */
.sc { position: relative; display: grid; grid-template-rows: auto auto auto auto auto 1fr; min-width: 0; container-type: inline-size; }
.sc__mediawrap { position: relative; }
.sc__shelf { --case-pad: max(10px, 6cqw); position: relative; box-sizing: border-box; display: block; height: calc(102.5cqw + 2 * var(--case-pad)); background: var(--c-card); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--c-card-line); text-decoration: none; }
.sc img.cover-fit { height: calc(102.5cqw * var(--ch, 1) / var(--bh, 1)); }
.sc__badge { position: absolute; left: 10px; bottom: 10px; z-index: 1; pointer-events: none; }
.sc__cover { position: absolute; inset: 0; filter: drop-shadow(5px 5px 7px rgba(0, 32, 56, .28)); transition: transform .25s; }
/* a case on a card (cards and spine cards): centred both ways in its box, every case --case-h tall, DVD and Blu-Ray
   alike (owner, 2 Nov; the home Blu-Ray rail keeps its Blu-Rays at 0.96, --ch, so they don't crowd its slots); --bx/--by/--bw/--bh are the case's own box in the photo */
.blu img.cover-fit--bd { --ch: .96; }
img.cover-fit { position: absolute; left: 50%; top: 50%; display: block; width: auto; max-width: none; max-height: none; height: calc(var(--case-h) * var(--ch, 1) / var(--bh, 1)); transform: translate(calc(-100% * (var(--bx, 0) + var(--bw, 1) / 2)), calc(-100% * (var(--by, 0) + var(--bh, 1) / 2))); }
@media (hover: hover) { .sc__shelf:hover .sc__cover { transform: translateY(-4px); } }
.tag {display: inline-block; padding: 5px 8px 4px; border-radius: 3px; background: var(--c-tag); color: var(--c-tag-ink); font: 800 10.5px/1.25 var(--f-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tag--save { background: var(--c-save); color: var(--c-save-ink); }
.sc__show { display: flex; margin-top: 14px; font: 700 11px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--c-blue); white-space: nowrap; overflow: hidden; }
.sc__showname { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* a long show name is cut short, " · DVD" / " · Blu-Ray" always shows (review, 2 Nov) */
.sc__fmt, .sc__sep { flex: none; white-space: pre; }
.sc__name { margin-top: 4px; font: 600 17px/1.25 var(--f-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.sc__name a { color: var(--c-ink); text-decoration: none; }
.sc__name a:hover { color: var(--c-blue); }
.sc__meta { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--c-ink-2); }
.sc__rate { margin-top: 6px; height: 20px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-ink-2); }
/* narrow cards (phones): the kicker shows only the format, never a show name cut mid-word (the title names the show),
   and the facts line drops the hours so it stays on one line and the stars line up across a row (polish review B5);
   a long show name (24+ letters) also gives way on a mid-size card. Not the home page's Best sellers card (locked). */
@container (max-width: 199.98px) { .sc__showname, .sc__sep, .sc:not(.sc--best) .sc__meta .sc__hrs { display: none; } }
@container (max-width: 249.98px) { .sc__show--long .sc__showname, .sc__show--long .sc__sep { display: none; } }
.sc__foot { position: relative; align-self: end; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--c-line-2); display: grid; justify-items: start; gap: 4px; }
.sc__price { margin-bottom: -6px; } /* Add to cart under the price (phones and tablets) reads as one block with it (owner, 2 Nov: "a little too far down from the price"); from 1024px they share a row */
.sc__price .price, .pdp__price .price, .buybar__price .price { position: relative; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; margin: 0; }
.sc__price .price { font: 800 17px/1.3 var(--f-text); color: var(--c-ink); }
.sc__price del, .pdp__price del, .buybar__price del { font-weight: 500; font-size: 13px; color: var(--c-ink-2); }
.sc__price ins, .pdp__price ins, .buybar__price ins { text-decoration: none; }
.sc__add { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--c-blue); font: 700 13.5px/1 var(--f-text); text-decoration: none; }
.sc__add:hover .sc__addt { text-decoration: underline; text-underline-offset: 3px; }
.sc__add.loading { opacity: .55; }
.sc__addok { display: none; }
.sc__add.added .sc__addt { display: none; }
.sc__add.added .sc__addok { display: inline; }
.sc__add.added .tvsco-ic { display: none; }
.sc__add.added::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.sc__foot .added_to_cart { display: none !important; }
.sc__sold { display: inline-block; min-height: 28px; line-height: 28px; font-size: 13px; font-weight: 700; color: var(--c-ink-2); }
.sc__new { font-size: 12.5px; color: var(--c-ink-2); }
/* the home page's Best sellers card: stars first under the case, then the name and the facts, then the price row
   closed by the dashed line underneath (owner, 1 Nov); every other card keeps the layout above. Three groups (owner,
   2 Nov): the picture box with its tag; the stars, name and facts close together (about 11px of white between the
   stars and the name's letters, about 7px between the name and the facts); then the price row, at least
   16px under the facts and level with its neighbours' (any spare room in a row goes above it) */
.sc--best { grid-template-rows: auto auto auto auto 1fr; }
/* the picture box is the product lists' box (owner, 2 Nov night: "make it match the product lists ones"): the same
   white above and below the centred case (6% of the card's width, at least 10px: 10px on phones, 13.5px at 768px, 17px
   at 1280px; it was 40px), and the Top Seller tag 10px in from its left and bottom edges, as on every card */
.sc--best .sc__rate { margin-top: 14px; height: 14px; } /* the stars where they were, 14px under the picture box */
.sc--best .sc__name { margin-top: 5px; min-height: 0; }
.sc--best .sc__foot { margin-top: 16px; padding: 0 0 12px; border-top: 0; border-bottom: 1px dashed var(--c-line-2); }

/* spine cards on one shelf (home Blu-Ray rail, "Complete your shelf", "You might also like"). The cases stand on one
   line at the bottom of their box (DVDs and Blu-Rays alike, no white tile), and the box ends at that line: the label
   starts 14px under every case, with the name 6px under it and the price 3px under that, one block (owner, 2 Nov:
   the label 2px higher than before, the case, name and price where they were); in the home
   Blu-Ray rail (no label) the name starts 13.5px under the case (owner, 2 Nov). --cover-h is the nominal box (150 / 200 / 170px); the box keeps
   the case's top where it was and drops the empty band underneath. */
.spine { --cover-h: 150px; position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 8px; min-width: 0; text-align: center; text-decoration: none; color: var(--c-ink); }
.spine__cover { --case-h: 100%; position: relative; display: block; width: 100%; height: calc(var(--cover-h) * .82); margin-top: calc(var(--cover-h) * .09); filter: drop-shadow(4px 4px 6px rgba(0, 32, 56, .3)); transition: transform .25s; }
.spine__cover img.cover-fit { top: 100%; transform: translate(calc(-100% * (var(--bx, 0) + var(--bw, 1) / 2)), calc(-100% * (var(--by, 0) + var(--bh, 1)))); }
@media (hover: hover) { .spine:hover .spine__cover { transform: translateY(-4px); } }
.spine__yr { margin: 8px 0 0; padding: 2px 8px; border-radius: 3px; background: var(--c-tag); color: var(--c-tag-ink); font: 800 11px/1.5 var(--f-text); letter-spacing: .06em; text-transform: uppercase; }
.spine.is-now .spine__yr { background: var(--c-blue); }
.spine--nochip .spine__text { margin-top: 7.5px; } /* the home Blu-Ray rail and "You might also like": no label between the case and the name */
.spine__text { display: grid; justify-items: center; align-content: start; gap: 3px; width: 100%; min-width: 0; } /* the name with its price right under it */
.spine__name { box-sizing: content-box; margin-inline: -1em; padding-inline: 1em; font: 600 14.5px/1.25 var(--f-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } /* the side padding gives a cut-short name's "…" room: Chrome centres the line without it */
.spine:hover .spine__name { color: var(--c-blue); }
.spine__price { font-size: 12.5px; color: var(--c-ink-2); }
.shelf1, .collect__shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 160px)); justify-content: center; row-gap: 28px; }
/* the name and price (one block) reserve as much room as the longest in their own row: one line of name when every
   name there fits on one, two when any needs two, any spare room below the price (subgrid: each card's cover, label
   and name + price share their row's tracks). Browsers
   without subgrid keep the two-line room on every card (.spine__name min-height above). */
@supports (grid-template-rows: subgrid) {
  .shelf1 > .spinecell, .shelf1 > .spinecell > .brxe-shortcode { display: contents; }
  .collect__shelf > .spine, .shelf1 .spine { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
  .shelf1 .spine--nochip, .collect__shelf > .spine--nochip { grid-row: span 2; }
  .spine__name { min-height: 0; }
}

/* ---------------------------------------------------------------- home */
.hero { background: var(--c-hero); color: var(--c-hero-ink); padding-block: 32px; overflow: hidden; }
.hero__in { display: grid; gap: 30px; }
.hero__copy { display: grid; gap: 16px; justify-items: start; align-content: center; }
.hero .kicker { color: var(--c-hero-accent); }
.hero__title { font: 600 clamp(36px, 9.6vw, 64px)/1.04 var(--f-head); letter-spacing: -.025em; text-wrap: balance; }
.hero__title em { font-style: italic; font-weight: 500; color: var(--c-hero-accent); }
.hero .lede { font-size: 17px; line-height: 1.6; color: var(--c-hero-ink-2); max-width: 46ch; }
.hero__title { font-family: 'Fraunces', 'TVS Fraunces Fallback Sm', Georgia, 'Times New Roman', serif; }
@media (min-width: 667px) { .hero__title { font-family: 'Fraunces', 'TVS Fraunces Fallback', Georgia, 'Times New Roman', serif; } } /* 64px from here */
.hero .lede { font-family: 'Manrope', 'TVS Manrope Fallback', system-ui, 'Segoe UI', sans-serif; }
.shelf { position: relative; }
/* the hero ends right under its text and cases (owner, 1 Nov): the same space above and below them, and Best sellers
   follows straight after (in Two-tone the hero is a blue band, so the section keeps its usual gap there) */
html:not([data-scheme="twotone"]) .hero + .fav { margin-top: 0; }
.shelf__row { display: flex; align-items: flex-end; justify-content: center; padding: 0 6%; }
.shelf__book { position: relative; z-index: var(--i); flex: none; width: 26%; margin-left: -9%; filter: drop-shadow(-7px 4px 9px rgba(0, 32, 56, .35)); transform-origin: bottom center; transition: transform .25s; }
.shelf__book:first-child { margin-left: 0; }
.shelf__book:nth-child(n+6) { display: none; }
.shelf__book img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .shelf__book:hover { transform: translateY(-8px); } }
/* the hero's cases slide out of a stack on every page load (owner, 2 Nov: "like the slide out one we used on the banners
   at the bottom of the tvshowdvds"): the five start on top of each other where the first one stands (X-Men, the last,
   on top) and spread to their places together, with TVShowDVDs' hero motion (1.3s, cubic-bezier(.3, .4, .3, 1)). The
   stack stays hidden until every cover is decoded, then shows and moves in the same frame ([tvsco_shelf]'s script sets
   data-anim before the first paint and data-go then). Settled, the row is exactly as before. --step: from one case to
   the next, (width + margin-left) / width. */
.shelf__book { --step: 65.3846%; } /* (26% - 9%) / 26% */
@media (prefers-reduced-motion: no-preference) {
  .shelf[data-anim] .shelf__book { animation: tvsco-shelf-spread 1.3s cubic-bezier(.3, .4, .3, 1) backwards; animation-play-state: paused; }
  .shelf[data-anim][data-go] .shelf__book { animation-play-state: running; }
  .shelf[data-anim]:not([data-go]) .shelf__row { visibility: hidden; }
}
@keyframes tvsco-shelf-spread { from { transform: translateX(calc((var(--i) - 1) * var(--step) * -1)); } }
.fav, .blu, .guest, .bestsellers { margin-top: 56px; }
.blu .shelf1 { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.blu .shelf1 > .brxe-div { min-width: 0; }
/* spotlight band */
.spot { margin-top: 64px; background: var(--c-spot); color: var(--c-spot-ink); padding-block: 44px 52px; overflow: hidden; }
.spot__in { display: grid; gap: 40px; }
.spot__pic { position: relative; margin-bottom: 18px; }
.spot__still { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.spot__cover { position: absolute; left: 14px; bottom: -22px; width: 30%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); }
.spot__cover img { display: block; width: 100%; height: auto; }
.spot__copy { display: grid; gap: 16px; align-content: center; justify-items: start; min-width: 0; }
.spot .kicker { color: var(--c-on-dark); }
.spot__stars { margin: 0 0 0 calc(-18px * 2.8 / 24); line-height: 0; --c-star: var(--c-on-dark); --c-star-empty: rgba(255, 255, 255, .3); --c-star-empty: color-mix(in srgb, var(--c-on-dark) 32%, transparent); } /* the quoted review's stars, 18px, where "Spotlight" was, in the colour of the line under the name (owner, 2 Nov); an empty star is a dimmer version of it; the first star's tip lines up with the name */
.spot h2 { font-size: clamp(30px, 7vw, 46px); line-height: 1.05; }
.spot__text { font-size: 16.5px; color: var(--c-on-dark); }
.spot__quote { border-left: 3px solid var(--c-blue-light); padding-left: 16px; }
.spot__quote::before, .gb blockquote::before { content: none; }
.spot__quote p { font: italic 400 19px/1.5 var(--f-head); color: #FFFFFF; }
.spot__quote cite { display: block; margin-top: 8px; font: 700 12px/1.3 var(--f-text); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--c-on-dark); }
.spot__buy { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--onspot { background: #FFFFFF; color: var(--c-navy); }
.btn--onspot:hover { background: var(--c-on-dark); color: var(--c-navy); }
.btn--ghost-onspot { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); }
.btn--ghost-onspot:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
/* guestbook */
.guest__wall { columns: 1; column-gap: 16px; }
.gb { break-inside: avoid; display: grid; gap: 14px; margin: 0 0 16px; padding: 20px; background: var(--c-card); border: 1px solid var(--c-card-line); border-radius: var(--r-sm); box-shadow: var(--sh-card); }
.gb blockquote { font: 400 16.5px/1.6 var(--f-head); color: var(--c-ink); overflow-wrap: anywhere; }
.gb figcaption { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--c-line-2); font-size: 13px; color: var(--c-ink-2); }
.gb__cover { flex: none; display: block; width: 32px; line-height: 0; filter: drop-shadow(1px 2px 2px rgba(0, 32, 56, .25)); }
.gb__cover img { display: block; width: 32px; height: auto; }
.gb__who { display: grid; flex: 1; min-width: 0; }
.gb__who b { color: var(--c-ink); font-size: 14px; }
.gb__who a { padding-block: 12px; margin-block: -12px; color: var(--c-ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a 45px tap area, the same layout */
.gb__who a:hover { color: var(--c-blue); }

/* ---------------------------------------------------------------- page heads (shop, categories, search, pages, cart) */
.pagehead { padding-block: 22px 10px; }
.crumbs { font-size: 13px; color: var(--c-ink-2); }
.crumbs nav, .crumbs .navigation { display: flex; flex-wrap: wrap; align-items: center; }
.crumbs a { position: relative; color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-2); }
.crumbs a::after { content: ""; position: absolute; inset: -12px -4px; } /* a 45px tap area around the 21px link, invisible */
.crumbs a:hover { color: var(--c-blue); }
.crumbs .separator { margin: 0 6px; }
.crumbs .separator::before { content: "/"; color: var(--c-ink-2); }
.pagehead .kicker { margin-top: 18px; }
.pagehead h1, .pagehead .brxe-post-title { margin-top: 6px; font: 600 clamp(34px, 8vw, 52px)/1.08 var(--f-head); letter-spacing: -.025em; color: var(--c-ink); }
.pagehead > .kicker:first-child { margin-top: 8px; }
.pagehead__text { margin-top: 10px; max-width: 70ch; color: var(--c-ink-2); font-size: 16px; }
.pagehead__text p { margin: 0 0 8px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 26px; padding-block: 12px; border-block: 1px solid var(--c-line); font-size: 14px; color: var(--c-ink-2); }
.toolbar .woocommerce-result-count { margin: 0; }
.toolbar .woocommerce-ordering { margin: 0; }
.toolbar select { box-sizing: border-box; height: 42px; padding: 0 38px 0 14px; border: 1.5px solid var(--c-line-2); border-radius: var(--r-sm); background: var(--c-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202833' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; color: var(--c-ink); font: 600 14px var(--f-text); -webkit-appearance: none; appearance: none; cursor: pointer; }
.pager { display: flex; justify-content: center; margin: 40px 0 8px; }
.pager .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pager .page-numbers li { margin: 0; }
.pager a.page-numbers, .pager span.page-numbers { box-sizing: border-box; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-sm); background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-ink); font-weight: 700; text-decoration: none; }
.pager a.page-numbers:hover { border-color: var(--c-blue); color: var(--c-blue); }
.pager span.page-numbers.current { background: var(--c-blue); border-color: var(--c-blue); color: #FFFFFF; }
.pager span.page-numbers.dots { background: transparent; border-color: transparent; }
.toolbar:not(:has(.woocommerce-result-count, .woocommerce-ordering)) { display: none; }
.noresults { display: grid; justify-items: start; gap: 16px; padding: 28px; background: var(--c-card); border: 1px solid var(--c-card-line); border-radius: var(--r); box-shadow: var(--sh-card); font-size: 16px; }
.archive-grid { padding-bottom: 56px; }
.bestsellers, .guest:not(.guest--pdp) { margin-bottom: 64px; }

/* ---------------------------------------------------------------- pages (FAQ, contact, policies, site map) */
.content { padding-bottom: 56px; }
body:not(.woocommerce-account) .content > .brxe-post-content { box-sizing: border-box; max-width: 860px; padding: 20px 16px; background: var(--c-card); border: 1px solid var(--c-card-line); border-radius: var(--r); box-shadow: var(--sh-card); }
.content .brxe-post-content { font-size: 16px; line-height: 1.7; color: var(--c-ink); overflow-wrap: break-word; }
.content .brxe-post-content p, .content .brxe-post-content ul, .content .brxe-post-content ol { margin: 0 0 14px; }
.content .brxe-post-content li { margin-bottom: 6px; }
.content .brxe-post-content h2 { margin: 28px 0 10px; font-size: 26px; line-height: 1.2; }
.content .brxe-post-content h3 { margin: 22px 0 8px; font-size: 21px; }
.content .brxe-post-content > :first-child, .content .brxe-post-content h2:first-child { margin-top: 0; }
.content .brxe-post-content a { color: var(--c-blue); text-underline-offset: 3px; }
.content .brxe-post-content fieldset { margin: 0 0 14px; padding: 16px 14px 14px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-page); }
.content .brxe-post-content legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font: 600 19px/1.3 var(--f-head); color: var(--c-ink); }
.content .brxe-post-content legend + * { clear: both; }
.content .brxe-post-content img { height: auto; }
.content .brxe-post-content [style*="border"] { border-color: var(--c-line) !important; border-radius: var(--r-sm); }
.content .brxe-post-content .rank-math-html-sitemap { columns: 1; }
.content .brxe-post-content .rank-math-html-sitemap__list { padding-left: 18px; }
/* Contact Us page (polish review B2): one card, everything left-aligned: the question line, the two quick links as
   rows, then the office address under its own heading. The words are the old page's. */
.content .brxe-post-content .contact { max-width: 600px; }
.content .brxe-post-content .contact__lede { margin-bottom: 16px; font: 600 22px/1.25 var(--f-head); color: var(--c-ink); }
.content .brxe-post-content .contact__links { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.content .brxe-post-content .contact__links li { margin: 0; }
.content .brxe-post-content .contact__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; border: 1px solid var(--c-line-2); border-radius: var(--r-sm); background: var(--c-page); font-weight: 700; line-height: 1.3; text-decoration: none; transition: border-color .15s; }
.content .brxe-post-content .contact__links a::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.content .brxe-post-content .contact__links a:hover { border-color: var(--c-blue); }
.content .brxe-post-content .contact__office { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.content .brxe-post-content .contact__office h2 { margin: 0 0 10px; font-size: 22px; }
.content .brxe-post-content .contact__office address { margin: 0 0 12px; font-style: normal; }

/* ---------------------------------------------------------------- 404 */
.empty { display: grid; justify-items: start; gap: 14px; padding-block: 40px 8px; }
.empty h1 { font: 600 clamp(36px, 9vw, 56px)/1.05 var(--f-head); letter-spacing: -.025em; }
.empty p:not(.kicker) { max-width: 52ch; font-size: 17px; color: var(--c-ink-2); }
.empty .btn { margin-top: 6px; }

/* ---------------------------------------------------------------- product page */
.pdp-crumbs { padding-top: 16px; }
.pdp__top { display: grid; gap: 22px; margin-top: 14px; }
.pdp__media { --tvm-panel: #FFFFFF; --tvm-line: var(--c-line); --tvm-r: var(--r); --tvm-accent: var(--c-blue); --tvm-fg: var(--c-ink); --tvm-icon: #0564BA; min-width: 0; }
.pdp__info { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pdp__info h1 { font: 600 clamp(30px, 7.6vw, 44px)/1.08 var(--f-head); letter-spacing: -.02em; }
.pdp__rate .woocommerce-product-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.pdp__rate .woocommerce-review-link { position: relative; color: var(--c-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pdp__rate .woocommerce-review-link::after { content: ""; position: absolute; inset: -15px -6px; } /* a 44px tap area round the 14px link, invisible (review, 2 Nov) */
#reviews { scroll-margin-top: 158px; } /* "N customer reviews" lands with the Reviews heading and its average in view (review, 2 Nov) */
@media (min-width: 480px) { #reviews { scroll-margin-top: 137px; } }
.pdp__rate .star-rating, .rlist .star-rating { position: relative; display: inline-block; flex: none; width: 5.3em; height: 1em; margin: 0; overflow: hidden; font: 17px/1 Arial, sans-serif; letter-spacing: .06em; color: var(--c-star-empty); }
.pdp__rate .star-rating::before, .rlist .star-rating::before { content: "★★★★★"; position: absolute; top: 0; left: 0; }
.pdp__rate .star-rating span, .rlist .star-rating span { position: absolute; top: 0; left: 0; height: 100%; padding: 0; overflow: hidden; font-size: 0; }
.pdp__rate .star-rating span::before, .rlist .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; font-size: 17px; letter-spacing: .06em; color: var(--c-star); }
.pdp__price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 4px; }
.pdp__price > .brxe-shortcode, .pdp__price > .brxe-product-price { width: auto; }
.pdp__price .price { gap: 12px; }
.pdp__price ins, .pdp__price .price > .amount, .pdp__price .price > .woocommerce-Price-amount { font: 600 36px/1 var(--f-head); color: var(--c-ink); }
.pdp__price del { font-size: 16px; }
.tvsco-savings { padding: 5px 10px; border-radius: 4px; background: var(--c-save); color: var(--c-save-ink); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.tvsco-savings .amount { color: inherit; }
.tvsco-stock { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; }
.tvsco-stock::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.tvsco-stock--in { color: var(--c-ok); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.tvsco-stock--low { color: #B42318; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
/* product page (owner, 1 Nov): yellow review stars (TVShowDVDs' #F4B400) in the summary, the reviews and the review form,
   and a red "Almost gone!" line (#B42318: 6.6:1 on white, 6.0:1 on the shaded page); cards elsewhere keep the blue stars */
.pdp__rate, .guest--pdp { --c-star: #F4B400; --c-star-empty: #E3D9BC; }
.pdp__buy .stock { display: none; }
.pdp__buy form.cart { display: flex; gap: 10px; margin: 0; }
.pdp__buy form.cart .quantity { box-sizing: border-box; display: inline-flex; flex: none; align-items: stretch; width: auto; height: 52px; border: 1.5px solid var(--c-line-2); border-radius: var(--r-sm); background: var(--c-field); overflow: hidden; }
.pdp__buy form.cart .quantity .action { width: 42px; border: 0 !important; opacity: 1; color: var(--c-ink-2); }
.pdp__buy form.cart .quantity .action svg { width: 16px; height: 16px; stroke: currentColor; }
.pdp__buy form.cart .quantity .action:hover { color: var(--c-blue); }
.pdp__buy form.cart .quantity input.qty { width: 30px; height: 100%; border: 0 !important; background: transparent; color: var(--c-ink); font: 700 16px var(--f-text); text-align: center; padding: 0 !important; line-height: 1; }
.pdp__buy form.cart .quantity:has(input[type=hidden]) { display: none; } /* no quantity box on the product page: it adds one set */
.pdp__buy .single_add_to_cart_button { flex: 1; min-width: 0; height: 52px; margin: 0 !important; border: 0; border-radius: var(--r-sm); background: var(--c-blue); color: #FFFFFF; font: 700 14.5px/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background-color .15s; }
.pdp__buy .single_add_to_cart_button:hover { background: var(--c-blue-dark); }
.pdp__buy .single_add_to_cart_button.loading { opacity: .7; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; padding: 0; list-style: none; border-block: 1.5px solid var(--c-ink); }
.facts li { display: grid; justify-items: center; align-content: center; padding: 10px 4px; text-align: center; }
.facts li + li { border-left: 1px solid var(--c-line-2); }
.facts b { font: 600 28px/1.1 var(--f-head); letter-spacing: -.02em; color: var(--c-ink); }
.facts span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.mini-trust { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--c-ink-2); }
.mini-trust li { display: flex; align-items: center; gap: 10px; }
.mini-trust .tvsco-ic { color: var(--c-blue); }
.mini-trust b { color: var(--c-ink); }
.pdp__info .mini-trust { margin-top: 10px; } /* a little air between the facts row and the three promises (owner, 3 Nov) */
.pdp__body { display: grid; gap: 34px; margin-top: 44px; padding-top: 34px; background: linear-gradient(var(--c-line), var(--c-line)) center top / calc(100% - 2 * var(--gut)) 1px no-repeat; }
/* the screenshots first (the left column on wide screens); Details then Specs after them (the right column) (owner, 3 Nov) */
.pdp__body > .screenswrap { min-width: 0; }
.pdp__body > .screenswrap .shots { margin-top: 0; }
.pdp__side { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.pdp__side > .backcover { align-self: stretch; }
.details { display: grid; gap: 18px; align-content: start; min-width: 0; }
.details h2 { font-size: 30px; }
.pdp__desc { font-size: 17px; line-height: 1.75; max-width: 66ch; color: var(--c-ink); overflow-wrap: break-word; }
.pdp__desc p { margin: 0 0 14px; }
.pdp__desc img { height: auto; }
/* screenshots grid (product page, under the Details text): its styles are the "Screenshots" CSS snippet (screenshots.css) */
.backcover { align-self: start; display: grid; gap: 12px; padding: 20px; background: var(--c-card); border: 2px solid var(--c-ink); min-width: 0; container-type: inline-size; }
.backcover__label { justify-self: start; padding: 5px 10px; background: var(--c-ink); color: var(--c-card); font: 800 13px/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase; }
.backcover__title { font: 600 21px/1.2 var(--f-head); }
.backcover__rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; border-top: 1px dotted #8C9AAA; }
/* label beside value only where every value fits on one line beside it (the longest is ~230px); on a narrower card
   (phones) the label sits above its value, so no value ever leaves one word on a line of its own (polish review B4) */
@container (min-width: 330px) { .backcover__rows > div { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; } }
@container (min-width: 480px) { .backcover__rows > div { grid-template-columns: 136px minmax(0, 1fr); } } /* a wide card (tablets): each label on one line too */
.backcover dt { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); }
.backcover dd { font-size: 14px; font-weight: 600; }
.backcover__foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 2px solid var(--c-ink); font-size: 12.5px; font-weight: 700; color: var(--c-ink-2); }
.backcover__foot .tvsco-ic { color: var(--c-blue); }
/* reviews, guestbook style (WooCommerce's own reviews and review form) */
.guest--pdp .sec-hd { align-items: center; }
.sec-hd__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.rlist .woocommerce-Reviews-title { display: none; }
.rlist #comments { margin: 0; }
.rlist ol.commentlist { margin: 0; padding: 0; list-style: none; columns: 1; column-gap: 16px; }
.rlist ol.commentlist li.review { break-inside: avoid; margin: 0 0 16px; padding: 20px; background: var(--c-card); border: 1px solid var(--c-card-line); border-radius: var(--r-sm); box-shadow: var(--sh-card); }
.rlist .comment_container { display: block; }
.rlist .comment_container img.avatar { display: none; }
.rlist .comment-text { display: grid; gap: 12px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.rlist .comment-text .star-rating { position: relative; order: 1; font-size: 15px; }
.rlist .comment-text .star-rating span::before { font-size: 15px; }
.rlist .comment-text .description { order: 2; margin: 0; padding: 0; border: 0; font: 400 16.5px/1.6 var(--f-head); color: var(--c-ink); overflow-wrap: anywhere; }
.rlist .comment-text .description p { margin: 0; }
.rlist .comment-text .description p + p { margin-top: 10px; }
.rlist .comment-text .meta { order: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 !important; padding-top: 12px; border-top: 1px dashed var(--c-line-2); font-size: 13px; color: var(--c-ink-2); }
.rlist .woocommerce-review__author { color: var(--c-ink); font-size: 14px; }
.rlist .woocommerce-review__published-date, .rlist .woocommerce-review__dash { color: var(--c-ink-2); }
.rlist .woocommerce-review__verified { font-style: normal; }
.rlist .woocommerce-noreviews { color: var(--c-ink-2); }
.rlist #review_form_wrapper.is-folded { display: none; }
.rlist #review_form_wrapper { max-width: 760px; margin-top: 10px; padding: 22px 20px; background: var(--c-card); border: 1px solid var(--c-card-line); border-radius: var(--r); box-shadow: var(--sh-card); scroll-margin-top: 20px; }
.rlist .comment-reply-title { display: block; margin-bottom: 8px; font: 600 22px/1.25 var(--f-head); color: var(--c-ink); }
.rlist #respond p { margin: 0 0 14px; }
.rlist #respond label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; }
.rlist #respond input:not([type=submit]):not([type=checkbox]):not([type=radio]), .rlist #respond textarea, .rlist #respond select { box-sizing: border-box; width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--c-line-2); border-radius: var(--r-sm); background: var(--c-field); color: var(--c-ink); font: 400 16px var(--f-text); } /* 16px: an iPhone zooms into smaller fields */
.rlist #respond input:focus, .rlist #respond textarea:focus, .rlist #respond select:focus { border-color: var(--c-blue); outline: none; box-shadow: 0 0 0 3px rgba(62, 143, 207, .25); }
.rlist #respond .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.rlist #respond .comment-form-cookies-consent label { margin: 0; font-weight: 500; }
.rlist #respond .comment-form-cookies-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-blue); }
.rlist #respond .stars { margin: 0; }
.rlist #respond .stars span { display: inline-flex; gap: 2px; }
.rlist #respond .stars a { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; text-indent: -999px; color: var(--c-star-empty); text-decoration: none; }
.rlist #respond .stars a::before { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; font: 26px/1 Arial, sans-serif; }
.rlist #respond .stars:hover a, .rlist #respond .stars.selected a { color: var(--c-star); }
.rlist #respond .stars a:hover ~ a, .rlist #respond .stars.selected a.active ~ a { color: var(--c-star-empty); }
.rlist #respond .stars.selected a.active { color: var(--c-star); }
.rlist #respond .form-submit input[type=submit], .rlist #respond .submit { height: 48px; padding: 0 26px; border: 0; border-radius: var(--r-sm); background: var(--c-blue); color: #FFFFFF; font: 700 13.5px/1 var(--f-text); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.rlist #respond .form-submit input[type=submit]:hover { background: var(--c-blue-dark); }
/* "Complete your shelf" */
.collect { margin-top: 64px; padding-block: 44px 48px; background: var(--c-band); border-top: 1px solid var(--c-line); }
.collect__in { display: grid; gap: 26px; justify-items: center; text-align: center; }
.collect__hd { display: grid; gap: 10px; justify-items: center; }
.collect__hd h2 { max-width: 100%; font-size: clamp(30px, 7vw, 44px); line-height: 1.1; }
.collect__hd h2 .nw { display: inline-block; max-width: 100%; white-space: normal; } /* the show name stays together when it fits, else wraps on its own line(s) */
.collect__hd p { color: var(--c-ink-2); }
.collect__shelf { width: 100%; }
.collect .btn { max-width: 100%; height: auto; min-height: 48px; padding-block: 12px; line-height: 1.3; white-space: normal; text-align: center; } /* "Shop all 2 Are You Afraid of the Dark sets" wraps on narrow phones */
/* phones: the price and Add to Cart at the bottom of the screen once the page's own button has been scrolled past */
.buybar { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--c-card); border-top: 1px solid var(--c-line); box-shadow: 0 -8px 24px -16px rgba(0, 56, 95, .35); transition: transform .25s; }
.buybar.is-hidden { transform: translateY(110%); }
.buybar__price .price { font: 600 22px/1 var(--f-head); color: var(--c-ink); }
.buybar__price del { font-family: var(--f-text); }
.buybar__btn { height: 46px; padding: 0 22px; }
.woocommerce-notices-wrapper:empty { display: none; }
/* WordPress's "wide" blocks (the block cart) stay inside the page width (Bricks widens them by 20% above 1320px) */
.shoppage > .brxe-post-content > .alignwide, .content > .brxe-post-content > .alignwide { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 16px 0 0; padding: 14px 16px; list-style: none; border: 1px solid var(--c-line); border-left: 4px solid var(--c-blue); border-radius: var(--r-sm); background: var(--c-card); color: var(--c-ink); font-size: 14.5px; }
.woocommerce-notices-wrapper .woocommerce-error { border-left-color: #B42318; }
.woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-notices-wrapper .woocommerce-message a.wc-forward { order: 2; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); background: var(--c-blue); color: #FFFFFF; font: 700 13px var(--f-text); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }

/* ---------------------------------------------------------------- tablet */
@media (min-width: 375px) { .shots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) {
  .hd__cartlabel { display: inline; }
  .hd__cart { padding: 0 2px; }
  .hd__cart .tvsco-count { position: static; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 22px; }
  .grid--eight > :nth-child(n+7) { display: none; }
  .guest__wall, .rlist ol.commentlist { columns: 2; }
  .promise__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft__in { grid-template-columns: 2fr 1fr 1fr; }
  .ft__brand { grid-column: auto; }
  .shelf1, .collect__shelf { grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); }
  .blu .shelf1 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body:not(.woocommerce-account) .content > .brxe-post-content { padding: 34px 40px; }
  .content .brxe-post-content fieldset { padding: 18px 20px 16px; }
  .buybar__btn { padding: 0 34px; }
}

@media (min-width: 768px) {
  .spot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .spot__pic { margin-bottom: 22px; }
}

/* ---------------------------------------------------------------- desktop header (FiboSearch shows its field from 992px) */
@media (min-width: 992px) {
  .hd__top { height: 92px; }
  .hd__logo { font-size: 34px; }
  .hd__search .dgwt-wcas-search-wrapp { width: 290px; }
  .hd__nav .bricks-nav-menu { height: 52px; overflow: visible; }
  .hd__nav .bricks-nav-menu > li > .sub-menu { grid-template-columns: minmax(200px, 1fr); left: 50%; transform: translateX(-50%); top: calc(100% + 8px); min-width: 240px; border: 1px solid var(--c-line); border-radius: var(--r); box-shadow: 0 24px 48px -20px rgba(0, 32, 56, .4); }
  .hd__nav .bricks-nav-menu > li > .sub-menu:has(> li:nth-child(10)) { grid-template-columns: repeat(2, minmax(200px, 1fr)); column-gap: 6px; } /* nine shows or more (Cartoons): two columns */
  .hd__nav .bricks-nav-menu > li:first-child > .sub-menu { left: 0; transform: none; } /* opens from its own item's left edge, so it stays on the screen at 992-1199px */
  .hd__nav .bricks-nav-menu > li.menu-item-has-children::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 10px; } /* a mouse crossing the gap to the panel stays on the category */
  .hd__nav .bricks-nav-menu .sub-menu a { min-height: 0; padding: 9px 12px; white-space: nowrap; }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 30px; }
  .grid--eight > :nth-child(n+7) { display: grid; }
  .sc__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .sc__price { margin-bottom: 0; }
  .hero { padding-block: 48px; }
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
  .shelf__row { padding: 0 4%; }
  .shelf__book { --step: 62.5%; width: 28%; margin-left: -10.5%; } /* (28% - 10.5%) / 28% */
  .fav, .blu, .guest, .bestsellers { margin-top: 72px; }
  .spot { margin-top: 80px; padding-block: 64px; }
  .spot__in { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
  .spot__pic { margin-bottom: 0; }
  .guest__wall, .rlist ol.commentlist { columns: 3; column-gap: 18px; }
  .ft__in { grid-template-columns: 2fr 1fr 1.2fr 1.3fr; }
  .ft__secure { grid-column: auto; }
  .pdp__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 18px; }
  .pdp__info { gap: 16px; padding-top: 6px; }
  .pdp__body { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; } /* 380: the Specs card's label and value side by side, each value on one line */
  .shots__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .backcover { position: sticky; top: 24px; }
  .spine { --cover-h: 200px; }
  .shelf1, .collect__shelf { grid-template-columns: repeat(auto-fit, minmax(130px, 168px)); }
  .blu .shelf1 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .buybar { display: none; }
  .empty { padding-block: 64px 8px; }
}
@media (min-width: 1200px) {
  .hd__nav .bricks-nav-menu > li:first-child > .sub-menu { left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1440px) {
  .hd__nav .bricks-nav-menu > li > a, .hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a { font-size: 13.5px; }
}
@media (min-width: 1280px) {
  .blu .shelf1 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .blu .spine { --cover-h: 170px; }
}