/**
 * Main Stylesheet
 * 
 * Table of Contents:
 * 1. Global & Base Styles
 * 2. Layout & Containers
 * 3. Header Styles (Desktop & Mobile)
 * 4. Footer Styles
 * 5. Cart Styles
 * 6. Mini Cart Styles
 * 7. Wishlist Styles
 * 8. Product Category Page Styles
 * 9. Product Swiper Integration
 * 10. Product Template & Grid Styles
 * 11. Button & Icon Styles (Wishlist, Compare, Quick View)
 * 12. Countdown Timer Styles
 * 13. Contact Form Styles
 * 14. Popup & Newsletter Styles
 * 15. Responsive Design Overrides
 */

/* ==========================================================================
   1. Global & Base Styles
   ========================================================================== */

/* Box sizing border-box for all elements */
* {
  box-sizing: border-box;
}

/* Smooth scrolling behavior */
html {
  scroll-behavior: smooth;
}

/* Alignment container */
.alignwide,
main {
  max-width: calc(100vw - 32px);
  margin-inline: auto;
}

/* Site blocks overflow hidden to prevent horizontal scroll */
.wp-site-blocks {
  overflow-x: hidden;
}

/* ==========================================================================
   2. Layout & Containers
   ========================================================================== */

/* Cart sidebar styling */
.wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block {
  height: fit-content;
  padding: 24px;
  border: 1px solid var(--wp--preset--color--accent-4);
}

/* Cart submit button */
.wc-block-cart__submit-button {
  padding: 10px;
}

/* Next/Previous buttons SVG spacing */
.wc-block-next-previous-buttons__button svg {
  padding: 0px;
}

/* Category page content container */
.category-page-content {
  max-width: calc(100vw - 32px);
  margin: auto;
}

/* WooCommerce cart main container */
.wc-block-cart {
  max-width: 1720px;
  margin: auto;
}

/* ==========================================================================
   3. Header Styles (Desktop & Mobile)
   ========================================================================== */

/* --- Desktop Styles (min-width: 1024px) --- */
@media (min-width: 1024px) {
  .header-bato {
    overflow: hidden;
    position: sticky !important;
    top: 0;
    z-index: 9999;
    background-color: var(--wp--preset--color--base, #ffffff);
    border-style: solid;
    border-color: var(--wp--preset--color--contrast);
    border-width: 1px;

    /* Site logo wrapper with vertical line decoration */
    .wp-block-site-logo-wrapper {
      position: relative;

      &::before {
        content: "";
        width: 1px;
        height: 2000px;
        background-color: var(--wp--preset--color--contrast);
        position: absolute;
        right: -10px;
        top: -1000px;
      }
    }

    /* Categories dropdown styling */
    .wp-block-categories {
      display: flex;
      position: relative;

      &::before {
        content: "";
        width: 1px;
        height: 2000px;
        background-color: var(--wp--preset--color--contrast);
        position: absolute;
        right: -7px;
        top: -1000px;
      }

      select {
        border: none;
        background-color: transparent;
      }
    }

    /* Navigation menu items with vertical dividers */
    .wp-block-navigation {
      li {
        position: relative;

        &:first-child::after {
          content: "";
          width: 1px;
          height: 2000px;
          background-color: var(--wp--preset--color--contrast);
          position: absolute;
          left: -7px;
          top: -1000px;
          pointer-events: none;
        }

        &::before {
          content: "";
          width: 1px;
          height: 2000px;
          background-color: var(--wp--preset--color--contrast);
          position: absolute;
          right: -12px;
          top: -1000px;
          pointer-events: none;
        }
      }
    }

    /* Category dropdown form styling */
    .postform {
      border-bottom: 0 !important;

      option {
        background-color: var(--wp--preset--color--base) !important;
      }

      &:focus-visible {
        border: none !important;
        outline: none !important;
      }
    }

    /* Secondary header elements */
    .second-head {
      .wp-block-woocommerce-customer-account {
        position: relative;

        &::before {
          content: "";
          width: 1px;
          height: 2000px;
          background-color: var(--wp--preset--color--contrast);
          position: absolute;
          right: -8px;
          top: -1000px;
          pointer-events: none;
        }
      }

      .wc-block-mini-cart {
        margin-right: 10px;
      }
    }
  }

  /* Hide navigation header on desktop */
  .navigation-header {
    display: none;
  }

  /* Parent overflow clip for header */
  .header-bato-wrapper,
  body > header,
  .site-header,
  .wp-site-blocks > header {
    overflow: clip;
  }
}

/* --- Mobile Styles (max-width: 599px) --- */
@media (max-width: 599px) {
  .header-bato {
    .wp-block-categories {
      display: none;
    }
  }

  .main-navigation-header {
    display: none !important;
  }
}

/* --- Tablet Styles (600px to 1024px) --- */
@media (min-width: 600px) and (max-width: 1024px) {
  .main-navigation-header {
    display: flex !important;
  }

  .navigation-header {
    display: none;
  }

  .header-bato {
    .wp-block-group-is-layout-flex {
      flex-wrap: nowrap;
    }

    .postform {
      display: none;
    }
  }
}

/* ==========================================================================
   4. Footer Styles
   ========================================================================== */

.custom-footer {
  /* List styling reset */
  .wp-block-list {
    margin: 0;
  }

  /* Links column styling */
  .links-col {
    height: 100%;

    ul {
      list-style-type: square;
    }
  }

  /* Store description max width */
  .store-description {
    max-width: 606px;
  }

  /* Visited link color */
  a:visited {
    color: var(--wp--preset--color--contrast);
  }

  /* Mobile top footer (hidden by default) */
  .mobile-top-footer {
    display: none;
  }
}

/* Social link styling */
.wp-block-social-link {
  border-radius: 0px;
}

/* Social links inner styling */
.custom-footer .wp-block-social-links {
  li {
    border-radius: 1px;
  }

  .wp-block-social-link-anchor {
    background-color: var(--wp--preset--color--contrast);
  }
}

/* Let's Talk visibility */
.Lets-Talk-mobile {
  display: none !important;
}

/* Back to top button */
.back-to-top {
  cursor: pointer;
}

/* ==========================================================================
   5. Cart Styles
   ========================================================================== */

/* Cart page title max width */
.woocommerce-cart .wp-block-post-title {
  max-width: 1720px;
}

/* Text input styling */
.wc-block-components-text-input input[type="text"] {
  height: 100%;
  border-radius: 0px;
  border-color: var(--wp--preset--color--accent-4);
  background: transparent !important;
}

.wc-block-components-text-input input[type="text"] + label {
  color: var(--wp--preset--color--accent-4);
}

/* Empty cart title icon override */
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
  display: none;
}

