:root {
    --jar-black: #030405;
    --jar-white: #f8fafc;
    --jar-muted: rgba(248,250,252,.74);
    --jar-soft: rgba(248,250,252,.54);
    --jar-line: rgba(255,255,255,.15);
    --jar-glass: rgba(255,255,255,.078);
    --jar-red: #e10f12;
    --jar-hot: #ff3438;
    --jar-blue: #178bff;
    --jar-cyan: #69c8ff;
    --jar-shadow: 0 42px 130px rgba(0,0,0,.56);
}

html {
    background: var(--jar-black);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--jar-white);
    background:
        radial-gradient(circle at 18% 8%, rgba(23,139,255,.20), transparent 29rem),
        radial-gradient(circle at 88% 5%, rgba(225,15,18,.16), transparent 27rem),
        linear-gradient(180deg, #030405 0%, #080b10 48%, #030405 100%);
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.034) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.034) 50%, rgba(255,255,255,.034) 75%, transparent 75%, transparent),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 18px 18px, 100px 100px;
    opacity: .46;
    mask-image: radial-gradient(circle at top, black, transparent 78%);
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1180px, calc(100% - 1.1rem));
    margin-inline: auto;
}

@media (min-width: 768px) {
    .container {
        width: min(1180px, calc(100% - 3rem));
    }
}

/* Header */
.site-header,
.header,
.main-header {
    position: sticky;
    top: 0;
    z-index: 90;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(3,4,5,.86);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.site-header img,
.header img,
.main-header img,
.brand img,
.logo img,
.site-logo img {
    max-height: 50px !important;
    width: auto !important;
}

header a,
.nav-menu a,
.primary-nav a,
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: .65rem .95rem;
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    font-size: .92rem;
    font-weight: 850;
    line-height: 1;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}

header a:hover,
.nav-menu a:hover,
.primary-nav a:hover,
.site-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.095);
    transform: translateY(-1px);
}

/* Hero */
.jar-home {
    position: relative;
    isolation: isolate;
    min-height: calc(100svh - 74px);
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #030405;
}

.jar-home__media {
    position: absolute;
    inset: 0;
    z-index: -4;
    overflow: hidden;
    background: #030405;
}

.jar-home__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .64;
    filter: saturate(1.13) contrast(1.1) brightness(.72);
    transform: scale(1.05);
}

.jar-home__shade {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 76% 38%, rgba(23,139,255,.13), transparent 24rem),
        linear-gradient(90deg, rgba(3,4,5,.97) 0%, rgba(3,4,5,.76) 38%, rgba(3,4,5,.32) 70%, rgba(3,4,5,.83) 100%),
        linear-gradient(180deg, rgba(3,4,5,.30), rgba(3,4,5,.88) 86%, #030405 100%);
}

.jar-home__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(4rem, 8vw, 8rem);
}

.jar-home__copy {
    width: min(790px, 100%);
    padding: clamp(1.05rem, 3vw, 2.15rem);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: clamp(28px, 4vw, 58px);
    background:
        linear-gradient(135deg, rgba(255,255,255,.118), rgba(255,255,255,.030)),
        rgba(0,0,0,.42);
    box-shadow:
        inset 0 1px rgba(255,255,255,.17),
        var(--jar-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.jar-pill {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 34px;
    margin: 0;
    padding: .45rem .85rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--jar-cyan);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.jar-home__title {
    margin: 1rem 0 0;
    max-width: 9ch;
    color: white;
    font-size: clamp(5rem, 15vw, 13rem);
    font-weight: 1000;
    line-height: .74;
    letter-spacing: -.11em;
    text-transform: uppercase;
}

.jar-home__title span {
    display: block;
}

.jar-home__lead {
    max-width: 62ch;
    margin: 1.25rem 0 0;
    color: var(--jar-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.75;
}

.jar-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}

.jar-btn,
.button,
.btn,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: .9rem 1.28rem;
    font-weight: 950;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.jar-btn:hover,
.button:hover,
.btn:hover,
button:hover {
    transform: translateY(-2px);
}

.jar-btn--main,
.button-primary,
.btn-primary,
button[type="submit"] {
    color: white;
    background: linear-gradient(135deg, var(--jar-red), var(--jar-hot) 48%, #ff7477);
    box-shadow: 0 24px 62px rgba(225,15,18,.34);
}

.jar-btn--soft,
.button-secondary,
.btn-secondary {
    color: white;
    background: rgba(255,255,255,.10);
}

.jar-btn--ghost {
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.04);
}

.jar-home__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1.4rem;
}

.jar-home__stats article {
    min-height: 94px;
    padding: .9rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px rgba(255,255,255,.10);
}

.jar-home__stats strong {
    display: block;
    color: white;
    font-size: clamp(1.45rem, 3vw, 2.45rem);
    font-weight: 1000;
    line-height: .9;
    letter-spacing: -.06em;
}

.jar-home__stats span {
    display: block;
    margin-top: .35rem;
    color: var(--jar-soft);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Feature section */
.jar-system {
    padding-block: clamp(4rem, 9vw, 8rem);
    background:
        radial-gradient(circle at 20% 0%, rgba(23,139,255,.14), transparent 25rem),
        radial-gradient(circle at 80% 0%, rgba(225,15,18,.12), transparent 24rem);
}

.jar-system__head {
    max-width: 880px;
    margin-bottom: clamp(1.4rem, 4vw, 2.3rem);
}

.jar-system__head h2 {
    margin: .8rem 0 0;
    color: white;
    font-size: clamp(3rem, 9vw, 7.2rem);
    font-weight: 1000;
    line-height: .84;
    letter-spacing: -.085em;
    text-transform: uppercase;
}

.jar-system__grid {
    display: grid;
    gap: 1rem;
}

.jar-system-card,
.card,
.product-card,
.tutorial-card,
.legal-card,
.contact-card,
.cart-card,
.admin-login-card,
.admin-metric-card,
.admin-action-card,
.admin-lead-card {
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.026)),
        rgba(0,0,0,.22);
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 24px 78px rgba(0,0,0,.36);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.jar-system-card {
    padding: clamp(1.15rem, 3vw, 1.7rem);
}

.jar-system-card span {
    color: var(--jar-cyan);
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .14em;
}

.jar-system-card h3 {
    margin: .55rem 0 0;
    color: white;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 1000;
    line-height: .9;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.jar-system-card p {
    color: var(--jar-muted);
    line-height: 1.65;
}

/* Existing pages */
.section {
    padding-block: clamp(3.75rem, 9vw, 7rem);
}

.eyebrow {
    color: var(--jar-cyan);
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

input,
select,
textarea {
    min-height: 52px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(0,0,0,.42);
    color: white;
    padding: .85rem 1rem;
}

textarea {
    min-height: 150px;
}

footer,
.site-footer,
.footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.64);
}

@media (min-width: 820px) {
    .jar-system__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 819px) {
    .container {
        width: min(100% - 1rem, 1180px);
    }

    .site-header img,
    .header img,
    .main-header img,
    .brand img,
    .logo img,
    .site-logo img {
        max-height: 42px !important;
    }

    header a,
    .nav-menu a,
    .primary-nav a,
    .site-nav a {
        width: 100%;
        justify-content: space-between;
        border-radius: 16px;
        background: rgba(255,255,255,.055);
    }

    .jar-home {
        min-height: auto;
    }

    .jar-home__inner {
        padding-block: 2rem 3.2rem;
    }

    .jar-home__copy {
        padding: 1rem;
        border-radius: 28px;
    }

    .jar-home__title {
        font-size: clamp(4.2rem, 19vw, 6.8rem);
    }

    .jar-home__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .jar-btn,
    .button,
    .btn,
    button,
    input[type="submit"] {
        width: 100%;
    }

    .jar-home__stats {
        grid-template-columns: 1fr;
    }

    .jar-system__head h2 {
        font-size: clamp(3rem, 14vw, 5rem);
    }
}

/* =========================================================
   JAR BRUTALIST HERO RESTORE
   Hard override. No npm/build dependency.
   ========================================================= */

.jar-brutalist-hero {
    position: relative !important;
    isolation: isolate !important;
    min-height: calc(100svh - 74px) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
    background: transparent !important;
}

.jar-brutalist-video {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    overflow: hidden !important;
    background: #030405 !important;
}

.jar-brutalist-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: .66 !important;
    filter: saturate(1.12) contrast(1.15) brightness(.62) !important;
    transform: scale(1.06) !important;
}

.jar-brutalist-scrim {
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;
    background:
        linear-gradient(90deg, rgba(3,4,5,.98) 0%, rgba(3,4,5,.82) 36%, rgba(3,4,5,.45) 70%, rgba(3,4,5,.88) 100%),
        linear-gradient(180deg, rgba(3,4,5,.20) 0%, rgba(3,4,5,.72) 72%, #030405 100%) !important;
}

.jar-brutalist-scrim::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.045) 50%, rgba(255,255,255,.045) 75%, transparent 75%, transparent),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important;
    background-size: 18px 18px, 96px 96px !important;
    opacity: .42 !important;
    mix-blend-mode: screen !important;
}

.jar-brutalist-frame {
    position: relative !important;
    z-index: 10 !important;
    width: min(1320px, calc(100% - 3rem)) !important;
    margin: 0 auto !important;
    padding: clamp(3rem, 7vw, 7rem) 0 clamp(2.2rem, 5vw, 4rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.jar-brutalist-kicker,
.jar-brutalist-pre,
.jar-brutalist-section-head p {
    width: fit-content !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
    padding: .48rem .85rem !important;
    background: rgba(255,255,255,.08) !important;
    color: #67c7ff !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-brutalist-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr) !important;
    gap: clamp(1rem, 4vw, 3rem) !important;
    align-items: end !important;
    margin-top: 1.1rem !important;
}

.jar-brutalist-copy {
    max-width: 900px !important;
}

.jar-brutalist-pre {
    margin-bottom: 1rem !important;
    color: rgba(255,255,255,.72) !important;
}

.jar-brutalist-copy h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(3.2rem, 9vw, 9rem) !important;
    font-weight: 1000 !important;
    line-height: .82 !important;
    letter-spacing: -.10em !important;
    text-transform: uppercase !important;
    text-shadow: 0 28px 90px rgba(0,0,0,.62) !important;
}

.jar-brutalist-copy h1 span {
    display: block !important;
}

.jar-brutalist-lead {
    max-width: 720px !important;
    margin: 1.35rem 0 0 !important;
    color: rgba(255,255,255,.76) !important;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem) !important;
    line-height: 1.7 !important;
}

.jar-brutalist-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .85rem !important;
    margin-top: 1.65rem !important;
}

.jar-brutalist-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    padding: .9rem 1.28rem !important;
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
    text-decoration: none !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.28) !important;
}

.jar-brutalist-actions a:first-child {
    background: linear-gradient(135deg, #e10f12, #ff3438 52%, #ff7477) !important;
    box-shadow: 0 24px 72px rgba(225,15,18,.36) !important;
}

.jar-brutalist-panel {
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 34px !important;
    padding: clamp(1rem, 2vw, 1.45rem) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        rgba(0,0,0,.42) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.17),
        0 34px 110px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.jar-brutalist-panel span {
    color: #67c7ff !important;
    font-size: .82rem !important;
    font-weight: 1000 !important;
    letter-spacing: .18em !important;
}

.jar-brutalist-panel strong {
    display: block !important;
    margin-top: .6rem !important;
    color: #fff !important;
    font-size: clamp(1.1rem, 1.8vw, 1.65rem) !important;
    font-weight: 1000 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
    text-transform: uppercase !important;
}

.jar-brutalist-panel p {
    margin-top: .75rem !important;
    color: rgba(255,255,255,.68) !important;
    font-size: .92rem !important;
    line-height: 1.62 !important;
}

.jar-brutalist-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .85rem !important;
    margin-top: clamp(1.2rem, 3vw, 2.5rem) !important;
}

.jar-brutalist-stats article,
.jar-brutalist-card-grid article {
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.028)),
        rgba(0,0,0,.28) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 24px 78px rgba(0,0,0,.34) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.jar-brutalist-stats article {
    min-height: 98px !important;
    padding: 1rem !important;
}

.jar-brutalist-stats strong {
    display: block !important;
    color: #fff !important;
    font-size: clamp(1.7rem, 4vw, 3.2rem) !important;
    font-weight: 1000 !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
}

.jar-brutalist-stats span {
    display: block !important;
    margin-top: .35rem !important;
    color: rgba(255,255,255,.58) !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.jar-brutalist-system {
    padding: clamp(4rem, 8vw, 7rem) 0 !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(23,139,255,.14), transparent 25rem),
        radial-gradient(circle at 80% 0%, rgba(225,15,18,.12), transparent 24rem),
        #030405 !important;
}

.jar-brutalist-section-head {
    max-width: 940px !important;
    margin-bottom: clamp(1.5rem, 4vw, 2.6rem) !important;
}

.jar-brutalist-section-head h2 {
    margin: .9rem 0 0 !important;
    color: #fff !important;
    font-size: clamp(3.2rem, 9vw, 7.8rem) !important;
    font-weight: 1000 !important;
    line-height: .82 !important;
    letter-spacing: -.09em !important;
    text-transform: uppercase !important;
}

.jar-brutalist-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
}

.jar-brutalist-card-grid article {
    padding: clamp(1.1rem, 2vw, 1.65rem) !important;
}

.jar-brutalist-card-grid span {
    color: #67c7ff !important;
    font-size: .78rem !important;
    font-weight: 1000 !important;
    letter-spacing: .16em !important;
}

.jar-brutalist-card-grid h3 {
    margin: .55rem 0 0 !important;
    color: #fff !important;
    font-size: clamp(2rem, 4vw, 3.6rem) !important;
    font-weight: 1000 !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
    text-transform: uppercase !important;
}

.jar-brutalist-card-grid p {
    color: rgba(255,255,255,.70) !important;
    line-height: 1.65 !important;
}

@media (max-width: 900px) {
    .jar-brutalist-frame {
        width: min(100% - 1rem, 1320px) !important;
        padding-block: 2rem 3rem !important;
    }

    .jar-brutalist-grid,
    .jar-brutalist-stats,
    .jar-brutalist-card-grid {
        grid-template-columns: 1fr !important;
    }

    .jar-brutalist-copy h1 {
        font-size: clamp(4.2rem, 20vw, 7rem) !important;
    }

    .jar-brutalist-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .jar-brutalist-actions a {
        width: 100% !important;
    }
}



/* JAR FOOTER LOGO VISIBILITY FIX */
.jar-footer__main-logo {
    display: block !important;
    width: min(420px, 86vw) !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
    filter:
        saturate(1.22)
        contrast(1.08)
        drop-shadow(0 24px 60px rgba(0,0,0,.48))
        drop-shadow(0 0 34px rgba(23,139,255,.26)) !important;
}

.jar-footer__ghost-logo {
    display: block !important;
    visibility: visible !important;
    opacity: .52 !important;
    width: clamp(520px, 46vw, 900px) !important;
    right: -13vw !important;
    top: -145px !important;
    filter:
        saturate(1.25)
        contrast(1.12)
        drop-shadow(0 0 46px rgba(23,139,255,.30))
        drop-shadow(0 0 64px rgba(48,255,173,.16)) !important;
}

