/*
   Per-page rules of the storefront, only where a component does not fit. Positions of the
   diagonal shapes are measured on the reference's 1920 px captures, from the page centre.
*/

/* ===== Home: hero (282 px) ===== */
.home-hero { position: relative; overflow: hidden; height: 282px; background: var(--c-white); }
.home-hero .shape, .home-hero__photo { transform-origin: top left; }
.home-hero__s1 { left: calc(50% - 900px); top: 0; width: 347px; height: 174px; }
.home-hero__s2 { left: calc(50% - 782px); top: 174px; width: 217px; height: 108px; z-index: 1; }
.home-hero__panel { left: calc(50% - 552px); top: 0; width: 552px; height: 282px; }
.home-hero__photo { position: absolute; left: calc(50% - 2px); top: 0; width: 718px; height: 282px; overflow: hidden; transform: skewX(-20deg); }
.home-hero__photo img { position: absolute; left: -110px; top: 0; width: calc(100% + 220px); height: 100%; max-width: none; object-fit: cover; transform: skewX(20deg); transform-origin: top left; }
.home-hero__s3 { left: calc(50% + 716px); top: 0; width: 226px; height: 282px; }
.home-hero__s4 { left: calc(50% + 944px); top: 0; width: 400px; height: 174px; }
.home-hero::after { content: ""; position: absolute; left: calc(50% + 784px); top: 174px; width: 400px; height: 108px; background: var(--c-salmon); transform: skewX(-20deg); transform-origin: top left; }
.home-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 488px; gap: 0; height: 100%; padding-right: calc(var(--gutter) + 28px); }
.home-hero__text { padding: 44px 0 0 28px; }
.home-hero__text .eyebrow { margin-bottom: 9px; font-size: 10px; letter-spacing: .08em; }
.home-hero__text h1 { max-width: 410px; margin-bottom: 14px; font-size: 31px; line-height: 37px; }
.home-hero__text p { font-size: var(--fs-xs); font-weight: 700; }
.home-hero__card { padding-top: 42px; }

/* "Order search and assistance" card */
.order-search { padding: 22px 28px 20px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.order-search__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: 8px; }
.order-search h2 { font-size: var(--fs-md); }
.order-search__head .link-more { font-size: var(--fs-sm); }
.order-search > p { margin-bottom: 14px; font-size: var(--fs-sm); line-height: 1.4; color: var(--c-text-2); }
.order-search__row { display: flex; gap: 8px; margin-bottom: 18px; }
.order-search__input { flex: 1; min-width: 0; height: 37px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.order-search__input::placeholder { color: var(--c-text-faint); }
.order-search__input:focus { outline: none; border-color: var(--c-teal); }
.order-search .btn { min-height: 37px; padding: 0 28px; }
.order-search__help { margin: 0; font-size: var(--fs-sm); color: var(--c-text); }

/* ===== Home: figures strip ===== */
.figures { display: flex; justify-content: space-between; gap: var(--sp-6); padding-top: 60px; padding-bottom: 60px; padding-inline: calc(var(--gutter) + 12px); }
.figures__item strong { display: block; font-size: var(--fs-2xl); font-weight: 600; line-height: 1.15; }
.figures__item span { font-size: 13px; color: var(--c-text-muted); }

/* ===== Home: brands and categories tables ===== */
.home-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; padding-bottom: 66px; }
.home-lists .section-label { margin-bottom: 14px; }
.link-table--icons > * { padding-left: 14px; }

/* ===== CTA band and repair band: two rows of 103 px skewed strips each side ===== */
.cta-band, .repair-band { position: relative; overflow: hidden; height: 206px; margin: 0 0 54px; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.band-shape { position: absolute; height: 103px; transform: skewX(-20deg); transform-origin: top left; pointer-events: none; }
.band-shape--low { top: 103px; }
.band-shape--high { top: 0; }
.cta-band__title, .cta-band .btn, .repair-band h2, .repair-band .btn { position: relative; }
.cta-band__title, .repair-band h2 { margin-bottom: 18px; font-size: var(--fs-2xl); }
.band-photo { background: url("../img/store/repair-boards.webp") center / 360px auto; }
.band-paper { background: #f1f1f1; }
.band-pink { background: #ff8181; }

/* ===== Home: product grid ===== */
.home-grid { padding-bottom: 60px; }
.home-grid .section-label { margin-bottom: 18px; }

/* ===== Catalog pages: brand, brand + category, categories ===== */
.catalog-page { padding: 70px 0 40px; }
.catalog-page--alt { background: var(--c-bg-alt); }
.catalog-head { max-width: 660px; margin: 0 auto 66px; text-align: center; }
.catalog-head__icon { width: 30px; height: 30px; margin: 0 auto 17px; color: var(--c-text-faint); stroke-width: 1.3; }
.cat-ico.catalog-head__icon { --s: 40px; display: block; margin: 0 auto 12px; }
.catalog-head__icon--teal { color: var(--c-teal); }
.catalog-head h1 { font-size: var(--fs-lg); font-weight: 700; }
.catalog-head h1 span { display: block; font-size: var(--fs-md); }
.catalog-head p { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--c-text-2); }
.catalog-head__search { position: relative; width: 280px; margin: 38px auto 0; }
.catalog-head__search .i { position: absolute; left: 12px; top: 10px; width: 15px; height: 15px; color: var(--c-text-faint); }
.catalog-head__search input { width: 100%; height: 35px; padding: 0 12px 0 34px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-white); font-size: 13px; }
.catalog-head__search input:focus { outline: none; border-color: var(--c-teal); }
.catalog-empty { max-width: 520px; margin: 0 auto; text-align: center; color: var(--c-text-muted); }

/* The catalog as a tree (all categories, a category's sub-categories or brands) */
.tree-title { margin: 22px 0 38px; text-align: center; font-size: 22px; }
.tree-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-bottom: 50px; }
.tree-card {
  display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 20px 28px;
  background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-card);
  color: var(--c-text); font-size: 14px; font-weight: 700; line-height: 1.3;
}
.tree-card:hover { color: var(--c-teal); box-shadow: var(--shadow-pop); }
.tree-card--icon { justify-content: flex-start; min-height: 156px; padding-top: 28px; }
.tree-card--icon .tree-card__icon { --s: 34px; margin-bottom: 30px; opacity: .55; }
.tree-card--icon:hover .tree-card__icon { opacity: 1; background-position-y: calc((var(--cat, 38) + 1) * var(--s) * -1); }
.catalog-head + .tree-cards { margin-top: 40px; }
@media (max-width: 1063px) { .tree-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tree-cards { gap: 12px; }
  .tree-card { min-height: 80px; padding: 16px; font-size: 13px; }
  .tree-card--icon { min-height: 100px; padding-top: 16px; }
  .tree-card--icon .tree-card__icon { margin-bottom: 18px; }
}
@media (max-width: 479px) { .tree-cards:not(:has(.tree-card--icon)) { grid-template-columns: 1fr 1fr; } }
.cat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px; }
.cat-card { display: flex; flex-direction: column; min-height: 324px; padding: 30px 28px 24px; background: var(--c-white); border-radius: var(--radius); box-shadow: 0 2px 6px rgba(17, 22, 38, .06); color: var(--c-text-muted); }
.cat-card:hover { color: var(--c-text-muted); box-shadow: var(--shadow-pop); }
.cat-card__icon { width: 26px; height: 26px; margin-bottom: 22px; color: #d5d8dd; stroke-width: 1.4; }
.cat-ico.cat-card__icon { --s: 34px; margin-bottom: 16px; }
.cat-card h2 { min-height: 40px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--c-border); font-size: var(--fs-base); line-height: 1.3; color: var(--c-text); }
.cat-card ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.75; }
.cat-card li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card small { margin-top: 4px; font-size: var(--fs-xs); }

