/*
Theme Name: Ready Commerce Purple
Theme URI: https://havenhaven.com/
Description: High-density WooCommerce merchandising storefront — deep purple palette, modular full-length homepage (hero, deal tiers, shop-the-look, room ideas, app promo, trust footer). Astra child theme.
Author: Haven Divan
Version: 1.0.1
Template: astra
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ready-commerce-purple
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Brand */
    --rcp-purple: #4a154b;
    --rcp-purple-deep: #350f36;
    --rcp-purple-mid: #6a2a80;
    --rcp-violet: #7b3fa0;
    --rcp-violet-soft: #efe6f5;
    --rcp-violet-tint: #f7f2fa;

    /* Accents */
    --rcp-yellow: #ffd400;
    --rcp-yellow-deep: #f2b705;
    --rcp-teal: #0e9c9c;
    --rcp-teal-soft: #e2f4f4;
    --rcp-coral: #e8402a;
    --rcp-coral-deep: #c22a17;
    --rcp-blue-soft: #e4eefb;
    --rcp-blue: #1f5fbf;
    --rcp-pink-soft: #fbe6ee;
    --rcp-mint-soft: #e3f5ec;
    --rcp-sand: #f4ece2;

    /* Neutrals */
    --rcp-ink: #1f1b24;
    --rcp-body: #4d4757;
    --rcp-muted: #7c7689;
    --rcp-line: #e6e2ec;
    --rcp-line-soft: #f0edf4;
    --rcp-bg: #ffffff;
    --rcp-bg-alt: #f8f7fa;

    /* Shape */
    --rcp-radius-sm: 6px;
    --rcp-radius: 10px;
    --rcp-radius-lg: 16px;
    --rcp-radius-xl: 24px;
    --rcp-shadow: 0 1px 2px rgba(31, 27, 36, .06), 0 4px 16px rgba(31, 27, 36, .06);
    --rcp-shadow-lg: 0 8px 32px rgba(31, 27, 36, .12);

    /* Metrics */
    --rcp-max: 1360px;
    --rcp-gutter: 20px;
    --rcp-section-y: 44px;

    --rcp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

.rcp *,
.rcp *::before,
.rcp *::after {
    box-sizing: border-box;
}

body.rcp {
    margin: 0;
    font-family: var(--rcp-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--rcp-body);
    background: var(--rcp-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* :where() keeps these element defaults at zero specificity so any component
   class below can recolour a heading or link without an !important arms race. */
.rcp :where(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 .4em;
    color: var(--rcp-ink);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.015em;
}

.rcp :where(p) {
    margin: 0 0 1em;
}

.rcp :where(a) {
    color: var(--rcp-purple);
    text-decoration: none;
    transition: color .15s ease, opacity .15s ease;
}

.rcp :where(a:hover) {
    color: var(--rcp-violet);
}

.rcp img {
    max-width: 100%;
    height: auto;
    display: block;
}

.rcp ul,
.rcp ol {
    margin: 0;
    padding: 0;
}

.rcp li {
    list-style: none;
}

.rcp button {
    font-family: inherit;
    cursor: pointer;
}

/*
 * Baseline size for every rcp_icon() SVG. Context rules (`.rcp-action svg`,
 * `.rcp-perk__icon svg`, …) are more specific and still win — this only stops an
 * icon dropped into an unstyled context from falling back to the SVG default
 * intrinsic size (300x150) and blowing the layout apart.
 */
.rcp-i {
    width: 18px;
    height: 18px;
    flex: none;
}

.rcp-screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rcp :focus-visible {
    outline: 2px solid var(--rcp-violet);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.rcp-container {
    width: 100%;
    max-width: var(--rcp-max);
    margin: 0 auto;
    padding: 0 var(--rcp-gutter);
}

.rcp-container--wide {
    max-width: 1560px;
}

.rcp-section {
    padding: var(--rcp-section-y) 0;
}

.rcp-section--tight {
    padding: 26px 0;
}

.rcp-section--flush-top {
    padding-top: 0;
}

.rcp-section--flush-bottom {
    padding-bottom: 0;
}

.rcp-section--alt {
    background: var(--rcp-bg-alt);
}

.rcp-section--tint {
    background: var(--rcp-violet-tint);
}

.rcp-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.rcp-section__heading {
    min-width: 0;
}

.rcp-section__eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rcp-violet);
}

.rcp-section__title {
    margin: 0;
    font-size: 26px;
}

.rcp-section__sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--rcp-muted);
}

.rcp-section__link {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--rcp-purple);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.rcp-section__link:hover {
    border-bottom-color: currentColor;
}

.rcp-section__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* ==========================================================================
   4. Buttons & badges
   ========================================================================== */

.rcp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--rcp-purple);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.rcp-btn:hover {
    background: var(--rcp-violet);
    color: #fff;
    transform: translateY(-1px);
}

.rcp-btn--light {
    background: #fff;
    color: var(--rcp-purple);
}

.rcp-btn--light:hover {
    background: var(--rcp-yellow);
    color: var(--rcp-purple-deep);
}

.rcp-btn--outline {
    background: transparent;
    border-color: currentColor;
    color: var(--rcp-purple);
}

.rcp-btn--outline:hover {
    background: var(--rcp-purple);
    border-color: var(--rcp-purple);
    color: #fff;
}

.rcp-btn--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.rcp-btn--outline-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--rcp-purple);
}

.rcp-btn--ink {
    background: var(--rcp-ink);
}

.rcp-btn--ink:hover {
    background: #000;
}

.rcp-btn--sm {
    padding: 9px 18px;
    font-size: 13px;
}

.rcp-btn--lg {
    padding: 15px 34px;
    font-size: 15px;
}

.rcp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rcp-coral);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.rcp-badge--violet {
    background: var(--rcp-violet);
}

.rcp-badge--yellow {
    background: var(--rcp-yellow);
    color: var(--rcp-purple-deep);
}

.rcp-badge--teal {
    background: var(--rcp-teal);
}

.rcp-badge--ink {
    background: var(--rcp-ink);
}

/* Media wrapper keeps every image slot the same aspect no matter the source. */
.rcp-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rcp-radius);
    background: var(--rcp-bg-alt);
}

.rcp-media::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.rcp-media--4x3::before {
    padding-top: 75%;
}

.rcp-media--3x2::before {
    padding-top: 66.6667%;
}

.rcp-media--16x9::before {
    padding-top: 56.25%;
}

.rcp-media--4x5::before {
    padding-top: 125%;
}

.rcp-media--wide::before {
    padding-top: 38%;
}

.rcp-media > img,
.rcp-media > picture > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.rcp-media__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.rcp-media__tag--right {
    left: auto;
    right: 10px;
}

/* ==========================================================================
   5. Header — utility bar
   ========================================================================== */

.rcp-utility {
    background: var(--rcp-purple-deep);
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.4;
}

.rcp-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.rcp-utility__list {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.rcp-utility__list--end {
    justify-content: flex-end;
}

.rcp-utility a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rcp-utility a:hover {
    color: #fff;
}

.rcp-utility svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.rcp-utility__sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .22);
}

/* ==========================================================================
   6. Header — main bar
   ========================================================================== */

.rcp-header {
    background: #fff;
    border-bottom: 1px solid var(--rcp-line-soft);
}

