/* CSS also declares the scheme (belt-and-suspenders with the <meta
   name="color-scheme"> tag in header.php) — stops browser auto-dark-mode
   from repainting plain white sections as dark grey-on-dark grey. */
:root { color-scheme: light only; }

/* =================================================
   HOMEPAGE — base
================================================= */

.page-template-page-home .content-area {
    margin-top: 0;
    padding: 0;
}

.home-section {
    padding: 52px 32px;
}

/* =================================================
   HOMEPAGE — tile finder
================================================= */

/* Tile Finder — multi-select pill button groups */
.home-finder-groups {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
    text-align: left;
}

.finder-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.finder-btn {
    display: inline-flex !important;
    align-items: center;
    padding: 7px 14px;
    border: 1.5px solid #d4d0cb !important;
    border-radius: 100px !important;
    background: #fff !important;
    background-image: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555 !important;
    cursor: pointer;
    transition: border-color 0.17s, background-color 0.17s, color 0.17s;
    user-select: none;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: none !important;
    box-shadow: none !important;
}

.finder-btn:hover {
    border-color: #ad1616 !important;
    color: #ad1616 !important;
    background-color: #fff8f8 !important;
}

.finder-btn--active {
    border-color: #ad1616 !important;
    background-color: #ad1616 !important;
    background-image: none !important;
    color: #fff !important;
}

.finder-btn--active:hover {
    border-color: #8a1010 !important;
    background-color: #8a1010 !important;
    color: #fff !important;
}

/* Finder action row: Search + Reset */
.finder-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}

.finder-search-btn {
    display: inline-flex !important;
    align-items: center;
    padding: 12px 28px !important;
    background-color: #ad1616 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 5px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    cursor: pointer;
    transition: background-color 0.18s, opacity 0.18s;
    text-shadow: none !important;
    box-shadow: none !important;
}

.finder-search-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.finder-search-btn:not(:disabled):hover {
    background-color: #8a1010 !important;
}

.finder-reset-btn {
    background: none !important;
    background-image: none !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #999 !important;
    cursor: pointer;
    padding: 0 !important;
    text-decoration: underline;
    text-decoration-color: #ccc;
    transition: color 0.15s;
    text-shadow: none !important;
    box-shadow: none !important;
}

.finder-reset-btn:hover {
    color: #555 !important;
    text-decoration-color: #999;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .home-finder-groups {
        gap: 14px;
    }

    .finder-btn {
        font-size: 12px !important;
        padding: 6px 11px;
    }

    .finder-search-btn {
        padding: 11px 22px !important;
        font-size: 12px !important;
    }
}

.home-finder {
    background: #fff;
    padding: 56px 32px 60px;
    border-bottom: 1px solid #e8e5e1;
}

.home-finder-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.home-finder-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 10px;
}

.home-finder-heading {
    font-size: 28px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 0 0 30px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Search bar */
.home-finder-search {
    margin-bottom: 24px;
}

.home-finder-input-wrap {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    height: 54px;
    border: 2px solid #e0e0e0;
}

.home-finder-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: #fff !important;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    color: #1C1B1B !important;
    padding: 0 18px;
    height: 54px;
    min-width: 0;
}

.home-finder-input::placeholder {
    color: #bbb;
}

.home-finder-submit {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    background-color: #ad1616 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 3px 3px 0 !important;
    padding: 0 24px !important;
    height: 54px;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.home-finder-submit:hover {
    background-color: #8a1010 !important;
    color: #fff !important;
}

/* Divider */
.home-finder-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 22px;
    color: #666;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.home-finder-divider::before,
.home-finder-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

/* Dropdown row */
.home-finder-selects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.home-finder-select-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.home-finder-select-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #888;
}

.home-finder-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 46px;
    padding: 0 40px 0 16px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #1C1B1B;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.home-finder-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ad1616;
}

.home-finder-select option {
    background: #fff;
    color: #1C1B1B;
}

/* Mobile */
@media (max-width: 767px) {
    .home-finder {
        padding: 40px 20px 44px;
    }

    .home-finder-heading {
        font-size: 22px;
        margin-bottom: 22px;
    }

    .home-finder-selects {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-finder-input-wrap {
        height: 48px;
    }

    .home-finder-input {
        height: 48px;
        font-size: 14px;
    }

    .home-finder-submit {
        height: 48px;
        padding: 0 16px;
        font-size: 12px;
    }

    .home-finder-submit span {
        display: none;
    }

    .home-finder-submit svg {
        width: 18px;
        height: 18px;
    }
}

/* =================================================
   SEARCH AUTOCOMPLETE DROPDOWN
================================================= */

.uptiles-suggest-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 9999;
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.uptiles-suggest-item {
    padding: 11px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #1C1B1B;
    cursor: pointer;
    border-bottom: 1px solid #f0eeec;
    transition: background 0.1s, color 0.1s;
}

.uptiles-suggest-item:last-child {
    border-bottom: none;
}

.uptiles-suggest-item:hover,
.uptiles-suggest-item.is-active {
    background: #F7F5F2;
    color: #ad1616;
}

/* "Did you mean?" suggestion tile grid */
.search-suggestions-grid {
    margin-top: 16px !important;
}

/* Ensure .myButton used as <a> always shows white text */
a.myButton,
a.myButton:visited {
    color: #ffffff !important;
}

.search-back-btn {
    margin-top: 24px;
}

/* =================================================
   HOMEPAGE — section title separator
================================================= */

.home-section-title {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #1C1B1B;
    margin: 0 0 36px;
    white-space: nowrap;
}

.home-section-title::before,
.home-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #D4CFC9;
}

.home-category-grid + .home-section-title {
    margin-top: 52px;
}

/* =================================================
   HOMEPAGE — category tile grid
================================================= */

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.home-category-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    text-decoration: none !important;
    background: #111;
}

.home-category-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0)   40%,
        rgba(0,0,0,0.62) 100%
    );
    transition: opacity 0.4s ease;
    z-index: 1;
}

.home-category-tile:hover::after {
    opacity: 0.75;
}

.home-category-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(0.92);
}

.home-category-tile:hover .home-category-img {
    transform: scale(1.06);
    filter: brightness(1.0);
}

.home-category-title {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    z-index: 2;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: letter-spacing 0.35s ease;
}

.home-category-tile:hover .home-category-title {
    letter-spacing: 2.8px;
}

@media (max-width: 900px) {
    .home-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .home-section {
        padding: 36px 16px;
    }
    .home-category-grid {
        gap: 8px;
    }
    .home-category-title {
        font-size: 11px;
        letter-spacing: 1.5px;
        bottom: 10px;
        left: 10px;
    }
}

/* =================================================
   HOMEPAGE — about / SEO text
================================================= */

.home-about {
    background: #F7F5F2;
    padding: 64px 32px;
}

.home-about-inner {
    max-width: 740px;
    margin: 0 auto;
    text-align: center;
}

.home-about-h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1C1B1B;
    line-height: 1.25;
    margin-bottom: 4px;
}

.home-about-inner h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1C1B1B;
    margin: 32px 0 8px;
}

.home-about-inner h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888;
    margin: 0 0 20px;
}

.home-about-inner p {
    font-size: 15px;
    color: #555;
    line-height: 1.85;
    margin-bottom: 0;
}

.home-about-inner hr {
    border: none;
    border-top: 1px solid #E0DDD8;
    margin: 32px 0;
}

.home-about-inner a {
    color: #1C1B1B;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-about-inner a:hover {
    color: #ad1616;
}

@media (max-width: 767px) {
    .home-about {
        padding: 44px 20px;
    }
    .home-about-h1 {
        font-size: 22px;
    }
    .home-about-inner h2 {
        font-size: 16px;
    }
}

/* =================================================
   HOMEPAGE — news grid
================================================= */

.home-news-section-title {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #888;
    margin: 52px 0 28px;
    white-space: nowrap;
}

.home-news-section-title::before,
.home-news-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E0DDD8;
}

.home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home-news-item {
    display: block;
    text-decoration: none !important;
    color: #1C1B1B;
    transition: transform 0.3s ease;
}

.home-news-item:hover {
    transform: translateY(-4px);
}

.home-news-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 5px;
    margin-bottom: 12px;
}

.home-news-title {
    font-size: 14px;
    font-weight: 600;
    color: #1C1B1B;
    line-height: 1.45;
    margin: 0;
    transition: color 0.2s;
}

.home-news-item:hover .home-news-title {
    color: #ad1616;
}

@media (max-width: 767px) {
    .home-news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .home-news-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================
   HOMEPAGE — showroom CTA
================================================= */

.home-cta {
    background: #1C1B1B;
    color: #fff;
    text-align: center;
    padding: 60px 32px;
}

.home-cta-inner {
    max-width: 580px;
    margin: 0 auto;
}

.home-cta strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.3;
}

.home-cta p {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    line-height: 1.8;
    margin-bottom: 10px;
}

.home-cta a {
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-cta a:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .home-cta {
        padding: 44px 20px;
    }
    .home-cta strong {
        font-size: 18px;
    }
}

/* =================================================
   (existing styles below)
================================================= */

.wish-text{
	position: relative;
    left: -43px;
}

.wish-remove-text{
	position: relative;
    left: -32px;
}

.uptiles-list {
  display: flex;
  flex-wrap: wrap;
}

.uptiles-list-item {
  margin: 0.5em 10px;
  height: auto;
}

@media all and (min-width: 40em) {
  .uptiles-list-item {
    width: 50%;
    
  }
}
@media all and (min-width: 60em) {
  .uptiles-list-item {
    width: 33.33%;
  }
}


.uptiles-list-content {
   display: flex;
   flex-direction: column;
   background: transparent !important;
   padding: 0 !important;
   width: 100%;
}
.uptiles-list-content p {
  flex: 1 0 auto;
}

.uptiles-list-container{
    display: flex;
   flex-direction: column;
}

.uptiles-list-bottom {
    border: 1px solid blue;
    margin-top: auto;
}

.wishlist-item-heading{
    padding-left: 10px;
}

.vc_custom_1586397690439{
	display: none!important;
}

/********************************
 FINAL HEADER LAYOUT
********************************/

/* Thin black bar */
.header-top {
    background: #1C1B1B;
    padding: 6px 0;
}

/* Make container full width for logo edge */
.header-top .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* Header layout */
.header-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 20px;
}

/* LOGO – far left */
.header-logo {
    grid-row: 1 / span 2;
    justify-self: start;
}

.header-logo img {
    max-height: 80px;
    width: auto;
    display: block;
}

/* CONTACT INFO – top left, next to logo */
.header-contact {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}

.header-contact a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.header-contact .address {
    line-height: 1.2;
}

.header-contact small {
    opacity: 0.85;
}

/* MENU – perfectly centered */
.main-navigation {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    text-align: center;
    width: 100%;
}

.main-navigation > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/********************************
 MOBILE SAFETY
********************************/
@media (max-width: 991px) {
    .header-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
    }

    .header-logo {
        grid-row: 1;
        justify-self: center;
    }

    .header-contact {
        grid-row: 2;
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-navigation {
        grid-row: 3;
    }
}

/********************************
 FULL WIDTH PAGE CONTENT
********************************/

/* Force full width layout */
.container,
.container-fluid {
    max-width: 100% !important;
    padding-left: 30px;
    padding-right: 30px;
}

/* Slider / hero full width */
.vc_row,
.wpb_row,
.wpb_content_element {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove WPBakery side gaps */
.vc_row-fluid {
    width: 100% !important;
}

/********************************
 REMOVE PAGE SIDE GUTTERS
********************************/

.site-content.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fix rows inside */
.site-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/********************************
 HEADER FULL WIDTH FIX
********************************/

/* Break header out of container */
.header-top .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
}

/* Header layout */
.header-inner {
    display: grid;
    grid-template-columns: auto 1fr minmax(280px, auto);
    grid-template-rows: auto auto;
    align-items: center;
}

/********************************
 LOGO – TRUE FAR LEFT
********************************/

.header-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-left: 0 !important;
}

.header-logo img {
    display: block;
}

/********************************
 CONTACT INFO – TOP LEFT
********************************/

.header-contact {
    grid-column: 2 / 4;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 6px;
    font-size: 13px;
}

/********************************
 FIX HEADER CONTACT ALIGNMENT
********************************/

.header-contact {
    display: flex;
    align-items: baseline;
    gap: 24px;
}

.header-contact .address {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 1.1;
}

.header-contact .address br {
    display: none;
}

.header-contact .address small {
    font-size: 11px;
    opacity: 0.85;
}

/********************************
 ALIGN PHONE WITH ADDRESS
********************************/

/* Contact wrapper */
.header-contact {
    display: flex !important;
    align-items: baseline !important;
    gap: 24px;
}

/* Phone */
.header-contact .phone {
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap;
}

/* Address block */
.header-contact .address {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    line-height: 1.2;
    margin-top: 0 !important;
}

/* Remove vertical offset caused by <small> */
.header-contact .address small {
    margin-top: 2px;
    display: block;
}

/********************************
 STICKY HEADER
********************************/