/* Cart items table image styling */
.editor-styles-wrapper
  table.wc-block-cart-items
  .wc-block-cart-items__row
  .wc-block-cart-item__image
  img,
table.wc-block-cart-items
  .wc-block-cart-items__row
  .wc-block-cart-item__image
  img {
  height: 100%;
  object-fit: cover;
}

/* Cart page specific styles */
.woocommerce-cart {
  .wc-block-cart__main .wc-block-cart-items td.wc-block-cart-item__image {
    vertical-align: middle;
    padding-inline-start: 0.875rem;
  }

  .wc-block-cart-items {
    margin-bottom: 16px;
  }

  /* Tablet and up */
  @media (min-width: 731px) {
    .wc-block-cart__main .wc-block-cart-items td.wc-block-cart-item__image {
      padding-inline-start: 20px;
      width: 15%;
    }
  }

  /* Mobile */
  @media (max-width: 732px) {
    .wc-block-cart-item__image {
      padding-inline-start: 20px;
      vertical-align: middle;
      width: 100%;
    }
  }

  /* Remove link (trash icon) styling */
  .editor-styles-wrapper
    table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link,
  table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2401c'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
      center center / cover no-repeat;
    background-size: 16px 16px;
    height: 14px;
    width: 14px !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Hide default SVG in remove link */
  .editor-styles-wrapper
    table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link
    svg,
  table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link
    svg {
    display: none;
  }
}

/* Quantity selector styling */
.wc-block-components-quantity-selector__button--plus {
  font-size: 20px;
  line-height: 0;
}

.wc-block-components-quantity-selector {
  border-radius: 0px;
  height: 40px;
  padding: 6px 0px;
}

.wc-block-components-quantity-selector
  input.wc-block-components-quantity-selector__input {
  border-right: 1px solid currentColor !important;
  border-left: 1px solid currentColor !important;
  margin: 3px 0px;
}

/* Cart items row relative positioning */
.wc-block-cart-items__row {
  position: relative;
}

/* Shared WooCommerce page containers */
.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
  max-width: 1720px;
}

/* Responsive cart items grid */
.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 140px 132px !important;
}

/* ==========================================================================
   6. Mini Cart Styles
   ========================================================================== */

/* Mini cart badge */
body .wp-block-woocommerce-mini-cart {
  padding-right: 10px !important;
}

body .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
}

/* Mini cart button */
.wc-block-mini-cart__button {
  padding: 0px;
}

/* Drawer overlay background */
.wc-block-components-drawer__screen-overlay {
  background: #00000080;
}

/* Mini cart contents background */
.wp-block-woocommerce-empty-mini-cart-contents-block,
.wp-block-woocommerce-filled-mini-cart-contents-block {
  background: var(--wp--preset--color--base);
}

/* Mini cart template part styles */
.wc-block-mini-cart__template-part {
  /* Hide product details */
  .wc-block-components-product-details.wc-block-components-product-details {
    display: none;
  }

  /* Remove link positioning */
  .wc-block-cart-item__remove-link {
    position: absolute;
    top: 14px;
    right: 0px;
  }

  /* Cart items row relative */
  .wc-block-cart-items__row {
    position: relative;
  }

  /* Total alignment */
  .wc-block-cart-item__total {
    align-self: end;
    padding: 5px 0px;
  }

  /* Total price wrapper */
  .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    align-self: center;
  }

  /* Footer cart button styling */
  .wc-block-mini-cart__footer
    .wc-block-mini-cart__footer-actions
    .wp-block-woocommerce-mini-cart-cart-button-block {
    background: var(--wp--preset--color--accent-5);
    color: var(--wp--preset--color--base);
    border: none !important;
    transition: all 0.2s ease-in-out;
  }

  .wc-block-mini-cart__footer
    .wc-block-mini-cart__footer-actions
    .wp-block-woocommerce-mini-cart-cart-button-block:hover {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--accent-5);
  }

  /* Remove link icon replacement */
  .editor-styles-wrapper
    table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link,
  table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2401c'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
      center center / cover no-repeat;
    background-size: 16px 16px;
    height: 14px;
    width: 14px !important;
  }

  /* Remove link hover state */
  .editor-styles-wrapper
    table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link:hover,
  table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link:hover {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2401c'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
      center center / cover no-repeat;
    transform: none;
  }

  /* Hide default remove link SVG */
  .editor-styles-wrapper
    table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link
    svg,
  table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__quantity
    .wc-block-cart-item__remove-link
    svg {
    display: none;
  }

  /* Mini cart title */
  .wc-block-mini-cart__title.wp-block-woocommerce-mini-cart-title-block {
    margin-top: 0px;
  }

  /* Drawer close button */
  .wc-block-components-button.wc-block-components-drawer__close {
    top: 12px;
  }

  /* Footer padding */
  .wc-block-mini-cart__footer {
    padding-bottom: 0px;
  }

  /* Cart item image */
  .editor-styles-wrapper
    table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__image
    img,
  table.wc-block-cart-items
    .wc-block-cart-items__row
    .wc-block-cart-item__image
    img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /* Notices order */
  .wc-block-components-notices {
    order: 2;
  }

  /* Mini cart title header */
  h2.wc-block-mini-cart__title {
    padding: 10px;
    margin: 0px;
    background: var(--wp--preset--color--accent-3);
    mask-image: none;
    font-size: 24px;
  }
}

/* ==========================================================================
   7. Wishlist Styles
   ========================================================================== */

