/* Mobilais Design System — storefront layer */

:root {
  --accent: #2962f6;
  --accent-strong: #1d4fd8;
  --accent-ink: #ffffff;
  --accent-wash: rgba(41, 98, 246, 0.08);
  --bg: #f3f3f1;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-3: #f5f5f3;
  --ink: #15161b;
  --ink-2: #44464f;
  --ink-3: #6c6e78;
  --muted: #9a9ca6;
  --line: #e6e6e1;
  --line-2: #eeeeea;
  --ok: #1f9d57;
  --ok-wash: rgba(31, 157, 87, 0.1);
  --warn: #e0791b;
  --sale: #e0443a;
  --r-sm: 9px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --sh-sm: 0 1px 2px rgba(16,17,22,.05), 0 1px 1px rgba(16,17,22,.03);
  --sh: 0 8px 26px -12px rgba(16,17,22,.18);
  --sh-lg: 0 30px 70px -28px rgba(16,17,22,.32);
  --display: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1300px;
  --gut: 22px;
  --topbar-h: 38px;
  --header-h: 86px;
  --section-top: 28px;
  --card-pad: 16px;
  --grid-min: 232px;
}

[data-theme="dark"] {
  --bg: #0e0f12;
  --surface: #17181d;
  --surface-2: #1c1d23;
  --surface-3: #202128;
  --ink: #f2f2f4;
  --ink-2: #c2c3cb;
  --ink-3: #9698a2;
  --muted: #6f717c;
  --line: #2a2c33;
  --line-2: #23252b;
  --accent-wash: rgba(76,130,255,.16);
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh: 0 10px 30px -12px rgba(0,0,0,.6);
  --sh-lg: 0 30px 70px -22px rgba(0,0,0,.7);
}

/* hide legacy chrome */
#preloder,
.offcanvas-menu-overlay,
.offcanvas-menu-wrapper,
.search-model,
.search-switch { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "cv11","ss01";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-container { flex: 1; padding-bottom: 40px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .15s;
  text-decoration: none;
  box-sizing: border-box;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-strong); box-shadow: var(--sh); color: var(--accent-ink); }
.btn--ink { background: var(--ink); color: var(--surface); }
.btn--ink:hover { background: var(--ink-2); color: var(--surface); }
.btn--ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--soft { background: var(--surface-3); color: var(--ink); }
.btn--soft:hover { background: var(--line-2); color: var(--ink); }
.btn--lg { height: 56px; font-size: 15px; }
.btn--sm { height: 42px; font-size: 13px; padding: 0 16px; }
.btn--block { width: 100%; }

/* inputs */
.input,
.select,
.form-control {
  height: 50px;
  width: 100%;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.input:focus,
.select:focus,
.form-control:focus {
  outline: none;
  border-color: var(--accent);
}
.input--err,
.form-control.input--err,
.form-control.checkout-field-invalid {
  border-color: var(--sale) !important;
}
.select {
  height: 44px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c6e78' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field label,
.field p:not(.help-block-error),
.checkout__input p:not(.help-block-error) {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.field label span,
.checkout__input p span { color: var(--sale); }
.err-msg,
.help-block-error {
  color: var(--sale);
  font-size: 12px;
  margin-top: 6px;
  display: block;
  font-weight: 500;
}
.co-section .form-group.has-error .form-control,
.co-section .form-group.has-error select.form-control,
.co-section .form-control[aria-invalid="true"],
.co-section select.form-control[aria-invalid="true"],
.field .form-group.has-error .form-control,
.checkout__input .form-group.has-error .form-control,
.checkout__input .form-control[aria-invalid="true"],
.shipping-block .form-group.has-error .form-control,
.fulfillment-group-field .form-group.has-error .form-control,
.segmented .form-group.has-error .customer-option label,
.form-control.checkout-field-invalid,
input.checkout-field-invalid,
select.checkout-field-invalid,
textarea.checkout-field-invalid {
  border-color: var(--sale) !important;
}
.shipping-block--error .ship-opt {
  border-color: var(--sale) !important;
}

/* stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.stepper__btn:hover { background: var(--surface-3); color: var(--ink); }
.stepper input,
.stepper .product-qty,
.stepper .cart-qty {
  width: 48px;
  height: 44px;
  border: none;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper--sm .stepper__btn { width: 36px; height: 36px; }
.stepper--sm input,
.stepper--sm .cart-qty { width: 40px; height: 36px; font-size: 14px; }

/* topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 61;
  background: var(--ink);
  color: var(--surface);
  transition: transform .25s ease;
}
.topbar--hidden { transform: translateY(-100%); }
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  font-size: 12px;
}
.lang { display: flex; gap: 2px; }
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-decoration: none;
}
.lang a:hover { color: var(--surface); background: rgba(255,255,255,.08); }
.lang a.is-active { color: var(--surface); background: rgba(255,255,255,.14); }
.topbar__contacts { display: flex; gap: 20px; align-items: center; }
.topbar__contacts a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.topbar__contacts a:hover { color: #fff; }
.topbar__contacts .ico { opacity: .7; }

/* header */
.hd {
  position: sticky;
  top: var(--topbar-h);
  z-index: 60;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: top .25s ease;
}
.topbar--hidden + .hd { top: 0; }
.hd__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  align-items: center;
  height: var(--header-h);
  gap: 16px;
}
.logo__img { height: 62px; width: auto; display: block; }
.hd__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hd__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-3);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0 8px 0 18px;
  height: 48px;
  width: 100%;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}
