/* =============================================================
   MiliMartinez — Modern e-commerce shell
   ------------------------------------------------------------
   - Ported from the upstream CopiaNet stylesheet of the same
     name. Class names and CSS variable names are kept 1:1 with
     CopiaNet so future improvements port cleanly; only the color
     values are reassigned to MiliMartinez's neutral palette
     (black / white / grey).
   - All new classes prefixed `cn-` to avoid colliding with the
     legacy stylesheet (`app_copianet.css`) and Bootstrap 4.
   - Public shell only. The admin sidebar inherits the
     `cn-theme` variables but otherwise keeps its existing UI.
   ============================================================= */

:root,
.cn-theme {
    /* Brand — neutral palette for MiliMartinez.
       Variable names retained from CopiaNet for class compatibility.
       Read them semantically:
         --cn-yellow*  → "brand surface" tokens (dark fills, badges).
         --cn-orange*  → "accent / primary CTA" tokens. */
    --cn-yellow:        #1A1A1A;
    --cn-yellow-bright: #F9F9DD;  /* main brand surface (sidebar, buttons, drawer) — mirrors CopiaNet --cn-yellow-bright */
    --cn-yellow-accent: #E1E15B;  /* khaki accent (active nav, header rule, chips) — MiliMartinez-specific; CopiaNet folds this role into --cn-orange */
    --cn-yellow-soft:   #F5F5F5;
    --cn-orange:        #000000;
    --cn-orange-hover:  #333333;
    --cn-orange-soft:   #F5F5F5;

    /* Neutrals */
    --cn-ink:           #111418;
    --cn-ink-soft:      #3A3F47;
    --cn-ink-mute:      #6B7280;
    --cn-line:          #ECEEF1;
    --cn-line-strong:   #D9DCE1;
    --cn-bg:            #FFFFFF;
    --cn-bg-soft:       #FAFBFC;
    --cn-bg-soft-2:     #F2F4F7;

    /* Effects */
    --cn-radius-sm:     8px;
    --cn-radius:        12px;
    --cn-radius-lg:     16px;
    --cn-radius-pill:   999px;

    --cn-shadow-sm:     0 1px 2px rgba(17, 20, 24, 0.04);
    --cn-shadow:        0 1px 2px rgba(17, 20, 24, 0.04), 0 6px 16px rgba(17, 20, 24, 0.06);
    --cn-shadow-lg:     0 8px 24px rgba(17, 20, 24, 0.08), 0 24px 48px rgba(17, 20, 24, 0.10);

    --cn-ease:          cubic-bezier(0.16, 1, 0.3, 1);
    --cn-fast:          140ms;
    --cn-medium:        220ms;

    --cn-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Layout tokens */
    --cn-header-h:      88px;
    --cn-promo-h:       32px;
    --cn-cats-h:        48px;
    --cn-content-max:   1280px;
}

/* ============================================================
   Public shell scope
   ------------------------------------------------------------
   Note: the global stylesheet sets `app { display:flex; flex-direction: row; }`
   at >=768px (legacy sidebar layout). We force the public shell to fill
   the available width regardless of the parent flex direction.
   ============================================================ */

.cn-public-shell {
    font-family: var(--cn-font);
    color: var(--cn-ink);
    background: var(--cn-bg);
    width: 100%;
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cn-public-shell main {
    flex: 1;
    width: 100%;
    background: var(--cn-bg);
}

.cn-public-shell .cn-content {
    max-width: var(--cn-content-max);
    margin: 0 auto;
    padding: 24px 16px;
}

/* ============================================================
   Promo strip (very top, brand dark)
   ============================================================ */

.cn-promo {
    height: var(--cn-promo-h);
    background: var(--cn-yellow);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.cn-promo .cn-promo-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-promo i { font-size: 13px; }

@media (max-width: 600px) {
    .cn-promo { font-size: 12px; padding: 0 12px; text-align: center; }
}

/* ============================================================
   Sticky header
   ============================================================ */

.cn-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--cn-bg);
    border-bottom: 1px solid var(--cn-line);
    transition: box-shadow var(--cn-medium) var(--cn-ease);
}