.wishlist-content {
  .tinv-wishlist .product-action .product_type_variable {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
  }

  /* Header styling */
  .tinv-header,
  .tinv-header h2 {
    margin: 0px;
  }

  .tinv-header h2 {
    padding-bottom: 16px;
    border-bottom: 1px solid gray;
    margin-bottom: 114px;
  }

  /* Hide post title */
  .tinv-wishlist .wp-block-post-title {
    display: none;
  }

  /* Table cell styling */
  .tinv-wishlist .tinvwl-table-manage-list td {
    text-align: start;
    padding: 0px;
    padding-inline-start: 1.25rem;
    flex: 1 1 0%;
  }

  /* Remove button cell */
  .tinv-wishlist .tinvwl-table-manage-list td.product-remove {
    padding: 0px;
    flex: none;
    z-index: 5;
  }

  /* Thumbnail cell */
  .tinv-wishlist .tinvwl-table-manage-list td.product-thumbnail {
    flex: none;
  }

  /* Hide table header */
  .tinv-wishlist .tinvwl-table-manage-list thead {
    display: none;
  }

  /* Stock status colors */
  .tinv-wishlist .stock.in-stock {
    color: green;
  }

  .tinv-wishlist .product-stock i {
    margin-inline-end: 5px;
  }

  .tinv-wishlist .stock {
    margin: 0px;
  }

  /* Wishlist item positioning */
  .tinv-wishlist .wishlist_item {
    position: relative;
  }

  .tinv-wishlist .wishlist_item .product-thumbnail {
    padding: 0px;
  }

  /* Remove button styling */
  .tinv-wishlist .product-remove button {
    background: transparent;
  }

  .tinv-wishlist .product-remove button i {
    color: red;
    font-size: 35px;
    line-height: 20px;
  }

  /* Table layout */
  .tinvwl-table-manage-list {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  /* Table row styling */
  .tinvwl-table-manage-list tbody tr {
    display: flex;
    align-items: center;
    padding: 22px 0px;
    border-bottom: 1px solid gray !important;
  }

  /* Product action button */
  .tinvwl-table-manage-list .product-action > button {
    background: transparent;
    border: none;
    text-decoration: underline;
    font-size: var(--wp--preset--font-size-large);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
  }

  /* Product price */
  .tinv-wishlist .product-price {
    color: var(--wp--preset--color--accent-4);
    font-weight: 400;
  }

  /* Mobile wishlist styles */
  @media only screen and (max-width: 768px) {
    .product-action button {
      max-width: 50%;
      text-align: start !important;
    }

    .tinv-wishlist .wishlist_item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
    }

    .tinv-wishlist .product-thumbnail {
      position: absolute;
    }

    .tinv-wishlist .product-thumbnail img {
      max-width: 106px;
    }

    .tinv-wishlist .product-thumbnail ~ td {
      margin-inline-start: 200px;
      display: block;
    }

    .tinv-wishlist
      .product-thumbnail
      ~ td:not(.product-stock, .product-name, .product-price)
      > *:not(button, .pro) {
      display: block;
      max-width: 40%;
    }

    .tinv-wishlist .product-thumbnail ~ td .product-price {
      gap: 6px;
    }

    .tinv-wishlist .product-remove {
      position: absolute;
      left: 4px;
      top: 20px;
      width: fit-content !important;
    }

    .tinv-wishlist .product-stock {
      position: absolute;
      top: 50%;
      right: 0px;
      transform: translateY(-50%);
      width: fit-content !important;
    }

    .tinv-wishlist .product-action button {
      justify-content: start;
    }

    .tinv-wishlist .tinv-header h2 {
      margin-bottom: 32px;
    }
  }
}

/* Product button styling */
.wp-block-button.wc-block-components-product-button {
  align-items: end !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  white-space: normal;
  position: relative;
}

.wc-block-product-template .bato-card {
  /* Button styling */
  .wp-block-button.wc-block-components-product-button
    .wc-block-components-product-button__button {
    align-items: flex-end !important;
    border-style: none;
    display: inline-flex;
    border-radius: 0 !important;
    font-size: 0 !important;
    padding: 8px !important;
    margin-bottom: 0 !important;
    height: 36px;
    width: 36px;
  }

  /* Button icon using pseudo-element */
  .wc-block-components-product-button__button::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20.01 4H5.21L4.27 2H1v2h2l3.6 7.59-1.35 2.44A2 2 0 0 0 7 17h12v-2H7l1.1-2h7.45ZM6.16 6h12.15l-2.76 5H8.53L6.16 6ZM7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/></svg>")
      no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
  }
}
/* ==========================================================================
   11. Button & Icon Styles (Wishlist, Compare, Quick View)
   ========================================================================== */

/* Quick view button */
.woocommerce a.quick_view {
  position: absolute;
  right: 14px;
  top: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0 !important;
  background-color: transparent;
}

.woocommerce a.quick_view::before {
  content: "";
  width: 26px;
  height: 26px;
  display: inline-block;
  background-color: transparent;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000000' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z'/></svg>")
    no-repeat center;
  background-size: contain;
}

/* Show quick view on hover */
.wc-block-product:hover a.quick_view,
.wc-block-product:focus-within a.quick_view,
.wc-block-product.has-product-swiper:hover a.quick_view,
.wc-block-product.has-product-swiper:focus-within a.quick_view {
  opacity: 1;
}

/* Always show quick view on mobile */
@media (width <=767px) {
  .woocommerce a.quick_view {
    opacity: 1;
  }
}

.woocommerce a.quick_view {
  color: black;
}

/* Compare button styling */
.htcompare-btn,
.woocommerce .htcompare-btn,
.wc-block-product .htcompare-btn {
  font-size: 0 !important;
  background-color: transparent;
  position: absolute;
  margin-right: 11px;
  top: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 15 !important;
  border: none;
  padding: 0;
  width: 26px;
  height: 26px;
}
.htcolumn-field-name {
  display: none;
}
.bato-products-slider {
  .wc-block-next-previous-buttons {
    position: absolute;
    gap: 250px;
    top: 10px;
  }
  .wc-block-next-previous-buttons button {
    background: transparent;
  }
  @container carousel (min-width: 1440px) {
    .is-product-collection-layout-carousel .wc-block-product {
      min-width: calc(25% - 24px);
    }
  }
}

/* Hide SVG inside compare button */
.htcompare-btn svg {
  display: none;
}

/* Compare button custom icon */
.htcompare-btn::before {
  content: "";
  width: 26px;
  height: 26px;
  display: inline-block;
  background-color: transparent;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><g clip-path='url(%23clip0)'><path d='M14.9998 11.6667L18.3332 15M18.3332 15L14.9998 18.3334M18.3332 15H13.299C12.7528 14.9944 12.2164 14.8547 11.7369 14.5932C11.2573 14.3316 10.8494 13.9562 10.549 13.5L10.2499 13.125M14.9998 1.66669L18.3332 5.00002M18.3332 5.00002L14.9998 8.33335M18.3332 5.00002L13.3557 5.0001C12.8169 4.99642 12.2853 5.12338 11.8064 5.37011C11.3274 5.61683 10.9154 5.97597 10.6057 6.41676L6.06067 13.5834C5.7509 14.0242 5.3389 14.3834 4.85996 14.6301C4.38102 14.8768 3.84941 15.0038 3.31067 15.0001H1.6665M1.6665 5.0001H3.30984C3.93105 4.99578 4.54112 5.16514 5.0712 5.48908C5.60129 5.81302 6.0303 6.27865 6.30984 6.83343' stroke='%23000000' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></g><defs><clipPath id='clip0'><rect width='20' height='20' fill='white'/></clipPath></defs></svg>")
    no-repeat center;
  background-size: contain;
}

