.cookie-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1000;width:min(680px,calc(100% - 32px));background:var(--surface-2);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.45);padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-banner p{margin:0;font-size:13px;color:var(--muted);flex:1 1 320px}
.cookie-banner a{color:var(--text);text-decoration:underline}
.cookie-banner .btn{flex-shrink:0}
@media (max-width:600px){.cookie-banner{flex-direction:column;align-items:stretch;bottom:12px;padding:14px 16px}}
.cookie-banner[hidden]{display:none}
:root{
	--bg:#070707;
	--surface:#111111;
	--surface-2:#141414;
	--panel:#121212;
	--panel-alt:#101010;
	--nav:#090909;
	--button:#d11d1d;
	--button-contrast:#fff;
	--brand:#d11d1d;
	--brand-dark:#a20909;
	--badge-red:#ff3737;
	--text:#f7f7f7;
	--muted:rgba(255,255,255,0.72);
	--border:rgba(255,255,255,0.12);
	--shadow:0 22px 40px rgba(0,0,0,0.45);
	--metal:#c7b38b;
	--accent:#ff5c5c;
	--soft-glow:rgba(209,29,29,0.12);
	--card-shadow:rgba(0,0,0,0.4);
	--bg-overlay:rgba(0,0,0,0.55);
}
.theme-light{
	--bg:#f4f4f4;
	--surface:#f8f8f8;
	--surface-2:#ffffff;
	--panel:#ffffff;
	--panel-alt:#f3f3f3;
	--nav:#f7f7f7;
	--button:#d11d1d;
	--button-contrast:#ffffff;
	--brand:#c21616;
	--brand-dark:#8f0000;
	--badge-red:#d11d1d;
	--text:#121212;
	--muted:rgba(18,18,18,0.72);
	--border:rgba(18,18,18,0.12);
	--shadow:0 16px 30px rgba(0,0,0,0.12);
	--metal:#8f7a4c;
	--accent:#d11d1d;
	--soft-glow:rgba(209,29,29,0.08);
	--card-shadow:rgba(0,0,0,0.12);
	--bg-overlay:rgba(244,244,244,0.88);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{font-family:'Inter', Arial, sans-serif; margin:0; min-height:100vh; color:var(--text); position:relative; background:var(--bg); overflow-x:hidden;}
.site-background{position:fixed;inset:0;z-index:-2;/* BOXEQUIPMENT_BG_PHOTO_DISABLED: background:url('/static/img/hero_collage.png') center/cover no-repeat fixed; */}
.site-background::after{content:'';position:absolute;inset:0;/* BOXEQUIPMENT_BG_PHOTO_DISABLED: background:var(--bg-overlay); */pointer-events:none}
a{color:var(--brand);cursor:pointer;text-decoration:none}
button,input,select,textarea{font:inherit}
a,button,input,select,textarea,.btn,.nav-user,[role="button"]{position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.top-contact-bar{display:flex;align-items:center;gap:8px;padding:6px 16px;background:var(--nav);color:var(--muted);font-size:11px;border-bottom:1px solid var(--border)}
.top-contact-bar a{color:var(--muted);text-decoration:none}
.top-contact-bar a:hover{color:var(--brand)}
.top-contact-sep{opacity:0.4}
.header-search-row{background:var(--surface);padding:10px 16px;border-bottom:1px solid var(--border)}
.header-search-form{display:flex;max-width:640px;margin:0 auto}
.header-search-form input{flex:1;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:9px 12px;border-radius:4px 0 0 4px;font-size:13px}
.header-search-form button{background:var(--brand);color:#fff;border:none;padding:9px 20px;border-radius:0 4px 4px 0;font-size:13px;font-weight:700;cursor:pointer}
.category-nav-bar{display:flex;flex-wrap:wrap;gap:0;background:var(--nav);border-bottom:1px solid var(--border);padding:0 16px}
.category-nav-bar a{color:var(--muted);text-decoration:none;font-size:12px;font-weight:600;padding:10px 14px;white-space:nowrap}
.category-nav-bar a:hover{color:var(--brand);background:var(--surface-2)}
@media (max-width:700px){.top-contact-bar{font-size:10px;padding:5px 12px}.category-nav-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}}
.site-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:13px 13px 16px;background:var(--nav);backdrop-filter:blur(10px);background-attachment:scroll;color:var(--text);box-shadow:0 11px 22px rgba(0,0,0,0.25);border-bottom:1px solid var(--border);position:static !important;top:auto !important;left:auto !important;right:auto !important;z-index:1 !important;overflow:hidden;max-height:24vh;margin-bottom:8px}
.site-header .site-subtitle{color:var(--muted)}
.site-header .site-nav a,.site-header .site-nav button,.site-header .nav-user{color:var(--text)}
.site-header .site-nav a:hover,.site-header .site-nav button:hover{color:var(--accent)}
.site-header::after{content:'';position:absolute;inset:0;background:transparent;pointer-events:none;z-index:0}
.site-header > *{position:relative;z-index:1}
.brand-block{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.brand-block h1{margin:0 0 5px;font-size:1.75rem;letter-spacing:0.05em}
.brand-home-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:3px;background:var(--brand);color:#fff;text-decoration:none;font-size:0.9rem;font-weight:700;box-shadow:0 8px 16px rgba(209,29,29,0.18);transition:transform .16s ease,box-shadow .16s ease}
.brand-home-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(209,29,29,0.22)}
.site-subtitle{margin:0;color:var(--muted);max-width:700px;line-height:1.6}
.site-nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:flex-end;position:relative;z-index:1}
.site-nav a,.site-nav button,.nav-user{display:inline-flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;padding:4px 0;background:transparent;border:none;font-weight:600;transition:color .2s ease;cursor:pointer;touch-action:manipulation;pointer-events:auto;line-height:1.2;white-space:nowrap}
.site-nav a:hover,.site-nav button:hover{color:var(--brand)}
.site-nav a:focus,.site-nav button:focus,.brand-home-btn:focus{outline:2px solid rgba(255,255,255,0.90);outline-offset:2px}
.page-shell{max-width:944px;margin:0 auto;padding:24px 13px 40px;min-height:100vh;position:relative;isolation:isolate}
.hero,.section-card,.auth-card{background:transparent;border:1px solid rgba(255,255,255,0.08);border-radius:0;box-shadow:var(--shadow);padding:13px}
.section-card{overflow:visible}
.hero{padding:24px;box-shadow:0 11px 22px rgba(0,0,0,0.3);border-left:3px solid var(--badge-red);background:var(--surface-2);border-radius:0 8px 8px 0}
@media (min-width:601px){.hero{width:97vw;position:relative;left:50%;right:50%;margin-left:-48.5vw;margin-right:-48.5vw}}
@media (min-width:601px){.hero > .section-card,.hero > .benefits-strip,.hero > .process-section{width:90%;margin-left:auto;margin-right:auto}}
.hero-cta{margin-top:16px;display:inline-flex}
.hero-banner-solid{display:flex;align-items:center;gap:24px;background:var(--brand);border-radius:10px;padding:35px;margin:-11px -11px 18px -11px}
.hero-banner-solid{margin-left:calc(-11px + 1.5%);margin-right:calc(-11px + 1.5%)}
.hero-banner-solid .hero-intro{flex:1.2}
.hero-banner-solid .eyebrow.hero-promo-badge{background:rgba(0,0,0,0.25);color:#fff;border:none}
.hero-banner-solid .hero-intro h2,.hero-banner-solid .hero-intro .site-subtitle{color:#fff}
.hero-banner-solid .hero-cta{background:#000;color:#fff}
.hero-photo-slot{flex:1;min-height:300px;max-height:475px;border-radius:8px;background:rgba(0,0,0,0.15);display:none;width:100%;object-fit:cover}
.hero-slider{flex:1;position:relative;min-height:300px;max-height:475px;border-radius:8px;overflow:hidden;display:none}
@media (min-width:760px){.hero-slider{display:block}}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-slide.active{opacity:1}
@media (min-width:760px){.hero-photo-slot{display:block}}
.categories-grid-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(163px,1fr));gap:12px}
.categories-grid-icons .category-icon-tile{flex:0 1 163px;width:163px}
@media (max-width:600px){.categories-grid-icons{grid-template-columns:repeat(2,1fr)}.categories-grid-icons .category-icon-tile{width:100%;flex:1 1 auto}}
.category-icon-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 12px;height:124px;box-sizing:border-box;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.category-icon-tile:hover{transform:translateY(-2px);border-color:var(--brand)}
.category-icon-tile .category-icon{color:var(--brand);flex-shrink:0}
.category-icon-tile .category-name{color:var(--text);font-size:0.85rem;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.popular-products-carousel{display:flex;align-items:center;gap:12px}
.popular-products-carousel .popular-products-grid{flex:1;min-width:0}
.popular-products-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.popular-nav-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,border-color .15s ease}
.popular-nav-arrow:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.popular-nav-arrow:disabled{opacity:0.3;cursor:default}
.popular-view-all-link{display:none}
@media (max-width:700px){.popular-products-grid{grid-template-columns:1fr}.popular-nav-arrow{display:none}.popular-view-all-link{display:block;text-align:center;margin-top:14px;color:var(--brand);font-weight:600;text-decoration:none}}
.mini-product-card{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;overflow:hidden;text-decoration:none;transition:transform .15s ease}
.mini-product-card:hover{transform:translateY(-2px)}
.mini-product-image{height:182px;background:var(--panel-alt);width:100%;object-fit:cover;display:block}
.mini-product-name{padding:10px 12px 2px;color:var(--text);font-size:0.85rem}
.mini-product-price{padding:0 12px 12px;color:var(--brand);font-weight:700;font-size:0.95rem}
@media (max-width:600px){.hero-banner-solid{flex-direction:column;align-items:flex-start}}
.hero-intro{margin-bottom:14px}
.eyebrow{display:inline-block;margin:0 0 10px;padding:6px 11px;background:rgba(209,29,29,0.12);color:var(--brand);border:1px solid rgba(255,255,255,0.08);border-radius:0;font-size:0.82rem;font-weight:700;letter-spacing:0.08em}
.hero-intro h2,.page-header h1{margin:0 0 10px;font-size:2rem;color:var(--text);}
.hero-intro p,.page-subtitle,.section-heading p,.page-header p{margin:0;color:var(--muted);line-height:1.0}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn,button,input[type="submit"],input[type="button"],.filters button,.detail-form button{display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;border:none;border-radius:0;background:var(--button);color:var(--button-contrast);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .16s ease,box-shadow .16s ease;box-shadow:0 10px 19px rgba(209,29,29,0.2)}
.btn:hover,button:hover,input[type="submit"]:hover,input[type="button"]:hover,.filters button:hover,.detail-form button:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(209,29,29,0.24)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-primary{background:var(--brand);color:#fff}
select,.filters select,.detail-form select{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}
select option{color:var(--text);background:var(--surface-2)}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}
.hero-item{background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.6));color:var(--text);padding:26px 18px;text-align:center;border-radius:0;font-weight:700;box-shadow:inset 0 -6px 0 rgba(0,0,0,0.45);border:1px solid rgba(0, 0, 0, 0.997)}
.hero-item::after{content:'';display:block;height:6px;width:60px;margin:12px auto 0;background:linear-gradient(90deg,var(--brand),transparent);border-radius:4px}
.info-strip{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
.info-pill{background:transparent;color:var(--text);padding:8px 12px;border-radius:999px;font-size:0.95rem;font-weight:700;border:1px solid rgba(255,255,255,0.04)}
.process-section{margin:24px 0 10px;padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.section-heading{margin-bottom:14px}
.section-heading h3{margin:0;color:var(--text);font-size:1.15rem}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.process-step{background:linear-gradient(180deg,var(--surface),#0b0b0b);border-radius:10px;padding:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 0px 0px rgba(0,0,0,0.6)}
.step-number{display:inline-block;margin-bottom:8px;padding:6px 10px;background:var(--brand);color:hsl(0, 3%, 14%);border-radius:999px;font-size:0.8rem;font-weight:800}
.process-step h4{margin:0 0 6px;color:var(--text)}
.process-step p{margin:0;color:var(--muted);line-height:1.45;font-size:0.95rem}
.page-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 0 18px}
.categories-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:stretch}
.categories-grid>.category-card-shell,
.categories-grid>.category-card-with-actions{flex:0 1 187px;max-width:187px}
.category-card-shell{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;isolation:isolate;display:flex;height:100%;min-height:187px;width:100%;border-radius:10px;overflow:hidden;background-color:#161010;border-top:3px solid var(--brand)}
.category-card-shell.no-image .category-card{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.category-icon{color:var(--brand);flex-shrink:0}
.category-card-shell:not(.no-image)::after{content:'';position:absolute;left:0;right:0;top:0;height:70%;background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.65) 20%,rgba(0,0,0,0.15) 65%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:1}
.category-card-shell:not(.no-image) .category-card{align-items:flex-start;justify-content:flex-start;text-align:left;padding:14px 12px;z-index:2}
.category-card-shell:not(.no-image) .category-name{display:inline-block;background:none;color:#fff;padding:0;font-weight:600;text-shadow:0 2px 6px rgba(0,0,0,0.85),0 1px 3px rgba(0,0,0,0.9)}
.category-panel{background:transparent;border:1px solid rgba(255,255,255,0.08);backdrop-filter:none;border-radius:0;padding:33px 13px}
.hero > .category-panel,.hero > .popular-products-panel{margin-top:24px}
.category-card{display:flex;align-items:flex-start;justify-content:flex-end;padding:12px 14px;border-radius:10px;text-decoration:none;color:#f7f7f7;background:transparent;width:100%;min-width:0;text-align:right;border:1px solid var(--border);min-height:187px;height:100%;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 12px 28px rgba(0,0,0,0.35)}
.category-card::after{content:'';position:absolute;inset:0;background:transparent;z-index:-1}
.category-card-with-actions{display:flex;flex-direction:column;gap:8px;min-height:136px;height:100%}
.category-card-shell{position:relative}
.category-context-menu{position:fixed;display:none;z-index:1200;padding:8px;border-radius:10px;background:rgba(12,12,12,0.96);border:1px solid rgba(255,255,255,0.08);box-shadow:0 18px 38px rgba(0,0,0,0.45)}
.category-context-menu.open{display:block}
.category-delete-context-form{display:flex}
.context-menu-item{border:none;background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}
.context-menu-item:hover{background:rgba(196,18,18,0.2)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px;position:relative;z-index:990;isolation:isolate}
.filters input,.filters select{padding:9px 12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);min-width:0;border-radius:8px}
.filters input[name="q"]{flex:2 1 220px}
.filters select{flex:1 1 140px}
.detail-form input,.detail-form textarea,.detail-form select{padding:12px 14px;border:1px solid rgba(0,0,0,0.12);background:#d9d9d9;color:#1a1a1a;width:100%;min-width:0}
.price-group{display:flex;gap:8px;min-width:0}
.price-group input{width:128px;flex:0 0 auto}
.filter-footer{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.filters-actions{display:flex;gap:8px;align-items:center;justify-content:flex-start;min-width:0}
.filters button{padding:9px 16px;border:1px solid var(--border);background:var(--button);color:var(--button-contrast);border-radius:8px}
.detail-form button{padding:12px 14px;border:1px solid rgba(0,0,0,0.12);background:var(--button);color:var(--button-contrast);min-width:120px}
.filters input::placeholder{color:var(--muted)}
@media (max-width: 960px){
  .filters{flex-direction:column;align-items:stretch}
  .filters input[name="q"],.filters select{flex:1 1 auto}
  .price-group{flex-wrap:wrap}
  .filter-footer{flex-wrap:wrap}
}
.filters button,.filters .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--button);color:var(--button-contrast);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;position:relative;z-index:995;white-space:nowrap}
.filters button:hover,.filters .btn:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:0 8px 16px rgba(209,29,29,0.3)}
.card-fields.hidden{display:none}
.card-row{display:flex;gap:12px;flex-wrap:wrap}
.card-row label{flex:1;min-width:140px}
.detail-nav{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.nav-arrow{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:var(--text);text-decoration:none;font-weight:700}
.nav-arrow.prev{justify-content:flex-start}
.nav-arrow.next{justify-content:flex-end}
.delete-product-panel{margin-top:18px}
.delete-confirm{margin-top:10px;padding:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04)}
.filters input:focus,.filters select:focus{outline:2px solid rgba(209,29,29,0.4);border-color:rgba(209,29,29,0.5);background:var(--surface-2);box-shadow:inset 0 0 4px rgba(0,0,0,0.3)}
.detail-form input:focus,.detail-form textarea:focus,.detail-form select:focus{outline:2px solid rgba(209,29,29,0.28);border-color:rgba(209,29,29,0.3);background:#c4c4c4;box-shadow:inset 0 0 4px rgba(0,0,0,0.1)}
.product-grid{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.product-card{padding:10px;width:192px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;box-sizing:border-box;min-height:183px;background:var(--surface-2);border-radius:10px;box-shadow:0 10px 22px var(--card-shadow);border:1px solid var(--border)}
.product-card .btn{background:var(--brand);color:#fff;border-radius:8px}
.product-card img{width:210px;max-width:100%;height:140px;object-fit:cover;display:block;margin:0 0 7px;border-radius:8px;border:1px solid rgba(255,255,255,0.08)}
.product-card-noimage{width:100%;height:140px;margin:0 0 7px;border-radius:8px;border:1px solid var(--border);background:var(--panel-alt);display:flex;align-items:center;justify-content:center}
.product-card-noimage .product-noimage-icon{font-size:1.6rem;color:var(--muted)}
.product-card-link{display:block;position:relative;overflow:hidden;border-radius:8px;outline:none}
.product-card-link:hover img{transform:scale(1.04)}
.product-card-link img{transition:transform .25s ease}
.product-card .product-info{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:auto;width:100%}
.product-card h3{margin:0;font-size:0.95rem;line-height:1.2;color:var(--text);letter-spacing:0.02em}
.product-card .product-meta{margin:0;color:var(--muted)}
.product-card .product-model{margin:0;color:var(--muted);font-size:0.75rem}
.product-card .product-model strong{color:var(--text);font-weight:500}
.product-card .product-meta-row{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 0 2px}
.product-card .product-price{margin:0;color:var(--text);font-weight:600;font-size:0.95rem}
.product-card .product-category-tag{margin:0;color:var(--muted);font-size:0.78rem}
.product-card .btn-primary-wide{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;font-size:0.82rem}
.product-card .btn-primary-wide::after{content:'→';font-size:0.95em}
.btn-delete{background:#2f1717;color:#fff;border:1px solid rgba(255,255,255,0.12);border-radius:8px}
.btn-delete:hover{background:#480a0a}
.product-card .btn{margin-top:0}
.pagination{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:20px;color:var(--muted)}
.pagination .page-numbers{display:flex;gap:8px;flex-wrap:wrap;max-width:70%;justify-content:center}
.pagination .page-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;border:1px solid var(--border);color:var(--text);text-decoration:none;background:var(--surface-2);font-size:1.43rem}
.pagination .page-arrow:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-number{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border-radius:6px;border:1px solid var(--border);color:var(--text);text-decoration:none;background:var(--surface-2);font-size:1.17rem}
.pagination .page-number:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-number.active{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
.product-detail{display:grid;grid-template-columns:0.9fr 1.1fr;gap:19px;align-items:start;margin-top:8px;padding-top:8px}
.product-gallery{display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;position:relative;z-index:2}
.gallery-main{display:grid;place-items:center;padding:12px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,#0b0b0b,var(--surface));border-radius:10px;width:100%;min-height:clamp(360px,64vh,560px);overflow:hidden;position:relative}
.gallery-image,.gallery-video{width:100%;height:clamp(360px,64vh,560px);max-width:100%;max-height:64vh;object-fit:contain;border-radius:8px;cursor:pointer;display:block;margin:0 auto;background:#050505}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gallery-thumb{width:61px;height:61px;object-fit:cover;border:2px solid transparent;border-radius:6px;cursor:pointer;flex-shrink:0}
.gallery-thumb.active{border-color:var(--brand)}
.gallery-thumb.video-thumb{display:flex;align-items:center;justify-content:center;background:rgba(209,29,29,0.15);border:2px solid transparent;border-radius:6px;cursor:pointer;transition:background .2s ease,border-color .2s ease;width:61px;height:61px}
.gallery-thumb.video-thumb.active{border-color:var(--brand);background:rgba(209,29,29,0.25)}
.product-detail-info{padding:16px;background:transparent;border:1px solid rgba(255,255,255,0.08)}
.product-price{font-size:1.3rem;font-weight:800;color:var(--brand)}
.product-tags{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.product-tag-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600;line-height:1.6;background:#fff;border:1px solid rgba(0,0,0,0.12);color:#3a3a3a;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}
.product-tag-chip:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.product-tag-chip-current{background:var(--brand);color:#fff}
body.theme-light .product-tag-chip{background:#3a3a3a;border:1px solid rgba(255,255,255,0.18);color:#fff}
body.theme-light .product-tag-chip:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.tag-back-link{margin-top:18px;text-align:center}
.tag-back-link a{color:var(--brand);text-decoration:none;font-weight:600}
.tag-back-link a:hover{text-decoration:underline}
.detail-form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.detail-form label{display:flex;flex-direction:column;gap:5px;color:var(--text);font-weight:700}
.detail-form textarea{min-height:77px;resize:vertical}
.table-card{overflow-x:auto;background:transparent;border:1px solid rgba(255,255,255,0.08);}
table{width:100%;border-collapse:collapse}
table tbody tr{background:var(--surface-2)}
table tbody tr:nth-child(even){background:var(--panel-alt)}
.card-fields label{display:block;margin-bottom:10px}
.card-fields input{width:100%;box-sizing:border-box}
.payment-note{margin-top:10px;color:var(--muted);font-size:0.95rem}
th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left}
th{background:transparent;color:var(--text)}
.checkout-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:13px;flex-wrap:wrap;background:transparent;}
.empty-state{padding:12px 0;color:var(--muted)}
.order-list{display:grid;gap:14px}
.order-card{background:var(--surface-2);border-radius:12px;padding:16px;box-shadow:0 12px 28px rgba(0,0,0,0.3);border:1px solid var(--border)}
.order-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.order-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.order-card-actions .btn{padding:8px 14px;font-size:0.85rem}
.order-card h2{margin:0;color:var(--text)}
.status-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(196,18,18,0.08);color:var(--brand);font-size:0.85rem;font-weight:700}
.auth-card{max-width:520px;margin:0 auto}
.form-card{max-width:760px}
.error{color:var(--brand);font-weight:600}
.image-modal{position:fixed;inset:0;background:rgba(0,0,0,0.82);display:none;align-items:center;justify-content:center;z-index:2147483646}
.image-modal.open{display:flex}
.image-modal img{max-width:95vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:10px}
.modal-close,.modal-nav{position:absolute;background:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:24px;cursor:pointer}
.modal-close{top:20px;right:20px}
.modal-nav{top:50%;transform:translateY(-50%);font-size:30px}
.modal-nav.prev{left:20px}
.modal-nav.next{right:20px}
@media (max-width: 960px){.hero-grid,.process-steps{grid-template-columns:repeat(2,1fr)}.product-detail{grid-template-columns:1fr}.product-gallery{order:1}.product-detail-info{order:2}}
@media (max-width: 760px){.site-header{flex-direction:column;align-items:flex-start}.site-nav{justify-content:flex-start}.filters{grid-template-columns:1fr}.hero-grid,.process-steps{grid-template-columns:1fr}.product-card{width:100%}.checkout-summary{flex-direction:column;align-items:flex-start}}

.support-container{position:absolute !important;right:12px !important;bottom:12px !important;z-index:2147483647 !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:10px !important;pointer-events:none !important}
.chat-toggle{padding:14px 18px;border:none;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 18px 30px rgba(209,29,29,0.28);transition:transform .16s ease,box-shadow .16s ease;pointer-events:auto}
.chat-toggle:hover{transform:translateY(-2px);box-shadow:0 20px 36px rgba(209,29,29,0.32)}
.support-panel{width:340px;max-width:calc(100vw - 32px);background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:4px;padding:22px;box-shadow:0 26px 48px rgba(0,0,0,0.45);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .24s ease,transform .24s ease,visibility .24s ease;pointer-events:auto}
.support-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.support-panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;font-weight:700;color:var(--text)}
.support-panel a{color:var(--brand);text-decoration:none}
.support-close{border:none;background:transparent;color:var(--text);font-size:22px;cursor:pointer;line-height:1}
.contact-card h3{margin-top:0;color:var(--text)}
.contact-card p{margin:10px 0;color:var(--muted);line-height:1.7}

/* --- New decorative elements inspired by provided images --- */
.inventory-panel{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;width:100%;max-width:100%}
.inventory-item{position:relative;display:block;padding:0;border-radius:12px;overflow:hidden;flex:0 1 200px;min-width:150px;max-width:210px;height:118px;background:#111;border:none;box-shadow:0 12px 30px rgba(0,0,0,0.35);z-index:1}
.inventory-item.item-1{align-self:flex-end;transform:translateY(8px)}
.inventory-item.item-2{flex-basis:220px;max-width:230px;height:132px;transform:translateY(-8px)}
.inventory-item.item-3{align-self:flex-end;transform:translateY(8px)}
.inventory-item img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.inventory-item .meta{display:none}
.inventory-item:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,0.38)}

/* larger category cards and stronger emphasis */
.category-card{min-width:170px;padding:15px 19px;font-size:1.05rem}
.category-card:hover{box-shadow:0 18px 36px rgba(196,18,18,0.08);border-color:rgba(196,18,18,0.18)}
.existing-image-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,0.06);border-radius:10px;background:rgba(255,255,255,0.03)}
.existing-image-row img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.gallery-delete-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.payment-options{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 12px;color:var(--text)}
.payment-options label{display:flex;align-items:center;gap:8px}

/* Highlight dark panels / graphs / buttons with glow and stronger border */
.highlighted{box-shadow:0 10px 28px rgba(196,18,18,0.16);border:2px solid var(--badge-red);background:linear-gradient(180deg,rgba(196,18,18,0.06),transparent)}
.dark-panel{background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.7));border:2px solid rgba(255,255,255,0.03);padding:14px;border-radius:10px}

/* Product page refinements */
.product-hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.product-status{margin:4px 0 0;color:var(--brand);font-weight:700}
.product-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.meta-card{padding:10px 12px;border:1px solid rgba(255,255,255,0.08);border-radius:10px;background:rgba(255,255,255,0.03)}
.meta-label{display:block;margin-bottom:4px;color:var(--muted);font-size:0.8rem;text-transform:uppercase;letter-spacing:.08em}
.meta-card a{color:var(--text)}
.product-summary-box,.contact-card,.auth-cta{padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:10px;background:rgba(255,255,255,0.03);margin-bottom:12px}
.product-summary-box h3,.contact-card h3{margin:0 0 8px;color:var(--text)}
.product-summary-box p,.contact-card p,.auth-cta p{margin:0;line-height:1.6;color:var(--muted)}
.stock-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.stock-pill{padding:8px 10px;border-radius:999px;background:rgba(209,29,29,0.12);border:1px solid rgba(209,29,29,0.18);color:var(--text);font-size:0.9rem;font-weight:700}
.product-cta-block{margin-top:8px}
.cta-row{display:flex;flex-wrap:wrap;gap:8px}
.product-social-links{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.empty-gallery{display:grid;place-items:center;min-height:320px;background:radial-gradient(circle at top,rgba(209,29,29,0.16),transparent 70%)}
.empty-gallery-content{padding:18px 22px;border:1px dashed rgba(255,255,255,0.16);border-radius:10px;color:var(--muted)}

/* Inputs and graph fields use the metallic + red motif */
.detail-form input[type="text"],.detail-form input[type="number"],.detail-form textarea{border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.detail-form input:focus,.detail-form textarea:focus{outline:2px solid rgba(196,18,18,0.18);box-shadow:0 6px 18px rgba(196,18,18,0.08)}
.form-field-label{color:var(--metal);font-weight:800}

@media (max-width: 760px){
  .product-hero-top{flex-direction:column;align-items:flex-start}
  .product-meta-grid{grid-template-columns:1fr}
}
/* Oil sheen effect for hero using animated gradient */
.hero{position:relative;overflow:hidden}
.site-header::before{content:none}
.hero .oil-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 200px at 10% 20%,rgba(255,255,255,0.03),transparent 15%), linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.0));mix-blend-mode:overlay;}
.hero .oil-sheen{position:absolute;left:-30%;top:40%;width:140%;height:30%;background:linear-gradient(90deg,transparent rgba(255,255,255,0.06),transparent);transform:skewX(-18deg);filter:blur(6px);opacity:0.8;animation:oilmove 6s linear infinite}
@keyframes oilmove{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(100%) skewX(-18deg)}}

/* Tire decorative icon (CSS-based) */
.tire-icon{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#222 20%,transparent 21%), repeating-conic-gradient(var(--metal) 0 10deg, rgba(0,0,0,0.6) 10deg 20deg);border:6px solid rgba(0,0,0,0.6);box-shadow:inset 0 4px 10px rgba(0,0,0,0.6),0 8px 18px rgba(0,0,0,0.6)}

/* Emphasize buttons/labels that should use the image's "New/Equipment" colors */
.brand-label{color:var(--metal);background:linear-gradient(90deg,rgba(83, 47, 47, 0.02),transparent);padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);font-weight:900}

/* Slight brighten filter for images used across site */
.brighten{filter:brightness(1.08) saturate(1.05);transition:filter .2s ease}
.brighten:hover{filter:brightness(1.16) saturate(1.1)}

/* Simple model-graph: fills proportionally to model string length (capped) */
.model-graph{width:160px;height:10px;border-radius:999px;background:rgba(255,255,255,0.04);overflow:hidden;margin:6px 0}
.model-graph::after{content:'';display:block;height:100%;width:calc(min(1, (var(--len,0) / 12)) * 100%);background:linear-gradient(90deg,var(--brand),var(--brand-dark));transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* Extra polished touches */

/* ===== CHECKOUT PAGE STYLES ===== */

.checkout-section{padding:32px 16px;max-width:1200px;margin:0 auto}

.checkout-container{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}

/* ORDER SUMMARY (LEFT SIDE) */
.checkout-summary{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;position:sticky;top:120px;height:fit-content}

.checkout-summary h2{margin:0 0 16px 0;font-size:18px;color:var(--text);font-weight:600}

.order-items-table{display:flex;flex-direction:column;gap:12px}

.table-header,.table-row{display:grid;grid-template-columns:2fr 0.6fr 1fr 1fr;gap:12px;padding:12px;border-radius:8px;font-size:13px;align-items:center}

.table-header{background:var(--surface-2);font-weight:600;color:var(--text);border:1px solid var(--border)}

.table-row{background:var(--surface);border:1px solid rgba(186, 184, 184, 0.04);padding:12px}

.table-row span{display:flex;align-items:center}

.col-product{font-weight:500;color:var(--text)}

.col-qty,.col-price,.col-total{text-align:right;color:var(--muted)}

.table-total{display:grid;grid-template-columns:2fr 0.6fr 1fr 1fr;gap:12px;padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;border-top:2px solid var(--brand);margin-top:12px;font-weight:600;color:var(--text)}

/* PAYMENT SECTION (RIGHT SIDE) */
.payment-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px}

.payment-form{display:flex;flex-direction:column;gap:24px}

/* FORM GROUPS */
.form-group{display:flex;flex-direction:column;gap:8px}

.form-group label{font-weight:500;color:var(--text);font-size:14px}

.form-group input[type="text"],.form-group input[type="email"]{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:8px;font-size:14px;transition:border-color .2s ease,background .2s ease}

.form-group input[type="text"]:focus,.form-group input[type="email"]:focus{outline:none;border-color:var(--brand);background:var(--surface-2);box-shadow:0 0 0 3px rgba(209,29,29,0.12)}

.form-group input::placeholder{color:var(--muted);opacity:0.6}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* PAYMENT METHODS */
.payment-methods{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:12px}

.payment-method-card{cursor:pointer}

.payment-method-card input[type="radio"]{display:none}

.payment-method-card .method-content{padding:16px;border:2px solid var(--border);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:all .2s ease}

.payment-method-card:hover .method-content{border-color:var(--brand);background:var(--surface-2)}

.payment-method-card input[type="radio"]:checked + .method-content{border-color:var(--brand);background:linear-gradient(135deg,rgba(209,29,29,0.15),rgba(209,29,29,0.05));box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--brand)}

