/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* ==========================================================================
   RT FONTS — self-hosted, no external requests (GDPR / cookie consent)
   Variable fonts: one file covers the whole weight range.
   Hummingbird ships Inter 400 only, so the 500-900 cuts come from here.
   ========================================================================== */

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/orbitron-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ==========================================================================
   RT DESIGN TOKENS — ported from rt_supportsite
   ========================================================================== */

:root {
    --rt-dark: #0a0a0a;
    --rt-black: #111111;
    --rt-card: #1a1a1a;
    --rt-orange: #ff6600;
    --rt-orange-rgb: 255, 102, 0;
    --rt-orange-light: #ff8533;
    --rt-cyan: #00d4ff;
    --rt-cyan-rgb: 0, 212, 255;
    --rt-gray: #9ca3af;
    --rt-light: #f3f4f6;

    --rt-border: rgba(255, 255, 255, 0.1);
    --rt-border-hover: rgba(var(--rt-orange-rgb), 0.6);

    --rt-font-display: 'Orbitron', system-ui, sans-serif;
    --rt-font-body: 'Inter', system-ui, sans-serif;

    /* Large surfaces vs. controls — the radius contrast is the signature. */
    --rt-radius-lg: 24px;
    --rt-radius-sm: 6px;

    --rt-glow: 0 0 40px rgba(var(--rt-orange-rgb), 0.3);
    --rt-glow-strong: 0 15px 50px rgba(var(--rt-orange-rgb), 0.5);
    --rt-glow-cyan: 0 0 30px rgba(var(--rt-cyan-rgb), 0.2);

    --rt-section-gap: 6rem;
    --rt-gutter: 1.5rem;
    --rt-container: 1152px;
    /* Content sections that need more room than the reading-width container. */
    --rt-container-wide: 1360px;
}

:root, [data-bs-theme=light] {
    color-scheme:light;
    --bs-body-color:#dee2e6;
    --bs-body-color-rgb:222,226,230;
    --bs-body-bg:#212529;
    --bs-body-bg-rgb:33,37,41;
    --bs-emphasis-color:#fff;
    --bs-emphasis-color-rgb:255,255,255;
    --bs-primary: var(--rt-orange);
    --bs-primary-rgb: var(--rt-orange-rgb);
    --bs-secondary-color:rgba(222,226,230,.75);
    --bs-secondary-color-rgb:222,226,230;
    --bs-secondary-bg:#343a40;
    --bs-secondary-bg-rgb:52,58,64;
    --bs-tertiary-color:rgba(222,226,230,.5);
    --bs-tertiary-color-rgb:222,226,230;
    --bs-tertiary-bg:#2b3035;
    --bs-tertiary-bg-rgb:43,48,53;
    --bs-primary-text-emphasis:#6ea8fe;
    --bs-secondary-text-emphasis:#a7acb1;
    --bs-success-text-emphasis:#75b798;
    --bs-info-text-emphasis:#6edff6;
    --bs-warning-text-emphasis:#ffda6a;
    --bs-danger-text-emphasis:#ea868f;
    --bs-light-text-emphasis:#f8f9fa;
    --bs-dark-text-emphasis:#dee2e6;
    --bs-primary-bg-subtle:#031633;
    --bs-secondary-bg-subtle:#161719;
    --bs-success-bg-subtle:#051b11;
    --bs-info-bg-subtle:#032830;
    --bs-warning-bg-subtle:#332701;
    --bs-danger-bg-subtle:#2c0b0e;
    --bs-light-bg-subtle:#343a40;
    --bs-dark-bg-subtle:#1a1d20;
    --bs-primary-border-subtle:#084298;
    --bs-secondary-border-subtle:#41464b;
    --bs-success-border-subtle:#0f5132;
    --bs-info-border-subtle:#087990;
    --bs-warning-border-subtle:#997404;
    --bs-danger-border-subtle:#842029;
    --bs-light-border-subtle:#495057;
    --bs-dark-border-subtle:#343a40;
    --bs-heading-color: var(--rt-orange);
    --bs-link-color: var(--rt-orange);
    --bs-link-hover-color: var(--rt-orange-light);
    /* Bootstrap consumes these as rgba(var(--bs-link-color-rgb), .5) — they must
       be comma triplets. They previously held the keyword `darkorange`, which
       silently broke every rgba() built from them. */
    --bs-link-color-rgb: var(--rt-orange-rgb);
    --bs-link-hover-color-rgb: 255, 133, 51;
    --bs-link-opacity: 1;
    --bs-code-color:#e685b5;
    --bs-highlight-color:#dee2e6;
    --bs-highlight-bg:#664d03;
    --bs-border-color:#495057;
    --bs-border-color-translucent:hsla(0,0%,100%,.15);
    --bs-form-valid-color:#75b798;
    --bs-form-valid-border-color:#75b798;
    --bs-form-invalid-color:#ea868f;
    --bs-form-invalid-border-color:#ea868f;
    --bs-breadcrumb-divider-color: white;
    --bs-breadcrumb-item-active-color: var(--rt-orange);
    --bs-body-font-family: var(--rt-font-body);
}

