@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#111311;--paper:#f4f3ee;--soft:#e9e8e1;--white:#fff;--accent:#d7ff3f;--muted:#74776f;--line:rgba(17,19,17,.12);--shadow:0 24px 70px rgba(16,21,13,.12);--radius:26px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}svg{fill:none;stroke:currentColor;stroke-width:1.7}img{max-width:100%;display:block}.announcement{height:34px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;position:relative;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:.35s}.announcement p{margin:0}.announcement-close{position:absolute;right:18px;border:0;background:transparent;color:#fff;font-size:20px}.announcement.hidden{height:0;opacity:0;overflow:hidden}.site-header{height:82px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:0;z-index:50;background:rgba(244,243,238,.88);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.3s}.site-header.scrolled{height:70px;border-color:var(--line)}.brand{display:inline-flex;align-items:center;gap:11px;width:max-content;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.14em;font-size:15px}.brand-mark{width:30px;height:30px;position:relative;display:inline-block}.brand-mark i:first-child{width:20px;height:20px;border:2px solid currentColor;border-radius:50%;position:absolute;left:0;top:0}.brand-mark i:last-child{width:8px;height:17px;background:currentColor;border-radius:2px 2px 5px 5px;transform:rotate(-42deg);position:absolute;left:19px;top:16px}.desktop-nav{display:flex;align-items:center;gap:26px;font-size:14px}.desktop-nav a{position:relative}.desktop-nav a:after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:.3s}.desktop-nav a:hover:after{transform:scaleX(1);transform-origin:left}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.icon-button,.menu-toggle{width:42px;height:42px;border:0;background:transparent;display:grid;place-items:center;position:relative;border-radius:50%;transition:.2s}.icon-button:hover,.menu-toggle:hover{background:var(--soft)}.icon-button svg{width:21px;height:21px}.cart-count{position:absolute;min-width:17px;height:17px;border-radius:10px;display:grid;place-items:center;background:var(--accent);font-size:10px;font-weight:800;top:4px;right:2px}.menu-toggle{display:none;gap:5px;align-content:center}.menu-toggle span{width:20px;height:1.5px;background:currentColor;transition:.3s}.menu-toggle.active span:first-child{transform:translateY(3.3px) rotate(45deg)}.menu-toggle.active span:last-child{transform:translateY(-3.3px) rotate(-45deg)}.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--accent);padding:130px 7vw 40px;transform:translateY(-100%);transition:.55s cubic-bezier(.8,0,.2,1);display:flex;flex-direction:column;justify-content:space-between}.mobile-menu.open{transform:translateY(0)}.mobile-menu nav{display:flex;flex-direction:column}.mobile-menu nav a{font:800 clamp(38px,9vw,68px)/1.1 Manrope,sans-serif;letter-spacing:-.05em;padding:7px 0}.mobile-menu p{font-size:13px;text-transform:uppercase;letter-spacing:.12em}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#65685f;display:inline-block}.eyebrow.light{color:rgba(255,255,255,.72)}.button{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 26px;border-radius:999px;border:1px solid transparent;font-weight:800;transition:.2s}.button:hover{transform:translateY(-2px)}.button.primary{background:var(--ink);color:#fff}.light-btn{background:var(--accent)!important;color:var(--ink)!important}.ghost-light{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);backdrop-filter:blur(10px)}.button.small{min-height:40px;padding:0 16px;font-size:13px;border-color:var(--line);background:#fff;color:var(--ink)}.text-button{border:0;background:transparent;border-bottom:1px solid currentColor;padding:10px 0}.home-banner{min-height:calc(100vh - 116px);position:relative;overflow:hidden;display:grid;align-items:end;padding:9vw 4vw 4vw;background:#111311;isolation:isolate}.banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;animation:bannerZoom 16s ease-in-out infinite alternate}.banner-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(17,19,17,.92),rgba(17,19,17,.68) 45%,rgba(17,19,17,.22)),linear-gradient(0deg,rgba(17,19,17,.8),rgba(17,19,17,.1) 55%)}.banner-content{max-width:870px;color:#fff}.banner-content h1{font:800 clamp(58px,8vw,124px)/.88 Manrope,sans-serif;letter-spacing:-.08em;margin:24px 0}.banner-content p{width:min(650px,100%);color:rgba(255,255,255,.75);line-height:1.75;font-size:17px}.banner-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.banner-strip{position:absolute;left:4vw;right:4vw;bottom:20px;height:56px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);border-radius:999px;display:flex;align-items:center;justify-content:space-around;color:rgba(255,255,255,.72);font:800 12px Manrope,sans-serif;letter-spacing:.18em;backdrop-filter:blur(15px)}@keyframes bannerZoom{to{transform:scale(1.08)}}.section{padding:110px 4vw}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:55px}.section-heading h2,.custom-cta h2,.admin-teaser h2,.build-summary h2{margin:12px 0 0;font:750 clamp(45px,6vw,82px)/.95 Manrope,sans-serif;letter-spacing:-.065em}.section-heading>p{width:min(440px,100%);color:var(--muted);line-height:1.7;margin:0}.brand-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.brand-card{min-height:330px;border-radius:var(--radius);padding:28px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 12px 35px rgba(17,19,17,.05);transition:.35s}.brand-card:after{content:"";position:absolute;width:190px;height:190px;right:-65px;bottom:-65px;background:var(--accent);border-radius:50%;opacity:.55;transition:.4s}.brand-card:hover{transform:translateY(-8px)}.brand-card:hover:after{transform:scale(1.2)}.brand-card span{color:var(--muted);font-size:12px}.brand-card h3{font:800 42px Manrope,sans-serif;letter-spacing:-.06em;margin:38px 0 8px}.brand-card p{color:var(--muted);line-height:1.6}.brand-card b{margin-top:auto;position:relative;z-index:2}.custom-cta{margin:0 4vw;padding:70px;border-radius:38px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;background:var(--ink);color:#fff;overflow:hidden;position:relative}.custom-cta p{color:rgba(255,255,255,.7);line-height:1.75;max-width:570px;margin-bottom:30px}.racket-preview{height:420px;position:relative;display:grid;place-items:center}.preview-face{position:absolute;width:220px;height:245px;border-radius:50%;border:12px solid #090a09;box-shadow:0 25px 40px rgba(0,0,0,.25)}.preview-face.red{background:#d8312b;transform:translateX(-55px) rotate(-12deg)}.preview-face.black{background:#151815;transform:translateX(55px) rotate(14deg)}.preview-handle{position:absolute;width:70px;height:210px;bottom:34px;border-radius:0 0 22px 22px;background:linear-gradient(90deg,#95552e,#e8b07c,#8b4f2c);border:8px solid #090a09;border-top:0}.racket-preview span{position:absolute;right:20px;top:34px;padding:18px 22px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);font-weight:800}.admin-teaser{margin:0 4vw 90px;padding:70px;border-radius:36px;background:var(--accent)}.admin-teaser p{max-width:740px;line-height:1.75;color:rgba(17,19,17,.72)}.brand-hero,.builder-hero,.admin-hero{min-height:480px;padding:110px 4vw 70px;color:#fff;background:radial-gradient(circle at 78% 25%,rgba(215,255,63,.35),transparent 26%),linear-gradient(135deg,#111311,#1d251d 58%,#0d0f0d);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.brand-hero:after,.builder-hero:after,.admin-hero:after{content:"";position:absolute;right:-160px;bottom:-260px;width:620px;height:620px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.brand-hero h1,.builder-hero h1,.admin-hero h1{font:800 clamp(70px,12vw,150px)/.82 Manrope,sans-serif;letter-spacing:-.08em;margin:22px 0 18px;text-transform:uppercase;position:relative;z-index:2}.brand-hero p,.builder-hero p,.admin-hero p{color:rgba(255,255,255,.72);max-width:620px;line-height:1.7;position:relative;z-index:2}.brand-hero-actions{display:flex;gap:14px;margin-top:24px;position:relative;z-index:2}.brand-hero.joola{background:radial-gradient(circle at 78% 25%,rgba(215,255,63,.36),transparent 28%),linear-gradient(135deg,#101210,#263b1f)}.brand-hero.tibhar{background:radial-gradient(circle at 78% 25%,rgba(255,70,70,.32),transparent 28%),linear-gradient(135deg,#121111,#371819)}.brand-hero.butterfly{background:radial-gradient(circle at 78% 25%,rgba(116,196,255,.32),transparent 28%),linear-gradient(135deg,#101114,#16263a)}.brand-hero.stiga{background:radial-gradient(circle at 78% 25%,rgba(255,232,112,.32),transparent 28%),linear-gradient(135deg,#11120f,#3a3216)}.shop-toolbar{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-bottom:34px}.category-tabs{display:flex;gap:10px;flex-wrap:wrap}.category-tabs button{border:1px solid var(--line);background:transparent;padding:11px 16px;border-radius:999px;transition:.2s}.category-tabs button.active,.category-tabs button:hover{background:var(--ink);color:#fff}.sort-control{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}.sort-control select{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;outline:none}.filter-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 16px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.product-card{background:#fff;border:1px solid rgba(17,19,17,.08);border-radius:24px;overflow:hidden;transition:.35s}.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.product-visual{height:320px;background:linear-gradient(145deg,#efeee8,#dddcd2);position:relative;overflow:hidden;display:grid;place-items:center}.product-visual img{width:100%;height:100%;object-fit:cover}.product-badge{position:absolute;left:16px;top:16px;z-index:2;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);font-size:11px;font-weight:800}.quick-add{position:absolute;left:16px;right:16px;bottom:16px;height:45px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;transform:translateY(12px);opacity:0;transition:.28s}.product-card:hover .quick-add{transform:translateY(0);opacity:1}.product-info{padding:20px}.product-name{font:800 17px/1.25 Manrope,sans-serif;margin:0 0 10px}.product-topline{display:flex;gap:14px;justify-content:space-between;align-items:flex-start}.product-price{font-weight:800;white-space:nowrap}.product-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;margin-top:14px}.rating{color:var(--ink)}.rating small{color:var(--muted);margin-left:3px}.product-art{width:190px;height:210px;position:relative}.art-rackets:before,.art-blades:before{content:"";position:absolute;width:145px;height:160px;border-radius:50%;background:var(--product-color,#d7ff3f);border:12px solid #111311;left:23px;top:0;box-shadow:inset -18px -18px 30px rgba(0,0,0,.18)}.art-rackets:after,.art-blades:after{content:"";position:absolute;width:46px;height:110px;left:72px;top:140px;background:linear-gradient(90deg,#8d522f,#e9b47c,#8d522f);border:8px solid #111311;border-top:0;border-radius:0 0 16px 16px}.art-rubbers:before{content:"";position:absolute;width:165px;height:165px;border-radius:22px;background:var(--product-color,#d8312b);left:10px;top:22px;transform:rotate(-10deg);box-shadow:inset -18px -18px 28px rgba(0,0,0,.18)}.art-balls:before,.art-balls:after{content:"40+";position:absolute;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#fff;box-shadow:inset -12px -12px 18px rgba(0,0,0,.12),0 16px 28px rgba(0,0,0,.1);font-weight:800}.art-balls:before{left:20px;top:55px}.art-balls:after{right:22px;top:95px}.art-tables:before{content:"";position:absolute;width:190px;height:106px;left:0;top:58px;background:var(--product-color,#28444d);border-radius:18px;transform:perspective(220px) rotateX(34deg);box-shadow:0 22px 25px rgba(0,0,0,.16)}.art-tables:after{content:"";position:absolute;width:4px;height:126px;left:93px;top:42px;background:#fff;opacity:.8;transform:rotate(90deg)}.art-footwear:before{content:"";position:absolute;width:170px;height:82px;left:8px;top:78px;background:var(--product-color,#fff);border:10px solid #111311;border-radius:90px 120px 45px 34px;box-shadow:0 16px 25px rgba(0,0,0,.12)}.art-accessories:before{content:"";position:absolute;width:145px;height:120px;left:23px;top:62px;background:var(--product-color,#202420);border-radius:26px;box-shadow:inset -18px -18px 26px rgba(0,0,0,.3)}.art-accessories:after{content:"";position:absolute;width:70px;height:42px;border:9px solid var(--product-color,#202420);border-bottom:0;left:60px;top:34px;border-radius:30px 30px 0 0}.empty-state{text-align:center;color:var(--muted);margin-top:24px}.builder-hero{min-height:620px;display:grid;grid-template-columns:1fr .9fr;align-items:center;padding-top:80px}.builder-visual{height:470px;position:relative;display:grid;place-items:center;z-index:2}.builder-racket{width:330px;height:500px;position:relative;animation:builderFloat 4s ease-in-out infinite}.face{position:absolute;width:240px;height:270px;border-radius:50%;border:14px solid #0b0d0b;box-shadow:0 28px 45px rgba(0,0,0,.28)}.forehand-face{background:#d8312b;left:15px;top:10px;transform:rotate(-12deg)}.backhand-face{background:#111311;right:15px;top:20px;transform:rotate(13deg)}.builder-handle{position:absolute;width:80px;height:230px;left:125px;top:255px;border-radius:0 0 24px 24px;background:linear-gradient(90deg,#8e522f,#e6b079,#9a5932);border:10px solid #0b0d0b;border-top:0}.builder-total-card{position:absolute;right:8%;bottom:18%;padding:22px 26px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:22px;backdrop-filter:blur(12px)}.builder-total-card span{display:block;color:rgba(255,255,255,.7);font-size:12px;margin-bottom:8px}.builder-total-card strong{font:800 32px Manrope,sans-serif}@keyframes builderFloat{50%{transform:translateY(-14px) rotate(3deg)}}.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:28px}.builder-form,.build-summary,.admin-form,.admin-products{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 16px 40px rgba(17,19,17,.05)}.builder-group+.builder-group{margin-top:35px;padding-top:35px;border-top:1px solid var(--line)}.builder-group-head{display:flex;gap:16px;align-items:flex-end;margin-bottom:18px}.builder-group-head span{color:var(--muted);font-size:12px}.builder-group-head h2{margin:0;font:800 34px Manrope,sans-serif;letter-spacing:-.05em}.option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.option-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.option-card{position:relative;display:block;cursor:pointer}.option-card input{position:absolute;opacity:0}.option-card-content{min-height:145px;border:1px solid var(--line);border-radius:20px;padding:18px;transition:.25s;display:flex;flex-direction:column}.option-card input:checked+.option-card-content{border-color:var(--ink);background:#f5ffe3;box-shadow:inset 0 0 0 1px var(--ink)}.option-card h3{margin:0 0 8px;font:800 17px Manrope,sans-serif}.option-card p{color:var(--muted);line-height:1.55;font-size:13px;margin:0 0 14px}.option-card strong{margin-top:auto}.build-summary{position:sticky;top:92px}#buildSummaryLines{margin:24px 0;border-top:1px solid var(--line)}.summary-line{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.summary-line span:first-child{color:var(--muted)}.summary-total{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin-bottom:20px}.summary-total strong{font:800 28px Manrope,sans-serif}.build-summary p{color:var(--muted);font-size:12px;line-height:1.6}.admin-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:26px;align-items:start}.admin-form-head,.admin-products-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}.admin-form h2{margin:8px 0 0;font:800 36px Manrope,sans-serif;letter-spacing:-.05em}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label,.import-box{display:flex;flex-direction:column;gap:8px;font-weight:800;font-size:13px;color:#353831}.form-grid .wide{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.import-box textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:13px 14px;outline:none;background:#fbfaf6;resize:vertical}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.import-box textarea:focus{border-color:var(--ink)}.admin-form .button.primary{margin-top:20px}.admin-note{color:var(--muted);line-height:1.6;font-size:12px}.image-preview{margin-top:18px;min-height:110px;border:1px dashed var(--line);border-radius:18px;display:grid;place-items:center;overflow:hidden;background:#fbfaf6;color:var(--muted);font-size:13px}.image-preview img{width:100%;height:220px;object-fit:cover}.admin-product-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.admin-product-thumb{height:64px;border-radius:14px;background:var(--soft);display:grid;place-items:center;overflow:hidden}.admin-product-thumb img{width:100%;height:100%;object-fit:cover}.admin-product-row h3{margin:0 0 5px;font:800 14px Manrope,sans-serif}.admin-product-row p{margin:0;color:var(--muted);font-size:12px}.admin-row-actions{display:flex;gap:6px}.admin-row-actions button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:12px}.import-box{margin-top:28px}.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100%);background:var(--paper);z-index:110;padding:34px;transform:translateX(100%);transition:.5s cubic-bezier(.8,0,.2,1);display:flex;flex-direction:column}.cart-drawer.open{transform:translateX(0)}.drawer-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid var(--line)}.drawer-header h2{margin:6px 0 0;font:800 28px Manrope,sans-serif;letter-spacing:-.04em}.cart-close{border:0;background:transparent;font-size:32px}.cart-items{flex:1;overflow:auto;padding:8px 0}.cart-item{display:grid;grid-template-columns:82px 1fr auto;gap:15px;padding:17px 0;border-bottom:1px solid var(--line);align-items:center}.cart-item-visual{height:82px;border-radius:15px;background:var(--soft);display:grid;place-items:center;overflow:hidden}.cart-puck{width:48px;height:48px;border-radius:50%;background:var(--accent);box-shadow:inset -8px -8px 12px rgba(0,0,0,.18)}.cart-item-visual img{width:100%;height:100%;object-fit:cover}.cart-item h3{font:800 14px Manrope,sans-serif;margin:0 0 6px}.cart-item-price,.cart-item-detail{color:var(--muted);font-size:12px;line-height:1.4}.quantity{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;margin-top:12px}.quantity button{width:28px;height:28px;border:0;background:transparent}.quantity span{min-width:22px;text-align:center;font-size:12px}.remove-item{background:none;border:0;color:var(--muted);font-size:18px}.cart-empty{margin:auto;text-align:center}.empty-ball{width:88px;height:88px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 20px;box-shadow:inset -10px -12px 18px rgba(0,0,0,.1),0 12px 25px rgba(0,0,0,.08);font-weight:800}.cart-empty h3{font:800 23px Manrope,sans-serif;margin:0 0 8px}.cart-empty p{color:var(--muted);font-size:13px}.cart-summary{border-top:1px solid var(--line);padding-top:20px}.cart-summary>div{display:flex;justify-content:space-between;font-size:17px}.cart-summary p{color:var(--muted);font-size:11px}.cart-summary .button{width:100%;margin-top:12px}.page-backdrop{position:fixed;inset:0;background:rgba(17,19,17,.45);backdrop-filter:blur(4px);z-index:105;opacity:0;visibility:hidden;transition:.35s}.page-backdrop.open{opacity:1;visibility:visible}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;z-index:200;font-size:13px;opacity:0;visibility:hidden;transition:.3s;box-shadow:0 15px 30px rgba(0,0,0,.2)}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}.site-footer{background:var(--ink);color:#fff;padding:75px 4vw 28px;display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr;gap:40px}.site-footer .brand{color:#fff}.footer-brand p{color:rgba(255,255,255,.52);line-height:1.7;max-width:330px}.footer-links,.footer-contact{display:flex;flex-direction:column;gap:10px}.site-footer h4{margin:0 0 8px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}.site-footer a,.site-footer p{color:rgba(255,255,255,.62);font-size:14px}.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;margin-top:30px;font-size:11px;display:flex;justify-content:space-between;gap:18px}.reveal{opacity:0;transform:translateY(25px);transition:.75s}.reveal.visible{opacity:1;transform:translateY(0)}@media(max-width:1150px){.brand-grid,.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.builder-layout,.admin-layout{grid-template-columns:1fr}.build-summary{position:static}}@media(max-width:900px){.site-header{grid-template-columns:1fr auto}.desktop-nav{display:none}.menu-toggle{display:grid}.home-banner{min-height:760px;padding-top:140px}.brand-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-cta{grid-template-columns:1fr;padding:48px 32px}.builder-hero{grid-template-columns:1fr}.option-grid,.option-grid.two{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.site-footer{grid-template-columns:1fr 1fr}.footer-brand,.footer-bottom{grid-column:1/-1}}@media(max-width:580px){.announcement{font-size:9px;padding:0 40px 0 12px;text-align:center}.site-header{height:68px;padding:0 18px}.brand{font-size:13px}.brand-mark{transform:scale(.86);transform-origin:left center}.home-banner{min-height:720px;padding:118px 18px 92px}.banner-content h1{font-size:clamp(48px,14vw,74px)}.banner-content p{font-size:14px}.banner-actions{flex-direction:column;align-items:stretch}.banner-strip{left:18px;right:18px;height:50px;bottom:18px;overflow:auto;gap:28px;justify-content:flex-start;padding:0 22px}.section{padding:76px 18px}.section-heading h2,.custom-cta h2,.admin-teaser h2{font-size:46px}.brand-grid,.product-grid{grid-template-columns:1fr}.brand-card{min-height:250px}.custom-cta,.admin-teaser{margin:0 18px;padding:38px 24px;border-radius:26px}.brand-hero,.builder-hero,.admin-hero{padding:100px 18px 52px;min-height:450px}.brand-hero h1,.builder-hero h1,.admin-hero h1{font-size:clamp(58px,18vw,92px)}.shop-toolbar{align-items:flex-start;flex-direction:column;max-height:68px;overflow:hidden;transition:.4s}.shop-toolbar.open{max-height:500px}.filter-toggle{display:block}.category-tabs{flex-direction:column;width:100%}.category-tabs button{width:100%;text-align:left}.product-visual{height:360px}.form-grid{grid-template-columns:1fr}.builder-form,.build-summary,.admin-form,.admin-products{padding:22px;border-radius:22px}.cart-drawer{padding:24px 20px}.site-footer{grid-template-columns:1fr;padding:58px 22px 24px}.footer-bottom{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


/* Updated public sections */
.hidden{display:none!important}.service-showcase{padding-top:90px}.service-grid{display:grid;grid-template-columns:1.35fr .85fr;grid-template-rows:repeat(2,330px);gap:18px}.service-card{background:#e3e4dc;border-radius:var(--radius);position:relative;overflow:hidden;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1);min-height:0}.service-card:hover{transform:translateY(-7px)}.service-card.service-large{grid-row:1/3;background:var(--accent)}.service-card.dark{background:var(--ink);color:#fff}.service-copy{padding:34px;position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:flex-start}.service-copy>span{font-size:11px;opacity:.55}.service-copy h3{font:800 clamp(34px,4.8vw,74px) Manrope,sans-serif;letter-spacing:-.07em;line-height:.95;margin:22px 0 14px}.service-copy p{margin:0;opacity:.68;max-width:520px;line-height:1.55}.service-copy b{margin-top:auto;border-bottom:1px solid currentColor;padding-bottom:6px}.service-racket{position:absolute;width:360px;height:520px;right:2%;bottom:-95px;transform:rotate(-18deg);filter:drop-shadow(0 28px 28px rgba(0,0,0,.18));transition:.55s}.service-card:hover .service-racket{transform:rotate(-12deg) translateY(-8px)}.service-racket:before{content:"";position:absolute;width:315px;height:335px;border-radius:50%;background:#202320;box-shadow:inset -20px -25px 30px rgba(0,0,0,.4),inset 12px 12px 16px rgba(255,255,255,.06)}.service-racket:after{content:"";position:absolute;width:70px;height:210px;left:123px;top:310px;border-radius:0 0 20px 20px;background:linear-gradient(90deg,#9c623b,#e8b883,#9c623b);border:8px solid #202320;border-top:0}.service-racket i{position:absolute;width:220px;height:220px;border:1px solid rgba(215,255,63,.25);border-radius:50%;left:47px;top:56px;z-index:2}.service-balls{position:absolute;right:-45px;bottom:-30px;width:320px;height:230px}.service-balls i{position:absolute;width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:inset -15px -16px 24px rgba(0,0,0,.1),0 18px 30px rgba(0,0,0,.08)}.service-balls i:nth-child(1){left:0;top:62px}.service-balls i:nth-child(2){left:96px;top:15px}.service-balls i:nth-child(3){left:178px;top:88px}.service-balls i:after{content:"40+";display:grid;place-items:center;width:100%;height:100%;font-weight:800}.service-case{position:absolute;right:18px;bottom:-55px;width:300px;height:245px}.service-case:before{content:"";position:absolute;width:235px;height:170px;right:0;bottom:0;border-radius:26px;background:#273029;border:1px solid rgba(255,255,255,.12);box-shadow:inset -18px -18px 22px rgba(0,0,0,.22)}.service-case:after{content:"";position:absolute;width:90px;height:70px;border:10px solid rgba(255,255,255,.18);border-bottom:0;right:70px;top:0;border-radius:50px 50px 0 0}.admin-teaser{display:none!important}

/* Product page filter panel */
.catalog-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}.filter-panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:24px;position:sticky;top:92px;box-shadow:0 16px 40px rgba(17,19,17,.05)}.filter-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.filter-panel-head h3{font:800 26px Manrope,sans-serif;letter-spacing:-.04em;margin:0}.filter-panel-head button{border:0;background:transparent;border-bottom:1px solid currentColor;padding:4px 0;color:var(--muted)}.filter-group{border-top:1px solid var(--line);padding:18px 0}.filter-group:last-child{padding-bottom:0}.filter-group h4{margin:0 0 14px;font:800 12px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.filter-group label{display:flex;gap:10px;align-items:center;margin:10px 0;color:#3f423b;font-size:14px}.filter-group input[type=checkbox]{accent-color:#111311;width:16px;height:16px}.price-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.price-fields input,.search-control input{border:1px solid var(--line);background:#fbfaf6;border-radius:14px;padding:12px 13px;outline:none;min-width:0}.price-fields input:focus,.search-control input:focus{border-color:var(--ink)}.results-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}.search-control{display:flex;flex-direction:column;gap:8px;flex:1;max-width:440px;color:var(--muted);font-size:13px}.filter-note{margin:0 0 20px;color:var(--muted);font-size:13px}.catalog-results .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Admin login */
.admin-login-section{display:grid;place-items:center}.admin-login-card{width:min(540px,100%);background:#fff;border:1px solid var(--line);border-radius:30px;padding:36px;box-shadow:var(--shadow)}.admin-login-card h2{font:800 clamp(34px,5vw,58px)/.95 Manrope,sans-serif;letter-spacing:-.06em;margin:12px 0 14px}.admin-login-card p{color:var(--muted);line-height:1.6}.admin-login-card label{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-weight:800;font-size:13px}.admin-login-card input{border:1px solid var(--line);border-radius:16px;background:#fbfaf6;padding:14px 15px;outline:none}.admin-login-card input:focus{border-color:var(--ink)}.login-message{min-height:20px;color:#b22525!important;font-weight:800}.admin-session-bar{margin:34px 4vw -64px;padding:16px 20px;border-radius:18px;background:#111311;color:white;display:flex;justify-content:space-between;align-items:center;gap:18px}.admin-session-bar span{font-weight:800}.admin-secure-area .admin-layout{padding-top:96px}

@media(max-width:1150px){.catalog-layout{grid-template-columns:1fr}.filter-panel{position:static}.catalog-results .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.service-grid{grid-template-columns:1fr;grid-template-rows:520px 300px 300px}.service-card.service-large{grid-row:auto}.results-topbar{flex-direction:column;align-items:stretch}.search-control{max-width:none}.admin-session-bar{margin:24px 18px -42px}}
@media(max-width:580px){.service-grid{grid-template-rows:470px 270px 270px}.service-copy{padding:26px}.service-racket{right:-105px;transform:scale(.82) rotate(-18deg);transform-origin:bottom right}.service-balls{right:-90px;transform:scale(.78);transform-origin:bottom right}.service-case{right:-40px;transform:scale(.8);transform-origin:bottom right}.catalog-results .product-grid{grid-template-columns:1fr}.filter-panel{padding:20px;border-radius:22px}.admin-login-card{padding:26px;border-radius:24px}.admin-session-bar{flex-direction:column;align-items:flex-start}.admin-session-bar .button{width:100%}}

/* Table Tennis Wala refinements */
.brand > span:last-child{letter-spacing:.055em;font-size:14px;white-space:nowrap}.site-header .brand{min-width:max-content}.desktop-nav{gap:24px}.product-card{cursor:pointer}.ghost{background:#fff;border-color:var(--line);color:var(--ink)}.ghost:hover{background:#f7f6f0}.checkout-button{width:100%}
.product-modal{position:fixed;z-index:130;left:50%;top:50%;width:min(980px,92vw);max-height:90vh;background:var(--paper);border-radius:30px;box-shadow:var(--shadow);display:grid;grid-template-columns:.95fr 1.05fr;overflow:hidden;transform:translate(-50%,-46%) scale(.96);opacity:0;visibility:hidden;transition:.35s cubic-bezier(.2,.8,.2,1)}.product-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.product-modal-close{position:absolute;right:20px;top:18px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.75);font-size:28px;line-height:1;cursor:pointer;z-index:5}.modal-product-visual{min-height:560px;background:linear-gradient(145deg,#efeee8,#dddcd2);display:grid;place-items:center;padding:38px;overflow:hidden}.modal-product-visual img{width:100%;height:100%;object-fit:cover;border-radius:24px}.modal-product-info{padding:60px 48px 42px;display:flex;flex-direction:column}.modal-product-info h2{font:800 clamp(34px,4.2vw,58px)/.96 Manrope,sans-serif;letter-spacing:-.065em;margin:16px 0}.modal-product-info p{color:var(--muted);line-height:1.75}.modal-features{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.modal-features span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:800}.rubber-colour-picker{margin:12px 0 24px}.rubber-colour-picker h3{font:800 13px Manrope,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}.rubber-colour-options{display:flex;flex-wrap:wrap;gap:10px}.rubber-colour-option{cursor:pointer}.rubber-colour-option input{position:absolute;opacity:0}.rubber-colour-option span{width:34px;height:34px;border-radius:50%;background:var(--rubber-choice);display:inline-block;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);vertical-align:middle;margin-right:7px}.rubber-colour-option b{font-size:13px}.rubber-colour-option input:checked+span{box-shadow:0 0 0 3px var(--ink)}.modal-purchase-row{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:18px}.modal-purchase-row strong{font:800 28px Manrope,sans-serif}
.checkout-hero{min-height:430px;padding:110px 4vw 70px;color:#fff;background:radial-gradient(circle at 80% 18%,rgba(215,255,63,.35),transparent 26%),linear-gradient(135deg,#111311,#1b2118 62%,#0e100d);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.checkout-hero:after{content:"";position:absolute;right:-170px;bottom:-280px;width:620px;height:620px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.checkout-hero h1{font:800 clamp(64px,10vw,128px)/.85 Manrope,sans-serif;letter-spacing:-.08em;margin:22px 0 18px;position:relative;z-index:1}.checkout-hero p{color:rgba(255,255,255,.72);max-width:650px;line-height:1.7;position:relative;z-index:1}.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start}.checkout-form-card,.checkout-summary-card{background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:0 16px 40px rgba(17,19,17,.05)}.checkout-form-card h2,.checkout-summary-card h2{font:800 clamp(32px,4vw,52px)/.95 Manrope,sans-serif;letter-spacing:-.06em;margin:10px 0 24px}.checkout-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.checkout-form label{display:flex;flex-direction:column;gap:8px;font-weight:800;font-size:13px;color:#353831}.checkout-form .wide{grid-column:1/-1}.checkout-form input,.checkout-form textarea{border:1px solid var(--line);border-radius:16px;background:#fbfaf6;padding:14px 15px;outline:none;resize:vertical}.checkout-form input:focus,.checkout-form textarea:focus{border-color:var(--ink)}.checkout-note{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.6}.checkout-note code{background:#f0eee6;border-radius:6px;padding:2px 5px}.checkout-summary-card{position:sticky;top:92px}.checkout-cart-items{border-top:1px solid var(--line);margin-top:18px}.checkout-line{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}.checkout-line strong{display:block;font:800 14px Manrope,sans-serif}.checkout-line p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.4}.checkout-line span{white-space:nowrap;font-weight:800}.checkout-total-line{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:var(--muted)}.checkout-total-line.grand{font-size:20px;color:var(--ink);border-top:1px solid var(--line);padding-top:18px;margin-bottom:18px}.checkout-total-line strong{font:800 24px Manrope,sans-serif}.order-success{padding-top:0}.order-success-card{background:var(--accent);border-radius:32px;padding:48px;box-shadow:var(--shadow)}.order-success-card h2{font:800 clamp(38px,6vw,76px)/.95 Manrope,sans-serif;letter-spacing:-.065em;margin:10px 0 14px}.order-success-card p{max-width:760px;line-height:1.7;color:rgba(17,19,17,.72)}.order-success-card .button{margin-right:12px;margin-top:18px}.hidden{display:none!important}
@media(max-width:980px){.checkout-layout{grid-template-columns:1fr}.checkout-summary-card{position:static}.product-modal{grid-template-columns:1fr}.modal-product-visual{min-height:360px}.modal-product-info{padding:38px 26px 28px}.brand > span:last-child{font-size:12px}}
@media(max-width:580px){.brand > span:last-child{font-size:11px;letter-spacing:.02em}.checkout-form{grid-template-columns:1fr}.checkout-hero{padding:100px 18px 52px;min-height:390px}.checkout-hero h1{font-size:clamp(54px,17vw,86px)}.checkout-layout{padding:72px 18px}.checkout-form-card,.checkout-summary-card{padding:22px;border-radius:24px}.product-modal{width:94vw;border-radius:24px}.modal-product-visual{min-height:300px;padding:24px}.modal-purchase-row{flex-direction:column;align-items:stretch}.modal-purchase-row .button{width:100%}.rubber-colour-options{display:grid;grid-template-columns:1fr 1fr}.order-success-card{padding:32px 24px}.order-success-card .button{width:100%;margin-right:0}}
.colour-gap{margin-top:14px}.option-card-content strong:empty{display:none}


/* Removed homepage floating brand strip */
.banner-strip {
  display: none !important;
}


/* Product dropdown in navbar */
.nav-dropdown{position:relative;display:flex;align-items:center}.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:6px}.nav-dropdown-trigger span{font-size:12px;transition:transform .25s}.nav-dropdown:hover .nav-dropdown-trigger span,.nav-dropdown:focus-within .nav-dropdown-trigger span{transform:rotate(180deg)}.nav-dropdown-menu{position:absolute;left:50%;top:calc(100% + 18px);min-width:220px;transform:translate(-50%,10px);padding:10px;border:1px solid rgba(17,19,17,.12);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 22px 55px rgba(17,19,17,.12);backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transition:.25s;z-index:80}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.nav-dropdown-menu:before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}.nav-dropdown-menu a{display:block;padding:12px 14px;border-radius:12px;font-weight:700;color:var(--ink);white-space:nowrap}.nav-dropdown-menu a:hover{background:var(--soft)}.nav-dropdown-menu a:after{display:none!important}.brand-hero.products{background:radial-gradient(circle at 78% 25%,rgba(215,255,63,.35),transparent 28%),linear-gradient(135deg,#111311,#243121)}.home-catalog .filter-panel{top:92px}.home-catalog .catalog-results .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:1150px){.home-catalog .catalog-results .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:900px){.nav-dropdown{display:none}.home-catalog .catalog-results .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.home-catalog .catalog-results .product-grid{grid-template-columns:1fr}}


/* Homepage two-row product preview + view more */
.home-catalog .catalog-results .product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-product-actions {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.home-product-actions[hidden] {
  display: none !important;
}

/* Mobile products dropdown */
.mobile-product-dropdown {
  border-top: 1px solid rgba(17,19,17,.12);
  border-bottom: 1px solid rgba(17,19,17,.12);
  padding: 10px 0 12px;
  margin: 8px 0;
}
.mobile-product-dropdown summary {
  list-style: none;
  cursor: pointer;
  font: 700 clamp(38px, 9vw, 68px)/1.1 Manrope, sans-serif;
  letter-spacing: -.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.mobile-product-dropdown summary::-webkit-details-marker {
  display: none;
}
.mobile-product-dropdown summary span {
  font-size: .45em;
  transition: transform .25s ease;
}
.mobile-product-dropdown[open] summary span {
  transform: rotate(180deg);
}
.mobile-product-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px 0 4px;
}
.mobile-menu .mobile-product-links a {
  font: 800 15px/1.1 Manrope, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(17,19,17,.12);
  border-radius: 999px;
  padding: 13px 15px;
}
@media (max-width: 1380px) {
  .home-catalog .catalog-results .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  .home-catalog .catalog-results .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .home-catalog .catalog-results .product-grid { grid-template-columns: 1fr; }
  .mobile-product-links { grid-template-columns: 1fr; }
  .mobile-product-dropdown summary { font-size: clamp(38px, 10vw, 58px); }
}


/* Scrolling clickable brand logo strip */
.brand-logo-marquee {
  padding: 44px 0 36px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.logo-marquee-intro {
  padding: 0 4vw 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.logo-marquee-intro h2 {
  margin: 8px 0 0;
  max-width: 560px;
  font: 800 clamp(28px, 4vw, 54px)/.95 Manrope, sans-serif;
  letter-spacing: -.06em;
}
.logo-marquee-shell {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.logo-marquee-shell::before,
.logo-marquee-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee-shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper), rgba(244,243,238,0));
}
.logo-marquee-shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper), rgba(244,243,238,0));
}
.logo-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 4vw;
  animation: brandLogoScroll 26s linear infinite;
}
.logo-marquee-shell:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-pill {
  min-width: 245px;
  height: 96px;
  border-radius: 999px;
  border: 1px solid rgba(17,19,17,.12);
  background: #fff;
  box-shadow: 0 14px 35px rgba(17,19,17,.06);
  display: grid;
  place-items: center;
  padding: 0 32px;
  color: var(--ink);
  font: 900 22px Manrope, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.logo-pill:hover {
  transform: translateY(-4px) scale(1.02);
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.joola-logo {
  background: var(--accent);
}
.tibhar-logo {
  letter-spacing: .22em;
}
.butterfly-logo {
  text-transform: none;
  letter-spacing: .02em;
  font-size: 26px;
}
.stiga-logo {
  background: #111311;
  color: #fff;
}
.all-products-logo {
  min-width: 300px;
  background: #e7e6df;
}
@keyframes brandLogoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 900px) {
  .logo-marquee-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .logo-pill {
    min-width: 210px;
    height: 82px;
    font-size: 18px;
  }
  .butterfly-logo {
    font-size: 22px;
  }
}
@media (max-width: 580px) {
  .brand-logo-marquee {
    padding: 34px 0 28px;
  }
  .logo-marquee-intro {
    padding: 0 18px 18px;
  }
  .logo-marquee-intro h2 {
    font-size: 34px;
  }
  .logo-marquee-shell::before,
  .logo-marquee-shell::after {
    width: 48px;
  }
  .logo-marquee-track {
    gap: 12px;
    padding: 8px 18px;
    animation-duration: 22s;
  }
  .logo-pill {
    min-width: 180px;
    height: 72px;
    font-size: 15px;
    padding: 0 20px;
  }
  .butterfly-logo {
    font-size: 19px;
  }
}


/* Logo marquee updated: image-only brand logos, no heading/content */
.brand-logo-marquee.logo-only {
  padding: 36px 0;
  background: var(--paper);
}
.logo-only .logo-marquee-intro {
  display: none !important;
}
.logo-only .logo-marquee-track {
  gap: 22px;
  padding: 8px 4vw;
  animation-duration: 24s;
}
.logo-only .logo-pill {
  min-width: 300px;
  width: 300px;
  height: 108px;
  padding: 0;
  border-radius: 999px;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.logo-only .logo-pill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(17,19,17,.08));
  transition: transform .25s ease, filter .25s ease;
}
.logo-only .logo-pill:hover {
  transform: translateY(-3px) scale(1.025);
  background: transparent !important;
  border-color: transparent !important;
  color: inherit;
}
.logo-only .logo-pill:hover img {
  filter: drop-shadow(0 18px 32px rgba(17,19,17,.14));
}
.rubber-colour-picker h3 {
  margin-bottom: 14px;
}
.rubber-colour-options {
  gap: 12px;
}
.rubber-colour-option {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 10px 16px 10px 10px;
  display: inline-flex;
  align-items: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rubber-colour-option:hover {
  transform: translateY(-1px);
  border-color: rgba(17,19,17,.32);
}
.rubber-colour-option:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
@media (max-width: 580px) {
  .brand-logo-marquee.logo-only { padding: 26px 0; }
  .logo-only .logo-marquee-track { gap: 14px; padding: 6px 18px; animation-duration: 20s; }
  .logo-only .logo-pill { min-width: 220px; width: 220px; height: 78px; }
}


/* About page */
.about-hero{min-height:calc(100vh - 116px);padding:110px 4vw 70px;color:#fff;background:radial-gradient(circle at 75% 20%,rgba(215,255,63,.32),transparent 28%),linear-gradient(135deg,#111311,#1c241b 55%,#0d0f0d);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;position:relative;overflow:hidden}.about-hero:after{content:"";position:absolute;right:-190px;bottom:-250px;width:650px;height:650px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.about-hero-copy{position:relative;z-index:2}.about-hero h1{font:800 clamp(58px,8vw,120px)/.88 Manrope,sans-serif;letter-spacing:-.08em;margin:22px 0}.about-hero p{color:rgba(255,255,255,.72);line-height:1.75;width:min(650px,100%);font-size:17px}.about-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}.about-hero-art{height:520px;position:relative;display:grid;place-items:center}.about-racket-face{width:310px;height:340px;border-radius:50%;background:var(--accent);border:18px solid #070807;box-shadow:0 35px 60px rgba(0,0,0,.35),inset -22px -22px 35px rgba(0,0,0,.15);transform:rotate(-14deg)}.about-racket-handle{position:absolute;width:86px;height:240px;top:315px;border-radius:0 0 26px 26px;background:linear-gradient(90deg,#92542f,#e8b07c,#8d4f2c);border:10px solid #070807;border-top:0;transform:rotate(-14deg)}.about-ball{position:absolute;right:12%;top:18%;width:96px;height:96px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font:800 20px Manrope,sans-serif;box-shadow:inset -12px -14px 20px rgba(0,0,0,.14),0 20px 35px rgba(0,0,0,.2)}.about-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.about-story-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;min-height:310px;box-shadow:0 14px 35px rgba(17,19,17,.05);position:relative;overflow:hidden}.about-story-card:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-70px;bottom:-70px;background:var(--accent);opacity:.45}.about-story-card span{color:var(--muted);font-size:12px}.about-story-card h3{font:800 34px/.95 Manrope,sans-serif;letter-spacing:-.05em;margin:32px 0 14px}.about-story-card p{color:var(--muted);line-height:1.7;position:relative;z-index:2}.about-values{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}.about-value-panel{background:var(--accent);border-radius:34px;padding:54px}.about-value-panel h2{font:800 clamp(42px,5vw,78px)/.92 Manrope,sans-serif;letter-spacing:-.07em;margin:16px 0 0}.about-value-list{background:#fff;border:1px solid var(--line);border-radius:34px;padding:34px}.about-value-list div{padding:22px 0;border-bottom:1px solid var(--line)}.about-value-list div:last-child{border-bottom:0}.about-value-list strong{font:800 22px Manrope,sans-serif}.about-value-list p{color:var(--muted);line-height:1.7;margin:10px 0 0}

/* Customize add-on products */
.builder-helper{color:var(--muted);line-height:1.6;margin:-4px 0 18px}.addon-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.addon-card{position:relative;display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:20px;background:#fbfaf6;padding:14px;cursor:pointer;transition:.25s}.addon-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(17,19,17,.07)}.addon-card input{position:absolute;opacity:0}.addon-card input:checked~.addon-card-copy b:after{content:"  ✓";color:var(--ink)}.addon-card input:checked~.addon-card-visual,.addon-card input:checked~.addon-card-copy{filter:none}.addon-card:has(input:checked){border-color:var(--ink);background:#f5ffe3;box-shadow:inset 0 0 0 1px var(--ink)}.addon-card-visual{width:70px;height:70px;border-radius:18px;background:linear-gradient(145deg,#fff,#e7e6df);display:grid;place-items:center}.addon-card-visual i{width:38px;height:38px;border-radius:50%;background:var(--addon-color);box-shadow:inset -8px -8px 12px rgba(0,0,0,.18),0 8px 16px rgba(17,19,17,.08)}.addon-card-copy{display:flex;flex-direction:column;gap:4px}.addon-card-copy b{font:800 15px Manrope,sans-serif}.addon-card-copy small{color:var(--muted);line-height:1.35}.addon-card-copy strong{font-weight:800;margin-top:4px}.summary-line strong{max-width:58%;text-align:right}

@media(max-width:900px){.about-hero{grid-template-columns:1fr;min-height:auto}.about-hero-art{height:430px}.about-story-grid,.about-values{grid-template-columns:1fr}.addon-product-grid{grid-template-columns:1fr}.about-value-panel{padding:36px}}
@media(max-width:580px){.about-hero{padding:100px 18px 54px}.about-hero h1{font-size:clamp(52px,15vw,76px)}.about-hero p{font-size:14px}.about-hero-actions{flex-direction:column;align-items:stretch}.about-racket-face{width:230px;height:255px}.about-racket-handle{width:68px;height:190px;top:260px}.about-ball{width:74px;height:74px;right:4%;font-size:15px}.about-story-card,.about-value-panel,.about-value-list{padding:24px;border-radius:24px}.about-story-card h3{font-size:28px}.addon-card{grid-template-columns:58px 1fr}.addon-card-visual{width:58px;height:58px}.summary-line strong{max-width:62%}}


/* Homepage About section below brand logo slider */
.home-about {
  padding-top: 80px;
}
.home-about-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 38px;
  align-items: stretch;
  background: #111311;
  color: #fff;
  border-radius: 38px;
  padding: clamp(34px, 5vw, 76px);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.home-about-card::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -170px;
  top: -190px;
  border-radius: 50%;
  background: rgba(215,255,63,.18);
  filter: blur(2px);
  z-index: -1;
}
.home-about-copy h2 {
  margin: 16px 0 22px;
  font: 800 clamp(44px, 6vw, 86px)/.92 Manrope, sans-serif;
  letter-spacing: -.07em;
  max-width: 780px;
}
.home-about-copy p {
  max-width: 760px;
  color: rgba(255,255,255,.68);
  line-height: 1.78;
  font-size: 16px;
}
.about-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 32px;
}
.about-highlights div {
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  border-radius: 22px;
  padding: 20px;
  backdrop-filter: blur(12px);
}
.about-highlights strong {
  display: block;
  font: 800 17px Manrope, sans-serif;
  margin-bottom: 8px;
}
.about-highlights span {
  display: block;
  color: rgba(255,255,255,.58);
  line-height: 1.5;
  font-size: 13px;
}
.home-about-visual {
  min-height: 460px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 72% 22%, rgba(215,255,63,.36), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.about-racket {
  position: absolute;
  width: 270px;
  height: 420px;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-18deg);
  filter: drop-shadow(0 32px 30px rgba(0,0,0,.35));
}
.about-racket::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 270px;
  left: 10px;
  top: 0;
  border-radius: 50%;
  background: var(--accent);
  border: 16px solid #090a09;
  box-shadow: inset -25px -25px 42px rgba(0,0,0,.22);
}
.about-racket::after {
  content: "";
  position: absolute;
  width: 76px;
  height: 205px;
  left: 96px;
  top: 238px;
  border-radius: 0 0 24px 24px;
  background: linear-gradient(90deg,#8e522f,#e6b079,#9a5932);
  border: 11px solid #090a09;
  border-top: 0;
}
.about-ball {
  position: absolute;
  right: 14%;
  top: 18%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  font: 900 18px Manrope, sans-serif;
  box-shadow: inset -12px -14px 20px rgba(0,0,0,.12), 0 18px 35px rgba(0,0,0,.25);
}
.about-badge {
  position: absolute;
  left: 28px;
  bottom: 28px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
@media (max-width: 1000px) {
  .home-about-card {
    grid-template-columns: 1fr;
  }
  .home-about-visual {
    min-height: 390px;
  }
}
@media (max-width: 700px) {
  .home-about {
    padding-top: 56px;
  }
  .home-about-card {
    border-radius: 28px;
    padding: 32px 22px;
  }
  .about-highlights {
    grid-template-columns: 1fr;
  }
  .home-about-visual {
    min-height: 340px;
  }
  .about-racket {
    transform: translate(-50%, -50%) rotate(-18deg) scale(.78);
  }
  .about-ball {
    width: 72px;
    height: 72px;
    font-size: 15px;
  }
}


/* Correct homepage About section: after hero + brand logo slider */
.home-about,
.home-about-card {
  display: none !important;
}

.home-about-minimal {
  padding-top: 72px;
  padding-bottom: 96px;
  background: var(--paper);
}

.about-minimal-layout {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(42px, 6vw, 76px) 0;
  display: grid;
  grid-template-columns: 0.42fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}

.about-minimal-label {
  position: sticky;
  top: 110px;
}

.about-minimal-copy h2 {
  margin: 0 0 24px;
  max-width: 980px;
  font: 800 clamp(46px, 6.4vw, 96px)/0.92 Manrope, sans-serif;
  letter-spacing: -0.075em;
  color: var(--ink);
}

.about-minimal-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.78;
}

.about-minimal-copy p + p {
  margin-top: 16px;
}

.about-minimal-points {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-minimal-points div {
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 24px;
  background: rgba(255,255,255,0.52);
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

.about-minimal-points div:hover {
  transform: translateY(-5px);
  background: #fff;
  border-color: rgba(17,19,17,.2);
}

.about-minimal-points strong {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font: 800 13px Manrope, sans-serif;
  margin-bottom: 24px;
}

.about-minimal-points h3 {
  margin: 0 0 10px;
  font: 800 21px/1.1 Manrope, sans-serif;
  letter-spacing: -.04em;
}

.about-minimal-points span {
  display: block;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 900px) {
  .home-about-minimal {
    padding-top: 54px;
    padding-bottom: 76px;
  }

  .about-minimal-layout {
    grid-template-columns: 1fr;
  }

  .about-minimal-label {
    position: static;
  }

  .about-minimal-points {
    grid-template-columns: 1fr;
  }

  .about-minimal-points div {
    min-height: auto;
  }
}

@media (max-width: 580px) {
  .home-about-minimal {
    padding-top: 42px;
    padding-bottom: 62px;
  }

  .about-minimal-layout {
    padding: 38px 0;
  }

  .about-minimal-copy h2 {
    font-size: clamp(40px, 13vw, 64px);
  }

  .about-minimal-copy p {
    font-size: 15px;
  }
}


/* Final About placement: directly after homepage brand logo slider */
.home-about { display: none !important; }

.home-about-minimal {
  padding-top: 74px;
  padding-bottom: 98px;
  background: var(--paper);
}

.about-minimal-layout {
  display: grid;
  grid-template-columns: 0.34fr 1fr;
  gap: clamp(28px, 5vw, 78px);
  align-items: start;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(44px, 6vw, 78px) 0;
}

.about-minimal-kicker {
  position: sticky;
  top: 105px;
}

.about-mini-line {
  width: 72px;
  height: 1px;
  background: var(--ink);
  opacity: .22;
  margin-top: 22px;
}

.about-minimal-copy h2 {
  margin: 0 0 24px;
  max-width: 940px;
  font: 800 clamp(44px, 6vw, 92px)/0.92 Manrope, sans-serif;
  letter-spacing: -0.075em;
  color: var(--ink);
}

.about-minimal-copy p {
  margin: 0;
  max-width: 800px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.78;
}

.about-minimal-points {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-minimal-points div {
  min-height: 205px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  background: rgba(255,255,255,.56);
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

.about-minimal-points div:hover {
  transform: translateY(-5px);
  background: #fff;
  border-color: rgba(17,19,17,.2);
}

.about-minimal-points strong {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font: 800 13px Manrope, sans-serif;
  margin-bottom: 24px;
}

.about-minimal-points h3 {
  margin: 0 0 10px;
  font: 800 21px/1.12 Manrope, sans-serif;
  letter-spacing: -.04em;
}

.about-minimal-points span {
  display: block;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px;
}

@media (max-width: 900px) {
  .home-about-minimal { padding-top: 54px; padding-bottom: 76px; }
  .about-minimal-layout { grid-template-columns: 1fr; }
  .about-minimal-kicker { position: static; }
  .about-minimal-points { grid-template-columns: 1fr; }
  .about-minimal-points div { min-height: auto; }
}

@media (max-width: 580px) {
  .home-about-minimal { padding-top: 42px; padding-bottom: 62px; }
  .about-minimal-layout { padding: 38px 0; }
  .about-minimal-copy h2 { font-size: clamp(40px, 13vw, 64px); }
  .about-minimal-copy p { font-size: 15px; }
}


/* Final additions: privacy policy page, popup, WhatsApp consultation button */
.policy-hero {
  min-height: 430px;
  padding: 120px 4vw 70px;
  color: white;
  background:
    radial-gradient(circle at 78% 20%, rgba(215,255,63,.32), transparent 28%),
    linear-gradient(135deg, #111311, #1c2319 62%, #0d0f0d);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.policy-hero h1 {
  margin: 18px 0 16px;
  font: 800 clamp(62px, 11vw, 140px)/.86 Manrope, sans-serif;
  letter-spacing: -.08em;
}

.policy-hero p {
  max-width: 680px;
  color: rgba(255,255,255,.72);
  line-height: 1.72;
}

.policy-content article {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(28px, 5vw, 64px);
  box-shadow: 0 16px 38px rgba(17,19,17,.05);
}

.policy-content h2 {
  margin: 28px 0 10px;
  font: 800 28px/1.1 Manrope, sans-serif;
  letter-spacing: -.04em;
}

.policy-content h2:first-child {
  margin-top: 0;
}

.policy-content p {
  color: var(--muted);
  line-height: 1.78;
}

.privacy-popup {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: min(390px, calc(100vw - 44px));
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  z-index: 250;
  box-shadow: 0 24px 65px rgba(17,19,17,.18);
  backdrop-filter: blur(16px);
  transform: translateY(22px);
  opacity: 0;
  pointer-events: none;
  transition: .35s ease;
}

.privacy-popup.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.privacy-popup h3 {
  margin: 0 0 8px;
  font: 800 20px Manrope, sans-serif;
  letter-spacing: -.04em;
}

.privacy-popup p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 13px;
}

.privacy-popup-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.privacy-popup-actions a,
.privacy-popup-actions button {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 15px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.privacy-popup-actions .accept-policy {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.whatsapp-consult {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 240;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px 0 12px;
  border-radius: 999px;
  background: #25d366;
  color: #07130b;
  font-weight: 900;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.35);
}

.whatsapp-consult svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  stroke: none;
}

.whatsapp-consult span {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .privacy-popup {
    left: 14px;
    right: 14px;
    bottom: 86px;
    width: auto;
  }

  .whatsapp-consult {
    right: 14px;
    bottom: 14px;
    min-height: 50px;
    padding-right: 14px;
    font-size: 13px;
  }
}


/* Final polish: consistent navbar/footer + minimalist policy page */
.site-header {
  overflow: visible !important;
}

.desktop-nav {
  align-items: center;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown-trigger span {
  font-size: 12px;
  transition: transform .25s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger span,
.nav-dropdown:focus-within .nav-dropdown-trigger span {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  min-width: 230px;
  transform: translate(-50%, 10px);
  padding: 10px;
  border: 1px solid rgba(17,19,17,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 22px 55px rgba(17,19,17,.12);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .25s ease;
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}

.nav-dropdown-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--soft);
}

.policy-hero,
.policy-content {
  display: none !important;
}

.policy-minimal-hero {
  padding: clamp(74px, 8vw, 120px) 4vw clamp(56px, 8vw, 92px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.policy-kicker {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

.policy-title-block {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
  padding-top: clamp(42px, 8vw, 86px);
}

.policy-title-block h1 {
  margin: 0;
  max-width: 1050px;
  font: 800 clamp(62px, 10vw, 146px)/.86 Manrope, sans-serif;
  letter-spacing: -.085em;
  color: var(--ink);
}

.policy-title-block p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.78;
  font-size: 17px;
}

.policy-minimal-section {
  padding-top: 80px;
}

.policy-summary-card {
  background: var(--ink);
  color: #fff;
  border-radius: 34px;
  padding: clamp(30px, 5vw, 62px);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.policy-summary-card::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(215,255,63,.22);
}

.policy-summary-card h2 {
  margin: 12px 0 16px;
  max-width: 880px;
  font: 800 clamp(42px, 6vw, 82px)/.92 Manrope, sans-serif;
  letter-spacing: -.065em;
  position: relative;
  z-index: 1;
}

.policy-summary-card p {
  margin: 0;
  max-width: 820px;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  font-size: 16px;
  position: relative;
  z-index: 1;
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.policy-item {
  min-height: 260px;
  background: rgba(255,255,255,.56);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 26px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.policy-item:hover {
  transform: translateY(-5px);
  background: #fff;
  border-color: rgba(17,19,17,.2);
}

.policy-item span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font: 800 13px Manrope, sans-serif;
  margin-bottom: 30px;
}

.policy-item h3 {
  margin: 0 0 12px;
  font: 800 24px/1.05 Manrope, sans-serif;
  letter-spacing: -.045em;
}

.policy-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.mobile-product-dropdown {
  width: 100%;
}

.mobile-product-dropdown summary {
  list-style: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-product-dropdown summary::-webkit-details-marker {
  display: none;
}

.mobile-product-links {
  display: grid;
  gap: 6px;
  padding: 10px 0 14px 18px;
}

.mobile-product-links a {
  font-size: .58em !important;
  opacity: .78;
}

@media (max-width: 1100px) {
  .policy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .policy-title-block {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .policy-kicker {
    align-items: flex-start;
    flex-direction: column;
  }

  .policy-title-block h1 {
    font-size: clamp(50px, 15vw, 78px);
  }

  .policy-grid {
    grid-template-columns: 1fr;
  }

  .policy-item {
    min-height: auto;
  }
}


/* Customize page: inline red/black rubber colour filter inside rubber sections */
.rubber-inline-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -2px 0 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  width: max-content;
  max-width: 100%;
}

.rubber-inline-filter > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 4px 0 8px;
}

.rubber-inline-filter label {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  transition: .25s ease;
}

.rubber-inline-filter input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rubber-inline-filter label:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.rubber-inline-filter b {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 3px rgba(17,19,17,.12);
}

.red-dot {
  background: #d8312b;
}

.black-dot {
  background: #111311;
}

.rubber-inline-filter label:has(input:checked) .black-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 0 3px rgba(255,255,255,.3);
}

@media (max-width: 580px) {
  .rubber-inline-filter {
    width: 100%;
    border-radius: 22px;
  }

  .rubber-inline-filter label {
    flex: 1;
    justify-content: center;
  }

  .rubber-inline-filter > span {
    width: 100%;
    margin-bottom: 4px;
  }
}


/* Mobile navbar fix: make Products dropdown same size as other menu items */
.mobile-product-dropdown {
  width: 100%;
  border-top: 1px solid rgba(17,19,17,.14);
  border-bottom: 1px solid rgba(17,19,17,.14);
  padding: 6px 0;
  margin: 8px 0;
}

.mobile-product-dropdown summary {
  list-style: none;
  cursor: pointer;
  font: 700 clamp(38px, 9vw, 68px)/1.1 Manrope, sans-serif !important;
  letter-spacing: -.05em;
  padding: 9px 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

.mobile-product-dropdown summary::-webkit-details-marker {
  display: none;
}

.mobile-product-dropdown summary span {
  font-size: .34em;
  transform: rotate(0deg);
  transition: transform .25s ease;
}

.mobile-product-dropdown[open] summary span {
  transform: rotate(180deg);
}

.mobile-product-links {
  display: grid;
  gap: 8px;
  padding: 8px 0 14px 18px;
}

.mobile-product-links a {
  font: 700 clamp(24px, 6vw, 38px)/1.1 Manrope, sans-serif !important;
  letter-spacing: -.04em !important;
  padding: 7px 0 !important;
  opacity: .78;
}

.mobile-product-links a:hover {
  opacity: 1;
}

@media (max-width: 580px) {
  .mobile-product-dropdown summary {
    font-size: clamp(46px, 13vw, 62px) !important;
  }

  .mobile-product-links a {
    font-size: clamp(26px, 7vw, 36px) !important;
  }
}


/* Final mobile menu polish: equal font sizes + aesthetic product dropdown */
@media (max-width: 900px) {
  .mobile-menu {
    background:
      radial-gradient(circle at 82% 10%, rgba(255,255,255,.22), transparent 28%),
      linear-gradient(180deg, var(--accent), #d7ff3f);
  }

  .mobile-menu nav {
    gap: 0;
  }

  .mobile-menu nav > a,
  .mobile-product-dropdown summary {
    font: 800 clamp(44px, 12vw, 68px)/1.02 Manrope, sans-serif !important;
    letter-spacing: -0.065em !important;
    padding: 13px 0 !important;
    color: var(--ink) !important;
  }

  .mobile-product-dropdown {
    margin: 8px 0 12px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(17,19,17,.14) !important;
    border-bottom: 1px solid rgba(17,19,17,.14) !important;
  }

  .mobile-product-dropdown summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer;
    list-style: none;
  }

  .mobile-product-dropdown summary::-webkit-details-marker {
    display: none;
  }

  .mobile-product-dropdown summary span {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(17,19,17,.08);
    border: 1px solid rgba(17,19,17,.14);
    font-size: 20px !important;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .25s ease, background .25s ease;
  }

  .mobile-product-dropdown[open] summary span {
    transform: rotate(180deg);
    background: var(--ink);
    color: #fff;
  }

  .mobile-product-links {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    padding: 10px 0 22px 0 !important;
  }

  .mobile-product-links a {
    position: relative;
    min-height: 66px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px !important;
    border-radius: 999px;
    border: 1px solid rgba(17,19,17,.13);
    background: rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    color: rgba(17,19,17,.82) !important;
    font: 800 clamp(24px, 7vw, 38px)/1 Manrope, sans-serif !important;
    letter-spacing: -0.045em !important;
    text-transform: none !important;
    opacity: 1 !important;
    transition: transform .22s ease, background .22s ease, color .22s ease;
  }

  .mobile-product-links a::after {
    content: "↗";
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(17,19,17,.08);
    font-size: 16px;
    transform: translate(2px,-2px);
  }

  .mobile-product-links a:hover,
  .mobile-product-links a:focus {
    transform: translateX(4px);
    background: rgba(255,255,255,.46);
    color: var(--ink) !important;
  }

  .mobile-menu p {
    font-size: 12px !important;
    letter-spacing: .18em !important;
    color: rgba(17,19,17,.78);
    padding-right: 180px;
  }
}

@media (max-width: 580px) {
  .mobile-menu {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  .mobile-menu nav > a,
  .mobile-product-dropdown summary {
    font-size: clamp(52px, 12.8vw, 64px) !important;
    line-height: 1.02 !important;
  }

  .mobile-product-links a {
    min-height: 58px;
    padding: 0 18px !important;
    font-size: clamp(24px, 7.2vw, 34px) !important;
  }

  .mobile-product-dropdown summary span {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 18px !important;
  }
}


/* Final mobile navbar font reduction */
@media (max-width: 900px) {
  .mobile-menu nav > a,
  .mobile-product-dropdown summary {
    font-size: clamp(36px, 9.5vw, 54px) !important;
    line-height: 1.05 !important;
    padding: 10px 0 !important;
  }

  .mobile-product-links a {
    min-height: 52px !important;
    font-size: clamp(21px, 5.8vw, 30px) !important;
  }
}

@media (max-width: 580px) {
  .mobile-menu nav > a,
  .mobile-product-dropdown summary {
    font-size: clamp(40px, 10.5vw, 52px) !important;
    line-height: 1.05 !important;
    padding: 10px 0 !important;
  }

  .mobile-product-links a {
    min-height: 52px !important;
    font-size: clamp(21px, 6vw, 29px) !important;
  }
}


/* JOOLA catalog polish: official images, clean product cards */
.product-visual {
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.98), rgba(233,232,225,.92)) !important;
}

.product-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 30px !important;
  mix-blend-mode: normal;
  transition: transform .35s ease;
}

.product-card:hover .product-visual img {
  transform: scale(1.04);
}

.modal-product-visual {
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.96), rgba(233,232,225,.92)) !important;
}

.modal-product-visual img {
  object-fit: contain !important;
  padding: 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

@media (max-width: 580px) {
  .product-visual img {
    padding: 24px !important;
  }
}

/* FINAL FIX: product catalog display polish */
.product-grid:empty::before {
  content: "Loading products...";
  display: block;
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
}
.product-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 30px !important;
  background: transparent !important;
}
.product-card:hover .product-visual img { transform: scale(1.04); }


/* Final visibility fix for products and JOOLA catalogue */
.catalog-results .product-grid,
.product-grid {
  align-items: stretch;
}

.product-card {
  min-height: 520px;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

.product-visual {
  min-height: 330px;
  height: 330px !important;
  background: #f4f3ee !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.product-visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.product-info {
  flex: 1;
  background: #fff;
  position: relative;
  z-index: 2;
}

.product-name {
  display: block !important;
  overflow: visible !important;
}

.product-grid:empty::before {
  content: "Loading products...";
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
}

.reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 580px) {
  .product-card {
    min-height: 500px;
  }
  .product-visual {
    min-height: 320px;
    height: 320px !important;
  }
}


/* Customize page: brand/product dropdown section */
.brand-product-builder-group {
  background: linear-gradient(135deg, rgba(215,255,63,.12), rgba(255,255,255,.86));
  border-radius: 28px;
  padding: 26px;
  border: 1px solid rgba(17,19,17,.10);
}

.builder-helper-text {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.65;
  margin: -4px 0 22px;
}

.brand-product-selectors {
  display: grid;
  gap: 14px;
}

.brand-product-row {
  display: grid;
  grid-template-columns: 1.05fr minmax(190px,.48fr) minmax(260px,.85fr);
  gap: 14px;
  align-items: end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 30px rgba(17,19,17,.04);
}

.brand-product-row > div:first-child {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  align-items: center;
}

.selector-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font: 900 13px Manrope, sans-serif;
}

.brand-product-row h3 {
  margin: 0;
  font: 900 22px/1 Manrope, sans-serif;
  letter-spacing: -.045em;
}

.brand-product-row p {
  grid-column: 2;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.brand-product-row label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font: 900 11px Manrope, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand-product-row select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  background: #fff;
  color: var(--ink);
  font: 800 14px Manrope, sans-serif;
  outline: none;
  text-transform: none;
  letter-spacing: normal;
}

.brand-product-row select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(215,255,63,.42);
}

.selected-brand-products {
  margin-top: 18px;
  padding: 20px;
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
}

#selectedBrandProductLines {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.selected-brand-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}

.selected-brand-line span {
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.selected-brand-line strong {
  text-align: right;
  font-size: 13px;
}

.selected-brand-line small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.52);
  font-weight: 600;
}

.brand-product-summary-line strong {
  max-width: 210px;
  text-align: right;
}

@media (max-width: 980px) {
  .brand-product-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .brand-product-row > div:first-child {
    grid-template-columns: 42px 1fr;
  }
}

@media (max-width: 580px) {
  .brand-product-builder-group {
    padding: 18px;
    border-radius: 22px;
  }

  .brand-product-row {
    padding: 14px;
    border-radius: 20px;
  }

  .selected-brand-line {
    flex-direction: column;
    gap: 6px;
  }

  .selected-brand-line strong {
    text-align: left;
  }
}


/* Final Customize Studio redesign */
.customize-studio-hero {
  min-height: 640px;
  padding: clamp(90px, 8vw, 130px) 4vw clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 78% 28%, rgba(215,255,63,.30), transparent 30%),
    radial-gradient(circle at 16% 74%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(135deg, #111311, #1d2518 62%, #0d0f0d);
  overflow: hidden;
  position: relative;
}

.customize-studio-hero::after {
  content: "CUSTOM";
  position: absolute;
  right: -4vw;
  bottom: -28px;
  font: 900 clamp(110px, 18vw, 280px)/1 Manrope, sans-serif;
  letter-spacing: -.09em;
  color: rgba(255,255,255,.035);
  pointer-events: none;
}

.studio-hero-copy {
  position: relative;
  z-index: 2;
}

.studio-hero-copy h1 {
  margin: 20px 0 22px;
  max-width: 980px;
  font: 900 clamp(58px, 8vw, 128px)/.86 Manrope, sans-serif;
  letter-spacing: -.085em;
}

.studio-hero-copy p {
  max-width: 640px;
  color: rgba(255,255,255,.70);
  line-height: 1.75;
  font-size: 17px;
}

.studio-racket-card {
  min-height: 460px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(15px);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 2;
}

.studio-racket-card::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(215,255,63,.16);
  filter: blur(6px);
}

.studio-racket {
  width: 320px;
  height: 460px;
  position: relative;
  transform: rotate(-12deg);
  filter: drop-shadow(0 30px 35px rgba(0,0,0,.38));
}

.studio-face {
  position: absolute;
  width: 210px;
  height: 250px;
  top: 28px;
  border-radius: 50%;
  border: 14px solid #080908;
  box-shadow: inset -24px -26px 36px rgba(0,0,0,.22);
}

.studio-face-red {
  left: 30px;
  background: #d8312b;
}

.studio-face-black {
  right: 30px;
  background: #111311;
  transform: rotate(12deg);
}

.studio-handle {
  position: absolute;
  width: 80px;
  height: 218px;
  left: 120px;
  top: 248px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(90deg, #8a4f2e, #e9b17c, #935531);
  border: 10px solid #080908;
  border-top: 0;
}

.studio-floating-total {
  position: absolute;
  right: 26px;
  bottom: 26px;
  padding: 18px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
}

.studio-floating-total span {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  margin-bottom: 6px;
}

.studio-floating-total strong {
  font: 900 28px Manrope, sans-serif;
}

.customize-studio-section {
  background: var(--paper);
}

.studio-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .55fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 32px;
}

.studio-section-heading h2 {
  margin: 10px 0 0;
  font: 900 clamp(46px, 6.5vw, 92px)/.9 Manrope, sans-serif;
  letter-spacing: -.075em;
}

.studio-section-heading p {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.7;
}

.customize-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 430px);
  gap: 24px;
  align-items: start;
}

.racket-studio-form {
  display: grid;
  gap: 14px;
}

.studio-selector-card {
  background: rgba(255,255,255,.68);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  display: grid;
  gap: 18px;
  box-shadow: 0 16px 42px rgba(17,19,17,.045);
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

.studio-selector-card:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(17,19,17,.22);
}

.studio-selector-intro {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
}

.studio-selector-intro > span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--ink);
  font: 900 14px Manrope, sans-serif;
}

.studio-selector-intro h3 {
  margin: 0;
  font: 900 clamp(24px, 3vw, 36px)/1 Manrope, sans-serif;
  letter-spacing: -.055em;
}

.studio-selector-intro p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.studio-select-grid {
  display: grid;
  grid-template-columns: minmax(160px, .45fr) minmax(240px, 1fr);
  gap: 12px;
}

.studio-select-grid.one {
  grid-template-columns: 1fr;
}

.studio-select-grid label,
.studio-service-card label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font: 900 11px Manrope, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-select-grid select,
.studio-service-card select {
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  outline: none;
  font: 800 14px Manrope, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

.studio-select-grid select:focus,
.studio-service-card select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(215,255,63,.36);
}

.studio-colour-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.studio-colour-filter small {
  color: var(--muted);
  font: 900 11px Manrope, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-right: 4px;
}

.studio-colour-filter label {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 900;
  cursor: pointer;
}

.studio-colour-filter input {
  position: absolute;
  opacity: 0;
}

.studio-colour-filter label:has(input:checked) {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.studio-summary-card {
  position: sticky;
  top: 92px;
  background: var(--ink);
  color: #fff;
  border-radius: 34px;
  padding: 30px;
  box-shadow: 0 24px 60px rgba(17,19,17,.18);
  overflow: hidden;
}

.studio-summary-card::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -110px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(215,255,63,.18);
}

.studio-summary-card h2 {
  position: relative;
  z-index: 2;
  margin: 10px 0 22px;
  font: 900 clamp(36px, 4vw, 56px)/.92 Manrope, sans-serif;
  letter-spacing: -.065em;
}

.studio-summary-lines {
  position: relative;
  z-index: 2;
  display: grid;
  border-top: 1px solid rgba(255,255,255,.12);
}

.studio-summary-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.studio-summary-line span {
  color: rgba(255,255,255,.58);
  font-size: 13px;
}

.studio-summary-line strong {
  text-align: right;
  max-width: 240px;
  font-size: 13px;
}

.studio-summary-line em {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  color: var(--accent);
}

.studio-summary-line small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.50);
  font-weight: 600;
}

.studio-total-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px 0 20px;
}

.studio-total-row span {
  color: rgba(255,255,255,.62);
}

.studio-total-row strong {
  font: 900 30px Manrope, sans-serif;
}

.studio-summary-card .button {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--accent);
  color: var(--ink);
}

.studio-summary-card p {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.54);
  line-height: 1.55;
  font-size: 12px;
  margin: 18px 0 0;
}

@media (max-width: 1080px) {
  .customize-studio-hero,
  .customize-studio-layout,
  .studio-section-heading {
    grid-template-columns: 1fr;
  }

  .studio-summary-card {
    position: static;
  }

  .studio-racket-card {
    min-height: 400px;
  }
}

@media (max-width: 680px) {
  .customize-studio-hero {
    min-height: auto;
    padding: 90px 22px 54px;
  }

  .studio-hero-copy h1 {
    font-size: clamp(48px, 14vw, 76px);
  }

  .studio-racket-card {
    min-height: 330px;
    border-radius: 28px;
  }

  .studio-racket {
    transform: rotate(-12deg) scale(.72);
  }

  .studio-section-heading h2 {
    font-size: clamp(42px, 12vw, 64px);
  }

  .studio-selector-card,
  .studio-summary-card {
    border-radius: 24px;
    padding: 20px;
  }

  .studio-selector-intro {
    grid-template-columns: 44px 1fr;
  }

  .studio-selector-intro > span {
    width: 44px;
    height: 44px;
  }

  .studio-select-grid {
    grid-template-columns: 1fr;
  }

  .studio-summary-line {
    flex-direction: column;
    gap: 6px;
  }

  .studio-summary-line strong {
    text-align: left;
    max-width: none;
  }
}


/* Final Studio v2: Extra accessories multi-select + aesthetic dropdown polish */
.studio-accessory-card {
  background:
    radial-gradient(circle at 94% 10%, rgba(215,255,63,.22), transparent 25%),
    rgba(255,255,255,.76);
}

.studio-accessory-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: end;
}

.studio-accessory-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
  font: 900 11px Manrope, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-accessory-toolbar select,
.studio-accessory-toolbar input,
.studio-select-grid select,
.studio-service-card select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 8px 22px rgba(17,19,17,.04), inset 0 1px 0 rgba(255,255,255,.8);
}

.studio-accessory-toolbar input {
  background-image: none;
}

.studio-select-grid select:hover,
.studio-service-card select:hover,
.studio-accessory-toolbar select:hover,
.studio-accessory-toolbar input:hover {
  border-color: rgba(17,19,17,.28);
  box-shadow: 0 14px 28px rgba(17,19,17,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.studio-accessory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 430px;
  overflow: auto;
  padding: 4px 6px 4px 0;
}

.studio-accessory-grid::-webkit-scrollbar {
  width: 8px;
}

.studio-accessory-grid::-webkit-scrollbar-thumb {
  background: rgba(17,19,17,.18);
  border-radius: 999px;
}

.studio-accessory-option {
  position: relative;
  min-height: 118px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.studio-accessory-option:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgba(17,19,17,.24);
  box-shadow: 0 16px 32px rgba(17,19,17,.08);
}

.studio-accessory-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.studio-accessory-option:has(input:checked) {
  background: #f4ffe1;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink), 0 18px 34px rgba(17,19,17,.08);
}

.studio-accessory-option:has(input:checked)::after {
  content: "✓";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.studio-accessory-image {
  width: 78px;
  height: 78px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f4f3ee;
  overflow: hidden;
  border: 1px solid rgba(17,19,17,.08);
}

.studio-accessory-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.studio-accessory-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--ink);
  font: 900 20px Manrope, sans-serif;
}

.studio-accessory-info {
  min-width: 0;
}

.studio-accessory-info b {
  display: block;
  font: 900 14px/1.2 Manrope, sans-serif;
  letter-spacing: -.02em;
}

.studio-accessory-info small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.studio-accessory-option > strong {
  align-self: end;
  white-space: nowrap;
  font: 900 14px Manrope, sans-serif;
}

.studio-accessory-empty {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  color: var(--muted);
  text-align: center;
  background: rgba(255,255,255,.6);
}

@media (max-width: 980px) {
  .studio-accessory-toolbar,
  .studio-accessory-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .studio-accessory-option {
    grid-template-columns: 64px 1fr;
  }

  .studio-accessory-option > strong {
    grid-column: 2;
    justify-self: start;
  }

  .studio-accessory-image {
    width: 64px;
    height: 64px;
  }
}


/* Final Customize UI polish: minimalist custom dropdowns */
.studio-selector-card,
.studio-accessory-card,
.racket-studio-form {
  overflow: visible !important;
}

.studio-selector-card {
  position: relative;
}

.studio-select-grid label,
.studio-service-card label,
.studio-accessory-toolbar label {
  position: relative;
}

.ttw-native-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  left: -9999px !important;
}

.ttw-custom-select {
  position: relative;
  z-index: 20;
  width: 100%;
}

.studio-selector-card:has(.ttw-custom-select.open) {
  z-index: 120;
}

.ttw-custom-select-button {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(17,19,17,.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  color: var(--ink);
  padding: 0 18px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(17,19,17,.06), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
  text-align: left;
}

.ttw-custom-select-button:hover {
  transform: translateY(-1px);
  border-color: rgba(17,19,17,.26);
  box-shadow: 0 18px 34px rgba(17,19,17,.09), inset 0 1px 0 rgba(255,255,255,.96);
}

.ttw-custom-select.open .ttw-custom-select-button {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(215,255,63,.35), 0 18px 34px rgba(17,19,17,.10);
}

.ttw-selected-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 900 15px Manrope, sans-serif;
  letter-spacing: -.02em;
}

.ttw-selected-main span {
  color: var(--muted);
  margin: 0 4px;
}

.ttw-select-arrow {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(17,19,17,.06);
  border: 1px solid rgba(17,19,17,.08);
  font: 900 16px Manrope, sans-serif;
  transition: transform .24s ease, background .24s ease, color .24s ease;
}

.ttw-custom-select.open .ttw-select-arrow {
  transform: rotate(180deg);
  background: var(--ink);
  color: #fff;
}

.ttw-custom-select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 400;
  max-height: 330px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(17,19,17,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 70px rgba(17,19,17,.18);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transform-origin: top;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.ttw-custom-select.open .ttw-custom-select-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ttw-custom-select-panel::-webkit-scrollbar {
  width: 8px;
}

.ttw-custom-select-panel::-webkit-scrollbar-track {
  background: transparent;
}

.ttw-custom-select-panel::-webkit-scrollbar-thumb {
  background: rgba(17,19,17,.16);
  border-radius: 999px;
}

.ttw-custom-option {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, transform .18s ease;
}

.ttw-custom-option:hover {
  background: #f4f3ee;
  transform: translateX(2px);
}

.ttw-custom-option.active {
  background: var(--accent);
}

.ttw-custom-option.active::before {
  content: "✓";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font: 900 13px Manrope, sans-serif;
  grid-column: 2;
  grid-row: 1;
}

.ttw-option-name {
  min-width: 0;
  font: 900 14px/1.25 Manrope, sans-serif;
  letter-spacing: -.025em;
}

.ttw-option-price {
  grid-column: 1 / -1;
  color: var(--muted);
  font: 800 12px Manrope, sans-serif;
  margin-top: -4px;
}

.ttw-custom-option.active .ttw-option-price {
  color: rgba(17,19,17,.66);
}

/* Extra accessories area refinement */
.studio-accessory-toolbar {
  background: rgba(244,243,238,.68);
  border: 1px solid rgba(17,19,17,.08);
  border-radius: 26px;
  padding: 14px;
  margin-top: 2px;
}

.studio-accessory-toolbar input {
  min-height: 58px;
  border: 1px solid rgba(17,19,17,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  padding: 0 20px;
  font: 900 15px Manrope, sans-serif;
  box-shadow: 0 12px 28px rgba(17,19,17,.05), inset 0 1px 0 rgba(255,255,255,.9);
  outline: none;
}

.studio-accessory-toolbar input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(215,255,63,.35), 0 16px 32px rgba(17,19,17,.08);
}

.studio-accessory-grid {
  margin-top: 4px;
  padding: 6px 8px 6px 0;
}

.studio-accessory-option {
  border-radius: 22px !important;
}

@media (max-width: 720px) {
  .ttw-custom-select-panel {
    max-height: 280px;
    border-radius: 20px;
  }

  .ttw-custom-option {
    min-height: 54px;
  }

  .ttw-selected-main {
    font-size: 14px;
  }
}


/* Final responsive fix: no horizontal scrolling + cleaner mobile Customize layout */
html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  min-width: 0;
}

.customize-studio-hero,
.customize-studio-section,
.customize-studio-layout,
.racket-studio-form,
.studio-selector-card,
.studio-accessory-card,
.studio-summary-card {
  max-width: 100%;
}

.customize-studio-section {
  overflow-x: clip;
}

.studio-select-grid,
.studio-accessory-toolbar,
.studio-accessory-grid {
  min-width: 0;
}

.studio-select-grid label,
.studio-accessory-toolbar label,
.studio-service-card label,
.ttw-custom-select,
.ttw-custom-select-button,
.studio-accessory-toolbar input {
  min-width: 0;
  max-width: 100%;
}

.ttw-custom-select-panel {
  width: 100%;
  max-width: calc(100vw - 48px);
}

.studio-accessory-card::after {
  content: "Showing up to 6 accessories";
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-top: -4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(17,19,17,.06);
  color: var(--muted);
  font: 800 11px Manrope, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .customize-studio-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .racket-studio-form,
  .studio-summary-card {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .customize-studio-hero {
    width: 100%;
    padding: 86px 18px 42px !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .customize-studio-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .studio-section-heading {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
  }

  .studio-section-heading h2 {
    font-size: clamp(36px, 11vw, 58px) !important;
    line-height: .95 !important;
  }

  .studio-section-heading p {
    font-size: 14px;
  }

  .studio-selector-card {
    padding: 18px !important;
    border-radius: 24px !important;
    overflow: visible !important;
  }

  .studio-selector-intro {
    grid-template-columns: 42px 1fr !important;
    gap: 12px !important;
  }

  .studio-selector-intro > span {
    width: 42px !important;
    height: 42px !important;
  }

  .studio-selector-intro h3 {
    font-size: clamp(26px, 8vw, 38px) !important;
  }

  .studio-selector-intro p {
    font-size: 13px !important;
  }

  .studio-select-grid,
  .studio-accessory-toolbar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ttw-custom-select-button,
  .studio-accessory-toolbar input {
    min-height: 54px !important;
    padding-left: 16px !important;
    padding-right: 14px !important;
  }

  .ttw-selected-main {
    font-size: 13px !important;
    white-space: nowrap;
  }

  .ttw-select-arrow {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .ttw-custom-select-panel {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 260px;
    border-radius: 20px;
  }

  .ttw-option-name {
    font-size: 13px !important;
  }

  .studio-accessory-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .studio-accessory-option {
    grid-template-columns: 60px minmax(0, 1fr) auto !important;
    min-height: 96px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .studio-accessory-image {
    width: 60px !important;
    height: 60px !important;
  }

  .studio-accessory-info b {
    font-size: 13px !important;
  }

  .studio-accessory-info small {
    font-size: 11px !important;
  }

  .studio-accessory-option > strong {
    font-size: 12px !important;
  }

  .studio-summary-card {
    position: static !important;
    padding: 22px !important;
    border-radius: 26px !important;
  }

  .whatsapp-consult {
    right: 14px !important;
    max-width: calc(100vw - 28px);
  }
}

@media (max-width: 480px) {
  .customize-studio-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .studio-selector-card {
    padding: 16px !important;
  }

  .studio-accessory-option {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .studio-accessory-option > strong {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .studio-accessory-image {
    width: 54px !important;
    height: 54px !important;
  }

  .studio-racket-card {
    display: none !important;
  }
}


/* Rectified Customize responsiveness: remove side gaps and horizontal overflow */
body[data-page="customize"] {
  overflow-x: hidden !important;
}

body[data-page="customize"] main,
body[data-page="customize"] .customize-studio-section,
body[data-page="customize"] .customize-studio-layout,
body[data-page="customize"] .racket-studio-form,
body[data-page="customize"] .studio-selector-card,
body[data-page="customize"] .studio-summary-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body[data-page="customize"] .customize-studio-section.section {
  padding-left: clamp(14px, 3vw, 46px) !important;
  padding-right: clamp(14px, 3vw, 46px) !important;
}

body[data-page="customize"] .customize-studio-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) !important;
  gap: clamp(16px, 2.4vw, 28px) !important;
  align-items: start;
}

body[data-page="customize"] .studio-selector-card {
  box-sizing: border-box;
}

body[data-page="customize"] .studio-select-grid,
body[data-page="customize"] .studio-accessory-toolbar {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) !important;
}

body[data-page="customize"] .ttw-selected-main,
body[data-page="customize"] .studio-accessory-info b,
body[data-page="customize"] .studio-summary-line strong {
  overflow-wrap: anywhere;
}

/* Earlier switch point so the summary no longer creates right-side overflow on tablets/laptops */
@media (max-width: 1320px) {
  body[data-page="customize"] .customize-studio-layout {
    grid-template-columns: 1fr !important;
  }

  body[data-page="customize"] .studio-summary-card {
    position: static !important;
    max-width: 100% !important;
  }
}

/* Tablet/mobile clean layout */
@media (max-width: 900px) {
  body[data-page="customize"] .customize-studio-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 84px 18px 42px !important;
  }

  body[data-page="customize"] .studio-racket-card {
    min-height: 260px !important;
    border-radius: 26px !important;
  }

  body[data-page="customize"] .customize-studio-section.section {
    padding: 46px 16px 74px !important;
  }

  body[data-page="customize"] .studio-section-heading {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  body[data-page="customize"] .studio-section-heading h2 {
    font-size: clamp(36px, 10vw, 58px) !important;
    line-height: .96 !important;
  }

  body[data-page="customize"] .studio-selector-card {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body[data-page="customize"] .studio-selector-intro {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="customize"] .studio-selector-intro > span {
    width: 42px !important;
    height: 42px !important;
    font-size: 12px !important;
  }

  body[data-page="customize"] .studio-selector-intro h3 {
    font-size: clamp(28px, 8.5vw, 42px) !important;
    line-height: .95 !important;
  }

  body[data-page="customize"] .studio-selector-intro p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body[data-page="customize"] .studio-select-grid,
  body[data-page="customize"] .studio-accessory-toolbar {
    grid-template-columns: 1fr !important;
  }

  body[data-page="customize"] .ttw-custom-select-button,
  body[data-page="customize"] .studio-accessory-toolbar input,
  body[data-page="customize"] .studio-select-grid select,
  body[data-page="customize"] .studio-service-card select {
    min-height: 52px !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 12px !important;
  }

  body[data-page="customize"] .ttw-selected-main {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page="customize"] .ttw-custom-select-panel {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: 245px !important;
    border-radius: 18px !important;
  }

  body[data-page="customize"] .studio-colour-filter {
    gap: 8px !important;
  }

  body[data-page="customize"] .studio-colour-filter small {
    width: 100%;
    margin-bottom: 2px;
  }

  body[data-page="customize"] .studio-colour-filter label {
    min-height: 40px !important;
    padding: 0 16px !important;
  }

  body[data-page="customize"] .studio-summary-card {
    border-radius: 26px !important;
    padding: 22px !important;
  }
}

/* Small phones: tighter cards, no empty right side, no sideways scroll */
@media (max-width: 560px) {
  body[data-page="customize"] .customize-studio-section.section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-page="customize"] .racket-studio-form {
    gap: 12px !important;
  }

  body[data-page="customize"] .studio-selector-card {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body[data-page="customize"] .studio-racket-card {
    display: none !important;
  }

  body[data-page="customize"] .studio-selector-intro {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  body[data-page="customize"] .studio-selector-intro > span {
    width: 36px !important;
    height: 36px !important;
  }

  body[data-page="customize"] .studio-selector-intro h3 {
    font-size: clamp(25px, 8.4vw, 34px) !important;
  }

  body[data-page="customize"] .ttw-custom-select-button,
  body[data-page="customize"] .studio-accessory-toolbar input {
    min-height: 48px !important;
    border-radius: 18px !important;
  }

  body[data-page="customize"] .studio-accessory-toolbar {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  body[data-page="customize"] .studio-accessory-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="customize"] .studio-accessory-option {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 88px !important;
    padding: 10px !important;
  }

  body[data-page="customize"] .studio-accessory-option > strong {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  body[data-page="customize"] .studio-accessory-image {
    width: 54px !important;
    height: 54px !important;
  }

  body[data-page="customize"] .studio-summary-line {
    flex-direction: column !important;
    gap: 6px !important;
  }

  body[data-page="customize"] .studio-summary-line strong {
    text-align: left !important;
    max-width: none !important;
  }

  body[data-page="customize"] .whatsapp-consult {
    right: 12px !important;
    left: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}


/* FINAL hard fix for Customize page layout:
   one-column clean layout, no reserved right column, no horizontal movement */
body[data-page="customize"],
body[data-page="customize"] html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body[data-page="customize"] main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body[data-page="customize"] .customize-studio-section.section {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  overflow: visible !important;
}

body[data-page="customize"] .customize-studio-layout {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body[data-page="customize"] .racket-studio-form {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  gap: 18px !important;
}

body[data-page="customize"] .studio-summary-card {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 22px !important;
}

body[data-page="customize"] .studio-selector-card,
body[data-page="customize"] .studio-accessory-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

body[data-page="customize"] .studio-accessory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

body[data-page="customize"] .studio-accessory-option {
  width: 100% !important;
  max-width: 100% !important;
}

/* Make the accessory cards compact so the page feels intentional */
body[data-page="customize"] .studio-accessory-option {
  min-height: 96px !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
}

body[data-page="customize"] .studio-accessory-image {
  width: 64px !important;
  height: 64px !important;
}

body[data-page="customize"] .studio-accessory-info b {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

body[data-page="customize"] .studio-select-grid,
body[data-page="customize"] .studio-accessory-toolbar {
  width: 100% !important;
  max-width: 100% !important;
}

/* Tablet and mobile */
@media (max-width: 760px) {
  body[data-page="customize"] .customize-studio-section.section {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-page="customize"] .studio-selector-card,
  body[data-page="customize"] .studio-accessory-card {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body[data-page="customize"] .studio-selector-intro {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  body[data-page="customize"] .studio-selector-intro > span {
    width: 38px !important;
    height: 38px !important;
  }

  body[data-page="customize"] .studio-selector-intro h3 {
    font-size: clamp(26px, 7.6vw, 38px) !important;
  }

  body[data-page="customize"] .studio-select-grid,
  body[data-page="customize"] .studio-accessory-toolbar,
  body[data-page="customize"] .studio-accessory-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="customize"] .studio-accessory-option {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 90px !important;
  }

  body[data-page="customize"] .studio-accessory-option > strong {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  body[data-page="customize"] .studio-accessory-image {
    width: 58px !important;
    height: 58px !important;
  }

  body[data-page="customize"] .ttw-custom-select-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Small phones */
@media (max-width: 480px) {
  body[data-page="customize"] .customize-studio-section.section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body[data-page="customize"] .studio-selector-card,
  body[data-page="customize"] .studio-accessory-card {
    padding: 14px !important;
  }

  body[data-page="customize"] .ttw-selected-main {
    font-size: 12px !important;
  }
}


/* FINAL TRUE FIX: Customize page mobile overflow/clipping
   Cause: earlier desktop hero/card styles kept large 100vw-style text/visuals and grid remnants,
   so the mobile browser created a horizontal canvas. This reset makes the customize page
   use strict border-box widths and compact mobile typography. */
body[data-page="customize"] {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
  position: relative;
}

body[data-page="customize"] * {
  box-sizing: border-box !important;
}

body[data-page="customize"] main,
body[data-page="customize"] section,
body[data-page="customize"] div,
body[data-page="customize"] form,
body[data-page="customize"] aside {
  max-width: 100% !important;
}

body[data-page="customize"] .customize-studio-hero {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: auto !important;
  display: block !important;
  padding: clamp(70px, 9vw, 110px) clamp(18px, 4vw, 56px) clamp(42px, 6vw, 78px) !important;
  overflow: hidden !important;
}

body[data-page="customize"] .customize-studio-hero::after {
  display: none !important;
}

body[data-page="customize"] .studio-hero-copy {
  width: min(100%, 980px) !important;
  margin: 0 !important;
}

body[data-page="customize"] .studio-hero-copy h1 {
  max-width: 100% !important;
  font-size: clamp(48px, 8vw, 118px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body[data-page="customize"] .studio-hero-copy p {
  max-width: 680px !important;
}

body[data-page="customize"] .studio-racket-card {
  display: none !important;
}

body[data-page="customize"] .customize-studio-section.section {
  width: 100% !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: clamp(38px, 5vw, 70px) clamp(16px, 3vw, 34px) clamp(68px, 7vw, 110px) !important;
  overflow: visible !important;
}

body[data-page="customize"] .studio-section-heading {
  display: block !important;
  width: 100% !important;
  margin-bottom: 24px !important;
}

body[data-page="customize"] .studio-section-heading h2 {
  max-width: 900px !important;
  font-size: clamp(42px, 7vw, 86px) !important;
  line-height: .92 !important;
  letter-spacing: -.07em !important;
}

body[data-page="customize"] .studio-section-heading p {
  max-width: 760px !important;
}

body[data-page="customize"] .customize-studio-layout {
  display: block !important;
  width: 100% !important;
}

body[data-page="customize"] .racket-studio-form {
  width: 100% !important;
  display: grid !important;
  gap: 16px !important;
}

body[data-page="customize"] .studio-selector-card,
body[data-page="customize"] .studio-accessory-card,
body[data-page="customize"] .studio-summary-card {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body[data-page="customize"] .studio-summary-card {
  margin-top: 20px !important;
  position: static !important;
}

body[data-page="customize"] .studio-select-grid,
body[data-page="customize"] .studio-accessory-toolbar {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr) !important;
}

body[data-page="customize"] .ttw-custom-select-panel {
  max-width: 100% !important;
}

/* Mobile: use only one column and keep every element within viewport */
@media (max-width: 760px) {
  body[data-page="customize"] {
    overflow-x: hidden !important;
  }

  body[data-page="customize"] .customize-studio-hero {
    padding: 74px 16px 38px !important;
  }

  body[data-page="customize"] .studio-hero-copy h1 {
    font-size: clamp(38px, 11vw, 60px) !important;
    line-height: .94 !important;
    letter-spacing: -.06em !important;
  }

  body[data-page="customize"] .studio-hero-copy p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body[data-page="customize"] .customize-studio-section.section {
    padding: 34px 12px 72px !important;
  }

  body[data-page="customize"] .studio-section-heading h2 {
    font-size: clamp(34px, 10vw, 52px) !important;
    line-height: .96 !important;
  }

  body[data-page="customize"] .studio-section-heading p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  body[data-page="customize"] .studio-selector-card,
  body[data-page="customize"] .studio-accessory-card {
    padding: 14px !important;
    border-radius: 20px !important;
  }

  body[data-page="customize"] .studio-selector-intro {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-page="customize"] .studio-selector-intro > span {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }

  body[data-page="customize"] .studio-selector-intro h3 {
    font-size: clamp(25px, 8vw, 36px) !important;
    line-height: .96 !important;
  }

  body[data-page="customize"] .studio-selector-intro p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body[data-page="customize"] .studio-select-grid,
  body[data-page="customize"] .studio-accessory-toolbar,
  body[data-page="customize"] .studio-accessory-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="customize"] .ttw-custom-select-button,
  body[data-page="customize"] .studio-accessory-toolbar input {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    padding: 0 12px 0 14px !important;
  }

  body[data-page="customize"] .ttw-selected-main {
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page="customize"] .ttw-select-arrow {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  body[data-page="customize"] .ttw-custom-select-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 230px !important;
    border-radius: 16px !important;
  }

  body[data-page="customize"] .studio-accessory-grid {
    max-height: none !important;
    overflow: visible !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  body[data-page="customize"] .studio-accessory-option {
    width: 100% !important;
    min-height: 86px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body[data-page="customize"] .studio-accessory-option > strong {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  body[data-page="customize"] .studio-accessory-image {
    width: 52px !important;
    height: 52px !important;
  }

  body[data-page="customize"] .studio-summary-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  body[data-page="customize"] .studio-summary-line {
    flex-direction: column !important;
    gap: 5px !important;
  }

  body[data-page="customize"] .studio-summary-line strong {
    text-align: left !important;
    max-width: 100% !important;
  }

  body[data-page="customize"] .whatsapp-consult {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 430px) {
  body[data-page="customize"] .customize-studio-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-page="customize"] .customize-studio-section.section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body[data-page="customize"] .studio-hero-copy h1 {
    font-size: clamp(34px, 10.4vw, 48px) !important;
  }

  body[data-page="customize"] .studio-selector-card,
  body[data-page="customize"] .studio-accessory-card {
    padding: 12px !important;
  }
}


/* FINAL dropdown overlap fix:
   On the Customize page, open dropdowns expand in the page flow instead of floating
   over the next field. This prevents product/brand text from overlapping. */
body[data-page="customize"] .ttw-custom-select {
  position: relative !important;
  z-index: 1 !important;
}

body[data-page="customize"] .ttw-custom-select.open {
  z-index: 50 !important;
}

body[data-page="customize"] .ttw-custom-select-panel {
  pointer-events: none;
}

body[data-page="customize"] .ttw-custom-select.open .ttw-custom-select-panel {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 10px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  box-shadow: 0 18px 44px rgba(17,19,17,.12) !important;
}

body[data-page="customize"] .ttw-custom-select:not(.open) .ttw-custom-select-panel {
  position: absolute !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-page="customize"] .studio-select-grid label,
body[data-page="customize"] .studio-accessory-toolbar label,
body[data-page="customize"] .studio-service-card label {
  overflow: visible !important;
  z-index: auto !important;
}

body[data-page="customize"] .studio-select-grid {
  align-items: start !important;
}

body[data-page="customize"] .ttw-custom-option {
  min-height: 54px !important;
  padding: 12px 14px !important;
}

body[data-page="customize"] .ttw-custom-option.active {
  position: relative !important;
}

body[data-page="customize"] .ttw-custom-option.active::before {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

body[data-page="customize"] .ttw-custom-option.active .ttw-option-name,
body[data-page="customize"] .ttw-custom-option.active .ttw-option-price {
  padding-right: 38px !important;
}

@media (max-width: 760px) {
  body[data-page="customize"] .ttw-custom-select.open .ttw-custom-select-panel {
    max-height: 235px !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }

  body[data-page="customize"] .ttw-custom-option {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}


/* Final filter UX: Save Filter before applying product filters */
.save-filter-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0 18px;
}

.save-filter-button,
.clear-pending-filter-button {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 900 14px Manrope, sans-serif;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.save-filter-button {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.save-filter-button:hover,
.clear-pending-filter-button:hover {
  transform: translateY(-2px);
}

.clear-pending-filter-button {
  background: #fff;
  color: var(--ink);
}

.pending-filter-note {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(215,255,63,.32);
  color: var(--ink);
  font: 800 12px/1.45 Manrope, sans-serif;
}

.has-pending-filters {
  box-shadow: 0 0 0 3px rgba(215,255,63,.28), 0 18px 45px rgba(17,19,17,.08);
}

.fixed-product-filters .save-filter-actions,
.product-filters .save-filter-actions {
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 220px) minmax(150px, 190px);
  margin: 4px 0 0;
}

@media (max-width: 700px) {
  .fixed-product-filters .save-filter-actions,
  .product-filters .save-filter-actions {
    grid-template-columns: 1fr;
  }

  .save-filter-button,
  .clear-pending-filter-button {
    min-height: 46px;
  }
}


/* Final filter button placement at end of filter panel */
.save-filter-actions {
  order: 999;
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pending-filter-note {
  order: 1000;
}

.filters,
.filter-panel,
.catalog-sidebar,
.product-filters,
.fixed-product-filters {
  display: flex;
  flex-direction: column;
}

.fixed-product-filters {
  display: grid;
}

.fixed-product-filters .save-filter-actions {
  border-top: 0;
  padding-top: 0;
  align-self: end;
}

@media (max-width: 700px) {
  .save-filter-actions {
    margin-top: 18px !important;
  }
}


/* Safe Save Filter styling */
.save-filter-actions {
  width: 100%;
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.save-filter-button,
.clear-pending-filter-button {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font: 900 14px Manrope, sans-serif;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.save-filter-button {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.clear-pending-filter-button {
  background: #fff;
  color: var(--ink);
}

.save-filter-button:hover,
.clear-pending-filter-button:hover {
  transform: translateY(-2px);
}

.pending-filter-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(215,255,63,.32);
  color: var(--ink);
  font: 800 12px/1.45 Manrope, sans-serif;
}

.has-pending-filters {
  box-shadow: 0 0 0 3px rgba(215,255,63,.24), 0 18px 45px rgba(17,19,17,.08);
}


/* Official JOOLA product image polish */
.product-visual,
.modal-product-visual,
.fixed-modal-media,
.studio-accessory-image {
  background: radial-gradient(circle at 50% 35%, #fff, #f4f3ee 72%) !important;
}

.product-visual img,
.modal-product-visual img,
.fixed-modal-media img,
.studio-accessory-image img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  padding: 18px !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.product-card:hover .product-visual img {
  transform: scale(1.04);
}

.product-visual {
  min-height: 330px;
}


/* Official JOOLA image visibility fix */
.product-visual,
.modal-product-visual,
.fixed-modal-media,
.studio-accessory-image {
  background: radial-gradient(circle at 50% 34%, #ffffff, #f4f3ee 74%) !important;
}

.product-visual img,
.modal-product-visual img,
.fixed-modal-media img,
.studio-accessory-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

.product-visual {
  min-height: 330px !important;
}

.product-card:hover .product-visual img {
  transform: scale(1.04);
}

@media (max-width: 580px) {
  .product-visual img {
    padding: 14px !important;
  }
}

/* Visual image-card customizer */
.vc-hero{width:min(1180px,calc(100% - 32px));margin:42px auto 0;min-height:610px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr);gap:clamp(24px,5vw,70px);align-items:center;padding:clamp(34px,5vw,72px);color:#fff;background:radial-gradient(circle at 80% 18%,rgba(215,255,63,.28),transparent 26%),linear-gradient(135deg,#101310,#1b2417 64%,#0b0d0b);border-radius:44px;position:relative;overflow:hidden}.vc-hero:after{content:"CUSTOM";position:absolute;right:-30px;bottom:-36px;font:900 clamp(100px,17vw,240px)/1 Manrope,sans-serif;letter-spacing:-.09em;color:rgba(255,255,255,.035)}.vc-hero h1{margin:18px 0 20px;max-width:880px;font:900 clamp(58px,8vw,124px)/.86 Manrope,sans-serif;letter-spacing:-.085em}.vc-hero p{max-width:640px;color:rgba(255,255,255,.68);line-height:1.75;font-size:17px}.vc-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.vc-pills span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);font-weight:900;font-size:13px}.vc-racket-card{min-height:430px;border-radius:32px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));display:grid;place-items:center;position:relative;z-index:2;overflow:hidden}.vc-racket-card:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(215,255,63,.16);filter:blur(4px)}.vc-racket{width:310px;height:430px;position:relative;transform:rotate(-13deg);filter:drop-shadow(0 28px 32px rgba(0,0,0,.35))}.vc-racket i{position:absolute;top:26px;width:205px;height:245px;border-radius:50%;border:13px solid #080908;box-shadow:inset -22px -24px 34px rgba(0,0,0,.22)}.vc-fh{left:32px;background:#d8312b}.vc-bh{right:30px;background:#111311;transform:rotate(12deg)}.vc-racket b{position:absolute;width:78px;height:206px;left:118px;top:242px;border-radius:0 0 24px 24px;background:linear-gradient(90deg,#8a4f2e,#e9b17c,#935531);border:10px solid #080908;border-top:0}.vc-hero-total{position:absolute;right:22px;bottom:22px;padding:16px 20px;border-radius:20px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px)}.vc-hero-total span{display:block;color:rgba(255,255,255,.62);font-size:12px;margin-bottom:5px}.vc-hero-total strong{font:900 27px Manrope,sans-serif}.vc-section{padding-top:80px}.vc-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.48fr);gap:34px;align-items:end;margin-bottom:26px}.vc-heading h2{margin:10px 0 0;font:900 clamp(44px,6.6vw,92px)/.9 Manrope,sans-serif;letter-spacing:-.078em}.vc-heading p{margin:0 0 8px;color:var(--muted);line-height:1.7}.vc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,410px);gap:22px;align-items:start}.vc-steps{display:grid;gap:18px;min-width:0}.vc-block{border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.66);padding:24px;box-shadow:0 18px 44px rgba(17,19,17,.045);overflow:hidden}.vc-head{display:grid;grid-template-columns:52px minmax(0,1fr);gap:15px;align-items:center;margin-bottom:18px}.vc-head>span{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--ink);font-weight:900}.vc-head h3{margin:0;font:900 clamp(26px,3vw,38px)/1 Manrope,sans-serif;letter-spacing:-.055em}.vc-head p{margin:7px 0 0;color:var(--muted);line-height:1.45;font-size:14px}.vc-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none}.vc-tabs::-webkit-scrollbar{display:none}.vc-tab{border:1px solid var(--line);border-radius:999px;background:#fff;padding:10px 16px;font-weight:900;cursor:pointer;white-space:nowrap;transition:.22s}.vc-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}.vc-products{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,260px);gap:14px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}.vc-products::-webkit-scrollbar,.vc-accessories::-webkit-scrollbar{height:8px}.vc-products::-webkit-scrollbar-thumb,.vc-accessories::-webkit-scrollbar-thumb{background:rgba(17,19,17,.16);border-radius:999px}.vc-card{scroll-snap-align:start;border:1px solid var(--line);border-radius:24px;background:#fff;padding:12px;display:flex;flex-direction:column;min-height:382px;cursor:pointer;transition:.24s}.vc-card:hover{transform:translateY(-4px);border-color:rgba(17,19,17,.24);box-shadow:0 18px 36px rgba(17,19,17,.08)}.vc-card.selected{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 18px 38px rgba(17,19,17,.08);background:#f7ffe8}.vc-img{height:190px;border-radius:18px;background:radial-gradient(circle at center,#fff,#f4f3ee);display:grid;place-items:center;overflow:hidden;position:relative}.vc-img img{width:100%;height:100%;object-fit:contain;padding:14px}.vc-img span{position:absolute;left:10px;top:10px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid rgba(17,19,17,.08);font-size:11px;font-weight:900}.vc-fallback{width:100%;height:100%;display:grid;place-items:center;background:var(--accent);color:var(--ink);font:900 34px Manrope,sans-serif}.vc-info{padding:14px 2px 12px;flex:1}.vc-info h4{margin:0;font:900 16px/1.18 Manrope,sans-serif;letter-spacing:-.03em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vc-info p{margin:8px 0 10px;color:var(--muted);font-size:12px;font-weight:800}.vc-info strong{font:900 18px Manrope,sans-serif}.vc-colours{display:flex;gap:8px;margin:0 0 10px}.vc-colours button{flex:1;min-height:38px;border:1px solid var(--line);border-radius:999px;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:900;cursor:pointer}.vc-colours button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.vc-colours i,.red-dot,.black-dot{width:12px;height:12px;border-radius:50%;display:inline-block}.red-dot{background:#d8312b}.black-dot{background:#111311}.vc-select{min-height:42px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:900;cursor:pointer}.vc-card.selected .vc-select{background:var(--accent);color:var(--ink)}.vc-accessories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.vc-accessories .vc-card{min-height:318px}.vc-accessories .vc-img{height:140px}.vc-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.vc-service{min-height:96px;border:1px solid var(--line);border-radius:22px;background:#fff;padding:18px;text-align:left;cursor:pointer;transition:.22s}.vc-service.active{background:var(--ink);color:#fff;border-color:var(--ink)}.vc-service strong{display:block;margin-bottom:8px;font:900 16px/1.15 Manrope,sans-serif}.vc-service span{opacity:.72;font-weight:900}.vc-summary{position:sticky;top:96px;border-radius:30px;background:var(--ink);color:#fff;padding:28px;box-shadow:0 22px 60px rgba(17,19,17,.18);overflow:hidden}.vc-summary:after{content:"";position:absolute;right:-85px;top:-105px;width:220px;height:220px;border-radius:50%;background:rgba(215,255,63,.18)}.vc-summary h2{position:relative;z-index:1;margin:12px 0 20px;font:900 clamp(34px,4vw,52px)/.92 Manrope,sans-serif;letter-spacing:-.065em}#vcSummaryLines{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12)}.vc-line{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}.vc-line span{color:rgba(255,255,255,.58);font-size:13px}.vc-line strong{max-width:220px;text-align:right;font-size:13px}.vc-line em{font-style:normal;color:var(--accent);margin-left:6px}.vc-line small{display:block;margin-top:5px;color:rgba(255,255,255,.48)}.vc-total{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:24px 0 20px}.vc-total span{color:rgba(255,255,255,.62)}.vc-total strong{font:900 30px Manrope,sans-serif}.vc-summary .button{position:relative;z-index:1;width:100%;background:var(--accent);color:var(--ink)}.vc-summary p{position:relative;z-index:1;margin:16px 0 0;color:rgba(255,255,255,.54);line-height:1.5;font-size:12px}.vc-empty{grid-column:1/-1;padding:22px;border-radius:18px;background:rgba(255,255,255,.7);color:var(--muted);border:1px dashed var(--line)}
@media(max-width:1120px){.vc-layout{grid-template-columns:1fr}.vc-summary{position:static}}@media(max-width:900px){.vc-hero,.vc-heading{grid-template-columns:1fr}.vc-racket-card{min-height:330px}.vc-racket{transform:rotate(-13deg) scale(.72)}.vc-accessories,.vc-services{grid-template-columns:1fr}}@media(max-width:620px){.vc-hero{width:calc(100% - 20px);margin-top:24px;padding:74px 18px 32px;border-radius:28px}.vc-hero:after,.vc-racket-card{display:none}.vc-hero h1{font-size:clamp(40px,12vw,62px);line-height:.94}.vc-hero p{font-size:14px}.vc-section{padding-left:10px!important;padding-right:10px!important;padding-top:46px}.vc-heading h2{font-size:clamp(36px,11vw,56px);line-height:.94}.vc-block{padding:14px;border-radius:22px}.vc-head{grid-template-columns:38px minmax(0,1fr);gap:11px}.vc-head>span{width:38px;height:38px;font-size:12px}.vc-head h3{font-size:28px}.vc-products{grid-auto-columns:minmax(210px,78vw)}.vc-card{min-height:360px}.vc-img{height:170px}.vc-line{flex-direction:column;gap:5px}.vc-line strong{max-width:none;text-align:left}}


/* Mobile slider arrows + full landscape customizer banner */
.vc-slider-shell {
  position: relative;
  min-width: 0;
}

.vc-slider-arrow {
  display: none;
  position: absolute;
  top: 44%;
  z-index: 8;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(17, 19, 17, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(17, 19, 17, .14);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.vc-slider-prev {
  left: 8px;
}

.vc-slider-next {
  right: 8px;
}

.vc-slider-hint {
  display: none;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 760px) {
  .vc-slider-arrow {
    display: grid;
    place-items: center;
  }

  .vc-slider-hint {
    display: block;
  }

  .vc-slider-shell::before,
  .vc-slider-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 28px;
    width: 42px;
    z-index: 5;
    pointer-events: none;
  }

  .vc-slider-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(250, 250, 246, .92), transparent);
  }

  .vc-slider-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(250, 250, 246, .92), transparent);
  }

  .vc-products,
  .vc-accessories {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(218px, 78vw) !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 14px !important;
    padding: 2px 46px 8px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .vc-card {
    scroll-snap-align: center;
  }

  .vc-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 22px 0 0 !important;
    border-radius: 0 0 34px 34px !important;
    min-height: 360px !important;
    grid-template-columns: minmax(0, 1fr) 210px !important;
    gap: 12px !important;
    padding: 42px 18px 34px !important;
    background:
      radial-gradient(circle at 84% 24%, rgba(215,255,63,.44), transparent 26%),
      radial-gradient(circle at 8% 12%, rgba(255,255,255,.08), transparent 22%),
      linear-gradient(135deg, #101310 0%, #192416 58%, #0b0d0b 100%) !important;
  }

  .vc-hero::after {
    display: block !important;
    right: -16px;
    bottom: -16px;
    font-size: clamp(76px, 23vw, 145px);
    opacity: 1;
  }

  .vc-hero h1 {
    max-width: 520px;
    font-size: clamp(40px, 11vw, 70px) !important;
    line-height: .92 !important;
    margin-bottom: 14px !important;
  }

  .vc-hero p {
    max-width: 520px;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .vc-pills {
    margin-top: 18px !important;
    gap: 7px !important;
  }

  .vc-pills span {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  .vc-racket-card {
    display: grid !important;
    min-height: 250px !important;
    border-radius: 26px !important;
  }

  .vc-racket {
    transform: rotate(-13deg) scale(.45) !important;
  }

  .vc-hero-total {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 11px 12px !important;
  }

  .vc-hero-total strong {
    font-size: 20px !important;
  }
}

@media (max-width: 520px) {
  .vc-hero {
    min-height: 330px !important;
    grid-template-columns: 1fr 128px !important;
    padding: 36px 14px 28px !important;
  }

  .vc-racket-card {
    min-height: 212px !important;
    border-radius: 22px !important;
  }

  .vc-racket {
    transform: rotate(-13deg) scale(.34) !important;
  }

  .vc-hero-total span {
    font-size: 10px !important;
  }

  .vc-hero-total strong {
    font-size: 16px !important;
  }

  .vc-products,
  .vc-accessories {
    grid-auto-columns: minmax(215px, 82vw) !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
  }

  .vc-slider-arrow {
    width: 38px;
    height: 38px;
    font-size: 29px;
  }

  .vc-slider-prev {
    left: 5px;
  }

  .vc-slider-next {
    right: 5px;
  }
}


/* Final navbar dropdowns, home product slider, brand page and image alignment */
.product-category-menu {
  min-width: 245px;
}

.product-category-menu a::before,
.nav-dropdown-menu a[href^="products.html?category"]::before {
  content: "•";
  color: var(--accent);
  margin-right: 8px;
}

.brands-page-hero {
  background:
    radial-gradient(circle at 78% 25%, rgba(215,255,63,.36), transparent 28%),
    linear-gradient(135deg, #111311, #243121) !important;
}

.brand-jump-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.72);
}

.brand-jump-card label {
  font-weight: 900;
  color: var(--ink);
}

.brand-jump-card select {
  min-width: 240px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 18px;
  font: 900 14px Manrope, sans-serif;
}

.brand-directory-grid .brand-card img {
  width: 122px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
  margin: 18px 0 8px;
}

.home-top-picks .section-heading p {
  max-width: 620px;
}

.home-product-shell {
  position: relative;
  min-width: 0;
}

.home-top-picks .home-catalog,
.home-top-picks .filter-panel,
.home-top-picks .results-topbar {
  display: none !important;
}

.home-product-arrow {
  display: none;
  position: absolute;
  top: 43%;
  z-index: 12;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(17,19,17,.13);
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  box-shadow: 0 14px 32px rgba(17,19,17,.14);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.home-product-prev {
  left: 8px;
}

.home-product-next {
  right: 8px;
}

.home-note {
  margin-top: 18px;
}

.privacy-popup {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Standardized image boxes across catalogue, modal, cart and customizer */
.product-visual,
.modal-product-visual,
.fixed-modal-media,
.vc-img,
.visual-product-image,
.cart-item-visual {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 50% 38%, #ffffff, #f3f2ec 76%) !important;
}

.product-visual img,
.modal-product-visual img,
.fixed-modal-media img,
.vc-img img,
.visual-product-image img,
.cart-item-visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 14px !important;
  margin: auto !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
}

.product-card .product-visual {
  min-height: 300px;
  aspect-ratio: 1 / 1.06;
}

.vc-img img,
.visual-product-image img {
  max-width: 88% !important;
  max-height: 88% !important;
}

@media (max-width: 900px) {
  .mobile-menu nav {
    gap: 14px;
  }

  .mobile-product-links {
    max-height: 48vh;
    overflow-y: auto;
  }

  .brand-jump-card {
    align-items: stretch;
    flex-direction: column;
  }

  .brand-jump-card select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .home-product-arrow {
    display: grid;
    place-items: center;
  }

  .home-product-shell::before,
  .home-product-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 6;
    pointer-events: none;
  }

  .home-product-shell::before {
    left: 0;
    background: linear-gradient(90deg, rgba(250,250,246,.92), transparent);
  }

  .home-product-shell::after {
    right: 0;
    background: linear-gradient(270deg, rgba(250,250,246,.92), transparent);
  }

  #homeProductGrid.home-product-slider {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(230px, 82vw) !important;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 52px 8px !important;
  }

  #homeProductGrid.home-product-slider .product-card {
    scroll-snap-align: center;
  }
}

@media (max-width: 520px) {
  #homeProductGrid.home-product-slider {
    grid-auto-columns: minmax(220px, 84vw) !important;
    padding-left: 46px !important;
    padding-right: 46px !important;
  }

  .home-product-arrow {
    width: 38px;
    height: 38px;
    font-size: 29px;
  }

  .product-card .product-visual {
    min-height: 250px;
  }
}


/* FINAL clean minimal navbar fix */
.clean-navbar,.site-header.clean-navbar{position:sticky!important;top:14px!important;z-index:1200!important;width:min(1180px,calc(100% - 28px))!important;min-height:72px!important;margin:14px auto 0!important;padding:12px 16px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:18px!important;border:1px solid rgba(17,19,17,.08)!important;border-radius:999px!important;background:rgba(250,250,246,.94)!important;box-shadow:0 18px 52px rgba(17,19,17,.08)!important;backdrop-filter:blur(18px)!important}.clean-brand{min-width:max-content}.clean-brand .brand-mark{width:44px!important;height:44px!important}.clean-brand span:not(.brand-mark){font-size:14px!important;letter-spacing:.08em!important;white-space:nowrap!important}.clean-desktop-nav{display:flex!important;justify-content:center!important;align-items:center!important;gap:6px!important}.clean-desktop-nav>a,.clean-desktop-nav .nav-dropdown-trigger{min-height:42px!important;padding:0 13px!important;display:inline-flex!important;align-items:center!important;gap:5px!important;border-radius:999px!important;color:var(--ink)!important;font-weight:850!important;font-size:14px!important;line-height:1!important;transition:background .2s ease,transform .2s ease!important}.clean-desktop-nav>a:hover,.clean-desktop-nav .nav-dropdown:hover .nav-dropdown-trigger{background:rgba(17,19,17,.06)!important;transform:translateY(-1px)!important}.clean-desktop-nav .nav-dropdown{position:relative!important}.clean-desktop-nav .nav-dropdown-menu{position:absolute!important;top:calc(100% + 12px)!important;left:50%!important;transform:translate(-50%,10px)!important;min-width:210px!important;padding:10px!important;display:grid!important;gap:4px!important;border:1px solid rgba(17,19,17,.08)!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 22px 55px rgba(17,19,17,.12)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;backdrop-filter:blur(16px)!important}.clean-desktop-nav .nav-dropdown:hover .nav-dropdown-menu,.clean-desktop-nav .nav-dropdown:focus-within .nav-dropdown-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,0)!important}.clean-desktop-nav .nav-dropdown-menu a{min-height:38px!important;padding:0 12px!important;display:flex!important;align-items:center!important;border-radius:14px!important;font-size:13px!important;font-weight:850!important;color:var(--ink)!important}.clean-desktop-nav .nav-dropdown-menu a:hover{background:var(--accent)!important}.clean-header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important}.clean-mobile-menu,.mobile-menu.clean-mobile-menu,.mobile-menu{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}.mobile-menu.clean-mobile-menu nav,.clean-mobile-nav{display:grid!important;gap:10px!important}.mobile-menu.clean-mobile-menu p{margin:20px 0 0!important;color:var(--muted)!important;font-weight:800!important}@media(max-width:1020px){.clean-navbar,.site-header.clean-navbar{grid-template-columns:auto auto!important;justify-content:space-between!important;width:calc(100% - 20px)!important;top:10px!important;min-height:66px!important;padding:10px 12px!important;border-radius:24px!important}.clean-desktop-nav{display:none!important}.clean-navbar .menu-toggle{display:inline-flex!important}.clean-mobile-menu.open,.mobile-menu.clean-mobile-menu.open,.mobile-menu.open{display:block!important;position:fixed!important;inset:0!important;z-index:1100!important;padding:104px 18px 26px!important;background:rgba(250,250,246,.98)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;overflow-y:auto!important}.mobile-menu.clean-mobile-menu a,.mobile-menu.clean-mobile-menu summary{min-height:52px!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;border:1px solid rgba(17,19,17,.08)!important;border-radius:18px!important;background:#fff!important;color:var(--ink)!important;font-size:20px!important;font-weight:900!important;letter-spacing:-.03em!important;list-style:none!important}.mobile-menu.clean-mobile-menu summary::-webkit-details-marker{display:none!important}.mobile-product-links{display:grid!important;gap:8px!important;margin:8px 0 12px 16px!important}.mobile-product-links a{min-height:44px!important;font-size:15px!important;background:rgba(215,255,63,.24)!important}}@media(max-width:520px){.clean-brand span:not(.brand-mark){font-size:12px!important;letter-spacing:.06em!important}.clean-brand .brand-mark{width:38px!important;height:38px!important}.clean-navbar .icon-button{width:40px!important;height:40px!important}}


/* FINAL normal navbar restore + working mobile menu */
.site-header.normal-navbar,
.normal-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 5vw, 80px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
  border-radius: 0 !important;
  background: rgba(250, 250, 246, .94) !important;
  box-shadow: 0 10px 34px rgba(17, 19, 17, .04) !important;
  backdrop-filter: blur(18px) !important;
}

.normal-brand {
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.normal-brand .brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

.normal-brand > span:last-child,
.normal-brand span:not(.brand-mark) {
  font-size: 15px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.normal-desktop-nav,
.desktop-nav.normal-desktop-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  min-width: 0 !important;
}

.normal-desktop-nav > a,
.normal-desktop-nav .nav-dropdown-trigger {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--ink) !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  transition: color .18s ease, background .18s ease !important;
}

.normal-desktop-nav > a:hover,
.normal-desktop-nav .nav-dropdown:hover .nav-dropdown-trigger {
  color: #000 !important;
  background: transparent !important;
}

.normal-desktop-nav .nav-dropdown {
  position: relative !important;
}

.normal-desktop-nav .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translate(-50%, 8px) !important;
  min-width: 210px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 55px rgba(17, 19, 17, .12) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  backdrop-filter: blur(16px) !important;
}

.normal-desktop-nav .nav-dropdown:hover .nav-dropdown-menu,
.normal-desktop-nav .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.normal-desktop-nav .nav-dropdown-menu a {
  min-height: 38px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.normal-desktop-nav .nav-dropdown-menu a:hover {
  background: var(--accent) !important;
}

.normal-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.normal-navbar .menu-toggle {
  display: none !important;
}

/* Hide mobile nav correctly on desktop */
.mobile-menu.normal-mobile-menu,
.normal-mobile-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Stop older navbar patches from forcing pill styling */
.site-header.clean-navbar,
.clean-navbar {
  border-radius: 0 !important;
  box-shadow: 0 10px 34px rgba(17, 19, 17, .04) !important;
}

@media (max-width: 1050px) {
  .site-header.normal-navbar,
  .normal-navbar {
    min-height: 74px !important;
    padding: 0 16px !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
  }

  .normal-desktop-nav,
  .desktop-nav.normal-desktop-nav {
    display: none !important;
  }

  .normal-navbar .menu-toggle {
    display: inline-flex !important;
    position: relative !important;
    z-index: 1300 !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(17, 19, 17, .10) !important;
    border-radius: 50% !important;
    background: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .normal-navbar .menu-toggle span {
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--ink) !important;
    transition: transform .22s ease, opacity .22s ease !important;
  }

  .normal-navbar .menu-toggle.active span:first-child {
    transform: translateY(3.5px) rotate(45deg) !important;
  }

  .normal-navbar .menu-toggle.active span:last-child {
    transform: translateY(-3.5px) rotate(-45deg) !important;
  }

  .mobile-menu.normal-mobile-menu.open,
  .normal-mobile-menu.open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1250 !important;
    padding: 88px 14px 18px !important;
    background: rgba(17, 19, 17, .32) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }

  .mobile-menu-panel {
    width: min(460px, 100%) !important;
    margin-left: auto !important;
    min-height: calc(100vh - 106px) !important;
    padding: 18px !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(17, 19, 17, .18) !important;
  }

  .mobile-menu-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 4px 4px 14px !important;
    border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
    margin-bottom: 14px !important;
  }

  .mobile-menu-top strong {
    font-size: 13px !important;
    letter-spacing: .08em !important;
  }

  .mobile-menu-close {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(17, 19, 17, .10) !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: var(--ink) !important;
    font: 900 24px/1 Manrope, sans-serif !important;
    cursor: pointer !important;
  }

  .normal-mobile-nav {
    display: grid !important;
    gap: 10px !important;
  }

  .normal-mobile-nav > a,
  .normal-mobile-nav summary {
    min-height: 52px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid rgba(17, 19, 17, .08) !important;
    border-radius: 16px !important;
    background: #fafaf6 !important;
    color: var(--ink) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    list-style: none !important;
  }

  .normal-mobile-nav summary::-webkit-details-marker {
    display: none !important;
  }

  .mobile-product-links {
    display: grid !important;
    gap: 8px !important;
    margin: 8px 0 10px 14px !important;
  }

  .mobile-product-links a {
    min-height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(17, 19, 17, .06) !important;
    border-radius: 14px !important;
    background: rgba(215, 255, 63, .25) !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  .normal-mobile-menu p {
    margin: 16px 4px 0 !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}

@media (max-width: 520px) {
  .normal-brand > span:last-child,
  .normal-brand span:not(.brand-mark) {
    font-size: 12px !important;
    letter-spacing: .06em !important;
  }

  .normal-brand .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .normal-navbar .icon-button {
    width: 40px !important;
    height: 40px !important;
  }

  .normal-navbar {
    min-height: 68px !important;
  }
}


/* FINAL mobile navbar open override + mobile price visibility */
@media (max-width: 1050px) {
  .normal-mobile-menu.open,
  .clean-mobile-menu.open,
  .mobile-menu.open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    padding: 88px 14px 18px !important;
    background: rgba(17, 19, 17, .34) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }

  .normal-mobile-menu.open .mobile-menu-panel,
  .clean-mobile-menu.open .mobile-menu-panel,
  .mobile-menu.open .mobile-menu-panel {
    display: block !important;
    width: min(460px, 100%) !important;
    margin-left: auto !important;
    min-height: calc(100vh - 106px) !important;
    padding: 18px !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(17, 19, 17, .18) !important;
  }

  .site-header .menu-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  .site-header .menu-toggle.active span:first-child {
    transform: translateY(3.5px) rotate(45deg) !important;
  }

  .site-header .menu-toggle.active span:last-child {
    transform: translateY(-3.5px) rotate(-45deg) !important;
  }
}

/* Make complete prices visible on small product cards */
@media (max-width: 760px) {
  .product-card {
    overflow: visible !important;
  }

  .product-card .product-body,
  .product-card .product-content,
  .product-info,
  .product-card-content {
    overflow: visible !important;
    min-width: 0 !important;
  }

  .product-card h3,
  .product-card h4,
  .product-title {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .product-card .price,
  .product-card .product-price,
  .product-card strong,
  .product-card [class*="price"] {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    font-size: clamp(20px, 6vw, 30px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
  }

  .product-card .product-row,
  .product-card .product-meta,
  .product-card .product-footer,
  .product-card .price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 14px !important;
    overflow: visible !important;
  }

  .product-card .product-row > *,
  .product-card .product-meta > *,
  .product-card .product-footer > * {
    min-width: 0 !important;
  }

  #homeProductGrid.home-product-slider,
  .home-product-slider {
    grid-auto-columns: minmax(268px, 86vw) !important;
    overflow-x: auto !important;
  }

  #homeProductGrid.home-product-slider .product-card {
    min-width: 268px !important;
  }
}

@media (max-width: 430px) {
  #homeProductGrid.home-product-slider,
  .home-product-slider {
    grid-auto-columns: minmax(286px, 88vw) !important;
  }

  #homeProductGrid.home-product-slider .product-card {
    min-width: 286px !important;
  }

  .product-card .price,
  .product-card .product-price,
  .product-card strong,
  .product-card [class*="price"] {
    font-size: clamp(19px, 5.6vw, 26px) !important;
  }
}

/* Ensure product catalogue mobile cards keep price inside visible card area */
@media (max-width: 620px) {
  .product-card {
    width: 100% !important;
  }

  .catalog-grid .product-card,
  .product-grid:not(.home-product-slider) .product-card {
    min-width: 0 !important;
  }
}


/* FINAL UI correction: restore normal navbar, compact mobile menu, safe mobile banners/cards */

/* Restore navbar to the earlier normal full-width look */
.site-header,
.site-header.normal-navbar,
.site-header.clean-navbar,
.normal-navbar,
.clean-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 5vw, 80px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
  border-radius: 0 !important;
  background: rgba(250, 250, 246, .96) !important;
  box-shadow: 0 10px 34px rgba(17, 19, 17, .04) !important;
  backdrop-filter: blur(18px) !important;
}

.site-header .brand,
.site-header .normal-brand,
.site-header .clean-brand {
  min-width: max-content !important;
  gap: 14px !important;
}

.site-header .brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

.site-header .brand > span:last-child,
.site-header .normal-brand > span:last-child,
.site-header .clean-brand > span:last-child {
  font-size: 15px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.site-header .desktop-nav,
.site-header .normal-desktop-nav,
.site-header .clean-desktop-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  min-width: 0 !important;
}

.site-header .desktop-nav > a,
.site-header .desktop-nav .nav-dropdown-trigger {
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--ink) !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.site-header .desktop-nav > a:hover,
.site-header .desktop-nav .nav-dropdown:hover .nav-dropdown-trigger {
  background: transparent !important;
  color: #000 !important;
  transform: none !important;
}

.site-header .nav-dropdown {
  position: relative !important;
}

.site-header .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translate(-50%, 8px) !important;
  min-width: 210px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 55px rgba(17, 19, 17, .12) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.site-header .nav-dropdown:hover .nav-dropdown-menu,
.site-header .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.site-header .nav-dropdown-menu a {
  min-height: 38px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.site-header .nav-dropdown-menu a:hover {
  background: var(--accent) !important;
}

/* Mobile navbar: compact menu, not the oversized card list */
@media (max-width: 1050px) {
  .site-header,
  .site-header.normal-navbar,
  .site-header.clean-navbar,
  .normal-navbar,
  .clean-navbar {
    min-height: 74px !important;
    padding: 0 16px !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
  }

  .site-header .desktop-nav,
  .site-header .normal-desktop-nav,
  .site-header .clean-desktop-nav {
    display: none !important;
  }

  .site-header .menu-toggle {
    display: inline-flex !important;
    position: relative !important;
    z-index: 10001 !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid rgba(17, 19, 17, .10) !important;
    border-radius: 50% !important;
    background: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
  }

  .site-header .menu-toggle span {
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: var(--ink) !important;
  }

  .mobile-menu,
  .normal-mobile-menu,
  .clean-mobile-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobile-menu.open,
  .normal-mobile-menu.open,
  .clean-mobile-menu.open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    padding: 86px 12px 16px !important;
    background: rgba(17, 19, 17, .32) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }

  .mobile-menu.open .mobile-menu-panel,
  .normal-mobile-menu.open .mobile-menu-panel,
  .clean-mobile-menu.open .mobile-menu-panel {
    display: block !important;
    width: min(420px, 100%) !important;
    margin-left: auto !important;
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(17, 19, 17, .18) !important;
  }

  .mobile-menu-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 2px 2px 12px !important;
    border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
    margin-bottom: 12px !important;
  }

  .mobile-menu-top strong {
    font-size: 13px !important;
    letter-spacing: .08em !important;
  }

  .mobile-menu-close {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(17, 19, 17, .10) !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: var(--ink) !important;
    font: 900 24px/1 Manrope, sans-serif !important;
    cursor: pointer !important;
  }

  .normal-mobile-nav,
  .clean-mobile-nav,
  .mobile-menu nav {
    display: grid !important;
    gap: 8px !important;
  }

  .mobile-menu.open .normal-mobile-nav > a,
  .mobile-menu.open .clean-mobile-nav > a,
  .mobile-menu.open nav > a,
  .mobile-menu.open summary,
  .normal-mobile-menu.open .normal-mobile-nav > a,
  .normal-mobile-menu.open summary,
  .clean-mobile-menu.open .clean-mobile-nav > a,
  .clean-mobile-menu.open summary {
    min-height: 48px !important;
    height: auto !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid rgba(17, 19, 17, .08) !important;
    border-radius: 14px !important;
    background: #fafaf6 !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
    list-style: none !important;
    white-space: normal !important;
  }

  .mobile-menu.open summary::-webkit-details-marker {
    display: none !important;
  }

  .mobile-product-links {
    display: grid !important;
    gap: 7px !important;
    margin: 7px 0 9px 12px !important;
  }

  .mobile-product-links a,
  .mobile-menu.open .mobile-product-links a {
    min-height: 40px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(17, 19, 17, .06) !important;
    border-radius: 12px !important;
    background: rgba(215, 255, 63, .25) !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
  }

  .normal-mobile-menu p,
  .clean-mobile-menu p,
  .mobile-menu p {
    margin: 14px 4px 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}

/* Customize hero mobile fix: no cramped side image */
@media (max-width: 760px) {
  .vc-hero {
    width: calc(100% - 22px) !important;
    max-width: none !important;
    margin: 18px auto 0 !important;
    min-height: auto !important;
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 34px 20px 32px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 95% 0%, rgba(215, 255, 63, .32), transparent 34%),
      linear-gradient(135deg, #101310 0%, #172315 100%) !important;
  }

  .vc-hero::after {
    display: none !important;
  }

  .vc-racket-card {
    display: none !important;
  }

  .vc-hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: .92 !important;
    letter-spacing: -.08em !important;
    margin: 14px 0 14px !important;
  }

  .vc-hero p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .vc-pills {
    margin-top: 18px !important;
    gap: 8px !important;
  }

  .vc-pills span {
    padding: 8px 11px !important;
    font-size: 11px !important;
  }
}

/* Home page card text overlap fix */
.service-card {
  isolation: isolate !important;
}

.service-copy {
  position: relative !important;
  z-index: 5 !important;
}

.service-racket,
.service-balls,
.service-case {
  z-index: 1 !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .service-grid {
    gap: 18px !important;
  }

  .service-card,
  .service-card.service-large {
    min-height: 420px !important;
    overflow: hidden !important;
  }

  .service-copy {
    min-height: 420px !important;
    padding: 26px 24px !important;
    position: relative !important;
    z-index: 6 !important;
  }

  .service-copy h3 {
    max-width: 92% !important;
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: .9 !important;
    margin-bottom: 14px !important;
  }

  .service-copy p {
    max-width: 86% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .service-copy b {
    position: relative !important;
    z-index: 8 !important;
    margin-top: 26px !important;
    background: rgba(215, 255, 63, .72) !important;
    color: var(--ink) !important;
    padding: 8px 0 5px !important;
  }

  .service-card.service-large .service-racket,
  .service-racket {
    right: -165px !important;
    bottom: -160px !important;
    transform: scale(.68) rotate(-18deg) !important;
    transform-origin: bottom right !important;
    opacity: .12 !important;
  }

  .service-balls {
    right: -70px !important;
    bottom: -54px !important;
    opacity: .38 !important;
    transform: scale(.78) !important;
  }

  .service-case {
    right: -80px !important;
    bottom: -60px !important;
    opacity: .22 !important;
    transform: scale(.78) !important;
  }
}

@media (max-width: 430px) {
  .service-card,
  .service-card.service-large,
  .service-copy {
    min-height: 395px !important;
  }

  .service-copy h3 {
    font-size: clamp(38px, 11vw, 54px) !important;
  }

  .service-copy p {
    max-width: 92% !important;
    font-size: 15px !important;
  }

  .service-card.service-large .service-racket,
  .service-racket {
    right: -190px !important;
    bottom: -175px !important;
    opacity: .10 !important;
  }
}


/* FINAL WORKING NAVBAR - desktop normal + mobile lime overlay */
.site-header.final-navbar,
.final-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 5vw, 80px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
  border-radius: 0 !important;
  background: rgba(250, 250, 246, .96) !important;
  box-shadow: 0 10px 34px rgba(17, 19, 17, .04) !important;
  backdrop-filter: blur(18px) !important;
}

.final-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: max-content !important;
}

.final-brand .brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

.final-brand > span:last-child {
  font-size: 15px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.final-desktop-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 30px !important;
}

.final-desktop-nav > a,
.final-desktop-nav .nav-dropdown-trigger {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font: 850 15px/1 Manrope, sans-serif !important;
  background: transparent !important;
  border: 0 !important;
}

.final-desktop-nav .nav-dropdown {
  position: relative !important;
}

.final-desktop-nav .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translate(-50%, 8px) !important;
  display: grid !important;
  min-width: 218px !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 20px 55px rgba(17,19,17,.12) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.final-desktop-nav .nav-dropdown:hover .nav-dropdown-menu,
.final-desktop-nav .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.final-desktop-nav .nav-dropdown-menu a {
  min-height: 38px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font: 850 13px/1 Manrope, sans-serif !important;
}

.final-desktop-nav .nav-dropdown-menu a:hover {
  background: var(--accent) !important;
}

.final-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.final-menu-toggle {
  display: none !important;
}

/* Always hidden until opened */
.final-mobile-menu,
.mobile-menu.final-mobile-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1050px) {
  .site-header.final-navbar,
  .final-navbar {
    min-height: 74px !important;
    padding: 0 16px !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
  }

  .final-desktop-nav {
    display: none !important;
  }

  .final-brand .brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .final-brand > span:last-child {
    font-size: 13px !important;
    letter-spacing: .065em !important;
  }

  .final-menu-toggle {
    display: inline-flex !important;
    position: relative !important;
    z-index: 10001 !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(17, 19, 17, .10) !important;
    border-radius: 50% !important;
    background: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(17, 19, 17, .08) !important;
  }

  .final-menu-toggle span {
    width: 21px !important;
    height: 3px !important;
    background: var(--ink) !important;
    border-radius: 999px !important;
    transition: transform .22s ease, opacity .22s ease !important;
  }

  .final-menu-toggle.active span:first-child {
    transform: translateY(4.5px) rotate(45deg) !important;
  }

  .final-menu-toggle.active span:last-child {
    transform: translateY(-4.5px) rotate(-45deg) !important;
  }

  .final-mobile-menu.open,
  .mobile-menu.final-mobile-menu.open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    padding: 68px clamp(28px, 8vw, 80px) 32px !important;
    background: var(--accent) !important;
    color: var(--ink) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .final-mobile-close {
    position: fixed !important;
    right: 24px !important;
    top: 22px !important;
    z-index: 10002 !important;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(17, 19, 17, .18) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.25) !important;
    color: var(--ink) !important;
    font: 900 34px/1 Manrope, sans-serif !important;
    cursor: pointer !important;
  }

  .final-mobile-nav {
    display: grid !important;
    gap: 0 !important;
    margin-top: 0 !important;
    max-width: 780px !important;
  }

  .final-mobile-nav > a,
  .final-mobile-details > summary {
    min-height: auto !important;
    padding: 17px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 19, 17, .18) !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    font: 900 clamp(54px, 11vw, 96px)/.92 Manrope, sans-serif !important;
    letter-spacing: -.08em !important;
    list-style: none !important;
    white-space: normal !important;
  }

  .final-mobile-details > summary::-webkit-details-marker {
    display: none !important;
  }

  .final-mobile-details > summary span {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: grid !important;
    place-items: center !important;
    margin-left: 14px !important;
    border: 1px solid rgba(17, 19, 17, .18) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    font-size: 24px !important;
    letter-spacing: 0 !important;
  }

  .final-mobile-submenu {
    display: grid !important;
    gap: 8px !important;
    padding: 10px 0 16px 18px !important;
    border-bottom: 1px solid rgba(17, 19, 17, .18) !important;
  }

  .final-mobile-submenu a {
    min-height: auto !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
    font: 900 clamp(24px, 5.5vw, 42px)/1.05 Manrope, sans-serif !important;
    letter-spacing: -.04em !important;
  }

  .final-mobile-tagline {
    margin: clamp(80px, 14vh, 170px) 0 0 !important;
    color: rgba(17, 19, 17, .70) !important;
    font: 900 16px/1.35 Manrope, sans-serif !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }

  body.menu-open {
    overflow: hidden !important;
  }
}

@media (max-width: 520px) {
  .final-mobile-menu.open,
  .mobile-menu.final-mobile-menu.open {
    padding: 58px 38px 28px !important;
  }

  .final-mobile-nav > a,
  .final-mobile-details > summary {
    padding: 16px 0 !important;
    font-size: clamp(50px, 14vw, 78px) !important;
  }

  .final-mobile-details > summary span {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    font-size: 20px !important;
  }

  .final-mobile-close {
    width: 44px !important;
    height: 44px !important;
    right: 18px !important;
    top: 16px !important;
    font-size: 30px !important;
  }

  .final-mobile-submenu a {
    font-size: clamp(23px, 7vw, 34px) !important;
  }
}


/* ABSOLUTE FINAL NAVBAR: CSS-only mobile menu + old lime overlay look */
.css-nav-toggle {
  position: fixed !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.site-header.css-navbar,
.css-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 8000 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 5vw, 80px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17,19,17,.08) !important;
  border-radius: 0 !important;
  background: rgba(250,250,246,.96) !important;
  box-shadow: 0 10px 34px rgba(17,19,17,.04) !important;
  backdrop-filter: blur(18px) !important;
}

.css-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: max-content !important;
}

.css-brand .brand-mark {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

.css-brand > span:last-child {
  font-size: 15px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.css-desktop-nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
}

.css-desktop-nav > a,
.css-desktop-nav .nav-dropdown-trigger {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font: 850 15px/1 Manrope, sans-serif !important;
  border: 0 !important;
  background: transparent !important;
}

.css-desktop-nav .nav-dropdown {
  position: relative !important;
}

.css-desktop-nav .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  left: 50% !important;
  transform: translate(-50%, 8px) !important;
  min-width: 218px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid rgba(17,19,17,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 20px 55px rgba(17,19,17,.12) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.css-desktop-nav .nav-dropdown:hover .nav-dropdown-menu,
.css-desktop-nav .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.css-desktop-nav .nav-dropdown-menu a {
  min-height: 38px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font: 850 13px/1 Manrope, sans-serif !important;
}

.css-desktop-nav .nav-dropdown-menu a:hover {
  background: var(--accent) !important;
}

.css-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.css-menu-toggle {
  display: none !important;
}

.css-mobile-menu {
  display: none !important;
}

/* Mobile: lime fullscreen menu, same look as requested, but now CSS-only so it cannot break */
@media (max-width: 1050px) {
  .site-header.css-navbar,
  .css-navbar {
    min-height: 74px !important;
    padding: 0 16px !important;
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
  }

  .css-desktop-nav {
    display: none !important;
  }

  .css-brand .brand-mark {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .css-brand > span:last-child {
    font-size: 13px !important;
    letter-spacing: .065em !important;
  }

  .css-menu-toggle {
    display: inline-flex !important;
    position: relative !important;
    z-index: 9002 !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(17,19,17,.10) !important;
    border-radius: 50% !important;
    background: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(17,19,17,.08) !important;
  }

  .css-menu-toggle span {
    width: 21px !important;
    height: 3px !important;
    background: var(--ink) !important;
    border-radius: 999px !important;
    transition: transform .22s ease !important;
  }

  .css-nav-toggle:checked ~ .css-navbar .css-menu-toggle span:first-child {
    transform: translateY(4.5px) rotate(45deg) !important;
  }

  .css-nav-toggle:checked ~ .css-navbar .css-menu-toggle span:last-child {
    transform: translateY(-4.5px) rotate(-45deg) !important;
  }

  .css-mobile-menu {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    padding: 58px clamp(28px, 8vw, 80px) 32px !important;
    background: var(--accent) !important;
    color: var(--ink) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: transform .28s ease, opacity .22s ease, visibility .22s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .css-nav-toggle:checked ~ .css-mobile-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .css-mobile-close {
    position: fixed !important;
    right: 24px !important;
    top: 20px !important;
    z-index: 9003 !important;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(17,19,17,.18) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.25) !important;
    color: var(--ink) !important;
    font: 900 34px/1 Manrope, sans-serif !important;
    cursor: pointer !important;
  }

  .css-mobile-links {
    display: grid !important;
    gap: 0 !important;
    max-width: 780px !important;
  }

  .css-mobile-links > a,
  .css-mobile-details > summary {
    min-height: auto !important;
    padding: 17px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17,19,17,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    font: 900 clamp(54px, 11vw, 96px)/.92 Manrope, sans-serif !important;
    letter-spacing: -.08em !important;
    list-style: none !important;
    white-space: normal !important;
  }

  .css-mobile-details > summary::-webkit-details-marker {
    display: none !important;
  }

  .css-mobile-details > summary span {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    display: grid !important;
    place-items: center !important;
    margin-left: 14px !important;
    border: 1px solid rgba(17,19,17,.18) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important;
    font-size: 24px !important;
    letter-spacing: 0 !important;
  }

  .css-mobile-details > div {
    display: grid !important;
    gap: 8px !important;
    padding: 10px 0 16px 18px !important;
    border-bottom: 1px solid rgba(17,19,17,.18) !important;
  }

  .css-mobile-details > div a {
    padding: 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    font: 900 clamp(24px, 5.5vw, 42px)/1.05 Manrope, sans-serif !important;
    letter-spacing: -.04em !important;
  }

  .css-mobile-menu p {
    margin: clamp(80px, 14vh, 170px) 0 0 !important;
    color: rgba(17,19,17,.70) !important;
    font: 900 16px/1.35 Manrope, sans-serif !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 520px) {
  .css-mobile-menu {
    padding: 58px 38px 28px !important;
  }

  .css-mobile-links > a,
  .css-mobile-details > summary {
    padding: 16px 0 !important;
    font-size: clamp(50px, 14vw, 78px) !important;
  }

  .css-mobile-details > summary span {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    font-size: 20px !important;
  }

  .css-mobile-close {
    width: 44px !important;
    height: 44px !important;
    right: 18px !important;
    top: 16px !important;
    font-size: 30px !important;
  }

  .css-mobile-details > div a {
    font-size: clamp(23px, 7vw, 34px) !important;
  }
}

/* Home page overlapping graphic fix */
@media (max-width: 760px) {
  .service-card,
  .service-card.service-large {
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: 420px !important;
  }

  .service-copy {
    position: relative !important;
    z-index: 5 !important;
    min-height: 420px !important;
    padding: 26px 24px !important;
  }

  .service-copy h3,
  .service-copy p,
  .service-copy b {
    position: relative !important;
    z-index: 8 !important;
  }

  .service-copy h3 {
    max-width: 95% !important;
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: .9 !important;
  }

  .service-copy p {
    max-width: 92% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .service-copy b {
    display: inline-flex !important;
    margin-top: 24px !important;
    padding: 7px 0 5px !important;
    background: rgba(215,255,63,.80) !important;
    color: var(--ink) !important;
  }

  .service-racket,
  .service-balls,
  .service-case {
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .service-card.service-large .service-racket,
  .service-racket {
    right: -190px !important;
    bottom: -175px !important;
    transform: scale(.64) rotate(-18deg) !important;
    transform-origin: bottom right !important;
    opacity: .10 !important;
  }

  .service-balls {
    right: -78px !important;
    bottom: -58px !important;
    opacity: .34 !important;
    transform: scale(.74) !important;
  }

  .service-case {
    right: -86px !important;
    bottom: -66px !important;
    opacity: .18 !important;
    transform: scale(.74) !important;
  }

  .whatsapp-float {
    right: 16px !important;
    bottom: 16px !important;
    max-width: 64px !important;
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  .whatsapp-float span,
  .whatsapp-float strong,
  .whatsapp-float b,
  .whatsapp-float em {
    display: none !important;
  }

  .whatsapp-float svg {
    margin: 0 !important;
  }
}

/* Customize hero mobile cleanup */
@media (max-width: 760px) {
  .vc-hero {
    width: calc(100% - 22px) !important;
    margin: 18px auto 0 !important;
    min-height: auto !important;
    display: block !important;
    padding: 34px 20px 32px !important;
    border-radius: 28px !important;
  }

  .vc-racket-card {
    display: none !important;
  }

  .vc-hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 64px) !important;
    line-height: .92 !important;
  }
}


/* FINAL homepage mobile service-card overlap fix */
@media (max-width: 760px) {
  .service-section,
  .services,
  .home-services {
    overflow: visible !important;
  }

  .service-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    overflow: visible !important;
  }

  .service-grid > *,
  .service-card,
  .service-card.service-large {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 430px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  .service-grid > * + *,
  .service-card + .service-card {
    margin-top: 0 !important;
  }

  .service-card:hover {
    transform: none !important;
  }

  .service-copy {
    position: relative !important;
    z-index: 10 !important;
    min-height: 430px !important;
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .service-copy h3,
  .service-copy p,
  .service-copy b,
  .service-copy a {
    position: relative !important;
    z-index: 12 !important;
    max-width: 100% !important;
  }

  .service-copy h3 {
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: .92 !important;
    margin: 18px 0 16px !important;
  }

  .service-copy p {
    max-width: 92% !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 0 28px !important;
  }

  .service-copy b,
  .service-copy a {
    margin-top: auto !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 92% !important;
    padding: 9px 0 6px !important;
    background: rgba(215,255,63,.88) !important;
    color: var(--ink) !important;
  }

  .service-racket,
  .service-balls,
  .service-case {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .service-racket,
  .service-card.service-large .service-racket {
    right: -210px !important;
    bottom: -190px !important;
    transform: scale(.58) rotate(-18deg) !important;
    transform-origin: bottom right !important;
    opacity: .09 !important;
  }

  .service-balls {
    right: -90px !important;
    bottom: -70px !important;
    transform: scale(.70) !important;
    opacity: .30 !important;
  }

  .service-case {
    right: -98px !important;
    bottom: -80px !important;
    transform: scale(.70) !important;
    opacity: .16 !important;
  }

  .home-top-picks,
  .home-top-picks.section {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 26px !important;
    padding-top: 64px !important;
    clear: both !important;
  }

  .home-top-picks .section-heading {
    margin-top: 0 !important;
  }

  .home-top-picks .section-heading h2 {
    font-size: clamp(48px, 14vw, 78px) !important;
    line-height: .9 !important;
  }
}

@media (max-width: 430px) {
  .service-card,
  .service-card.service-large,
  .service-copy {
    min-height: 410px !important;
  }

  .service-copy {
    padding: 24px 22px !important;
  }

  .service-copy h3 {
    font-size: clamp(38px, 13vw, 56px) !important;
  }

  .service-copy p {
    max-width: 95% !important;
    font-size: 15px !important;
  }

  .home-top-picks,
  .home-top-picks.section {
    padding-top: 56px !important;
  }
}


/* Smooth announcement bar auto-hide */
.announcement-bar,
.top-announcement,
.policy-bar,
.notice-bar,
[data-announcement-bar] {
  transition: opacity .42s ease, transform .42s ease, max-height .42s ease, padding .42s ease, margin .42s ease;
}

.announcement-auto-hide {
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


/* Professional CSS icons: prevents arrows/stars/close icons from rendering as emoji */
.ttw-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  color: currentColor;
  vertical-align: -0.14em;
  position: relative;
  flex: 0 0 auto;
  font-size: 1em;
  line-height: 1;
}

.ttw-icon-up-right::before {
  content: "";
  position: absolute;
  inset: 18% 18% auto auto;
  width: 56%;
  height: 56%;
  border-top: 0.14em solid currentColor;
  border-right: 0.14em solid currentColor;
}

.ttw-icon-up-right::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: 18%;
  width: 76%;
  height: 0.14em;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  border-radius: 999px;
}

.ttw-icon-chevron-down::before,
.ttw-icon-chevron-left::before,
.ttw-icon-chevron-right::before {
  content: "";
  position: absolute;
  width: 42%;
  height: 42%;
  border-right: 0.18em solid currentColor;
  border-bottom: 0.18em solid currentColor;
  border-radius: 0.02em;
}

.ttw-icon-chevron-down::before {
  left: 29%;
  top: 21%;
  transform: rotate(45deg);
}

.ttw-icon-chevron-left::before {
  left: 34%;
  top: 29%;
  transform: rotate(135deg);
}

.ttw-icon-chevron-right::before {
  left: 22%;
  top: 29%;
  transform: rotate(-45deg);
}

.ttw-icon-close::before,
.ttw-icon-close::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 48%;
  width: 76%;
  height: 0.16em;
  border-radius: 999px;
  background: currentColor;
}

.ttw-icon-close::before {
  transform: rotate(45deg);
}

.ttw-icon-close::after {
  transform: rotate(-45deg);
}

.ttw-icon-star {
  background: currentColor;
  clip-path: polygon(50% 5%, 61% 35%, 94% 35%, 67% 54%, 77% 88%, 50% 68%, 23% 88%, 33% 54%, 6% 35%, 39% 35%);
  transform: translateY(0.02em);
}

.rating .ttw-icon-star,
.product-meta .ttw-icon-star {
  width: 1em;
  height: 1em;
  margin-right: 0.22em;
}

.brand-card b,
.service-copy b,
.product-card a,
.button,
.home-product-arrow,
.vc-slider-arrow,
.announcement-close,
.final-mobile-close,
.css-mobile-close,
.mobile-menu-close,
.remove-item {
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.brand-card b .ttw-icon-up-right,
.service-copy b .ttw-icon-up-right,
.button .ttw-icon-up-right {
  margin-left: 0.22em;
}

.home-product-arrow .ttw-icon,
.vc-slider-arrow .ttw-icon {
  width: 0.9em;
  height: 0.9em;
}

.announcement-close,
.final-mobile-close,
.css-mobile-close,
.mobile-menu-close,
.remove-item {
  display: inline-grid !important;
  place-items: center !important;
}

.announcement-close .ttw-icon-close,
.final-mobile-close .ttw-icon-close,
.css-mobile-close .ttw-icon-close,
.mobile-menu-close .ttw-icon-close,
.remove-item .ttw-icon-close {
  width: 0.9em;
  height: 0.9em;
}

.nav-dropdown-trigger .ttw-icon-chevron-down,
.css-mobile-details summary .ttw-icon-chevron-down,
.final-mobile-details summary .ttw-icon-chevron-down,
.mobile-product-dropdown summary .ttw-icon-chevron-down {
  margin-left: 0.22em;
  width: 0.8em;
  height: 0.8em;
}

/* Remove native emoji rendering from any leftover icon spans */
.ttw-icon,
.ttw-icon::before,
.ttw-icon::after {
  font-family: inherit !important;
}


/* FINAL professional home action cards: no emoji-like visuals, no overlap */
.professional-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: 18px;
  align-items: stretch;
}

.pro-service-card {
  position: relative !important;
  min-height: 390px;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 34px !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  background: #e9ebe3 !important;
  box-shadow: 0 16px 38px rgba(17, 19, 17, .06) !important;
  color: var(--ink);
}

.pro-service-card.pro-custom {
  grid-row: span 2;
  min-height: 520px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .42), transparent 26%),
    linear-gradient(135deg, var(--accent), #c7ff2b) !important;
}

.pro-service-card.pro-gear {
  background:
    radial-gradient(circle at 95% 100%, rgba(215,255,63,.18), transparent 25%),
    #0f1410 !important;
  color: #fff !important;
}

.pro-service-card .service-copy {
  position: relative !important;
  z-index: 4 !important;
  min-height: inherit !important;
  padding: clamp(26px, 4vw, 42px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.pro-service-card .service-copy > span {
  color: rgba(17, 19, 17, .52);
  font-weight: 800;
  margin-bottom: 28px;
}

.pro-service-card.pro-gear .service-copy > span {
  color: rgba(255, 255, 255, .52);
}

.pro-service-card .service-copy h3 {
  max-width: 620px !important;
  margin: 0 0 20px !important;
  font: 900 clamp(44px, 5.6vw, 82px)/.9 Manrope, sans-serif !important;
  letter-spacing: -.085em !important;
  position: relative !important;
  z-index: 5 !important;
}

.pro-service-card .service-copy p {
  max-width: 520px !important;
  margin: 0 0 26px !important;
  color: rgba(17, 19, 17, .62) !important;
  font-size: 17px !important;
  line-height: 1.62 !important;
  position: relative !important;
  z-index: 5 !important;
}

.pro-service-card.pro-gear .service-copy p {
  color: rgba(255, 255, 255, .66) !important;
}

.service-cta {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(17, 19, 17, .10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 26px rgba(17, 19, 17, .08) !important;
  position: relative !important;
  z-index: 6 !important;
}

.pro-service-card.pro-gear .service-cta {
  background: var(--accent) !important;
  border-color: transparent !important;
}

.service-cta .ttw-icon-up-right {
  width: .88em !important;
  height: .88em !important;
}

.pro-visual {
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .82 !important;
}

.pro-racket-visual {
  right: -48px;
  bottom: -60px;
  width: 360px;
  height: 390px;
  transform: rotate(-18deg);
  filter: drop-shadow(0 24px 28px rgba(17, 19, 17, .18));
}

.pro-racket-face {
  position: absolute;
  left: 58px;
  top: 0;
  width: 248px;
  height: 286px;
  border: 18px solid rgba(17, 19, 17, .95);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(215,255,63,.16), transparent 49%),
    #202620;
}

.pro-racket-face::after {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  border: 2px solid rgba(215,255,63,.20);
}

.pro-racket-handle {
  position: absolute;
  left: 154px;
  top: 244px;
  width: 72px;
  height: 172px;
  border-radius: 0 0 22px 22px;
  border: 13px solid rgba(17, 19, 17, .95);
  border-top: 0;
  background: linear-gradient(90deg, #8e572f, #e0a66e 50%, #8e572f);
}

.pro-brand-wall {
  right: -8px;
  bottom: -14px;
  width: 270px;
  height: 220px;
}

.pro-brand-wall i {
  position: absolute;
  width: 118px;
  height: 86px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(17, 19, 17, .08);
  box-shadow: 0 18px 34px rgba(17, 19, 17, .08);
}

.pro-brand-wall i::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 28px;
  height: 9px;
  border-radius: 999px;
  background: rgba(17, 19, 17, .22);
  box-shadow: 0 20px 0 rgba(17, 19, 17, .13);
}

.pro-brand-wall i:nth-child(1) {
  left: 10px;
  top: 42px;
  transform: rotate(-8deg);
}

.pro-brand-wall i:nth-child(2) {
  right: 26px;
  top: 12px;
  transform: rotate(6deg);
}

.pro-brand-wall i:nth-child(3) {
  left: 72px;
  bottom: 20px;
  transform: rotate(8deg);
}

.pro-brand-wall i:nth-child(4) {
  right: -18px;
  bottom: 58px;
  transform: rotate(-10deg);
  background: rgba(215, 255, 63, .72);
}

.pro-gear-visual {
  right: -34px;
  bottom: -38px;
  width: 280px;
  height: 220px;
}

.pro-gear-visual i:nth-child(1) {
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 172px;
  height: 118px;
  border: 14px solid rgba(255, 255, 255, .10);
  border-radius: 38px 38px 10px 10px;
  background: rgba(255, 255, 255, .025);
}

.pro-gear-visual i:nth-child(1)::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: -68px;
  height: 82px;
  border: 14px solid rgba(255, 255, 255, .10);
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
}

.pro-gear-visual i:nth-child(2),
.pro-gear-visual i:nth-child(3) {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(215,255,63,.16);
  border: 2px solid rgba(215,255,63,.22);
}

.pro-gear-visual i:nth-child(2) {
  left: 20px;
  top: 48px;
}

.pro-gear-visual i:nth-child(3) {
  left: 90px;
  top: 92px;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

@media (max-width: 980px) {
  .professional-service-grid {
    grid-template-columns: 1fr;
  }

  .pro-service-card.pro-custom {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .professional-service-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .pro-service-card,
  .pro-service-card.pro-custom,
  .pro-service-card.pro-gear {
    min-height: 330px !important;
    border-radius: 28px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .pro-service-card .service-copy {
    min-height: 330px !important;
    padding: 26px 24px !important;
  }

  .pro-service-card .service-copy > span {
    margin-bottom: 24px !important;
    font-size: 14px !important;
  }

  .pro-service-card .service-copy h3 {
    max-width: 82% !important;
    font-size: clamp(38px, 11vw, 58px) !important;
    line-height: .92 !important;
    margin-bottom: 16px !important;
  }

  .pro-service-card .service-copy p {
    max-width: 82% !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }

  .service-cta {
    padding: 11px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .pro-racket-visual {
    right: -118px !important;
    bottom: -130px !important;
    width: 270px !important;
    height: 300px !important;
    opacity: .22 !important;
    transform: rotate(-18deg) scale(.82) !important;
  }

  .pro-brand-wall {
    right: -50px !important;
    bottom: -38px !important;
    width: 215px !important;
    height: 175px !important;
    opacity: .64 !important;
    transform: scale(.92) !important;
  }

  .pro-brand-wall i {
    width: 96px !important;
    height: 70px !important;
    border-radius: 18px !important;
  }

  .pro-gear-visual {
    right: -82px !important;
    bottom: -72px !important;
    width: 230px !important;
    height: 185px !important;
    opacity: .55 !important;
    transform: scale(.82) !important;
  }

  .home-top-picks.section {
    padding-top: 54px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .pro-service-card,
  .pro-service-card.pro-custom,
  .pro-service-card.pro-gear,
  .pro-service-card .service-copy {
    min-height: 318px !important;
  }

  .pro-service-card .service-copy h3 {
    max-width: 88% !important;
    font-size: clamp(34px, 11.5vw, 50px) !important;
  }

  .pro-service-card .service-copy p {
    max-width: 88% !important;
    font-size: 14.5px !important;
  }
}

/* Remove old service decorative elements if any remain */
.service-racket,
.service-balls,
.service-case {
  display: none !important;
}


/* FINAL formal SVG-mask icons: clean, symmetric, non-emoji arrows */
.ttw-icon {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  min-width: 1em !important;
  min-height: 1em !important;
  color: currentColor !important;
  background: currentColor !important;
  vertical-align: -0.12em !important;
  line-height: 1 !important;
  font-size: inherit !important;
  position: relative !important;
  flex: 0 0 auto !important;
  transform: none !important;
  clip-path: none !important;
  border: 0 !important;
}

.ttw-icon::before,
.ttw-icon::after {
  content: none !important;
  display: none !important;
}

.ttw-icon-up-right {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%2017L17%207M9%207h8v8%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%2017L17%207M9%207h8v8%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ttw-icon-chevron-down {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ttw-icon-chevron-left {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14%207l-5%205%205%205%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M14%207l-5%205%205%205%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ttw-icon-chevron-right {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M10%207l5%205-5%205%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M10%207l5%205-5%205%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ttw-icon-close {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%207l10%2010M17%207L7%2017%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M7%207l10%2010M17%207L7%2017%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ttw-icon-star {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%203.6l2.35%204.76%205.25.76-3.8%203.7.9%205.23L12%2015.58l-4.7%202.47.9-5.23-3.8-3.7%205.25-.76L12%203.6z%27%20fill%3D%27black%27/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%203.6l2.35%204.76%205.25.76-3.8%203.7.9%205.23L12%2015.58l-4.7%202.47.9-5.23-3.8-3.7%205.25-.76L12%203.6z%27%20fill%3D%27black%27/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Button-specific icon sizing and alignment */
.brand-card b,
.service-cta,
.service-copy b,
.product-link,
.home-product-arrow,
.vc-slider-arrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45em !important;
}

.brand-card b .ttw-icon-up-right,
.service-cta .ttw-icon-up-right,
.service-copy b .ttw-icon-up-right,
.product-link .ttw-icon-up-right {
  width: 0.95em !important;
  height: 0.95em !important;
  transform: translateY(0.02em) !important;
}

.home-product-arrow .ttw-icon,
.vc-slider-arrow .ttw-icon {
  width: 1.15em !important;
  height: 1.15em !important;
}

.nav-dropdown-trigger .ttw-icon-chevron-down,
.css-mobile-details summary .ttw-icon-chevron-down,
.final-mobile-details summary .ttw-icon-chevron-down,
.mobile-product-dropdown summary .ttw-icon-chevron-down {
  width: 0.82em !important;
  height: 0.82em !important;
  margin-left: 0.25em !important;
}

/* Prevent any browser from using emoji fallback for icons */
.ttw-icon,
.ttw-icon * {
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-variant-emoji: text !important;
}

/* Hide old malformed pseudo-icon drawings completely */
.ttw-icon-up-right::before,
.ttw-icon-up-right::after,
.ttw-icon-chevron-down::before,
.ttw-icon-chevron-down::after,
.ttw-icon-chevron-left::before,
.ttw-icon-chevron-left::after,
.ttw-icon-chevron-right::before,
.ttw-icon-chevron-right::after,
.ttw-icon-close::before,
.ttw-icon-close::after,
.ttw-icon-star::before,
.ttw-icon-star::after {
  display: none !important;
  content: none !important;
}


/* FINAL: slider arrows only on mobile/tablet, never on laptop/desktop */
.home-product-arrow,
.vc-slider-arrow,
.visual-slider-arrow,
.product-slider-arrow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .home-product-arrow,
  .vc-slider-arrow,
  .visual-slider-arrow,
  .product-slider-arrow {
    display: grid !important;
    place-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 761px) {
  .home-product-shell::before,
  .home-product-shell::after,
  .vc-slider-shell::before,
  .vc-slider-shell::after {
    display: none !important;
    content: none !important;
  }

  #homeProductGrid.home-product-slider {
    overflow-x: visible !important;
  }
}


/* ABSOLUTE FINAL: mobile home action cards must never overlap */
@media (max-width: 760px) {
  .service-showcase,
  .section.service-showcase,
  #play-services {
    display: block !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .service-showcase .professional-service-grid,
  .service-showcase .service-grid,
  .professional-service-grid,
  .service-grid {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    overflow: visible !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .service-showcase .pro-service-card,
  .service-showcase .service-card,
  .professional-service-grid > .pro-service-card,
  .professional-service-grid > .service-card,
  .service-grid > .service-card {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
    grid-row: auto !important;
    grid-column: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    z-index: 1 !important;
  }

  .service-showcase .pro-service-card:last-child,
  .service-showcase .service-card:last-child {
    margin-bottom: 0 !important;
  }

  .service-showcase .service-copy,
  .professional-service-grid .service-copy,
  .service-grid .service-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: relative !important;
    z-index: 10 !important;
    min-height: 330px !important;
    height: auto !important;
    padding: 26px 24px 30px !important;
    overflow: visible !important;
  }

  .service-showcase .service-copy > *,
  .professional-service-grid .service-copy > *,
  .service-grid .service-copy > * {
    position: relative !important;
    z-index: 12 !important;
  }

  .service-showcase .service-copy h3 {
    max-width: 82% !important;
    margin: 16px 0 16px !important;
    font-size: clamp(38px, 11vw, 58px) !important;
    line-height: .92 !important;
  }

  .service-showcase .service-copy p {
    max-width: 84% !important;
    margin: 0 0 24px !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }

  .service-showcase .service-cta,
  .service-showcase .service-copy b {
    margin-top: auto !important;
    width: max-content !important;
    max-width: 88% !important;
    white-space: nowrap !important;
  }

  .service-showcase .pro-visual,
  .service-showcase .service-racket,
  .service-showcase .service-balls,
  .service-showcase .service-case {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .service-showcase .pro-racket-visual {
    right: -135px !important;
    bottom: -145px !important;
    width: 260px !important;
    height: 300px !important;
    opacity: .16 !important;
    transform: rotate(-18deg) scale(.78) !important;
  }

  .service-showcase .pro-brand-wall {
    right: -64px !important;
    bottom: -46px !important;
    width: 220px !important;
    height: 180px !important;
    opacity: .45 !important;
    transform: scale(.86) !important;
  }

  .service-showcase .pro-gear-visual {
    right: -86px !important;
    bottom: -78px !important;
    width: 230px !important;
    height: 185px !important;
    opacity: .38 !important;
    transform: scale(.78) !important;
  }

  .home-top-picks,
  .home-top-picks.section,
  #products.home-top-picks {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
    padding-top: 60px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .service-showcase .service-copy,
  .professional-service-grid .service-copy,
  .service-grid .service-copy {
    min-height: 315px !important;
    padding: 24px 22px 28px !important;
  }

  .service-showcase .service-copy h3 {
    max-width: 86% !important;
    font-size: clamp(34px, 11.5vw, 50px) !important;
  }

  .service-showcase .service-copy p {
    max-width: 88% !important;
    font-size: 14.5px !important;
  }

  .service-showcase .pro-service-card,
  .service-showcase .service-card {
    margin-bottom: 22px !important;
  }

  .home-top-picks,
  .home-top-picks.section,
  #products.home-top-picks {
    padding-top: 52px !important;
  }
}

/* Removed announcement / policy top bar */
.announcement,.announcement-bar,.top-announcement,.policy-bar,.notice-bar,[data-announcement-bar]{
  display:none!important;opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;height:0!important;max-height:0!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
}


/* New 2026 brand catalogue additions */
.brand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-card h3 {
  word-break: normal;
}

.logo-pill img {
  max-width: 132px;
  max-height: 58px;
  object-fit: contain;
}

.product-badge {
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-visual img[src$=".svg"] {
  padding: 8px !important;
  max-width: 96% !important;
  max-height: 96% !important;
}

@media (max-width: 1020px) {
  .brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .brand-grid {
    grid-template-columns: 1fr;
  }
}


/* Added brands: responsive grid expansion */
.brand-grid,
.brand-directory-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (min-width: 980px) {
  .brand-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1240px) {
  .brand-directory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* Brand showcase redesign: aesthetic minimal brand cards */
.brand-showcase-redesign {
  padding-top: clamp(84px, 9vw, 140px);
}

.brand-showcase-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}

.brand-showcase-hero h2 {
  margin: 10px 0 0;
  font: 900 clamp(64px, 8vw, 132px)/.82 Manrope, sans-serif;
  letter-spacing: -.09em;
}

.brand-showcase-hero p {
  max-width: 640px;
  margin: 20px 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 17px;
}

.brand-showcase-cta {
  min-height: 54px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 18px 42px rgba(17, 19, 17, .12);
}

.brand-showcase-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.brand-tile {
  min-height: 322px;
  grid-column: span 3;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 17, .08);
  border-radius: 34px;
  padding: 24px;
  background:
    radial-gradient(circle at 86% 82%, rgba(215, 255, 63, .52), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(242,242,235,.72));
  box-shadow: 0 18px 46px rgba(17, 19, 17, .055);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  color: var(--ink);
  isolation: isolate;
}

.brand-tile:nth-child(1),
.brand-tile:nth-child(7) {
  grid-column: span 4;
}

.brand-tile:nth-child(5) {
  grid-column: span 4;
  background:
    radial-gradient(circle at 86% 82%, rgba(255, 255, 255, .18), transparent 24%),
    linear-gradient(145deg, #121612, #202a1d);
  color: #fff;
}

.brand-tile:nth-child(8),
.brand-tile:nth-child(9) {
  grid-column: span 3;
}

.brand-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(17, 19, 17, .16);
  box-shadow: 0 26px 68px rgba(17, 19, 17, .12);
}

.brand-tile-top,
.brand-tile-bottom {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand-index {
  color: rgba(17, 19, 17, .48);
  font-weight: 900;
}

.brand-tile:nth-child(5) .brand-index {
  color: rgba(255, 255, 255, .54);
}

.brand-count {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: rgba(17, 19, 17, .62);
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(17, 19, 17, .06);
}

.brand-tile:nth-child(5) .brand-count {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .74);
  border-color: rgba(255, 255, 255, .12);
}

.brand-logo-word {
  position: relative;
  z-index: 3;
  margin-top: 48px;
  font: 900 clamp(34px, 3.1vw, 58px)/.9 Manrope, sans-serif;
  letter-spacing: -.075em;
}

.brand-tile p {
  position: relative;
  z-index: 3;
  max-width: 280px;
  margin: 18px 0 34px;
  color: rgba(17, 19, 17, .62);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 760;
}

.brand-tile:nth-child(5) p {
  color: rgba(255, 255, 255, .66);
}

.brand-tile-bottom {
  margin-top: auto;
}

.brand-tile-bottom strong {
  font-size: 13px;
  letter-spacing: .02em;
}

.brand-arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}

.brand-tile:nth-child(5) .brand-arrow {
  background: var(--accent);
  color: var(--ink);
}

.brand-visual {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 178px;
  height: 154px;
  z-index: 1;
  opacity: .72;
  pointer-events: none;
}

.brand-visual span {
  position: absolute;
  display: block;
}

.brand-visual-joola span,
.brand-visual-tibhar span,
.brand-visual-butterfly span,
.brand-visual-stiga span,
.brand-visual-dhs span,
.brand-visual-yinhe span,
.brand-visual-xiom span,
.brand-visual-andro span,
.brand-visual-dawei span {
  border-radius: 28px;
  background: rgba(215, 255, 63, .72);
  border: 1px solid rgba(17, 19, 17, .05);
  box-shadow: 0 14px 30px rgba(17, 19, 17, .08);
}

.brand-visual-joola span:nth-child(1),
.brand-visual-yinhe span:nth-child(1),
.brand-visual-xiom span:nth-child(1) {
  width: 116px;
  height: 86px;
  right: 0;
  bottom: 18px;
  transform: rotate(-10deg);
}

.brand-visual-joola span:nth-child(2),
.brand-visual-yinhe span:nth-child(2),
.brand-visual-xiom span:nth-child(2) {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  left: 10px;
  bottom: 0;
  background: rgba(255, 255, 255, .66);
}

.brand-visual-joola span:nth-child(3),
.brand-visual-yinhe span:nth-child(3),
.brand-visual-xiom span:nth-child(3) {
  width: 56px;
  height: 128px;
  right: 42px;
  bottom: -54px;
  border-radius: 999px;
  background: rgba(17, 19, 17, .08);
}

.brand-visual-butterfly span,
.brand-visual-andro span,
.brand-visual-dawei span {
  width: 112px;
  height: 112px;
  border-radius: 50%;
}

.brand-visual-butterfly span:nth-child(1),
.brand-visual-andro span:nth-child(1),
.brand-visual-dawei span:nth-child(1) {
  right: 24px;
  bottom: 4px;
  background: rgba(215, 255, 63, .72);
}

.brand-visual-butterfly span:nth-child(2),
.brand-visual-andro span:nth-child(2),
.brand-visual-dawei span:nth-child(2) {
  right: -36px;
  bottom: 44px;
  background: rgba(255, 255, 255, .58);
}

.brand-visual-dhs span:nth-child(1) {
  width: 118px;
  height: 118px;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: rgba(215, 255, 63, .82);
}

.brand-visual-dhs span:nth-child(2) {
  width: 70px;
  height: 70px;
  right: 76px;
  bottom: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.brand-visual-dhs span:nth-child(3) {
  width: 44px;
  height: 144px;
  right: 42px;
  bottom: -52px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}

.brand-visual-stiga span:nth-child(1) {
  width: 138px;
  height: 92px;
  right: 0;
  bottom: 14px;
  transform: skew(-12deg) rotate(-5deg);
}

.brand-visual-stiga span:nth-child(2) {
  width: 92px;
  height: 72px;
  right: 70px;
  bottom: 0;
  background: rgba(255,255,255,.62);
}

.brand-visual-stiga span:nth-child(3) {
  width: 28px;
  height: 112px;
  right: 28px;
  bottom: -48px;
  background: rgba(17,19,17,.10);
  border-radius: 999px;
}

.brands-page-redesign {
  overflow: hidden;
}

.brands-page-hero {
  width: min(1180px, calc(100% - 32px));
  margin: 38px auto 0;
  min-height: 560px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 30px;
  align-items: end;
  padding: clamp(34px, 5vw, 66px);
  border-radius: 42px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(215,255,63,.34), transparent 28%),
    linear-gradient(135deg, #101310, #222d1e);
  overflow: hidden;
}

.brands-page-copy {
  position: relative;
  z-index: 2;
}

.brands-page-copy h1 {
  max-width: 850px;
  margin: 16px 0 18px;
  font: 900 clamp(60px, 8vw, 124px)/.84 Manrope, sans-serif;
  letter-spacing: -.09em;
}

.brands-page-copy p {
  max-width: 640px;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
}

.brands-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.brands-hero-stats span {
  padding: 12px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.brands-hero-stats strong {
  color: var(--accent);
  margin-right: 6px;
}

.brands-orbit {
  position: absolute;
  right: -70px;
  top: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
}

.brands-orbit span {
  position: absolute;
  border-radius: 34px;
  background: rgba(215,255,63,.16);
  border: 1px solid rgba(255,255,255,.10);
}

.brands-orbit span:nth-child(1) {
  width: 180px;
  height: 120px;
  left: 70px;
  top: 90px;
  transform: rotate(-12deg);
}

.brands-orbit span:nth-child(2) {
  width: 140px;
  height: 140px;
  right: 90px;
  bottom: 80px;
  border-radius: 50%;
}

.brands-orbit span:nth-child(3) {
  width: 90px;
  height: 220px;
  right: 40px;
  top: 120px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.brand-jump-redesign {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
}

.brand-jump-redesign label {
  color: rgba(255,255,255,.72);
  font-weight: 900;
}

.brand-jump-redesign select {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.brand-directory-redesign {
  padding-top: 82px;
}

@media (max-width: 1180px) {
  .brand-tile,
  .brand-tile:nth-child(1),
  .brand-tile:nth-child(5),
  .brand-tile:nth-child(7),
  .brand-tile:nth-child(8),
  .brand-tile:nth-child(9) {
    grid-column: span 4;
  }
}

@media (max-width: 880px) {
  .brand-showcase-hero,
  .brands-page-hero {
    grid-template-columns: 1fr;
  }

  .brand-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-tile,
  .brand-tile:nth-child(1),
  .brand-tile:nth-child(5),
  .brand-tile:nth-child(7),
  .brand-tile:nth-child(8),
  .brand-tile:nth-child(9) {
    grid-column: auto;
  }

  .brands-page-hero {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .brand-showcase-redesign {
    padding-top: 60px;
  }

  .brand-showcase-hero h2 {
    font-size: clamp(48px, 14vw, 72px);
    line-height: .88;
  }

  .brand-showcase-hero p {
    font-size: 15px;
  }

  .brand-showcase-cta {
    width: 100%;
    justify-content: center;
  }

  .brand-showcase-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .brand-tile {
    min-height: 285px;
    border-radius: 28px;
    padding: 22px;
  }

  .brand-logo-word {
    margin-top: 36px;
    font-size: clamp(42px, 12vw, 62px);
  }

  .brand-tile p {
    max-width: 76%;
    font-size: 14px;
  }

  .brand-visual {
    opacity: .52;
  }

  .brands-page-hero {
    width: calc(100% - 20px);
    margin-top: 20px;
    padding: 34px 20px;
    border-radius: 30px;
  }

  .brands-page-copy h1 {
    font-size: clamp(46px, 13vw, 70px);
    line-height: .88;
  }

  .brands-page-copy p {
    font-size: 14px;
  }

  .brands-hero-stats span {
    font-size: 12px;
    padding: 10px 12px;
  }

  .brand-jump-redesign {
    padding: 16px;
  }

  .brand-directory-redesign {
    padding-top: 54px;
  }
}


/* Official product image cleanup */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  padding: 14px !important;
  background: transparent !important;
}

.product-visual {
  background: radial-gradient(circle at 50% 40%, #ffffff, #f4f3ee 76%) !important;
}


/* XIOM official-image step: keep product cards clean */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  padding: 14px !important;
  background: transparent !important;
}


/* Andro official-image step: keep fallback and official images clean */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  padding: 14px !important;
  background: transparent !important;
}


/* Butterfly official-image step: keep fallback and official images clean */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  padding: 14px !important;
  background: transparent !important;
}


/* Remaining brands official-image step: keep fallback and official images clean */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  padding: 14px !important;
  background: transparent !important;
}


/* Actual product image mode: do not show generated illustrations as real photos */
.product-visual img.actual-product-photo,
.vc-img img.actual-product-photo,
.visual-product-image img.actual-product-photo,
.modal-product-visual img.actual-product-photo,
.fixed-modal-media img.actual-product-photo {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 94% !important;
  max-height: 94% !important;
  padding: 10px !important;
  background: transparent !important;
}

.official-image-pending {
  width: 100%;
  height: 100%;
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 22%, rgba(215, 255, 63, .34), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(242,242,235,.72));
  border: 1px dashed rgba(17, 19, 17, .16);
  color: var(--ink);
}

.official-image-pending .image-pending-brand {
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 900;
  color: rgba(17, 19, 17, .46);
}

.official-image-pending strong {
  max-width: 210px;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.official-image-pending em {
  font-style: normal;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(17, 19, 17, .06);
  color: rgba(17, 19, 17, .58);
  font-size: 12px;
  font-weight: 800;
}

.image-load-failed .official-image-pending {
  border-color: rgba(216, 49, 43, .25);
}


/* Product image display fix: remove pending placeholder look */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 94% !important;
  max-height: 94% !important;
  padding: 10px !important;
  background: transparent !important;
}

.official-image-pending {
  display: none !important;
}


/* Real product photo handling */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  padding: 8px !important;
  background: transparent !important;
}

.product-visual:has(img[src^="http"]) {
  background: #fff !important;
}

.image-load-failed::after {
  content: "Image loading issue";
  position: absolute;
  inset: auto 20px 18px 20px;
  text-align: center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(17,19,17,.62);
}


/* All-product web image mode */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 96% !important;
  max-height: 96% !important;
  padding: 8px !important;
  background: transparent !important;
}

.product-visual {
  background: #fff !important;
}

.image-load-failed::after {
  content: "Image loading issue";
  position: absolute;
  inset: auto 20px 18px 20px;
  text-align: center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(17,19,17,.62);
}

.official-image-pending {
  display: none !important;
}


/* Final products-page fixes */
.save-filter-actions,
.pending-filter-note {
  display: none !important;
}

.product-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(17, 19, 17, .72);
}

.product-card {
  cursor: pointer;
}

.product-detail-shell {
  padding-top: clamp(110px, 10vw, 150px);
}

.product-detail-page {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(360px, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.product-detail-media {
  position: sticky;
  top: 110px;
  min-height: 620px;
  display: grid;
  place-items: center;
  border-radius: 44px;
  background: #fff;
  border: 1px solid rgba(17, 19, 17, .08);
  box-shadow: 0 24px 70px rgba(17, 19, 17, .08);
  overflow: hidden;
  padding: 28px;
}

.product-detail-media > img {
  width: 100%;
  height: 520px;
  object-fit: contain;
  object-position: center;
}

.detail-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
}

.product-detail-thumbs {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px;
}

.detail-thumb {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 19, 17, .10);
  background: #fff;
  border-radius: 18px;
  padding: 6px;
  cursor: pointer;
}

.detail-thumb.active {
  border-color: var(--ink);
  box-shadow: 0 10px 24px rgba(17,19,17,.10);
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail-copy {
  padding: 12px 0 40px;
}

.back-link {
  display: inline-flex;
  margin-bottom: 28px;
  color: rgba(17, 19, 17, .58);
  font-weight: 900;
}

.product-detail-copy h1 {
  margin: 12px 0 18px;
  font: 900 clamp(44px, 5vw, 78px)/.88 Manrope, sans-serif;
  letter-spacing: -.08em;
}

.product-detail-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 18px 0 24px;
}

.product-detail-price-row strong {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.05em;
}

.product-detail-price-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 19, 17, .06);
  font-weight: 900;
  color: rgba(17, 19, 17, .68);
}

.product-detail-copy > p {
  max-width: 640px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.detail-info-grid div {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(17,19,17,.08);
}

.detail-info-grid small {
  display: block;
  margin-bottom: 8px;
  color: rgba(17, 19, 17, .48);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
}

.detail-info-grid b {
  font-size: 18px;
}

.product-detail-features {
  margin-top: 30px;
  padding: 26px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(17,19,17,.08);
}

.product-detail-features h3 {
  margin: 0 0 16px;
  font-size: 24px;
}

.product-detail-features ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.9;
  font-weight: 750;
}

.official-product-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--ink);
  font-weight: 900;
}

.product-not-found,
.product-detail-loading {
  min-height: 420px;
  display: grid;
  align-content: center;
  gap: 18px;
}

.product-not-found h1,
.product-detail-loading h1 {
  font: 900 clamp(46px, 6vw, 86px)/.88 Manrope, sans-serif;
  letter-spacing: -.08em;
  margin: 0;
}

@media (max-width: 920px) {
  .product-detail-page {
    grid-template-columns: 1fr;
  }

  .product-detail-media {
    position: relative;
    top: auto;
    min-height: 420px;
    border-radius: 32px;
  }

  .product-detail-media > img {
    height: 360px;
  }
}

@media (max-width: 560px) {
  .product-detail-shell {
    padding-top: 92px;
  }

  .product-detail-media {
    min-height: 360px;
    padding: 18px;
  }

  .product-detail-media > img {
    height: 300px;
  }

  .product-detail-copy h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .detail-info-grid {
    grid-template-columns: 1fr;
  }

  .product-detail-actions .button {
    width: 100%;
    justify-content: center;
  }
}


/* Clean brand logo slider redesign */
.brand-logo-slider-section {
  padding-top: clamp(78px, 8vw, 120px);
  overflow: hidden;
}

.brand-slider-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 28px;
}

.brand-slider-heading h2 {
  margin: 10px 0 0;
  font: 900 clamp(58px, 8vw, 118px)/.84 Manrope, sans-serif;
  letter-spacing: -.09em;
}

.brand-slider-heading p {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}

.brand-slider-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-slider-btn {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 36px rgba(17, 19, 17, .08);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.brand-slider-btn:hover {
  transform: translateY(-2px);
  background: var(--accent);
}

.brand-logo-slider-shell {
  position: relative;
  margin-inline: calc(-1 * clamp(16px, 4vw, 64px));
  padding-inline: clamp(16px, 4vw, 64px);
}

.brand-logo-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 330px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 0 22px;
}

.brand-logo-track::-webkit-scrollbar {
  display: none;
}

.brand-logo-slide {
  min-height: 330px;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  border-radius: 34px;
  padding: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgba(215, 255, 63, .22), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,243,238,.78));
  border: 1px solid rgba(17,19,17,.08);
  box-shadow: 0 18px 46px rgba(17, 19, 17, .055);
  color: var(--ink);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}

.brand-logo-slide:hover {
  transform: translateY(-5px);
  border-color: rgba(17,19,17,.15);
  box-shadow: 0 26px 66px rgba(17, 19, 17, .10);
}

.brand-logo-slide-dhs {
  background:
    radial-gradient(circle at 88% 20%, rgba(215,255,63,.26), transparent 28%),
    linear-gradient(145deg, #101410, #23301f);
  color: #fff;
}

.brand-logo-slide::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 48px;
  right: -58px;
  bottom: -54px;
  background: rgba(215,255,63,.50);
  transform: rotate(-12deg);
  z-index: 0;
}

.brand-logo-slide-dhs::after {
  background: rgba(215,255,63,.42);
}

.brand-logo-mark,
.brand-logo-content,
.brand-logo-slide em {
  position: relative;
  z-index: 2;
}

.brand-logo-mark {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(17, 19, 17, .08);
  box-shadow: 0 18px 38px rgba(17,19,17,.08);
}

.brand-logo-slide-dhs .brand-logo-mark {
  background: rgba(255,255,255,.95);
}

.brand-logo-mark img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  image-rendering: auto;
}

.brand-logo-content span {
  display: block;
  color: rgba(17, 19, 17, .45);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.brand-logo-slide-dhs .brand-logo-content span {
  color: rgba(255,255,255,.56);
}

.brand-logo-content h3 {
  margin: 0;
  font: 900 clamp(38px, 4vw, 56px)/.88 Manrope, sans-serif;
  letter-spacing: -.075em;
}

.brand-logo-content p {
  margin: 13px 0 0;
  color: rgba(17, 19, 17, .58);
  font-weight: 850;
}

.brand-logo-slide-dhs .brand-logo-content p {
  color: rgba(255,255,255,.68);
}

.brand-logo-slide em {
  width: max-content;
  max-width: 100%;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(17,19,17,.06);
  color: rgba(17,19,17,.65);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.brand-logo-slide-dhs em {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.74);
}

/* Full landscape brands page hero */
.brand-landscape-hero {
  position: relative;
  min-height: clamp(560px, 62vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
  align-items: end;
  gap: 36px;
  width: 100%;
  margin: 0;
  padding: clamp(140px, 14vw, 210px) clamp(22px, 6vw, 110px) clamp(54px, 8vw, 94px);
  color: #fff;
  background:
    radial-gradient(circle at 76% 20%, rgba(215,255,63,.24), transparent 32%),
    linear-gradient(135deg, #101310, #22301f);
  overflow: hidden;
  isolation: isolate;
}

.brand-landscape-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.brand-landscape-bg span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(215,255,63,.14);
  border-radius: 42px;
}

.brand-landscape-bg span:nth-child(1) {
  width: 340px;
  height: 340px;
  right: 12%;
  top: 18%;
  border-radius: 50%;
  background: transparent;
}

.brand-landscape-bg span:nth-child(2) {
  width: 220px;
  height: 120px;
  right: 20%;
  top: 22%;
  transform: rotate(-12deg);
}

.brand-landscape-bg span:nth-child(3) {
  width: 160px;
  height: 160px;
  right: 10%;
  bottom: 18%;
  border-radius: 50%;
  background: rgba(215,255,63,.18);
}

.brand-landscape-content {
  max-width: 900px;
}

.brand-landscape-content h1 {
  margin: 16px 0 22px;
  font: 900 clamp(68px, 10vw, 152px)/.82 Manrope, sans-serif;
  letter-spacing: -.095em;
}

.brand-landscape-content p {
  max-width: 740px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: clamp(16px, 1.5vw, 21px);
}

.brand-hero-selector {
  align-self: end;
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
}

.brand-hero-selector label {
  color: rgba(255,255,255,.76);
  font-weight: 900;
}

.brand-hero-selector select {
  min-height: 58px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  font-weight: 900;
}

.brand-page-slider {
  padding-top: clamp(70px, 7vw, 120px);
}

.brand-logo-track-large {
  grid-auto-columns: minmax(290px, 360px);
}

.brand-minimal-list {
  padding-top: 36px;
}

.brand-link-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-link-strip a {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 19, 17, .08);
  color: var(--ink);
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(17,19,17,.045);
}

.brand-link-strip img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
  background: #f5f4ee;
  padding: 7px;
}

@media (max-width: 980px) {
  .brand-slider-heading,
  .brand-landscape-hero {
    grid-template-columns: 1fr;
  }

  .brand-slider-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .brand-landscape-hero {
    min-height: auto;
    padding-top: 128px;
  }
}

@media (max-width: 640px) {
  .brand-logo-slider-section {
    padding-top: 56px;
  }

  .brand-slider-heading h2,
  .brand-landscape-content h1 {
    font-size: clamp(48px, 15vw, 72px);
    line-height: .88;
  }

  .brand-slider-heading p,
  .brand-landscape-content p {
    font-size: 14.5px;
  }

  .brand-slider-btn {
    width: 48px;
    height: 48px;
  }

  .brand-showcase-cta {
    width: 100%;
    justify-content: center;
  }

  .brand-logo-track,
  .brand-logo-track-large {
    grid-auto-columns: minmax(250px, 82vw);
  }

  .brand-logo-slide {
    min-height: 300px;
    border-radius: 28px;
  }

  .brand-logo-mark {
    width: 94px;
    height: 94px;
    border-radius: 24px;
  }

  .brand-logo-mark img {
    width: 62px;
    height: 62px;
  }

  .brand-landscape-hero {
    padding: 116px 20px 42px;
  }

  .brand-hero-selector {
    padding: 16px;
  }
}

/* Hide old cluttered brand grid classes if cached markup exists */
.brand-showcase-grid:not(.brand-logo-track),
.brand-directory-grid-new {
  display: none;
}


/* Premium full-HD brand logo slider refinements */
.brand-logo-premium-section{padding-top:clamp(70px,7vw,110px)!important;padding-bottom:clamp(44px,6vw,80px)!important}
.brand-logo-premium-section .brand-slider-heading{margin-bottom:24px!important}
.brand-logo-track-premium{grid-auto-columns:clamp(240px,22vw,360px)!important;gap:clamp(14px,1.6vw,22px)!important;padding:10px 0 30px!important}
.brand-logo-track-premium .brand-logo-slide{min-height:clamp(190px,18vw,260px)!important;padding:clamp(18px,2vw,26px)!important;justify-content:space-between!important;border-radius:clamp(26px,2.4vw,38px)!important;background:radial-gradient(circle at 82% 18%,rgba(215,255,63,.28),transparent 30%),linear-gradient(145deg,#fff,#f6f5ef)!important;box-shadow:0 24px 64px rgba(17,19,17,.075)!important;border:1px solid rgba(17,19,17,.075)!important}
.brand-logo-track-premium .brand-logo-slide::after{width:122px!important;height:122px!important;right:-44px!important;bottom:-46px!important;border-radius:38px!important;opacity:.52!important}
.brand-logo-track-premium .brand-logo-slide-dhs{background:radial-gradient(circle at 84% 20%,rgba(215,255,63,.22),transparent 32%),linear-gradient(145deg,#111511,#263420)!important}
.brand-logo-track-premium .brand-logo-glass{width:100%!important;height:clamp(86px,8vw,126px)!important;display:grid!important;place-items:center!important;padding:clamp(16px,2vw,24px)!important;border-radius:26px!important;background:rgba(255,255,255,.82)!important;border:1px solid rgba(17,19,17,.065)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 32px rgba(17,19,17,.045)!important;position:relative!important;z-index:2!important}
.brand-logo-track-premium .brand-logo-slide-dhs .brand-logo-glass{background:rgba(255,255,255,.94)!important}
.brand-logo-track-premium .brand-logo-glass img{width:100%!important;height:100%!important;max-width:245px!important;max-height:82px!important;object-fit:contain!important;display:block!important;padding:0!important;filter:none!important}
.brand-logo-track-premium .brand-logo-details{position:relative!important;z-index:2!important;display:flex!important;align-items:end!important;justify-content:space-between!important;gap:16px!important}
.brand-logo-track-premium .brand-logo-details span{padding:9px 12px!important;border-radius:999px!important;background:rgba(17,19,17,.06)!important;color:rgba(17,19,17,.62)!important;font-size:12px!important;font-weight:900!important;white-space:nowrap!important}
.brand-logo-track-premium .brand-logo-details strong{max-width:140px!important;text-align:right!important;color:rgba(17,19,17,.86)!important;font-size:13px!important;line-height:1.25!important}
.brand-logo-track-premium .brand-logo-slide-dhs .brand-logo-details span{background:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.72)!important}
.brand-logo-track-premium .brand-logo-slide-dhs .brand-logo-details strong{color:rgba(255,255,255,.9)!important}
.brand-link-strip a img{width:96px!important;height:42px!important;border-radius:0!important;background:transparent!important;padding:0!important;object-fit:contain!important}
@media(max-width:900px){.brand-logo-track-premium{grid-auto-columns:clamp(230px,44vw,330px)!important}}
@media(max-width:560px){.brand-logo-premium-section{padding-top:52px!important}.brand-logo-track-premium{grid-auto-columns:minmax(238px,84vw)!important}.brand-logo-track-premium .brand-logo-slide{min-height:205px!important}.brand-logo-track-premium .brand-logo-glass{height:94px!important}.brand-logo-track-premium .brand-logo-details{align-items:start!important;flex-direction:column!important}.brand-logo-track-premium .brand-logo-details strong{text-align:left!important;max-width:none!important}}


/* FINAL: make brand logo slider big and clearly visible */
.brand-logo-slider-section,
.brand-logo-premium-section {
  padding-top: clamp(60px, 6vw, 92px) !important;
  padding-bottom: clamp(58px, 7vw, 96px) !important;
  min-height: auto !important;
}

.brand-logo-slider-shell {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 clamp(18px, 4vw, 70px) !important;
  overflow: visible !important;
}

.brand-logo-track,
.brand-logo-track-premium,
.brand-logo-track-large {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: clamp(340px, 30vw, 520px) !important;
  gap: clamp(22px, 2.6vw, 38px) !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  padding: 18px 0 42px !important;
}

.brand-logo-track::-webkit-scrollbar,
.brand-logo-track-premium::-webkit-scrollbar,
.brand-logo-track-large::-webkit-scrollbar {
  display: none !important;
}

.brand-logo-slide,
.brand-logo-track-premium .brand-logo-slide {
  min-height: clamp(285px, 24vw, 390px) !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: clamp(26px, 3vw, 38px) !important;
  border-radius: clamp(34px, 3vw, 48px) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(215, 255, 63, .34), transparent 34%),
    linear-gradient(145deg, #ffffff, #f4f3ee) !important;
  border: 1px solid rgba(17, 19, 17, .10) !important;
  box-shadow: 0 28px 80px rgba(17, 19, 17, .10) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
}

.brand-logo-slide-dhs,
.brand-logo-track-premium .brand-logo-slide-dhs {
  background:
    radial-gradient(circle at 84% 20%, rgba(215, 255, 63, .30), transparent 34%),
    linear-gradient(145deg, #101410, #26351f) !important;
}

.brand-logo-slide::after,
.brand-logo-track-premium .brand-logo-slide::after {
  width: 180px !important;
  height: 180px !important;
  right: -64px !important;
  bottom: -70px !important;
  border-radius: 48px !important;
  opacity: .55 !important;
  display: block !important;
  content: "" !important;
}

.brand-logo-glass,
.brand-logo-track-premium .brand-logo-glass,
.brand-logo-mark {
  width: 100% !important;
  height: clamp(150px, 12vw, 205px) !important;
  min-height: 150px !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(24px, 2.5vw, 34px) !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px rgba(17,19,17,.06) !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.brand-logo-slide-dhs .brand-logo-glass,
.brand-logo-track-premium .brand-logo-slide-dhs .brand-logo-glass {
  background: rgba(255, 255, 255, .96) !important;
}

.brand-logo-glass img,
.brand-logo-track-premium .brand-logo-glass img,
.brand-logo-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: 360px !important;
  max-height: 135px !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: scale(1.08) !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.brand-logo-details,
.brand-logo-track-premium .brand-logo-details {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 2 !important;
}

.brand-logo-details span,
.brand-logo-track-premium .brand-logo-details span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  background: rgba(17, 19, 17, .07) !important;
  color: rgba(17, 19, 17, .68) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.brand-logo-details strong,
.brand-logo-track-premium .brand-logo-details strong {
  max-width: 190px !important;
  text-align: right !important;
  color: rgba(17, 19, 17, .90) !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
}

.brand-logo-slide-dhs .brand-logo-details span,
.brand-logo-track-premium .brand-logo-slide-dhs .brand-logo-details span {
  background: rgba(255, 255, 255, .13) !important;
  color: rgba(255, 255, 255, .78) !important;
}

.brand-logo-slide-dhs .brand-logo-details strong,
.brand-logo-track-premium .brand-logo-slide-dhs .brand-logo-details strong {
  color: rgba(255, 255, 255, .92) !important;
}

.brand-slider-btn {
  width: 58px !important;
  height: 58px !important;
}

@media (max-width: 980px) {
  .brand-logo-track,
  .brand-logo-track-premium,
  .brand-logo-track-large {
    grid-auto-columns: clamp(310px, 48vw, 430px) !important;
  }

  .brand-logo-slide,
  .brand-logo-track-premium .brand-logo-slide {
    min-height: 310px !important;
  }
}

@media (max-width: 620px) {
  .brand-logo-track,
  .brand-logo-track-premium,
  .brand-logo-track-large {
    grid-auto-columns: minmax(285px, 86vw) !important;
    gap: 16px !important;
    padding-bottom: 32px !important;
  }

  .brand-logo-slide,
  .brand-logo-track-premium .brand-logo-slide {
    min-height: 280px !important;
    border-radius: 30px !important;
    padding: 22px !important;
  }

  .brand-logo-glass,
  .brand-logo-track-premium .brand-logo-glass,
  .brand-logo-mark {
    height: 140px !important;
    min-height: 140px !important;
    border-radius: 26px !important;
  }

  .brand-logo-glass img,
  .brand-logo-track-premium .brand-logo-glass img,
  .brand-logo-mark img {
    max-width: 280px !important;
    max-height: 110px !important;
  }

  .brand-logo-details {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .brand-logo-details strong {
    text-align: left !important;
    max-width: none !important;
  }
}


/* FINAL: oversized premium pill brand logos */
.brand-logo-slider-section,
.brand-logo-premium-section {
  padding-top: clamp(58px, 6vw, 96px) !important;
  padding-bottom: clamp(54px, 6vw, 90px) !important;
}

.brand-logo-slider-shell {
  margin: 0 !important;
  padding: 0 clamp(18px, 4vw, 72px) !important;
  overflow: visible !important;
}

.brand-logo-track,
.brand-logo-track-premium,
.brand-logo-track-large {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: clamp(430px, 38vw, 680px) !important;
  gap: clamp(22px, 3vw, 46px) !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  padding: 20px 0 44px !important;
}

.brand-logo-track::-webkit-scrollbar,
.brand-logo-track-premium::-webkit-scrollbar,
.brand-logo-track-large::-webkit-scrollbar {
  display: none !important;
}

.brand-logo-slide,
.brand-logo-track-premium .brand-logo-slide {
  min-height: clamp(142px, 11vw, 190px) !important;
  height: clamp(142px, 11vw, 190px) !important;
  padding: clamp(12px, 1.2vw, 18px) clamp(28px, 3vw, 52px) !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #ffffff, #f6f5ef) !important;
  border: 1px solid rgba(17, 19, 17, .12) !important;
  box-shadow: 0 30px 84px rgba(17, 19, 17, .12) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
}

.brand-logo-slide::after,
.brand-logo-track-premium .brand-logo-slide::after {
  content: "" !important;
  position: absolute !important;
  inset: auto auto -34px -18px !important;
  width: 116px !important;
  height: 116px !important;
  border-radius: 50% !important;
  background: rgba(215, 255, 63, .50) !important;
  opacity: .72 !important;
  z-index: 0 !important;
  transform: none !important;
}

.brand-logo-slide::before,
.brand-logo-track-premium .brand-logo-slide::before {
  content: "" !important;
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  width: clamp(42px, 4vw, 74px) !important;
  height: clamp(42px, 4vw, 74px) !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(215, 255, 63, .38) !important;
  z-index: 0 !important;
}

.brand-logo-slide-stiga,
.brand-logo-track-premium .brand-logo-slide-stiga {
  background: linear-gradient(145deg, #0f130f, #121812) !important;
}

.brand-logo-slide-dhs,
.brand-logo-track-premium .brand-logo-slide-dhs {
  background: linear-gradient(145deg, #ffffff, #f7f6f0) !important;
}

.brand-logo-slide-joola,
.brand-logo-track-premium .brand-logo-slide-joola {
  background: linear-gradient(145deg, #d7ff3f, #c9ff22) !important;
}

.brand-logo-glass,
.brand-logo-track-premium .brand-logo-glass,
.brand-logo-mark {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  position: relative !important;
  z-index: 2 !important;
}

.brand-logo-glass img,
.brand-logo-track-premium .brand-logo-glass img,
.brand-logo-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: clamp(300px, 29vw, 500px) !important;
  max-height: clamp(92px, 8.2vw, 145px) !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
  margin: 0 auto !important;
  filter: none !important;
  transform: scale(1.14) !important;
}

.brand-logo-slide-butterfly .brand-logo-glass img {
  max-width: clamp(330px, 31vw, 530px) !important;
}

.brand-logo-slide-stiga .brand-logo-glass img {
  filter: brightness(0) invert(1) !important;
}

.brand-logo-slide-stiga::after,
.brand-logo-slide-stiga::before {
  background: rgba(215, 255, 63, .78) !important;
}

.brand-logo-details,
.brand-logo-track-premium .brand-logo-details {
  display: none !important;
}

.brand-slider-btn {
  width: 62px !important;
  height: 62px !important;
}

/* Keep the compact strip readable but not tiny */
.brand-link-strip a {
  min-height: 82px !important;
  padding: 14px 24px 14px 18px !important;
  border-radius: 999px !important;
}

.brand-link-strip a img {
  width: 150px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

@media (max-width: 980px) {
  .brand-logo-track,
  .brand-logo-track-premium,
  .brand-logo-track-large {
    grid-auto-columns: clamp(390px, 70vw, 560px) !important;
  }

  .brand-logo-slide,
  .brand-logo-track-premium .brand-logo-slide {
    height: clamp(132px, 18vw, 170px) !important;
    min-height: clamp(132px, 18vw, 170px) !important;
  }

  .brand-logo-glass img,
  .brand-logo-track-premium .brand-logo-glass img,
  .brand-logo-mark img {
    max-width: clamp(275px, 55vw, 430px) !important;
    max-height: clamp(84px, 13vw, 125px) !important;
  }
}

@media (max-width: 560px) {
  .brand-logo-track,
  .brand-logo-track-premium,
  .brand-logo-track-large {
    grid-auto-columns: minmax(300px, 88vw) !important;
    gap: 16px !important;
    padding-bottom: 32px !important;
  }

  .brand-logo-slide,
  .brand-logo-track-premium .brand-logo-slide {
    height: 120px !important;
    min-height: 120px !important;
    padding: 10px 24px !important;
  }

  .brand-logo-glass img,
  .brand-logo-track-premium .brand-logo-glass img,
  .brand-logo-mark img {
    max-width: 260px !important;
    max-height: 88px !important;
    transform: scale(1.08) !important;
  }

  .brand-link-strip a img {
    width: 120px !important;
    height: 52px !important;
  }
}

/* FINAL OVERRIDE: make every brand-logo area a large visible pill, like the reference image */
.brand-logo-slider-section,
.brand-logo-premium-section,
.brand-page-slider,
.brand-minimal-list {
  padding-top: clamp(54px, 6vw, 90px) !important;
  padding-bottom: clamp(54px, 6vw, 90px) !important;
  overflow: hidden !important;
}

.brand-logo-slider-shell,
.brand-logo-premium-section .brand-logo-slider-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(20px, 5vw, 88px) !important;
  overflow: visible !important;
}

.brand-logo-track,
.brand-logo-track-premium,
.brand-logo-track-large,
.brand-logo-track.brand-logo-track-premium,
.brand-logo-track.brand-logo-track-large.brand-logo-track-premium {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: clamp(28px, 3.2vw, 56px) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  padding: 20px 0 48px !important;
  scrollbar-width: none !important;
}

.brand-logo-track::-webkit-scrollbar,
.brand-logo-track-premium::-webkit-scrollbar,
.brand-logo-track-large::-webkit-scrollbar,
.brand-link-strip::-webkit-scrollbar {
  display: none !important;
}

.brand-logo-track > .brand-logo-slide,
.brand-logo-track-premium > .brand-logo-slide,
.brand-logo-track-large > .brand-logo-slide,
a.brand-logo-slide {
  flex: 0 0 clamp(520px, 40vw, 760px) !important;
  width: clamp(520px, 40vw, 760px) !important;
  height: clamp(150px, 11vw, 205px) !important;
  min-height: clamp(150px, 11vw, 205px) !important;
  max-height: none !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 1.6vw, 24px) clamp(44px, 4vw, 78px) !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 19, 17, .13) !important;
  box-shadow: 0 30px 85px rgba(17, 19, 17, .13) !important;
  position: relative !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--ink) !important;
}

a.brand-logo-slide:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 40px 100px rgba(17, 19, 17, .18) !important;
}

a.brand-logo-slide::before {
  content: "" !important;
  position: absolute !important;
  left: clamp(28px, 2.4vw, 48px) !important;
  top: 50% !important;
  width: clamp(58px, 5vw, 92px) !important;
  height: clamp(58px, 5vw, 92px) !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: rgba(215, 255, 63, .55) !important;
  z-index: 0 !important;
  opacity: 1 !important;
  display: block !important;
}

a.brand-logo-slide::after {
  content: "" !important;
  position: absolute !important;
  right: clamp(28px, 2.4vw, 48px) !important;
  top: 50% !important;
  width: clamp(58px, 5vw, 92px) !important;
  height: clamp(58px, 5vw, 92px) !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: rgba(215, 255, 63, .32) !important;
  z-index: 0 !important;
  opacity: 1 !important;
  display: block !important;
}

a.brand-logo-slide-joola {
  background: linear-gradient(145deg, #d7ff3f, #caff24) !important;
}

a.brand-logo-slide-stiga {
  background: linear-gradient(145deg, #101410, #131a13) !important;
}

a.brand-logo-slide-stiga::before,
a.brand-logo-slide-stiga::after {
  background: rgba(215, 255, 63, .74) !important;
}

a.brand-logo-slide-dhs::before {
  background: rgba(229, 57, 53, .92) !important;
}

a.brand-logo-slide-yinhe::before {
  background: rgba(66, 123, 255, .90) !important;
}

a.brand-logo-slide-xiom::before {
  background: rgba(242, 140, 56, .85) !important;
}

a.brand-logo-slide-andro::before {
  background: rgba(95, 212, 111, .88) !important;
}

a.brand-logo-slide-dawei::before {
  background: rgba(216, 49, 43, .88) !important;
}

a.brand-logo-slide .brand-logo-glass,
a.brand-logo-slide .brand-logo-mark,
.brand-logo-track-premium .brand-logo-glass,
.brand-logo-track-premium .brand-logo-mark {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}

a.brand-logo-slide .brand-logo-glass img,
a.brand-logo-slide .brand-logo-mark img,
.brand-logo-track-premium .brand-logo-glass img,
.brand-logo-track-premium .brand-logo-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: clamp(390px, 31vw, 600px) !important;
  max-height: clamp(112px, 8.5vw, 165px) !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

a.brand-logo-slide-stiga .brand-logo-glass img,
a.brand-logo-slide-stiga .brand-logo-mark img {
  filter: brightness(0) invert(1) !important;
}

a.brand-logo-slide .brand-logo-details,
a.brand-logo-slide .brand-logo-content,
a.brand-logo-slide em,
.brand-logo-track-premium .brand-logo-details,
.brand-logo-track-premium .brand-logo-content,
.brand-logo-track-premium em {
  display: none !important;
}

.brand-link-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(28px, 3.2vw, 56px) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 20px 0 48px !important;
  scrollbar-width: none !important;
}

.brand-link-strip a {
  flex: 0 0 clamp(520px, 40vw, 760px) !important;
  width: clamp(520px, 40vw, 760px) !important;
  height: clamp(150px, 11vw, 205px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 1.6vw, 24px) clamp(44px, 4vw, 78px) !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 19, 17, .13) !important;
  box-shadow: 0 30px 85px rgba(17, 19, 17, .13) !important;
  position: relative !important;
  overflow: hidden !important;
}

.brand-link-strip a img {
  width: 100% !important;
  height: 100% !important;
  max-width: clamp(390px, 31vw, 600px) !important;
  max-height: clamp(112px, 8.5vw, 165px) !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.brand-link-strip a span {
  display: none !important;
}

@media (max-width: 980px) {
  .brand-logo-track > .brand-logo-slide,
  .brand-logo-track-premium > .brand-logo-slide,
  .brand-logo-track-large > .brand-logo-slide,
  a.brand-logo-slide,
  .brand-link-strip a {
    flex-basis: clamp(430px, 74vw, 610px) !important;
    width: clamp(430px, 74vw, 610px) !important;
    height: clamp(138px, 20vw, 180px) !important;
    min-height: clamp(138px, 20vw, 180px) !important;
  }

  a.brand-logo-slide .brand-logo-glass img,
  .brand-link-strip a img {
    max-width: clamp(330px, 58vw, 500px) !important;
    max-height: clamp(98px, 15vw, 140px) !important;
  }
}

@media (max-width: 560px) {
  .brand-logo-track > .brand-logo-slide,
  .brand-logo-track-premium > .brand-logo-slide,
  .brand-logo-track-large > .brand-logo-slide,
  a.brand-logo-slide,
  .brand-link-strip a {
    flex-basis: min(88vw, 390px) !important;
    width: min(88vw, 390px) !important;
    height: 118px !important;
    min-height: 118px !important;
    padding: 12px 34px !important;
  }

  a.brand-logo-slide::before,
  a.brand-logo-slide::after {
    width: 52px !important;
    height: 52px !important;
  }

  a.brand-logo-slide .brand-logo-glass img,
  .brand-link-strip a img {
    max-width: 290px !important;
    max-height: 88px !important;
  }
}


/* FINAL FIX: the visible homepage logo marquee was still tiny — make it huge */
.brand-logo-marquee.logo-only,
.brand-logo-marquee,
.logo-only {
  width: 100% !important;
  min-height: clamp(210px, 17vw, 310px) !important;
  padding: clamp(34px, 5vw, 72px) 0 !important;
  overflow: hidden !important;
  background: var(--paper, #f7f6f0) !important;
  border: 0 !important;
}

.logo-marquee-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  padding: 0 clamp(18px, 5vw, 90px) !important;
}

.logo-marquee-shell::-webkit-scrollbar {
  display: none !important;
}

.logo-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(28px, 3.4vw, 58px) !important;
  width: max-content !important;
  min-width: 100% !important;
  animation: none !important;
  transform: none !important;
  padding: 12px 0 28px !important;
}

.logo-pill,
.logo-marquee-track .logo-pill,
a.logo-pill {
  flex: 0 0 clamp(520px, 42vw, 780px) !important;
  width: clamp(520px, 42vw, 780px) !important;
  height: clamp(150px, 11.5vw, 210px) !important;
  min-height: clamp(150px, 11.5vw, 210px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 2vw, 28px) clamp(48px, 4.5vw, 82px) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,19,17,.14) !important;
  box-shadow: 0 30px 88px rgba(17,19,17,.13) !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.logo-pill::before,
.logo-marquee-track .logo-pill::before {
  content: "" !important;
  position: absolute !important;
  left: clamp(30px, 3vw, 54px) !important;
  top: 50% !important;
  width: clamp(64px, 5.4vw, 96px) !important;
  height: clamp(64px, 5.4vw, 96px) !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(215,255,63,.58) !important;
  z-index: 0 !important;
}

.logo-pill::after,
.logo-marquee-track .logo-pill::after {
  content: "" !important;
  position: absolute !important;
  right: clamp(30px, 3vw, 54px) !important;
  top: 50% !important;
  width: clamp(64px, 5.4vw, 96px) !important;
  height: clamp(64px, 5.4vw, 96px) !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(215,255,63,.32) !important;
  z-index: 0 !important;
}

.logo-pill[href*="joola"] {
  background: linear-gradient(145deg, #d7ff3f, #caff24) !important;
}

.logo-pill[href*="stiga"] {
  background: linear-gradient(145deg, #101410, #121812) !important;
}

.logo-pill[href*="stiga"]::before,
.logo-pill[href*="stiga"]::after {
  background: rgba(215,255,63,.78) !important;
}

.logo-pill[href*="dhs"]::before {
  background: rgba(229,57,53,.92) !important;
}

.logo-pill[href*="yinhe"]::before {
  background: rgba(66,123,255,.92) !important;
}

.logo-pill[href*="xiom"]::before {
  background: rgba(242,140,56,.88) !important;
}

.logo-pill[href*="andro"]::before {
  background: rgba(95,212,111,.9) !important;
}

.logo-pill[href*="dawei"]::before {
  background: rgba(216,49,43,.9) !important;
}

.logo-pill img,
.logo-marquee-track .logo-pill img,
a.logo-pill img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: clamp(390px, 32vw, 620px) !important;
  max-height: clamp(112px, 8.8vw, 170px) !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

.logo-pill[href*="stiga"] img {
  filter: brightness(0) invert(1) !important;
}

/* Also target the brand page strip in case this same small-marquee section appears there */
.brand-link-strip {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(28px, 3.4vw, 58px) !important;
  overflow-x: auto !important;
  padding: 16px 0 42px !important;
  scrollbar-width: none !important;
}

.brand-link-strip::-webkit-scrollbar {
  display: none !important;
}

.brand-link-strip a {
  flex: 0 0 clamp(520px, 42vw, 780px) !important;
  width: clamp(520px, 42vw, 780px) !important;
  height: clamp(150px, 11.5vw, 210px) !important;
  min-height: clamp(150px, 11.5vw, 210px) !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(18px, 2vw, 28px) clamp(48px, 4.5vw, 82px) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,19,17,.14) !important;
  box-shadow: 0 30px 88px rgba(17,19,17,.13) !important;
}

.brand-link-strip a img {
  width: 100% !important;
  height: 100% !important;
  max-width: clamp(390px, 32vw, 620px) !important;
  max-height: clamp(112px, 8.8vw, 170px) !important;
  object-fit: contain !important;
}

.brand-link-strip a span {
  display: none !important;
}

@media (max-width: 980px) {
  .logo-pill,
  .logo-marquee-track .logo-pill,
  a.logo-pill,
  .brand-link-strip a {
    flex-basis: clamp(420px, 74vw, 620px) !important;
    width: clamp(420px, 74vw, 620px) !important;
    height: clamp(138px, 20vw, 184px) !important;
    min-height: clamp(138px, 20vw, 184px) !important;
  }

  .logo-pill img,
  .brand-link-strip a img {
    max-width: clamp(330px, 58vw, 510px) !important;
    max-height: clamp(98px, 15vw, 145px) !important;
  }
}

@media (max-width: 560px) {
  .brand-logo-marquee.logo-only,
  .brand-logo-marquee,
  .logo-only {
    min-height: 178px !important;
    padding: 24px 0 !important;
  }

  .logo-marquee-shell {
    padding-inline: 16px !important;
  }

  .logo-pill,
  .logo-marquee-track .logo-pill,
  a.logo-pill,
  .brand-link-strip a {
    flex-basis: min(88vw, 390px) !important;
    width: min(88vw, 390px) !important;
    height: 118px !important;
    min-height: 118px !important;
    padding: 12px 34px !important;
  }

  .logo-pill::before,
  .logo-pill::after {
    width: 52px !important;
    height: 52px !important;
  }

  .logo-pill img,
  .brand-link-strip a img {
    max-width: 290px !important;
    max-height: 88px !important;
  }
}


/* FINAL: reduce visible brand logo pills to half-size and keep them clean */
.brand-logo-marquee.logo-only,
.brand-logo-marquee,
.logo-only {
  min-height: clamp(130px, 10vw, 170px) !important;
  padding: clamp(20px, 3vw, 38px) 0 !important;
}

.logo-marquee-shell {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 0 clamp(16px, 4vw, 72px) !important;
  scroll-behavior: smooth !important;
}

.logo-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 28px) !important;
  width: max-content !important;
  min-width: max-content !important;
  padding: 10px 0 22px !important;
  animation: none !important;
}

.logo-pill,
.logo-marquee-track .logo-pill,
a.logo-pill {
  flex: 0 0 clamp(260px, 21vw, 390px) !important;
  width: clamp(260px, 21vw, 390px) !important;
  height: clamp(76px, 5.8vw, 105px) !important;
  min-height: clamp(76px, 5.8vw, 105px) !important;
  padding: clamp(10px, 1vw, 14px) clamp(24px, 2.2vw, 40px) !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 46px rgba(17, 19, 17, .10) !important;
}

.logo-pill::before,
.logo-marquee-track .logo-pill::before,
.logo-pill::after,
.logo-marquee-track .logo-pill::after {
  width: clamp(34px, 3vw, 50px) !important;
  height: clamp(34px, 3vw, 50px) !important;
}

.logo-pill::before,
.logo-marquee-track .logo-pill::before {
  left: clamp(16px, 1.5vw, 26px) !important;
}

.logo-pill::after,
.logo-marquee-track .logo-pill::after {
  right: clamp(16px, 1.5vw, 26px) !important;
}

.logo-pill img,
.logo-marquee-track .logo-pill img,
a.logo-pill img {
  max-width: clamp(205px, 16vw, 310px) !important;
  max-height: clamp(54px, 4.4vw, 82px) !important;
  transform: none !important;
}

/* Match brand page logo sliders to the same half-size look */
.brand-logo-track,
.brand-logo-track-premium,
.brand-logo-track-large {
  gap: clamp(16px, 2vw, 28px) !important;
  padding: 10px 0 24px !important;
}

.brand-logo-track > .brand-logo-slide,
.brand-logo-track-premium > .brand-logo-slide,
.brand-logo-track-large > .brand-logo-slide,
a.brand-logo-slide {
  flex-basis: clamp(260px, 21vw, 390px) !important;
  width: clamp(260px, 21vw, 390px) !important;
  height: clamp(76px, 5.8vw, 105px) !important;
  min-height: clamp(76px, 5.8vw, 105px) !important;
  padding: clamp(10px, 1vw, 14px) clamp(24px, 2.2vw, 40px) !important;
  box-shadow: 0 16px 46px rgba(17, 19, 17, .10) !important;
}

a.brand-logo-slide::before,
a.brand-logo-slide::after {
  width: clamp(34px, 3vw, 50px) !important;
  height: clamp(34px, 3vw, 50px) !important;
}

a.brand-logo-slide::before {
  left: clamp(16px, 1.5vw, 26px) !important;
}

a.brand-logo-slide::after {
  right: clamp(16px, 1.5vw, 26px) !important;
}

a.brand-logo-slide .brand-logo-glass img,
a.brand-logo-slide .brand-logo-mark img,
.brand-logo-track-premium .brand-logo-glass img,
.brand-logo-track-premium .brand-logo-mark img {
  max-width: clamp(205px, 16vw, 310px) !important;
  max-height: clamp(54px, 4.4vw, 82px) !important;
}

.brand-link-strip {
  gap: clamp(16px, 2vw, 28px) !important;
  padding: 10px 0 24px !important;
  scroll-behavior: smooth !important;
}

.brand-link-strip a {
  flex-basis: clamp(260px, 21vw, 390px) !important;
  width: clamp(260px, 21vw, 390px) !important;
  height: clamp(76px, 5.8vw, 105px) !important;
  min-height: clamp(76px, 5.8vw, 105px) !important;
  padding: clamp(10px, 1vw, 14px) clamp(24px, 2.2vw, 40px) !important;
  box-shadow: 0 16px 46px rgba(17, 19, 17, .10) !important;
}

.brand-link-strip a img {
  max-width: clamp(205px, 16vw, 310px) !important;
  max-height: clamp(54px, 4.4vw, 82px) !important;
}

.logo-pill:hover,
a.brand-logo-slide:hover,
.brand-link-strip a:hover {
  transform: translateY(-3px) !important;
}

@media (max-width: 980px) {
  .logo-pill,
  .logo-marquee-track .logo-pill,
  a.logo-pill,
  .brand-logo-track > .brand-logo-slide,
  .brand-logo-track-premium > .brand-logo-slide,
  .brand-logo-track-large > .brand-logo-slide,
  a.brand-logo-slide,
  .brand-link-strip a {
    flex-basis: clamp(250px, 48vw, 360px) !important;
    width: clamp(250px, 48vw, 360px) !important;
    height: clamp(74px, 12vw, 100px) !important;
    min-height: clamp(74px, 12vw, 100px) !important;
  }

  .logo-pill img,
  a.brand-logo-slide .brand-logo-glass img,
  .brand-link-strip a img {
    max-width: clamp(195px, 38vw, 285px) !important;
    max-height: clamp(52px, 9vw, 78px) !important;
  }
}

@media (max-width: 560px) {
  .brand-logo-marquee.logo-only,
  .brand-logo-marquee,
  .logo-only {
    min-height: 122px !important;
    padding: 18px 0 !important;
  }

  .logo-pill,
  .logo-marquee-track .logo-pill,
  a.logo-pill,
  .brand-logo-track > .brand-logo-slide,
  .brand-logo-track-premium > .brand-logo-slide,
  .brand-logo-track-large > .brand-logo-slide,
  a.brand-logo-slide,
  .brand-link-strip a {
    flex-basis: min(76vw, 285px) !important;
    width: min(76vw, 285px) !important;
    height: 86px !important;
    min-height: 86px !important;
    padding: 10px 24px !important;
  }

  .logo-pill img,
  a.brand-logo-slide .brand-logo-glass img,
  .brand-link-strip a img {
    max-width: 220px !important;
    max-height: 62px !important;
  }
}


/* FINAL REFERENCE BRAND LOGO STRIP — clean medium pill slider */
.brand-pill-reference,
.brand-logo-marquee.logo-only.brand-pill-reference {
  width: 100% !important;
  min-height: 172px !important;
  padding: 28px 0 34px !important;
  background: var(--paper, #f7f6f0) !important;
  border: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.brand-pill-reference .logo-marquee-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.brand-pill-reference .logo-marquee-track {
  width: max-content !important;
  min-width: max-content !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 34px !important;
  padding: 0 34px !important;
  animation: brandPillAutoSlide 34s linear infinite !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

.brand-pill-reference:hover .logo-marquee-track {
  animation-play-state: paused !important;
}

@keyframes brandPillAutoSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.brand-pill-reference .logo-pill,
.brand-link-strip .logo-pill {
  flex: 0 0 430px !important;
  width: 430px !important;
  height: 116px !important;
  min-height: 116px !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px 54px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 19, 17, .13) !important;
  box-shadow: 0 20px 58px rgba(17, 19, 17, .105) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin: 0 !important;
}

.brand-pill-reference .logo-pill::before,
.brand-link-strip .logo-pill::before {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  top: 50% !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(215, 255, 63, .58) !important;
  z-index: 0 !important;
}

.brand-pill-reference .logo-pill::after,
.brand-link-strip .logo-pill::after {
  content: "" !important;
  position: absolute !important;
  right: 32px !important;
  top: 50% !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(215, 255, 63, .28) !important;
  z-index: 0 !important;
}

.brand-pill-reference .logo-pill-joola,
.brand-link-strip .logo-pill-joola {
  background: linear-gradient(145deg, #d7ff3f, #caff24) !important;
}

.brand-pill-reference .logo-pill-stiga,
.brand-link-strip .logo-pill-stiga {
  background: linear-gradient(145deg, #101410, #121812) !important;
}

.brand-pill-reference .logo-pill-stiga::before,
.brand-pill-reference .logo-pill-stiga::after,
.brand-link-strip .logo-pill-stiga::before,
.brand-link-strip .logo-pill-stiga::after {
  background: rgba(215, 255, 63, .78) !important;
}

.brand-pill-reference .logo-pill-dhs::before,
.brand-link-strip .logo-pill-dhs::before {
  background: rgba(229, 57, 53, .92) !important;
}

.brand-pill-reference .logo-pill-yinhe::before,
.brand-link-strip .logo-pill-yinhe::before {
  background: rgba(66, 123, 255, .92) !important;
}

.brand-pill-reference .logo-pill-xiom::before,
.brand-link-strip .logo-pill-xiom::before {
  background: rgba(242, 140, 56, .88) !important;
}

.brand-pill-reference .logo-pill-andro::before,
.brand-link-strip .logo-pill-andro::before {
  background: rgba(95, 212, 111, .9) !important;
}

.brand-pill-reference .logo-pill-dawei::before,
.brand-link-strip .logo-pill-dawei::before {
  background: rgba(216, 49, 43, .9) !important;
}

.brand-pill-reference .logo-pill img,
.brand-link-strip .logo-pill img {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 320px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}

.brand-pill-reference .logo-pill-stiga img,
.brand-link-strip .logo-pill-stiga img {
  filter: brightness(0) invert(1) !important;
}

.brand-pill-reference .logo-pill:hover,
.brand-link-strip .logo-pill:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 26px 70px rgba(17, 19, 17, .16) !important;
}

/* Brands page direct strip should match reference but not auto-scroll */
.brand-link-strip {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 34px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  padding: 4px 0 34px !important;
}

.brand-link-strip::-webkit-scrollbar {
  display: none !important;
}

.brand-link-strip a span,
.brand-link-strip .logo-pill span {
  display: none !important;
}

@media (max-width: 980px) {
  .brand-pill-reference {
    min-height: 154px !important;
    padding: 24px 0 30px !important;
  }

  .brand-pill-reference .logo-marquee-track,
  .brand-link-strip {
    gap: 24px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .brand-pill-reference .logo-pill,
  .brand-link-strip .logo-pill {
    flex-basis: 360px !important;
    width: 360px !important;
    height: 102px !important;
    min-height: 102px !important;
    padding: 16px 44px !important;
  }

  .brand-pill-reference .logo-pill img,
  .brand-link-strip .logo-pill img {
    max-width: 265px !important;
    max-height: 68px !important;
  }

  .brand-pill-reference .logo-pill::before,
  .brand-pill-reference .logo-pill::after,
  .brand-link-strip .logo-pill::before,
  .brand-link-strip .logo-pill::after {
    width: 48px !important;
    height: 48px !important;
  }
}

@media (max-width: 560px) {
  .brand-pill-reference {
    min-height: 122px !important;
    padding: 18px 0 22px !important;
  }

  .brand-pill-reference .logo-marquee-track,
  .brand-link-strip {
    gap: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .brand-pill-reference .logo-pill,
  .brand-link-strip .logo-pill {
    flex-basis: 270px !important;
    width: 270px !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 11px 30px !important;
  }

  .brand-pill-reference .logo-pill img,
  .brand-link-strip .logo-pill img {
    max-width: 205px !important;
    max-height: 54px !important;
  }

  .brand-pill-reference .logo-pill::before,
  .brand-pill-reference .logo-pill::after,
  .brand-link-strip .logo-pill::before,
  .brand-link-strip .logo-pill::after {
    width: 38px !important;
    height: 38px !important;
  }

  .brand-pill-reference .logo-pill::before,
  .brand-link-strip .logo-pill::before {
    left: 18px !important;
  }

  .brand-pill-reference .logo-pill::after,
  .brand-link-strip .logo-pill::after {
    right: 18px !important;
  }
}


/* FINAL CLEAN COMPANY LOGO SLIDER — exact, simple, decent, theme-matched */
.ttw-brand-strip-final {
  width: 100%;
  padding: clamp(22px, 3vw, 36px) 0;
  background: var(--paper, #f7f6f0);
  overflow: hidden;
  border: 0;
}

.ttw-brand-strip-mask {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ttw-brand-strip-mask::before,
.ttw-brand-strip-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(42px, 8vw, 150px);
  z-index: 4;
  pointer-events: none;
}

.ttw-brand-strip-mask::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper, #f7f6f0), rgba(247,246,240,0));
}

.ttw-brand-strip-mask::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper, #f7f6f0), rgba(247,246,240,0));
}

.ttw-brand-strip-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
  padding: 4px clamp(18px, 3vw, 44px);
  animation: ttwBrandLogoSlide 32s linear infinite;
  will-change: transform;
}

.ttw-brand-strip-final:hover .ttw-brand-strip-track {
  animation-play-state: paused;
}

@keyframes ttwBrandLogoSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ttw-brand-logo-pill-final {
  flex: 0 0 clamp(300px, 25vw, 420px);
  width: clamp(300px, 25vw, 420px);
  height: clamp(82px, 6.2vw, 108px);
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.4vw, 20px) clamp(34px, 2.8vw, 48px);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 19, 17, .11);
  box-shadow: 0 16px 42px rgba(17, 19, 17, .08);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}

.ttw-brand-logo-pill-final:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(17, 19, 17, .13);
}

.ttw-brand-logo-pill-final::before,
.ttw-brand-logo-pill-final::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(38px, 3.4vw, 54px);
  height: clamp(38px, 3.4vw, 54px);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

.ttw-brand-logo-pill-final::before {
  left: clamp(18px, 1.7vw, 26px);
  background: rgba(215, 255, 63, .56);
}

.ttw-brand-logo-pill-final::after {
  right: clamp(18px, 1.7vw, 26px);
  background: rgba(215, 255, 63, .28);
}

.ttw-brand-logo-pill-final img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: clamp(220px, 19vw, 315px);
  max-height: clamp(52px, 4.6vw, 74px);
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  padding: 0;
}

/* brand mood, but still simple */
.ttw-brand-logo-joola {
  background: linear-gradient(145deg, #d7ff3f, #caff26);
}

.ttw-brand-logo-stiga {
  background: linear-gradient(145deg, #101410, #121812);
}

.ttw-brand-logo-stiga img {
  filter: brightness(0) invert(1);
}

.ttw-brand-logo-stiga::before,
.ttw-brand-logo-stiga::after {
  background: rgba(215, 255, 63, .75);
}

.ttw-brand-logo-dhs::before {
  background: rgba(229, 57, 53, .90);
}

.ttw-brand-logo-yinhe::before {
  background: rgba(66, 123, 255, .90);
}

.ttw-brand-logo-xiom::before {
  background: rgba(242, 140, 56, .86);
}

.ttw-brand-logo-andro::before {
  background: rgba(95, 212, 111, .88);
}

.ttw-brand-logo-dawei::before {
  background: rgba(216, 49, 43, .88);
}

.ttw-brand-strip-page {
  margin-top: 0;
  padding-top: 10px;
}

/* Hide older logo strips if cached/duplicate markup remains */
.brand-logo-marquee.logo-only:not(.brand-pill-reference),
.logo-marquee-shell:not(.ttw-brand-strip-mask) {
  display: none !important;
}

@media (max-width: 980px) {
  .ttw-brand-logo-pill-final {
    flex-basis: clamp(270px, 46vw, 360px);
    width: clamp(270px, 46vw, 360px);
    height: clamp(76px, 11vw, 96px);
  }

  .ttw-brand-logo-pill-final img {
    max-width: clamp(205px, 36vw, 275px);
    max-height: clamp(48px, 8vw, 66px);
  }
}

@media (max-width: 560px) {
  .ttw-brand-strip-final {
    padding: 18px 0;
  }

  .ttw-brand-strip-track {
    gap: 14px;
    animation-duration: 28s;
  }

  .ttw-brand-logo-pill-final {
    flex-basis: min(74vw, 270px);
    width: min(74vw, 270px);
    height: 78px;
    padding: 10px 28px;
  }

  .ttw-brand-logo-pill-final::before,
  .ttw-brand-logo-pill-final::after {
    width: 34px;
    height: 34px;
  }

  .ttw-brand-logo-pill-final img {
    max-width: 205px;
    max-height: 52px;
  }
}


/* FINAL POLISH: simple aesthetic brand-logo auto slider with proper logos */
.ttw-brand-strip-final {
  width: 100%;
  padding: clamp(24px, 3.2vw, 42px) 0;
  background: var(--paper, #f7f6f0) !important;
  overflow: hidden;
  border: 0;
}

.ttw-brand-strip-mask {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ttw-brand-strip-mask::before,
.ttw-brand-strip-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(36px, 7vw, 130px);
  z-index: 5;
  pointer-events: none;
}

.ttw-brand-strip-mask::before {
  left: 0;
  background: linear-gradient(90deg, var(--paper, #f7f6f0), rgba(247, 246, 240, 0));
}

.ttw-brand-strip-mask::after {
  right: 0;
  background: linear-gradient(270deg, var(--paper, #f7f6f0), rgba(247, 246, 240, 0));
}

.ttw-brand-strip-track {
  width: max-content;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  padding: 6px clamp(18px, 3vw, 46px);
  animation: ttwBrandLogoSlideClean 34s linear infinite;
  will-change: transform;
}

.ttw-brand-strip-final:hover .ttw-brand-strip-track {
  animation-play-state: paused;
}

@keyframes ttwBrandLogoSlideClean {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ttw-brand-logo-pill-final {
  flex: 0 0 clamp(310px, 26vw, 430px);
  width: clamp(310px, 26vw, 430px);
  height: clamp(82px, 6.4vw, 112px);
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.3vw, 20px) clamp(34px, 2.8vw, 48px);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 19, 17, .11);
  box-shadow: 0 16px 42px rgba(17, 19, 17, .075);
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ttw-brand-logo-pill-final::before,
.ttw-brand-logo-pill-final::after {
  display: none !important;
  content: none !important;
}

.ttw-brand-logo-pill-final:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 19, 17, .18);
  box-shadow: 0 22px 58px rgba(17, 19, 17, .12);
}

.ttw-brand-logo-pill-final img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: clamp(220px, 19vw, 330px);
  max-height: clamp(52px, 4.7vw, 78px);
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  padding: 0;
  filter: none;
  transform: none;
  opacity: 1;
}

.ttw-brand-logo-stiga {
  background: linear-gradient(145deg, #101410, #131a13);
}

.ttw-brand-logo-stiga img {
  filter: brightness(0) invert(1);
}

.ttw-brand-logo-joola {
  background: linear-gradient(145deg, #d7ff3f, #caff26);
}

.ttw-brand-logo-butterfly,
.ttw-brand-logo-dhs,
.ttw-brand-logo-yinhe,
.ttw-brand-logo-xiom,
.ttw-brand-logo-andro,
.ttw-brand-logo-dawei,
.ttw-brand-logo-tibhar {
  background: #fff;
}

.ttw-brand-strip-page {
  margin-top: 0;
  padding-top: 8px;
  padding-bottom: 36px;
}

/* suppress older duplicate logo strip/chip styling if markup remains */
.brand-logo-marquee.logo-only,
.logo-marquee-shell,
.logo-marquee-track,
.logo-pill,
.brand-link-strip {
  display: none !important;
}

@media (max-width: 980px) {
  .ttw-brand-logo-pill-final {
    flex-basis: clamp(270px, 46vw, 360px);
    width: clamp(270px, 46vw, 360px);
    height: clamp(76px, 11vw, 98px);
  }

  .ttw-brand-logo-pill-final img {
    max-width: clamp(205px, 36vw, 280px);
    max-height: clamp(48px, 8vw, 66px);
  }
}

@media (max-width: 560px) {
  .ttw-brand-strip-final {
    padding: 18px 0;
  }

  .ttw-brand-strip-track {
    gap: 14px;
    padding: 4px 16px;
    animation-duration: 28s;
  }

  .ttw-brand-logo-pill-final {
    flex-basis: min(76vw, 270px);
    width: min(76vw, 270px);
    height: 78px;
    padding: 10px 26px;
  }

  .ttw-brand-logo-pill-final img {
    max-width: 210px;
    max-height: 54px;
  }
}


/* Removed brand logo slider/marquee section */
.ttw-brand-strip-final,
.brand-logo-marquee.logo-only,
.brand-logo-marquee,
.logo-marquee-shell,
.logo-marquee-track,
.logo-pill,
.brand-link-strip {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Choose your brand section */
.choose-brand-section {
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(72px, 8vw, 120px);
  background: var(--paper);
}

.choose-brand-shell {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: stretch;
}

.choose-brand-copy {
  align-self: center;
}

.choose-brand-copy h2 {
  margin: 12px 0 18px;
  font: 900 clamp(48px, 6vw, 92px)/.88 Manrope, sans-serif;
  letter-spacing: -.085em;
  max-width: 760px;
}

.choose-brand-copy p {
  max-width: 560px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.choose-brand-panel {
  display: grid;
  gap: 14px;
}

.choose-brand-mini {
  position: relative;
  min-height: 148px;
  padding: 24px 26px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 20%, rgba(215, 255, 63, .28), transparent 28%),
    rgba(255, 255, 255, .78);
  border: 1px solid rgba(17, 19, 17, .08);
  box-shadow: 0 18px 44px rgba(17, 19, 17, .055);
  overflow: hidden;
}

.choose-brand-mini span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 18px;
}

.choose-brand-mini strong {
  display: block;
  font-size: 24px;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.choose-brand-mini p {
  max-width: 460px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 700;
  margin: 0;
}

.choose-brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 48px);
}

.choose-brand-strip a {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(17, 19, 17, .08);
  box-shadow: 0 12px 28px rgba(17, 19, 17, .045);
  font-weight: 900;
  letter-spacing: -.02em;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.choose-brand-strip a:hover {
  transform: translateY(-2px);
  background: var(--accent);
  border-color: rgba(17, 19, 17, .12);
}

.choose-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

@media (max-width: 920px) {
  .choose-brand-shell {
    grid-template-columns: 1fr;
  }

  .choose-brand-copy h2 {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .choose-brand-section {
    padding-top: 56px;
    padding-bottom: 62px;
  }

  .choose-brand-copy h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .choose-brand-copy p {
    font-size: 15px;
  }

  .choose-brand-mini {
    min-height: auto;
    padding: 22px;
    border-radius: 24px;
  }

  .choose-brand-mini strong {
    font-size: 22px;
  }

  .choose-brand-strip a {
    min-height: 46px;
    padding: 0 16px;
  }

  .choose-brand-actions .button {
    width: 100%;
    justify-content: center;
  }
}


/* DHS corrected images: keep packaging/blade photos contained and unclipped */
.product-visual img,
.vc-img img,
.visual-product-image img,
.modal-product-visual img,
.fixed-modal-media img,
.product-detail-media img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
}


/* Save Filter controls for product and brand catalogue pages */
.save-filter-actions {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(17, 19, 17, .10);
  box-shadow: 0 18px 48px rgba(17, 19, 17, .10);
  backdrop-filter: blur(14px);
}

.save-filter-button,
.clear-pending-filter-button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.save-filter-button {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 28px rgba(17, 19, 17, .16);
}

.filters-have-unsaved-changes .save-filter-button {
  background: var(--accent);
  color: var(--ink);
}

.clear-pending-filter-button {
  background: rgba(17, 19, 17, .06);
  color: rgba(17, 19, 17, .72);
}

.save-filter-button:hover,
.clear-pending-filter-button:hover {
  transform: translateY(-2px);
}

.pending-filter-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  text-align: center;
}

.filter-note-pending {
  color: #8b6b00 !important;
  font-weight: 900 !important;
}

/* Keep product price visible after save-filter rendering */
.product-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 14px !important;
  align-items: start !important;
}

.product-price {
  white-space: nowrap !important;
  min-width: max-content !important;
  justify-self: end !important;
}

.product-name {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  .product-topline {
    grid-template-columns: 1fr !important;
  }

  .product-price {
    justify-self: start !important;
  }

  .save-filter-actions {
    position: relative;
    bottom: auto;
  }
}


/* FINAL OVERRIDE: make Save Filter buttons visible inside every filter panel */
.filter-panel .save-filter-actions,
.save-filter-actions {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 10px !important;
  margin-top: 24px !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .95) !important;
  border: 1px solid rgba(17, 19, 17, .10) !important;
  box-shadow: 0 18px 48px rgba(17, 19, 17, .10) !important;
  backdrop-filter: blur(14px) !important;
}

.filter-panel .save-filter-button,
.filter-panel .clear-pending-filter-button,
.save-filter-button,
.clear-pending-filter-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 100% !important;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.filter-panel .save-filter-button,
.save-filter-button {
  background: var(--ink, #111311) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(17, 19, 17, .16) !important;
}

.filters-have-unsaved-changes .filter-panel .save-filter-button,
.filters-have-unsaved-changes .save-filter-button {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #111311) !important;
}

.filter-panel .clear-pending-filter-button,
.clear-pending-filter-button {
  background: rgba(17, 19, 17, .06) !important;
  color: rgba(17, 19, 17, .72) !important;
}

.filter-panel .pending-filter-note,
.pending-filter-note {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  margin: 0 !important;
  color: var(--muted, #72756e) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
}


/* FINAL: Customize page banner full-width landscape like other pages */
body[data-page="customize"] .visual-custom-hero,
body[data-page="customize"] .customize-hero,
body[data-page="customize"] .custom-hero,
body[data-page="customize"] .vc-hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  padding-left: clamp(22px, 7vw, 150px) !important;
  padding-right: clamp(22px, 7vw, 150px) !important;
  padding-top: clamp(140px, 13vw, 205px) !important;
  padding-bottom: clamp(56px, 8vw, 100px) !important;
  min-height: clamp(620px, 72vh, 820px) !important;
}

body[data-page="customize"] .visual-custom-hero {
  background:
    radial-gradient(circle at 78% 28%, rgba(215,255,63,.26), transparent 34%),
    linear-gradient(135deg, #101410, #23321f) !important;
}

body[data-page="customize"] .visual-custom-hero::before,
body[data-page="customize"] .customize-hero::before,
body[data-page="customize"] .custom-hero::before,
body[data-page="customize"] .vc-hero::before {
  border-radius: 0 !important;
}

body[data-page="customize"] .visual-hero-grid,
body[data-page="customize"] .customize-hero-grid,
body[data-page="customize"] .custom-hero-grid,
body[data-page="customize"] .vc-hero-grid {
  max-width: 1480px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

body[data-page="customize"] .visual-custom-hero h1,
body[data-page="customize"] .customize-hero h1,
body[data-page="customize"] .custom-hero h1,
body[data-page="customize"] .vc-hero h1 {
  max-width: 760px !important;
}

body[data-page="customize"] .visual-custom-hero p,
body[data-page="customize"] .customize-hero p,
body[data-page="customize"] .custom-hero p,
body[data-page="customize"] .vc-hero p {
  max-width: 700px !important;
}

/* prevent WhatsApp button from covering the full-width custom banner */
body[data-page="customize"] .whatsapp-consult {
  z-index: 30 !important;
}

@media (max-width: 900px) {
  body[data-page="customize"] .visual-custom-hero,
  body[data-page="customize"] .customize-hero,
  body[data-page="customize"] .custom-hero,
  body[data-page="customize"] .vc-hero {
    min-height: auto !important;
    padding-top: 120px !important;
    padding-bottom: 54px !important;
  }
}

@media (max-width: 560px) {
  body[data-page="customize"] .visual-custom-hero,
  body[data-page="customize"] .customize-hero,
  body[data-page="customize"] .custom-hero,
  body[data-page="customize"] .vc-hero {
    padding-top: 108px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-bottom: 44px !important;
  }
}


/* FINAL: fix service card overlap and rubber product options */
.service-showcase {
  overflow: visible !important;
}

.service-grid.professional-service-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr) !important;
  grid-template-areas:
    "custom brands"
    "custom gear" !important;
  gap: clamp(18px, 2vw, 28px) !important;
  align-items: stretch !important;
}

.pro-service-card {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.pro-service-card.pro-custom {
  grid-area: custom !important;
  grid-row: auto !important;
  min-height: 560px !important;
}

.pro-service-card.pro-brands {
  grid-area: brands !important;
  min-height: 270px !important;
}

.pro-service-card.pro-gear {
  grid-area: gear !important;
  min-height: 270px !important;
}

.pro-service-card.pro-brands .service-copy,
.pro-service-card.pro-gear .service-copy {
  min-height: 270px !important;
}

.pro-service-card.pro-brands .service-copy h3,
.pro-service-card.pro-gear .service-copy h3 {
  font-size: clamp(42px, 4.5vw, 66px) !important;
  max-width: 88% !important;
}

.pro-service-card.pro-brands .service-copy p,
.pro-service-card.pro-gear .service-copy p {
  max-width: 74% !important;
}

@media (max-width: 980px) {
  .service-grid.professional-service-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "custom"
      "brands"
      "gear" !important;
  }

  .pro-service-card.pro-custom,
  .pro-service-card.pro-brands,
  .pro-service-card.pro-gear {
    min-height: 340px !important;
  }

  .pro-service-card .service-copy,
  .pro-service-card.pro-brands .service-copy,
  .pro-service-card.pro-gear .service-copy {
    min-height: 340px !important;
  }
}

@media (max-width: 560px) {
  .pro-service-card.pro-custom,
  .pro-service-card.pro-brands,
  .pro-service-card.pro-gear,
  .pro-service-card .service-copy,
  .pro-service-card.pro-brands .service-copy,
  .pro-service-card.pro-gear .service-copy {
    min-height: 318px !important;
  }

  .pro-service-card.pro-brands .service-copy h3,
  .pro-service-card.pro-gear .service-copy h3 {
    max-width: 90% !important;
    font-size: clamp(34px, 11vw, 52px) !important;
  }

  .pro-service-card.pro-brands .service-copy p,
  .pro-service-card.pro-gear .service-copy p {
    max-width: 86% !important;
  }
}

.rubber-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.rubber-spec-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(17, 19, 17, .06);
  color: rgba(17, 19, 17, .68);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.rubber-detail-options {
  margin: 28px 0 8px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(17, 19, 17, .08);
  box-shadow: 0 16px 36px rgba(17, 19, 17, .055);
}

.rubber-option-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rubber-option-head small {
  display: block;
  margin-bottom: 7px;
  color: rgba(17, 19, 17, .48);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
}

.rubber-option-head h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.04em;
}

.rubber-option-head > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.rubber-colour-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rubber-colour-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(17, 19, 17, .10);
  border-radius: 999px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  font-weight: 950;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rubber-colour-button.active {
  border-color: var(--ink);
  box-shadow: 0 12px 28px rgba(17, 19, 17, .10);
}

.rubber-colour-button:hover {
  transform: translateY(-2px);
}

.rubber-colour-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(17, 19, 17, .12);
}

.rubber-colour-dot.red {
  background: #e3342f;
}

.rubber-colour-dot.black {
  background: #111311;
}

.rubber-selected-note {
  margin: 14px 0 0 !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 800;
}

@media (max-width: 560px) {
  .rubber-option-head {
    flex-direction: column;
  }

  .rubber-colour-button {
    width: 100%;
    justify-content: center;
  }
}


/* FINAL: visual customizer auto-scroll focus + stronger checkout panel */
.vc-block {
  scroll-margin-top: 120px;
}

.vc-block.vc-scroll-focus {
  animation: vcFocusPulse 1.25s ease both;
}

@keyframes vcFocusPulse {
  0% {
    box-shadow: 0 0 0 rgba(215, 255, 63, 0);
    border-color: rgba(17, 19, 17, .08);
  }
  30% {
    box-shadow: 0 0 0 7px rgba(215, 255, 63, .38), 0 24px 62px rgba(17, 19, 17, .10);
    border-color: rgba(17, 19, 17, .18);
  }
  100% {
    box-shadow: 0 18px 46px rgba(17, 19, 17, .055);
    border-color: rgba(17, 19, 17, .08);
  }
}

.vc-summary {
  position: sticky !important;
  top: 112px !important;
  border: 1px solid rgba(215, 255, 63, .40) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(215, 255, 63, .28), transparent 30%),
    linear-gradient(145deg, #101410, #1d2a18) !important;
  color: #fff !important;
  box-shadow: 0 30px 90px rgba(17, 19, 17, .20) !important;
}

.vc-summary h2,
.vc-summary .vc-line strong,
.vc-summary .vc-total strong {
  color: #fff !important;
}

.vc-summary .vc-line,
.vc-summary .vc-total {
  border-color: rgba(255, 255, 255, .12) !important;
}

.vc-summary .vc-line span,
.vc-summary .vc-line small,
.vc-summary p,
.vc-summary .eyebrow {
  color: rgba(255, 255, 255, .68) !important;
}

.vc-summary .vc-total {
  margin-top: 18px !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(215, 255, 63, .12) !important;
}

.vc-summary .vc-total span {
  color: rgba(255, 255, 255, .72) !important;
}

#vcAddCart {
  width: 100% !important;
  min-height: 58px !important;
  margin-top: 18px !important;
  justify-content: center !important;
  background: var(--accent) !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: 0 18px 44px rgba(215, 255, 63, .22) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.vc-summary.vc-checkout-highlight {
  animation: vcCheckoutGlow 1.55s ease both;
}

@keyframes vcCheckoutGlow {
  0% {
    transform: translateY(0);
    box-shadow: 0 30px 90px rgba(17, 19, 17, .20);
  }
  35% {
    transform: translateY(-4px);
    box-shadow: 0 0 0 8px rgba(215, 255, 63, .22), 0 36px 100px rgba(17, 19, 17, .28);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 30px 90px rgba(17, 19, 17, .20);
  }
}

@media (max-width: 980px) {
  .vc-summary {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 760px) {
  .vc-block {
    scroll-margin-top: 92px;
  }

  .vc-summary {
    border-radius: 28px !important;
  }

  #vcAddCart {
    min-height: 54px !important;
  }
}


/* FINAL: inline rubber colour selector on product cards */
.inline-rubber-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(17, 19, 17, .045);
  border: 1px solid rgba(17, 19, 17, .075);
}

.inline-rubber-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 10px;
  color: rgba(17, 19, 17, .62);
  font-size: 12px;
  font-weight: 900;
}

.inline-rubber-labels b {
  color: var(--ink);
}

.inline-rubber-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-rubber-colour {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(17, 19, 17, .10);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.inline-rubber-colour:hover {
  transform: translateY(-1px);
}

.inline-rubber-colour.active {
  border-color: var(--ink);
  box-shadow: 0 10px 24px rgba(17, 19, 17, .10);
}

.inline-rubber-colour i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(17, 19, 17, .12);
  background: #e3342f;
}

.inline-rubber-colour[data-card-rubber-colour="black"] i {
  background: #111311;
}

.product-card:has(.inline-rubber-panel) .product-detail-link {
  margin-top: 14px;
}

/* Remove external rubber colour popup from old modal if it ever appears */
.product-modal .rubber-colour-picker,
#modalRubberColours {
  display: none !important;
}

@media (max-width: 560px) {
  .inline-rubber-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .inline-rubber-colour {
    width: 100%;
  }
}


/* FINAL: mobile product cards smaller with full visible product images */
@media (max-width: 760px) {
  .product-grid,
  .brand-product-grid,
  #brandProductGrid,
  #productGrid,
  #homeProductGrid {
    gap: 18px !important;
  }

  .product-card {
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .product-visual {
    height: clamp(230px, 62vw, 310px) !important;
    min-height: 0 !important;
    padding: 18px !important;
    display: grid !important;
    place-items: center !important;
    background: #fff !important;
  }

  .product-visual img,
  .product-card .product-visual img {
    width: 100% !important;
    height: 100% !important;
    max-width: 92% !important;
    max-height: 92% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: auto !important;
    display: block !important;
  }

  .product-info {
    padding: 20px 20px 22px !important;
  }

  .product-name,
  .product-topline h3 {
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.055em !important;
  }

  .product-price {
    font-size: clamp(26px, 8vw, 38px) !important;
    line-height: 1 !important;
    margin-top: 4px !important;
  }

  .product-meta {
    margin-top: 14px !important;
    font-size: 14px !important;
  }

  .product-detail-link {
    margin-top: 16px !important;
    font-size: 15px !important;
  }

  .inline-rubber-panel {
    margin-top: 12px !important;
    padding: 10px !important;
  }

  .inline-rubber-colour {
    min-height: 34px !important;
    font-size: 12px !important;
  }

  .rubber-card-specs {
    margin-top: 10px !important;
  }

  .rubber-spec-pill {
    min-height: 24px !important;
    font-size: 11px !important;
  }

  .whatsapp-consult {
    transform: scale(.88) !important;
    transform-origin: right bottom !important;
  }
}

@media (max-width: 430px) {
  .product-visual {
    height: clamp(210px, 58vw, 250px) !important;
    padding: 16px !important;
  }

  .product-visual img,
  .product-card .product-visual img {
    max-width: 90% !important;
    max-height: 90% !important;
  }

  .product-info {
    padding: 18px 18px 20px !important;
  }

  .product-price {
    font-size: clamp(24px, 7.4vw, 34px) !important;
  }
}


/* FINAL: Customize page brand tabs/dropdown visibility fix */
.vc-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  padding-bottom: 8px !important;
  scrollbar-width: thin !important;
  scroll-snap-type: x proximity !important;
}

.vc-tabs::-webkit-scrollbar {
  height: 5px !important;
}

.vc-tabs::-webkit-scrollbar-thumb {
  background: rgba(17, 19, 17, .18) !important;
  border-radius: 999px !important;
}

.vc-tab {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
}

.vc-brand-select-wrap {
  display: none;
}

@media (max-width: 760px) {
  .vc-tabs {
    display: block !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .vc-tabs .vc-tab {
    display: none !important;
  }

  .vc-brand-select-wrap {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .vc-brand-select-wrap label {
    color: rgba(17, 19, 17, .52) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

  .vc-brand-select {
    width: 100% !important;
    min-height: 54px !important;
    border: 1px solid rgba(17, 19, 17, .12) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--ink) !important;
    padding: 0 48px 0 18px !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    box-shadow: 0 12px 28px rgba(17, 19, 17, .055) !important;
    outline: none !important;
  }

  .vc-brand-select:focus {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 4px rgba(215, 255, 63, .35), 0 12px 28px rgba(17, 19, 17, .055) !important;
  }
}

@media (min-width: 761px) {
  .vc-brand-select-wrap {
    display: none !important;
  }
}


/* FINAL: fix mobile alignment, product action placement and button consistency */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
*, *::before, *::after { box-sizing: border-box; }
@media (max-width: 760px) {
  .service-showcase, .service-grid, .professional-service-grid { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .service-grid.professional-service-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
  .pro-service-card, .service-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; border-radius: 28px !important; }
  .pro-service-card .service-copy, .service-card .service-copy { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 26px 22px !important; overflow: hidden !important; }
  .pro-service-card .service-copy h3, .service-card .service-copy h3 { max-width: 100% !important; font-size: clamp(34px, 10vw, 52px) !important; line-height: .94 !important; letter-spacing: -.075em !important; overflow-wrap: anywhere !important; }
  .pro-service-card .service-copy p, .service-card .service-copy p { max-width: 100% !important; font-size: 15px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; }
  .service-cta { max-width: 100% !important; width: auto !important; min-height: 46px !important; white-space: normal !important; overflow: visible !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; padding: 12px 16px !important; font-size: 14.5px !important; line-height: 1.1 !important; }
}
.product-visual .quick-add, .product-card .quick-add { display: none !important; }
.product-card-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; margin-top: 14px !important; width: 100% !important; }
.product-action-btn { width: 100% !important; min-height: 48px !important; border-radius: 999px !important; border: 0 !important; font-family: inherit !important; font-weight: 950 !important; font-size: 15px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important; }
.product-action-btn:hover { transform: translateY(-2px) !important; }
.product-add-btn { background: var(--ink, #101410) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(17, 19, 17, .13) !important; }
.product-buy-btn, .product-detail-buy-now { background: var(--accent, #d7ff3f) !important; color: var(--ink, #101410) !important; box-shadow: 0 12px 28px rgba(215, 255, 63, .20) !important; }
.product-detail-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.product-detail-actions .button, .product-detail-buy-now { width: 100% !important; justify-content: center !important; min-height: 54px !important; border-radius: 999px !important; border: 0 !important; font-weight: 950 !important; }
.inline-rubber-panel { margin-top: 12px !important; margin-bottom: 0 !important; }
.product-detail-link { display: inline-flex !important; margin-top: 14px !important; }
@media (max-width: 760px) {
  .product-card { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
  .product-info { padding: 20px 18px 22px !important; }
  .product-topline { grid-template-columns: 1fr !important; gap: 8px !important; }
  .product-price { justify-self: start !important; }
  .product-card-actions { margin-top: 12px !important; }
  .product-action-btn { min-height: 46px !important; font-size: 14.5px !important; }
}


/* FINAL: mobile product images must be fully visible, never cropped */
@media (max-width: 760px) {
  .product-card {
    overflow: hidden !important;
  }

  .product-visual,
  .product-card .product-visual {
    height: clamp(205px, 52vw, 265px) !important;
    min-height: 205px !important;
    max-height: 265px !important;
    padding: 22px 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .product-visual img,
  .product-card .product-visual img,
  .brand-product-grid .product-visual img,
  #brandProductGrid .product-visual img {
    width: auto !important;
    height: auto !important;
    max-width: 82% !important;
    max-height: 78% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: auto !important;
    padding: 0 !important;
    transform: none !important;
    scale: 1 !important;
  }

  .product-badge,
  .product-card .product-badge {
    top: 18px !important;
    left: 18px !important;
    z-index: 3 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  .product-info {
    padding-top: 20px !important;
  }
}

@media (max-width: 430px) {
  .product-visual,
  .product-card .product-visual {
    height: clamp(185px, 48vw, 225px) !important;
    min-height: 185px !important;
    max-height: 225px !important;
    padding: 20px 24px !important;
  }

  .product-visual img,
  .product-card .product-visual img,
  .brand-product-grid .product-visual img,
  #brandProductGrid .product-visual img {
    max-width: 78% !important;
    max-height: 74% !important;
  }
}


/* FINAL: mobile homepage service cards alignment and background polish */
@media (max-width: 760px) {
  body,
  main,
  .section,
  .service-showcase,
  .featured-catalogue,
  .home-products-section {
    background: var(--paper, #f7f6f0) !important;
  }

  .service-showcase {
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }

  .service-grid.professional-service-grid,
  .professional-service-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .pro-service-card,
  .professional-service-grid .pro-service-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 48px rgba(17, 19, 17, .075) !important;
  }

  .pro-service-card.pro-brands {
    background: linear-gradient(145deg, #f3f2ed, #ffffff) !important;
  }

  .pro-service-card.pro-gear {
    background: linear-gradient(145deg, #101410, #142014) !important;
  }

  .pro-service-card .service-copy,
  .professional-service-grid .pro-service-card .service-copy {
    width: 100% !important;
    min-height: 300px !important;
    padding: 34px 28px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    overflow: visible !important;
  }

  .pro-service-card .service-copy h3,
  .professional-service-grid .pro-service-card .service-copy h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    font-size: clamp(38px, 11vw, 58px) !important;
    line-height: .94 !important;
    letter-spacing: -0.08em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  .pro-service-card .service-copy p,
  .professional-service-grid .pro-service-card .service-copy p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px !important;
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    color: rgba(17, 19, 17, .58) !important;
  }

  .pro-service-card.pro-gear .service-copy p {
    color: rgba(255, 255, 255, .58) !important;
  }

  .pro-service-card .service-cta,
  .professional-service-grid .service-cta {
    align-self: flex-start !important;
    width: auto !important;
    max-width: calc(100vw - 88px) !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    overflow: visible !important;
  }

  .pro-service-card.pro-gear .service-cta {
    background: var(--accent, #d7ff3f) !important;
    color: var(--ink, #101410) !important;
  }

  .pro-service-card .service-art,
  .pro-service-card .brand-wall,
  .pro-service-card .gear-visual {
    opacity: .45 !important;
    right: -18px !important;
    bottom: -18px !important;
    transform: scale(.82) !important;
    pointer-events: none !important;
  }

  .pro-service-card.pro-gear .gear-visual {
    opacity: .32 !important;
  }
}

@media (max-width: 430px) {
  .service-showcase {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .pro-service-card .service-copy,
  .professional-service-grid .pro-service-card .service-copy {
    min-height: 286px !important;
    padding: 30px 24px !important;
  }

  .pro-service-card .service-copy h3,
  .professional-service-grid .pro-service-card .service-copy h3 {
    font-size: clamp(34px, 10.5vw, 48px) !important;
  }

  .pro-service-card .service-cta,
  .professional-service-grid .service-cta {
    max-width: calc(100vw - 76px) !important;
    min-height: 46px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
  }
}


/* FINAL: highlight Add to cart button on product detail page */
.product-detail-actions button[data-add-product],
.product-detail-actions .dark-btn,
.product-detail-actions .button.dark-btn,
#productDetail button[data-add-product] {
  background: var(--ink, #101410) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 18px 46px rgba(17, 19, 17, .22) !important;
  min-height: 58px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  border-radius: 999px !important;
  letter-spacing: -.02em !important;
}

.product-detail-actions button[data-add-product]:hover,
.product-detail-actions .dark-btn:hover,
#productDetail button[data-add-product]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 58px rgba(17, 19, 17, .28) !important;
}

.product-detail-actions button[data-add-product]::before,
.product-detail-actions .dark-btn::before,
#productDetail button[data-add-product]::before {
  content: "＋";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, #d7ff3f);
  color: var(--ink, #101410);
  font-size: 15px;
  font-weight: 950;
}

.product-detail-actions .product-detail-buy-now,
.product-detail-actions button[data-buy-now-product] {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
  box-shadow: 0 16px 40px rgba(215, 255, 63, .24) !important;
}

@media (max-width: 760px) {
  .product-detail-actions button[data-add-product],
  .product-detail-actions .dark-btn,
  #productDetail button[data-add-product] {
    min-height: 60px !important;
    font-size: 17px !important;
    margin-top: 8px !important;
  }
}


/* FINAL: remove delay from rubber colour option UI */
.rubber-colour-button,
.rubber-colour-option,
.inline-rubber-colour,
[data-rubber-colour],
[data-card-rubber-colour] {
  transition: background-color .08s linear, border-color .08s linear, box-shadow .08s linear, color .08s linear, transform .08s linear !important;
  animation-delay: 0s !important;
}

.rubber-colour-button.active,
[data-rubber-colour].active {
  border-color: var(--ink, #101410) !important;
  box-shadow: 0 10px 28px rgba(17, 19, 17, .10) !important;
}

.rubber-selected-note,
[data-selected-rubber-colour] {
  transition: none !important;
}

.rubber-colour-button:active,
.inline-rubber-colour:active {
  transform: scale(.98) !important;
}


/* FINAL: fix cart drawer overlap with navbar and add visible close button */
:root {
  --ttw-header-height: 92px;
}

.cart-drawer {
  top: var(--ttw-header-height) !important;
  height: calc(100dvh - var(--ttw-header-height)) !important;
  max-height: calc(100dvh - var(--ttw-header-height)) !important;
  z-index: 95 !important;
  border-top-left-radius: 34px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

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

.cart-drawer-topbar {
  flex: 0 0 auto !important;
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px 22px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
  box-shadow: 0 12px 28px rgba(17, 19, 17, .055) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
}

.cart-drawer-topbar strong {
  display: block !important;
  color: var(--ink, #101410) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  letter-spacing: -.045em !important;
}

.cart-drawer-topbar .eyebrow {
  display: block !important;
  margin-bottom: 4px !important;
  color: rgba(17, 19, 17, .48) !important;
}

.cart-drawer-close {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ink, #101410) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(17, 19, 17, .16) !important;
  cursor: pointer !important;
}

.cart-drawer-close .ttw-icon {
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
}

.cart-drawer .cart-items,
.cart-drawer .cart-empty,
.cart-drawer .cart-summary,
.cart-drawer > :not(.cart-drawer-topbar) {
  max-width: 100% !important;
}

/* Keep cart content inside the drawer area and not under the header */
.cart-drawer .cart-items,
.cart-drawer .cart-empty {
  overflow-y: auto !important;
}

.cart-drawer .cart-empty {
  min-height: calc(100dvh - var(--ttw-header-height) - 180px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
}

.page-backdrop.open {
  z-index: 80 !important;
}

/* Header must stay above page content but not cover the cart drawer */
.site-header,
.css-navbar,
header.site-header {
  z-index: 110 !important;
}

@media (min-width: 761px) {
  :root {
    --ttw-header-height: 88px;
  }

  .cart-drawer {
    width: min(480px, 42vw) !important;
    top: var(--ttw-header-height) !important;
    height: calc(100dvh - var(--ttw-header-height)) !important;
    max-height: calc(100dvh - var(--ttw-header-height)) !important;
    border-top-left-radius: 34px !important;
  }
}

@media (max-width: 760px) {
  :root {
    --ttw-header-height: 104px;
  }

  .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--ttw-header-height) !important;
    height: calc(100dvh - var(--ttw-header-height)) !important;
    max-height: calc(100dvh - var(--ttw-header-height)) !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .cart-drawer-topbar {
    min-height: 72px !important;
    padding: 14px 18px !important;
  }

  .cart-drawer-topbar strong {
    font-size: 22px !important;
  }

  .cart-drawer-close {
    width: 48px !important;
    height: 48px !important;
  }

  .cart-drawer .cart-empty {
    min-height: calc(100dvh - var(--ttw-header-height) - 150px) !important;
    padding-bottom: 110px !important;
  }

  .whatsapp-consult {
    z-index: 75 !important;
  }
}

@media (max-width: 430px) {
  :root {
    --ttw-header-height: 96px;
  }

  .cart-drawer {
    top: var(--ttw-header-height) !important;
    height: calc(100dvh - var(--ttw-header-height)) !important;
  }
}


/* FINAL: show only the top cart close button */
.cart-drawer > [data-close-cart]:not(.cart-drawer-close),
.cart-drawer > .cart-close,
.cart-drawer > .product-modal-close,
.cart-drawer .cart-heading > [data-close-cart],
.cart-drawer .cart-header > [data-close-cart],
.cart-drawer .cart-title > [data-close-cart] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cart-drawer-topbar .cart-drawer-close,
.cart-drawer-topbar [data-close-cart] {
  display: inline-grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* FINAL: make custom build cart item details readable */
.cart-item-detail strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink, #101410);
  font-weight: 950;
}

.cart-item-detail {
  line-height: 1.45 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

.cart-item-visual .cart-puck {
  display: grid;
  place-items: center;
}

.cart-item-visual .cart-puck::after {
  content: "TT";
  font-size: 13px;
  font-weight: 950;
  color: var(--ink, #101410);
}


/* FINAL FIX: custom build cart item visible layout */
.cart-items {
  display: grid;
  gap: 14px;
  padding: 18px 0;
}

.cart-items .cart-item {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 36px !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  box-shadow: 0 12px 30px rgba(17, 19, 17, .055) !important;
}

.cart-item-copy {
  min-width: 0 !important;
}

.cart-item-copy h3,
.cart-item h3 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
}

.cart-item-detail {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(17, 19, 17, .62) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

.cart-item-detail strong {
  color: var(--ink, #101410) !important;
  font-size: 12px !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.cart-item-visual {
  width: 88px !important;
  height: 88px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  background: rgba(17, 19, 17, .04) !important;
  overflow: hidden !important;
}

.cart-item-visual img {
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
}

.cart-empty[style*="none"] {
  display: none !important;
}

@media (max-width: 560px) {
  .cart-items .cart-item {
    grid-template-columns: 76px minmax(0, 1fr) 32px !important;
    padding: 12px !important;
  }

  .cart-item-visual {
    width: 76px !important;
    height: 76px !important;
  }
}


/* FINAL: enhanced admin dashboard, orders and settings panels */
.admin-pro-shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.admin-pro-sidebar,
.admin-pro-main,
.admin-pro-panel,
.admin-help-card,
.admin-order-card,
.admin-empty-card {
  border: 1px solid rgba(17, 19, 17, .08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 48px rgba(17,19,17,.055);
  border-radius: 30px;
}

.admin-pro-sidebar {
  position: sticky;
  top: 108px;
  padding: 22px;
}

.admin-pro-sidebar h2 {
  margin: 8px 0 18px;
  font-size: 34px;
  line-height: .95;
  letter-spacing: -.06em;
}

.admin-pro-tab {
  width: 100%;
  min-height: 48px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(17,19,17,.055);
  color: var(--ink);
  font: 900 14px/1 Manrope, sans-serif;
  cursor: pointer;
}

.admin-pro-tab.active {
  background: var(--ink);
  color: #fff;
}

.admin-pro-note,
.admin-note {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.admin-pro-main {
  padding: 18px;
}

.admin-pro-panel {
  display: none;
  padding: clamp(18px, 2.4vw, 30px);
  background: rgba(255,255,255,.70);
}

.admin-pro-panel.active {
  display: block;
}

.admin-panel-head,
.admin-order-top,
.admin-products-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-panel-head h2,
.admin-order-top h3 {
  margin: 4px 0 0;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: .95;
  letter-spacing: -.06em;
}

.admin-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.button.danger,
.admin-head-actions .danger {
  background: #f6dddd !important;
  color: #9f1d1d !important;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.admin-stat-card {
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(17, 19, 17, .08);
}

.admin-stat-card span,
.admin-stat-card small {
  color: var(--muted);
  font-weight: 850;
}

.admin-stat-card strong {
  display: block;
  margin: 8px 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.06em;
}

.admin-help-card,
.admin-empty-card {
  padding: 22px;
  margin-top: 18px;
}

.admin-help-card h3,
.admin-empty-card h3 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -.04em;
}

.admin-orders-toolbar input,
.admin-content-form input,
.admin-content-form textarea,
.admin-content-form select {
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(17,19,17,.12);
  background: #fff;
  padding: 12px 16px;
  font: 800 15px/1.3 Manrope, sans-serif;
  color: var(--ink);
}

.admin-content-form {
  display: grid;
  gap: 14px;
}

.admin-content-form label {
  display: grid;
  gap: 8px;
  font-weight: 900;
  color: rgba(17,19,17,.68);
}

.admin-orders-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.admin-order-card {
  padding: 18px;
}

.admin-order-top strong {
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--accent);
}

.admin-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-order-meta span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17,19,17,.055);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-order-customer {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  color: rgba(17,19,17,.72);
  font-weight: 750;
}

.admin-order-customer p {
  margin: 0;
}

.admin-order-items {
  margin: 0;
  padding-left: 20px;
}

.admin-order-items li {
  margin-bottom: 8px;
}

.admin-order-items small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.admin-pro-panel .admin-layout {
  padding: 0;
}

@media (max-width: 980px) {
  .admin-pro-shell {
    grid-template-columns: 1fr;
  }

  .admin-pro-sidebar {
    position: relative;
    top: auto;
  }

  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-panel-head,
  .admin-order-top {
    display: grid;
  }

  .admin-head-actions {
    justify-content: flex-start;
  }
}


/* FINAL: requested admin analytics/customers, no listing Buy Now, sticky customizer summary */
.product-card [data-buy-now-product],
.product-card .product-buy-btn { display: none !important; }
.product-card-actions.single-action { grid-template-columns: 1fr !important; }
@media (min-width: 981px) {
  body[data-page="customize"] .vc-layout, .vc-layout { align-items: start !important; }
  body[data-page="customize"] .vc-summary, .vc-summary { position: sticky !important; top: 112px !important; align-self: start !important; max-height: calc(100vh - 128px) !important; overflow-y: auto !important; }
}
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 16px; margin-top: 18px; }
.analytics-card, .customer-card { background: #fff; border: 1px solid rgba(17,19,17,.08); border-radius: 26px; box-shadow: 0 14px 34px rgba(17,19,17,.055); }
.analytics-card { padding: 20px; }
.sales-bars { display: grid; gap: 12px; }
.sales-bar-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 100px; gap: 10px; align-items: center; font-weight: 900; }
.sales-bar-row span, .sales-bar-row b { color: rgba(17,19,17,.68); font-size: 13px; }
.sales-bar-row b { text-align: right; color: var(--ink); }
.sales-bar-track { height: 14px; border-radius: 999px; background: rgba(17,19,17,.06); overflow: hidden; }
.sales-bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #8eea43); }
.best-seller-list { display: grid; gap: 10px; }
.best-seller-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(17,19,17,.04); }
.best-seller-item span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 950; }
.best-seller-item strong { min-width: 0; overflow-wrap: anywhere; }
.best-seller-item small { display: block; margin-top: 3px; color: var(--muted); font-weight: 800; }
.customer-list { display: grid; gap: 12px; margin-top: 16px; }
.customer-card { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: 14px; align-items: center; padding: 16px; }
.customer-card h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.04em; }
.customer-card p, .customer-card small { display: block; margin: 0; color: var(--muted); font-weight: 800; }
.customer-card > strong { padding: 10px 12px; border-radius: 999px; background: var(--accent); }
.customer-card > span { color: rgba(17,19,17,.64); font-weight: 900; }
.catalog-results, #brandProductGrid, .product-listing { scroll-margin-top: 120px; }
@media (max-width: 900px) { .analytics-grid, .customer-card { grid-template-columns: 1fr; } .sales-bar-row { grid-template-columns: 62px minmax(0, 1fr); } .sales-bar-row b { grid-column: 2; text-align: left; } }


/* FINAL: extraordinary homepage brand section + JOOLA brand emphasis */

/* JOOLA emphasis across the site */
.nav-dropdown-menu a[href="joola.html"],
.css-mobile-menu a[href="joola.html"],
.home-brand-bottom a[href="joola.html"],
.choose-brand-strip a[href="joola.html"],
.brand-card[href="joola.html"],
a.brand-card[href="joola.html"] {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
  font-weight: 950 !important;
  border-radius: 999px;
}

.vc-tab[data-brand="joola"],
button[data-brand="joola"].vc-tab {
  background: var(--ink, #101410) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(17,19,17,.14) !important;
}

.product-card[data-product-card^="joola"],
.product-card[data-product-card*="joola-"] {
  border-color: rgba(215, 255, 63, .52) !important;
  box-shadow: 0 18px 48px rgba(172, 218, 43, .13) !important;
}

.product-card[data-product-card^="joola"] .product-badge,
.product-card[data-product-card*="joola-"] .product-badge {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
  border-color: rgba(17,19,17,.10) !important;
}

body[data-brand="joola"] .brand-hero,
body[data-page="joola"] .brand-hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(215,255,63,.30), transparent 28%),
    linear-gradient(145deg, #101410, #202d19) !important;
}

@media (max-width: 1100px) {
  .home-brand-showcase {
    grid-template-columns: 1fr;
  }

  .home-brand-feature {
    min-height: 560px;
  }

  .home-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-brand-lab-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .home-brand-lab {
    padding-top: 64px;
    padding-bottom: 70px;
  }

  .home-brand-lab-head h2 {
    font-size: clamp(48px, 16vw, 74px);
    letter-spacing: -.09em;
  }

  .home-brand-lab-head p {
    font-size: 15px;
  }

  .home-brand-feature {
    min-height: 0;
    padding: 24px;
    border-radius: 32px;
  }

  .feature-logo-card {
    min-height: 126px;
    padding: 20px;
  }

  .feature-copy h3 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .feature-stats span {
    min-height: 42px;
  }

  .home-brand-grid {
    grid-template-columns: 1fr;
  }

  .home-brand-tile {
    min-height: 180px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    align-items: center;
  }

  .home-brand-tile img,
  .logo-stiga,
  .logo-dhs,
  .logo-yinhe,
  .logo-xiom,
  .logo-andro,
  .logo-dawei {
    grid-row: 1 / span 2;
    grid-column: 2;
    justify-self: end;
    transform: scale(.82);
    transform-origin: right center;
  }

  .home-brand-tile b,
  .home-brand-tile small {
    grid-column: 1;
  }

  .home-brand-bottom .button {
    width: 100%;
    justify-content: center;
  }
}


/* FINAL: reliable local brand logos and compact homepage brand cards */
.home-brand-feature {
  min-height: 500px !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
}

.feature-logo-card {
  width: min(100%, 440px) !important;
  min-height: 118px !important;
  padding: 18px !important;
  border-radius: 28px !important;
}

.feature-logo-card img {
  width: min(320px, 88%) !important;
  max-height: 78px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.feature-copy h3 {
  font-size: clamp(36px, 4.2vw, 64px) !important;
  line-height: .9 !important;
  margin-bottom: 14px !important;
}

.feature-copy p {
  margin-bottom: 16px !important;
  max-width: 500px !important;
}

.feature-stats span {
  min-height: 42px !important;
  padding: 0 13px !important;
}

.home-brand-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: clamp(12px, 1.35vw, 18px) !important;
}

.home-brand-tile {
  min-height: 210px !important;
  padding: 18px !important;
  border-radius: 28px !important;
  grid-template-rows: minmax(82px, 1fr) auto auto !important;
}

.home-brand-tile img {
  width: min(176px, 92%) !important;
  max-height: 70px !important;
  object-fit: contain !important;
  justify-self: start !important;
  align-self: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 12px 24px rgba(17, 19, 17, .10)) !important;
}

.home-brand-tile b {
  margin-top: 12px !important;
  font-size: 24px !important;
}

.home-brand-tile small {
  margin-top: 5px !important;
}

.tile-number {
  width: 32px !important;
  height: 32px !important;
  top: 14px !important;
  left: 14px !important;
}

@media (max-width: 1100px) {
  .home-brand-feature {
    min-height: 440px !important;
  }

  .home-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-brand-tile {
    min-height: 190px !important;
  }
}

@media (max-width: 620px) {
  .home-brand-feature {
    min-height: auto !important;
  }

  .feature-logo-card {
    width: 100% !important;
    min-height: 96px !important;
  }

  .feature-logo-card img {
    max-height: 62px !important;
  }

  .home-brand-grid {
    grid-template-columns: 1fr !important;
  }

  .home-brand-tile {
    min-height: 142px !important;
    grid-template-columns: minmax(0, 1fr) 148px !important;
    grid-template-rows: 1fr auto !important;
    padding: 18px 18px 18px 56px !important;
  }

  .home-brand-tile img {
    grid-row: 1 / span 2 !important;
    grid-column: 2 !important;
    width: 138px !important;
    max-height: 58px !important;
    justify-self: end !important;
  }

  .home-brand-tile b,
  .home-brand-tile small {
    grid-column: 1 !important;
  }
}


/* Redesigned home brand showcase */
.home-brand-lab {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(70px, 7vw, 110px);
  padding-bottom: clamp(70px, 8vw, 120px);
  background:
    radial-gradient(circle at 14% 15%, rgba(215,255,63,.12), transparent 22%),
    radial-gradient(circle at 88% 20%, rgba(215,255,63,.18), transparent 24%),
    linear-gradient(180deg, #fbfbf7 0%, #f5f5ef 100%);
}

.home-brand-lab-bg {
  position: absolute;
  inset: 46px clamp(16px, 4vw, 56px);
  border-radius: 42px;
  background:
    linear-gradient(90deg, rgba(16,20,16,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,20,16,.03) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

.home-brand-lab-shell {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
}

.home-brand-lead {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 20px;
  align-content: start;
}

.home-brand-lead h2 {
  margin: 6px 0 0;
  max-width: 620px;
  font: 950 clamp(54px, 6.5vw, 104px)/.84 Manrope, sans-serif;
  letter-spacing: -.1em;
  color: var(--ink);
}

.home-brand-lead p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.7;
  font-weight: 760;
}

.home-brand-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-brand-quick-pills span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,20,16,.08);
  color: var(--ink);
  font-weight: 850;
  box-shadow: 0 14px 28px rgba(16,20,16,.05);
}

.home-brand-spotlight {
  display: grid;
  gap: 18px;
}

.home-brand-note {
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(16,20,16,.08);
  box-shadow: 0 18px 42px rgba(16,20,16,.06);
}

.home-brand-note span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(16,20,16,.58);
}

.home-brand-note p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.7;
}

.home-brand-feature {
  position: relative;
  min-height: 470px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 36px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(215,255,63,.42), transparent 28%),
    radial-gradient(circle at 18% 92%, rgba(215,255,63,.13), transparent 32%),
    linear-gradient(145deg, #101410, #192516 58%, #0f130f);
  box-shadow: 0 28px 72px rgba(17,19,17,.2);
}

.home-brand-feature::before {
  content: "JOOLA";
  position: absolute;
  right: -1%;
  bottom: -6%;
  font-size: clamp(92px, 12vw, 190px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: .1em;
  color: rgba(255,255,255,.05);
  pointer-events: none;
}

.feature-tag {
  width: max-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 12px 24px rgba(215,255,63,.28);
}

.feature-logo-card {
  width: min(100%, 420px);
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 18px 20px;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 0 0 1px rgba(16,20,16,.08), 0 18px 32px rgba(0,0,0,.12);
}

.feature-logo-card img {
  width: min(240px, 80%);
  max-height: 60px;
  object-fit: contain;
}

.feature-copy {
  position: relative;
  z-index: 1;
}

.feature-copy .eyebrow {
  color: rgba(255,255,255,.7);
}

.feature-copy h3 {
  margin: 10px 0 12px;
  max-width: 560px;
  font-size: clamp(38px, 4vw, 64px);
  line-height: .9;
  letter-spacing: -.08em;
  color: #fff;
}

.feature-copy p {
  max-width: 510px;
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  font-weight: 760;
  line-height: 1.65;
}

.feature-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 950;
}

.feature-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.feature-stats span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font-weight: 840;
  backdrop-filter: blur(10px);
}

.feature-stats b { color: var(--accent); }

.home-brand-grid {
  margin-top: clamp(24px, 3vw, 34px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 18px);
}

.home-brand-tile {
  position: relative;
  min-height: 210px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(215,255,63,.23), transparent 26%),
    rgba(255,255,255,.82);
  border: 1px solid rgba(16,20,16,.08);
  box-shadow: 0 16px 40px rgba(16,20,16,.06);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.home-brand-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(16,20,16,.10);
  background:
    radial-gradient(circle at 88% 18%, rgba(215,255,63,.30), transparent 26%),
    #fff;
}

.tile-number {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(16,20,16,.06);
  color: rgba(16,20,16,.52);
  font-size: 11px;
  font-weight: 950;
}

.home-brand-tile img {
  width: min(150px, 90%);
  max-height: 54px;
  object-fit: contain;
  justify-self: start;
  align-self: end;
  margin-top: 18px;
}

.brand-tile-copy {
  display: grid;
  gap: 4px;
  align-content: end;
}

.home-brand-tile b {
  display: block;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.06em;
}

.home-brand-tile small {
  color: var(--muted);
  font-weight: 900;
}

.home-brand-tile em {
  margin-top: 8px;
  color: rgba(16,20,16,.58);
  font-size: 14px;
  font-style: normal;
  line-height: 1.45;
  font-weight: 760;
}

.home-brand-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.joola-ghost {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}

@media (max-width: 1180px) {
  .home-brand-lab-shell {
    grid-template-columns: 1fr;
  }

  .home-brand-lead {
    position: static;
  }

  .home-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-brand-lab {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .home-brand-lead h2 {
    font-size: clamp(40px, 12vw, 64px);
  }

  .home-brand-feature {
    min-height: 420px;
    border-radius: 28px;
  }

  .feature-logo-card {
    width: 100%;
  }

  .feature-copy h3 {
    font-size: clamp(28px, 8vw, 42px);
  }

  .home-brand-grid {
    grid-template-columns: 1fr;
  }

  .home-brand-tile {
    min-height: auto;
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 18px;
    padding: 20px 18px 20px 52px;
  }

  .home-brand-tile img {
    width: 120px;
    max-height: 48px;
    margin-top: 0;
  }

  .brand-tile-copy em {
    font-size: 13px;
  }
}


/* Homepage brand section slider redesign */
.home-brand-carousel {
  margin-top: clamp(26px, 3vw, 36px);
}

.home-brand-slider-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
}

.home-brand-slider-head h3 {
  margin: 8px 0 0;
  font: 900 clamp(34px, 4.2vw, 56px)/.9 Manrope, sans-serif;
  letter-spacing: -.08em;
}

.home-brand-slider-head p {
  margin: 12px 0 0;
  max-width: 700px;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.65;
}

.home-brand-slider-shell {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.home-brand-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 0 8px;
}

.home-brand-slider-track::-webkit-scrollbar { display: none; }

.home-brand-slide {
  position: relative;
  min-height: 230px;
  display: grid;
  grid-template-rows: 88px auto;
  gap: 16px;
  padding: 22px 22px 24px;
  border-radius: 30px;
  scroll-snap-align: start;
  background:
    radial-gradient(circle at 88% 18%, rgba(215,255,63,.22), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,243,238,.86));
  border: 1px solid rgba(17,19,17,.08);
  box-shadow: 0 18px 42px rgba(17,19,17,.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.home-brand-slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 56px rgba(17,19,17,.10);
}

.home-brand-slide-joola {
  background:
    radial-gradient(circle at 82% 18%, rgba(215,255,63,.34), transparent 28%),
    linear-gradient(145deg, #101410, #1b2518 58%, #0f130f);
  color: #fff;
}

.home-brand-slide .tile-number {
  top: 14px;
  left: 14px;
}

.home-brand-slide-logo {
  display: grid;
  align-items: end;
  justify-items: start;
  padding: 24px 16px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  min-height: 76px;
}

.home-brand-slide-joola .home-brand-slide-logo {
  background: rgba(255,255,255,.92);
}

.home-brand-slide-logo img {
  width: min(160px, 92%);
  max-height: 42px;
  object-fit: contain;
}

.home-brand-slide-copy { display: grid; gap: 6px; align-content: start; }
.home-brand-slide-copy b { font-size: 22px; line-height: 1; letter-spacing: -.06em; }
.home-brand-slide-copy small { color: var(--muted); font-weight: 900; }
.home-brand-slide-copy em {
  margin-top: 8px;
  color: rgba(17,19,17,.58);
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 760;
}
.home-brand-slide-joola .home-brand-slide-copy small,
.home-brand-slide-joola .home-brand-slide-copy em { color: rgba(255,255,255,.72); }

/* Redesigned brand directory page */
.brands-editorial-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(130px, 13vw, 170px) clamp(18px, 5vw, 72px) clamp(54px, 7vw, 86px);
  background:
    radial-gradient(circle at 88% 18%, rgba(215,255,63,.20), transparent 26%),
    radial-gradient(circle at 8% 16%, rgba(215,255,63,.12), transparent 24%),
    linear-gradient(180deg, #fbfbf7, #f4f4ee);
}

.brands-editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,19,17,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17,19,17,.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 75%);
  pointer-events: none;
}

.brands-editorial-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(24px, 3vw, 38px);
  align-items: start;
}

.brands-editorial-copy h1 {
  margin: 14px 0 18px;
  max-width: 820px;
  font: 950 clamp(54px, 8vw, 122px)/.84 Manrope, sans-serif;
  letter-spacing: -.1em;
}

.brands-editorial-copy p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
}

.brands-editorial-pills,
.brands-editorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.brands-editorial-pills span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,19,17,.08);
  box-shadow: 0 14px 30px rgba(17,19,17,.05);
  font-weight: 850;
}

.brands-editorial-pills strong { color: var(--ink); }

.brands-editorial-side {
  display: grid;
  gap: 18px;
}

.brands-selector-card,
.brands-mini-card {
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,19,17,.08);
  box-shadow: 0 16px 42px rgba(17,19,17,.05);
}

.brands-selector-card label,
.brands-mini-card span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(17,19,17,.52);
}

.brands-selector-card select {
  width: 100%;
  min-height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(17,19,17,.10);
  background: #fff;
  color: var(--ink);
  padding: 0 18px;
  font-weight: 900;
}

.brands-editorial-mini-grid {
  display: grid;
  gap: 18px;
}

.brands-mini-card img {
  width: 160px;
  max-height: 50px;
  object-fit: contain;
  margin-bottom: 12px;
}

.brands-mini-card strong {
  display: block;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.06em;
}

.brands-mini-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.6;
}

.joola-mini {
  background:
    radial-gradient(circle at 88% 18%, rgba(215,255,63,.32), transparent 28%),
    linear-gradient(145deg, #101410, #1a2418 58%, #0f130f);
  color: #fff;
}

.joola-mini span, .joola-mini small { color: rgba(255,255,255,.72); }

.brand-directory-highlight {
  padding-top: clamp(34px, 4vw, 48px);
}

.brand-directory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .72fr);
  gap: clamp(20px, 2.4vw, 28px);
  align-items: stretch;
}

.brand-directory-joola {
  position: relative;
  min-height: 460px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(215,255,63,.42), transparent 28%),
    radial-gradient(circle at 18% 90%, rgba(215,255,63,.12), transparent 28%),
    linear-gradient(145deg, #101410, #192516 58%, #0f130f);
  color: #fff;
  box-shadow: 0 28px 72px rgba(17,19,17,.18);
}

.brand-directory-joola::before {
  content: "JOOLA";
  position: absolute;
  right: -1%;
  bottom: -8%;
  font-size: clamp(92px, 12vw, 180px);
  line-height: .9;
  letter-spacing: .08em;
  font-weight: 950;
  color: rgba(255,255,255,.05);
}

.brand-directory-joola-logo {
  width: min(100%, 360px);
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 32px rgba(0,0,0,.12);
}

.brand-directory-joola-logo img {
  width: min(240px, 88%);
  max-height: 54px;
  object-fit: contain;
}

.brand-directory-joola-copy,
.brand-directory-joola-pills,
.brand-directory-joola-logo,
.brand-directory-joola .feature-tag { position: relative; z-index: 1; }

.brand-directory-joola-copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(38px, 4.3vw, 62px);
  line-height: .92;
  letter-spacing: -.08em;
}

.brand-directory-joola-copy p {
  margin: 0;
  max-width: 520px;
  color: rgba(255,255,255,.72);
  font-weight: 760;
  line-height: 1.65;
}

.brand-directory-joola-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-directory-joola-pills span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.84);
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.brand-directory-joola-pills b { color: var(--accent); }

.brand-directory-notes {
  display: grid;
  gap: 16px;
}

.brand-directory-notes article {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,19,17,.08);
  box-shadow: 0 16px 40px rgba(17,19,17,.05);
}

.brand-directory-notes strong {
  display: block;
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.05em;
}

.brand-directory-notes p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 760;
}

.brand-page-slider-redesign {
  padding-top: clamp(56px, 6vw, 86px);
}

.brand-pill-directory {
  padding-top: clamp(56px, 6vw, 84px);
  padding-bottom: clamp(70px, 8vw, 110px);
}

@media (max-width: 1180px) {
  .brands-editorial-grid,
  .brand-directory-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .home-brand-slider-head,
  .brand-slider-heading {
    grid-template-columns: 1fr;
  }

  .home-brand-slider-controls,
  .brand-slider-controls {
    justify-content: flex-start;
  }

  .home-brand-slider-track {
    grid-auto-columns: minmax(250px, 82vw);
  }

  .home-brand-slide {
    min-height: 220px;
  }

  .brands-editorial-hero {
    padding-top: 116px;
  }

  .brands-editorial-copy h1 {
    font-size: clamp(42px, 14vw, 68px);
  }

  .brands-editorial-copy p,
  .brand-directory-notes p,
  .brand-directory-joola-copy p {
    font-size: 14.5px;
  }

  .brand-directory-joola {
    min-height: auto;
    border-radius: 28px;
  }

  .brand-directory-joola-copy h2 {
    font-size: clamp(30px, 10vw, 44px);
  }
}


/* FINAL: WhatsApp checkout flow while Razorpay is pending */
.checkout-hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 211, 102, .28), transparent 30%),
    linear-gradient(135deg, #101410, #1d2a1a) !important;
}

.checkout-form .button.primary,
.whatsapp-place-order-btn {
  background: #25d366 !important;
  color: #071109 !important;
  box-shadow: 0 18px 42px rgba(37, 211, 102, .24) !important;
}

.checkout-form .button.primary::before,
.whatsapp-place-order-btn::before {
  content: "WhatsApp";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-right: 10px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #071109;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.checkout-note {
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(37, 211, 102, .10) !important;
  border: 1px solid rgba(37, 211, 102, .22) !important;
  color: rgba(17, 19, 17, .68) !important;
}

.whatsapp-order-success {
  border-color: rgba(37, 211, 102, .24) !important;
  background:
    radial-gradient(circle at 85% 16%, rgba(37, 211, 102, .18), transparent 28%),
    #ffffff !important;
}

.whatsapp-order-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.whatsapp-order-steps span {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(17, 19, 17, .04);
  color: rgba(17, 19, 17, .68);
  font-weight: 850;
}

.whatsapp-order-steps b {
  color: #25d366;
  font-size: 13px;
  letter-spacing: .08em;
}

@media (max-width: 720px) {
  .whatsapp-order-steps {
    grid-template-columns: 1fr;
  }

  .checkout-form .button.primary::before,
  .whatsapp-place-order-btn::before {
    display: none;
  }
}


/* FINAL: customer WhatsApp confirmation UI */
.customer-confirmation-box {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(37, 211, 102, .08);
  border: 1px solid rgba(37, 211, 102, .22);
}

.customer-confirmation-box h3 {
  margin: 6px 0 8px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.05em;
}

.customer-confirmation-box p {
  margin: 0 0 14px;
  color: rgba(17, 19, 17, .62);
  font-weight: 760;
  line-height: 1.55;
}

.customer-whatsapp-confirm-btn {
  background: #25d366 !important;
  color: #071109 !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(37, 211, 102, .18) !important;
}

.admin-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 19, 17, .08);
}

.copy-customer-confirmation {
  background: rgba(17, 19, 17, .055) !important;
  color: var(--ink, #101410) !important;
}

@media (max-width: 640px) {
  .admin-order-actions .button,
  .customer-confirmation-box .button {
    width: 100%;
    justify-content: center;
  }
}


/* FINAL: category/filter cleanup + WhatsApp/email confirmation UI polish */
.customer-email-box {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(215, 255, 63, .12);
  border: 1px solid rgba(215, 255, 63, .30);
}

.customer-email-box h3 {
  margin: 6px 0 8px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.05em;
}

.customer-email-box p {
  margin: 0 0 14px;
  color: rgba(17, 19, 17, .62);
  font-weight: 760;
  line-height: 1.55;
}

.customer-email-confirm-btn {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(215, 255, 63, .18) !important;
}

/* Strict customizer category safety: prevent empty gaps after bad cards are removed */
.vc-products,
.vc-accessories {
  align-items: stretch !important;
}

.vc-products .vc-card,
.vc-accessories .vc-card {
  min-width: 0;
}

/* Do not show hidden/deprecated categories in filters */
label:has(input[name="categoryFilter"][value="pickleball"]),
label:has(input[name="categoryFilter"][value="hidden"]),
label:has(input[name="categoryFilter"][value="apparel"]) {
  display: none !important;
}

.admin-order-actions .customer-email-confirm-btn,
.admin-order-actions .customer-whatsapp-confirm-btn {
  min-height: 42px !important;
  padding-inline: 14px !important;
}

@media (max-width: 640px) {
  .customer-email-box .button,
  .admin-order-actions .customer-email-confirm-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}


/* FINAL: category/image cleanup and email status UI */
.customer-email-box{margin-top:18px;padding:18px;border-radius:22px;background:rgba(215,255,63,.12);border:1px solid rgba(17,19,17,.08)}
.customer-email-box h3{margin:6px 0 8px;font-size:24px;line-height:1;letter-spacing:-.05em}.customer-email-box p{margin:0 0 14px;color:rgba(17,19,17,.62);font-weight:760;line-height:1.55}.customer-email-draft-btn{background:rgba(17,19,17,.06)!important;color:var(--ink,#101410)!important}.email-status-pill{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;background:rgba(215,255,63,.22);color:var(--ink,#101410);font-weight:900;font-size:12px;text-transform:capitalize}.product-card .product-meta span:first-child{text-transform:none!important}


/* FINAL: no visible customer confirmation/email fallback boxes on success page */
#orderSuccess .customer-confirmation-box,
#orderSuccess .customer-email-box {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.compact-order-success .order-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.compact-order-success .order-success-actions .button {
  width: auto;
}

@media (max-width: 720px) {
  .compact-order-success .order-success-actions .button {
    width: 100%;
    justify-content: center;
  }
}


/* FINAL: Email setup/admin status UI */
.email-live-warning,
.email-status-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 170, 0, .28);
  background: rgba(255, 245, 210, .78);
  color: rgba(17, 19, 17, .72);
  font-weight: 760;
  line-height: 1.55;
}

.email-live-warning code,
.email-status-card code {
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(17, 19, 17, .06);
  color: var(--ink, #101410);
  font-weight: 900;
}

.email-status-card h3 {
  margin: 6px 0 8px;
  font-size: 24px;
  letter-spacing: -.05em;
  color: var(--ink, #101410);
}

.email-status-card p {
  margin: 0;
}

.email-status-card small {
  display: block;
  margin-top: 12px;
  color: rgba(17, 19, 17, .58);
  font-weight: 850;
}


/* FINAL FIX: no spacing leftovers when ready-made rackets are removed from blade selector */
[data-card-slot="blade"].wrong-builder-category {
  display: none !important;
}


/* FINAL FIX: stronger WhatsApp order success action */
.whatsapp-order-success .button {
  margin-right: 10px;
  margin-top: 10px;
}

.whatsapp-order-success .whatsapp-place-order-btn {
  font-size: 18px !important;
  min-height: 58px !important;
}

@media (max-width: 640px) {
  .whatsapp-order-success .button {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }
}


/* FINAL FIX: visible cart drawer item list */
.cart-drawer.open .cart-items {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 18px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.cart-drawer.open .cart-items:empty {
  display: none !important;
}

.cart-drawer.open .cart-item,
.cart-drawer.open .ttw-visible-cart-item {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 36px !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 14px !important;
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid rgba(17, 19, 17, .08) !important;
  box-shadow: 0 12px 30px rgba(17, 19, 17, .055) !important;
}

.cart-drawer.open .cart-item-copy {
  min-width: 0 !important;
}

.cart-drawer.open .cart-item-copy h3,
.cart-drawer.open .cart-item h3 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  letter-spacing: -.04em !important;
  color: var(--ink, #101410) !important;
}

.cart-drawer.open .cart-item-price {
  color: var(--ink, #101410) !important;
  font-weight: 950 !important;
  font-size: 15px !important;
}

.cart-drawer.open .cart-item-detail {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(17, 19, 17, .62) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  max-height: none !important;
  overflow: visible !important;
}

.cart-drawer.open .cart-item-visual {
  width: 88px !important;
  height: 88px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  background: rgba(17, 19, 17, .04) !important;
  overflow: hidden !important;
}

.cart-drawer.open .cart-item-visual img {
  width: 86% !important;
  height: 86% !important;
  max-width: 86% !important;
  max-height: 86% !important;
  object-fit: contain !important;
}

.cart-drawer.open .cart-empty[style*="none"] {
  display: none !important;
}

@media (max-width: 560px) {
  .cart-drawer.open .cart-item,
  .cart-drawer.open .ttw-visible-cart-item {
    grid-template-columns: 76px minmax(0, 1fr) 32px !important;
    padding: 12px !important;
  }

  .cart-drawer.open .cart-item-visual {
    width: 76px !important;
    height: 76px !important;
  }
}


/* FINAL FIX: admin cloud sync status */
.cloud-sync-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 22px;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(37, 211, 102, .24);
  background:
    radial-gradient(circle at 92% 12%, rgba(37, 211, 102, .16), transparent 28%),
    #ffffff;
  box-shadow: 0 18px 44px rgba(17, 19, 17, .06);
}

.cloud-sync-card h3 {
  margin: 6px 0 6px;
  font-size: 26px;
  letter-spacing: -.055em;
}

.cloud-sync-card p {
  margin: 0;
  color: rgba(17, 19, 17, .62);
  font-weight: 760;
  line-height: 1.55;
}

.cloud-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .cloud-sync-card {
    grid-template-columns: 1fr;
  }
  .cloud-sync-actions,
  .cloud-sync-actions .button {
    width: 100%;
    justify-content: center;
  }
}


/* FINAL FIX V2: real cloud sync status styling */
.real-cloud-card,
.cloud-sync-card {
  margin: 0 0 20px;
  padding: 20px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 16%, rgba(215,255,63,.22), transparent 28%),
    #fff;
  border: 1px solid rgba(17,19,17,.08);
  box-shadow: 0 16px 42px rgba(17,19,17,.065);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.real-cloud-card h3,
.cloud-sync-card h3 {
  margin: 6px 0 8px;
  font-size: 24px;
  letter-spacing: -.05em;
}

.real-cloud-card p,
.cloud-sync-card p,
.real-cloud-card small,
.cloud-sync-card small {
  margin: 0;
  color: rgba(17,19,17,.64);
  font-weight: 780;
  line-height: 1.5;
}

.cloud-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 780px) {
  .real-cloud-card,
  .cloud-sync-card {
    grid-template-columns: 1fr;
  }
  .cloud-sync-actions {
    justify-content: flex-start;
  }
  .cloud-sync-actions .button {
    width: 100%;
    justify-content: center;
  }
}


/* FINAL: homepage brand section slider only */
.home-brand-slider-only-section {
  padding-top: clamp(54px, 6vw, 86px) !important;
  padding-bottom: clamp(54px, 6vw, 86px) !important;
}

.home-brand-slider-only-section .home-brand-lab-shell,
.home-brand-slider-only-section .home-brand-lead,
.home-brand-slider-only-section .home-brand-spotlight,
.home-brand-slider-only-section .home-brand-note,
.home-brand-slider-only-section .home-brand-feature {
  display: none !important;
}

.home-brand-slider-only-section .home-brand-carousel,
.home-brand-slider-only-section .home-brand-carousel-only {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

.home-brand-slider-only-section .home-brand-slider-head h2 {
  margin: 8px 0 0;
  font: 900 clamp(42px, 5.6vw, 86px)/.86 Manrope, sans-serif;
  letter-spacing: -.09em;
  color: var(--ink, #101410);
}

.home-brand-slider-only-section .home-brand-slider-head p {
  max-width: 760px;
}

@media (max-width: 760px) {
  .home-brand-slider-only-section {
    padding-top: 46px !important;
    padding-bottom: 56px !important;
  }

  .home-brand-slider-only-section .home-brand-slider-head {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .home-brand-slider-only-section .home-brand-slider-controls {
    justify-content: flex-start;
  }

  .home-brand-slider-only-section .home-brand-slider-head h2 {
    font-size: clamp(38px, 12vw, 58px);
  }
}


/* FINAL: Responsive generated brand/home poster banners */
.poster-hero {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f6f5ef !important;
  border-bottom: 1px solid rgba(17, 19, 17, .08) !important;
  box-shadow: 0 18px 60px rgba(17, 19, 17, .08) !important;
  opacity: 1 !important;
  transform: none !important;
}

.poster-hero-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #f6f5ef !important;
}

.home-poster {
  min-height: 0 !important;
  display: block !important;
  isolation: auto !important;
}

.home-poster + .section,
.brand-poster + .shop.section {
  margin-top: 0 !important;
}

.poster-hotspot {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  border-radius: 18px !important;
}

.poster-hotspot-primary {
  left: 5.2% !important;
  top: 73% !important;
  width: 12.5% !important;
  height: 9% !important;
}

.poster-hotspot:focus-visible {
  outline: 3px solid var(--accent, #d7ff3f) !important;
  outline-offset: 4px !important;
}

@media (min-width: 1400px) {
  .poster-hero-img {
    max-height: 760px !important;
  }
}

@media (max-width: 1180px) {
  .poster-hero-img {
    height: clamp(320px, 40vw, 500px) !important;
    aspect-ratio: auto !important;
    object-position: 45% center !important;
  }

  .home-poster .poster-hero-img {
    object-position: 42% center !important;
  }

  .poster-hotspot-primary {
    left: 5.4% !important;
    top: 70% !important;
    width: 16% !important;
    height: 10% !important;
  }
}

@media (max-width: 820px) {
  .poster-hero {
    border-radius: 0 0 28px 28px !important;
  }

  .poster-hero-img {
    height: clamp(330px, 56vw, 470px) !important;
    object-position: 34% center !important;
  }

  .brand-poster-joola .poster-hero-img,
  .home-poster .poster-hero-img {
    object-position: 35% center !important;
  }

  .brand-poster-butterfly .poster-hero-img,
  .brand-poster-dhs .poster-hero-img,
  .brand-poster-dawei .poster-hero-img,
  .brand-poster-tibhar .poster-hero-img {
    object-position: 33% center !important;
  }

  .brand-poster-stiga .poster-hero-img,
  .brand-poster-yinhe .poster-hero-img,
  .brand-poster-xiom .poster-hero-img,
  .brand-poster-andro .poster-hero-img {
    object-position: 34% center !important;
  }

  .poster-hotspot-primary {
    left: 5.5% !important;
    top: 72% !important;
    width: 22% !important;
    height: 10% !important;
  }
}

@media (max-width: 560px) {
  .poster-hero-img {
    height: clamp(315px, 76vw, 410px) !important;
    object-position: 30% center !important;
  }

  .home-poster .poster-hero-img {
    object-position: 31% center !important;
  }

  .brand-poster .poster-hero-img {
    object-position: 30% center !important;
  }

  .brand-poster-yinhe .poster-hero-img,
  .brand-poster-xiom .poster-hero-img,
  .brand-poster-stiga .poster-hero-img,
  .brand-poster-andro .poster-hero-img {
    object-position: 31% center !important;
  }

  .poster-hotspot-primary {
    left: 5.5% !important;
    top: 73% !important;
    width: 36% !important;
    height: 11% !important;
  }
}

@media (max-width: 390px) {
  .poster-hero-img {
    height: 350px !important;
    object-position: 29% center !important;
  }
}


/* FINAL: responsive banners made from actual/original catalogue product images */
.original-product-banner {
  position: relative;
  min-height: clamp(520px, 47vw, 760px);
  padding: clamp(92px, 8vw, 128px) clamp(22px, 5vw, 78px) clamp(40px, 5vw, 82px);
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(420px, 1.12fr);
  gap: clamp(22px, 4vw, 72px);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--opb-accent) 28%, transparent), transparent 28%),
    linear-gradient(115deg, #fffdfa 0%, #f7f6f0 48%, #151814 48.2%, #080a08 100%);
}

.original-product-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 43%, rgba(255,255,255,0) 62%),
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.95), transparent 34%),
    repeating-linear-gradient(90deg, rgba(17, 19, 17, .04) 0 1px, transparent 1px 62px);
}

.original-product-banner::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 0;
  width: 62%;
  height: 100%;
  z-index: -1;
  background:
    linear-gradient(135deg, transparent 0 38%, color-mix(in srgb, var(--opb-accent) 72%, transparent) 38.2% 38.8%, transparent 39%),
    radial-gradient(circle at 60% 48%, color-mix(in srgb, var(--opb-accent) 18%, transparent), transparent 38%);
  opacity: .96;
}

.opb-copy {
  max-width: 680px;
  position: relative;
  z-index: 2;
}

.opb-logo-img {
  max-width: clamp(148px, 14vw, 240px);
  max-height: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: clamp(24px, 3vw, 46px);
  filter: drop-shadow(0 12px 24px rgba(17, 19, 17, .08));
}

.opb-ttw-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 46px);
  font: 950 clamp(15px, 1.4vw, 24px) Manrope, sans-serif;
  letter-spacing: .14em;
  color: var(--ink, #101410);
}

.opb-eyebrow {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--opb-accent);
  font-weight: 950;
  font-size: clamp(13px, 1.15vw, 22px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.opb-eyebrow::after {
  content: "";
  display: block;
  width: min(150px, 22vw);
  height: 2px;
  background: var(--opb-accent);
}

.original-product-banner h1 {
  margin: 0;
  max-width: 760px;
  color: var(--ink, #101410);
  font-family: Manrope, sans-serif;
  font-size: clamp(48px, 6.2vw, 112px);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 950;
  text-wrap: balance;
}

.original-product-banner h1::first-letter {
  color: var(--ink, #101410);
}

.opb-text {
  max-width: 620px;
  margin: clamp(18px, 2vw, 28px) 0 0;
  color: rgba(17, 19, 17, .68);
  font-size: clamp(16px, 1.45vw, 26px);
  line-height: 1.45;
  font-weight: 750;
}

.opb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(22px, 2.6vw, 36px) 0 0;
}

.opb-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(17, 19, 17, .1);
  background: rgba(255,255,255,.78);
  color: rgba(17, 19, 17, .76);
  font-size: 13px;
  font-weight: 950;
  backdrop-filter: blur(12px);
}

.opb-btn {
  margin-top: clamp(24px, 3vw, 42px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 28px;
  border-radius: 18px;
  background: var(--ink, #101410);
  color: var(--opb-accent) !important;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--opb-accent) 20%, transparent);
}

.opb-stage {
  position: relative;
  z-index: 2;
  min-height: clamp(360px, 36vw, 610px);
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.opb-stage::before {
  content: "";
  position: absolute;
  left: 6%;
  right: -4%;
  bottom: 6%;
  height: 31%;
  border-radius: 46px 46px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.38)), #111411;
  box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 2px 0 color-mix(in srgb, var(--opb-accent) 40%, transparent);
  transform: skewX(-9deg);
}

.opb-glow {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--opb-accent) 42%, transparent), transparent 68%);
  filter: blur(12px);
  right: 24%;
  top: 16%;
  opacity: .7;
}

.opb-product {
  position: absolute;
  width: clamp(128px, 13vw, 245px);
  min-height: clamp(210px, 22vw, 390px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  transform-origin: 50% 100%;
}

.opb-product-img {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: radial-gradient(circle at 52% 35%, rgba(255,255,255,.98), rgba(255,255,255,.18) 62%, rgba(255,255,255,.05));
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.opb-product-img img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.24));
}

.opb-img-failed .opb-product-img::after {
  content: "Product";
  color: #fff;
  font-weight: 950;
  opacity: .8;
}

.opb-img-failed img {
  display: none;
}

.opb-product-label {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(0,0,0,.11);
  max-width: 100%;
}

.opb-product-label strong,
.opb-product-label span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opb-product-label strong {
  color: var(--ink, #101410);
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 950;
  letter-spacing: -.02em;
}

.opb-product-label span {
  margin-top: 2px;
  color: var(--opb-accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.opb-product-1 { left: 4%; bottom: 14%; width: clamp(155px, 16vw, 285px); z-index: 4; transform: rotate(-4deg); }
.opb-product-2 { left: 29%; bottom: 17%; width: clamp(145px, 15vw, 270px); z-index: 5; transform: rotate(3deg); }
.opb-product-3 { right: 23%; bottom: 13%; width: clamp(132px, 13vw, 240px); z-index: 4; transform: rotate(-2deg); }
.opb-product-4 { right: 4%; bottom: 16%; width: clamp(122px, 12vw, 220px); z-index: 3; transform: rotate(4deg); }
.opb-product-5 { right: 39%; top: 5%; width: clamp(105px, 10vw, 190px); z-index: 2; transform: rotate(-7deg); opacity: .96; }

.opb-butterfly, .opb-dhs, .opb-tibhar, .opb-dawei {
  background:
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--opb-accent) 25%, transparent), transparent 28%),
    linear-gradient(115deg, #fffdfa 0%, #f7f3f1 48%, #151212 48.2%, #090808 100%);
}

.opb-xiom, .opb-yinhe, .opb-stiga {
  background:
    radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--opb-accent) 25%, transparent), transparent 28%),
    linear-gradient(115deg, #fffdfa 0%, #f5f8ff 48%, #10131b 48.2%, #07090d 100%);
}

.opb-dawei .opb-product-5,
.opb-tibhar .opb-product-5 {
  display: none;
}

@media (max-width: 1180px) {
  .original-product-banner {
    min-height: clamp(620px, 68vw, 760px);
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 108px;
    background:
      radial-gradient(circle at 82% 54%, color-mix(in srgb, var(--opb-accent) 24%, transparent), transparent 34%),
      linear-gradient(180deg, #fffdfa 0%, #f7f6f0 48%, #111411 48.2%, #080a08 100%);
  }

  .original-product-banner::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,0) 65%),
      repeating-linear-gradient(90deg, rgba(17, 19, 17, .035) 0 1px, transparent 1px 56px);
  }

  .opb-copy {
    max-width: 780px;
  }

  .original-product-banner h1 {
    font-size: clamp(48px, 8vw, 84px);
  }

  .opb-stage {
    min-height: clamp(360px, 48vw, 560px);
    width: 100%;
  }

  .opb-product-label {
    display: none;
  }
}

@media (max-width: 760px) {
  .original-product-banner {
    min-height: 760px;
    padding: 98px 18px 28px;
    gap: 8px;
  }

  .opb-logo-img {
    max-width: 148px;
    max-height: 55px;
    margin-bottom: 22px;
  }

  .opb-ttw-logo {
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: .08em;
  }

  .opb-eyebrow {
    font-size: 11px;
    gap: 10px;
  }

  .opb-eyebrow::after {
    width: 78px;
  }

  .original-product-banner h1 {
    font-size: clamp(42px, 12vw, 62px);
    max-width: 94vw;
  }

  .opb-text {
    font-size: 14px;
    max-width: 92vw;
  }

  .opb-chips {
    gap: 7px;
    margin-top: 16px;
  }

  .opb-chips span {
    min-height: 31px;
    padding: 0 11px;
    font-size: 11px;
  }

  .opb-btn {
    min-height: 48px;
    padding: 0 19px;
    border-radius: 15px;
    font-size: 12px;
    margin-top: 18px;
  }

  .opb-stage {
    min-height: 340px;
    margin-top: -4px;
  }

  .opb-stage::before {
    left: -10%;
    right: -16%;
    bottom: 2%;
    height: 34%;
    border-radius: 28px 28px 0 0;
  }

  .opb-product {
    width: 34vw;
    min-height: 205px;
  }

  .opb-product-img {
    border-radius: 20px;
  }

  .opb-product-1 { left: 1%; bottom: 15%; width: 42vw; }
  .opb-product-2 { left: 29%; bottom: 18%; width: 40vw; }
  .opb-product-3 { right: 1%; bottom: 12%; width: 36vw; }
  .opb-product-4 { right: -7%; bottom: 28%; width: 31vw; opacity: .92; }
  .opb-product-5 { display: none; }

  .opb-dawei .opb-product-2,
  .opb-dawei .opb-product-3 {
    width: 42vw;
  }
}

@media (max-width: 430px) {
  .original-product-banner {
    min-height: 720px;
  }

  .opb-product-4 {
    display: none;
  }

  .opb-product-1 { left: 0; width: 46vw; }
  .opb-product-2 { left: 31%; width: 44vw; }
  .opb-product-3 { right: -5%; width: 39vw; }
}


/* FINAL: aesthetic brand slider with no broken image logos */
.brand-orbit-section {
  position: relative !important;
  overflow: hidden !important;
  padding-top: clamp(72px, 7vw, 112px) !important;
  padding-bottom: clamp(76px, 7vw, 118px) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(215,255,63,.14), transparent 26%),
    radial-gradient(circle at 18% 84%, rgba(17,19,17,.06), transparent 24%),
    linear-gradient(180deg, #fffdf8 0%, #f7f6ef 100%) !important;
  border-top: 1px solid rgba(17,19,17,.05) !important;
}

.brand-orbit-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .48 !important;
  background:
    linear-gradient(90deg, rgba(17,19,17,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17,19,17,.03) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: radial-gradient(circle at 50% 46%, #000 0 48%, transparent 86%) !important;
}

.brand-orbit-bg {
  position: absolute !important;
  inset: auto -14% 6% auto !important;
  width: 48vw !important;
  aspect-ratio: 1 !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(215,255,63,.18), transparent 66%) !important;
  filter: blur(12px) !important;
  pointer-events: none !important;
}

.brand-orbit-shell {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}

.brand-orbit-head {
  align-items: end !important;
  margin-bottom: clamp(24px, 3vw, 42px) !important;
}

.brand-orbit-head .eyebrow {
  color: rgba(17,19,17,.48) !important;
}

.brand-orbit-head h2,
#homeBrandTitle {
  margin: 8px 0 0 !important;
  max-width: 980px !important;
  font-size: clamp(52px, 6vw, 104px) !important;
  line-height: .84 !important;
  letter-spacing: -.095em !important;
  font-weight: 950 !important;
  color: var(--ink, #101410) !important;
}

.brand-orbit-head p {
  margin-top: 18px !important;
  max-width: 780px !important;
  color: rgba(17,19,17,.62) !important;
  font-size: clamp(15px, 1.2vw, 20px) !important;
  line-height: 1.65 !important;
  font-weight: 820 !important;
}

.brand-orbit-controls {
  align-self: end !important;
  display: inline-flex !important;
  gap: 12px !important;
}

.brand-orbit-controls .brand-slider-btn {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,19,17,.08) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--ink, #101410) !important;
  box-shadow: 0 20px 44px rgba(17,19,17,.08) !important;
  backdrop-filter: blur(16px) !important;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease !important;
}

.brand-orbit-controls .brand-slider-btn:hover {
  transform: translateY(-4px) !important;
  background: #ffffff !important;
  box-shadow: 0 24px 54px rgba(17,19,17,.12) !important;
}

.brand-orbit-slider-shell {
  position: relative !important;
  margin-inline: calc(var(--page-x, 4vw) * -1) !important;
  padding-inline: var(--page-x, 4vw) !important;
}

.brand-orbit-slider-shell::before,
.brand-orbit-slider-shell::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: clamp(28px, 6vw, 96px) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.brand-orbit-slider-shell::before {
  left: 0 !important;
  background: linear-gradient(90deg, #fffdf8, transparent) !important;
}

.brand-orbit-slider-shell::after {
  right: 0 !important;
  background: linear-gradient(270deg, #fffdf8, transparent) !important;
}

.brand-orbit-track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(300px, 348px) !important;
  gap: 18px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  padding: 16px 0 28px !important;
}

.brand-orbit-track::-webkit-scrollbar {
  display: none !important;
}

.brand-orbit-card,
.home-brand-slide.brand-orbit-card {
  position: relative !important;
  min-height: 320px !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 20px !important;
  padding: 24px !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,250,245,.96)) !important;
  border: 1px solid rgba(17,19,17,.08) !important;
  box-shadow: 0 24px 56px rgba(17,19,17,.07) !important;
  color: var(--ink, #101410) !important;
  text-decoration: none !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.brand-orbit-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 34%) !important;
}

.brand-orbit-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(17,19,17,.14) !important;
  box-shadow: 0 32px 72px rgba(17,19,17,.12) !important;
}

.brand-card-number,
.brand-orbit-card .tile-number {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 3 !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  color: rgba(17,19,17,.45) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(17,19,17,.08) !important;
}

.brand-orbit-logo {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 92px !important;
  padding: 18px 22px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(17,19,17,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 38px rgba(17,19,17,.06) !important;
}

.brand-logo-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
}

.brand-logo-badge img {
  display: block !important;
  max-width: min(190px, 100%) !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: saturate(.96) contrast(1.02) !important;
}

.brand-logo-fallback {
  display: none !important;
  font: 900 28px/1 Manrope, sans-serif !important;
  letter-spacing: -.06em !important;
  color: var(--ink, #101410) !important;
}

.brand-logo-badge.logo-missing img {
  display: none !important;
}

.brand-logo-badge.logo-missing + .brand-logo-fallback {
  display: block !important;
}

.brand-orbit-copy {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
}

.brand-orbit-copy small {
  color: rgba(17,19,17,.5) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}

.brand-orbit-copy b {
  color: inherit !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.06em !important;
  font-weight: 950 !important;
}

.brand-orbit-copy em {
  margin-top: 2px !important;
  color: rgba(17,19,17,.62) !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 760 !important;
}

.brand-card-footer {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 6px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(17,19,17,.08) !important;
  color: rgba(17,19,17,.74) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.brand-card-footer i {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(17,19,17,.96) !important;
  color: #ffffff !important;
  font-style: normal !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 28px rgba(17,19,17,.18) !important;
}

@media (max-width: 980px) {
  .brand-orbit-head {
    grid-template-columns: 1fr !important;
  }

  .brand-orbit-controls {
    justify-self: start !important;
  }

  .brand-orbit-track {
    grid-auto-columns: minmax(280px, 330px) !important;
  }
}

@media (max-width: 620px) {
  .brand-orbit-section {
    padding-top: 58px !important;
    padding-bottom: 72px !important;
  }

  .brand-orbit-head h2,
  #homeBrandTitle {
    font-size: clamp(42px, 13vw, 62px) !important;
  }

  .brand-orbit-head p {
    font-size: 14px !important;
  }

  .brand-orbit-controls .brand-slider-btn {
    width: 54px !important;
    height: 54px !important;
  }

  .brand-orbit-track {
    grid-auto-columns: minmax(258px, 82vw) !important;
    gap: 14px !important;
    padding-bottom: 18px !important;
  }

  .brand-orbit-card,
  .home-brand-slide.brand-orbit-card {
    min-height: 286px !important;
    padding: 20px !important;
    border-radius: 28px !important;
  }

  .brand-orbit-logo {
    min-height: 82px !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
  }

  .brand-logo-badge img {
    max-width: min(160px, 100%) !important;
    max-height: 36px !important;
  }

  .brand-orbit-copy b {
    font-size: 24px !important;
  }

  .brand-orbit-copy em {
    font-size: 13px !important;
  }
}

/* Poster banner upgrade */
.original-product-banner.poster-banner {
  display: block;
  padding: 0;
  margin: 1.8rem 0 2.6rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.original-product-banner.poster-banner::before,
.original-product-banner.poster-banner::after {
  display: none;
}
.opb-poster-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, #fafaf6, #f2f2eb);
  box-shadow: 0 24px 70px rgba(15, 20, 28, 0.12);
}
.opb-poster-link::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.opb-poster-image {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 1024px) {
  .original-product-banner.poster-banner {
    margin: 1.4rem 0 2.2rem;
  }
  .opb-poster-link {
    border-radius: 28px;
  }
}
@media (max-width: 768px) {
  .original-product-banner.poster-banner {
    margin: 1rem 0 1.8rem;
  }
  .opb-poster-link {
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15, 20, 28, 0.12);
  }
}
@media (max-width: 480px) {
  .opb-poster-link {
    border-radius: 18px;
  }
}


/* FINAL FIX: full-page poster banners + correct active brand in navbar */
:root {
  --ttw-header-height: 82px;
}

/* Make the poster hero feel like a full-page landing banner instead of a small rounded card. */
main > .original-product-banner.poster-banner:first-child {
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100vh - var(--ttw-header-height)) !important;
  min-height: 720px !important;
  margin: 0 0 clamp(38px, 5vw, 82px) calc(50% - 50vw) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #080a08 !important;
  box-shadow: none !important;
}

main > .original-product-banner.poster-banner:first-child .opb-poster-link {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #080a08 !important;
}

main > .original-product-banner.poster-banner:first-child .opb-poster-link::after {
  display: none !important;
}

main > .original-product-banner.poster-banner:first-child .opb-poster-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  border-radius: 0 !important;
}

@media (max-width: 1180px) {
  :root { --ttw-header-height: 76px; }
  main > .original-product-banner.poster-banner:first-child {
    min-height: 640px !important;
  }
}

@media (max-width: 760px) {
  :root { --ttw-header-height: 66px; }
  main > .original-product-banner.poster-banner:first-child {
    height: calc(100vh - var(--ttw-header-height)) !important;
    min-height: 620px !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-image {
    object-fit: cover !important;
    object-position: 34% center !important;
  }
}

@media (max-width: 430px) {
  main > .original-product-banner.poster-banner:first-child {
    min-height: 600px !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-image {
    object-position: 31% center !important;
  }
}

/* Remove the old global JOOLA highlight from the Brands dropdown. */
.site-header .nav-dropdown-menu a[href="joola.html"],
.css-mobile-menu a[href="joola.html"] {
  background: transparent !important;
  color: var(--ink, #101410) !important;
  font-weight: 850 !important;
  border-radius: 14px !important;
}

/* Keep normal hover effect after the reset above. */
.site-header .nav-dropdown-menu a:hover,
.site-header .nav-dropdown-menu a:focus,
.css-mobile-menu a:hover,
.css-mobile-menu a:focus {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
}

/* Highlight only the currently opened brand/page. */
body[data-brand="joola"] .site-header .nav-dropdown-menu a[href="joola.html"],
body[data-brand="joola"] .css-mobile-menu a[href="joola.html"],
body[data-brand="tibhar"] .site-header .nav-dropdown-menu a[href="tibhar.html"],
body[data-brand="tibhar"] .css-mobile-menu a[href="tibhar.html"],
body[data-brand="butterfly"] .site-header .nav-dropdown-menu a[href="butterfly.html"],
body[data-brand="butterfly"] .css-mobile-menu a[href="butterfly.html"],
body[data-brand="stiga"] .site-header .nav-dropdown-menu a[href="stiga.html"],
body[data-brand="stiga"] .css-mobile-menu a[href="stiga.html"],
body[data-brand="dhs"] .site-header .nav-dropdown-menu a[href="dhs.html"],
body[data-brand="dhs"] .css-mobile-menu a[href="dhs.html"],
body[data-brand="yinhe"] .site-header .nav-dropdown-menu a[href="yinhe.html"],
body[data-brand="yinhe"] .css-mobile-menu a[href="yinhe.html"],
body[data-brand="xiom"] .site-header .nav-dropdown-menu a[href="xiom.html"],
body[data-brand="xiom"] .css-mobile-menu a[href="xiom.html"],
body[data-brand="andro"] .site-header .nav-dropdown-menu a[href="andro.html"],
body[data-brand="andro"] .css-mobile-menu a[href="andro.html"],
body[data-brand="dawei"] .site-header .nav-dropdown-menu a[href="dawei.html"],
body[data-brand="dawei"] .css-mobile-menu a[href="dawei.html"],
body[data-page="brands"] .site-header .nav-dropdown-menu a[href="brands.html"],
body[data-page="brands"] .css-mobile-menu a[href="brands.html"] {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
  font-weight: 950 !important;
  border-radius: 999px !important;
}

body[data-brand] .site-header .nav-dropdown-trigger[href="brands.html"],
body[data-page="brands"] .site-header .nav-dropdown-trigger[href="brands.html"] {
  background: rgba(215,255,63,.30) !important;
  color: var(--ink, #101410) !important;
}

/* FINAL RESPONSIVE PASS: serve device-sized poster banners so the full artwork stays visible across laptop, tablet and mobile */
.opb-poster-media {
  display: block;
  width: 100%;
  height: 100%;
}

main > .original-product-banner.poster-banner:first-child {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}

@media (min-width: 1025px) {
  main > .original-product-banner.poster-banner:first-child {
    height: calc(100vh - var(--ttw-header-height)) !important;
    min-height: 720px !important;
    max-height: 980px !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-link,
  main > .original-product-banner.poster-banner:first-child .opb-poster-media,
  main > .original-product-banner.poster-banner:first-child .opb-poster-image {
    width: 100% !important;
    height: 100% !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-image {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 1024px) {
  main > .original-product-banner.poster-banner:first-child {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: clamp(24px, 4vw, 44px) !important;
    background: transparent !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-link {
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-media,
  main > .original-product-banner.poster-banner:first-child .opb-poster-image {
    width: 100% !important;
    height: auto !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-image {
    object-fit: contain !important;
    object-position: center top !important;
  }
}

@media (max-width: 640px) {
  main > .original-product-banner.poster-banner:first-child {
    margin-bottom: 22px !important;
  }
}


/* FINAL FIX: clean responsive poster banners
   Desktop/laptop = original wide poster visible.
   Tablet = resized full poster visible.
   Mobile = separate portrait poster artwork, not a tiny banner card.
*/
.opb-poster-media {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

main > .original-product-banner.poster-banner:first-child,
.original-product-banner.poster-banner {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 clamp(28px, 4vw, 62px) calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

main > .original-product-banner.poster-banner:first-child .opb-poster-link,
.original-product-banner.poster-banner .opb-poster-link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #080a08 !important;
  box-shadow: none !important;
}

main > .original-product-banner.poster-banner:first-child .opb-poster-link::after,
.original-product-banner.poster-banner .opb-poster-link::after {
  display: none !important;
}

main > .original-product-banner.poster-banner:first-child .opb-poster-image,
.original-product-banner.poster-banner .opb-poster-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
}

@media (min-width: 1025px) {
  main > .original-product-banner.poster-banner:first-child .opb-poster-image,
  .original-product-banner.poster-banner .opb-poster-image {
    min-height: min(640px, calc(100vh - var(--ttw-header-height, 82px))) !important;
    object-fit: cover !important;
  }
}

@media (max-width: 1024px) {
  main > .original-product-banner.poster-banner:first-child,
  .original-product-banner.poster-banner {
    margin-bottom: 30px !important;
  }

  main > .original-product-banner.poster-banner:first-child .opb-poster-image,
  .original-product-banner.poster-banner .opb-poster-image {
    min-height: 0 !important;
    object-fit: contain !important;
  }
}

@media (max-width: 640px) {
  main > .original-product-banner.poster-banner:first-child,
  .original-product-banner.poster-banner {
    margin-bottom: 20px !important;
  }
}


/* FINAL FIX: highlight only the active item inside Brands dropdown, not the main Brands navbar button */
.site-header .nav-dropdown > .nav-dropdown-trigger,
.site-header .nav-dropdown > .nav-dropdown-trigger:hover,
.site-header .nav-dropdown > .nav-dropdown-trigger:focus,
.site-header .nav-dropdown > .nav-dropdown-trigger[aria-current="page"],
.site-header .nav-dropdown.active > .nav-dropdown-trigger,
.site-header .nav-dropdown.current > .nav-dropdown-trigger,
.site-header .nav-dropdown:has(.nav-dropdown-menu a[aria-current="page"]) > .nav-dropdown-trigger {
  background: transparent !important;
  color: var(--ink, #101410) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.site-header .nav-dropdown > .nav-dropdown-trigger::before {
  display: none !important;
}

.site-header .nav-dropdown > .nav-dropdown-trigger::after {
  background: currentColor !important;
}

.site-header .nav-dropdown-menu a[aria-current="page"],
.site-header .nav-dropdown-menu a.is-active-brand,
.site-header .nav-dropdown-menu a.active-brand {
  background: var(--accent, #d7ff3f) !important;
  color: var(--ink, #101410) !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

.site-header .nav-dropdown-menu a[aria-current="page"]::after,
.site-header .nav-dropdown-menu a.is-active-brand::after,
.site-header .nav-dropdown-menu a.active-brand::after {
  display: none !important;
}


/* FINAL: budget quick links below homepage banner */
.budget-shop-section {
  position: relative !important;
  padding-top: clamp(42px, 5vw, 76px) !important;
  padding-bottom: clamp(44px, 5vw, 82px) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(215,255,63,.16), transparent 28%),
    linear-gradient(180deg, var(--paper, #f4f3ee), #f8f7ef) !important;
  overflow: hidden !important;
}

.budget-shop-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: .35 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(17,19,17,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(17,19,17,.03) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}

.budget-shop-head {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 380px) !important;
  gap: 28px !important;
  align-items: end !important;
  margin-bottom: clamp(24px, 3vw, 42px) !important;
}

.budget-shop-head h2 {
  margin: 8px 0 0 !important;
  font: 950 clamp(42px, 5.4vw, 88px)/.9 Manrope, sans-serif !important;
  letter-spacing: -.085em !important;
  color: var(--ink, #101410) !important;
}

.budget-shop-head p {
  margin: 0 !important;
  color: rgba(17,19,17,.62) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 760 !important;
}

.budget-shop-grid {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.budget-shop-card {
  min-height: 205px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 24px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(17,19,17,.08) !important;
  box-shadow: 0 20px 46px rgba(17,19,17,.065) !important;
  color: var(--ink, #101410) !important;
  text-decoration: none !important;
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease !important;
}

.budget-shop-card:hover {
  transform: translateY(-6px) !important;
  background: #fff !important;
  border-color: rgba(17,19,17,.16) !important;
  box-shadow: 0 30px 68px rgba(17,19,17,.11) !important;
}

.budget-card-kicker {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 31px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(17,19,17,.055) !important;
  color: rgba(17,19,17,.62) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.budget-shop-card strong {
  display: block !important;
  margin-top: auto !important;
  font: 950 clamp(32px, 3vw, 50px)/.9 Manrope, sans-serif !important;
  letter-spacing: -.08em !important;
}

.budget-shop-card small {
  display: block !important;
  color: rgba(17,19,17,.62) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 720 !important;
}

.budget-shop-card i {
  display: inline-flex !important;
  width: max-content !important;
  align-items: center !important;
  gap: 10px !important;
  font-style: normal !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: rgba(17,19,17,.74) !important;
  border-bottom: 1px solid rgba(17,19,17,.22) !important;
  padding-bottom: 4px !important;
}

.budget-card-primary {
  background: linear-gradient(145deg, rgba(215,255,63,.36), rgba(255,255,255,.84)) !important;
}

.budget-card-dark {
  background: linear-gradient(145deg, #101410, #26301d) !important;
  color: #fff !important;
  border-color: rgba(215,255,63,.18) !important;
}

.budget-card-dark .budget-card-kicker {
  background: rgba(215,255,63,.14) !important;
  color: var(--accent, #d7ff3f) !important;
}

.budget-card-dark small,
.budget-card-dark i {
  color: rgba(255,255,255,.72) !important;
}

.budget-card-dark i {
  border-bottom-color: rgba(255,255,255,.24) !important;
}

@media (max-width: 1080px) {
  .budget-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .budget-shop-section {
    padding-top: 42px !important;
    padding-bottom: 54px !important;
  }

  .budget-shop-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .budget-shop-head h2 {
    font-size: clamp(40px, 12vw, 62px) !important;
  }

  .budget-shop-head p {
    font-size: 14px !important;
  }

  .budget-shop-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .budget-shop-card {
    min-height: 170px !important;
    border-radius: 24px !important;
    padding: 22px !important;
  }

  .budget-shop-card strong {
    font-size: 38px !important;
  }
}

/* FINAL: filter opens only after clicking the Filter button */
.filter-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,19,17,.12) !important;
  background: #fff !important;
  color: var(--ink, #101410) !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 30px rgba(17,19,17,.06) !important;
}

.filter-toggle::after {
  content: "↓" !important;
  font-size: 13px !important;
  transition: transform .22s ease !important;
}

.filter-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

.catalog-layout.filters-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

.catalog-layout.filters-collapsed .filter-panel {
  display: none !important;
}

.catalog-layout.filters-open {
  grid-template-columns: 300px minmax(0, 1fr) !important;
}

.catalog-layout.filters-open .filter-panel {
  display: block !important;
}

@media (max-width: 900px) {
  .catalog-layout.filters-open {
    grid-template-columns: 1fr !important;
  }

  .catalog-layout.filters-open .filter-panel {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 20px !important;
  }
}


/* FINAL: search button beside search input + automatic sort flow */
.results-topbar {
  align-items: flex-end !important;
}
.search-control {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) auto !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  max-width: 560px !important;
}
.search-control span {
  grid-column: 1 / -1 !important;
}
.search-control input {
  min-height: 46px !important;
}
.catalog-search-button {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,19,17,.12) !important;
  background: var(--ink, #101410) !important;
  color: #fff !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 14px 28px rgba(17,19,17,.12) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.catalog-search-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(17,19,17,.16) !important;
}
.sort-control select {
  cursor: pointer !important;
}
@media (max-width: 760px) {
  .results-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .search-control {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }
  .catalog-search-button {
    width: 100% !important;
  }
}