/*
Theme Name: afm-divan-beds-child-theme
Template: cozycorner
Version: 1.0
*/













/* improtant /*


/* =========================================
   1) REMOVE TOP (PRIMARY) MENU from header-middle
   (Highlighted in your screenshot)
========================================= */
.ts-header .header-middle .header-left .menu-wrapper.hidden-xs {
  display: none !important;
}

/* Agar kabhi menu-wrapper class different ho */
.ts-header .header-middle .header-left>.menu-wrapper {
  display: none !important;
}

/* =========================================
   2) HEADER MIDDLE: Logo Left, Search Center, Icons Right
========================================= */

/* header-middle container layout */
.ts-header .header-middle>.container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* left section takes remaining space so search can be centered */
.ts-header .header-middle .header-left {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* logo stays left */
.ts-header .header-middle .logo-wrapper {
  flex: 0 0 auto !important;
}

/* SEARCH: center + fixed max width */
.ts-header .header-middle .header-left .ts-search-by-category,
.ts-header .header-middle .header-left form,
.ts-header .header-middle .header-left .search-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 650px !important;
  /* change as you like */
}

/* right icons stay right */
.ts-header .header-middle .header-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

/* =========================================
   3) HEADER BOTTOM MENU CENTER
========================================= */
.header-bottom {
  background-color: #f0ebe2;
}

.ts-header .header-bottom>.container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.ts-header .header-bottom .menu-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

/* center the UL items */
.ts-header .header-bottom nav.secondary-menu>ul.menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px !important;
  /* spacing between menu items */
  width: fit-content !important;
  margin: 0 auto !important;
}

/* =========================================
   4) MOBILE: keep normal behavior
========================================= */
@media (max-width:768px) {

  /* optional: keep search full width on mobile */
  .ts-header .header-middle .header-left .ts-search-by-category,
  .ts-header .header-middle .header-left form {
    max-width: 100% !important;
  }
}


/* =========================================================
   FINAL FULL RESPONSIVE CSS (Desktop + Mobile)
   Put at END of style.css
========================================================= */

/* ============ 0) SAFETY: prevent theme conflicts ============ */
.ts-header .ac-baar *,
.ts-header .ac-baar *::before,
.ts-header .ac-baar *::after {
  box-sizing: border-box !important;
}

/* =========================================================
   1) ANNOUNCEMENT BAR (DESKTOP)
========================================================= */
.ts-header .ac-baar {
  width: 100% !important;
  display: block !important;
  background: #0a6b73 !important;
  color: #fff !important;
  padding: 10px 0 !important;
}

/* Desktop container = one line centered */
.ts-header .ac-baar .ac-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  flex-wrap: nowrap !important;
}

/* Left text */
.ts-header .ac-baar .ac-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.ts-header .ac-baar .long-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

/* Right group */
.ts-header .ac-baar .ac-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
}

/* Timer row always */
.ts-header .ac-baar #countdown-topbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Timer pills */
.ts-header .ac-baar #countdown-topbar>span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  background: #fff !important;
  color: #0a6b73 !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;

  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* numbers + unit inline */
.ts-header .ac-baar #countdown-topbar .value,
.ts-header .ac-baar #countdown-topbar .unit {
  display: inline !important;
  line-height: 1 !important;
}

.ts-header .ac-baar #countdown-topbar .value {
  font-weight: 800 !important;
}

.ts-header .ac-baar #countdown-topbar .unit {
  font-weight: 500 !important;
}

/* Coupon pill */
.ts-header .ac-baar .cupon-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  background: #fff !important;
  color: #0a6b73 !important;

  border-radius: 999px !important;
  padding: 8px 14px !important;

  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ts-header .ac-baar .cupon-code strong {
  font-weight: 900 !important;
}

/* Sticky bar */
.ts-header .sticky_announcement {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* =========================================================
   2) HEADER MIDDLE (DESKTOP)
   - remove duplicate primary menu row (highlighted in screenshot)
   - logo left, search center, icons right
========================================================= */

.header-middle {
  background-color: #f0ebe2;

}

header-middle *,
.header-middle *:before,
.header-middle *:after {
  border-color: transparent;
}