/* Show compare button on hover */
.wc-block-product:hover .htcompare-btn,
.wc-block-product:focus-within .htcompare-btn,
.wc-block-product.has-product-swiper:hover .htcompare-btn,
.wc-block-product.has-product-swiper:focus-within .htcompare-btn {
  opacity: 1;
}

/* Always show compare button on mobile */
@media (width <=767px) {
  .htcompare-btn,
  .woocommerce .htcompare-btn {
    opacity: 1;
  }
}

.htcompare-btn {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center;
  outline: none;
  top: 40px;
  right: 0;
  z-index: 999;
  margin-right: 5px;
}

.ever-compare-btn-image {
  display: inline-block;
  width: 28px;
  margin-right: 5px;
}

/* Added to cart forward link */
.wc-block-components-product-button__button
  + [data-wp-bind--hidden="!state.displayViewCart"] {
  display: none;
}

/* Compare popup styling */
.htcompare-popup .htcompare-popup-content-area {
  position: relative;
  width: calc(100% - 30px);
  max-width: 1200px;
  margin: auto;
  padding: 30px;
  background: #f5ebdf;
  color: white;
}
.compare-data-description p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: box; /* Fallback for some browsers */
}

.htcompare-popup-content-area > div p {
  margin: 0px;
}

.htcolumn-field-name,
.htcolumn-value {
  background-color: transparent;
}

.htcompare-col {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

.htcompare-row:nth-child(2n) .htcompare-col {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

.htcompare-col > p {
  margin: 0px;
}

.htcompare-col,
.compare-data-primary .htcolumn-value {
  border: none;
}

/* Mobile compare popup fix */
@media (max-width: 767px) {
  .htcompare-popup *::before {
    content: none !important;
    display: none !important;
  }
}
/* ==========================================================================
   13. Contact Form Styles
   ========================================================================== */

.custom-contact-form {
  background-color: #d6ccc2;
  padding: 40px;
  max-width: 600px;
}

/* Labels */
.custom-contact-form label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}

/* Inputs & textarea */
.custom-contact-form input,
.custom-contact-form textarea,
.contact-input,
.contact-textarea {
  width: 100%;
  border: none;
  border: 1px solid #aaa;
  background: transparent;
  padding: 10px;
  font-size: 16px;
  outline: none;
  margin-bottom: 16px;
  max-width: 100%;
}

/* Textarea height */
.custom-contact-form textarea,
.contact-textarea {
  height: 150px;
  resize: none;
}

/* Submit button */
.custom-contact-form input[type="submit"],
.contact-btn {
  width: 100%;
  background-color: #2d1f1f;
  color: #fff;
  border: none;
  padding: 15px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 16px;
}

.custom-contact-form input[type="submit"]:hover,
.contact-btn:hover {
  background-color: #1f1515;
}

/* Icon wrapper */
.icon-wrapper {
  width: 80px;
  height: 80px;
  background: #bebbbb33;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contact title */
.contact-title {
  font-size: clamp(2.5rem, 1.8878rem + 2.6122vw, 4.5rem);
  padding-bottom: 48px;
  margin: 0;
}

/* Contact form 7 paragraph reset */
.wpcf7-form p {
  margin: 0;
}

/* Mobile contact form */
@media (max-width: 781px) {
  .contact-form-rev {
    flex-wrap: wrap-reverse !important;
  }

  .contact-title {
    padding-bottom: 16px;
    margin: 0;
  }
}

/* ==========================================================================
   14. Popup & Newsletter Styles
   ========================================================================== */

/* Popup inner container */
#br_popup .br_popup_inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.br_left_table {
  display: none !important;
}

/* Popup container */
.pum-container {
  min-width: 0%;
  max-width: 100%;
  opacity: 1;
  display: block;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #f5ebdf !important;
}

.pum-container div {
  padding: 0 !important;
}

.pum-container .popup-content {
  padding: 115px 40px !important;
}

.popup-content p {
  margin: 10px 0 !important;
  color: var(--wp--preset--color--contrast);
}

.popup-content .tnp-submit {
  color: var(--wp--preset--color--contrast);
}

.pum-container.pum-responsive img {
  width: 100% !important;
  height: 100% !important;
}

/* Newsletter subscription form */
.tnp-subscription form {
  display: flex !important;
  align-items: center !important;
  position: relative;
}

.tnp-subscription form label {
  display: none !important;
}

.tnp-subscription form .tnp-email {
  flex: 1 !important;
}

/* Mobile popup content */
@media (max-width: 600px) {
  .pum-container .popup-content {
    padding: 40px 10px !important;
  }
}

.tnp-field-email {
  width: 100% !important;
}

.tnp-subscription div.tnp-field,
.tnp-profile div.tnp-field {
  position: relative;
}

/* Submit button icon */
.tnp-subscription button.tnp-submit .tnp-submit-icon,
.tnp-profile button.tnp-submit .tnp-submit-icon,
.tnp-unsubscribe button.tnp-submit .tnp-submit-icon,
.tnp-reactivate button.tnp-submit .tnp-submit-icon {
  width: 21px;
  height: 21px;
  display: block;
}

/* Popup close button */
.pum-theme-142 .pum-content + .pum-close,
.pum-theme-default-theme .pum-content + .pum-close {
  font-size: 0 !important;
  font-style: inherit;
  line-height: 1 !important;
  border-radius: 0px;
  background-color: #f5ebdf !important;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.pum-theme-142 .pum-content + .pum-close::before,
.pum-theme-default-theme .pum-content + .pum-close::before {
  content: "\00D7";
  color: var(--wp--preset--color--contrast);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

/* Popup content styling */
.pum-theme-142 .pum-content,
.pum-theme-default-theme .pum-content {
  color: inherit !important;
  font-family: inherit;
}

.pum-theme-142,
.pum-theme-default-theme {
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px) !important;
}

/* ==========================================================================
   15. Responsive Design Overrides
   ========================================================================== */

/* Categories slider and brands marquee responsive */
.categories-slider .swiper-slide .wp-block-image {
  min-height: clamp(8.75rem, 1.9195rem + 29.1435vw, 31.063rem);
  height: clamp(8.75rem, 1.9195rem + 29.1435vw, 31.063rem);
  overflow: hidden;
}

.categories-slider .swiper-slide a {
  overflow: hidden;
}

.categories-slider .swiper-wrapper {
  gap: 0px !important;
  align-items: stretch;
}
.categories-slider .swiper-slide :is(a, img) {
  width: 100%;
}

.categories-slider .swiper-slide a:hover > img {
  transform: scale(1.2);
}

.categories-slider .swiper-slide a > img {
  transition: transform 0.3s ease-in-out;
}

/* Mobile categories slider */
@media (max-width: 768px) {
  .categories-slider .swiper-slide .wp-block-image + p {
    font-size: 1rem;
    line-clamp: 1;
  }

  .categories-slider,
  .brands-marquee {
    padding: 8px !important;
  }

  .categories-slider .swiper-wrapper {
    gap: 0px;
    margin: 8px;
  }

  .bato-banners .responsive-height p + p {
    margin-top: 14px !important;
  }
}

/* Hide slider navigation */
.categories-slider
  :is(.swiper-button-next, .swiper-button-prev, .swiper-pagination) {
  display: none;
}

/* Hover transition effects */
.has-accent-1-color.has-contrast-background-color:hover {
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--accent-1) !important;
}

.has-accent-1-color.has-contrast-background-color {
  transition: all 0.3s ease-in-out;
}

/* Brands slider */
.brands-slider .swiper-wrapper {
  transition-timing-function: linear;
}
.brands-slider:hover .swiper-wrapper {
  transform: none !important;
}

.brands-slider .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brands-slider .swiper-slide img {
  object-position: center;
}

/* Small categories */
.small-categories .swiper-slide .image-container {
  min-height: clamp(2.5rem, 2.1939rem + 1.3061vw, 3.5rem);
  height: clamp(2.5rem, 2.1939rem + 1.3061vw, 3.5rem);
  overflow: hidden;
}

.small-categories .swiper-slide .image-container img {
  object-fit: contain;
}

/* Mobile bato banners */
@media (max-width: 767px) {
  .bato-banners > .has-global-padding {
    padding: 16px;
  }

  .bato-banners .responsive-height {
    min-height: 160px !important;
    width: auto;
    padding: 0px;
  }

  .bato-banners .responsive-height.vases-container img {
    height: 160px !important;
    width: auto;
    padding: 0px;
  }

  .bato-banners .responsive-height.lights-container img {
    height: 130px !important;
    width: auto;
    padding: 0px;
  }

  .bato-banners .responsive-height.chair-container img {
    height: 160px !important;
    width: auto;
    padding: 16px 0px 5px 0px;
  }
}

/* Mobile footer styles */
@media (max-width: 768px) {
  .get-contact {
    .get-contact-inside {
      margin-top: 16px !important;
      margin-bottom: 0 !important;
    }
  }

  .wp-block-social-links {
    gap: 16px;
    margin-block: 24px !important;
  }

  .parent-main-cols-link {
    gap: 0 !important;
  }

  .custom-footer .links-col {
    gap: 4px !important;

    li {
      padding-block: 16px !important;
      padding-inline: 0px;
    }
  }

  .Lets-Talk-desktop {
    display: none !important;
  }

  .Lets-Talk-mobile {
    display: flex !important;
  }

  .custom-footer {
    padding-inline: 15px !important;
  }

  .footer-col-mobile-style {
    border-left: none !important;
  }

  .custom-footer .desktop-footer-header {
    display: none;
  }

  .spacer {
    display: none !important;
  }

  .mobile-top-footer {
    display: block !important;
  }

  .custom-footer .wp-block-list {
    padding-block: 0 !important;
    padding-inline: 18px !important;
  }

  .bottom-footer-mobile {
    gap: 8px !important;
    border: 0 !important;

    .wp-block-column {
      border: 0 !important;
    }

    p {
      padding: 0 !important;
    }

    .privacy-page-links {
      gap: 8px !important;
    }
  }
}

.product-search-results-content {
  .wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
    .wp-block-search__inside-wrapper,
    .wp-block-search__input {
      background: transparent;
    }

    .wp-block-search__inside-wrapper {
      padding: 23px;
    }

    .wp-block-search__input {
      padding: 0px;
    }

    .wp-block-search__button {
      padding: 0px;
      height: 40px;
      width: 40px;
    }
  }

  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    padding: 0.75em 2em 0.75em 0.5em;
    /* space for arrow */
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--contrast);
    background-color: transparent;
    /* Chevron icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'><polyline points='1,1 5,4 9,1' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 10px 5px;

    color: var(--wp--preset--color--contrast);
    font: inherit;
    cursor: pointer;
  }

  /* Focus state (important for UX) */
  select:focus {
    outline: none;
    border-bottom: 1px solid var(--wp--preset--color--contrast);
  }

  /* Dropdown options (limited browser control) */
  select option {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
  }

  /* Attempt to style selected option (works in some browsers only) */
  select option:checked,
  select option:hover,
  select option:focus,
  select option:focus-within {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
  }

  .dropdown-group,
  .dropdown-section {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .dropdown-group .dropdown-item {
    border: 1px solid currentColor;
    padding: 12px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
  }

  .dropdown-group.suggestions .dropdown-item {
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--base);
  }

  .dropdown-group.history .dropdown-item {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
  }

  .dropdown-group .remove-tag {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--base);
    box-shadow: unset;
    background: unset;
    border: none;
    cursor: pointer;
  }
}