.method-icon{font-size:32px;line-height:1;height:40px;display:flex;align-items:center}

.method-title{font-weight:600;color:var(--text);font-size:13px;display:block}

.method-desc{font-size:12px;color:var(--muted)}

/* PAYMENT INFO BOXES */
.payment-info{margin-top:12px;padding:16px;border-radius:10px;background:var(--surface);border:1px solid var(--border)}

.payment-info h3{margin:0 0 12px 0;font-size:14px;font-weight:600;color:var(--text)}

.payment-info.hidden{display:none}

.bank-info{background:linear-gradient(135deg,rgba(209,29,29,0.08),rgba(209,29,29,0.03));border:1px solid rgba(209,29,29,0.2)}

.online-info{background:linear-gradient(135deg,rgba(100,200,255,0.08),rgba(100,200,255,0.03));border:1px solid rgba(100,200,255,0.2)}

.account-display{margin-bottom:12px;padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px}

.bank-detail{display:flex;justify-content:space-between;align-items:center;gap:12px}

.bank-label{font-size:13px;color:var(--muted);font-weight:500}

.bank-account{font-family:'Courier New', monospace;font-size:14px;font-weight:600;color:var(--brand);word-break:break-all}

.card-fields{display:flex;flex-direction:column;gap:12px}