body {
    background-image: url('/img/background.jpg');
    background-repeat: repeat-y;
    background-size: auto;
    background-position: top center;
}

.card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 25px;
}

.accordion {
    --bs-accordion-active-color: var(--rt-orange);
    --bs-accordion-btn-color: white;
}

#left-column {
    --left-block-title-color:var(--bs-gray-500);
    --left-block-title-size:1.5rem;
    --left-block-title-spacing:1rem;
    --left-block-subtitle-color:var(--bs-gray-500);
    --left-block-subtitle-size:1rem;
    --left-block-subtitle-spacing:0.25rem;
    --left-block-border-bottom:1px solid #e9ecef
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rt-orange);
    --bs-btn-border-color: var(--rt-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rt-orange-light);
    --bs-btn-hover-border-color: var(--rt-orange-light);
    --bs-btn-focus-shadow-rgb: var(--rt-orange-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rt-orange);
    --bs-btn-active-border-color: var(--rt-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: gray;
    --bs-btn-disabled-border-color: var(--rt-orange);
}

.btn-outline-primary {
    --bs-btn-color: var(--rt-orange);
    --bs-btn-border-color: var(--rt-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rt-orange-light);
    --bs-btn-hover-border-color: var(--rt-orange-light);
    --bs-btn-focus-shadow-rgb: var(--rt-orange-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rt-orange);
    --bs-btn-active-border-color: var(--rt-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: gray;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--rt-orange);
    --bs-gradient: none;
}

.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline;
}

.h2, h2
{
    font-size: calc(1.325rem + .9vw);
    color: var(--bs-primary);
}
.ratio-homeSlider {
    min-height:300px;
    --bs-aspect-ratio: 88.0%
}
@media(min-width:768px) {
    .ratio-homeSlider {
        --bs-aspect-ratio:39.33333%
    }
}
.carousel {
    --slider-img-height: 100%;
    --slider-title-weight: 800;
    --slider-subtitle-weight: 700;
    --slider-text-color: var(--bs-gray-800);
    --slider-control-bg: var(--bs-white);
    --slider-control-height: 4rem;
    --slider-control-radius: 50%;
}


 .carousel .carousel-caption .h2, .carousel .carousel-caption h2 {
    font-size: 3rem;
    color: var(--rt-orange); /* var(--bs-primary);*/ 
    text-shadow: 0 0 15px rgba(0, 0, 0, 1.99);
}

.carousel .carousel-caption .caption-description {
    max-width: 20rem;
    color: white;
}

.carousel .carousel-caption .caption-description .h3, .carousel .carousel-caption .caption-description h3 {
    font-size: 1.25rem;
    margin: 1rem 0;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 1.99);
}

.carousel .carousel-caption .caption-description p {
    font-size: 1rem;
    color: var(--bs-gray-500);
    text-shadow: 0 0 10px rgba(0, 0, 0, 1.99);
}

.carousel .carousel-control-next, .carousel .carousel-control-prev {
    background: var(--slider-control-bg);
    border-radius: var(--slider-control-radius);
    height: var(--slider-control-height);
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.page-home #custom-text {
    /* background: linear-gradient(to bottom, darkred, var(--bs-body-bg)); */
    /* background: linear-gradient(to bottom, darkred, rgba(0,0,0,0)); */
}

.header-bottom {
    --header-top-border-bottom: 0px solid var(--bs-gray-800);
    --header-bottom-border-bottom: 1px solid var(--bs-gray-800);
    border-bottom: var(--header-bottom-border-bottom);
    padding: 10px;
    background: black; /*var(--bs-gray-800);*/
}

.header-top .form-select {
    background-color: white;
    background-position: right .12rem center;
    border: none;
    padding-right: 1.5rem;
    color: var(--bs-gray-800);
}

.header-top {
    --header-top-border-bottom: 1px solid var(--bs-gray-800);
    --header-bottom-border-bottom: 1px solid var(--bs-gray-800);
    background: var(--bs-gray-800);
}

.header {
    --header-bg: black;
    --header-top-bg: black;
    --header-color: white;
    --header-top-color: var(--rt-orange); /* var(--bs-gray-800);*/
    background-color: var(--header-bg);
    max-width: 100vw;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
}