.cn-header.cn-header--scrolled {
    box-shadow: 0 2px 8px rgba(17, 20, 24, 0.06);
}

.cn-header-inner {
    height: var(--cn-header-h);
    max-width: var(--cn-content-max);
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

/* Brand + hamburger wrapper. */
.cn-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Brand */
.cn-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.cn-brand img {
    height: 76px;
    width: auto;
    display: block;
    transition: transform var(--cn-fast) var(--cn-ease);
}

@media (max-width: 600px) {
    /* En mobile el header es un poco más compacto. */
    .cn-brand img { height: 60px; }
}

/* ===== Logo del hero de la landing =====
   El PNG tiene mucho padding transparente arriba/abajo (el logo ocupa sólo la
   banda central). Con object-fit:cover y un aspect-ratio más ancho que el
   nativo (1536x1024) recortamos ese padding y mostramos el logo grande y
   ajustado, sin espacio en blanco. */
.cn-landing-logo {
    display: block;
    width: 460px;
    max-width: 90%;
    aspect-ratio: 1536 / 600;
    object-fit: cover;
    object-position: center;
    margin: 0 auto 4px;
}

@media (max-width: 600px) {
    .cn-landing-logo { width: 320px; }
}

.cn-brand:hover img { transform: scale(1.03); }

/* ===== Menú horizontal de escritorio (MiProdePro) =====
   Reemplaza al viejo megamenú de categorías del e-commerce. Vive en la
   columna central del header. Se oculta en mobile (usa el drawer). */
.cn-topnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cn-topnav__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cn-ink, #1a1a1a);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cn-fast) var(--cn-ease), color var(--cn-fast) var(--cn-ease);
}

.cn-topnav__link:hover {
    background-color: rgba(0, 0, 0, .06);
}

.cn-topnav__link.active {
    color: #fff;
    background-color: var(--cn-primary, #1b6d3a);
}

@media (max-width: 900px) {
    /* En mobile el menú vive en el drawer del hamburguesa. */
    .cn-topnav { display: none; }
}

/* Search */
.cn-search {
    display: flex;
    align-items: center;
    height: 42px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background: var(--cn-bg-soft-2);
    border: 1px solid transparent;
    border-radius: var(--cn-radius-pill);
    padding: 0 6px 0 16px;
    transition: background var(--cn-fast) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease),
                box-shadow var(--cn-fast) var(--cn-ease);
}

.cn-search:focus-within {
    background: var(--cn-bg);
    border-color: var(--cn-ink);
    box-shadow: 0 0 0 4px rgba(17, 20, 24, 0.12);
}

.cn-search i.cn-search__icon {
    color: var(--cn-ink-mute);
    font-size: 14px;
    margin-right: 10px;
}

.cn-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 14px;
    color: var(--cn-ink);
    height: 100%;
    min-width: 0;
}

.cn-search input::placeholder {
    color: var(--cn-ink-mute);
}

.cn-search__submit {
    height: 32px;
    padding: 0 18px;
    border: none;
    border-radius: var(--cn-radius-pill);
    background: var(--cn-orange);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                transform var(--cn-fast) var(--cn-ease);
    flex-shrink: 0;
}

.cn-search__submit:hover { background: var(--cn-orange-hover); }
.cn-search__submit:active { transform: scale(0.97); }

