/* Asetos Computers — asetos.co.ke
   Palette and type lifted from the live Shopify theme (asetos-custom.css)
   so the Kenyan storefront reads as the same brand. */

:root {
  --navy: #00384B;
  --navy-dark: #002A38;
  --navy-light: #004D66;
  --lime: #7AB55C;
  --lime-dark: #5E9A42;
  --gold: #A7A44D;
  --gray: #A2A4A7;
  --gray-dark: #6B6D70;
  --gray-light: #F4F5F6;
  --line: #E2E8F0;
  --white: #FFFFFF;
  --dark: #1A1A1A;
  --red: #DC3545;
  --wa: #25D366;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-w: 1400px;
  --tr: 0.25s ease;
  --r: 6px;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --shadow: 0 2px 10px rgba(0, 56, 75, 0.07);
  --shadow-lg: 0 8px 28px rgba(0, 56, 75, 0.13);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 400;
}
h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }

a { color: var(--navy); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--lime-dark); }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--lime);
  color: #fff; padding: 0.7rem 1.2rem; z-index: 2000; font-weight: 700;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--lime); outline-offset: 2px;
}

/* ---------- top bar ---------- */
.topbar {
  background: var(--navy-dark); color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem; letter-spacing: 0.2px;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: rgba(255, 255, 255, 0.82); }
.topbar a:hover { color: var(--lime); }
.topbar-links { display: flex; gap: 1.25rem; }

/* ---------- header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.header-inner { display: flex; align-items: center; gap: 1.5rem; }

.logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.logo-mark {
  width: 42px; height: 42px; border-radius: var(--r); background: var(--navy);
  color: var(--white); font-family: var(--font-serif); font-size: 1.5rem;
  display: grid; place-items: center; flex-shrink: 0;
}
.logo-text { font-family: var(--font-serif); font-size: 1.5rem; color: var(--navy); line-height: 1; }
.logo-ke { color: var(--lime); font-size: 0.95rem; }

.search { flex: 1; display: flex; border: 2px solid var(--navy); border-radius: var(--r); overflow: hidden; min-width: 0; }
.search select {
  background: var(--navy); color: var(--white); border: none; padding: 0.6rem 0.85rem;
  font-family: var(--font-sans); font-size: 0.85rem; cursor: pointer; max-width: 165px;
}
.search input { flex: 1; border: none; padding: 0.6rem 0.9rem; font-family: var(--font-sans); font-size: 0.95rem; outline: none; min-width: 0; }
.search button { background: var(--lime); color: var(--white); border: none; padding: 0 1.15rem; cursor: pointer; font-size: 1.05rem; transition: background var(--tr); }
.search button:hover { background: var(--lime-dark); }

.header-phone { display: flex; flex-direction: column; line-height: 1.25; flex-shrink: 0; }
.header-phone .phone-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gray-dark); }
.header-phone .phone-num { font-weight: 700; color: var(--navy); font-size: 0.98rem; }

.header-cart { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; font-weight: 600; font-size: 0.9rem; }
.cart-count {
  background: var(--lime); color: var(--white); border-radius: 999px;
  min-width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; padding: 0 6px;
}

/* ---------- main nav ---------- */
.main-nav { background: var(--navy); position: sticky; top: 0; z-index: 900; }
.main-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
/* Only the top-level list lays out horizontally; scoping this to the direct
   child keeps it from beating .dropdown's display:none on specificity. */
.main-nav > .container > ul { display: flex; flex-wrap: wrap; }
.main-nav > .container > ul > li > a {
  display: block; color: var(--white); padding: 0.9rem 1.05rem;
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  transition: background var(--tr);
}
.main-nav > .container > ul > li > a:hover,
.main-nav > .container > ul > li > a.active { background: rgba(255, 255, 255, 0.11); color: var(--white); }

.has-dropdown { position: relative; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--white); box-shadow: var(--shadow-lg); border-top: 3px solid var(--lime);
  flex-direction: column; z-index: 950; padding: 0.35rem 0;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: flex; }
.dropdown li { width: 100%; }
.dropdown a { display: block; padding: 0.55rem 1.1rem; color: var(--navy); font-size: 0.88rem; }
.dropdown a:hover { background: var(--gray-light); color: var(--lime-dark); }

.nav-cta { display: flex; gap: 0.6rem; flex-shrink: 0; }
.btn-cta, .btn-wa {
  padding: 0.5rem 1.05rem; border-radius: 4px; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--white);
  display: inline-flex; align-items: center; gap: 0.4rem; transition: opacity var(--tr);
}
.btn-cta { background: var(--lime); }
.btn-wa { background: var(--wa); }
.btn-cta:hover, .btn-wa:hover { opacity: 0.88; color: var(--white); }

.nav-toggle {
  display: none; background: none; border: none; color: var(--white);
  font-size: 1.4rem; cursor: pointer; padding: 0.6rem;
}

/* ---------- benefits strip ---------- */
.benefits { background: var(--gray-light); border-bottom: 1px solid var(--line); }
.benefits-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 0.9rem 0; }
.benefit { display: flex; flex-direction: column; text-align: center; font-size: 0.78rem; }
.benefit strong { color: var(--navy); font-size: 0.8rem; letter-spacing: 0.4px; }
.benefit span { color: var(--gray-dark); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--lime); color: var(--white); border: none; border-radius: 4px;
  padding: 0.8rem 1.6rem; font-family: var(--font-sans); font-size: 0.88rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer; transition: background var(--tr);
}
.btn:hover { background: var(--lime-dark); color: var(--white); }
.btn-navy { background: var(--navy); }
.btn-navy:hover { background: var(--navy-light); }
.btn-outline { background: transparent; border: 2px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-block { width: 100%; }
.btn:disabled { background: var(--gray); cursor: not-allowed; }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white); padding: 3.5rem 0;
}
.hero-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; align-items: center; }
.hero h1 { color: var(--white); margin-bottom: 0.8rem; }
.hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; margin: 0 0 1.5rem; max-width: 55ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.hero-stat { border-left: 3px solid var(--lime); padding-left: 0.85rem; }
.hero-stat b { display: block; font-family: var(--font-serif); font-size: 1.7rem; color: var(--white); }
.hero-stat span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.5px; }

/* Quick spec-finder in the hero. */
.finder { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r); padding: 1.4rem; }
.finder h2 { color: var(--white); font-size: 1.2rem; margin-bottom: 1rem; }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.finder label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.3rem; }
.finder select {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px; background: var(--white); color: var(--dark);
  font-family: var(--font-sans); font-size: 0.9rem;
}
.finder .btn { margin-top: 1rem; width: 100%; }

/* ---------- sections ---------- */
.section { padding: 3rem 0; }
.section-alt { background: var(--gray-light); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0.3rem 0 0; color: var(--gray-dark); font-size: 0.92rem; }
.section-head a { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--lime-dark); }

/* ---------- brand tiles ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.brand-tile {
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.2rem; text-align: center; transition: all var(--tr);
}
.brand-tile:hover { border-color: var(--lime); box-shadow: var(--shadow); transform: translateY(-2px); }
.brand-tile b { display: block; font-family: var(--font-serif); font-size: 1.35rem; color: var(--navy); }
.brand-tile span { font-size: 0.82rem; color: var(--gray-dark); }

/* ---------- product grid ---------- */
.shop-layout { display: grid; grid-template-columns: 265px 1fr; gap: 2rem; align-items: start; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.1rem; }

.card {
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; overflow: hidden; transition: all var(--tr); position: relative;
}
.card:hover { border-color: var(--lime); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media { position: relative; background: var(--gray-light); aspect-ratio: 1 / 1; padding: 0.75rem; }
.card-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card-body { padding: 0.85rem; display: flex; flex-direction: column; flex: 1; gap: 0.5rem; }
.card-brand { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.7px; color: var(--gray-dark); font-weight: 700; }
.card-title { font-family: var(--font-sans); font-size: 0.87rem; font-weight: 600; color: var(--navy); line-height: 1.35; margin: 0; }
.card-title a { color: inherit; }
.card-specs { display: flex; flex-wrap: wrap; gap: 0.28rem; }
.spec-chip {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3px; padding: 0.16rem 0.42rem;
  border-radius: 3px; background: var(--gray-light); color: var(--navy-light); border: 1px solid var(--line);
}
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.4rem; }
.price { font-family: var(--font-serif); font-size: 1.18rem; color: var(--navy); line-height: 1; }
.price-was { font-size: 0.78rem; color: var(--gray); text-decoration: line-through; font-family: var(--font-sans); margin-left: 0.35rem; }
.card .btn { padding: 0.5rem 0.85rem; font-size: 0.72rem; }

.badge {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem; border-radius: 3px; color: var(--white);
}
.badge-new { background: var(--lime); }
.badge-used { background: var(--gray-dark); }
.badge-oos { background: var(--red); right: 0.6rem; left: auto; }

.stock { font-size: 0.72rem; font-weight: 600; }
.stock-in { color: var(--lime-dark); }
.stock-low { color: var(--gold); }
.stock-out { color: var(--red); }

/* ---------- filter sidebar ---------- */
.filters { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r); padding: 1.15rem; position: sticky; top: 68px; }
.filter-group { margin-bottom: 1.2rem; }
.filter-group h4 {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 0.6rem;
  padding-bottom: 0.4rem; border-bottom: 2px solid var(--lime);
}
.filter-opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.86rem; cursor: pointer; }
.filter-opt input { accent-color: var(--lime); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.filter-opt .n { margin-left: auto; font-size: 0.72rem; color: var(--gray); }
.filter-opt:hover { color: var(--lime-dark); }
.filter-actions { display: flex; gap: 0.5rem; }
.filter-actions .btn { flex: 1; padding: 0.6rem; font-size: 0.75rem; }

.filter-toggle { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.active-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; background: var(--navy); color: var(--white);
  font-size: 0.74rem; font-weight: 600; padding: 0.28rem 0.6rem; border-radius: 999px;
}
.active-chip a { color: rgba(255, 255, 255, 0.75); font-weight: 700; line-height: 1; }
.active-chip a:hover { color: var(--white); }

.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.shop-count { font-size: 0.88rem; color: var(--gray-dark); }
.shop-count b { color: var(--navy); }
.sort-select { border: 1.5px solid var(--line); border-radius: 4px; padding: 0.5rem 0.7rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--navy); background: var(--gray-light); }

/* ---------- breadcrumbs / pagination ---------- */
.crumbs { font-size: 0.8rem; color: var(--gray-dark); padding: 0.9rem 0; }
.crumbs a { color: var(--gray-dark); }
.crumbs a:hover { color: var(--lime-dark); }

.pagination { display: flex; gap: 0.35rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; padding: 0.45rem 0.7rem; text-align: center; border: 1.5px solid var(--line);
  border-radius: 4px; font-size: 0.85rem; font-weight: 600; color: var(--navy);
}
.pagination a:hover { border-color: var(--lime); color: var(--lime-dark); }
.pagination .current { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- product detail ---------- */
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 1.5rem 0 3rem; }
.gallery-main { border: 1.5px solid var(--line); border-radius: var(--r); background: var(--gray-light); aspect-ratio: 1/1; padding: 1.5rem; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.gallery-thumbs button { width: 66px; height: 66px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--gray-light); padding: 4px; cursor: pointer; }
.gallery-thumbs button.active { border-color: var(--lime); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.product-price { font-family: var(--font-serif); font-size: 2.1rem; color: var(--navy); line-height: 1; }
.product-vat { font-size: 0.78rem; color: var(--gray-dark); }
.spec-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.88rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); }
.spec-table th { color: var(--gray-dark); font-weight: 600; width: 42%; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; }
.spec-table td { color: var(--navy); font-weight: 600; }

.buy-row { display: flex; gap: 0.6rem; align-items: stretch; margin: 1.2rem 0; }
.qty { display: flex; border: 1.5px solid var(--line); border-radius: 4px; overflow: hidden; }
.qty button { width: 38px; background: var(--gray-light); border: none; font-size: 1.1rem; cursor: pointer; color: var(--navy); }
.qty input { width: 52px; text-align: center; border: none; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); font-family: var(--font-sans); }

.trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
.trust { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.82rem; color: var(--gray-dark); }
.trust b { color: var(--navy); display: block; font-size: 0.85rem; }