.rcp-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.rcp-header__brand {
    flex: none;
}

.rcp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--rcp-purple);
}

.rcp-brand__mark {
    width: 38px;
    height: 38px;
    flex: none;
}

.rcp-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.rcp-brand__name {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--rcp-purple);
}

.rcp-brand__tagline {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rcp-muted);
}

.rcp-brand .custom-logo,
/*
 * Explicit height, not max-height: an SVG logo carries no intrinsic dimensions,
 * so `height: auto` gives it no ratio to shrink against and it balloons to the
 * browser default or fills the flex line. !important because the parent theme
 * also styles logo images.
 */
body.rcp .rcp-brand__logo,
body.rcp .rcp-brand .custom-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 210px !important;
    max-height: 44px !important;
    object-fit: contain;
    flex: none;
}

body.rcp .rcp-footer .rcp-brand__logo,
body.rcp .rcp-footer .custom-logo {
    width: 75px !important;
    height: 75px !important;
    max-width: 75px !important;
    max-height: 75px !important;
    /* contain, so a non-square logo is fitted inside the box, never stretched */
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 720px) {
    body.rcp .rcp-brand__logo,
    body.rcp .rcp-brand .custom-logo {
        height: 34px !important;
        max-height: 34px !important;
        max-width: 150px !important;
    }

    body.rcp .rcp-footer .rcp-brand__logo,
    body.rcp .rcp-footer .custom-logo {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }
}

/* Search */
.rcp-search {
    flex: 1 1 auto;
    min-width: 0;
}

.rcp-search__form {
    display: flex;
    align-items: stretch;
    height: 46px;
    border: 2px solid var(--rcp-purple);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.rcp-search__scope {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--rcp-line);
}

.rcp-search__scope select {
    appearance: none;
    -webkit-appearance: none;
    height: 100%;
    max-width: 168px;
    padding: 0 30px 0 20px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rcp-ink);
    cursor: pointer;
}

.rcp-search__scope::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--rcp-muted);
    border-bottom: 2px solid var(--rcp-muted);
    transform: rotate(45deg);
    pointer-events: none;
}

.rcp-search__field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 18px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--rcp-ink);
}

.rcp-search__field::placeholder {
    color: var(--rcp-muted);
}

.rcp-search__field:focus {
    outline: none;
}

.rcp-search__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 24px;
    border: 0;
    background: var(--rcp-purple);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background .18s ease;
}

.rcp-search__submit:hover {
    background: var(--rcp-violet);
}

.rcp-search__submit svg {
    width: 17px;
    height: 17px;
}

/* Header actions */
.rcp-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rcp-action {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    border-radius: var(--rcp-radius);
    color: var(--rcp-ink);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    transition: background .15s ease;
}

.rcp-action:hover {
    background: var(--rcp-violet-tint);
    color: var(--rcp-purple);
}

.rcp-action svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
}

.rcp-action__count {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rcp-coral);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
}

.rcp-action__amount {
    color: var(--rcp-purple);
    font-weight: 700;
}

/* ==========================================================================
   7. Header — primary navigation
   ========================================================================== */

.rcp-nav {
    background: var(--rcp-purple);
    color: #fff;
}

.rcp-nav__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
}

.rcp-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.rcp-menu > li {
    position: relative;
}

.rcp-menu > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 15px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.rcp-menu > li > a:hover,
.rcp-menu > li.current-menu-item > a,
.rcp-menu > li:hover > a {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.rcp-menu > li.rcp-menu-sale > a,
.rcp-menu > li.menu-item-sale > a {
    color: var(--rcp-yellow);
    font-weight: 800;
}

.rcp-menu .menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .8;
}

/* Dropdowns */
.rcp-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 232px;
    padding: 8px;
    margin: 0;
    background: #fff;
    border-radius: var(--rcp-radius);
    box-shadow: var(--rcp-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.rcp-menu li:hover > .sub-menu,
.rcp-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rcp-menu .sub-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--rcp-radius-sm);
    color: var(--rcp-body);
    font-size: 13.5px;
    font-weight: 500;
}

.rcp-menu .sub-menu a:hover {
    background: var(--rcp-violet-tint);
    color: var(--rcp-purple);
}

.rcp-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.rcp-nav__aside {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}

.rcp-nav__aside a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rcp-nav__aside a:hover {
    color: #fff;
}

.rcp-nav__aside svg {
    width: 15px;
    height: 15px;
}

/* Mobile toggle */
.rcp-nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--rcp-radius-sm);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.rcp-nav-toggle svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   8. Hero
   ========================================================================== */

.rcp-hero {
    padding: 22px 0 0;
}

.rcp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 16px;
}

.rcp-hero__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 36px;
    border-radius: var(--rcp-radius-lg);
    background: linear-gradient(150deg, var(--rcp-violet-soft) 0%, #e2d5ee 100%);
    color: var(--rcp-purple-deep);
}

.rcp-hero__kicker {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 12px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--rcp-purple);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.rcp-hero__title {
    margin: 0 0 12px;
    font-size: 42px;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--rcp-purple-deep);
}

.rcp-hero__title em {
    display: block;
    font-style: normal;
    color: var(--rcp-coral);
}

.rcp-hero__text {
    margin: 0 0 22px;
    font-size: 15px;
    color: #5b3f66;
}

.rcp-hero__meta {
    margin: 18px 0 0;
    font-size: 12px;
    color: #6f5478;
}

.rcp-hero__panel .rcp-btn {
    align-self: flex-start;
}

.rcp-hero__showcase {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-height: 420px;
}

.rcp-hero__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rcp-radius-lg);
    background: var(--rcp-bg-alt);
}

.rcp-hero__tile--lead {
    grid-row: span 2;
}

.rcp-hero__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.rcp-hero__tile:hover img {
    transform: scale(1.04);
}

.rcp-hero__tile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 22px;
    background: linear-gradient(to top, rgba(24, 12, 26, .78), rgba(24, 12, 26, 0));
    color: #fff;
}

.rcp-hero__tile-title {
    display: block;
    margin: 0 0 2px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: #fff;
}

.rcp-hero__tile-sub {
    display: block;
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .85);
}

.rcp-hero__discount {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--rcp-coral);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.02em;
    box-shadow: 0 4px 14px rgba(232, 64, 42, .38);
}

/* ==========================================================================
   9. Thumb strip (square sub-categories)
   ========================================================================== */

.rcp-thumbs {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

/* Column count comes from the block (see thumb-strip.php). Declared before the
   media queries in section 26 so the responsive overrides still take precedence. */
.rcp-thumbs--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcp-thumbs--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rcp-thumbs--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rcp-thumbs--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rcp-thumbs--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rcp-thumbs--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rcp-thumbs--cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.rcp-thumb {
    display: block;
    text-align: center;
    color: var(--rcp-ink);
}

.rcp-thumb .rcp-media {
    border-radius: var(--rcp-radius);
    margin-bottom: 9px;
}

.rcp-thumb:hover .rcp-media img {
    transform: scale(1.06);
}

.rcp-thumb__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.rcp-thumb:hover .rcp-thumb__label {
    color: var(--rcp-purple);
}

.rcp-thumb__meta {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--rcp-muted);
}