.category-page-content {
  /* Category list grid layout */
  .wc-block-product-categories-list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    column-gap: clamp(0.813rem, 0.1455rem + 2.8479vw, 3.563rem);
    row-gap: clamp(1.438rem, 1.0589rem + 1.6176vw, 3rem);
  }

  /* Category list item */
  .wc-block-product-categories-list .wc-block-product-categories-list-item {
    margin: 0px !important;
  }

  /* Category count badge */
  .wc-block-product-categories-list
    .wc-block-product-categories-list-item-count {
    width: fit-content;
    display: block;
    margin-inline-start: auto;
    transform: translateY(
      calc(clamp(2.375rem, 2.2602rem + 0.4898vw, 2.75rem) * -1)
    );
    margin-top: calc(1.625rem - clamp(0.625rem, 0.5102rem + 0.4898vw, 1rem));
    padding: 2px 5px;
    color: var(--wp--preset--color--accent-4);
    border: 1px solid currentColor;
    font-size: clamp(0.625rem, 0.5102rem + 0.4898vw, 1rem);
  }

  /* Hide pseudo-elements on count badge */
  .wc-block-product-categories-list
    .wc-block-product-categories-list-item-count::before,
  .wc-block-product-categories-list
    .wc-block-product-categories-list-item-count::after {
    display: none;
  }

  /* Category name styling */
  .wc-block-product-categories-list-item__name {
    align-self: flex-start;
    padding-top: clamp(0.625rem, 0.5102rem + 0.4898vw, 1rem);
    font-size: clamp(1rem, 0.7321rem + 1.1429vw, 1.875rem);
    max-width: 66%;
  }

  /* Category image container */
  .wc-block-product-categories-list--has-images
    .wc-block-product-categories-list-item__image {
    border: none;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: 100%;
    display: block;
    height: clamp(9.188rem, 3.4675rem + 24.4075vw, 27.875rem);
  }

  .wc-block-product-categories-list--has-images
    .wc-block-product-categories-list-item__image
    img {
    width: 100%;
    height: 100%;
  }

  /* Category link layout */
  .wc-block-product-categories-list-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
  }

  /* Tablet: 3 columns */
  @media (max-width: 1024px) {
    .wc-block-product-categories-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Small tablet: 2 columns */
  @media (max-width: 768px) {
    .wc-block-product-categories-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

.wp-block-woocommerce-product-collection h2.wp-block-heading {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  font-family: var(--wp--preset--font-family--canela-500);
  margin-bottom: var(--wp--preset--spacing--50);
}

.owl-item.active {
  transform: scaleX(1);
}
.owl-item {
  transform: scaleX(0);
}

/* //////////////////////////// start-testmonials //////////////////////// */
.testmonials {
  .content {
    .dashicons::before {
      color: var(--wp--preset--color--accent-1);
    }

    .first-cont {
      /* justify-content: space-between ; */
    }
  }

  .testmonials-customers {
    .as-content {
      overflow-y: scroll;
      height: 575px;
      direction: rtl;
      padding-left: 12.5px;
      /* text-align: left;  */

      .dashicons::before {
        color: var(--wp--preset--color--accent-5);
      }
    }

    /* لإعادة المحتوى الداخلي لوضعه الطبيعي حتى لا تنعكس العناصر */
    .as-content > * {
      direction: ltr;
    }

    .as-content::-webkit-scrollbar {
      width: 11px;
      padding-right: 20px;
    }

    .as-content::-webkit-scrollbar-thumb {
      background-color: var(--wp--preset--color--accent-7);
      /* border-radius: 10px; */
    }

    .as-content::-webkit-scrollbar-track {
      background: var(--wp--preset--color--accent-1);
    }
  }

  .is-style-default {
    /* height: 15%;
      width: 10%; */
    img {
    }
  }
}

@media (max-width: 768px) {
  .testmonials {
    .content {
      .dashicons::before {
        color: var(--wp--preset--color--accent-1);
      }
    }

    .testmonials-customers {
      display: flex !important;
      flex-direction: column-reverse;
      order: 2;
      align-items: stretch;

      .as-content {
        display: block;
        height: 400px !important;
        max-height: 400px !important;
        overflow-y: auto !important;
        flex-shrink: 0;

        direction: rtl;
        padding-left: 15px;
        -webkit-overflow-scrolling: touch;

        .dashicons::before {
          color: var(--wp--preset--color--accent-5);
        }

        & > * {
          direction: ltr;
        }

        &::-webkit-scrollbar {
          width: 8px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: var(--wp--preset--color--accent-7);
          border-radius: 10px;
          border: 2px solid transparent;
          background-clip: padding-box;
        }

        &::-webkit-scrollbar-track {
          background: var(--wp--preset--color--accent-1);
        }
      }

      .first-row {
        flex-wrap: wrap;
      }

      .is-style-row {
        align-items: flex-start;
      }

      .is-style-paragraph {
        font-size: 14px !important;
        font-weight: 400 !important;
      }

      .is-style-default {
        img {
          /* width: 100%; */
        }

        .banner-img {
          height: 160px;

          img {
            height: 100% !important;
          }
        }
      }
    }
  }
}
/* //////////////////////////// end-testmonials //////////////////////// */
/* /////////////// start-main-banner //////////////////// */
.best-seller {
  ul.wc-block-product-template {
    grid-template-columns: repeat(1, 1fr);
  }
}
.banner-product-img {
  /* تنسيقات الـ Slide 2 */
  .wc-block-product-template__responsive {
    margin: 0;
  }

  .slide-1 {
    .wp-block-post-title {
      a {
        color: var(--wp--preset--color--accent-8) !important;
      }
    }

    .wp-block-post-terms {
      a {
        color: var(--wp--preset--color--accent-8) !important;
      }
    }

    .wc-block-grid__product-price {
      display: flex;
      gap: 5px;

      ins {
        background: none;
      }
    }
  }

  .slide-2 {
    height: 638px;

    .is-light {
      height: 100%;
    }

    .wp-block-button {
      a {
        position: relative;
        overflow: hidden;
        background-color: var(--wp--preset--color--contrast) !important;
        color: var(--wp--preset--color--base) !important;
        border: 1px solid var(--wp--preset--color--contrast);
        z-index: 1;
        transition: color 0.4s ease !important;
      }

      a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: var(--wp--preset--color--base) !important;
        transition: width 0.4s ease;
        z-index: -1;
      }

      a:hover {
        color: var(--wp--preset--color--contrast) !important;
      }

      a:hover::before {
        width: 100%;
      }
    }
  }

  .wp-block-button {
    a span,
    button span {
      background-color: var(--wp--preset--color--contrast);
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* border-radius: 50%; */
      position: relative;
      font-size: 0;
      padding: 0;
      border: none;
      cursor: pointer;

      /* أيقونة السلة SVG */
      &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: var(--wp--preset--color--accent-1);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-size: contain;
      }
    }
  }
}

