/* ── Homepage Builder sections (public homepage) ──────────────────────────────
   Visual styling reuses the existing homepage classes (.ok-promo-tile, .ok-brand-card, …);
   this file adds the flexible grids, slider, custom content and visibility rules. */

.hb-block { min-width: 0; }
.hb-has-colors { background: var(--hb-bg, transparent); color: var(--hb-fg, inherit); padding: 16px 0; }
.hb-has-colors .ok-deals-live-title,
.hb-has-colors .hb-subtitle,
.hb-has-colors .hb-text-heading { color: var(--hb-fg, inherit); }

/* Device visibility (matches the site's 768px mobile breakpoint) */
@media (max-width: 768px) { .hb-hide-mobile { display: none !important; } }
@media (min-width: 769px) { .hb-hide-desktop { display: none !important; } }

.hb-section { max-width: 1400px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.hb-section.hb-full { max-width: none; padding: 0; }
.hb-subtitle { margin: -4px 0 12px; font-size: 0.88rem; color: var(--ok-text-muted, #64748b); }
.hb-head { gap: 12px; }

/* ── Banner / slider ── */
.hb-slider { position: relative; border-radius: 14px; overflow: hidden; background: var(--secondary, #f1f5f9); }
.hb-full .hb-slider { border-radius: 0; }
/* All slides share one grid cell: the slider takes the height of its tallest image and never
   crops or stretches artwork (images keep their natural aspect ratio). */
.hb-slider-track { display: grid; }
.hb-slide { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative;
    opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; text-decoration: none; color: inherit; }
.hb-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease; z-index: 1; }
.hb-slide picture { display: flex; justify-content: center; width: 100%; }
/* Natural aspect ratio, capped height: a tall slide is scaled down (never cropped or stretched)
   so mixed-size banners cannot push the page content far below the fold. */
.hb-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--hb-slider-max-h, 520px); object-fit: contain; }
.hb-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0)); color: #fff; }
.hb-slide-title { font-size: clamp(1.05rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.15; }
.hb-slide-sub { font-size: clamp(0.78rem, 1.6vw, 1rem); opacity: 0.92; }
.hb-slide-cta { display: inline-flex; margin-top: 4px; padding: 8px 18px; border-radius: 999px; background: #fff; color: #0f172a; font-weight: 800; font-size: 0.85rem; }
.hb-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, 0.92); color: #0f172a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18); }
.hb-slider-arrow svg { width: 20px; height: 20px; }
.hb-prev { left: 10px; }
.hb-next { right: 10px; }
.hb-slider-dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; display: flex; justify-content: center; gap: 2px; }
.hb-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hb-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25); transition: width 0.2s; }
.hb-dot.is-active::before { width: 20px; background: #fff; }
.hb-slider:has(.hb-slide-caption) .hb-slider-dots { bottom: auto; top: 8px; }
@media (max-width: 1024px) { .hb-slider { --hb-slider-max-h: 420px; } }
@media (max-width: 768px) {
    .hb-slider { border-radius: 10px; --hb-slider-max-h: 360px; }
    .hb-slider-arrow { width: 32px; height: 32px; }
    .hb-slide-caption { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .hb-slide { transition: none; } }

/* ── Promotional tiles (any number of tiles, admin-chosen column count) ── */
.hb-tiles-grid { display: grid; grid-template-columns: repeat(var(--hb-cols, 4), minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 16px); }
.hb-tile-wide { grid-column: 1 / -1; }
.hb-tile { color: #fff; }
.hb-tile.ok-tile-flipkart:not(.hb-tile-fg) .ok-promo-tile-title,
.hb-tile.hb-tile-custom:not(.hb-tile-fg) .ok-promo-tile-title,
.hb-tile.hb-mode-cover:not(.hb-tile-fg) .ok-promo-tile-title { color: #ffffff; }
.hb-tile-custom { background: linear-gradient(135deg, #0f766e 0%, #115e59 100%); }
.hb-tile-light { background: #ffffff; color: #0f172a; border: 1px solid var(--ok-border, #e2e8f0); }
.hb-tile-light .ok-promo-tile-sub { color: #475569; }
.hb-tile-light .ok-promo-tile-btn, .hb-tile-custom .ok-promo-tile-btn { background: #ffffff; color: #0f172a; }
.hb-tile-light .ok-promo-tile-btn { background: #0f172a; color: #ffffff; }
.hb-tile-fg .ok-promo-tile-title, .hb-tile-fg .ok-promo-tile-sub, .hb-tile-fg .ok-promo-tile-brand { color: var(--hb-tile-fg) !important; }
.hb-tile.hb-mode-cover .ok-promo-tile-bg.hb-tile-cover { inset: 0; width: 100%; height: 100%; object-position: center; opacity: 1; }
.hb-tile.hb-mode-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.1)); pointer-events: none; }
.hb-tile.hb-mode-cover .ok-promo-tile-content { max-width: 90%; }
.hb-tile.hb-mode-image_only { padding: 0; min-height: 0; background: transparent; box-shadow: none; display: block; }
.hb-tile-full-img { display: block; width: 100%; height: auto; border-radius: 14px; }
.hb-tile-wide.ok-promo-tile { flex-direction: row; align-items: center; min-height: 130px; }
.hb-tile-wide .ok-promo-tile-content { max-width: 55%; }
.hb-tile-wide .ok-promo-tile-bg:not(.hb-tile-cover) { order: 2; }
.hb-tile-wide .ok-promo-tile-bg:not(.hb-tile-cover) { position: relative; right: auto; bottom: auto; width: 42%; height: 100%; max-height: 120px; object-fit: contain; margin-left: auto; }
.hb-tile-wide.hb-mode-image_only, .hb-tile-wide.hb-mode-cover { display: block; }
@media (max-width: 1024px) { .hb-tiles-grid { grid-template-columns: repeat(min(var(--hb-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 768px) {
    .hb-tiles-grid { grid-template-columns: repeat(min(var(--hb-cols, 4), 2), minmax(0, 1fr)); gap: 10px; }
    .hb-tile-wide.ok-promo-tile:not(.hb-mode-image_only) { flex-direction: column; align-items: flex-start; }
    .hb-tile-wide .ok-promo-tile-content { max-width: 100%; }
    .hb-tile-wide .ok-promo-tile-bg:not(.hb-tile-cover) { position: absolute; right: -5px; bottom: -5px; width: 55%; max-height: 80px; }
}
@media (max-width: 480px) {
    /* Small phones: artwork becomes a strip under the text so copy never sits on the image */
    .hb-tiles-grid .hb-tile:not(.hb-mode-cover):not(.hb-mode-image_only) { padding: 12px; min-height: 0; justify-content: flex-start; gap: 8px; }
    .hb-tiles-grid .hb-tile:not(.hb-mode-cover):not(.hb-mode-image_only) .ok-promo-tile-content { max-width: 100%; }
    .hb-tiles-grid .hb-tile:not(.hb-mode-cover):not(.hb-mode-image_only) .ok-promo-tile-bg { position: static; order: 2; width: 100%; height: 84px; max-height: none; object-fit: cover; object-position: center; border-radius: 8px; opacity: 1; }
    .hb-tiles-grid .ok-promo-tile-btn { white-space: nowrap; }
}
@media (max-width: 360px) { .hb-tiles-grid { grid-template-columns: minmax(0, 1fr); } }

.hb-perks .ok-benefit-item { text-decoration: none; color: inherit; }
.hb-block .ok-newsletter-input { min-width: 0; }
.hb-block .ok-newsletter-submit { flex: 0 0 auto; }
.hb-wide-banners .ok-savings-banner + .ok-savings-banner { margin-top: 12px; }

/* ── Brand showcase ── */
.hb-brands-grid { display: grid; grid-template-columns: repeat(var(--hb-cols, 4), minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.hb-brand-card { background: #0f172a; }
.hb-brand-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 14px 10px;
    background: #fff; border: 1px solid var(--ok-border, #e2e8f0); border-radius: 12px; text-decoration: none; color: #0f172a; text-align: center; }
.hb-brand-logo img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.hb-brand-logo-name { font-weight: 800; font-size: 1rem; }
.hb-brand-logo-caption { font-size: 0.75rem; color: #475569; }
@media (max-width: 1024px) { .hb-brands-grid { grid-template-columns: repeat(min(var(--hb-cols, 4), 4), minmax(0, 1fr)); } }
@media (max-width: 768px) { .hb-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 420px) and (max-width: 768px) { .hb-brands-logos .hb-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Category showcase ── */
.hb-cats .ok-deals-live-head { padding: 0 16px; max-width: 1400px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.ok-shop-cat-section.hb-cats .ok-deals-live-head { padding: 0; }

/* ── Custom image ── */
.hb-image-frame { display: block; border-radius: 14px; overflow: hidden; }
.hb-full .hb-image-frame { border-radius: 0; }
.hb-image-frame picture, .hb-image-frame img { display: block; width: 100%; height: auto; }

/* ── Custom text ── */
.hb-text-card { background: var(--card-bg, #fff); border: 1px solid var(--ok-border, #e2e8f0); border-radius: 14px; padding: clamp(16px, 3vw, 28px); }
.hb-has-colors .hb-text-card { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; }
.hb-align-center .hb-text-card { text-align: center; }
.hb-text-heading { margin: 0 0 6px; font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; color: var(--ok-text-primary, #0f172a); overflow-wrap: anywhere; }
.hb-text-sub { margin: 0 0 10px; font-weight: 600; color: var(--ok-text-muted, #64748b); }
.hb-text-body p { margin: 0 0 10px; line-height: 1.6; overflow-wrap: anywhere; }
.hb-text-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hb-align-center .hb-text-actions { justify-content: center; }
.hb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 10px; font-weight: 800; text-decoration: none; }
.hb-btn-primary { background: var(--ok-green-primary, #08783e); color: #fff; }
.hb-btn-secondary { background: transparent; color: var(--ok-green-primary, #08783e); border: 1px solid currentColor; }

/* ── Custom HTML ── */
.hb-html-body { overflow-wrap: anywhere; line-height: 1.6; }
.hb-html-body img { max-width: 100%; height: auto; }
.hb-html-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.hb-html-body th, .hb-html-body td { border: 1px solid var(--ok-border, #e2e8f0); padding: 6px 8px; }

/* ── Admin draft preview ── */
.hb-preview-ribbon { position: sticky; top: 0; z-index: 50; margin: 0 0 12px; padding: 6px 12px; text-align: center; font-size: 0.8rem; font-weight: 700;
    background: #fef3c7; color: #92400e; border-bottom: 1px solid #fcd34d; }
.hb-focus { outline: 3px solid #2563eb; outline-offset: 4px; border-radius: 14px; scroll-margin-top: 140px; }