.jar-footer__brand-showcase {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

@media (max-width: 980px) {
    .jar-footer__main-logo {
        width: min(340px, 82vw) !important;
    }

    .jar-footer__ghost-logo {
        right: -230px !important;
        top: -80px !important;
        width: 560px !important;
        opacity: .30 !important;
    }
}

/* JAR LINK GLOW SYSTEM START */

:root {
    --jar-glow-blue: #23a7ff;
    --jar-glow-blue-soft: rgba(35,167,255,.42);

    --jar-glow-green: #30ffad;
    --jar-glow-green-soft: rgba(48,255,173,.42);

    --jar-glow-red: #ff3038;
    --jar-glow-red-soft: rgba(255,48,56,.42);
}

/* Base glow for clickable elements */
a[href],
button,
.jar-btn,
.btn,
.button,
input[type="submit"] {
    position: relative;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.055),
        0 0 0 1px rgba(255,255,255,.045),
        0 0 18px rgba(255,255,255,.045) !important;
}

/* BLUE: products, store, cart, tutorials */
a[href*="/productos"],
a[href*="/producto"],
a[href*="/products"],
a[href*="/product"],
a[href*="/tienda"],
a[href*="/store"],
a[href*="/carrito"],
a[href*="/cart"],
a[href*="/tutoriales"],
a[href*="/tutorial"],
a[href*="/tutorials"],
.jar-btn[href*="/productos"],
.jar-btn[href*="/tienda"],
.jar-btn[href*="/tutoriales"] {
    border-color: rgba(35,167,255,.72) !important;
    color: #eaf7ff !important;
    box-shadow:
        inset 0 0 0 1px rgba(35,167,255,.35),
        0 0 0 1px rgba(35,167,255,.28),
        0 0 16px rgba(35,167,255,.22),
        0 0 34px rgba(35,167,255,.12) !important;
}

/* GREEN: contact, phone, email, WhatsApp */
a[href*="/contacto"],
a[href*="/contact"],
a[href^="tel:"],
a[href^="mailto:"],
a[href*="wa.me"],
a[href*="whatsapp"],
.jar-btn[href*="/contacto"],
.jar-btn[href*="/contact"] {
    border-color: rgba(48,255,173,.76) !important;
    color: #ecfff7 !important;
    box-shadow:
        inset 0 0 0 1px rgba(48,255,173,.34),
        0 0 0 1px rgba(48,255,173,.28),
        0 0 16px rgba(48,255,173,.25),
        0 0 34px rgba(48,255,173,.13) !important;
}

/* RED: legal, disclosures, terms, privacy, cookies */
a[href*="/privacidad"],
a[href*="/privacy"],
a[href*="/terminos"],
a[href*="/terms"],
a[href*="/cookies"],
a[href*="/eliminar-mis-datos"],
a[href*="/delete-my-data"],
a[href*="/disclosures"],
a[href*="/disclosure"],
a[href*="/legal"],
a[href*="/envios"],
a[href*="/shipping"],
a[href*="/devoluciones"],
a[href*="/refund"] {
    border-color: rgba(255,48,56,.76) !important;
    color: #fff0f1 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,48,56,.34),
        0 0 0 1px rgba(255,48,56,.28),
        0 0 16px rgba(255,48,56,.25),
        0 0 34px rgba(255,48,56,.13) !important;
}

/* Give footer legal pills a stronger red identity */
.jar-footer__legal a {
    border-color: rgba(255,48,56,.68) !important;
    background:
        linear-gradient(135deg, rgba(255,48,56,.105), rgba(255,255,255,.035)) !important;
}

/* Footer contact buttons: contact green, store blue */
.jar-footer a[href*="/contacto"],
.jar-footer a[href*="/contact"],
.jar-footer a[href^="tel:"] {
    border-color: rgba(48,255,173,.76) !important;
}

.jar-footer a[href*="/tienda"],
.jar-footer a[href*="/store"] {
    border-color: rgba(35,167,255,.76) !important;
    box-shadow:
        inset 0 0 0 1px rgba(35,167,255,.34),
        0 0 0 1px rgba(35,167,255,.28),
        0 0 16px rgba(35,167,255,.25),
        0 0 34px rgba(35,167,255,.13) !important;
}

/* Hover lift and stronger glow */
a[href]:hover,
button:hover,
.jar-btn:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover {
    transform: translateY(-2px);
    filter: brightness(1.1) saturate(1.08);
}

/* Animated energy line on key pill-style links */
a[href]::after,
.jar-btn::after,
.btn::after,
.button::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: -2px;
    height: 1px;
    border-radius: 999px;
    opacity: .68;
    pointer-events: none;
    background: currentColor;
    filter: blur(.2px) drop-shadow(0 0 8px currentColor);
    transform: scaleX(.32);
    transform-origin: center;
    transition: transform .22s ease, opacity .22s ease;
}

a[href]:hover::after,
.jar-btn:hover::after,
.btn:hover::after,
.button:hover::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Avoid weird underline effect on large image/logo links */
a:has(img)::after,
.site-logo::after,
.brand::after {
    display: none !important;
}

/* Softer treatment for TRG credit so it remains visible but not loud */
.jar-footer__credit a {
    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 18px rgba(255,255,255,.055) !important;
}

/* JAR LINK GLOW SYSTEM END */

/* JAR FOOTER POP START */
.jar-footer {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    min-height: 440px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    background:
        radial-gradient(circle at 74% 18%, rgba(48,255,173,.13), transparent 22rem),
        radial-gradient(circle at 12% 18%, rgba(35,167,255,.14), transparent 24rem),
        linear-gradient(135deg, #020303 0%, #05080a 48%, #020303 100%) !important;
    color: #f8fafc !important;
}

.jar-footer::before,
.jar-footer::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(48,255,173,.88), rgba(35,167,255,.72), transparent) !important;
    filter: drop-shadow(0 0 18px rgba(48,255,173,.34)) !important;
}

.jar-footer::before {
    width: min(64vw, 860px) !important;
    top: 86px !important;
    left: 8vw !important;
    transform: rotate(-2deg) !important;
}

.jar-footer::after {
    width: min(48vw, 620px) !important;
    bottom: 108px !important;
    left: 36vw !important;
    transform: rotate(3deg) !important;
}

.jar-footer__glow {
    position: absolute !important;
    inset: -18% -12% auto auto !important;
    width: min(58vw, 820px) !important;
    height: min(58vw, 820px) !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle, rgba(48,255,173,.12), transparent 58%),
        radial-gradient(circle, rgba(35,167,255,.14), transparent 64%) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.jar-footer__ghost-logo {
    position: absolute !important;
    z-index: 0 !important;
    right: -13vw !important;
    top: -145px !important;
    width: clamp(520px, 46vw, 900px) !important;
    max-width: none !important;
    height: auto !important;
    opacity: .52 !important;
    visibility: visible !important;
    filter:
        saturate(1.25)
        contrast(1.12)
        drop-shadow(0 0 46px rgba(35,167,255,.30))
        drop-shadow(0 0 64px rgba(48,255,173,.16)) !important;
    transform: rotate(-2deg) !important;
    pointer-events: none !important;
}

.jar-footer__inner {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(320px, .9fr) minmax(280px, .52fr) !important;
    gap: clamp(1rem, 4vw, 4rem) !important;
    align-items: stretch !important;
    padding-block: clamp(4.5rem, 8vw, 6.5rem) 2rem !important;
}

.jar-footer__brand-showcase,
.jar-footer__contact-card {
    position: relative !important;
    min-height: 270px !important;
    padding: clamp(1.2rem, 3vw, 2rem) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 36px !important;
    background:
        radial-gradient(circle at 20% 20%, rgba(35,167,255,.12), transparent 18rem),
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.026)),
        rgba(0,0,0,.30) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.13),
        0 26px 88px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.jar-footer__brand-showcase::before,
.jar-footer__contact-card::before {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    top: -1px !important;
    width: 120px !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(48,255,173,.98), rgba(35,167,255,.72)) !important;
    box-shadow: 0 0 22px rgba(48,255,173,.36) !important;
}

.jar-footer__brand-showcase {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.jar-footer__main-logo {
    display: block !important;
    width: min(420px, 86vw) !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
    filter:
        saturate(1.22)
        contrast(1.08)
        drop-shadow(0 24px 60px rgba(0,0,0,.48))
        drop-shadow(0 0 34px rgba(35,167,255,.26)) !important;
}

.jar-footer__brand-actions,
.jar-footer__quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .65rem !important;
    margin-top: 1.25rem !important;
}

.jar-footer__panel-title {
    margin: 0 0 .9rem !important;
    color: #67c7ff !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-footer__phone {
    display: inline-flex !important;
    color: #fff !important;
    font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
    font-weight: 1000 !important;
    letter-spacing: -.05em !important;
    text-decoration: none !important;
}

.jar-footer__contact-card p {
    color: rgba(255,255,255,.66) !important;
    line-height: 1.55 !important;
}

.jar-footer__legal-row {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: .65rem !important;
    margin-top: clamp(1rem, 3vw, 2rem) !important;
    padding-top: 1.15rem !important;
    border-top: 1px solid rgba(255,255,255,.11) !important;
}

.jar-footer__credit {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: .85rem !important;
}

.jar-footer__credit a {
    color: rgba(255,255,255,.68) !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

@media (max-width: 980px) {
    .jar-footer {
        overflow: hidden !important;
    }

    .jar-footer__inner {
        grid-template-columns: 1fr !important;
        padding-block: 4rem 2.5rem !important;
    }

    .jar-footer__ghost-logo {
        right: -230px !important;
        top: -80px !important;
        width: 560px !important;
        opacity: .30 !important;
    }

    .jar-footer__brand-showcase,
    .jar-footer__contact-card {
        min-height: auto !important;
    }

    .jar-footer__main-logo {
        width: min(340px, 82vw) !important;
    }

    .jar-footer__legal-row {
        justify-content: flex-start !important;
    }
}
/* JAR FOOTER POP END */

/* JAR FINAL LINK COLOR OVERRIDES START */

/* Product, store, cart, tutorial links = BLUE */
a[href*="/productos"],
a[href*="/producto"],
a[href*="/products"],
a[href*="/product"],
a[href*="/tienda"],
a[href*="/store"],
a[href*="/carrito"],
a[href*="/cart"],
a[href*="/tutoriales"],
a[href*="/tutorial"],
a[href*="/tutorials"],
.jar-link-product {
    border-color: rgba(35,167,255,.78) !important;
    color: #eaf7ff !important;
    background:
        linear-gradient(135deg, rgba(35,167,255,.14), rgba(255,255,255,.035)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(35,167,255,.35),
        0 0 0 1px rgba(35,167,255,.28),
        0 0 16px rgba(35,167,255,.25),
        0 0 34px rgba(35,167,255,.14) !important;
}

/* Contact, phone, email, WhatsApp links = GREEN */
a[href*="/contacto"],
a[href*="/contact"],
a[href^="tel:"],
a[href^="mailto:"],
a[href*="wa.me"],
a[href*="whatsapp"],
.jar-link-contact {
    border-color: rgba(48,255,173,.78) !important;
    color: #ecfff7 !important;
    background:
        linear-gradient(135deg, rgba(48,255,173,.13), rgba(255,255,255,.035)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(48,255,173,.34),
        0 0 0 1px rgba(48,255,173,.28),
        0 0 16px rgba(48,255,173,.25),
        0 0 34px rgba(48,255,173,.14) !important;
}

/* Legal links = RED */
a[href*="/privacidad"],
a[href*="/privacy"],
a[href*="/terminos"],
a[href*="/terms"],
a[href*="/cookies"],
a[href*="/eliminar-mis-datos"],
a[href*="/delete-my-data"],
a[href*="/disclosures"],
a[href*="/disclosure"],
a[href*="/legal"],
a[href*="/envios"],
a[href*="/shipping"],
a[href*="/devoluciones"],
a[href*="/refund"],
.jar-link-legal {
    border-color: rgba(255,48,56,.78) !important;
    color: #fff0f1 !important;
    background:
        linear-gradient(135deg, rgba(255,48,56,.13), rgba(255,255,255,.035)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,48,56,.34),
        0 0 0 1px rgba(255,48,56,.28),
        0 0 16px rgba(255,48,56,.25),
        0 0 34px rgba(255,48,56,.14) !important;
}

/* Button/pill shape */
.jar-footer a,
.jar-brutalist-actions a,
.jar-btn,
.btn,
.button,
button,
input[type="submit"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 999px !important;
    padding: .65rem .95rem !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    transition: color .18s ease, transform .18s ease, background .18s ease, filter .18s ease !important;
}

/* Remove old red product hero behavior */
.jar-brutalist-actions a:first-child,
.jar-btn--main,
.button-primary,
.btn-primary {
    border-color: rgba(35,167,255,.78) !important;
    color: #eaf7ff !important;
    background:
        linear-gradient(135deg, rgba(35,167,255,.32), rgba(35,167,255,.12)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(35,167,255,.35),
        0 0 0 1px rgba(35,167,255,.28),
        0 0 18px rgba(35,167,255,.30),
        0 0 42px rgba(35,167,255,.16) !important;
}

a[href]:hover,
button:hover,
.jar-btn:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.12) saturate(1.08) !important;
}

/* Keep TRG credit visible but neutral */
.jar-footer__credit a {
    border-color: rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.68) !important;
    background: transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 18px rgba(255,255,255,.055) !important;
}

/* JAR FINAL LINK COLOR OVERRIDES END */

/* JAR TRG CREDIT TEXT LINK START */
.jar-footer__credit {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: .85rem !important;
    border-top: 1px solid rgba(255,255,255,.11) !important;
}

.jar-footer__credit a {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.68) !important;
    font-size: .86rem !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.jar-footer__credit a:hover {
    color: #ffffff !important;
    transform: none !important;
    filter: none !important;
    text-shadow: 0 0 14px rgba(48,255,173,.35) !important;
}

.jar-footer__credit a::after {
    display: none !important;
}
/* JAR TRG CREDIT TEXT LINK END */

/* JAR HEADER CLEANUP START */
.jar-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    background:
        linear-gradient(180deg, rgba(3,4,5,.94), rgba(3,4,5,.82)) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.jar-header__inner {
    min-height: 78px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 1.1rem !important;
    align-items: center !important;
}

.jar-header__brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: .72rem !important;
    min-height: 50px !important;
    padding: .5rem .75rem .5rem .55rem !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 12px 42px rgba(0,0,0,.34) !important;
    text-decoration: none !important;
}

.jar-header__brand img {
    display: block !important;
    width: auto !important;
    height: 42px !important;
    max-height: 42px !important;
    filter:
        saturate(1.18)
        contrast(1.08)
        drop-shadow(0 0 18px rgba(35,167,255,.24)) !important;
}

.jar-header__brand span {
    display: grid !important;
    gap: .05rem !important;
    line-height: 1 !important;
}

.jar-header__brand strong {
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: 1000 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}

.jar-header__brand em {
    color: #67c7ff !important;
    font-size: .72rem !important;
    font-style: normal !important;
    font-weight: 950 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}

.jar-header__nav {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: .55rem !important;
}

.jar-header__nav a,
.jar-header__lang a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;
    padding: .68rem 1rem !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.jar-header__nav a:hover,
.jar-header__lang a:hover,
.jar-header__nav a.is-active,
.jar-header__lang a.is-active {
    color: #fff !important;
    transform: translateY(-1px) !important;
}

.jar-header__nav a.is-active::before,
.jar-header__lang a.is-active::before {
    content: "" !important;
    position: absolute !important;
    left: 32% !important;
    right: 32% !important;
    bottom: 6px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    box-shadow: 0 0 14px currentColor !important;
}

.jar-header__cart span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    margin-left: .45rem !important;
    border-radius: 999px !important;
    background: #178bff !important;
    color: #fff !important;
    font-size: .74rem !important;
    letter-spacing: 0 !important;
}

.jar-header__lang {
    display: inline-flex !important;
    align-items: center !important;
    gap: .2rem !important;
    padding: .2rem !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.045) !important;
}

.jar-header__lang a {
    min-width: 42px !important;
    padding-inline: .7rem !important;
}