.search:focus-within {
  border-color: var(--accent);
  background: var(--surface);
}
.search .ico { color: var(--ink-3); flex: none; }
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  height: 42px;
  font-size: 15px;
  color: var(--ink);
  min-width: 0;
}
.search input:focus { outline: 0; }
.search .btn--primary { height: 36px; border-radius: 999px; padding: 0 18px; font-size: 13.5px; }
.hd__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cartbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
}
.cartbtn:hover { background: var(--ink-2); color: var(--surface); }
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--display);
}
.badge-count--pop {
  animation: badge-pop .4s ease;
}
@keyframes badge-pop {
  0% { transform: scale(0.6); }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.cartbtn .price { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
.mobile-search { display: none; padding: 12px var(--gut); background: var(--bg); border-bottom: 1px solid var(--line-2); }
.mobile-search .search { border-radius: var(--r); }

/* footer — light surface (canon) */
.ft {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 52px 0 26px;
  margin-top: auto;
}
.ft .wrap { max-width: var(--maxw); }
.ft__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  row-gap: 36px;
  padding-bottom: 40px;
}
.ft__grid .row { display: contents; }
.ft__grid [class*="col-"] {
  min-width: 0;
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.ft h4, .ft h5, .ft h6, .ft .footer__widget h6 {
  color: var(--muted);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.ft p, .ft li, .ft a, .ft span {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}
.ft a:hover { color: var(--accent); }
.ft img { max-width: 100%; height: auto; }
.ft .footer__widget + .footer__widget { margin-top: 28px; }
.ft .footer__widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ft .footer__widget ul li {
  list-style: none;
  margin: 0 0 10px;
}
.ft .footer__widget ul li:last-child { margin-bottom: 0; }
.ft .footer__widget ul li:has(> img + img) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.ft .footer__widget ul li:has(> img + img) img {
  display: block;
  height: 24px;
  width: auto;
  max-width: none;
  margin: 0 !important;
  object-fit: contain;
  flex: 0 0 auto;
}
.ft .footer__widget ul li:has(> img:only-child) {
  display: flex;
  align-items: center;
}
.ft .footer__widget ul li:has(> img:only-child) img {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
  margin: 0 !important;
  object-fit: contain;
}
.ft .footer__widget ul li:has(> a > img) {
  display: flex;
  align-items: center;
}
.ft .footer__widget ul li a img {
  display: block;
  width: auto;
  max-width: 120px;
  max-height: 40px;
  height: auto;
  margin: 0 !important;
  object-fit: contain;
}
.ft .footer__widget ul li a:not(:has(img)) {
  display: block;
  padding: 6px 0;
  width: fit-content;
  text-decoration: none;
  white-space: nowrap;
}
.ft .footer__widget ul li p {
  font-size: 13.5px;
  line-height: 1.85;
  margin: 0;
}
.ft__brandimg { height: 30px; width: auto; margin-bottom: 14px; }
[data-theme="dark"] .ft__brandimg { filter: brightness(0) invert(1); opacity: .92; }
.ft__pay { height: 30px; width: auto; }
[data-theme="dark"] .ft__pay { filter: brightness(0) invert(.85); }
.ft__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
.ft__bot a { color: var(--ink-2); }
.ft__bot a:hover { color: var(--accent); }

/* crumbs + page head */
.crumbs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gut) 0;
  font-size: 13px;
  color: var(--muted);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--muted); }