/* --- الميديا كويري للموبايل --- */
@media (max-width: 768px) {
  /* .banner-product-img { */
  .slide-2 {
    order: 0;

    height: auto !important;
    /*
    .is-light {
      height: 100%;
    } */
  }

  .slide-1 {
    order: 1;
    overflow: visible !important;
    height: auto !important;

    .wc-block-product-template__responsive.columns-1 {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 0;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
      list-style: none;

      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }

      /* Each product card (li) takes full screen width */
      .wc-block-product {
        flex: 0 0 100vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        scroll-snap-align: start;
        height: auto !important;
        overflow: visible !important;
        box-sizing: border-box;
      }
    }
  }

  .slide-3 {
    order: 2;
  }

  hr {
    display: none;
  }
}

/* Add Responsive Swiper styles for product-img-banner slide-1 & slide-3 */
@media (max-width: 768px) {
  /* .slide-2 {
    width: 100%;
  }

  .best-seller-swiper-mobile {
    overflow: hidden;
  }

  .best-seller-swiper-mobile .swiper-wrapper {
    flex-wrap: nowrap !important;
    display: flex !important;
  }

  .best-seller-swiper-mobile .swiper-slide {
    width: 100% !important;
    height: auto !important;
  } */
}

/* Desktop Grid Layout for slide-1 & slide-3 products */
/* @media (min-width: 769px) {
  .swiper-wrapper {
    display: grid !important;
  }
} */

