/*your custom css goes here*/ 
/* Remove blue hover outline from product cards (all carousels & grids) */
.hov-animate-outline::before,
.hov-animate-outline::after,
.hov-animate-outline:hover::before,
.hov-animate-outline:hover::after {
    border-color: transparent !important;
}

/* Product card: make top border visible (balanced shadow + stronger border) and use DM Sans */
.aiz-card-box {
    border-color: #d9c899 !important;
    box-shadow: 0 0 14px rgba(13, 27, 46, 0.06) !important;
}
.aiz-card-box,
.aiz-card-box a,
.aiz-card-box h1,
.aiz-card-box h2,
.aiz-card-box h3,
.aiz-card-box h4,
.aiz-card-box h5,
.aiz-card-box h6,
.aiz-card-box p,
.aiz-card-box span,
.aiz-card-box div {
    font-family: 'DM Sans', sans-serif !important;
}

/* Remove golden border on product cards (was clipped on top) + stabilize Add to cart text */
.aiz-card-box {
    border-color: transparent !important;
}
.aiz-card-box .cart-btn .cart-btn-text,
.aiz-card-box .cart-btn:hover .cart-btn-text {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}
.aiz-card-box .cart-btn,
.carousel-box .aiz-card-box .cart-btn {
    transform: translateY(0) !important;
    opacity: 1 !important;
}
.aiz-card-box .cart-btn:hover {
    opacity: 1 !important;
}

/* Clamp product card title to exactly 2 lines so Add to Cart buttons align across the row */
.aiz-card-box a.d-block.text-reset,
.aiz-card-box h3 a.d-block.text-reset,
.aiz-card-box h3.fw-400 a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 2.6em !important;
    line-height: 1.3 !important;
}
/* Price block also normalized to 1 line + nowrap so spacing stays uniform */
.aiz-card-box .fs-14.d-flex {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Move floating button stack to right side, lower, theme color === */
.floating-buttons-section {
    left: auto !important;
    right: 0 !important;
    top: 65% !important;
}
.aiz-floating-button a .circle,
.aiz-floating-button a:hover .circle {
    background: linear-gradient(180deg, #e0a93a 0%, #c8922a 100%) !important;
}
.aiz-floating-button a {
    box-shadow: 0 6px 18px rgba(200, 146, 42, 0.45) !important;
}

/* === Decrease hero image height === */
.kv-hero,
.kv-hero-grid,
.kv-hero-image {
    min-height: 480px !important;
}

/* === Remove hover animations on Best Selling and New Products cards === */
#section_best_selling .aiz-card-box,
#section_newest .aiz-card-box,
#section_best_selling .aiz-card-box:hover,
#section_newest .aiz-card-box:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: 0 0 14px rgba(13, 27, 46, 0.06) !important;
    border-color: transparent !important;
}
#section_best_selling .aiz-card-box .hov-scale-img:hover img,
#section_newest .aiz-card-box .hov-scale-img:hover img,
#section_best_selling .aiz-card-box .hov-scale:hover img,
#section_newest .aiz-card-box .hov-scale:hover img,
#section_best_selling .aiz-card-box img,
#section_newest .aiz-card-box img {
    transform: none !important;
    transition: none !important;
}
#section_best_selling .aiz-card-box .aiz-p-hov-icon,
#section_newest .aiz-card-box .aiz-p-hov-icon {
    display: none !important;
}

/* ============================================================
   Kervora — Navy Theme Override (sticky / floating elements)
   Replaces any leftover blue with site navy: #0d1b2e
   Added 2026-06-29
   ============================================================ */
:root {
    --primary: #0d1b2e !important;
}
.aiz-floating-button a .circle,
.aiz-floating-button a:hover .circle {
    background: #0d1b2e !important;
}
.aiz-floating-button a {
    background: #0d1b2e !important;
    box-shadow: 0 10px 26px rgba(13,27,46,0.45) !important;
}
.bg-primary {
    background-color: #0d1b2e !important;
}
.text-primary {
    color: #0d1b2e !important;
}
.border-primary {
    border-color: #0d1b2e !important;
}
.btn-primary {
    background-color: #0d1b2e !important;
    border-color: #0d1b2e !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #c8922a !important;
    border-color: #c8922a !important;
    color: #0d1b2e !important;
}
/* Sticky header background safe-override for legacy menu bar */
header > .d-none.d-lg-block.position-relative.bg-primary.h-50px {
    background-color: #0d1b2e !important;
}
/* Make sure logo container does NOT clip transparent PNG */
.kv-mainnav-logo, .kv-mainnav-logo img,
[data-testid="auth-logo-link"] img {
    background: transparent !important;
}