.jar-header__lang a.is-active {
    border-color: rgba(35,167,255,.78) !important;
    background: #178bff !important;
    box-shadow:
        0 0 0 1px rgba(35,167,255,.30),
        0 0 22px rgba(35,167,255,.32) !important;
}

.jar-store-support {
    padding: clamp(1.2rem, 4vw, 2rem) 0 !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(35,167,255,.12), transparent 22rem),
        rgba(3,4,5,.92) !important;
}

.jar-store-support__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 1rem !important;
    align-items: center !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 28px !important;
    padding: clamp(1rem, 3vw, 1.5rem) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
        rgba(0,0,0,.28) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.11),
        0 22px 72px rgba(0,0,0,.34) !important;
}

.jar-store-support__eyebrow {
    margin: 0 0 .45rem !important;
    color: #67c7ff !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-store-support h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1.8rem, 4vw, 3.5rem) !important;
    font-weight: 1000 !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
    text-transform: uppercase !important;
}

.jar-store-support p {
    color: rgba(255,255,255,.68) !important;
    line-height: 1.6 !important;
}

.jar-store-support__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .65rem !important;
    justify-content: flex-end !important;
}

.jar-store-support__actions a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    padding: .7rem 1rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

@media (max-width: 980px) {
    .jar-header__inner {
        grid-template-columns: 1fr auto !important;
        gap: .75rem !important;
        padding-block: .55rem !important;
    }

    .jar-header__nav {
        grid-column: 1 / -1 !important;
        order: 3 !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: .25rem !important;
        scrollbar-width: none !important;
    }

    .jar-header__nav::-webkit-scrollbar {
        display: none !important;
    }

    .jar-header__nav a {
        flex: 0 0 auto !important;
    }

    .jar-header__brand span {
        display: none !important;
    }

    .jar-store-support__inner {
        grid-template-columns: 1fr !important;
    }

    .jar-store-support__actions {
        justify-content: flex-start !important;
    }
}
/* JAR HEADER CLEANUP END */

/* JAR PRODUCT HUB FINAL START */
.jar-product-hub-final {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(650px, 84svh, 900px) !important;
    display: grid !important;
    align-items: center !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    background: #030405 !important;
}

.jar-product-hub-final__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: -5 !important;
    background-image: url("../img/tiendabackgroundhero.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    filter: saturate(1.18) contrast(1.12) brightness(.98) !important;
    transform: scale(1.012) !important;
}

.jar-product-hub-final__shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: -4 !important;
    background:
        radial-gradient(circle at 78% 26%, rgba(48,255,173,.10), transparent 22rem),
        radial-gradient(circle at 18% 22%, rgba(35,167,255,.13), transparent 24rem),
        linear-gradient(90deg, rgba(3,4,5,.76) 0%, rgba(3,4,5,.30) 50%, rgba(3,4,5,.74) 100%),
        linear-gradient(180deg, rgba(3,4,5,.04), rgba(3,4,5,.60) 82%, #030405 100%) !important;
}

.jar-product-hub-final::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.03) 50%, rgba(255,255,255,.03) 75%, transparent 75%, transparent),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) !important;
    background-size: 18px 18px, 96px 96px !important;
    opacity: .18 !important;
}

.jar-product-hub-final__inner {
    position: relative !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
    gap: clamp(1.2rem, 4vw, 3rem) !important;
    align-items: end !important;
    padding-block: clamp(4rem, 8vw, 7rem) !important;
}

.jar-product-hub-final__copy {
    max-width: 850px !important;
}

.jar-product-pill {
    display: inline-flex !important;
    width: fit-content !important;
    margin: 0 0 1rem !important;
    min-height: 34px !important;
    align-items: center !important;
    border: 1px solid rgba(35,167,255,.58) !important;
    border-radius: 999px !important;
    padding: .48rem .9rem !important;
    background: rgba(35,167,255,.12) !important;
    color: #8bd6ff !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 24px rgba(35,167,255,.22) !important;
}

.jar-product-hub-final h1 {
    margin: 0 !important;
    max-width: 10.5ch !important;
    color: #fff !important;
    font-size: clamp(3.45rem, 8.5vw, 8.7rem) !important;
    font-weight: 1000 !important;
    line-height: .84 !important;
    letter-spacing: -.09em !important;
    text-transform: uppercase !important;
    text-shadow: 0 28px 90px rgba(0,0,0,.78) !important;
}

.jar-product-hub-final__lead {
    max-width: 690px !important;
    margin: 1.15rem 0 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
    line-height: 1.72 !important;
    text-shadow: 0 12px 32px rgba(0,0,0,.70) !important;
}

.jar-product-hub-final__actions,
.jar-product-guide-final__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .8rem !important;
    margin-top: 1.45rem !important;
}

.jar-product-hub-final__actions a,
.jar-product-lanes a,
.jar-product-guide-final a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    padding: .78rem 1.12rem !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

.jar-product-hub-final__panel {
    position: relative !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 34px !important;
    padding: clamp(1.1rem, 2vw, 1.55rem) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
        rgba(0,0,0,.38) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.17),
        0 34px 110px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.jar-product-hub-final__panel::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    top: -1px !important;
    width: 110px !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(48,255,173,.98), rgba(35,167,255,.72)) !important;
    box-shadow: 0 0 24px rgba(48,255,173,.38) !important;
}

.jar-product-hub-final__panel span {
    color: #8bd6ff !important;
    font-size: .78rem !important;
    font-weight: 1000 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-product-hub-final__panel strong {
    display: block !important;
    margin-top: .65rem !important;
    color: #fff !important;
    font-size: clamp(1.85rem, 3.25vw, 3.35rem) !important;
    font-weight: 1000 !important;
    line-height: .88 !important;
    letter-spacing: -.07em !important;
    text-transform: uppercase !important;
}

.jar-product-hub-final__panel p {
    color: rgba(255,255,255,.74) !important;
    line-height: 1.62 !important;
}

.jar-product-lanes,
.jar-product-ritual-final,
.jar-product-guide-final {
    position: relative !important;
    padding: clamp(3.5rem, 7vw, 6.5rem) 0 !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(35,167,255,.12), transparent 24rem),
        radial-gradient(circle at 82% 0%, rgba(48,255,173,.10), transparent 24rem),
        #030405 !important;
}

.jar-product-section-title {
    max-width: 930px !important;
    margin-bottom: clamp(1.5rem, 4vw, 2.4rem) !important;
}

.jar-product-section-title p {
    margin: 0 0 .7rem !important;
    color: #67c7ff !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-product-section-title h2,
.jar-product-ritual-final h2,
.jar-product-guide-final h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(2.45rem, 6.2vw, 6rem) !important;
    font-weight: 1000 !important;
    line-height: .88 !important;
    letter-spacing: -.08em !important;
    text-transform: uppercase !important;
}

.jar-product-lanes__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
}

.jar-product-lanes article,
.jar-product-guide-final__inner,
.jar-product-ritual-final__grid > div:last-child {
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 32px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.026)),
        rgba(0,0,0,.28) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 24px 78px rgba(0,0,0,.34) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.jar-product-lanes article {
    min-height: 330px !important;
    padding: clamp(1.15rem, 3vw, 1.8rem) !important;
    display: flex !important;
    flex-direction: column !important;
}

.jar-product-lanes article span {
    color: #67c7ff !important;
    font-size: .78rem !important;
    font-weight: 1000 !important;
    letter-spacing: .16em !important;
}

.jar-product-lanes h3 {
    margin: .65rem 0 0 !important;
    color: #fff !important;
    font-size: clamp(1.9rem, 4vw, 3.35rem) !important;
    font-weight: 1000 !important;
    line-height: .9 !important;
    letter-spacing: -.065em !important;
    text-transform: uppercase !important;
}

.jar-product-lanes p,
.jar-product-ritual-final p,
.jar-product-guide-final p {
    color: rgba(255,255,255,.70) !important;
    line-height: 1.68 !important;
}

.jar-product-lanes article a {
    margin-top: auto !important;
    width: fit-content !important;
}

.jar-product-ritual-final__grid {
    display: grid !important;
    grid-template-columns: .85fr 1.15fr !important;
    gap: 1rem !important;
    align-items: start !important;
}

.jar-product-ritual-final__grid > div:last-child,
.jar-product-guide-final__inner {
    padding: clamp(1.15rem, 3vw, 1.8rem) !important;
}

.jar-product-guide-final__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 1rem !important;
    align-items: center !important;
}

.jar-product-guide-final__actions {
    justify-content: flex-end !important;
}

.jar-store-products-anchor {
    scroll-margin-top: 120px !important;
}

/* Product card motion and brand glow */
.product-card,
.store-product-card,
.catalog-card,
.product-grid article,
.store-grid article,
.products-grid article,
[class*="product-card"] {
    --jar-product-glow-rgb: 35, 167, 255;
    position: relative !important;
    overflow: hidden !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 22px 66px rgba(0,0,0,.46) !important;
    transform: translateY(0) scale(1) !important;
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        filter .28s ease !important;
}

.product-card:nth-of-type(3n + 1),
.store-product-card:nth-of-type(3n + 1),
.catalog-card:nth-of-type(3n + 1),
.product-grid article:nth-of-type(3n + 1),
.store-grid article:nth-of-type(3n + 1) {
    --jar-product-glow-rgb: 35, 167, 255;
}

.product-card:nth-of-type(3n + 2),
.store-product-card:nth-of-type(3n + 2),
.catalog-card:nth-of-type(3n + 2),
.product-grid article:nth-of-type(3n + 2),
.store-grid article:nth-of-type(3n + 2) {
    --jar-product-glow-rgb: 48, 255, 173;
}

.product-card:nth-of-type(3n + 3),
.store-product-card:nth-of-type(3n + 3),
.catalog-card:nth-of-type(3n + 3),
.product-grid article:nth-of-type(3n + 3),
.store-grid article:nth-of-type(3n + 3) {
    --jar-product-glow-rgb: 255, 48, 56;
}

.product-card::before,
.store-product-card::before,
.catalog-card::before,
.product-grid article::before,
.store-grid article::before,
.products-grid article::before,
[class*="product-card"]::before {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--jar-product-glow-rgb), .34), transparent 15rem),
        linear-gradient(135deg, rgba(var(--jar-product-glow-rgb), .18), transparent 38%) !important;
    transition: opacity .28s ease !important;
}

.product-card:hover,
.product-card:focus-within,
.store-product-card:hover,
.store-product-card:focus-within,
.catalog-card:hover,
.catalog-card:focus-within,
.product-grid article:hover,
.product-grid article:focus-within,
.store-grid article:hover,
.store-grid article:focus-within,
.products-grid article:hover,
.products-grid article:focus-within,
[class*="product-card"]:hover,
[class*="product-card"]:focus-within {
    transform: translateY(-8px) scale(1.012) !important;
    border-color: rgba(var(--jar-product-glow-rgb), .78) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        0 22px 70px rgba(0,0,0,.48),
        0 0 0 1px rgba(var(--jar-product-glow-rgb), .30),
        0 0 24px rgba(var(--jar-product-glow-rgb), .28),
        0 0 58px rgba(var(--jar-product-glow-rgb), .14) !important;
    filter: saturate(1.08) brightness(1.04) !important;
}

.product-card:hover::before,
.product-card:focus-within::before,
.store-product-card:hover::before,
.store-product-card:focus-within::before,
.catalog-card:hover::before,
.catalog-card:focus-within::before,
.product-grid article:hover::before,
.product-grid article:focus-within::before,
.store-grid article:hover::before,
.store-grid article:focus-within::before,
.products-grid article:hover::before,
.products-grid article:focus-within::before,
[class*="product-card"]:hover::before,
[class*="product-card"]:focus-within::before {
    opacity: 1 !important;
}

.product-card > *,
.store-product-card > *,
.catalog-card > *,
.product-grid article > *,
.store-grid article > *,
.products-grid article > *,
[class*="product-card"] > * {
    position: relative !important;
    z-index: 1 !important;
}

.product-card img,
.store-product-card img,
.catalog-card img,
.product-grid article img,
.store-grid article img,
.products-grid article img,
[class*="product-card"] img {
    transition: transform .35s ease, filter .35s ease !important;
    filter: drop-shadow(0 18px 34px rgba(0,0,0,.42)) !important;
}

.product-card:hover img,
.store-product-card:hover img,
.catalog-card:hover img,
.product-grid article:hover img,
.store-grid article:hover img,
.products-grid article:hover img,
[class*="product-card"]:hover img {
    transform: translateY(-3px) scale(1.035) !important;
    filter:
        drop-shadow(0 22px 44px rgba(0,0,0,.48))
        drop-shadow(0 0 28px rgba(var(--jar-product-glow-rgb), .20)) !important;
}

@media (max-width: 980px) {
    .jar-product-hub-final__inner,
    .jar-product-lanes__grid,
    .jar-product-ritual-final__grid,
    .jar-product-guide-final__inner {
        grid-template-columns: 1fr !important;
    }

    .jar-product-hub-final {
        min-height: auto !important;
    }

    .jar-product-hub-final__inner {
        padding-block: 3rem 4rem !important;
    }

    .jar-product-hub-final h1 {
        font-size: clamp(3.05rem, 14vw, 5.4rem) !important;
    }

    .jar-product-hub-final__actions,
    .jar-product-guide-final__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .jar-product-hub-final__actions a,
    .jar-product-guide-final__actions a {
        width: 100% !important;
    }

    .jar-product-lanes article {
        min-height: auto !important;
    }
}
/* JAR PRODUCT HUB FINAL END */

/* SCIENCE BUILT FOR SHINE PARALLAX START */
.jar-product-hub-final {
    perspective: 1400px !important;
    background-image: url("../img/tiendabackgroundhero.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}

.jar-product-hub-final__bg {
    inset: -12% !important;
    background-attachment: fixed !important;
    transform: scale(1.18) translate3d(0, -90px, 0) !important;
    will-change: transform !important;
}

.jar-product-hub-final__shade {
    inset: -6% !important;
    transform: translate3d(0, -40px, 0) !important;
    will-change: transform !important;
}

.jar-product-hub-final__copy {
    transform: translate3d(0, 36px, 0) !important;
    will-change: transform !important;
}

.jar-product-hub-final__panel {
    transform: translate3d(0, 62px, 0) rotateX(-2deg) !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
}

.jar-product-hub-final__panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    pointer-events: none !important;
}

.jar-parallax-running .jar-product-hub-final__bg,
.jar-parallax-running .jar-product-hub-final__shade,
.jar-parallax-running .jar-product-hub-final__copy,
.jar-parallax-running .jar-product-hub-final__panel {
    transition: none !important;
}

@media (hover: hover) {
    .jar-product-lanes article,
    .jar-product-guide-final__inner,
    .jar-product-ritual-final__grid > div:last-child {
        transition:
            transform .28s ease,
            border-color .28s ease,
            box-shadow .28s ease !important;
    }

    .jar-product-lanes article:hover,
    .jar-product-guide-final__inner:hover,
    .jar-product-ritual-final__grid > div:last-child:hover {
        transform: translateY(-6px) !important;
        border-color: rgba(35,167,255,.34) !important;
        box-shadow:
            inset 0 1px rgba(255,255,255,.14),
            0 28px 88px rgba(0,0,0,.42),
            0 0 34px rgba(35,167,255,.10) !important;
    }
}
/* SCIENCE BUILT FOR SHINE PARALLAX END */

/* SCIENCE BUILT FOR SHINE PARALLAX BLEND START */
.jar-product-hub-final {
    border-bottom: 0 !important;
}

.jar-product-hub-final::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 220px !important;
    z-index: 6 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            rgba(3,4,5,0) 0%,
            rgba(3,4,5,.28) 38%,
            rgba(3,4,5,.70) 72%,
            rgba(3,4,5,.88) 100%
        ) !important;
}

