.rpk-store {
    --brand-color:#3a1b5d;
    background:#fafbf8;
    color:#20142e;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.6;
}

.rpk-container {
    width:calc(100% - 64px);
    max-width:1280px;
    margin:auto;
}

.rpk-store a,.rpk-store button {
    transition:background .18s,color .18s,box-shadow .18s;
}

.rpk-store a:focus-visible,.rpk-store button:focus-visible,.rpk-store input:focus-visible {
    outline:3px solid #421f6a;
    outline-offset:4px;
}

.rpk-skip {
    position:fixed;
    top:-80px;
    left:20px;
    background:white;
    padding:12px;
    z-index:100;
}

.rpk-skip:focus {
    top:12px;
}

.rpk-notice {
    background:#1d102b;
    color:#fff;
    font-size:12px;
    padding:8px 0;
}

.rpk-notice .rpk-container {
    display:flex;
    justify-content:space-between;
}

.rpk-notice span {
    color:#c9c0d4;
}

.rpk-header {
    background:#fff;
    border-bottom:1px solid #e2dfe6;
}

.rpk-header-row {
    display:flex;
    align-items:center;
    gap:50px;
    padding-top:24px;
    padding-bottom:24px;
}

.rpk-logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:23px;
    line-height:1.1;
    letter-spacing:-1px;
}

.rpk-logo-icon {
    background:#20142e;
    color:#c9aee7;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    width:43px;
    height:43px;
    font-size:33px;
}

.rpk-logo-icon span {
    font-size:22px;
    margin-top:-8px;
}

.rpk-logo-sub {
    display:block;
    font-size:10px;
    letter-spacing:3px;
    font-weight:600;
    margin-top:6px;
}

.rpk-search {
    display:flex;
    flex:1;
    position:relative;
    max-width:520px;
}

.rpk-search input {
    width:100%;
    border:1px solid #e2dfe6;
    border-radius:8px;
    background:#f8faf7;
    padding:12px 50px 12px 18px;
    font-size:13px;
}

.rpk-search button {
    position:absolute;
    right:8px;
    top:6px;
    padding:8px;
    border-radius:5px;
}

.rpk-header-actions {
    display:flex;
    gap:25px;
    align-items:center;
    margin-left:auto;
    font-size:13px;
    white-space:nowrap;
}

.rpk-cart {
    display:flex;
    align-items:center;
    gap:8px;
}

.rpk-cart span {
    background:#e9e2f2;
    border-radius:50%;
    min-width:26px;
    text-align:center;
    padding:2px;
}

.rpk-nav {
    display:flex;
    gap:32px;
    padding-top:12px;
    padding-bottom:14px;
    font-size:12px;
    align-items:center;
    overflow:auto;
    white-space:nowrap;
}

.rpk-nav a:first-child {
    font-weight:700;
}

.rpk-nav-help {
    margin-left:auto;
    color:#442369;
}

.rpk-nav a:hover,.rpk-header-actions a:hover {
    text-decoration:underline;
}

.rpk-main {
    padding-top:28px;
    padding-bottom:70px;
    min-height:50vh;
}

.rpk-main:focus {
    outline:0;
}

.rpk-hero {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    background:#ece6f2;
    border-radius:16px;
    overflow:hidden;
    min-height:470px;
}

.rpk-hero-copy {
    padding:55px 0 42px 48px;
    z-index:1;
}

.rpk-eyebrow {
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.8px;
}

.rpk-hero .rpk-eyebrow {
    display:flex;
    align-items:center;
    gap:8px;
}

.rpk-eyebrow>span {
    height:7px;
    width:7px;
    background:#583580;
    border-radius:50%;
}

.rpk-hero h1 {
    font-size:clamp(36px,4vw,56px);
    font-weight:700;
    letter-spacing:-2.6px;
    line-height:1.1;
    margin:23px 0;
}

.rpk-hero h1 em {
    font-style:normal;
    color:#584172;
}

.rpk-hero p {
    max-width:370px;
    font-size:14px;
    color:#585061;
    line-height:1.8;
}