/* Header actions cluster */
.cn-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cn-icon-btn {
    --size: 42px;
    height: var(--size);
    min-width: var(--size);
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius);
    color: var(--cn-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-icon-btn i { font-size: 18px; }

.cn-icon-btn:hover,
.cn-icon-btn:focus-visible {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
    outline: none;
}

.cn-icon-btn__label {
    font-size: 13px;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
}
.cn-icon-btn__label small {
    display: block;
    font-size: 11px;
    color: var(--cn-ink-mute);
    font-weight: 400;
}

@media (max-width: 900px) {
    .cn-icon-btn__label { display: none; }
}

/* Cart badge */
.cn-cart {
    position: relative;
}

/* Anchor the badge to the icon (not the whole button) so it sits at the
   icon's top-right corner instead of overlapping the glyph — keeps both the
   cart icon and the count legible, with or without the "Mi Carrito" label. */
.cn-cart__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cn-cart__badge {
    position: absolute;
    top: -8px;
    left: calc(100% - 6px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--cn-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: var(--cn-radius-pill);
    border: 2px solid var(--cn-bg);
    box-sizing: border-box;
    transform: scale(1);
    transition: transform var(--cn-medium) var(--cn-ease);
}

/* Desktop shows the "Mi Carrito" label to the right of the icon, so anchoring
   the badge to the icon corner would overlap that text. Float it at the whole
   button's top-right corner instead (past the label) — icon and count stay
   separate and fully legible. Below 901px the label is hidden, so the
   icon-anchored placement above applies. */
@media (min-width: 901px) {
    .cn-cart__icon { position: static; }
    .cn-cart__badge {
        top: 4px;
        left: auto;
        right: 4px;
    }
}

.cn-cart__badge--bump {
    animation: cn-bump 360ms var(--cn-ease);
}

@keyframes cn-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Hamburger (mobile) */
.cn-hamburger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius);
    color: var(--cn-ink);
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease);
}

.cn-hamburger:hover { background: var(--cn-bg-soft-2); }
.cn-hamburger i { font-size: 20px; }

/* Account dropdown */
.cn-dropdown {
    position: relative;
}

.cn-dropdown__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--cn-bg);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius);
    box-shadow: var(--cn-shadow-lg);
    padding: 8px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--cn-fast) var(--cn-ease),
                transform var(--cn-fast) var(--cn-ease);
    z-index: 1100;
}

.cn-dropdown.cn-dropdown--open .cn-dropdown__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cn-dropdown__header {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--cn-line);
    margin-bottom: 6px;
}
.cn-dropdown__header strong { display: block; font-size: 14px; color: var(--cn-ink); }
.cn-dropdown__header small  { display: block; font-size: 12px; color: var(--cn-ink-mute); }

.cn-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-dropdown__item i {
    font-size: 15px;
    color: var(--cn-ink-mute);
    width: 18px;
    text-align: center;
}

.cn-dropdown__item:hover {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}

.cn-dropdown__item--danger { color: #C72525; }
.cn-dropdown__item--danger i { color: #C72525; }
.cn-dropdown__item--danger:hover { background: #FEEFEF; color: #C72525; }

.cn-dropdown__cta {
    display: block;
    margin: 6px;
    padding: 10px 14px;
    background: var(--cn-orange);
    color: #fff !important;
    border-radius: var(--cn-radius-sm);
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--cn-fast) var(--cn-ease);
}
.cn-dropdown__cta:hover { background: var(--cn-orange-hover); color: #fff !important; }

/* ============================================================
   Categories bar (desktop megamenu)
   ============================================================ */

.cn-cats-bar {
    background: var(--cn-bg);
    border-bottom: 1px solid var(--cn-line);
}

.cn-cats-bar__inner {
    max-width: var(--cn-content-max);
    margin: 0 auto;
    padding: 0 16px;
    min-height: var(--cn-cats-h);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    overflow: visible;
}

.cn-cat-item {
    position: relative;
    flex-shrink: 0;
}

.cn-cat-item__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--cn-radius-pill);
    background: transparent;
    color: var(--cn-ink-soft);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
    white-space: nowrap;
}

.cn-cat-item__trigger:hover,
.cn-cat-item--open .cn-cat-item__trigger {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}

/* No focus ring on the category triggers: the open state is already shown by
   the panel + chevron, and a lingering ring made a clicked division keep an
   "expanded" border after the pointer moved away. */
.cn-cat-item:focus,
.cn-cat-item:focus-visible,
.cn-cat-item__trigger:focus,
.cn-cat-item__trigger:focus-visible {
    outline: none;
    box-shadow: none;
}

.cn-cat-item__trigger i.fa-chevron-down {
    font-size: 10px;
    color: var(--cn-ink-mute);
    transition: transform var(--cn-fast) var(--cn-ease);
}

.cn-cat-item--open .cn-cat-item__trigger i.fa-chevron-down {
    transform: rotate(180deg);
}

.cn-cat-item--featured .cn-cat-item__trigger {
    background: var(--cn-orange-soft);
    color: var(--cn-orange-hover);
    font-weight: 600;
}
.cn-cat-item--featured .cn-cat-item__trigger:hover {
    background: var(--cn-orange);
    color: #fff;
}
.cn-cat-item--featured .cn-cat-item__trigger i { color: inherit; }

/* Megamenu panel */
.cn-megamenu {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    left: 0;
    background: var(--cn-bg);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius-lg);
    box-shadow: var(--cn-shadow-lg);
    padding: 20px;
    min-width: 560px;
    max-width: 720px;
    /* Safety cap: never let a huge Linea push the panel past the viewport.
       Multi-column flow below keeps it short, this is the backstop. */
    max-height: 70vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--cn-medium) var(--cn-ease),
                transform var(--cn-medium) var(--cn-ease),
                visibility 0s linear var(--cn-medium);
    z-index: 1050;
}