/* Sticky header container */
.header-top {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #111; /* keep solid so content doesn't show through */
}

/* Fix WordPress admin bar overlap */
body.admin-bar .header-top {
    top: 32px;
}

/* Smooth scroll spacing so content isn't hidden */
#content {
    padding-top: 90px;
}

/********************************
 HEADER SEARCH BAR MOVE
********************************/

/* Move search into header */
.tile-search-wrapper,
.tile-search,
.search-wrapper {
    position: absolute;
    top: 50%;
    right: -80px;
    transform: translateY(50%);
    max-width: 280px;
    width: 100%;
    z-index: 10000;
}

/* Style the input to fit header */
.tile-search-wrapper input,
.tile-search input,
.search-wrapper input {
    height: 36px;
    font-size: 13px;
    border-radius: 20px;
    padding: 0 14px;
}

/* Hide original search spacing */
.tile-search-section,
.tile-search-container {
    display: none;
}

.header-inner {
    position: relative;
}

/********************************
 HEADER SEARCH – SIZE & SPACING
********************************/

.header-search {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    width: 100%;
}

/* =================================================
   HEADER SEARCH — native form
================================================= */

.header-search-form {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 6px;
    height: 40px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.header-search-form:focus-within {
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}

.header-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    padding: 0 10px 0 16px;
    width: 260px;
    height: 40px;
}

.header-search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.header-search-btn {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.25);
    border-radius: 0;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    padding: 0 14px;
    height: 40px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

.header-search-btn:hover {
    background: transparent;
    color: #ffffff;
}

@media (max-width: 767px) {
    .header-search-input {
        width: 110px;
        font-size: 12px;
    }
}

/* =================================================
   KILL JQUERY UI BUTTON OVERRIDES ON OUR ELEMENTS
   (accordion enqueue pulls in jQUI which styles buttons)
================================================= */

.header-search-btn,
.sidebar-search-btn,
.home-finder-submit,
.brand-btn,
.enquire-btn,
.collection-btn,
input[type="submit"],
button[type="submit"],
button[type="button"] {
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-family: 'Jost', sans-serif !important;
}

.brand-btn,
.enquire-btn,
.collection-btn {
    background-color: #ad1616 !important;
    color: #fff !important;
}

.brand-btn:hover,
.enquire-btn:hover,
.collection-btn:hover {
    background-color: #8a1010 !important;
    color: #fff !important;
}

.header-search-btn {
    background: transparent !important;
    color: rgba(255,255,255,0.75) !important;
    border-radius: 0 !important;
}

.header-search-btn:hover {
    background: transparent !important;
    color: #ffffff !important;
}

.sidebar-search-btn {
    background: #1C1B1B !important;
    color: #ffffff !important;
    border-radius: 5px !important;
}

.sidebar-search-btn:hover {
    background: #ad1616 !important;
}

/* home-finder-submit — styled in home-finder block above */

/* =================================================
   SEARCH RESULTS PAGE
================================================= */

.search-results-page {
    padding: 0 30px 60px;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Results bar */
.search-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 22px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 36px;
}

.search-results-meta {
    font-size: 14px;
    color: #777;
    letter-spacing: 0.02em;
}

.search-results-count {
    font-size: 22px;
    font-weight: 700;
    color: #1C1B1B;
    margin-right: 8px;
    letter-spacing: -0.01em;
}

.search-results-for {
    font-size: 14px;
    color: #888;
}

.search-results-for em {
    font-style: normal;
    color: #1C1B1B;
    font-weight: 600;
}

/* Sort control */
.search-results-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #aaa;
}

.search-results-sort select {
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 32px 9px 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    color: #333;
    transition: border-color 0.2s;
}

.search-results-sort select:focus {
    outline: none;
    border-color: #1C1B1B;
}

/* Layout: sidebar left, results right.
   minmax(0,…) everywhere: bare 1fr tracks refuse to shrink below the
   content's intrinsic width, and 980px-wide product images were blowing
   the grid past the viewport — unequal columns, staggered rows, cards
   pushed off-screen (worst on image-heavy categories like Vanities). */
.search-results-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* Tile grid inside results */
.search-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-tile-item {
    margin: 0;
    min-width: 0;
}

.search-tile-item .tile-card {
    display: block;
    text-decoration: none;
}

.search-tile-item .tile-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 5px;
    background: #f2f2f2;
    transition: box-shadow 0.3s ease;
}

.search-tile-item:hover .tile-image {
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.search-tile-item .tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: grayscale(20%);
}

.search-tile-item:hover .tile-image img {
    transform: scale(1.04);
    filter: grayscale(0%);
}

/* Tile name label */
.tile-meta {
    padding: 10px 2px 0;
}

.tile-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1C1B1B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.search-tile-item:hover .tile-name {
    color: #ad1616;
}

/* No results state */
.search-no-results {
    padding: 80px 0;
    text-align: center;
}

.search-no-results-heading {
    font-size: 22px;
    font-weight: 600;
    color: #1C1B1B;
    margin-bottom: 10px;
}

.search-no-results-heading em {
    font-style: normal;
    color: #ad1616;
}

.search-no-results-hint {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* Sidebar */
.search-sidebar {
    position: sticky;
    top: 100px;
}

.search-sidebar-search {
    margin-bottom: 28px;
}

/* Filter label */
.filter-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #bbb;
    margin: 0 0 12px;
}

/* Details/summary accordion */
.filter-group details {
    border-bottom: 1px solid #ebebeb;
}

.filter-group details:first-of-type {
    border-top: 1px solid #ebebeb;
}

.filter-group summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1C1B1B;
    cursor: pointer;
    user-select: none;
}

.filter-group summary::-webkit-details-marker { display: none; }

.filter-group summary::after {
    content: '+';
    font-size: 17px;
    font-weight: 300;
    color: #bbb;
    line-height: 1;
}

.filter-group details[open] > summary::after {
    content: '−';
}

.filter-group details ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.filter-group details ul li {
    margin: 0;
    padding: 0;
}

.filter-group details ul li a {
    display: block;
    font-size: 13px;
    color: #555;
    padding: 5px 0;
    text-decoration: none;
    transition: color 0.18s;
}

.filter-group details ul li a:hover {
    color: #ad1616;
}

.filter-group details ul li a.filter-active {
    color: #ad1616;
    font-weight: 700;
}

.filter-group details ul li a.filter-clear {
    color: #bbb;
    font-size: 11px;
    margin-top: 4px;
}

.filter-group details ul li a.filter-clear:hover {
    color: #ad1616;
}

.filter-count {
    color: #bbb;
    font-size: 11px;
    font-weight: 400;
    margin-left: 3px;
}

.filter-active .filter-count {
    color: rgba(173,22,22,0.6);
}

.filter-remove {
    margin-left: 5px;
    opacity: 0.5;
    font-size: 12px;
    font-weight: 300;
}

.filter-active-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ad1616;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Tile grid pagination */
.tile-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #f0eeec;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1C1B1B;
    text-decoration: none;
    background: #fff;
}

.page-btn:hover {
    border-color: #ad1616;
    color: #ad1616;
}

.page-btn--active {
    background: #1C1B1B;
    border-color: #1C1B1B;
    color: #fff;
    font-weight: 700;
}

.page-ellipsis {
    color: #aaa;
    padding: 0 4px;
    font-size: 13px;
}

/* Active filters bar */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f2f2f2;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1C1B1B;
    text-decoration: none;
}

.active-filter-chip:hover {
    background: #fdecea;
    border-color: #ad1616;
    color: #ad1616;
}

.active-filter-chip .chip-x {
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 960px) {
    .search-results-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .search-sidebar {
        position: static;
    }

    .search-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .search-results-page {
        padding: 0 12px 40px;
    }

    .search-results-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 0 18px;
    }

    .search-results-count {
        font-size: 18px;
    }

    .search-tile-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

/* =================================================
   SIDEBAR SEARCH — native form
================================================= */

.sidebar-search-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.sidebar-search-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: #1C1B1B;
    outline: none;
    box-sizing: border-box;
}

.sidebar-search-input:focus {
    border-color: #1C1B1B;
}

.sidebar-search-btn {
    height: 36px;
    background: #1C1B1B;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-search-btn:hover {
    background: #ad1616;
}


/* Remove gap between header and first section */
.site-content,
#content,
.page-content,
.vc_row:first-child,
.wpb_row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* If a slider is the first element */
.vc_row[data-vc-full-width="true"] {
    margin-top: 0 !important;
}

/* Kill WPBakery top spacer rows */
.wpb_row.vc_row-fluid.vc_custom_ {
    margin-top: 0 !important;
}
/* =========================================
   FORCE WPBAKERY IMAGE TITLE OVERLAY
========================================= */

/* Make the image container the anchor */
.wpb_single_image {
    position: relative !important;
}

/* Image wrapper */
.wpb_single_image figure {
    margin: 0 !important;
}

/* Dark titles ONLY on single collection pages */
.single-collection .wpb_single_image > .wpb_singleimage_heading {
    color: #0F0F0F !important;
}

/* Homepage "Our Ranges" titles */
body:not(.single-collection) .wpb_single_image > .wpb_singleimage_heading {
    color: #ffffff !important;
    text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

/* =========================================
   REMOVE GREY BOX & EXTRA SPACING
========================================= */

.wpb_heading,
.wpb_singleimage_heading {
    background: none !important;
}

/* Tighten grid spacing */
.vc_column-inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.wpb_single_image {
    margin-bottom: 14px !important;
}

/* =====================================
   FIX RESPONSIVE TILE IMAGES
===================================== */

/* ONLY single collection pages get custom sizing */
.single-collection .wpb_single_image,
.single-collection .wpb_single_image img {
    width: 90% !important;
    max-width: 90% !important;
}

/* Prevent fixed sizing from WPBakery */
.wpb_single_image img {
    object-fit: cover;
}

/* Ensure wrapper scales with screen */
.wpb_single_image .vc_single_image-wrapper {
    position: relative;
}

/********************************
  STICKY HEADER SHRINK EFFECT
********************************/

/* Smooth transitions */
.header-top,
.header-logo img,
.header-inner {
    transition: all 0.3s ease;
}

/* Default (full size) */
.header-top {
    padding: 6px 0;
}

/* Shrunk state */
.header-top.is-shrunk {
    padding: 2px 0;
}

/* Logo shrink */
.header-top.is-shrunk .header-logo img {
    max-height: 48px;
}

/* Reduce nav spacing slightly */
.header-top.is-shrunk .main-navigation ul li {
    margin: 0 10px;
}

/* Optional: slightly smaller menu text */
.header-top.is-shrunk .main-navigation ul li a {
    font-size: 12px;
}

/* PREMIUM MENU TYPOGRAPHY */
.main-navigation ul li a {
    font-family: 'Jost', sans-serif;
    font-size: 15px;          /* bigger & clearer */
    font-weight: 600;         /* confident, not shouty */
    letter-spacing: 0.08em;   /* architectural spacing */
    text-transform: uppercase;
    color: #ffffff;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Hover */
.main-navigation ul li a:hover {
    opacity: 0.85;
}

.main-navigation ul li {
    margin: 0 18px; /* more breathing room */
}

.main-navigation ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.5);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.main-navigation ul li a:hover::after {
    transform: scaleX(1);
}

/* =====================================
   FORCE PREMIUM MENU STYLING (OVERRIDE)
===================================== */

.header-top .main-navigation ul li a {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff !important;
    position: relative;
}

/* Elegant underline hover */
.header-top .main-navigation ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.55);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.header-top .main-navigation ul li a:hover::after {
    transform: scaleX(1);
}

/* Refined spacing */
.header-top .main-navigation ul li {
    margin: 0 18px;
}

/* =====================================
   FIX MEGAMENU DROPDOWN TEXT COLOR
===================================== */

/* Top-level menu items stay white */
.header-top .main-navigation > ul > li > a {
    color: #ffffff !important;
}

/* Dropdown container background (optional but recommended) */
.header-top .main-navigation ul ul {
    background: #ffffff !important;
}

/* Dropdown menu links */
.header-top .main-navigation ul ul li a {
    color: #1C1B1B !important;
    font-weight: 500;
}

/* Hover state */
.header-top .main-navigation ul ul li a:hover {
    color: #000000 !important;
    background: rgba(0,0,0,0.04);

}
/* Image container */
.tile-image {
    overflow: hidden;
    border-radius: 5px;
    background: #f6f6f6;
}

