/* Custom CSS DP Homepage */
/* Dolphin Pacific homepage corrections - stable selectors */

/* The Page Builder row containing the semantic All Categories link. */
[data-content-region="below_header"]
  [data-sub-layout-container]:has(a[href="/categories/"]) {
  align-items: flex-start;
}

[data-content-region="below_header"]
  [data-sub-layout-container]:has(a[href="/categories/"])
  > [data-sub-layout] {
  justify-content: flex-start !important;
  align-items: stretch;
}

/* Fixed, consistently aligned category circles. */
[data-content-region="below_header"]
  [data-sub-layout-container]:has(a[href="/categories/"])
  [id^="sd-image-"] {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto !important;
  margin-inline: auto !important;
  background-position: center !important;
  background-size: contain !important;
  border-radius: 50% !important;
}

/* Two-line label area prevents wrapping from shifting individual items. */
[data-content-region="below_header"]
  [data-sub-layout-container]:has(a[href="/categories/"])
  [class^="sd-simple-text-"] {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 54px;
}

/* Align the All Categories button with the circles. */
[data-content-region="below_header"]
  [data-sub-layout]:has(a[href="/categories/"]) {
  justify-content: center !important;
  padding-bottom: 54px !important;
}

/*
 * Featured product set containing Dolphin Liberty 600.
 * The product URL is stable; the Page Builder UUID is not.
 */
[id^="sd-product-set-"]:has(a[href$="/dolphin-liberty-600/"])
  :is([class*="productCard"], [class*="ProductCard"], [class*="product-card"], .card) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/*
 * Normalize featured product images so mixed product photos do not appear
 * overly zoomed or uneven from item to item.
 */
[id^="sd-product-set-"]:has(a[href$="/dolphin-liberty-600/"])
  .card-img-container {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[id^="sd-product-set-"]:has(a[href$="/dolphin-liberty-600/"])
  .card-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center !important;
}

[id^="sd-product-set-"]:has(a[href$="/dolphin-liberty-600/"])
  :is([class*="productName"], [class*="ProductName"], [class*="product-name"], .card-title) {
  min-height: 54px;
}

[id^="sd-product-set-"]:has(a[href$="/dolphin-liberty-600/"])
  :is([class*="buttonContainer"], [class*="ButtonContainer"], [class*="button-container"], .card-section--buttons) {
  margin-top: auto !important;
}

/* First text widget beside the Skimmi image is the New Arrivals heading. */
[data-content-region="below_header"]
  [data-sub-layout-container]:has(img[src*="skimmi-new-arrivals"])
  > [data-sub-layout]:last-child
  > [data-widget-id]:has(p):first-of-type p {
  font-family: Nunito, sans-serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #111111 !important;
}

/* Round only the specific SKIMMI/Page Builder image box. */
#sd-image-3cc959d6-ac8f-4f5a-8260-6af6e7856537 {
  border-radius: 10px;
  overflow: hidden;
}

#sd-image-3cc959d6-ac8f-4f5a-8260-6af6e7856537 img {
  border-radius: 10px;
}

/*
 * Keep labels/titles from forcing awkward overflow on dense product cards.
 * This is useful for long SKUs, product names, and custom-field values.
 */
[id^="sd-product-set-"]:has(a[href$="/dolphin-liberty-600/"])
  :is(.card-title, .card-text, .custom-fields) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 700px) {
  [data-content-region="below_header"]
    [data-sub-layout-container]:has(a[href="/categories/"])
    > [data-sub-layout] {
    flex-basis: 50% !important;
    max-width: 50% !important;
    margin-bottom: 24px;
  }

  [data-content-region="below_header"]
    [data-sub-layout]:has(a[href="/categories/"]) {
    padding-bottom: 0 !important;
  }
}