/* Hover bridge — invisible 6px strip that fills the gap between trigger
   and panel. Because it is a descendant of .cn-megamenu, hovering it keeps
   `.cn-cat-item:hover` true and the megamenu stays open while the cursor
   travels down. */
.cn-megamenu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

/* Opening is driven entirely by the single `--open` class, which
   CategoriesMegamenu sets on mouseenter/focusin and clears on mouseleave (and
   when another division is entered/focused). Because only one item can hold
   `--open` at a time, only one panel is ever visible — moving to or focusing
   another division collapses the previous one. We deliberately do NOT use
   :hover or :focus-within here: a trigger that keeps DOM focus after a click
   would otherwise keep its panel open while the mouse hovers a sibling,
   showing two megamenus at once. */
.cn-cat-item--open .cn-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* After clicking a category the cursor/focus lingers on the item through the
   SPA navigation. Collapse clears `--open`, but this rule is a belt-and-braces
   override (placed after the open rule) in case the item is re-marked open
   before the next mouseleave. */
.cn-cat-item--collapsed .cn-megamenu,
.cn-cat-item--collapsed.cn-cat-item--open .cn-megamenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
}

.cn-megamenu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px 32px;
}

.cn-megamenu__col h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cn-ink-mute);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cn-line);
}

.cn-megamenu__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cn-megamenu__col li + li { margin-top: 2px; }

.cn-megamenu__col a {
    display: block;
    padding: 6px 8px;
    margin: 0 -8px;
    font-size: 14px;
    color: var(--cn-ink-soft);
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                padding-left var(--cn-fast) var(--cn-ease);
}

.cn-megamenu__col a:hover {
    background: var(--cn-orange-soft);
    color: var(--cn-ink);
    padding-left: 12px;
}

/* A Linea with many categorías (10+, e.g. Libreria) would otherwise render as
   one very tall column and drag the whole panel down. Let it span the full
   panel width and flow its items into several short sub-columns, so the menu
   grows wide instead of tall. Targets only oversized lists via the quantity
   query, so normal Lineas keep their single-column layout. */
.cn-megamenu__col:has(li:nth-child(10)) {
    grid-column: 1 / -1;
}

.cn-megamenu__col:has(li:nth-child(10)) ul {
    columns: 200px;
    column-gap: 32px;
}

/* Keep each link from splitting across a sub-column break. */
.cn-megamenu__col li {
    break-inside: avoid;
}

/* Hide the desktop categories bar on small screens */
@media (max-width: 900px) {
    .cn-cats-bar { display: none; }
    .cn-hamburger { display: inline-flex; }
}

@media (min-width: 901px) {
    .cn-hamburger { display: none; }
}

/* ============================================================
   Mobile drawer
   ============================================================ */

.cn-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 20, 24, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cn-medium) var(--cn-ease);
    z-index: 1500;
}

.cn-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--cn-bg);
    box-shadow: var(--cn-shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--cn-medium) var(--cn-ease);
    z-index: 1600;
    display: flex;
    flex-direction: column;
}

