@charset "utf-8";

/*
Theme Name: Pharmora - Pharmacy & Medical Store HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Design Tokens
   1.2 Base And Typography
   1.3 Section Heads
   1.4 Buttons And Round Controls
   1.5 Chips, Stars And Prices
   1.6 Photos, Glass And Grounds
2. Preloader
3. Header
   3.1 Topbar
   3.2 Search Bar
   3.3 Menu Bar
   3.4 Dropdowns
   3.5 Shop Mega Menu
   3.6 Departments Panel
   3.7 Docked Bar
   3.8 Home 03 Header
4. Offcanvas, Cart Drawer And Modals
   4.1 Offcanvas Menu
   4.2 Cart Drawer
   4.3 Modals And Quick View
5. Language Picker
6. Forms And Fields
   6.1 Search
   6.2 Fields
   6.3 Steppers, Packs And Deliveries
7. Subheader
8. Product Cards
   8.1 Product Card
   8.2 Small Card
9. Hero
   9.1 Full Hero
10. Home 01 Main Store
   10.1 Department Tiles
   10.2 Sale Countdown
   10.3 Prescription Split
   10.4 Department Links
   10.5 Tabs
   10.6 Offer Banners
   10.7 Free Delivery Basket
   10.8 Care Club
   10.9 Posts
   10.10 Voices And Newsletter
   10.11 Brand Strip
   10.12 Store Visit
11. Home 02 Pharmacy
   11.1 Promo Strip
   11.2 Boxed Hero
   11.3 Rx Bar
   11.4 Promo Tiles
   11.5 Pill Organizer
   11.6 Consultation Band
   11.7 Store Row
12. Home 03 Supplements And Wellness
   12.1 Centred Hero
   12.2 Features Strip
   12.3 Round Categories
   12.4 Summer Card And Compact Cards
   12.5 Your Day Dosed
   12.6 Voices Over Photo
   12.7 Subscribe And Save
13. Home 04 Skincare And Beauty
   13.1 Panels Hero
   13.2 Beauty Glyph Row
   13.3 Offers Mosaic
   13.4 AM To PM Routine
14. Shop
   14.1 Sidebar
   14.2 Toolbar And Filter Bar
   14.3 Grid, List And Pager
15. Product Pages
   15.1 Gallery
   15.2 Summary
   15.3 Product Tabs
16. Cart, Checkout And Account
   16.1 Working Tables
   16.2 Totals
   16.3 Checkout
   16.4 Wishlist And Compare
   16.5 Tracking
   16.6 Account
17. Pharmacy Pages
   17.1 Prescriptions
   17.2 FAQ
   17.3 Consultation
   17.4 Services
   17.5 Vaccinations
   17.6 Health Tools
   17.7 Store Locator
   17.8 Care Club Calculator
18. Inner Pages
   18.1 About
   18.2 Pharmacists
   18.3 Journal
   18.4 Article
   18.5 Contact And FAQ Sidebars
   18.6 Account Forms
   18.7 Coming Soon And 404
19. Footer
   19.1 Sign Band
   19.2 Columns
   19.3 Bottom Bar
   19.4 Mobile Bar And Back To Top
20. Utilities
*/

/*======================
1. General
========================*/
/*---- 1.1 Design Tokens ----*/
/* Light is the default; html[data-theme="dark"] swaps every surface, text and line token.
   The palette: navy ink, amber accent, ice and peach grounds. */
:root {
  --ph-primary: #10235E;
  --ph-primary-rgb: 16, 35, 94;
  --ph-primary-hover: #1C3684;
  --ph-on-primary: #FFFFFF;
  --ph-accent: #FE9A31;
  --ph-accent-rgb: 254, 154, 49;
  --ph-accent-hover: #F2860F;
  --ph-on-accent: #10235E;
  --ph-accent-text: #B35F00;
  --ph-sky: #5AA4E5;
  --ph-sky-rgb: 90, 164, 229;
  --ph-navy: #10235E;
  --ph-navy-rgb: 16, 35, 94;
  --ph-ink: #1C2448;
  --ph-ice: #EFF4F8;
  --ph-ice-rgb: 239, 244, 248;
  --ph-ice-2: #E4EDF5;
  --ph-peach: #FFF4E8;
  --ph-peach-2: #FFE7CF;
  --ph-blush: #F8EDEA;
  --ph-sale: #D61F45;
  --ph-ok: #1B8A57;
  --ph-ok-soft: rgba(27, 138, 87, 0.1);
  --ph-warn: #B86B00;
  --ph-rx: #6A4CD8;
  --ph-rx-soft: rgba(106, 76, 216, 0.1);
  --ph-bg: #FFFFFF;
  --ph-bg-rgb: 255, 255, 255;
  --ph-surface: #FFFFFF;
  --ph-surface-2: #F7F9FC;
  --ph-field: #EFF4F8;
  --ph-heading: #10235E;
  --ph-heading-rgb: 16, 35, 94;
  --ph-text: #4A5574;
  --ph-muted: #687391;
  --ph-line: #E6EAF1;
  --ph-line-strong: #D3DBE7;
  --ph-tonal: rgba(16, 35, 94, 0.06);
  --ph-tonal-2: rgba(16, 35, 94, 0.11);
  --ph-night: #10235E;
  --ph-night-rgb: 16, 35, 94;
  --ph-night-2: #283661;
  --ph-on-night: rgba(232, 238, 250, 0.76);
  --ph-line-night: rgba(255, 255, 255, 0.12);
  --ph-glass: rgba(255, 255, 255, 0.2);
  --ph-ff-heading: "Geologica", sans-serif;
  --ph-ff-body: "Inter", sans-serif;
  --ph-fs-display: clamp(3rem, 6.4vw, 7.25rem);
  --ph-fs-h1: clamp(2.5rem, 4.1vw, 4rem);
  --ph-fs-h2: clamp(1.875rem, 2.6vw, 2.625rem);
  --ph-fs-h3: clamp(1.3125rem, 1.55vw, 1.625rem);
  --ph-fs-h4: 1.25rem;
  --ph-fs-h5: 1.125rem;
  --ph-fs-h6: 1rem;
  --ph-radius: 9px;
  --ph-radius-card: 20px;
  --ph-radius-lg: 28px;
  --ph-shadow: 0 16px 40px rgba(16, 35, 94, 0.08);
  --ph-shadow-lg: 0 28px 70px rgba(16, 35, 94, 0.16);
  --ph-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --ph-primary: #DCE6F7;
  --ph-primary-rgb: 220, 230, 247;
  --ph-primary-hover: #FFFFFF;
  --ph-on-primary: #0A1230;
  --ph-accent-text: #FFB25E;
  --ph-ice: #121D46;
  --ph-ice-rgb: 18, 29, 70;
  --ph-ice-2: #18265A;
  --ph-peach: #241F3C;
  --ph-peach-2: #2E2747;
  --ph-blush: #251C33;
  --ph-sale: #FF5C7D;
  --ph-ok: #3CCB8A;
  --ph-ok-soft: rgba(60, 203, 138, 0.14);
  --ph-warn: #FFB25E;
  --ph-rx: #A592FF;
  --ph-rx-soft: rgba(165, 146, 255, 0.14);
  --ph-bg: #0A1230;
  --ph-bg-rgb: 10, 18, 48;
  --ph-surface: #101B42;
  --ph-surface-2: #142150;
  --ph-field: #16235A;
  --ph-heading: #EEF2FB;
  --ph-heading-rgb: 238, 242, 251;
  --ph-text: #B8C2DB;
  --ph-muted: #95A1BF;
  --ph-line: rgba(255, 255, 255, 0.1);
  --ph-line-strong: rgba(255, 255, 255, 0.18);
  --ph-tonal: rgba(220, 230, 247, 0.07);
  --ph-tonal-2: rgba(220, 230, 247, 0.13);
  --ph-night: #060C22;
  --ph-night-rgb: 6, 12, 34;
  --ph-night-2: #0D1638;
  --ph-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --ph-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
/* Home 04 (skincare and beauty) speaks in ink black and blush, as the base's skincare home does */
body.mood-skin {
  --ph-primary: #141414;
  --ph-primary-rgb: 20, 20, 20;
  --ph-primary-hover: #333333;
  --ph-heading: #141414;
  --ph-heading-rgb: 20, 20, 20;
  --ph-peach: #F8EDEA;
  --ph-ice: #F6F2F0;
  --ph-ice-2: #EFE6E2;
  --ph-field: #F4EFEC;
  --ph-night: #111111;
  --ph-night-rgb: 17, 17, 17;
  --ph-night-2: #1E1E1E;
  --ph-tonal: rgba(20, 20, 20, 0.06);
  --ph-tonal-2: rgba(20, 20, 20, 0.11);
}
html[data-theme="dark"] body.mood-skin {
  --ph-primary: #F3ECE8;
  --ph-primary-rgb: 243, 236, 232;
  --ph-primary-hover: #FFFFFF;
  --ph-heading: #F6F1EE;
  --ph-heading-rgb: 246, 241, 238;
  --ph-peach: #241B1E;
  --ph-ice: #1A1517;
  --ph-ice-2: #221B1E;
  --ph-field: #221B1E;
  --ph-night: #080707;
  --ph-night-2: #141112;
  --ph-bg: #0F0C0D;
  --ph-bg-rgb: 15, 12, 13;
  --ph-surface: #171315;
  --ph-surface-2: #1D181A;
  --ph-text: #CFC5C1;
  --ph-muted: #A69A96;
  --ph-tonal: rgba(243, 236, 232, 0.07);
  --ph-tonal-2: rgba(243, 236, 232, 0.13);
}

/*---- 1.2 Base And Typography ----*/
html {
  font-size: 16px;
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--ph-ff-body);
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 400;
  color: var(--ph-text);
  background-color: var(--ph-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s var(--ph-ease), color 0.4s var(--ph-ease);
}
body.oc-open,
body.ph-no-scroll {
  overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ph-heading);
  margin: 0 0 16px;
}
h1 { font-size: var(--ph-fs-h1); }
h2 { font-size: var(--ph-fs-h2); }
h3 { font-size: var(--ph-fs-h3); }
h4 { font-size: var(--ph-fs-h4); }
h5 { font-size: var(--ph-fs-h5); }
h6 { font-size: var(--ph-fs-h6); }
h1 b, h2 b, h3 b {
  font-weight: 500;
  color: var(--ph-accent-text);
}
p {
  margin: 0 0 16px;
}
a {
  color: var(--ph-heading);
  text-decoration: none;
  transition: color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease), border-color 0.3s var(--ph-ease);
}
a:hover {
  color: var(--ph-accent-text);
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
}
::selection {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
:focus-visible {
  outline: 2px solid var(--ph-sky);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 10px 18px;
  border-radius: var(--ph-radius);
  background: var(--ph-navy);
  color: #FFFFFF;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ph-ease);
}
.skip-link:focus {
  transform: translateY(0);
  color: #FFFFFF;
}
.ph-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-root {
  position: relative;
  display: block;
}
.container {
  position: relative;
}
/* a 2K screen at 125% is a 2048px viewport: widen the measure and the root size there */
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }
  .container {
    max-width: 1472px;
  }
}
@media (min-width: 1960px) {
  html {
    font-size: 18px;
  }
  .container {
    max-width: 1592px;
  }
}

/*---- 1.3 Section Heads ----*/
/* the section pattern: eyebrow, title, a short amber rule drawn on, a lead one size above body */
.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--ph-ff-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-accent-text);
}
.ph-eyebrow > i {
  font-size: 0.875rem;
}
.ph-head {
  position: relative;
  margin-bottom: 44px;
}
.ph-head .title {
  margin-bottom: 0;
}
.ph-head.is-centre {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.ph-head.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.ph-head.is-split .ph-head-copy {
  max-width: 720px;
}
.ph-rule {
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 18px;
  border-radius: 4px;
  background: var(--ph-accent);
}
.ph-head.is-centre .ph-rule {
  margin-left: auto;
  margin-right: auto;
}
.ph-lead {
  margin: 18px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ph-text);
}
.ph-head.is-centre .ph-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.ph-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
/* a title's line kept whole (hero headlines are set on lines) */
.ph-line {
  display: block;
  white-space: nowrap;
}

/*---- 1.4 Buttons And Round Controls ----*/
.ph-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--ph-radius);
  background: var(--ph-primary);
  color: var(--ph-on-primary);
  font-family: var(--ph-ff-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.35s var(--ph-ease), color 0.35s var(--ph-ease), transform 0.35s var(--ph-ease), box-shadow 0.35s var(--ph-ease);
}
.ph-btn:hover {
  background: var(--ph-primary-hover);
  color: var(--ph-on-primary);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--ph-primary-rgb), 0.24);
}
.ph-btn > i {
  font-size: 0.9375rem;
}
/* the double arrow: one leaves to the right as its twin arrives from the left */
.ph-btn .btn-ic {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.ph-btn .btn-ic i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.45s var(--ph-ease);
}
.ph-btn .btn-ic i + i {
  transform: translateX(-130%);
}
.ph-btn:hover .btn-ic i {
  transform: translateX(130%);
}
.ph-btn:hover .btn-ic i + i {
  transform: translateX(0);
}
.ph-btn.is-accent {
  background: var(--ph-accent);
  color: var(--ph-on-accent);
}
.ph-btn.is-accent:hover {
  background: var(--ph-accent-hover);
  color: var(--ph-on-accent);
  box-shadow: 0 14px 30px rgba(var(--ph-accent-rgb), 0.34);
}
.ph-btn.is-tonal {
  background: var(--ph-ice);
  color: var(--ph-heading);
}
.ph-btn.is-tonal:hover {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.ph-btn.is-light {
  background: #FFFFFF;
  color: var(--ph-navy);
}
.ph-btn.is-light:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.ph-btn.is-glass {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ph-btn.is-glass:hover {
  background: #FFFFFF;
  color: var(--ph-navy);
  box-shadow: none;
}
.ph-btn.is-sm {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 0.875rem;
}
.ph-btn.is-block {
  width: 100%;
}
.ph-btn[disabled],
.ph-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.ph-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* a text link with an arrow: "View More", "See All" */
.ph-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}
.ph-link i {
  font-size: 0.8125rem;
  transition: transform 0.35s var(--ph-ease);
}
.ph-link:hover {
  color: var(--ph-accent-text);
}
.ph-link:hover i {
  transform: translateX(4px);
}
/* round controls: the header's icons, slider arrows, card actions */
.ph-round {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ph-heading);
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease), transform 0.3s var(--ph-ease);
}
.ph-round.is-tonal {
  background: var(--ph-ice);
}
.ph-round:hover {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.ph-round.is-solid {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.ph-round.is-solid:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-count {
  position: absolute;
  top: -3px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--ph-accent);
  color: var(--ph-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--ph-bg);
}
.ph-count.is-bump {
  animation: ph-bump 0.5s var(--ph-ease);
}
@keyframes ph-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* slider arrows: a pair in one tonal pill, as the base's */
.ph-arrows {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--ph-radius);
  background: var(--ph-ice);
}
.ph-arrows button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ph-heading);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.ph-arrows button:hover {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.ph-arrows button.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/*---- 1.5 Chips, Stars And Prices ----*/
.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--ph-sky);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph-chip.is-sale {
  background: #3E86CC;
}
.ph-chip.is-popular {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-chip.is-new {
  background: var(--ph-ok);
}
.ph-chip.is-rx {
  background: var(--ph-rx);
}
.ph-chip.is-navy {
  background: var(--ph-navy);
}
.ph-chip.is-ink {
  background: #141414;
}
.ph-chip.is-soft {
  background: var(--ph-ice);
  color: var(--ph-heading);
}
.ph-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--ph-accent);
  font-size: 0.8125rem;
  line-height: 1;
}
.ph-stars .is-off {
  color: var(--ph-line-strong);
}
.ph-price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-price del {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ph-muted);
}
.ph-price ins {
  text-decoration: none;
  color: var(--ph-sale);
}
.ph-unit {
  display: block;
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.ph-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ph-status b {
  white-space: nowrap;
}
.ph-status .dot {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ph-muted);
}
.ph-status.is-open .dot {
  background: #2FBF71;
  box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.18);
}
.ph-status.is-soon .dot {
  background: var(--ph-accent);
  box-shadow: 0 0 0 4px rgba(var(--ph-accent-rgb), 0.2);
}
.ph-status.is-closed .dot {
  background: var(--ph-sale);
}

