/* ============================================================
   Refubly — base
   Split out of the old single refubly-theme.css, rule by rule: a selector
   rendered by exactly one page lives in that page's file, anything shared
   lives here. Media queries are re-wrapped per file, so each keeps only its
   own overrides.
   Load order: base -> chrome -> components -> <page>. Keep it.
   NOTE: theme sets html{font-size:62.5%} -> 1rem = 10px.
   ============================================================ */

/* ============================================================
   Refubly Theme — clean marketplace UI (landing redesign +
   global responsive polish). Loaded after the Wolmart theme CSS.
   NOTE: theme sets html{font-size:62.5%} → 1rem = 10px.
   ============================================================ */
/* ------------------------------------------------------------
   Self-hosted fonts (woff2, variable weight 100-900).
   No external requests, no JS loader — works on every device;
   the system-font stack below covers anything older.
   ------------------------------------------------------------ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-Variable-latin.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-Variable-latin-ext.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;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/Archivo-Variable-latin.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: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/Archivo-Variable-latin-ext.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;
}

:root {
    /* One stack, defined here and referenced everywhere. Inter is self-hosted
       above, so it is what actually renders; the rest is the fallback chain for
       the moment before it lands and for anything that cannot load it. */
    --rf-font: Inter, 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rf-font-heading: 'Archivo', Inter, 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ── Refubly brand palette (from the logo) ─────────────────────
       Deep Navy #0D1B3D · Royal Blue #1565FF · Sky Blue #00B4E6
       Emerald #07A64B · Fresh Green #7ED957 · Lime #C7F23A          */
    --rf-navy: #0D1B3D;
    --rf-royal: #1565FF;
    --rf-sky: #00B4E6;
    --rf-green: #07A64B;
    --rf-green-light: #7ED957;
    --rf-lime: #C7F23A;

    /* Brand gradients (left / right / bottom logo segments) */
    --rf-gradient-blue: linear-gradient(135deg, #0D1B3D 0%, #1565FF 55%, #00B4E6 100%);
    --rf-gradient-green: linear-gradient(135deg, #07A64B 0%, #7ED957 55%, #C7F23A 100%);
    --rf-gradient-teal: linear-gradient(135deg, #0D1B3D 0%, #0097A7 55%, #00B4E6 100%);

    /* Semantic roles — Emerald leads (matches the wordmark), Navy for ink.
       These are deliberately a shade deeper than the raw --rf-green above:
       #07A64B is only 3.19:1 on white, which fails WCAG AA (4.5:1) both as
       small text on white and as white text on a green fill. #05803a is 5.05:1
       either way. The raw brand tokens keep the original hue for gradients,
       the logo and other large/decorative use. */
    --rf-primary: #05803a;
    --rf-primary-dark: #04682f;
    --rf-primary-soft: #e8f7ef;
    --rf-ink: #0D1B3D;
    --rf-text: #4b5563;
    /* #8a93a3 was 3.09:1 on white; #6b7280 is 4.83:1. */
    --rf-muted: #6b7280;
    --rf-border: #e8ebef;
    --rf-border-soft: #f2f4f6;
    --rf-surface: #ffffff;
    --rf-bg-soft: #f6f7f9;
    --rf-success: #05803a;
    --rf-radius: 1.2rem;
    --rf-radius-sm: .8rem;
    --rf-shadow: 0 1px 2px rgba(16, 24, 32, .05);
    --rf-shadow-hover: 0 10px 28px rgba(16, 24, 32, .12);
}

/* ------------------------------------------------------------
   0. Typography — single place to change the site fonts.
   Body/UI: Inter. Headings: Archivo (bold, tight tracking).
   ------------------------------------------------------------ */

body,
.product-name, .banner-subtitle, .post-title,
.btn, .header, .footer, .form-control, .select2,
.nav-link, .menu, .dropdown,
.category-name, .icon-box-content p,
input, select, textarea, button {
    font-family: var(--rf-font) !important;
}

@keyframes rfSvcFadeA { 0%,42%{opacity:1} 50%,92%{opacity:0} 100%{opacity:1} }

@keyframes rfSvcFadeB { 0%,42%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0} }

@keyframes rfSvcSlideA { 0%,42%{transform:translateX(0)} 50%,92%{transform:translateX(-110%)} 100%{transform:translateX(0)} }

@keyframes rfSvcSlideB { 0%,42%{transform:translateX(110%)} 50%,92%{transform:translateX(0)} 100%{transform:translateX(110%)} }

@keyframes rfSvcZoomA { 0%,42%{opacity:1;transform:scale(1)} 50%,92%{opacity:0;transform:scale(1.4)} 100%{opacity:1;transform:scale(1)} }

@keyframes rfSvcZoomB { 0%,42%{opacity:0;transform:scale(.6)} 50%,92%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.6)} }

