/* ==========================================================================
   Triumph VIP — subsite 122
   Tokens lifted from the approved "Triumph Shop V2" design.
   Parent cs4store base/master/layout + Poppins are dequeued in functions.php,
   so this file is the whole skin.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {--tv-bg: #000; --tv-panel: #0B0B0B; --tv-panel-2: #121212; --tv-panel-3: #171717; --tv-footer: #050505; --tv-line: rgba(255,255,255,.12); --tv-line-soft: rgba(255,255,255,.09); --tv-line-hard: rgba(255,255,255,.18); --tv-text: #fff; --tv-muted: rgba(255,255,255,.6); --tv-dim: rgba(255,255,255,.45); --tv-orange: #FF5900; --tv-orange-hi: #FF984A; --tv-orange-mid: #FF6E1E; --tv-grad: linear-gradient(114deg,#FF5900 0%,#8A2600 100%); --tv-grad-mark: linear-gradient(135deg,#FF882F 0%,#FF5400 21%,#FF984A 100%); --tv-max: 1240px; --tv-pad: clamp(16px,4vw,40px); --tv-font: -apple-system,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after {box-sizing: border-box;}
html {background: var(--tv-bg);}
body {margin: 0; background: var(--tv-bg); color: var(--tv-text); font-family: var(--tv-font); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased;}
a {color: var(--tv-orange); text-decoration: none;}
a:hover {color: var(--tv-orange-hi);}
img {max-width: 100%; height: auto; display: block;}
input, select, textarea, button {font-family: inherit;}
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight: 700; line-height: 1.15;}
p {margin: 0 0 1em;}
ul, ol {margin: 0; padding: 0; list-style: none;}
::-webkit-scrollbar {width: 10px; height: 10px;}
::-webkit-scrollbar-thumb {background: var(--tv-line-hard); border-radius: 6px;}
::-webkit-scrollbar-track {background: transparent;}
.screen-reader-only, .skip-links {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.tv-wrap {max-width: var(--tv-max); margin: 0 auto; padding-left: var(--tv-pad); padding-right: var(--tv-pad);}
.tv-site {display: flex; flex-direction: column; min-height: 100vh; background: var(--tv-bg);}
.tv-main {flex: 1 1 auto;}

/* --- Buttons -------------------------------------------------------------- */
.tv-btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 11px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease;}
.tv-btn--primary {background: var(--tv-orange); color: #fff;}
.tv-btn--primary:hover {background: var(--tv-orange-mid); color: #fff;}
.tv-btn--ghost {background: rgba(255,255,255,.09); color: #fff;}
.tv-btn--ghost:hover {background: rgba(255,255,255,.16); color: #fff;}
.tv-btn--outline {background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--tv-line-hard);}
.tv-btn--outline:hover {background: rgba(255,255,255,.09); color: #fff;}
.tv-btn--block {width: 100%;}
.tv-eyebrow {font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--tv-orange);}

/* --- Header --------------------------------------------------------------- */
.tv-header {flex: 0 0 auto; position: relative; z-index: 40; background: #000; border-bottom: 1px solid var(--tv-line);}
.tv-header__bar {max-width: var(--tv-max); margin: 0 auto; padding: 0 var(--tv-pad); height: clamp(60px,8vw,74px); display: flex; align-items: center; gap: clamp(12px,3vw,40px);}
.tv-header__logo {display: flex; align-items: center; flex: 0 0 auto; color: #fff;}
.tv-header__logo:hover {color: #fff;}
.tv-logo-svg {display: block; width: 100%; height: 100%; overflow: visible;}
/* The lockup carries its own clear space (viewBox -19.24 -19.24 1047.60 145.59),
   so the box is 7.20:1 where the unpadded artwork was 9.43:1. Widths are the old
   ones x 1.0368, which keeps the glyphs at the identical scale (0.2241 px/unit)
   rather than shrinking them to fit the padding. Heights follow the new ratio. */
.tv-header__logo .tv-logo-svg {width: 234.8px; height: 32.6px;}
.tv-nav {display: flex; align-items: center; gap: 30px; flex: 1 1 auto; font-size: 15px; font-weight: 600;}
.tv-nav a {color: var(--tv-muted);}
.tv-nav a:hover {color: #fff;}
.tv-nav__shopall {color: #fff; display: flex; align-items: center; gap: 6px;}
.tv-nav__shopall:hover {color: var(--tv-orange-hi);}
.tv-nav__caret {opacity: .6; transition: transform .18s ease;}
.tv-nav__shopall[aria-expanded="true"] .tv-nav__caret {transform: rotate(180deg);}
.tv-header__actions {display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto;}
.tv-iconbtn {width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 10px; color: #fff; cursor: pointer;}
.tv-iconbtn:hover {background: var(--tv-line-soft); color: #fff;}
.tv-cartbtn {height: 40px; padding: 0 14px 0 12px; display: flex; align-items: center; gap: 9px; background: var(--tv-line-soft); border: 0; border-radius: 10px; color: #fff; cursor: pointer; font-size: 15px; font-weight: 600;}
.tv-cartbtn:hover {background: rgba(255,255,255,.16); color: #fff;}
.tv-burger {width: 44px; height: 44px; margin-left: -10px; display: none; place-items: center; background: transparent; border: 0; border-radius: 10px; color: #fff; cursor: pointer; flex: 0 0 auto;}

/* --- Mega menu ------------------------------------------------------------ */
.tv-mega {position: absolute; left: 0; right: 0; top: 100%; background: var(--tv-panel); border-bottom: 1px solid var(--tv-line); box-shadow: 0 30px 60px rgba(0,0,0,.6);}
.tv-mega[hidden] {display: none;}
.tv-mega__inner {max-width: var(--tv-max); margin: 0 auto; padding: 34px var(--tv-pad) 38px; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 36px;}
.tv-mega__col {display: flex; flex-direction: column; gap: 13px;}
.tv-mega__col a {color: var(--tv-muted); font-size: 15px; font-weight: 600;}
.tv-mega__col a:hover {color: #fff;}
.tv-mega__col a.is-lead {color: #fff;}
.tv-mega__promo {border-radius: 14px; overflow: hidden; background: var(--tv-grad); padding: 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff;}
.tv-mega__promo:hover {color: #fff; opacity: .94;}
.tv-mega__promo-title {font-size: 22px; font-weight: 700; line-height: 1.15;}
.tv-mega__promo-sub {font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); margin-top: 5px;}

/* --- Search overlay ------------------------------------------------------- */
/* The overlay itself lives in the parent theme (cs4store/functions/search-overlay.php)
   so every store can use it. Only the palette is ours — these are the exact values
   from the Triumph Shop V2 design. Nothing here restates a selector or a dimension;
   if the component's layout changes, this keeps working. */
.cs4-search {--cs4-search-bg: #050505; --cs4-search-text: #fff; --cs4-search-muted: rgba(255,255,255,.6); --cs4-search-line: rgba(255,255,255,.12); --cs4-search-row-line: rgba(255,255,255,.08); --cs4-search-btn: rgba(255,255,255,.09); --cs4-search-btn-hover: rgba(255,255,255,.16); --cs4-search-chev: rgba(255,255,255,.35); --cs4-search-tile: var(--tv-panel-2);}

/* --- Drawers (cart + mobile nav) ------------------------------------------ */
/* Panels stay in the DOM and slide. `hidden`/display:none cannot transition, so
   visibility + transform is used instead; visibility is delayed on close so the
   panel remains focusable/visible for the duration of the slide out. */
.tv-scrim {position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.62); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;}
.tv-scrim.is-open {opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s;}
.tv-drawer {position: fixed; top: 0; bottom: 0; right: 0; width: min(420px,92%); z-index: 72; background: var(--tv-panel); border-left: 1px solid var(--tv-line); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s; will-change: transform;}
.tv-drawer.is-open {transform: translateX(0); visibility: visible; transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s;}
.tv-drawer--nav {right: auto; left: 0; width: min(320px,86%); border-left: 0; border-right: 1px solid var(--tv-line); transform: translateX(-100%);}
.tv-drawer--nav.is-open {transform: translateX(0);}
.tv-drawer__head {flex: 0 0 auto; height: 64px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--tv-line);}
.tv-drawer__title {font-size: 15px; font-weight: 700;}
.tv-drawer__close {width: 40px; height: 40px; margin-right: -8px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 10px; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;}
.tv-drawer__close:hover {background: var(--tv-line-soft); color: #fff;}
.tv-drawer__body {flex: 1 1 auto; overflow-y: auto; padding: 16px 18px;}
.tv-drawer__empty {padding: 40px 6px; text-align: center;}
.tv-drawer__empty-title {font-size: 19px; font-weight: 700; margin: 0 0 6px;}
.tv-drawer__empty-sub {color: var(--tv-muted); font-size: 15px; margin: 0 0 20px;}
.tv-drawer__items {display: flex; flex-direction: column; gap: 16px;}
.tv-drawer__item {display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--tv-line-soft);}
.tv-drawer__brand {font-size: 12px; font-weight: 600; color: var(--tv-dim);}
.tv-qty {display: inline-flex; align-items: center; border: 1px solid var(--tv-line); border-radius: 10px; overflow: hidden;}
.tv-qty__btn {width: 32px; height: 34px; display: grid; place-items: center; background: transparent; border: 0; color: #fff; font-size: 15px; cursor: pointer;}
.tv-qty__btn:hover:not(:disabled) {background: var(--tv-line-soft);}
.tv-qty__btn:disabled {opacity: .35; cursor: not-allowed;}
.tv-qty__val {min-width: 30px; text-align: center; font-size: 14px; font-weight: 600;}
.tv-drawer__row {display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: var(--tv-muted); margin-bottom: 6px;}
.tv-drawer__row--total {padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--tv-line); color: #fff; font-size: 18px; font-weight: 700;}
.tv-drawer__note {color: var(--tv-dim); font-size: 12px; margin: 10px 0 0; text-align: center;}
.tv-drawer__thumb img {border-radius: 10px; background: var(--tv-panel-2);}
.tv-drawer__meta {display: flex; flex-direction: column; gap: 3px; min-width: 0;}
.tv-drawer__name {font-size: 14px; font-weight: 600;}
.tv-drawer__name a {color: #fff;}
.tv-drawer__name a:hover {color: var(--tv-orange-hi);}
.tv-drawer__variation {color: var(--tv-dim); font-size: 12px;}
.tv-drawer__variation p {margin: 0;}
.tv-drawer__line {display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; flex-wrap: wrap;}
.tv-drawer__qty {color: var(--tv-muted);}
.tv-drawer__price {font-weight: 700; font-size: 15px; color: #fff;}
.tv-drawer__remove {margin-left: auto; color: var(--tv-dim); font-size: 13px; font-weight: 600;}
.tv-drawer__remove:hover {color: #fff;}
.tv-drawer__foot {flex: 0 0 auto; padding: 16px 18px; border-top: 1px solid var(--tv-line); display: flex; flex-direction: column; gap: 10px;}
.tv-drawer__subtotal {display: flex; align-items: center; justify-content: space-between; font-size: 16px;}
.tv-drawer__note {color: var(--tv-dim); font-size: 12px; margin: 0;}
.tv-drawer__navlist {display: flex; flex-direction: column; gap: 4px;}
.tv-drawer__navlist a {display: block; padding: 12px 10px; border-radius: 10px; color: #fff; font-size: 17px; font-weight: 600;}
.tv-drawer__navlist a:hover {background: var(--tv-line-soft); color: #fff;}

/* --- Home: hero slider (ONE slider, four slides) --------------------------
   Track is N*100% wide; each slide is 100/N%. Backgrounds, text colours and
   button treatments are taken verbatim from the approved design — note slide 3
   is black-on-orange, not white-on-dark.
   ------------------------------------------------------------------------- */
.tv-slider {position: relative; overflow: hidden; background: #000;}
.tv-slider__track {display: flex; transition: transform .65s cubic-bezier(.4,0,.2,1);}
.tv-slide {flex: 0 0 auto; min-height: clamp(430px,58vh,520px); display: flex; align-items: center;}
.tv-slide__inner {max-width: var(--tv-max); margin: 0 auto; width: 100%; padding: clamp(44px,7vw,72px) var(--tv-pad) clamp(60px,8vw,72px); display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: clamp(28px,4vw,56px); align-items: center;}
.tv-slide__eyebrow {font-size: 13px; font-weight: 600; margin-bottom: 16px;}
.tv-slide__title {margin: 0; font-size: clamp(34px,5.4vw,58px); line-height: 1.03; font-weight: 700; letter-spacing: -.025em; text-wrap: pretty;}
.tv-slide__copy {margin: 16px 0 0; font-size: clamp(15px,1.6vw,17px); max-width: 46ch; text-wrap: pretty;}
.tv-slide__actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px,3vw,32px);}
.tv-slide__media {display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 16px;}
.tv-slide--one .tv-slide__media {grid-template-columns: minmax(0,1fr); max-width: 420px; margin-left: auto;}
.tv-slide__shot {display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #33383A;}
.tv-slide__shot img {width: 100%; height: 100%; object-fit: cover;}
.tv-slide__mark {display: flex; justify-content: center;}
.tv-slide__mark .tv-logo-svg {width: clamp(110px,18vw,190px); height: auto; color: #FFFFFF;}

/* Slide skins */
.tv-slide--launch {background: linear-gradient(114deg,#FF5900 0%,#8A2600 100%);}
.tv-slide--launch .tv-slide__eyebrow {color: rgba(255,255,255,.8);}
.tv-slide--launch .tv-slide__title {color: #fff;}
.tv-slide--tees {background: linear-gradient(114deg,#8A2600 0%,#000000 100%);}
.tv-slide--tees .tv-slide__eyebrow {color: #FF984A;}
.tv-slide--tees .tv-slide__title {color: #fff;}
.tv-slide--tees .tv-slide__copy {color: rgba(255,255,255,.6);}
.tv-slide--course {background: linear-gradient(114deg,#FF984A 0%,#FF5900 100%);}
.tv-slide--course .tv-slide__eyebrow {color: rgba(0,0,0,.6);}
.tv-slide--course .tv-slide__title {color: #000;}
.tv-slide--course .tv-slide__copy {color: rgba(0,0,0,.7);}
.tv-slide--headwear {background: #0A0A0A;}
.tv-slide--headwear .tv-slide__eyebrow {color: var(--tv-orange);}
.tv-slide--headwear .tv-slide__title {color: #fff;}
.tv-slide--headwear .tv-slide__copy {color: rgba(255,255,255,.6);}
/* Image-only slide (subsite 124 banner): artwork fills the slide over the launch gradient */
.tv-slide--image {background-color: #000; background-size: cover; background-position: center; background-repeat: no-repeat;}

/* Slide buttons */
.tv-sbtn {display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 clamp(20px,3vw,30px); border-radius: 12px; font-size: 17px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease;}
.tv-sbtn--light {background: #fff; color: #000;}
.tv-sbtn--light:hover {background: rgba(255,255,255,.86); color: #000;}
.tv-sbtn--outline {background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);}
.tv-sbtn--outline:hover {background: rgba(255,255,255,.12); color: #fff;}
.tv-sbtn--orange {background: var(--tv-orange); color: #fff;}
.tv-sbtn--orange:hover {background: var(--tv-orange-mid); color: #fff;}
.tv-sbtn--dark {background: #000; color: #fff;}
.tv-sbtn--dark:hover {background: #171717; color: #fff;}

/* Dots */
.tv-slider__dots {position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 8px; z-index: 2;}
.tv-slider__dot {width: 30px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.35); cursor: pointer; transition: background .25s;}
.tv-slider__dot:hover {background: rgba(255,255,255,.6);}
.tv-slider__dot.is-active {background: #fff;}
.tv-entry {color: var(--tv-muted);}
.tv-entry h1, .tv-entry h2, .tv-entry h3 {color: #fff; margin-bottom: .5em;}
.tv-entry a {color: var(--tv-orange);}

/* --- Home: category tiles ------------------------------------------------- */
.tv-cats {max-width: var(--tv-max); margin: 0 auto; padding: clamp(36px,5vw,52px) var(--tv-pad) clamp(20px,3vw,28px); display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 18px;}
.tv-cat {position: relative; border-radius: 16px; overflow: hidden; min-height: clamp(200px,26vw,300px); display: flex; flex-direction: column; justify-content: flex-end; background: var(--tv-panel-2); color: #fff;}
.tv-cat:hover {color: #fff;}
.tv-cat img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform .4s ease, opacity .3s ease;}
.tv-cat:hover img {transform: scale(1.04); opacity: .74;}
.tv-cat__body {position: relative; padding: 22px; background: linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,0) 100%);}
.tv-cat__name {font-size: clamp(20px,3vw,28px);}
.tv-cat__count {font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); margin-top: 4px;}

/* --- Section heads + product grid ----------------------------------------- */
.tv-section {max-width: var(--tv-max); margin: 0 auto; padding: clamp(36px,6vw,64px) var(--tv-pad);}
.tv-section__head {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px,3vw,28px);}
.tv-section__title {font-size: clamp(22px,4vw,36px); letter-spacing: -.01em;}
.tv-section__link {font-size: 15px; font-weight: 600; color: var(--tv-muted);}
.tv-section__link:hover {color: #fff;}
.tv-grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: clamp(14px,2vw,22px);}
.tv-card {position: relative;}
.tv-card__link {display: flex; flex-direction: column; gap: 12px; color: #fff;}
.tv-card__link:hover {color: #fff;}
.tv-card__media {position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--tv-panel-2); aspect-ratio: 1 / 1;}
.tv-card__media img {width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease;}
.tv-card:hover .tv-card__media img {transform: scale(1.03);}
.tv-card__badge {position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 7px; background: var(--tv-orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em;}
.tv-card__body {display: flex; flex-direction: column; gap: 2px;}
.tv-card__brand {font-size: 12px; font-weight: 600; color: var(--tv-dim); letter-spacing: .02em;}
.tv-card__name {font-size: 15px; font-weight: 600; line-height: 1.3;}
.tv-card__price {font-size: 15px; font-weight: 700; margin-top: 4px;}
.tv-card__price del {color: var(--tv-dim); font-weight: 400; margin-right: 6px;}
.tv-card__price ins {text-decoration: none;}

/* --- Size guide page ------------------------------------------------------ */
.tv-sg {max-width: 1000px; margin: 0 auto; padding: clamp(22px,4vw,36px) var(--tv-pad) clamp(56px,9vw,90px);}
.tv-sg__crumbs {font-size: 13px; font-weight: 600; color: var(--tv-muted); display: flex; gap: 8px; align-items: center;}
.tv-sg__crumbs a {color: var(--tv-muted);}
.tv-sg__crumbs a:hover {color: #fff;}
.tv-sg__sep {opacity: .5;}
.tv-sg__here {color: #fff;}
.tv-sg__title {margin: 14px 0 0; font-size: clamp(27px,4.2vw,34px); letter-spacing: -.02em; color: #fff;}
.tv-sg__intro {margin: 10px 0 0; font-size: 17px; color: var(--tv-muted); max-width: 62ch;}
.tv-sg__panel {margin-top: 36px; border: 1px solid var(--tv-line); border-radius: 16px; padding: clamp(20px,3vw,28px);}
.tv-sg__h2 {margin: 0; font-size: 22px; letter-spacing: -.01em; color: #fff;}
.tv-sg__how {margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 22px;}
.tv-sg__how-term {font-size: 15px; font-weight: 600; color: #fff;}
.tv-sg__how-def {font-size: 15px; color: var(--tv-muted); margin-top: 4px;}
.tv-sg__card {margin-top: 36px; border: 1px solid var(--tv-line); border-radius: 16px; overflow: hidden;}
.tv-sg__card-head {padding: clamp(18px,2.6vw,24px); border-bottom: 1px solid var(--tv-line); display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between;}
.tv-sg__card-id {min-width: 0;}
.tv-sg__brand {font-size: 13px; font-weight: 600; color: var(--tv-orange);}
.tv-sg__product {margin: 6px 0 0; font-size: clamp(19px,2.4vw,22px); letter-spacing: -.01em; color: #fff;}
.tv-sg__view {font-size: 13px; font-weight: 600; flex: 0 0 auto;}
.tv-sg__card-body {padding: clamp(18px,2.6vw,24px);}
.tv-sg__fit {margin: 0; font-size: 15px; color: var(--tv-muted);}
.tv-sg__tablewrap {margin-top: 20px; overflow-x: auto;}
.tv-sg__table {min-width: 500px; width: 100%; border-collapse: collapse;}
.tv-sg__table th, .tv-sg__table td {padding: 12px 8px; font-size: 14px; border-bottom: 1px solid var(--tv-line-soft); text-align: center;}
.tv-sg__table thead th {font-size: 13px; font-weight: 600; color: var(--tv-muted);}
.tv-sg__table thead th:first-child, .tv-sg__table tbody th {text-align: left; font-weight: 600; color: #fff;}
.tv-sg__table tbody td {color: var(--tv-muted);}
.tv-sg__table tbody tr:last-child th, .tv-sg__table tbody tr:last-child td {border-bottom: 0;}
.tv-sg__note {margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(255,89,0,.1); border: 1px solid rgba(255,89,0,.28); font-size: 13px; font-weight: 600; color: var(--tv-orange-hi);}
.tv-sg__foot {margin-top: 32px; font-size: 13px; color: var(--tv-dim);}

/* --- Footer --------------------------------------------------------------- */
.tv-footer {border-top: 1px solid var(--tv-line); background: var(--tv-footer);}
.tv-footer__inner {max-width: var(--tv-max); margin: 0 auto; padding: clamp(36px,5vw,56px) var(--tv-pad) 28px; display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: clamp(24px,4vw,44px);}
.tv-footer__brand .tv-logo-svg {width: 186.6px; height: 25.9px;}
.tv-footer__blurb {color: var(--tv-muted); font-size: 14px; margin: 14px 0 0; max-width: 34ch;}
.tv-footer__coltitle {font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px;}
.tv-footer__list {display: flex; flex-direction: column; gap: 9px;}
.tv-footer__list a {color: var(--tv-muted); font-size: 14px;}
.tv-footer__list a:hover {color: #fff;}
.tv-footer__bar {max-width: var(--tv-max); margin: 0 auto; padding: 18px var(--tv-pad) 34px; border-top: 1px solid var(--tv-line-soft); color: var(--tv-dim); font-size: 13px;}

/* --- Size guide modal ----------------------------------------------------- */
.tv-modal {position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--tv-pad); background: rgba(0,0,0,.78);}
.tv-modal[hidden] {display: none;}
.tv-modal__box {width: min(720px,100%); max-height: 84vh; overflow-y: auto; background: var(--tv-panel); border: 1px solid var(--tv-line); border-radius: 18px;}
.tv-modal__head {position: sticky; top: 0; background: var(--tv-panel); padding: 18px 20px; border-bottom: 1px solid var(--tv-line); display: flex; align-items: center; justify-content: space-between;}
.tv-modal__title {font-size: 19px;}
.tv-modal__body {padding: 20px;}
.tv-table {width: 100%; border-collapse: collapse; font-size: 14px;}
.tv-table th, .tv-table td {padding: 10px 12px; border-bottom: 1px solid var(--tv-line-soft); text-align: left;}
.tv-table th {color: var(--tv-orange); font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;}
.tv-note {color: var(--tv-dim); font-size: 13px; margin-top: 14px;}

/* --- WooCommerce dark skin ------------------------------------------------ */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error {background: var(--tv-panel-2); border-top-color: var(--tv-orange); color: #fff; border-radius: 12px;}
.woocommerce .woocommerce-message a, .woocommerce .woocommerce-info a {color: var(--tv-orange);}
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {background: var(--tv-orange); color: #fff; border-radius: 11px; font-weight: 700; font-size: 15px; padding: 12px 22px;}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {background: var(--tv-orange-mid); color: #fff;}
.woocommerce a.button.alt, .woocommerce button.button.alt {background: var(--tv-orange);}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {background: var(--tv-orange-mid);}
.woocommerce .quantity .qty {background: var(--tv-panel-2); border: 1px solid var(--tv-line); border-radius: 9px; color: #fff; padding: 9px;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .select2-container--default .select2-selection--single {background: var(--tv-panel-2); border: 1px solid var(--tv-line); border-radius: 10px; color: #fff; padding: 12px 14px; min-height: 46px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {color: #fff; line-height: 22px;}
.select2-dropdown {background: var(--tv-panel); border: 1px solid var(--tv-line); color: #fff;}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background: var(--tv-orange);}
.woocommerce textarea, .woocommerce-page textarea, .tv-checkout textarea, .woocommerce form .form-row textarea {background: var(--tv-panel-2); border: 1px solid var(--tv-line); border-radius: 10px; color: #fff; padding: 12px 14px; width: 100%;}
.woocommerce textarea::placeholder, .tv-checkout textarea::placeholder {color: var(--tv-dim);}
.woocommerce form .form-row label, .woocommerce-page form .form-row label {color: var(--tv-muted); font-size: 13px; font-weight: 600;}
.woocommerce table.shop_table {background: var(--tv-panel); border: 1px solid var(--tv-line); border-radius: 14px; color: #fff;}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {border-top-color: var(--tv-line-soft); color: #fff;}
.woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th {border-top-color: var(--tv-line);}
.woocommerce-cart table.cart img {width: 72px; border-radius: 10px;}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order {background: var(--tv-panel); border: 1px solid var(--tv-line); border-radius: 16px; padding: 20px;}
.woocommerce-checkout #payment {background: var(--tv-panel-2); border-radius: 14px;}
.woocommerce-checkout #payment div.payment_box {background: var(--tv-panel-3); color: var(--tv-muted);}
.woocommerce-checkout #payment div.payment_box::before {border-bottom-color: var(--tv-panel-3);}
.woocommerce-checkout #payment ul.payment_methods {border-bottom: 1px solid var(--tv-line);}
.woocommerce-checkout #payment ul.payment_methods li {color: #fff;}
.woocommerce div.product .woocommerce-tabs ul.tabs li {background: var(--tv-panel-2); border-color: var(--tv-line);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {background: var(--tv-panel);}
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-result-count {color: var(--tv-dim);}
.woocommerce .star-rating span::before, .woocommerce p.stars a::before {color: var(--tv-orange);}
.woocommerce-error, .woocommerce-noreviews, p.no-comments {background: var(--tv-panel-2);}
.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper {color: var(--tv-muted); font-size: 13px;}
/* --- My Account -----------------------------------------------------------
   Same layout as every other subsite (cs4store/css/master.css + layout.css):
   centred title, a horizontal row of icon-over-label links, then the endpoint
   content in a panel. Ported here because the child dequeues the parent
   stylesheets — but NOT the 'chrs-material-icons' handle, so the Material
   Symbols glyphs the icons are drawn with are still loaded on this subsite.
   Palette is Triumph's, not the parent's light grey.

   Woo floats both halves at 30%/68%; the float has to be cleared explicitly.
   ------------------------------------------------------------------------- */
body.woocommerce-account .tv-page__title {text-align: center;}
.woocommerce-MyAccount-navigation {float: none !important; width: 100% !important; margin: 0 auto clamp(24px,4vw,40px);}
.woocommerce-MyAccount-navigation ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;}
.woocommerce-MyAccount-navigation ul li {display: block; flex: 1 1 30%; min-width: 0; font-weight: 600; cursor: pointer;}
.woocommerce-MyAccount-navigation ul li a {display: block; width: 100%; height: 100%; padding: 46px 5px 12px; position: relative; box-sizing: border-box; text-align: center; font-size: 13px; line-height: 1.2; color: var(--tv-muted); border-radius: 12px; transition: color .15s ease, background .15s ease;}
.woocommerce-MyAccount-navigation ul li a:hover {color: #fff; background: var(--tv-line-soft);}
.woocommerce-MyAccount-navigation ul li.is-active a {color: #fff;}
.woocommerce-MyAccount-navigation ul li a:before {font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 26px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; -webkit-font-smoothing: antialiased;}
.woocommerce-MyAccount-navigation ul li.is-active a:before {color: var(--tv-orange);}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {content: 'dashboard';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {content: 'receipt_long';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a:before {content: 'download';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a:before {content: 'location_on';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a:before {content: 'manage_accounts';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a:before {content: 'credit_card';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--points-and-rewards a:before {content: 'workspace_premium';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--gift-cards a:before {content: 'redeem';}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {content: 'logout';}
.woocommerce-MyAccount-content {float: none !important; width: 100% !important; padding: clamp(22px,3.5vw,34px) clamp(18px,3vw,32px); background: var(--tv-panel); border: 1px solid var(--tv-line); border-radius: 16px; box-sizing: border-box;}
.woocommerce-MyAccount-content:after {content: ''; display: table; clear: both;}
.woocommerce-MyAccount-content > p:last-child, .woocommerce-MyAccount-content > form:last-child, .woocommerce-MyAccount-content > table:last-child {margin-bottom: 0;}
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 {color: #fff;}
/* The panel already supplies the surface and the frame; the general
   .woocommerce table.shop_table rule would draw a second bordered card inside
   it. Rows keep their separators via the th/td top borders. */
.woocommerce-MyAccount-content table.shop_table {background: transparent; border: 0; border-radius: 0;}
/* Breakpoints mirror the parent's: bigger at tablet, one unwrapped row at desktop.
   Written min-width because the base above is the wrapped 3-across phone layout. */
@media (min-width: 750px) {
  .woocommerce-MyAccount-navigation ul li a {padding: 62px 10px 20px; font-size: 15px;}
  .woocommerce-MyAccount-navigation ul li a:before {top: 20px; font-size: 30px;}
}
/* 15px, not the parent's 1.6rem: this theme's container is 1240px against the
   parent's 1400px, so at 16px "Payment methods" wrapped to a second line while
   every other label stayed on one. Labels still wrap if a store adds a longer
   endpoint — the row just grows. */
@media (min-width: 1000px) {
  .woocommerce-MyAccount-navigation ul {flex-wrap: nowrap;}
  .woocommerce-MyAccount-navigation ul li {flex: 1 1 0;}
  .woocommerce-MyAccount-navigation ul li a {padding: 62px 6px 24px; font-size: 15px;}
}

/* WooCommerce ships its own colours at specificity our earlier rules lost to.
   Two cases: the price (#958e09) at (0,3,2), and the brand purple (#7f54b3) on
   .button.alt — including its DISABLED state at (0,4,1), which is what made the
   add-to-cart button purple before a size is chosen. Woo wraps these in :where(),
   which adds no specificity, so matching its selector shape and loading after
   woocommerce.css is enough. */
.woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce div.product .woocommerce-variation-price .price {color: #fff;}
.woocommerce div.product p.price del, .woocommerce div.product span.price del {color: var(--tv-dim); font-weight: 400;}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {color: #fff; text-decoration: none;}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt {background-color: var(--tv-orange); color: #fff;}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {background-color: var(--tv-orange-mid); color: #fff;}
.woocommerce a.button.alt.disabled, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled[disabled], .woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled[disabled], .woocommerce input.button.alt.disabled, .woocommerce input.button.alt:disabled {background-color: var(--tv-orange); color: #fff; opacity: .45;}
.woocommerce a.button.alt.disabled:hover, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled:hover {background-color: var(--tv-orange); color: #fff;}

/* Woo Variation Swatches also renders swatches on the archive loop. The approved
   design has none on cards — sizes belong on the product page. Hidden in the theme
   rather than via a plugin setting so it reverts with the theme. */
.tv-card .woo-variation-swatches, .tv-card .variable-items-wrapper, .tv-card .wvs-archive-variation-wrapper, .tv-card form.variations_form, .tv-card .variations, .tv-card .add_to_cart_button, .tv-card .added_to_cart, .tv-card .button {display: none;}

/* Variation swatches (Woo Variation Swatches plugin).

   Selected and hover change the ring ONLY — the tile keeps its resting background
   and white text. That is done by setting the plugin's own custom properties
   rather than by writing competing rules: its selected state ships as

     .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock)

   which is (0,7,0). A theme rule that reads sensibly cannot beat that without
   !important, and the earlier attempt here lost — hence the white tile with black
   text. The hover rule also set background-color, which the old override never
   touched at all, so hover went white too. Driving the variables side-steps the
   specificity contest entirely and survives plugin updates. */
.woo-variation-swatches {--wvs-item-background-color: var(--tv-panel-2); --wvs-item-text-color: #fff; --wvs-item-box-shadow: 0 0 0 1px var(--tv-line); --wvs-selected-item-background-color: var(--tv-panel-2); --wvs-selected-item-text-color: #fff; --wvs-selected-item-box-shadow: 0 0 0 2px var(--tv-orange); --wvs-hover-item-background-color: var(--tv-panel-2); --wvs-hover-item-text-color: #fff; --wvs-hover-item-box-shadow: 0 0 0 2px var(--tv-orange);}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {background: var(--tv-panel-2); box-shadow: 0 0 0 1px var(--tv-line); border-radius: 9px; color: #fff;}
.woo-variation-swatches .variable-items-wrapper .variable-item span {color: inherit;}

/* Extended-size substitution notice (cs4-extended-size-notice mu-plugin) */
.cs4-esn {background: rgba(255,255,255,.05); border-left-color: var(--tv-orange);}
.cs4-esn a {color: var(--tv-orange);}

/* --- Parent-theme wrappers ------------------------------------------------
   cs4store's page.php and cs4_woo_container_before() wrap content in
   .spacer > .container, but that CSS lives in the parent stylesheets we dequeue.
   Result: page titles and WooCommerce notices rendered FULL-BLEED while our own
   .tv-section supplied its own width. Re-declared here on the Triumph grid.
   .tv-section drops its horizontal padding when nested so the two don't stack
   gutters and push content out of line with the header.
   ------------------------------------------------------------------------- */
.container {position: relative; width: 100%; max-width: var(--tv-max); margin: 0 auto; padding-left: var(--tv-pad); padding-right: var(--tv-pad); box-sizing: border-box;}
.spacer {padding-top: clamp(28px,5vw,56px); padding-bottom: clamp(28px,5vw,56px);}
.spacer-top {padding-top: clamp(28px,5vw,56px);}
.spacer-btm {padding-bottom: clamp(28px,5vw,56px);}
.container .tv-section, .tv-section .tv-section {max-width: none; padding: 0;}
.container > h1 {font-size: clamp(22px,4vw,36px); letter-spacing: -.01em; margin-bottom: clamp(18px,3vw,28px);}
.tv-page__title {margin-bottom: clamp(18px,3vw,28px);}

/* WooCommerce notices sit on the Triumph palette wherever they land. */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {background: var(--tv-panel-2); border-top-color: var(--tv-orange); color: #fff; border-radius: 12px; padding: 16px 18px 16px 46px; list-style: none;}
.woocommerce-message a.button, .woocommerce-info a.button {background-color: var(--tv-orange); color: #fff;}
.woocommerce-message a.button:hover, .woocommerce-info a.button:hover {background-color: var(--tv-orange-mid); color: #fff;}
/* Woo focuses the notice for screen readers; keep the indicator but on-brand
   rather than the browser's default blue ring. */
.woocommerce-notices-wrapper :focus, .woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus {outline: 2px solid var(--tv-orange); outline-offset: 2px;}

/* --- Collection / single / cart / checkout layout ------------------------- */
.tv-collection__head {margin-bottom: clamp(20px,3vw,32px);}
.tv-collection__desc {color: var(--tv-muted); max-width: 62ch; margin-top: 10px;}
.tv-collection ul.products, .woocommerce ul.products {display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: clamp(14px,2vw,22px); margin: 0; padding: 0; list-style: none;}
.woocommerce ul.products::before, .woocommerce ul.products::after {display: none;}
.woocommerce ul.products li.product {width: auto; margin: 0; float: none; clear: none;}
/* --- Product detail page ---------------------------------------------------
   Layout from the approved design: breadcrumb, brand, title, price, blurb,
   colour, size + size-guide link, full-width add to cart, microcopy, accordions.
   The add-to-cart form is WooCommerce's own — only restyled.
   ------------------------------------------------------------------------- */
.tv-pdp {display: block;}
.tv-pdp__crumbs {display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tv-muted); margin-bottom: clamp(16px,2.5vw,26px);}
.tv-pdp__crumbs a {color: var(--tv-muted);}
.tv-pdp__crumbs a:hover {color: #fff;}
.tv-pdp__sep {opacity: .5;}
.tv-pdp__here {color: #fff;}
.tv-pdp__cols {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); align-items: start;}
.tv-pdp__media {min-width: 0;}
.tv-pdp__media .woocommerce-product-gallery {width: 100% !important; float: none; margin: 0; opacity: 1 !important;}
.tv-pdp__media .woocommerce-product-gallery__image img {border-radius: 16px;}
.tv-pdp__media .flex-control-thumbs {display: flex; gap: 10px; margin-top: 12px; padding: 0; list-style: none;}
.tv-pdp__media .flex-control-thumbs li {width: 76px;}
.tv-pdp__media .flex-control-thumbs img {border-radius: 10px; cursor: pointer;}
.tv-pdp__info {min-width: 0; width: 100% !important; float: none; margin: 0;}
.tv-pdp__brand {font-size: 13px; font-weight: 600; color: var(--tv-orange); margin-bottom: 10px;}
.tv-pdp__title {font-size: clamp(26px,3.6vw,40px); line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 0 0 14px;}
.tv-pdp__price {font-size: clamp(20px,2.4vw,26px); font-weight: 700; color: #fff; margin-bottom: 18px;}
.tv-pdp__price del {color: var(--tv-dim); font-weight: 400; margin-right: 8px;}
.tv-pdp__price ins {text-decoration: none;}
.tv-pdp__blurb {color: var(--tv-muted); font-size: clamp(15px,1.6vw,17px); max-width: 56ch;}
.tv-pdp__blurb p {margin: 0 0 1em;}
.tv-pdp__label {font-size: 13px; font-weight: 600; color: #fff;}
.tv-pdp__sizehead {display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 10px;}
.tv-pdp__sizeguide {font-size: 13px; font-weight: 600; color: var(--tv-orange);}
.tv-pdp__sizeguide:hover {color: var(--tv-orange-hi);}
.tv-pdp__micro {margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--tv-dim);}

/* WooCommerce's form, restyled. The design has no quantity control on this page. */
.tv-pdp form.cart {margin: 0;}
.tv-pdp form.cart .quantity {display: none !important;}
/* !important is load-bearing here: WooCommerce's add-to-cart-variation.js calls
   jQuery .show() on the quantity wrapper once a variation is selected, which writes
   an inline display:block. An inline style beats any stylesheet rule on specificity,
   so without !important the box reappears the moment a size is chosen.
   Not solved with is_sold_individually — that would also lock quantity on the cart
   page and break the drawer stepper. */
.tv-pdp table.variations {width: 100%; margin: 0 0 14px; border: 0;}
.tv-pdp table.variations td, .tv-pdp table.variations th {padding: 0; border: 0; display: block; text-align: left;}
.tv-pdp table.variations th.label {display: none;}   /* our own Size label sits above, next to the size-guide link */
.tv-pdp .reset_variations {display: inline-block; margin-top: 8px; color: var(--tv-dim); font-size: 12px;}
.tv-pdp .single_add_to_cart_button {width: 100%; height: 56px; border-radius: 12px; font-size: 17px; font-weight: 700; margin-top: 6px;}
.tv-pdp .woocommerce-variation-price {margin: 0 0 12px;}
.tv-pdp .woocommerce-variation-availability {color: var(--tv-muted); font-size: 13px;}
.tv-pdp .stock.out-of-stock {color: var(--tv-orange-hi);}

/* Accordions */
.tv-pdp__details {margin-top: clamp(24px,3vw,34px); border-top: 1px solid var(--tv-line);}
.tv-acc {border-bottom: 1px solid var(--tv-line);}
.tv-acc__head {display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 17px; font-weight: 700; color: #fff; cursor: pointer; list-style: none;}
.tv-acc__head::-webkit-details-marker {display: none;}
.tv-acc__head::after {content: "+"; font-size: 20px; font-weight: 400; color: var(--tv-muted);}
.tv-acc[open] .tv-acc__head::after {content: "\2212";}
.tv-acc__body {padding: 0 0 20px; color: var(--tv-muted); font-size: 15px;}
.tv-acc__body p {margin: 0 0 1em;}
.tv-acc__fit {margin: 0 0 16px;}
.tv-acc__tablewrap {overflow-x: auto;}
.tv-acc__tablewrap .tv-sg__table {min-width: 440px;}
.tv-acc__more {margin: 14px 0 0;}
.tv-acc__more a {font-size: 13px; font-weight: 600;}

.tv-cart__title, .tv-checkout__title {margin-bottom: clamp(18px,3vw,28px);}
.tv-cart .cart-collaterals {margin-top: 28px; display: flex; justify-content: flex-end;}
.tv-cart .cart-collaterals .cart_totals {width: min(420px,100%);}
.tv-cart td.actions {padding-top: 18px;}
.tv-cart .coupon {display: inline-flex; gap: 8px; margin-right: 10px;}
.tv-cart .coupon .input-text {background: var(--tv-panel-2); border: 1px solid var(--tv-line); border-radius: 10px; color: #fff; padding: 11px 14px; min-width: 180px;}
.tv-checkout__cols {display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,44px); align-items: start;}
.tv-checkout__aside {position: sticky; top: 22px;}
.tv-checkout .col2-set {display: block; width: 100%;}
.tv-checkout .col2-set .col-1, .tv-checkout .col2-set .col-2 {width: 100%; max-width: none; float: none;}
.tv-checkout .col2-set .col-2:not(:empty) {margin-top: clamp(20px,3vw,32px);}
.tv-checkout h3 {font-size: 19px; margin-bottom: 14px;}
.tv-checkout .woocommerce-billing-fields h3, .tv-checkout .woocommerce-shipping-fields h3 {margin-top: 0;}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .tv-slide__inner {grid-template-columns: 1fr; gap: 26px;}
  .tv-slide--one .tv-slide__media {margin-left: 0;}
  .tv-footer__inner {grid-template-columns: 1fr 1fr; gap: 28px;}
  .tv-pdp__cols {grid-template-columns: 1fr; gap: 26px;}
  .tv-checkout__cols {grid-template-columns: 1fr; gap: 28px;}
  .tv-checkout__aside {position: static;}
}
@media (max-width: 860px) {
  .tv-nav {display: none;}
  .tv-burger {display: grid;}
  .tv-header__logo .tv-logo-svg {width: 165.9px; height: 23.1px;}
  .tv-mega {display: none;}
}
@media (max-width: 560px) {
  body {font-size: 16px;}
  .tv-grid {grid-template-columns: repeat(auto-fill,minmax(150px,1fr));}
  .tv-footer__inner {grid-template-columns: 1fr;}
  .tv-drawer__item {grid-template-columns: 68px 1fr;}
}
@media (prefers-reduced-motion: reduce) {
  * {animation-duration: .001ms !important; transition-duration: .001ms !important;}
  .tv-drawer, .tv-scrim {transition: none !important;}
}