/* ==========================================================================
   Wholesale Fishing Flies Kenya — premium homepage (CSS-only)
   Scoped to body.index so other pages are untouched.
   ========================================================================== */
body.index {
  background: #f3eee2;
}

/* ---- reduce empty space on the left: pull the categories column left ----
   The content row is 1200px centred inside the 1440px page, so the
   categories sidebar sits ~120px from the page edge while the hero is
   full-bleed. Pull the left column left by 40px (and widen it by the same
   amount so it still meets the centre column) — only where there is room. */
@media (min-width: 1280px) {
  body.index #left_column {
    margin-left: -40px;
    width: calc(25% + 40px);
  }
}

/* ---- align hero H1 / lead to palette ---- */
body.index h1,
body.index .wffk-seo-hero h1,
body.index .wffk-h1 {
  color: #1b352d !important;
}
body.index .wffk-lead {
  color: #45524b !important;
}

/* ---- section headings ---- */
body.index .title-home,
body.index h4.title-home,
body.index .title_block,
body.index .title_block_home {
  font-family: "Brawler", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 400;
  color: #1b352d;
  text-align: center;
  margin: 48px 0 28px;
  padding: 0 0 16px;
  position: relative;
  border: 0;
  background: none;
  letter-spacing: .01em;
}

/* the theme boxes the section title and runs a rule through it - both are
   left over from the stock skin and fight the premium heading above */
body.index .title-home::before,
body.index h4.title-home::before {
  content: none !important;
  display: none !important;
}

body.index .title-home > span,
body.index h4.title-home > span {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

/* ---- trending products tabs ---- */
body.index #home-page-tabs {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: center;
}

body.index #home-page-tabs > li {
  display: block;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.index #home-page-tabs > li a,
body.index #home-page-tabs > li a:hover,
body.index #home-page-tabs > li.active > a,
body.index #home-page-tabs > li a.active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid #e4dccb !important;
  border-radius: 999px !important;
  background: #fffdf9 !important;
  color: #45524b !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

body.index #home-page-tabs > li a:hover {
  color: #1b352d !important;
  border-color: #b8542c !important;
  transform: translateY(-1px);
}

body.index #home-page-tabs > li.active > a,
body.index #home-page-tabs > li a.active {
  background: #1b352d !important;
  border-color: #1b352d !important;
  color: #f3eee2 !important;
}

body.index #home-page-tabs > li a > i {
  color: inherit !important;
  margin: 0 !important;
  font-size: 13px !important;
}
body.index .title-home::after,
body.index h4.title-home::after,
body.index .title_block::after,
body.index .title_block_home::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #b8542c, #d9805a);
  transform: translateX(-50%);
}

/* ---- hero slider ---- */
body.index .nivoSlider,
body.index .theme-default .nivoSlider {
  width: 100% !important;
  /* the slides are 1135×370 (ratio 3.067): size the box to the picture so no
     empty band is left underneath on narrow screens */
  min-height: 0;
  height: auto;
  aspect-ratio: 1135 / 370;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(15, 23, 42, .45);
  background: #1b352d;
}
body.index .nivoSlider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.index .ybc-nivo-description-2,
body.index .ybc-nivo-description-4,
body.index .ybc-nivo-description-5,
body.index .ybc-nivo-description-6,
body.index .ybc-nivo-description-7,
body.index .ybc-nivo-description-8,
body.index .ybc-nivo-description-9,
body.index .ybc-nivo-description-10,
body.index .ybc-nivo-description-11 {
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.62) 100%);
  color: #fff;
  font-family: "Brawler", Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .01em;
  padding: 22px 34px;
  border-radius: 0;
}
body.index .nivo-controlNav {
  bottom: 16px;
  z-index: 2;
}
body.index .nivo-controlNav a {
  background: rgba(255,255,255,.55);
  border: 2px solid #fff;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 5px;
}
body.index .nivo-controlNav a.active {
  background: #b8542c;
  border-color: #b8542c;
}
body.index .nivo-directionNav a {
  background: rgba(27,53,45,.7);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  transition: background .2s ease, transform .2s ease;
}
body.index .nivo-directionNav a:hover {
  background: #b8542c;
  transform: translateY(-2px);
}