/*---- 1.6 Photos, Glass And Grounds ----*/
.ph-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
}
.ph-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ph-ease);
}
/* the base's signature: a frosted caption panel over a photograph */
.ph-glass {
  background: var(--ph-glass);
  border: 1px solid rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: #FFFFFF;
}
.ph-ice {
  background-color: var(--ph-ice);
}
.ph-peach {
  background-color: var(--ph-peach);
}
.ph-night {
  background-color: var(--ph-night);
  color: var(--ph-on-night);
}
.ph-night h1, .ph-night h2, .ph-night h3, .ph-night h4, .ph-night h5, .ph-night h6 {
  color: #FFFFFF;
}
.ph-night .ph-eyebrow {
  color: var(--ph-accent);
}
.ph-night a:not(.ph-btn) {
  color: #FFFFFF;
}
.ph-night a:not(.ph-btn):hover {
  color: var(--ph-accent);
}
.ph-card {
  position: relative;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: border-color 0.35s var(--ph-ease), box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 1.625rem;
  transition: background-color 0.35s var(--ph-ease), color 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-icon.is-ice {
  background: var(--ph-ice);
  color: var(--ph-heading);
}
/* icon inversion on hover (house physics) */
a:hover > .ph-icon,
.ph-card:hover .ph-icon {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-faces {
  display: inline-flex;
  align-items: center;
}
.ph-faces img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--ph-bg);
}
.ph-faces img + img {
  margin-left: -12px;
}
.ph-faces .faces-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 3px solid var(--ph-bg);
  border-radius: 50%;
  background: var(--ph-accent);
  color: var(--ph-navy);
  font-size: 0.75rem;
  font-weight: 700;
}

/*======================
2. Preloader
========================*/
/* Capsule Twist: the navy screen is two halves that part like a capsule's, each meeting
   edge rounding into a capsule end (--cap) as it goes */
.ph-preloader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}
.no-js .ph-preloader,
.ph-preloader.is-done {
  display: none;
}
.ph-preloader .pre-half {
  --cap: 0%;
  position: absolute;
  left: -10%;
  right: -10%;
  height: 50.4%;
  background: var(--ph-navy);
}
html[data-theme="dark"] .ph-preloader .pre-half {
  background: #060C22;
}
.ph-preloader .pre-half.is-top {
  top: 0;
  border-radius: 0 0 var(--cap) var(--cap) / 0 0 140px 140px;
}
.ph-preloader .pre-half.is-bottom {
  bottom: 0;
  border-radius: var(--cap) var(--cap) 0 0 / 140px 140px 0 0;
}
.ph-preloader .pre-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translate(-50%, -50%);
}
.ph-preloader .pre-capsule {
  position: absolute;
  top: 48px;
  left: 50%;
  display: flex;
  width: 128px;
  height: 46px;
  margin-left: -64px;
  margin-top: -23px;
}
.ph-preloader .pre-capsule span {
  flex: 1 1 50%;
  height: 100%;
}
.ph-preloader .cap-a {
  border-radius: 23px 0 0 23px;
  background: #FFFFFF;
  box-shadow: inset -2px 0 0 rgba(16, 35, 94, 0.25);
}
.ph-preloader .cap-b {
  border-radius: 0 23px 23px 0;
  background: var(--ph-accent);
}
.ph-preloader .pre-mark {
  display: block;
  width: 96px;
  height: 96px;
}
.ph-preloader .pre-word {
  font-family: var(--ph-ff-heading);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/*======================
3. Header
========================*/
/*---- 3.1 Topbar ----*/
.ph-header {
  --ph-topbar: var(--ph-accent);
  --ph-on-topbar: #10235E;
  position: relative;
  z-index: 990;
  background: var(--ph-surface);
}
.ph-header.is-pharmacy {
  --ph-topbar: var(--ph-ice);
  --ph-on-topbar: var(--ph-heading);
}
html[data-theme="dark"] .ph-header {
  --ph-topbar: var(--ph-night-2);
  --ph-on-topbar: #E8EEFA;
}
.ph-topbar {
  background: var(--ph-topbar);
  color: var(--ph-on-topbar);
}
.ph-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
}
.ph-topbar .top-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}
.ph-topbar .top-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-on-topbar);
}
.ph-topbar .top-contacts a:hover {
  opacity: 0.75;
}
.ph-topbar .top-contacts i {
  font-size: 0.875rem;
}
.ph-topbar .top-end {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ph-topbar .top-status {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ph-on-topbar);
}
.ph-topbar .top-status b {
  font-weight: 700;
}
.ph-topbar .top-status .dot {
  background: var(--ph-on-topbar);
}
.ph-topbar .top-status.is-open .dot {
  background: #1B8A57;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/*---- 3.2 Search Bar ----*/
.ph-header .header-bar {
  border-bottom: 1px solid var(--ph-line);
}
.ph-header .header-inner {
  display: flex;
  align-items: center;
  gap: 34px;
  min-height: 96px;
}
.ph-logo {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.ph-logo img {
  width: auto;
  height: 52px;
}
.ph-logo .logo-light,
html[data-theme="dark"] .ph-logo .logo-dark {
  display: none;
}
html[data-theme="dark"] .ph-logo .logo-light {
  display: block;
}
.ph-header .ph-search {
  flex: 1 1 auto;
  max-width: 600px;
}
.head-help {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ph-heading);
}
.head-help > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 1.375rem;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.head-help span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.head-help small {
  font-size: 0.75rem;
  color: var(--ph-muted);
}
.head-help b {
  font-family: var(--ph-ff-heading);
  font-size: 1rem;
  font-weight: 500;
}
.head-help:hover > i {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.header-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.header-icons .head-cart {
  width: 48px;
  height: 48px;
  margin-left: 6px;
  font-size: 1.125rem;
}
.ph-theme-toggle .phi-sun,
html[data-theme="dark"] .ph-theme-toggle .phi-moon {
  display: none;
}
html[data-theme="dark"] .ph-theme-toggle .phi-sun {
  display: inline-block;
}
.ph-menu-toggle {
  display: none;
}

/*---- 3.3 Menu Bar ----*/
.ph-header .header-nav {
  position: relative;
  background: var(--ph-surface);
  border-bottom: 1px solid var(--ph-line);
}
.ph-header .nav-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 68px;
}
.nav-mark,
.nav-cart {
  display: none;
}
.dept-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent;
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
.dept-btn i {
  font-size: 1.25rem;
  transition: transform 0.35s var(--ph-ease);
}
.dept-btn:hover,
.dept-btn.is-open {
  color: var(--ph-accent-text);
}
.dept-btn.is-open i {
  transform: rotate(90deg);
}
.ph-nav {
  flex: 1 1 auto;
}
.ph-nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ph-nav > ul > li {
  position: relative;
}
.ph-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 22px 14px;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ph-heading);
}
.ph-nav > ul > li > a > i {
  font-size: 0.75rem;
  transition: transform 0.3s var(--ph-ease);
}
/* hover and the current page by colour only */
.ph-nav > ul > li:hover > a,
.ph-nav > ul > li.active > a {
  color: var(--ph-accent-text);
}
.ph-nav > ul > li:hover > a > i {
  transform: rotate(180deg);
}
.head-cta {
  flex: 0 0 auto;
}
.is-skin .head-cta {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.is-skin .head-cta:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}

/*---- 3.4 Dropdowns ----*/
/* the panel hangs a little below the bar; an invisible bridge keeps the hover across the gap */
.ph-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -8px;
  z-index: 20;
  min-width: 250px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border-radius: 14px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ph-ease), transform 0.3s var(--ph-ease), visibility 0.3s;
}
.ph-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}
.ph-nav li:hover > .sub-menu,
.ph-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ph-nav .sub-menu li {
  position: relative;
}
.ph-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-nav .sub-menu a > i {
  font-size: 0.6875rem;
}
.ph-nav .sub-menu li:hover > a,
.ph-nav .sub-menu li.active > a {
  background: var(--ph-ice);
  color: var(--ph-accent-text);
}
/* the third level opens to the right */
.ph-nav .sub-menu .sub-menu {
  top: -12px;
  left: calc(100% + 12px);
}
.ph-nav .sub-menu .sub-menu::before {
  top: 0;
  bottom: 0;
  left: auto;
  right: 100%;
  width: 16px;
  height: auto;
}

/*---- 3.5 Shop Mega Menu ----*/
.ph-nav .has-mega {
  position: static;
}
.ph-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 34px;
  padding: 30px;
  border-radius: 18px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ph-ease), transform 0.3s var(--ph-ease), visibility 0.3s;
}
.ph-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}
.ph-nav .has-mega:hover > .mega-menu,
.ph-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-h {
  display: block;
  margin-bottom: 12px;
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.mega-col a {
  display: block;
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--ph-text);
}
.mega-col a:hover,
.mega-col li.active a {
  color: var(--ph-accent-text);
}
.mega-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mega-promo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  min-height: 220px;
}
.mega-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ph-ease);
}
.mega-promo:hover img {
  transform: scale(1.06);
}
.mega-promo-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}
.mega-promo-copy b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: #10235E;
}
.mega-promo-copy .ph-link {
  color: #10235E;
}
/* a small product row: the mega, the departments panel, the cart drawer */
.mini-product,
.mega-product {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ph-heading);
}
.mini-thumb {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: 12px;
  background: #FFFFFF;
}
.mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mini-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mini-copy b {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
}
.mini-copy .ph-price {
  font-size: 1rem;
}
.mini-product:hover b,
.mega-product:hover b {
  color: var(--ph-accent-text);
}

/*---- 3.6 Departments Panel ----*/
.dept-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 10px 0 0;
}
.dept-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 420px;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
}
.dept-tabs {
  padding: 14px;
  background: var(--ph-ice);
}
.dept-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--ph-ff-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.dept-tab > i:first-child {
  font-size: 1.375rem;
  color: var(--ph-accent-text);
}
.dept-tab .dept-go {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ph-ease), transform 0.3s var(--ph-ease);
}
.dept-tab.is-active {
  background: var(--ph-surface);
  color: var(--ph-heading);
  box-shadow: 0 8px 20px rgba(16, 35, 94, 0.06);
}
.dept-tab.is-active .dept-go {
  opacity: 1;
  transform: translateX(0);
}
.dept-pane {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 30px;
  padding: 30px 34px;
}
.dept-pane[hidden] {
  display: none;
}
.dept-cols {
  display: contents;
}
.dept-col-h {
  display: block;
  margin-bottom: 14px;
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.dept-col a {
  display: block;
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--ph-text);
}
.dept-col a:hover {
  color: var(--ph-accent-text);
}
.dept-picks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*---- 3.7 Docked Bar ----*/
.ph-header.is-scrolled {
  padding-bottom: var(--ph-nav-h, 69px);
}
.ph-header.is-scrolled .header-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 995;
  box-shadow: 0 10px 30px rgba(16, 35, 94, 0.1);
  animation: ph-dock 0.45s var(--ph-ease);
}
.ph-header.is-scrolled .nav-mark,
.ph-header.is-scrolled .nav-cart {
  display: inline-flex;
}
.nav-mark img {
  width: 36px;
  height: 36px;
}
@keyframes ph-dock {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/*---- 3.8 Home 03 Header ----*/
/* one transparent bar over the hero; white once the page scrolls */
.ph-header.is-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}
.ph-header.is-over .header-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.ph-header.is-over .header-inner {
  gap: 32px;
}
.ph-header.is-over .ph-nav > ul {
  justify-content: flex-start;
}
.ph-header.is-over .ph-nav > ul > li > a {
  padding: 34px 14px;
  color: #FFFFFF;
}
.ph-header.is-over .ph-nav > ul > li:hover > a,
.ph-header.is-over .ph-nav > ul > li.active > a {
  color: var(--ph-accent);
}
.ph-header.is-over .header-icons .ph-round:not(.is-solid):not(.is-tonal) {
  color: #FFFFFF;
}
.ph-header.is-over .header-icons .ph-round:not(.is-solid):hover {
  background: rgba(255, 255, 255, 0.18);
}
.ph-header.is-over .head-cart {
  background: #FFFFFF;
  color: #10235E;
}
.ph-header.is-over .logo-dark {
  display: none;
}
.ph-header.is-over .logo-light {
  display: block;
}
.ph-header.is-over.is-scrolled {
  position: fixed;
  padding-bottom: 0;
  background: var(--ph-surface);
  box-shadow: 0 10px 30px rgba(16, 35, 94, 0.1);
  animation: ph-dock 0.45s var(--ph-ease);
}
.ph-header.is-over.is-scrolled .header-inner {
  min-height: 78px;
}
.ph-header.is-over.is-scrolled .ph-nav > ul > li > a {
  padding: 28px 14px;
  color: var(--ph-heading);
}
.ph-header.is-over.is-scrolled .ph-nav > ul > li.active > a,
.ph-header.is-over.is-scrolled .ph-nav > ul > li:hover > a {
  color: var(--ph-accent-text);
}
.ph-header.is-over.is-scrolled .header-icons .ph-round:not(.is-solid):not(.is-tonal) {
  color: var(--ph-heading);
}
.ph-header.is-over.is-scrolled .head-cart {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
html:not([data-theme="dark"]) .ph-header.is-over.is-scrolled .logo-dark {
  display: block;
}
html:not([data-theme="dark"]) .ph-header.is-over.is-scrolled .logo-light {
  display: none;
}
.search-overlay {
  padding: 18px 0 24px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
}
.search-overlay .ph-search {
  max-width: 760px;
  margin: 0 auto;
}

/*======================
4. Offcanvas, Cart Drawer And Modals
========================*/
/*---- 4.1 Offcanvas Menu ----*/
.ph-offcanvas,
.ph-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  overflow-y: auto;
  transition: transform 0.55s var(--ph-ease), visibility 0.55s;
  visibility: hidden;
}
.ph-offcanvas {
  left: 0;
  padding: 26px 28px 34px;
  background: var(--ph-night);
  color: var(--ph-on-night);
  transform: translateX(-102%);
}
.ph-offcanvas.is-open,
.ph-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.ph-offcanvas-overlay,
.ph-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 12, 34, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ph-ease), visibility 0.4s;
}
.ph-offcanvas-overlay.is-open,
.ph-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.offcanvas-head img {
  width: auto;
  height: 44px;
}
.offcanvas-close {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.offcanvas-close:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-offcanvas .ph-search {
  margin-bottom: 18px;
}
.offcanvas-cta {
  margin-bottom: 18px;
}
.oc-group {
  padding: 16px 0;
  border-top: 1px solid var(--ph-line-night);
}
.oc-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ph-accent);
}
.oc-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
}
.oc-group a,
.oc-top {
  display: block;
  padding: 5px 0;
  font-size: 0.9375rem;
  color: #FFFFFF;
}
.oc-top {
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
}
.oc-group a:hover,
.oc-group a.is-current,
.oc-top.is-current {
  color: var(--ph-accent);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--ph-line-night);
}
.offcanvas-foot p {
  margin: 0;
}
.offcanvas-foot .ph-status,
.oc-contact {
  color: #FFFFFF;
}
.oc-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oc-tools .ph-theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.oc-tools .ph-theme-toggle:hover {
  background: var(--ph-accent);
  color: var(--ph-on-accent);
}
.ph-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ph-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ph-ice);
  color: var(--ph-heading);
  font-size: 0.875rem;
}
.ph-social a:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-social.is-dark a {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.ph-social.is-dark a:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}