.header-block__action-btn, .header-block__action-btn:focus, .header-block__action-btn:hover {
    color: var(--header-top-color);
}

.search-filters .search-filters-title {
    color: var(--bs-primary);
    font-size: var(--left-block-title-size);
    font-weight: 600;
}

.toast_menu {
    color: var(--rt-orange);
    font-size: 40px;
}

.carousel {
    --slider-img-height: 100%;
    --slider-title-weight: 800;
    --slider-subtitle-weight: 700;
    --slider-text-color: var(--bs-gray-800);
    --slider-control-bg: var(--bs-white);
    --slider-control-height: 4rem;
    --slider-control-radius: 50%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.rich-text .h1, .rich-text .h2, .rich-text .h3, .rich-text .h4, .rich-text .h5, .rich-text .h6, .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 {
    color: var(--bs-gray-800);
    font-weight: 700;
}

.rich-text p, .rich-text ul {
    font-size: 1rem;
    color: var(--bs-gray-500);
}

.badge {
    background-color: var(--bs-primary);
    margin: 10px -4px;
    padding: 10px 20px;
    border-radius: 0px 0px 25px 0px;
}

.product-miniature .product-miniature__infos__bottom, .product-miniature .product-miniature__infos__top {
    background-color: var(--bs-body-bg);
    padding: .25rem .5rem;
}

.product-miniature .product-miniature__quickview {
    background-color: var(--bs-primary);
    padding: .5rem;
    position: absolute;
    top: 0;
    transition: .25s ease-out;
    width: 100%;
    z-index: -1;
}

.product-miniature .product-miniature__quickview_button{
    color: var(--bs-white);
    background-color: transparent;    
}

.product-miniature__title{
    color: var(--bs-primary);
}

.breadcrumb__wrapper {
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 2rem;
}

.breadcrumb a {
    color: var(--bs-gray-300);
}

.breadcrumb a:hover {
    color: var(--rt-orange);
}

.breadcrumb-item+.breadcrumb-item:before {
    /*color: var(--bs-breadcrumb-divider-color);*/
    content: var(--bs-breadcrumb-divider, ">");
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
}

.form-control, .modal.product-comment-modal .form-control, .modal.product-comment-modal textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .5rem 1rem;
    transition: border-color .15s 
ease-in-out, box-shadow .15s 
ease-in-out;
    width: 100%;
}

.page-product .product__tax-info {
    color: var(--bs-primary);
    font-size: .875rem;
}

.col-form-label, .form-label {
    color: var(--bs-gray-100);
    font-weight: 700;
}

.rich-text .h1, .rich-text .h2, .rich-text .h3, .rich-text .h4, .rich-text .h5, .rich-text .h6, .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6
{
    color: var(--bs-primary);
    font-weight: 700;
}

.dark {
    color: var(--bs-gray-100);
}

.section-title {
    color: var(--bs-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2.5rem 0;
}

.email-subscription .email-subscription__label {
    color: var(--bs-primary);
}

@media(min-width:992px) {
    .email-subscription {
        background-color: rgba(0,0,0,0.5);
/*        background-color: var(--bs-gray-800); */
    }
}

.cart-summary, .cart-summary .card-footer {
    background-color: var(--bs-gray-700);
}

.cart__item .product-line__title {
    align-self: start;
    color: var(--bs-primary);
    font-weight: 600;
    width: 100%;
}

.page-product .product__infos .accordion-button {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1.25rem 0;
    color: var(--bs-primary);
}

.accordion-button:not(.collapsed) {
/*    color: var(--bs-primary); */
    background-color: transparent;
    box-shadow: inset 0 calc(var(--bs-accordion-border-width) * -1) 0 var(--bs-accordion-border-color);
}

.product__details, .product__features {
    background: transparent;
}

.detail {
    align-items: center;
    border-bottom: 2px solid var(--bs-gray-700);
    display: flex;
    padding: 1rem;
}

.footer {
  --footer-background-color:transparent;
  --footer-text-color:var(--bs-gray-300);
  --footer-hover-color:var(--bs-white);
  --footer-heading-color:var(--bs-white)
}

.footer .footer__main{
    background: rgba(0,0,0,0.6);
}

.footer__before {
    background-color: rgba(255,0,0,0.3);
}

.footer__main{
    background-color: rgba(0,0,0,0.5);
}


/*
.email-subscription .email-subscription__content__inputs input[type=email] {
    border: 1px solid var(--bs-gray-300);
    color: red;
    margin-right: .5rem;
}
*/

/* Customer Reassurance block (product page): module ships with a hardcoded
   inline color (PSR_TEXT_COLOR, black by default), so !important is needed
   to override it from CSS. */
.blockreassurance_product .block-title,
.blockreassurance_product p {
    color: var(--bs-gray-600) !important;
}

/* Product page "Description" accordion: the accordion-item background
   defaults to --bs-body-bg (solid), covering the page background image. */
#description {
    --bs-accordion-bg: transparent;
}