/* Image itself */
.tile-image img {
    width: 100%;
    height: 320px; /* taller = premium */
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Hover luxury effect */
.tile-card:hover .tile-image img {
    transform: scale(1.04);
}

/* Remove old ugly styles */
.loop-title {
    display: none !important;
}

.img-loop {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}
.loop-article {
    margin-bottom: 60px;
}

.tile-card:hover .tile-title {
    color: #000;
}
/* Softer hover lift */
.product-loop li.loop-article a {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.product-loop li.loop-article a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

/* Editorial grid rhythm */
.product-loop {
    margin-top: 32px;
}

.product-loop li.loop-article {
    margin-bottom: 36px;
}

/* Category / Collection Title */
.entry-header {
    text-align: center;
    margin-bottom: 50px;
}

.entry-title {
    font-family: 'Jost', sans-serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #111;
    margin-bottom: 12px;
}

/* Subtle divider under title */
.entry-header::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: #cfcfcf;
    margin: 18px auto 0;
}
/* Lock image ratio across grid */
.product-loop .img-loop {
    aspect-ratio: 3 / 4; /* tall, premium */
}

.product-loop .img-loop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Subtle grayscale baseline */
.product-loop .img-loop img {
    filter: grayscale(35%) contrast(1.02);
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* Full colour on hover */
.product-loop li.loop-article a:hover img {
    filter: grayscale(0%) contrast(1.05);
}

.product-loop .loop-title {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.product-loop li.loop-article a:hover .loop-title {
    opacity: 1;
}

/* Tighten top spacing above grid */
.entry-header {
    margin-bottom: 28px;
}

.sort-popular {
    margin-bottom: 24px;
}

.product-loop {
    margin-top: 0;
}

/* Modern Sort By */
.sort-popular {
    text-align: center;
}

.sort-popular select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    padding: 10px 36px 10px 14px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background-color: #fff;

    cursor: pointer;
}

/* Subtle arrow */
.sort-popular {
    position: relative;
}

.sort-popular::after {
    content: "▾";
    position: absolute;
    right: calc(50% - 52px);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 11px;
    color: #666;
}

/* Force the tile box size */
.vc_figure .vc_single_image-wrapper {
    width: 350px !important;
    height: 400px !important;
    display: block;
    overflow: hidden;
}

/* Force image to fill the tile */
.vc_figure .vc_single_image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =====================================
   RESPONSIVE CATEGORY TILE SYSTEM
===================================== */

/* Grid column safety */
.vc_col-sm-4 {
    display: flex;
}

/* Tile wrapper */
.vc_single_image {
    width: 100%;
    max-width: 350px;
    margin: 0 auto 32px;
}

/* Force consistent ratio */
.vc_single_image .vc_single_image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 8; /* 350x400 */
    overflow: hidden;
    border-radius: 5px;
}

/* Image behaviour */
.vc_single_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =====================================================
   SINGLE COLLECTION – REDESIGN (2026)
===================================================== */

/* Breadcrumbs */
.coll-breadcrumbs {
    padding: 14px 48px;
    font-size: 13px;
    color: #888;
    border-bottom: 1px solid #f0eeec;
}

.coll-breadcrumbs a {
    color: #1C1B1B;
    text-decoration: none;
}

.coll-breadcrumbs a:hover { color: #ad1616; }

.bc-sep {
    margin: 0 7px;
    color: #ccc;
}

.bc-current {
    color: #1C1B1B;
    font-weight: 600;
}

/* Hero grid */
.coll-hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
    gap: 56px;
    padding: 40px 48px 48px;
    align-items: start;
}

/* Gallery column */
.coll-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 24px;
    width: 100%;
    max-width: 100%;
}

/* Main image — fixed square */
.coll-gallery-main {
    width: 100%;
    height: 660px;
    border-radius: 5px;
    overflow: hidden;
    background: #F7F5F2;
}

.coll-gallery-main .swiper-slide {
    height: 660px;
}

.coll-gallery-main .swiper-slide img,
.coll-gallery-main .swiper-slide .wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #F7F5F2;
}

.coll-gallery-main .swiper-button-prev,
.coll-gallery-main .swiper-button-next {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    color: #1C1B1B;
    --swiper-navigation-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.coll-gallery-main .swiper-pagination-bullet-active {
    background: #ad1616;
}

/* Thumbnail grid — wraps to next row when full */
.coll-thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.coll-thumb-item {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s;
}

.coll-thumb-item.is-active {
    opacity: 1;
    border-color: #ad1616;
}

.coll-thumb-item:hover {
    opacity: 0.85;
}

.coll-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info column */
.coll-info-col {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Title */
.coll-title {
    font-size: 28px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.coll-mfr {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.coll-mfr strong {
    color: #1C1B1B;
    font-weight: 600;
}

/* Add to My Selection */
.coll-like-row {
    margin: 4px 0 6px;
}

.coll-like-row .tile-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}

.coll-like-row .tile-like-btn:hover,
.coll-like-row .tile-like-btn.is-liked {
    color: #ad1616;
}

.coll-like-row .like-heart {
    font-size: 28px;
    line-height: 1;
    transition: transform 0.15s;
}

.coll-like-row .tile-like-btn:hover .like-heart {
    transform: scale(1.15);
    color: #ad1616;
}

.coll-like-row .tile-like-btn.is-liked .like-heart {
    transform: scale(1.15);
    color: #ad1616;
}

.coll-like-row .like-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Section label */
.coll-section { }

.coll-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #aaa;
    margin: 0 0 10px;
}

/* Sizes grid — proportional tiles */
.coll-sizes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    align-items: flex-end;
}

.size-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border: 1px solid #e8e5e1;
    border-radius: 5px;
    padding: 12px 10px 10px;
    min-width: 76px;
    text-align: center;
    background: #fff;
    gap: 6px;
}