/* Circular quick links */
.rcp-circles {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.rcp-circle {
    flex: 0 0 auto;
    width: 104px;
    text-align: center;
    color: var(--rcp-ink);
}

.rcp-circle__ring {
    position: relative;
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 10px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rcp-violet) 0%, var(--rcp-coral) 100%);
    transition: transform .2s ease;
}

.rcp-circle__ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

.rcp-circle:hover .rcp-circle__ring {
    transform: translateY(-3px) scale(1.03);
}

.rcp-circle__label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}

/* ==========================================================================
   10. Product cards
   ========================================================================== */

.rcp-grid {
    display: grid;
    gap: 18px;
}

.rcp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rcp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rcp-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rcp-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.rcp-product {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--rcp-line-soft);
    border-radius: var(--rcp-radius-lg);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rcp-product:hover {
    border-color: transparent;
    box-shadow: var(--rcp-shadow);
    transform: translateY(-2px);
}

.rcp-product__link {
    display: block;
}

.rcp-product__media {
    margin-bottom: 12px;
    border-radius: var(--rcp-radius);
    background: var(--rcp-bg-alt);
}

.rcp-product:hover .rcp-product__media img {
    transform: scale(1.05);
}

.rcp-product__wish {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--rcp-muted);
    box-shadow: 0 1px 4px rgba(31, 27, 36, .12);
    opacity: 0;
    transition: opacity .18s ease, color .18s ease;
}

.rcp-product:hover .rcp-product__wish,
.rcp-product__wish:focus-visible {
    opacity: 1;
}

.rcp-product__wish svg {
    width: 16px;
    height: 16px;
}

.rcp-product__wish:hover,
.rcp-product__wish.is-active {
    color: var(--rcp-coral);
}

.rcp-product__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0 4px 4px;
}

.rcp-product__brand {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rcp-muted);
}

.rcp-product__title {
    margin: 0 0 8px;
    /* Two lines reserved so ratings and prices align across a row. */
    min-height: 2.8em;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--rcp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rcp-product__title a {
    color: inherit;
}

.rcp-product__title a:hover {
    color: var(--rcp-purple);
}

.rcp-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
}

.rcp-rating__stars {
    position: relative;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1.5px;
    line-height: 1;
    color: var(--rcp-line);
    white-space: nowrap;
}

.rcp-rating__stars::before {
    content: "★★★★★";
}

.rcp-rating__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--rcp-yellow-deep);
    white-space: nowrap;
}

.rcp-rating__fill::before {
    content: "★★★★★";
}

.rcp-rating__count {
    font-size: 11.5px;
    color: var(--rcp-muted);
}

.rcp-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 7px;
    /* Reserve the second line so cards with and without a "Save x%" chip keep
       their price block — and therefore the button below it — on one baseline. */
    min-height: 44px;
    align-content: flex-start;
    margin: 0;
}

.rcp-price__now {
    font-size: 17px;
    font-weight: 800;
    color: var(--rcp-ink);
    letter-spacing: -.02em;
}

.rcp-price--sale .rcp-price__now {
    color: var(--rcp-coral);
}

.rcp-price__was {
    font-size: 12.5px;
    color: var(--rcp-muted);
    text-decoration: line-through;
}

.rcp-price__off {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--rcp-coral);
}

/* WooCommerce price markup (ranges, del/ins) inside the theme's card. Block, not
   flex, so the en dash in "£150.00 – £300.00" sits on the baseline. */
.rcp-price--html {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--rcp-ink);
    letter-spacing: -.02em;
}

.rcp-price--html del {
    margin-right: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--rcp-muted);
}

.rcp-price--html ins {
    text-decoration: none;
    color: var(--rcp-coral);
}

.rcp-price--html .woocommerce-Price-currencySymbol {
    font-size: .9em;
}

/*
 * WooCommerce's price markup carries "Original price was: …" / "Current price
 * is: …" in a .screen-reader-text span. That is normally hidden by WooCommerce's
 * or the parent theme's stylesheet — pin it here so the prices can never render
 * with that sentence visible if either is dequeued.
 */
.rcp .screen-reader-text,
.rcp .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rcp-price--html small,
.rcp-price--html .from {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rcp-muted);
    letter-spacing: 0;
}

.rcp-product__note {
    /* Pushed to the bottom of the card so every "Add to Basket" lines up across
       a row, whether or not the product carries a delivery note. */
    margin: 8px 0 0;
    padding-top: 2px;
    margin-top: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rcp-teal);
}

.rcp-product__note + .rcp-product__cart {
    margin-top: 8px;
}

.rcp-product__cart {
    margin-top: auto;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--rcp-line);
    border-radius: 999px;
    background: #fff;
    color: var(--rcp-purple);
    font-size: 12.5px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.rcp-product__cart:hover {
    background: var(--rcp-purple);
    border-color: var(--rcp-purple);
    color: #fff;
}

/* Compact variant for the 6-across micro grid */
.rcp-product--mini {
    padding: 8px;
}

.rcp-product--mini .rcp-product__title {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
}

.rcp-product--mini .rcp-price__now {
    font-size: 15px;
}

.rcp-product--mini .rcp-product__cart {
    display: none;
}

/* ==========================================================================
   11. Carousel rail
   ========================================================================== */

.rcp-rail {
    position: relative;
}

.rcp-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 5 * 18px) / 6);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.rcp-rail__track::-webkit-scrollbar {
    display: none;
}

.rcp-rail__track > * {
    scroll-snap-align: start;
}

.rcp-rail--4 .rcp-rail__track {
    grid-auto-columns: calc((100% - 3 * 18px) / 4);
}

.rcp-rail--5 .rcp-rail__track {
    grid-auto-columns: calc((100% - 4 * 18px) / 5);
}

.rcp-rail__nav {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rcp-line);
    border-radius: 50%;
    background: #fff;
    color: var(--rcp-purple);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.rcp-rail__nav:hover:not(:disabled) {
    background: var(--rcp-purple);
    border-color: var(--rcp-purple);
    color: #fff;
}

.rcp-rail__nav:disabled {
    opacity: .35;
    cursor: default;
}

.rcp-rail__nav svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   12. Deal tiles (price points)
   ========================================================================== */

