@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900|Rubik:300,400,500,700,900');
/* Move down content because we have a fixed navbar that is 50px tall */
/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 30px;
    padding-right: 30px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
.ASPSize {
    max-width: 280px !important;
}

.vertical-align {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#footer-content {
    padding: 0px !important;
    margin: 0px !important;
    text-align:center;
}

footer {
    min-height:200px;
    padding:40px;
}

.ProductImage {
    object-fit:cover;
    width:250px;
    height:250px;
}

#LogoImage {
    display: block;
    margin: auto;
}

h2 {
    font-size:large;
}

#ResellerContent {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 650px;
}

.jumbotron {
    margin-bottom:0px;
}

/* Responsive: Portrait tablets and up */
/*@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}*/

/*PRODUCT PAGE*/

.breadcrumb-item + .breadcrumb-item::before {
    content: ">"
}

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .1rem 0rem !important;
    margin-bottom: 0rem;
    list-style: none;
    background-color: #ffffff;
    border-radius: .25rem
}

.single_product {
    padding-top: 66px;
    padding-bottom: 100px;
    background-color: #e5e5e5;
    margin-top: 0px;
    padding: 17px
}

.product_name {
    font-size: 20px;
    font-weight: 400;
    margin-top: 0px
}

.badge {
    display: inline-block;
    padding: 0.50em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem
}

.product-rating {
    margin-top: 10px
}

.rating-review {
    color: #5b5b5b
}

.product_price {
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    margin-top: 9px;
    clear: left
}

.product_discount {
    display: inline-block;
    font-size: 17px;
    font-weight: 300;
    margin-top: 9px;
    clear: left;
    margin-left: 10px;
    color: red
}

.product_saved {
    display: inline-block;
    font-size: 15px;
    font-weight: 200;
    color: #999999;
    clear: left
}

.singleline {
    margin-top: 1rem;
    margin-bottom: .40rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

.product_info {
    color: #4d4d4d;
    display: inline-block
}

.product_options {
    margin-bottom: 10px
}

.product_description {
    padding-left: 0px
}

.product_quantity {
    width: 104px;
    height: 47px;
    border: solid 1px #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
    padding-left: 8px;
    padding-top: -4px;
    padding-bottom: 44px;
    float: left;
    margin-right: 22px;
    margin-bottom: 11px
}

.order_info {
    margin-top: 18px
}

.shop-button {
    height: 47px
}

.product_fav i {
    line-height: 44px;
    color: #cccccc
}

.product_fav {
    display: inline-block;
    width: 52px;
    height: 46px;
    background: #FFFFFF;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 11%;
    text-align: center;
    cursor: pointer;
    margin-left: 3px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease
}

.br-dashed {
    border-radius: 5px;
    border: 1px dashed #dddddd;
    margin-top: 6px
}

.pr-info {
    margin-top: 2px;
    padding-left: 2px;
    margin-left: -14px;
    padding-left: 0px
}

.break-all {
    color: #5e5e5e
}

.image_selected {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% + 15px);
    height: 700px; 
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    transform: translateX(-15px);
    border: solid 1px #e8e8e8;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 15px
}

.image_list li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 165px;
    border: solid 1px #e8e8e8;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 15px;
    cursor: pointer;
    padding: 15px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    overflow: hidden
}

@media (max-width: 390px) {
    .product_fav {
        display: none
    }
}

.bbb_combo {
    width: 100%;
    margin-right: 7%;
    padding-top: 21px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 24px;
    border-radius: 5px;
    margin-top: 0px;
    text-align: -webkit-center
}

.bbb_combo_image {
    width: 170px;
    height: 170px;
    margin-bottom: 15px
}

.fs-10 {
    font-size: 10px
}

.step {
    background: #167af6;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 6.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 3.6em;
    margin-right: 5px;
    text-align: center;
    width: 3.6em;
    margin-top: 116px
}

.row-underline {
    content: "";
    display: block;
    border-bottom: 2px solid #3798db;
    margin: 0px 0px;
    margin-bottom: 20px;
    margin-top: 15px
}

.deal-text {
    margin-left: -10px;
    font-size: 25px;
    margin-bottom: 10px;
    color: #000;
    font-weight: 700
}

.padding-0 {
    padding-left: 0;
    padding-right: 0
}

.padding-2 {
    margin-right: 2px;
    margin-left: 2px
}

.vertical-line {
    display: inline-block;
    border-left: 3px solid #167af6;
    margin: 0 10px;
    height: 364px;
    margin-top: 4px
}

.p-rating {
    color: green
}

.combo-pricing-item {
    display: flex;
    flex-direction: column
}

.boxo-pricing-items {
    display: inline-flex
}

.combo-plus {
    margin-left: 10px;
    margin-right: 18px;
    margin-top: 10px
}

.add-both-cart-button {
    margin-left: 36px
}

.items_text {
    color: #b0b0b0
}

.combo_item_price {
    font-size: 18px
}

.p_specification {
    font-weight: 500;
    margin-left: 22px
}

.mt-10 {
    margin-top: 10px
}

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px
}

body {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 400;
    background: #FFFFFF;
    color: #000000
}

div {
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

ul {
    list-style: none;
    margin-bottom: 0px
}

.single_product {
    padding-top: 16px;
    padding-bottom: 100px
}

.image_list li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 165px;
    border: solid 1px #e8e8e8;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    cursor: pointer;
    padding: 15px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    overflow: hidden
}

    .image_list li:last-child {
        margin-bottom: 0
    }

    .image_list li:hover {
        box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3)
    }

    .image_list li img {
        max-width: 100%
    }

.image_selected {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% + 15px);
    height: 700px;
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    transform: translateX(-15px);
    border: solid 1px #e8e8e8;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 15px
}

    .image_selected img {
        max-width: 100%
    }

.product_category {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5)
}

.product_rating {
    margin-top: 7px
}

    .product_rating i {
        margin-right: 4px
    }

        .product_rating i::before {
            font-size: 13px
        }

.product_text {
    margin-top: 27px
}

    .product_text p:last-child {
        margin-bottom: 0px
    }

.order_info {
    margin-top: 16px
}

.product_quantity {
    width: 182px;
    height: 50px;
    border: solid 1px #e5e5e5;
    border-radius: 5px;
    overflow: hidden;
    padding-left: 25px;
    float: left;
    margin-right: 30px
}

    .product_quantity span {
        display: block;
        height: 50px;
        font-size: 16px;
        font-weight: 300;
        color: rgba(0, 0, 0, 0.5);
        line-height: 50px;
        float: left
    }

    .product_quantity input {
        display: block;
        width: 30px;
        height: 50px;
        border: none;
        outline: none;
        font-size: 16px;
        font-weight: 300;
        color: rgba(0, 0, 0, 0.5);
        text-align: left;
        padding-left: 9px;
        line-height: 50px;
        float: left
    }

.quantity_buttons {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 29px;
    border-left: solid 1px #e5e5e5
}

.quantity_inc,
.quantity_dec {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 50%;
    cursor: pointer
}

.quantity_control i {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none
}

.quantity_control:active {
    border: solid 1px rgba(14, 140, 228, 0.2)
}

.quantity_inc {
    padding-bottom: 2px;
    justify-content: flex-end;
    border-top-right-radius: 5px
}

.quantity_dec {
    padding-top: 2px;
    justify-content: flex-start;
    border-bottom-right-radius: 5px
}

.form-control {
    min-width:200px;
}

.col-form-label {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.nav-button-margin {
    margin-left:20px;
}
.body-content a {
    font-weight: bold;
    text-decoration:underline;
}

.StockImageDiv {
    position: relative;
    text-align: center;
    color: white;
    height:255px;
    width:255px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:large;
    font-weight:bold;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 0px;
    left: 3px;
}

.panel-title a {
    text-decoration:none;
}

.panel-title {
    font-size:14px;
}

.panel-default > .panel-heading {
    background-color:transparent;
}

.panel {
    background-color: transparent;
}

.panel-heading {
    padding:10px 0px;
}

.chkChoice label {
    margin-left: 20px;
}

.mini-submenu {
    display: none;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0.9);
    border-radius: 4px;
    padding: 9px;
    /*position: relative;*/
    width: 42px;
}

    .mini-submenu:hover {
        cursor: pointer;
    }

    .mini-submenu .icon-bar {
        border-radius: 1px;
        display: block;
        height: 2px;
        width: 22px;
        margin-top: 3px;
    }

    .mini-submenu .icon-bar {
        background-color: #000;
    }

#slide-submenu {
    background: rgba(0, 0, 0, 0.45);
    display: inline-block;
    padding: 0 8px;
    border-radius: 4px;
    cursor: pointer;
}

.jumbotron h1 {
    font-size: 46px;
}

.svg-filter-facebook {
    filter: brightness(0) saturate(100%) invert(36%) sepia(47%) saturate(4606%) hue-rotate(203deg) brightness(98%) contrast(93%);
    margin: 5px;
}

.svg-filter-instagram {
    filter: brightness(0) saturate(100%) invert(40%) sepia(22%) saturate(3490%) hue-rotate(314deg) brightness(90%) contrast(99%);
    margin: 5px;
}

.svg-filter-twitter {
    filter: brightness(0) saturate(100%) invert(44%) sepia(100%) saturate(860%) hue-rotate(176deg) brightness(98%) contrast(93%);
    margin: 5px;
}

.svg-filter-youtube {
    filter: brightness(0) saturate(100%) invert(18%) sepia(67%) saturate(6208%) hue-rotate(354deg) brightness(85%) contrast(88%);
    margin: 5px;
}

.svg-filter-whatsapp {
    filter: brightness(0) saturate(100%) invert(65%) sepia(56%) saturate(565%) hue-rotate(89deg) brightness(90%) contrast(98%);
    margin: 5px;
}

/* ==========================================================================
   Site Studio additions. Nothing in this block changes a site that has not
   chosen a new option: every rule is scoped to a class the studio sets, or to
   an element that only renders when the reseller has filled something in.
   The reseller's original colours are applied by StyleSheet.ashx exactly as
   before; the --rs-* variables it also emits feed the rules below.
   ========================================================================== */

/* announcement strip (hidden unless text is set) */
.rs-announce { background: var(--rs-primary); color: var(--rs-on-primary); text-align: center; font-size: .85rem; letter-spacing: .04em; padding: .45rem 1rem; }

