/* ==========================================================================
   Purva Heritage — Design tokens & base theme
   Bootstrap 5 does the layout/components; this file only defines the brand.
   Units: px only (never rem/em). Font sizes are whole numbers only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand core (from the logo) --- */
  --ph-navy:        #0A1C3B;   /* primary: wordmark, headers, headings, ink   */
  --ph-navy-600:    #16305A;   /* lighter navy for hovers                     */
  --ph-gold:        #B78D3C;   /* primary accent: rules, links, active        */
  --ph-gold-600:    #9A7530;   /* gold hover / border                         */
  --ph-saffron:     #F2C14E;   /* bright highlight: CTA hover, badges, stars  */
  --ph-cream:       #FBF2E9;   /* warm band bg (header, banner gradient)      */
  --ph-page:        #FEFCF8;   /* body / page background — light warm white   */
  --ph-ivory:       #FFFDF8;   /* card / surface background                   */

  /* --- Warm accents (from the product range) --- */
  --ph-terracotta:  #A9542F;   /* category tags, terracotta line              */
  --ph-alta:        #B23A2E;   /* alpona/kolka red: festive labels, wishlist  */
  --ph-brass:       #AD8A50;   /* muted metallic: icons, secondary borders    */

  /* --- Neutrals --- */
  --ph-beige:       #BDB49A;   /* hairline borders, muted fills               */
  --ph-earth:       #8B7D63;   /* secondary text, captions                    */
  --ph-muted:       #6B6357;   /* body-secondary text                         */
  --ph-line:        #E7DCC9;   /* card borders / dividers on cream            */
  --ph-ink:         #1C1B18;   /* deep near-black body copy                   */

  /* --- Semantic --- */
  --ph-success:     #3E7A5E;
  --ph-danger:      #B23A2E;
  --ph-info:        #3A6B8A;
  --ph-warning:     #C98A1E;

  /* --- Typography --- */
  --ph-font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --ph-font-body:    "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Radius / elevation --- */
  --ph-radius:       6px;
  --ph-radius-lg:    10px;
  --ph-shadow-sm:    0 1px 2px rgba(10, 28, 59, .04);
  --ph-shadow:       0 4px 16px rgba(10, 28, 59, .07);

  /* --- Legacy aliases (do not remove — earlier markup may use these) --- */
  --primary:    var(--ph-navy);
  --secondary:  var(--ph-gold);
  --background: var(--ph-cream);
  --beige:      var(--ph-beige);
  --earth:      var(--ph-earth);
  --text:       var(--ph-navy);
}

/* --------------------------------------------------------------------------
   2. BOOTSTRAP BRIDGE
   Override the Bootstrap CSS variables that cascade at runtime so utilities
   (.bg-primary, .text-primary, links, body) pick up the brand automatically.
   -------------------------------------------------------------------------- */
:root {
  --bs-body-bg:            var(--ph-page);
  --bs-body-color:         var(--ph-ink);
  --bs-body-font-family:   var(--ph-font-body);
  --bs-body-font-size:     15px;
  --bs-body-font-weight:   400;
  --bs-body-line-height:   1.65;

  --bs-emphasis-color:     var(--ph-navy);
  --bs-heading-color:      var(--ph-navy);
  --bs-border-color:       var(--ph-line);
  --bs-border-radius:      6px;

  --bs-primary-rgb:        10, 28, 59;    /* navy  -> .bg-primary / .text-primary */
  --bs-secondary-rgb:      183, 141, 60;  /* gold  -> .bg-secondary / .text-secondary */
  --bs-success-rgb:        62, 122, 94;
  --bs-danger-rgb:         178, 58, 46;
  --bs-info-rgb:           58, 107, 138;
  --bs-warning-rgb:        201, 138, 30;

  --bs-link-color:         var(--ph-gold-600);
  --bs-link-color-rgb:     154, 117, 48;
  --bs-link-hover-color:   var(--ph-navy);
  --bs-link-hover-color-rgb: 10, 28, 59;

  --bs-emphasis-color-rgb: 10, 28, 59;
}

/* ================= 3. BASE ELEMENTS ================= */
/* guard against stray horizontal overflow (keeps sticky header working) */
body { overflow-x: clip; }

body {
  background-color: var(--ph-page);
  color: var(--ph-ink);
  font-family: var(--ph-font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ph-font-body);
  font-weight: 700;
  color: var(--ph-navy);
  line-height: 1.2;
}

h1, .h1 { font-size: 40px; }
h2, .h2 { font-size: 40px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 20px; }
h5, .h5 { font-size: 18px; }
h6, .h6 { font-size: 16px; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ph-font-body);
  font-weight: 700;
  color: var(--ph-navy);
}
.display-1 { font-size: 80px; }
.display-2 { font-size: 68px; }
.display-3 { font-size: 56px; }
.display-4 { font-size: 44px; }
.display-5 { font-size: 36px; }
.display-6 { font-size: 28px; }

small, .small { font-size: 13px; }

a {
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { text-decoration: none; }

hr {
  border-top: 1px solid var(--ph-line);
  opacity: 1;
}

::selection {
  background: var(--ph-saffron);
  color: var(--ph-navy);
}

:focus-visible {
  outline: 2px solid var(--ph-gold);
  outline-offset: 2px;
}

/* ================= 4. BUTTONS  (Bootstrap compiles these from Sass, so restyle explicitly) ================= */
.btn {
  --bs-btn-font-family: var(--ph-font-body);
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 6px;
  --bs-btn-font-size: 13px;
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 16px;
  --bs-btn-border-width: 1px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color .15s ease, background-color .15s ease,
              background-image .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn.disabled { transform: none; }

.btn-sm {
  --bs-btn-font-size: 11px;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 13px;
}
.btn-lg {
  --bs-btn-font-size: 13px;
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 20px;
}

.btn-primary,
.btn-gold {
  --bs-btn-color: #fff;
  --bs-btn-bg: #fabd26;
  --bs-btn-border-color: #fabd26;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffca4d;
  --bs-btn-hover-border-color: #ffca4d;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #e0a81c;
  --bs-btn-active-border-color: #e0a81c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #fabd26;
  --bs-btn-disabled-border-color: #fabd26;
  background-image: none;
  box-shadow: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--ph-navy);
  --bs-btn-border-color: var(--ph-navy);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ph-navy);
  --bs-btn-hover-border-color: var(--ph-navy);
  --bs-btn-active-bg: var(--ph-navy);
  --bs-btn-active-border-color: var(--ph-navy);
}

/* Gold — the primary "shop / add to cart" call to action */
.btn-gold {
  --bs-btn-focus-shadow-rgb: 250, 189, 38;
}

.btn-outline-gold {
  --bs-btn-color: var(--ph-gold-600);
  --bs-btn-border-color: var(--ph-gold);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: var(--ph-navy);
  --bs-btn-hover-bg: var(--ph-gold);
  --bs-btn-hover-border-color: var(--ph-gold);
  --bs-btn-active-color: var(--ph-navy);
  --bs-btn-active-bg: var(--ph-gold);
  --bs-btn-active-border-color: var(--ph-gold);
  --bs-btn-focus-shadow-rgb: 183, 141, 60;
}


.ph-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;             /* size comes from padding, not a fixed height */
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--ph-navy);
  color: #fff;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  appearance: none;
  transition: background-color .18s ease, background-image .18s ease,
              border-color .18s ease, color .18s ease, transform .12s ease;
}

/* top gloss — a finish, not a drop shadow */
.ph-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}
/* sweeping shine on hover */
.ph-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.ph-btn:hover::after { left: 150%; }

.ph-btn:hover  { transform: translateY(-2px); }
.ph-btn:active { transform: translateY(0); }
.ph-btn:focus-visible {
  outline: 2px solid var(--ph-gold);
  outline-offset: 2px;
}
.ph-btn:disabled,
.ph-btn.is-disabled {
  opacity: .5;
  pointer-events: none;
  transform: none;
}
.ph-btn i { font-size: 15px; line-height: 0; }

/* Sizes */
.ph-btn--sm { padding: 10px 16px; font-size: 11px; letter-spacing: 1px; }
.ph-btn--lg { padding: 18px 34px; font-size: 14px; letter-spacing: 3px; }

/* Full width */
.ph-btn--block { display: flex; width: 100%; }

/* --- Fill variants: flat, solid #fabd26 with white text --- */
.ph-btn--gold,
.ph-btn--navy {
  border-color: #fabd26;
  background-color: #fabd26;
  background-image: none;
  color: #fff;
}
.ph-btn--gold:hover,
.ph-btn--navy:hover {
  background-color: #ffca4d;
  background-image: none;
  border-color: #ffca4d;
  color: #fff;
  transform: none;
}
.ph-btn--gold:active,
.ph-btn--navy:active {
  background-color: #e0a81c;
  background-image: none;
  border-color: #e0a81c;
  color: #fff;
}

/* Fill variants are flat — no gloss, no shine sweep, no hover lift */
.ph-btn--gold::before,
.ph-btn--navy::before,
.ph-btn--gold::after,
.ph-btn--navy::after { display: none; }

