/*
 * Products lounge hero — page-local layer.
 * Keeps the catalogue lifecycle and shared Home system intact while giving
 * Products its own approved beach-loungers composition.
 */
.products-page .products-page-doodle { display: none !important; }

/* Published catalogue: reuse the approved coastal artwork only behind the
   product browsing surface. Empty catalogue and every other page stay solid. */
.products-page.products-has-published #products.products-catalog-section {
  background-color: #bcecf7 !important;
  background-image:
    linear-gradient(rgba(238, 252, 255, .18), rgba(255, 249, 238, .24)),
    url("../brand/pawnyra-coastal-background-v1.png") !important;
  background-image:
    linear-gradient(rgba(238, 252, 255, .18), rgba(255, 249, 238, .24)),
    image-set(
      url("../brand/pawnyra-coastal-background-v1-desktop.avif") type("image/avif") 1x,
      url("../brand/pawnyra-coastal-background-v1-desktop.webp") type("image/webp") 1x,
      url("../brand/pawnyra-coastal-background-v1.png") type("image/png") 1x
    ) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.products-page.products-has-published .products-catalog-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 30px;
  text-align: center;
}

.products-page.products-has-published .products-catalog-heading > div:first-child {
  width: 100%;
  min-width: 0;
}

.products-page.products-has-published .products-catalog-heading .products-page-kicker {
  display: none;
}

.products-page.products-has-published .products-catalog-heading h2 {
  max-width: 100%;
  margin: 0;
  color: var(--cb-navy);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(255, 255, 255, .88);
}

.products-page.products-has-published #products .filters {
  box-sizing: border-box;
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  justify-content: center !important;
}

/* Shop fallback: when nothing is published, keep the customer out of an empty
   page. The catalogue replaces this card automatically as soon as a published
   product exists. */
.shop-page .shop-empty-state {
  display: none;
}

.shop-page.products-no-published #products.products-catalog-section {
  display: grid;
  min-height: clamp(430px, 58vh, 620px);
  margin-top: 0;
  padding: clamp(52px, 8vw, 92px) 24px;
  place-items: center;
  background: #fff9ee;
}

.shop-page.products-no-published #products.products-catalog-section::before,
.shop-page.products-no-published .products-catalog-heading,
.shop-page.products-no-published #productGrid {
  display: none;
}

.shop-page.products-no-published .shop-empty-state {
  box-sizing: border-box;
  display: grid;
  width: min(100%, 720px);
  min-height: 310px;
  padding: clamp(34px, 5vw, 58px);
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid rgba(7, 157, 202, .18);
  border-radius: 32px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 22px 55px rgba(7, 61, 99, .09);
  text-align: center;
}

.shop-empty-state__paw {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: 50%;
  background: #e5f8fd;
  color: #079fca;
  font-size: 27px;
  line-height: 1;
}

.shop-empty-state__eyebrow {
  margin: 0;
  color: #079fca;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-empty-state h2 {
  margin: 0;
  color: var(--cb-navy);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.shop-empty-state__body {
  max-width: 560px;
  margin: 0;
  color: #38637c;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 650;
  line-height: 1.6;
}

.products-page .shop-empty-state__action {
  min-width: 156px;
  margin-top: 12px;
}

/* The first published product should read as the focus of the catalogue, not
   as the first cell of an otherwise empty three-column grid. */
.products-page.products-has-published #products #productGrid.product-grid:has(.catalog-product-card:only-child) {
  grid-template-columns: minmax(280px, 360px) !important;
  justify-content: center !important;
}

/* A landscape source should define its own detail-frame height. This removes
   letterbox gaps without cropping the product to force it into a square. */
.products-page .detail-main:has(> .detail-image-button img) {
  aspect-ratio: auto;
}

.products-page .detail-main:has(> .detail-image-button img) > .detail-image-button,
.products-page .detail-main:has(> .detail-image-button img) > .detail-image-button img {
  height: auto;
}

.products-page .detail-main:has(> .detail-image-button img) > .detail-image-button img {
  display: block;
  object-fit: contain;
}

/* Products is now the editorial introduction. Its catalogue DOM stays in the
   document solely so Product Studio can keep using products.html?admin-preview=1. */
