/* ==========================================================================
   custom.css — additions for dynamic features the static template lacks.
   Loaded AFTER style.css. Keep this file small; never override template
   layout rules here, only add genuinely new components.
   ========================================================================== */

/* --- Live search dropdown under the header search bar -------------------- */
.header__search--form { position: relative; }

.header__search--results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    display: none;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.header__search--results.is-open { display: block; }

.search__result--item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background .15s;
}
.search__result--item:last-child { border-bottom: none; }
.search__result--item:hover { background: var(--bg-offwhite-color); }
.search__result--thumb {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 46px;
}
.search__result--title {
    font-size: 14px;
    font-weight: 500;
    color: var(--heading-color);
    line-height: 1.4;
    margin: 0;
}
.search__result--price {
    font-size: 13px;
    font-weight: 600;
    color: var(--secondary-color);
}
.search__result--empty {
    padding: 16px;
    font-size: 14px;
    color: #777;
    text-align: center;
}

/* --- Minicart empty state ------------------------------------------------ */
.minicart__empty--text {
    padding: 30px 20px;
    text-align: center;
    color: #777;
    font-size: 15px;
}

/* --- Footer contact list (About Us column) ------------------------------- */
.footer__widget--info { margin: 14px 0 0; padding: 0; list-style: none; }
.footer__widget--info__list {
    font-size: 14px;
    line-height: 1.8;
    color: var(--body-text-color);
}
.footer__widget--info__link { color: var(--body-text-color); }
.footer__widget--info__link:hover { color: var(--secondary-color); }

/* --- Header announcement in the red bottom bar --------------------------- */
.header__bottom--announce {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2px;
}

/* --- Cookie notice ------------------------------------------------------- */
.cookie__notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
}
.cookie__notice--btn {
    flex: 0 0 auto;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    background: var(--secondary-color);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
@media (max-width: 767px) {
    .cookie__notice { bottom: 60px; flex-direction: column; text-align: center; }
}

/* --- Category thumbnail inside the categories dropdown ------------------- */
.categories__menu--img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 10px;
}

/* --- Out of stock button state ------------------------------------------ */
.product__card--btn.is-disabled,
.product__items--action__btn.is-disabled {
    pointer-events: none;
    opacity: .55;
}