/* --- Variant: OUTLINE --- */
.ph-btn--outline {
  border-width: 2px;
  border-color: var(--ph-navy);
  background: transparent;
  color: var(--ph-navy);
}
.ph-btn--outline::before { display: none; }
.ph-btn--outline:hover {
  background-color: var(--ph-navy);
  background-image: linear-gradient(180deg, #1D3A69 0%, #0A1C3B 100%);
  border-color: var(--ph-navy);
  color: #fff;
}
.ph-btn--outline:active {
  background-image: linear-gradient(180deg, #12274A, #0A1C3B);
  border-color: var(--ph-navy-600);
  color: #fff;
}

  /* =================  5. HERITAGE UTILITIES  (small, reusable — use Bootstrap for everything else) ================= */
.font-display   { font-family: var(--ph-font-display) !important; }
.font-body      { font-family: var(--ph-font-body) !important; }

.text-navy      { color: var(--ph-navy) !important; }
.text-gold      { color: var(--ph-gold-600) !important; }
.text-terracotta{ color: var(--ph-terracotta) !important; }
.text-alta      { color: var(--ph-alta) !important; }
.text-earth     { color: var(--ph-earth) !important; }
.text-muted-2   { color: var(--ph-muted) !important; }

.bg-cream       { background-color: var(--ph-cream) !important; }
.bg-ivory       { background-color: var(--ph-ivory) !important; }
.bg-navy        { background-color: var(--ph-navy) !important; color: #fff; }
.bg-gold        { background-color: var(--ph-gold) !important; color: var(--ph-navy); }
.bg-terracotta  { background-color: var(--ph-terracotta) !important; color: #fff; }

.border-line    { border-color: var(--ph-line) !important; }
.border-gold    { border-color: var(--ph-gold) !important; }

.shadow-heritage { box-shadow: var(--ph-shadow) !important; }

/* Eyebrow / section kicker — small uppercase label above headings */
.eyebrow {
  font-family: var(--ph-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-gold-600);
}

/* Centered heading ornament: — * — */
.rule-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ph-gold);
}
.rule-ornament::before,
.rule-ornament::after {
  content: "";
  height: 1px;
  width: clamp(32px, 8vw, 72px);
  background: currentColor;
}
.rule-ornament span { font-size: 14px; line-height: 1; }

/* =================  6. HEADER / NAVBAR ================= */

/* Top bar */
.ph-topbar {
  padding: 8px 0;
  font-family: var(--ph-font-body);
  font-size: 12px;
}
.ph-topbar__link {
  color: var(--ph-saffron);
  font-weight: 600;
  letter-spacing: 1px;
}
.ph-topbar__link:hover,
.ph-topbar__link:focus-visible {
  color: #fff;
}
.ph-topbar__link i { font-size: 12px; }

.ph-topbar__follow {
  color: var(--ph-beige);
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 6px;
}
.ph-topbar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--ph-saffron);
  font-size: 13px;
  transition: background-color .15s ease, color .15s ease;
}
.ph-topbar__social:hover,
.ph-topbar__social:focus-visible {
  background: rgba(242, 193, 78, .14);
  color: #fff;
}

/* Header shell */
.ph-header {
  background-color: var(--ph-cream);
  border-bottom: 1px solid var(--ph-line);
}
.ph-header .navbar {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Logo */
.ph-brand__img {
  display: block;
  height: 54px;
  width: auto;
}

/* Primary nav links */
.ph-nav .nav-link {
  --bs-nav-link-color: var(--ph-navy);
  --bs-nav-link-hover-color: var(--ph-gold-600);
  position: relative;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 14px;
  color: var(--ph-navy);
}
.ph-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--ph-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.ph-nav .nav-link:hover::after,
.ph-nav .nav-link:focus-visible::after,
.ph-nav .nav-link.active::after {
  transform: scaleX(1);
}
.ph-nav .nav-link.active { color: var(--ph-gold-600); }

/* ----- "Shop" dropdown (hover to open on desktop, click on mobile) ----- */
.ph-dropdown { position: relative; }

/* kill Bootstrap's default caret triangle, keep the animated underline */
.ph-nav .dropdown-toggle::after {
  border: 0;
  margin: 0;
}

/* our own arrow */
.ph-caret {
  font-size: 11px;
  transition: transform .2s ease;
}
.ph-nav .nav-link[aria-expanded="true"] .ph-caret {
  transform: rotate(180deg);
}

.ph-dropdown__menu {
  --bs-dropdown-min-width: 244px;
  --bs-dropdown-padding-y: 8px;
  --bs-dropdown-border-color: var(--ph-line);
  --bs-dropdown-border-radius: 8px;
  --bs-dropdown-font-size: 13px;
  --bs-dropdown-link-color: var(--ph-navy);
  --bs-dropdown-link-hover-color: var(--ph-gold-600);
  --bs-dropdown-link-hover-bg: var(--ph-cream);
  --bs-dropdown-link-active-color: var(--ph-gold-600);
  --bs-dropdown-link-active-bg: var(--ph-cream);
  background-color: var(--ph-ivory);
  margin-top: 6px;
}
.ph-dropdown__menu .dropdown-item {
  font-family: var(--ph-font-body);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 9px 18px;
  border-left: 2px solid transparent;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ph-dropdown__menu .dropdown-item:hover,
.ph-dropdown__menu .dropdown-item:focus-visible {
  border-left-color: var(--ph-gold);
}

/* Right-side action cluster */
.ph-actions {
  gap: 4px;
  padding-left: 8px;
  margin-left: 8px;
  /* border-left: 1px solid var(--ph-line); */
}

.ph-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ph-navy);
  font-size: 18px;
  transition: background-color .15s ease, color .15s ease;
}
.ph-iconbtn:hover,
.ph-iconbtn:focus-visible {
  background: var(--ph-ivory);
  color: var(--ph-gold-600);
}

/* Count badge on wishlist / cart */
.ph-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ph-alta);
  color: #fff;
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* Hamburger */
.ph-toggler-icon {
  font-size: 26px;
  color: var(--ph-navy);
}

/* ================= 7. HERO  (Swiper, text left, image edge-to-edge right) ================= */
.ph-hero {
  position: relative;
  background: var(--ph-cream);
}
.ph-hero__swiper {
  position: relative;
  overflow: hidden;
}
.ph-hero__swiper .swiper-slide {
  position: relative;
  height: auto;
}
.ph-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 48px 24px;
}
.ph-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 480px;
}
.ph-hero__title {
  font-family: var(--ph-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.08;
  color: var(--ph-navy);
  font-size: clamp(28px, 20px + 2.6vw, 44px);
}
.ph-hero__lead {
  max-width: 440px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ph-muted);
}
.ph-hero__media {
  margin-top: 28px;
}
.ph-hero__media img,
.ph-hero__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

/* Pagination bullets — bottom-center, in their own chip so it reads clearly as a multi-slide banner at every breakpoint */
.ph-hero__dots.swiper-pagination {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}
.ph-hero__swiper .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: 999px;
  background-color: var(--ph-beige);
  opacity: 1;
  transition: width .2s ease, background-color .2s ease;
}
.ph-hero__swiper .swiper-pagination-bullet-active {
  width: 26px;
  background-color: var(--ph-gold);
}

/* Prev / next controls — hidden below lg (swipe handles it) */
.ph-hero__ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--ph-ivory);
  border: 1px solid var(--ph-gold);
  border-radius: 999px;
  color: var(--ph-navy);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ph-hero__ctrl--prev { left: 20px; }
.ph-hero__ctrl--next { right: 20px; }
.ph-hero__ctrl:hover,
.ph-hero__ctrl:focus-visible { background: var(--ph-gold); color: var(--ph-navy); }
.ph-hero__ctrl.swiper-button-disabled { opacity: .4; cursor: default; }

/* ================= 7B. BANNER CAROUSEL (Swiper) — legacy ================= */

/* 30px gap on every side */
.ph-banner-wrap {
  padding: 36px 60px;
  background: var(--ph-cream);
}

.ph-banner.swiper {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ph-gold);
  border-radius: 16px;
  background:
    radial-gradient(900px 460px at 82% 14%, rgba(242, 193, 78, .18), transparent 62%),
    linear-gradient(180deg, var(--ph-ivory) 0%, var(--ph-cream) 100%);
}
.ph-banner .swiper-slide {
  height: auto;
}

/* Small Alpana / Kolka motifs in the corners */
.ph-banner::before,
.ph-banner::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: url("../images/alpana-corner.svg") no-repeat center / contain;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
.ph-banner::before { top: 10px; left: 10px; }
.ph-banner::after  { right: 10px; bottom: 10px; transform: scaleX(-1); }

/* Compact slide */
.ph-banner__slide {
  display: flex;
  align-items: center;
  min-height: 500px;
  padding: 36px 0;
}

.ph-banner__copy {
  position: relative;
  z-index: 3;
}
.ph-banner__title {
  font-family: var(--ph-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.08;
  color: var(--ph-navy);
  font-size: clamp(28px, 20px + 2.6vw, 44px);
}
.ph-banner__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 16px;
  background: var(--ph-gold);
}
.ph-banner__lead {
  max-width: 440px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ph-muted);
}

.ph-banner__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 378px;
}
.ph-banner__media img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: clamp(300px, 30vw, 420px);
  object-fit: contain;
}