.size-thumb {
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.size-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.size-thumb-bg {
    width: 100%;
    height: 100%;
    background: #F7F5F2;
}

.size-dim {
    font-size: 12px;
    font-weight: 700;
    color: #1C1B1B;
    line-height: 1.2;
    white-space: nowrap;
}

.size-thick {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

/* Burner configuration cards */
.size-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.size-card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
    border-radius: 3px;
}

/* Slip rating — plain text */
.slip-text {
    font-size: 15px;
    font-weight: 600;
    color: #1C1B1B;
    margin: 0;
    letter-spacing: 0.03em;
}

/* Suitable for pills */
.suit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.suit-pill {
    background: #F7F5F2;
    border: 1px solid #e8e5e1;
    border-radius: 5px;
    padding: 5px 11px;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

/* Slip Rating + Technology side-by-side row */
.coll-slip-tech-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.coll-slip-col,
.coll-tech-col {
    flex: 1;
    min-width: 100px;
}

/* Technology pills */
.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-pill {
    background: #1C1B1B;
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Country of origin — image only */
.coll-country-list {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    align-items: center;
}

.coll-country-list img {
    width: 52px;
    height: auto;
    border-radius: 3px;
    border: 1px solid #e8e5e1;
    display: block;
}

/* CTA buttons */
.coll-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.coll-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: 1px solid #1C1B1B;
    border-radius: 5px;
    padding: 13px 24px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1C1B1B;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s;
}

.coll-download-btn:hover {
    background: #1C1B1B;
    color: #fff;
}

/* Below fold */
.coll-below {
    padding: 0 48px 56px;
}

.coll-variants,
.coll-description,
.coll-catalog {
    border-top: 1px solid #f0eeec;
    padding-top: 36px;
    margin-top: 36px;
}

.coll-description p {
    font-size: 15px;
    line-height: 1.75;
    color: #444;
    max-width: 780px;
    margin: 0 0 16px;
}

.coll-description h2,
.coll-description h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 24px 0 10px;
}

.coll-description ul,
.coll-description ol {
    padding-left: 20px;
    margin: 0 0 16px;
    color: #444;
    font-size: 15px;
    line-height: 1.75;
    max-width: 780px;
}

.coll-description a {
    color: #ad1616;
    text-decoration: underline;
}

/* Variants grid */
.coll-variant-grid {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.coll-variant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    width: 90px;
}

.coll-variant-img {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #e8e5e1;
}

.coll-variant-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coll-variant-name {
    font-size: 12px;
    color: #555;
    text-align: center;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 1020px) {
    .coll-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px 20px 40px;
    }

    .coll-gallery-col {
        position: static;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .coll-gallery-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .coll-gallery-main,
    .coll-gallery-main .swiper-slide {
        height: 75vw;
        max-height: 400px;
    }
}

@media (max-width: 600px) {
    .coll-title { font-size: 24px; }

    .coll-hero { padding: 16px 16px 32px; max-width: 100%; }

    .coll-gallery-main,
    .coll-gallery-main .swiper-slide { height: 75vw; max-height: 360px; }

    .coll-thumb-item {
        width: 58px;
        height: 58px;
    }

    .coll-below { padding: 0 16px 40px; }

    .coll-breadcrumbs { padding: 12px 16px; }
}

/* =====================================================
   SINGLE COLLECTION – HERO (SWIPER + INFO) [legacy — keep for reference]
===================================================== */

.collection-hero {
    display: grid;
    grid-template-columns: 700px 520px; /* FIXED, editorial */
    gap: 48px;

    width: 100%;
    max-width: none;      /* 🔥 removes centering */
    margin: 0 0 80px 0;   /* 🔥 no auto margins */

    padding-left: 40px;  /* controlled edge breathing */
    padding-right: 40px;

    align-items: stretch;
}

/* =====================================================
   LEFT: SWIPER GALLERY (LOCKED)
===================================================== */

.single-collection .collection-gallery {
    position: relative;
    width: 700px;
    min-width: 700px;
    height: 1000px;
    overflow: hidden;
}

/* Swiper root */
.single-collection .collection-gallery .swiper {
    width: 100%;
    height: 100%;
}

/* =====================================================
   RIGHT: COLLECTION INFO (TOP-ALIGNED)
===================================================== */

.single-collection .collection-info {
    align-self: start;
    margin: 0;
    padding: 0;
}

.single-collection .collection-info .info-block {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e6e6e6;
}

.single-collection .collection-info .info-block:last-child {
    border-bottom: none;
}

.single-collection .collection-info h3 {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 12px;
    color: #111;
}

.single-collection .collection-info p {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.7;
    color: #222;
}

/* =====================================
   FIX HOMEPAGE "OUR RANGES" ALIGNMENT
===================================== */

body:not(.single-collection) .vc_row {
    display: flex;
    justify-content: center;
}

body:not(.single-collection) .vc_col-sm-4 {
    display: flex;
    justify-content: center;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991px) {

    .single-collection .collection-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    .single-collection .collection-gallery {
        width: 100%;
        min-width: 0;
        height: 60vh;
        max-height: 520px;
    }

    .single-collection .collection-info p {
        max-width: 100%;
    }
}

collection-info .icon-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.collection-info .icon-list li {
    width: 150px;
    height: 150px;
    flex: 0 0 auto;
}

.collection-info .icon-list img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Icon lists (sizes & slip rating) */
.collection-info .icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==============================
   FULL WIDTH BELOW HERO
============================== */

.collection-description,
.collection-catalog {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 80px;

    padding-left: 40px;
    padding-right: 40px;
}

/* Center tile image wrapper on homepage */
body:not(.single-collection) .vc_single_image {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================
   CENTER HOMEPAGE RANGE TITLES
===================================== */

body:not(.single-collection) .wpb_single_image > .wpb_singleimage_heading {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

/* =====================================
   HARD OVERRIDE – MOBILE RANGE STACKING
===================================== */

@media (max-width: 767px) {

    /* Stop flex row behavior on homepage */
    body:not(.single-collection) .vc_row {
        display: block !important;
    }

    /* Force full-width columns */
    body:not(.single-collection) .vc_col-sm-4 {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* Center the tile */
    body:not(.single-collection) .vc_single_image {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

    /* Title scaling */
    body:not(.single-collection) .wpb_singleimage_heading {
        font-size: 18px !important;
        letter-spacing: 0.14em;
        text-align: center !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}


@media (max-width: 767px) {

    body:not(.single-collection) .wpb_single_image {
        position: relative;
    }

    body:not(.single-collection) .wpb_singleimage_heading {
        top: 18px !important;       /* move to top */
        bottom: auto !important;    /* remove bottom positioning */
        left: 50% !important;
        transform: translateX(-50%) !important;

        font-family: 'Jost', sans-serif;
        font-size: 18px !important;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        text-align: center;
        width: 100%;
        padding: 0 16px;

        z-index: 5;
    }
}
/* =====================================
   FLAT DARK MODE — HEADER SEPARATION ONLY
===================================== */

@media (max-width: 767px) {

    /* GLOBAL RESET — no borders, no shadows */
    *,
    *::before,
    *::after {
        border: none !important;
        box-shadow: none !important;
    }

    /* BODY / MAIN CONTENT — slightly lighter */
    html,
    body,
    .site,
    .site-content,
    #content,
    .page-content,
    .container,
    .container-fluid,
    .vc_row,
    .wpb_row,
    .vc_column-inner {
        background: #141414 !important;
        color: #dcdcdc !important;
    }

    /* CONTENT WRAPPERS — flat, no card look */
    .wpb_wrapper,
    .tile-info,
    .product-info,
    .info-box,
    .catalogue,
    .collection-info {
        background: transparent !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* HEADER — darker slab for separation */
    .site-header,
    .header,
    .navbar,
    .main-navigation,
    .sticky,
    .is-sticky,
    .sticky-header {
        background: #0b0b0b !important;
    }

    /* NAV TEXT */
    .site-header a,
    .main-navigation a {
        color: #ffffff !important;
    }

    /* FORM ELEMENTS — flat */
    input,
    select,
    textarea {
        background: #1a1a1a !important;
        color: #ffffff !important;
    }

    /* Kill outlines */
    :focus {
        outline: none !important;
    }
}
/* =====================================
   MOBILE COLLECTION TEXT — FORCE WHITE
===================================== */

@media (max-width: 767px) {

    /* Collection titles & links */
    .collection,
    .collection a,
    .collection-title,
    .collection-title a,
    .collection-name,
    .collection-name a,
    .product-title,
    .product-title a,
    .tile-title,
    .tile-title a {
        color: #ffffff !important;
    }

    /* Any spans inside collection items */
    .collection span,
    .collection-title span,
    .product-title span {
        color: #ffffff !important;
    }
}

/* =====================================================
   MOBILE STICKY HEADER — PREMIUM LAYOUT
===================================================== */

@media (max-width: 767px) {

    /* HEADER WRAPPER */
    .header-top {
        background: #111;
        padding: 10px 14px 14px;
    }

    .header-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px 12px;
        align-items: center;
    }

    /* ======================
       LOGO — TOP LEFT
    ====================== */
    .header-logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .header-logo img {
        max-height: 44px;
    }

    /* ======================
       CONTACT — TOP RIGHT
    ====================== */
    .header-contact {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        text-align: right;
        font-size: 11px;
        line-height: 1.4;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }

    .header-contact .phone,
    .header-contact .address {
        text-align: right;
        white-space: nowrap;
    }

    .header-contact a,
    .header-contact span,
    .header-contact small {
        color: #ffffff !important;
    }

    .header-contact .address br {
        display: block !important;
    }

    /* ======================
       SEARCH — FULL WIDTH
    ====================== */
    .header-search,
    .tile-search-wrapper,
    .search-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        position: static !important;
        transform: none !important;
        padding: 0 2px;
    }

    .header-search-form {
        width: 100% !important;
        border-radius: 6px !important;
        height: 44px !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
    }

    .header-search-input {
        width: 100% !important;
        flex: 1 !important;
        height: 44px !important;
        color: #fff !important;
        font-size: 14px !important;
    }

    .header-search-input::placeholder {
        color: rgba(255,255,255,0.45) !important;
    }

    .header-search-btn {
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    /* ======================
       MENU BAR — FULL WIDTH
    ====================== */
    .main-navigation {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        text-align: center;
        background: #1a1a1a;
        padding: 10px 0;
        border-radius: 5px;
    }

    /* Center hamburger */
    .main-navigation .menu-toggle,
    .main-navigation button {
        margin: 0 auto;
        display: block;
    }

}
/* =====================================
   MOBILE PROMO SWIPER — SIZE & VISIBILITY
===================================== */

@media (max-width: 767px) {

    .mobile-promo-bar {
        width: 100%;
        height: 120px;            /* 👈 adjust this if needed (100–140px sweet spot) */
        background: #111;         /* fallback while image loads */
        overflow: hidden;
    }

    .mobile-promo-bar .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-promo-bar img {
        width: 100%;
        height: 100%;
        object-fit: cover;        /* fills width nicely */
        display: block;
    }
}

/* =====================================
   DISABLE SLIDER REVOLUTION — MOBILE ONLY
===================================== */

@media (max-width: 900px) {

    .rev_slider_wrapper,
    .rev_slider,
    rs-module-wrap,
    rs-module {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }
}

/* =====================================
   MOBILE HOMEPAGE — REMOVE DEAD SPACE
===================================== */

@media (max-width: 767px) {

    /* Kill top spacing after header + promo bar */
    body.home .site-content,
    body.home #content,
    body.home .page-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Remove WPBakery auto spacing */
    body.home .vc_row:first-child,
    body.home .wpb_row:first-child,
    body.home .vc_row-fluid:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* If "Our Ranges" is a heading row */
    body.home .entry-header,
    body.home .wpb_heading,
    body.home h1:first-of-type,
    body.home h2:first-of-type {
        margin-top: 0 !important;
        padding-top: 12px !important; /* small breathing room */
    }

    /* Remove empty spacer rows (VERY common in WPBakery) */
    body.home .vc_empty_space {
        display: none !important;
        height: 0 !important;
    }

    /* Ensure promo bar does NOT add margin below */
    .mobile-promo-bar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}
/* =====================================
   MOBILE HOMEPAGE — KILL FULL HEIGHT ROW
===================================== */

@media (max-width: 767px) {

    body.home .vc_row-o-full-height {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.home .vc_row-o-full-height > .vc_column_container,
    body.home .vc_row-o-full-height > .vc_column_container > .vc_column-inner {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =====================================
   MOBILE — REMOVE "OUR RANGES" VC SEPARATOR COMPLETELY
===================================== */

@media (max-width: 767px) {

    /* Hide the separator block with "Our Ranges" */
    body.home .vc_separator {
        display: none !important;
    }

    /* Remove space WPBakery leaves behind */
    body.home .wpb_wrapper {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Pull first range row tight to banner */
    body.home .wpb_wrapper > .vc_row:first-of-type {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.mobile-promo-bar {
    position: relative;
}

/* CTA bar */
.swiper-cta-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(20,20,20,0.92);
    padding: 14px 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}

/* CTA button */
.swiper-cta-link {
    color: #ffffff;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 5px;
    background: rgba(255,255,255,0.12);
}

/* Tap feedback */
.swiper-cta-link:active {
    opacity: 0.75;
}

@media (max-width: 767px) {

    .mobile-promo-bar {
        width: 100%;
        height: 180px; /* adjust if you want taller */
        overflow: hidden;
    }

    .mobile-promo-bar .swiper-slide {
        width: 100%;
        height: 100%;
    }

    .mobile-promo-bar a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mobile-promo-bar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* =====================================
   MOBILE COLLECTION TEXT — FORCE WHITE
===================================== */

@media (max-width: 767px) {

    /* Collection pages only */
    body.single-collection,
    body.single-collection * {
        color: #eaeaea !important;
    }

    /* Headings */
    body.single-collection h1,
    body.single-collection h2,
    body.single-collection h3,
    body.single-collection h4,
    body.single-collection h5,
    body.single-collection h6 {
        color: #ffffff !important;
    }

    /* Paragraph & UI text */
    body.single-collection p,
    body.single-collection li,
    body.single-collection span,
    body.single-collection label,
    body.single-collection div {
        color: #dcdcdc !important;
    }

    /* Links */
    body.single-collection a {
        color: #ffffff !important;
    }

    body.single-collection a:hover {
        opacity: 0.85;
    }

}

/* =====================================
   MOBILE COLLECTION HEADER — CENTERED
===================================== */

@media (max-width: 767px) {

    /* Main collection title */
    body.single-collection .entry-title,
    body.single-collection h1 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Subtitle / intro text under title (if any) */
    body.single-collection .collection-intro,
    body.single-collection .collection-description,
    body.single-collection .entry-header p {
        text-align: center !important;
    }

    /* Ensure header container is full-width */
    body.single-collection .entry-header {
        width: 100% !important;
        text-align: center !important;
    }

}

/* ===============================
   HEADER HEART BUTTON
================================ */

.tile-favorites-header {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.tile-favorites-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tile-favorites-count {
    font-size: 13px;
    background: #e63946;
    color: #fff;
    padding: 2px 6px;
    border-radius: 12px;
    line-height: 1;
}

/* Tile title */
.tile-title {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Heart button */
.tile-like-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Active / liked state (we’ll toggle this later) */
.tile-like-btn.is-liked {
    color: #e63946;
}

.loop-article {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

.tile-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .tile-like-btn {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

}

.product-loop.row {
    margin-left: 0;
    margin-right: 0;
}

.product-loop > li.loop-article {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
}

.tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
}

.tile-card {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body,
    html {
        /* clip instead of hidden: same visual clipping, but hidden turns
           html/body into a scroll container which breaks position:sticky
           everywhere below (the Build My Space mobile canvas). Old browsers
           fall back to hidden and just lose the sticky effect. */
        overflow-x: hidden;
        overflow-x: clip;
    }

    .product-loop {
        overflow-x: hidden;
    }
}

/* Mobile collection header with heart */
.collection-header-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Desktop = behave normally */
@media (min-width: 768px) {
    .collection-header-mobile {
        display: block;
        text-align: center;
    }

    .collection-header-mobile .tile-favorites-btn {
        display: none;
    }
}

/* Hide saved tiles heart on desktop */
@media (min-width: 768px) {
    .tile-favorites-link {
        display: none !important;
    }
}

/* Ensure it shows on mobile */
@media (max-width: 767px) {
    .tile-favorites-link {
        display: inline-flex !important;
        align-items: center;
    }
}


/* =====================================
   MOBILE PAGE TITLES — FORCE WHITE
===================================== */
@media (max-width: 767px) {

    /* Standard page titles */
    .page-title,
    .entry-title,
    .collection-title,
    h1,
    h2 {
        color: #ffffff !important;
        text-align: center;
    }

    /* Ensure no inherited dark colors */
    .page-header,
    .entry-header {
        color: #ffffff !important;
    }

}

.swiper-slide[data-link] {
    cursor: pointer;
}

.tile-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category-tile-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.category-tile-sizes img {
    width: 100%;
    height: auto;
    image-rendering: auto;
}

.tile-size-label {
    text-align: center;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
}


.tile-size-gallery {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

.tile-size-item {
    text-align: center;
}

.tile-size-item img {
    height: 180px;       /* shared max height */
    width: auto;
    max-width: none;
    object-fit: contain;
}

.tile-size-label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
}

.single-collection .tile-size-gallery {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.single-collection .tile-size-item {
    text-align: center;
}

.single-collection .tile-size-item img {
    height: calc(160px * var(--scale));
    width: auto;
    object-fit: contain;
}

.single-collection .tile-size-label {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
}

/* COLLECTION PAGE – SWIPER POLISH */
.single-collection .collection-gallery {
    border-radius: 5px;
    overflow: hidden;
}

.single-collection .collection-info {
    background: #fafafa;
    padding: 24px;
    border-radius: 5px;
}

.single-collection .collection-gallery {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.single-collection .swiper-pagination-bullet {
    background: rgba(0,0,0,0.3);
    opacity: 1;
}

.single-collection .swiper-pagination-bullet-active {
    background: #000;
}

.single-collection .collection-gallery img {
    transition: transform 0.4s ease;
}

.single-collection .collection-gallery:hover img {
    transform: scale(1.03);
}

/* Desktop: no text */
.tile-favorites-text {
    display: none;
}

/* MOBILE ONLY */
@media (max-width: 768px) {

    .tile-favorites-link {
        position: relative;
        flex-shrink: 0;
    }

    .tile-favorites-link {
        grid-column: 1 / -1;
        width: 100%;
        text-decoration: none;
        display: block !important;
    }

    .tile-favorites-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 10px 14px;
        background: #1a1a1a;
        border: 0;
        border-radius: 6px;
        white-space: nowrap;
        font-family: 'Jost', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .tile-favorites-heart {
        color: #ad1616;
        font-size: 18px;
        line-height: 1;
    }

    .tile-favorites-text {
        display: inline;
        font-family: 'Jost', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .tile-favorites-count {
        font-family: 'Jost', sans-serif;
        font-size: 13px;
        font-weight: 700;
        background: #ad1616;
        color: #fff;
        border-radius: 50%;
        min-width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        padding: 0 4px;
    }
}

/* Suitable For pills – base */
.suitable-pill {
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 12px;
    background: #eaeaea;
    color: #333;
    border: 1px solid #ddd;
}

/* Mobile refinement */
@media (max-width: 768px) {
    .suitable-pill {
        background: #212020;
        color: #222;
    }
}

.slider-h1-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;       /* hides text visually */
  z-index: 1000;            /* on top of slides for SEO reading */
  font-size: 0;             /* ensures no visible space */
  overflow: hidden;
  pointer-events: none;     /* doesn't interfere with clicks */
}

.tile-variants {
  margin-top: 20px;
}

.tile-variants h3 {
  font-size: 14px;
  margin-bottom: 10px;
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* fits your layout */
  gap: 10px;
}

.variant-item {
  text-decoration: none;
  color: #222;
}

.variant-img img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.variant-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.variant-name {
  font-size: 12px;
}

.variant-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

/* Breadcrumb styling */
.collection-breadcrumbs {
    font-size: 14px;
    color: #555;
    margin: 20px 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px; /* space between links and separators */
}

.collection-breadcrumbs a {
    color: #1C1B1B;
    text-decoration: none;
    transition: color 0.3s;
}

.collection-breadcrumbs a:hover {
    color: #ad1616;
}

.collection-breadcrumbs span {
    color: #000; /* current page title */
    font-weight: 600;
}

/* Add arrow separator automatically */
.collection-breadcrumbs a::after {
    content: ">";
    margin: 0 4px;
    color: #888;
}

.collection-breadcrumbs a:last-of-type::after {
    content: "";
}

/* Mobile */
@media (max-width: 480px) {
    .collection-breadcrumbs {
        font-size: 12px;
    }
}

.sizes-and-burners-wrap {
    display: inline-flex;
    align-items: flex-start;
    gap: 30px;
    width: auto;
}
.available-sizes-block {
    flex: 0 1 auto;
}

.burner-config-block {
    width: 260px;
    flex-shrink: 0;
}

.burner-configurations {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.burner-config-item {
    width: 100%;
    text-align: center;
}

/* THIS is the important scaling fix */
.burner-config-item img {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Match slab labels */
.burner-config-label {
    margin-top: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

/* Prevent wrapper conflicts */
.sizes-and-burners-wrap > .info-block {
    width: auto;
}

/* Mobile */
@media (max-width: 900px) {

    .sizes-and-burners-wrap {
        flex-direction: column;
    }

    .burner-config-block {
        width: 100%;
    }

    .burner-config-item img {
        max-width: 260px;
    }
}


/* Font: Jost defined globally in style.css — no overrides needed here */


/* Floating Bubble */
#message-bubble {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}

/* Button */
#message-toggle {
    display: flex;
    align-items: center;
    gap: 10px;

    background: #222;
    color: #fff;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;

    padding: 14px 18px;

    cursor: pointer;

    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;

    font-family: inherit;

    box-shadow:
        0 2px 8px rgba(0,0,0,.12),
        0 8px 24px rgba(0,0,0,.08);

    transition:
        background .2s ease,
        box-shadow .2s ease;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#message-toggle:hover {
    background: #2d2d2d;

    box-shadow:
        0 4px 12px rgba(0,0,0,.14),
        0 10px 28px rgba(0,0,0,.10);
}

#message-toggle img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

#message-toggle span {
    white-space: nowrap;
}

/* Popup */
#message-box {
    display: none;
    position: absolute;
    bottom: 75px;
    right: 0;

    width: 380px;
    max-width: 90vw;

    background: #fff;

    border-radius: 5px;
    border: 1px solid rgba(0,0,0,.08);

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08),
        0 20px 50px rgba(0,0,0,.10);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header */
.message-header {
    background: #222;
    color: #fff;

    padding: 18px 20px;

    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;

    position: relative;
}

#message-close {
    position: absolute;
    right: 18px;
    top: 14px;

    font-size: 22px;
    font-weight: 300;

    cursor: pointer;
    line-height: 1;
}

/* Intro Text */
.message-intro {
    padding: 18px 20px 10px;

    color: #666;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

/* Gravity Forms Wrapper */
#message-box .gform_wrapper {
    padding: 0 20px 20px;
    background: #fff;
}

/* Form Labels */
#message-box .gform_wrapper label {
    color: #222 !important;
    font-weight: 400 !important;
    font-size: 13px;
}

/* Form Fields */
#message-box .gform_wrapper input,
#message-box .gform_wrapper textarea,
#message-box .gform_wrapper select {
    background: #fff !important;
    color: #222 !important;

    border: 1px solid #d9d9d9 !important;
    border-radius: 5px !important;

    padding: 12px !important;

    font-family: inherit;
    font-size: 14px;

    box-shadow: none !important;
}

/* Focus State */
#message-box .gform_wrapper input:focus,
#message-box .gform_wrapper textarea:focus,
#message-box .gform_wrapper select:focus {
    border-color: #999 !important;
    outline: none !important;
}

/* Placeholder */
#message-box .gform_wrapper ::placeholder {
    color: #888;
}

/* Submit Button */
#message-box .gform_button {
    width: 100% !important;

    background: #222 !important;
    color: #fff !important;

    border: none !important;
    border-radius: 5px !important;

    padding: 14px !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
}

#message-box .gform_button:hover {
    background: #2d2d2d !important;
}

/* Success Message */
#message-box .gform_confirmation_message {
    padding: 20px;

    color: #222;
    font-weight: 500;
    font-size: 14px;
}

/* Mobile */
@media (max-width: 768px) {

    #message-bubble {
        right: 15px;
        bottom: 15px;
    }

    #message-box {
        width: calc(100vw - 30px);
        max-width: 400px;
    }

    #message-toggle {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* About Us footer bar */
.about-footer-bar {
    background: #111;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px 0;
    text-align: center;
}

.about-footer-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.about-footer-link {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.about-footer-link:hover { color: #ad1616; }

.about-footer-sep {
    color: rgba(255,255,255,0.25);
    font-size: 12px;
}

.about-footer-copy {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

/* ==========================================================
   ABOUT US PAGE
========================================================== */

.about-page {
    font-family: 'Jost', sans-serif;
    color: #1C1B1B;
}

/* Hero */
.about-hero {
    background: #1C1B1B;
    color: #fff;
    padding: 80px 24px 88px;
    text-align: center;
}

.about-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.about-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0 0 18px;
}

.about-h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: #fff;
}

.about-lead {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    margin: 0 0 32px;
}

.about-cta-btn {
    display: inline-block;
    background: #ad1616;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 5px;
    transition: background 0.2s;
}

.about-cta-btn:hover { background: #8a1010; color: #fff; }

.about-cta-btn--outline {
    background: transparent;
    border: 2px solid #1C1B1B;
    color: #1C1B1B;
}

.about-cta-btn--outline:hover { background: #1C1B1B; color: #fff; }

/* Sections */
.about-section {
    padding: 72px 24px;
    border-bottom: 1px solid #e8e5e1;
}

.about-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.about-inner--center { text-align: center; }

.about-section h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
    color: #1C1B1B;
}

.about-section p {
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 16px;
}

/* Story */
.about-story .about-inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 64px;
    align-items: start;
}

.about-stats-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: sticky;
    top: 80px;
}

.about-stat {
    background: #F7F5F2;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
}

.about-stat-num {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #ad1616;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}

.about-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
}

/* Products */
.about-section-intro {
    font-size: 17px;
    max-width: 640px;
    margin: 0 auto 40px;
    color: #555;
}

.about-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
    margin-top: 8px;
}

.about-cat {
    background: #F7F5F2;
    border-radius: 8px;
    padding: 28px 24px;
}

.about-cat h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1C1B1B;
    margin: 0 0 10px;
}

.about-cat p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.65;
}

/* Why */
.about-why { background: #F7F5F2; }

.about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 12px;
}

.about-why-item {
    background: #fff;
    border-radius: 8px;
    padding: 32px 28px;
}

.about-why-icon {
    font-size: 22px;
    color: #ad1616;
    margin-bottom: 14px;
    line-height: 1;
}

.about-why-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 0 0 10px;
}

.about-why-item p {
    font-size: 14px;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

/* Visit */
.about-visit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.about-visit-text h2 { margin-bottom: 16px; }

.about-visit-details {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-visit-details li {
    font-size: 15px;
    color: #444;
}

.about-visit-details a { color: #ad1616; text-decoration: none; }
.about-visit-details a:hover { text-decoration: underline; }

/* FAQ */
.about-faq-list {
    max-width: 760px;
    margin: 32px auto 0;
    text-align: left;
}

.about-faq-item {
    border-top: 1px solid #e8e5e1;
    padding: 0;
}

.about-faq-item:last-child { border-bottom: 1px solid #e8e5e1; }

.about-faq-item summary {
    font-size: 16px;
    font-weight: 600;
    color: #1C1B1B;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-faq-item summary::-webkit-details-marker { display: none; }

.about-faq-item summary::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: #ad1616;
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.2s;
}

.about-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.about-faq-item p {
    padding: 0 0 20px;
    margin: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.7;
}

/* Mobile */
@media (max-width: 900px) {
    .about-categories,
    .about-why-grid { grid-template-columns: repeat(2, 1fr); }
    .about-story .about-inner { grid-template-columns: 1fr; gap: 40px; }
    .about-stats-col { position: static; grid-template-columns: repeat(4, 1fr); }
    .about-visit-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
    .about-h1 { font-size: 30px; }
    .about-hero { padding: 56px 20px 64px; }
    .about-section { padding: 48px 20px; }
    .about-categories,
    .about-why-grid { grid-template-columns: 1fr; }
    .about-stats-col { grid-template-columns: repeat(2, 1fr); }
    .about-section h2 { font-size: 26px; }
}

/* REMOVED — legacy "mobile dark theme" for the About page.
   It forced #111 backgrounds and white text below 767px. The site is now light
   on every page (owner request), and the redesign's white-background rules beat
   the backgrounds here but NOT these `color: #fff !important` declarations —
   leaving white text on a white page (the invisible "Get in Touch" button and
   washed-out body copy). Deleting the block restores the normal dark-on-light
   styling on mobile; nothing else referenced it. */

/* Mobile Message Box Improvements */
@media (max-width: 768px) {

    #message-box {
        width: calc(100vw - 20px);
        max-width: 360px;
        right: 10px;
        left: auto;
        bottom: 65px;
    }

    .message-intro {
        padding: 12px 15px 5px;
        font-size: 12px;
        line-height: 1.4;
    }

    #message-box .gform_wrapper {
        padding: 0 15px 15px;
    }

    #message-box .gform_wrapper input,
    #message-box .gform_wrapper textarea,
    #message-box .gform_wrapper select {
        padding: 10px !important;
        font-size: 14px !important;
    }

    #message-box .gform_wrapper textarea {
        height: 80px !important;
        min-height: 80px !important;
    }

    #message-box .gform_wrapper .gfield {
        margin-bottom: 10px !important;
    }

    #message-box .gform_button {
        padding: 12px !important;
        font-size: 12px !important;
    }

    .message-header {
        padding: 12px 15px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {

    .header-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

}

/* Mobile page padding */
@media (max-width: 768px) {

    body {
        padding-left: 10px;
        padding-right: 10px;
        /* clip keeps position:sticky working (hidden breaks it) — see the
           767px block above. */
        overflow-x: hidden;
        overflow-x: clip;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

.collection-seo-content {
    max-width: 900px;
    margin: 25px auto 30px;
    padding: 0 20px;
    text-align: center;
}

.collection-seo-title {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.2;
}

.collection-seo-description {
    max-width: 800px;
    margin: 0 auto;

    font-size: 15px;
    line-height: 1.5;

    color: #555;
}

.collection-seo-description p {
    margin-bottom: 10px;
}

.collection-seo-description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {

    .collection-seo-content {
        padding: 0 15px;
        margin: 20px auto 25px;
    }

    .collection-seo-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .collection-seo-description {
        font-size: 14px;
        line-height: 1.45;
    }
}

.collection-btn,
.enquire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #ad1616;
    color: #ffffff;

    border: none;
    border-radius: 5px;

    padding: 12px 22px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;

    cursor: pointer;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.collection-btn:hover,
.enquire-btn:hover {
    background: #8a1010;
    color: #ffffff;
}
/* WRAPPER */
.product-enquire-wrapper {
    text-align: center;
    margin-top: 20px;
}

/* BUTTON (keep your existing if you want) */
.enquire-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* MODAL BASE */
.enquiry-modal {
    position: fixed;
    inset: 0;

    display: none;
    z-index: 99999;
}

/* SHOW STATE */
.enquiry-modal.active {
    display: block;
}

/* OVERLAY */
.enquiry-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

/* POPUP BOX (THIS IS THE KEY PART) */
.enquiry-modal-content {
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
    max-width: 520px;

    background: #fff;

    padding: 25px;

    border-radius: 5px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* CLOSE BUTTON */
.enquiry-close {
    position: absolute;
    top: 10px;
    right: 14px;

    font-size: 26px;
    cursor: pointer;
}

.brand-btn {
    display: inline-block;
    background: #ad1616;
    color: #fff;

    text-decoration: none;
    font-weight: 500;

    padding: 12px 24px;
    border-radius: 5px;

    font-size: 16px;
    line-height: 1;

    border: none;
    cursor: pointer;
}

/* ==========================================================
   MOBILE LUXURY DARK THEME
   All overrides are scoped to max-width: 767px.
   Desktop is completely unchanged.
========================================================== */
@media (max-width: 767px) {

    /* ── GLOBAL ── */
    html,
    body {
        background: #111 !important;
        color: #fff !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Override the old flat-dark-mode inputs (those were dark — user wants white) */
    input,
    select,
    textarea {
        background: #fff !important;
        color: #1C1B1B !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
    }

    /* ── HOMEPAGE — TILE FINDER ── */
    .home-finder {
        background: #111 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .home-finder-eyebrow {
        color: rgba(255,255,255,0.5) !important;
    }

    .home-finder-heading {
        color: #fff !important;
    }

    .home-finder-divider {
        color: rgba(255,255,255,0.35) !important;
    }

    .home-finder-divider::before {
        border-color: rgba(255,255,255,0.12) !important;
    }

    .home-finder-divider span {
        background: #111 !important;
        color: rgba(255,255,255,0.35) !important;
    }

    /* Search bar in finder */
    .home-finder-input {
        background: #fff !important;
        color: #1C1B1B !important;
        border: none !important;
    }

    .home-finder-input::placeholder {
        color: #999 !important;
    }

    .home-finder-input-wrap {
        background: #fff !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .home-finder-submit {
        background: #ad1616 !important;
        color: #fff !important;
    }

    /* Dropdowns — white boxes as requested */
    .home-finder-select-label {
        color: rgba(255,255,255,0.6) !important;
    }

    .home-finder-select {
        background: #fff !important;
        color: #1C1B1B !important;
        border: 1px solid #ddd !important;
    }

    /* Search / Reset buttons */
    .finder-search-btn {
        background: #ad1616 !important;
        color: #fff !important;
    }

    .finder-search-btn:disabled {
        background: rgba(173,22,22,0.35) !important;
    }

    .finder-reset-btn {
        color: rgba(255,255,255,0.5) !important;
        background: transparent !important;
    }

    /* ── HOMEPAGE — OUR RANGES ── */
    .home-section {
        background: #111 !important;
    }

    .home-section-title {
        color: #fff !important;
    }

    .home-section-title::before,
    .home-section-title::after {
        background: rgba(255,255,255,0.2) !important;
    }

    /* Category tile overlays */
    .home-category-title {
        color: #fff !important;
        background: rgba(0,0,0,0.55) !important;
    }

    /* ── HOMEPAGE — ABOUT / SEO TEXT ── */
    .home-about {
        background: #161616 !important;
    }

    .home-about-inner,
    .home-about-inner h1,
    .home-about-inner h2,
    .home-about-inner h3,
    .home-about-h1 {
        color: #fff !important;
    }

    .home-about-inner p {
        color: rgba(255,255,255,0.75) !important;
    }

    .home-about-inner a {
        color: #e05555 !important;
    }

    .home-about-inner hr {
        border-color: rgba(255,255,255,0.1) !important;
    }

    /* ── HOMEPAGE — NEWS ── */
    .home-news-section-title {
        color: rgba(255,255,255,0.5) !important;
    }

    .home-news-section-title::before,
    .home-news-section-title::after {
        background: rgba(255,255,255,0.15) !important;
    }

    .home-news-item {
        background: #1a1a1a !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .home-news-title {
        color: #fff !important;
        padding: 8px !important;
    }

    /* ── HOMEPAGE — CTA ── */
    .home-cta {
        background: #1a1a1a !important;
    }

    .home-cta strong,
    .home-cta p,
    .home-cta a {
        color: rgba(255,255,255,0.85) !important;
    }

    /* ── SEARCH / ARCHIVE RESULTS PAGE ── */
    .search-results-page,
    .search-results-layout,
    .search-sidebar,
    .search-results-grid {
        background: #111 !important;
    }

    .search-results-bar {
        background: #111 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .search-results-count {
        color: #fff !important;
    }

    .search-results-for,
    .search-results-meta {
        color: rgba(255,255,255,0.6) !important;
    }

    #sortby {
        background: #1a1a1a !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
    }

    /* Filter chips */
    .active-filters-bar {
        background: #111 !important;
    }

    .active-filter-chip {
        background: #1a1a1a !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        color: #fff !important;
    }

    /* Sidebar filter groups */
    .filter-group-label {
        color: rgba(255,255,255,0.4) !important;
    }

    .filter-group details {
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .filter-group summary {
        color: #fff !important;
    }

    .filter-group summary::after {
        color: rgba(255,255,255,0.4) !important;
    }

    .filter-group details ul li a {
        color: rgba(255,255,255,0.75) !important;
    }

    .filter-count {
        color: rgba(255,255,255,0.35) !important;
    }

    /* 1 tile per row on mobile — full width with small side padding */
    .search-tile-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* Tile cards in results grid */
    .search-tile-item .tile-card,
    .tile-card {
        background: #111 !important;
    }

    .search-tile-item .tile-image {
        background: #1a1a1a !important;
    }

    .tile-name,
    .search-tile-item .tile-name {
        color: #fff !important;
    }

    /* No results */
    .search-no-results {
        background: #111 !important;
        color: #fff !important;
    }

    .search-no-results-heading {
        color: #fff !important;
    }

    .search-no-results-hint {
        color: rgba(255,255,255,0.6) !important;
    }

    /* Pagination */
    .page-btn {
        background: #1a1a1a !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }

    .page-btn--active {
        background: #ad1616 !important;
        border-color: #ad1616 !important;
    }

    /* ── SINGLE COLLECTION PAGE ── */
    .single-collection,
    .coll-hero,
    .coll-info-col,
    .coll-below {
        background: #111 !important;
    }

    .coll-breadcrumbs {
        background: #111 !important;
        color: rgba(255,255,255,0.45) !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .coll-breadcrumbs a,
    .bc-current {
        color: rgba(255,255,255,0.75) !important;
    }

    .coll-title {
        color: #fff !important;
    }

    .coll-mfr {
        color: rgba(255,255,255,0.55) !important;
    }

    .coll-mfr strong {
        color: #fff !important;
    }

    .coll-section-label {
        color: rgba(255,255,255,0.4) !important;
    }

    /* Gallery */
    .coll-gallery-main {
        background: #1a1a1a !important;
        height: 75vw !important;
        max-height: 400px !important;
        overflow: hidden !important;
    }

    .coll-gallery-main .swiper-slide {
        height: 75vw !important;
        max-height: 400px !important;
    }

    .coll-gallery-main .swiper-slide img,
    .coll-gallery-main .swiper-slide .wp-post-image {
        object-fit: contain !important;
        background: #1a1a1a;
        width: 100% !important;
        height: 100% !important;
    }

    /* Keep navigation arrows firmly inside the container */
    .coll-gallery-main .swiper-button-prev,
    .coll-gallery-main .swiper-button-next {
        width: 30px !important;
        height: 30px !important;
        --swiper-navigation-size: 11px !important;
        --swiper-navigation-sides-offset: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(0,0,0,0.55) !important;
        color: #fff !important;
    }

    .coll-thumb-item {
        border: 2px solid rgba(255,255,255,0.1) !important;
    }

    .coll-thumb-item.is-active {
        border-color: #ad1616 !important;
        opacity: 1 !important;
    }

    /* Size cards — no box, just image + label */
    .size-thumb {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    .size-thumb img {
        object-fit: cover !important;
        border-radius: 3px !important;
    }

    .size-thumb-bg {
        background: #2a2a2a !important;
        border-radius: 3px !important;
    }

    .size-item {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    .size-dim {
        color: #fff !important;
    }

    .size-thick {
        color: rgba(255,255,255,0.5) !important;
    }

    /* Slip rating / suitable for */
    .slip-text {
        color: #fff !important;
    }

    .suit-pill {
        background: #1a1a1a !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: #fff !important;
    }

    /* Technology pills — keep their dark pill look on dark bg */
    .tech-pill {
        background: #ad1616 !important;
        color: #fff !important;
    }

    /* Country of origin */
    .coll-country-list li {
        background: transparent !important;
    }

    /* Sections dividers */
    .coll-section {
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    /* Description / below fold */
    .coll-description,
    .coll-catalog,
    .coll-variants {
        border-top: 1px solid rgba(255,255,255,0.08) !important;
    }

    .coll-description p {
        color: rgba(255,255,255,0.75) !important;
    }

    .coll-description h2,
    .coll-description h3 {
        color: #fff !important;
    }

    /* Add to my selection */
    .coll-like-row .tile-like-btn {
        color: rgba(255,255,255,0.6) !important;
    }

    .coll-like-row .tile-like-btn.is-liked,
    .coll-like-row .tile-like-btn:hover {
        color: #ad1616 !important;
    }

    /* Enquire button — force text visible (WebKit can override color with text-fill-color) */
    #open-product-enquiry,
    .enquire-btn,
    .brand-btn {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: #ad1616 !important;
    }

    /* Enquiry modal — dark theme so form text is readable */
    .enquiry-modal-content {
        background: #1c1c1c !important;
        color: #fff !important;
        border-radius: 8px !important;
    }

    .enquiry-modal-content label,
    .enquiry-modal-content legend,
    .enquiry-modal-content .gfield_label,
    .enquiry-modal-content .gform_title,
    .enquiry-modal-content h3,
    .enquiry-modal-content p {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    .enquiry-modal-content .gfield_required {
        color: #e05555 !important;
    }

    .enquiry-modal-content input[type="text"],
    .enquiry-modal-content input[type="email"],
    .enquiry-modal-content input[type="tel"],
    .enquiry-modal-content textarea,
    .enquiry-modal-content select {
        background: #2a2a2a !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
        border-radius: 4px !important;
    }

    .enquiry-modal-content input::placeholder,
    .enquiry-modal-content textarea::placeholder {
        color: rgba(255,255,255,0.35) !important;
    }

    .enquiry-modal-content .gform_submit_button,
    .enquiry-modal-content input[type="submit"] {
        background: #ad1616 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    .enquiry-close {
        color: rgba(255,255,255,0.6) !important;
    }

    /* Download button */
    .coll-download-btn {
        border: 1px solid rgba(255,255,255,0.2) !important;
        color: #fff !important;
        background: transparent !important;
    }

    /* Variant cards */
    .coll-variant-card {
        background: #1a1a1a !important;
    }

    .coll-variant-name {
        color: #fff !important;
    }

}

.brand-btn:hover {
    background: #8a1010;
    color: #fff;
}

/* MODAL */
.enquiry-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;
}

.enquiry-modal.active {
    display: block;
}

.enquiry-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

.enquiry-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
    max-width: 520px;

    background: #fff;
    padding: 25px;

    border-radius: 5px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.enquiry-close {
    position: absolute;
    top: 10px;
    right: 14px;

    font-size: 26px;
    cursor: pointer;
}

/* ========== ROOM DESIGNER ========== */

.rd-app {
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: calc(100vh - 200px);
    background: #fff;
    font-family: 'Jost', sans-serif;
}

/* ── Sidebar ── */
.rd-sidebar {
    border-right: 1px solid #e8e5e1;
    padding: 20px 18px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 0;
}

.rd-step summary {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1C1B1B;
    padding: 12px 0;
    cursor: pointer;
    border-top: 1px solid #e8e5e1;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rd-step summary::-webkit-details-marker { display: none; }

.rd-step summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 300;
    color: #ad1616;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.2s;
}

.rd-step[open] summary::after {
    transform: rotate(45deg);
}

.rd-step-body {
    padding: 2px 0 16px;
}

/* Fields */
.rd-field {
    margin-bottom: 12px;
}

.rd-field-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.rd-field-row .rd-field {
    margin-bottom: 0;
}

.rd-sidebar label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #888;
    margin-bottom: 5px;
}

.rd-sidebar input[type="number"],
.rd-sidebar input[type="text"],
.rd-sidebar select {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 10px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    background: #fff;
    color: #1C1B1B;
    box-sizing: border-box;
}

.rd-sidebar input[type="range"] {
    width: 100%;
    accent-color: #ad1616;
}

.rd-hint {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin: 0 0 10px;
}

/* Buttons */
.rd-btn {
    display: block;
    width: 100%;
    border-radius: 5px;
    padding: 11px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s, color 0.2s;
    box-sizing: border-box;
}

.rd-btn-primary {
    background: #ad1616;
    color: #fff;
    border: 1px solid #ad1616;
}

.rd-btn-primary:hover {
    background: #8a1010;
    border-color: #8a1010;
    color: #fff;
}

.rd-btn-secondary {
    background: transparent;
    color: #1C1B1B;
    border: 1px solid #1C1B1B;
}

.rd-btn-secondary:hover {
    background: #1C1B1B;
    color: #fff;
}

/* Template preset chips */
.rd-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.rd-template-btn {
    background: #F7F5F2;
    border: 1px solid #e8e5e1;
    border-radius: 5px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #1C1B1B;
    padding: 8px 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.rd-template-btn:hover {
    border-color: #ad1616;
    background: #fff;
}

/* Surface label chip */
#rd-surface-label {
    display: inline-block;
    background: #F7F5F2;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    color: #1C1B1B;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Tile grid */
#rd-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 8px;
}

/* ---- "My Selection" panel (saved tiles) — visually distinct from the
   catalogue grid below it, and hidden entirely when nothing is saved. ---- */
.rd-mysel {
    border: 1px solid #d8d3cc;
    border-left: 3px solid #ad1616;
    background: #faf8f6;
    border-radius: 5px;
    padding: 10px 12px 12px;
    margin: 0 0 14px;
}
.rd-mysel[hidden] { display: none; }
.rd-mysel__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 2px;
}
.rd-mysel__title {
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #1C1B1B;
}
.rd-mysel__count { font-size: 11px; color: #6E6E6E; }
.rd-mysel__hint { margin: 0 0 9px; font-size: 11px; line-height: 1.45; color: #6E6E6E; }
.rd-mysel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 232px;
    overflow-y: auto;
}

.rd-tile-card {
    border: 1px solid #e8e5e1;
    border-radius: 5px;
    padding: 0 0 6px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    font-family: 'Jost', sans-serif;
    transition: border-color 0.2s;
}

.rd-tile-card:hover {
    border-color: #bbb;
}

.rd-tile-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.rd-tile-name {
    font-size: 11px;
    color: #555;
    padding: 4px 4px 0;
    display: block;
    line-height: 1.25;
}

.rd-tile-card.is-active {
    border-color: #ad1616;
    box-shadow: 0 0 0 1px #ad1616;
}

/* ── Main / canvas ── */
.rd-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rd-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #e8e5e1;
    flex-wrap: wrap;
    align-items: center;
}

.rd-toolbar-sep {
    width: 1px;
    height: 22px;
    background: #e8e5e1;
    margin: 0 4px;
}

.rd-tool-btn {
    background: transparent;
    border: 1px solid #e8e5e1;
    border-radius: 5px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1C1B1B;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.rd-tool-btn:hover {
    border-color: #1C1B1B;
}

.rd-tool-btn.is-active {
    background: #1C1B1B;
    border-color: #1C1B1B;
    color: #fff;
}

#rd-canvas-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 480px;
    background: #F7F5F2;
}

#rd-canvas-wrap canvas {
    display: block;
}

.rd-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 245, 242, .9);
    font-size: 14px;
    color: #555;
    z-index: 5;
}

/* ── Summary ── */
.rd-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 7px 0;
    border-bottom: 1px dashed #e8e5e1;
}

.rd-sum-label {
    color: #444;
}

.rd-sum-val {
    font-weight: 600;
    color: #1C1B1B;
    white-space: nowrap;
}

.rd-sum-total {
    font-size: 15px;
    font-weight: 700;
    padding-top: 10px;
    color: #1C1B1B;
}

.rd-sum-empty {
    font-size: 13px;
    color: #888;
    margin: 0;
}

#rd-summary {
    margin-bottom: 14px;
}

/* Mobile note (hidden on desktop) */
.rd-mobile-note {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .rd-app {
        grid-template-columns: 1fr;
    }

    .rd-sidebar {
        position: static;
        max-height: none;
        order: 2;
        border-right: none;
        border-top: 1px solid #e8e5e1;
    }

    .rd-main {
        order: 1;
    }

    #rd-canvas-wrap {
        height: 60vw;
        min-height: 320px;
    }

    .rd-mobile-note {
        display: block;
        font-size: 12px;
        padding: 8px 14px;
        margin: 0;
        background: #F7F5F2;
        color: #555;
    }
}

/* ── Mobile dark theme compatibility ── */
@media (max-width: 767px) {
    #rd-app {
        background: #111 !important;
    }

    #rd-app .rd-sidebar {
        border-color: rgba(255,255,255,0.12) !important;
    }

    #rd-app .rd-step summary {
        color: #fff !important;
        border-color: rgba(255,255,255,0.1) !important;
    }

    #rd-app .rd-sidebar label,
    #rd-app .rd-hint {
        color: rgba(255,255,255,0.6) !important;
    }

    #rd-app .rd-mobile-note {
        background: #1a1a1a !important;
        color: rgba(255,255,255,0.7) !important;
    }

    #rd-app .rd-tile-card {
        background: #1a1a1a !important;
        border-color: rgba(255,255,255,0.12) !important;
    }

    #rd-app .rd-tile-card.is-active {
        border-color: #ad1616 !important;
    }

    #rd-app .rd-tile-name {
        color: rgba(255,255,255,0.75) !important;
    }

    #rd-app .rd-sum-row {
        border-color: rgba(255,255,255,0.15) !important;
    }

    #rd-app .rd-sum-label {
        color: rgba(255,255,255,0.7) !important;
    }

    #rd-app .rd-sum-val,
    #rd-app .rd-sum-total {
        color: #fff !important;
    }

    #rd-app .rd-sum-empty {
        color: rgba(255,255,255,0.5) !important;
    }

    #rd-app .rd-toolbar {
        border-color: rgba(255,255,255,0.1) !important;
    }

    #rd-app .rd-tool-btn {
        color: #fff !important;
        border-color: rgba(255,255,255,0.2) !important;
        background: transparent !important;
    }

    #rd-app .rd-tool-btn.is-active {
        background: #ad1616 !important;
        border-color: #ad1616 !important;
        color: #fff !important;
    }

    #rd-app .rd-template-btn {
        background: #1a1a1a !important;
        border-color: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }

    #rd-app .rd-btn-secondary {
        color: #fff !important;
        border-color: rgba(255,255,255,0.35) !important;
        background: transparent !important;
    }

    #rd-app .rd-btn-primary {
        background: #ad1616 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    #rd-app #rd-canvas-wrap {
        background: #1a1a1a !important;
    }

    #rd-app .rd-loading {
        background: rgba(17,17,17,0.9) !important;
        color: rgba(255,255,255,0.7) !important;
    }

    #rd-app #rd-surface-label {
        background: #1a1a1a !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
    }
}