.rcp-deals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rcp-deal {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 172px;
    padding: 22px;
    overflow: hidden;
    border-radius: var(--rcp-radius-lg);
    background: linear-gradient(135deg, #f0512f 0%, #d61f4a 100%);
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.rcp-deal:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(214, 31, 74, .28);
}

.rcp-deal::after {
    content: "";
    position: absolute;
    right: -46px;
    bottom: -56px;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.rcp-deal--2 { background: linear-gradient(135deg, #ff7a18 0%, #e8402a 100%); }
.rcp-deal--3 { background: linear-gradient(135deg, #e8402a 0%, #a01a6d 100%); }
.rcp-deal--4 { background: linear-gradient(135deg, #d61f4a 0%, #6a2a80 100%); }

.rcp-deal__eyebrow {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .9;
}

.rcp-deal__price {
    position: relative;
    z-index: 1;
    display: block;
    margin: 10px 0 0;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
}

.rcp-deal__desc {
    position: relative;
    z-index: 1;
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    opacity: .92;
}

.rcp-deal__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 800;
}

.rcp-deal__cta svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   13. Banners
   ========================================================================== */

/* Slim promo strip */
.rcp-strip {
    background: var(--rcp-violet);
    color: #fff;
}

.rcp-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 15px var(--rcp-gutter);
    text-align: center;
}

.rcp-strip__text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.rcp-strip__text strong {
    color: var(--rcp-yellow);
}

.rcp-strip__code {
    padding: 3px 10px;
    border: 1px dashed rgba(255, 255, 255, .6);
    border-radius: var(--rcp-radius-sm);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
}

.rcp-strip__link {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, .6);
}

.rcp-strip__link:hover {
    color: var(--rcp-yellow);
    border-bottom-color: var(--rcp-yellow);
}

.rcp-strip--dark {
    background: var(--rcp-purple-deep);
}

/* Callout bar with button */
.rcp-callout {
    background: var(--rcp-purple-deep);
    color: #fff;
}

.rcp-callout__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 26px var(--rcp-gutter);
}

.rcp-callout__title {
    margin: 0 0 3px;
    font-size: 22px;
    color: #fff;
}

.rcp-callout__text {
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .78);
}

/* Wide info panel (BNPL / gift / teal / sustainability) */
.rcp-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding: 34px 40px;
    border-radius: var(--rcp-radius-lg);
    background: var(--rcp-bg-alt);
}

.rcp-panel--blue { background: var(--rcp-blue-soft); }
.rcp-panel--teal { background: linear-gradient(120deg, #0e9c9c 0%, #0b6f80 100%); color: rgba(255, 255, 255, .88); }
.rcp-panel--violet { background: var(--rcp-violet-soft); }
.rcp-panel--purple { background: linear-gradient(120deg, var(--rcp-purple) 0%, var(--rcp-violet) 100%); color: rgba(255, 255, 255, .88); }
.rcp-panel--sand { background: var(--rcp-sand); }

.rcp-panel--teal .rcp-panel__title,
.rcp-panel--purple .rcp-panel__title {
    color: #fff;
}

.rcp-panel--media-first .rcp-panel__media {
    order: -1;
}

.rcp-panel__title {
    margin: 0 0 10px;
    font-size: 28px;
}

.rcp-panel__text {
    margin: 0 0 20px;
    font-size: 14.5px;
    max-width: 46ch;
}

.rcp-panel__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .8;
}

.rcp-panel__media img {
    border-radius: var(--rcp-radius);
}

/* Qualified with `ul` so it outranks the `.rcp ul` reset in section 2, which is
   more specific than a bare class and would otherwise zero the bottom margin —
   dropping the button straight onto the pills. Same for .rcp-app__perks. */
ul.rcp-panel__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

.rcp-pay-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--rcp-radius-sm);
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 27, 36, .1);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--rcp-ink);
}

.rcp-panel__media-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Editorial hero block */
.rcp-editorial {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: var(--rcp-radius-lg);
    background: var(--rcp-purple);
    color: rgba(255, 255, 255, .86);
}

.rcp-editorial__body {
    padding: 46px 40px;
}

.rcp-editorial__title {
    margin: 0 0 12px;
    font-size: 32px;
    color: #fff;
}

.rcp-editorial__text {
    margin: 0 0 20px;
    font-size: 14.5px;
}

.rcp-editorial__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.rcp-editorial__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rcp-yellow);
    font-size: 13.5px;
    font-weight: 700;
}

.rcp-editorial__links a svg {
    width: 15px;
    height: 15px;
}

.rcp-editorial__links a:hover {
    color: #fff;
}

.rcp-editorial__media {
    position: relative;
    min-height: 300px;
}

.rcp-editorial__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   14. Lifestyle / category cards
   ========================================================================== */

.rcp-card {
    display: flex;
    flex-direction: column;
    color: var(--rcp-ink);
}

.rcp-card .rcp-media {
    margin-bottom: 12px;
}

.rcp-card:hover .rcp-media img {
    transform: scale(1.05);
}

.rcp-card__title {
    margin: 0 0 4px;
    font-size: 16px;
}

.rcp-card:hover .rcp-card__title {
    color: var(--rcp-purple);
}

.rcp-card__text {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--rcp-muted);
}

.rcp-card__cta {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--rcp-purple);
}

.rcp-card__cta::after {
    content: " →";
}

/* Overlay variant — text sits on the image */
.rcp-card--overlay {
    position: relative;
}

.rcp-card--overlay .rcp-media {
    margin-bottom: 0;
}

.rcp-card--overlay .rcp-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 20px;
    background: linear-gradient(to top, rgba(24, 12, 26, .8), rgba(24, 12, 26, 0));
}

.rcp-card--overlay .rcp-card__title,
.rcp-card--overlay .rcp-card__text {
    color: #fff;
}

.rcp-card--overlay .rcp-card__cta {
    color: var(--rcp-yellow);
}

/* Icon + label strip */
.rcp-iconstrip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.rcp-iconcard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--rcp-line-soft);
    border-radius: var(--rcp-radius);
    background: #fff;
    color: var(--rcp-ink);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.rcp-iconcard:hover {
    border-color: transparent;
    box-shadow: var(--rcp-shadow);
    color: var(--rcp-purple);
}

.rcp-iconcard__thumb {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--rcp-radius-sm);
    overflow: hidden;
    background: var(--rcp-bg-alt);
}

.rcp-iconcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcp-iconcard__label {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}

.rcp-iconcard__meta {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--rcp-muted);
}

/* ==========================================================================
   15. Shop the look
   ========================================================================== */

.rcp-look {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.rcp-look__accent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 30px;
    border-radius: var(--rcp-radius-lg);
    background: var(--rcp-yellow);
    color: var(--rcp-purple-deep);
    text-align: center;
}

.rcp-look__title {
    margin: 0 0 10px;
    font-size: 38px;
    line-height: .98;
    letter-spacing: -.04em;
    color: var(--rcp-purple-deep);
    text-transform: uppercase;
}

.rcp-look__text {
    margin: 0 0 22px;
    font-size: 13.5px;
    color: #5b4408;
}

.rcp-look__accent .rcp-btn {
    align-self: center;
}

.rcp-look__scene {
    position: relative;
    overflow: hidden;
    border-radius: var(--rcp-radius-lg);
    min-height: 340px;
}

.rcp-look__scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcp-look__caption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rcp-ink);
}

/* Interactive hotspots */
.rcp-hotspot {
    position: absolute;
    z-index: 4;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(74, 21, 75, .9);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    transition: transform .18s ease, background .18s ease;
}

.rcp-hotspot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    animation: rcp-pulse 2.4s ease-out infinite;
}