/* Pagination bullets */
.ph-banner__dots.swiper-pagination {
  bottom: 16px;
  z-index: 10;
}
.ph-banner .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 4px !important;
  border-radius: 999px;
  background-color: var(--ph-beige);
  opacity: 1;
  transition: width .2s ease, background-color .2s ease;
}
.ph-banner .swiper-pagination-bullet-active {
  width: 26px;
  background-color: var(--ph-gold);
}

/* Prev / next controls — hidden */
.ph-banner__ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ph-ivory);
  border: 1px solid var(--ph-gold);
  border-radius: 999px;
  color: var(--ph-navy);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  z-index: 10;
}
.ph-banner__ctrl--prev { left: 14px; }
.ph-banner__ctrl--next { right: 14px; }
.ph-banner__ctrl:hover,
.ph-banner__ctrl:focus-visible {
  background: var(--ph-gold);
  color: var(--ph-navy);
}
.ph-banner__ctrl.swiper-button-disabled {
  opacity: .4;
  cursor: default;
}

/* ================= 8. SECTION SHELL  (reusable heading block) ================= */
.ph-section {
  padding: 48px 0;
}
.ph-section__head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.ph-section__head .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
}
.ph-section__title {
  display: inline-block;
  margin: 0;
  font-family: var(--ph-font-display);   /* section heading */
  font-size: clamp(26px, 20px + 2vw, 38px);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ph-navy);
}
.ph-section__intro {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-muted);
}

/* ================= 9. SECTION HEAD  (left title + "view all") ================= */
.ph-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.ph-head .eyebrow { display: block; margin-bottom: 6px; }
.ph-head__title {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(26px, 20px + 2vw, 40px);
  line-height: 1.08;
  color: var(--ph-navy);
}
/* "View all" — outline button style (matches .ph-btn--outline) */
.ph-viewall {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--ph-navy);
  border-radius: 6px;
  background: transparent;
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ph-viewall:hover {
  background: var(--ph-navy);
  border-color: var(--ph-navy);
  color: #fff;
}
.ph-viewall i { font-size: 13px; transition: transform .15s ease; }
.ph-viewall:hover i { transform: translateX(3px); }

/* ================= 10. EXPLORE BY CRAFT  (medallion + context cards) ================= */
.ph-cats {
  background: var(--ph-ivory);
  border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
}

.ph-cat {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--ph-line);
  border-radius: 12px;
  background: var(--ph-page);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.ph-cat:hover {
  border-color: var(--ph-gold);
  background: var(--ph-cream);
  transform: translateY(-3px);
}

.ph-cat__ring {
  flex: none;
  display: block;
  width: 84px;
  height: 84px;
  padding: 3px;                       /* inner gap = subtle double-ring */
  border-radius: 999px;
  border: 1px solid var(--ph-line);
  background: var(--ph-ivory);
  transition: border-color .18s ease;
}
.ph-cat__ring img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}
.ph-cat:hover .ph-cat__ring { border-color: var(--ph-gold); }

.ph-cat__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ph-cat__name {
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
  transition: color .18s ease;
}
.ph-cat:hover .ph-cat__name { color: var(--ph-gold-600); }
.ph-cat__desc {
  font-family: var(--ph-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ph-muted);
}
.ph-cat__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
  transition: color .15s ease;
}
.ph-cat__meta i { font-size: 13px; transition: transform .15s ease; }
.ph-cat:hover .ph-cat__meta { color: var(--ph-gold-600); }
.ph-cat:hover .ph-cat__meta i { transform: translateX(3px); }

/* ================= 11. PRODUCT TILE  (shared: edit grid + best sellers) ================= */
.ph-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: 4px;
  background: var(--ph-ivory);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.ph-tile:hover { border-color: var(--ph-gold); transform: translateY(-3px); }
.ph-tile__img {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ph-cream);
}
.ph-tile__link {
  display: block;
  width: 100%;
  height: 100%;
}
.ph-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ph-tile:hover .ph-tile__img img { transform: scale(1.04); }

.ph-tile__cap {
  padding: 11px 13px;
  border-top: 1px solid var(--ph-line);
}
.ph-tile__info{
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.ph-tile__name {
  margin: 0;
  font-family: var(--ph-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ph-navy);
}
.ph-tile__name a { color: inherit; transition: color .15s ease; }
.ph-tile__name a:hover { color: var(--ph-gold-600); }
.ph-tile__price {
  margin: 0;
  font-family: var(--ph-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ph-saffron);
  text-align: right;
}
.ph-tile__sub {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 12px;
  color: var(--ph-earth);
}
.ph-tile__new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 3px 8px;
  background: var(--ph-navy);
  color: #fff;
  font-family: var(--ph-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ================= 12. "THIS WEEK'S EDIT"  (bento: big first card + 5, caption over image) ================= */
.ph-edit { padding: 36px 0; }
.ph-edit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 178px;
  gap: 10px;
}
/* card 1 = 2 cols x 2 rows; cards 2-3 fill col 3; cards 4-6 fill the bottom row */
.ph-edit__grid > .ph-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }

/* Tiles: caption sits over the image */
.ph-edit__grid .ph-tile__img {
  position: absolute;
  inset: 0;
}
.ph-edit__grid .ph-tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-top: 0;
  background: linear-gradient(180deg,
    rgba(10, 28, 59, 0) 0%,
    rgba(10, 28, 59, .55) 45%,
    rgba(10, 28, 59, .85) 100%);
}
.ph-edit__grid .ph-tile__text { min-width: 0; }
.ph-edit__grid .ph-tile__name,
.ph-edit__grid .ph-tile__name a { color: #fff; }
.ph-edit__grid .ph-tile__name a:hover { color: var(--ph-saffron); }
.ph-edit__grid .ph-tile__sub { margin: 2px 0 0; color: rgba(255, 255, 255, .8); }
.ph-edit__grid .ph-tile__price { display: none; }   /* no price in the edit — a CTA takes its place */

/* Highlighted CTA tag over the image — right side */
.ph-edit__grid .ph-tile__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fabd26;
  color: var(--ph-navy);
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.ph-edit__grid .ph-tile__cta i { font-size: 12px; transition: transform .15s ease; }
.ph-edit__grid .ph-tile:hover .ph-tile__cta { background: #ffca4d; }
.ph-edit__grid .ph-tile:hover .ph-tile__cta i { transform: translateX(3px); }

/* ================= 12B. ABOUT / OUR STORY  (Bootstrap grid; these style the pieces) ================= */

/* Hero band — heading + lead copy, centered */
.ph-story-hero {
  padding: 44px 0;
  background: var(--ph-cream);
  border-bottom: 1px solid var(--ph-line);
  text-align: center;
}
.ph-story-hero .eyebrow { display: inline-block; margin-bottom: 12px; }
.ph-story-hero__title {
  max-width: 960px;
  margin: 0 auto 18px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(30px, 22px + 3vw, 48px);
  line-height: 1.1;
  color: var(--ph-navy);
}
.ph-story-hero__lead {
  max-width: 960px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-muted);
}

/* Eyebrow with a leading icon */
.eyebrow--icon i { font-size: 13px; margin-right: 5px; }

/* Alternating split rows */
.ph-story__row { margin-top: 44px; }
.ph-story__by {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 18px !important;
}
.ph-story__by strong { font-size: 15px; font-weight: 700; color: var(--ph-navy); }
.ph-story__by span { font-size: 13px; color: var(--ph-earth); }


.ph-about__media {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: var(--ph-cream);
}
.ph-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph-about__body .eyebrow { display: inline-block; margin-bottom: 10px; }
.ph-about__title {
  margin: 0 0 16px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(26px, 20px + 2vw, 36px);
  line-height: 1.12;
  color: var(--ph-navy);
}
.ph-about__body p {
  /* max-width: 460px; */
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-muted);
}
.ph-about__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.ph-about__stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-about__stats strong {
  font-family: var(--ph-font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--ph-navy);
}
.ph-about__stats span {
  font-family: var(--ph-font-body);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}

/* Story page — extra blocks */
.ph-story__section { margin-top: 52px; }
.ph-story__h2 {
  margin: 0 0 24px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(24px, 18px + 2vw, 34px);
  line-height: 1.15;
  color: var(--ph-navy);
  text-align: center;
}

.ph-story__belief {
  max-width: 620px;
  margin: 48px auto;
  text-align: center;
}
.ph-story__belief .rule-ornament {
  margin-bottom: 16px;
  color: var(--ph-gold);
}
.ph-story__belief p {
  margin: 0;
  font-family: var(--ph-font-display);
  font-size: clamp(20px, 16px + 1.2vw, 26px);
  line-height: 1.5;
  color: var(--ph-navy);
}

.ph-story__stats {
  justify-content: center;
  gap: 24px 44px;
  margin: 40px 0;
  padding: 28px 0;
  border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
  text-align: center;
}
.ph-story__stats li { align-items: center; }

/* Pull quote */
.ph-story__quote {
  max-width: 680px;
  margin: 0px auto 0;
  padding: 40px;
  text-align: center;
}
.ph-story__quote p {
  margin: 0 0 12px;
  font-family: var(--ph-font-display);
  font-style: italic;
  font-size: clamp(20px, 16px + 1.4vw, 28px);
  line-height: 1.4;
  color: var(--ph-navy);
}
.ph-story__quote cite {
  font-family: var(--ph-font-body);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}