/* ===== ROOM DESIGNER — PHASE 2 ===== */

/* Tile-all checkbox row */
.rd-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 12px;
}

.rd-check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #ad1616;
    flex-shrink: 0;
    margin: 0;
}

.rd-check-row label {
    font-size: 13px;
    color: #1C1B1B;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Sun time-of-day control in the toolbar */
.rd-sun-ctrl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #555;
    white-space: nowrap;
}

.rd-sun-ctrl input[type="range"] {
    width: 110px;
    accent-color: #ad1616;
    margin: 0;
}

.rd-sun-ctrl output {
    font-size: 12px;
    font-weight: 600;
    color: #1C1B1B;
    min-width: 44px;
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .rd-sun-ctrl {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        padding-top: 4px;
    }
}

/* Phase 2 mobile dark theme */
@media (max-width: 767px) {
    #rd-app .rd-check-row label {
        color: rgba(255,255,255,0.85) !important;
    }

    #rd-app .rd-sun-ctrl {
        color: rgba(255,255,255,0.6) !important;
    }

    #rd-app .rd-sun-ctrl output {
        color: #fff !important;
    }

    #rd-app #rd-render-overlay {
        background: rgba(17,17,17,0.9) !important;
        color: rgba(255,255,255,0.7) !important;
    }
}