/* Product page: hide the "No tax" price label. */
.product__tax-info {
    display: none !important;
}

/* Product page main image: match the darkened, semi-transparent look
   already used for product boxes on the homepage (.card). */
.product__images .carousel {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

/* PayPal "secure payments" mark (ps_checkout widget): drop the white
   badge background so it sits on the dark theme background. */
.paypal-mark {
    background: none !important;
    border: none !important;
}

/* ==========================================================================
   RT DESIGN SYSTEM
   Utilities ported from rt_supportsite (Vue/Tailwind) as plain CSS.
   All classes are rt- prefixed per AGENTS.md; nothing here targets a bare
   Bootstrap or theme selector, so the whole block is removable in one piece.
   ========================================================================== */

/* --- Typography ---------------------------------------------------------- */

.rt-display {
    font-family: var(--rt-font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 0.95;
}

.rt-eyebrow {
    display: block;
    font-family: var(--rt-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--rt-orange);
    margin-bottom: 1rem;
}

/* Accent span injected by the rt_highlight modifier from [brackets] typed in
   a heading in the back office. It targets the span itself, so it wins over
   the colour set on the surrounding hN without needing extra specificity. */
.rt-hl {
    color: var(--rt-orange);
}

.rt-text-glow {
    color: var(--rt-orange);
    text-shadow:
        0 0 40px rgba(var(--rt-orange-rgb), 0.6),
        0 0 80px rgba(var(--rt-orange-rgb), 0.3);
}

/* --- Layout -------------------------------------------------------------- */

.rt-section {
    position: relative;
    z-index: 1;
    padding: var(--rt-section-gap) var(--rt-gutter);
}

.rt-section__inner {
    max-width: var(--rt-container);
    margin-inline: auto;
}

/* Section band: the darker stripe used between content blocks. */
.rt-section--band {
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(17, 17, 17, 0.8),
        transparent
    );
}

/* --- Surfaces ------------------------------------------------------------ */

.rt-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--rt-border);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.rt-glow-orange {
    box-shadow: var(--rt-glow);
}

/* --- Shine sweep --------------------------------------------------------- */

.rt-shine {
    position: relative;
    overflow: hidden;
}

.rt-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.rt-shine:hover::before {
    left: 100%;
}

/* --- Buttons ------------------------------------------------------------- */

.rt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--rt-radius-sm);
    font-family: var(--rt-font-display);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease,
        background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.rt-btn:hover,
.rt-btn:focus-visible {
    transform: translateY(-4px);
    text-decoration: none;
}

.rt-btn--primary {
    background: linear-gradient(to right, var(--rt-orange), var(--rt-orange-light));
    color: #fff;
}

.rt-btn--primary:hover,
.rt-btn--primary:focus-visible {
    color: #fff;
    box-shadow: var(--rt-glow-strong);
}

.rt-btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--rt-border);
    color: #fff;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.rt-btn--ghost:hover,
.rt-btn--ghost:focus-visible {
    border-color: rgba(var(--rt-cyan-rgb), 0.5);
    color: var(--rt-cyan);
    box-shadow: var(--rt-glow-cyan);
}

/* --- Panel: the master card pattern (4 layers) --------------------------- */

.rt-panel {
    position: relative;
    overflow: hidden;
    background: var(--rt-card);
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-lg);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

/* Layer 2: orange wash that fades in on hover. */
.rt-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        rgba(var(--rt-orange-rgb), 0.1),
        transparent
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.rt-panel:hover {
    border-color: var(--rt-border-hover);
    box-shadow: var(--rt-glow);
    transform: translateY(-4px);
}

.rt-panel:hover::after {
    opacity: 1;
}

/* Layer 4: content sits above the wash and the shine. */
.rt-panel__content {
    position: relative;
    z-index: 3;
    padding: 1.5rem;
}

/* --- Ambient background layers ------------------------------------------- */

.rt-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.rt-ambient__grid,
.rt-ambient__radial,
.rt-ambient__scanlines {
    position: absolute;
    inset: -20vh 0;
}

