/* Tara Content Shop — storefront styles, ported from demo/css/style.css.
   Design tokens and layout values are kept verbatim; every selector is
   scoped under the .tcs- prefix. Base typography/box-sizing resets (which
   in the demo applied to the whole page) are scoped to our own root
   wrappers (.tcs-shop / .tcs-product / .tcs-library / .tcs-ty) instead of
   the page globally, since this stylesheet loads inside a live theme, not
   a standalone demo page. Demo-only chrome (site header/nav, the fake
   checkout page, the demo banner, the site footer) is not ported —
   the real theme provides its own header/nav and the real checkout is
   Square's hosted payment page. */

:root {
  --paper: #faf8f5;
  --ink: #241f1a;
  --body: #55504a;
  --muted: #9a9186;
  --bronze: #a08c6b;
  --bronze-text: #7a6748; /* bronze for small text: readable on white (about 5.4:1) */
  --rule: #e3ddd2;
  --green: #5c6b45;
  --green-bg: #eef3e6;
}

/* ---------- scoped base reset/typography ---------- */
.tcs-shop, .tcs-product, .tcs-library, .tcs-ty {
  color: var(--body);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.tcs-shop *, .tcs-product *, .tcs-library *, .tcs-ty * { box-sizing: border-box; }
.tcs-shop h1, .tcs-shop h2, .tcs-shop h3, .tcs-shop p, .tcs-shop ul,
.tcs-product h1, .tcs-product h2, .tcs-product h3, .tcs-product p, .tcs-product ul,
.tcs-library h1, .tcs-library h2, .tcs-library h3, .tcs-library p, .tcs-library ul,
.tcs-ty h1, .tcs-ty h2, .tcs-ty h3, .tcs-ty p, .tcs-ty ul { margin: 0; padding: 0; }
.tcs-shop a, .tcs-product a, .tcs-library a, .tcs-ty a { color: inherit; text-decoration: none; }
.tcs-shop img, .tcs-product img, .tcs-library img, .tcs-ty img { display: block; max-width: 100%; }

.tcs-serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }

.tcs-label {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronze);
}
.tcs-track-head .tcs-label, .tcs-path-head .tcs-label, .tcs-lib-sec-head .tcs-label {
  white-space: nowrap;
  padding-left: 12px;
}

/* ---------- shop hero ---------- */
.tcs-hero { text-align: center; padding: 68px 24px 46px; }
.tcs-hero .tcs-label { margin-bottom: 16px; display: block; }
.tcs-hero h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 46px;
  color: var(--ink);
  margin-bottom: 14px;
}
.tcs-hero p { max-width: 560px; margin: 0 auto; color: #6f675c; }

/* ---------- track sections ---------- */
.tcs-track { max-width: 1120px; margin: 0 auto; padding: 44px 32px 10px; }
.tcs-track-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 16px;
  margin-bottom: 30px;
}
.tcs-track-head h2 { font-family: Georgia, serif; font-weight: 400; font-size: 28px; color: var(--ink); }
/* A long one-word name (the theme sizes these headings up) wraps rather than
   pushing the label beside it off the screen. */
.tcs-track-head h2, .tcs-path-head h2, .tcs-lib-sec-head h2 { min-width: 0; overflow-wrap: anywhere; }
.tcs-track-sub { font-size: 14px; color: var(--muted); margin: -22px 0 28px; }

.tcs-track-row {
  display: grid;
  /* Three uniform columns is the designed row: 1-3 items fill left to
     right at identical card sizes and never stretch. */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Rows with more than 3 items (server adds the modifier) become a
   horizontal scroller: three full cards plus a 56px peek of the next,
   so it's obvious there's more to see. */
.tcs-track-row--scroll {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc( (100% - (2 * 30px) - 56px) / 3 );
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--bronze) transparent;
  -webkit-overflow-scrolling: touch;
}
.tcs-track-row--scroll > .tcs-pcard { scroll-snap-align: start; }
.tcs-track-row--scroll::-webkit-scrollbar { height: 6px; }
.tcs-track-row--scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.tcs-track-row--scroll::-webkit-scrollbar-thumb:hover { background: var(--bronze); }

/* Uniform card shape: titles reserve two lines so short and long names
   produce identically sized cards. 3.2em = two lines at the 1.6
   line-height these cards inherit. */
.tcs-pcard .tcs-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.2em;
}

.tcs-pcard { position: relative; }
/* The image FRAME is fixed by the container (3:2), not the image: any
   upload shape — square logos, portraits, panoramas — crops to the same
   card. The !importants exist to defeat the inline width/height/aspect
   styles WordPress injects on post thumbnails, which otherwise let odd
   shapes escape the frame. */