/* logo sized from the studio slider (the classic width="300" attribute is used otherwise) */
#LogoImage.rs-logo { height: var(--rs-logo-height, auto); width: auto; max-width: 100%; object-fit: contain; }
/* trading name shown in place of a missing logo */
.rs-logo-text { font-size: 1.7rem; font-weight: 700; }

/* logo-only header */
.rs-header--logo-only #LogoImage.rs-logo { height: calc(var(--rs-logo-height, 90px) * 1.35); }
.rs-header--logo-only .rs-logo-text { font-size: 2.4rem; }
.rs-header--logo-only #SiteTagline { margin-top: .6rem; }

/* banner header: a colour band from the header colour into the button colour */
.jumbotron.rs-header--banner { background: linear-gradient(135deg, var(--rs-header-bg), rgba(var(--rs-primary-rgb), .85)) !important; padding-top: 3rem; padding-bottom: 3rem; }

/* hero (hidden unless switched on) */
.rs-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--rs-primary), rgba(var(--rs-accent-rgb), .9)); background-size: cover; background-position: center; color: #fff; padding: clamp(3rem, 8vw, 6rem) 1.5rem; text-align: center; }
.rs-hero[data-image]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.rs-hero-inner { position: relative; max-width: 780px; margin: 0 auto; }
.rs-hero h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); color: #fff; font-weight: 700; margin-bottom: .6rem; line-height: 1.1; }
.rs-hero p { font-size: 1.1rem; color: rgba(255,255,255,.92); max-width: 640px; margin: 0 auto 1.4rem; }
.rs-hero .btn { padding: .8rem 1.8rem; }

/* watch card styles (outline = the Bootstrap default every site has today) */
body.rs-card-shadow .card { border-color: transparent; box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.07); transition: transform .25s ease, box-shadow .25s ease; }
body.rs-card-shadow .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
body.rs-card-flat .card { border-color: transparent; background: rgba(var(--rs-body-fg-rgb), .045); }
body.rs-card-shadow .card, body.rs-card-flat .card { background-color: var(--rs-surface, #fff); }

/* footer about / opening hours (hidden unless filled in) */
.rs-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; text-align: left; max-width: 1100px; margin: 0 auto 1.8rem; }
.rs-footer-grid h3 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: .5rem; }
.rs-footer-grid p { white-space: pre-line; font-size: .92rem; opacity: .92; margin: 0; }
#FooterText { white-space: pre-line; }

/* ==========================================================================
   The 2026 storefront ("modern" look). Everything below is scoped to
   body.rs-modern, so a reseller switched to the classic look is untouched.

   Colour: StyleSheet.ashx works out a brand colour for each reseller from
   their own palette (--rs-primary / --rs-on-primary / --rs-accent) and this
   file uses it for every button, tick, link and highlight, so each site is
   in its own colours without the reseller doing anything.

   Legacy custom CSS: over half the resellers have a hand-written stylesheet
   written against the old template (fixed header heights, logo widths, white
   bordered buttons). It still loads, so their fonts and little touches carry
   over, but layout, sizes and button colours are owned by this file, which
   is why some rules below carry !important.
   The watch page block at the end applies to both looks (new markup).
   ========================================================================== */

/* elements that exist only for one look */
body.rs-modern .rs-c { display: none !important; }
body:not(.rs-modern) .rs-m { display: none !important; }

body.rs-modern {
  --rs-gutter: clamp(1rem, 4vw, 2.75rem);
  --rs-max: 1400px;
  --rs-line: color-mix(in srgb, var(--rs-body-fg) 10%, transparent);
  --rs-line-2: color-mix(in srgb, var(--rs-body-fg) 18%, transparent);
  --rs-muted: color-mix(in srgb, var(--rs-body-fg) 62%, transparent);
  --rs-soft: color-mix(in srgb, var(--rs-body-fg) 4%, var(--rs-body-bg));
  --rs-tint: color-mix(in srgb, var(--rs-primary) 9%, var(--rs-surface));
  --rs-r: max(var(--rs-radius), 10px);
  --rs-r-lg: max(calc(var(--rs-radius) * 2), 16px);
  --rs-hdr-line: color-mix(in srgb, var(--rs-header-fg) 14%, transparent);
  --rs-hdr-soft: color-mix(in srgb, var(--rs-header-fg) 8%, transparent);
  --rs-ease: cubic-bezier(.2, .7, .2, 1);
  --rs-header-h: 88px;
  --rs-yes: #15803d;
  --rs-no: #c62828;
  background: var(--rs-body-bg);
  color: var(--rs-body-fg);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.rs-modern h1, body.rs-modern h2, body.rs-modern h3, body.rs-modern h4, body.rs-modern h5 {
  font-family: var(--rs-font-heading); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
body.rs-modern h2 { font-size: 1.4rem; }
body.rs-modern :focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 3px; border-radius: 4px; }
body.rs-modern ::selection { background: var(--rs-primary); color: var(--rs-on-primary); }
html:has(body.rs-modern) { scroll-padding-top: 110px; scroll-behavior: smooth; }

/* ---------- announcement ---------- */
body.rs-modern .rs-announce { background: var(--rs-primary); color: var(--rs-on-primary); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .6rem var(--rs-gutter); }

/* ---------- header ----------
   A full width bar in the reseller's header colour that stays at the top of the screen: a generous logo,
   a quiet capitals menu with a line that grows under the item you are on, then the ways to get in touch
   as one filled call button and round icon buttons. A fine line of light runs along its bottom edge.
   It tightens a little once the page is scrolled.
   The inner .container-fluid is the layout grid; the old row and columns inside it are kept, with their
   ids, because resellers' own CSS and scripts look for them, but they are flattened (display: contents)
   so the logo can sit left, centre or right with the same markup.
   Legacy custom CSS set fixed heights, widths and paddings on these elements, hence the !important. */
body.rs-modern .jumbotron.rs-header {
  position: sticky; top: 0; z-index: 60;
  height: auto !important; min-height: 0 !important; max-height: none !important; width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; border-radius: 0; background-image: none !important;
  border-bottom: 1px solid var(--rs-hdr-line);
  transition: box-shadow .3s;
}
body.rs-modern .jumbotron.rs-header::after {
  /* the line of light: brightest in the middle, fading to nothing at the edges */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rs-cta-bg, var(--rs-header-fg)) 30%, var(--rs-cta-bg, var(--rs-header-fg)) 70%, transparent); opacity: .55;
}
body.rs-modern .jumbotron.rs-header.rs-scrolled { box-shadow: 0 14px 40px rgba(0, 0, 0, .14); }
body.rs-modern .rs-header > .container-fluid {
  position: static; display: grid; align-items: center; gap: .4rem 2rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  max-width: calc(var(--rs-max) + var(--rs-gutter) * 2); min-height: 92px; height: auto !important; margin: 0 auto !important; padding: .7rem var(--rs-gutter) !important;
  transition: min-height .3s var(--rs-ease), padding .3s var(--rs-ease);
}
body.rs-modern .rs-header.rs-scrolled > .container-fluid { min-height: 72px; padding-top: .4rem !important; padding-bottom: .4rem !important; }
body.rs-modern .rs-hdr, body.rs-modern .rs-navrow, body.rs-modern .rs-navrow > div { display: contents; }
body.rs-modern .rs-hdr > [class*="col-"] { width: auto !important; max-width: none !important; flex: none; padding: 0 !important; margin: 0 !important; min-width: 0; height: auto !important; float: none !important; position: static; order: 0 !important; text-align: left !important; }

/* logo */
body.rs-modern .rs-hdr-brand { display: flex; align-items: center; gap: .8rem; justify-self: start; }
body.rs-modern #LogoLink { display: inline-flex; align-items: center; line-height: 0; transition: opacity .2s; }
body.rs-modern #LogoLink:hover { opacity: .82; }
body.rs-modern #LogoImage { display: block; margin: 0 !important; padding: 0 !important; transition: max-height .3s var(--rs-ease), height .3s var(--rs-ease); }
body.rs-modern #LogoImage:not(.rs-logo) { width: auto !important; height: auto !important; max-height: 66px !important; max-width: min(300px, 42vw) !important; object-fit: contain; }
body.rs-modern .rs-header.rs-scrolled #LogoImage:not(.rs-logo) { max-height: 54px !important; }
body.rs-modern #LogoImage.rs-logo { height: min(var(--rs-logo-height), 140px) !important; width: auto !important; max-width: min(400px, 60vw) !important; object-fit: contain; }
body.rs-modern .rs-logo-text { font-family: var(--rs-font-heading); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
body.rs-modern #SiteHeader #SiteTagline { display: none; }

/* navigation */
body.rs-modern .rs-hdr-nav { display: contents; }
body.rs-modern .rs-nav { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: nowrap; position: static; }
body.rs-modern .rs-nav a {
  position: relative; display: inline-flex; align-items: center; padding: .9rem 1rem; border-radius: 0; white-space: nowrap; background: none;
  font-family: var(--rs-font-heading); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-decoration: none; text-transform: uppercase;
  opacity: .82; transition: opacity .2s;
}
body.rs-modern .rs-nav a::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .45rem; height: 2px; border-radius: 2px;
  background: var(--rs-cta-bg, currentColor); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--rs-ease);
}
body.rs-modern .rs-nav a:hover, body.rs-modern .rs-nav > a.active, body.rs-modern .rs-nav .rs-mega-trigger.active, body.rs-modern .rs-mega-wrap:hover .rs-mega-trigger { opacity: 1; background: none; }
body.rs-modern .rs-nav a:hover::after, body.rs-modern .rs-nav > a.active::after, body.rs-modern .rs-nav .rs-mega-trigger.active::after, body.rs-modern .rs-mega-wrap:hover .rs-mega-trigger::after { transform: scaleX(1); }

