/* ==========================================================================
   Home page rebrand preview
   ==========================================================================
   Only /home-preview loads this file. It shares nothing with the storefront:
   no Bootstrap, no public/users/ template, no reset beyond what is here.

   The language comes from the mobile mockups — white ground, pastel category
   tiles, wide radii, photography carrying the page — and is extended upward
   from phone width, which the mockups did not cover.

   Colour: the shelf supplies it. Everything structural is ink on white, so the
   tiles and the product photos are the only saturated things on the page. */

:root {
    --ink: #2b2724;
    --ink-soft: #6f6862;
    --ink-faint: #a49b93;
    --paper: #fff;
    --line: #ece7e1;
    /* The orange the owner already chose, kept for actions only. */
    --accent: #f0a92e;
    --accent-ink: #9a6405;
    --wa: #25d366;
    --radius: 18px;
    --gap: 16px;
    --page: 1180px;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

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

/* One focus style for the whole page, and it is always visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 6px;
}

.hp-sr,
.hp-skip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hp-skip:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    width: auto;
    height: auto;
    clip: auto;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
}

/* The draft bar. Deliberately plain and slightly ugly: it should never be
   mistaken for part of the design. It doubles as the way around the preview,
   so whoever is reviewing does not have to type URLs. */
.hp-flag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    margin: 0;
    padding: 8px 16px;
    background: #2b2724;
    color: #fff;
    font-size: 12.5px;
}

.hp-flag nav {
    display: flex;
    gap: 14px;
}

.hp-flag a {
    color: #ffd68a;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.hp-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.hp-head__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    max-width: var(--page);
    margin: 0 auto;
    padding: 12px 16px;
}

.hp-head__logo img {
    height: 46px;
    width: auto;
}

.hp-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #faf8f6;
}

.hp-search svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 2;
    stroke-linecap: round;
}

.hp-search input {
    width: 100%;
    height: 44px;
    /* Declarados, no heredados: en las paginas que todavia cargan Bootstrap y
       users/css/main.css hay un "input { padding: 10px }" suelto que le sumaba
       8px de alto al buscador, y con el a toda la cabecera —la del checkout
       quedaba 8px mas alta que la del resto del sitio—. Una clase le gana a un
       selector de elemento, asi que basta con nombrarlos aca. */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}

.hp-search input:focus {
    outline: none;
}

.hp-search:focus-within {
    border-color: var(--ink);
    background: #fff;
}

/* Sugerencias mientras se escribe (js/shop-search.js). Cuelgan del formulario,
   que por eso es el ancla de la posicion. */
.hp-search {
    position: relative;
}

.hp-search__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 12px 32px rgba(43, 39, 36, .12);
}

.hp-search__list[hidden] {
    display: none;
}

.hp-search__item,
.hp-search__all {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}

.hp-search__item img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 8px;
    background: #faf8f6;
}

.hp-search__item span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hp-search__item strong {
    overflow: hidden;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hp-search__item small {
    color: var(--ink-soft);
    font-size: 13px;
}

.hp-search__all {
    justify-content: center;
    margin-top: 2px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 600;
}

.hp-search__list [aria-selected="true"] a,
.hp-search__item:hover,
.hp-search__all:hover {
    background: #faf6f0;
}

.hp-search__empty {
    padding: 12px 10px;
    color: var(--ink-soft);
    font-size: 14px;
}

.hp-head__acts {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hp-head__acts a {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
}

.hp-head__acts svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-head__acts a:hover {
    background: #f5f2ee;
}

.hp-head__cart span {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent);
    color: #2b2724;
    font-size: 11px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

.hp-head__nav {
    display: flex;
    gap: 22px;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hp-head__nav::-webkit-scrollbar {
    display: none;
}

.hp-head__nav a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.hp-head__nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hp-hero {
    max-width: var(--page);
    margin: 0 auto;
    padding: 34px 16px 22px;
}

.hp-hero h1 {
    max-width: 16ch;
    font-size: clamp(30px, 6vw, 52px);
}

.hp-hero__sub {
    max-width: 46ch;
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: clamp(15px, 2vw, 18px);
}

/* Three facts, not badges: no icons, no boxes, no card each. */
.hp-hero__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.hp-hero__marks li {
    position: relative;
    padding-left: 16px;
}

.hp-hero__marks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
}

/* --------------------------------------------------------------------------
   Category tiles — the one loud thing on the page
   -------------------------------------------------------------------------- */
.hp-tiles {
    max-width: var(--page);
    margin: 0 auto;
    padding: 16px 16px 10px;
}

.hp-tiles ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-tiles a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The height comes from the photo (116px) plus the padding, stated here so
       every tile is the same height — including the last one, which has no
       photo to push it open and was sitting shorter than the rest. */
    min-height: 152px;
    padding: 18px 0 18px 20px;
    border-radius: var(--radius);
    background: var(--tile);
    overflow: hidden;
}

.hp-tiles span {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* The photo bleeds off the right edge of the tile: it reads as produce spilling
   out of a bin rather than as a thumbnail parked in a box. */
.hp-tiles img,
.hp-tiles picture {
    width: 116px;
    height: 116px;
    margin-right: -14px;
    object-fit: contain;
    /* mix-blend keeps the white cut-out backgrounds from showing as a square. */
    mix-blend-mode: multiply;
}

.hp-tiles a:hover {
    filter: brightness(1.04);
}

/* --------------------------------------------------------------------------
   Product bands
   -------------------------------------------------------------------------- */
.hp-band {
    max-width: var(--page);
    margin: 0 auto;
    padding: 26px 0 10px;
}

.hp-band__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 16px 14px;
}

.hp-band__head h2 {
    font-size: clamp(20px, 3vw, 26px);
}

.hp-band__head p {
    flex: 1;
    margin: 0;
    color: var(--ink-faint);
    font-size: 14px;
}

.hp-band__head a {
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hp-band__head a:hover {
    text-decoration: underline;
}

/* Phone first: a rail that swipes, like the mockups. The padding on the list
   plus scroll-padding keeps the first card aligned with the heading. */
.hp-band__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: var(--gap);
    margin: 0;
    padding: 4px 16px 18px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
}

.hp-band__rail::-webkit-scrollbar {
    display: none;
}

.hp-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.hp-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    /* A warm ground behind cut-out photography; on white the products float. */
    background: #f7f4f0;
    overflow: hidden;
}