.jar-product-lanes,
.jar-product-ritual-final,
.jar-product-guide-final {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(35,167,255,.12), transparent 26rem),
        radial-gradient(circle at 82% 12%, rgba(48,255,173,.10), transparent 26rem),
        linear-gradient(180deg, rgba(3,4,5,.78), rgba(3,4,5,.86)) !important;
}

.jar-product-lanes::before,
.jar-product-ritual-final::before,
.jar-product-guide-final::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;
    background-image: url("../img/tiendabackgroundhero.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    opacity: .34 !important;
    filter: saturate(1.06) contrast(1.08) brightness(.62) !important;
    transform: scale(1.04) !important;
}

.jar-product-lanes::after,
.jar-product-ritual-final::after,
.jar-product-guide-final::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(3,4,5,.84), rgba(3,4,5,.52), rgba(3,4,5,.84)),
        linear-gradient(180deg, rgba(3,4,5,.36), rgba(3,4,5,.78)) !important;
}

.jar-product-lanes {
    margin-top: -1px !important;
    padding-top: clamp(4.5rem, 8vw, 7.5rem) !important;
}

.jar-product-section-title,
.jar-product-lanes__grid,
.jar-product-ritual-final__grid,
.jar-product-guide-final__inner {
    position: relative !important;
    z-index: 3 !important;
}

.jar-product-lanes article,
.jar-product-guide-final__inner,
.jar-product-ritual-final__grid > div:last-child {
    background:
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.030)),
        rgba(0,0,0,.34) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.13),
        0 26px 84px rgba(0,0,0,.38) !important;
}

@media (max-width: 980px) {
    .jar-product-lanes::before,
    .jar-product-ritual-final::before,
    .jar-product-guide-final::before {
        background-attachment: scroll !important;
        opacity: .24 !important;
    }

    .jar-product-hub-final::before {
        height: 150px !important;
    }
}
/* SCIENCE BUILT FOR SHINE PARALLAX BLEND END */

/* JAR CATALOG REFINEMENT START */
.jar-product-guide-final {
    padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}

.jar-product-guide-final::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 260px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            180deg,
            rgba(3,4,5,0) 0%,
            rgba(3,4,5,.30) 34%,
            rgba(3,4,5,.64) 70%,
            rgba(3,4,5,.82) 100%
        ) !important;
}

.jar-product-catalog-zone {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    margin-top: -1px !important;
    padding-top: clamp(2.5rem, 5vw, 4.5rem) !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(35,167,255,.13), transparent 26rem),
        radial-gradient(circle at 82% 10%, rgba(48,255,173,.08), transparent 26rem),
        linear-gradient(180deg, rgba(3,4,5,.74), rgba(3,4,5,.88)) !important;
}

.jar-product-catalog-zone::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -3 !important;
    background-image: url("../img/tiendabackgroundhero.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    opacity: .28 !important;
    filter: saturate(1.08) contrast(1.08) brightness(.58) !important;
    transform: scale(1.04) !important;
}

.jar-product-catalog-zone::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(3,4,5,.86), rgba(3,4,5,.50), rgba(3,4,5,.86)),
        linear-gradient(180deg, rgba(3,4,5,.30), rgba(3,4,5,.82)) !important;
}

.jar-product-catalog-zone section,
.jar-product-catalog-zone .section,
.jar-product-catalog-zone .store-section,
.jar-product-catalog-zone .product-section,
.jar-product-catalog-zone .catalog-section {
    background: transparent !important;
}

.jar-product-catalog-zone h1,
.jar-product-catalog-zone h2 {
    max-width: 900px !important;
    color: #fff !important;
    font-size: clamp(3rem, 6.5vw, 6.2rem) !important;
    line-height: .88 !important;
    letter-spacing: -.08em !important;
    text-transform: uppercase !important;
}

.jar-product-catalog-zone p {
    color: rgba(255,255,255,.72) !important;
}

.jar-product-catalog-zone .section-kicker,
.jar-product-catalog-zone .eyebrow,
.jar-product-catalog-zone [class*="kicker"],
.jar-product-catalog-zone [class*="eyebrow"] {
    color: #8bd6ff !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-product-catalog-zone .container:first-child,
.jar-product-catalog-zone section:first-child .container,
.jar-product-catalog-zone .section:first-child .container {
    padding-top: 0 !important;
}

@media (max-width: 980px) {
    .jar-product-catalog-zone::before {
        background-attachment: scroll !important;
        opacity: .20 !important;
    }

    .jar-product-guide-final::after {
        height: 170px !important;
    }
}
/* JAR CATALOG REFINEMENT END */

/* JAR PREMIUM PRODUCT CARDS START */

/*
   Premium catalog refinement.
   Scoped to the Tienda product catalog so hero typography stays bold,
   while product cards become more controlled and luxury-oriented.
*/

.jar-product-catalog-zone {
    padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

/* Make the catalog heading feel intentional, not redundant. */
.jar-product-catalog-zone h1,
.jar-product-catalog-zone h2 {
    max-width: 980px !important;
    text-wrap: balance !important;
}

.jar-product-catalog-zone > section,
.jar-product-catalog-zone .section,
.jar-product-catalog-zone .store-section,
.jar-product-catalog-zone .product-section,
.jar-product-catalog-zone .catalog-section {
    position: relative !important;
    z-index: 2 !important;
}

/* Product grid rhythm */
.jar-product-catalog-zone .grid,
.jar-product-catalog-zone .product-grid,
.jar-product-catalog-zone .products-grid,
.jar-product-catalog-zone .store-grid,
.jar-product-catalog-zone [class*="product-grid"],
.jar-product-catalog-zone [class*="products-grid"],
.jar-product-catalog-zone [class*="store-grid"] {
    gap: clamp(1rem, 2vw, 1.35rem) !important;
    align-items: stretch !important;
}

/* Product card shell */
.jar-product-catalog-zone .product-card,
.jar-product-catalog-zone .store-product-card,
.jar-product-catalog-zone .catalog-card,
.jar-product-catalog-zone .product-grid article,
.jar-product-catalog-zone .products-grid article,
.jar-product-catalog-zone .store-grid article,
.jar-product-catalog-zone [class*="product-card"] {
    position: relative !important;
    min-height: 0 !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 30px !important;
    padding: clamp(1.25rem, 2.2vw, 1.65rem) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.030)),
        rgba(0,0,0,.42) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.13),
        0 24px 70px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Subtle logo watermark inside cards */
.jar-product-catalog-zone .product-card::after,
.jar-product-catalog-zone .store-product-card::after,
.jar-product-catalog-zone .catalog-card::after,
.jar-product-catalog-zone .product-grid article::after,
.jar-product-catalog-zone .products-grid article::after,
.jar-product-catalog-zone .store-grid article::after,
.jar-product-catalog-zone [class*="product-card"]::after {
    content: "" !important;
    position: absolute !important;
    right: -42px !important;
    bottom: -42px !important;
    width: 180px !important;
    height: 180px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: url("../img/brand/JARLogo.webp") center center / contain no-repeat !important;
    opacity: .035 !important;
    filter: grayscale(1) brightness(2) contrast(1.1) !important;
    transform: rotate(-8deg) !important;
}

/* Keep card content above glow/watermark */
.jar-product-catalog-zone .product-card > *,
.jar-product-catalog-zone .store-product-card > *,
.jar-product-catalog-zone .catalog-card > *,
.jar-product-catalog-zone .product-grid article > *,
.jar-product-catalog-zone .products-grid article > *,
.jar-product-catalog-zone .store-grid article > *,
.jar-product-catalog-zone [class*="product-card"] > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Product titles: premium, readable, no broken words */
.jar-product-catalog-zone .product-card h1,
.jar-product-catalog-zone .product-card h2,
.jar-product-catalog-zone .product-card h3,
.jar-product-catalog-zone .store-product-card h1,
.jar-product-catalog-zone .store-product-card h2,
.jar-product-catalog-zone .store-product-card h3,
.jar-product-catalog-zone .catalog-card h1,
.jar-product-catalog-zone .catalog-card h2,
.jar-product-catalog-zone .catalog-card h3,
.jar-product-catalog-zone .product-grid article h1,
.jar-product-catalog-zone .product-grid article h2,
.jar-product-catalog-zone .product-grid article h3,
.jar-product-catalog-zone .products-grid article h1,
.jar-product-catalog-zone .products-grid article h2,
.jar-product-catalog-zone .products-grid article h3,
.jar-product-catalog-zone .store-grid article h1,
.jar-product-catalog-zone .store-grid article h2,
.jar-product-catalog-zone .store-grid article h3,
.jar-product-catalog-zone [class*="product-card"] h1,
.jar-product-catalog-zone [class*="product-card"] h2,
.jar-product-catalog-zone [class*="product-card"] h3 {
    max-width: 11.5ch !important;
    margin: 0 0 .9rem !important;
    color: #fff !important;
    font-size: clamp(2.05rem, 3.05vw, 3.65rem) !important;
    font-weight: 1000 !important;
    line-height: .92 !important;
    letter-spacing: -.065em !important;
    text-transform: uppercase !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
}

/* Descriptions */
.jar-product-catalog-zone .product-card p,
.jar-product-catalog-zone .store-product-card p,
.jar-product-catalog-zone .catalog-card p,
.jar-product-catalog-zone .product-grid article p,
.jar-product-catalog-zone .products-grid article p,
.jar-product-catalog-zone .store-grid article p,
.jar-product-catalog-zone [class*="product-card"] p {
    max-width: 34rem !important;
    color: rgba(255,255,255,.68) !important;
    font-size: .98rem !important;
    line-height: 1.58 !important;
    letter-spacing: -.01em !important;
}

/* Product metadata: size, price, status */
.jar-product-catalog-zone small,
.jar-product-catalog-zone .meta,
.jar-product-catalog-zone .product-meta,
.jar-product-catalog-zone [class*="meta"],
.jar-product-catalog-zone [class*="size"],
.jar-product-catalog-zone [class*="price"] {
    color: rgba(255,255,255,.64) !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
}

.jar-product-catalog-zone .price,
.jar-product-catalog-zone [class*="price"] {
    color: #26c8ff !important;
    font-weight: 950 !important;
}

/* Buttons inside product cards */
.jar-product-catalog-zone .product-card a,
.jar-product-catalog-zone .product-card button,
.jar-product-catalog-zone .store-product-card a,
.jar-product-catalog-zone .store-product-card button,
.jar-product-catalog-zone .catalog-card a,
.jar-product-catalog-zone .catalog-card button,
.jar-product-catalog-zone .product-grid article a,
.jar-product-catalog-zone .product-grid article button,
.jar-product-catalog-zone .products-grid article a,
.jar-product-catalog-zone .products-grid article button,
.jar-product-catalog-zone .store-grid article a,
.jar-product-catalog-zone .store-grid article button,
.jar-product-catalog-zone [class*="product-card"] a,
.jar-product-catalog-zone [class*="product-card"] button {
    width: fit-content !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    padding: .68rem 1.05rem !important;
    border: 1px solid rgba(35,167,255,.60) !important;
    background:
        linear-gradient(135deg, rgba(35,167,255,.20), rgba(35,167,255,.055)) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 0 0 1px rgba(35,167,255,.18),
        0 0 24px rgba(35,167,255,.18) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Hover state: keep premium, not carnival */
.jar-product-catalog-zone .product-card:hover,
.jar-product-catalog-zone .store-product-card:hover,
.jar-product-catalog-zone .catalog-card:hover,
.jar-product-catalog-zone .product-grid article:hover,
.jar-product-catalog-zone .products-grid article:hover,
.jar-product-catalog-zone .store-grid article:hover,
.jar-product-catalog-zone [class*="product-card"]:hover {
    transform: translateY(-7px) scale(1.008) !important;
    border-color: rgba(var(--jar-product-glow-rgb), .72) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        0 26px 78px rgba(0,0,0,.46),
        0 0 0 1px rgba(var(--jar-product-glow-rgb), .24),
        0 0 34px rgba(var(--jar-product-glow-rgb), .20) !important;
}

.jar-product-catalog-zone .product-card:hover::after,
.jar-product-catalog-zone .store-product-card:hover::after,
.jar-product-catalog-zone .catalog-card:hover::after,
.jar-product-catalog-zone .product-grid article:hover::after,
.jar-product-catalog-zone .products-grid article:hover::after,
.jar-product-catalog-zone .store-grid article:hover::after,
.jar-product-catalog-zone [class*="product-card"]:hover::after {
    opacity: .07 !important;
}

/* If product images exist, make them feel like packaging shots */
.jar-product-catalog-zone .product-card img,
.jar-product-catalog-zone .store-product-card img,
.jar-product-catalog-zone .catalog-card img,
.jar-product-catalog-zone .product-grid article img,
.jar-product-catalog-zone .products-grid article img,
.jar-product-catalog-zone .store-grid article img,
.jar-product-catalog-zone [class*="product-card"] img {
    width: auto !important;
    max-width: min(100%, 260px) !important;
    max-height: 260px !important;
    object-fit: contain !important;
    margin-inline: auto !important;
    filter:
        drop-shadow(0 22px 38px rgba(0,0,0,.48))
        drop-shadow(0 0 22px rgba(var(--jar-product-glow-rgb), .10)) !important;
}

/* Make the product area less cramped on wide displays */
@media (min-width: 1100px) {
    .jar-product-catalog-zone .product-card,
    .jar-product-catalog-zone .store-product-card,
    .jar-product-catalog-zone .catalog-card,
    .jar-product-catalog-zone .product-grid article,
    .jar-product-catalog-zone .products-grid article,
    .jar-product-catalog-zone .store-grid article,
    .jar-product-catalog-zone [class*="product-card"] {
        min-height: 360px !important;
    }
}

/* Tablet */
@media (max-width: 1100px) {
    .jar-product-catalog-zone .product-card h1,
    .jar-product-catalog-zone .product-card h2,
    .jar-product-catalog-zone .product-card h3,
    .jar-product-catalog-zone .store-product-card h1,
    .jar-product-catalog-zone .store-product-card h2,
    .jar-product-catalog-zone .store-product-card h3,
    .jar-product-catalog-zone .catalog-card h1,
    .jar-product-catalog-zone .catalog-card h2,
    .jar-product-catalog-zone .catalog-card h3,
    .jar-product-catalog-zone .product-grid article h1,
    .jar-product-catalog-zone .product-grid article h2,
    .jar-product-catalog-zone .product-grid article h3,
    .jar-product-catalog-zone .products-grid article h1,
    .jar-product-catalog-zone .products-grid article h2,
    .jar-product-catalog-zone .products-grid article h3,
    .jar-product-catalog-zone .store-grid article h1,
    .jar-product-catalog-zone .store-grid article h2,
    .jar-product-catalog-zone .store-grid article h3,
    .jar-product-catalog-zone [class*="product-card"] h1,
    .jar-product-catalog-zone [class*="product-card"] h2,
    .jar-product-catalog-zone [class*="product-card"] h3 {
        max-width: 14ch !important;
        font-size: clamp(1.85rem, 5vw, 3rem) !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .jar-product-catalog-zone {
        padding-top: 2rem !important;
    }

    .jar-product-catalog-zone .product-card,
    .jar-product-catalog-zone .store-product-card,
    .jar-product-catalog-zone .catalog-card,
    .jar-product-catalog-zone .product-grid article,
    .jar-product-catalog-zone .products-grid article,
    .jar-product-catalog-zone .store-grid article,
    .jar-product-catalog-zone [class*="product-card"] {
        border-radius: 24px !important;
        padding: 1.15rem !important;
    }

    .jar-product-catalog-zone .product-card h1,
    .jar-product-catalog-zone .product-card h2,
    .jar-product-catalog-zone .product-card h3,
    .jar-product-catalog-zone .store-product-card h1,
    .jar-product-catalog-zone .store-product-card h2,
    .jar-product-catalog-zone .store-product-card h3,
    .jar-product-catalog-zone .catalog-card h1,
    .jar-product-catalog-zone .catalog-card h2,
    .jar-product-catalog-zone .catalog-card h3,
    .jar-product-catalog-zone .product-grid article h1,
    .jar-product-catalog-zone .product-grid article h2,
    .jar-product-catalog-zone .product-grid article h3,
    .jar-product-catalog-zone .products-grid article h1,
    .jar-product-catalog-zone .products-grid article h2,
    .jar-product-catalog-zone .products-grid article h3,
    .jar-product-catalog-zone .store-grid article h1,
    .jar-product-catalog-zone .store-grid article h2,
    .jar-product-catalog-zone .store-grid article h3,
    .jar-product-catalog-zone [class*="product-card"] h1,
    .jar-product-catalog-zone [class*="product-card"] h2,
    .jar-product-catalog-zone [class*="product-card"] h3 {
        max-width: 100% !important;
        font-size: clamp(1.85rem, 10vw, 3rem) !important;
        line-height: .95 !important;
    }
}
/* JAR PREMIUM PRODUCT CARDS END */

/* JAR REAL PRODUCT LINKS START */
.jar-product-catalog-zone article a[href*="/producto/"],
.jar-product-catalog-zone article a[href*="/product/"],
.jar-product-catalog-zone .product-card a[href*="/producto/"],
.jar-product-catalog-zone .product-card a[href*="/product/"],
.jar-product-catalog-zone [class*="product-card"] a[href*="/producto/"],
.jar-product-catalog-zone [class*="product-card"] a[href*="/product/"] {
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: .35rem .55rem .55rem 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    padding: .62rem .95rem !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025)) !important;
    color: rgba(255,255,255,.88) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 0 18px rgba(255,255,255,.06) !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .105em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.jar-product-catalog-zone article a[href*="/producto/"]:hover,
.jar-product-catalog-zone article a[href*="/product/"]:hover,
.jar-product-catalog-zone .product-card a[href*="/producto/"]:hover,
.jar-product-catalog-zone .product-card a[href*="/product/"]:hover,
.jar-product-catalog-zone [class*="product-card"] a[href*="/producto/"]:hover,
.jar-product-catalog-zone [class*="product-card"] a[href*="/product/"]:hover {
    color: #fff !important;
    border-color: rgba(35,167,255,.72) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.14),
        0 0 0 1px rgba(35,167,255,.20),
        0 0 26px rgba(35,167,255,.20) !important;
}