/* getting in touch: the main number is a filled call button, anything else is a round icon button */
body.rs-modern .rs-hdr-contact { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; flex-wrap: nowrap; justify-self: end; }
body.rs-modern #SiteHeader .rs-hdr-contact h2 { margin: 0 !important; padding: 0 !important; border: 0; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0; white-space: nowrap; display: flex; }
body.rs-modern #SiteHeader .rs-hdr-contact h2:not(:has(a)) { display: none; }
body.rs-modern #SiteHeader .rs-hdr-contact h2 a {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; text-decoration: none; overflow: hidden;
  font-size: 0 !important; line-height: 1 !important; border: 1px solid var(--rs-hdr-line); transition: background .2s, border-color .2s, transform .2s var(--rs-ease), box-shadow .2s;
}
body.rs-modern #SiteHeader .rs-hdr-contact h2 a::before {
  content: "" !important; display: block; width: 18px; height: 18px; flex: none; margin: 0; background: currentColor;
  -webkit-mask: var(--rs-ico) center / contain no-repeat; mask: var(--rs-ico) center / contain no-repeat;
  --rs-ico: url("data:image/svg+xml;utf8,<svg 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'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/></svg>");
}
body.rs-modern #SiteHeader .rs-hdr-contact h2 a[href^="mailto:"]::before { --rs-ico: url("data:image/svg+xml;utf8,<svg 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'><rect x='3' y='5' width='18' height='14' rx='2.5'/><path d='m3.5 7.5 8.5 6 8.5-6'/></svg>"); }
body.rs-modern #SiteHeader .rs-hdr-contact h2 a[href*="whatsapp"]::before { width: 20px; height: 20px; --rs-ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5.3-.5c.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.3-.6-.4M12 21.8a9.8 9.8 0 0 1-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4A9.8 9.8 0 1 1 12 21.8m8.4-18.2A11.8 11.8 0 0 0 1.6 17.8L0 24l6.3-1.7A11.8 11.8 0 0 0 12 23.8 11.8 11.8 0 0 0 20.4 3.6'/></svg>"); }
body.rs-modern #SiteHeader .rs-hdr-contact h2 a:hover { background: var(--rs-hdr-soft); border-color: color-mix(in srgb, var(--rs-header-fg) 40%, transparent); transform: translateY(-1px); }
/* the call button: the landline, or the mobile when there is no landline */
body.rs-modern #SiteHeader .rs-hdr-contact #TelAnchor,
body.rs-modern #SiteHeader:not(:has(#TelAnchor)) .rs-hdr-contact #MobAnchor {
  display: inline-flex; align-items: center; gap: .55rem; width: auto; height: 44px; padding: 0 1.25rem 0 1.05rem; border-radius: 999px;
  font-family: var(--rs-font-heading); font-size: .88rem !important; font-weight: 700; letter-spacing: 0;
  background: var(--rs-cta-bg, var(--rs-header-fg)); border-color: var(--rs-cta-bg, var(--rs-header-fg)); color: var(--rs-cta-fg, var(--rs-header-bg)) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--rs-cta-bg, #000) 26%, transparent);
}
body.rs-modern #SiteHeader .rs-hdr-contact #TelAnchor:hover,
body.rs-modern #SiteHeader:not(:has(#TelAnchor)) .rs-hdr-contact #MobAnchor:hover { background: var(--rs-cta-bg, var(--rs-header-fg)); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--rs-cta-bg, #000) 36%, transparent); }
body.rs-modern #SiteHeader .rs-hdr-contact #TelAnchor::before,
body.rs-modern #SiteHeader:not(:has(#TelAnchor)) .rs-hdr-contact #MobAnchor::before { width: 16px; height: 16px; }
/* anything a reseller's own script adds beside the numbers (an About link, say) reads as a quiet text link */
body.rs-modern #SiteHeader .rs-hdr-contact div { display: contents; }
body.rs-modern #SiteHeader .rs-hdr-contact div a, body.rs-modern #SiteHeader .rs-hdr-contact > a { order: -1; font-family: var(--rs-font-heading); font-size: .9rem; font-weight: 600; text-decoration: none; padding: .62rem .9rem; border-radius: 999px; white-space: nowrap; }
body.rs-modern #SiteHeader .rs-hdr-contact div a:hover, body.rs-modern #SiteHeader .rs-hdr-contact > a:hover { background: var(--rs-hdr-soft); }

/* logo in the middle: navigation to its left, contact to its right */
body.rs-modern .rs-header--logo-centre > .container-fluid, body.rs-modern .rs-header--logo-only > .container-fluid { grid-template-columns: minmax(0, 1fr) auto auto; }
body.rs-modern .rs-header--logo-centre .rs-nav, body.rs-modern .rs-header--logo-only .rs-nav { grid-column: 1; grid-row: 1; justify-content: flex-start; margin-left: -1rem; }
body.rs-modern .rs-header--logo-centre .rs-hdr-brand, body.rs-modern .rs-header--logo-only .rs-hdr-brand { position: absolute; left: 50%; top: 50%; translate: -50% -50%; justify-self: auto; }
body.rs-modern .rs-header--logo-centre #LogoImage:not(.rs-logo), body.rs-modern .rs-header--logo-only #LogoImage:not(.rs-logo) { max-height: 72px !important; }
body.rs-modern .rs-header--logo-centre.rs-scrolled #LogoImage:not(.rs-logo), body.rs-modern .rs-header--logo-only.rs-scrolled #LogoImage:not(.rs-logo) { max-height: 58px !important; }
body.rs-modern .rs-header--logo-centre #AddressCol { grid-column: 2; grid-row: 1; }
body.rs-modern .rs-header--logo-centre #LogoCol { grid-column: 3; grid-row: 1; }
/* logo on the right: contact, navigation, logo */
body.rs-modern .rs-header--logo-right #AddressCol { grid-column: 1; grid-row: 1; justify-self: start; }
body.rs-modern .rs-header--logo-right .rs-nav { grid-column: 2; grid-row: 1; }
body.rs-modern .rs-header--logo-right #LogoCol { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 1180px) and (min-width: 1001px) {
  body.rs-modern .rs-nav { gap: 0; }
  body.rs-modern .rs-nav a { padding-inline: .75rem; letter-spacing: .1em; }
  body.rs-modern .rs-nav a::after { left: .75rem; right: .75rem; }
  body.rs-modern #SiteHeader .rs-hdr-contact h2 a[href^="mailto:"] { display: none; }
}

/* burger and the phone menu: the bar opens downwards into a sheet */
body.rs-modern .rs-burger { display: none; width: 46px; height: 46px; border: 0 !important; background: var(--rs-hdr-soft) !important; box-shadow: none !important; padding: 0; border-radius: 50%; justify-self: end; cursor: pointer; }
body.rs-modern .rs-burger span { display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--rs-header-fg); transition: transform .25s, opacity .2s; }
body.rs-modern.rs-nav-open .rs-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.rs-modern.rs-nav-open .rs-burger span:nth-child(2) { opacity: 0; }
body.rs-modern.rs-nav-open .rs-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1000px) {
  body.rs-modern .rs-header > .container-fluid, body.rs-modern .rs-header--logo-centre > .container-fluid, body.rs-modern .rs-header--logo-only > .container-fluid, body.rs-modern .rs-header--logo-right > .container-fluid,
  body.rs-modern .rs-header.rs-scrolled > .container-fluid {
    grid-template-columns: minmax(0, 1fr) auto; min-height: 68px; padding: .5rem var(--rs-gutter) !important; gap: .3rem .8rem;
  }
  body.rs-modern .rs-hdr .rs-hdr-brand { position: static; translate: none; grid-column: 1 !important; grid-row: 1 !important; justify-self: start; left: auto !important; top: auto !important; }
  body.rs-modern .rs-burger { display: block; grid-column: 2; grid-row: 1; }
  body.rs-modern #LogoImage:not(.rs-logo), body.rs-modern .rs-header--logo-centre #LogoImage:not(.rs-logo), body.rs-modern .rs-header--logo-only #LogoImage:not(.rs-logo), body.rs-modern .rs-header.rs-scrolled #LogoImage:not(.rs-logo) { max-height: 48px !important; max-width: 60vw !important; }
  body.rs-modern #LogoImage.rs-logo { height: min(var(--rs-logo-height), 56px) !important; max-width: 60vw !important; }
  body.rs-modern .rs-nav, body.rs-modern .rs-hdr-contact { display: none; }
  body.rs-modern.rs-nav-open .rs-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; grid-column: 1 / -1 !important; grid-row: auto !important; margin: .4rem 0 0; padding: .3rem 0 0; border-top: 1px solid var(--rs-hdr-line); }
  body.rs-modern.rs-nav-open .rs-nav a { font-size: .95rem; letter-spacing: .12em; padding: 1.05rem .2rem; opacity: 1; border-bottom: 1px solid var(--rs-hdr-line); }
  body.rs-modern.rs-nav-open .rs-nav a::after { display: none; }
  body.rs-modern.rs-nav-open .rs-mega-wrap { display: block; }
  body.rs-modern.rs-nav-open .rs-mega-wrap > a { display: flex; }
  body.rs-modern.rs-nav-open .rs-hdr-contact { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: stretch; padding: .7rem 0 .5rem; }
  body.rs-modern.rs-nav-open #SiteHeader .rs-hdr-contact h2 a,
  body.rs-modern.rs-nav-open #SiteHeader .rs-hdr-contact #TelAnchor,
  body.rs-modern.rs-nav-open #SiteHeader:not(:has(#TelAnchor)) .rs-hdr-contact #MobAnchor {
    display: flex; align-items: center; justify-content: flex-start; gap: .7rem; width: 100%; height: 52px; padding: 0 1.1rem; border-radius: 14px;
    font-family: var(--rs-font-heading); font-size: .95rem !important; font-weight: 600;
  }
  body.rs-modern.rs-nav-open #SiteHeader .rs-hdr-contact h2 { width: 100%; }
}

/* a few resellers' own scripts add an old Bootstrap 3 menu bar above the header linking to their main site.
   Bootstrap 5 leaves it collapsed behind a dead "Toggle navigation" button, so lay its links out as a slim bar. */
body.rs-modern .nav-custom { margin: 0 !important; padding: 0 var(--rs-gutter) !important; }
body.rs-modern .nav-custom .container-fluid { max-width: var(--rs-max) !important; margin: 0 auto !important; padding: 0 !important; }
body.rs-modern .nav-custom .navbar { display: block; padding: 0; min-height: 0; background: none !important; }
body.rs-modern .nav-custom .navbar-header, body.rs-modern .nav-custom .navbar-toggle { display: none !important; }
body.rs-modern .nav-custom .navbar-collapse { display: block !important; height: auto !important; visibility: visible; padding: 0; }
body.rs-modern .nav-custom .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: .2rem 1.1rem; list-style: none; margin: 0; padding: .35rem 0; float: none; }
body.rs-modern .nav-custom .navbar-nav a { text-decoration: none; letter-spacing: .08em; opacity: .9; }
body.rs-modern .nav-custom .navbar-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { body.rs-modern .nav-custom .navbar-nav { justify-content: center; } }

