:root{
  --brand:#E23744; --brand-deep:#B91C2B; --brand-tint:#FDEBEC;
  --accent:#FF7A1A; --accent-deep:#E0650A; --accent-tint:#FFF1E5;
  --gold:#FFB300;
  --ink:#1A1A1A; --ink-soft:#6B6B6B; --ink-faint:#9B9B9B;
  --bg:#EDEEF1; --card:#FFFFFF; --card-alt:#FAFAFA;
  --green:#1DB954; --green-tint:#E7F8EE;
  --line:#EAEAEC;
  --panel-line:#DADBE1; /* a clearly-visible border, used on framed panels/cards specifically — --line is too faint for that job */
  --panel-dark:#181818; /* fixed dark background — never flips with theme, so white text on it always stays readable */
  --shadow:0 18px 36px -16px rgba(20,20,20,0.18);
  --shadow-sm:0 10px 26px -10px rgba(20,20,20,0.16);
}
:root[data-theme="dark"]{
  --ink:#F0F0F0; --ink-soft:#B8B8B8; --ink-faint:#8A8A8A;
  --bg:#0C0C0E; --card:#1C1C21; --card-alt:#222226;
  --brand-tint:#3A1418; --accent-tint:#3A2410;
  --green-tint:#123322;
  --line:rgba(255,255,255,0.08);
  --panel-line:rgba(255,255,255,0.14);
  --panel-dark:#0A0A0B;
  --shadow:0 18px 36px -16px rgba(0,0,0,0.6);
  --shadow-sm:0 10px 26px -10px rgba(0,0,0,0.45);
}

*{box-sizing:border-box; margin:0; padding:0; min-width:0;}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
/* NOTE: deliberately NOT setting overflow-x:hidden on html/body. Any
   ancestor with overflow other than "visible" disables position:sticky
   for every descendant (the header's sticky top bar relies on it), and on
   Safari/iPadOS this combination is also known to cause broken repaints
   further down the page (reported as "the footer disappears on tablet").
   The actual overflow sources are fixed at the element level instead
   (min-width:0, word-break, flex-shrink:0 on nav items, etc.) below. */
