/* Cheems Shop: one native header, its existing colours and stable flow space. */
html[data-cs-motion] header[data-header-pill] {
    --cs-reserve: 69px;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--cs-reserve) !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    box-shadow:none !important;
    translate: none !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transition: none !important;
}
html[data-cs-motion] header[data-header-pill] > div:first-child {
    box-sizing: border-box;
    height: 100%;
    padding-block: 10px;
    transition: none;
}
html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] {
    top: 20px !important;
    width: min(850px, calc(100% - 40px)) !important;
    height: 70px !important;
    margin-bottom: calc(var(--cs-reserve) - 70px) !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 30px -14px rgba(0,0,0,.22) !important;
}
html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] > div:first-child { padding-inline: 20px; }
html[data-cs-motion][data-cs-ready] header[data-header-pill] {
    transition: width 1s cubic-bezier(.16,1,.3,1), height 1s cubic-bezier(.16,1,.3,1), top 1s cubic-bezier(.16,1,.3,1), margin-bottom 1s cubic-bezier(.16,1,.3,1), border-radius 1s cubic-bezier(.16,1,.3,1), background-color 700ms, border-color 700ms, box-shadow 700ms !important;
}
html[data-cs-motion][data-cs-ready] header[data-header-pill] > div:first-child { transition: padding 1s cubic-bezier(.16,1,.3,1), gap 1s cubic-bezier(.16,1,.3,1); }
html[data-cs-motion] header[data-header-pill] > div > div:last-child > :is(button,a),
html[data-cs-motion] header[data-header-pill] form > button {
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
}
html[data-cs-motion] header[data-header-pill] form input { min-height: 44px; }
html[data-cs-motion] header[data-header-pill] form { min-width: 0; }
html[data-cs-motion] header[data-header-pill] > div > a:first-child { min-height:44px; }
/* Keep the published edge alignment of native floating controls. */
html[data-cs-motion] .cs-edge-action { right:max(8px,env(safe-area-inset-right)) !important; left:auto !important; }
html[data-cs-motion] header[data-header-pill] :focus-visible { outline-offset: 3px; }
/* Measured mobile card CTAs previously had negative horizontal text gutters. */
html[data-cs-motion][data-cs-public="true"] main .mt-auto.admin-ui-button {
    white-space: normal;
    overflow-wrap: anywhere;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    text-align: center;
    line-height: 1.35;
}
@media(max-width:760px) {
    html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] { width:calc(100% - 28px) !important; top:12px !important; }
}
@media(max-width:639px) {
    html[data-cs-motion] header[data-header-pill] { --cs-reserve:125px; }
    html[data-cs-motion] header[data-header-pill] > div:first-child { height:68px; padding-inline:12px; }
    html[data-cs-motion] header[data-header-pill] > div:nth-child(2) { height:56px; padding:0 14px 12px; }
    html[data-cs-motion] header[data-header-pill] form { height:44px; }
    html[data-cs-motion] header[data-header-pill] form input { width:0; flex:1; }
    html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] { height:125px !important; margin-bottom:0 !important; border-radius:28px !important; }
    html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] > div:first-child { padding-inline:14px; }
}
/* Keep the full native name, amount and inline search at narrow widths. */
@media(max-width:519px) {
    html[data-cs-motion] header[data-header-pill] { --cs-reserve:165px; }
    html[data-cs-motion] header[data-header-pill] > div:first-child { height:108px; flex-wrap:wrap; justify-content:center; gap:4px; padding-block:8px; }
    html[data-cs-motion] header[data-header-pill] > div:first-child > a:first-child { flex-shrink:0; }
    html[data-cs-motion] header[data-header-pill] > div:first-child > a:first-child > span { overflow:visible; text-overflow:clip; }
    html[data-cs-motion] header[data-header-pill] > div:first-child > div:last-child { width:100%; justify-content:center; margin-left:0; gap:4px; }
    html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] { height:165px !important; margin-bottom:0 !important; }
}
@media(min-width:640px) and (max-width:760px) {
    html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] > div:first-child { gap:8px; padding-inline:12px; }
}
/* Standalone notices keep their two native text links and their own material. */
html[data-cs-motion] body[data-cs-legal-page] { display:flex; flex-direction:column; }
html[data-cs-motion] body[data-cs-legal-page] > :is(main,footer) { width:100%; }
html[data-cs-motion] header[data-cs-legal] {
    --cs-reserve:92px;
    width:min(58rem,100%) !important;
    padding:24px clamp(1rem,4vw,2.5rem);
    z-index:40;
    background:var(--brand-bg,#fafaf8);
    box-shadow:none !important;
}
html[data-cs-motion] header[data-cs-legal] a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
html[data-cs-motion][data-cs-compact="true"] header[data-cs-legal] { padding:0 20px; box-shadow:0 8px 30px -14px rgba(0,0,0,.22) !important; }
html[data-cs-motion][data-cs-ready] header[data-cs-legal] { transition:width 1s cubic-bezier(.16,1,.3,1),height 1s cubic-bezier(.16,1,.3,1),top 1s cubic-bezier(.16,1,.3,1),margin-bottom 1s cubic-bezier(.16,1,.3,1),border-radius 1s cubic-bezier(.16,1,.3,1),padding 1s cubic-bezier(.16,1,.3,1),background-color 700ms,border-color 700ms,box-shadow 700ms !important; }
@media(max-width:639px) {
    html[data-cs-motion][data-cs-compact="true"] header[data-cs-legal] { width:calc(100% - 28px) !important; height:64px !important; margin-bottom:28px !important; top:12px !important; border-radius:32px !important; padding-inline:14px; }
}
@media(prefers-reduced-motion:reduce) {
    html[data-cs-motion][data-cs-ready] header[data-header-pill], html[data-cs-motion][data-cs-ready] header[data-header-pill] > div:first-child { transition:none !important; }
}
@media print {
    html[data-cs-motion] header[data-header-pill] { position:static !important; width:100% !important; top:0 !important; height:var(--cs-reserve) !important; margin-bottom:0 !important; }
}
html[data-cs-motion][data-cs-public="true"] main .admin-ui-button { min-height:44px; }

@media(max-width:519px) {
 html[data-cs-motion] header[data-header-pill] button:is([aria-label="Abrir carrito"],[aria-label="Open cart"]) { position:relative; padding-inline:8px; gap:4px; font-size:12px; }
 html[data-cs-motion] header[data-header-pill] button:is([aria-label="Abrir carrito"],[aria-label="Open cart"]) > span + span { position:absolute; top:-4px; right:-4px; }
}
@media(max-width:359px) {
 html[data-cs-motion][data-cs-compact="true"] header[data-header-pill] > div:first-child { padding-inline:8px; }
}


/* Cheems private native headers only. No storefront, sidebar or login selectors. */
html [data-cheems-private-motion] {
    --cph-base-height: 64px;
    --cph-target-width: var(--cph-host-width);
    --cph-target-height: var(--cph-bar-height, 64px);
    --cph-bar-padding: 24px;
    box-sizing: border-box !important;
    position: fixed !important;
    inset: 0 auto auto calc(var(--cph-host-left) + (var(--cph-host-width) - var(--cph-target-width)) / 2) !important;
    z-index: 30 !important;
    width: var(--cph-target-width) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--cph-target-height) !important;
    min-height: var(--cph-base-height) !important;
    margin: 0 !important;
    padding: 9px var(--cph-bar-padding) !important;
    align-self: auto !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 8px;
    border: 1px solid transparent !important;
    border-bottom-color: var(--border) !important;
    border-radius: 0 !important;
    color: var(--foreground);
    background: color-mix(in srgb, var(--background) 70%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* The previous admin hook may still write its attribute. Its hiding is inert. */
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        width 1s cubic-bezier(.16, 1, .3, 1),
        height 1s cubic-bezier(.16, 1, .3, 1),
        left 1s cubic-bezier(.16, 1, .3, 1),
        top 1s cubic-bezier(.16, 1, .3, 1),
        padding 1s cubic-bezier(.16, 1, .3, 1),
        border-radius 1s cubic-bezier(.16, 1, .3, 1),
        background-color 700ms,
        border-color 700ms,
        box-shadow 700ms,
        backdrop-filter 700ms,
        -webkit-backdrop-filter 700ms !important;
}

html [data-cheems-private-motion='admin'] {
    --cph-bar-padding: 20px;
    background: var(--card) !important;
}

html [data-cheems-private-motion][data-cheems-private-compact='true'] {
    --cph-base-height: 70px;
    --cph-target-width: min(850px, max(0px, calc(var(--cph-host-width) - 40px)));
    --cph-target-height: var(--cph-capsule-height, 70px);
    top: 20px !important;
    padding: 9px 14px 9px 28px !important;
    border-color: var(--border) !important;
    border-radius: 50px !important;
    background: color-mix(in srgb, var(--background) 90%, transparent) !important;
    box-shadow: 0 12px 48px #0003, inset 0 1px #ffffff12 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

html [data-cheems-private-motion='admin'][data-cheems-private-compact='true'] {
    background: color-mix(in srgb, var(--card) 92%, transparent) !important;
}

/* A single inert sibling reserves the expanded native slot. The header is not cloned. */
[data-cheems-private-space] {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--cph-reserved-height, 64px) !important;
    min-height: var(--cph-reserved-height, 64px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

html [data-cheems-private-motion] > * {
    min-width: 0;
}

html [data-cheems-private-motion='admin'] > div:first-child {
    flex: 1 1 0;
    min-width: 0;
}

html [data-cheems-private-motion='panel'] > div:not(:last-child) {
    flex: 1 1 128px;
    min-width: 0;
    overflow-wrap: anywhere;
}

html [data-cheems-private-motion] > div:last-child {
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

html [data-cheems-private-motion] :where(button, a[role='button'], input[type='button'], input[type='submit']) {
    box-sizing: border-box;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 100%;
    flex-shrink: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

html [data-cheems-private-motion] [data-sidebar='trigger'] {
    width: 44px !important;
    height: 44px !important;
    margin-left: 0 !important;
}

html [data-cheems-private-motion] nav[aria-label='breadcrumb'] a {
    min-height: 44px;
    line-height: 44px;
}

html [data-cheems-private-motion] :where(button, a, input):focus-visible {
    outline: 2px solid var(--ring, var(--primary)) !important;
    outline-offset: 3px !important;
}

/* Endpoint measurement changes this same fixed element before paint, never page flow. */
html [data-cheems-private-motion][data-cheems-private-measure='true'] {
    height: auto !important;
    transition: none !important;
}

html [data-cheems-private-motion][data-cheems-private-ready='false'] {
    transition: none !important;
}

@media (max-width: 760px) {
    html [data-cheems-private-motion][data-cheems-private-compact='true'] {
        --cph-base-height: 64px;
        --cph-target-width: max(0px, calc(var(--cph-host-width) - 28px));
        top: 12px !important;
        padding-inline: 14px !important;
    }
}

@media (max-width: 640px) {
    html [data-cheems-private-motion='admin'] {
        --cph-bar-padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html [data-cheems-private-motion],
    html [data-cheems-private-motion]::before,
    html [data-cheems-private-motion]::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Native hero CTA: keep its copy, icon, colour and link inside the card at320. */
@media(max-width:359px) {
 html[data-cs-motion][data-cs-public="true"] main a.mt-6.inline-flex.rounded-full {
  max-width:100%; min-height:44px; padding:10px; gap:4px;
  font-size:12px; line-height:1.4; white-space:normal;
 }
 html[data-cs-motion][data-cs-public="true"] main a.mt-6.inline-flex.rounded-full > svg { flex-shrink:0; }
}