/* ===== ROOM DESIGNER — PHASE 3 ===== */

/* Brightness control — the sun-time slider was removed, so Brightness is now
   the sole '.rd-sun-ctrl' element; it inherits that class's margin-left:auto
   to stay pinned to the right of the toolbar (no override needed here). */
.rd-bright-ctrl input[type="range"] {
    width: 90px;
}

.rd-bright-ctrl output {
    min-width: 40px;
}

@media (max-width: 900px) {
    .rd-bright-ctrl {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        padding-top: 4px;
    }
}

/* Phase 3 mobile dark theme */
@media (max-width: 767px) {
    #rd-app .rd-bright-ctrl {
        color: rgba(255,255,255,0.6) !important;
    }

    #rd-app .rd-bright-ctrl output {
        color: #fff !important;
    }
}

/* ===== ROOM DESIGNER — PHASE 4 ===== */

/* Send-form validation message */
.rd-send-error {
    color: #ad1616;
    font-size: 12px;
    margin: 6px 0 0;
}

/* Contact fields — tel/email inputs match the existing text/number styling */
.rd-sidebar input[type="tel"],
.rd-sidebar input[type="email"] {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 10px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    background: #fff;
    color: #1C1B1B;
    box-sizing: border-box;
}

/* Tile drag & drop */
.rd-tile-card {
    cursor: grab;
}