/*---- 4.2 Cart Drawer ----*/
.ph-drawer {
  right: 0;
  padding: 0;
  background: var(--ph-surface);
  color: var(--ph-text);
  transform: translateX(102%);
  box-shadow: -20px 0 60px rgba(6, 12, 34, 0.18);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ph-line);
}
.drawer-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.drawer-title span {
  font-family: var(--ph-ff-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ph-muted);
}
.drawer-free {
  padding: 18px 26px;
  background: var(--ph-peach);
}
.drawer-free p {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  color: var(--ph-heading);
}
.free-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(var(--ph-accent-rgb), 0.22);
}
.free-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: var(--ph-accent);
  transition: width 0.6s var(--ph-ease);
}
.drawer-lines {
  flex: 1 1 auto;
  padding: 10px 26px;
}
.drawer-lines li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ph-line);
}
.drawer-lines .mini-product {
  flex: 1 1 auto;
  min-width: 0;
}
.drawer-lines small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.drawer-lines em {
  font-style: normal;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  color: var(--ph-heading);
}
.mini-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ph-ice);
  color: var(--ph-heading);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.mini-remove:hover {
  background: var(--ph-sale);
  color: #FFFFFF;
}
.drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 50px 26px;
  text-align: center;
  color: var(--ph-heading);
}
.drawer-empty[hidden] {
  display: none;
}
.drawer-empty > i {
  font-size: 3rem;
  color: var(--ph-accent-text);
}
.drawer-empty b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
}
.drawer-foot {
  padding: 20px 26px 26px;
  border-top: 1px solid var(--ph-line);
  background: var(--ph-surface-2);
}
.drawer-sub {
  display: flex;
  justify-content: space-between;
  margin: 0 0 16px;
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  color: var(--ph-heading);
}
.drawer-sub b {
  font-weight: 500;
}
.drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/*---- 4.3 Modals And Quick View ----*/
.ph-modal {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 34, 0.6);
  opacity: 0;
  transition: opacity 0.3s var(--ph-ease);
}
.ph-modal[hidden] {
  display: none;
}
.ph-modal.is-open {
  opacity: 1;
}
.ph-modal-box {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s var(--ph-ease);
}
.ph-modal.is-open .ph-modal-box {
  transform: none;
}
.ph-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.qv-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.qv-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: #FFFFFF;
}
.qv-media img {
  width: 100%;
  max-width: 420px;
  height: auto;
}
.qv-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 64px 40px 44px;
}
.qv-dept {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-accent-text);
}
.qv-name {
  font-family: var(--ph-ff-heading);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ph-heading);
}
.qv-price {
  margin: 0;
  font-size: 1.5rem;
}
.qv-facts {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ph-muted);
}
.qv-packs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.qv-buy {
  display: flex;
  gap: 12px;
  width: 100%;
}
.qv-buy[hidden] {
  display: none;
}
.qv-buy .ph-btn {
  flex: 1 1 auto;
}
.ph-modal.is-video .ph-modal-box {
  width: min(1100px, 100%);
  overflow: hidden;
  background: #000000;
}
.ph-modal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
}
.ph-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*======================
5. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.ph-lang {
  position: relative;
  flex-shrink: 0;
}
.ph-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: var(--ph-on-topbar);
  font-family: var(--ph-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ph-lang .lang-btn:hover,
.ph-lang .lang-btn[aria-expanded="true"] {
  background: rgba(16, 35, 94, 0.08);
  color: var(--ph-on-topbar);
}
.ph-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.ph-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.ph-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ph-lang.is-icon .lang-btn {
  height: 44px;
  padding: 0 15px;
  background: var(--ph-ice);
  color: var(--ph-heading);
}
.ph-lang.is-icon .lang-btn:hover,
.ph-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.ph-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 14px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
  font-family: var(--ph-ff-body);
  text-align: start;
  white-space: normal;
}
.ph-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.ph-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.ph-lang .lang-menu[hidden] {
  display: none;
}
.ph-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ph-line);
}
.ph-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ph-heading);
  font-family: var(--ph-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.ph-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ph-muted);
}
.ph-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--ph-accent-text);
  opacity: 0;
}
.ph-lang .lang-item:hover,
.ph-lang .lang-item[aria-pressed="true"] {
  background: var(--ph-ice);
}
.ph-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.ph-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.ph-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--ph-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ph-muted);
}

/*======================
6. Forms And Fields
========================*/
/*---- 6.1 Search ----*/
/* the base's search pill: ice field, the magnifier inside its right end */
.ph-search {
  position: relative;
}
.ph-search .search-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 58px 0 24px;
  border: 1px solid transparent;
  border-radius: 30px;
  background: var(--ph-field);
  color: var(--ph-heading);
  font-family: var(--ph-ff-body);
  font-size: 0.9375rem;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease), box-shadow 0.3s var(--ph-ease);
}
.ph-search .search-input::placeholder {
  color: var(--ph-muted);
}
.ph-search .search-input:focus {
  outline: 0;
  border-color: rgba(var(--ph-sky-rgb), 0.6);
  background: var(--ph-surface);
  box-shadow: 0 0 0 4px rgba(var(--ph-sky-rgb), 0.16);
}
.ph-search .search-input::-webkit-search-cancel-button {
  display: none;
}
.ph-search .search-go {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ph-heading);
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.ph-search .search-go:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-search.is-dark .search-input {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.ph-search.is-dark .search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.ph-search.is-dark .search-go {
  color: #FFFFFF;
}
.search-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 40;
  padding: 10px;
  border-radius: 18px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
}
.search-pop[hidden] {
  display: none;
}
.search-hit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--ph-heading);
}
.search-hit .mini-thumb {
  width: 52px;
  height: 52px;
}
.search-hit:hover,
.search-hit.is-on {
  background: var(--ph-ice);
}
.hit-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.hit-copy b {
  font-weight: 500;
}
.hit-copy small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.hit-price {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
}
.search-none {
  padding: 12px;
  font-size: 0.9375rem;
  color: var(--ph-muted);
}
.search-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--ph-ice);
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.search-all:hover {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}

/*---- 6.2 Fields ----*/
.ph-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ph-field > label,
.ph-legend {
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-field .req {
  color: var(--ph-sale);
}
.ph-input {
  position: relative;
}
.ph-input > i {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 1;
  font-size: 0.9375rem;
  color: var(--ph-accent-text);
  transform: translateY(-50%);
  pointer-events: none;
}
.ph-input.is-area > i {
  top: 22px;
  transform: none;
}
.ph-control {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 14px 20px 14px 48px;
  border: 1px solid var(--ph-line);
  border-radius: 28px;
  background: var(--ph-field);
  color: var(--ph-heading);
  font-family: var(--ph-ff-body);
  font-size: 0.9375rem;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease), box-shadow 0.3s var(--ph-ease);
}
textarea.ph-control {
  min-height: 150px;
  border-radius: 20px;
  resize: vertical;
}
.ph-control::placeholder {
  color: var(--ph-muted);
}
.ph-control:focus {
  outline: 0;
  border-color: rgba(var(--ph-sky-rgb), 0.6);
  background: var(--ph-surface);
  box-shadow: 0 0 0 4px rgba(var(--ph-sky-rgb), 0.16);
}
select.ph-control {
  padding-right: 46px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ph-input.is-select::after {
  content: "\f078";
  position: absolute;
  top: 50%;
  right: 20px;
  font-family: "Font Awesome 6 Free";
  font-size: 0.6875rem;
  font-weight: 900;
  color: var(--ph-heading);
  transform: translateY(-50%);
  pointer-events: none;
}
.ph-field.is-invalid .ph-control {
  border-color: var(--ph-sale);
}
.ph-hint {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.ph-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  cursor: pointer;
}
.ph-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ph-accent);
}
.ph-check.is-invalid {
  color: var(--ph-sale);
}
.form-status {
  margin: 12px 0 0;
  font-size: 0.9375rem;
}
.form-status.is-ok {
  color: var(--ph-ok);
}
.form-status.is-bad {
  color: var(--ph-sale);
}

/*---- 6.3 Steppers, Packs And Deliveries ----*/
.ph-stepper {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 54px;
  padding: 4px;
  border-radius: 28px;
  background: var(--ph-ice);
}
.ph-stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--ph-heading);
  font-size: 0.75rem;
  cursor: pointer;
}
.ph-stepper button:hover {
  background: var(--ph-surface);
}
.ph-stepper input {
  width: 42px;
  border: 0;
  background: transparent;
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-size: 1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.ph-stepper input::-webkit-outer-spin-button,
.ph-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ph-pack-set,
.ph-every-set {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ph-pack-set legend,
.ph-every-set legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-pack,
.ph-every {
  position: relative;
  cursor: pointer;
}
.ph-pack input,
.ph-every input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ph-pack > span {
  display: flex;
  flex-direction: column;
  min-width: 104px;
  padding: 10px 16px;
  border: 1.5px solid var(--ph-line);
  border-radius: 12px;
  background: var(--ph-surface);
  line-height: 1.3;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease);
}
.ph-pack b {
  font-weight: 600;
  color: var(--ph-heading);
}
.ph-pack small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.ph-pack input:checked + span {
  border-color: var(--ph-heading);
  background: var(--ph-ice);
}
.ph-pack input:focus-visible + span,
.ph-every input:focus-visible + span {
  outline: 2px solid var(--ph-sky);
  outline-offset: 2px;
}
.ph-every-set {
  flex-direction: column;
  gap: 6px;
}
.ph-every > span {
  position: relative;
  display: block;
  padding: 9px 14px 9px 42px;
  border-radius: 12px;
  font-size: 0.9375rem;
  color: var(--ph-heading);
}
.ph-every > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ph-line-strong);
  border-radius: 50%;
  transform: translateY(-50%);
}
.ph-every input:checked + span {
  background: var(--ph-peach);
}
.ph-every input:checked + span::before {
  border-color: var(--ph-accent);
  box-shadow: inset 0 0 0 4px var(--ph-surface);
  background: var(--ph-accent);
}

/*======================
7. Subheader
========================*/
/* inner pages: the base's ice band with the breadcrumb, now with the title, a lead and two
   floating capsules; service and pharmacy pages carry a photograph under the house wash */
.ph-subheader {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ph-subheader.is-ice {
  padding: 74px 0 80px;
  background: var(--ph-ice);
}
.ph-subheader.is-crumbs {
  padding: 18px 0;
  background: var(--ph-ice);
}
.ph-subheader .sub-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.sub-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.sub-crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  opacity: 0.6;
}
.sub-crumbs a {
  color: var(--ph-heading);
}
.sub-crumbs a:hover {
  color: var(--ph-accent-text);
}
.sub-title {
  margin: 18px 0 0;
}
.sub-lead {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
}
.sub-decor {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.sub-decor.is-a {
  top: 18%;
  right: 12%;
  width: 190px;
  height: 190px;
  background-image: url("../img/decor/capsule-amber.png");
  animation: ph-float 7s ease-in-out infinite;
}
.sub-decor.is-b {
  bottom: -26px;
  right: 26%;
  width: 120px;
  height: 120px;
  background-image: url("../img/decor/tablet-white.png");
  animation: ph-float 9s ease-in-out -3s infinite;
}
@keyframes ph-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-decor {
    animation: none;
  }
}
/* the photograph band: cover + the house navy-to-blue wash, white copy */
.ph-subheader.is-photo {
  padding: 120px 0 124px;
  background: var(--ph-navy);
}
.ph-subheader .sub-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.ph-subheader .sub-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-subheader.is-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.94) 0%, rgba(16, 35, 94, 0.78) 42%, rgba(41, 92, 170, 0.32) 100%);
}
.ph-subheader.is-photo .sub-crumbs ol,
.ph-subheader.is-photo .sub-crumbs a,
.ph-subheader.is-photo .sub-lead {
  color: rgba(255, 255, 255, 0.86);
}
.ph-subheader.is-photo .sub-crumbs a:hover {
  color: var(--ph-accent);
}
.ph-subheader.is-photo .sub-title {
  color: #FFFFFF;
}
.ph-subheader.is-photo .sub-decor.is-b {
  display: none;
}

/*======================
8. Product Cards
========================*/
/*---- 8.1 Product Card ----*/
/* The product card: hairline, 20px corners, the packshot on white, chips top left, three
   round actions down the right edge, then name, price, stars and a text action. The
   hover is the Shelf Pick: the pack tips and lifts as if taken from the shelf. */
.ph-product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: border-color 0.35s var(--ph-ease), box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-product:hover {
  border-color: var(--ph-line-strong);
  box-shadow: var(--ph-shadow);
  transform: translateY(-4px);
}
.product-media {
  position: relative;
  padding: 18px;
}
.product-chips {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.product-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-actions .ph-round {
  width: 34px;
  height: 34px;
  background: var(--ph-ice);
  font-size: 0.8125rem;
}
.product-actions .ph-round:hover,
.product-actions .ph-round.is-on {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.product-actions [data-wish].is-on {
  background: var(--ph-sale);
  color: #FFFFFF;
}
.product-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.86;
  overflow: hidden;
  border-radius: 14px;
  background: #FFFFFF;
}
.product-img img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  transition: transform 0.6s var(--ph-ease);
}
.ph-product:hover .product-img img {
  transform: translateY(-6px) rotate(-4deg) scale(1.04);
}
.product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 24px 24px;
}
.product-meta {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ph-muted);
}
.product-name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ph-heading);
}
.product-name:hover {
  color: var(--ph-accent-text);
}
.product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.product-price .ph-unit {
  display: inline;
}
.product-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 0 0;
  border: 0;
  background: transparent;
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.product-add > i {
  font-size: 0.8125rem;
}
.product-add:hover {
  color: var(--ph-accent-text);
}
.product-add.is-rx {
  color: var(--ph-rx);
}
.product-add.is-added {
  color: var(--ph-ok);
}
.ph-product.is-filtered-out {
  display: none;
}
/* rails: equal heights inside the slider */
.ph-rail .swiper-slide {
  height: auto;
}
/* room inside the slider for the hover lift and its shadow */
.ph-rail {
  margin: -20px -12px -44px;
  padding: 20px 12px 44px;
}

/*---- 8.2 Small Card ----*/
.ph-small-card {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  color: var(--ph-heading);
  transition: border-color 0.35s var(--ph-ease), box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-small-card:hover {
  border-color: var(--ph-line-strong);
  box-shadow: var(--ph-shadow);
  transform: translateY(-3px);
  color: var(--ph-heading);
}
.small-img {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border-radius: 14px;
  background: #FFFFFF;
}
.small-img img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  transition: transform 0.6s var(--ph-ease);
}
.ph-small-card:hover .small-img img {
  transform: rotate(-4deg) scale(1.05);
}
.small-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.small-name {
  font-weight: 500;
  line-height: 1.35;
}

/*======================
9. Hero
========================*/
/*---- 9.1 Full Hero ----*/
/* Home 01: full-bleed slides, a giant numeral over a two-line headline, the amber sticker
   with the offer's end date, square glass arrows at the edges, capsules drifting in front */