/* "How we work" — three steps strung on a gold thread */
.ph-how {
  padding: 64px 0;
  background: var(--ph-cream);
  border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
  text-align: center;
}

/* Story pages (about.html + craft pages) — reverse the .ph-section / .ph-how
   background rhythm: sections turn cream, the .ph-how bands turn page-white. */
.ph-story .ph-section { background: var(--ph-cream); }
.ph-story .ph-how { background: var(--ph-page); }
.ph-story .ph-how.other-bg { background: var(--ph-cream); }
/* ...except the product grid — cream is too close to the .ph-tile card color */
.ph-story .ph-section.ph-section--products { background: var(--ph-page); }
.ph-how__orn {
  margin-bottom: 12px;
  color: var(--ph-gold);
}
.ph-how__title {
  margin: 0 0 44px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(26px, 20px + 2vw, 38px);
  color: var(--ph-navy);
}
.ph-how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the dashed gold thread the numerals sit on */
.ph-how__steps::before {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  top: 22px;
  border-top: 2px dashed var(--ph-gold);
  opacity: .55;
}
.ph-how__step { position: relative; }
.ph-how__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border: 2px solid var(--ph-gold);
  border-radius: 999px;
  background: var(--ph-cream);
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ph-gold-600);
}
.ph-how__h {
  margin: 0 0 8px;
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-how__step p {
  max-width: 280px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ph-muted);
}

/* ================= 13. HERITAGE CAPSULE  promo banner ================= */
.ph-capsule__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 12px;
  background: #EFE3D0;
}
.ph-capsule__text {
  align-self: center;
  padding: 44px 40px;
}
.ph-capsule__title {
  margin: 0px 0 12px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(24px, 18px + 2vw, 36px);
  line-height: 1.12;
  color: var(--ph-navy);
}
.ph-capsule__text p {
  max-width: 380px;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ph-muted);
}
.ph-capsule__media { height: 320px; }
.ph-capsule__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= 14. BEST SELLERS ================= */
.ph-best .ph-tile__img { flex: none; height: 240px; }

/* ================= 15. INSTAGRAM  (feed-style carousel) ================= */
.ph-insta {
  padding-top: 60px;
  padding-bottom: 0;
  background: var(--ph-ivory);
  border-top: 1px solid var(--ph-line);
}
/* Instagram profile-header style bar */
.ph-insta__bar {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 680px;
  margin: 0 auto 40px;
}
.ph-insta__avatar {
  flex: none;
  width: 78px;
  height: 78px;
  padding: 3px;
  border-radius: 999px;
  border: 2px solid var(--ph-gold);
  background: var(--ph-ivory);
}
.ph-insta__avatar img {
  width: 100%;
  height: 100%;
  padding: 8px;
  border-radius: 999px;
  object-fit: contain;
  display: block;
}
.ph-insta__meta {
  flex: 1 1 auto;
  min-width: 0;
}
.ph-insta__name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-family: var(--ph-font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--ph-navy);
}
.ph-insta__name a { color: inherit; }
.ph-insta__name a:hover { color: var(--ph-gold-600); }
.ph-insta__name i { color: var(--ph-gold-600); font-size: 15px; }
.ph-insta__stats {
  margin: 0 0 5px;
  font-size: 13px;
  color: var(--ph-earth);
}
.ph-insta__stats strong { color: var(--ph-navy); font-weight: 700; }
.ph-insta__bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ph-muted);
}
.ph-insta__follow {
  flex: none;
  border-radius: 999px;
}
.ph-insta__follow i { font-size: 15px; }

/* full-bleed feed carousel */
.ph-insta__carousel {
  width: 100%;
  overflow: hidden;
}
.ph-insta__post {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ph-cream);
}
.ph-insta__post img,
.ph-insta__post video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}
.ph-insta__post:hover img,
.ph-insta__post:hover video,
.ph-insta__post video.is-visible { transform: scale(1.06); }
.ph-insta__ov {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 28, 59, .48);
  color: #fff;
  font-size: 26px;
  opacity: 0;
  transition: opacity .2s ease;
}
.ph-insta__post:hover .ph-insta__ov,
.ph-insta__post:focus-visible .ph-insta__ov { opacity: 1; }

/* ================= 16. JOURNAL / BLOG  (3-up post cards) ================= */
.ph-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: 6px;
  background: var(--ph-ivory);
  transition: border-color .18s ease, transform .18s ease;
}
.ph-post:hover { border-color: var(--ph-gold); transform: translateY(-3px); }

.ph-post__img {
  display: block;
  height: 220px;
  overflow: hidden;
  background: var(--ph-cream);
}
.ph-post__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ph-post:hover .ph-post__img img { transform: scale(1.04); }

.ph-post__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
}
.ph-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ph-post__tag {
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-gold-600);
}
.ph-post__date {
  font-family: var(--ph-font-body);
  font-size: 13px;
  color: var(--ph-earth);
}
.ph-post__title {
  margin: 0 0 8px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ph-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
.ph-post__title a { color: inherit; transition: color .15s ease; }
.ph-post__title a:hover { color: var(--ph-gold-600); }
.ph-post__excerpt {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ph-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
.ph-post__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
  transition: color .15s ease;
}
.ph-post__more i { font-size: 13px; transition: transform .15s ease; }
.ph-post__more:hover { color: var(--ph-gold-600); }
.ph-post__more:hover i { transform: translateX(3px); }

/* --- Blog listing page (blog.html) --- */
.ph-blog__head {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}
.ph-blog__head .eyebrow { display: inline-block; margin-bottom: 10px; }
.ph-blog__title {
  margin: 0 0 14px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(28px, 22px + 2vw, 44px);
  line-height: 1.1;
  color: var(--ph-navy);
}
.ph-blog__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-muted);
}
/* read-time in the card meta line */
.ph-post__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  color: var(--ph-earth);
}
.ph-post__read::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--ph-beige);
}
.ph-post__read i { font-size: 12px; }
/* card footer: read-more left, posted date right */
.ph-post__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ph-line);
}
.ph-post__foot .ph-post__more { margin-top: 0; }
.ph-post__foot .ph-post__date { font-size: 12px; }

/* --- Blog article page (blog-details.html) --- */
.ph-article__head {
  max-width: 720px;
  margin: 0 auto;
}
.ph-article__tag {
  display: block;
  margin-bottom: 14px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-gold-600);
}
.ph-article__title {
  margin: 0 0 18px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(30px, 22px + 3vw, 48px);
  line-height: 1.12;
  color: var(--ph-navy);
}
.ph-article__standfirst {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ph-muted);
}
.ph-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: 18px;
  border-top: 1px solid var(--ph-line);
  font-family: var(--ph-font-body);
  font-size: 13px;
  color: var(--ph-earth);
}
.ph-article__meta i { font-size: 12px; margin-right: 5px; color: var(--ph-gold-600); }
.ph-article__meta > span + span::before {
  content: "·";
  margin-right: 10px;
  color: var(--ph-beige);
}
.ph-article__by strong { color: var(--ph-navy); font-weight: 700; }

/* Hero + inline figures */
.ph-article__hero {
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-cream);
}
.ph-article__hero img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.ph-article__hero figcaption,
.ph-article__fig figcaption {
  margin-top: 10px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ph-earth);
}
.ph-article__fig {
  margin: 34px 0;
}
.ph-article__fig img {
  width: 100%;
  border-radius: var(--ph-radius-lg);
  display: block;
}

/* Prose column */
.ph-article__body {
  max-width: 720px;
  margin: 0 auto;
}
.ph-article__body > p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ph-ink);
}
.ph-article__body > p:first-of-type::first-letter {
  float: left;
  margin: 6px 10px 0 0;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: .8;
  color: var(--ph-gold-600);
}
.ph-article__body strong { color: var(--ph-navy); font-weight: 700; }
.ph-article__body h2 {
  margin: 40px 0 14px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(24px, 19px + 1.4vw, 32px);
  line-height: 1.2;
  color: var(--ph-navy);
}
.ph-article__body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.ph-article__body li {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ph-ink);
}
.ph-article__quote {
  margin: 34px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--ph-gold);
  font-family: var(--ph-font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.45;
  color: var(--ph-navy);
}

/* Article footer: tags + share */
.ph-article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--ph-line);
}
.ph-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ph-article__tags a {
  padding: 5px 12px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-navy);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ph-article__tags a:hover { border-color: var(--ph-gold); color: var(--ph-gold-600); }
.ph-article__share {
  display: flex;
  gap: 8px;
}
.ph-article__share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  color: var(--ph-navy);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ph-article__share a:hover {
  background: var(--ph-navy);
  border-color: var(--ph-navy);
  color: #fff;
}

/* Author card */
.ph-article__author {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ivory);
}
.ph-article__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--ph-navy);
  color: #fff;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 18px;
}
.ph-article__author-name {
  margin: 0 0 4px;
  font-family: var(--ph-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ph-navy);
}
.ph-article__author-bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ph-muted);
}

/* --- Contact page (contact.html) --- */
.ph-contact__head {
  margin: 0 0 22px;
  text-align: left;
}
.ph-contact__head .eyebrow { display: block; margin-bottom: 10px; }