.payment-instruction{font-size:12px;color:var(--muted);margin:12px 0 0 0;padding:8px;background:rgba(255,255,255,0.03);border-radius:6px;border-left:3px solid var(--brand)}

.warning{color:var(--accent);font-size:12px;padding:8px}

/* SUBMIT BUTTON */
.checkout-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 20px;background:var(--brand);color:var(--button-contrast);border:none;border-radius:10px;font-weight:600;font-size:15px;cursor:pointer;transition:all .2s ease;margin-top:12px}

.checkout-btn:hover{background:var(--brand-dark);transform:translateY(-2px);box-shadow:0 8px 16px rgba(209,29,29,0.3)}

.checkout-btn:active{transform:translateY(0)}

.total-amount{font-size:18px;font-weight:700}

/* EMPTY STATE */
.empty-state{text-align:center;padding:64px 32px;background:var(--panel);border:1px dashed var(--border);border-radius:12px;color:var(--muted)}

.empty-state p{font-size:18px;margin:0 0 24px 0}

.empty-state .btn{display:inline-block}

/* RESPONSIVE */
@media (max-width:968px){
  .checkout-container{grid-template-columns:1fr;gap:24px}
  .checkout-summary{position:static}
  .payment-methods{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr))}
}

@media (max-width:640px){
  .checkout-section{padding:16px 12px}
  .checkout-container{gap:16px}
  .checkout-summary,.payment-section{padding:16px}
  .form-row{grid-template-columns:1fr}
  .table-header,.table-row,.table-total{grid-template-columns:1fr;gap:8px}
  .col-price,.col-qty,.col-total{text-align:left}
  .payment-methods{grid-template-columns:1fr}
  .method-content{padding:12px}
}
::selection{background:rgba(209,29,29,0.3);color:#fff}
/* ===== BANNER GRID STYLES ===== */
.benefits-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 0;padding:0}
.benefit-item{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
.benefit-item svg{flex-shrink:0;color:var(--brand)}
.benefit-item span{font-size:14px;font-weight:500;color:var(--text);line-height:1.35}
.banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:28px 0;padding:0}
.banner-card{position:relative;color:#fff;padding:24px 20px;border-radius:18px;background-size:cover;background-position:center center;background-repeat:no-repeat;min-height:170px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start;box-shadow:0 18px 40px rgba(0,0,0,0.32);transition:transform .25s ease,box-shadow .25s ease}
.banner-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.20),rgba(0,0,0,0.72));z-index:0}
.banner-card span{position:relative;z-index:1;line-height:1.2}
.banner-card:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(0,0,0,0.42)}
img{display:block;max-width:100%}
.hero,.section-card,.auth-card,.product-card,.order-card,.table-card,.category-panel{position:relative;overflow:hidden;isolation:isolate}
.section-card{overflow:visible !important;position:relative;z-index:1}
.filters{position:relative;z-index:1}
.filters-actions{position:relative;z-index:1}
.filters button,.filters .btn{position:relative;z-index:1}
.hero::before,.section-card::before,.product-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.04),transparent 48%);pointer-events:none}
.page-shell::before{content:'';position:absolute;inset:auto 0 0 0;height:180px;pointer-events:none;background:radial-gradient(circle at top,rgba(160,160,160,0.16),transparent 70%);z-index:-1}
.product-card:hover,.order-card:hover,.category-card:hover,.inventory-item:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,0.38)}
.site-nav a:hover,.nav-user:hover,.btn:hover,button:hover,input[type="submit"]:hover,input[type="button"]:hover,.filters button:hover,.detail-form button:hover{box-shadow:0 16px 30px rgba(209,29,29,0.22)}
.info-pill,.status-pill,.eyebrow{box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.table-card table tr:hover td{background:rgba(209,29,29,0.06)}
.inventory-item{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.hero .oil-sheen{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)}

/* --- theme toggle icon + footer --- */
.theme-toggle{position:relative;flex-shrink:0;width:56px;height:30px;border-radius:5px;border:2px solid #050505;cursor:pointer;padding:0;background:linear-gradient(180deg,#2c2c2c,#131313);box-shadow:inset 0 2px 3px rgba(255,255,255,0.08),0 6px 14px rgba(0,0,0,0.5)}
.theme-toggle:focus{outline:2px solid rgba(255,255,255,0.9);outline-offset:2px}
.theme-toggle-pin{position:absolute;top:-5px;width:6px;height:6px;border-radius:50%;background:#8a8a8a;box-shadow:0 1px 2px rgba(0,0,0,0.7)}
.theme-toggle-pin:first-child{left:9px}
.theme-toggle-pin:last-child{right:9px}
.theme-toggle-slider{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:3px;background:linear-gradient(180deg,#ff5c5c,#a20909);box-shadow:0 0 6px rgba(255,60,60,0.65),inset 0 1px 1px rgba(255,255,255,0.3)}
body.theme-light .theme-toggle-slider{left:auto;right:3px;background:linear-gradient(180deg,#f7f7f7,#c9c9c9);box-shadow:0 0 6px rgba(255,255,255,0.5),inset 0 1px 1px rgba(0,0,0,0.15)}
.site-footer{position:relative;z-index:1;margin-top:32px;padding:28px 24px 20px;background:var(--nav);border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
.footer-col{display:flex;flex-direction:column;gap:8px;min-width:160px;max-width:320px}
.footer-col h4{margin:0 0 4px;color:var(--text);font-size:1.05rem}
.footer-col p{margin:0;color:var(--muted);line-height:1.5;font-size:0.9rem}
.footer-heading{margin:0 0 2px;color:var(--text);font-weight:700;font-size:0.9rem}
.footer-col a{color:var(--muted);text-decoration:none;font-size:0.9rem;transition:color .2s ease}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{width:100%;margin-top:12px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:0.8rem;text-align:center}
.btn-whatsapp{display:inline-flex;align-items:center;gap:6px;background:#25D366;color:#fff;padding:9px 16px;border-radius:6px;text-decoration:none;font-weight:600;font-size:0.9rem}
.btn-whatsapp:hover{background:#1ebe57}

/* --- registration role selection --- */
.role-fieldset{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin:4px 0}
.role-fieldset legend{padding:0 6px;color:var(--muted);font-size:0.85rem}
.role-option{display:flex;align-items:center;gap:8px;font-weight:400;margin:6px 0}
.role-option input{width:auto}
.role-note{color:var(--muted);font-size:0.8rem}

/* --- order list details --- */
.order-items-list{list-style:none;padding:0;margin:8px 0;color:var(--muted);font-size:0.9rem;display:flex;flex-direction:column;gap:4px}
.order-total{margin:8px 0 0;color:var(--text);font-weight:700}

/* --- nav logout form reset --- */
.nav-logout-form{margin:0;display:inline-flex}
.nav-logout-btn{background:transparent;border:none;color:var(--text);font-weight:600;cursor:pointer;padding:4px 0;font-size:inherit;font-family:inherit}
.nav-logout-btn:hover{color:var(--brand)}

/* --- Mobile fixes: header clipping + oversized hero text --- */
@media (max-width: 600px) {
  .site-header {
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 14px 18px !important;
  }
  .site-header .brand-block h1 {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
  }
  .site-nav {
    justify-content: flex-start !important;
    gap: 10px 16px !important;
    margin-top: 10px !important;
  }
  .hero-intro h2, .page-header h1 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }
  .hero-intro p, .page-subtitle {
    font-size: 0.92rem !important;
  }
}

@media (max-width: 600px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* --- Stable prev/next placeholders (product-to-product nav) --- */
.nav-arrow-placeholder {
  visibility: hidden;
}

/* --- Modal arrows pinned to viewport, independent of image size --- */
.modal-nav {
  position: fixed !important;
}

/* --- Mobile-only swipeable product image slider --- */
.mobile-gallery-slider { display: none; }

@media (max-width: 760px) {
  .product-gallery > .gallery-main,
  .product-gallery > .gallery-thumbs {
    display: none !important;
  }
  .mobile-gallery-slider {
    display: block;
    position: relative;
  }
  .mobile-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 10px;
    background: #050505;
  }
  .mobile-gallery-track::-webkit-scrollbar { display: none; }
  .mobile-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    width: 100%;
    height: 62vw;
    max-height: 340px;
    object-fit: contain;
    background: #050505;
  }
  .mobile-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }
  .mobile-gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background .2s ease;
  }
  .mobile-gallery-dot.active {
    background: var(--brand);
  }
}

@media (max-width: 760px) {
  .modal-nav {
    display: none !important;
  }
}

/* --- Lighter, more organic close button for the image modal --- */
.modal-close {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  width: 34px;
  height: 34px;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.modal-close:hover,
.modal-close:active {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.05);
}

/* --- Minimal, borderless modal controls (close + prev/next) --- */
.modal-close,
.modal-nav {
  background: transparent !important;
  border: none !important;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.6);
  width: auto;
  height: auto;
  padding: 6px;
}
.modal-close {
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}
.modal-nav {
  font-size: 42px;
  line-height: 1;
}
.modal-close:hover,
.modal-close:active {
  opacity: 0.75;
  transform: scale(1.05);
}
.modal-nav:hover,
.modal-nav:active {
  opacity: 0.75;
}

/* --- Bigger arrows, slightly inward-shifted controls --- */
.modal-close {
  top: calc(20px + 1%);
  right: calc(20px + 1%);
}
.modal-nav {
  font-size: 84px;
}
.modal-nav.prev {
  left: calc(20px + 1%);
}
.modal-nav.next {
  right: calc(20px + 1%);
}
/* BOXEQUIPMENT_MOBILE_NAV_V3 */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex: 0 0 38px;
}

.mobile-menu-toggle:focus {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.hamburger-lines i {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

@media (max-width: 700px) {
  .site-header {
    position: relative;
    overflow: visible;
    align-items: flex-start;
    padding: 7px 10px 8px;
    gap: 5px;
    min-height: 0;
    max-height: none;
    margin-bottom: 4px;
  }

  .brand-block {
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
  }

  .brand-block h1 {
    margin: 0 0 2px;
    font-size: 1rem;
    line-height: 1.05;
  }

  .brand-block .site-subtitle {
    font-size: .64rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  .hero-banner-solid .site-subtitle {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8rem;
    line-height: 1.35;
  }

  /*
    The nav is static in the closed state so the hamburger is positioned
    against the header itself, not against the nav content.
  */
  .site-header .site-nav {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: auto;
    min-width: 0;
    padding-right: 44px;
  }

  .site-header .site-nav > .mobile-quick-link {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 5px 4px;
    font-size: .68rem;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }

  .site-header .site-nav > a:not(.mobile-quick-link),
  .site-header .site-nav > .nav-user,
  .site-header .site-nav > .nav-logout-form,
  .site-header .site-nav > .theme-toggle {
    display: none;
  }

  /*
    Closed state: bottom-right corner of the header.
  */
  .site-header .site-nav > .mobile-menu-toggle {
    display: flex;
    position: absolute;
    right: 10px;
    bottom: 6px;
    z-index: 2147483001;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
  }

  /*
    Open state: preserve the button position and place the panel below it.
    The panel top-right corner aligns with the hamburger button.
  */
  .site-header .site-nav.menu-open {
    position: absolute;
    top: calc(100% + 8px);
    right: 10px;
    z-index: 2147483000;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    width: min(260px, 72vw);
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px 0 8px 8px;
    box-shadow: 0 14px 28px rgba(0,0,0,.42);
    box-sizing: border-box;
  }

  /*
    The toggle remains at the header bottom-right while the panel is open.
  */
  .site-header .site-nav.menu-open > .mobile-menu-toggle {
    position: absolute;
    top: -42px;
    right: 0;
    bottom: auto;
  }

  /*
    Dark/light switch is the first item inside the panel, to the left
    of the hamburger control.
  */
  .site-header .site-nav.menu-open > .theme-toggle {
    display: flex;
    order: -1;
    align-self: flex-start;
    width: auto;
    margin: 0 0 6px;
    transform: scale(.86);
    transform-origin: left center;
  }

  .site-header .site-nav.menu-open > .mobile-quick-link,
  .site-header .site-nav.menu-open > a:not(.mobile-quick-link),
  .site-header .site-nav.menu-open > .nav-user,
  .site-header .site-nav.menu-open > .nav-logout-form {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    color: #fff;
    background: rgba(255,255,255,.08);
    border-radius: 5px;
    box-sizing: border-box;
  }

  body.theme-light .site-header .site-nav.menu-open > .mobile-quick-link,
  body.theme-light .site-header .site-nav.menu-open > a:not(.mobile-quick-link),
  body.theme-light .site-header .site-nav.menu-open > .nav-user,
  body.theme-light .site-header .site-nav.menu-open > .nav-logout-form {
    color: #111;
    background: rgba(0,0,0,.08);
  }

  .site-header .site-nav.menu-open > .nav-logout-form {
    margin: 0;
  }

  .site-header .site-nav.menu-open > .nav-logout-form button {
    width: 100%;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
  }
}

@media (min-width: 701px) {
  .site-header .site-nav > .mobile-menu-toggle {
    display: none;
  }
}

/* BOXEQUIPMENT_COMPACT_THEME_TOGGLE_V12 - smaller switch with sun/moon glyphs */
.theme-toggle{
  width:44px !important;
  height:24px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  background:linear-gradient(180deg,#2c2c2c,#131313) !important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,0.08),0 4px 10px rgba(0,0,0,0.45) !important;
}
.theme-toggle-pin{display:none !important}
.theme-toggle::before,
.theme-toggle::after{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  line-height:1;
  pointer-events:none;
}
.theme-toggle::before{content:"\2600";left:5px;opacity:.9}
.theme-toggle::after{content:"\263D";right:5px;opacity:.65}
.theme-toggle-slider{
  top:2px !important;
  left:2px !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  z-index:1;
}
body.theme-light .theme-toggle-slider{left:auto !important;right:2px !important}

/* BOXEQUIPMENT_MOBILE_MENU_LAYER_FIX_V1 */
@media (max-width: 700px) {
  .site-header {
    position: relative !important;
    z-index: 2147483000 !important;
    isolation: isolate;
    overflow: visible !important;
  }

  .site-header .site-nav {
    z-index: 2147483001 !important;
  }

  .site-header .site-nav.menu-open {
    z-index: 2147483002 !important;
    opacity: 1 !important;
    background: #151515 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 16px 35px rgba(0,0,0,.65) !important;
  }

  .site-header .site-nav.menu-open > .mobile-quick-link,
  .site-header .site-nav.menu-open > a:not(.mobile-quick-link),
  .site-header .site-nav.menu-open > .nav-user,
  .site-header .site-nav.menu-open > .nav-logout-form {
    position: relative;
    z-index: 2147483003;
    opacity: 1 !important;
    color: #fff !important;
    background: #292929 !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,.12);
  }

  .site-header .site-nav.menu-open > .mobile-quick-link:hover,
  .site-header .site-nav.menu-open > a:not(.mobile-quick-link):hover,
  .site-header .site-nav.menu-open > .nav-logout-form:hover {
    background: #3a3a3a !important;
  }

  body.theme-light .site-header .site-nav.menu-open {
    background: #fff !important;
    color: #111 !important;
  }

  body.theme-light .site-header .site-nav.menu-open > .mobile-quick-link,
  body.theme-light .site-header .site-nav.menu-open > a:not(.mobile-quick-link),
  body.theme-light .site-header .site-nav.menu-open > .nav-user,
  body.theme-light .site-header .site-nav.menu-open > .nav-logout-form {
    color: #111 !important;
    background: #f1f1f1 !important;
    border-color: rgba(0,0,0,.14);
  }

  .site-header .site-nav.menu-open > .theme-toggle {
    position: relative;
    z-index: 2147483004;
  }

  .site-header .site-nav.menu-open > .mobile-menu-toggle {
    position: absolute;
    z-index: 2147483005;
  }
}

/* BOXEQUIPMENT_MOBILE_MENU_FONT_FIX_V1 */
@media (max-width: 700px) {
  .site-header .site-nav.menu-open > .mobile-quick-link,
  .site-header .site-nav.menu-open > a:not(.mobile-quick-link),
  .site-header .site-nav.menu-open > .nav-user,
  .site-header .site-nav.menu-open > .nav-logout-form,
  .site-header .site-nav.menu-open > .nav-logout-form button {
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }

  .site-header .site-nav.menu-open > .mobile-quick-link,
  .site-header .site-nav.menu-open > a:not(.mobile-quick-link),
  .site-header .site-nav.menu-open > .nav-user,
  .site-header .site-nav.menu-open > .nav-logout-form {
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  .site-header .site-nav.menu-open > .nav-logout-form button {
    min-height: 36px !important;
    text-align: left !important;
  }
}

/* BOXEQUIPMENT_PRODUCT_IMAGE_CENTER_V1 */
@media (max-width: 700px) {
    .product-card .product-card-link {
        width: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }

    .product-card .product-card-link img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* BOXEQUIPMENT_CART_TABLE_MOBILE_V1 - cart table becomes stacked cards on phones */
@media (max-width: 700px){
  .table-card{overflow-x:visible;border:none;background:transparent}
  .table-card table,
  .table-card thead,
  .table-card tbody,
  .table-card tr,
  .table-card td{display:block;width:100%}
  .table-card thead{position:absolute;left:-9999px;top:-9999px}
  .table-card tbody tr{
    margin-bottom:12px;
    padding:6px 0;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    background:var(--surface-2);
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
  }
  .table-card td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    text-align:right;
    white-space:normal;
    word-break:break-word;
  }
  .table-card tr td:last-child{border-bottom:none}
  .table-card td::before{
    content:attr(data-label);
    flex:0 0 auto;
    font-weight:700;
    color:var(--muted);
    text-align:left;
    margin-right:auto;
  }
  .table-card td[data-label="\u10de\u10e0\u10dd\u10d3\u10e3\u10e5\u10e2\u10d8"]{text-align:right}
  .table-card td[data-label="\u10de\u10e0\u10dd\u10d3\u10e3\u10e5\u10e2\u10d8"] a{text-align:right}
  .table-card td[data-label="\u10db\u10dd\u10e5\u10db\u10d4\u10d3\u10d4\u10d1\u10d0"]{justify-content:flex-end}
  .table-card td[data-label="\u10db\u10dd\u10e5\u10db\u10d4\u10d3\u10d4\u10d1\u10d0"] form{margin:0}
  .table-card td[data-label="\u10db\u10dd\u10e5\u10db\u10d4\u10d3\u10d4\u10d1\u10d0"] .btn{padding:8px 14px;font-size:0.85rem}
}


/* BOXEQUIPMENT_ONLINE_PAYMENT_DEMO_V1 - demo online card payment fields */
.demo-mode-notice{
  background:rgba(209,29,29,0.08);
  border:1px solid rgba(209,29,29,0.35);
  border-radius:8px;
  padding:10px 14px;
  margin-bottom:6px;
}
.demo-mode-notice strong{color:var(--brand);font-size:13px}
.demo-mode-notice p{margin:4px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
.card-fields-row{display:flex;gap:12px}
.card-fields-row label{flex:1}
@media (max-width:480px){
  .card-fields-row{flex-direction:column;gap:0}
}


/* BOXEQUIPMENT_LANGUAGE_SWITCH_V1 */
.language-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,0.04);
}
.language-switch-link{
  padding:5px 8px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none;
}
.language-switch-link:hover{
  color:#fff !important;
  background:rgba(255,255,255,0.08);
}
.language-switch-link.active{
  color:#fff !important;
  background:var(--brand);
}
body.theme-light .language-switch{
  border-color:rgba(0,0,0,0.15);
  background:rgba(0,0,0,0.03);
}
body.theme-light .language-switch-link{
  color:rgba(0,0,0,0.55) !important;
}
body.theme-light .language-switch-link:hover{
  color:#000 !important;
  background:rgba(0,0,0,0.06);
}
body.theme-light .language-switch-link.active{
  color:#fff !important;
}
@media (max-width:700px){
  .site-header .site-nav > .language-switch{display:none}
  .site-header .site-nav.menu-open > .language-switch{
    display:flex !important;
    order:-1;
    align-self:flex-start;
    width:auto;
    margin:0 0 6px;
  }
}


/* CATEGORY_ICON_TILE_BG_MARKER */
.category-icon-tile.has-image{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;isolation:isolate;background-color:#161010}
.category-icon-tile.has-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.35) 45%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:0;border-radius:9px}
.category-icon-tile.has-image .category-name{position:absolute;top:8px;left:8px;right:8px;z-index:1;color:#fff;text-align:left;text-shadow:0 2px 6px rgba(0,0,0,0.85),0 1px 3px rgba(0,0,0,0.9)}