@keyframes rcp-pulse {
    0%   { transform: scale(.85); opacity: .9; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.rcp-hotspot:hover,
.rcp-hotspot[aria-expanded="true"] {
    background: var(--rcp-coral);
    transform: scale(1.14);
}

.rcp-hotspot__tip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    z-index: 5;
    width: 178px;
    transform: translateX(-50%) translateY(6px);
    padding: 10px 12px;
    border-radius: var(--rcp-radius);
    background: #fff;
    color: var(--rcp-ink);
    text-align: left;
    box-shadow: var(--rcp-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.rcp-hotspot:hover .rcp-hotspot__tip,
.rcp-hotspot[aria-expanded="true"] .rcp-hotspot__tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Edge-anchored tips (see shop-the-look.php) — the scene clips overflow, so a
   dot near either side needs its tip pulled inward instead of centred. */
.rcp-hotspot--start .rcp-hotspot__tip {
    left: -4px;
    transform: translateX(0) translateY(6px);
}

.rcp-hotspot--start:hover .rcp-hotspot__tip,
.rcp-hotspot--start[aria-expanded="true"] .rcp-hotspot__tip {
    transform: translateX(0) translateY(0);
}

.rcp-hotspot--end .rcp-hotspot__tip {
    left: auto;
    right: -4px;
    transform: translateX(0) translateY(6px);
}

.rcp-hotspot--end:hover .rcp-hotspot__tip,
.rcp-hotspot--end[aria-expanded="true"] .rcp-hotspot__tip {
    transform: translateX(0) translateY(0);
}

.rcp-hotspot__name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.rcp-hotspot__price {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--rcp-coral);
}

@media (prefers-reduced-motion: reduce) {
    .rcp-hotspot::after {
        animation: none;
    }

    .rcp *,
    .rcp *::before,
    .rcp *::after {
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   16. Colour promo cards
   ========================================================================== */

.rcp-colorcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.rcp-colorcard {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border-radius: var(--rcp-radius-lg);
    color: var(--rcp-ink);
    transition: transform .2s ease;
}

.rcp-colorcard:hover {
    transform: translateY(-3px);
    color: var(--rcp-ink);
}

.rcp-colorcard--blue { background: var(--rcp-blue-soft); }
.rcp-colorcard--pink { background: var(--rcp-pink-soft); }
.rcp-colorcard--mint { background: var(--rcp-mint-soft); }

.rcp-colorcard__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
}

.rcp-colorcard__icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
    color: var(--rcp-purple);
}

.rcp-colorcard__title {
    display: block;
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--rcp-ink);
}

.rcp-colorcard__text {
    display: block;
    margin: 0;
    font-size: 13px;
    color: var(--rcp-body);
}

/* ==========================================================================
   17. Service perks
   ========================================================================== */

.rcp-perks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.rcp-perk {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--rcp-line-soft);
    border-radius: var(--rcp-radius);
    background: #fff;
}

.rcp-perk__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rcp-violet-tint);
    color: var(--rcp-purple);
}

.rcp-perk__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
}

.rcp-perk__title {
    margin: 0 0 2px;
    font-size: 14px;
}

.rcp-perk__text {
    margin: 0;
    font-size: 12.5px;
    color: var(--rcp-muted);
}

/* ==========================================================================
   18. Sale block
   ========================================================================== */

.rcp-sale {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.rcp-sale__flag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 30px;
    border-radius: var(--rcp-radius-lg);
    background: linear-gradient(150deg, #ef3124 0%, #a4102b 100%);
    color: rgba(255, 255, 255, .9);
    text-align: center;
}

.rcp-sale__word {
    margin: 0;
    font-size: 62px;
    font-weight: 900;
    line-height: .86;
    letter-spacing: -.05em;
    color: #fff;
}

.rcp-sale__sub {
    margin: 10px 0 20px;
    font-size: 14px;
}

.rcp-sale__flag .rcp-btn {
    align-self: center;
}

/* ==========================================================================
   19. Newsletter
   ========================================================================== */

.rcp-newsletter {
    background: var(--rcp-violet-soft);
}

.rcp-newsletter__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
    gap: 36px;
    padding: 40px var(--rcp-gutter);
}

.rcp-newsletter__title {
    margin: 0 0 6px;
    font-size: 26px;
    color: var(--rcp-purple-deep);
}

.rcp-newsletter__text {
    margin: 0;
    font-size: 14px;
    color: #5b3f66;
}

.rcp-newsletter__form {
    display: flex;
    gap: 10px;
}

/* The input takes the slack; the button keeps its label on one line. */
.rcp-newsletter__form .rcp-btn {
    flex: none;
    white-space: nowrap;
}

.rcp-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--rcp-ink);
}

.rcp-newsletter__input:focus {
    outline: none;
    border-color: var(--rcp-purple);
}

.rcp-newsletter__note {
    grid-column: 2;
    margin: -22px 0 0;
    font-size: 11.5px;
    color: #6f5478;
}

/* ==========================================================================
   20. Tick-list perks (shared by the info panels)
   ========================================================================== */





ul.rcp-app__perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 0 22px;
    font-size: 13px;
    font-weight: 600;
}

.rcp-app__perks li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.rcp-app__perks svg {
    width: 15px;
    height: 15px;
    color: var(--rcp-yellow);
    flex: none;
}











/* ==========================================================================
   21. (removed — payment/trust bar)
   ========================================================================== */







/* ==========================================================================
   22. Footer
   ========================================================================== */

.rcp-footer {
    background: var(--rcp-purple-deep);
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
}

.rcp-footer__cols {
    display: grid;
    /* Brand | link groups (stacked, centre) | contact details (right). */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 48px;
    /* Vertical only — this element also carries .rcp-container, and a `padding`
       shorthand here would wipe out its horizontal gutter and push the footer
       flush against the viewport edge. */
    padding-top: 48px;
    padding-bottom: 40px;
}

/* Centre column: the three link groups stacked rather than side by side. */
.rcp-footer__links {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rcp-footer__group .rcp-footer__title {
    margin-bottom: 12px;
}

/* Right column: contact details. */
.rcp-footer__contact-col {
    min-width: 0;
}

.rcp-footer__brand .rcp-brand__name,
.rcp-footer__brand .rcp-brand__tagline {
    color: #fff;
}

.rcp-footer__about {
    margin: 16px 0;
    font-size: 13px;
    line-height: 1.65;
    max-width: 34ch;
}

/* Contact block — labelled rows so the value reads as content rather than as a
   run of same-weight text, with the phone number as the primary action. */
.rcp-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.rcp-contact__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
}

.rcp-contact__row + .rcp-contact__row {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.rcp-contact__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .09);
    color: var(--rcp-yellow);
}

.rcp-contact__icon svg {
    width: 16px;
    height: 16px;
}

.rcp-contact__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rcp-contact__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.rcp-contact__value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    word-break: break-word;
}

a.rcp-contact__value:hover {
    color: var(--rcp-yellow);
    text-decoration: none;
}

.rcp-contact__value--strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.rcp-contact__value--address {
    display: flex;
    flex-direction: column;
}

.rcp-contact__meta {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

.rcp-contact__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rcp-yellow);
}

.rcp-contact__link svg {
    width: 13px;
    height: 13px;
}

.rcp-contact__link:hover {
    color: #fff;
    text-decoration: none;
}

/*
 * The parent theme prints a colour for h1-h6 that out-ranks a single-class rule,
 * which left these headings almost black against the purple footer. Pinned so the
 * footer cannot lose its contrast.
 */
body.rcp .rcp-footer .rcp-footer__title,
body.rcp .rcp-footer h3.rcp-footer__title {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff !important;
}

body.rcp .rcp-footer .rcp-brand__name,
body.rcp .rcp-footer .rcp-contact__value {
    color: #fff !important;
}

body.rcp .rcp-footer .rcp-contact__label,
body.rcp .rcp-footer .rcp-contact__meta,
body.rcp .rcp-footer .rcp-brand__tagline {
    color: rgba(255, 255, 255, .58) !important;
}

.rcp-footer__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rcp-footer a {
    color: rgba(255, 255, 255, .72);
}