@keyframes rfSvcFlip { 0%,42%{transform:rotateY(0)} 50%,92%{transform:rotateY(180deg)} 100%{transform:rotateY(0)} }

@keyframes rfSvcShine { 0%{transform:translateX(-130%)} 55%,100%{transform:translateX(130%)} }

@keyframes rfSvcFlashPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

@keyframes rfSvcPopup { 0%,68%,100%{transform:scale(1)} 80%{transform:scale(1.2)} 90%{transform:scale(.94)} }

@keyframes rfSvcPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--rf-primary);
}

/* ------------------------------------------------------------
   12. Global polish & responsive fixes (all pages)
   ------------------------------------------------------------ */

body {
    overflow-x: hidden;
}

@keyframes rfShimmer { 100% { transform: translateX(100%); } }

@keyframes rfMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes rfModalIn {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------
   99. Accessibility utilities
   Added while clearing the Lighthouse a11y failures. Keep at the
   end of the file so these win over earlier equal-specificity rules.
   ------------------------------------------------------------ */
/* Visually hidden but still announced by screen readers. Used for the
   header search/category labels, which are visually implied by the
   surrounding UI but need a real accessible name. */

.sr-only {
    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;
}

/* Every carousel's dots, not just the hero: Swiper's default bullet is an
   8x8 tap target and WCAG asks for at least 24x24. Grow the hit area while
   leaving the visible dot its original size. */

.swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    background: transparent;
    opacity: 1;
    position: relative;
    margin: 0 2px;
}

.swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .8rem;
    height: .8rem;
    border-radius: 99px;
    background: currentColor;
    opacity: .45;
    transition: background .25s, opacity .25s;
}

.swiper-pagination-bullet-active::after {
    background: var(--rf-primary);
    opacity: 1;
}

/* Keep a visible focus ring for keyboard users. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--rf-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Rich text rendered from the admin editor (.rf-richtext)

   Blog posts and product descriptions are authored in CKEditor 5,
   which styles its editing area with .ck-content. The storefront
   used to drop that HTML into the theme unstyled, so headings,
   lists, tables, quotes and alignment all rendered differently
   from what the admin saw. These rules mirror ckeditor5.css so a
   saved post looks the same on both sides.
   NOTE: theme sets html{font-size:62.5%} → 1rem = 10px.
   ------------------------------------------------------------ */

.rf-richtext,
.rf-richtext p,
.rf-richtext li,
.rf-richtext td,
.rf-richtext th,
.rf-richtext blockquote {
    /* Admin-authored copy has to read as part of the site. Without this the
       short description inherited the theme's Poppins (a Wolmart leftover the
       site does not even load) while the long description rendered in Inter —
       the same product, two different typefaces on one page. */
    font-family: var(--rf-font);
    color: var(--rf-text);
    font-size: 1.5rem;
    line-height: 1.75;
    letter-spacing: normal;
    word-break: break-word;
}

/* Headings inside editor copy follow the site's heading face. */
.rf-richtext h1,
.rf-richtext h2,
.rf-richtext h3,
.rf-richtext h4,
.rf-richtext h5,
.rf-richtext h6 {
    font-family: var(--rf-font-heading);
    letter-spacing: -.02em;
}

.rf-richtext > *:first-child { margin-top: 0; }

.rf-richtext > *:last-child { margin-bottom: 0; }

.rf-richtext p { font-size: inherit; line-height: inherit; margin: 0 0 1.4rem; }

.rf-richtext h1,
.rf-richtext h2,
.rf-richtext h3,
.rf-richtext h4,
.rf-richtext h5,
.rf-richtext h6 {
    color: var(--rf-ink);
    font-weight: 700;
    line-height: 1.3;
    margin: 2.8rem 0 1.2rem;
}

