/* =====================================================================
 * Zooboxi Dynamic Homepage
 * Brand tokens (from theme): --z-primary #429D9C · --z-primary-dark #2D7A79
 * --z-secondary #D48644 · --z-icons #D46856 · --z-text #2C3E2D
 * Fonts: El Messiri (headings) · Tajawal (body)
 * ===================================================================== */

.zb-home {
    --zbh-teal: var(--z-primary, #429d9c);
    --zbh-teal-dark: var(--z-primary-dark, #2d7a79);
    --zbh-coral: var(--z-icons, #d46856);
    --zbh-ink: var(--z-text, #2c3e2d);
    --zbh-muted: #6b7c6e;
    --zbh-line: #e2e8e0;
    --zbh-radius: 18px;
    --zbh-max: 1280px;
    direction: rtl;
}

/* ── Full-width site + full-screen hero (desktop) ──────────────────
   The theme caps the front-page content at 1200px; widen it and let the
   hero slider span the entire viewport edge-to-edge. */
body.home .site-content .entry-content > .zb-home,
body.page .site-content .entry-content > .zb-home {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Responsive HTML hero (brand-kit design) → full-width, crisp at any size. */
.zb-home .zb-home-hero--slider {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto 40px !important;
}
.zb-home .zb-home-hero--slider .zb-hero { border-radius: 0 !important; box-shadow: none !important; }
@media (min-width: 769px) {
    .zb-home .zb-home-hero--slider .zb-hero__slide { aspect-ratio: 1600 / 600 !important; height: auto !important; }
}

.zb-home .zb-home-slot:empty {
    display: none;
    margin: 0;
}

/* ── Hero ─────────────────────────────────────────── */
.zb-home-hero {
    max-width: var(--zbh-max);
    margin: 0 auto 40px;
    padding: 0 20px;
}
.zb-home-hero__frame {
    border-radius: var(--zbh-radius);
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}
.zb-home-hero__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
    .zb-home-hero__img {
        animation: zb-kenburns 18s ease-in-out infinite alternate;
        transform-origin: center;
    }
}
@keyframes zb-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}
.zb-home-hero--campaign .zb-camp { margin-bottom: 0; }

/* ── Smart hero slider ───────────────────────────── */
.zb-home-hero--slider { padding: 0 20px; }
.zb-hero {
    position: relative;
    border-radius: var(--zbh-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
    background: #eef2ed;
}
.zb-hero__viewport { overflow: hidden; }
.zb-hero__track { display: flex; direction: ltr; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
.zb-hero__slide {
    flex: 0 0 100%;
    position: relative;
    display: block;
    aspect-ratio: 1000 / 330;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
}
.zb-hero__media { display: block; width: 100%; height: 100%; }
.zb-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Auto gradient panels (no banner image needed) */
.zb-hero__slide--auto { display: flex; align-items: center; }
.zb-hero__slide--teal  { background: linear-gradient(120deg, #2d7a79 0%, #429d9c 55%, #4cb3b1 100%); }
.zb-hero__slide--coral { background: linear-gradient(120deg, #c0563f 0%, #d46856 55%, #e08070 100%); }
.zb-hero__slide--mixed { background: linear-gradient(120deg, #2d7a79 0%, #429d9c 50%, #d46856 130%); }
.zb-hero__slide--auto::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.16), transparent 45%);
}
.zb-hero__brandlogo {
    position: absolute; inset-inline-start: 8%; top: 50%; transform: translateY(-50%);
    width: 150px; height: 150px; border-radius: 24px; background: rgba(255,255,255,0.95);
    display: flex; align-items: center; justify-content: center; padding: 18px; line-height: 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.zb-hero__brandlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Text overlay */
.zb-hero__overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 12px; padding: 0 7% 0 7%; text-align: right; direction: rtl; line-height: 1.3;
}
.zb-hero__slide--image .zb-hero__overlay,
.zb-hero__slide:not(.zb-hero__slide--auto) .zb-hero__overlay {
    background: linear-gradient(90deg, rgba(20,30,25,0.55) 0%, rgba(20,30,25,0.15) 45%, transparent 70%);
}
.zb-hero__headline {
    font-family: 'El Messiri', 'Tajawal', sans-serif; font-weight: 700;
    font-size: clamp(22px, 3.4vw, 42px); color: #fff; margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.25); max-width: 60%;
}
.zb-hero__sub {
    font-family: 'Tajawal', sans-serif; font-weight: 500;
    font-size: clamp(12px, 1.5vw, 18px); color: rgba(255,255,255,0.95); margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,0.22); max-width: 52%;
}
.zb-hero__cta {
    display: inline-flex; align-items: center; margin-top: 6px;
    background: #fff; color: var(--z-primary-dark, #2d7a79);
    font-family: 'Tajawal', sans-serif; font-weight: 800; font-size: clamp(13px, 1.4vw, 16px);
    padding: 11px 26px; border-radius: 40px; line-height: 1;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.zb-hero__slide:hover .zb-hero__cta { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.26); }

/* Arrows */
.zb-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,0.9); color: #2d7a79; font-size: 26px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: background 0.2s ease, transform 0.2s ease;
}
.zb-hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.zb-hero__arrow--prev { inset-inline-start: 14px; }   /* RTL: visually right */
.zb-hero__arrow--next { inset-inline-end: 14px; }

/* Dots */
.zb-hero__dots {
    position: absolute; bottom: 14px; inset-inline-start: 0; inset-inline-end: 0; z-index: 4;
    display: flex; justify-content: center; gap: 8px;
}
.zb-hero__dot {
    width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
    background: rgba(255,255,255,0.55); transition: all 0.25s ease;
}
.zb-hero__dot.is-active { background: #fff; width: 26px; border-radius: 6px; }

/* ── Signature brand-identity slide ──────────────── */
.zb-hero__slide--identity {
    background: linear-gradient(120deg, #2d7a79 0%, #429d9c 48%, #d46856 132%);
    overflow: hidden;
}
.zb-hero__slide--identity::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'150'%20viewBox%3D'0%200%20150%20150'%3E%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.07'%3E%3Cellipse%20cx%3D'45'%20cy%3D'58'%20rx%3D'13'%20ry%3D'10'%2F%3E%3Ccircle%20cx%3D'31'%20cy%3D'41'%20r%3D'5'%2F%3E%3Ccircle%20cx%3D'45'%20cy%3D'36'%20r%3D'5'%2F%3E%3Ccircle%20cx%3D'59'%20cy%3D'41'%20r%3D'5'%2F%3E%3Cellipse%20cx%3D'110'%20cy%3D'118'%20rx%3D'11'%20ry%3D'8.5'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'104'%20r%3D'4.3'%2F%3E%3Ccircle%20cx%3D'110'%20cy%3D'100'%20r%3D'4.3'%2F%3E%3Ccircle%20cx%3D'122'%20cy%3D'104'%20r%3D'4.3'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 150px 150px;
}
.zb-hero__slide--identity::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        radial-gradient(circle at 16% 118%, rgba(255,255,255,0.18), transparent 40%),
        radial-gradient(circle at 92% -12%, rgba(255,255,255,0.14), transparent 46%);
}
.zb-hero__id-copy {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 12px; padding: 0 7%; max-width: 56%; direction: rtl; text-align: right;
}
.zb-hero__id-logo { background: #fff; border-radius: 14px; padding: 8px 14px; line-height: 0; box-shadow: 0 8px 22px rgba(0,0,0,0.16); }
.zb-hero__id-logo img { height: 38px; width: auto; display: block; }
.zb-hero__id-title {
    font-family: 'El Messiri', 'Tajawal', sans-serif; font-weight: 700;
    font-size: clamp(26px, 3.6vw, 48px); color: #fff; line-height: 1.15; margin: 0;
    text-shadow: 0 2px 14px rgba(0,0,0,0.22);
}
.zb-hero__id-sub {
    font-family: 'Tajawal', sans-serif; font-weight: 500;
    font-size: clamp(13px, 1.6vw, 20px); color: rgba(255,255,255,0.95); margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.zb-hero__slide--identity .zb-hero__cta { margin-top: 4px; }
.zb-hero__id-brands { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.zb-hero__id-brand { background: rgba(255,255,255,0.94); border-radius: 9px; padding: 5px 9px; line-height: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.zb-hero__id-brand img { height: 18px; width: auto; display: block; }

.zb-hero__id-art { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.zb-hero__id-prod {
    position: absolute; background: #fff; border-radius: 18px; padding: 10px; line-height: 0;
    box-shadow: 0 14px 34px rgba(0,0,0,0.22); width: clamp(96px, 12vw, 168px); aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
}
.zb-hero__id-prod img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zb-hero__id-prod--1 { left: 6%;  top: 50%; transform: translateY(-50%) rotate(-6deg); z-index: 5; width: clamp(120px, 14vw, 200px); }
.zb-hero__id-prod--2 { left: 21%; top: 16%; transform: rotate(5deg);  z-index: 4; }
.zb-hero__id-prod--3 { left: 22%; bottom: 12%; transform: rotate(-4deg); z-index: 4; }
.zb-hero__id-prod--4 { left: 1%;  top: 13%; transform: rotate(7deg);  z-index: 3; width: clamp(82px, 10vw, 138px); }
.zb-hero__id-prod--5 { left: 2%;  bottom: 11%; transform: rotate(-8deg); z-index: 3; width: clamp(82px, 10vw, 138px); }
@media (prefers-reduced-motion: no-preference) {
    .zb-hero__slide--identity.is-active .zb-hero__id-prod { animation: zb-id-float 5s ease-in-out infinite; }
    .zb-hero__id-prod--2 { animation-delay: 0.6s; } .zb-hero__id-prod--3 { animation-delay: 1.2s; }
    .zb-hero__id-prod--4 { animation-delay: 0.3s; } .zb-hero__id-prod--5 { animation-delay: 0.9s; }
}
@keyframes zb-id-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@media (max-width: 768px) {
    .zb-hero__slide--identity { aspect-ratio: 3 / 2 !important; min-height: 0; }
    .zb-hero__id-copy { max-width: 100%; padding: 0 20px; align-items: center; text-align: center; }
    .zb-hero__id-title, .zb-hero__id-sub { text-align: center; }
    .zb-hero__id-brands { justify-content: center; }
    .zb-hero__id-art { opacity: 0.22; }
    .zb-hero__id-prod--4, .zb-hero__id-prod--5 { display: none; }
    .zb-hero__id-logo img { height: 32px; }
}

@media (max-width: 768px) {
    .zb-hero__slide { aspect-ratio: 3 / 2; }   /* whole gpt banner, no crop */
    .zb-hero__headline { max-width: 90%; }
    .zb-hero__sub { max-width: 82%; }
    .zb-hero__overlay { padding: 0 22px; gap: 9px; }
    .zb-hero__brandlogo { width: 92px; height: 92px; border-radius: 18px; padding: 12px; inset-inline-end: 16px; }
    .zb-hero__arrow { width: 36px; height: 36px; font-size: 22px; }
    .zb-hero__slide--auto .zb-hero__headline { max-width: 62%; }
    .zb-hero__slide--auto .zb-hero__sub { max-width: 58%; }
}

/* ── Delivery promise strip ──────────────────────── */
.zb-home-promise { max-width: var(--zbh-max); margin: 0 auto; padding: 0 20px; }
.zb-promise {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: var(--zbh-max);
    margin: -18px auto 26px;
    padding: 12px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef7f7, #ffffff);
    border: 1px solid rgba(66, 157, 156, 0.22);
    box-shadow: 0 6px 18px rgba(66, 157, 156, 0.08);
    font-family: 'Tajawal', sans-serif;
}
.zb-promise__icon { font-size: 20px; line-height: 1; }
.zb-promise__text { font-weight: 700; color: var(--zbh-teal-dark); font-size: 15px; }
.zb-promise__edit {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--zbh-muted);
    text-decoration: underline;
}
.zb-promise--express { border-color: rgba(66, 157, 156, 0.4); }
.zb-promise--invite { justify-content: center; background: #fff; }
.zb-promise__chip {
    border: 1.5px dashed var(--zbh-teal);
    background: #f3fafa;
    color: var(--zbh-teal-dark);
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.zb-promise__chip:hover { background: var(--zbh-teal); color: #fff; transform: translateY(-1px); }

/* ── Welcome ─────────────────────────────────────── */
.zb-welcome { max-width: var(--zbh-max); margin: 26px auto 2px; padding: 0 24px; }
.zb-welcome__txt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'El Messiri', sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--zbh-ink);
    padding-bottom: 10px;
    border-bottom: 3px solid var(--zbh-coral);
}

/* ── Product rails ───────────────────────────────── */
.zb-rail {
    max-width: var(--zbh-max);
    margin: 34px auto;
    padding: 0 20px;
    position: relative;
}
.zb-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.zb-rail__heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.zb-rail__icon { font-size: 22px; line-height: 1; }
.zb-rail__title {
    font-family: 'El Messiri', sans-serif !important;
    font-size: 26px;
    font-weight: 700;
    color: var(--zbh-ink);
    margin: 0;
    position: relative;
    padding-bottom: 8px;
}
.zb-rail__title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: var(--zbh-coral);
}
.zb-rail__title--center { text-align: center; display: block; }
.zb-rail__title--center::after { inset-inline-start: 50%; transform: translateX(50%); }
.zb-rail__subtitle { font-family: 'Tajawal', sans-serif; font-size: 13px; color: var(--zbh-muted); font-weight: 600; }
.zb-rail__nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.zb-rail__cta {
    font-family: 'Tajawal', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--zbh-teal-dark);
    text-decoration: none;
    white-space: nowrap;
}
.zb-rail__cta:hover { color: var(--zbh-coral); }
.zb-rail__arrow {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--zbh-teal), var(--zbh-teal-dark)) !important;
    box-shadow: 0 4px 12px rgba(66, 157, 156, 0.28);
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.zb-rail__arrow:hover { transform: translateY(-2px); }
.zb-rail__arrow:disabled { opacity: 0.35; cursor: default; transform: none; }

/* Horizontal scroller. The theme forces `.woocommerce ul.products{display:grid
   !important}` + `li.product{width:100%!important}` (same specificity as a 2-class
   selector), so we must out-specify it with a 4-class chain to win regardless of
   source order — otherwise the rail wraps into a grid instead of scrolling. */
.zb-home .zb-rail__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.zb-home .zb-rail__scroller::-webkit-scrollbar { display: none; }
.zb-home .zb-rail__scroller ul.products.zb-rail__track {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: max-content !important;
    max-width: none !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    list-style: none !important;
}
.zb-home .zb-rail__scroller ul.products.zb-rail__track::before,
.zb-home .zb-rail__scroller ul.products.zb-rail__track::after { content: none !important; display: none !important; }

/* Fixed-width cards; the theme paints the card visuals (border/shadow/hover),
   we only own the layout (width + snap + equal height). */
.zb-home .zb-rail__scroller ul.products.zb-rail__track li.product {
    flex: 0 0 210px !important;
    width: 210px !important;
    max-width: 210px !important;
    margin: 0 !important;
    scroll-snap-align: start;
}
/* When a rail's items don't fill the row (e.g. a single recently-viewed item),
   center them so the row reads as intentional instead of a lopsided void. */
.zb-home .zb-rail--fits .zb-rail__scroller { display: flex; justify-content: center; }

/* Delivery badge inside rails: take it OUT of the image overlay (where it collided
   with the HOT/category badge) and render it as an in-flow chip. The JS relocates it
   to sit just above the product name; this CSS makes it static so it never overlaps. */
/* Delivery tag = overlay on the image (bottom-right), no dedicated row. */
.zb-home .zb-rail li.product .zooboxi-delivery-badge {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    left: auto !important;
    top: auto !important;
    inset-inline: auto 8px !important;
    margin: 0 !important;
    z-index: 4 !important;
    display: inline-flex !important;
}

/* Push the add-to-cart button to the bottom so card faces line up. */
.zb-home .zb-rail__track li.product .astra-shop-summary-wrap,
.zb-home .zb-rail__track li.product .product-details-wrap { flex: 1 1 auto !important; }
.zb-home .zb-rail__track li.product .ast-on-card-button,
.zb-home .zb-rail__track li.product > .button,
.zb-home .zb-rail__track li.product > a.button { margin-top: auto !important; }

.zb-rail--clearance .zb-rail__title { color: var(--zbh-coral); }
.zb-rail--clearance .zb-rail__title::after { background: var(--zbh-coral); }
/* Make the clearance urgency line a prominent coral pill. */
.zb-rail--clearance .zb-rail__subtitle {
    background: rgba(212, 104, 86, 0.12);
    color: var(--zbh-coral);
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 30px;
}

/* ── Buy-again / login invite card ───────────────── */
.zb-login-card {
    max-width: var(--zbh-max);
    margin: 30px auto;
    padding: 22px 26px;
    border-radius: var(--zbh-radius);
    background: linear-gradient(135deg, #eef7f7 0%, #ffffff 70%);
    border: 1px solid rgba(66, 157, 156, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.zb-login-card__body { display: flex; align-items: center; gap: 14px; }
.zb-login-card__emoji {
    font-size: 30px;
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 16px;
    box-shadow: 0 4px 12px rgba(66, 157, 156, 0.12);
    flex-shrink: 0;
}
.zb-login-card__title {
    font-family: 'El Messiri', sans-serif;
    font-size: 19px; font-weight: 700; color: var(--zbh-ink); margin: 0 0 4px;
}
.zb-login-card__sub { font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--zbh-muted); margin: 0; }
.zb-login-card__actions { display: flex; align-items: center; gap: 12px; }
.zb-login-card__btn {
    border: none; cursor: pointer;
    font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--zbh-coral), #c0573f);
    padding: 13px 28px; border-radius: 14px;
    box-shadow: 0 8px 20px rgba(212, 104, 86, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zb-login-card__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(212, 104, 86, 0.4); }
.zb-login-card__later {
    border: none; background: none; cursor: pointer;
    font-family: 'Tajawal', sans-serif; font-size: 13px; color: var(--zbh-muted); text-decoration: underline;
}

/* ── Skeletons ───────────────────────────────────── */
.zb-rail--skel { pointer-events: none; }
.zb-skel {
    background: linear-gradient(90deg, #eef2ed 25%, #f7f9f7 37%, #eef2ed 63%);
    background-size: 400% 100%;
    border-radius: 14px;
}
@media (prefers-reduced-motion: no-preference) {
    .zb-skel { animation: zb-shimmer 1.4s ease infinite; }
}
@keyframes zb-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.zb-skel-title { width: 200px; height: 28px; margin-bottom: 16px; }
.zb-skel-track { display: flex; gap: 16px; overflow: hidden; }
.zb-skel-card { flex: 0 0 auto; width: 210px; height: 300px; }

/* ── Existing shell sections (ported from page 8161) ── */
.zbx-animals-nav {
    display: flex; justify-content: center; gap: 32px;
    max-width: var(--zbh-max); margin: 36px auto 44px; padding: 0 20px; flex-wrap: wrap;
}
.zbx-animal-card {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none !important; color: var(--zbh-ink) !important;
    transition: all 0.3s ease; width: 140px;
}
.zbx-animal-card__img-wrap {
    width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
    margin-bottom: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}
.zbx-animal-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.zbx-animal-card:hover .zbx-animal-card__img-wrap { transform: translateY(-5px) scale(1.03); box-shadow: 0 10px 25px rgba(66, 157, 156, 0.15); }
.zbx-animal-card:hover .zbx-animal-card__img-wrap img { transform: scale(1.05); }
.zbx-animal-card__name { font-family: 'El Messiri', sans-serif !important; font-size: 16px; font-weight: 700; text-align: center; margin-top: 4px; }

.zbx-categories-grid { max-width: var(--zbh-max); margin: 44px auto; padding: 0 20px; }
.zbx-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.zbx-cat-pill {
    display: inline-flex; align-items: center; gap: 6px; background: #fff;
    border: 2px solid var(--zbh-line); border-radius: 30px; padding: 10px 22px;
    font-family: 'Tajawal', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--zbh-ink); text-decoration: none; transition: all 0.3s;
}
.zbx-cat-pill:hover { border-color: var(--zbh-teal); background: #eef7f7; color: var(--zbh-teal-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(66, 157, 156, 0.12); }

.zbx-features-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--zbh-max); margin: 48px auto; padding: 0 20px; }
.zbx-feature { background: #fff; border: 1px solid var(--zbh-line); border-radius: var(--zbh-radius); padding: 36px 24px; text-align: center; transition: all 0.3s; }
.zbx-feature:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); border-color: var(--zbh-teal); }
.zbx-feature__icon { font-size: 44px; margin-bottom: 14px; }
.zbx-feature h3 { font-family: 'El Messiri', sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--zbh-ink); }
.zbx-feature p { font-family: 'Tajawal', sans-serif; font-size: 14px; color: var(--zbh-muted); line-height: 1.6; margin: 0; }

.zb-home-brands { max-width: var(--zbh-max); margin: 36px auto; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .zb-rail__title { font-size: 21px; }
    .zb-rail__arrow { display: none; }
    .zb-home .zb-rail__scroller ul.products.zb-rail__track li.product {
        flex: 0 0 156px !important; width: 156px !important; max-width: 156px !important;
    }
    .zb-skel-card { width: 156px; height: 240px; }
    .zb-welcome__txt { font-size: 18px; }
    .zb-login-card { padding: 18px; }
    .zb-login-card__actions { width: 100%; }
    .zb-login-card__btn { flex: 1; }
    .zbx-animals-nav { gap: 16px; }
    .zbx-animal-card { width: 100px; }
    .zbx-animal-card__img-wrap { width: 90px; height: 90px; }
    .zbx-animal-card__name { font-size: 14px; }
    .zbx-features-section { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .zbx-feature { padding: 24px 16px; }
    .zbx-feature__icon { font-size: 32px; }
    .zbx-feature h3 { font-size: 15px; }
    .zb-promise { margin-top: 0; }
}

/* ── Mobile: full-bleed, edge-to-edge homepage (no side gutters) ── */
@media (max-width: 768px) {
    /* Kill the theme's 20px gutter on the .zb-home wrapper (the entry-content child). */
    body.home .site-content .entry-content > .zb-home {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* All sections span the full screen width. */
    .zb-home .zb-home-hero,
    .zb-home .zb-home-promise,
    .zb-home .zb-welcome,
    .zb-home .zb-home-slot,
    .zb-home .zb-rail,
    .zb-home .zbx-animals-nav,
    .zb-home .zbx-categories-grid,
    .zb-home .zbx-features-section,
    .zb-home .zb-home-brands,
    .zb-home .zb-clearance {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Banners / hero: true edge-to-edge (drop frame radius + shadow). */
    .zb-home .zb-home-hero { padding: 0 !important; margin-bottom: 22px; }
    .zb-home .zb-home-hero__frame { border-radius: 0 !important; box-shadow: none !important; }
    .zb-home .zb-hero { border-radius: 0 !important; box-shadow: none !important; }
    /* Rails: full-bleed; only a small lead inset so the first card isn't glued. */
    .zb-home .zb-home-slot { padding-left: 0 !important; padding-right: 0 !important; }
    .zb-home .zb-rail { padding-left: 0 !important; padding-right: 0 !important; }
    .zb-home .zb-rail__head { padding: 0 14px !important; }
    .zb-home .zb-rail__scroller ul.products.zb-rail__track { padding-inline: 12px !important; }
    /* Text / structured sections keep a tiny readable inset only. */
    .zb-home .zb-home-promise { padding: 0 12px !important; }
    .zb-home .zb-welcome { padding: 0 14px !important; }
    .zb-home .zbx-categories-grid { padding: 0 12px !important; }
    .zb-home .zbx-features-section { padding: 0 12px !important; }
    .zb-home .zbx-animals-nav { padding: 0 8px !important; }
    .zb-home .zb-clearance { padding: 0 8px !important; }
}

/* ── Inline ad banners between rails ───────────────── */
.zb-home-banner { display: block; max-width: var(--zbh-max); margin: 30px auto; box-sizing: border-box; }
.zb-home-banner.zb-camp { padding: 0 20px; line-height: 0; }
.zb-home-banner.zb-camp img,
.zb-home-banner > img { width: 100%; height: auto; display: block; border-radius: var(--zbh-radius); box-shadow: 0 8px 24px rgba(15,23,42,0.10); }

/* Static promo strip (on-brand, never a fake offer) */
.zb-home-banner--promo {
    display: flex; align-items: center; gap: 18px; padding: 24px 36px;
    border-radius: var(--zbh-radius); text-decoration: none; color: #fff;
    box-shadow: 0 10px 28px rgba(15,23,42,0.12); position: relative; overflow: hidden;
}
.zb-home-banner--teal  { background: linear-gradient(120deg, #2d7a79, #429d9c 60%, #4cb3b1); }
.zb-home-banner--coral { background: linear-gradient(120deg, #c0563f, #d46856 60%, #e08070); }
.zb-home-banner--promo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% 15%, rgba(255,255,255,0.16), transparent 45%);
}
.zb-home-banner__icon { font-size: 38px; line-height: 1; flex: 0 0 auto; }
.zb-home-banner__txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.zb-home-banner__title { font-family: 'El Messiri', 'Tajawal', sans-serif; font-weight: 700; font-size: clamp(16px, 2vw, 24px); }
.zb-home-banner__sub { font-family: 'Tajawal', sans-serif; font-weight: 500; font-size: clamp(12px, 1.3vw, 15px); opacity: 0.95; }
.zb-home-banner__cta {
    flex: 0 0 auto; background: #fff; color: var(--z-primary-dark, #2d7a79);
    font-family: 'Tajawal', sans-serif; font-weight: 800; font-size: 14px;
    padding: 11px 24px; border-radius: 40px; box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease; white-space: nowrap;
}
.zb-home-banner--promo:hover .zb-home-banner__cta { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }

@media (max-width: 768px) {
    .zb-home .zb-home-banner { max-width: 100% !important; margin: 20px 0 !important; }
    .zb-home-banner.zb-camp { padding: 0 !important; }
    .zb-home-banner.zb-camp img, .zb-home-banner > img { border-radius: 0 !important; }
    .zb-home-banner--promo { flex-wrap: wrap; padding: 18px 16px; gap: 12px; border-radius: 0; }
    .zb-home-banner__icon { font-size: 30px; }
    .zb-home-banner__cta { order: 3; width: 100%; text-align: center; }
}

/* ═══════════ RAIL CARD HEIGHT GUARD (un-break) ═══════════
   Rail cards must never stretch to a tall sibling or push the foot down. */
.zb-home .zb-rail__scroller ul.products.zb-rail__track { align-items: flex-start !important; }
.zb-home .zb-rail__scroller ul.products.zb-rail__track li.product { height: auto !important; align-self: flex-start !important; }
.zb-home .zb-rail__track li.product .zb-card-foot { margin-top: 8px !important; }
.zb-home .zb-rail__track li.product .zb-card-thumb img,
.zb-home .zb-rail__track li.product a img { max-height: 210px !important; }
@media (max-width: 768px) {
    .zb-home .zb-rail__track li.product .zb-card-thumb img,
    .zb-home .zb-rail__track li.product a img { max-height: 160px !important; }
}

/* ═══════════ BRAND HTML HERO (ported from brand-kit hero-banner.html) ═══════════
   A fixed 1600×600 stage scaled to the slide width by JS (.zb-bh transform). */
.zb-hero__slide--bh { background: linear-gradient(110deg,#FFF7EF 0%,#FFF7EF 43%,#EAF4EA 71%,#E0F0EB 100%); }
.zb-bh-wrap { position: absolute; inset: 0; overflow: hidden; }
.zb-bh-mobile { display: none; }
.zb-bh { position: absolute; top: 0; left: 0; width: 1600px; height: 600px; overflow: hidden; transform-origin: top left;
    background: linear-gradient(110deg,#FFF7EF 0%,#FFF7EF 43%,#EAF4EA 71%,#E0F0EB 100%); font-family: 'Tajawal', sans-serif; line-height: normal; }
.zb-bh * { margin: 0; padding: 0; box-sizing: border-box; }
.zb-bh-blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.zb-bh-coral { width: 300px; height: 300px; background: radial-gradient(circle,#F2C3B8 0%,transparent 68%); top: -90px; right: -40px; opacity: .7; }
.zb-bh-amber { width: 260px; height: 260px; background: radial-gradient(circle,#FBE6B0 0%,transparent 70%); bottom: -110px; right: 33%; opacity: .6; }
.zb-bh-dot { position: absolute; border-radius: 50%; }
.zb-bh-paw { position: absolute; opacity: .10; line-height: 0; }
.zb-bh-paw svg { width: 100%; height: 100%; }
.zb-bh-collage { position: absolute; top: 0; left: 0; width: 900px; height: 600px; z-index: 2; }
.zb-bh-stage { position: absolute; top: 26px; left: 160px; width: 580px; height: 580px; border-radius: 50%;
    background: radial-gradient(circle at 50% 44%,#ECF7F2 0%,#CDEBE6 56%,#B3E0DA 100%); box-shadow: inset 0 -18px 40px rgba(45,122,121,.12); }
.zb-bh-stage::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 2px dashed rgba(66,157,156,.26); }
.zb-bh-p { position: absolute; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(31,92,91,.26)); }
.zb-bh-anchor { height: 350px; left: 300px; top: 140px; z-index: 5; filter: drop-shadow(0 26px 26px rgba(31,92,91,.30)); }
.zb-bh-bird  { height: 252px; left: 150px; top: 236px; z-index: 4; transform: rotate(-5deg); }
.zb-bh-pouch { height: 178px; left: 126px; top: 90px;  z-index: 6; transform: rotate(-9deg); }
.zb-bh-cups  { height: 152px; left: 545px; top: 76px;  z-index: 6; transform: rotate(8deg); }
.zb-bh-can   { height: 150px; left: 594px; top: 250px; z-index: 6; transform: rotate(6deg); }
.zb-bh-toy   { height: 154px; left: 466px; top: 402px; z-index: 7; transform: rotate(4deg); }
.zb-bh-bowls { height: 148px; left: 120px; top: 392px; z-index: 6; transform: rotate(-6deg); }
.zb-bh-txt { position: absolute; top: 0; right: 0; width: 720px; height: 600px; z-index: 3;
    padding: 46px 58px 46px 40px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.zb-bh-logo { height: 58px; width: auto; align-self: flex-start; }
.zb-bh-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.zb-bh-pill { font-weight: 800; font-size: 14.5px; border-radius: 999px; padding: 6px 14px; }
.zb-bh-pill.coral { background: #F7E0DB; color: #B14B3B; }
.zb-bh-pill.teal { background: #DCEFEE; color: #1F5C5B; }
.zb-bh-h1 { font-family: 'Baloo Bhaijaan 2','El Messiri','Tajawal',sans-serif; font-weight: 800; font-size: 56px; line-height: 1.24; color: #1F5C5B; display: block; }
.zb-bh-h1 .hl { color: #D46856; }
.zb-bh-sub { font-size: 19.5px; color: #5C6B5C; max-width: 580px; line-height: 1.65; font-weight: 500; display: block; }
.zb-bh-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg,#429D9C,#2D7A79); color: #fff; font-family: 'Baloo Bhaijaan 2','El Messiri','Tajawal',sans-serif;
    font-weight: 700; font-size: 22px; border-radius: 999px; padding: 14px 32px; margin-top: 4px; box-shadow: 0 14px 30px rgba(45,122,121,.34); }
.zb-bh-cta svg { width: 21px; height: 21px; }
.zb-bh-chips { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.zb-bh-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E7EBE6;
    border-radius: 999px; padding: 9px 15px; font-weight: 700; font-size: 15px; color: #1F5C5B; box-shadow: 0 3px 10px rgba(44,62,45,.06); }
.zb-bh-chip svg { width: 19px; height: 19px; }
.zb-bh-chip.c1 svg { color: #D46856; } .zb-bh-chip.c2 svg { color: #2FA36B; } .zb-bh-chip.c3 svg { color: #D48644; }

/* Mobile: show the gpt 3:2 banner instead of the wide HTML stage. */
@media (max-width: 768px) {
    .zb-hero__slide--bh .zb-bh-wrap { display: none; }
    .zb-hero__slide--bh .zb-bh-mobile { display: block; width: 100%; height: 100%; object-fit: cover; }
}