.rcp-footer a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rcp-social {
    display: flex;
    gap: 9px;
    margin-top: 20px;
}

.rcp-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: background .18s ease;
}

.rcp-social a:hover {
    background: var(--rcp-violet);
    text-decoration: none;
}

.rcp-social svg {
    width: 17px;
    height: 17px;
}

.rcp-legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.rcp-legal__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 18px var(--rcp-gutter);
    font-size: 12.5px;
}

.rcp-legal__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

/* Back to top */
.rcp-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--rcp-purple);
    color: #fff;
    box-shadow: var(--rcp-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.rcp-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rcp-top svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   23. Inner pages (blog, archives, WooCommerce shell)
   ========================================================================== */

.rcp-page {
    padding: 40px 0 56px;
}

.rcp-page__header {
    margin-bottom: 28px;
}

.rcp-page__title {
    font-size: 30px;
}

.rcp-breadcrumb {
    margin-bottom: 10px;
    font-size: 12.5px;
    color: var(--rcp-muted);
}

.rcp-breadcrumb a {
    color: var(--rcp-muted);
}

.rcp-breadcrumb a:hover {
    color: var(--rcp-purple);
}

.rcp-entry {
    max-width: 78ch;
    font-size: 15.5px;
    line-height: 1.7;
}

.rcp-entry img {
    border-radius: var(--rcp-radius);
}

.rcp-postcard {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--rcp-line-soft);
    border-radius: var(--rcp-radius-lg);
    background: #fff;
}

.rcp-postcard__title {
    font-size: 17px;
    margin: 12px 0 6px;
}

.rcp-postcard__meta {
    font-size: 12px;
    color: var(--rcp-muted);
}

.rcp-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
}

.rcp-pagination .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--rcp-line);
    border-radius: var(--rcp-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rcp-ink);
}

.rcp-pagination .page-numbers.current,
.rcp-pagination .page-numbers:hover {
    background: var(--rcp-purple);
    border-color: var(--rcp-purple);
    color: #fff;
}

/* ==========================================================================
   24. Wide lifestyle banner
   ========================================================================== */

.rcp-wide {
    position: relative;
    overflow: hidden;
    border-radius: var(--rcp-radius-lg);
}

.rcp-wide__media {
    border-radius: 0;
}

.rcp-wide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(24, 12, 26, .74) 0%, rgba(24, 12, 26, .38) 48%, rgba(24, 12, 26, .05) 78%);
}

.rcp-wide--right::after {
    background: linear-gradient(270deg, rgba(24, 12, 26, .74) 0%, rgba(24, 12, 26, .38) 48%, rgba(24, 12, 26, .05) 78%);
}

.rcp-wide--center::after {
    background: linear-gradient(180deg, rgba(24, 12, 26, .22) 0%, rgba(24, 12, 26, .48) 46%, rgba(24, 12, 26, .78) 100%);
}

.rcp-wide__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 46%;
    padding: 40px 48px;
    color: rgba(255, 255, 255, .88);
}

.rcp-wide--right .rcp-wide__body {
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
}

.rcp-wide--center .rcp-wide__body {
    max-width: none;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding-bottom: 44px;
}

.rcp-wide__title {
    margin: 0 0 10px;
    font-size: 32px;
    color: #fff;
    max-width: 18ch;
}

.rcp-wide--center .rcp-wide__title {
    max-width: 24ch;
}

.rcp-wide__text {
    margin: 0 0 20px;
    font-size: 14.5px;
    max-width: 46ch;
}

.rcp-wide__body .rcp-btn {
    align-self: flex-start;
}

.rcp-wide--right .rcp-wide__body .rcp-btn,
.rcp-wide--center .rcp-wide__body .rcp-btn {
    align-self: center;
}

/* Shared tweaks for copy reused inside light panels */
.rcp-strip__text {
    margin: 0;
}

.rcp-panel__body {
    min-width: 0;
}

.rcp-panel .rcp-app__perks {
    flex-direction: column;
    gap: 9px;
    font-size: 13.5px;
}

.rcp-panel:not(.rcp-panel--teal):not(.rcp-panel--purple) .rcp-app__perks svg {
    color: var(--rcp-teal);
}

.rcp-page__thumb {
    margin-bottom: 24px;
    border-radius: var(--rcp-radius-lg);
}

/* ==========================================================================
   25. WooCommerce shell & comments
   ========================================================================== */

.rcp-woo .woocommerce-products-header__title,
.rcp-woo .product_title,
.rcp-woo h1 {
    font-size: 30px;
}

.rcp-woo ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 32px;
    padding: 0;
}

.rcp-woo ul.products::before,
.rcp-woo ul.products::after {
    content: none;
}

.rcp-woo ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    padding: 10px;
    border: 1px solid var(--rcp-line-soft);
    border-radius: var(--rcp-radius-lg);
    background: #fff;
    text-align: left;
}

/*
 * Hold a square frame whatever the source. Products with no featured image (or a
 * missing file) otherwise collapse to a bare white gap and the grid rows go
 * ragged — this keeps them a neutral tile like the homepage cards.
 */
.rcp-woo ul.products li.product img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--rcp-radius);
    background: var(--rcp-bg-alt);
    margin-bottom: 12px;
}

.rcp-woo ul.products li.product .woocommerce-loop-product__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 4px;
}

.rcp-woo ul.products li.product .price {
    display: block;
    padding: 0 4px;
    color: var(--rcp-ink);
    font-size: 17px;
    font-weight: 800;
}

.rcp-woo ul.products li.product .price del {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--rcp-muted);
}

.rcp-woo ul.products li.product .price ins {
    text-decoration: none;
    color: var(--rcp-coral);
}

.rcp-woo .woocommerce-result-count,
.rcp-woo .woocommerce-ordering {
    margin-bottom: 20px;
    font-size: 13.5px;
}

/*
 * WooCommerce puts its `woocommerce` class on <body> for archive and single
 * product views, and on a wrapper <div> for cart / checkout / account. A
 * `body.rcp .woocommerce x` selector only matches the second case, which is why
 * the shop grid kept Astra's blue buttons. Every rule below is written for both
 * forms. Astra also ships its own `.ast-on-card-button` add-to-cart and prints
 * dynamic button CSS with high specificity, so the colour declarations are
 * forced — same approach as the sibling theme.
 */

body.rcp.woocommerce span.onsale,
body.rcp .woocommerce span.onsale,
body.rcp .rcp-woo span.onsale,
body.rcp .ast-onsale-card {
    background: var(--rcp-coral) !important;
    color: #fff !important;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    min-height: 0;
    min-width: 0;
    padding: 4px 11px;
    line-height: 1.5;
    box-shadow: none;
}

body.rcp.woocommerce #respond input#submit,
body.rcp.woocommerce a.button,
body.rcp.woocommerce button.button,
body.rcp.woocommerce input.button,
body.rcp.woocommerce a.button.alt,
body.rcp.woocommerce button.button.alt,
body.rcp.woocommerce .ast-on-card-button:not(.ast-onsale-card),
body.rcp .woocommerce #respond input#submit,
body.rcp .woocommerce a.button,
body.rcp .woocommerce button.button,
body.rcp .woocommerce input.button,
body.rcp .woocommerce a.button.alt,
body.rcp .woocommerce button.button.alt,
body.rcp .woocommerce .ast-on-card-button:not(.ast-onsale-card),
body.rcp .rcp-woo a.button,
body.rcp .rcp-woo button.button {
    padding: 11px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--rcp-purple) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
}