.crumbs__sep { margin: 0 8px; opacity: .5; }
.page-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--gut) 24px;
}
.page-head h1 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}

/* info / text pages (canon: mobilais/pages.jsx InfoPage) */
.info-page { max-width: 860px; }
.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  box-shadow: var(--sh-sm);
}
.info-prose {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.info-prose p { margin: 0 0 14px; }
.info-prose p:last-child { margin-bottom: 0; }
.info-prose b,
.info-prose strong { color: var(--ink); font-weight: 700; }
.info-prose h1,
.info-prose h2,
.info-prose h3,
.info-prose h4 {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 24px 0 12px;
}
.info-prose h1 { font-size: clamp(22px, 2.8vw, 28px); }
.info-prose h1:first-child,
.info-prose h2:first-child,
.info-prose h3:first-child,
.info-prose h4:first-child { margin-top: 0; }
.info-prose ul,
.info-prose ol { margin: 0 0 14px; padding: 0; }
.info-prose ul { display: grid; gap: 9px; list-style: none; }
.info-prose ul li { position: relative; padding-left: 20px; }
.info-prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.info-prose ol { padding-left: 22px; }
.info-prose ol li { margin-bottom: 8px; }
.info-prose ol li:last-child { margin-bottom: 0; }
.info-prose a { color: var(--accent); text-decoration: none; }
.info-prose a:hover { text-decoration: underline; }
.info-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.info-prose iframe {
  display: block;
  max-width: 100%;
  width: 100%;
  border: 0;
  border-radius: var(--r-sm);
}
.info-prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}
.info-prose blockquote {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
}
.info-prose table {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.info-prose th,
.info-prose td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.info-prose th {
  color: var(--ink);
  font-weight: 700;
}
.info-prose tr:last-child td { border-bottom: none; }
.info-prose code {
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
}
.info-prose .container,
.info-prose .container-fluid {
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.info-prose .row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.info-prose [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: none !important;
}
.info-prose .text-white,
.info-prose .text-light,
.info-prose [class*="text-white"] {
  color: var(--ink-2) !important;
}

/* shop layout */
.shop-section { padding: var(--section-top) var(--gut) 40px; }
.crumbs ~ .shop-section,
.page-head ~ .shop-section { padding-top: 12px; }
.shop {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 28px;
  align-items: start;
}
.shop--wide { grid-template-columns: 1fr; }
.rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-sm);
}
.rail__title {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.rail__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.rail__link:hover { background: var(--surface-3); color: var(--ink); }
.rail__link.is-on { background: var(--accent-wash); color: var(--accent); }
.rail__ico {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-3);
}
.rail__ico img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .rail__ico img { mix-blend-mode: normal; }
.rail__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-2);
}
.rail__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
}
.rail__check input { position: absolute; opacity: 0; width: 0; height: 0; }
.rail__check input:checked + .rail__box {
  background: var(--accent);
  border-color: var(--accent);
}
.rail__check input:checked + .rail__box::after {
  content: "";
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: var(--sh);
  border-color: transparent;
  transform: translateY(-3px);
}
.card__media {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--surface-3);
}
.card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.card__body { padding: var(--card-pad); }
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 12px;
  text-decoration: none;
  min-height: 2.7em;
}
.card__title:hover { color: var(--accent); }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.price__now {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.price__vat {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.add {
  width: 46px;
  height: 46px;
  flex: none;
  border: 0;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.add:hover { background: var(--accent-strong); }
.add:active { transform: scale(.93); }
.add.is-added { background: var(--ok); }
.btn-cart.is-added.btn--primary { background: var(--ink); color: var(--surface); }

/* PDP */
.pdp-section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 40px; }
.pdp {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: start;
}
.gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.gallery__main {
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gallery__main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery__thumbs .thumb {
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}
.gallery__thumbs .thumb.active-thumb,
.gallery__thumbs .thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}
.gallery__thumbs .thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__title {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 20px;
  color: var(--ink);
}
.pdp__price { margin-bottom: 20px; }
.pdp__price .now {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.pdp__vat {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.pdp__list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border-top: 1px solid var(--line-2);
}
.pdp__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
}
.pdp__list li span { color: var(--ink-3); }
.pdp__list li b { font-weight: 600; color: var(--ink); }
.pdp__list li b.ok { color: var(--ok); }
.buybar {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 32px;
}
.buybar .stepper { flex-shrink: 0; }
.buybar .btn--block { flex: 1; }
.tabs { margin-top: 8px; }
.tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.tabs__tab {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
}
.tabs__body {
  padding: 24px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* cart */
.cart-section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 40px; }
.cart-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
.cart-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cart-head {
  display: grid;
  grid-template-columns: 1fr 112px 104px 44px;
  gap: 16px;
  padding: 15px 22px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
.cart-head span:nth-child(2) { text-align: center; }
.cart-head span:nth-child(3) {
  text-align: center;
}
.cart-head__actions { display: block; }
.cart-row {
  display: grid;
  grid-template-columns: 1fr 112px 104px 44px;
  gap: 16px;
  padding: 18px 22px;
  align-items: center;
  border-top: 1px solid var(--line-2);
}
.cart-row:first-of-type { border-top: none; }
.cart-row__main { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cart-row__pic {
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-row__pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}
.cart-row__title:hover { color: var(--accent); }
.cart-row__price {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}
.cart-row__qty {
  display: flex;
  justify-content: center;
}
.cart-row__total {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}
.cart-row__del {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  justify-self: end;
  cursor: pointer;
  text-decoration: none;
}
.cart-row__del:hover { border-color: var(--sale); color: var(--sale); }
body > .loadingoverlay {
  justify-content: center !important;
  align-items: center !important;
}
.summary {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-sm);
}
.summary__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.summary__hint {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.sumrow {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.sumrow span:last-child {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}
.sumrow--total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.sumrow--total span:last-child { font-size: 22px; font-weight: 800; }
.sumrow--pay { color: var(--ink-3); font-size: 13px; }

/* checkout */
.co-section { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 40px; }
.co-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 28px;
  align-items: start;
}
.co-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.co-card__title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--ink);
}
.customer-type-field { margin-bottom: 20px; }
.customer-type-field > p { margin-bottom: 8px; }
.segmented {
  display: block;
  margin-bottom: 0;
}
.segmented .form-group {
  margin: 0;
}
.segmented .seg,
.customer-option label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 40px 14px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s;
  margin: 0;
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
}
.customer-option input {
  position: absolute;
  top: 13px;
  right: 13px;
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.customer-option label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.field-row > .field,
.field-row > .checkout__input {
  margin-bottom: 0;
}
.field--span-row {
  grid-column: 1 / -1;
}
.field { margin-bottom: 16px; }
.company-data .checkout__title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 20px;
  color: var(--ink);
}
.ship-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  width: 100%;
  box-sizing: border-box;
}
.ship-opt:hover { border-color: var(--ink-3); }
.ship-opt__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
  padding: 4px;
}
.ship-opt__logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.ship-opt__body { flex: 1; min-width: 0; }
.ship-opt__head { display: block; min-width: 0; }
.ship-opt__title { font-weight: 700; font-size: 14px; color: var(--ink); display: block; }
.ship-opt__eta { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.ship-opt__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  flex-shrink: 0;
}
.shipping-method-block {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 8px;
  overflow: hidden;
}
.shipping-method-block:has(.shipping-option-input:checked),
.shipping-method-block:has(.shipping-option input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.shipping-method-block .shipping-row {
  border: none;
  margin-bottom: 0;
  background: transparent;
}
.shipping-method-block .shipping-row:has(.shipping-option-input:checked),
.shipping-method-block .shipping-row:has(.shipping-option input:checked) {
  border: none;
  background: transparent;
}
.shipping-row {
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 8px;
}
.shipping-row:has(.shipping-option-input:checked),
.shipping-row:has(.shipping-option input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
}
.shipping-row .ship-opt {
  align-items: flex-start;
}
.shipping-row .ship-opt__logo {
  margin-top: 1px;
}
.shipping-row .shipping-option-input {
  margin-top: 3px;
  flex-shrink: 0;
}
.ship-opt__detail {
  display: none;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shipping-row.is-terminal-collapsed .ship-opt__detail,
.shipping-row.is-address-collapsed .ship-opt__detail {
  display: block;
}
.shipping-terminals {
  padding: 0 16px 12px 68px;
  margin: 0;
}
.shipping-terminals:not(.d-none) {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.shipping-method-block:has(.shipping-option-input:checked) .shipping-terminals:not(.d-none),
.shipping-method-block:has(.shipping-option input:checked) .shipping-terminals:not(.d-none) {
  border-top-color: rgba(41, 98, 246, 0.18);
}
.shipping-terminals .checkout__input.field {
  margin-bottom: 0;
}
.shipping-address-actions .btn[disabled],
.shipping-address-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.checkout-address-row__control--confirm .shipping-address-confirm,
.checkout-address-row__control--confirm .shipping-group-address-confirm {
  width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  background: var(--surface-3);
  color: var(--ink-3);
  box-shadow: none;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.checkout-address-row__control--confirm .shipping-address-confirm .ico,
.checkout-address-row__control--confirm .shipping-group-address-confirm .ico {
  width: 20px;
  height: 20px;
  opacity: 0.35;
  transition: opacity .15s;
}
.checkout-address-row__control--confirm .shipping-address-confirm.is-ready,
.checkout-address-row__control--confirm .shipping-group-address-confirm.is-ready,
.checkout-address-row__control--confirm .shipping-address-confirm:not(:disabled),
.checkout-address-row__control--confirm .shipping-group-address-confirm:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 2px 10px rgba(41, 98, 246, 0.38);
  cursor: pointer;
  opacity: 1;
}
.checkout-address-row__control--confirm .shipping-address-confirm.is-ready .ico,
.checkout-address-row__control--confirm .shipping-group-address-confirm.is-ready .ico,
.checkout-address-row__control--confirm .shipping-address-confirm:not(:disabled) .ico,
.checkout-address-row__control--confirm .shipping-group-address-confirm:not(:disabled) .ico {
  opacity: 1;
}
.checkout-address-row__control--confirm .shipping-address-confirm.is-ready:hover,
.checkout-address-row__control--confirm .shipping-group-address-confirm.is-ready:hover,
.checkout-address-row__control--confirm .shipping-address-confirm:not(:disabled):hover,
.checkout-address-row__control--confirm .shipping-group-address-confirm:not(:disabled):hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.checkout-address-row__control--confirm .shipping-address-confirm:disabled,
.checkout-address-row__control--confirm .shipping-group-address-confirm:disabled {
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}
.shipping-row .ship-opt {
  margin-bottom: 0;
  border: none;
  padding: 0;
  background: transparent;
}
.shipping-row:has(.shipping-option-input:checked) .ship-opt,
.shipping-row:has(.shipping-option input:checked) .ship-opt {
  border: none;
  background: transparent;
}
.checkout__order__products { display: none; }
.customer-option {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.customer-option > br { display: none; }
.co-summary-sticky {
  align-self: start;
  min-height: 0;
}
.co-summary {
  position: sticky;
  top: calc(var(--topbar-h) + var(--header-h) + 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-sm);
}
.topbar--hidden ~ .main-container .co-summary {
  top: calc(var(--header-h) + 20px);
}
.co-summary__title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.co-prodlist { list-style: none; padding: 0; margin: 0 0 16px; }
.co-prodlist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.co-prodlist li span:last-child {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}

/* done / empty */
.done-section { max-width: 560px; margin: 0 auto; padding: 40px var(--gut); }
.done {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--sh-sm);
}
.done__check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ok-wash);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: pop .4s ease;
}
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.done h1,
.done h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink);
}
.done__order b {
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
}
.done__q {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-3);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.empty__ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--muted);
}
.empty h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--ink);
}