#rd-canvas-wrap.rd-drop-target {
    outline: 3px solid #ad1616;
    outline-offset: -3px;
}

/* Sticky mobile canvas — the 3D view stays pinned while the sidebar scrolls.
   Must be flex, not grid: a sticky grid item in an auto-sized row has zero
   travel (its containing block equals its own height) and never sticks. */
@media (max-width: 900px) {
    .rd-app {
        display: flex;
        flex-direction: column;
    }

    .rd-main {
        position: sticky;
        top: 0;
        z-index: 30;
        background: #fff;
        box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

    #rd-canvas-wrap {
        height: 44vh;
        min-height: 280px;
    }
}

/* Phase 4 mobile dark theme */
@media (max-width: 767px) {
    #rd-app .rd-main {
        background: #111 !important;
    }
}

/* ===== ROOM DESIGNER — PHASE 5: SEND FORM MODAL ===== */
.rd-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    font-family: 'Jost', sans-serif;
}

.rd-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.rd-modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    padding: 28px 26px 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.rd-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 4px;
}

.rd-modal-close:hover { color: #1C1B1B; }

.rd-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 0 0 6px;
}

.rd-modal-sub {
    font-size: 13px;
    color: #666;
    margin: 0 0 18px;
    line-height: 1.5;
}

.rd-modal .rd-field { margin-bottom: 12px; }

.rd-modal .rd-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
}

.rd-modal .rd-field input {
    width: 100%;
    height: 42px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 12px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    background: #fff;
    color: #1C1B1B;
    box-sizing: border-box;
}

#rd-send-submit { width: 100%; margin-top: 6px; }

/* Modal mobile dark theme */
@media (max-width: 767px) {
    .rd-modal-box {
        background: #1c1c1c !important;
    }

    .rd-modal-title { color: #fff !important; }
    .rd-modal-sub { color: rgba(255,255,255,0.6) !important; }
    .rd-modal .rd-field label { color: rgba(255,255,255,0.6) !important; }
    .rd-modal-close { color: rgba(255,255,255,0.6) !important; }
}

/* ===== ROOM DESIGNER — PHASE 6: PHOTOREAL RENDERING ===== */

/* .rd-loading is already a flex-centered cover — stack the progress text
   and cancel button vertically. */
.rd-loading {
    flex-direction: column;
    gap: 14px;
}

#rd-pt-overlay {
    z-index: 6;
}

.rd-pt-cancel-btn {
    width: auto;
    padding: 9px 22px;
}

#rd-pt-progress {
    font-size: 14px;
    color: #555;
}

/* Path tracing is desktop-only */
@media (max-width: 900px) {
    #rd-render-pt {
        display: none;
    }
}

/* Phase 6 mobile dark theme */
@media (max-width: 767px) {
    #rd-app #rd-pt-overlay {
        background: rgba(17,17,17,0.92) !important;
    }

    #rd-app #rd-pt-progress {
        color: rgba(255,255,255,0.75) !important;
    }
}


/* ===== ROOM DESIGNER — PHASE 7: BOX CALCULATOR ===== */
.rd-sum-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    padding: 12px 0 4px;
    border-top: 1px solid #e8e5e1;
    margin-top: 10px;
}

@media (max-width: 767px) {
    #rd-app .rd-sum-head {
        color: rgba(255,255,255,0.5) !important;
        border-color: rgba(255,255,255,0.1) !important;
    }
}


/* ===== ROOM DESIGNER — PHASE 8: DISCLAIMER ===== */
.rd-disclaimer {
    max-width: 1000px;
    margin: 32px auto 40px;
    padding: 16px 26px;
    text-align: center;
    box-sizing: border-box;
}

.rd-disclaimer strong {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #ad1616;
    background: #fdf1f1;
    border: 1px solid rgba(173,22,22,0.25);
    border-radius: 6px;
    padding: 14px 20px;
}

@media (max-width: 767px) {
    .rd-disclaimer strong {
        background: rgba(173,22,22,0.14);
        border-color: rgba(173,22,22,0.4);
        color: #ff8080;
    }
}


/* ===== ROOM DESIGNER — PHASE 9: MOBILE SPACE OPTIMISATION ===== */
/* Scoped to the Build My Space template only via its WP body class —
   no other page is affected. Goal: strip chrome so the 3D view and the
   controls get as much of a phone screen as possible. */
@media (max-width: 900px) {

    /* Header extras — My Selection, search and the contact block all eat
       vertical space the designer needs; all are reachable elsewhere. */
    body.page-template-page-room-designer .tile-favorites-link,
    body.page-template-page-room-designer .header-search,
    body.page-template-page-room-designer .header-contact {
        display: none !important;
    }

    /* The floating "Send Us a Text" bubble overlaps the 3D view. */
    body.page-template-page-room-designer #message-bubble {
        display: none !important;
    }

    /* The "works best on desktop" tip costs a line the canvas can use. */
    body.page-template-page-room-designer .rd-mobile-note {
        display: none !important;
    }

    /* Tighter toolbar. */
    body.page-template-page-room-designer .rd-toolbar {
        padding: 6px 8px;
        gap: 5px;
    }

    body.page-template-page-room-designer .rd-tool-btn {
        font-size: 10px;
        padding: 5px 8px;
    }

    body.page-template-page-room-designer .rd-bright-ctrl {
        padding-top: 2px;
    }

    /* Tighter sidebar chrome. */
    body.page-template-page-room-designer .rd-sidebar {
        padding: 10px 12px;
    }

    body.page-template-page-room-designer .rd-step summary {
        padding: 9px 0;
    }

    body.page-template-page-room-designer .rd-hint {
        font-size: 11px;
        margin: 6px 0;
    }

    body.page-template-page-room-designer .rd-disclaimer {
        margin: 18px auto 24px;
        padding: 0 14px;
    }

    /* The freed-up chrome goes to the sticky 3D view. */
    body.page-template-page-room-designer #rd-canvas-wrap {
        height: 48vh;
    }
}


/* ===== DESIGN PROMO BUBBLE (was "Send Us a Text") ===== */
/* The bubble is now an <a> linking to Build My Space with two stacked
   lines — main + small promo line. Base #message-toggle styles above
   still apply; these override the layout and anchor states. */
#message-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    text-decoration: none;
}

