/* ==========================================================================
   Purva Heritage — responsive overrides
   Only put media-query rules here. Prefer Bootstrap's responsive utilities.
   ONE block per breakpoint — never repeat a breakpoint. Ordered widest → narrowest
   so the narrower block always wins the cascade.
   Units: px only (never rem/em). Font sizes are whole numbers only.
   ========================================================================== */

/* Fluid display type — Cormorant Garamond needs a wider range than Bootstrap's
   default headings to read well from mobile up to large screens.
   clamp() min/max are whole px; the middle uses px + vw (no rem/em). */
h1,
.h1 {
  font-size: clamp(30px, 20px + 3vw, 48px);
}

h2,
.h2 {
  font-size: clamp(26px, 18px + 2vw, 36px);
}

h3,
.h3 {
  font-size: clamp(21px, 17px + 1vw, 26px);
}

.display-3 {
  font-size: clamp(38px, 24px + 4vw, 64px);
}

.display-4 {
  font-size: clamp(34px, 24px + 3vw, 52px);
}

.display-5 {
  font-size: clamp(30px, 22px + 2vw, 44px);
}

/* Offcanvas submenu reveal */
@keyframes phSubReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ================= 992px   (lg and up) ================= */
@media (min-width: 992px) {

  /* Navbar — desktop "Shop" dropdown: open on hover, no dead gap */
  .ph-dropdown__menu {
    margin-top: 0;
  }

  .ph-dropdown:hover>.ph-dropdown__menu {
    display: block;
  }

  .ph-dropdown:hover>.nav-link .ph-caret {
    transform: rotate(180deg);
  }

  /* FAQ / detail — intro column tracks the scroll */
  .ph-faq__intro {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  /* Shop — filters as a sticky sidebar card */
  .ph-filters-col {
    position: sticky;
    top: 96px;
    padding: 4px 18px 12px;
    border: 1px solid var(--ph-line);
    border-radius: 10px;
    background: var(--ph-ivory);
  }

  /* Product spec sheet — two panels split by a vertical rule */
  .ph-specsheet__col+.ph-specsheet__col {
    border-top: 0;
  }

  .ph-specsheet__col:first-child {
    border-right: 1px solid var(--ph-line);
  }

  /* Hero — text left; image bleeds edge-to-edge (top/bottom/right) on the right half.
     The image column width and the inner's right padding share the SAME base
     (the slide width, which equals the viewport), so the two columns can never
     overlap as the viewport narrows from 1400px down to 992px. The left padding
     keeps the copy aligned to a 1320px container on wider screens. */
  .ph-hero__inner {
    display: flex;
    align-items: center;
    max-width: none;
    min-height: 580px;
    /* min-height: 620px; */
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: max(24px, calc((100% - 1320px) / 2));
    padding-right: 52%;
  }

  .ph-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    margin-top: 0;
  }

  .ph-hero__media img,
  .ph-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* soft cream fade only where the image meets the text — right edge stays full-bleed */
  .ph-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(251, 242, 233, 1) 0%,
        rgba(251, 242, 233, 0) 16%);
  }

  /* Step the image column down as the viewport narrows toward 992px.
     Nested so these never leak below lg, where the split layout is off. */
  @media (max-width: 1440.9px) {
    .ph-hero__inner {
      min-height: 580px;
      padding-right: 51%;
    }

    .ph-hero__media {
      width: 51%;
    }
  }

  @media (max-width: 1399.9px) {
    .ph-hero__inner {
      min-height: 560px;
      padding-right: 49%;
    }

    .ph-hero__media {
      width: 49%;
    }
  }

  @media (max-width: 1199.9px) {
    .ph-hero__inner {
      min-height: 520px;
      padding-right: 45%;
    }

    .ph-hero__media {
      width: 45%;
    }
  }
}