/* ---------- hero ---------- */
body.rs-modern .rs-hero { padding: clamp(4rem, 10vw, 8rem) var(--rs-gutter); background: linear-gradient(135deg, var(--rs-primary), color-mix(in srgb, var(--rs-primary) 65%, #000)); background-size: cover; background-position: center; }
body.rs-modern .rs-hero h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.035em; font-weight: 800; color: #fff; }
body.rs-modern .rs-hero p { font-size: clamp(1rem, 1.4vw, 1.18rem); }
body.rs-modern .rs-hero .btn-primary { background: #fff !important; color: #111 !important; border-color: #fff !important; }

/* ---------- page shell ---------- */
body.rs-modern #ResellerContent { padding: 0 var(--rs-gutter) clamp(3rem, 6vw, 5rem) !important; min-height: 60vh !important; }
body.rs-modern #ResellerContent > .row, body.rs-modern #ResellerContent > .rs-masthead, body.rs-modern #ResellerContent > div > .row, body.rs-modern #ResellerContent > div > .rs-masthead,
body.rs-modern .rs-pdp, body.rs-modern .super_container { max-width: var(--rs-max); margin-inline: auto; }
body.rs-modern .body-content a { font-weight: inherit; text-decoration: none; }
body.rs-modern #ResellerContent p a, body.rs-modern #ResellerContent .rs-sell a { color: var(--rs-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

body.rs-modern .rs-masthead { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.2rem, 2.5vw, 1.8rem); }
body.rs-modern .rs-masthead:not(:has(h1:not(:empty), .rs-eyebrow:not(:empty))) { display: none; }
body.rs-modern #ResellerContent .rs-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-accent);
}
body.rs-modern #ResellerContent .rs-eyebrow:empty { display: none; }
body.rs-modern #ResellerContent .rs-eyebrow::before { content: ""; width: 13px; height: 13px; flex: none; background: var(--rs-accent); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.9 6.6 4.4 10.1 12 12-7.6 1.9-11.1 5.4-12 12-.9-6.6-4.4-10.1-12-12C7.6 10.1 11.1 6.6 12 0z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.9 6.6 4.4 10.1 12 12-7.6 1.9-11.1 5.4-12 12-.9-6.6-4.4-10.1-12-12C7.6 10.1 11.1 6.6 12 0z'/></svg>") center / contain no-repeat; }
body.rs-modern .rs-masthead h1 { font-size: clamp(2rem, 4.4vw, 3.4rem) !important; font-weight: 800; letter-spacing: -.035em; margin: 0; max-width: 20ch; text-transform: none; }
body.rs-modern .rs-masthead h1:empty { display: none; }
body.rs-modern #IntroBlock { margin: 0; }
body.rs-modern #IntroBlock .rs-intro { text-align: left !important; margin: 0 0 1.8rem !important; padding: 0; font-size: 1.02rem !important; max-width: 760px; }
body.rs-modern #IntroBlock .rs-intro h2 { font-size: 1.25rem; margin-bottom: .4rem; }
body.rs-modern #ResellerContent #IntroBlock .rs-intro p { color: var(--rs-muted); margin: 0; line-height: 1.7; }

/* reveal motion: only once the script has said it is running, so nothing can stay hidden without it */
body.rs-modern.rs-js .rs-card, body.rs-modern.rs-js .rs-masthead { opacity: 0; translate: 0 14px; }
body.rs-modern.rs-js .rs-card.in, body.rs-modern.rs-js .rs-masthead.in { opacity: 1; translate: 0 0; }
body.rs-modern .rs-card, body.rs-modern .rs-masthead { transition: opacity .6s var(--rs-ease), translate .7s var(--rs-ease), transform .25s var(--rs-ease), box-shadow .25s var(--rs-ease), border-color .25s; }
@media (prefers-reduced-motion: reduce) { body.rs-modern.rs-js .rs-card, body.rs-modern.rs-js .rs-masthead { opacity: 1; translate: none; transition: none; } }

/* ---------- buttons: always filled in the reseller's brand colour ---------- */
body.rs-modern .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--rs-font-heading); font-size: .9rem; font-weight: 700; letter-spacing: 0; line-height: 1.15;
  padding: .85rem 1.5rem; border-radius: var(--rs-btn-radius); text-decoration: none !important; cursor: pointer;
  transition: transform .18s var(--rs-ease), box-shadow .25s var(--rs-ease), background-color .2s, color .2s, border-color .2s;
}
body.rs-modern .btn:active { transform: translateY(1px) scale(.99); }
body.rs-modern .btn-primary, body.rs-modern input.btn-primary, body.rs-modern a.btn-primary {
  background-color: var(--rs-primary) !important; background-image: none !important; color: var(--rs-on-primary) !important;
  border: 1px solid var(--rs-primary) !important; box-shadow: 0 6px 18px rgba(var(--rs-primary-rgb), .2);
}
body.rs-modern .btn-primary:hover, body.rs-modern input.btn-primary:hover, body.rs-modern a.btn-primary:hover,
body.rs-modern .btn-primary:focus, body.rs-modern input.btn-primary:focus {
  background-color: var(--rs-primary-hover) !important; border-color: var(--rs-primary-hover) !important; color: var(--rs-on-primary) !important;
  transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--rs-primary-rgb), .3);
}
body.rs-modern .btn-outline-dark { color: var(--rs-body-fg) !important; border: 1px solid var(--rs-line-2) !important; background: transparent !important; }
body.rs-modern .btn-outline-dark:hover { border-color: var(--rs-primary) !important; background: var(--rs-tint) !important; color: var(--rs-body-fg) !important; }
body.rs-modern .btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
body.rs-modern .btn svg { width: 17px; height: 17px; flex: none; }

/* ---------- toolbar ---------- */
body.rs-modern .rs-shop { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0; gap: 0; }
body.rs-modern .rs-shop > [class*="col-"] { padding: 0; margin: 0; }
body.rs-modern .rs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 1rem; min-height: 44px; }
body.rs-modern .rs-pagecount { margin-left: 0 !important; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-muted); }
body.rs-modern .rs-toolbar .rs-refine-btn { display: none; }