.ph-contact__form {
  padding: 28px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ivory);
}
.ph-contact__title {
  margin: 0 0 14px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(28px, 22px + 2vw, 44px);
  line-height: 1.1;
  color: var(--ph-navy);
}
.ph-contact__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-muted);
}
.ph-contact__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ph-beige); }

.ph-contact__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 6px;
}
.ph-contact__ok {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--ph-gold);
  border-radius: var(--ph-radius);
  background: var(--ph-cream);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ph-navy);
}
.ph-contact__ok i { color: var(--ph-success); font-size: 18px; position: relative; top: 1px; }
.ph-contact__ok[hidden] { display: none; }

/* Details card — matches the form panel */
.ph-contact__aside {
  padding: 30px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ivory);
}
.ph-contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-contact__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ph-line);
}
.ph-contact__list li:first-child { padding-top: 0; }
.ph-contact__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.ph-contact__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ph-cream);
  color: var(--ph-gold-600);
  font-size: 16px;
}
.ph-contact__k {
  display: block;
  margin-bottom: 3px;
  font-family: var(--ph-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-contact__v {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ph-navy);
}
.ph-contact__v a { color: inherit; text-decoration: none; transition: color .15s ease; }
.ph-contact__v a:hover { color: var(--ph-gold-600); }

.ph-contact__social {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ph-line);
}
.ph-contact__social .ph-contact__k { margin-bottom: 12px; }
.ph-contact__social-links { display: flex; gap: 8px; }
.ph-contact__social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ph-navy);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ph-contact__social-links a:hover {
  background: var(--ph-navy);
  border-color: var(--ph-navy);
  color: #fff;
}

/* ================= 17. CONTACT CTA  (split: craft photo + navy panel) ================= */
.ph-cta { padding: 44px 0; }

.ph-cta__card {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(160deg, #16305A 0%, #0A1C3B 66%);
}
/* soft gold glow, top-right — modern depth cue, not a shadow */
.ph-cta__card::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 193, 78, .16), transparent 70%);
  pointer-events: none;
}
.ph-cta__media {
  overflow: hidden;
  border-right: 1px solid rgba(183, 141, 60, .5);
  background: #EFE3D0;
}
.ph-cta__media img {
  width: 100%;
  height: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .5s ease;
}
.ph-cta__card:hover .ph-cta__media img { transform: scale(1.04); }

.ph-cta__body {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 48px 52px;
}
.ph-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-saffron);
}
.ph-cta__eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}
.ph-cta__title {
  margin: 0 0 14px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(26px, 19px + 1.9vw, 38px);
  line-height: 1.12;
  color: #fff;
}
.ph-cta__lead {
  max-width: 500px;
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ph-beige);
}
.ph-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ph-cta__actions .ph-btn i.bi-arrow-right { transition: transform .18s ease; }
.ph-cta__actions .ph-btn:hover i.bi-arrow-right { transform: translateX(4px); }

.ph-cta__ghost {
  border-color: rgba(255, 255, 255, .4);
  background: transparent;
  color: #fff;
}
.ph-cta__ghost::before { display: none; }
.ph-cta__ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ph-navy);
  transform: none;
}

/* ================= 18. FAQ  (two-column: intro + Bootstrap accordion, restyled to the brand) ================= */
.ph-faq__intro .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
}
.ph-faq__title {
  margin: 0 0 12px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(26px, 20px + 2vw, 38px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ph-navy);
}
.ph-faq__note {
  max-width: 280px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ph-muted);
}

.ph-faq .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--ph-line);
  background: transparent;
}
.ph-faq .accordion-item:first-of-type {
  border-top: 1px solid var(--ph-line);
}
.ph-faq .accordion-button {
  padding: 20px 40px 20px 0;
  background: transparent;
  font-family: var(--ph-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ph-navy);
  box-shadow: none;
}
.ph-faq .accordion-button:not(.collapsed) {
  color: var(--ph-gold-600);
  background: transparent;
  box-shadow: none;
}
.ph-faq .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}
/* themed +/- toggle in place of Bootstrap's chevron */
.ph-faq .accordion-button::after {
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background-size: 16px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239A7530' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
}
.ph-faq .accordion-button:not(.collapsed)::after {
  transform: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239A7530' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3 8h10'/%3e%3c/svg%3e");
}
.ph-faq .accordion-body {
  padding: 0 40px 22px 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ph-muted);
}

/* ================= 19. FOOTER ================= */
.ph-footer {
  background: var(--ph-navy);
  color: var(--ph-beige);
  font-family: var(--ph-font-body);
}
.ph-footer__top { padding: 56px 0 40px; }

.ph-footer__brand img {
  height: 56px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  border-radius: 2px;
}
.ph-footer__blurb {
  max-width: 340px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ph-beige);
}
.ph-footer__social {
  display: flex;
  gap: 8px;
}
.ph-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: var(--ph-saffron);
  font-size: 15px;
  transition: background-color .15s ease, color .15s ease;
}
.ph-footer__social a:hover,
.ph-footer__social a:focus-visible {
  background: var(--ph-saffron);
  color: var(--ph-navy);
}

.ph-footer__title {
  margin: 0 0 14px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}
.ph-footer__links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-footer__links a {
  font-size: 13px;
  color: var(--ph-beige);
  transition: color .15s ease;
}
.ph-footer__links a:hover,
.ph-footer__links a:focus-visible { color: #fff; }

.ph-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ph-beige);
}
.ph-footer__contact i {
  flex: none;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ph-saffron);
}

.ph-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ph-footer__copy {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}
.ph-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-footer__legal a {
  font-size: 12px;
  color: var(--ph-beige);
}
.ph-footer__legal a:hover,
.ph-footer__legal a:focus-visible { color: #fff; }
.ph-footer__pay {
  display: flex;
  gap: 12px;
  font-size: 20px;
  color: rgba(255, 255, 255, .5);
}
.ph-footer__credit {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}
.ph-footer__credit a {
  color: rgba(255, 255, 255, .8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ph-footer__credit a:hover,
.ph-footer__credit a:focus-visible { color: #fff; }

/* --------------------------------------------------------------------------
   20. SHOP / PRODUCT LISTING
   -------------------------------------------------------------------------- */
.ph-shop { padding: 26px 0 64px; }

/* Breadcrumb */
.ph-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-crumbs a { color: var(--ph-earth); transition: color .15s ease; }
.ph-crumbs a:hover { color: var(--ph-gold-600); }
.ph-crumbs i { font-size: 10px; color: var(--ph-beige); }
.ph-crumbs span[aria-current] { color: var(--ph-navy); font-weight: 700; }

/* Toolbar */
.ph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 10px 0 20px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ph-line);
}
.ph-toolbar .ph-crumbs { margin-right: 4px; }
.ph-toolbar__filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ph-navy);
  border-radius: 6px;
  background: transparent;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
  transition: background-color .15s ease, color .15s ease;
}
.ph-toolbar__filterbtn:hover { background: var(--ph-navy); color: #fff; }
.ph-toolbar__count {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
  color: var(--ph-muted);
}
.ph-toolbar__count strong { color: var(--ph-navy); font-weight: 700; }
.ph-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-sort .form-select {
  width: auto;
  min-width: 172px;
  border-color: var(--ph-line);
  border-radius: 6px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ph-navy);
}
.ph-sort .form-select:focus { border-color: var(--ph-gold); box-shadow: none; }

/* Filters panel */
.ph-filters { --bs-offcanvas-width: 300px; }
.ph-filters .offcanvas-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ph-line);
}
/* Desktop sidebar heading (offcanvas header is hidden at lg+) */
.ph-filters__deskhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ph-line);
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-filters__reset {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-gold-600);
  cursor: pointer;
}
.ph-filters__reset:hover { color: var(--ph-navy); }
.ph-filters__heading {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-navy);
}

/* Filter group — native <details> */
.ph-filter {
  padding: 14px 0;
  border-bottom: 1px solid var(--ph-line);
}
.ph-filter:last-of-type { border-bottom: 0; }
.ph-filter__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-filter__title::-webkit-details-marker { display: none; }
.ph-filter__title i {
  font-size: 12px;
  color: var(--ph-earth);
  transition: transform .2s ease;
}
.ph-filter[open] .ph-filter__title i { transform: rotate(180deg); }
.ph-filter__body {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

/* Checkbox / radio row */
.ph-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 4px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  color: var(--ph-ink);
  cursor: pointer;
  transition: background-color .12s ease;
}
.ph-check:hover { background: var(--ph-cream); }
.ph-check input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--ph-gold);
  cursor: pointer;
}
.ph-check > span:first-of-type { flex: 1 1 auto; }
.ph-check__n {
  font-size: 12px;
  color: var(--ph-earth);
}
.ph-check__up { font-size: 12px; color: var(--ph-earth); }
.ph-stars { color: var(--ph-saffron); font-size: 12px; letter-spacing: 1px; }

/* Manual price range */
.ph-price__range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 4px;
}
.ph-price__range .form-control {
  width: 100%;
  min-width: 0;
  height: 38px;
  border-color: var(--ph-line);
  border-radius: 6px;
  font-size: 13px;
}
.ph-price__range .form-control:focus { border-color: var(--ph-gold); box-shadow: none; }
.ph-price__range > span { color: var(--ph-earth); }
.ph-price__range .ph-btn { flex: none; }