.rf-richtext h1 { font-size: 2.8rem; }

.rf-richtext h2 { font-size: 2.4rem; }

.rf-richtext h3 { font-size: 2rem; }

.rf-richtext h4 { font-size: 1.8rem; }

.rf-richtext h5 { font-size: 1.6rem; }

.rf-richtext h6 { font-size: 1.5rem; }

/* The theme's global reset flattens list markers; the editor shows them. */

.rf-richtext ul,
.rf-richtext ol { margin: 0 0 1.4rem; padding-left: 2.6rem; }

.rf-richtext ul { list-style: disc outside; }

.rf-richtext ol { list-style: decimal outside; }

.rf-richtext ul ul { list-style: circle outside; }

.rf-richtext li { margin-bottom: .5rem; }

.rf-richtext li > ul,
.rf-richtext li > ol { margin-bottom: 0; }

.rf-richtext a { color: var(--rf-primary); text-decoration: underline; }

.rf-richtext a:hover { color: var(--rf-primary-dark); }

.rf-richtext strong, .rf-richtext b { font-weight: 700; color: var(--rf-ink); }

.rf-richtext blockquote {
    margin: 0 0 1.4rem;
    padding: .2rem 0 .2rem 2rem;
    border-left: 4px solid var(--rf-primary);
    font-style: italic;
    color: var(--rf-muted);
    overflow: hidden;
}

.rf-richtext hr {
    height: 3px;
    margin: 2.4rem 0;
    background: var(--rf-border);
    border: 0;
}

.rf-richtext code {
    background: var(--rf-bg-soft);
    border: 1px solid var(--rf-border);
    border-radius: .4rem;
    padding: .1em .35em;
    font-size: .95em;
}

/* CKEditor wraps tables and images in <figure>; give them the same
   centred block treatment the editor uses. */

.rf-richtext figure { margin: 1.8rem 0; }

.rf-richtext figure.table { display: block; overflow-x: auto; }

.rf-richtext figure.image { display: table; margin: 1.8rem auto; }

.rf-richtext figure.image img { display: block; }

.rf-richtext figcaption {
    font-size: 1.3rem;
    color: var(--rf-muted);
    text-align: center;
    padding: .8rem .4rem 0;
}

.rf-richtext table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--rf-border);
}

.rf-richtext th,
.rf-richtext td {
    border: 1px solid var(--rf-border);
    padding: .9rem 1.1rem;
    text-align: left;
    vertical-align: top;
}

.rf-richtext th { background: var(--rf-bg-soft); color: var(--rf-ink); font-weight: 600; }

.rf-richtext img { max-width: 100%; height: auto; border-radius: var(--rf-radius-sm); }

/* Image styles emitted by the editor's image toolbar. */

.rf-richtext .image-style-block { display: table; margin: 1.8rem auto; }

.rf-richtext .image-style-align-left { float: left; margin: .6rem 1.8rem 1.2rem 0; max-width: 50%; }

.rf-richtext .image-style-align-right { float: right; margin: .6rem 0 1.2rem 1.8rem; max-width: 50%; }

.rf-richtext .image-style-side { float: right; margin: .6rem 0 1.2rem 1.8rem; max-width: 50%; }

.rf-richtext .image-inline { display: inline-flex; max-width: 100%; vertical-align: middle; }

.rf-richtext::after { content: ""; display: block; clear: both; }

/* Alignment set with the editor's align button (incl. justify). */

.rf-richtext [style*="text-align:justify"],
.rf-richtext [style*="text-align: justify"] { text-wrap: pretty; }

/* Legacy paste artefacts. Older posts were pasted from Google Docs and carry
   <span style="font-size:15px;color:#000;background-color:transparent"> on
   nearly every word — the editor strips those on load, so the frontend was
   showing a different size and colour than the admin preview. Neutralising
   them here makes the two match without rewriting stored content; re-saving a
   post in the admin removes them for good. */

.rf-richtext span[style] {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
}

/* Colour is no longer blanket-neutralised here: the editor has Font Color and
   Font Background Color, so an author picking Refubly Green has to get it.
   The Google Docs artefact is still stripped, and it is recognisable — it
   always pairs its colour with background-color:transparent, which nothing an
   author picks in the editor ever does. */
