:root {
--navy: #0B2545;
--navy-2: #123A6B;
--navy-3: #0E2F58;
--gold: #C9A227;
--gold-2: #E3C55A;
--ink: #161B22;
--ink-2: #4B5563;
--paper: #FFFFFF;
--paper-2: #F5F6F8;
--line: #E5E7EB;
--ok: #1F8A4C;
--warn: #B7791F;
--bad: #B42318;
--on-navy-muted: #C9D2E0;
--tile-media: #EAEDF0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--fs-12: 0.75rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-22: 1.375rem;
--fs-28: 1.75rem;
--fs-36: 2.25rem;
--fs-48: 3rem;
--font-display: "Manrope", Arial, sans-serif;
--font-body: "Inter", Arial, sans-serif;
--radius-badge: 4px;
--radius-button: 8px;
--radius-card: 12px;
--tap: 48px;
--logo-height: calc(var(--s-6) + var(--s-2));
--logo-ratio: 425 / 118;
--container: 1280px;
--measure: 70ch;
--ease-hover: ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 400;
line-height: 1.55;
}
main {
flex: 1 0 auto;
}
h1,
h2,
h3 {
margin: 0;
color: var(--navy);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
}
p {
margin: 0;
}
a {
color: var(--navy);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--navy-2);
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
img,
svg {
display: block;
max-width: 100%;
height: auto;
}
code,
pre {
font-family: Consolas, "SFMono-Regular", Menlo, monospace;
font-size: var(--fs-14);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: var(--s-2);
left: var(--s-2);
z-index: 10;
padding: var(--s-3) var(--s-4);
background: var(--navy);
color: var(--paper);
font-weight: 600;
border-radius: var(--radius-button);
transform: translateY(-200%);
}
.skip-link:focus {
transform: none;
color: var(--paper);
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--s-4);
}
[hidden] {
display: none !important;
}
@media (min-width: 768px) {
.container {
padding-inline: var(--s-5);
}
}
@media (min-width: 1024px) {
.container {
padding-inline: var(--s-6);
}
}
.menu-icon,
.search__icon,
.external-icon,
.stock__icon {
display: inline-block;
flex: none;
width: 1.25rem;
height: 1.25rem;
background-color: currentColor;
mask: var(--icon) center / contain no-repeat;
-webkit-mask: var(--icon) center / contain no-repeat;
}
.menu-icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}
.search__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}
.external-icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
width: 1rem;
height: 1rem;
}
.site-header {
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"menu brand actions"
"search search search";
align-items: center;
gap: var(--s-2) var(--s-3);
padding-block: var(--s-2);
}
.site-header__inner--no-search {
grid-template-areas: "menu brand actions";
}
.site-header__menu {
grid-area: menu;
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap);
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--navy);
font: 600 var(--fs-14) / 1.2 var(--font-body);
text-decoration: none;
cursor: pointer;
}
.site-header__menu[aria-expanded="true"] {
border-color: var(--navy);
}
.site-header__brand {
grid-area: brand;
display: inline-flex;
align-items: center;
justify-self: start;
min-width: var(--tap);
min-height: var(--tap);
color: var(--navy);
}
.site-header__logo svg {
height: var(--logo-height);
width: auto;
aspect-ratio: var(--logo-ratio);
}
.site-header__icon {
display: none;
}
.site-header__icon svg {
height: var(--logo-height);
width: var(--logo-height);
}
.site-header .search {
grid-area: search;
}
.topbar {
display: none;
}
@media not all and (min-width: 480px) {
.site-header__menu {
justify-content: center;
min-width: var(--tap);
padding: 0;
}
.site-header__menu-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
@media (min-width: 1024px) {
.topbar {
display: block;
border-bottom: 1px solid var(--line);
background: var(--paper-2);
color: var(--ink-2);
font-size: var(--fs-14);
}
.topbar__inner {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
column-gap: var(--s-5);
padding-block: var(--s-1);
}
.topbar a {
color: var(--navy);
font-weight: 500;
text-decoration: none;
}
.topbar a:hover {
text-decoration: underline;
}
}
@media not all and (min-width: 480px) {
.site-header__logo {
display: none;
}
.site-header__icon {
display: block;
}
}
@media (min-width: 1024px) {
.site-header__inner {
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas: "brand menu search actions";
column-gap: var(--s-5);
min-height: calc(var(--s-8) + var(--s-4));
}
.site-header__inner--no-search {
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas: "brand menu . actions";
}
.site-header .search {
max-width: 40rem;
}
}
.search__label {
display: block;
margin-bottom: var(--s-2);
font-weight: 600;
}
.search__row {
display: flex;
gap: var(--s-2);
min-width: 0;
}
.search__input {
flex: 1;
min-width: 0;
min-height: var(--tap);
padding: var(--s-2) var(--s-3);
border: 1px solid var(--ink-2);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-16) / 1.3 var(--font-body);
}
.search__input::placeholder {
color: var(--ink-2);
}
.search__input {
text-overflow: ellipsis;
}
.search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-width: var(--tap);
min-height: var(--tap);
border-radius: var(--radius-button);
}
.search__submit--quiet {
padding: 0 var(--s-4);
border: 1px solid var(--ink-2);
background: var(--paper-2);
color: var(--navy);
font: 600 var(--fs-16) / 1.2 var(--font-body);
cursor: pointer;
}
.search__submit--quiet:hover {
background: var(--line);
}
.search--hero .search__input,
.search--hero .search__submit {
min-height: var(--s-8);
font-size: var(--fs-18);
}
.search--hero .search__input {
padding-inline: var(--s-4);
border-width: 2px;
border-color: var(--navy);
}
.search--hero .search__submit {
padding-inline: var(--s-5);
}
.catnav-backdrop {
position: fixed;
inset: 0;
z-index: 39;
background: rgba(11, 37, 69, 0.4);
}
.catnav {
position: fixed;
inset: 0 auto 0 0;
z-index: 40;
width: min(24rem, 88vw);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--paper);
box-shadow: 0 -1px 0 var(--line), 0 8px 24px rgba(11, 37, 69, 0.08);
}
.catnav__head {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-2) var(--s-4);
border-bottom: 1px solid var(--line);
background: var(--paper);
}
.catnav__title {
color: var(--navy);
font: 700 var(--fs-18) / 1.3 var(--font-display);
}
.catnav__close {
min-width: var(--tap);
min-height: var(--tap);
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--navy);
font: 600 var(--fs-14) / 1 var(--font-body);
cursor: pointer;
}
.catnav__list,
.catnav__children {
margin: 0;
padding: 0;
list-style: none;
}
.catnav__list {
display: grid;
align-items: start;
gap: var(--s-2);
padding: var(--s-3) var(--s-4) var(--s-6);
}
.catnav__group {
display: grid;
align-content: start;
gap: var(--s-2);
}
.catnav__children {
display: grid;
gap: var(--s-2);
padding-left: var(--s-4);
border-left: 1px solid var(--line);
}
.catnav__parent,
.catnav__child {
display: flex;
align-items: center;
min-height: var(--tap);
text-decoration: none;
}
.catnav__parent {
color: var(--navy);
font-weight: 600;
}
.catnav__child {
color: var(--ink);
font-size: var(--fs-14);
}
.catnav__parent:hover,
.catnav__child:hover {
text-decoration: underline;
}
@media (min-width: 1024px) {
.catnav {
inset: calc(var(--s-8) + var(--s-5)) auto auto 50%;
width: min(var(--container), calc(100% - var(--s-7)));
max-height: calc(100vh - var(--s-9) - var(--s-5));
max-height: calc(100dvh - var(--s-9) - var(--s-5));
border: 1px solid var(--line);
border-radius: var(--radius-card);
transform: translateX(-50%);
}
.catnav__list {
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: var(--s-5) var(--s-6);
padding: var(--s-5) var(--s-6) var(--s-6);
}
.catnav__group {
min-width: 0;
}
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: var(--tap);
padding: var(--s-3) var(--s-5);
border: 2px solid var(--navy);
border-radius: var(--radius-button);
background: var(--navy);
color: var(--paper);
font: 600 var(--fs-16) / 1.2 var(--font-body);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms var(--ease-hover), border-color 150ms var(--ease-hover);
}
.button:hover {
background: var(--navy-2);
border-color: var(--navy-2);
color: var(--paper);
}
.button:active:not(:disabled, [aria-disabled="true"]) {
transform: translateY(1px);
}
.button--secondary {
background: transparent;
color: var(--navy);
}
.button--secondary:hover {
background: var(--paper-2);
border-color: var(--navy-2);
color: var(--navy-2);
}
.button--block {
width: 100%;
}
.button:disabled,
.button:disabled:hover {
border-color: var(--line);
background: var(--paper-2);
color: var(--ink-2);
cursor: not-allowed;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
color: var(--ink-2);
font-size: var(--fs-14);
}
.breadcrumbs li {
display: flex;
align-items: baseline;
min-width: 0;
}
.breadcrumbs li + li::before {
content: "/";
margin-right: var(--s-2);
}
.breadcrumbs a {
display: inline-flex;
align-items: center;
min-width: var(--tap);
min-height: var(--tap);
color: var(--ink-2);
}
.breadcrumbs [aria-current="page"] {
color: var(--ink);
overflow-wrap: anywhere;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap);
padding: 0 var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--navy);
font-size: var(--fs-14);
font-weight: 500;
text-decoration: none;
}
.chip:hover {
border-color: var(--navy-3);
color: var(--navy);
}
.chip--remove::after {
content: "\00D7";
font-size: var(--fs-18);
line-height: 1;
}
.chip--clear {
border-color: transparent;
text-decoration: underline;
}
.page-listing,
.page-product {
padding-block: var(--s-2) var(--s-7);
}
.page-head {
margin-top: var(--s-2);
}
.page-head h1 {
font-size: var(--fs-28);
line-height: 1.2;
overflow-wrap: anywhere;
}
.page-head__lead {
margin-top: var(--s-2);
max-width: var(--measure);
color: var(--ink-2);
}
.page-head__term {
color: var(--ink);
}
.subcategories {
margin-top: var(--s-4);
}
.search-page__form {
max-width: 40rem;
margin-top: var(--s-4);
}
@media (min-width: 768px) {
.page-head h1 {
font-size: var(--fs-36);
}
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.hero__pattern {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
max-width: none;
opacity: 0.05;
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: var(--s-7);
padding-block: var(--s-6) var(--s-7);
}
.hero__title {
max-width: 22ch;
font-size: clamp(2.25rem, 4vw, 3rem);
line-height: 1.2;
}
.hero__lead {
max-width: 52ch;
margin-top: var(--s-4);
font-size: var(--fs-18);
}
.hero .search {
max-width: 40rem;
margin-top: var(--s-6);
}
.hero__chips {
margin-top: var(--s-4);
}
.hero__chips .chip {
font-weight: 400;
}
.hero__visual {
display: none;
}
.facet {
width: 100%;
height: auto;
}
@media (min-width: 768px) {
.hero__inner {
padding-block: var(--s-8);
}
}
@media (min-width: 1024px) {
.hero__inner {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
padding-block: var(--s-7);
}
.hero__visual {
display: block;
justify-self: center;
width: 100%;
max-width: 18rem;
}
}
.home-section--n1 {
padding-block: var(--s-8);
}
.home-section--offers {
padding-top: 0;
}
.home-section--n2 {
padding-block: var(--s-6);
}
.section-title {
font-size: var(--fs-28);
line-height: 1.2;
}
.section-title--n2 {
font-size: var(--fs-22);
}
.section-lead {
max-width: var(--measure);
margin-top: var(--s-2);
color: var(--ink-2);
}
.section-title + .tiles,
.section-title + .product-grid,
.section-lead + .product-grid {
margin-top: var(--s-5);
}
.tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
margin: var(--s-5) 0 0;
padding: 0;
list-style: none;
}
.tile {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
row-gap: var(--s-2);
}
.tile__link {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper);
color: var(--navy);
text-decoration: none;
}
.tile__link:hover {
border-color: var(--navy-3);
color: var(--navy);
}
.tile__media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-card) var(--radius-card) 0 0;
background: var(--tile-media);
}
.tile__media picture {
display: block;
height: 100%;
}
.tile__media img {
display: block;
width: auto;
max-width: 100%;
height: 100%;
margin-inline: auto;
object-fit: contain;
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.tile__name {
display: flex;
align-items: center;
min-height: var(--tap);
padding: var(--s-2) var(--s-3);
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.tile__subs {
padding-inline: var(--s-1);
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 1.7;
overflow-wrap: anywhere;
}
.tile__subs a {
color: var(--ink-2);
}
.tile__subs a:hover {
color: var(--navy);
}
@media not all and (min-width: 768px) {
.tiles--before-offers .tile:nth-child(n + 7) {
display: none;
}
}
@media (min-width: 768px) {
.tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-4);
}
.tile__name {
padding-inline: var(--s-4);
}
}
.trust {
border-block: 1px solid var(--line);
background: var(--paper);
}
.trust__line {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
margin: 0;
padding: var(--s-4) 0;
list-style: none;
color: var(--ink);
font-size: var(--fs-14);
font-weight: 500;
}
.trust__line li {
display: flex;
align-items: center;
gap: var(--s-2);
}
.trust__icon {
flex: none;
width: 1.25rem;
height: 1.25rem;
background-color: var(--navy);
mask: var(--icon) center / contain no-repeat;
-webkit-mask: var(--icon) center / contain no-repeat;
}
.trust__icon--delivery {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v9h-11zM13.5 9.5h4l3 3v3h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.75'/%3E%3Ccircle cx='17' cy='17.5' r='1.75'/%3E%3C/svg%3E");
}
.trust__icon--return {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7'/%3E%3Cpath d='M4 4.5v4h4'/%3E%3C/svg%3E");
}
.trust__icon--warranty {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.trust__icon--invoice {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M15 3v4h4M9 12h7M9 16h7'/%3E%3C/svg%3E");
}
.trust__icon--card {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 14.5h4'/%3E%3C/svg%3E");
}
.trust__icon--bank {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E");
}
.b2b {
background: var(--navy);
color: var(--paper);
}
.b2b :focus-visible {
outline-color: var(--gold-2);
}
.b2b__inner {
display: grid;
gap: var(--s-4) var(--s-7);
padding-block: var(--s-6);
}
.b2b__title {
color: var(--paper);
font-size: var(--fs-22);
line-height: 1.3;
}
.b2b__facts {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.b2b__facts li {
display: flex;
align-items: baseline;
gap: var(--s-3);
}
.b2b__facts li::before {
content: "";
flex: none;
width: var(--s-2);
height: var(--s-2);
background: var(--gold);
transform: translateY(calc(var(--s-1) * -0.5)) rotate(45deg);
}
.b2b__action {
display: grid;
justify-items: start;
gap: var(--s-3);
}
.b2b__note {
max-width: 46ch;
color: var(--on-navy-muted);
font-size: var(--fs-14);
}
.button--on-navy {
border-color: var(--paper);
background: var(--paper);
color: var(--navy);
}
.button--on-navy:hover {
border-color: var(--gold-2);
background: var(--gold-2);
color: var(--navy);
}
@media (min-width: 1024px) {
.b2b__inner {
grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr);
align-items: center;
}
}
.reasons {
padding-block: var(--s-6);
}
.reasons__row {
display: grid;
gap: var(--s-4) var(--s-5);
margin: var(--s-4) 0 0;
padding: 0;
list-style: none;
color: var(--ink-2);
font-size: var(--fs-14);
}
.reasons__row li {
padding-top: var(--s-3);
border-top: 2px solid var(--navy);
}
.reasons__row strong {
display: block;
margin-bottom: var(--s-1);
color: var(--ink);
font-size: var(--fs-16);
font-weight: 600;
}
.reasons__row a {
overflow-wrap: anywhere;
}
@media (min-width: 768px) {
.reasons__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.reasons__row {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.home-level-3__side {
display: grid;
align-content: start;
gap: var(--s-6);
}
.home-guides {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.home-guides__title {
display: inline-flex;
align-items: center;
min-height: var(--tap);
color: var(--ink);
font-weight: 600;
}
.home-guides p {
font-size: var(--fs-14);
}
.home-guides__all {
margin-top: var(--s-3);
}
.product-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-3);
}
@media (min-width: 480px) {
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-5) var(--s-4);
}
}
@media (min-width: 768px) {
.product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.product-grid--wide {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.card {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr);
align-content: start;
gap: var(--s-2) var(--s-3);
min-width: 0;
padding: var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper);
}
.card__media {
display: flex;
align-items: center;
justify-content: center;
align-self: start;
aspect-ratio: 4 / 3;
border-radius: var(--radius-badge);
background: var(--paper);
}
.card__media picture,
.card__media img {
width: 100%;
height: 100%;
}
.card__media img {
object-fit: contain;
}
.card__placeholder {
color: var(--ink-2);
font-size: var(--fs-12);
}
.card__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
}
.card__title {
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.card__title a {
display: -webkit-box;
min-height: 3em;
overflow: hidden;
color: var(--ink);
line-height: 1.5;
text-decoration: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.card__title a:hover {
color: var(--navy-2);
text-decoration: underline;
}
.card__specs {
margin: 0;
padding: 0;
list-style: none;
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 1.4;
}
.card__specs li + li {
margin-top: var(--s-1);
}
.card__spec-label {
color: var(--ink);
}
.card__action {
align-self: end;
}
@media not all and (min-width: 480px) {
.card {
grid-template-areas:
"media badges"
"media title"
"media specs"
"media price"
"media stock"
"action action";
}
.card__media {
grid-area: media;
}
.card__badges {
grid-area: badges;
}
.card__title {
grid-area: title;
}
.card__specs {
grid-area: specs;
}
.card .price {
grid-area: price;
}
.card .stock {
grid-area: stock;
}
.card__action {
grid-area: action;
}
}
@media (min-width: 480px) {
.card {
grid-template-columns: minmax(0, 1fr);
grid-row: span 7;
grid-template-rows: subgrid;
row-gap: var(--s-3);
padding: var(--s-4);
}
.card__media {
width: 100%;
}
}
@supports not (grid-template-rows: subgrid) {
@media (min-width: 480px) {
.card {
display: flex;
flex-direction: column;
}
.card__action {
margin-top: auto;
}
}
}
@media (hover: hover) and (pointer: fine) {
.card:hover {
border-color: var(--navy-3);
}
}
.type-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--s-2);
border: 1px solid transparent;
border-radius: var(--radius-badge);
font-size: var(--fs-12);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.04em;
white-space: nowrap;
}
.type-badge--own {
background: var(--gold);
color: var(--navy);
}
.type-badge--affiliate {
border-color: var(--navy);
background: var(--paper);
color: var(--navy);
}
.price__line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) var(--s-2);
}
.price__current {
color: var(--navy);
font-family: var(--font-display);
font-size: var(--fs-22);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
}
.price__current--none {
font-size: var(--fs-16);
}
.price__percent {
display: inline-flex;
align-items: center;
padding: 2px var(--s-2);
border-radius: var(--radius-badge);
background: var(--gold);
color: var(--navy);
font-size: var(--fs-12);
font-weight: 700;
line-height: 1.4;
}
.price__note,
.price__reference {
margin-top: var(--s-1);
color: var(--ink-2);
font-size: var(--fs-12);
line-height: 1.4;
}
.price__reference {
font-size: var(--fs-14);
}
.price--buy .price__current {
font-size: var(--fs-28);
}
.price--buy .price__note {
font-size: var(--fs-14);
}
.stock {
display: flex;
align-items: flex-start;
gap: var(--s-2);
color: var(--ink);
font-size: var(--fs-14);
line-height: 1.4;
}
.stock__icon {
width: var(--s-4);
height: var(--s-4);
margin-top: 2px;
}
.stock--in-stock .stock__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
color: var(--ok);
}
.stock--on-demand .stock__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
color: var(--warn);
}
.stock--out-of-stock .stock__icon,
.stock--unavailable .stock__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
color: var(--bad);
}
.stock--partner .stock__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");
color: var(--navy-2);
}
.stock--checking .stock__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-13.7 5.6M4 12a8 8 0 0 1 13.7-5.6'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E");
color: var(--ink-2);
}
.listing {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-5);
margin-top: var(--s-5);
}
.listing__main {
min-width: 0;
}
@media (min-width: 1024px) {
.listing {
grid-template-columns: 17rem minmax(0, 1fr);
gap: var(--s-6);
}
}
.filters {
align-self: start;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper);
}
.filters__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-2) var(--s-4);
border-bottom: 1px solid var(--line);
}
.filters__title {
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.filters__close {
min-width: var(--tap);
min-height: var(--tap);
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--navy);
font: 600 var(--fs-14) / 1 var(--font-body);
cursor: pointer;
}
.filters__form {
display: grid;
gap: var(--s-4);
padding: var(--s-4);
}
.filters__group {
min-width: 0;
margin: 0;
padding: 0 0 var(--s-4);
border: 0;
border-bottom: 1px solid var(--line);
}
.filters__legend {
margin-bottom: var(--s-1);
padding: 0;
color: var(--ink);
font-size: var(--fs-14);
font-weight: 600;
}
.filters__option {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: var(--tap);
font-size: var(--fs-14);
cursor: pointer;
}
.filters__option + .filters__option {
margin-top: var(--s-2);
}
.filters__option input {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin: 0;
accent-color: var(--navy);
}
.filters__option:has(input:disabled) {
color: var(--ink-2);
cursor: not-allowed;
}
.filters__count {
color: var(--ink-2);
}
.filters__range {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
margin-top: var(--s-2);
}
.filters__field {
display: grid;
gap: var(--s-1);
min-width: 0;
font-size: var(--fs-14);
}
.filters__field input,
.toolbar select,
.buy-action__qty input {
width: 100%;
min-width: 0;
min-height: var(--tap);
padding: var(--s-2) var(--s-3);
border: 1px solid var(--ink-2);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-16) / 1.3 var(--font-body);
}
.filters__actions {
display: grid;
gap: var(--s-2);
}
@media not all and (min-width: 1024px) {
.filters:not(:target),
.listing.is-drawer .filters {
display: none;
}
.listing.is-drawer .filters.is-open {
position: fixed;
inset: 0 0 0 auto;
z-index: 40;
display: block;
align-self: stretch;
width: min(24rem, 92vw);
max-height: 100vh;
max-height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
border: 0;
border-radius: 0;
box-shadow: 0 -1px 0 var(--line), 0 8px 24px rgba(11, 37, 69, 0.08);
}
.listing.is-drawer .filters__head {
position: sticky;
top: 0;
z-index: 1;
background: var(--paper);
}
body:has(.listing.is-drawer .filters.is-open) {
overflow: hidden;
}
}
.filters-backdrop {
position: fixed;
inset: 0;
z-index: 39;
background: rgba(11, 37, 69, 0.4);
}
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s-3);
}
@media (min-width: 1024px) {
.toolbar__filters {
display: none;
}
}
.toolbar__count {
flex: 1 1 100%;
color: var(--ink-2);
font-size: var(--fs-14);
}
.toolbar__sort {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s-2);
min-width: 0;
}
.toolbar__sort label {
flex: 1 1 100%;
font-size: var(--fs-14);
font-weight: 600;
}
.toolbar select {
width: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.toolbar__count {
flex: 1 1 auto;
align-self: center;
}
}
.how-sorted {
margin-top: var(--s-2);
}
.how-sorted summary {
display: inline-flex;
align-items: center;
min-height: var(--tap);
color: var(--navy);
font-size: var(--fs-14);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.2em;
cursor: pointer;
}
.how-sorted__body {
display: grid;
gap: var(--s-2);
max-width: var(--measure);
padding: var(--s-3) var(--s-4);
border-left: 2px solid var(--gold);
background: var(--paper-2);
color: var(--ink);
font-size: var(--fs-14);
}
.chips--active {
margin-top: var(--s-3);
}
.listing__main .product-grid {
margin-top: var(--s-5);
}
.empty-state,
.no-results {
display: grid;
gap: var(--s-3);
margin-top: var(--s-5);
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.empty-state__title,
.no-results__title {
font-size: var(--fs-22);
line-height: 1.3;
overflow-wrap: anywhere;
}
.no-results__subtitle {
margin-top: var(--s-2);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.no-results__suggestion {
font-size: var(--fs-18);
}
.no-results__contact {
margin-top: var(--s-2);
}
.category-soon {
display: grid;
gap: var(--s-4);
max-width: var(--measure);
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.category-soon__contact {
color: var(--ink);
font-weight: 500;
}
.pagination {
margin-top: var(--s-6);
}
.pagination ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--tap);
min-height: var(--tap);
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-button);
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
.pagination__link--current {
border-color: var(--navy);
background: var(--navy);
color: var(--paper);
}
.pagination__gap {
color: var(--ink-2);
}
.product-top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-5);
margin-top: var(--s-2);
}
@media (min-width: 1024px) {
.product-top {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--s-7);
align-items: start;
}
}
.gallery__main {
display: block;
aspect-ratio: 4 / 3;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper);
}
.gallery__main picture,
.gallery__main img {
width: 100%;
height: 100%;
}
.gallery__main img {
object-fit: contain;
border-radius: var(--radius-card);
}
.gallery__thumbs {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: var(--s-3) 0 0;
padding: 0;
list-style: none;
}
.gallery__thumb {
display: block;
width: var(--s-8);
height: var(--s-8);
padding: var(--s-1);
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
}
.gallery__thumb[aria-current="true"] {
border: 2px solid var(--navy);
}
.gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery__empty {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper-2);
color: var(--ink-2);
}
.buybox {
display: grid;
gap: var(--s-4);
align-content: start;
justify-items: start;
}
.buybox > * {
max-width: 100%;
}
.buybox__title {
font-size: var(--fs-28);
line-height: 1.2;
overflow-wrap: anywhere;
}
.buybox__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-1) var(--s-4);
color: var(--ink-2);
font-size: var(--fs-14);
}
.buybox__delivery {
font-size: var(--fs-14);
}
.buybox__note,
.buybox__summary {
color: var(--ink-2);
font-size: var(--fs-14);
}
.buy-action {
display: grid;
gap: var(--s-2);
width: 100%;
padding-top: var(--s-4);
border-top: 1px solid var(--line);
}
.buy-action__form {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s-3);
}
.buy-action__qty {
display: grid;
gap: var(--s-1);
width: 6rem;
font-size: var(--fs-14);
font-weight: 600;
}
.buy-action__button {
flex: 1 1 12rem;
}
.buy-action > .buy-action__button {
width: 100%;
}
.buy-action__note {
color: var(--ink-2);
font-size: var(--fs-14);
}
.buy-action__unavailable {
padding: var(--s-3) var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius-badge);
background: var(--paper-2);
font-size: var(--fs-14);
}
.product-section {
margin-top: var(--s-7);
}
.product-section__title {
font-size: var(--fs-22);
line-height: 1.3;
}
.product-section__title + * {
margin-top: var(--s-4);
}
.service-lines {
max-width: var(--measure);
margin: 0;
padding: 0;
list-style: none;
}
.service-lines li {
padding-block: var(--s-2);
border-bottom: 1px solid var(--line);
}
.table-scroll {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
}
.table-scroll:focus-visible {
outline-offset: -2px;
}
.specs {
width: 100%;
max-width: 48rem;
border-collapse: collapse;
font-size: var(--fs-14);
}
.specs th,
.specs td {
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.specs th {
width: 40%;
background: var(--paper-2);
color: var(--ink);
font-weight: 600;
}
.specs td {
overflow-wrap: anywhere;
}
.level-3 {
padding-block: var(--s-6);
background: var(--paper-2);
color: var(--ink-2);
}
.level-3__grid {
display: grid;
gap: var(--s-5);
}
@media (min-width: 1024px) {
.level-3__grid {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--s-7);
}
}
.level-3__title {
margin-bottom: var(--s-3);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.prose {
max-width: var(--measure);
overflow-wrap: break-word;
}
.prose > * + * {
margin-top: var(--s-3);
}
.prose h2,
.prose h3,
.prose h4 {
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.prose ul,
.prose ol {
padding-left: var(--s-5);
}
.prose table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
.prose th,
.prose td {
padding: var(--s-1) var(--s-2);
border: 1px solid var(--line);
}
.faq > h2,
.faq__title {
margin-bottom: var(--s-3);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
min-height: var(--tap);
margin-block: var(--s-1);
padding-block: var(--s-2);
color: var(--ink);
font-weight: 600;
list-style: none;
cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
display: none;
}
.faq__item summary::after {
content: "+";
flex: none;
color: var(--navy);
font-size: var(--fs-22);
font-weight: 400;
line-height: 1;
}
.faq__item[open] summary::after {
content: "\2212";
}
.faq__item:not([open]) > :not(summary) {
display: none;
}
.faq__item p,
.faq__answer {
padding-bottom: var(--s-3);
}
.faq__answer p {
padding-bottom: 0;
}
.faq__answer > * + * {
margin-top: var(--s-2);
}
.page-legal {
padding-block: var(--s-2) var(--s-8);
}
.legal-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-5);
margin-top: var(--s-5);
}
.legal-doc {
max-width: var(--measure);
min-width: 0;
overflow-wrap: break-word;
}
.legal-doc > * + * {
margin-top: var(--s-4);
}
.legal-doc h2 {
margin-top: var(--s-7);
font-size: var(--fs-22);
line-height: 1.3;
scroll-margin-top: var(--s-5);
}
.legal-doc > h2:first-child {
margin-top: 0;
}
.legal-doc h2 + *,
.legal-doc h3 + * {
margin-top: var(--s-3);
}
.legal-doc h3 {
font-size: var(--fs-18);
line-height: 1.35;
}
.legal-doc ul,
.legal-doc ol {
margin-bottom: 0;
padding-left: var(--s-5);
}
.legal-doc li + li {
margin-top: var(--s-2);
}
.legal-doc strong {
color: var(--ink);
font-weight: 600;
}
.legal-doc__updated {
color: var(--ink-2);
font-size: var(--fs-14);
}
.legal-doc > .legal-doc__updated,
.legal-doc > p:last-child {
margin-top: var(--s-7);
}
.legal-toc {
min-width: 0;
font-size: var(--fs-14);
}
.legal-toc__mobile {
border: 1px solid var(--line);
border-radius: var(--radius-button);
}
.legal-toc__mobile summary {
display: flex;
align-items: center;
min-height: var(--tap);
padding-inline: var(--s-4);
color: var(--navy);
font-weight: 600;
cursor: pointer;
}
.legal-toc__mobile .legal-toc__list {
padding: 0 var(--s-4) var(--s-3);
}
.legal-toc__mobile:not([open]) > :not(summary) {
display: none;
}
.legal-toc__desktop {
display: none;
}
.legal-toc__title {
color: var(--ink);
font-weight: 600;
}
.legal-toc__list {
margin: 0;
padding: 0;
list-style: none;
}
.legal-toc__list li + li {
margin-top: var(--s-2);
}
.legal-toc__list a {
display: flex;
align-items: center;
min-height: var(--tap);
color: var(--ink-2);
text-decoration: none;
}
.legal-toc__list a:hover {
color: var(--navy);
text-decoration: underline;
}
@media (min-width: 1024px) {
.legal-layout--toc {
grid-template-columns: minmax(0, 15rem) minmax(0, var(--measure));
gap: var(--s-7);
}
.legal-layout--toc .legal-toc {
position: sticky;
top: var(--s-5);
align-self: start;
max-height: calc(100vh - var(--s-7));
max-height: calc(100dvh - var(--s-7));
overflow-y: auto;
}
.legal-toc__mobile {
display: none;
}
.legal-toc__desktop {
display: block;
padding-right: var(--s-4);
border-right: 1px solid var(--line);
}
.legal-toc__desktop .legal-toc__list {
margin-top: var(--s-2);
}
}
.legal-doc > .legal-form {
margin-block: var(--s-8);
}
.legal-form {
padding: var(--s-5) var(--s-4);
border: 2px solid var(--navy);
border-radius: var(--radius-card);
background: var(--paper);
}
.legal-doc .legal-form__title {
margin-top: 0;
font-size: var(--fs-28);
line-height: 1.2;
}
.legal-form__lead {
margin-top: var(--s-2);
color: var(--ink-2);
}
.legal-form > .notice,
.legal-form > .error-summary {
margin-top: var(--s-4);
}
.legal-form__form {
display: grid;
gap: var(--s-5);
margin-top: var(--s-5);
}
.legal-form__form .button {
justify-self: start;
}
.legal-form__privacy {
color: var(--ink-2);
font-size: var(--fs-14);
}
@media (min-width: 768px) {
.legal-form {
padding: var(--s-6);
}
}
.bot-field {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.cookie-list__category {
margin-top: var(--s-5);
}
.cookie-list__note {
color: var(--ink-2);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: 400;
}
.cookie-list__empty {
color: var(--ink-2);
}
.legal-doc .cookie-table {
display: table;
overflow: visible;
}
.cookie-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-14);
}
.cookie-table th,
.cookie-table td {
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.cookie-table thead th {
background: var(--paper-2);
color: var(--ink);
font-weight: 600;
}
.cookie-table tbody th {
font-weight: 400;
white-space: nowrap;
}
.account-delete__confirm .button--danger {
margin-top: var(--s-2);
}
.brand-run {
margin: 0;
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 2;
}
.brand-run a {
color: var(--ink);
text-decoration: none;
white-space: nowrap;
}
.brand-run a:hover {
color: var(--navy);
text-decoration: underline;
}
.description.is-collapsed .description__rest {
display: none;
}
.description {
overflow-anchor: none;
}
.description__toggle {
display: inline-flex;
align-items: center;
min-height: var(--tap);
padding: 0;
border: 0;
background: none;
color: var(--navy);
font: inherit;
font-size: var(--fs-14);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
cursor: pointer;
}
.description__toggle[hidden] {
display: none;
}
.description__toggle:hover {
color: var(--navy-2);
}
.brand-more summary {
display: inline-flex;
align-items: center;
min-height: var(--tap);
color: var(--navy);
font-size: var(--fs-14);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
cursor: pointer;
}
.brand-more:not([open]) > :not(summary) {
display: none;
}
html {
scroll-padding-bottom: calc(var(--buy-bar-space, 0px) + var(--consent-space, 0px));
}
.buy-bar {
position: fixed;
inset: auto 0 0;
z-index: 30;
padding-block: var(--s-2);
background: var(--paper);
box-shadow: 0 -1px 0 var(--line), 0 8px 24px rgba(11, 37, 69, 0.08);
transform: translateY(0);
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@starting-style {
.buy-bar {
transform: translateY(100%);
}
}
.buy-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
}
.buy-bar__text {
min-width: 0;
}
.buy-bar__name {
color: var(--ink);
font-size: var(--fs-14);
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.buy-bar__price {
color: var(--navy);
font: 700 var(--fs-18) / 1.2 var(--font-display);
}
.buy-bar__button {
flex: none;
padding-inline: var(--s-4);
}
@media (min-width: 1024px) {
.buy-bar {
display: none !important;
}
}
.error-page__search {
max-width: 40rem;
margin-top: var(--s-5);
}
.error-page__subtitle {
margin: var(--s-5) 0 var(--s-3);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.error-page {
padding-block: var(--s-7) var(--s-8);
}
.error-page__body {
max-width: var(--measure);
}
.error-page__code {
margin-bottom: var(--s-3);
color: var(--ink-2);
font-size: var(--fs-12);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.error-page h1 {
font-size: var(--fs-36);
line-height: 1.2;
}
.error-page__message {
margin-top: var(--s-4);
font-size: var(--fs-18);
}
.error-page__hint {
margin-top: var(--s-3);
color: var(--ink-2);
}
.error-page__id {
margin-top: var(--s-5);
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper-2);
}
.error-page__id code {
font-size: var(--fs-16);
font-weight: 600;
color: var(--navy);
user-select: all;
}
.error-page__contact {
margin-top: var(--s-5);
}
.error-page__actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin: var(--s-6) 0 0;
padding: 0;
list-style: none;
}
.error-debug {
margin-top: var(--s-6);
border: 1px solid var(--bad);
border-radius: var(--radius-card);
}
.error-debug summary {
min-height: var(--tap);
padding: var(--s-3) var(--s-4);
color: var(--bad);
font-weight: 600;
cursor: pointer;
}
.error-debug__body {
padding: 0 var(--s-4) var(--s-4);
}
.error-debug dl {
display: grid;
gap: var(--s-1) var(--s-4);
margin: 0 0 var(--s-4);
}
.error-debug dt {
color: var(--ink-2);
font-size: var(--fs-14);
font-weight: 600;
}
.error-debug dd {
margin: 0;
overflow-wrap: anywhere;
}
.error-debug pre {
margin: 0;
padding: var(--s-3);
overflow-x: auto;
background: var(--paper-2);
border-radius: var(--radius-badge);
line-height: 1.5;
}
.site-footer {
flex-shrink: 0;
background: var(--navy);
color: var(--on-navy-muted);
font-size: var(--fs-14);
}
.site-footer a {
color: var(--paper);
}
.site-footer a:hover {
color: var(--gold-2);
}
.site-footer :focus-visible {
outline-color: var(--gold-2);
}
.site-footer__head {
padding-top: var(--s-6);
}
.site-footer__logo svg {
height: var(--s-7);
width: auto;
aspect-ratio: var(--logo-ratio);
}
.site-footer__grid {
display: grid;
padding-block: var(--s-4);
}
.site-footer__col {
border-bottom: 1px solid var(--navy-3);
}
.site-footer__heading {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--tap);
margin-block: var(--s-1);
color: var(--paper);
font-size: var(--fs-16);
font-weight: 600;
list-style: none;
cursor: pointer;
}
.site-footer__heading::-webkit-details-marker {
display: none;
}
.site-footer__heading::after {
content: "";
flex: none;
width: var(--s-2);
height: var(--s-2);
margin-right: var(--s-2);
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(calc(var(--s-1) * -0.5)) rotate(45deg);
}
.site-footer__col[open] > .site-footer__heading::after {
transform: translateY(calc(var(--s-1) * 0.5)) rotate(-135deg);
}
.site-footer__col:not([open]) > :not(summary) {
display: none;
}
.site-footer__links {
display: grid;
row-gap: var(--s-2);
margin: var(--s-2) 0 var(--s-3);
padding: 0;
list-style: none;
}
.site-footer__links a {
display: flex;
align-items: center;
min-height: var(--tap);
text-decoration: none;
}
.site-footer__links a:hover {
text-decoration: underline;
}
.site-footer__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-2);
margin-top: var(--s-2);
font-style: normal;
}
.site-footer__contact a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
overflow-wrap: anywhere;
}
.site-footer__contact p {
overflow-wrap: anywhere;
}
.site-footer__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-5);
padding-block: var(--s-4) var(--s-2);
}
.site-footer__sal {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
max-width: 100%;
height: 50px;
background: var(--paper);
}
.site-footer__sal img {
width: 201px;
height: 50px;
}
.site-footer__sal:focus-visible {
outline-offset: 2px;
}
.site-footer__payments {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
margin: 0;
}
.site-footer__payments-note {
color: var(--on-navy-muted);
font-size: var(--fs-14);
}
.site-footer__payments img {
width: 201px;
max-width: 100%;
height: auto;
}
.site-footer__always {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
margin-block: 0;
padding-block: var(--s-2);
list-style: none;
}
.site-footer__always a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
}
.site-footer__bottom {
padding-block: var(--s-4);
border-top: 1px solid var(--navy-3);
color: var(--on-navy-muted);
font-size: var(--fs-12);
}
.site-footer__bottom-inner {
display: grid;
gap: var(--s-3);
}
.site-footer__identity {
display: grid;
gap: var(--s-1);
max-width: 90ch;
}
.site-footer__credit a {
font-weight: 600;
}
@media (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-6);
padding-block: var(--s-5) var(--s-4);
}
.site-footer__col {
border-bottom: 0;
}
.site-footer__heading {
cursor: default;
}
.site-footer__heading::after {
display: none;
}
.site-footer__always {
border-top: 1px solid var(--navy-3);
}
.site-footer__bottom-inner {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: var(--s-6);
}
.site-footer__credit {
text-align: right;
}
}
@keyframes hx-draw {
from {
stroke-dashoffset: 1;
}
}
.facet__edge {
stroke-dasharray: 1;
}
@media (prefers-reduced-motion: no-preference) {
.facet__edge {
animation: hx-draw 550ms cubic-bezier(0.77, 0, 0.175, 1) both;
}
.facet__edge--radial {
animation-delay: 150ms;
}
.facet__edge--inner {
animation-delay: 300ms;
}
}
.reveal-pending {
opacity: 0;
transform: translateY(var(--s-2));
}
.reveal-in {
opacity: 1;
transform: none;
}
[data-animate="tiles"] > .reveal-in {
transition: opacity 350ms cubic-bezier(0.25, 1, 0.5, 1), transform 350ms cubic-bezier(0.25, 1, 0.5, 1);
}
[data-animate="offers"] > .reveal-in {
transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="grid"] > .reveal-in {
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
[data-animate],
.reveal-pending {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
#continut:focus {
outline: none;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.gallery__main {
max-height: 32vh;
max-height: 32dvh;
}
}
@media not all and (min-width: 768px) {
.page-product .breadcrumbs li {
display: none;
}
.page-product .breadcrumbs li:nth-last-child(2) {
display: flex;
}
.page-product .breadcrumbs li:nth-last-child(2)::before {
content: "\2039";
margin-right: var(--s-2);
}
.gallery__main {
max-height: 24vh;
max-height: 24dvh;
}
.gallery__thumbs {
margin-top: var(--s-2);
}
.gallery__thumb {
width: var(--s-7);
height: var(--s-7);
}
.buybox__title {
font-size: var(--fs-22);
}
.product-top {
gap: var(--s-4);
}
}
.site-header__actions {
grid-area: actions;
display: flex;
align-items: center;
gap: var(--s-2);
}
.header-action {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-width: var(--tap);
min-height: var(--tap);
padding: 0 var(--s-2);
border: 1px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--navy);
font: 600 var(--fs-14) / 1.2 var(--font-body);
text-decoration: none;
}
.header-action:hover {
border-color: var(--navy-3);
color: var(--navy);
}
.header-action__icon {
display: inline-block;
flex: none;
width: 1.25rem;
height: 1.25rem;
background-color: currentColor;
mask: var(--icon) center / contain no-repeat;
-webkit-mask: var(--icon) center / contain no-repeat;
}
.header-action__icon--account {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}
.header-action__icon--cart {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h9.3a1 1 0 0 0 1-.8L20 8H6.2'/%3E%3Ccircle cx='9' cy='20' r='1.2'/%3E%3Ccircle cx='17' cy='20' r='1.2'/%3E%3C/svg%3E");
}
.header-action__icon--phone {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4.5-2 1.5a11 11 0 0 0 5.5 5.5l1.5-2 4.5 1.5v3a2 2 0 0 1-2 2A16.5 16.5 0 0 1 4.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
.header-action--phone {
display: none;
}
}
.header-action__name {
display: inline-block;
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.header-action__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 var(--s-1);
border-radius: var(--radius-card);
background: var(--gold);
color: var(--navy);
font: 700 var(--fs-12) / 1 var(--font-body);
}
@media not all and (min-width: 768px) {
.header-action__text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.header-action__count {
position: absolute;
top: var(--s-1);
right: var(--s-1);
}
}
@media (min-width: 768px) {
.header-action {
padding: 0 var(--s-3);
}
}
.flash-wrap {
padding-top: var(--s-4);
}
.notice {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border: 1px solid var(--navy-2);
border-radius: var(--radius-badge);
background: var(--paper);
color: var(--ink);
}
.notice:focus-visible {
outline-offset: 2px;
}
.notice__icon,
.field__error-icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E");
display: inline-block;
flex: none;
width: 1.25rem;
height: 1.25rem;
margin-top: 2px;
background-color: currentColor;
mask: var(--icon) center / contain no-repeat;
-webkit-mask: var(--icon) center / contain no-repeat;
}
.notice .notice__icon {
color: var(--navy-2);
}
.notice--success {
border-color: var(--ok);
}
.notice--success .notice__icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
color: var(--ok);
}
.notice--error {
border-color: var(--bad);
}
.notice--test {
border-color: var(--warn);
border-left-width: 6px;
}
.notice--test .notice__icon {
color: var(--warn);
}
.notice--test + form,
.notice--test + .error-summary {
margin-top: var(--s-4);
}
.checkout-netopia {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-3);
margin-top: var(--s-3);
color: var(--ink-2);
font-size: var(--fs-14);
}
.checkout-netopia img {
width: 134px;
height: auto;
padding: var(--s-1) var(--s-2);
border-radius: var(--radius-badge);
background: var(--navy);
}
.notice--error .notice__icon,
.field__error-icon {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5h.01'/%3E%3C/svg%3E");
color: var(--bad);
}
.flash-toast {
position: fixed;
right: var(--s-4);
bottom: var(--s-4);
z-index: 30;
width: min(28rem, calc(100vw - 2 * var(--s-4)));
}
.flash-toast:empty {
display: none;
}
.flash-toast .notice {
align-items: center;
padding-block: 0;
padding-right: 0;
box-shadow: 0 8px 24px rgba(11, 37, 69, 0.12);
}
.flash-toast .notice__text {
flex: 1;
padding-block: var(--s-3);
}
.flash-toast__close {
flex: none;
min-width: var(--tap);
min-height: var(--tap);
border: 0;
background: none;
color: var(--ink-2);
font: 600 var(--fs-18) / 1 var(--font-body);
cursor: pointer;
}
.flash-toast__close:hover {
color: var(--navy);
}
.notice__text {
min-width: 0;
overflow-wrap: anywhere;
}
.notice + .notice,
.notice + .error-summary,
.error-summary + form {
margin-top: var(--s-4);
}
.error-summary__list {
margin: var(--s-2) 0 0;
padding-left: var(--s-5);
}
.error-summary__list li + li {
margin-top: var(--s-2);
}
.error-summary__list a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
}
.form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-4);
}
@media (min-width: 768px) {
.form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--s-5);
}
.form-grid .field--wide {
grid-column: 1 / -1;
}
}
.field {
display: grid;
align-content: start;
gap: var(--s-1);
min-width: 0;
}
.field > label {
color: var(--ink);
font-size: var(--fs-14);
font-weight: 600;
}
.field__optional {
color: var(--ink-2);
font-weight: 400;
}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
width: 100%;
min-width: 0;
min-height: var(--tap);
padding: var(--s-2) var(--s-3);
border: 1px solid var(--ink-2);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-16) / 1.4 var(--font-body);
}
.field textarea {
resize: vertical;
}
.field input[readonly] {
background: var(--paper-2);
color: var(--ink-2);
}
.field [aria-invalid="true"] {
border-color: var(--bad);
box-shadow: inset 0 0 0 1px var(--bad);
}
.field__help {
color: var(--ink-2);
font-size: var(--fs-14);
}
.field__error {
display: flex;
align-items: flex-start;
gap: var(--s-2);
color: var(--bad);
font-size: var(--fs-14);
font-weight: 500;
}
.field__error-icon {
width: var(--s-4);
height: var(--s-4);
}
.field--check {
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-3);
align-items: start;
}
.field--check input {
width: 1.25rem;
height: 1.25rem;
margin: var(--s-3) 0 0;
accent-color: var(--navy);
}
.field--check > label {
display: flex;
align-items: center;
min-height: var(--tap);
font-size: var(--fs-16);
font-weight: 500;
cursor: pointer;
}
.field--check > .field__help,
.field--check > .field__error {
grid-column: 2;
}
.field--check [aria-invalid="true"] {
outline: 2px solid var(--bad);
outline-offset: 2px;
}
.form-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
}
.button--large {
min-height: var(--s-8);
padding-inline: var(--s-6);
font-size: var(--fs-18);
}
.button--danger {
border-color: var(--bad);
background: var(--bad);
}
.button--danger:hover {
border-color: var(--ink);
background: var(--ink);
}
.button[aria-busy="true"],
.button[aria-disabled="true"] {
cursor: progress;
}
.link-button,
.text-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-1);
min-width: var(--tap);
min-height: var(--tap);
padding: 0;
border: 0;
background: none;
color: var(--navy);
font: 600 var(--fs-14) / 1.2 var(--font-body);
text-decoration: underline;
text-underline-offset: 0.2em;
cursor: pointer;
}
.link-button:hover,
.text-link:hover {
color: var(--navy-2);
text-decoration-thickness: 2px;
}
.plain-list {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.link-row {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
margin: 0;
padding: 0;
list-style: none;
}
.link-row a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
}
.disclosure summary {
display: inline-flex;
align-items: center;
min-width: var(--tap);
min-height: var(--tap);
color: var(--navy);
font-size: var(--fs-14);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.2em;
cursor: pointer;
}
.disclosure:not([open]) > :not(summary) {
display: none;
}
.disclosure__panel {
display: grid;
gap: var(--s-3);
justify-items: start;
margin-top: var(--s-2);
padding: var(--s-4);
border-left: 2px solid var(--gold);
background: var(--paper-2);
font-size: var(--fs-14);
}
.buy-action__status:empty {
display: none;
}
.buy-action__status,
.buy-bar__note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--s-2);
font-size: var(--fs-14);
font-weight: 500;
}
.buy-action__status a,
.buy-bar__note a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
}
.buy-action__status.is-error,
.buy-bar__note.is-error {
color: var(--bad);
}
.page-cart,
.page-checkout,
.page-order,
.page-account,
.page-supplier {
padding-block: var(--s-4) var(--s-8);
}
.page-head--actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
}
.page-head__eyebrow {
color: var(--ink-2);
font-size: var(--fs-14);
font-weight: 600;
}
.cart-layout,
.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-7);
margin-top: var(--s-5);
}
@media (min-width: 1024px) {
.cart-layout,
.checkout {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--s-7);
align-items: start;
}
}
.cart-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.cart-line {
display: grid;
grid-template-columns: var(--s-8) minmax(0, 1fr);
grid-template-areas:
"media info"
"qty total"
"remove remove";
gap: var(--s-3) var(--s-4);
padding-block: var(--s-4);
border-bottom: 1px solid var(--line);
}
.cart-line__media {
grid-area: media;
display: block;
width: var(--s-8);
aspect-ratio: 4 / 3;
}
.cart-line__media img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cart-line__info {
grid-area: info;
display: grid;
align-content: start;
gap: var(--s-1);
min-width: 0;
}
.cart-line__name {
display: inline-flex;
align-items: center;
min-height: var(--tap);
color: var(--ink);
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.cart-line__meta,
.cart-line__reason {
color: var(--ink-2);
font-size: var(--fs-14);
}
.cart-line__qty {
grid-area: qty;
display: grid;
gap: var(--s-1);
font-size: var(--fs-14);
font-weight: 600;
}
.cart-line__qty-row {
display: flex;
gap: var(--s-2);
}
.cart-line__qty select {
width: 5.5rem;
min-height: var(--tap);
padding: var(--s-2) var(--s-3);
border: 1px solid var(--ink-2);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--ink);
font: 400 var(--fs-16) / 1.3 var(--font-body);
}
.cart-line__total {
grid-area: total;
display: flex;
align-items: center;
align-self: end;
justify-self: end;
min-height: var(--tap);
color: var(--navy);
font: 700 var(--fs-18) / 1.2 var(--font-display);
white-space: nowrap;
}
.cart-line__remove {
grid-area: remove;
}
.cart-line--unavailable {
grid-template-areas:
"media info"
"remove remove";
}
@media (min-width: 768px) {
.cart-line {
grid-template-columns: var(--s-9) minmax(0, 1fr) auto auto;
grid-template-areas:
"media info qty total"
"media remove remove remove";
column-gap: var(--s-5);
}
.cart-line--unavailable {
grid-template-areas: "media info remove remove";
align-items: center;
}
.cart-line__media {
width: var(--s-9);
}
.cart-line__total {
min-width: 8rem;
}
}
.cart-section-title {
color: var(--navy);
font-family: var(--font-display);
font-size: var(--fs-18);
line-height: 1.3;
}
.cart-unavailable {
margin-top: var(--s-6);
}
.cart-unavailable__lead {
margin: var(--s-1) 0 var(--s-3);
color: var(--ink-2);
font-size: var(--fs-14);
}
.cart-side,
.checkout__side {
display: grid;
gap: var(--s-6);
min-width: 0;
}
.summary-box {
display: grid;
gap: var(--s-4);
padding: var(--s-5);
border: 2px solid var(--navy);
border-radius: var(--radius-card);
background: var(--paper);
}
.summary-box__title {
font-size: var(--fs-22);
line-height: 1.25;
}
.summary-box__warning {
color: var(--bad);
font-size: var(--fs-14);
font-weight: 500;
}
.totals {
display: grid;
gap: var(--s-2);
margin: 0;
}
.totals__row {
display: flex;
justify-content: space-between;
gap: var(--s-4);
}
.totals__row dt {
color: var(--ink-2);
}
.totals__row dd {
margin: 0;
color: var(--ink);
font-weight: 600;
text-align: right;
white-space: nowrap;
}
.totals__row--total {
align-items: baseline;
padding-top: var(--s-3);
border-top: 1px solid var(--line);
}
.totals__row--total dt {
color: var(--navy);
font-weight: 700;
}
.totals__row--total dd {
color: var(--navy);
font: 700 var(--fs-28) / 1.1 var(--font-display);
letter-spacing: -0.01em;
}
.totals__vat,
.totals__note {
color: var(--ink-2);
font-size: var(--fs-14);
}
.cart-aside-section {
display: grid;
gap: var(--s-3);
align-content: start;
}
.coupon-form {
display: grid;
gap: var(--s-3);
justify-items: start;
}
.coupon-form .field {
width: 100%;
}
.coupon-applied {
display: flex;
align-items: flex-start;
gap: var(--s-2);
}
.coupon-applied--off {
color: var(--ink);
font-size: var(--fs-14);
}
.coupon-applied--off .notice__icon {
color: var(--warn);
}
.cart-empty {
grid-template-columns: minmax(0, 1fr);
max-width: 48rem;
}
.cart-empty .search {
max-width: 40rem;
}
.cart-empty__subtitle {
margin-top: var(--s-3);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-16);
font-weight: 600;
letter-spacing: 0;
}
.steps__list {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-14);
}
.steps__item {
display: flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap);
color: var(--ink-2);
}
.steps__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--s-5);
height: var(--s-5);
border: 1px solid var(--ink-2);
border-radius: var(--radius-card);
font-size: var(--fs-12);
font-weight: 700;
}
.steps__item--done .steps__number {
border-color: var(--navy);
background: var(--paper-2);
color: var(--navy);
}
.steps__item--current {
color: var(--navy);
font-weight: 700;
}
.steps__item--current .steps__number {
border-color: var(--navy);
background: var(--navy);
color: var(--paper);
}
.steps__label[href] {
display: inline-flex;
align-items: center;
min-width: var(--tap);
min-height: var(--tap);
}
.checkout__main {
display: grid;
gap: var(--s-7);
min-width: 0;
}
.checkout-section {
display: grid;
gap: var(--s-4);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.checkout-section__title {
margin-bottom: var(--s-4);
padding: 0;
color: var(--navy);
font: 700 var(--fs-22) / 1.25 var(--font-display);
letter-spacing: -0.01em;
}
.checkout-section--quiet .field > label {
color: var(--ink-2);
}
.segmented {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.segmented__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.segmented__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 8rem;
min-height: var(--tap);
padding: 0 var(--s-5);
border: 2px solid var(--line);
border-radius: var(--radius-button);
background: var(--paper);
color: var(--navy);
font-weight: 600;
cursor: pointer;
}
.segmented__input:checked + .segmented__option {
border-color: var(--navy);
background: var(--navy);
color: var(--paper);
}
.segmented__input:focus-visible + .segmented__option {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.checkout-company,
.billing-fields {
display: grid;
gap: var(--s-4);
}
.field-group {
display: grid;
gap: var(--s-2);
justify-items: start;
min-width: 0;
}
.field-group .field {
width: 100%;
}
.checkout-cui__status {
min-height: 1.5em;
font-size: var(--fs-14);
font-weight: 500;
line-height: 1.5;
}
.checkout-cui__status.is-error {
color: var(--bad);
}
.checkout-hint {
display: none;
color: var(--ink-2);
font-size: var(--fs-14);
}
.billing-title--company {
display: none;
}
.checkout:has(#co-tip-persoana:checked) .checkout-company,
.checkout:has(#co-tip-firma:checked) .billing-toggle,
.checkout:has(#co-tip-firma:checked) .billing-title--person,
.checkout:has(#co-tip-persoana:checked):has(#co-factura-diferita:not(:checked)) .billing-fields {
display: none;
}
.checkout:has(#co-tip-firma:checked) .billing-title--company {
display: inline;
}
@supports not selector(:has(*)) {
.checkout-hint {
display: block;
}
}
.choice-list {
display: grid;
gap: var(--s-3);
}
.choice {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-3);
padding: var(--s-2) var(--s-4);
border: 1px solid var(--ink-2);
border-radius: var(--radius-button);
background: var(--paper);
}
.choice:has(input:checked) {
border-color: var(--navy);
box-shadow: inset 0 0 0 1px var(--navy);
}
.choice input {
width: 1.25rem;
height: 1.25rem;
margin: var(--s-3) 0 0;
accent-color: var(--navy);
}
.choice__label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-1) var(--s-3);
min-height: var(--tap);
cursor: pointer;
}
.choice__title {
flex: 1 1 10rem;
color: var(--ink);
font-weight: 600;
}
.choice__price {
color: var(--navy);
font-weight: 700;
white-space: nowrap;
}
.choice__meta {
grid-column: 2;
padding-bottom: var(--s-2);
color: var(--ink-2);
font-size: var(--fs-14);
}
.choice__meta p {
margin: 0;
}
.choice__meta [data-payment-help] {
display: grid;
gap: var(--s-1);
}
.choice__estimate {
color: var(--ink);
overflow-wrap: anywhere;
}
.choice__reason {
color: var(--ink);
}
.choice--disabled {
border-style: dashed;
background: var(--paper-2);
}
.checkout-note {
margin-top: var(--s-3);
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 1.5;
}
.choice--disabled .choice__label {
cursor: not-allowed;
}
.choice--disabled .choice__title {
color: var(--ink-2);
}
.summary-lines {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0 0 var(--s-3);
list-style: none;
border-bottom: 1px solid var(--line);
font-size: var(--fs-14);
}
.summary-lines__item {
display: flex;
justify-content: space-between;
gap: var(--s-3);
}
.summary-lines__name {
min-width: 0;
overflow-wrap: anywhere;
}
.summary-lines__qty {
color: var(--ink-2);
white-space: nowrap;
}
.summary-lines__price {
font-weight: 600;
white-space: nowrap;
}
.summary-facts {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
color: var(--ink);
font-size: var(--fs-14);
}
.summary-facts__estimate strong {
color: var(--navy);
}
.summary-facts__method {
color: var(--ink-2);
}
.checkout-consents {
display: grid;
gap: var(--s-2);
padding-top: var(--s-3);
border-top: 1px solid var(--line);
}
.checkout__submit-status:empty {
display: none;
}
.checkout__submit-status {
color: var(--ink-2);
font-size: var(--fs-14);
}
.nowrap {
white-space: nowrap;
}
.order-thanks {
max-width: var(--measure);
margin-top: var(--s-3);
font-size: var(--fs-18);
}
.order-next {
display: grid;
gap: var(--s-4);
margin-top: var(--s-6);
padding: var(--s-5);
border: 2px solid var(--navy);
border-radius: var(--radius-card);
}
.order-next__title {
font-size: var(--fs-22);
line-height: 1.25;
}
.order-next__facts {
color: var(--ink-2);
font-size: var(--fs-14);
}
.next-steps {
display: grid;
gap: var(--s-3);
margin: 0;
padding: 0;
list-style: none;
}
.next-steps__item {
display: grid;
gap: var(--s-2);
min-width: 0;
padding: var(--s-3) var(--s-4);
border: 1px solid var(--line);
border-left: var(--s-1) solid var(--line);
border-radius: var(--radius-button);
overflow-wrap: anywhere;
}
.next-steps__item--current {
border-color: var(--navy);
border-left-color: var(--navy);
}
.next-steps__item--done {
border-left-color: var(--ok);
color: var(--ink-2);
}
.next-steps__item p {
margin: 0;
}
.next-steps__state {
color: var(--ink-2);
font-size: var(--fs-12);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.next-steps__item--current .next-steps__state {
color: var(--navy);
}
.next-steps__title {
font-size: var(--fs-18);
line-height: 1.3;
}
.next-steps__estimate strong {
color: var(--navy);
}
.next-steps__note {
color: var(--ink-2);
font-size: var(--fs-14);
}
.facts {
display: grid;
gap: var(--s-2);
margin: 0;
}
.facts__row {
display: grid;
gap: 0 var(--s-4);
}
.facts__row dt {
color: var(--ink-2);
font-size: var(--fs-14);
}
.facts__row dd {
margin: 0;
font-weight: 600;
overflow-wrap: anywhere;
}
@media (min-width: 480px) {
.facts__row {
grid-template-columns: 12rem minmax(0, 1fr);
}
}
.payment-check__status {
font-weight: 500;
}
.order-pay {
justify-self: start;
}
.order-grid {
display: grid;
gap: var(--s-6);
margin-top: var(--s-6);
}
@media (min-width: 1024px) {
.order-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-7);
}
}
.order-block {
display: grid;
gap: var(--s-3);
align-content: start;
min-width: 0;
}
.order-block--wide {
margin-top: var(--s-6);
}
.order-block__title {
font-size: var(--fs-18);
line-height: 1.3;
}
.order-block__subtitle {
margin-top: var(--s-2);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: 600;
letter-spacing: 0;
}
.order-block__meta {
color: var(--ink-2);
font-size: var(--fs-14);
}
.address-lines {
overflow-wrap: anywhere;
}
.timeline {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.timeline__item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0 var(--s-4);
padding-left: var(--s-4);
border-left: 2px solid var(--line);
color: var(--ink-2);
}
.timeline__item--done {
border-left-color: var(--navy);
color: var(--ink);
}
.timeline__label {
font-weight: 600;
}
.shipment {
padding: var(--s-3) 0;
border-top: 1px solid var(--line);
}
.shipment__items {
color: var(--ink-2);
font-size: var(--fs-14);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-14);
}
.data-table th,
.data-table td {
padding: var(--s-2) var(--s-3);
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.data-table thead th {
background: var(--paper-2);
color: var(--ink);
font-weight: 600;
white-space: nowrap;
}
.data-table tbody th {
min-width: 12rem;
font-weight: 600;
}
.data-table .num {
text-align: right;
white-space: nowrap;
}
.data-table__sub {
display: block;
color: var(--ink-2);
font-weight: 400;
}
.data-table__muted {
color: var(--ink-2);
}
.data-table__link {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
}
.data-table td > .data-table__link + .data-table__link {
margin-left: var(--s-2);
}
.totals--order {
max-width: 28rem;
margin: var(--s-3) 0 0 auto;
}
.order-account__form {
display: grid;
gap: var(--s-4);
justify-items: start;
max-width: 48rem;
}
.order-account__form .form-grid {
width: 100%;
}
.auth-page {
display: grid;
justify-items: center;
padding-block: var(--s-7) var(--s-8);
}
.auth-card {
display: grid;
gap: var(--s-5);
width: 100%;
max-width: 28rem;
}
.auth-card--wide {
max-width: 44rem;
}
.auth-card__title {
font-size: var(--fs-28);
line-height: 1.2;
}
.auth-card__lead,
.auth-card__note {
color: var(--ink-2);
}
.auth-card__note {
font-size: var(--fs-14);
}
.auth-form {
display: grid;
gap: var(--s-4);
}
.auth-links {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.auth-links a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
}
.account-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
}
.subnav__list {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.subnav__link {
display: inline-flex;
align-items: center;
min-height: var(--tap);
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-button);
color: var(--navy);
font-size: var(--fs-14);
font-weight: 600;
text-decoration: none;
}
.subnav__link:hover {
border-color: var(--navy-3);
}
.subnav__link[aria-current="page"] {
border-color: var(--navy);
background: var(--navy);
color: var(--paper);
}
.account-section {
display: grid;
gap: var(--s-4);
align-content: start;
min-width: 0;
margin-top: var(--s-6);
}
.account-section__title {
font-size: var(--fs-22);
line-height: 1.25;
}
.account-section__title--n2 {
font-size: var(--fs-18);
}
.account-section--n2 {
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.account-columns {
display: grid;
gap: 0 var(--s-6);
}
@media (min-width: 1024px) {
.account-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.account-form {
display: grid;
gap: var(--s-4);
justify-items: start;
max-width: 48rem;
}
.account-form .form-grid,
.account-form .field {
width: 100%;
}
.account-form__flags {
display: grid;
gap: var(--s-2);
margin: 0;
padding: 0;
border: 0;
}
.account-form__legend {
margin-bottom: var(--s-2);
padding: 0;
font-size: var(--fs-14);
font-weight: 600;
}
.account-empty {
margin-top: var(--s-5);
color: var(--ink-2);
}
.address-list {
display: grid;
gap: var(--s-4);
margin: var(--s-5) 0 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.address-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.address-card {
display: grid;
gap: var(--s-3);
align-content: start;
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.address-card__title {
font-size: var(--fs-18);
line-height: 1.3;
overflow-wrap: anywhere;
}
.address-card__badges {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.address-card__actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--s-3);
}
.tag {
display: inline-flex;
padding: 2px var(--s-2);
border: 1px solid var(--navy);
border-radius: var(--radius-badge);
color: var(--navy);
font-size: var(--fs-12);
font-weight: 600;
}
.supplier-actions {
display: grid;
gap: var(--s-5);
margin-top: var(--s-6);
padding: var(--s-5);
border: 2px solid var(--navy);
border-radius: var(--radius-card);
}
@media (min-width: 1024px) {
.supplier-actions {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: var(--s-7);
}
}
.supplier-actions__block {
display: grid;
gap: var(--s-3);
align-content: start;
}
.supplier-actions__title {
font-size: var(--fs-18);
line-height: 1.3;
}
.supplier-ship {
display: grid;
gap: var(--s-4);
justify-items: start;
}
.supplier-ship .form-grid {
width: 100%;
}
.consent-pending .site-page {
padding-bottom: var(--consent-space, 12rem);
}
.consent-pending .buy-bar {
bottom: var(--consent-space, 12rem);
}
body:has(.consent--panel .consent__choices:not([hidden])) .buy-bar,
body:has(.consent--panel .consent__choices:not([hidden])) .wa-float {
display: none;
}
.consent--panel {
position: fixed;
inset: auto 0 0;
z-index: 35;
max-height: 85vh;
max-height: 85dvh;
overflow-y: auto;
overscroll-behavior: contain;
padding-block: var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: var(--paper);
box-shadow: 0 -1px 0 var(--line), 0 8px 24px rgba(11, 37, 69, 0.08);
}
.consent__form {
display: grid;
gap: var(--s-2);
}
.consent__intro {
display: grid;
gap: var(--s-2);
max-width: var(--measure);
}
.consent__title {
margin: 0;
color: var(--navy);
font: 700 var(--fs-18) / 1.3 var(--font-display);
}
.consent--panel .consent__intro {
display: block;
}
.consent--panel .consent__title {
display: inline;
margin-right: var(--s-1);
font-size: var(--fs-14);
line-height: 1.4;
}
.consent__title:focus {
outline: none;
}
.consent__title:focus-visible {
outline: none;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: var(--s-1);
}
.consent__text,
.consent__current {
margin: 0;
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 1.4;
}
.consent--panel .consent__text {
display: inline;
font-size: var(--fs-12);
line-height: 1.4;
}
.consent__current {
color: var(--ink);
font-weight: 600;
}
.consent__actions {
display: grid;
gap: var(--s-2);
}
.consent__action {
width: 100%;
padding-inline: var(--s-3);
}
.consent--panel .consent__action {
padding-inline: var(--s-1);
font-size: var(--fs-14);
}
.consent__action[aria-expanded="true"] {
background: var(--paper-2);
}
.consent__choices {
display: grid;
gap: var(--s-3);
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.consent__choices[hidden] {
display: none;
}
.consent__legend {
padding: 0;
margin-bottom: var(--s-2);
color: var(--navy);
font-weight: 600;
}
.consent__category {
display: grid;
gap: var(--s-1);
padding: var(--s-3);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.consent__toggle {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: var(--tap);
}
.consent__switch {
flex: none;
width: var(--s-5);
height: var(--s-5);
margin: 0;
accent-color: var(--navy);
}
.consent__label {
flex: 1;
display: flex;
align-items: center;
min-height: var(--tap);
color: var(--ink);
font-weight: 600;
cursor: pointer;
}
.consent__switch:disabled + .consent__label {
cursor: default;
}
.consent__always {
margin-left: var(--s-1);
color: var(--ink-2);
font-weight: 400;
}
.consent__desc {
margin: 0;
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 1.5;
}
.consent__cookies summary {
display: flex;
align-items: center;
min-height: var(--tap);
color: var(--navy);
font-size: var(--fs-14);
font-weight: 600;
cursor: pointer;
}
.consent__cookie-list {
display: grid;
gap: var(--s-2);
margin: 0;
padding-left: var(--s-4);
color: var(--ink-2);
font-size: var(--fs-14);
line-height: 1.5;
overflow-wrap: anywhere;
}
.consent__save {
justify-self: start;
}
.consent__close {
justify-self: start;
min-height: var(--tap);
padding: 0 var(--s-2);
border: 0;
background: transparent;
color: var(--navy);
font: 500 var(--fs-14) / 1.2 var(--font-body);
text-decoration: underline;
text-underline-offset: var(--s-1);
cursor: pointer;
}
.consent[aria-busy="true"] .button {
cursor: progress;
opacity: 0.7;
}
.consent--panel .consent__actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.consent--panel .consent__action {
font-size: var(--fs-12);
}
@media not all and (min-width: 360px) {
.consent--panel .consent__form {
padding-inline: var(--s-2);
}
.consent--panel .consent__action {
padding-inline: 0;
}
}
@media (min-width: 400px) {
.consent--panel .consent__action,
.consent--panel .consent__text {
font-size: var(--fs-14);
}
}
@media (min-width: 480px) {
.consent__actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.consent--panel .consent__action {
padding-inline: var(--s-3);
font-size: var(--fs-16);
}
.consent--panel .consent__intro {
display: grid;
gap: var(--s-1);
}
.consent--panel .consent__title {
display: block;
margin: 0;
font-size: var(--fs-18);
line-height: 1.3;
}
.consent--panel .consent__text {
display: block;
}
.consent-pending .site-page {
padding-bottom: var(--consent-space, 12rem);
}
}
@media (min-width: 480px) and (max-height: 500px) {
.consent--panel {
padding-block: var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
}
.consent--panel .consent__form {
gap: var(--s-1);
}
.consent--panel .consent__intro {
display: block;
}
.consent--panel .consent__title {
display: inline;
margin-right: var(--s-1);
font-size: var(--fs-14);
line-height: 1.4;
}
.consent--panel .consent__text {
display: inline;
font-size: var(--fs-12);
}
.consent--panel .consent__action {
font-size: var(--fs-14);
}
}
@media (min-width: 1024px) {
.consent--panel .consent__form {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "intro actions" "choices choices" "close close";
align-items: center;
column-gap: var(--s-6);
}
.consent--panel .consent__intro {
grid-area: intro;
}
.consent--panel .consent__actions {
grid-area: actions;
}
.consent--panel .consent__choices {
grid-area: choices;
}
.consent--panel .consent__close {
grid-area: close;
}
.consent--panel .consent__actions {
grid-template-columns: repeat(3, minmax(10rem, auto));
}
.consent--panel .consent__choices {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
}
.consent--panel .consent__legend,
.consent--panel .consent__save {
grid-column: 1 / -1;
}
.consent-pending .site-page {
padding-bottom: var(--consent-space, 10rem);
}
}
.consent-page {
display: grid;
gap: var(--s-4);
max-width: var(--measure);
padding-block: var(--s-5) var(--s-8);
}
.consent-page__title {
margin: 0;
color: var(--navy);
font: 700 var(--fs-28) / 1.2 var(--font-display);
}
.consent-page__lead {
margin: 0;
color: var(--ink-2);
}
.consent--page .consent__form {
gap: var(--s-5);
}
.loader {
position: fixed;
inset: 0;
z-index: 50;
display: grid;
place-content: center;
justify-items: center;
gap: var(--s-4);
background: var(--paper);
pointer-events: none;
}
.loader[hidden] {
display: none;
}
.loader:not([hidden]) {
opacity: 1;
transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
@starting-style {
.loader:not([hidden]) {
opacity: 0;
}
}
.loader.loader--out {
opacity: 0;
}
.loader__mark {
width: var(--s-7);
height: var(--s-7);
}
.loader__bar {
display: block;
width: var(--s-8);
height: var(--s-1);
border-radius: var(--radius-badge);
background: var(--line);
overflow: hidden;
}
.loader__bar::after {
content: "";
display: block;
width: 40%;
height: 100%;
background: var(--navy);
animation: loader-slide 900ms cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
@keyframes loader-slide {
from {
transform: translateX(-10%);
}
to {
transform: translateX(160%);
}
}
@media (prefers-reduced-motion: reduce) {
.loader__bar::after {
animation: none;
width: 100%;
}
}
.return-steps {
display: grid;
gap: var(--s-1);
}
.return-steps__count {
color: var(--ink-2);
font-size: var(--fs-14);
font-weight: 600;
}
.legal-doc .return-steps .steps__list {
padding-left: 0;
}
.legal-doc .return-steps .steps__item {
margin-top: 0;
}
.return-start {
display: grid;
gap: var(--s-4);
max-width: 48rem;
margin-block: var(--s-7);
padding: var(--s-5);
border: 2px solid var(--navy);
border-radius: var(--radius-card);
background: var(--paper);
scroll-margin-top: var(--s-5);
}
.return-start__title {
color: var(--navy);
font-size: var(--fs-28);
line-height: 1.2;
}
.return-start__lead {
max-width: var(--measure);
color: var(--ink-2);
}
.return-start__form {
display: grid;
gap: var(--s-5);
justify-items: start;
}
.return-start__form .form-grid {
width: 100%;
}
.page-return {
padding-block: var(--s-4) var(--s-8);
}
.return-form {
display: grid;
gap: var(--s-7);
max-width: 56rem;
margin-top: var(--s-6);
}
.return-section__help {
max-width: var(--measure);
color: var(--ink-2);
}
.return-lines {
display: grid;
gap: var(--s-3);
margin: 0;
padding: 0;
list-style: none;
}
.return-line {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-3);
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.return-line:has(input:checked) {
border-color: var(--navy);
box-shadow: inset 0 0 0 1px var(--navy);
}
.return-line--error {
border-color: var(--bad);
}
.return-line--blocked {
background: var(--paper-2);
color: var(--ink-2);
}
.return-line__pick {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-3);
align-items: start;
min-width: 0;
}
.return-line__pick input {
width: 1.25rem;
height: 1.25rem;
margin: var(--s-3) 0 0;
accent-color: var(--navy);
}
.return-line__pick label,
.return-line__label {
display: grid;
gap: var(--s-1);
align-content: center;
min-height: var(--tap);
cursor: pointer;
}
.return-line__label {
grid-column: 1 / -1;
cursor: default;
}
.return-line__name {
color: var(--ink);
font-weight: 600;
overflow-wrap: anywhere;
}
.return-line--blocked .return-line__name {
color: var(--ink-2);
}
.return-line__meta {
color: var(--ink-2);
font-size: var(--fs-14);
}
.return-line__qty {
max-width: 12rem;
}
.return-line__seal {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s-3);
align-items: center;
min-width: 0;
}
.return-line__seal input {
width: 1.25rem;
height: 1.25rem;
margin: 0;
accent-color: var(--navy);
}
.return-line__seal label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--s-2);
min-height: var(--tap);
cursor: pointer;
font-size: var(--fs-14);
}
.return-line__hint {
color: var(--ink-2);
}
.return-line__state {
justify-self: start;
padding: var(--s-1) var(--s-2);
border: 1px solid var(--ink-2);
border-radius: var(--radius-badge);
font-size: var(--fs-14);
font-weight: 600;
}
.return-line__condition {
color: var(--ink);
font-size: var(--fs-14);
}
.return-line:not(.return-line--blocked) .return-line__condition {
display: flex;
align-items: flex-start;
gap: var(--s-2);
}
.return-line:not(.return-line--blocked) .return-line__condition::before {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E");
content: "";
flex: none;
width: 1rem;
height: 1rem;
margin-top: 2px;
background-color: var(--warn);
mask: var(--icon) center / contain no-repeat;
-webkit-mask: var(--icon) center / contain no-repeat;
}
@media (min-width: 768px) {
.return-line {
grid-template-columns: minmax(0, 1fr) 12rem;
align-items: start;
}
.return-line__condition,
.return-line__error,
.return-line__seal {
grid-column: 1 / -1;
}
}
.return-email__label {
font-size: var(--fs-14);
font-weight: 600;
}
.return-email {
display: flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
overflow-wrap: anywhere;
}
.return-submit {
display: grid;
gap: var(--s-4);
justify-items: start;
padding: var(--s-5);
border: 2px solid var(--navy);
border-radius: var(--radius-card);
}
.return-summary {
font-size: var(--fs-18);
overflow-wrap: anywhere;
}
.return-submit__note {
color: var(--ink-2);
font-size: var(--fs-14);
}
.return-blocked {
margin-top: var(--s-6);
max-width: 48rem;
}
.return-blocked__links {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-4);
}
.return-rma {
color: var(--navy);
font-size: var(--fs-22);
}
.return-done__summary {
font-size: var(--fs-18);
font-weight: 600;
}
.return-done__mail {
color: var(--ink);
}
.return-done__steps {
display: grid;
gap: var(--s-2);
margin: 0;
padding-left: var(--s-5);
}
.return-ship__mark {
font-size: var(--fs-18);
overflow-wrap: anywhere;
}
.return-ship__mark strong {
display: block;
color: var(--navy);
font-family: var(--font-display);
font-size: var(--fs-28);
letter-spacing: 0.02em;
}
.return-ship__steps {
display: grid;
gap: var(--s-2);
margin: 0;
padding-left: var(--s-5);
}
.return-ship__label {
display: grid;
gap: var(--s-2);
justify-items: start;
padding-top: var(--s-4);
border-top: 1px solid var(--line);
}
.return-ship__download {
margin-top: var(--s-2);
}
.return-wait {
margin-top: var(--s-6);
}
.return-ship__archive {
margin-top: var(--s-4);
}
.order-return {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2) var(--s-4);
margin-top: var(--s-4);
}
.order-return__note {
color: var(--ink-2);
font-size: var(--fs-14);
}
.order-invoices {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-top: var(--s-4);
}
.reviews__summary {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2) var(--s-4);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--line);
}
.reviews__score {
margin: 0;
color: var(--navy);
font-family: var(--font-display);
font-size: var(--fs-28);
line-height: 1;
}
.reviews__score-max {
color: var(--ink-2);
font-size: var(--fs-18);
font-weight: 400;
}
.reviews__score-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin: 0;
color: var(--ink-2);
font-size: var(--fs-14);
}
.reviews__empty {
max-width: var(--measure);
margin: 0;
color: var(--ink-2);
}
.stars {
color: var(--navy-2);
font-size: var(--fs-16);
letter-spacing: 1px;
white-space: nowrap;
}
.reviews__list {
display: grid;
gap: var(--s-5);
max-width: var(--measure);
margin: var(--s-5) 0 0;
padding: 0;
list-style: none;
}
.review {
padding-bottom: var(--s-5);
border-bottom: 1px solid var(--line);
}
.reviews__list > .review:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.review__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
}
.review__rating {
color: var(--ink-2);
font-size: var(--fs-14);
font-weight: 600;
}
.review__verified {
padding: var(--s-1) var(--s-2);
border: 1px solid var(--ok);
border-radius: var(--radius-badge);
color: var(--ink);
font-size: var(--fs-12);
font-weight: 600;
}
.review__title {
margin: var(--s-2) 0 0;
font-size: var(--fs-18);
line-height: 1.3;
}
.review__body,
.review__answer-body {
margin: var(--s-2) 0 0;
overflow-wrap: break-word;
white-space: pre-line;
}
.review__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-1) var(--s-3);
margin: var(--s-2) 0 0;
color: var(--ink-2);
font-size: var(--fs-14);
}
.review__answer {
margin-top: var(--s-3);
padding: var(--s-3);
border-left: 2px solid var(--navy);
background: var(--paper-2);
}
.review__answer > * {
margin: 0;
}
.review__answer > * + * {
margin-top: var(--s-2);
}
.review__answer-title {
color: var(--navy);
font-size: var(--fs-14);
font-weight: 700;
}
.reviews__more,
.reviews__omnibus {
max-width: var(--measure);
margin: var(--s-4) 0 0;
color: var(--ink-2);
font-size: var(--fs-14);
}
.review-form {
max-width: var(--measure);
margin-top: var(--s-6);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
}
.review-form__title {
margin: 0 0 var(--s-3);
font-size: var(--fs-18);
}
.review-form__gate,
.review-form__note {
margin: 0 0 var(--s-3);
color: var(--ink-2);
font-size: var(--fs-14);
}
.review-form .field + .field,
.review-form .rating-input + .field {
margin-top: var(--s-4);
}
.review-form button[type="submit"] {
margin-top: var(--s-4);
}
.rating-input {
margin: 0;
padding: 0;
border: 0;
}
.rating-input legend {
padding: 0;
font-size: var(--fs-16);
font-weight: 600;
}
.rating-input__options {
display: flex;
flex-direction: column;
gap: var(--s-1);
margin-top: var(--s-2);
}
.rating-input__option {
display: flex;
align-items: center;
gap: var(--s-2);
}
.rating-input__option input {
flex: none;
width: var(--s-5);
height: var(--s-5);
accent-color: var(--navy);
}
.rating-input__option label {
display: flex;
flex: 1;
align-items: center;
gap: var(--s-2);
min-height: var(--tap);
cursor: pointer;
}
.rating-input__stars {
color: var(--navy-2);
letter-spacing: 1px;
}
.rating-input__text {
color: var(--ink-2);
font-size: var(--fs-14);
}
.rating-input__option input:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.rating-input--error legend {
color: var(--bad);
}
.page-guides {
padding-block: var(--s-2) var(--s-8);
}
.guides-empty {
max-width: var(--measure);
margin-top: var(--s-6);
color: var(--ink-2);
}
.guide-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-5);
margin: var(--s-6) 0 0;
padding: 0;
list-style: none;
}
.guide-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--paper);
overflow: hidden;
}
.guide-card:hover,
.guide-card:focus-within {
border-color: var(--navy-3);
}
.guide-card__media {
aspect-ratio: 16 / 9;
background: var(--paper-2);
}
.guide-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.guide-card__media--product {
padding: var(--s-4);
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.guide-card__media--product img {
object-fit: contain;
}
.guide-card__body {
display: grid;
align-content: start;
gap: var(--s-2);
padding: var(--s-4);
}
.guide-card__title {
font-size: var(--fs-22);
line-height: 1.3;
overflow-wrap: anywhere;
}
.guide-card__link {
display: flex;
align-items: center;
min-height: var(--tap);
color: var(--navy);
text-decoration: none;
}
.guide-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.guide-card:hover .guide-card__link {
text-decoration: underline;
}
.guide-card__excerpt {
color: var(--ink-2);
}
.guide-card__date {
color: var(--ink-2);
font-size: var(--fs-14);
}
@media (min-width: 768px) {
.guide-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.guide-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.guide__head {
padding-top: var(--s-2);
}
.guide__meta {
margin-top: var(--s-3);
color: var(--ink-2);
font-size: var(--fs-14);
}
.guide__cover {
max-width: var(--measure);
margin-top: var(--s-5);
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-card);
background: var(--paper-2);
}
.guide__cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.guide-text {
max-width: var(--measure);
padding-block: var(--s-6);
overflow-wrap: break-word;
}
.guide-text > * + * {
margin-top: var(--s-4);
}
.guide-text h2 {
margin-top: var(--s-7);
font-size: var(--fs-22);
line-height: 1.3;
}
.guide-text h3 {
margin-top: var(--s-5);
font-size: var(--fs-18);
line-height: 1.35;
}
.guide-text > h2:first-child {
margin-top: 0;
}
.guide-text h2 + *,
.guide-text h3 + * {
margin-top: var(--s-3);
}
.guide-text ul,
.guide-text ol {
margin-bottom: 0;
padding-left: var(--s-5);
}
.guide-text li + li {
margin-top: var(--s-2);
}
.guide-text strong {
color: var(--ink);
font-weight: 600;
}
.guide-text table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
.guide-text th,
.guide-text td {
padding: var(--s-2) var(--s-3);
border: 1px solid var(--line);
text-align: left;
}
.guide-picks {
padding-block: var(--s-8);
border-top: var(--s-1) solid var(--navy);
border-bottom: 1px solid var(--line);
}
.guide-picks .product-grid {
margin-top: var(--s-5);
}
.maintenance {
display: grid;
align-content: start;
gap: var(--s-4);
max-width: var(--measure);
margin: 0 auto;
padding: var(--s-8) var(--s-4);
}
.maintenance__logo {
margin: 0 0 var(--s-4);
}
.maintenance__logo svg {
display: block;
width: auto;
height: var(--logo-height);
}
.maintenance__title {
font-size: var(--fs-28);
line-height: 1.3;
}
.maintenance__text {
margin: 0;
color: var(--ink-2);
}
.guarantee-link {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
}
.buybox__legal {
font-size: var(--fs-14);
}
.guarantee-dialog {
width: min(100% - 2 * var(--s-4), 52rem);
max-width: none;
max-height: calc(100dvh - 2 * var(--s-4));
margin: auto;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--radius-card);
background: var(--paper);
color: var(--ink);
box-shadow: 0 16px 48px rgba(11, 37, 69, 0.24);
}
.guarantee-dialog[open] {
display: flex;
flex-direction: column;
}
.guarantee-dialog::backdrop {
background: rgba(11, 37, 69, 0.6);
}
body:has(.guarantee-dialog[open]) {
overflow: hidden;
}
.guarantee-dialog__head {
display: flex;
flex: none;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4);
border-bottom: 1px solid var(--line);
}
.guarantee-dialog__title {
margin: 0;
color: var(--navy);
font: 700 var(--fs-18) / 1.3 var(--font-display);
}
.guarantee-dialog__close {
flex: none;
min-width: var(--tap);
min-height: var(--tap);
border: 0;
border-radius: var(--radius-button);
background: none;
color: var(--ink-2);
font: 600 var(--fs-28) / 1 var(--font-body);
cursor: pointer;
}
.guarantee-dialog__close:hover {
color: var(--navy);
}
.guarantee-dialog__body {
flex: 1 1 auto;
min-height: 0;
padding: var(--s-4);
overflow-y: auto;
overscroll-behavior: contain;
}
.guarantee-notice {
display: grid;
gap: var(--s-3);
max-width: 52rem;
margin: 0;
}
.guarantee-notice__frame {
overflow-x: auto;
border: 1px solid var(--line);
}
.guarantee-notice__frame img {
width: max(100%, 37.5rem);
max-width: none;
}
.guarantee-notice__links {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
font-size: var(--fs-14);
}
.guarantee-notice__links a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
}
.guarantee-notice__text {
font-size: var(--fs-14);
}
.guarantee-notice__text summary {
display: flex;
align-items: center;
min-height: var(--tap);
font-weight: 600;
cursor: pointer;
}
.guarantee-notice__body {
display: grid;
gap: var(--s-2);
max-width: var(--measure);
padding-bottom: var(--s-2);
}
.guarantee-notice__body ul,
.guarantee-notice__body ol {
display: grid;
gap: var(--s-1);
margin: 0;
padding-left: var(--s-5);
}
.guarantee-page {
display: grid;
gap: var(--s-4);
padding-bottom: var(--s-7);
}
.guarantee-page__intro {
max-width: var(--measure);
color: var(--ink-2);
}
.wa-link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--tap);
font-weight: 600;
}
.wa-link__glyph {
flex: none;
width: 1rem;
height: 1rem;
}
.wa-link--quiet {
font-size: var(--fs-14);
font-weight: 500;
}
.topbar .wa-link {
display: inline;
min-height: 0;
}
.topbar .wa-link__glyph {
display: inline-block;
margin-right: var(--s-1);
vertical-align: -0.125em;
}
.wa-block--footer {
display: grid;
}
.wa-block--footer .wa-link {
font-weight: inherit;
}
.wa-block--contact {
display: grid;
justify-items: start;
gap: var(--s-2);
padding: var(--s-4);
border: 1px solid var(--line);
border-radius: var(--radius-card);
}
.legal-doc .wa-block__title {
margin-top: 0;
font-size: var(--fs-18);
}
.wa-block--contact .wa-block__text {
margin-top: 0;
color: var(--ink-2);
font-size: var(--fs-14);
}
.wa-block--contact .wa-link {
margin-top: 0;
}
.wa-help {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--s-2);
color: var(--ink-2);
font-size: var(--fs-14);
}
.wa-float {
position: fixed;
right: calc(var(--s-4) + env(safe-area-inset-right, 0px));
bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
z-index: 30;
display: grid;
place-items: center;
width: var(--tap);
height: var(--tap);
border: 1px solid var(--ink-2);
border-radius: var(--radius-button);
background: var(--paper);
box-shadow: 0 -1px 0 var(--line), 0 8px 24px rgba(11, 37, 69, 0.08);
transform: translateY(calc(-1 * var(--buy-bar-space, 0px)));
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms ease, visibility 150ms;
}
.wa-float img {
width: 1.5rem;
height: 1.5rem;
}
.wa-float:hover {
border-color: var(--navy);
}
.wa-float.is-tucked {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.consent-pending .wa-float {
bottom: calc(var(--s-4) + var(--consent-space, 12rem));
}
@media not all and (min-width: 1024px) {
body:has(.wa-float) .site-footer__bottom {
padding-bottom: calc(var(--tap) + var(--s-6) + env(safe-area-inset-bottom, 0px));
}
}
@media (min-width: 1024px) {
.wa-float {
display: none;
}
}
@media print {
.wa-float {
display: none;
}
}