.jar-product-catalog-zone article a[href*="/producto/"]::after,
.jar-product-catalog-zone article a[href*="/product/"]::after,
.jar-product-catalog-zone .product-card a[href*="/producto/"]::after,
.jar-product-catalog-zone .product-card a[href*="/product/"]::after,
.jar-product-catalog-zone [class*="product-card"] a[href*="/producto/"]::after,
.jar-product-catalog-zone [class*="product-card"] a[href*="/product/"]::after {
    content: "→" !important;
    margin-left: .55rem !important;
    font-size: .9rem !important;
    transform: translateY(-1px) !important;
}
/* JAR REAL PRODUCT LINKS END */

/* JAR PRODUCT IMAGE ZOOM START */
.jar-product-image-is-zoomable {
    cursor: zoom-in !important;
    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .22s ease !important;
}

.jar-product-image-is-zoomable:hover,
.jar-product-image-is-zoomable:focus-visible {
    transform: translateY(-4px) scale(1.012) !important;
    filter:
        drop-shadow(0 28px 52px rgba(0,0,0,.52))
        drop-shadow(0 0 34px rgba(35,167,255,.18)) !important;
}

.jar-product-image-is-zoomable:focus-visible {
    outline: 2px solid rgba(35,167,255,.88) !important;
    outline-offset: 8px !important;
    border-radius: 28px !important;
}

.jar-product-zoom-open {
    overflow: hidden !important;
}

.jar-product-zoom {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(1rem, 4vw, 2.5rem) !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(35,167,255,.18), transparent 28rem),
        radial-gradient(circle at 80% 10%, rgba(48,255,173,.14), transparent 26rem),
        rgba(3,4,5,.92) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .22s ease !important;
}

.jar-product-zoom.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.jar-product-zoom__stage {
    width: min(96vw, 1220px) !important;
    height: min(86vh, 920px) !important;
    display: grid !important;
    place-items: center !important;
    overflow: auto !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 34px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
        rgba(0,0,0,.48) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 42px 140px rgba(0,0,0,.68),
        0 0 70px rgba(35,167,255,.14) !important;
}

.jar-product-zoom__image {
    display: block !important;
    width: auto !important;
    max-width: 96% !important;
    max-height: 96% !important;
    object-fit: contain !important;
    cursor: zoom-in !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform .22s ease, max-height .22s ease, max-width .22s ease !important;
    filter:
        drop-shadow(0 30px 58px rgba(0,0,0,.58))
        drop-shadow(0 0 34px rgba(35,167,255,.14)) !important;
}

.jar-product-zoom.is-zoomed .jar-product-zoom__image {
    max-width: none !important;
    max-height: none !important;
    transform: scale(1.55) !important;
    cursor: zoom-out !important;
}

.jar-product-zoom__close {
    position: fixed !important;
    top: clamp(1rem, 3vw, 1.6rem) !important;
    right: clamp(1rem, 3vw, 1.6rem) !important;
    z-index: 10000 !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.035)),
        rgba(0,0,0,.50) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 0 28px rgba(35,167,255,.16) !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.jar-product-zoom__close:hover,
.jar-product-zoom__close:focus-visible {
    border-color: rgba(35,167,255,.78) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.14),
        0 0 0 1px rgba(35,167,255,.22),
        0 0 34px rgba(35,167,255,.24) !important;
}

.jar-product-zoom__hint {
    position: fixed !important;
    left: 50% !important;
    bottom: clamp(.8rem, 3vw, 1.4rem) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    color: rgba(255,255,255,.64) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}

@media (max-width: 720px) {
    .jar-product-zoom__stage {
        width: 94vw !important;
        height: 82vh !important;
        border-radius: 24px !important;
    }

    .jar-product-zoom.is-zoomed .jar-product-zoom__image {
        transform: scale(1.35) !important;
    }

    .jar-product-zoom__hint {
        display: none !important;
    }
}
/* JAR PRODUCT IMAGE ZOOM END */

/* JAR PRODUCT CARD LUXURY RESET START */

/*
   Product catalog correction:
   - removes harsh oval/circle treatment
   - softens title typography
   - makes product cards feel premium, curated, and readable
*/

.jar-product-catalog-zone .product-card,
.jar-product-catalog-zone .store-product-card,
.jar-product-catalog-zone .catalog-card,
.jar-product-catalog-zone .product-grid article,
.jar-product-catalog-zone .products-grid article,
.jar-product-catalog-zone .store-grid article,
.jar-product-catalog-zone [class*="product-card"] {
    display: flex !important;
    flex-direction: column !important;
    gap: .75rem !important;
    min-height: 420px !important;
    padding: clamp(1.15rem, 2vw, 1.55rem) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.026)),
        rgba(0,0,0,.46) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 24px 74px rgba(0,0,0,.42) !important;
}

/* Kill the harsh oval/circle overlay. Replace with restrained edge glow. */
.jar-product-catalog-zone .product-card::before,
.jar-product-catalog-zone .store-product-card::before,
.jar-product-catalog-zone .catalog-card::before,
.jar-product-catalog-zone .product-grid article::before,
.jar-product-catalog-zone .products-grid article::before,
.jar-product-catalog-zone .store-grid article::before,
.jar-product-catalog-zone [class*="product-card"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: .55 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%),
        radial-gradient(circle at 50% -10%, rgba(var(--jar-product-glow-rgb), .16), transparent 18rem) !important;
    transition: opacity .25s ease, background .25s ease !important;
}

.jar-product-catalog-zone .product-card:hover::before,
.jar-product-catalog-zone .store-product-card:hover::before,
.jar-product-catalog-zone .catalog-card:hover::before,
.jar-product-catalog-zone .product-grid article:hover::before,
.jar-product-catalog-zone .products-grid article:hover::before,
.jar-product-catalog-zone .store-grid article:hover::before,
.jar-product-catalog-zone [class*="product-card"]:hover::before {
    opacity: .82 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.10), transparent 36%),
        radial-gradient(circle at 50% -8%, rgba(var(--jar-product-glow-rgb), .22), transparent 20rem) !important;
}

/* Logo watermark stays subtle, not decorative noise. */
.jar-product-catalog-zone .product-card::after,
.jar-product-catalog-zone .store-product-card::after,
.jar-product-catalog-zone .catalog-card::after,
.jar-product-catalog-zone .product-grid article::after,
.jar-product-catalog-zone .products-grid article::after,
.jar-product-catalog-zone .store-grid article::after,
.jar-product-catalog-zone [class*="product-card"]::after {
    right: -54px !important;
    bottom: -54px !important;
    width: 190px !important;
    height: 190px !important;
    opacity: .028 !important;
}

/* Product image: larger, cleaner, no oval framing. */
.jar-product-catalog-zone .product-card img,
.jar-product-catalog-zone .store-product-card img,
.jar-product-catalog-zone .catalog-card img,
.jar-product-catalog-zone .product-grid article img,
.jar-product-catalog-zone .products-grid article img,
.jar-product-catalog-zone .store-grid article img,
.jar-product-catalog-zone [class*="product-card"] img {
    display: block !important;
    width: auto !important;
    max-width: min(72%, 220px) !important;
    max-height: 190px !important;
    object-fit: contain !important;
    margin: 0 auto .8rem !important;
    border-radius: 16px !important;
    filter:
        drop-shadow(0 22px 40px rgba(0,0,0,.46))
        drop-shadow(0 0 18px rgba(var(--jar-product-glow-rgb), .12)) !important;
}

/* Category / eyebrow */
.jar-product-catalog-zone .product-card .eyebrow,
.jar-product-catalog-zone .store-product-card .eyebrow,
.jar-product-catalog-zone .catalog-card .eyebrow,
.jar-product-catalog-zone .product-grid article .eyebrow,
.jar-product-catalog-zone .products-grid article .eyebrow,
.jar-product-catalog-zone .store-grid article .eyebrow,
.jar-product-catalog-zone [class*="product-card"] .eyebrow,
.jar-product-catalog-zone .product-card [class*="eyebrow"],
.jar-product-catalog-zone .product-card [class*="kicker"],
.jar-product-catalog-zone article [class*="eyebrow"],
.jar-product-catalog-zone article [class*="kicker"] {
    margin: 0 0 .15rem !important;
    color: rgba(255,255,255,.60) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .11em !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

/* Product names: premium title-case, readable, no brutal breaks. */
.jar-product-catalog-zone .product-card h1,
.jar-product-catalog-zone .product-card h2,
.jar-product-catalog-zone .product-card h3,
.jar-product-catalog-zone .store-product-card h1,
.jar-product-catalog-zone .store-product-card h2,
.jar-product-catalog-zone .store-product-card h3,
.jar-product-catalog-zone .catalog-card h1,
.jar-product-catalog-zone .catalog-card h2,
.jar-product-catalog-zone .catalog-card h3,
.jar-product-catalog-zone .product-grid article h1,
.jar-product-catalog-zone .product-grid article h2,
.jar-product-catalog-zone .product-grid article h3,
.jar-product-catalog-zone .products-grid article h1,
.jar-product-catalog-zone .products-grid article h2,
.jar-product-catalog-zone .products-grid article h3,
.jar-product-catalog-zone .store-grid article h1,
.jar-product-catalog-zone .store-grid article h2,
.jar-product-catalog-zone .store-grid article h3,
.jar-product-catalog-zone [class*="product-card"] h1,
.jar-product-catalog-zone [class*="product-card"] h2,
.jar-product-catalog-zone [class*="product-card"] h3 {
    max-width: 100% !important;
    margin: 0 0 .55rem !important;
    color: #fff !important;
    font-size: clamp(1.75rem, 2.25vw, 2.55rem) !important;
    font-weight: 950 !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
}

/* Description: calmer, more luxury. */
.jar-product-catalog-zone .product-card p,
.jar-product-catalog-zone .store-product-card p,
.jar-product-catalog-zone .catalog-card p,
.jar-product-catalog-zone .product-grid article p,
.jar-product-catalog-zone .products-grid article p,
.jar-product-catalog-zone .store-grid article p,
.jar-product-catalog-zone [class*="product-card"] p {
    color: rgba(255,255,255,.68) !important;
    font-size: .96rem !important;
    line-height: 1.58 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
}

/* Keep size/price organized. */
.jar-product-catalog-zone small,
.jar-product-catalog-zone .meta,
.jar-product-catalog-zone .product-meta,
.jar-product-catalog-zone [class*="meta"],
.jar-product-catalog-zone [class*="size"],
.jar-product-catalog-zone [class*="price"] {
    font-size: .82rem !important;
    line-height: 1.35 !important;
}

/* Actions stay at bottom for rhythm. */
.jar-product-catalog-zone form,
.jar-product-catalog-zone .product-actions,
.jar-product-catalog-zone [class*="action"] {
    margin-top: auto !important;
}

.jar-product-catalog-zone .product-card a,
.jar-product-catalog-zone .product-card button,
.jar-product-catalog-zone .store-product-card a,
.jar-product-catalog-zone .store-product-card button,
.jar-product-catalog-zone .catalog-card a,
.jar-product-catalog-zone .catalog-card button,
.jar-product-catalog-zone .product-grid article a,
.jar-product-catalog-zone .product-grid article button,
.jar-product-catalog-zone .products-grid article a,
.jar-product-catalog-zone .products-grid article button,
.jar-product-catalog-zone .store-grid article a,
.jar-product-catalog-zone .store-grid article button,
.jar-product-catalog-zone [class*="product-card"] a,
.jar-product-catalog-zone [class*="product-card"] button {
    min-height: 40px !important;
    padding: .65rem .95rem !important;
    font-size: .72rem !important;
    letter-spacing: .095em !important;
}

/* Hover: refined glow, not loud. */
.jar-product-catalog-zone .product-card:hover,
.jar-product-catalog-zone .store-product-card:hover,
.jar-product-catalog-zone .catalog-card:hover,
.jar-product-catalog-zone .product-grid article:hover,
.jar-product-catalog-zone .products-grid article:hover,
.jar-product-catalog-zone .store-grid article:hover,
.jar-product-catalog-zone [class*="product-card"]:hover {
    transform: translateY(-6px) scale(1.006) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        0 26px 78px rgba(0,0,0,.46),
        0 0 0 1px rgba(var(--jar-product-glow-rgb), .22),
        0 0 28px rgba(var(--jar-product-glow-rgb), .18) !important;
}

.jar-product-catalog-zone .product-card:hover img,
.jar-product-catalog-zone .store-product-card:hover img,
.jar-product-catalog-zone .catalog-card:hover img,
.jar-product-catalog-zone .product-grid article:hover img,
.jar-product-catalog-zone .products-grid article:hover img,
.jar-product-catalog-zone .store-grid article:hover img,
.jar-product-catalog-zone [class*="product-card"]:hover img {
    transform: translateY(-3px) scale(1.025) !important;
}

/* Wider screens: give the layout air. */
@media (min-width: 1100px) {
    .jar-product-catalog-zone .product-card,
    .jar-product-catalog-zone .store-product-card,
    .jar-product-catalog-zone .catalog-card,
    .jar-product-catalog-zone .product-grid article,
    .jar-product-catalog-zone .products-grid article,
    .jar-product-catalog-zone .store-grid article,
    .jar-product-catalog-zone [class*="product-card"] {
        min-height: 455px !important;
    }
}

/* Smaller screens: keep it readable. */
@media (max-width: 720px) {
    .jar-product-catalog-zone .product-card,
    .jar-product-catalog-zone .store-product-card,
    .jar-product-catalog-zone .catalog-card,
    .jar-product-catalog-zone .product-grid article,
    .jar-product-catalog-zone .products-grid article,
    .jar-product-catalog-zone .store-grid article,
    .jar-product-catalog-zone [class*="product-card"] {
        min-height: auto !important;
        border-radius: 24px !important;
    }

    .jar-product-catalog-zone .product-card h1,
    .jar-product-catalog-zone .product-card h2,
    .jar-product-catalog-zone .product-card h3,
    .jar-product-catalog-zone .store-product-card h1,
    .jar-product-catalog-zone .store-product-card h2,
    .jar-product-catalog-zone .store-product-card h3,
    .jar-product-catalog-zone .catalog-card h1,
    .jar-product-catalog-zone .catalog-card h2,
    .jar-product-catalog-zone .catalog-card h3,
    .jar-product-catalog-zone .product-grid article h1,
    .jar-product-catalog-zone .product-grid article h2,
    .jar-product-catalog-zone .product-grid article h3,
    .jar-product-catalog-zone .products-grid article h1,
    .jar-product-catalog-zone .products-grid article h2,
    .jar-product-catalog-zone .products-grid article h3,
    .jar-product-catalog-zone .store-grid article h1,
    .jar-product-catalog-zone .store-grid article h2,
    .jar-product-catalog-zone .store-grid article h3,
    .jar-product-catalog-zone [class*="product-card"] h1,
    .jar-product-catalog-zone [class*="product-card"] h2,
    .jar-product-catalog-zone [class*="product-card"] h3 {
        font-size: clamp(1.65rem, 8.5vw, 2.55rem) !important;
    }
}
/* JAR PRODUCT CARD LUXURY RESET END */

/* JAR PRODUCT CARD OVAL CLEANUP START */

/*
   Remove the inner oval/circle look from product cards.
   Replace it with a subtle rounded product surface.
*/

.jar-product-catalog-zone .product-card::before,
.jar-product-catalog-zone .store-product-card::before,
.jar-product-catalog-zone .catalog-card::before,
.jar-product-catalog-zone .product-grid article::before,
.jar-product-catalog-zone .products-grid article::before,
.jar-product-catalog-zone .store-grid article::before,
.jar-product-catalog-zone [class*="product-card"]::before {
    border-radius: 18px !important;
    inset: 16px !important;
    opacity: .42 !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.018)),
        radial-gradient(circle at 50% 0%, rgba(var(--jar-product-glow-rgb), .10), transparent 18rem) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
}