.rf-richtext span[style*="background-color:transparent"],
.rf-richtext span[style*="background-color: transparent"] {
    color: inherit !important;
    background-color: transparent !important;
}

.rf-richtext [style*="line-height"] { line-height: inherit !important; }

@media (max-width: 767px) {
    .rf-richtext { font-size: 1.45rem; }

    .rf-richtext h1 { font-size: 2.4rem; }

    .rf-richtext h2 { font-size: 2.1rem; }

    .rf-richtext h3 { font-size: 1.9rem; }

    .rf-richtext h4 { font-size: 1.7rem; }

    .rf-richtext .image-style-align-left,
        .rf-richtext .image-style-align-right,
        .rf-richtext .image-style-side { float: none; margin: 1.8rem auto; max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Editor-authored lists (.rf-richtext)
   The short description indented 18px and the long one 26px, item spacing came
   from a 5px margin fighting a line-height 1.5px taller than the block's, and
   wrapped items ran flush against the next one. One rhythm for both.
   ══════════════════════════════════════════════════════════════════════════ */
.rf-richtext ul,
.rf-richtext ol {
    margin: 0 0 1.4rem;
    padding-left: 2.2rem;
}

.rf-richtext li {
    margin: 0 0 .7rem;
    padding-left: .3rem;
    line-height: 1.65;
}

.rf-richtext li:last-child {
    margin-bottom: 0;
}

/* Nested lists sit tight under their parent rather than opening a full gap. */
.rf-richtext li > ul,
.rf-richtext li > ol {
    margin: .7rem 0 0;
    padding-left: 2rem;
}

/* A brand-tinted marker reads as deliberate; the default black dot at 15px
   competed with the text. */
.rf-richtext li::marker {
    color: var(--rf-primary);
}

.rf-richtext > ul:last-child,
.rf-richtext > ol:last-child,
.rf-richtext > p:last-child {
    margin-bottom: 0;
}

/* ── Defences against pasted-in editor markup ──────────────────────────────
   Product copy is pasted from spec sheets and Word, which brings artefacts
   the author cannot see in the editor. Two show up on nearly every product. */

/* A stray <br> as the very first thing in a list item leaves the bullet
   stranded on its own line with the text starting below it. */
.rf-richtext li > br:first-child,
.rf-richtext li > *:first-child > br:first-child {
    display: none;
}

/* Pasted spans arrive carrying their source's font-size, so one description
   rendered at three different sizes. The editor offers no font-size control,
   which makes every inline size a paste artefact — the site's type scale wins.

   Colour is deliberately NOT normalised here. It was, to strip the washed-out
   grey (rgb(102,102,102)) that pastes bring with them, but the editor now has
   Font Color and Font Background Color: an author picking Refubly Green has to
   see Refubly Green. A bad pasted colour is cleared with Remove Format. */
.rf-richtext [style*="font-size"]:not(a) {
    font-size: inherit !important;
}

/* Text the author highlighted needs room to breathe against its own fill. */
.rf-richtext [style*="background-color"] {
    padding: .1em .3em;
    border-radius: .3rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ── Editor tables: label/value layout ─────────────────────────────────────
   A spec table is a label column and a value column. Left to size itself the
   browser gave the labels ~85% of the width and squeezed the values into what
   was left, because the value cells are shorter than the labels. */
.rf-richtext table tbody tr > th:first-child {
    width: 32%;
    min-width: 12rem;
}

@media (max-width: 575px) {
    .rf-richtext table tbody tr > th:first-child {
        width: 40%;
        min-width: 0;
    }
}

/* Editor headings sit *inside* a section whose own title is 2.1rem, so an h2
   at 2.4rem made the body copy shout louder than the section it belongs to. */
.rf-richtext h2 { font-size: 1.9rem; }
.rf-richtext h3 { font-size: 1.65rem; }
.rf-richtext h4 { font-size: 1.5rem; }

/* First heading in a block never needs the full top margin — the section
   heading is already directly above it. */
.rf-richtext > h2:first-child,
.rf-richtext > h3:first-child {
    margin-top: 0;
}