/* ---------- refine panel ---------- */
body.rs-modern .rs-refine {
  width: 300px; flex: none; margin-right: clamp(1.2rem, 2.4vw, 2.4rem) !important; padding: 1.3rem 1.3rem 1.4rem !important;
  background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg);
}
body.rs-modern .rs-shop-main { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
body.rs-modern .rs-refine-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rs-line); }
body.rs-modern .rs-refine-head h2 { font-size: 1.05rem; margin: 0; display: inline-flex; align-items: center; gap: .6rem; }
body.rs-modern .rs-refine-head h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rs-primary); }
body.rs-modern .rs-refine-close { display: none; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--rs-muted); padding: .1rem .4rem; }
body.rs-modern .rs-refine .form-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-muted); margin-bottom: .4rem; }
body.rs-modern .rs-refine .form-control, body.rs-modern .rs-refine .form-select, body.rs-modern .rs-paging .form-select {
  min-width: 0; max-width: none !important; height: auto; font-family: var(--rs-font-body); font-size: .92rem; font-weight: 500; color: var(--rs-body-fg);
  background-color: var(--rs-body-bg); border: 1px solid var(--rs-line-2); border-radius: var(--rs-r); padding: .72rem .9rem; box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
body.rs-modern .rs-refine .form-select, body.rs-modern .rs-paging .form-select { padding-right: 2.4rem; cursor: pointer; }
body.rs-modern .rs-refine .form-control:focus, body.rs-modern .rs-refine .form-select:focus, body.rs-modern .rs-paging .form-select:focus { border-color: var(--rs-primary); box-shadow: 0 0 0 4px rgba(var(--rs-primary-rgb), .14); outline: 0; }
body.rs-modern .rs-refine .input-group { flex-wrap: nowrap; }
body.rs-modern .rs-refine .input-group .form-control { border-radius: var(--rs-r) 0 0 var(--rs-r); border-right: 0; }
body.rs-modern .rs-refine .input-group .btn { border-radius: 0 var(--rs-r) var(--rs-r) 0; padding: 0 1.1rem; box-shadow: none; font-size: .84rem; }
body.rs-modern .rs-refine .input-group .btn:hover { transform: none; }
body.rs-modern .rs-refine .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--rs-line); border-top: 1px solid var(--rs-line); margin-top: 1.2rem; }
body.rs-modern .rs-refine .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--rs-line); border-radius: 0; }
body.rs-modern .rs-refine .accordion-header { margin: 0; }
body.rs-modern .rs-refine .accordion-button {
  background: transparent !important; color: var(--rs-body-fg) !important; box-shadow: none !important; padding: .95rem 0; border-radius: 0;
  font-family: var(--rs-font-heading); font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
body.rs-modern .rs-refine .accordion-button:not(.collapsed) { color: var(--rs-accent) !important; }
body.rs-modern .rs-refine .accordion-button::after { filter: grayscale(1) contrast(.3); background-size: .9rem; }
body.rs-modern .rs-refine .accordion-body { padding: 0 0 1rem; }
body.rs-modern .rs-refine .chkChoice { width: 100%; }
body.rs-modern .rs-refine .chkChoice td { padding: .28rem 0; }
body.rs-modern .rs-refine .chkChoice input { accent-color: var(--rs-primary); width: 17px; height: 17px; vertical-align: -3px; cursor: pointer; }
body.rs-modern .rs-refine .chkChoice label { margin-left: .6rem; font-size: .9rem; cursor: pointer; text-transform: none; }
body.rs-modern .rs-refine-foot { margin: 1.2rem 0 0 !important; }
body.rs-modern .rs-refine-foot .btn { width: 100%; }
body.rs-modern .rs-sell { margin-top: 1.3rem; padding: 1.1rem 1.15rem; border-radius: var(--rs-r); background: var(--rs-tint); border: 1px solid color-mix(in srgb, var(--rs-primary) 16%, transparent); }
body.rs-modern .rs-sell h2 { font-size: .98rem; margin-bottom: .4rem; }
body.rs-modern #ResellerContent .rs-sell p { margin: 0; font-size: .86rem; color: var(--rs-muted); line-height: 1.6; }
body.rs-modern .rs-refine-backdrop { display: none; }
@media (min-width: 1024px) {
  body.rs-modern .rs-shop { flex-wrap: nowrap; }
  body.rs-modern .rs-refine { position: sticky; top: 112px; max-height: calc(100vh - 128px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 1023px) {
  body.rs-modern .rs-toolbar .rs-refine-btn { display: inline-flex; padding: .6rem 1.1rem; font-size: .84rem; }
  body.rs-modern .rs-refine {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 95; width: min(400px, 92vw); margin: 0 !important; border-radius: 0; border: 0; overflow-y: auto;
    background: var(--rs-surface); box-shadow: 0 30px 70px rgba(0, 0, 0, .25); transform: translateX(-104%); transition: transform .32s var(--rs-ease);
  }
  body.rs-modern .rs-refine.open { transform: translateX(0); }
  body.rs-modern .rs-refine-close { display: block; }
  body.rs-modern .rs-refine-backdrop { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.rs-modern .rs-refine-backdrop.show { opacity: 1; pointer-events: auto; }
  body.rs-modern.rs-drawer-open { overflow: hidden; }
  body.rs-modern .rs-shop-main { width: 100%; flex-basis: 100%; }
}

/* ---------- watch cards ---------- */
body.rs-modern .rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1.1rem; margin: 0; --bs-gutter-x: 0; --bs-gutter-y: 0; }
body.rs-modern .rs-grid > .rs-grid-item { width: auto; max-width: none; padding: 0; margin: 0 !important; flex: none; }
body.rs-modern .card.rs-card {
  position: relative; overflow: hidden; text-align: left; height: 100%;
  background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg); box-shadow: none;
}
body.rs-modern .card.rs-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .1); border-color: color-mix(in srgb, var(--rs-primary) 35%, transparent); }
body.rs-modern .card.rs-card .tile-img-wrap { position: relative; aspect-ratio: 1; background: #fff; display: grid; place-items: center; padding: 6%; overflow: hidden; height: auto; width: auto; }
body.rs-modern .card.rs-card .ProductImage { width: 100% !important; height: 100% !important; object-fit: contain; transition: transform .7s var(--rs-ease); border: 0; padding: 0; margin: 0; }
body.rs-modern .card.rs-card:hover .ProductImage { transform: scale(1.06); }
body.rs-modern .card.rs-card .top-left { display: none; }
body.rs-modern .rs-sold { position: absolute; top: .9rem; left: .9rem; z-index: 2; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .82); padding: .4rem .8rem; border-radius: 999px; }
body.rs-modern .card.rs-card .card-body { padding: 1rem 1.1rem 1.15rem; gap: 0; border-top: 1px solid var(--rs-line); }
body.rs-modern .rs-card-brand { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-accent); }
body.rs-modern .card.rs-card .card-title {
  font-family: var(--rs-font-heading); font-size: 1rem !important; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: .3rem 0 0 !important;
  color: var(--rs-body-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: none; min-height: 2.6em;
}
/* box and papers: a green tick when the watch has it, a red cross when it does not */
body.rs-modern .rs-card-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .7rem 0 0; }
.rs-chip { display: inline-flex; align-items: center; gap: .38rem; font-size: .72rem; font-weight: 600; line-height: 1; padding: .34rem .6rem .34rem .4rem; border-radius: 999px; white-space: nowrap; }
.rs-chip i { width: 15px; height: 15px; border-radius: 50%; flex: none; background-repeat: no-repeat; background-position: center; background-size: 9px 9px; }
.rs-chip.yes { color: var(--rs-yes, #15803d); background: color-mix(in srgb, var(--rs-yes, #15803d) 10%, transparent); }
.rs-chip.yes i { background-color: var(--rs-yes, #15803d); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.2 6.4l2.5 2.4 5-5.4'/></svg>"); }
.rs-chip.no { color: var(--rs-no, #c62828); background: color-mix(in srgb, var(--rs-no, #c62828) 9%, transparent); }
.rs-chip.no i { background-color: var(--rs-no, #c62828); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M3 3l6 6M9 3l-6 6'/></svg>"); }
body.rs-modern #ResellerContent .card.rs-card .card-text { font-family: var(--rs-font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; margin: .8rem 0 .95rem !important; color: var(--rs-body-fg); }
body.rs-modern #ResellerContent .card.rs-card .card-text strong { font-weight: 800; color: var(--rs-accent); }
body.rs-modern .card.rs-card .mt-auto .btn { width: 100%; padding: .75rem 1rem; box-shadow: none; }
body.rs-modern .rs-paging { padding: 1.8rem 0 0 !important; margin: 0; }
body.rs-modern .rs-paging > [class*="col-"] { padding: 0; }
body.rs-modern .rs-paging .form-label { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rs-muted); }
body.rs-modern .rs-paging .form-select { width: auto; background-color: var(--rs-surface); }
body.rs-modern .rs-paging .btn { padding: .72rem 1.3rem; box-shadow: none; }
@media (max-width: 767px) {
  body.rs-modern .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  body.rs-modern .card.rs-card .card-body { padding: .8rem .8rem .95rem; }
  body.rs-modern .card.rs-card .card-title { font-size: .88rem !important; }
  body.rs-modern #ResellerContent .card.rs-card .card-text { font-size: 1.02rem; margin: .6rem 0 .75rem !important; }
  body.rs-modern .card.rs-card .mt-auto .btn { padding: .62rem .8rem; font-size: .82rem; }
  body.rs-modern .rs-chip { font-size: .66rem; padding: .28rem .48rem .28rem .32rem; }
  body.rs-modern .rs-chip i { width: 13px; height: 13px; background-size: 8px 8px; }
}

/* ---------- opening section: headline, three featured watches, brands, assurances ---------- */
body.rs-modern .rs-opening {
  position: relative; max-width: var(--rs-max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.6rem, 6vw, 5.2rem) 0 clamp(2.4rem, 5vw, 4.2rem);
}
body.rs-modern .rs-opening-copy { min-width: 0; }
body.rs-modern .rs-opening h1 { font-size: clamp(2.4rem, 5.2vw, 4.3rem) !important; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; margin: 0 0 1.5rem; max-width: 13ch; text-transform: none; }
body.rs-modern .rs-opening h1:empty { display: none; }
body.rs-modern .rs-lead, body.rs-modern #IntroBlock.rs-lead { margin: 0 0 1.8rem; max-width: 54ch; }
body.rs-modern .rs-lead h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
body.rs-modern #ResellerContent .rs-lead p { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.7; color: var(--rs-muted); margin: 0; }
body.rs-modern .rs-opening-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2rem; }
body.rs-modern .rs-stats { list-style: none; margin: 0; padding: 0; display: inline-grid; grid-auto-flow: column; background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg); overflow: hidden; }
body.rs-modern .rs-stats li { padding: .95rem 1.4rem; display: grid; gap: .1rem; border-left: 1px solid var(--rs-line); }
body.rs-modern .rs-stats li:first-child { border-left: 0; }
body.rs-modern .rs-stats b { font-family: var(--rs-font-heading); font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
body.rs-modern .rs-stats span { font-size: .76rem; color: var(--rs-muted); white-space: nowrap; }

/* the stage: three watch cards fanned over a glow in the brand colour */
body.rs-modern .rs-stage { position: relative; min-height: clamp(380px, 38vw, 520px); }
body.rs-modern .rs-stage:empty { display: none; }
body.rs-modern .rs-stage::before {
  content: ""; position: absolute; inset: -16% -14% -20% -10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rs-primary) 46%, transparent), color-mix(in srgb, var(--rs-primary) 24%, transparent) 60%, transparent 100%);
  filter: blur(22px);
}
body.rs-modern #ResellerContent .rs-stage-card {
  position: absolute; display: block; width: 44%; text-decoration: none; color: var(--rs-body-fg);
  background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg); overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .16), 0 6px 16px rgba(0, 0, 0, .06);
  transition: transform .45s var(--rs-ease), box-shadow .35s var(--rs-ease);
}
body.rs-modern .rs-stage-1 { left: 28%; top: 6%; z-index: 3; }
body.rs-modern .rs-stage-2 { left: 0; top: 20%; z-index: 2; transform: rotate(-7deg) scale(.86); }
body.rs-modern .rs-stage-3 { right: 0; top: 24%; z-index: 1; transform: rotate(7deg) scale(.82); }
body.rs-modern .rs-stage-card:hover { transform: translateY(-8px) rotate(0) scale(1); z-index: 4; box-shadow: 0 40px 80px rgba(0, 0, 0, .22); }
body.rs-modern .rs-stage-img { display: block; aspect-ratio: 1; background: #fff; padding: 7%; }
body.rs-modern .rs-stage-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.rs-modern .rs-stage-meta { display: grid; gap: .15rem; padding: .8rem 1rem 1rem; border-top: 1px solid var(--rs-line); }
body.rs-modern .rs-stage-brand { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-accent); }
body.rs-modern .rs-stage-name { font-family: var(--rs-font-heading); font-size: .92rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.rs-modern .rs-stage-price { font-family: var(--rs-font-heading); font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 1000px) {
  body.rs-modern .rs-opening { grid-template-columns: 1fr; padding-top: 2.2rem; }
  body.rs-modern .rs-opening h1 { max-width: 18ch; }
  body.rs-modern .rs-stage { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  body.rs-modern .rs-stage::before { inset: -10% 0; }
  body.rs-modern #ResellerContent .rs-stage-card { position: relative; width: auto; left: auto; right: auto; top: auto; transform: none; box-shadow: 0 12px 28px rgba(0, 0, 0, .1); }
  body.rs-modern .rs-stage-card:hover { transform: translateY(-4px); }
  body.rs-modern .rs-stats { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  body.rs-modern .rs-stats li { padding: .8rem .9rem; }
  body.rs-modern .rs-stats span { white-space: normal; }
}
@media (max-width: 560px) {
  body.rs-modern .rs-opening-actions .btn { flex: 1 1 100%; }
  body.rs-modern .rs-stage-meta { padding: .55rem .6rem .7rem; }
  body.rs-modern .rs-stage-name { display: none; }
  body.rs-modern .rs-stage-price { font-size: .86rem; }
  body.rs-modern .rs-stats b { font-size: 1rem; }
  body.rs-modern .rs-stats span { font-size: .68rem; }
}

/* four assurances */
body.rs-modern .rs-trust { list-style: none; max-width: var(--rs-max); margin: 1.4rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--rs-tint); border: 1px solid color-mix(in srgb, var(--rs-primary) 14%, transparent); border-radius: var(--rs-r-lg); overflow: hidden; }
body.rs-modern .rs-trust li { display: flex; align-items: center; gap: .9rem; padding: 1.25rem 1.4rem; border-left: 1px solid color-mix(in srgb, var(--rs-primary) 14%, transparent); }
body.rs-modern .rs-trust li:first-child { border-left: 0; }
body.rs-modern .rs-trust svg { width: 28px; height: 28px; flex: none; color: var(--rs-accent); }
body.rs-modern .rs-trust b { display: block; font-family: var(--rs-font-heading); font-size: .92rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
body.rs-modern .rs-trust span { display: block; font-size: .8rem; color: var(--rs-muted); line-height: 1.4; margin-top: .1rem; }
@media (max-width: 1000px) { body.rs-modern .rs-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.rs-modern .rs-trust li:nth-child(odd) { border-left: 0; } body.rs-modern .rs-trust li:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--rs-primary) 14%, transparent); } }
@media (max-width: 520px) { body.rs-modern .rs-trust li { padding: 1rem; gap: .7rem; } body.rs-modern .rs-trust svg { width: 22px; height: 22px; } body.rs-modern .rs-trust span { display: none; } }