.ph-hero {
  position: relative;
  overflow: hidden;
  background: var(--ph-navy);
  isolation: isolate;
}
.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 660px;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.swiper-slide-active .hero-img img {
  transform: scale(1);
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.88) 0%, rgba(16, 35, 94, 0.62) 38%, rgba(41, 92, 170, 0.12) 74%, rgba(16, 35, 94, 0) 100%);
}
.hero-slide > .container {
  width: 100%;
}
.hero-copy {
  max-width: 660px;
  padding: 110px 0 130px;
  color: #FFFFFF;
}
.hero-num {
  display: block;
  font-family: var(--ph-ff-heading);
  font-size: var(--ph-fs-display);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.hero-title {
  margin: 14px 0 18px;
  font-size: clamp(2.375rem, 3.7vw, 3.625rem);
  font-weight: 500;
  line-height: 1.1;
  color: #FFFFFF;
}
.hero-lead {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.hero-sticker {
  position: absolute;
  right: 22%;
  bottom: 18%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: var(--ph-accent);
  color: var(--ph-navy);
  font-family: var(--ph-ff-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-8deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.hero-sticker span {
  font-size: 0.875rem;
}
.hero-sticker b {
  font-size: 1.375rem;
  font-weight: 700;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 62px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-size: 1.125rem;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.hero-arrow.is-prev {
  left: 0;
  border-radius: 0 var(--ph-radius) var(--ph-radius) 0;
}
.hero-arrow.is-next {
  right: 0;
  border-radius: var(--ph-radius) 0 0 var(--ph-radius);
}
.hero-arrow:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 5;
}
.hero-foot-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}
.hero-count {
  white-space: nowrap;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
}
.hero-count b {
  font-weight: 500;
  color: #FFFFFF;
}
.hero-dots,
.hero-foot .hero-dots.swiper-pagination-horizontal {
  display: flex;
  gap: 8px;
  width: auto;
}
.hero-dots .swiper-pagination-bullet {
  width: 28px;
  height: 4px;
  margin: 0 !important;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition: width 0.4s var(--ph-ease), background-color 0.4s var(--ph-ease);
}
.hero-dots .swiper-pagination-bullet-active {
  width: 54px;
  background: var(--ph-accent);
}
/* capsules drifting in front of the photographs (Decor Float) */
.hero-float {
  position: absolute;
  z-index: 4;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  translate: var(--ph-dx, 0) var(--ph-dy, 0);
  transition: translate 0.9s var(--ph-ease);
}
.hero-float.is-a {
  top: 13%;
  right: 7%;
  width: 190px;
  height: 190px;
  background-image: url("../img/decor/capsule-navy.png");
  animation: ph-float 8s ease-in-out infinite;
}
.hero-float.is-b {
  right: 34%;
  bottom: 9%;
  width: 120px;
  height: 120px;
  background-image: url("../img/decor/softgel-gold.png");
  animation: ph-float 6.5s ease-in-out -2s infinite;
}
.hero-float.is-c {
  top: 9%;
  right: 41%;
  width: 84px;
  height: 84px;
  background-image: url("../img/decor/tablet-white.png");
  animation: ph-float 9s ease-in-out -4s infinite;
}
@media (min-width: 1600px) {
  .hero-slide {
    min-height: 780px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-float {
    animation: none;
  }
  .hero-img img {
    transition: none;
  }
}

/*======================
10. Home 01 Main Store
========================*/
/*---- 10.1 Department Tiles ----*/
.ph-cat-tiles {
  padding: 20px 20px 0;
}
.tiles-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.ph-tile {
  position: relative;
  display: block;
  aspect-ratio: 1.27;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
  color: #FFFFFF;
}
.tile-img,
.tile-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tile-img img {
  object-fit: cover;
  transition: transform 1s var(--ph-ease);
}
.ph-tile:hover .tile-img img {
  transform: scale(1.07);
}
.tile-cap {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(16, 35, 94, 0.2);
  text-align: center;
  transition: background-color 0.4s var(--ph-ease);
}
.tile-cap b {
  font-family: var(--ph-ff-heading);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 1px 12px rgba(16, 35, 94, 0.35);
}
.tile-count {
  font-size: 0.8125rem;
  opacity: 0.9;
}
.tile-more {
  margin-top: 4px;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ph-tile:hover .tile-cap {
  background: rgba(16, 35, 94, 0.45);
}

/*---- 10.2 Sale Countdown ----*/
.sale-ends {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-countdown {
  display: flex;
  gap: 8px;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--ph-surface);
  line-height: 1;
}
.cd-cell b {
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.cd-cell small {
  margin-top: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-muted);
}

/*---- 10.3 Prescription Split ----*/
.rx-photo {
  position: relative;
  height: 100%;
  min-height: 600px;
}
.rx-photo > img {
  position: absolute;
  inset: 0;
}
.rx-photo::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, rgba(16, 35, 94, 0.55));
  pointer-events: none;
}
.rx-cards {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rx-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  border-radius: 18px;
  background: var(--ph-surface);
  color: var(--ph-text);
  box-shadow: 0 20px 50px rgba(16, 35, 94, 0.18);
  transition: transform 0.35s var(--ph-ease);
}
.rx-card.is-link:hover {
  color: var(--ph-text);
  transform: translateY(-4px);
}
.rx-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 1.375rem;
}
.rx-card-title {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.rx-quick {
  position: relative;
  width: 100%;
}
.rx-quick .ph-control {
  padding-left: 20px;
  padding-right: 58px;
}
.rx-quick .ph-round {
  position: absolute;
  top: 5px;
  right: 5px;
}
.rx-quick-out {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.rx-quick-out.is-ok {
  color: var(--ph-ok);
}
.rx-quick-out.is-bad {
  color: var(--ph-sale);
}
.rx-welcome {
  height: 100%;
  padding: 50px 46px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-peach);
}
.ph-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  margin: 30px 0;
}
.ph-facts > div {
  padding: 14px 0;
  border-top: 1px solid rgba(var(--ph-heading-rgb), 0.12);
}
.ph-facts dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-facts dd {
  margin: 4px 0 0;
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-facts.is-stack {
  grid-template-columns: 1fr;
  margin: 22px 0 26px;
}
.ph-facts.is-stack > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}
.ph-facts.is-stack dd {
  margin: 0;
  font-size: 1rem;
  text-align: right;
}
.rx-faces {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rx-faces small {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ph-heading);
}

/*---- 10.4 Department Links ----*/
.dept-link-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
}
.dept-link-col .ph-chip {
  margin-bottom: 18px;
  font-size: 0.75rem;
  padding: 6px 11px;
}
.dept-link-col .ph-chip:hover {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.dept-link-col li + li {
  margin-top: 8px;
}
.dept-link-col a:not(.ph-chip) {
  font-size: 1rem;
  color: var(--ph-text);
}
.dept-link-col a:not(.ph-chip):hover {
  color: var(--ph-accent-text);
}

/*---- 10.5 Tabs ----*/
.ph-tab-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -14px 0 40px;
}
.ph-tab {
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ph-ice);
  color: var(--ph-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.ph-tab:hover {
  background: var(--ph-ice-2);
}
.ph-tab.is-active {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.tab-pane[hidden] {
  display: none;
}

/*---- 10.6 Offer Banners ----*/
.ph-offer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 320px;
  padding: 40px 44px;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
}
.ph-offer.is-amber {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-offer.is-blue {
  background: #2F6FC0;
  color: #FFFFFF;
}
.offer-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.offer-num {
  margin-top: 14px;
  font-family: var(--ph-ff-heading);
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.ph-offer del {
  font-size: 1.125rem;
  opacity: 0.75;
}
.offer-title {
  margin: 10px 0 12px;
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}
.ph-offer .ph-link {
  color: inherit;
}
.offer-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 250px;
  overflow: hidden;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 24px 50px rgba(16, 35, 94, 0.18);
}
.offer-img img {
  width: 78%;
  height: auto;
  transition: transform 0.7s var(--ph-ease);
}
.ph-offer:hover .offer-img img {
  transform: rotate(-6deg) scale(1.06);
}

/*---- 10.7 Free Delivery Basket ----*/
.basket-card {
  position: sticky;
  top: 100px;
  padding: 40px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
}
.basket-meter {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 26px 0 20px;
}
.meter-ring {
  --ph-fill: 0%;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(var(--ph-accent) var(--ph-fill), var(--ph-ice-2) 0);
}
.meter-ring.is-full {
  background: conic-gradient(var(--ph-ok) 100%, var(--ph-ice-2) 0);
}
.meter-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--ph-surface);
  line-height: 1.1;
}
.meter-face b {
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.meter-face small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.basket-goal {
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ph-heading);
}
.basket-goal.is-done {
  color: var(--ph-ok);
}
.basket-thumbs {
  display: flex;
  gap: 8px;
  min-height: 56px;
  margin-bottom: 24px;
}
.basket-thumbs li {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: 12px;
  background: #FFFFFF;
}
.basket-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*---- 10.8 Care Club ----*/
.ph-club {
  position: relative;
  overflow: hidden;
  background: var(--ph-navy);
  isolation: isolate;
}
.club-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.club-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-club::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.94) 0%, rgba(16, 35, 94, 0.82) 50%, rgba(41, 92, 170, 0.62) 100%);
}
.ph-club .ph-head .title {
  color: #FFFFFF;
}
.ph-club .ph-eyebrow {
  color: var(--ph-accent);
}
.ph-club .ph-lead {
  color: rgba(255, 255, 255, 0.86);
}
.ph-plan {
  position: relative;
  height: 100%;
  padding: 36px 34px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: transform 0.35s var(--ph-ease), box-shadow 0.35s var(--ph-ease);
}
.ph-plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--ph-shadow-lg);
}
.ph-plan.is-featured {
  box-shadow: inset 0 0 0 2px var(--ph-accent);
}
.plan-fee {
  margin: 18px 0 4px;
  font-family: var(--ph-ff-heading);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ph-heading);
}
.plan-fee small {
  margin-left: 6px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ph-muted);
}
.plan-name {
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}

/*---- 10.9 Posts ----*/
.ph-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-post:hover {
  box-shadow: var(--ph-shadow);
  transform: translateY(-4px);
}
.post-img {
  display: block;
  aspect-ratio: 1.5;
  border-radius: 0;
}
.ph-post:hover .post-img img {
  transform: scale(1.06);
}
.post-date {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 62px;
  border-radius: 12px;
  background: var(--ph-surface);
  color: var(--ph-muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.post-date b {
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.post-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  padding: 26px 28px 28px;
}
.post-meta {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.post-meta a {
  font-weight: 600;
  color: var(--ph-accent-text);
}
.post-title {
  margin: 0;
  font-size: 1.3125rem;
  line-height: 1.35;
}
.post-title a:hover {
  color: var(--ph-accent-text);
}
.post-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.post-author img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/*---- 10.10 Voices And Newsletter ----*/
.voices-card {
  height: 100%;
  padding: 44px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
}
.voices-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.voices-head .title {
  margin: 0;
}
.ph-voice {
  margin: 0;
}
.ph-voice blockquote {
  margin: 18px 0 26px;
  font-family: var(--ph-ff-heading);
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ph-heading);
}
.ph-voice figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ph-voice figcaption img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.ph-voice figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.ph-voice figcaption b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-voice figcaption small {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.ph-newsletter {
  position: relative;
  height: 100%;
  padding: 44px;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
}
.news-decor {
  position: absolute;
  top: -30px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: url("../img/decor/capsule-amber.png") no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
}
.ph-newsletter .title {
  position: relative;
  max-width: 340px;
}
.ph-newsletter p {
  position: relative;
  max-width: 380px;
}
.news-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.news-form .ph-control {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.news-form .ph-control::placeholder {
  color: rgba(255, 255, 255, 0.62);
}
.news-form .ph-input > i {
  color: var(--ph-accent);
}
.news-form .form-status.is-ok {
  color: #7EE2AE;
}
.news-form .form-status.is-bad {
  color: #FF9DB1;
}

.voices-dots {
  position: relative;
  bottom: auto !important;
  margin-top: 30px;
  text-align: left;
}
.voices-dots .swiper-pagination-bullet,
.ph-dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--ph-line-strong);
  opacity: 1;
}
.voices-dots .swiper-pagination-bullet-active,
.ph-dots .swiper-pagination-bullet-active {
  width: 28px;
  border-radius: 6px;
  background: var(--ph-accent);
}

/*---- 10.11 Brand Strip ----*/
.ph-brands {
  padding: 50px 0;
  overflow: hidden;
}
.brands-track {
  overflow: hidden;
}
.ph-brand-row {
  display: flex;
  width: max-content;
  gap: 90px;
  animation: ph-marquee 36s linear infinite;
}
.ph-brand-row:hover {
  animation-play-state: paused;
}
.brand-mark {
  font-family: var(--ph-ff-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ph-accent-text);
  opacity: 0.85;
  white-space: nowrap;
}
@keyframes ph-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-brand-row {
    animation: none;
  }
}

/*---- 10.12 Store Visit ----*/
.visit-copy .title {
  margin-bottom: 0;
}
.ph-store-card {
  margin-top: 30px;
  padding: 30px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.store-addr {
  margin: 0 0 12px;
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  color: var(--ph-heading);
}
.store-status {
  margin: 0 0 12px;
  color: var(--ph-heading);
}
.ph-store-card .hours-list {
  margin-bottom: 22px;
}
.ph-map {
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.ph-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
}

/*======================
11. Home 02 Pharmacy
========================*/
/*---- 11.1 Promo Strip ----*/
.ph-strip-wrap {
  padding-top: 26px;
}
.ph-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 96px;
  padding: 18px 34px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ph-ice-2);
  isolation: isolate;
}
.strip-img {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.strip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.ph-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.82) 0%, rgba(16, 35, 94, 0.45) 55%, rgba(16, 35, 94, 0) 100%);
}
.strip-off {
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: #FFFFFF;
}
.strip-caps {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/*---- 11.2 Boxed Hero ----*/
.ph-hero-boxed {
  padding-top: 26px;
}
.boxed-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-navy);
}
.hero-slide.is-boxed {
  min-height: 560px;
}
.hero-slide.is-boxed .hero-copy {
  max-width: 620px;
  padding: 90px 0 110px 120px;
}
.hero-slide.is-boxed .ph-eyebrow {
  color: #FFFFFF;
}
.hero-slide.is-boxed::before {
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.78) 0%, rgba(16, 35, 94, 0.45) 45%, rgba(16, 35, 94, 0) 80%);
}
.boxed-frame .hero-arrow {
  border-radius: var(--ph-radius);
}
.boxed-frame .hero-arrow.is-prev {
  left: 22px;
}
.boxed-frame .hero-arrow.is-next {
  right: 22px;
}
.boxed-foot {
  position: absolute;
  left: 120px;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
}

/*---- 11.3 Rx Bar ----*/
.rx-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
}
.rx-bar-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 34px 32px;
  color: var(--ph-on-night);
  transition: background-color 0.35s var(--ph-ease);
}
.rx-bar-item + .rx-bar-item {
  border-left: 1px solid var(--ph-line-night);
}
a.rx-bar-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ph-on-night);
}
.rx-bar-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ph-accent);
  color: var(--ph-navy);
  font-size: 1.5rem;
}
.rx-bar-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rx-bar-copy b {
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: #FFFFFF;
}
.rx-bar .rx-quick {
  margin-top: 6px;
}
.rx-bar .rx-quick .ph-control {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.rx-bar .rx-quick .ph-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.rx-bar .rx-quick .ph-round {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.rx-bar .rx-quick-out {
  color: rgba(255, 255, 255, 0.66);
}
.rx-bar .rx-quick-out.is-ok {
  color: #7EE2AE;
}
.rx-bar .rx-quick-out.is-bad {
  color: #FF9DB1;
}
.rx-bar .rx-quick-out a {
  color: var(--ph-accent);
  text-decoration: underline;
}

/*---- 11.4 Promo Tiles ----*/
.promo-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  min-height: 230px;
  padding: 30px;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
  isolation: isolate;
}
.promo-tile.is-photo {
  color: #FFFFFF;
}
.tile-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ph-ease);
}
.promo-tile.is-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.82) 0%, rgba(16, 35, 94, 0.5) 55%, rgba(16, 35, 94, 0.1) 100%);
}
.promo-tile:hover .tile-photo img {
  transform: scale(1.06);
}
.promo-tile.is-mint {
  background: #D7EEF0;
  color: #0E4B57;
}
.promo-tile.is-sky {
  background: #CFE4F8;
  color: #10235E;
}
.promo-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.promo-title {
  margin: 8px 0 12px;
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}
.promo-price {
  font-family: var(--ph-ff-heading);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.promo-tile del {
  opacity: 0.7;
}
.promo-pack {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  background: #FFFFFF;
}
.promo-pack img {
  width: 80%;
  height: auto;
  transition: transform 0.6s var(--ph-ease);
}
.promo-tile:hover .promo-pack img {
  transform: rotate(-6deg) scale(1.06);
}

/*---- 11.5 Pill Organizer ----*/
.organizer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 16px;
  border-radius: 22px;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
  perspective: 700px;
}
.org-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 168px;
}
.org-lid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px 12px 6px 6px;
  background: var(--ph-sky);
  color: #FFFFFF;
  font-family: var(--ph-ff-heading);
  font-size: 0.875rem;
  transform-origin: 50% 0;
  transition: transform 0.6s var(--ph-ease), background-color 0.6s var(--ph-ease);
}
.org-cell:nth-child(6) .org-lid,
.org-cell:nth-child(7) .org-lid {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.org-well {
  position: relative;
  flex: 1 1 auto;
  margin-top: 6px;
  border-radius: 8px 8px 14px 14px;
  background: var(--ph-ice);
  box-shadow: inset 0 6px 14px rgba(16, 35, 94, 0.08);
}
.org-pill {
  position: absolute;
  left: 50%;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
  transform: translateY(-50px) rotate(-30deg);
  transition: opacity 0.4s var(--ph-ease), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.org-pill.is-am {
  top: 14px;
}
.org-pill.is-pm {
  bottom: 12px;
  transition-delay: 0.12s;
}
.pill-capsule-amber-flat { background-image: url("../img/decor/capsule-amber-flat.png"); }
.pill-capsule-navy { background-image: url("../img/decor/capsule-navy.png"); }
.pill-softgel-gold { background-image: url("../img/decor/softgel-gold.png"); }
.pill-tablet-white { background-image: url("../img/decor/tablet-white.png"); }
.pill-tablet-pink { background-image: url("../img/decor/tablet-pink.png"); }
.org-cell.is-filled .org-lid {
  transform: rotateX(-62deg) translateY(-6px);
}
.org-cell.is-filled .org-pill {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
.organizer-note {
  margin: 18px 0 0;
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ph-heading);
}
/* the tool cards: a form that answers as you type */
.ph-tool {
  padding: 40px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
}
.tool-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.tool-head i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 1.375rem;
}
.tool-head b {
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.tool-out {
  margin: 26px 0;
}

/*---- 11.6 Consultation Band ----*/
.ph-consult {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  isolation: isolate;
}
.consult-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.consult-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-consult::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.95) 0%, rgba(16, 35, 94, 0.82) 48%, rgba(41, 92, 170, 0.55) 100%);
}
.ph-consult .ph-lead {
  color: rgba(255, 255, 255, 0.85);
}
.consult-quote {
  margin: 34px 0 0;
  padding: 26px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}