html, body{max-width:100%;}
body{font-family:'Vazirmatn',sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; transition:background .2s, color .2s;}
a{color:inherit; text-decoration:none;}
.ico{vertical-align:middle; flex-shrink:0;}
.wrap{max-width:1280px; margin:0 auto; padding:0 24px; width:100%;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
/* Any long, unbreakable text (model numbers like "ST2000DM008-2FR102",
   long product titles with no good break point) must wrap inside its box
   instead of forcing the box — and the whole grid track — to grow wider
   than the viewport. This is the root cause of the overlapping/overflowing
   card text seen on narrow phones. */
h1, h2, h3, h4, h5, h6, p, span, a, li, td, button, input, .price, .spec-chip{
  overflow-wrap:break-word; word-break:break-word;
}

/* Consistent heading rhythm — a bit tighter tracking on large weights gives
   headings a more confident, "designed" feel instead of default browser
   spacing, without changing any of the copy or layout. */
h1, h2, h3, h4, h5, h6{letter-spacing:-0.01em;}
.section-top h3, .card-body h4{letter-spacing:-0.005em;}

/* ===== Utility bar ===== */
.util-bar{background:var(--panel-dark); color:rgba(255,255,255,0.8); font-size:0.8rem;}
.util-row{display:flex; justify-content:space-between; align-items:center; padding:7px 16px; max-width:1280px; margin:0 auto; flex-wrap:wrap; gap:8px;}
.util-left{display:flex; gap:20px; min-width:0;}
.util-item{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.util-right{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.lang-switch{display:flex; gap:8px; font-weight:600;}
.lang-switch span{cursor:pointer; opacity:0.6;}
.lang-switch span.active{opacity:1; color:var(--accent);}

/* ===== Header ===== */
header{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:70; max-width:100%;}
.header-row{display:flex; align-items:center; gap:18px; padding:14px 16px; max-width:1280px; margin:0 auto; flex-wrap:wrap;}
.logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.25rem; color:var(--ink); flex-shrink:0;}
.logo-mark{width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:1rem;}
.header-search{flex:1; display:flex; align-items:center; gap:10px; background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:11px 16px;}
.header-search:focus-within{border-color:var(--brand);}
.header-search input{border:none; outline:none; background:none; font-family:inherit; font-size:0.92rem; flex:1; color:var(--ink);}
.header-search svg{opacity:0.5; flex-shrink:0;}
.header-search button{background:var(--brand); color:#fff; border:none; border-radius:8px; padding:7px 16px; font-weight:700; font-size:0.82rem;}
.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.header-phone{text-align:right; padding:0 6px;}
.header-phone .label{font-size:0.7rem; color:var(--ink-faint);}
.header-phone .num{font-weight:800; color:var(--ink); font-size:0.95rem;}
.icon-btn{position:relative; width:40px; height:40px; border-radius:10px; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0; font-size:1rem;}
.icon-btn .count{position:absolute; top:-5px; left:-5px; background:var(--brand); color:#fff; font-size:0.62rem; font-weight:800; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

/* Category bar under header */
.cat-nav{background:var(--brand); position:relative; max-width:100%;}
/* flex-wrap:nowrap (default) + overflow-x:auto only works as a horizontal
   scroller if items are NOT allowed to shrink. Without flex-shrink:0, a
   narrow viewport shrinks every .cat-item's box while its text stays
   white-space:nowrap — the text can't shrink with it, so labels spill
   out of their own squeezed box and overlap their neighbors. */
.cat-row{display:flex; flex-wrap:nowrap; gap:2px; padding:0 16px; max-width:1280px; margin:0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.cat-row::-webkit-scrollbar{display:none;}
.cat-item{flex-shrink:0; padding:13px 16px; font-size:0.86rem; font-weight:700; color:rgba(255,255,255,0.85); white-space:nowrap; border-bottom:3px solid transparent; display:flex; align-items:center; gap:6px;}
.cat-item.active{color:#fff; border-color:#fff;}
.cat-item:hover{color:#fff; background:rgba(255,255,255,0.08);}
.cat-item.mega-toggle{background:var(--brand-deep);}

/* ===== Breadcrumb ===== */
.breadcrumb{padding:16px 0; font-size:0.83rem; color:var(--ink-faint); display:flex; gap:8px; align-items:center;}
.breadcrumb a:hover{color:var(--brand);}
.breadcrumb .sep{opacity:0.5;}
.breadcrumb .current{color:var(--ink); font-weight:600;}

/* ===== Homepage layout: sidebar + main ===== */
.home-layout{display:grid; grid-template-columns:270px 1fr; gap:18px; padding:20px 0; align-items:stretch;}
.side-cats{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;}
.side-cats h5{padding:15px 18px; font-size:0.88rem; font-weight:800; background:var(--card-alt); border-bottom:1px solid var(--line);}
.side-cat-item{flex:1; display:flex; align-items:center; justify-content:space-between; padding:12px 18px; font-size:0.85rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line);}
.side-cat-item:last-child{border-bottom:none;}
.side-cat-item:hover{background:var(--brand-tint); color:var(--brand-deep);}
.side-cat-item .arrow{opacity:0.4; font-size:0.75rem;}

/* ===== Hero carousel ===== */
.carousel{position:relative; border-radius:16px; overflow:hidden; height:280px;}
.carousel-track{display:flex; height:100%; transition:transform .5s ease;}
.carousel-slide{min-width:100%; height:100%; display:flex; align-items:center; padding:0 44px; position:relative; overflow:hidden;}
.carousel-slide::before{content:""; position:absolute; left:-6%; top:-30%; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);}
.slide-content{position:relative; z-index:1; color:#fff;}
.slide-content .tag{display:inline-block; background:rgba(255,255,255,0.2); font-size:0.78rem; font-weight:700; padding:5px 14px; border-radius:999px; margin-bottom:12px;}
.slide-content h2{font-size:1.7rem; font-weight:800; max-width:420px; line-height:1.4;}
.slide-content p{margin-top:8px; color:rgba(255,255,255,0.85); font-size:0.9rem; max-width:380px;}
.slide-content .slide-btn{display:inline-block; margin-top:14px; background:#fff; color:var(--brand-deep); font-weight:800; font-size:0.84rem; padding:9px 22px; border-radius:9px;}
.slide-content .slide-btn:hover{background:rgba(255,255,255,0.88);}

/* ===== Carousel slide themes (admin-selectable, see Pages/Slides/Admin) =====
   Each one reuses the site's own existing brand tokens rather than
   inventing new arbitrary colors, so a promo slide never looks like it
   wandered in from a different site. */
.slide-theme-brand{background:linear-gradient(120deg, var(--brand-deep) 0%, var(--brand) 60%, var(--accent) 130%);}
/* Steel — brushed, mechanical; for "new arrival / performance" drives. A
   thin diagonal seam stands in for a platter edge instead of the brand
   theme's soft radial glow. */
.slide-theme-steel{background:linear-gradient(135deg, #1B2430 0%, #2E3F52 65%, #3E5872 100%);}
.slide-theme-steel::before{background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%); width:140%; height:220%; left:-20%; top:-60%; border-radius:0;}
/* Gold — a flash-sale / best-deal slide; built from the same --gold token
   already used for star ratings elsewhere, not a new accent. */
.slide-theme-gold{background:linear-gradient(120deg, #1A1410 0%, #4A3410 55%, var(--gold) 140%);}
/* Mint — trust/warranty messaging, echoing the same --green used on the
   "tested" condition badge and checkmarks across the site. */
.slide-theme-mint{background:linear-gradient(120deg, #0D3B2E 0%, #12543F 55%, var(--green) 140%);}
/* Duo — a bold two-tone poster split (brand/accent meeting at a hard
   diagonal, not a soft blend) for a loud flash-sale banner that still
   only uses the site's own two warm brand colors. */
.slide-theme-duo{background:linear-gradient(100deg, var(--brand) 0%, var(--brand) 52%, var(--accent) 52%, var(--accent) 100%);}
.slide-theme-duo::before{background:linear-gradient(100deg, transparent 0%, transparent 50.4%, rgba(255,255,255,0.55) 51%, transparent 51.6%, transparent 100%); width:160%; height:240%; left:-30%; top:-70%; border-radius:0;}
/* Mono — deliberately unornamented near-black, for a premium/service
   message (data recovery, warranty) where restraint reads as more
   credible than another colorful sale banner. No glow/sheen pseudo-
   element at all — the contrast with the other themes IS the design. */
.slide-theme-mono{background:linear-gradient(135deg, #050505 0%, #1C1C1E 60%, #2A2A2D 100%);}
.slide-theme-mono::before{content:none;}
.slide-theme-photo{background:var(--panel-dark);}
.slide-bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.slide-bg-overlay{position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(10,10,12,0.78) 0%, rgba(10,10,12,0.35) 55%, rgba(10,10,12,0.15) 100%);}
[dir="ltr"] .slide-bg-overlay{background:linear-gradient(270deg, rgba(10,10,12,0.78) 0%, rgba(10,10,12,0.35) 55%, rgba(10,10,12,0.15) 100%);}
.carousel-dots{position:absolute; bottom:16px; right:50%; transform:translateX(50%); display:flex; gap:7px; z-index:2;}
.carousel-dots span{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer;}
.carousel-dots span.active{background:#fff; width:20px; border-radius:4px;}
.carousel-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.2); color:#fff; display:flex; align-items:center; justify-content:center; z-index:2; border:none; font-size:1rem;}
.carousel-arrow:hover{background:rgba(255,255,255,0.35);}
.carousel-arrow.prev{right:16px;}
.carousel-arrow.next{left:16px;}

/* ===== Flash deal / countdown ===== */
.deal-banner{background:var(--panel-dark); border-radius:16px; padding:20px 26px; display:flex; justify-content:space-between; align-items:center; margin-top:16px; flex-wrap:wrap; gap:14px;}
.deal-left{display:flex; align-items:center; gap:14px; color:#fff;}
.deal-left .ic{font-size:1.6rem;}
.deal-left h4{font-size:1.05rem; font-weight:800;}
.deal-left p{font-size:0.8rem; color:rgba(255,255,255,0.6);}
.countdown{display:flex; gap:8px;}
.cd-box{background:rgba(255,255,255,0.12); border-radius:8px; padding:8px 12px; text-align:center; min-width:48px;}
.cd-box .n{font-size:1.15rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;}
.cd-box .l{font-size:0.62rem; color:rgba(255,255,255,0.55);}

/* ===== Product rows ===== */
.section{padding-block:32px;} /* block-only, so .wrap.section keeps its side padding and lines up with the header/hero */

/* A framed content panel — gives a section its own visible boundary
   (background + border + shadow) instead of floating directly on the
   page's flat --bg, so adjacent sections (Deals / Best Sellers / Newest...)
   read as distinct blocks rather than one continuous, undifferentiated
   scroll of the same color. */
.section-panel{
  background:var(--card);
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:26px 24px;
  box-shadow:var(--shadow-sm);
}
@media (max-width:640px){
  .section-panel{padding:20px 16px; border-radius:16px;}
}
.section-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.section-top-left{display:flex; align-items:center; gap:10px;}
.section-top h3{font-size:1.2rem; font-weight:800; color:var(--ink);}
.section-badge{font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:999px;}
.section-badge.hot{background:var(--brand-tint); color:var(--brand-deep);}
.section-badge.new{background:var(--green-tint); color:var(--green);}

.product-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 250px)); justify-content:center; gap:14px;}
.product-grid.grid-3{grid-template-columns:repeat(3, 1fr);}
.product-grid.grid-4{grid-template-columns:repeat(4, 1fr);}
/* Grid items default to a content-based minimum size (min-width:auto), so a
   long unbreakable title/SKU can force its track past minmax()'s own max
   and overlap neighboring cards. min-width:0 lets the card shrink to its
   track's actual width and rely on word-break instead. */
.product-card{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s; min-width:0; max-width:100%;}
.product-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.card-media{position:relative; height:120px; display:flex; align-items:center; justify-content:center; background:var(--card-alt); overflow:hidden;}
.card-media .product-photo{width:100%; height:100%; object-fit:contain; padding:12px; box-sizing:border-box;}
.gallery-main{overflow:hidden;}
.discount-badge{position:absolute; top:8px; right:8px; background:var(--brand); color:#fff; font-size:0.66rem; font-weight:800; padding:3px 8px; border-radius:6px;}
.condition-badge{position:absolute; top:8px; left:8px; font-size:0.62rem; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--green-tint); color:var(--green);}
.condition-badge.new{background:var(--accent-tint); color:var(--accent-deep);}

.drive-icon{position:relative; width:48px; height:48px;}
.drive-icon.lg{width:110px; height:110px;}
.drive-icon .platter{width:100%; height:100%; border-radius:50%; background:linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px -6px rgba(226,55,68,0.35);}
.drive-icon .platter::after{content:""; width:36%; height:36%; border-radius:50%; background:var(--accent);}
.drive-icon.ssd .platter{border-radius:14px;}
.drive-icon.ssd .platter::after{border-radius:4px; width:55%; height:30%;}
.drive-icon .check-badge{position:absolute; bottom:-3px; left:-3px; width:17px; height:17px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.58rem; font-weight:800; border:2px solid var(--card);}
.drive-icon.lg .check-badge{width:30px; height:30px; font-size:0.9rem;}

.card-body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1; min-width:0;}
.card-body h4{font-size:0.84rem; font-weight:700; color:var(--ink); line-height:1.4; overflow-wrap:break-word; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.star-row{display:flex; align-items:center; gap:4px; font-size:0.72rem; color:var(--ink-faint);}
.star-row .stars{color:var(--gold); letter-spacing:1px;}
.spec-row{display:flex; gap:5px; flex-wrap:wrap;}
.spec-chip{font-size:0.64rem; font-weight:600; color:var(--ink-soft); background:var(--bg); border:1px solid var(--line); padding:2px 7px; border-radius:999px;}
.price-block{margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
.old-price{font-size:0.72rem; color:var(--ink-faint); text-decoration:line-through;}
.price-row-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:2px; gap:6px; flex-wrap:wrap;}
.price{font-size:1rem; font-weight:800; color:var(--ink); white-space:nowrap;}
.order-btn{background:var(--accent); color:#fff; font-weight:700; font-size:0.74rem; padding:7px 13px; border-radius:8px; transition:background .15s; display:inline-block; border:none;}
.order-btn:hover{background:var(--accent-deep);}
.order-btn.lg{font-size:0.92rem; padding:13px 28px; border-radius:10px;}
.btn-outline{border:2px solid var(--brand); color:var(--brand); font-weight:700; font-size:0.83rem; padding:9px 20px; border-radius:10px; display:inline-block; background:none;}
.btn-outline:hover{background:var(--brand); color:#fff;}

/* ===== Trust strip ===== */
.trust-strip{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; margin-top:8px;}
.trust-inner{display:grid; grid-template-columns:repeat(4, 1fr);}
.trust-cell{display:flex; align-items:center; gap:10px; padding:16px 20px; border-left:1px solid var(--line);}
.trust-cell:last-child{border-left:none;}
.trust-cell .ic{font-size:1.3rem;}
.trust-cell h5{font-size:0.82rem; font-weight:700; color:var(--ink);}
.trust-cell p{font-size:0.72rem; color:var(--ink-faint);}

/* ===== Recovery cross-sell ===== */
.recovery-strip{background:linear-gradient(120deg, var(--panel-dark) 0%, #2a2a2e 100%); border-radius:16px; padding:28px 32px; color:#fff; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
.recovery-strip h4{font-size:1.05rem; font-weight:800; max-width:420px;}
.recovery-strip p{color:rgba(255,255,255,0.65); font-size:0.85rem; margin-top:6px; max-width:420px;}

/* ===== Shop / listing layout ===== */
.shop-layout{display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:start;}
.filter-box{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; padding:20px;}
.filter-box h5{font-size:0.88rem; font-weight:800; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.filter-group{margin-bottom:22px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group h6{font-size:0.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:10px;}
.filter-toggle{display:none; width:100%; align-items:center; justify-content:space-between; gap:10px; background:none; border:none; padding:0; font-family:inherit; font-size:0.88rem; font-weight:800; color:var(--ink); cursor:pointer;}
.filter-toggle-label{display:flex; align-items:center; gap:8px;}
.filter-toggle-dot{width:8px; height:8px; border-radius:50%; background:var(--brand); flex-shrink:0;}
.filter-toggle .ico:last-child{transition:transform .2s; flex-shrink:0;}
.filter-box.open .filter-toggle .ico:last-child{transform:rotate(180deg);}
.check-row{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:0.84rem; color:var(--ink);}
.check-row input{accent-color:var(--brand); width:16px; height:16px;}
.price-inputs{display:flex; gap:8px; align-items:center;}
.price-inputs input{width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:0.8rem; background:var(--card); color:var(--ink);}
/* .price-field is used on the filter sidebar's search box and capacity
   <select> — these had no rule at all, so they rendered as bare,
   unstyled browser-default inputs (no border radius, no padding, sitting
   directly on the page background with no visible "form" to them). */
.price-field{width:100%; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-family:inherit; font-size:0.85rem; background:var(--card); color:var(--ink);}
.price-field:focus{outline:none; border-color:var(--brand);}
.cat-count{color:var(--ink-faint); font-size:0.78rem; font-weight:500;}
.active-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--brand-tint); color:var(--brand-deep); border:1px solid transparent; font-size:0.78rem; font-weight:700; padding:6px 12px; border-radius:999px;}
.chip:hover{background:var(--brand); color:#fff;}
.result-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.result-count{font-size:0.84rem; color:var(--ink-soft);}
.result-count b{color:var(--ink);}
.sort-select{border:1px solid var(--line); border-radius:9px; padding:8px 14px; font-family:inherit; font-size:0.83rem; background:var(--card); color:var(--ink);}
.pagination{display:flex; justify-content:center; gap:8px; margin-top:32px;}
.page-btn{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; font-size:0.83rem; font-weight:600; color:var(--ink-soft);}
.page-btn.active{background:var(--brand); color:#fff; border-color:var(--brand);}

/* ===== Product detail ===== */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch;}
/* The gallery column is wrapped in the same .section-panel as the info
   column so the two read as a matched pair of cards, not a framed card
   next to a loose image floating on the bare page background. Stretching
   the grid row (above) plus flex:1 on .gallery-main lets the photo area
   grow to fill whatever extra height the info column's content needs,
   instead of leaving dead grey space below the thumbnails. */
.gallery-panel{display:flex; flex-direction:column;}
.gallery-main{background:var(--card-alt); border:1px solid var(--panel-line); border-radius:16px; flex:1; min-height:320px; display:flex; align-items:center; justify-content:center; position:relative; cursor:zoom-in;}
.gallery-main img{transition:transform .25s ease;}
.gallery-main.zoomed{cursor:zoom-out;}
.gallery-main.zoomed img{transform:scale(1.55);}
.gallery-count{position:absolute; bottom:12px; inset-inline-end:12px; background:rgba(0,0,0,0.6); color:#fff; font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:999px; font-variant-numeric:tabular-nums;}
.gallery-zoom-hint{position:absolute; top:12px; inset-inline-start:12px; display:flex; align-items:center; gap:5px; background:rgba(0,0,0,0.55); color:#fff; font-size:0.7rem; font-weight:600; padding:4px 10px; border-radius:999px; opacity:0; transition:opacity .15s;}
.gallery-main:hover .gallery-zoom-hint{opacity:1;}
.gallery-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.thumb{width:58px; height:58px; border-radius:10px; background:var(--card-alt); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, transform .15s; flex-shrink:0;}
.thumb:hover{transform:translateY(-2px);}
.thumb.active{border-color:var(--brand);}
.pd-badges{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.pd-title{font-size:1.35rem; font-weight:800; color:var(--ink); margin-bottom:10px;}
.pd-rating{display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:0.86rem; color:var(--ink-soft);}
.pd-rating .stars{color:var(--gold); letter-spacing:2px;}
.pd-price-row{display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.pd-old-price{font-size:1.1rem; color:var(--ink-faint); text-decoration:line-through;}
.pd-price{font-size:1.9rem; font-weight:800; color:var(--ink);}
.pd-discount-tag{background:var(--brand); color:#fff; font-size:0.78rem; font-weight:800; padding:4px 10px; border-radius:6px;}
.pd-avail{font-size:0.86rem; color:var(--ink-soft); margin:14px 0 0; display:flex; align-items:center; gap:8px;}

/* Honest trust reinforcement (tested / warranty / cash-on-delivery) right
   where the buyer is deciding — every claim here is a real, already-stated
   policy, never a fabricated rating or sales count. */
.pd-trust-mini{display:flex; gap:14px; flex-wrap:wrap; margin:16px 0; padding:12px 14px; background:var(--card-alt); border:1px solid var(--line); border-radius:10px;}
.pd-trust-item{display:flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600; color:var(--ink-soft);}
.pd-trust-item .ico{color:var(--green); flex-shrink:0;}

/* Quick-glance specs at the decision point; the full table (plus the
   description) lives in the Details tab below for anyone who wants more. */
.key-specs{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:20px;}
.key-spec{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:12px 8px; background:var(--card-alt); border:1px solid var(--line); border-radius:10px;}
.key-spec .ks-ic{color:var(--brand); margin-bottom:2px;}
.key-spec .ks-label{font-size:0.68rem; color:var(--ink-faint);}
.key-spec .ks-value{font-size:0.84rem; font-weight:700; color:var(--ink);}

/* Mobile/tablet sticky buy bar — see .pd-actions IntersectionObserver in
   Details.cshtml. Fully disabled (display:none) above 900px, where the
   real buy box is always on screen already. */
.pd-sticky-bar{position:fixed; bottom:0; inset-inline:0; z-index:60; background:var(--card); border-top:1px solid var(--panel-line); box-shadow:0 -8px 24px -12px rgba(0,0,0,0.3); padding:10px 16px; display:none; align-items:center; justify-content:space-between; gap:12px; transform:translateY(100%); transition:transform .25s ease;}
.pd-sticky-price{font-size:1.1rem; font-weight:800; color:var(--ink);}
@media (max-width:900px){
  .pd-sticky-bar{display:flex;}
  .pd-sticky-bar.show{transform:translateY(0);}
}
.spec-table{width:100%; border-collapse:collapse; margin-bottom:22px; font-size:0.87rem;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:10px 0;}
.spec-table td:first-child{color:var(--ink-faint); width:40%;}
.spec-table td:last-child{font-weight:600; color:var(--ink);}
.qty-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.qty-box{display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.qty-box button{width:34px; height:34px; background:var(--card-alt); border:none; font-size:1.05rem; color:var(--ink);}
.qty-box span, .qty-box .qty-val{width:38px; text-align:center; font-weight:700; color:var(--ink);}
.pd-actions{display:flex; gap:12px; flex-wrap:wrap;}
.tabs{display:flex; gap:24px; border-bottom:1px solid var(--line); margin:44px 0 20px;}
.tab{padding-bottom:14px; font-weight:700; font-size:0.9rem; color:var(--ink-faint); border-bottom:2px solid transparent; cursor:pointer;}
.tab.active{color:var(--ink); border-color:var(--brand);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* Reviews */
.review-summary{display:flex; align-items:center; gap:20px; background:var(--card); border:1px solid var(--panel-line); border-radius:14px; padding:22px; margin-bottom:20px;}
.review-summary .big-score{font-size:2.4rem; font-weight:800; color:var(--ink);}
.review-summary .stars{color:var(--gold); font-size:1rem; letter-spacing:2px;}
.review-empty{text-align:center; padding:36px 16px; color:var(--ink-soft);}
.review-empty .ic{font-size:1.8rem; margin-bottom:10px;}

/* ===== Cart ===== */
.cart-steps{display:flex; gap:0; margin-bottom:28px; align-items:center;}
.cart-step{display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-size:0.85rem; font-weight:700;}
.cart-step .num{width:27px; height:27px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:0.78rem;}
.cart-step.active{color:var(--ink);}
.cart-step.active .num{background:var(--brand); color:#fff; border-color:var(--brand);}
.step-divider{width:46px; height:1px; background:var(--line); margin:0 14px;}

.cart-layout{display:grid; grid-template-columns:1fr 330px; gap:20px; align-items:start;}
.cart-list{display:flex; flex-direction:column; gap:12px;}
.cart-item-card{background:var(--card); border:1px solid var(--panel-line); border-radius:12px; padding:15px; display:flex; align-items:center; gap:14px;}
.cart-item-card .drive-icon{flex-shrink:0;}
.cart-item-main{flex:1;}
.cart-item-main h5{font-size:0.92rem; font-weight:700; color:var(--ink); margin-bottom:4px;}
.cart-item-main .tags{display:flex; gap:6px;}
.cart-item-price{text-align:left; min-width:65px; font-weight:800; color:var(--ink);}
.cart-item-actions{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.remove-link{font-size:0.77rem; color:var(--brand); font-weight:600; background:none; border:none;}
.remove-link:hover{text-decoration:underline;}

.summary-box{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; padding:22px; position:sticky; top:100px;}
.summary-box h5{font-size:0.98rem; font-weight:800; margin-bottom:14px;}
.summary-row{display:flex; justify-content:space-between; padding:9px 0; font-size:0.88rem; color:var(--ink-soft);}
.summary-row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:15px; font-weight:800; color:var(--ink); font-size:1.08rem;}
.summary-trust{display:flex; flex-direction:column; gap:8px; margin-top:15px; padding-top:15px; border-top:1px solid var(--line);}
.summary-trust .row{display:flex; align-items:center; gap:8px; font-size:0.76rem; color:var(--ink-faint);}
.empty-cart{text-align:center; padding:64px 20px; color:var(--ink-soft);}
.empty-cart .ic{font-size:2.2rem; margin-bottom:14px;}

/* ===== Contact ===== */
.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;}
.contact-info-card{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; padding:22px; margin-bottom:14px; display:flex; gap:15px; align-items:flex-start;}
.contact-info-card .ic{width:42px; height:42px; border-radius:10px; background:var(--accent-tint); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;}
.contact-info-card h5{font-weight:700; margin-bottom:4px;}
.contact-info-card p{font-size:0.86rem; color:var(--ink-soft);}
.map-placeholder{background:var(--card-alt); border-radius:14px; height:210px; display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:600; font-size:0.88rem; margin-top:18px; border:1px dashed var(--ink-faint);}
.form-box{background:var(--card); border:1px solid var(--panel-line); border-radius:14px; padding:26px;}
.form-field{margin-bottom:15px;}
.form-field label{display:block; font-size:0.84rem; font-weight:600; margin-bottom:6px;}
.form-field input, .form-field textarea{width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 14px; font-family:inherit; font-size:0.88rem; background:var(--card); color:var(--ink);}
.form-field textarea{min-height:100px; resize:vertical;}

/* ===== Footer ===== */
/* In dark mode the page background (--bg) and the footer are both
   near-black with nothing between them, so the ordinary spacing before
   the footer reads as an unexplained empty void instead of a deliberate
   gap. A visible top border gives that transition a clear edge, the same
   fix already used elsewhere (--panel-line) to separate flat sections. */
footer{background:#181818; color:rgba(255,255,255,0.7); margin-top:20px; border-top:1px solid var(--panel-line);}
:root[data-theme="dark"] footer{background:#000;}
/* This element carries BOTH .wrap (which sets padding:0 24px for side
   breathing room) and .foot-top. padding is a shorthand, so writing
   "padding:48px 0 30px" here was overwriting .wrap's left/right padding
   with 0, not just setting top/bottom — invisible on wide desktop
   screens where .wrap is centered with margin outside it, but on
   tablet/phone (where .wrap spans the full width) it pinned the footer's
   content flush against the screen edges ("stuck to the right," no
   margin). Setting only padding-top/bottom leaves .wrap's side padding
   intact at every width. */
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-top:48px; padding-bottom:30px;}
.foot-logo{display:flex; align-items:center; gap:9px; color:#fff; font-weight:800; font-size:1.1rem; margin-bottom:12px;}
footer h6{color:#fff; font-weight:700; margin-bottom:13px; font-size:0.9rem;}
footer ul{list-style:none;}
footer li{padding:6px 0; font-size:0.84rem;}
footer li a:hover{color:var(--accent);}
.pay-row{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.pay-chip{font-size:0.7rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); padding:5px 10px; border-radius:7px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1); padding:18px 0; text-align:center; font-size:0.78rem; color:rgba(255,255,255,0.4);}

/* ===== Tablet landscape / small desktop (≈1024-1100px, e.g. iPad landscape) ===== */
@media (max-width:1100px){
  .home-layout{grid-template-columns:1fr;}
  .side-cats{display:none;}
  .product-grid.grid-3{grid-template-columns:repeat(2,1fr);}
  .product-grid.grid-4{grid-template-columns:repeat(3,1fr);}
  .trust-inner{grid-template-columns:1fr 1fr;}
  .trust-cell{border-left:none; border-bottom:1px solid var(--line);}
  .foot-top{grid-template-columns:1fr 1fr;}
  .header-search{order:3; flex-basis:100%;}
  .header-row{flex-wrap:wrap;}
  .shop-layout{grid-template-columns:1fr;}
  .filter-box{padding:14px 16px;}
  .filter-toggle{display:flex;}
  .filter-box form#filters{display:none;}
  .filter-box.open form#filters{display:block; margin-top:14px;}
  .filter-box form#filters h5{display:none;}
  .product-detail{grid-template-columns:1fr;}
  .cart-layout{grid-template-columns:1fr;}
  .summary-box{position:static;}
  .contact-layout{grid-template-columns:1fr;}
}

/* ===== Tablet portrait (≈768-820px, e.g. iPad portrait) ===== */
@media (max-width:820px){
  .product-grid.grid-4{grid-template-columns:repeat(2,1fr);}
  .product-grid.grid-3{grid-template-columns:repeat(2,1fr);}
  .util-left{display:none;}
  .banner-main h2{font-size:1.4rem;}
  .cd-box{min-width:40px; padding:6px 8px;}
}

/* ===== Large phone (≈640px) ===== */
@media (max-width:640px){
  .product-grid, .product-grid.grid-3, .product-grid.grid-4{grid-template-columns:1fr 1fr;}
  .foot-top{grid-template-columns:1fr;}
  .recovery-strip{flex-direction:column; text-align:center;}
  .cart-item-card{flex-wrap:wrap;}
  .deal-banner{flex-direction:column; align-items:flex-start;}
  .carousel{height:360px;}
  .carousel-slide{padding:0 24px;}
  .header-actions{gap:6px;}
  .header-phone{display:none;}
  .qty-row, .pd-actions{flex-wrap:wrap;}
}

/* ===== Small phone (≈420px) ===== */
@media (max-width:420px){
  .product-grid, .product-grid.grid-3, .product-grid.grid-4{grid-template-columns:1fr;}
  .carousel{height:400px;}
  .slide-content h2{font-size:1.3rem;}
  .cat-item{padding:11px 12px; font-size:0.8rem;}
  .pd-price{font-size:1.5rem;}
  .trust-inner{grid-template-columns:1fr;}
}

/* ===== LTR overrides (English) — RTL is the default for ckb/ar ===== */
[dir="ltr"] .carousel-arrow.prev{ right:auto; left:16px; }
[dir="ltr"] .carousel-arrow.next{ left:auto; right:16px; }
[dir="ltr"] .side-cat-item .arrow{ transform:scaleX(-1); display:inline-block; }

/* Admin form 2-column rows — collapse to one column on phones */
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:600px){
  .form-row-2{grid-template-columns:1fr;}
}

/* ===== About teaser (homepage) — full-width, balanced: stat | text | button ===== */
.about-teaser{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px 32px; margin-bottom:8px;
}
.about-teaser-stats{ text-align:center; padding-inline-end:28px; border-inline-end:1px solid var(--line); min-width:120px; }
.ats-num{ font-size:2.2rem; font-weight:800; color:var(--brand); line-height:1.1; }
.ats-label{ font-size:0.76rem; color:var(--ink-faint); }
.about-teaser-body h4{ font-size:1.05rem; font-weight:800; margin-bottom:4px; }
.about-teaser-body p{ font-size:0.86rem; color:var(--ink-soft); max-width:620px; }

/* ===== About page process steps ===== */
.process-steps{ display:flex; flex-direction:column; gap:16px; }
.process-step{ display:flex; gap:16px; align-items:flex-start; background:var(--card); border:1px solid var(--panel-line); border-radius:14px; padding:18px 20px; }
.ps-num{ width:34px; height:34px; border-radius:50%; background:var(--brand-tint); color:var(--brand-deep); font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.process-step h5{ font-size:0.95rem; font-weight:700; margin-bottom:4px; }
.process-step p{ font-size:0.85rem; color:var(--ink-soft); }

@media (max-width:640px){
  .about-teaser{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .about-teaser-stats{ border-inline-end:none; padding-inline-end:0; border-bottom:1px solid var(--line); padding-bottom:16px; width:100%; }
}

/* Storefront refinement: readable cards, clear actions, responsive categories. */
:root{--bg:#f5f6f8;--ink:#17212e;--ink-soft:#596575;--panel-line:#e1e5eb}
.home-layout{gap:24px;margin-top:24px}.side-cats{border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--panel-line)}
.side-cat-item{padding:15px 18px;transition:background .2s}.side-cat-item:hover{background:var(--brand-tint);color:var(--brand)}
.carousel{border-radius:22px;overflow:hidden}.carousel-slide{min-height:340px}.slide-content h2{max-width:650px;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1.4}
.shop-actions{display:flex;flex-wrap:wrap;gap:12px;padding:18px 0}.shop-actions a{min-height:46px;display:inline-flex;align-items:center;gap:12px}
.section-panel{border-radius:20px;border:1px solid var(--panel-line);box-shadow:0 5px 22px rgba(20,30,50,.03)}
.product-grid{gap:18px}.product-card{border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
button,a,input,select,textarea{outline-offset:4px}:focus-visible{outline:3px solid var(--brand)}
@media(max-width:700px){.wrap{padding-inline:16px}.home-layout{display:flex;flex-direction:column}.side-cats{display:flex;flex-wrap:wrap;padding:10px;gap:6px}.side-cats h5{width:100%;padding:8px}.side-cat-item{border:1px solid var(--line);border-radius:10px;padding:9px 12px}.side-cat-item .arrow{display:none}.carousel-slide{min-height:280px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Responsive review fixes */
.home-layout{align-items:start}.side-cats{align-self:start}.side-cat-item{flex:0 0 auto}
.carousel{height:auto;min-height:0}.carousel-track{height:auto;align-items:stretch}.carousel-slide{height:auto;min-height:350px;padding:40px 64px 56px;flex:0 0 100%;box-sizing:border-box}.slide-content{width:100%;min-width:0}.slide-content h2{font-size:clamp(1.45rem,2.8vw,2.3rem);line-height:1.4;overflow-wrap:break-word}.slide-content p{max-width:60ch}.slide-btn{margin-top:12px}
.breadcrumb{flex-wrap:wrap}.breadcrumb a,.breadcrumb .sep{flex:none;white-space:nowrap}.breadcrumb .current{overflow-wrap:break-word}
.pagination{flex-wrap:wrap;gap:6px}.pagination .page-btn{flex:none;min-height:40px}
.cart-item-main h5{overflow-wrap:break-word;word-break:normal}.cart-item-price,.summary-row>span:last-child{white-space:nowrap;flex-shrink:0}.cart-item-card .tags{flex-wrap:wrap}.spec-chip{white-space:nowrap}
@media(max-width:1000px){.home-layout{display:flex;flex-direction:column}.home-layout>div{width:100%}.side-cats{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:12px;width:100%;order:2}.side-cats h5{width:100%;padding:4px;background:none;border:0}.side-cat-item{border:1px solid var(--line);border-radius:8px;padding:9px 12px}.side-cat-item .arrow{display:none}}
@media(max-width:640px){.carousel-slide{min-height:330px;padding:28px 36px 52px}.slide-content h2{font-size:1.55rem}.carousel-arrow{width:28px;height:28px}.carousel-arrow.prev{right:4px}.carousel-arrow.next{left:4px}[dir=ltr] .carousel-arrow.prev{left:4px;right:auto}[dir=ltr] .carousel-arrow.next{right:4px;left:auto}.cart-item-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px}.cart-item-main{grid-column:2 / 4}.cart-item-qty{grid-column:1 / 3;grid-row:2}.cart-item-price{grid-column:3;grid-row:2;min-width:0}.cart-item-actions{grid-column:1 / -1;text-align:end}.cart-item-main h5{font-size:.9rem;line-height:1.65}.shop-actions{flex-wrap:wrap}.shop-actions>a{flex:1;text-align:center}}

/* HDR storefront */
.store-opening{padding-top:28px}.store-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--card);border:1px solid var(--panel-line);border-radius:24px;overflow:hidden;min-height:380px}.store-hero-copy{padding:48px}.store-eyebrow{font-size:.78rem;letter-spacing:.1em;font-weight:800;color:var(--brand);text-transform:uppercase}.store-hero h1{font-size:clamp(2rem,3.5vw,3.25rem);line-height:1.25;margin:16px 0;max-width:16ch}.store-hero p{font-size:1rem;color:var(--ink-soft);max-width:52ch;line-height:1.8}.store-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}.store-hero-actions a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px}.store-hero-notes{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px;font-size:.78rem;color:var(--ink-soft)}.store-hero-notes span::before{content:'✓';color:var(--green);margin-inline-end:8px}.store-hero-art{position:relative;overflow:hidden;min-height:340px;background:radial-gradient(ellipse at 70% 30%,#fba16655,transparent 60%),linear-gradient(140deg,#20252c,#0c1119);color:#fff;display:flex;align-items:center;justify-content:center;gap:0;padding:40px}.storage-device{position:relative;border-radius:14px;box-shadow:0 24px 38px #0008;transform:rotate(-12deg);width:180px;height:240px;padding:18px;border:2px solid #7e8794;background:linear-gradient(145deg,#d6dce3,#768493);color:#1c2737;flex-shrink:0}.storage-disc{width:136px;height:136px;border-radius:50%;background:repeating-radial-gradient(circle,#9dabb9 0px,#e0e7ed 3px,#a6b3c0 5px);position:relative;margin:8px 0 22px;box-shadow:inset 0 0 0 6px #435368}.storage-disc::after{content:'';position:absolute;inset:52px;border-radius:50%;background:#344559;border:5px solid #c2cbd5}.storage-device>span{font-size:1.1rem;font-weight:900}.storage-device>small{display:block;font-size:.6rem;letter-spacing:.12em}.storage-ssd{transform:rotate(14deg);width:140px;height:180px;background:linear-gradient(135deg,#e23744,#ff7a1a);border-color:#ffae7e;color:#fff;margin-inline-start:-28px;margin-top:70px;display:flex;flex-direction:column;justify-content:center}.storage-ssd>span{font-size:2rem}.storage-contacts{position:absolute;bottom:-8px;left:22px;right:22px;height:12px;background:repeating-linear-gradient(90deg,#d8b459 0,#d8b459 5px,#594521 5px,#594521 7px);border-radius:2px}.storage-caption{position:absolute;bottom:24px;inset-inline-end:28px;font-size:.8rem;font-weight:800;letter-spacing:.12em}.storage-caption span{color:#a2afbe;margin-inline-start:8px;font-weight:400}.store-service-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:22px 4px;border-bottom:1px solid var(--line);font-size:.82rem}.store-service-row>span,.store-service-row>a{display:flex;gap:10px;align-items:center}.store-service-row .ico{color:var(--brand)}.store-categories{padding:30px 0}.store-categories h2{font-size:1.25rem}.category-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.category-tile{padding:18px;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--panel-line);border-radius:14px;transition:transform .2s,border-color .2s}.category-tile:hover{border-color:var(--brand);transform:translateY(-3px)}.category-tile-icon{width:48px;height:48px;background:var(--card-alt);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex-shrink:0}.category-tile>span:nth-child(2){flex:1}.category-tile strong{display:block;font-size:.95rem}.category-tile small{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:4px}.category-tile>.ico{color:var(--ink-faint)}.product-media-link{display:flex;position:relative;width:100%;height:100%;align-items:center;justify-content:center}.product-image-fallback{text-align:center;color:var(--ink-faint);max-width:170px}.product-image-fallback svg{width:140px;height:100px;display:block;margin:auto}.product-image-fallback small{display:block;font-size:.7rem}.product-media-link .product-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--card-alt);padding:18px}.product-card .card-media{height:190px;min-height:0}.product-card .condition-badge,.product-card .discount-badge{z-index:2;pointer-events:none}.product-card .card-body{display:flex;flex-direction:column;flex:1;padding:18px}.product-card{display:flex;flex-direction:column}.product-card h4{font-size:.9rem;line-height:1.65;min-height:3.3em}.product-warranty{font-size:.73rem;color:var(--ink-soft);margin:6px 0 10px}.product-card .price-block{margin-top:auto;padding-top:12px}.product-detail-link{font-size:.8rem;color:var(--ink-soft);text-decoration:underline}.product-quick-add{margin-top:14px}.product-quick-add button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px}.shipping-note{font-size:.78rem;color:var(--ink-soft);line-height:1.7;margin:16px 0;padding:12px;background:var(--card-alt);border-radius:10px}.help-page{max-width:1000px}.help-page h1{font-size:2rem;margin:20px 0 8px}.help-intro{color:var(--ink-soft);margin-bottom:26px}.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.help-card{padding:26px;background:var(--card);border:1px solid var(--panel-line);border-radius:16px;scroll-margin-top:170px}.help-card h2{font-size:1.1rem;margin-bottom:12px}.help-card p{font-size:.9rem;color:var(--ink-soft);line-height:1.9}
@media(max-width:900px){.store-hero-copy{padding:30px}.store-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.store-hero-art{padding:18px}.storage-hdd{width:140px;height:200px}.storage-disc{width:104px;height:104px}.storage-disc::after{inset:38px}.storage-ssd{width:110px;height:150px}.store-service-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.store-opening{padding-top:18px}.store-hero{grid-template-columns:1fr;border-radius:18px}.store-hero-copy{padding:26px}.store-hero h1{font-size:2rem;max-width:none}.store-hero p{font-size:.87rem}.store-hero-art{min-height:220px;height:220px;grid-row:2}.storage-hdd{width:122px;height:168px;padding:14px}.storage-disc{width:90px;height:90px;margin:0 0 10px}.storage-disc::after{inset:32px}.storage-ssd{width:100px;height:132px;margin-top:20px}.storage-caption{bottom:12px;font-size:.65rem}.store-hero-actions{gap:10px;margin-top:20px}.store-hero-actions>a{flex:1;font-size:.8rem;padding:10px}.store-service-row{gap:14px;font-size:.72rem;padding:18px 0}.category-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-tile{padding:14px;flex-wrap:wrap;gap:10px}.category-tile>.ico{display:none}.category-tile strong{font-size:.85rem}.category-tile small{font-size:.68rem}.category-tile-icon{width:36px;height:36px;font-size:1.3rem}.category-tile>span:nth-child(2){flex-basis:100%}.product-card .card-body{padding:14px}.product-card .card-media{height:160px}.help-grid{grid-template-columns:1fr}.help-card{padding:22px}}

.storage-device>span,.storage-device>small{white-space:nowrap}.storage-ssd>small{font-size:.52rem;letter-spacing:.03em}@media(max-width:600px){.store-hero-actions>a{white-space:nowrap;padding:10px 12px;gap:6px;font-size:.78rem}.store-hero-actions>a:first-child{flex:1.2}.storage-ssd>span{font-size:1.7rem}}

.tracking-page{max-width:850px}.tracking-page h1{font-size:1.7rem;margin-bottom:10px}.tracking-input{display:block;width:100%;padding:12px;border:1px solid var(--panel-line);border-radius:9px;background:var(--card-alt);color:var(--ink);font:inherit;margin:10px 0 18px}.tracking-save{text-align:start;margin-bottom:24px}.tracking-save h3{margin-bottom:10px}.tracking-save p{margin:10px 0}.tracking-error{color:var(--brand);margin-bottom:16px}.tracking-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;gap:8px;margin:24px 0}.tracking-steps li{border-top:4px solid var(--line);padding-top:12px;font-size:.82rem;color:var(--ink-soft)}.tracking-steps li.complete{border-color:var(--green);color:var(--ink);font-weight:700}.tracking-items{margin:20px 0}.tracking-items .summary-row{gap:20px}.tracking-items strong{white-space:nowrap}.tracking-save label{font-size:.8rem;font-weight:700}@media(max-width:500px){.tracking-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}