/*
Theme Name:   Ribology
Theme URI:    https://ribology.com.au
Description:  Custom child theme for Ribology — Australian RNA extraction kits. Built on Royal Elementor Kit. Houses bespoke WooCommerce templates and brand styling per the Ribology Brand Brief 2025.
Author:       Ribology
Author URI:   https://ribology.com.au
Template:     royal-elementor-kit
Version:      2.0.41
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ribology-child
*/

/* =========================================================
   RIBOLOGY BRAND TOKENS
   ========================================================= */
:root {
    --ribology-sky-blue:    #19B3D7;
    --ribology-sky-blue-dk: #1499B8;
    --ribology-deep-navy:   #174379;
    --ribology-deep-navy-dk:#0F2F5C;
    --ribology-charcoal:    #3D3D3D;
    --ribology-charcoal-lt: #6B6B6B;
    --ribology-forest:      #177917;
    --ribology-lab-white:   #F7F9FA;
    --ribology-border:      #E5E9EE;
    --ribology-white:       #FFFFFF;

    --ribology-font:        'Poppins', 'Montserrat', 'Avenir Next', system-ui, -apple-system, sans-serif;

    --ribology-line-height: 1.65;
    --ribology-radius:      8px;
    --ribology-radius-sm:   6px;
    --ribology-max-width:   1400px;
    --ribology-header-h:    88px;

    --ribology-shadow-sm:   0 1px 2px rgba(23, 67, 121, 0.04);
    --ribology-shadow-md:   0 4px 16px rgba(23, 67, 121, 0.08);

    --ribology-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   BASE
   ========================================================= */
body {
    font-family: var(--ribology-font);
    color: var(--ribology-charcoal);
    background: var(--ribology-white);
    line-height: var(--ribology-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ribology-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ribology-skip-link {
    position: absolute;
    left: -9999px; top: 8px;
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    padding: 10px 16px;
    border-radius: var(--ribology-radius-sm);
    font-weight: 600;
    z-index: 9999;
}
.ribology-skip-link:focus { left: 8px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.ribology-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-family: var(--ribology-font);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--ribology-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s var(--ribology-ease);
    white-space: nowrap;
}
.ribology-btn--primary {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border-color: var(--ribology-deep-navy);
}
.ribology-btn--primary:hover,
.ribology-btn--primary:focus {
    background: var(--ribology-deep-navy-dk);
    border-color: var(--ribology-deep-navy-dk);
    color: var(--ribology-white);
    transform: translateY(-1px);
    box-shadow: var(--ribology-shadow-md);
}
.ribology-btn--accent {
    background: var(--ribology-sky-blue);
    color: var(--ribology-white);
    border-color: var(--ribology-sky-blue);
}
.ribology-btn--accent:hover,
.ribology-btn--accent:focus {
    background: var(--ribology-sky-blue-dk);
    border-color: var(--ribology-sky-blue-dk);
    color: var(--ribology-white);
    transform: translateY(-1px);
    box-shadow: var(--ribology-shadow-md);
}
.ribology-btn--secondary {
    background: transparent;
    color: var(--ribology-deep-navy);
    border-color: var(--ribology-deep-navy);
}
.ribology-btn--secondary:hover,
.ribology-btn--secondary:focus {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
}

/* =========================================================
   HEADER
   ========================================================= */
.ribology-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ribology-white);
    border-bottom: 1px solid var(--ribology-border);
    box-shadow: var(--ribology-shadow-sm);
    transition: box-shadow 0.2s var(--ribology-ease);
}
.ribology-header.is-scrolled { box-shadow: var(--ribology-shadow-md); }

.ribology-header__inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0 40px;
    height: var(--ribology-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.ribology-header__logo { flex: 0 0 auto; min-width: 0; }
.ribology-header__logo a { display: inline-flex; align-items: center; text-decoration: none; }
.ribology-header__logo img { height: 34px; width: auto; max-width: 220px; display: block; object-fit: contain; }

.ribology-header__nav { flex: 1; display: flex; justify-content: center; }
.ribology-header__menu {
    display: flex;
    gap: 44px;
    margin: 0; padding: 0;
    list-style: none;
}
.ribology-header__menu li { margin: 0; }
.ribology-header__menu a {
    display: inline-block;
    color: var(--ribology-charcoal);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 0;
    position: relative;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-header__menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--ribology-sky-blue);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s var(--ribology-ease);
}
.ribology-header__menu a:hover,
.ribology-header__menu .current-menu-item > a { color: var(--ribology-sky-blue); }
.ribology-header__menu a:hover::after,
.ribology-header__menu .current-menu-item > a::after { transform: scaleX(1); }

.ribology-header__utility { display: flex; align-items: center; gap: 14px; }

.ribology-header__mobile-actions {
    display: none;
}

/* Icon buttons — force consistent styling on both <button> and <a> elements.
   Overrides default button styling some themes/browsers apply. */
.ribology-header__icon-btn,
.ribology-header__icon-btn:hover,
.ribology-header__icon-btn:focus,
.ribology-header__icon-btn:active {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border-radius: var(--ribology-radius-sm);
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    color: var(--ribology-charcoal);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    line-height: 1;
    outline: none;
    font: inherit;
}
.ribology-header__icon-btn {
    transition: background-color 0.15s var(--ribology-ease), color 0.15s var(--ribology-ease);
}
.ribology-header__icon-btn:hover,
.ribology-header__icon-btn:focus-visible {
    background-color: var(--ribology-lab-white);
    color: var(--ribology-sky-blue);
}
.ribology-header__icon-btn:focus-visible {
    outline: 2px solid var(--ribology-sky-blue);
    outline-offset: 2px;
}
.ribology-header__icon-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
}

.ribology-header__cart-count {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ribology-sky-blue);
    color: var(--ribology-white);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.ribology-header__cta { margin-left: 12px; }

.ribology-header__menu-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.ribology-header__menu-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--ribology-charcoal);
    border-radius: 2px;
    transition: all 0.2s var(--ribology-ease);
}

.ribology-header__search-panel {
    background: var(--ribology-lab-white);
    border-bottom: 1px solid var(--ribology-border);
    padding: 24px;
}
.ribology-header__search-inner { max-width: 600px; margin: 0 auto; }
.ribology-header__search-inner form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ribology-header__search-inner input[type="search"] {
    flex: 1; min-width: 180px; height: 48px; padding: 0 16px;
    font-family: var(--ribology-font);
    font-size: 1rem;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-white);
    color: var(--ribology-charcoal);
}
.ribology-header__search-inner input[type="search"]:focus {
    outline: none;
    border-color: var(--ribology-sky-blue);
    box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15);
}

/* =========================================================
   RESPONSIVE — HEADER
   ========================================================= */
@media (max-width: 1024px) {
    .ribology-header__inner { gap: 24px; padding: 0 24px; }
    .ribology-header__menu { gap: 28px; }
}

@media (max-width: 960px) {
    .ribology-header__nav,
    .ribology-header__cta { display: none; }
    .ribology-header__menu-toggle { display: inline-flex; }
    .ribology-header__inner { gap: 12px; }

    .ribology-header.is-menu-open .ribology-header__nav {
        display: block;
        position: absolute;
        top: var(--ribology-header-h);
        left: 0; right: 0;
        background: var(--ribology-white);
        border-bottom: 1px solid var(--ribology-border);
        padding: 16px 24px 24px;
        box-shadow: var(--ribology-shadow-md);
    }
    .ribology-header.is-menu-open .ribology-header__menu {
        flex-direction: column;
        gap: 4px;
    }
    .ribology-header.is-menu-open .ribology-header__menu a {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--ribology-border);
        font-size: 0.95rem;
    }
    .ribology-header.is-menu-open .ribology-header__cta {
        display: inline-flex;
        margin-top: 16px;
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ribology-header__inner { padding: 0 16px; height: 72px; }
    .ribology-header__logo img { height: 26px; }
}

/* =========================================================
   MAIN CONTENT WRAPPER
   ========================================================= */
.ribology-main { min-height: 60vh; }

/* =========================================================
   FOOTER
   ========================================================= */
.ribology-footer {
    background: var(--ribology-white);
    border-top: 4px solid var(--ribology-deep-navy);
    margin-top: 80px;
}

/* Newsletter band */
.ribology-footer__newsletter {
    background: var(--ribology-lab-white);
    border-bottom: 1px solid var(--ribology-border);
}
.ribology-footer__newsletter-inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 40px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.ribology-footer__newsletter-text h3 {
    font-family: var(--ribology-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.ribology-footer__newsletter-text p {
    font-size: 0.9rem;
    color: var(--ribology-charcoal-lt);
    margin: 0;
    line-height: 1.55;
}
.ribology-footer__newsletter-form {
    display: flex;
    gap: 10px;
}
.ribology-footer__newsletter-form input[type="email"] {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    font-family: var(--ribology-font);
    font-size: 0.95rem;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-white);
    color: var(--ribology-charcoal);
}
.ribology-footer__newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--ribology-sky-blue);
    box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15);
}
.ribology-footer__newsletter-form .ribology-btn {
    height: 48px;
    padding: 0 28px;
}

/* Four-column area */
.ribology-footer__cols {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 56px 40px 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 48px;
}
.ribology-footer__col { min-width: 0; }
.ribology-footer__heading {
    font-family: var(--ribology-font);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ribology-deep-navy);
    margin: 0 0 22px;
}
.ribology-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ribology-footer__menu li { margin: 0 0 12px; }
.ribology-footer__menu a {
    color: var(--ribology-charcoal);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-footer__menu a:hover { color: var(--ribology-sky-blue); }

/* Brand column */
.ribology-footer__brand-logo {
    display: inline-flex;
    text-decoration: none;
    margin: 0 0 18px;
}
.ribology-footer__brand-logo img {
    height: 28px;
    width: auto;
    display: block;
}
.ribology-footer__tagline {
    font-size: 0.92rem;
    color: var(--ribology-charcoal-lt);
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 320px;
}
.ribology-footer__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ribology-footer__badge {
    font-family: var(--ribology-font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ribology-deep-navy);
    background: var(--ribology-lab-white);
    border: 1px solid var(--ribology-border);
    padding: 6px 11px;
    border-radius: 4px;
}

/* Contact column */
.ribology-footer__contact-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: var(--ribology-charcoal);
    line-height: 1.5;
}
.ribology-footer__contact-item svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--ribology-sky-blue);
}
.ribology-footer__contact-item a {
    color: var(--ribology-charcoal);
    text-decoration: none;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-footer__contact-item a:hover { color: var(--ribology-sky-blue); }

/* Social */
.ribology-footer__social {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}
.ribology-footer__social a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-lab-white);
    color: var(--ribology-charcoal);
    border: 1px solid var(--ribology-border);
    transition: all 0.15s var(--ribology-ease);
    text-decoration: none;
}
.ribology-footer__social a:hover {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border-color: var(--ribology-deep-navy);
    transform: translateY(-1px);
}
.ribology-footer__social svg { display: block; }

/* Bottom bar */
.ribology-footer__bottom {
    background: var(--ribology-lab-white);
    border-top: 1px solid var(--ribology-border);
}
.ribology-footer__bottom-inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ribology-footer__copy {
    font-size: 0.82rem;
    color: var(--ribology-charcoal-lt);
}
.ribology-footer__copy strong {
    color: var(--ribology-charcoal);
    font-weight: 500;
}
.ribology-footer__legal {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.ribology-footer__legal a {
    font-size: 0.82rem;
    color: var(--ribology-charcoal-lt);
    text-decoration: none;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-footer__legal a:hover { color: var(--ribology-sky-blue); }

/* Responsive footer */
@media (max-width: 1024px) {
    .ribology-footer__cols {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 48px 24px 32px;
    }
    .ribology-footer__newsletter-inner {
        padding: 32px 24px;
        gap: 28px;
    }
}

@media (max-width: 640px) {
    .ribology-footer__newsletter-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ribology-footer__newsletter-form {
        flex-direction: column;
    }
    .ribology-footer__newsletter-form input[type="email"],
    .ribology-footer__newsletter-form .ribology-btn {
        width: 100%;
    }
    .ribology-footer__cols {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 16px 24px;
    }
    .ribology-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
    }
    .ribology-footer__legal {
        gap: 16px;
    }
}

/* =========================================================
   PRODUCT PAGE (PDP)
   ========================================================= */

/* Animations */
@keyframes ribologyFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ribologyFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ribologyPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes ribologyPriceFlash {
    0%   { color: var(--ribology-deep-navy); }
    40%  { color: var(--ribology-sky-blue); }
    100% { color: var(--ribology-deep-navy); }
}

/* Hide WooCommerce defaults that conflict with our layout */
.ribology-pdp .price > .amount,
.ribology-pdp .price ins,
.ribology-pdp .price del { display: inline; }

.ribology-pdp .woocommerce-product-rating,
.ribology-pdp .product_meta,
.ribology-pdp .woocommerce-tabs { display: none; }

/* Article wrapper */
.ribology-pdp {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0;
    animation: ribologyFadeIn 0.5s ease-out;
}

/* Breadcrumb */
.ribology-pdp__breadcrumb {
    background: var(--ribology-lab-white);
    border-bottom: 1px solid var(--ribology-border);
    padding: 16px 40px;
    font-size: 0.82rem;
    color: var(--ribology-charcoal-lt);
}
.ribology-pdp__breadcrumb a {
    color: var(--ribology-charcoal-lt);
    text-decoration: none;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-pdp__breadcrumb a:hover { color: var(--ribology-sky-blue); }
.ribology-pdp__breadcrumb .sep {
    margin: 0 8px;
    opacity: 0.5;
}
.ribology-pdp__breadcrumb .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
}

/* 2-column main */
.ribology-pdp__main {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    padding: 40px;
}

/* Gallery */
.ribology-pdp__gallery {
    animation: ribologyFadeUp 0.6s ease-out 0.05s both;
}
.ribology-pdp .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0;
    float: none;
    opacity: 1 !important;
}
.ribology-pdp .woocommerce-product-gallery__wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ribology-border);
    background: var(--ribology-lab-white);
}
.ribology-pdp .woocommerce-product-gallery__image img {
    border-radius: 0;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.ribology-pdp .woocommerce-product-gallery__image:hover img { transform: scale(1.04); }
.ribology-pdp .flex-control-nav,
.ribology-pdp .flex-control-thumbs {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    list-style: none;
}
.ribology-pdp .flex-control-thumbs li {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}
.ribology-pdp .flex-control-thumbs img {
    border-radius: 6px;
    border: 1.5px solid var(--ribology-border);
    transition: all 0.2s var(--ribology-ease);
    cursor: pointer;
    opacity: 1;
}
.ribology-pdp .flex-control-thumbs img:hover {
    transform: translateY(-2px);
    border-color: var(--ribology-sky-blue);
}
.ribology-pdp .flex-control-thumbs img.flex-active,
.ribology-pdp .flex-control-thumbs .flex-active img {
    border-color: var(--ribology-deep-navy);
    border-width: 2px;
}

/* Commercial column */
.ribology-pdp__commercial {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
}
.ribology-pdp__commercial > * {
    animation: ribologyFadeUp 0.6s ease-out both;
}
.ribology-pdp__commercial > *:nth-child(1)  { animation-delay: 0.10s; }
.ribology-pdp__commercial > *:nth-child(2)  { animation-delay: 0.15s; }
.ribology-pdp__commercial > *:nth-child(3)  { animation-delay: 0.20s; }
.ribology-pdp__commercial > *:nth-child(4)  { animation-delay: 0.25s; }
.ribology-pdp__commercial > *:nth-child(5)  { animation-delay: 0.30s; }
.ribology-pdp__commercial > *:nth-child(6)  { animation-delay: 0.35s; }
.ribology-pdp__commercial > *:nth-child(7)  { animation-delay: 0.40s; }
.ribology-pdp__commercial > *:nth-child(8)  { animation-delay: 0.45s; }
.ribology-pdp__commercial > *:nth-child(9)  { animation-delay: 0.50s; }
.ribology-pdp__commercial > *:nth-child(10) { animation-delay: 0.55s; }

.ribology-pdp__category {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ribology-sky-blue);
    font-weight: 600;
    margin-bottom: 10px;
}
.ribology-pdp__category a {
    color: inherit;
    text-decoration: none;
}
.ribology-pdp__category a:hover { text-decoration: underline; }

.ribology-pdp .product_title {
    font-family: var(--ribology-font);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ribology-deep-navy);
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}

.ribology-pdp__subtitle {
    font-size: 1rem;
    color: var(--ribology-charcoal-lt);
    margin: 0 0 22px;
    line-height: 1.55;
}
.ribology-pdp__subtitle p:last-child { margin-bottom: 0; }

/* Meta bar */
.ribology-pdp__meta-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.ribology-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.ribology-pdp__stock--in { color: var(--ribology-forest); }
.ribology-pdp__stock--in .dot {
    width: 8px;
    height: 8px;
    background: var(--ribology-forest);
    border-radius: 50%;
    display: inline-block;
    animation: ribologyPulse 2s ease-in-out infinite;
}
.ribology-pdp__stock--out { color: #b54545; }
.ribology-pdp__stock--out .dot {
    width: 8px;
    height: 8px;
    background: #b54545;
    border-radius: 50%;
    display: inline-block;
}
.ribology-pdp__sku {
    color: var(--ribology-charcoal-lt);
    border-left: 1px solid var(--ribology-border);
    padding-left: 14px;
}
.ribology-pdp__sku strong {
    color: var(--ribology-charcoal);
    font-weight: 500;
}

/* Price */
.ribology-pdp__price-block {
    margin-bottom: 4px;
}
.ribology-pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.ribology-pdp__price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    letter-spacing: -0.01em;
    transition: color 0.3s var(--ribology-ease);
}
.ribology-pdp__price.is-flashing { animation: ribologyPriceFlash 0.6s ease-out; }
.ribology-pdp__price del,
.ribology-pdp__price ins {
    text-decoration: none;
    font-size: inherit;
}
.ribology-pdp__price del .amount {
    color: var(--ribology-charcoal-lt);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.6em;
    margin-right: 6px;
}
.ribology-pdp__per-prep {
    font-size: 0.92rem;
    color: var(--ribology-charcoal-lt);
}
.ribology-pdp__per-prep strong {
    color: var(--ribology-deep-navy);
    font-weight: 600;
}
.ribology-pdp__tax-line {
    font-size: 0.8rem;
    color: var(--ribology-charcoal-lt);
    margin-bottom: 24px;
}

/* Selector label */
.ribology-pdp__selector-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ribology-deep-navy);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ribology-pdp__selector-label small {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ribology-charcoal-lt);
    font-weight: 400;
    font-size: 0.82rem;
}

/* Radio cards */
.ribology-pdp__radio-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.ribology-pdp__radio-card {
    padding: 16px 14px 14px;
    border: 1.5px solid var(--ribology-border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--ribology-white);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    display: block;
}
.ribology-pdp__radio-card:hover {
    border-color: var(--ribology-sky-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23,67,121,0.06);
}
.ribology-pdp__radio-card.is-selected {
    border-color: var(--ribology-deep-navy);
    background: var(--ribology-lab-white);
    box-shadow: 0 0 0 3px rgba(23, 67, 121, 0.08);
}
.ribology-pdp__radio-card.is-selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 12px;
    width: 18px;
    height: 18px;
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    animation: ribologyFadeIn 0.3s;
}
.ribology-pdp__radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ribology-pdp__radio-name {
    display: block;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ribology-deep-navy);
    margin-bottom: 2px;
}
.ribology-pdp__radio-preps {
    display: block;
    font-size: 0.78rem;
    color: var(--ribology-charcoal-lt);
    margin-bottom: 10px;
}
.ribology-pdp__radio-price {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ribology-charcoal);
}
.ribology-pdp__radio-price .woocommerce-Price-amount {
    color: inherit;
    font: inherit;
}
.ribology-pdp__radio-pp {
    display: block;
    font-size: 0.76rem;
    color: var(--ribology-charcoal-lt);
    margin-top: 2px;
}
.ribology-pdp__radio-tag {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ribology-white);
    padding: 3px 8px;
    border-radius: 3px;
}
.ribology-pdp__radio-tag--popular { background: var(--ribology-sky-blue); }
.ribology-pdp__radio-tag--value   { background: var(--ribology-forest); }

/* Quantity + ATC */
.ribology-pdp__atc-row {
    display: flex;
    gap: 10px;
    margin-bottom: 26px;
    align-items: stretch;
}
.ribology-pdp .quantity {
    margin: 0 !important;
    display: flex;
    align-items: center;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    height: 52px;
    overflow: hidden;
}
.ribology-pdp .quantity input.qty {
    width: 50px;
    height: 100%;
    border: none;
    text-align: center;
    font-family: var(--ribology-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ribology-deep-navy);
    margin: 0;
    padding: 0;
    background: var(--ribology-white);
}
.ribology-pdp__atc {
    flex: 1;
    height: 52px;
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border: none;
    border-radius: var(--ribology-radius-sm);
    font-family: var(--ribology-font);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    padding: 0 24px;
}
.ribology-pdp__atc::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.6s;
}
.ribology-pdp__atc:hover {
    background: var(--ribology-deep-navy-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(23,67,121,0.25);
}
.ribology-pdp__atc:hover::before { left: 100%; }
.ribology-pdp__atc:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Trust badges */
.ribology-pdp__badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
    background: var(--ribology-lab-white);
    border: 1px solid var(--ribology-border);
    border-radius: 8px;
    margin-bottom: 24px;
}
.ribology-pdp__badge-item {
    text-align: center;
    transition: transform 0.25s var(--ribology-ease);
}
.ribology-pdp__badge-item:hover { transform: translateY(-2px); }
.ribology-pdp__badge-item:hover .ribology-pdp__badge-icon {
    background: var(--ribology-sky-blue);
    color: var(--ribology-white);
    border-color: var(--ribology-sky-blue);
}
.ribology-pdp__badge-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: 50%;
    color: var(--ribology-sky-blue);
    transition: all 0.3s var(--ribology-ease);
}
.ribology-pdp__badge-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ribology-deep-navy);
    margin-bottom: 2px;
}
.ribology-pdp__badge-sub {
    font-size: 0.72rem;
    color: var(--ribology-charcoal-lt);
}

/* Fulfilment line */
.ribology-pdp__fulfilment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--ribology-charcoal);
    line-height: 1.45;
}
.ribology-pdp__fulfilment svg {
    color: var(--ribology-sky-blue);
    flex-shrink: 0;
}
.ribology-pdp__fulfilment strong {
    color: var(--ribology-deep-navy);
    font-weight: 600;
}

/* =========================================================
   DETAILS / ACCORDIONS
   ========================================================= */
.ribology-pdp__details {
    padding: 8px 40px 56px;
    animation: ribologyFadeUp 0.6s ease-out 0.7s both;
}
.ribology-pdp__details h2 {
    font-family: var(--ribology-font);
    font-size: 1.4rem;
    color: var(--ribology-deep-navy);
    font-weight: 700;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}

.ribology-acc {
    border-top: 1px solid var(--ribology-border);
}
.ribology-acc:last-child {
    border-bottom: 1px solid var(--ribology-border);
}
.ribology-acc__head {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 22px 0;
    font-family: var(--ribology-font);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ribology-deep-navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-acc__head:hover { color: var(--ribology-sky-blue); }
.ribology-acc__head .chev {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    color: var(--ribology-sky-blue);
}
.ribology-acc.is-open .ribology-acc__head .chev { transform: rotate(180deg); }

.ribology-acc__body {
    max-height: 0;
    overflow: hidden;
    font-size: 0.94rem;
    color: var(--ribology-charcoal);
    line-height: 1.65;
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s var(--ribology-ease);
    padding: 0;
}
.ribology-acc.is-open .ribology-acc__body {
    max-height: 1500px;
    padding: 0 0 24px;
}
.ribology-acc__body > p { margin: 0 0 12px; }
.ribology-acc__body ul { margin: 0 0 12px; padding-left: 22px; }
.ribology-acc__body li { margin-bottom: 6px; }

/* Spec table */
.ribology-pdp__spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0;
    font-size: 0.9rem;
}
.ribology-pdp__spec-table th {
    text-align: left;
    font-weight: 600;
    color: var(--ribology-deep-navy);
    padding: 12px 14px;
    background: var(--ribology-lab-white);
    border-bottom: 1px solid var(--ribology-border);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ribology-pdp__spec-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ribology-border);
}
.ribology-pdp__spec-table tr:last-child td { border-bottom: none; }

.ribology-pdp__contents-note,
.ribology-pdp__compliance-note {
    margin-top: 14px;
    font-size: 0.84rem;
    color: var(--ribology-charcoal-lt);
}

/* Workflow */
.ribology-pdp__workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 8px 0;
}
.ribology-pdp__step {
    padding: 18px 16px;
    background: var(--ribology-lab-white);
    border: 1px solid var(--ribology-border);
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.ribology-pdp__step:hover {
    transform: translateY(-2px);
    border-color: var(--ribology-sky-blue);
    background: var(--ribology-white);
    box-shadow: 0 4px 12px rgba(23,67,121,0.08);
}
.ribology-pdp__step-num {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: var(--ribology-sky-blue);
    color: var(--ribology-white);
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 28px;
    margin-bottom: 10px;
    transition: transform 0.25s var(--ribology-ease);
}
.ribology-pdp__step:hover .ribology-pdp__step-num {
    transform: scale(1.15);
}
.ribology-pdp__step-title {
    font-weight: 600;
    color: var(--ribology-deep-navy);
    font-size: 0.9rem;
    margin-bottom: 4px;
}
.ribology-pdp__step-desc {
    font-size: 0.8rem;
    color: var(--ribology-charcoal-lt);
    line-height: 1.45;
}
.ribology-pdp__step-time {
    background: var(--ribology-white);
    border: 1px solid var(--ribology-sky-blue);
    border-radius: var(--ribology-radius-sm);
    padding: 12px 16px;
    font-size: 0.88rem;
    color: var(--ribology-deep-navy);
    font-weight: 500;
    text-align: center;
    margin-top: 14px;
}

/* Downloads */
.ribology-pdp__downloads {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ribology-pdp__dl {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ribology-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ribology-charcoal);
    background: var(--ribology-white);
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.ribology-pdp__dl:hover {
    border-color: var(--ribology-sky-blue);
    background: var(--ribology-lab-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23,67,121,0.06);
}
.ribology-pdp__dl svg {
    color: var(--ribology-sky-blue);
    flex-shrink: 0;
}
.ribology-pdp__dl-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.ribology-pdp__dl-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ribology-deep-navy);
}
.ribology-pdp__dl-meta {
    font-size: 0.74rem;
    color: var(--ribology-charcoal-lt);
}

/* =========================================================
   PDP RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .ribology-pdp__main {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 24px;
    }
    .ribology-pdp__details { padding: 8px 24px 40px; }
    .ribology-pdp__breadcrumb { padding: 14px 24px; }
    .ribology-pdp__workflow { grid-template-columns: repeat(2, 1fr); }
    .ribology-pdp__downloads { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .ribology-pdp .product_title { font-size: 1.6rem; }
    .ribology-pdp__price { font-size: 1.8rem; }
    .ribology-pdp__radio-cards { grid-template-columns: 1fr; }
    .ribology-pdp__badges { grid-template-columns: 1fr; }
    .ribology-pdp__badge-item { display: flex; align-items: center; gap: 12px; text-align: left; }
    .ribology-pdp__badge-item .ribology-pdp__badge-icon { margin: 0; }
    .ribology-pdp__workflow { grid-template-columns: 1fr; }
    .ribology-pdp__main { padding: 24px 16px; }
    .ribology-pdp__details { padding: 8px 16px 32px; }
    .ribology-pdp__breadcrumb { padding: 12px 16px; }
    .ribology-pdp__atc-row { flex-direction: column; }
    .ribology-pdp .quantity { width: 100%; }
}

/* Performance data accordion */
.ribology-pdp__perf-intro {
    font-size: 0.88rem;
    color: var(--ribology-charcoal-lt);
    margin: 0 0 14px;
}
.ribology-pdp__perf-table th:not(:first-child),
.ribology-pdp__perf-table td:not(:first-child) {
    text-align: center;
}
.ribology-pdp__perf-table tbody td:not(:first-child) {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ribology-deep-navy);
}
.ribology-pdp__perf-note {
    margin-top: 14px;
    font-size: 0.84rem;
    color: var(--ribology-charcoal-lt);
}
.ribology-pdp__perf-note a {
    color: var(--ribology-sky-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-pdp__perf-note a:hover {
    color: var(--ribology-deep-navy);
    text-decoration: underline;
}

/* =========================================================
   PARENT THEME OVERRIDES — PRODUCT PAGE LAYOUT
   ========================================================= */

/* Force full-width layout, kill any inherited sidebar */
.ribology-product-page .ribology-product-wrap,
.ribology-product-page .site-content,
.ribology-product-page #content,
.ribology-product-page .content-area,
.ribology-product-page main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.ribology-product-page #secondary,
.ribology-product-page .widget-area,
.ribology-product-page aside.sidebar,
.ribology-product-page .product-sidebar,
.ribology-product-page .secondary-sidebar {
    display: none !important;
}

/* Kill the boxed/columned WooCommerce wrapper that comes from parent */
.ribology-product-page .woocommerce > .container,
.ribology-product-page .woocommerce-page > .container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Wrapper for our product layout */
.ribology-product-wrap {
    background: var(--ribology-white);
}

/* Make sure WooCommerce's outer summary wrapper doesn't constrain us */
.ribology-pdp .summary.entry-summary {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

/* Kill WooCommerce default tabs / related products if any still render */
.ribology-product-page .woocommerce-tabs,
.ribology-product-page .related.products,
.ribology-product-page .upsells.products,
.ribology-product-page .cross-sells,
.ribology-product-page .product_meta {
    display: none !important;
}

/* Hide the "Description" / "Additional information" tabs (we have our own accordions) */
.ribology-pdp ~ .woocommerce-tabs,
.woocommerce-tabs.wc-tabs-wrapper {
    display: none !important;
}

/* Belt-and-braces: ensure radio cards always have room to breathe */
.ribology-pdp__radio-cards {
    width: 100% !important;
    margin-top: 6px !important;
}
.ribology-pdp__radio-card {
    min-height: 88px;
    overflow: visible !important;
}
.ribology-pdp__radio-card > * {
    position: relative;
    z-index: 1;
}

/* Make sure the tag pills don't overlap content */
.ribology-pdp__radio-tag {
    z-index: 2;
}

/* If the parent's add-to-cart fires somewhere unexpected, hide it */
.ribology-pdp + form.cart,
.ribology-pdp ~ form.cart {
    display: none !important;
}

/* Ensure the gallery doesn't get a max-width constraint */
.ribology-pdp .woocommerce-product-gallery {
    max-width: none !important;
}

/* =========================================================
   POLISH FIXES — v1.0.7
   ========================================================= */

/* Override any rogue focus/active colours on accordion headers
   (some themes apply purple/indigo defaults to button focus states) */
.ribology-acc__head:focus,
.ribology-acc__head:focus-visible,
.ribology-acc__head:active,
.ribology-acc.is-open .ribology-acc__head,
.ribology-acc__head[aria-expanded="true"] {
    background: transparent !important;
    color: var(--ribology-deep-navy) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Subtle hover/focus background for accordion heads — navy on a wash */
.ribology-acc__head:hover {
    color: var(--ribology-sky-blue) !important;
}
.ribology-acc__head:focus-visible {
    outline: 2px solid var(--ribology-sky-blue) !important;
    outline-offset: -2px;
    border-radius: 4px;
}

/* When accordion is open, give the header a subtle navy tint */
.ribology-acc.is-open .ribology-acc__head {
    color: var(--ribology-deep-navy) !important;
}
.ribology-acc.is-open .ribology-acc__head .chev {
    color: var(--ribology-sky-blue) !important;
}

/* Hide the duplicate breadcrumb shown by the parent theme above the gallery */
.ribology-product-page .ribology-pdp__breadcrumb ~ .ribology-pdp__breadcrumb,
.ribology-product-page > .wpr-breadcrumbs,
.ribology-product-page > .woocommerce-breadcrumb:not(.ribology-pdp__breadcrumb .woocommerce-breadcrumb) {
    display: none !important;
}

/* If there's a stray breadcrumb at the very top of body content, hide it */
body.ribology-product-page > .woocommerce-breadcrumb,
body.ribology-product-page .ribology-product-wrap > .woocommerce-breadcrumb {
    display: none !important;
}

/* Remove any inherited purple/violet selection colours */
::selection {
    background: var(--ribology-sky-blue);
    color: var(--ribology-white);
}

/* Kill purple defaults on links inside the product page */
.ribology-pdp a:focus,
.ribology-pdp a:active {
    outline-color: var(--ribology-sky-blue) !important;
}

/* Belt-and-braces on buttons inside the PDP — no purple anywhere */
.ribology-pdp button:focus,
.ribology-pdp button:focus-visible {
    outline-color: var(--ribology-sky-blue) !important;
}

/* =========================================================
   LAYOUT GUARD — v1.0.8
   Forces the 2-column layout regardless of inline styles
   that WooCommerce JS or parent themes may inject.
   ========================================================= */

/* Force the main 2-column grid */
.ribology-pdp .ribology-pdp__main {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 48px !important;
    padding: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Force gallery column to fill its grid cell */
.ribology-pdp .ribology-pdp__gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* Force commercial column to fill its grid cell */
.ribology-pdp .ribology-pdp__commercial,
.ribology-pdp .summary.entry-summary,
.ribology-pdp__commercial.summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

/* WooCommerce gallery — let it sit in its container properly */
.ribology-pdp .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* The flex-viewport that WooCommerce JS sets to fixed height — let it size naturally */
.ribology-pdp .flex-viewport {
    height: auto !important;
    aspect-ratio: 1 !important;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ribology-border);
    background: var(--ribology-lab-white);
}

.ribology-pdp .woocommerce-product-gallery__wrapper {
    width: 100% !important;
}

/* Each gallery image — natural width inside slider */
.ribology-pdp .woocommerce-product-gallery__image {
    width: 100% !important;
    float: none !important;
}
.ribology-pdp .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Mobile gallery override stays responsive */
@media (max-width: 1024px) {
    .ribology-pdp .ribology-pdp__main {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 32px 24px !important;
    }
}

/* Hide the broken "Previous / Next" plain-text links that WooCommerce sometimes outputs */
.ribology-pdp .flex-direction-nav {
    display: none !important;
}

/* Force the form to display block and full width */
.ribology-pdp .variations_form,
.ribology-pdp form.cart {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Kill any width: auto or 30%/70% column splits from parent themes */
.ribology-pdp .wpr-product-media-wrap,
.ribology-pdp .wpr-product-media-thumbs-horizontal {
    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================================
   FINAL POLISH — v1.0.9
   ========================================================= */

/* ---------------------------------------------------------
   1. HIDE DUPLICATE BREADCRUMB (top-left)
   It's outside our .ribology-pdp wrapper, before the product.
--------------------------------------------------------- */
body.single-product > .woocommerce-breadcrumb,
body.ribology-product-page .ribology-product-wrap > .woocommerce-breadcrumb,
body.ribology-product-page .wpr-breadcrumbs:not(.ribology-pdp__breadcrumb .wpr-breadcrumbs),
body.ribology-product-page .wpr-product-breadcrumbs:not(.ribology-pdp__breadcrumb .wpr-product-breadcrumbs),
.ribology-product-wrap > .container > .woocommerce-breadcrumb,
.elementor-widget-wpr-product-breadcrumbs-pro:first-child {
    display: none !important;
}

/* As a more targeted nuke, hide any breadcrumb element that appears
   BEFORE the .ribology-pdp article */
.ribology-pdp__breadcrumb ~ .ribology-pdp__breadcrumb {
    display: none !important;
}

/* ---------------------------------------------------------
   2. HIDE THE DUPLICATE ADD-TO-CART (the purple one)
   This comes from woocommerce_single_variation hook output.
--------------------------------------------------------- */
.ribology-pdp .single_variation_wrap,
.ribology-pdp .woocommerce-variation,
.ribology-pdp .woocommerce-variation-add-to-cart,
.ribology-pdp .woocommerce-variation-description,
.ribology-pdp .woocommerce-variation-price,
.ribology-pdp .woocommerce-variation-availability,
.ribology-pdp .variations_button {
    display: none !important;
}

/* Make absolutely sure only our ATC row is visible */
.ribology-pdp form.cart > .woocommerce-variation-add-to-cart,
.ribology-pdp form.cart > .variations_button {
    display: none !important;
}

/* Show only OUR atc row */
.ribology-pdp .ribology-pdp__atc-row {
    display: flex !important;
}

/* Override any purple/lavender background that's leaking in */
.ribology-pdp .single_add_to_cart_button,
.ribology-pdp .single_add_to_cart_button.button.alt,
.ribology-pdp button.single_add_to_cart_button {
    /* Default styling for any rogue ATC button — make them invisible by default */
    background: transparent;
}

/* Re-style OUR ATC button to be definitely navy */
.ribology-pdp .ribology-pdp__atc,
.ribology-pdp button.ribology-pdp__atc,
.ribology-pdp .ribology-pdp__atc.single_add_to_cart_button,
.ribology-pdp .ribology-pdp__atc.button.alt {
    background: var(--ribology-deep-navy) !important;
    background-color: var(--ribology-deep-navy) !important;
    color: var(--ribology-white) !important;
    border-color: var(--ribology-deep-navy) !important;
    opacity: 1 !important;
}
.ribology-pdp .ribology-pdp__atc:hover,
.ribology-pdp button.ribology-pdp__atc:hover {
    background: var(--ribology-deep-navy-dk) !important;
    background-color: var(--ribology-deep-navy-dk) !important;
    border-color: var(--ribology-deep-navy-dk) !important;
    color: var(--ribology-white) !important;
}

/* Disable the disabled-grey state too */
.ribology-pdp .ribology-pdp__atc.disabled,
.ribology-pdp .ribology-pdp__atc:disabled {
    background: var(--ribology-deep-navy) !important;
    opacity: 0.5 !important;
}

/* ---------------------------------------------------------
   3. FIX THE GALLERY — both images stacked vertically
   WooCommerce FlexSlider needs proper overflow:hidden
   and a fixed height/aspect ratio to slide properly.
--------------------------------------------------------- */
.ribology-pdp .flex-viewport {
    height: auto !important;
    aspect-ratio: 16 / 11 !important;
    overflow: hidden !important;
    border-radius: 10px;
    border: 1px solid var(--ribology-border);
    background: var(--ribology-lab-white);
    position: relative !important;
}

/* The wrapper inside needs to behave as the slider track */
.ribology-pdp .woocommerce-product-gallery__wrapper {
    width: auto !important;
    display: block !important;
    position: relative !important;
}

/* Each slide */
.ribology-pdp .woocommerce-product-gallery__image {
    float: left !important;
    display: block !important;
}

/* The active slide image fills the viewport */
.ribology-pdp .woocommerce-product-gallery__image.flex-active-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ---------------------------------------------------------
   4. KILL ALL REMAINING PURPLE FROM PARENT/PLUGINS
--------------------------------------------------------- */
.ribology-pdp .button.alt,
.ribology-pdp .button,
.ribology-pdp button.alt,
.ribology-pdp .wc-variation-selection-needed {
    background: transparent;
}

/* Override Royal Elementor's variations button styling if present */
.ribology-pdp .wpr-product-add-to-cart .button.alt,
.ribology-pdp .wpr-product-add-to-cart button.alt,
.ribology-pdp .wpr-quantity-wrapper + button {
    display: none !important;
}

/* If parent theme styled .variations_form with purple background */
.ribology-pdp .variations_form {
    background: transparent !important;
}

/* ---------------------------------------------------------
   5. ENSURE OUR QUANTITY INPUT IS THE ONLY ONE VISIBLE
--------------------------------------------------------- */
.ribology-pdp .ribology-pdp__atc-row .quantity {
    display: flex !important;
}

/* Hide any quantity that's not inside our atc row */
.ribology-pdp .variations_form > .quantity,
.ribology-pdp form.cart > .quantity:not(.ribology-pdp__atc-row .quantity),
.ribology-pdp .wpr-quantity-wrapper:not(.ribology-pdp__atc-row .wpr-quantity-wrapper) {
    display: none !important;
}

/* =========================================================
   v1.1.0 — DUPLICATE BREADCRUMB, GALLERY SLIDER, PURPLE,
   AND NEW COMPARISON TABLE
   ========================================================= */

/* ---------------------------------------------------------
   1. DUPLICATE BREADCRUMB
   The first one is being output by Royal Elementor Addons'
   breadcrumb widget. We hide ALL breadcrumb-like elements
   that aren't ours.
--------------------------------------------------------- */

/* Hide ANY breadcrumb that isn't ours */
.ribology-product-page .wpr-breadcrumbs,
.ribology-product-page .wpr-product-breadcrumbs,
.ribology-product-page .elementor-widget-wpr-product-breadcrumbs-pro,
.ribology-product-page .elementor-widget-wpr-breadcrumbs,
.ribology-product-page nav.woocommerce-breadcrumb,
.ribology-product-page > .woocommerce-breadcrumb,
.ribology-product-wrap > .woocommerce-breadcrumb,
.ribology-product-wrap > .wpr-breadcrumbs,
.ribology-product-wrap > .wpr-product-breadcrumbs,
body.ribology-product-page .site-content > .woocommerce-breadcrumb,
body.ribology-product-page #main > .woocommerce-breadcrumb {
    display: none !important;
}

/* But keep OUR breadcrumb (the one inside .ribology-pdp__breadcrumb) */
.ribology-pdp .ribology-pdp__breadcrumb,
.ribology-pdp__breadcrumb {
    display: block !important;
}

/* ---------------------------------------------------------
   2. GALLERY — TWO IMAGES SHOWING AT ONCE
   The flex-viewport needs height locked but not auto.
   This time using a fixed pixel height so FlexSlider can do its job.
--------------------------------------------------------- */
.ribology-pdp .woocommerce-product-gallery {
    position: relative !important;
}

.ribology-pdp .flex-viewport {
    aspect-ratio: 16 / 11 !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 10px !important;
    border: 1px solid var(--ribology-border) !important;
    background: var(--ribology-lab-white) !important;
}

/* The wrapper inside is a flex/slider track that FlexSlider translates */
.ribology-pdp .woocommerce-product-gallery__wrapper {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
}

/* Each slide takes the full viewport width — FlexSlider sets explicit widths via inline style.
   We do NOT override the inline widths or float because FlexSlider needs them. */
.ribology-pdp .woocommerce-product-gallery__image {
    /* Let FlexSlider's inline width and float work — don't override */
    height: auto;
}

.ribology-pdp .woocommerce-product-gallery__image > a {
    display: block;
    width: 100%;
    height: 100%;
}

.ribology-pdp .woocommerce-product-gallery__image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
}

/* ---------------------------------------------------------
   3. KILL ALL PURPLE — NUCLEAR OPTION
   Some plugin is setting background: rebeccapurple / blueviolet on
   the OPEN/active accordion. Override at the highest specificity.
--------------------------------------------------------- */

/* Accordion head — any state, any focus, any active, any class */
.ribology-pdp .ribology-acc .ribology-acc__head,
.ribology-pdp .ribology-acc.is-open .ribology-acc__head,
.ribology-pdp .ribology-acc .ribology-acc__head:focus,
.ribology-pdp .ribology-acc .ribology-acc__head:focus-visible,
.ribology-pdp .ribology-acc .ribology-acc__head:active,
.ribology-pdp .ribology-acc .ribology-acc__head:hover,
.ribology-pdp .ribology-acc .ribology-acc__head[aria-expanded="true"],
.ribology-pdp .ribology-acc .ribology-acc__head[aria-expanded="false"] {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    color: var(--ribology-deep-navy) !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Hover state — sky-blue text only */
.ribology-pdp .ribology-acc .ribology-acc__head:hover {
    color: var(--ribology-sky-blue) !important;
    background: transparent !important;
}

/* Focus ring only on keyboard navigation */
.ribology-pdp .ribology-acc .ribology-acc__head:focus-visible {
    outline: 2px solid var(--ribology-sky-blue) !important;
    outline-offset: -2px !important;
}

/* The "Kit Contents — RiboMini · 50 preps" text — purple from nested span styles */
.ribology-pdp .ribology-acc__head span,
.ribology-pdp .ribology-acc__head span span,
.ribology-pdp [data-ribology-contents-title],
.ribology-pdp .ribology-acc__head [data-ribology-contents-title] {
    color: inherit !important;
    background: transparent !important;
}

/* The chev (arrow) — sky blue only */
.ribology-pdp .ribology-acc__head .chev,
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev {
    color: var(--ribology-sky-blue) !important;
    background: transparent !important;
}

/* ---------------------------------------------------------
   4. NEW KIT CONTENTS COMPARISON TABLE
--------------------------------------------------------- */
.ribology-pdp__contents-intro,
.ribology-pdp__contents-note {
    font-size: 0.88rem;
    color: var(--ribology-charcoal-lt);
    margin: 0 0 14px;
}
.ribology-pdp__contents-note {
    margin: 14px 0 0;
}
.ribology-pdp__contents-note a {
    color: var(--ribology-sky-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-pdp__contents-note a:hover {
    color: var(--ribology-deep-navy);
    text-decoration: underline;
}

/* Scrollable wrapper for narrow viewports */
.ribology-pdp__contents-table-wrap {
    overflow-x: auto;
    border-radius: var(--ribology-radius-sm);
    border: 1px solid var(--ribology-border);
}

.ribology-pdp__contents-compare {
    width: 100% !important;
    min-width: 600px;
    border-collapse: collapse;
    margin: 0 !important;
    font-size: 0.9rem;
}

.ribology-pdp__contents-compare thead th {
    background: var(--ribology-lab-white);
    color: var(--ribology-deep-navy);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 14px 16px;
    text-align: center;
    border-bottom: 2px solid var(--ribology-border);
    letter-spacing: 0.02em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.ribology-pdp__contents-compare thead th:first-child {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.74rem;
}

.ribology-pdp__contents-subhead {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ribology-charcoal-lt);
    margin-top: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.ribology-pdp__contents-compare tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ribology-border);
    text-align: center;
    color: var(--ribology-charcoal);
    font-variant-numeric: tabular-nums;
}

.ribology-pdp__contents-compare tbody td:first-child {
    text-align: left;
    color: var(--ribology-deep-navy);
    font-weight: 500;
    white-space: nowrap;
}

.ribology-pdp__contents-compare tbody tr:last-child td {
    border-bottom: none;
}

.ribology-pdp__contents-compare tbody tr:hover {
    background: var(--ribology-lab-white);
}

/* Mobile — make the table scroll horizontally */
@media (max-width: 640px) {
    .ribology-pdp__contents-table-wrap {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* =========================================================
   v1.1.1 — TARGETED FIXES
   ========================================================= */

/* ---------------------------------------------------------
   1. GALLERY — let FlexSlider control its own dimensions
   Remove the aspect-ratio override that's breaking it.
--------------------------------------------------------- */
.ribology-pdp .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Let FlexSlider manage flex-viewport height. Just constrain max-width and style. */
.ribology-pdp .flex-viewport {
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    border: 1px solid var(--ribology-border) !important;
    background: var(--ribology-lab-white) !important;
    position: relative !important;
    max-width: 100% !important;
}

/* The slider wrapper — let FlexSlider's inline styles take over */
.ribology-pdp .woocommerce-product-gallery__wrapper {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
}

/* Each slide image — fill the slide cleanly */
.ribology-pdp .woocommerce-product-gallery__image {
    height: auto !important;
}

.ribology-pdp .woocommerce-product-gallery__image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* Thumbnails: 5 across, below the main image */
.ribology-pdp .flex-control-nav,
.ribology-pdp .flex-control-thumbs {
    list-style: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    float: none !important;
}
.ribology-pdp .flex-control-thumbs li {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    padding: 0 !important;
    list-style: none !important;
}
.ribology-pdp .flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--ribology-border) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: all 0.2s var(--ribology-ease) !important;
}
.ribology-pdp .flex-control-thumbs li img:hover {
    transform: translateY(-2px);
    border-color: var(--ribology-sky-blue) !important;
}
.ribology-pdp .flex-control-thumbs li img.flex-active,
.ribology-pdp .flex-control-thumbs .flex-active img {
    border-color: var(--ribology-deep-navy) !important;
    border-width: 2px !important;
}

/* ---------------------------------------------------------
   2. RADIO CARDS — only one should appear selected on load
   The CSS .is-selected was being applied to ALL cards by JS.
   We force the selected state to require :checked OR the
   .is-selected class set by user interaction.
--------------------------------------------------------- */

/* Reset: cards are NOT selected by default */
.ribology-pdp .ribology-pdp__radio-card {
    border-color: var(--ribology-border);
    background: var(--ribology-white);
    box-shadow: none;
}

.ribology-pdp .ribology-pdp__radio-card::after {
    content: none;
}

/* Selected state: card with input[checked] OR explicit .is-selected */
.ribology-pdp .ribology-pdp__radio-card:has(input[type="radio"]:checked),
.ribology-pdp .ribology-pdp__radio-card.is-selected {
    border-color: var(--ribology-deep-navy) !important;
    background: var(--ribology-lab-white) !important;
    box-shadow: 0 0 0 3px rgba(23, 67, 121, 0.08) !important;
}

.ribology-pdp .ribology-pdp__radio-card:has(input[type="radio"]:checked)::after,
.ribology-pdp .ribology-pdp__radio-card.is-selected::after {
    content: '✓' !important;
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--ribology-deep-navy) !important;
    color: var(--ribology-white) !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------
   3. QUANTITY SELECTOR — stable, always-visible arrows
--------------------------------------------------------- */
.ribology-pdp .ribology-pdp__atc-row {
    align-items: stretch;
    gap: 10px;
}

.ribology-pdp .ribology-pdp__atc-row .quantity,
.ribology-pdp .ribology-pdp__atc-row .wpr-quantity-wrapper {
    display: flex !important;
    align-items: stretch !important;
    height: 56px !important;
    border: 1.5px solid var(--ribology-border) !important;
    border-radius: var(--ribology-radius-sm) !important;
    overflow: hidden !important;
    background: var(--ribology-white) !important;
    width: 130px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

/* Hide WooCommerce/Royal +/- icons */
.ribology-pdp .ribology-pdp__atc-row .wpr-quantity-wrapper > i.fas {
    display: none !important;
}

/* The qty input */
.ribology-pdp .ribology-pdp__atc-row input.qty,
.ribology-pdp .ribology-pdp__atc-row input[type="number"],
.ribology-pdp .ribology-pdp__atc-row .quantity input {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    font-family: var(--ribology-font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ribology-deep-navy) !important;
    padding: 0 36px !important;
    margin: 0 !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide native browser spinner */
.ribology-pdp .ribology-pdp__atc-row input.qty::-webkit-outer-spin-button,
.ribology-pdp .ribology-pdp__atc-row input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Custom +/- buttons — overlaid on the qty input, always visible */
.ribology-pdp .ribology-pdp__atc-row .quantity::before,
.ribology-pdp .ribology-pdp__atc-row .wpr-quantity-wrapper::before,
.ribology-pdp .ribology-pdp__atc-row .quantity::after,
.ribology-pdp .ribology-pdp__atc-row .wpr-quantity-wrapper::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--ribology-lab-white);
    color: var(--ribology-deep-navy);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    pointer-events: none; /* enabled by JS */
    user-select: none;
    z-index: 2;
    transition: background 0.15s;
}

/* We'll instead add explicit +/- buttons via JS — see product-page.js */
.ribology-pdp .ribology-qty-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--ribology-lab-white);
    color: var(--ribology-deep-navy);
    border: none;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    z-index: 3;
    transition: all 0.15s var(--ribology-ease);
}
.ribology-pdp .ribology-qty-btn:hover {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
}
.ribology-pdp .ribology-qty-btn--minus { left: 8px; }
.ribology-pdp .ribology-qty-btn--plus { right: 8px; }

/* ---------------------------------------------------------
   4. ATC BUTTON — narrower
--------------------------------------------------------- */
.ribology-pdp .ribology-pdp__atc {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: 360px !important;
    padding: 0 32px !important;
    height: 56px !important;
}

/* On mobile, ATC stays full width */
@media (max-width: 640px) {
    .ribology-pdp .ribology-pdp__atc {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ---------------------------------------------------------
   5. TRUST BADGES — disable the "looks clickable" hover
--------------------------------------------------------- */
.ribology-pdp .ribology-pdp__badge-item {
    cursor: default;
    transition: none !important;
}
.ribology-pdp .ribology-pdp__badge-item:hover {
    transform: none !important;
}
.ribology-pdp .ribology-pdp__badge-item:hover .ribology-pdp__badge-icon {
    background: var(--ribology-white) !important;
    color: var(--ribology-sky-blue) !important;
    border-color: var(--ribology-border) !important;
    transform: none !important;
}
.ribology-pdp .ribology-pdp__badge-icon {
    transition: none !important;
}

/* =========================================================
   v1.1.2 — GALLERY FINAL CLEANUP
   Don't fight FlexSlider's dimension calculations.
   Just style the chrome (borders, thumbnails).
   ========================================================= */

/* Force WooCommerce's default opacity:0 to be visible once initialised */
.ribology-pdp .woocommerce-product-gallery {
    opacity: 1 !important;
}

/* Style the slider viewport — let FlexSlider control height */
.ribology-pdp .woocommerce-product-gallery .flex-viewport {
    border-radius: 10px !important;
    border: 1px solid var(--ribology-border) !important;
    background: var(--ribology-lab-white) !important;
    overflow: hidden !important;
    /* Critical: do NOT set aspect-ratio or height — let FlexSlider do it */
}

/* The image inside each slide */
.ribology-pdp .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* When the gallery hasn't been initialised yet, hide all but the first image */
.ribology-pdp .woocommerce-product-gallery:not(.woocommerce-product-gallery--with-images) .woocommerce-product-gallery__image:not(:first-child) {
    display: none;
}
.ribology-pdp .woocommerce-product-gallery:not(.woocommerce-product-gallery--with-images) .woocommerce-product-gallery__image:first-child {
    width: 100% !important;
    float: none !important;
}

/* =========================================================
   v1.1.5 — ATC FULL WIDTH + LINK STYLING
   ========================================================= */

/* ATC button fills remaining space (aligns to right edge of radio cards row) */
.ribology-pdp .ribology-pdp__atc {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 32px !important;
}

@media (max-width: 640px) {
    .ribology-pdp .ribology-pdp__atc {
        width: 100% !important;
    }
}

/* Trade account link in the fulfilment line */
.ribology-pdp__fulfilment-link {
    color: var(--ribology-sky-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-pdp__fulfilment-link:hover {
    color: var(--ribology-deep-navy);
    text-decoration: underline;
}

/* =========================================================
   v1.1.6 — CUSTOM GALLERY, LIGHTBOX, POLISH FIXES
   ========================================================= */

/* ---------------------------------------------------------
   1. CUSTOM GALLERY — replaces WooCommerce/FlexSlider entirely
--------------------------------------------------------- */
.ribology-gallery {
    position: relative;
    width: 100%;
}

/* Stage: holds all slides, only active is visible */
.ribology-gallery__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ribology-border);
    background: var(--ribology-lab-white);
}

.ribology-gallery__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: var(--ribology-white);
    cursor: zoom-in;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ribology-ease);
}

.ribology-gallery__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

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

/* Thumbnails grid */
.ribology-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.ribology-gallery__thumb {
    padding: 0;
    margin: 0;
    background: var(--ribology-white);
    border: 2px solid var(--ribology-border);
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    transition: all 0.18s var(--ribology-ease);
}

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

.ribology-gallery__thumb:hover {
    border-color: var(--ribology-sky-blue);
    transform: translateY(-1px);
}

.ribology-gallery__thumb.is-active {
    border-color: var(--ribology-deep-navy);
    box-shadow: 0 0 0 2px rgba(23, 67, 121, 0.12);
}

/* Hide the leftover magnifying-glass trigger from WooCommerce */
.ribology-pdp__gallery .woocommerce-product-gallery__trigger,
.ribology-pdp__gallery .wpr-product-media-lightbox {
    display: none !important;
}

/* ---------------------------------------------------------
   2. LIGHTBOX
--------------------------------------------------------- */
.ribology-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(23, 67, 121, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 40px;
    cursor: zoom-out;
    animation: ribology-lb-fade-in 0.2s ease-out;
}
.ribology-lightbox.is-open {
    display: flex;
}
.ribology-lightbox__inner {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ribology-lightbox__inner img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ribology-lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--ribology-white);
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 2;
}
.ribology-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.3);
}
@keyframes ribology-lb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------------------------------------------------------
   3. COMBINED META LINE (was 3 lines, now 1)
--------------------------------------------------------- */
.ribology-pdp__meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 24px;
    font-size: 0.86rem;
    color: var(--ribology-charcoal-lt);
    line-height: 1.4;
}
.ribology-pdp__meta-sep {
    color: var(--ribology-border);
    user-select: none;
}
.ribology-pdp__meta-shipping {
    color: var(--ribology-charcoal-lt);
}

/* ---------------------------------------------------------
   4. HIDE DUPLICATE BREADCRUMB INSTANTLY (CSS, before JS runs)
   This stops the flash on load.
--------------------------------------------------------- */
body.ribology-product-page .woocommerce-breadcrumb,
body.ribology-product-page .wpr-breadcrumbs,
body.ribology-product-page .wpr-product-breadcrumbs,
body.ribology-product-page .yoast-breadcrumb,
body.ribology-product-page #breadcrumbs,
body.ribology-product-page .elementor-widget-wpr-product-breadcrumbs-pro,
body.ribology-product-page .elementor-widget-wpr-breadcrumbs {
    display: none !important;
    visibility: hidden !important;
}
/* But re-show OUR breadcrumb */
body.ribology-product-page .ribology-pdp__breadcrumb,
body.ribology-product-page .ribology-pdp__breadcrumb * {
    display: revert !important;
    visibility: visible !important;
}
.ribology-pdp__breadcrumb {
    display: block !important;
    visibility: visible !important;
}

/* ---------------------------------------------------------
   5. ATC BUTTON — always-enabled state, no red cancel cursor
--------------------------------------------------------- */
.ribology-pdp .ribology-pdp__atc,
.ribology-pdp button.ribology-pdp__atc,
.ribology-pdp .ribology-pdp__atc.disabled,
.ribology-pdp .ribology-pdp__atc.wc-variation-selection-needed {
    background: var(--ribology-deep-navy) !important;
    background-color: var(--ribology-deep-navy) !important;
    color: var(--ribology-white) !important;
    border-color: var(--ribology-deep-navy) !important;
    cursor: pointer !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.ribology-pdp .ribology-pdp__atc:hover,
.ribology-pdp button.ribology-pdp__atc:hover {
    background: var(--ribology-deep-navy-dk) !important;
    background-color: var(--ribology-deep-navy-dk) !important;
    color: var(--ribology-white) !important;
    cursor: pointer !important;
}

/* Kill any inherited disabled-state behaviour */
.ribology-pdp .ribology-pdp__atc:disabled {
    cursor: pointer !important;
    opacity: 1 !important;
    background: var(--ribology-deep-navy) !important;
    color: var(--ribology-white) !important;
}

/* Remove any underline/decoration on hover (the "slider bar") */
.ribology-pdp .ribology-pdp__atc::before,
.ribology-pdp .ribology-pdp__atc::after {
    display: none !important;
    content: none !important;
}

/* ---------------------------------------------------------
   6. ACCORDION HOVER — entire row goes navy (more obvious)
--------------------------------------------------------- */
.ribology-pdp .ribology-acc .ribology-acc__head {
    transition: background 0.18s var(--ribology-ease), color 0.18s var(--ribology-ease);
}

.ribology-pdp .ribology-acc .ribology-acc__head:hover {
    background: var(--ribology-deep-navy) !important;
    color: var(--ribology-white) !important;
    border-radius: 4px;
}

.ribology-pdp .ribology-acc .ribology-acc__head:hover span,
.ribology-pdp .ribology-acc .ribology-acc__head:hover .chev {
    color: var(--ribology-white) !important;
}

/* Open accordion has subtle background */
.ribology-pdp .ribology-acc.is-open .ribology-acc__head {
    background: rgba(23, 67, 121, 0.04) !important;
    color: var(--ribology-deep-navy) !important;
    border-radius: 4px;
}

.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover {
    background: var(--ribology-deep-navy) !important;
    color: var(--ribology-white) !important;
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover .chev {
    color: var(--ribology-white) !important;
}

/* =========================================================
   v1.1.7 — LIGHTBOX ARROWS, GRADIENT BG, SOFTER ACCORDION,
   BREADCRUMB RELOCATED TO COMMERCIAL COLUMN
   ========================================================= */

/* ---------------------------------------------------------
   1. LIGHTBOX — softer gradient backdrop + prev/next arrows + counter
--------------------------------------------------------- */
.ribology-lightbox {
    /* Override the previous solid navy with a soft gradient */
    background: linear-gradient(135deg,
        rgba(23, 67, 121, 0.92) 0%,
        rgba(25, 179, 215, 0.78) 50%,
        rgba(23, 67, 121, 0.92) 100%) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Prev/Next arrow buttons */
.ribology-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--ribology-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s var(--ribology-ease);
    z-index: 3;
    padding: 0;
}
.ribology-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.08);
}
.ribology-lightbox__nav--prev {
    left: 28px;
}
.ribology-lightbox__nav--next {
    right: 28px;
}
.ribology-lightbox__nav svg {
    display: block;
}

/* Image counter (e.g. "3 / 9") */
.ribology-lightbox__counter {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ribology-white);
    font-size: 0.86rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 14px;
    border-radius: 99px;
    z-index: 3;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* Mobile: smaller nav buttons closer to edge */
@media (max-width: 640px) {
    .ribology-lightbox__nav {
        width: 44px;
        height: 44px;
    }
    .ribology-lightbox__nav--prev { left: 12px; }
    .ribology-lightbox__nav--next { right: 12px; }
}

/* ---------------------------------------------------------
   2. ACCORDION HOVER — softer, clearer "expandable" affordance
   Drop the heavy navy. Use a soft lab-white background + larger chev animation.
--------------------------------------------------------- */

/* Reset previous heavy hover style */
.ribology-pdp .ribology-acc .ribology-acc__head {
    transition: background 0.18s var(--ribology-ease),
                color 0.18s var(--ribology-ease),
                padding 0.18s var(--ribology-ease);
    position: relative;
    border-radius: 6px;
    padding: 18px 16px !important;
    margin: 0 -16px;
    width: calc(100% + 32px);
    cursor: pointer;
}

/* Subtle wash on hover with a left-side accent bar */
.ribology-pdp .ribology-acc .ribology-acc__head:hover {
    background: var(--ribology-lab-white) !important;
    color: var(--ribology-deep-navy) !important;
}

.ribology-pdp .ribology-acc .ribology-acc__head:hover span,
.ribology-pdp .ribology-acc .ribology-acc__head:hover .chev {
    color: var(--ribology-deep-navy) !important;
}

/* Animated left accent bar on hover */
.ribology-pdp .ribology-acc .ribology-acc__head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--ribology-sky-blue);
    border-radius: 0 3px 3px 0;
    transition: height 0.2s var(--ribology-ease);
}
.ribology-pdp .ribology-acc .ribology-acc__head:hover::before {
    height: 70%;
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head::before {
    height: 70%;
    background: var(--ribology-deep-navy);
}

/* Chevron — larger and rotates clearly */
.ribology-pdp .ribology-acc .ribology-acc__head .chev {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ribology-lab-white);
    color: var(--ribology-deep-navy) !important;
    transition: all 0.25s var(--ribology-ease);
    margin-left: 8px;
}
.ribology-pdp .ribology-acc__head:hover .chev {
    background: var(--ribology-sky-blue);
    color: var(--ribology-white) !important;
    transform: scale(1.08);
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white) !important;
    transform: rotate(180deg);
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover .chev {
    background: var(--ribology-sky-blue);
}

/* Open state — subtle background, no aggressive navy */
.ribology-pdp .ribology-acc.is-open .ribology-acc__head {
    background: rgba(23, 67, 121, 0.03) !important;
    color: var(--ribology-deep-navy) !important;
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover {
    background: var(--ribology-lab-white) !important;
}

/* ---------------------------------------------------------
   3. BREADCRUMB IN COMMERCIAL COLUMN
   Replaces the KITS tag. Style it as the breadcrumb position now.
--------------------------------------------------------- */
.ribology-pdp__commercial .ribology-pdp__breadcrumb {
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ribology-charcoal-lt);
    font-weight: 500;
}

.ribology-pdp__commercial .ribology-pdp__breadcrumb-inner {
    padding: 0;
    max-width: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ribology-pdp__commercial .ribology-pdp__breadcrumb a {
    color: var(--ribology-sky-blue);
    text-decoration: none;
    transition: color 0.15s var(--ribology-ease);
}

.ribology-pdp__commercial .ribology-pdp__breadcrumb a:hover {
    color: var(--ribology-deep-navy);
}

.ribology-pdp__commercial .ribology-pdp__breadcrumb .sep {
    color: var(--ribology-border);
    margin: 0 2px;
}

/* Hide the old category tag display if it still exists anywhere */
.ribology-pdp__category {
    display: none !important;
}

/* The old breadcrumb wrapper at the top is gone now, but keep the CSS rule
   that hides any rogue breadcrumb from elsewhere (Yoast, etc.) */
body.ribology-product-page > .woocommerce-breadcrumb,
body.ribology-product-page .ribology-product-wrap > .woocommerce-breadcrumb,
body.ribology-product-page #primary > .woocommerce-breadcrumb,
body.ribology-product-page #main > .woocommerce-breadcrumb {
    display: none !important;
    visibility: hidden !important;
}

/* =========================================================
   v1.1.8 — VARIANT LABELS, OPTION A CONSTRAIN, OPTION D TABS,
   AND CHEVRON HOVER FIX
   ========================================================= */

/* ---------------------------------------------------------
   CHEVRON HOVER FIX
   Earlier rules were setting the chev colour to deep-navy on
   hover, which then made the SVG invisible against sky-blue.
   Force white explicitly on the SVG stroke.
--------------------------------------------------------- */
.ribology-pdp .ribology-acc__head:hover .chev,
.ribology-pdp .ribology-acc__head:hover .chev svg,
.ribology-pdp .ribology-acc__head:hover .chev svg * {
    color: var(--ribology-white) !important;
    stroke: var(--ribology-white) !important;
}

.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev,
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev svg,
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev svg * {
    color: var(--ribology-white) !important;
    stroke: var(--ribology-white) !important;
}

/* Default state: navy stroke on lab-white circle */
.ribology-pdp .ribology-acc .ribology-acc__head .chev svg {
    stroke: var(--ribology-deep-navy);
}

/* ---------------------------------------------------------
   VARIANT LABELS (Option A / Option D headers)
--------------------------------------------------------- */
.ribology-pdp__variant-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 56px 0 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ribology-border);
}

.ribology-pdp__variant-label-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    font-family: var(--ribology-font);
}

.ribology-pdp__variant-label-tag--alt {
    background: var(--ribology-sky-blue);
}

.ribology-pdp__variant-label-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ribology-deep-navy);
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   OPTION A — CONSTRAINED READING WIDTH
   Heads stay full width, body content centers at ~820px.
--------------------------------------------------------- */
.ribology-pdp__details--a .ribology-acc__body {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Workflow grid breaks out a bit wider so the 4 steps don't get squashed */
.ribology-pdp__details--a .ribology-acc__body .ribology-pdp__workflow {
    max-width: 100%;
    margin: 0;
}

/* Kit contents comparison table can go wider too */
.ribology-pdp__details--a .ribology-acc__body .ribology-pdp__contents-table-wrap {
    max-width: 100%;
}

/* Downloads grid stays at constrained width — looks fine */

/* On smaller screens, drop the max-width constraint */
@media (max-width: 900px) {
    .ribology-pdp__details--a .ribology-acc__body {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   OPTION D — TABBED NAVIGATION
--------------------------------------------------------- */
.ribology-pdp__details--d {
    margin-bottom: 80px;
}

.ribology-tabs {
    display: grid;
    grid-template-columns: 240px 1fr;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: 12px;
    overflow: hidden;
    min-height: 500px;
}

/* Sidebar */
.ribology-tabs__sidebar {
    background: var(--ribology-lab-white);
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ribology-border);
    gap: 2px;
}

.ribology-tabs__tab {
    text-align: left;
    background: transparent;
    border: none;
    padding: 14px 24px;
    font-family: var(--ribology-font);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ribology-charcoal);
    cursor: pointer;
    position: relative;
    transition: background 0.18s var(--ribology-ease),
                color 0.18s var(--ribology-ease);
    line-height: 1.4;
}

.ribology-tabs__tab:hover {
    background: rgba(23, 67, 121, 0.04);
    color: var(--ribology-deep-navy);
}

.ribology-tabs__tab.is-active {
    background: var(--ribology-white);
    color: var(--ribology-deep-navy);
    font-weight: 600;
}

/* Left accent bar on active tab */
.ribology-tabs__tab.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--ribology-sky-blue);
    border-radius: 0 3px 3px 0;
}

.ribology-tabs__tab:focus-visible {
    outline: 2px solid var(--ribology-sky-blue);
    outline-offset: -2px;
    z-index: 1;
}

/* Content area */
.ribology-tabs__content {
    padding: 40px 48px;
    background: var(--ribology-white);
}

.ribology-tabs__panel {
    max-width: 780px;
    animation: ribology-tab-fade-in 0.25s ease-out;
}

.ribology-tabs__panel[hidden] {
    display: none;
}

.ribology-tabs__panel-title {
    font-family: var(--ribology-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ribology-border);
    letter-spacing: -0.01em;
}

@keyframes ribology-tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile: stack sidebar above content as a horizontal tab strip */
@media (max-width: 900px) {
    .ribology-tabs {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ribology-tabs__sidebar {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--ribology-border);
        padding: 0;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    .ribology-tabs__tab {
        white-space: nowrap;
        padding: 14px 18px;
        flex-shrink: 0;
    }
    .ribology-tabs__tab.is-active::before {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: 0;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }
    .ribology-tabs__content {
        padding: 32px 24px;
    }
    .ribology-tabs__panel-title {
        font-size: 1.25rem;
    }
}

/* =========================================================
   v1.1.9 — TAB CLICKABILITY AFFORDANCES (Desktop + Mobile)
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP: chevron on right of each tab
--------------------------------------------------------- */
.ribology-tabs__tab {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 20px !important;
}

/* Pseudo-element chevron using mask-image so we can colour it */
.ribology-tabs__tab::after {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--ribology-charcoal-lt);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    opacity: 0.45;
    transition: all 0.2s var(--ribology-ease);
}

/* Hover: chevron brightens, slides right */
.ribology-tabs__tab:hover::after {
    background-color: var(--ribology-sky-blue);
    opacity: 1;
    transform: translateX(4px);
}

/* Active: hide the chevron — left accent bar is the indicator */
.ribology-tabs__tab.is-active::after {
    opacity: 0;
    transform: translateX(0);
}

/* ---------------------------------------------------------
   MOBILE: scroll affordance on sidebar
--------------------------------------------------------- */
@media (max-width: 900px) {

    /* Container needs to be relative so the floating hint can position itself */
    .ribology-tabs {
        position: relative;
    }

    /* On mobile the chev on each tab points DOWN (since tabs are horizontal),
       indicating "expand this section" */
    .ribology-tabs__tab::after {
        display: none;
    }

    /* Fade the right edge of the sidebar when there's overflow */
    .ribology-tabs.has-overflow-right .ribology-tabs__sidebar {
        -webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
                mask-image: linear-gradient(to right, black 78%, transparent 100%);
    }

    /* Floating "swipe right" chevron in the top-right corner */
    .ribology-tabs.has-overflow-right::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--ribology-deep-navy);
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
        box-shadow: 0 4px 12px rgba(23, 67, 121, 0.25);
        pointer-events: none;
        z-index: 5;
        animation: ribology-scroll-hint 1.6s ease-in-out infinite;
        /* Position relative to the sidebar (top section on mobile) */
        top: 22px;  /* roughly middle of the tab strip */
        transform: none;
    }

    /* When sidebar IS scrolled to the end, the .has-overflow-right class
       is removed by JS, hiding both the mask fade and the chev. */
}

@keyframes ribology-scroll-hint {
    0%, 100% {
        opacity: 0.85;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(4px);
    }
}

/* =========================================================
   v1.2.0 — RESPONSIVE LAYOUT SWITCH (A on mobile, D on tablet+)
   PRODUCT DETAILS HEADING, AND DEFINITIVE CHEV HOVER FIX
   ========================================================= */

/* ---------------------------------------------------------
   HIDE VARIANT LABELS — no longer in evaluation mode
--------------------------------------------------------- */
.ribology-pdp__variant-label {
    display: none !important;
}

/* ---------------------------------------------------------
   SHARED "PRODUCT DETAILS" HEADING
--------------------------------------------------------- */
.ribology-pdp__details-heading {
    font-family: var(--ribology-font);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    letter-spacing: -0.01em;
    margin: 64px 0 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--ribology-border);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {
    .ribology-pdp__details-heading {
        font-size: 1.4rem;
        margin: 48px 16px 24px;
        padding-bottom: 14px;
    }
}

/* ---------------------------------------------------------
   RESPONSIVE LAYOUT SWITCH
   Below 900px: show Option A (accordion), hide Option D
   900px and up: show Option D (tabs), hide Option A
--------------------------------------------------------- */
@media (max-width: 899px) {
    .ribology-pdp__details--d {
        display: none !important;
    }
    .ribology-pdp__details--a {
        display: block !important;
    }
}

@media (min-width: 900px) {
    .ribology-pdp__details--a {
        display: none !important;
    }
    .ribology-pdp__details--d {
        display: block !important;
    }
}

/* Remove the top margin from the active section since the heading
   already provides spacing */
.ribology-pdp__details--a,
.ribology-pdp__details--d {
    margin-top: 0;
}

/* ---------------------------------------------------------
   DEFINITIVE ACCORDION CHEVRON STATES
   Bulletproof — overrides any earlier rules with explicit
   background + stroke colours for every state.
--------------------------------------------------------- */

/* Base: round lab-white circle with navy chev */
.ribology-pdp .ribology-acc .ribology-acc__head .chev {
    background: var(--ribology-lab-white) !important;
}
.ribology-pdp .ribology-acc .ribology-acc__head .chev svg,
.ribology-pdp .ribology-acc .ribology-acc__head .chev svg * {
    stroke: var(--ribology-deep-navy) !important;
    color: var(--ribology-deep-navy) !important;
}

/* HOVER (closed): sky-blue circle with white chev */
.ribology-pdp .ribology-acc:not(.is-open) .ribology-acc__head:hover .chev {
    background: var(--ribology-sky-blue) !important;
}
.ribology-pdp .ribology-acc:not(.is-open) .ribology-acc__head:hover .chev svg,
.ribology-pdp .ribology-acc:not(.is-open) .ribology-acc__head:hover .chev svg * {
    stroke: var(--ribology-white) !important;
    color: var(--ribology-white) !important;
}

/* OPEN (default): navy circle with white chev, rotated 180° */
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev {
    background: var(--ribology-deep-navy) !important;
    transform: rotate(180deg);
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev svg,
.ribology-pdp .ribology-acc.is-open .ribology-acc__head .chev svg * {
    stroke: var(--ribology-white) !important;
    color: var(--ribology-white) !important;
}

/* OPEN + HOVER: sky-blue circle with white chev (still rotated) */
.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover .chev {
    background: var(--ribology-sky-blue) !important;
}
.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover .chev svg,
.ribology-pdp .ribology-acc.is-open .ribology-acc__head:hover .chev svg * {
    stroke: var(--ribology-white) !important;
    color: var(--ribology-white) !important;
}

/* =========================================================
   v1.2.2 — TAB CHEVRON CIRCLES + RADIO CARD TAG REDESIGN
   ========================================================= */

/* ---------------------------------------------------------
   SIDEBAR TAB CHEVRONS — match the accordion 3-state circles
   Override the previous mask-image flat chev with a coloured
   circle containing a chev SVG, matching the accordion treatment.
--------------------------------------------------------- */

/* Reset: remove the previous mask-image styling */
.ribology-tabs__tab::after {
    /* Re-declared with new properties — kill any inherited mask */
    -webkit-mask-image: none !important;
            mask-image: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: var(--ribology-lab-white) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23174379" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>') !important;
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 1 !important;
    transition: all 0.2s var(--ribology-ease) !important;
}

/* HOVER: sky-blue circle, white chev */
.ribology-tabs__tab:hover::after {
    background-color: var(--ribology-sky-blue) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>') !important;
    transform: translateX(2px) scale(1.06);
}

/* ACTIVE: navy circle, white chev (visible now, not hidden) */
.ribology-tabs__tab.is-active::after {
    background-color: var(--ribology-deep-navy) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>') !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ACTIVE + HOVER: stay navy (don't shift to sky-blue) */
.ribology-tabs__tab.is-active:hover::after {
    background-color: var(--ribology-deep-navy) !important;
    transform: translateX(2px);
}

/* Mobile (horizontal scroll strip): hide the chev to save space */
@media (max-width: 899px) {
    .ribology-tabs__tab::after {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   RADIO CARD TAGS — pills hanging off top centre + matching border
--------------------------------------------------------- */

/* Container needs room above for the hanging pills */
.ribology-pdp__radio-cards {
    margin-top: 18px;
}

/* Card needs overflow:visible so the tag can hang above */
.ribology-pdp__radio-card {
    overflow: visible;
    position: relative;
}

/* The tag pill — repositioned to top centre, overhanging */
.ribology-pdp__radio-tag {
    position: absolute !important;
    top: -11px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 4px 14px !important;
    border-radius: 99px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ribology-white) !important;
    white-space: nowrap !important;
    z-index: 3 !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Tag colour variants */
.ribology-pdp__radio-tag--popular {
    background: var(--ribology-deep-navy) !important;
}

.ribology-pdp__radio-tag--value {
    background: var(--ribology-forest) !important;
}

/* Card border colour follows the tag (using :has) */
.ribology-pdp__radio-card:has(.ribology-pdp__radio-tag--popular) {
    border-color: var(--ribology-deep-navy) !important;
}

.ribology-pdp__radio-card:has(.ribology-pdp__radio-tag--value) {
    border-color: var(--ribology-forest) !important;
}

/* Selected state retains its glow, but border colour stays from tag */
.ribology-pdp__radio-card.is-selected:has(.ribology-pdp__radio-tag--popular) {
    border-color: var(--ribology-deep-navy) !important;
    box-shadow: 0 0 0 3px rgba(23, 67, 121, 0.12) !important;
}

.ribology-pdp__radio-card.is-selected:has(.ribology-pdp__radio-tag--value) {
    border-color: var(--ribology-forest) !important;
    box-shadow: 0 0 0 3px rgba(23, 121, 23, 0.12) !important;
}

/* The selected checkmark (✓ pseudo-element) — keep coloured by tag for cohesion */
.ribology-pdp .ribology-pdp__radio-card:has(.ribology-pdp__radio-tag--popular).is-selected::after,
.ribology-pdp .ribology-pdp__radio-card:has(input:checked).ribology-pdp__radio-card:has(.ribology-pdp__radio-tag--popular)::after {
    background: var(--ribology-deep-navy) !important;
}

.ribology-pdp .ribology-pdp__radio-card:has(.ribology-pdp__radio-tag--value).is-selected::after,
.ribology-pdp .ribology-pdp__radio-card:has(input:checked).ribology-pdp__radio-card:has(.ribology-pdp__radio-tag--value)::after {
    background: var(--ribology-forest) !important;
}
/* ============================================================
 * CART PAGE — Concept B (Lab Supplier Portal)
 * ------------------------------------------------------------
 * Append this block to the end of style.css and bump the
 * version in functions.php from 1.2.0 -> 1.2.2
 * ============================================================ */

.ribology-cart,
.ribology-cart__mobile-bar {
	--rb-sky: #19B3D7;
	--rb-navy: #174379;
	--rb-charcoal: #3D3D3D;
	--rb-forest: #177917;
	--rb-lab-white: #F7F9FA;
	--rb-hairline: rgba(23, 67, 121, 0.08);
	--rb-hairline-strong: rgba(23, 67, 121, 0.18);
	--rb-text-soft: rgba(61, 61, 61, 0.65);
	--rb-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- Wrapper ---------- */
.ribology-cart {
	max-width: 1280px;
	margin: 40px auto 80px;
	padding: 0 24px;
	color: var(--rb-charcoal);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-variant-numeric: tabular-nums;
}

.ribology-cart--loading {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ---------- Header ---------- */
.ribology-cart__header {
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rb-hairline-strong);
}

.ribology-cart__header-inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ribology-cart__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: -0.01em;
}

.ribology-cart__quote-ref {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	color: var(--rb-text-soft);
}

.ribology-cart__quote-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
}

.ribology-cart__quote-id {
	font-family: var(--rb-mono);
	font-size: 13px;
	color: var(--rb-navy);
	font-weight: 600;
	padding: 3px 8px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 3px;
}

/* ---------- Layout ---------- */
.ribology-cart__layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: start;
}

@media (max-width: 1024px) {
	.ribology-cart__layout {
		grid-template-columns: 1fr 320px;
		gap: 28px;
	}
}

@media (max-width: 899px) {
	.ribology-cart__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ============================================================
 * CART TABLE
 * ============================================================ */
.ribology-cart__main {
	min-width: 0;
}

.ribology-cart-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 10px;
	overflow: hidden;
}

.ribology-cart-table thead th {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rb-text-soft);
	text-align: left;
	padding: 14px 16px;
	background: var(--rb-lab-white);
	border-bottom: 1px solid var(--rb-hairline-strong);
}

.ribology-cart-table__col-qty,
.ribology-cart-table__col-price,
.ribology-cart-table__col-subtotal {
	text-align: right !important;
	white-space: nowrap;
}

.ribology-cart-table__col-qty {
	width: 140px;
}

.ribology-cart-table__col-price {
	width: 120px;
}

.ribology-cart-table__col-subtotal {
	width: 130px;
}

.ribology-cart-table__col-remove {
	width: 48px;
}

/* ---------- Rows ---------- */
.ribology-cart-row td {
	padding: 20px 16px;
	border-bottom: 1px solid var(--rb-hairline);
	vertical-align: middle;
	background: #fff;
}

.ribology-cart-row:last-child td {
	border-bottom: none;
}

.ribology-cart-row--removing td {
	opacity: 0.35;
	transition: opacity 0.2s ease;
}

.ribology-cart-row__item-inner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ribology-cart-row__thumb {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
}

.ribology-cart-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ribology-cart-row__details {
	min-width: 0;
}

.ribology-cart-row__details a,
.ribology-cart-row__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--rb-navy);
	text-decoration: none;
	line-height: 1.3;
	display: inline-block;
}

.ribology-cart-row__details a:hover {
	color: var(--rb-sky);
}

.ribology-cart-row__variation {
	margin-top: 4px;
	font-size: 13px;
	color: var(--rb-text-soft);
	line-height: 1.4;
}

.ribology-cart-row__variation p,
.ribology-cart-row__variation dl {
	margin: 0;
}

.ribology-cart-row__variation dt,
.ribology-cart-row__variation dd {
	display: inline;
	margin: 0;
	font-size: 13px;
}

.ribology-cart-row__variation dt {
	font-weight: 500;
}

.ribology-cart-row__variation dt::after {
	content: ": ";
}

.ribology-cart-row__sku {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ribology-cart-row__sku-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rb-text-soft);
}

.ribology-cart-row__sku-value {
	font-family: var(--rb-mono);
	font-size: 12px;
	color: var(--rb-charcoal);
	background: var(--rb-lab-white);
	padding: 2px 6px;
	border-radius: 3px;
	border: 1px solid var(--rb-hairline);
}

.ribology-cart-row__price,
.ribology-cart-row__subtotal {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ribology-cart-row__price {
	font-size: 14px;
	color: var(--rb-charcoal);
}

.ribology-cart-row__subtotal {
	font-size: 15px;
	font-weight: 600;
	color: var(--rb-navy);
}

.ribology-cart-row__price bdi,
.ribology-cart-row__subtotal bdi {
	font-variant-numeric: tabular-nums;
}

/* ---------- Remove link ---------- */
.ribology-cart-row__remove {
	text-align: center;
}

.ribology-cart-row__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--rb-text-soft);
	text-decoration: none;
	transition: all 0.15s ease;
}

.ribology-cart-row__remove-link:hover {
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c;
}

.ribology-cart-row__backorder {
	margin: 8px 0 0;
	font-size: 12px;
	color: #b45309;
}

/* ---------- Qty stepper ---------- */
.ribology-cart-row__qty {
	text-align: right;
}

.ribology-cart-qty-stepper {
	display: inline-flex;
	align-items: center;
	height: 40px;
	width: 120px;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.ribology-cart-qty-stepper:focus-within {
	border-color: var(--rb-sky);
	box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.12);
}

.ribology-cart-qty-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 100%;
	border: none;
	background: transparent;
	color: var(--rb-navy);
	cursor: pointer;
	padding: 0;
	transition: background 0.12s ease;
}

.ribology-cart-qty-stepper__btn:hover {
	background: var(--rb-lab-white);
}

.ribology-cart-qty-stepper__btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.ribology-cart-qty-stepper .quantity {
	flex: 1;
	margin: 0;
	padding: 0;
	display: flex;
	border-left: 1px solid var(--rb-hairline);
	border-right: 1px solid var(--rb-hairline);
	height: 100%;
}

.ribology-cart-qty-stepper .quantity label {
	position: absolute;
	left: -9999px;
}

.ribology-cart-qty-stepper input.qty {
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
	text-align: center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--rb-navy);
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
	appearance: textfield;
	font-variant-numeric: tabular-nums;
}

.ribology-cart-qty-stepper input.qty:focus {
	outline: none;
}

.ribology-cart-qty-stepper input.qty::-webkit-inner-spin-button,
.ribology-cart-qty-stepper input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- Actions row (below table) ---------- */
.ribology-cart__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.ribology-cart__continue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--rb-sky);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ribology-cart__continue:hover {
	color: var(--rb-navy);
}

.ribology-cart__update {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: var(--rb-navy);
	background: transparent;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.15s ease;
	letter-spacing: 0.01em;
}

.ribology-cart__update:hover {
	background: var(--rb-lab-white);
	border-color: var(--rb-navy);
}

/* ============================================================
 * ORDER SUMMARY SIDEBAR
 * ============================================================ */
.ribology-cart__sidebar {
	position: sticky;
	top: 100px;
}

@media (max-width: 899px) {
	.ribology-cart__sidebar {
		position: static;
	}
}

.ribology-cart__summary {
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 10px;
	overflow: hidden;
}

/* Subtle navy stripe at top */
.ribology-cart__summary::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--rb-navy);
}

.ribology-cart__summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--rb-hairline);
}

.ribology-cart__summary-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: -0.005em;
}

.ribology-cart__summary-stamp {
	font-family: var(--rb-mono);
	font-size: 11px;
	color: var(--rb-text-soft);
	letter-spacing: 0.04em;
	padding: 3px 7px;
	border: 1px dashed var(--rb-hairline-strong);
	border-radius: 3px;
}

/* ---------- Free shipping ---------- */
.ribology-cart__free-shipping {
	padding: 14px 20px;
	background: var(--rb-lab-white);
	border-bottom: 1px solid var(--rb-hairline);
}

.ribology-cart__free-shipping-msg {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--rb-charcoal);
	display: flex;
	align-items: center;
	gap: 6px;
}

.ribology-cart__free-shipping-msg strong {
	font-weight: 600;
	color: var(--rb-navy);
}

.ribology-cart__free-shipping-msg--unlocked {
	color: var(--rb-forest);
	font-weight: 600;
}

.ribology-cart__free-shipping-msg--unlocked svg {
	color: var(--rb-forest);
	flex-shrink: 0;
}

.ribology-cart__free-shipping-bar {
	height: 4px;
	background: rgba(25, 179, 215, 0.18);
	border-radius: 2px;
	overflow: hidden;
}

.ribology-cart__free-shipping-fill {
	height: 100%;
	background: var(--rb-navy);
	border-radius: 2px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ribology-cart__free-shipping[data-progress="100"] .ribology-cart__free-shipping-fill {
	background: var(--rb-forest);
}

/* ---------- Totals ---------- */
.ribology-cart__totals {
	padding: 16px 20px;
}

.ribology-cart__total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
}

.ribology-cart__total-label {
	color: var(--rb-charcoal);
}

.ribology-cart__total-value {
	color: var(--rb-charcoal);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ribology-cart__total-row--coupon .ribology-cart__total-value {
	color: var(--rb-forest);
}

.ribology-cart__total-row--tax {
	font-size: 13px;
	color: var(--rb-text-soft);
}

.ribology-cart__total-row--tax .ribology-cart__total-label,
.ribology-cart__total-row--tax .ribology-cart__total-value {
	color: var(--rb-text-soft);
}

.ribology-cart__total-row--tax small {
	font-size: 11px;
	opacity: 0.85;
}

.ribology-cart__total-row--grand {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--rb-hairline-strong);
	font-size: 16px;
}

.ribology-cart__total-row--grand .ribology-cart__total-label {
	font-weight: 600;
	color: var(--rb-navy);
}

.ribology-cart__total-value--grand {
	font-weight: 700;
	color: var(--rb-navy);
	font-size: 18px;
}

.ribology-cart__total-value--grand .woocommerce-Price-amount {
	font-size: 18px;
	font-weight: 700;
}

/* ---------- Shipping section ---------- */
.ribology-cart__shipping {
	padding: 6px 0;
}

.ribology-cart__shipping .woocommerce-shipping-totals,
.ribology-cart__shipping > .shipping {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
}

.ribology-cart__shipping th,
.ribology-cart__shipping td {
	padding: 0;
	border: none;
	background: transparent;
	display: block;
}

.ribology-cart__shipping th {
	font-weight: 400;
	color: var(--rb-charcoal);
	font-size: 14px;
	margin-bottom: 4px;
}

.ribology-cart__shipping ul.woocommerce-shipping-methods {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.ribology-cart__shipping ul.woocommerce-shipping-methods li {
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--rb-charcoal);
}

.ribology-cart__shipping ul.woocommerce-shipping-methods label {
	display: inline;
	margin-left: 6px;
	cursor: pointer;
}

.ribology-cart__shipping .shipping-calculator-button {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--rb-sky);
	text-decoration: none;
}

.ribology-cart__shipping .shipping-calculator-button:hover {
	color: var(--rb-navy);
}

.ribology-cart__shipping .shipping-calculator-form {
	margin-top: 10px;
	padding: 12px;
	background: var(--rb-lab-white);
	border-radius: 6px;
	border: 1px solid var(--rb-hairline);
}

.ribology-cart__shipping .shipping-calculator-form p {
	margin: 0 0 8px;
}

.ribology-cart__shipping .shipping-calculator-form select,
.ribology-cart__shipping .shipping-calculator-form input[type="text"] {
	width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 4px;
	background: #fff;
	color: var(--rb-charcoal);
}

.ribology-cart__shipping .shipping-calculator-form select:focus,
.ribology-cart__shipping .shipping-calculator-form input[type="text"]:focus {
	outline: none;
	border-color: var(--rb-sky);
	box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.12);
}

.ribology-cart__shipping .shipping-calculator-form .button {
	width: 100%;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--rb-navy);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ribology-cart__shipping .shipping-calculator-form .button:hover {
	background: #0f2f5c;
}

/* ---------- Checkout button ---------- */
.ribology-cart__checkout {
	padding: 0 20px 20px;
}

.ribology-cart__checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--rb-navy);
	border: none;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease;
	letter-spacing: 0.005em;
}

.ribology-cart__checkout-btn:hover {
	background: #0f2f5c;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(23, 67, 121, 0.18);
}

.ribology-cart__checkout-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Express-pay buttons injected via woocommerce_proceed_to_checkout hook */
.ribology-cart__checkout > *:not(.ribology-cart__checkout-btn) {
	margin-top: 10px;
}

/* ---------- Trust signals ---------- */
.ribology-cart__trust {
	padding: 16px 20px 18px;
	border-top: 1px solid var(--rb-hairline);
	background: var(--rb-lab-white);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ribology-cart__trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--rb-charcoal);
	line-height: 1.3;
}

.ribology-cart__trust-item svg {
	color: var(--rb-navy);
	flex-shrink: 0;
}

/* ============================================================
 * STICKY MOBILE BAR
 * ============================================================ */
.ribology-cart__mobile-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: #fff;
	border-top: 1px solid var(--rb-hairline-strong);
	box-shadow: 0 -4px 16px rgba(23, 67, 121, 0.08);
	padding: 12px 16px;
	transform: translateY(100%);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	display: none;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

@media (max-width: 899px) {
	.ribology-cart__mobile-bar {
		display: block;
	}
}

.ribology-cart__mobile-bar--visible {
	transform: translateY(0);
}

.ribology-cart__mobile-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1280px;
	margin: 0 auto;
}

.ribology-cart__mobile-bar-totals {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ribology-cart__mobile-bar-label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rb-text-soft);
}

.ribology-cart__mobile-bar-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-navy);
	font-variant-numeric: tabular-nums;
}

.ribology-cart__mobile-bar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--rb-navy);
	border: none;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.ribology-cart__mobile-bar-btn:hover {
	background: #0f2f5c;
	color: #fff;
}

/* ============================================================
 * EMPTY STATE
 * ============================================================ */
.ribology-cart--empty {
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ribology-cart__empty {
	text-align: center;
	max-width: 460px;
	padding: 48px 24px;
}

.ribology-cart__empty-graphic {
	color: var(--rb-navy);
	opacity: 0.4;
	margin-bottom: 20px;
	display: inline-flex;
}

.ribology-cart__empty-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0 0 12px;
}

.ribology-cart__empty-msg {
	font-size: 15px;
	line-height: 1.5;
	color: var(--rb-charcoal);
	margin: 0 0 28px;
}

.ribology-cart__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--rb-navy);
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.15s ease;
}

.ribology-cart__empty-cta:hover {
	background: #0f2f5c;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(23, 67, 121, 0.18);
}

.ribology-cart__empty-meta {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--rb-hairline);
	font-size: 13px;
	color: var(--rb-text-soft);
}

.ribology-cart__empty-meta span {
	display: block;
	margin-bottom: 4px;
}

.ribology-cart__empty-meta a {
	color: var(--rb-sky);
	text-decoration: none;
	font-weight: 500;
}

.ribology-cart__empty-meta a:hover {
	color: var(--rb-navy);
}

/* ============================================================
 * MOBILE BREAKPOINT — Table -> stacked cards
 * ============================================================ */
@media (max-width: 720px) {
	.ribology-cart {
		padding: 0 16px;
		margin: 24px auto 100px;
	}

	.ribology-cart__title {
		font-size: 22px;
	}

	.ribology-cart-table {
		border: none;
		background: transparent;
		border-radius: 0;
	}

	.ribology-cart-table thead {
		display: none;
	}

	.ribology-cart-table tbody,
	.ribology-cart-table tr,
	.ribology-cart-table td {
		display: block;
		width: 100%;
	}

	.ribology-cart-row {
		background: #fff;
		border: 1px solid var(--rb-hairline-strong);
		border-radius: 10px;
		margin-bottom: 12px;
		padding: 16px;
		position: relative;
	}

	.ribology-cart-row td {
		padding: 0;
		border: none;
		background: transparent;
	}

	.ribology-cart-row__item {
		margin-bottom: 14px;
	}

	.ribology-cart-row__thumb {
		width: 64px;
		height: 64px;
	}

	.ribology-cart-row__qty,
	.ribology-cart-row__price,
	.ribology-cart-row__subtotal {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 8px 0 !important;
		text-align: left;
		border-top: 1px solid var(--rb-hairline);
	}

	.ribology-cart-row__qty::before,
	.ribology-cart-row__price::before,
	.ribology-cart-row__subtotal::before {
		content: attr(data-title);
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--rb-text-soft);
	}

	.ribology-cart-row__remove {
		position: absolute;
		top: 12px;
		right: 12px;
		padding: 0 !important;
	}

	.ribology-cart__summary-stamp {
		display: none;
	}
}
/* ============================================================
 * CHECKOUT PAGE — Concept B (Numbered Section Cards)
 * ------------------------------------------------------------
 * Append to the end of style.css and bump version 1.2.1 -> 1.2.2
 * ============================================================ */

.ribology-checkout,
.ribology-checkout-summary {
	--rb-sky: #19B3D7;
	--rb-navy: #174379;
	--rb-charcoal: #3D3D3D;
	--rb-forest: #177917;
	--rb-lab-white: #F7F9FA;
	--rb-hairline: rgba(23, 67, 121, 0.08);
	--rb-hairline-strong: rgba(23, 67, 121, 0.18);
	--rb-text-soft: rgba(61, 61, 61, 0.65);
	--rb-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- Wrapper ---------- */
.ribology-checkout {
	max-width: 1280px;
	margin: 40px auto 80px;
	padding: 0 24px;
	color: var(--rb-charcoal);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-variant-numeric: tabular-nums;
}

/* Form needs to allow children full width */
.ribology-checkout-form {
	margin: 0;
	padding: 0;
}

/* ---------- Header ---------- */
.ribology-checkout__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rb-hairline-strong);
	flex-wrap: wrap;
}

.ribology-checkout__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: -0.01em;
}

.ribology-checkout__back-to-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rb-sky);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ribology-checkout__back-to-cart:hover {
	color: var(--rb-navy);
}

/* ---------- Layout ---------- */
.ribology-checkout__layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 40px;
	align-items: start;
}

@media (max-width: 1024px) {
	.ribology-checkout__layout {
		grid-template-columns: 1fr 340px;
		gap: 28px;
	}
}

@media (max-width: 899px) {
	.ribology-checkout__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.ribology-checkout__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ============================================================
 * NUMBERED SECTION CARDS
 * ============================================================ */
.ribology-checkout-card {
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 10px;
	overflow: hidden;
}

.ribology-checkout-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--rb-hairline);
	background: var(--rb-lab-white);
}

.ribology-checkout-card__num {
	font-family: var(--rb-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--rb-text-soft);
	letter-spacing: 0.06em;
	padding: 3px 8px;
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 3px;
}

.ribology-checkout-card__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: -0.005em;
}

.ribology-checkout-card__body {
	padding: 20px;
}

/* ---------- Trade account note ---------- */
.ribology-checkout__trade-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--rb-charcoal);
}

.ribology-checkout__trade-note svg {
	color: var(--rb-navy);
	flex-shrink: 0;
	margin-top: 2px;
}

.ribology-checkout__trade-note a {
	color: var(--rb-sky);
	text-decoration: none;
	font-weight: 600;
}

.ribology-checkout__trade-note a:hover {
	color: var(--rb-navy);
}

/* ============================================================
 * FORM FIELDS (override Woo default styles)
 * ============================================================ */
.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
.ribology-checkout .woocommerce-additional-fields__field-wrapper,
.ribology-checkout-card__body > .form-row {
	display: block;
}

/* Each form row */
.ribology-checkout .form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 14px;
	padding: 0;
	width: 100%;
	float: none;
}

.ribology-checkout .form-row:last-child {
	margin-bottom: 0;
}

/* Two-column rows (first/last name etc.) */
.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.ribology-checkout .form-row-first {
	grid-column: 1;
}

.ribology-checkout .form-row-last {
	grid-column: 2;
}

.ribology-checkout .form-row-wide,
.ribology-checkout .notes,
.ribology-checkout .address-field {
	grid-column: 1 / -1;
}

@media (max-width: 540px) {
	.ribology-checkout .woocommerce-billing-fields__field-wrapper,
	.ribology-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	.ribology-checkout .form-row-first,
	.ribology-checkout .form-row-last {
		grid-column: 1;
	}
}

/* Labels */
.ribology-checkout .form-row label,
.ribology-checkout .form-row > label.checkbox {
	font-size: 12px;
	font-weight: 600;
	color: var(--rb-charcoal);
	letter-spacing: 0.01em;
	margin: 0;
	display: inline-block;
}

.ribology-checkout .form-row label .required,
.ribology-checkout .form-row label abbr {
	color: #b91c1c;
	text-decoration: none;
	font-weight: 600;
	border: none;
	margin-left: 2px;
}

.ribology-checkout .form-row label .optional {
	color: var(--rb-text-soft);
	font-weight: 400;
}

/* Inputs / selects / textareas */
.ribology-checkout .form-row input.input-text,
.ribology-checkout .form-row textarea,
.ribology-checkout .form-row select,
.ribology-checkout .select2-container--default .select2-selection--single {
	width: 100%;
	height: 44px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--rb-charcoal);
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 6px;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
	line-height: 1.4;
}

.ribology-checkout .form-row textarea {
	height: auto;
	min-height: 88px;
	padding: 10px 12px;
	resize: vertical;
	font-family: inherit;
}

.ribology-checkout .form-row select {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%23174379' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.ribology-checkout .form-row input.input-text:focus,
.ribology-checkout .form-row textarea:focus,
.ribology-checkout .form-row select:focus {
	outline: none;
	border-color: var(--rb-sky);
	box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15);
}

/* Select2 (Woo's enhanced select) */
.ribology-checkout .select2-container--default .select2-selection--single {
	height: 44px !important;
	padding: 0 36px 0 12px !important;
	border: 1px solid var(--rb-hairline-strong) !important;
	border-radius: 6px !important;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%23174379' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
}

.ribology-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px !important;
	color: var(--rb-charcoal) !important;
	padding: 0 !important;
	font-size: 14px;
}

.ribology-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none !important;
}

.ribology-checkout .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--rb-sky) !important;
	box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15) !important;
}

/* Select2 dropdown */
.select2-dropdown {
	border-color: var(--rb-hairline-strong) !important;
	border-radius: 6px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--rb-navy) !important;
	color: #fff !important;
}

/* Error states */
.ribology-checkout .woocommerce-invalid input.input-text,
.ribology-checkout .woocommerce-invalid select,
.ribology-checkout .woocommerce-invalid textarea {
	border-color: #b91c1c;
}

.ribology-checkout .woocommerce-invalid input.input-text:focus,
.ribology-checkout .woocommerce-invalid select:focus,
.ribology-checkout .woocommerce-invalid textarea:focus {
	box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}

/* ---------- Ship to different address toggle ---------- */
.ribology-checkout__ship-toggle {
	margin: 20px 0 0;
	padding: 14px 16px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
}

.ribology-checkout__ship-toggle label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	color: var(--rb-charcoal);
	font-size: 14px !important;
	font-weight: 500 !important;
}

.ribology-checkout__ship-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--rb-navy);
	cursor: pointer;
}

/* Shipping address sub-section */
.shipping_address {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--rb-hairline-strong);
}

.ribology-checkout__sub-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rb-navy);
	margin: 0 0 14px;
}

/* ============================================================
 * ORDER SUMMARY SIDEBAR
 * ============================================================ */
.ribology-checkout__sidebar {
	position: sticky;
	top: 100px;
}

@media (max-width: 899px) {
	.ribology-checkout__sidebar {
		position: static;
	}
}

.ribology-checkout-summary,
#order_review.woocommerce-checkout-review-order .ribology-checkout-summary,
#order_review.woocommerce-checkout-review-order {
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 10px;
	overflow: hidden;
}

#order_review.woocommerce-checkout-review-order {
	border: none;
	background: transparent;
}

.ribology-checkout-summary::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--rb-navy);
}

.ribology-checkout-summary__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--rb-hairline);
}

.ribology-checkout-summary__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: -0.005em;
}

.ribology-checkout-summary__edit {
	font-size: 12px;
	font-weight: 500;
	color: var(--rb-sky);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.ribology-checkout-summary__edit:hover {
	color: var(--rb-navy);
}

/* ---------- Items list ---------- */
.ribology-checkout-summary__items {
	list-style: none;
	margin: 0;
	padding: 16px 20px;
	border-bottom: 1px solid var(--rb-hairline);
}

.ribology-checkout-summary__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
}

.ribology-checkout-summary__item:first-child {
	padding-top: 0;
}

.ribology-checkout-summary__item:last-child {
	padding-bottom: 0;
}

.ribology-checkout-summary__item + .ribology-checkout-summary__item {
	border-top: 1px solid var(--rb-hairline);
}

.ribology-checkout-summary__item-thumb {
	position: relative;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
}

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

.ribology-checkout-summary__item-qty {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--rb-navy);
	color: #fff;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.ribology-checkout-summary__item-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ribology-checkout-summary__item-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rb-navy);
	line-height: 1.3;
}

.ribology-checkout-summary__item-variation {
	font-size: 12px;
	color: var(--rb-text-soft);
	line-height: 1.4;
}

.ribology-checkout-summary__item-variation p,
.ribology-checkout-summary__item-variation dl {
	margin: 0;
}

.ribology-checkout-summary__item-variation dt,
.ribology-checkout-summary__item-variation dd {
	display: inline;
	margin: 0;
	font-size: 12px;
}

.ribology-checkout-summary__item-variation dt::after {
	content: ": ";
}

.ribology-checkout-summary__item-sku {
	font-family: var(--rb-mono);
	font-size: 11px;
	color: var(--rb-text-soft);
	margin-top: 2px;
}

.ribology-checkout-summary__item-price {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rb-navy);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------- Totals ---------- */
.ribology-checkout-summary__totals {
	padding: 14px 20px;
	border-bottom: 1px solid var(--rb-hairline);
}

.ribology-checkout-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13.5px;
}

.ribology-checkout-summary__row-label {
	color: var(--rb-charcoal);
}

.ribology-checkout-summary__row-value {
	color: var(--rb-charcoal);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ribology-checkout-summary__row--discount .ribology-checkout-summary__row-value {
	color: var(--rb-forest);
}

.ribology-checkout-summary__row--tax {
	font-size: 12.5px;
	color: var(--rb-text-soft);
}

.ribology-checkout-summary__row--tax .ribology-checkout-summary__row-label,
.ribology-checkout-summary__row--tax .ribology-checkout-summary__row-value {
	color: var(--rb-text-soft);
}

.ribology-checkout-summary__row--total {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--rb-hairline-strong);
	font-size: 15px;
}

.ribology-checkout-summary__row--total .ribology-checkout-summary__row-label {
	font-weight: 600;
	color: var(--rb-navy);
}

.ribology-checkout-summary__row--total .ribology-checkout-summary__row-value {
	font-weight: 700;
	color: var(--rb-navy);
	font-size: 17px;
}

/* Shipping section (Woo native rendering) */
.ribology-checkout-summary__shipping {
	padding: 4px 0;
}

.ribology-checkout-summary__shipping .woocommerce-shipping-totals,
.ribology-checkout-summary__shipping > .shipping {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px 0;
}

.ribology-checkout-summary__shipping th,
.ribology-checkout-summary__shipping td {
	padding: 0;
	border: none;
	background: transparent;
	display: block;
	text-align: left;
}

.ribology-checkout-summary__shipping th {
	font-weight: 400;
	color: var(--rb-charcoal);
	font-size: 13.5px;
	margin-bottom: 2px;
}

.ribology-checkout-summary__shipping ul.woocommerce-shipping-methods {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.ribology-checkout-summary__shipping ul.woocommerce-shipping-methods li {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--rb-charcoal);
	display: flex;
	align-items: center;
	gap: 6px;
}

.ribology-checkout-summary__shipping ul.woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--rb-navy);
}

.ribology-checkout-summary__shipping ul.woocommerce-shipping-methods label {
	cursor: pointer;
	margin: 0;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.ribology-checkout-summary__shipping .shipping-calculator-button {
	font-size: 12.5px;
	color: var(--rb-sky);
	text-decoration: none;
}

.ribology-checkout-summary__shipping .shipping-calculator-button:hover {
	color: var(--rb-navy);
}

/* ============================================================
 * PAYMENT SECTION (inside order summary)
 * ============================================================ */
.ribology-checkout-payment {
	padding: 16px 20px;
}

.ribology-checkout-payment__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rb-navy);
	margin: 0 0 12px;
}

.ribology-checkout .payment_methods {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	border: 1px solid var(--rb-hairline);
	border-radius: 6px;
	overflow: hidden;
}

.ribology-checkout .payment_methods > li {
	margin: 0;
	padding: 12px 14px;
	background: #fff;
	border-bottom: 1px solid var(--rb-hairline);
	list-style: none;
}

.ribology-checkout .payment_methods > li:last-child {
	border-bottom: none;
}

.ribology-checkout .payment_methods > li > label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--rb-navy) !important;
	margin: 0;
	cursor: pointer;
}

.ribology-checkout .payment_methods > li > input[type="radio"] {
	accent-color: var(--rb-navy);
	margin-right: 4px;
}

/* Single-method state: hide the radio + simplify label */
.ribology-checkout .payment_methods.ribology-single-method > li > input[type="radio"] {
	display: none;
}

.ribology-checkout .payment_methods.ribology-single-method > li > label {
	cursor: default;
}

/* Payment box (revealed when method selected) */
.ribology-checkout .payment_methods > li .payment_box {
	margin: 12px 0 0;
	padding: 14px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
	border-radius: 6px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rb-charcoal);
}

.ribology-checkout .payment_methods > li .payment_box p:last-child {
	margin-bottom: 0;
}

.ribology-checkout .payment_methods > li .payment_box input.input-text {
	height: 40px;
	padding: 8px 12px;
}

/* Gateway icons */
.ribology-checkout .payment_methods img {
	max-height: 24px;
	width: auto;
	margin-left: auto;
	display: inline-block;
	vertical-align: middle;
}

/* Place order button */
.ribology-checkout__place-order {
	margin: 0;
	padding: 0;
}

.ribology-checkout__place-order-btn,
#place_order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: #fff !important;
	background: var(--rb-navy) !important;
	border: none !important;
	border-radius: 6px !important;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease;
	letter-spacing: 0.005em;
	box-shadow: none;
	text-shadow: none;
}

.ribology-checkout__place-order-btn:hover,
#place_order:hover {
	background: #0f2f5c !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(23, 67, 121, 0.18);
}

.ribology-checkout__place-order-btn:active,
#place_order:active {
	transform: translateY(0);
	box-shadow: none;
}

.ribology-checkout__place-order-btn:disabled,
#place_order:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Terms checkbox (if any) */
.ribology-checkout .wc-terms-and-conditions {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--rb-charcoal);
}

.ribology-checkout .wc-terms-and-conditions label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	margin: 0;
	font-size: 13px !important;
	font-weight: 500 !important;
}

.ribology-checkout .wc-terms-and-conditions input[type="checkbox"] {
	margin-top: 2px;
	accent-color: var(--rb-navy);
	flex-shrink: 0;
}

.ribology-checkout .wc-terms-and-conditions-link {
	color: var(--rb-sky);
	text-decoration: none;
}

.ribology-checkout .wc-terms-and-conditions-link:hover {
	color: var(--rb-navy);
}

/* ---------- Trust signals ---------- */
.ribology-checkout__trust {
	padding: 14px 20px 16px;
	background: var(--rb-lab-white);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ribology-checkout__trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--rb-charcoal);
}

.ribology-checkout__trust-item svg {
	color: var(--rb-navy);
	flex-shrink: 0;
}

/* ============================================================
 * WOO NOTICES / ERRORS
 * ============================================================ */
.ribology-checkout .woocommerce-NoticeGroup,
.ribology-checkout .woocommerce-error,
.ribology-checkout .woocommerce-info,
.ribology-checkout .woocommerce-message {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 6px;
	font-size: 13.5px;
	color: var(--rb-charcoal);
	list-style: none;
}

.ribology-checkout .woocommerce-error {
	background: #fef2f2;
	border-color: rgba(185, 28, 28, 0.25);
	color: #7f1d1d;
}

.ribology-checkout .woocommerce-error li {
	list-style: none;
	margin: 0;
}

.ribology-checkout .woocommerce-error li + li {
	margin-top: 4px;
}

/* AJAX loading state */
.ribology-checkout .blockUI.blockOverlay {
	background: rgba(247, 249, 250, 0.6) !important;
}

/* ============================================================
 * MOBILE
 * ============================================================ */
@media (max-width: 720px) {
	.ribology-checkout {
		padding: 0 16px;
		margin: 24px auto 60px;
	}

	.ribology-checkout__title {
		font-size: 22px;
	}

	.ribology-checkout-card__header {
		padding: 14px 16px;
	}

	.ribology-checkout-card__body {
		padding: 16px;
	}

	.ribology-checkout-summary__header,
	.ribology-checkout-summary__items,
	.ribology-checkout-summary__totals,
	.ribology-checkout-payment,
	.ribology-checkout__trust {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ============================================================
 * RIBOLOGY v2 — Cart/Checkout/Mini-cart polish
 * ------------------------------------------------------------
 * Append to the end of style.css.
 * After appending, bump version 1.2.2 -> 1.3.0 in both:
 *   - style.css header (Version: 1.3.0)
 *   - functions.php wp_enqueue_style() call
 * ============================================================ */

/* ---------- Token alignment (used by everything below) ---------- */
:root {
	--rb-sky: #19B3D7;
	--rb-navy: #174379;
	--rb-navy-hover: #0f2f5c;
	--rb-charcoal: #3D3D3D;
	--rb-forest: #177917;
	--rb-lab-white: #F7F9FA;
	--rb-hairline: rgba(23, 67, 121, 0.08);
	--rb-hairline-strong: rgba(23, 67, 121, 0.18);
	--rb-text-soft: rgba(61, 61, 61, 0.65);
	--rb-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ============================================================
 * NAVY BUTTON UTILITY
 * Used for: Continue shopping, Return to cart, Edit, empty-cart CTA,
 * Save mailing address, anywhere we want a primary action.
 * ============================================================ */
.ribology-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	text-decoration: none;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	letter-spacing: 0.005em;
	line-height: 1.2;
}

.ribology-btn--navy {
	background: var(--rb-navy) !important;
	color: #fff !important;
}

.ribology-btn--navy:hover,
.ribology-btn--navy:focus-visible {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(23, 67, 121, 0.18);
}

.ribology-btn--navy:active {
	transform: translateY(0);
	box-shadow: none;
}

.ribology-btn--navy-sm {
	padding: 7px 14px;
	font-size: 12px;
	background: var(--rb-navy) !important;
	color: #fff !important;
	border-radius: 5px;
}

.ribology-btn--navy-sm:hover,
.ribology-btn--navy-sm:focus-visible {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
}

/* ============================================================
 * REMOVE WP PAGE TITLE ON CART / CHECKOUT (CSS fallback)
 * ============================================================ */
.page-id-810 .entry-title,
.page-id-810 .page-title,
.page-id-810 > h1:first-child,
.page-id-840 .entry-title,
.page-id-840 .page-title,
.page-id-840 > h1:first-child {
	display: none !important;
}

/* Generic catch in case the theme uses different IDs */
body.page-template-default.woocommerce-cart > main > h1.entry-title,
body.page-template-default.woocommerce-checkout > main > h1.entry-title {
	display: none !important;
}

/* ============================================================
 * SECTION NUMBER CIRCLES (1, 2, 3) — navy bg, white text
 * Override prior badge styling
 * ============================================================ */
.ribology-checkout-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--rb-navy);
	color: #fff;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0;
	border: none;
	flex-shrink: 0;
}

.ribology-checkout-card__header {
	gap: 14px;
}

/* ============================================================
 * COUNTRY DROPDOWN VISIBILITY FIX (Select2)
 * ============================================================ */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.ribology-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
.ribology-shipping-calc .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--rb-charcoal) !important;
}

.select2-results__option,
.select2-search__field {
	color: var(--rb-charcoal) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--rb-navy) !important;
	color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--rb-lab-white) !important;
	color: var(--rb-charcoal) !important;
}

/* ============================================================
 * PURPLE -> NAVY HOVER OVERRIDES
 * (Royal Elementor / other theme defaults leaking through)
 * ============================================================ */
.ribology-cart a:hover,
.ribology-cart a:focus-visible,
.ribology-checkout a:hover,
.ribology-checkout a:focus-visible,
.ribology-cart-empty a:hover,
.ribology-cart-empty a:focus-visible,
.ribology-mini-cart a:hover,
.ribology-mini-cart a:focus-visible,
.ribology-shipping-calc a:hover,
.ribology-shipping-calc a:focus-visible {
	color: var(--rb-navy) !important;
}

/* Buttons, button-like links, never go purple */
.ribology-cart button:hover,
.ribology-cart button:focus-visible,
.ribology-checkout button:hover,
.ribology-checkout button:focus-visible,
.ribology-mini-cart button:hover,
.ribology-mini-cart button:focus-visible {
	color: inherit;
}

/* Qty stepper buttons — navy on hover, not purple */
.ribology-cart-qty-stepper__btn {
	color: var(--rb-navy) !important;
}

.ribology-cart-qty-stepper__btn:hover,
.ribology-cart-qty-stepper__btn:focus-visible {
	background: var(--rb-lab-white) !important;
	color: var(--rb-navy) !important;
}

/* Trade note link */
.ribology-checkout__trade-note a:hover,
.ribology-checkout__trade-note a:focus-visible {
	color: var(--rb-navy) !important;
}

/* ============================================================
 * HIDE WOO CART NOTICES + STANDALONE UPDATE CART BUTTON
 * ============================================================ */
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-message,
.ribology-cart .woocommerce-message,
.ribology-cart .woocommerce-info {
	display: none !important;
}

/* Defensive — hide any stray "Update cart" submit button */
.ribology-cart [name="update_cart"],
.ribology-cart__update {
	display: none !important;
}

/* Hide Woo's "Have a coupon?" link if it injects elsewhere */
.woocommerce-cart .checkout_coupon,
.checkout_coupon,
.woocommerce-form-coupon,
.woocommerce-form-coupon-toggle {
	display: none !important;
}

/* ============================================================
 * MAILING ADDRESS CARD (cart page)
 * ============================================================ */
.ribology-cart__mailing {
	margin-top: 24px;
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 10px;
	overflow: hidden;
}

.ribology-cart__mailing-header {
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--rb-hairline);
	background: var(--rb-lab-white);
}

.ribology-cart__mailing-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0 0 4px;
	letter-spacing: -0.005em;
}

.ribology-cart__mailing-msg {
	font-size: 12.5px;
	color: var(--rb-text-soft);
	margin: 0;
	line-height: 1.4;
}

/* Captured address display */
.ribology-cart__mailing-captured {
	padding: 16px 20px;
}

.ribology-cart__mailing-captured-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
	border-radius: 6px;
}

.ribology-cart__mailing-captured-inner > svg {
	color: var(--rb-navy);
	flex-shrink: 0;
}

.ribology-cart__mailing-captured-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ribology-cart__mailing-captured-text strong {
	font-size: 14px;
	font-weight: 600;
	color: var(--rb-navy);
}

.ribology-cart__mailing-captured-text span {
	font-size: 13px;
	color: var(--rb-charcoal);
}

.ribology-cart__mailing-edit {
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--rb-navy);
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 5px;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.ribology-cart__mailing-edit:hover {
	background: var(--rb-navy);
	color: #fff;
	border-color: var(--rb-navy);
}

.ribology-cart__mailing-form[hidden] {
	display: none;
}

/* ============================================================
 * SHIPPING CALCULATOR (always-expanded mailing address form)
 * ============================================================ */
.ribology-shipping-calc {
	padding: 16px 20px;
}

.ribology-shipping-calc__form {
	margin: 0;
}

.ribology-shipping-calc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 14px;
}

.ribology-shipping-calc__field {
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ribology-shipping-calc__field--suburb { grid-column: 1; }
.ribology-shipping-calc__field--postcode { grid-column: 2; }
.ribology-shipping-calc__field--state { grid-column: 1; }
.ribology-shipping-calc__field--country { grid-column: 2; }

@media (max-width: 540px) {
	.ribology-shipping-calc__grid { grid-template-columns: 1fr; }
	.ribology-shipping-calc__field--suburb,
	.ribology-shipping-calc__field--postcode,
	.ribology-shipping-calc__field--state,
	.ribology-shipping-calc__field--country { grid-column: 1; }
}

.ribology-shipping-calc__field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--rb-charcoal);
	letter-spacing: 0.01em;
}

.ribology-shipping-calc__field label abbr {
	color: #b91c1c;
	text-decoration: none;
	border: none;
	margin-left: 2px;
}

.ribology-shipping-calc__field input,
.ribology-shipping-calc__field select {
	width: 100%;
	height: 42px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--rb-charcoal);
	background: #fff;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 6px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}

.ribology-shipping-calc__field select {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%23174379' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

.ribology-shipping-calc__field input:focus,
.ribology-shipping-calc__field select:focus {
	outline: none;
	border-color: var(--rb-sky);
	box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15);
}

/* Select2 inside shipping calc */
.ribology-shipping-calc .select2-container--default .select2-selection--single {
	height: 42px !important;
	border: 1px solid var(--rb-hairline-strong) !important;
	border-radius: 6px !important;
	padding: 0 34px 0 12px !important;
}

.ribology-shipping-calc .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px !important;
	color: var(--rb-charcoal) !important;
	padding: 0 !important;
}

.ribology-shipping-calc .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none !important;
}

.ribology-shipping-calc__submit {
	margin-top: 8px;
}

.ribology-shipping-calc__submit .ribology-btn {
	width: 100%;
}

@media (min-width: 700px) {
	.ribology-shipping-calc__submit .ribology-btn { width: auto; }
}

/* ============================================================
 * EMPTY CART REDESIGN
 * ============================================================ */
.ribology-cart-empty {
	max-width: 1280px;
	margin: 40px auto 80px;
	padding: 60px 24px;
	display: flex;
	justify-content: center;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--rb-charcoal);
}

.ribology-cart-empty__inner {
	max-width: 520px;
	width: 100%;
	text-align: center;
}

.ribology-cart-empty__icon {
	color: var(--rb-navy);
	margin-bottom: 24px;
	display: inline-flex;
	opacity: 0.85;
}

.ribology-cart-empty__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}

.ribology-cart-empty__msg {
	font-size: 15px;
	line-height: 1.5;
	color: var(--rb-charcoal);
	margin: 0 0 28px;
}

.ribology-cart-empty__cta-wrap {
	margin-bottom: 40px;
}

.ribology-cart-empty__cta {
	padding: 14px 28px;
	font-size: 15px;
}

.ribology-cart-empty__divider {
	height: 1px;
	background: var(--rb-hairline-strong);
	margin: 0 auto 32px;
	max-width: 280px;
}

.ribology-cart-empty__trade {
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
	border-radius: 10px;
	padding: 24px 24px 22px;
	text-align: center;
}

.ribology-cart-empty__trade-icon {
	color: var(--rb-navy);
	margin-bottom: 10px;
	display: inline-flex;
	opacity: 0.85;
}

.ribology-cart-empty__trade-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0 0 8px;
}

.ribology-cart-empty__trade-msg {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--rb-charcoal);
	margin: 0 0 14px;
}

.ribology-cart-empty__trade-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rb-sky);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ribology-cart-empty__trade-link:hover,
.ribology-cart-empty__trade-link:focus-visible {
	color: var(--rb-navy) !important;
}

/* ============================================================
 * MINI CART DRAWER
 * ============================================================ */
.ribology-mini-cart {
	position: fixed;
	inset: 0;
	z-index: 9999;
	visibility: hidden;
	pointer-events: none;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-variant-numeric: tabular-nums;
	color: var(--rb-charcoal);
}

.ribology-mini-cart.is-open {
	visibility: visible;
	pointer-events: auto;
}

.ribology-mini-cart__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 67, 121, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ribology-mini-cart.is-open .ribology-mini-cart__backdrop {
	opacity: 1;
}

.ribology-mini-cart__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100vw;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: -8px 0 32px rgba(23, 67, 121, 0.18);
}

.ribology-mini-cart.is-open .ribology-mini-cart__drawer {
	transform: translateX(0);
}

@media (max-width: 480px) {
	.ribology-mini-cart__drawer { width: 100vw; }
}

/* ---------- Header ---------- */
.ribology-mini-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--rb-hairline);
	flex-shrink: 0;
}

.ribology-mini-cart__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: -0.005em;
}

.ribology-mini-cart__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--rb-charcoal);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
}

.ribology-mini-cart__close:hover,
.ribology-mini-cart__close:focus-visible {
	background: var(--rb-lab-white);
	color: var(--rb-navy);
}

/* ---------- Body / items list ---------- */
.ribology-mini-cart__body {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}

.ribology-mini-cart__body-content {
	display: contents;
}

.ribology-mini-cart__items {
	list-style: none;
	margin: 0;
	padding: 8px 20px;
}

.ribology-mini-cart__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rb-hairline);
}

.ribology-mini-cart__item:last-child {
	border-bottom: none;
}

.ribology-mini-cart__item-thumb {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	background: var(--rb-lab-white);
	border-radius: 6px;
	border: 1px solid var(--rb-hairline);
	overflow: hidden;
}

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

.ribology-mini-cart__item-details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ribology-mini-cart__item-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--rb-navy);
	line-height: 1.3;
}

.ribology-mini-cart__item-variation {
	font-size: 12px;
	color: var(--rb-text-soft);
	line-height: 1.4;
}

.ribology-mini-cart__item-variation p,
.ribology-mini-cart__item-variation dl {
	margin: 0;
}

.ribology-mini-cart__item-variation dt,
.ribology-mini-cart__item-variation dd {
	display: inline;
	margin: 0;
	font-size: 12px;
}

.ribology-mini-cart__item-variation dt::after { content: ": "; }

.ribology-mini-cart__item-qty-price {
	font-size: 13px;
	color: var(--rb-charcoal);
	font-variant-numeric: tabular-nums;
}

.ribology-mini-cart__item-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--rb-text-soft);
	background: transparent;
	text-decoration: none;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.ribology-mini-cart__item-remove:hover,
.ribology-mini-cart__item-remove:focus-visible {
	background: rgba(220, 38, 38, 0.08);
	color: #b91c1c !important;
}

/* ---------- Subtotal ---------- */
.ribology-mini-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 14px 20px;
	border-top: 1px solid var(--rb-hairline);
	background: var(--rb-lab-white);
	margin: 0;
}

.ribology-mini-cart__subtotal-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rb-charcoal);
}

.ribology-mini-cart__subtotal-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-navy);
	font-variant-numeric: tabular-nums;
}

/* ---------- Empty state inside drawer ---------- */
.ribology-mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.ribology-mini-cart__empty-icon {
	color: var(--rb-navy);
	opacity: 0.45;
	margin-bottom: 16px;
}

.ribology-mini-cart__empty-msg {
	font-size: 15px;
	color: var(--rb-charcoal);
	margin: 0 0 20px;
}

.ribology-mini-cart__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	background: var(--rb-navy);
	color: #fff !important;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ribology-mini-cart__empty-cta:hover,
.ribology-mini-cart__empty-cta:focus-visible {
	background: var(--rb-navy-hover);
	color: #fff !important;
}

/* ---------- Footer with buttons ---------- */
.ribology-mini-cart__footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--rb-hairline);
	flex-shrink: 0;
	background: #fff;
}

.ribology-mini-cart__view-cart,
.ribology-mini-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.15s ease;
	letter-spacing: 0.005em;
}

.ribology-mini-cart__view-cart {
	background: #fff;
	color: var(--rb-navy) !important;
	border: 1px solid var(--rb-hairline-strong);
}

.ribology-mini-cart__view-cart:hover,
.ribology-mini-cart__view-cart:focus-visible {
	background: var(--rb-lab-white);
	border-color: var(--rb-navy);
	color: var(--rb-navy) !important;
}

.ribology-mini-cart__checkout {
	background: var(--rb-navy);
	color: #fff !important;
}

.ribology-mini-cart__checkout:hover,
.ribology-mini-cart__checkout:focus-visible {
	background: var(--rb-navy-hover);
	color: #fff !important;
}

/* Body scroll lock when drawer open */
body.ribology-mini-cart-open {
	overflow: hidden;
}

/* ============================================================
 * ADD TO CART LOADING STATE (when AJAX is in-flight)
 * ============================================================ */
.ribology-pdp__atc.is-loading {
	opacity: 0.7;
	cursor: wait;
}

.ribology-pdp__atc.is-loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ribology-spin 0.6s linear infinite;
	margin-left: 8px;
}

@keyframes ribology-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
 * TRADE NOTE WHEN MOVED ABOVE EMAIL FIELD ON CHECKOUT
 * ============================================================ */
.ribology-checkout-card[data-section="contact"] .ribology-checkout__trade-note {
	margin: 0 0 16px;
}

/* ============================================================
 * CART PAGE TWEAKS
 * ============================================================ */
.ribology-cart__actions {
	justify-content: flex-start;
}

.ribology-cart__continue {
	padding: 11px 22px;
}

/* Hide free-shipping fill at 100% (matches forest green) */
.ribology-cart__free-shipping[data-progress="100"] .ribology-cart__free-shipping-fill {
	background: var(--rb-forest);
}

/* ============================================================
 * CHECKOUT HEADER — return-to-cart button alignment
 * ============================================================ */
.ribology-checkout__back-to-cart {
	padding: 8px 16px;
	font-size: 13px;
}

.ribology-checkout__back-to-cart svg {
	margin-right: 0;
}


/* ============================================================
 * RIBOLOGY v3 — final polish
 * ------------------------------------------------------------
 * Bumped from 1.3.0 -> 1.3.1
 *
 * Covers:
 *  - Inline country selector on cart
 *  - Mini cart drawer trash icon + cleaner empty state
 *  - Centered Quantity column header
 *  - Narrower postcode + tighter checkout address spacing
 *  - Navy hover overrides for every button/link that was going dark
 *  - "Apply for trade account" as navy button on empty cart
 *  - Reinforced navy on cart qty stepper hover/active
 * ============================================================ */

/* ---------- Cart-side country selector ---------- */
.ribology-cart__country {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
	padding: 14px 18px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 8px;
	flex-wrap: wrap;
}

.ribology-cart__country-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rb-navy);
	margin: 0;
	letter-spacing: 0.01em;
	flex-shrink: 0;
}

.ribology-cart__country-label svg {
	color: var(--rb-navy);
}

.ribology-cart__country select {
	flex: 1;
	min-width: 200px;
	max-width: 320px;
	height: 40px;
	padding: 8px 32px 8px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--rb-charcoal);
	background: #fff;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke='%23174379' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border: 1px solid var(--rb-hairline-strong);
	border-radius: 6px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	box-sizing: border-box;
}

.ribology-cart__country select:focus {
	outline: none;
	border-color: var(--rb-sky);
	box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15);
}

@media (max-width: 540px) {
	.ribology-cart__country select { max-width: none; min-width: 0; width: 100%; }
}

/* ---------- Centered Quantity column header ---------- */
.ribology-cart-table thead .ribology-cart-table__col-qty {
	text-align: center !important;
}

/* ---------- Mini cart: empty state cleanup (no icon, centered button) ---------- */
.ribology-mini-cart__empty {
	padding: 60px 24px;
	gap: 18px;
}

.ribology-mini-cart__empty-msg {
	font-size: 15px;
	color: var(--rb-charcoal);
	margin: 0 0 8px;
}

/* Navy button styling for empty CTA — override the older inline-style block */
.ribology-mini-cart__empty-cta {
	padding: 12px 22px !important;
	font-size: 14px;
	gap: 6px;
}

/* ---------- Mini cart: trash icon hover (red, like cart page) ---------- */
.ribology-mini-cart__item-remove {
	color: var(--rb-text-soft) !important;
}

.ribology-mini-cart__item-remove:hover,
.ribology-mini-cart__item-remove:focus-visible {
	background: rgba(220, 38, 38, 0.08) !important;
	color: #b91c1c !important;
}

/* ---------- Header parcel icon spacing ---------- */
.ribology-header__cart svg {
	stroke-width: 1.75;
}

/* ---------- Reinforced navy hover on cart qty stepper (incl. active) ---------- */
.ribology-cart-qty-stepper__btn,
.ribology-cart-qty-stepper__btn:link,
.ribology-cart-qty-stepper__btn:visited {
	color: var(--rb-navy) !important;
	background: transparent !important;
}

.ribology-cart-qty-stepper__btn:hover,
.ribology-cart-qty-stepper__btn:focus-visible,
.ribology-cart-qty-stepper__btn:active {
	color: var(--rb-navy) !important;
	background: var(--rb-lab-white) !important;
	outline: none;
}

/* ---------- Checkout: condensed address fields ---------- */
.ribology-checkout .form-row {
	margin: 0 0 10px;
}

.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper {
	gap: 0 12px;
}

/* Narrower postcode — just enough for 4 chars + a bit of breathing room */
.ribology-checkout #billing_postcode_field,
.ribology-checkout #shipping_postcode_field {
	max-width: 200px;
}

.ribology-checkout #billing_postcode,
.ribology-checkout #shipping_postcode {
	max-width: 140px;
}

/* Tighter input height */
.ribology-checkout .form-row input.input-text,
.ribology-checkout .form-row select,
.ribology-checkout .select2-container--default .select2-selection--single {
	height: 40px !important;
}

.ribology-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px !important;
}

.ribology-checkout .form-row textarea {
	min-height: 76px;
}

/* ---------- Empty cart: trade account button (navy) ---------- */
.ribology-cart-empty__trade-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 22px;
	margin-top: 4px;
}

/* Drop the old inline-link styling now that we use the button */
.ribology-cart-empty__trade .ribology-btn--navy:hover,
.ribology-cart-empty__trade .ribology-btn--navy:focus-visible {
	color: #fff !important;
}

/* ---------- Edit button on checkout: ensure hover stays light ---------- */
.ribology-checkout-summary__edit:hover,
.ribology-checkout-summary__edit:focus-visible {
	color: #fff !important;
	background: var(--rb-navy-hover) !important;
}

/* ---------- "Browse the kit" button hovers (mini drawer + empty cart) ---------- */
.ribology-mini-cart__empty-cta:hover,
.ribology-mini-cart__empty-cta:focus-visible,
.ribology-cart-empty__cta:hover,
.ribology-cart-empty__cta:focus-visible {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
}

/* ---------- Single payment method: visibly hide the radio ---------- */
body.ribology-single-payment-method .payment_methods > li > input[type="radio"],
.ribology-checkout .payment_methods.ribology-single-method > li > input[type="radio"] {
	display: none !important;
}

/* When radio is hidden, label cursor is normal (not clickable) */
body.ribology-single-payment-method .payment_methods > li > label,
.ribology-checkout .payment_methods.ribology-single-method > li > label {
	cursor: default !important;
}

/* ---------- Mailing address heading on checkout: same styles, just renamed ---------- */
/* No CSS change needed — handled in form-checkout.php template */


/* ============================================================
 * RIBOLOGY v4 — purple-bleed kill + address grid + right-align
 * ------------------------------------------------------------
 * Bumped 1.3.1 -> 1.3.2
 *
 * Royal Elementor's button styles use high specificity. Every
 * navy button below repeats with :link / :visited / :hover /
 * :focus-visible / :active to win against the theme, with
 * !important as the final hammer.
 * ============================================================ */

/* ---------- Mini cart: X button (no purple background, white -> navy hover) ---------- */
.ribology-mini-cart .ribology-mini-cart__close,
.ribology-mini-cart .ribology-mini-cart__close:link,
.ribology-mini-cart .ribology-mini-cart__close:visited {
	background: #fff !important;
	background-color: #fff !important;
	color: var(--rb-charcoal) !important;
	border: 1px solid var(--rb-hairline) !important;
	box-shadow: none !important;
}

.ribology-mini-cart .ribology-mini-cart__close:hover,
.ribology-mini-cart .ribology-mini-cart__close:focus-visible,
.ribology-mini-cart .ribology-mini-cart__close:active {
	background: var(--rb-navy) !important;
	background-color: var(--rb-navy) !important;
	color: #fff !important;
	border-color: var(--rb-navy) !important;
	outline: none;
}

/* ---------- Mini cart: empty-state "Browse the kit" navy button ---------- */
.ribology-mini-cart .ribology-mini-cart__empty-cta,
.ribology-mini-cart .ribology-mini-cart__empty-cta:link,
.ribology-mini-cart .ribology-mini-cart__empty-cta:visited {
	background: var(--rb-navy) !important;
	background-color: var(--rb-navy) !important;
	color: #fff !important;
	border-color: var(--rb-navy) !important;
}

.ribology-mini-cart .ribology-mini-cart__empty-cta:hover,
.ribology-mini-cart .ribology-mini-cart__empty-cta:focus-visible,
.ribology-mini-cart .ribology-mini-cart__empty-cta:active {
	background: var(--rb-navy-hover) !important;
	background-color: var(--rb-navy-hover) !important;
	color: #fff !important;
	border-color: var(--rb-navy-hover) !important;
}

/* ---------- Cart: actions row — Continue shopping pushed RIGHT ---------- */
.ribology-cart__actions {
	display: flex;
	justify-content: flex-end !important;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
}

/* ---------- Cart: Proceed to checkout button (text stays white on hover) ---------- */
.ribology-cart .ribology-cart__checkout-btn,
.ribology-cart .ribology-cart__checkout-btn:link,
.ribology-cart .ribology-cart__checkout-btn:visited {
	background: var(--rb-navy) !important;
	color: #fff !important;
	border-color: var(--rb-navy) !important;
}

.ribology-cart .ribology-cart__checkout-btn:hover,
.ribology-cart .ribology-cart__checkout-btn:focus-visible,
.ribology-cart .ribology-cart__checkout-btn:active {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
	border-color: var(--rb-navy-hover) !important;
}

.ribology-cart .ribology-cart__checkout-btn span,
.ribology-cart .ribology-cart__checkout-btn svg {
	color: #fff !important;
}

/* ---------- Cart: Continue shopping button (also navy variant) ---------- */
.ribology-cart .ribology-cart__continue,
.ribology-cart .ribology-cart__continue:link,
.ribology-cart .ribology-cart__continue:visited {
	background: var(--rb-navy) !important;
	color: #fff !important;
	border-color: var(--rb-navy) !important;
}

.ribology-cart .ribology-cart__continue:hover,
.ribology-cart .ribology-cart__continue:focus-visible,
.ribology-cart .ribology-cart__continue:active {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
	border-color: var(--rb-navy-hover) !important;
}

/* ---------- Checkout: Edit + Return-to-cart buttons stay navy/white on hover ---------- */
.ribology-checkout .ribology-checkout-summary__edit,
.ribology-checkout .ribology-checkout-summary__edit:link,
.ribology-checkout .ribology-checkout-summary__edit:visited,
.ribology-checkout .ribology-checkout__back-to-cart,
.ribology-checkout .ribology-checkout__back-to-cart:link,
.ribology-checkout .ribology-checkout__back-to-cart:visited {
	background: var(--rb-navy) !important;
	color: #fff !important;
	border-color: var(--rb-navy) !important;
}

.ribology-checkout .ribology-checkout-summary__edit:hover,
.ribology-checkout .ribology-checkout-summary__edit:focus-visible,
.ribology-checkout .ribology-checkout-summary__edit:active,
.ribology-checkout .ribology-checkout__back-to-cart:hover,
.ribology-checkout .ribology-checkout__back-to-cart:focus-visible,
.ribology-checkout .ribology-checkout__back-to-cart:active {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
	border-color: var(--rb-navy-hover) !important;
}

/* ---------- Empty cart: Browse RNA Extraction Kit + Trade account buttons ---------- */
.ribology-cart-empty .ribology-cart-empty__cta,
.ribology-cart-empty .ribology-cart-empty__cta:link,
.ribology-cart-empty .ribology-cart-empty__cta:visited,
.ribology-cart-empty .ribology-cart-empty__trade-btn,
.ribology-cart-empty .ribology-cart-empty__trade-btn:link,
.ribology-cart-empty .ribology-cart-empty__trade-btn:visited {
	background: var(--rb-navy) !important;
	color: #fff !important;
	border-color: var(--rb-navy) !important;
}

.ribology-cart-empty .ribology-cart-empty__cta:hover,
.ribology-cart-empty .ribology-cart-empty__cta:focus-visible,
.ribology-cart-empty .ribology-cart-empty__cta:active,
.ribology-cart-empty .ribology-cart-empty__trade-btn:hover,
.ribology-cart-empty .ribology-cart-empty__trade-btn:focus-visible,
.ribology-cart-empty .ribology-cart-empty__trade-btn:active {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
	border-color: var(--rb-navy-hover) !important;
}

/* ---------- Checkout: address fields — 12-column grid, ID-based targeting ---------- *
 * IDs are stable because Woo's wc-country-select.js re-applies form-row-first/last
 * classes at runtime based on country locale, blowing away anything our PHP filter set.
 * Targeting by element ID sidesteps the class war entirely.
 */
.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
.ribology-checkout .woocommerce-address-fields__field-wrapper {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	gap: 10px 12px !important;
}

/* Default span — any field we don't explicitly cover spans full width */
.ribology-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.ribology-checkout .woocommerce-address-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	margin: 0;
}

/* First name + Last name on one row — 6 each */
.ribology-checkout #billing_first_name_field,
.ribology-checkout #shipping_first_name_field {
	grid-column: 1 / span 6 !important;
}

.ribology-checkout #billing_last_name_field,
.ribology-checkout #shipping_last_name_field {
	grid-column: 7 / span 6 !important;
}

/* Street address + Apartment — full width each */
.ribology-checkout #billing_address_1_field,
.ribology-checkout #shipping_address_1_field,
.ribology-checkout #billing_address_2_field,
.ribology-checkout #shipping_address_2_field {
	grid-column: 1 / -1 !important;
}

/* Locale row: Suburb (4) | State (2) | Postcode (2) | Country (4) */
.ribology-checkout #billing_city_field,
.ribology-checkout #shipping_city_field {
	grid-column: 1 / span 4 !important;
}

.ribology-checkout #billing_state_field,
.ribology-checkout #shipping_state_field {
	grid-column: 5 / span 2 !important;
}

.ribology-checkout #billing_postcode_field,
.ribology-checkout #shipping_postcode_field {
	grid-column: 7 / span 2 !important;
}

.ribology-checkout #billing_country_field,
.ribology-checkout #shipping_country_field {
	grid-column: 9 / span 4 !important;
}

/* Postcode input itself is narrow — ~4 chars worth */
.ribology-checkout #billing_postcode,
.ribology-checkout #shipping_postcode {
	max-width: 100px;
}

/* Mobile: drop to 2 columns */
@media (max-width: 720px) {
	.ribology-checkout .woocommerce-billing-fields__field-wrapper,
	.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
	.ribology-checkout .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr 1fr !important;
	}

	.ribology-checkout #billing_first_name_field,
	.ribology-checkout #shipping_first_name_field {
		grid-column: 1 / span 1 !important;
	}

	.ribology-checkout #billing_last_name_field,
	.ribology-checkout #shipping_last_name_field {
		grid-column: 2 / span 1 !important;
	}

	.ribology-checkout #billing_city_field,
	.ribology-checkout #shipping_city_field {
		grid-column: 1 / span 1 !important;
	}

	.ribology-checkout #billing_state_field,
	.ribology-checkout #shipping_state_field {
		grid-column: 2 / span 1 !important;
	}

	.ribology-checkout #billing_postcode_field,
	.ribology-checkout #shipping_postcode_field {
		grid-column: 1 / span 1 !important;
	}

	.ribology-checkout #billing_country_field,
	.ribology-checkout #shipping_country_field {
		grid-column: 2 / span 1 !important;
	}
}

/* ---------- Checkout: compact field sizing ---------- */
.ribology-checkout .form-row input.input-text,
.ribology-checkout .form-row select,
.ribology-checkout .select2-container--default .select2-selection--single {
	height: 38px !important;
	font-size: 14px;
}

.ribology-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px !important;
}

.ribology-checkout .form-row label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}


/* ============================================================
 * RIBOLOGY v5 — polish pass
 * ------------------------------------------------------------
 * Bumped 1.3.2 -> 1.3.3
 *
 *  - Kill Woo's auto-injected "View cart" link after add-to-cart
 *  - Capitalise "Proceed to Checkout" + "Place Order"
 *  - Address fields: switch to grid-template-areas (deterministic
 *    layout that doesn't depend on DOM order or grid auto-flow)
 *  - Privacy / Terms link colour overrides
 *  - Notices on checkout dimmed/hidden
 * ============================================================ */

/* ---------- Kill the auto-injected "View cart" link after Add to Cart ----------
 *
 * Woo's wc-add-to-cart.js listens for the `added_to_cart` event and appends
 * an <a class="added_to_cart wc-forward">View cart</a> next to whatever button
 * triggered the event. Designed for archive pages where shoppers need a way
 * to get to cart after adding from a product card. Useless on our PDP because
 * the drawer opens, and confusing because it persists indefinitely.
 */
a.added_to_cart,
.added_to_cart {
	display: none !important;
}

/* ---------- Button casing: PROCEED TO CHECKOUT, PLACE ORDER ---------- */
.ribology-cart .ribology-cart__checkout-btn,
.ribology-cart .ribology-cart__checkout-btn span,
.ribology-checkout #place_order,
.ribology-checkout button[name="woocommerce_checkout_place_order"],
.ribology-cart__mobile-bar-btn {
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* ---------- Address fields: GRID TEMPLATE AREAS (overrides v4 grid rules) ----------
 *
 * The 12-column explicit-grid approach in v4 didn't survive contact with reality
 * because Woo's wc-country-select.js can shuffle DOM and the "Country / Region"
 * label wraps to 2 lines, breaking row alignment.
 *
 * grid-template-areas gives us a fully declarative layout:
 *
 *   FN FN FN FN FN FN  LN LN LN LN LN LN
 *   A1 A1 A1 A1 A1 A1  A1 A1 A1 A1 A1 A1
 *   A2 A2 A2 A2 A2 A2  A2 A2 A2 A2 A2 A2
 *   CI CI CI CI ST ST  PC PC CO CO CO CO
 *
 * Each field is named-area placed. DOM order doesn't matter. Grid auto-flow
 * doesn't matter. Labels can wrap and the layout still holds.
 */
.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
.ribology-checkout .woocommerce-address-fields__field-wrapper {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	grid-template-areas:
		"fn fn fn fn fn fn ln ln ln ln ln ln"
		"a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1"
		"a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2"
		"ci ci ci ci st st pc pc co co co co" !important;
	gap: 12px 12px !important;
}

/* Default: anything we haven't placed spans the full row */
.ribology-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.ribology-checkout .woocommerce-address-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	grid-area: unset;
	margin: 0 !important;
}

.ribology-checkout #billing_first_name_field,
.ribology-checkout #shipping_first_name_field { grid-area: fn !important; }

.ribology-checkout #billing_last_name_field,
.ribology-checkout #shipping_last_name_field { grid-area: ln !important; }

.ribology-checkout #billing_address_1_field,
.ribology-checkout #shipping_address_1_field { grid-area: a1 !important; }

.ribology-checkout #billing_address_2_field,
.ribology-checkout #shipping_address_2_field { grid-area: a2 !important; }

.ribology-checkout #billing_city_field,
.ribology-checkout #shipping_city_field { grid-area: ci !important; }

.ribology-checkout #billing_state_field,
.ribology-checkout #shipping_state_field { grid-area: st !important; }

.ribology-checkout #billing_postcode_field,
.ribology-checkout #shipping_postcode_field { grid-area: pc !important; }

.ribology-checkout #billing_country_field,
.ribology-checkout #shipping_country_field { grid-area: co !important; }

/* Labels in narrow cells: keep them on one line */
.ribology-checkout #billing_city_field label,
.ribology-checkout #billing_state_field label,
.ribology-checkout #billing_postcode_field label,
.ribology-checkout #billing_country_field label,
.ribology-checkout #shipping_city_field label,
.ribology-checkout #shipping_state_field label,
.ribology-checkout #shipping_postcode_field label,
.ribology-checkout #shipping_country_field label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Postcode input width — 4 digits + breathing room */
.ribology-checkout #billing_postcode,
.ribology-checkout #shipping_postcode {
	max-width: 90px !important;
}

/* Mobile: collapse to 2 column areas */
@media (max-width: 720px) {
	.ribology-checkout .woocommerce-billing-fields__field-wrapper,
	.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
	.ribology-checkout .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr 1fr !important;
		grid-template-areas:
			"fn ln"
			"a1 a1"
			"a2 a2"
			"ci ci"
			"st co"
			"pc ." !important;
	}
}

/* ---------- Checkout: link colours (privacy policy, terms and conditions) ----------
 * Theme's default a:link color is bleeding through purple. Force sky/navy.
 */
.ribology-checkout a,
.ribology-checkout a:link,
.ribology-checkout a:visited,
.ribology-checkout-summary a,
.ribology-checkout-summary a:link,
.ribology-checkout-summary a:visited,
.ribology-checkout #payment a,
.ribology-checkout #payment a:link,
.ribology-checkout #payment a:visited,
.ribology-checkout .woocommerce-privacy-policy-text a,
.ribology-checkout .woocommerce-terms-and-conditions-wrapper a {
	color: var(--rb-sky) !important;
	text-decoration: underline;
}

.ribology-checkout a:hover,
.ribology-checkout a:focus-visible,
.ribology-checkout-summary a:hover,
.ribology-checkout-summary a:focus-visible,
.ribology-checkout #payment a:hover,
.ribology-checkout #payment a:focus-visible {
	color: var(--rb-navy) !important;
	text-decoration: underline;
}

/* Buttons inside the checkout aren't anchors — keep them out of this rule.
 * The general .ribology-btn--navy buttons have their own colour rules from v4. */
.ribology-checkout a.ribology-btn,
.ribology-checkout a.ribology-btn--navy,
.ribology-checkout-summary a.ribology-btn,
.ribology-checkout-summary a.ribology-btn--navy,
.ribology-checkout a.ribology-checkout-summary__edit,
.ribology-checkout a.ribology-checkout__back-to-cart {
	color: #fff !important;
	text-decoration: none !important;
}

/* ---------- Notices on checkout: hide the residual "Cart updated" / "Shipping costs updated" ----------
 *
 * Belt-and-suspenders alongside the PHP wc_clear_notices() call. If anything slips
 * through (third-party plugin notices etc), CSS catches them.
 */
.ribology-checkout .woocommerce-message,
.ribology-checkout .woocommerce-info,
.ribology-checkout .woocommerce-notices-wrapper:empty {
	display: none !important;
}

/* But keep errors visible */
.ribology-checkout .woocommerce-error {
	display: block !important;
}


/* ============================================================
 * RIBOLOGY v6 — small polish
 * ------------------------------------------------------------
 * Bumped 1.3.3 -> 1.3.4
 *
 *  - Address grid rebalanced — Country gets more room, no "Australi..." clipping
 *  - First/Last name inputs fill their grid cells
 *  - Error notice anchor links no longer purple
 *  - "Change address" hidden via CSS as backup to the PHP filter
 *  - Select2 dropdowns fill their grid cells
 * ============================================================ */

/* ---------- Address grid: rebalance for wider country ----------
 * Was: ci(4) st(2) pc(2) co(4)
 * Now: ci(3) st(2) pc(2) co(5)
 * Country gets 5 of 12 columns — enough for "Australia" without ellipsis.
 */
.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
.ribology-checkout .woocommerce-address-fields__field-wrapper {
	grid-template-areas:
		"fn fn fn fn fn fn ln ln ln ln ln ln"
		"a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1"
		"a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2"
		"ci ci ci st st pc pc co co co co co" !important;
}

/* ---------- First/last name + all text inputs: fill grid cell ----------
 * Inputs were not stretching to 100% of their grid cell — they looked
 * unnecessarily narrow on a wide layout.
 */
.ribology-checkout .form-row input.input-text,
.ribology-checkout .form-row select,
.ribology-checkout .woocommerce-billing-fields__field-wrapper input,
.ribology-checkout .woocommerce-billing-fields__field-wrapper select,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper input,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper select,
.ribology-checkout .select2-container,
.ribology-checkout .select2-container--default {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}

/* Postcode is the one exception — keep its input narrow */
.ribology-checkout #billing_postcode,
.ribology-checkout #shipping_postcode {
	max-width: 90px !important;
}

/* Country dropdown text: ellipsis if it still overflows */
.ribology-checkout .select2-selection__rendered,
.ribology-checkout #billing_country,
.ribology-checkout #shipping_country {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* ---------- Error notice links: kill the purple ----------
 * Notices render OUTSIDE the .ribology-checkout wrapper (they're typically
 * hooked to woocommerce_before_checkout_form which runs before our markup),
 * so the v5 scoped link rule doesn't catch them. These selectors hit the
 * notice elements regardless of where they sit on the page.
 */
.woocommerce-NoticeGroup a,
.woocommerce-NoticeGroup a:link,
.woocommerce-NoticeGroup a:visited,
.woocommerce-NoticeGroup-checkout a,
.woocommerce-NoticeGroup-checkout a:link,
.woocommerce-NoticeGroup-checkout a:visited,
ul.woocommerce-error li a,
ul.woocommerce-error li a:link,
ul.woocommerce-error li a:visited,
.woocommerce-error a,
.woocommerce-error a:link,
.woocommerce-error a:visited {
	color: var(--rb-sky) !important;
	text-decoration: underline;
}

.woocommerce-NoticeGroup a:hover,
.woocommerce-NoticeGroup-checkout a:hover,
ul.woocommerce-error li a:hover,
.woocommerce-error a:hover {
	color: var(--rb-navy) !important;
}

/* ---------- "Change address" link: hide via CSS as belt-and-suspenders ----------
 * The PHP filter woocommerce_shipping_calculator_enable_link should kill this,
 * and the custom cart-shipping.php template doesn't render it at all — but
 * if some plugin or template path adds it back, this CSS catches it.
 */
.shipping-calculator-button,
a.shipping-calculator-button,
.woocommerce-shipping-calculator {
	display: none !important;
}


/* ============================================================
 * RIBOLOGY v7 — overflow fix, address reorder, thank-you page
 * ------------------------------------------------------------
 * Bumped 1.3.4 -> 1.3.5
 *
 *  - Kill horizontal scroll on checkout (grid track overflow)
 *  - Apartment field above street (grid rows swapped)
 *  - First/Last name inputs fill their cells properly
 *  - Branded thank-you / order-received page
 * ============================================================ */

/* ---------- Horizontal scroll fix ----------
 * The repeat(12, 1fr) grid let tracks grow to content min-width (select2 etc.),
 * pushing total width past the container. minmax(0, 1fr) lets tracks shrink
 * below content size, and min-width:0 on children lets them shrink too.
 */
.ribology-checkout {
	overflow-x: hidden;
}

.ribology-checkout__layout {
	max-width: 100%;
	min-width: 0;
}

.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
.ribology-checkout .woocommerce-address-fields__field-wrapper {
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	max-width: 100%;
}

.ribology-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
.ribology-checkout .woocommerce-address-fields__field-wrapper > .form-row {
	min-width: 0;
}

/* select2 dropdowns must be allowed to shrink */
.ribology-checkout .select2-container {
	max-width: 100% !important;
	min-width: 0 !important;
}

/* ---------- Address reorder: apartment ABOVE street ----------
 * Was:                          Now:
 *   a1 (street)                   a2 (apartment / unit)
 *   a2 (apartment)                a1 (street)
 */
.ribology-checkout .woocommerce-billing-fields__field-wrapper,
.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
.ribology-checkout .woocommerce-address-fields__field-wrapper {
	grid-template-areas:
		"fn fn fn fn fn fn ln ln ln ln ln ln"
		"a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2"
		"a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1 a1"
		"ci ci ci st st pc pc co co co co co" !important;
}

@media (max-width: 720px) {
	.ribology-checkout .woocommerce-billing-fields__field-wrapper,
	.ribology-checkout .woocommerce-shipping-fields__field-wrapper,
	.ribology-checkout .woocommerce-address-fields__field-wrapper {
		grid-template-areas:
			"fn ln"
			"a2 a2"
			"a1 a1"
			"ci ci"
			"st co"
			"pc ." !important;
	}
}

/* ---------- First/Last name (and all inputs) fill their grid cells ----------
 * The woocommerce-input-wrapper span was constraining input width.
 */
.ribology-checkout .woocommerce-input-wrapper {
	width: 100% !important;
	display: block !important;
}

.ribology-checkout #billing_first_name,
.ribology-checkout #billing_last_name,
.ribology-checkout #shipping_first_name,
.ribology-checkout #shipping_last_name,
.ribology-checkout .form-row input.input-text {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box;
}

/* Postcode stays compact even though its cell is wider */
.ribology-checkout #billing_postcode,
.ribology-checkout #shipping_postcode {
	max-width: 90px !important;
}

/* ============================================================
 * THANK YOU / ORDER RECEIVED PAGE
 * ============================================================ */

.ribology-thankyou {
	max-width: 760px;
	margin: 48px auto 80px;
	padding: 0 24px;
	color: var(--rb-charcoal);
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.ribology-thankyou__hero {
	text-align: center;
	padding: 8px 0 32px;
}

.ribology-thankyou__icon {
	color: var(--rb-forest);
	margin-bottom: 20px;
}

.ribology-thankyou__icon--failed {
	color: #b91c1c;
}

.ribology-thankyou__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

.ribology-thankyou__lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--rb-text-soft);
	margin: 0 auto;
	max-width: 520px;
}

/* Overview strip */
.ribology-thankyou__overview {
	list-style: none;
	margin: 0 0 32px;
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	background: var(--rb-lab-white);
	border: 1px solid var(--rb-hairline);
	border-radius: 12px;
}

.ribology-thankyou__overview-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ribology-thankyou__overview-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rb-text-soft);
}

.ribology-thankyou__overview-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-navy);
}

.ribology-thankyou__note {
	margin: 0 0 32px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--rb-hairline);
	border-left: 3px solid var(--rb-sky);
	border-radius: 8px;
}

.ribology-thankyou__note-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rb-text-soft);
}

.ribology-thankyou__note p {
	margin: 6px 0 0;
	color: var(--rb-charcoal);
}

/* Order details table (rendered by Woo's woocommerce_thankyou hook) */
.ribology-thankyou__details {
	margin: 0 0 32px;
}

.ribology-thankyou__details .woocommerce-order-details__title,
.ribology-thankyou__details .woocommerce-column__title,
.ribology-thankyou__details h2 {
	font-size: 18px;
	font-weight: 700;
	color: var(--rb-navy);
	margin: 32px 0 16px;
}

.ribology-thankyou__details table.woocommerce-table--order-details,
.ribology-thankyou__details table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--rb-hairline);
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 24px;
}

.ribology-thankyou__details table.woocommerce-table th,
.ribology-thankyou__details table.woocommerce-table td {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--rb-hairline);
	font-size: 14px;
}

.ribology-thankyou__details table.woocommerce-table thead th,
.ribology-thankyou__details table.woocommerce-table tfoot th {
	background: var(--rb-lab-white);
	font-weight: 700;
	color: var(--rb-navy);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.05em;
}

.ribology-thankyou__details tfoot tr:last-child th,
.ribology-thankyou__details tfoot tr:last-child td {
	font-size: 16px;
	color: var(--rb-navy);
}

/* Customer / address columns */
.ribology-thankyou__details .woocommerce-customer-details address {
	padding: 16px 18px;
	border: 1px solid var(--rb-hairline);
	border-radius: 10px;
	font-style: normal;
	line-height: 1.7;
	font-size: 14px;
}

/* Links — sky, never purple */
.ribology-thankyou a:link,
.ribology-thankyou a:visited {
	color: var(--rb-sky);
	text-decoration: underline;
}

.ribology-thankyou a:hover,
.ribology-thankyou a:focus-visible {
	color: var(--rb-navy);
}

/* Footer with Home button */
.ribology-thankyou__footer {
	text-align: center;
	padding-top: 16px;
	border-top: 1px solid var(--rb-hairline);
}

.ribology-thankyou__home-btn,
.ribology-thankyou__home-btn:link,
.ribology-thankyou__home-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 28px;
	background: var(--rb-navy) !important;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 8px;
	font-weight: 600;
}

.ribology-thankyou__home-btn:hover,
.ribology-thankyou__home-btn:focus-visible {
	background: var(--rb-navy-hover) !important;
	color: #fff !important;
}

.ribology-thankyou__support {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--rb-text-soft);
}

.ribology-thankyou__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
}

.ribology-thankyou__home-link {
	font-size: 14px;
	color: var(--rb-sky);
}


/* ============================================================
 * RIBOLOGY v8 — page-level overflow fix
 * ------------------------------------------------------------
 * Bumped 1.3.5 -> 1.3.6
 *
 * v7's overflow-x:hidden on .ribology-checkout only clipped that
 * element's own overflow. The scroll is happening at the page/body
 * level — likely the Eway payment iframe carrying a fixed min-width
 * wider than the 380px sidebar. Clamp at body level + constrain the
 * payment widgets directly.
 * ============================================================ */

body.woocommerce-checkout,
body.woocommerce-cart {
	overflow-x: hidden;
}

/* Payment area (Eway iframe / fields) must not exceed its column */
.ribology-checkout #payment,
.ribology-checkout .woocommerce-checkout-payment,
.ribology-checkout .payment_methods,
.ribology-checkout .payment_box,
.ribology-checkout .wc-payment-form,
.ribology-checkout #payment iframe,
.ribology-checkout #payment input,
.ribology-checkout .ribology-checkout-summary {
	max-width: 100% !important;
	box-sizing: border-box;
}

.ribology-checkout #payment iframe {
	width: 100% !important;
}

/* Order review table shouldn't force width via long unbroken strings */
.ribology-checkout .ribology-checkout-summary,
.ribology-checkout .ribology-checkout-summary * {
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}


/* ============================================================
 * RIBOLOGY v9 — simple-product PDP support
 * ------------------------------------------------------------
 * Bumped 1.3.6 -> 1.3.7
 *
 * Adds styling for the simple-product add-to-cart (the standalone
 * form rendered by simple.php, no variation cards above it) so it
 * sits cleanly in the .ribology-pdp__commercial column matching
 * the variable product's button.
 *
 * The accordion + tabs in the simple branch already inherit all
 * styling from .ribology-pdp__details--a and --d (same classes),
 * so no extra layout work needed there.
 * ============================================================ */

/* Simple-product form: no border or background, button sits flush */
.ribology-pdp__simple-form {
	margin: 24px 0 28px;
}

.ribology-pdp__simple-form .ribology-pdp__atc-row {
	display: flex;
	align-items: stretch;
	gap: 14px;
	flex-wrap: wrap;
}

/* Quantity stepper matches variable.php's */
.ribology-pdp__simple-form .quantity {
	display: flex;
	align-items: center;
}

.ribology-pdp__simple-form .quantity .qty {
	width: 80px;
	height: 52px;
	padding: 0 12px;
	border: 1px solid var(--rb-hairline-strong, #cfd6dd);
	border-radius: 8px;
	font-family: var(--rb-mono, 'Poppins'), sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--rb-charcoal, #3D3D3D);
	background: #fff;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ribology-pdp__simple-form .quantity .qty::-webkit-outer-spin-button,
.ribology-pdp__simple-form .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ribology-pdp__simple-form .quantity .qty:focus {
	outline: none;
	border-color: var(--rb-navy, #174379);
	box-shadow: 0 0 0 3px rgba(23, 67, 121, 0.12);
}

/* Button — reuse the .ribology-pdp__atc styling already in v1 */
.ribology-pdp__simple-form .ribology-pdp__atc {
	flex: 1 1 auto;
	min-width: 200px;
}

@media (max-width: 480px) {
	.ribology-pdp__simple-form .ribology-pdp__atc-row {
		gap: 10px;
	}
	.ribology-pdp__simple-form .quantity .qty {
		width: 72px;
	}
	.ribology-pdp__simple-form .ribology-pdp__atc {
		flex: 1 1 100%;
	}
}
/* =============================================================
   RIBOLOGY v13 — HOMEPAGE (front-page.php)
   Landing-page type system + full-bleed sections + glass panels.
   Namespace .ribology-home__*  ·  tokens --ribology-*
   ============================================================= */

/* ------------------------------------------------------------
   SCOPED TYPE SYSTEM  (Manrope body, Plus Jakarta Sans heads)
   Scoped to .ribology-home only — header/footer keep Poppins.
   ------------------------------------------------------------ */
.ribology-home {
    --rh-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --rh-body: 'Manrope', system-ui, sans-serif;
    font-family: var(--rh-body);
    color: var(--ribology-charcoal);
    overflow-x: clip;
}
.ribology-home h1,
.ribology-home h2,
.ribology-home h3,
.ribology-home h4 {
    font-family: var(--rh-head);
    letter-spacing: -0.025em;
}

/* ------------------------------------------------------------
   SECTION + CONTAINER SCAFFOLDING
   ------------------------------------------------------------ */
.ribology-home__section { padding: 80px 0; position: relative; }
.ribology-home__section--lab { background: var(--ribology-lab-white); }
.ribology-home__section--navy {
    background:
        radial-gradient(720px 360px at 12% 18%, rgba(25,179,215,0.22), transparent 60%),
        linear-gradient(135deg, #0F2F5C 0%, var(--ribology-deep-navy) 60%, #1d5191 100%);
    color: var(--ribology-white);
}
.ribology-home__inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* ------------------------------------------------------------
   FULL-BLEED BACKGROUND SYSTEM
   ------------------------------------------------------------ */
.ribology-home__hero,
.ribology-home__has-bg { position: relative; overflow: hidden; }

.ribology-home__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ribology-home__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ribology-home__bg--faded { opacity: 0.10; }
.ribology-home__bg--right .ribology-home__bg-img { object-position: center right; }

.ribology-home__bg-scrim--white-left {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--ribology-lab-white) 0%,
        var(--ribology-lab-white) 35%,
        rgba(247,249,250,0.90) 48%,
        rgba(247,249,250,0.30) 65%,
        rgba(247,249,250,0) 80%
    );
}
.ribology-home__bg-scrim--dark-left {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(6,24,43,0.95) 0%,
        rgba(6,24,43,0.82) 30%,
        rgba(6,24,43,0.45) 55%,
        rgba(6,24,43,0.12) 78%,
        rgba(6,24,43,0) 100%
    );
}

/* ------------------------------------------------------------
   SHARED TYPOGRAPHY
   ------------------------------------------------------------ */
.ribology-home__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ribology-sky-blue-dk);
    margin-bottom: 12px;
}
.ribology-home__h2 {
    position: relative;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ribology-deep-navy);
    margin: 0 0 12px;
    padding-bottom: 14px;
}
.ribology-home__h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ribology-sky-blue), var(--ribology-deep-navy));
}
.ribology-home__h2--invert { color: var(--ribology-white); }
.ribology-home__h2--invert::after { background: linear-gradient(90deg, var(--ribology-sky-blue), #ffffff); }
.ribology-home__lead {
    font-size: 1.02rem;
    line-height: 1.62;
    color: var(--ribology-charcoal-lt);
    max-width: 620px;
    margin: 0;
}
.ribology-home__lead--invert { color: rgba(255,255,255,0.87); max-width: 640px; }
.ribology-home__head { max-width: 740px; }

/* Inline head row (heading + CTA side by side) */
.ribology-home__head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}
.ribology-home__head-row .ribology-home__head { flex: 1 1 420px; margin-bottom: 0; }
.ribology-home__head-cta-btn { flex-shrink: 0; align-self: flex-end; }

/* ------------------------------------------------------------
   CTA ROWS + TEXT LINKS
   ------------------------------------------------------------ */
.ribology-home__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}
.ribology-home__cta-row--center { justify-content: center; }

/* ------------------------------------------------------------
   SCROLL REVEAL  (translate-based — composes with hover)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .ribology-home.js-anim [data-animate] { opacity: 0; translate: 0 20px; }
    .ribology-home.js-anim [data-animate].is-visible {
        opacity: 1;
        translate: 0 0;
        transition: opacity 0.55s var(--ribology-ease), translate 0.55s var(--ribology-ease);
    }
    /* Containers that reveal children, not themselves */
    .ribology-home.js-anim .ribology-home__timeline[data-animate] { opacity: 1; translate: 0 0; }
}

/* =============================================================
   1 · HERO — full-bleed, glass copy panel, white fade at base
   ============================================================= */
.ribology-home__hero {
    min-height: clamp(520px, 62vw, 780px);
    display: flex;
    align-items: center;
    padding: 96px 0 120px;
    background: linear-gradient(135deg, #06182b 0%, var(--ribology-deep-navy) 55%, #1b598f 100%);
    color: var(--ribology-white);
}
.ribology-home__hero-bg { z-index: 0; }
.ribology-home__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(6,24,43,0.92) 0%,
        rgba(6,24,43,0.78) 22%,
        rgba(6,24,43,0.42) 46%,
        rgba(6,24,43,0.14) 68%,
        rgba(6,24,43,0.04) 100%
    );
}
.ribology-home__hero-inner { width: 100%; }
.ribology-home__hero-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 130px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(247,249,250,0) 0%, var(--ribology-lab-white) 100%);
}

/* Glass copy panel */
.ribology-home__hero-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 660px;
    padding: clamp(22px,3vw,38px);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(10,29,50,0.74), rgba(10,29,50,0.56));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 18px 50px rgba(4,12,24,0.36), inset 0 1px 0 rgba(255,255,255,0.10);
}
.ribology-home__hero-badge {
    display: inline-block;
    padding: 0.33rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    color: #e7f9ff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ribology-home__hero-title {
    font-size: clamp(2rem, 4.8vw, 3.15rem);
    font-weight: 800;
    line-height: 1.06;
    color: #fff;
    margin: 0;
    text-shadow: 0 4px 24px rgba(5,14,26,0.62);
}
.ribology-home__hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    margin: 0;
    text-shadow: 0 2px 14px rgba(5,14,26,0.5);
}
/* Hero button recolours */
.ribology-home__hero .ribology-btn--primary {
    background: var(--ribology-sky-blue);
    border-color: var(--ribology-sky-blue);
    color: #fff;
}
.ribology-home__hero .ribology-btn--primary:hover {
    background: var(--ribology-sky-blue-dk);
    border-color: var(--ribology-sky-blue-dk);
    color: #fff;
}
.ribology-home__hero .ribology-btn--secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.55);
    color: #fff;
}
.ribology-home__hero .ribology-btn--secondary:hover {
    background: var(--ribology-white);
    border-color: var(--ribology-white);
    color: var(--ribology-deep-navy);
}

/* Hero load animations */
@media (prefers-reduced-motion: no-preference) {
    .ribology-home__hero-title { animation: rhFadeUp 0.6s var(--ribology-ease) both; }
    .ribology-home__hero-badge { animation: rhFadeUp 0.5s var(--ribology-ease) both; }
    .ribology-home__hero-sub  { animation: rhFadeUp 0.6s var(--ribology-ease) 0.08s both; }
    .ribology-home__hero .ribology-home__cta-row { animation: rhFadeUp 0.6s var(--ribology-ease) 0.16s both; }
}
@keyframes rhFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =============================================================
   2 · TRUST STRIP — static navy, hover lift + outline
   ============================================================= */
.ribology-home__strip {
    background: linear-gradient(120deg, #0f2f5c 0%, var(--ribology-deep-navy) 50%, #1b598f 100%);
    padding: 24px 0;
}
.ribology-home__strip-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ribology-home__strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding: 14px 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: default;
    transition: transform 0.22s var(--ribology-ease), border-color 0.22s, background 0.22s;
}
.ribology-home__strip-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.07);
}
.ribology-home__strip-icon { color: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; }
.ribology-home__strip-icon svg { width: 24px; height: 24px; }
.ribology-home__strip-name {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    line-height: 1.3;
}

/* =============================================================
   3 · WHY LABS SWITCH — challenge vs solution (landing page)
   ============================================================= */
.ribology-home__switch { background: var(--ribology-lab-white); }

/* column header labels */
.ribology-home__ps-labels {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    gap: 16px;
    margin-bottom: 12px;
    align-items: center;
}
.ribology-home__ps-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ribology-home__ps-label--problem { color: #a05050; }
.ribology-home__ps-label--solution { color: var(--ribology-deep-navy); justify-content: flex-end; }
.ribology-home__ps-mark {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.ribology-home__ps-mark--cross { color: #c0504d; background: rgba(186,26,26,0.10); border: 1.5px solid rgba(186,26,26,0.22); }
.ribology-home__ps-mark--tick { color: #1a8c45; background: rgba(15,112,57,0.13); border: 1.5px solid rgba(15,112,57,0.25); }
.ribology-home__ps-mark--tick svg { width: 12px; height: 12px; }

/* pair rows */
.ribology-home__ps { display: flex; flex-direction: column; gap: 14px; }
.ribology-home__ps-row {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    gap: 16px;
    align-items: center;
}
.ribology-home__ps-problem,
.ribology-home__ps-solution {
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: 16px;
    align-items: flex-start;
    transition: transform 0.24s var(--ribology-ease), box-shadow 0.24s;
}
.ribology-home__ps-problem {
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    box-shadow: var(--ribology-shadow-sm);
}
.ribology-home__ps-row:hover .ribology-home__ps-problem {
    transform: translateX(-7px);
    box-shadow: -8px 12px 30px rgba(186,80,80,0.15);
}
.ribology-home__ps-solution {
    background: linear-gradient(150deg, #0f2f5c, var(--ribology-deep-navy));
    color: var(--ribology-white);
    box-shadow: 0 10px 26px rgba(8,25,52,0.20);
}
.ribology-home__ps-row:hover .ribology-home__ps-solution {
    transform: translateX(7px);
    box-shadow: 8px 12px 32px rgba(25,179,215,0.28);
}
.ribology-home__ps-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ribology-home__ps-icon svg { width: 1.25rem; height: 1.25rem; }
.ribology-home__ps-icon--problem { background: rgba(186,80,80,0.09); color: #b06a6a; }
.ribology-home__ps-icon--solution { background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.2); color: #7cd9ef; }
.ribology-home__ps-text { flex: 1; min-width: 0; }
.ribology-home__ps-title { font-size: 1rem; font-weight: 800; line-height: 1.2; margin: 0 0 4px; }
.ribology-home__ps-title--problem { color: #2a1a1a; }
.ribology-home__ps-title--solution { color: #fff; }
.ribology-home__ps-desc { font-size: 0.88rem; line-height: 1.47; margin: 0; }
.ribology-home__ps-desc { color: #6b5050; }
.ribology-home__ps-desc--solution { color: rgba(200,225,255,0.78); }

/* Arrow circle between columns */
.ribology-home__ps-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--ribology-sky-blue), var(--ribology-sky-blue-dk));
    color: #fff;
    box-shadow: 0 6px 16px rgba(25,179,215,0.42);
    transition: transform 0.24s var(--ribology-ease), box-shadow 0.24s;
    flex-shrink: 0;
}
.ribology-home__ps-arrow svg { width: 20px; height: 20px; }
.ribology-home__ps-row:hover .ribology-home__ps-arrow {
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(25,179,215,0.14), 0 8px 20px rgba(25,179,215,0.42);
}

/* PS row stagger */
@media (prefers-reduced-motion: no-preference) {
    .ribology-home.js-anim .ribology-home__ps-row:nth-child(2)[data-animate] { transition-delay: 0.1s; }
    .ribology-home.js-anim .ribology-home__ps-row:nth-child(3)[data-animate] { transition-delay: 0.2s; }
    .ribology-home.js-anim .ribology-home__ps-row:nth-child(4)[data-animate] { transition-delay: 0.3s; }
}

/* =============================================================
   4 · SCIENCE — faded backdrop, bento cards, count-up metrics
   ============================================================= */
.ribology-home__science { background: var(--ribology-lab-white); }
.ribology-home__science .ribology-home__bg--faded { z-index: 0; }

/* Bento grid */
.ribology-home__bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}
@media (min-width: 860px) {
    .ribology-home__bento { grid-template-columns: repeat(12, 1fr); }
    .ribology-home__bento-card--1 { grid-column: span 7; }
    .ribology-home__bento-card--2 { grid-column: span 5; }
    .ribology-home__bento-card--3 { grid-column: span 5; }
    .ribology-home__bento-card--4 { grid-column: span 7; }
}
.ribology-home__bento-card {
    position: relative;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: 20px;
    padding: 26px 28px;
    box-shadow: var(--ribology-shadow-sm);
    overflow: hidden;
    transition: opacity 0.55s var(--ribology-ease), translate 0.55s var(--ribology-ease),
                transform 0.28s var(--ribology-ease), box-shadow 0.28s;
}
.ribology-home__bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(8,25,52,0.13);
}
.ribology-home__bento-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ribology-sky-blue), var(--ribology-deep-navy));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s var(--ribology-ease);
}
.ribology-home__bento-card:hover::before { transform: scaleX(1); }
.ribology-home__bento-step {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ribology-sky-blue-dk);
    display: block;
    margin-bottom: 14px;
}
.ribology-home__bento-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ribology-deep-navy), var(--ribology-sky-blue));
    color: #fff;
    box-shadow: 0 8px 18px rgba(23,67,121,0.28);
    margin-bottom: 16px;
    transition: transform 0.28s var(--ribology-ease);
}
.ribology-home__bento-card:hover .ribology-home__bento-icon { transform: scale(1.07) rotate(-4deg); }
.ribology-home__bento-icon svg { width: 26px; height: 26px; }
.ribology-home__bento-name { font-size: 1.15rem; font-weight: 800; color: var(--ribology-deep-navy); margin: 0 0 7px; }
.ribology-home__bento-desc { font-size: 0.92rem; color: var(--ribology-charcoal-lt); line-height: 1.55; margin: 0; }

/* Bento reveal stagger */
@media (prefers-reduced-motion: no-preference) {
    .ribology-home.js-anim .ribology-home__bento-card--2[data-animate] { transition-delay: 0.1s; }
    .ribology-home.js-anim .ribology-home__bento-card--3[data-animate] { transition-delay: 0.2s; }
    .ribology-home.js-anim .ribology-home__bento-card--4[data-animate] { transition-delay: 0.3s; }
}

/* Count-up metrics */
.ribology-home__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ribology-home__metric {
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-top: 3px solid var(--ribology-sky-blue);
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: var(--ribology-shadow-sm);
}
.ribology-home__metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ribology-deep-navy);
    margin-bottom: 7px;
}
.ribology-home__metric-affix { font-weight: 800; color: var(--ribology-sky-blue-dk); }
.ribology-home__count { font-variant-numeric: tabular-nums; }
.ribology-home__metric-label { font-size: 0.8rem; font-weight: 600; color: var(--ribology-charcoal-lt); }

/* =============================================================
   5 · EVALUATION TIMELINE — connected line, arrowhead, green finale
   ============================================================= */
.ribology-home__eval {
    background: radial-gradient(680px 340px at 16% 30%, rgba(25,179,215,0.09), transparent 60%),
                linear-gradient(180deg, #ffffff, var(--ribology-lab-white));
}

/* Wrapper holds the line pseudos + the <ol> + the arrowhead */
.ribology-home__timeline { position: relative; }

.ribology-home__timeline::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 12.5%;
    right: 12.5%;
    height: 4px;
    background: var(--ribology-border);
    border-radius: 4px;
    z-index: 0;
}
.ribology-home__timeline::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 12.5%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ribology-sky-blue), var(--ribology-deep-navy) 55%, var(--ribology-forest));
    border-radius: 4px;
    z-index: 0;
    transition: width 1.7s var(--ribology-ease);
}
.ribology-home__timeline.is-visible::after { width: 75%; }

.ribology-home__timeline-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}
.ribology-home__timeline-item { display: flex; flex-direction: column; gap: 15px; }

.ribology-home__timeline-marker {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--ribology-white);
    border: 3px solid var(--ribology-border);
    border-radius: 50%;
    transition: background 0.4s var(--ribology-ease), border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}
.ribology-home__timeline-num { font-weight: 800; color: var(--ribology-charcoal-lt); font-family: var(--rh-head); transition: color 0.4s; }

/* Sequential colour progression: sky → deep → navy → green */
.ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(1) .ribology-home__timeline-marker {
    background: var(--ribology-sky-blue); border-color: var(--ribology-sky-blue);
    transform: scale(1.06); box-shadow: 0 0 0 7px rgba(25,179,215,0.14);
    transition-delay: 0.1s;
}
.ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(2) .ribology-home__timeline-marker {
    background: var(--ribology-sky-blue-dk); border-color: var(--ribology-sky-blue-dk);
    transform: scale(1.06); box-shadow: 0 0 0 7px rgba(20,153,184,0.14);
    transition-delay: 0.55s;
}
.ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(3) .ribology-home__timeline-marker {
    background: var(--ribology-deep-navy); border-color: var(--ribology-deep-navy);
    transform: scale(1.06); box-shadow: 0 0 0 7px rgba(23,67,121,0.16);
    transition-delay: 1.05s;
}
.ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(4) .ribology-home__timeline-marker {
    background: var(--ribology-forest); border-color: var(--ribology-forest);
    transform: scale(1.06); box-shadow: 0 0 0 7px rgba(23,121,23,0.18);
    transition-delay: 1.55s;
}
.ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item .ribology-home__timeline-num {
    color: var(--ribology-white);
}
.ribology-home__timeline-name { font-size: 1.06rem; font-weight: 800; color: var(--ribology-deep-navy); margin: 0 0 6px; }
.ribology-home__timeline-desc { font-size: 0.9rem; color: var(--ribology-charcoal-lt); line-height: 1.55; margin: 0; }
.ribology-home__timeline-body { min-width: 0; }

/* Arrowhead — appears after fill completes */
.ribology-home__timeline-arrow {
    position: absolute;
    top: 26px;
    left: 87.5%;
    transform: translate(-4px, -50%) scale(0.6);
    transform-origin: center;
    color: var(--ribology-forest);
    opacity: 0;
    transition: opacity 0.4s var(--ribology-ease) 1.7s, transform 0.4s var(--ribology-ease) 1.7s;
    z-index: 2;
    display: flex;
}
.ribology-home__timeline.is-visible .ribology-home__timeline-arrow {
    opacity: 1;
    transform: translate(-4px, -50%) scale(1);
}

/* =============================================================
   6 · PRODUCTS — full-bleed backdrop right, text on white-left
   ============================================================= */
.ribology-home__products {
    background: var(--ribology-lab-white);
    min-height: clamp(440px, 46vw, 600px);
    display: flex;
    align-items: center;
}
.ribology-home__products .ribology-home__inner { width: 100%; }
.ribology-home__products-copy { max-width: 520px; }
.ribology-home__products-copy .ribology-home__h2 { margin-bottom: 14px; padding-bottom: 14px; }

.ribology-home__kit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.ribology-home__kit-chip {
    border-radius: 999px;
    border: 1px solid var(--ribology-border);
    background: var(--ribology-white);
    color: var(--ribology-deep-navy);
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.8rem;
    transition: border-color 0.22s, background 0.22s, transform 0.22s;
}
.ribology-home__products-copy:hover .ribology-home__kit-chip { border-color: rgba(25,179,215,0.5); background: rgba(25,179,215,0.07); }
.ribology-home__products-copy:hover .ribology-home__kit-chip:nth-child(1) { transform: translateY(-2px); }
.ribology-home__products-copy:hover .ribology-home__kit-chip:nth-child(2) { transform: translateY(-4px); }
.ribology-home__products-copy:hover .ribology-home__kit-chip:nth-child(3) { transform: translateY(-6px); }

.ribology-home__kit-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 24px; }
.ribology-home__kit-price-from { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ribology-sky-blue-dk); }
.ribology-home__kit-price-amount { font-size: 2rem; font-weight: 800; color: var(--ribology-deep-navy); line-height: 1; }
.ribology-home__kit-price-amount .woocommerce-Price-amount,
.ribology-home__kit-price-amount bdi { font-size: inherit; color: inherit; font-weight: inherit; }
.ribology-home__kit-price-tax { font-size: 0.8rem; color: var(--ribology-charcoal-lt); }

/* =============================================================
   7 · ACCOUNT — drifting gradient, glass panel, green badge, glow
   ============================================================= */
.ribology-home__account {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #08213e 0%, var(--ribology-deep-navy) 45%, #1b5b8e 72%, #08213e 100%);
    background-size: 220% 220%;
    animation: rhGradientDrift 13s ease-in-out infinite;
}
@keyframes rhGradientDrift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
.ribology-home__account::after {
    content: "";
    position: absolute;
    width: 400px; height: 400px;
    right: -130px; top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25,179,215,0.28), transparent 66%);
    pointer-events: none;
}

/* Glass panel */
.ribology-home__account-glass {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: clamp(32px,4vw,54px);
    border-radius: 24px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 24px 60px rgba(4,12,24,0.42), inset 0 1px 0 rgba(255,255,255,0.12);
}
.ribology-home__account-glass .ribology-home__h2--invert::after {
    left: 50%;
    transform: translateX(-50%);
}
.ribology-home__account-glass .ribology-home__lead--invert { margin-left: auto; margin-right: auto; }

/* Green "Approved" badge */
.ribology-home__account-approved {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(23,121,23,0.18);
    border: 1px solid rgba(46,200,90,0.50);
    color: #9be8a8;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 22px;
    box-shadow: 0 0 18px rgba(46,200,90,0.32);
}
.ribology-home__account-approved-tick {
    display: inline-flex;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ribology-forest);
    color: #fff;
    align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ribology-home__account-approved-tick svg { width: 11px; height: 11px; }

/* Badges with glow */
.ribology-home__account-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 28px; }
.ribology-home__account-badge {
    background: rgba(25,179,215,0.14);
    color: var(--ribology-white);
    border: 1px solid rgba(25,179,215,0.4);
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 600;
    font-size: 0.8rem;
    animation: rhBadgeGlow 3s ease-in-out infinite;
}
.ribology-home__account-badge:nth-child(2) { animation-delay: 0.6s; }
.ribology-home__account-badge:nth-child(3) { animation-delay: 1.2s; }
.ribology-home__account-badge:nth-child(4) { animation-delay: 1.8s; }
@keyframes rhBadgeGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(25,179,215,0.22); }
    50%       { box-shadow: 0 0 20px rgba(25,179,215,0.52); }
}
.ribology-home__account-glass .ribology-home__cta-row { justify-content: center; }

/* =============================================================
   8 · SUPPORT — full-bleed image, text overlay left
   ============================================================= */
.ribology-home__support {
    min-height: clamp(460px, 50vw, 640px);
    display: flex;
    align-items: center;
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
}
.ribology-home__support .ribology-home__inner { width: 100%; }
.ribology-home__support-copy { max-width: 560px; }
.ribology-home__support-copy .ribology-home__head { margin-bottom: 28px; }

/* Inverted resource pills */
.ribology-home__resources { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 26px; padding: 0; }
.ribology-home__resources a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem; font-weight: 600;
    transition: all 0.22s var(--ribology-ease);
}
.ribology-home__resources--invert a {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--ribology-white);
}
.ribology-home__resources--invert a svg { width: 16px; height: 16px; color: var(--ribology-sky-blue); }
.ribology-home__resources--invert a:hover { background: rgba(255,255,255,0.18); border-color: var(--ribology-sky-blue); transform: translateY(-2px); }
/* Support CTA uses accent (sky) on dark bg */
.ribology-home__support .ribology-home__cta-row { margin-top: 0; }

/* =============================================================
   9 · FINAL CTA — navy gradient card
   ============================================================= */
.ribology-home__final { background: var(--ribology-white); padding-bottom: 96px; }
.ribology-home__final-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 28px;
    padding: clamp(48px,7vw,84px) 24px;
    background:
        radial-gradient(circle at 72% 18%, rgba(25,179,215,0.26), transparent 42%),
        linear-gradient(145deg, #08213e, var(--ribology-deep-navy));
    box-shadow: 0 28px 70px rgba(8,25,52,0.28);
}
.ribology-home__final-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    pointer-events: none;
}
.ribology-home__final-title {
    position: relative;
    color: var(--ribology-white);
    font-family: var(--rh-head);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
}
.ribology-home__final-lead {
    position: relative;
    color: rgba(255,255,255,0.85);
    font-size: 1.04rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 28px;
}
.ribology-home__final-card .ribology-home__cta-row { position: relative; }
.ribology-home__final-card .ribology-btn--primary { background: var(--ribology-white); border-color: var(--ribology-white); color: var(--ribology-deep-navy); }
.ribology-home__final-card .ribology-btn--primary:hover { background: rgba(255,255,255,0.9); }
.ribology-home__final-card .ribology-btn--secondary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: var(--ribology-white); }
.ribology-home__final-card .ribology-btn--secondary:hover { background: rgba(255,255,255,0.16); border-color: var(--ribology-white); }

/* =============================================================
   REDUCED MOTION — stop all continuous loops
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .ribology-home__account { animation: none; }
    .ribology-home__account-badge { animation: none; }
    .ribology-home__hero-title, .ribology-home__hero-badge,
    .ribology-home__hero-sub, .ribology-home__hero .ribology-home__cta-row { animation: none; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1200px) {
    .ribology-home__strip-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ribology-home__metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .ribology-home__inner { padding: 0 24px; }
    .ribology-home__section { padding: 64px 0; }

    .ribology-home__ps-labels,
    .ribology-home__ps-row { grid-template-columns: 1fr; gap: 0; }
    .ribology-home__ps-labels { display: flex; flex-direction: row; justify-content: space-between; }
    .ribology-home__ps-label--solution { text-align: right; }
    .ribology-home__ps-row { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(27,39,59,0.08); }
    .ribology-home__ps-problem, .ribology-home__ps-solution { border-radius: 0; }
    .ribology-home__ps-arrow { width: 36px; height: 36px; border-radius: 50%; margin: 0; align-self: center; rotate: 90deg; justify-self: center; }
    .ribology-home__ps-row:hover .ribology-home__ps-problem { transform: none; box-shadow: none; }
    .ribology-home__ps-row:hover .ribology-home__ps-solution { transform: none; box-shadow: none; }
    .ribology-home__ps-arrow-col { display: flex; justify-content: center; background: var(--ribology-lab-white); }

    /* Timeline → vertical */
    .ribology-home__timeline::before { top: 0; bottom: 0; left: 25px; right: auto; width: 4px; height: auto; }
    .ribology-home__timeline::after {
        top: 0; left: 25px; width: 4px; height: 0;
        background: linear-gradient(180deg, var(--ribology-sky-blue), var(--ribology-deep-navy) 55%, var(--ribology-forest));
        transition: height 1.7s var(--ribology-ease);
    }
    .ribology-home__timeline.is-visible::after { width: 4px; height: 92%; }
    .ribology-home__timeline-list { grid-template-columns: 1fr; gap: 0; }
    .ribology-home__timeline-item { flex-direction: row; align-items: flex-start; gap: 20px; padding-bottom: 28px; }
    .ribology-home__timeline-item:last-child { padding-bottom: 0; }
    .ribology-home__timeline-arrow {
        top: auto; bottom: -8px; left: 25px;
        transform: translate(-50%, 0) rotate(90deg) scale(0.6);
        transition-delay: 1.7s;
    }
    .ribology-home__timeline.is-visible .ribology-home__timeline-arrow {
        transform: translate(-50%, 0) rotate(90deg) scale(1);
    }
}

@media (max-width: 860px) {
    .ribology-home__bento { grid-template-columns: 1fr; }

    .ribology-home__products { min-height: unset; padding: 56px 0; }
    .ribology-home__bg-scrim--white-left { background: rgba(247,249,250,0.94); }
    .ribology-home__products-copy { max-width: 100%; }

    .ribology-home__support { min-height: unset; padding: 64px 0; }
    .ribology-home__bg-scrim--dark-left { background: rgba(6,24,43,0.88); }
    .ribology-home__support-copy { max-width: 100%; }

    .ribology-home__head-row { flex-direction: column; align-items: flex-start; gap: 18px; }
    .ribology-home__head-cta-btn { align-self: flex-start; }
}

@media (max-width: 768px) {
    .ribology-home__section { padding: 52px 0; }
    .ribology-home__hero { padding: 72px 0 100px; min-height: 500px; }
    .ribology-home__strip-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .ribology-home__metrics { grid-template-columns: repeat(2, 1fr); }
    .ribology-home__account-glass { padding: 28px 22px; }
}

@media (max-width: 560px) {
    .ribology-home__strip-grid { grid-template-columns: repeat(2, 1fr); }
    .ribology-home__bento { grid-template-columns: 1fr; }
    .ribology-home__metrics { grid-template-columns: 1fr; }
    .ribology-home__cta-row:not(.ribology-home__cta-row--center) { flex-direction: column; align-items: stretch; }
    .ribology-home__cta-row:not(.ribology-home__cta-row--center) .ribology-btn { justify-content: center; }
}

/* =========================================================
   RIBOLOGY SHOP  (/shop/ · archive-product.php)   v1.9.0
   Scoped to .ribology-shop. Locked brand tokens. Type:
   Plus Jakarta Sans (heads + prices) + Manrope (body/labels).
   Header/footer untouched.
   ========================================================= */
.ribology-shop {
    --rh-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --rh-body: 'Manrope', system-ui, -apple-system, sans-serif;
    --rs-card: 14px;

    font-family: var(--rh-body);
    color: var(--ribology-charcoal);
    background: var(--ribology-white);
    overflow-x: clip;
}
.ribology-shop h1,
.ribology-shop h2,
.ribology-shop h3 {
    font-family: var(--rh-head);
    color: var(--ribology-deep-navy);
    letter-spacing: -0.01em;
    margin: 0;
}
.ribology-shop p { margin: 0; }

.ribology-shop__inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* ---------- Eyebrows / small labels (Manrope, no mono) ---------- */
.ribology-shop__eyebrow,
.ribology-shop__promo-eyebrow,
.ribology-shop__tile-count {
    display: inline-block;
    font-family: var(--rh-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ribology-sky-blue);
}
.ribology-shop__eyebrow { margin-bottom: 12px; }

/* ---------- Section heads ---------- */
.ribology-shop__sec-head { margin-bottom: 36px; }
.ribology-shop__sec-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 700; }
.ribology-shop__sec-head p {
    margin-top: 12px;
    color: var(--ribology-charcoal-lt);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 60ch;
}
.ribology-shop__sec-head--center { text-align: center; }
.ribology-shop__sec-head--center p { margin-left: auto; margin-right: auto; }

/* Glass panel behind panel headers (text sits over imagery) */
.ribology-shop__panel .ribology-shop__sec-head {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--ribology-radius);
    box-shadow: var(--ribology-shadow-sm);
}

/* ============ PORTAL ============ */
.ribology-shop__portal {
    position: relative;
    overflow: hidden;
    background: var(--ribology-white);
    padding: 36px 0 60px;
}
.ribology-shop__portal-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    filter: grayscale(1);
    z-index: 0;
}
.ribology-shop__portal-head {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--ribology-deep-navy);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    margin-bottom: 60px;
}
.ribology-shop__tiles {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Portal tile (button) — taller + slimmer */
.ribology-shop__tile {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--ribology-border);
    border-radius: var(--rs-card);
    overflow: hidden;
    min-height: 500px;
    padding: 0;
    cursor: pointer;
    background: var(--ribology-lab-white);
    box-shadow: 0 18px 40px rgba(8, 24, 48, 0.28);
    transition: transform 0.3s var(--ribology-ease), border-color 0.3s var(--ribology-ease), box-shadow 0.3s var(--ribology-ease);
}
.ribology-shop__tile:hover,
.ribology-shop__tile:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(25, 179, 215, 0.55);
    box-shadow: 0 30px 64px rgba(8, 24, 48, 0.55);
    outline: none;
}
.ribology-shop__tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.6s var(--ribology-ease);
    z-index: 0;
}
.ribology-shop__tile:hover .ribology-shop__tile-bg { transform: scale(1.09); }
.ribology-shop__tile-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 28, 52, 0) 50%, rgba(12, 28, 52, 0.18) 100%);
    z-index: 1;
}
.ribology-shop__tile-body {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--ribology-radius);
    box-shadow: 0 8px 24px rgba(8, 24, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.ribology-shop__tile-title {
    font-family: var(--rh-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    line-height: 1.15;
}
.ribology-shop__tile-desc {
    font-size: 0.9rem;
    color: var(--ribology-charcoal-lt);
    line-height: 1.5;
    margin-bottom: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}
.ribology-shop__tile-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ribology-deep-navy);
    margin-top: 4px;
}
.ribology-shop__tile-go svg { width: 18px; height: 18px; transition: transform 0.25s var(--ribology-ease); }
.ribology-shop__tile:hover .ribology-shop__tile-go svg { transform: translateX(5px); }
.ribology-shop__tile-go svg path { stroke: var(--ribology-sky-blue); }

/* ============ CATALOGUE: centred pill tabs ============ */
#ribology-shop-catalogue { position: relative; scroll-margin-top: calc(var(--ribology-header-h) + 12px); }
.ribology-shop__tabbar {
    position: sticky;
    top: var(--ribology-header-h);
    z-index: 50;
    background: var(--ribology-deep-navy);
    box-shadow: 0 6px 18px rgba(8, 24, 48, 0.18);
}
.ribology-shop__tabbar .ribology-shop__inner {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
}
.ribology-shop .ribology-shop__tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--rh-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ribology-ease), color 0.2s var(--ribology-ease), border-color 0.2s var(--ribology-ease);
}
.ribology-shop .ribology-shop__tab svg { width: 18px; height: 18px; flex: none; }
.ribology-shop .ribology-shop__tab:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--ribology-white);
}
.ribology-shop .ribology-shop__tab:focus-visible { outline: 2px solid var(--ribology-sky-blue); outline-offset: 2px; }
.ribology-shop .ribology-shop__tab.is-on {
    background: var(--ribology-white);
    border-color: var(--ribology-white);
    color: var(--ribology-deep-navy);
}
.ribology-shop__tab-ct {
    font-family: var(--rh-body);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.9);
}
.ribology-shop .ribology-shop__tab.is-on .ribology-shop__tab-ct { background: var(--ribology-deep-navy); color: var(--ribology-white); }

/* ============ Panels ============ */
.ribology-shop__panel {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    background: var(--ribology-lab-white);
}
.ribology-shop__panel.is-active { display: block; }
.ribology-shop__hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.ribology-shop__hero-ov { position: absolute; inset: 0; z-index: 1; }

/* Kits panel — faint light watermark, no navy */
.ribology-shop__panel--kits { background: var(--ribology-white); }
.ribology-shop__panel--kits .ribology-shop__hero-bg { opacity: 0.35; background-position: center; }
/* Kits intro on one line */
.ribology-shop__panel--kits .ribology-shop__sec-head p { max-width: none; }

/* Buffers / Consumables — light product imagery shows as a soft backdrop behind glass rows */
.ribology-shop__panel--split { background: var(--ribology-white); }
.ribology-shop__panel--split .ribology-shop__hero-bg--soft { opacity: 0.8; background-position: center; }
.ribology-shop__compact { max-width: 820px; margin: 0 auto; }

/* ---------- Kit tiers (centred) ---------- */
.ribology-shop__tiers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.ribology-shop__tier {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 258px;
    max-width: 280px;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--rs-card);
    padding: 26px 22px 22px;
    box-shadow: var(--ribology-shadow-md);
    transition: transform 0.25s var(--ribology-ease), box-shadow 0.25s var(--ribology-ease);
}
.ribology-shop__tier:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(15, 47, 92, 0.32); }
.ribology-shop__tier.is-featured {
    background: var(--ribology-white);
    border-color: var(--ribology-border);
}
.ribology-shop__flag,
.ribology-shop__badge {
    font-family: var(--rh-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ribology-white);
    border-radius: 999px;
}
.ribology-shop__flag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    white-space: nowrap;
}
.ribology-shop__flag--pop { background: var(--ribology-sky-blue); }
.ribology-shop__flag--val { background: var(--ribology-forest); }
.ribology-shop__tier-name { font-family: var(--rh-head); font-size: 1.18rem; font-weight: 700; color: var(--ribology-deep-navy); }
.ribology-shop__tier-size { font-size: 0.84rem; color: var(--ribology-charcoal-lt); margin-top: 3px; }
.ribology-shop__tier-price { margin-top: 16px; line-height: 1; }
.ribology-shop .ribology-shop__tier-price .woocommerce-Price-amount {
    font-family: var(--rh-head);
    font-size: 2rem;
    font-weight: 800;
    color: var(--ribology-deep-navy);
}
.ribology-shop__tier-price del { display: none; }
.ribology-shop__tier-pp { font-family: var(--rh-body); font-size: 0.82rem; font-weight: 700; color: var(--ribology-forest); margin-top: 6px; }
.ribology-shop__tier-note { font-size: 0.88rem; color: var(--ribology-charcoal-lt); line-height: 1.5; margin-top: 14px; margin-bottom: 20px; flex: 1 0 auto; }

/* ---------- Action group: Add (primary) + View (secondary) ---------- */
.ribology-shop__actions { display: flex; gap: 10px; }
.ribology-shop__actions--stack { flex-direction: column; }
.ribology-shop__actions--inline { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.ribology-shop .ribology-shop__cart-form { margin: 0; padding: 0; }
.ribology-shop__actions--inline .ribology-shop__cart-form { flex: 1 1 auto; }

/* Add-to-cart — matches the product page (.ribology-pdp__atc) */
.ribology-shop .ribology-shop__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 22px;
    font-family: var(--ribology-font);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all 0.25s var(--ribology-ease);
}
.ribology-shop .ribology-shop__add::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: left 0.6s;
}
.ribology-shop .ribology-shop__add > * { position: relative; z-index: 1; }
.ribology-shop .ribology-shop__add svg { width: 16px; height: 16px; flex: none; }
.ribology-shop .ribology-shop__add:hover {
    background: var(--ribology-deep-navy-dk);
    color: var(--ribology-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(23, 67, 121, 0.25);
}
.ribology-shop .ribology-shop__add:hover::before { left: 100%; }
.ribology-shop .ribology-shop__add--disabled {
    background: var(--ribology-border);
    color: var(--ribology-charcoal-lt);
    cursor: not-allowed;
    pointer-events: none;
}
.ribology-shop .ribology-shop__add.is-loading { opacity: 0.65; pointer-events: none; }

/* View product — secondary, outlined navy */
.ribology-shop .ribology-shop__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 18px;
    font-family: var(--ribology-font);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--ribology-deep-navy);
    border-radius: var(--ribology-radius-sm);
    background: transparent;
    color: var(--ribology-deep-navy);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s var(--ribology-ease);
}
.ribology-shop .ribology-shop__view:hover {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    transform: translateY(-1px);
}

/* Stack (kit tiers): both buttons full width */
.ribology-shop .ribology-shop__actions--stack .ribology-shop__cart-form,
.ribology-shop .ribology-shop__actions--stack .ribology-shop__add,
.ribology-shop .ribology-shop__actions--stack .ribology-shop__view { width: 100%; }

/* ---------- Kit CTA row ---------- */
.ribology-shop__cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--ribology-radius);
    box-shadow: var(--ribology-shadow-sm);
}
.ribology-shop__cta-row .ribology-btn { padding: 15px 28px; font-size: 0.9rem; }
.ribology-shop__cta-row .ribology-btn svg { width: 17px; height: 17px; }

/* ---------- Buffer / consumable rows (glass) ---------- */
.ribology-shop__rows { display: flex; flex-direction: column; gap: 12px; }
.ribology-shop__row {
    display: grid;
    grid-template-columns: 58px 1fr auto auto;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: var(--ribology-shadow-sm);
    transition: transform 0.2s var(--ribology-ease), box-shadow 0.2s var(--ribology-ease);
}
.ribology-shop__row:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15, 47, 92, 0.22); }
.ribology-shop__row-thumb {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ribology-shop__row-thumb img,
.ribology-shop__thumb-img { width: 100%; height: 100%; object-fit: contain; }
.ribology-shop__row-name { font-family: var(--rh-head); font-size: 1.02rem; font-weight: 700; color: var(--ribology-deep-navy); }
.ribology-shop__row-desc { font-size: 0.84rem; color: var(--ribology-charcoal-lt); margin-top: 2px; }
.ribology-shop__row-price { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.ribology-shop__exgst { font-family: var(--rh-body); font-size: 0.68rem; color: var(--ribology-charcoal-lt); text-transform: uppercase; letter-spacing: 0.06em; }

/* Prices — match the kit price font (Plus Jakarta Sans) everywhere */
.ribology-shop .ribology-shop__price .woocommerce-Price-amount {
    font-family: var(--rh-head);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ribology-deep-navy);
}
.ribology-shop__price del { display: none; }
.ribology-shop__price ins { text-decoration: none; }

/* ============ Trust strip — white with navy rules ============ */
.ribology-shop__trust {
    background: var(--ribology-white);
    color: var(--ribology-charcoal);
    padding: 18px 0;
    border-top: 1px solid var(--ribology-deep-navy);
    border-bottom: 1px solid var(--ribology-deep-navy);
}
.ribology-shop__trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ribology-shop__trust-item { display: flex; align-items: center; gap: 13px; }
.ribology-shop__trust-icon { flex: none; color: var(--ribology-sky-blue); }
.ribology-shop__trust-icon svg { width: 26px; height: 26px; }
.ribology-shop__trust-text { display: flex; flex-direction: column; line-height: 1.3; }
.ribology-shop__trust-text b { font-weight: 700; font-size: 0.95rem; color: var(--ribology-deep-navy); }
.ribology-shop__trust-text span { font-size: 0.82rem; color: var(--ribology-charcoal-lt); }

/* ============ Lab favourites ============ */
.ribology-shop__popular { padding: 44px 0 76px; background: var(--ribology-white); }
.ribology-shop__fcards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
.ribology-shop__fcard {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 300px;
    max-width: 320px;
    background: var(--ribology-white);
    border: 1.5px solid rgba(23, 67, 121, 0.16);
    border-radius: var(--rs-card);
    overflow: hidden;
    box-shadow: var(--ribology-shadow-md);
    transition: transform 0.25s var(--ribology-ease), box-shadow 0.25s var(--ribology-ease);
}
.ribology-shop__fcard:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(15, 47, 92, 0.34); }
.ribology-shop__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    padding: 4px 11px;
}
.ribology-shop__badge--pop { background: var(--ribology-sky-blue); }
.ribology-shop__badge--val { background: var(--ribology-forest); }
.ribology-shop__fcard-img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ribology-lab-white);
}
.ribology-shop__fcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ribology-ease); }
.ribology-shop__fcard:hover .ribology-shop__fcard-img img { transform: scale(1.05); }
.ribology-shop__fcard-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.ribology-shop__fcard-name { font-family: var(--rh-head); font-size: 1rem; font-weight: 700; }
.ribology-shop__fcard-name a { color: var(--ribology-deep-navy); text-decoration: none; }
.ribology-shop__fcard-name a:hover { color: var(--ribology-sky-blue-dk); }
.ribology-shop__fcard-blurb { font-size: 0.86rem; color: var(--ribology-charcoal-lt); margin-top: 4px; line-height: 1.45; }
.ribology-shop__fcard-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}
.ribology-shop__fcard-price { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ribology-shop .ribology-shop__fcard-price .woocommerce-Price-amount { font-size: 1.12rem; }
.ribology-shop__per { font-family: var(--rh-body); font-size: 0.7rem; font-weight: 700; color: var(--ribology-forest); }

/* Favourites: keep View + Add on one row; Add wider than View */
.ribology-shop__fcard-foot .ribology-shop__actions { flex-wrap: nowrap; gap: 8px; }
.ribology-shop__fcard-foot .ribology-shop__view { flex: 0 0 auto; padding: 0 14px; }
.ribology-shop__fcard-foot .ribology-shop__add { padding: 0 14px; }

/* Promo card */
.ribology-shop__fcard--promo {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--ribology-deep-navy) 0%, var(--ribology-deep-navy-dk) 100%);
    border-color: var(--ribology-deep-navy);
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 32px 26px;
    color: var(--ribology-white);
}
.ribology-shop__fcard--promo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(circle at 86% 12%, rgba(25, 179, 215, 0.22), transparent 46%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 16px);
    pointer-events: none;
}
.ribology-shop__fcard--promo > * { position: relative; z-index: 1; }
.ribology-shop__fcard--promo:hover { transform: translateY(-5px); }
.ribology-shop__promo-eyebrow { color: var(--ribology-sky-blue); }
.ribology-shop .ribology-shop__promo-head {
    font-family: var(--rh-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ribology-white);
    margin-top: 12px;
}
.ribology-shop__promo-text { font-size: 0.94rem; color: rgba(255, 255, 255, 0.82); margin-top: 12px; line-height: 1.55; max-width: 34ch; }
.ribology-shop__fcard--promo .ribology-btn { margin-top: 22px; width: 100%; }
.ribology-shop .ribology-shop__fcard--promo .ribology-btn--primary {
    background: var(--ribology-white);
    border-color: var(--ribology-white);
    color: var(--ribology-deep-navy);
}
.ribology-shop .ribology-shop__fcard--promo .ribology-btn--primary:hover { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.88); }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
    .ribology-shop__inner { padding: 0 24px; }
    .ribology-shop__tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .ribology-shop__fcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    .ribology-shop__trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .ribology-shop__panel { padding: 56px 0; }
    .ribology-shop__portal { padding: 48px 0 56px; }
    .ribology-shop__popular { padding: 56px 0; }
    .ribology-shop__portal-head { white-space: normal; }
    .ribology-shop__tiles { grid-template-columns: 1fr; max-width: 420px; }
    .ribology-shop__tabbar .ribology-shop__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
    .ribology-shop .ribology-shop__tab { white-space: nowrap; }
    .ribology-shop__row {
        grid-template-columns: 50px 1fr;
        grid-template-areas:
            "thumb info"
            "price actions";
        row-gap: 12px;
        column-gap: 14px;
    }
    .ribology-shop__row-thumb { grid-area: thumb; width: 50px; height: 50px; }
    .ribology-shop__row-info { grid-area: info; }
    .ribology-shop__row-price { grid-area: price; text-align: left; flex-direction: row; align-items: baseline; gap: 8px; }
    .ribology-shop__row .ribology-shop__actions { grid-area: actions; justify-self: end; }
}
@media (max-width: 560px) {
    .ribology-shop__tier { flex-basis: 100%; max-width: 360px; }
    .ribology-shop__fcards { grid-template-columns: 1fr; }
    .ribology-shop__trust-grid { grid-template-columns: 1fr; }
    .ribology-shop__cta-row .ribology-btn { width: 100%; }
    .ribology-shop__row { grid-template-columns: 1fr; grid-template-areas: "info" "price" "actions"; }
    .ribology-shop__row-thumb { display: none; }
    .ribology-shop__row .ribology-shop__actions { justify-self: stretch; }
    .ribology-shop__actions--inline .ribology-shop__view { flex: 1 1 auto; }
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ribology-shop *,
    .ribology-shop *::before,
    .ribology-shop *::after { transition: none !important; }
}
/* ===== end RIBOLOGY SHOP ===== */
/* ============================================================
 * RIBOLOGY — CONTENT / LEGAL PAGES  (.ribology-page)
 * ------------------------------------------------------------
 * Long-form reading layout for Privacy, Terms and Returns.
 * Scoped to .ribology-page. Plus Jakarta Sans (heads) + Manrope
 * (body) are loaded in page-content.php on wp_head and applied
 * here; the header/footer keep Poppins. Reuses the :root
 * --ribology-* tokens and defines no new globals.
 * Version bumped 1.8.9 -> 1.9.0 for this delivery.
 * ============================================================ */

/* ---------- Scoped type system ---------- */
.ribology-page {
    --rp-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --rp-body: 'Manrope', system-ui, sans-serif;
    font-family: var(--rp-body);
    color: var(--ribology-charcoal);
    overflow-x: clip;
}
.ribology-page h1,
.ribology-page h2,
.ribology-page h3,
.ribology-page h4 {
    font-family: var(--rp-head);
    letter-spacing: -0.02em;
}

/* ---------- Shared inner container (matches site frame) ---------- */
.ribology-page__inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

/* ---------- Hero banner (full-bleed image + navy scrim) ---------- */
.ribology-page__hero {
    position: relative;
    overflow: hidden;
    color: var(--ribology-white);
    background:
        radial-gradient(720px 360px at 12% 18%, rgba(25, 179, 215, 0.22), transparent 60%),
        linear-gradient(135deg, var(--ribology-deep-navy-dk) 0%, var(--ribology-deep-navy) 60%, #1d5191 100%);
}
.ribology-page__hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ribology-page__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ribology-page__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(15, 47, 92, 0.82) 0%,
        rgba(15, 47, 92, 0.66) 55%,
        rgba(15, 47, 92, 0.78) 100%
    );
}
.ribology-page__hero-inner {
    z-index: 2;
    padding-top: 76px;
    padding-bottom: 76px;
}
.ribology-page__eyebrow {
    font-family: var(--rp-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ribology-sky-blue);
    margin: 0 0 14px;
}
.ribology-page__title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--ribology-white);
    max-width: 18ch;
}
.ribology-page__updated {
    font-family: var(--rp-body);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 18px;
}
.ribology-page__lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 62ch;
    margin: 0;
}

/* ---------- Reading area + centred column ---------- */
.ribology-page__body {
    background: var(--ribology-lab-white);
    padding: 64px 0 88px;
}
.ribology-page__content {
    display: block;
    max-width: 820px;
    margin: 0 auto;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius);
    box-shadow: var(--ribology-shadow-sm);
    padding: 48px 56px;
}

/* ---------- Long-form type hierarchy ---------- */
.ribology-page__content p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ribology-charcoal);
    margin: 0 0 1.1em;
}
.ribology-page__content > p:last-child {
    margin-bottom: 0;
}
.ribology-page__section {
    margin-top: 2.4em;
    padding-top: 2.4em;
    border-top: 1px solid var(--ribology-border);
}
.ribology-page__section h2 {
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--ribology-deep-navy);
    margin: 0 0 0.6em;
}
.ribology-page__section h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--ribology-deep-navy);
    margin: 1.6em 0 0.5em;
}
.ribology-page__section h4 {
    font-size: 1.02rem;
    color: var(--ribology-deep-navy);
    margin: 1.4em 0 0.4em;
}

/* ---------- Lists ---------- */
.ribology-page__content ul,
.ribology-page__content ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}
.ribology-page__content li {
    margin: 0 0 0.5em;
    line-height: 1.7;
}
.ribology-page__content ul li::marker {
    color: var(--ribology-sky-blue);
}
.ribology-page__content ol li::marker {
    color: var(--ribology-sky-blue-dk);
    font-weight: 700;
}

/* ---------- Links ---------- */
.ribology-page__content a {
    color: var(--ribology-deep-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(23, 67, 121, 0.35);
    transition: color var(--ribology-ease), text-decoration-color var(--ribology-ease);
}
.ribology-page__content a:hover {
    color: var(--ribology-sky-blue-dk);
    text-decoration-color: currentColor;
}
.ribology-page__content a:focus-visible {
    outline: 2px solid var(--ribology-sky-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Summary card (definition list) ---------- */
.ribology-page__summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 0 0 28px;
    padding: 18px 22px;
    background: var(--ribology-lab-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    font-size: 0.95rem;
}
.ribology-page__summary dt {
    font-weight: 700;
    color: var(--ribology-deep-navy);
}
.ribology-page__summary dd {
    margin: 0;
    color: var(--ribology-charcoal-lt);
}

/* ---------- Key-statement callout ---------- */
.ribology-page__callout {
    margin: 0 0 28px;
    padding: 18px 22px;
    border-left: 4px solid var(--ribology-sky-blue);
    background: rgba(25, 179, 215, 0.06);
    border-radius: 0 var(--ribology-radius-sm) var(--ribology-radius-sm) 0;
}
.ribology-page__callout p {
    margin: 0;
    color: var(--ribology-deep-navy);
    font-weight: 500;
}
.ribology-page__callout-title {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ribology-sky-blue-dk);
    margin: 0 0 6px !important;
}

/* ---------- Spec list (label / description pairs) ---------- */
.ribology-page__speclist {
    margin: 0 0 1.1em;
}
.ribology-page__speclist dt {
    font-family: var(--rp-head);
    font-weight: 700;
    color: var(--ribology-deep-navy);
    margin: 0.9em 0 0.15em;
    font-size: 1.02rem;
}
.ribology-page__speclist dt:first-child {
    margin-top: 0;
}
.ribology-page__speclist dd {
    margin: 0 0 0.2em;
    color: var(--ribology-charcoal);
    line-height: 1.7;
}

/* ---------- Inline note ---------- */
.ribology-page__note {
    margin: 1.1em 0 !important;
    padding: 12px 16px;
    background: var(--ribology-lab-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    font-size: 0.95rem;
    color: var(--ribology-charcoal-lt);
}

/* ---------- Contact block ---------- */
.ribology-page__contact {
    margin: 1.2em 0;
    padding: 18px 22px;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-lab-white);
}
.ribology-page__contact > div {
    margin-bottom: 8px;
}
.ribology-page__contact strong {
    display: block;
    font-family: var(--rp-head);
    color: var(--ribology-deep-navy);
}
.ribology-page__contact span {
    display: block;
    color: var(--ribology-charcoal-lt);
    font-size: 0.95rem;
}
.ribology-page__contact a {
    color: var(--ribology-deep-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
    .ribology-page__inner {
        padding: 0 20px;
    }
    .ribology-page__hero-inner {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .ribology-page__body {
        padding: 40px 0 64px;
    }
    .ribology-page__content {
        padding: 32px 24px;
    }
    .ribology-page__summary {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .ribology-page__summary dt {
        margin-top: 12px;
    }
    .ribology-page__summary dt:first-child {
        margin-top: 0;
    }
}

/* ---------- Honour reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .ribology-page *,
    .ribology-page *::before,
    .ribology-page *::after {
        transition: none !important;
    }
}

/* ---------- Print (clean legal document) ---------- */
@media print {
    .ribology-page__hero {
        background: none;
        color: #000;
    }
    .ribology-page__hero-bg,
    .ribology-page__hero-scrim {
        display: none;
    }
    .ribology-page__eyebrow,
    .ribology-page__title,
    .ribology-page__updated,
    .ribology-page__lead {
        color: #000;
    }
    .ribology-page__body {
        background: none;
        padding: 0;
    }
    .ribology-page__content {
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}
/* ===== end RIBOLOGY CONTENT / LEGAL PAGES ===== */

/* ============================================================
 * RIBOLOGY — ABOUT PAGE  (.ribology-about)
 * ------------------------------------------------------------
 * Hybrid marketing layout for /about/. Scoped to .ribology-about.
 * Plus Jakarta Sans (heads) + Manrope (body) load in page-about.php
 * on wp_head; header/footer keep Poppins. Reuses the :root
 * --ribology-* tokens and the global .ribology-btn styles, and
 * mirrors the .ribology-home section language. Defines no new
 * globals. Version bumped 1.9.0 -> 1.9.1 for this delivery.
 * ============================================================ */

/* ---------- Scoped type ---------- */
.ribology-about {
    --ra-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ra-body: 'Manrope', system-ui, sans-serif;
    font-family: var(--ra-body);
    color: var(--ribology-charcoal);
    overflow-x: clip;
}
.ribology-about h1,
.ribology-about h2,
.ribology-about h3,
.ribology-about h4 {
    font-family: var(--ra-head);
    letter-spacing: -0.02em;
}

/* ---------- Containers ---------- */
.ribology-about__inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}
.ribology-about__measure {
    max-width: 760px;
}
.ribology-about__section {
    padding: 72px 0;
    position: relative;
}
.ribology-about__mission {
    background: var(--ribology-white);
}
.ribology-about__mission-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.ribology-about__mission-copy {
    max-width: 760px;
}
.ribology-about__mission-media {
    position: relative;
    min-height: clamp(310px, 28vw, 430px);
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #06182b;
    border: 1px solid rgba(23, 67, 121, 0.10);
    box-shadow: 0 18px 48px rgba(23, 67, 121, 0.14);
}
.ribology-about__mission-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.ribology-about__mission-media::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 20%, rgba(25, 179, 215, 0.16) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.02) 0%, rgba(6, 24, 43, 0.30) 100%);
}
.ribology-about__mission-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 249, 250, 0.28) 100%);
}
.ribology-about__pillars {
    background: var(--ribology-lab-white);
}
.ribology-about__made {
    background: var(--ribology-white);
}

/* ---------- Shared headings + lead ---------- */
.ribology-about__h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    color: var(--ribology-deep-navy);
    margin: 0 0 0.6em;
}
.ribology-about__lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ribology-charcoal);
    margin: 0 0 1.1em;
}
.ribology-about__lead:last-child {
    margin-bottom: 0;
}
.ribology-about__eyebrow {
    display: inline-block;
    font-family: var(--ra-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ribology-sky-blue);
    margin: 0 0 14px;
}

/* ---------- Hero ---------- */
.ribology-about__hero {
    position: relative;
    overflow: hidden;
    color: var(--ribology-white);
    min-height: clamp(460px, 44vw, 620px);
    display: flex;
    align-items: stretch;
    background:
        radial-gradient(circle at 18% 35%, rgba(25, 179, 215, 0.14) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(90deg, #06182b 0%, #0b223a 34%, var(--ribology-deep-navy) 58%, #1b598f 100%);
}

/* Hero image layer — full bleed on mobile, right-side visual panel on desktop */
.ribology-about__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ribology-about__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    display: block;
}
.ribology-about__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 62% 48%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 18%, rgba(255, 255, 255, 0) 42%);
}

/* Navy scrim keeps the copy readable while allowing the image to remain visible */
.ribology-about__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(6, 24, 43, 0.38) 0%,
        rgba(6, 24, 43, 0.56) 42%,
        rgba(6, 24, 43, 0.88) 72%,
        rgba(6, 24, 43, 0.97) 100%
    );
}

/* Soft fade into the next white/lab-white section */
.ribology-about__hero-bottom-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 249, 250, 0.76) 100%);
}

/* Desktop right-edge fade prevents the image from ending abruptly */
.ribology-about__hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(247, 249, 250, 0.84) 0%, rgba(247, 249, 250, 0) 75%);
    display: none;
}

.ribology-about__hero-inner {
    width: 100%;
    max-width: none;
    min-height: inherit;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(44px, 5vw, 76px);
    padding-right: clamp(20px, 5vw, 64px);
    padding-bottom: clamp(54px, 6vw, 86px);
    padding-left: clamp(44px, 8vw, 180px);
    z-index: 4;
}

/* Foreground copy panel — glass treatment over the hero */
.ribology-about__hero-copy {
    width: min(100%, 650px);
    padding: clamp(24px, 3vw, 36px);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.80) 0%, rgba(10, 29, 50, 0.64) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 40px rgba(4, 12, 24, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.ribology-about__hero-title {
    font-size: clamp(2rem, 4.4vw, 3.65rem);
    line-height: 1.04;
    margin: 0 0 18px;
    color: var(--ribology-white);
    max-width: 12ch;
    text-shadow: 0 4px 24px rgba(5, 14, 26, 0.72);
}
.ribology-about__hero-sub {
    font-size: clamp(1.02rem, 1.45vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 50ch;
    margin: 0 0 28px;
    text-shadow: 0 2px 14px rgba(5, 14, 26, 0.65);
}

@media (min-width: 1100px) {
    .ribology-about__hero-inner {
        padding-left: clamp(80px, 10vw, 220px);
    }
}

@media (min-width: 768px) {
    .ribology-about__hero--has-image .ribology-about__bg {
        left: auto;
        right: 0;
        width: 61%;
    }
    .ribology-about__hero--has-image .ribology-about__bg-img {
        object-position: center center;
    }
    .ribology-about__hero--has-image .ribology-about__hero-scrim {
        background: linear-gradient(
            90deg,
            rgba(6, 24, 43, 0.92) 0%,
            rgba(6, 24, 43, 0.78) 18%,
            rgba(6, 24, 43, 0.45) 38%,
            rgba(6, 24, 43, 0.18) 60%,
            rgba(6, 24, 43, 0.08) 100%
        );
    }
    .ribology-about__hero::after {
        display: block;
    }
}

/* ---------- CTA rows + dark-surface button treatments ---------- */
.ribology-about__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.ribology-about__cta-row--center {
    justify-content: center;
}
.ribology-about__hero .ribology-btn--primary {
    background: linear-gradient(135deg, var(--ribology-sky-blue) 0%, var(--ribology-sky-blue-dk) 100%);
    border-color: rgba(25, 179, 215, 0.95);
    color: #fff;
    box-shadow: 0 10px 28px rgba(25, 179, 215, 0.24);
}
.ribology-about__hero .ribology-btn--primary:hover {
    background: linear-gradient(135deg, #27c4e7 0%, var(--ribology-sky-blue) 100%);
    border-color: #27c4e7;
    color: #fff;
}
.ribology-about__hero .ribology-btn--secondary {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.68);
    color: #fff;
    box-shadow: 0 10px 28px rgba(4, 12, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.ribology-about__hero .ribology-btn--secondary:hover {
    background: var(--ribology-white);
    border-color: var(--ribology-white);
    color: var(--ribology-deep-navy);
}

/* ---------- Pillars ---------- */
.ribology-about__head {
    max-width: 720px;
    margin: 0 0 40px;
}
.ribology-about__head-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ribology-charcoal-lt);
    margin: 0;
}
.ribology-about__pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ribology-about__pillar {
    position: relative;
    min-height: clamp(330px, 29vw, 410px);
    overflow: hidden;
    border-radius: 20px;
    background: #06182b;
    border: 1px solid rgba(23, 67, 121, 0.12);
    box-shadow: 0 10px 32px rgba(23, 67, 121, 0.11);
    outline: none;
    isolation: isolate;
    transition: transform 0.35s var(--ribology-ease), box-shadow 0.35s var(--ribology-ease), border-color 0.35s var(--ribology-ease);
}
.ribology-about__pillar:hover,
.ribology-about__pillar:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(25, 179, 215, 0.38);
    box-shadow: 0 20px 52px rgba(23, 67, 121, 0.22);
}
.ribology-about__pillar:focus-visible {
    box-shadow: 0 20px 52px rgba(23, 67, 121, 0.22), 0 0 0 3px rgba(25, 179, 215, 0.28);
}
.ribology-about__pillar-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: scale(1.01);
    transition: transform 0.55s var(--ribology-ease), filter 0.35s var(--ribology-ease);
}
.ribology-about__pillar:hover .ribology-about__pillar-img,
.ribology-about__pillar:focus-visible .ribology-about__pillar-img {
    transform: scale(1.07);
    filter: saturate(1.05) contrast(1.04);
}
.ribology-about__pillar-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 20%, rgba(25, 179, 215, 0.18) 0%, rgba(25, 179, 215, 0) 35%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.10) 0%, rgba(6, 24, 43, 0.52) 48%, rgba(6, 24, 43, 0.92) 100%);
    transition: background 0.35s var(--ribology-ease);
}
.ribology-about__pillar:hover .ribology-about__pillar-overlay,
.ribology-about__pillar:focus-visible .ribology-about__pillar-overlay {
    background:
        radial-gradient(circle at 24% 20%, rgba(25, 179, 215, 0.22) 0%, rgba(25, 179, 215, 0) 35%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.18) 0%, rgba(6, 24, 43, 0.64) 42%, rgba(6, 24, 43, 0.96) 100%);
}
.ribology-about__pillar-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 24px 24px;
    color: #fff;
    z-index: 2;
}
.ribology-about__pillar-title {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    line-height: 1.18;
    color: #fff;
    margin: 0;
    max-width: 16ch;
    text-shadow: 0 3px 18px rgba(5, 14, 26, 0.78);
}
.ribology-about__pillar-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(12px);
    font-size: 0.96rem;
    line-height: 1.58;
    color: rgba(255, 255, 255, 0.90);
    margin: 0;
    text-shadow: 0 2px 12px rgba(5, 14, 26, 0.65);
    transition: max-height 0.35s var(--ribology-ease), opacity 0.25s var(--ribology-ease), transform 0.35s var(--ribology-ease), margin 0.35s var(--ribology-ease);
}
.ribology-about__pillar:hover .ribology-about__pillar-desc,
.ribology-about__pillar:focus-visible .ribology-about__pillar-desc {
    max-height: 180px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 12px;
}

/* ---------- Made / global standards ---------- */
.ribology-about__made-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: start;
}
.ribology-about__points {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ribology-about__points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ribology-border);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ribology-charcoal);
}
.ribology-about__points li:last-child {
    border-bottom: 0;
}
.ribology-about__points-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ribology-forest);
    color: #fff;
    margin-top: 1px;
}
.ribology-about__points-tick svg {
    width: 14px;
    height: 14px;
}

/* ---------- Final CTA card ---------- */
.ribology-about__final {
    background: var(--ribology-white);
}
.ribology-about__final-card {
    background:
        radial-gradient(640px 320px at 18% 20%, rgba(25, 179, 215, 0.22), transparent 60%),
        linear-gradient(135deg, var(--ribology-deep-navy-dk) 0%, var(--ribology-deep-navy) 60%, #1d5191 100%);
    color: var(--ribology-white);
    border-radius: var(--ribology-radius);
    padding: 56px 48px;
    text-align: center;
}
.ribology-about__final-title {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    color: var(--ribology-white);
    margin: 0 0 12px;
}
.ribology-about__final-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 60ch;
    margin: 0 auto 28px;
}
.ribology-about__final-card .ribology-btn--primary {
    background: var(--ribology-white);
    border-color: var(--ribology-white);
    color: var(--ribology-deep-navy);
}
.ribology-about__final-card .ribology-btn--primary:hover {
    background: rgba(255, 255, 255, 0.9);
}
.ribology-about__final-card .ribology-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--ribology-white);
}
.ribology-about__final-card .ribology-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--ribology-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .ribology-about__pillar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ribology-about__mission-grid,
    .ribology-about__made-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ribology-about__mission-media {
        min-height: 320px;
        order: -1;
    }
}
@media (max-width: 782px) {
    .ribology-about__inner {
        padding: 0 20px;
    }
    .ribology-about__hero {
        min-height: 500px;
        align-items: flex-end;
    }
    .ribology-about__hero-inner {
        align-items: flex-end;
        padding: 64px 20px 52px;
    }
    .ribology-about__hero-copy {
        border-radius: 18px;
        padding: 22px;
    }
    .ribology-about__hero-title {
        max-width: 13ch;
    }
    .ribology-about__section {
        padding: 52px 0;
    }
}
@media (max-width: 560px) {
    .ribology-about__pillar-grid {
        grid-template-columns: 1fr;
    }
    .ribology-about__pillar {
        min-height: 300px;
    }
    .ribology-about__mission-media {
        min-height: 260px;
        border-radius: 18px;
    }
    .ribology-about__cta-row .ribology-btn {
        width: 100%;
    }
    .ribology-about__final-card {
        padding: 40px 24px;
    }
}
@media (hover: none) {
    .ribology-about__pillar-desc {
        max-height: 180px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 12px;
    }
}

/* ---------- Honour reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .ribology-about *,
    .ribology-about *::before,
    .ribology-about *::after {
        transition: none !important;
    }
}
/* ===== end RIBOLOGY ABOUT PAGE ===== */

/* ============================================================
 * RIBOLOGY — CONTACT PAGE  (.ribology-contact)
 * ------------------------------------------------------------
 * Bespoke layout for /contact/. Scoped to .ribology-contact.
 * Plus Jakarta Sans (heads) + Manrope (body) load in
 * page-contact.php on wp_head; header/footer keep Poppins.
 * Reuses the :root --ribology-* tokens and the global
 * .ribology-btn styles. Defines no new globals.
 * Version bumped 1.9.1 -> 1.9.2 for this delivery.
 * ============================================================ */

/* ---------- Scoped type ---------- */
.ribology-contact {
    --rc-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --rc-body: 'Manrope', system-ui, sans-serif;
    font-family: var(--rc-body);
    color: var(--ribology-charcoal);
    overflow-x: clip;
}
.ribology-contact h1,
.ribology-contact h2,
.ribology-contact h3 {
    font-family: var(--rc-head);
    letter-spacing: -0.02em;
}

/* ---------- Container ---------- */
.ribology-contact__inner {
    max-width: var(--ribology-max-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* ---------- Hero ---------- */
.ribology-contact__hero {
    position: relative;
    overflow: hidden;
    color: var(--ribology-white);
    background:
        radial-gradient(720px 360px at 12% 18%, rgba(25, 179, 215, 0.22), transparent 60%),
        linear-gradient(135deg, var(--ribology-deep-navy-dk) 0%, var(--ribology-deep-navy) 60%, #1d5191 100%);
}
.ribology-contact__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ribology-contact__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ribology-contact__hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(15, 47, 92, 0.82) 0%,
        rgba(15, 47, 92, 0.64) 55%,
        rgba(15, 47, 92, 0.78) 100%
    );
}
.ribology-contact__hero-inner {
    padding-top: 84px;
    padding-bottom: 84px;
}
.ribology-contact__eyebrow {
    display: inline-block;
    font-family: var(--rc-body);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ribology-sky-blue);
    margin: 0 0 14px;
}
.ribology-contact__title {
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.08;
    margin: 0 0 16px;
    color: var(--ribology-white);
}
.ribology-contact__hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
    margin: 0;
}

/* ---------- Body grid ---------- */
.ribology-contact__body {
    background: var(--ribology-lab-white);
    padding: 72px 0 88px;
}
.ribology-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    max-width: 1100px;
    margin-inline: auto;
}

/* ---------- Details column ---------- */
.ribology-contact__heading {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    color: var(--ribology-deep-navy);
    margin: 0 0 1em;
}
.ribology-contact__line {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ribology-charcoal);
    margin: 0 0 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--ribology-border);
}
.ribology-contact__email a {
    color: var(--ribology-deep-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(23, 67, 121, 0.35);
    transition: color var(--ribology-ease), text-decoration-color var(--ribology-ease);
}
.ribology-contact__email a:hover {
    color: var(--ribology-sky-blue-dk);
    text-decoration-color: currentColor;
}
.ribology-contact__hours {
    color: var(--ribology-charcoal-lt);
}

/* ---------- Support callout ---------- */
.ribology-contact__support {
    margin-top: 1.6em;
    padding: 24px 26px;
    background: rgba(25, 179, 215, 0.09);
    border: 1px solid rgba(25, 179, 215, 0.25);
    border-radius: var(--ribology-radius);
}
.ribology-contact__support-heading {
    font-size: 1.1rem;
    color: var(--ribology-deep-navy);
    margin: 0 0 8px;
}
.ribology-contact__support-text {
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--ribology-charcoal-lt);
    margin: 0 0 16px;
}

/* ---------- Form card ---------- */
.ribology-contact__form-wrap {
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius);
    box-shadow: var(--ribology-shadow-sm);
    padding: 36px 36px 40px;
}
.ribology-contact__form-heading {
    font-size: 1.25rem;
    color: var(--ribology-deep-navy);
    margin: 0 0 20px;
}
.ribology-contact__field {
    margin-bottom: 18px;
}
.ribology-contact__field label {
    display: block;
    font-family: var(--rc-body);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ribology-deep-navy);
    margin-bottom: 6px;
}
.ribology-contact__field input,
.ribology-contact__field textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--rc-body);
    font-size: 1rem;
    color: var(--ribology-charcoal);
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    transition: border-color var(--ribology-ease), box-shadow var(--ribology-ease);
}
.ribology-contact__field input::placeholder,
.ribology-contact__field textarea::placeholder {
    color: var(--ribology-charcoal-lt);
    opacity: 0.75;
}
.ribology-contact__field input:focus,
.ribology-contact__field textarea:focus {
    outline: none;
    border-color: var(--ribology-sky-blue);
    box-shadow: 0 0 0 3px rgba(25, 179, 215, 0.15);
}
.ribology-contact__field textarea {
    resize: vertical;
    min-height: 140px;
}
.ribology-contact__submit {
    width: 100%;
    margin-top: 4px;
}
.ribology-contact__success {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: rgba(23, 121, 23, 0.07);
    border: 1px solid rgba(23, 121, 23, 0.25);
    border-radius: var(--ribology-radius-sm);
    color: var(--ribology-forest);
    font-weight: 600;
    font-size: 0.95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .ribology-contact__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}
@media (max-width: 782px) {
    .ribology-contact__inner {
        padding: 0 20px;
    }
    .ribology-contact__hero-inner {
        padding-top: 56px;
        padding-bottom: 56px;
    }
    .ribology-contact__body {
        padding: 48px 0 64px;
    }
    .ribology-contact__form-wrap {
        padding: 28px 22px 32px;
    }
}

/* ---------- Honour reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .ribology-contact *,
    .ribology-contact *::before,
    .ribology-contact *::after {
        transition: none !important;
    }
}
/* ===== end RIBOLOGY CONTACT PAGE ===== */

/* ============================================================
 * ABOUT PAGE HERO + CARDS — V3 HARD OVERRIDES
 * ------------------------------------------------------------
 * Added because earlier files could look unchanged when cached or
 * when older About rules were still winning in the cascade.
 * This block sits at the very end of style.css and uses the same
 * existing class names, but with higher specificity.
 * ============================================================ */

/* Hero: shorter, left-aligned glass panel */
.ribology-about .ribology-about__hero {
    min-height: clamp(390px, 35vw, 540px) !important;
    align-items: stretch !important;
    background:
        radial-gradient(circle at 18% 35%, rgba(25, 179, 215, 0.14) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(90deg, #06182b 0%, #0b223a 34%, var(--ribology-deep-navy) 58%, #1b598f 100%) !important;
}

.ribology-about .ribology-about__hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: clamp(32px, 4vw, 56px) !important;
    padding-right: clamp(18px, 4vw, 56px) !important;
    padding-bottom: clamp(42px, 5vw, 68px) !important;
    padding-left: clamp(24px, 5vw, 96px) !important;
    position: relative !important;
    z-index: 4 !important;
}

.ribology-about .ribology-about__hero-copy {
    width: min(100%, 590px) !important;
    max-width: 590px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: clamp(22px, 2.4vw, 32px) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.84) 0%, rgba(10, 29, 50, 0.66) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 14px 42px rgba(4, 12, 24, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
}

.ribology-about .ribology-about__hero-title {
    font-size: clamp(2rem, 3.6vw, 3.35rem) !important;
    line-height: 1.04 !important;
    max-width: 12ch !important;
    margin-bottom: 16px !important;
}

.ribology-about .ribology-about__hero-sub {
    font-size: clamp(0.98rem, 1.25vw, 1.12rem) !important;
    line-height: 1.58 !important;
    max-width: 48ch !important;
    margin-bottom: 24px !important;
}

.ribology-about .ribology-about__hero--has-image .ribology-about__bg {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 61% !important;
    z-index: 0 !important;
}

.ribology-about .ribology-about__hero--has-image .ribology-about__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.ribology-about .ribology-about__hero--has-image .ribology-about__hero-scrim {
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.96) 0%,
        rgba(6, 24, 43, 0.84) 20%,
        rgba(6, 24, 43, 0.52) 42%,
        rgba(6, 24, 43, 0.20) 64%,
        rgba(6, 24, 43, 0.08) 100%
    ) !important;
}

.ribology-about .ribology-about__hero::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 20% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(270deg, rgba(247, 249, 250, 0.82) 0%, rgba(247, 249, 250, 0) 76%) !important;
}

.ribology-about .ribology-about__hero-bottom-fade {
    height: 72px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 249, 250, 0.78) 100%) !important;
}

/* Hero buttons: both obvious on dark glass */
.ribology-about .ribology-about__hero .ribology-btn {
    min-height: 46px !important;
    padding: 14px 22px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
}

.ribology-about .ribology-about__hero .ribology-btn--primary {
    background: linear-gradient(135deg, var(--ribology-sky-blue) 0%, var(--ribology-sky-blue-dk) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(25, 179, 215, 0.98) !important;
    box-shadow: 0 12px 28px rgba(25, 179, 215, 0.30) !important;
}

.ribology-about .ribology-about__hero .ribology-btn--secondary {
    background: #fff !important;
    color: var(--ribology-deep-navy) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 12px 28px rgba(4, 12, 24, 0.22) !important;
}

.ribology-about .ribology-about__hero .ribology-btn--secondary:hover,
.ribology-about .ribology-about__hero .ribology-btn--secondary:focus-visible {
    background: rgba(255, 255, 255, 0.90) !important;
    color: var(--ribology-deep-navy) !important;
    transform: translateY(-2px) !important;
}

/* Mission section: image left of “Built by scientists tired of compromise” */
.ribology-about .ribology-about__mission-grid {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr) !important;
    gap: clamp(32px, 5vw, 72px) !important;
    align-items: center !important;
}

.ribology-about .ribology-about__mission-media {
    position: relative !important;
    min-height: clamp(360px, 32vw, 500px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: #06182b !important;
    box-shadow: 0 18px 46px rgba(23, 67, 121, 0.16) !important;
    border: 1px solid rgba(23, 67, 121, 0.10) !important;
}

.ribology-about .ribology-about__mission-media::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(6, 24, 43, 0.36) 0%, rgba(6, 24, 43, 0.04) 58%, rgba(247, 249, 250, 0.10) 100%) !important;
}

.ribology-about .ribology-about__mission-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Why researchers choose cards: image cards, taller, reveal text on hover */
.ribology-about .ribology-about__pillar-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.ribology-about .ribology-about__pillar {
    min-height: clamp(360px, 31vw, 440px) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #06182b !important;
    border: 1px solid rgba(23, 67, 121, 0.14) !important;
    box-shadow: 0 12px 34px rgba(23, 67, 121, 0.13) !important;
    cursor: default !important;
}

.ribology-about .ribology-about__pillar-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transform: scale(1.01) !important;
    transition: transform 0.55s var(--ribology-ease), filter 0.35s var(--ribology-ease) !important;
}

.ribology-about .ribology-about__pillar-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        radial-gradient(circle at 25% 16%, rgba(25, 179, 215, 0.20) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.04) 0%, rgba(6, 24, 43, 0.38) 44%, rgba(6, 24, 43, 0.92) 100%) !important;
    transition: background 0.35s var(--ribology-ease) !important;
}

.ribology-about .ribology-about__pillar-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding: 28px 24px 26px !important;
    color: #fff !important;
}

.ribology-about .ribology-about__pillar-title {
    color: #fff !important;
    margin: 0 !important;
    max-width: 16ch !important;
    font-size: clamp(1.18rem, 1.5vw, 1.42rem) !important;
    line-height: 1.14 !important;
    text-shadow: 0 3px 18px rgba(5, 14, 26, 0.80) !important;
}

.ribology-about .ribology-about__pillar-desc {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transform: translateY(14px) !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.96rem !important;
    line-height: 1.58 !important;
    text-shadow: 0 2px 12px rgba(5, 14, 26, 0.65) !important;
    transition: max-height 0.38s var(--ribology-ease), opacity 0.28s var(--ribology-ease), transform 0.38s var(--ribology-ease), margin 0.38s var(--ribology-ease) !important;
}

.ribology-about .ribology-about__pillar:hover,
.ribology-about .ribology-about__pillar:focus-visible {
    transform: translateY(-5px) !important;
    box-shadow: 0 22px 56px rgba(23, 67, 121, 0.24) !important;
    border-color: rgba(25, 179, 215, 0.42) !important;
}

.ribology-about .ribology-about__pillar:hover .ribology-about__pillar-img,
.ribology-about .ribology-about__pillar:focus-visible .ribology-about__pillar-img {
    transform: scale(1.07) !important;
    filter: saturate(1.06) contrast(1.04) !important;
}

.ribology-about .ribology-about__pillar:hover .ribology-about__pillar-overlay,
.ribology-about .ribology-about__pillar:focus-visible .ribology-about__pillar-overlay {
    background:
        radial-gradient(circle at 25% 16%, rgba(25, 179, 215, 0.22) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.16) 0%, rgba(6, 24, 43, 0.62) 42%, rgba(6, 24, 43, 0.97) 100%) !important;
}

.ribology-about .ribology-about__pillar:hover .ribology-about__pillar-desc,
.ribology-about .ribology-about__pillar:focus-visible .ribology-about__pillar-desc {
    max-height: 190px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    margin-top: 12px !important;
}

@media (max-width: 960px) {
    .ribology-about .ribology-about__pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .ribology-about .ribology-about__mission-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 782px) {
    .ribology-about .ribology-about__hero {
        min-height: 500px !important;
    }
    .ribology-about .ribology-about__hero--has-image .ribology-about__bg {
        left: 0 !important;
        width: 100% !important;
    }
    .ribology-about .ribology-about__hero-inner {
        align-items: flex-end !important;
        padding: 64px 20px 52px !important;
    }
    .ribology-about .ribology-about__hero-copy {
        width: 100% !important;
        max-width: none !important;
        border-radius: 18px !important;
    }
    .ribology-about .ribology-about__hero::after {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .ribology-about .ribology-about__pillar-grid {
        grid-template-columns: 1fr !important;
    }
    .ribology-about .ribology-about__pillar {
        min-height: 320px !important;
    }
}

@media (hover: none) {
    .ribology-about .ribology-about__pillar-desc {
        max-height: 190px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        margin-top: 12px !important;
    }
}

/* ============================================================
 * ABOUT PAGE HERO + CARDS — V4 POSITION / LIGHTNESS / PATTERN TUNING
 * ============================================================ */

/* Hero: move image further right, shift glass panel right, and soften dark overlays */
.ribology-about .ribology-about__hero {
    min-height: clamp(380px, 33vw, 510px) !important;
}

.ribology-about .ribology-about__hero-inner {
    justify-content: flex-start !important;
    padding-left: clamp(22px, 3vw, 56px) !important;
    padding-right: clamp(18px, 3vw, 52px) !important;
}

.ribology-about .ribology-about__hero-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-left: clamp(42px, 14vw, 310px) !important;
    margin-right: 0 !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.76) 0%, rgba(10, 29, 50, 0.56) 100%) !important;
    box-shadow: 0 14px 42px rgba(4, 12, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.ribology-about .ribology-about__hero--has-image .ribology-about__bg {
    width: 57.5% !important;
    right: 0 !important;
}

.ribology-about .ribology-about__hero--has-image .ribology-about__bg-img {
    object-position: center center !important;
}

.ribology-about .ribology-about__hero--has-image .ribology-about__hero-scrim {
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.88) 0%,
        rgba(6, 24, 43, 0.72) 20%,
        rgba(6, 24, 43, 0.38) 42%,
        rgba(6, 24, 43, 0.14) 64%,
        rgba(6, 24, 43, 0.04) 100%
    ) !important;
}

/* Hero CTA row: keep both buttons on one line */
.ribology-about .ribology-about__hero .ribology-about__cta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
}

.ribology-about .ribology-about__hero .ribology-btn {
    min-height: 44px !important;
    padding: 13px 18px !important;
    font-size: 0.84rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    flex: 0 1 auto !important;
}

/* Why researchers choose: lighten image overlay and add subtle geometric backdrop */
.ribology-about .ribology-about__pillars {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%) !important;
}

.ribology-about .ribology-about__pillars::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 16% 18%, rgba(25, 179, 215, 0.10) 0%, rgba(25, 179, 215, 0) 26%),
        repeating-linear-gradient(60deg, rgba(6, 24, 43, 0.03) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(-60deg, rgba(6, 24, 43, 0.03) 0 1px, transparent 1px 32px);
    opacity: 0.85 !important;
    z-index: 0 !important;
}

.ribology-about .ribology-about__pillars > .ribology-about__inner {
    position: relative !important;
    z-index: 1 !important;
}

.ribology-about .ribology-about__pillar-overlay {
    background:
        radial-gradient(circle at 25% 16%, rgba(25, 179, 215, 0.18) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.03) 0%, rgba(6, 24, 43, 0.24) 44%, rgba(6, 24, 43, 0.74) 100%) !important;
}

.ribology-about .ribology-about__pillar:hover .ribology-about__pillar-overlay,
.ribology-about .ribology-about__pillar:focus-visible .ribology-about__pillar-overlay {
    background:
        radial-gradient(circle at 25% 16%, rgba(25, 179, 215, 0.20) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(180deg, rgba(6, 24, 43, 0.10) 0%, rgba(6, 24, 43, 0.42) 42%, rgba(6, 24, 43, 0.82) 100%) !important;
}

/* Australian innovation section: drop bullet list lower so it aligns more with body copy */
.ribology-about .ribology-about__made-grid {
    align-items: start !important;
}

.ribology-about .ribology-about__points {
    margin-top: clamp(34px, 4vw, 56px) !important;
}

@media (max-width: 1200px) {
    .ribology-about .ribology-about__hero-copy {
        margin-left: clamp(24px, 8vw, 160px) !important;
    }
    .ribology-about .ribology-about__hero .ribology-btn {
        font-size: 0.8rem !important;
        padding: 12px 16px !important;
    }
}

@media (max-width: 960px) {
    .ribology-about .ribology-about__hero-copy {
        margin-left: clamp(18px, 4vw, 40px) !important;
    }
    .ribology-about .ribology-about__hero--has-image .ribology-about__bg {
        width: 60% !important;
    }
}

@media (max-width: 782px) {
    .ribology-about .ribology-about__hero {
        min-height: 500px !important;
    }
    .ribology-about .ribology-about__hero .ribology-about__cta-row {
        flex-wrap: wrap !important;
    }
    .ribology-about .ribology-about__hero .ribology-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .ribology-about .ribology-about__hero-copy {
        margin-left: 0 !important;
    }
    .ribology-about .ribology-about__points {
        margin-top: 10px !important;
    }
}

/* ============================================================
 * CONTACT PAGE HERO — GLASS PANEL / RIGHT-IMAGE TREATMENT
 * ============================================================ */
.ribology-contact .ribology-contact__hero {
    position: relative !important;
    overflow: hidden !important;
    min-height: clamp(390px, 35vw, 530px) !important;
    color: var(--ribology-white) !important;
    background:
        radial-gradient(circle at 18% 35%, rgba(25, 179, 215, 0.14) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(90deg, #06182b 0%, #0b223a 34%, var(--ribology-deep-navy) 58%, #1b598f 100%) !important;
}

.ribology-contact .ribology-contact__hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: clamp(34px, 4vw, 56px) !important;
    padding-right: clamp(18px, 4vw, 56px) !important;
    padding-bottom: clamp(46px, 5vw, 72px) !important;
    padding-left: clamp(24px, 4vw, 68px) !important;
    position: relative !important;
    z-index: 4 !important;
}

.ribology-contact .ribology-contact__hero-copy {
    width: min(100%, 590px) !important;
    max-width: 590px !important;
    margin-left: clamp(34px, 9vw, 180px) !important;
    margin-right: 0 !important;
    padding: clamp(24px, 2.5vw, 34px) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.80) 0%, rgba(10, 29, 50, 0.60) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 14px 42px rgba(4, 12, 24, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
}

.ribology-contact .ribology-contact__title {
    font-size: clamp(2rem, 3.8vw, 3.3rem) !important;
    line-height: 1.04 !important;
    max-width: 12ch !important;
    margin: 0 0 16px !important;
    color: var(--ribology-white) !important;
}

.ribology-contact .ribology-contact__hero-sub {
    font-size: clamp(0.98rem, 1.25vw, 1.1rem) !important;
    line-height: 1.58 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 46ch !important;
    margin: 0 !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 59% !important;
    z-index: 0 !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__hero-scrim {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.90) 0%,
        rgba(6, 24, 43, 0.75) 20%,
        rgba(6, 24, 43, 0.40) 42%,
        rgba(6, 24, 43, 0.16) 64%,
        rgba(6, 24, 43, 0.04) 100%
    ) !important;
}

.ribology-contact .ribology-contact__hero::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 20% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    background: linear-gradient(270deg, rgba(247, 249, 250, 0.82) 0%, rgba(247, 249, 250, 0) 76%) !important;
}

.ribology-contact .ribology-contact__hero-bottom-fade {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 72px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 249, 250, 0.78) 100%) !important;
}

@media (max-width: 782px) {
    .ribology-contact .ribology-contact__hero {
        min-height: 500px !important;
    }
    .ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg {
        left: 0 !important;
        width: 100% !important;
    }
    .ribology-contact .ribology-contact__hero-inner {
        align-items: flex-end !important;
        padding: 64px 20px 52px !important;
    }
    .ribology-contact .ribology-contact__hero-copy {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        border-radius: 18px !important;
    }
    .ribology-contact .ribology-contact__hero::after {
        display: none !important;
    }
}

/* ============================================================
 * CONTACT PAGE HERO — V2 SHORTER HERO + NEW IMAGE TUNING
 * ============================================================ */
.ribology-contact .ribology-contact__hero {
    min-height: clamp(285px, 25vw, 395px) !important;
}

.ribology-contact .ribology-contact__hero-inner {
    padding-top: clamp(28px, 3vw, 42px) !important;
    padding-bottom: clamp(36px, 4vw, 52px) !important;
    padding-left: clamp(20px, 3.5vw, 58px) !important;
    padding-right: clamp(18px, 3vw, 50px) !important;
}

.ribology-contact .ribology-contact__hero-copy {
    max-width: 520px !important;
    width: min(100%, 520px) !important;
    margin-left: clamp(24px, 8vw, 155px) !important;
    padding: clamp(22px, 2.1vw, 30px) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.78) 0%, rgba(10, 29, 50, 0.58) 100%) !important;
}

.ribology-contact .ribology-contact__title {
    font-size: clamp(2rem, 3.15vw, 2.9rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
}

.ribology-contact .ribology-contact__hero-sub {
    font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
    line-height: 1.52 !important;
    max-width: 42ch !important;
}

.ribology-contact .ribology-contact__eyebrow {
    margin-bottom: 12px !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg {
    width: 62% !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg-img {
    object-position: center center !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__hero-scrim {
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.90) 0%,
        rgba(6, 24, 43, 0.72) 18%,
        rgba(6, 24, 43, 0.36) 40%,
        rgba(6, 24, 43, 0.12) 62%,
        rgba(6, 24, 43, 0.02) 100%
    ) !important;
}

.ribology-contact .ribology-contact__hero-bottom-fade {
    height: 48px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(247, 249, 250, 0.72) 100%) !important;
}

@media (max-width: 782px) {
    .ribology-contact .ribology-contact__hero {
        min-height: 430px !important;
    }
    .ribology-contact .ribology-contact__hero-copy {
        margin-left: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    .ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg {
        width: 100% !important;
    }
}

/* ============================================================
 * HOMEPAGE V14 — requested homepage layout refinements
 * ------------------------------------------------------------
 * Front hero CTA/height, switch header alignment, condensed
 * science cards, confidence CTA row, and RNA kit white-gradient
 * hero treatment.
 * ============================================================ */

/* 1. Front-page hero: slightly shorter, panel lower, CTA buttons clearer */
.ribology-home .ribology-home__hero {
    min-height: clamp(470px, 48vw, 660px) !important;
    padding-top: clamp(62px, 6vw, 86px) !important;
    padding-bottom: clamp(84px, 8vw, 108px) !important;
    align-items: center !important;
}

.ribology-home .ribology-home__hero-inner {
    transform: translateY(22px) !important;
}

.ribology-home .ribology-home__hero-copy {
    max-width: 650px !important;
    padding: clamp(24px, 2.6vw, 36px) !important;
}

.ribology-home .ribology-home__hero .ribology-home__cta-row {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

.ribology-home .ribology-home__hero .ribology-btn {
    min-height: 44px !important;
    padding: 13px 20px !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
}

.ribology-home .ribology-home__hero .ribology-btn--primary {
    background: linear-gradient(135deg, var(--ribology-sky-blue), var(--ribology-sky-blue-dk)) !important;
    border-color: rgba(25, 179, 215, 0.95) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(25, 179, 215, 0.26) !important;
}

.ribology-home .ribology-home__hero .ribology-btn--secondary {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
    color: var(--ribology-deep-navy) !important;
    box-shadow: 0 12px 28px rgba(4, 12, 24, 0.16) !important;
}

.ribology-home .ribology-home__hero .ribology-btn--secondary:hover,
.ribology-home .ribology-home__hero .ribology-btn--secondary:focus-visible {
    background: #fff !important;
    color: var(--ribology-deep-navy) !important;
    transform: translateY(-2px) !important;
}

/* 2 + 3. Head rows: single-line heading + right CTA, no switch blurb */
.ribology-home .ribology-home__head-row--single-line {
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(20px, 4vw, 56px) !important;
}

.ribology-home .ribology-home__head-row--single-line .ribology-home__head {
    flex: 1 1 auto !important;
    max-width: none !important;
}

.ribology-home .ribology-home__head-row--single-line .ribology-home__h2 {
    margin-bottom: 0 !important;
}

.ribology-home .ribology-home__head-row--single-line .ribology-home__head-cta-btn {
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

.ribology-home .ribology-home__switch .ribology-home__lead,
.ribology-home .ribology-home__eval .ribology-home__lead {
    display: none !important;
}

.ribology-home .ribology-home__ps-labels {
    width: 100% !important;
}

.ribology-home .ribology-home__ps-label--solution {
    justify-content: flex-end !important;
    justify-self: stretch !important;
    text-align: right !important;
    margin-left: auto !important;
    width: 100% !important;
}

/* 4. Science cards: heading beside icon to condense vertical space */
.ribology-home .ribology-home__bento-card {
    padding: clamp(22px, 2.5vw, 30px) !important;
}

.ribology-home .ribology-home__bento-step {
    margin-bottom: 12px !important;
}

.ribology-home .ribology-home__bento-top {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
}

.ribology-home .ribology-home__bento-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

.ribology-home .ribology-home__bento-icon svg {
    width: 23px !important;
    height: 23px !important;
}

.ribology-home .ribology-home__bento-name {
    margin: 0 !important;
    line-height: 1.16 !important;
}

/* 6. Evaluation section: confidence headline and CTA on same line */
.ribology-home .ribology-home__head-row--eval {
    margin-bottom: 34px !important;
}

.ribology-home .ribology-home__head-row--eval .ribology-home__eyebrow {
    margin-bottom: 10px !important;
}

.ribology-home .ribology-home__head-row--eval .ribology-home__h2 {
    padding-bottom: 14px !important;
}

/* 7. RNA Extraction Kit section: hero-style right image with a white gradient */
.ribology-home .ribology-home__products--hero {
    min-height: clamp(420px, 42vw, 560px) !important;
    display: flex !important;
    align-items: center !important;
    background:
        radial-gradient(circle at 18% 35%, rgba(25, 179, 215, 0.08) 0%, rgba(25, 179, 215, 0) 32%),
        linear-gradient(90deg, #ffffff 0%, var(--ribology-lab-white) 48%, #eef6fb 100%) !important;
    overflow: hidden !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__bg--right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 60% !important;
    z-index: 0 !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__bg--right .ribology-home__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center right !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__bg-scrim--white-left {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 34%,
        rgba(247, 249, 250, 0.94) 48%,
        rgba(247, 249, 250, 0.42) 66%,
        rgba(247, 249, 250, 0) 82%
    ) !important;
}

.ribology-home .ribology-home__products--hero::after {
    content: '' !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 72px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--ribology-lab-white) 100%) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__products-copy {
    max-width: 590px !important;
    padding: clamp(24px, 2.7vw, 38px) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86) 0%, rgba(247, 249, 250, 0.68) 100%) !important;
    border: 1px solid rgba(23, 67, 121, 0.12) !important;
    box-shadow: 0 18px 48px rgba(23, 67, 121, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__cta-row {
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

.ribology-home .ribology-home__products--hero .ribology-btn {
    white-space: nowrap !important;
}

@media (max-width: 860px) {
    .ribology-home .ribology-home__head-row--single-line {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
    }

    .ribology-home .ribology-home__head-row--single-line .ribology-home__head-cta-btn {
        margin-left: 0 !important;
    }

    .ribology-home .ribology-home__products--hero {
        min-height: unset !important;
        padding: 56px 0 !important;
    }

    .ribology-home .ribology-home__products--hero .ribology-home__bg--right {
        left: 0 !important;
        width: 100% !important;
        opacity: 0.28 !important;
    }

    .ribology-home .ribology-home__products--hero .ribology-home__bg-scrim--white-left {
        background: rgba(247, 249, 250, 0.90) !important;
    }

    .ribology-home .ribology-home__products--hero .ribology-home__products-copy {
        max-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .ribology-home .ribology-home__hero .ribology-home__cta-row,
    .ribology-home .ribology-home__products--hero .ribology-home__cta-row {
        flex-wrap: wrap !important;
    }

    .ribology-home .ribology-home__hero .ribology-btn,
    .ribology-home .ribology-home__products--hero .ribology-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .ribology-home .ribology-home__hero-inner {
        transform: translateY(10px) !important;
    }
}



/* ============================================================
 * HOMEPAGE V16 — LAYERED RIGHT-IMAGE HERO SYSTEM
 * ------------------------------------------------------------
 * Applies the same layered, full-width banner treatment to:
 *  - Main homepage hero
 *  - “The RNA Extraction Kit” homepage section
 * Keeps About/Contact overrides from the combined CSS intact.
 * ============================================================ */

/* Shared hero architecture */
.ribology-home .ribology-home__hero,
.ribology-home .ribology-home__products--hero {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    color: var(--ribology-white) !important;
    background:
        radial-gradient(circle at 18% 35%, rgba(25, 179, 215, 0.16) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(90deg, #06182b 0%, #0b223a 34%, var(--ribology-deep-navy) 58%, #1b598f 100%) !important;
}

/* Main homepage hero sizing */
.ribology-home .ribology-home__hero {
    min-height: clamp(470px, 46vw, 640px) !important;
    padding-top: clamp(48px, 5vw, 74px) !important;
    padding-bottom: clamp(78px, 7vw, 104px) !important;
}

/* RNA Extraction Kit hero sizing */
.ribology-home .ribology-home__products--hero {
    min-height: clamp(430px, 43vw, 580px) !important;
    padding: 0 !important;
}

/* Right-side image layer: main hero */
.ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 60% !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

.ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg .ribology-home__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Right-side image layer: RNA kit hero */
.ribology-home .ribology-home__products--hero .ribology-home__bg--right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 60% !important;
    z-index: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__bg--right .ribology-home__bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Dark left-to-right readability scrim over the image */
.ribology-home .ribology-home__hero--has-image .ribology-home__hero-scrim,
.ribology-home .ribology-home__products--hero .ribology-home__bg-scrim--white-left {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.94) 0%,
        rgba(6, 24, 43, 0.82) 20%,
        rgba(6, 24, 43, 0.50) 42%,
        rgba(6, 24, 43, 0.20) 64%,
        rgba(6, 24, 43, 0.06) 100%
    ) !important;
}

/* Inner content layer */
.ribology-home .ribology-home__hero-inner,
.ribology-home .ribology-home__products--hero .ribology-home__products-inner {
    width: 100% !important;
    max-width: var(--ribology-max-width) !important;
    min-height: inherit !important;
    margin: 0 auto !important;
    padding-left: clamp(20px, 4vw, 56px) !important;
    padding-right: clamp(20px, 4vw, 56px) !important;
    position: relative !important;
    z-index: 4 !important;
    transform: none !important;
}

.ribology-home .ribology-home__hero-inner {
    display: flex !important;
    align-items: center !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__products-inner {
    display: flex !important;
    align-items: center !important;
}

/* Dark navy glass panels */
.ribology-home .ribology-home__hero-copy,
.ribology-home .ribology-home__products--hero .ribology-home__products-copy {
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding: clamp(24px, 2.6vw, 36px) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.82) 0%, rgba(10, 29, 50, 0.62) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 16px 46px rgba(4, 12, 24, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
}

/* Text colour adjustments inside both glass panels */
.ribology-home .ribology-home__hero-title,
.ribology-home .ribology-home__products--hero .ribology-home__h2 {
    color: #fff !important;
    text-shadow: 0 4px 24px rgba(5, 14, 26, 0.54) !important;
}

.ribology-home .ribology-home__hero-sub,
.ribology-home .ribology-home__products--hero .ribology-home__lead {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 2px 14px rgba(5, 14, 26, 0.42) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__h2 {
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

/* RNA kit product details on dark glass */
.ribology-home .ribology-home__products--hero .ribology-home__kit-chip {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__products-copy:hover .ribology-home__kit-chip {
    background: rgba(25, 179, 215, 0.18) !important;
    border-color: rgba(25, 179, 215, 0.52) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-price-from {
    color: var(--ribology-sky-blue) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-price-amount,
.ribology-home .ribology-home__products--hero .ribology-home__kit-price-amount .woocommerce-Price-amount,
.ribology-home .ribology-home__products--hero .ribology-home__kit-price-amount bdi {
    color: #fff !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-price-tax {
    color: rgba(255, 255, 255, 0.74) !important;
}

/* Buttons: bright primary + visible white secondary */
.ribology-home .ribology-home__hero .ribology-home__cta-row,
.ribology-home .ribology-home__products--hero .ribology-home__cta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

.ribology-home .ribology-home__hero .ribology-btn,
.ribology-home .ribology-home__products--hero .ribology-btn {
    min-height: 44px !important;
    padding: 13px 20px !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
}

.ribology-home .ribology-home__hero .ribology-btn--primary,
.ribology-home .ribology-home__products--hero .ribology-btn--primary {
    background: linear-gradient(135deg, var(--ribology-sky-blue), var(--ribology-sky-blue-dk)) !important;
    border-color: rgba(25, 179, 215, 0.95) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(25, 179, 215, 0.28) !important;
}

.ribology-home .ribology-home__hero .ribology-btn--secondary,
.ribology-home .ribology-home__products--hero .ribology-btn--secondary {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
    color: var(--ribology-deep-navy) !important;
    box-shadow: 0 12px 28px rgba(4, 12, 24, 0.18) !important;
}

.ribology-home .ribology-home__hero .ribology-btn--primary:hover,
.ribology-home .ribology-home__hero .ribology-btn--primary:focus-visible,
.ribology-home .ribology-home__products--hero .ribology-btn--primary:hover,
.ribology-home .ribology-home__products--hero .ribology-btn--primary:focus-visible,
.ribology-home .ribology-home__hero .ribology-btn--secondary:hover,
.ribology-home .ribology-home__hero .ribology-btn--secondary:focus-visible,
.ribology-home .ribology-home__products--hero .ribology-btn--secondary:hover,
.ribology-home .ribology-home__products--hero .ribology-btn--secondary:focus-visible {
    transform: translateY(-2px) !important;
}

/* Bottom fades into the following page background */
.ribology-home .ribology-home__hero-fade {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 82px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(247, 249, 250, 0) 0%, var(--ribology-lab-white) 100%) !important;
}

.ribology-home .ribology-home__products--hero::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 82px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(247, 249, 250, 0) 0%, var(--ribology-lab-white) 100%) !important;
}

/* Right-edge fades so the image does not stop abruptly */
.ribology-home .ribology-home__hero::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 18% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(270deg, rgba(247, 249, 250, 0.78) 0%, rgba(247, 249, 250, 0) 76%) !important;
}

.ribology-home .ribology-home__products--hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 18% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(270deg, rgba(247, 249, 250, 0.78) 0%, rgba(247, 249, 250, 0) 76%) !important;
}

@media (max-width: 960px) {
    .ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg,
    .ribology-home .ribology-home__products--hero .ribology-home__bg--right {
        left: 0 !important;
        width: 100% !important;
        opacity: 0.42 !important;
    }

    .ribology-home .ribology-home__hero--has-image .ribology-home__hero-scrim,
    .ribology-home .ribology-home__products--hero .ribology-home__bg-scrim--white-left {
        background: rgba(6, 24, 43, 0.78) !important;
    }

    .ribology-home .ribology-home__hero::after,
    .ribology-home .ribology-home__products--hero::before {
        display: none !important;
    }

    .ribology-home .ribology-home__hero-copy,
    .ribology-home .ribology-home__products--hero .ribology-home__products-copy {
        max-width: 100% !important;
    }
}

@media (max-width: 560px) {
    .ribology-home .ribology-home__hero,
    .ribology-home .ribology-home__products--hero {
        min-height: auto !important;
        padding-top: 56px !important;
        padding-bottom: 76px !important;
    }

    .ribology-home .ribology-home__hero .ribology-home__cta-row,
    .ribology-home .ribology-home__products--hero .ribology-home__cta-row {
        flex-wrap: wrap !important;
    }

    .ribology-home .ribology-home__hero .ribology-btn,
    .ribology-home .ribology-home__products--hero .ribology-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
 * HOMEPAGE V17 — HERO HEIGHT / SOFT JOINS / LIGHT KIT PANEL / SUPPORT GLASS
 * ------------------------------------------------------------
 * Keeps previous About, Contact and homepage V16 work, then tunes:
 *  - main hero height and image/navy blur join
 *  - hero CTA labels/links handled in front-page-home-v17.php
 *  - solution label alignment over the right card column
 *  - RNA kit section light glass panel + white/grey gradient
 *  - support section glass panel
 * ============================================================ */

/* Main hero: reduce height and keep the panel slightly lower without feeling tall */
.ribology-home .ribology-home__hero {
    min-height: clamp(395px, 34vw, 520px) !important;
    padding-top: clamp(34px, 3.6vw, 56px) !important;
    padding-bottom: clamp(58px, 5vw, 78px) !important;
}

.ribology-home .ribology-home__hero-inner {
    align-items: center !important;
    transform: translateY(10px) !important;
}

.ribology-home .ribology-home__hero-copy {
    max-width: 600px !important;
    padding: clamp(22px, 2.25vw, 32px) !important;
}

.ribology-home .ribology-home__hero-title {
    font-size: clamp(2rem, 3.45vw, 3.35rem) !important;
    line-height: 1.04 !important;
}

.ribology-home .ribology-home__hero-sub {
    font-size: clamp(0.98rem, 1.15vw, 1.1rem) !important;
    line-height: 1.55 !important;
}

/* Main hero: blur/feather the boundary between the navy field and the right image */
.ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg::before {
    content: '' !important;
    position: absolute !important;
    top: -8% !important;
    bottom: -8% !important;
    left: -2px !important;
    width: 30% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.98) 0%,
        rgba(6, 24, 43, 0.76) 34%,
        rgba(6, 24, 43, 0.34) 66%,
        rgba(6, 24, 43, 0) 100%
    ) !important;
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

.ribology-home .ribology-home__hero--has-image .ribology-home__hero-scrim {
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.92) 0%,
        rgba(6, 24, 43, 0.76) 21%,
        rgba(6, 24, 43, 0.46) 42%,
        rgba(6, 24, 43, 0.18) 64%,
        rgba(6, 24, 43, 0.04) 100%
    ) !important;
}

/* Keep hero buttons on one line and readable */
.ribology-home .ribology-home__hero .ribology-home__cta-row {
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

.ribology-home .ribology-home__hero .ribology-btn {
    padding: 13px 18px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
}

/* Fix “The Ribology solution” label: place it in the right grid column above the blue cards */
.ribology-home .ribology-home__ps-labels {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: center !important;
}

.ribology-home .ribology-home__ps-label--problem {
    grid-column: 1 !important;
    justify-self: start !important;
}

.ribology-home .ribology-home__ps-label--solution {
    grid-column: 3 !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-left: 0 !important;
    text-align: right !important;
}

/* RNA Extraction Kit: make this a light/white version of the hero treatment */
.ribology-home .ribology-home__products--hero {
    min-height: clamp(400px, 38vw, 540px) !important;
    color: var(--ribology-deep-navy) !important;
    background:
        radial-gradient(circle at 16% 35%, rgba(25, 179, 215, 0.10) 0%, rgba(25, 179, 215, 0) 34%),
        linear-gradient(90deg, #ffffff 0%, #f7f9fa 46%, #edf5fa 100%) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__bg-scrim--white-left {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.96) 28%,
        rgba(247, 249, 250, 0.82) 45%,
        rgba(247, 249, 250, 0.34) 64%,
        rgba(247, 249, 250, 0) 86%
    ) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__bg--right::before {
    content: '' !important;
    position: absolute !important;
    top: -8% !important;
    bottom: -8% !important;
    left: -2px !important;
    width: 32% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(247, 249, 250, 0.82) 34%,
        rgba(247, 249, 250, 0.42) 66%,
        rgba(247, 249, 250, 0) 100%
    ) !important;
    backdrop-filter: blur(8px) saturate(116%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(116%) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__products-copy {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(247, 249, 250, 0.76) 100%) !important;
    border: 1px solid rgba(23, 67, 121, 0.14) !important;
    box-shadow: 0 18px 46px rgba(23, 67, 121, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    color: var(--ribology-charcoal) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__h2 {
    color: var(--ribology-deep-navy) !important;
    text-shadow: none !important;
    border-bottom-color: rgba(23, 67, 121, 0.13) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__lead {
    color: var(--ribology-charcoal) !important;
    text-shadow: none !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-chip {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(23, 67, 121, 0.16) !important;
    color: var(--ribology-deep-navy) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__products-copy:hover .ribology-home__kit-chip {
    background: rgba(25, 179, 215, 0.08) !important;
    border-color: rgba(25, 179, 215, 0.38) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-price-from {
    color: var(--ribology-sky-blue-dk) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-price-amount,
.ribology-home .ribology-home__products--hero .ribology-home__kit-price-amount .woocommerce-Price-amount,
.ribology-home .ribology-home__products--hero .ribology-home__kit-price-amount bdi {
    color: var(--ribology-deep-navy) !important;
}

.ribology-home .ribology-home__products--hero .ribology-home__kit-price-tax {
    color: var(--ribology-charcoal-lt) !important;
}

.ribology-home .ribology-home__products--hero .ribology-btn--primary {
    background: var(--ribology-deep-navy) !important;
    border-color: var(--ribology-deep-navy) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(23, 67, 121, 0.22) !important;
}

.ribology-home .ribology-home__products--hero .ribology-btn--primary:hover,
.ribology-home .ribology-home__products--hero .ribology-btn--primary:focus-visible {
    background: var(--ribology-deep-navy-dk) !important;
    border-color: var(--ribology-deep-navy-dk) !important;
}

.ribology-home .ribology-home__products--hero .ribology-btn--secondary {
    background: #fff !important;
    border-color: rgba(23, 67, 121, 0.28) !important;
    color: var(--ribology-deep-navy) !important;
    box-shadow: 0 10px 24px rgba(23, 67, 121, 0.11) !important;
}

/* Support section: glass panel for text/resources */
.ribology-home .ribology-home__support-copy {
    max-width: 620px !important;
    padding: clamp(24px, 2.6vw, 36px) !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.82) 0%, rgba(10, 29, 50, 0.62) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 16px 46px rgba(4, 12, 24, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
}

.ribology-home .ribology-home__support-copy .ribology-home__head {
    margin-bottom: 24px !important;
}

.ribology-home .ribology-home__support-copy .ribology-home__resources--invert a {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

.ribology-home .ribology-home__support-copy .ribology-home__resources--invert a:hover,
.ribology-home .ribology-home__support-copy .ribology-home__resources--invert a:focus-visible {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(25, 179, 215, 0.44) !important;
}

@media (max-width: 960px) {
    .ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg::before,
    .ribology-home .ribology-home__products--hero .ribology-home__bg--right::before {
        display: none !important;
    }

    .ribology-home .ribology-home__ps-label--solution {
        grid-column: auto !important;
        justify-self: end !important;
        width: auto !important;
    }
}

@media (max-width: 560px) {
    .ribology-home .ribology-home__hero {
        min-height: auto !important;
        padding-top: 48px !important;
        padding-bottom: 68px !important;
    }

    .ribology-home .ribology-home__hero .ribology-home__cta-row,
    .ribology-home .ribology-home__products--hero .ribology-home__cta-row {
        flex-wrap: wrap !important;
    }

    .ribology-home .ribology-home__hero .ribology-btn,
    .ribology-home .ribology-home__products--hero .ribology-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
 * HOMEPAGE V18 — HERO TUNING / GEOMETRIC DETAIL / JOIN REFINEMENT
 * ============================================================ */

/* Main hero: shorter overall banner */
.ribology-home .ribology-home__hero {
    min-height: clamp(410px, 40vw, 560px) !important;
    padding-top: clamp(38px, 4vw, 58px) !important;
    padding-bottom: clamp(64px, 6vw, 88px) !important;
}

/* Main hero: subtle geometric texture on the left so the blank area feels intentional */
.ribology-home .ribology-home__hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: min(56%, 760px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 18% 26%, rgba(25, 179, 215, 0.16) 0%, rgba(25, 179, 215, 0) 20%),
        radial-gradient(circle at 34% 68%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 100%),
        linear-gradient(60deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 100%),
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 86px),
        repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 86px);
    opacity: 0.85 !important;
}

/* Keep content above the geometric texture */
.ribology-home .ribology-home__hero-inner,
.ribology-home .ribology-home__hero-copy {
    position: relative !important;
    z-index: 4 !important;
}

/* Main hero image: zoom in slightly so the product feels more prominent */
.ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg .ribology-home__bg-img {
    object-position: 58% center !important;
    transform: scale(1.09) !important;
    transform-origin: 74% 50% !important;
}

/* Main hero: soften the hard seam with a blurred transition band between navy and image */
.ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg::before {
    content: '' !important;
    position: absolute !important;
    top: -8% !important;
    bottom: -8% !important;
    left: -34px !important;
    width: 128px !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(8, 28, 48, 0.84) 0%, rgba(8, 28, 48, 0.64) 34%, rgba(8, 28, 48, 0.18) 74%, rgba(8, 28, 48, 0) 100%) !important;
    filter: blur(18px) !important;
}

/* Tighten the readability scrim slightly so the transition still feels premium but not muddy */
.ribology-home .ribology-home__hero--has-image .ribology-home__hero-scrim {
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.95) 0%,
        rgba(6, 24, 43, 0.82) 17%,
        rgba(6, 24, 43, 0.48) 38%,
        rgba(6, 24, 43, 0.18) 58%,
        rgba(6, 24, 43, 0.05) 100%
    ) !important;
}

/* Why labs switch: force the solution label into the right grid column above the blue cards */
.ribology-home .ribology-home__ps-labels {
    grid-template-columns: 1fr 56px 1fr !important;
}

.ribology-home .ribology-home__ps-label--problem {
    grid-column: 1 !important;
}

.ribology-home .ribology-home__ps-label--solution {
    grid-column: 3 !important;
    justify-self: end !important;
    text-align: right !important;
    justify-content: flex-end !important;
    padding-right: 2px !important;
}

/* RNA Extraction Kit: keep the light glass panel, but remove the previously softened image/colour join */
.ribology-home .ribology-home__products--hero .ribology-home__bg-scrim--white-left {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 49%,
        rgba(247, 249, 250, 0.98) 49%,
        rgba(247, 249, 250, 0.98) 54%,
        rgba(247, 249, 250, 0.22) 63%,
        rgba(247, 249, 250, 0) 78%
    ) !important;
}

/* Also remove the desktop right-edge haze from the RNA kit hero so the section feels cleaner */
.ribology-home .ribology-home__products--hero::before {
    background: linear-gradient(270deg, rgba(247, 249, 250, 0.48) 0%, rgba(247, 249, 250, 0) 76%) !important;
}

@media (max-width: 960px) {
    .ribology-home .ribology-home__hero::before {
        width: 100% !important;
        opacity: 0.55 !important;
    }

    .ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg .ribology-home__bg-img {
        transform: scale(1.04) !important;
        object-position: center center !important;
    }

    .ribology-home .ribology-home__hero--has-image .ribology-home__hero-bg::before {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .ribology-home .ribology-home__hero {
        padding-top: 50px !important;
        padding-bottom: 72px !important;
    }
}


/* ============================================================
 * CONTACT PAGE v10 — DIAGNOSTIC FINAL OVERRIDE
 * ------------------------------------------------------------
 * Why this exists:
 * Earlier contact-hero rules force the panel left via:
 *   .ribology-contact__hero-inner { display:flex; justify-content:flex-start; padding-left:... }
 *   .ribology-contact__hero-copy  { width:520px; margin-left:clamp(24px,8vw,155px); }
 * Because those rules use !important, normal width/margin edits do not win.
 * This block deliberately removes the flex positioning and pins only the glass
 * Contact Us card into the intended hero area with absolute positioning.
 * ============================================================ */

.ribology-contact .ribology-contact__hero {
    min-height: clamp(430px, 30vw, 560px) !important;
}

/* Let the hero become a positioning canvas instead of a flex row. */
.ribology-contact .ribology-contact__hero-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 4 !important;
}

/* Keep the background image on the right. */
.ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg {
    left: auto !important;
    right: 0 !important;
    width: 62% !important;
}

.ribology-contact .ribology-contact__hero--has-image .ribology-contact__bg-img {
    object-position: center center !important;
}

/* Main scrim stays light enough to show the image, but does not act as the blur panel. */
.ribology-contact .ribology-contact__hero--has-image .ribology-contact__hero-scrim {
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.92) 0%,
        rgba(6, 24, 43, 0.78) 24%,
        rgba(6, 24, 43, 0.38) 45%,
        rgba(6, 24, 43, 0.12) 62%,
        rgba(6, 24, 43, 0.03) 100%
    ) !important;
}

/* The join blur is limited to around 15% of the hero width. */
.ribology-contact .ribology-contact__hero--has-image .ribology-contact__hero-scrim::after {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    bottom: -18px !important;
    left: 41% !important;
    width: 15% !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(6, 24, 43, 0.50) 0%,
        rgba(9, 37, 66, 0.26) 52%,
        rgba(6, 24, 43, 0.04) 100%
    ) !important;
    filter: blur(8px) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

/* This is the actual glass Contact Us panel position. It is no longer controlled by flex or margin-left. */
.ribology-contact .ribology-contact__hero-copy {
    position: absolute !important;
    top: 50% !important;
    left: clamp(340px, 22vw, 410px) !important;
    transform: translateY(-50%) !important;
    width: min(650px, calc(100vw - clamp(340px, 22vw, 410px) - 48px)) !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: clamp(30px, 2.4vw, 42px) !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(10, 29, 50, 0.82) 0%, rgba(10, 29, 50, 0.60) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 14px 42px rgba(4, 12, 24, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
    z-index: 5 !important;
}

/* Slightly larger text, without changing the button sizing. */
.ribology-contact .ribology-contact__eyebrow {
    font-size: 0.84rem !important;
    margin-bottom: 14px !important;
}

.ribology-contact .ribology-contact__title {
    font-size: clamp(2.45rem, 4.2vw, 3.35rem) !important;
    line-height: 1.02 !important;
    max-width: none !important;
    margin: 0 0 20px !important;
    color: var(--ribology-white) !important;
}

.ribology-contact .ribology-contact__title span {
    color: var(--ribology-sky-blue) !important;
}

.ribology-contact .ribology-contact__hero-sub {
    font-size: clamp(1.02rem, 1.1vw, 1.14rem) !important;
    line-height: 1.68 !important;
    max-width: 46ch !important;
    color: rgba(255, 255, 255, 0.90) !important;
    margin: 0 !important;
}

.ribology-contact .ribology-contact__hero-spacer {
    height: clamp(15px, 1.3vw, 23px) !important;
}

/* Match Support Hub hero CTA sizing and feel. */
.ribology-contact .hero-ctas,
.ribology-contact .ribology-contact__hero-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.875rem !important;
    align-items: center !important;
    margin-top: 2rem !important;
    width: 100% !important;
}

.ribology-contact .btn-hero-primary,
.ribology-contact .ribology-contact__hero-actions .ribology-btn--primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background: #19B3D7 !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 9px !important;
    border: none !important;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: 0 6px 20px rgba(41,182,216,0.4) !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.ribology-contact .btn-hero-primary:hover,
.ribology-contact .btn-hero-primary:focus-visible,
.ribology-contact .ribology-contact__hero-actions .ribology-btn--primary:hover,
.ribology-contact .ribology-contact__hero-actions .ribology-btn--primary:focus-visible {
    background: #20a0c0 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

.ribology-contact .btn-hero-outline,
.ribology-contact .ribology-contact__hero-actions .ribology-btn--secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.92) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.ribology-contact .btn-hero-outline:hover,
.ribology-contact .btn-hero-outline:focus-visible,
.ribology-contact .ribology-contact__hero-actions .ribology-btn--secondary:hover,
.ribology-contact .ribology-contact__hero-actions .ribology-btn--secondary:focus-visible {
    background: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.98) !important;
    transform: none !important;
}

.ribology-contact .btn-hero-primary svg,
.ribology-contact .btn-hero-outline svg,
.ribology-contact .ribology-contact__hero-btn-icon,
.ribology-contact .ribology-contact__hero-btn-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

/* Wider message form, slimmer left details panel. */
.ribology-contact .ribology-contact__grid {
    max-width: 1280px !important;
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr) !important;
    gap: clamp(28px, 4vw, 52px) !important;
}

.ribology-contact .ribology-contact__details {
    max-width: 320px !important;
}

.ribology-contact .ribology-contact__form-wrap {
    width: 100% !important;
}

@media (max-width: 1280px) {
    .ribology-contact .ribology-contact__hero-copy {
        left: clamp(250px, 20vw, 340px) !important;
        width: min(620px, calc(100vw - clamp(250px, 20vw, 340px) - 36px)) !important;
        max-width: 620px !important;
        padding: 30px !important;
    }

    .ribology-contact .ribology-contact__title {
        font-size: clamp(2.3rem, 4vw, 3rem) !important;
    }
}

@media (max-width: 980px) {
    .ribology-contact .ribology-contact__hero-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40px 22px !important;
    }

    .ribology-contact .ribology-contact__hero-copy {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    .ribology-contact .hero-ctas,
    .ribology-contact .ribology-contact__hero-actions {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 900px) {
    .ribology-contact .ribology-contact__grid {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
    }

    .ribology-contact .ribology-contact__details {
        max-width: none !important;
    }
}

@media (max-width: 640px) {
    .ribology-contact .ribology-contact__hero-copy {
        padding: 24px !important;
        border-radius: 18px !important;
    }

    .ribology-contact .ribology-contact__title {
        font-size: 2.25rem !important;
    }

    .ribology-contact .hero-ctas,
    .ribology-contact .ribology-contact__hero-actions {
        width: 100% !important;
        gap: 0.75rem !important;
    }

    .ribology-contact .btn-hero-primary,
    .ribology-contact .btn-hero-outline,
    .ribology-contact .ribology-contact__hero-actions .ribology-btn--primary,
    .ribology-contact .ribology-contact__hero-actions .ribology-btn--secondary {
        width: 100% !important;
        justify-content: center !important;
    }

    .ribology-contact .ribology-contact__hero--has-image .ribology-contact__hero-scrim::after {
        display: none !important;
    }
}


/* ============================================================
 * RIBOLOGY SHOP — Product-panel clarity update v1.9.0
 * ------------------------------------------------------------
 * Keeps the top portal/tiles untouched, removes the product-panel
 * hero-image clutter, and makes the mobile filter strip icon-only.
 * ============================================================ */

/* Product panels: clean, light laboratory backdrop instead of hero imagery */
.ribology-shop__panel {
    background:
        radial-gradient(circle at 14% 10%, rgba(25, 179, 215, 0.10) 0%, rgba(25, 179, 215, 0) 30%),
        radial-gradient(circle at 86% 8%, rgba(23, 67, 121, 0.07) 0%, rgba(23, 67, 121, 0) 34%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fa 46%, #ffffff 100%) !important;
}

.ribology-shop__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(23, 67, 121, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 67, 121, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.38;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.ribology-shop__panel::after {
    content: '';
    position: absolute;
    top: 42px;
    right: -230px;
    z-index: 0;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(25, 179, 215, 0.11) 0%, rgba(25, 179, 215, 0) 66%);
}

.ribology-shop__panel--split::after {
    left: -240px;
    right: auto;
    top: 96px;
    background: radial-gradient(circle, rgba(23, 67, 121, 0.08) 0%, rgba(23, 67, 121, 0) 68%);
}

/* Defensive: no panel-level image backdrops load or display. Portal tiles are unaffected. */
.ribology-shop__panel > .ribology-shop__hero-bg,
.ribology-shop__panel > .ribology-shop__hero-ov {
    display: none !important;
    background-image: none !important;
}

/* Product-panel header card: more solid, less glass, better text contrast */
.ribology-shop__panel .ribology-shop__sec-head {
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(23, 67, 121, 0.11) !important;
    box-shadow: 0 14px 36px rgba(23, 67, 121, 0.08) !important;
}

/* Pricing cards: cleaner lift on a calmer background */
.ribology-shop__tier {
    border-color: rgba(23, 67, 121, 0.12) !important;
    box-shadow: 0 14px 34px rgba(23, 67, 121, 0.10) !important;
}
.ribology-shop__tier:hover {
    box-shadow: 0 22px 48px rgba(23, 67, 121, 0.18) !important;
}

/* Buffer / consumable rows: white cards instead of transparent glass over images */
.ribology-shop__row {
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(23, 67, 121, 0.12) !important;
    box-shadow: 0 10px 26px rgba(23, 67, 121, 0.08) !important;
}
.ribology-shop__row:hover {
    box-shadow: 0 18px 42px rgba(23, 67, 121, 0.16) !important;
}

.ribology-shop__cta-row {
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(23, 67, 121, 0.11) !important;
    box-shadow: 0 12px 30px rgba(23, 67, 121, 0.08) !important;
}

/* Mobile: icon-only filters so all three fit without horizontal swiping */
@media (max-width: 760px) {
    .ribology-shop__tabbar .ribology-shop__inner {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
        padding: 10px 12px !important;
        overflow: visible !important;
        justify-content: initial !important;
        flex-wrap: nowrap !important;
    }

    .ribology-shop .ribology-shop__tab {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 10px 8px !important;
        min-height: 46px;
        white-space: normal !important;
    }

    .ribology-shop .ribology-shop__tab svg {
        width: 22px !important;
        height: 22px !important;
    }

    .ribology-shop__tab-label,
    .ribology-shop__tab-ct {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media (max-width: 420px) {
    .ribology-shop__tabbar .ribology-shop__inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 7px !important;
    }

    .ribology-shop .ribology-shop__tab {
        min-height: 44px;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ============================================================
 * RIBOLOGY SHOP — Filtered-section heading cleanup v1.9.1
 * ------------------------------------------------------------
 * Removes the boxed header treatment inside the Kits/Buffers/
 * Consumables panels so the product cards remain the primary
 * white containers on the light laboratory backdrop.
 * ============================================================ */

.ribology-shop__panel .ribology-shop__sec-head,
.ribology-shop__panel .ribology-shop__sec-head--center {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 20px !important;
    margin: 0 auto 34px !important;
    max-width: 920px !important;
    text-align: center !important;
}

.ribology-shop__panel .ribology-shop__sec-head::before,
.ribology-shop__panel .ribology-shop__sec-head--center::before {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: var(--ribology-sky-blue);
}

.ribology-shop__panel .ribology-shop__sec-head h2,
.ribology-shop__panel .ribology-shop__sec-head--center h2 {
    margin: 0 0 10px !important;
    color: var(--ribology-deep-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-shadow: none !important;
}

.ribology-shop__panel .ribology-shop__sec-head p,
.ribology-shop__panel .ribology-shop__sec-head--center p {
    margin: 0 auto !important;
    max-width: 760px !important;
    color: var(--ribology-charcoal-lt) !important;
    text-shadow: none !important;
}

@media (max-width: 760px) {
    .ribology-shop__panel .ribology-shop__sec-head,
    .ribology-shop__panel .ribology-shop__sec-head--center {
        padding: 0 10px !important;
        margin-bottom: 28px !important;
    }

    .ribology-shop__panel .ribology-shop__sec-head::before,
    .ribology-shop__panel .ribology-shop__sec-head--center::before {
        margin-bottom: 14px;
    }
}


/* ============================================================
 * RIBOLOGY SHOP — Popular cards + accent line refinement v1.9.2
 * ------------------------------------------------------------
 * Moves the filtered-panel accent line below the title/blurb and
 * gives the Lab favourites cards more width and breathing room.
 * ============================================================ */

/* Filtered product panels: cyan accent line below the text, not above it */
.ribology-shop__panel .ribology-shop__sec-head::before,
.ribology-shop__panel .ribology-shop__sec-head--center::before {
    content: none !important;
    display: none !important;
}

.ribology-shop__panel .ribology-shop__sec-head::after,
.ribology-shop__panel .ribology-shop__sec-head--center::after {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 999px;
    background: var(--ribology-sky-blue);
}

/* Lab favourites: place the same accent below the heading */
.ribology-shop__popular .ribology-shop__sec-head {
    margin-bottom: 42px !important;
}

.ribology-shop__popular .ribology-shop__sec-head::after {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    margin: 16px 0 0;
    border-radius: 999px;
    background: var(--ribology-sky-blue);
}

/* Lab favourites: wider cards with more breathing room */
.ribology-shop__popular .ribology-shop__fcards {
    gap: 30px !important;
    align-items: stretch;
}

.ribology-shop__popular .ribology-shop__fcard {
    flex: 0 1 350px !important;
    max-width: 370px !important;
    min-width: 330px;
}

.ribology-shop__popular .ribology-shop__fcard-body {
    padding: 18px 22px 22px !important;
}

.ribology-shop__popular .ribology-shop__fcard-name {
    font-size: 1.06rem !important;
}

.ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__actions {
    gap: 10px !important;
}

.ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__view {
    flex: 0 0 76px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__cart-form {
    flex: 1 1 auto !important;
}

.ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__add {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

@media (max-width: 1180px) {
    .ribology-shop__popular .ribology-shop__fcard {
        flex-basis: 330px !important;
        max-width: 360px !important;
        min-width: 300px;
    }
}

@media (max-width: 760px) {
    .ribology-shop__panel .ribology-shop__sec-head::after,
    .ribology-shop__panel .ribology-shop__sec-head--center::after {
        margin-top: 14px;
    }

    .ribology-shop__popular .ribology-shop__sec-head {
        margin-bottom: 30px !important;
    }

    .ribology-shop__popular .ribology-shop__fcards {
        gap: 18px !important;
    }

    .ribology-shop__popular .ribology-shop__fcard {
        width: 100%;
        max-width: 430px !important;
        min-width: 0;
        flex-basis: 100% !important;
    }
}

/* ============================================================
 * RIBOLOGY SHOP — Heading + popular-card final override v1.9.3
 * ------------------------------------------------------------
 * This is deliberately placed at the very end of the file so it
 * wins over the older glass-card header rules above.
 * ============================================================ */

/* Remove the boxed/glass treatment from ONLY the filtered product-panel headings. */
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head,
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head--center {
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto 36px !important;
    padding: 0 20px !important;
    text-align: center !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Disable earlier pseudo accent lines so the real span controls placement consistently. */
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head::before,
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head::after,
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head--center::before,
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head--center::after,
.ribology-shop .ribology-shop__popular .ribology-shop__sec-head::before,
.ribology-shop .ribology-shop__popular .ribology-shop__sec-head::after {
    content: none !important;
    display: none !important;
}

.ribology-shop .ribology-shop__panel .ribology-shop__sec-head h2,
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head--center h2 {
    margin: 0 0 10px !important;
    color: var(--ribology-deep-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-shadow: none !important;
}

.ribology-shop .ribology-shop__panel .ribology-shop__sec-head p,
.ribology-shop .ribology-shop__panel .ribology-shop__sec-head--center p {
    max-width: 760px !important;
    margin: 0 auto !important;
    color: var(--ribology-charcoal-lt) !important;
    text-shadow: none !important;
}

/* The requested subtle cyan accent line BELOW the heading/blurb. */
.ribology-shop .ribology-shop__head-accent {
    display: block !important;
    width: 56px !important;
    height: 3px !important;
    margin: 18px auto 0 !important;
    border-radius: 999px !important;
    background: var(--ribology-sky-blue) !important;
}

/* Lab favourites heading uses the same line, aligned to the left under the title. */
.ribology-shop .ribology-shop__popular .ribology-shop__sec-head {
    margin-bottom: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__head-accent,
.ribology-shop .ribology-shop__head-accent--left {
    margin: 16px 0 0 !important;
}

/* Lab favourites cards: wider and more relaxed. */
.ribology-shop .ribology-shop__popular .ribology-shop__fcards {
    gap: 34px !important;
    align-items: stretch !important;
    justify-content: center !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard {
    flex: 0 1 370px !important;
    width: 370px !important;
    max-width: 390px !important;
    min-width: 340px !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-body {
    padding: 20px 24px 24px !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-name {
    font-size: 1.08rem !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-foot {
    gap: 14px !important;
    padding-top: 18px !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__actions {
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__view {
    flex: 0 0 82px !important;
    min-width: 82px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__cart-form {
    flex: 1 1 auto !important;
}

.ribology-shop .ribology-shop__popular .ribology-shop__fcard-foot .ribology-shop__add {
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

@media (max-width: 1220px) {
    .ribology-shop .ribology-shop__popular .ribology-shop__fcard {
        flex-basis: 345px !important;
        width: 345px !important;
        max-width: 365px !important;
        min-width: 310px !important;
    }
}

@media (max-width: 760px) {
    .ribology-shop .ribology-shop__panel .ribology-shop__sec-head,
    .ribology-shop .ribology-shop__panel .ribology-shop__sec-head--center {
        padding: 0 14px !important;
        margin-bottom: 30px !important;
    }

    .ribology-shop .ribology-shop__head-accent {
        margin-top: 14px !important;
    }

    .ribology-shop .ribology-shop__popular .ribology-shop__sec-head {
        margin-bottom: 30px !important;
    }

    .ribology-shop .ribology-shop__popular .ribology-shop__fcards {
        gap: 20px !important;
    }

    .ribology-shop .ribology-shop__popular .ribology-shop__fcard {
        width: 100% !important;
        max-width: 440px !important;
        min-width: 0 !important;
        flex-basis: 100% !important;
    }
}


/* =========================================================
   v2.0.15 — Header mobile overflow + kit CTA refinement
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.ribology-header,
.ribology-header * {
    box-sizing: border-box;
}

.ribology-header__inner {
    width: 100%;
    min-width: 0;
}

.ribology-header__logo {
    flex: 0 0 auto;
    min-width: 128px;
}

.ribology-header__logo a {
    max-width: 100%;
}

.ribology-header__logo img {
    width: clamp(128px, 12vw, 180px) !important;
    height: auto !important;
    max-height: 34px;
    object-fit: contain;
    object-position: left center;
}

.ribology-header__utility {
    flex: 0 0 auto;
    min-width: 0;
}

.ribology-header__cta {
    padding-left: 22px;
    padding-right: 22px;
}

.ribology-header__menu a:hover,
.ribology-header__menu a:focus-visible,
.ribology-header__menu .current-menu-item > a,
.ribology-header__menu .current_page_item > a,
.ribology-header__menu .current-menu-ancestor > a {
    color: var(--ribology-deep-navy) !important;
}

.ribology-header__menu a::after {
    background: var(--ribology-deep-navy) !important;
}

.ribology-header__menu-toggle,
.ribology-header__menu-toggle:hover,
.ribology-header__menu-toggle:focus,
.ribology-header__menu-toggle:active {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--ribology-lab-white) !important;
    background-image: none !important;
    border: 1px solid var(--ribology-border) !important;
    border-radius: var(--ribology-radius-sm) !important;
    box-shadow: none !important;
    color: var(--ribology-deep-navy) !important;
    padding: 0 !important;
}

.ribology-header__menu-toggle span {
    background: var(--ribology-deep-navy) !important;
}

.ribology-header__menu-toggle:hover,
.ribology-header__menu-toggle:focus-visible {
    background: var(--ribology-deep-navy) !important;
    border-color: var(--ribology-deep-navy) !important;
}

.ribology-header__menu-toggle:hover span,
.ribology-header__menu-toggle:focus-visible span {
    background: var(--ribology-white) !important;
}

.ribology-header__menu-toggle:focus-visible {
    outline: 2px solid var(--ribology-sky-blue) !important;
    outline-offset: 2px;
}

/* Mobile sticky kit CTA */
.ribology-mobile-kit-cta {
    display: none;
}

@media (max-width: 960px) {
    :root {
        --ribology-header-h: 72px;
    }

    .ribology-header__inner {
        height: var(--ribology-header-h) !important;
        padding: 0 14px !important;
        gap: 10px !important;
        justify-content: space-between;
    }

    .ribology-header__logo {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden;
    }

    .ribology-header__logo a {
        max-width: 100%;
    }

    .ribology-header__logo img {
        width: 205px !important;
        height: auto !important;
        max-width: 58vw !important;
        max-height: 34px !important;
        object-fit: contain !important;
    }

    .ribology-header__utility {
        gap: 8px !important;
        margin-left: auto;
        flex-shrink: 0;
    }

    .ribology-header__search-toggle,
    .ribology-header__cta,
    .ribology-header.is-menu-open .ribology-header__utility .ribology-header__cta,
    .ribology-header.is-menu-open .ribology-header__cta {
        display: none !important;
    }

    .ribology-header__icon-btn,
    .ribology-header__menu-toggle {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px;
    }

    .ribology-header__cart-count {
        top: 2px;
        right: 2px;
    }

    .ribology-header.is-menu-open .ribology-header__nav {
        top: var(--ribology-header-h) !important;
        padding: 10px 18px 18px !important;
    }

    .ribology-header.is-menu-open .ribology-header__menu a {
        color: var(--ribology-charcoal) !important;
        border-bottom-color: var(--ribology-border) !important;
    }

    .ribology-header.is-menu-open .ribology-header__menu a:hover,
    .ribology-header.is-menu-open .ribology-header__menu a:focus-visible,
    .ribology-header.is-menu-open .ribology-header__menu .current-menu-item > a,
    .ribology-header.is-menu-open .ribology-header__menu .current_page_item > a {
        color: var(--ribology-deep-navy) !important;
        background: var(--ribology-lab-white) !important;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 6px;
    }

    .ribology-header.is-menu-open .ribology-header__mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--ribology-border);
    }

    .ribology-header__mobile-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 14px;
        border-radius: var(--ribology-radius-sm);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none !important;
        white-space: nowrap;
    }

    .ribology-header__mobile-action--primary {
        background: var(--ribology-deep-navy);
        border: 1px solid var(--ribology-deep-navy);
        color: var(--ribology-white) !important;
    }

    .ribology-header__mobile-action--secondary {
        background: var(--ribology-white);
        border: 1px solid var(--ribology-deep-navy);
        color: var(--ribology-deep-navy) !important;
    }

    .ribology-header__mobile-action--primary:hover,
    .ribology-header__mobile-action--primary:focus-visible {
        background: var(--ribology-deep-navy-dk);
        border-color: var(--ribology-deep-navy-dk);
        color: var(--ribology-white) !important;
    }

    .ribology-header__mobile-action--secondary:hover,
    .ribology-header__mobile-action--secondary:focus-visible {
        background: var(--ribology-lab-white);
        border-color: var(--ribology-deep-navy-dk);
        color: var(--ribology-deep-navy-dk) !important;
    }

    body.ribology-mobile-kit-cta-visible {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    .ribology-mobile-kit-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 12px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--ribology-border);
        box-shadow: 0 -10px 28px rgba(23, 67, 121, 0.12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .ribology-mobile-kit-cta.is-dismissed {
        display: none !important;
    }

    .ribology-mobile-kit-cta__copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.25;
    }

    .ribology-mobile-kit-cta__copy strong {
        color: var(--ribology-deep-navy);
        font-size: 0.9rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ribology-mobile-kit-cta__copy span {
        color: var(--ribology-charcoal-lt);
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ribology-mobile-kit-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 16px;
        border-radius: var(--ribology-radius-sm);
        background: var(--ribology-deep-navy);
        color: var(--ribology-white) !important;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(23, 67, 121, 0.16);
    }

    .ribology-mobile-kit-cta__button:hover,
    .ribology-mobile-kit-cta__button:focus-visible {
        background: var(--ribology-deep-navy-dk);
        color: var(--ribology-white) !important;
    }

    .ribology-mobile-kit-cta__close {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent !important;
        color: var(--ribology-charcoal) !important;
        font-size: 24px;
        line-height: 1;
        box-shadow: none !important;
        cursor: pointer;
    }

    .ribology-mobile-kit-cta__close:hover,
    .ribology-mobile-kit-cta__close:focus-visible {
        background: var(--ribology-lab-white) !important;
        color: var(--ribology-deep-navy) !important;
        outline: none;
    }
}

@media (max-width: 420px) {
    .ribology-header__inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ribology-header__logo {
        min-width: 0 !important;
    }

    .ribology-header__logo img {
        width: 190px !important;
        max-width: 56vw !important;
        max-height: 32px !important;
    }

    .ribology-header__utility {
        gap: 6px !important;
    }

    .ribology-mobile-kit-cta {
        grid-template-columns: minmax(0, 1fr) auto 28px;
        gap: 8px;
        padding-left: 10px;
        padding-right: 8px;
    }

    .ribology-mobile-kit-cta__button {
        min-height: 40px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 0.74rem;
    }

    .ribology-mobile-kit-cta__copy strong {
        font-size: 0.84rem;
    }

    .ribology-mobile-kit-cta__copy span {
        display: none;
    }
}

/* =========================================================
   v2.0.17 — Desktop logo balance + mobile menu CTA label
   ========================================================= */

@media (min-width: 961px) {
    .ribology-header__logo {
        min-width: 220px !important;
    }

    .ribology-header__logo img {
        width: clamp(210px, 13vw, 240px) !important;
        height: auto !important;
        max-height: 42px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }
}


/* =========================================================
   v2.0.18 — Desktop logo restoration + CTA vertical alignment
   ========================================================= */

@media (min-width: 961px) {
    .ribology-header__inner {
        align-items: center !important;
    }

    .ribology-header__logo {
        min-width: 300px !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .ribology-header__logo a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .ribology-header__logo img {
        width: 285px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .ribology-header__nav {
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .ribology-header__menu {
        align-items: center !important;
    }

    .ribology-header__utility {
        align-self: stretch !important;
        display: flex !important;
        align-items: center !important;
    }

    .ribology-header__cta {
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 22px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 961px) and (max-width: 1180px) {
    .ribology-header__logo {
        min-width: 260px !important;
    }

    .ribology-header__logo img {
        width: 250px !important;
    }

    .ribology-header__cta {
        padding-left: 18px !important;
        padding-right: 18px !important;
        font-size: 0.78rem !important;
    }
}


/* =========================================================
   HOMEPAGE REFORMAT v2 — sticky header, wider hero glass,
   product image strip, and final CTA button refinement
   ========================================================= */

/* 1. Keep the menu header pinned at the top on desktop and mobile. */
.ribology-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9997 !important;
}

html {
    scroll-padding-top: calc(var(--ribology-header-h, 88px) + 16px);
}

body.admin-bar .ribology-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .ribology-header {
        top: 46px !important;
    }
}

/* 2. Homepage hero: give the glass panel more horizontal breathing room. */
.ribology-home .ribology-home__hero-copy {
    width: min(100%, 780px) !important;
    max-width: 780px !important;
    padding: clamp(26px, 3vw, 42px) !important;
}

.ribology-home .ribology-home__hero-title {
    max-width: 12.5em !important;
}

.ribology-home .ribology-home__hero-sub {
    max-width: 64ch !important;
}

/* 3. Hero glass-panel CTA buttons: equal, larger, calmer spacing. */
.ribology-home .ribology-home__hero .ribology-home__cta-row {
    gap: 16px !important;
    margin-top: 26px !important;
}

.ribology-home .ribology-home__hero .ribology-btn {
    min-width: 230px !important;
    min-height: 54px !important;
    padding: 16px 30px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.055em !important;
}

/* 4 + 5. Product image strip: no text panel, full-width image, centre crop, light gradients. */
.ribology-home .ribology-home__product-strip.ribology-home__products--hero {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--ribology-lab-white) !important;
    color: inherit !important;
    line-height: 0 !important;
}

.ribology-home .ribology-home__product-strip.ribology-home__products--hero::before,
.ribology-home .ribology-home__product-strip.ribology-home__products--hero::after {
    display: none !important;
    content: none !important;
}

.ribology-home .ribology-home__product-strip-bg {
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    width: 100% !important;
    max-height: clamp(230px, 30vw, 420px) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #ffffff 0%, var(--ribology-lab-white) 100%) !important;
}

.ribology-home .ribology-home__product-strip-bg .ribology-home__bg-img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    display: block !important;
    flex: 0 0 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    opacity: 1 !important;
}

.ribology-home .ribology-home__product-strip-scrim {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg,
            rgba(247, 249, 250, 0.70) 0%,
            rgba(247, 249, 250, 0.18) 18%,
            rgba(247, 249, 250, 0.00) 36%,
            rgba(247, 249, 250, 0.00) 64%,
            rgba(247, 249, 250, 0.18) 82%,
            rgba(247, 249, 250, 0.70) 100%),
        linear-gradient(180deg,
            rgba(247, 249, 250, 0.82) 0%,
            rgba(247, 249, 250, 0.00) 20%,
            rgba(247, 249, 250, 0.00) 76%,
            rgba(247, 249, 250, 0.86) 100%) !important;
}

/* Give the process section a clean start after the image strip. */
.ribology-home .ribology-home__product-strip + .ribology-home__eval {
    padding-top: clamp(64px, 6vw, 88px) !important;
}

/* 6. Final CTA buttons: same size, with Talk to Us navy and white bordered. */
.ribology-home .ribology-home__final-card .ribology-home__cta-row {
    gap: 16px !important;
}

.ribology-home .ribology-home__final-card .ribology-btn {
    min-width: 230px !important;
    min-height: 54px !important;
    padding: 16px 30px !important;
    justify-content: center !important;
    text-align: center !important;
}

.ribology-home .ribology-home__final-card .ribology-home__final-contact-btn,
.ribology-home .ribology-home__final-card .ribology-btn--secondary.ribology-home__final-contact-btn {
    background: var(--ribology-deep-navy) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    color: var(--ribology-white) !important;
    box-shadow: 0 12px 30px rgba(4, 12, 24, 0.24) !important;
}

.ribology-home .ribology-home__final-card .ribology-home__final-contact-btn:hover,
.ribology-home .ribology-home__final-card .ribology-home__final-contact-btn:focus-visible {
    background: var(--ribology-deep-navy-dk) !important;
    border-color: var(--ribology-white) !important;
    color: var(--ribology-white) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 760px) {
    .ribology-home .ribology-home__hero-copy {
        width: 100% !important;
        max-width: none !important;
    }

    .ribology-home .ribology-home__hero .ribology-home__cta-row {
        flex-wrap: wrap !important;
    }

    .ribology-home .ribology-home__hero .ribology-btn,
    .ribology-home .ribology-home__final-card .ribology-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .ribology-home .ribology-home__product-strip-bg {
        max-height: clamp(170px, 42vw, 300px) !important;
    }

    .ribology-home .ribology-home__product-strip-bg .ribology-home__bg-img {
        width: 150% !important;
        flex-basis: 150% !important;
        margin-left: -25% !important;
    }
}

/* =========================================================
   HOMEPAGE REFORMAT v3 — requested refinements
   ---------------------------------------------------------
   Hero badge/buttons, sticky fixed header, trade section order,
   and trade badge row cleanup.
   ========================================================= */

/* 6. Make the site header stay visible while scrolling on desktop and mobile. */
:root {
    --ribology-fixed-header-offset: var(--ribology-header-h, 88px);
}

html {
    scroll-padding-top: calc(var(--ribology-fixed-header-offset) + 18px) !important;
}

body {
    padding-top: var(--ribology-fixed-header-offset) !important;
}

.ribology-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9998 !important;
}

body.admin-bar .ribology-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .ribology-header {
        top: 46px !important;
    }
}

@media (max-width: 480px) {
    :root {
        --ribology-header-h: 72px;
        --ribology-fixed-header-offset: 72px;
    }
}

/* 1. Hero badge: text only and no stretched pill width. */
.ribology-home .ribology-home__hero-badge {
    align-self: flex-start !important;
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

/* 3. More breathing room between hero headline and subtext. */
.ribology-home .ribology-home__hero-title {
    margin-bottom: 8px !important;
}

.ribology-home .ribology-home__hero-sub {
    margin-top: 2px !important;
}

/* 2. Hero CTAs: align to the right side of the glass panel. */
.ribology-home .ribology-home__hero .ribology-home__cta-row {
    width: 100% !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* 2. Shop All Products: navy button with white outline. */
.ribology-home .ribology-home__hero .ribology-btn--secondary {
    background: var(--ribology-deep-navy) !important;
    background-color: var(--ribology-deep-navy) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.96) !important;
    color: var(--ribology-white) !important;
    box-shadow: 0 12px 28px rgba(4, 12, 24, 0.22) !important;
}

.ribology-home .ribology-home__hero .ribology-btn--secondary:hover,
.ribology-home .ribology-home__hero .ribology-btn--secondary:focus-visible {
    background: var(--ribology-deep-navy-dk) !important;
    background-color: var(--ribology-deep-navy-dk) !important;
    border-color: var(--ribology-white) !important;
    color: var(--ribology-white) !important;
}

/* 5. Trade section badges: keep remaining badges in one tidy row on desktop. */
.ribology-home .ribology-home__account-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.ribology-home .ribology-home__account-badge {
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    .ribology-home .ribology-home__hero .ribology-home__cta-row {
        justify-content: stretch !important;
    }

    .ribology-home .ribology-home__account-badges {
        flex-wrap: wrap !important;
    }
}

/* =========================================================
   HOMEPAGE REFORMAT v4 — mobile process + science spacing fixes
   ---------------------------------------------------------
   Fixes:
   - Prevent timeline/process number markers from squashing on mobile.
   - Remove the large mobile whitespace in the Science section caused by
     the shared head-row flex-basis.
   ========================================================= */

/* 1. Process timeline circles: lock markers to a true circle at every breakpoint. */
.ribology-home .ribology-home__timeline-marker {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    flex: 0 0 52px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

.ribology-home .ribology-home__timeline-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

@media (max-width: 1024px) {
    .ribology-home .ribology-home__timeline-item {
        display: flex !important;
        align-items: flex-start !important;
    }

    .ribology-home .ribology-home__timeline-marker {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        flex-basis: 52px !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Keep the vertical connector line centred behind the locked marker. */
    .ribology-home .ribology-home__timeline::before,
    .ribology-home .ribology-home__timeline::after {
        left: 26px !important;
    }

    .ribology-home .ribology-home__timeline-arrow {
        left: 26px !important;
    }
}

/* 2. Science section mobile whitespace: remove inherited 420px flex-basis on stacked header. */
@media (max-width: 860px) {
    .ribology-home .ribology-home__science .ribology-home__head-row {
        gap: 22px !important;
        margin-bottom: 30px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-row .ribology-home__head {
        flex: 0 1 auto !important;
        min-height: 0 !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-cta-btn {
        align-self: flex-start !important;
        margin-top: 0 !important;
    }

    .ribology-home .ribology-home__science .ribology-home__bento {
        margin-top: 0 !important;
    }

    /* Keep the faded background as texture only, not a large visual gap. */
    .ribology-home .ribology-home__science .ribology-home__bg--faded {
        opacity: 0.055 !important;
    }
}

@media (max-width: 560px) {
    .ribology-home .ribology-home__science {
        padding-top: 52px !important;
        padding-bottom: 48px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-row {
        margin-bottom: 26px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__lead {
        max-width: 100% !important;
    }
}

/* =========================================================
   HOMEPAGE REFORMAT v5 — mobile science spacing + process markers
   ---------------------------------------------------------
   Fixes:
   - Force the Science mobile heading/CTA stack to render compactly,
     removing the large gap before the View Performance Data button.
   - Change Process timeline markers from circles to rounded squares on
     mobile while keeping the connector line centred.
   ========================================================= */

@media (max-width: 860px) {
    /* Make the Science header area a normal stacked block on mobile.
       This removes the inherited flex behaviour that was leaving the CTA
       far below the paragraph. */
    .ribology-home .ribology-home__science .ribology-home__head-row {
        display: block !important;
        gap: 0 !important;
        margin-bottom: 28px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-row .ribology-home__head {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 18px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-cta-btn {
        display: inline-flex !important;
        align-self: auto !important;
        margin: 0 !important;
        width: auto !important;
    }

    .ribology-home .ribology-home__science .ribology-home__bento {
        margin-top: 0 !important;
    }
}

@media (max-width: 560px) {
    .ribology-home .ribology-home__science {
        padding-top: 46px !important;
        padding-bottom: 44px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-row {
        margin-bottom: 24px !important;
    }

    .ribology-home .ribology-home__science .ribology-home__head-row .ribology-home__head {
        margin-bottom: 16px !important;
    }
}

@media (max-width: 1024px) {
    /* Process markers become rounded squares on tablet/mobile. */
    .ribology-home .ribology-home__timeline-marker {
        border-radius: 14px !important;
    }

    .ribology-home .ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(1) .ribology-home__timeline-marker,
    .ribology-home .ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(2) .ribology-home__timeline-marker,
    .ribology-home .ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(3) .ribology-home__timeline-marker,
    .ribology-home .ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item:nth-child(4) .ribology-home__timeline-marker {
        border-radius: 14px !important;
    }
}

/* =========================================================
   HOMEPAGE REFORMAT v6 — force mobile science compact + rounded-square process markers
   ---------------------------------------------------------
   This block is intentionally at the very end of the stylesheet.
   If the page still shows circular markers or a large gap before
   View Performance Data, the browser is not loading this CSS file.
   ========================================================= */

@media (max-width: 860px) {
    /* Science section: force heading, paragraph and CTA into a compact normal flow. */
    body .ribology-home .ribology-home__science {
        padding-top: 46px !important;
        padding-bottom: 44px !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__inner {
        display: block !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__head-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 16px !important;
        column-gap: 0 !important;
        align-items: start !important;
        justify-content: start !important;
        margin: 0 0 28px !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__head-row .ribology-home__head {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__lead {
        margin: 0 !important;
        max-width: 100% !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__head-cta-btn {
        display: inline-flex !important;
        width: auto !important;
        max-width: max-content !important;
        align-self: start !important;
        justify-self: start !important;
        margin: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__bento {
        margin-top: 0 !important;
    }

    /* Keep the background image as subtle texture only on mobile, not a huge visible block. */
    body .ribology-home .ribology-home__science .ribology-home__bg--faded {
        top: 130px !important;
        bottom: auto !important;
        height: 260px !important;
        opacity: 0.035 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 560px) {
    body .ribology-home .ribology-home__science {
        padding-top: 42px !important;
        padding-bottom: 40px !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__head-row {
        row-gap: 14px !important;
        margin-bottom: 24px !important;
    }

    body .ribology-home .ribology-home__science .ribology-home__bg--faded {
        top: 145px !important;
        height: 220px !important;
    }
}

@media (max-width: 1024px) {
    /* Evaluation/process markers: force rounded squares, including the animated visible states. */
    body .ribology-home .ribology-home__eval .ribology-home__timeline-marker,
    body .ribology-home .ribology-home__eval .ribology-home__timeline.is-visible .ribology-home__timeline-list .ribology-home__timeline-item .ribology-home__timeline-marker {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        flex: 0 0 52px !important;
        border-radius: 14px !important;
        clip-path: inset(0 round 14px) !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1 !important;
    }

    body .ribology-home .ribology-home__eval .ribology-home__timeline-num {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    body .ribology-home .ribology-home__eval .ribology-home__timeline::before,
    body .ribology-home .ribology-home__eval .ribology-home__timeline::after {
        left: 26px !important;
    }

    body .ribology-home .ribology-home__eval .ribology-home__timeline-arrow {
        left: 26px !important;
    }
}

/* ============================================================
 * RIBOLOGY HOMEPAGE v7 — cache-bust marker
 * ------------------------------------------------------------
 * Theme header Version bumped to 2.0.21 so WordPress/CDN should
 * request style.css?ver=2.0.21 once this file replaces style.css.
 * ============================================================ */

/* ============================================================
 * RIBOLOGY CART LOADER — global cart/update transition layer
 * ------------------------------------------------------------
 * Used by mini-cart.js and cart-page.js for add/remove/update
 * actions so AJAX cart work and page reload fallbacks feel
 * intentional rather than surprising.
 * ============================================================ */
.ribology-cart-loader {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--ribology-font, 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.ribology-cart-loader.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ribology-cart-loader__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(25, 179, 215, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(23, 67, 121, 0.72), rgba(15, 47, 92, 0.82));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ribology-cart-loader__panel {
    position: relative;
    width: min(360px, 100%);
    padding: 30px 28px 28px;
    text-align: center;
    background: var(--ribology-white, #fff);
    border: 1px solid rgba(23, 67, 121, 0.14);
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(15, 47, 92, 0.28);
    transform: translateY(6px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.ribology-cart-loader.is-open .ribology-cart-loader__panel {
    transform: translateY(0) scale(1);
}

.ribology-cart-loader__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ribology-deep-navy, #174379), var(--ribology-sky-blue, #19B3D7));
}

.ribology-cart-loader__spinner {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 3px solid rgba(25, 179, 215, 0.20);
    border-top-color: var(--ribology-deep-navy, #174379);
    animation: ribology-cart-loader-spin 0.72s linear infinite;
}

.ribology-cart-loader__title {
    margin: 0 0 7px;
    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ribology-deep-navy, #174379);
    letter-spacing: -0.01em;
}

.ribology-cart-loader__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ribology-charcoal-lt, #6B6B6B);
}

body.ribology-cart-loader-open {
    cursor: wait;
}

body.ribology-cart-loader-open .ribology-cart-loader,
body.ribology-cart-loader-open .ribology-cart-loader * {
    cursor: wait;
}

@keyframes ribology-cart-loader-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ribology-cart-loader,
    .ribology-cart-loader__panel,
    .ribology-cart-loader__spinner {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 480px) {
    .ribology-cart-loader {
        padding: 18px;
    }

    .ribology-cart-loader__panel {
        padding: 28px 22px 24px;
        border-radius: 12px;
    }
}

/* ============================================================
 * RIBOLOGY CART LOADER — cache-bust marker
 * Theme header Version bumped to 2.0.21.
 * ============================================================ */


/* ============================================================
 * RIBOLOGY v2.0.23 — Cart / drawer / mobile checkout fixes
 * ------------------------------------------------------------
 *  - Mini-cart checkout hover text remains white
 *  - Continue shopping moved above cart table and aligned left
 *  - Refreshed output filenames include v2.0.23 for cache/user verification
 *  - Mobile cart trash button no longer overlaps product title
 *  - Mobile checkout address fields collapse to readable full-width rows
 *  - Mobile horizontal overflow guards for header/menu/CTA/cart/checkout
 * ============================================================ */

/* 1. Mini-cart drawer Checkout button: keep text + icon white in every state. */
.ribology-mini-cart a.ribology-mini-cart__checkout,
.ribology-mini-cart a.ribology-mini-cart__checkout:link,
.ribology-mini-cart a.ribology-mini-cart__checkout:visited,
.ribology-mini-cart a.ribology-mini-cart__checkout:hover,
.ribology-mini-cart a.ribology-mini-cart__checkout:focus-visible,
.ribology-mini-cart a.ribology-mini-cart__checkout:active {
    background: var(--rb-navy) !important;
    background-color: var(--rb-navy) !important;
    color: #fff !important;
    border-color: var(--rb-navy) !important;
    text-decoration: none !important;
}

.ribology-mini-cart a.ribology-mini-cart__checkout:hover,
.ribology-mini-cart a.ribology-mini-cart__checkout:focus-visible,
.ribology-mini-cart a.ribology-mini-cart__checkout:active {
    background: var(--rb-navy-hover) !important;
    background-color: var(--rb-navy-hover) !important;
    border-color: var(--rb-navy-hover) !important;
}

.ribology-mini-cart a.ribology-mini-cart__checkout svg,
.ribology-mini-cart a.ribology-mini-cart__checkout svg * {
    color: #fff !important;
    stroke: currentColor !important;
}

/* 2. Cart actions: top-left position above order table. */
.ribology-cart__actions,
.ribology-cart__actions--top {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}

.ribology-cart__actions--top + .ribology-cart-table {
    margin-top: 0 !important;
}

.ribology-cart .ribology-cart__continue {
    margin-left: 0 !important;
}

/* 3. Mobile cart row: keep remove/trash button clear of product text. */
@media (max-width: 720px) {
    .ribology-cart-row {
        overflow: hidden;
    }

    .ribology-cart-row__item-inner {
        align-items: flex-start !important;
        padding-right: 44px !important;
        min-width: 0 !important;
    }

    .ribology-cart-row__details {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ribology-cart-row__details a,
    .ribology-cart-row__name {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .ribology-cart-row__remove {
        top: 14px !important;
        right: 14px !important;
        width: 34px !important;
        height: 34px !important;
        z-index: 3 !important;
    }

    .ribology-cart-row__remove-link {
        width: 34px !important;
        height: 34px !important;
        background: #fff;
        border: 1px solid var(--rb-hairline-strong);
    }
}

/* 4. Mobile checkout: use single-column address fields so everything is readable. */
@media (max-width: 720px) {
    .ribology-checkout,
    .ribology-checkout-form,
    .ribology-checkout__layout,
    .ribology-checkout__main,
    .ribology-checkout-card,
    .ribology-checkout-card__body,
    .ribology-checkout-summary,
    #order_review.woocommerce-checkout-review-order {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .ribology-checkout .woocommerce-billing-fields__field-wrapper,
    .ribology-checkout .woocommerce-shipping-fields__field-wrapper,
    .ribology-checkout .woocommerce-address-fields__field-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ribology-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
    .ribology-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
    .ribology-checkout .woocommerce-address-fields__field-wrapper > .form-row,
    .ribology-checkout #billing_first_name_field,
    .ribology-checkout #billing_last_name_field,
    .ribology-checkout #billing_company_field,
    .ribology-checkout #billing_country_field,
    .ribology-checkout #billing_address_1_field,
    .ribology-checkout #billing_address_2_field,
    .ribology-checkout #billing_city_field,
    .ribology-checkout #billing_state_field,
    .ribology-checkout #billing_postcode_field,
    .ribology-checkout #billing_phone_field,
    .ribology-checkout #billing_email_field,
    .ribology-checkout #shipping_first_name_field,
    .ribology-checkout #shipping_last_name_field,
    .ribology-checkout #shipping_company_field,
    .ribology-checkout #shipping_country_field,
    .ribology-checkout #shipping_address_1_field,
    .ribology-checkout #shipping_address_2_field,
    .ribology-checkout #shipping_city_field,
    .ribology-checkout #shipping_state_field,
    .ribology-checkout #shipping_postcode_field {
        grid-column: 1 / -1 !important;
        grid-area: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .ribology-checkout .woocommerce-input-wrapper,
    .ribology-checkout .select2-container,
    .ribology-checkout .select2-container--default,
    .ribology-checkout .form-row input.input-text,
    .ribology-checkout .form-row textarea,
    .ribology-checkout .form-row select,
    .ribology-checkout #billing_postcode,
    .ribology-checkout #shipping_postcode,
    .ribology-checkout #billing_country,
    .ribology-checkout #shipping_country,
    .ribology-checkout #billing_state,
    .ribology-checkout #shipping_state {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ribology-checkout .select2-container--default .select2-selection--single {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ribology-checkout .form-row label,
    .ribology-checkout #billing_city_field label,
    .ribology-checkout #billing_state_field label,
    .ribology-checkout #billing_postcode_field label,
    .ribology-checkout #billing_country_field label,
    .ribology-checkout #shipping_city_field label,
    .ribology-checkout #shipping_state_field label,
    .ribology-checkout #shipping_postcode_field label,
    .ribology-checkout #shipping_country_field label {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* 5. Mobile horizontal overflow guard: prevent menu/CTA/button rows forcing right scroll. */
@media (max-width: 960px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #page,
    .site,
    .site-content,
    .content-area,
    .ribology-main,
    .woocommerce,
    .woocommerce-page,
    .ribology-header,
    .ribology-header__inner,
    .ribology-header.is-menu-open .ribology-header__nav,
    .ribology-cart,
    .ribology-cart__layout,
    .ribology-checkout,
    .ribology-checkout__layout,
    .ribology-mobile-kit-cta {
        max-width: 100vw !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .ribology-header.is-menu-open .ribology-header__nav {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
    }

    .ribology-header.is-menu-open .ribology-header__mobile-actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .ribology-header__mobile-action {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    .ribology-mobile-kit-cta {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto) 28px !important;
    }

    .ribology-mobile-kit-cta__button {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 360px) {
    .ribology-mobile-kit-cta {
        grid-template-columns: minmax(0, 1fr) 28px !important;
        row-gap: 8px !important;
    }

    .ribology-mobile-kit-cta__button {
        grid-column: 1 / -1;
        order: 3;
    }
}


/* ============================================================
 * RIBOLOGY v2.0.24 — Mobile header/menu, cart row and checkout overflow fixes
 * ------------------------------------------------------------
 * Covers:
 *  - Mobile hamburger dropdown opening visibly again
 *  - Checkout mobile horizontal scroll containment
 *  - Checkout mobile address fields forced into readable full-width rows
 *  - Cart mobile product title no longer clipped by the trash button/header row
 *  - Mobile sticky CTA no longer uses 100vw, which can create right-scroll
 * ============================================================ */

/* 1. Mobile hamburger menu: allow the absolute dropdown to escape the sticky header. */
@media (max-width: 960px) {
    .ribology-header,
    .ribology-header.is-menu-open {
        overflow: visible !important;
        z-index: 10000 !important;
    }

    .ribology-header__inner {
        overflow: visible !important;
    }

    .ribology-header.is-menu-open .ribology-header__nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: var(--ribology-header-h, 72px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 10001 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: calc(100dvh - var(--ribology-header-h, 72px)) !important;
        -webkit-overflow-scrolling: touch;
    }

    .ribology-header.is-menu-open .ribology-header__menu,
    .ribology-header.is-menu-open .ribology-header__mobile-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 2. Mobile cart row: stop the trash button/top edge from clipping the product name. */
@media (max-width: 720px) {
    .ribology-cart-row {
        overflow: visible !important;
        padding: 18px 16px 16px !important;
    }

    .ribology-cart-row__item {
        margin-bottom: 16px !important;
        padding-top: 2px !important;
        overflow: visible !important;
    }

    .ribology-cart-row__item-inner {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 4px 54px 4px 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .ribology-cart-row__thumb {
        width: 64px !important;
        height: 64px !important;
        margin-top: 0 !important;
    }

    .ribology-cart-row__details {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-top: 3px !important;
        overflow: visible !important;
    }

    .ribology-cart-row__details a,
    .ribology-cart-row__name {
        display: block !important;
        line-height: 1.35 !important;
        padding-top: 1px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .ribology-cart-row__remove {
        top: 18px !important;
        right: 16px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 5 !important;
    }

    .ribology-cart-row__remove-link {
        width: 36px !important;
        height: 36px !important;
        background: #fff !important;
        border: 1px solid var(--rb-hairline-strong) !important;
        box-shadow: 0 2px 8px rgba(23, 67, 121, 0.08) !important;
    }
}

/* 3. Checkout mobile: stronger containment for address fields and summary rows. */
@media (max-width: 720px) {
    body.woocommerce-checkout,
    body.woocommerce-checkout #page,
    body.woocommerce-checkout .site,
    body.woocommerce-checkout .site-content,
    body.woocommerce-checkout .content-area,
    body.woocommerce-checkout .ribology-main,
    body.woocommerce-checkout .woocommerce,
    body.woocommerce-checkout .woocommerce-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    body.woocommerce-checkout .ribology-checkout,
    body.woocommerce-checkout .ribology-checkout-form,
    body.woocommerce-checkout .ribology-checkout__layout,
    body.woocommerce-checkout .ribology-checkout__main,
    body.woocommerce-checkout .ribology-checkout__sidebar,
    body.woocommerce-checkout .ribology-checkout-card,
    body.woocommerce-checkout .ribology-checkout-card__body,
    body.woocommerce-checkout .ribology-checkout-summary,
    body.woocommerce-checkout #order_review.woocommerce-checkout-review-order {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.woocommerce-checkout .ribology-checkout {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.woocommerce-checkout .ribology-checkout__layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
    body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
    body.woocommerce-checkout .woocommerce-address-fields__field-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.woocommerce-checkout .form-row,
    body.woocommerce-checkout .form-row-first,
    body.woocommerce-checkout .form-row-last,
    body.woocommerce-checkout .form-row-wide,
    body.woocommerce-checkout .address-field,
    body.woocommerce-checkout .notes {
        float: none !important;
        clear: both !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.woocommerce-checkout .woocommerce-input-wrapper,
    body.woocommerce-checkout .form-row input.input-text,
    body.woocommerce-checkout .form-row textarea,
    body.woocommerce-checkout .form-row select,
    body.woocommerce-checkout .select2,
    body.woocommerce-checkout .select2-container,
    body.woocommerce-checkout .select2-container--default,
    body.woocommerce-checkout .select2-container--default .select2-selection--single {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.woocommerce-checkout .ribology-checkout-summary__item {
        display: grid !important;
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.woocommerce-checkout .ribology-checkout-summary__item-details,
    body.woocommerce-checkout .ribology-checkout-summary__item-name,
    body.woocommerce-checkout .ribology-checkout-summary__item-variation,
    body.woocommerce-checkout .ribology-checkout-summary__row-label,
    body.woocommerce-checkout .ribology-checkout-summary__row-value {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    body.woocommerce-checkout .ribology-checkout-summary__item-price {
        grid-column: 2 !important;
        justify-self: start !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    body.woocommerce-checkout .ribology-checkout__back-to-cart,
    body.woocommerce-checkout .ribology-checkout__place-order-btn,
    body.woocommerce-checkout #place_order {
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

/* 4. Right-scroll guard: avoid 100vw fixed elements adding horizontal overflow. */
@media (max-width: 960px) {
    .ribology-mobile-kit-cta {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .ribology-mobile-kit-cta__copy,
    .ribology-mobile-kit-cta__button {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}


/* ============================================================
 * RIBOLOGY v2.0.25 — Mini-cart drawer viewport/checkout mobile fix
 * ------------------------------------------------------------
 * Covers:
 *  - Drawer no longer creates horizontal/right scroll on checkout mobile
 *  - Drawer footer buttons stay visible while item list scrolls independently
 *  - Replaces 100vw drawer width with 100% to avoid scrollbar-width overflow
 * ============================================================ */

/* Lock both html and body while the drawer is open. The JS now toggles
   the class on <html> as well as <body>, which is more reliable on mobile. */
html.ribology-mini-cart-open,
body.ribology-mini-cart-open {
    overflow: hidden !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Keep the fixed overlay inside the viewport so its translated drawer does
   not create right-scroll, especially on checkout where the page is already
   running sticky/order-summary layout rules. */
.ribology-mini-cart {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
}

.ribology-mini-cart__backdrop {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Use dynamic viewport height and allow the body panel to shrink.
   Without min-height:0 on the scrolling body, the item list can push the
   footer below the visible area on checkout/mobile. */
.ribology-mini-cart__drawer {
    width: min(420px, 100%) !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    left: auto !important;
    right: 0 !important;
}

.ribology-mini-cart__header,
.ribology-mini-cart__subtotal,
.ribology-mini-cart__footer {
    flex: 0 0 auto !important;
}

.ribology-mini-cart__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.ribology-mini-cart__body-content,
.ribology-mini-cart__items,
.ribology-mini-cart__item {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.ribology-mini-cart__footer {
    position: relative !important;
    z-index: 2 !important;
    margin-top: auto !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 480px) {
    .ribology-mini-cart__drawer {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 720px) {
    body.woocommerce-checkout .ribology-mini-cart,
    body.woocommerce-checkout .ribology-mini-cart__drawer,
    body.woocommerce-checkout .ribology-mini-cart__body,
    body.woocommerce-checkout .ribology-mini-cart__footer {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
 * RIBOLOGY v2.0.26 — Mini-cart mobile full-screen overlay fix
 * ------------------------------------------------------------
 * Covers:
 *  - Drawer sits above the sticky mobile header again, so the drawer
 *    title and X close button are visible.
 *  - Mobile drawer uses exact viewport edges instead of a right-aligned
 *    panel width calculation that can clip content.
 *  - Drawer header/footer stay fixed within the drawer while only the
 *    item area scrolls.
 * ============================================================ */

/* The mobile header was raised to z-index:10000 for the hamburger menu.
   The cart drawer must sit above it, otherwise the site header covers the
   drawer header and hides the X close button. */
.ribology-mini-cart {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.ribology-mini-cart__backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
}

.ribology-mini-cart__drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1 !important;
    width: min(420px, 100%) !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.ribology-mini-cart__header {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    background: #fff !important;
}

.ribology-mini-cart__close {
    flex: 0 0 auto !important;
}

.ribology-mini-cart__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.ribology-mini-cart__footer {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    background: #fff !important;
}

/* Mobile: make the drawer a true full-screen sheet. This matches the
   behaviour you had on other mobile pages and prevents the right side
   from being clipped. */
@media (max-width: 720px) {
    .ribology-mini-cart__drawer {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .ribology-mini-cart__header {
        padding-top: calc(16px + env(safe-area-inset-top)) !important;
    }

    .ribology-mini-cart__items {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ribology-mini-cart__item {
        min-width: 0 !important;
        overflow: visible !important;
    }

    .ribology-mini-cart__item-details {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .ribology-mini-cart__item-name,
    .ribology-mini-cart__item-variation,
    .ribology-mini-cart__item-qty-price {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .ribology-mini-cart__subtotal,
    .ribology-mini-cart__footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* ============================================================
 * RIBOLOGY v2.0.27 — Mini-cart mobile width calibration
 * ------------------------------------------------------------
 * Covers:
 *  - Fixes mobile drawer content clipping on the left edge.
 *  - Keeps the drawer full-screen without creating checkout right-scroll.
 *  - Forces mobile drawer to use the actual viewport width and keeps
 *    internal header/items/subtotal/footer padded inside safe areas.
 * ============================================================ */
@media (max-width: 720px) {
    html.ribology-mini-cart-open,
    body.ribology-mini-cart-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .ribology-mini-cart {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .ribology-mini-cart__drawer {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: translate3d(100%, 0, 0) !important;
    }

    .ribology-mini-cart.is-open .ribology-mini-cart__drawer {
        transform: translate3d(0, 0, 0) !important;
    }

    .ribology-mini-cart__header,
    .ribology-mini-cart__subtotal,
    .ribology-mini-cart__footer {
        padding-left: calc(20px + env(safe-area-inset-left)) !important;
        padding-right: calc(20px + env(safe-area-inset-right)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ribology-mini-cart__header {
        padding-top: calc(16px + env(safe-area-inset-top)) !important;
    }

    .ribology-mini-cart__items {
        padding-left: calc(20px + env(safe-area-inset-left)) !important;
        padding-right: calc(20px + env(safe-area-inset-right)) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .ribology-mini-cart__item,
    .ribology-mini-cart__item-thumb,
    .ribology-mini-cart__item-details,
    .ribology-mini-cart__item-remove,
    .ribology-mini-cart__subtotal-label,
    .ribology-mini-cart__subtotal-value {
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ribology-mini-cart__item-thumb {
        margin-left: 0 !important;
    }

    .ribology-mini-cart__title,
    .ribology-mini-cart__subtotal-label {
        overflow: visible !important;
        text-indent: 0 !important;
    }
}

/* ============================================================
 * RIBOLOGY — HEADER SEARCH (compact field + Store-API live
 * preview) + SEARCH / ARCHIVE RESULTS CLEANUP
 * ------------------------------------------------------------
 * Compact field + "Search Hub" button (see the edited
 * .ribology-header__search-inner rules above), the as-you-type
 * product dropdown, and a brand pass over WooCommerce search +
 * category/tag archives. Archive rules are scoped under
 * :is(.search, .tax-product_cat, .tax-product_tag) so the
 * custom /shop/ page is left untouched.
 * ============================================================ */

/* ---------- Search-row buttons keep their size ---------- */
.ribology-header__search-submit,
.ribology-header__search-hub { flex: 0 0 auto; white-space: nowrap; }

/* ---------- As-you-type product preview ---------- */
.ribology-header__search-results {
    margin-top: 12px;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    box-shadow: var(--ribology-shadow-md);
    overflow: hidden;
}
.ribology-header__search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--ribology-charcoal);
    border-bottom: 1px solid var(--ribology-border);
    transition: background-color var(--ribology-ease);
}
.ribology-header__search-item:last-child { border-bottom: 0; }
.ribology-header__search-item:hover,
.ribology-header__search-item.is-active { background: rgba(25, 179, 215, 0.09); }
.ribology-header__search-thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-lab-white);
}
.ribology-header__search-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ribology-header__search-name {
    font-weight: 600;
    color: var(--ribology-deep-navy);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ribology-header__search-price { font-size: 0.9rem; color: var(--ribology-charcoal-lt); }
.ribology-header__search-empty {
    padding: 14px;
    text-align: center;
    color: var(--ribology-charcoal-lt);
    font-size: 0.92rem;
}

/* ---------- WooCommerce search + category/tag results cleanup ---------- */
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb { color: var(--ribology-charcoal-lt); font-size: 0.9rem; }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb a { color: var(--ribology-deep-navy); }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-products-header__title,
:is(.search, .tax-product_cat, .tax-product_tag) .page-title { color: var(--ribology-deep-navy); letter-spacing: -0.01em; }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-result-count { color: var(--ribology-charcoal-lt); }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-ordering select {
    padding: 9px 14px;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-white);
    color: var(--ribology-charcoal);
    font-family: inherit;
}
:is(.search, .tax-product_cat, .tax-product_tag) ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
:is(.search, .tax-product_cat, .tax-product_tag) ul.products::before,
:is(.search, .tax-product_cat, .tax-product_tag) ul.products::after { content: none !important; }
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius);
    box-shadow: var(--ribology-shadow-sm);
    padding: 16px;
    transition: transform 0.25s var(--ribology-ease), box-shadow 0.25s var(--ribology-ease);
}
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--ribology-shadow-md);
}
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product img { border-radius: var(--ribology-radius-sm); margin: 0 0 14px; }
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .woocommerce-loop-product__title {
    color: var(--ribology-deep-navy);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 0;
}
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .price { color: var(--ribology-charcoal); font-weight: 600; }
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .price del { opacity: 0.55; font-weight: 400; }
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .price ins { text-decoration: none; }
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .button,
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .add_to_cart_button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border: 0;
    border-radius: var(--ribology-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ribology-ease);
}
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .button:hover,
:is(.search, .tax-product_cat, .tax-product_tag) ul.products li.product .add_to_cart_button:hover { background: var(--ribology-deep-navy-dk); }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul li { border: 0; margin: 0; }
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul li a,
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-white);
    color: var(--ribology-deep-navy);
}
:is(.search, .tax-product_cat, .tax-product_tag) .woocommerce-pagination ul li span.current {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border-color: var(--ribology-deep-navy);
}
@media (max-width: 900px) {
    :is(.search, .tax-product_cat, .tax-product_tag) ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
    :is(.search, .tax-product_cat, .tax-product_tag) ul.products { grid-template-columns: 1fr; }
    .ribology-header__search-submit,
    .ribology-header__search-hub { flex: 1 1 auto; text-align: center; }
}
/* ===== end RIBOLOGY HEADER SEARCH + RESULTS CLEANUP ===== */

/* ============================================================
 * RIBOLOGY — UNIFIED SEARCH RESULTS + DROPDOWN ARTICLE ROWS
 * ------------------------------------------------------------
 * Styles for the rewritten search branch in archive-product.php:
 *   - Search heading (.ribology-shop--search + __search-head/title)
 *   - Products section (uses existing __fcard; grid override --results)
 *   - Support articles section (__articles, __article, sub-elements)
 *   - Empty state (__empty)
 *   - Pagination inside the search results
 * Plus dropdown additions: article group label, doc icon.
 * Scoped under .ribology-shop or .ribology-shop--search.
 * Version bumped 2.0.28 -> 2.0.29 for this delivery.
 * ============================================================ */

/* ---------- Search-results page heading ---------- */
.ribology-shop--search .ribology-shop__search-head {
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--ribology-border);
    margin-bottom: 40px;
}
.ribology-shop--search .ribology-shop__eyebrow {
    display: block;
    margin-bottom: 10px;
}
.ribology-shop__search-title {
    font-family: var(--rs-head, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 700;
    color: var(--ribology-deep-navy);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
}

/* ---------- Results section header (icon + label) ---------- */
.ribology-shop__results {
    margin-bottom: 52px;
}
.ribology-shop__results-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rs-head, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ribology-border);
}
.ribology-shop__results-label svg {
    flex: 0 0 auto;
    color: var(--ribology-sky-blue);
}

/* ---------- Products grid (search variant — 3 even cols) ---------- */
.ribology-shop__fcards--results {
    grid-template-columns: repeat(3, 1fr);
}

/* ---------- Support articles grid ---------- */
.ribology-shop__articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.ribology-shop__article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: var(--ribology-white);
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius);
    box-shadow: var(--ribology-shadow-sm);
    text-decoration: none;
    color: var(--ribology-charcoal);
    transition: transform 0.25s var(--ribology-ease), box-shadow 0.25s var(--ribology-ease), border-color 0.25s var(--ribology-ease);
}
.ribology-shop__article:hover {
    transform: translateY(-3px);
    box-shadow: var(--ribology-shadow-md);
    border-color: rgba(25, 179, 215, 0.35);
}
.ribology-shop__article-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.ribology-shop__article-type {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ribology-sky-blue-dk);
}
.ribology-shop__article-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ribology-deep-navy);
    line-height: 1.3;
}
.ribology-shop__article-preview {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ribology-charcoal-lt);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.ribology-shop__article-meta {
    font-size: 0.82rem;
    color: var(--ribology-charcoal-lt);
    margin-top: 2px;
}
.ribology-shop__article-arrow {
    flex: 0 0 auto;
    color: var(--ribology-charcoal-lt);
    transition: transform 0.2s var(--ribology-ease), color 0.2s var(--ribology-ease);
}
.ribology-shop__article:hover .ribology-shop__article-arrow {
    transform: translateX(4px);
    color: var(--ribology-sky-blue-dk);
}

/* ---------- Empty state ---------- */
.ribology-shop__empty {
    text-align: center;
    padding: 64px 24px 80px;
}
.ribology-shop__empty-icon {
    display: block;
    color: var(--ribology-charcoal-lt);
    margin-bottom: 16px;
}
.ribology-shop__empty-icon svg { width: 40px; height: 40px; }
.ribology-shop__empty-text {
    font-size: 1.1rem;
    color: var(--ribology-charcoal-lt);
    margin: 0 0 28px;
}
.ribology-shop__empty-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Pagination inside search results ---------- */
.ribology-shop__results .pagination {
    margin-top: 32px;
}
.ribology-shop__results .pagination .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.ribology-shop__results .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ribology-border);
    border-radius: var(--ribology-radius-sm);
    background: var(--ribology-white);
    color: var(--ribology-deep-navy);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--ribology-ease), border-color var(--ribology-ease);
}
.ribology-shop__results .pagination .page-numbers:hover { background: var(--ribology-lab-white); }
.ribology-shop__results .pagination .page-numbers.current {
    background: var(--ribology-deep-navy);
    color: var(--ribology-white);
    border-color: var(--ribology-deep-navy);
}

/* ---------- Dropdown: article group label ---------- */
.ribology-header__search-group {
    padding: 6px 14px 4px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ribology-charcoal-lt);
    background: var(--ribology-lab-white);
    border-top: 1px solid var(--ribology-border);
    border-bottom: 1px solid var(--ribology-border);
    margin-top: 2px;
    pointer-events: none;
}

/* ---------- Dropdown: article doc icon box ---------- */
.ribology-header__search-doc {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ribology-radius-sm);
    background: rgba(23, 67, 121, 0.08);
    color: var(--ribology-deep-navy);
}
.ribology-header__search-doc svg { width: 20px; height: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .ribology-shop__fcards--results { grid-template-columns: repeat(2, 1fr) !important; }
    .ribology-shop__articles { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ribology-shop--search .ribology-shop__search-head { padding: 32px 0 24px; margin-bottom: 28px; }
    .ribology-shop__fcards--results { grid-template-columns: 1fr !important; }
}
/* ===== end RIBOLOGY UNIFIED SEARCH RESULTS ===== */

/* --- search empty-state kit link (header dropdown) --- */
.ribology-header__search-kit-link {
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ribology-sky-blue-dk);
    text-decoration: none;
    border-top: 1px solid var(--ribology-border);
    transition: background-color var(--ribology-ease);
}
.ribology-header__search-kit-link:hover { background: rgba(25, 179, 215, 0.07); }

/* ============================================================
 * RIBOLOGY — SEARCH.PHP PRODUCT ROW POLISH v2.0.37
 * ------------------------------------------------------------
 * search.php now renders WooCommerce products using the same
 * row treatment as the /shop/ buffers and consumables panels.
 * ============================================================ */
.ribology-shop--search .ribology-shop__compact--search {
    max-width: 960px;
}
.ribology-shop--search .ribology-shop__row-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s var(--ribology-ease);
}
.ribology-shop--search .ribology-shop__row-name a:hover {
    color: var(--ribology-sky-blue-dk);
}
.ribology-shop--search .ribology-shop__row-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.ribology-shop--search .ribology-shop__results-summary {
    margin-top: 10px;
    font-family: var(--rh-body, var(--ribology-font));
    color: var(--ribology-charcoal-lt);
    font-size: 0.95rem;
}
.ribology-shop--search .ribology-shop__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--ribology-lab-white);
    color: var(--ribology-sky-blue-dk);
}

/* ============================================================
 * RIBOLOGY — SEARCH FIXES v2.0.37
 * ------------------------------------------------------------
 * Prevents search-result SVGs/product thumbnails from rendering
 * at browser default oversized dimensions. Also improves support
 * article preview rows in the header dropdown.
 * ============================================================ */
.ribology-shop--search .ribology-shop__results-label svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: inline-block !important;
}
.ribology-shop--search .ribology-shop__article-arrow svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline-block !important;
}
.ribology-shop--search .ribology-shop__row-thumb {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    overflow: hidden !important;
}
.ribology-shop--search .ribology-shop__row-thumb img,
.ribology-shop--search .ribology-shop__thumb-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    display: block !important;
}
.ribology-header__search-meta {
    flex: 1 1 auto;
}
.ribology-header__search-doc svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}
.ribology-header__search-item--article .ribology-header__search-price {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}



/* ============================================================
   v2.0.38 — Add to Order button icon polish
   ------------------------------------------------------------
   Customer-facing add buttons now use a carton-box icon and
   "Add to Order" wording while WooCommerce internals remain
   add-to-cart.
   ============================================================ */
.ribology-pdp__atc svg,
.ribology-shop .ribology-shop__add svg,
.ribology-search .ribology-shop__add svg {
    width: 17px;
    height: 17px;
    flex: none;
}


/* ============================================================
   v2.0.41 — Search results section spacing
   ------------------------------------------------------------
   Adds breathing room between the Products / Support articles
   section label divider line and the first result row/card.
   ============================================================ */
.ribology-shop--search .ribology-shop__results-label + .ribology-shop__compact--search,
.ribology-shop--search .ribology-shop__results-label + .ribology-shop__articles {
    margin-top: 22px;
}

@media (max-width: 600px) {
    .ribology-shop--search .ribology-shop__results-label + .ribology-shop__compact--search,
    .ribology-shop--search .ribology-shop__results-label + .ribology-shop__articles {
        margin-top: 18px;
    }
}