/* Body copy fills the content column rather than sitting in a narrow measure. */
.prose { max-width: none; }
.prose p { margin: 0 0 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }

/* ---------- tables, notices, forms ---------- */
.notice { border-left: 4px solid var(--lime); background: var(--gray-light); padding: 0.9rem 1.1rem; border-radius: 0 var(--r) var(--r) 0; margin: 1rem 0; font-size: 0.9rem; }
.notice-warn { border-left-color: var(--gold); }
.notice-err { border-left-color: var(--red); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: 4px; padding: 0.65rem 0.8rem;
  font-family: var(--font-sans); font-size: 0.93rem; background: var(--white); color: var(--dark);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lime); outline: none; }
.field .hint { font-size: 0.75rem; color: var(--gray-dark); }
.field-full { grid-column: 1 / -1; }

.pay-methods { display: grid; gap: 0.7rem; margin: 1rem 0; }
.pay-method { display: flex; gap: 0.75rem; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0.9rem 1rem; cursor: pointer; transition: border-color var(--tr); }
.pay-method:hover { border-color: var(--lime); }
.pay-method input { accent-color: var(--lime); margin-top: 0.25rem; }
.pay-method b { display: block; color: var(--navy); font-size: 0.92rem; }
.pay-method span { font-size: 0.8rem; color: var(--gray-dark); }
.pay-method.disabled { opacity: 0.55; cursor: not-allowed; }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-dark); padding: 0.6rem; border-bottom: 2px solid var(--line); }
.cart-table td { padding: 0.85rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-thumb { width: 64px; height: 64px; object-fit: contain; background: var(--gray-light); border-radius: 4px; padding: 4px; mix-blend-mode: multiply; }
.cart-summary { background: var(--gray-light); border-radius: var(--r); padding: 1.3rem; }
.sum-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.9rem; }
.sum-row.total { border-top: 2px solid var(--line); margin-top: 0.5rem; padding-top: 0.8rem; font-size: 1.15rem; font-family: var(--font-serif); color: var(--navy); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.72); padding: 2.75rem 0 0; margin-top: 3rem; font-size: 0.87rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2rem; }
.site-footer h4 { color: var(--white); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--lime); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.13); padding: 1.1rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; }
.footer-pay { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pay-pill { background: rgba(255, 255, 255, 0.11); border-radius: 3px; padding: 0.22rem 0.55rem; font-size: 0.72rem; font-weight: 600; color: var(--white); }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px;
  background: var(--wa); border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); z-index: 990; transition: transform var(--tr);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.open { display: block; }
  .filter-toggle { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-bottom: 1rem; }
  .hero-inner { grid-template-columns: 1fr; }
  .product-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; }
  .search { order: 3; width: 100%; flex-basis: 100%; }
  .header-phone { display: none; }
  .benefits-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: block; }
  .main-nav > .container > ul { display: none; width: 100%; flex-direction: column; }
  .main-nav > .container > ul.open { display: flex; }
  .main-nav .container { flex-wrap: wrap; }
  .dropdown { position: static; box-shadow: none; border-top: none; padding-left: 1rem; background: transparent; }
  .dropdown a { color: rgba(255, 255, 255, 0.8); }
  .dropdown a:hover { background: transparent; }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.open .dropdown { display: flex; }
  .form-grid { grid-template-columns: 1fr; }
  .topbar-loc { display: none; }
}

