*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 :root {
     --bg: #F4F4F6;
     --surface: #FFF;
     --surface2: #F0F0F4;
     --border: #E2E2EA;
     --accent: #0057FF;
     --accentL: #EEF3FF;
     --accent2: #E5003A;
     --accent2L: #FFF0F3;
     --gold: #C8860A;
     --goldL: #FFF8EC;
     --text: #111118;
     --textM: #3A3A4A;
     --muted: #8888A0;
     --tp: #00B67A;
     --sh: rgba(0, 0, 20, .06);
     --shM: rgba(0, 0, 20, .10);
 }

 body {
     font-family: 'Barlow', sans-serif;
     background: var(--bg);
     color: var(--text);
     min-height: 100vh;
     overflow-x: hidden
 }

 /* ANNOUNCEMENT BAR */
 .announce-bar {
     background: linear-gradient(90deg, #E5003A 0%, #B8002E 100%);
     color: #fff;
     text-align: center;
     padding: .45rem 1rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .82rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .6rem;
     flex-wrap: wrap
 }

 .announce-bar .ab-pill {
     background: rgba(255, 255, 255, .2);
     border: 1px solid rgba(255, 255, 255, .35);
     border-radius: 4px;
     padding: 1px 7px;
     font-size: .72rem;
     letter-spacing: .08em
 }

 .announce-bar .ab-highlight {
     color: #FFD600;
     font-size: .9rem
 }

 /* BOGO BADGE on kit cards */
 .bogo-card-badge {
     position: absolute;
     bottom: 8px;
     right: 8px;
     background: linear-gradient(135deg, #E5003A, #B8002E);
     color: #fff;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .56rem;
     font-weight: 800;
     letter-spacing: .06em;
     text-transform: uppercase;
     padding: 3px 7px;
     border-radius: 4px;
     box-shadow: 0 2px 6px rgba(229, 0, 58, .35)
 }

 /* BOGO BANNER on product page */
 .bogo-banner {
     display: flex;
     align-items: center;
     gap: .7rem;
     background: linear-gradient(135deg, #FFF0F3, #FFE0E8);
     border: 1.5px solid rgba(229, 0, 58, .25);
     border-radius: 10px;
     padding: .75rem 1rem;
     margin-bottom: 1.1rem
 }

 .bogo-banner-icon {
     font-size: 1.4rem;
     flex-shrink: 0
 }

 .bogo-banner-text {
     flex: 1
 }

 .bogo-banner-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .95rem;
     font-weight: 800;
     color: #B8002E;
     text-transform: uppercase;
     letter-spacing: .02em
 }

 .bogo-banner-sub {
     font-size: .74rem;
     color: #3A3A4A;
     margin-top: .1rem;
     line-height: 1.4
 }

 .bogo-banner-tag {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .72rem;
     font-weight: 800;
     background: #E5003A;
     color: #fff;
     padding: 3px 9px;
     border-radius: 4px;
     flex-shrink: 0;
     white-space: nowrap
 }

 /* UPSELL BOGO upgrade */
 .upsell-bogo-header {
     background: linear-gradient(135deg, #E5003A, #B8002E);
     border-radius: 10px 10px 0 0;
     padding: .6rem 1rem;
     display: flex;
     align-items: center;
     gap: .5rem
 }

 .upsell-bogo-header-text {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .85rem;
     font-weight: 800;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: .05em
 }

 .upsell-bogo-header-sub {
     font-size: .68rem;
     color: rgba(255, 255, 255, .8);
     margin-top: .05rem
 }

 .upsell-bogo-tag {
     margin-left: auto;
     background: #FFD600;
     color: #7A0000;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .72rem;
     font-weight: 900;
     padding: 2px 8px;
     border-radius: 4px;
     white-space: nowrap;
     flex-shrink: 0
 }

 .upsell-section {
     padding: .8rem 1.1rem;
     border-top: 1px solid var(--border);
     background: var(--surface2);
     border-radius: 0 0 10px 10px
 }

 /* HEADER */
 header {
     position: sticky;
     top: 0;
     z-index: 100;
     background: rgba(244, 244, 246, .97);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--border);
     padding: 0 1rem;
     display: flex;
     align-items: center;
     gap: .75rem;
     height: 56px;
     box-shadow: 0 1px 0 var(--border)
 }

 .logo {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.6rem;
     font-weight: 900;
     color: var(--text);
     cursor: pointer;
     letter-spacing: -.5px;
     flex-shrink: 0;
     line-height: 1
 }

 .logo span {
     color: var(--accent)
 }

 .badge-off {
     font-size: .5rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     background: var(--gold);
     color: #fff;
     padding: 2px 6px;
     border-radius: 3px;
     flex-shrink: 0
 }

 .hdr-right {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: .5rem
 }

 .icon-btn {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     background: var(--surface);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--muted)
 }

 .cart-btn {
     position: relative;
     cursor: pointer;
     background: var(--accent);
     border: none;
     border-radius: 8px;
     padding: .4rem .8rem;
     display: flex;
     align-items: center;
     gap: .4rem;
     font-family: 'Barlow', sans-serif;
     font-size: .82rem;
     font-weight: 700;
     color: #fff;
     flex-shrink: 0
 }

 .cart-badge {
     background: #fff;
     color: var(--accent);
     font-size: .6rem;
     font-weight: 800;
     min-width: 16px;
     height: 16px;
     border-radius: 999px;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 0 3px;
     position: absolute;
     top: -5px;
     right: -5px
 }

 .cart-badge.show {
     display: flex
 }

 .back-btn {
     display: flex;
     align-items: center;
     gap: .3rem;
     background: none;
     border: 1px solid var(--border);
     border-radius: 7px;
     padding: .35rem .7rem;
     color: var(--muted);
     font-family: 'Barlow', sans-serif;
     font-size: .78rem;
     cursor: pointer;
     flex-shrink: 0
 }

 /* SEARCH */
 .search-bar {
     padding: .6rem 1rem;
     border-bottom: 1px solid var(--border);
     background: var(--surface);
     position: relative;
     z-index: 90;
     box-shadow: 0 2px 8px var(--sh)
 }

 .search-inner {
     position: relative
 }

 .search-input {
     width: 100%;
     padding: .55rem 2.2rem;
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 8px;
     color: var(--text);
     font-family: 'Barlow', sans-serif;
     font-size: .9rem;
     outline: none
 }

 .search-icon {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     pointer-events: none
 }

 .search-clear {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 1rem;
     line-height: 1;
     display: none
 }

 .suggestions {
     display: none;
     position: absolute;
     top: 100%;
     left: 1rem;
     right: 1rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     z-index: 200;
     box-shadow: 0 8px 30px var(--shM)
 }

 .suggestions.show {
     display: block
 }

 .sug-item {
     padding: .6rem 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: .65rem;
     font-size: .86rem;
     border-bottom: 1px solid var(--border)
 }

 .sug-item:hover {
     background: var(--surface2)
 }

 .sug-thumb {
     width: 36px;
     height: 36px;
     border-radius: 6px;
     background: var(--surface2);
     border: 1px solid var(--border);
     overflow: hidden;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .sug-thumb img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 4px
 }

 .sug-name {
     font-weight: 700;
     color: var(--text)
 }

 .sug-sub {
     font-size: .7rem;
     color: var(--muted)
 }

 /* FILTERS */
 .flag-btn {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .2rem;
     background: var(--surface2);
     border: 1.5px solid var(--border);
     border-radius: 10px;
     padding: .4rem .35rem .35rem;
     cursor: pointer;
     transition: all .18s;
     min-width: 52px;
     -webkit-tap-highlight-color: transparent
 }

 .flag-btn:hover {
     border-color: var(--accent);
     background: var(--accentL)
 }

 .flag-btn.active {
     border-color: var(--accent);
     background: var(--accentL);
     box-shadow: 0 2px 8px rgba(0, 87, 255, .15)
 }

 .flag-btn .fb-flag {
     font-size: 1.5rem;
     line-height: 1
 }

 .flag-btn .fb-code {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .58rem;
     font-weight: 700;
     letter-spacing: .04em;
     color: var(--muted);
     text-transform: uppercase
 }

 .flag-btn.active .fb-code {
     color: var(--accent)
 }

 .flag-all {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .2rem;
     background: var(--accent);
     border: 1.5px solid var(--accent);
     border-radius: 10px;
     padding: .4rem .5rem .35rem;
     cursor: pointer;
     min-width: 52px;
     -webkit-tap-highlight-color: transparent
 }

 .flag-all .fb-flag {
     font-size: 1.1rem;
     line-height: 1;
     color: #fff
 }

 .flag-all .fb-code {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .58rem;
     font-weight: 700;
     color: rgba(255, 255, 255, .85);
     text-transform: uppercase
 }

 .flag-all.inactive {
     background: var(--surface2);
     border-color: var(--border)
 }

 .flag-all.inactive .fb-flag {
     color: var(--textM)
 }

 .flag-all.inactive .fb-code {
     color: var(--muted)
 }

 .results-count {
     font-size: .7rem;
     color: var(--muted)
 }

 /* HERO */
 .hero {
     padding: 2.5rem 1.2rem 2rem;
     text-align: center;
     background: linear-gradient(180deg, #EBF3FF 0%, var(--bg) 100%);
     border-bottom: 1px solid var(--border)
 }

 .hero-eye {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: .7rem
 }

 .hero h1 {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: clamp(2.6rem, 7vw, 4.5rem);
     font-weight: 900;
     line-height: .9;
     letter-spacing: -1px;
     text-transform: uppercase;
     margin-bottom: .8rem;
     color: var(--text)
 }

 .hero h1 em {
     font-style: italic;
     color: var(--accent)
 }

 .hero-p {
     color: var(--muted);
     font-size: .9rem;
     max-width: 340px;
     margin: 0 auto 1.2rem;
     line-height: 1.6
 }

 .tp-bar {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: .35rem .85rem;
     margin-bottom: 1.4rem;
     box-shadow: 0 1px 4px var(--sh)
 }

 .tp-logo {
     width: 15px;
     height: 15px;
     background: var(--tp);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .tp-name {
     font-size: .7rem;
     font-weight: 800;
     color: var(--text)
 }

 .tp-ex {
     font-size: .7rem;
     font-weight: 700;
     color: var(--tp)
 }

 .tp-ct {
     font-size: .68rem;
     color: var(--muted)
 }

 .tp-stars {
     display: flex;
     gap: 1px
 }

 .tp-star {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 1px
 }

 .hero-cta {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     background: var(--accent);
     color: #fff;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .92rem;
     font-weight: 700;
     letter-spacing: .05em;
     text-transform: uppercase;
     padding: .65rem 1.5rem;
     border-radius: 8px;
     border: none;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(0, 87, 255, .25)
 }

 /* COLLECTION GRID */
 .collection {
     padding: 1.2rem 1rem;
     max-width: 1400px;
     margin: 0 auto
 }

 .section-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.4rem;
     font-weight: 800;
     letter-spacing: -.4px;
     text-transform: uppercase;
     margin-bottom: 1.1rem;
     color: var(--text)
 }

 .section-title span {
     color: var(--accent)
 }

 .kit-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: .75rem
 }

 @media(min-width:540px) {
     .kit-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(min-width:768px) {
     .kit-grid {
         grid-template-columns: repeat(4, 1fr);
         gap: 1rem
     }
 }

 @media(min-width:1024px) {
     .kit-grid {
         grid-template-columns: repeat(5, 1fr)
     }
 }

 .kit-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 12px;
     overflow: hidden;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     box-shadow: 0 1px 3px var(--sh);
     transition: box-shadow .2s, transform .2s
 }

 .kit-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 20px var(--shM);
     border-color: #ccc
 }

 .kit-img-wrap {
     position: relative;
     aspect-ratio: 1/1;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-bottom: 1px solid var(--border)
 }

 .kit-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 10%;
     transition: transform .3s
 }

 .kit-card:hover .kit-img-wrap img {
     transform: scale(1.06)
 }

 .kit-type-badge {
     position: absolute;
     top: 8px;
     left: 8px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .56rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 2px 6px;
     border-radius: 4px
 }

 .badge-home {
     background: var(--accentL);
     color: var(--accent);
     border: 1px solid rgba(0, 87, 255, .18)
 }

 .badge-away {
     background: var(--accent2L);
     color: var(--accent2);
     border: 1px solid rgba(229, 0, 58, .18)
 }

 .kit-body {
     padding: .65rem .7rem .8rem
 }

 .kit-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .95rem;
     font-weight: 800;
     letter-spacing: -.2px;
     margin-bottom: .06rem;
     color: var(--text)
 }

 .kit-stars {
     display: flex;
     align-items: center;
     gap: .3rem;
     margin-bottom: .45rem
 }

 .kit-rating {
     font-size: .6rem;
     color: var(--muted)
 }

 .kit-foot {
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .kit-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.1rem;
     font-weight: 900;
     color: var(--text)
 }

 .kit-link {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .68rem;
     font-weight: 700;
     color: var(--accent)
 }

 .no-results {
     grid-column: 1/-1;
     text-align: center;
     padding: 3rem 0;
     color: var(--muted)
 }

 /* PRODUCT PAGE */
 .product-page {
     background: var(--bg);
     min-height: 100vh;
     padding-bottom: 100px
 }

 @media(min-width:700px) {
     .product-page {
         padding-bottom: 2rem
     }
 }

 .breadcrumb {
     padding: .5rem .75rem;
     border-bottom: 1px solid var(--border);
     background: var(--surface);
     display: flex;
     align-items: center;
     gap: .5rem;
     flex-wrap: nowrap
 }

 .breadcrumb a {
     color: var(--accent);
     font-weight: 700;
     cursor: pointer;
     font-size: .75rem;
     flex-shrink: 0
 }

 .breadcrumb-sep {
     color: var(--border);
     font-size: .8rem;
     flex-shrink: 0
 }

 .breadcrumb-current {
     font-size: .75rem;
     font-weight: 700;
     color: var(--text);
     flex-shrink: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 160px
 }

 .prod-search-wrap {
     flex: 1;
     position: relative;
     min-width: 0
 }

 .prod-search-input {
     width: 100%;
     padding: .38rem .9rem .38rem 2rem;
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 7px;
     color: var(--text);
     font-family: 'Barlow', sans-serif;
     font-size: .8rem;
     outline: none;
     transition: border-color .15s
 }

 .prod-search-input:focus {
     border-color: var(--accent)
 }

 .prod-search-icon {
     position: absolute;
     left: 7px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     pointer-events: none
 }

 .prod-search-dropdown {
     display: none;
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
     right: 0;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     z-index: 300;
     box-shadow: 0 8px 30px rgba(0, 0, 20, .12)
 }

 .prod-search-dropdown.show {
     display: block
 }

 .prod-sug-item {
     padding: .55rem .85rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: .6rem;
     font-size: .84rem;
     border-bottom: 1px solid var(--border)
 }

 .prod-sug-item:last-child {
     border-bottom: none
 }

 .prod-sug-item:hover {
     background: var(--surface2)
 }

 .prod-sug-thumb {
     width: 32px;
     height: 32px;
     border-radius: 5px;
     background: #fff;
     border: 1px solid var(--border);
     overflow: hidden;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .prod-sug-thumb img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 3px
 }

 .prod-sug-name {
     font-weight: 700;
     color: var(--text);
     font-size: .8rem
 }

 .prod-sug-type {
     font-size: .66rem;
     color: var(--muted)
 }

 .product-visual {
     background: #fff;
     aspect-ratio: 1/.9;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     border-bottom: 1px solid var(--border)
 }

 .product-visual img {
     width: 65%;
     height: 65%;
     object-fit: contain;
 }

 .prod-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .62rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 3px 8px;
     border-radius: 4px
 }

 .prod-brand {
     position: absolute;
     top: 12px;
     right: 12px;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(6px);
     border-radius: 6px;
     padding: .28rem .6rem;
     font-size: .62rem;
     color: var(--muted);
     font-weight: 600;
     border: 1px solid var(--border)
 }

 .prod-colors {
     position: absolute;
     bottom: 12px;
     right: 12px;
     display: flex;
     gap: 4px
 }

 .color-dot {
     width: 17px;
     height: 17px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, .9);
     box-shadow: 0 1px 3px var(--shM)
 }

 .product-info {
     padding: 1.1rem 1rem
 }

 .pill-row {
     display: flex;
     gap: .4rem;
     margin-bottom: .8rem;
     flex-wrap: wrap
 }

 .pill {
     font-size: .6rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 3px 8px;
     border-radius: 4px;
     border: 1px solid
 }

 .pill-conf {
     color: var(--muted);
     background: var(--surface2);
     border-color: var(--border)
 }

 .pill-wc {
     color: var(--gold);
     background: var(--goldL);
     border-color: rgba(200, 134, 10, .22)
 }

 .pill-auth {
     color: var(--accent);
     background: var(--accentL);
     border-color: rgba(0, 87, 255, .18)
 }

 .prod-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.2rem;
     font-weight: 900;
     letter-spacing: -.5px;
     text-transform: uppercase;
     line-height: .9;
     margin-bottom: .3rem;
     color: var(--text)
 }

 .prod-sub {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .95rem;
     font-weight: 600;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .04em;
     margin-bottom: 1rem
 }

 .price-row {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.1rem;
     flex-wrap: wrap
 }

 .prod-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.2rem;
     font-weight: 900;
     line-height: 1;
     color: var(--text)
 }

 .prod-tp {
     display: flex;
     flex-direction: column;
     gap: .12rem
 }

 .prod-tp-stars {
     display: flex;
     align-items: center;
     gap: .35rem
 }

 .prod-tp-val {
     font-size: .76rem;
     font-weight: 700;
     color: var(--tp)
 }

 .prod-tp-ct {
     display: flex;
     align-items: center;
     gap: .22rem
 }

 .tp-dot {
     width: 11px;
     height: 11px;
     background: var(--tp);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .prod-tp-txt {
     font-size: .65rem;
     color: var(--muted)
 }

 .size-section {
     margin-bottom: 1.1rem
 }

 .size-head {
     display: flex;
     justify-content: space-between;
     margin-bottom: .5rem
 }

 .size-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .68rem;
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--muted)
 }

 .size-guide {
     font-size: .66rem;
     color: var(--accent);
     cursor: pointer;
     font-weight: 600
 }

 .size-grid {
     display: flex;
     gap: .4rem;
     flex-wrap: wrap
 }

 .size-btn {
     padding: .38rem .8rem;
     border-radius: 7px;
     border: 1.5px solid var(--border);
     background: var(--surface2);
     font-weight: 700;
     font-size: .8rem;
     color: var(--textM);
     cursor: pointer;
     min-width: 42px;
     text-align: center;
     transition: all .15s;
     font-family: 'Barlow', sans-serif
 }

 .size-btn.active {
     border-color: var(--accent);
     background: var(--accentL);
     color: var(--accent)
 }

 .trust-badges {
     display: flex;
     gap: .4rem;
     flex-wrap: wrap;
     margin-bottom: 1.1rem
 }

 .trust-badge {
     display: flex;
     align-items: center;
     gap: .25rem;
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 6px;
     padding: .25rem .55rem;
     font-size: .62rem;
     color: var(--textM);
     font-weight: 600
 }

 .tabs {
     display: flex;
     gap: .4rem;
     margin-bottom: 0;
     padding: .2rem;
     background: var(--surface2);
     border-radius: 10px;
     border: 1px solid var(--border)
 }

 .tab-btn {
     flex: 1;
     background: none;
     border: none;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--muted);
     padding: .55rem .3rem;
     border-radius: 7px;
     cursor: pointer;
     transition: all .18s;
     white-space: nowrap
 }

 .tab-btn.active {
     background: #fff;
     color: var(--accent);
     box-shadow: 0 1px 4px rgba(0, 0, 20, .10)
 }

 .tab-wrap {
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     margin-top: .75rem
 }

 .tab-content {
     font-size: .84rem;
     color: var(--textM);
     line-height: 1.7;
     padding: 1.1rem 1.1rem
 }

 .feature-list {
     list-style: none;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: .4rem
 }

 .feature-list li {
     display: flex;
     align-items: center;
     gap: .4rem
 }

 .feature-list li::before {
     content: "✓";
     color: var(--tp);
     flex-shrink: 0
 }

 .delivery-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: .6rem .8rem;
     background: var(--surface2);
     border-radius: 8px;
     border: 1px solid var(--border);
     margin-bottom: .6rem
 }

 .delivery-name {
     font-weight: 600;
     color: var(--text);
     font-size: .8rem
 }

 .delivery-time {
     font-size: .68rem;
     color: var(--muted)
 }

 .delivery-price {
     font-weight: 700;
     color: var(--accent);
     font-size: .8rem
 }

 /* TRUSTPILOT SECTION */
 .tp-section {
     border-top: 1px solid var(--border);
     padding-top: 2rem;
     margin-top: 1.5rem
 }

 .tp-section-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.3rem;
     flex-wrap: wrap;
     gap: .6rem
 }

 .tp-wordmark {
     display: flex;
     align-items: center;
     gap: .3rem
 }

 .tp-wordmark-icon {
     width: 20px;
     height: 20px;
     background: var(--tp);
     border-radius: 3px;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .tp-wordmark-text {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.05rem;
     font-weight: 800;
     color: var(--text);
     letter-spacing: -.2px
 }

 .tp-verified {
     font-size: .74rem;
     color: var(--muted)
 }

 .tp-see-all {
     font-size: .72rem;
     color: var(--tp);
     font-weight: 700;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: .2rem
 }

 .tp-summary {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 1.1rem;
     margin-bottom: 1.2rem;
     display: flex;
     gap: .8rem;
     align-items: center;
     flex-wrap: wrap
 }

 .tp-score-big {
     text-align: center;
     flex-shrink: 0
 }

 .tp-score-num {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.8rem;
     font-weight: 900;
     color: var(--text);
     line-height: 1
 }

 .tp-score-label {
     font-size: .68rem;
     font-weight: 700;
     color: var(--tp);
     margin-top: .25rem
 }

 .tp-divider {
     width: 1px;
     height: 56px;
     background: var(--border);
     flex-shrink: 0
 }

 .tp-bars {
     flex: 1;
     min-width: 130px;
     display: flex;
     flex-direction: column;
     gap: .28rem
 }

 .tp-bar-row {
     display: flex;
     align-items: center;
     gap: .4rem
 }

 .tp-bar-num {
     font-size: .64rem;
     color: var(--muted);
     width: 8px;
     text-align: right;
     flex-shrink: 0
 }

 .tp-bar-track {
     flex: 1;
     height: 5px;
     background: var(--border);
     border-radius: 999px;
     overflow: hidden
 }

 .tp-bar-fill {
     height: 100%;
     border-radius: 999px
 }

 .tp-bar-pct {
     font-size: .6rem;
     color: var(--muted);
     width: 24px;
     flex-shrink: 0
 }

 .tp-count {
     text-align: center;
     flex-shrink: 0
 }

 .tp-count-num {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.5rem;
     font-weight: 900;
     color: var(--text);
     line-height: 1
 }

 .tp-count-lbl {
     font-size: .68rem;
     color: var(--muted);
     margin-top: .15rem
 }

 .tp-verified-dot {
     display: flex;
     align-items: center;
     gap: .25rem;
     margin-top: .4rem;
     justify-content: center
 }

 .tp-v-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--tp)
 }

 .tp-v-txt {
     font-size: .6rem;
     color: var(--tp);
     font-weight: 700
 }

 .reviews-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: .8rem
 }

 @media(min-width:700px) {
     .reviews-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 .review-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: .9rem;
     display: flex;
     flex-direction: column;
     gap: .4rem;
     box-shadow: 0 1px 3px var(--sh)
 }

 .review-title {
     font-weight: 700;
     font-size: .82rem;
     color: var(--text);
     line-height: 1.3
 }

 .review-body {
     font-size: .76rem;
     color: var(--textM);
     line-height: 1.6;
     flex: 1
 }

 .review-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: .5rem;
     border-top: 1px solid var(--border)
 }

 .review-author {
     display: flex;
     align-items: center;
     gap: .35rem
 }

 .review-avatar {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .65rem;
     font-weight: 800;
     color: #fff;
     flex-shrink: 0
 }

 .review-name {
     font-size: .68rem;
     font-weight: 700;
     color: var(--text);
     line-height: 1
 }

 .review-date {
     font-size: .6rem;
     color: var(--muted)
 }

 .review-check {
     display: flex;
     align-items: center;
     gap: .18rem
 }

 .review-check-txt {
     font-size: .58rem;
     color: var(--tp);
     font-weight: 700
 }

 .tp-footer {
     margin-top: .9rem;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .35rem
 }

 .tp-footer-txt {
     font-size: .68rem;
     color: var(--muted)
 }

 .tp-footer-logo {
     display: flex;
     align-items: center;
     gap: .2rem
 }

 .tp-footer-icon {
     width: 13px;
     height: 13px;
     background: var(--tp);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .tp-footer-name {
     font-size: .68rem;
     font-weight: 800;
     color: var(--text)
 }

 /* RELATED */
 .related {
     border-top: 1px solid var(--border);
     padding-top: 1.5rem;
     margin-top: 1.5rem
 }

 .related-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.2rem;
     font-weight: 800;
     text-transform: uppercase;
     margin-bottom: 1rem;
     color: var(--text)
 }

 .related-title span {
     color: var(--accent)
 }

 .related-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: .8rem
 }

 @media(min-width:700px) {
     .related-grid {
         grid-template-columns: repeat(4, 1fr)
     }
 }

 .related-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
     box-shadow: 0 1px 3px var(--sh)
 }

 .related-img {
     aspect-ratio: 1/1;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 1px solid var(--border)
 }

 .related-img img {
     width: 80%;
     height: 80%;
     object-fit: contain
 }

 .related-body {
     padding: .65rem .75rem
 }

 .related-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .9rem;
     font-weight: 800;
     margin-bottom: .2rem;
     color: var(--text)
 }

 .related-foot {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: .35rem
 }

 .related-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 800;
     font-size: .95rem;
     color: var(--text)
 }

 .related-link {
     font-size: .62rem;
     color: var(--accent);
     font-weight: 700
 }

 /* STICKY CTA (mobile) */
 .sticky-cta {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 150;
     background: rgba(255, 255, 255, .98);
     border-top: 1px solid var(--border);
     padding: .85rem 1rem;
     display: flex;
     gap: .7rem;
     align-items: center;
     backdrop-filter: blur(12px);
     box-shadow: 0 -4px 16px var(--shM)
 }

 .sticky-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.4rem;
     font-weight: 900;
     line-height: 1;
     color: var(--text)
 }

 .sticky-size {
     font-size: .66rem;
     color: var(--accent);
     font-weight: 600;
     margin-top: .1rem
 }

 .add-btn {
     flex: 1;
     padding: .85rem;
     border: none;
     border-radius: 10px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .95rem;
     font-weight: 800;
     letter-spacing: .05em;
     text-transform: uppercase;
     cursor: pointer;
     transition: all .2s
 }

 .add-btn.ready {
     background: var(--accent);
     color: #fff;
     box-shadow: 0 4px 12px rgba(0, 87, 255, .3)
 }

 .add-btn.unready {
     background: #E2E2EA;
     color: var(--muted);
     cursor: not-allowed
 }

 .add-btn-desk {
     padding: .88rem;
     border: none;
     border-radius: 10px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1rem;
     font-weight: 800;
     letter-spacing: .05em;
     text-transform: uppercase;
     cursor: pointer;
     transition: all .2s;
     flex: 1
 }

 .wish-btn {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     border: 1px solid var(--border);
     background: var(--surface2);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 1.1rem;
     flex-shrink: 0;
     color: var(--textM)
 }

 /* DESKTOP PRODUCT */
 .desk-product {
     max-width: 1100px;
     margin: 0 auto;
     padding: 2rem 1.5rem
 }

 .desk-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1.5rem;
     align-items: start;
     margin-bottom: 1rem
 }

 @media(min-width: 768px) {
     .desk-grid {
         grid-template-columns: 1fr 1fr;
         gap: 3rem;
     }
 }

 .desk-visual {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 16px;
     aspect-ratio: 1/1.1;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     margin-bottom: 1rem;
     overflow: hidden;
     box-shadow: 0 4px 20px var(--sh)
 }

 .desk-visual img {
     width: 80%;
     height: 80%;
     object-fit: contain;
 }

 @media(min-width: 768px) {
     .desk-visual img {
         width: 55%;
         height: 55%;
     }
 }

 .desk-foot {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
     margin-top: 2rem
 }

 .desk-foot-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .8rem;
     font-weight: 800;
     color: var(--text)
 }

 .desk-foot-val {
     font-size: .7rem;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .02em
 }

 .desk-details {
     padding-top: 1rem
 }

 .desk-brand {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .85rem;
     font-weight: 800;
     letter-spacing: .15em;
     color: var(--muted);
     margin-bottom: .6rem;
     text-transform: uppercase
 }

 .desk-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.2rem;
     font-weight: 900;
     text-transform: uppercase;
     line-height: .95;
     margin-bottom: 1.2rem;
     color: var(--text)
 }

 @media(min-width: 768px) {
     .desk-title {
         font-size: 2.8rem;
     }
 }

 .desk-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 2.2rem;
     font-weight: 900;
     margin-bottom: 2rem;
     color: var(--text);
     display: flex;
     align-items: baseline
 }

 .desk-curr {
     font-size: 1.3rem;
     margin-right: 2px
 }

 .desk-line {
     height: 1px;
     background: var(--border);
     width: 100%;
     margin-bottom: 2rem
 }

 .desk-qty {
     margin-bottom: 2rem
 }

 .desk-qty-box {
     display: flex;
     align-items: center;
     gap: 1.2rem;
     background: var(--surface2);
     padding: .6rem 1rem;
     border-radius: 12px;
     border: 1px solid var(--border);
     width: fit-content
 }

 .desk-qty-btn {
     background: none;
     border: none;
     font-size: 1.2rem;
     font-weight: 600;
     cursor: pointer;
     color: var(--text);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px
 }

 .desk-qty-val {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.1rem;
     font-weight: 800;
     min-width: 20px;
     text-align: center
 }

 .desk-size {
     margin-bottom: 2.5rem
 }

 .desk-size-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem
 }

 .desk-size-header span {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .85rem;
     font-weight: 800;
     letter-spacing: .05em;
     color: var(--text)
 }

 .desk-size-header button {
     background: none;
     border: none;
     color: var(--muted);
     text-decoration: underline;
     font-size: .75rem;
     font-weight: 600;
     cursor: pointer
 }

 .desk-size-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: .75rem
 }

 @media(min-width: 768px) {
     .desk-size-grid {
         grid-template-columns: repeat(6, 1fr);
     }
 }

 .desk-size-item {
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--surface);
     border: 1.5px solid var(--border);
     border-radius: 8px;
     font-family: 'Barlow Condensed', sans-serif;
     font-weight: 800;
     font-size: 1rem;
     cursor: pointer;
     transition: all .2s
 }

 .desk-size-item:hover {
     border-color: var(--text)
 }

 .desk-size-item.active {
     background: var(--text);
     border-color: var(--text);
     color: #fff
 }

 .desk-add {
     width: 100%;
     padding: 1.1rem;
     background: var(--accent);
     color: #fff;
     border: none;
     border-radius: 12px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.15rem;
     font-weight: 900;
     letter-spacing: .08em;
     cursor: pointer;
     box-shadow: 0 6px 20px rgba(0, 87, 255, .25);
     transition: transform .2s, box-shadow .2s
 }

 .desk-add:active {
     transform: translateY(2px);
     box-shadow: 0 3px 10px rgba(0, 87, 255, .2)
 }

 /* CART OVERLAY */

 .cart-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 20, .38);
     backdrop-filter: blur(4px);
     z-index: 200;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s
 }

 .cart-overlay.open {
     opacity: 1;
     pointer-events: all
 }

 .cart-drawer {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     width: 100vw;
     max-width: 380px;
     background: var(--surface);
     border-left: 1px solid var(--border);
     z-index: 201;
     transform: translateX(100%);
     transition: transform .32s cubic-bezier(.4, 0, .2, 1);
     display: flex;
     flex-direction: column;
     box-shadow: -8px 0 32px var(--shM)
 }

 .cart-drawer.open {
     transform: translateX(0)
 }

 .cart-head {
     padding: 1rem 1.1rem;
     border-bottom: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .cart-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.3rem;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: -.4px;
     color: var(--text)
 }

 .cart-close {
     width: 32px;
     height: 32px;
     border-radius: 7px;
     background: var(--surface2);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--muted);
     font-size: .9rem
 }

 .cart-items {
     flex: 1;
     overflow-y: auto;
     padding: .9rem 1.1rem;
     -webkit-overflow-scrolling: touch
 }

 .cart-empty {
     padding-top: 4rem;
     text-align: center;
     color: var(--muted)
 }

 .cart-empty-icon {
     font-size: 3rem;
     opacity: .25;
     margin-bottom: .7rem
 }

 .cart-item {
     display: flex;
     gap: .8rem;
     align-items: flex-start;
     padding: .85rem 0;
     border-bottom: 1px solid var(--border)
 }

 .cart-thumb {
     width: 58px;
     height: 58px;
     border-radius: 8px;
     border: 1px solid var(--border);
     flex-shrink: 0;
     overflow: hidden
 }

 .cart-thumb img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 6px
 }

 .cart-info {
     flex: 1;
     min-width: 0
 }

 .cart-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .9rem;
     font-weight: 700;
     margin-bottom: .1rem;
     color: var(--text);
     min-width: 0
 }

 .cart-size {
     font-size: .7rem;
     color: var(--muted);
     margin-bottom: .45rem
 }

 .cart-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.05rem;
     font-weight: 800;
     color: var(--text);
     flex-shrink: 0
 }

 .cart-qty,
 .cart-qty-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: .75rem;
     margin-top: .75rem
 }

 .cart-qty-box {
     display: flex;
     align-items: center;
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 6px;
     overflow: hidden
 }

 .cart-qty-btn {
     width: 28px;
     height: 28px;
     border: none;
     background: none;
     color: var(--text);
     font-size: 1.1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s
 }

 .cart-qty-btn:hover {
     background: rgba(0, 0, 0, .05)
 }

 .cart-qty-val {
     width: 30px;
     text-align: center;
     font-size: .85rem;
     font-weight: 800;
     font-family: 'Barlow Condensed', sans-serif;
     color: var(--text)
 }

 .cart-remove {
     background: none;
     border: none;
     color: var(--muted);
     font-size: .75rem;
     font-weight: 600;
     cursor: pointer;
     text-decoration: underline;
     padding: 4px
 }

 .cart-remove:hover {
     color: var(--accent)
 }

 .cart-foot {
     padding: 1rem 1.1rem;
     border-top: 1px solid var(--border)
 }

 .cart-subtotal {
     display: flex;
     justify-content: space-between;
     font-size: .82rem;
     color: var(--muted);
     margin-bottom: .3rem
 }

 .cart-total {
     display: flex;
     justify-content: space-between;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.2rem;
     font-weight: 800;
     color: var(--text);
     padding-top: .5rem;
     border-top: 1px solid var(--border);
     margin-bottom: .9rem
 }

 .checkout-btn {
     width: 100%;
     padding: .85rem;
     background: var(--accent);
     color: #fff;
     border: none;
     border-radius: 10px;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1rem;
     font-weight: 800;
     letter-spacing: .06em;
     text-transform: uppercase;
     cursor: pointer;
     box-shadow: 0 4px 14px rgba(0, 87, 255, .22)
 }

 .cart-note {
     text-align: center;
     font-size: .65rem;
     color: var(--muted);
     margin-top: .6rem
 }

 /* TOAST */
 .toast {
     position: fixed;
     bottom: 1.2rem;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: .55rem 1.1rem;
     display: flex;
     align-items: center;
     gap: .45rem;
     font-size: .84rem;
     font-weight: 600;
     box-shadow: 0 8px 24px var(--shM);
     z-index: 400;
     opacity: 0;
     transition: all .25s;
     pointer-events: none;
     white-space: nowrap;
     color: var(--text)
 }

 .toast.show {
     opacity: 1;
     transform: translateX(-50%) translateY(0)
 }

 .toast-icon {
     color: var(--tp)
 }

 @media(min-width:700px) {
     .hero {
         padding: 3.5rem 2rem 3rem
     }

     .collection {
         padding: 2rem 1.5rem
     }

     .kit-body {
         padding: .85rem .9rem 1rem
     }

     .kit-name {
         font-size: 1.05rem
     }

     .product-page {
         padding-bottom: 2rem
     }

     .sticky-cta {
         display: none
     }
 }

 /* SIZE GUIDE MODAL */
 .sg-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 20, .45);
     backdrop-filter: blur(6px);
     z-index: 500;
     opacity: 0;
     pointer-events: none;
     transition: opacity .25s;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem
 }

 .sg-overlay.open {
     opacity: 1;
     pointer-events: all
 }

 .sg-box {
     background: #fff;
     border-radius: 16px;
     width: 100%;
     max-width: 560px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 24px 60px rgba(0, 0, 20, .18);
     transform: scale(.96);
     transition: transform .25s
 }

 .sg-overlay.open .sg-box {
     transform: scale(1)
 }

 .sg-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1.4rem 1.5rem 1rem;
     border-bottom: 1px solid #E2E2EA;
     position: sticky;
     top: 0;
     background: #fff;
     z-index: 1
 }

 .sg-title {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.5rem;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: -.3px;
     color: #111118
 }

 .sg-close {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     border: 1px solid #E2E2EA;
     background: #F4F4F6;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 1rem;
     color: #8888A0;
     flex-shrink: 0
 }

 .sg-close:hover {
     border-color: #0057FF;
     color: #0057FF
 }

 .sg-body {
     padding: 1.2rem 1.5rem 1.5rem
 }

 .sg-table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 1rem
 }

 .sg-table thead tr {
     background: #111118
 }

 .sg-table thead th {
     color: #fff;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .82rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     padding: .75rem 1rem;
     text-align: center
 }

 .sg-table thead th:first-child {
     text-align: left;
     border-radius: 4px 0 0 4px
 }

 .sg-table thead th:last-child {
     border-radius: 0 4px 4px 0
 }

 .sg-table tbody tr {
     border-bottom: 1px solid #F0F0F4
 }

 .sg-table tbody tr:last-child {
     border-bottom: none
 }

 .sg-table tbody tr:hover {
     background: #F7F7F9
 }

 .sg-table td {
     padding: .8rem 1rem;
     text-align: center;
     font-size: .88rem;
     color: #3A3A4A
 }

 .sg-table td:first-child {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.05rem;
     font-weight: 800;
     color: #111118;
     text-align: left;
     letter-spacing: .02em
 }

 .sg-note {
     font-size: .75rem;
     color: #8888A0;
     line-height: 1.5;
     padding-top: .8rem;
     border-top: 1px solid #E2E2EA
 }

 .sg-note strong {
     color: #3A3A4A
 }

 .sg-tip {
     display: flex;
     align-items: flex-start;
     gap: .6rem;
     background: #EEF3FF;
     border: 1px solid rgba(0, 87, 255, .15);
     border-radius: 10px;
     padding: .9rem 1rem;
     margin-bottom: 1.2rem
 }

 .sg-tip-icon {
     font-size: 1.1rem;
     flex-shrink: 0;
     margin-top: .05rem
 }

 .sg-tip-text {
     font-size: .8rem;
     color: #3A3A4A;
     line-height: 1.55
 }

 .sg-tip-text strong {
     color: #0057FF
 }

 .price-block {
     display: flex;
     align-items: baseline;
     gap: .6rem;
     flex-wrap: wrap
 }

 .price-rrp {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--muted);
     text-decoration: line-through;
     line-height: 1
 }

 .price-save {
     font-size: .68rem;
     font-weight: 700;
     color: #fff;
     background: #E5003A;
     padding: 2px 7px;
     border-radius: 4px;
     letter-spacing: .04em;
     align-self: center
 }

 /* CART UPSELL */
 .upsell-section {
     padding: .8rem 1.1rem;
     border-top: 1px solid var(--border);
     background: var(--surface2)
 }

 .upsell-label {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .68rem;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--muted);
     margin-bottom: .7rem;
     display: flex;
     align-items: center;
     gap: .4rem
 }

 .upsell-label::before {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border)
 }

 .upsell-label::after {
     content: '';
     flex: 1;
     height: 1px;
     background: var(--border)
 }

 .upsell-card {
     display: flex;
     align-items: center;
     gap: .75rem;
     background: var(--surface);
     border: 1.5px solid var(--border);
     border-radius: 10px;
     padding: .6rem .7rem;
     margin-bottom: .5rem;
     transition: border-color .15s
 }

 .upsell-card:last-child {
     margin-bottom: 0
 }

 .upsell-card:hover {
     border-color: var(--accent)
 }

 .upsell-img {
     width: 52px;
     height: 52px;
     border-radius: 7px;
     background: #fff;
     border: 1px solid var(--border);
     flex-shrink: 0;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .upsell-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 4px
 }

 .upsell-info {
     flex: 1;
     min-width: 0
 }

 .upsell-tag {
     font-size: .58rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--accent);
     background: var(--accentL);
     padding: 1px 6px;
     border-radius: 3px;
     display: inline-block;
     margin-bottom: .2rem
 }

 .upsell-name {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .92rem;
     font-weight: 800;
     color: var(--text);
     line-height: 1.1;
     margin-bottom: .15rem
 }

 .upsell-price {
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .85rem;
     font-weight: 700;
     color: var(--text)
 }

 .upsell-rrp {
     font-size: .72rem;
     color: var(--muted);
     text-decoration: line-through;
     margin-left: .3rem;
     font-family: 'Barlow Condensed', sans-serif
 }

 .upsell-add {
     background: var(--accent);
     color: #fff;
     border: none;
     border-radius: 7px;
     padding: .45rem .8rem;
     font-family: 'Barlow Condensed', sans-serif;
     font-size: .75rem;
     font-weight: 800;
     letter-spacing: .05em;
     text-transform: uppercase;
     cursor: pointer;
     flex-shrink: 0;
     white-space: nowrap;
     transition: opacity .15s
 }

 .upsell-add:hover {
     opacity: .85
 }

 .upsell-add.added {
     background: #00B67A
 }