.products-intro-page:not(.admin-product-preview-mode) .products-preview-catalog {
  display: none !important;
}

.admin-product-preview-mode .products-introduction {
  display: none !important;
}

.products-introduction {
  box-sizing: border-box;
  width: min(calc(100% - 40px), 1180px);
  margin: 54px auto 68px;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid rgba(7, 157, 202, .18);
  border-radius: 34px;
  background: rgba(247, 253, 253, .96);
  box-shadow: 0 22px 55px rgba(7, 61, 99, .08);
}

.products-introduction__heading {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.products-introduction__eyebrow {
  margin: 0 0 10px;
  color: #079fca;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.products-introduction__heading h2 {
  margin: 0;
  color: var(--cb-navy);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.products-introduction__lead {
  max-width: 690px;
  margin: 17px auto 0;
  color: #285f7d;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 650;
  line-height: 1.65;
}

.products-introduction__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.products-introduction__card {
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(7, 157, 202, .16);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(7, 61, 99, .06);
}

.products-introduction__number {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 50%;
  background: #dff8fa;
  color: #008fac;
  font-weight: 900;
}

.products-introduction__card:nth-child(2) .products-introduction__number {
  background: #fff0ee;
  color: #ef625a;
}

.products-introduction__card:nth-child(3) .products-introduction__number {
  background: #fff3c8;
  color: #bd8600;
}

.products-introduction__card h3 {
  margin: 0;
  color: var(--cb-navy);
  font-size: 20px;
  line-height: 1.25;
}

.products-introduction__card p {
  margin: 11px 0 0;
  color: #356985;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}

.products-page .products-introduction__action {
  display: flex !important;
  width: fit-content;
  min-width: 190px;
  margin: 34px auto 0;
}

.shop-page .shop-main,
.shop-page #products.products-catalog-section {
  margin-top: 0 !important;
}

@media (min-width: 901px) {
  .products-page .products-page-hero {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2048 / 816 !important;
    overflow: hidden;
    background: #d9f3ff;
  }

  .products-page .products-page-hero-media,
  .products-page .products-page-hero-image {
    width: 100%;
    height: 100%;
  }

  .products-page .products-page-hero-image {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .products-page .products-page-hero::after {
    z-index: 0 !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0 42%, rgba(255,255,255,.12) 56%, rgba(255,255,255,.42) 100%) !important;
  }

  .products-page .products-page-hero-copy {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(480px, 29vw);
    margin: 0 0 0 clamp(610px, 55vw, 1045px);
    padding: clamp(88px, 8.5vw, 158px) 0 0;
    text-align: center;
  }

  .products-page .products-page-hero-copy::before {
    content: "♡";
    position: absolute;
    top: clamp(76px, 7vw, 132px);
    right: clamp(6px, 1vw, 22px);
    color: var(--cb-coral);
    font: 400 clamp(38px, 3.2vw, 56px)/1 Georgia, serif;
    transform: rotate(-12deg);
  }

  .products-page .products-page-hero-copy::after {
    content: "✦";
    position: absolute;
    left: clamp(-36px, -2vw, -12px);
    top: clamp(162px, 13vw, 236px);
    color: #2ec6cc;
    font: 400 clamp(26px, 2.2vw, 42px)/1 Georgia, serif;
    transform: rotate(9deg);
  }

  .products-page .products-page-kicker {
    margin-bottom: 13px;
    color: #079fca;
    font-size: clamp(15px, 1.2vw, 19px);
    letter-spacing: .13em;
  }

  .products-page .products-page-hero h1 {
    max-width: 100%;
    color: var(--cb-navy);
    font-size: clamp(44px, 4.15vw, 68px);
    line-height: 1.04;
    letter-spacing: -.052em;
    text-wrap: balance;
  }

  .products-page .products-page-hero-copy > p:not(.products-page-kicker) {
    max-width: 440px;
    margin: 20px auto 0;
    color: #164d6f;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 650;
    line-height: 1.55;
  }

  .products-page .hero-actions {
    justify-content: center;
    margin-top: 30px;
    gap: 16px;
  }

  .products-page .hero-actions .primary-action,
  .products-page .hero-actions .secondary-action {
    min-width: 158px;
    min-height: 52px;
    padding-inline: 29px;
    font-size: 15px;
  }

  .products-page .products-quick-links {
    box-sizing: border-box;
    min-height: 192px !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 38px clamp(44px, 11vw, 210px) 42px !important;
    background: var(--cb-cream);
  }

  .products-page .products-quick-links::before { display: none !important; }

  .products-page .products-quick-link {
    align-content: center;
    gap: 10px;
  }

  .products-page .products-quick-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .products-page .products-quick-link strong { font-size: 16px; }
  .products-page .products-quick-link small { font-size: 13px; }

  .products-page .products-catalog-section {
    min-height: 420px;
    margin-top: 0 !important;
    padding-top: 68px;
  }

  .products-page .products-catalog-section::before { display: none !important; }

}

@media (min-width: 901px) and (max-width: 1100px) {
  .products-page .products-page-hero-copy {
    width: 42vw;
    margin-left: 54vw;
    padding-top: 38px;
  }

  .products-page .products-page-hero-copy::before {
    top: 24px;
  }

  .products-page .products-page-hero-copy::after {
    top: 116px;
  }

  .products-page .products-page-hero h1 {
    font-size: clamp(31px, 4vw, 40px);
  }

  .products-page .products-page-hero-copy > p:not(.products-page-kicker) {
    margin-top: 11px;
    font-size: 13px;
    line-height: 1.4;
  }

  .products-page .hero-actions {
    flex-wrap: nowrap;
    margin-top: 15px;
    gap: 8px;
  }

  .products-page .hero-actions .primary-action,
  .products-page .hero-actions .secondary-action {
    min-width: 118px;
    min-height: 42px;
    padding-inline: 15px;
    font-size: 12px;
  }
}

@media (max-width: 900px) {
  .shop-page.products-no-published #products.products-catalog-section {
    min-height: 430px;
    padding: 34px 14px;
  }

  .shop-page.products-no-published .shop-empty-state {
    min-height: 330px;
    padding: 32px 20px;
    border-radius: 26px;
  }

  .shop-empty-state h2 {
    font-size: clamp(27px, 8vw, 36px);
  }

  .products-page .shop-empty-state__action {
    width: min(100%, 240px);
  }

  .products-introduction {
    width: min(calc(100% - 28px), 620px);
    margin: 28px auto 38px;
    padding: 30px 18px;
    border-radius: 26px;
  }

  .products-introduction__heading {
    margin-bottom: 24px;
  }

  .products-introduction__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .products-introduction__card {
    padding: 22px;
  }

  .products-page .products-introduction__action {
    width: min(100%, 270px);
    margin-top: 24px;
  }

  .products-page.products-has-published #products.products-catalog-section {
    background-image:
      linear-gradient(rgba(238, 252, 255, .18), rgba(255, 249, 238, .24)),
      url("../brand/pawnyra-coastal-background-v1.png") !important;
    background-image:
      linear-gradient(rgba(238, 252, 255, .18), rgba(255, 249, 238, .24)),
      image-set(
        url("../brand/pawnyra-coastal-background-v1-mobile.avif") type("image/avif") 1x,
        url("../brand/pawnyra-coastal-background-v1-mobile.webp") type("image/webp") 1x,
        url("../brand/pawnyra-coastal-background-v1.png") type("image/png") 1x
      ) !important;
    background-position: center top !important;
  }

  .products-page.products-has-published .products-catalog-heading {
    gap: 14px;
  }

  .products-page.products-has-published .products-catalog-heading h2 {
    font-size: clamp(19px, 6.7vw, 30px);
  }

  .products-page.products-has-published #products #productGrid.product-grid:has(.catalog-product-card:only-child) {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-inline: auto !important;
  }

  .products-page.products-has-published #products #productGrid.product-grid:has(.catalog-product-card:only-child) > .catalog-product-card {
    width: 100% !important;
    max-width: 360px !important;
  }

  .products-page .products-page-hero {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    background: #d9f3ff;
  }

  .products-page .products-page-hero-image {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .products-page .products-page-hero::after {
    z-index: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.03) 50%, rgba(255,255,255,0)) !important;
  }

  .products-page .products-page-hero-copy {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% - 28px);
    max-width: 450px;
    margin: 0 auto;
    padding: clamp(22px, 6vw, 34px) 18px 18px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 25px;
    background: rgba(255,255,255,.70);
    box-shadow: 0 12px 30px rgba(7,61,99,.10);
    text-align: center;
    backdrop-filter: blur(4px);
  }

  .products-page .products-page-kicker {
    margin-bottom: 6px;
    font-size: 10px;
    letter-spacing: .13em;
  }

  .products-page .products-page-hero h1 {
    max-width: 330px;
    margin-inline: auto;
    font-size: clamp(28px, 8.1vw, 38px);
    line-height: 1.05;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  .products-page .products-page-hero-copy > p:not(.products-page-kicker) {
    max-width: 316px;
    margin: 10px auto 0;
    font-size: clamp(12px, 3.45vw, 15px);
    font-weight: 650;
    line-height: 1.42;
  }

  .products-page .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: min(270px, 100%);
    margin: 15px auto 0;
  }

  .products-page .hero-actions .primary-action,
  .products-page .hero-actions .secondary-action {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 0 14px;
    font-size: 12px;
  }

  .products-page .products-quick-links {
    box-sizing: border-box;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 20px 12px 26px !important;
    grid-template-rows: repeat(2, minmax(108px, auto));
    background: var(--cb-cream);
  }

  .products-page .products-quick-links::before { display: none !important; }

  .products-page .products-quick-link {
    align-content: center;
    gap: 7px;
    border: 1px solid rgba(7,157,202,.18);
  }

  .products-page .products-quick-icon {
    width: 46px !important;
    height: 46px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px 25px !important;
  }

  .products-page .products-quick-icon::before,
  .products-page .products-quick-icon::after {
    display: none !important;
    content: none !important;
  }

  .products-page .products-quick-link--products .products-quick-icon {
    background-color: #fff0ee !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ff8179'%3E%3Ccircle cx='7.4' cy='10.3' r='3.1'/%3E%3Ccircle cx='13.1' cy='6.7' r='3.1'/%3E%3Ccircle cx='18.9' cy='6.7' r='3.1'/%3E%3Ccircle cx='24.6' cy='10.3' r='3.1'/%3E%3Cpath d='M16 14c-4.9 0-8.4 3.5-8.4 7.5 0 3.6 2.8 5 8.4 5s8.4-1.4 8.4-5c0-4-3.5-7.5-8.4-7.5Z'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link--shipping .products-quick-icon {
    background-color: #dff8fa !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%2300a9c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35'%3E%3Cpath d='M4.5 8h14v12h-14zM18.5 12h4l4 4v4h-8z'/%3E%3Cpath d='M7.5 20h11M9 24a2.4 2.4 0 1 0 0-4.8A2.4 2.4 0 0 0 9 24Zm14 0a2.4 2.4 0 1 0 0-4.8A2.4 2.4 0 0 0 23 24Z'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link--returns .products-quick-icon {
    background-color: #fff3c8 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23e5a908' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.45'%3E%3Cpath d='m10 7-5 5 5 5'/%3E%3Cpath d='M5.5 12H17a7 7 0 0 1 0 14h-1'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link--questions .products-quick-icon {
    background-color: #e3f3ff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231495d8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.35'%3E%3Crect x='4.5' y='7.5' width='23' height='17' rx='2'/%3E%3Cpath d='m5.5 9 10.5 8L26.5 9'/%3E%3C/svg%3E") !important;
  }

  .products-page .products-quick-link strong { font-size: 12px; }
  .products-page .products-quick-link small { font-size: 10px; }

  .products-page .products-catalog-section {
    margin-top: 0 !important;
    padding-top: 44px;
  }

  .products-page .products-catalog-section::before { display: none !important; }

  /* The mobile Products shortcut grid meets the Footer directly: no wave and
     no cream spacer.  The desktop footer remains unchanged. */
  .products-page .clear-bay-footer {
    margin-top: 0 !important;
    padding: 28px 20px 0 !important;
  }

  .products-page .clear-bay-footer::before,
  .products-page .clear-bay-footer::after {
    display: none !important;
    content: none !important;
  }
}