.cn-drawer.cn-drawer--open { transform: translateX(0); }
.cn-drawer.cn-drawer--open ~ .cn-drawer-overlay,
.cn-drawer-overlay.cn-drawer-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.cn-drawer__head {
    height: var(--cn-header-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--cn-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cn-drawer__head img { height: 30px; }

.cn-drawer__close {
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius);
    color: var(--cn-ink);
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cn-drawer__close:hover { background: var(--cn-bg-soft-2); }
.cn-drawer__close i { font-size: 18px; }

.cn-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px 24px;
}

.cn-drawer__cta {
    padding: 12px 16px;
    border-top: 1px solid var(--cn-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.cn-drawer__cta a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 12px;
    border-radius: var(--cn-radius);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--cn-fast) var(--cn-ease);
}
.cn-drawer__cta a.primary {
    background: var(--cn-orange);
    color: #fff;
}
.cn-drawer__cta a.primary:hover { background: var(--cn-orange-hover); color: #fff; }
.cn-drawer__cta a.secondary {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
}
.cn-drawer__cta a.secondary:hover { background: var(--cn-line); }

/* Drawer overrides over the legacy MenuArticulos collapsibles */
.cn-drawer__body .nav-item { padding-bottom: 2px !important; }
.cn-drawer__body .nav-item .menuParent {
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-ink) !important;
    background: transparent;
    transform: none !important;
    transition: background var(--cn-fast) var(--cn-ease) !important;
}
.cn-drawer__body .nav-item .menuParent:hover {
    background: var(--cn-bg-soft-2) !important;
    color: var(--cn-ink) !important;
    transform: none !important;
}
.cn-drawer__body .nav-item a.active {
    background: var(--cn-orange-soft) !important;
    color: var(--cn-ink) !important;
}
.cn-drawer__body .menuIconWeb {
    color: var(--cn-ink) !important;
    font-size: 18px !important;
}
.cn-drawer__body .lblMenuCategorias {
    font-style: normal !important;
    font-weight: 500 !important;
    font-family: var(--cn-font);
    width: auto !important;
}

/* Lock body scroll when drawer is open */
body.cn-no-scroll {
    overflow: hidden;
    touch-action: none;
}

/* ============================================================
   Admin shell theming (light touch — keeps original layout)
   ------------------------------------------------------------
   `display: contents` makes the wrapper transparent to layout,
   so the legacy `app { display:flex }` rule still treats
   `.sidebar` and `.main` as direct flex children.
   ============================================================ */

.cn-admin-shell {
    display: contents;
    font-family: var(--cn-font);
}

.cn-admin-shell .sidebar {
    background-image: linear-gradient(180deg, #2A2D33 0%, #1A1A1A 100%);
    box-shadow: 1px 0 0 rgba(0,0,0,0.12);
}

.cn-admin-shell .sidebar .nav-item a,
.cn-admin-shell .sidebar .menuParent {
    border-radius: var(--cn-radius-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                transform 0s !important;
    transform: none !important;
}

.cn-admin-shell .sidebar .nav-item a:hover,
.cn-admin-shell .sidebar .menuParent:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    transform: none !important;
}

.cn-admin-shell .sidebar .nav-item a:hover span,
.cn-admin-shell .sidebar .menuParent:hover span,
.cn-admin-shell .sidebar .nav-item a:hover .menuIconWeb,
.cn-admin-shell .sidebar .menuParent:hover .menuIconWeb {
    color: #fff !important;
}

.cn-admin-shell .sidebar .nav-item a.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.cn-admin-shell .sidebar .menuLabel {
    font-family: var(--cn-font);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
}

.cn-admin-shell .top-row {
    backdrop-filter: saturate(140%) blur(6px);
}

/* ------------------------------------------------------------
   Admin / empleado top-row action cluster (home · bell · account)
   Wrapped in a single flex row so the items keep a consistent gap
   and the bell badge no longer collides with the account dropdown.
   ------------------------------------------------------------ */
.cn-staff-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
}

/* Square icon buttons (home + bell) so they line up with the
   account button but stay compact. */
.cn-icon-btn--square {
    padding: 0;
    width: 42px;
    min-width: 42px;
}

.cn-bell { position: relative; }

/* Badge anchored inside the bell button so it never overflows into
   the neighbouring control. The white ring lifts it off the
   white admin top-row. */
.cn-bell__badge {
    position: absolute;
    top: -2px;
    left: calc(100% - 22px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #E11D2A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    border-radius: var(--cn-radius-pill);
    border: 2px solid #fff;
    box-sizing: border-box;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cn-public-shell *,
    .cn-public-shell *::before,
    .cn-public-shell *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   Form-card width modifiers
   ------------------------------------------------------------
   The legacy `.registro-container` class is shared by several
   pages (Registro, MiPerfil, ChangePassword, RecuperarPassword)
   and uses `max-width: 80%`. Rather than mutate the shared
   class, we add a modifier and apply it only on the pages we
   explicitly want to constrain.
   ============================================================ */

.cn-form-card-880 {
    max-width: 880px;
    padding: 28px 24px;
}

/* ============================================================
   Auth reciprocal link (under the action row on Login/Registro)
   ============================================================ */

.cn-auth-switch {
    text-align: center;
    margin-top: 18px;
    color: var(--cn-ink-mute);
    font-size: 14px;
}

.cn-auth-switch a {
    color: var(--cn-orange);
    font-weight: 600;
    text-decoration: none;
}

.cn-auth-switch a:hover,
.cn-auth-switch a:focus-visible {
    text-decoration: underline;
}

/* ============================================================
   Password input with show/hide toggle
   ------------------------------------------------------------
   Used by InputPassword.razor.
   ============================================================ */

.cn-password {
    position: relative;
    display: block;
}

.cn-password__input {
    padding-right: 42px !important;
}

.cn-password__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-ink-mute);
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-password__toggle:hover,
.cn-password__toggle:focus-visible {
    background: var(--cn-bg-soft-2);
    color: var(--cn-ink);
    outline: none;
}

.cn-password__toggle i { font-size: 14px; }

/* ============================================================
   Page title (semantic h1)
   ============================================================ */

.cn-page-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--cn-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cn-page-title i {
    font-size: 0.9em;
    color: var(--cn-ink);
}

/* Breathing room between the banner carousel and the section title
   (Destacados / Resultados de tu búsqueda / categoría). */
.cn-home-title-row {
    margin-top: 28px;
}

.cn-page-title__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-ink-mute);
    margin-bottom: 4px;
}