.consult-quote blockquote {
  margin: 0 0 18px;
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: #FFFFFF;
}
.consult-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.consult-quote figcaption span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.consult-quote figcaption b {
  color: #FFFFFF;
  font-weight: 600;
}
.consult-quote small {
  color: rgba(255, 255, 255, 0.7);
}
.consult-card {
  padding: 36px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
  color: var(--ph-text);
}
.consult-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
}
.consult-card-head b {
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.consult-card-head span {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.slot-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.slot-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: var(--ph-ice);
  color: var(--ph-heading);
  cursor: pointer;
  line-height: 1.3;
}
.slot-day b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
}
.slot-day small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.slot-day.is-active {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.slot-day.is-active small {
  color: inherit;
  opacity: 0.8;
}
.slot-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.slot {
  padding: 10px 6px;
  border: 0;
  border-radius: 10px;
  background: var(--ph-surface-2);
  box-shadow: inset 0 0 0 1px var(--ph-line);
  color: var(--ph-heading);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.slot:hover {
  background: var(--ph-peach);
}
.slot.is-held {
  background: var(--ph-accent);
  color: var(--ph-navy);
  box-shadow: none;
}
.slot-pick {
  margin: 18px 0 20px;
  font-size: 0.9375rem;
}
.sale-ends.is-ice .cd-cell {
  background: var(--ph-ice);
}

/*---- 11.7 Store Row ----*/
.ph-store-mini {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  color: var(--ph-text);
  transition: box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-store-mini:hover {
  color: var(--ph-text);
  box-shadow: var(--ph-shadow);
  transform: translateY(-4px);
}
.store-mini-img {
  aspect-ratio: 1.5;
  border-radius: 0;
}
.ph-store-mini:hover .store-mini-img img {
  transform: scale(1.06);
}
.store-mini-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px 24px;
}
.store-mini-body b {
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.store-mini-body .ph-status {
  margin-top: 8px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--ph-heading);
}
.store-mini-body .ph-status [data-hs-text] {
  width: 100%;
  padding-left: 17px;
  color: var(--ph-muted);
}

/*======================
12. Home 03 Supplements And Wellness
========================*/
/*---- 12.1 Centred Hero ----*/
.ph-hero.is-centre .hero-slide {
  min-height: 760px;
  justify-content: center;
  text-align: center;
}
.ph-hero.is-centre .hero-slide::before {
  background: radial-gradient(ellipse at center, rgba(16, 35, 94, 0.62) 0%, rgba(16, 35, 94, 0.35) 55%, rgba(16, 35, 94, 0.15) 100%);
}
.ph-hero.is-centre .hero-copy {
  max-width: 820px;
  margin: 0 auto;
  padding: 150px 0 140px;
}
.ph-hero.is-centre .hero-title {
  font-size: clamp(3rem, 6vw, 6.25rem);
  line-height: 1.02;
}
.ph-hero.is-centre .hero-lead {
  margin-left: auto;
  margin-right: auto;
}
.ph-hero.is-centre .ph-eyebrow {
  color: #FFFFFF;
}
.ph-hero.is-centre .ph-actions {
  justify-content: center;
}
.ph-hero.is-centre .hero-foot {
  bottom: 70px;
}
.ph-hero.is-centre .hero-foot-inner {
  justify-content: center;
}

/*---- 12.2 Features Strip ----*/
/* one strip with dividers, docked on the hero's lower edge */
.ph-features {
  position: relative;
  z-index: 6;
  margin-top: -28px;
}
.features-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow-lg);
}
.feature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 26px;
}
.feature + .feature {
  border-left: 1px solid var(--ph-line);
}
.feature > i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 1.5rem;
}
.feature span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.feature b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.feature small {
  font-size: 0.875rem;
  color: var(--ph-muted);
}

/*---- 12.3 Round Categories ----*/
.round-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.round-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 18px 30px;
  margin-top: 90px;
  border-radius: 22px;
  background: var(--ph-peach);
  color: var(--ph-heading);
  text-align: center;
  transition: transform 0.35s var(--ph-ease);
}
.round-cat:hover {
  color: var(--ph-heading);
  transform: translateY(-6px);
}
.round-img {
  display: block;
  width: 176px;
  height: 176px;
  margin-top: -90px;
  overflow: hidden;
  border: 8px solid var(--ph-bg);
  border-radius: 50%;
}
.round-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ph-ease);
}
.round-cat:hover .round-img img {
  transform: scale(1.08);
}
.round-cat b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
}

/*---- 12.4 Summer Card And Compact Cards ----*/
.summer-card {
  display: block;
  height: 100%;
  min-height: 520px;
}
.summer-card > img {
  position: absolute;
  inset: 0;
}
.summer-card:hover > img {
  transform: scale(1.05);
}
.summer-copy {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.summer-copy .ph-eyebrow {
  margin: 0;
  color: #FFFFFF;
}
.summer-title {
  margin-bottom: 18px;
  font-family: var(--ph-ff-heading);
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.ph-product.is-compact .product-meta,
.ph-product.is-compact .product-add {
  display: none;
}
.ph-product.is-compact .product-body {
  padding: 0 20px 20px;
}
.ph-product.is-compact .product-media {
  padding: 14px 14px 6px;
}

/*---- 12.5 Your Day Dosed ----*/
.day-clock {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 40px;
  background: var(--ph-ice);
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
}
.day-clock i {
  color: var(--ph-accent-text);
}
.day-clock b {
  font-weight: 500;
}
.day-viewport {
  overflow: hidden;
  padding: 10px 0 20px;
}
.ph-day.is-static .day-viewport {
  overflow-x: auto;
}
.day-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0 max(24px, calc((100vw - 1320px) / 2 + 12px));
  will-change: transform;
}
.day-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 500px;
  min-height: 460px;
  padding: 38px;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
  color: var(--ph-navy);
  transition: transform 0.5s var(--ph-ease), box-shadow 0.5s var(--ph-ease);
}
.day-panel.is-now {
  transform: translateY(-8px);
  box-shadow: var(--ph-shadow-lg);
}
.day-panel.is-morning {
  background: linear-gradient(160deg, #FFE7CF 0%, #FFF4E8 60%, #E4EDF5 100%);
}
.day-panel.is-midday {
  background: linear-gradient(160deg, #CFE4F8 0%, #EFF4F8 100%);
}
.day-panel.is-evening {
  background: linear-gradient(160deg, #FFC27A 0%, #FFE0D2 100%);
}
.day-panel.is-night {
  background: linear-gradient(160deg, #1C3684 0%, #10235E 100%);
  color: #FFFFFF;
}
.day-time {
  margin: 0;
  font-family: var(--ph-ff-heading);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: inherit;
}
.day-part {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.day-why {
  margin: 14px 0 24px;
  font-size: 1.0625rem;
  line-height: 1.55;
  opacity: 0.88;
}
.day-products {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.day-product {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  color: #10235E;
}
.day-product .mini-copy {
  flex: 1 1 auto;
}
.day-product .ph-price {
  color: #10235E;
}
.day-product .ph-round.is-tonal {
  background: #FFFFFF;
  color: #10235E;
}
.day-product .ph-round:hover {
  background: var(--ph-accent);
  color: #10235E;
}
.day-panel.is-night .day-product {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.day-panel.is-night .day-product .ph-price,
.day-panel.is-night .day-product b {
  color: #FFFFFF;
}

/*---- 12.6 Voices Over Photo ----*/
.ph-voices-photo {
  position: relative;
  overflow: hidden;
  background: var(--ph-navy);
  isolation: isolate;
}
.voices-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.voices-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-voices-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(16, 35, 94, 0.88), rgba(41, 92, 170, 0.62));
}
.ph-voices-photo .title {
  color: #FFFFFF;
}
.ph-voices-photo .ph-eyebrow {
  color: var(--ph-accent);
}
/* readable glass: navy-tinted, not white over a photograph */
.voices-glass .ph-voice {
  height: 100%;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ph-radius-card);
  background: rgba(16, 35, 94, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.voices-glass .swiper-slide {
  height: auto;
}
.voices-glass .ph-voice blockquote,
.voices-glass .ph-voice figcaption b {
  color: #FFFFFF;
}
.voices-glass .ph-voice blockquote {
  font-size: 1.1875rem;
}
.voices-glass .ph-voice figcaption small {
  color: rgba(255, 255, 255, 0.7);
}
.voices-dots.is-centre {
  text-align: center;
}

/*---- 12.7 Subscribe And Save ----*/
.sub-pick {
  margin-top: 28px;
}
.sub-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sub-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 30px 26px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.sub-plan:first-child {
  background: var(--ph-peach);
  box-shadow: inset 0 0 0 2px var(--ph-accent);
}
.sub-plan > b {
  margin-top: 8px;
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.sub-price {
  font-family: var(--ph-ff-heading);
  font-size: 2.125rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ph-heading);
}
.sub-price small {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ph-muted);
}
.sub-off {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.sub-year {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--ph-heading-rgb), 0.12);
  width: 100%;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-ok);
}
.sub-note {
  margin: 20px 0 0;
  font-size: 0.9375rem;
  color: var(--ph-muted);
}

/*======================
13. Home 04 Skincare And Beauty
========================*/
/*---- 13.1 Panels Hero ----*/
.ph-panels-hero {
  position: relative;
  padding: 50px 0 0;
  overflow: hidden;
}
.panels-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 40px;
}
.panels-title {
  margin: 0;
  font-size: clamp(2.375rem, 3.8vw, 3.75rem);
  line-height: 1.08;
}
.panels-side p {
  max-width: 460px;
  margin-bottom: 22px;
  font-size: 1.125rem;
}
.panels-viewport {
  padding: 0 20px;
}
.ph-panels .swiper-slide {
  height: auto;
}
.ph-panel {
  position: relative;
  display: block;
  height: 560px;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
  color: #FFFFFF;
}
.panel-img,
.panel-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.panel-img img {
  object-fit: cover;
  transition: transform 1.2s var(--ph-ease);
}
.ph-panel:hover .panel-img img {
  transform: scale(1.06);
}
.panel-cap {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  border-radius: 18px;
  background: rgba(20, 20, 20, 0.18);
  text-align: center;
}
.panel-cap b {
  font-family: var(--ph-ff-heading);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.hero-float.is-skin-a {
  top: 290px;
  right: 3%;
  width: 120px;
  height: 120px;
  background-image: url("../img/decor/tablet-pink.png");
  animation: ph-float 8s ease-in-out infinite;
}

/*---- 13.2 Beauty Glyph Row ----*/
.glyph-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 8px;
  border-radius: 18px;
  color: var(--ph-heading);
  text-align: center;
  transition: background-color 0.35s var(--ph-ease), color 0.35s var(--ph-ease);
}
.glyph i {
  font-size: 3.5rem;
  transition: transform 0.45s var(--ph-ease);
}
.glyph span {
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  font-weight: 500;
}
.glyph:hover {
  background: var(--ph-peach);
  color: var(--ph-heading);
}
.glyph:hover i {
  transform: rotate(-8deg) scale(1.08);
  color: var(--ph-accent-text);
}

/*---- 13.3 Offers Mosaic ----*/
.ph-mosaic {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 20px;
}
.mosaic-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
  color: var(--ph-heading);
}
.mosaic-tile.is-tall {
  grid-row: 1 / 3;
}
.mosaic-tile.ph-cover > img {
  position: absolute;
  inset: 0;
}
.mosaic-tile.ph-cover {
  color: #FFFFFF;
}
.mosaic-tile.ph-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 35%, rgba(20, 20, 20, 0.6) 100%);
}
.mosaic-tile.ph-cover:hover > img {
  transform: scale(1.06);
}
.mosaic-tile.is-blush {
  background: var(--ph-blush);
}
.mosaic-tile.is-sand {
  background: #F4E6D4;
}
html[data-theme="dark"] .mosaic-tile.is-sand {
  background: #2A2220;
}
.mosaic-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 28px;
}
.mosaic-copy b {
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}
.mosaic-copy .ph-link {
  color: inherit;
}
.mosaic-num {
  font-family: var(--ph-ff-heading);
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1;
}
.mosaic-pack {
  position: absolute;
  top: 50%;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  background: #FFFFFF;
  transform: translateY(-50%);
}
.mosaic-pack img {
  width: 82%;
  height: auto;
  transition: transform 0.6s var(--ph-ease);
}
.mosaic-tile:hover .mosaic-pack img {
  transform: rotate(-6deg) scale(1.06);
}

