/*
 * Tank Forge public storefront design.
 * The legacy body-class name remains for compatibility with the approved theme.
 */
body.redesign-preview {
  --tf-black: #0e0c12;
  --tf-charcoal: #18131f;
  --tf-raised: #21182a;
  --tf-purple-deep: #3a1f52;
  --tf-purple: #7546c8;
  --tf-purple-bright: #9366e6;
  --tf-green: #52d17c;
  --tf-green-bright: #83f0a4;
  --tf-text: #f7f4f8;
  --tf-secondary: #b6afbd;
  --tf-muted: #827a88;
  --tf-border: #35293d;
  --tf-border-soft: #29222f;
  --primary: var(--tf-purple);
  --primary-dark: #5f34a8;
  --primary-deep: var(--tf-purple-deep);
  --primary-soft: rgba(147, 102, 230, .14);
  --accent: var(--tf-green);
  --ink: var(--tf-text);
  --muted: var(--tf-secondary);
  --line: var(--tf-border);
  --soft: var(--tf-raised);
  --radius: 12px;
  --radius-lg: 14px;
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, .22);
  --shadow: 0 22px 60px rgba(0, 0, 0, .38);
  margin: 0;
  color: var(--tf-text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--tf-black);
  background-size: 34px 34px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.redesign-preview *, body.redesign-preview *::before, body.redesign-preview *::after { box-sizing: border-box; }