/* ============================================================
   Modern product grid + product card
   ============================================================ */

.cn-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cn-product-card {
    position: relative;
    background: var(--cn-bg);
    border: 1px solid var(--cn-line);
    border-radius: var(--cn-radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform var(--cn-fast) var(--cn-ease),
                box-shadow var(--cn-medium) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease);
}

.cn-product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cn-shadow);
    border-color: var(--cn-line-strong);
}

.cn-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cn-bg-soft-2);
}

.cn-product-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 600ms var(--cn-ease), opacity 600ms var(--cn-ease);
    opacity: 0;
    animation: cn-fade-in 600ms var(--cn-ease) forwards;
}

.cn-product-card__img--second {
    opacity: 0;
    animation: none;
}

.cn-product-card:hover .cn-product-card__img {
    transform: scale(1.04);
}

.cn-product-card:hover .cn-product-card__img--second {
    opacity: 1;
}

.cn-product-card--no-img .cn-product-card__media {
    background-color: #f5f5f5;
}

.cn-product-card--no-img .cn-product-card__img {
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes cn-fade-in {
    to { opacity: 1; }
}

.cn-product-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 96px;
}

.cn-product-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--cn-ink);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-product-card__desc {
    font-size: 12px;
    color: var(--cn-ink-mute);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-product-card__footer {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
}

.cn-product-card__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--cn-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cn-product-card__price::before {
    content: '$';
    font-weight: 400;
    color: var(--cn-ink-mute);
    margin-right: 2px;
    font-size: 0.85em;
}

.cn-product-card__badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--cn-ink-mute);
    padding: 4px 10px;
    border-radius: var(--cn-radius-pill);
    line-height: 1;
}