/* the stage cards: a link over the photo and details, and a round button in the top corner that swaps in another watch */
body.rs-modern #ResellerContent .rs-stage-link { display: block; text-decoration: none; color: var(--rs-body-fg); transition: opacity .28s ease; }
body.rs-modern .rs-stage-card.swap .rs-stage-link { opacity: 0; }
body.rs-modern .rs-stage-next {
  position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 36px; height: 36px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: var(--rs-body-fg);
  background: color-mix(in srgb, var(--rs-surface) 88%, transparent); border: 1px solid var(--rs-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s, color .2s, border-color .2s, transform .5s var(--rs-ease);
}
body.rs-modern .rs-stage-next:hover { background: var(--rs-primary); border-color: var(--rs-primary); color: var(--rs-on-primary); transform: rotate(180deg); }
body.rs-modern .rs-stage-next svg { width: 16px; height: 16px; display: block; }
/* a thin bar along the top of the front card counts down to the next change */
body.rs-modern .rs-stage-1::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--rs-primary); transform-origin: left; transform: scaleX(0); opacity: .85; }
body.rs-modern .rs-stage.ticking .rs-stage-1::after { animation: rs-stage-tick 60s linear infinite; }
@keyframes rs-stage-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { body.rs-modern .rs-stage.ticking .rs-stage-1::after { animation: none; } }

/* ---------- shared section heading ---------- */
body.rs-modern .rs-section { max-width: var(--rs-max); margin: 0 auto; padding: clamp(2.8rem, 6vw, 4.6rem) 0 0; }
body.rs-modern .rs-sec-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
body.rs-modern .rs-sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important; font-weight: 800; letter-spacing: -.035em; margin: 0; text-transform: none; }
body.rs-modern #ResellerContent .rs-sec-head p { margin: .6rem 0 0; font-size: 1.02rem; color: var(--rs-muted); }
body.rs-modern #ResellerContent .rs-sec-head .rs-eyebrow { margin-bottom: .7rem; }

/* ---------- shop by brand: a tile per brand with one of its watches ---------- */
body.rs-modern .rs-brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
body.rs-modern #ResellerContent .rs-brand-tile {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--rs-body-fg);
  background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg);
  transition: transform .25s var(--rs-ease), box-shadow .25s var(--rs-ease), border-color .25s;
}
body.rs-modern .rs-brand-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .1); border-color: color-mix(in srgb, var(--rs-primary) 35%, transparent); }
body.rs-modern .rs-brand-img { display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
body.rs-modern .rs-brand-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--rs-ease); }
body.rs-modern .rs-brand-tile:hover .rs-brand-img img { transform: scale(1.07); }
body.rs-modern .rs-brand-meta { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 .8rem; padding: 1rem 1.15rem 1.1rem; border-top: 1px solid var(--rs-line); }
body.rs-modern .rs-brand-meta b { font-family: var(--rs-font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
body.rs-modern .rs-brand-meta small { grid-column: 1; font-size: .8rem; color: var(--rs-muted); }
body.rs-modern .rs-brand-meta i { grid-column: 2; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rs-line-2); color: var(--rs-body-fg); transition: background .2s, color .2s, border-color .2s, transform .25s var(--rs-ease); }
body.rs-modern .rs-brand-meta i svg { width: 16px; height: 16px; }
body.rs-modern .rs-brand-tile:hover .rs-brand-meta i { background: var(--rs-primary); border-color: var(--rs-primary); color: var(--rs-on-primary); transform: translateX(3px); }
@media (max-width: 1000px) { body.rs-modern .rs-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } }
@media (max-width: 520px) { body.rs-modern .rs-brand-meta { padding: .75rem .8rem .85rem; } body.rs-modern .rs-brand-meta b { font-size: .92rem; } body.rs-modern .rs-brand-meta i { width: 30px; height: 30px; } }

/* ---------- featured watches ---------- */
body.rs-modern .rs-featured { position: relative; }
body.rs-modern .rs-featured::before { /* a soft panel behind the row, full width of the page */
  content: ""; position: absolute; z-index: 0; top: clamp(1.4rem, 3vw, 2.3rem); bottom: -1.5rem; left: 50%; width: 100vw; translate: -50% 0; background: var(--rs-soft);
}
body.rs-modern .rs-featured > * { position: relative; z-index: 1; }
body.rs-modern .rs-featured { padding-bottom: 1.5rem; }
body.rs-modern .rs-featured .rs-sec-head { padding-top: clamp(1.8rem, 4vw, 3rem); }
body.rs-modern .rs-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
body.rs-modern #ResellerContent .rs-feat-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--rs-body-fg);
  background: var(--rs-surface); border: 1px solid var(--rs-line); border-radius: var(--rs-r-lg);
  transition: transform .25s var(--rs-ease), box-shadow .25s var(--rs-ease), border-color .25s;
}
body.rs-modern .rs-feat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .1); border-color: color-mix(in srgb, var(--rs-primary) 35%, transparent); }
body.rs-modern .rs-feat-img { display: block; aspect-ratio: 1; background: #fff; padding: 5%; overflow: hidden; }
body.rs-modern .rs-feat-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .7s var(--rs-ease); }
body.rs-modern .rs-feat-card:hover .rs-feat-img img { transform: scale(1.06); }
body.rs-modern .rs-feat-body { display: flex; flex-direction: column; flex: 1; gap: .2rem; padding: 1rem 1.1rem 1.1rem; border-top: 1px solid var(--rs-line); }
body.rs-modern .rs-feat-name { font-family: var(--rs-font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.rs-modern .rs-feat-sub { font-size: .8rem; color: var(--rs-muted); line-height: 1.45; min-height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.rs-modern .rs-feat-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .8rem; }
body.rs-modern .rs-feat-price { font-family: var(--rs-font-heading); font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; }
body.rs-modern .rs-feat-ticks { display: inline-flex; gap: .3rem; }
body.rs-modern .rs-feat-more { display: flex; justify-content: center; padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 1000px) { body.rs-modern .rs-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } }
@media (max-width: 520px) { body.rs-modern .rs-feat-body { padding: .8rem; } body.rs-modern .rs-feat-name { font-size: .92rem; } body.rs-modern .rs-feat-sub { display: none; } body.rs-modern .rs-feat-price { font-size: 1rem; } }

/* ---------- header: Watches opens a panel of every brand ---------- */
body.rs-modern .rs-nav { position: static; } /* so the panel is placed against the floating bar, not the link */
body.rs-modern .rs-mega-wrap { display: inline-flex; position: static; }
body.rs-modern .rs-nav .rs-mega-trigger { gap: .4rem; }
body.rs-modern .rs-caret { width: 10px; height: 7px; transition: rotate .25s; }
body.rs-modern .rs-mega-trigger::before { content: ""; position: absolute; left: -1.2rem; right: -1.2rem; top: 100%; height: 3.6rem; } /* keeps the panel open while the pointer travels down to it */
body.rs-modern .rs-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 70; display: block; padding: 0 var(--rs-gutter);
  background: var(--rs-surface); border-top: 1px solid var(--rs-line); border-bottom: 1px solid var(--rs-line); box-shadow: 0 40px 70px rgba(0, 0, 0, .16);
  opacity: 0; visibility: hidden; translate: 0 -6px; pointer-events: none;
  transition: opacity .2s ease .14s, translate .25s var(--rs-ease) .14s, visibility .2s .14s;
}
body.rs-modern .rs-mega-wrap:hover .rs-mega, body.rs-modern .rs-mega-wrap:focus-within .rs-mega, body.rs-modern .rs-mega-wrap.open .rs-mega { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
body.rs-modern .rs-mega-wrap:hover .rs-caret, body.rs-modern .rs-mega-wrap.open .rs-caret { rotate: 180deg; }
body.rs-modern .rs-mega-wrap.closing .rs-mega { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* just chose a brand: fold away even though the pointer is still over it */
body.rs-modern .rs-mega-inner {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) 270px; gap: 2.2rem; align-items: stretch; text-align: left;
  max-width: var(--rs-max); margin: 0 auto; color: var(--rs-body-fg); padding: 2rem 0 2.2rem;
}
body.rs-modern .rs-mega-inner.rs-mega-short { grid-template-columns: minmax(0, 1fr) 270px; }
body.rs-modern .rs-mega-pop, body.rs-modern .rs-mega-more { display: flex; flex-direction: column; min-width: 0; }
body.rs-modern .rs-mega-more { padding-left: 2.2rem; border-left: 1px solid var(--rs-line); }
body.rs-modern .rs-mega-title { display: block; font-family: var(--rs-font-body); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-muted); margin: 0 0 1rem; }
body.rs-modern #SiteHeader .rs-mega a { color: var(--rs-body-fg) !important; text-decoration: none; opacity: 1; text-transform: none; letter-spacing: 0; }
body.rs-modern #SiteHeader .rs-mega a:not(.rs-mega-feature)::after { display: none; }   /* the menu's underline belongs to the top level items only */
/* popular brands: a small photo and the name */
body.rs-modern .rs-mega-tiles { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .7rem; }
body.rs-modern #SiteHeader .rs-mega a.rs-mega-tile {
  display: flex; align-items: center; gap: 1rem; min-width: 0; padding: .6rem 1rem .6rem .6rem; border-radius: 18px;
  background: var(--rs-surface); border: 1px solid var(--rs-line); white-space: normal;
  font-family: var(--rs-font-heading); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; text-transform: none;
  transition: border-color .2s, background .2s, transform .2s var(--rs-ease), box-shadow .2s;
}
body.rs-modern #SiteHeader .rs-mega a.rs-mega-tile:hover { background: var(--rs-tint); border-color: color-mix(in srgb, var(--rs-primary) 45%, transparent); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .07); }
body.rs-modern .rs-mega-thumb { flex: none; width: 68px; height: 68px; border-radius: 14px; overflow: hidden; background: #fff; display: grid; place-items: center; border: 1px solid var(--rs-line); }
body.rs-modern .rs-mega-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--rs-ease); }
body.rs-modern .rs-mega-tile:hover .rs-mega-thumb img { transform: scale(1.1); }
body.rs-modern .rs-mega-thumb i { font-style: normal; font-size: 1.2rem; font-weight: 800; color: var(--rs-muted); }
body.rs-modern .rs-mega-tile b { font-weight: 700; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
/* a few more, as a plain list */
body.rs-modern .rs-mega-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; }
body.rs-modern #SiteHeader .rs-mega-list a {
  display: block; padding: .5rem .7rem; margin-left: -.7rem; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--rs-font-body); font-size: .93rem; font-weight: 500; letter-spacing: 0; text-transform: none; background: none; transition: background .15s, padding-left .2s var(--rs-ease);
}
body.rs-modern #SiteHeader .rs-mega-list a:hover { background: var(--rs-tint); padding-left: 1rem; }
body.rs-modern #SiteHeader .rs-mega a.rs-mega-all { display: block; margin-top: auto; padding: 1rem 0 0; font-family: var(--rs-font-body); font-size: .78rem; font-weight: 500; color: var(--rs-muted) !important; background: none; border-radius: 0; white-space: normal; line-height: 1.4; }
body.rs-modern #SiteHeader .rs-mega a.rs-mega-all:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
body.rs-modern #SiteHeader .rs-mega a.rs-mega-feature { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; padding: 1.2rem; border-radius: var(--rs-r-lg); overflow: hidden; background: var(--rs-primary); color: var(--rs-on-primary) !important; }
body.rs-modern #SiteHeader .rs-mega a.rs-mega-feature::after { content: ""; position: absolute; inset: 0; left: 0; right: 0; top: 0; bottom: 0; height: auto; border-radius: 0; transform: none; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--rs-primary) 92%, #000) 100%); }
body.rs-modern .rs-mega-img { position: absolute; inset: 0; background: #fff; }
body.rs-modern .rs-mega-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--rs-ease); }
body.rs-modern .rs-mega-feature:hover .rs-mega-img img { transform: scale(1.06); }
body.rs-modern .rs-mega-cta { position: relative; z-index: 1; display: grid; gap: .1rem; }
body.rs-modern .rs-mega-cta b { font-family: var(--rs-font-heading); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
body.rs-modern .rs-mega-cta small { font-size: .8rem; opacity: .85; }
@media (max-width: 1000px) { body.rs-modern .rs-mega, body.rs-modern .rs-caret, body.rs-modern .rs-mega-trigger::before { display: none !important; } body.rs-modern .rs-mega-wrap { display: block; } }

/* heading above the watch grid */
body.rs-modern .rs-shop-head { max-width: var(--rs-max); margin: 0 auto; padding: clamp(2.4rem, 5vw, 4rem) 0 1.4rem; }
body.rs-modern .rs-shop-head .rs-eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-accent); }
body.rs-modern .rs-shop-head .rs-eyebrow::before { content: ""; width: 13px; height: 13px; flex: none; background: var(--rs-accent); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.9 6.6 4.4 10.1 12 12-7.6 1.9-11.1 5.4-12 12-.9-6.6-4.4-10.1-12-12C7.6 10.1 11.1 6.6 12 0z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.9 6.6 4.4 10.1 12 12-7.6 1.9-11.1 5.4-12 12-.9-6.6-4.4-10.1-12-12C7.6 10.1 11.1 6.6 12 0z'/></svg>") center / contain no-repeat; }
body.rs-modern .rs-shop-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem) !important; font-weight: 800; letter-spacing: -.035em; margin: 0; text-transform: none; }