/* Catch inner image/media wrappers that may be drawing the oval. */
.jar-product-catalog-zone .product-card figure,
.jar-product-catalog-zone .store-product-card figure,
.jar-product-catalog-zone .catalog-card figure,
.jar-product-catalog-zone .product-grid article figure,
.jar-product-catalog-zone .products-grid article figure,
.jar-product-catalog-zone .store-grid article figure,
.jar-product-catalog-zone [class*="product-card"] figure,
.jar-product-catalog-zone [class*="media"],
.jar-product-catalog-zone [class*="image"],
.jar-product-catalog-zone [class*="thumb"] {
    border-radius: 18px !important;
}

.jar-product-catalog-zone .product-card figure::before,
.jar-product-catalog-zone .product-card figure::after,
.jar-product-catalog-zone .store-product-card figure::before,
.jar-product-catalog-zone .store-product-card figure::after,
.jar-product-catalog-zone .catalog-card figure::before,
.jar-product-catalog-zone .catalog-card figure::after,
.jar-product-catalog-zone .product-grid article figure::before,
.jar-product-catalog-zone .product-grid article figure::after,
.jar-product-catalog-zone .products-grid article figure::before,
.jar-product-catalog-zone .products-grid article figure::after,
.jar-product-catalog-zone .store-grid article figure::before,
.jar-product-catalog-zone .store-grid article figure::after,
.jar-product-catalog-zone [class*="product-card"] figure::before,
.jar-product-catalog-zone [class*="product-card"] figure::after,
.jar-product-catalog-zone [class*="media"]::before,
.jar-product-catalog-zone [class*="media"]::after,
.jar-product-catalog-zone [class*="image"]::before,
.jar-product-catalog-zone [class*="image"]::after,
.jar-product-catalog-zone [class*="thumb"]::before,
.jar-product-catalog-zone [class*="thumb"]::after {
    border-radius: 18px !important;
    clip-path: none !important;
}

/* Product image surface: soft rectangle, not circle/oval. */
.jar-product-catalog-zone .product-card img,
.jar-product-catalog-zone .store-product-card img,
.jar-product-catalog-zone .catalog-card img,
.jar-product-catalog-zone .product-grid article img,
.jar-product-catalog-zone .products-grid article img,
.jar-product-catalog-zone .store-grid article img,
.jar-product-catalog-zone [class*="product-card"] img {
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
        rgba(0,0,0,.24) !important;
    padding: .45rem !important;
}

/* Keep hover refined. */
.jar-product-catalog-zone .product-card:hover::before,
.jar-product-catalog-zone .store-product-card:hover::before,
.jar-product-catalog-zone .catalog-card:hover::before,
.jar-product-catalog-zone .product-grid article:hover::before,
.jar-product-catalog-zone .products-grid article:hover::before,
.jar-product-catalog-zone .store-grid article:hover::before,
.jar-product-catalog-zone [class*="product-card"]:hover::before {
    opacity: .58 !important;
    border-color: rgba(var(--jar-product-glow-rgb), .18) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.022)),
        radial-gradient(circle at 50% 0%, rgba(var(--jar-product-glow-rgb), .14), transparent 18rem) !important;
}

/* If any old circular mask remains, force square geometry. */
.jar-product-catalog-zone * {
    clip-path: none;
}

.jar-product-catalog-zone .product-card *,
.jar-product-catalog-zone .store-product-card *,
.jar-product-catalog-zone .catalog-card *,
.jar-product-catalog-zone .product-grid article *,
.jar-product-catalog-zone .products-grid article *,
.jar-product-catalog-zone .store-grid article *,
.jar-product-catalog-zone [class*="product-card"] * {
    border-top-left-radius: min(var(--jar-force-radius, 18px), 28px);
    border-top-right-radius: min(var(--jar-force-radius, 18px), 28px);
}

/* Do not round text/actions unnecessarily. */
.jar-product-catalog-zone h1,
.jar-product-catalog-zone h2,
.jar-product-catalog-zone h3,
.jar-product-catalog-zone p,
.jar-product-catalog-zone span,
.jar-product-catalog-zone small,
.jar-product-catalog-zone strong,
.jar-product-catalog-zone em,
.jar-product-catalog-zone form,
.jar-product-catalog-zone button,
.jar-product-catalog-zone a {
    border-radius: revert-layer !important;
}

/* Keep buttons pill-shaped. */
.jar-product-catalog-zone button,
.jar-product-catalog-zone a {
    border-radius: 999px !important;
}

/* JAR PRODUCT CARD OVAL CLEANUP END */

/* JAR PRODUCT CARD LINK RADIUS FIX START */

/*
   The product card itself is an <a> link.
   Earlier button styling made all links pill-shaped, which caused the giant oval.
   Product-card links need card geometry. Only inner buttons stay pill-shaped.
*/

.jar-product-catalog-zone a.product-card,
.jar-product-catalog-zone a.store-product-card,
.jar-product-catalog-zone a.catalog-card,
.jar-product-catalog-zone a[class*="product-card"],
.jar-product-catalog-zone .product-grid > a,
.jar-product-catalog-zone .products-grid > a,
.jar-product-catalog-zone .store-grid > a {
    border-radius: 28px !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

/* Kill any oval/circle pseudo-layer on linked cards. */
.jar-product-catalog-zone a.product-card::before,
.jar-product-catalog-zone a.store-product-card::before,
.jar-product-catalog-zone a.catalog-card::before,
.jar-product-catalog-zone a[class*="product-card"]::before,
.jar-product-catalog-zone .product-grid > a::before,
.jar-product-catalog-zone .products-grid > a::before,
.jar-product-catalog-zone .store-grid > a::before {
    border-radius: 18px !important;
    inset: 14px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.016)),
        radial-gradient(circle at 50% 0%, rgba(var(--jar-product-glow-rgb), .08), transparent 18rem) !important;
    border: 1px solid rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.06) !important;
}

/* Inner media/image blocks should be soft rectangles, never ovals. */
.jar-product-catalog-zone a.product-card figure,
.jar-product-catalog-zone a.product-card picture,
.jar-product-catalog-zone a.product-card img,
.jar-product-catalog-zone a[class*="product-card"] figure,
.jar-product-catalog-zone a[class*="product-card"] picture,
.jar-product-catalog-zone a[class*="product-card"] img {
    border-radius: 18px !important;
    clip-path: none !important;
}

/* Keep only actual action controls pill-shaped. */
.jar-product-catalog-zone a.product-card .jar-link-product,
.jar-product-catalog-zone a.product-card .jar-link-contact,
.jar-product-catalog-zone a.product-card button,
.jar-product-catalog-zone a[class*="product-card"] .jar-link-product,
.jar-product-catalog-zone a[class*="product-card"] .jar-link-contact,
.jar-product-catalog-zone a[class*="product-card"] button,
.jar-product-catalog-zone form button,
.jar-product-catalog-zone .product-actions a,
.jar-product-catalog-zone .product-actions button {
    border-radius: 999px !important;
}

/* Product text should not inherit pill/link geometry. */
.jar-product-catalog-zone a.product-card h1,
.jar-product-catalog-zone a.product-card h2,
.jar-product-catalog-zone a.product-card h3,
.jar-product-catalog-zone a.product-card p,
.jar-product-catalog-zone a.product-card span,
.jar-product-catalog-zone a.product-card small,
.jar-product-catalog-zone a[class*="product-card"] h1,
.jar-product-catalog-zone a[class*="product-card"] h2,
.jar-product-catalog-zone a[class*="product-card"] h3,
.jar-product-catalog-zone a[class*="product-card"] p,
.jar-product-catalog-zone a[class*="product-card"] span,
.jar-product-catalog-zone a[class*="product-card"] small {
    border-radius: 0 !important;
}

/* Final visual reset for linked product cards. */
.jar-product-catalog-zone a.product-card,
.jar-product-catalog-zone a[class*="product-card"] {
    background:
        linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.026)),
        rgba(0,0,0,.46) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 24px 74px rgba(0,0,0,.42) !important;
}

/* JAR PRODUCT CARD LINK RADIUS FIX END */

/* JAR ACTUAL PRODUCT CARD LINK FIX START */

/*
   Actual rendered structure:
   article.product-card > a.product-card-link > .product-media + .product-content

   The oval came from broad button/link rules applying to a.product-card-link.
   This resets that anchor into a full card surface, not a pill.
*/

.jar-product-catalog-zone article.product-card > a.product-card-link,
.jar-product-catalog-zone .product-card > a.product-card-link,
.jar-product-catalog-zone a.product-card-link[href*="/producto/"],
.jar-product-catalog-zone a.product-card-link[href*="/product/"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .9rem !important;

    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    margin: 0 !important;
    padding: 1rem !important;

    border: 0 !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
        rgba(0,0,0,.18) !important;
    box-shadow: none !important;

    color: inherit !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: inherit !important;
    overflow: hidden !important;
}

/* Remove arrow/button pseudo-element from the full-card link. */
.jar-product-catalog-zone article.product-card > a.product-card-link::before,
.jar-product-catalog-zone article.product-card > a.product-card-link::after,
.jar-product-catalog-zone .product-card > a.product-card-link::before,
.jar-product-catalog-zone .product-card > a.product-card-link::after,
.jar-product-catalog-zone a.product-card-link[href*="/producto/"]::before,
.jar-product-catalog-zone a.product-card-link[href*="/producto/"]::after,
.jar-product-catalog-zone a.product-card-link[href*="/product/"]::before,
.jar-product-catalog-zone a.product-card-link[href*="/product/"]::after {
    content: none !important;
    display: none !important;
}

/* Make the media block a soft rectangle, not an oval. */
.jar-product-catalog-zone article.product-card > a.product-card-link > .product-media,
.jar-product-catalog-zone .product-card > a.product-card-link > .product-media {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    min-height: 150px !important;
    margin: 0 0 .25rem !important;
    padding: .85rem !important;

    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.015)),
        rgba(0,0,0,.30) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 18px 44px rgba(0,0,0,.22) !important;
    clip-path: none !important;
}

/* Kill media pseudo-shapes if any old rule creates them. */
.jar-product-catalog-zone .product-media::before,
.jar-product-catalog-zone .product-media::after {
    content: none !important;
    display: none !important;
}

/* Product image stays clean and rectangular. */
.jar-product-catalog-zone article.product-card > a.product-card-link > .product-media img,
.jar-product-catalog-zone .product-card > a.product-card-link > .product-media img {
    display: block !important;
    width: auto !important;
    max-width: min(78%, 190px) !important;
    max-height: 150px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    object-fit: contain !important;
    clip-path: none !important;
    filter:
        drop-shadow(0 18px 34px rgba(0,0,0,.46))
        drop-shadow(0 0 16px rgba(var(--jar-product-glow-rgb), .10)) !important;
}

/* Product content should be normal content, not a button body. */
.jar-product-catalog-zone article.product-card > a.product-card-link > .product-content,
.jar-product-catalog-zone .product-card > a.product-card-link > .product-content {
    display: grid !important;
    gap: .55rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.jar-product-catalog-zone article.product-card > a.product-card-link .product-content h3,
.jar-product-catalog-zone .product-card > a.product-card-link .product-content h3 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(1.75rem, 2.25vw, 2.45rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    text-transform: none !important;
}

.jar-product-catalog-zone article.product-card > a.product-card-link .product-content p,
.jar-product-catalog-zone .product-card > a.product-card-link .product-content p {
    margin: 0 !important;
}

.jar-product-catalog-zone article.product-card > a.product-card-link .product-meta-row,
.jar-product-catalog-zone .product-card > a.product-card-link .product-meta-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    margin-top: .25rem !important;
}

/* Ensure hover is on the article, not a giant inner pill. */
.jar-product-catalog-zone article.product-card:hover > a.product-card-link,
.jar-product-catalog-zone .product-card:hover > a.product-card-link {
    background:
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.016)),
        rgba(0,0,0,.20) !important;
}

/* JAR ACTUAL PRODUCT CARD LINK FIX END */

/* JAR RESPONSIVE QA SYSTEM START */

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100% !important;
}

img,
video {
    height: auto;
}

.container,
.jar-container,
.section__inner,
.page-inner,
.page-container,
.legal-page .container,
.contact-page .container,
.product-detail .container,
.jar-product-catalog-zone > *,
.jar-product-hub-final > * {
    width: min(100% - clamp(1.25rem, 4vw, 2rem), 1180px) !important;
    margin-inline: auto !important;
}

main {
    overflow-x: clip !important;
}

main h1,
.hero-title,
.jar-home__title,
.page-title,
.product-detail h1,
.legal-page h1 {
    max-width: 11ch !important;
    text-wrap: balance !important;
}

.site-header a,
.jar-header a,
.site-nav a,
.nav a,
button,
.button,
.btn,
[class*="button"] {
    min-height: 44px;
}