.rpk-hero-actions {
    display:flex;
    gap:25px;
    align-items:center;
    margin-top:26px;
}

.rpk-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    background:#29173e;
    color:white;
    border-radius:6px;
    padding:13px 21px;
    font-size:12px;
    font-weight:700;
}

.rpk-button:hover {
    background:#432862;
}

.rpk-text-link {
    font-size:12px;
    font-weight:700;
}

.rpk-text-link:hover {
    text-decoration:underline;
}

.rpk-hero-note {
    margin-top:38px;
    font-size:9px;
    font-weight:700;
    letter-spacing:1.3px;
}

.rpk-hero-note span {
    display:block;
    color:#696172;
    font-size:11px;
    font-weight:400;
    letter-spacing:0;
    margin-top:3px;
}

.rpk-hero-art {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    background:radial-gradient(ellipse at 55% 45%,#cdb9e3 0,transparent 68%);
    padding:65px 30px;
}

.rpk-orbit {
    position:absolute;
    width:370px;
    height:370px;
    border:1px solid #cec2db;
    border-radius:50%;
    box-shadow:0 0 0 32px #e0d7eb40,0 0 0 65px #e3dbed55;
}

.rpk-art-label {
    position:absolute;
    top:40px;
    right:32px;
    font-size:9px;
    letter-spacing:2px;
    color:#675a76;
}

.rpk-art-tag {
    position:absolute;
    bottom:38px;
    right:28px;
    border:1px solid #fff;
    background:#ffffffd9;
    border-radius:8px;
    padding:12px 18px 12px 53px;
    font-size:11px;
    line-height:1.6;
    transform:rotate(4deg);
}

.rpk-art-tag span {
    position:absolute;
    left:15px;
    top:8px;
    font-size:28px;
    color:#553678;
}

.rpk-value-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-bottom:1px solid #dfd9e5;
    padding:24px 0;
    gap:15px;
}

.rpk-value-strip div {
    text-align:center;
    font-size:12px;
    font-weight:600;
}

.rpk-value-strip span {
    font-size:10px;
    color:#837791;
    margin-right:12px;
}

.rpk-section {
    margin-top:48px;
    scroll-margin-top:24px;
}

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

.rpk-section-heading .rpk-eyebrow {
    color:#695e76;
    font-size:9px;
}

.rpk-section h2 {
    font-size:30px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-1px;
    margin-top:8px;
}

