/* =====================================================
   VERO — home page
   Loads after style.css.
   ===================================================== */

/* Hero: edge to edge, directly under the nav. Everything is measured on a hero 1898 wide and 600 tall;
   --u is one of those pixels at the real width. cqw and not vw, because 100vw counts the scrollbar. */
.gk-home > .vero-hero { max-width: none; margin: 0; padding: 0; }
.vero-hero {
    --u: calc(100vw / 1898);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1898 / 600;
    background: #fff;
}
@supports (width: 1cqw) {
    .vero-hero { container-type: inline-size; --u: calc(100cqw / 1898); }
}

/* The old slide steps through white. Here the new slide fades in over the old one, which then goes. */
.vero-hero .gk-slide { visibility: hidden; transition: opacity 0s .6s, visibility 0s .6s; }
.vero-hero .gk-slide.is-active { visibility: visible; transition: opacity .6s; }
/* An image in the viewport loads even at opacity 0, so the second slide has no box until the page has loaded. */
.vero-hero:not(.is-ready) .gk-slide:not(.is-active) { display: none; }

.vero-hero .gk-slide img {
    top: calc(var(--y) * var(--u));
    right: auto;
    bottom: auto;
    left: calc(var(--x) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(415 * var(--u));
}
.vh-lo1 { --x: 4; --w: 172; --y: -64; }
.vh-lo2 { --x: 4; --w: 172; --y: 379; }
.vh-li1 { --x: 206; --w: 345; --y: -271; }
.vh-li2 { --x: 206; --w: 345; --y: 172; }
.vh-ri1 { --x: 1347; --w: 345; --y: -36; }
.vh-ri2 { --x: 1347; --w: 345; --y: 411; }
.vh-ro1 { --x: 1722; --w: 172; --y: -347; }
.vh-ro2 { --x: 1722; --w: 172; --y: 92.5; }
.vh-ro3 { --x: 1722; --w: 172; --y: 532; }

.vh-centre {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: calc(551 * var(--u));
    width: calc(796 * var(--u));
    color: var(--vero-bronze);
    font-family: var(--gk-font-display);
    font-weight: 500;
    text-align: center;
}
.vh-centre p { position: absolute; left: 0; right: 0; margin: 0; }
.vh-welcome { top: calc(141 * var(--u)); transform: translateY(-50%); font-size: max(13px, calc(41.5 * var(--u))); line-height: 1; }
.vh-logo { position: absolute; top: calc(178 * var(--u)); left: calc(150.5 * var(--u)); width: calc(495 * var(--u)); }
.vh-logo img { display: block; width: 100%; height: auto; }
.vh-tagline { top: calc(413 * var(--u)); font-size: max(14px, calc(34 * var(--u))); line-height: 1.18; }

.vero-hero .vh-arrow {
    position: absolute;
    z-index: 30;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
}
.vero-hero .vh-arrow:hover, .vero-hero .vh-arrow:focus { background: none; box-shadow: none; color: #fff; }
.vh-prev { left: calc(4 * var(--u)); }
.vh-next { right: calc(4 * var(--u)); }
/* From 768px the floating cart tab (.gk-side-cart, 76px wide) sits at the far right at mid-height and would cover this arrow */
@media (min-width: 768px) {
    .vh-next { right: 80px; }
}
/* A shadow, because the arrows sit on light photos */
.vh-arrow svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1px rgba(35, 35, 38, .6)) drop-shadow(0 1px 3px rgba(35, 35, 38, .6)); }

/* Phone: one column each side, measured on a hero 390 wide and 360 tall */
@media (max-width: 639px) {
    .vero-hero { --u: calc(100vw / 390); aspect-ratio: 390 / 360; }
    @supports (width: 1cqw) {
        .vero-hero { --u: calc(100cqw / 390); }
    }
    .vero-hero .gk-slide img { height: calc(160 * var(--u)); }
    .vero-hero .vh-lo1, .vero-hero .vh-ro1, .vero-hero .vh-ro3 { display: none; }
    .vh-li1 { --x: 0; --w: 92; --y: -85; }
    .vh-li2 { --x: 0; --w: 92; --y: 85; }
    .vh-lo2 { --x: 0; --w: 92; --y: 255; }
    .vh-ri1 { --x: 298; --w: 92; --y: -20; }
    .vh-ri2 { --x: 298; --w: 92; --y: 150; }
    .vh-ro2 { --x: 298; --w: 92; --y: 320; }
    .vh-centre { left: calc(92 * var(--u)); width: calc(206 * var(--u)); }
    .vh-welcome { top: calc(110 * var(--u)); font-size: calc(20 * var(--u)); }
    .vh-logo { top: calc(130 * var(--u)); left: calc(16 * var(--u)); width: calc(174 * var(--u)); }
    .vh-tagline { top: calc(218 * var(--u)); font-size: calc(19 * var(--u)); }
}

/* Best Sellers, phone: two columns like the shop, each photo the full width of its card */
@media (max-width: 767px) {
    .gk-top-sellers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gk-ts-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
    .gk-ts-card .gk-ts-img { width: 100%; height: auto; border: 0; border-radius: 0; }
    .gk-ts-card .gk-ts-img img { display: block; height: auto; aspect-ratio: 3 / 4; }
    /* At the foot of the photo, so it never meets the Save badge on a narrow card */
    .gk-ts-img .badge-fire { top: auto; right: auto; bottom: 8px; left: 8px; }
    .gk-ts-body { gap: 6px; padding: 10px 10px 12px; }
    .gk-ts-body h3 { font-size: 13px; min-height: 2.7em; }
    .gk-ts-actions { grid-template-columns: 1fr; gap: 6px; }
    .gk-ts-actions > * { display: flex; align-items: center; justify-content: center; min-height: 38px; font-size: 12px; }
}