/* Hide primary menu line in header-middle (desktop) */
@media (min-width:769px) {
  .ts-header .header-middle .header-left .menu-wrapper.hidden-xs {
    display: none !important;
  }

  .ts-header .header-middle .header-left>.menu-wrapper {
    display: none !important;
  }
}

/* Layout: left area flex, search centered */
.ts-header .header-middle>.container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* header-left keeps logo + search */
.ts-header .header-middle .header-left {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* logo fixed */
.ts-header .header-middle .logo-wrapper {
  flex: 0 0 auto !important;
}

/* search centered */
.ts-header .header-middle .header-left .ts-search-by-category,
.ts-header .header-middle .header-left form,
.ts-header .header-middle .header-left .search-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 70% !important;
  max-width: 650px !important;
}

.search-table .search-field input[type="text"],
.wp-block-search .wp-block-search__input,
.woocommerce-product-search .search-field {
  font-size: var(--ts-body-font-size);
  padding-right: 50px;
  padding-left: 20px;
  margin: 0;
  width: 100%;
  border-radius: 60px;
  background: #ffffff;
  border-color: var(--ts-border);
  color: inherit;
}

/* right icons fixed */
.ts-header .header-middle .header-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

/* =========================================================
   3) HEADER BOTTOM MENU CENTER (SECONDARY MENU)
========================================================= */
.ts-header .header-bottom>.container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.ts-header .header-bottom .menu-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

.ts-header .header-bottom nav.secondary-menu>ul.menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 22px !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