body.rcp.woocommerce #respond input#submit:hover,
body.rcp.woocommerce a.button:hover,
body.rcp.woocommerce button.button:hover,
body.rcp.woocommerce input.button:hover,
body.rcp.woocommerce a.button.alt:hover,
body.rcp.woocommerce button.button.alt:hover,
body.rcp.woocommerce .ast-on-card-button:not(.ast-onsale-card):hover,
body.rcp .woocommerce #respond input#submit:hover,
body.rcp .woocommerce a.button:hover,
body.rcp .woocommerce button.button:hover,
body.rcp .woocommerce input.button:hover,
body.rcp .woocommerce a.button.alt:hover,
body.rcp .woocommerce button.button.alt:hover,
body.rcp .woocommerce .ast-on-card-button:not(.ast-onsale-card):hover,
body.rcp .rcp-woo a.button:hover,
body.rcp .rcp-woo button.button:hover {
    background: var(--rcp-violet) !important;
    color: #fff !important;
}

/* Single product tabs — Astra underlines the active tab in its own accent. */
body.rcp .woocommerce-tabs ul.tabs li.active,
body.rcp .woocommerce-tabs ul.tabs li.active a {
    border-bottom-color: var(--rcp-purple) !important;
    color: var(--rcp-purple) !important;
}

body.rcp .woocommerce-tabs ul.tabs li a {
    color: var(--rcp-body);
    font-weight: 700;
}

body.rcp .woocommerce div.product form.cart div.quantity input.qty {
    height: 44px;
    padding: 0 8px;
    border: 1px solid var(--rcp-line);
    border-radius: var(--rcp-radius-sm);
    font-family: inherit;
}

/* "View basket" link that appears under a card after an AJAX add. */
body.rcp.woocommerce a.added_to_cart,
body.rcp .woocommerce a.added_to_cart {
    display: inline-block;
    margin-top: 8px;
    padding: 0 4px;
    color: var(--rcp-purple);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sorting select + result count row. */
body.rcp .rcp-woo .woocommerce-ordering select {
    padding: 9px 14px;
    border: 1px solid var(--rcp-line);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--rcp-ink);
}

/* Archive pagination, matching the blog pager. */
body.rcp .rcp-woo .woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    margin: 8px 0 0;
    padding: 0;
}

body.rcp .rcp-woo .woocommerce-pagination ul.page-numbers li {
    border: 0;
    margin: 0;
    overflow: visible;
}

body.rcp .rcp-woo .woocommerce-pagination .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--rcp-line);
    border-radius: var(--rcp-radius-sm);
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rcp-ink);
}

body.rcp .rcp-woo .woocommerce-pagination .page-numbers.current,
body.rcp .rcp-woo .woocommerce-pagination a.page-numbers:hover {
    background: var(--rcp-purple);
    border-color: var(--rcp-purple);
    color: #fff;
}

.rcp-widget {
    margin-bottom: 26px;
}

.rcp-widget__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rcp-comments {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--rcp-line);
}

.rcp-comment-list {
    margin: 0 0 28px;
    padding: 0;
}

.rcp-comment-list li {
    list-style: none;
    margin-bottom: 18px;
}

.rcp-comment-list .comment-body {
    padding: 16px 18px;
    border: 1px solid var(--rcp-line-soft);
    border-radius: var(--rcp-radius);
}

/* ==========================================================================
   26. Responsive
   ========================================================================== */

@media (max-width: 1240px) {
    .rcp-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rcp-iconstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rcp-footer__cols { gap: 34px 36px; }
    .rcp-rail__track { grid-auto-columns: calc((100% - 4 * 18px) / 5); }
    .rcp-rail--4 .rcp-rail__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}