.rt-ambient__grid {
    background-image:
        linear-gradient(rgba(var(--rt-orange-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--rt-orange-rgb), 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: translate3d(0, calc(var(--rt-scroll, 0px) * 0.1), 0);
}

.rt-ambient__radial {
    background:
        radial-gradient(circle at 20% 30%, rgba(var(--rt-orange-rgb), 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(var(--rt-cyan-rgb), 0.05) 0%, transparent 40%);
    transform: translate3d(0, calc(var(--rt-scroll, 0px) * 0.3), 0);
}

.rt-ambient__scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    transform: translate3d(0, calc(var(--rt-scroll, 0px) * 0.2), 0);
}

/* Page-wide particle layer. It sits BEHIND the content (.rt-home is z-index 1)
   so specks never drift across body copy or the cards; they show through the
   semi-transparent sections instead. The hero needs its own copy, because its
   slide images are opaque and would hide this one — see .rt-hero__particles. */
.rt-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Hero-local copy, clipped to the hero and stacked between the scrim (1) /
   ambient wash (2) and the caption (4), so the specks read over the slide
   image but never over the headline. */
.rt-hero__particles {
    position: absolute;
    z-index: 3;
}

.rt-particle {
    position: absolute;
    bottom: -10vh;
    /* Size comes from JS as a custom property rather than as width/height, so
       the blur below can be derived from it. */
    width: var(--rt-particle-size, 4px);
    height: var(--rt-particle-size, 4px);
    border-radius: 50%;
    opacity: 0;
    background: var(--rt-orange);
    /* Blur is proportional to each dot's own size, so the bigger ones read as
       further out of focus instead of every dot being softened by the same
       amount. --rt-particle-blur is the single knob: raise it for hazier
       specks, set it to 0 for the previous hard-edged dots. */
    filter: blur(calc(var(--rt-particle-size, 4px) * var(--rt-particle-blur, 0.45)));
    will-change: transform, opacity;
}

.rt-particle--cyan {
    background: var(--rt-cyan);
}

/* --- Animations ---------------------------------------------------------- */

@keyframes rt-float-particle {
    0%   { opacity: 0;   transform: translateY(0) scale(0); }
    10%  { opacity: 0.75; transform: translateY(-10vh) scale(1); }
    90%  { opacity: 0.75; transform: translateY(-100vh) scale(1); }
    100% { opacity: 0;   transform: translateY(-110vh) scale(0); }
}

@keyframes rt-gradient-shift {
    0%   { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1;   transform: scale(1.15); }
}

@keyframes rt-glow-pulse {
    0% {
        text-shadow:
            0 0 40px rgba(var(--rt-orange-rgb), 0.6),
            0 0 80px rgba(var(--rt-orange-rgb), 0.3);
    }
    100% {
        text-shadow:
            0 0 60px rgba(var(--rt-orange-rgb), 0.8),
            0 0 120px rgba(var(--rt-orange-rgb), 0.5);
    }
}

@keyframes rt-brand-glow-pulse {
    0% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 0.35),
            0 0 25px rgba(var(--rt-orange-rgb), 0.4);
    }
    100% {
        text-shadow:
            0 0 22px rgba(255, 255, 255, 0.9),
            0 0 45px rgba(var(--rt-orange-rgb), 0.6);
    }
}

.rt-glow-pulse {
    animation: rt-glow-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

/* --- Scroll reveal ------------------------------------------------------- */

.rt-reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.rt-reveal--in {
    opacity: 1;
    transform: none;
}

/* --- Accessibility: honour reduced motion -------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rt-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .rt-particles,
    .rt-ambient__scanlines {
        display: none;
    }

    .rt-ambient__grid,
    .rt-ambient__radial {
        transform: none;
    }

    .rt-shine::before {
        display: none;
    }

    .rt-btn:hover,
    .rt-panel:hover {
        transform: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   RT HOME — scoped to the homepage wrapper added by templates/index.tpl
   ========================================================================== */

.rt-home {
    position: relative;
    z-index: 1;
}

/* --- Hero (ps_imageslider override) -------------------------------------- */

.rt-hero {
    position: relative;
    /* --rt-header-h is published by custom.js; without JS the hero just takes
       the full viewport. */
    min-height: calc(100svh - var(--rt-header-h, 0px));
    margin-bottom: var(--rt-section-gap);
    overflow: hidden;
    background: var(--rt-dark);
}

.rt-hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(var(--rt-orange-rgb), 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(var(--rt-cyan-rgb), 0.1) 0%, transparent 50%);
    animation: rt-gradient-shift 10s ease-in-out infinite alternate;
}

.rt-hero .carousel,
.rt-hero .carousel-inner,
.rt-hero .carousel-item {
    height: 100%;
    min-height: calc(100svh - var(--rt-header-h, 0px));
}

.rt-hero .carousel-item {
    list-style: none;
}