/* Offcanvas footer actions (mobile) */
.ph-filters__foot {
  display: none;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ph-line);
}
.ph-filters__foot .ph-btn { flex: 1 1 auto; }

/* Active filter chips */
.ph-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.ph-chips[hidden] { display: none; }
.ph-chips__label {
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  background: var(--ph-ivory);
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-navy);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ph-chip i { font-size: 13px; color: var(--ph-earth); }
.ph-chip:hover { border-color: var(--ph-gold); }
.ph-chip:hover i { color: var(--ph-alta); }
.ph-chip--clear {
  border-color: transparent;
  background: transparent;
  color: var(--ph-gold-600);
  text-decoration: underline;
}
.ph-chip--clear:hover { color: var(--ph-navy); border-color: transparent; }

/* Product grid — taller images than the home tiles */
.ph-shop__grid .ph-tile__img { flex: none; height: 260px; }
.ph-tile__price s {
  margin-left: 4px;
  font-weight: 400;
  color: var(--ph-earth);
}

/* Pagination (Bootstrap .pagination, restyled) */
.ph-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.ph-pagination .pagination {
  --bs-pagination-color: var(--ph-navy);
  --bs-pagination-bg: var(--ph-ivory);
  --bs-pagination-border-color: var(--ph-line);
  --bs-pagination-border-radius: 6px;
  --bs-pagination-hover-color: var(--ph-navy);
  --bs-pagination-hover-bg: var(--ph-cream);
  --bs-pagination-hover-border-color: var(--ph-gold);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--ph-navy);
  --bs-pagination-active-border-color: var(--ph-navy);
  --bs-pagination-disabled-color: var(--ph-beige);
  --bs-pagination-disabled-bg: var(--ph-ivory);
  --bs-pagination-disabled-border-color: var(--ph-line);
  gap: 6px;
}
.ph-pagination .page-link {
  min-width: 40px;
  padding: 9px 12px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ph-pagination .page-item:not(:first-child) .page-link { margin-left: 0; }
.ph-pagination .page-link:focus { box-shadow: none; }

/* ================= 22. CRAFT PAGE  (e.g. terracotta.html) ================= */
.ph-crumbs-bar {
  padding: 12px 0;
  background: var(--ph-cream);
  /* border-bottom: 1px solid var(--ph-line); */
}
.ph-craftpage__grid .ph-tile__img { flex: none; height: 230px; }

/* History — continuation block below the split */
.ph-history__more {
  /* max-width: 780px; */
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--ph-line);
}
.ph-history__more h3 {
  margin: 0 0 12px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(22px, 18px + 1vw, 28px);
  line-height: 1.15;
  color: var(--ph-navy);
}
.ph-history__more p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ph-muted);
}
.ph-history__more p:last-child { margin-bottom: 0; }
.ph-history__more strong { color: var(--ph-navy); font-weight: 700; }

/* Place-of-origin block (inside a .ph-how band) */
.ph-origin {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ph-muted);
}
.ph-origin strong { color: var(--ph-navy); font-weight: 700; }
.ph-origin__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-origin__facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-origin__facts i { font-size: 14px; color: var(--ph-gold-600); }

/* "Living with…" care note (inside a .ph-how band) */
.ph-craftpage__note {
  max-width: 620px;
  margin: 44px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--ph-line);
}
.ph-craftpage__note h3 {
  margin: 0 0 10px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ph-navy);
}
.ph-craftpage__note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ph-muted);
}

/* ================= 23. PRODUCT DETAILS  (product-details.html) ================= */
.ph-pdp .row { align-items: flex-start; }

/* --- Gallery --- */
.ph-gallery__main {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-cream);
  aspect-ratio: 4 / 3;
}
.ph-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ph-gallery__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  background: var(--ph-navy);
  color: #fff;
  font-family: var(--ph-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ph-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ph-gallery__thumb {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  background: var(--ph-cream);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color .15s ease;
}
.ph-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-gallery__thumb:hover { border-color: var(--ph-gold); }
.ph-gallery__thumb.is-active { border-color: var(--ph-navy); }

/* --- Info column --- */
.ph-pdp__info .eyebrow { display: block; margin-bottom: 10px; }
.ph-pdp__title {
  margin: 0 0 14px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(28px, 22px + 2vw, 42px);
  line-height: 1.08;
  color: var(--ph-navy);
}
.ph-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: 16px;
}
.ph-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  color: var(--ph-earth);
}
.ph-stars i { color: var(--ph-saffron); font-size: 13px; }
.ph-stars b { margin-left: 5px; color: var(--ph-navy); }
.ph-pdp__sku {
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-pdp__price {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ph-line);
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 30px;
  color: var(--ph-navy);
}
.ph-pdp__price span {
  display: block;
  margin-top: 4px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--ph-earth);
}
.ph-pdp__lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-muted);
}
.ph-pdp__lead strong { color: var(--ph-navy); font-weight: 700; }

/* Buy row: quantity + actions on one line */
.ph-pdp__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.ph-pdp__buy .ph-field { flex: 0 0 auto; }
.ph-pdp__buy .ph-qty { height: 40px; }
.ph-pdp__buy .ph-qty__btn { width: 36px; font-size: 16px; }
.ph-pdp__buy .ph-qty__input { width: 44px; }
.ph-pdp__buy .ph-btn {
  flex: 0 0 auto;
  padding: 11px 16px;
  font-size: 12px;
}
.ph-field { display: block; }
.ph-field__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  overflow: hidden;
}
.ph-qty__btn {
  width: 42px;
  border: 0;
  background: var(--ph-cream);
  font-size: 18px;
  font-weight: 700;
  color: var(--ph-navy);
  cursor: pointer;
  transition: background-color .15s ease;
}
.ph-qty__btn:hover { background: var(--ph-line); }
.ph-qty__input {
  width: 58px;
  border: 0;
  border-left: 1px solid var(--ph-line);
  border-right: 1px solid var(--ph-line);
  text-align: center;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-navy);
  -moz-appearance: textfield;
  appearance: textfield;
}
.ph-qty__input::-webkit-outer-spin-button,
.ph-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ph-qty__input:focus { outline: none; }

.ph-pdp__hint {
  display: flex;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ph-earth);
}
.ph-pdp__hint i { color: var(--ph-gold-600); position: relative; top: 2px; }

/* --- Under-hero: assurance cards + full specification (full-width) --- */
.ph-pdp__under { padding-top: 6px; }
.ph-assure {
  height: 100%;
  padding: 22px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ivory);
}
.ph-assure i { font-size: 22px; color: var(--ph-gold-600); }
.ph-assure h3 {
  margin: 12px 0 7px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-assure p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ph-muted);
}

.ph-pdp__specs-h {
  margin: 40px 0 20px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(22px, 18px + 1vw, 36px);
  color: var(--ph-navy);
}
/* Spec sheet — bordered card, two grouped panels, zebra rows */
.ph-specsheet {
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ivory);
}
.ph-specsheet__col + .ph-specsheet__col { border-top: 1px solid var(--ph-line); }
.ph-specsheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  background: var(--ph-cream);
  border-bottom: 1px solid var(--ph-line);
}
.ph-specsheet__head i { font-size: 15px; color: var(--ph-gold-600); }
.ph-specsheet__head h3 {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-spec {
  margin: 0;
  padding: 0;
}
.ph-spec__row {
  display: grid;
  grid-template-columns: minmax(108px, 32%) 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 22px;
}
.ph-spec__row:nth-child(even) { background: var(--ph-cream); }
.ph-spec dt {
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ph-earth);
  line-height: 1.4;
}
.ph-spec dd {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ph-navy);
}

/* --- Detail accordion (reuses .ph-faq theming) --- */
.ph-pdp__detail { padding-top: 8px; }
.ph-pdp__detail .accordion-item:first-of-type { border-top: 1px solid var(--ph-line); }
.ph-pdp__detail .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--ph-line);
  border-radius: 0;
  background: transparent;
}
.ph-pdp__detail .accordion-item:first-of-type,
.ph-pdp__detail .accordion-item:last-of-type,
.ph-pdp__detail .accordion-button,
.ph-pdp__detail .accordion-button.collapsed {
  border-radius: 0;
}
.ph-pdp__detail .accordion-body p { margin: 0 0 12px; }
.ph-pdp__detail .accordion-body p:last-child { margin-bottom: 0; }

/* --- Order enquiry + success modals --- */
.ph-modal .modal-content {
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-page);
}
.ph-modal .modal-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--ph-line);
}
.ph-modal .modal-header .eyebrow { display: block; margin-bottom: 5px; }
.ph-modal__title {
  margin: 0;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ph-navy);
}
.ph-modal .modal-header .btn-close {
  flex: none;
  margin: 0;
  padding: 0;
  width: 12px;
  height: 12px;
  background-size: 12px;
  opacity: .55;
  transition: opacity .15s ease;
}
.ph-modal .modal-header .btn-close:hover { opacity: 1; }
.ph-modal .modal-header .btn-close:focus { box-shadow: none; }
.ph-modal .modal-body { padding: 20px 24px; }
.ph-modal__foot {
  justify-content: space-between;
  gap: 12px 18px;
  padding: 16px 24px;
  border-top: 1px solid var(--ph-line);
}
.ph-modal__foot .ph-btn { flex: 0 0 auto; }