.family-row { padding-bottom: 46px; }
.family-row h2 { margin-bottom: 14px; font-size: var(--fs-base); font-weight: 800; }
.family-row h2 small { margin-left: 6px; font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); }
.family-row__body { display: grid; grid-template-columns: 1fr 186px; gap: 0; }
.family-row__body .p-grid { padding-right: 26px; border-right: 1px solid var(--c-border); }
.family-row__all { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; height: 133px; padding-left: 28px; }
.family-row__all .btn { width: 156px; }
.family-row__all small { width: 156px; text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ===== Search and category results: filters column + product cards ===== */
.catalog { display: grid; grid-template-columns: 216px 1fr; gap: 36px; align-items: start; }
.filters { position: sticky; top: 16px; padding: 18px 20px; background: var(--c-white); border-radius: var(--radius); box-shadow: 0 2px 6px rgba(17, 22, 38, .06); }
.filters__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.filters__title { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; }
.filters__clear { font-size: var(--fs-xs); }
.filters__group { padding: 10px 0; border-top: 1px solid var(--c-border); }
.filters__group summary { display: flex; justify-content: space-between; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; list-style: none; }
.filters__group summary::-webkit-details-marker { display: none; }
.filters__group summary { align-items: center; color: var(--c-teal); }
.filters__group summary::after { content: ""; border: 4.5px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; transition: transform .15s; }
.filters__group[open] summary::after { transform: rotate(180deg); }
.filters__list { max-height: 210px; overflow-y: auto; margin: 8px 0 0; padding: 0; list-style: none; }
.filters__opt { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--fs-xs); cursor: pointer; }
.filters__opt input { accent-color: var(--c-teal); }
.filters__opt span:first-of-type { flex: 1; }
.filters__count { color: var(--c-text-faint); }
.filters__find { width: 100%; height: 28px; margin-top: 8px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.filters__find:focus { outline: none; border-bottom-color: var(--c-teal); }
.filters__price { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.filters__price input { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.filters__apply { margin-top: 12px; }

.results__head { margin-bottom: 14px; }
.results__title { font-size: var(--fs-base); font-weight: 800; }
.results__title small { margin-left: 6px; font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); }
.results__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-bottom: 22px; }
.results__tools { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.results__tools select { height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--c-white); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--c-teal-pale); color: #126b6b; font-size: var(--fs-xs); font-weight: 600; }
.chips a .i { width: 12px; height: 12px; }
.chips li:last-child a { background: none; color: var(--c-teal); }
.results-approx { display: flex; gap: 8px; margin-bottom: 18px; padding: 10px 12px; background: var(--c-yellow-pale); font-size: 13px; }
.results-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 20px; text-align: center; border: 1px dashed var(--c-border-strong); border-radius: var(--radius); }
.results-empty .i { width: 24px; height: 24px; color: var(--c-text-muted); }
.results-empty h2 { font-size: var(--fs-md); }
.results-empty p { max-width: 380px; color: var(--c-text-muted); font-size: 13px; }
.catalog .pager { flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; font-size: var(--fs-sm); color: var(--c-text-muted); }
/* With JavaScript the list grows as it is scrolled: the page numbers give way to "Showing…". */
.catalog.is-endless .pager__pages, .catalog.is-endless .filters__apply { display: none; }
.catalog.is-loading [data-catalog-items], .catalog.is-loading .results-empty { opacity: .45; transition: opacity .15s; }
.catalog.is-appending [data-catalog-pager]::after { content: ""; width: 22px; height: 22px; border: 2px solid var(--c-border); border-top-color: var(--c-teal); border-radius: 50%; animation: spin .8s linear infinite; }
.pager__pages { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }

/* ===== Product page ===== */
.product-crumbs { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 20px; padding-bottom: 18px; }
.product-crumbs .crumb-bar__home { margin-top: 7px; }
.pd { display: grid; grid-template-columns: 441px 1fr; gap: 37px; align-items: start; padding-bottom: 40px; }
.pd__image { display: flex; align-items: center; justify-content: center; height: 424px; padding: 20px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-white); }
.pd__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd__image .i { width: 64px; height: 64px; color: var(--c-border-strong); }
.pd__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pd__thumbs button { width: 64px; height: 64px; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-white); }
.pd__thumbs button[aria-pressed="true"] { border-color: var(--c-teal); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd__line { display: flex; gap: 14px; margin: 12px 0 10px; font-size: var(--fs-sm); font-weight: 700; }
.pd__line > span { color: var(--c-text-muted); font-weight: 700; }
.pd__line > span span { font-weight: 400; }
.pd__title { margin-bottom: 14px; font-size: 28px; font-weight: 800; line-height: 1.2; }
.pd__badges { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pd__express { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); }
.pd__warranty { margin-bottom: 26px; font-size: var(--fs-sm); font-weight: 700; }
.pd__price { margin-bottom: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--c-border); font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--c-orange); }
.pd__buy { display: flex; align-items: center; gap: 24px; padding-bottom: 30px; }
.pd__buy .qty { flex: none; }
.pd__add { flex: 1; gap: 12px; }
.pd__qty-error { margin-top: -14px; margin-bottom: 10px; }
.pd__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; padding: 30px 0 34px; border-top: 1px solid var(--c-border); }
.pd__shipping { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.pd__actions .btn--grey { min-width: 172px; }
.pd__facts { margin: 0; font-size: 13px; }
.pd__facts div { margin-bottom: 18px; }
.pd__facts dt { display: inline; font-weight: 700; }
.pd__facts dd { display: inline; margin: 0 0 0 4px; }
.pd__facts div:first-child dt { display: block; }
.pd__facts div:first-child dd { display: block; margin: 2px 0 0; }
.pd__underline { text-decoration: underline; }
.pd__specs { margin-top: 26px; }
.pd__specs h2 { margin-bottom: 10px; font-size: var(--fs-base); }
.pd__specs table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: var(--fs-sm); }
.pd__specs th, .pd__specs td { padding: 7px 10px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.pd__specs th { width: 42%; font-weight: 600; color: var(--c-text-2); background: var(--c-bg); }
.pd-trust { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--container); padding-block: 34px 36px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); text-align: center; }
.pd-trust > div { padding: 0 20px; }
.pd-trust > div + div { border-left: 1px solid var(--c-border); }
.pd-trust h2 { margin-bottom: 6px; font-size: var(--fs-base); }
.pd-trust h2 a { color: var(--c-teal); }
.pd-trust p { font-size: var(--fs-sm); color: var(--c-text-2); }
.pd-trust p a { color: var(--c-text); text-decoration: underline; }
.pd-related { padding-top: 40px; }