.product-grid,
.products-grid,
.store-grid,
.jar-product-grid,
.jar-product-catalog-zone .grid,
.jar-product-catalog-zone [class*="grid"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.35rem) !important;
    align-items: stretch !important;
}

.product-card,
.product-card-link,
.store-product-card,
.catalog-card,
[class*="product-card"] {
    max-width: 100% !important;
}

.product-card-link,
.product-media,
.product-content,
.product-meta-row {
    min-width: 0 !important;
}

input,
select,
textarea {
    max-width: 100% !important;
    font-size: 16px !important;
}

textarea {
    min-height: 140px;
}

@media (min-width: 1600px) {
    .container,
    .jar-container,
    .section__inner,
    .page-inner,
    .page-container,
    .legal-page .container,
    .contact-page .container,
    .product-detail .container,
    .jar-product-catalog-zone > *,
    .jar-product-hub-final > * {
        width: min(100% - 3rem, 1280px) !important;
    }
}

@media (max-width: 1280px) {
    .jar-home__title,
    .hero-title {
        font-size: clamp(4.25rem, 9vw, 8rem) !important;
        line-height: .88 !important;
    }
}

@media (max-width: 1024px) {
    .site-header,
    .jar-header,
    header[role="banner"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }

    .product-grid,
    .products-grid,
    .store-grid,
    .jar-product-grid,
    .jar-product-catalog-zone .grid,
    .jar-product-catalog-zone [class*="grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-detail__grid,
    .product-detail-grid,
    .product-page,
    .product-layout,
    .contact-grid,
    .legal-grid,
    .cart-grid {
        grid-template-columns: 1fr !important;
    }

    .jar-home__title,
    .hero-title {
        font-size: clamp(3.65rem, 10vw, 6.6rem) !important;
        line-height: .9 !important;
    }
}

@media (min-width: 601px) and (max-width: 820px) {
    .product-grid,
    .products-grid,
    .store-grid,
    .jar-product-grid,
    .jar-product-catalog-zone .grid,
    .jar-product-catalog-zone [class*="grid"] {
        grid-template-columns: 1fr !important;
        width: min(100%, 560px) !important;
        margin-inline: auto !important;
    }

    .product-media {
        min-height: 170px !important;
    }

    .site-header nav,
    .jar-header nav,
    .site-nav,
    .nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: .55rem !important;
    }
}

@media (max-width: 600px) {
    .container,
    .jar-container,
    .section__inner,
    .page-inner,
    .page-container,
    .legal-page .container,
    .contact-page .container,
    .product-detail .container,
    .jar-product-catalog-zone > *,
    .jar-product-hub-final > * {
        width: min(100% - 1.15rem, 1180px) !important;
    }

    section,
    .section,
    .page-section,
    .legal-page,
    .contact-page,
    .jar-product-catalog-zone,
    .jar-product-hub-final {
        padding-block: clamp(3rem, 11vw, 4.5rem) !important;
    }

    .site-header,
    .jar-header,
    header[role="banner"] {
        padding-block: .65rem !important;
    }

    .site-header .container,
    .jar-header .container,
    header[role="banner"] .container {
        display: grid !important;
        gap: .75rem !important;
        justify-items: center !important;
    }

    .site-logo,
    .brand,
    .jar-logo,
    .site-header img,
    .jar-header img {
        max-width: min(210px, 70vw) !important;
    }

    .site-header nav,
    .jar-header nav,
    .site-nav,
    .nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: .45rem !important;
        width: 100% !important;
    }

    .site-header nav a,
    .jar-header nav a,
    .site-nav a,
    .nav a,
    .site-header nav button,
    .jar-header nav button {
        min-height: 40px !important;
        padding: .58rem .78rem !important;
        font-size: .72rem !important;
    }

    .jar-home__title,
    .hero-title,
    main h1,
    .page-title,
    .product-detail h1,
    .legal-page h1 {
        max-width: 100% !important;
        font-size: clamp(2.75rem, 14vw, 4.35rem) !important;
        line-height: .92 !important;
        letter-spacing: -.065em !important;
    }

    .jar-home__actions,
    .hero-actions,
    .actions,
    .cta-row,
    .button-row,
    .product-actions,
    .contact-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .85rem !important;
        width: 100% !important;
    }

    .jar-home__actions a,
    .hero-actions a,
    .actions a,
    .cta-row a,
    .button-row a,
    .product-actions a,
    .product-actions button,
    .contact-actions a,
    button,
    .button,
    .btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .product-grid,
    .products-grid,
    .store-grid,
    .jar-product-grid,
    .jar-product-catalog-zone .grid,
    .jar-product-catalog-zone [class*="grid"] {
        grid-template-columns: 1fr !important;
        width: min(100%, 430px) !important;
        margin-inline: auto !important;
    }

    .product-card,
    .store-product-card,
    .catalog-card,
    [class*="product-card"] {
        min-height: auto !important;
        border-radius: 24px !important;
        padding: .85rem !important;
    }

    .product-card-link {
        padding: .85rem !important;
        border-radius: 18px !important;
    }

    .product-media {
        min-height: 145px !important;
        padding: .75rem !important;
        border-radius: 16px !important;
    }

    .product-media img {
        max-height: 135px !important;
    }

    .product-content h3 {
        font-size: clamp(1.6rem, 8vw, 2.25rem) !important;
        line-height: 1.02 !important;
    }

    .product-meta-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .25rem !important;
    }

    footer,
    .site-footer,
    .jar-footer {
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .jar-home__title,
    .hero-title,
    main h1,
    .page-title,
    .product-detail h1,
    .legal-page h1 {
        font-size: clamp(2.45rem, 15vw, 3.85rem) !important;
    }

    .eyebrow,
    [class*="eyebrow"],
    [class*="kicker"] {
        letter-spacing: .08em !important;
        font-size: .68rem !important;
    }
}

@media (max-width: 390px) {
    .container,
    .jar-container,
    .section__inner,
    .page-inner,
    .page-container,
    .legal-page .container,
    .contact-page .container,
    .product-detail .container,
    .jar-product-catalog-zone > *,
    .jar-product-hub-final > * {
        width: min(100% - 1rem, 1180px) !important;
    }

    .site-header nav a,
    .jar-header nav a,
    .site-nav a,
    .nav a {
        font-size: .66rem !important;
        padding-inline: .58rem !important;
    }

    .jar-home__title,
    .hero-title,
    main h1,
    .page-title,
    .product-detail h1,
    .legal-page h1 {
        font-size: clamp(2.25rem, 14.5vw, 3.45rem) !important;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .site-header,
    .jar-header,
    header[role="banner"] {
        position: sticky !important;
        padding-block: .35rem !important;
    }

    .site-header .container,
    .jar-header .container,
    header[role="banner"] .container {
        display: flex !important;
        justify-content: space-between !important;
        gap: .75rem !important;
    }

    .site-logo,
    .brand,
    .jar-logo,
    .site-header img,
    .jar-header img {
        max-height: 42px !important;
        width: auto !important;
    }

    .site-header nav a,
    .jar-header nav a,
    .site-nav a,
    .nav a {
        min-height: 34px !important;
        padding: .35rem .55rem !important;
        font-size: .62rem !important;
    }

    .hero,
    .jar-home,
    .jar-home__hero,
    .jar-product-hub-final,
    .page-hero {
        min-height: auto !important;
        padding-block: 2rem !important;
    }

    .jar-home__title,
    .hero-title,
    main h1,
    .page-title {
        font-size: clamp(2rem, 8vw, 4rem) !important;
        line-height: .9 !important;
    }
}

/* JAR RESPONSIVE QA SYSTEM END */

/* JAR CUSTOM HOMEPAGE COMPOSITION START */

/*
   Custom homepage composition.
   Logo placement is now semantic markup in resources/views/home.php.
   No JavaScript logo injection.
*/

.jar-custom-home,
.jar-custom-home *,
.jar-custom-system,
.jar-custom-system * {
    box-sizing: border-box !important;
}

.jar-custom-home {
    position: relative !important;
    min-height: clamp(720px, calc(100svh - 86px), 980px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
        radial-gradient(circle at 72% 38%, rgba(35, 167, 255, .16), transparent 34%),
        radial-gradient(circle at 18% 80%, rgba(0, 255, 169, .08), transparent 42%),
        #050607 !important;
}

.jar-custom-home__media,
.jar-custom-home__shade {
    position: absolute !important;
    inset: 0 !important;
}

.jar-custom-home__media {
    z-index: -3 !important;
}

.jar-custom-home__media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: saturate(.86) contrast(1.1) brightness(.62) !important;
    transform: scale(1.035) !important;
}

.jar-custom-home__shade {
    z-index: -2 !important;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .54) 43%, rgba(0, 0, 0, .72) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 36%, rgba(0, 0, 0, .82) 100%) !important;
}

.jar-custom-home__shade::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
    background-size: 72px 72px !important;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.08)) !important;
    pointer-events: none !important;
}

.jar-custom-home__frame {
    width: min(100% - 3rem, 1260px) !important;
    min-height: inherit !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5rem) !important;
}

.jar-custom-home__grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px) !important;
    align-items: end !important;
    gap: clamp(3rem, 7vw, 7rem) !important;
}

.jar-custom-home__copy {
    max-width: 740px !important;
    align-self: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.jar-custom-home__eyebrow,
.jar-custom-home__pre {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 .72rem !important;
    padding: .42rem .78rem !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #77d9ff !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

.jar-custom-home__pre {
    color: rgba(255, 255, 255, .82) !important;
}

.jar-custom-home__title {
    max-width: 760px !important;
    margin: clamp(1.2rem, 2vw, 1.8rem) 0 clamp(1.15rem, 2vw, 1.55rem) !important;
    color: #fff !important;
    font-size: clamp(5rem, 7.7vw, 9.35rem) !important;
    line-height: .82 !important;
    letter-spacing: -.075em !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    text-wrap: balance !important;
    filter: drop-shadow(0 18px 38px rgba(0,0,0,.72)) !important;
}

.jar-custom-home__title span {
    display: block !important;
    white-space: nowrap !important;
}

.jar-custom-home__lead {
    max-width: 680px !important;
    margin: 0 0 clamp(1.35rem, 2.5vw, 2rem) !important;
    color: rgba(255, 255, 255, .80) !important;
    font-size: clamp(1rem, 1.15vw, 1.16rem) !important;
    line-height: 1.72 !important;
}

.jar-custom-home__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
}

.jar-custom-home__button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .78rem 1.12rem !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    letter-spacing: -.02em !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28) !important;
}

.jar-custom-home__button--primary {
    border-color: rgba(35, 167, 255, .72) !important;
    background: linear-gradient(135deg, rgba(35,167,255,.92), rgba(0,97,183,.78)) !important;
}

.jar-custom-home__button--secondary {
    border-color: rgba(0, 255, 169, .45) !important;
}

.jar-custom-home__button--ghost {
    border-color: rgba(255, 255, 255, .24) !important;
}

.jar-custom-home__showcase {
    width: 100% !important;
    max-width: 500px !important;
    justify-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    align-self: end !important;
    margin-bottom: clamp(.25rem, 2vw, 1rem) !important;
    position: relative !important;
    z-index: 3 !important;
}

.jar-custom-home__logo {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 4 !important;
}

.jar-custom-home__logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    filter:
        drop-shadow(0 26px 44px rgba(0, 0, 0, .68))
        drop-shadow(0 0 28px rgba(35, 167, 255, .20)) !important;
}

.jar-custom-home__logo--desktop {
    width: min(390px, 86%) !important;
    max-width: 390px !important;
    margin: 0 auto clamp(1rem, 2vw, 1.35rem) !important;
}

.jar-custom-home__logo--mobile {
    display: none !important;
}

.jar-custom-home__panel {
    width: 100% !important;
    min-height: 178px !important;
    padding: clamp(1.45rem, 2.4vw, 2rem) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
        rgba(12, 14, 16, .64) !important;
    backdrop-filter: blur(20px) saturate(1.25) !important;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .46),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.jar-custom-home__panel span {
    display: block !important;
    margin-bottom: .8rem !important;
    color: #59caff !important;
    font-size: .78rem !important;
    font-weight: 1000 !important;
    letter-spacing: .16em !important;
}

.jar-custom-home__panel strong {
    display: block !important;
    max-width: 330px !important;
    color: #fff !important;
    font-size: clamp(1.5rem, 2vw, 1.95rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    text-transform: uppercase !important;
}

.jar-custom-home__panel p {
    max-width: 360px !important;
    margin: 1rem 0 0 !important;
    color: rgba(255,255,255,.68) !important;
    font-size: .95rem !important;
    line-height: 1.55 !important;
}

.jar-custom-system {
    position: relative !important;
    overflow: hidden !important;
    padding: clamp(4.5rem, 8vw, 7rem) 0 !important;
    background:
        radial-gradient(circle at 80% 10%, rgba(35, 167, 255, .12), transparent 34%),
        #050607 !important;
}

.jar-custom-system__frame {
    width: min(100% - 3rem, 1160px) !important;
    margin: 0 auto !important;
}

.jar-custom-system__head {
    max-width: 760px !important;
    margin-bottom: clamp(2rem, 4vw, 3.2rem) !important;
}

.jar-custom-system__head p {
    margin: 0 0 .7rem !important;
    color: #59caff !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.jar-custom-system__head h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(2.5rem, 5vw, 5.8rem) !important;
    line-height: .9 !important;
    letter-spacing: -.06em !important;
    text-transform: uppercase !important;
}

.jar-custom-system__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

.jar-custom-system__grid article {
    min-height: 220px !important;
    padding: clamp(1.25rem, 2vw, 1.7rem) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        rgba(255,255,255,.035) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.34) !important;
}

.jar-custom-system__grid span {
    display: block !important;
    margin-bottom: 1rem !important;
    color: #59caff !important;
    font-size: .78rem !important;
    font-weight: 1000 !important;
    letter-spacing: .16em !important;
}

.jar-custom-system__grid h3 {
    margin: 0 0 .9rem !important;
    color: #fff !important;
    font-size: clamp(1.8rem, 2.4vw, 2.8rem) !important;
    line-height: .92 !important;
    letter-spacing: -.05em !important;
    text-transform: uppercase !important;
}

.jar-custom-system__grid p {
    margin: 0 !important;
    color: rgba(255,255,255,.70) !important;
    line-height: 1.6 !important;
}

@media (max-width: 900px) {
    .jar-custom-home__frame {
        width: min(100% - 2rem, 760px) !important;
        align-items: start !important;
        padding: clamp(2.25rem, 8vw, 4rem) 0 clamp(3rem, 10vw, 4.5rem) !important;
    }

    .jar-custom-home__grid {
        grid-template-columns: 1fr !important;
        gap: clamp(1.35rem, 5vw, 2rem) !important;
        align-items: start !important;
    }

    .jar-custom-home__logo--mobile {
        width: min(290px, 78vw) !important;
        max-width: 290px !important;
        margin: 0 auto .9rem !important;
        display: flex !important;
        order: 1 !important;
    }

    .jar-custom-home__copy {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .jar-custom-home__showcase {
        order: 3 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        margin: .5rem 0 0 !important;
    }

    .jar-custom-home__logo--desktop {
        display: none !important;
    }

    .jar-custom-home__title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(3.05rem, 16vw, 4.8rem) !important;
        line-height: .86 !important;
        letter-spacing: -.07em !important;
    }

    .jar-custom-home__lead {
        max-width: 100% !important;
    }

    .jar-custom-home__actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
    }

    .jar-custom-home__button {
        width: 100% !important;
    }

    .jar-custom-home__panel {
        width: 100% !important;
        min-height: auto !important;
        border-radius: 26px !important;
    }

    .jar-custom-system__grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 390px) {
    .jar-custom-home__frame {
        width: min(100% - 1.25rem, 360px) !important;
    }

    .jar-custom-home__logo--mobile {
        width: min(260px, 76vw) !important;
        max-width: 260px !important;
    }

    .jar-custom-home__title {
        font-size: clamp(2.7rem, 15.2vw, 3.55rem) !important;
    }

    .jar-custom-home__eyebrow,
    .jar-custom-home__pre {
        font-size: .62rem !important;
        letter-spacing: .11em !important;
    }
}