/* --- Toast notifications ------------------------------------------------- */
.zuri__toast--host {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.zuri__toast {
    padding: 12px 18px;
    border-radius: 6px;
    background: var(--primary-color);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s;
}
.zuri__toast.is-visible { opacity: 1; transform: translateY(0); }
.zuri__toast--error { background: #c0392b; }

/* --- Loading state on add-to-cart --------------------------------------- */
.js-addcart.is-loading { opacity: .6; pointer-events: none; }

/* --- Active state for wishlist / compare card buttons ------------------- */
.product__card--action__btn.is-active,
.product__items--action__btn.is-active { background: var(--secondary-color); color: #fff; }
.product__card--action__btn.is-active svg,
.product__items--action__btn.is-active svg { color: #fff; }

/* --- Quick view -----------------------------------------------------------
   The modal itself uses the template's own .quickview__* styles; only the
   details link below the actions is additional. */
.quickview__details--link { display:inline-block; margin-bottom:14px; font-size:14px; }
.quickview__cart--btn.is-disabled { pointer-events:none; opacity:.55; }

/* --- Cart / checkout additions ------------------------------------------ */
.coupon__code--warning {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #fff4e5;
    color: #8a5300;
    font-size: 13px;
}
.cart__empty, .shop__empty, .wishlist__empty, .compare__empty {
    padding: 60px 20px;
}
.cart__empty--title, .shop__empty--title, .wishlist__empty--title, .compare__empty--title {
    font-size: 22px;
    margin-bottom: 10px;
}
.cart__empty--desc, .shop__empty--desc, .wishlist__empty--desc, .compare__empty--desc {
    margin-bottom: 22px;
    color: #777;
}

/* --- Checkout ------------------------------------------------------------ */
.checkout__errors {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 6px;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #8a1c1c;
}
.checkout__errors ul { margin: 0; padding-left: 18px; }
.checkout__errors li { font-size: 14px; line-height: 1.7; }

.checkout__payment--methods { display: block; }
.checkout__payment--methods .payment__history--list {
    display: block;
    margin-bottom: 10px;
}
.checkout__payment--methods .checkout__checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 0;
}
.checkout__payment--methods .checkout__checkbox--input { margin-right: 10px; }
.checkout__payment--methods .checkout__checkbox--label { cursor: pointer; }

/* --- Account dashboard --------------------------------------------------- */
.account__status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.account__status--success { background: #e6f4ea; color: #1e7e34; }
.account__status--danger  { background: #fdecea; color: #a71d2a; }
.account__status--info    { background: #e7f1fb; color: #1c5d99; }
.account__status--pending { background: #fff4e5; color: #8a5300; }
.account__empty--text { color: #777; }

/* Stock labels shared by wishlist and compare */
.out__stock { color: #a71d2a; font-weight: 500; }

/* --- Contact / order success --------------------------------------------- */
.contact__success {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 6px;
    background: #e6f4ea;
    border: 1px solid #c3e6cb;
    color: #1e7e34;
}
.order__success--header { margin-bottom: 34px; }
.order__success--desc { color: #555; font-size: 16px; }


/* --- Floating action stack -------------------------------------------------
   The storefront has up to four fixed elements competing for the bottom-right
   corner: the sticky mobile toolbar, the cookie notice, the scroll-to-top
   button and the WhatsApp button. They are stacked from a single base offset
   so they can never overlap each other at any viewport.
   --------------------------------------------------------------------------- */
:root {
    --zuri-float-gap:   12px;
    --zuri-float-base:  20px;   /* desktop: clear of the viewport edge      */
    --zuri-toolbar-h:   68px;   /* sticky bottom toolbar, < lg only         */
    --zuri-cookie-h:    0px;    /* raised while the cookie notice is shown  */
}

/* Below lg the sticky toolbar occupies the bottom strip. */
@media (max-width: 991px) {
    :root { --zuri-float-base: calc(20px + var(--zuri-toolbar-h)); }
}

/* --zuri-cookie-h is set on <body> from JS with the notice's measured
   footprint. Declaring a static value here too would shadow it, because a
   body-scoped custom property beats the :root one for body's descendants. */

#scroll__top {
    bottom: calc(var(--zuri-float-base) + var(--zuri-cookie-h)) !important;
    right: 20px;
}

.zuri-wa-float {
    position: fixed;
    right: 20px;
    bottom: calc(var(--zuri-float-base) + var(--zuri-cookie-h) + 43px + var(--zuri-float-gap));
    z-index: 99;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    transition: transform .2s, bottom .2s;
}
.zuri-wa-float:hover { transform: scale(1.08); color: #fff; }
.zuri-wa-float svg { width: 26px; height: 26px; }

/* The cookie notice must never sit above the floats. */
.cookie__notice { z-index: 97; }

@media (max-width: 400px) {
    .zuri-wa-float { width: 46px; height: 46px; right: 14px; }
    .zuri-wa-float svg { width: 23px; height: 23px; }
    #scroll__top { right: 14px; }
}

/* --- Promo banner image height --------------------------------------------
   The template's own banner art is ~2.85:1, and the stylesheet only pins a
   height inside a few breakpoints. Any image with a different aspect ratio
   (the seeded category art, or anything an admin uploads) therefore stretches
   the row taller and pushes the overlaid text out of position — the badge
   ends up sitting on the title. Pinning the height with object-fit keeps the
   text block anchored regardless of source ratio.
   Values mirror what the template renders naturally at each width.
   -------------------------------------------------------------------------- */
.banner__max--height { height: 207px; object-fit: cover; }

@media (max-width: 1199px) { .banner__max--height { height: 200px; } }
@media (max-width: 1100px) { .banner__max--height { height: 164px; } }
@media (min-width: 768px) and (max-width: 991px) { .banner__max--height { height: 160px; } }
@media (min-width: 480px) and (max-width: 767px) { .banner__max--height { height: 192px; } }
@media (max-width: 479px) { .banner__max--height { height: 150px; } }

/* Keep the overlaid text clear of the badge on narrow banners. */
.banner__content { max-width: 62%; }
.banner__content.right { max-width: 58%; }
@media (max-width: 575px) { .banner__content, .banner__content.right { max-width: 70%; } }

/* --- "Order on WhatsApp" secondary action ----------------------------------
   The template's `variant__buy--now__btn` spans the full column, which suits a
   short primary label ("Buy it now") but leaves a long WhatsApp label looking
   stretched and competing with Add to Cart. Presented instead as a clearly
   secondary, branded action that stops growing on wide screens.
   -------------------------------------------------------------------------- */
.variant__whatsapp--btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    max-width: 260px;
    padding: 11px 20px;
    border-radius: 5px;
    background: #25D366;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    transition: background .2s, transform .15s;
}
.variant__whatsapp--btn:hover { background: #1da851; color: #fff; transform: translateY(-1px); }
.variant__whatsapp--btn svg { width: 19px; height: 19px; flex: 0 0 19px; }
@media (max-width: 575px) {
    .variant__whatsapp--btn { max-width: 100%; font-size: 14px; padding: 11px 16px; }
}

/* --- Discount strip --------------------------------------------------------
   The template's own strip art is natively 1207x53, so `height: 5.3rem` alone
   fills the container. Any other aspect ratio (the seeded art is 1206x425)
   collapses to ~150px wide, leaving the overlay text on a bare background.
   Forcing full width with object-fit makes the band render correctly whatever
   image is used, including admin uploads.
   -------------------------------------------------------------------------- */
.discount__banner--thumbnail { display: block; }
.discount__banner--thumbnail__img { width: 100%; object-fit: cover; }

/* --- Preloader -------------------------------------------------------------
   The template's default spells the site name out letter by letter, which
   reads as a novelty and lingers. This is a branded loader instead: the logo
   with a light sweep over it, a determinate-looking progress bar, and a fade
   that gets out of the way quickly.
   -------------------------------------------------------------------------- */
.zuri-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity .45s ease, visibility .45s ease;
}
.zuri-preloader.loaded { opacity: 0; visibility: hidden; }

.zuri-preloader__inner { width: 190px; text-align: center; }

.zuri-preloader__mark {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
}
.zuri-preloader__mark img {
    display: block;
    max-width: 150px;
    height: auto;
    opacity: .92;
}
/* Light sweeping across the logo */
.zuri-preloader__sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,.85) 50%,
        rgba(255,255,255,0) 70%);
    transform: translateX(-120%);
    animation: zuri-sheen 1.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes zuri-sheen { to { transform: translateX(120%); } }

.zuri-preloader__bar {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: var(--border-color, #e5e5e5);
    overflow: hidden;
}
.zuri-preloader__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 3px;
    background: var(--secondary-color, #ED1D24);
    animation: zuri-fill 1.25s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes zuri-fill {
    0%   { left: -40%; width: 40%; }
    55%  { left: 30%;  width: 55%; }
    100% { left: 100%; width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
    .zuri-preloader__sheen, .zuri-preloader__fill { animation: none; }
    .zuri-preloader__fill { left: 0; width: 100%; opacity: .5; }
}

/* --- Logo sizing -----------------------------------------------------------
   Above 768px the template sets `.main__logo--img { max-width: 100% }`, i.e.
   no constraint — an uploaded logo renders at its full pixel width, which is
   why a large file overwhelms the header. These rules give it an explicit,
   admin-controlled size that scales down cleanly and shrinks when the header
   becomes sticky. Aspect ratio is always preserved.
   -------------------------------------------------------------------------- */
.main__logo--img {
    width: var(--logo-w, 178px);
    max-width: 100%;
    max-height: var(--logo-max-h, 48px);
    height: auto;
    object-fit: contain;
    transition: width .25s ease, max-height .25s ease;
}

/* Slightly smaller once the header sticks, so it takes less vertical space. */
.header__sticky.sticky .main__logo--img {
    width: var(--logo-w-sticky, 150px);
    max-height: calc(var(--logo-max-h, 48px) - 6px);
}

@media (max-width: 767px) {
    .main__logo--img,
    .header__sticky.sticky .main__logo--img {
        width: var(--logo-w-mobile, 130px);
        max-height: var(--logo-max-h, 48px);
    }
}

/* Offcanvas drawer and footer use the same controls. */
.offcanvas__logo img { width: var(--logo-w-mobile, 130px); max-width: 100%; height: auto; object-fit: contain; }
.footer__logo--link img { width: var(--logo-w-footer, 158px); max-width: 100%; height: auto; object-fit: contain; }
.zuri-preloader__mark img { width: var(--logo-w, 178px); max-width: 150px; }