/* =========================================================
   4) MOBILE: SONNO STYLE TOP BAR + MENU ICON CLOSE (X)
========================================================= */
@media (max-width:768px) {

  /* --------- Announcement bar (SONNO style) --------- */
  .ts-header .ac-baar {
    padding: 8px 10px !important;
  }

  .ts-header .ac-baar .ac-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .ts-header .ac-baar .ac-left,
  .ts-header .ac-baar .ac-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .ts-header .ac-baar .long-text {
    text-align: center !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .ts-header .ac-baar .ac-right {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .ts-header .ac-baar #countdown-topbar {
    justify-content: center !important;
    gap: 8px !important;
  }

  .ts-header .ac-baar #countdown-topbar>span,
  .ts-header .ac-baar .cupon-code {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* --------- Hide duplicate menu row under logo (mobile) --------- */
  .ts-header .header-middle .header-left .menu-wrapper.hidden-xs {
    display: none !important;
  }

  /* --------- Hamburger -> Close (X) icon styling --------- */
  .ts-mobile-icon-toggle {
    display: flex !important;
    width: 22px !important;
    height: 16px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
  }

  .ts-mobile-icon-toggle span {
    display: block !important;
    height: 2px !important;
    width: 100% !important;
    background: currentColor !important;
    transition: all .25s ease !important;
  }

  .ts-mobile-icon-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .ts-mobile-icon-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .ts-mobile-icon-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

/*================================================
 1) after Fix 
 */






/* =========================================
   1) Top Announcement Bar ALWAYS Sticky (Desktop + Mobile)
========================================= */
.ts-header .ac-baar.sticky_announcement {
  position: fixed !important;
  /* ALWAYS fixed */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
}

/* page content niche push (so bar overlaps na kare) */
body {
  padding-top: 52px !important;
  /* adjust if needed */
}

@media (max-width:768px) {
  body {
    padding-top: 64px !important;
  }

  /* mobile pe bar thori taller hoti */
}


/* =========================================
   2) Mobile pe circled menu (Beds, Storage Beds...) HIDE
   (Ye header-middle ke niche jo main menu show hota)
========================================= */
@media (max-width:768px) {

  /* Primary menu row hide */
  .ts-header .header-middle .header-left .menu-wrapper,
  .ts-header .header-middle .menu-wrapper,
  .ts-header nav.main-menu,
  .ts-header .ts-menu,
  .ts-header .main-menu {
    display: none !important;
  }

  /* Agar kisi theme me menu list directly show hoti ho */
  .ts-header .header-middle nav>ul.menu {
    display: none !important;
  }
}




/* ===== Topbar fixed everywhere ===== */
:root {
  --acbar-h-desktop: 52px;
  --acbar-h-mobile: 64px;
}

.ts-header .ac-baar.sticky_announcement {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
}

/* Push page down */
body {
  padding-top: var(--acbar-h-desktop) !important;
}

@media (max-width:768px) {
  body {
    padding-top: var(--acbar-h-mobile) !important;
  }
}

/* ===== FIX MOBILE SIDEBAR (off-canvas) not to go under topbar ===== */
@media (max-width:768px) {

  /* common mobile menu containers in this theme (safe list) */
  .ts-floating-sidebar .ts-sidebar-content,
  #group-icon-header .ts-sidebar-content,
  #ts-search-sidebar .ts-sidebar-content,
  .ts-menu-mobile,
  .mobile-menu,
  .menu-mobile {
    top: var(--acbar-h-mobile) !important;
    /* start below topbar */
    height: calc(100vh - var(--acbar-h-mobile)) !important;
    max-height: calc(100vh - var(--acbar-h-mobile)) !important;
    overflow-y: auto !important;
    z-index: 99990 !important;
    /* below topbar */
  }

  /* overlay should also start below topbar */
  .ts-floating-sidebar div.overlay,
  .ts-header>.overlay {
    top: var(--acbar-h-mobile) !important;
    height: calc(100vh - var(--acbar-h-mobile)) !important;
    z-index: 99980 !important;
  }
}




/**===========================================
HEDAER END
==============================================**/




/* ++++++++++++++++++++++++++
 Categories
 ===========================*/



/* Bottom button bar */
.afm-popcats__btn {
  margin-top: 14px;
  background: #0a6b73;
  /* teal */
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .12s ease, opacity .12s ease;
}



/* ===== Popular Categories Section ===== */
.afm-popcats {
  padding: 20px 0;
}

.afm-popcats__title {
  text-align: center;
  font-size: clamp(20px, 4vw, 32px);
  line-height: 1.05;
  margin: 10px 0 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* GRID: 4 desktop, 2 tablet, 1 mobile */
.afm-popcats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 18px;
}

@media (max-width: 1024px) {
  .afm-popcats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .afm-popcats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }


  .afm-popcats__card {
    padding: 5px;
    border-radius: 20px;
  }

  .afm-popcats__img {
    height: 170px;
    /* mobile pe image choti to fit 2 columns */
  }

  .afm-popcats__btn {
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .afm-popcats__arrow {
    font-size: 16px;
  }
}


/* CARD */
.afm-popcats__card {
  background: #f6efe4;
  /* cream */
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.afm-popcats__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Image */
.afm-popcats__imgwrap {
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.afm-popcats__img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

@media (max-width: 560px) {
  .afm-popcats__img {
    height: 260px;
  }
}

.afm-popcats__card {
  background: #f6efe4;
  /* cream */
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Bottom button bar */
.afm-popcats__btn {
  margin-top: 14px;
  background: #0a6b73;
  /* teal */
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .12s ease, opacity .12s ease;
}

.afm-popcats__arrow {
  font-size: 26px;
  line-height: 1;
  margin-left: auto;
}

.afm-popcats__btntext {
  margin-right: auto;
}

.afm-popcats__card:hover .afm-popcats__btn {
  transform: translateY(-1px);
  opacity: .95;
}

/* Make whole card feel clickable */
.afm-popcats__card:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}


/*
===============================================
Product Card 
===============================================
*/
/* Custom CSS for product cards */
.product-card-item {
  list-style: none;
}

.product-card-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s;
}

.product-card-main:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.product-card-img img {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.product-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.product-card-title p {
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 8px;
  /* line-clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-price-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8px;
}

.product-price .price {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0;
}

.compare-price {
  font-size: 0.875rem;
  text-decoration: line-through;
  color: #6b7280;
  margin: 0;
}

.text-secondary {
  color: #4b5563;
  font-size: 0.875rem;
}

.card-sticker {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 8px;
}

.card-sticker span {
  font-size: 0.75rem;
  font-weight: 500;
}







/* =========================================
   HIDE "SHOP BY COLOR" SECTION
========================================= */
/* Hides the top area widget zone which displays the horizontal color sorting */
#shop-top-area {
  display: none !important;
}

/* Fallback: hide custom color filter widgets specifically */
.vi-wpvs-filter-widget,
.widget_vi_wpvs_filter_widget,
.woocommerce-widget-layered-nav.vi-wpvs-filter-widget {
  display: none !important;
}

/* Fallback: If colors are output as a category slider instead */
.list-categories {
  display: none !important;
}

/* Gallry */