/* ---- categories (tree) → premium tiles ---- */
body.index .tree.dhtml,
body.index .tree {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
body.index .tree li,
body.index .tree .tree-branch {
  background: linear-gradient(180deg, #ffffff, #faf7ef);
  border: 1.5px solid #e4dccb;
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -20px rgba(15,23,42,.25);
}
body.index .tree li:hover,
body.index .tree .tree-branch:hover {
  transform: translateY(-4px);
  border-color: #b8542c;
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 22px 40px -20px rgba(15,23,42,.35);
}
body.index .tree a {
  color: #1b352d;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
body.index .tree a:hover { color: #b8542c; }

/* ---- product cards ---- */
body.index .ajax_block_product .product-container,
body.index .product-container {
  background: linear-gradient(180deg, #ffffff, #faf7ef);
  border: 1.5px solid #e4dccb;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -22px rgba(15,23,42,.28);
}
body.index .ajax_block_product:hover .product-container,
body.index .product-container:hover {
  transform: translateY(-6px);
  border-color: #b8542c;
  box-shadow: 0 4px 8px rgba(16,24,40,.06), 0 26px 46px -22px rgba(15,23,42,.4);
}
body.index .product-image-container {
  background: #f8f4ea;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
body.index .product-image-container img {
  transition: transform .4s ease;
}
body.index .ajax_block_product:hover .product-image-container img,
body.index .product-container:hover .product-image-container img {
  transform: scale(1.06);
}
body.index .product-name,
body.index .product-name a {
  font-family: "Brawler", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: #1b352d;
  text-decoration: none;
  line-height: 1.3;
}
body.index .product-name a:hover { color: #b8542c; }
body.index .content_price .product-price,
body.index .price.product-price {
  color: #b8542c;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
}

/* ---- manufacturers ---- */
/* the module pins the brand logos at opacity .5 and only lifts them on hover,
   which leaves them washed out on touch devices — keep them fully visible */
body.index .ybc-mnf-block-a-img,
body.index .ybc-mnf-block-a-img:hover {
  opacity: 1 !important;
}
body.index .ybc-mnf-block-li,
body.index .ybc-mnf-block-a-img {
  background: #fff;
  border: 1.5px solid #e4dccb;
  border-radius: 14px;
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.index .ybc-mnf-block-li:hover,
body.index .ybc-mnf-block-a-img:hover {
  transform: translateY(-3px);
  border-color: #b8542c;
  box-shadow: 0 12px 28px -20px rgba(15,23,42,.3);
}
body.index .ybc-mnf-block-title {
  font-family: "Brawler", Georgia, serif;
  color: #1b352d;
  font-size: 22px;
}

/* ---- service / trust blocks ---- */
body.index .ybc-widget-item {
  background: linear-gradient(180deg, #ffffff, #faf7ef);
  border: 1.5px solid #e4dccb;
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -20px rgba(15,23,42,.25);
}
body.index .ybc-widget-item:hover {
  transform: translateY(-3px);
  border-color: #b8542c;
  box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 18px 36px -20px rgba(15,23,42,.3);
}
body.index .ybc-widget-item .content_toggle i {
  color: #b8542c !important;
  font-size: 26px;
  margin-bottom: 10px;
  display: inline-block;
}
body.index .ybc-widget-item h4 {
  font-family: "Brawler", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #1b352d !important;
  margin: 6px 0 4px;
  text-transform: capitalize;
}
body.index .ybc-widget-item p {
  color: #45524b !important;
  font-size: 13px;
  margin: 0;
}

/* ---- spacing ---- */
body.index .columns-container .row,
body.index #columns .row { max-width: 1200px; margin-left: auto; margin-right: auto; }
body.index .container { max-width: 1200px; }
body.index section,
body.index .clearfix { margin-bottom: 8px; }

/* ---- smooth entrance ---- */
@keyframes nlx-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
body.index .ajax_block_product,
body.index .ybc-widget-item,
body.index .ybc-mnf-block-li {
  animation: nlx-fade-up .5s cubic-bezier(.22,1,.36,1) both;
}

/* ---- responsive ---- */
/* browsers without aspect-ratio keep the old fixed-height hero */
@supports not (aspect-ratio: 1135 / 370) {
  body.index .nivoSlider,
  body.index .theme-default .nivoSlider { min-height: 460px; }
}

@media (max-width: 767px) {
  body.index .title-home, body.index .title_block { font-size: 24px; }
  body.index .tree.dhtml { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* the theme gives each tab a full row on small phones - the pills fit
     side by side, so keep them on one line */
  body.index #home-page-tabs > li { width: auto !important; }
  body.index #home-page-tabs > li a { padding: 9px 16px; }
}