@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/fredoka-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/nunito-latin.woff2") format("woff2");
}

:root {
    /* Marca aprobada */
    --sb-ink: #303447;
    --sb-pink: #F0A8C0;
    --sb-pink-deep: #D8789A;
    --sb-teal: #86C7CD;
    --sb-lilac: #D1AAEB;
    --sb-butter: #FDF3B8;
    --sb-bg: #FDFAFC;
    --sb-surface: #FFFFFF;
    --sb-border: #EBDDE6;
    --sb-muted: #6E7280;

    /* Escala de espaciado: múltiplos de 4 px */
    --sb-space-1: 4px;
    --sb-space-2: 8px;
    --sb-space-3: 12px;
    --sb-space-4: 16px;
    --sb-space-6: 24px;
    --sb-space-8: 32px;
    --sb-space-12: 48px;
    --sb-space-16: 64px;

    /* Radios, profundidad y tipografía */
    --sb-radius-sm: 8px;
    --sb-radius-control: 12px;
    --sb-radius-card: 16px;
    --sb-radius-feature: 20px;
    --sb-radius-pill: 999px;
    --sb-shadow-sm: 0 2px 8px rgba(48, 52, 71, .06);
    --sb-shadow-md: 0 10px 24px rgba(48, 52, 71, .08);
    --sb-shadow-lg: 0 18px 40px rgba(48, 52, 71, .10);
    --sb-shadow-focus: 0 0 0 3px rgba(167, 70, 102, .22);
    --sb-focus: #A74666;
    --sb-font-display: "Fredoka", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
    --sb-font-body: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Estados semánticos */
    --sb-success: #356D51;
    --sb-success-soft: #E8F4EC;
    --sb-success-border: #C7E0D0;
    --sb-danger: #A34057;
    --sb-danger-soft: #F9E9EC;
    --sb-danger-border: #E8C7CF;
    --sb-warning: #8A6A34;
    --sb-warning-soft: #FBF4E3;
    --sb-warning-border: #E8D8B0;
    --sb-info: #4E7480;
    --sb-info-soft: #EAF3F4;
    --sb-info-border: #CFE1E4;
    --sb-neutral: #646975;
    --sb-neutral-soft: #F0F1F3;
    --sb-neutral-border: #DADDE2;
    --sb-price: #A74666;

    /* Alias para conservar los selectores ya usados por la tienda */
    --sb-pink-soft: #FBE8F0;
    --sb-turquoise: var(--sb-teal);
    --sb-turquoise-soft: #E8F4F4;
    --sb-lilac-soft: #F0E4F8;
    --sb-yellow: var(--sb-butter);
    --sb-yellow-soft: #FFF9D9;
    --sb-cream: var(--sb-bg);
    --sb-navy: var(--sb-ink);
    --sb-text: var(--sb-ink);
    --sb-white: var(--sb-surface);
    --sb-radius-lg: var(--sb-radius-feature);
    --sb-radius: var(--sb-radius-card);
    --sb-shadow: var(--sb-shadow-md);
    color-scheme: light;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--sb-text);
    background: var(--sb-bg);
    font-family: var(--sb-font-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--sb-font-display);
    font-weight: 600;
}

a { color: inherit; }

button,
input,
select,
textarea {
    font-family: inherit;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) {
    color: var(--sb-ink);
    border-color: var(--sb-border);
    border-radius: var(--sb-radius-control);
}

::selection {
    color: var(--sb-ink);
    background: var(--sb-pink);
}

.sb-navbar {
    background: #FFF2F7;
    border-bottom: 1px solid #EED9E4;
    box-shadow: var(--sb-shadow-md);
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: .8rem;
    text-decoration: none;
}