/* ============================================================
   Kervora — Footer white background + navy text override
   Added 2026-07-01
   ============================================================ */
section.footer-widget,
section.footer-widget[style],
.footer-widget .container,
.footer-widget .aiz-accordion-wrap,
.footer-widget .aiz-accordion-heading,
.footer-widget .aiz-accordion-panel,
.footer-widget .aiz-accordion-panel[style] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0d1b2e !important;
    border-color: #d8ddea !important;
}
.footer-widget,
.footer-widget h1, .footer-widget h2, .footer-widget h3, .footer-widget h4, .footer-widget h5, .footer-widget h6,
.footer-widget p, .footer-widget span, .footer-widget li, .footer-widget label {
    color: #0d1b2e !important;
}
.footer-widget .text-secondary,
.footer-widget .text-white,
.footer-widget .text-soft-light,
.footer-widget .text-light {
    color: #0d1b2e !important;
}
.footer-widget h4.text-secondary,
.footer-widget h5.text-secondary {
    color: #0d1b2e !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    border-bottom: 2px solid #c8922a;
    padding-bottom: 6px;
    display: inline-block;
}
.footer-widget a {
    color: #0d1b2e !important;
    font-weight: 500;
}
.footer-widget a:hover {
    color: #c8922a !important;
    text-decoration: underline;
}
.footer-widget input[type="email"] {
    background: #f6f4ef !important;
    border: 1.5px solid #d8ddea !important;
    color: #0d1b2e !important;
}
.footer-widget input[type="email"]::placeholder { color: #6a778c !important; }
.footer-widget .btn,
.footer-widget button {
    background: #0d1b2e !important;
    color: #fdf6ec !important;
    border-color: #0d1b2e !important;
}
.footer-widget .btn:hover,
.footer-widget button:hover {
    background: #c8922a !important;
    color: #0d1b2e !important;
}

/* Social icons — keep visible on white */
.footer-widget .footer-social-links a,
.footer-widget ul.list-inline a {
    color: #0d1b2e !important;
    border: 1px solid #0d1b2e;
    background: #ffffff !important;
}
.footer-widget .footer-social-links a:hover,
.footer-widget ul.list-inline a:hover {
    background: #0d1b2e !important;
    color: #fdf6ec !important;
}

/* Copyright row & sub-strip below footer */
footer, footer .container,
.footer-widget + section, .footer-widget + section .container,
.copyright, .copyright .container {
    background: #ffffff !important;
    color: #0d1b2e !important;
}
footer *, .copyright * { color: #0d1b2e !important; }

/* ============================================================
   Kervora mobile-view overrides (added 2026-07)
   1. Hide the right-edge floating action buttons on phones & tablets.
   2. Prevent stray horizontal overflow so the home page hugs the viewport.
   3. Best Selling carousel now mirrors Featured Products via blade rewrite;
      these rules guard against any residual overflow on very small screens.
   ============================================================ */

/* 1. Floating quick-action buttons — hide on all touch / narrow screens. */
@media (max-width: 991.98px) {
  .floating-buttons-section,
  .floating-buttons-section-control,
  .aiz-floating-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 2. Kill accidental horizontal scroll on mobile home & category pages. */
@media (max-width: 767.98px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body > .aiz-main-wrapper,
  body > .aiz-main-wrapper > *,
  main, main > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Ensure home banner / featured / best-selling sections respect the viewport. */
  #section_featured_div,
  #section_best_selling_div,
  #section_best_selling,
  #section_newest,
  #section_todays_deal,
  .aiz-main-slider,
  .aiz-carousel {
    max-width: 100% !important;
  }
}

/* 3. Best Selling on small phones — 2-up cards with proper padding + no truncation. */
@media (max-width: 575.98px) {
  #section_best_selling_div .aiz-carousel .slick-slide,
  #section_best_selling .aiz-carousel .slick-slide {
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }
  #section_best_selling_div .aiz-carousel .slick-slide > div,
  #section_best_selling .aiz-carousel .slick-slide > div,
  #section_best_selling_div .carousel-box .px-3,
  #section_best_selling .carousel-box .px-3 {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* Titles + price: allow up to 2 lines, no ellipsis-mangling of prices. */
  #section_best_selling_div .fs-14,
  #section_best_selling_div .fs-15,
  #section_best_selling_div .fs-16,
  #section_best_selling_div h3.fs-15,
  #section_best_selling .fs-14,
  #section_best_selling .fs-15,
  #section_best_selling .fs-16 {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* ============================================================
   Kervora — single-card-per-row on mobile (all product listings)
   Added 2026-07. Scoped to viewports < 576px only, so tablets
   and desktops keep their existing 2/3/4/5-up grids.
   Targets ONLY rows that actually contain a product card
   (.aiz-card-box or .carousel-box .product) via :has() so we
   don't accidentally stretch cart / checkout / form rows.
   ============================================================ */
@media (max-width: 575.98px) {
  .row.row-cols-2:has(.aiz-card-box) > .col,
  .row.row-cols-2:has(.aiz-card-box) > [class*="col-"],
  .row.row-cols-sm-2:has(.aiz-card-box) > .col,
  .row[class*="row-cols-2"]:has(.aiz-card-box) > .col,
  .row[class*="row-cols-2"]:has(.aiz-card-box) > [class*="col-"],
  /* Fallback for browsers without :has(): stretch any col nested
     in the standard product-listing grid classes. */
  .row.row-cols-2.gutters-16 > .col,
  .row.row-cols-2 > .col:has(> .aiz-card-box),
  .row.row-cols-2 > .col:has(> [class*="card-box"]) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Kervora product-listing grid opt-in class (added on product_listing.blade) */
  .kv-product-grid > .col,
  .kv-product-grid > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Carousels also render 1-up on xs (data-xs-items="1" set in blade). */
  .aiz-carousel .slick-slide {
    box-sizing: border-box !important;
  }
  /* Give the single card a bit of breathing room. */
  .aiz-card-box .h-140px { height: 200px !important; }
  .aiz-card-box .h-md-170px { min-height: 200px !important; }
}

/* ============================================================
   Kervora — always-visible Add to Cart button (all breakpoints)
   Added 2026-07. Replaces the AIZ hover-only overlay with a
   solid, always-visible bottom bar on every product card
   (product_box_1). Applies uniformly on mobile & desktop.
   ============================================================ */
.aiz-card-box .cart-btn,
.carousel-box .cart-btn,
[class*="col-"] .cart-btn {
  /* Solid visible pill anchored to the bottom of the image. */
  opacity: 1 !important;
  visibility: visible !important;
  background-color: #0A142B !important;   /* Kervora navy */
  color: #ffffff !important;
  text-align: center !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  display: flex !important;
  flex-direction: row !important;         /* text + icon side-by-side */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  transition: background-color .18s ease-in-out, transform .18s ease-in-out !important;
}
.aiz-card-box .cart-btn:hover,
.carousel-box .cart-btn:hover,
[class*="col-"] .cart-btn:hover {
  background-color: #b8892b !important;   /* Kervora gold accent */
  color: #ffffff !important;
}
.aiz-card-box .cart-btn .cart-btn-text,
.aiz-card-box .cart-btn > span {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  letter-spacing: .2px !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Shrink the oversized 2x cart icon to match the text baseline. */
.aiz-card-box .cart-btn .la-2x,
.aiz-card-box .cart-btn i.las {
  font-size: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
}
/* Neutralize AIZ's hover-reveal (aiz-p-hov-icon) so the button
   is fully painted from first render, not just on hover. */
.aiz-card-box .aiz-p-hov-icon.cart-btn,
.aiz-card-box a.cart-btn.aiz-p-hov-icon {
  transform: none !important;
  bottom: 0 !important;
}
/* Wishlist / compare icons in the top-right also need to stay
   visible (they use the same hover class as the button). */
.aiz-card-box .aiz-p-hov-icon:not(.cart-btn) {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Give the image container extra bottom padding so the always-
   visible button doesn't visually crop into the product image. */
.aiz-card-box > .position-relative.h-140px,
.aiz-card-box > .position-relative.h-md-170px {
  padding-bottom: 40px !important;
  box-sizing: content-box !important;
}

/* ============================================================
   Kervora — mobile testimonial layout (text below avatar)
   Added 2026-07. The homepage inline <style> uses a 3-col grid
   (200px | 1fr | 280px) which squeezes the quote to ~120px of
   width on phones. Force a vertical stack < 992px, hide the
   decorative seagull SVG on the smallest screens, and give the
   quote a comfortable reading width.
   ============================================================ */
@media (max-width: 991.98px) {
  .kv-test-wrap .kv-test-row {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 20px !important;
    padding: 20px 44px !important;      /* leaves room for the arrows */
    text-align: center !important;
  }
  .kv-test-wrap .kv-test-row > * {
    justify-self: center !important;
    max-width: 520px !important;
    width: 100% !important;
  }
  .kv-test-wrap .kv-test-avatar-img {
    width: 160px !important;
    height: 160px !important;
  }
  .kv-test-wrap .kv-test-content {
    text-align: center !important;
  }
  .kv-test-wrap .kv-test-content .quote {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 10px 0 14px !important;
    padding: 0 6px !important;
  }
  .kv-test-wrap .kv-test-content .author {
    font-size: 12.5px !important;
    letter-spacing: 1.6px !important;
    white-space: normal !important;
  }
}
@media (max-width: 575.98px) {
  .kv-test-wrap .kv-test-row {
    padding: 14px 40px !important;
    gap: 16px !important;
  }
  .kv-test-wrap .kv-test-avatar-img {
    width: 140px !important;
    height: 140px !important;
    border-width: 3px !important;
  }
  .kv-test-wrap .kv-test-content .quote {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  /* Hide the decorative seagull/lines SVG on very small screens
     so the row stays tidy; keep it visible on tablets 576-991px. */
  .kv-test-wrap .kv-test-row > div:has(> .kv-test-svg),
  .kv-test-wrap .kv-test-svg {
    display: none !important;
  }
  /* Move the prev/next arrows tight to the edges. */
  .kv-test-wrap .kv-test-arrow {
    width: 34px !important;
    height: 34px !important;
  }
}

/* ============================================================
   Kervora — mobile hero order (text ABOVE image)
   Added 2026-07. The homepage inline <style> sets
   .kv-hero-image { order: -1 } on <992px which pushes the
   fisherman photo above the headline & CTAs — forcing users to
   scroll past a tall image before seeing the pitch. Flip the
   order so text lands first, image second on all phones/tablets.
   ============================================================ */
@media (max-width: 991.98px) {
  .kv-hero .kv-hero-text  { order: 1 !important; }
  .kv-hero .kv-hero-image { order: 2 !important; min-height: 260px !important; }
  /* Tighten the text block so CTAs are visible above the fold. */
  .kv-hero .kv-hero-text  {
    padding-top: 32px !important;
    padding-bottom: 44px !important;
  }
}
@media (max-width: 575.98px) {
  .kv-hero .kv-hero-image { min-height: 220px !important; }
  .kv-hero .kv-hero-text  {
    padding-top: 24px !important;
    padding-bottom: 36px !important;
  }
}

/* ============================================================
   Kervora — mobile hero as image + text overlay
   Added 2026-07. On <992px, overlap .kv-hero-text on top of
   .kv-hero-image using CSS Grid single-cell stacking. This
   collapses the hero to ~560px instead of ~1000px.
   Also lay Shop Now + Explore Categories on the same row.
   ============================================================ */
@media (max-width: 991.98px) {
  .kv-hero .kv-hero-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(560px, auto) !important;
    position: relative !important;
  }
  .kv-hero .kv-hero-text,
  .kv-hero .kv-hero-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .kv-hero .kv-hero-image {
    z-index: 0 !important;
    min-height: 560px !important;
    height: 100% !important;
    order: 0 !important;                /* neutralize earlier flip */
    position: relative !important;
  }
  /* Dark gradient scrim so text stays legible on any photo. */
  .kv-hero .kv-hero-image::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(8,18,38,0.72) 0%,
      rgba(8,18,38,0.55) 45%,
      rgba(8,18,38,0.88) 100%
    ) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  .kv-hero .kv-hero-text {
    z-index: 2 !important;
    order: 0 !important;
    position: relative !important;
    background: transparent !important;
    padding: 46px 22px 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #fff7e6 !important;
  }
  /* Compact the icon strip so the layout stays under one screen. */
  .kv-hero .kv-hero-icons {
    gap: 10px !important;
    margin: 14px 0 4px !important;
  }
  /* CTAs on same row, edge-to-edge on phones. */
  .kv-hero .kv-hero-cta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 18px auto 0 !important;
    justify-content: center !important;
  }
  .kv-hero .kv-hero-cta .kv-btn {
    flex: 1 1 0 !important;
    padding: 12px 10px !important;
    font-size: 12.5px !important;
    letter-spacing: .3px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  /* Trim the outline button so 'Explore Categories' fits without wrap. */
  .kv-hero .kv-hero-cta .kv-btn-outline {
    padding: 12px 8px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 575.98px) {
  .kv-hero .kv-hero-grid {
    grid-template-rows: minmax(520px, auto) !important;
  }
  .kv-hero .kv-hero-image { min-height: 520px !important; }
  .kv-hero .kv-hero-text  { padding: 36px 18px 32px !important; }
  .kv-hero .kv-hero-cta   { max-width: 340px !important; gap: 8px !important; }
  .kv-hero .kv-hero-cta .kv-btn { padding: 11px 8px !important; font-size: 12px !important; }
  .kv-hero .kv-hero-cta .kv-btn-outline { font-size: 11.5px !important; }
}