/* Căn chỉnh lại hàng chính để khớp với Container (Sửa lỗi lệch 15px) */
.product-main .row {
  display: flex !important;
  gap: 30px !important;
  padding: 0 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.shop-container .product-container .product-main {
  padding-bottom: 0 !important;
}

/* Layout adjustment for Gallery (Left) and Summary (Right) */
.product-gallery {
  flex: 1 1 60% !important; /* Gallery occupies more space as per sketch */
  max-width: calc(60% - 15px) !important;
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: var(--ts-shadow, 0 10px 30px rgba(0, 0, 0, 0.05)) !important;
  padding: 35px !important;
  border: none !important;
  overflow: hidden;
}

.product-info.summary {
  flex: 1 1 40% !important;
  max-width: calc(40% - 15px) !important;
  display: flex;
  flex-direction: column;
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: var(--ts-shadow, 0 10px 30px rgba(0, 0, 0, 0.05)) !important;
  padding: 35px !important;
  border: none !important;
  overflow: hidden;
}

.hp-main-image-slider {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eeeeee;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  background: #ffffff;
  /* Removed fixed min-height to allow automatic adjustment to image size */
}

.hp-slider-item a.fcb-image {
  display: block;
  width: 100%;
  cursor: zoom-in;
}

.hp-slider-item a.fcb-image img {
  width: 100%;
  height: 250px; /* Fixed height for consistency in the summary area */
  display: block;
  object-fit: cover; /* "Full slider" look */
}

/* Right Slider Flickity Controls - Premium Circular Arrows */
.flickity-prev-next-button {
  width: 40px !important;
  height: 40px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  z-index: 100 !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.hp-main-image-summary-wrapper:hover .flickity-prev-next-button {
  opacity: 1 !important;
  visibility: visible !important;
}

.flickity-prev-next-button:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.flickity-prev-next-button.previous {
  left: 12px !important;
}
.flickity-prev-next-button.next {
  right: 12px !important;
}

/* Icons styling - Absolute Centering for perfect alignment */
.flickity-prev-next-button .flickity-button-icon {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  fill: #000000 !important;
}

.flickity-prev-next-button:hover .flickity-button-icon {
  fill: #ffffff !important;
}

/* Hide Left Gallery Controls & Lock to First Image */
.product-gallery-slider .flickity-prev-next-button,
.product-gallery-slider .flickity-page-dots {
  display: none !important;
}

/* Force left gallery to only show the first image (Representative Photo) */
.product-gallery-slider .flickity-slider > div:not(:first-child) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Ensure the first cell is always visible and positioned correctly */
.product-gallery-slider .flickity-slider > div:first-child {
  left: 0 !important;
  transform: none !important;
}

/* Make left column non-interactive */
.product-gallery-slider {
  pointer-events: none !important;
  touch-action: none !important;
}

.hp-summary-thumbnails {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hp-summary-thumb-item {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hp-summary-thumb-item:hover,
.hp-summary-thumb-item.active {
  border-color: #333;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.hp-summary-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide original thumbnails in the left gallery */
.product-gallery .flex-control-nav.flex-control-thumbs {
  display: none !important;
}

/* If Flatsome uses a different class */
.product-gallery .thumbnails,
.product-gallery .flickity-viewport + .flickity-page-dots,
.product-gallery .product-thumbnails {
  display: none !important;
}

/* Technical Specs & Short Description Cards */
.hp-furniture-specs-container,
.hp-short-description-card,
.hp-card-standard,
.woocommerce-tabs,
.related.related-products-wrapper {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: var(--ts-shadow, 0 10px 30px rgba(0, 0, 0, 0.05)) !important;
  padding: 35px !important;
  margin-bottom: 35px !important;
  border: 1px solid #f0f0f0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  clear: both;
}

.hp-specs-title,
.hp-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 25px 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-card-content {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
}

/* Hide default short description globally if it's still showing */
.product-info.summary .product-short-description,
.product-info.summary .woocommerce-product-details__short-description {
  display: none !important;
}

.hp-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Expanded for full width card */
  gap: 30px 25px;
}

.hp-spec-item {
  position: relative;
  padding-bottom: 15px;
}

.hp-spec-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px dashed #e5e5e5;
}

.hp-spec-label {
  font-size: 11px;
  color: #a0a0a0;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.hp-spec-value {
  font-size: 15px;
  font-weight: 700;
  color: #222222;
}

/* Product Info Adjustments */
.product-info .product-title {
  font-size: 24px !important;
  margin-top: 10px !important;
}

/* Các khối full-width đồng bộ căn lề */
.hp-furniture-specs-container,
.woocommerce-tabs,
.related.related-products-wrapper {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: var(--ts-shadow, 0 10px 30px rgba(0, 0, 0, 0.05)) !important;
  padding: 35px !important;
  margin-bottom: 35px !important;
  border: 1px solid #f0f0f0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tinh chỉnh Tabs */
.woocommerce-tabs {
  padding-top: 25px !important;
}

.woocommerce-tabs .nav {
  margin-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;
}

/* Technical Specs Container */
.hp-furniture-specs-container {
  border: 1px solid #f0f0f0 !important;
}

.hp-specs-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 25px 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hp-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 25px;
}

.hp-spec-item {
  position: relative;
  padding-bottom: 15px;
}

.hp-spec-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px dashed #e5e5e5;
}

.hp-spec-label {
  font-size: 11px;
  color: #a0a0a0;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.hp-spec-value {
  font-size: 15px;
  font-weight: 700;
  color: #222222;
}

/* Responsive cho Mobile */
@media (max-width: 850px) {
  .product-main .row {
    flex-direction: column !important;
  }

  .hp-furniture-specs-container,
  .hp-short-description-card,
  .hp-card-standard,
  .woocommerce-tabs,
  .related.related-products-wrapper,
  .product-gallery,
  .product-info.summary {
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-radius: 15px !important;
  }

  /* Limit vertical space of gallery on mobile */
  .product-gallery-slider .flickity-viewport {
    max-height: 500px !important;
  }

  .product-gallery-slider img {
    max-height: 500px !important;
    width: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .hp-specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .hp-specs-title,
  .hp-card-title {
    font-size: 15px !important;
    margin-bottom: 15px !important;
  }

  .hp-summary-thumb-item {
    width: calc(25% - 8px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@media (max-width: 480px) {
  .hp-specs-grid {
    grid-template-columns: 1fr !important;
  }

  .hp-furniture-specs-container,
  .hp-short-description-card,
  .hp-card-standard,
  .woocommerce-tabs,
  .related.related-products-wrapper {
    padding: 15px !important;
  }

  .product-gallery-slider .flickity-viewport,
  .product-gallery-slider img {
    max-height: 400px !important;
  }

  .hp-summary-thumb-item {
    width: calc(25% - 8px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

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

  .product-gallery,
  .product-info.summary,
  .woocommerce-tabs,
  .related.related-products-wrapper {
    padding: 20px !important;
    border-radius: 15px !important;
    margin-bottom: 0 !important;
  }
}

/* Custom Share Section Styles */
.social-icons.share-icons {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-top: 30px !important;
  padding-top: 25px !important;
  border-top: 1px dashed #f0f0f0 !important;
}

.social-icons.share-icons:before {
  content: "Chia sẻ:";
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.8px;
  margin-right: 5px;
  font-family: "Quicksand";
}

.social-icons.share-icons a.icon {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 17px !important;
  border: none !important;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  background-color: #f8f9fa !important;
  color: #444 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

.social-icons.share-icons a.icon:hover {
  transform: translateY(-5px) scale(1.1) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
  color: #fff !important;
  background-color: #333 !important; /* Fallback for unknown icons */
}

/* Official Brand Colors on Hover */
.social-icons.share-icons a.whatsapp:hover {
  background-color: #25d366 !important;
}
.social-icons.share-icons a.facebook:hover {
  background-color: #1877f2 !important;
}
.social-icons.share-icons a.twitter:hover {
  background-color: #1da1f2 !important;
}
.social-icons.share-icons a.email:hover {
  background-color: #ea4335 !important;
}
.social-icons.share-icons a.pinterest:hover {
  background-color: #bd081c !important;
}
.social-icons.share-icons a.linkedin:hover {
  background-color: #0a66c2 !important;
}

.shop-container
  .product-container
  .product-gallery
  .product-images.relative
  .woocommerce-product-gallery__wrapper
  .flickity-slider
  div {
  border-radius: 20px;
  overflow: hidden;
}

@media (min-width: 851px) {
  .shop-container .product-container .product-gallery .product-images.relative,
  .shop-container
    .product-container
    .product-gallery
    .product-images.relative
    .woocommerce-product-gallery__wrapper,
  .shop-container
    .product-container
    .product-gallery
    .product-images.relative
    .woocommerce-product-gallery__wrapper
    .flickity-viewport,
  .shop-container
    .product-container
    .product-gallery
    .product-images.relative
    .woocommerce-product-gallery__wrapper
    .flickity-viewport
    .flickity-slider,
  .shop-container
    .product-container
    .product-gallery
    .product-images.relative
    .woocommerce-product-gallery__wrapper
    .flickity-viewport
    .flickity-slider
    > div {
    height: 100% !important;
    width: 100% !important;
  }

  .product-gallery-slider img,
  .product-thumbnails img,
  .shop-container
    .product-container
    .product-gallery
    .product-images.relative
    .woocommerce-product-gallery__wrapper
    .flickity-viewport
    .flickity-slider
    > div
    img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Responsive Fix for Share Section */
@media (max-width: 550px) {
  .social-icons.share-icons {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
  }
  .social-icons.share-icons:before {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    display: block !important;
  }
  .social-icons.share-icons a.icon {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 14px !important;
  }
}