/*---- 13.4 AM To PM Routine ----*/
.ph-routine {
  --ph-am: #F8EDEA;
  --ph-pm: #2B1D2F;
  background: var(--ph-am);
  transition: color 0.6s var(--ph-ease);
}
html[data-theme="dark"] .ph-routine {
  --ph-am: #2A1F2B;
  --ph-pm: #120B14;
}
.routine-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 44px;
}
.routine-head .title {
  margin-bottom: 0;
  transition: color 0.6s var(--ph-ease);
}
.routine-lead {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 1.125rem;
  transition: color 0.6s var(--ph-ease);
}
.routine-play {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
}
.play-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--ph-accent);
  color: #141414;
  font-size: 1.125rem;
}
.play-ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1.5px solid rgba(var(--ph-accent-rgb), 0.6);
  border-radius: 50%;
  animation: ph-ring 2.2s var(--ph-ease) infinite;
}
@keyframes ph-ring {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .play-ring::after {
    animation: none;
  }
}
.routine-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.routine-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  border-radius: var(--ph-radius-card);
  background: rgba(255, 255, 255, 0.72);
  color: #141414;
  transition: transform 0.5s var(--ph-ease), background-color 0.6s var(--ph-ease), box-shadow 0.5s var(--ph-ease);
}
.routine-step p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #4B4446;
}
.step-n {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #A55A2C;
}
.step-name {
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
}
.step-product {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: #141414;
}
.step-product .mini-thumb {
  width: 52px;
  height: 52px;
}
.step-product .mini-copy {
  min-width: 0;
}
.step-product .mini-copy b {
  overflow: hidden;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-product .ph-price {
  font-size: 0.8125rem;
  white-space: nowrap;
  color: #141414;
}
.routine-step.is-now {
  transform: translateY(-10px);
  box-shadow: 0 24px 50px rgba(20, 20, 20, 0.16);
  background: #FFFFFF;
}
.ph-routine.is-pm .routine-head .title,
.ph-routine.is-pm .routine-lead,
.ph-routine.is-pm .routine-play {
  color: #FFFFFF;
}
.ph-routine.is-pm .ph-eyebrow {
  color: var(--ph-accent);
}
.ph-routine.is-pm .routine-step.is-am {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.ph-routine.is-pm .routine-step.is-am p,
.ph-routine.is-pm .routine-step.is-am .step-product,
.ph-routine.is-pm .routine-step.is-am .ph-price {
  color: rgba(255, 255, 255, 0.8);
}
.voices-card.is-ice {
  background: var(--ph-ice);
}

/*======================
14. Shop
========================*/
/*---- 14.1 Sidebar ----*/
/* the base's ice sidebar: one rounded column holding every filter */
.shop-sidebar {
  position: sticky;
  top: 96px;
  padding: 28px 24px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.side-widget + .side-widget,
.side-promo + .side-widget {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--ph-heading-rgb), 0.1);
}
.side-promo {
  display: block;
  margin-top: 28px;
  aspect-ratio: 500 / 304;
}
.side-promo > img {
  position: absolute;
  inset: 0;
}
.side-promo-copy {
  position: absolute;
  left: 18px;
  top: 14px;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  line-height: 1.1;
}
.side-promo-num {
  font-family: var(--ph-ff-heading);
  font-size: 2.25rem;
  font-weight: 600;
}
.side-promo-copy b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
}
.side-h {
  display: block;
  margin-bottom: 14px;
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-search.is-side .search-input {
  height: 46px;
  background: var(--ph-surface);
}
.ph-search.is-side .search-go {
  top: 3px;
  right: 3px;
}
.side-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-list.is-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.shop-check {
  width: 100%;
  font-size: 0.9375rem;
  color: var(--ph-text);
}
.shop-check input {
  margin-top: 3px;
}
.shop-check span {
  flex: 1 1 auto;
}
.shop-check b {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ph-muted);
}
.side-reset {
  margin-top: 16px;
  border: 0;
  background-color: transparent;
  font-size: 0.875rem;
  cursor: pointer;
}
.side-minis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-minis .mini-thumb {
  width: 56px;
  height: 56px;
}
.side-minis .ph-price {
  font-size: 0.9375rem;
}
/* the price range: a track that fills to the handle */
.ph-range {
  --ph-fill: 100%;
  width: 100%;
  height: 6px;
  margin: 8px 0 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ph-heading) var(--ph-fill), var(--ph-line-strong) var(--ph-fill));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ph-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 4px solid var(--ph-surface);
  border-radius: 50%;
  background: var(--ph-accent);
  box-shadow: 0 2px 8px rgba(16, 35, 94, 0.25);
  -webkit-appearance: none;
  appearance: none;
}
.ph-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 4px solid var(--ph-surface);
  border-radius: 50%;
  background: var(--ph-accent);
}
.range-read {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.range-read b {
  font-weight: 600;
  color: var(--ph-heading);
}

/*---- 14.2 Toolbar And Filter Bar ----*/
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 28px;
}
.shop-count {
  margin: 0;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.shop-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-views {
  display: flex;
  gap: 6px;
}
.page-shop .shop-views a:first-child,
.page-shop-four-columns .shop-views a:first-child,
.page-shop-wide .shop-views a:first-child,
.page-shop-list .shop-views a:last-child {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.shop-sort .ph-control {
  min-height: 46px;
  min-width: 230px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.shop-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  margin-bottom: 26px;
  padding: 18px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-chip {
  position: relative;
  cursor: pointer;
}
.shop-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.shop-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 30px;
  background: var(--ph-surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ph-heading);
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.shop-chip span i {
  font-size: 1rem;
  color: var(--ph-accent-text);
}
.shop-chip input:checked + span {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.shop-chip input:checked + span i {
  color: inherit;
}
.shop-chip input:focus-visible + span {
  outline: 2px solid var(--ph-sky);
  outline-offset: 2px;
}
.filterbar-end {
  flex: 0 1 320px;
}
.shop-fluid {
  padding-left: 40px;
  padding-right: 40px;
}

/*---- 14.3 Grid, List And Pager ----*/
.shop-grid > .is-filtered-out {
  display: none;
}
/* the list row: packshot left, facts in the middle, price and action right */
.ph-product.is-row {
  flex-direction: row;
  align-items: center;
}
.ph-product.is-row .product-media {
  flex: 0 0 240px;
}
.ph-product.is-row .product-actions {
  top: 18px;
  right: auto;
  left: 200px;
}
.ph-product.is-row .product-body {
  padding: 26px 30px 26px 10px;
}
.ph-product.is-row .product-name {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
}
.ph-product.is-row .product-add {
  margin-top: 10px;
}
.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 70px 20px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
  text-align: center;
}
.shop-empty[hidden] {
  display: none;
}
.shop-empty > i {
  font-size: 3rem;
  color: var(--ph-accent-text);
}
.shop-empty b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ph-pager {
  margin-top: 50px;
}
.ph-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ph-pager button,
.ph-pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ph-ice);
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s var(--ph-ease), color 0.3s var(--ph-ease);
}
.ph-pager button:hover,
.ph-pager a:hover {
  background: var(--ph-ice-2);
  color: var(--ph-heading);
}
.ph-pager [aria-current="page"] {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.ph-pager button[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/*======================
15. Product Pages
========================*/
/*---- 15.1 Gallery ----*/
.pd-gallery {
  position: sticky;
  top: 96px;
}
.pd-gallery .product-chips {
  top: 22px;
  left: 22px;
}
.pd-main {
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: #FFFFFF;
}
.pd-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.92;
  cursor: zoom-in;
}
.pd-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pd-thumbs {
  margin-top: 14px;
}
.pd-thumb {
  display: block;
  overflow: hidden;
  border: 2px solid var(--ph-line);
  border-radius: 14px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.3s var(--ph-ease);
}
.pd-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover;
}
.pd-thumbs .swiper-slide-thumb-active .pd-thumb {
  border-color: var(--ph-heading);
}

/*---- 15.2 Summary ----*/
.pd-brand {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-accent-text);
}
.pd-name {
  margin: 10px 0 12px;
  font-size: clamp(2rem, 3vw, 2.75rem);
}
.pd-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.pd-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 20px 0 14px;
}
.pd-price {
  margin: 0;
  font-size: 2rem;
}
.pd-price del {
  font-size: 1.125rem;
}
.pd-price-row .ph-unit {
  display: inline;
  font-size: 0.9375rem;
}
.pd-plabel {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.pd-lead {
  margin-bottom: 0;
}
.pd-facts {
  margin: 22px 0;
}
.pd-summary .ph-pack-set,
.pd-summary .ph-every-set {
  margin-top: 22px;
}
.pd-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--ph-peach);
  font-size: 0.875rem;
  color: var(--ph-heading);
}
.pd-dates[hidden] {
  display: none;
}
.pd-stock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 22px 0 0;
  font-size: 0.9375rem;
}
.pd-stock .ph-status {
  color: var(--ph-ok);
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.pd-add {
  flex: 1 1 200px;
}
.pd-buy .ph-round {
  width: 54px;
  height: 54px;
}
.pd-buy [data-wish].is-on {
  background: var(--ph-sale);
  color: #FFFFFF;
}
.pd-delivery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ph-ice);
}
.pd-delivery li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--ph-heading);
}
.pd-delivery i {
  font-size: 1.375rem;
  color: var(--ph-accent-text);
}
.pd-rx-note {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ph-rx-soft);
  color: var(--ph-heading);
}
.pd-rx-note > i {
  font-size: 1.75rem;
  color: var(--ph-rx);
}
.pd-rx-note span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pd-rx-note b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
}
.pd-meta {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ph-line);
  font-size: 0.9375rem;
}
.pd-meta div {
  display: flex;
  gap: 10px;
  padding: 3px 0;
}
.pd-meta dt {
  min-width: 90px;
  font-weight: 600;
  color: var(--ph-heading);
}
.pd-meta dd {
  margin: 0;
}

/*---- 15.3 Product Tabs ----*/
.ph-tab-row.is-line {
  justify-content: flex-start;
  gap: 0;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--ph-line);
}
.ph-tab-row.is-line .ph-tab {
  position: relative;
  padding: 16px 26px;
  border-radius: 0;
  background: transparent;
  font-family: var(--ph-ff-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ph-muted);
}
.ph-tab-row.is-line .ph-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ph-accent);
  transform: scaleX(0);
  transition: transform 0.35s var(--ph-ease);
}
.ph-tab-row.is-line .ph-tab.is-active {
  color: var(--ph-heading);
}
.ph-tab-row.is-line .ph-tab.is-active::after {
  transform: scaleX(1);
}
.pd-pane-h {
  display: block;
  margin-bottom: 18px;
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.pd-text {
  max-width: 860px;
}
.pd-spec {
  max-width: 640px;
  margin-top: 10px;
}
.pd-video {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 40px;
}
.pd-video-btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.pd-video-btn > img {
  position: absolute;
  inset: 0;
}
.pd-video-btn .play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -37px 0 0 -37px;
  color: var(--ph-navy);
}
.pd-reviews {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-review {
  display: flex;
  gap: 18px;
  padding: 24px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.pd-review > img {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.review-head b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.review-head small {
  color: var(--ph-muted);
}
.pd-review p {
  margin: 0;
}
.pd-review-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
}
.pd-review-form .pd-pane-h {
  margin-bottom: 0;
}
.rate-set {
  margin: 0;
  padding: 0;
  border: 0;
}
.rate-set legend {
  margin-bottom: 6px;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
/* five stars, highest first in the markup so the pure-CSS fill works right to left */
.rate-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}
.rate-stars input {
  position: absolute;
  opacity: 0;
}
.rate-stars label {
  font-size: 1.375rem;
  color: var(--ph-line-strong);
  cursor: pointer;
}
.rate-stars input:checked ~ label,
.rate-stars label:hover,
.rate-stars label:hover ~ label {
  color: var(--ph-accent);
}
.rate-stars input:focus-visible + label {
  outline: 2px solid var(--ph-sky);
  outline-offset: 2px;
}

/*======================
16. Cart, Checkout And Account
========================*/
/*---- 16.1 Working Tables ----*/
/* working lists stay tables; on a phone each row becomes a card with its labels */
.ph-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ph-table th {
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--ph-line);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--ph-line);
  vertical-align: middle;
  color: var(--ph-heading);
}
.ph-table td small {
  display: block;
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.line-product {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  color: var(--ph-heading);
}
.line-product .mini-thumb {
  width: 72px;
  height: 72px;
}
.line-price,
.line-total {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
}
.ph-stepper.is-sm {
  height: 46px;
}
.ph-stepper.is-sm button {
  width: 34px;
  height: 38px;
}
.ph-stepper.is-sm input {
  width: 34px;
}
.stock-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ph-ok);
}
.stock-in .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.cart-under {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 1 520px;
}
.coupon-form .ph-input {
  flex: 1 1 220px;
}
.coupon-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.875rem;
}
.coupon-status.is-ok {
  color: var(--ph-ok);
}
.coupon-status.is-bad {
  color: var(--ph-sale);
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
  padding: 50px 20px 60px;
  text-align: center;
}
.cart-empty[hidden],
[data-cart-full][hidden],
[data-wish-full][hidden],
[data-compare-full][hidden] {
  display: none;
}
.cart-empty > i {
  font-size: 3.5rem;
  color: var(--ph-accent-text);
}
.cart-empty .title {
  margin: 8px 0 0;
}

/*---- 16.2 Totals ----*/
.ph-totals {
  padding: 32px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ice);
}
.ph-totals.is-sticky {
  position: sticky;
  top: 96px;
}
.totals-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.totals-title small {
  font-family: var(--ph-ff-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ph-muted);
}
.totals-free {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ph-surface);
}
.totals-free p {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  color: var(--ph-heading);
}
.totals-rows {
  margin: 0;
}
.totals-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(var(--ph-heading-rgb), 0.08);
}
.totals-rows > div[hidden] {
  display: none;
}
.totals-rows dt {
  font-weight: 400;
  color: var(--ph-text);
}
.totals-rows dt small {
  margin-left: 6px;
  color: var(--ph-muted);
}
.totals-rows dd {
  margin: 0;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.totals-rows .is-save dd {
  color: var(--ph-ok);
}
.totals-rows .is-total {
  margin-bottom: 22px;
  border-bottom: 0;
}
.totals-rows .is-total dt,
.totals-rows .is-total dd {
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ship-set {
  margin: 16px 0 8px;
  padding: 0;
  border: 0;
}
.ship-set legend {
  margin-bottom: 10px;
  font-family: var(--ph-ff-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.ship-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ph-surface);
  cursor: pointer;
}
.ship-opt input {
  accent-color: var(--ph-accent);
  width: 18px;
  height: 18px;
}
.ship-opt span {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  line-height: 1.3;
}
.ship-opt b {
  font-weight: 600;
  color: var(--ph-heading);
}
.ship-opt small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.ship-opt em {
  font-style: normal;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.totals-pay {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 1.75rem;
  color: var(--ph-muted);
}

/*---- 16.3 Checkout ----*/
.co-block {
  padding: 34px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
}
.co-block + .co-block {
  margin-top: 24px;
}
.co-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.co-h span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 0.875rem;
}
.co-switch,
.co-pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.co-way {
  position: relative;
  cursor: pointer;
}
.co-way input {
  position: absolute;
  opacity: 0;
}
.co-way > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px;
  border: 1.5px solid var(--ph-line);
  border-radius: 16px;
  background: var(--ph-surface);
  line-height: 1.35;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease);
}
.co-way i {
  font-size: 1.5rem;
  color: var(--ph-accent-text);
}
.co-way b {
  margin-top: 6px;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.co-way small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.co-way em {
  font-style: normal;
  font-weight: 600;
  color: var(--ph-heading);
}
.co-way input:checked + span {
  border-color: var(--ph-heading);
  background: var(--ph-ice);
}
.co-way input:focus-visible + span {
  outline: 2px solid var(--ph-sky);
  outline-offset: 2px;
}
.co-home[hidden],
.co-pickup[hidden],
.co-card[hidden] {
  display: none;
}
.co-eta {
  margin: 16px 0 0;
  font-size: 0.9375rem;
  color: var(--ph-ok);
}
.pickup-slots {
  margin-top: 18px;
}
.co-terms {
  margin-top: 22px;
}
.co-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--ph-heading-rgb), 0.08);
}
.co-lines li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.co-lines .mini-thumb {
  width: 56px;
  height: 56px;
}
.co-line-name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-size: 0.9375rem;
  color: var(--ph-heading);
}
.co-line-name small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.co-lines b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.co-error {
  min-height: 1em;
  margin: 0 0 12px;
  font-size: 0.9375rem;
  color: var(--ph-sale);
}
.order-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}
.order-done[hidden] {
  display: none;
}
.done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--ph-ok-soft);
  color: var(--ph-ok);
  font-size: 2rem;
}
.done-ref b {
  font-family: var(--ph-ff-heading);
  color: var(--ph-heading);
}
.order-done .ph-actions {
  justify-content: center;
  margin-top: 14px;
}