/* /////////////// end-main-banner //////////////////// */

/* /////////////// start-timeless-banner //////////////////// */

.timeless-banner .wp-element-button {
  position: relative;
  padding: 15px 45px;
  background-color: transparent;
  border: 2px solid var(--wp--preset--color--accent-7);
  color: var(--wp--preset--color--accent-7);
  z-index: 1;
  display: inline-block;
  overflow: visible;

  background-image: linear-gradient(
    var(--wp--preset--color--contrast),
    var(--wp--preset--color--contrast)
  );
  background-color: var(--wp--preset--color--base);
  background-size: 100% 0;
  background-position: bottom;
  background-repeat: no-repeat;
  transition:
    background-size 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s ease,
    all 0.4s ease;
}

.timeless-banner .wp-element-button::before {
  content: "";
  transform: translateY(-180%) rotate(90deg);
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--wp--preset--color--contrast);
  left: 20px;
  top: 24px;
  box-shadow: 24px 0px 0px var(--wp--preset--color--contrast);
  transition: all 0.4s ease;
}

.timeless-banner .wp-element-button::after {
  content: "";
  transform: translateY(-180%) rotate(90deg);
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--wp--preset--color--contrast);
  right: 20px;
  top: 24px;
  box-shadow: 24px 0px 0px var(--wp--preset--color--contrast);
}

.timeless-banner .wp-element-button:hover {
  color: var(--wp--preset--color--accent-1) !important;
  background-size: 100% 100%;
}

.timeless-banner .wp-element-button:hover::before {
  background-color: var(--wp--preset--color--base);
  box-shadow: 15px 0px 0px var(--wp--preset--color--base);
}

.timeless-banner .wp-element-button:hover::after {
  background-color: var(--wp--preset--color--base);
  box-shadow: 15px 0px 0px var(--wp--preset--color--base);
}

.timeless-banner .main-title h3 {
  opacity: 0.4;
  transition: all 0.3s ease;
  cursor: pointer;
}

.timeless-banner .main-title h3.is-active {
  opacity: 1;
  color: var(--wp--preset--color--accent-7);
}

.timeless-banner .main-title:hover h3.is-active {
  opacity: 0.4;
}

.timeless-banner .main-title h3:hover {
  opacity: 1 !important;
  color: var(--wp--preset--color--accent-7);
}

.timeless-banner .wp-block-group p {
  color: var(--wp--preset--color--contrast) !important;
}

.timeless-banner .designe-marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.timeless-banner .designe-marquee h2 {
  color: var(--wp--preset--color--contrast);
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 11s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}