/* "Trusted by": customer logos from the admin, spread across the row (product, about) */
.pd-trusted { padding-bottom: 36px; }
.pd-trusted .trusted-by { padding-left: 478px; }
.trusted-by__title { margin-bottom: 18px; font-size: var(--fs-sm); font-weight: 700; color: var(--c-teal); }
.trusted-by__logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; margin: 0; padding: 0; list-style: none; }
.pd-trusted .trusted-by__logos { margin-left: -478px; }
.trusted-by__logos { flex-wrap: nowrap; }
.trusted-by__logos li { flex: 0 1 auto; min-width: 0; }
.trusted-by__logos img { display: block; max-width: 84px; max-height: 30px; width: auto; height: auto; object-fit: contain; }

/* Calculate shipping costs modal */
.shipping-grid { grid-template-columns: 1fr 70px; }
.shipping-result { margin: 16px 0 0; padding: 10px 12px; background: var(--c-red-soft); text-align: center; font-size: var(--fs-sm); }
.shipping-result strong { color: var(--c-salmon); }
.shipping-result.is-error { color: #b3392f; }

/* Added to cart modal */
.added { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.added__img { display: flex; align-items: center; justify-content: center; flex: none; width: 70px; height: 70px; padding: 6px; border: 1px solid var(--c-border); border-radius: var(--radius); }
.added__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.added__name { display: block; font-size: 13px; font-weight: 700; }
.added__price { font-size: var(--fs-sm); color: var(--c-text-muted); }
.added__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.added__foot .btn { flex: 1; min-width: 0; }
@media (max-width: 479px) { .added__foot { flex-direction: column-reverse; } }

/* ===== Checkout ===== */
.checkout { display: grid; grid-template-columns: 656px 349px; gap: 28px; justify-content: center; align-items: start; }
.checkout__main { display: flex; flex-direction: column; gap: 28px; }
.checkout-card { padding: 22px 24px 26px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.checkout-card__title { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--c-border); font-size: var(--fs-lg); font-weight: 800; }
.checkout-who { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 13px; }
.checkout-who strong { font-weight: 600; }
.checkout-different { margin-top: 16px; font-size: var(--fs-sm); color: var(--c-text-2); }
.checkout-shipping { margin-top: 18px; }
.checkout-shipping[hidden] { display: none; }
.checkout-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.order-lines { margin: 0; padding: 0; list-style: none; }
.order-line { display: grid; grid-template-columns: 44px 1fr auto 24px; gap: 12px 20px; align-items: center; padding: 6px 0; }
.order-line + .order-line { border-top: 1px solid var(--c-border); padding-top: 12px; }
.order-line__img { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.order-line__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.order-line__body a { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; }
.order-line__price { font-size: 13px; font-weight: 700; }
.order-line__remove { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--c-text); }
.order-line__remove:hover { color: var(--c-error); }
.qty--sm { gap: 4px; font-size: var(--fs-sm); font-weight: 700; }
.qty--sm button { width: 18px; height: 18px; border: 1px solid var(--c-border-strong); border-radius: 50%; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.qty--sm button[disabled] { opacity: .4; cursor: default; }
.qty--sm span { min-width: 20px; text-align: center; }
.checkout-card--side .checkout-card__title { border-bottom: 0; padding-bottom: 0; }
.checkout-label { margin: 0 0 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--c-text-2); }
.checkout-option { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: var(--fs-sm); }
.checkout-option .i:first-child { color: var(--c-teal); }
.checkout-option .i + .i { color: var(--c-yellow); }
.checkout-option .checkout-option__bank { color: var(--c-teal); opacity: .7; }
.checkout-option__logo { width: auto; max-width: 48px; height: 16px; object-fit: contain; }
.checkout-option + .checkout-label { margin-top: -8px; }
.checkout-totals { margin: 0 0 6px; padding-top: 14px; border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.checkout-totals div { display: flex; justify-content: space-between; padding: 2px 0; }
.checkout-totals dt { font-weight: 700; }
.checkout-totals dd { margin: 0; }
.checkout-totals__total dd { color: var(--c-orange); font-weight: 800; font-size: 13px; }
.checkout-terms { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text-2); }
.checkout-terms a { font-weight: 600; }
.checkout-card--side .btn--orange { margin-top: 16px; }
.checkout-help { margin-top: 24px; text-align: center; font-size: var(--fs-sm); line-height: 1.8; }
.checkout-help a { font-weight: 700; }
.checkout-page .tagline { padding-bottom: 60px; }
.checkout-empty, .checkout-done { max-width: 620px; margin: 0 auto; text-align: center; }
.checkout-empty h1, .checkout-done h1 { margin-bottom: 10px; font-size: var(--fs-xl); }
.checkout-empty p, .checkout-done p { color: var(--c-text-2); }
.checkout-done__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: #e5f8ea; color: var(--c-green-text); }
.checkout-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.checkout-done__ids { display: flex; justify-content: center; gap: 40px; margin: 20px 0 6px; }
.checkout-done__ids dt { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; }
.checkout-done__ids dd { margin: 2px 0 0; font-size: var(--fs-lg); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 479px) { .checkout-done__ids { gap: 20px; } .checkout-done__ids dd { font-size: var(--fs-md); } }

/* ===== Customer panel ===== */
.account__main .card { min-height: 180px; }
.account__main .card__head { margin: 0 16px; padding: 18px 0 14px; }
.account__main .card__title { font-size: var(--fs-base); font-weight: 800; }
.profile { display: flex; flex-direction: column; align-items: center; padding-bottom: 30px; text-align: center; }
.profile__band { align-self: stretch; height: 46px; margin-top: 22px; background: var(--c-teal); }
.profile__box { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 300px; max-width: 90%; margin: -70px 0 28px; padding: 26px 20px 24px; background: var(--c-white); box-shadow: var(--shadow-pop); }
.profile__box img { height: 30px; width: auto; margin-bottom: 14px; }
.profile__box strong { font-size: var(--fs-base); }
.profile__box span { font-size: var(--fs-sm); color: var(--c-text-2); }
.profile .btn { min-width: 172px; min-height: 44px; }
.profile p { margin-top: 16px; font-size: var(--fs-sm); color: var(--c-text-2); }
.profile p a { font-weight: 600; }
.modal:target { display: flex; }

.orders { padding: 0 16px 16px; }
.order { border-bottom: 1px solid var(--c-border); }
.order__row { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; align-items: center; gap: 12px; padding: 14px 0; font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.order__row::-webkit-details-marker { display: none; }
.order__number { color: var(--c-teal); font-weight: 700; }
.order__total { text-align: right; }
.order__toggle { color: var(--c-teal); font-weight: 600; }
.order__toggle span::before { content: "+"; margin-left: 4px; }
.order[open] .order__toggle span::before { content: "\2212"; }
.order__body { display: grid; grid-template-columns: 1fr 180px; gap: 26px; padding-bottom: 20px; }
.order__details { padding: 12px; background: var(--c-bg-alt); border-radius: var(--radius); }
.order__details-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.order__details-head h3 { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.order__manage { color: var(--c-orange); font-size: var(--fs-xs); font-weight: 700; }
.order__lines { margin: 0 0 14px; padding: 0; list-style: none; background: var(--c-white); border-radius: var(--radius); }
.order__lines li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--c-border); font-size: var(--fs-xs); }
.order__lines li:last-child { border-bottom: 0; }
.order__img { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.order__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.order__lines a { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order__qty { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.order__qty small { margin-right: 4px; color: var(--c-text-faint); }
.order__sums { margin: 0; font-size: var(--fs-xs); }
.order__sums div { display: flex; justify-content: space-between; padding: 2px 0; }
.order__sums dd { margin: 0; }
.order__grand { margin-top: 10px; padding-top: 10px !important; border-top: 1px solid var(--c-border); font-weight: 800; }
.order__info { margin: 0; font-size: var(--fs-xs); line-height: 1.7; }
.order__info dt { font-size: 10px; font-weight: 800; }
.order__info dd { margin: 0; }

.address-box { margin-bottom: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); }
.address-box header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.address-box__actions { display: flex; gap: 14px; margin-left: auto; }
.address-box__actions a, .address-box__actions button { border: 0; background: none; padding: 0; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.address-box__actions a:hover, .address-box__actions button:hover { color: var(--c-teal); }
.address-box dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 14px 16px 16px; font-size: var(--fs-sm); }
.address-box dt { font-size: var(--fs-xs); font-weight: 700; }
.address-box dd { margin: 0; }
.address-add { display: inline-block; margin-top: 4px; color: var(--c-text); font-size: var(--fs-sm); font-weight: 700; }
.form-grid--city { grid-template-columns: 1fr 120px; }
.modal__head a { color: var(--c-white); font-size: var(--fs-sm); opacity: .9; }

/* ===== All brands ===== */
.brands-page { position: relative; overflow: hidden; padding: 30px 0 80px; background: var(--c-bg); }
.brands-page .band-shape { height: 900px; transform: skewX(-20deg); }
.brands-page__s1 { left: calc(50% - 800px); top: 230px; width: 520px; background: var(--c-yellow-pale); opacity: .7; }
.brands-page__s2 { left: calc(50% - 1100px); top: 440px; width: 380px; background: var(--c-pink-pale); opacity: .7; }
.brands-page__s3 { left: calc(50% + 350px); top: 0; width: 540px; height: 370px !important; background: #e6f6f4; }
.brands-page__s4 { left: calc(50% + 260px); top: 370px; width: 480px; background: var(--c-pink-pale); opacity: .6; }
.brands-page__s5 { left: calc(50% + 620px); top: 760px; width: 420px; background: var(--c-yellow-pale); opacity: .7; }
.brands-page__inner { position: relative; }
.brands-page h1 { margin: 12px 0 26px; font-size: var(--fs-lg); }
.az { display: flex; justify-content: space-between; margin: 0 0 30px; padding: 0 2px; font-size: 11px; font-weight: 700; }
.az a { color: var(--c-teal); }
.az span { color: var(--c-text-faint); }
.brand-letter { margin-bottom: 26px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-card); scroll-margin-top: 20px; }
.brand-letter__head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; }
.brand-letter__head h2 { font-size: var(--fs-md); font-weight: 800; }
.brand-letter__head span { font-size: var(--fs-xs); color: var(--c-text-2); }
.brand-letter__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--c-border); }
.brand-letter__grid a { display: flex; align-items: center; min-height: 55px; padding: 6px 15px; border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); color: var(--c-text); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.brand-letter__grid a:nth-child(5n) { border-right: 0; }
.brand-letter__grid a:hover { color: var(--c-teal); }

/* ===== Support: contact, order tracking, quick quote and repair, become supplier ===== */
.home-hero--support { background: var(--c-bg); }
.home-hero--support .home-hero__s2, .home-hero--support::after { background: var(--c-bg); }
.home-hero--support .home-hero__text { padding-top: 74px; }
.home-hero--support .home-hero__text--low { padding-top: 93px; }
.home-hero--support h1 { max-width: 405px; font-size: 31px; line-height: 38px; }
.order-search__cell { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.order-search__cell .order-search__input { flex: none; width: 100%; }
.order-search__cell .field-validation-error { margin-top: 4px; font-size: 12px; color: var(--c-error); }

.contact { padding-block: 64px 116px; text-align: center; }
.contact__call { margin-bottom: 56px; font-size: 18px; }
.contact__call a { color: var(--c-text); }
.contact__notice { max-width: 616px; margin: 0 auto 24px; text-align: left; }
.contact__cards { display: flex; justify-content: center; gap: 26px; }
.contact__card { display: flex; flex-direction: column; align-items: flex-start; width: 308px; min-height: 212px; padding: 30px 28px 28px; border: 1px solid #dddfe0; text-align: left; }
.contact__card h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 18px; }
.contact__card h2 .i { width: 20px; height: 20px; color: var(--c-teal); }
.contact__card p { margin-bottom: 28px; font-size: var(--fs-base); line-height: 1.45; }
.contact__card .btn { margin-top: auto; min-height: 37px; padding: 0 28px; }
.contact__more { margin-top: 68px; font-size: 18px; }
.contact__more a { font-weight: 700; }

.modal__dialog--info { max-width: 450px; }
.modal__choices .i { width: 16px; height: 16px; color: var(--c-text-2); }
.modal__dialog--info .modal__choices a { min-height: 46px; padding: 0 14px; font-size: var(--fs-base); }
.modal__dialog--info .modal__choices { margin-top: 24px; border-top: 0; }
.inquiry__title { margin: 4px 0 -2px; font-size: var(--fs-base); font-weight: 700; }
.inquiry__lines { display: grid; gap: 14px; }
.inquiry__line { display: grid; grid-template-columns: 1fr 1fr 66px; gap: 18px; }
.inquiry__add { justify-self: start; padding: 0; border: 0; background: none; color: var(--c-teal); font-size: 13px; font-weight: 600; }
.inquiry__add:hover { color: var(--c-teal-dark); }
.inquiry__files { display: flex; flex-direction: column; gap: 4px; }
.inquiry__files .upload-box { position: relative; padding: 11px; font-size: 12px; }
.inquiry__files input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.inquiry .check { flex-direction: column; gap: 4px; }
.inquiry-page { display: flex; justify-content: center; padding-block: 48px 96px; }
.inquiry-page__card { width: 100%; max-width: 545px; padding: 28px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-pop); }

.track { padding-block: 56px 94px; }
.track__title, .track .orders, .track__card { max-width: 768px; margin-inline: auto; }
.track__title { margin-bottom: 26px; font-size: 22px; }
.track .orders { margin-bottom: 24px; padding: 0 16px; background: var(--c-white); border-radius: var(--radius); }
.track__card { padding: 30px 37px 37px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.track__prompt { padding-bottom: 26px; margin-bottom: 0; border-bottom: 1px solid #e8e9ea; color: #ff8181; font-size: 18px; font-weight: 800; }
.track__missing { padding-bottom: 26px; border-bottom: 1px solid #e8e9ea; }
.track__missing p { margin: 0; font-size: 18px; }
.track__missing strong { color: #ff8181; }
.track__missing .track__missing-text { margin-top: 10px; color: var(--c-text-faint); font-size: var(--fs-sm); }
.track__row { display: flex; gap: 22px; padding: 24px 0 22px 4px; border-bottom: 1px solid #e8e9ea; }
.track__row:last-child { border-bottom: 0; padding-bottom: 0; }
.track__row > .i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--c-teal); }
.track__row h3 { margin-bottom: 10px; font-size: var(--fs-base); }
.track__row p { margin-bottom: 0; font-size: 15px; }
.track__row p + p { margin-top: 10px; }
.track__small { font-size: 13px !important; color: var(--c-text-2); }
.track__row .btn { margin-top: 24px; min-height: 37px; padding: 0 28px; }

.return-terms__text { margin-bottom: 18px; color: var(--c-text); font-size: 14px; line-height: 1.5; }
.return-terms__text p { margin: 0 0 8px; }
.return-terms .modal__foot { margin-top: 18px; }

/* The order found: its tabs Order, My Returns and Documents (order-details-search). */
.order-page { display: grid; grid-template-columns: 225px minmax(0, 1fr); column-gap: 38px; max-width: 1032px; padding-block: 56px 94px; }
.order-page__head { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.order-page__head h2 { margin: 0; font-size: 22px; }
.order-page__head .btn { min-height: 34px; padding: 0 28px; font-size: 13px; background: #e2e3e4; }
.order-page__nav { grid-column: 1; display: flex; flex-direction: column; gap: 2px; align-self: start; }
.order-page__nav a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 3px; color: var(--c-text-2); font-size: 14px; }
.order-page__nav a .i { width: 18px; height: 18px; }
.order-page__nav a[aria-current="page"] { background: var(--c-white); color: var(--c-text); font-weight: 700; }
.order-page__nav a[aria-current="page"] .i { color: var(--c-teal); }
.order-page__card { grid-column: 2; padding: 38px 37px 52px; background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 1.5; }
.order-page__title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.order-page__title h3 { margin: 0; font-size: 18px; font-weight: 400; }
.order-page__new { color: var(--c-teal); font-weight: 700; }
.order-page__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 190px; margin: 40px auto 30px; color: var(--c-text-2); text-align: center; font-size: 14px; }
.order-page__empty .i { width: 38px; height: 38px; color: #a6a9ad; }
.order-page__group { margin: 22px 0 0; padding-bottom: 10px; border-bottom: 1px solid #e8e9ea; font-size: 13px; font-weight: 400; }
.order-page__docs li, .order-page__returns li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #e8e9ea; }
.order-page__docs a { display: inline-flex; padding: 2px 10px; color: var(--c-teal); }
.order-page__docs .i { width: 18px; height: 18px; }
.order-page__returns li { flex-direction: column; align-items: stretch; gap: 6px; }
.order-page__returns p { margin: 0; white-space: pre-line; }
.order-page__return-head { display: flex; justify-content: space-between; gap: 12px; }
.order-page__badge { padding: 0 10px; border-radius: 10px; background: #e8f7f7; color: var(--c-teal); font-size: 12px; font-weight: 700; }
.order-page__badge--closed { background: var(--c-bg-alt); color: var(--c-text-2); }
.order-page__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.order-page__number { margin: 0; font-size: 18px; font-weight: 800; }
.order-page__number .teal { color: var(--c-teal); }
.order-page__block { display: flex; gap: 18px; margin-bottom: 22px; }
.order-page__block > .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--c-teal); }
.order-page__block a { color: var(--c-teal); }
.order-page__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.order-page__products { flex: 1; min-width: 0; }
.order-page__lines { margin-top: 10px; border-top: 1px solid #e8e9ea; }
.order-page__lines li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e8e9ea; }
.order-page__lines .order__img { flex: none; width: 36px; height: 36px; }
.order-page__lines a { flex: 1; min-width: 0; color: var(--c-teal); font-weight: 700; }
.order-page__price { flex: none; text-align: right; }
.order-page__price small { margin-right: 6px; color: #a6a9ad; font-size: 10px; }
.order-page__qty { flex: none; width: 34px; font-size: 12px; line-height: 1.3; }
.order-page__sums { margin: 18px 0 0; }
.order-page__sums div { display: flex; justify-content: space-between; gap: 16px; }
.order-page__sums dd { margin: 0; }
.order-page__grand { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e8e9ea; font-weight: 800; }
@media (max-width: 1063px) {
    .order-page { grid-template-columns: minmax(0, 1fr); }
    .order-page__head, .order-page__nav, .order-page__card { grid-column: 1; }
    .order-page__nav { flex-direction: row; flex-wrap: wrap; margin-bottom: 16px; }
}
@media (max-width: 767px) {
    .order-page { padding-block: 32px 56px; }
    .order-page__card { padding: 24px 18px 32px; }
    .order-page__cols { grid-template-columns: 1fr; }
    .order-page__lines li { flex-wrap: wrap; }
    .order-page__lines a { flex-basis: calc(100% - 50px); }
    .order-page__price { margin-left: 50px; }
}

body.landing { background: var(--c-navy); color: var(--c-white); }
.landing__head { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.landing__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--c-white); font-size: 13px; font-weight: 700; }
.landing__phone .i { color: var(--c-teal); }
.landing__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; padding-block: 22px 32px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.landing__foot > span { display: inline-flex; align-items: center; gap: 6px; }
.landing__foot .i { display: inline-block; flex: none; }
.supplier { position: relative; overflow: hidden; padding: 28px 0 70px; }
.supplier__bg { position: absolute; left: 0; top: 290px; width: 100%; height: calc(100% - 290px); object-fit: cover; opacity: .55; pointer-events: none; }
.supplier::before { content: ""; position: absolute; left: 0; right: 0; top: 290px; height: 160px; background: linear-gradient(var(--c-navy), transparent); z-index: 1; pointer-events: none; }
.supplier__intro { position: relative; z-index: 2; max-width: 760px; text-align: center; }
.supplier__intro .eyebrow { margin-bottom: 18px; color: var(--c-teal); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.supplier__intro h1 { margin-bottom: 22px; color: var(--c-white); font-size: 31px; line-height: 37px; }
.supplier__intro p { color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.55; }
.supplier__stage { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 44px; padding: 100px var(--gutter) 0; }
.supplier__mark { position: absolute; top: -70px; left: 50%; width: 640px; transform: translateX(-50%); opacity: .14; filter: grayscale(1) brightness(2); pointer-events: none; }
.supplier__card { position: relative; width: 100%; max-width: 544px; padding: 30px 38px 38px; background: var(--c-white); border-radius: var(--radius); color: var(--c-text); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.supplier__card h2 { margin-bottom: 6px; font-size: 18px; font-weight: 400; text-align: center; }
.supplier__card .check { flex-direction: column; gap: 4px; }
.supplier__card .btn { min-height: 38px; }
.supplier__figures { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 80px; padding-block: 0; list-style: none; text-align: center; font-size: var(--fs-base); line-height: 1.4; }
.supplier__figures li { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.supplier__figures .i { width: 56px; height: 56px; color: var(--c-teal); stroke-width: 1.2; }

@media (max-width: 1063px) {
  .home-hero--support .home-hero__text, .home-hero--support .home-hero__text--low { padding-top: 32px; }
  .contact__cards { flex-wrap: wrap; }
  .supplier__figures { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .contact { padding-block: 40px 64px; }
  .contact__card { width: 100%; }
  .inquiry__line { grid-template-columns: 1fr 1fr 60px; gap: 10px; }
  .track__card { padding: 24px 20px; }
  .supplier__intro h1 { font-size: 24px; line-height: 30px; }
  .supplier__card { padding: 24px 20px; }
  .supplier__mark { width: 320px; }
}

/* ===== Company and customer service pages: side menu + teal title card ===== */
.policy { display: grid; grid-template-columns: 225px 1fr; gap: 38px; align-items: start; padding-block: 47px 140px; }
.policy__nav { display: flex; flex-direction: column; gap: 2px; }
.policy__nav h2 { margin: 0 0 8px 16px; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.policy__nav h2:not(:first-child) { margin-top: 18px; }
.policy__nav a { padding: 8px 16px; border-radius: var(--radius-sm); color: #808592; font-size: var(--fs-base); }
.policy__nav a:hover { color: var(--c-text); }
.policy__nav a.is-active { background: var(--c-white); color: var(--c-text); font-weight: 700; box-shadow: 0 1px 4px rgba(17, 22, 38, .08); }
.policy__card { min-width: 0; background: var(--c-white); border-radius: 0 10px 0 0; box-shadow: 0 1px 2px rgba(17, 22, 38, .05); }
.policy__head { display: flex; align-items: flex-end; min-height: 120px; padding: 0 38px 23px; background: var(--c-teal); border-radius: 0 10px 0 0; }
.policy__head h1 { margin: 0; color: var(--c-white); font-size: 25px; line-height: 1.2; }
.policy__body { padding: 52px 38px 48px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; color: #111; }
.policy__body p, .policy__body ul, .policy__body ol { margin: 0 0 10px; }
.policy__body ul, .policy__body ol { padding-left: 22px; }
.policy__body li + li { margin-top: 6px; }
.policy__body h2 { margin: 56px 0 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.policy__body > h2:first-child { margin-top: 0; }
.policy__body a { color: var(--c-teal-dark); }
.policy__values section + section { margin-top: 60px; }
.faq-topic { margin-top: 32px; }
.faq-item { border-bottom: 1px solid #e8e9ea; }
.faq-item summary { position: relative; padding: 12px 28px 12px 0; font-family: var(--font-sans); font-weight: 600; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--c-teal); font-size: 18px; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding-bottom: 12px; white-space: pre-line; }
.policy__values h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; text-transform: none; }

.home-hero--wide .home-hero__photo { width: calc(50% + 260px); }
.home-hero__h1--sm { font-size: 22px !important; line-height: 28px !important; max-width: 425px !important; }

.features { display: flex; flex-direction: column; gap: 56px; padding: 64px 0; overflow-x: clip; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.feature-row__media { position: relative; height: 375px; }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(64px 0, 100% 0, calc(100% - 137px) 100%, 0 100%); }
.feature-row__media::before, .feature-row__media::after { content: ""; position: absolute; transform: skewX(-20deg); transform-origin: top left; }
.feature-row__media::before { left: 22px; top: 0; width: 42px; height: 200px; background: var(--c-yellow-pale); }
.feature-row__media::after { right: 64px; bottom: 0; width: 26px; height: 188px; background: #95dfdf; }
.feature-row__text { margin: 0; padding: 0 max(var(--gutter), calc(50vw - 516px)) 0 48px; font-size: 17px; line-height: 25px; }
.feature-row__text strong { font-weight: 800; }
.feature-row--flip .feature-row__media { order: 2; }
.feature-row--flip .feature-row__media img { clip-path: polygon(137px 0, 100% 0, 100% 100%, 0 100%); }
.feature-row--flip .feature-row__media::before { left: 64px; right: auto; background: #f4b08f; z-index: 1; }
.feature-row--flip .feature-row__media::after { left: auto; right: -20px; }
.feature-row--flip .feature-row__text { padding: 0 48px 0 max(var(--gutter), calc(50vw - 516px)); }
.cta-band--plain { height: auto; margin: 0; padding-top: 40px; }
.cta-band--plain .btn { min-height: 39px; padding: 0 28px; }

.about-hero { position: relative; overflow: hidden; padding: 70px 0 0; background: linear-gradient(#5dd9d9, var(--c-bg) 92%); text-align: center; }
.about-hero__text .eyebrow { margin-bottom: 18px; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.about-hero__text h1 { max-width: 540px; margin: 0 auto; font-size: 31px; line-height: 37px; }
.about-hero__map { position: relative; width: min(1290px, 124vw); margin: 20px 0 0 50%; transform: translateX(-50%); }
.about-hero__map img { display: block; width: 100%; opacity: .7; mix-blend-mode: multiply; }
.about-hero__map span { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--c-white); box-shadow: 0 2px 6px rgba(17, 22, 38, .12); }
.about-figures { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 48px 28px 80px; }
.about-figures strong { display: block; margin-bottom: 8px; color: var(--c-teal); font-size: 28px; font-weight: 800; line-height: 1; }
.about-figures span { display: block; max-width: 170px; color: var(--c-text-2); font-size: 13px; line-height: 1.5; opacity: .8; }
.about-trusted { padding-bottom: 60px; }
.home-trusted { padding-block: 50px 10px; }
.home-trusted .trusted-by__title { text-align: center; color: var(--c-text); font-size: var(--fs-md); font-weight: 800; }
.about-trusted .trusted-by__title { text-align: center; }
.about-claim { padding-block: 70px 140px; text-align: center; }
.about-claim span { display: block; margin-bottom: 14px; color: var(--c-teal); font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.about-claim p { margin: 0; font-size: 26px; }

@media (max-width: 1063px) {
  .policy { grid-template-columns: 1fr; gap: 24px; padding-block: 32px 80px; }
  .policy__nav { flex-direction: row; flex-wrap: wrap; }
  .policy__nav h2, .policy__nav h2:not(:first-child) { width: 100%; margin: 10px 0 2px 16px; }
  .feature-row, .feature-row--flip { grid-template-columns: 1fr; gap: 24px; }
  .feature-row--flip .feature-row__media { order: 0; }
  .feature-row__text, .feature-row--flip .feature-row__text { padding: 0 var(--gutter); }
  .about-figures { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .policy__head { min-height: 88px; padding: 0 20px 18px; }
  .policy__body { padding: 24px 20px; }
  .feature-row__media { height: 240px; }
  .about-figures { grid-template-columns: 1fr 1fr; }
  .about-hero__text h1, .about-claim p { font-size: 22px; line-height: 28px; }
}

/* ===== Most viewed products ===== */
.most-viewed { padding-block: 28px 80px; }
.most-viewed h1 { margin-bottom: 30px; font-size: 22px; }
.most-viewed__list { columns: 3; column-gap: 20px; margin: 0; padding: 0 4px; list-style: none; }
.most-viewed__list li { break-inside: avoid; padding: 4px 0; font-size: 13px; font-weight: 600; line-height: 16px; }
.most-viewed__list a { color: var(--c-text); }
.most-viewed__list a:hover { color: var(--c-teal); }
@media (max-width: 767px) { .most-viewed__list { columns: 1; } }

/* ===== Responsive ===== */
@media (max-width: 1063px) {
  .checkout { grid-template-columns: 1fr; }
  .pd { grid-template-columns: 1fr; }
  .pd__image { height: 340px; }
  .pd-trust { grid-template-columns: 1fr; gap: 20px; }
  .pd-trusted .trusted-by { padding-left: 0; }
  .pd-trusted .trusted-by__logos { margin-left: 0; justify-content: center; }
  .trusted-by__logos { flex-wrap: wrap; justify-content: center; }
  .pd-trust > div + div { border-left: 0; }
  .catalog { grid-template-columns: 1fr; }
  .filters { position: static; }
  .cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family-row__body { grid-template-columns: 1fr; }
  .family-row__body .p-grid { padding-right: 0; border-right: 0; }
  .family-row__all { height: auto; align-items: flex-start; padding: 16px 0 0; }
  .brand-letter__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand-letter__grid a:nth-child(5n) { border-right: 1px solid var(--c-border); }
  .home-hero { height: auto; }
  .home-hero__inner { grid-template-columns: 1fr; gap: 0; padding-bottom: 24px; }
  .home-hero__photo, .home-hero__s3, .home-hero__s4, .home-hero::after { display: none; }
  .home-hero__panel { left: -100px; width: 140%; height: 100%; }
  .home-hero__s1, .home-hero__s2 { display: none; }
  .home-hero__text { padding: 32px 0 20px; }
  .home-hero__card { padding-top: 0; max-width: 520px; }
  .figures { flex-wrap: wrap; justify-content: flex-start; padding-inline: var(--gutter); }
  .figures__item { flex: 1 1 200px; }
  .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .band-shape { opacity: .35; }
}
@media (max-width: 767px) {
  .order__row { grid-template-columns: 1fr auto; }
  .order__date { display: none; }
  .order__body { grid-template-columns: 1fr; }
  .address-box dl { grid-template-columns: 1fr; }
  .home-hero__text h1 { font-size: 24px; line-height: 30px; }
  .order-search__row { flex-wrap: wrap; }
  .order-search__row .btn { flex-basis: 100%; }
  .home-lists { grid-template-columns: 1fr; }
  .p-grid, .p-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .cta-band__title, .repair-band h2 { font-size: var(--fs-lg); }
  .band-shape { display: none; }
  .cat-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cat-card { min-height: 0; padding: 20px 16px; }
  .brand-letter__grid { grid-template-columns: 1fr 1fr; }
  .az { flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
}
.cat-cards--sub { margin-bottom: 48px; }
.cat-cards--sub .cat-card { min-height: 0; }

/* ===== Reviews (09-2026-10-29/reviews) ===== */
.reviews-hero { position: relative; overflow: hidden; height: 270px; background: var(--c-bg); }
.reviews-hero .shape { position: absolute; top: 0; height: 100%; transform: skewX(-20deg); transform-origin: top left; }
.reviews-hero__s1 { left: -120px; width: 380px; height: 50% !important; }
.reviews-hero__panel { left: calc(50% - 600px); width: 520px; }
.reviews-hero__s2 { right: 60px; width: 290px; height: 50% !important; }
.reviews-hero__s3 { right: -200px; width: 260px; height: 50% !important; }
.reviews-hero__inner { position: relative; height: 100%; display: flex; align-items: center; }
.reviews-hero__text { max-width: 400px; padding-left: 30px; color: var(--c-white); }
.reviews-hero__text h1 { margin-bottom: 12px; font-size: 26px; color: var(--c-navy); }
.reviews-hero__text p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(17, 22, 38, .75); }
.reviews { padding-block: 36px 70px; }
/* Lined up with the banner's text above it (its 30px inset), as the reference. */
.reviews__average { display: grid; justify-items: start; gap: 6px; width: max-content; margin: 0 0 64px 30px; padding: 18px 22px; border: 1px solid #22b07d; border-radius: 8px; background: var(--c-white); }
.reviews__average-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.reviews__average-score { display: flex; align-items: center; gap: 10px; }
.reviews__average-score strong { font-size: 32px; font-weight: 800; line-height: 1; }
.reviews__average-count { font-size: var(--fs-xs); color: var(--c-text-2); }
.stars { display: inline-flex; gap: 2px; }
.stars__star { width: 15px; height: 15px; fill: #d5d8dd; }
.stars__star.is-on { fill: #22b07d; }
.reviews__group { margin-bottom: 60px; }
.reviews__group-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.reviews__group-head h2 { margin: 0; font-size: var(--fs-xl); }
.reviews__group-head a { font-size: var(--fs-sm); font-weight: 600; color: #1a73e8; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 3.15); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.carousel__arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-white); color: var(--c-text); cursor: pointer; }
.carousel__arrow .i { width: 14px; height: 14px; }
.carousel__dots { display: flex; gap: 6px; }
.carousel__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #d5d8dd; cursor: pointer; }
.carousel__dot.is-active { background: var(--c-navy); }
.review-card { display: flex; flex-direction: column; gap: 10px; min-height: 194px; padding: 18px; border-radius: 8px; background: var(--c-white); box-shadow: 0 1px 4px rgba(17, 22, 38, .08); }
.review-card__head { display: flex; align-items: center; gap: 10px; }
.review-card__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e7f6ef; color: #22b07d; font-weight: 700; font-size: 12px; }
.review-card__who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.review-card__who strong { font-size: 13px; }
.review-card__who small { font-size: 11px; color: var(--c-text-muted); }
.review-card__source { font-size: 10px; font-weight: 700; color: #22b07d; }
.review-card__source--google { color: #1a73e8; }
.review-card h3 { margin: 0; font-size: 13px; font-weight: 700; }
.review-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--c-text-2); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.reviews__faq { max-width: 760px; margin-bottom: 70px; }
.reviews__faq h2 { margin-bottom: 20px; font-size: var(--fs-xl); }
.reviews__cta { padding: 34px 24px; border-radius: 8px; background: #f7f9fb; text-align: center; }
.reviews__cta h2 { margin-bottom: 14px; font-size: var(--fs-xl); }
.reviews__cta p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin: 0; color: var(--c-text-2); }
@media (max-width: 1063px) {
  .carousel__track { grid-auto-columns: calc((100% - 18px) / 1.6); }
  .reviews-hero__panel { left: -60px; width: 80%; }
  .reviews-hero__s2, .reviews-hero__s3 { display: none; }
}
@media (max-width: 600px) {
  .carousel__track { grid-auto-columns: 86%; }
  .reviews-hero { height: 240px; }
  .reviews-hero__text { padding-left: 0; }
  .reviews__average { margin-left: 0; }
}

/* Home: the reviews figure's star and the brand slider (09-2026-10-29) */
.figures__star { width: 22px; height: 22px; margin-right: 6px; vertical-align: -2px; fill: var(--c-teal); }
.home-slider { margin-top: 70px; margin-bottom: 30px; }
.home-slider__track { grid-auto-columns: 100%; gap: 0; padding: 0; }
.home-slide { position: relative; display: grid; grid-template-columns: 2fr 3fr; align-items: center; min-height: 322px; overflow: hidden; background: #f6f6f6; }
/* The reference's grainy grey field behind the picture, cut on a slant. */
.home-slide::before, .partner-banner::before { content: ""; position: absolute; inset: 0 0 0 38%; background: #ededed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%, 40px 72%, 28px 28%); }
.home-slide > *, .partner-banner > * { position: relative; }
/* Each partner's strips in its own colours, as the reference. */
.home-slide, .partner-banner { --strip: #0053a1; }
.home-slide--rittal, .partner-banner--rittal { --strip: linear-gradient(#e2004a 0 17%, transparent 17% 21%, #9b1d82 21% 38%, transparent 38% 42%, #0060a8 42% 59%, transparent 59% 63%, #0094d9 63% 80%, transparent 80% 84%, #00965e 84%); }
.home-slide--teltonika, .partner-banner--teltonika { --strip: #14298a; }
.home-slide--patlite, .partner-banner--patlite, .home-slide--grein, .partner-banner--grein { --strip: #e30613; }
.home-slide--finder, .partner-banner--finder { --strip: #0095d9; }
.home-slide__text { padding: 36px 40px; }
.home-slide__logo { display: block; max-width: 200px; max-height: 44px; margin-bottom: 70px; object-fit: contain; }
.home-slide__name { display: block; margin-bottom: 70px; font-size: 24px; font-weight: 800; color: var(--c-navy); }
.home-slide__text p { margin: 0 0 22px; font-size: 16px; line-height: 1.55; }
.home-slide__media { position: relative; height: 100%; min-height: 322px; }
.home-slide__media img { position: absolute; inset: 36px 40px 0 0; width: calc(100% - 40px); height: calc(100% - 36px); object-fit: cover; clip-path: polygon(90px 0, 100% 0, calc(100% - 90px) 100%, 0 100%); }
/* The reference's two blue strips along the picture's slanted edges. */
.home-slide__media::before, .home-slide__media::after { content: ""; position: absolute; z-index: 1; width: 22px; height: 48%; background: var(--strip); transform: skewX(-17.5deg); }
.home-slide__media::before { top: 36px; left: 74px; transform-origin: top left; }
.home-slide__media::after { bottom: 0; right: 42px; transform-origin: bottom right; }
.home-slider__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.home-slider__arrow { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--c-teal); cursor: pointer; }
.home-slider__arrow:first-child .i { transform: rotate(180deg); }
.home-slider__dots .carousel__dot { width: 28px; height: 4px; border-radius: 0; background: #e3e3e3; }
.home-slider__dots .carousel__dot.is-active { background: #bdbdbd; }
/* The self-moving slider: the active dot fills over the interval, as the reference's. */
.carousel.is-auto .carousel__dot { position: relative; overflow: hidden; }
.carousel.is-auto .carousel__dot.is-active { background: #e3e3e3; }
.carousel.is-auto .carousel__dot::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: #bdbdbd; }
.carousel.is-auto .carousel__dot.is-filling::after { animation: carousel-fill var(--carousel-auto, 7000ms) linear forwards; }
.carousel.is-auto.is-paused .carousel__dot.is-filling::after { animation-play-state: paused; }
@keyframes carousel-fill { to { transform: scaleX(1); } }
@media (max-width: 760px) {
  .home-slide { grid-template-columns: 1fr; }
  .home-slide__logo, .home-slide__name { margin-bottom: 20px; }
  .home-slide__media { min-height: 200px; }
  .home-slide__media img { inset: 0; width: 100%; height: 100%; clip-path: none; }
  .home-slide__media::before, .home-slide__media::after, .partner-banner__media::before, .partner-banner__media::after, .home-slide::before, .partner-banner::before { display: none; }
}
.pd__payments { display: flex; flex-wrap: wrap; gap: 6px; margin: 40px 0 0; padding: 0; list-style: none; }
.pd__payments img { display: block; height: 30px; width: auto; border-radius: 3px; }
.figures__item strong { display: flex; align-items: center; }
.carousel [hidden] { display: none !important; }


/* ===== Phones, after the reference's mobile screenshots (11-2026-10-30-chat/19–26) ===== */
@media (max-width: 767px) {
  /* Page heroes: the text in the middle, over the card. */
  .home-hero--support .home-hero__inner { display: block; text-align: center; padding-inline: var(--gutter); }
  .home-hero--support .home-hero__text { padding: 32px 0 20px; }
  .home-hero--support .home-hero__text h1 { max-width: none; font-size: 24px; line-height: 1.25; }
  .home-hero--support .order-search { text-align: left; }

  /* Home: no figures strip, as the reference. */
  .figures { display: none; }

  /* Product and catalog pages: no breadcrumb on the product, three boxes side by side, grids of two or three. */
  .product-crumbs, .crumb-bar__inner { display: none; }
  .crumb-bar { min-height: 56px; }
  .crumb-bar__tabs { padding-top: 24px; }
  .checkout-header__aside, .checkout-steps { display: none; }
  .checkout-header__inner { justify-content: center; }
  .pd-trust { grid-template-columns: repeat(3, 1fr); padding-block: 18px; font-size: 11px; }
  .pd-trust > div { padding: 0 8px; }
  .pd-trust h2 { font-size: 12px; }
  .pd-trust p { font-size: 11px; }
  .family-row__body { grid-template-columns: 1fr 120px; }
  .family-row__body .p-grid { padding-right: 12px; border-right: 1px solid var(--c-border); }
  .family-row__all { height: auto; align-items: center; justify-content: flex-start; padding: 40px 0 0 12px; }
  .family-row__all .btn, .family-row__all small { width: 100%; }

  /* The order page: its tabs in a bar under the header, the title and "Order Assistance" on one row. */
  .order-page { padding-top: 0; }
  .track-hero--order { display: none; }
  .order-page__nav { order: -1; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; margin: 0 calc(var(--gutter) * -1) 20px; padding: 6px var(--gutter); background: var(--c-white); box-shadow: 0 1px 0 var(--c-border); }
  .order-page__nav a { padding: 8px 6px; font-size: 13px; }
  .order-page__nav a[aria-current="page"] { background: none; }
  .order-page__head { margin-bottom: 18px; }
  .order-page__lines li { flex-wrap: nowrap; }
  .order-page__lines a { flex-basis: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
  .order-page__price { margin-left: 0; font-size: 12px; }
  .order-page__cols { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}
@media (max-width: 479px) {
  .order-page__cols { grid-template-columns: 1fr; }
}

/* An official partner's banner on its brand page and the box on its products (tasks 39, 40). */
.partner-banner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 200px; margin: 30px 0 10px; overflow: hidden; background: #f6f6f6; }
.partner-banner__text { padding: 28px 30px; }
.partner-banner__logo { display: block; max-width: 200px; max-height: 50px; margin-bottom: 30px; object-fit: contain; }
.partner-banner__name { display: block; margin-bottom: 30px; font-size: 26px; font-weight: 800; color: var(--c-navy); }
.partner-banner__text p { margin: 0; font-size: 16px; line-height: 1.6; }
.partner-banner__media { position: relative; align-self: stretch; min-height: 200px; }
.partner-banner { position: relative; }
.partner-banner__media img { position: absolute; inset: 22px 30px 0 0; width: calc(100% - 30px); height: calc(100% - 22px); object-fit: cover; clip-path: polygon(70px 0, 100% 0, calc(100% - 70px) 100%, 0 100%); }
.partner-banner__media::before, .partner-banner__media::after { content: ""; position: absolute; z-index: 1; width: 18px; height: 48%; background: var(--strip); transform: skewX(-17.5deg); }
.partner-banner__media::before { top: 22px; left: 57px; transform-origin: top left; }
.partner-banner__media::after { bottom: 0; right: 33px; transform-origin: bottom right; }
.pd__partner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 18px; padding: 10px 14px; background: #f6f6f6; }
.pd__partner span { display: flex; flex-direction: column; }
.pd__partner strong { font-size: var(--fs-sm); color: var(--c-navy); }
.pd__partner small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.pd__partner img { max-width: 120px; max-height: 32px; object-fit: contain; }
@media (max-width: 767px) {
  .partner-banner { grid-template-columns: 1fr; }
  .partner-banner__media img { inset: 0; width: 100%; height: 100%; clip-path: none; }
}

/* "Quote request" on a part without a price: the RFQ number and quantity side by side (task 42). */
.pd__price-note { margin-left: 14px; font-size: var(--fs-sm); font-weight: 400; color: var(--c-text); }
.pd__quote { margin: 18px 0 24px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.pd__quote .inquiry__product-row { display: grid; grid-template-columns: 1fr 90px; gap: 16px; }
.pd__quote .modal__foot { justify-content: stretch; }
.pd__quote .modal__foot .btn { width: 100%; }