:root {
    --evo-navy: #032039;
    --evo-blue: #063756;
    --evo-teal: #3f9fad;
    --evo-lime: #9dbb2f;
    --evo-surface: #ffffff;
    --background: 0 0% 100%;
    --foreground: 208 90% 12%;
    --card: 0 0% 100%;
    --card-foreground: 208 90% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 208 90% 12%;
    --primary: 187 77% 25%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 100%;
    --secondary-foreground: 203 87% 18%;
    --muted: 0 0% 100%;
    --muted-foreground: 203 22% 40%;
    --accent: 175 49% 91%;
    --accent-foreground: 203 87% 18%;
    --success: 73 60% 30%;
    --success-foreground: 0 0% 100%;
    --border: 195 24% 84%;
    --input: 195 24% 84%;
    --ring: 188 74% 32%;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 208 90% 12%;
    --sidebar-primary: 203 87% 18%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 175 49% 91%;
    --sidebar-accent-foreground: 203 87% 18%;
    --sidebar-border: 195 24% 84%;
    --sidebar-ring: 188 74% 32%;
}

.dark {
    --background: 208 90% 7%;
    --foreground: 195 29% 97%;
    --card: 203 56% 12%;
    --card-foreground: 195 29% 97%;
    --popover: 203 56% 12%;
    --popover-foreground: 195 29% 97%;
    --primary: 188 47% 52%;
    --primary-foreground: 208 90% 7%;
    --secondary: 203 56% 16%;
    --secondary-foreground: 195 29% 97%;
    --muted: 203 40% 16%;
    --muted-foreground: 195 18% 68%;
    --accent: 188 47% 18%;
    --accent-foreground: 175 49% 85%;
    --success: 73 60% 46%;
    --success-foreground: 208 90% 7%;
    --border: 203 35% 23%;
    --input: 203 35% 23%;
    --ring: 188 47% 52%;
    --sidebar-background: 208 90% 7%;
    --sidebar-foreground: 195 29% 97%;
    --sidebar-primary: 188 47% 52%;
    --sidebar-primary-foreground: 208 90% 7%;
    --sidebar-accent: 203 56% 16%;
    --sidebar-accent-foreground: 195 29% 97%;
    --sidebar-border: 203 35% 23%;
    --sidebar-ring: 188 47% 52%;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.brand,
.text-link {
    color: var(--evo-blue);
}

.button {
    background: var(--evo-blue);
}

.hero {
    background: #fff;
}

.catalog-filters {
    background: #fff;
}

.product-card,
.category-grid article,
.testimonial-grid figure {
    border-color: #c9d5dc;
}

.product-image-placeholder,
.product-reference-image {
    aspect-ratio: 2 / 3;
    background-color: #fff;
    width: 100%;
}

.product-image-placeholder {
    align-items: center;
    color: hsl(var(--muted-foreground));
    display: flex;
    justify-content: center;
    padding: 1rem;
    text-align: center;
}

.product-reference-image {
    background-image: var(--product-sheet);
    background-position: var(--product-x) var(--product-y);
    background-repeat: no-repeat;
    background-size: var(--product-size);
    margin-inline: auto;
    max-width: 24rem;
}

.product-reference-image--pen {
    aspect-ratio: 2 / 3;
    background-image: none;
    overflow: hidden;
    position: relative;
}

.product-reference-image--pen::before {
    background-image: var(--product-sheet);
    background-position: var(--product-x) var(--product-y);
    background-repeat: no-repeat;
    background-size: var(--product-size);
    content: "";
    height: 40%;
    left: -20%;
    position: absolute;
    top: 30%;
    transform: rotate(90deg) scale(.9);
    width: 140%;
}

.home-bestsellers { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
.home-bestsellers h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--evo-navy); margin-bottom: 2rem; }
.home-bestsellers__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.home-bestsellers__all { display: flex; align-items: center; justify-content: center; gap: 1rem; width: min(100%, 32rem); min-height: 3.5rem; margin: 2rem auto 0; padding: 1rem 1.5rem; border-radius: .6rem; background: hsl(var(--primary)); color: #fff; font-size: 1.125rem; font-weight: 600; text-align: center; }
.home-bestsellers__all:hover { background: var(--evo-blue); }
.home-bestsellers__all:focus-visible { outline: 3px solid var(--evo-lime); outline-offset: 4px; }
@media (max-width: 900px) { .home-bestsellers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .home-bestsellers { padding: 2rem 1rem; } .home-bestsellers__grid { gap: .75rem; } }

.product-card { height: 100%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e2e8eb; border-radius: 1rem; background: #fff; box-shadow: 0 2px 4px #03203908; }
.product-card__visual { position: relative; overflow: hidden; }
.product-card__visual .product-reference-image { transform: scale(.6375); transform-origin: center; }
.product-card__visual .product-reference-image--generated { transform: scale(.9075); }
.product-card__visual .product-image-placeholder { aspect-ratio: 2 / 3; }
.product-card__badge { position: absolute; top: .8rem; left: .8rem; z-index: 1; padding: .3rem .75rem; border-radius: 2rem; background: #0f6772; color: #fff; font-size: .8rem; font-weight: 600; }
.product-card__actions { position: absolute; top: .75rem; right: .65rem; display: grid; gap: .6rem; }
.product-card__actions button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--evo-navy); box-shadow: 0 3px 8px #03203914; font-size: 1.5rem; }
.product-card__actions .site-icon { width: 1.3rem; height: 1.3rem; }
.product-card__body { padding: 1rem; display: flex; flex: 1; flex-direction: column; gap: .75rem; }
.product-card__body > a { display: block; width: 100%; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.product-card h3 {
    display: block !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: ellipsis;
    font-size: 1.125rem;
    font-weight: 700;
    min-height: 3rem;
    line-height: 1.4;
    color: var(--evo-navy);
    margin: 0;
    width: 100%;
}
.product-card__metrics { font-size: .85rem; line-height: 1.6; margin-top: 0; }
.product-card__metrics span, .product-card__description { color: #657681; }
.product-card__metrics .product-card__stars { color: #fbbf24; letter-spacing: .05em; }
.product-card__description {
    display: block !important;
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-size: .9rem;
    line-height: 1.5;
    min-height: 2.7rem;
    overflow: hidden !important;
    word-break: break-word;
    text-overflow: ellipsis;
}
.product-card__price { color: #0f6772; font-weight: 700; font-size: 1.2rem; }
.product-previous-price { display: block; color: #757575; font-size: 1rem; font-weight: 400; }
.product-card__price-note { color: #657681; font-size: .72rem; line-height: 1.35; margin-top: -.55rem; }
.product-card__cashback { border: 1px solid #c9dedb; border-radius: .75rem; padding: .75rem; background: #f1f8f7; color: #0f6772; display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.product-card__cashback > span { font-size: 1.5rem; }
.product-card__cashback strong { display: block; }
.product-card__cart { margin-top: auto; padding-top: .25rem; }
.product-card__quantity { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .25rem 0 .75rem; }
.product-card__quantity button { width: 2.5rem; height: 2.5rem; border: 1px solid #e2e8eb; border-radius: 50%; font-size: 1.5rem; }
.product-card__quantity input { width: 3rem; text-align: center; background: transparent; border: 0; font: inherit; appearance: textfield; }
.product-card__quantity input::-webkit-inner-spin-button, .product-card__quantity input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.product-card__add { display: flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; gap: .65rem; border-radius: .5rem; background: hsl(var(--primary)); color: #fff; font-weight: 600; padding: .65rem; }
.product-card button { cursor: pointer; }
.product-card button:disabled { opacity: .4; cursor: default; }
.product-card :focus-visible { outline: 3px solid var(--evo-lime); outline-offset: 2px; }
@media (max-width: 480px) { .product-card__body { padding: .65rem; gap: .75rem; } .product-card__badge { top: .4rem; left: .4rem; font-size: .6rem; padding: .2rem .4rem; } .product-card__actions { top: 2rem; right: .3rem; gap: .3rem; } .product-card__actions button { width: 2rem; height: 2rem; } .product-card h3 { font-size: .95rem; } .product-card__price { font-size: 1rem; } .product-card__metrics { font-size: .75rem; } }

.catalog-view-switcher { display: flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid #d5e1e5; border-radius: .65rem; background: #f6f9fa; }
.catalog-view-switcher form { margin: 0; }
.catalog-view-switcher button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: .45rem; background: transparent; color: #536773; cursor: pointer; font-size: 1.25rem; }
.catalog-view-switcher button[aria-pressed="true"] { background: #fff; color: var(--evo-navy); box-shadow: 0 1px 4px #03203918; }
.catalog-view-switcher button:focus-visible { outline: 3px solid var(--evo-lime); outline-offset: 2px; }
.catalog-results { flex: 1; min-width: 0; display: grid; gap: 1rem; }
.catalog-results--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-results--list { grid-template-columns: 1fr; }
.catalog-results--list .product-card { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); }
.catalog-results--list .product-card__visual .product-reference-image,
.catalog-results--list .product-card__visual .product-image-placeholder { min-height: 100%; }
.catalog-results--list .product-card h3 { min-height: 0; }

.selection-page__back { color: #0f6772; font-weight: 700; text-decoration: none; }
.selection-page__heading { max-width: 46rem; margin: 1.5rem 0 2rem; }
.selection-page__heading h1 { color: var(--evo-navy); margin-bottom: .75rem; }
.selection-page__heading > p:last-child { color: #5c6d78; }
.selection-page__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.selection-page__empty { padding: clamp(2rem, 8vw, 5rem); border: 1px solid #d5e1e5; border-radius: 1rem; background: #f8fbfb; text-align: center; }
.selection-page__empty h2 { margin-top: 0; color: var(--evo-navy); }

.product-detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.product-detail-actions form { margin: 0; }
.product-detail-actions button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .65rem .9rem; border: 1px solid #b9ced3; border-radius: .55rem; background: #fff; color: var(--evo-navy); cursor: pointer; font: inherit; font-weight: 700; }
.product-detail-actions button:hover { border-color: #0f6772; background: #f1f8f7; }
.product-detail-actions button:focus-visible { outline: 3px solid var(--evo-lime); outline-offset: 2px; }

@media (max-width: 1100px) {
    .catalog-results--grid,
    .selection-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .catalog-results--grid,
    .selection-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalog-results--list .product-card { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .catalog-results--list .product-card { display: flex; }
}

section[aria-roledescription="carousel"],
.home-hero {
    width: calc(100% - 4rem);
    max-width: 1336px;
    margin: 1.5rem auto 0;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.home-hero--mobile {
    display: none;
}

.home-hero .hero-banner-frame {
    aspect-ratio: 5 / 2 !important;
    max-height: 27.5rem;
}

.home-hero .hero-banner-frame img {
    object-fit: contain;
}

.home-hero picture,
.home-hero picture img {
    display: block;
    height: 100%;
    width: 100%;
}

.home-hero__slide {
    display: block;
}

.home-hero__slide[aria-hidden="true"] {
    pointer-events: none;
}

.home-hero__control,
.home-hero__dot {
    cursor: pointer;
}

.home-hero__control {
    border: 0;
    border-radius: 999px;
    min-height: 2.5rem;
    min-width: 2.5rem;
}

.home-hero__dot {
    background: currentColor;
    border: 0;
    border-radius: 999px;
    height: .5rem;
    min-width: .5rem;
    padding: 0;
    width: .5rem;
}

.home-hero__dot.is-active {
    width: 1.5rem;
}

.home-hero__control:focus-visible,
.home-hero__dot:focus-visible,
.home-hero__slide:focus-visible {
    outline: 3px solid var(--evo-lime);
    outline-offset: 2px;
}

.home-hero__track {
    touch-action: pan-y;
}

.home-hero__control {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.home-hero__control--previous {
    left: .75rem;
}

.home-hero__control--next {
    right: .75rem;
}

.home-hero__control--toggle {
    bottom: .75rem;
    font-size: .85rem;
    font-weight: 700;
    right: .75rem;
    top: auto;
    transform: none;
}

.home-hero__dots {
    align-items: center;
    bottom: .75rem;
    display: flex;
    gap: .5rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 10;
}

@media (max-width: 767px) {
    section[aria-roledescription="carousel"],
    .home-hero {
        width: calc(100% - 2rem);
        margin-top: 1rem;
    }

    .home-hero--desktop {
        display: none;
    }

    .home-hero--mobile {
        display: block;
    }

    .home-hero--mobile .hero-banner-frame {
        aspect-ratio: 1 / 1 !important;
        max-height: none !important;
    }
}

@media (max-width: 480px) {
    section[aria-roledescription="carousel"],
    .home-hero {
        width: calc(100% - 2rem);
        margin-top: 1rem;
    }
}

.home-testimonials {
    background: #f3f7f8;
    padding: clamp(3rem, 6vw, 5rem) 1rem;
}

.home-testimonials__inner {
    margin: 0 auto;
    max-width: 58rem;
}

.home-testimonials__heading {
    margin: 0 auto 2rem;
    max-width: 44rem;
    text-align: center;
}

.home-testimonials__heading h2 {
    color: var(--evo-navy);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 750;
    margin-bottom: .5rem;
}

.home-testimonials__heading > p {
    color: #5c6d78;
}

.home-testimonials__heading .home-testimonials__disclaimer {
    background: #fff;
    border: 1px solid #d5e1e5;
    border-radius: .65rem;
    color: #536773;
    display: inline-block;
    font-size: .78rem;
    line-height: 1.45;
    margin-top: 1rem;
    padding: .55rem .8rem;
}

.home-testimonials__track {
    display: grid;
    gap: 1rem;
}

.home-testimonials__slide {
    background: #fff;
    border: 1px solid #dce6e9;
    border-radius: 1rem;
    box-shadow: 0 12px 30px #0320390d;
    margin: 0;
    min-width: 0;
    padding: clamp(1.4rem, 4vw, 2.25rem);
}

.home-testimonials__slide blockquote {
    color: var(--evo-navy);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
}

.home-testimonials__slide figcaption {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
}

.home-testimonials__slide figcaption strong {
    color: var(--evo-navy);
}

.home-testimonials__slide figcaption span {
    color: #627681;
    font-size: .9rem;
}

.home-testimonials__stars {
    color: #d58d19;
    font-size: 1.15rem;
    letter-spacing: .08em;
}

.home-testimonials__carousel.is-enhanced .home-testimonials__viewport {
    overflow: hidden;
}

.home-testimonials__carousel.is-enhanced .home-testimonials__track {
    display: flex;
    gap: 0;
    transition: transform .5s ease;
}

.home-testimonials__carousel.is-enhanced .home-testimonials__slide {
    flex: 0 0 100%;
}

.home-testimonials__controls {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    gap: 1rem;
}

.home-testimonials__controls button {
    align-items: center;
    background: var(--evo-navy);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1.2rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.home-testimonials__controls button:hover {
    background: #0f6772;
}

.home-testimonials__controls button:focus-visible {
    outline: 3px solid var(--evo-lime);
    outline-offset: 3px;
}

.home-testimonials__controls p {
    color: #536773;
    min-width: 4rem;
    text-align: center;
}

@media (min-width: 768px) {
    .home-testimonials__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-testimonials__carousel.is-enhanced .home-testimonials__track {
        transition: none;
    }
}

/* Keep progressive controls hidden until JavaScript enables them. */
[data-home-hero] [data-home-hero-control][hidden] {
    display: none !important;
}