.tcs-pcard .tcs-imgwrap { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 2; background: linear-gradient(135deg,#c9c4bc,#e8e5e0); }
.tcs-pcard .tcs-imgwrap::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.tcs-pcard .tcs-imgwrap img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .4s ease; }
.tcs-pcard img { width: 100%; object-fit: cover; }
.tcs-pcard a:hover img { transform: scale(1.03); }
.tcs-pcard .tcs-num { font-family: Georgia, serif; font-size: 14px; color: var(--bronze); margin: 16px 0 5px; }
.tcs-pcard .tcs-name { font-family: Georgia, serif; font-size: 20px; color: var(--ink); margin-bottom: 7px; }
/* Product type: an outlined chip with a small icon, above the title (cards
   and the product page alike; built by TCS_Render::type_chip()). */
.tcs-type-chip {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content; max-width: 100%;
  border: 1px solid #cfc6b8; border-radius: 999px;
  padding: 4px 12px 4px 9px;
  color: var(--ink); text-transform: uppercase; line-height: 1.4;
}
.tcs-type-icon { display: inline-flex; flex: none; }
.tcs-type-icon svg { width: 14px; height: 14px; display: block; }
.tcs-pcard .tcs-type { font-size: 10.5px; letter-spacing: .16em; margin: 2px 0 10px; }
/* Library cards have no "No. N" line, so the chip needs its own gap below
   the photo. */
.tcs-library .tcs-pcard .tcs-type { margin-top: 14px; }
/* Phones: tighter spacing keeps "Gift Voucher · $100" on one line in a
   two-column card (it still wraps rather than truncate if it must). */
@media (max-width: 640px) {
  .tcs-pcard .tcs-type { letter-spacing: .1em; padding: 3px 9px 3px 7px; gap: 5px; }
}
.tcs-pcard .tcs-price { font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.tcs-pcard .tcs-price .tcs-free { color: var(--green); letter-spacing: .08em; }
.tcs-pcard .tcs-price .tcs-soon { color: var(--bronze-text); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

.tcs-tag {
  position: absolute;
  top: 12px;
  font-size: 9.5px;
  letter-spacing: .15em;
  padding: 5px 10px;
  border-radius: 2px;
}
.tcs-tag.tcs-tag-free { left: 12px; background: rgba(250,248,245,.94); color: var(--green); }
.tcs-tag.tcs-tag-owned { right: 12px; background: rgba(36,31,26,.85); color: #f5f1e9; }
.tcs-tag.tcs-tag-next { left: 12px; background: var(--bronze); color: var(--paper); }
/* Coming soon: the photo is veiled (greyed and dimmed) and the label runs
   across its middle between two hairlines. Cards, library cards, the
   product page gallery and its path-strip thumbnails. */
.tcs-pcard--soon .tcs-imgwrap img,
.tcs-car--soon img,
.tcs-path-mini--soon img { filter: grayscale(.6) brightness(.68); }
/* No photo yet: the placeholder behind the missing image is veiled too,
   so the white label still reads. */
.tcs-pcard--soon .tcs-imgwrap { background: linear-gradient(135deg, #6f6c67, #8a8782); }
.tcs-tag.tcs-tag-soon {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
  background: none; color: #fff; border-radius: 0;
  font-family: Georgia, 'Times New Roman', serif; font-size: 15px; letter-spacing: .32em; white-space: nowrap;
  padding: 9px 2px 9px 6px;
  border-top: 1px solid rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.8);
  /* A soft shadow just behind the letters keeps them readable on a light
     photo without a visible box. */
  background: radial-gradient(closest-side, rgba(20,16,12,.42), rgba(20,16,12,0));
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.35);
}
.tcs-car-stage .tcs-tag.tcs-tag-soon { font-size: 20px; padding: 12px 4px 12px 10px; }
/* Phones: two-column cards are about 160px wide, and a gallery's arrows sit
   at the stage's sides, so the label shrinks to stay clear of both. */
@media (max-width: 640px) {
  .tcs-pcard .tcs-tag.tcs-tag-soon { font-size: 12px; letter-spacing: .24em; padding: 7px 2px 7px 5px; }
  .tcs-car-stage .tcs-tag.tcs-tag-soon { font-size: 15px; letter-spacing: .24em; padding: 9px 2px 9px 6px; }
}
.tcs-play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.tcs-play-badge span {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(250,248,245,.92); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: 0 2px 12px rgba(0,0,0,.22);
}

/* Gated video embeds (product-page owned state + library "Now Watching"):
   the provider emits a bare iframe with no dimensions, which browsers
   default to 300x150 — size the frame responsively at 16:9. */
.tcs-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
}
.tcs-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Now Watching" section atop the library. */
.tcs-lib-watch {
  margin: 0 0 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.tcs-lib-watch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 860px;
}
.tcs-lib-watch-close,
a.tcs-lib-watch-close,
a.tcs-lib-watch-close:visited,
a.tcs-lib-watch-close:hover {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b6255 !important; /* theme anchor rules — same defense as a.tcs-btn */
  text-decoration: none !important;
  white-space: nowrap;
}
a.tcs-lib-watch-close:hover { color: var(--ink) !important; }
.tcs-lib-watch h2 {
  font-size: 28px;
  margin: 6px 0 18px;
}
.tcs-lib-watch .tcs-video { max-width: 860px; }
.tcs-lib-watch-more { margin-top: 14px; }

/* Pop-up player (tcs-cart.js): a native <dialog> filled with the gated
   embed on demand. With the script running, the in-page Now Watching
   section above is adopted into it, so the page never scrolls to a player. */
dialog.tcs-player {
  width: min(960px, 94vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #15120f;
  color: #f5f1e9;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
dialog.tcs-player::backdrop { background: rgba(20,16,12,.82); }
body.tcs-player-open { overflow: hidden; }
.tcs-player-box { padding: 18px 22px 22px; }
.tcs-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.tcs-player-title {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 !important;
  color: #f5f1e9 !important;
}
.tcs-player-close {
  flex: none;
  background: none;
  border: 0;
  color: rgba(245,241,233,.7);
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}
.tcs-player-close:hover { color: #fff; }
.tcs-player-body .tcs-video { border-radius: 2px; }
.tcs-player-more { margin: 14px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.tcs-player-more a, .tcs-player-more a:visited { color: rgba(245,241,233,.7) !important; text-decoration: none !important; }
.tcs-player-more a:hover { color: #fff !important; }
a[data-tcs-watch].tcs-loading { opacity: .5; cursor: progress; }
@media (max-width: 640px) {
  .tcs-player-box { padding: 14px 14px 16px; }
  .tcs-player-title { font-size: 18px; }
}

/* buttons + text links */
.tcs-btn {
  display: inline-block;
  background: var(--ink);
  color: #f5f1e9;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.tcs-btn:hover { background: #3a332c; }
/* Anchor buttons (thank-you "Open My Library", library row actions):
   theme link rules (ProPhoto styles anchors with heavier selectors) win
   over a bare single-class color and render the label dark-on-dark.
   Same defense as the card-image fix: our buttons are self-contained
   components, so !important is the contract. Harmless for <button>s. */
a.tcs-btn,
a.tcs-btn:link,
a.tcs-btn:visited,
a.tcs-btn:hover,
a.tcs-btn:active,
a.tcs-btn:focus {
  color: #f5f1e9 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.tcs-btn.tcs-btn-small { padding: 9px 16px; font-size: 10.5px; }
.tcs-btn.tcs-btn-bronze { background: var(--bronze); color: var(--paper); }
a.tcs-btn.tcs-btn-bronze,
a.tcs-btn.tcs-btn-bronze:link,
a.tcs-btn.tcs-btn-bronze:visited,
a.tcs-btn.tcs-btn-bronze:hover { color: var(--paper) !important; }
/* Library row for a coming soon item: an outline, so it never reads as a
   buy button. */
.tcs-btn.tcs-btn-soon { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--bronze-text); }
a.tcs-btn.tcs-btn-soon,
a.tcs-btn.tcs-btn-soon:link,
a.tcs-btn.tcs-btn-soon:visited,
a.tcs-btn.tcs-btn-soon:hover { color: var(--bronze-text) !important; }
/* Already-in-cart state for .tcs-add buttons (shop-card tcs-textlink size
   and product-page tcs-btn size both match this selector): re-skinned to
   read as "satisfied" rather than actionable, but the click still opens
   the drawer (tcs-cart.js), so cursor stays pointer. */
.tcs-add.tcs-in-cart {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--bronze);
  cursor: pointer;
}
.tcs-add.tcs-in-cart:hover { background: transparent; }

.tcs-textlink {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 3px;
  cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}

/* ---------- product page ---------- */
.tcs-crumb { max-width: 1120px; margin: 0 auto; padding: 28px 32px 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); }
/* Breadcrumb and the foot-of-page "Back to the Studio Shop": quiet bronze
   links (theme link rules outrank ours, hence !important), with enough
   height to tap on a phone. */
.tcs-pd-back { max-width: 1120px; margin: 0 auto; padding: 0 32px 48px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.tcs-crumb a, .tcs-pd-back a { display: inline-block; padding: 6px 0; color: var(--bronze-text) !important; text-decoration: none !important; border-bottom: none !important; }
.tcs-crumb a:hover, .tcs-pd-back a:hover { color: var(--ink) !important; }
.tcs-crumb-sep { color: var(--muted); }
.tcs-product-main {
  max-width: 1120px; margin: 0 auto;
  /* minmax(0, …): a column never grows to fit its content's min width (a
     long uppercase theme title would otherwise push the page off-screen). */
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 52px;
  padding: 26px 32px 52px;
}
@media (max-width: 860px) { .tcs-product-main { grid-template-columns: minmax(0, 1fr); } }
/* The theme's content column can be far narrower than the window (about 60%
   of it on the live site), so whether the gallery and details sit side by
   side is decided by the product page's own width, not the window's (the
   media query above is the fallback for browsers without container
   queries). In the side-by-side range the theme's 40px uppercase title is
   scaled to the page so its longest word fits the details column. */
.tcs-product { container-type: inline-size; }
.tcs-product .tcs-pd h1 { overflow-wrap: break-word; }
@container (max-width: 759px) { .tcs-product-main { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 760px) { .tcs-product .tcs-pd h1 { font-size: clamp(30px, calc(5.3cqi - 7px), 40px) !important; } }

.tcs-car-stage { position: relative; overflow: hidden; border-radius: 2px; }
/* 3:2 like the cards, so one featured image looks the same everywhere. */
.tcs-car-stage img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: linear-gradient(135deg,#c9c4bc,#e8e5e0); }
.tcs-car-stage::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; }
.tcs-car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(250,248,245,.92); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 2px 12px rgba(0,0,0,.18);
  cursor: pointer; border: none; z-index: 2;
}
.tcs-car-prev { left: 14px; } .tcs-car-next { right: 14px; }
.tcs-car-count {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(36,31,26,.75); color: #f5f1e9;
  font-size: 10.5px; letter-spacing: .12em; padding: 5px 12px; border-radius: 2px;
}
.tcs-car-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.tcs-car-thumb { border-radius: 2px; overflow: hidden; opacity: .55; cursor: pointer; border: none; padding: 0; background: none; }
.tcs-car-thumb.on { opacity: 1; box-shadow: 0 0 0 1px var(--bronze); }
.tcs-car-thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Product band: tighter than the shop hero — it is context, not the headline. */
.tcs-band .tcs-hero-product { padding: 40px 24px 32px; }
.tcs-hero-product h1 { font-size: 30px; }
.tcs-band .tcs-hero-product p { margin-top: 6px; }
.tcs-pd h1 { font-family: Georgia, serif; font-weight: 400; font-size: 38px; color: var(--ink); margin-bottom: 20px; }
.tcs-pd-type { font-size: 11px; letter-spacing: .16em; margin-bottom: 14px; }
.tcs-pd-desc { font-size: 15.5px; line-height: 1.75; margin-bottom: 8px; }

/* Included files: listed on the product page (locked until it's theirs) and
   linked under owned library cards and voucher cards. */
.tcs-pd-files { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0 12px; margin: 22px 0 26px; }
.tcs-files { border-top: 1px solid #e9e2d6; margin-top: 14px; padding-top: 10px; }
.tcs-files-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; }
.tcs-file { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; color: var(--ink); line-height: 1.4; }
.tcs-files .tcs-file { font-size: 13px; padding: 4px 0; }
.tcs-file svg { flex: none; width: 18px; height: 18px; color: var(--bronze); }
.tcs-file-name { min-width: 0; overflow-wrap: anywhere; }
.tcs-file-type { flex: none; font-size: 12px; color: var(--muted); }
.tcs-file-end { margin-left: auto; display: inline-flex; }
.tcs-file-end svg { color: #c9c4bc; width: 16px; height: 16px; }
/* Theme link rules must not restyle the download rows. */
.tcs-product a.tcs-file, .tcs-library a.tcs-file,
.tcs-product a.tcs-file:hover, .tcs-library a.tcs-file:hover { color: var(--ink) !important; text-decoration: none !important; border-bottom: none !important; }
a.tcs-file .tcs-file-name { text-decoration: underline; text-underline-offset: 3px; }
a.tcs-file:hover .tcs-file-end svg { color: var(--ink); }
.tcs-pd-files-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
/* Read by screen readers, invisible on screen (the cart drawer's live region). */
.tcs-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Voucher terms (session and gift vouchers): product page (before buying) and library card. */
.tcs-pd-terms { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0; margin: 22px 0 26px; font-size: 13.5px; color: #6f675c; line-height: 1.6; }
.tcs-pd-terms-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.tcs-vch-terms { font-size: 12.5px; color: #6f675c; line-height: 1.5; margin: 4px 0 8px; }
.tcs-pd-buy { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.tcs-pd-price { font-family: Georgia, serif; font-size: 30px; color: var(--ink); }
.tcs-pd-price .tcs-free { color: var(--green); font-size: 22px; letter-spacing: .06em; }
.tcs-pd-price .tcs-soon { color: var(--bronze-text); font-size: 22px; letter-spacing: .06em; }
.tcs-pd-note { font-size: 12px; color: var(--muted); margin-top: 16px; }

/* Quantity stepper (gift vouchers), between the price and Add to Cart: a
   small label, then − / number / + in one outlined box as tall as the
   button. The theme styles bare inputs and buttons, hence the resets. */
.tcs-qty { display: flex; align-items: center; gap: 12px; }
.tcs-qty-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-text); margin: 0; }
.tcs-qty-box { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid #c9c4bc; border-radius: 2px; background: var(--paper); }
.tcs-product .tcs-qty-btn {
  width: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: inherit; font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer;
}
.tcs-product .tcs-qty-btn:hover { background: #f1ece3; }
.tcs-product .tcs-qty-btn[aria-disabled="true"] { color: #c9c4bc; background: none; cursor: default; }
.tcs-product .tcs-qty-input {
  width: 46px; height: auto; margin: 0; padding: 0; border: 0; border-left: 1px solid #e3ddd2; border-right: 1px solid #e3ddd2; border-radius: 0;
  background: transparent; box-shadow: none; font-family: Georgia, serif; font-size: 16px; color: var(--ink); text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.tcs-product .tcs-qty-input::-webkit-outer-spin-button,
.tcs-product .tcs-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tcs-product .tcs-qty-input:focus { outline: 2px solid var(--bronze); outline-offset: -2px; }

/* free-product claim form: a labeled block under the FREE price line.
   flex-basis 100% forces it onto its own row inside the .tcs-pd-buy
   flex container so it never crams inline next to the price. */
.tcs-claim { flex-basis: 100%; margin-top: 18px; max-width: 460px; }
.tcs-claim-copy { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
/* Post-claim confirmation (tcs-cart.js swaps the form for this). */
.tcs-claim-done { flex-basis: 100%; margin-top: 18px; max-width: 460px; }
.tcs-claim-done .tcs-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--green-bg); color: var(--green); font-size: 20px; display: flex; align-items: center; justify-content: center; margin: 0 0 12px; }
.tcs-claim-done-title { font-family: Georgia, serif; font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.tcs-claim-done p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.tcs-claim-done-small { font-size: 12px; color: var(--muted); }
.tcs-claim-done button.tcs-textlink { display: inline; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: underline; cursor: pointer; }
.tcs-claim-row, .tcs-login-row { display: flex; gap: 10px; }
.tcs-claim-row input[type="email"], .tcs-login-row input[type="email"] {
  flex: 1;
  min-width: 200px;
  border: 1px solid #c9c4bc;
  background: var(--paper);
  border-radius: 2px;
  padding: 12px 14px; /* row's default stretch keeps it level with the button */
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.tcs-claim-row input[type="email"]:focus, .tcs-login-row input[type="email"]:focus { outline: none; border-color: var(--bronze); }
.tcs-claim-row .tcs-btn, .tcs-login-row .tcs-btn { white-space: nowrap; }
@media (max-width: 480px) {
  .tcs-claim-row, .tcs-login-row { flex-wrap: wrap; }
  .tcs-claim-row .tcs-btn, .tcs-login-row .tcs-btn { width: 100%; text-align: center; }
}

/* anonymous library: centered sign-in card in the editorial language */
.tcs-login-card { max-width: 560px; margin: 48px auto 64px; text-align: center; }
.tcs-login-card .tcs-label { display: block; margin-bottom: 14px; }
.tcs-login-card h1 { font-family: Georgia, serif; font-weight: 400; font-size: 32px; color: var(--ink); margin: 0 0 10px; }
.tcs-login-copy { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.tcs-login-row { text-align: left; }
.tcs-login-notice { font-size: 13px; margin-top: 12px; }

/* ?tcs= notices: quiet editorial banners, not bare text */
.tcs-notice {
  font-size: 13.5px;
  border-radius: 2px;
  padding: 12px 16px;
  margin: 0 0 26px;
  background: var(--green-bg);
  color: var(--green);
  border-left: 3px solid var(--green);
  text-align: left;
}
.tcs-notice-error { background: #f7efe4; color: #8a6a1f; border-left-color: var(--bronze); }

/* The library's ?tcs= banner as a toast: tcs-cart.js lifts .tcs-notice
   into this fixed strip at the foot of the viewport (on the body, outside
   the .tcs-library scope, so the type is set again here). It keeps the
   notice's own colours; the script closes it after a few seconds. Above
   the cart drawer (z-index 41) but under the pop-up player (a <dialog>). */
.tcs-toast-wrap { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.tcs-toast-wrap .tcs-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box; max-width: 560px; margin: 0;
  padding: 11px 8px 11px 16px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 13.5px; line-height: 1.5;
  box-shadow: 0 8px 28px rgba(36, 31, 26, .18);
  animation: tcs-toast-in .35s ease-out;
  transition: opacity .3s ease, transform .3s ease;
}
.tcs-toast-close {
  flex: none; background: none; border: 0; padding: 0 8px; margin: 0;
  font: 20px/1 Georgia, serif; color: inherit; opacity: .65; cursor: pointer;
}
.tcs-toast-close:hover, .tcs-toast-close:focus-visible { opacity: 1; }
.tcs-toast-wrap.tcs-toast-out .tcs-toast { opacity: 0; transform: translateY(8px); }
@keyframes tcs-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tcs-toast-wrap .tcs-toast { animation: none; transition: none; } }

.tcs-path-strip { border-top: 1px solid var(--rule); max-width: 1120px; margin: 0 auto; padding: 34px 32px 54px; }
.tcs-path-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.tcs-path-head h2 { font-family: Georgia, serif; font-weight: 400; font-size: 23px; color: var(--ink); }
.tcs-path-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px; } /* auto-fill: see .tcs-track-row */
.tcs-path-mini { font-size: 12px; color: #6f675c; }
.tcs-path-mini img { width: 100% !important; height: 96px !important; object-fit: cover; border-radius: 2px; margin-bottom: 9px; }
.tcs-path-mini .tcs-t { font-family: Georgia, serif; font-size: 15px; color: var(--ink); }
.tcs-path-mini .tcs-t.cur { color: var(--bronze); }
.tcs-path-mini.dim { opacity: .55; }

/* ---------- library ---------- */
.tcs-lib-head { text-align: center; padding: 58px 24px 8px; }
.tcs-lib-head h1 { font-family: Georgia, serif; font-weight: 400; font-size: 40px; color: var(--ink); margin: 14px 0 10px; }
.tcs-lib-head p { font-size: 14px; color: var(--muted); }
.tcs-lib-sec { max-width: 1120px; margin: 0 auto; padding: 42px 32px 0; }
.tcs-lib-sec-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 26px; }
.tcs-lib-sec-head h2 { font-family: Georgia, serif; font-weight: 400; font-size: 26px; color: var(--ink); }
.tcs-lib-bar { height: 2px; background: var(--rule); margin: -16px 0 28px; position: relative; }
.tcs-lib-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bronze); }

.tcs-vouchers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; padding-bottom: 20px; }
.tcs-vch-card { border: 1px solid var(--rule); background: #fff; border-radius: 2px; padding: 24px 26px; position: relative; }
.tcs-vch-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bronze); }
.tcs-vch-kind { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 8px; }
.tcs-vch-name { font-family: Georgia, serif; font-size: 20px; color: var(--ink); margin-bottom: 12px; }
.tcs-vch-code { font-family: Consolas, monospace; font-size: 15px; letter-spacing: .14em; background: var(--paper); border: 1px dashed #c9c4bc; padding: 9px 14px; display: inline-block; margin-bottom: 12px; }
.tcs-vch-meta { font-size: 12.5px; color: #6f675c; }
.tcs-vch-status { display: inline-block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; background: var(--green-bg); color: var(--green); margin-left: 10px; }
.tcs-vch-status.used { background: #efeae2; color: var(--muted); }

/* ---------- cart drawer ---------- */
/* The drawer is injected by tcs-cart.js as a direct child of <body>, so it
   sits OUTSIDE the scoped resets above and needs its own box-sizing (the
   demo got this from its global `*` reset): without it the 380px drawer
   renders content-box (380px + 56px padding) and the 640px `width:100vw`
   rule overflows by its padding on phones. Likewise the demo's global
   `html, body { overflow-x: hidden; }` guarded against the translateX(105%)
   off-screen drawer; scope that guard to pages where our drawer exists. */
.tcs-drawer, .tcs-drawer *, .tcs-drawer *::before, .tcs-drawer *::after { box-sizing: border-box; }
body:has(.tcs-drawer) { overflow-x: clip; }
.tcs-drawer-scrim {
  position: fixed; inset: 0; background: rgba(36,31,26,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 40;
}
.tcs-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--paper); box-shadow: -12px 0 34px rgba(0,0,0,.22);
  padding: 30px 28px; display: flex; flex-direction: column;
  transform: translateX(105%); visibility: hidden;
  transition: transform .28s ease, visibility 0s .28s; z-index: 41;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--body); font-size: 16px; line-height: 1.6;
}
body.tcs-drawer-open .tcs-drawer { transform: translateX(0); visibility: visible; transition: transform .28s ease; }
body.tcs-drawer-open .tcs-drawer-scrim { opacity: 1; pointer-events: auto; }
.tcs-drawer h3 { font-family: Georgia, serif; font-weight: 400; font-size: 24px; color: var(--ink); margin: 0; }
.tcs-drawer .tcs-sub { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin: 5px 0 20px; }
.tcs-drawer-close { position: absolute; top: 22px; right: 24px; background: none; border: none; font-size: 18px; color: var(--muted); cursor: pointer; }
.tcs-d-items { flex: 1; overflow-y: auto; }
.tcs-d-item { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid #e9e2d6; align-items: center; }
.tcs-d-item img { width: 62px; height: 46px; object-fit: cover; border-radius: 2px; }
.tcs-d-item .tcs-t { font-family: Georgia, serif; font-size: 14.5px; color: var(--ink); }
.tcs-d-item .tcs-m { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tcs-d-item .tcs-pr { margin-left: auto; font-size: 14px; color: var(--ink); white-space: nowrap; }
.tcs-d-item .tcs-x { color: #c9c4bc; font-size: 13px; margin-left: 10px; cursor: pointer; background: none; border: none; }
.tcs-d-item .tcs-x:hover { color: var(--ink); }
.tcs-d-item .tcs-d-info { min-width: 0; }
.tcs-d-item .tcs-pr-each { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* A line that comes in quantity (gift vouchers): − count + under its name. */
.tcs-d-qty { display: inline-flex; align-items: center; margin-top: 7px; border: 1px solid var(--rule); border-radius: 2px; }
.tcs-drawer .tcs-d-qty-btn {
  width: 32px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: inherit; font-size: 16px; line-height: 1; color: var(--ink); cursor: pointer;
}
.tcs-drawer .tcs-d-qty-btn:hover { background: #f1ece3; }
.tcs-drawer .tcs-d-qty-btn[aria-disabled="true"] { color: #c9c4bc; background: none; cursor: default; }
.tcs-d-qty-n { min-width: 26px; text-align: center; font-size: 13.5px; color: var(--ink); }
@media (forced-colors: active) {
  .tcs-product .tcs-qty-btn[aria-disabled="true"],
  .tcs-drawer .tcs-d-qty-btn[aria-disabled="true"] { color: GrayText; }
}
.tcs-d-empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 40px 0; }
.tcs-d-notice { font-size: 12.5px; color: var(--ink); background: var(--green-bg); border-radius: 2px; padding: 10px 12px; margin-bottom: 12px; }
.tcs-d-notice.tcs-d-notice-error { background: #f7e9e4; color: #7a3b28; }
.tcs-d-tot { display: flex; justify-content: space-between; padding: 16px 0 6px; font-size: 15px; color: var(--ink); }
/* Sales tax and the total under the subtotal (tcs-cart.js shows them only when something is taxed). */
.tcs-d-tot.tcs-d-taxline { padding: 2px 0 6px; font-size: 14px; color: var(--body); }
.tcs-d-tot.tcs-d-grand { padding: 8px 0 6px; margin-bottom: 14px; border-top: 1px solid var(--rule); font-family: Georgia, serif; font-size: 16px; }
.tcs-d-btn { width: 100%; text-align: center; }
.tcs-d-provider { text-align: center; font-size: 10.5px; color: var(--muted); margin-top: 10px; }

/* Guest email step: required before Checkout unlocks (Square's own email
   field is optional, so the cart is where the address is guaranteed). */
.tcs-d-email { margin: 12px 0 4px; }
.tcs-d-email label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.tcs-d-email input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c9c4bc;
  background: var(--paper);
  border-radius: 2px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.tcs-d-email input[type="email"]:focus { outline: none; border-color: var(--bronze); }
.tcs-d-email-note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tcs-d-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tcs-d-cont { text-align: center; margin-top: 16px; }

/* ---------- thank you ---------- */
.tcs-ty { max-width: 640px; margin: 0 auto; text-align: center; padding: 56px 24px 80px; }
.tcs-ty .tcs-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); color: var(--green); font-size: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; }
.tcs-ty h1 { font-family: Georgia, serif; font-weight: 400; font-size: 38px; color: var(--ink); margin-bottom: 14px; }
.tcs-ty p { margin-bottom: 10px; }
.tcs-ty .tcs-box { border: 1px solid var(--rule); background: #fff; border-radius: 2px; text-align: left; padding: 22px 26px; margin: 30px 0; font-size: 14px; }
.tcs-ty .tcs-box .tcs-t { font-family: Georgia, serif; color: var(--ink); font-size: 16px; }
.tcs-ty .tcs-box .tcs-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #efe9df; }
.tcs-ty .tcs-box .tcs-row:last-child { border-bottom: none; }
.tcs-ty .tcs-box .tcs-row { align-items: center; }
.tcs-ty-item { display: flex; align-items: center; gap: 14px; }
.tcs-ty .tcs-box img.tcs-ty-thumb, .tcs-ty-thumb-empty { width: 72px; height: 48px; object-fit: cover; border-radius: 2px; flex: none; background: linear-gradient(135deg,#c9c4bc,#e8e5e0); display: block; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .tcs-hero { padding: 44px 20px 30px; }
  .tcs-hero h1 { font-size: 30px; }
  .tcs-hero p { font-size: 14.5px; }

  .tcs-track { padding: 32px 20px 6px; }
  .tcs-track-head h2 { font-size: 22px; }
  /* Every collection row swipes sideways on a phone: one large card plus a
     peek of the next, so there's always a clear "more this way". The row
     bleeds to the screen edges (negative margins) so cards slide in from
     the edge, and snaps card by card. A lone card fills the row. */
  .tcs-track-row,
  .tcs-track-row--scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px 12px;
    scrollbar-width: none;
  }
  .tcs-track-row::-webkit-scrollbar { display: none; }
  .tcs-track-row > .tcs-pcard { scroll-snap-align: start; }
  .tcs-track-row:has(> .tcs-pcard:only-child) { grid-auto-columns: 100%; }
  .tcs-pcard .tcs-name { font-size: 17px; }
  .tcs-pcard .tcs-num { margin-top: 10px; }
  .tcs-btn.tcs-btn-small { padding: 8px 12px; font-size: 9.5px; letter-spacing: .14em; }

  .tcs-crumb { padding: 20px 20px 0; }
  .tcs-pd-back { padding: 0 20px 40px; }
  .tcs-product-main { padding: 20px 20px 36px; gap: 28px; }
  .tcs-car-arrow { width: 38px; height: 38px; }
  .tcs-car-thumbs { gap: 8px; margin-top: 10px; }
  /* The theme's post-title rule outranks ours and is sized for desktop
     (40px uppercase, 4px tracking): too big for a phone column. */
  .tcs-product .tcs-pd h1 { font-size: 28px !important; letter-spacing: .06em !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  /* The theme's heading rule sizes the band titles too (the collection name
     on a product page, the shop and library headings): 40px uppercase with
     wide tracking, where one long word ran past the screen edge. */
  .tcs-band h1 { font-size: 28px !important; letter-spacing: .06em !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  /* Pieces with no side padding of their own keep a gutter now that the
     page spans the screen. */
  .tcs-shop > .tcs-notice, .tcs-product > .tcs-notice, .tcs-library > .tcs-notice { margin-left: 20px; margin-right: 20px; }
  .tcs-lib-watch { padding-left: 20px; padding-right: 20px; }
  /* The theme indents each list item 3em (a desktop measure); on a phone the
     description keeps a normal bullet indent instead. */
  .tcs-product .tcs-pd-desc ul, .tcs-product .tcs-pd-desc ol { margin-left: 0 !important; padding-left: 1.3em !important; }
  .tcs-product .tcs-pd-desc li { margin-left: 0 !important; }
  .tcs-pd-price { font-size: 24px; }
  .tcs-pd-buy { gap: 18px; }
  .tcs-btn { padding: 13px 22px; }
  .tcs-path-strip { padding: 26px 20px 40px; }
  /* The product page's "Your path through" steps swipe too, two at a time. */
  .tcs-path-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px 12px;
    scrollbar-width: none;
  }
  .tcs-path-row::-webkit-scrollbar { display: none; }
  .tcs-path-row > * { scroll-snap-align: start; }

  .tcs-lib-head { padding: 40px 20px 4px; }
  .tcs-lib-head h1 { font-size: 28px; }
  .tcs-lib-sec { padding: 32px 20px 0; }
  .tcs-lib-sec-head h2 { font-size: 21px; }
  .tcs-vouchers { grid-template-columns: 1fr; }

  .tcs-drawer { width: 100vw; max-width: 100vw; padding: 26px 20px; }

  .tcs-ty { padding: 60px 20px 56px; }
  .tcs-ty h1 { font-size: 28px; }
}

/* ---------- phones: use the whole screen ----------
   On a phone the theme's content column is narrow: ProPhoto pads the post
   block 11.8% plus 29.5px on each side, leaving about 61% of the screen,
   which shrank product cards to thumbnails and let a long title push the
   product page off the right edge. Like the band, the shop's own page
   wrappers break out to the full viewport (--tcs-vw: the width without a
   scrollbar, set by tcs-cart.js) and pad themselves. */
@media (max-width: 640px) {
  .tcs-shop, .tcs-product, .tcs-library, .tcs-ty {
    box-sizing: border-box; /* .tcs-ty's own side padding stays inside the width */
    width: var(--tcs-vw, 100vw);
    max-width: none;
    margin-left: calc(50% - var(--tcs-vw, 100vw) / 2);
    margin-right: calc(50% - var(--tcs-vw, 100vw) / 2);
  }
}

.tcs-track-desc { max-width: 680px; margin: -4px 0 18px; color: var(--muted); }
.tcs-track-desc p { margin: 0 0 8px; }

.tcs-claim-disclosure,
.tcs-d-disclosure { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.tcs-d-disclosure { margin: 0 0 10px; }

/* ---------- shop bar: the plugin's own nav across shop-owned pages ---------- */
.tcs-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 28px; padding: 14px 24px; border-bottom: 1px solid #e3ddd2; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.tcs-bar a { color: var(--muted); text-decoration: none; }
.tcs-bar a:hover, .tcs-bar .tcs-bar-current { color: var(--ink); }
.tcs-bar .tcs-bar-current { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.tcs-bar .tcs-bar-cart { color: var(--ink); }
.tcs-bar .tcs-bar-signout { font-size: 10px; opacity: .8; }

/* ---------- header band: bar + hero/library heading over image or gradient ---------- */
.tcs-band { position: relative; color: #fff; background-color: var(--ink); background-size: cover; background-position: center 40%; }
.tcs-band-gradient { background-image: linear-gradient(160deg, #cfc2ad 0%, var(--bronze) 48%, #4e4234 100%); }
.tcs-band-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,.55) 0%, rgba(20,16,12,.15) 40%, rgba(20,16,12,.6) 100%); }
.tcs-band > * { position: relative; }
.tcs-band .tcs-bar { border-bottom: 1px solid rgba(255,255,255,.22); padding: 12px 24px; }
.tcs-band .tcs-bar a, .tcs-band .tcs-bar .tcs-bar-cart { color: rgba(255,255,255,.85); }
.tcs-band .tcs-bar a:hover, .tcs-band .tcs-bar .tcs-bar-current { color: #fff; border-color: #fff; }
.tcs-band-inner { max-width: 1120px; margin: 0 auto; }
.tcs-band .tcs-hero { padding: 72px 24px 56px; }
.tcs-band .tcs-hero .tcs-label, .tcs-band .tcs-lib-head .tcs-label { color: rgba(255,255,255,.8); }
.tcs-band .tcs-hero h1, .tcs-band .tcs-lib-head h1 { color: #fff; }
.tcs-band .tcs-hero p, .tcs-band .tcs-lib-head p { color: rgba(255,255,255,.85); }
.tcs-band .tcs-lib-head { padding: 56px 24px 40px; }
.tcs-band .tcs-lib-head p a { color: #fff; }
.tcs-band .tcs-login-card { margin: 0 auto; padding: 48px 24px 64px; } /* padding, not margin: a margin would collapse out of the band */
/* First content row sits close under the band. */
.tcs-band + .tcs-track { padding-top: 28px; }
.tcs-band + .tcs-notice, .tcs-library .tcs-band + section { margin-top: 28px; }
@media (max-width: 640px) { .tcs-band .tcs-hero { padding: 48px 20px 40px; } .tcs-band .tcs-bar { gap: 6px 18px; } }
.tcs-band .tcs-login-card .tcs-label, .tcs-band .tcs-login-copy { color: rgba(255,255,255,.85); }
.tcs-band .tcs-login-card h1 { color: #fff; }

/* ---------- band: full-bleed + theme-proof ----------
   The band breaks out of the theme's content column to the full viewport.
   --tcs-vw is the viewport width WITHOUT the scrollbar, set by tcs-cart.js
   (100vw includes it and would add a sideways scroll); 100vw is only the
   fallback before the script runs. The !important colours/fonts are
   deliberate: the band must stay legible over a photo whatever the theme's
   own heading and link rules say (ProPhoto's beat ours on specificity). */
.tcs-band { width: var(--tcs-vw, 100vw); margin-left: calc(50% - var(--tcs-vw, 100vw) / 2); margin-right: calc(50% - var(--tcs-vw, 100vw) / 2); }
.tcs-band .tcs-hero h1, .tcs-band .tcs-lib-head h1, .tcs-band .tcs-login-card h1 { color: #fff !important; }
.tcs-band .tcs-hero .tcs-label, .tcs-band .tcs-lib-head .tcs-label, .tcs-band .tcs-login-card .tcs-label,
.tcs-band .tcs-hero p, .tcs-band .tcs-lib-head p, .tcs-band .tcs-login-copy { color: rgba(255,255,255,.85) !important; }
nav.tcs-bar a { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important; font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase !important; text-decoration: none !important; }
nav.tcs-bar a { color: var(--muted) !important; }
nav.tcs-bar a:hover, nav.tcs-bar .tcs-bar-current, nav.tcs-bar .tcs-bar-cart { color: var(--ink) !important; }
.tcs-band nav.tcs-bar a { color: rgba(255,255,255,.85) !important; }
.tcs-band nav.tcs-bar a:hover, .tcs-band nav.tcs-bar .tcs-bar-current, .tcs-band nav.tcs-bar .tcs-bar-cart { color: #fff !important; }
/* ProPhoto prints the page title in .article-title-wrap with a rule under
   it; with the title hidden (TCS_Title_Hider) only the rule was left. */
.article-title-wrap:has(.article-title:empty) { display: none; }
/* On product pages the panel is the header: hide ProPhoto's article header
   (date + title) and its « prev / next » post links. TCS_Title_Hider sets
   the body class on products and the three shop pages while "hide the
   theme's page title" is on. */
body.tcs-own-header .article-header,
body.tcs-own-header .pp-post-navigation { display: none !important; }