/* floating WhatsApp button */
body.rs-modern .rs-wa-float { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff !important; box-shadow: 0 12px 30px rgba(37, 211, 102, .4); transition: transform .2s var(--rs-ease), box-shadow .2s; }
body.rs-modern .rs-wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 40px rgba(37, 211, 102, .5); }
body.rs-modern .rs-wa-float svg { width: 28px; height: 28px; }
body.rs-modern.rs-has-buybar .rs-wa-float { bottom: 5.4rem; }

/* watch page on phones: price and enquiry stay in reach */
body.rs-modern .rs-buybar { display: none; }
@media (max-width: 760px) {
  body.rs-modern .rs-buybar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: color-mix(in srgb, var(--rs-surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--rs-line); padding: .7rem var(--rs-gutter) calc(.7rem + env(safe-area-inset-bottom));
  }
  body.rs-modern .rs-buybar-name { display: block; font-size: .72rem; color: var(--rs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  body.rs-modern .rs-buybar b { font-family: var(--rs-font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
  body.rs-modern .rs-buybar .btn { padding: .8rem 1.3rem; white-space: nowrap; }
  body.rs-modern.rs-has-buybar footer.rs-footer { padding-bottom: 6rem !important; }
}

/* ---------- sell band (above the footer) ---------- */
body.rs-modern #footer-content { margin: 0 !important; padding: 0 !important; text-align: left; max-width: none; }
body.rs-modern .rs-band { position: relative; overflow: hidden; background: var(--rs-band-bg, var(--rs-primary)); color: var(--rs-band-fg, var(--rs-on-primary)); padding: clamp(2.2rem, 5vw, 3.6rem) var(--rs-gutter); }
body.rs-modern .rs-band::before {
  /* a soft sweep of light so the band is not a flat block */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--rs-band-fg, #fff) 14%, transparent), transparent 60%);
}
body.rs-modern .rs-band-inner { position: relative; max-width: var(--rs-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
body.rs-modern .rs-band-text { max-width: 640px; }
body.rs-modern .rs-band-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: .7rem; color: inherit; }
body.rs-modern .rs-band-eyebrow::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.9 6.6 4.4 10.1 12 12-7.6 1.9-11.1 5.4-12 12-.9-6.6-4.4-10.1-12-12C7.6 10.1 11.1 6.6 12 0z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0c.9 6.6 4.4 10.1 12 12-7.6 1.9-11.1 5.4-12 12-.9-6.6-4.4-10.1-12-12C7.6 10.1 11.1 6.6 12 0z'/></svg>") center / contain no-repeat; }
body.rs-modern .rs-band h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 .4rem; color: inherit !important; text-transform: none; }
body.rs-modern .rs-band p { margin: 0; font-size: 1rem; line-height: 1.6; opacity: .85; color: inherit !important; }
body.rs-modern .rs-band .rs-band-btn {
  background: var(--rs-band-btn-bg, var(--rs-on-primary)) !important; color: var(--rs-band-btn-fg, var(--rs-primary)) !important; border: 1px solid var(--rs-band-btn-bg, var(--rs-on-primary)) !important;
  padding: 1rem 1.8rem; font-size: .95rem; white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
body.rs-modern .rs-band .rs-band-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .22); }
body.rs-modern .rs-band .rs-band-btn span { transition: translate .2s var(--rs-ease); }
body.rs-modern .rs-band .rs-band-btn:hover span { translate: 4px 0; }

/* ---------- footer ---------- */
body.rs-modern footer.rs-footer {
  padding: clamp(3rem, 6vw, 4.6rem) var(--rs-gutter) 1.6rem !important; margin: 0; min-height: 0; height: auto !important; text-align: left;
  color: var(--rs-footer-fg); border-top: 1px solid color-mix(in srgb, var(--rs-footer-fg) 10%, transparent);
  --rs-foot-line: color-mix(in srgb, var(--rs-footer-fg) 14%, transparent);
  --rs-foot-muted: color-mix(in srgb, var(--rs-footer-fg) 62%, transparent);
}
body.rs-modern footer.rs-footer > * { max-width: var(--rs-max); margin-left: auto; margin-right: auto; }
body.rs-modern .rs-foot-top { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 2.4rem clamp(1.5rem, 4vw, 4rem); align-items: start; }
body.rs-modern .rs-foot-name { display: inline-block; font-family: var(--rs-font-heading); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-decoration: none; margin-bottom: 1rem; }
body.rs-modern .rs-footer h3 { font-family: var(--rs-font-body); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rs-foot-muted); margin: 0 0 1rem; }
body.rs-modern .rs-footer h3:empty { display: none; }
body.rs-modern .rs-foot-about h3 { margin-bottom: .5rem; }
body.rs-modern .rs-foot-about p { font-size: .94rem; line-height: 1.75; max-width: 46ch; margin: 0 0 1.4rem; opacity: .86; white-space: pre-line; }
body.rs-modern .rs-foot-social { display: flex; flex-wrap: wrap; gap: .55rem; }
body.rs-modern .rs-foot-social a {
  width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--rs-foot-line); transition: background .2s, border-color .2s, transform .2s, color .2s;
}
body.rs-modern .rs-foot-social a:hover { background: var(--rs-footer-fg); border-color: var(--rs-footer-fg); color: var(--rs-footer-bg) !important; transform: translateY(-2px); }
body.rs-modern .rs-foot-social svg { width: 18px; height: 18px; display: block; }
body.rs-modern .rs-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
body.rs-modern .rs-foot-col li { font-size: .94rem; line-height: 1.4; }
body.rs-modern .rs-foot-col li a { text-decoration: none; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--rs-ease); padding-bottom: 2px; overflow-wrap: anywhere; }
body.rs-modern .rs-foot-col li a:hover { background-size: 100% 1px; }
body.rs-modern .rs-foot-label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-foot-muted); margin-bottom: .15rem; }
body.rs-modern .rs-foot-visit p { font-size: .94rem; line-height: 1.7; margin: 0; opacity: .9; white-space: pre-line; }
body.rs-modern .rs-foot-hours { margin-top: 1.6rem; }
body.rs-modern .rs-foot-address[style*="none"] + .rs-foot-hours { margin-top: 0; }
body.rs-modern .rs-foot-visit:not(:has(> div:not([style*="none"]))) { display: none; }
body.rs-modern .rs-foot-note { margin: 2.4rem auto 0 !important; padding-top: 1.6rem; border-top: 1px solid var(--rs-foot-line); font-size: .92rem; line-height: 1.7; opacity: .9; white-space: pre-line; }
body.rs-modern .rs-foot-bottom {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 2rem; align-items: center;
  margin-top: clamp(2.2rem, 4vw, 3.2rem) !important; padding-top: 1.4rem; border-top: 1px solid var(--rs-foot-line);
}
body.rs-modern .rs-foot-copy { margin: 0; font-size: .82rem; font-weight: 600; }
body.rs-modern .rs-foot-up { justify-self: end; display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: .5rem .9rem; border: 1px solid var(--rs-foot-line); border-radius: 999px; transition: background .2s, border-color .2s; }
body.rs-modern .rs-foot-up:hover { border-color: var(--rs-footer-fg); }
body.rs-modern .rs-foot-legal { grid-column: 1 / -1; margin: 0; font-size: .74rem; line-height: 1.6; color: var(--rs-foot-muted) !important; max-width: 110ch; }
body.rs-modern .rs-foot-legal:empty { display: none; }
@media (max-width: 1000px) {
  body.rs-modern .rs-foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.rs-modern .rs-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.rs-modern .rs-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
  body.rs-modern .rs-foot-visit { grid-column: 1 / -1; }
  body.rs-modern .rs-band-inner { flex-direction: column; align-items: flex-start; }
  body.rs-modern .rs-band .rs-band-btn { width: 100%; }
  body.rs-modern .rs-foot-bottom { grid-template-columns: 1fr; }
  body.rs-modern .rs-foot-up { justify-self: start; }
}
/* classic look: footer column headings take the footer text colour (the theme's footer rule only covers h1, h2, p and a) */
.rs-footer-grid h3 { color: var(--rs-footer-fg); }

