/* ==========================================================================
   Fatima Shehzad - custom site styles
   --------------------------------------------------------------------------
   Ported verbatim (same order, same declarations) out of the WordPress
   Customizer "Additional CSS" panel so the styling lives in version control
   instead of the database. Loaded BEFORE css/fs-header.css so the cascade
   matches what the Customizer block used to produce.

   Blocks marked [LEGACY] target markup that no longer exists (the old
   `.header-nav` / `.actions` header). They are inert but kept for now so this
   port is a byte-for-byte behavioural match. Safe to delete after review.
   ========================================================================== */


/* ==========================================================================
   1. Best Selling Products  ([best_selling_products] shortcode)
   ========================================================================== */
.fs-best-selling {
  padding: 40px 0;
  background: #fff;
}

.fs-section-title {
  font-size: 28px;
  margin: 0 0 18px;
  color: #111;
  font-weight: 700;
  text-align: center;
}

.fs-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.fs-product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(12, 12, 12, 0.06);
  transition: transform 0.28s, box-shadow 0.28s;
  display: flex;
  flex-direction: column;
}

.fs-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.12);
}

.fs-product-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.fs-image-wrap {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  background: #f9f9f9;
}

.fs-image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

.fs-img-hover {
  opacity: 0;
  transform: scale(1);
  z-index: 2;
}

.fs-product-card:hover .fs-img-hover {
  opacity: 1;
  transform: scale(1.03);
}

.fs-product-card:hover .fs-img-main {
  opacity: 0;
  transform: scale(1.06);
}

.fs-product-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fs-product-title {
  font-size: 15px;
  margin: 0;
  color: #111;
  font-weight: 600;
}

.fs-price {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

/* Best seller carousel (home page) */
.best-salling-section .woocommerce.columns-4 ul {
  display: flex !important;
  column-gap: 10px !important;
  width: 100% !important;
  justify-content: space-between !important;
}

.best-salling-section .woocommerce.columns-4 ul li {
  margin: 0 !important;
}

.best-salling-section .woocommerce.columns-4 ul li {
  width: 25% !important;
}

.best-salling-section .woocommerce.columns-4 ul:before,
.best-salling-section .woocommerce.columns-4 ul:after {
  display: none;
}

@media (max-width: 992px) {
  .fs-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .fs-products-grid {
    grid-template-columns: 1fr;
  }

  .fs-section-title {
    font-size: 22px;
  }
}

section.best-salling-section {
  padding: 80px 0px;
  text-align: center;
}

section.best-salling-section h2 {
  margin-bottom: 19px;
}


/* ==========================================================================
   2. Product image + grid behaviour
   ========================================================================== */
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.1) !important;
}

.woocommerce ul.products li.product {
  overflow: hidden !important;
}

.custom-product-thumb {
  overflow: hidden;
}

section.best-salling-section .woocommerce ul.products li.product a img {
  height: 450px !important;
}

.latest-products-grid ul.products.columns-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  row-gap: 30px;
}

.latest-products-grid ul.products.columns-4 li {
  margin: 0 !important;
  width: 24%;
}

.latest-products-grid ul.products.columns-4:before,
.latest-products-grid ul.products.columns-4:after {
  display: none;
}

.latest-products-grid .woocommerce ul.products li.product a img {
  height: 450px;
}

/* The section had no vertical padding, so the "Latest Arrivals" heading sat
   flush against the hero slider above it and the product grid ran straight
   into it below. The space above the heading (section padding) and below it
   (heading margin) are kept equal so the band reads as one balanced block. */
section.latest-products {
  padding: 40px 0px;
}

section.latest-products > h2 {
  text-align: center;
  margin-bottom: 40px;
}

.latest-products-grid ul.products.columns-4 {
  max-width: 1400px !important;
  margin: auto;
}

.best-salling-section .woocommerce.columns-4 ul {
  max-width: 1400px;
  margin: auto;
}


/* ==========================================================================
   3. [LEGACY] Old header overrides
   --------------------------------------------------------------------------
   These targeted the previous `.header-nav` / `.actions` markup and are now
   inert. `div#desk-logo h3` below is the exception: it still applies and is
   what keeps the wordmark tracking tight.
   ========================================================================== */