/*---- 16.4 Wishlist And Compare ----*/
.wish-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}
.wish-head .title {
  margin: 0;
  font-size: 1.75rem;
}
.wish-head .title small {
  margin-left: 8px;
  font-family: var(--ph-ff-body);
  font-size: 1rem;
  color: var(--ph-muted);
}
.compare-note {
  margin: 0;
  color: var(--ph-muted);
}
.wish-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.compare-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
}
.compare-card.is-best {
  box-shadow: inset 0 0 0 2px var(--ph-accent);
}
.compare-best {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
}
.compare-x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}
.compare-img {
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 14px;
  background: #FFFFFF;
}
.compare-img img {
  display: block;
  width: 100%;
  height: auto;
}
.compare-name {
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.compare-rows {
  margin: 14px 0 20px;
}
.compare-rows dd {
  font-size: 0.875rem !important;
}
.compare-card .ph-btn {
  margin-top: auto;
}

/*---- 16.5 Tracking ----*/
.track-card {
  height: 100%;
  padding: 38px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ice);
}
.track-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.track-top .ph-eyebrow {
  display: block;
  margin-bottom: 4px;
}
.track-ref {
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.track-steps li {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 26px;
}
.track-steps li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--ph-line-strong);
}
.track-steps li:last-child::before {
  display: none;
}
.track-steps li.is-done::before {
  background: var(--ph-ok);
}
.step-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ph-surface);
  color: var(--ph-muted);
  font-size: 1rem;
  box-shadow: inset 0 0 0 2px var(--ph-line-strong);
}
.track-steps li.is-done .step-dot {
  background: var(--ph-ok);
  color: #FFFFFF;
  box-shadow: none;
}
.track-steps li.is-now .step-dot {
  background: var(--ph-accent);
  color: var(--ph-navy);
  box-shadow: 0 0 0 6px rgba(var(--ph-accent-rgb), 0.25);
}
.track-steps li > span:last-child {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  line-height: 1.35;
}
.track-steps b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.track-steps small {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.track-help {
  margin: 0;
}

/*---- 16.6 Account ----*/
.acc-side {
  position: sticky;
  top: 96px;
  padding: 26px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.acc-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(var(--ph-heading-rgb), 0.1);
}
.acc-person img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.acc-person span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.acc-person small {
  color: var(--ph-muted);
}
.acc-person b {
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.acc-person em {
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ph-accent-text);
}
.acc-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acc-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ph-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.acc-tab i {
  width: 20px;
  font-size: 1.0625rem;
  color: var(--ph-accent-text);
}
.acc-tab:hover {
  background: var(--ph-surface);
  color: var(--ph-heading);
}
.acc-tab.is-active {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.acc-tab.is-active i {
  color: inherit;
}
.acc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.acc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-peach);
}
.acc-stat i {
  font-size: 1.5rem;
  color: var(--ph-accent-text);
}
.acc-stat b {
  margin-top: 6px;
  font-family: var(--ph-ff-heading);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.acc-stat span {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.acc-card {
  padding: 30px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
}
.acc-card + .acc-card {
  margin-top: 20px;
}
.acc-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.acc-card-head > b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.acc-card-head button.ph-link {
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.acc-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--ph-peach);
  color: var(--ph-heading);
}
.acc-alert i {
  font-size: 1.5rem;
  color: var(--ph-accent-text);
}
.acc-card.is-addr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
}
.acc-card.is-addr b {
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.acc-card.is-addr p {
  margin: 0 0 6px;
}
.acc-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.acc-save .form-status {
  margin: 0;
}
.sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 22px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
  transition: opacity 0.3s var(--ph-ease);
}
.sub-card.is-paused {
  opacity: 0.6;
}
.sub-card > b {
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.sub-meta {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.sub-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ph-heading);
}
.sub-next i {
  color: var(--ph-accent-text);
}
.sub-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/*======================
17. Pharmacy Pages
========================*/
/*---- 17.1 Prescriptions ----*/
.rx-way-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.rx-way {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1.5px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  color: var(--ph-heading);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease), transform 0.3s var(--ph-ease);
}
.rx-way > i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ph-peach);
  color: var(--ph-accent-text);
  font-size: 1.5rem;
}
.rx-way span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.rx-way b {
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
}
.rx-way small {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.rx-way:hover {
  transform: translateY(-3px);
}
.rx-way.is-active {
  border-color: var(--ph-primary);
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.rx-way.is-active small {
  color: inherit;
  opacity: 0.75;
}
.rx-way.is-active > i {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.rx-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rx-form .tool-head {
  margin-bottom: 4px;
}
.rx-numbers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rx-add {
  align-self: flex-start;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.rx-form > .ph-btn {
  align-self: flex-start;
}
.rx-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rx-results li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ph-ok-soft);
}
.rx-results li.is-bad {
  background: rgba(214, 31, 69, 0.08);
}
.rx-results li > span:nth-child(2) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  line-height: 1.4;
}
.rx-results b {
  font-weight: 600;
  color: var(--ph-heading);
}
.rx-results small {
  font-size: 0.875rem;
}
.rx-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ph-sale);
  color: #FFFFFF;
}
.ph-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ph-line);
}
.ph-steps li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ph-muted);
}
.ph-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ph-ice);
  font-size: 0.8125rem;
}
.ph-steps li.is-now {
  color: var(--ph-heading);
}
.ph-steps li.is-now span {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.ph-steps li.is-done span {
  background: var(--ph-ok);
  color: #FFFFFF;
}
.step-pane {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.step-pane[hidden] {
  display: none;
}
.step-h {
  display: block;
  margin-bottom: 18px;
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.step-note {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--ph-muted);
}
.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.step-actions [hidden] {
  display: none;
}
.rx-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  border: 2px dashed var(--ph-line-strong);
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease);
}
.rx-drop > i {
  font-size: 2.5rem;
  color: var(--ph-accent-text);
}
.rx-drop b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.rx-drop small {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.rx-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.rx-drop.is-over,
.rx-drop:focus-within {
  border-color: var(--ph-accent);
  background: var(--ph-peach);
}
.rx-drop.is-picked {
  border-style: solid;
  border-color: var(--ph-ok);
}
.rx-drop.is-bad {
  border-color: var(--ph-sale);
}
.rx-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.rx-or::before,
.rx-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ph-line);
}
.rx-next {
  position: sticky;
  top: 96px;
  padding: 36px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-peach);
}
.rx-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0;
}
.rx-flow li {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--ph-surface);
}
.flow-n {
  flex: 0 0 auto;
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ph-accent-text);
}
.rx-flow li > span:last-child {
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.rx-flow b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.rx-help {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rx-help > span:last-child {
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.rx-help b {
  color: var(--ph-heading);
}
.tool-out.is-four {
  grid-template-columns: repeat(4, 1fr);
}

/*---- 17.2 FAQ ----*/
.ph-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ph-faq-list[hidden] {
  display: none;
}
.ph-faq-list + .ph-faq-list {
  margin-top: 40px;
}
.faq-group-h {
  margin-bottom: 8px;
  font-size: 1.5rem;
}
.faq-item {
  border-radius: 16px;
  background: var(--ph-ice);
  transition: background-color 0.3s var(--ph-ease);
}
.ph-faq.ph-ice .faq-item {
  background: var(--ph-surface);
}
.faq-item[hidden] {
  display: none;
}
.faq-h {
  margin: 0;
  font-size: inherit;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  color: var(--ph-heading);
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.faq-q i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ph-surface);
  font-size: 0.75rem;
  transition: transform 0.35s var(--ph-ease), background-color 0.35s var(--ph-ease);
}
.faq-item.is-open .faq-q i {
  background: var(--ph-accent);
  color: var(--ph-navy);
  transform: rotate(45deg);
}
.faq-a {
  padding: 0 24px 20px;
}
.faq-a p {
  margin: 0;
}

/*---- 17.3 Consultation ----*/
.book-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.topic {
  position: relative;
  cursor: pointer;
}
.topic input {
  position: absolute;
  opacity: 0;
}
.topic span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 20px;
  border: 1.5px solid var(--ph-line);
  border-radius: 16px;
  line-height: 1.35;
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease);
}
.topic i {
  font-size: 1.75rem;
  color: var(--ph-accent-text);
}
.topic b {
  margin-top: 6px;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.topic small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.topic input:checked + span {
  border-color: var(--ph-heading);
  background: var(--ph-ice);
}
.topic input:focus-visible + span {
  outline: 2px solid var(--ph-sky);
  outline-offset: 2px;
}
.book-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.book-done[hidden] {
  display: none;
}
.book-side {
  padding: 32px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ice);
}
.book-side.is-sticky {
  position: sticky;
  top: 96px;
}
.side-title {
  display: block;
  margin: 4px 0 18px;
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.book-team {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}
.book-team li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.book-team img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.book-team span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.book-team b {
  font-weight: 600;
  color: var(--ph-heading);
}
.book-team small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.side-slots {
  margin-top: 16px;
}
.side-slots .slot-list {
  grid-template-columns: repeat(3, 1fr);
}

/*---- 17.4 Services ----*/
.head-side {
  max-width: 420px;
  margin: 0;
}
.ph-service {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  color: var(--ph-text);
  transition: box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-service:hover {
  color: var(--ph-text);
  box-shadow: var(--ph-shadow);
  transform: translateY(-4px);
}
.svc-img {
  aspect-ratio: 1.45;
  border-radius: 0;
}
.ph-service:hover .svc-img img {
  transform: scale(1.06);
}
.svc-icon {
  position: absolute;
  top: calc(100% / 1.45 * 0 + 14px);
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ph-surface);
  color: var(--ph-accent-text);
  font-size: 1.5rem;
  box-shadow: var(--ph-shadow);
  transition: background-color 0.35s var(--ph-ease), color 0.35s var(--ph-ease);
}
.ph-service:hover .svc-icon {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.svc-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
}
.svc-body > b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.svc-body > span {
  font-size: 0.9375rem;
  line-height: 1.55;
}
.svc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ph-line);
}
.svc-meta dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.svc-meta dd {
  margin: 2px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ph-heading);
}
.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
.process-row li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 26px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  counter-increment: step;
}
.process-row li::after {
  content: "0" counter(step);
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--ph-ff-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ph-ice-2);
}
.process-row i {
  font-size: 2.25rem;
  color: var(--ph-accent-text);
}
.process-row b {
  margin-top: 8px;
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.process-row span {
  font-size: 0.9375rem;
}
.ph-cta-band {
  padding: 70px 0;
}
.ph-cta-band .ph-btn.is-glass {
  background: var(--ph-surface);
  color: var(--ph-heading);
  box-shadow: none;
}
.ph-cta-band .ph-btn.is-glass:hover {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-inner .title {
  margin: 0;
}

/*---- 17.5 Vaccinations ----*/
.svc-photo {
  margin: 34px 0 10px;
  aspect-ratio: 16 / 8;
}
.svc-photo > img {
  position: absolute;
  inset: 0;
}
.svc-h {
  margin: 44px 0 20px;
  font-size: 1.625rem;
}
.vax-facts {
  margin: 0;
  padding: 0;
  border: 0;
}
.vax-facts legend {
  margin-bottom: 10px;
  font-family: var(--ph-ff-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.vax-facts .ph-check {
  margin: 0 18px 8px 0;
}
.vax-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 14px;
}
.vax-out li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ph-ok-soft);
}
.vax-out li.is-maybe {
  background: var(--ph-peach);
}
.vax-out li > i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ph-ok);
  color: #FFFFFF;
  font-size: 0.75rem;
}
.vax-out li.is-maybe > i {
  background: var(--ph-accent);
  color: var(--ph-navy);
}
.vax-out li span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.vax-out b {
  font-weight: 600;
  color: var(--ph-heading);
}
.vax-out small {
  font-size: 0.8125rem;
}
.vax-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ph-muted);
}

/*---- 17.6 Health Tools ----*/
.ph-tool.is-full {
  height: 100%;
}
.tool-units {
  display: flex;
  gap: 8px;
  margin: -6px 0 18px;
}
.tool-units .shop-chip span {
  background: var(--ph-ice);
}
.tool-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 26px 0 16px;
}
.result-num {
  font-family: var(--ph-ff-heading);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ph-heading);
}
.result-band {
  padding: 6px 14px;
  border-radius: 30px;
  background: var(--ph-ice);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ph-heading);
}
.result-band.is-b {
  background: var(--ph-ok-soft);
  color: var(--ph-ok);
}
.result-band.is-c {
  background: var(--ph-peach-2);
  color: var(--ph-warn);
}
.result-band.is-d,
.result-band.is-a {
  background: rgba(214, 31, 69, 0.1);
  color: var(--ph-sale);
}
.band-scale {
  position: relative;
  display: grid;
  grid-template-columns: 14fr 26fr 20fr 40fr;
  height: 34px;
  margin-top: 6px;
  overflow: visible;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #10235E;
}
.band-scale span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.band-scale .is-a {
  border-radius: 10px 0 0 10px;
  background: #CFE4F8;
}
.band-scale .is-b {
  background: #CDEFDB;
}
.band-scale .is-c {
  background: #FFE7CF;
}
.band-scale .is-d {
  border-radius: 0 10px 10px 0;
  background: #F9D2DA;
}
.band-pin {
  --ph-at: 35%;
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: var(--ph-at);
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--ph-heading);
  transition: left 0.5s var(--ph-ease);
}
.tool-advice {
  margin: 0 0 10px;
  font-weight: 500;
  color: var(--ph-heading);
}
.tool-small {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.vd-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  font-size: 1.125rem;
  color: var(--ph-accent-text);
}

/*---- 17.7 Store Locator ----*/
.loc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px 30px;
  margin-bottom: 30px;
  padding: 22px 24px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.loc-bar .ph-field {
  flex: 0 1 340px;
}
.loc-open {
  height: 54px;
  align-items: center;
}
.loc-count {
  margin: 0 0 14px auto;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}