/* Form fields */
.ph-quote .form-label {
  margin-bottom: 6px;
  font-family: var(--ph-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-quote .form-control,
.ph-quote .form-select {
  border-color: var(--ph-line);
  border-radius: var(--ph-radius);
  background-color: var(--ph-ivory);
  font-size: 14px;
  color: var(--ph-navy);
}
.ph-quote .form-control:focus,
.ph-quote .form-select:focus {
  border-color: var(--ph-gold);
  box-shadow: none;
  background-color: #fff;
}
.ph-quote__readonly { background-color: var(--ph-cream) !important; font-weight: 600; }
.ph-quote__consent { padding-left: 1.8em; }
.ph-quote__consent .form-check-input {
  border-color: var(--ph-beige);
  margin-left: -1.8em;
}
.ph-quote__consent .form-check-input:checked {
  background-color: var(--ph-gold-600);
  border-color: var(--ph-gold-600);
}
.ph-quote__consent .form-check-input:focus { box-shadow: none; border-color: var(--ph-gold); }
.ph-quote__consent .form-check-label { font-size: 13px; color: var(--ph-muted); }
.ph-quote__note { font-size: 12px; color: var(--ph-earth); }

/* Product summary line at the top of the modal */
.ph-quote__card {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ph-line);
}
.ph-quote__card img {
  width: 68px;
  height: 68px;
  flex: none;
  object-fit: cover;
  border-radius: var(--ph-radius);
}
.ph-quote__card-name {
  margin: 0 0 3px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ph-navy);
}
.ph-quote__card-sku {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}
.ph-quote__card-qty { margin: 0; font-size: 13px; color: var(--ph-muted); }
.ph-quote__card-qty strong { color: var(--ph-navy); }

/* Success modal */
.ph-modal__ok { padding: 42px 32px 34px; text-align: center; }
.ph-modal__ok-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--ph-success);
  color: #fff;
  font-size: 30px;
}
.ph-modal__ok h2 {
  margin: 0 0 10px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--ph-navy);
}
.ph-modal__ok p {
  max-width: 380px;
  margin: 0 auto 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ph-muted);
}
.ph-modal__ok strong { color: var(--ph-navy); }

/* --- Related products carousel --- */
.ph-related__swiper { position: relative; padding: 4px; margin: 0 -4px; }
.ph-related__swiper .swiper-slide { height: auto; }
.ph-related__swiper .ph-tile__img { flex: none; height: 220px; }
.ph-related__dots {
  position: static;
  margin-top: 24px;
  text-align: center;
}
.ph-related__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--ph-beige);
  opacity: 1;
}
.ph-related__dots .swiper-pagination-bullet-active { background: var(--ph-navy); }
.ph-related__ctrl {
  position: absolute;
  top: 110px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  background: var(--ph-page);
  color: var(--ph-navy);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ph-related__ctrl:hover { background: var(--ph-navy); border-color: var(--ph-navy); color: #fff; }
.ph-related__ctrl--prev { left: -6px; }
.ph-related__ctrl--next { right: -6px; }
.ph-related__ctrl.swiper-button-disabled { opacity: .35; cursor: default; }
.ph-related__ctrl.swiper-button-disabled:hover {
  background: var(--ph-page);
  border-color: var(--ph-line);
  color: var(--ph-navy);
}

/* --- Journal carousel (homepage "From the journal") --- */
.ph-journal__swiper { position: relative; padding: 4px; margin: 0 -4px; }
.ph-journal__swiper .swiper-slide { height: auto; }
.ph-journal__dots {
  position: static;
  margin-top: 24px;
  text-align: center;
}
.ph-journal__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--ph-beige);
  opacity: 1;
}
.ph-journal__dots .swiper-pagination-bullet-active { background: var(--ph-navy); }
.ph-journal__ctrl {
  position: absolute;
  top: 110px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  background: var(--ph-page);
  color: var(--ph-navy);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ph-journal__ctrl:hover { background: var(--ph-navy); border-color: var(--ph-navy); color: #fff; }
.ph-journal__ctrl--prev { left: -6px; }
.ph-journal__ctrl--next { right: -6px; }
.ph-journal__ctrl.swiper-button-disabled { opacity: .35; cursor: default; }
.ph-journal__ctrl.swiper-button-disabled:hover {
  background: var(--ph-page);
  border-color: var(--ph-line);
  color: var(--ph-navy);
}

/* ==========================================================================
   24. HOMEPAGE — doc structure: key features / offers / reels / rating / blog
   Layout comes from Bootstrap; these style the pieces only.
   ========================================================================== */

/* ---- Section 2: Key Features / Benefits (icon strip) ---- */
.ph-feats {
  padding: 30px 0;
  background: var(--ph-ivory);
  border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
}
.ph-feat {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 8px 10px;
}
.ph-feat__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--ph-gold);
  border-radius: 999px;
  background: var(--ph-page);
  color: var(--ph-gold-600);
  font-size: 22px;
}
.ph-feat__title {
  margin: 0 0 3px;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-feat__sub {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ph-muted);
}

/* ---- Section 3: Offer Section (festival promos) ---- */
.ph-offer__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 264px;
  overflow: hidden;
  padding: 32px;
  border-radius: 16px;
  background: linear-gradient(150deg, #16305A 0%, #0A1C3B 68%);
  color: #fff;
}
.ph-offer__card--alt {
  background: linear-gradient(150deg, #A9542F 0%, #6F2C16 72%);
}
.ph-offer__fest {
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ph-saffron);
}
.ph-offer__deal {
  margin: 8px 0 6px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(26px, 20px + 2vw, 38px);
  line-height: 1.1;
  color: #fff;
}
.ph-offer__desc {
  max-width: 420px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.ph-offer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.ph-offer__code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed rgba(255, 255, 255, .55);
  border-radius: 8px;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}
.ph-offer__code i { color: var(--ph-saffron); }
/* Offer as a ready-made graphic (Admin > Festive Offers > Banner image) */
.ph-offer__banner {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(10, 28, 59, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.ph-offer__banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(10, 28, 59, .16);
}
.ph-offer__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* More than one offer: one per slide (banners and text cards together) */
.ph-offer__swiper { position: relative; }
.ph-offer__swiper .swiper-slide { height: auto; }
.ph-offer__swiper .ph-offer__banner,
.ph-offer__swiper .ph-offer__card { height: 100%; box-shadow: none; }
.ph-offer__swiper a.ph-offer__banner:hover { transform: none; box-shadow: none; }
.ph-offer__swiper .ph-offer__banner img {
  height: 100%;
  object-fit: contain;
}
@media (min-width: 992px) {
  /* Text cards take at least the banners' 1200x628 shape (Swiper already evens out slide heights) */
  .ph-offer__swiper .ph-offer__card {
    aspect-ratio: 1200 / 628;
    overflow: visible; /* with overflow hidden, aspect-ratio would clip long text instead of growing */
    justify-content: center;
    padding: 48px 64px;
  }
  .ph-offer__swiper .ph-offer__deal { font-size: clamp(34px, 18px + 2.6vw, 54px); }
  .ph-offer__swiper .ph-offer__desc { max-width: 560px; font-size: 16px; }
}
.ph-offer__dots {
  position: static;
  margin-top: 20px;
  text-align: center;
}
.ph-offer__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--ph-beige);
  opacity: 1;
}
.ph-offer__dots .swiper-pagination-bullet-active { background: var(--ph-navy); }
.ph-offer__ctrl {
  position: absolute;
  top: calc(50% - 14px); /* centre of the slide: the dots row below is ~28px tall */
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(10, 28, 59, .18);
  color: var(--ph-navy);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ph-offer__ctrl:hover { background: var(--ph-navy); color: #fff; }
.ph-offer__ctrl--prev { left: 14px; }
.ph-offer__ctrl--next { right: 14px; }
@media (max-width: 991.98px) {
  .ph-offer__ctrl { display: none; } /* swipe + dots on touch screens */
}

/* Promo layout (Admin > Festive Offers > Offer style: Promo layout) - every line is editable text */
.ph-offer__promo {
  --promo-red: #E2391F;
  --promo-ink: #3B2416;
  --promo-teal: #148A82;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: 100%;
  padding: clamp(36px, 4.5vw, 64px) clamp(32px, 5vw, 72px);
  border-radius: 16px;
  background: linear-gradient(110deg, #FFDB80 0%, #FFF3D1 42%, #FFFCF3 100%);
  color: var(--promo-ink);
}
.ph-offer__promo--text { grid-template-columns: minmax(0, 1fr); }
/* double frame, as in the printed banner */
.ph-offer__promo::before,
.ph-offer__promo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 10px;
}
.ph-offer__promo::before { inset: 12px; border: 2px solid var(--promo-red); }
.ph-offer__promo::after  { inset: 19px; border: 1px solid rgba(201, 150, 60, .55); }
.ph-offer__promo-body { position: relative; z-index: 1; min-width: 0; }
.ph-offer__eyebrow {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--promo-teal);
}
.ph-offer__tagline {
  display: block;
  font-family: var(--ph-font-display);
  font-style: italic;
  font-size: clamp(24px, 14px + 1.4vw, 34px);
  line-height: 1.2;
  color: var(--promo-red);
}
.ph-offer__promo-title {
  margin: 2px 0 12px;
  font-family: var(--ph-font-display);
  font-weight: 700;
  font-size: clamp(42px, 18px + 3.6vw, 78px);
  line-height: 1;
  color: var(--promo-ink);
}
.ph-offer__promo-title em { font-weight: 600; color: var(--promo-red); }
.ph-offer__promo-desc {
  max-width: 520px;
  margin: 0 0 14px;
  font-family: var(--ph-font-display);
  font-size: clamp(18px, 14px + .5vw, 22px);
  line-height: 1.35;
}
.ph-offer__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin: 0 0 10px;
}
.ph-offer__prices s {
  font-family: var(--ph-font-display);
  font-size: clamp(22px, 16px + .8vw, 30px);
  color: #8A7B6E;
  text-decoration-color: var(--promo-red);
}
.ph-offer__prices strong {
  font-family: var(--ph-font-display);
  font-weight: 700;
  font-size: clamp(46px, 22px + 3.4vw, 76px);
  line-height: 1;
  color: var(--promo-red);
}
.ph-offer__save {
  padding: 6px 14px;
  border-radius: 4px;
  background: #F9C21A;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--promo-ink);
}
.ph-offer__note {
  margin: 0 0 18px;
  font-family: var(--ph-font-body);
  font-size: 15px;
  line-height: 1.5;
}
.ph-offer__promo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.ph-offer__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ph-navy);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
  font-family: var(--ph-font-body);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.ph-offer__cta i { font-size: 22px; }