@media (max-width: 1440.9px) {
  .ph-banner__slide {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ================= <= 1199px ================= */
@media (max-width: 1199.9px) {

  /* Banner carousel */
  .ph-banner__media img {
    max-width: 480px;
    max-height: 360px;
  }

  .ph-nav .nav-link {
    font-size: 12px;
    padding: 8px 6px !important;
  }

  .ph-iconbtn {
    width: 36px;
    height: 36px;
  }
}


/* ================= <= 991.9px   (below lg) ================= */
@media (max-width: 991.9px) {

  /* Navbar — slide-in offcanvas drawer */
  .ph-offcanvas {
    --bs-offcanvas-width: 320px;
    background: var(--ph-cream);
  }

  .ph-offcanvas .offcanvas-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--ph-line);
  }

  .ph-offcanvas__brand {
    display: inline-flex;
    align-items: center;
  }

  .ph-offcanvas__brand img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
  }

  .ph-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 6px 14px 20px;
  }

  /* Nav links stack full width */
  .ph-nav,
  .ph-nav .nav-item {
    width: 100%;
  }

  .ph-nav .nav-link {
    padding: 14px 8px !important;
    font-size: 13px;
  }

  .ph-nav .nav-item+.nav-item .nav-link {
    border-top: 1px solid var(--ph-line);
  }

  .ph-nav .nav-link::after {
    left: 8px;
    right: auto;
    width: 20px;
    bottom: 8px;
  }

  /* "Shop" — parent row spans full width, caret pinned to the right */
  .ph-nav .ph-dropdown .dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .ph-nav .ph-dropdown .dropdown-toggle .ph-caret {
    font-size: 13px;
  }

  /* Submenu — nested list, indented behind a gold rail, no card chrome */
  .ph-dropdown__menu {
    position: static;
    display: none;
    margin: 2px 0 8px;
    padding: 2px 0 2px 14px;
    border: 0;
    border-left: 2px solid var(--ph-gold);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
  }

  .ph-dropdown__menu.show {
    display: block;
    animation: phSubReveal .18s ease;
  }

  .ph-dropdown__menu .dropdown-item {
    padding: 11px 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ph-earth);
    border-left: 0;
    border-radius: 4px;
  }

  .ph-dropdown__menu .dropdown-item:hover,
  .ph-dropdown__menu .dropdown-item:focus-visible {
    color: var(--ph-navy);
    background-color: var(--ph-ivory);
    border-left: 0;
  }

  .ph-actions {
    gap: 6px;
    padding-left: 0;
    margin-left: 0;
    margin-top: 16px;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--ph-line);
    justify-content: flex-start;
  }

  /* Banner carousel */
  .ph-banner__slide {
    min-height: 300px;
    padding: 32px 0;
  }

  .ph-banner__media {
    min-height: 0;
  }

  .ph-banner::before,
  .ph-banner::after {
    width: 110px;
    height: 110px;
    opacity: .18;
  }

  /* Hero — below lg the >=992px absolute split is off. Lay copy + image out
     as an in-flow flex row on the SLIDE itself: .ph-hero__media is a sibling
     of .ph-hero__inner, so the flex context has to live on .swiper-slide.
     Also unwind the desktop-step values (min-height / padding-right / width). */
  .ph-hero__swiper .swiper-slide {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 40px 24px;
  }

  .ph-hero__inner {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 0;
  }

  .ph-hero__copy {
    max-width: 460px;
  }

  .ph-hero__title {
    font-size: clamp(24px, 14px + 2.6vw, 36px);
  }

  .ph-hero__lead {
    max-width: none;
    font-size: 14px;
  }

  .ph-hero__media {
    flex: 0 0 42%;
    width: auto;
    margin-top: 0;
  }

  .ph-hero__media img,
  .ph-hero__media video {
    height: clamp(280px, 40vw, 380px);
    object-fit: cover;
    border-radius: var(--ph-radius-lg);
  }

  /* Section shell */
  .ph-section {
    padding: 56px 0;
  }

  .ph-section__head {
    margin-bottom: 32px;
  }

  .ph-head {
    margin-bottom: 20px;
  }

  /* "This week's edit" — 2-up, first card no longer spans */
  .ph-edit__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }

  .ph-edit__grid>.ph-tile:nth-child(1) {
    grid-column: auto;
    grid-row: auto;
  }

  /* Best sellers */
  .ph-best .ph-tile__img {
    height: 210px;
  }

  /* Journal / blog */
  .ph-post__img {
    height: 200px;
  }

  /* About / Our Story */
  .ph-about__media {
    aspect-ratio: 16 / 10;
  }

  .ph-story__row {
    margin-top: 32px;
  }

  .ph-how__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 28px;
  }

  .ph-how__steps::before {
    display: none;
  }

  /* Product details + homepage journal — swipe + dots handle it below lg */
  .ph-related__ctrl,
  .ph-journal__ctrl {
    display: none;
  }

  /* Shop — filters live in the offcanvas drawer */
  .ph-filters .offcanvas-body {
    padding: 4px 4px 8px;
  }

  .ph-filters__foot {
    display: flex;
    position: sticky;
    bottom: 0;
    margin-top: 16px;
    padding: 14px 4px;
    background: var(--ph-cream);
  }

  .ph-shop__grid .ph-tile__img {
    height: 220px;
  }

  /* Footer */
  .ph-footer__top {
    padding: 44px 0 32px;
  }

  .ph-offer__deal{
    font-size: 32px;
  }
  .ph-cta__body{
    padding: 30px;
  }
  .ph-cta__title{
    font-size: 32px;
  }
  .ph-insta{
    padding-bottom: 0;
  }
  .ph-story-hero__title, .ph-article__title, .ph-pdp__title{
    font-size: 36px;
  }
  .ph-how__title, .ph-head__title, .ph-about__title, .ph-faq__title{
    font-size: 32px;
  }
  .ph-tile__name{
    font-size: 16px;
  }
  .ph-pdp__meta{
    margin-bottom: 0;
  }
  .ph-pdp-page .ph-section.ph-pdp{
    padding-bottom: 24px;
  }
}