.loc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.loc-card {
  display: flex;
  gap: 18px;
  padding: 16px;
  border: 1.5px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: border-color 0.3s var(--ph-ease), box-shadow 0.3s var(--ph-ease);
}
.loc-card[hidden] {
  display: none;
}
.loc-card.is-active {
  border-color: var(--ph-heading);
  box-shadow: var(--ph-shadow);
}
.loc-img {
  flex: 0 0 130px;
  height: 130px;
  border-radius: 14px;
}
.loc-img > img {
  position: absolute;
  inset: 0;
}
.loc-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.loc-body > b {
  font-family: var(--ph-ff-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.loc-addr {
  font-size: 0.9375rem;
}
.loc-status {
  margin: 2px 0;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--ph-heading);
}
.loc-svc {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.loc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
}
.loc-none {
  padding: 20px;
  border-radius: 14px;
  background: var(--ph-peach);
  color: var(--ph-heading);
}
.loc-map {
  position: sticky;
  top: 96px;
  height: 640px;
  overflow: hidden;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.loc-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*---- 17.8 Care Club Calculator ----*/
.calc-field {
  margin-top: 26px;
}
.calc-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-plan {
  display: grid;
  grid-template-columns: 1.1fr auto;
  align-items: center;
  gap: 4px 20px;
  padding: 20px 24px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: box-shadow 0.35s var(--ph-ease), opacity 0.35s var(--ph-ease);
}
.calc-plan.is-best {
  box-shadow: inset 0 0 0 2px var(--ph-accent), var(--ph-shadow);
}
.calc-plan.is-off {
  opacity: 0.55;
}
.calc-name {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.calc-name b {
  font-family: var(--ph-ff-heading);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.calc-name small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.calc-net {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.calc-net b {
  font-family: var(--ph-ff-heading);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--ph-ok);
}
.calc-net small {
  font-size: 0.75rem;
  color: var(--ph-muted);
}
.calc-break {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.calc-note {
  margin: 18px 0 0;
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  color: var(--ph-heading);
}

/*======================
18. Inner Pages
========================*/
/*---- 18.1 About ----*/
.about-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  color: var(--ph-text);
}
.about-feature:hover {
  color: var(--ph-text);
}
.about-feature > b {
  margin-top: 8px;
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(320px, auto);
  gap: 20px;
}
.about-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 50px;
  border-radius: var(--ph-radius-card);
}
.about-tile.ph-cover {
  padding: 0;
}
.about-tile.ph-cover > img {
  position: absolute;
  inset: 0;
}
.about-tile.is-peach {
  background: var(--ph-peach);
}
.about-tile.is-ice {
  background: var(--ph-ice);
}
.about-tile .title {
  font-size: clamp(1.625rem, 2.2vw, 2.125rem);
}
.about-h {
  font-size: 1.625rem;
}
.about-tile .ph-facts {
  width: 100%;
  margin-bottom: 0;
}
.ph-numbers {
  padding: 80px 0;
}
.numbers-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.number b {
  display: block;
  font-family: var(--ph-ff-heading);
  font-size: clamp(2.75rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ph-accent);
}
.number span {
  display: block;
  margin-top: 10px;
  color: var(--ph-on-night);
}

/*---- 18.2 Pharmacists ----*/
.ph-person {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  transition: box-shadow 0.35s var(--ph-ease), transform 0.35s var(--ph-ease);
}
.ph-person:hover {
  box-shadow: var(--ph-shadow);
  transform: translateY(-4px);
}
.person-img {
  display: block;
  aspect-ratio: 1 / 0.95;
  border-radius: 0;
}
.person-img img {
  object-position: center top;
  transform-origin: center top;
}
.ph-person:hover .person-img img {
  transform: scale(1.05);
}
.person-store {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -18px 0 0 22px;
  padding: 7px 14px;
  border-radius: 30px;
  background: var(--ph-accent);
  color: var(--ph-navy);
  font-size: 0.8125rem;
  font-weight: 700;
}
.person-body {
  padding: 18px 26px 26px;
}
.person-name {
  margin: 0;
  font-size: 1.375rem;
}
.person-role {
  font-size: 0.9375rem;
  color: var(--ph-accent-text);
}
.person-facts {
  margin: 16px 0 18px;
}

/*---- 18.3 Journal ----*/
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.ph-entry {
  overflow: hidden;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-lg);
  background: var(--ph-surface);
}
.ph-entry[hidden] {
  display: none;
}
.entry-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.entry-img > img {
  position: absolute;
  inset: 0;
}
.entry-img:hover > img {
  transform: scale(1.04);
}
.entry-img.is-video {
  cursor: pointer;
}
.entry-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.entry-gallery .ph-cover {
  aspect-ratio: 1.2;
  border-radius: 0;
}
.entry-quote {
  position: relative;
  padding: 50px 50px 44px;
}
.entry-quote > i {
  font-size: 2.5rem;
  color: var(--ph-accent);
}
.entry-quote p {
  margin: 16px 0 14px;
  font-family: var(--ph-ff-heading);
  font-size: 1.5rem;
  line-height: 1.45;
  color: #FFFFFF;
}
.entry-quote cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ph-accent);
}
.entry-body {
  padding: 30px 36px 34px;
}
.entry-title {
  margin: 10px 0 12px;
  font-size: 1.75rem;
}
.entry-title a:hover {
  color: var(--ph-accent-text);
}
.entry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ph-line);
}
.journal-empty {
  padding: 30px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
  text-align: center;
}
.blog-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.blog-sidebar .side-widget {
  margin: 0;
  padding: 26px;
  border-top: 0;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.journal-count {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.side-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.side-post {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ph-heading);
}
.side-post > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.side-post b {
  font-size: 0.9375rem;
  font-weight: 500;
}
.side-post small {
  font-size: 0.8125rem;
  color: var(--ph-muted);
}
.mini-thumb.is-photo img {
  object-fit: cover;
}
.side-cats a {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--ph-heading-rgb), 0.08);
  color: var(--ph-text);
}
.side-cats a:hover {
  color: var(--ph-accent-text);
}
.side-cats b {
  font-weight: 600;
  color: var(--ph-heading);
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.tag-cloud a {
  padding: 7px 14px;
  border-radius: 30px;
  background: var(--ph-surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ph-heading);
}
.tag-cloud a:hover {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
}
.side-refill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border-radius: var(--ph-radius-card);
}
.side-refill > i {
  font-size: 2.25rem;
  color: var(--ph-accent);
}
.side-refill b {
  margin-top: 6px;
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: #FFFFFF;
}
.side-refill .ph-link {
  margin-top: 8px;
  color: #FFFFFF;
}

/*---- 18.4 Article ----*/
.article-head {
  margin-bottom: 30px;
}
.article-title {
  margin: 16px 0 20px;
  font-size: clamp(2.125rem, 3.4vw, 3.25rem);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font-size: 0.9375rem;
  color: var(--ph-muted);
}
.article-meta i {
  margin-right: 6px;
  color: var(--ph-accent-text);
}
.article-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.article-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.article-author span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.article-author b {
  color: var(--ph-heading);
}
.article-author small {
  font-size: 0.8125rem;
}
.article-photo {
  aspect-ratio: 16 / 8.5;
  margin-bottom: 34px;
  border-radius: var(--ph-radius-lg);
}
.article-photo > img {
  position: absolute;
  inset: 0;
}
.article-body {
  font-size: 1.0625rem;
  line-height: 1.8;
}
.article-body h2 {
  margin: 36px 0 14px;
  font-size: 1.75rem;
}
.article-body a {
  color: var(--ph-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ph-heading);
}
.article-quote {
  margin: 34px 0;
  padding: 30px 34px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-peach);
}
.article-quote p {
  margin: 0 0 12px;
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--ph-heading);
}
.article-quote cite {
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ph-accent-text);
}
.article-facts {
  max-width: 520px;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
}
.article-foot .tag-cloud a {
  background: var(--ph-ice);
}
.article-share {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ph-heading);
}
.copy-done {
  font-size: 0.875rem;
  color: var(--ph-ok);
}
.author-box {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  padding: 32px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.author-box > img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.author-box b {
  display: block;
  margin: 4px 0 8px;
  font-family: var(--ph-ff-heading);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 30px;
}
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius-card);
  color: var(--ph-heading);
  transition: border-color 0.3s var(--ph-ease), background-color 0.3s var(--ph-ease);
}
.post-nav-link:hover {
  border-color: var(--ph-heading);
  color: var(--ph-heading);
}
.post-nav-link.is-next {
  text-align: right;
}
.post-nav-link small {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-accent-text);
}
.post-nav-link b {
  font-family: var(--ph-ff-heading);
  font-weight: 500;
  line-height: 1.35;
}
.comments {
  margin-top: 50px;
}
.comments-h {
  display: block;
  margin-bottom: 22px;
  font-family: var(--ph-ff-heading);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}
.comment {
  display: flex;
  gap: 18px;
}
.comment.is-reply {
  margin-left: 70px;
}
.comment > img {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.comment > div {
  flex: 1 1 auto;
  padding: 20px 22px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
}
.comment p {
  margin: 0 0 8px;
}
.comment-reply {
  border: 0;
  background-color: transparent;
  font-size: 0.875rem;
  cursor: pointer;
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
}
.comment-form .comments-h {
  margin: 0;
}
.comment-form .ph-btn {
  align-self: flex-start;
}

/*---- 18.5 Contact And FAQ Sidebars ----*/
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 30px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
  color: var(--ph-text);
  transition: transform 0.35s var(--ph-ease);
}
.contact-card:hover {
  color: var(--ph-text);
  transform: translateY(-4px);
}
.contact-card .ph-icon {
  margin-bottom: 12px;
  background: var(--ph-surface);
}
.contact-card b {
  font-family: var(--ph-ff-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.contact-card > span:not(.ph-icon) {
  font-weight: 600;
  color: var(--ph-heading);
}
.contact-card small {
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}
.contact-form .ph-btn {
  align-self: flex-start;
}
.contact-map {
  min-height: 380px;
}
.contact-map iframe {
  min-height: 380px;
}
.contact-offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.office {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: var(--ph-radius-card);
  background: var(--ph-ice);
  font-size: 0.875rem;
}
.office > b {
  font-family: var(--ph-ff-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ph-heading);
}
.office a {
  display: inline-flex;
  gap: 8px;
  color: var(--ph-text);
}
.office a i {
  margin-top: 4px;
  color: var(--ph-accent-text);
}
.office-status {
  flex-wrap: wrap;
  margin: 4px 0 0;
  color: var(--ph-heading);
}
.faq-side {
  position: sticky;
  top: 96px;
  padding: 30px;
  border-radius: var(--ph-radius-lg);
  background: var(--ph-ice);
}
.faq-count {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: var(--ph-muted);
}
.faq-ask {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--ph-heading-rgb), 0.1);
}
.faq-ask p {
  margin: 0;
}

/*---- 18.6 Account Forms ----*/
.auth-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
  box-shadow: var(--ph-shadow-lg);
}
.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 54px;
  overflow: hidden;
}
.auth-decor {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  background: url("../img/decor/capsule-amber.png") no-repeat center / contain;
  opacity: 0.9;
}
.auth-side-title {
  position: relative;
  display: block;
  margin: 8px 0 14px;
  font-family: var(--ph-ff-heading);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.15;
  color: #FFFFFF;
}
.auth-side p {
  position: relative;
}
.auth-facts {
  position: relative;
  max-width: 380px;
}
.auth-facts > div {
  border-color: var(--ph-line-night) !important;
}
.auth-facts dt {
  color: rgba(255, 255, 255, 0.6);
}
.auth-facts dd {
  color: #FFFFFF !important;
}
.auth-main {
  padding: 60px 56px;
  background: var(--ph-surface);
}
.auth-title {
  margin-bottom: 26px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.auth-alt {
  margin: 0;
  text-align: center;
}
.auth-alt a {
  font-weight: 600;
  color: var(--ph-accent-text);
}
.pass-meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ph-ice-2);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ph-sale);
  transition: width 0.4s var(--ph-ease), background-color 0.4s var(--ph-ease);
}
.pass-meter .is-3 {
  background: var(--ph-accent);
}
.pass-meter .is-4,
.pass-meter .is-5 {
  background: var(--ph-ok);
}

/*---- 18.7 Coming Soon And 404 ----*/
.ph-soon {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 60px 0;
  overflow: hidden;
  background: var(--ph-navy);
  isolation: isolate;
  text-align: center;
}
.soon-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.soon-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(16, 35, 94, 0.82), rgba(16, 35, 94, 0.95));
}
.soon-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
}
.soon-logo img {
  width: auto;
  height: 52px;
}
.soon-sign {
  width: 170px;
  height: 170px;
  margin: 30px 0 18px;
}
.soon-sign canvas,
.nf-sign canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.ph-soon .ph-eyebrow {
  color: var(--ph-accent);
}
.soon-title {
  margin: 0 0 30px;
  font-size: clamp(2.375rem, 4.6vw, 4rem);
  color: #FFFFFF;
}
.ph-countdown.is-soon {
  gap: 12px;
  margin-bottom: 34px;
}
.ph-countdown.is-soon .cd-cell {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
}
.ph-countdown.is-soon .cd-cell b {
  font-size: 2.25rem;
  color: #FFFFFF;
}
.ph-countdown.is-soon .cd-cell small {
  color: rgba(255, 255, 255, 0.7);
}
.soon-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 26px;
}
.soon-form .ph-input {
  flex: 1 1 260px;
}
.soon-form .ph-control {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.soon-form .ph-control::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.soon-form .form-status {
  flex: 1 1 100%;
  margin: 0;
}
.ph-404 {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 60px 0;
  background: var(--ph-ice);
  text-align: center;
}
.nf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}
.nf-logo img {
  width: auto;
  height: 52px;
}
.nf-logo .logo-light,
html[data-theme="dark"] .nf-logo .logo-dark {
  display: none;
}
html[data-theme="dark"] .nf-logo .logo-light {
  display: block;
}
.nf-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 10px;
  font-family: var(--ph-ff-heading);
  font-size: clamp(7rem, 16vw, 12rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ph-heading);
}
.nf-sign {
  width: clamp(120px, 15vw, 190px);
  height: clamp(120px, 15vw, 190px);
}
.nf-title {
  margin-bottom: 14px;
}
.nf-search {
  width: 100%;
  max-width: 560px;
  margin: 18px 0 26px;
  text-align: left;
}
.nf-search .search-input {
  background: var(--ph-surface);
}
.nf-inner .ph-actions {
  justify-content: center;
}

/*======================
19. Footer
========================*/
/*---- 19.1 Sign Band ----*/
.ph-footer {
  position: relative;
  overflow: hidden;
}
.ph-footer.ph-night {
  background: var(--ph-night);
}
.ph-footer.is-light {
  background: var(--ph-ice);
  color: var(--ph-text);
}
.footer-band {
  position: relative;
  border-bottom: 1px solid var(--ph-line-night);
}
.is-light .footer-band {
  border-bottom-color: var(--ph-line);
}
.band-inner {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 44px 0;
}
.footer-sign {
  position: relative;
  width: 200px;
  height: 200px;
}
.footer-sign::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--ph-accent-rgb), 0.22), transparent);
  filter: blur(8px);
}
.footer-sign canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.band-copy p {
  margin: 0;
  max-width: 560px;
}
.band-title {
  margin-bottom: 8px !important;
  font-family: var(--ph-ff-heading);
  font-size: var(--ph-fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}
.is-light .band-title {
  color: var(--ph-heading);
}
.is-light .band-actions .ph-btn.is-glass {
  background: var(--ph-surface);
  color: var(--ph-heading);
  box-shadow: inset 0 0 0 1px var(--ph-line);
}

/*---- 19.2 Columns ----*/
.footer-main {
  position: relative;
  padding: 70px 0 64px;
}
.footer-logo img {
  width: auto;
  height: 52px;
}
.footer-about p {
  max-width: 380px;
  margin: 22px 0 22px;
}
.footer-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0 !important;
  font-size: 1.75rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}
.is-light .footer-pay {
  color: var(--ph-muted);
}
.widget-title {
  margin-bottom: 20px;
  font-size: 1.125rem;
  color: #FFFFFF;
}
.is-light .widget-title {
  color: var(--ph-heading);
}
.footer-links li + li {
  margin-top: 10px;
}
.footer-links a {
  color: var(--ph-on-night);
}
.is-light .footer-links a {
  color: var(--ph-text);
}
.ph-night .footer-links a:hover,
.is-light .footer-links a:hover {
  color: var(--ph-accent);
}
.is-light .footer-links a:hover {
  color: var(--ph-accent-text);
}
.footer-status {
  flex-wrap: wrap;
  margin: 0 0 14px;
  color: #FFFFFF;
}
.footer-status [data-hs-text] {
  width: 100%;
  padding-left: 17px;
  font-size: 0.875rem;
  opacity: 0.85;
}
.is-light .footer-status {
  color: var(--ph-heading);
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 0.875rem;
}
.hours-list li b {
  font-weight: 500;
}
.hours-list li.is-today {
  color: var(--ph-accent-text);
}
.hours-list.is-night li {
  color: var(--ph-on-night);
}
.hours-list.is-night li.is-today {
  color: var(--ph-accent);
}
.footer-stores {
  margin-top: 14px;
}
.ph-night .footer-stores {
  color: #FFFFFF;
}

/*---- 19.3 Bottom Bar ----*/
.footer-bottom {
  background: var(--ph-night-2);
  color: var(--ph-on-night);
}
.is-light .footer-bottom {
  background: var(--ph-ice-2);
  color: var(--ph-text);
}
.bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 30px;
  min-height: 64px;
  padding: 14px 0;
}
.bottom-inner p {
  margin: 0;
  font-size: 0.875rem;
}
.bottom-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}
.bottom-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph-night .bottom-contacts a,
.ph-night .bottom-inner p a {
  color: #FFFFFF;
}
.bottom-contacts i {
  color: var(--ph-accent);
}
.is-light .bottom-contacts i {
  color: var(--ph-accent-text);
}

/*---- 19.4 Mobile Bar And Back To Top ----*/
.ph-mobile-bar {
  display: none;
}
.ph-back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 980;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--ph-accent) var(--ph-progress, 0%), var(--ph-ice-2) 0);
  color: var(--ph-heading);
  font-size: 1.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ph-ease), transform 0.35s var(--ph-ease), visibility 0.35s;
}
.ph-back-to-top::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ph-surface);
}
.ph-back-to-top i {
  position: relative;
}
.ph-back-to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ph-back-to-top:hover {
  color: var(--ph-accent-text);
}

/*======================
20. Utilities
========================*/
/* section rhythm: 120 at desktop, shrinking down the ladder; strips use a small pb */
.ph-pt-120 {
  padding-top: 120px;
}
.ph-pb-120 {
  padding-bottom: 120px;
}
.ph-pt-80 {
  padding-top: 80px;
}
.ph-pb-80 {
  padding-bottom: 80px;
}
.ph-pb-60 {
  padding-bottom: 60px;
}
.ph-relative {
  position: relative;
}
.ph-mt-40 {
  margin-top: 40px;
}
.ph-centre {
  text-align: center;
}
.ph-muted {
  color: var(--ph-muted);
}