/* Crossfade tuning. Bootstrap's default fade is 0.6s with the outgoing slide
   snapping to opacity 0 after 0.25s; both are stretched here so the two images
   genuinely dissolve into one another instead of blinking.

   3.5s against the 10s interval is a deliberate choice, not a leftover: it is
   the soft, drawn-out dissolve the hero is meant to have. Keep it well under
   the interval (roughly a third), otherwise a slide is still fading in when
   the next one is already due and Bootstrap cuts the transition short. The
   interval itself lives in the back office, under Design > Image slider. */
.rt-hero {
    --rt-hero-fade: 3.5s;
}

.rt-hero .carousel-fade .carousel-item {
    transition-duration: var(--rt-hero-fade);
    transition-timing-function: ease-in-out;
}

.rt-hero .carousel-fade .active.carousel-item-start,
.rt-hero .carousel-fade .active.carousel-item-end {
    transition: opacity 0s var(--rt-hero-fade);
}

/* Slow Ken Burns push on the visible slide, restarted on each transition.
   --rt-hero-interval comes from the slider template (the back office "Speed"
   setting); the multiplier keeps the image still moving as the fade hands
   over, instead of freezing on the last frame. */
.rt-hero .carousel-item.active .rt-hero__image {
    animation: rt-kenburns calc(var(--rt-hero-interval, 10000ms) * 1.2) ease-out both;
}

@keyframes rt-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

.rt-hero__figure {
    display: block;
    height: 100%;
    min-height: calc(100svh - var(--rt-header-h, 0px));
    margin: 0;
}

.rt-hero__figure {
    position: relative;
}

.rt-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rt-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.55) 0%,
        rgba(10, 10, 10, 0.7) 55%,
        rgba(10, 10, 10, 0.92) 100%
    );
}

/* These override `.carousel .carousel-caption …` rules that exist both in the
   parent theme.css and earlier in this file, so they are scoped through
   .rt-hero .carousel-caption to win on specificity rather than !important. */
.rt-hero .carousel-caption.rt-hero__caption {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - var(--rt-header-h, 0px));
    max-width: 56rem;
    margin-inline: auto;
    padding: 8rem var(--rt-gutter) 6rem;
    text-align: center;
    top: auto;
    color: var(--rt-light);
    /* Parallax: the caption rises faster than the image it sits on as the page
       scrolls down. --rt-scroll is published on :root by custom.js and is
       simply absent under prefers-reduced-motion, so the fallback pins this to
       0 and the block stays put. The negative factor also replaces the
       translateY(-50%) the parent theme puts on .carousel-caption. */
    transform: translate3d(0, calc(var(--rt-scroll, 0px) * -0.3), 0);
    will-change: transform;
}

.rt-hero .carousel-caption .rt-hero__headline {
    font-size: clamp(2.75rem, 7vw, 6rem);
    color: #fff;
    margin-bottom: 1.5rem;
    text-shadow:
        0 0 40px rgba(var(--rt-orange-rgb), 0.35),
        0 2px 30px rgba(0, 0, 0, 0.6);
}