/* JAR CUSTOM HOMEPAGE COMPOSITION END */

/* JAR MOBILE FOOTER CENTERING START */

/*
   Mobile footer cleanup:
   - Center all footer sections.
   - Keep action buttons neat and consistent.
   - Prevent the footer logo/ghost logo from feeling randomly cropped.
*/

@media (max-width: 600px) {
    .jar-footer {
        text-align: center !important;
        overflow: hidden !important;
    }

    .jar-footer__inner {
        width: min(100% - 1.25rem, 390px) !important;
        margin-inline: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        gap: clamp(1.4rem, 6vw, 2rem) !important;
        padding-inline: 0 !important;
    }

    .jar-footer__brand-showcase,
    .jar-footer__contact-card,
    .jar-footer__credit {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .jar-footer__main-logo {
        display: block !important;
        width: min(285px, 78vw) !important;
        max-width: 285px !important;
        height: auto !important;
        margin: 0 auto 1rem !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .jar-footer__ghost-logo {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(430px, 118vw) !important;
        max-width: none !important;
        opacity: .16 !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        pointer-events: none !important;
    }

    .jar-footer__brand-actions,
    .jar-footer__quick-actions,
    .jar-footer__legal-row {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: .72rem !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    .jar-footer__brand-actions a,
    .jar-footer__quick-actions a,
    .jar-footer__legal-row a {
        width: auto !important;
        min-width: min(100%, 150px) !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .jar-footer__contact-card {
        padding: clamp(1.25rem, 5vw, 1.65rem) !important;
        border-radius: 28px !important;
    }

    .jar-footer__panel-title {
        width: 100% !important;
        text-align: center !important;
        margin-inline: auto !important;
    }

    .jar-footer__phone {
        width: fit-content !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .jar-footer__contact-card p {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .jar-footer__legal-row {
        padding-top: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, .10) !important;
    }

    .jar-footer__legal-row a {
        min-width: min(100%, 210px) !important;
    }

    .jar-footer__credit {
        padding-top: .75rem !important;
        border-top: 1px solid rgba(255, 255, 255, .08) !important;
    }

    .jar-footer__credit a {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        letter-spacing: .10em !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 390px) {
    .jar-footer__inner {
        width: min(100% - 1rem, 360px) !important;
    }

    .jar-footer__main-logo {
        width: min(260px, 76vw) !important;
    }

    .jar-footer__brand-actions a,
    .jar-footer__quick-actions a {
        min-width: 132px !important;
    }

    .jar-footer__legal-row a {
        min-width: min(100%, 200px) !important;
    }
}

/* JAR MOBILE FOOTER CENTERING END */

/* JAR SITEWIDE MOBILE POLISH START */

/*
   Sitewide mobile discipline:
   - Match the new homepage mobile feel.
   - Center page content.
   - Keep all cards/forms/grids inside a clean mobile frame.
   - Prevent horizontal overflow.
   - Do not alter routing, PHP helpers, or JavaScript.
*/

@media (max-width: 600px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #08090a !important;
    }

    body {
        min-width: 0 !important;
    }

    #main-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #main-content > section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /*
       Standard mobile content frame for all non-homepage pages.
       The homepage keeps its custom hero frame.
    */
    #main-content > section:not(.jar-custom-home):not(.jar-custom-system) > .container,
    #main-content > section:not(.jar-custom-home):not(.jar-custom-system) > [class*="container"],
    .page-hero > .container,
    .products-page > .container,
    .store-page > .container,
    .contact-page > .container,
    .cart-page > .container,
    .legal-page > .container,
    .tutorials-page > .container,
    .product-detail-page > .container {
        width: min(100% - 1.25rem, 390px) !important;
        max-width: 390px !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }

    /*
       Page hero rhythm.
    */
    .page-hero,
    .compact-hero,
    .product-detail-hero,
    .tutorial-detail-hero,
    [class*="page-hero"],
    [class*="detail-hero"] {
        text-align: center !important;
        padding: clamp(2.75rem, 10vw, 4rem) 0 clamp(2rem, 8vw, 3rem) !important;
    }

    .page-hero h1,
    .compact-hero h1,
    .product-detail-hero h1,
    .tutorial-detail-hero h1,
    [class*="page-hero"] h1,
    [class*="detail-hero"] h1 {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        font-size: clamp(2.55rem, 13.5vw, 4.2rem) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
        text-wrap: balance !important;
        overflow-wrap: normal !important;
    }

    .page-hero p,
    .compact-hero p,
    .product-detail-hero p,
    .tutorial-detail-hero p,
    [class*="page-hero"] p,
    [class*="detail-hero"] p {
        max-width: 34rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        line-height: 1.65 !important;
    }

    /*
       Grids become centered single-column stacks.
    */
    .grid,
    .products-grid,
    .product-grid,
    .store-grid,
    .tutorial-grid,
    .cart-grid,
    .contact-grid,
    .legal-grid,
    .jar-custom-system__grid,
    [class*="card-grid"],
    [class*="product-grid"],
    [class*="store-grid"],
    [class*="tutorial-grid"],
    [class*="contact-grid"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: clamp(1rem, 4vw, 1.35rem) !important;
    }

    /*
       Cards/forms/lists stay neat and centered.
    */
    .product-card,
    .store-product-card,
    .tutorial-card,
    .cart-card,
    .contact-card,
    .legal-card,
    .form-card,
    .panel,
    .card,
    article,
    form,
    [class*="product-card"],
    [class*="store-product-card"],
    [class*="tutorial-card"],
    [class*="cart-card"],
    [class*="contact-card"],
    [class*="legal-card"],
    [class*="form-card"] {
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
       Product/catalog images should feel intentional, not stretched.
    */
    .product-card img,
    .store-product-card img,
    .product-detail img,
    .cart-card img,
    [class*="product-card"] img,
    [class*="store-product-card"] img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
       Form controls fill the mobile frame cleanly.
    */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
    }

    form input,
    form select,
    form textarea {
        width: 100% !important;
    }

    /*
       Action rows become controlled button stacks.
    */
    .actions,
    .button-row,
    .form-actions,
    .product-actions,
    .cart-actions,
    .hero-actions,
    [class*="actions"] {
        width: 100% !important;
        max-width: 390px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
        justify-items: stretch !important;
    }

    .button,
    .button-primary,
    .button-secondary,
    .product-actions a,
    .cart-actions a,
    .form-actions button,
    .form-actions a,
    [class*="button"] {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /*
       Legal/content pages should read like clean mobile documents.
    */
    .legal-page,
    .legal-content,
    .policy-content,
    .terms-content,
    .content-page,
    [class*="legal"],
    [class*="policy"],
    [class*="terms"] {
        text-align: center !important;
    }

    .legal-page p,
    .legal-content p,
    .policy-content p,
    .terms-content p,
    .content-page p,
    .legal-page li,
    .legal-content li,
    .policy-content li,
    .terms-content li {
        text-align: left !important;
        line-height: 1.68 !important;
    }

    .legal-page h1,
    .legal-page h2,
    .legal-page h3,
    .legal-content h1,
    .legal-content h2,
    .legal-content h3,
    .policy-content h1,
    .policy-content h2,
    .policy-content h3,
    .terms-content h1,
    .terms-content h2,
    .terms-content h3 {
        text-align: center !important;
        text-wrap: balance !important;
    }

    /*
       Mobile spacing.
    */
    section + section {
        margin-top: 0 !important;
    }

    .container {
        max-width: 390px !important;
    }

    /*
       Prevent accidental off-screen elements.
    */
    img,
    video,
    iframe,
    table,
    pre,
    code {
        max-width: 100% !important;
    }

    table {
        display: block !important;
        overflow-x: auto !important;
    }

    pre {
        overflow-x: auto !important;
    }
}

@media (max-width: 390px) {
    #main-content > section:not(.jar-custom-home):not(.jar-custom-system) > .container,
    #main-content > section:not(.jar-custom-home):not(.jar-custom-system) > [class*="container"],
    .page-hero > .container,
    .products-page > .container,
    .store-page > .container,
    .contact-page > .container,
    .cart-page > .container,
    .legal-page > .container,
    .tutorials-page > .container,
    .product-detail-page > .container,
    .grid,
    .products-grid,
    .product-grid,
    .store-grid,
    .tutorial-grid,
    .cart-grid,
    .contact-grid,
    .legal-grid,
    [class*="card-grid"],
    [class*="product-grid"],
    [class*="store-grid"],
    [class*="tutorial-grid"],
    [class*="contact-grid"],
    .actions,
    .button-row,
    .form-actions,
    .product-actions,
    .cart-actions,
    .hero-actions,
    [class*="actions"],
    .product-card,
    .store-product-card,
    .tutorial-card,
    .cart-card,
    .contact-card,
    .legal-card,
    .form-card,
    .panel,
    .card,
    article,
    form {
        width: min(100% - 1rem, 360px) !important;
        max-width: 360px !important;
    }

    .page-hero h1,
    .compact-hero h1,
    .product-detail-hero h1,
    .tutorial-detail-hero h1,
    [class*="page-hero"] h1,
    [class*="detail-hero"] h1 {
        font-size: clamp(2.35rem, 13vw, 3.55rem) !important;
    }
}

/* JAR SITEWIDE MOBILE POLISH END */

/* JAR PRODUCT SHARE BUTTONS START */

.jar-product-share-card {
    position: relative !important;
}

.jar-product-share-wrap {
    position: relative !important;
    z-index: 8 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: .85rem auto 0 !important;
}

.jar-product-share {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    padding: .62rem 1rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(89, 202, 255, .58) !important;
    background:
        linear-gradient(135deg, rgba(35, 167, 255, .25), rgba(0, 255, 169, .10)),
        rgba(255, 255, 255, .055) !important;
    color: #ffffff !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}

.jar-product-share::before {
    content: "↗" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    color: #59caff !important;
}

.jar-product-share:hover,
.jar-product-share:focus-visible {
    transform: translateY(-1px) !important;
    border-color: rgba(0, 255, 169, .72) !important;
    background:
        linear-gradient(135deg, rgba(35, 167, 255, .32), rgba(0, 255, 169, .16)),
        rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .34),
        0 0 22px rgba(35, 167, 255, .16),
        inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
}

.jar-product-share-menu {
    position: absolute !important;
    top: calc(100% + .55rem) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-4px) !important;
    min-width: 178px !important;
    padding: .55rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .4rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background:
        linear-gradient(135deg, rgba(25, 27, 30, .98), rgba(5, 7, 9, .96)) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .45),
        inset 0 0 0 1px rgba(255, 255, 255, .045) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease !important;
}

.jar-product-share-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.jar-product-share-menu a,
.jar-product-share-menu button {
    width: 100% !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .58rem .8rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .055) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: .75rem !important;
    font-weight: 850 !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.jar-product-share-menu a:hover,
.jar-product-share-menu button:hover,
.jar-product-share-menu a:focus-visible,
.jar-product-share-menu button:focus-visible {
    background: rgba(35, 167, 255, .18) !important;
    border-color: rgba(89, 202, 255, .38) !important;
}

.jar-product-detail-share {
    max-width: 260px !important;
    justify-content: flex-start !important;
    margin-top: 1rem !important;
}

@media (max-width: 600px) {
    .jar-product-share-wrap {
        margin-top: .95rem !important;
    }

    .jar-product-share {
        width: min(100%, 210px) !important;
        min-height: 40px !important;
        font-size: .74rem !important;
    }

    .jar-product-share-menu {
        min-width: min(230px, 88vw) !important;
    }

    .jar-product-detail-share {
        max-width: 100% !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .jar-product-detail-share .jar-product-share {
        width: 100% !important;
    }
}

/* JAR PRODUCT SHARE BUTTONS END */

/* JAR PRODUCT SHARE MENU VISIBILITY FIX START */

.jar-product-share-menu.is-floating {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2147483000 !important;
    min-width: 210px !important;
    max-width: calc(100vw - 28px) !important;
    padding: .6rem !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(89, 202, 255, .32) !important;
    background:
        linear-gradient(135deg, rgba(18, 22, 26, .98), rgba(5, 7, 9, .98)) !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .68),
        0 0 0 1px rgba(255,255,255,.045) inset,
        0 0 34px rgba(35, 167, 255, .18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease !important;
}

.jar-product-share-menu.is-floating.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

.jar-product-share-menu.is-floating.opens-up {
    transform: translateY(-100%) !important;
}

.jar-product-share-menu.is-floating.opens-up.is-open {
    transform: translateY(-100%) !important;
}

.jar-product-share-menu.is-floating a,
.jar-product-share-menu.is-floating button {
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: .68rem .85rem !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .065) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    cursor: pointer !important;
    font-family: inherit !important;
    text-align: center !important;
}

.jar-product-share-menu.is-floating a:hover,
.jar-product-share-menu.is-floating button:hover,
.jar-product-share-menu.is-floating a:focus-visible,
.jar-product-share-menu.is-floating button:focus-visible {
    background: rgba(35, 167, 255, .20) !important;
    border-color: rgba(89, 202, 255, .46) !important;
}

.jar-product-share-card,
.product-card,
.store-product-card,
[class*="product-card"] {
    overflow: visible !important;
}

@media (max-width: 600px) {
    .jar-product-share-menu.is-floating {
        width: min(250px, calc(100vw - 28px)) !important;
    }
}

/* JAR PRODUCT SHARE MENU VISIBILITY FIX END */

/* JAR PRODUCT DETAIL HERO SPACE FIX START */

/*
   Product detail pages had too much empty vertical space before the product.
   This keeps the premium hero feel but brings the product content up.
*/

.product-detail-hero {
    min-height: auto !important;
    padding-top: clamp(2.75rem, 6vw, 5rem) !important;
    padding-bottom: clamp(3rem, 6vw, 5rem) !important;
    display: flex !important;
    align-items: center !important;
}

.product-detail-grid {
    min-height: auto !important;
    align-items: center !important;
    gap: clamp(2rem, 5vw, 4rem) !important;
}

.product-detail-media,
.product-detail-copy {
    align-self: center !important;
}

.product-detail-copy {
    margin-top: 0 !important;
}

.product-detail-media img {
    max-height: min(620px, 68vh) !important;
    object-fit: contain !important;
}

@media (min-width: 901px) {
    .product-detail-hero {
        padding-top: clamp(3.25rem, 5.5vw, 5.5rem) !important;
    }

    .product-detail-grid {
        transform: translateY(-2.5rem) !important;
    }
}

@media (max-width: 900px) {
    .product-detail-hero {
        padding-top: clamp(2rem, 8vw, 3rem) !important;
        padding-bottom: clamp(2.5rem, 9vw, 4rem) !important;
    }

    .product-detail-grid {
        width: min(100% - 1.25rem, 390px) !important;
        margin-inline: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        transform: none !important;
    }

    .product-detail-media {
        margin-top: 0 !important;
    }

    .product-detail-media img {
        max-height: 360px !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    .product-detail-copy {
        text-align: center !important;
    }
}

@media (max-width: 390px) {
    .product-detail-hero {
        padding-top: 1.75rem !important;
    }

    .product-detail-media img {
        max-height: 320px !important;
    }
}

/* JAR PRODUCT DETAIL HERO SPACE FIX END */