@media (max-width: 520px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .card-body { padding: 0.6rem; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .benefits-inner { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .finder-grid { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr; }
}

@media print {
  .topbar, .main-nav, .wa-float, .filters, .site-footer { display: none; }
}

/* ==== BEGIN ported theme components (tools/port-theme-css.py) ==== */
/* Copied verbatim so the cascade, including the !important chains that
   key off the .shopify-section wrapper, behaves as on shop.asetos.co.za.
   Never hand-edit inside this block; re-run the script instead. */
[class*="asetos-"],[class*="asetos-"] *,[class*="asetos-"] *::before,[class*="asetos-"] *::after{box-sizing:border-box}
.asetos-util{background:var(--navy);padding:0.4rem 2rem;font-size:0.78rem;color:var(--gray);border-bottom:2px solid var(--lime)}
.asetos-util-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.asetos-util-loc{display:flex;align-items:center;gap:6px}
.asetos-util-loc svg{width:14px;height:14px;fill:none;stroke:var(--lime);stroke-width:2;flex-shrink:0}
.asetos-util-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.asetos-util-links a{color:var(--lime);text-decoration:none;font-weight:600;font-size:0.78rem;transition:color var(--tr)}
.asetos-util-links a:hover{color:var(--white)}
.asetos-header{background:var(--white);position:sticky;top:0;z-index:1000;height:72px;display:flex;align-items:center;border-bottom:3px solid var(--lime);box-shadow:0 2px 20px rgba(0,0,0,0.06)}
.asetos-header-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);width:100%;display:flex;align-items:center;gap:20px}
.asetos-logo img{height:42px;width:auto}
.asetos-logo{flex:0 0 auto;}
.asetos-search{flex:0 1 480px;margin-left:auto;margin-right:auto;max-width:480px;display:flex;border:2px solid var(--navy);border-radius:var(--r);position:relative}
.asetos-search-cat{border-top-left-radius:var(--r);border-bottom-left-radius:var(--r)}
.asetos-search input[type="text"]{border-radius:0}
.asetos-search-cat{background:var(--navy);color:var(--white);border:none;padding:0.55rem 0.9rem;font-size:0.85rem;font-family:var(--font-sans);cursor:pointer;min-width:140px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.asetos-search input[type="text"]{flex:1;border:none;padding:0.55rem 0.9rem;font-size:0.95rem;font-family:var(--font-sans);outline:none;min-width:0}
.asetos-search button[type="submit"]{background:var(--lime);border:none;padding:0.55rem 1rem;cursor:pointer;transition:background var(--tr);display:flex;align-items:center}
.asetos-search button:hover{background:var(--lime-dark)}
.asetos-search button svg{width:20px;height:20px;fill:none;stroke:var(--white);stroke-width:2}
.asetos-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid #E2E8F0;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.14);z-index:1002;max-height:70vh;overflow-y:auto}
.asetos-search-results[hidden]{display:none}
.asetos-ps-state{padding:0.85rem 1rem;font-size:0.85rem;color:var(--gray-dark)}
.asetos-ps-list{list-style:none;margin:0;padding:0.35rem 0}
.asetos-ps-item{display:flex;align-items:center;gap:10px;padding:0.5rem 0.85rem;text-decoration:none;color:var(--dark)}
.asetos-ps-item:hover{background:var(--gray-light)}
.asetos-ps-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;border:1px solid #E2E8F0;background:var(--gray-light)}
.asetos-ps-thumb--empty{display:block}
.asetos-ps-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.asetos-ps-title{font-size:0.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asetos-ps-price{font-size:0.82rem;font-weight:700;color:var(--navy)}
.asetos-ps-all{display:block;padding:0.7rem 0.85rem;border-top:1px solid #E2E8F0;font-size:0.82rem;font-weight:700;color:var(--lime-dark);text-decoration:none;text-align:center}
.asetos-ps-all:hover{background:var(--gray-light)}
.asetos-header-phone{display:flex;align-items:center;gap:6px;color:var(--navy);font-weight:600;font-size:0.85rem;text-decoration:none;white-space:nowrap;transition:color var(--tr)}
.asetos-header-phone:hover{color:var(--lime)}
.asetos-header-phone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.asetos-header-actions{display:flex;align-items:center;gap:14px}
.asetos-header-action{display:flex;align-items:center;gap:5px;color:var(--navy);font-size:0.85rem;font-weight:600;text-decoration:none;transition:color var(--tr)}
.asetos-header-action:hover{color:var(--lime)}
.asetos-header-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.asetos-cart-badge{background:var(--lime);color:var(--white);font-size:0.65rem;font-weight:700;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.asetos-nav{background:var(--navy)}
.asetos-nav-bar{display:none;align-items:center;gap:0.75rem;padding:0.65rem 1rem}
.asetos-nav-title{color:#fff;font-size:0.95rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.asetos-nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:flex;align-items:stretch}
.asetos-cat-trigger{display:flex;align-items:center;gap:8px;padding:0.75rem 1.2rem;background:rgba(255,255,255,0.08);border:none;border-right:1px solid rgba(255,255,255,0.12);color:var(--white);font-size:0.85rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;white-space:nowrap;text-transform:uppercase;letter-spacing:0.3px;transition:background var(--tr)}
.asetos-cat-trigger:hover{background:rgba(255,255,255,0.15)}
.asetos-cat-trigger svg{width:18px;height:18px;fill:none;stroke:var(--white);stroke-width:2}
.asetos-nav-links{display:flex;list-style:none;margin:0;padding:0}
.asetos-nav-links>li{position:relative}
.asetos-nav-links>li>a{display:flex;align-items:center;gap:5px;padding:0.75rem 1.2rem;color:var(--white);font-size:0.85rem;font-weight:600;text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:0.3px;transition:all var(--tr)}
.asetos-nav-links>li.asetos-has-dd>a::after{content:'▾';font-size:0.55rem;opacity:0.6}
.asetos-nav-links>li:hover>a{background:rgba(255,255,255,0.1);color:var(--lime)}
.asetos-nav-links .dropdown{display:none;position:absolute;top:100%;left:0;background:var(--white);border:1px solid var(--gray-light);border-top:3px solid var(--lime);box-shadow:0 8px 24px rgba(0,0,0,0.12);min-width:200px;list-style:none;padding:0;margin:0;z-index:200}
.asetos-nav-links>li:hover .dropdown{display:block}
.asetos-nav-links .dropdown li a{display:block;padding:0.65rem 1.2rem;color:var(--navy);font-size:0.85rem;font-weight:500;text-decoration:none;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--gray-light);transition:all 0.15s}
.asetos-nav-links .dropdown li a::after{display:none}
.asetos-nav-links .dropdown li:last-child a{border-bottom:none}
.asetos-nav-links .dropdown li a:hover{background:var(--gray-light);color:var(--lime)}
.asetos-nav-right{margin-left:auto;display:flex}
.asetos-btn-navy,.asetos-btn-lime{display:flex;align-items:center;padding:0.75rem 1.4rem;font-size:0.82rem;font-weight:700;text-decoration:none;color:var(--white);white-space:nowrap;text-transform:uppercase;letter-spacing:0.5px;transition:all var(--tr)}
.asetos-btn-navy{border-left:1px solid rgba(255,255,255,0.15)}
.asetos-btn-lime{background:var(--lime)}
.asetos-btn-lime:hover{background:var(--lime-dark);color:var(--white)}
.asetos-trust{background:var(--gray-light);border-bottom:1px solid #E2E8F0;padding:0.9rem 0}
.asetos-trust-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.asetos-trust-item{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}
.asetos-trust-icon{width:28px;height:28px;flex-shrink:0}
.asetos-trust-icon svg{width:28px;height:28px;fill:none;stroke:var(--lime);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.asetos-trust-item strong{display:block;font-size:0.82rem;font-weight:700;color:var(--navy);line-height:1.3;text-transform:uppercase;letter-spacing:0.3px}
.asetos-trust-item span{display:block;font-size:0.78rem;color:var(--gray-dark);line-height:1.3}
.asetos-product-card{position:relative;background:var(--white);border:1px solid #E2E8F0;border-radius:var(--r);overflow:hidden;transition:all var(--tr)}
.asetos-product-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,56,75,0.1);border-color:var(--lime)}
.asetos-pc-badge,.asetos-pc-source{position:absolute;z-index:5;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:3px 8px;border-radius:3px}
.asetos-pc-badge{top:10px;right:10px}
.asetos-pc-source{top:10px;left:10px}
.asetos-badge-sale{background:#e74c3c;color:var(--white)}
.asetos-badge-special{background:var(--lime);color:var(--white)}
.asetos-badge-new{background:var(--lime);color:var(--white)}
.asetos-pc-price .asetos-pc-special-price{color:#e74c3c}
.asetos-product-special-note{font-size:0.82rem;color:var(--lime-dark);font-weight:600;margin:-4px 0 8px}
.asetos-source-instore{background:var(--lime);color:var(--white)}
.asetos-source-local{background:var(--gold);color:var(--white)}
.asetos-source-import{background:var(--navy);color:var(--white)}
.asetos-source-instock{background:var(--lime);color:var(--white)}
.asetos-source-nostock{background:#dc3545;color:var(--white)}
.asetos-pc-img{display:block;position:relative;aspect-ratio:1/1;background:var(--gray-light);border-bottom:1px solid #E2E8F0;overflow:hidden}
.asetos-pc-img img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform var(--tr)}
.asetos-product-card:hover .asetos-pc-img img{transform:scale(1.04)}
.asetos-pc-img-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--gray);font-size:0.85rem}
.asetos-pc-actions{position:absolute;bottom:10px;right:10px;opacity:0;transition:opacity 0.25s}
.asetos-product-card:hover .asetos-pc-actions{opacity:1}
.asetos-pc-action-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--white);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.asetos-pc-action-btn svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:2}
.asetos-pc-info{padding:14px}
.asetos-pc-cat{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--lime);font-weight:700;margin-bottom:4px}
.asetos-pc-name{margin-bottom:6px;line-height:1.35}
.asetos-pc-name a{font-size:0.92rem;font-weight:700;color:var(--navy);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--tr)}
.asetos-pc-name a:hover{color:var(--lime)}
.asetos-pc-price{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:12px}
.asetos-pc-price .old{text-decoration:line-through;color:var(--gray);font-size:0.85rem;font-weight:500;margin-right:6px}
.asetos-pc-bottom{display:flex;gap:8px;align-items:stretch}
.asetos-pc-bottom form{flex:1;display:flex}
.asetos-pc-cart{flex:1;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--white);border:none;padding:0.55rem 0.75rem;font-size:0.82rem;font-weight:700;font-family:var(--font-sans);border-radius:4px;cursor:pointer;transition:all var(--tr);text-decoration:none;width:100%;text-transform:uppercase;letter-spacing:0.3px}
.asetos-pc-cart:hover{background:var(--navy-dark)}
.asetos-pc-wa{display:flex;align-items:center;justify-content:center;background:var(--lime);padding:0.55rem 0.85rem;border-radius:4px;transition:background var(--tr);text-decoration:none;flex-shrink:0}
.asetos-pc-wa:hover{background:var(--lime-dark)}
.asetos-pc-wa svg{width:18px;height:18px;fill:var(--white)}
.asetos-section-heading{text-align:center;margin-bottom:2.5rem}
.asetos-section-heading .overline{font-size:0.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--lime);margin-bottom:0.5rem;display:block}
.asetos-section-heading h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--navy);margin:0 0 0.75rem;font-weight:400}
.asetos-section-heading p{color:var(--gray-dark);font-size:1rem;margin:0}
.asetos-section-heading .underline{display:block;width:60px;height:3px;background:var(--lime);margin:1rem auto 0;border-radius:2px}
.asetos-hero{background:var(--navy);position:relative;overflow:hidden;min-height:480px}
.asetos-hero-placeholder{color:rgba(255,255,255,0.25);font-size:0.85rem;text-align:center;border:1px dashed rgba(255,255,255,0.15);border-radius:12px;padding:3rem 2rem}
.asetos-nav-links>li>a[style*="padding"]::after{display:none}
.asetos-hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity 0.7s ease,visibility 0s linear 0.7s;padding:2.5rem 0;pointer-events:none;display:flex;align-items:center}
.asetos-hero-slide.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.7s ease,visibility 0s}
.asetos-hero-inner{max-width:var(--max-w);width:100%;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:center}
.asetos-hero-text{min-width:0}
.asetos-hero-label{font-size:0.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--lime);margin-bottom:1rem;display:block;min-height:1.2em}
.asetos-hero-text h2{font-size:clamp(1.8rem,4vw,3rem)!important;color:var(--white)!important;line-height:1.15;margin:0 0 1.25rem;font-weight:400;letter-spacing:-0.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.15em * 2)}
.asetos-hero-text h2 em{color:var(--lime)!important;font-style:italic}
.asetos-hero-text p{font-size:1.05rem;color:rgba(255,255,255,0.8)!important;margin:0 0 2rem;max-width:480px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.5em * 3);line-height:1.5}
.asetos-hero-cta{display:inline-flex;align-items:center;gap:0.5rem;background:var(--lime);color:var(--white);padding:0.9rem 2rem;font-size:0.9rem;font-weight:700;border-radius:4px;text-decoration:none;text-transform:uppercase;letter-spacing:0.5px;transition:all var(--tr)}
.asetos-hero-cta:hover{background:var(--lime-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 20px rgba(122,181,92,0.3)}
.asetos-hero-image{display:flex;align-items:center;justify-content:center}
.asetos-hero-image img{max-width:100%;max-height:340px;width:auto;object-fit:contain;border-radius:16px;background:var(--white);padding:0.5rem;box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.asetos-hero-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.asetos-hero-dot{height:6px;border-radius:3px;border:none;cursor:pointer;transition:all var(--tr);padding:0;background:rgba(255,255,255,0.25);width:8px}
.asetos-hero-dot.active{background:var(--lime);width:24px}
.asetos-banners{padding:3rem 0}
.asetos-banners-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.asetos-banner{position:relative;border-radius:var(--r);overflow:hidden;min-height:200px;display:flex;align-items:flex-end;padding:2rem;text-decoration:none;transition:all var(--tr)}
.asetos-banner:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.15)}
.asetos-banner--navy{background:var(--navy)}
.asetos-banner--lime{background:var(--lime)}
.asetos-banner h3{font-size:clamp(1.2rem,2.5vw,1.5rem);color:var(--white)!important;margin:0 0 4px;font-weight:400}
.asetos-banner p{color:rgba(255,255,255,0.8);font-size:0.88rem;margin:0 0 1rem}
.asetos-banner-btn{display:inline-block;padding:0.55rem 1.4rem;font-size:0.82rem;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;transition:all var(--tr)}
.asetos-banner--navy .asetos-banner-btn{background:var(--lime);color:var(--white)}
.asetos-banner--navy .asetos-banner-btn:hover{background:var(--lime-dark);color:var(--white);transform:translateY(-2px)}
.asetos-banner--lime .asetos-banner-btn{background:var(--white);color:var(--navy)}
.asetos-banner--lime .asetos-banner-btn:hover{background:var(--navy);color:var(--lime);transform:translateY(-2px)}
.asetos-cat-grid-section{padding:0 0 3rem}
.asetos-cat-grid-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem)}
.asetos-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.asetos-cat-card{display:block;background:var(--white);border:1px solid #E2E8F0;border-radius:var(--r);overflow:hidden;text-align:center;text-decoration:none;transition:all var(--tr)}
.asetos-cat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,56,75,0.1);border-color:var(--lime)}
.asetos-cat-card-img{aspect-ratio:1/1;background:var(--gray-light);border-bottom:1px solid #E2E8F0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.asetos-cat-card-img img{max-width:85%;max-height:85%;object-fit:contain}
.asetos-cat-card-body{padding:1rem}
.asetos-cat-card-body h4{font-size:1.05rem;color:var(--navy);margin:0 0 4px;font-weight:400}
.asetos-cat-card-body p{font-size:0.85rem;color:var(--gray-dark);margin:0 0 8px}
.asetos-cat-card-link{font-size:0.85rem;font-weight:700;color:var(--lime)}
.asetos-deal{background:linear-gradient(135deg,var(--navy) 0%,#004d66 100%);padding:3rem 0;position:relative;overflow:hidden}
.asetos-deal::before{content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(122,181,92,0.1) 0%,transparent 70%);border-radius:50%}
.asetos-deal-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.asetos-deal-image{background:rgba(255,255,255,0.06);border-radius:12px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,0.12);overflow:hidden}
.asetos-deal-image img{max-height:90%;max-width:90%;object-fit:contain}
.asetos-deal-label{display:inline-block;background:var(--gold);color:var(--white);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:5px 14px;border-radius:3px;margin-bottom:1rem}
.asetos-deal-info h2{font-size:clamp(1.4rem,3vw,1.8rem);color:var(--white)!important;line-height:1.25;margin:0 0 0.5rem;font-weight:400}
.asetos-deal-subtitle{color:rgba(255,255,255,0.7);font-size:0.95rem;line-height:1.5;margin:0 0 1.25rem}
.asetos-deal-specs{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:1.25rem}
.asetos-deal-spec{font-size:0.88rem;color:rgba(255,255,255,0.75)}
.asetos-deal-spec strong{color:var(--lime);margin-right:6px}
.asetos-deal-pricing{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.asetos-deal-price{font-size:2rem;font-weight:700;color:var(--lime);line-height:1}
.asetos-deal-was{font-size:1.1rem;color:rgba(255,255,255,0.4);text-decoration:line-through}
.asetos-deal-save{background:rgba(122,181,92,0.15);color:var(--lime);font-size:0.8rem;font-weight:700;padding:3px 10px;border-radius:3px}
.asetos-deal-stock{font-size:0.82rem;color:var(--lime);margin-bottom:1.25rem}
.asetos-deal-stock::before{content:'\25CF';margin-right:6px;font-size:0.5rem;vertical-align:middle}
.asetos-deal-countdown{display:flex;gap:10px;margin-bottom:1.5rem}
.asetos-cd-block{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:var(--r);padding:8px 12px;text-align:center;min-width:54px}
.asetos-cd-num{font-size:1.4rem;font-weight:700;color:var(--white);display:block;line-height:1.2}
.asetos-cd-label{font-size:0.65rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em}
.asetos-deal-actions{display:flex;gap:12px}
.asetos-deal-cart{background:var(--lime);color:var(--white);border:none;padding:0.75rem 1.8rem;font-size:0.9rem;font-weight:700;font-family:var(--font-sans);border-radius:4px;cursor:pointer;transition:all var(--tr);text-transform:uppercase;letter-spacing:0.5px}
.asetos-deal-cart:hover{background:var(--lime-dark)}
.asetos-deal-wa{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.25);padding:0.65rem 1.5rem;font-size:0.9rem;font-weight:700;border-radius:4px;text-decoration:none;transition:all var(--tr);text-transform:uppercase;letter-spacing:0.5px}
.asetos-deal-wa:hover{border-color:var(--lime);background:rgba(122,181,92,0.1);color:var(--white)}
.asetos-refurb{padding:3rem 0;background:var(--gray-light)}
.asetos-refurb-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem)}
.asetos-refurb-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:2rem}
.asetos-refurb-tab{background:var(--white);border:2px solid #E2E8F0;color:var(--navy);padding:0.6rem 1.5rem;font-size:0.85rem;font-weight:700;font-family:var(--font-sans);border-radius:4px;cursor:pointer;transition:all var(--tr);text-transform:uppercase;letter-spacing:0.3px}
.asetos-refurb-tab:hover{border-color:var(--navy)}
.asetos-refurb-tab.active{background:var(--navy);border-color:var(--navy);color:var(--white)}
.asetos-refurb-panel{display:none}
.asetos-refurb-panel.active{display:block}
.asetos-refurb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.asetos-view-all{text-align:center;margin-top:1.5rem}
.asetos-view-all a{display:inline-block;background:var(--navy);color:var(--white);padding:0.75rem 2rem;font-size:0.85rem;font-weight:700;border-radius:4px;text-decoration:none;transition:all var(--tr);text-transform:uppercase;letter-spacing:0.5px}
.asetos-view-all a:hover{background:var(--navy-dark);transform:translateY(-2px)}
.asetos-testimonials{padding:3rem 0}
.asetos-testimonials-inner{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem)}
.asetos-testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.asetos-reviews-featurable{min-height:120px}
.asetos-testimonial{background:var(--gray-light);border-radius:var(--r);padding:1.5rem;border:1px solid #E2E8F0}
.asetos-testimonial-stars{color:var(--gold);font-size:1rem;margin-bottom:0.75rem;letter-spacing:2px}
.asetos-testimonial p{font-family:var(--font-serif);font-size:1.1rem;font-style:italic;color:var(--navy);line-height:1.5;margin:0 0 1rem}
.asetos-testimonial-author{font-size:0.85rem;color:var(--lime);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.asetos-testimonial-source{font-size:0.75rem;color:var(--gray)}
.asetos-breadcrumbs{font-size:0.85rem;color:var(--gray);padding:0.9rem 0;max-width:var(--max-w);margin:0 auto;padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem)}
.asetos-breadcrumbs a{color:var(--navy);text-decoration:none}
.asetos-breadcrumbs a:hover{color:var(--lime)}
.asetos-collection{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem) 3rem}
.asetos-collection-layout{display:grid;grid-template-columns:260px 1fr;gap:2rem}
.asetos-sidebar{position:sticky;top:100px;align-self:start}
.asetos-filter-group{margin-bottom:1.5rem}
.asetos-filter-group h4{font-size:0.85rem;font-weight:700;color:var(--navy);margin:0 0 0.65rem;padding-bottom:0.5rem;border-bottom:2px solid var(--lime);font-family:var(--font-sans)!important;text-transform:uppercase;letter-spacing:0.3px}
.asetos-filter-option{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:0.88rem;color:var(--dark);cursor:pointer}
.asetos-filter-option input[type="checkbox"]{accent-color:var(--lime);width:16px;height:16px}
.asetos-filter-count{margin-left:auto;font-size:0.75rem;color:var(--gray)}
.asetos-price-range{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.asetos-price-input{flex:1;border:1.5px solid #E2E8F0;border-radius:4px;padding:0.55rem 0.65rem;font-size:0.88rem;font-family:var(--font-sans);background:var(--gray-light)}
.asetos-btn-filter{width:100%;background:var(--navy);color:var(--white);border:none;padding:0.6rem;font-size:0.82rem;font-weight:700;font-family:var(--font-sans);border-radius:4px;cursor:pointer;transition:background var(--tr);text-transform:uppercase;letter-spacing:0.3px}
.asetos-btn-filter:hover{background:var(--navy-dark)}
.asetos-filter-active-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:0.8rem;color:var(--gray-dark)}
.asetos-filter-clear{background:none;border:none;padding:0;font:inherit;cursor:pointer;color:var(--lime-dark);font-weight:700;text-decoration:none}
.asetos-filter-clear:hover{text-decoration:underline}
.asetos-filter-options{max-height:230px;overflow-y:auto;padding-right:4px}
.asetos-filter-option span{flex:1}
.asetos-filter-option em{color:var(--gray);font-style:normal;font-size:0.78rem}
.asetos-filter-option input:disabled+span{opacity:0.45}
.asetos-filter-toggle{display:none;align-items:center;gap:8px;width:100%;background:var(--navy);color:var(--white);border:none;padding:0.7rem 1rem;font-size:0.85rem;font-weight:700;font-family:var(--font-sans);border-radius:6px;cursor:pointer;margin-bottom:1rem;text-transform:uppercase;letter-spacing:0.3px}
.asetos-sidebar-overlay{display:none}
.asetos-sidebar-head{display:none;justify-content:space-between;align-items:center;margin-bottom:1rem}
.asetos-sidebar-head h3{margin:0;color:var(--navy);font-size:1.1rem}
.asetos-sidebar-close{background:none;border:none;font-size:1.8rem;line-height:1;color:var(--navy);cursor:pointer;padding:0 4px}
.asetos-sidebar-cta{background:var(--gray-light);border:1px solid #E2E8F0;border-radius:var(--r);padding:1.25rem;text-align:center;margin-top:1.5rem}
.asetos-sidebar-cta h4{font-size:0.92rem;color:var(--navy);margin:0 0 0.5rem;border:none;padding:0;font-family:var(--font-sans)!important;text-transform:none;letter-spacing:0}
.asetos-sidebar-cta p{font-size:0.82rem;color:var(--gray-dark);margin:0 0 0.85rem}
.asetos-sidebar-cta a{display:inline-block;background:var(--lime);color:var(--white);padding:0.55rem 1.25rem;font-size:0.82rem;font-weight:700;border-radius:4px;text-decoration:none;text-transform:uppercase;letter-spacing:0.3px}
.asetos-collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:0.85rem;border-bottom:1px solid #E2E8F0}
.asetos-collection-header h1{font-size:clamp(1.4rem,3vw,1.8rem);color:var(--navy);margin:0;font-weight:400}
.asetos-sort-select{border:1.5px solid #E2E8F0;border-radius:4px;padding:0.55rem 0.75rem;font-size:0.88rem;font-family:var(--font-sans);color:var(--navy);background:var(--gray-light)}
.asetos-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.asetos-collection-description{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #E2E8F0;color:var(--gray-dark);font-size:0.95rem;line-height:1.7;text-align:justify}
.asetos-collection-description h2,.asetos-collection-description h3{color:var(--navy);margin:1.5rem 0 0.5rem;font-weight:400}
.asetos-pagination{display:flex;justify-content:center;gap:4px;margin-top:2rem}
.asetos-pagination a,.asetos-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:4px 10px;border:1px solid #E2E8F0;border-radius:4px;font-size:0.88rem;color:var(--navy);text-decoration:none;transition:all var(--tr)}
.asetos-pagination a:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.asetos-pagination .current{background:var(--navy);color:var(--white);border-color:var(--navy)}
.asetos-product-page{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem) 3rem}
.asetos-product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding-top:1.25rem}
.asetos-gallery{min-width:0}
.asetos-gallery-main{width:100%;max-width:100%;background:var(--gray-light);border:1px solid #E2E8F0;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.asetos-gallery-main img{width:100%;height:100%;object-fit:contain;padding:6%;cursor:zoom-in}
.asetos-gallery-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:0.75rem}
.asetos-gallery-thumb{width:72px;height:72px;border:2px solid #E2E8F0;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color var(--tr)}
.asetos-gallery-thumb.active,.asetos-gallery-thumb:hover{border-color:var(--lime)}
.asetos-gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.asetos-product-info h1{font-size:clamp(1.4rem,3vw,1.8rem);color:var(--navy);margin:0 0 0.5rem;font-weight:400}
.asetos-product-meta{display:flex;gap:16px;font-size:0.82rem;color:var(--gray);margin-bottom:1rem;flex-wrap:wrap}
.asetos-product-meta strong{color:var(--navy)}
.asetos-product-price-box{display:flex;align-items:baseline;gap:12px;margin-bottom:0.35rem}
.asetos-product-current-price{font-family:var(--font-serif);font-size:1.8rem;font-weight:700;color:var(--navy)}
.asetos-product-compare-price{font-size:1.1rem;color:var(--gray);text-decoration:line-through}
.asetos-product-save-badge{background:rgba(122,181,92,0.12);color:var(--lime);font-size:0.8rem;font-weight:700;padding:3px 10px;border-radius:3px}
.asetos-product-vat{font-size:0.78rem;color:var(--gray);margin-bottom:1rem}
.asetos-product-stock-badge{display:inline-flex;align-items:center;gap:6px;padding:0.4rem 0.75rem;border-radius:4px;font-size:0.82rem;font-weight:700;margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.3px}
.asetos-product-stock-desc{font-size:0.85rem;color:var(--gray-dark);margin-bottom:1.25rem;line-height:1.6}
.asetos-variant-group{margin-bottom:1rem}
.asetos-variant-label{display:block;font-size:0.82rem;font-weight:600;color:var(--navy);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.5px}
.asetos-variant-select{width:100%;padding:0.75rem 1rem;border:1.5px solid #E2E8F0;border-radius:4px;font-size:0.95rem;font-family:var(--font-sans);color:var(--dark);background:var(--gray-light)}
.asetos-add-row{display:flex;gap:10px;margin-bottom:0.85rem}
.asetos-qty{display:flex;border:1.5px solid #E2E8F0;border-radius:4px;overflow:hidden}
.asetos-qty button{width:40px;background:var(--gray-light);border:none;font-size:1.1rem;cursor:pointer;color:var(--navy);transition:background var(--tr)}
.asetos-qty button:hover{background:#E2E8F0}
.asetos-qty input{width:48px;text-align:center;border:none;border-left:1.5px solid #E2E8F0;border-right:1.5px solid #E2E8F0;font-family:var(--font-sans);font-size:0.95rem}
.asetos-btn-add-cart{flex:1;background:var(--lime);color:var(--white);border:none;padding:0.85rem 1.5rem;font-size:0.9rem;font-weight:700;font-family:var(--font-sans);border-radius:4px;cursor:pointer;transition:all var(--tr);text-transform:uppercase;letter-spacing:0.5px}
.asetos-btn-add-cart:hover{background:var(--lime-dark);transform:translateY(-1px);box-shadow:0 4px 15px rgba(122,181,92,0.3)}
.asetos-btn-add-cart:disabled{background:var(--gray);cursor:not-allowed;transform:none;box-shadow:none}
.asetos-btn-wa-product{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;border:2px solid var(--navy);color:var(--navy);padding:0.7rem;font-size:0.85rem;font-weight:700;border-radius:4px;text-decoration:none;transition:all var(--tr);margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:0.3px}
.asetos-btn-wa-product:hover{background:var(--navy);color:var(--white)}
.asetos-btn-wa-product svg{width:20px;height:20px;fill:currentColor}
.asetos-mobicred{background:var(--gray-light);border:1px solid #E2E8F0;border-radius:var(--r);padding:0.85rem 1rem;font-size:0.85rem;color:var(--gray-dark);margin-bottom:1.25rem}
.asetos-mobicred strong{color:var(--navy)}
.asetos-product-description{border-top:1px solid #E2E8F0;padding-top:1.25rem;margin-bottom:1.25rem}
.asetos-product-description h3{font-size:1.15rem;color:var(--navy);margin:0 0 0.65rem;font-weight:400}
.asetos-product-description .rte{font-size:0.95rem;line-height:1.7;color:var(--gray-dark)}
.asetos-return-policy{background:var(--gray-light);border:1px solid #E2E8F0;border-radius:var(--r);padding:0.85rem 1rem;font-size:0.85rem;color:var(--gray-dark);margin-bottom:1.25rem}
.asetos-return-policy strong{color:var(--navy)}
.asetos-related{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem) 3rem}
.asetos-related h2{font-size:clamp(1.4rem,3vw,1.8rem);color:var(--navy);margin:0 0 1.5rem;font-weight:400}
.asetos-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.asetos-footer-lime-bar{height:4px;background:var(--lime)}
.asetos-footer{background:var(--navy-dark);color:rgba(255,255,255,0.8);padding:0;border-top:4px solid var(--lime)}
.asetos-footer-inner{max-width:var(--max-w);margin:0 auto;padding:3rem clamp(1.5rem,4vw,4rem) 2rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:2rem;border-bottom:1px solid rgba(255,255,255,0.06)}
.asetos-footer-brand img{height:36px;width:auto;margin-bottom:0.75rem}
.asetos-footer-logo{display:inline-block!important;padding:0!important;margin:0 0 0.85rem!important;line-height:0;text-decoration:none!important}
.asetos-footer-logo:hover{opacity:0.85}
.asetos-footer-logo-svg{height:44px;width:auto;display:block}
.asetos-footer-brand p{font-size:0.88rem;line-height:1.8;margin:0 0 0.5rem;color:rgba(255,255,255,0.6)}
.asetos-footer-warranty{font-size:0.82rem!important;color:rgba(255,255,255,0.35)!important;margin-top:0.5rem!important}
.asetos-footer-socials{display:flex;gap:8px;margin-top:1.25rem}
.asetos-footer-socials a{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--lime);display:flex;align-items:center;justify-content:center;color:var(--lime);transition:all var(--tr);text-decoration:none}
.asetos-footer-socials a:hover{background:var(--lime);color:var(--white)}
.asetos-footer h4{color:var(--white);font-family:var(--font-sans)!important;font-size:0.85rem;font-weight:700;margin:0 0 0.85rem;text-transform:uppercase;letter-spacing:0.5px}
.asetos-footer a{display:block;font-size:0.85rem;color:#A2A4A7;text-decoration:none;padding:0.25rem 0;transition:color var(--tr)}
.asetos-footer a:hover{color:var(--lime)}
.asetos-footer-address{font-size:0.85rem;color:rgba(255,255,255,0.5);line-height:1.7;margin-top:0.75rem}
.asetos-footer-geekie{color:var(--lime)!important;margin-top:0.75rem!important;font-weight:600}
.asetos-footer-bottom{max-width:var(--max-w);margin:0 auto;text-align:center;padding:1.25rem clamp(1.5rem,4vw,4rem);font-size:0.75rem;color:rgba(255,255,255,0.25)}
.asetos-footer-bottom a{display:inline;font-size:0.75rem;color:var(--lime);padding:0}
.asetos-wa-float{position:fixed;bottom:24px;right:24px;width:56px;height:56px;background:#7ab55c;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.2);z-index:999;transition:transform var(--tr)}
.asetos-wa-float:hover{transform:scale(1.08)}
.asetos-wa-float svg{width:30px;height:30px;fill:var(--white)}
.asetos-sticky-bar{display:none}
.asetos-sticky-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;border:1px solid #E2E8F0}
.asetos-sticky-info{display:flex;flex-direction:column;min-width:0;flex:1}
.asetos-sticky-title{font-size:0.78rem;color:var(--gray-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asetos-sticky-price{font-size:1rem;font-weight:700;color:var(--navy)}
.asetos-sticky-add{flex-shrink:0;background:var(--lime);color:var(--white);border:none;padding:0.7rem 1.1rem;font-size:0.85rem;font-weight:700;font-family:var(--font-sans);border-radius:6px;cursor:pointer;text-decoration:none;text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap}
.asetos-sticky-add:hover{background:var(--lime-dark)}
.asetos-sticky-add--wa{background:#25D366}
@media(max-width:1024px) {
  .asetos-hero-inner{grid-template-columns:1fr;gap:1.5rem;text-align:center}
  .asetos-hero-image{order:-1}
  .asetos-hero-image img{max-height:200px}
  .asetos-hero-text p{margin-left:auto;margin-right:auto}
  .asetos-hero{min-height:560px}
  .asetos-deal-inner{grid-template-columns:1fr}
  .asetos-cat-grid,.asetos-refurb-grid,.asetos-related-grid{grid-template-columns:repeat(2,1fr)}
  .asetos-footer-inner{grid-template-columns:1fr 1fr}
  .asetos-collection-layout{grid-template-columns:1fr}
  .asetos-product-layout{grid-template-columns:minmax(0,1fr)}
  .asetos-filter-toggle{display:flex}
  .asetos-sidebar-head{display:flex}
  .asetos-sidebar{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:340px;z-index:1001;background:var(--white);padding:1.25rem;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 18px rgba(0,0,0,0.18)}
  .asetos-sidebar.is-open{transform:translateX(0)}
  .asetos-sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:1000}
  .asetos-sidebar-overlay[hidden]{display:none}
}
@media(max-width:768px) {
  .asetos-product-page,.asetos-product-layout,.asetos-collection,.asetos-product-grid{max-width:100%;overflow-x:hidden}
  .asetos-product-grid{min-width:0}
  .asetos-sticky-bar.is-visible{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:998;background:var(--white);border-top:1px solid #E2E8F0;box-shadow:0 -3px 14px rgba(0,0,0,0.12);padding:0.6rem 0.9rem;padding-bottom:calc(0.6rem + env(safe-area-inset-bottom))}
  .asetos-sticky-bar.is-visible~.asetos-wa-float{bottom:90px}
  .asetos-banners-inner{grid-template-columns:1fr}
  .asetos-trust-inner{grid-template-columns:1fr 1fr}
  .asetos-testimonial-grid{grid-template-columns:1fr}
  .asetos-search{display:none}
  .asetos-header-inner{padding:0 1rem;gap:12px}
  .asetos-header-phone span{display:none}
  .asetos-header-phone svg{width:22px;height:22px}
  .asetos-header-actions{gap:10px}
  .asetos-header-actions span:not(.asetos-cart-badge){display:none}
  .asetos-nav-bar{display:flex}
  .asetos-nav-toggle{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:0;z-index:1001}
  .asetos-nav-toggle span{display:block;width:22px;height:2px;background:#fff;transition:all 0.3s}
  .asetos-nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
  .asetos-nav-toggle.active span:nth-child(2){opacity:0}
  .asetos-nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}
  .asetos-nav-inner{display:none;flex-direction:column;padding:0 1rem 1rem;max-height:70vh;overflow-y:auto}
  .asetos-nav-inner.asetos-nav-open{display:flex}
  .asetos-nav-links{display:flex;flex-direction:column;width:100%}
  .asetos-nav-links>li>a{padding:0.75rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);color:#fff}
  .asetos-nav-links>li>a::after{float:right}
  .asetos-nav-links .dropdown{position:static!important;display:none!important;background:rgba(0,0,0,0.18)!important;box-shadow:none!important;border:none!important;border-top:1px solid rgba(255,255,255,0.08)!important;border-radius:0!important;min-width:0!important;padding:0.25rem 0!important}
  .asetos-nav-links .dropdown.open{display:block!important}
  .asetos-nav-links .dropdown li a{color:rgba(255,255,255,0.85)!important;padding:0.55rem 1rem 0.55rem 2rem!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;background:transparent!important}
  .asetos-nav-links .dropdown li:last-child a{border-bottom:none!important}
  .asetos-nav-links .dropdown li a:hover{background:rgba(255,255,255,0.06)!important;color:var(--lime)!important}
  .asetos-nav-right{display:flex;margin:0;padding:0.75rem 0 0;flex-direction:column;gap:0.5rem}
  .asetos-nav-right a{display:block;text-align:center;padding:0.6rem}
  .asetos-hero{min-height:540px}
  .asetos-hero-slide{padding:1.75rem 0 3rem}
  .asetos-hero-image img{max-height:170px}
  .asetos-hero-text h2{font-size:1.6rem!important;min-height:calc(1.15em * 2)}
  .asetos-hero-text p{font-size:0.95rem;min-height:calc(1.5em * 3)}
  .asetos-hero-text .asetos-hero-cta{padding:0.8rem 1.6rem;font-size:0.85rem}
  .asetos-product-grid{grid-template-columns:repeat(2,1fr)}
  .asetos-footer-inner{grid-template-columns:1fr;gap:1.5rem}
  .asetos-refurb-tabs{flex-wrap:wrap}
  .asetos-util{padding:0.35rem 1rem;font-size:0.7rem}
}
@media(max-width:480px) {
  .asetos-cat-grid,.asetos-refurb-grid,.asetos-product-grid{grid-template-columns:1fr}
  .asetos-header-inner{padding:0 0.75rem;gap:8px}
  .asetos-header-actions{gap:8px}
  .asetos-header-phone span{display:none}
  .asetos-hero{min-height:520px}
  .asetos-hero-image img{max-height:150px}
  .asetos-hero-text h2{font-size:1.45rem!important}
  .asetos-deal-countdown{gap:6px}
  .asetos-cd-block{min-width:48px;padding:6px 8px}
  .asetos-trust-inner{grid-template-columns:1fr}
}
.asetos-badge-nostock{background:#dc3545;color:var(--white)}
.asetos-source-used{background:var(--gold);color:var(--white)}
.asetos-pc-cart--sold-out{background:var(--gray)!important;cursor:not-allowed}
.asetos-avail-badge{
  background:var(--gray-light);border:1.5px solid #E2E8F0;
  border-radius:var(--r);padding:0.85rem 1rem;margin-bottom:1.25rem;
  border-left:4px solid var(--lime);
}
.asetos-avail-badge.asetos-source-instore{border-left-color:var(--lime)}
.asetos-avail-badge.asetos-source-local{border-left-color:var(--gold)}
.asetos-avail-badge.asetos-source-import{border-left-color:var(--navy)}
.asetos-avail-badge.asetos-avail-nostock{border-left-color:#dc3545;background:#fef2f2}
.asetos-avail-title{
  font-size:0.88rem;font-weight:700;color:var(--navy);
  margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.3px;
}
.asetos-avail-badge.asetos-avail-nostock .asetos-avail-title{color:#dc3545}
.asetos-avail-detail{font-size:0.82rem;color:var(--gray-dark);line-height:1.5}
.asetos-gallery-main{position:relative}
.asetos-gallery-nostock-badge,.asetos-gallery-used-badge{
  position:absolute;z-index:5;
  font-size:0.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.05em;padding:4px 10px;border-radius:3px;
}
.asetos-gallery-nostock-badge{top:12px;right:12px;background:#dc3545;color:var(--white)}
.asetos-gallery-used-badge{top:12px;left:12px;background:var(--gold);color:var(--white)}
.asetos-product-description-full{
  margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid #E2E8F0;
}
.asetos-product-description-full h3{
  font-size:1.15rem;color:var(--navy);margin:0 0 0.75rem;font-weight:400;
}
.asetos-product-description-full .rte{
  font-size:0.95rem;line-height:1.7;color:var(--gray-dark);
  max-width:100%;
}
.asetos-product-description-full .rte h2,
.asetos-product-description-full .rte h3{
  color:var(--navy);margin:1.5rem 0 0.5rem;
}
.asetos-product-description-full .rte ul,
.asetos-product-description-full .rte ol{
  padding-left:1.5rem;margin-bottom:1rem;
}
.asetos-product-description-full .rte li{
  margin-bottom:0.35rem;
}
.asetos-product-description-full,
.asetos-product-info{min-width:0;max-width:100%}
.asetos-product-description-full .rte{overflow-wrap:break-word;word-wrap:break-word}
.asetos-product-description-full .rte img{max-width:100%;height:auto}
.asetos-product-description-full .rte iframe,
.asetos-product-description-full .rte video{max-width:100%}
.asetos-product-description-full .rte table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse}
.asetos-product-description-full .rte td,
.asetos-product-description-full .rte th{word-break:break-word}
.asetos-product-description-full .rte pre{white-space:pre-wrap;word-break:break-word}
.asetos-product-info h1,
.asetos-pc-name a{overflow-wrap:break-word;word-wrap:break-word}
.asetos-product-meta span{min-width:0;word-break:break-word}
.asetos-ptab-buttons{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid #E2E8F0;margin-bottom:1.25rem}
.asetos-ptab-btn{background:none;border:none;font-family:var(--font-sans);font-size:0.9rem;font-weight:700;color:var(--gray);padding:0.7rem 1.1rem;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:color var(--tr),border-color var(--tr);text-transform:uppercase;letter-spacing:0.3px}
.asetos-ptab-btn:hover{color:var(--navy)}
.asetos-ptab-btn.active{color:var(--navy);border-bottom-color:var(--lime)}
.asetos-ptab-panel[hidden]{display:none}
.asetos-ptab-panel{animation:asetos-fade .25s ease}
@keyframes asetos-fade{from{opacity:0}to{opacity:1}}
.asetos-page-legal{max-width:var(--max-w);margin:0 auto;padding:1.25rem clamp(1.5rem,4vw,4rem) 3rem}
.asetos-legal-head{margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:2px solid var(--lime)}
.asetos-legal-head h1{font-family:var(--font-serif);font-size:clamp(1.6rem,3.5vw,2.2rem);color:var(--navy);margin:0 0 0.5rem;font-weight:400}
.asetos-legal-updated{font-size:0.82rem;color:var(--gray);margin:0.5rem 0 0}
.asetos-policies{font-size:0.93rem;line-height:1.7;color:var(--gray-dark);max-width:100%}
.asetos-policy-section{margin:0 0 2rem;scroll-margin-top:90px}
.asetos-policy-section:last-child{margin-bottom:0}
.asetos-policies h2{font-family:var(--font-serif);font-size:1.25rem;color:var(--navy);margin:0 0 0.85rem;font-weight:400;padding-bottom:0.4rem;border-bottom:1px solid #E2E8F0}
.asetos-policies h3{font-size:0.98rem;color:var(--navy);margin:1.25rem 0 0.4rem;font-weight:700}
.asetos-policies h4{font-size:0.95rem;color:var(--navy);margin:1.25rem 0 0.4rem;font-weight:700}
.asetos-policies p{margin:0 0 0.85rem;overflow-wrap:break-word;word-wrap:break-word}
.asetos-policies ul{padding-left:1.4rem;margin:0 0 0.95rem}
.asetos-policies li{margin-bottom:0.35rem}
.asetos-policies a{color:var(--lime-dark);font-weight:600;text-decoration:none}
.asetos-policies a:hover{text-decoration:underline}
.asetos-policy-address{background:var(--gray-light);border-left:3px solid var(--lime);padding:0.75rem 1rem;border-radius:4px;font-size:0.9rem;line-height:1.6;color:var(--navy)}
.asetos-policies--compact .asetos-policies-intro{font-size:0.88rem;color:var(--gray);margin-bottom:1.1rem}
.asetos-policies--compact h4{font-family:var(--font-sans);font-size:0.9rem;color:var(--navy);margin:1.15rem 0 0.3rem;font-weight:700;text-transform:uppercase;letter-spacing:0.3px}
.asetos-policies--compact h4:first-of-type{margin-top:0}
.asetos-policies-cta{margin-top:1.35rem}
.asetos-product-description-full a.asetos-policies-readmore,
.asetos-ptab-panel a.asetos-policies-readmore,
.asetos-policies-readmore,
.asetos-policies-readmore:link,
.asetos-policies-readmore:visited{display:inline-block;background:var(--navy);color:#fff!important;padding:0.55rem 1.1rem;border-radius:4px;font-size:0.85rem;font-weight:700;text-decoration:none!important}
.asetos-product-description-full a.asetos-policies-readmore:hover,
.asetos-ptab-panel a.asetos-policies-readmore:hover,
.asetos-policies-readmore:hover,
.asetos-policies-readmore:focus,
.asetos-policies-readmore:active{background:var(--navy-dark)!important;color:#fff!important;text-decoration:none!important}
.asetos-sidebar-quote{
  background:var(--navy);color:rgba(255,255,255,0.8);
  border-radius:var(--r);padding:1.25rem;
  text-align:center;margin-top:1.5rem;
}
.asetos-sidebar-quote h4{
  font-size:0.92rem;color:var(--white);margin:0 0 0.5rem;
  border:none;padding:0;font-family:var(--font-sans)!important;
  text-transform:none;letter-spacing:0;
}
.asetos-sidebar-quote p{
  font-size:0.82rem;color:rgba(255,255,255,0.6);
  margin:0 0 0.85rem;line-height:1.5;
}
.asetos-sidebar-quote-btn{
  display:inline-block;background:var(--lime);color:var(--white);
  padding:0.6rem 1.25rem;font-size:0.82rem;font-weight:700;
  border-radius:4px;text-decoration:none;
  text-transform:uppercase;letter-spacing:0.3px;
  transition:background var(--tr);
}
.asetos-sidebar-quote-btn:hover{background:var(--lime-dark);color:var(--white)}
@media(min-width:769px) {
  .asetos-nav-bar{display:none}
  .asetos-nav-toggle{display:none}
}
@media(min-width:1025px) {
  .asetos-sidebar{overflow:visible}
}
.asetos-price-range{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:nowrap}
.asetos-price-input{flex:1;min-width:0;max-width:120px}
.shopify-section .asetos-util-links a,
.asetos-util-links a {
  color: var(--lime) !important;
}
.shopify-section .asetos-util-links a:hover,
.asetos-util-links a:hover {
  color: var(--white) !important;
}
.shopify-section .asetos-nav .asetos-nav-links>li>a,
.asetos-nav .asetos-nav-links>li>a {
  color: var(--white) !important;
}
.shopify-section .asetos-nav .asetos-nav-links>li:hover>a,
.asetos-nav .asetos-nav-links>li:hover>a {
  color: var(--lime) !important;
}
.shopify-section .asetos-nav .asetos-nav-links .dropdown li a,
.asetos-nav .asetos-nav-links .dropdown li a {
  color: var(--navy) !important;
}
.shopify-section .asetos-nav .asetos-nav-links .dropdown li a:hover,
.asetos-nav .asetos-nav-links .dropdown li a:hover {
  color: var(--lime) !important;
}
@media(max-width:768px) {
  .shopify-section .asetos-nav .asetos-nav-links .dropdown li a,
  .asetos-nav .asetos-nav-links .dropdown li a {
    color: rgba(255,255,255,0.85) !important;
  }
  .shopify-section .asetos-nav .asetos-nav-links .dropdown li a:hover,
  .asetos-nav .asetos-nav-links .dropdown li a:hover {
    color: var(--lime) !important;
  }
}
.shopify-section .asetos-nav .asetos-nav-right a,
.asetos-nav .asetos-nav-right a {
  color: var(--white) !important;
}
section.asetos-hero .asetos-hero-label{color:#7AB55C!important}
section.asetos-hero .asetos-hero-text h2{color:#ffffff!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box!important}
section.asetos-hero .asetos-hero-text h2 em{color:#7AB55C!important}
section.asetos-hero .asetos-hero-text p{color:rgba(255,255,255,0.8)!important}
section.asetos-hero .asetos-hero-cta{color:#ffffff!important}
section.asetos-hero .asetos-hero-placeholder{color:rgba(255,255,255,0.25)!important}
section.asetos-banners .asetos-banner h3{color:#ffffff!important}
section.asetos-banners .asetos-banner p{color:rgba(255,255,255,0.8)!important}
section.asetos-banners .asetos-banner-btn{color:#ffffff!important}
section.asetos-banners .asetos-banner--lime .asetos-banner-btn{color:#00384B!important}
section.asetos-deal .asetos-deal-label{color:#ffffff!important}
section.asetos-deal .asetos-deal-info h2{color:#ffffff!important}
section.asetos-deal .asetos-deal-info h2 a{color:#ffffff!important;text-decoration:none}
section.asetos-deal .asetos-deal-info h2 a:hover{text-decoration:underline}
section.asetos-deal .asetos-deal-subtitle{color:rgba(255,255,255,0.7)!important}
section.asetos-deal .asetos-deal-spec{color:rgba(255,255,255,0.75)!important}
section.asetos-deal .asetos-deal-spec strong{color:#7AB55C!important}
section.asetos-deal .asetos-deal-price{color:#7AB55C!important}
section.asetos-deal .asetos-deal-was{color:rgba(255,255,255,0.4)!important}
section.asetos-deal .asetos-deal-save{color:#7AB55C!important}
section.asetos-deal .asetos-deal-stock{color:#7AB55C!important}
section.asetos-deal .asetos-cd-num{color:#ffffff!important}
section.asetos-deal .asetos-cd-label{color:rgba(255,255,255,0.5)!important}
section.asetos-deal .asetos-deal-cart{color:#ffffff!important}
section.asetos-deal .asetos-deal-wa{color:#ffffff!important}
.shopify-section div.asetos-view-all a,
section div.asetos-view-all a,
div.asetos-view-all a{color:#ffffff!important}
.shopify-section div.asetos-view-all a:hover,
section div.asetos-view-all a:hover,
div.asetos-view-all a:hover{color:var(--lime)!important}
div.asetos-sidebar-quote h4{color:#ffffff!important}
div.asetos-sidebar-quote p{color:rgba(255,255,255,0.6)!important}
div.asetos-sidebar-quote .asetos-sidebar-quote-btn{color:#ffffff!important}
footer.asetos-footer h4{color:#ffffff!important}
footer.asetos-footer a{color:#A2A4A7!important}
footer.asetos-footer a:hover{color:#7AB55C!important}
footer.asetos-footer .asetos-footer-brand p{color:rgba(255,255,255,0.6)!important}
footer.asetos-footer .asetos-footer-warranty{color:rgba(255,255,255,0.35)!important}
footer.asetos-footer .asetos-footer-warranty em{color:rgba(255,255,255,0.35)!important}
footer.asetos-footer .asetos-footer-address{color:rgba(255,255,255,0.5)!important}
footer.asetos-footer .asetos-footer-geekie{color:#7AB55C!important}
footer.asetos-footer .asetos-footer-socials a{color:#7AB55C!important}
div.asetos-footer-bottom{color:rgba(255,255,255,0.4)!important}
div.asetos-footer-bottom a{color:#7AB55C!important}
.asetos-zoomable{cursor:zoom-in}
.asetos-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(8,20,30,0.92);opacity:0;visibility:hidden;transition:opacity .25s ease;padding:24px}
.asetos-lightbox.is-open{opacity:1;visibility:visible}
.asetos-lightbox-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:scale(.96);transition:transform .25s ease;background:#fff}
.asetos-lightbox.is-open .asetos-lightbox-img{transform:scale(1)}
.asetos-lightbox-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.asetos-lightbox-close:hover{background:rgba(255,255,255,.25)}
.asetos-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.asetos-lightbox-nav:hover{background:rgba(255,255,255,.25)}
.asetos-lightbox-prev{left:18px}
.asetos-lightbox-next{right:18px}
.asetos-lightbox.is-single .asetos-lightbox-nav{display:none}
.asetos-lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:.85rem;letter-spacing:.04em}
.asetos-lightbox.is-single .asetos-lightbox-counter{display:none}
.asetos-lightbox[hidden]{display:none}
@media (max-width:600px) {
  .asetos-lightbox{padding:12px}
  .asetos-lightbox-nav{width:40px;height:40px;font-size:1.5rem}
  .asetos-lightbox-prev{left:8px}
  .asetos-lightbox-next{right:8px}
  .asetos-lightbox-close{top:10px;right:12px}
}
.shopify-section.asetos-footer-section .asetos-footer a{color:#A2A4A7!important}
.shopify-section.asetos-footer-section .asetos-footer a:hover{color:#7AB55C!important}
.shopify-section.asetos-footer-section .asetos-footer .asetos-footer-socials a{color:#7AB55C!important}
.shopify-section.asetos-footer-section .asetos-footer .asetos-footer-socials a:hover{color:#FFFFFF!important}
.shopify-section.asetos-footer-section .asetos-footer .asetos-footer-geekie{color:#7AB55C!important}
.shopify-section.asetos-footer-section .asetos-footer .asetos-footer-bottom a{color:#7AB55C!important}
/* ==== END ported theme components ==== */

/* --- additions for the static build -------------------------------------
   Rules the Shopify theme got from Dawn or from Liquid-rendered markup, plus
   the controls a static hero needs (arrows, reduced-motion, stat line). */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.asetos-hero-slide.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .7s ease; }
/* Hero h2/p are styled by the ported theme rules above; do not duplicate them. */

/* Static (non-slideshow) hero. The theme's hero holds its height with
   min-height because its slides are absolutely positioned; this variant has
   real content in flow, so it sizes itself and only needs padding. */
.asetos-hero--static { min-height: 0; padding: 3rem 0; display: block; }
.asetos-hero--static .asetos-hero-inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
.asetos-hero--static .asetos-hero-text h2 { -webkit-line-clamp: none; display: block; min-height: 0; }
.asetos-hero--static .asetos-hero-text p { -webkit-line-clamp: none; display: block; min-height: 0; margin-bottom: 1.6rem; }
.asetos-hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.asetos-hero-cta--ghost { background: transparent; border: 2px solid rgba(255,255,255,.5); }
.asetos-hero-cta--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.asetos-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.asetos-hero-stat { border-left: 3px solid var(--lime); padding-left: .85rem; }
.asetos-hero-stat b { display: block; font-family: var(--font-serif); font-size: 1.7rem; color: #fff; line-height: 1.1; }
.asetos-hero-stat span { font-size: .74rem; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .5px; }

/* The finder is the hero's primary action, so it reads as a panel. */
.finder { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r); padding: 1.5rem; }
.finder-title { color: #fff !important; font-size: 1.25rem !important; margin: 0 0 .2rem !important; min-height: 0 !important; display: block !important; }
.finder-sub { color: rgba(255,255,255,.65) !important; font-size: .85rem !important; margin: 0 0 1.1rem !important; min-height: 0 !important; display: block !important; }
.finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.finder label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.8); margin-bottom: .3rem; }
.finder select {
  width: 100%; padding: .62rem .7rem; border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px; background: #fff; color: var(--dark);
  font-family: var(--font-sans); font-size: .9rem;
}
.finder .btn { margin-top: 1.1rem; width: 100%; }
.finder-alt { margin: .8rem 0 0 !important; font-size: .8rem; color: rgba(255,255,255,.65) !important; text-align: center; min-height: 0 !important; display: block !important; }
.finder-alt a { color: var(--lime) !important; font-weight: 600; }

@media (max-width: 1024px) {
  .asetos-hero--static .asetos-hero-inner { grid-template-columns: 1fr; text-align: left; }
  .asetos-hero--static .asetos-hero-text p { margin-left: 0; margin-right: 0; }
}
@media (max-width: 520px) {
  .finder-grid { grid-template-columns: 1fr; }
  .asetos-hero-stats { grid-template-columns: 1fr; gap: .5rem; }
}
.asetos-hero-cta:hover { background: var(--lime-dark); color: var(--white); }
.asetos-hero-stat { display: block; margin-top: 1rem; font-size: .8rem; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.asetos-hero-image img { max-height: 340px; width: auto; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(0,0,0,.35)); }
.asetos-hero-dot.active { background: var(--lime); width: 26px; }
.asetos-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 11;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; transition: background var(--tr);
}
.asetos-hero-arrow:hover { background: rgba(255,255,255,.28); }
.asetos-hero-prev { left: 14px; }
.asetos-hero-next { right: 14px; }

/* Promo banner frames */
.asetos-banner-content { position: relative; z-index: 2; }
.asetos-banner-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; opacity: .75; display: block; margin-bottom: .5rem; }
.asetos-banner-heading { font-family: var(--font-serif); font-size: 1.6rem; margin: 0 0 .5rem; }
.asetos-banner-text { font-size: .92rem; line-height: 1.55; margin: 0 0 1.1rem; max-width: 44ch; }
.asetos-banner--navy, .asetos-banner--navy .asetos-banner-heading { color: var(--white); }
.asetos-banner--navy .asetos-banner-text { color: rgba(255,255,255,.78); }
.asetos-banner--lime, .asetos-banner--lime .asetos-banner-heading { color: var(--white); }
.asetos-banner--lime .asetos-banner-text { color: rgba(255,255,255,.9); }
.asetos-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Category cards */
.asetos-cats { padding: 3rem 0; }
.asetos-cats-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 4rem); }
.asetos-section-head { margin-bottom: 1.6rem; }
.asetos-section-head h2 { margin: 0 0 .25rem; }
.asetos-section-head p { margin: 0; color: var(--gray-dark); font-size: .93rem; }
.asetos-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.asetos-cat-card:hover { border-color: var(--lime); box-shadow: var(--shadow); transform: translateY(-3px); }
.asetos-cat-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.asetos-cat-card-title { font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--navy); margin: 0 0 .25rem; }
.asetos-cat-card-meta { font-size: .78rem; color: var(--gray-dark); margin: 0 0 .5rem; }

/* Deal of the week */
.asetos-deal-image img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.asetos-deal-title { color: var(--white); font-family: var(--font-serif); font-size: 1.75rem; margin: 0 0 .5rem; }
.asetos-deal-time { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: .5rem .7rem; text-align: center; min-width: 58px; }
.asetos-deal-time b { display: block; font-size: 1.25rem; color: var(--white); font-family: var(--font-serif); line-height: 1; }
.asetos-deal-time small { font-size: .65rem; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.55); }
.asetos-deal-alt { border-color: rgba(255,255,255,.5) !important; color: #fff !important; }
.asetos-deal-alt:hover { background: rgba(255,255,255,.12) !important; }

/* Tabbed classification section */
.asetos-refurb-tab:hover { border-color: var(--lime); color: var(--lime-dark); }
.asetos-refurb-tab.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.asetos-refurb-tab-n { display: inline-block; margin-left: .4rem; font-size: .72rem; opacity: .65; }
.asetos-refurb-panel.active { display: block; }
.asetos-refurb-blurb { text-align: center; color: var(--gray-dark); font-size: .9rem; margin: 0 0 1.2rem; }
.asetos-refurb-more { text-align: center; margin-top: 1.5rem; }

/* Product page availability frame */
.asetos-avail-ship { margin-top: .7rem; border-top: 1px dashed var(--line); padding-top: .6rem; }
.asetos-avail-ship-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; padding: .18rem 0; }
.asetos-avail-ship-row span:first-child { color: var(--navy); font-weight: 600; }
.asetos-avail-ship-row span:last-child { color: var(--gray-dark); text-align: right; }
.asetos-avail-ship-eta { display: block; font-size: .76rem; color: var(--gray); }
.asetos-avail-free { color: var(--lime-dark); font-weight: 700; }

@media (max-width: 1050px) {
  .asetos-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .asetos-hero-arrow { display: none; }
  .asetos-hero-image img { max-height: 210px; }
  .asetos-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .asetos-deal-inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .asetos-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .asetos-deal-actions { flex-direction: column; }
  .asetos-deal-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .asetos-hero-slide { transition: none; }
  .asetos-banner:hover, .asetos-cat-card:hover, .card:hover { transform: none; }
}

/* Real Asetos wordmark in the header, same asset as the SA store. */
.logo { align-items: baseline; }
.logo-svg { height: 42px; width: auto; display: block; }
.logo .logo-ke { font-family: var(--font-sans); font-weight: 700; font-size: .82rem; color: var(--lime); letter-spacing: .3px; }

/* Footer pieces the theme rendered from Liquid. */
.asetos-footer a:hover { color: var(--lime) !important; }
.asetos-footer-socials a:hover { background: var(--lime); color: #fff !important; }
.asetos-footer-payments {
  max-width: var(--max-w); margin: 0 auto; display: flex; gap: .5rem; flex-wrap: wrap;
  justify-content: center; padding: 1.1rem clamp(1.5rem, 4vw, 4rem) 0;
}
.asetos-footer-bottom a { display: inline; }

@media (max-width: 860px) {
  .logo-svg { height: 34px; }
}

/* Mobile sticky add-to-cart, shown only once the buy row scrolls away. */
.asetos-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 995;
  display: none; align-items: center; gap: .7rem;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(0,56,75,.12); padding: .55rem .9rem;
}
.asetos-sticky-bar.visible { display: flex; }
.asetos-sticky-thumb { width: 44px; height: 44px; object-fit: contain; background: var(--gray-light); border-radius: 4px; flex-shrink: 0; }
.asetos-sticky-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.asetos-sticky-title { font-size: .78rem; color: var(--navy); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asetos-sticky-price { font-family: var(--font-serif); font-size: 1rem; color: var(--navy); }
@media (min-width: 861px) { .asetos-sticky-bar.visible { display: none; } }

/* Product page scaffolding the theme inherited from Dawn. */
.asetos-product-page { max-width: var(--max-w); margin: 0 auto; padding: 1rem clamp(1.25rem,4vw,4rem) 3rem; }
.asetos-product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.asetos-gallery-main { position: relative; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--gray-light); aspect-ratio: 1/1; padding: 1.5rem; }
.asetos-gallery-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.asetos-gallery-nostock-badge, .asetos-gallery-used-badge {
  position: absolute; top: .75rem; z-index: 2; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding: .22rem .55rem;
  border-radius: 3px; color: #fff;
}
.asetos-gallery-nostock-badge { right: .75rem; background: var(--red); }
.asetos-gallery-used-badge { left: .75rem; background: var(--gray-dark); }
.asetos-gallery-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.asetos-gallery-thumb { width: 72px; height: 72px; border: 1.5px solid var(--line); border-radius: 4px; background: var(--gray-light); padding: 4px; cursor: pointer; }
.asetos-gallery-thumb.active { border-color: var(--lime); }
.asetos-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.asetos-product-info h1 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin: 0 0 .6rem; }
.asetos-product-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--gray-dark); margin-bottom: 1rem; }
.asetos-product-meta strong { color: var(--navy); }
.asetos-btn-add-cart { flex: 1; background: var(--lime); color: var(--white); border: none; padding: .85rem 1.5rem; font-size: .9rem; font-weight: 700; font-family: var(--font-sans); border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; transition: background var(--tr); }
.asetos-btn-add-cart:hover { background: var(--lime-dark); color: var(--white); }
.asetos-qty { display: flex; border: 1.5px solid var(--line); border-radius: 4px; overflow: hidden; }
.asetos-qty button { width: 38px; background: var(--gray-light); border: none; font-size: 1.1rem; cursor: pointer; color: var(--navy); }
.asetos-qty input { width: 52px; text-align: center; border: none; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); font-family: var(--font-sans); }
.asetos-product-description-full { margin-top: 2.5rem; }
.asetos-ptab-btn.active { color: var(--navy); border-bottom-color: var(--lime); }
.asetos-ptab-panel { display: none; }
.asetos-ptab-panel.active { display: block; }
.asetos-related { background: var(--gray-light); padding: 3rem 0; }
@keyframes asetos-fade { from { opacity: 0 } to { opacity: 1 } }
@media (max-width: 860px) {
  .asetos-product-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Deal-of-the-week flags, so a discounted line is obvious wherever it appears. */
.badge-deal { background: var(--gold); top: auto; bottom: .6rem; left: .6rem; }
.asetos-product-deal-flag {
  display: inline-block; background: var(--gold); color: #fff; font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 3px;
}

/* ---- requested UI adjustments ------------------------------------------ */

/* Header search: the theme's wireframe magnifier. */
.search button svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; }

/* Nav CTAs: WhatsApp is lime with white text; Get Quote is its reverse. */
.btn-wa {
  background: var(--lime); color: var(--white);
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-wa:hover { background: var(--lime-dark); color: var(--white); }
.btn-wa svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.btn-quote {
  background: var(--white); color: var(--lime-dark);
  padding: .5rem 1.05rem; border-radius: 4px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  display: inline-flex; align-items: center; transition: opacity var(--tr);
}
.btn-quote:hover { background: var(--gray-light); color: var(--lime-dark); }

/* The card's WhatsApp button carries the real mark, so it needs a fill icon. */
.asetos-pc-wa svg { width: 18px; height: 18px; fill: var(--white); }
.asetos-btn-wa-product svg { width: 20px; height: 20px; fill: currentColor; }

/* The deal title is a link on a navy panel, so it must not inherit the navy
   link colour; the theme has the same override for its own deal block. */
.asetos-deal-title a { color: var(--white); }
.asetos-deal-title a:hover { color: var(--lime); }

/* Centred section headings across the shop-by-brand → shop-by-speed run. */
.asetos-cats .asetos-section-head,
.asetos-refurb .asetos-section-head { text-align: center; }
.asetos-cats .asetos-section-head p,
.asetos-refurb .asetos-section-head p { margin-left: auto; margin-right: auto; max-width: 62ch; }

/* ---- nav, search and CTA refinements ----------------------------------- */

/* Primary nav spreads across the bar instead of bunching at the left. */
.main-nav > .container > ul { display: flex; flex: 1; justify-content: space-between; flex-wrap: wrap; }
.main-nav > .container > ul > li { flex: 1 1 auto; text-align: center; }
.main-nav > .container > ul > li > a { padding: 0.9rem 0.6rem; white-space: nowrap; }
.main-nav .container { gap: 1.5rem; }
.dropdown { text-align: left; }

/* The category select was too narrow against the search field. */
.search select { max-width: none; min-width: 190px; flex: 0 0 190px; }

/* WhatsApp CTAs use the brand lime, not Safaricom's luminous green. */
.wa-float, .asetos-wa-float { background: var(--lime); }
.wa-float:hover, .asetos-wa-float:hover { background: var(--lime-dark); }
.asetos-sticky-add--wa { background: var(--lime); }

@media (max-width: 1100px) {
  .main-nav > .container > ul > li > a { padding: 0.9rem 0.45rem; font-size: 0.76rem; }
  .search select { min-width: 150px; flex: 0 0 150px; }
}
@media (max-width: 860px) {
  /* Re-assert the drawer collapse: the spread-nav rule above is unconditional
     and later in the file, so it would otherwise beat the earlier mobile rule
     and leave the menu permanently open. */
  .main-nav > .container > ul { display: none; flex: none; justify-content: flex-start; }
  .main-nav > .container > ul.open { display: flex; flex-direction: column; width: 100%; }
  .main-nav > .container > ul > li { flex: none; text-align: left; }
  .search select { min-width: 0; flex: 0 1 130px; }
}

/* ---- content page furniture -------------------------------------------
   Long-form pages were plain columns of prose. These give them structure:
   a lead paragraph, feature cards, step lists, stat bands and pull-outs. */

.page-head { background: var(--gray-light); border-bottom: 1px solid var(--line); padding: 2.25rem 0 2rem; margin-bottom: 2rem; }
.page-head .container { max-width: var(--max-w); }
.page-head h1 { margin: 0 0 .5rem; }
.page-lead { font-size: 1.1rem; line-height: 1.65; color: var(--gray-dark); margin: 0; max-width: 80ch; }
.page-head .crumbs { padding: 0 0 .6rem; }

.prose h2 { margin-top: 2.2rem; padding-bottom: .5rem; border-bottom: 2px solid var(--line); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6rem; color: var(--navy); font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .4px; }
.prose > p:first-of-type { font-size: 1.03rem; }
.prose a { color: var(--lime-dark); font-weight: 600; }
.prose a:hover { text-decoration: underline; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.prose ul li::before {
  /* Wireframe tick drawn as an SVG mask, not a text dingbat, so it obeys the
     icons-only rule and takes the brand colour. */
  content: ""; position: absolute; left: 0; top: .45em;
  width: 15px; height: 15px; background: var(--lime);
  -webkit-mask: var(--tick) center / contain no-repeat;
          mask: var(--tick) center / contain no-repeat;
}
.prose ol { padding-left: 1.3rem; }
.prose ol li { margin-bottom: .55rem; }
.prose ol li::marker { color: var(--lime-dark); font-weight: 700; }

/* Two-column body: prose plus a sticky helper rail. */
.page-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 2.5rem; align-items: start; }
.page-rail { position: sticky; top: 68px; display: grid; gap: 1rem; }
.rail-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r); padding: 1.15rem; }
.rail-card h4 { font-family: var(--font-sans); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--navy); margin: 0 0 .6rem; padding-bottom: .45rem; border-bottom: 2px solid var(--lime); }
.rail-card p { font-size: .88rem; color: var(--gray-dark); margin: 0 0 .8rem; }
.rail-card .btn { width: 100%; }
.rail-card--navy { background: var(--navy); border-color: var(--navy); }
.rail-card--navy h4 { color: #fff; }
.rail-card--navy p { color: rgba(255,255,255,.75); }

/* Feature / value cards. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.feature { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r); padding: 1.25rem; transition: all var(--tr); }
.feature:hover { border-color: var(--lime); box-shadow: var(--shadow); transform: translateY(-2px); }
.feature-ico { width: 40px; height: 40px; border-radius: 8px; background: rgba(122,181,92,.14); color: var(--lime-dark); display: grid; place-items: center; font-size: 1.15rem; margin-bottom: .7rem; }
.feature h3 { margin: 0 0 .35rem; font-family: var(--font-sans); font-size: .98rem; font-weight: 700; color: var(--navy); text-transform: none; letter-spacing: 0; }
.feature p { margin: 0; font-size: .88rem; color: var(--gray-dark); line-height: 1.6; }

/* Numbered steps. */
.steps { display: grid; gap: .9rem; margin: 1.5rem 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.1rem;
}
.step h3 { margin: .35rem 0 .25rem; font-size: .98rem; text-transform: none; letter-spacing: 0; }
.step p { margin: 0; font-size: .9rem; color: var(--gray-dark); }

/* Stat band. */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; background: var(--navy); border-radius: var(--r); padding: 1.5rem; margin: 1.75rem 0; }
.stat-band .stat { text-align: center; }
.stat-band .stat b { display: block; font-family: var(--font-serif); font-size: 1.9rem; color: #fff; line-height: 1.1; }
.stat-band .stat span { font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.7); }

/* Pull-out callout. */
.callout { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--gray-light); border-left: 4px solid var(--lime); border-radius: 0 var(--r) var(--r) 0; padding: 1.15rem 1.3rem; margin: 1.5rem 0; }
.callout-ico { font-size: 1.3rem; color: var(--lime-dark); }
.callout b { color: var(--navy); display: block; margin-bottom: .25rem; }
.callout p { margin: 0; font-size: .92rem; color: var(--gray-dark); }

/* Zone / comparison table styling for the shipping page. */
.zone-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; }
.zone-table th { background: var(--navy); color: #fff; text-align: left; padding: .7rem .85rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.zone-table td { padding: .75rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.zone-table tr:nth-child(even) td { background: var(--gray-light); }
.zone-table .zone-name { font-weight: 700; color: var(--navy); }
.zone-table .zone-blurb { display: block; font-size: .8rem; color: var(--gray-dark); font-weight: 400; margin-top: .15rem; }
.zone-table .zone-cost { font-family: var(--font-serif); color: var(--navy); white-space: nowrap; }

@media (max-width: 1050px) {
  .page-cols { grid-template-columns: 1fr; }
  .page-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
}
@media (max-width: 620px) {
  .zone-table thead { display: none; }
  .zone-table tr { display: block; border-bottom: 1.5px solid var(--line); padding: .6rem 0; }
  .zone-table td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; background: none !important; }
  .zone-table td::before { content: attr(data-label); font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-dark); font-weight: 700; }
}

/* VAT-inclusive tag beside prices; house rule is prices always include VAT. */
.vat-tag { font-size: .62rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-dark); background: var(--gray-light); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; vertical-align: middle; white-space: nowrap; }
.asetos-deal-price .vat-tag { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.75); }
.asetos-deal-label svg, .asetos-product-deal-flag svg { vertical-align: -2px; margin-right: 3px; }
.feature-ico svg, .callout-ico svg { display: block; }

/* Spec list with icons, matching the Shopify product spec block: lime glyph in
   a fixed cell, label, value, hairline divider between rows. */
.asetos-specs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: 640px; }
.asetos-specs li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.asetos-spec-ico { color: var(--lime); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.asetos-spec-label { font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--gray-dark); font-weight: 600; }
.asetos-spec-value { font-size: .95rem; color: var(--navy); font-weight: 700; text-align: right; }
@media (max-width: 520px) {
  .asetos-specs li { grid-template-columns: 22px 1fr; row-gap: 2px; }
  .asetos-spec-value { grid-column: 2; text-align: left; }
}

/* Ten brand tiles need a denser grid than the five-up category rows. */
.asetos-cats .asetos-cat-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1050px) { .asetos-cats .asetos-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .asetos-cats .asetos-cat-grid { grid-template-columns: repeat(2, 1fr); } }

/* Manufacturer marks: drawn as a mask so every logo on the row renders in the
   same uniform colour whatever colour the source file happens to be. */
.asetos-cat-card--logo .asetos-cat-card-img { background: var(--navy); border-bottom-color: var(--navy); }
.asetos-brand-logo {
  display: block; width: 70%; height: 56%;
  background-color: var(--white);
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  transition: background-color var(--tr);
}
.asetos-cat-card--logo:hover .asetos-brand-logo { background-color: var(--lime); }

/* ---- mobile-first buy flow ---------------------------------------------
   The cart and checkout used inline two-column grids. An inline style cannot
   be overridden by a media query, so on a phone the sidebar column forced the
   page wider than the viewport and the whole layout had to be panned. These
   are real classes so they can collapse. */

.checkout-layout,
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
}
.cart-layout { grid-template-columns: minmax(0, 1fr) 330px; }
.container--narrow { max-width: 880px; }
.order-totals { max-width: 320px; margin-left: auto; margin-top: 1rem; }
.enquiry-form { max-width: 720px; }

@media (max-width: 900px) {
  .checkout-layout,
  .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* The summary is the thing a shopper wants to see before committing, so on a
     phone it sits above the form rather than far below it. */
  .checkout-layout .cart-summary { order: -1; }
  .order-totals { max-width: none; margin-left: 0; }
  .enquiry-form { max-width: none; }
}

/* Prose-plus-sidebar pages. Same problem as the checkout: these were inline
   grids that could not collapse. */
.split-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .split-cols { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }

/* Grid and flex children default to min-width:auto, so a long part number or a
   wide table pushes the whole track past the viewport instead of wrapping. */
.form-grid > *, .page-cols > *, .shop-layout > * { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }

/* Cart table becomes stacked cards on a phone: a five-column table cannot fit
   375px without either scrolling sideways or shrinking text to nothing. */
@media (max-width: 700px) {
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-table tr {
    position: relative; border: 1.5px solid var(--line); border-radius: var(--r);
    padding: .75rem 2.5rem .75rem .75rem; margin-bottom: .75rem;
  }
  .cart-table td { border: 0; padding: .2rem 0; }
  .cart-table td::before {
    content: attr(data-label); display: block;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--gray-dark); font-weight: 700;
  }
  .cart-table td:empty { display: none; }
  /* The remove button pins to the card corner rather than taking a row. */
  .cart-table td.cart-remove { position: absolute; top: .5rem; right: .5rem; padding: 0; }
  .cart-table td.cart-remove::before { content: none; }
  .cart-thumb { width: 56px; height: 56px; }
}

/* Checkout submit placement. On desktop the button lives in the summary
   column; on a phone the summary is moved above the form, so the button has to
   move to the end of the form or the shopper meets Place Order before the
   fields they have to fill in. */
.checkout-submit-mobile { display: none; }
@media (max-width: 900px) {
  .checkout-submit-desktop { display: none; }
  .checkout-submit-mobile { display: block; margin-top: 1.5rem; }
}

/* Per-unit price on a multipack listing. */
.pc-unit { display: block; font-size: .72rem; color: var(--lime-dark); font-weight: 700; margin-top: .1rem; }

/* Brand tiles are a navy panel carrying the supplied SFP and LC connector
   artwork above the brand name, not a product photo on a light well, so the
   navy runs to the edges of the card's square image area. Scoped to the brand
   grid: the speed row shows real product photos and keeps the theme's padded,
   centred treatment. */
.asetos-cat-grid--brand .asetos-cat-card-img {
  display: block; padding: 0;
  background: var(--navy); border-bottom-color: var(--navy);
}
/* Named brandcard, not brand-tile: the stylesheet already carries an unrelated
   legacy .brand-tile component (white panel, grey text) whose rules would
   otherwise paint over this one. */
.brandcard {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 16px 14px 18px; gap: 10px;
  box-sizing: border-box; text-align: center;
  border-top: 7px solid var(--lime);
}
/* The artwork keeps its own proportions. It is never stretched to the square:
   it scales down to fit and the panel absorbs the difference.
   Selector carries two classes on purpose: the theme's `.asetos-cat-card-img img`
   rule forces width/height, a 14px padding and mix-blend-mode:multiply, all of
   which are wrong for a transparent tile on navy, and multiply in particular
   would sink the artwork into the background. */
.asetos-cat-grid--brand .brandcard-art {
  display: block; width: auto; height: auto; padding: 0;
  max-width: 100%; max-height: 46%;
  object-fit: contain; mix-blend-mode: normal;
}
.brandcard-name {
  color: #fff; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.1;
  font-size: clamp(15px, 1.5vw, 22px);
}
.brandcard-sub {
  color: var(--lime); font-size: 11px; line-height: 1.3;
  letter-spacing: .02em;
}

/* ---------- contact: enquiry actions + "Where we are" ---------- */
/* The form offers two ways to send the same fields, so the buttons sit as a
   pair and wrap rather than squeeze on a narrow screen. */
.enquiry-actions {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem;
}
.enquiry-actions .btn { margin: 0; }
/* Same split as the SA site: email is the navy primary, WhatsApp is the lime
   alternative. Two lime buttons side by side read as one choice made twice. */
.enquiry-actions button[type="submit"] { background: var(--navy); color: var(--white); }
.enquiry-actions button[type="submit"]:hover { background: var(--navy-dark); color: var(--white); }
.enquiry-wa {
  text-decoration: none; justify-content: center;
  padding: .8rem 1.2rem; border-radius: 4px; font-weight: 700;
}

.places { margin-top: 2.5rem; }
.places > h2 { font-size: 1.35rem; margin-bottom: .5rem; }
.places-lede { max-width: 70ch; margin-bottom: 1.4rem; }
.places-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem;
}
/* The frame: a thin navy edge with a lime rule on top, matching the brand
   tiles, so the photographs read as part of the site rather than dropped in. */
.place-card {
  margin: 0; background: var(--white);
  border: 1px solid var(--line); border-top: 5px solid var(--lime);
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 56, 75, .07);
}
.place-card picture { display: block; }
.place-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.place-card figcaption {
  padding: .85rem 1rem 1rem; font-size: .88rem; line-height: 1.5;
  color: var(--gray-dark);
}
.place-card figcaption b {
  display: block; color: var(--navy); font-size: .95rem; margin-bottom: .15rem;
}
.places-postal {
  display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.2rem;
  padding: .9rem 1rem; background: var(--gray-light);
  border-left: 3px solid var(--navy); border-radius: 0 var(--r) var(--r) 0;
  font-size: .92rem;
}
.places-postal b { color: var(--navy); margin-right: .35rem; }
.places-postal-ico { display: flex; color: var(--navy); flex-shrink: 0; }
.places-postal-ico svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .places-grid { grid-template-columns: 1fr; }
  .enquiry-actions .btn, .enquiry-wa { flex: 1 1 100%; }
}