/* ================= <= 767px   (below md) ================= */
@media (max-width: 767.9px) {

  .ph-section.ph-related.mb-5{
    margin-bottom: 0 !important;
  }
  .ph-btn--gold, .ph-btn--navy{
    font-size: 12px;
  }
  .ph-hero__copy{
    text-align: center;
  }
  .ph-hero__copy .banner-btn{
    justify-content: center;
  }
  .ph-shop{
    position: relative;
  }
  .ph-crumbs{
    position: absolute;
    top: 20px;
  }
  .ph-toolbar{
    margin-top: 16px;
  }
  .ph-pdp-page .ph-crumbs{
    position: inherit;
    font-size: 10px;
  }
  .ph-contact .ph-section.mb-5{
    margin-bottom: 28px !important;
    padding: 36px 0px;
  }
  body {
    font-size: 14px;
  }

  :root {
    --bs-body-font-size: 14px;
  }

  /* Hero — stack copy over image once the row gets too tight */
  .ph-hero__swiper .swiper-slide {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 34px 18px;
  }

  .ph-hero__inner {
    flex: 0 1 auto;
  }

  .ph-hero__copy {
    max-width: 100%;
  }

  .ph-hero__media {
    flex: 0 1 auto;
    margin-top: 22px;
  }

  .ph-hero__media img,
  .ph-hero__media video {
    height: inherit;
  }

  /* "How we work" — stack the steps, drop the thread */
  .ph-how__steps {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .ph-how__steps::before {
    display: none;
  }

  .ph-how__title {
    margin-bottom: 32px;
  }

  /* Explore by craft */
  .ph-cat {
    gap: 14px;
    padding: 12px;
  }

  .ph-cat__ring {
    width: 72px;
    height: 72px;
  }

  /* Capsule */
  .ph-capsule__inner {
    grid-template-columns: 1fr;
  }

  .ph-capsule__text {
    padding: 32px 24px;
  }

  .ph-capsule__media {
    min-height: 240px;
  }

  /* Journal / blog */
  .ph-post__img {
    height: 220px;
  }

  /* Blog article */
  .ph-article__body>p,
  .ph-article__body li {
    font-size: 15px;
  }

  .ph-article__body>p:first-of-type::first-letter {
    font-size: 48px;
  }

  .ph-article__quote {
    font-size: 20px;
    padding-left: 18px;
  }

  .ph-article__foot {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Contact CTA */
  .ph-cta__card {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .ph-cta__media {
    border-right: 0;
    border-bottom: 1px solid rgba(183, 141, 60, .5);
  }

  .ph-cta__media img {
    min-height: 220px;
    max-height: 300px;
  }

  .ph-cta__body {
    padding: 34px 28px;
  }

  .ph-cta__card::after {
    width: 240px;
    height: 240px;
    top: -110px;
    right: -80px;
  }
  .ph-edit__grid .ph-tile__cap{
    flex-wrap: wrap;
  }
  .ph-insta__bar{
    flex-wrap: wrap;
  }
}


/* ================= <= 575px   (below sm) ================= */
@media (max-width: 575.9px) {
  .ph-blog .ph-section.ph-journal.mb-5{
    margin-bottom: 0 !important;
  }

  /* Section ornament + label spacing */
  .rule-ornament::before,
  .rule-ornament::after {
    width: 32px;
  }

  .eyebrow {
    letter-spacing: 2px;
  }

  /* Banner carousel */
  .ph-banner-wrap {
    padding: 18px;
  }

  .ph-banner__slide {
    min-height: 0;
    padding: 28px 0;
  }

  .ph-banner::before {
    display: none;
  }

  .ph-banner__lead {
    font-size: 14px;
  }

  .ph-banner__ctrl {
    display: none;
  }

  /* swipe + dots handle it on phones */

  /* Hero — tighter gutters + shorter image on phones */
  .ph-hero__swiper .swiper-slide {
    padding: 32px 16px;
  }

  .ph-hero__media img,
  .ph-hero__media video {
    height: 240px;
  }

  /* Section shell */
  .ph-section {
    padding: 44px 0;
  }

  /* "This week's edit" — 1-up */
  .ph-edit__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    grid-auto-rows: 280px;
  }

  .ph-tile__name,
  .ph-tile__price {
    font-size: 14px;
  }

  /* Best sellers */
  .ph-best .ph-tile__img {
    height: 170px;
  }

  /* About / Our Story */
  .ph-story-hero {
    padding: 32px 0;
  }

  .ph-story__section {
    margin-top: 40px;
  }

  /* Craft page */
  .ph-craftpage__grid .ph-tile__img {
    height: 180px;
  }

  .ph-origin__facts {
    gap: 8px 18px;
  }

  .ph-story__cta-actions {
    flex-direction: column;
  }

  .ph-story__cta-actions .ph-btn {
    width: 100%;
  }

  /* Shop */
  .ph-toolbar {
    gap: 10px 12px;
  }

  .ph-toolbar__count {
    order: 3;
    width: 100%;
  }

  .ph-sort {
    margin-left: 0;
  }

  .ph-sort .form-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ph-shop__grid .ph-tile__img {
    height: 200px;
  }

  .ph-pagination {
    margin-top: 28px;
  }

  .ph-pagination .page-link {
    min-width: 36px;
    padding: 8px 10px;
  }

  /* FAQ */
  .ph-faq .accordion-button {
    padding-right: 32px;
    font-size: 15px;
  }

  .ph-faq .accordion-body {
    padding-right: 0;
  }

  /* Product details */
  .ph-spec__row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 11px 18px;
  }

  .ph-specsheet__head {
    padding: 13px 18px;
  }

  .ph-pdp__buy .ph-field {
    flex: 1 1 100%;
  }

  .ph-pdp__buy .ph-btn {
    flex: 1 1 auto;
  }

  .ph-modal__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .ph-modal__foot .ph-btn {
    justify-content: center;
  }

  /* Contact CTA */
  .ph-cta__actions {
    flex-direction: column;
  }

  .ph-cta__actions .ph-btn {
    width: 100%;
  }

  /* Instagram */
  .ph-insta {
    padding-top: 44px;
  }

  .ph-insta__bar {
    flex-wrap: wrap;
    gap: 14px 16px;
    margin-bottom: 28px;
  }

  .ph-insta__avatar {
    width: 60px;
    height: 60px;
  }

  .ph-insta__meta {
    flex-basis: calc(100% - 76px);
  }

  .ph-insta__bio {
    display: none;
  }

  .ph-insta__follow {
    order: 3;
    width: 100%;
  }

  /* Top bar */
  .ph-topbar {
    display: none;
  }

  .ph-topbar__link {
    letter-spacing: 0;
  }

  /* Navbar — small phones */
  .ph-brand__img {
    height: 44px;
  }

  /* Footer */
  .ph-footer__bar {
    justify-content: center;
    text-align: center;
  }

  .ph-footer__legal {
    justify-content: center;
  }

  .ph-footer__pay {
    width: 100%;
    justify-content: center;
  }
}


/* ================= <= 420px ================= */
@media (max-width: 420px) {
  .ph-how__steps{
    gap: 16px;
  }
  .ph-cta.mb-5{
    padding-top: 0;
    margin-bottom: 24px !important;
  }
  .ph-how{
    padding: 44px 0px;
  }
  .ph-hero__title{
    font-size: 28px;
  }
  .ph-btn--gold, .ph-btn--navy, .ph-btn--outline{
    font-weight: 600;
    padding: 12px 14px;
  }
  .ph-hero__swiper .swiper-slide{
    padding-bottom: 30px;
  }
  .ph-cta__actions{
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .ph-section.ph-edit{
    padding-top: 0;
  }
  .ph-rating__score{
    font-size: 24px;
  }
  .ph-rating__summary i.bi-google{
    font-size: 16px;
  }
  .ph-footer__top{
    padding: 0;
  }
  /* Explore by craft */
  .ph-cat {
    gap: 12px;
  }

  .ph-cat__ring {
    width: 64px;
    height: 64px;
  }
}