@media (max-width: 1080px) {
    .rcp-hero__grid { grid-template-columns: 1fr; }
    .rcp-hero__panel { padding: 32px 28px; }
    .rcp-hero__title { font-size: 36px; }
    .rcp-hero__showcase { min-height: 340px; }

    .rcp-look { grid-template-columns: 1fr 1fr; }
    .rcp-look__accent { grid-column: 1 / -1; padding: 28px; }
    .rcp-look__title { font-size: 32px; }

    .rcp-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rcp-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rcp-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rcp-editorial { grid-template-columns: 1fr 1fr; }
    .rcp-editorial__body { grid-column: 1 / -1; padding: 34px 28px; }
    .rcp-rail__track { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
    .rcp-wide__body { max-width: 58%; padding: 30px 34px; }
    .rcp-wide__title { font-size: 27px; }
    .rcp-woo ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    :root { --rcp-section-y: 34px; }

    .rcp-header__inner {
        flex-wrap: wrap;
        gap: 14px 18px;
    }

    .rcp-search {
        order: 3;
        flex: 1 0 100%;
    }

    .rcp-actions { margin-left: auto; }

    .rcp-nav-toggle { display: inline-flex; }

    .rcp-nav__inner {
        flex-wrap: wrap;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .rcp-nav__aside { display: none; }

    .rcp-menu {
        display: none;
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px 0 10px;
    }

    .rcp-menu.is-open { display: flex; }

    .rcp-menu > li > a {
        padding: 12px 6px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .rcp-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255, 255, 255, .07);
        padding: 4px;
        margin: 0 0 6px;
        border-radius: var(--rcp-radius-sm);
    }

    .rcp-menu .sub-menu a { color: rgba(255, 255, 255, .85); }
    .rcp-menu .sub-menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

    .rcp-panel {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 24px;
    }

    .rcp-panel--media-first .rcp-panel__media { order: 0; }

    .rcp-deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rcp-colorcards { grid-template-columns: 1fr; }
    .rcp-sale { grid-template-columns: 1fr; }
    .rcp-sale__flag { padding: 26px; }
    .rcp-sale__word { font-size: 48px; }

    .rcp-newsletter__inner { grid-template-columns: 1fr; gap: 20px; }
    .rcp-newsletter__note { grid-column: 1; margin-top: -8px; }


    .rcp-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }

    /* Brand spans the full width; links and contact sit side by side under it. */
    .rcp-footer__brand { grid-column: 1 / -1; }
    .rcp-footer__links { gap: 24px; }
    .rcp-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rcp-iconstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Touch ergonomics: inline text links are ~21–24px tall, which is a poor tap
   target. Pad them out without changing how they read. */
@media (max-width: 768px) {
    .rcp-section__link,
    .rcp-strip__link,
    .rcp-card__cta,
    .rcp-legal__links a,
    .rcp-footer__list a {
        display: inline-block;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .rcp-section__head {
        margin-bottom: 16px;
    }

    /* Contact anchors only — the address is a span and must stay tight. */
    a.rcp-contact__value,
    .rcp-contact__link {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .rcp-contact__link {
        margin-top: 0;
    }

    /* Keep the tip inside the clipped scene on small screens. */
    .rcp-hotspot__tip {
        width: 150px;
    }
}

@media (max-width: 720px) {
    :root { --rcp-gutter: 14px; }

    body.rcp { font-size: 14.5px; }

    .rcp-utility__inner { justify-content: center; }
    .rcp-utility__list--start { display: none; }

    .rcp-brand__tagline { display: none; }

    /* Let the brand shrink so it can share the top row with the action icons
       instead of pushing them onto a line of their own. */
    .rcp-header__brand { min-width: 0; }
    .rcp-brand__name { font-size: 18px; }
    .rcp-brand__mark { width: 32px; height: 32px; }
    .rcp-header__inner { gap: 10px 12px; }

    .rcp-search__scope { display: none; }
    .rcp-search__submit { padding: 0 16px; }
    .rcp-search__submit span { display: none; }

    .rcp-action span:not(.rcp-action__count) { display: none; }
    .rcp-action { padding: 6px 8px; }

    .rcp-hero__title { font-size: 30px; }
    .rcp-hero__showcase {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: 0;
    }
    .rcp-hero__tile { min-height: 200px; }
    .rcp-hero__tile--lead { min-height: 260px; }

    .rcp-section__head { flex-wrap: wrap; align-items: flex-start; }
    .rcp-section__title { font-size: 21px; }

    /* The rail is natively swipeable (overflow-x + scroll-snap) at this width,
       so the prev/next buttons just add an orphaned row under the heading —
       drop them and let touch scrolling do the job. */
    .rcp-section__tools { display: none; }

    .rcp-grid--3,
    .rcp-grid--4,
    .rcp-grid--5,
    .rcp-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rcp-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rcp-deals { grid-template-columns: 1fr; }
    .rcp-deal { min-height: 0; }
    .rcp-deal__price { font-size: 34px; }

    .rcp-look { grid-template-columns: 1fr; }
    .rcp-look__scene { min-height: 260px; }

    .rcp-perks { grid-template-columns: 1fr; }
    .rcp-editorial { grid-template-columns: 1fr; }
    .rcp-editorial__media { min-height: 220px; }

    .rcp-newsletter__form { flex-direction: column; }
    .rcp-newsletter__form .rcp-btn { width: 100%; }

    /* Overlaid banner copy stops being legible on a narrow crop — stack it. */
    .rcp-wide::after { content: none; }
    .rcp-wide { border-radius: var(--rcp-radius-lg); background: var(--rcp-purple); }
    .rcp-wide__media { border-radius: var(--rcp-radius-lg) var(--rcp-radius-lg) 0 0; }
    .rcp-wide__media::before { padding-top: 62%; }
    .rcp-wide__body,
    .rcp-wide--right .rcp-wide__body,
    .rcp-wide--center .rcp-wide__body {
        position: static;
        max-width: none;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding: 24px 22px 28px;
    }
    .rcp-wide__title { font-size: 23px; max-width: none; }
    .rcp-wide--right .rcp-wide__body .rcp-btn,
    .rcp-wide--center .rcp-wide__body .rcp-btn { align-self: flex-start; }
    .rcp-woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .rcp-rail__track { grid-auto-columns: calc((100% - 18px) / 2); }
    .rcp-rail--4 .rcp-rail__track { grid-auto-columns: calc((100% - 18px) / 2); }

    .rcp-callout__inner { flex-direction: column; align-items: flex-start; }
    .rcp-legal__inner { justify-content: center; text-align: center; }
    .rcp-legal__links { justify-content: center; }
}

@media (max-width: 420px) {
    .rcp-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rcp-footer__cols { grid-template-columns: 1fr; }
    .rcp-hero__title { font-size: 27px; }
    .rcp-look__title { font-size: 28px; }
}

/* ==========================================================================
   27. Astra parent overrides
   Astra's generic element styles bleed into child themes — pin ours down.
   ========================================================================== */

body.rcp .rcp-btn,
body.rcp .rcp-search__submit,
body.rcp .rcp-product__cart,
body.rcp .rcp-rail__nav,
body.rcp .rcp-nav-toggle,
body.rcp .rcp-hotspot,
body.rcp .rcp-top,
body.rcp .rcp-product__wish {
    box-shadow: none;
    text-transform: none;
    line-height: 1.2;
}

/*
 * Astra styles bare `button` with `padding: 12px 24px`. These are fixed-size
 * round icon buttons that declare no padding of their own, so they inherited it
 * — and because they are border-box, the width cannot shrink below the 48px of
 * horizontal padding, turning every 32–44px circle into an oval.
 */
body.rcp .rcp-rail__nav,
body.rcp .rcp-top,
body.rcp .rcp-product__wish {
    padding: 0;
}

/*
 * WooCommerce ships `.woocommerce-js h2 { margin-bottom: .7em }` and puts
 * `.woocommerce-js` on <body> on every page. At (0,1,1) that out-specifies every
 * single-class title rule here, so each h2 silently gained ~18px of space below
 * it. Re-assert the intended values at matching specificity. Margin only — the
 * responsive font-size overrides in section 26 must keep winning, which is why
 * these are separate rules rather than a bump to the component selectors.
 */
body.rcp h2.rcp-section__title    { margin-bottom: 0; }
body.rcp h2.rcp-callout__title    { margin-bottom: 3px; }
body.rcp h2.rcp-panel__title      { margin-bottom: 10px; }
body.rcp h2.rcp-look__title       { margin-bottom: 10px; }
body.rcp h2.rcp-editorial__title  { margin-bottom: 12px; }
body.rcp h2.rcp-wide__title       { margin-bottom: 10px; }
body.rcp h2.rcp-newsletter__title { margin-bottom: 6px; }
body.rcp h2.rcp-postcard__title   { margin-bottom: 6px; }

/*
 * Elementor's global kit stylesheet puts `elementor-kit-{id}` on <body> on
 * every page (not just Elementor-built ones) and ships `.elementor-kit-{id}
 * h2 { color: var(--e-global-color-primary) }`. Also (0,1,1), same trap as
 * the WooCommerce rule above — it was silently turning these white titles
 * back to the kit's dark heading colour. Re-assert white at matching
 * specificity for every title that needs it on a dark background.
 */
body.rcp h2.rcp-callout__title,
body.rcp h2.rcp-editorial__title,
body.rcp h2.rcp-wide__title {
    color: #fff;
}

body.rcp .rcp-btn:focus,
body.rcp .rcp-search__submit:focus,
body.rcp .rcp-product__cart:focus {
    color: inherit;
}

body.rcp .rcp-btn {
    color: #fff;
}

body.rcp .rcp-btn--light,
body.rcp .rcp-btn--outline {
    color: var(--rcp-purple);
}

body.rcp .rcp-btn--outline-light {
    color: #fff;
}

body.rcp #ast-scroll-top,
body.rcp .ast-scroll-to-top-right {
    display: none !important;
}

body.rcp .ast-container,
body.rcp #content .ast-container {
    max-width: none;
    padding: 0;
    display: block;
}

body.rcp #primary,
body.rcp #content {
    margin: 0;
    padding: 0;
}

body.rcp .site-content .ast-container {
    display: block;
}

body.rcp .ast-separate-container {
    background: transparent;
}

body.rcp input[type="text"],
body.rcp input[type="email"],
body.rcp input[type="search"],
body.rcp select {
    box-shadow: none;
}

body.rcp .rcp-search__field,
body.rcp .rcp-newsletter__input {
    height: auto;
    margin: 0;
    box-shadow: none;
}

body.rcp .rcp-newsletter__input {
    height: 50px;
}

body.rcp .rcp-search__scope select {
    height: 100%;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}