.brand-avatar {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: var(--sb-shadow-sm);
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-copy strong {
    font-size: 1.03rem;
    color: var(--sb-navy);
}

.brand-copy small {
    color: #9A6D7F;
    font-size: .72rem;
    margin-top: .25rem;
}

.nav-link {
    font-weight: 650;
    color: #5D5F70;
    margin: 0 .35rem;
    padding: .6rem .75rem !important;
    border-radius: var(--sb-radius-control);
}

.nav-link:hover,
.nav-link.active {
    color: var(--sb-navy);
    background: rgba(255,255,255,.72);
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #EBD5E0;
    background: rgba(255,255,255,.8);
    color: var(--sb-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

.icon-btn:hover {
    transform: translateY(-2px);
    border-color: var(--sb-pink);
    background: #fff;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-pink-deep);
    color: #fff;
    font-size: .7rem;
    display: grid;
    place-items: center;
}

.hero-section {
    padding: 2rem 0 1rem;
    background:
        radial-gradient(circle at 10% 20%, rgba(240,168,192,.24), transparent 26rem),
        radial-gradient(circle at 90% 15%, rgba(134,199,205,.22), transparent 28rem);
}

.hero-card {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem);
    border-radius: var(--sb-radius-lg);
    background:
        linear-gradient(135deg, rgba(255,229,239,.96) 0%, rgba(255,247,225,.95) 46%, rgba(220,245,246,.96) 100%);
    border: 1px solid rgba(226, 200, 213, .9);
    box-shadow: var(--sb-shadow);
}

.hero-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(209,170,235,.22);
    left: -100px;
    bottom: -120px;
}

.hero-kicker,
.eyebrow {
    display: inline-block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 800;
    color: #9B6C82;
}

.hero-copy { position: relative; z-index: 2; }

.hero-copy h1 {
    margin: 1rem 0 0;
    max-width: 620px;
    font-family: var(--sb-font-display);
    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.035em;
    color: var(--sb-navy);
}

.hero-copy h1 span {
    color: var(--sb-pink-deep);
}

.hero-text {
    margin-top: 1.5rem;
    max-width: 580px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #646778;
}

.btn-sb-primary,
.btn-sb-light {
    min-height: 48px;
    border-radius: var(--sb-radius-control);
    padding: .75rem 1.35rem;
    font-weight: 700;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn-sb-primary {
    color: #fff;
    border: 1px solid var(--sb-navy);
    background: var(--sb-navy);
    box-shadow: var(--sb-shadow-sm);
}

.btn-sb-primary:hover {
    background: #242838;
    color: #fff;
    border-color: #242838;
    box-shadow: var(--sb-shadow-md);
    transform: translateY(-1px);
}

.btn-sb-light {
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(221,197,210,.95);
    color: var(--sb-navy);
}

.btn-sb-light:hover {
    background: #fff;
    border-color: var(--sb-pink);
    color: var(--sb-navy);
    box-shadow: var(--sb-shadow-sm);
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-benefits span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.66);
    border: 1px solid rgba(225,199,212,.72);
    color: #66697B;
    font-size: .88rem;
    font-weight: 600;
}

.hero-art {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-circle {
    width: min(430px, 84vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 14px;
    background: linear-gradient(135deg, #fff, #F8DDE8 45%, #CFEDEF 100%);
    box-shadow: var(--sb-shadow-lg);
}

.hero-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.category-float {
    position: absolute;
    z-index: 3;
    padding: .7rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(231,204,218,.95);
    box-shadow: var(--sb-shadow-md);
    font-weight: 700;
    color: #6F5362;
}

.float-a { top: 13%; right: 2%; }
.float-b { bottom: 18%; right: 4%; }
.float-c { bottom: 9%; left: 2%; }

.hero-stars {
    position: absolute;
    color: #D18CAF;
    font-size: 2rem;
    opacity: .85;
}

.stars-a { top: 7%; left: 8%; }
.stars-b { top: 33%; right: 5%; color: #76B9C0; font-size: 2.5rem; }
.stars-c { bottom: 12%; left: 12%; color: #BA8FD5; }

.section-heading { max-width: 720px; }

.section-heading h2,
.flow-shell h2,
.location-card h2,
.social-shell h2,
.page-hero-inner h1,
.about-card h2,
.contact-location h2,
.contact-social h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
}

.section-heading h2 {
    margin-top: .6rem;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.section-heading p {
    color: var(--sb-muted);
    font-size: 1.05rem;
}

.category-section {
    background: #FFF8FB;
}

.category-card {
    position: relative;
    min-height: 180px;
    padding: 1.25rem;
    border-radius: var(--sb-radius-feature);
    text-decoration: none;
    border: 1px solid rgba(229,211,220,.9);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--sb-shadow-md);
    transition: .22s ease;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sb-shadow-lg);
    color: var(--sb-navy);
}

.category-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--sb-radius-card);
    background: rgba(255,255,255,.76);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #7D5D6D;
}

.category-card strong {
    font-size: 1.05rem;
    color: var(--sb-navy);
}

.category-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(48,52,71,.48);
}

.cat-pink { background: linear-gradient(145deg, #F9DDE8, #FFF3F7); }
.cat-yellow { background: linear-gradient(145deg, #FFF6C9, #FFFBEB); }
.cat-lilac { background: linear-gradient(145deg, #E8D6F4, #F8F0FD); }
.cat-rose { background: linear-gradient(145deg, #F8CEDD, #FFF0F5); }
.cat-blue { background: linear-gradient(145deg, #CFECEF, #EDF9FA); }
.cat-purple { background: linear-gradient(145deg, #EADCF5, #F9F2FC); }
.cat-cream { background: linear-gradient(145deg, #FFE9D9, #FFF7F0); }

.shopping-flow {
    background: linear-gradient(180deg, #FCE9F1 0%, #F9EEF9 52%, #E9F7F7 100%);
}

.flow-shell {
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--sb-radius-lg);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(231,206,219,.82);
    box-shadow: var(--sb-shadow);
}

.flow-shell h2 {
    margin-top: .6rem;
    font-size: clamp(2.1rem, 4vw, 3.1rem);
}

.flow-card {
    position: relative;
    min-height: 220px;
    padding: 1.3rem;
    border-radius: var(--sb-radius-feature);
    background: #fff;
    border: 1px solid #EBD8E2;
    box-shadow: var(--sb-shadow-md);
}

.flow-card > span {
    position: absolute;
    right: 1rem;
    top: .9rem;
    color: #CF9AB0;
    font-weight: 800;
}

.flow-card i {
    width: 48px;
    height: 48px;
    border-radius: var(--sb-radius-card);
    background: var(--sb-pink-soft);
    display: grid;
    place-items: center;
    margin-bottom: 2.5rem;
    color: var(--sb-pink-deep);
    font-size: 1.2rem;
}

.flow-card strong {
    display: block;
    font-size: 1rem;
    color: var(--sb-navy);
}

.flow-card p {
    margin: .45rem 0 0;
    color: var(--sb-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.features-section {
    background: #FFF8FB;
}

.feature-card {
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--sb-radius-feature);
    border: 1px solid rgba(228,210,219,.88);
    box-shadow: var(--sb-shadow-md);
}

.feature-card > i {
    width: 52px;
    height: 52px;
    border-radius: var(--sb-radius-card);
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.74);
    font-size: 1.3rem;
    color: #795768;
}

.feature-card h3 {
    margin-top: 1.3rem;
    font-size: 1.08rem;
    color: var(--sb-navy);
}

.feature-card p {
    margin: .55rem 0 0;
    color: var(--sb-muted);
    line-height: 1.55;
    font-size: .93rem;
}

.feature-pink { background: #FBE3EC; }
.feature-blue { background: #DDF3F4; }
.feature-lilac { background: #EEE0F7; }
.feature-yellow { background: #FFF8D8; }

.location-section {
    background: linear-gradient(135deg, #F4E5F8 0%, #FCE6EF 45%, #DFF3F4 100%);
}

.location-card {
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--sb-radius-lg);
    background: rgba(255,255,255,.80);
    border: 1px solid rgba(226,204,216,.9);
    box-shadow: var(--sb-shadow);
}

.location-card h2 {
    margin-top: .6rem;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.location-address {
    max-width: 650px;
    color: var(--sb-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.location-badge {
    min-height: 240px;
    padding: 1.6rem;
    border-radius: var(--sb-radius-feature);
    background: linear-gradient(145deg, #FCE4EE, #E1F3F4);
    border: 1px solid #E5CCD9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pin-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    color: var(--sb-pink-deep);
    box-shadow: var(--sb-shadow-md);
    margin-bottom: 1rem;
}

.location-badge strong {
    color: var(--sb-navy);
    font-size: 1.1rem;
}

.location-badge span {
    color: var(--sb-muted);
    margin-top: .25rem;
}

.social-section {
    background: #FFF8FB;
}

.social-shell {
    padding: clamp(1.6rem, 4vw, 2.7rem);
    border-radius: var(--sb-radius-lg);
    background: linear-gradient(120deg, #F8DCE8 0%, #F2E3FA 47%, #DDF3F4 100%);
    border: 1px solid #E5CDD9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.social-shell h2 {
    margin: .55rem 0 .45rem;
}

.social-shell p { color: var(--sb-muted); }

.social-links-home {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.social-links-home a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.8);
    border: 1px solid #E5CCD9;
    border-radius: var(--sb-radius-control);
    text-decoration: none;
    color: var(--sb-navy);
    font-weight: 650;
}

.page-hero {
    padding: 4rem 0;
}

.page-hero-shop { background: linear-gradient(120deg, #FBE2EC, #F8EBFC 55%, #DFF3F4); }
.page-hero-about { background: var(--sb-pink-soft); }
.page-hero-contact { background: var(--sb-turquoise-soft); }

.page-hero-about,
.page-hero-contact { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.page-hero-about .page-hero-inner p,
.page-hero-contact .page-hero-inner p { color: var(--sb-ink); }

.page-hero-inner {
    max-width: 760px;
}

.page-hero-inner h1 {
    margin: .5rem 0;
    font-size: clamp(3rem, 6vw, 5rem);
}

.page-hero-inner p {
    color: var(--sb-muted);
    font-size: 1.08rem;
}

.shop-section { background: #FFF8FB; }

.about-section,
.contact-section {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    background: var(--sb-bg);
}

.shop-toolbar {
    padding: 1.25rem;
    border-radius: var(--sb-radius-feature);
    background: #fff;
    border: 1px solid #EBD9E2;
    box-shadow: var(--sb-shadow-md);
}

.search-box { max-width: 520px; }

.search-box .input-group-text,
.search-box .form-control {
    min-height: 50px;
    border-color: var(--sb-border);
    background: var(--sb-surface);
}

.filter-pill {
    border: 1px solid #E5D1DC;
    border-radius: 999px;
    background: #FFF6FA;
    color: #6D6070;
    padding: .62rem 1rem;
    font-weight: 600;
}

.coming-catalog {
    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
    border-radius: var(--sb-radius-feature);
    text-align: center;
    background: linear-gradient(145deg, #FDE5EE, #F4E7FB 52%, #DFF3F4);
    border: 1px solid #E4CDD9;
}

.coming-catalog h2 {
    font-family: var(--sb-font-display);
    color: var(--sb-navy);
}

.coming-catalog p {
    max-width: 620px;
    margin: .8rem auto 0;
    color: var(--sb-muted);
}

.about-card,
.contact-location,
.contact-social {
    min-width: 0;
    padding: clamp(1.35rem, 3vw, 2.5rem);
    border-radius: var(--sb-radius-feature);
    border: 1px solid var(--sb-border);
}

.about-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}

.about-copy { max-width: 68ch; }

.about-copy h2 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.12;
}

.about-image-wrap {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1600 / 1056;
    border-radius: var(--sb-radius-card);
    overflow: hidden;
    margin-inline: auto;
    background: #08090C;
}

.about-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.about-card p,
.contact-location address,
.contact-social p {
    color: var(--sb-muted);
    line-height: 1.7;
}

.about-location-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 1.25rem 0 0;
    color: var(--sb-ink) !important;
    font-weight: 700;
}

.about-location-note > i {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--sb-price);
}

.about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.1rem;
    margin-top: 1.5rem;
}

.about-contact-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--sb-price);
    font-weight: 750;
    text-underline-offset: .2em;
}

.about-contact-link:hover { color: var(--sb-ink); }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.contact-location {
    background: var(--sb-turquoise-soft);
}

.contact-location h2,
.contact-social h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1.15;
}

.contact-location address {
    max-width: 56ch;
    margin: .9rem 0 1.5rem;
    color: var(--sb-ink);
    font-style: normal;
}

.contact-map-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.contact-social {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}

.contact-social > p { margin: .65rem 0 0; }

.social-list {
    display: grid;
    gap: .65rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.social-list a {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    border-radius: var(--sb-radius-control);
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    text-decoration: none;
    color: var(--sb-ink);
    font-weight: 750;
}

.social-list a:hover {
    background: var(--sb-pink-soft);
    border-color: var(--sb-pink-deep);
}

.social-list a > i:first-child {
    flex: 0 0 auto;
    color: var(--sb-price);
    font-size: 1.15rem;
}

.social-list a > i:last-child {
    margin-left: auto;
    color: var(--sb-muted);
    font-size: .9rem;
}

.not-found-section {
    flex: 1 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 0;
    display: grid;
    align-content: center;
    background: var(--sb-bg);
}

.not-found-content {
    max-width: 680px;
    margin-inline: auto;
    padding: clamp(1.6rem, 5vw, 3rem);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-feature);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
    text-align: center;
}

.not-found-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    font-family: var(--sb-font-display);
    font-size: 1.15rem;
    font-weight: 600;
}

.not-found-brand img {
    width: 56px;
    height: 56px;
    border: 1px solid var(--sb-border);
    border-radius: 50%;
    object-fit: cover;
}

.not-found-code {
    margin: 1.1rem 0 .15rem;
    color: var(--sb-price);
    font-family: var(--sb-font-display);
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
}

.not-found-content h1 {
    margin: .45rem 0 .65rem;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.12;
}

.not-found-content > p:not(.not-found-code) {
    max-width: 48ch;
    margin: 0 auto 1.4rem;
    color: var(--sb-muted);
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.sb-footer {
    background: #2F3345;
    color: #fff;
}

.footer-shell {
    padding: 2rem;
}

.footer-brand strong,
.footer-brand span {
    display: block;
}

.footer-brand span {
    color: #E6BFD0;
    font-size: .83rem;
}

.footer-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.7);
}

.sb-footer .text-muted,
.sb-footer .footer-links a,
.sb-footer .footer-links span {
    color: #CBCDD7 !important;
}

.footer-links li { margin-bottom: .45rem; }

.footer-links a { text-decoration: none; }

.social-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.18);
    text-decoration: none;
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    color: #BFC2CE;
}

@media (max-width: 991.98px) {
    .nav-actions { margin-top: 1rem; }
    .hero-art { min-height: 430px; }
    .hero-circle { width: min(390px, 78vw); }
    .social-shell { flex-direction: column; align-items: flex-start; }
    .about-card,
    .contact-grid { grid-template-columns: 1fr; }
    .about-image-wrap { max-width: 580px; }
}

@media (max-width: 767.98px) {
    .hero-copy h1 { font-size: clamp(3rem, 13vw, 4.2rem); }
    .hero-art { min-height: 390px; }
    .category-float { font-size: .82rem; padding: .6rem .8rem; }
    .float-a { right: 0; }
    .float-b { right: 0; }
    .float-c { left: 0; }
}

@media (max-width: 575.98px) {
    .brand-copy { display: none; }
    .brand-avatar { width: 48px; height: 48px; }
    .hero-card { padding: 1.4rem; border-radius: var(--sb-radius-feature); }
    .hero-art { min-height: 330px; }
    .hero-circle { width: min(300px, 84vw); }
    .hero-benefits span { width: 100%; }
    .category-card { min-height: 150px; }
    .flow-shell,
    .location-card,
    .about-card,
    .contact-location,
    .contact-social { padding: 1.2rem; }

    .about-actions { align-items: stretch; flex-direction: column; gap: .35rem; }

    .about-actions .btn,
    .about-contact-link { width: 100%; justify-content: center; }

    .not-found-actions { display: grid; }
    .not-found-actions .btn { width: 100%; }
}


/* Checkpoint 2: catálogo dinámico */
.catalog-soft-message {
    padding: 1.2rem 1.4rem;
    border-radius: var(--sb-radius-card);
    background: linear-gradient(135deg, #FBE8F0, #E1F3F4);
    border: 1px solid #E5D1DC;
    color: #6C6070;
    font-weight: 650;
}

.catalog-soft-message i {
    margin-right: .45rem;
    color: var(--sb-pink-deep);
}

.product-card {
    overflow: hidden;
    height: 100%;
    border-radius: var(--sb-radius-card);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
    transition: transform .22s ease-out, box-shadow .22s ease-out, border-color .22s ease-out;
}

.product-card:focus-within,
.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--sb-pink);
    box-shadow: 0 10px 24px rgba(167, 70, 102, .12);
}

.product-image {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sb-turquoise-soft);
}

.product-image img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: clamp(.35rem, 1vw, .8rem);
    border: 0;
    object-fit: contain;
    display: block;
    transition: transform .3s ease-out;
}

@media (hover: hover) {
    .product-card:hover .product-image img { transform: scale(1.025); }
}

.product-image-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .45rem;
    color: var(--sb-ink);
}

.product-image-placeholder i {
    color: var(--sb-price);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.product-image-placeholder span {
    font-size: .72rem;
    font-weight: 750;
}

.product-status {
    width: fit-content;
    max-width: 100%;
    min-height: 26px;
    margin-top: .55rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
}

.product-status.available {
    background: var(--sb-success-soft);
    color: var(--sb-success);
}

.product-status.unavailable {
    background: var(--sb-neutral-soft);
    color: var(--sb-neutral);
}

.product-body {
    min-width: 0;
    flex: 1;
    padding: 1rem 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.product-category {
    max-width: 100%;
    color: var(--sb-muted);
    font-size: .76rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.product-body h2 {
    width: 100%;
    min-height: 3.9em;
    margin: .38rem 0 .48rem;
    color: var(--sb-navy);
    font-size: .98rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.product-price {
    max-width: 100%;
    margin: 0;
    color: var(--sb-price);
    font-weight: 800;
    font-size: 1.08rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}


/* Checkpoint 5: detalle de producto y carrito */

.product-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.product-card-cta {
    margin-top: auto;
    padding-top: .7rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--sb-price);
    font-size: .8rem;
    font-weight: 700;
    text-underline-offset: .2em;
}

.icon-btn {
    text-decoration: none;
}

.icon-btn.active {
    background: var(--sb-pink-soft);
    border-color: #E4CBD7;
}

.page-hero-cart {
    padding: 1.35rem 0 1.5rem;
    background: linear-gradient(120deg, #E7F5F6, #F9E7F1 48%, #FFF5D7);
}

.page-hero-cart .page-hero-inner h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.15;
}

.page-hero-cart .page-hero-inner p {
    margin: .4rem 0 0;
    max-width: 58ch;
    color: #555B68;
    font-size: .98rem;
}

.sb-public-alert {
    padding: .9rem 1rem;
    border-radius: var(--sb-radius-control);
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .9rem;
    font-weight: 650;
}

.sb-public-alert.success {
    background: var(--sb-success-soft);
    border: 1px solid var(--sb-success-border);
    color: var(--sb-success);
}

.sb-public-alert.danger {
    background: var(--sb-danger-soft);
    border: 1px solid var(--sb-danger-border);
    color: var(--sb-danger);
}

.product-detail-section {
    min-height: calc(100vh - 5rem);
    padding: clamp(1.5rem, 4vw, 3.75rem) 0 clamp(3rem, 6vw, 5.5rem);
    background:
        radial-gradient(ellipse at 5% 0%, rgba(240,168,192,.12), transparent 32rem),
        radial-gradient(ellipse at 100% 14%, rgba(134,199,205,.13), transparent 34rem),
        #FDFAFC;
}

.product-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-bottom: clamp(1.4rem, 3vw, 2.5rem);
    color: var(--sb-muted);
    font-size: .8rem;
}

.product-breadcrumb a {
    color: #745568;
    text-decoration: none;
    text-underline-offset: .2em;
}

.product-breadcrumb a:hover {
    color: var(--sb-pink-deep);
    text-decoration: underline;
}

.product-breadcrumb span {
    max-width: min(48ch, 100%);
    color: var(--sb-navy);
    overflow-wrap: anywhere;
}

.product-breadcrumb i {
    font-size: .62rem;
    color: #A68C9A;
}

.product-detail-alert {
    margin-bottom: 1.5rem;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: 1240px;
    margin-inline: auto;
}

.product-detail-image {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    border-radius: clamp(1.15rem, 2vw, 1.75rem);
    background: var(--sb-turquoise-soft);
    box-shadow: 0 16px 42px rgba(48, 52, 71, .08);
}

.product-detail-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    padding: clamp(1rem, 3vw, 2.25rem);
    object-fit: contain;
    object-position: center;
}

.product-detail-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .75rem;
    padding: 1.5rem;
    color: var(--sb-ink);
    text-align: center;
}

.product-detail-placeholder i {
    width: clamp(4rem, 8vw, 6.5rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--sb-border);
    border-radius: 1.5rem;
    background: var(--sb-surface);
    color: var(--sb-price);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.product-detail-placeholder span {
    font-size: .9rem;
    font-weight: 700;
}

.product-thumbnails {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    padding: .9rem .1rem .35rem;
    scrollbar-color: #D8789A #F6EAF0;
    scrollbar-width: thin;
}

.product-thumbnail {
    width: clamp(4.25rem, 7vw, 5.25rem);
    aspect-ratio: 1;
    min-width: 44px;
    min-height: 44px;
    padding: .2rem;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid #E9D8E1;
    border-radius: .9rem;
    background: #FFF;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-thumbnail.active {
    border: 2px solid #A74666;
    box-shadow: 0 0 0 3px rgba(167, 70, 102, .14);
}

.product-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: .62rem;
    object-fit: contain;
    background: #FCF8FA;
}

.product-thumbnail:hover:not(.active) {
    border-color: #C985A0;
    transform: translateY(-1px);
}

.product-detail-category {
    display: inline-flex;
    max-width: 100%;
    padding: .38rem .68rem;
    border: 1px solid #E8D9EE;
    border-radius: var(--sb-radius-pill);
    background: #F6EFF9;
    color: #694F77;
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-decoration: none;
}

a.product-detail-category:hover {
    border-color: #C4A4D3;
    color: #553B65;
    text-decoration: underline;
    text-underline-offset: .18em;
}

.product-detail-copy h1 {
    margin: .85rem 0 .55rem;
    color: var(--sb-navy);
    font-family: var(--sb-font-display);
    font-size: clamp(2.1rem, 4.4vw, 3.65rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.product-detail-price {
    color: var(--sb-price);
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    font-weight: 850;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.product-stock-summary {
    width: fit-content;
    max-width: 100%;
    margin-top: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .68rem;
    border: 1px solid transparent;
    border-radius: var(--sb-radius-pill);
    font-size: .78rem;
    font-weight: 700;
}

.product-stock-summary.available {
    border-color: #CFE7D6;
    background: #EDF7F0;
    color: var(--sb-success);
}

.product-stock-summary.unavailable {
    border-color: #EED0D9;
    background: #FFF0F3;
    color: var(--sb-danger);
}

.product-description {
    max-width: 62ch;
    margin-top: 1.35rem;
    color: #555969;
    line-height: 1.78;
    overflow-wrap: anywhere;
}

.product-buy-form {
    margin-top: 1.65rem;
}

.product-option-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    margin-bottom: .7rem;
}

.product-option-heading strong {
    color: var(--sb-navy);
    font-size: 1rem;
}

.product-option-heading span {
    color: #5F6471;
    font-size: .78rem;
    font-weight: 650;
}

.product-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .65rem;
}

.product-variant-choice {
    position: relative;
    cursor: pointer;
}

.product-variant-choice input {
    position: absolute;
    inset: .65rem auto auto .65rem;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.variant-choice-content {
    min-height: 4.65rem;
    padding: .75rem .85rem;
    border: 1px solid #DFD4DC;
    border-radius: 1rem;
    background: #FFF;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap: .32rem;
    overflow-wrap: anywhere;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.variant-choice-content strong {
    color: var(--sb-navy);
    font-size: .88rem;
    line-height: 1.35;
}

.variant-choice-content small {
    color: #5F6471;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.product-variant-choice input:checked + .variant-choice-content {
    border-color: #A74666;
    background: #FFF5F8;
    box-shadow: inset 0 0 0 1px #A74666, 0 0 0 3px rgba(167, 70, 102, .1);
}

.product-variant-choice:hover:not(.disabled) .variant-choice-content {
    border-color: #C985A0;
}

.product-variant-choice.disabled {
    cursor: not-allowed;
}

.product-variant-choice.disabled .variant-choice-content {
    border-style: dashed;
    border-color: #DDD4D9;
    background: #F5F2F4;
}

.product-variant-choice.disabled .variant-choice-content strong,
.product-variant-choice.disabled .variant-choice-content small {
    color: #67616A;
}

.product-purchase-row {
    margin-top: 1.15rem;
    display: grid;
    grid-template-columns: minmax(7.75rem, .72fr) minmax(0, 1.5fr);
    gap: .7rem;
    align-items: end;
}

.product-quantity {
    display: grid;
    gap: .45rem;
}

.product-quantity > label {
    color: #4F5361;
    font-size: .78rem;
    font-weight: 700;
}

.product-quantity-control {
    min-height: 54px;
    display: grid;
    grid-template-columns: 44px minmax(2rem, 1fr) 44px;
    overflow: visible;
    border: 1px solid #DCCED7;
    border-radius: .95rem;
    background: #FFF;
}

.product-quantity button {
    border: 0;
    background: #FFF4F8;
    color: #59394A;
    font-size: 1.25rem;
    font-weight: 650;
    cursor: pointer;
}

.product-quantity button:hover {
    background: #FBE6EE;
}

.product-quantity button:first-child {
    border-radius: .9rem 0 0 .9rem;
}

.product-quantity button:last-child {
    border-radius: 0 .9rem .9rem 0;
}

.product-quantity input {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    color: var(--sb-navy);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
}

.product-quantity input::-webkit-inner-spin-button,
.product-quantity input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.product-add-btn {
    min-height: 54px;
    padding: .75rem 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border-radius: 1rem;
    font-weight: 750;
    white-space: normal;
    line-height: 1.25;
}

.product-add-btn:disabled {
    border-color: #C9C3C7;
    background: #E5E1E3;
    color: #625D61;
}

.product-detail-benefits {
    margin-top: 1.65rem;
    padding-top: 1.2rem;
    border-top: 1px solid #E5D9E0;
    display: grid;
    gap: .85rem;
}

.product-detail-benefits > div {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.product-detail-benefits > div > i {
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border: 1px solid #EBD9E3;
    border-radius: .8rem;
    display: grid;
    place-items: center;
    background: #FFF4F8;
    color: #8B4F69;
    font-size: 1rem;
}

.product-detail-benefits span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.product-detail-benefits strong {
    color: var(--sb-navy);
    font-size: .82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.product-detail-benefits small {
    color: #5F6471;
    font-size: .74rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .product-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.35rem, 4vw, 2.25rem);
    }

    .product-detail-gallery,
    .product-detail-copy {
        width: min(100%, 42rem);
        margin-inline: auto;
    }

    .product-detail-copy {
        padding-top: .25rem;
    }
}

@media (max-width: 575.98px) {
    .product-detail-section {
        padding-top: 1.15rem;
        padding-bottom: 3rem;
    }

    .product-breadcrumb {
        gap: .4rem;
        margin-bottom: 1.15rem;
        font-size: .74rem;
    }

    .product-detail-layout {
        gap: 1.1rem;
    }

    .product-detail-image {
        aspect-ratio: 4 / 3;
    }

    .product-detail-copy h1 {
        margin-top: .7rem;
        font-size: clamp(2rem, 8.4vw, 2.5rem);
    }

    .product-detail-price {
        font-size: clamp(1.7rem, 7.6vw, 2.15rem);
    }

    .product-variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .variant-choice-content {
        min-height: 5rem;
        padding: .68rem;
    }

    .product-purchase-row {
        grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr);
        gap: .5rem;
    }

    .product-quantity-control {
        min-height: 54px;
        grid-template-columns: 40px minmax(1.8rem, 1fr) 40px;
    }

    .product-add-btn {
        min-height: 58px;
        padding-inline: .65rem;
        font-size: .92rem;
    }

    .product-detail-benefits {
        margin-top: 1.35rem;
    }
}

.cart-section {
    min-height: 42vh;
    background:
        radial-gradient(ellipse at 6% 0%, rgba(240,168,192,.1), transparent 30rem),
        #FDFAFC;
}

.cart-feedback {
    max-width: 100%;
    box-shadow: var(--sb-shadow-sm);
}

.cart-empty {
    width: min(100%, 720px);
    margin: .5rem auto 1rem;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem);
    border: 1px solid #E4CDD9;
    border-radius: var(--sb-radius-feature);
    background: linear-gradient(145deg, #FDE5EE, #F0E5F8 50%, #DFF3F4);
    text-align: center;
}

.cart-empty-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.82);
    color: var(--sb-pink-deep);
    font-size: 1.75rem;
}

.cart-empty h2 {
    margin: 0;
    color: var(--sb-navy);
    font-size: 1.55rem;
}

.cart-empty p {
    max-width: 48ch;
    margin: .65rem auto 1.35rem;
    color: #555B68;
}

.cart-empty-action {
    min-width: 176px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.cart-layout > [class*="col-"] {
    min-width: 0;
}

.cart-items-card,
.cart-summary-card {
    border: 1px solid #E7D7DF;
    border-radius: var(--sb-radius-feature);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-md);
}

.cart-items-card {
    overflow: hidden;
}

.cart-items-heading {
    min-height: 64px;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #F0E7EC;
}

.cart-items-heading h2 {
    margin: 0;
    color: var(--sb-navy);
    font-size: 1.1rem;
}

.cart-items-heading > span {
    color: var(--sb-muted);
    font-size: .82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 112px 148px 80px;
    grid-template-areas:
        "image details quantity price action"
        ". warning warning warning .";
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #F0E7EC;
}

.cart-item:last-of-type {
    border-bottom: 0;
}

.cart-item-image {
    position: relative;
    grid-area: image;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-card);
    background: var(--sb-turquoise-soft);
    display: grid;
    place-items: center;
    color: var(--sb-price);
    text-decoration: none;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    padding: .4rem;
    object-fit: contain;
}

.cart-item-image .product-image-placeholder {
    gap: .3rem;
    padding: .25rem;
    color: var(--sb-ink);
}

.cart-item-image .product-image-placeholder i {
    font-size: 1.65rem;
}

.cart-item-image .product-image-placeholder span {
    font-size: .64rem;
    text-align: center;
}

.cart-item-info {
    grid-area: details;
    min-width: 0;
}

.cart-item-info > a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: .18em;
}

.cart-item-info > a:hover h3 {
    text-decoration: underline;
}

.cart-item-category {
    display: block;
    color: #80586A;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    overflow-wrap: anywhere;
}

.cart-item-info h3 {
    margin: .18rem 0 .32rem;
    color: var(--sb-navy);
    font-family: var(--sb-font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cart-item-variant {
    margin: 0 0 .25rem;
    color: #584B54;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cart-item-variant span {
    display: block;
    color: var(--sb-muted);
    font-size: .68rem;
    font-weight: 700;
}

.cart-item-sku {
    display: block;
    margin-top: .25rem;
    color: var(--sb-muted);
    font-size: .72rem;
    overflow-wrap: anywhere;
}

.cart-item-quantity {
    grid-area: quantity;
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: .3rem;
}

.cart-item-quantity label {
    color: var(--sb-ink);
    font-size: .76rem;
    font-weight: 750;
}

.cart-item-quantity input {
    width: 88px;
    min-height: 48px;
    padding: .4rem .5rem;
    border: 1px solid #CFC4CB;
    border-radius: var(--sb-radius-control);
    background: #fff;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cart-item-quantity input:focus-visible {
    border-color: var(--sb-focus);
}

.cart-stock-current {
    color: #555B68;
    font-size: .7rem;
    line-height: 1.35;
}

.cart-stock-warning {
    grid-area: warning;
    margin: .3rem 0 0;
    padding: .55rem .65rem;
    border: 1px solid var(--sb-warning-border);
    border-radius: var(--sb-radius-sm);
    background: var(--sb-warning-soft);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    color: #684B1E;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
}

.cart-stock-warning i {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.cart-item-price {
    grid-area: price;
    min-width: 0;
    display: grid;
    gap: .45rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cart-price-unit,
.cart-price-line {
    display: grid;
    gap: .08rem;
}

.cart-item-price span {
    color: #555B68;
    font-size: .7rem;
    line-height: 1.3;
}

.cart-item-price strong {
    color: var(--sb-navy);
    font-size: .93rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cart-price-line {
    padding-top: .4rem;
    border-top: 1px solid #F0E7EC;
}

.cart-price-line strong {
    color: var(--sb-price);
    font-size: 1rem;
    font-weight: 850;
}

.cart-remove-trigger {
    grid-area: action;
    min-width: 76px;
    min-height: 44px;
    padding: .45rem .5rem;
    border: 1px solid #E7C9D4;
    border-radius: var(--sb-radius-control);
    background: #FFF8FA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: #873C58;
    font: inherit;
    font-size: .76rem;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cart-remove-trigger:hover {
    border-color: var(--sb-danger);
    background: var(--sb-danger-soft);
    color: var(--sb-danger);
}

.cart-update-row {
    padding: 1rem 1.25rem;
    border-top: 1px solid #F0E7EC;
    background: #FFFAFC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cart-update-row p {
    max-width: 48ch;
    margin: 0;
    color: #555B68;
    font-size: .78rem;
    line-height: 1.45;
}

.cart-update-row .btn {
    min-height: 48px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.cart-summary-card {
    position: sticky;
    top: 105px;
    padding: 1.35rem;
}

.cart-summary-card h2 {
    margin: .25rem 0 1rem;
    color: var(--sb-navy);
    font-size: 1.35rem;
}

.cart-summary-row,
.cart-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.cart-summary-row {
    padding: .68rem 0;
    border-bottom: 1px solid #F0E7EC;
    color: #555B68;
    font-size: .86rem;
}

.cart-summary-row strong {
    color: var(--sb-navy);
    font-variant-numeric: tabular-nums;
}

.cart-summary-note {
    margin: 1rem 0;
    padding: .85rem;
    border: 1px solid #E8DCE4;
    border-radius: var(--sb-radius-control);
    background: #FBF6F8;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: #4D5260;
    font-size: .78rem;
    line-height: 1.5;
}

.cart-summary-note i {
    flex: 0 0 auto;
    margin-top: .1rem;
    color: var(--sb-price);
}

.cart-summary-total {
    margin: .35rem 0 1rem;
    padding: .95rem 0 1.05rem;
    border-top: 1px solid #E7D7DF;
    color: var(--sb-navy);
    font-size: .96rem;
    font-weight: 800;
}

.cart-summary-total strong {
    color: var(--sb-price);
    font-size: 1.28rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: right;
}

.cart-checkout-link,
.cart-shop-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.cart-shop-link {
    margin-top: .55rem;
}

@media (max-width: 1199.98px) {
    .cart-item {
        grid-template-columns: 72px minmax(0, 1fr) 84px 112px 72px;
        gap: .5rem;
        padding-inline: .75rem;
    }

    .cart-item-image {
        width: 72px;
        height: 72px;
    }

    .cart-item-quantity input {
        width: 100%;
        max-width: 88px;
    }

    .cart-remove-trigger {
        min-width: 68px;
        padding-inline: .35rem;
    }

    .cart-summary-card {
        padding: 1.15rem;
    }
}

@media (max-width: 991.98px) {
    .cart-summary-card {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .page-hero-cart {
        padding: 1.15rem 0 1.25rem;
    }

    .cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "image details"
            "quantity quantity"
            "warning warning"
            "price price"
            "action action";
        align-items: start;
        gap: .8rem .75rem;
        padding: 1rem;
    }

    .cart-item-image {
        width: 72px;
        height: 72px;
    }

    .cart-item-info {
        align-self: center;
    }

    .cart-item-quantity {
        grid-template-columns: auto minmax(72px, 1fr);
        align-items: center;
        column-gap: .75rem;
        padding-top: .7rem;
        border-top: 1px solid #F0E7EC;
    }

    .cart-item-quantity label {
        grid-column: 1;
        grid-row: 1;
    }

    .cart-item-quantity input {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: 96px;
    }

    .cart-stock-current {
        grid-column: 1 / -1;
    }

    .cart-item-price {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: .65rem;
        padding-top: .7rem;
        border-top: 1px solid #F0E7EC;
        text-align: left;
    }

    .cart-price-unit,
    .cart-price-line {
        min-width: 0;
    }

    .cart-price-line {
        padding-top: 0;
        border-top: 0;
    }

    .cart-item-price strong {
        font-size: .9rem;
    }

    .cart-price-line strong {
        font-size: 1rem;
    }

    .cart-remove-trigger {
        justify-self: end;
        min-width: 112px;
        min-height: 46px;
    }
}

@media (max-width: 575.98px) {
    .product-purchase-row {
        grid-template-columns: 1fr;
    }

    .cart-empty {
        padding-inline: 1.1rem;
    }

    .cart-items-heading {
        padding-inline: 1rem;
    }

    .cart-update-row {
        align-items: stretch;
        flex-direction: column;
        padding: 1rem;
    }

    .cart-update-row .btn {
        width: 100%;
    }

    .cart-summary-card {
        padding: 1.1rem;
    }
}


/* Checkpoint 6: checkout y pedidos */

.page-hero-checkout {
    background: linear-gradient(120deg, #FBE4ED, #F1E6F8 52%, #E0F3F4);
    padding: 1.55rem 0 1.75rem;
}

.page-hero-checkout .page-hero-inner {
    max-width: 900px;
}

.page-hero-checkout .page-hero-inner h1 {
    margin: 0 0 .35rem;
    color: var(--sb-ink);
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.12;
}

.page-hero-checkout .page-hero-inner p {
    max-width: 62ch;
    margin: 0;
    color: #565968;
    font-size: .98rem;
    line-height: 1.6;
}

.checkout-section {
    background: #FFF8FB;
}

.checkout-layout {
    --bs-gutter-x: clamp(1.2rem, 3vw, 2.35rem);
}

.checkout-card,
.checkout-summary-card,
.order-card,
.bank-details-card {
    border-radius: var(--sb-radius-feature);
    background: #fff;
    border: 1px solid #E7D7DF;
    box-shadow: var(--sb-shadow-lg);
}

.checkout-card {
    padding: clamp(1rem, 2.1vw, 1.75rem);
}

.checkout-form-section {
    padding: .15rem 0 1.55rem;
    scroll-margin-top: 8rem;
}

.checkout-form-section + .checkout-form-section {
    padding-top: 1.5rem;
    border-top: 1px solid #E9DDE3;
}

.checkout-form-section.checkout-notes-section {
    padding-bottom: .15rem;
}

.checkout-card-heading {
    margin-bottom: 1.05rem;
    display: flex;
    align-items: center;
    gap: .85rem;
}

.checkout-section-icon {
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: var(--sb-radius-control);
    background: var(--sb-pink-soft);
    color: #81445D;
    font-size: 1.05rem;
}

.checkout-card-heading h2,
.checkout-address-intro h3,
.checkout-summary-card h2,
.checkout-payment-note h3,
.order-card h2 {
    margin: 0;
    color: var(--sb-navy);
    font-family: var(--sb-font-display);
}

.checkout-card-heading h2 {
    font-size: clamp(1.18rem, 1.45vw, 1.42rem);
    line-height: 1.2;
}

.checkout-card-heading p {
    margin: .22rem 0 0;
    color: #5F6270;
    font-size: .85rem;
    line-height: 1.5;
}

.checkout-required-note {
    margin: -.15rem 0 .85rem;
    color: #595C69;
    font-size: .82rem;
    line-height: 1.5;
}

.checkout-field {
    display: grid;
    gap: .45rem;
    min-width: 0;
}

.checkout-field > span {
    color: #414553;
    font-size: .85rem;
    font-weight: 750;
    line-height: 1.35;
}

.checkout-field > span b {
    color: #A74666;
    font-weight: 800;
}

.checkout-field input,
.checkout-field textarea {
    width: 100%;
    min-height: 3.2rem;
    padding: .75rem .9rem;
    border: 1px solid #D8CBD3;
    border-radius: var(--sb-radius-control);
    background: #fff;
    color: var(--sb-text);
    outline: none;
    font: inherit;
    font-size: .95rem;
    scroll-margin-top: 8rem;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.checkout-field input:focus,
.checkout-field textarea:focus {
    border-color: var(--sb-focus);
    box-shadow: var(--sb-shadow-focus);
    background: #FFFEFF;
}

.checkout-field textarea {
    min-height: 7rem;
    line-height: 1.55;
    resize: vertical;
}

.checkout-field-error,
.checkout-inline-error {
    color: #8F3048;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.45;
}

.checkout-field-error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}

.checkout-field-error i {
    flex: 0 0 auto;
    margin-top: .12rem;
}

.checkout-field [aria-invalid="true"] {
    border-color: #B34860;
    background: #FFFAFB;
}

.checkout-inline-error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--sb-danger-border);
    border-radius: var(--sb-radius-control);
    background: var(--sb-danger-soft);
}

.delivery-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.delivery-method-card {
    position: relative;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.delivery-method-card input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.delivery-method-content {
    position: relative;
    min-height: 100%;
    padding: .9rem 2.55rem .9rem .9rem;
    border-radius: var(--sb-radius-card);
    border: 1px solid #DED0D9;
    background: #FFFBFD;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.delivery-method-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    display: grid;
    place-items: center;
    background: #F8E6EE;
    color: #85475F;
    font-size: 1rem;
}

.delivery-method-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.delivery-method-content strong {
    color: var(--sb-navy);
    font-size: .9rem;
    line-height: 1.35;
}

.delivery-method-content small {
    color: #555967;
    font-size: .78rem;
    line-height: 1.48;
}

.delivery-method-card input:checked + .delivery-method-content {
    border-color: var(--sb-pink-deep);
    background: #FFF1F6;
    box-shadow: 0 4px 12px rgba(108, 60, 80, .09), inset 0 0 0 1px rgba(167, 70, 102, .18);
}

.delivery-method-content::before,
.delivery-method-content::after {
    position: absolute;
    top: .9rem;
    right: .9rem;
    content: "";
}

.delivery-method-content::before {
    width: 1.2rem;
    height: 1.2rem;
    border: 1.5px solid #9A8390;
    border-radius: 50%;
    background: #fff;
}

.delivery-method-content::after {
    top: 1.22rem;
    right: 1.22rem;
    width: .42rem;
    height: .24rem;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    opacity: 0;
    transform: rotate(-45deg);
}

.delivery-method-card input:checked + .delivery-method-content::before {
    border-color: #A74666;
    background: #A74666;
}

.delivery-method-card input:checked + .delivery-method-content::after {
    opacity: 1;
}

.delivery-method-card:hover .delivery-method-content {
    border-color: #C985A0;
}

.pickup-information {
    padding: .95rem 1rem;
    border-radius: var(--sb-radius-card);
    border: 1px solid #E6D4DE;
    background: #FFF4F8;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.pickup-information[hidden],
.delivery-address-fields[hidden],
.checkout-section [data-national-only][hidden] {
    display: none !important;
}

.pickup-information-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--sb-pink-deep);
}

.pickup-information > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pickup-information strong {
    color: var(--sb-navy);
    font-size: .88rem;
    line-height: 1.4;
}

.pickup-information span {
    margin-top: .25rem;
    color: #555967;
    font-size: .8rem;
    line-height: 1.55;
}

.checkout-address-intro {
    margin-bottom: 1rem;
}

.checkout-address-intro h3 {
    font-size: 1.02rem;
    line-height: 1.3;
}

.checkout-address-intro p {
    max-width: 68ch;
    margin: .3rem 0 0;
    color: #5D606E;
    font-size: .82rem;
    line-height: 1.55;
}

.checkout-summary-card {
    position: sticky;
    top: 112px;
    padding: clamp(1rem, 1.8vw, 1.45rem);
}

.checkout-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .9rem;
}

.checkout-summary-heading h2 {
    font-size: 1.28rem;
    line-height: 1.2;
}

.checkout-summary-heading p {
    margin: .25rem 0 0;
    color: #5F6270;
    font-size: .82rem;
}

.checkout-summary-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    display: grid;
    place-items: center;
    background: var(--sb-turquoise-soft);
    color: #35656B;
    font-size: 1.05rem;
}

.checkout-mini-items {
    display: grid;
    padding: .2rem 0 .45rem;
    border-top: 1px solid #EDE4E9;
    border-bottom: 1px solid #EDE4E9;
}

.checkout-mini-item {
    min-width: 0;
    padding: .8rem 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    font-size: .8rem;
}

.checkout-mini-item + .checkout-mini-item {
    border-top: 1px solid #F0E8EC;
}

.checkout-mini-product {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.checkout-mini-image {
    width: 3rem;
    height: 3.35rem;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    background: var(--sb-turquoise-soft);
    display: grid;
    place-items: center;
    color: var(--sb-price);
}

.checkout-mini-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.checkout-mini-image i {
    font-size: 1.2rem;
}

.checkout-mini-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}

.checkout-mini-details strong {
    color: var(--sb-navy);
    font-size: .84rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.checkout-mini-details span,
.checkout-mini-details small {
    color: #5D606E;
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.checkout-mini-line-total {
    color: var(--sb-navy);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.checkout-summary-line,
.checkout-summary-total {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.checkout-summary-line {
    padding: .7rem 0;
    border-bottom: 1px solid #F0E7EC;
    color: #5F6270;
    font-size: .84rem;
}

.checkout-summary-line strong {
    color: var(--sb-navy);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.checkout-summary-line [data-shipping-label] {
    color: #81445D;
}

.checkout-summary-message {
    margin: .9rem 0;
    padding: .8rem .85rem;
    border: 1px solid #D2E3E5;
    border-radius: var(--sb-radius-control);
    background: #EDF6F6;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: #3F5960;
    font-size: .79rem;
    line-height: 1.5;
}

.checkout-summary-message i {
    flex: 0 0 auto;
    margin-top: .12rem;
    color: #35656B;
}

.checkout-summary-total {
    padding: .35rem 0 .9rem;
    align-items: baseline;
    color: var(--sb-navy);
    font-weight: 800;
}

.checkout-summary-total > span {
    max-width: 58%;
    font-size: .95rem;
    line-height: 1.35;
}

.checkout-summary-total strong {
    color: var(--sb-price);
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
}

.checkout-payment-note {
    margin: .2rem 0 1rem;
    padding: .85rem 0 0;
    border-top: 1px solid #EDE4E9;
}

.checkout-payment-note h3 {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .97rem;
    line-height: 1.3;
}

.checkout-payment-note h3 i {
    color: #81445D;
}

.checkout-payment-note p {
    margin: .5rem 0 0;
    color: #555967;
    font-size: .76rem;
    line-height: 1.5;
}

.checkout-submit-btn {
    min-height: 3.35rem;
    display: flex;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
}

.checkout-submit-caption {
    margin: .5rem 0 0;
    color: #5E6170;
    font-size: .76rem;
    line-height: 1.45;
    text-align: center;
}

.checkout-back-cart {
    min-height: 2.75rem;
    margin-top: .45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: #525766;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: .2em;
}

.checkout-back-cart:hover {
    color: #81445D;
    text-decoration: underline;
}

@media (max-width: 1199.98px) {
    .delivery-methods {
        grid-template-columns: minmax(0, 1fr);
    }

    .delivery-method-content {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .page-hero-checkout {
        padding: 1.35rem 0 1.45rem;
    }

    .page-hero-checkout .page-hero-inner h1 {
        font-size: clamp(1.9rem, 8vw, 2.55rem);
    }

    .page-hero-checkout .page-hero-inner p {
        font-size: .91rem;
    }

    .checkout-card {
        padding: 1rem;
    }

    .checkout-form-section + .checkout-form-section {
        padding-top: 1.2rem;
    }

    .checkout-section-icon {
        width: 2.35rem;
        height: 2.35rem;
    }

    .checkout-mini-item {
        gap: .55rem;
    }

    .checkout-mini-line-total {
        font-size: .78rem;
    }
}

@media (max-width: 575.98px) {
    html:has(.page-hero-checkout) .sb-footer .footer-shell > .row {
        margin-inline: 0;
    }
}

.order-confirmation-section {
    min-height: 70vh;
    background: var(--sb-bg);
}

.order-confirmation-header {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sb-border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.order-confirmation-copy {
    min-width: 0;
}

.order-confirmation-header h1 {
    margin: 0;
    color: var(--sb-navy);
    font-family: var(--sb-font-display);
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.08;
}

.order-confirmation-copy p {
    max-width: 62ch;
    margin: .55rem 0 0;
    color: var(--sb-muted);
    font-size: .9rem;
}

.order-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
}

.order-number-box {
    max-width: 100%;
    margin: 0;
    padding: .65rem .85rem;
    border-radius: var(--sb-radius-card);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}

.order-number-box span {
    color: var(--sb-muted);
    font-size: .68rem;
}

.order-number-box strong {
    color: var(--sb-navy);
    letter-spacing: .03em;
    overflow-wrap: anywhere;
    font-size: .9rem;
}

.order-public-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: .5rem .75rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
}

.order-public-status.transfer {
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
}

.order-public-status.quote {
    background: var(--sb-info-soft);
    color: var(--sb-info);
}

.order-public-status.review {
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
}

.order-public-status.paid,
.order-public-status.delivered {
    background: var(--sb-success-soft);
    color: var(--sb-success);
}

.order-public-status.preparing {
    background: var(--sb-lilac-soft);
    color: var(--sb-ink);
}

.order-public-status.delivery {
    background: var(--sb-info-soft);
    color: var(--sb-info);
}

.order-public-status.cancelled,
.order-public-status.refunded,
.order-public-status.neutral {
    background: var(--sb-neutral-soft);
    color: var(--sb-neutral);
}

.order-next-step {
    padding: clamp(1rem, 2vw, 1.35rem);
    border-radius: var(--sb-radius-card);
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    border: 1px solid var(--sb-border);
}

.order-next-step.transfer {
    background: var(--sb-warning-soft);
}

.order-next-step.quote {
    background: var(--sb-info-soft);
}

.order-next-step > i {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-card);
    display: grid;
    place-items: center;
    background: var(--sb-surface);
    color: var(--sb-ink);
    font-size: 1.2rem;
}

.order-next-step > div {
    display: flex;
    flex-direction: column;
}

.order-next-step h2 {
    margin: .25rem 0;
    color: var(--sb-navy);
    font-size: 1.15rem;
}

.order-next-step p {
    margin: .2rem 0 0;
    color: var(--sb-muted);
    font-size: .82rem;
    line-height: 1.6;
}

.bank-details-card,
.order-card {
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-card);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}

.bank-details-heading {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}

.bank-details-heading > i {
    width: 45px;
    height: 45px;
    border-radius: var(--sb-radius-control);
    display: grid;
    place-items: center;
    background: var(--sb-turquoise-soft);
    color: var(--sb-ink);
}

.bank-details-heading > div {
    display: flex;
    flex-direction: column;
}

.bank-details-heading span {
    color: var(--sb-muted);
    font-size: .7rem;
}

.bank-details-heading strong {
    color: var(--sb-navy);
}

.bank-details-card dl {
    margin: 0;
}

.bank-details-card dl > div {
    padding: .7rem 0;
    border-top: 1px solid var(--sb-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.bank-details-card dt {
    color: var(--sb-muted);
    font-size: .76rem;
    font-weight: 600;
}

.bank-details-card dd {
    min-width: 0;
    margin: 0;
    color: var(--sb-navy);
    font-size: .82rem;
    font-weight: 750;
    text-align: right;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.order-card-heading {
    margin-bottom: .85rem;
}

.order-card-heading h2,
.order-card > h2 {
    margin: 0 0 .4rem;
    color: var(--sb-navy);
    font-size: 1.12rem;
}

.order-card-heading p {
    margin: 0;
    color: var(--sb-muted);
    font-size: .78rem;
}

.order-items-list {
    display: grid;
}

.order-item-row {
    padding: .9rem 0;
    border-top: 1px solid var(--sb-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.order-item-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.order-item-row > div > strong {
    color: var(--sb-navy);
    overflow-wrap: anywhere;
}

.order-item-row span,
.order-item-row small {
    margin-top: .15rem;
    color: var(--sb-muted);
    font-size: .74rem;
    overflow-wrap: anywhere;
}

.order-item-row > strong {
    flex: 0 0 auto;
    color: var(--sb-navy);
    font-variant-numeric: tabular-nums;
}

.order-totals {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid var(--sb-border);
}

.order-totals > div {
    padding: .5rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--sb-muted);
    font-size: .82rem;
}

.order-totals > div strong {
    color: var(--sb-navy);
}

.order-totals > .total {
    color: var(--sb-navy);
    font-weight: 750;
}

.order-totals > .total strong {
    color: var(--sb-price);
    font-size: 1.15rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.order-total-note {
    margin: .45rem 0 0;
    padding: .7rem .8rem;
    border-radius: var(--sb-radius-control);
    background: var(--sb-info-soft);
    color: var(--sb-ink);
    font-size: .76rem;
    line-height: 1.5;
}

.order-detail-list {
    display: grid;
    gap: .75rem;
}

.order-detail-list > div {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.order-detail-list > div > i {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    display: grid;
    place-items: center;
    background: var(--sb-pink-soft);
    color: var(--sb-ink);
}

.order-detail-list span {
    display: flex;
    flex-direction: column;
}

.order-detail-list small {
    color: var(--sb-muted);
    font-size: .68rem;
}

.order-detail-list strong {
    color: var(--sb-navy);
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.order-address-box {
    margin-top: 1rem;
    padding: .9rem;
    border-radius: var(--sb-radius-control);
    background: var(--sb-pink-soft);
    display: flex;
    flex-direction: column;
}

.order-address-box strong {
    color: var(--sb-navy);
    font-size: .82rem;
}

.order-address-box span {
    margin-top: .25rem;
    color: var(--sb-muted);
    font-size: .75rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .checkout-summary-card {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .order-confirmation-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .order-identity {
        width: 100%;
        justify-content: flex-start;
    }

    .order-number-box {
        flex: 1 1 10rem;
    }

    .order-next-step {
        gap: .7rem;
    }

    .bank-details-card dl > div {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }

    .bank-details-card dd {
        text-align: left;
    }

    .order-item-row {
        gap: .5rem;
    }
}


/* Checkpoint 8: comprobantes de transferencia */

.order-next-step.payment-review {
    background: var(--sb-warning-soft);
}

.order-next-step.payment-approved {
    background: var(--sb-success-soft);
}

.order-next-step.preparing {
    background: var(--sb-lilac-soft);
}

.order-next-step.delivery {
    background: var(--sb-info-soft);
}

.order-next-step.delivered {
    background: var(--sb-success-soft);
}

.order-next-step.cancelled,
.order-next-step.expired {
    background: var(--sb-danger-soft);
}

.order-next-step.refunded {
    background: var(--sb-lilac-soft);
}

.order-next-step.neutral {
    background: var(--sb-neutral-soft);
}

.payment-file-name {
    width: fit-content;
    margin-top: .65rem;
    padding: .4rem .6rem;
    border-radius: var(--sb-radius-control);
    background: rgba(255,255,255,.72);
    color: #746A70;
    font-size: .72rem;
}

.payment-upload-card {
    padding: clamp(1rem, 2vw, 1.25rem);
    border-radius: var(--sb-radius-card);
    border: 1px solid var(--sb-border);
    background: #FFF7FA;
    box-shadow: var(--sb-shadow-sm);
}

.payment-upload-heading {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.payment-upload-heading > i {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    background: var(--sb-pink-soft);
    display: grid;
    place-items: center;
    color: var(--sb-pink-deep);
    font-size: 1.15rem;
}

.payment-upload-heading > div {
    display: flex;
    flex-direction: column;
}

.payment-upload-heading h2 {
    margin: .2rem 0;
    color: var(--sb-navy);
    font-size: 1.08rem;
}

.payment-upload-heading p {
    margin: 0;
    color: var(--sb-muted);
    font-size: .75rem;
}

.payment-upload-form {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: stretch;
}

.payment-upload-form .btn {
    min-height: 54px;
    align-self: stretch;
}

.payment-file-picker {
    position: relative;
    cursor: pointer;
}

.payment-file-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.payment-file-picker > span {
    min-height: 54px;
    height: 100%;
    padding: .7rem .8rem;
    border-radius: var(--sb-radius-control);
    border: 1px dashed #B98198;
    background: var(--sb-surface);
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .6rem;
    align-content: center;
}

.payment-file-picker i {
    grid-row: 1 / 3;
    align-self: center;
    color: #A66E86;
    font-size: 1rem;
}

.payment-file-picker strong {
    overflow: hidden;
    color: var(--sb-navy);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-file-picker small {
    color: var(--sb-muted);
    font-size: .67rem;
}

.payment-rejected-note {
    padding: .9rem 1rem;
    border-radius: var(--sb-radius-card);
    border: 1px solid var(--sb-danger-border);
    background: var(--sb-danger-soft);
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    color: var(--sb-danger);
}

.payment-rejected-note > div {
    display: flex;
    flex-direction: column;
}

.payment-rejected-note strong {
    font-size: .82rem;
}

.payment-rejected-note span {
    margin-top: .2rem;
    font-size: .74rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .payment-upload-form {
        grid-template-columns: 1fr;
    }
}

.payment-upload-note {
    margin: .8rem 0 0;
    color: var(--sb-muted);
    font-size: .74rem;
    line-height: 1.5;
}


/* Checkpoint 9: seguimiento público */

.tracking-hero {
    padding: clamp(2.5rem, 5vw, 4rem) 0 2.6rem;
    background: var(--sb-bg);
    border-bottom: 1px solid var(--sb-border);
}

.tracking-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}

.tracking-hero-inner h1 {
    margin: 0 0 .55rem;
    color: var(--sb-navy);
    font-family: var(--sb-font-display);
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.08;
}

.tracking-hero-inner p {
    max-width: 66ch;
    margin: 0;
    color: var(--sb-muted);
    font-size: .95rem;
}

.tracking-section {
    background: #FFF8FB;
}

.tracking-search-card,
.tracking-card,
.tracking-result-heading,
.tracking-help {
    border: 1px solid var(--sb-border);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}

.tracking-search-card {
    max-width: 1040px;
    margin: -1.35rem auto 0;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border-radius: var(--sb-radius-card);
}

.tracking-search-heading {
    margin-bottom: 1rem;
}

.tracking-search-heading h2 {
    margin: 0;
    color: var(--sb-navy);
    font-size: 1.15rem;
}

.tracking-search-heading p {
    margin: .25rem 0 0;
    color: var(--sb-muted);
    font-size: .78rem;
}

.tracking-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: end;
}

.tracking-form label {
    display: grid;
    gap: .42rem;
}

.tracking-form label > span {
    color: #656876;
    font-size: .78rem;
    font-weight: 750;
}

.tracking-form input {
    min-height: 48px;
    width: 100%;
    padding: .7rem .82rem;
    border-radius: var(--sb-radius-control);
    border: 1px solid var(--sb-border);
    background: #fff;
    outline: none;
    color: var(--sb-text);
}

.tracking-form input:focus {
    border-color: var(--sb-focus);
    box-shadow: var(--sb-shadow-focus);
}

.tracking-form label small {
    color: #A34B65;
    font-size: .68rem;
}

.tracking-form .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.tracking-form button {
    white-space: nowrap;
}

.tracking-search-error {
    padding: .8rem .9rem;
    border-radius: var(--sb-radius-control);
    background: var(--sb-danger-soft);
    border: 1px solid var(--sb-danger-border);
    color: var(--sb-danger);
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
}

.tracking-result {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
}

.tracking-result-heading {
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border-radius: var(--sb-radius-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tracking-result-heading h2 {
    margin: 0;
    color: var(--sb-navy);
    font-family: var(--sb-font-display);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.tracking-result-heading p {
    margin: 0;
    color: var(--sb-muted);
    font-size: .76rem;
}

.tracking-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: .48rem .72rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

.tracking-status.quote {
    background: var(--sb-info-soft);
    color: var(--sb-info);
}

.tracking-status.transfer {
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
}

.tracking-status.review {
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
}

.tracking-status.paid {
    background: var(--sb-success-soft);
    color: var(--sb-success);
}

.tracking-status.preparing {
    background: #F0E6F7;
    color: var(--sb-ink);
}

.tracking-status.delivery {
    background: var(--sb-info-soft);
    color: var(--sb-info);
}

.tracking-status.delivered {
    background: var(--sb-success-soft);
    color: var(--sb-success);
}

.tracking-status.cancelled {
    background: var(--sb-neutral-soft);
    color: var(--sb-neutral);
}

.tracking-status.refunded {
    background: var(--sb-lilac-soft);
    color: var(--sb-ink);
}

.tracking-card {
    border-radius: var(--sb-radius-card);
    overflow: hidden;
}

.tracking-card-heading {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #F0E7EC;
}

.tracking-card-heading h3 {
    margin: 0;
    color: var(--sb-navy);
    font-size: .95rem;
}

.tracking-timeline {
    padding: .3rem 1.15rem 1rem;
    margin: 0;
    list-style: none;
}

.tracking-timeline-event {
    position: relative;
    padding: .8rem 0 .8rem 1.45rem;
    border-left: 1px solid var(--sb-border);
}

.tracking-timeline-event:last-child {
    padding-bottom: 0;
}

.tracking-timeline-empty {
    padding: .9rem 0;
    color: var(--sb-muted);
    font-size: .82rem;
}

.tracking-dot {
    position: absolute;
    left: -6px;
    top: 1rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sb-pink-deep);
    box-shadow: 0 0 0 4px #FBE8EF;
}

.tracking-timeline-event > div {
    display: flex;
    flex-direction: column;
}

.tracking-timeline strong {
    color: var(--sb-navy);
    font-size: .82rem;
}

.tracking-timeline small {
    margin-top: .12rem;
    color: var(--sb-muted);
    font-size: .66rem;
}

.tracking-timeline p {
    margin: .3rem 0 0;
    color: #727684;
    font-size: .73rem;
    line-height: 1.5;
}

.tracking-items article {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid #F0E7EC;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.tracking-items article > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tracking-items article > div > strong {
    color: var(--sb-navy);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.tracking-items article > strong {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tracking-items span,
.tracking-items small {
    margin-top: .14rem;
    color: var(--sb-muted);
    font-size: .7rem;
}

.tracking-totals {
    padding: .8rem 1.15rem 1rem;
    background: #FFF9FB;
}

.tracking-totals > div {
    padding: .35rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--sb-muted);
    font-size: .78rem;
}

.tracking-totals strong {
    color: var(--sb-navy);
}

.tracking-totals .total {
    color: var(--sb-navy);
    font-weight: 750;
}

.tracking-totals .total strong {
    color: var(--sb-price);
    font-size: 1.08rem;
}

.tracking-total-note {
    margin: .55rem 0 0;
    padding: .7rem .8rem;
    border-radius: var(--sb-radius-control);
    background: var(--sb-info-soft);
    color: var(--sb-ink);
    font-size: .74rem;
    line-height: 1.5;
}

.tracking-info {
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.tracking-info > i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    display: grid;
    place-items: center;
    background: var(--sb-turquoise-soft);
    color: var(--sb-ink);
}

.tracking-info span {
    display: flex;
    flex-direction: column;
}

.tracking-info small {
    color: var(--sb-muted);
    font-size: .65rem;
}

.tracking-info strong {
    color: var(--sb-navy);
    font-size: .8rem;
}

.tracking-payment-state {
    margin: 1rem;
    padding: .85rem;
    border-radius: var(--sb-radius-control);
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.tracking-payment-state > div {
    display: flex;
    flex-direction: column;
}

.tracking-payment-state strong {
    font-size: .8rem;
}

.tracking-payment-state span {
    margin-top: .18rem;
    font-size: .7rem;
    line-height: 1.45;
}

.tracking-payment-state.review {
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
}

.tracking-payment-state.quote {
    background: var(--sb-info-soft);
    color: var(--sb-info);
}

.tracking-payment-state.rejected,
.tracking-payment-state.expired {
    background: var(--sb-danger-soft);
    color: var(--sb-danger);
}

.tracking-payment-state.paid {
    background: var(--sb-success-soft);
    color: var(--sb-success);
}

.tracking-payment-state.waiting {
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
}

.tracking-payment-state.neutral,
.tracking-payment-state.cancelled {
    background: var(--sb-neutral-soft);
    color: var(--sb-neutral);
}

.tracking-payment-state.refunded {
    background: var(--sb-lilac-soft);
    color: var(--sb-ink);
}

.tracking-privacy-note {
    margin: .8rem 0 0;
    color: var(--sb-muted);
    text-align: left;
    font-size: .74rem;
    line-height: 1.4;
}

.tracking-help {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    border-radius: var(--sb-radius-card);
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tracking-help > i {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--sb-radius-control);
    display: grid;
    place-items: center;
    background: var(--sb-turquoise-soft);
    color: var(--sb-ink);
}

.tracking-help > div {
    display: flex;
    flex-direction: column;
}

.tracking-help strong {
    color: var(--sb-navy);
    font-size: .82rem;
}

.tracking-help span {
    margin-top: .2rem;
    color: var(--sb-muted);
    font-size: .72rem;
}

@media (max-width: 767.98px) {
    .tracking-form {
        grid-template-columns: 1fr;
    }

    .tracking-form .btn {
        width: 100%;
    }

    .tracking-result-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tracking-status {
        align-self: flex-start;
    }

    .tracking-items article {
        align-items: flex-start;
        gap: .6rem;
    }
}

@media (max-width: 575.98px) {
    .tracking-section {
        padding-top: 2rem !important;
    }

    .tracking-search-card {
        margin-top: -1rem;
    }

    .tracking-result-heading p {
        overflow-wrap: anywhere;
    }

    .tracking-timeline {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .tracking-items article {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


/* Checkpoint 4: catálogo y filtros */
.catalog-page {
    min-height: 55vh;
    background: var(--sb-bg);
}

.catalog-intro {
    padding: clamp(1.35rem, 2.4vw, 2.1rem) 0;
    border-bottom: 1px solid var(--sb-border);
    background: linear-gradient(110deg, var(--sb-pink-soft), var(--sb-lilac-soft) 56%, var(--sb-turquoise-soft));
}

.catalog-intro-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
}

.catalog-intro-copy h1 {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    line-height: 1;
    letter-spacing: -.035em;
}

.catalog-intro-copy p {
    max-width: 42ch;
    margin: .5rem 0 0;
    color: var(--sb-ink);
    font-size: .95rem;
    line-height: 1.5;
}

.catalog-search-form {
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: .6rem;
}

.catalog-search-field {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-control);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}

.catalog-search-field > i {
    position: absolute;
    left: 1rem;
    color: var(--sb-price);
    pointer-events: none;
}

.catalog-search-field input {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: .7rem .9rem .7rem 2.8rem;
    border: 0;
    border-radius: inherit;
    outline-offset: -3px;
    background: transparent;
    color: var(--sb-ink);
    font: inherit;
}

.catalog-search-field input::placeholder {
    color: var(--sb-muted);
    opacity: 1;
}

.catalog-search-button {
    min-height: 52px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding-inline: 1.15rem;
}

.catalog-content {
    padding-top: clamp(1.4rem, 3vw, 2.4rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.catalog-category-nav {
    display: grid;
    grid-template-columns: minmax(145px, .22fr) minmax(0, 1fr);
    align-items: start;
    gap: .7rem 1.2rem;
}

.catalog-nav-label {
    padding-top: .72rem;
    color: var(--sb-ink);
    font-size: .88rem;
    font-weight: 800;
}

.catalog-category-pills {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .48rem;
}

.catalog-category-pills .filter-pill {
    max-width: 100%;
    min-height: 44px;
    padding: .48rem .75rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-pill);
    background: var(--sb-surface);
    color: var(--sb-ink);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.catalog-category-pills .filter-pill:hover {
    transform: translateY(-1px);
    border-color: var(--sb-pink-deep);
}

.catalog-category-pills .filter-pill.active {
    border-color: var(--sb-pink-deep);
    background: var(--sb-pink-soft);
    color: var(--sb-ink);
    box-shadow: var(--sb-shadow-sm);
}

.catalog-category-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.catalog-category-count {
    min-width: 22px;
    min-height: 22px;
    padding: 0 .35rem;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-neutral-soft);
    color: var(--sb-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.catalog-no-categories {
    padding: .68rem 0;
    color: var(--sb-muted);
    font-size: .82rem;
}

.catalog-category-hint {
    display: none;
}

.catalog-active-filters {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sb-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.catalog-active-label {
    margin-right: .15rem;
    color: var(--sb-ink);
    font-size: .78rem;
    font-weight: 800;
}

.catalog-active-chip {
    max-width: min(100%, 22rem);
    min-height: 34px;
    padding: .4rem .65rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-pill);
    background: var(--sb-surface);
    color: var(--sb-ink);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
}

.catalog-active-chip > i {
    flex: 0 0 auto;
    color: var(--sb-price);
}

.catalog-active-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-clear-link {
    min-height: 44px;
    margin-left: auto;
    padding: .45rem .55rem;
    color: var(--sb-price);
    font-size: .78rem;
    font-weight: 800;
    text-underline-offset: .2em;
    display: inline-flex;
    align-items: center;
}

.catalog-results-heading {
    margin: clamp(1.7rem, 3vw, 2.3rem) 0 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--sb-border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.catalog-results-heading h2 {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.catalog-results-heading p {
    margin: .35rem 0 0;
    color: var(--sb-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.catalog-error-message {
    margin-top: 1.5rem;
}

.catalog-product-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.catalog-product-grid > :only-child {
    margin-inline: auto;
}

.catalog-pagination {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
}

.catalog-page-numbers {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.catalog-page-link {
    min-width: 44px;
    min-height: 44px;
    padding: .5rem .65rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-control);
    background: var(--sb-surface);
    color: var(--sb-ink);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.catalog-page-link:hover {
    transform: translateY(-1px);
    border-color: var(--sb-pink-deep);
    color: var(--sb-ink);
    box-shadow: var(--sb-shadow-sm);
}

.catalog-page-link.active {
    border-color: var(--sb-pink-deep);
    background: var(--sb-pink-soft);
    color: var(--sb-ink);
}

.catalog-page-link.previous,
.catalog-page-link.next {
    min-width: 116px;
}

.catalog-page-gap {
    min-width: 20px;
    color: var(--sb-muted);
    text-align: center;
}

.catalog-empty-results {
    max-width: 860px;
    margin: 2rem auto 0;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-feature);
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(.9rem, 2.5vw, 1.5rem);
}

.catalog-mark {
    width: clamp(52px, 8vw, 68px);
    aspect-ratio: 1;
    border-radius: 20px;
    background: var(--sb-pink-soft);
    color: var(--sb-price);
    display: grid;
    place-items: center;
    font-size: 1.45rem;
}

.catalog-empty-copy h2 {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.catalog-empty-copy p {
    max-width: 58ch;
    margin: .5rem 0 0;
    color: var(--sb-muted);
    font-size: .88rem;
    line-height: 1.55;
}

.catalog-empty-action {
    min-height: 44px;
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .catalog-intro-layout {
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
        gap: 1.25rem;
    }

    .catalog-search-button { padding-inline: .9rem; }

    .catalog-category-nav {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .catalog-nav-label { padding-top: 0; }
}

@media (max-width: 767.98px) {
    .catalog-intro-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .catalog-intro-copy h1 { font-size: clamp(2rem, 8vw, 2.8rem); }

    .catalog-category-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: .1rem .1rem .45rem;
        margin-inline: -.1rem;
        scrollbar-color: var(--sb-pink-deep) var(--sb-pink-soft);
        scrollbar-width: thin;
        scroll-snap-type: inline proximity;
    }

    .catalog-category-pills .filter-pill {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .catalog-category-name { max-width: min(60vw, 14rem); }

    .catalog-category-hint {
        margin-top: -.25rem;
        color: var(--sb-muted);
        font-size: .7rem;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
    }

    .catalog-pagination {
        flex-wrap: wrap;
        gap: .6rem;
    }

    .catalog-page-numbers {
        order: -1;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .catalog-intro { padding-block: 1.25rem; }

    .catalog-intro-copy p { font-size: .88rem; }

    .catalog-search-form { gap: .45rem; }

    .catalog-search-field input {
        min-height: 48px;
        padding-left: 2.45rem;
        font-size: .88rem;
    }

    .catalog-search-field > i { left: .8rem; }

    .catalog-search-button {
        min-height: 48px;
        padding-inline: .75rem;
        font-size: .82rem;
    }

    .catalog-category-pills { gap: .38rem; }

    .catalog-category-pills .filter-pill {
        padding-inline: .62rem;
        font-size: .75rem;
    }

    .catalog-active-filters { gap: .38rem; }

    .catalog-active-label { flex-basis: 100%; }

    .catalog-clear-link {
        min-height: 38px;
        margin-left: 0;
    }

    .catalog-results-heading { margin-top: 1.6rem; }

    .catalog-product-grid {
        --bs-gutter-x: .7rem;
        --bs-gutter-y: .8rem;
    }

    .product-body { padding: .78rem .68rem .85rem; }
    .product-category { font-size: .68rem; }
    .product-body h2 { font-size: .88rem; }
    .product-price { font-size: .96rem; }
    .product-status { font-size: .68rem; }
    .product-card-cta { font-size: .74rem; }

    .catalog-page-link.previous,
    .catalog-page-link.next {
        min-width: 0;
        flex: 1 1 120px;
    }

    .catalog-empty-results {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: .8rem;
    }

    .catalog-empty-action { width: 100%; }
}


/* Checkpoint 11: ventana de pago */

.payment-deadline-card {
    padding: .9rem 1rem;
    border-radius: var(--sb-radius-card);
    border: 1px solid var(--sb-warning-border);
    background: var(--sb-warning-soft);
    color: var(--sb-warning);
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.payment-deadline-card > i {
    margin-top: .08rem;
    font-size: 1rem;
}

.payment-deadline-card > div {
    display: flex;
    flex-direction: column;
}

.payment-deadline-card strong {
    font-size: .82rem;
}

.payment-deadline-card span {
    margin-top: .2rem;
    font-size: .73rem;
    line-height: 1.45;
}

.payment-deadline-card.expired {
    border-color: var(--sb-danger-border);
    background: var(--sb-danger-soft);
    color: var(--sb-danger);
}

/* Base keyboard focus: visible without changing form or component hooks. */
:where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--sb-focus);
    outline-offset: 2px;
}

.checkout-field input:focus-visible,
.checkout-field textarea:focus-visible,
.tracking-form input:focus-visible,
.product-quantity input:focus-visible,
.cart-item-quantity input:focus-visible,
.catalog-search-form input:focus-visible {
    outline: 2px solid var(--sb-focus);
    outline-offset: 2px;
    box-shadow: var(--sb-shadow-focus);
}

.product-variant-choice:focus-within .variant-choice-content,
.delivery-method-card:focus-within .delivery-method-content,
.payment-file-picker:focus-within > span {
    outline: 2px solid var(--sb-focus);
    outline-offset: 2px;
}

.btn-sb-primary:disabled,
.btn-sb-light:disabled,
button:disabled {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 575.98px) {
    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .icon-btn,
    .btn-sb-primary,
    .btn-sb-light,
    .category-card,
    .product-card,
    .variant-choice-content,
    .delivery-method-content,
    .catalog-category-pills .filter-pill,
    .catalog-page-link,
    .sb-primary-nav .nav-link,
    .sb-primary-nav .nav-link::after,
    .sb-category-link,
    .sb-footer .social-btn {
        transition-duration: .01ms !important;
    }

    .icon-btn:hover,
    .btn-sb-primary:hover,
    .category-card:hover,
    .product-card:hover,
    .catalog-category-pills .filter-pill:hover,
    .catalog-page-link:hover {
        transform: none;
    }
}

/* Checkpoint 2: public header, category navigation, and footer */
/* Two equal groups make the loop seamless, including its final spacing. */
.topbar {
    position: relative;
    background: #B83F70;
    color: var(--sb-surface);
    font-size: .8rem;
    font-weight: 750;
}

.topbar-window {
    overflow: hidden;
}

.topbar-track {
    display: flex;
    width: max-content;
    min-width: 200%;
    animation: sb-ribbon-scroll 85s linear infinite;
}

.topbar-messages {
    flex: 0 0 auto;
    min-width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2.5rem;
    margin: 0;
    padding: .5rem 1.25rem;
    list-style: none;
}

.topbar-messages li {
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
}

.topbar-messages i { font-size: 1rem; }

@media (hover: hover) {
    .topbar:hover .topbar-track { animation-play-state: paused; }
}

@keyframes sb-ribbon-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-messages[aria-hidden="true"] { display: none; }
    .topbar-track { width: 100%; min-width: 0; animation: none; }
    .topbar-messages {
        width: 100%;
        flex-wrap: wrap;
        gap: .4rem 1.5rem;
        padding: .65rem 1rem;
    }
    .topbar-messages li { white-space: normal; }
}

.sb-site-header {
    background: var(--sb-surface);
    border-bottom: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}

.sb-navbar {
    padding: .7rem 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.sb-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.sb-navbar .brand-wrap {
    flex: 0 0 auto;
    gap: .65rem;
    margin-right: .5rem;
}

.sb-navbar .brand-avatar {
    width: 46px;
    height: 46px;
    border: 1px solid var(--sb-border);
    box-shadow: none;
}

.sb-navbar .brand-copy {
    display: flex;
}

.sb-navbar .brand-copy strong {
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.05;
}

.sb-navbar .brand-copy small {
    margin-top: .2rem;
    color: var(--sb-muted);
    font-size: .7rem;
    letter-spacing: .015em;
}

.sb-navbar .navbar-collapse {
    order: 2;
    flex-grow: 1;
}

.sb-primary-nav {
    align-items: center;
    justify-content: center;
    gap: .1rem;
}

.sb-primary-nav .nav-link {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: .55rem .48rem !important;
    border-radius: 0;
    background: transparent;
    color: var(--sb-ink);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
}

.sb-primary-nav .nav-link:hover,
.sb-primary-nav .nav-link.active {
    background: transparent;
    color: var(--sb-ink);
}

.sb-primary-nav .nav-link::after {
    position: absolute;
    right: .48rem;
    bottom: .22rem;
    left: .48rem;
    height: 2px;
    background: var(--sb-pink-deep);
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .16s ease-out;
}

.sb-primary-nav .nav-link.active::after,
.sb-primary-nav .nav-link:hover::after {
    transform: scaleX(1);
}

.sb-mobile-actions,
.sb-desktop-actions {
    align-items: center;
    gap: .55rem;
}

.sb-mobile-actions { order: 1; }
.sb-desktop-actions { order: 3; }

.sb-header-search {
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-control);
    background: #FFF7FA;
    transition: border-color .16s ease-out, box-shadow .16s ease-out;
}

.sb-header-search:focus-within {
    border-color: var(--sb-focus);
    box-shadow: var(--sb-shadow-focus);
}

.sb-search-desktop {
    width: clamp(170px, 17vw, 220px);
}

.sb-search-mobile {
    width: 100%;
    margin: .4rem 0 .85rem;
}

.sb-header-search .sb-search-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: .55rem .75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sb-ink);
    font-size: .86rem;
}

.sb-header-search .sb-search-input:focus,
.sb-header-search .sb-search-input:focus-visible {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.sb-search-submit {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--sb-ink);
    cursor: pointer;
}

.sb-search-submit:hover {
    background: var(--sb-pink-soft);
}

.sb-cart-link {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-color: var(--sb-border);
    background: var(--sb-surface);
    color: var(--sb-ink);
}

.sb-cart-link:hover,
.sb-cart-link.active {
    border-color: var(--sb-pink);
    background: var(--sb-pink-soft);
    color: var(--sb-ink);
}

.sb-cart-link .cart-badge {
    min-width: 22px;
    height: 22px;
    padding-inline: 4px;
    border: 2px solid var(--sb-surface);
    top: -3px;
    right: -4px;
    background: var(--sb-price);
    font-size: .68rem;
    font-weight: 800;
}

.sb-menu-toggle {
    width: 44px;
    height: 44px;
    padding: .55rem;
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius-control);
}

.sb-menu-toggle .navbar-toggler-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.sb-category-band {
    border-top: 1px solid #F2EAF0;
    background: #FFFAFC;
}

.sb-category-nav {
    min-width: 0;
}

.sb-category-list {
    min-height: 42px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: .4rem;
    margin: 0;
    padding: .25rem 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.sb-category-list::-webkit-scrollbar { display: none; }

.sb-category-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .45rem .72rem;
    border-bottom: 2px solid transparent;
    border-radius: var(--sb-radius-sm);
    color: #595D6D;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: color .16s ease-out, border-color .16s ease-out, background-color .16s ease-out;
}

.sb-category-link:hover,
.sb-category-link.active {
    border-bottom-color: var(--sb-pink-deep);
    color: var(--sb-ink);
}

.sb-category-link:hover {
    background: var(--sb-turquoise-soft);
}

.sb-category-link.active {
    background: var(--sb-pink-soft);
    color: var(--sb-price);
    border-bottom-color: var(--sb-price);
}

.sb-footer {
    margin-top: 0 !important;
    background: var(--sb-ink);
    color: var(--sb-surface);
}

.sb-footer .footer-shell {
    padding: 2.6rem .75rem 2.2rem;
}

.sb-footer .footer-brand strong {
    color: var(--sb-surface);
    font-family: var(--sb-font-display);
    font-size: 1.15rem;
    font-weight: 600;
}

.sb-footer .footer-brand span {
    color: #E5B7C7;
    font-size: .77rem;
}

.sb-footer .footer-avatar {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,.35);
}

.footer-description,
.footer-location-address {
    max-width: 34ch;
    color: #E0DFE6;
    font-size: .88rem;
    line-height: 1.6;
}

.footer-heading {
    margin: .3rem 0 .9rem;
    color: var(--sb-surface);
    font-family: var(--sb-font-display);
    font-size: 1rem;
    font-weight: 600;
}

.sb-footer .footer-links {
    display: grid;
    gap: .12rem;
}

.sb-footer .footer-links li { margin: 0; }

.sb-footer .footer-links a,
.sb-footer .footer-links span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    color: #E0DFE6 !important;
    font-size: .84rem;
    line-height: 1.45;
    text-decoration: none;
}

.sb-footer .footer-links a { min-height: 44px; }

.sb-footer .footer-links a:hover,
.footer-map-link:hover {
    color: var(--sb-pink) !important;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.footer-location-name {
    margin-bottom: .25rem;
    color: var(--sb-surface);
    font-size: .9rem;
    font-weight: 800;
}

.footer-map-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--sb-pink);
    font-size: .85rem;
    font-weight: 800;
    text-decoration: none;
}

.sb-footer .social-btn {
    width: 44px;
    height: 44px;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.sb-footer .social-btn:hover {
    border-color: var(--sb-pink);
    background: var(--sb-pink);
    color: var(--sb-ink);
}

.footer-bottom {
    padding: .9rem 0;
    border-top: 1px solid rgba(255,255,255,.16);
    color: #D4D3DC;
}

.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

@media (min-width: 992px) {
    .sb-navbar .navbar-collapse { order: 2; }
    .sb-desktop-actions { order: 3; }
}

@media (max-width: 1199.98px) {
    .sb-category-list { justify-content: flex-start; }
    .sb-primary-nav .nav-link { padding-inline: .38rem !important; font-size: .82rem; }
    .sb-search-desktop { width: 175px; }
}

@media (max-width: 991.98px) {
    .sb-navbar .navbar-collapse {
        order: 3;
        flex-basis: 100%;
        padding-top: .55rem;
    }

    .sb-primary-nav {
        align-items: stretch;
        padding-top: .35rem;
        border-top: 1px solid var(--sb-border);
    }

    .sb-primary-nav .nav-link {
        min-height: 44px;
        padding-inline: .35rem !important;
    }

    .sb-primary-nav .nav-link::after {
        right: auto;
        left: .35rem;
        width: 2.5rem;
    }

    .sb-category-list { justify-content: flex-start; }
}

@media (max-width: 575.98px) {
    .sb-navbar { padding: .45rem 0; }
    .sb-header-row { column-gap: .45rem; }
    .sb-navbar .brand-avatar { width: 42px; height: 42px; }
    .sb-navbar .brand-copy strong { font-size: 1rem; }
    .sb-navbar .brand-copy small { display: none; }
    .sb-mobile-actions { gap: .4rem; }
    .sb-menu-toggle,
    .sb-cart-link { width: 44px; height: 44px; }
    .sb-category-link { padding-inline: .62rem; font-size: .75rem; }
    .sb-footer .footer-shell { padding: 2rem .75rem 1.7rem; }
}

@media (min-width: 768px) {
    .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }
}

/* Checkpoint 3: Home comercial */
.home-hero-section {
    padding: .9rem 0 0;
    background:
        radial-gradient(circle at 3% 12%, rgba(240,168,192,.14), transparent 19rem),
        var(--sb-bg);
}

.home-hero-panel {
    position: relative;
    min-height: 210px;
    padding: clamp(1rem, 2vw, 1.65rem);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(210px, .75fr);
    align-items: center;
    gap: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid #E9C7D6;
    border-radius: 24px;
    background: #FADDE9;
}

.home-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.home-hero-copy h1 {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: clamp(2.3rem, 3.4vw, 3rem);
    font-weight: 650;
    line-height: 1.06;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.home-hero-copy h1 span {
    color: var(--sb-price);
}

.home-hero-copy > p {
    max-width: 65ch;
    margin: .48rem 0 0;
    color: #555968;
    font-size: .86rem;
    line-height: 1.42;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1rem;
}

.home-hero-actions .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.home-hero-actions .btn-sb-primary {
    background: var(--sb-price);
    border-color: var(--sb-price);
}

.home-hero-actions .btn-sb-primary:hover {
    background: #8E3655;
    border-color: #8E3655;
}

.home-hero-art {
    position: relative;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-hero-art-ring {
    position: absolute;
    width: min(190px, 78%);
    aspect-ratio: 1;
    border: 1px solid rgba(81, 148, 154, .35);
    background: var(--sb-turquoise-soft);
    transform: rotate(-12deg);
    border-radius: 44% 56% 60% 40%;
}

.home-hero-art-words {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: clamp(1.65rem, 2.7vw, 2.3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-align: center;
}

.home-hero-art-words span:nth-child(2) { color: var(--sb-price); }
.home-hero-art-words span:nth-child(3) { color: #426E73; }

.home-hero-art-star {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 10%;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(48,52,71,.08);
    border-radius: 14px;
    background: var(--sb-butter);
    color: var(--sb-ink);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    transform: rotate(8deg);
}

.home-hero-art-heart {
    position: absolute;
    bottom: 8px;
    left: 12%;
    color: var(--sb-price);
    font-size: 1.45rem;
    transform: rotate(-15deg);
}

.home-products-section {
    padding: clamp(1.2rem, 2vw, 1.8rem) 0 clamp(2rem, 4vw, 3rem);
}

.home-section-heading {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}

.home-section-heading h2,
.home-how-to h2,
.home-visit-heading h2 {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.home-section-heading p {
    margin: .38rem 0 0;
    color: var(--sb-muted);
    font-size: .92rem;
}

.home-text-link {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #704A5D;
    font-size: .83rem;
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
}

.home-text-link:hover {
    color: var(--sb-ink);
    text-decoration: underline;
}

.home-product-card {
    border-color: var(--sb-border);
}

.home-product-card .product-card-cta {
    color: var(--sb-price);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .2em;
    transition: text-decoration-color .16s ease-out;
}

.home-product-card:hover .product-card-cta {
    text-decoration-color: currentColor;
}

.home-empty-catalog {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid #E7D8E0;
    border-radius: var(--sb-radius-feature);
    background: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.home-empty-catalog > i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--sb-pink-soft);
    color: var(--sb-price);
    font-size: 1.2rem;
}

.home-empty-catalog h3 {
    margin: 0;
    color: var(--sb-ink);
    font-size: 1.05rem;
}

.home-empty-catalog p {
    margin: .25rem 0 0;
    color: var(--sb-muted);
    font-size: .84rem;
}

.home-categories-section {
    padding: 1.6rem 0 1rem;
}

.home-category-heading { margin-bottom: 1rem; }
.home-category-heading h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.home-category-heading p { font-size: .84rem; }

.home-category-grid {
    margin: 0;
    padding: .5rem .25rem .75rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(100px, 1fr);
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-pink) var(--sb-pink-soft);
    list-style: none;
}

.home-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: .25rem;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-ink);
    text-align: center;
    text-decoration: none;
}

.home-category-icon {
    position: relative;
    isolation: isolate;
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--sb-pink);
    border-radius: 50%;
    background: var(--sb-pink-soft);
    color: var(--sb-price);
    box-shadow: var(--sb-shadow-sm);
    font-size: 2rem;
    transition: transform .22s ease-out, box-shadow .22s ease-out;
}

.home-category-icon img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .5rem;
    background: var(--sb-surface);
}

.home-category-card:hover,
.home-category-card:focus-visible { color: var(--sb-price); }
.home-category-card:hover .home-category-icon,
.home-category-card:focus-visible .home-category-icon {
    transform: translateY(-3px);
    box-shadow: var(--sb-shadow-md);
}

.home-category-name {
    max-width: 145px;
    font-family: var(--sb-font-display);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .home-category-icon { width: 100px; height: 100px; font-size: 2.5rem; }
}

@media (min-width: 1200px) {
    .home-category-icon { width: 118px; height: 118px; }
}

.home-favorites-heart {
    color: var(--sb-price);
    font-size: .7em;
    vertical-align: .05em;
}

.home-season-section { padding: .5rem 0 2rem; }

.home-season-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--sb-radius-feature);
    background: var(--sb-turquoise-soft);
}

.home-season-copy { position: relative; z-index: 1; }
.home-season-copy h2 {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.12;
    text-wrap: balance;
}
.home-season-copy p {
    max-width: 48ch;
    margin: .75rem 0 1.25rem;
    color: #426368;
}
.home-season-copy .btn { display: inline-flex; align-items: center; gap: .6rem; }

.home-season-art {
    position: relative;
    width: clamp(120px, 22vw, 240px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--sb-price);
}
.home-season-art img {
    width: 100%;
    height: 100%;
    padding: 1rem;
    object-fit: contain;
    border-radius: var(--sb-radius-card);
    background: var(--sb-surface);
}
.home-season-gift { font-size: clamp(4rem, 9vw, 7rem); }
.home-season-spark,
.home-season-heart { position: absolute; z-index: 1; font-size: 1.5rem; }
.home-season-spark { top: -.4rem; right: -.4rem; color: #426368; }
.home-season-heart { bottom: .1rem; left: -.5rem; }

/* Brief, finite glints: the existing ribbon remains the only continuous motion. */
@media (prefers-reduced-motion: no-preference) {
    .home-hero-art-star i { animation: sb-soft-glint 2.4s ease-out 1; }
    .home-season-panel:hover .home-season-spark,
    .home-season-panel:focus-within .home-season-spark { animation: sb-soft-glint 1.6s ease-out 1; }
}
@keyframes sb-soft-glint {
    0%, 100% { opacity: 1; scale: 1; }
    45% { opacity: .65; scale: .9; }
}

@media (max-width: 575.98px) {
    .home-season-panel { grid-template-columns: minmax(0, 1fr); }
    .home-season-art { position: absolute; width: 100px; right: -30px; bottom: -25px; opacity: .16; }
    .home-season-art img { visibility: hidden; }
    .home-season-copy p { font-size: .92rem; }
}

.home-category-empty {
    max-width: 700px;
    margin-inline: auto;
}

.home-benefits-section {
    padding: 1.75rem 0;
    background: #fff;
}

.home-benefits-list {
    margin: 0;
    padding: .4rem 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}

.home-benefits-list > li {
    min-width: 0;
    padding: .75rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.home-benefits-list > li + li {
    border-left: 1px solid #E9DDE4;
}

.home-benefit-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #FBE8F0;
    color: #8D5069;
    font-size: 1rem;
}

.home-benefits-list li:nth-child(2) .home-benefit-icon { background: #E8F4F4; }
.home-benefits-list li:nth-child(3) .home-benefit-icon { background: #F0E4F8; }

.home-benefits-list li > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home-benefits-list strong {
    color: var(--sb-ink);
    font-size: 1rem;
    line-height: 1.3;
}

.home-benefits-list small {
    margin-top: .22rem;
    color: #626675;
    font-size: .75rem;
    line-height: 1.45;
}

.home-sky-section {
    padding: 1.15rem 0 clamp(2.5rem, 5vw, 3.75rem);
}

.home-sky-panel {
    position: relative;
    min-height: 325px;
    padding: clamp(1.5rem, 4vw, 3.2rem);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid #45495C;
    border-radius: 24px;
    background: var(--sb-ink);
    color: #fff;
}

.home-sky-panel::before,
.home-sky-panel::after {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(240,168,192,.22);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home-sky-panel::before {
    width: 280px;
    height: 280px;
    top: -190px;
    right: 27%;
}

.home-sky-panel::after {
    width: 170px;
    height: 170px;
    right: -100px;
    bottom: -102px;
    border-color: rgba(134,199,205,.32);
}

.home-sky-copy {
    position: relative;
    z-index: 1;
    max-width: 570px;
}

.home-sky-copy h2 {
    margin: 0;
    color: #fff;
    font-family: var(--sb-font-display);
    font-size: clamp(2.2rem, 4.2vw, 3.7rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.home-sky-copy p {
    max-width: 48ch;
    margin: .8rem 0 0;
    color: #E4E4EA;
    font-size: .98rem;
    line-height: 1.65;
}

.home-sky-link {
    min-height: 46px;
    margin-top: 1rem;
    padding: .68rem .95rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 12px;
    color: #fff;
    font-size: .83rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .16s ease-out, color .16s ease-out;
}

.home-sky-link:hover {
    background: #fff;
    color: var(--sb-ink);
}

.home-sky-mascot {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1600 / 1040;
    justify-self: end;
    display: block;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 18px;
    background: #050506;
    object-fit: contain;
    box-shadow: 0 18px 38px rgba(0,0,0,.2);
}

.home-practical-section {
    padding: 0 0 clamp(3rem, 6vw, 4.75rem);
}

.home-practical-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.home-how-to {
    padding: .25rem 0;
    scroll-margin-top: 140px;
}

.home-how-to > p {
    max-width: 45ch;
    margin: .55rem 0 1.15rem;
    color: var(--sb-muted);
    font-size: .9rem;
}

.home-steps {
    margin: 0;
    padding: 0;
    display: grid;
    list-style: none;
}

.home-steps li {
    min-width: 0;
    padding: .9rem 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    border-top: 1px solid #E9DDE4;
}

.home-step-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #FBE8F0;
    color: #7F435B;
    font-size: .7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.home-steps li:nth-child(2) .home-step-number { background: #E8F4F4; }
.home-steps li:nth-child(3) .home-step-number { background: #F0E4F8; }

.home-steps li > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home-steps strong {
    color: var(--sb-ink);
    font-size: .88rem;
}

.home-steps small {
    margin-top: .18rem;
    color: #626675;
    font-size: .77rem;
    line-height: 1.5;
}

.home-visit-panel {
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border: 1px solid #E7D7E0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(48,52,71,.07);
}

.home-visit-heading {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.home-visit-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #E8F4F4;
    color: #426E73;
    font-size: 1.15rem;
}

.home-visit-heading h2 { font-size: 1.65rem; }

.home-visit-heading p {
    margin: .15rem 0 0;
    color: #626675;
    font-size: .82rem;
    font-weight: 700;
}

.home-visit-panel .home-visit-location {
    max-width: 48ch;
    margin: 1rem 0 .25rem;
    color: #626675;
    font-size: .85rem;
    line-height: 1.6;
}

.home-map-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: #704A5D;
    font-size: .82rem;
    font-weight: 850;
    text-underline-offset: .2em;
}

.home-map-link:hover { color: var(--sb-ink); }

.home-social-block {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #E9DDE4;
}

.home-social-block h3 {
    margin: 0 0 .7rem;
    color: var(--sb-ink);
    font-size: .9rem;
}

.home-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.home-social-links a {
    min-height: 44px;
    padding: .5rem .68rem;
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    border: 1px solid #E7D7E0;
    border-radius: 11px;
    background: #FFFAFC;
    color: var(--sb-ink);
    font-size: .75rem;
    font-weight: 750;
    text-decoration: none;
    transition: background-color .16s ease-out, border-color .16s ease-out;
}

.home-social-links a:hover {
    border-color: #D6A9BB;
    background: var(--sb-pink-soft);
}

@media (max-width: 991.98px) {
    .home-hero-panel {
        grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr);
    }


    .home-benefits-list > li { padding-inline: .75rem; }

    .home-sky-panel {
        grid-template-columns: minmax(0, 1fr) minmax(240px, .85fr);
    }

    .home-practical-grid { gap: 1.5rem; }
}

@media (max-width: 767.98px) {
    .home-hero-section { padding-top: .75rem; }

    .home-hero-panel {
        min-height: 0;
        grid-template-columns: 1fr;
        padding: clamp(1.25rem, 4vw, 1.75rem);
    }

    .home-hero-copy h1 { font-size: clamp(2.45rem, 9vw, 3.5rem); }
    .home-hero-copy > p { max-width: 48ch; font-size: .94rem; }
    .home-hero-art { display: none; }


    .home-benefits-list { grid-template-columns: 1fr; }

    .home-benefits-list > li { padding: .8rem .15rem; }

    .home-benefits-list > li + li {
        border-top: 1px solid #E9DDE4;
        border-left: 0;
    }

    .home-sky-panel {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .home-sky-mascot {
        width: min(100%, 460px);
        justify-self: center;
    }

    .home-practical-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .home-hero-section { padding-top: .65rem; }

    .home-hero-panel {
        padding: 1.3rem;
        border-radius: 18px;
    }

    .home-hero-copy h1 { font-size: clamp(2.25rem, 10vw, 3rem); }

    .home-hero-actions {
        display: flex;
        gap: .4rem;
        margin-top: .75rem;
    }

    .home-hero-actions .btn {
        width: auto;
        min-height: 44px;
        padding-inline: .78rem;
        font-size: .88rem;
    }

    .home-products-section { padding: 1.9rem 0 2.2rem; }

    .home-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
        margin-bottom: 1rem;
    }

    .home-section-heading h2 { font-size: 1.85rem; }
    .home-section-heading p { font-size: .84rem; }
    .home-text-link { min-height: 38px; }

    .home-product-grid { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

    .home-empty-catalog {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .7rem;
        padding: 1rem;
    }

    .home-empty-catalog > .btn { grid-column: 1 / -1; }

    .home-benefits-section { padding: .9rem 0; }
    .home-benefits-list > li { gap: .65rem; }
    .home-benefits-list strong { font-size: .82rem; }
    .home-benefits-list small { font-size: .74rem; }

    .home-sky-section { padding: .5rem 0 2.4rem; }

    .home-sky-panel {
        padding: 1.35rem;
        border-radius: 19px;
    }

    .home-sky-copy h2 { font-size: clamp(2rem, 9vw, 2.7rem); }
    .home-sky-copy p { font-size: .87rem; }
    .home-sky-mascot { border-radius: 13px; }

    .home-visit-panel { padding: 1.05rem; }

    .home-visit-heading h2 { font-size: 1.48rem; }

    .home-social-links { gap: .4rem; }

    .home-social-links a {
        min-height: 44px;
        padding-inline: .55rem;
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-image img,
    .sb-header-search,
    .home-category-card,
    .home-category-icon,
    .home-product-card .product-card-cta,
    .home-sky-link,
    .home-social-links a {
        transition-duration: .01ms !important;
    }

    .home-category-card:hover,
    .home-category-card:hover .home-category-icon,
    .home-category-card:focus-visible .home-category-icon,
    .product-card:focus-within,
    .product-card:hover .product-image img { transform: none; }
}