.ph-offer__cta--wa { background: #1FA855; box-shadow: 0 4px 0 #178A45; }
.ph-offer__cta:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.ph-offer__promo-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--promo-red);
  border-radius: 8px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--promo-red);
}
.ph-offer__promo-media { position: relative; z-index: 1; min-width: 0; }
.ph-offer__promo-media img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* a light photo background melts into the card */
  /* fade the photo's edges so its rectangle never shows */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.ph-offer__badge {
  position: absolute;
  top: 34px;
  right: 34px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 70px + 3vw, 128px);
  aspect-ratio: 1;
  border-radius: 50%;
  outline: 3px dashed #F2B33D;
  outline-offset: -6px;
  background: var(--promo-red);
  transform: rotate(8deg);
  font-family: var(--ph-font-body);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  color: #fff;
}
.ph-offer__badge b { font-size: clamp(22px, 14px + 1vw, 30px); }
.ph-offer__badge small { font-size: clamp(12px, 9px + .4vw, 15px); font-weight: 800; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Small laptops: give the text column more room so the title stays on one line */
  .ph-offer__promo { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 44px 44px 44px 52px; }
  .ph-offer__promo-title { font-size: 52px; }
  .ph-offer__prices strong { font-size: 56px; }
  .ph-offer__eyebrow { letter-spacing: 3px; }
}
@media (max-width: 991.98px) {
  /* Phones and tablets: products on top, text centred below - like the square post */
  .ph-offer__promo {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 30px 22px 34px;
    text-align: center;
  }
  .ph-offer__promo-media { order: -1; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 12% 0 4%; }
  .ph-offer__eyebrow { font-size: 11px; letter-spacing: 2.5px; }
  .ph-offer__promo-desc { margin-left: auto; margin-right: auto; }
  .ph-offer__prices,
  .ph-offer__promo-row { justify-content: center; }
  .ph-offer__badge { top: 22px; right: 22px; }
}
@media (max-width: 575.98px) {
  .ph-offer__cta { font-size: 15px; padding: 12px 20px; }
}
.ph-offer__until {
  font-family: var(--ph-font-body);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* ---- Reels: shared carousel shell (Sections 4, 6, 7) ---- */
.ph-reels { position: relative; }
.ph-reels__swiper { overflow: hidden; }
.ph-reels__swiper .swiper-slide { height: auto; }

.ph-reels__ctrl {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ph-gold);
  border-radius: 999px;
  background: var(--ph-ivory);
  color: var(--ph-navy);
  font-size: 18px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ph-reels__ctrl--prev { left: -10px; }
.ph-reels__ctrl--next { right: -10px; }
.ph-reels__ctrl:hover,
.ph-reels__ctrl:focus-visible { background: var(--ph-gold); color: var(--ph-navy); }
.ph-reels__ctrl.swiper-button-disabled { opacity: .4; cursor: default; }

.ph-reels__dots.swiper-pagination {
  position: static;
  margin-top: 22px;
  text-align: center;
}
.ph-reels__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  border-radius: 999px;
  background: var(--ph-beige);
  opacity: 1;
  transition: width .2s ease, background-color .2s ease;
}
.ph-reels__dots .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--ph-gold);
}

/* Reel card — vertical 9:16 (category + new collection) */
.ph-reel {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: 14px;
  background: var(--ph-cream);
  color: #fff;
  text-decoration: none;
}
/* Video fills the card directly — its own first frame is the "poster" */
.ph-reel__video,
.ph-reel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ph-cream);
  transition: transform .5s ease;
}
.ph-reel:hover .ph-reel__video,
.ph-reel:hover .ph-reel__img,
.ph-reel__video.is-visible { transform: scale(1.05); }
.ph-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 28, 59, 0) 42%,
    rgba(10, 28, 59, .82) 100%);
}
.ph-reel__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ph-navy);
  font-size: 15px;
}
.ph-reel__new {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 3px;
  background: #fabd26;
  color: var(--ph-navy);
  font-family: var(--ph-font-body);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ph-reel__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px;
}
.ph-reel__name {
  display: block;
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
}
.ph-reel__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-family: var(--ph-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.ph-reel__meta i { font-size: 12px; transition: transform .15s ease; }
.ph-reel:hover .ph-reel__meta i { transform: translateX(3px); }
.ph-reel__price {
  display: block;
  margin: 4px 0 0;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-saffron);
}

/* ---- Section 7: Google rating ---- */
.ph-rating__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin: -18px 0 34px;
}
.ph-rating__summary i.bi-google { font-size: 22px; color: var(--ph-navy); }
.ph-rating__score {
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--ph-navy);
}
.ph-rating__stars { color: var(--ph-saffron); font-size: 17px; letter-spacing: 2px; }
.ph-rating__count { font-size: 13px; color: var(--ph-muted); }

/* Review reel — 9:16 card to match the reels rhythm */
.ph-review {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* aspect-ratio: 9 / 16; */
  padding: 22px 20px;
  border: 1px solid var(--ph-line);
  border-radius: 14px;
  background: var(--ph-ivory);
}
.ph-review__g { font-size: 22px; color: var(--ph-navy); line-height: 1; }
.ph-review__stars {
  margin: 14px 0 12px;
  color: var(--ph-saffron);
  font-size: 14px;
  letter-spacing: 2px;
}
.ph-review__text {
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  font-family: var(--ph-font-display);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ph-navy);
}
.ph-review__who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ph-line);
}
.ph-review__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--ph-navy);
  color: #fff;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: 15px;
}
.ph-review__name { margin: 0; font-size: 13px; font-weight: 700; color: var(--ph-navy); }
.ph-review__date { margin: 0; font-size: 12px; color: var(--ph-earth); }

/* ---- Section 5: Instagram CTA sits mid-page now ---- */
.ph-insta--mid {
  /* padding-bottom: 56px; */
  border-bottom: 1px solid var(--ph-line);
}

/* ==========================================================================
   25. LEGAL PAGES (Privacy Policy, Terms of Service)
   ========================================================================== */
.ph-legal {
  max-width: 820px;
  margin: 0 auto;
}
.ph-legal__updated {
  margin: 0 0 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ph-line);
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-earth);
}

/* Table of contents card */
.ph-legal__toc {
  margin: 0 0 44px;
  padding: 22px 26px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ivory);
}
.ph-legal__toc h2 {
  margin: 0 0 14px;
  font-family: var(--ph-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ph-navy);
}
.ph-legal__toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 36px;
}
.ph-legal__toc li {
  margin-bottom: 9px;
  break-inside: avoid;
}
.ph-legal__toc a {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ph-earth);
}
.ph-legal__toc a:hover,
.ph-legal__toc a:focus-visible { color: var(--ph-gold-600); }

/* Content sections */
.ph-legal__section {
  margin-top: 40px;
  scroll-margin-top: 96px;
}
.ph-legal__section:first-of-type { margin-top: 0; }
.ph-legal__section h2 {
  margin: 0 0 16px;
  font-family: var(--ph-font-display);
  font-weight: 600;
  font-size: clamp(22px, 18px + 1.4vw, 30px);
  line-height: 1.2;
  color: var(--ph-navy);
}
.ph-legal__section h3 {
  margin: 24px 0 10px;
  font-family: var(--ph-font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--ph-navy);
}
.ph-legal p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ph-ink);
}
.ph-legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.ph-legal li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ph-ink);
}
.ph-legal strong { color: var(--ph-navy); font-weight: 700; }
.ph-legal a {
  color: var(--ph-gold-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ph-legal a:hover,
.ph-legal a:focus-visible { color: var(--ph-navy); }

/* Highlighted contact / note block */
.ph-legal__contact {
  margin-top: 44px;
  padding: 24px 26px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-cream);
}
.ph-legal__contact p:last-child { margin-bottom: 0; }