/* drawer */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(16,17,22,.45);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.scrim.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--surface);
  z-index: 91;
  transform: translateX(-100%);
  transition: transform .25s ease;
  padding: 24px;
  box-shadow: var(--sh-lg);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.drawer__title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
}
.drawer__close {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.drawer .rail__link { padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line-2); }
.drawer .lang { margin-top: 24px; }
.drawer .lang a { color: var(--ink-2); background: var(--surface-3); }

/* pagination */
.pagination-outer { margin-top: 32px; }
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  border: none;
  text-decoration: none;
}
.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

/* utilities */
.d-none { display: none !important; }

/* toast (canon: mobilais/ui.jsx Toasts) */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 14px;
  box-shadow: var(--sh-lg);
  font-size: 14px;
  font-weight: 600;
  pointer-events: auto;
  animation: toast-in .3s cubic-bezier(.2, 1, .3, 1);
  white-space: nowrap;
}
.toast img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.toast__ok { color: #6ee7a8; display: inline-flex; flex-shrink: 0; }
.toast--warn .toast__ok { color: #fbbf24; }
.toast__text { line-height: 1.4; white-space: normal; max-width: min(92vw, 320px); text-align: left; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* checkout fulfillment + address (from checkout inline CSS, tokenized) */
.checkout__input.fulfillment-group-field { margin-bottom: 0; }
.checkout__input.fulfillment-group-field .fulfillment-group-row {
  min-height: 50px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink);
  padding: 0 20px;
  margin-bottom: 20px;
  background: var(--surface);
  cursor: pointer;
  box-sizing: border-box;
}
.fulfillment-group-row--active {
  border-color: var(--accent, #111);
  box-shadow: 0 0 0 1px var(--accent, #111);
}
.fulfillment-group-row--dimmed .fulfillment-group-radio:not(:checked) { opacity: 0.45; }
.fulfillment-group-row--dimmed .fulfillment-group-price--empty { opacity: 0.45; }
.fulfillment-group-field .form-group { margin-bottom: 0; }
.fulfillment-group-field .help-block.help-block-error { margin-bottom: 20px; display: block; }
.shipping-method-error { display: block; color: var(--sale); }
.fulfillment-group-row__inner {
  min-height: 50px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
}
.fulfillment-group-row--complete .fulfillment-group-row__inner {
  padding-top: 12px;
  padding-bottom: 12px;
}
.fulfillment-group-body {
  display: contents;
}
.fulfillment-group-radio-wrap.shipping-option {
  grid-column: 1;
  grid-row: 1;
  flex-shrink: 0;
  min-width: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.fulfillment-group-products {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}
.fulfillment-group-price {
  grid-column: 3;
  grid-row: 1;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-width: 3.5rem;
  text-align: right;
  white-space: nowrap;
}
.fulfillment-group-shipping {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  padding-left: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.fulfillment-group-eta {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
  padding-left: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #666);
}
.fulfillment-group-shipping__title {
  display: block;
  font-weight: 600;
}
.fulfillment-group-shipping__detail {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--muted, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fulfillment-group-radio-wrap .radio { min-width: auto; margin-bottom: 0; }
.fulfillment-group-radio-wrap input[type="radio"] { pointer-events: none; margin: 0; vertical-align: middle; }
.fulfillment-group-product { font-size: 14px; line-height: 1.5; color: var(--ink); padding-left: 0; margin-left: 0; }
.fulfillment-group-price--empty { visibility: hidden; }

.terminal-picker__select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.terminal-picker__combo {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}
.terminal-picker__search-row {
  border-bottom: 1px solid var(--line);
}
.terminal-picker__search {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  background: transparent;
}
.terminal-picker__search:focus {
  box-shadow: none;
  border-color: transparent;
}
.terminal-picker__list-scroller {
  position: relative;
  max-height: 200px;
}
.terminal-picker__list {
  max-height: 200px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.terminal-picker__list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.terminal-picker__scrollbar {
  position: absolute;
  top: 4px;
  right: 2px;
  bottom: 4px;
  width: 7px;
  pointer-events: none;
}
.terminal-picker__scrollbar--hidden {
  display: none;
}
.terminal-picker__scrollbar-thumb {
  width: 7px;
  border-radius: 999px;
  background-color: rgba(21, 22, 27, 0.35);
  position: absolute;
  top: 0;
  right: 0;
  min-height: 28px;
  will-change: transform;
}
.terminal-picker__list-scroller:hover .terminal-picker__scrollbar-thumb {
  background-color: rgba(21, 22, 27, 0.55);
}
.terminal-picker__item,
.terminal-picker__empty {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.terminal-picker__item {
  cursor: pointer;
}
.terminal-picker__item:hover,
.terminal-picker__item--selected {
  background: var(--surface-2, #f3f6fb);
}
.terminal-picker__mark {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
  border-radius: 3px;
  padding: 0 1px;
}
.terminal-picker__empty {
  color: var(--ink-3, #64748b);
}
.checkout__title.checkout__title--delivery-method {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkout-delivery-section-hint { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 1; }
.shipping-price-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0 0 1px;
  border-radius: 50%;
  border: 2px solid var(--ink-3);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  box-sizing: border-box;
  transition: border-color .15s, color .15s, background .15s;
}
.shipping-price-hint:hover,
.shipping-price-hint:focus-visible {
  border-color: var(--ink-2);
  color: var(--ink);
  background: var(--surface-3);
  outline: none;
}

/* shipping hint tooltip (canon: toast overlay tokens) */
.ds-tooltip.tooltip {
  opacity: 1;
  font-family: var(--font);
  pointer-events: none;
}
.ds-tooltip .tooltip-inner {
  max-width: 280px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 12px;
  box-shadow: var(--sh-lg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
}
.ds-tooltip.bs-tooltip-top .arrow::before { border-top-color: var(--ink); }
.ds-tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--ink); }
.ds-tooltip.bs-tooltip-left .arrow::before { border-left-color: var(--ink); }
.ds-tooltip.bs-tooltip-right .arrow::before { border-right-color: var(--ink); }
.checkout-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px 50px;
  grid-template-rows: auto 50px;
  column-gap: 12px;
  row-gap: 8px;
  width: 100%;
  align-items: center;
}
.checkout-address-row__label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-2);
  min-width: 0;
}
.checkout-address-row__label span { color: var(--sale); }
.checkout-address-row__label--confirm {
  display: block;
  min-height: 0;
}
.checkout-address-row__control {
  position: relative;
  height: 50px;
  min-height: 50px;
  min-width: 0;
}
.checkout-address-row__control--confirm {
  display: flex;
  align-items: stretch;
}
.checkout-address-row .form-group {
  margin: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
.checkout-address-row .form-group .help-block.help-block-error {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
}
.checkout-address-row .form-control {
  height: 50px;
  line-height: 1.2;
  padding-top: 0;
  padding-bottom: 0;
}
@keyframes checkout-ds-autofill {
  from { opacity: 1; }
  to { opacity: 1; }
}
.checkout__form .form-control:-webkit-autofill,
.checkout__form .form-control:-webkit-autofill:hover,
.checkout__form .form-control:-webkit-autofill:focus,
.checkout__form .form-control:-webkit-autofill:active {
  animation: checkout-ds-autofill 0.001s;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 99999s ease-in-out 0s;
}
.postcode-input-wrap .form-control:-webkit-autofill,
.postcode-input-wrap .form-control:-webkit-autofill:hover,
.postcode-input-wrap .form-control:-webkit-autofill:focus,
.postcode-input-wrap .form-control:-webkit-autofill:active {
  animation: none;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
}
.checkout-address-row .help-block.help-block-error:empty {
  display: none !important;
}
.postcode-input-wrap {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-sizing: border-box;
  transition: border-color .15s;
}
.postcode-input-wrap:focus-within { border-color: var(--accent); }
.checkout-address-row__control--postcode .form-group.has-error .postcode-input-wrap {
  border-color: var(--sale);
}
.postcode-input__prefix {
  flex: 0 0 auto;
  padding: 0 2px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
  user-select: none;
}
.postcode-input-wrap .form-group {
  flex: 1 1 auto;
  min-width: 0;
}
.postcode-input-wrap .form-control,
.postcode-input__field {
  border: none !important;
  height: 50px !important;
  min-height: 50px;
  padding: 0 12px 0 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  line-height: 1.2;
}
.postcode-input-wrap .form-control:focus,
.postcode-input-wrap .form-control:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.checkout-address-row-wrap .help-block.help-block-error {
  display: block;
  margin-top: 4px;
  margin-bottom: 12px;
}
.checkout__title--delivery-method { margin-top: 0; }

/* legacy overrides */
.header.fixed-top,
.footer.footer,
.breadcrumb-option,
section.product.spad,
section.shopping-cart.spad,
section.checkout.spad,
section.about.spad { all: unset; display: block; }
.primary-btn,
.site-btn { /* mapped via classes in views */ }

[data-theme="dark"] .card__media img,
[data-theme="dark"] .gallery__main img,
[data-theme="dark"] .cart-row__pic img { mix-blend-mode: normal; }
[data-theme="dark"] .logo__img { filter: brightness(0) invert(1); }

/* responsive */
@media (max-width: 1080px) {
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .ft__grid > [class*="col-"] { flex: 0 1 calc(50% - 28px); min-width: 200px; }
}
@media (max-width: 960px) {
  .shop { grid-template-columns: 1fr; }
  .rail { display: none; }
  .hd__menu-btn { display: flex; }
  .hd__inner { grid-template-columns: auto 1fr auto; }
  .hd .search { display: none; }
  .mobile-search { display: block; }
  .logo__img { height: 52px; }
  .cart-grid,
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { order: -1; position: static; }
  .summary { position: static; }
}
@media (max-width: 720px) {
  :root {
    --gut: 16px;
    --header-h: 66px;
    --section-top: 16px;
    --grid-min: 150px;
  }
  .ship-opt { flex-wrap: wrap; }
  .ship-opt__price { margin-left: auto; }
  .hd__inner { grid-template-columns: auto 1fr auto; }
  .hd .search { display: none; }
  .mobile-search { display: block; }
  .logo__img { height: 48px; }
  .topbar__contacts a:last-child { display: none; }
  .cart-head { display: none; }
  .cart-row {
    position: relative;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 16px;
  }
  .cart-row__qty { justify-content: flex-start; }
  .cart-row__total { text-align: left; }
  .cart-row__del {
    position: absolute;
    top: 16px;
    right: 14px;
    justify-self: auto;
  }
  .field-row { grid-template-columns: 1fr; }
  .customer-option { grid-template-columns: 1fr; }
  .ft__grid > [class*="col-"] { flex: 1 1 100%; }
  .ft__bot { flex-direction: column; text-align: center; }
  .info-card { padding: 24px 20px; }
  .buybar { flex-direction: column; }
}

/* live chat widget */
.live-chat {
  position: fixed;
  right: max(var(--gut), 16px);
  bottom: max(var(--gut), 16px);
  z-index: 1200;
  font-family: var(--font-body, inherit);
}
.live-chat__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--sh, 0 8px 24px rgba(0,0,0,.15));
  cursor: pointer;
  font-weight: 600;
}
.live-chat__toggle-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.live-chat__toggle--unread {
  animation: live-chat-pulse 1.6s ease-in-out infinite;
}
.live-chat__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.live-chat__badge[hidden] { display: none !important; }
@keyframes live-chat-pulse {
  0%, 100% { box-shadow: var(--sh, 0 8px 24px rgba(0,0,0,.15)); }
  50% { box-shadow: 0 8px 24px rgba(220,38,38,.35); }
}
.live-chat__toggle:hover { background: var(--accent-strong); }
.live-chat__toggle-label { font-size: 14px; }
.live-chat__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(360px, calc(100vw - 32px));
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  box-shadow: var(--sh, 0 12px 40px rgba(0,0,0,.12));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.live-chat__panel[hidden] { display: none !important; }
.live-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: var(--accent-wash);
}
.live-chat__close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-muted, #666);
}
.live-chat__messages {
  height: 280px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg, #fafafa);
}
.live-chat__msg {
  max-width: 88%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.live-chat__msg--self {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
}
.live-chat__msg--self.live-chat__msg--pending { opacity: .65; }
.live-chat__msg--self.live-chat__msg--failed { background: #dc2626; color: #fff; }
.live-chat__msg--self.live-chat__msg--sent::after {
  content: ' ✓';
  font-size: 11px;
  opacity: .8;
}
.live-chat__msg--operator {
  align-self: flex-start;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
}
.live-chat__msg-from {
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: .75;
  margin-bottom: 2px;
}
.live-chat__form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.live-chat__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
}
.live-chat__send {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px;
}
@media (max-width: 720px) {
  .live-chat__toggle-label { display: none; }
  .live-chat__panel { width: min(340px, calc(100vw - 24px)); }
}