#message-toggle:hover,
#message-toggle:visited,
#message-toggle:focus {
    color: #fff;
    text-decoration: none;
}

#message-toggle .bubble-main {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
}

#message-toggle .bubble-sub {
    font-size: 10px;
    font-weight: 500;
    color: #ff9d9d;
    letter-spacing: 0.04em;
}


/* ===== ROOM DESIGNER — PHASE 10: STEP-BY-STEP WIZARD ===== */

/* Progress pills — tap to jump between steps */
.rd-wprogress {
    list-style: none;
    display: flex;
    gap: 2px;
    padding: 0 0 14px;
    margin: 0 0 16px;
    border-bottom: 1px solid #e8e5e1;
}

.rd-wprogress li {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
    cursor: pointer;
    padding: 4px 1px;
    border-radius: 5px;
    transition: color 0.15s;
    user-select: none;
}

.rd-wprogress li span {
    display: block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: #ececea;
    color: #666;
    margin: 0 auto 4px;
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.rd-wprogress li:hover { color: #1C1B1B; }
.rd-wprogress li.is-active { color: #1C1B1B; }
.rd-wprogress li.is-active span { background: #ad1616; color: #fff; }
.rd-wprogress li.is-done span { background: #1C1B1B; color: #fff; }

/* One step at a time */
.rd-wstep { display: none; }
.rd-wstep.is-active { display: block; }

.rd-wtitle {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 0 0 6px;
}

.rd-wdesc {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: #555;
    line-height: 1.55;
    margin: 0 0 14px;
}

/* Back / Next row */
.rd-wnav {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e8e5e1;
}

.rd-wnav .rd-wback {
    flex: 0 0 auto;
    width: auto;
    padding-left: 14px;
    padding-right: 14px;
}

.rd-wnav .rd-wnext {
    flex: 1;
    width: auto;
}

/* Mobile dark theme */
@media (max-width: 767px) {
    #rd-app .rd-wprogress { border-color: rgba(255,255,255,0.1) !important; }
    #rd-app .rd-wprogress li { color: rgba(255,255,255,0.45) !important; }
    #rd-app .rd-wprogress li span { background: #2a2a2a !important; color: rgba(255,255,255,0.6) !important; }
    #rd-app .rd-wprogress li.is-active { color: #fff !important; }
    #rd-app .rd-wprogress li.is-active span { background: #ad1616 !important; color: #fff !important; }
    #rd-app .rd-wprogress li.is-done span { background: #555 !important; color: #fff !important; }
    #rd-app .rd-wtitle { color: #fff !important; }
    #rd-app .rd-wdesc { color: rgba(255,255,255,0.65) !important; }
    #rd-app .rd-wnav { border-color: rgba(255,255,255,0.1) !important; }
}

/* ===== CATEGORY SEO COPY ===== */
.cat-seo-h1 {
    font-family: 'Jost', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1C1B1B;
    margin: 18px 0 6px;
}

.cat-seo-intro {
    max-width: 860px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #444;
    margin: 0 0 22px;
}

.cat-seo-intro h2 {
    font-size: 17px;
    margin: 14px 0 6px;
    color: #1C1B1B;
}

/* Mobile dark theme override */
@media (max-width: 767px) {
    #main-content .cat-seo-h1 { color: #fff !important; }
    #main-content .cat-seo-intro { color: rgba(255,255,255,0.7) !important; }
    #main-content .cat-seo-intro h2 { color: #fff !important; }
}

/* ---- News archive page header (single page-level H1; cards are now h2) ---- */
.archive-page-header { padding: 24px 15px 4px; }
.archive-page-title { font-size: 28px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; }
.news-loop .entry-title a { color: inherit; text-decoration: none; }
.news-loop .entry-title a:hover { color: #ad1616; }

/* ==== Range explorer — Colours & Finishes panel (product sidebar) ==== */
.coll-range-selected { margin: 0 0 10px; font-size: 13px; color: #444; display: flex; align-items: baseline; gap: 10px; }
.coll-range-selected strong { font-weight: 700; color: #1c1c1c; }
.coll-range-count { margin-left: auto; font-size: 11px; color: #999; white-space: nowrap; }
.coll-range-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.coll-range-swatch { position: relative; width: 56px; height: 56px; border: 1px solid #ddd; border-radius: 4px; overflow: visible; display: block; background: #f4f4f4; }
.coll-range-swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.coll-range-swatch:hover { border-color: #ad1616; }
.coll-range-swatch.is-current { border: 2px solid #1c1c1c; box-shadow: inset 0 0 0 2px #fff; }
.coll-range-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; font-weight: 700; color: #bbb; }
.coll-range-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #1c1c1c; color: #fff; font-size: 11px; line-height: 1.3; padding: 5px 9px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 30; }
.coll-range-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1c1c1c; }
.coll-range-swatch:hover .coll-range-tip,
.coll-range-swatch:focus-visible .coll-range-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 767px) {
  /* sidebar renders on the dark theme on mobile */
  .coll-range-selected { color: rgba(255,255,255,0.65); }
  .coll-range-selected strong { color: #fff; }
  .coll-range-count { color: rgba(255,255,255,0.4); }
  .coll-range-swatch { border-color: rgba(255,255,255,0.25); background: #222; }
  .coll-range-swatch.is-current { border-color: #fff; box-shadow: inset 0 0 0 2px #111; }
}

/* ==========================================================================
   VANITY BUILDER  (Build My Space)

   Every control here is at least 44px and every selected state is carried by
   a ring and a tick, never by colour alone — the colour step is a grid of
   twelve colours, so "the selected one is the highlighted one" would be
   unreadable exactly where it matters most.
   ========================================================================== */

.rd-vb {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.rd-vb[hidden] { display: none; }                 /* must follow the flex rule */

.rd-vb__backdrop { position: absolute; inset: 0; background: rgba(20,19,18,.62); }

/* Hold the page still underneath, or a scroll that runs past the end of the
   panel drags the designer around behind it. */
body.rd-vb-open { overflow: hidden; }

.rd-vb__panel {
    position: relative;
    display: flex; flex-direction: column;
    width: 100%; max-width: 680px; max-height: calc(100vh - 32px);
    background: #fff; border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    font-family: 'Jost', sans-serif;
    overflow: hidden;
}

.rd-vb__head {
    flex: 0 0 auto;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #ece9e4;
}
.rd-vb__title { margin: 0; font-size: 19px; font-weight: 700; color: #1C1B1B; }
.rd-vb__sub   { margin: 3px 0 0; font-size: 13px; color: #7d7772; }
.rd-vb__x {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #f4f2ef; border: 0; border-radius: 50%;
    font-size: 24px; line-height: 1; color: #5a5450; cursor: pointer;
}
.rd-vb__x:hover { background: #e8e4df; color: #1C1B1B; }

/* ---- Live preview ---- */
.rd-vb__preview {
    position: relative; flex: 0 0 auto;
    height: 200px; background: #f4f2ef;
    border-bottom: 1px solid #ece9e4;
    touch-action: none;                 /* the drag turns the vanity, not the page */
}
.rd-vb__preview canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.rd-vb__preview canvas:active { cursor: grabbing; }
.rd-vb__preview-hint {
    position: absolute; left: 0; right: 0; bottom: 6px; margin: 0;
    text-align: center; font-size: 11.5px; color: #9a938c;
    pointer-events: none; transition: opacity .4s ease;
}
.rd-vb__preview-hint.is-faded { opacity: 0; }

.rd-vb__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 8px; }

.rd-vb__step { padding: 16px 0; border-bottom: 1px solid #f1eeea; }
.rd-vb__step:last-child { border-bottom: 0; }
.rd-vb__steph {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #1C1B1B;
}
.rd-vb__num {
    flex: 0 0 26px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: #ad1616; color: #fff;
    border-radius: 50%; font-size: 13px; font-weight: 700;
}
.rd-vb__note { margin: -4px 0 10px; font-size: 12.5px; color: #8b847e; }
.rd-vb__sub-block { margin-top: 14px; }
.rd-vb__subh { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #4a4542; }

/* ---- Cards: ranges, tops, basins ---- */
.rd-vb__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rd-vb__card {
    position: relative; display: block; width: 100%; min-height: 64px;
    padding: 12px 38px 12px 14px;
    background: #fff; border: 2px solid #e4e0da; border-radius: 8px;
    text-align: left; cursor: pointer; font-family: inherit;
}
.rd-vb__card:hover { border-color: #c9c3bb; }
.rd-vb__card.is-on { border-color: #ad1616; background: #fdf7f7; }
.rd-vb__card-name { display: block; font-size: 14px; font-weight: 700; color: #1C1B1B; }
.rd-vb__card-sub  { display: block; margin-top: 3px; font-size: 12px; color: #857e78; line-height: 1.35; }
.rd-vb__card[disabled] { opacity: .5; cursor: not-allowed; }
.rd-vb__card[disabled]:hover { border-color: #e4e0da; }

/* ---- Pills: sizes, variants ---- */
.rd-vb__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-vb__pill {
    position: relative; min-width: 76px; min-height: 46px;
    padding: 11px 16px;
    background: #fff; border: 2px solid #e4e0da; border-radius: 999px;
    font-family: inherit; font-size: 14px; font-weight: 600; color: #1C1B1B;
    cursor: pointer;
}
.rd-vb__pill:hover { border-color: #c9c3bb; }
.rd-vb__pill.is-on { border-color: #ad1616; background: #ad1616; color: #fff; }
.rd-vb__pill[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Colour swatches ---- */
.rd-vb__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.rd-vb__sw {
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
    padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit;
}
.rd-vb__sw-chip {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 8px; border: 2px solid rgba(0,0,0,.14);
    background-size: cover; background-position: center;
}
.rd-vb__sw.is-on .rd-vb__sw-chip {
    border-color: #ad1616;
    box-shadow: 0 0 0 3px rgba(173,22,22,.22);
}
/* The tick, not the ring, is what makes the choice readable on a dark chip. */
.rd-vb__sw-tick {
    position: absolute; right: 5px; bottom: 5px;
    width: 22px; height: 22px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: #ad1616; color: #fff; font-size: 13px; line-height: 1;
}
.rd-vb__sw.is-on .rd-vb__sw-tick { display: flex; }
.rd-vb__sw-name { font-size: 11.5px; line-height: 1.25; color: #4a4542; text-align: center; }
.rd-vb__sw.is-on .rd-vb__sw-name { color: #1C1B1B; font-weight: 700; }

/* ---- Hanging height ---- */
.rd-vb__hang { display: flex; align-items: center; gap: 14px; }
.rd-vb__hang input[type="range"] { flex: 1 1 auto; min-width: 0; height: 32px; }
.rd-vb__hangout {
    flex: 0 0 auto; min-width: 74px; text-align: right;
    font-size: 15px; font-weight: 700; color: #1C1B1B; font-variant-numeric: tabular-nums;
}

/* ---- Footer ---- */
.rd-vb__foot {
    flex: 0 0 auto;
    padding: 14px 20px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid #ece9e4; background: #faf9f7;
}
.rd-vb__summary { margin: 0 0 10px; font-size: 13px; color: #5a5450; line-height: 1.4; }
.rd-vb__summary strong { color: #1C1B1B; }
.rd-vb__warn { color: #9a5b12; }
.rd-vb__actions { display: flex; gap: 10px; }
.rd-vb__actions .rd-btn { flex: 1 1 auto; min-height: 46px; }

@media (max-width: 560px) {
    .rd-vb { padding: 0; }
    .rd-vb__panel { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
    .rd-vb__cards { grid-template-columns: 1fr; }
    .rd-vb__swatches { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* The designer runs its dark theme by viewport width, not a class. */
@media (max-width: 767px) {
    .rd-vb__panel { background: #1e1e1e; }
    .rd-vb__head, .rd-vb__foot { border-color: rgba(255,255,255,.1); }
    .rd-vb__foot { background: #191919; }
    .rd-vb__title, .rd-vb__card-name, .rd-vb__pill, .rd-vb__hangout,
    .rd-vb__summary strong { color: #fff; }
    .rd-vb__sub, .rd-vb__note, .rd-vb__card-sub, .rd-vb__summary { color: rgba(255,255,255,.6); }
    .rd-vb__subh, .rd-vb__sw-name { color: rgba(255,255,255,.75); }
    .rd-vb__steph { color: #fff; }
    .rd-vb__step { border-color: rgba(255,255,255,.08); }
    .rd-vb__x { background: rgba(255,255,255,.1); color: #fff; }
    .rd-vb__preview { background: #141414; border-color: rgba(255,255,255,.1); }
    .rd-vb__preview-hint { color: rgba(255,255,255,.45); }
    .rd-vb__card, .rd-vb__pill { background: #262626; border-color: rgba(255,255,255,.16); }
    .rd-vb__card.is-on { background: #3a1f1f; border-color: #e04a4a; }
    .rd-vb__pill.is-on { background: #ad1616; border-color: #ad1616; }
    .rd-vb__sw-chip { border-color: rgba(255,255,255,.22); }
    .rd-vb__sw.is-on .rd-vb__sw-name { color: #fff; }
}