.cn-product-card__badge--new {
    background: var(--cn-ink);
    color: #fff;
}

/* Skeleton card */
.cn-product-card--skeleton {
    cursor: default;
    pointer-events: none;
}

.cn-product-card--skeleton .cn-product-card__media {
    background-image: url('/images/sinImg2.jpg');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) brightness(0.78);
    animation: cn-skeleton-pulse 1.6s ease-in-out infinite;
}

.cn-product-card__skeleton-line {
    height: 12px;
    background: var(--cn-bg-soft-2);
    border-radius: var(--cn-radius-pill);
    animation: cn-skeleton-pulse 1.6s ease-in-out infinite;
}

.cn-product-card__skeleton-line--title { width: 75%; }
.cn-product-card__skeleton-line--desc  { width: 100%; }

@keyframes cn-skeleton-pulse {
    0%   { opacity: 0.55; }
    50%  { opacity: 0.95; }
    100% { opacity: 0.55; }
}

@media (max-width: 600px) {
    .cn-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .cn-product-card__body { padding: 10px 12px 12px; min-height: 88px; }
    .cn-product-card__title { font-size: 13px; }
    .cn-product-card__desc { display: none; }
    .cn-product-card__price { font-size: 16px; }
}

/* ============================================================
   Chrome-suppression: hide MainLayout's legacy sidebar/top-row
   when a PublicShell is rendered inside the same page.
   ============================================================ */

app:has(.cn-public-shell) > .sidebar {
    display: none !important;
}

app:has(.cn-public-shell) > .main > .top-row {
    display: none !important;
}

app:has(.cn-public-shell) > .main > .whatsapp-button {
    display: none !important;
}

app:has(.cn-public-shell) > .main > .content {
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    app:has(.cn-public-shell) > .main {
        width: 100%;
        max-width: 100%;
    }

    app:has(.cn-public-shell) > .main > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
   Staff link in TopHeader — dark pill, only visible for
   admin/empleado (gated by <AuthorizeView Roles="1,3">).
   ============================================================ */

.cn-staff-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--cn-ink);
    color: #fff !important;
    border-radius: var(--cn-radius-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                box-shadow var(--cn-fast) var(--cn-ease);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.cn-staff-link:hover,
.cn-staff-link:focus-visible {
    background: var(--cn-ink-soft);
    color: #fff !important;
    text-decoration: none !important;
    outline: none;
    box-shadow: 0 1px 3px rgba(17, 20, 24, 0.3);
}

.cn-staff-link i { font-size: 13px; }

@media (max-width: 900px) {
    .cn-staff-link {
        padding: 0 10px;
        gap: 0;
    }
    .cn-staff-link__label { display: none; }
}

/* ============================================================
   Mobile header — stack search on a second row
   ============================================================ */
@media (max-width: 768px) {
    .cn-header-inner {
        height: auto;
        grid-template-columns: auto 1fr;
        grid-template-rows: 56px auto;
        gap: 8px 12px;
        padding: 0 12px 10px;
        align-items: center;
    }

    .cn-header-inner > .cn-header-left {
        grid-row: 1;
        grid-column: 1;
    }

    .cn-header-inner > .cn-actions {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }

    .cn-header-inner > .cn-search {
        grid-row: 2;
        grid-column: 1 / -1;
        max-width: none;
        margin: 0;
        height: 40px;
    }

    .cn-search__submit {
        height: 30px;
        padding: 0 14px;
        font-size: 12px;
    }

    .cn-brand img { height: 30px; }
}

/* ============================================================
   Checkout header row — page title + item count + vaciar link
   ============================================================ */

.cn-checkout-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.cn-checkout-header .cn-page-title { margin-bottom: 0; }

.cn-checkout-header__count {
    color: var(--cn-ink-mute);
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
    letter-spacing: 0;
}

/* ============================================================
   Quiet danger link — used for "Vaciar carrito"
   ============================================================ */

.cn-link-danger {
    background: none;
    border: none;
    color: var(--cn-ink-mute);
    font-size: 14px;
    font-weight: 500;
    padding: 6px 10px;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: color var(--cn-fast) var(--cn-ease),
                background var(--cn-fast) var(--cn-ease);
}

.cn-link-danger:hover,
.cn-link-danger:focus-visible {
    color: #C72525;
    background: #FEEFEF;
    text-decoration: none;
    outline: none;
}

.cn-link-danger i {
    margin-right: 6px;
    font-size: 12px;
}

/* ============================================================
   Cart row — icon-only remove button
   ============================================================ */

.cn-cart-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: var(--cn-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--cn-ink-mute);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease);
    z-index: 1;
}