body.redesign-preview main { min-height: 60vh; }
body.redesign-preview h1,
body.redesign-preview h2,
body.redesign-preview h3,
body.redesign-preview .brand strong { color: var(--tf-text); font-family: "Archivo Black", Inter, sans-serif; letter-spacing: -.035em; }
body.redesign-preview p { line-height: 1.7; }
body.redesign-preview a { color: inherit; }
body.redesign-preview .shell { width: min(1180px, calc(100% - 48px)); }
body.redesign-preview .narrow { max-width: 880px; }
body.redesign-preview .section { padding-block: 82px; }
body.redesign-preview .eyebrow,
body.redesign-preview .section-kicker {
  color: var(--tf-green-bright);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
body.redesign-preview .muted { color: var(--tf-secondary) !important; }

.tf2-preview-bar {
  position: relative;
  z-index: 120;
  border-bottom: 1px solid rgba(131,240,164,.26);
  color: #d8ffe4;
  background: #122319;
  font-size: .76rem;
}
.tf2-preview-bar .shell { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tf2-preview-bar a { color: var(--tf-green-bright); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

body.redesign-preview .tf2-site-header {
  position: sticky;
  top: 0;
  z-index: 110;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(14,12,18,.9);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
body.redesign-preview .nav-wrap { min-height: 82px; }
body.redesign-preview .tf2-brand { gap: 12px; color: var(--tf-text); }
body.redesign-preview .brand-mark {
  width: 43px;
  height: 43px;
  border: 1px solid rgba(131,240,164,.25);
  border-radius: 9px;
  color: #0e1711;
  background: linear-gradient(145deg, var(--tf-green-bright), var(--tf-green));
  box-shadow: 0 0 0 5px rgba(82,209,124,.08), 0 10px 24px rgba(82,209,124,.16);
  font-family: "Archivo Black", sans-serif;
}
body.redesign-preview .brand-mark.large { width: 58px; height: 58px; }
body.redesign-preview .tf2-brand strong { display: block; font-size: 1.08rem; letter-spacing: -.02em; }
body.redesign-preview .tf2-brand small { display: block; margin-top: 2px; color: var(--tf-muted); font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.redesign-preview .tf2-nav { gap: 2px; }
body.redesign-preview .tf2-nav a { border-radius: 8px; color: var(--tf-secondary); font-size: .78rem; }
body.redesign-preview .tf2-nav a:hover,
body.redesign-preview .tf2-nav a.active { color: var(--tf-text); background: rgba(147,102,230,.15); }
body.redesign-preview .tf2-nav .nav-cta { border: 1px solid rgba(131,240,164,.32); color: #0d1710; background: var(--tf-green); }
body.redesign-preview .tf2-nav .nav-cta:hover { color: #07110a; background: var(--tf-green-bright); }
body.redesign-preview .cart-count { color: white; background: var(--tf-purple); }
body.redesign-preview .nav-toggle { border-color: var(--tf-border); color: var(--tf-text); background: var(--tf-raised); }

body.redesign-preview .button {
  min-height: 47px;
  border: 1px solid rgba(131,240,164,.4);
  border-radius: 9px;
  color: #0a130d;
  background: linear-gradient(145deg, var(--tf-green-bright), var(--tf-green));
  box-shadow: 0 12px 28px rgba(82,209,124,.14);
  font-family: Inter, sans-serif;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .01em;
}
body.redesign-preview .button:hover { color: #07110a; background: var(--tf-green-bright); box-shadow: 0 16px 34px rgba(82,209,124,.22); }
body.redesign-preview .button.secondary,
body.redesign-preview .button.ghost {
  border-color: var(--tf-border);
  color: var(--tf-text);
  background: rgba(255,255,255,.035);
  box-shadow: none;
}
body.redesign-preview .button.secondary:hover,
body.redesign-preview .button.ghost:hover { border-color: var(--tf-purple-bright); color: var(--tf-text); background: rgba(147,102,230,.13); }
body.redesign-preview .text-link,
body.redesign-preview .card-link,
body.redesign-preview .section-link { color: var(--tf-green-bright); }

.tf2-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--tf-border-soft); background: radial-gradient(circle at 78% 18%, rgba(117,70,200,.22), transparent 31%), linear-gradient(145deg, #100d15, #18121f 58%, #100d15); }
.tf2-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, rgba(82,209,124,.045), transparent 33%); }
.tf2-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(390px,.96fr); gap: 70px; align-items: center; min-height: 690px; padding-block: 84px; }
.tf2-hero-copy h1 { max-width: 760px; margin: 16px 0 24px; font-size: clamp(3.4rem, 6.2vw, 6.7rem); line-height: .94; }
.tf2-hero-copy h1 em { display: block; color: var(--tf-green); font-style: normal; }
.tf2-hero-copy > p:not(.eyebrow) { max-width: 680px; color: var(--tf-secondary); font-size: 1.03rem; }
.tf2-hero-copy .button-row { margin-top: 32px; }
.tf2-hero-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--tf-border); }
.tf2-hero-notes span { display: grid; gap: 3px; padding-left: 13px; border-left: 2px solid var(--tf-purple); }
.tf2-hero-notes strong { font-size: .82rem; }
.tf2-hero-notes small { color: var(--tf-muted); font-size: .69rem; line-height: 1.4; }
.tf2-hero-visual { position: relative; }
.tf2-hero-photo { overflow: hidden; aspect-ratio: .86; border: 1px solid rgba(147,102,230,.34); border-radius: 14px; background: var(--tf-raised); box-shadow: 28px 28px 0 rgba(58,31,82,.36), var(--shadow); transform: rotate(1.2deg); }
.tf2-hero-photo img,
.tf2-hero-photo .image-placeholder { width: 100%; height: 100%; object-fit: cover; }
.tf2-hero-label { position: absolute; right: -22px; bottom: 42px; display: flex; align-items: center; gap: 12px; max-width: 280px; padding: 14px 18px; border: 1px solid rgba(131,240,164,.28); border-radius: 9px; background: rgba(14,12,18,.94); box-shadow: var(--shadow-sm); transform: rotate(-1.2deg); }
.tf2-hero-label > span { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%; background: var(--tf-green); box-shadow: 0 0 0 6px rgba(82,209,124,.12); }
.tf2-hero-label small { display: block; color: var(--tf-green-bright); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tf2-hero-label strong { display: block; margin-top: 2px; font-size: .85rem; }

.tf2-section { padding-block: 90px; }
.tf2-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.tf2-section-head h2 { margin: 8px 0 0; font-size: clamp(2rem,4vw,4rem); }
.tf2-section-head p:not(.eyebrow) { max-width: 680px; margin: 14px 0 0; color: var(--tf-secondary); }
.tf2-section-head > a { flex: 0 0 auto; color: var(--tf-green-bright); font-size: .8rem; font-weight: 800; }
.tf2-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.tf2-category-card { overflow: hidden; border: 1px solid var(--tf-border); border-radius: 12px; background: var(--tf-charcoal); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tf2-category-card:hover { border-color: var(--tf-purple-bright); box-shadow: var(--shadow-sm); transform: translateY(-5px); }
.tf2-category-image { aspect-ratio: 1.2; overflow: hidden; background: var(--tf-raised); }
.tf2-category-image img,
.tf2-category-image .image-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tf2-category-card:hover img { transform: scale(1.04); }
.tf2-category-card > div:last-child { padding: 19px; }
.tf2-category-card > div > span { color: var(--tf-purple-bright); font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tf2-category-card h3 { margin: 7px 0; font-size: 1.25rem; }
.tf2-category-card p { min-height: 60px; margin: 0 0 14px; color: var(--tf-secondary); font-size: .79rem; line-height: 1.55; }
.tf2-category-card strong { color: var(--tf-green-bright); font-size: .76rem; }

.tf2-custom-section { border-block: 1px solid var(--tf-border-soft); background: linear-gradient(135deg, rgba(58,31,82,.32), rgba(24,19,31,.78)); }
.tf2-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.tf2-feature-grid article { position: relative; padding: 30px; border: 1px solid var(--tf-border); border-radius: 12px; background: rgba(14,12,18,.56); }
.tf2-feature-number { color: var(--tf-purple-bright); font-family: "Archivo Black", sans-serif; font-size: .78rem; }
.tf2-feature-grid h3 { margin: 24px 0 10px; font-size: 1.35rem; }
.tf2-feature-grid p { min-height: 80px; color: var(--tf-secondary); font-size: .84rem; }
.tf2-feature-grid a { color: var(--tf-green-bright); font-size: .78rem; font-weight: 800; }

.tf2-batch-section { border-block: 1px solid rgba(82,209,124,.24); background: linear-gradient(125deg, #173020, #1a3b26 52%, #14291c); }
.tf2-batch-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 70px; align-items: center; padding-block: 78px; }
.tf2-batch-grid h2 { margin: 10px 0 0; font-size: clamp(2.2rem,4.5vw,4.6rem); }
.tf2-batch-grid h2 em { color: var(--tf-green-bright); font-style: normal; }
.tf2-batch-grid > div:last-child p { color: #c8ddce; }
.tf2-batch-grid .button { margin-top: 14px; }
.tf2-about-strip { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); gap: 70px; align-items: center; }
.tf2-about-strip h2 { margin: 10px 0; font-size: clamp(2rem,4vw,3.8rem); }
.tf2-about-strip p:not(.eyebrow) { color: var(--tf-secondary); }
.tf2-about-strip a { color: var(--tf-green-bright); font-size: .8rem; font-weight: 800; }
.tf2-maker-labels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.tf2-maker-labels span { padding: 15px; border: 1px solid var(--tf-border); border-radius: 8px; color: var(--tf-secondary); background: var(--tf-charcoal); font-size: .76rem; font-weight: 700; }

body.redesign-preview .product-grid { gap: 18px; }
body.redesign-preview .product-card {
  overflow: hidden;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  color: var(--tf-text);
  background: var(--tf-charcoal);
  box-shadow: none;
}
body.redesign-preview .product-card:hover { border-color: var(--tf-purple-bright); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
body.redesign-preview .product-card-image { aspect-ratio: 4/3; background: var(--tf-raised); }
body.redesign-preview .product-card-body { padding: 20px; }
body.redesign-preview .product-card h3 a { color: var(--tf-text); }
body.redesign-preview .product-card h3 a:hover { color: var(--tf-green-bright); }
body.redesign-preview .product-card .eyebrow { margin-bottom: 4px; color: var(--tf-purple-bright); }
body.redesign-preview .card-foot { margin-top: auto; padding-top: 18px; border-color: var(--tf-border-soft); }
body.redesign-preview .card-foot > div strong { color: var(--tf-text); }
body.redesign-preview .card-foot > div span { color: var(--tf-muted); }
body.redesign-preview .card-buy-row { margin-top: 12px; }
.tf2-capabilities { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 14px; }
.tf2-capabilities span { padding: 5px 8px; border: 1px solid rgba(147,102,230,.28); border-radius: 5px; color: #d7c6f7; background: rgba(117,70,200,.1); font-size: .62rem; font-weight: 750; letter-spacing: .02em; }

body.redesign-preview .page-hero { padding: 76px 0 64px; border-bottom: 1px solid var(--tf-border); color: var(--tf-text); background: radial-gradient(circle at 82% 18%, rgba(117,70,200,.22), transparent 31%), linear-gradient(130deg,#110e16,#1b1424); }
body.redesign-preview .page-hero::after { width: 300px; height: 300px; right: 6vw; top: -230px; border: 58px solid rgba(82,209,124,.12); }
body.redesign-preview .page-hero .eyebrow { color: var(--tf-green-bright); }
body.redesign-preview .page-hero h1 { color: var(--tf-text); font-size: clamp(2.8rem,5vw,5rem); }
body.redesign-preview .page-hero p:not(.eyebrow) { color: var(--tf-secondary); }
body.redesign-preview .tf2-about-hero { background: radial-gradient(circle at 82% 20%, rgba(82,209,124,.16), transparent 22%), radial-gradient(circle at 62% 100%, rgba(117,70,200,.26), transparent 38%), linear-gradient(130deg,#100d15,#1d1427); }
body.redesign-preview .tf2-about-hero h1 em { display: block; color: var(--tf-green); font-style: normal; }
body.redesign-preview .tf2-about-hero p:not(.eyebrow) { max-width: 850px; font-size: 1.12rem; }
body.redesign-preview .soft-section { border-block: 1px solid var(--tf-border-soft); background: var(--tf-charcoal); }
body.redesign-preview .empty { border-color: var(--tf-border); color: var(--tf-secondary); background: var(--tf-charcoal); }
body.redesign-preview .empty h1,
body.redesign-preview .empty h2,
body.redesign-preview .empty h3 { color: var(--tf-text); }

body.redesign-preview .filters,
body.redesign-preview .inline-filters,
body.redesign-preview .contact-card,
body.redesign-preview .contact-checklist,
body.redesign-preview .about-values article,
body.redesign-preview .configurator-panel,
body.redesign-preview .quote-request-card,
body.redesign-preview .special-filament,
body.redesign-preview .cart-item,
body.redesign-preview .cart-summary,
body.redesign-preview .checkout-card,
body.redesign-preview .checkout-summary {
  border-color: var(--tf-border);
  color: var(--tf-text);
  background: var(--tf-charcoal);
  box-shadow: var(--shadow-sm);
}
body.redesign-preview .filters { top: 112px; }
body.redesign-preview .filters h2,
body.redesign-preview .filters label,
body.redesign-preview .inline-filters label,
body.redesign-preview .form-grid label,
body.redesign-preview label { color: var(--tf-text); }
body.redesign-preview input,
body.redesign-preview select,
body.redesign-preview textarea {
  border-color: var(--tf-border);
  color: var(--tf-text);
  background: #100d15;
  color-scheme: dark;
}
body.redesign-preview input::placeholder,
body.redesign-preview textarea::placeholder { color: var(--tf-muted); }
body.redesign-preview input:focus,
body.redesign-preview select:focus,
body.redesign-preview textarea:focus { border-color: var(--tf-purple-bright); box-shadow: 0 0 0 3px rgba(147,102,230,.15); }
body.redesign-preview .results-head { color: var(--tf-secondary); }

body.redesign-preview .gallery { top: 112px; }
body.redesign-preview .gallery-main { border-color: var(--tf-border); background: var(--tf-raised); box-shadow: var(--shadow); }
body.redesign-preview .thumbs button { border-color: var(--tf-border); background: var(--tf-raised); }
body.redesign-preview .thumbs button:hover { border-color: var(--tf-green); }
body.redesign-preview .product-copy h1 { font-size: clamp(2.4rem,4vw,4.3rem); }
body.redesign-preview .product-copy .price { color: var(--tf-green-bright); }
body.redesign-preview .stock-pill { border-color: rgba(82,209,124,.2); color: var(--tf-green-bright); background: rgba(82,209,124,.09); }
body.redesign-preview .lede,
body.redesign-preview .rich-copy,
body.redesign-preview .variant { color: var(--tf-secondary); }
body.redesign-preview .product-facts { border-color: var(--tf-border); }
body.redesign-preview .product-facts > div { border-color: var(--tf-border-soft); color: var(--tf-text); background: var(--tf-raised); }
body.redesign-preview .product-facts span { color: var(--tf-muted); }
body.redesign-preview .product-facts strong { color: var(--tf-text); }
body.redesign-preview .callout { border-color: rgba(147,102,230,.28); background: rgba(117,70,200,.1); }
body.redesign-preview .callout p { color: var(--tf-secondary); }
body.redesign-preview .tier-list span { border-color: var(--tf-border); color: var(--tf-secondary); background: var(--tf-raised); }

body.redesign-preview .color-card { border-color: var(--tf-border); color: var(--tf-text); background: var(--tf-charcoal); box-shadow: none; }
body.redesign-preview .color-card:hover { border-color: var(--tf-purple-bright); }
body.redesign-preview .color-card small { color: var(--tf-secondary); }
body.redesign-preview .swatch { border-color: rgba(255,255,255,.16); }
body.redesign-preview .inline-filters { border: 1px solid var(--tf-border); border-radius: 12px; padding: 20px; }

body.redesign-preview .about-layout .prose p { color: var(--tf-secondary); }
body.redesign-preview .about-values article > span { color: var(--tf-green); }
body.redesign-preview .about-values p { color: var(--tf-secondary); }
body.redesign-preview .contact-checklist { background: linear-gradient(145deg, var(--tf-purple-deep), #21152d); }
body.redesign-preview .contact-checklist li { color: #d4ced9; }
body.redesign-preview .contact-checklist li span { color: var(--tf-green-bright); background: rgba(82,209,124,.1); }

body.redesign-preview .paint-canvas { border-color: var(--tf-border); background: var(--tf-raised); box-shadow: var(--shadow); }
body.redesign-preview .canvas-help { color: var(--tf-secondary); }
body.redesign-preview .paint-marker { border-color: rgba(255,255,255,.82); color: white; background: var(--tf-purple); }
body.redesign-preview .paint-marker.active { background: var(--tf-green); box-shadow: 0 0 0 5px rgba(82,209,124,.15); }
body.redesign-preview .part-summary-row,
body.redesign-preview .paint-color { border-color: var(--tf-border); color: var(--tf-text); background: var(--tf-charcoal); }
body.redesign-preview .part-summary-row:hover,
body.redesign-preview .part-summary-row.active,
body.redesign-preview .paint-color:hover,
body.redesign-preview .paint-color.selected { border-color: var(--tf-purple-bright); background: rgba(117,70,200,.12); }
body.redesign-preview .part-summary-row small,
body.redesign-preview .paint-color small,
body.redesign-preview .special-filament p,
body.redesign-preview .quote-request-card p { color: var(--tf-secondary); }
body.redesign-preview .palette-filters,
body.redesign-preview .material-lock { border-color: var(--tf-border-soft); }
body.redesign-preview .estimate-bar { border-color: rgba(82,209,124,.23); background: #142319; }
body.redesign-preview .estimate-bar strong { color: var(--tf-green-bright); }

body.redesign-preview .cart-item-copy p,
body.redesign-preview .cart-item-copy small,
body.redesign-preview .cart-item-price small,
body.redesign-preview .secure-note,
body.redesign-preview .payment-rule { color: var(--tf-secondary); }
body.redesign-preview .cart-item-image { background: var(--tf-raised); }
body.redesign-preview .cart-summary,
body.redesign-preview .checkout-summary { top: 112px; }
body.redesign-preview .checkout-step { color: #0e1711; background: var(--tf-green); }
body.redesign-preview .checkout-summary hr,
body.redesign-preview .checkout-total { border-color: var(--tf-border); }
body.redesign-preview .delivery-options label { border-color: var(--tf-border); background: var(--tf-raised); }
body.redesign-preview .delivery-options label:hover,
body.redesign-preview .delivery-options label:has(input:checked) { border-color: var(--tf-purple-bright); background: rgba(117,70,200,.12); }
body.redesign-preview .delivery-options small,
body.redesign-preview .meetup-panel p { color: var(--tf-secondary); }
body.redesign-preview .meetup-panel { border-color: rgba(82,209,124,.22); background: rgba(82,209,124,.07); }
body.redesign-preview .flash { border-color: var(--tf-border); color: var(--tf-text); background: var(--tf-raised); }
body.redesign-preview .flash.error { border-color: rgba(239,107,107,.35); color: #ffd0d0; background: #2d171b; }
body.redesign-preview .flash.success { border-color: rgba(82,209,124,.35); color: #cffff0; background: #14251a; }

.tf2-footer { border-top: 1px solid var(--tf-border); background: #0b090e; }
.tf2-footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3,minmax(130px,.65fr)); gap: 50px; padding-block: 66px 50px; }
.tf2-footer-grid > div { display: grid; align-content: start; gap: 9px; }
.tf2-footer-grid > div > strong { margin-bottom: 8px; color: var(--tf-text); font-size: .78rem; }
.tf2-footer-grid a { color: var(--tf-secondary); font-size: .76rem; text-decoration: none; }
.tf2-footer-grid a:hover { color: var(--tf-green-bright); }
.tf2-footer-grid p { margin: 0; color: var(--tf-muted); font-size: .73rem; }
.tf2-footer-brand { display: flex !important; flex-direction: row; gap: 16px !important; }
.tf2-footer-brand strong { display: block; margin-bottom: 5px; font-family: "Archivo Black", sans-serif; }
.tf2-footer-brand p { max-width: 330px; }
.tf2-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid var(--tf-border-soft); color: var(--tf-muted); font-size: .67rem; }

.tf2-music-hero { overflow: hidden; border-bottom: 1px solid var(--tf-border); background: radial-gradient(circle at 78% 30%,rgba(117,70,200,.3),transparent 27%),radial-gradient(circle at 24% 100%,rgba(82,209,124,.13),transparent 31%),linear-gradient(135deg,#0e0c12,#1d1427); }
.tf2-music-hero-grid { min-height: 590px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(320px,.92fr); align-items: center; gap: 70px; padding-block: 86px; }
.tf2-music-hero h1 { max-width: 850px; margin: 12px 0 22px; font-size: clamp(3rem,6vw,6.2rem); line-height: .94; }
.tf2-music-hero p:not(.eyebrow) { max-width: 720px; color: var(--tf-secondary); font-size: 1.04rem; }
.tf2-music-signal { height: 340px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 40px; border: 1px solid rgba(147,102,230,.28); border-radius: 20px; background: linear-gradient(145deg,rgba(33,24,42,.8),rgba(14,12,18,.9)); box-shadow: 24px 24px 0 rgba(58,31,82,.25),var(--shadow); }
.tf2-music-signal span { width: 18px; min-height: 34px; border-radius: 999px; background: linear-gradient(180deg,var(--tf-green-bright),var(--tf-purple-bright)); box-shadow: 0 0 22px rgba(82,209,124,.12); }
.tf2-music-signal span:nth-child(1),.tf2-music-signal span:nth-child(9) { height: 20%; }
.tf2-music-signal span:nth-child(2),.tf2-music-signal span:nth-child(8) { height: 40%; }
.tf2-music-signal span:nth-child(3),.tf2-music-signal span:nth-child(7) { height: 68%; }
.tf2-music-signal span:nth-child(4),.tf2-music-signal span:nth-child(6) { height: 88%; }
.tf2-music-signal span:nth-child(5) { height: 100%; }
.tf2-music-signal.compact { height: 230px; max-width: 480px; padding: 28px; box-shadow: 15px 15px 0 rgba(58,31,82,.24),var(--shadow-sm); }
.tf2-music-signal.compact span { width: 13px; }
.tf2-music-filters { grid-template-columns: minmax(260px,1.4fr) minmax(220px,.8fr) auto auto; margin-bottom: 30px; }
.tf2-music-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.tf2-music-card { position: relative; overflow: hidden; border: 1px solid var(--tf-border); border-radius: 13px; background: var(--tf-charcoal); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.tf2-music-card:hover { border-color: var(--tf-purple-bright); box-shadow: var(--shadow-sm); transform: translateY(-5px); }
.tf2-music-cover { display: block; aspect-ratio: 1; overflow: hidden; background: var(--tf-raised); }
.tf2-music-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tf2-music-card:hover .tf2-music-cover img { transform: scale(1.035); }
.tf2-music-placeholder { width: 100%; height: 100%; min-height: 220px; display: grid; place-content: center; gap: 8px; text-align: center; background: radial-gradient(circle at 50% 40%,rgba(82,209,124,.18),transparent 20%),repeating-radial-gradient(circle at 50% 50%,transparent 0 25px,rgba(147,102,230,.13) 26px 27px),linear-gradient(145deg,#21182a,#0e0c12); }
.tf2-music-placeholder span { color: var(--tf-green-bright); font-family: "Archivo Black",sans-serif; font-size: 3.5rem; line-height: 1; }
.tf2-music-placeholder strong { color: var(--tf-secondary); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.tf2-music-card-copy { padding: 22px; }
.tf2-music-card-copy h3 { margin: 7px 0 8px; font-size: 1.45rem; }
.tf2-music-card-copy h3 a { text-decoration: none; }
.tf2-music-card-copy h3 a:hover { color: var(--tf-green-bright); }
.tf2-music-byline { margin: 0; color: var(--tf-secondary); font-size: .8rem; }
.tf2-music-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.tf2-music-meta span { padding: 5px 8px; border: 1px solid var(--tf-border); border-radius: 999px; color: var(--tf-secondary); background: var(--tf-raised); font-size: .66rem; font-weight: 700; }
.tf2-music-card-actions { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tf-border-soft); }
.tf2-music-card-actions a { color: var(--tf-green-bright); font-size: .75rem; font-weight: 800; text-decoration: none; }
.tf2-music-featured { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 7px 10px; border-radius: 999px; color: #0e1711; background: var(--tf-green-bright); font-size: .64rem; font-weight: 850; text-transform: uppercase; }
.tf2-music-empty { min-height: 360px; display: grid; grid-template-columns: minmax(240px,.72fr) minmax(0,1fr); align-items: center; gap: 46px; padding: 34px; border: 1px solid var(--tf-border); border-radius: 15px; background: var(--tf-charcoal); }
.tf2-music-empty > .tf2-music-placeholder { min-height: 290px; border-radius: 10px; }
.tf2-music-empty h2 { margin: 10px 0; font-size: clamp(2rem,4vw,3.5rem); }
.tf2-music-empty p:not(.eyebrow) { max-width: 660px; color: var(--tf-secondary); }
.tf2-music-detail-hero { min-height: 70vh; display: grid; align-items: center; padding-block: 82px; background: radial-gradient(circle at 15% 30%,rgba(82,209,124,.1),transparent 24%),linear-gradient(135deg,#0e0c12,#1c1424); }
.tf2-music-detail-grid { display: grid; grid-template-columns: minmax(300px,.82fr) minmax(0,1.18fr); align-items: center; gap: 70px; }
.tf2-music-cover.large { border: 1px solid var(--tf-border); border-radius: 16px; box-shadow: 22px 22px 0 rgba(58,31,82,.25),var(--shadow); }
.tf2-music-detail-grid h1 { margin: 10px 0 14px; font-size: clamp(3rem,6vw,6rem); line-height: .95; }
.tf2-music-description { max-width: 760px; margin: 24px 0; color: var(--tf-secondary); font-size: 1rem; line-height: 1.8; }
.tf2-music-promo { border-block: 1px solid rgba(147,102,230,.2); background: radial-gradient(circle at 20% 50%,rgba(117,70,200,.2),transparent 24%),linear-gradient(130deg,#15101b,#21172b); }
.tf2-music-promo-grid { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); align-items: center; gap: 70px; padding-block: 72px; }
.tf2-music-promo h2 { margin: 10px 0 14px; font-size: clamp(2.3rem,5vw,4.6rem); }
.tf2-music-promo p:not(.eyebrow) { max-width: 680px; color: var(--tf-secondary); }
.tf2-music-closing { margin-top: 20px; }

@media (max-width: 1100px) {
  body.redesign-preview .tf2-nav a { padding-inline: 8px; font-size: .72rem; }
  .tf2-hero-grid { grid-template-columns: minmax(0,1fr) minmax(330px,.72fr); gap: 46px; min-height: 620px; }
  .tf2-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tf2-category-card { display: grid; grid-template-columns: 42% 58%; }
  .tf2-category-image { aspect-ratio: auto; min-height: 240px; }
  .tf2-category-card p { min-height: 0; }
  .tf2-footer-grid { grid-template-columns: 1.4fr repeat(2,1fr); }
  .tf2-footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 900px) {
  body.redesign-preview .shell { width: min(100% - 32px, 1180px); }
  body.redesign-preview .tf2-site-header { position: relative; }
  body.redesign-preview .tf2-nav { border-color: var(--tf-border); background: #100d15; }
  .tf2-hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 72px; }
  .tf2-hero-copy h1 { max-width: 780px; }
  .tf2-hero-visual { width: min(620px, 90%); margin-inline: auto; }
  .tf2-hero-photo { aspect-ratio: 1.18; }
  .tf2-feature-grid { grid-template-columns: 1fr; }
  .tf2-feature-grid p { min-height: 0; }
  .tf2-batch-grid,
  .tf2-about-strip { grid-template-columns: 1fr; gap: 28px; }
  body.redesign-preview .filters,
  body.redesign-preview .gallery,
  body.redesign-preview .cart-summary,
  body.redesign-preview .checkout-summary { position: static; }
  .tf2-footer-grid { grid-template-columns: repeat(2,1fr); }
  .tf2-music-hero-grid,.tf2-music-detail-grid,.tf2-music-promo-grid { grid-template-columns: 1fr; gap: 40px; }
  .tf2-music-signal { width: min(620px,100%); margin-inline: auto; }
  .tf2-music-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tf2-music-filters { grid-template-columns: 1fr 1fr; }
  .tf2-footer-brand { grid-column: 1/-1; }
  .tf2-footer-grid > div:last-child { grid-column: auto; }
}

@media (max-width: 680px) {
  body.redesign-preview .shell { width: min(100% - 24px, 1180px); }
  .tf2-preview-bar .shell { align-items: flex-start; flex-direction: column; gap: 3px; padding-block: 8px; }
  .tf2-hero-grid { gap: 38px; padding-block: 54px; }
  .tf2-hero-copy h1 { font-size: clamp(2.8rem,15vw,4.4rem); }
  .tf2-hero-copy > p:not(.eyebrow) { font-size: .94rem; }
  .tf2-hero-notes { grid-template-columns: 1fr; }
  .tf2-hero-visual { width: 100%; }
  .tf2-hero-photo { aspect-ratio: .95; box-shadow: 12px 12px 0 rgba(58,31,82,.34), var(--shadow); }
  .tf2-hero-label { right: 10px; bottom: 18px; }
  .tf2-section { padding-block: 64px; }
  .tf2-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 24px; }
  .tf2-category-grid { grid-template-columns: 1fr; }
  .tf2-category-card { grid-template-columns: 38% 62%; }
  .tf2-category-image { min-height: 210px; }
  .tf2-category-card > div:last-child { padding: 16px; }
  .tf2-category-card p { font-size: .73rem; }
  .tf2-maker-labels { grid-template-columns: 1fr; }
  .tf2-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .tf2-footer-brand,
  .tf2-footer-grid > div:last-child { grid-column: auto; }
  .tf2-footer-bottom { flex-direction: column; }
  body.redesign-preview .page-hero { padding-block: 58px 48px; }
  body.redesign-preview .section { padding-block: 58px; }
  body.redesign-preview .product-detail { gap: 34px; }
  .tf2-music-hero-grid { min-height: 0; padding-block: 58px; }
  .tf2-music-hero h1,.tf2-music-detail-grid h1 { font-size: clamp(2.75rem,14vw,4.3rem); }
  .tf2-music-signal { height: 250px; gap: 8px; padding: 28px 18px; }
  .tf2-music-signal span { width: 12px; }
  .tf2-music-grid,.tf2-music-filters,.tf2-music-empty { grid-template-columns: 1fr; }
  .tf2-music-empty { gap: 25px; padding: 20px; }
  .tf2-music-detail-hero { padding-block: 54px; }
  .tf2-music-promo-grid { padding-block: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  body.redesign-preview *, body.redesign-preview *::before, body.redesign-preview *::after { scroll-behavior: auto !important; transition: none !important; }
}