[section="collections"] {
  display: grid;
  gap: var(--spacing-12);
}

[section="collections"] .section-core {
    display: grid;
    gap: var(--spacing-12);
    grid-template-columns: repeat(2, 1fr);
  }

:is([section="collections"] .section-core) [block="collection"] {
      display: grid;
      gap: var(--spacing-12);
      height: calc(35vh - var(--spacing-6));
    }

:is(:is([section="collections"] .section-core) [block="collection"]):first-child {
        height: 70vh;
        grid-row: 1 / 3;
        position: relative;
      }

:is(:is([section="collections"] .section-core) [block="collection"]):first-child .content {
          width: 30%;
          position: absolute;
          inset-inline-start: var(--spacing-24);
          inset-block-end: var(--spacing-24);
        }

:is(:is([section="collections"] .section-core) [block="collection"]):nth-child(2) {
        grid-template-columns: 60% auto;
      }

:is(:is([section="collections"] .section-core) [block="collection"]):nth-child(3) {
        grid-template-columns: auto 60%;
      }

:is(:is([section="collections"] .section-core) [block="collection"]):nth-child(3) .content {
          order: -1;
        }

:is(:is([section="collections"] .section-core) [block="collection"]) .media {
        width: 100%;
        height: inherit;
        overflow: hidden;
        position: relative;
        border-radius: var(--radius-md);
        background-color: var(--color-surface-container);
      }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .media) img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .media) > [ui-icon] {
          opacity: 0.3;
          position: absolute;
          translate: -50% -50%;
          left: 50%;
          inset-block-start: 50%;
        }

:is(:is([section="collections"] .section-core) [block="collection"]) .content {
        text-decoration: none;
        border-radius: var(--radius-md);
        padding: calc(var(--spacing-48) - var(--spacing-8));
        display: flex;
        gap: var(--spacing-24);
        flex-direction: column;
        justify-content: space-between;
        color: var(--color-on-theme);
        background-color: var(--color-theme);
      }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text {
          display: grid;
          gap: var(--spacing-8);
        }

:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text) .title {
            font: var(--font-title-lg);
          }

:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text) .description {
            opacity: 0.8;
            text-wrap: balance;
            display: -webkit-box; 
            -webkit-line-clamp: 5; 
            -webkit-box-orient: vertical; 
            overflow: hidden;
            text-overflow: ellipsis;
          }

:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action {
          color: inherit;
          width: fit-content;
        }

:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action)::before {
            background-color: currentColor;
          }

/* Responsive */
@media (max-width: 1280px) {
    [section="collections"] .section-core {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 769px) {
      :is([section="collections"] .section-core) [block="collection"] {
        height: auto !important;
        grid-template-columns: 1fr !important;
      }

        :is(:is([section="collections"] .section-core) [block="collection"]) .media {
          order: -1;
          height: calc(35vh - var(--spacing-6));
        }

        :is(:is([section="collections"] .section-core) [block="collection"]) .content {
          width: 100% !important;
          position: static !important;
          padding: calc(var(--spacing-24) + var(--spacing-8));
          background-color: var(--color-surface-container-low) !important;
        }

          :is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .description {
            color: var(--color-on-background) !important;
          }

            .description:is(:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .text,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .action,:is(:is(:is([section="collections"] .section-core) [block="collection"]) .content) .description) {
              opacity: 0.7 !important;
            }
}


/* HAYYAK mobile collections – forced (loads with section) */
@media (max-width: 769px) {
  [section="collections"] .section-core {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  :is([section="collections"] .section-core) [block="collection"],
  :is([section="collections"] .section-core) [block="collection"]:first-child,
  :is([section="collections"] .section-core) [block="collection"]:nth-child(2),
  :is([section="collections"] .section-core) [block="collection"]:nth-child(3) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #C4A050 !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .media {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 260px !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
    background: #2a241c !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .content {
    order: 2 !important;
    position: relative !important;
    width: 100% !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 16px 14px 16px !important;
    border-radius: 0 !important;
    /* soft black at top → gold like reference */
    background: linear-gradient(
      180deg,
      rgba(20, 16, 12, 0.22) 0%,
      rgba(40, 32, 22, 0.08) 12%,
      #CDB06A 28%,
      #C4A050 55%,
      #B89240 100%
    ) !important;
    background-color: #C4A050 !important;
    color: #2A2218 !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .content .title,
  :is([section="collections"] .section-core) [block="collection"] .content .description,
  :is([section="collections"] .section-core) [block="collection"] .content .action,
  :is([section="collections"] .section-core) [block="collection"] .content .text {
    color: #2A2218 !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .content .action {
    background: #FFF6E4 !important;
    color: #5A3C1A !important;
    border-radius: 999px !important;
    text-decoration: none !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .content .action::before {
    display: none !important;
    content: none !important;
  }
}

/* Per-card black top intensity (mobile) */
@media (max-width: 769px) {
  /* 1st collection – keep current (unchanged) */

  /* 2nd collection – much stronger black at top */
  :is([section="collections"] .section-core) [block="collection"]:nth-child(2) .content {
    background: linear-gradient(
      180deg,
      rgba(10, 8, 6, 0.55) 0%,
      rgba(20, 16, 12, 0.35) 18%,
      rgba(60, 48, 30, 0.18) 32%,
      #CDB06A 48%,
      #C4A050 70%,
      #B89240 100%
    ) !important;
  }

  /* 3rd collection – slightly stronger black at top */
  :is([section="collections"] .section-core) [block="collection"]:nth-child(3) .content {
    background: linear-gradient(
      180deg,
      rgba(12, 10, 8, 0.32) 0%,
      rgba(30, 24, 18, 0.16) 16%,
      #CDB06A 36%,
      #C4A050 65%,
      #B89240 100%
    ) !important;
  }
}


/* Kill white hairline between image and title panel */
@media (max-width: 769px) {
  :is([section="collections"] .section-core) [block="collection"] {
    gap: 0 !important;
    row-gap: 0 !important;
    background: #C4A050 !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .media {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* keep image visible – do not collapse */
  }
  :is([section="collections"] .section-core) [block="collection"] .media img {
    display: block !important;
    margin: 0 !important;
    vertical-align: bottom !important;
    border: none !important;
  }
  :is([section="collections"] .section-core) [block="collection"] .content {
    margin: -1px 0 0 0 !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
  }
}