/*
.header-nav { font-size: large; flex-direction: column; }
.header-nav .row { display: flex; width: 100%; justify-content: space-between; flex-direction: row-reverse; align-items: center; }
.header-nav .row:last-child { justify-content: center; }
.header-nav .row:first-child > div { width: 32% !important; flex: unset !important; max-width: unset !important; }
header .actions li:first-child a { display: flex; width: 100%; }
.header-nav .row:first-child > div:first-child { padding-right: 0; }
li.cart-count:before { display: none; }
header .actions li.cart-count a { margin-right: 0; }
.col-3 { }
.header-nav .row:first-child > div:last-child > a { display: none; }
.header-nav .row:first-child > div:last-child > div { margin: 0; position: relative; }
.header-nav .row:first-child > div:last-child { padding-left: revert-layer; }
form.dgwt-wcas-search-form { left: 0 !important; top: 90px !important; }
.dgwt-wcas-sf-wrapp { background: transparent !important; }
header .header-nav .navigation li a { font-size: 14px !important; }
header .actions span, header .actions a { font-size: 13px !important; }
ul.actions { align-items: center; }
header .actions li:first-child a { align-items: center; }
header .header-nav .logo a { justify-content: center; }
a.dgwt-wcas-search-icon.js-dgwt-wcas-search-icon-handler { font-size: 14px; width: 16px; }
*/

/* Still active - wordmark tracking. */
div#desk-logo h3 {
  letter-spacing: 0 !important;
}


/* ==========================================================================
   4. Single product gallery
   ========================================================================== */
.woocommerce div.product div.images .flex-control-thumbs li {
  height: 100px;
}

ol.flex-control-nav.flex-control-thumbs {
  display: flex;
  gap: 6px;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

ol.flex-control-nav.flex-control-thumbs {
  margin-top: 12px !important;
}

@media screen and (min-width: 992px) {
  .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
    display: flex;
    flex-direction: row-reverse;
    gap: 6px;
  }

  ol.flex-control-nav.flex-control-thumbs {
    width: 148px;
    flex-direction: column;
    margin-top: 0 !important;
  }

  .flex-viewport { }

  .woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images .flex-viewport {
    width: 500px;
  }

  .woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
  }
}


/* ==========================================================================
   5. Footer + carousel
   ========================================================================== */
footer.sec-padding.--small {
  margin-top: 68px;
}

.product-slide img {
  width: 100%;
  height: auto !important;
}

.product-slide.slick-slide {
  margin: 0 7px;
}

section.best-selling-section {
  padding: 60px 0px;
  text-align: center;
}

section.best-selling-section > h2 {
  margin-bottom: 20px;
}

.product-slide h3 {
  margin: 0 !important;
  font-size: 15px !important;
  color: black;
  margin-top: 20px !important;
}

footer .footer-links h3 {
  color: white;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 22px;
}

footer h3 {
  text-transform: uppercase;
}

.footer-about h3 {
  color: white;
}

.product-slide img {
  height: 440px !important;
}

@media (max-width: 1024px) {
  .product-slide img {
    height: 400px !important;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .product-slide img {
    height: 380px !important;
    object-fit: contain;
  }

  .best-salling-section .woocommerce.columns-4 ul {
    flex-wrap: wrap;
  }

  .best-salling-section .woocommerce.columns-4 ul li {
    width: 48% !important;
  }

  ul.products.columns-4 {
    padding: 0 14px;
  }

  ul.products.columns-4 { }

  section.hero-slider {
    height: 227px;
  }

  section.hero-slider { }

  section.best-salling-section .woocommerce ul.products li.product a img {
    height: 300px !important;
  }

  .latest-products-grid .woocommerce ul.products li.product a img {
    height: 300px;
  }

  .summary.entry-summary {
    padding-left: 0;
  }

  section.main_singlePg.sec-padding.--small {
    padding-top: 0;
  }
}


/* ==========================================================================
   6. WooCommerce side cart
   --------------------------------------------------------------------------
   NOTE: in the Customizer this block was preceded by a malformed comment
   (`/Optimize Css/` instead of `/* ... *\/`), which made the browser discard
   the whole rule. The side-cart button therefore renders with the plugin's
   own default colours. It is kept disabled here to preserve that exact
   current appearance - enable it deliberately if you want the dark button.
   ========================================================================== */
/*
.xoo-wsc-btn, .xoo-wsc-ft-btn { color: #ffffff !important; background-color: #333333 !important; }
.xoo-wsc-btn:hover, .xoo-wsc-ft-btn:hover { background-color: #555555; }
*/


/* ==========================================================================
   7. Section visibility
   ========================================================================== */
.best-salling-section,
.best-selling-section {
  display: none !important;
}