/* In the hero the accent carries the full glow treatment. */
.rt-hero .rt-hl {
    text-shadow:
        0 0 40px rgba(var(--rt-orange-rgb), 0.6),
        0 0 80px rgba(var(--rt-orange-rgb), 0.3);
    animation: rt-glow-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.rt-hero .carousel-caption .rt-hero__description {
    max-width: 42rem;
    margin-inline: auto;
    color: var(--rt-light);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
}

.rt-hero .carousel-caption .rt-hero__description :is(h3, .h3) {
    font-family: var(--rt-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rt-orange);
    text-shadow: none;
    margin-bottom: 0.75rem;
}

.rt-hero .carousel-caption .rt-hero__description p {
    color: var(--rt-gray);
    font-size: 1rem;
    margin-bottom: 0;
}

/* Indicators as thin bars, the active one stretched and orange. */
.rt-hero__indicators {
    z-index: 4;
    bottom: 2.5rem;
    margin-bottom: 0;
    gap: 0.5rem;
}

.rt-hero__indicators [data-bs-slide-to] {
    /* Bootstrap gives these 10px transparent top/bottom borders and
       content-box sizing; both are reset so the bar is what it looks like. */
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 999px;
    margin-inline: 0;
    background: rgba(255, 255, 255, 0.25);
    opacity: 1;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.rt-hero__indicators [data-bs-slide-to].active {
    width: 32px;
    background: var(--rt-orange);
    box-shadow: 0 0 12px rgba(var(--rt-orange-rgb), 0.8);
}

@media (max-width: 767px) {
    .rt-hero,
    .rt-hero .carousel,
    .rt-hero .carousel-inner,
    .rt-hero .carousel-item,
    .rt-hero__figure {
        min-height: calc(88svh - var(--rt-header-h, 0px));
    }

    /* Must match the specificity of the desktop caption rule above. */
    .rt-hero .carousel-caption.rt-hero__caption {
        min-height: calc(88svh - var(--rt-header-h, 0px));
        padding: 3rem var(--rt-gutter);
    }
}

/* --- rtcards, restyled as the support site's video cards ----------------- */

/* Wider than the reading container, and pulled up: the story section above
   already contributes its own bottom padding, so a full section gap on top
   would leave roughly 190px of empty space between the two. */
.rt-cards-section {
    padding-top: 0;
}

.rt-cards-section .rt-section__inner {
    max-width: var(--rt-container-wide);
}

.rt-cards {
    display: grid;
    grid-template-columns: repeat(var(--rt-cards-cols-desktop, 3), minmax(0, 1fr));
    gap: 2rem;
}

.rt-cards--scroll {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: var(--rt-cards-item-width, 320px);
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.rt-cards__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.rt-cards__item:hover,
.rt-cards__item:focus-visible {
    text-decoration: none;
    color: inherit;
}

.rt-cards__media {
    position: relative;
    z-index: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.rt-cards__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.rt-cards__item:hover .rt-cards__media img {
    transform: scale(1.05);
}

.rt-cards__body {
    flex: 1 1 auto;
}

.rt-cards__title {
    font-family: var(--rt-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--rt-orange);
    margin-bottom: 0.75rem;
}

.rt-cards__text {
    color: var(--rt-gray);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.rt-cards__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    transition: color 0.3s ease;
}

.rt-cards__cta .material-icons {
    font-size: 1.125rem;
}

.rt-cards__item:hover .rt-cards__cta {
    color: var(--rt-orange);
}

@media (max-width: 991px) {
    .rt-cards {
        grid-template-columns: repeat(var(--rt-cards-cols-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .rt-cards {
        grid-template-columns: repeat(var(--rt-cards-cols-mobile, 1), minmax(0, 1fr));
    }
}

/* --- Custom text block (origin story) ------------------------------------ */

.rt-home #custom-text {
    position: relative;
    z-index: 1;
    padding: var(--rt-section-gap) var(--rt-gutter) 3rem;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(17, 17, 17, 0.8),
        transparent
    );
    text-align: center;
}

.rt-home #custom-text .custom-text__content {
    max-width: var(--rt-container);
    margin-inline: auto;
}

.rt-home #custom-text :is(h2, .h2) {
    font-family: var(--rt-font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.05;
    font-size: clamp(1.875rem, 4vw, 3rem);
    color: #fff;
    margin-bottom: 1.5rem;
}

.rt-home #custom-text p {
    max-width: 42rem;
    margin-inline: auto;
    color: var(--rt-gray);
    line-height: 1.8;
}

/* The stored copy carries an empty paragraph and a run of four trailing <br>
   used as spacers in the previous layout. Section padding handles that spacing
   now, so they are collapsed here rather than edited out of the back office
   content. One break is deliberately left standing, so a genuine line break
   added later still shows. */
.rt-home #custom-text p:empty {
    display: none;
}

.rt-home #custom-text br + br,
.rt-home #custom-text p > br:last-child {
    display: none;
}

/* --- Featured products --------------------------------------------------- */

.rt-home .featured-products {
    position: relative;
    z-index: 1;
    padding-block: var(--rt-section-gap);
}

.rt-home .featured-products .section-title {
    font-family: var(--rt-font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: clamp(1.875rem, 4vw, 3rem);
    color: #fff;
    text-align: center;
    margin-bottom: 3rem;
}

/* Product miniatures take the rt-panel surface. Scoped to .rt-home so the
   category and search listings are untouched in this phase. */
.rt-home .product-miniature .card {
    background: var(--rt-card);
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-lg);
    overflow: hidden;
    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;
}

.rt-home .product-miniature:hover .card {
    border-color: var(--rt-border-hover);
    box-shadow: var(--rt-glow);
    transform: translateY(-4px);
}

.rt-home .featured-products-footer {
    margin-top: 3rem;
}


/* ==========================================================================
   RT HEADER — single bar, replaces Hummingbird's header-top + header-bottom
   ========================================================================== */

.rt-header__bar {
    background: rgba(10, 10, 10, 0.92);
    border-bottom: 1px solid var(--rt-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.rt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* Full viewport width: the brand sits hard left, the actions hard right. */
    width: 100%;
    padding: 0.875rem 2rem;
}

/* --- Logotype ------------------------------------------------------------ */

.rt-header__brand,
.rt-header__brand:hover,
.rt-header__brand:focus-visible {
    text-decoration: none;
}

.rt-header__h1 {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

.rt-brand {
    font-family: var(--rt-font-display);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--rt-orange);
    white-space: nowrap;
    animation: rt-brand-glow-pulse 1.5s ease-in-out infinite alternate;
}

.rt-brand__light {
    color: #fff;
}

/* --- Right-hand actions -------------------------------------------------- */

.rt-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rt-header__selectors {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rt-header__shop-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rt-header__cta {
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
}

/* Sign-in block inherited from ps_customersignin. */
.rt-header__actions .user-info .header-block__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--rt-radius-sm);
    color: var(--rt-light);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.rt-header__actions .user-info .header-block__action-btn:hover {
    color: var(--rt-orange);
    background: rgba(255, 255, 255, 0.06);
}

/* --- rt-select: language / currency dropdowns ---------------------------- */

.rt-select {
    position: relative;
}

.rt-select__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: var(--rt-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.rt-select__button:hover,
.rt-select__button:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.rt-select__flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    flex: 0 0 auto;
}

.rt-select__chevron {
    font-size: 1.125rem;
    transition: transform 0.2s ease;
}

.rt-select--open .rt-select__chevron {
    transform: rotate(180deg);
}

.rt-select__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 60;
    min-width: 13rem;
    padding: 0.25rem;
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    background: var(--rt-card);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.rt-select--compact .rt-select__menu {
    min-width: 8rem;
}

.rt-select__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 4px;
    color: var(--rt-light);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rt-select__option:hover,
.rt-select__option:focus-visible {
    background: rgba(var(--rt-orange-rgb), 0.15);
    color: #fff;
    text-decoration: none;
}

.rt-select__option--current {
    color: var(--rt-orange);
}

/* --- Burger + mobile panel ----------------------------------------------- */

.rt-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-sm);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.rt-header__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.rt-header__burger--open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.rt-header__burger--open span:nth-child(2) {
    opacity: 0;
}

.rt-header__burger--open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767px) {
    .rt-header__burger {
        display: flex;
        order: 2;
    }

    .rt-header__inner {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-inline: 1rem;
    }

    .rt-brand {
        font-size: 1rem;
    }

    /* The actions become a drop-down panel under the bar instead of
       overflowing the viewport horizontally. */
    .rt-header__actions {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.5rem 0 1rem;
        border-top: 1px solid var(--rt-border);
    }

    .rt-header__actions[hidden] {
        display: none;
    }

    .rt-header__selectors {
        justify-content: space-between;
    }

    .rt-header__selectors .rt-select {
        flex: 1 1 0;
    }

    .rt-select__button {
        width: 100%;
        justify-content: center;
    }

    .rt-select__menu {
        left: 0;
        right: 0;
        min-width: 0;
    }

    .rt-header__cta {
        justify-content: center;
    }

    .rt-header__shop-tools {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    /* Sign in: make it a full-width row like the other entries. */
    .rt-header__actions .user-info,
    .rt-header__actions .user-info .header-block,
    .rt-header__actions .user-info .header-block__action-btn {
        width: 100%;
    }

    .rt-header__actions .user-info .header-block__action-btn {
        justify-content: flex-start;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--rt-border);
        border-radius: var(--rt-radius-sm);
        background: rgba(255, 255, 255, 0.06);
    }

    /* Hummingbird labels the sign-in icon with `d-lg-inline d-none`, so the
       text is hidden below 992px. In the stacked panel an unlabelled icon is
       ambiguous, and Bootstrap's `d-none` is itself !important. */
    .rt-header__actions .header-block__title {
        display: inline !important;
    }
}

/* Hummingbird paints every header link with
   `.header a:not(.dropdown-item):not(.btn)` (specificity 0,3,1) and forces
   `--bs-primary` on hover. Without these restatements the dropdown's current
   entry would not read as selected, and the orange CTA would get orange text
   on hover. Specificity is raised deliberately rather than using !important. */

.header .rt-header__bar a.rt-btn.rt-btn--primary,
.header .rt-header__bar a.rt-btn.rt-btn--primary:hover,
.header .rt-header__bar a.rt-btn.rt-btn--primary:focus-visible {
    color: #fff;
}

.header .rt-select .rt-select__menu .rt-select__option {
    color: var(--rt-light);
}

.header .rt-select .rt-select__menu .rt-select__option--current {
    color: var(--rt-orange);
}

.header .rt-select .rt-select__menu .rt-select__option:hover,
.header .rt-select .rt-select__menu .rt-select__option:focus-visible {
    color: #fff;
}