.rpk-category-links {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.rpk-category-links a {
    font-size:12px;
    border:1px solid #ded8e4;
    padding:7px 14px;
    border-radius:5px;
    background:white;
}

.rpk-category-links a:hover {
    background:#e9e2f2;
}

.rpk-products {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.rpk-product {
    border:1px solid #e2dde7;
    border-radius:10px;
    overflow:hidden;
    background:white;
    min-width:0;
}

.rpk-product:hover {
    box-shadow:0 8px 24px #2a1c3b0d;
}

.rpk-product-image {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    aspect-ratio:1.28;
    background:#f2f0f5;
    padding:28px 15px;
}

.rpk-product-image img {
    max-width:100%;
    height:160px;
    object-fit:contain;
    mix-blend-mode:multiply;
}

.rpk-stock {
    position:absolute;
    left:12px;
    top:12px;
    background:#e5ddef;
    color:#503e65;
    padding:3px 8px;
    border-radius:4px;
    font-size:9px;
}

.rpk-stock-empty {
    background:#e9e6ec;
    color:#625d67;
}

.rpk-image-placeholder {
    font-size:12px;
    color:#685e74;
}

.rpk-product-details {
    padding:18px;
}

.rpk-product-category {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#6e627b;
}

.rpk-product h3 {
    font-size:14px;
    line-height:1.5;
    font-weight:600;
    margin:8px 0 16px;
    min-height:42px;
}

.rpk-product-bottom {
    display:flex;
    justify-content:space-between;
    gap:5px;
    align-items:center;
}

.rpk-product-bottom strong {
    font-size:17px;
    letter-spacing:-.5px;
}

.rpk-product-bottom>a {
    padding:4px 10px;
    background:#eee8f4;
    border-radius:5px;
}

.rpk-empty {
    grid-column:1/-1;
    background:#efebf4;
    border:1px dashed #bfb4cb;
    padding:34px;
    border-radius:10px;
}

.rpk-empty h3 {
    font-size:20px;
    font-weight:700;
}

.rpk-empty p {
    color:#665d70;
    font-size:14px;
    margin:8px 0 20px;
}

.rpk-guide {
    border-top:1px solid #dfd9e6;
    padding-top:40px;
}

.rpk-guide-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.rpk-guide article {
    background:#efebf3;
    border-radius:9px;
    padding:28px;
}

.rpk-guide-number {
    font-size:9px;
    letter-spacing:1.6px;
    color:#726580;
}

.rpk-guide h3 {
    font-size:19px;
    font-weight:700;
    margin:16px 0 10px;
    letter-spacing:-.4px;
}

.rpk-guide p {
    font-size:13px;
    color:#665d71;
    line-height:1.8;
}

.rpk-guide article a {
    display:inline-block;
    font-size:12px;
    font-weight:700;
    margin-top:20px;
}

.rpk-guide article a:hover {
    text-decoration:underline;
}

.rpk-footer {
    background:#1d102b;
    color:#e1dce7;
    padding-top:44px;
}

.rpk-footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1.4fr;
    gap:40px;
    padding-bottom:35px;
}

.rpk-footer-brand {
    font-size:19px;
    font-weight:700;
    letter-spacing:-.5px;
}

.rpk-footer-brand span {
    display:block;
    font-size:13px;
    font-weight:400;
    letter-spacing:0;
    color:#bea4dc;
    margin-top:5px;
}

.rpk-footer p {
    color:#b2a9bd;
    font-size:12px;
    margin-top:12px;
}

.rpk-footer h2 {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
    margin-bottom:14px;
}

.rpk-footer-grid>div>a:not(.rpk-footer-brand) {
    display:block;
    font-size:12px;
    margin-top:8px;
    overflow-wrap:anywhere;
}

.rpk-footer-bottom {
    font-size:10px;
    color:#b2a9bd;
    border-top:1px solid #362b43;
    padding-top:18px;
    padding-bottom:18px;
}

.rpk-flash {
    padding:12px 18px;
    background:#e5ddef;
    margin-bottom:18px;
    border-radius:6px;
}

.rpk-store .bg-blue-600 {
    background-color:#3b1b5f!important;
}

.rpk-store .text-blue-600 {
    color:#3b1b5f!important;
}

.rpk-store .hover\:bg-blue-700:hover {
    background-color:#2e154a!important;
}

.rpk-store .border-blue-600 {
    border-color:#3b1b5f!important;
}

@media(min-width:1500px) {
    .rpk-hero {
        min-height:510px;
    }
    .rpk-hero-copy {
        padding-top:65px;
    }
}

@media(max-width:1000px) {
    .rpk-header-row {
        gap:25px;
    }
    .rpk-nav {
        gap:24px;
    }
    .rpk-nav-help {
        display:none;
    }
    .rpk-hero-copy {
        padding:35px 0 35px 30px;
    }
    .rpk-hero-art {
        padding:65px 25px;
    }
    .rpk-orbit {
        width:270px;
        height:270px;
    }
    .rpk-products {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .rpk-hero h1 {
        font-size:42px;
    }
    .rpk-hero-note {
        margin-top:25px;
    }
    .rpk-hero {
        min-height:430px;
    }
    .rpk-guide article {
        padding:22px;
    }
}

@media(max-width:700px) {
    .rpk-container {
        width:calc(100% - 32px);
    }
    .rpk-notice {
        font-size:10px;
    }
    .rpk-notice span {
        display:none;
    }
    .rpk-header-row {
        flex-wrap:wrap;
        gap:20px;
        padding-top:18px;
        padding-bottom:16px;
    }
    .rpk-logo {
        font-size:21px;
    }
    .rpk-header-actions {
        gap:15px;
        font-size:12px;
    }
    .rpk-search {
        order:3;
        flex-basis:100%;
        max-width:none;
    }
    .rpk-nav {
        gap:24px;
    }
    .rpk-main {
        padding-top:16px;
        padding-bottom:40px;
    }
    .rpk-hero {
        grid-template-columns:1fr;
    }
    .rpk-hero-copy {
        padding:32px 26px 0;
    }
    .rpk-hero h1 {
        font-size:clamp(30px,8.2vw,38px);
        letter-spacing:-1.5px;
    }
    .rpk-hero p {
        font-size:13px;
    }
    .rpk-hero .rpk-eyebrow {
        font-size:8px;
        letter-spacing:1.4px;
    }
    .rpk-hero-note {
        display:none;
    }
    .rpk-hero-art {
        height:295px;
        padding:45px 40px 55px;
    }
    .rpk-art-label {
        display:none;
    }
    .rpk-art-tag {
        bottom:20px;
        right:22px;
        padding:8px 14px 8px 43px;
        font-size:9px;
    }
    .rpk-art-tag span {
        left:10px;
        top:4px;
    }
    .rpk-value-strip {
        padding:18px 0;
        gap:10px;
    }
    .rpk-value-strip div {
        font-size:10px;
        line-height:1.5;
    }
    .rpk-value-strip span {
        display:block;
        margin:0 0 4px;
    }
    .rpk-section {
        margin-top:34px;
    }
    .rpk-section-heading {
        align-items:start;
        flex-direction:column;
        gap:12px;
    }
    .rpk-section h2 {
        font-size:26px;
    }
    .rpk-section-heading .rpk-eyebrow {
        font-size:8px;
    }
    .rpk-products {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }
    .rpk-product-details {
        padding:12px;
    }
    .rpk-product-image {
        padding:25px 10px 12px;
    }
    .rpk-product-image img {
        height:110px;
    }
    .rpk-product h3 {
        font-size:12px;
        min-height:36px;
    }
    .rpk-product-bottom strong {
        font-size:14px;
    }
    .rpk-product-bottom>a {
        padding:2px 7px;
    }
    .rpk-stock {
        left:8px;
        top:8px;
        font-size:8px;
    }
    .rpk-guide-grid {
        grid-template-columns:1fr;
        gap:12px;
    }
    .rpk-guide article {
        padding:24px;
    }
    .rpk-guide h3 {
        margin-top:10px;
    }
    .rpk-footer-grid {
        grid-template-columns:1fr 1fr;
        gap:30px;
    }
    .rpk-footer-grid>div:first-child {
        grid-column:1/-1;
    }
    .rpk-footer-brand {
        font-size:19px;
    }
    .rpk-empty {
        padding:24px;
    }
    .rpk-orbit {
        width:220px;
        height:220px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .rpk-store * {
        transition:none!important;
        scroll-behavior:auto!important;
    }
}

.rpk-nav {
    scrollbar-width:none;
}

.rpk-nav::-webkit-scrollbar {
    display:none;
}

/* Phone artwork is drawn in CSS so it stays crisp at every screen size. */
.rpk-notice, .rpk-footer, .rpk-logo-icon { background: #251e35; }
.rpk-logo-icon { color: #f4cbb2; }
.rpk-hero-art { min-height: 450px; }
.rpk-phone-back {
    position: absolute;
    width: 190px;
    height: 340px;
    left: 17%;
    top: 74px;
    border: 3px solid #b7a6c5;
    border-radius: 32px;
    background: linear-gradient(125deg, #e5dceb, #ad96c0);
    transform: rotate(-16deg);
    box-shadow: 0 22px 35px #32253d24, inset 2px 2px 4px #ffffffaa;
}
.rpk-phone-back > span {
    position: absolute;
    top: 54%;
    left: 38%;
    font-size: 38px;
    font-weight: 700;
    color: #8b749e;
}
.rpk-camera {
    position: absolute;
    top: 15px;
    left: 14px;
    display: grid;
    grid-template-columns: 30px 30px;
    gap: 7px;
    padding: 9px;
    border: 1px solid #b49fc5;
    background: #d4c6df;
    border-radius: 20px;
}
.rpk-camera i {
    width: 30px;
    height: 30px;
    border: 4px solid #7e6b90;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #5a557b, #181523 60%);
    box-shadow: 0 1px 2px #ffffff88;
}
.rpk-camera b { width: 12px; height: 12px; background: #f5e7ce; border-radius: 50%; margin: 9px; }
.rpk-phone-front {
    position: absolute;
    width: 198px;
    height: 362px;
    left: 47%;
    top: 58px;
    border: 6px solid #302c39;
    border-radius: 33px;
    background: #302c39;
    box-shadow: 2px 3px 0 #91829d, 0 25px 28px #39254433;
    transform: rotate(12deg);
    overflow: hidden;
}
.rpk-phone-island { position: absolute; top: 9px; left: 60px; width: 65px; height: 16px; border-radius: 20px; background: #28212e; z-index: 2; }
.rpk-phone-display {
    height: 100%;
    border-radius: 26px;
    background: radial-gradient(ellipse at 95% 95%, #b383c6 0, transparent 65%), linear-gradient(150deg, #f7d3bb, #e6bdbd 40%, #bb94ce);
    padding: 60px 17px 20px;
    position: relative;
    overflow: hidden;
}
.rpk-phone-display > span { position: relative; z-index: 1; display: block; font-size: 29px; line-height: 1.15; letter-spacing: -1.4px; font-weight: 700; color: #463046; }
.rpk-phone-display > small { position: relative; z-index: 1; font-size: 6px; letter-spacing: 1.7px; color: #694b64; }
.rpk-phone-wave { position: absolute; width: 235px; height: 300px; border: 30px solid #f5d3b68c; border-radius: 50%; left: -25px; top: 164px; transform: rotate(-30deg); box-shadow: 0 0 0 18px #f3c8b546, 0 0 0 38px #f3c8b52b; }
.rpk-phone-dock { position: absolute; bottom: 20px; left: 23px; right: 23px; display: flex; justify-content: space-between; padding: 7px; background: #ffffff44; border: 1px solid #ffffff55; border-radius: 17px; }
.rpk-phone-dock i { display: grid; place-items: center; width: 28px; height: 28px; background: #fff7; border-radius: 10px; font-style: normal; color: #664778; }
.rpk-art-tag { z-index: 3; bottom: 26px; }

@media (max-width: 1000px) and (min-width: 701px) {
    .rpk-phone-back { left: 8%; width: 165px; height: 300px; top: 91px; }
    .rpk-phone-front { left: 40%; width: 177px; height: 325px; top: 67px; }
    .rpk-phone-island { left: 50px; }
    .rpk-phone-display > span { font-size: 26px; }
}
@media (max-width: 700px) {
    .rpk-hero-art { height: 360px; min-height: 360px; }
    .rpk-phone-back { width: 143px; height: 251px; left: calc(50% - 127px); top: 55px; border-radius: 26px; }
    .rpk-phone-front { width: 153px; height: 280px; left: calc(50% - 18px); top: 32px; border-radius: 28px; }
    .rpk-phone-display { padding: 48px 10px 15px; border-radius: 22px; }
    .rpk-phone-display > span { font-size: 24px; }
    .rpk-phone-display > small { font-size: 5px; letter-spacing: 1px; }
    .rpk-phone-island { left: 44px; width: 52px; height: 12px; }
    .rpk-phone-wave { top: 120px; }
    .rpk-phone-dock { left: 12px; right: 12px; bottom: 15px; }
    .rpk-phone-dock i { width: 24px; height: 24px; }
    .rpk-camera { transform: scale(.8); transform-origin: top left; }
    .rpk-art-tag { bottom: 22px; right: 18px; }
}