.hp-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hp-card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #2b2724;
    font-size: 12px;
    font-weight: 800;
}

.hp-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 2px 0;
}

.hp-card__body h3 {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hp-card__unit {
    margin: 3px 0 0;
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-card__buy {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.hp-card__price {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hp-card__price s {
    display: block;
    color: var(--ink-faint);
    font-size: 13px;
    font-weight: 500;
}

/* The comparison figure, kept quiet: it is for the second look, not the first. */
.hp-card__price small {
    display: block;
    margin-top: 2px;
    color: var(--ink-faint);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.hp-card__add {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    cursor: pointer;
}

.hp-card__add svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

.hp-card__add:hover {
    background: var(--accent);
}

.hp-card__add:hover svg {
    stroke: #2b2724;
}

/* --------------------------------------------------------------------------
   Wholesale
   -------------------------------------------------------------------------- */
.hp-mayor {
    max-width: var(--page);
    margin: 26px auto 0;
    padding: 0 16px;
}

.hp-mayor div {
    padding: 30px 24px;
    border-radius: 24px;
    background: #2b2724;
    color: #fff;
}

.hp-mayor h2 {
    max-width: 18ch;
    font-size: clamp(22px, 3.4vw, 30px);
}

.hp-mayor p {
    max-width: 52ch;
    margin: 10px 0 20px;
    color: #cbc3bb;
    font-size: 15px;
}

.hp-mayor a {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--accent);
    color: #2b2724;
    font-weight: 700;
}

.hp-mayor a:hover {
    background: #ffc24f;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.hp-foot {
    margin-top: 44px;
    border-top: 1px solid var(--line);
}

.hp-foot__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
    max-width: var(--page);
    margin: 0 auto;
    padding: 30px 16px 70px;
}

.hp-foot h2 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 800;
}

.hp-foot p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.hp-foot__cols a {
    display: block;
    padding: 3px 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.hp-foot__cols a:hover {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   WhatsApp
   -------------------------------------------------------------------------- */
.hp-wa {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: var(--wa);
    box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
}

.hp-wa svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

/* --------------------------------------------------------------------------
   Wider screens
   -------------------------------------------------------------------------- */

/* En una ventana de notebook —entre 1180 y 1230px— la pagina toca el borde:
   "max-width: var(--page)" ya no deja nada a los lados y el unico margen que
   queda son los 16px de padding de cada seccion, que en un telefono son el
   margen correcto y en un escritorio se leen como un error.

   Los 12px van en los tres envoltorios —cabecera, contenido y pie— y no en
   cada seccion: asi ninguna se desalinea de las otras ni del aviso de
   temporada, que no tiene padding propio. Por encima de 1204px no cambia
   nada, porque ahi la caja ya no llega al borde. */
@media (min-width: 760px) {
    .hp-head,
    main,
    .hp-foot {
        padding-inline: 12px;
    }
}

@media (min-width: 700px) {
    .hp-band__rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-columns: auto;
        overflow: visible;
    }

    .hp-card__body h3 {
        font-size: 16px;
    }
}

@media (max-width: 699px) {
    /* On a phone the search bar takes the full second row: the logo and the
       icons already fill the first one. */
    .hp-head__bar {
        grid-template-columns: auto 1fr;
        row-gap: 10px;
    }

    .hp-search {
        order: 3;
        grid-column: 1 / -1;
    }

    .hp-head__logo img {
        height: 40px;
    }

    /* Two per row on a phone. Full width rows are the mockup's language for the
       products page, where the list is the whole screen; on the home they push
       the first product a screen and a half down. */
    .hp-tiles ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hp-tiles a {
        /* Same arithmetic as the desktop tile: photo (74px) plus padding. */
        min-height: 98px;
        padding: 12px 0 12px 14px;
    }

    .hp-tiles span {
        font-size: 15px;
        /* Long names ("Nueces/Castañas") get two lines rather than a clipped one. */
        max-width: 8ch;
    }

    /* The last tile has no photo to leave room for, so it keeps the full width
       instead of breaking "Ver todas las categorias" over three lines. */
    .hp-tiles__all span {
        max-width: none;
    }

    .hp-tiles img,
    .hp-tiles picture {
        width: 74px;
        height: 74px;
        margin-right: -8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-band__rail {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }
}

/* The "see all" tile: same shape as a category, opposite colour, no photo.

   It sets --tile rather than "background", because ".hp-tiles a" (0,1,1) beats
   a lone class (0,1,0) and would win the background back — which it did, and
   the tile rendered white on white until this was traced. */
.hp-tiles__all {
    --tile: #2b2724;
    justify-content: flex-start;
    padding-right: 20px;
    color: #fff;
}

.hp-tiles__all:hover {
    --tile: #423b36;
    filter: none;
}

/* ==========================================================================
   Listing
   ========================================================================== */
.hp-listing,
.hp-prod {
    max-width: var(--page);
    margin: 0 auto;
    padding: 18px 16px 10px;
}

.hp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-crumbs a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.hp-listing__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 14px 0 16px;
}

.hp-listing__head h1 {
    font-size: clamp(26px, 4.4vw, 40px);
}

.hp-listing__head p {
    margin: 0;
    color: var(--ink-faint);
    font-size: 14px;
}

/* The category rail. Chips rather than the coloured tiles: on a listing the
   page itself is already full of product photography, and a second wall of
   colour would compete with it. */
.hp-chips {
    display: flex;
    gap: 8px;
    margin: 0 -16px 22px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hp-chips::-webkit-scrollbar {
    display: none;
}

.hp-chips a {
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.hp-chips a:hover {
    border-color: var(--ink-faint);
}

.hp-chips a.is-on {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

/* Two up on a phone, like the mockups; four from tablet. */
.hp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-empty {
    padding: 40px 0;
    color: var(--ink-soft);
    text-align: center;
}

.hp-empty a {
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: underline;
}

.hp-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 34px 0 8px;
    font-size: 14px;
}

.hp-pages a {
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 600;
}

.hp-pages a:hover {
    border-color: var(--ink);
}

.hp-pages__off {
    padding: 10px 18px;
    color: var(--ink-faint);
}

.hp-pages__now {
    color: var(--ink-soft);
}

/* ==========================================================================
   Product page
   ========================================================================== */
.hp-prod__top {
    display: grid;
    gap: 22px;
    margin: 16px 0 0;
}

.hp-prod__media {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 24px;
    background: #f7f4f0;
    overflow: hidden;
}

.hp-prod__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hp-prod__buy h1 {
    font-size: clamp(26px, 4.2vw, 38px);
}

.hp-prod__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hp-prod__price s {
    color: var(--ink-faint);
    font-size: 18px;
    font-weight: 500;
}

.hp-prod__price span {
    color: var(--ink-faint);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
}

.hp-prod__stock {
    margin: 8px 0 0;
    color: #3f7d4e;
    font-size: 14px;
    font-weight: 600;
}

.hp-prod__stock--out {
    color: #a4483c;
}

.hp-prod__form {
    display: flex;
    gap: 10px;
    margin: 22px 0 0;
}

.hp-prod__qty {
    width: 86px;
    height: 52px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
}

.hp-prod__add {
    flex: 1;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.hp-prod__add:hover {
    background: var(--accent);
    color: #2b2724;
}

.hp-prod__add[disabled] {
    background: #ddd7d1;
    color: #8b837c;
    cursor: not-allowed;
}

.hp-prod__wholesale {
    display: inline-block;
    margin-top: 16px;
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Tabs, built with radios so they work without scripts ----------------- */
.hp-tabs {
    margin: 34px 0 0;
}

.hp-tabs > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hp-tabs__bar {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid var(--line);
}

.hp-tabs__bar label {
    padding: 0 0 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--ink-faint);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.hp-tabs__bar label:hover {
    color: var(--ink);
}

/* Each radio lights its own label and shows its own panel. */
#hp-tab-desc:checked ~ .hp-tabs__bar label[for="hp-tab-desc"],
#hp-tab-ben:checked ~ .hp-tabs__bar label[for="hp-tab-ben"],
#hp-tab-rec:checked ~ .hp-tabs__bar label[for="hp-tab-rec"] {
    border-bottom-color: var(--accent);
    color: var(--ink);
}

/* The keyboard still moves between tabs with the arrow keys: the focus lands on
   the hidden radio, so its label has to show it. */
.hp-tabs > input:focus-visible ~ .hp-tabs__bar label[for] {
    outline: none;
}

#hp-tab-desc:focus-visible ~ .hp-tabs__bar label[for="hp-tab-desc"],
#hp-tab-ben:focus-visible ~ .hp-tabs__bar label[for="hp-tab-ben"],
#hp-tab-rec:focus-visible ~ .hp-tabs__bar label[for="hp-tab-rec"] {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
    border-radius: 4px;
}

.hp-tabs__panel {
    display: none;
    max-width: 68ch;
    padding: 20px 0 0;
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.65;
}

#hp-tab-desc:checked ~ #hp-panel-desc,
#hp-tab-ben:checked ~ #hp-panel-ben,
#hp-tab-rec:checked ~ #hp-panel-rec {
    display: block;
}

.hp-tabs__empty {
    color: var(--ink-faint);
    font-style: italic;
}

/* ==========================================================================
   Slide-out cart
   ==========================================================================
   Driven by public/js/cart-drawer.js, which toggles .is-open and the hidden
   attribute — same markup hooks as the live drawer, new skin. */
.hp-cart__backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(24, 20, 17, .42);
    opacity: 0;
    transition: opacity .25s ease;
}

.hp-cart__backdrop.is-open {
    opacity: 1;
}

.hp-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: #fff;
    box-shadow: -18px 0 50px rgba(24, 20, 17, .16);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.hp-cart.is-open {
    transform: none;
}

/* Beats the browser's [hidden] { display: none }, which the flex above would
   otherwise cancel. */
.hp-cart[hidden],
.hp-cart__backdrop[hidden] {
    display: none !important;
}

/* The line that says what just happened. The live site answers this with a
   floating toast; here the cart itself is the answer. */
.hp-cart__flash {
    margin: 0;
    padding: 12px 20px;
    background: #fff4e2;
    color: #2b2724;
    font-size: 14px;
    font-weight: 600;
}

.hp-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.hp-cart__head h2 {
    font-size: 19px;
}

.hp-cart__close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f5f2ee;
    cursor: pointer;
}

.hp-cart__close svg,
.hp-cart__remove svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.hp-cart__lines {
    flex: 1;
    margin: 0;
    padding: 4px 20px;
    list-style: none;
    overflow-y: auto;
}

.hp-cart__lines li {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.hp-cart__thumb {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: #f7f4f0;
    overflow: hidden;
}

.hp-cart__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hp-cart__body {
    flex: 1;
    min-width: 0;
}

.hp-cart__name {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
}

.hp-cart__unit {
    margin: 2px 0 8px;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.hp-cart__side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.hp-cart__total {
    font-size: 14.5px;
    font-weight: 800;
}

.hp-cart__remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.hp-cart__remove:hover {
    background: #f5f2ee;
}

.hp-cart__foot {
    flex: 0 0 auto;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
}

.hp-cart__sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 15px;
}

.hp-cart__sum strong {
    font-size: 22px;
    font-weight: 800;
}

.hp-cart__foot p {
    margin: 6px 0 14px;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.hp-cart__pay,
.hp-cart__keep {
    display: block;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 15.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.hp-cart__pay {
    background: var(--accent);
    color: #2b2724;
}

.hp-cart__pay:hover {
    background: #ffc24f;
}

.hp-cart__keep {
    margin-top: 8px;
    background: none;
    color: var(--ink-soft);
}

.hp-cart__empty {
    flex: 1;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 30px;
    text-align: center;
    color: var(--ink-soft);
}

.hp-cart__empty a {
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: underline;
}

/* The minus and plus that qty-stepper.js builds, in this skin. */
.hp-cart .qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.hp-cart .qty-stepper button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

.hp-cart .qty-stepper button:hover {
    background: #f5f2ee;
}

.hp-cart .qty-stepper button[disabled] {
    color: #cbc4bd;
    cursor: default;
}

.hp-cart .qty-stepper input[type='number'] {
    width: 38px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    -moz-appearance: textfield;
}

.hp-cart .qty-stepper input[type='number']::-webkit-outer-spin-button,
.hp-cart .qty-stepper input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Without the stepper script the number field and its button stay as they are:
   that is what keeps the cart editable with scripts blocked. */
.hp-cart__qty button[type='submit'] {
    margin-left: 8px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.js-on .hp-cart__qty button[type='submit'] {
    display: none;
}

/* ==========================================================================
   Wider screens, for the pages added after the home
   ========================================================================== */
@media (min-width: 700px) {
    .hp-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hp-prod__top {
        /* The photo keeps the larger share, but capped: a square at half of a
           1180px page is 570px tall and leaves the buy column floating in white
           halfway up the screen. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    .hp-prod__media {
        max-height: 460px;
        aspect-ratio: auto;
        height: 460px;
    }

    .hp-prod__buy {
        padding-top: 10px;
    }
}

.hp-prod__nophoto {
    margin: 0;
    color: var(--ink-faint);
    font-size: 14px;
}

/* ==========================================================================
   Wholesale price list
   ==========================================================================
   A list to read, not a shelf to browse: one row per product, the price in its
   own column, photos small. */
.hp-mayorista,
.hp-contact,
.hp-account {
    max-width: var(--page);
    margin: 0 auto;
    padding: 18px 16px 10px;
}

.hp-mayorista__head {
    margin: 14px 0 20px;
}

.hp-mayorista__head h1 {
    max-width: 22ch;
    font-size: clamp(27px, 4.4vw, 42px);
}

.hp-mayorista__head p {
    max-width: 58ch;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 15px;
}

/* The terms first, not in the small print: finding out about the minimum after
   building an order is finding out too late. */
.hp-mayorista__terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2px;
    margin: 0 0 22px;
    border-radius: var(--radius);
    background: var(--line);
    overflow: hidden;
}

.hp-mayorista__terms > div {
    padding: 16px 18px;
    background: #faf8f6;
}

.hp-mayorista__terms p {
    margin: 0;
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-mayorista__figure {
    color: var(--ink) !important;
    font-size: 21px !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hp-mayorista__find {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}

.hp-mayorista__find input {
    flex: 1 1 220px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #faf8f6;
    font: inherit;
    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    font-size: 16px;
    color: var(--ink);
}

.hp-mayorista__find button {
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.hp-mayorista__find a {
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

.hp-ws-group {
    margin: 26px 0 0;
    /* Anchored from the category rail; without this the sticky header covers the
       heading you just jumped to. */
    scroll-margin-top: 140px;
}

.hp-ws-group h2 {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
    font-size: 19px;
}

.hp-ws-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-ws-rows li {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.hp-ws-rows__thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #f7f4f0;
    overflow: hidden;
}

.hp-ws-rows__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hp-ws-rows__name p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.hp-ws-rows__name span {
    color: var(--ink-faint);
    font-size: 12.5px;
}

.hp-ws-rows__price {
    text-align: right;
}

.hp-ws-rows__price span {
    display: block;
    color: var(--ink-faint);
    font-size: 11.5px;
    font-weight: 600;
}

.hp-ws-rows__price strong {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    /* Tabular figures so a column of prices lines up on the decimal. */
    font-variant-numeric: tabular-nums;
}

.hp-ws-rows__ask {
    color: var(--ink-faint);
    font-size: 14px !important;
    font-weight: 600 !important;
}

.hp-ws-rows__add {
    padding: 9px 16px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}

.hp-ws-rows__add:hover {
    background: var(--ink);
    color: #fff;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.hp-contact__head {
    margin: 14px 0 24px;
}

.hp-contact__head h1 {
    font-size: clamp(30px, 5vw, 46px);
}

.hp-contact__head p {
    max-width: 52ch;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 16px;
}

.hp-contact__cols {
    display: grid;
    gap: 18px;
}

.hp-contact__ways {
    display: grid;
    gap: 10px;
    align-content: start;
}

.hp-contact__way {
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.hp-contact__way strong {
    display: block;
    margin: 2px 0 4px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hp-contact__way > span:last-child {
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-contact__label {
    color: var(--ink-faint);
    font-size: 12.5px;
    font-weight: 600;
}

.hp-contact__way strong a {
    text-decoration: underline;
}

a.hp-contact__way:hover {
    border-color: var(--ink);
}

/* WhatsApp is the one people actually use, so it is the one that looks like a
   button instead of a row. */
.hp-contact__way--wa {
    border-color: transparent;
    background: #e9f9ee;
}

.hp-contact__way--wa:hover {
    border-color: var(--wa);
}

.hp-contact__form {
    padding: 22px;
    border-radius: var(--radius);
    background: #faf8f6;
}

.hp-contact__form h2 {
    margin-bottom: 14px;
    font-size: 19px;
}

.hp-contact__form label,
.hp-account__form label {
    display: block;
    margin: 12px 0 5px;
    font-size: 13.5px;
    font-weight: 600;
}

.hp-contact__form input,
.hp-contact__form textarea,
.hp-account__form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    font-size: 16px;
    color: var(--ink);
}

.hp-contact__form textarea {
    resize: vertical;
}

.hp-contact__form button,
.hp-account__form button {
    width: 100%;
    margin-top: 18px;
    padding: 15px;
    border: 0;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.hp-contact__form button:hover,
.hp-account__form button:hover {
    background: var(--accent);
    color: #2b2724;
}

.hp-account__form button[disabled] {
    background: #ddd7d1;
    color: #8b837c;
    cursor: not-allowed;
}

.hp-contact__note,
.hp-account__note {
    margin: 10px 0 0;
    color: var(--ink-faint);
    font-size: 12.5px;
    text-align: center;
}

/* ==========================================================================
   Account
   ========================================================================== */
.hp-account h1 {
    margin: 14px 0 0;
    font-size: clamp(27px, 4.4vw, 40px);
}

.hp-account__sample {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff4e2;
    color: #6b4a06;
    font-size: 13.5px;
}

.hp-account__sample a {
    font-weight: 700;
    text-decoration: underline;
}

.hp-account__cols {
    display: grid;
    gap: 20px;
    margin: 22px 0 0;
}

.hp-account__who {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.hp-account__avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #2b2724;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
}

.hp-account__name {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
}

.hp-account__mail {
    margin: 2px 0 0;
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-account__rail nav {
    display: grid;
    padding: 8px 0;
}

.hp-account__rail nav a {
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
}

.hp-account__rail nav a:hover {
    background: #f5f2ee;
    color: var(--ink);
}

.hp-account__rail nav a.is-on {
    background: var(--ink);
    color: #fff;
    font-weight: 700;
}

.hp-account__out {
    display: block;
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 14px;
}

.hp-account__out:hover {
    color: #a4483c;
}

.hp-account__form {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.hp-account__form h2 {
    font-size: 19px;
}

.hp-account__pair {
    display: grid;
    gap: 0 14px;
}

.hp-account__shortcuts {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.hp-account__shortcuts a {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.hp-account__shortcuts a:hover {
    border-color: var(--ink);
}

.hp-account__shortcuts strong {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
}

.hp-account__shortcuts span {
    color: var(--ink-faint);
    font-size: 13px;
}

@media (min-width: 700px) {
    .hp-contact__cols {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        align-items: start;
    }

    .hp-account__cols {
        grid-template-columns: 260px 1fr;
        gap: 30px;
        align-items: start;
    }

    .hp-account__pair {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 699px) {
    /* The price list turns into two rows per product: at 360px a four column
       grid puts the price and the button on top of each other. */
    .hp-ws-rows li {
        grid-template-columns: 44px 1fr auto;
        row-gap: 10px;
    }

    .hp-ws-rows__add {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

/* The reCAPTCHA widget is a fixed 304px box from Google; it only needs room and
   somewhere to sit. */
.hp-contact__captcha {
    margin-top: 18px;
    overflow-x: auto;
}

/* --- Map ------------------------------------------------------------------ */
.hp-contact__map {
    margin: 30px 0 0;
}

.hp-contact__map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.hp-contact__map-head h2 {
    font-size: 19px;
}

.hp-contact__map-head a {
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

/* The width and height attributes stay on the iframe (the browser reserves the
   right box before the embed loads, and the Maps embed needs a real size at
   load time — without them it sat on its spinner). CSS then stretches it. */
.hp-contact__map iframe {
    display: block;
    width: 100%;
    height: 340px;
    border: 0;
    border-radius: var(--radius);
}

/* ==========================================================================
   Seasonal notice
   ==========================================================================
   One notice, loaded from the admin, shown between the hero and the shelf. Not
   a carousel: the first slide of a rotator takes nearly all the attention and
   the rest are close to invisible, and it would push the products off the first
   screen every day of the year for a campaign that runs a few weeks. */
.hp-season {
    display: grid;
    gap: 0;
    max-width: var(--page);
    margin: 6px auto 4px;
    border-radius: 24px;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.hp-season__text {
    padding: 26px 24px;
}

.hp-season__eyebrow {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

.hp-season h2 {
    max-width: 22ch;
    font-size: clamp(24px, 3.6vw, 34px);
}

.hp-season__body {
    max-width: 50ch;
    margin: 10px 0 0;
    color: #cbc3bb;
    font-size: 15px;
    line-height: 1.55;
}

.hp-season__cta {
    display: inline-block;
    margin-top: 18px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--accent);
    color: #2b2724;
    font-weight: 700;
}

.hp-season__cta:hover {
    background: #ffc24f;
}

/* The text column decides how tall the notice is and the photo covers whatever
   that comes to. Absolute, because an in-flow image would size the row from its
   own proportions instead — which is how this ended up half a screen tall. */
.hp-season__media {
    position: relative;
    min-height: 210px;
}

.hp-season__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover, so whatever the owner uploads fills the panel instead of leaving
       bars beside it. The admin form says the crop comes from the centre. */
    object-fit: cover;
}

@media (min-width: 760px) {
    .hp-season {
        grid-template-columns: 1.1fr 1fr;
        align-items: stretch;
    }

    .hp-season__text {
        padding: 34px 32px;
        align-self: center;
    }
}

@media (max-width: 759px) {
    .hp-season__media {
        /* A fixed band on a phone: a wide photo at full width would take half
           the screen on its own. */
        height: 170px;
        min-height: 0;
    }
}

/* ==========================================================================
   Entering and creating an account
   ========================================================================== */
.hp-login {
    max-width: 960px;
    margin: 0 auto;
    padding: 18px 16px 10px;
}

.hp-login__head {
    margin: 14px 0 24px;
}

.hp-login__head h1 {
    font-size: clamp(28px, 4.6vw, 42px);
}

.hp-login__head p {
    max-width: 54ch;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 15.5px;
}

.hp-login__cols {
    display: grid;
    gap: 16px;
    align-items: start;
}

.hp-login__panel {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* The new customer's side is the quieter one: it is a longer form, and shading
   it keeps the two panels from reading as the same choice twice. */
.hp-login__panel--new {
    border-color: transparent;
    background: #faf8f6;
}

.hp-login__panel h2 {
    font-size: 20px;
}

.hp-login__why {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 14px;
}

.hp-login__socials {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

/* Continuing with Google is the path with nothing to remember, so it leads. */
.hp-login__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.hp-login__social:hover {
    border-color: var(--ink);
}

.hp-login__social span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
}

.hp-login__social svg,
.hp-login__social img {
    width: 18px;
    height: 18px;
}

/* A rule with the word sitting in it, rather than a bare divider. */
.hp-login__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-login__or::before,
.hp-login__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.hp-login label {
    display: block;
    margin: 14px 0 5px;
    font-size: 13.5px;
    font-weight: 600;
}

.hp-login input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    /* 16px keeps iOS Safari from zooming the page when the field is focused. */
    font-size: 16px;
    color: var(--ink);
}

/* :not() because the social button is a submit too, inside its own form — and
   without it this rule painted "Continuar con Google" black. */
.hp-login button[type="submit"]:not(.hp-login__social) {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    border: 0;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.hp-login button[type="submit"]:not(.hp-login__social):hover {
    background: var(--accent);
    color: #2b2724;
}

.hp-login__forgot {
    display: block;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 14px;
    text-align: center;
    text-decoration: underline;
}

.hp-login__forgot:hover {
    color: var(--ink);
}

.hp-login__captcha {
    margin-top: 18px;
    overflow-x: auto;
}

@media (min-width: 760px) {
    .hp-login__cols {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .hp-login__panel {
        padding: 28px;
    }
}

/* El conteo, al lado del titulo del cajon. En lineas y no en unidades, igual
   que la insignia de la cabecera y el panel del checkout. */
.hp-cart__head h2 span {
    display: block;
    margin-top: 2px;
    color: var(--ink-faint);
    font-size: 12.5px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Mayorista: catalogo o lista
   --------------------------------------------------------------------------
   La misma lista se lee de dos maneras y las dos existian antes del rediseño:
   el catalogo para elegir mirando, la lista para comparar una familia entera.
   El catalogo es el que viene por defecto. */
.hp-mayorista__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
}

.hp-mayorista__tools .hp-mayorista__find {
    flex: 1 1 260px;
    margin: 0;
}

.hp-mayorista__views {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #faf8f6;
}

.hp-mayorista__views a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
}

.hp-mayorista__views a.is-on {
    background: var(--ink);
    color: #fff;
}

.hp-mayorista__views svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.hp-mayorista__pending {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff4e2;
    color: #6b4a06;
    font-size: 14px;
}

.hp-mayorista__pending a {
    font-weight: 700;
    text-decoration: underline;
}

/* --- Catalogo ------------------------------------------------------------- */
.hp-ws-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-ws-card {
    display: flex;
    flex-direction: column;
}

.hp-ws-card__media {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    background: #f7f4f0;
    overflow: hidden;
}

.hp-ws-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hp-ws-card__out {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #2b2724;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.hp-ws-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 2px 0;
}

.hp-ws-card__body h3 {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hp-ws-card__unit {
    margin: 3px 0 0;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.hp-ws-card__prices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 8px;
}

.hp-ws-card__prices span {
    display: block;
    color: var(--ink-faint);
    font-size: 11.5px;
    font-weight: 600;
}

.hp-ws-card__prices strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.hp-ws-card__ask {
    color: var(--ink-faint);
    font-size: 14px !important;
    font-weight: 600 !important;
}

.hp-ws-card__note {
    margin: 10px 0 0;
    color: var(--ink-faint);
    font-size: 13px;
}

.hp-ws-card__note a {
    color: var(--accent-ink);
    font-weight: 700;
    text-decoration: underline;
}

.hp-ws-card__stock {
    margin: 6px 0 0;
    color: var(--ink-faint);
    font-size: 12px;
}

/* Kilos y agregar, la misma pieza en las dos vistas. */
.hp-ws-add {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.hp-ws-add input {
    width: 62px;
    height: 42px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    /* 16px: por debajo, Safari en iPhone hace zoom al enfocar. */
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
}

.hp-ws-add button {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.hp-ws-add button:hover {
    background: var(--accent);
    color: #2b2724;
}

.hp-ws-add--row {
    margin-top: 0;
    padding-top: 0;
}

.hp-ws-add--row input {
    width: 56px;
    height: 38px;
}

.hp-ws-add--row button {
    flex: 0 0 auto;
    height: 38px;
}

/* --- Lista ---------------------------------------------------------------- */
.hp-ws-rows__off {
    opacity: .62;
}

.hp-ws-rows__ask-link {
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

.hp-mayorista__csv {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 460px;
}

.hp-mayorista__csv input {
    flex: 1 1 200px;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
}

.hp-mayorista__csv button {
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #2b2724;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.hp-mayorista__csv-error {
    margin: 8px 0 0;
    color: #ffb4a8;
    font-size: 13px;
}

@media (min-width: 700px) {
    .hp-ws-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Blog
   ==========================================================================
   Una grilla de tarjetas: en un blog de tienda se mira de que va cada post y se
   entra a uno, no se leen todos los resumenes en fila. */
.hp-blog {
    max-width: var(--page);
    margin: 0 auto;
    padding: 18px 16px 10px;
}

.hp-blog__head {
    margin: 14px 0 20px;
}

.hp-blog__head h1 {
    max-width: 20ch;
    font-size: clamp(28px, 4.6vw, 42px);
}

.hp-blog__head p {
    max-width: 56ch;
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 15.5px;
}

.hp-blog__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-blog__card {
    display: flex;
    flex-direction: column;
}

.hp-blog__media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    background: #f7f4f0;
    overflow: hidden;
}

.hp-blog__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-blog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 2px 0;
}

.hp-blog__date {
    margin: 0;
    color: var(--ink-faint);
    font-size: 12.5px;
}

.hp-blog__body h2 {
    margin: 5px 0 0;
    font-size: 19px;
    line-height: 1.25;
}

.hp-blog__excerpt {
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
}

.hp-blog__more {
    margin-top: auto;
    padding-top: 12px;
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 700;
}

.hp-blog__more:hover {
    text-decoration: underline;
}

/* La paginacion de Laravel trae su propia maquetacion; aca solo se la centra y
   se le quitan los colores de Bootstrap. */
.hp-blog__pages {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.hp-blog__pages svg {
    width: 16px;
    height: 16px;
}

.hp-blog__pages a,
.hp-blog__pages span {
    color: var(--ink-soft);
}

@media (min-width: 700px) {
    .hp-blog__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* El minimo del pedido mayorista, dentro de su cajon. */
.hp-cart__minimum {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13.5px;
}

.hp-cart__minimum p {
    margin: 0 0 8px;
}

.hp-cart__minimum strong {
    color: var(--ink);
}

.hp-cart__minimum--ok {
    color: #3f7d4e;
    font-weight: 600;
}

.hp-cart__bar {
    height: 6px;
    border-radius: 999px;
    background: #eee9e3;
    overflow: hidden;
}

.hp-cart__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

/* Quitar una linea del pedido mayorista es un boton (envia cero kilos), no un
   enlace: el de la tienda es un GET y este no puede serlo. */
.hp-cart__side button.hp-cart__remove {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* Con sesion iniciada el formulario del CSV no pide correo: pregunta si quiere
   que le avisemos. */
.hp-mayorista__csv--auth {
    flex-direction: column;
    align-items: flex-start;
    max-width: none;
}

.hp-mayorista__avisos {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #cbc3bb;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.hp-mayorista__avisos input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

/* "Cerrar sesion" es el boton de un formulario (POST), con la pinta del resto
   de la barra. */
.hp-account__out-form {
    margin: 0;
}

button.hp-account__out {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

/* Los errores del formulario de cuenta. */
.hp-login__errors {
    margin: 14px 0 0;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: #fdeceb;
    color: #8c3b31;
}

.hp-login__errors p {
    margin: 0 0 6px;
    font-weight: 700;
}

.hp-login__errors ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

.hp-login__error {
    margin: 6px 0 0;
    color: #8c3b31;
    font-size: 13px;
    font-weight: 600;
}

.hp-login input[aria-invalid="true"] {
    border-color: #c0685c;
}

/* El "listo, lo recibimos" de los formularios. */
.hp-contact__sent {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #e9f9ee;
    color: #2f6b41;
    font-size: 14px;
    font-weight: 600;
}