/* Shared public content families. Grid compatibility is scoped to rendered CMS content. */
.reference-page { padding-top: 30px; padding-bottom: 70px; }
.reference-page h1 { font-size: 42px; line-height: 1.2; margin: 15px 0 24px; font-weight: 700; letter-spacing: -.4px; }
.reference-crumbs { color: #939393; font-size: 15px; line-height: 24px; margin: 0 0 12px; }
.reference-crumbs a:hover { color: var(--brand); }
.reference-page.with-sidebar { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 30px; padding-top: 38px; }
.content-sidebar { align-self: start; font-size: 15px; }
.content-sidebar a { display: block; padding: 12px 0; border-bottom: 1px solid #ddd; }
.content-sidebar a:first-child { padding-top: 0; }
.content-sidebar a[aria-current="page"] { color: var(--brand); }
.reference-body { min-width: 0; }
.reference-body > h1 { margin-top: 14px; margin-bottom: 35px; }
/* Imported content groups tables behind a tab strip; without these it stacks every pane at once. */
.cms-content .nav-tabs { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.cms-content .nav-tabs > li > a { display: block; padding: 10px 16px; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: inherit; }
.cms-content .nav-tabs > li.active > a, .cms-content .nav-tabs > li > a[aria-selected="true"] { border-color: var(--line); border-bottom-color: #fff; background: #fff; font-weight: 600; margin-bottom: -1px; }
.cms-content .tab-content > .tab-pane { display: none; }
.cms-content .tab-content > .tab-pane.active { display: block; }

/* A control the reference site drove with a script, now a link: it still has to read as a control. */
/* Imported copy styles its own buttons; all this layer owes them is the pointer the reference
   page's own scripted navigation used to imply. */
.cms-content button[data-href] { cursor: pointer; }

/* Imported copy styles its own buttons and cards; a link that carries a class keeps the colour that
   class gives it, or the text colour, rather than being painted brand red on its own background. */
:where(.reference-body,.cms-content) a { color: var(--brand); }
.reference-body a.btn-link, .cms-content a.btn-link, .cms-content .help-links a, .cms-content .faq a { color: var(--brand); }
.reference-body .lead, .cms-content .lead { font-size: 24px; line-height: 1.5; margin-bottom: 22px; }
.reference-body img, .cms-content img { max-width: 100%; height: auto; }
.reference-body iframe, .cms-content iframe { max-width: 100%; }
.reference-body table, .cms-content table { border-collapse: collapse; max-width: 100%; }
.reference-body th, .reference-body td, .cms-content th, .cms-content td { padding: 10px; border: 1px solid var(--line); }
.cms-content:after { content: ""; display: table; clear: both; }

/* The same grid framework's visibility helpers. Without them a block the reference site showed only
   on a phone is shown on every screen, and the desktop version of it is shown beside it. */
.cms-content .visible-xs, .cms-content .visible-sm, .cms-content .visible-md, .cms-content .visible-lg { display: none; }
@media (max-width: 767px) { .cms-content .visible-xs { display: block; } .cms-content .hidden-xs { display: none; } }
@media (min-width: 768px) and (max-width: 991px) { .cms-content .visible-sm { display: block; } .cms-content .hidden-sm { display: none; } }
@media (min-width: 992px) and (max-width: 1199px) { .cms-content .visible-md { display: block; } .cms-content .hidden-md { display: none; } }
@media (min-width: 1200px) { .cms-content .visible-lg { display: block; } .cms-content .hidden-lg { display: none; } }
/* A band that broke out of the reference site's container did it with that container's own pixel
   offset. Measured from this container instead, it reaches both edges and overflows neither. */
.cms-content .full-width-div, .cms-content [class^="background-"], .cms-content [class*=" background-"] {
    display: block; width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* Imported copy sizes its bands in viewport widths, which counts the scrollbar and leaves the page
   scrolling sideways by its width. Clipping here keeps the band reaching both edges without it.
   `clip` rather than `hidden`, so nothing inside becomes a scroll container. */
main { overflow-x: clip; }

/* Beside a side navigation there is no full width to reach: the band, and any backdrop drawn behind
   it, stay in the column rather than widening the page. */
.with-sidebar .cms-content { overflow-x: clip; }
.with-sidebar .cms-content .full-width-div, .with-sidebar .cms-content [class^="background-"], .with-sidebar .cms-content [class*=" background-"] {
    margin-left: 0; margin-right: 0; max-width: 100%;
}
.cms-content .regular-v-margin { margin-top: 30px; margin-bottom: 30px; }
.cms-content .columns-regular-v-margin { row-gap: 30px; }
.cms-content .text-center { text-align: center; }
.cms-content .text-primary { color: var(--brand); }
.cms-content .rounded-lg { border-radius: 24px; }
.cms-content .btn { color: white; }
.cms-content .btn-default, .cms-content .btn-outline { color: var(--ink); }
.cms-content .catban-container { margin-bottom: 0; }
.cms-content [class*="catban-"] h1, .cms-content [class*="catban-"] h2 { margin: 0 0 6px; font-size: 42px; line-height: 1.1; max-width: 520px; }
.cms-content [class*="catban-"] p { margin: 0; }
.category-description { margin: 0 0 30px; }
.subcategory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px; margin: 30px 0; }
.subcategory-grid a { display: block; text-align: center; }
.subcategory-image { display: grid; place-items: center; aspect-ratio: 230/270; border-radius: 8px; background: #fafafa; overflow: hidden; }
/* Catalogue photography is wider than the tile; the tile is filled rather than letterboxed. */
.subcategory-image img { width: 100%; height: 100%; object-fit: cover; }
.subcategory-image .empty-image-icon { width: 100px; height: 100px; color: #ddd; }
.subcategory-grid strong { display: block; font-size: 16px; font-weight: 400; margin-top: 13px; }
.catalogue-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 42px 30px; }
.catalogue-grid .product-card { min-width: 0; }
.catalogue-grid .product-card .thumb { aspect-ratio: 280/330; }
.catalogue-grid .product-card .body { padding: 18px 0 0; }
.catalogue-grid .product-card .title { font-size: 16px; }
.catalogue-grid .product-card .price { font-size: 16px; }
.catalogue-grid-title { font-size: 30px; margin: 45px 0 25px; }
.listing-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 22px 0; margin: 30px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 14px; }
.listing-toolbar .result-count { margin-right: 4px; }
.listing-toolbar .catalogue-filters { flex-basis: 100%; }
.listing-toolbar > label > span { color: var(--muted); }
.listing-toolbar .toolbar-right { margin-left: auto; }
/* The reference site's controls read as text with a caret, not as boxed form fields. */
.listing-toolbar select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit;
    padding: 2px 18px 2px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23444' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center; }
.listing-toolbar[data-js] .toolbar-apply { display: none; }
.listing-toolbar > label { display: inline-flex; align-items: center; gap: 8px; }
.archive-toolbar select { border: 1px solid #ddd; border-radius: 4px; background: #fff; padding: 7px 28px 7px 10px; font-size: 14px; }
.listing-toolbar button, .archive-toolbar button { border: 1px solid #ddd; background: #f8f8f8; border-radius: 4px; padding: 7px 12px; }
.catalogue-filters { position: relative; }
.catalogue-filters summary { display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; background: #f5f5f5; border-radius: 4px; padding: 7px 12px; font-weight: 600; }
.catalogue-filters summary::-webkit-details-marker { display: none; }
.filter-options { position: absolute; top: calc(100% + 10px); left: 0; width: 290px; z-index: 12; border: 1px solid #ddd; box-shadow: 0 8px 24px #0001; background: white; padding: 20px; display: grid; gap: 18px; }
.filter-options label { display: flex; align-items: center; gap: 10px; }
.filter-options select { max-width: 190px; }
.filter-options a { color: var(--brand); }
.collection-landing .catalogue-hero { position: relative; background: #f6f6f6; min-height: 450px; border-radius: 0 0 24px 24px; overflow: hidden; display: flex; align-items: center; }
.collection-landing .catalogue-hero-copy { position: relative; z-index: 1; max-width: 49%; padding: 50px 50px 60px 60px; }
.collection-landing .catalogue-hero h1 { font-size: 48px; margin: 0 0 22px; }
.collection-landing .catalogue-hero p { font-size: 17px; }
.collection-landing .catalogue-hero > img { position: absolute; right: 0; bottom: 0; height: 100%; width: 52%; object-fit: contain; object-position: right bottom; }
.collection-benefits { display: flex; align-items: center; justify-content: center; position: relative; margin: -30px auto 45px; max-width: 1170px; min-height: 75px; background: #fff; border-radius: 20px; box-shadow: 0 8px 24px #0001; z-index: 2; }
.collection-benefits a { flex: 1; text-align: center; padding: 12px 20px; font-size: 15px; color: var(--ink) !important; }
.collection-benefits a + a { border-left: 1px solid #ddd; }
.collection-categories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 35px; padding: 10px 0 30px; }
.collection-categories a { display: block; text-align: center; }
.collection-categories img, .collection-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #f7f7f7; object-fit: cover; }
.collection-categories strong { display: block; font-size: 16px; margin-top: 17px; }
.collection-placeholder .empty-image-icon { width: 90px; height: 90px; color: #ddd; }
.catalogue-index { padding-top: 0; }
.content-search { margin: 20px 0 30px; max-width: 850px; }
.content-search label { display: block; font-size: 15px; margin-bottom: 8px; }
.content-search > div { display: flex; gap: 12px; }
.content-search input { min-width: 0; flex: 1; border: 1px solid #ddd; padding: 10px 12px; border-radius: 4px; }
.content-search .btn { border-radius: 4px; }
.search-tabs { display: flex; border-bottom: 1px solid #ddd; gap: 28px; margin: 30px 0 0; }
.search-tabs a { padding: 12px 0; border-bottom: 3px solid transparent; font-size: 17px; }
.search-tabs a[aria-current="page"] { color: var(--brand); border-color: var(--brand); }
.search-results .listing-toolbar { border-top: 0; margin-top: 0; }
.content-results article { padding: 25px 0; border-bottom: 1px solid #eee; }
.content-results h2 { font-size: 25px; margin: 0 0 10px; }
.content-results p { color: #777; }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 22px 0; margin: 25px 0 35px; font-size: 14px; }
.archive-toolbar form { display: flex; align-items: center; gap: 12px; }
.blog-index .grid { row-gap: 40px; }
.blog-index .post-card .thumb { aspect-ratio: 490/368; border-radius: 5px; }
.blog-index .post-card .thumb img { object-fit: cover; }
.blog-index .post-card .body { padding-top: 20px; }
.article-page .article-cover { width: 100%; max-height: none; object-fit: contain; border-radius: 0; }
.article-page .article-byline { color: #888; font-size: 14px; margin-top: -22px; }
.article-page .cms-content { overflow-wrap: anywhere; }
.article-page .cms-content > h2:first-child { margin-top: 0; }
.article-pagination { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 50px; padding-top: 25px; border-top: 1px solid #ddd; }
.article-pagination > * { flex: 1; font-size: 14px; }
.article-pagination > :nth-child(2) { flex: none; }
.article-pagination > :last-child { text-align: right; }
.account-entry { min-height: 580px; }
.account-form { margin: 35px 0; max-width: 900px; }
.account-form .form-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 20px; margin: 0 0 20px; font-size: 15px; }
.account-form .form-row > span { text-align: right; }
.account-form .form-row input { width: 100%; border: 1px solid #d8d8d8; border-radius: 4px; padding: 9px 12px; background: #fff; }
.account-form .form-indent { margin-left: 220px; }
.account-form .inline { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 14px; font-weight: 400; }
.account-form .inline input { margin-top: 4px; width: auto; }
.account-form .btn { border-radius: 4px; font-size: 15px; padding: 10px 25px; }
.password-help { margin-top: 50px; border-top: 1px solid #eee; padding-top: 25px; }
.password-help h2 { font-size: 26px; }
.registration-content { margin-top: 25px; }
.registration-hero { width: 100%; aspect-ratio: 1262/306; overflow: hidden; margin: 0 0 30px; }
.registration-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.registration-content .lead { text-align: center; margin: 30px 0; }
.registration-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 30px 0; }
.registration-benefits > div { background: #f8f9fa; border-radius: 24px; padding: 20px 28px 30px; text-align: center; }
.registration-benefits span { color: var(--brand); font-size: 24px; }
.registration-benefits h2 { font-size: 19px; line-height: 1.4; margin: 27px 0 12px; }
.registration-form { max-width: 930px; margin: 45px auto 0; }
.content-signup { padding-top: 100px; border-top: 1px solid #eee; }
.content-signup .cta-band { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 1199px) {
    .reference-page.with-sidebar { grid-template-columns: 240px minmax(0, 1fr); }
    .catalogue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 35px 25px; }
    .subcategory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .account-form .form-row { grid-template-columns: 150px minmax(0, 1fr); }
    .account-form .form-indent { margin-left: 170px; }
    .collection-landing .catalogue-hero-copy { padding-left: 35px; }
    .collection-landing .catalogue-hero h1 { font-size: 40px; }
}
@media (max-width: 900px) {
    .reference-page.with-sidebar { display: block; }
    .content-sidebar { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 30px; }
    .content-sidebar a, .content-sidebar a:first-child { padding: 8px 0; }
    .catalogue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .collection-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; }
    .collection-landing .catalogue-hero-copy { padding: 30px; }
    .collection-landing .catalogue-hero p { font-size: 15px; }
    .registration-benefits { gap: 20px; }
    .registration-benefits > div { padding: 20px; }
    .registration-benefits h2 { font-size: 16px; }
}
@media (max-width: 600px) {
    .reference-page { padding-top: 23px; padding-bottom: 40px; }
    .reference-page h1 { font-size: 31px; margin-bottom: 22px; }
    .reference-crumbs { font-size: 13px; }
    .reference-body > h1 { margin-bottom: 24px; }
    .reference-body .lead, .cms-content .lead { font-size: 20px; }
    .cms-content [class*="catban-"] h1, .cms-content [class*="catban-"] h2 { font-size: 26px; max-width: none; }
    .subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .subcategory-grid strong { font-size: 13px; }
    .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
    .catalogue-grid .product-card .title { font-size: 13px; }
    .catalogue-grid .product-card .price { font-size: 12px; }
    .listing-toolbar { gap: 12px; padding: 18px 0; margin: 25px 0; font-size: 12px; }
    .listing-toolbar .result-count { font-size: 12px; }
    .listing-toolbar > label { gap: 5px; }
    .listing-toolbar select { font-size: 12px; max-width: 160px; padding: 7px; }
    .collection-landing .catalogue-hero { display: flex; flex-direction: column-reverse; min-height: 0; }
    .collection-landing .catalogue-hero > img { position: static; width: 100%; height: 250px; object-fit: contain; }
    .collection-landing .catalogue-hero-copy { max-width: 100%; padding: 25px; }
    .collection-landing .catalogue-hero h1 { font-size: 33px; }
    .catalogue-index { padding-top: 0; }
    .collection-benefits { margin: 15px 0 25px; border-radius: 12px; flex-direction: column; padding: 10px; }
    .collection-benefits a { font-size: 13px; padding: 10px; }
    .collection-benefits a + a { border-left: 0; border-top: 1px solid #eee; }
    .collection-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
    .collection-categories strong { font-size: 12px; margin-top: 10px; }
    .search-tabs { gap: 15px; overflow-x: auto; }
    .search-tabs a { font-size: 13px; white-space: nowrap; }
    .content-search .btn { padding: 10px 15px; }
    .archive-toolbar { align-items: flex-start; gap: 15px; flex-direction: column; }
    .archive-toolbar form { flex-wrap: wrap; }
    .article-pagination { gap: 15px; align-items: flex-start; }
    .article-pagination > * { font-size: 12px; }
    .account-form .form-row { display: block; margin-bottom: 20px; }
    .account-form .form-row > span { display: block; text-align: left; margin-bottom: 8px; }
    .account-form .form-indent { margin-left: 0; }
    .registration-benefits { grid-template-columns: 1fr; gap: 20px; }
    .registration-benefits h2 { font-size: 17px; margin-top: 15px; }
    .registration-hero { margin-bottom: 22px; }
    .registration-content .lead { margin-top: 20px; }
    .content-signup { padding-top: 40px; }
}
.collection-landing .catalogue-hero { min-height: 482px; }
.collection-landing .catalogue-hero-copy { padding-left: 135px; max-width: 43%; }
.collection-landing .catalogue-hero h1 { font-size: 40px; }
.collection-landing .catalogue-hero p { font-size: 18px; }
.collection-benefits { max-width: 920px; margin-top: -40px; margin-bottom: 30px; }
.collection-promotions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin: 30px 0; }
.collection-promotions img { display: block; width: 100%; }
@media(max-width:1199px) { .collection-landing .catalogue-hero-copy { padding-left: 50px; max-width: 48%; } }
@media(max-width:600px) { .collection-landing .catalogue-hero { min-height: 0; } .collection-landing .catalogue-hero-copy { max-width: 100%; padding: 25px; } .collection-landing .catalogue-hero h1 { font-size: 33px; } .collection-landing .catalogue-hero p { font-size: 15px; } .collection-benefits { margin-top: 15px; } .collection-promotions { gap: 15px; grid-template-columns: 1fr; } }
/* The empty basket uses the same content heading and spacing as the reference storefront. */
.basket-screen{padding-top:40px;padding-bottom:60px}.basket-screen>h1{font-size:40px;line-height:1.2;margin:0 0 24px}.basket-empty{font-size:16px;min-height:80px;margin:0}.basket-screen .shopping-layout{margin-top:30px}@media(max-width:700px){.basket-screen>h1{font-size:30px}.basket-screen{padding-top:28px}}
/* Larger breakpoint columns override a CMS block's small-screen width. */
.category-description > .catban-container + .lead { margin-top: 25px; }
/* A wide table scrolls inside its own wrapper; turning the table itself into a block would stop it
   laying out as a table at all, so that is kept for narrow screens where there is no room either way. */
.cms-content .tg-wrap, .cms-content .table-wrap { overflow-x: auto; }
@media (max-width: 900px) { .reference-body .cms-content table { display: block; overflow-x: auto; } }

/* The reference site's pages were laid out on a twelve-column grid and its utility classes, and they
   were captured with the markup but not the stylesheet. This reproduces that layer, at the same
   specificity it had there, so a page's own <style> still overrides it exactly as it used to. */
:where(.cms-content,.reference-body) .col-xs-1,:where(.cms-content,.reference-body) .col-xs-2,:where(.cms-content,.reference-body) .col-xs-3,:where(.cms-content,.reference-body) .col-xs-4,:where(.cms-content,.reference-body) .col-xs-5,:where(.cms-content,.reference-body) .col-xs-6,:where(.cms-content,.reference-body) .col-xs-7,:where(.cms-content,.reference-body) .col-xs-8,:where(.cms-content,.reference-body) .col-xs-9,:where(.cms-content,.reference-body) .col-xs-10,:where(.cms-content,.reference-body) .col-xs-11,:where(.cms-content,.reference-body) .col-xs-12,:where(.cms-content,.reference-body) .col-sm-1,:where(.cms-content,.reference-body) .col-sm-2,:where(.cms-content,.reference-body) .col-sm-3,:where(.cms-content,.reference-body) .col-sm-4,:where(.cms-content,.reference-body) .col-sm-5,:where(.cms-content,.reference-body) .col-sm-6,:where(.cms-content,.reference-body) .col-sm-7,:where(.cms-content,.reference-body) .col-sm-8,:where(.cms-content,.reference-body) .col-sm-9,:where(.cms-content,.reference-body) .col-sm-10,:where(.cms-content,.reference-body) .col-sm-11,:where(.cms-content,.reference-body) .col-sm-12,:where(.cms-content,.reference-body) .col-md-1,:where(.cms-content,.reference-body) .col-md-2,:where(.cms-content,.reference-body) .col-md-3,:where(.cms-content,.reference-body) .col-md-4,:where(.cms-content,.reference-body) .col-md-5,:where(.cms-content,.reference-body) .col-md-6,:where(.cms-content,.reference-body) .col-md-7,:where(.cms-content,.reference-body) .col-md-8,:where(.cms-content,.reference-body) .col-md-9,:where(.cms-content,.reference-body) .col-md-10,:where(.cms-content,.reference-body) .col-md-11,:where(.cms-content,.reference-body) .col-md-12,:where(.cms-content,.reference-body) .col-lg-1,:where(.cms-content,.reference-body) .col-lg-2,:where(.cms-content,.reference-body) .col-lg-3,:where(.cms-content,.reference-body) .col-lg-4,:where(.cms-content,.reference-body) .col-lg-5,:where(.cms-content,.reference-body) .col-lg-6,:where(.cms-content,.reference-body) .col-lg-7,:where(.cms-content,.reference-body) .col-lg-8,:where(.cms-content,.reference-body) .col-lg-9,:where(.cms-content,.reference-body) .col-lg-10,:where(.cms-content,.reference-body) .col-lg-11,:where(.cms-content,.reference-body) .col-lg-12 { position: relative; float: left; min-height: 1px; padding-left: 15px; padding-right: 15px; }
:where(.cms-content,.reference-body) .col-xs-1 { width: 8.333333%; } :where(.cms-content,.reference-body) .col-xs-2 { width: 16.666667%; } :where(.cms-content,.reference-body) .col-xs-3 { width: 25%; } :where(.cms-content,.reference-body) .col-xs-4 { width: 33.333333%; } :where(.cms-content,.reference-body) .col-xs-5 { width: 41.666667%; } :where(.cms-content,.reference-body) .col-xs-6 { width: 50%; } :where(.cms-content,.reference-body) .col-xs-7 { width: 58.333333%; } :where(.cms-content,.reference-body) .col-xs-8 { width: 66.666667%; } :where(.cms-content,.reference-body) .col-xs-9 { width: 75%; } :where(.cms-content,.reference-body) .col-xs-10 { width: 83.333333%; } :where(.cms-content,.reference-body) .col-xs-11 { width: 91.666667%; } :where(.cms-content,.reference-body) .col-xs-12 { width: 100%; }
:where(.cms-content,.reference-body) .col-xs-offset-0 { margin-left: 0%; } :where(.cms-content,.reference-body) .col-xs-offset-1 { margin-left: 8.333333%; } :where(.cms-content,.reference-body) .col-xs-offset-2 { margin-left: 16.666667%; } :where(.cms-content,.reference-body) .col-xs-offset-3 { margin-left: 25%; } :where(.cms-content,.reference-body) .col-xs-offset-4 { margin-left: 33.333333%; } :where(.cms-content,.reference-body) .col-xs-offset-5 { margin-left: 41.666667%; } :where(.cms-content,.reference-body) .col-xs-offset-6 { margin-left: 50%; } :where(.cms-content,.reference-body) .col-xs-offset-7 { margin-left: 58.333333%; } :where(.cms-content,.reference-body) .col-xs-offset-8 { margin-left: 66.666667%; } :where(.cms-content,.reference-body) .col-xs-offset-9 { margin-left: 75%; } :where(.cms-content,.reference-body) .col-xs-offset-10 { margin-left: 83.333333%; } :where(.cms-content,.reference-body) .col-xs-offset-11 { margin-left: 91.666667%; } :where(.cms-content,.reference-body) .col-xs-offset-12 { margin-left: 100%; }
@media (min-width: 768px) {
:where(.cms-content,.reference-body) .col-sm-1 { width: 8.333333%; } :where(.cms-content,.reference-body) .col-sm-2 { width: 16.666667%; } :where(.cms-content,.reference-body) .col-sm-3 { width: 25%; } :where(.cms-content,.reference-body) .col-sm-4 { width: 33.333333%; } :where(.cms-content,.reference-body) .col-sm-5 { width: 41.666667%; } :where(.cms-content,.reference-body) .col-sm-6 { width: 50%; } :where(.cms-content,.reference-body) .col-sm-7 { width: 58.333333%; } :where(.cms-content,.reference-body) .col-sm-8 { width: 66.666667%; } :where(.cms-content,.reference-body) .col-sm-9 { width: 75%; } :where(.cms-content,.reference-body) .col-sm-10 { width: 83.333333%; } :where(.cms-content,.reference-body) .col-sm-11 { width: 91.666667%; } :where(.cms-content,.reference-body) .col-sm-12 { width: 100%; }
:where(.cms-content,.reference-body) .col-sm-offset-0 { margin-left: 0%; } :where(.cms-content,.reference-body) .col-sm-offset-1 { margin-left: 8.333333%; } :where(.cms-content,.reference-body) .col-sm-offset-2 { margin-left: 16.666667%; } :where(.cms-content,.reference-body) .col-sm-offset-3 { margin-left: 25%; } :where(.cms-content,.reference-body) .col-sm-offset-4 { margin-left: 33.333333%; } :where(.cms-content,.reference-body) .col-sm-offset-5 { margin-left: 41.666667%; } :where(.cms-content,.reference-body) .col-sm-offset-6 { margin-left: 50%; } :where(.cms-content,.reference-body) .col-sm-offset-7 { margin-left: 58.333333%; } :where(.cms-content,.reference-body) .col-sm-offset-8 { margin-left: 66.666667%; } :where(.cms-content,.reference-body) .col-sm-offset-9 { margin-left: 75%; } :where(.cms-content,.reference-body) .col-sm-offset-10 { margin-left: 83.333333%; } :where(.cms-content,.reference-body) .col-sm-offset-11 { margin-left: 91.666667%; } :where(.cms-content,.reference-body) .col-sm-offset-12 { margin-left: 100%; }
}
@media (min-width: 992px) {
:where(.cms-content,.reference-body) .col-md-1 { width: 8.333333%; } :where(.cms-content,.reference-body) .col-md-2 { width: 16.666667%; } :where(.cms-content,.reference-body) .col-md-3 { width: 25%; } :where(.cms-content,.reference-body) .col-md-4 { width: 33.333333%; } :where(.cms-content,.reference-body) .col-md-5 { width: 41.666667%; } :where(.cms-content,.reference-body) .col-md-6 { width: 50%; } :where(.cms-content,.reference-body) .col-md-7 { width: 58.333333%; } :where(.cms-content,.reference-body) .col-md-8 { width: 66.666667%; } :where(.cms-content,.reference-body) .col-md-9 { width: 75%; } :where(.cms-content,.reference-body) .col-md-10 { width: 83.333333%; } :where(.cms-content,.reference-body) .col-md-11 { width: 91.666667%; } :where(.cms-content,.reference-body) .col-md-12 { width: 100%; }
:where(.cms-content,.reference-body) .col-md-offset-0 { margin-left: 0%; } :where(.cms-content,.reference-body) .col-md-offset-1 { margin-left: 8.333333%; } :where(.cms-content,.reference-body) .col-md-offset-2 { margin-left: 16.666667%; } :where(.cms-content,.reference-body) .col-md-offset-3 { margin-left: 25%; } :where(.cms-content,.reference-body) .col-md-offset-4 { margin-left: 33.333333%; } :where(.cms-content,.reference-body) .col-md-offset-5 { margin-left: 41.666667%; } :where(.cms-content,.reference-body) .col-md-offset-6 { margin-left: 50%; } :where(.cms-content,.reference-body) .col-md-offset-7 { margin-left: 58.333333%; } :where(.cms-content,.reference-body) .col-md-offset-8 { margin-left: 66.666667%; } :where(.cms-content,.reference-body) .col-md-offset-9 { margin-left: 75%; } :where(.cms-content,.reference-body) .col-md-offset-10 { margin-left: 83.333333%; } :where(.cms-content,.reference-body) .col-md-offset-11 { margin-left: 91.666667%; } :where(.cms-content,.reference-body) .col-md-offset-12 { margin-left: 100%; }
}
@media (min-width: 1200px) {
:where(.cms-content,.reference-body) .col-lg-1 { width: 8.333333%; } :where(.cms-content,.reference-body) .col-lg-2 { width: 16.666667%; } :where(.cms-content,.reference-body) .col-lg-3 { width: 25%; } :where(.cms-content,.reference-body) .col-lg-4 { width: 33.333333%; } :where(.cms-content,.reference-body) .col-lg-5 { width: 41.666667%; } :where(.cms-content,.reference-body) .col-lg-6 { width: 50%; } :where(.cms-content,.reference-body) .col-lg-7 { width: 58.333333%; } :where(.cms-content,.reference-body) .col-lg-8 { width: 66.666667%; } :where(.cms-content,.reference-body) .col-lg-9 { width: 75%; } :where(.cms-content,.reference-body) .col-lg-10 { width: 83.333333%; } :where(.cms-content,.reference-body) .col-lg-11 { width: 91.666667%; } :where(.cms-content,.reference-body) .col-lg-12 { width: 100%; }
:where(.cms-content,.reference-body) .col-lg-offset-0 { margin-left: 0%; } :where(.cms-content,.reference-body) .col-lg-offset-1 { margin-left: 8.333333%; } :where(.cms-content,.reference-body) .col-lg-offset-2 { margin-left: 16.666667%; } :where(.cms-content,.reference-body) .col-lg-offset-3 { margin-left: 25%; } :where(.cms-content,.reference-body) .col-lg-offset-4 { margin-left: 33.333333%; } :where(.cms-content,.reference-body) .col-lg-offset-5 { margin-left: 41.666667%; } :where(.cms-content,.reference-body) .col-lg-offset-6 { margin-left: 50%; } :where(.cms-content,.reference-body) .col-lg-offset-7 { margin-left: 58.333333%; } :where(.cms-content,.reference-body) .col-lg-offset-8 { margin-left: 66.666667%; } :where(.cms-content,.reference-body) .col-lg-offset-9 { margin-left: 75%; } :where(.cms-content,.reference-body) .col-lg-offset-10 { margin-left: 83.333333%; } :where(.cms-content,.reference-body) .col-lg-offset-11 { margin-left: 91.666667%; } :where(.cms-content,.reference-body) .col-lg-offset-12 { margin-left: 100%; }
}
:where(.cms-content,.reference-body) .row { margin-left: -15px; margin-right: -15px; }
:where(.cms-content,.reference-body) .row::before, :where(.cms-content,.reference-body) .row::after, :where(.cms-content,.reference-body) .clearfix::before, :where(.cms-content,.reference-body) .clearfix::after { content: " "; display: table; }
:where(.cms-content,.reference-body) .row::after, :where(.cms-content,.reference-body) .clearfix::after { clear: both; }
:where(.cms-content,.reference-body) .container-fluid { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
:where(.cms-content,.reference-body) .container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px) { :where(.cms-content,.reference-body) .container { width: 750px; } }
@media (min-width: 992px) { :where(.cms-content,.reference-body) .container { width: 970px; } }
@media (min-width: 1240px) { :where(.cms-content,.reference-body) .container { width: 1170px; } }
/* Utility classes, at the values the reference site computed them to. */
:where(.cms-content,.reference-body) .text-muted { color: #808080; }
:where(.cms-content,.reference-body) .text-left { text-align: left; }
:where(.cms-content,.reference-body) .text-right { text-align: right; }
:where(.cms-content,.reference-body) .text-justify { text-align: justify; }
:where(.cms-content,.reference-body) .text-uppercase { text-transform: uppercase; }
:where(.cms-content,.reference-body) .text-lowercase { text-transform: lowercase; }
:where(.cms-content,.reference-body) .text-capitalize { text-transform: capitalize; }
:where(.cms-content,.reference-body) .pull-left { float: left; }
:where(.cms-content,.reference-body) .pull-right { float: right; }
:where(.cms-content,.reference-body) .center-block { display: block; margin-left: auto; margin-right: auto; }
:where(.cms-content,.reference-body) .img-responsive { display: block; max-width: 100%; height: auto; }
:where(.cms-content,.reference-body) .img-circle { border-radius: 50%; }
:where(.cms-content,.reference-body) .list-unstyled { padding-left: 0; list-style: none; }
:where(.cms-content,.reference-body) .list-inline { padding-left: 0; list-style: none; margin-left: -5px; }
:where(.cms-content,.reference-body) .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }
:where(.cms-content,.reference-body) .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
:where(.cms-content,.reference-body) .thumbnail { padding: 4px; margin-bottom: 24px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; }
:where(.cms-content,.reference-body) .panel { margin-bottom: 24px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; }
:where(.cms-content,.reference-body) .alert { padding: 15px; margin-bottom: 24px; border: 1px solid transparent; border-radius: 4px; }
:where(.cms-content,.reference-body) .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; border-radius: .25em; }
:where(.cms-content,.reference-body) .badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 14px; font-weight: 700; line-height: 1; color: #fff; text-align: center; background-color: #808080; border-radius: 10px; }
:where(.cms-content,.reference-body) .btn { display: inline-block; padding: 6px 12px; font-weight: 700; text-align: center; border: 1px solid transparent; border-radius: 6px; }
:where(.cms-content,.reference-body) .btn-default { color: #333; background-color: #f0f0f0; }
:where(.cms-content,.reference-body) .btn-primary { color: #fff; background-color: var(--brand); }

/* Components the reference shop's pages use in their copy — tiles of categories, cards of products,
   colour swatches, feature chips and star ratings — were styled by its global stylesheet, which the
   import did not carry. This is that layer, at the same specificity, for markup imported as content. */
:where(.cms-content,.reference-body) .category-group, :where(.cms-content,.reference-body) .product-group { margin: 30px 0; clear: both; }
:where(.cms-content,.reference-body) .category-group > .wrap, :where(.cms-content,.reference-body) .product-group > .wrap { display: flex; flex-flow: row wrap; margin: -15px; }
:where(.cms-content,.reference-body) .category-group > .wrap .category-item { flex: 1 1 50%; max-width: 50%; padding: 15px 10px; }
:where(.cms-content,.reference-body) .product-group > .wrap .product-item { flex: 1 1 100%; max-width: 100%; padding: 15px; }
@media (min-width: 768px) { :where(.cms-content,.reference-body) .category-group > .wrap .category-item { flex-basis: 25%; max-width: 25%; padding: 15px; } :where(.cms-content,.reference-body) .product-group > .wrap .product-item { flex-basis: 50%; max-width: 50%; } }
@media (min-width: 992px) { :where(.cms-content,.reference-body) .category-group > .wrap .category-item { flex-basis: 20%; max-width: 20%; } :where(.cms-content,.reference-body) .product-group > .wrap .product-item { flex-basis: 25%; max-width: 25%; } }
@media (min-width: 1240px) { :where(.cms-content,.reference-body) .product-group > .wrap .product-item { flex-basis: 20%; max-width: 20%; } }
@media (min-width: 1400px) { :where(.cms-content,.reference-body) .category-group > .wrap .category-item { flex-basis: 16.66%; max-width: 16.66%; } }
:where(.cms-content,.reference-body) .category-item > .wrap, :where(.cms-content,.reference-body) .product-item > .wrap { position: relative; }
:where(.cms-content,.reference-body) .product-item > .wrap { padding: 15px; }
:where(.cms-content,.reference-body) .category-item a, :where(.cms-content,.reference-body) .product-item a { text-decoration: none; }
:where(.cms-content,.reference-body) .category-item .category-image { margin: 0 0 1em; border-radius: 8px; overflow: hidden; }
:where(.cms-content,.reference-body) .category-item .category-image a { display: block; margin: -1px; }
:where(.cms-content,.reference-body) .category-item .category-image a > span, :where(.cms-content,.reference-body) .product-item .product-image a > span { display: block; width: 100%; padding-bottom: 117.1875%; position: relative; }
:where(.cms-content,.reference-body) .category-item .category-image a img, :where(.cms-content,.reference-body) .product-item .product-image a img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
:where(.cms-content,.reference-body) .category-item .category-title { margin: .5em 0; color: #000; font: inherit; }
:where(.cms-content,.reference-body) .category-item .category-title a { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; color: #000; }
:where(.cms-content,.reference-body) .category-item .category-description { margin: .5em 0; color: rgba(0, 0, 0, .5); }
:where(.cms-content,.reference-body) .category-item .category-description > div { font-size: 13px; }
:where(.cms-content,.reference-body) .product-item .product-image { border-radius: 8px; margin: -15px -15px 14px; overflow: hidden; }
:where(.cms-content,.reference-body) .product-item .product-image a { display: block; }
:where(.cms-content,.reference-body) .product-item .product-core { position: absolute; right: 20px; top: 20px; z-index: 10; }
:where(.cms-content,.reference-body) .product-item .product-core > a { display: block; width: 61px; height: 14px; overflow: hidden; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI3MXB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCA3MSAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzEgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMUQ5QkYxO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE3LjcyMyw5LjAyN2gtNC44N2MtMC4xMTYsMC41NjMtMC4zNDgsMS4wMjctMC42NzksMS4zOTFjLTAuMzMxLDAuMzgxLTAuNzQ1LDAuNjQ2LTEuMjc1LDAuODI4CgljLTAuNTMsMC4xODItMS4xNDMsMC4yODItMS44MzksMC4yODJjLTAuNzk1LDAtMS40NTgtMC4xNDktMi4wMjEtMC40MzFzLTAuOTk0LTAuNjk2LTEuMjkyLTEuMjA5QzUuNDQ5LDkuMzU4LDUuMyw4LjcyOSw1LjMsOAoJczAuMTQ5LTEuMzU4LDAuNDQ3LTEuODg4YzAuMjk4LTAuNTMsMC43MjktMC45MjgsMS4yOTItMS4yMDlTOC4yODIsNC40ODksOS4wNiw0LjQ4OWMwLjcxMiwwLDEuMzI1LDAuMDk5LDEuODM5LDAuMjk4CgljMC41MywwLjE5OSwwLjk0NCwwLjQ4LDEuMjc1LDAuODYxYzAuMzMxLDAuMzgxLDAuNTQ3LDAuODI4LDAuNjc5LDEuMzU4aDUuMjY3Yy0wLjA1LTAuNDE0LTAuMTMyLTAuNzk1LTAuMjMyLTEuMTc2CgljLTAuMjQ4LTAuOTI4LTAuNjQ2LTEuNzU2LTEuMjA5LTIuNTAxYy0wLjc5NS0xLjA0My0xLjgzOS0xLjg1NS0zLjE0Ny0yLjQ1MUMxMi4yMjQsMC4yOTgsMTAuNzMzLDAsOS4wNDMsMAoJYy0xLjgyMiwwLTMuNDEyLDAuMzMxLTQuNzcsMC45OTRDMi45MTUsMS42NTYsMS44NTUsMi42LDEuMTEsMy43OTNDMC4zNjQsNC45ODYsMCw2LjQxLDAsOHMwLjM4MSwzLjAxNCwxLjEyNiw0LjIwNwoJYzAuNzQ1LDEuMTkzLDEuODA1LDIuMTM3LDMuMTY0LDIuNzk5QzUuNjQ4LDE1LjY2OSw3LjIzOCwxNiw5LjA2LDE2YzEuNjg5LDAsMy4xOC0wLjI5OCw0LjQ4OS0wLjg3OAoJYzEuMzA4LTAuNTgsMi4zNTItMS4zOTEsMy4xNDctMi40NTFjMC41NjMtMC43NDUsMC45NjEtMS41NzQsMS4yMDktMi41MDFjMC4wOTktMC4zODEsMC4xODItMC43NjIsMC4yMzItMS4xNzZoLTAuNDE0VjkuMDI3egoJIE02MS4yODQsMTEuNDk1bDAuMjgyLTEuNjczaDguMTk5VjYuMTk1aC04LjE5OWwtMC4yODItMS42NzNoOS4xNDNWMC4zNjRINTUuNzM1TDU2Ljg0NSw4bC0xLjExLDcuNjUyaDE0Ljc5MXYtNC4xNTdINjEuMjg0egoJIE01MS4xNjQsMTAuMTA0YzAuMTQ5LTAuMDUsMC4yODEtMC4xMTYsMC40MzEtMC4xNjZjMC45MTEtMC40MTQsMS42MjMtMS4wMSwyLjEzNy0xLjc4OWMwLjUxMy0wLjc2MiwwLjc2Mi0xLjY1NiwwLjc2Mi0yLjY2NwoJcy0wLjI0OS0xLjkyMS0wLjc2Mi0yLjY4M2MtMC41MTQtMC43NjItMS4yMjYtMS4zNTgtMi4xMzctMS43ODlzLTEuOTg4LTAuNjQ2LTMuMjEzLTAuNjQ2aC05LjU3NHYxNS4yODhoNS4yMzR2LTUuMTAxaDEuNTU3CglsMy40NjIsNS4xMDFoNi4wMTJsLTAuNDMxLTAuNjI5TDUxLjE2NCwxMC4xMDR6IE00OC43NjIsNi41NDJjLTAuMjgyLDAuMjQ4LTAuNjc5LDAuMzY0LTEuMjA5LDAuMzY0aC0zLjUxMVY0LjA1OGgzLjUxMQoJYzAuNTE0LDAsMC45MTEsMC4xMTYsMS4yMDksMC4zNjRjMC4yODIsMC4yNDgsMC40MzEsMC41OTYsMC40MzEsMS4wNlM0OS4wNDMsNi4yOTQsNDguNzYyLDYuNTQyeiBNMzMuMDEsMC45OTQKCUMzMS42MTksMC4zMzEsMjkuOTk2LDAsMjguMTI0LDBjLTEuODcyLDAtMy40OTUsMC4zMzEtNC44ODYsMC45OTRjLTEuMzkxLDAuNjYzLTIuNDg1LDEuNjA3LTMuMjQ2LDIuNzk5UzE4LjgzMiw2LjQxLDE4LjgzMiw4CglzMC4zODEsMy4wMTQsMS4xNTksNC4yMDdjMC43NzksMS4xOTMsMS44NTUsMi4xMzcsMy4yNDYsMi43OTlDMjQuNjI5LDE1LjY2OSwyNi4yNTMsMTYsMjguMTI0LDE2YzEuODcyLDAsMy40OTUtMC4zMzEsNC44ODYtMC45OTQKCWMxLjM5MS0wLjY2MiwyLjQ4NC0xLjYwNywzLjI0Ni0yLjc5OWMwLjc3OC0xLjIwOSwxLjE2LTIuNiwxLjE2LTQuMjA3cy0wLjM4MS0zLjAxNC0xLjE2LTQuMjA3CglDMzUuNDc4LDIuNTg0LDM0LjQwMiwxLjY1NiwzMy4wMSwwLjk5NHogTTMxLjY1Miw5Ljc4OWMtMC4zMTUsMC40OTctMC43NzksMC44NzgtMS4zNzUsMS4xNDNjLTAuNTk2LDAuMjY1LTEuMzA4LDAuMzk4LTIuMTM3LDAuMzk4CgljLTAuODI4LDAtMS41NC0wLjEzMi0yLjEzNy0wLjM5OGMtMC41OTYtMC4yNDgtMS4wNDMtMC42MTMtMS4zNTgtMS4wOTNjLTAuMDE3LTAuMDE3LTAuMDMzLTAuMDMzLTAuMDMzLTAuMDUKCWMtMC4zMTUtMC40OTctMC40OC0xLjA5My0wLjQ4LTEuNzg5czAuMTY2LTEuMjkyLDAuNDgtMS43ODljMC4zMTUtMC40OTcsMC43NzgtMC44NzgsMS4zNzUtMS4xNDMKCWMwLjA1LTAuMDE3LDAuMDk5LTAuMDUsMC4xNjYtMC4wNjZjMC41NjMtMC4yMTUsMS4yMjYtMC4zMzEsMS45ODgtMC4zMzFjMC44MjgsMCwxLjU0LDAuMTMyLDIuMTM3LDAuMzk4CgljMC41OTYsMC4yNjUsMS4wNiwwLjY0NiwxLjM3NSwxLjE0M2MwLjMxNSwwLjQ5NywwLjQ4LDEuMDkzLDAuNDgsMS43ODlTMzEuOTY3LDkuMjkyLDMxLjY1Miw5Ljc4OXoiLz4KPC9zdmc+Cg==") 0 0 / 100% 100% no-repeat; }
:where(.cms-content,.reference-body) .product-item .product-core > a > span { font-size: 14px; position: absolute; color: transparent; }
:where(.cms-content,.reference-body) .product-item .product-wish-list { display: none; }
:where(.cms-content,.reference-body) .product-item .product-title { margin: .5em 0; color: #000; font: inherit; }
:where(.cms-content,.reference-body) .product-item .product-title a { display: table; font-size: 15px; font-weight: 400; line-height: 1.3; color: #000; }
:where(.cms-content,.reference-body) .product-item .product-title a:hover { color: var(--brand); }
:where(.cms-content,.reference-body) .product-item .product-code, :where(.cms-content,.reference-body) .product-item .product-description { margin: .5em 0; color: rgba(0, 0, 0, .5); }
:where(.cms-content,.reference-body) .product-item .product-code [class*="-label"] { display: none; }
:where(.cms-content,.reference-body) .product-item .product-code dl, :where(.cms-content,.reference-body) .product-item .product-description > div { margin: 0; font-size: 14px; }
:where(.cms-content,.reference-body) .product-item .product-prices { margin: .5em 0; }
:where(.cms-content,.reference-body) .product-item .product-prices > .wrap { display: flex; flex-flow: row wrap; align-items: baseline; font-size: 14px; }
:where(.cms-content,.reference-body) .product-item .product-prices dl { margin: 0; padding: 0; flex: 1 1 auto; width: 100%; }
:where(.cms-content,.reference-body) .product-item .product-prices dl > dd, :where(.cms-content,.reference-body) .product-item .product-prices dl > dt { display: inline; margin: 0; font: inherit; }
:where(.cms-content,.reference-body) .product-item .product-prices [class*="-label"] { display: none; }
:where(.cms-content,.reference-body) .product-item .product-price-inc-vat-value { font-weight: 700; }
:where(.cms-content,.reference-body) .product-item .product-price-inc-vat-value[data-before]::before { content: attr(data-before) " "; font-weight: 400; }
:where(.cms-content,.reference-body) .product-item .product-price-inc-vat-value[data-after]::after { content: " " attr(data-after); font-weight: 400; }
:where(.cms-content,.reference-body) .product-colors { margin: 1em 0; }
:where(.cms-content,.reference-body) .product-colors > em { display: none; }
:where(.cms-content,.reference-body) .product-colors ul { display: flex; flex-flow: row wrap; gap: 8px; margin: 0; padding: 4px 0; list-style: none; font-size: 1px; }
:where(.cms-content,.reference-body) .product-colors ul > li { display: block; margin: 0; padding: 0; }
:where(.cms-content,.reference-body) .product-colors ul a { display: block; width: 12px; height: 12px; position: relative; }
:where(.cms-content,.reference-body) .product-colors ul a::before { content: ""; display: block; border: 1px solid transparent; margin: -4px; position: absolute; inset: 0; }
:where(.cms-content,.reference-body) .product-colors ul a::after { content: ""; display: block; border: 1px solid rgba(0, 0, 0, .1); position: absolute; inset: 0; z-index: 4; }
:where(.cms-content,.reference-body) .product-colors ul a:hover::before { border-color: var(--brand); }
:where(.cms-content,.reference-body) .product-colors ul a > span { display: block; overflow: hidden; position: absolute; inset: 0; z-index: 1; }
:where(.cms-content,.reference-body) .product-colors ul a > span > span { display: none; }
:where(.cms-content,.reference-body) .product-colors ul > li[data-hidden-colors] { color: rgba(0, 0, 0, .5); font-size: 14px; line-height: 1; }
:where(.cms-content,.reference-body) .product-colors ul > li[data-hidden-colors] a { width: auto; height: auto; color: rgba(0, 0, 0, .5); position: relative; top: -.5px; }
:where(.cms-content,.reference-body) .product-colors ul > li[data-hidden-colors] a::before, :where(.cms-content,.reference-body) .product-colors ul > li[data-hidden-colors] a::after { display: none; }
:where(.cms-content,.reference-body) .product-colors + .product-features { margin-top: 1.2em; }
:where(.cms-content,.reference-body) .product-features ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
:where(.cms-content,.reference-body) .product-features li { margin: 0; padding: 0; }
:where(.cms-content,.reference-body) .product-features a { display: block; position: relative; }
:where(.cms-content,.reference-body) .product-features a > span { display: block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: rgba(0, 0, 0, .9); position: relative; }
:where(.cms-content,.reference-body) .product-features a > span:first-child { position: absolute; inset: 0; border: 1px solid rgba(0, 0, 0, .8); }
:where(.cms-content,.reference-body) .product-features a > span:first-child[style] { border-color: transparent; }
:where(.cms-content,.reference-body) .product-features a:hover > span:first-child { background-color: #1d1d1b !important; border-color: #1d1d1b; }
:where(.cms-content,.reference-body) .product-features a:hover > span:last-child { color: #fff; }
:where(.cms-content,.reference-body) .rating-stars { font-size: 0; }
:where(.cms-content,.reference-body) .rating-stars > span { display: block; overflow: hidden; width: 100px; height: 20px; background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMDAwcHgiIGhlaWdodD0iMzAwMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAzMDAwIj4KCTxkZWZzPgoJCTxzeW1ib2wgaWQ9ImluaXRpYWwiIHZpZXdCb3g9IjAgMCAyMCAyMCI+CgkJCTxwYXRoIGQ9Ik0xOS4yLDcuNmwtNi41LTAuNmwtMi41LTZjLTAuMS0wLjItMC40LTAuMi0wLjUsMGwtMi41LDZMMC44LDcuNkMwLjUsNy43LDAuNCw4LDAuNiw4LjFsNC45LDQuMyBMNCwxOC43QzQsMTguOSw0LjIsMTkuMSw0LjQsMTlsNS42LTMuNGw1LjYsMy40YzAuMiwwLjEsMC41LTAuMSwwLjQtMC4zbC0xLjUtNi4zbDQuOS00LjNDMTkuNiw4LDE5LjUsNy43LDE5LjIsNy42eiIgLz4KCQk8L3N5bWJvbD4KCTwvZGVmcz4KCTxnIGZpbGw9IiNjY2NjY2MiPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeD0iMCIgeT0iMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjE1IiB5PSIwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeD0iMzAiIHk9IjAiIC8+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI0NSIgeT0iMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjYwIiB5PSIwIiAvPgoJPC9nPgoJPGcgZmlsbD0iI2ZmYWEwMCI+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSIxMDAwIiB5PSIwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeD0iMTAxNSIgeT0iMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjEwMzAiIHk9IjAiIC8+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSIxMDQ1IiB5PSIwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgeD0iMTA2MCIgeT0iMCIgLz4KCTwvZz4KCTxnIGZpbGw9IiNjY2NjY2MiPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMCIgeT0iMTAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjIwIiB5PSIxMDAwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iNDAiIHk9IjEwMDAiIC8+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSI2MCIgeT0iMTAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjgwIiB5PSIxMDAwIiAvPgoJPC9nPgoJPGcgZmlsbD0iI2ZmYWEwMCI+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIxMDAwIiB5PSIxMDAwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMTAyMCIgeT0iMTAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjEwNDAiIHk9IjEwMDAiIC8+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIxMDYwIiB5PSIxMDAwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMTA4MCIgeT0iMTAwMCIgLz4KCTwvZz4KCTxnIGZpbGw9IiNjY2NjY2MiPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMCIgeT0iMjAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHg9IjI3IiB5PSIyMDAwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iNTQiIHk9IjIwMDAiIC8+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSI4MSIgeT0iMjAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHg9IjEwOCIgeT0iMjAwMCIgLz4KCTwvZz4KCTxnIGZpbGw9IiNmZmFhMDAiPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMTAwMCIgeT0iMjAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHg9IjEwMjciIHk9IjIwMDAiIC8+CgkJPHVzZSB4bGluazpocmVmPSIjaW5pdGlhbCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIxMDU0IiB5PSIyMDAwIiAvPgoJCTx1c2UgeGxpbms6aHJlZj0iI2luaXRpYWwiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMTA4MSIgeT0iMjAwMCIgLz4KCQk8dXNlIHhsaW5rOmhyZWY9IiNpbml0aWFsIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHg9IjExMDgiIHk9IjIwMDAiIC8+Cgk8L2c+Cjwvc3ZnPg==") 0 0 / 2000px 3000px no-repeat; }
:where(.cms-content,.reference-body) .rating-stars > span > span { display: none; }
:where(.cms-content,.reference-body) .rating-stars.small-size > span { width: 80px; height: 16px; background-size: 1600px 2400px; }

/* A wrapper imported inside the copy is not the page's own column: it keeps no padding of its own. */
:where(.cms-content,.reference-body) .wrap { max-width: none; padding: 0; margin: 0; }