/* ==========================================================================
   The watch page (new markup on both looks)
   ========================================================================== */
.rs-pdp.single_product { background: transparent; padding: 0 0 2.5rem; }
.rs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .78rem; padding: 1rem 0 .4rem; opacity: .8; }
.rs-crumbs a { text-decoration: none; font-weight: 500 !important; }
.rs-crumbs .sep { opacity: .5; }
.rs-crumbs span:last-child { font-weight: 600; }
.rs-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; padding-top: .6rem; }
@media (max-width: 900px) { .rs-detail { grid-template-columns: 1fr; } }
@media (min-width: 901px) { body.rs-modern .rs-gallery { position: sticky; top: calc(var(--rs-header-h, 76px) + 1.2rem); } }

.rs-gallery-main { position: relative; aspect-ratio: 1; background: #fff; border-radius: 18px; overflow: hidden; margin-bottom: .8rem; cursor: zoom-in; border: 1px solid rgba(0, 0, 0, .07); }
.rs-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .25s; }
.rs-gallery-main img.swap { opacity: .35; }
.rs-gallery-main.zooming img { transform: scale(1.9); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.rs-gallery-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .94); color: #111; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  opacity: 0; transition: opacity .2s, background .2s, color .2s; cursor: pointer;
}
.rs-gallery-nav svg { width: 18px; height: 18px; }
.rs-gallery-nav.prev { left: 1rem; } .rs-gallery-nav.next { right: 1rem; }
.rs-gallery-main:hover .rs-gallery-nav { opacity: 1; }
.rs-gallery-nav:hover { background: var(--rs-primary, #111); color: var(--rs-on-primary, #fff); }
.rs-gallery-count { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; font-size: .72rem; font-weight: 600; background: rgba(255, 255, 255, .92); color: #222; padding: .3rem .65rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.rs-sold-ribbon { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .85); padding: .45rem .95rem; border-radius: 999px; }
.rs-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem; }
.rs-gallery-thumbs button { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #fff; opacity: .7; cursor: pointer; transition: opacity .2s, border-color .2s, transform .2s; }
.rs-gallery-thumbs button.active, .rs-gallery-thumbs button:hover { opacity: 1; border-color: var(--rs-primary, #111); }
.rs-gallery-thumbs button:hover { transform: translateY(-2px); }
.rs-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-gallery-caption { display: flex; align-items: center; gap: .45rem; font-size: .76rem; opacity: .7; margin: .9rem 0 0; }
.rs-gallery-caption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rs-accent, #111); flex: none; }
@media (max-width: 600px) {
  .rs-gallery-thumbs { display: flex; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
  .rs-gallery-thumbs button { flex: 0 0 64px; }
  .rs-gallery-nav { opacity: 1; width: 38px; height: 38px; }
}

.rs-detail-info .rs-card-brand { display: block; margin-bottom: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-accent); }
.rs-pdp .product_name { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 .5rem; }
.rs-detail-ref { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; opacity: .7; margin: 0 0 1rem; }
.rs-detail-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .4rem .9rem .4rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--rs-accent, #111) 12%, transparent); margin-bottom: .9rem; }
.rs-detail-status.sold { background: #fdecea; color: #b42318; }
.rs-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-accent, #111); display: inline-block; flex: none; }
.rs-detail-status.sold .rs-pulse { background: #b42318; }
.rs-pdp .product_price { display: block; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; margin: 0 0 .2rem; clear: none; }
.rs-pdp .product_price.poa { font-size: 1.4rem; color: var(--rs-accent); }
.rs-pdp .product_price.sold { opacity: .6; text-decoration: line-through; text-decoration-thickness: 2px; }
.rs-detail-price-note { font-size: .8rem; opacity: .7; margin: 0 0 1.4rem; }
.rs-detail-actions { display: grid; gap: .6rem; margin: 0 0 1.8rem; }
.rs-detail-actions .btn { padding: .95rem 1.4rem; font-size: .95rem; }
.rs-detail-actions .btn svg { width: 17px; height: 17px; flex: none; }
.rs-btn-wa { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }
.rs-btn-wa:hover { background: #1fbd5a !important; }
.rs-key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.rs-key-facts li { background: color-mix(in srgb, var(--rs-body-fg, #000) 5%, var(--rs-surface, #fff)); border-radius: 12px; padding: .7rem .85rem; display: grid; gap: .1rem; }
.rs-key-facts .k { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.rs-key-facts .v { font-weight: 700; font-size: .9rem; line-height: 1.25; letter-spacing: -.01em; }
.rs-detail-section-title { font-size: 1.1rem !important; letter-spacing: -.02em; margin: 1.6rem 0 .7rem; font-weight: 700; }
.rs-detail-desc p { font-size: .94rem; line-height: 1.75; opacity: .9; }
.rs-enquire { margin-top: 2.2rem; padding: 1.4rem 1.2rem; border-radius: 18px; background: var(--rs-surface, #fff); border: 1px solid rgba(0, 0, 0, .07); }
.rs-enquire p { margin: .3rem 0; }
.rs-back { margin-top: 1.2rem; }
body.rs-classic .rs-enquire, body.rs-classic .rs-gallery-main, body.rs-classic .rs-key-facts li { border-radius: 4px; }
body.rs-modern .rs-spec { border: 0; margin: 0; --bs-table-striped-bg: transparent; --bs-table-bg: transparent; }
body.rs-modern .rs-spec > :not(:first-child) { border-top: 0; }
body.rs-modern .rs-spec td { border: 0; border-bottom: 1px solid var(--rs-line); padding: .72rem .2rem; font-size: .9rem; vertical-align: top; }
body.rs-modern .rs-spec td:first-child { color: var(--rs-muted); font-weight: 500; width: 40%; }
body.rs-modern .rs-spec td:last-child { font-weight: 600; }
body.rs-modern .rs-enquire { text-align: center; }
body.rs-modern .rs-enquire p { font-size: 1rem !important; }
body.rs-modern .rs-enquire #BACSPara { font-size: .82rem !important; opacity: .7; }

/* ==========================================================================
   About us page (About.aspx, written in Site Studio; DCF's own page uses the
   same layout). Works on both looks: the story in a comfortable reading
   column, the photographs beside it, a closing invitation underneath.
   ========================================================================== */
.rs-about { max-width: var(--rs-max, 1400px); margin: 0 auto; padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); text-align: left; }
.rs-about-head { max-width: 780px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.rs-about-head h1 { font-size: clamp(2.2rem, 5vw, 3.8rem) !important; font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0 0 1rem; text-transform: none; }
#ResellerContent .rs-about-intro { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; margin: 0; opacity: .78; }
.rs-about-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: start; }
.rs-about-body.rs-about-nophotos { grid-template-columns: minmax(0, 760px); }
.rs-about-text { font-size: 1.04rem; line-height: 1.8; }
#ResellerContent .rs-about-text p { margin: 0 0 1.25em; }
#ResellerContent .rs-about-text p:last-child { margin-bottom: 0; }
.rs-about-text:empty { display: none; }
/* photographs are shown whole, never cropped: these are pictures of people and shop fronts */
.rs-about-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.rs-about-photos figure { margin: 0; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--rs-body-fg, #000) 6%, transparent); box-shadow: 0 20px 44px rgba(0, 0, 0, .12); }
.rs-about-photos figure:first-of-type { grid-column: 1 / -1; }
.rs-about-photos img { display: block; width: 100%; height: auto; max-width: none; }
.rs-about-photos-2 figure:first-of-type { grid-column: auto; } /* two photos sit side by side */
.rs-about-photos-0 { display: none; }
.rs-about-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem 3rem; flex-wrap: wrap; margin-top: clamp(2.4rem, 5vw, 4rem); padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 22px; background: var(--rs-tint, color-mix(in srgb, var(--rs-primary, #111) 8%, #fff)); border: 1px solid color-mix(in srgb, var(--rs-primary, #111) 14%, transparent); }
.rs-about-cta h2 { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; font-weight: 800; letter-spacing: -.03em; margin: 0 0 .3rem; text-transform: none; }
#ResellerContent .rs-about-cta p { margin: 0; opacity: .75; }
.rs-about-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
body:not(.rs-modern) .rs-about .rs-eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .8rem; opacity: .7; }
@media (max-width: 900px) {
  .rs-about-body { grid-template-columns: 1fr; }
  .rs-about-photos { order: -1; }
}