.cn-cart-remove:hover,
.cn-cart-remove:focus-visible {
    background: #FEEFEF;
    color: #C72525;
    border-color: rgba(199, 37, 37, 0.18);
    outline: none;
}

.cn-cart-remove i { font-size: 14px; }

/* ============================================================
   Product detail page (PDP) — AgregarArticulo.razor
   ============================================================ */

.cn-pdp__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--cn-ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.cn-pdp__subtitle {
    font-size: 15px;
    color: var(--cn-ink-soft);
    line-height: 1.5;
    margin: 0 0 8px;
    font-weight: 500;
}

.cn-pdp__description {
    font-size: 14px;
    color: var(--cn-ink-mute);
    line-height: 1.55;
    margin: 0 0 12px;
    white-space: pre-wrap;
}

.cn-pdp__price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 18px 0 6px;
    padding-top: 18px;
    border-top: 1px solid var(--cn-line);
}

.cn-pdp__price {
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700;
    color: var(--cn-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cn-pdp__price-currency {
    font-size: 0.55em;
    font-weight: 400;
    color: var(--cn-ink-mute);
    margin-right: 3px;
    vertical-align: 0.2em;
}

.cn-pdp__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin: 0 0 14px;
}

.cn-pdp__stock--low { color: #000; }

.cn-pdp__stock i { font-size: 14px; }

.cn-pdp__in-cart {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cn-bg-soft-2);
    border: 1px solid var(--cn-line-strong);
    border-radius: var(--cn-radius-sm);
    padding: 10px 14px;
    color: var(--cn-ink);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 16px;
}

.cn-pdp__in-cart i { font-size: 16px; flex-shrink: 0; }

/* ============================================================
   Button variants used by AgregarArticulo (and reusable)
   ============================================================ */

/* Outline primary — secondary CTA that visually demotes
   relative to the filled primary. */
.cn-btn-outline-orange {
    display: inline-block;
    text-align: center;
    background: transparent;
    color: var(--cn-orange);
    border: 1.5px solid var(--cn-orange);
    padding: 9px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cn-fast) var(--cn-ease),
                color var(--cn-fast) var(--cn-ease);
}

.cn-btn-outline-orange:hover,
.cn-btn-outline-orange:focus-visible {
    background: var(--cn-orange);
    color: #fff;
    text-decoration: none;
    outline: none;
}

.cn-btn-outline-orange i { margin-right: 6px; }

/* Ghost text link — tertiary action (Volver). */
.cn-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: var(--cn-ink-mute);
    border: none;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: color var(--cn-fast) var(--cn-ease),
                background var(--cn-fast) var(--cn-ease);
}

.cn-btn-ghost:hover,
.cn-btn-ghost:focus-visible {
    color: var(--cn-ink);
    background: var(--cn-bg-soft-2);
    text-decoration: none;
    outline: none;
}

/* Small outlined danger — used for "Eliminar del carrito" on PDP. */
.cn-btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    color: #C72525;
    border: 1px solid rgba(199, 37, 37, 0.3);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    transition: background var(--cn-fast) var(--cn-ease),
                border-color var(--cn-fast) var(--cn-ease);
}

.cn-btn-remove:hover,
.cn-btn-remove:focus-visible {
    background: #FEEFEF;
    border-color: rgba(199, 37, 37, 0.55);
    text-decoration: none;
    outline: none;
}