@media (max-width: 425px) {
  .timeless-banner .columns {
    border: 0;
    width: 95%;
    margin: 0 auto;
    gap: 10px;
  }

  .timeless-banner .first-element {
    padding: 0 !important;
  }

  .timeless-banner .first-row {
    flex-direction: column;
    padding: 0 !important;
  }

  .timeless-banner .first-row .main-title {
    padding: 0 !important;
  }

  .timeless-banner .designe-marquee h2 {
    margin-top: 0 !important;
  }

  .timeless-banner .img-cover {
    /* height: 160px; */
    padding: 0 !important;
  }
  .timeless-banner .wp-block-cover,
  .wp-block-cover-image {
    min-height: 160px !important;
  }
}
@media (max-width: 768px) {
  .timeless-banner .first-row {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ///////////////////////// */

/* .mian-paragraph p,
.mian-paragraph h2 {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

.swiper-slide-active .mian-paragraph p,
.swiper-slide-active .mian-paragraph h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s; 
} */

/* ================= TEXT ANIMATION ================= */

.mian-paragraph p,
.mian-paragraph h2 {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.swiper-slide-active .mian-paragraph p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.swiper-slide-active .mian-paragraph h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* product-img-banner */

/* :root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover) {
  text-decoration: none;
} */

.card-price {
  margin-top: 0;
  justify-content: space-between;
}
/* /////////////// end-timeless-banner //////////////////// */

/* /////////- start-our-store -///////// */

/* --- إعدادات الشاشات الكبيرة (Desktop) --- */
@media (min-width: 1024px) {
  .main-store-desctop {
    display: block;

    .wp-block-cover {
      min-height: 791px !important;
    }

    .cover-img {
      position: relative;

      img {
        height: 100%;
        width: 100%;
        object-fit: fill;
      }

      .content {
        max-width: 631px;

        .wp-block-button__link {
          position: relative;
          overflow: hidden;
          background-color: var(--wp--preset--color--contrast) !important;
          color: var(--wp--preset--color--base) !important;
          z-index: 1;
          transition: color 0.4s ease;
          border: none;
          display: inline-block;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: var(--wp--preset--color--base) !important;
            transition: width 0.4s ease;
            z-index: -1;
          }

          &:hover {
            color: var(--wp--preset--color--contrast) !important;

            &::before {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .main-store-phone {
    display: none;
  }
}

/* --- إعدادات الشاشات الصغيرة (Phone) --- */
@media (max-width: 767px) {
  .main-store-desctop {
    display: none;
  }

  .main-store-phone {
    display: block;
    .wp-block-cover {
      min-height: 271px !important;
    }

    /* يمكنك هنا إضافة تنسيقات نسخة الموبايل */
    .cover-img {
      height: auto;

      img {
        width: 100%;
        height: 257px;
        object-fit: cover;
      }
    }
  }
}

/* /////////- end-our-store -///////// */

/* //////////////////////////// start-blogs //////////////////////// */
.section-posts {
  .first-row {
    .wp-block-post-excerpt__more-text a {
      text-decoration: underline !important;
    }

    .wp-block-post-excerpt__more-text a:hover {
      color: var(--wp--preset--color--accent-5);
    }
  }

  /* .seconde-img{
    height: 322px;
  } */

  .row-post {
    /* height: 320px; */
    /* .is-vertical{
    }
    .blog-img{
    } */
  }

  .mian-btn a {
    position: relative;
    overflow: hidden;
    padding: 12px 25px;
    background-color: transparent;
    color: var(--wp--preset--color--contrast);
    border: 1px solid var(--wp--preset--color--contrast) !important;
    cursor: pointer;
    transition: color 0.4s ease;
    z-index: 1;
  }

  .mian-btn a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--wp--preset--color--contrast) !important;
    transition: width 0.4s ease;
    z-index: -1;
  }

  .mian-btn a:hover {
    color: var(--wp--preset--color--accent-1);
  }

  .mian-btn a:hover::before {
    width: 100%;
  }
}

@media (max-width: 425px) {
  .section-posts {
    /* .first-row {
    } */

    /* .row-post {
     
    } */
  }
}
@media (max-width: 768px) {
  .section-posts {
    overflow: visible !important;
    height: auto !important;

    .columns-2 {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: visible !important;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 16px;
      height: auto !important;

      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }

      .wp-block-post {
        flex: 0 0 100vw;
        scroll-snap-align: start;
        height: auto !important;
        overflow: visible !important;
      }

      .wp-block-post .first-row {
        min-height: 176px !important;
      }

      .wp-block-post .blog-img,
      .wp-block-post .blog-img img {
        /* min-height: 176px !important; */
        height: 270px !important;
      }
    }
  }
}

/* //////////////////////////// end-blogs //////////////////////// */

/* /////////////// start-blogs-page //////////////////// */

.blog-banner {
  .woocommerce .woocommerce-breadcrumb {
    margin: 0 0 1em 14px;
    padding: 0;
    text-align: center;
  }
}
.main-blog-page {
  /* ─── Sidebar ─── */
  .blogs-side-bar {
    /* Search */
    .wp-block-search__inside-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      background-color: transparent;

      input {
        background-color: transparent;
        width: 100%;
        height: 56px;
        padding-left: 60px; /* Adjusted to give the icon breathing room */
        padding-right: 15px;
        border: 1px solid var(--wp--preset--color--accent-4);
        outline: none;
      }

      button {
        position: absolute;
        left: -10px; /* Positioned inside the input on the left */
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;

        /* Hide the original "Search" text */
        text-indent: -9999px;
        overflow: hidden;

        /* The Magnifying Glass Icon (SVG URL) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23adadad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px;

        width: 40px;
        height: 40px;
        border: none;
        box-shadow: none;
        cursor: pointer;
        display: flex;
        transition: opacity 0.2s ease;

        &:hover {
          opacity: 0.7;
        }
      }
    }

    /* Latest Posts */
    .wp-block-post-template {
      margin: 0 !important;
    }

    /* Categories */
    .categories {
      list-style: none;
      padding-left: 0;
      margin-top: 3px;

      ul {
        padding: 0;
      }

      li {
        display: flex;
        align-items: center;
        gap: 8px;

        &::before {
          content: "";
          display: inline-block;
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          background-image: url("../images/blogs/layer1.png");
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

      a {
        color: var(--wp--preset--color--accent-4);
        transition: all 0.3s ease;

        &:hover {
          color: var(--wp--preset--color--accent-5);
        }
      }
    }

    /* Tags */
    .tags ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
      padding: 0;

      li {
        width: fit-content;
        list-style: none;
        margin-top: 10px;

        a {
          color: var(--wp--preset--color--accent-7);
          padding: 9px 24px;
          border: 1px solid var(--wp--preset--color--accent-7);
          text-decoration: none;
          transition: all 0.3s ease;

          &:hover {
            color: var(--wp--preset--color--accent-5);
            border-color: var(--wp--preset--color--accent-5);
          }
        }
      }
    }
  }

  /* ─── Main Blog Area ─── */
  .main-blogs {
    /* Post Title */
    .wp-block-post-title a {
      color: var(--wp--preset--color--accent-8);
      text-decoration: none;
      transition: all 0.3s ease;

      &:hover {
        color: var(--wp--preset--color--accent-9);
      }

      &:visited {
        color: var(--wp--preset--color--accent-8);
      }
    }

    a.wp-block-post-excerpt__more-link {
      color: var(--wp--preset--color--accent-5);
    }

    /* Pagination */
    .wp-block-query-pagination {
      .wp-block-query-pagination-numbers {
        a,
        span {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          padding: 0;
          color: var(--wp--preset--color--primary);
          border-radius: 50%;
          transition: all 0.3s ease;
        }

        .current {
          background-color: var(--wp--preset--color--dark-brown);
          color: var(--wp--preset--color--white);
        }
      }

      .is-arrow-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--wp--preset--color--medium-gray);
        border: 1px solid var(--wp--preset--color--medium-gray);
        color: var(--wp--preset--color--primary);
        border-radius: 50%;
      }
    }
  }

  @media (max-width: 768px) {
    .main-blogs {
      ul {
        margin-left: 0;
      }
    }

    .tags ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
      /* padding: 0; */

      li {
        width: fit-content;
        list-style: none;
        margin-top: 16px;
      }
    }
  }
}
/* /////////////// end-blogs-page //////////////////// */

/* /////////////// start-post-page //////////////////// */
.main-post {
  .blogs-side-bar {
    /* Search */
    .wp-block-search__inside-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      background-color: transparent;

      input {
        background-color: transparent;
        width: 100%;
        height: 56px;
        padding-left: 60px; /* Adjusted to give the icon breathing room */
        padding-right: 15px;
        border: 1px solid var(--wp--preset--color--accent-4);
        outline: none;
      }

      button {
        position: absolute;
        left: -10px; /* Positioned inside the input on the left */
        top: 50%;
        transform: translateY(-50%);
        background-color: transparent;

        /* Hide the original "Search" text */
        text-indent: -9999px;
        overflow: hidden;

        /* The Magnifying Glass Icon (SVG URL) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23adadad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px;

        width: 40px;
        height: 40px;
        border: none;
        box-shadow: none;
        cursor: pointer;
        display: flex;
        transition: opacity 0.2s ease;

        &:hover {
          opacity: 0.7;
        }
      }
    }

    /* Latest Posts */
    .wp-block-post-template {
      margin: 0 !important;
    }

    /* Categories */
    .categories {
      list-style: none;
      padding-left: 0;
      margin-top: 3px;

      ul {
        padding: 0;
      }

      li {
        display: flex;
        align-items: center;
        gap: 8px;

        &::before {
          content: "";
          display: inline-block;
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          background-image: url("../images/blogs/layer1.png");
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

      a {
        color: var(--wp--preset--color--accent-4);
        transition: all 0.3s ease;

        &:hover {
          color: var(--wp--preset--color--accent-5);
        }
      }
    }

    /* Tags */
    .tags ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
      padding: 0;

      li {
        width: fit-content;
        list-style: none;
        margin-top: 10px;

        a {
          color: var(--wp--preset--color--accent-7);
          padding: 9px 24px;
          border: 1px solid var(--wp--preset--color--accent-7);
          text-decoration: none;
          transition: all 0.3s ease;

          &:hover {
            color: var(--wp--preset--color--accent-5);
            border-color: var(--wp--preset--color--accent-5);
          }
        }
      }
    }
  }
}
/* /////////////// end-post-page //////////////////// */