/* =====================================================================
   PTM GEMS — SAPPHIRE EDITORIAL THEME LAYER  (V7)
   =====================================================================
   Ported from the client-approved template: tempkate/3.html
   ("Sapphire Editorial" — cream + sapphire blue, warm gold on stars only).

   HOW THIS WORKS
   --------------
   This file loads AFTER ptm.css and only *retunes* the existing design
   tokens plus adds the motion layer the template has and ptm.css lacks.
   No PHP markup was restructured — every selector below already exists.

   TO REVERT THE WHOLE REDESIGN: delete the one <link> to this file in
   includes/header.php. ptm.css alone still renders the V6 site intact.

   Brand rule kept: blue only. Gold (--ptm-gold) stays restricted to
   review stars and the BIS hallmark stamp.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS — retune ptm.css :root to the sapphire palette
   ------------------------------------------------------------------ */
:root {
  /* Sapphire ramp, from the template's navy and blue scales */
  --ptm-navy-950:       #050D24;
  --ptm-navy-900:       #0A1A3A;
  --ptm-navy-800:       #0F2456;
  --ptm-navy-700:       #122E73;

  /* Remapped core tokens — everything downstream inherits these */
  --ptm-primary:        #2D5BC9;
  --ptm-primary-deep:   #1E40AF;
  --ptm-light:          #7DA0EF;
  --ptm-lighter:        #A5BFF6;
  --ptm-lightest:       #E0EBFC;
  --ptm-navy:           #1E3A8A;
  --ptm-darkest:        #0A1A3A;

  --ptm-text:           #0F172A;
  --ptm-mid:            #475569;
  --ptm-soft:           #94A3B8;
  --ptm-border:         #E2E8F0;

  /* Editorial cream ground — the single biggest visual shift */
  --ptm-bg:             #FAF7F2;
  --ptm-bg-warm:        #F4EEE0;
  --ptm-white:          #FFFFFF;
  --ptm-offwhite:       #FCFBF8;
  --ptm-ice:            #F0F6FF;

  --ptm-gold:           #C9A14B;   /* stars + BIS hallmark ONLY */
  --ptm-rose:           #B8336A;   /* sale/discount text accent */

  /* Gradients */
  --ptm-water:          linear-gradient(135deg, #1E3A8A 0%, #2D5BC9 50%, #5B85E8 100%);
  --ptm-water-deep:     linear-gradient(135deg, #0A1A3A 0%, #122E73 40%, #1E40AF 100%);
  --ptm-water-soft:     linear-gradient(180deg, #FAF7F2 0%, #F4EEE0 100%);
  --ptm-night:          linear-gradient(160deg, #050D24 0%, #0A1A3A 50%, #122E73 100%);
  --ptm-shimmer:        linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  --ptm-text-blue:      linear-gradient(135deg, #1E3A8A 0%, #3B6FE0 50%, #1E3A8A 100%);

  /* Layered shadows tinted to navy instead of neutral slate */
  --ptm-shadow-xs:  0 1px 2px rgba(10, 26, 58, .05);
  --ptm-shadow-sm:  0 2px 8px rgba(10, 26, 58, .05), 0 1px 3px rgba(10, 26, 58, .03);
  --ptm-shadow:     0 8px 24px rgba(10, 26, 58, .07), 0 2px 8px rgba(10, 26, 58, .04);
  --ptm-shadow-md:  0 16px 40px rgba(10, 26, 58, .10), 0 4px 12px rgba(10, 26, 58, .05);
  --ptm-shadow-lg:  0 30px 70px rgba(10, 26, 58, .13), 0 10px 25px rgba(10, 26, 58, .07);
  --ptm-shadow-xl:  0 50px 120px rgba(10, 26, 58, .18), 0 20px 50px rgba(10, 26, 58, .10);
  --ptm-shadow-blue: 0 30px 80px rgba(30, 64, 175, .30), 0 10px 30px rgba(30, 64, 175, .18);
  --ptm-shadow-ink: 0 30px 80px rgba(10, 26, 58, .40), 0 10px 30px rgba(10, 26, 58, .20);

  /* Editorial type stack */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  /* Cinzel dropped in V9.7: fonts.gstatic.com now 404s its woff2, which put a
     real failed request on every desktop page, and the owner said the family
     did not sit right. The token stays so the ~13 rules using it keep
     working; it now resolves to the body face, which is what the V9.4 type
     pass had already moved most small-caps labels to. */
  --font-royal:   'Inter', ui-sans-serif, system-ui, sans-serif;

  --ease:        cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);

  /* One source of truth for every fixed control above the mobile nav. */
  --ptm-bnav-height: 62px;
  --ptm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ptm-bottom-clear: calc(var(--ptm-bnav-height) + var(--ptm-safe-bottom));
}

/* ---------------------------------------------------------------------
   2. BASE — editorial typography weights
   ------------------------------------------------------------------ */
body { background: var(--ptm-bg); text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -.018em; line-height: 1.05; }
h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

::selection { background: var(--ptm-lightest); color: var(--ptm-navy-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ptm-bg); }
::-webkit-scrollbar-thumb {
  background: var(--ptm-water);
  border-radius: 10px;
  border: 2px solid var(--ptm-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ptm-navy); }

/* ---------------------------------------------------------------------
   3. MOTION — the keyframes ptm.css was missing
   ------------------------------------------------------------------ */
@keyframes ptm-text-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ptm-float-slow {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(20px, -25px); }
  66%      { transform: translate(-15px, 15px); }
}
@keyframes ptm-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(15px, -20px); } }
@keyframes ptm-shimmer-x { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ptm-spin-rev { to { transform: rotate(-360deg); } }

/* REVEAL ON SCROLL — driven by the IntersectionObserver in ptm.js.
   No-JS / reduced-motion fallbacks are handled at the bottom of this file. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); will-change: auto; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ---------------------------------------------------------------------
   4. SECTION HEADS — eyebrow rules + animated gradient italic
   ------------------------------------------------------------------ */
.ptm-section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.ptm-section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ptm-primary-deep);
  background: none;
  padding: 0;
  border: 0;
  margin-bottom: 18px;
}
.ptm-section-head .eyebrow::before,
.ptm-section-head .eyebrow::after {
  content: "";
  width: 30px;
  height: 1.5px;
  background: var(--ptm-light);
  flex: none;
}
.ptm-section-head h2 { letter-spacing: -.02em; }
.ptm-section-head h2 em,
.ptm-find__layer-head h3 em {
  font-style: italic;
  font-weight: 500;
  background: var(--ptm-text-blue);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ptm-text-shine 8s ease-in-out infinite;
}
.ptm-section-head .lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ptm-mid);
  max-width: 640px;
  margin: 16px auto 0;
}

/* ---------------------------------------------------------------------
   5. BUTTONS — shimmer sweep on hover
   ------------------------------------------------------------------ */
.ptm-btn {
  font-family: var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .9rem;
  border-radius: var(--r-pill);
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
}
.ptm-btn-primary { background: var(--ptm-water); box-shadow: var(--ptm-shadow-blue); }
.ptm-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -100%;
  width: 100%;
  background: var(--ptm-shimmer);
  transition: left .7s var(--ease);
  pointer-events: none;
}
.ptm-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 100px rgba(30, 64, 175, .45), 0 15px 40px rgba(30, 64, 175, .25);
}
.ptm-btn-primary:hover::before { left: 100%; }
.ptm-btn-primary svg { transition: transform .3s var(--ease); }
.ptm-btn-primary:hover svg { transform: translateX(4px); }

.ptm-btn-ghost {
  background: transparent;
  border: 1px solid var(--ptm-navy-900);
  color: var(--ptm-navy-900);
}
.ptm-btn-ghost:hover {
  background: var(--ptm-navy-900);
  border-color: var(--ptm-navy-900);
  color: var(--ptm-white);
  transform: translateY(-3px);
  box-shadow: var(--ptm-shadow-ink);
}

/* ---------------------------------------------------------------------
   6. PRODUCT CARD — the template's hover choreography
   ------------------------------------------------------------------ */
.ptm-card {
  background: var(--ptm-white);
  border-radius: var(--r-md);
  isolation: isolate;
  overflow: visible;
  transition: all .4s var(--ease);
}
.ptm-card:hover { transform: translateY(-8px); }
.ptm-card__media { border-radius: var(--r-md); background: var(--ptm-offwhite); }
.ptm-card__media img { transition: transform .7s var(--ease); }
.ptm-card:hover .ptm-card__media img { transform: scale(1.08); }

.ptm-card__cat {
  font-family: var(--font-royal);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ptm-primary-deep);
}
.ptm-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
}
.ptm-card__price { color: var(--ptm-navy-900); font-weight: 700; }
.ptm-card__off { color: var(--ptm-rose); font-weight: 700; }
.ptm-card__stars .s { color: var(--ptm-gold); }

.ptm-tag {
  font-family: var(--font-royal);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--ptm-white);
  color: var(--ptm-navy-900);
  box-shadow: var(--ptm-shadow-xs);
}
.ptm-tag--bestseller { background: var(--ptm-water); color: var(--ptm-white); }
.ptm-tag--new  { background: var(--ptm-navy-900); color: var(--ptm-white); }
.ptm-tag--sale { background: var(--ptm-rose); color: var(--ptm-white); }

.ptm-card__stage { position: relative; }
.ptm-card__stage .ptm-card__wish {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  opacity: 1 !important;
  transform: none !important;
  color: var(--ptm-primary-deep);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--ptm-border);
  box-shadow: 0 8px 18px rgba(10, 26, 58, .14);
}
.ptm-card__actions { grid-template-columns: 1fr !important; }

/* Wishlist button: always visible on the photograph. */
.ptm-card__wish:hover { background: var(--ptm-rose); border-color: var(--ptm-rose); color: var(--ptm-white); transform: scale(1.1); }
.ptm-card__wish.is-active { color: var(--ptm-white); background: var(--ptm-rose); border-color: var(--ptm-rose); }
.ptm-card__wish.is-active svg { fill: currentColor; }
.ptm-card__price-row .ptm-card__off { display: none; }

/* ---------------------------------------------------------------------
   7. SURFACES — cream ground, white cards, navy deep sections
   ------------------------------------------------------------------ */
.ptm-find, .ptm-best, .ptm-cats, .ptm-reviews { background: var(--ptm-bg); }
.ptm-match-card, .ptm-blog-card { background: var(--ptm-white); transition: all .4s var(--ease); }
.ptm-match-card:hover, .ptm-blog-card:hover { transform: translateY(-6px); box-shadow: var(--ptm-shadow-md); }

/* Soft blurred sapphire glow behind feature sections — pure decoration */
.ptm-free::before, .ptm-video::before {
  content: "";
  position: absolute;
  top: 20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--ptm-lightest), transparent 70%);
  filter: blur(80px);
  z-index: 0;
  pointer-events: none;
}
.ptm-free, .ptm-video { position: relative; overflow: hidden; }
.ptm-free > *, .ptm-video > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   8. HEADER / FOOTER — editorial weight
   ------------------------------------------------------------------ */
.ptm-topbar { background: var(--ptm-navy-900); color: var(--ptm-lighter); }
.ptm-header { background: rgba(252, 251, 248, .85); backdrop-filter: blur(20px); }
.ptm-header.is-scrolled { background: rgba(252, 251, 248, .96); box-shadow: var(--ptm-shadow-sm); }
.ptm-footer { background: var(--ptm-night); color: var(--ptm-lighter); }
.ptm-footer h4 {
  font-family: var(--font-royal);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ptm-white);
}
.ptm-footer a { transition: color .3s var(--ease), padding-left .3s var(--ease); }
.ptm-footer a:hover { color: var(--ptm-white); padding-left: 4px; }

.ptm-video__playlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.ptm-video__choice {
  align-items: center;
  background: var(--ptm-white);
  border: 1px solid rgba(30, 58, 138, .12);
  border-radius: var(--r-md);
  color: var(--ptm-text);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 88px minmax(0, 1fr);
  min-width: 0;
  padding: 8px;
  text-align: left;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ptm-video__choice:hover { border-color: var(--ptm-primary); box-shadow: var(--ptm-shadow-sm); transform: translateY(-2px); }
.ptm-video__choice:focus-visible { outline: 3px solid var(--ptm-primary); outline-offset: 3px; }
.ptm-video__choice img { aspect-ratio: 16 / 10; border-radius: calc(var(--r-md) - 3px); display: block; height: auto; object-fit: cover; width: 100%; }
.ptm-video__choice span { display: grid; gap: 3px; min-width: 0; }
.ptm-video__choice strong { font-family: var(--font-display); font-size: .95rem; font-weight: 500; line-height: 1.2; }
.ptm-video__choice small { color: var(--ptm-mid); display: -webkit-box; font-size: .74rem; line-height: 1.35; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 639px) { .ptm-video__playlist { grid-template-columns: 1fr; } }

/* =====================================================================
   V8 — NAVIGATION, CARDS, TRUST, AUTH
   ===================================================================== */

/* ---------------------------------------------------------------------
   V8.1  ANNOUNCEMENT MARQUEE
   The track is emitted twice and slides -50%, so both halves must match.
   The site-wide prefers-reduced-motion rule kills the animation; for those
   users the bar becomes a normal horizontal scroller so every message is
   still reachable instead of being stuck on the first few.
   ------------------------------------------------------------------ */
.ptm-tb__track { animation: ptm-marquee 45s linear infinite; }
.ptm-tb:hover .ptm-tb__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ptm-tb__viewport { overflow-x: auto; scrollbar-width: none; }
  .ptm-tb__viewport::-webkit-scrollbar { display: none; }
  .ptm-tb__track { animation: none !important; width: max-content; }
  /* The mirrored half is decorative once nothing is scrolling. */
  .ptm-tb__msg[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------------
   V8.2  MEGA MENU (desktop)
   ------------------------------------------------------------------ */
.ptm-hcat { position: relative; }
.ptm-hcat__sale { color: var(--ptm-rose); font-weight: 700; }
.ptm-hcat__help { color: var(--ptm-primary); }

.ptm-mega { position: static; display: inline-flex; }
.ptm-mega__trigger { display: inline-flex; align-items: center; gap: 5px; }
.ptm-mega__caret { transition: transform .3s var(--ease); }

.ptm-mega__panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--ptm-white);
  border-top: 1px solid var(--ptm-border);
  box-shadow: var(--ptm-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 60;
  max-height: min(78vh, 620px);
  overflow-y: auto;
}
/* Open on hover, on keyboard focus, and on the class ptm.js toggles for touch. */
.ptm-mega:hover .ptm-mega__panel,
.ptm-mega:focus-within .ptm-mega__panel,
.ptm-mega.is-open .ptm-mega__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ptm-mega:hover .ptm-mega__caret,
.ptm-mega.is-open .ptm-mega__caret { transform: rotate(180deg); }

.ptm-mega__grid {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
  gap: 28px;
  padding: 26px 20px 22px;
  align-items: start;
}
.ptm-mega__rail { display: flex; flex-direction: column; gap: 2px; }
.ptm-mega__rail-head {
  background: var(--ptm-lightest);
  color: var(--ptm-navy-900);
  font-family: var(--font-royal);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
}
.ptm-mega__rail a {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  color: var(--ptm-mid);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ptm-mega__rail a:hover { color: var(--ptm-primary-deep); background: var(--ptm-ice); }

.ptm-mega__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 18px;
}
.ptm-mega__links a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ptm-text);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ptm-mega__links a:hover { background: var(--ptm-ice); color: var(--ptm-primary-deep); }
.ptm-mega__ico {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ptm-lightest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ptm-mega__ico img { width: 100%; height: 100%; object-fit: cover; }

.ptm-mega__promo { display: block; position: relative; border-radius: var(--r-lg); overflow: hidden; }
.ptm-mega__promo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; transition: transform .8s var(--ease); }
.ptm-mega__promo:hover img { transform: scale(1.05); }
.ptm-mega__promo-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 18px 16px;
  background: linear-gradient(180deg, rgba(10,26,58,0), rgba(10,26,58,.82));
  color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.ptm-mega__promo-cap strong { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.ptm-mega__promo-cap em { font-style: normal; font-size: .8rem; opacity: .9; }

.ptm-mega__foot { background: var(--ptm-bg); border-top: 1px solid var(--ptm-border); }
.ptm-mega__foot-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 13px 20px; font-size: .87rem; color: var(--ptm-mid);
}
.ptm-mega__foot-inner .ptm-btn { padding: 9px 22px; font-size: .78rem; }

/* Below the mega-menu breakpoint the drawer takes over entirely. */
@media (max-width: 1024px) {
  .ptm-mega__panel { display: none; }
  .ptm-mega__caret { display: none; }
}

/* ---------------------------------------------------------------------
   V8.3  MOBILE DRAWER ROWS
   ------------------------------------------------------------------ */
.ptm-mm__promo {
  display: flex; align-items: center; gap: 12px;
  background: var(--ptm-ice);
  border: 1px solid var(--ptm-lightest);
  border-radius: var(--r-md);
  padding: 13px 14px;
  margin: 4px 0 14px;
}
.ptm-mm__promo-ico { color: var(--ptm-primary-deep); flex: none; }
.ptm-mm__promo div { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ptm-mm__promo strong { font-size: .9rem; color: var(--ptm-navy-900); }
.ptm-mm__promo span { font-size: .78rem; color: var(--ptm-mid); }
.ptm-mm__promo a {
  margin-left: auto; flex: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  color: var(--ptm-primary-deep);
}

.ptm-mm__row {
  display: flex !important;
  align-items: center;
  gap: 13px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--ptm-border);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ptm-text);
  min-height: 48px;              /* comfortable touch target */
}
.ptm-mm__row > svg:last-child { margin-left: auto; color: var(--ptm-soft); flex: none; }
.ptm-mm__row:active { background: var(--ptm-ice); }
.ptm-mm__ico {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--ptm-lightest);
  color: var(--ptm-primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ptm-mm__ico img { width: 100%; height: 100%; object-fit: cover; }
.ptm-mm__sep {
  font-family: var(--font-royal);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ptm-soft);
  padding: 18px 4px 6px;
}

/* ---------------------------------------------------------------------
   V8.4  MOBILE BOTTOM NAV
   ------------------------------------------------------------------ */
.ptm-bnav { display: none; }
@media (max-width: 900px) {
  .ptm-bnav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(252, 251, 248, .97);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--ptm-border);
    box-shadow: 0 -6px 24px rgba(10, 26, 58, .08);
    padding-bottom: var(--ptm-safe-bottom);
  }
  .ptm-bnav a, .ptm-bnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 9px 2px 7px;
    min-height: 56px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ptm-mid);
    background: none; border: 0;
    transition: color .2s var(--ease);
  }
  .ptm-bnav a.is-active { color: var(--ptm-primary-deep); }
  .ptm-bnav a.is-active svg { stroke: var(--ptm-primary-deep); }
  .ptm-bnav__cart { position: relative; display: inline-flex; }
  .ptm-bnav__cart .ptm-badge {
    position: absolute; top: -5px; right: -9px;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: .6rem; line-height: 16px;
    border-radius: 999px;
    background: var(--ptm-rose); color: #fff;
  }
  /* Keep the last section and the footer clear of the fixed bar. */
  body { padding-bottom: var(--ptm-bottom-clear); }
}

/* ---------------------------------------------------------------------
   V8.5  PRODUCT CARD — detached ribbon badges + same-image zoom
   ------------------------------------------------------------------ */
.ptm-card__media { position: relative; }
.ptm-card__media img { display: block; }

.ptm-ribbon {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  max-width: calc(100% - 20px);
  padding: 5px 11px;
  font-family: var(--font-royal);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ptm-water);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  box-shadow: 0 7px 18px rgba(5, 13, 36, .18);
}
.ptm-ribbon--best   { background: linear-gradient(135deg, var(--ptm-primary-deep), var(--ptm-primary)); }
.ptm-ribbon--expert { background: var(--ptm-primary-deep); }
.ptm-ribbon--new    { background: var(--ptm-navy-900); }
.ptm-ribbon--sale   { background: var(--ptm-rose); }
.ptm-ribbon--off {
  left: auto;
  right: 10px;
  letter-spacing: .08em;
}

.ptm-card__rating {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  font-size: .72rem; font-weight: 600;
  color: var(--ptm-navy-900);
  box-shadow: var(--ptm-shadow-xs);
}
.ptm-card__rating .s { color: var(--ptm-gold); }

/* Two-up product grid on phones (client asked for pairs, not one per row). */
@media (max-width: 620px) {
  .ptm-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .ptm-ribbon { font-size: .52rem; padding: 4px 8px 4px 7px; letter-spacing: .1em; }
  .ptm-card__rating { font-size: .66rem; padding: 2px 7px; }
}

/* ---------------------------------------------------------------------
   V8.5b  SHOP-BY-CATEGORY TILE GRID
   Replaces the old By Category / By Material / By Price stack.
   4 across on phones (the layout the client approved), 6 on desktop.
   ------------------------------------------------------------------ */
.ptm-shopgrid {
  display: grid;
  /* auto-fit so the row stays balanced whether there are 3 pillars today or
     8 once more categories are stocked — no layout edit needed either way. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(12px, 2vw, 22px);
  max-width: 1060px;
  margin: 0 auto;
}
.ptm-shoptile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ptm-shoptile__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ptm-lightest);
  box-shadow: var(--ptm-shadow-xs);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ptm-shoptile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ptm-shoptile:hover .ptm-shoptile__img { transform: translateY(-6px); box-shadow: var(--ptm-shadow-md); }
.ptm-shoptile:hover .ptm-shoptile__img img { transform: scale(1.08); }
.ptm-shoptile__label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ptm-navy-900);
  line-height: 1.3;
}
.ptm-find__cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 1024px) { .ptm-shopgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .ptm-shopgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ptm-shoptile__label { font-size: .68rem; }
  .ptm-shoptile__img { border-radius: var(--r-md); }
}

/* ---------------------------------------------------------------------
   V8.5c  FESTIVE BANNER (Rakshabandhan etc.)
   ------------------------------------------------------------------ */
.ptm-festive { padding: clamp(28px, 5vw, 56px) 0; background: var(--ptm-bg); }
.ptm-festive__card {
  position: relative;
  display: block;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ptm-shadow-md);
  min-height: 260px;
}
.ptm-festive__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.ptm-festive__card:hover img { transform: scale(1.04); }
.ptm-festive__copy {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 540px;
  padding: clamp(26px, 4vw, 46px);
  color: #fff;
  background: linear-gradient(100deg, rgba(10,26,58,.86) 0%, rgba(10,26,58,.62) 62%, rgba(10,26,58,0) 100%);
  min-height: 260px;
  justify-content: center;
}
.ptm-festive__eyebrow {
  font-family: var(--font-royal);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ptm-lighter);
}
.ptm-festive__copy strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.1; }
.ptm-festive__body { font-size: .95rem; opacity: .92; max-width: 400px; }
@media (max-width: 620px) {
  .ptm-festive__copy { background: linear-gradient(180deg, rgba(10,26,58,.5) 0%, rgba(10,26,58,.88) 70%); max-width: none; }
}

/* ---------------------------------------------------------------------
   V8.6  TRUST / ASSURANCE STRIP
   ------------------------------------------------------------------ */
.ptm-assure-wrap { padding: clamp(30px, 5vw, 60px) 0; background: var(--ptm-bg); }
.ptm-assure {
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-xl);
  background: var(--ptm-white);
  padding: clamp(26px, 4vw, 42px) clamp(18px, 3vw, 34px);
  box-shadow: var(--ptm-shadow-sm);
}
.ptm-assure__head { text-align: center; margin-bottom: 28px; }
.ptm-assure__head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.ptm-assure__head p { color: var(--ptm-mid); font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }
.ptm-assure__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.ptm-assure__item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ptm-assure__ico {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--ptm-ice);
  border: 1px solid var(--ptm-lightest);
  color: var(--ptm-primary-deep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ptm-assure__item:hover .ptm-assure__ico { transform: translateY(-4px); box-shadow: var(--ptm-shadow); }
.ptm-assure__item strong { font-family: var(--font-display); font-weight: 500; font-size: 1rem; line-height: 1.25; }
.ptm-assure__item span { font-size: .8rem; color: var(--ptm-mid); }
@media (max-width: 700px) { .ptm-assure__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }

/* ---------------------------------------------------------------------
   V8.7  AUTH PAGES — the login screen read as an unstyled skeleton
   ------------------------------------------------------------------ */
.ptm-auth { display: flex; justify-content: center; padding: clamp(28px, 6vw, 70px) 0 clamp(50px, 8vw, 90px); }
.ptm-auth__card {
  width: 100%;
  max-width: 440px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-xl);
  box-shadow: var(--ptm-shadow-md);
  padding: clamp(26px, 5vw, 40px);
}
.ptm-auth__card h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); text-align: center; margin-bottom: 6px; }
.ptm-auth__lede { text-align: center; color: var(--ptm-mid); font-size: .93rem; margin-bottom: 24px; }
.ptm-auth__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.ptm-auth__field label {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ptm-mid);
}
.ptm-auth__field input, .ptm-auth__field select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-sm);
  background: var(--ptm-offwhite);
  font-size: .95rem;
  min-height: 48px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.ptm-auth__field input:focus {
  outline: none;
  background: var(--ptm-white);
  border-color: var(--ptm-primary);
  box-shadow: 0 0 0 3px rgba(45, 91, 201, .14);
}
.ptm-auth__card .ptm-btn { width: 100%; margin-top: 6px; }
.ptm-auth__or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0;
  color: var(--ptm-soft); font-size: .78rem;
}
.ptm-auth__or::before, .ptm-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ptm-border); }
.ptm-auth__google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  min-height: 48px;
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-pill);
  background: var(--ptm-white);
  font-weight: 600; font-size: .88rem;
  color: var(--ptm-text);
  transition: all .25s var(--ease);
}
.ptm-auth__google:hover { border-color: var(--ptm-primary); box-shadow: var(--ptm-shadow-sm); transform: translateY(-1px); }
.ptm-auth__foot { text-align: center; margin-top: 20px; font-size: .88rem; color: var(--ptm-mid); }
.ptm-auth__foot a { color: var(--ptm-primary-deep); font-weight: 600; }

/* ---------------------------------------------------------------------
   V8.8  PUBLIC-PAGE CLASS ALIASES  ← fixes the "skeleton" look
   ---------------------------------------------------------------------
   login / register / checkout / track-order / 404 / 500 were written with
   ADMIN class names (.adm-input, .adm-field, .adm-label) and with
   double-dash button modifiers (.ptm-btn--primary). Neither exists on the
   public side: admin.css is not loaded here, and ptm.css defines the button
   modifiers with a SINGLE dash (.ptm-btn-primary). So those controls rendered
   as raw unstyled HTML — this is what "login page looks like a skeleton" was.

   Defining them here fixes all seven pages at once without touching 57
   markup sites. Safe by construction: this file loads ONLY on public pages
   (admin loads admin.css + admin-sapphire.css), so these rules can never
   reach the admin panel.

   New markup should use the real .ptm-* classes; these are a compatibility
   shim for existing pages, not a pattern to copy.
   ------------------------------------------------------------------ */
.adm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.adm-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ptm-mid);
}
/* Scoped to real form fields only. An earlier version used
   `.ptm-container input`, which also captured the header search box and
   overrode the padding that keeps its magnifier icon clear of the placeholder.
   Never widen this past .adm-* and form controls inside a card. */
.adm-input, .adm-textarea, .adm-select,
.ptm-card form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=search]),
.ptm-card form textarea,
.ptm-card form select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-sm);
  background: var(--ptm-offwhite);
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--ptm-text);
  min-height: 48px;                       /* touch target */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.adm-textarea { min-height: 120px; resize: vertical; }
.adm-input:focus, .adm-textarea:focus, .adm-select:focus,
.ptm-card form input:focus, .ptm-card form textarea:focus, .ptm-card form select:focus {
  outline: none;
  background: var(--ptm-white);
  border-color: var(--ptm-primary);
  box-shadow: 0 0 0 3px rgba(45, 91, 201, .14);
}
/* The header search keeps its own layout: the icon is absolutely positioned,
   so the input needs its left padding left alone. */
/* Do NOT set padding here. The magnifier is absolutely positioned inside
   .ptm-search, and ptm.css gives the input the left padding that keeps the
   placeholder clear of it. Overriding padding puts the icon on the text. */
.ptm-search input, .ptm-mobile-search input {
  min-height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ptm-search input:focus, .ptm-mobile-search input:focus { box-shadow: none; border: 0; }

/* ---------------------------------------------------------------------
   V8.11  HEADER ICON ROW + MEGA MENU OVERFLOW + NAV OVERFLOW
   ------------------------------------------------------------------ */
/* Even spacing and a hover circle that is actually centred on the icon. */
.ptm-header__actions { display: flex; align-items: center; gap: 6px; }
.ptm-icon-btn {
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  color: var(--ptm-navy-900);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.ptm-icon-btn:hover { background: var(--ptm-lightest); color: var(--ptm-primary-deep); }
.ptm-icon-btn .ptm-badge {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  font-size: .6rem; line-height: 17px; text-align: center;
  border-radius: 999px;
  background: var(--ptm-primary-deep); color: #fff;
}

/* Long product names were colliding across the mega-menu columns. */
.ptm-mega__links a { min-width: 0; }
.ptm-mega__links a > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 1025px) and (max-width: 1350px) {
  .ptm-mega__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptm-mega__grid  { grid-template-columns: 170px minmax(0, 1fr) 260px; gap: 20px; }
}

/* The category bar ran past the viewport, hiding Rings…Sale entirely.
   NOTE: overflow-x on this element would clip the absolutely-positioned mega
   panel, so scrolling is only enabled at widths where the panels are already
   display:none. On desktop we tighten spacing instead so everything fits. */
.ptm-hcat { overflow: visible; }
.ptm-hcat__inner > a, .ptm-hcat__inner > .ptm-mega { flex: none; }

@media (min-width: 1025px) {
  .ptm-hcat__inner { flex-wrap: nowrap; gap: 2px; }
  .ptm-hcat__inner > a,
  .ptm-hcat__trigger,
  .ptm-mega__trigger {
    padding-left: 9px;
    padding-right: 9px;
    font-size: .84rem;
    white-space: nowrap;
  }
}
@media (min-width: 1025px) and (max-width: 1400px) {
  .ptm-hcat__inner > a, .ptm-mega__trigger { padding-left: 7px; padding-right: 7px; font-size: .79rem; }
}
@media (max-width: 1024px) {
  .ptm-hcat__inner {
    overflow-x: auto;          /* safe here: mega panels are hidden */
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
  }
  .ptm-hcat__inner::-webkit-scrollbar { display: none; }
}

/* ---------------------------------------------------------------------
   V8.12  MOBILE — drawer clearance, search field, trust grid
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* The fixed bottom nav was covering the end of the drawer list ("More"). */
  .ptm-mm__panel { padding-bottom: calc(var(--ptm-bottom-clear) + 22px); overflow-y: auto; }
  /* Same for the side cart's scrolling body and its footer. */
  .ptm-sc__body { padding-bottom: 12px; }
  .ptm-sc__foot { padding-bottom: calc(12px + var(--ptm-safe-bottom)); }

  /* Client asked for a real search field on phones, not just an icon. */
  .ptm-mobile-search { display: block !important; }
  .ptm-mobile-search form { display: flex; gap: 8px; padding: 10px 14px; }
  .ptm-mobile-search input {
    flex: 1;
    background: var(--ptm-white) !important;
    border: 1px solid var(--ptm-border) !important;
    border-radius: var(--r-pill);
    padding: 11px 16px !important;
    min-height: 44px;
  }

  /* Five trust points never balance in a 2-up grid; show four. */
  .ptm-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptm-trust__pill:nth-child(n+5) { display: none; }
}

/* Double-dash button modifiers used by the older public pages. */
.ptm-btn--primary { background: var(--ptm-water); color: var(--ptm-white); box-shadow: var(--ptm-shadow-blue); }
.ptm-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 40px 100px rgba(30, 64, 175, .45), 0 15px 40px rgba(30, 64, 175, .25); }
.ptm-btn--ghost {
  background: transparent;
  border: 1px solid var(--ptm-border);
  color: var(--ptm-navy-900);
}
.ptm-btn--ghost:hover { border-color: var(--ptm-primary); background: var(--ptm-white); box-shadow: var(--ptm-shadow-sm); transform: translateY(-2px); }
.ptm-btn--full, .ptm-btn--block { width: 100%; }
.ptm-btn--lg { padding: 16px 32px; font-size: 1rem; }

/* Those pages also hand-roll a card wrapper; give it the sapphire surface. */
.ptm-card:not(a):not(.ptm-card--product) {
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-xl);
  box-shadow: var(--ptm-shadow-md);
}

/* ---------------------------------------------------------------------
   V8.9  CHAT LAUNCHER (avatar + nudge) AND WELCOME POPUP
   ------------------------------------------------------------------ */
.ptm-chat-launch {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 58;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) { .ptm-chat-launch { bottom: calc(var(--ptm-bottom-clear) + 12px); } }

.ptm-chat-nudge {
  position: relative;
  background: var(--ptm-white);
  color: var(--ptm-navy-900);
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-pill);
  padding: 9px 30px 9px 16px;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--ptm-shadow);
  animation: ptm-nudge-in .5s var(--ease-bounce) both 2s;
}
@keyframes ptm-nudge-in { from { opacity: 0; transform: translateX(14px) scale(.9); } to { opacity: 1; transform: none; } }
.ptm-chat-nudge__x {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: var(--ptm-soft);
}
@media (max-width: 520px) { .ptm-chat-nudge { display: none; } }

.ptm-chat-btn {
  position: static !important;   /* the launcher wrapper positions it now */
  width: 58px; height: 58px;
  border-radius: 50%;
  overflow: visible;
  background: var(--ptm-water);
  color: #fff;
  box-shadow: var(--ptm-shadow-blue);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ptm-chat-btn:hover { transform: scale(1.07); }
.ptm-chat-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Slow attention ping — one ring, not a strobe. */
.ptm-chat-btn__ping {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ptm-primary);
  animation: ptm-ping 2.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ptm-ping {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* An author `display: flex` beats the UA stylesheet's `[hidden]{display:none}`,
   so WITHOUT the [hidden] rule below this overlay stays laid out full-screen at
   opacity 0 and silently eats every click on the site. Both rules are load
   bearing — never set display on .ptm-pop without re-adding them.
   pointer-events is the second line of defence: if it is not open, it is not
   clickable, whatever display says. */
.ptm-pop[hidden] { display: none !important; }
.ptm-pop {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(5, 13, 36, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.ptm-pop.is-open { opacity: 1; pointer-events: auto; }
.ptm-pop__card {
  position: relative;
  width: 100%; max-width: 430px;
  background: var(--ptm-offwhite);
  border-radius: var(--r-xl);
  box-shadow: var(--ptm-shadow-xl);
  padding: clamp(26px, 5vw, 38px);
  text-align: center;
  transform: translateY(18px) scale(.97);
  transition: transform .4s var(--ease-bounce);
}
.ptm-pop.is-open .ptm-pop__card { transform: none; }
.ptm-pop__x {
  position: absolute; top: 12px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.3rem; line-height: 1;
  color: var(--ptm-mid);
  transition: background .2s var(--ease);
}
.ptm-pop__x:hover { background: var(--ptm-lightest); }
.ptm-pop__eyebrow {
  display: inline-block;
  background: var(--ptm-water);
  color: #fff;
  font-family: var(--font-royal);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.ptm-pop__card h2 { font-size: clamp(1.5rem, 4vw, 2.05rem); line-height: 1.15; margin-bottom: 8px; }
.ptm-pop__card p { color: var(--ptm-mid); font-size: .92rem; margin-bottom: 20px; }
.ptm-pop__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--ptm-primary);
  border-radius: var(--r-md);
  background: var(--ptm-white);
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500;
  color: var(--ptm-navy-900);
  text-align: left;
  transition: all .3s var(--ease);
}
.ptm-pop__cta:hover { background: var(--ptm-ice); transform: translateY(-2px); box-shadow: var(--ptm-shadow); }
.ptm-pop__cta img { width: 62px; height: 62px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.ptm-pop__skip {
  display: block;
  width: 100%;
  margin-top: 16px;
  font-size: .85rem;
  color: var(--ptm-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ptm-chat-btn__ping, .ptm-chat-nudge { animation: none; }
  .ptm-pop__card { transition: none; }
}

/* ---------------------------------------------------------------------
   V8.10  LOGO ASPECT RATIO
   The logo file is 1163x912 (ratio 1.28, wider than tall) but the box was a
   fixed 44x44 square. With object-fit:contain that letterboxes the artwork
   into the middle third of the square, which reads as squashed and cramped.
   Fix the HEIGHT and let the width follow the real ratio.
   ------------------------------------------------------------------ */
.ptm-logo__img {
  height: 42px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
}
.ptm-footer .ptm-logo__img, .ptm-footer__logo img { height: 48px; width: auto; max-width: 150px; }
@media (max-width: 620px) { .ptm-logo__img { height: 34px; max-width: 108px; } }

/* ---------------------------------------------------------------------
   V8.13  HEADER CLEAN-UP
   ---------------------------------------------------------------------
   REGRESSION FIX: `.ptm-icon-btn { display: inline-flex }` above has the same
   specificity as ptm.css's `.ptm-show-mobile { display:none }` but loads
   later, so it silently won and forced BOTH the mobile-only and desktop-only
   icons to render everywhere. That is why two search icons appeared on
   desktop and the mobile bar looked crowded. The utilities are re-asserted
   here, after the sizing rule, so they win again.
   Anything that sets `display` on .ptm-icon-btn must stay above this block.
   ------------------------------------------------------------------ */
.ptm-hidden-mobile { display: none; }
.ptm-show-mobile   { display: inline-flex; }
@media (min-width: 768px) {
  .ptm-hidden-mobile { display: inline-flex; }
  .ptm-show-mobile   { display: none; }
}
/* Same regression: the hamburger is hidden from 992px up in ptm.css and was
   also being overridden by the .ptm-icon-btn sizing rule. */
.ptm-icon-btn--menu { display: inline-flex; }
@media (min-width: 992px) { .ptm-icon-btn--menu { display: none; } }

/* Phone category rail. V9: rounded boxes, not circles — the owner asked for the
   same tile shape as "Find your perfect match".
   "Need help?" is dropped — it lives in the drawer and the footer.

   SPECIFICITY, read before editing (known trap #2): `ptm.css` styles this rail
   with `.ptm-hcat a` (0,1,1). A bare `.ptm-mega__trigger` (0,1,0) LOSES to it
   even inside a media query, because media queries add no specificity. That is
   exactly what shipped in V8: the category triggers kept ptm.css's
   `white-space: nowrap` and `font-size: .88rem`, so `width: 68px` could not
   hold them and the labels overlapped each other at 360px. Every rule below is
   therefore written as `.ptm-hcat a...` (0,2,1) so it actually wins. */
@media (max-width: 991px) {
  .ptm-hcat { border-top: 1px solid var(--ptm-border); }
  /* ptm.css pins this to height:50px for the desktop text row. The tiles are
     taller than that, so the fixed height was slicing the labels off. */
  .ptm-hcat .ptm-hcat__inner {
    height: auto;
    gap: 10px;
    padding: 12px 2px;
    align-items: flex-start;
  }
  .ptm-hcat a.ptm-hcat__help { display: none; }

  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 82px;
    min-width: 82px;
    padding: 0;
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;      /* must beat ptm.css's nowrap, or labels collide */
    overflow-wrap: anywhere;
    hyphens: auto;
    color: var(--ptm-text);
    background: transparent;
  }
  /* Mega caret is meaningless in the rail; the "All Jewellery" glyph is not, so
     it is floated over its tile instead of being thrown away. */
  .ptm-hcat a.ptm-mega__trigger > svg { display: none; }
  .ptm-hcat .ptm-hcat__inner > a > svg {
    position: absolute;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 28px;
    color: var(--ptm-primary-deep);
  }
  /* "All Jewellery", "New Arrivals" and "Sale" have no category image. A flat
     empty box reads as a broken thumbnail, so give them a sapphire ground. */
  .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"])::before {
    background: linear-gradient(150deg, var(--ptm-lightest), #fff 70%);
    box-shadow: inset 0 0 0 1px var(--ptm-lighter);
  }

  /* Rounded box above the label, filled by the category image via --chip. */
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before {
    content: "";
    width: 76px; height: 76px;
    border-radius: 18px;
    background: var(--ptm-lightest) var(--chip, none) center/cover no-repeat;
    box-shadow: var(--ptm-shadow-xs);
    flex: none;
  }
  /* The active underline from ptm.css is absolutely positioned across the old
     pill and would draw a stray blue bar under a tile. Ring the tile instead. */
  .ptm-hcat .ptm-hcat__inner > a.is-active::after,
  .ptm-hcat a.ptm-mega__trigger.is-active::after { content: none; }
  .ptm-hcat .ptm-hcat__inner > a.is-active,
  .ptm-hcat a.ptm-mega__trigger.is-active { color: var(--ptm-primary-deep); font-weight: 700; }
  .ptm-hcat .ptm-hcat__inner > a.is-active::before,
  .ptm-hcat a.ptm-mega__trigger.is-active::before { box-shadow: 0 0 0 2px var(--ptm-primary); }
  .ptm-hcat a.ptm-hcat__sale { color: var(--ptm-rose); }
  /* The trailing spacer pushes "Need help?" right on desktop; in a scrolling
     rail it becomes a wide empty gap at the end. */
  .ptm-hcat .ptm-hcat__inner > span { display: none; }
}

/* On phones the bottom nav already carries wishlist / cart / account, so the
   top bar keeps only logo, search and menu. Less clutter, same reach. */
@media (max-width: 900px) {
  .ptm-header__actions .ptm-icon-btn--cart,
  .ptm-header__actions a[aria-label="Wishlist"],
  .ptm-header__actions a[aria-label="Login"],
  .ptm-header__actions a[aria-label="My account"] { display: none; }
  .ptm-header__actions { gap: 2px; }
  /* The standalone strip under the header is replaced by the overlay below. */
  .ptm-mobile-search { display: none !important; }
}

/* Main nav: stop "All Jewellery" wrapping onto two lines.
   !! DO NOT set `display` here. ptm.css hides .ptm-nav below 992px and this
   file loads later, so an unscoped `display:flex` puts the DESKTOP nav on
   phones and shoves the search + hamburger off the header. Style the links,
   leave visibility to ptm.css. Same rule applies to .ptm-search,
   .ptm-icon-btn--menu, .ptm-show-mobile and .ptm-hidden-mobile. */
.ptm-nav { align-items: center; gap: 4px; flex: none; }
.ptm-nav a {
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 500;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ptm-nav a:hover { color: var(--ptm-primary-deep); background: var(--ptm-ice); }
.ptm-nav a.is-active { color: var(--ptm-primary-deep); font-weight: 600; }

/* ---------------------------------------------------------------------
   V8.14  SEARCH OVERLAY (phones)
   Tapping the magnifier opens a centred search panel instead of pushing a
   second bar into the layout.
   ------------------------------------------------------------------ */
.ptm-searchpop[hidden] { display: none !important; }
.ptm-searchpop {
  position: fixed; inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 18px 18px;
  background: rgba(5, 13, 36, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.ptm-searchpop.is-open { opacity: 1; pointer-events: auto; }
.ptm-searchpop__card {
  width: 100%; max-width: 560px;
  background: var(--ptm-white);
  border-radius: var(--r-lg);
  box-shadow: var(--ptm-shadow-xl);
  padding: 18px;
  transform: translateY(-14px);
  transition: transform .3s var(--ease);
}
.ptm-searchpop.is-open .ptm-searchpop__card { transform: none; }
.ptm-searchpop__row { display: flex; gap: 9px; align-items: center; }
.ptm-searchpop__row input {
  flex: 1; min-width: 0;
  padding: 13px 16px;
  min-height: 48px;
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-pill);
  background: var(--ptm-offwhite);
  font-size: 1rem;
}
.ptm-searchpop__row input:focus {
  outline: none; background: #fff;
  border-color: var(--ptm-primary);
  box-shadow: 0 0 0 3px rgba(45, 91, 201, .14);
}
.ptm-searchpop__row button[type=submit] { flex: none; padding: 12px 20px; }
.ptm-searchpop__x {
  display: block; width: 100%;
  margin-top: 12px;
  font-size: .85rem; color: var(--ptm-mid);
}
.ptm-searchpop__hint { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.ptm-searchpop__hint a {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--ptm-ice);
  color: var(--ptm-primary-deep);
  font-size: .8rem; font-weight: 600;
}

/* ---------------------------------------------------------------------
   V8.15  HERO SLIDER
   ------------------------------------------------------------------ */
.ptm-heroslides { position: relative; width: 100%; height: 100%; }
.ptm-heroslides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.ptm-heroslides img.is-on { opacity: 1; }
.ptm-herodots {
  position: absolute; left: 50%; bottom: -30px;
  transform: translateX(-50%);
  display: flex; gap: 7px;
  z-index: 3;
}
/* The control is 7px TALL, which is a decoration you can occasionally hit
   rather than a button. Superseded at the end of this file (V12.3): the
   button itself becomes a proper 30px target and the 7px bar is drawn inside
   it, so the hero looks identical and the thumb has something to land on. */
.ptm-herodots button {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--ptm-lighter);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.ptm-herodots button.is-on { width: 22px; background: var(--ptm-primary-deep); }

/* ---------------------------------------------------------------------
   V8.16  CATEGORY TILES — smaller, auto-scrolling loop
   Client: tiles were "bohot bade" and should move on their own.
   ------------------------------------------------------------------ */
.ptm-shoploop {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ptm-shoploop__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: ptm-marquee 38s linear infinite;
}
.ptm-shoploop:hover .ptm-shoploop__track { animation-play-state: paused; }
.ptm-shoploop .ptm-shoptile { flex: 0 0 138px; width: 138px; }
.ptm-shoploop .ptm-shoptile__label { font-size: .78rem; }
@media (max-width: 620px) {
  .ptm-shoploop .ptm-shoptile { flex: 0 0 108px; width: 108px; }
  .ptm-shoploop .ptm-shoptile__label { font-size: .7rem; }
}
/* Reduced motion / no-JS: fall back to a normal swipeable row. */
@media (prefers-reduced-motion: reduce) {
  .ptm-shoploop { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .ptm-shoploop__track { animation: none; }
  .ptm-shoploop__track > *[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------------
   V8.17  REVIEWS — score summary, rating bars, marquee
   ------------------------------------------------------------------ */
.ptm-revsum {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--ptm-shadow-sm);
  margin-bottom: clamp(26px, 4vw, 44px);
}
.ptm-revsum__score { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ptm-revsum__score strong {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ptm-navy-900);
}
.ptm-revsum__stars { color: var(--ptm-gold); letter-spacing: 3px; font-size: 1rem; }
.ptm-revsum__from { font-size: .78rem; color: var(--ptm-mid); }
.ptm-revsum__bars { display: grid; gap: 11px; }
.ptm-revbar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px; gap: 12px; align-items: center; }
.ptm-revbar__label { font-size: .82rem; font-weight: 600; color: var(--ptm-mid); }
.ptm-revbar__track { height: 7px; border-radius: 999px; background: var(--ptm-lightest); overflow: hidden; }
.ptm-revbar__fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--ptm-water);
  transition: width 1.2s cubic-bezier(.25,.46,.45,.94);
}
.ptm-revbar__num { font-size: .8rem; font-weight: 700; color: var(--ptm-navy-900); text-align: right; }
@media (max-width: 760px) {
  .ptm-revsum { grid-template-columns: 1fr; gap: 18px; }
  .ptm-revbar { grid-template-columns: 104px minmax(0, 1fr) 30px; gap: 9px; }
  .ptm-revbar__label { font-size: .74rem; }
}

.ptm-revloop {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.ptm-revloop__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: ptm-marquee 62s linear infinite;
}
.ptm-revloop:hover .ptm-revloop__track { animation-play-state: paused; }
.ptm-review {
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--ptm-shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ptm-review:hover { transform: translateY(-5px); box-shadow: var(--ptm-shadow-md); }
.ptm-review__top { display: flex; align-items: center; gap: 11px; }
.ptm-review__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--ptm-water);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}
.ptm-review__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ptm-review__meta strong { font-size: .87rem; color: var(--ptm-navy-900); }
.ptm-review__meta span { font-size: .74rem; color: var(--ptm-soft); }
.ptm-review__tick {
  margin-left: auto; flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ptm-success, #0A8043);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ptm-review__stars { color: var(--ptm-gold); letter-spacing: 1.5px; font-size: .82rem; }
.ptm-review__title { font-family: var(--font-display); font-weight: 500; font-size: 1rem; line-height: 1.25; }
.ptm-review__quote { font-size: .86rem; line-height: 1.6; color: var(--ptm-mid); margin: 0; flex: 1; }
.ptm-review__badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 700;
  color: var(--ptm-primary-deep);
  padding-top: 9px;
  border-top: 1px solid var(--ptm-border);
}
@media (max-width: 620px) {
  .ptm-review { flex: 0 0 250px; width: 250px; padding: 15px; }
}
/* No JS / reduced motion: a normal swipeable row, second copy removed. */
@media (prefers-reduced-motion: reduce) {
  .ptm-revloop { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .ptm-revloop__track { animation: none; }
  .ptm-review[aria-hidden="true"] { display: none; }
  .ptm-revbar__fill { transition: none; }
}

/* ---------------------------------------------------------------------
   V8.18  VIDEO BLOCK
   ------------------------------------------------------------------ */
.ptm-video__wrap { position: relative; overflow: hidden; border-radius: var(--r-xl); }
.ptm-video__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,26,58,0) 35%, rgba(10,26,58,.78) 100%);
  pointer-events: none;
}
.ptm-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ptm-video__pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .7);
  animation: ptm-ping 2.4s var(--ease) infinite;
  pointer-events: none;
}
.ptm-video__meta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: .76rem;
  opacity: .85;
}
@media (prefers-reduced-motion: reduce) { .ptm-video__pulse { animation: none; } }

/* ---------------------------------------------------------------------
   V8.22  HERO COPY SWAP
   Badge, headline, lede and CTA all stack in one grid cell and cross-fade
   together with the image, so the words always match the picture.
   ------------------------------------------------------------------ */
.ptm-swap { display: grid; }
.ptm-swap > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.ptm-swap > .is-on { opacity: 1; transform: none; pointer-events: auto; }
/* The tallest slide sets the height, so nothing below the hero jumps. */
.ptm-hero__title.ptm-swap > span { align-self: start; }
.ptm-hero__lede.ptm-swap > span { align-self: start; }
.ptm-swap--btn { justify-items: start; }
.ptm-swap--btn > a { width: max-content; }
@media (prefers-reduced-motion: reduce) {
  .ptm-swap > * { transition: none; }
}

/* ---------------------------------------------------------------------
   V8.19  ROTATING HEADLINE WORD (retained for other pages)
   ------------------------------------------------------------------ */
.ptm-rotate { display: inline-grid; vertical-align: bottom; }
.ptm-rotate > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  font-style: italic;
  background: var(--ptm-text-blue);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.ptm-rotate > span.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ptm-rotate > span { transition: none; }
}

/* ---------------------------------------------------------------------
   V8.20  SINGLE PRODUCT PAGE — gift, offers, delivery estimate
   ------------------------------------------------------------------ */
.ptm-spp__gift {
  display: flex; align-items: center; gap: 13px;
  margin: 16px 0 14px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--ptm-ice);
  border: 1px dashed var(--ptm-light);
}
.ptm-spp__gift-ico { color: var(--ptm-primary-deep); flex: none; }
.ptm-spp__gift div { display: flex; flex-direction: column; line-height: 1.35; }
.ptm-spp__gift strong { font-size: .93rem; color: var(--ptm-navy-900); }
.ptm-spp__gift span { font-size: .8rem; color: var(--ptm-mid); }

.ptm-spp__offers {
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-md);
  background: var(--ptm-white);
  padding: 0 15px;
  margin-bottom: 14px;
}
.ptm-spp__offers > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 0;
  cursor: pointer;
  font-weight: 600; font-size: .92rem;
  color: var(--ptm-navy-900);
  list-style: none;
}
.ptm-spp__offers > summary::-webkit-details-marker { display: none; }
.ptm-spp__offers > summary > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.ptm-spp__offers-count {
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px;
  background: var(--ptm-water); color: #fff;
  font-size: .7rem; line-height: 21px; text-align: center;
}
.ptm-spp__offer {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0;
  border-top: 1px dashed var(--ptm-border);
  font-size: .84rem;
}
.ptm-spp__offer code {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--ptm-lightest);
  color: var(--ptm-primary-deep);
  font-weight: 700; font-size: .76rem;
  letter-spacing: .04em;
}
.ptm-spp__offer span { color: var(--ptm-mid); display: flex; flex-direction: column; gap: 2px; }
.ptm-spp__offer strong { color: var(--ptm-navy-900); }
.ptm-spp__offer em { font-style: normal; font-size: .78rem; color: var(--ptm-soft); }
.ptm-spp__offers-note { font-size: .76rem; color: var(--ptm-soft); padding: 9px 0 13px; margin: 0; }

.ptm-spp__pin { margin-bottom: 16px; }
.ptm-spp__pin label {
  display: block;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ptm-mid);
  margin-bottom: 7px;
}
.ptm-spp__pin-row { display: flex; gap: 9px; }
.ptm-spp__pin-row input {
  flex: 1; min-width: 0;
  padding: 12px 15px; min-height: 46px;
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-sm);
  background: var(--ptm-offwhite);
  font-size: .93rem;
}
.ptm-spp__pin-row input:focus {
  outline: none; background: #fff;
  border-color: var(--ptm-primary);
  box-shadow: 0 0 0 3px rgba(45, 91, 201, .14);
}
.ptm-spp__pin-row .ptm-btn { flex: none; padding: 10px 20px; }
.ptm-spp__pin-out { margin: 8px 0 0; font-size: .84rem; min-height: 1.2em; }
.ptm-spp__pin-out.is-ok  { color: var(--ptm-success, #0A8043); font-weight: 600; }
.ptm-spp__pin-out.is-bad { color: var(--ptm-rose); }

/* ---------------------------------------------------------------------
   V8.21  POLICY / CMS PAGES — were plain unstyled text
   ------------------------------------------------------------------ */
.ptm-policy, .ptm-page-body, .ptm-cms {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 clamp(46px, 7vw, 80px);
}
.ptm-policy h1, .ptm-page-body h1, .ptm-cms h1 { margin-bottom: 10px; font-size: clamp(2rem, 5vw, 3rem); }
.ptm-policy__crumbs { font-size: .82rem; color: var(--ptm-soft); margin-bottom: 20px; }
.ptm-policy__crumbs a { color: var(--ptm-primary-deep); text-decoration: none; }
.ptm-policy__updated {
  font-size: .8rem; color: var(--ptm-soft);
  padding-bottom: 20px; margin-bottom: 4px;
  border-bottom: 1px solid var(--ptm-border);
}
/* The first h2 already sits under the meta rule — don't double up. */
.ptm-policy article > h2:first-child { border-top: 0; padding-top: 0; margin-top: 16px; }
.ptm-policy h2, .ptm-page-body h2, .ptm-cms h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin: 34px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--ptm-border);
}
.ptm-policy h3, .ptm-page-body h3, .ptm-cms h3 { font-size: 1.12rem; margin: 22px 0 8px; }
.ptm-policy p, .ptm-page-body p, .ptm-cms p,
.ptm-policy li, .ptm-page-body li, .ptm-cms li {
  color: var(--ptm-mid);
  line-height: 1.75;
  font-size: .97rem;
}
.ptm-policy ul, .ptm-policy ol,
.ptm-page-body ul, .ptm-page-body ol,
.ptm-cms ul, .ptm-cms ol { padding-left: 22px; margin: 10px 0 16px; }
.ptm-policy li, .ptm-page-body li, .ptm-cms li { margin-bottom: 7px; list-style: disc; }
.ptm-policy a, .ptm-page-body a, .ptm-cms a {
  color: var(--ptm-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ptm-policy strong, .ptm-page-body strong, .ptm-cms strong { color: var(--ptm-navy-900); }

/* =====================================================================
   V9 — WORK ORDER FIXES
   ===================================================================== */

/* ---------------------------------------------------------------------
   V9.1  STICKY TOP STACK (P0.1)
   The header and the category rail are one sticky unit now. `.ptm-header`
   keeps its own `position: sticky` in ptm.css; a sticky element inside a
   sticky element re-anchors to the wrapper and never moves, so it is
   neutralised here rather than in ptm.css (which stays untouched).

   The wrapper is a positioned element, so it opens a stacking context: the
   mega panel's z-index 60 is now scoped inside it. That is deliberate — the
   side cart (50), mobile drawer (45) and toasts (70) live outside and must
   still paint above the bar.
   ------------------------------------------------------------------ */
/* Baseline — also the no-JS fallback: an ordinary in-flow sticky bar. */
.ptm-stickytop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ptm-bg);
}
.ptm-stickytop .ptm-header { position: static; }
.ptm-stickytop .ptm-hcat  { position: relative; }   /* mega panel anchor */

/* ptm.js promotes the bar out of flow and drops a same-height spacer in its
   place, so the condense below shifts nothing. Keyed on a class ptm.js sets
   itself (not `ptm-js`, which only proves the inline head script ran) — if
   ptm.js fails to load we keep plain sticky and nothing hides behind the bar. */
html.ptm-fixedtop .ptm-stickytop { position: fixed; top: 0; left: 0; right: 0; }
html.ptm-fixedtop { scroll-padding-top: 150px; }   /* in-page anchors clear the bar */
.ptm-stickytop__spacer { flex: none; }

/* Condense. Nothing here sets `display` on an element ptm.css controls
   responsively (non-negotiable #6): `.ptm-logo__tag` and `.ptm-tb` are ours. */
.ptm-tb,
.ptm-header__inner,
.ptm-logo__img,
.ptm-hcat__inner {
  transition: height .25s var(--ease), width .25s var(--ease),
              opacity .2s var(--ease), padding .25s var(--ease);
}
.ptm-stickytop.is-scrolled { box-shadow: 0 10px 30px rgba(10, 26, 58, .10); }
/* The announcement bar has done its job by the time you scroll; folding it away
   is what buys back the vertical space the pinned rail costs. */
.ptm-stickytop.is-scrolled .ptm-tb { height: 0; opacity: 0; overflow: hidden; }
.ptm-stickytop.is-scrolled .ptm-header__inner { height: 56px; }
.ptm-stickytop.is-scrolled .ptm-logo__img { width: 34px; height: 34px; }
.ptm-stickytop.is-scrolled .ptm-logo__tag { display: none; }
@media (min-width: 768px) {
  .ptm-stickytop.is-scrolled .ptm-header__inner { height: 62px; }
  .ptm-stickytop.is-scrolled .ptm-logo__img { width: 40px; height: 40px; }
}
@media (min-width: 992px) {
  .ptm-stickytop.is-scrolled .ptm-hcat__inner { height: 42px; }
}
/* On phones a pinned 76px image rail would eat a third of the screen, so the
   tiles fold down to a compact strip once the page is moving. */
@media (max-width: 991px) {
  .ptm-stickytop.is-scrolled .ptm-hcat__inner { padding: 7px 2px; gap: 8px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger { width: 54px; min-width: 54px; gap: 4px; font-size: .62rem; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger::before { width: 44px; height: 44px; border-radius: 12px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg { top: 10px; width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-tb, .ptm-header__inner, .ptm-logo__img, .ptm-hcat__inner { transition: none; }
}

/* ---------------------------------------------------------------------
   V9.2  "FIND YOUR PERFECT MATCH" (P0.5)
   The belt duplicated its track for a seamless loop, but with only three real
   categories both halves fitted on screen at once — the visitor saw
   Silver/Gemstone/Rudraksha twice and then dead space. PHP now only emits the
   second half when there is genuinely enough content to fill the belt
   (`.ptm-shoploop--loop`); otherwise the tiles are centred and static.
   ------------------------------------------------------------------ */
.ptm-shoploop:not(.ptm-shoploop--loop) { mask-image: none; -webkit-mask-image: none; overflow: visible; }
.ptm-shoploop:not(.ptm-shoploop--loop) .ptm-shoploop__track {
  animation: none;
  width: auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 46px);
}
.ptm-shoploop:not(.ptm-shoploop--loop) .ptm-shoptile { flex: 0 0 clamp(120px, 22vw, 190px); width: auto; }
.ptm-shoploop:not(.ptm-shoploop--loop) .ptm-shoptile__label { font-size: .9rem; }

/* ---------------------------------------------------------------------
   V9.3  "EXPLORE COLLECTIONS" (P0.6 / P2)
   Three tiles in an auto-fill grid left a wide hole on the right at 1280.
   Four collections, laid out 2x2 on desktop.
   ------------------------------------------------------------------ */
@media (min-width: 720px) {
  .ptm-scope__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 900px;
    margin-inline: auto;
    gap: clamp(16px, 2.4vw, 26px);
  }
  /* Grid, not flex-row: the tile has three children (image, name, count) and a
     row would strand the count beside the name instead of under it. */
  .ptm-cat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    row-gap: 4px;
    text-align: left;
    padding: 22px 26px;
  }
  .ptm-cat__img-wrap { grid-row: span 2; width: 92px; height: 92px; border-radius: 22px; flex: none; }
  .ptm-cat__name { font-size: 1.06rem; align-self: end; }
  .ptm-cat__count { align-self: start; }
}
.ptm-cat__count { font-variant-numeric: tabular-nums; }

/* =====================================================================
   V9.2 — DESKTOP HEADER + MEGA MENU + FOOTER
   Learned from PTM_Gems_Final_Header_Footer.html and the two annotated
   dropdown screenshots. Deliberately NOT copied: that file rebuilds a whole
   header from scratch with its own reset, its own SVG sprite and a static
   six-cell trust bar. We keep our animated announcement bar, our sticky stack
   and ptm_svg_icon(). Its GOLD accent is dropped throughout — brand rule #2
   restricts gold to review stars and the BIS stamp.

   Nothing below touches the phone header: every rule is either desktop-only
   (min-width 992/1025) or scoped to the mega panel, which is display:none
   under 1025px.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   V9.2a  DESKTOP CATEGORY RAIL — image tiles, like the phone
   The owner's note: the reference's icon+text row is good, but our PHONE rail
   with real category images "looks much better". So the phone treatment comes
   up to the desktop, laid out horizontally and kept compact enough that all
   ten items still fit on one row.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner { height: auto; gap: 2px; padding: 7px 0; align-items: stretch; }

  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 6px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-radius: 14px;
  }
  /* Image chip above the label, filled from --chip (set inline per category in
     includes/header.php). The inset ring keeps pale silver shots from
     dissolving into the cream page — the washed-out look in the screenshot. */
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before {
    content: "";
    width: 42px; height: 42px;
    border-radius: 13px;
    background: #fff var(--chip, none) center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .09), 0 3px 8px rgba(10, 26, 58, .12);
    flex: none;
  }
  .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"])::before {
    background: linear-gradient(150deg, var(--ptm-lightest), #fff 72%);
  }
  /* The trigger's caret would sit under the tile; the tile itself is the affordance. */
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { display: none; }
  .ptm-hcat .ptm-hcat__inner > a > svg {
    position: absolute;
    top: 17px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    color: var(--ptm-primary-deep);
  }
  .ptm-hcat .ptm-hcat__inner > a.is-active::after { content: none; }
  /* "Need help?" is a utility link, not a category — keep it a text pill on the
     right instead of giving it a blank product tile. */
  .ptm-hcat a.ptm-hcat__help {
    flex-direction: row;
    align-self: center;
    padding: 8px 15px;
    font-size: .82rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--ptm-lighter);
    background: var(--ptm-lightest);
    color: var(--ptm-primary-deep);
  }
  .ptm-hcat a.ptm-hcat__help::before { content: none; }
  .ptm-hcat .ptm-hcat__inner > a:hover,
  .ptm-hcat a.ptm-mega__trigger:hover,
  .ptm-mega:hover .ptm-mega__trigger { background: var(--ptm-lightest); }
  .ptm-hcat .ptm-hcat__inner > a.is-active::before,
  .ptm-hcat a.ptm-mega__trigger.is-active::before { box-shadow: 0 0 0 2px var(--ptm-primary), 0 3px 8px rgba(10, 26, 58, .16); }
  /* Condensed header shrinks the rail rather than dropping it. */
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner { height: auto; padding: 4px 0; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger::before { width: 30px; height: 30px; border-radius: 10px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg { top: 11px; width: 16px; height: 16px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger { font-size: .69rem; gap: 4px; }
}
@media (min-width: 992px) and (max-width: 1300px) {
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger { padding-inline: 6px; font-size: .68rem; }
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------------
   V9.2b  MEGA DROPDOWN — square thumbs, square promo, 3D depth
   Fixes everything circled in the review screenshot:
     · round thumbs cropped the product and washed out on pale silver
     · the side promo was a soft-cornered slab with the caption laid OVER it
     · the whole panel was flat
   Depth is painted in, not waited for: the shadows, rings and gradients below
   are unconditional, per "effects should already be there, not on hover".
   ------------------------------------------------------------------ */
.ptm-mega__panel {
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 28px 60px rgba(6, 22, 52, .22), 0 2px 0 rgba(15, 23, 42, .05) inset;
  background: linear-gradient(180deg, #fff 0%, var(--ptm-offwhite) 100%);
}
.ptm-mega__grid { grid-template-columns: 190px minmax(0, 1fr) 270px; gap: 30px; padding: 28px 20px 24px; }

.ptm-mega__rail-head { box-shadow: inset 0 0 0 1px rgba(45, 91, 201, .10); }
.ptm-mega__rail a { border: 1px solid transparent; }
.ptm-mega__rail a:hover { border-color: var(--ptm-lighter); }

.ptm-mega__links { gap: 6px 16px; }
.ptm-mega__links a {
  min-width: 0;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.ptm-mega__links a:hover { border-color: var(--ptm-lighter); transform: translateX(2px); }
.ptm-mega__ico {
  width: 40px; height: 40px;
  border-radius: 12px;               /* square-ish, not a circle */
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10), 0 3px 7px rgba(10, 26, 58, .12);
}
.ptm-mega__ico img { object-fit: contain; padding: 2px; }
.ptm-mega__link-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ptm-mega__banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--ptm-primary), var(--ptm-navy-900));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ptm-mega__tag {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.ptm-mega__tag--hot { background: var(--ptm-primary); }
.ptm-mega__tag--new { background: var(--ptm-navy-900); }
.ptm-mega__tag--sale { background: var(--ptm-rose); }

/* Square promo, caption underneath.
   SPECIFICITY (known trap #2 again): the mega panel lives INSIDE nav.ptm-hcat,
   so ptm.css's `.ptm-hcat a` (0,1,1) — inline-flex, pill radius, nowrap, its own
   padding — applies to every anchor in the panel. A bare `.ptm-mega__promo`
   (0,1,0) loses to it, which is why this box rendered as a 999px pill with the
   image sitting beside the caption instead of above it. `.ptm-hcat a.ptm-…`
   is (0,2,1) and actually wins. `.ptm-mega__links a` was already (0,2,0)+later,
   which is why the link column looked right while this did not. */
.ptm-hcat a.ptm-mega__promo {
  display: block;
  padding: 0;
  gap: 0;
  white-space: normal;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .09), 0 14px 30px rgba(10, 26, 58, .16);
}
.ptm-hcat a.ptm-mega__promo:hover { background: #fff; }
.ptm-mega__promo-img { display: block; position: relative; overflow: hidden; }
.ptm-mega__promo-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;               /* the box drawn in the screenshot */
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.ptm-mega__promo:hover .ptm-mega__promo-img img { transform: scale(1.05); }
.ptm-mega__promo-cap {
  position: static;                  /* was absolute over the artwork */
  padding: 12px 15px 14px;
  background: none;
  color: var(--ptm-navy-900);
  display: flex; flex-direction: column; gap: 3px;
}
.ptm-mega__promo-cap strong { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; }
.ptm-mega__promo-cap em {
  display: inline-flex; align-items: center; gap: 5px;
  font-style: normal; font-size: .78rem; font-weight: 600;
  color: var(--ptm-primary-deep); opacity: 1;
}

/* Bottom promo strip. */
.ptm-mega__foot { background: linear-gradient(180deg, var(--ptm-bg), var(--ptm-bg-warm)); }
.ptm-mega__foot-inner { gap: 18px; padding: 14px 20px; }
.ptm-mega__stack { display: inline-flex; flex: none; }
.ptm-mega__stack img {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10), 0 3px 7px rgba(10, 26, 58, .14);
}
.ptm-mega__stack img + img { margin-left: -12px; }   /* overlapped cluster */
.ptm-mega__foot-copy { display: grid; gap: 1px; margin-right: auto; }
.ptm-mega__foot-copy strong { font-size: .92rem; color: var(--ptm-navy-900); }
.ptm-mega__foot-copy small { font-size: .8rem; color: var(--ptm-mid); }

/* ---------------------------------------------------------------------
   V9.2c  FOOTER — the reference's structure, in sapphire
   ------------------------------------------------------------------ */
.ptm-ftrust {
  position: relative;
  z-index: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--ptm-navy-900) 0%, var(--ptm-navy-800) 70%, var(--ptm-navy-700) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ptm-ftrust__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.ptm-ftrust__item {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  padding: 18px 20px;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.ptm-ftrust__item:last-child { border-right: 0; }
.ptm-ftrust__ico {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  color: var(--ptm-lighter);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.ptm-ftrust__item strong { display: block; font-size: .86rem; }
.ptm-ftrust__item small { color: #b9c5d9; font-size: .78rem; }
@media (max-width: 900px) {
  .ptm-ftrust__inner { display: flex; overflow-x: auto; scrollbar-width: none; }
  .ptm-ftrust__inner::-webkit-scrollbar { display: none; }
  .ptm-ftrust__item { min-width: 250px; }
}

.ptm-footer__note {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  padding: 8px 13px;
  font-size: .74rem; font-weight: 700;
  color: var(--ptm-lighter);
  border-radius: var(--r-pill);
  border: 1px solid rgba(125, 160, 239, .3);
  background: rgba(125, 160, 239, .08);
}
/* Icon per link. `i` is a plain box here, never italic text. */
.ptm-footer__col a { display: flex; align-items: center; gap: 10px; }
.ptm-footer__col a i,
.ptm-footer__addr i {
  flex: none;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  font-style: normal;
  color: var(--ptm-lighter);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ptm-footer__col a:hover i { color: #fff; background: var(--ptm-primary); border-color: var(--ptm-primary); }
.ptm-footer__addr { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; }
.ptm-footer__addr address { margin: 0; }
.ptm-footer__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ptm-footer__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  font-size: .82rem; font-weight: 700;
  color: #fff;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.ptm-footer__btn:hover { transform: translateY(-2px); padding-left: 15px; }
.ptm-footer__btn--wa { background: linear-gradient(140deg, #25D366, #128C7E); border-color: transparent; }

/* Social tiles carry their brand colour ALWAYS, not only under the cursor —
   the owner asked for effects that are already there. */
.ptm-footer__social a[aria-label="WhatsApp"]  { background: #25D366; border-color: transparent; }
.ptm-footer__social a[aria-label="Instagram"] { background: linear-gradient(45deg, #F09433, #DC2743 55%, #BC1888); border-color: transparent; }
.ptm-footer__social a[aria-label="Facebook"]  { background: #1877F2; border-color: transparent; }
.ptm-footer__social a[aria-label="YouTube"]   { background: #FF0000; border-color: transparent; }
.ptm-footer__social a { box-shadow: 0 6px 16px rgba(5, 13, 36, .3); }
.ptm-footer__social a:hover { transform: translateY(-3px) scale(1.04); }

.ptm-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ptm-footer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ptm-chip {
  padding: 6px 10px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  color: #e8edf6;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
}
.ptm-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------------------------------------------------------------------
   V9.14  NEWSLETTER ARTWORK, FOOTER LEGIBILITY, LAUNCHER PLACEMENT
   ------------------------------------------------------------------ */
.ptm-stay__art {
  position: relative;
  display: inline-flex;
  margin-bottom: 6px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(30, 58, 138, .16);
}
.ptm-stay__art img { display: block; width: 160px; height: auto; }
.ptm-stay__art .ptm-stay__ico {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, var(--ptm-primary), var(--ptm-navy-800));
  border-radius: 14px 0 16px 0;
}

/* The social tiles were white-on-8%-white: technically present, visually gone.
   The owner reported them as "not properly visible". Solid ground, full-strength
   icon, real border. */
.ptm-footer__social a {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
}
.ptm-footer__social a svg { opacity: 1; }
.ptm-footer__social a:hover { color: #fff; }

/* Launcher placement. It used to sit 74px up on phones, which lands it on the
   bottom nav's shadow and over the last footer row. Clear the nav properly and
   respect the iOS home indicator. */
@media (max-width: 900px) {
  .ptm-sup__launch {
    bottom: calc(var(--ptm-bottom-clear) + 12px);
    width: 52px; height: 52px;
  }
}
/* Nothing should end up underneath the launcher — give the last band room. */
.ptm-footer__bottom { padding-bottom: 8px; }
@media (max-width: 900px) { .ptm-footer__bottom { padding-bottom: calc(var(--ptm-bottom-clear) + 14px); } }

/* ---------------------------------------------------------------------
   V9.12  MOBILE SEARCH BAR (header + drawer)
   The phone header showed a bare magnifier. A field-shaped target reads as
   "search" without being learned, and it uses the width the condensed header
   frees up. Still a button — tapping opens the existing overlay, so there is
   one search surface, not two.
   ------------------------------------------------------------------ */
.ptm-msearch {
  display: none;              /* our own class: safe to set display on */
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0 8px;
  padding: 0 14px;
  color: var(--ptm-soft);
  background: var(--ptm-white);
  border: 1.5px solid var(--ptm-border);
  border-radius: var(--r-pill);
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-msearch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-msearch svg { flex: none; color: var(--ptm-primary); }
.ptm-msearch:hover, .ptm-msearch:focus-visible { border-color: var(--ptm-primary); box-shadow: 0 0 0 3px rgba(45, 91, 201, .12); }
@media (max-width: 767px) { .ptm-msearch { display: inline-flex; } }
/* Condensed header: the bar stays, it just tightens. */
.ptm-stickytop.is-scrolled .ptm-msearch { height: 34px; }

.ptm-mm__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 0 12px;
  background: var(--ptm-bg);
  border: 1.5px solid var(--ptm-border);
  border-radius: var(--r-pill);
}
.ptm-mm__search svg { flex: none; color: var(--ptm-primary); }
.ptm-mm__search input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  background: none;
  font-size: .92rem;
}
.ptm-mm__search input:focus { outline: none; }
.ptm-mm__search:focus-within { border-color: var(--ptm-primary); box-shadow: 0 0 0 3px rgba(45, 91, 201, .12); }
.ptm-mm__search button {
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: var(--ptm-primary);
  border: 0; border-radius: 50%;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   V9.13  "POPULAR WAYS TO SHOP" — boxes, not circles
   Owner's call, and it matches the rounded tiles used everywhere else now
   (category rail, "Find your perfect match", collections).
   ------------------------------------------------------------------ */
.ptm-crowd__img {
  border-radius: 20px;
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
  box-shadow: var(--ptm-shadow-xs);
}
.ptm-crowd__item { border-radius: 20px; }
.ptm-crowd__name { margin-top: 10px; font-size: .88rem; font-weight: 600; }
/* The circular ::before/::after halo some of these tiles carried only made
   sense on a round thumbnail. */
.ptm-crowd__img::before, .ptm-crowd__img::after { content: none; }

/* ---------------------------------------------------------------------
   V9.11  PAYMENT OPTIONS + POST-CHECKOUT (P2)
   COD is gone; the buyer now leaves checkout owing money, so both the choice
   and the follow-up have to be unambiguous.
   ------------------------------------------------------------------ */
.ptm-payopt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  margin-bottom: 10px;
  background: var(--ptm-white);
  border: 2px solid var(--ptm-border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ptm-payopt:hover { border-color: var(--ptm-lighter); }
.ptm-payopt:has(input:checked) { border-color: var(--ptm-primary); background: var(--ptm-lightest); }
.ptm-payopt input { margin-top: 3px; accent-color: var(--ptm-primary); }
.ptm-payopt__name { font-weight: 600; }
.ptm-payopt__note { font-size: .83rem; color: var(--ptm-mid); margin-top: 2px; line-height: 1.5; }
.ptm-payopt__due {
  margin-top: 7px;
  padding: 6px 10px;
  font-size: .82rem;
  color: var(--ptm-primary-deep);
  background: var(--ptm-white);
  border: 1px dashed var(--ptm-lighter);
  border-radius: 8px;
}
.ptm-payopt__legal { margin: 12px 0 0; font-size: .78rem; color: var(--ptm-soft); line-height: 1.6; }

.ptm-paynext {
  margin: 0 auto 30px;
  padding: 22px;
  text-align: left;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-left: 4px solid var(--ptm-primary);
  border-radius: var(--r-md);
  box-shadow: var(--ptm-shadow-sm);
}
.ptm-paynext h2 { margin: 0 0 10px; font-size: 1.15rem; }
.ptm-paynext__due { margin: 0 0 8px; font-size: 1rem; }
.ptm-paynext__due strong { color: var(--ptm-primary-deep); font-size: 1.2rem; }
.ptm-paynext__due span { display: block; font-size: .84rem; color: var(--ptm-mid); margin-top: 2px; }
.ptm-paynext__upi { margin: 0 0 8px; font-size: .95rem; }
.ptm-paynext__note { margin: 0 0 14px; font-size: .86rem; color: var(--ptm-mid); line-height: 1.65; }

/* The review initial sat on --ptm-water, a gradient that starts at #DBEAFE.
   White text on that top-left corner all but vanished, which is what made the
   avatar look doubled/mis-rendered (P2). Deep ground, legible letter. */
.ptm-review__avatar {
  background: linear-gradient(140deg, var(--ptm-primary) 0%, var(--ptm-navy-900) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(5, 13, 36, .35);
}

/* ---------------------------------------------------------------------
   V9.10  SHOP PAGE SIDEBAR + TOOLBAR (P1.7)
   The listing already had the reference's result count, sort control, filter
   drawer, per-option counts, active-filter chips, empty state and pagination.
   What it was missing from V3-reference-code.txt line 7476 is the sidebar that
   stays with you down a long grid, and a one-click way out of every filter.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-filter-panel {
    position: sticky;
    top: 124px;                 /* clears the pinned header + rail */
    align-self: start;
    max-height: calc(100dvh - 148px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .ptm-filter-panel::-webkit-scrollbar { width: 5px; }
  .ptm-filter-panel::-webkit-scrollbar-thumb { background: var(--ptm-lighter); border-radius: 4px; }
  .ptm-listing-grid { align-items: start; }
}
.ptm-filter-chips__clear {
  color: var(--ptm-rose) !important;
  background: transparent !important;
  border-color: currentColor !important;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   V9.9  FOOTER + NEWSLETTER (P1.5)
   Structure from the BREXX footer at V3-reference-code.txt line 24: dark
   ground, radial accent glow, oversized newsletter field, brand-coloured
   social tiles, icon-badged column headings. Sapphire throughout — the
   reference's green survives only where a third party owns the colour
   (WhatsApp), which is that brand's button, not a PTM background.
   ------------------------------------------------------------------ */
.ptm-stay { position: relative; overflow: hidden; }
.ptm-stay::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(45, 91, 201, .16) 0%, transparent 62%);
  pointer-events: none;
}
.ptm-stay__container { position: relative; z-index: 1; }
.ptm-stay__form { position: relative; }
@media (min-width: 620px) {
  /* Button rides inside the field, as in the reference. */
  .ptm-stay__form input { padding-right: 148px; height: 60px; border-radius: var(--r-pill); font-size: 1rem; }
  .ptm-stay__form .ptm-btn {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    height: 48px;
    padding-inline: 26px;
  }
  .ptm-stay__form .ptm-btn:hover { transform: translateY(-50%) scale(1.02); }
}
.ptm-stay__perks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin: 16px 0 0; padding: 0;
  list-style: none;
}
.ptm-stay__perks li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem;
  color: var(--ptm-mid);
  list-style: none;
}
.ptm-stay__perks svg { color: var(--ptm-primary); }

.ptm-footer { position: relative; overflow: hidden; }
.ptm-footer::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 0%, rgba(45, 91, 201, .28) 0%, transparent 48%),
              radial-gradient(circle at 88% 100%, rgba(30, 58, 138, .30) 0%, transparent 52%);
  pointer-events: none;
}
.ptm-footer__container { position: relative; z-index: 1; }
/* No padding and overflow:hidden — the artwork carries its own pale textured
   ground, so letting it fill the tile avoids a visible seam between the two
   near-whites. */
.ptm-footer__mark {
  display: inline-flex;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(5, 13, 36, .32);
}
.ptm-footer__mark img { display: block; width: 148px; height: auto; }
.ptm-footer__brand .row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ptm-footer__tag {
  font-family: var(--font-royal);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ptm-light);
}
.ptm-footer h4 { display: flex; align-items: center; gap: 9px; }
.ptm-footer__badge {
  width: 26px; height: 26px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ptm-lighter);
  background: rgba(125, 160, 239, .16);
  border-radius: 8px;
}
/* Brand-coloured social tiles, squared off like the reference. */
.ptm-footer__social a { width: 42px; height: 42px; border-radius: 12px; transition: transform .22s var(--ease), background .22s var(--ease); }
.ptm-footer__social a:hover { transform: translateY(-3px); padding-left: 0; }
.ptm-footer__social a[aria-label="WhatsApp"]:hover { background: #25D366; border-color: #25D366; }
.ptm-footer__social a[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #F09433, #DC2743 55%, #BC1888); border-color: transparent; }
.ptm-footer__social a[aria-label="Facebook"]:hover  { background: #1877F2; border-color: #1877F2; }
.ptm-footer__social a[aria-label="YouTube"]:hover    { background: #FF0000; border-color: #FF0000; }

/* ---------------------------------------------------------------------
   V9.8  SINGLE PRODUCT PAGE (P1.4)
   Sticky gallery ported from V3-reference-code.txt line 1782, whose gallery
   column is `position: sticky; top: …; align-self: start` inside a grid whose
   items align to the start. The offset clears the pinned header stack.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-gallery {
    position: sticky;
    /* Header (62) + rail (42) once condensed, plus breathing room. */
    top: 124px;
    align-self: start;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ptm-gallery { transition: none; }   /* never animate a sticky offset */
}

/* The discount badge sat on the same baseline row as the price and collided
   with it as soon as the number grew (P1.4). Give it its own chip that cannot
   overlap, and let the row wrap instead of squeezing. */
.ptm-spp__price-row { flex-wrap: wrap; row-gap: 6px; align-items: center; }
.ptm-spp__price { line-height: 1.15; }
.ptm-spp__off {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  font-size: .78rem;
  line-height: 1;
  color: #0A6B33;
  background: #E7F6ED;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.ptm-spp__sub {
  max-width: 58ch;
  margin: 0;
  line-height: 1.65;
}
.ptm-spp__price-row { margin-top: 2px; }
.ptm-spp__tax { margin-top: -10px; }

.ptm-spp__usp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
}
.ptm-spp__trust {
  overflow: hidden;
  margin-top: 4px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 16px;
}
.ptm-spp__cod {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  color: var(--ptm-navy-900);
  background: var(--ptm-lightest);
  border-bottom: 1px solid var(--ptm-border);
  font-size: .86rem;
  line-height: 1.5;
}
.ptm-spp__cod-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--ptm-primary-deep);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(10, 26, 58, .08);
}
.ptm-spp__trust .ptm-spp__usp {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}
.ptm-spp__trust .ptm-spp__usp li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  grid-template-columns: none;
  gap: 8px;
  padding: 16px 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ptm-border);
  border-radius: 0;
  box-shadow: none;
}
.ptm-spp__trust .ptm-spp__usp li:last-child { border-right: 0; }
.ptm-spp__usp li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 12px 12px 11px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 14px;
  box-shadow: var(--ptm-shadow-xs);
}
.ptm-spp__usp-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border-radius: 12px;
}
.ptm-spp__usp-ico svg { display: block; }
.ptm-spp__usp strong {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ptm-navy-900);
}
.ptm-spp__usp small {
  display: block;
  margin-top: 2px;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--ptm-soft);
}
@media (min-width: 992px) {
  .ptm-spp__usp { gap: 12px; }
  .ptm-spp__usp li { padding: 14px 14px 13px; }
}
@media (max-width: 620px) {
  .ptm-spp__trust .ptm-spp__usp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptm-spp__trust .ptm-spp__usp li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 6px 11px;
    border-right: 1px solid var(--ptm-border);
    border-top: 0;
  }
  .ptm-spp__trust .ptm-spp__usp li:last-child { border-right: 0; }
  .ptm-spp__trust .ptm-spp__usp-ico { width: 32px; height: 32px; }
  .ptm-spp__trust .ptm-spp__usp strong { font-size: .68rem; }
  .ptm-spp__trust .ptm-spp__usp small { font-size: .62rem; }
}

.ptm-spp__desc {
  margin-top: clamp(36px, 5vw, 72px);
  padding: clamp(22px, 3.4vw, 40px) clamp(16px, 3vw, 36px);
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(10, 26, 58, .06);
}
.ptm-spp__desc-head {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ptm-border);
}
.ptm-spp__desc-head > span {
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ptm-primary-deep);
}
.ptm-spp__desc-head h2,
.ptm-spp__desc-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ptm-navy-900);
}
.ptm-spp__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}
.ptm-spp__facts > div {
  min-width: 0;
  padding: 14px 16px;
  background: var(--ptm-lightest);
  border: 1px solid var(--ptm-border);
  border-radius: 14px;
}
.ptm-spp__facts span {
  display: block;
  margin-bottom: 4px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ptm-soft);
}
.ptm-spp__facts strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--ptm-navy-900);
}
.ptm-spp__copy {
  margin-top: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.ptm-spp__copy--split {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .ptm-spp__copy--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 28px 48px;
    align-items: start;
  }
}
.ptm-spp__copy-prose p,
.ptm-spp__copy p {
  margin: 0 0 14px;
  max-width: 68ch;
  color: var(--ptm-mid);
  font-size: .95rem;
  line-height: 1.8;
}
.ptm-spp__copy-prose p:last-child,
.ptm-spp__copy p:last-child { margin-bottom: 0; }
.ptm-spp__copy ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  border-top: 0;
}
.ptm-spp__copy li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 11px 0;
  color: var(--ptm-mid);
  font-size: .86rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--ptm-border);
}
.ptm-spp__copy li:last-child { padding-bottom: 0; border-bottom: 0; }
.ptm-spp__copy-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border-radius: 50%;
}
.ptm-spp__copy li strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ptm-navy-900);
}
.ptm-spp__copy-prose {
  margin-top: 22px;
}
.ptm-spp__excel {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
}
.ptm-spp__excel h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ptm-navy-900);
}
.ptm-spp__excel ul { margin: 0; padding: 0; list-style: none; }
.ptm-spp__excel li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ptm-border);
  color: var(--ptm-mid);
  font-size: .9rem;
  line-height: 1.5;
}
.ptm-spp__excel li:last-child { border-bottom: 0; padding-bottom: 0; }
.ptm-spp__shots {
  overflow: hidden;
  margin-top: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ptm-spp__shots-track {
  display: flex;
  width: max-content;
  animation: ptm-rev-loop-forward 36s linear infinite;
}
.ptm-spp__shots-group { display: flex; gap: 12px; padding-right: 12px; }
.ptm-spp__shots img {
  height: 220px;
  width: auto;
  border-radius: 14px;
  object-fit: cover;
  background: var(--ptm-lightest);
}
.ptm-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ptm-navy-900);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px rgba(10, 26, 58, .16);
  transform: translateY(-50%);
  cursor: pointer;
}
.ptm-gallery__nav--prev { left: 12px; }
.ptm-gallery__nav--next { right: 12px; }
.ptm-gallery__main .ptm-ribbon { z-index: 5; }
.ptm-atcbar__off {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ptm-rose);
  color: #fff;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}
.ptm-look { margin-top: clamp(56px, 7vw, 88px); }
.ptm-look__viewport { overflow: hidden; padding: 6px 0 10px; }
.ptm-look__track { display: flex; width: max-content; }
.ptm-look__viewport--loop .ptm-look__track { animation: ptm-rev-loop-forward 48s linear infinite; }
.ptm-look__viewport--loop:hover .ptm-look__track { animation-play-state: paused; }
.ptm-look__group { display: flex; gap: 18px; padding-right: 18px; }
.ptm-look__group .ptm-card { flex: 0 0 260px; width: 260px; }
.ptm-pdp-reviews__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ptm-pdp-reviews__track { display: flex; width: max-content; animation: ptm-rev-loop-forward 42s linear infinite; }
.ptm-pdp-reviews__viewport:hover .ptm-pdp-reviews__track { animation-play-state: paused; }
.ptm-pdp-reviews__group { display: flex; gap: 16px; padding-right: 16px; }
.ptm-pdp-reviews__group .ptm-revcard { flex: 0 0 288px; width: 288px; }
@media (max-width: 767px) {
  .ptm-look__viewport,
  .ptm-pdp-reviews__viewport,
  .ptm-spp__shots {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    -webkit-overflow-scrolling: touch;
  }
  .ptm-look__viewport--loop .ptm-look__track,
  .ptm-pdp-reviews__track,
  .ptm-spp__shots-track { animation: none; }
  .ptm-look__group[aria-hidden="true"],
  .ptm-pdp-reviews__group[aria-hidden="true"],
  .ptm-spp__shots-group[aria-hidden="true"] { display: none; }
  .ptm-look__group .ptm-card { flex-basis: min(72vw, 280px); width: min(72vw, 280px); }
  .ptm-spp__shots img { height: 180px; }
}
@media (max-width: 620px) {
  .ptm-spp__info { gap: 13px; }
  .ptm-spp__price-row { padding-block: 10px; }
  .ptm-spp__facts { grid-template-columns: 1fr 1fr; }
  .ptm-spp__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ptm-spp__usp li { padding: 11px 10px; gap: 8px; grid-template-columns: 36px minmax(0, 1fr); }
  .ptm-spp__usp-ico { width: 36px; height: 36px; border-radius: 10px; }
  .ptm-spp__desc { padding: 18px 14px; border-radius: 18px; }
  .ptm-spp__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 48px;
    gap: 8px;
  }
  .ptm-spp__actions .ptm-btn { min-width: 0; padding-inline: 8px; white-space: nowrap; }
}

/* Real stone colour, one chip, with its real name (P1.4). */
.ptm-stone { display: inline-flex; align-items: center; gap: 10px; }
.ptm-stone__dot {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  /* Inset ring keeps pale stones (pearl, moonstone) visible on white. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18), 0 3px 8px rgba(15, 23, 42, .14);
}
.ptm-stone__name { font-size: .92rem; font-weight: 600; color: var(--ptm-navy-900); }

/* Offers: compact on phones. The chevron makes it obvious it opens. */
.ptm-spp__offers > summary { list-style: none; }
.ptm-spp__offers > summary::-webkit-details-marker { display: none; }
.ptm-spp__offers > summary::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: 4px;
  border-right: 2px solid var(--ptm-mid);
  border-bottom: 2px solid var(--ptm-mid);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.ptm-spp__offers[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (max-width: 767px) {
  .ptm-spp__offers { padding: 0 12px; }
  .ptm-spp__offers > summary { padding: 11px 0; font-size: .87rem; }
  .ptm-spp__offer { font-size: .82rem; }
}

/* ---------------------------------------------------------------------
   V9.6  VIDEO CARROUSEL (P1.2)
   Ported from KnittingFur "Pet Stories v4" — V3-reference-code.txt line 406.
   The four things that stop the mobile black flash are all here: poster behind
   the iframe, iframe fading in only once loaded, load-once lazy activation (in
   index.php), and GPU layer promotion on the frame.
   ------------------------------------------------------------------ */
.ptm-vidrow { position: relative; margin-top: 30px; }
.ptm-vidrow__track {
  display: flex;
  gap: 18px;
  padding: 6px clamp(16px, 5vw, 72px) 26px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: flex-start;
}
.ptm-vidrow__track::-webkit-scrollbar { display: none; }
/* With one or two films there is nothing to scroll — centre them instead of
   leaving a wide gap on the right. */
.ptm-vidrow:not(.ptm-vidrow--scroll) .ptm-vidrow__track { justify-content: center; flex-wrap: wrap; }

.ptm-vidcard {
  flex: 0 0 clamp(220px, 62vw, 286px);
  width: clamp(220px, 62vw, 286px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 20px;
  box-shadow: var(--ptm-shadow-sm);
  scroll-snap-align: start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (hover: hover) {
  .ptm-vidcard:hover { transform: translateY(-5px); box-shadow: var(--ptm-shadow-lg); }
}
.ptm-vidcard__frame {
  position: relative;
  width: 100%;
  /* 9:16 like the reference (V3 line 506). The craft clips in the videos table
     are vertical YouTube Shorts; a 16:9 card letterboxed every one of them.
     If a landscape film is ever added, change this one value. */
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--ptm-navy-950);
  /* GPU promotion — this is what actually stops mobile Safari/Chrome repaint
     flashes when the iframe swaps in. Do not remove. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Poster sits BEHIND the player, so any iframe repaint blends into the frame
   instead of flashing black. */
.ptm-vidcard__poster {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ptm-navy-950) center/cover no-repeat;
}
.ptm-vidcard__frame iframe,
.ptm-vidcard__frame video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
  opacity: 0;                       /* fades in on load — never pops */
  transition: opacity .5s var(--ease);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ptm-vidcard__frame iframe.is-loaded,
.ptm-vidcard__frame video.is-loaded { opacity: 1; }

.ptm-vidcard__open {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ptm-navy-900);
  background: rgba(255, 255, 255, .92);
  border: 0; border-radius: 50%;
  box-shadow: var(--ptm-shadow-md);
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.ptm-vidcard__open:hover { transform: scale(1.08); background: #fff; }
.ptm-vidcard__body { padding: 14px 16px 18px; }
.ptm-vidcard__body h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.ptm-vidcard__body p { margin: 6px 0 0; font-size: .84rem; line-height: 1.55; color: var(--ptm-mid); }

.ptm-vidrow__arrow {
  position: absolute;
  top: calc(50% - 40px);
  z-index: 3;
  width: 42px; height: 42px;
  display: none;
  align-items: center; justify-content: center;
  color: var(--ptm-navy-900);
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 50%;
  box-shadow: var(--ptm-shadow-md);
  cursor: pointer;
}
.ptm-vidrow__arrow--prev { left: clamp(6px, 2vw, 26px); }
.ptm-vidrow__arrow--next { right: clamp(6px, 2vw, 26px); }
@media (min-width: 900px) { .ptm-vidrow__arrow { display: inline-flex; } }
.ptm-vidrow__meta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0;
  font-size: .82rem;
  color: var(--ptm-soft);
}

/* ---------------------------------------------------------------------
   V9.7  MARQUEE HALF-GAP CORRECTION (P1.3, P0.5)

   `@keyframes ptm-marquee` in ptm.css slides a track by exactly -50%. That is
   only correct when the two halves butt together with no gap. These tracks are
   `display: flex; gap: 18px`, so for N cards duplicated to 2N the width is
   2N*card + (2N-1)*gap — half of which is one gap SHORT of a full period. The
   loop therefore snapped back 9px every cycle: the "visible jump" in the work
   order, on the reviews row and the category belt alike.

   The reference solves it with `translateX(calc(-50% - 9px))`
   (V3-reference-code.txt line 1201, where 9px is half of its 18px gap). Same
   correction here, but derived from --gap so it cannot drift if the gap
   changes. Both halves stay byte-identical — they are printed from one PHP
   array — which is the other half of the requirement.
   ------------------------------------------------------------------ */
@keyframes ptm-marquee-gapped {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--gap, 18px) / 2))); }
}
.ptm-revloop__track {
  --gap: 18px;
  gap: var(--gap);
  animation-name: ptm-marquee-gapped;
}
.ptm-shoploop--loop .ptm-shoploop__track {
  --gap: 16px;              /* must match the base rule's gap */
  gap: var(--gap);
  animation-name: ptm-marquee-gapped;
}

/* These two rules override only the NAME half of an `animation` shorthand, so
   they also outrank the `animation: none` in the reduced-motion block further
   up this file (which is earlier in the cascade). Re-assert it here, or a
   visitor who asked for no motion gets the marquee back. */
@media (prefers-reduced-motion: reduce) {
  .ptm-revloop__track,
  .ptm-shoploop--loop .ptm-shoploop__track { animation-name: none; }
}

/* ---------------------------------------------------------------------
   V9.1  MOTION OVERRIDE — why the reviews row looked dead

   `ptm.css` line 2615 flattens EVERYTHING under prefers-reduced-motion:
       *, *::before, *::after { animation-duration: .01ms !important; … }
   Windows "Show animations = Off" reports that query, and the owner's machine
   has it off — so the reviews marquee, the category belt and the announcement
   bar were frozen for him while looking fine to everyone else.

   `html.ptm-force-motion` (set in includes/header.php from Settings →
   force_motion) hands the movement back. `!important` here is not decoration:
   the rule it must beat is itself `!important`, and (0,2,1) > (0,0,0) only
   settles the tie once both carry it.

   Anything that merely fades or lifts stays flattened — this is deliberately
   scoped to the three continuous marquees, not to hovers and transitions.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.ptm-force-motion .ptm-revloop__track {
    animation-name: ptm-marquee-gapped !important;
    animation-duration: 62s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html.ptm-force-motion .ptm-shoploop--loop .ptm-shoploop__track {
    animation-name: ptm-marquee-gapped !important;
    animation-duration: 38s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  /* The top bar is driven by JS transform, not CSS, so it needs no rule here —
     see the tbForce branch in ptm.js. */
  html.ptm-force-motion .ptm-vidcard__frame iframe,
  html.ptm-force-motion .ptm-vidcard__frame video {
    transition-duration: .5s !important;   /* poster→player fade, or it pops */
  }

  /* The reduced-motion fallbacks turn each marquee into a manual scroller and
     DELETE its mirrored half (a second copy is pointless when nothing slides).
     Forcing motion has to undo all three, or the belt would slide once and then
     run into empty space. */
  html.ptm-force-motion .ptm-revloop,
  html.ptm-force-motion .ptm-shoploop--loop {
    overflow: hidden !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) !important;
  }
  html.ptm-force-motion .ptm-review[aria-hidden="true"],
  html.ptm-force-motion .ptm-shoploop--loop .ptm-shoptile[aria-hidden="true"],
  html.ptm-force-motion .ptm-tb__msg[aria-hidden="true"] { display: flex !important; }
  html.ptm-force-motion .ptm-revbar__fill { transition-duration: 1.35s !important; }
}

/* Phone: swipe with snap instead of animating, and show only the first half —
   a marquee you cannot pause is worse than a scroller you control. */
@media (max-width: 767px) {
  .ptm-revloop { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ptm-revloop::-webkit-scrollbar { display: none; }
  .ptm-revloop__track { animation: none; width: max-content; padding-inline: 16px; }
  .ptm-revloop .ptm-review { scroll-snap-align: center; }
  .ptm-revloop .ptm-review[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------------
   V9.5  HERO BADGE — the second stray blue line (P0.3)

   `.ptm-hero__badge` is styled by ptm.css as a shrink-wrapped pill:
   `display: inline-flex`, white ground, 1px --ptm-lighter border, plus a
   `::before` pulse dot. V8 then put `.ptm-swap` on the SAME element, and
   `.ptm-swap { display: grid }` (sapphire, later in the cascade, equal
   specificity) beat `inline-flex`. Consequences, both visible at 1280:
     - the pill stopped hugging its text and stretched the full column, so its
       border rendered as a ~590px blue rule across the hero;
     - the ::before dot became a grid item stacked in cell 1/1 instead of an
       inline flex child, leaving a stray blue mark under the text.

   Fix: the swap container carries layout only; the pill moves onto the slides,
   where a shrink-wrapped inline-flex is what it always wanted to be.
   ------------------------------------------------------------------ */
.ptm-hero__badge.ptm-swap {
  display: inline-grid;      /* shrink-wraps to the widest slide */
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.ptm-hero__badge.ptm-swap::before { content: none; }
.ptm-hero__badge.ptm-swap > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--ptm-white);
  border: 1px solid var(--ptm-lighter);
  box-shadow: var(--ptm-shadow-sm);
}
.ptm-hero__badge.ptm-swap > span::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ptm-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .25);
  animation: ptm-pulse 2s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   V9.4  SUPPORT WIDGET — Chat / WhatsApp / Call (P0.2, P0.3, P1.1)

   Replaces `.ptm-chat*` wholesale. Two bugs died with the old markup:
   the launcher was never clickable, and `.ptm-chat-btn__ping` (absolute,
   inset:0) resolved against `.ptm-chat-launch` because the button had been
   forced to `position: static !important` — painting a wide blue ring across
   the page. Nothing here is absolutely positioned against an ancestor it does
   not own: the launcher is its own positioned box.

   Sapphire gradient only. The single green is the WhatsApp CTA, which is that
   product's own brand colour on its own button — not a brand background.
   ------------------------------------------------------------------ */
.ptm-sup__launch {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 58;
  width: 58px; height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, var(--ptm-primary), var(--ptm-navy-800));
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(30, 58, 138, .34);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ptm-sup__launch:hover { transform: scale(1.06); box-shadow: 0 16px 38px rgba(30, 58, 138, .42); }
.ptm-sup__launch-ico { display: inline-flex; }
.ptm-sup__launch-ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (max-width: 900px) { .ptm-sup__launch { bottom: calc(var(--ptm-bottom-clear) + 12px); } }

/* Online dot, offset against its own parent.
   BUG THIS FIXES: this rule used to read `.ptm-sup__launch, .ptm-sup__avatar
   { position: relative }` — and being later in the file it beat the
   `position: fixed` declared above, dropping the launcher out of fixed
   positioning and into normal flow at the very bottom of the document. That is
   the "chat button placement is wrong" report. The launcher does NOT need
   `relative`: a fixed element is already a containing block for its
   absolutely-positioned children, so the dot anchors correctly either way.
   Only the header avatar needs it. */
.ptm-sup__avatar { position: relative; }
.ptm-sup__dot {
  position: absolute;
  right: 2px; bottom: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 2.5px var(--ptm-white);
}
.ptm-sup__launch .ptm-sup__dot { right: 3px; bottom: 3px; }

/* Trap #3: an author `display` beats the UA's `[hidden]{display:none}`. Without
   both rules below this panel stays laid out and eats clicks site-wide. */
.ptm-sup[hidden] { display: none !important; }
.ptm-sup {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: clamp(12px, 3vw, 26px);
  background: rgba(5, 13, 36, .34);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}
.ptm-sup.is-open { opacity: 1; pointer-events: auto; }

.ptm-sup__panel {
  width: min(380px, 100%);
  max-height: min(600px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ptm-white);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(5, 13, 36, .38);
  transform: translateY(16px) scale(.98);
  transition: transform .24s var(--ease);
}
.ptm-sup.is-open .ptm-sup__panel { transform: none; }
@media (max-width: 520px) {
  .ptm-sup { padding: 0; align-items: stretch; }
  .ptm-sup__panel { width: 100%; max-height: 100dvh; border-radius: 0; }
}

.ptm-sup__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--ptm-primary) 0%, var(--ptm-navy-800) 55%, var(--ptm-navy-900) 100%);
}
.ptm-sup__avatar {
  width: 42px; height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.ptm-sup__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ptm-sup__id { display: grid; min-width: 0; }
.ptm-sup__id strong { font-family: var(--font-body, Inter), sans-serif; font-size: .98rem; font-weight: 600; }
.ptm-sup__id span { font-size: .74rem; color: rgba(255, 255, 255, .82); }
.ptm-sup__x {
  margin-left: auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.ptm-sup__x:hover { background: rgba(255, 255, 255, .26); }

.ptm-sup__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ptm-navy-900);
}
.ptm-sup__tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px;
  font-family: var(--font-royal);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ptm-sup__tabs button.is-on { color: #fff; border-bottom-color: var(--ptm-light); }
.ptm-sup__tabs button:hover { color: #fff; }

.ptm-sup__pane { display: none; flex-direction: column; min-height: 0; flex: 1; }
.ptm-sup__pane.is-on { display: flex; }
.ptm-sup__pane[hidden] { display: none; }

.ptm-sup__log {
  flex: 1;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  overflow-y: auto;
  background: var(--ptm-bg);
}
.ptm-sup__msg {
  max-width: 85%;
  padding: 9px 13px 7px;
  font-size: .87rem;
  line-height: 1.5;
  border-radius: 16px;
  overflow-wrap: anywhere;
}
.ptm-sup__msg time { display: block; margin-top: 3px; font-size: .64rem; opacity: .6; }
.ptm-sup__msg--bot  { align-self: flex-start; background: var(--ptm-white); border: 1px solid var(--ptm-border); border-bottom-left-radius: 5px; }
.ptm-sup__msg--user { align-self: flex-end; color: #fff; background: var(--ptm-primary-deep); border-bottom-right-radius: 5px; }

.ptm-sup__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px 0; background: var(--ptm-bg); }
.ptm-sup__chips button {
  padding: 7px 13px;
  font-size: .77rem;
  font-weight: 600;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border: 1px solid var(--ptm-lighter);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ptm-sup__chips button:hover { color: #fff; background: var(--ptm-primary); border-color: var(--ptm-primary); }

.ptm-sup__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ptm-bg);
}
.ptm-sup__form input {
  min-width: 0;
  padding: 11px 15px;
  border: 1.5px solid var(--ptm-border);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: .89rem;
}
.ptm-sup__form input:focus { outline: none; border-color: var(--ptm-primary); box-shadow: 0 0 0 3px rgba(45, 91, 201, .14); }
.ptm-sup__form button {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, var(--ptm-primary), var(--ptm-navy-800));
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.ptm-sup__form button[disabled] { opacity: .55; cursor: default; }

.ptm-sup__cta-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 24px 30px;
  text-align: center;
}
.ptm-sup__cta-ico {
  width: 68px; height: 68px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border-radius: 50%;
}
.ptm-sup__cta-ico--wa { color: #128C7E; background: #E4F5EC; }
.ptm-sup__cta-wrap h4 { margin: 4px 0 0; font-size: 1.14rem; }
.ptm-sup__cta-wrap p { margin: 0; max-width: 27ch; font-size: .87rem; color: var(--ptm-mid); }
.ptm-sup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 6px;
  padding: 13px 18px;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(140deg, var(--ptm-primary), var(--ptm-navy-800));
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-sup__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 58, 138, .3); }
.ptm-sup__cta--wa { background: linear-gradient(140deg, #25D366, #128C7E); }
.ptm-sup__cta--wa:hover { box-shadow: 0 12px 26px rgba(18, 140, 126, .34); }
.ptm-sup__num { font-size: 1rem; font-weight: 600; color: var(--ptm-navy-900); letter-spacing: .02em; }
.ptm-sup__hours { margin-top: auto; padding-top: 12px; font-size: .78rem; color: var(--ptm-soft); }

@media (prefers-reduced-motion: reduce) {
  .ptm-sup, .ptm-sup__panel, .ptm-sup__launch, .ptm-sup__cta { transition: none; }
}

/* =====================================================================
   V9.3 — HEADER RE-LAYOUT, FOOTER REBUILD, CMS PAGES
   Loaded AFTER the V9.2 block below, so where the two overlap this wins.
   Everything header-side is gated >=992px; the phone header is untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   V9.3a  HEADER — three zones: logo | search | actions
   The top nav row (Home/All Jewellery/About/Contact) is gone from the markup.
   With it removed the search can finally take the middle, which is the layout
   the owner asked for and the one his reference file implements.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 34px;
    align-items: center;
  }
  .ptm-logo__img { width: 44px; height: 44px; }     /* was 52 — it dominated */
  .ptm-logo__brand { font-size: 1.45rem; }

  /* NOT setting `display` here — non-negotiable #6 owns that for .ptm-search. */
  .ptm-search { max-width: none; width: 100%; }
  .ptm-search input {
    height: 52px;
    padding: 0 116px 0 44px;
    font-size: .95rem;
    border-radius: 16px;
    background: var(--ptm-white);
    box-shadow: 0 3px 12px rgba(7, 37, 85, .06);
  }
  .ptm-search svg { left: 16px; }
  /* Solid submit riding inside the field, as in the reference. */
  .ptm-search::after {
    content: "Search";
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 96px; height: 40px;
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ptm-primary), var(--ptm-navy-800));
    border-radius: 12px;
    pointer-events: none;
  }

  /* Actions: glyph over a small caption (reference .action). */
  .ptm-header__actions { gap: 4px; }
  /* column-REVERSE: the caption <span> is written before the glyph in the
     markup (it is appended right after the opening tag on four different
     controls, two of which are inside PHP conditionals), so flipping here is a
     one-line fix rather than four fragile string edits. Reading order stays
     label-then-icon, which is also what a screen reader wants. */
  .ptm-header__actions .ptm-icon-btn {
    flex-direction: column-reverse;
    gap: 3px;
    width: auto;
    min-width: 62px;
    height: auto;
    padding: 7px 8px;
    border-radius: 12px;
  }
  .ptm-icon-btn__lbl { font-size: .68rem; font-weight: 700; letter-spacing: .01em; }
  /* Badge belongs on the glyph, which now sits at the TOP of the stack. */
  .ptm-header__actions .ptm-icon-btn .ptm-badge { top: 2px; right: 9px; }
}
/* The caption is desktop-only; the phone keeps its circular icon buttons. */
.ptm-icon-btn__lbl { display: none; }
@media (min-width: 992px) { .ptm-icon-btn__lbl { display: block; } }

/* =====================================================================
   UI REBUILD — TASK 1: DESKTOP HEADER / CATEGORY RAIL
   The phone header deliberately has no selectors in this block. Its category
   photo tiles remain the approved mobile treatment.
   ================================================================== */
@media (min-width: 992px) {
  .ptm-header__inner {
    grid-template-columns: 240px minmax(420px, 1fr) 225px;
    gap: 34px;
    min-height: 82px;
  }

  /* Three real controls: category filter | term | submit. The pre-existing
     standalone search icon is retained in markup for the phone cascade, then
     suppressed only inside this desktop composition. */
  .ptm-search {
    grid-template-columns: 165px minmax(0, 1fr) 62px;
    align-items: stretch;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(15, 36, 86, .22);
    border-radius: 14px;
    background: var(--ptm-white);
    box-shadow: 0 4px 14px rgba(7, 37, 85, .07);
  }
  .ptm-search > svg { display: none; }
  .ptm-search select,
  .ptm-search input,
  .ptm-search button {
    min-width: 0;
    height: 50px;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .ptm-search select {
    appearance: none;
    padding: 0 34px 0 16px;
    border-right: 1px solid rgba(15, 36, 86, .16);
    color: var(--ptm-navy-900);
    font: 700 .73rem/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    background: var(--ptm-offwhite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F2456' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat;
  }
  .ptm-search input {
    padding: 0 16px;
    color: var(--ptm-text);
    font-size: .92rem;
    background: var(--ptm-white);
  }
  .ptm-search input:focus,
  .ptm-search select:focus { outline: 2px solid var(--ptm-primary); outline-offset: -2px; }
  .ptm-search button {
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background: var(--ptm-primary-deep);
    transition: background .2s var(--ease), transform .2s var(--ease);
  }
  .ptm-search button:hover { background: var(--ptm-navy-800); }
  .ptm-search button:focus-visible { outline: 3px solid var(--ptm-light); outline-offset: -4px; }
  .ptm-search button svg { position: static; color: currentColor; }
  .ptm-search::after { content: none; }

  .ptm-header__actions { justify-content: flex-end; gap: 2px; }
  .ptm-header__actions .ptm-icon-btn { min-width: 64px; padding: 7px 6px; }
  .ptm-icon-btn__lbl { font-size: .75rem; font-weight: 800; }

  /* Template-parity rail: a single sapphire bar, equal icon/label cells and
     restrained dividers. The specificity matches .ptm-hcat a from ptm.css. */
  .ptm-hcat {
    border: 0;
    background: linear-gradient(100deg, var(--ptm-navy-950), var(--ptm-navy-800) 52%, var(--ptm-navy-900));
  }
  .ptm-hcat .ptm-container { max-width: 1280px; }
  .ptm-hcat .ptm-hcat__inner {
    min-height: 62px;
    padding: 0;
    gap: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega,
  .ptm-hcat a.ptm-mega__trigger {
    min-width: 0;
    min-height: 62px;
    margin: 0;
    border-radius: 0;
  }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega { flex: 1 1 0; }
  .ptm-hcat .ptm-hcat__inner > .ptm-mega { display: flex; position: static; }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger {
    justify-content: center;
    gap: 7px;
    padding: 10px 8px;
    color: rgba(255, 255, 255, .92);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, .20);
  }
  .ptm-hcat .ptm-hcat__inner > a:first-child,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega:first-child a { border-left: 0; }
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before { content: none; }
  .ptm-hcat .ptm-hcat__inner > a > svg,
  .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    position: static;
    width: 19px;
    height: 19px;
    flex: none;
    color: var(--ptm-lighter);
    transform: none;
  }
  .ptm-hcat a.ptm-mega__trigger { width: 100%; }
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret {
    display: block;
    width: 13px;
    height: 13px;
    margin-left: -3px;
    color: var(--ptm-lighter);
  }
  .ptm-hcat .ptm-hcat__inner > a:hover,
  .ptm-hcat a.ptm-mega__trigger:hover,
  .ptm-mega:hover .ptm-mega__trigger,
  .ptm-hcat .ptm-hcat__inner > a.is-active,
  .ptm-hcat a.ptm-mega__trigger.is-active { color: #fff; background: rgba(125, 160, 239, .18); }
  .ptm-hcat .ptm-hcat__inner > a:hover > svg,
  .ptm-hcat a.ptm-mega__trigger:hover > svg { color: #fff; }
  .ptm-hcat a.ptm-hcat__sale { color: var(--ptm-lighter); }
  .ptm-hcat a.ptm-hcat__sale > svg { color: var(--ptm-light); }
  .ptm-hcat .ptm-hcat__inner > a.is-active::after { content: none; }

  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner { min-height: 46px; padding: 0; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger { min-height: 46px; padding-block: 6px; font-size: .68rem; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) { width: 15px; height: 15px; }
}

/* ---------------------------------------------------------------------
   V9.3b  FOOTER — centred brand, permanent colour, no logo image
   ------------------------------------------------------------------ */
.ptm-footer__head { text-align: center; padding-bottom: 34px; }
.ptm-footer__lockup { display: inline-flex; align-items: center; gap: 14px; }
.ptm-footer__tile {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--ptm-primary), var(--ptm-navy-800));
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(45, 91, 201, .35);
}
.ptm-footer__names { display: grid; text-align: left; }
.ptm-footer__names strong { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; color: #fff; line-height: 1.1; }
.ptm-footer__names small {
  font-family: var(--font-royal);
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ptm-light);
}
.ptm-footer__blurb {
  max-width: 56ch;
  margin: 18px auto 20px;
  color: #c5d1e5;
  font-size: .95rem;
  line-height: 1.75;
}
.ptm-footer__head .ptm-footer__social { justify-content: center; }

.ptm-footer__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
/* Bare glyph, brand blue at rest. No box, and hover does NOT change the colour
   — the owner's point was that a colour only visible under the cursor is no
   colour at all. */
.ptm-footer__col a i,
.ptm-footer__addr i {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  flex: none;
  font-style: normal;
  color: var(--ptm-light);
  background: none;
  border: 0;
  border-radius: 0;
}
.ptm-footer__col a:hover i { color: var(--ptm-light); background: none; border: 0; }
.ptm-footer__col a { gap: 11px; }

.ptm-footer__cta { display: grid; gap: 10px; margin-top: 20px; }
.ptm-footer__btn {
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  font-size: .88rem;
}

.ptm-footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin: 34px auto 4px;
  padding: 15px 26px;
  width: max-content;
  max-width: 100%;
  color: var(--ptm-lighter);
  font-size: .84rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
}
.ptm-footer__badges span { display: inline-flex; align-items: center; gap: 8px; }
.ptm-footer__badges i { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); }
@media (max-width: 700px) { .ptm-footer__badges i { display: none; } }

/* ---------------------------------------------------------------------
   V9.3c  CMS PAGE HEADER (About / Contact) + supporting blocks
   ------------------------------------------------------------------ */
.ptm-cmshero {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: clamp(40px, 6vw, 76px) 0 clamp(34px, 5vw, 58px);
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 160, 239, .28), transparent 52%),
    linear-gradient(135deg, var(--ptm-navy-900) 0%, var(--ptm-navy-800) 62%, var(--ptm-navy-700) 100%);
}
.ptm-cmshero__crumb { font-size: .8rem; color: var(--ptm-lighter); margin-bottom: 16px; }
.ptm-cmshero__crumb a { color: var(--ptm-lighter); }
.ptm-cmshero__crumb a:hover { color: #fff; }
.ptm-cmshero__crumb span { opacity: .6; }
.ptm-cmshero__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 15px;
  font-family: var(--font-royal);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ptm-lighter);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-pill);
}
.ptm-cmshero h1 { margin: 0; font-size: clamp(2.1rem, 5vw, 3.4rem); color: #fff; }
.ptm-cmshero h1 em { font-style: italic; color: var(--ptm-light); }
.ptm-cmshero__lede { margin: 14px auto 0; max-width: 62ch; color: #c5d1e5; font-size: 1rem; }

.ptm-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: clamp(28px, 4vw, 48px) auto;
  max-width: 1040px;
}
.ptm-pillar {
  display: grid;
  gap: 6px;
  padding: 24px 22px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
  box-shadow: var(--ptm-shadow-sm);
}
.ptm-pillar__ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 6px;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border-radius: 14px;
}
.ptm-pillar strong { font-size: .98rem; color: var(--ptm-navy-900); }
.ptm-pillar span:last-child { font-size: .86rem; line-height: 1.6; color: var(--ptm-mid); }

.ptm-cmscta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  padding: clamp(22px, 3vw, 32px);
  color: #fff;
  background: linear-gradient(135deg, var(--ptm-navy-800), var(--ptm-primary));
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(10, 26, 58, .22);
}
.ptm-cmscta strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.ptm-cmscta span span, .ptm-cmscta div span { font-size: .9rem; color: rgba(255, 255, 255, .82); }
.ptm-cmscta .ptm-btn { background: #fff; color: var(--ptm-navy-900); flex: none; }
.ptm-cmscta .ptm-btn:hover { background: var(--ptm-offwhite); }

/* WhatsApp CTA on the contact page — its own brand green on its own button. */
.ptm-wabtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: #fff;
  background: linear-gradient(140deg, #25D366, #128C7E);
  border: 0;
}
.ptm-wabtn:hover { color: #fff; box-shadow: 0 12px 26px rgba(18, 140, 126, .34); }

/* ---------------------------------------------------------------------
   V9.3e  "POPULAR WAYS TO SHOP"

   NOTE: the trust row restyle that used to live here has been REVERTED.
   I had flattened those five pills into bare ringed icons copied from the
   reference's "Luxury Experience" row; the owner's verdict was that the
   original pills looked more professional and the new one did not. He is right
   — that row sits directly under the hero and the card treatment gives it the
   weight it needs there. ptm.css's own `.ptm-trust__pill` is back in charge;
   the only thing kept is a little more breathing room (V9.4 below).
   ------------------------------------------------------------------ */

/* Outlined collection boxes, per the reference's "Collections" strip. */
.ptm-crowd__item {
  padding: 14px 12px 16px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  box-shadow: var(--ptm-shadow-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ptm-crowd__item:hover {
  transform: translateY(-4px);
  border-color: var(--ptm-lighter);
  box-shadow: var(--ptm-shadow-md);
}
.ptm-crowd__img { border-radius: 14px; box-shadow: none; }

/* ---------------------------------------------------------------------
   V9.3d  REVIEW WALL — three vertical columns (owner's reference)
   Each column duplicates its own cards and travels exactly -50%, so every loop
   is seamless. The middle column runs the other way. Top and bottom are faded
   by a mask, which is what makes cards appear rather than get chopped.
   ------------------------------------------------------------------ */
.ptm-revwall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 30px;
}
@media (min-width: 768px)  { .ptm-revwall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .ptm-revwall { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.ptm-revwall__col {
  height: clamp(420px, 56vh, 620px);
  overflow: hidden;
  /* The fade is the whole point — without it the cards look guillotined. */
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
/* A phone gets one calm column, not three fighting over 390px. */
.ptm-revwall__col:nth-child(2) { display: none; }
.ptm-revwall__col:nth-child(3) { display: none; }
@media (min-width: 768px) { .ptm-revwall__col:nth-child(2) { display: block; } }
@media (min-width: 992px) { .ptm-revwall__col:nth-child(3) { display: block; } }

.ptm-revwall__track {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: ptm-revwall-down 46s linear infinite;
  will-change: transform;
}
.ptm-revwall__col--up .ptm-revwall__track { animation-name: ptm-revwall-up; }
/* Hovering anywhere in the wall stops all three, as in the reference.
   `.is-reading` does the same while a card is expanded, so the review you are
   reading does not scroll out from under you. */
.ptm-revwall:hover .ptm-revwall__track,
.ptm-revwall.is-reading .ptm-revwall__track { animation-play-state: paused; }

/* Same half-gap correction as the horizontal marquees: the track is a flex
   column with a gap, so half its height is one gap short of a full period. */
@keyframes ptm-revwall-down {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - 9px)); }
}
@keyframes ptm-revwall-up {
  from { transform: translateY(calc(-50% - 9px)); }
  to   { transform: translateY(0); }
}

.ptm-revwall .ptm-review {
  flex: none;
  width: auto;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ptm-revwall .ptm-review:hover { transform: scale(1.03); box-shadow: var(--ptm-shadow-lg); }

/* Motion override (V9.1): the blanket reduced-motion rule freezes this too. */
@media (prefers-reduced-motion: reduce) {
  .ptm-revwall__track { animation-name: none; }
  html.ptm-force-motion .ptm-revwall__track {
    animation-name: ptm-revwall-down !important;
    animation-duration: 46s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html.ptm-force-motion .ptm-revwall__col--up .ptm-revwall__track { animation-name: ptm-revwall-up !important; }
  html.ptm-force-motion .ptm-revwall .ptm-review[aria-hidden="true"] { display: flex !important; }
}

/* =====================================================================
   V9.4 — REVIEW ROUND: placement, centring, legibility
   Each block below answers one reported complaint.
   ===================================================================== */

/* 1. SEARCH BAR — "still not highlighted", and 731px wide on a 1440 screen,
      which is the "बहुत लंबा" stretch. Cap it, centre it in its column, and
      give it a real sapphire ring so it reads as the primary control. */
@media (min-width: 992px) {
  .ptm-search { max-width: 560px; margin-inline: auto; }
  .ptm-search input {
    border: 1.5px solid var(--ptm-lighter);
    background: #fff;
    box-shadow: 0 2px 0 rgba(45, 91, 201, .06), 0 8px 22px rgba(10, 26, 58, .09);
  }
  .ptm-search:hover input { border-color: var(--ptm-light); }
  .ptm-search:focus-within input {
    border-color: var(--ptm-primary);
    box-shadow: 0 0 0 4px rgba(45, 91, 201, .16), 0 10px 26px rgba(10, 26, 58, .12);
  }
  .ptm-search svg { color: var(--ptm-primary); }
}

/* 2. CATEGORY RAIL — was hard left with a 449px hole on the right. */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner { justify-content: center; }
}

/* 3. TRUST ROW — reverted to ptm.css's pills (see V9.3e). Only the spacing is
      ours: the five pills were crammed edge to edge. */
.ptm-trust__grid { gap: clamp(10px, 1.6vw, 18px); }

/* 4. FREE-RUDRAKSHA GIFT BLOCK — square photo corners, and a ghost button that
      vanished into the panel behind it. */
.ptm-free__image { border-radius: 22px; overflow: hidden; }
.ptm-free__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.ptm-free__card .ptm-btn-ghost {
  color: var(--ptm-navy-900);
  background: #fff;
  border: 0;
  box-shadow: 0 10px 24px rgba(5, 13, 36, .28);
}
.ptm-free__card .ptm-btn-ghost:hover { background: var(--ptm-offwhite); color: var(--ptm-navy-900); }

/* 5. PRODUCT CARDS — the 600×800 media made every card a tall portrait, so the
      grid showed very little per screen and the copy sat far below the fold. */
.ptm-card__media, .ptm-card__media img { aspect-ratio: 1 / 1; }
.ptm-card__media img { object-fit: cover; }
@media (min-width: 992px) {
  .ptm-product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* 6. REVIEWS ARE READABLE — cards were fixed-height with the quote clipped and
      no way in. They open on click/Enter now (see ptm.js). */
.ptm-revwall .ptm-review { cursor: pointer; }
.ptm-revwall .ptm-review__quote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ptm-revwall .ptm-review.is-open .ptm-review__quote { -webkit-line-clamp: unset; overflow: visible; }
.ptm-review__more {
  align-self: flex-start;
  margin-top: 2px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ptm-primary-deep);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 7. FOOTER ON A PHONE — four columns and a centred lockup do not survive
      390px. Stack, left-align the lists so the eye has one rail to follow, and
      keep only the brand block centred. */
@media (max-width: 767px) {
  .ptm-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .ptm-footer__col--contact { grid-column: 1 / -1; }
  .ptm-footer__head { padding-bottom: 26px; }
  .ptm-footer__names strong { font-size: 1.4rem; }
  .ptm-footer__blurb { font-size: .88rem; margin: 14px auto 16px; }
  .ptm-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .ptm-footer__chips, .ptm-footer__legal { justify-content: center; }
  .ptm-footer__badges { width: 100%; justify-content: center; padding: 14px 16px; }
}
@media (max-width: 460px) {
  .ptm-footer__grid { grid-template-columns: 1fr; }
  .ptm-footer__col--contact { grid-column: auto; }
}

/* 8. FOOTER BOTTOM — the three groups were spread edge to edge and read as
      three unrelated things. Centre the whole band. */
.ptm-footer__bottom {
  justify-content: center;
  gap: 14px 30px;
  padding-top: 22px;
  margin-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}

/* 9. NEWSLETTER — it was a plain box. Give it the panel treatment the rest of
      the page now has, and centre everything inside it. */
.ptm-stay__card {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 4vw, 44px);
  text-align: center;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(10, 26, 58, .10);
}
.ptm-stay__card h2 { margin: 6px 0 6px; }
.ptm-stay__form { max-width: 520px; margin-inline: auto; }

/* 10. TYPE — Cinzel was carrying every eyebrow, tab and small-caps label, which
       is what made the page feel dated. It keeps the brand lockup only;
       everything else moves to Inter with wide tracking, which reads cleaner at
       small sizes and matches the reference stores. */
.ptm-section-head .eyebrow,
.ptm-cmshero__eyebrow,
.ptm-footer h4,
.ptm-sup__tabs button,
.ptm-mega__rail-head {
  font-family: var(--font-body, Inter), system-ui, sans-serif;
  letter-spacing: .16em;
  font-weight: 700;
}

/* =====================================================================
   V9.5 — three things reported as "odd" / "bhadda"
   ===================================================================== */

/* 1. THE DOUBLE QUOTE ON REVIEW AVATARS.
      ptm.css line 891 paints `.ptm-review::before { content:"\201C"; font-size:5rem;
      top:-8px; left:18px }` — a giant left-double-quote that lands exactly on
      top of the avatar circle. That is the "do colon" above the name. Gone.
      The avatar now carries a real photo when `testimonials.avatar_url` is set,
      and falls back to the initial. */
.ptm-review::before { content: none; }
.ptm-review__avatar { overflow: hidden; position: relative; }
.ptm-review__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 2. PHONE — "Find your perfect match" put two tiles on one line and orphaned
      the third. Three across, always. */
@media (max-width: 767px) {
  .ptm-shoploop:not(.ptm-shoploop--loop) .ptm-shoploop__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: initial;
  }
  .ptm-shoploop:not(.ptm-shoploop--loop) .ptm-shoptile { flex: initial; width: auto; }
  .ptm-shoploop:not(.ptm-shoploop--loop) .ptm-shoptile__label { font-size: .7rem; line-height: 1.25; }
}

/* 3. NEWSLETTER — the oversized logo tile I added was the wrong instinct: it
      dominated a block whose job is one field and one button. Down to a modest
      badge, and the panel breathes instead. */
.ptm-stay__art { border-radius: 14px; box-shadow: 0 8px 20px rgba(30, 58, 138, .12); }
.ptm-stay__art img { width: 86px; }
.ptm-stay__art .ptm-stay__ico { width: 28px; height: 28px; border-radius: 10px 0 12px 0; }
.ptm-stay__art .ptm-stay__ico svg { width: 15px; height: 15px; }

/* =====================================================================
   V9.6 — phone-rail regression from the Task-1 header rebuild
   =====================================================================
   Task 1 added `ptm_svg_icon($nav_icon, 18)` to every rail item so the DESKTOP
   bar could match the template. Those glyphs are emitted in the markup, so they
   also reached the PHONE rail — where a category is a photo tile plus a label
   and nothing else. They rendered in flow between the two, which is the leak
   caught by the mobile screenshot gate.

   Hidden below 992px only; the desktop bar keeps every icon. Written at
   (0,2,1) so it clears `ptm.css`'s `.ptm-hcat a` (0,1,1), and placed last in
   the file so it also clears the Task-1 rules, which are equally specific.

   The phone header is approved and must stay pixel-identical — see
   AGENTS.md and docs/HANDOFF_UI_REBUILD.md §2 rule 3.
   ------------------------------------------------------------------ */
/* `!important` is load-bearing here, not laziness.
   `ptm_svg_icon()` (includes/functions.php, last line) returns its markup with
   an INLINE `style="display:inline-block;vertical-align:middle"`. An inline
   declaration outranks every selector in every stylesheet unless the rule
   carries `!important`, so a plain `display: none` — however specific — cannot
   hide one of these glyphs. Two attempts at this fix failed for exactly that
   reason before the inline style was spotted.
   (The computed value reads `block` rather than `inline-block` because the rail
   item is a flex container and blockifies its children.) */
@media (max-width: 991px) {
  .ptm-hcat .ptm-hcat__inner > a > svg,
  .ptm-hcat a.ptm-mega__trigger > svg { display: none !important; }
}

/* ---------------------------------------------------------------------
   9. ACCESSIBILITY / NO-JS FALLBACKS
   ------------------------------------------------------------------ */

/* Without JS the observer never adds .in, so content would stay invisible.
   ptm.js sets .ptm-js on <html> immediately; until then, show everything. */
html:not(.ptm-js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ptm-section-head h2 em,
  .ptm-find__layer-head h3 em { animation: none; }
  .ptm-card:hover { transform: none; }
  .ptm-card:hover .ptm-card__media img { transform: none; }
  .ptm-btn-primary:hover { transform: none; }
}

/* Focus ring survives the restyle — never let the redesign eat it. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ptm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   UI REBUILD — TASK 1 FINAL CASCADE
   Desktop-only by contract: do not alter the approved phone header.
   ================================================================== */
.ptm-search select,
.ptm-search button { display: none; }
@media (max-width: 991px) {
  /* Header Task 1 adds rail icons for desktop. Keep the approved phone photo
     tiles exactly as they were by suppressing only the new inline SVGs. */
  .ptm-hcat .ptm-hcat__inner > a > i,
  .ptm-hcat a.ptm-mega__trigger > i,
  .ptm-hcat .ptm-hcat__inner > a > svg,
  .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) { display: none; }
}
@media (min-width: 992px) {
  .ptm-header__inner {
    grid-template-columns: 240px minmax(420px, 1fr) 225px;
    gap: 34px;
    min-height: 82px;
  }

  /* `.ptm-search` must retain its base display rule. Floated controls make the
     template's 165 | fluid | 62 split without changing that contract. */
  .ptm-search { max-width: none; width: 100%; height: 52px; overflow: hidden; border: 1px solid rgba(15, 36, 86, .22); border-radius: 14px; background: var(--ptm-white); box-shadow: 0 4px 14px rgba(7, 37, 85, .07); }
  .ptm-search > svg { display: none; }
  .ptm-search select,
  .ptm-search input,
  .ptm-search button { box-sizing: border-box; height: 50px; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .ptm-search select { display: block; float: left; width: 165px; appearance: none; padding: 0 34px 0 16px; border-right: 1px solid rgba(15, 36, 86, .16); color: var(--ptm-navy-900); font: 700 .73rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; background: var(--ptm-offwhite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F2456' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat; }
  .ptm-search input { float: left; width: calc(100% - 227px); padding: 0 16px; color: var(--ptm-text); font-size: .92rem; background: var(--ptm-white); }
  .ptm-search button { display: grid; float: left; width: 62px; place-items: center; padding: 0; color: #fff; cursor: pointer; background: var(--ptm-primary-deep); transition: background .2s var(--ease); }
  .ptm-search button:hover { background: var(--ptm-navy-800); }
  .ptm-search button:focus-visible { outline: 3px solid var(--ptm-light); outline-offset: -4px; }
  .ptm-search button svg { position: static; color: currentColor; }
  .ptm-search input:focus,
  .ptm-search select:focus { outline: 2px solid var(--ptm-primary); outline-offset: -2px; }
  .ptm-search::after { content: none; }

  .ptm-header__actions { justify-content: flex-end; gap: 2px; }
  .ptm-header__actions .ptm-icon-btn { min-width: 64px; padding: 7px 6px; }
  .ptm-icon-btn__lbl { font-size: .75rem; font-weight: 800; }

  .ptm-hcat { border: 0; background: linear-gradient(100deg, var(--ptm-navy-950), var(--ptm-navy-800) 52%, var(--ptm-navy-900)); }
  .ptm-hcat .ptm-container { max-width: 1280px; }
  .ptm-hcat .ptm-hcat__inner { min-height: 62px; padding: 0; gap: 0; align-items: stretch; justify-content: stretch; }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega,
  .ptm-hcat a.ptm-mega__trigger { min-width: 0; min-height: 62px; margin: 0; border-radius: 0; }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega { flex: 1 1 0; }
  .ptm-hcat .ptm-hcat__inner > .ptm-mega { display: flex; position: static; }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger { justify-content: center; gap: 7px; padding: 10px 8px; color: rgba(255, 255, 255, .92); font-size: .76rem; font-weight: 700; line-height: 1.1; text-align: center; white-space: normal; background: transparent; border-left: 1px solid rgba(255, 255, 255, .20); }
  .ptm-hcat .ptm-hcat__inner > a:first-child,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega:first-child a { border-left: 0; }
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before { content: none; }
  .ptm-hcat .ptm-hcat__inner > a > svg,
  .ptm-hcat .ptm-hcat__inner > a > i,
  .ptm-hcat a.ptm-mega__trigger > i,
  .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) { position: static; width: 19px; height: 19px; flex: none; color: var(--ptm-lighter); transform: none; }
  .ptm-hcat .ptm-hcat__inner > a > i,
  .ptm-hcat a.ptm-mega__trigger > i { line-height: 0; }
  .ptm-hcat a.ptm-mega__trigger { width: 100%; }
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { display: block; width: 13px; height: 13px; margin-left: -3px; color: var(--ptm-lighter); }
  .ptm-hcat .ptm-hcat__inner > a:hover,
  .ptm-hcat a.ptm-mega__trigger:hover,
  .ptm-mega:hover .ptm-mega__trigger,
  .ptm-hcat .ptm-hcat__inner > a.is-active,
  .ptm-hcat a.ptm-mega__trigger.is-active { color: #fff; background: rgba(125, 160, 239, .18); }
  .ptm-hcat .ptm-hcat__inner > a:hover > svg,
  .ptm-hcat a.ptm-mega__trigger:hover > svg { color: #fff; }
  .ptm-hcat a.ptm-hcat__sale { color: var(--ptm-lighter); }
  .ptm-hcat a.ptm-hcat__sale > svg { color: var(--ptm-light); }
  .ptm-hcat .ptm-hcat__inner > a.is-active::after { content: none; }

  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner { min-height: 46px; padding: 0; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger { min-height: 46px; padding-block: 6px; font-size: .68rem; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg,
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > i,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger > i,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) { width: 15px; height: 15px; }
}

/* The category select rendered as "ALL CATEGOR" — 165px wide minus 34px of
   chevron padding and 16px of lead leaves 115px, which uppercase 700-weight
   .73rem with .04em tracking overruns. `scrollWidth` does not report this
   (a <select> reports its own box, not the option text), so it has to be read
   off the screen. Widened, tracking eased, one step down in size. */
@media (min-width: 992px) {
  /* Sentence case, not uppercase: "ALL CATEGORIES" is ~28% wider than
     "All Categories" at the same size, and the category names in the list
     ("Gemstone Jewellery") are longer still. Uppercase is what pushed it past
     the box; widening alone could not win that. */
  .ptm-search select {
    width: 190px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding-right: 30px;
  }
  .ptm-search input { width: calc(100% - 252px); }
}

/* =====================================================================
   V9.9a — DESKTOP CATEGORY RAIL: real photographs, not line-art glyphs
   =====================================================================
   The owner is happy with everything else about this rail — order, dark navy
   ground, stickiness — and the PHONE version is exactly what he wants and is
   not touched by anything below (every rule is min-width: 992px).

   The photograph is already in the markup: includes/header.php emits
   `style="--chip:url(<transformed category image>)"` on every category item,
   which is what the phone rail paints into its ::before tile. The desktop bar
   was throwing that away (`::before { content: none }`) and drawing a glyph
   instead. This restores the tile and hides the glyph, so both breakpoints now
   render the same photograph from the same source.

   MUST STAY LAST IN THIS FILE. The Task-1 rail rules sit ~60 lines above at
   equal specificity; an override written earlier never applies (CHANGELOG V9.7).
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner { min-height: 96px; }

  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega,
  .ptm-hcat a.ptm-mega__trigger { min-height: 96px; }

  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    font-size: .72rem;
    line-height: 1.2;
  }

  /* The photo tile. `#fff` behind the image because the category assets are
     shot on near-white and the bar is navy — without it a transparent PNG
     would vanish into the background. */
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before {
    content: "";
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff var(--chip, none) center / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 4px 12px rgba(0, 0, 0, .28);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .ptm-hcat .ptm-hcat__inner > a:hover::before,
  .ptm-hcat a.ptm-mega__trigger:hover::before {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 0 0 2px var(--ptm-light), 0 8px 18px rgba(0, 0, 0, .34);
  }
  .ptm-hcat .ptm-hcat__inner > a.is-active::before,
  .ptm-hcat a.ptm-mega__trigger.is-active::before { box-shadow: 0 0 0 2px var(--ptm-light), 0 6px 14px rgba(0, 0, 0, .3); }

  /* `!important` is required, not stylistic: ptm_svg_icon() ships an inline
     style="display:inline-block", and an inline declaration outranks every
     selector without it (CHANGELOG V9.7). */
  .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) { display: none !important; }

  /* "New Arrivals" and "Sale" are not categories and carry no --chip. They keep
     their glyph, centred inside the same tile, so the row stays even. */
  .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"])::before {
    background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  }
  .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"]) > svg:not(.ptm-mega__caret) {
    display: block !important;
    position: absolute;
    top: 25px;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
    color: #fff;
  }

  /* Caret sits under the label so it does not crowd the tile. */
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { width: 11px; height: 11px; opacity: .65; }

  /* Condensed sticky state keeps the photo, just smaller. */
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner { min-height: 68px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger { min-height: 68px; gap: 5px; padding: 7px 6px; font-size: .66rem; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger::before { width: 30px; height: 30px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"]) > svg:not(.ptm-mega__caret) { top: 12px; width: 15px; height: 15px; }
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { display: none; }
}

/* Alignment tidy-up: the label is a bare text node between the two <svg>s, so
   it cannot be targeted directly. Instead the cell packs from the top and the
   caret is pushed to the bottom with margin-top:auto — that lines every caret
   up on one baseline whether the label wraps to one line ("Rings") or two
   ("Gemstone Jewellery"). */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger { justify-content: flex-start; padding-bottom: 8px; }
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { margin-top: auto; }
}

/* =====================================================================
   V9.9b — footer trust band 2x2 on phone (Task 3)
   Four features across is unreadable at 360px and a single column makes the
   band four screens tall. Two columns, two rows.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ptm-ftrust__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }
  .ptm-ftrust__item {
    min-width: 0;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 12px;
  }
  /* Only the vertical rule between the two columns, and the horizontal rule
     between the two rows — not a border on every cell. */
  .ptm-ftrust__item:nth-child(odd)  { border-right: 1px solid rgba(255, 255, 255, .12); }
  .ptm-ftrust__item:nth-child(even) { border-right: 0; }
  .ptm-ftrust__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .ptm-ftrust__ico { width: 36px; height: 36px; border-radius: 11px; }
  .ptm-ftrust__ico svg { width: 17px; height: 17px; }
  .ptm-ftrust__item strong { font-size: .78rem; line-height: 1.25; }
  /* "Above Rs999 . 7-day returns" is the longest label and wraps at 360px. */
  .ptm-ftrust__item small { font-size: .68rem; line-height: 1.35; display: block; }
}
@media (max-width: 380px) {
  .ptm-ftrust__item { padding: 14px 9px; gap: 8px; }
  .ptm-ftrust__item strong { font-size: .73rem; }
  .ptm-ftrust__item small { font-size: .64rem; }
}

/* =====================================================================
   V9.9c — header rail: depth and a better caret
   The owner's words: the blue reads flat, the dropdown arrow looks odd and
   there is no sense of depth. Three changes, no redesign:
     1. the bar gets a top highlight and a real base shadow so it sits ON the
        page rather than being a flat block of colour;
     2. the caret becomes a small chevron in a soft chip that only fills in on
        hover — a bare 12px arrow under a photo reads as a stray mark;
     3. the active/hover cell lifts with an inset wash instead of nothing.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-hcat {
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
                inset 0 -1px 0 rgba(0, 0, 0, .35),
                0 10px 26px rgba(5, 13, 36, .28);
  }
  /* A slow sheen across the bar so the navy has some life in it. */
  .ptm-hcat::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 180% at 18% -40%, rgba(125, 160, 239, .22), transparent 60%);
  }
  .ptm-hcat .ptm-container { position: relative; z-index: 1; }

  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger { transition: background .25s var(--ease); }
  .ptm-hcat .ptm-hcat__inner > a:hover,
  .ptm-hcat a.ptm-mega__trigger:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
  }
  .ptm-hcat .ptm-hcat__inner > a.is-active,
  .ptm-hcat a.ptm-mega__trigger.is-active {
    background: linear-gradient(180deg, rgba(125, 160, 239, .20), rgba(125, 160, 239, .04));
  }

  /* The caret: a chip, not a naked arrow. */
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret {
    width: 18px;
    height: 18px;
    padding: 4px;
    border-radius: 50%;
    opacity: 1;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: transform .28s var(--ease), background .25s var(--ease), color .25s var(--ease);
  }
  .ptm-hcat a.ptm-mega__trigger:hover > .ptm-mega__caret,
  .ptm-mega.is-open > a.ptm-mega__trigger > .ptm-mega__caret {
    color: var(--ptm-navy-900);
    background: var(--ptm-light);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  }
  .ptm-mega:hover > a.ptm-mega__trigger > .ptm-mega__caret,
  .ptm-mega.is-open > a.ptm-mega__trigger > .ptm-mega__caret { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { transition: none; }
}

/* =====================================================================
   V9.9d — SHOP SIDEBAR: kill the doubled dividers, tighten the density
   =====================================================================
   Two rules in ptm.css both draw a line between filter groups:
     line 1905  .ptm-filter__group            { border-bottom: 1px … }
     line 2403  .ptm-filter__group + .ptm-filter__group
                                              { border-top: 1px …; margin-top: 18px }
   So every gap rendered as TWO hairlines with 18px of blank between them —
   the "extra spacing" the owner reported. Only the separator between groups
   is wanted, so the bottom border goes and the top one stays.

   Everything else here is density. The panel was ~600px tall for six category
   rows: 16px head padding, 18px body padding, 36px rows and a 9px grid gap.
   A filter list is a scanning surface, not a reading surface.
   ------------------------------------------------------------------ */
.ptm-filter { padding: 4px 0; }
.ptm-filter__group { border-bottom: 0; }
.ptm-filter__group + .ptm-filter__group { padding-top: 12px; margin-top: 12px; }

.ptm-filter__head { padding: 11px 16px; font-size: .84rem; letter-spacing: .01em; }
.ptm-filter__body-inner { padding: 2px 16px 12px; gap: 4px; }

.ptm-filter__opt {
  min-height: 30px;
  padding: 3px 0;
  gap: 10px;
  font-size: .85rem;
  border-radius: 8px;
  transition: color .15s var(--ease), background .15s var(--ease);
}
/* A hover target that covers the whole row, not just the words. */
.ptm-filter__opt:hover { background: var(--ptm-lightest); box-shadow: 0 0 0 6px var(--ptm-lightest); }
.ptm-filter__opt input { width: 15px; height: 15px; }
.ptm-filter__opt .count {
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ptm-soft);
}
/* The checked row should be findable at a glance. */
.ptm-filter__opt:has(input:checked) { color: var(--ptm-primary-deep); font-weight: 600; }

.ptm-filter__price-row input { padding: 7px 9px; font-size: .85rem; }
.ptm-filter .ptm-input { padding: 8px 11px; font-size: .85rem; }
.ptm-field-label { font-size: .78rem; margin-bottom: 5px; }

@media (min-width: 992px) {
  /* The panel sits under a 96px rail plus the header, so it needs a lower
     sticky offset than the 130px ptm.css assumes. */
  .ptm-filter { top: 150px; }
}

/* =====================================================================
   V10 — PTM V2. MUST STAY LAST IN THIS FILE.
   =====================================================================
   Every rule below supersedes something written earlier. Media queries add
   no specificity, so at equal specificity source order decides — an override
   written above the block it must beat silently does nothing (CHANGELOG V9.7,
   three separate regressions).

   Sections, in order:
     10.1  layer scale (z-index) + cart-drawer overlap fix
     10.2  desktop category rail: light, line icons, no photo chips
     10.3  dual-row Find Your Perfect Match marquee
     10.4  product rail primitive
     10.5  shop by budget
     10.6  brand story / journal / homepage FAQ
     10.7  shop page: mobile filter sheet
     10.8  PDP sticky add-to-cart bar
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   10.1  LAYER SCALE  (master brief §68)
   ---------------------------------------------------------------------
   The audit found no scale at all: the side cart sat at z-index 50 while the
   mobile bottom nav sat at 95, the support panel at 92 and the welcome popup
   at 95. On a phone the bottom nav therefore painted straight over the cart
   drawer's Checkout button — that is the reported "free-return / assurance
   area overlaps the cart drawer" (§35, §82).

   Documented order, low to high:
        29  category rail
        40  sticky header stack
        45  mobile drawer / overlay backdrops
        58  support launcher
        70  flash toasts
        80  mobile bottom nav
        92  support panel
        95  welcome popup
       120  side-cart backdrop        <- above everything site-level
       125  side-cart panel
      9999  video modal (full-screen, blocks everything by design)

   Raising the cart alone is not enough: a launcher at 58 would still float
   over the backdrop's dim. So while the cart is open, `body.ptm-cart-lock`
   (set by ptm.js) takes the bottom nav, the support launcher and the sticky
   PDP bar out of the way entirely. Nothing competes with a cart in progress.
   ------------------------------------------------------------------ */
#ptm-side-cart-root .ptm-sc-overlay { z-index: 120; }
#ptm-side-cart-root .ptm-sc         { z-index: 125; }
.ptm-bnav                           { z-index: 80; }

body.ptm-cart-lock .ptm-bnav,
body.ptm-cart-lock .ptm-sup__launch,
body.ptm-cart-lock .ptm-atcbar,
body.ptm-cart-lock .ptm-pop         { opacity: 0; visibility: hidden; pointer-events: none; }
body.ptm-cart-lock .ptm-bnav,
body.ptm-cart-lock .ptm-sup__launch { transition: opacity .18s var(--ease), visibility .18s; }
/* The support PANEL is dismissed outright — hiding a dialog is not enough,
   it must also stop trapping focus. ptm.js closes it; this covers the frame
   in between. */
body.ptm-cart-lock .ptm-sup         { z-index: 60; }

/* ---------------------------------------------------------------------
   10.2  DESKTOP CATEGORY RAIL — light, quiet, line icons
   ---------------------------------------------------------------------
   Master brief §5: remove the oversized dark-blue category navigation, the
   large circular category photographs and the separate floating caret chips;
   use refined line icons + labels on a light/neutral ground.

   This supersedes V9.9a (photo tiles) and V9.9c (navy sheen + caret chip).
   Both stay in the file above as the record of what was tried — every rule
   here simply outranks them by coming later.

   THE PHONE RAIL IS NOT TOUCHED. Every rule below is min-width: 992px, and
   the phone rail is styled by the max-width: 991px block near line 1215.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-hcat {
    background: var(--ptm-white);
    border-top: 1px solid var(--ptm-border);
    border-bottom: 1px solid var(--ptm-border);
    box-shadow: 0 1px 0 rgba(15, 36, 86, .04);
  }
  .ptm-hcat::after { content: none; }               /* kill the V9.9c sheen */

  .ptm-hcat .ptm-hcat__inner {
    min-height: 54px;
    padding: 0;
    gap: 2px;
    align-items: stretch;
    justify-content: center;
  }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega,
  .ptm-hcat a.ptm-mega__trigger { min-height: 54px; flex: 0 1 auto; }

  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 0;
    border-radius: 0;
    color: var(--ptm-navy-900);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: transparent;
    transition: color .18s var(--ease), background .18s var(--ease);
  }

  /* No photograph, no tile, no chip — a line glyph and a word. */
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before { content: none; }

  /* ptm_svg_icon() ships style="display:inline-block" inline, and an inline
     declaration outranks every selector without !important. That is why the
     three earlier attempts at this rule did nothing (CHANGELOG V9.7). */
  .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    display: block !important;
    position: static;
    flex: none;
    width: 17px;
    height: 17px;
    transform: none;
    color: var(--ptm-primary);
    opacity: .9;
    transition: color .18s var(--ease);
  }

  /* Caret: a plain 12px chevron that rotates. No chip, no ring, no fill. */
  .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 0 0 -2px;
    padding: 0;
    opacity: .45;
    color: var(--ptm-navy-900);
    background: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  .ptm-mega:hover > a.ptm-mega__trigger > .ptm-mega__caret,
  .ptm-mega.is-open > a.ptm-mega__trigger > .ptm-mega__caret {
    transform: rotate(180deg);
    opacity: .85;
    color: var(--ptm-primary-deep);
    background: none;
    box-shadow: none;
  }

  /* Hover / active: an underline on the baseline, the way a jewellery brand
     marks a section. No filled pills, no washes. */
  .ptm-hcat .ptm-hcat__inner > a::after,
  .ptm-hcat a.ptm-mega__trigger::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: 0;
    height: 2px;
    background: var(--ptm-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s var(--ease);
  }
  .ptm-hcat .ptm-hcat__inner > a:hover,
  .ptm-hcat a.ptm-mega__trigger:hover,
  .ptm-mega:hover > .ptm-mega__trigger,
  .ptm-hcat .ptm-hcat__inner > a.is-active,
  .ptm-hcat a.ptm-mega__trigger.is-active { color: var(--ptm-primary-deep); background: transparent; }
  .ptm-hcat .ptm-hcat__inner > a:hover::after,
  .ptm-hcat a.ptm-mega__trigger:hover::after,
  .ptm-mega:hover > .ptm-mega__trigger::after,
  .ptm-mega.is-open > .ptm-mega__trigger::after,
  .ptm-hcat .ptm-hcat__inner > a.is-active::after,
  .ptm-hcat a.ptm-mega__trigger.is-active::after { transform: scaleX(1); }
  .ptm-hcat .ptm-hcat__inner > a:hover > svg:not(.ptm-mega__caret),
  .ptm-hcat a.ptm-mega__trigger:hover > svg:not(.ptm-mega__caret) { color: var(--ptm-primary-deep); opacity: 1; }
  .ptm-hcat a.ptm-hcat__sale { color: var(--ptm-rose); }
  .ptm-hcat a.ptm-hcat__sale > svg:not(.ptm-mega__caret) { color: var(--ptm-rose); }
  .ptm-hcat a.ptm-hcat__sale::after { background: var(--ptm-rose); }

  /* Condensed sticky state: shorter, nothing else moves. */
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner { min-height: 44px; padding: 0; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a,
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger { min-height: 44px; font-size: .8rem; padding-inline: 12px; }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger > svg:not(.ptm-mega__caret) { width: 15px; height: 15px; }
  .ptm-stickytop.is-scrolled .ptm-hcat a.ptm-mega__trigger > .ptm-mega__caret { display: block; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger { padding-inline: 10px; font-size: .78rem; gap: 6px; }
}

/* ---------------------------------------------------------------------
   10.3  FIND YOUR PERFECT MATCH — dual-row marquee (§8)
   ---------------------------------------------------------------------
   Two rows, opposite directions. Autoplay is pure CSS so it works with JS
   off; ptm.js adds drag and pauses the animation while the user is touching
   the row (§79 — user scroll always wins).

   The rows are `overflow-x: auto` so a trackpad, a swipe or a drag all move
   them natively. While the animation runs the track is transformed, not
   scrolled, and the two never fight: ptm.js sets `--play: paused` on first
   pointer contact and hands the row over to the browser's own scrolling.

   No visible scrollbar (§8), no page-level horizontal overflow: the rows sit
   in a full-bleed wrapper with `overflow: hidden` on the section.
   ------------------------------------------------------------------ */
.ptm-dual {
  --gap: 14px;
  display: grid;
  gap: var(--gap);
  margin-top: 30px;
  overflow: hidden;                 /* never leak horizontal page scroll */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ptm-dual__row {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  cursor: grab;
}
.ptm-dual__row::-webkit-scrollbar { display: none; }
.ptm-dual__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ptm-dual__row:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: 3px; border-radius: 14px; }
.ptm-dual__track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  padding: 4px var(--gap);
}
.ptm-dcard {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 214px;
  padding: 10px 14px 10px 10px;
  color: var(--ptm-text);
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ptm-dcard:hover {
  transform: translateY(-3px);
  border-color: var(--ptm-lighter);
  box-shadow: 0 10px 26px rgba(10, 26, 58, .10);
}
.ptm-dcard__img {
  flex: none;
  width: 56px; height: 56px;
  overflow: hidden;
  border-radius: 13px;
  background: var(--ptm-lightest);
}
.ptm-dcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptm-dcard__txt { display: grid; gap: 2px; min-width: 0; }
.ptm-dcard__txt strong {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ptm-navy-900);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptm-dcard__txt small { font-size: .73rem; color: var(--ptm-soft); }
/* Price-band cards read as a different kind of thing, so they get the
   sapphire tint rather than a product photograph doing double duty. */
.ptm-dcard--price .ptm-dcard__img { background: linear-gradient(150deg, var(--ptm-lightest), #fff 72%); }
.ptm-dcard--price .ptm-dcard__img img { opacity: .9; mix-blend-mode: multiply; }

/* The animation. Each track prints its cards twice and travels exactly -50%,
   so the seam is invisible. `--play` is flipped to `paused` by ptm.js. */
@keyframes ptm-dual-l { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes ptm-dual-r { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
.ptm-dual--auto .ptm-dual__row--a .ptm-dual__track { animation: ptm-dual-l 48s linear infinite; animation-play-state: var(--play, running); }
.ptm-dual--auto .ptm-dual__row--b .ptm-dual__track { animation: ptm-dual-r 56s linear infinite; animation-play-state: var(--play, running); }
.ptm-dual--auto .ptm-dual__row:hover .ptm-dual__track,
.ptm-dual--auto .ptm-dual__row:focus-within .ptm-dual__track { animation-play-state: paused; }
/* Once the visitor has scrolled a row by hand, the transform must stop or it
   would drag them backwards mid-swipe (§79). ptm.js adds .is-manual. */
.ptm-dual__row.is-manual .ptm-dual__track { animation: none !important; }

/* Reduced motion: no autoplay, and the duplicate half is removed so a
   keyboard/screen-reader user is not walked through the same links twice. */
@media (prefers-reduced-motion: reduce) {
  .ptm-dual--auto .ptm-dual__track { animation: none !important; }
  .ptm-dual--auto .ptm-dcard[aria-hidden="true"] { display: none; }
}
/* Forcing motion back on. `!important` here is NOT decoration: the rule this
   has to beat is ptm.css's own
       *, *::before, *::after { animation-duration: .01ms !important; … }
   and an !important declaration outranks a non-important one whatever the
   specificity. Every property of the shorthand has to be re-asserted
   individually, or the duration stays at .01ms and the row snaps instead of
   sliding — the exact bug V9.1 fixed for the other two marquees.

   Without this the dual rows would be frozen on the owner's own machine:
   Windows "Show animations = Off" reports prefers-reduced-motion: reduce,
   which is what produced three separate "it doesn't auto-scroll" reports. */
@media (prefers-reduced-motion: reduce) {
  html.ptm-force-motion .ptm-dual--auto .ptm-dual__row--a .ptm-dual__track {
    animation-name: ptm-dual-l !important;
    animation-duration: 48s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html.ptm-force-motion .ptm-dual--auto .ptm-dual__row--b .ptm-dual__track {
    animation-name: ptm-dual-r !important;
    animation-duration: 56s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  /* The fallback deletes the mirrored half; forcing motion must put it back or
     the track slides once and then runs into empty space. */
  html.ptm-force-motion .ptm-dual--auto .ptm-dcard[aria-hidden="true"] { display: flex !important; }
  /* ...but a row the visitor has taken over stays taken over. */
  html.ptm-force-motion .ptm-dual__row.is-manual .ptm-dual__track { animation-name: none !important; }
}

/* Phone: roughly a 2-column x 2-row discovery grid at a glance (§8). Two rows
   are already in the markup, so the card width is what does it —
   (100vw - gutters - gap) / 2 puts exactly two per row on any phone. */
@media (max-width: 767px) {
  .ptm-dual { --gap: 10px; margin-top: 22px; }
  .ptm-dcard {
    width: calc((100vw - 2 * var(--gap) - var(--gap) - 12px) / 2);
    max-width: 210px;
    gap: 9px;
    padding: 8px 10px 8px 8px;
    border-radius: 14px;
  }
  .ptm-dcard__img { width: 46px; height: 46px; border-radius: 11px; }
  .ptm-dcard__txt strong { font-size: .8rem; }
  .ptm-dcard__txt small { font-size: .68rem; }
}
/* Under 5 cards a row there is nothing to loop, so centre it instead of
   sliding a half-empty track. */
.ptm-dual:not(.ptm-dual--auto) .ptm-dual__track { width: auto; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   10.4  PRODUCT RAIL — one primitive for every product row (§17/§76)
   ------------------------------------------------------------------ */
.ptm-rail { position: relative; margin-top: 26px; }
.ptm-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px;
}
/* Carousel mode: fixed card width + scroll snap. Below 5 products the rail
   stays a grid, so a 2-product row fills the width instead of leaving a gap. */
.ptm-rail--car .ptm-rail__track {
  grid-auto-columns: minmax(230px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.ptm-rail--car .ptm-rail__track::-webkit-scrollbar { display: none; }
.ptm-rail--car .ptm-rail__track > * { scroll-snap-align: start; }
.ptm-rail__nav {
  position: absolute;
  top: 38%;
  display: none;
  place-items: center;
  width: 42px; height: 42px;
  color: var(--ptm-navy-900);
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(10, 26, 58, .14);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.ptm-rail__nav:hover { background: var(--ptm-primary); color: #fff; border-color: var(--ptm-primary); }
.ptm-rail__nav[disabled] { opacity: .3; pointer-events: none; }
.ptm-rail__nav--prev { left: -20px; }
.ptm-rail__nav--next { right: -20px; }
@media (min-width: 992px) { .ptm-rail--car .ptm-rail__nav { display: grid; } }
/* ---------------------------------------------------------------------
   PHONE RAILS — a 2x2 grid that slides, one panel at a time
   ---------------------------------------------------------------------
   MY BUG, and worth writing down. This block first shipped as

       grid-auto-columns: minmax(0, calc(50% - 6px));

   The MAX is the width I wanted, but the MIN of 0 tells the grid the track
   may shrink to nothing. A grid inside a fixed-width box will always try to
   fit rather than overflow, so with 10 cards it divided the 350px container
   between them: every card rendered 24px wide, the price clipped to "₹2",
   "Add to cart" to three stacked letters. A horizontal rail must state a
   FIXED track width — there is nothing for the browser to negotiate.

   The layout is what the owner asked for: `grid-template-rows: repeat(2, …)`
   with column flow fills two rows before starting a new column, so each
   column is half the viewport and the visitor sees a 2x2 block of four
   products. Snapping on the column means one flick moves one whole panel.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ptm-rail__track { gap: 12px; }
  .ptm-rail:not(.ptm-rail--car) .ptm-rail__track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ptm-rail--car .ptm-rail__track {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc(50% - 6px);   /* fixed — never minmax(0, …) */
    align-items: stretch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }
  /* Snap on the column, not on every card, or the second row fights the first. */
  .ptm-rail--car .ptm-rail__track > * { scroll-snap-align: start; }
  .ptm-rail--car .ptm-rail__track > *:nth-child(even) { scroll-snap-align: none; }

  /* A phone card carries less, so it can be tighter without feeling cramped. */
  .ptm-rail .ptm-card__body { padding: 10px 11px 12px; gap: 5px; }
  .ptm-rail .ptm-card__cat { font-size: .62rem; letter-spacing: .07em; }
  .ptm-rail .ptm-card__title { font-size: .8rem; line-height: 1.3; }
  .ptm-rail .ptm-card__price { font-size: .93rem; }
  .ptm-rail .ptm-card__strike { font-size: .72rem; }
  .ptm-rail .ptm-card__off { font-size: .66rem; padding: 2px 5px; }
  .ptm-rail .ptm-card__price-row { flex-wrap: wrap; gap: 4px 6px; }
  .ptm-rail .ptm-card__actions .ptm-btn { padding: 8px 6px; font-size: .74rem; }
  .ptm-rail .ptm-card__wish { width: 34px; height: 34px; flex: none; }

  /* The journal is editorial, not a grid — one card at a time reads better. */
  .ptm-journal .ptm-rail--car .ptm-rail__track {
    grid-template-rows: none;
    grid-auto-columns: 78%;
  }
  .ptm-journal .ptm-rail--car .ptm-rail__track > *:nth-child(even) { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------------
   10.5  SHOP BY BUDGET (§12 price-led discovery)
   ------------------------------------------------------------------ */
.ptm-budget__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.ptm-budget__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  color: var(--ptm-text);
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
  text-decoration: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ptm-budget__card:hover { transform: translateY(-3px); border-color: var(--ptm-lighter); box-shadow: 0 12px 30px rgba(10, 26, 58, .11); }
.ptm-budget__img { flex: none; width: 82px; height: 82px; overflow: hidden; border-radius: 14px; background: var(--ptm-lightest); }
.ptm-budget__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptm-budget__body { display: grid; gap: 3px; }
.ptm-budget__body strong { font-family: var(--font-display, inherit); font-size: 1.14rem; color: var(--ptm-navy-900); }
.ptm-budget__body small { font-size: .8rem; color: var(--ptm-soft); }
.ptm-budget__body em {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px;
  color: var(--ptm-primary-deep);
  font-size: .8rem; font-style: normal; font-weight: 700;
}
.ptm-budget__card:hover .ptm-budget__body em svg { transform: translateX(3px); }
.ptm-budget__body em svg { transition: transform .2s var(--ease); }
@media (max-width: 520px) {
  .ptm-budget__grid { gap: 12px; }
  .ptm-budget__img { width: 66px; height: 66px; }
  .ptm-budget__body strong { font-size: 1rem; }
}

/* ---------------------------------------------------------------------
   10.6  BRAND STORY · JOURNAL · HOMEPAGE FAQ
   ------------------------------------------------------------------ */
.ptm-section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
}
.ptm-section-head--row .eyebrow { margin-bottom: 8px; }
@media (max-width: 640px) {
  .ptm-section-head--row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

.ptm-story { padding: clamp(48px, 7vw, 84px) 0; background: var(--ptm-offwhite); }
.ptm-story__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.ptm-story__media { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(10, 26, 58, .16); }
.ptm-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.ptm-story__stamp {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  color: var(--ptm-navy-900);
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.ptm-story__copy .eyebrow { display: inline-block; margin-bottom: 12px; }
.ptm-story__copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.ptm-story__copy p { color: var(--ptm-mid); line-height: 1.75; margin-bottom: 12px; }
.ptm-story__points { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 9px; }
.ptm-story__points li { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: var(--ptm-navy-900); }
.ptm-story__points svg { color: var(--ptm-primary); flex: none; }
@media (min-width: 900px) { .ptm-story__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } }
@media (max-width: 899px) { .ptm-story__media img { aspect-ratio: 16 / 11; } }

.ptm-journal { padding: clamp(48px, 7vw, 84px) 0; }
.ptm-jcard {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.ptm-jcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10, 26, 58, .12); }
.ptm-jcard__img { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ptm-lightest); }
.ptm-jcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.ptm-jcard:hover .ptm-jcard__img img { transform: scale(1.05); }
.ptm-jcard__body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.ptm-jcard__meta { display: flex; align-items: center; gap: 10px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.ptm-jcard__meta b { color: var(--ptm-primary-deep); font-weight: 800; }
.ptm-jcard__meta i { color: var(--ptm-soft); font-style: normal; }
.ptm-jcard__body h3 { font-size: 1.02rem; line-height: 1.35; }
.ptm-jcard__body h3 a { color: var(--ptm-navy-900); text-decoration: none; }
.ptm-jcard__body h3 a:hover { color: var(--ptm-primary-deep); }
.ptm-jcard__body p { font-size: .86rem; color: var(--ptm-mid); line-height: 1.6; }
.ptm-jcard__cta { display: inline-flex; align-items: center; gap: 5px; color: var(--ptm-primary-deep); font-size: .82rem; font-weight: 700; text-decoration: none; }
.ptm-jcard__cta:hover svg { transform: translateX(3px); }
.ptm-jcard__cta svg { transition: transform .2s var(--ease); }
/* Same minmax(0, …) trap as the product rails: the 0 minimum let the grid
   divide the container between the three cards instead of overflowing, so each
   article rendered 109px wide. A slider states a fixed track width. */
@media (max-width: 767px) { .ptm-journal .ptm-rail--car .ptm-rail__track { grid-auto-columns: 78%; } }

.ptm-hfaq { padding: clamp(44px, 6vw, 76px) 0; background: var(--ptm-offwhite); }
.ptm-hfaq__list { max-width: 820px; margin: 28px auto 0; display: grid; gap: 10px; }
.ptm-hfaq__item { background: var(--ptm-white); border: 1px solid var(--ptm-border); border-radius: 14px; overflow: hidden; }
.ptm-hfaq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
  font-size: .95rem; font-weight: 700; color: var(--ptm-navy-900);
  cursor: pointer; list-style: none;
}
.ptm-hfaq__item summary::-webkit-details-marker { display: none; }
.ptm-hfaq__item summary span { display: inline-flex; color: var(--ptm-soft); transition: transform .25s var(--ease); }
.ptm-hfaq__item[open] summary span { transform: rotate(180deg); }
.ptm-hfaq__item[open] summary { color: var(--ptm-primary-deep); }
.ptm-hfaq__item > div { padding: 0 18px 16px; color: var(--ptm-mid); font-size: .9rem; line-height: 1.7; }
.ptm-hfaq__more { margin-top: 20px; text-align: center; }
.ptm-hfaq__more a { color: var(--ptm-primary-deep); font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------------
   10.7  SHOP PAGE — filter bottom sheet + toolbar (§22–§25)
   ---------------------------------------------------------------------
   Below 992px the filter panel becomes a real bottom sheet: it overlays the
   grid instead of pushing it down, scrolls inside itself, and keeps Apply
   pinned to the bottom above the phone's home indicator. Desktop is
   unchanged — the same panel, always visible, never gets `is-open`.
   ------------------------------------------------------------------ */
.ptm-filter-toggle { display: inline-flex; align-items: center; gap: 7px; position: relative; }
.ptm-filter-toggle[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  display: grid;
  place-items: center;
  min-width: 19px; height: 19px;
  margin-left: 2px;
  padding: 0 5px;
  color: #fff;
  background: var(--ptm-primary);
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 800;
}
.ptm-filter__sheethead { display: none; }
.ptm-filter__clear {
  align-self: center;
  color: var(--ptm-soft);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ptm-filter__clear:hover { color: var(--ptm-primary-deep); }

@media (min-width: 992px) {
  .ptm-filter__actions { display: flex; flex-direction: column-reverse; gap: 10px; align-items: stretch; }
  .ptm-filter__clear { text-align: center; }
}

@media (max-width: 991px) {
  .ptm-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(9, 18, 40, .45);
    backdrop-filter: blur(2px);
    animation: ptm-fade-in .2s var(--ease);
  }
  @keyframes ptm-fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* SPECIFICITY, read before editing. ptm.css has
         .ptm-filter-panel            { display: none  }
         .ptm-filter-panel.is-open    { display: block }
     A bare `.ptm-filter-panel { display: flex }` is (0,1,0) and LOSES to that
     second rule, so the sheet computed as `display: block`, the form never
     became a flex item, and the sticky Apply button scrolled 250px below the
     fold. Both selectors are repeated here at (0,2,0) so the later source
     order decides. Same class of trap as the category rail (CHANGELOG V9.7).

     Note the panel is always laid out at this breakpoint, hidden by
     transform + visibility rather than `display`, because `display: none`
     cannot be transitioned. */
  .ptm-filter-panel,
  .ptm-filter-panel.is-open {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 46;
    display: flex;
    flex-direction: column;
    max-height: min(82dvh, 640px);
    padding: 0;
    background: var(--ptm-white);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(9, 18, 40, .3);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
  }
  .ptm-filter-panel.is-open { transform: none; visibility: visible; }

  /* The drag handle, drawn rather than shipped as an element. */
  .ptm-filter-panel::before {
    content: "";
    position: absolute;
    top: 8px; left: 50%;
    width: 40px; height: 4px;
    transform: translateX(-50%);
    background: var(--ptm-lighter);
    border-radius: 4px;
  }

  .ptm-filter__sheethead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 20px 18px 12px;
    border-bottom: 1px solid var(--ptm-border);
  }
  .ptm-filter__sheethead strong { display: block; font-size: 1.05rem; color: var(--ptm-navy-900); }
  .ptm-filter__sheethead span { font-size: .78rem; color: var(--ptm-soft); }
  .ptm-filter__x {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    color: var(--ptm-mid);
    background: var(--ptm-lightest);
    border: 0; border-radius: 50%;
    cursor: pointer;
  }

  /* The form scrolls; the actions do not. */
  .ptm-filter {
    position: static;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
  }
  .ptm-filter > .ptm-filter__group { overflow: visible; }
  .ptm-filter { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ptm-filter__group:first-of-type { padding-top: 8px; }

  .ptm-filter__actions {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--ptm-white);
    border-top: 1px solid var(--ptm-border);
    box-shadow: 0 -6px 18px rgba(9, 18, 40, .07);
  }
  .ptm-filter__actions .ptm-btn { flex: 1; }
  body.ptm-filter-lock { overflow: hidden; }
  /* The bottom nav must not float over the sheet's Apply button. */
  body.ptm-filter-lock .ptm-bnav,
  body.ptm-filter-lock .ptm-sup__launch { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Toolbar: title, count, sort and Filters on one line that survives 320px. */
.ptm-listing-head { align-items: center; gap: 14px; }
@media (max-width: 640px) {
  .ptm-listing-head { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; }
  .ptm-listing-head > div { grid-column: 1 / -1; }
  .ptm-listing-head h1 { font-size: 1.5rem; }
  .ptm-sort-form { justify-self: end; }
  .ptm-sort-form select { max-width: 46vw; }
}

/* ---------------------------------------------------------------------
   10.8  PDP STICKY ADD-TO-CART BAR (§31)
   ---------------------------------------------------------------------
   Off-screen by default and only revealed by ptm.js once the real button has
   scrolled away, so a page with JS disabled never gets a bar it cannot wire
   up. `bottom` clears the mobile bottom nav AND the phone's home indicator.
   ------------------------------------------------------------------ */
.ptm-atcbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 75;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--ptm-border);
  box-shadow: 0 -8px 26px rgba(9, 18, 40, .12);
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.ptm-atcbar.is-on { transform: none; visibility: visible; }
.ptm-atcbar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
}
.ptm-atcbar__thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--ptm-lightest); }
.ptm-atcbar__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptm-atcbar__meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.ptm-atcbar__meta strong {
  font-size: .84rem; font-weight: 700; color: var(--ptm-navy-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptm-atcbar__meta b { font-size: .95rem; color: var(--ptm-navy-900); }
.ptm-atcbar__meta s { margin-left: 6px; font-size: .78rem; color: var(--ptm-soft); }
.ptm-atcbar .ptm-btn { flex: none; padding-inline: 22px; }
/* The bar and support launcher share the same measured nav clearance. */
@media (max-width: 991px) {
  .ptm-atcbar {
    bottom: var(--ptm-bottom-clear);
    padding-bottom: 10px;
  }
  .ptm-atcbar .ptm-btn { padding-inline: 16px; font-size: .85rem; }
  body.ptm-atcbar-on .ptm-sup__launch {
    bottom: calc(var(--ptm-bottom-clear) + 76px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-atcbar, .ptm-filter-panel { transition: none; }
}

/* ---------------------------------------------------------------------
   10.2b  "New Arrivals" and "Sale" had INVISIBLE icons after 10.2.
   ---------------------------------------------------------------------
   Neither is a category, so neither carries the inline `--chip` custom
   property, and V9.9a targets exactly that case:

       .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"]) > svg:not(.ptm-mega__caret)
           { display:block !important; position:absolute; top:25px; color:#fff; … }

   That selector is (0,3,2) — the attribute test in :not() counts — while 10.2's
   is (0,3,1). So for those two items V9.9a still won: a white glyph, absolutely
   positioned 25px down, on a now-white bar. Invisible, and sitting across the
   label. Measured, not guessed: getComputedStyle reported
   color rgb(255,255,255) and width 20px on both.

   Matching the specificity is the whole fix.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"]) > svg:not(.ptm-mega__caret),
  .ptm-hcat a.ptm-mega__trigger:not([style*="--chip"]) > svg:not(.ptm-mega__caret) {
    position: static;
    top: auto;
    left: auto;
    width: 17px;
    height: 17px;
    transform: none;
    color: var(--ptm-primary);
  }
  .ptm-hcat a.ptm-hcat__sale:not([style*="--chip"]) > svg:not(.ptm-mega__caret) { color: var(--ptm-rose); }
  .ptm-hcat .ptm-hcat__inner > a:not([style*="--chip"]):hover > svg:not(.ptm-mega__caret) { color: var(--ptm-primary-deep); }
}

/* ---------------------------------------------------------------------
   10.9  POPUP FATIGUE (master brief §69)
   ---------------------------------------------------------------------
   The welcome popup is already gated to once per session and closes on the
   backdrop, the X and Escape (see ptm.js). The one case left was timing: its
   6-second timer can fire while the visitor is mid-task inside the filter
   sheet. The cart case is already covered by .ptm-cart-lock in §10.1; this
   adds the filter sheet. Nothing is lost — the popup is not marked seen, so it
   simply appears once the sheet is closed.
   ------------------------------------------------------------------ */
body.ptm-filter-lock .ptm-pop { opacity: 0; visibility: hidden; pointer-events: none; }

/* =====================================================================
   V11 — owner review round. MUST STAY LAST IN THIS FILE.
   =====================================================================
   Everything here answers a specific point raised on the V10 build.
     11.1  phone card CTA wrapped to two lines
     11.2  newsletter: artwork instead of a shrunken logo, calmer card
     11.3  footer artwork (there was none anywhere on the site)
     11.4  Shop by budget — all three bands visible at once on a phone
     11.5  brand story rebuilt
     11.6  reviews section restored and rebuilt
     11.7  scroll and motion smoothness
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   11.1  "ADD TO CART" broke onto two lines in a 169px phone card.
   The label is uppercased by ptm.css, so it is 11 characters wide before
   any padding. On a phone the card gets the shorter label and a tighter
   tracking; the accessible name is unchanged because the button text is
   what screen readers read either way.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ptm-rail .ptm-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
  }
  .ptm-rail .ptm-card__actions .ptm-btn {
    min-width: 0;
    padding: 9px 4px;
    font-size: .7rem;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .ptm-product-grid .ptm-card__actions .ptm-btn { font-size: .72rem; padding: 9px 6px; white-space: nowrap; }
}

/* ---------------------------------------------------------------------
   11.2  NEWSLETTER — drawn ornament, quieter card
   ------------------------------------------------------------------ */
.ptm-stay__art {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto 6px;
  padding: 0;
  color: var(--ptm-primary);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.ptm-stay__art svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The envelope lifts a little on its arc; the sparkles breathe. Both are
   slow and small — decoration should never pull the eye off the field. */
.ptm-stay__env  { animation: ptm-stay-float 6s ease-in-out infinite; transform-origin: 60px 53px; }
.ptm-stay__spark { animation: ptm-stay-twinkle 4.5s ease-in-out infinite; }
@keyframes ptm-stay-float   { 0%, 100% { transform: translateY(0); }   50% { transform: translateY(-3px); } }
@keyframes ptm-stay-twinkle { 0%, 100% { opacity: .85; }               50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .ptm-stay__env, .ptm-stay__spark { animation: none; }
}
html.ptm-force-motion .ptm-stay__env { animation: ptm-stay-float 6s ease-in-out infinite !important; }

/* CONTRAST, and my own mistake from the first pass of this block. The SECTION
   behind is navy (--ptm-navy-900), but the CARD sitting on it is white. I
   wrote the paragraph and the perks in white text as if they were on the navy,
   so they rendered white-on-white and were effectively invisible. Everything
   inside .ptm-stay__card is on white and must be inked accordingly. */
.ptm-stay__card { padding-top: 34px; }
.ptm-stay__card h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.02em; }
.ptm-stay__card > p { max-width: 46ch; margin-inline: auto; color: var(--ptm-mid); line-height: 1.7; }
/* A hairline rule under the perks so the block closes properly instead of
   trailing off into the trust band below it. */
.ptm-stay__perks {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--ptm-border);
  justify-content: center;
}
.ptm-stay__perks li { color: var(--ptm-mid); font-weight: 600; }
.ptm-stay__perks svg { color: var(--ptm-primary); }
/* The ornament is line art on white, so it needs the real brand blue at a
   readable weight, not the pale tint used on dark grounds. */
.ptm-stay__art { color: var(--ptm-primary); opacity: .85; }
@media (max-width: 560px) {
  .ptm-stay__art { width: 104px; }
  .ptm-stay__perks { flex-direction: column; align-items: center; gap: 8px; }
}

/* Side cart: contents first, then the complimentary bead as its own benefit.
   The blue treatment keeps it distinct from the spend-rewards track without
   introducing a second brand colour. */
.ptm-sc__benefit {
  margin: 20px 0;
  padding: 18px 0;
  border-top: 1px solid var(--ptm-border);
  border-bottom: 1px solid var(--ptm-border);
}
.ptm-sc__benefit .ptm-sc__gift {
  margin: 0;
  background: linear-gradient(135deg, var(--ptm-lightest), #fff);
  border-color: var(--ptm-lighter);
  box-shadow: 0 8px 22px rgba(15, 62, 153, .08);
}
.ptm-sc__benefit .ptm-sc__gift.is-unlocked {
  background: linear-gradient(135deg, var(--ptm-lightest), #fff);
  border-color: var(--ptm-primary);
  box-shadow: 0 10px 26px rgba(15, 62, 153, .13);
}
.ptm-sc__benefit .ptm-sc__gift-tag,
.ptm-sc__benefit .ptm-sc__gift.is-unlocked .ptm-sc__gift-tag { color: var(--ptm-primary-deep); }
.ptm-sc__benefit .status-free { background: var(--ptm-primary) !important; }
.ptm-sc__benefit + .ptm-sc__progress { margin-top: 24px; }

/* ---------------------------------------------------------------------
   11.3  FOOTER ARTWORK
   ---------------------------------------------------------------------
   One oversized necklace-and-pendant contour replaces the rejected row of
   circles. It stays behind the content at low opacity, and loses its sparse
   accent facets on phones.
   ------------------------------------------------------------------ */
.ptm-footer { position: relative; overflow: hidden; }
.ptm-footer__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--ptm-light);
}
.ptm-footer__jewel {
  position: absolute;
  left: 50%;
  top: 8%;
  width: min(420px, 48vw);
  height: auto;
  transform: translateX(-50%);
  opacity: .06;
}
@media (max-width: 767px) {
  .ptm-footer__jewel {
    top: 18px;
    width: min(220px, 58vw);
    opacity: .07;
  }
}

/* ---------------------------------------------------------------------
   11.4  SHOP BY BUDGET — three bands, one screen, on a phone
   ---------------------------------------------------------------------
   The horizontal card (82px photo beside two lines of text) stacked to three
   tall rows and needed scrolling to compare, which defeats the point: a
   budget chooser only works if you can see the choices together. On a phone
   the card turns vertical and the three sit in one row.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ptm-budget__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
  }
  .ptm-budget__card {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 12px 8px 13px;
    border-radius: 15px;
    text-align: center;
  }
  .ptm-budget__img { width: 100%; aspect-ratio: 1 / 1; height: auto; border-radius: 11px; }
  .ptm-budget__body { gap: 2px; justify-items: center; }
  .ptm-budget__body strong { font-size: .82rem; line-height: 1.2; }
  .ptm-budget__body small { font-size: .66rem; }
  .ptm-budget__body em { margin-top: 3px; font-size: .68rem; }
  .ptm-budget__body em svg { width: 11px; height: 11px; }
}
@media (max-width: 359px) {
  .ptm-budget__body strong { font-size: .74rem; }
  .ptm-budget__body em { display: none; }   /* the whole card is the target */
}

/* ---------------------------------------------------------------------
   11.5  BRAND STORY — rebuilt
   ---------------------------------------------------------------------
   The first version was an image beside a paragraph and a tick list, which
   read like an About page excerpt rather than a brand moment. This gives it
   a composition: the photograph is framed and offset, a hallmark card
   overlaps its corner, and the three proof points become a row of credentials
   with their own rules rather than bullets.
   ------------------------------------------------------------------ */
.ptm-story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 34% at 8% 4%, rgba(59, 130, 246, .09), transparent 62%),
    radial-gradient(ellipse 40% 30% at 98% 92%, rgba(125, 160, 239, .12), transparent 60%),
    var(--ptm-offwhite);
}
.ptm-story__grid { align-items: center; }
.ptm-story__media {
  position: relative;
  border-radius: 26px;
  box-shadow: 0 26px 60px rgba(10, 26, 58, .18);
}
/* A thin offset frame — the engraved-edge feel, drawn not imported. */
.ptm-story__media::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 18px;
  pointer-events: none;
}
.ptm-story__media img { transition: transform 1.1s var(--ease); }
.ptm-story__media:hover img { transform: scale(1.03); }
.ptm-story__stamp {
  left: auto;
  right: -14px;
  bottom: 22px;
  flex-direction: column;
  gap: 2px;
  padding: 13px 17px;
  border-radius: 16px;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 14px 34px rgba(10, 26, 58, .22);
}
.ptm-story__stamp svg { color: var(--ptm-primary); }
.ptm-story__stamp b { display: block; font-size: .95rem; letter-spacing: .02em; }
.ptm-story__stamp i { display: block; font-size: .62rem; font-style: normal; font-weight: 700; letter-spacing: .12em; color: var(--ptm-soft); text-transform: uppercase; }

.ptm-story__copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.03em; }
.ptm-story__copy > p { font-size: 1rem; }
.ptm-story__copy > p:first-of-type { font-size: 1.06rem; color: var(--ptm-text); }
/* Credentials, not bullets: three cells with a rule between them. */
.ptm-story__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 26px 0 26px;
  padding: 0;
  border-top: 1px solid var(--ptm-border);
  border-bottom: 1px solid var(--ptm-border);
}
.ptm-story__points li {
  display: block;
  padding: 16px 14px 16px 0;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ptm-mid);
}
.ptm-story__points li + li { padding-left: 14px; border-left: 1px solid var(--ptm-border); }
.ptm-story__points li b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display, inherit);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--ptm-navy-900);
  letter-spacing: -.01em;
}
.ptm-story__sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
.ptm-story__sign small {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ptm-soft);
}
@media (max-width: 899px) {
  .ptm-story__media { border-radius: 20px; }
  .ptm-story__stamp { right: 14px; bottom: 14px; }
  .ptm-story__points { margin: 20px 0; }
  .ptm-story__points li { padding: 13px 9px 13px 0; font-size: .74rem; }
  .ptm-story__points li + li { padding-left: 9px; }
  .ptm-story__points li b { font-size: 1.05rem; }
  .ptm-story__sign { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------------------------------------------------------------------
   11.6  CUSTOMER REVIEWS — restored and rebuilt
   ---------------------------------------------------------------------
   Structure follows the reference the owner supplied: header with stat
   cards, rating bars, then a marquee of cards that becomes a snap swiper on
   a phone. Palette is sapphire, icons are the site's own line set, and the
   numbers are all read from the `testimonials` table at render time.
   ------------------------------------------------------------------ */
.ptm-rev {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 88px) 0 clamp(44px, 6vw, 72px);
  background:
    radial-gradient(ellipse 42% 30% at 12% 0%, rgba(59, 130, 246, .10), transparent 62%),
    radial-gradient(ellipse 36% 26% at 100% 18%, rgba(125, 160, 239, .13), transparent 58%),
    linear-gradient(180deg, var(--ptm-white) 0%, var(--ptm-offwhite) 48%, var(--ptm-white) 100%);
}
/* Drawn corner marks, the same idea as the reference's paw sketches but in
   PTM's own language: a faceted stone and a pendant arc. */
.ptm-rev__art { position: absolute; pointer-events: none; color: var(--ptm-primary); opacity: .13; }
.ptm-rev__art svg { display: block; width: 100%; height: auto; }
.ptm-rev__art--a { top: 26px; left: 30px; width: 42px; transform: rotate(-14deg); }
.ptm-rev__art--b { bottom: 30px; right: 34px; width: 46px; transform: rotate(10deg); opacity: .1; }
@media (max-width: 640px) {
  .ptm-rev__art--a { top: 12px; left: 8px; width: 28px; }
  .ptm-rev__art--b { bottom: 12px; right: 8px; width: 30px; }
}

.ptm-rev__intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 28px 36px;
  align-items: stretch;
  margin-bottom: 28px;
}
.ptm-rev__lead {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ptm-rev__head { margin: 0 0 18px; }
.ptm-rev__copy { max-width: 58ch; }
.ptm-rev__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  padding: 7px 15px;
  color: #fff;
  background: var(--ptm-navy-900);
  border-radius: var(--r-pill);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(10, 26, 58, .18);
}
.ptm-rev__eyebrow i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ptm-light);
  animation: ptm-rev-pulse 1.8s ease-in-out infinite;
}
@keyframes ptm-rev-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125, 160, 239, .6); }
  50%      { box-shadow: 0 0 0 7px rgba(125, 160, 239, 0); }
}
.ptm-rev__title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.03em; color: var(--ptm-navy-900); }
.ptm-rev__title em { font-style: italic; font-weight: 500; color: var(--ptm-primary-deep); }
.ptm-rev__sub { margin-top: 13px; max-width: 56ch; color: var(--ptm-mid); font-size: .96rem; line-height: 1.7; }

.ptm-rev__stats {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 13px;
  min-height: 100%;
}
.ptm-rev__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 18px 17px;
  text-align: center;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 19px;
  box-shadow: 0 12px 32px rgba(10, 26, 58, .09);
}
.ptm-rev__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 9px;
  padding: 4px 10px;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border-radius: var(--r-pill);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ptm-rev__stat strong {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1;
  font-weight: 700;
  color: var(--ptm-navy-900);
  letter-spacing: -.03em;
}
.ptm-rev__stat strong span { font-size: .52em; color: var(--ptm-soft); }
.ptm-rev__stat small { display: block; margin-top: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ptm-soft); }

/* Rating distribution — real counts, not invented dimension scores. */
.ptm-rev__bars {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  flex: 1;
  margin: 0;
  padding: 18px 20px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(10, 26, 58, .07);
}
.ptm-rev__bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; align-items: center; gap: 11px; }
.ptm-rev__bar-lbl { display: inline-flex; align-items: center; gap: 3px; font-size: .78rem; font-weight: 700; color: var(--ptm-navy-900); }
.ptm-rev__bar-lbl svg { color: var(--ptm-gold); }  /* gold: stars only, per brand rule */
.ptm-rev__bar-track { height: 8px; overflow: hidden; background: var(--ptm-lightest); border-radius: var(--r-pill); }
.ptm-rev__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--ptm-primary-deep), var(--ptm-primary) 60%, var(--ptm-light));
  transition: width 1.2s cubic-bezier(.25, .46, .45, .94);
}
.ptm-rev__bar-n { font-size: .74rem; font-weight: 700; color: var(--ptm-soft); font-variant-numeric: tabular-nums; text-align: right; }

/* Two-row, opposite-direction review marquee. */
.ptm-rev__rows {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}
.ptm-rev__viewport {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ptm-rev__viewport:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: 4px; border-radius: 16px; }
.ptm-rev__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ptm-rev__viewport--forward .ptm-rev__track { animation: ptm-rev-loop-forward 32s linear infinite; }
.ptm-rev__viewport--reverse .ptm-rev__track { animation: ptm-rev-loop-reverse 38s linear infinite; }
.ptm-rev__viewport--forward .ptm-rev__track,
.ptm-rev__viewport--reverse .ptm-rev__track { animation-play-state: var(--play, running); }
.ptm-rev__viewport:hover .ptm-rev__track,
.ptm-rev__viewport:focus-within .ptm-rev__track { animation-play-state: paused; }
.ptm-rev__group { display: flex; gap: 16px; padding-right: 16px; }
@keyframes ptm-rev-loop-forward { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ptm-rev-loop-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.ptm-revcard {
  flex: 0 0 288px;
  width: 288px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 19px;
  box-shadow: 0 12px 30px rgba(10, 26, 58, .08);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.ptm-revcard:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(10, 26, 58, .14); border-color: var(--ptm-lighter); }
.ptm-revcard__media {
  aspect-ratio: 3 / 2;
  margin: -18px -18px 15px;
  overflow: hidden;
  background: var(--ptm-lightest);
  border-radius: 18px 18px 10px 10px;
}
.ptm-revcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptm-revcard__top { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.ptm-revcard__avatar {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, var(--ptm-primary), var(--ptm-navy-900));
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(10, 26, 58, .2);
  font-size: .85rem;
  font-weight: 800;
}
.ptm-revcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ptm-revcard__who { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ptm-revcard__who b { font-size: .84rem; font-weight: 800; color: var(--ptm-navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-revcard__who i { font-size: .68rem; font-style: normal; font-weight: 600; color: var(--ptm-soft); }
.ptm-revcard__tick {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: #fff;
  background: var(--ptm-primary);
  border-radius: 50%;
}
.ptm-revcard__stars { margin-bottom: 9px; color: var(--ptm-gold); font-size: .9rem; letter-spacing: 1.5px; line-height: 1; }
.ptm-revcard__stars .off { color: var(--ptm-lighter); }
.ptm-revcard__title { margin-bottom: 7px; font-size: .88rem; font-weight: 800; line-height: 1.35; color: var(--ptm-navy-900); }
.ptm-revcard__text { flex: 1; font-size: .84rem; line-height: 1.65; color: var(--ptm-mid); }
.ptm-revcard__foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ptm-border);
  font-size: .7rem;
  font-weight: 700;
  color: var(--ptm-soft);
}
.ptm-revcard__foot svg { color: var(--ptm-primary); }

.ptm-rev__note {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ptm-soft);
}
.ptm-rev__note a { color: var(--ptm-primary-deep); font-weight: 700; text-decoration: none; }
.ptm-rev__note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .ptm-rev__intro { grid-template-columns: 1fr; gap: 16px; }
  .ptm-rev__stats { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .ptm-rev__bars { max-width: none; }
}
@media (max-width: 767px) {
  .ptm-rev__viewport {
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 6px 16px 14px;
  }
  .ptm-rev__group { gap: 12px; padding-right: 12px; }
  .ptm-revcard { flex-basis: min(78vw, 296px); width: min(78vw, 296px); }
  .ptm-revcard__media { margin: -18px -18px 14px; }
  .ptm-rev__bars { padding: 15px 16px; }
  .ptm-rev__stat { padding: 14px 12px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.ptm-force-motion) .ptm-rev__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  html:not(.ptm-force-motion) .ptm-rev__viewport::-webkit-scrollbar { display: none; }
  html:not(.ptm-force-motion) .ptm-rev__track { animation: none !important; transform: none !important; }
  html:not(.ptm-force-motion) .ptm-rev__eyebrow i { animation: none; }
  html:not(.ptm-force-motion) .ptm-rev__group[aria-hidden="true"] { display: none !important; }
  html:not(.ptm-force-motion) .ptm-revcard { scroll-snap-align: start; }

  /* Same V9.1 / dual-row pattern: beat ptm.css's
     `animation-duration: .01ms !important` without locking transform. */
  html.ptm-force-motion .ptm-rev__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  html.ptm-force-motion .ptm-rev__viewport--forward .ptm-rev__track {
    animation-name: ptm-rev-loop-forward !important;
    animation-duration: 32s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: var(--play, running) !important;
  }
  html.ptm-force-motion .ptm-rev__viewport--reverse .ptm-rev__track {
    animation-name: ptm-rev-loop-reverse !important;
    animation-duration: 38s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: var(--play, running) !important;
  }
  html.ptm-force-motion .ptm-rev__group[aria-hidden="true"] { display: flex !important; }
  html.ptm-force-motion .ptm-rev__eyebrow i { animation: ptm-rev-pulse 1.8s ease-in-out infinite !important; }

  html:not(.ptm-force-motion) .ptm-look__viewport--loop .ptm-look__track,
  html:not(.ptm-force-motion) .ptm-pdp-reviews__track,
  html:not(.ptm-force-motion) .ptm-spp__shots-track { animation: none !important; }
  html:not(.ptm-force-motion) .ptm-look__group[aria-hidden="true"],
  html:not(.ptm-force-motion) .ptm-pdp-reviews__group[aria-hidden="true"],
  html:not(.ptm-force-motion) .ptm-spp__shots-group[aria-hidden="true"] { display: none !important; }

  html.ptm-force-motion .ptm-look__viewport--loop .ptm-look__track,
  html.ptm-force-motion .ptm-pdp-reviews__track,
  html.ptm-force-motion .ptm-spp__shots-track {
    animation-name: ptm-rev-loop-forward !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html.ptm-force-motion .ptm-look__viewport--loop .ptm-look__track { animation-duration: 48s !important; }
  html.ptm-force-motion .ptm-pdp-reviews__track { animation-duration: 42s !important; }
  html.ptm-force-motion .ptm-spp__shots-track { animation-duration: 36s !important; }
  html.ptm-force-motion .ptm-look__group[aria-hidden="true"],
  html.ptm-force-motion .ptm-pdp-reviews__group[aria-hidden="true"],
  html.ptm-force-motion .ptm-spp__shots-group[aria-hidden="true"] { display: flex !important; }
}

.ptm-pdp-reviews { margin-top: clamp(56px, 7vw, 80px); }
.ptm-pdp-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
.ptm-pdp-reviews__grid .ptm-revcard {
  width: auto;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   11.7  SCROLL AND MOTION SMOOTHNESS
   ---------------------------------------------------------------------
   Three things were making scrolling feel like it caught:

   1. Every marquee animates `transform` on a track holding a dozen images.
      Without a compositor hint the browser repaints those pixels on the main
      thread each frame, which is exactly the stutter that shows up while the
      page is also scrolling. `will-change: transform` promotes each track to
      its own layer once, and `backface-visibility` keeps it there.
   2. Scroll containers had no `overscroll-behavior`, so flicking a rail to
      its end handed the gesture to the page and the page jumped.
   3. `scroll-behavior: smooth` was never set, so anchor jumps were instant.

   `will-change` is applied to the handful of elements that genuinely animate
   continuously, never broadly: a promoted layer costs memory, and promoting
   everything is slower than promoting nothing.
   ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.ptm-dual__track,
.ptm-rev__track,
.ptm-shoploop__track,
.ptm-revloop__track,
.ptm-tb__track,
.ptm-look__track,
.ptm-pdp-reviews__track,
.ptm-spp__shots-track {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ptm-dual__row,
.ptm-rail__track,
.ptm-rev__viewport,
.ptm-hcat__inner,
.ptm-vidrow__track {
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .ptm-dual__row, .ptm-rail__track, .ptm-rev__viewport,
  .ptm-hcat__inner, .ptm-vidrow__track { scroll-behavior: auto; }
}

/* REMOVED: `content-visibility: auto` on rail images.
   It was reached for as a performance win and is the wrong tool here. The
   property tells the browser it may skip rendering a subtree that is off
   screen — which is meant for large blocks, not single images, and it left
   product photographs painting blank in the rails. The images already carry
   `loading="lazy"`, which is the correct mechanism and costs nothing. */

/* A drawer or sheet locking <body> must not let the page behind it rubber-band. */
body.ptm-cart-lock,
body.ptm-filter-lock { overscroll-behavior: none; }

/* ---------------------------------------------------------------------
   11.8  FOOTER COLUMNS COLLAPSE ON A PHONE
   ---------------------------------------------------------------------
   Seventeen link rows across three columns made the phone footer roughly
   3,700px of scrolling before the contact details. Each column is now a
   <details>; ptm.js closes them below 992px. Desktop is unchanged because
   the marker is hidden and the columns are always open there.
   ------------------------------------------------------------------ */
.ptm-footer__col > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.ptm-footer__col > summary::-webkit-details-marker { display: none; }
.ptm-footer__col > summary h4 { margin: 0; }
.ptm-footer__caret { display: none; }

@media (max-width: 991px) {
  .ptm-footer__col > summary {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .ptm-footer__caret {
    display: block;
    flex: none;
    width: 9px; height: 9px;
    border-right: 2px solid rgba(255, 255, 255, .5);
    border-bottom: 2px solid rgba(255, 255, 255, .5);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s var(--ease);
  }
  .ptm-footer__col[open] > summary .ptm-footer__caret { transform: rotate(-135deg) translate(-2px, -2px); }
  .ptm-footer__col[open] > summary { border-bottom-color: transparent; }
  /* A little breathing room under an open column so the rows do not butt
     straight into the next heading. */
  .ptm-footer__col > a:last-of-type { margin-bottom: 10px; }
}
@media (min-width: 992px) {
  .ptm-footer__col > summary { cursor: default; }
}

/* =====================================================================
   V12 — owner review round 2. MUST STAY LAST IN THIS FILE.
     12.1  support launcher was buried under the sticky add-to-cart bar
     12.2  toasts shared the same collision
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   12.1  THE HALF-CUT CIRCLE IN THE BOTTOM-RIGHT CORNER
   ---------------------------------------------------------------------
   Measured on a product page at 1920 with the bar showing:

       .ptm-atcbar        fixed, top 832, height 68, z-index 75
       .ptm-sup__launch   fixed, top 816, height 58, z-index 58
       elementFromPoint(launcher centre) -> .ptm-atcbar

   So the launcher was not merely overlapped, it was UNCLICKABLE: the bar
   painted over it and swallowed the pointer, leaving only the 16px sliver
   above the bar's top edge visible. That sliver is the cut-off circle.

   Two causes, both mine:
     1. V10 gave the new bar z-index 75 and never moved the launcher off 58.
     2. The clearance rule that does lift the launcher was written inside
        `@media (max-width: 991px)`, so it only ever ran on phones and
        tablets. Desktop had no rule at all.

   Fixed at every width. The launcher sits at 78 — above the bar (75),
   still below the bottom nav (80), the support panel (92), the welcome
   popup (95) and the cart (120), so the documented layer order in §10.1
   still holds top to bottom.
   ------------------------------------------------------------------ */
.ptm-sup__launch { z-index: 78; }

/* Clear the bar whenever it is showing. `--ptm-atcbar-h` is the bar's own
   height so the two can never drift apart; the phone value also clears the
   bottom nav via --ptm-bottom-clear. */
.ptm-atcbar { --ptm-atcbar-h: 68px; }
body.ptm-atcbar-on .ptm-sup__launch {
  bottom: calc(var(--ptm-atcbar-h, 68px) + 20px);
  transition: bottom .28s var(--ease);
}
@media (max-width: 991px) {
  /* The bar wraps on a phone and measures 92px, not 68 - ptm.js publishes the
     real number, so this sum stays right whatever the bar ends up containing. */
  body.ptm-atcbar-on .ptm-sup__launch {
    bottom: calc(var(--ptm-bottom-clear, 62px) + var(--ptm-atcbar-h, 92px) + 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ptm-atcbar-on .ptm-sup__launch { transition: none; }
}

/* ---------------------------------------------------------------------
   12.2  Toasts had the same collision, one layer down.
   `.ptm-flash` is fixed at bottom 88px with z-index 70 — under the bar (75)
   and directly in its path. A confirmation the buyer cannot read is worse
   than no confirmation, so it moves up with the launcher.
   ------------------------------------------------------------------ */
body.ptm-atcbar-on .ptm-flash[class*="ptm-flash--"] {
  bottom: calc(var(--ptm-atcbar-h, 68px) + 22px);
  z-index: 79;
}
@media (max-width: 991px) {
  body.ptm-atcbar-on .ptm-flash[class*="ptm-flash--"] {
    bottom: calc(var(--ptm-bottom-clear, 62px) + var(--ptm-atcbar-h, 92px) + 18px);
  }
}

/* ---------------------------------------------------------------------
   12.3  TOUCH TARGETS — found by auditing, not reported
   ---------------------------------------------------------------------
   Swept every link and button on the homepage at 320/360/390/430/768 and
   measured the rendered box. The page has no overflow and no clipped text,
   but a set of controls were far below a usable thumb size:

       .ptm-herodots button        22 x 7      <- worst offender
       .ptm-rev__note a           252 x 16
       .ptm-jcard__cta            235 x 20
       .ptm-footer__legal a        87 x 20
       .ptm-hfaq__more a          119 x 20
       .ptm-find__more             97 x 21
       .ptm-card__wish             34 x 34
       .ptm-pop__x                 34 x 34

   A 7px-tall hero dot is not a control, it is a decoration you can
   occasionally hit. WCAG 2.5.8 asks 24x24 as a floor and 44x44 is the
   comfortable target.

   The technique matters: `padding-block` grows the hit box and an equal
   negative `margin-block` cancels its effect on surrounding layout, so
   every one of these gets a 44px-tall tappable area while the page looks
   pixel-identical. No repositioning, no reflow, nothing to re-check
   visually. Scoped to coarse pointers and small screens so a mouse user's
   hover areas are unchanged.
   ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 768px) {
  .ptm-find__more,
  .ptm-jcard__cta,
  .ptm-hfaq__more a,
  .ptm-rev__note a,
  .ptm-footer__legal a,
  .ptm-pop__skip,
  .ptm-footer__badges a {
    padding-block: 12px;
    margin-block: -12px;
  }

  /* NOTE: a `::after` overlay was tried here first to grow the hit box while
     keeping the visual size. It could not be proven to work — probing with
     elementFromPoint across the intended span returned the element 0 times
     out of 7 — so it is not shipped. Unverified CSS is worse than none: it
     reads as solved. The dots are fixed below by changing the control itself,
     which is measurable. The 34px wishlist and close buttons are left alone:
     34px already clears the 24px WCAG 2.5.8 floor, and growing them on a
     169px phone card would cost more than it gains.

  /* Footer rows are already full width; give them the height too. */
  .ptm-footer__col > a { min-height: 44px; align-items: center; }
}

/* ---------------------------------------------------------------------
   12.3b  HERO DOTS — a real control, same look
   ---------------------------------------------------------------------
   Was `width: 7px; height: 7px` on the <button> itself, so the tappable box
   WAS the 7px dot. The button now carries the hit area (30px tall, 24px
   wide minimum) and the pill moves into ::before, which paints exactly the
   pixels the old rule did. Nothing moves: the row is re-centred with a
   negative margin equal to the padding it gained.
   ------------------------------------------------------------------ */
.ptm-herodots { gap: 0; margin-block: -12px; }
.ptm-herodots button {
  width: auto;
  min-width: 24px;
  height: 30px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 999px;
  transition: none;
}
.ptm-herodots button::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ptm-lighter);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.ptm-herodots button.is-on { background: none; }
.ptm-herodots button.is-on::before { width: 22px; background: var(--ptm-primary-deep); }
.ptm-herodots button:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .ptm-herodots button::before { transition: none; } }

/* ---------------------------------------------------------------------
   12.4  PDP REASSURANCE — the BREXX benefit-card pattern, PTM claims
   ---------------------------------------------------------------------
   The owner sent the BREXX product block (icon tile + bold title + one
   supporting line, stacked as cards) as the look he wants.

   This does NOT add a fourth block saying the same thing. The purchase
   column already ended with `.ptm-spp__trust`: a 3-across strip of tiny
   centred labels, 185px of quiet text under Add to Cart. Same promises,
   footnote styling. It is restyled into the card pattern and gains the one
   claim it was missing — the 925 BIS hallmark, which is the strongest thing
   a silver shop can say and was nowhere near the price.

   What is deliberately NOT taken from that reference:
     · "MEGA SALE" / "70% OFF" burned-in badges and the pulsing animation
     · "BUY 2 & SAVE 10%" — PTM has no such rule; inventing one would be a
       discount the checkout cannot honour
     · the hardcoded 4.9 rating and 2.2K review count in its schema block
   Every line below is already true and already elsewhere on the site.
   ------------------------------------------------------------------ */
.ptm-spp__trust .ptm-spp__usp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}
.ptm-spp__trust .ptm-spp__usp li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  /* The old 3-across strip left `justify-items: center` on this element.
     Grid items honour that before any text-align, so the text block shrank to
     its content width and sat centred in the 1fr column no matter what
     text-align said. This is the declaration that actually moves it. */
  justify-items: start;
  gap: 13px;
  padding: 13px 15px;
  text-align: left;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-right: 1px solid var(--ptm-border);
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(10, 26, 58, .05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ptm-spp__trust .ptm-spp__usp li:hover {
  transform: translateY(-2px);
  border-color: var(--ptm-lighter);
  box-shadow: 0 10px 26px rgba(10, 26, 58, .10);
}
.ptm-spp__trust .ptm-spp__usp li:last-child { border-right: 1px solid var(--ptm-border); }

.ptm-spp__trust .ptm-spp__usp-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--ptm-primary-deep);
  background: linear-gradient(140deg, var(--ptm-lightest), #fff 78%);
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px var(--ptm-lighter), 0 3px 9px rgba(37, 99, 235, .12);
}
/* The old 3-across strip centred everything; a card reads left-aligned.
   `justify-items` is what actually does it here — these are grid items, so
   `text-align` alone leaves them centred in their track. */
.ptm-spp__trust .ptm-spp__usp li > span:last-child {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.ptm-spp__trust .ptm-spp__usp strong,
.ptm-spp__trust .ptm-spp__usp small { text-align: left; justify-self: start; }
.ptm-spp__trust .ptm-spp__usp strong {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ptm-navy-900);
}
.ptm-spp__trust .ptm-spp__usp small {
  font-size: .79rem;
  line-height: 1.4;
  color: var(--ptm-mid);
}

/* The hallmark is the one place the brand rules allow gold, and it is the
   claim worth the emphasis. */
.ptm-spp__usp--hallmark .ptm-spp__usp-ico {
  color: #8A6A22;
  background: linear-gradient(140deg, rgba(201, 161, 75, .18), #fff 78%);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 75, .42), 0 3px 9px rgba(201, 161, 75, .18);
}
.ptm-spp__usp--hallmark strong { letter-spacing: .01em; }

/* The COD note is a caveat, not a benefit — keep it quieter than the cards
   above it so the eye reaches the reassurance first. */
.ptm-spp__trust .ptm-spp__cod {
  margin-bottom: 12px;
  font-size: .82rem;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .ptm-spp__trust .ptm-spp__usp li { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; padding: 11px 13px; }
  .ptm-spp__trust .ptm-spp__usp-ico { width: 40px; height: 40px; border-radius: 11px; }
  .ptm-spp__trust .ptm-spp__usp strong { font-size: .88rem; }
  .ptm-spp__trust .ptm-spp__usp small { font-size: .74rem; }
}

/* =====================================================================
   V13 — final owner round. MUST STAY LAST IN THIS FILE.
     13.1  cart: rewards bar pinned under the header
     13.2  header search: depth, icon alignment, custom 3D category menu
     13.3  PDP: equal columns, panel treatment, Buy Now
     13.4  PDP gallery: thumbnail overflow
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   13.1  CART REWARDS BAR — pinned, not scrolled past
   ---------------------------------------------------------------------
   It rendered inside the scrolling body between the recommendations and the
   coupon row. Two problems: it scrolled out of view exactly when the shopper
   was changing quantities (the moment the bar is for), and its milestone
   labels sat hard against the coupon bar underneath — the touching the owner
   circled. It is now a flex child of the drawer between the header and the
   body, so it cannot scroll away and owns its own space.
   ------------------------------------------------------------------ */
.ptm-sc__rewards {
  flex: none;
  display: none;
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, var(--ptm-lightest), var(--ptm-white));
  border-bottom: 1px solid var(--ptm-border);
  box-shadow: 0 6px 14px -8px rgba(10, 26, 58, .28);
}
.ptm-sc__rewards.is-on { display: block; }
.ptm-sc__rewards .ptm-sc__progress { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.ptm-sc__rewards .ptm-sc__progress-msg {
  margin: 0 0 12px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ptm-navy-900);
}
.ptm-sc__rewards .ptm-sc__progress-msg b { color: var(--ptm-primary-deep); font-weight: 800; }
/* Room under the track for the milestone icon + two label lines, so nothing
   overlaps whatever follows. */
.ptm-sc__rewards .ptm-sc__progress-track { margin-bottom: 42px; }

/* ---------------------------------------------------------------------
   13.2  HEADER SEARCH — depth, and the submit button actually aligned
   ---------------------------------------------------------------------
   The magnifier sat proud of the field: the search shell is 52px tall with a
   1px border, so its inner controls have 50px to fill, but the button kept a
   radius and a shadow of its own and read as a separate blue tile pasted on
   the end rather than part of the control.

   The field now has a real inset well and the button is flush to the shell's
   inside edge, square on the left, matching the shell's radius on the right.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-search {
    height: 54px;
    border: 1px solid rgba(15, 36, 86, .16);
    border-radius: 15px;
    background: var(--ptm-white);
    box-shadow:
      inset 0 1px 2px rgba(15, 36, 86, .06),
      0 1px 0 rgba(255, 255, 255, .9),
      0 6px 18px rgba(7, 37, 85, .09);
    transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .ptm-search:focus-within {
    border-color: var(--ptm-primary);
    box-shadow:
      inset 0 1px 2px rgba(15, 36, 86, .05),
      0 0 0 3px rgba(59, 130, 246, .16),
      0 10px 24px rgba(7, 37, 85, .13);
  }
  .ptm-search select,
  .ptm-search input,
  .ptm-search button { height: 52px; }

  .ptm-search button {
    width: 58px;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(180deg, var(--ptm-primary), var(--ptm-primary-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), -1px 0 0 rgba(15, 36, 86, .10);
  }
  .ptm-search button:hover {
    background: linear-gradient(180deg, var(--ptm-primary-deep), var(--ptm-navy-800));
  }
  .ptm-search button:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22); }
  .ptm-search button svg { width: 19px; height: 19px; }
}

/* SPECIFICITY, read before editing. `ptm.css` styles the submit control with
   `.ptm-search button` — (0,1,1) — and both the category trigger AND every
   option in the menu are <button>s inside `.ptm-search`. A bare
   `.ptm-scope__btn` is (0,1,0) and LOSES: the trigger inherited the submit
   button's `display: grid`, `width: 62px` and `color: #fff`, so its label
   rendered white-on-white inside a 58px box — an empty-looking panel. Every
   selector below is therefore written `.ptm-search .ptm-scope…` (0,2,1). The widget is also renamed from
   .ptm-cats to .ptm-scope: ptm.css:760 already owns `.ptm-cats` for the
   homepage collections SECTION (`padding: 72px 0`), which is why the trigger
   rendered 100px below its own box inside a 200px-tall wrapper..
   Same family of trap as the category rail (CHANGELOG V9.7). */
/* The native <select> cannot be styled past its own box — the option list is
   drawn by the OS. ptm.js replaces it with this, keeping the real <select> in
   the DOM so the form still submits and no-JS still works. */
.ptm-scope { position: relative; flex: none; }
.ptm-search .ptm-scope__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* `.ptm-search button` pins width to 62px for the submit control. */
  width: auto;
  height: 52px;
  padding: 0 14px 0 16px;
  color: var(--ptm-navy-900);
  /* Explicit properties, not the `font` shorthand: the shorthand was computing
     back to 16px here and the label overflowed its own max-width, clipping to
     "ALL CATEGOR...". Sentence case rather than uppercase for the same reason
     the category select was changed in V9.9 - uppercase is ~28% wider. */
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(180deg, var(--ptm-white), var(--ptm-offwhite));
  border: 0;
  border-right: 1px solid rgba(15, 36, 86, .14);
  border-radius: 14px 0 0 14px;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .8);
  transition: background .2s var(--ease);
}
.ptm-search .ptm-scope__btn:hover { background: linear-gradient(180deg, var(--ptm-offwhite), var(--ptm-lightest)); }
.ptm-search .ptm-scope__btn svg { flex: none; width: 13px; height: 13px; color: var(--ptm-soft); transition: transform .25s var(--ease); }
.ptm-search .ptm-scope.is-open .ptm-scope__btn svg { transform: rotate(180deg); }
.ptm-search .ptm-scope__lbl { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 700; letter-spacing: .01em; text-transform: none; }

.ptm-search .ptm-scope__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 246px;
  padding: 7px;
  background: var(--ptm-white);
  border: 1px solid rgba(15, 36, 86, .12);
  border-radius: 16px;
  /* The depth: a lifted drop shadow, an inner top highlight and a hairline
     ring. Layered elevation, not a bevel. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 44px rgba(10, 26, 58, .20),
    0 4px 10px rgba(10, 26, 58, .10);
  transform-origin: top left;
  transform: translateY(-6px) scale(.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease), transform .22s var(--ease), visibility .22s;
}
.ptm-search .ptm-scope.is-open .ptm-scope__menu { opacity: 1; visibility: visible; transform: none; }
.ptm-search .ptm-scope__menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 11px;
  height: 11px;
  background: var(--ptm-white);
  border-left: 1px solid rgba(15, 36, 86, .12);
  border-top: 1px solid rgba(15, 36, 86, .12);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.ptm-search .ptm-scope__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  color: var(--ptm-text);
  font-size: .86rem;
  font-weight: 600;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ptm-search .ptm-scope__opt svg { flex: none; width: 16px; height: 16px; color: var(--ptm-primary); opacity: .85; }
.ptm-search .ptm-scope__opt:hover,
.ptm-search .ptm-scope__opt:focus-visible { background: var(--ptm-lightest); color: var(--ptm-primary-deep); outline: none; }
.ptm-search .ptm-scope__opt[aria-selected="true"] { background: var(--ptm-lightest); color: var(--ptm-primary-deep); font-weight: 800; }
.ptm-search .ptm-scope__opt .n { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--ptm-soft); font-variant-numeric: tabular-nums; }
.ptm-search .ptm-scope__sep { height: 1px; margin: 6px 9px; background: var(--ptm-border); }
.ptm-search .ptm-scope__grp {
  padding: 8px 11px 4px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ptm-soft);
}
/* The real control stays in the DOM for form submission and no-JS. */
.ptm-search select.is-swapped { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ptm-search .ptm-scope__menu { transition: none; }
  .ptm-search .ptm-scope__btn svg { transition: none; }
}

/* ---------------------------------------------------------------------
   13.2b  SEARCH BAR LAYOUT — floats out, flex in
   ---------------------------------------------------------------------
   The desktop bar laid its three controls out with `float: left` and a
   hardcoded `width: calc(100% - 227px)` on the input, i.e. it depended on the
   select being exactly 165px and the button exactly 62px. Inserting the
   category menu in front of the select broke that arithmetic and the submit
   button wrapped onto a new line — measured 195px right of and 201px BELOW
   where it belongs. That is the misplaced magnifier in the screenshot; it was
   never a padding problem.

   Flex removes the arithmetic entirely: the menu and the button take their
   own width, the input takes the rest. Scoped to >= 992px, and verified that
   `.ptm-search` still computes `display: none` on a phone (the phone uses
   `.ptm-msearch`), so the phone header is untouched.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-search {
    display: flex;
    align-items: stretch;
    /* `overflow: hidden` came with the float layout, to clip the floated
       children to the rounded shell. It also clipped the category menu, which
       is absolutely positioned BELOW the bar — the menu opened and was never
       visible. The children now carry their own matching radii, so nothing
       needs clipping. */
    overflow: visible;
  }
  .ptm-search > .ptm-scope { flex: none; }
  .ptm-search > svg { display: none; }
  .ptm-search input {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0;
    align-self: stretch;
  }
  .ptm-search button[type="submit"] {
    flex: none;
    float: none;
    align-self: stretch;
    height: auto;
  }
  /* The bare select only shows if JavaScript never ran; keep it usable. */
  .ptm-search select:not(.is-swapped) { flex: none; float: none; align-self: stretch; }
}

/* The category menu opens downward, across the category rail. `.ptm-hcat`
   carries z-index 29 while `.ptm-header` had none, so the rail painted over
   the top of the open menu. Lifting the header above the rail is enough — the
   menu's own z-index only orders it inside the header. Still far below the
   sticky stack (40), the cart (120) and everything else in the layer scale. */
@media (min-width: 992px) {
  /* `.ptm-header` is pinned `position: static` by an earlier rule, and z-index
     does nothing on a static element — the first attempt at this set both and
     only the z-index landed. Scoped through `.ptm-stickytop` so it outranks it. */
  .ptm-stickytop .ptm-header { position: relative; z-index: 34; }
}

/* ---------------------------------------------------------------------
   13.3  PDP — equal columns, panel treatment, Buy Now
   ---------------------------------------------------------------------
   The grid measured 607.6px / 552.4px with a 56px gap: the media column was
   55px wider than the purchase column, which is why the split read as "not
   quite half and half". `1fr 1fr` with `minmax(0, …)` makes it exactly equal
   and stops long product names forcing the column wider.

   The section also gets the panel language the rest of the site uses — a
   white card, a real radius and layered elevation — rather than sitting flat
   on the page background.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-spp__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    padding: 34px;
    background: var(--ptm-white);
    border: 1px solid var(--ptm-border);
    border-radius: 26px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 18px 46px rgba(10, 26, 58, .09),
      0 3px 10px rgba(10, 26, 58, .05);
  }
}
@media (max-width: 991px) {
  .ptm-spp__layout {
    padding: 16px;
    background: var(--ptm-white);
    border: 1px solid var(--ptm-border);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(10, 26, 58, .07);
  }
}

/* --- Buy Now -------------------------------------------------------- */
.ptm-spp__actions { flex-wrap: wrap; gap: 10px; }
.ptm-btn-buynow {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ptm-navy-900);
  background: linear-gradient(180deg, #fff, var(--ptm-offwhite));
  border: 1.5px solid var(--ptm-primary);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ptm-btn-buynow svg { color: var(--ptm-primary); }
.ptm-btn-buynow:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--ptm-lightest), #fff);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .2);
}
.ptm-btn-buynow:active { transform: none; box-shadow: inset 0 2px 6px rgba(10, 26, 58, .14); }
.ptm-btn-buynow[disabled] { opacity: .7; }
/* The row holds four controls now: Add to Cart, Buy Now and two icon buttons.
   `.ptm-spp__actions` was a GRID with `grid-template-columns: 200px 48px 48px`
   — three tracks, built for the three buttons that used to live here. The new
   Buy Now button was auto-placed into the second track and rendered 48px wide
   with its label clipped. Flex properties did nothing because the container is
   not a flex container; the tracks had to be redefined.

   Two shapes: one row from 560px up, and on a narrow phone Add to Cart keeps
   the top row with the two icon buttons while Buy Now takes the full width
   underneath — both actions stay full-size and legible. */
.ptm-spp__info .ptm-spp__actions {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px 52px;
  align-items: stretch;
}
.ptm-spp__info .ptm-spp__actions #ptm-spp-atc,
.ptm-spp__info .ptm-spp__actions .ptm-btn-buynow { white-space: nowrap; min-width: 0; }
.ptm-spp__info .ptm-spp__actions #ptm-spp-wish,
.ptm-spp__info .ptm-spp__actions #ptm-spp-share { width: 52px; padding: 0; }

/* At 320px the label still clipped at 122px: two 52px icon buttons plus gaps
   leave too little. Below 380 the icons shrink to 44 and the type steps down. */
@media (max-width: 379px) {
  .ptm-spp__info .ptm-spp__actions { grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 8px; }
  .ptm-spp__info .ptm-spp__actions #ptm-spp-wish,
  .ptm-spp__info .ptm-spp__actions #ptm-spp-share { width: 44px; }
  .ptm-spp__info .ptm-spp__actions #ptm-spp-atc,
  .ptm-spp__info .ptm-spp__actions .ptm-btn-buynow { font-size: .84rem; padding-inline: 8px; }
  .ptm-spp__info .ptm-spp__actions #ptm-spp-atc svg { display: none; }
}
@media (max-width: 559px) {
  .ptm-spp__info .ptm-spp__actions { grid-template-columns: minmax(0, 1fr) 52px 52px; }
  .ptm-spp__info .ptm-spp__actions #ptm-spp-atc   { grid-column: 1; grid-row: 1; }
  .ptm-spp__info .ptm-spp__actions #ptm-spp-wish  { grid-column: 2; grid-row: 1; }
  .ptm-spp__info .ptm-spp__actions #ptm-spp-share { grid-column: 3; grid-row: 1; }
  .ptm-spp__info .ptm-spp__actions .ptm-btn-buynow { grid-column: 1 / -1; grid-row: 2; }
}

/* --- Price, quantity and the buy block get real depth ---------------- */
.ptm-spp__price-row {
  align-items: baseline;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--ptm-lightest), rgba(255, 255, 255, 0));
  border: 1px solid var(--ptm-lighter);
  border-radius: 16px;
}
.ptm-spp__qty {
  border-radius: 14px;
  box-shadow: inset 0 1px 3px rgba(10, 26, 58, .07), 0 1px 0 rgba(255, 255, 255, .8);
}
.ptm-spp__qty button { transition: background .18s var(--ease), color .18s var(--ease); }
.ptm-spp__qty button:hover { background: var(--ptm-lightest); color: var(--ptm-primary-deep); }
#ptm-spp-atc {
  box-shadow: 0 8px 22px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
#ptm-spp-atc:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37, 99, 235, .34); }
#ptm-spp-atc:active { transform: none; box-shadow: inset 0 2px 7px rgba(0, 0, 0, .22); }

/* --- Offers: a card list, not a wall of coupon text ------------------ */
.ptm-spp__offers { border-radius: 16px; overflow: hidden; }
.ptm-spp__offers > summary { padding: 13px 16px; }
.ptm-spp__offers .ptm-spp__offer {
  gap: 12px;
  padding: 11px 13px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(10, 26, 58, .04);
}
.ptm-spp__offers .ptm-spp__offer + .ptm-spp__offer { margin-top: 8px; }
.ptm-spp__offers code,
.ptm-spp__offers .ptm-spp__offer-code {
  align-self: flex-start;
  padding: 4px 9px;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border: 1px dashed var(--ptm-lighter);
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
}

/* ---------------------------------------------------------------------
   13.4  GALLERY THUMBNAIL OVERFLOW
   ---------------------------------------------------------------------
   Four thumbnails fit the rail; a fifth pushed it past the main image. The
   extras are rendered but hidden and a "+N" tile reveals them in place, so
   no photograph is dropped and none is fetched twice.
   ------------------------------------------------------------------ */
.ptm-gallery__more {
  display: grid;
  place-content: center;
  gap: 1px;
  aspect-ratio: 1;
  color: var(--ptm-primary-deep);
  background: linear-gradient(150deg, var(--ptm-lightest), #fff 76%);
  border: 1px dashed var(--ptm-lighter);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.ptm-gallery__more:hover { transform: translateY(-2px); border-color: var(--ptm-primary); background: var(--ptm-lightest); }
.ptm-gallery__more span { font-size: .95rem; font-weight: 800; line-height: 1; }
.ptm-gallery__more small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ptm-gallery__more.is-open span { font-size: .8rem; }
@media (prefers-reduced-motion: reduce) {
  .ptm-gallery__more, .ptm-btn-buynow, #ptm-spp-atc { transition: none; }
}

/* ---------------------------------------------------------------------
   13.5  PDP DESCRIPTION — ratings, reviews, and depth
   ---------------------------------------------------------------------
   The block had the breakdown and the photo strip but no social proof, and
   every card was the same flat pale-blue fill, so it read as a stack of
   boxes with no hierarchy. The reference the owner supplied opens its
   description with a rating figure beside a star breakdown and a row of
   review cards; that structure is followed here with PTM's real numbers.

   The cards also move from flat fills to the glass treatment used in that
   reference — white surface, hairline ring, layered shadow — so the section
   has foreground and background instead of one tone.
   ------------------------------------------------------------------ */
.ptm-pdrev {
  margin: 0 0 30px;
  padding: 22px;
  background: linear-gradient(150deg, var(--ptm-lightest), rgba(255, 255, 255, .5) 60%);
  border: 1px solid var(--ptm-lighter);
  border-radius: 20px;
}
.ptm-pdrev__head {
  display: grid;
  gap: 22px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ptm-border);
}
@media (min-width: 720px) { .ptm-pdrev__head { grid-template-columns: auto minmax(0, 1fr); gap: 34px; } }

.ptm-pdrev__score { text-align: center; }
.ptm-pdrev__score strong {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ptm-navy-900);
}
.ptm-pdrev__stars { display: block; margin: 7px 0 4px; color: #C9A14B; font-size: 1rem; letter-spacing: 2px; }
.ptm-pdrev__stars i { color: var(--ptm-lighter); font-style: normal; }
.ptm-pdrev__score small { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ptm-soft); }

.ptm-pdrev__bars { display: grid; gap: 6px; }
.ptm-pdrev__bar { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; align-items: center; gap: 10px; }
.ptm-pdrev__bar > span:first-child { font-size: .74rem; font-weight: 700; color: var(--ptm-navy-900); }
.ptm-pdrev__bar .t { height: 7px; overflow: hidden; background: rgba(255, 255, 255, .8); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(10, 26, 58, .08); }
.ptm-pdrev__bar .t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ptm-primary-deep), var(--ptm-light)); }
.ptm-pdrev__bar .n { font-size: .72rem; font-weight: 700; color: var(--ptm-soft); text-align: right; font-variant-numeric: tabular-nums; }

.ptm-pdrev__note { margin: 12px 0 14px; font-size: .78rem; color: var(--ptm-soft); }

/* Review cards swipe on every device — twelve of them never fit a column. */
.ptm-pdrev__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}
.ptm-pdrev__row::-webkit-scrollbar { display: none; }
.ptm-pdrev__card {
  flex: 0 0 min(268px, 78%);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 15px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(10, 26, 58, .06);
}
.ptm-pdrev__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ptm-pdrev__who { font-size: .84rem; font-weight: 800; color: var(--ptm-navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-pdrev__cstars { flex: none; color: #C9A14B; font-size: .76rem; letter-spacing: 1px; }
.ptm-pdrev__card h4 { font-size: .84rem; font-weight: 800; line-height: 1.3; color: var(--ptm-navy-900); }
.ptm-pdrev__card p { flex: 1; font-size: .8rem; line-height: 1.55; color: var(--ptm-mid); }
.ptm-pdrev__tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px;
  font-size: .68rem; font-weight: 700; color: var(--ptm-soft);
}
.ptm-pdrev__tag svg { color: var(--ptm-primary); }

/* --- depth for the existing description cards ------------------------ */
.ptm-spp__desc .ptm-spp__fact,
.ptm-spp__desc .ptm-spp__feature {
  background: linear-gradient(160deg, #fff, var(--ptm-offwhite));
  border: 1px solid var(--ptm-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px rgba(10, 26, 58, .06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ptm-spp__desc .ptm-spp__feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 30px rgba(10, 26, 58, .11);
}
@media (prefers-reduced-motion: reduce) {
  .ptm-spp__desc .ptm-spp__feature { transition: none; }
}

/* =====================================================================
   V14 — final round. MUST STAY LAST IN THIS FILE.
     14.1  gallery zoom lightbox (the control did nothing)
     14.2  category hero: 680px of decoration on a 390px phone
     14.3  product rails: two rows where the row was half empty
     14.4  PDP price treatment
     14.5  shop sidebar: the modern/3D panel
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   14.1  ZOOM LIGHTBOX
   The trigger was a `<span aria-hidden="true">` — a picture of a button.
   It is a real button now, the photograph itself is clickable, and this is
   the surface it opens into.
   ------------------------------------------------------------------ */
.ptm-gallery__zoom {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ptm-navy-900);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ptm-border);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(10, 26, 58, .16);
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.ptm-gallery__zoom:hover { transform: scale(1.08); background: #fff; color: var(--ptm-primary-deep); }
#ptm-spp-main img { cursor: zoom-in; }

.ptm-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;                       /* above the cart (125), below the video modal */
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(9, 18, 40, .92);
  backdrop-filter: blur(6px);
  overflow: auto;
  animation: ptm-zoom-in .2s var(--ease);
}
@keyframes ptm-zoom-in { from { opacity: 0; } to { opacity: 1; } }
.ptm-zoom[hidden] { display: none; }
.ptm-zoom img {
  max-width: min(1200px, 96vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.ptm-zoom__x {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  cursor: pointer;
}
.ptm-zoom__x:hover { background: rgba(255, 255, 255, .24); }
.ptm-zoom__hint {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  letter-spacing: .03em;
}
body.ptm-zoom-lock { overflow: hidden; }
@media (max-width: 560px) {
  .ptm-zoom { padding: 12px; }
  .ptm-zoom__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-zoom { animation: none; }
  .ptm-gallery__zoom { transition: none; }
}

/* ---------------------------------------------------------------------
   14.2  CATEGORY HERO — 680px of decoration before a single product
   ---------------------------------------------------------------------
   Measured at 390px: the hero photograph rendered 680px tall, 75% of the
   viewport, so a shopper tapping "Earrings" got a full screen of picture and
   had to scroll to reach any earrings. On desktop the copy sat in a tall
   half-empty column beside it.

   The image is capped and given a landscape ratio on a phone, and the copy
   column is vertically centred so the two halves balance.
   ------------------------------------------------------------------ */
.ptm-category-hero { align-items: center; }
.ptm-category-hero img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 18px;
}
@media (max-width: 767px) {
  .ptm-category-hero {
    gap: 16px;
    padding: 18px;
    text-align: left;
  }
  .ptm-category-hero img {
    max-height: 190px;
    aspect-ratio: 16 / 9;
    object-position: center;
  }
  .ptm-category-hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .ptm-category-hero p { font-size: .9rem; }
}
@media (min-width: 768px) {
  .ptm-category-hero img { max-height: 300px; }
}

/* ---------------------------------------------------------------------
   14.3  PRODUCT RAILS — two rows, so the section reads full
   ---------------------------------------------------------------------
   New Arrivals and "Complete the look" each showed a single row on desktop
   with the rest of the section empty underneath. The phone already had the
   2x2 shape; this brings the same idea to wider screens: two rows filled
   before a new column starts, so 10 products read as a block rather than a
   thin strip. Bestsellers keeps one row — the owner said that one is fine.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .ptm-newin .ptm-rail--car .ptm-rail__track,
  .ptm-look .ptm-rail--car .ptm-rail__track {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: minmax(0, calc(25% - 14px));
    row-gap: 18px;
  }
  /* Snap on the column so one flick moves a whole panel of four. */
  .ptm-newin .ptm-rail--car .ptm-rail__track > *:nth-child(even),
  .ptm-look .ptm-rail--car .ptm-rail__track > *:nth-child(even) { scroll-snap-align: none; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .ptm-newin .ptm-rail--car .ptm-rail__track,
  .ptm-look .ptm-rail--car .ptm-rail__track { grid-auto-columns: minmax(0, calc(33.333% - 12px)); }
}
/* The related grid on the PDP is a plain grid, not a rail — give it two rows
   of two rather than one long line. */
@media (min-width: 768px) {
  .ptm-look .ptm-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   14.4  PDP PRICE — the number should be the loudest thing in the column
   ---------------------------------------------------------------------
   It was navy on a pale blue well, the same colour as the title directly
   above it, so nothing separated them. The saving is what closes a sale on
   a 51%-off catalogue, so the discount is promoted from a footnote to a
   badge and the price gets its own weight.
   ------------------------------------------------------------------ */
.ptm-spp__price-row .ptm-spp__price,
.ptm-spp__price-row > strong:first-child {
  color: var(--ptm-primary-deep);
  font-weight: 800;
  letter-spacing: -.02em;
}
.ptm-spp__price-row s,
.ptm-spp__price-row del,
.ptm-spp__price-row .ptm-spp__mrp {
  color: var(--ptm-soft);
  text-decoration-color: var(--ptm-rose);
  text-decoration-thickness: 2px;
}
.ptm-spp__price-row .ptm-spp__off,
.ptm-spp__price-row .ptm-tag--off {
  padding: 4px 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--ptm-rose), #a02a55);
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------
   14.6  PDP REVIEWS — an auto-scrolling belt
   The row was a static scroller: the ratings never moved. Same construction
   as every other marquee here, so `padMarquee()` in ptm.js widens it on big
   screens and the seam stays invisible.
   ------------------------------------------------------------------ */
.ptm-pdrev__vp {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ptm-pdrev__vp:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: 3px; border-radius: 14px; }
.ptm-pdrev__row {
  display: flex;
  width: max-content;
  overflow: visible;
  animation: ptm-pdrev-loop 42s linear infinite;
  animation-play-state: var(--play, running);
}
.ptm-pdrev__grp { display: flex; gap: 12px; padding-right: 12px; }
@keyframes ptm-pdrev-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ptm-pdrev__vp:hover .ptm-pdrev__row,
.ptm-pdrev__vp:focus-within .ptm-pdrev__row { animation-play-state: paused; }

/* Phone: a swipe you control beats a belt you cannot pause. */
@media (max-width: 767px) {
  .ptm-pdrev__vp {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ptm-pdrev__vp::-webkit-scrollbar { display: none; }
  .ptm-pdrev__row { animation: none; }
  .ptm-pdrev__grp[aria-hidden="true"] { display: none; }
  .ptm-pdrev__card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-pdrev__row { animation: none !important; }
  .ptm-pdrev__grp[aria-hidden="true"] { display: none; }
}
/* The force-motion overrides for this band are removed, not disabled. They
   were `html.ptm-force-motion .ptm-pdrev__row { animation-name: … !important }`
   — (0,2,1) with !important, which BEATS a later `.ptm-pdrev__row
   { animation: none !important }` at (0,1,0), because between two !important
   declarations specificity still decides. The band does not animate any more,
   so the right fix is to delete the rules rather than out-shout them. */

/* ---------------------------------------------------------------------
   14.7  SHOP SIDEBAR — the modern panel
   ---------------------------------------------------------------------
   It was a flat white column with hairline dividers, plain browser radios
   and a lot of vertical air: functional, but it read as a raw form. The
   reference the owner supplied uses layered glass cards, so each filter
   group becomes its own surface inside an elevated panel, the options
   become full-width rows that light up, and the counts become pills.
   Desktop only — the phone keeps the bottom sheet from §10.7.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .ptm-filter-panel {
    padding: 0;
    background: none;
    border: 0;
  }
  .ptm-filter {
    padding: 14px;
    background: linear-gradient(180deg, #fff, var(--ptm-offwhite));
    border: 1px solid var(--ptm-border);
    border-radius: 22px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 16px 40px rgba(10, 26, 58, .09),
      0 3px 8px rgba(10, 26, 58, .04);
  }

  /* Each group is its own card, so the eye can find a section. */
  .ptm-filter__group {
    margin: 0 0 10px;
    padding: 4px 0 8px;
    background: var(--ptm-white);
    border: 1px solid var(--ptm-border);
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(10, 26, 58, .04);
  }
  .ptm-filter__group + .ptm-filter__group { padding-top: 4px; margin-top: 0; border-top: 1px solid var(--ptm-border); }
  .ptm-filter__group:last-of-type { margin-bottom: 12px; }

  .ptm-filter__head {
    padding: 11px 14px 8px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ptm-soft);
  }
  .ptm-filter__head:hover { background: transparent; }
  .ptm-filter__body-inner { padding: 0 10px 8px; gap: 2px; }

  /* Options: a full-width row that lifts, not a bare radio and a word. */
  .ptm-filter__opt {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: .87rem;
    transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .ptm-filter__opt:hover { background: var(--ptm-lightest); box-shadow: none; }
  .ptm-filter__opt:has(input:checked) {
    color: var(--ptm-primary-deep);
    font-weight: 700;
    background: var(--ptm-lightest);
    box-shadow: inset 0 0 0 1px var(--ptm-lighter);
  }
  .ptm-filter__opt .count {
    min-width: 24px;
    padding: 2px 7px;
    color: var(--ptm-soft);
    background: var(--ptm-offwhite);
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
  }
  .ptm-filter__opt:has(input:checked) .count {
    color: #fff;
    background: var(--ptm-primary);
  }
  /* A custom dot, so the control matches the rest of the panel. */
  .ptm-filter__opt input[type="radio"],
  .ptm-filter__opt input[type="checkbox"] {
    appearance: none;
    width: 17px; height: 17px;
    flex: none;
    border: 1.5px solid var(--ptm-lighter);
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(10, 26, 58, .06);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
  }
  .ptm-filter__opt input[type="checkbox"] { border-radius: 5px; }
  .ptm-filter__opt input:checked {
    border-color: var(--ptm-primary);
    box-shadow: inset 0 0 0 4px var(--ptm-primary);
  }
  .ptm-filter__opt input:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: 2px; }

  .ptm-filter .ptm-input,
  .ptm-filter__price-row input {
    background: var(--ptm-white);
    border: 1px solid var(--ptm-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(10, 26, 58, .05);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  }
  .ptm-filter .ptm-input:focus,
  .ptm-filter__price-row input:focus {
    border-color: var(--ptm-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
    outline: none;
  }

  .ptm-filter__actions {
    padding: 2px 4px 4px;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .ptm-filter__actions .ptm-btn {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
  }
  .ptm-filter__actions .ptm-btn:hover { box-shadow: 0 10px 22px rgba(37, 99, 235, .3); }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-filter__opt, .ptm-filter .ptm-input { transition: none; }
}

/* ---------------------------------------------------------------------
   14.8  SEASONAL CAMPAIGN GRID
   One editorial hero tile with two stacked support tiles beside it, then a
   price-intent strip. Stacks to a single column on a phone. Renders only
   when the admin has switched the campaign on AND each tile has both
   artwork and a destination, so it cannot ship as empty boxes.
   ------------------------------------------------------------------ */
.ptm-camp { padding: clamp(44px, 6vw, 76px) 0; background: var(--ptm-offwhite); }
.ptm-camp__grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 900px) {
  .ptm-camp__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); grid-auto-rows: 1fr; }
  .ptm-camp__tile--hero { grid-row: span 2; }
}
.ptm-camp__tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 190px;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(10, 26, 58, .12);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ptm-camp__tile:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(10, 26, 58, .18); }
.ptm-camp__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.ptm-camp__tile:hover img { transform: scale(1.04); }
.ptm-camp__tile--hero { min-height: 340px; }
.ptm-camp__copy {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(180deg, rgba(9, 18, 40, 0), rgba(9, 18, 40, .82));
}
.ptm-camp__copy strong { font-family: var(--font-display, inherit); font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1.2; }
.ptm-camp__copy small { font-size: .84rem; opacity: .85; line-height: 1.5; }
.ptm-camp__copy em {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
  font-style: normal; font-size: .8rem; font-weight: 800; letter-spacing: .04em;
}
.ptm-camp__tile:hover .ptm-camp__copy em svg { transform: translateX(3px); }
.ptm-camp__copy em svg { transition: transform .2s var(--ease); }

.ptm-camp__bands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--ptm-white);
  border: 1px solid var(--ptm-border);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(10, 26, 58, .06);
}
.ptm-camp__bands-lbl {
  margin-right: 4px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ptm-soft);
}
.ptm-camp__bands a {
  padding: 9px 16px;
  color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  border: 1px solid var(--ptm-lighter);
  border-radius: var(--r-pill);
  font-size: .84rem; font-weight: 700; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.ptm-camp__bands a:hover { transform: translateY(-2px); color: #fff; background: var(--ptm-primary); border-color: var(--ptm-primary); }
@media (max-width: 560px) {
  .ptm-camp__bands { justify-content: center; }
  .ptm-camp__bands-lbl { width: 100%; text-align: center; }
  .ptm-camp__bands a { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-camp__tile, .ptm-camp__tile img, .ptm-camp__bands a { transition: none; }
}

/* =====================================================================
   V15 — reported three times. MUST STAY LAST IN THIS FILE.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   15.1  GALLERY SWIPE
   The main image was a single <img> with its src swapped by JS, inside a
   container with `overflow-x: hidden`. A finger drag had nothing to move,
   which is why only the arrows worked. Every photograph is now a slide in a
   scroll-snapping track: native momentum swipe on a phone, trackpad on
   desktop, arrows and thumbnails scroll the same track.
   ------------------------------------------------------------------ */
.ptm-gallery__main { overflow: hidden; }
.ptm-gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pinch-zoom;
}
.ptm-gallery__track::-webkit-scrollbar { display: none; }
.ptm-gallery__track:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: -3px; }
.ptm-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
}
.ptm-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------------------------------------------------------------------
   15.2  THE BLUE BAR UNDER THE THUMBNAILS
   That was the thumbnail rail's own scrollbar. It is a rail you flick, not
   a scroll region you read, so the bar is noise. Hidden on every engine;
   the rail still scrolls.
   ------------------------------------------------------------------ */
.ptm-gallery__thumbs {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.ptm-gallery__thumbs::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------------------------------------------------------------------
   15.3  THE BLANK GAPS IN THE PDP REVIEW BELT
   The cards were `flex: 0 0 min(268px, 78%)`. That percentage resolves
   against the flex CONTAINER, which is itself sized by its content — a
   circular dependency the browser settles by inflating the group. Measured:
   each group came out **4868px wide** for six 268px cards, so most of the
   belt was empty space. A fixed basis on desktop, viewport units on phone.
   ------------------------------------------------------------------ */
.ptm-pdrev__card { flex: 0 0 268px; width: 268px; }
@media (max-width: 767px) {
  .ptm-pdrev__card { flex: 0 0 min(268px, 78vw); width: min(268px, 78vw); }
}

/* ---------------------------------------------------------------------
   15.4  PDP PURCHASE COLUMN — built to the supplied reference
   ---------------------------------------------------------------------
   Structure and colour direction both come from the BREXX file: badge row,
   title, subtitle with a rating pill, a sale tag over a green price, three
   benefit cards with icon tiles, then the trust line.

   The green is deliberate and confined. Sapphire stays the brand; this one
   accent exists to make the saving the loudest thing in the column, which is
   what the reference uses it for and what the owner asked for by name.
   ------------------------------------------------------------------ */
.ptm-spp__info { --ptm-sale: #10a86b; --ptm-sale-deep: #0b8d59; }

.ptm-spp__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ptm-spp__badge {
  padding: 7px 14px;
  color: #fff;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}
.ptm-spp__badge--drop { background: linear-gradient(135deg, #ff6b6b, #e74c3c); }
.ptm-spp__badge--off  { background: linear-gradient(135deg, var(--ptm-sale), var(--ptm-sale-deep)); }

.ptm-spp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 14px; }
.ptm-spp__meta .ptm-spp__cat { margin: 0; }
.ptm-spp__ratepill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(201, 161, 75, .14), rgba(201, 161, 75, .05));
  border: 1px solid rgba(201, 161, 75, .34);
  border-radius: var(--r-pill);
}
.ptm-spp__ratepill .s { color: #C9A14B; font-size: .82rem; letter-spacing: 1px; }
.ptm-spp__ratepill b { font-size: .86rem; font-weight: 800; color: #8A6A22; }
.ptm-spp__ratepill i { font-size: .76rem; font-style: normal; color: var(--ptm-soft); }

.ptm-spp__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
  padding: 0;
  background: none;
  border: 0;
}
.ptm-spp__saletag {
  align-self: center;
  padding: 5px 12px;
  color: var(--ptm-sale-deep);
  background: rgba(16, 168, 107, .12);
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ptm-spp__info .ptm-spp__price {
  color: var(--ptm-sale-deep);
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}
.ptm-spp__info .ptm-spp__strike {
  color: var(--ptm-soft);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: var(--ptm-rose);
  text-decoration-thickness: 2px;
}
.ptm-spp__tax { margin-bottom: 18px; }

/* --- the three benefit cards --------------------------------------- */
.ptm-spp__feat { list-style: none; display: grid; gap: 10px; margin: 0 0 14px; padding: 0; }
.ptm-spp__feat-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  /* `justify-items: center` is inherited from the old strip and grid items
     honour it before any text-align — the same trap that centred the trust
     cards in 12.4. This is the declaration that actually left-aligns them. */
  justify-items: start;
  text-align: left;
  gap: 14px;
  padding: 13px 15px;
  background: linear-gradient(160deg, #fff, var(--ptm-offwhite));
  border: 1px solid var(--ptm-border);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 14px rgba(10, 26, 58, .05);
  transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ptm-spp__feat-item:hover {
  transform: translateX(6px);
  border-color: var(--ptm-lighter);
  box-shadow: 0 10px 26px rgba(10, 26, 58, .1);
}
.ptm-spp__feat-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--ptm-primary-deep);
  background: linear-gradient(135deg, var(--ptm-lightest), #fff 76%);
  box-shadow: inset 0 0 0 1px var(--ptm-lighter), 0 4px 10px rgba(37, 99, 235, .14);
  transition: transform .4s var(--ease);
}
.ptm-spp__feat-item:hover .ptm-spp__feat-ico { transform: scale(1.06); }
.ptm-spp__feat-item > span:last-child { display: grid; justify-items: start; gap: 2px; min-width: 0; text-align: left; }
.ptm-spp__feat strong { font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--ptm-navy-900); }
.ptm-spp__feat small { font-size: .79rem; line-height: 1.4; color: var(--ptm-mid); }

/* Each card gets its own accent, as in the reference. */
.ptm-spp__feat-item--hallmark .ptm-spp__feat-ico {
  color: #8A6A22;
  background: linear-gradient(135deg, rgba(201, 161, 75, .2), #fff 76%);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 75, .42), 0 4px 10px rgba(201, 161, 75, .18);
}
.ptm-spp__feat-item--gift .ptm-spp__feat-ico {
  color: var(--ptm-sale-deep);
  background: linear-gradient(135deg, rgba(16, 168, 107, .16), #fff 76%);
  box-shadow: inset 0 0 0 1px rgba(16, 168, 107, .34), 0 4px 10px rgba(16, 168, 107, .16);
}

.ptm-spp__trustline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 11px;
  color: var(--ptm-mid);
  background: linear-gradient(135deg, rgba(16, 168, 107, .06), rgba(16, 168, 107, .02));
  border-top: 1px solid rgba(16, 168, 107, .22);
  border-bottom: 1px solid rgba(16, 168, 107, .22);
  font-size: .82rem;
  font-weight: 600;
}
.ptm-spp__trustline svg { color: var(--ptm-sale); flex: none; }

@media (max-width: 560px) {
  .ptm-spp__feat-item { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 11px 13px; }
  .ptm-spp__feat-ico { width: 42px; height: 42px; border-radius: 12px; }
  .ptm-spp__feat strong { font-size: .88rem; }
  .ptm-spp__feat small { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-spp__feat-item, .ptm-spp__feat-ico { transition: none; }
}

/* ---------------------------------------------------------------------
   15.5  HERO MEDALLION — square on a phone
   The hero photograph is a circle, which reads well at desktop size but
   crops hard and wastes the width of a 390px screen. Rounded square there.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .ptm-hero__frame,
  .ptm-hero__orbit,
  .ptm-heroslides,
  .ptm-heroslides img { border-radius: 26px !important; }
  .ptm-hero__frame { aspect-ratio: 1 / 1; }
}

/* ---------------------------------------------------------------------
   15.6  SHOP SIDEBAR — quick filters, price chips, stone swatches
   ---------------------------------------------------------------------
   The reference sidebar the owner supplied leads with QUICK FILTERS, gives
   the price band preset chips under the numeric inputs, and offers colour
   swatches. This catalogue is 925 silver throughout, so the swatch row shows
   the STONE instead — the one attribute that actually varies across the 39
   products. Every facet is COUNT(*)-gated, so no chip can lead to nothing.
   ------------------------------------------------------------------ */
.ptm-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 10px;
}
.ptm-filter__chip {
  padding: 6px 11px;
  color: var(--ptm-mid);
  background: var(--ptm-offwhite);
  border: 1px solid var(--ptm-border);
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.ptm-filter__chip:hover { color: var(--ptm-primary-deep); background: var(--ptm-lightest); border-color: var(--ptm-lighter); }
.ptm-filter__chip.is-on { color: #fff; background: var(--ptm-primary); border-color: var(--ptm-primary); }

.ptm-filter__bounds {
  display: flex;
  justify-content: space-between;
  padding: 0 12px 10px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ptm-soft);
  font-variant-numeric: tabular-nums;
}

.ptm-filter__swatches { display: grid; gap: 4px; }
.ptm-filter__swatch {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .86rem;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.ptm-filter__swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ptm-filter__swatch i {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(10, 26, 58, .16);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .9), 0 1px 3px rgba(10, 26, 58, .1);
}
.ptm-filter__swatch b { font-size: .68rem; font-weight: 700; color: var(--ptm-soft); }
.ptm-filter__swatch:hover { background: var(--ptm-lightest); }
.ptm-filter__swatch.is-on {
  color: var(--ptm-primary-deep);
  font-weight: 700;
  background: var(--ptm-lightest);
  box-shadow: inset 0 0 0 1px var(--ptm-lighter);
}
.ptm-filter__swatch.is-on i { box-shadow: 0 0 0 2px var(--ptm-primary); }
.ptm-filter__swatch.is-on b { color: var(--ptm-primary-deep); }

.ptm-filter__opt--clear span:first-of-type { color: var(--ptm-soft); font-style: italic; }

/* The desktop panel was taller than the viewport, so the whole page had to be
   scrolled to reach Apply. It now scrolls inside itself and sticks. */
@media (min-width: 992px) {
  .ptm-filter-panel { position: sticky; top: 148px; }
  .ptm-filter {
    max-height: calc(100dvh - 176px);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
  .ptm-filter::-webkit-scrollbar { width: 6px; }
  .ptm-filter::-webkit-scrollbar-thumb { background: var(--ptm-lighter); border-radius: 4px; }
  /* The Apply button was `position: sticky; bottom: 0` inside the scrolling
     panel, which floats it over whichever group happens to be under it - it
     was sitting on top of the Category rows. The panel itself is sticky and
     scrolls internally, so the button simply sits at the end. */
  .ptm-filter__actions { position: static; padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-filter__chip, .ptm-filter__swatch { transition: none; }
}

/* =====================================================================
   V16 — review band width + manual scroll. MUST STAY LAST.
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   16.1  The PDP review band ran the full width of the description panel,
   so on a wide desktop it stretched edge to edge and read as a banner
   rather than a block of reviews. Capped to a comfortable measure and
   centred, matching the rest of the description column.

   The belt also no longer drives itself. The owner's call after seeing it
   live: a customer scrolls reviews at their own pace, and a row that moves
   while you are trying to read it fights you. It stays a snap scroller with
   momentum on every device — just no timer.
   ------------------------------------------------------------------ */
.ptm-pdrev { max-width: 940px; margin-inline: auto; }

.ptm-pdrev__vp {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Fade the edges so it reads as "there is more this way". */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ptm-pdrev__vp::-webkit-scrollbar { display: none; }
.ptm-pdrev__vp.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* No animation at any breakpoint, and the mirrored half is dropped: it only
   existed to make a loop seamless, and there is no loop any more. */
.ptm-pdrev__row { animation: none !important; width: max-content; }
.ptm-pdrev__grp[aria-hidden="true"] { display: none !important; }
.ptm-pdrev__card { scroll-snap-align: start; }

/* ---------------------------------------------------------------------
   16.2  THE DESCRIPTION BLOCK WAS UNBOUNDED
   Measured at 1920: `.ptm-spp__desc` rendered the full 1920px. Long lines of
   body copy across a 1900px screen are unreadable and the section looked like
   a banner. Capped to the same measure as the review band inside it, and
   centred, so the whole description column reads as one object.
   ------------------------------------------------------------------ */
.ptm-spp__desc {
  max-width: 1180px;
  margin-inline: auto;
}
.ptm-spp__desc > *:not(.ptm-pdrev) { max-width: 100%; }
/* Body copy gets a reading measure of its own; the grids keep the full width. */
.ptm-spp__desc p:not([class]),
.ptm-spp__desc .ptm-spp__desc-copy p { max-width: 78ch; }
@media (min-width: 1600px) {
  .ptm-spp__layout { max-width: 1400px; margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   16.3  ACCOUNT MENU
   The account icon was a bare link to account.php. It is a menu now, so
   orders, wishlist, tracking and — for staff — the admin dashboard are one
   click from any page. Same elevated-panel language as the search scope
   menu, and it lives inside `.ptm-header` which sits above the category
   rail (see 13.2's z-index note), so it is never painted over.
   ------------------------------------------------------------------ */
.ptm-acct { position: relative; }
.ptm-acct__btn { cursor: pointer; }
.ptm-acct__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  min-width: 244px;
  padding: 7px;
  background: var(--ptm-white);
  border: 1px solid rgba(15, 36, 86, .12);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 18px 44px rgba(10, 26, 58, .2),
    0 4px 10px rgba(10, 26, 58, .1);
  transform-origin: top right;
  transform: translateY(-6px) scale(.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s var(--ease), transform .22s var(--ease), visibility .22s;
}
.ptm-acct.is-open .ptm-acct__menu { opacity: 1; visibility: visible; transform: none; }
.ptm-acct__menu::before {
  content: "";
  position: absolute;
  top: -6px; right: 24px;
  width: 11px; height: 11px;
  background: var(--ptm-white);
  border-left: 1px solid rgba(15, 36, 86, .12);
  border-top: 1px solid rgba(15, 36, 86, .12);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}
.ptm-acct__who { padding: 9px 11px 10px; border-bottom: 1px solid var(--ptm-border); margin-bottom: 5px; }
.ptm-acct__who strong { display: block; font-size: .88rem; color: var(--ptm-navy-900); }
.ptm-acct__who small { display: block; font-size: .74rem; color: var(--ptm-soft); overflow: hidden; text-overflow: ellipsis; }
.ptm-acct__menu a,
.ptm-acct__out button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  color: var(--ptm-text);
  font-size: .86rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ptm-acct__menu a svg,
.ptm-acct__out button svg { flex: none; color: var(--ptm-primary); opacity: .85; }
.ptm-acct__menu a:hover,
.ptm-acct__out button:hover { background: var(--ptm-lightest); color: var(--ptm-primary-deep); }
.ptm-acct__sep { height: 1px; margin: 6px 9px; background: var(--ptm-border); }
.ptm-acct__admin { color: var(--ptm-navy-900) !important; font-weight: 800 !important; }
.ptm-acct__admin svg { color: var(--ptm-navy-900) !important; opacity: 1 !important; }
.ptm-acct__tag {
  margin-left: auto;
  padding: 2px 8px;
  color: #fff;
  background: var(--ptm-navy-900);
  border-radius: var(--r-pill);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ptm-acct__staff { color: var(--ptm-soft) !important; font-weight: 600 !important; font-size: .8rem !important; }
.ptm-acct__staff svg { color: var(--ptm-soft) !important; }
.ptm-acct__out { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ptm-acct__menu { transition: none; } }

/* =====================================================================
   V17 — the product story block. MUST STAY LAST IN THIS FILE.

   A one-for-one mapping of the owner's BREXX reference
   (Downloads/BREXX-3213-images-stable.html) onto PTM's tokens: sapphire
   where that file used slate, gold reserved for stars, the orange kept
   because it is doing the reference's job of making one figure the
   loudest thing in the card.

   Two motion rules, both taken from the reference itself:
     .ptm-brx__belt-track   NO animation  ("swiped by hand")
     .ptm-brx__revs-track   50s linear    (its `scrollReviews`)
   The reduced-motion block at the foot is what makes the second one run
   on the owner's own machine — Windows "Show animations = Off" reports
   `prefers-reduced-motion: reduce`, which has silently frozen three
   previous marquees and produced three "it doesn't scroll" reports.
   ===================================================================== */

.ptm-brx {
  position: relative;
  margin: 46px 0 0;
  padding: 40px 20px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fb 0%, #e9edf4 100%);
  box-shadow: 0 10px 40px rgba(15, 32, 66, .08);
}
.ptm-brx__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .05;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(37, 99, 235, .55) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(125, 160, 239, .55) 0%, transparent 50%);
  animation: ptm-brx-float 20s ease-in-out infinite;
}
@keyframes ptm-brx-float {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.1) rotate(5deg); }
}
.ptm-brx__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
}

/* The glass card the reference uses for every panel. */
.ptm-brx__card {
  position: relative;
  margin: 0 0 40px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(15, 32, 66, .06), inset 0 0 0 1px rgba(255, 255, 255, .6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ptm-brx__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 55px rgba(15, 32, 66, .1);
}

/* ---------- head: product name + tagline ---------- */
.ptm-brx__head { margin-bottom: 40px; text-align: center; }
.ptm-brx__head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0 0 15px;
  font-size: clamp(1.6rem, 3.2vw, 2.55rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: var(--ptm-navy-900);
}
.ptm-brx__mark { display: inline-flex; color: var(--ptm-primary); }
/* ptm_svg_icon() writes style="display:inline-block" inline, which beats every
   selector without !important. Trap #2 in the plan doc. */
.ptm-brx__mark svg { display: block !important; }
.ptm-brx__head p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ptm-mid);
}

/* ---------- the box: figure + rating rows, then the photograph belt ---------- */
.ptm-brx__social { padding: 0; overflow: hidden; }
.ptm-brx__top {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  padding: 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
}
.ptm-brx__stat { flex: 1 1 280px; min-width: min(280px, 100%); }
.ptm-brx__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 12px;
  border: 1px solid #c8e6c9;
  border-radius: 50px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: .78rem;
  font-weight: 700;
}
.ptm-brx__pill svg { display: block !important; color: #2e7d32; }
.ptm-brx__stat h3 {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--ptm-navy-900);
}
.ptm-brx__hi  { color: #e67e22; }
.ptm-brx__sub { color: var(--ptm-navy-900); }

.ptm-brx__grid {
  flex: 1 1 280px;
  min-width: min(280px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ptm-brx__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(15, 32, 66, .07);
}
.ptm-brx__row:last-child { border-bottom: none; }
.ptm-brx__rl { font-size: .92rem; font-weight: 600; color: var(--ptm-mid); }
.ptm-brx__rv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ptm-navy-900);
}
/* Grey glyphs with a gold copy clipped over them — 4.8 renders as 96% of the
   width rather than rounding up to a fifth full star. */
.ptm-brx__st {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: .78rem;
  letter-spacing: 1.5px;
  line-height: 1;
  color: #d6dbe5;
}
.ptm-brx__st i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  overflow: hidden;
  font-style: normal;
  color: #C9A14B;
}

/* The belt. Printed once, no animation — the reference is explicit that this
   track is swiped by hand, and the owner asked for the same. */
.ptm-brx__belt {
  width: 100%;
  padding: 20px 0 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .8) 100%);
}
.ptm-brx__belt::-webkit-scrollbar { display: none; }
.ptm-brx__belt-track {
  display: flex;
  gap: 15px;
  width: max-content;
  padding: 10px 30px;
  animation: none;
}
.ptm-brx__shot {
  flex: 0 0 auto;
  height: 350px;
  width: auto;
  max-width: none;
  border: 1px solid var(--ptm-border);
  border-radius: 12px;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(15, 32, 66, .15);
  scroll-snap-align: start;
  transition: transform .3s var(--ease);
}
.ptm-brx__shot:hover { transform: scale(1.03); }

/* ---------- reviews: no card, attached to the canvas, cut off at both edges ---------- */
.ptm-brx__revs { width: 100%; padding: 10px 0 40px; }
.ptm-brx__revs-vp {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ptm-brx__revs-vp::-webkit-scrollbar { display: none; }
/* gap lives on the group, not the track, so the two halves are exactly equal
   and the -50% travel has no seam */
.ptm-brx__revs-track {
  display: flex;
  gap: 0;
  width: max-content;
  padding: 10px 0;
  animation: ptm-brx-revs 50s linear infinite;
  will-change: transform;
}
.ptm-brx__revs-vp:hover .ptm-brx__revs-track,
.ptm-brx__revs-vp:focus-within .ptm-brx__revs-track { animation-play-state: paused; }
@keyframes ptm-brx-revs {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ptm-brx__revs-grp { display: flex; gap: 20px; padding-right: 20px; }
.ptm-brx__rev {
  flex: 0 0 320px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 25px;
  border: 1px solid rgba(15, 32, 66, .05);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(15, 32, 66, .04);
  text-align: left;
}
.ptm-brx__rev-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ptm-brx__rev-who { font-size: 1rem; font-weight: 700; color: var(--ptm-navy-900); }
.ptm-brx__rev-st  { font-size: .8rem; letter-spacing: 1px; color: #C9A14B; }
.ptm-brx__rev-txt {
  margin: 0;
  font-size: .89rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ptm-mid);
}
.ptm-brx__rev-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f0fff4;
  color: #27ae60;
  font-size: .69rem;
  font-weight: 700;
}
.ptm-brx__rev-tag svg { display: block !important; }

/* ---------- three icon cards ---------- */
.ptm-brx__feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}
.ptm-brx__feat { margin: 0; padding: 30px; text-align: center; }
/* The old block reused .ptm-spp__feat-ico, which V15 had redefined as a 48px
   filled tile for the purchase column; the later rule won and squashed these
   icons against the card edge. Own namespace, own breathing room. */
.ptm-brx__feat-ico {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0 auto 15px;
  color: var(--ptm-primary-deep);
}
.ptm-brx__feat-ico svg { display: block !important; }
.ptm-brx__feat h3 {
  margin: 0 0 10px;
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--ptm-navy-900);
}
.ptm-brx__feat p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ptm-mid); }

/* ---------- the checklist box ---------- */
.ptm-brx__excel { display: flex; flex-direction: column; align-items: center; margin-bottom: 0; }
.ptm-brx__excel h3 {
  margin: 0 0 30px;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  text-align: center;
  color: var(--ptm-navy-900);
}
.ptm-brx__excel-in {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 800px;
}
.ptm-brx__excel-ico { flex: 0 0 auto; color: var(--ptm-navy-900); opacity: .1; }
.ptm-brx__excel-ico svg { display: block !important; }
.ptm-brx__excel-body { flex: 1 1 auto; min-width: 0; }
.ptm-brx__prose p { margin: 0 0 12px; font-size: .97rem; line-height: 1.7; color: var(--ptm-mid); }
.ptm-brx__excel-list { list-style: none; margin: 0; padding: 0; }
.ptm-brx__excel-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 10px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ptm-mid);
  border-bottom: 1px solid rgba(15, 32, 66, .05);
}
.ptm-brx__excel-list li:last-child { border-bottom: none; }
.ptm-brx__tick { flex: 0 0 auto; display: inline-flex; margin-top: 3px; color: #27ae60; }
.ptm-brx__tick svg { display: block !important; }

/* ---------- offers, now in the gallery column ---------- */
/* (0,2,0) so it beats the bare .ptm-spp__offers rules written for the info
   column; grid-column spans the 90px thumbnail rail as well as the main image. */
.ptm-gallery .ptm-spp__offers { grid-column: 1 / -1; margin-top: 16px; }
@media (min-width: 768px) {
  .ptm-gallery .ptm-spp__offers { margin-top: 18px; }
}

/* ---------- "You may also like" ----------
   It used to be a loop, and `.ptm-look__viewport` was `overflow: hidden`
   because a marquee has nothing to scroll. The loop is gone at the owner's
   request, so the rail now has to be scrollable or it would be frozen with
   half its cards unreachable. */
.ptm-look__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ptm-look__viewport::-webkit-scrollbar { display: none; }
.ptm-look__track { animation: none !important; }
.ptm-look__group .ptm-card { scroll-snap-align: start; }
.ptm-look__viewport.is-dragging,
.ptm-brx__belt.is-dragging,
.ptm-brx__revs-vp.is-dragging { cursor: grabbing; }

/* ---------- phone ---------- */
/* The reference hides its feature cards and its tagline below 768px. The owner
   asked for the same thing on the phone as on the desktop, so both stay and
   simply stack. */
@media (max-width: 768px) {
  .ptm-brx { margin-top: 34px; padding: 26px 14px; border-radius: 18px; }
  .ptm-brx__card { margin-bottom: 26px; padding: 24px 18px; border-radius: 18px; }
  .ptm-brx__card:hover { transform: none; }
  .ptm-brx__social { padding: 0; }
  .ptm-brx__head { margin-bottom: 26px; }
  /* The reference's title is two short words and wraps happily. Ours are long
     product names, and with flex-wrap on they pushed each gem mark onto a line
     of its own — a lonely diamond above and below the title. Hold the row
     together and let the NAME wrap inside its own span instead. */
  .ptm-brx__head h2 { flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
  .ptm-brx__head h2 > span:not(.ptm-brx__mark) { min-width: 0; }
  .ptm-brx__mark { flex: 0 0 auto; }
  .ptm-brx__mark svg { width: 16px; height: 16px; }
  .ptm-brx__head p { font-size: .92rem; }
  .ptm-brx__top { gap: 16px; padding: 20px; text-align: center; }
  .ptm-brx__stat, .ptm-brx__grid { flex: 1 1 100%; min-width: 100%; }
  .ptm-brx__pill { margin-inline: auto; }
  .ptm-brx__belt { padding: 16px 0 22px; }
  .ptm-brx__belt-track { gap: 12px; padding: 8px 14px; }
  .ptm-brx__shot { height: 260px; }
  .ptm-brx__revs { padding: 4px 0 26px; }
  .ptm-brx__revs-grp { gap: 14px; padding-right: 14px; }
  .ptm-brx__rev { flex: 0 0 min(78vw, 320px); width: min(78vw, 320px); padding: 20px; }
  .ptm-brx__feats { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; }
  .ptm-brx__feat { padding: 24px 18px; }
  .ptm-brx__excel h3 { margin-bottom: 18px; }
  .ptm-brx__excel-in { flex-direction: column; gap: 16px; }
  .ptm-brx__excel-ico { display: none; }
  .ptm-brx__excel-list li { font-size: .94rem; gap: 12px; }
}

/* ---------- reduced motion ----------
   Read the note at the top of this section before touching any of it. The
   owner's Windows reports `reduce`; `ptm-force-motion` (Settings → force_motion,
   default 1) is how this site overrides that, and every marquee has to opt in
   here explicitly or it freezes for him alone. */
@media (prefers-reduced-motion: reduce) {
  html:not(.ptm-force-motion) .ptm-brx__glow,
  html:not(.ptm-force-motion) .ptm-brx__revs-track { animation: none !important; }
  html:not(.ptm-force-motion) .ptm-brx__revs-grp[aria-hidden="true"] { display: none !important; }
  html:not(.ptm-force-motion) .ptm-brx__card { transition: none !important; }

  html.ptm-force-motion .ptm-brx__revs-track {
    animation: ptm-brx-revs 50s linear infinite !important;
  }
  html.ptm-force-motion .ptm-brx__revs-grp[aria-hidden="true"] { display: flex !important; }
  html.ptm-force-motion .ptm-brx__glow {
    animation: ptm-brx-float 20s ease-in-out infinite !important;
  }
}

/* =====================================================================
   V18 — owner review round. MUST STAY LAST IN THIS FILE.

   Five fixes, each measured before it was written rather than guessed:
     1. the sticky gallery was clipped by the pinned header (by 51px)
     2. "Offers for you" moved out of the gallery column
     3. the related rail could rest on a half-cut card
     4. the sticky purchase bar gains Buy Now, and stops wrapping to 92px
     5. the short description read as an afterthought
   ===================================================================== */

/* ---------- 1. the sticky gallery was hiding under the header ----------
   Measured on the live page: the pinned stack (.ptm-stickytop) is 175px
   expanded and ~118px condensed, but .ptm-gallery stuck at a hardcoded
   top: 124px — so 51px of the gallery, its first thumbnail and the top of
   the badge row, sat behind the category rail. ptm.js now publishes the
   stack's real height as --ptm-topbar-h on every paint; the fallback is the
   measured expanded height, so a JS failure clips nothing. */
@media (min-width: 992px) {
  .ptm-gallery {
    top: calc(var(--ptm-topbar-h, 175px) + 18px);
    /* A sticky column taller than the viewport can never scroll to its own
       bottom. Let it scroll internally instead of trapping the last thumbnail. */
    max-height: calc(100vh - var(--ptm-topbar-h, 175px) - 36px);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .ptm-gallery::-webkit-scrollbar { display: none; }
}

/* ---------- 2. offers, back in the purchase column ----------
   Supersedes the V17 rule that placed this in the gallery column. */
.ptm-gallery .ptm-spp__offers { grid-column: auto; margin-top: 0; }
.ptm-spp__info .ptm-spp__offers { margin: 16px 0 0; }

/* ---------- 3. the related rail must not rest on a half card ----------
   The owner's complaint was that it settles showing more on one side than the
   other. Proximity snapping lets a scroll stop anywhere; mandatory snapping
   plus a scroll-padding equal to the card gap means it always comes to rest on
   a card edge, with the same margin at both ends. */
.ptm-look__viewport {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
}
.ptm-look__group { padding-right: 0; }
.ptm-look__group .ptm-card { scroll-snap-align: start; scroll-snap-stop: always; }

/* ---------- 4. the sticky purchase bar ---------- */
.ptm-atcbar__btns { flex: none; display: flex; align-items: center; gap: 10px; }
.ptm-atcbar__btns .ptm-btn { flex: none; padding-inline: 22px; }

/* The price line wrapped. Measured at 390px: "₹2,499  ₹6,735  63% off" did not
   fit beside the 44px thumbnail and the button, so the discount chip dropped to
   a second line and the bar grew from 68px to 92px — which is the detached
   strip and the stray "off" the owner circled. Hold the line together, and
   below 480px drop the struck-through MRP: the percentage already carries the
   saving, and the bar is a reminder, not the price block. */
.ptm-atcbar__meta span { display: flex; align-items: center; white-space: nowrap; }
.ptm-atcbar__meta s { flex: none; }
.ptm-atcbar__off { flex: none; white-space: nowrap; }

@media (max-width: 767px) {
  /* No room for two CTAs on a phone. The owner said as much: "buy now button
     यहां ना दिखे तो ज्यादा सही रहेगा" — desktop keeps both. */
  .ptm-atcbar .ptm-atcbar__buy { display: none; }
  .ptm-atcbar__btns { gap: 0; }
}
@media (max-width: 479px) {
  .ptm-atcbar__meta s { display: none; }
}

/* ---------- 5. the short description ----------
   It was set at the same weight and colour as fine print, directly under a row
   of trust pills, so the one line that actually describes the piece read as an
   afterthought. Given its own measure, a brand rule and real contrast. */
.ptm-spp__sub {
  margin: 14px 0 2px;
  padding-left: 14px;
  border-left: 3px solid var(--ptm-lighter);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ptm-navy-800, var(--ptm-navy-900));
  font-weight: 500;
  max-width: 62ch;
}
@media (max-width: 767px) {
  .ptm-spp__sub { font-size: .95rem; padding-left: 12px; }
}

/* =====================================================================
   V19 — variant picker. MUST STAY LAST IN THIS FILE.

   One listing, many buyable combinations. The blue sapphire ring has 224
   (28 ring sizes x 8 stone weights), so the chips have to survive being
   printed 28 across on a phone: they wrap, they are 40px tall for a
   thumb, and an unavailable combination is visibly struck rather than
   silently missing.
   ===================================================================== */

.ptm-vpick { display: grid; gap: 4px; }
.ptm-vpick__group .label { display: flex; align-items: baseline; gap: 8px; }
.ptm-vpick__chosen { font-weight: 700; color: var(--ptm-primary-deep); }
.ptm-vpick__chosen:empty { display: none; }

.ptm-vpick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.ptm-vpick__chip {
  min-width: 46px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1.5px solid var(--ptm-border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ptm-navy-900);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.ptm-vpick__chip:hover:not([disabled]) { border-color: var(--ptm-primary); }
.ptm-vpick__chip.is-on {
  border-color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  color: var(--ptm-primary-deep);
  box-shadow: inset 0 0 0 1px var(--ptm-primary-deep);
}
/* Struck, not hidden: a shopper needs to see that size 31 exists and is simply
   not paired with the weight they picked, or they think we do not make it. */
.ptm-vpick__chip.is-out {
  color: var(--ptm-soft);
  background: var(--ptm-offwhite, #f6f7fa);
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: .65;
}

.ptm-vpick__note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--ptm-mid);
}
.ptm-vpick__note svg { flex: none; color: #27ae60; display: block !important; }

/* The nudge when someone hits Add to Cart without choosing. */
.ptm-vpick.is-missing .ptm-vpick__group:not(.is-chosen) .ptm-vpick__chips {
  outline: 2px solid var(--ptm-primary);
  outline-offset: 6px;
  border-radius: 12px;
}
.ptm-vpick.is-missing .ptm-vpick__note { color: var(--ptm-primary-deep); font-weight: 600; }

/* "from ₹3,150" until a combination is chosen. */
.ptm-spp__from {
  align-self: center;
  margin-right: 2px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ptm-mid);
}

/* The chosen combination on a cart line. */
.ptm-sc__item-variant {
  margin: 2px 0 0;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ptm-mid);
}

@media (max-width: 767px) {
  .ptm-vpick__chips { gap: 6px; }
  .ptm-vpick__chip { min-width: 42px; min-height: 38px; padding: 7px 10px; font-size: .85rem; }
}

/* =====================================================================
   V20 — owner review round. MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* ---------- 1. the phone could not scroll past the gallery ----------
   `touch-action: pan-x pinch-zoom` told the browser this element handles
   horizontal panning and nothing else, so a vertical drag that started on the
   photograph did NOTHING — and on a phone the photograph is most of the screen.
   Naming both axes lets the browser pick from the gesture's own direction:
   sideways still swipes the gallery, up and down scrolls the page. */
.ptm-gallery__track { touch-action: pan-x pan-y pinch-zoom; }

/* ---------- 2. arrows on the description photo belt ---------- */
.ptm-brx__beltwrap { position: relative; }
.ptm-brx__beltnav,
.ptm-look__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ptm-border);
  border-radius: 50%;
  color: var(--ptm-navy-900);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 20px rgba(10, 26, 58, .16);
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.ptm-brx__beltnav svg,
.ptm-look__nav svg { display: block !important; }
.ptm-brx__beltnav:hover:not([disabled]),
.ptm-look__nav:hover:not([disabled]) { background: #fff; }
/* Faded rather than removed: an arrow that vanishes makes the row jump. */
.ptm-brx__beltnav[disabled],
.ptm-look__nav[disabled] { opacity: 0; pointer-events: none; }
.ptm-brx__beltnav--prev { left: 10px; }
.ptm-brx__beltnav--next { right: 10px; }

/* ---------- 3. arrows on "Complete the look" ---------- */
.ptm-look__wrap { position: relative; }
.ptm-look__nav--prev { left: -8px; }
.ptm-look__nav--next { right: -8px; }
@media (min-width: 1280px) {
  .ptm-look__nav--prev { left: -20px; }
  .ptm-look__nav--next { right: -20px; }
}
/* On a phone the thumb is the control and the arrows only cover the cards. */
@media (max-width: 767px) {
  .ptm-look__nav { display: none; }
  .ptm-brx__beltnav { width: 34px; height: 34px; }
  .ptm-brx__beltnav--prev { left: 6px; }
  .ptm-brx__beltnav--next { right: 6px; }
}

/* =====================================================================
   V21 — Variant Card, Modal Drawer & Unified Actions (Prototype-Matched)
   ===================================================================== */

.ptm-vcard {
  border: 1px solid var(--ptm-border, #e4e7ec);
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 14px 40px rgba(16, 24, 40, .10);
  margin-top: 16px;
  margin-bottom: 14px;
}

.ptm-vcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ptm-vcard__title {
  font-size: 15px;
  font-weight: 850;
  color: var(--ptm-navy-900, #101828);
  line-height: 1.2;
}

.ptm-vcard__sub {
  font-size: 11.5px;
  color: var(--ptm-mid, #667085);
  margin-top: 3px;
}

.ptm-vcard__summary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ptm-vcard__pill {
  font-size: 12px;
  font-weight: 750;
  color: #344054;
  background: #f2f4f7;
  border-radius: 999px;
  padding: 5px 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.ptm-vcard__section {
  padding: 12px 0;
  border-top: 1px solid #eef1f6;
}
.ptm-vcard__section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.ptm-vcard__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.ptm-vcard__label {
  font-size: 13px;
  font-weight: 800;
  color: #344054;
}

.ptm-vcard__hint {
  font-size: 11px;
  color: #98a2b3;
}

.ptm-vcard__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ptm-vcard__chips--compact {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 1px 7px;
  scrollbar-width: none;
}
.ptm-vcard__chips--compact::-webkit-scrollbar { display: none; }
.ptm-vcard__chips--compact .ptm-vcard__chip { flex: 0 0 auto; }

.ptm-vcard__chip {
  min-width: 44px;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid #dce2ee;
  background: #ffffff;
  color: #344054;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all .16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.ptm-vcard__chip:hover:not([disabled]) {
  border-color: #9bb7ff;
  transform: translateY(-1px);
}

.ptm-vcard__chip.is-on {
  border-color: var(--ptm-primary, #2457d6);
  background: #edf3ff;
  color: #1540af;
  box-shadow: 0 0 0 3px rgba(36, 87, 214, 0.08);
  font-weight: 800;
}

.ptm-vcard__chip.is-out {
  color: #94a3b8;
  background: #f8fafc;
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: .65;
}

.ptm-vcard__chip--more {
  color: var(--ptm-primary, #2457d6);
  background: #f7f9ff;
  border-style: dashed;
  min-width: auto;
  font-weight: 750;
}
.ptm-vcard__chip--more:hover {
  background: #edf3ff;
  border-color: var(--ptm-primary, #2457d6);
}
.ptm-vcard__chip--more.has-custom {
  border-style: solid;
  border-color: var(--ptm-primary, #2457d6);
  background: #edf3ff;
  color: #1540af;
}

.ptm-vcard__exact {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 12px;
  color: #475467;
}

.ptm-vcard__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ecfdf3;
  color: #079455;
  font-weight: 900;
  font-size: 11px;
  flex-shrink: 0;
}

/* Actions Row: Qty + ATC + Buy Now + Wish + Share */
.ptm-spp__actions-row {
  display: grid;
  grid-template-columns: 120px 1.4fr 1.2fr 48px 48px;
  gap: 9px;
  align-items: center;
  margin-top: 16px;
}

.ptm-spp__qty-box {
  height: 48px;
  border: 1px solid var(--ptm-border, #e4e7ec);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: #ffffff;
}

.ptm-spp__qty-box button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #f2f4f7;
  color: #344054;
  font-size: 16px;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease;
  padding: 0;
}
.ptm-spp__qty-box button:hover {
  background: #e4e7ec;
  color: #101828;
}

.ptm-spp__qty-box .v {
  font-size: 15px;
  font-weight: 800;
  color: #101828;
  min-width: 20px;
  text-align: center;
}

.ptm-btn-atc {
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--ptm-primary, #2457d6);
  background: linear-gradient(135deg, #2457d6, #4f7df0);
  color: #ffffff;
  font-weight: 850;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(36, 87, 214, .25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .16s ease;
}
.ptm-btn-atc:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(36, 87, 214, .32);
}

.ptm-spp__actions-row .ptm-btn-buynow {
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--ptm-primary, #2457d6);
  background: #ffffff;
  color: var(--ptm-primary, #2457d6);
  font-weight: 850;
  font-size: 14.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .16s ease;
}
.ptm-spp__actions-row .ptm-btn-buynow:hover:not([disabled]) {
  background: #f7f9ff;
  border-color: #1d4ed8;
}

.ptm-spp__actions-row .ptm-btn-icon {
  height: 48px;
  width: 48px;
  border-radius: 14px;
  border: 1px solid #dce2ee;
  background: #ffffff;
  color: #475467;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .16s ease;
}
.ptm-spp__actions-row .ptm-btn-icon:hover {
  border-color: #9bb7ff;
  color: #1540af;
  background: #f8fafc;
}
.ptm-spp__actions-row .ptm-btn-icon.is-active {
  color: #e11d48;
  border-color: #fecdd3;
  background: #fff1f2;
}

/* Benefit / Prepaid Notice Card */
.ptm-vcard__benefit {
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475467;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #eef1f6;
}
.ptm-vcard__benefit strong {
  color: #1d2939;
}
.ptm-vcard__benefit-icon {
  font-size: 15px;
  flex-shrink: 0;
}

/* Modal Overlay & Dialog */
.ptm-vmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .42);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ptm-vmodal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ptm-vmodal {
  width: min(620px, 100%);
  max-height: 78vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 20px 22px;
  box-shadow: 0 28px 80px rgba(16, 24, 40, .28);
  transform: translateY(14px) scale(0.98);
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ptm-vmodal-overlay.is-open .ptm-vmodal {
  transform: translateY(0) scale(1);
}

.ptm-vmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ptm-vmodal__title {
  font-size: 18px;
  font-weight: 850;
  margin: 0;
  color: #101828;
}
.ptm-vmodal__sub {
  font-size: 11.5px;
  color: #667085;
  margin-top: 3px;
}

.ptm-vmodal__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f2f4f7;
  font-size: 18px;
  color: #475467;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.ptm-vmodal__close:hover {
  background: #e4e7ec;
  color: #101828;
}

.ptm-vmodal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}
.ptm-vmodal__grid .ptm-vcard__chip {
  width: 100%;
  min-width: 0;
  padding: 0;
  height: 40px;
}

.ptm-vmodal__footer {
  margin-top: 14px;
  border-top: 1px solid #e4e7ec;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #667085;
}
.ptm-vmodal__guide-btn {
  border: 0;
  background: transparent;
  color: var(--ptm-primary, #2457d6);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* Size Guide modal table */
.ptm-vmodal--guide {
  width: min(520px, 100%);
}
.ptm-vmodal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 13px;
}
.ptm-vmodal__table th,
.ptm-vmodal__table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eef1f6;
}
.ptm-vmodal__table th {
  background: #f8fafc;
  color: #344054;
  font-weight: 750;
  font-size: 12px;
}
.ptm-vmodal__tip {
  padding: 10px 12px;
  background: #f0f5ff;
  border-radius: 10px;
  font-size: 12px;
  color: #1e3a8a;
  line-height: 1.45;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
  .ptm-spp__actions-row {
    grid-template-columns: 110px 1fr 1fr;
  }
  .ptm-spp__actions-row .ptm-btn-icon {
    display: none;
  }
  .ptm-vcard__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 1px 7px;
    scrollbar-width: none;
  }
  .ptm-vcard__chips::-webkit-scrollbar {
    display: none;
  }
  .ptm-vcard__chip {
    flex: 0 0 auto;
  }
  .ptm-vcard {
    padding: 14px;
    border-radius: 16px;
  }
  .ptm-vcard__head {
    align-items: flex-start;
  }
  .ptm-vcard__summary {
    max-width: 52%;
  }
  .ptm-vmodal {
    width: 100%;
    max-height: 76vh;
    border-radius: 24px 24px 0 0;
    padding: 18px 16px 22px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .ptm-vmodal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .ptm-vmodal__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 480px) {
  .ptm-spp__actions-row {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
  }
  .ptm-spp__actions-row .ptm-btn-buynow {
    grid-column: 1 / -1;
  }
  .ptm-vmodal__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .ptm-vcard__pill {
    font-size: 11px;
    padding: 5px 8px;
  }
  .ptm-vcard__hint {
    display: none;
  }
}

/* =====================================================================
   V23 — phone-first shopping: contained variants, rail pages, smart shop
   MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* Hero: let a finger swipe the photograph without fighting page scroll. */
.ptm-heroslides,
.ptm-hero__frame {
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.ptm-heroslides img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Keep the buy column inside the viewport so chip rows cannot stretch the page. */
.ptm-spp__info,
.ptm-vcard,
.ptm-vcard__section,
.ptm-vcard__chips {
  min-width: 0;
  max-width: 100%;
}
.ptm-vcard { overflow-x: clip; }

/* Chat sat on Add to cart and on the variant chips. On a phone product
   page the buy action wins; chat remains in the footer and on every other page. */
@media (max-width: 900px) {
  body.ptm-product-page .ptm-sup__launch { display: none; }
}

/* Phone / tablet: wrap size and weight into a grid. The older nowrap +
   overflow-x:auto rule (above) is what pulled the whole page sideways. */
@media (max-width: 900px) {
  .ptm-vcard__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ptm-vcard__summary { max-width: 100%; justify-content: flex-start; }

  .ptm-vcard__chips,
  .ptm-vcard__chips--compact,
  .ptm-vpick__chips {
    display: grid !important;
    flex-wrap: unset;
    overflow: visible !important;
    padding-bottom: 0;
    gap: 8px;
  }
  .ptm-vcard__chips--size { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptm-vcard__chips--weight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ptm-vcard__chips .ptm-vcard__chip,
  .ptm-vcard__chips .ptm-vpick__chip {
    width: 100%;
    min-width: 0;
    flex: none;
    height: 42px;
    padding: 0 8px;
    font-size: .82rem;
  }
  .ptm-vcard__chips--weight .ptm-vcard__chip { font-size: .72rem; padding: 0 4px; }
}

/* Desktop rails: two rows of five, no side arrows, page dots underneath.
   Phone keeps the existing 2×2 swipe. */
.ptm-newin .ptm-rail__nav,
.ptm-best .ptm-rail__nav { display: none !important; }

.ptm-rail__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  min-height: 18px;
}
.ptm-rail__pager[hidden] { display: none !important; }
.ptm-rail__pager button {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--ptm-lightest, #eef2ff);
  color: var(--ptm-navy-900);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.ptm-rail__pager button.is-on {
  background: var(--ptm-primary-deep, #1e40af);
  color: #fff;
}
.ptm-rail__pager button:focus-visible {
  outline: 2px solid var(--ptm-primary);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .ptm-newin .ptm-rail--car .ptm-rail__track,
  .ptm-best .ptm-rail--car .ptm-rail__track {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 54px) / 4);
    row-gap: 18px;
  }
  .ptm-newin .ptm-rail--car .ptm-rail__track > *:nth-child(even),
  .ptm-best .ptm-rail--car .ptm-rail__track > *:nth-child(even) { scroll-snap-align: none; }
}
@media (min-width: 1100px) {
  .ptm-newin .ptm-rail--car .ptm-rail__track,
  .ptm-best .ptm-rail--car .ptm-rail__track {
    grid-auto-columns: calc((100% - 72px) / 5);
  }
}

/* In-place shop-by-piece */
.ptm-smartshop { padding: 28px 0 8px; }
.ptm-smartshop__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 4px 0 18px;
  padding: 2px 0 8px;
}
.ptm-smartshop__tabs::-webkit-scrollbar { display: none; }
.ptm-smartshop__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ptm-border, #e4e7ec);
  border-radius: 999px;
  background: #fff;
  color: var(--ptm-navy-900);
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ptm-smartshop__tab svg { display: block !important; width: 16px; height: 16px; }
.ptm-smartshop__tab:hover { border-color: var(--ptm-primary); }
.ptm-smartshop__tab.is-on {
  background: var(--ptm-primary-deep, #1e40af);
  border-color: var(--ptm-primary-deep, #1e40af);
  color: #fff;
}
.ptm-smartshop__tab:focus-visible {
  outline: 2px solid var(--ptm-primary);
  outline-offset: 2px;
}
.ptm-smartshop__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ptm-smartshop__grid .ptm-card[hidden] { display: none !important; }
.ptm-smartshop__grid.is-swap .ptm-card:not([hidden]) {
  animation: ptm-smart-in .38s var(--ease);
}
@keyframes ptm-smart-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-smartshop__grid.is-swap .ptm-card:not([hidden]) { animation: none; }
}
.ptm-smartshop__empty {
  margin: 8px 0 0;
  color: var(--ptm-mid);
  text-align: center;
}
.ptm-smartshop__more {
  margin: 16px 0 0;
  text-align: center;
}
.ptm-smartshop__more a {
  font-weight: 650;
  color: var(--ptm-primary-deep);
}
@media (min-width: 768px) {
  .ptm-smartshop { padding-top: 40px; }
  .ptm-smartshop__tabs { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
  .ptm-smartshop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1100px) {
  .ptm-smartshop__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   V24 — phone scroll, ATC gap, numbered pages, shop-by-piece rail
   MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* 1. Photograph + empty thumbnail row were eating vertical swipes.
   Hide the unused thumb rail on a one-photo listing, but the desktop
   gallery is `90px 1fr` — if the thumbs cell disappears, the main
   photograph drops into the 90px column (tiny square, huge white gap).
   One-photo galleries are a single full-width cell. Do not change
   overflow-y on the multi-photo track: `auto` there collapses the flex
   slide. V20 already named both pan axes for page scroll. */
.ptm-gallery--one {
  grid-template-columns: minmax(0, 1fr) !important;
}
.ptm-gallery--one .ptm-gallery__thumbs { display: none; }
.ptm-gallery__main {
  width: 100%;
  min-width: 0;
}
.ptm-gallery__main--one .ptm-gallery__track {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y pinch-zoom;
}
.ptm-gallery__thumbs {
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* Category chip row and any leftover horizontal strip: same two-axis pan. */
.ptm-hcat__inner,
.ptm-ftrust__inner {
  touch-action: pan-x pan-y pinch-zoom;
}

/* 2. Sticky Add to cart. The gap from the bottom nav stays; the bar itself
   must stay visible and above the nav. Nested calc(--ptm-bottom-clear)
   (which already contains env()) is invalid on some iOS WebKit builds, so
   the `bottom` property was dropped, `z-index: 70` still applied, and the
   nav (z-index 80) painted over the whole strip. */
@media (max-width: 991px) {
  .ptm-atcbar {
    display: block;
    bottom: calc(var(--ptm-bnav-height, 62px) + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 85;
    box-shadow: 0 -8px 26px rgba(9, 18, 40, .12);
  }
  .ptm-atcbar.is-on {
    visibility: visible;
    transform: none;
  }
  .ptm-bnav { z-index: 80; }
  body.ptm-atcbar-on {
    padding-bottom: calc(var(--ptm-bnav-height, 62px) + env(safe-area-inset-bottom, 0px) + var(--ptm-atcbar-h, 72px) + 24px);
  }
}

/* 3. Numbered page pills wrap on a narrow phone instead of vanishing. */
.ptm-rail__pager {
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

/* 4. Customer-loved picks: one product per row on a phone (swipe + 1 2 3).
   Desktop keeps the two-row page from V23. */
@media (max-width: 767px) {
  .ptm-best .ptm-rail--car .ptm-rail__track {
    grid-template-rows: auto;
    grid-auto-columns: 78%;
  }
  .ptm-best .ptm-rail--car .ptm-rail__track > *,
  .ptm-best .ptm-rail--car .ptm-rail__track > *:nth-child(even) {
    scroll-snap-align: start;
  }
}

/* 5. Find it by piece uses the same 2×2 swipe as New arrivals, not a
   wrapping stack. Desktop is two rows that page sideways. */
.ptm-smartshop .ptm-rail__nav { display: none !important; }
.ptm-smartshop__grid.ptm-rail__track,
.ptm-smartshop .ptm-rail--car .ptm-smartshop__grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ptm-smartshop__grid.ptm-rail__track::-webkit-scrollbar { display: none; }

@media (max-width: 767px) {
  .ptm-smartshop .ptm-rail--car .ptm-smartshop__grid {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc(50% - 6px);
    gap: 12px;
  }
  .ptm-smartshop .ptm-rail--car .ptm-smartshop__grid > * { scroll-snap-align: start; }
  .ptm-smartshop .ptm-rail--car .ptm-smartshop__grid > *:nth-child(even) { scroll-snap-align: none; }
}
@media (min-width: 768px) {
  .ptm-smartshop .ptm-rail--car .ptm-smartshop__grid {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - 54px) / 4);
    gap: 18px;
    row-gap: 18px;
  }
  .ptm-smartshop .ptm-rail--car .ptm-smartshop__grid > *:nth-child(even) { scroll-snap-align: none; }
}
@media (min-width: 1100px) {
  .ptm-smartshop .ptm-rail--car .ptm-smartshop__grid {
    grid-auto-columns: calc((100% - 72px) / 5);
  }
}


/* =====================================================================
   V21 — HOMEPAGE BANNER SLIDER
   =====================================================================
   Replaces the .ptm-hero block at the top of the homepage with photographs
   and nothing else. The client's brief was literally "only banners, without
   text", so there is no overlay, no caption and no gradient scrim over the
   picture — the only things drawn on top are the dots and arrows, and both
   carry their own shadow so they stay legible on a pale image.

   Two shapes, one section:
     phone    4:5  portrait   — jewellery stays large on a 390px screen
     >=768px  21:9 letterbox  — the wide editorial crop

   Both are held by aspect-ratio, so the slot's height is known before the
   image loads and the trust pills below never jump (CLS).

   Reverting: the section only renders when the `banners` table has an active
   row, so `UPDATE banners SET status = 0;` restores the old hero without
   touching this file.
   ------------------------------------------------------------------ */

.ptm-banner {
  position: relative;
  width: 100%;
  /* Sits flush under the header; the sections below keep their own rhythm. */
  margin: 0 0 clamp(28px, 5vw, 56px);
  background: var(--ptm-bg-warm);
}

.ptm-banner__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  /* A very tall phone would otherwise hand the entire first screen to one
     picture and push every product below the fold. */
  max-height: 68vh;
  overflow: hidden;
  background: var(--ptm-bg-warm);
  /* The swipe handler reads horizontal drags; let the browser keep vertical
     scrolling native so the page never feels stuck under a finger. */
  touch-action: pan-y;
}

.ptm-banner__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  /* Kept in the compositor: fading `visibility` instead of unmounting means
     the browser has the next frame decoded before it is asked to show it. */
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.ptm-banner__slide.is-on {
  opacity: 1;
  pointer-events: auto;
}

.ptm-banner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  /* A slow drift on the live slide only — enough to read as alive, small
     enough that nobody notices it as an effect. Paired with the fade it
     hides the seam between two stills. */
  transform: scale(1.045);
  transition: transform 7s linear;
}
.ptm-banner__slide.is-on img { transform: scale(1); }

/* An image that 404s is removed by ptm.js, but until it is, this keeps the
   alt text readable rather than showing it black-on-photo. */
.ptm-banner__slide img:not([src]) { background: var(--ptm-bg-warm); }

/* ---- dots ------------------------------------------------------------- */
.ptm-banner__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.4vw, 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-pill, 999px);
  /* A tinted plate rather than bare dots: on a busy photograph loose white
     pills disappear entirely. */
  background: rgba(10, 26, 58, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

.ptm-banner__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .35s cubic-bezier(.4, 0, .2, 1), background .35s ease;
}
.ptm-banner__dots button.is-on { width: 26px; background: #fff; }
.ptm-banner__dots button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The tap target has to be finger-sized even though the dot is 8px — the
   V9.7 audit flagged the old hero dots for exactly this. */
.ptm-banner__dots button { position: relative; }
.ptm-banner__dots button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- arrows ----------------------------------------------------------- */
.ptm-banner__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: none;               /* phones swipe; see the media query below */
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--ptm-navy, #1E3A8A);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--ptm-shadow-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background .3s ease, transform .3s ease;
  z-index: 2;
}
.ptm-banner__arrow--prev { left: clamp(12px, 2vw, 28px); }
.ptm-banner__arrow--next { right: clamp(12px, 2vw, 28px); }

.ptm-banner:hover .ptm-banner__arrow,
.ptm-banner__arrow:focus-visible { opacity: 1; }
.ptm-banner__arrow:hover { background: #fff; }
.ptm-banner__arrow:focus-visible { outline: 2px solid var(--ptm-primary); outline-offset: 2px; }

@media (min-width: 768px) {
  .ptm-banner__stage {
    aspect-ratio: 2560 / 1100;
    /* Ultrawide monitors would otherwise render a 900px-tall letterbox. */
    max-height: 78vh;
  }
  .ptm-banner__arrow { display: flex; }
}

/* A pointer that cannot hover (touch laptop, tablet) never triggers the
   :hover reveal, so show the arrows outright there. */
@media (min-width: 768px) and (hover: none) {
  .ptm-banner__arrow { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ptm-banner__slide,
  .ptm-banner__slide img,
  .ptm-banner__dots button { transition: none; }
  .ptm-banner__slide img,
  .ptm-banner__slide.is-on img { transform: none; }
}

/* No-JS: the slider never advances, so make sure the first slide is the one
   showing rather than relying on a class ptm.js would have set. */
.no-js .ptm-banner__slide:first-child { opacity: 1; }
.no-js .ptm-banner__arrow,
.no-js .ptm-banner__dots { display: none; }

/* =====================================================================
   V24 — REDESIGNED NAVIGATION RAIL & MULTI-SECTION MEGA MENUS
   ===================================================================== */

/* 1. Multi-section Birthstone Mega Panel (3 Columns: Pendant, Ring, Loose) */
.ptm-mega__panel--multi {
  min-width: 960px;
}
.ptm-mega__multi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  padding: 24px 20px 20px;
  align-items: start;
}
.ptm-mega__sections-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ptm-mega__sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ptm-mega__sec-head {
  display: block;
  font-family: var(--font-royal, 'Playfair Display', Georgia, serif);
  font-size: .84rem;
  font-weight: 700;
  color: var(--ptm-navy-900, #0B1E48);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ptm-border, rgba(45, 91, 201, .12));
  margin-bottom: 6px;
}
.ptm-mega__sec-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ptm-mega__sec-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ptm-navy-900, #0B1E48);
  font-size: .84rem;
  font-weight: 500;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.ptm-mega__sec-link:hover {
  background: var(--ptm-lightest, #EBF3FE);
  color: var(--ptm-primary-deep, #1E40AF);
  transform: translateX(2px);
}
.ptm-mega__sec-link .ptm-mega__ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ptm-mega__sec-link .ptm-mega__ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .ptm-mega__panel--multi { min-width: 820px; }
  .ptm-mega__multi-grid { grid-template-columns: 1fr; }
  .ptm-mega__multi-grid .ptm-mega__promo { display: none; }
}

/* 2. "More" Dropdown Menu */
.ptm-mega--more {
  position: relative;
}
.ptm-mega__panel--more {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 520px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 20px 48px rgba(11, 30, 72, .18);
  background: #fff;
}
.ptm-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 18px 20px 20px;
}
.ptm-more-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  background: var(--ptm-offwhite, #F8FAFD);
  border: 1px solid var(--ptm-border, rgba(45, 91, 201, .08));
  transition: all .2s var(--ease);
}
.ptm-more-item:hover {
  background: var(--ptm-lightest, #EBF3FE);
  border-color: var(--ptm-lighter, #BFDBFE);
  transform: translateY(-1px);
}
.ptm-more-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  color: var(--ptm-primary-deep, #1E40AF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(11, 30, 72, .06);
}
.ptm-more-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ptm-more-item__content strong {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ptm-navy-900, #0B1E48);
}
.ptm-more-item__content small {
  font-size: .74rem;
  color: var(--ptm-mid, #5B6E8C);
  line-height: 1.25;
}

/* 3. Mobile Menu Drawer Accordions */
.ptm-mm__acc {
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.ptm-mm__acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ptm-navy-900, #0B1E48);
  cursor: pointer;
  text-align: left;
}
.ptm-mm__acc-trigger .ptm-mm__label {
  flex: 1;
  margin-left: 10px;
}
.ptm-mm__acc-trigger .ptm-mm__chevron {
  color: var(--ptm-mid, #5B6E8C);
  transition: transform .25s var(--ease);
}
.ptm-mm__acc.is-open .ptm-mm__acc-trigger .ptm-mm__chevron {
  transform: rotate(180deg);
}
.ptm-mm__acc-body {
  display: none;
  padding: 4px 16px 12px 36px;
  background: rgba(245, 248, 255, .6);
}
.ptm-mm__acc.is-open .ptm-mm__acc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ptm-mm__subrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: .88rem;
  color: var(--ptm-navy-900, #0B1E48);
  transition: background .15s ease;
}
.ptm-mm__subrow:hover,
.ptm-mm__subrow:active {
  background: #fff;
  color: var(--ptm-primary-deep, #1E40AF);
}
.ptm-mm__subrow--all {
  font-weight: 700;
  color: var(--ptm-primary-deep, #1E40AF);
  border-bottom: 1px dashed rgba(45, 91, 201, .2);
  margin-bottom: 4px;
  padding-bottom: 8px;
}
.ptm-mm__sec-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ptm-mid, #5B6E8C);
  padding: 8px 10px 4px;
  margin-top: 4px;
}
.ptm-mm__subico {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--ptm-primary, #2563EB);
}
.ptm-mm__subico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =====================================================================
   V21 — product page, owner round. MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* ---------- 1. four promises in a 2x2 grid ----------
   The reference the owner supplied lays its four out two across; three in a
   column read as a list of terms rather than a set of reasons. */
.ptm-spp__feat--quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ptm-spp__feat--quad .ptm-spp__feat-item { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 12px 13px; }
.ptm-spp__feat--quad .ptm-spp__feat-ico { width: 42px; height: 42px; border-radius: 12px; }
.ptm-spp__feat--quad strong { font-size: .88rem; }
.ptm-spp__feat--quad small { font-size: .74rem; }
.ptm-spp__feat-item--return .ptm-spp__feat-ico {
  color: #2e7d32;
  background: linear-gradient(135deg, #e8f5e9, #fff 76%);
  box-shadow: inset 0 0 0 1px #c8e6c9, 0 4px 10px rgba(46, 125, 50, .12);
}
@media (max-width: 420px) {
  /* Below this the two columns squeeze the copy to three words a line. */
  .ptm-spp__feat--quad { grid-template-columns: 1fr; }
}

/* ---------- 2. the gemstone reads as a stone, not a swatch ---------- */
.ptm-stone__ico { display: inline-flex; align-items: center; color: var(--ptm-primary-deep); }
.ptm-stone__ico svg { display: block !important; }

/* ---------- 3. thumbnails below the photograph ----------
   They sat in a 90px column down the left, which is the layout a desktop-only
   site used to use; the owner wants what the phone already does. Same markup,
   reordered — the thumbnail rail is first in the DOM so it stays first for a
   screen reader and for keyboard order. */
@media (min-width: 768px) {
  .ptm-gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ptm-gallery__main   { order: 1; }
  .ptm-gallery__thumbs { order: 2; grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; scrollbar-width: none; }
  .ptm-gallery__thumbs::-webkit-scrollbar { display: none; }
  .ptm-gallery__thumbs button { width: 84px; height: 84px; }
}

/* ---------- 4. zoom on hover ----------
   The lightbox stays for a proper look; this is the quick one, the gesture
   people already expect from a shopping site. The origin follows the pointer
   (set by ptm.js), so you inspect the part you are actually pointing at. */
@media (hover: hover) and (pointer: fine) {
  .ptm-gallery__slide { overflow: hidden; }
  .ptm-gallery__slide img {
    transition: transform .28s var(--ease);
    transform-origin: var(--zx, 50%) var(--zy, 50%);
  }
  .ptm-gallery__slide:hover img { transform: scale(1.9); }
  .ptm-gallery__main:hover .ptm-gallery__nav,
  .ptm-gallery__main:hover .ptm-gallery__zoom { z-index: 7; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.ptm-force-motion) .ptm-gallery__slide img { transition: none; }
}

/* ---------- 5. the purchase bar stays put ----------
   It used to slide in only after the real button scrolled away. The owner wants
   it fixed, because the price changes with the chosen combination and he wants
   that visible wherever he is on the page.

   Done in ptm.js by holding `.is-on` from load rather than forcing it here:
   `body.ptm-cart-lock .ptm-atcbar` must still win when the drawer opens (the
   §35 overlap), and `--ptm-atcbar-h` and `body.ptm-atcbar-on` — which the
   support launcher clears itself against — are only published while the bar
   thinks it is on. Forcing it in CSS would have broken all three. */

/* V21 fix — the thumbnail rail was 460px TALL after being moved below the
   photograph, because ptm.css:1626 turns it into `flex-direction: column` above
   768px for the old left-hand layout. It is a horizontal strip now. */
@media (min-width: 768px) {
  .ptm-gallery__thumbs {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  .ptm-gallery__thumbs button { flex: 0 0 84px; width: 84px; height: 84px; }
}

/* =====================================================================
   V22 — product page, owner round. MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* ---------- save + share at the top, beside the badges ---------- */
.ptm-spp__toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ptm-spp__toprow .ptm-spp__badges { margin: 0; }
.ptm-spp__topacts { display: flex; gap: 8px; flex: none; }
.ptm-spp__iconbtn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--ptm-border);
  border-radius: 50%;
  background: #fff;
  color: var(--ptm-navy-900);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.ptm-spp__iconbtn:hover { border-color: var(--ptm-primary); color: var(--ptm-primary-deep); }
.ptm-spp__iconbtn.is-active { border-color: #e0245e; color: #e0245e; background: #fff5f8; }
.ptm-spp__iconbtn.is-active svg { fill: currentColor; }
.ptm-spp__iconbtn svg { display: block !important; }

/* ---------- four promises stay 2x2 on a phone too ----------
   The owner asked for the same grid there; it only needs tighter copy. */
@media (max-width: 420px) {
  .ptm-spp__feat--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ptm-spp__feat--quad .ptm-spp__feat-item { grid-template-columns: 1fr; gap: 6px; padding: 12px 10px; text-align: left; }
  .ptm-spp__feat--quad .ptm-spp__feat-ico { width: 34px; height: 34px; border-radius: 10px; }
  .ptm-spp__feat--quad strong { font-size: .8rem; }
  .ptm-spp__feat--quad small { font-size: .68rem; line-height: 1.35; }
}

/* ---------- cross-sell, in the reference's "Choose Your Finish" slot ---------- */
.ptm-xsell { margin: 4px 0 16px; }
.ptm-xsell__label {
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ptm-mid);
}
.ptm-xsell__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ptm-xsell__card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--ptm-border);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-xsell__card:hover {
  border-color: var(--ptm-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .12);
}
.ptm-xsell__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ptm-lightest);
}
.ptm-xsell__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptm-xsell__name {
  font-size: .74rem;
  line-height: 1.3;
  color: var(--ptm-navy-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ptm-xsell__price { font-size: .82rem; font-weight: 700; color: var(--ptm-navy-900); }

/* ---------- delivery check ---------- */
.ptm-spp__deliv {
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid var(--ptm-border);
  border-radius: 14px;
  background: var(--ptm-lightest);
}
.ptm-spp__deliv-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: .84rem; font-weight: 700; color: var(--ptm-navy-900);
}
.ptm-spp__deliv-head svg { display: block !important; color: var(--ptm-primary-deep); }
.ptm-spp__deliv-row { display: flex; gap: 8px; }
.ptm-spp__deliv-in {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ptm-border);
  border-radius: 10px;
  background: #fff;
  font: inherit; font-size: .88rem;
}
.ptm-spp__deliv-in:focus { outline: 2px solid var(--ptm-primary); outline-offset: -1px; }
.ptm-spp__deliv-btn {
  flex: none;
  padding: 10px 18px;
  border: 0; border-radius: 10px;
  background: var(--ptm-primary-deep);
  color: #fff;
  font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer;
}
.ptm-spp__deliv-btn:hover { background: var(--ptm-primary); }
.ptm-spp__deliv-out { margin: 9px 0 0; font-size: .8rem; color: var(--ptm-mid); }
.ptm-spp__deliv-out:empty { display: none; }
.ptm-spp__deliv-out.is-err { color: #c0392b; }

/* ---------- FAQ in the description ---------- */
.ptm-brx__faq h3 {
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--ptm-navy-900);
}
.ptm-brx__faq-item { border-bottom: 1px solid rgba(15, 32, 66, .07); }
.ptm-brx__faq-item:last-child { border-bottom: none; }
.ptm-brx__faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0;
  font-size: .97rem; font-weight: 600; color: var(--ptm-navy-900);
  cursor: pointer; list-style: none;
}
.ptm-brx__faq-item summary::-webkit-details-marker { display: none; }
.ptm-brx__faq-item summary svg { flex: none; display: block !important; color: var(--ptm-soft); transition: transform .2s var(--ease); }
.ptm-brx__faq-item[open] summary svg { transform: rotate(180deg); }
.ptm-brx__faq-item p { margin: 0 0 14px; font-size: .9rem; line-height: 1.65; color: var(--ptm-mid); }

@media (max-width: 767px) {
  .ptm-xsell__row { gap: 8px; }
  .ptm-xsell__card { padding: 8px; }
}

/* V22 — windowed pager. */
.ptm-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ptm-pagination .ptm-btn { min-width: 44px; padding-inline: 12px; }
.ptm-pagination__step { display: grid; place-items: center; }
.ptm-pagination__step svg { display: block !important; }
.ptm-pagination__gap { padding: 0 2px; color: var(--ptm-soft); font-weight: 700; }
@media (max-width: 520px) {
  /* Keep it to Prev · current · Next plus the two ends — never a wrapped block. */
  .ptm-pagination__far { display: none; }
  .ptm-pagination { gap: 6px; }
  .ptm-pagination .ptm-btn { min-width: 40px; padding-inline: 10px; }
}

/* V22 fix — with the far pages hidden on a phone the ellipsis was left dangling
   after the last visible number ("1 2 … ›"). It only means anything next to the
   page it stands in for. */
@media (max-width: 520px) {
  .ptm-pagination__gap { display: none; }
}

/* V22 — social + call in the header, brand colours on by default.
   The owner's standing note from the footer round applies here too: a colour
   that only appears under the cursor never gets seen. */
.ptm-hsoc { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.ptm-hsoc__a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-hsoc__a svg { display: block !important; }
.ptm-hsoc__a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(10, 26, 58, .22); }
.ptm-hsoc__a--call      { background: var(--ptm-navy-900); }
.ptm-hsoc__a--wa        { background: #25D366; }
.ptm-hsoc__a--instagram { background: linear-gradient(45deg, #f09433, #bc1888 65%, #8a0d6b); }
.ptm-hsoc__a--facebook  { background: #1877F2; }
.ptm-hsoc__a--youtube   { background: #FF0000; }
@media (max-width: 1180px) { .ptm-hsoc { display: none; } }

/* =====================================================================
   V23 — search, More panel, shop rail, and the polish pass.
   MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* ---------- 1. the search field ----------
   The category selector is gone from the markup, so the field is one thing
   again: a soft, deep pill with the glyph inside it and a solid sapphire
   submit. Raised on focus rather than outlined — an outline on a pill this
   size reads as an error state. */
.ptm-search {
  max-width: 640px;
  border-radius: 999px;
  border: 1px solid var(--ptm-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 26, 58, .05), 0 8px 20px -12px rgba(10, 26, 58, .28);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  overflow: hidden;
  padding: 4px 4px 4px 16px;
  gap: 10px;
}
.ptm-search:focus-within {
  border-color: var(--ptm-primary);
  box-shadow: 0 2px 4px rgba(37, 99, 235, .08), 0 16px 34px -16px rgba(37, 99, 235, .45);
  transform: translateY(-1px);
}
.ptm-search > svg { flex: none; color: var(--ptm-soft); }
.ptm-search:focus-within > svg { color: var(--ptm-primary-deep); }
.ptm-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-size: .95rem;
  color: var(--ptm-navy-900);
}
.ptm-search input[type="search"]:focus { outline: none; }
.ptm-search input[type="search"]::placeholder { color: var(--ptm-soft); }
.ptm-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.ptm-search button[type="submit"] {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--ptm-primary), var(--ptm-primary-deep));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .32);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-search button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(37, 99, 235, .42); }
.ptm-search button[type="submit"] svg { display: block !important; }

/* ---------- 2. call in the header, socials in More ---------- */
/* Call matches the other header actions — icon over label, like Login,
   Wishlist and Cart. As a filled black pill it fought them for attention, and
   the number wrapped onto three lines inside the rounded shape. */
.ptm-hcall {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: none;
  padding: 4px 10px;
  border-radius: 12px;
  color: var(--ptm-navy-900);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.ptm-hcall:hover { color: var(--ptm-primary-deep); background: var(--ptm-lightest); }
.ptm-hcall svg { display: block !important; }
.ptm-hcall span { font-size: .72rem; font-weight: 700; letter-spacing: .01em; }
@media (max-width: 1180px) { .ptm-hcall span { display: none; } }

.ptm-more-social {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 6px; padding: 14px 18px;
  border-top: 1px solid var(--ptm-border);
  background: var(--ptm-lightest);
}
.ptm-more-social__lbl { font-size: .78rem; font-weight: 700; color: var(--ptm-mid); }
.ptm-more-social__row { display: flex; gap: 8px; }
.ptm-more-social__a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  transition: transform .2s var(--ease);
}
.ptm-more-social__a:hover { transform: translateY(-2px) scale(1.06); }
.ptm-more-social__a svg { display: block !important; }
.ptm-more-social__a--whatsapp  { background: #25D366; }
.ptm-more-social__a--instagram { background: linear-gradient(45deg, #f09433, #bc1888 65%, #8a0d6b); }
.ptm-more-social__a--facebook  { background: #1877F2; }
.ptm-more-social__a--youtube   { background: #FF0000; }

/* ---------- 3. "Find it by piece" ---------- */
.ptm-shoprail { margin-top: clamp(48px, 6vw, 76px); }
.ptm-shoprail__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}
.ptm-shoprail__tile {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.ptm-shoprail__tile:hover {
  transform: translateY(-4px);
  border-color: var(--ptm-lighter);
  box-shadow: 0 16px 30px -14px rgba(10, 26, 58, .38);
}
.ptm-shoprail__ico {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--ptm-lightest), #fff 70%);
  box-shadow: inset 0 0 0 1px var(--ptm-lighter);
  color: var(--ptm-primary-deep);
}
.ptm-shoprail__ico img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }
.ptm-shoprail__ico svg { display: block !important; }
.ptm-shoprail__name { font-size: .85rem; font-weight: 600; color: var(--ptm-navy-900); text-align: center; }

/* ---------- 4. polish: offers, price and the buy row ----------
   The owner's note was that other shops read as considered and ours reads as
   assembled. The difference is almost entirely depth and spacing, so: softer
   surfaces, one clear focal point per block, and shadows that suggest a raised
   card rather than a drawn border. */
.ptm-spp__offers {
  border: 1px solid var(--ptm-border);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, var(--ptm-lightest) 140%);
  box-shadow: 0 10px 24px -18px rgba(10, 26, 58, .5);
  overflow: hidden;
}
.ptm-spp__offers > summary { padding: 14px 16px; font-weight: 700; }
.ptm-spp__offers-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: var(--ptm-primary-deep); color: #fff;
  font-size: .72rem; font-weight: 800;
}
.ptm-spp__offer {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px;
  border-top: 1px dashed var(--ptm-border);
}
.ptm-spp__offer code {
  flex: none;
  padding: 5px 10px;
  border: 1px dashed var(--ptm-primary);
  border-radius: 8px;
  background: var(--ptm-lightest);
  color: var(--ptm-primary-deep);
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
}

.ptm-spp__price { letter-spacing: -.02em; }
.ptm-spp__saletag {
  box-shadow: inset 0 0 0 1px rgba(46, 125, 50, .22);
}

/* A primary button should look pressable, not painted on. */
.ptm-btn-atc, .ptm-spp__actions-row .ptm-btn-primary {
  box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .75);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ptm-btn-atc:hover, .ptm-spp__actions-row .ptm-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(37, 99, 235, .8);
}
.ptm-btn-atc:active, .ptm-spp__actions-row .ptm-btn-primary:active { transform: translateY(0); }

@media (max-width: 767px) {
  .ptm-shoprail__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ptm-shoprail__tile { padding: 14px 8px; border-radius: 14px; }
  .ptm-shoprail__ico { width: 50px; height: 50px; }
  .ptm-shoprail__ico img { width: 38px; height: 38px; }
  .ptm-shoprail__name { font-size: .76rem; }
  .ptm-more-social { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* V23 — the one-line summary, sitting with the title. */
.ptm-spp__lede {
  margin: 8px 0 0;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ptm-mid);
  max-width: 62ch;
}

/* =====================================================================
   V24 — offers, brand marks, rating bars. MUST STAY LAST IN THIS FILE.
   ===================================================================== */

/* ---------- 1. the brand marks in the More panel were invisible ----------
   They render as filled paths taking `currentColor`, but the panel's own link
   colour (navy) won over `.ptm-more-social__a`, so each glyph was dark navy on
   a dark brand circle. Written at (0,2,0) to beat the panel rule rather than
   shouting !important at it. */
.ptm-more-social__row .ptm-more-social__a { color: #fff; }
.ptm-more-social__row .ptm-more-social__a svg { fill: currentColor; }
.ptm-more-social__row .ptm-more-social__a svg path,
.ptm-more-social__row .ptm-more-social__a svg circle,
.ptm-more-social__row .ptm-more-social__a svg rect { fill: currentColor; }

/* ---------- 2. offers, open and legible ---------- */
.ptm-offers {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--ptm-border);
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, var(--ptm-lightest) 165%);
  box-shadow: 0 14px 30px -22px rgba(10, 26, 58, .55);
}
.ptm-offers__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ptm-navy-900);
}
.ptm-offers__title svg { display: block !important; color: var(--ptm-primary-deep); }
.ptm-offers__title small { font-size: .74rem; font-weight: 600; color: var(--ptm-soft); }
.ptm-offers__list { display: grid; gap: 8px; }

.ptm-offers__row {
  border: 1px solid var(--ptm-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-offers__row[open] { border-color: var(--ptm-lighter); box-shadow: 0 8px 18px -14px rgba(37, 99, 235, .8); }
.ptm-offers__row > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
}
.ptm-offers__row > summary::-webkit-details-marker { display: none; }
.ptm-offers__ico {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--ptm-lightest);
  color: var(--ptm-primary-deep);
}
.ptm-offers__ico svg { display: block !important; }
.ptm-offers__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ptm-navy-900);
}
.ptm-offers__x { flex: none; color: var(--ptm-soft); transition: transform .2s var(--ease); }
.ptm-offers__x svg { display: block !important; }
.ptm-offers__row[open] .ptm-offers__x { transform: rotate(180deg); }

.ptm-offers__body { padding: 0 13px 13px 53px; }
.ptm-offers__body p { margin: 0 0 10px; font-size: .8rem; line-height: 1.55; color: var(--ptm-mid); }
.ptm-offers__copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 7px;
  border: 1px dashed var(--ptm-primary);
  border-radius: 9px;
  background: var(--ptm-lightest);
  cursor: pointer;
  font: inherit;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ptm-offers__copy:hover { background: var(--ptm-lighter); }
.ptm-offers__copy code {
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff;
  color: var(--ptm-primary-deep);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
}
.ptm-offers__copy span { font-size: .76rem; font-weight: 700; color: var(--ptm-primary-deep); }
.ptm-offers__copy.is-done { border-color: #2e7d32; background: #e8f5e9; }
.ptm-offers__copy.is-done span { color: #2e7d32; }

.ptm-offers__more {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 0;
  border-top: 1px dashed var(--ptm-border);
  background: none;
  color: var(--ptm-primary-deep);
  font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
}
.ptm-offers__more:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .ptm-offers { padding: 14px 12px; }
  .ptm-offers__body { padding-left: 13px; }
}

/* V25 — the made-to-order choice (ring size, or who it is for). Same chip
   language as the variant picker, so the column reads as one set of choices. */
.ptm-optpick__chosen { font-weight: 700; color: var(--ptm-primary-deep); }
.ptm-optpick__chosen:empty { display: none; }
.ptm-optpick__chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
  max-height: 152px; overflow-y: auto;
}
.ptm-optpick__chip {
  min-width: 46px; min-height: 40px;
  padding: 8px 12px;
  border: 1.5px solid var(--ptm-border);
  border-radius: 10px;
  background: #fff;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--ptm-navy-900);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.ptm-optpick__chip:hover { border-color: var(--ptm-primary); }
.ptm-optpick__chip.is-on {
  border-color: var(--ptm-primary-deep);
  background: var(--ptm-lightest);
  color: var(--ptm-primary-deep);
  box-shadow: inset 0 0 0 1px var(--ptm-primary-deep);
}
.ptm-optpick.is-missing .ptm-optpick__chips {
  outline: 2px solid var(--ptm-primary);
  outline-offset: 6px;
  border-radius: 12px;
}
@media (max-width: 767px) {
  .ptm-optpick__chip { min-width: 42px; min-height: 38px; padding: 7px 10px; font-size: .85rem; }
}


/* =====================================================================
   V27 — THE WHOLE-SITE UPDATE (2026-09-03)                 MUST STAY LAST
   Category tree · strict nav · Clara-style phone header · bottom nav gone
   · 3D find-tabs · Google-style rating · specs table · wider canvas.
   Every rule here beats its predecessor by order or specificity; nothing
   above was edited to make room.
   ===================================================================== */

/* ---- 0. The phone bottom nav is gone: nothing needs clearance for it. */
:root { --ptm-bnav-height: 0px; }
.ptm-bnav { display: none !important; }

/* ---- 1. A wider canvas on big screens ("edge to edge"). */
@media (min-width: 1400px) {
  .ptm-container, .ptm-hcat .ptm-container { max-width: 1400px; }
}
@media (min-width: 1700px) {
  .ptm-container, .ptm-hcat .ptm-container { max-width: 1580px; }
}

/* ---- 2. Desktop search: the field still left room for a selector that
          V23 removed, which pushed the glyph button into the middle. */
@media (min-width: 992px) {
  .ptm-search input { width: calc(100% - 62px); }
  .ptm-search button { border-radius: 0 12px 12px 0; }
  .ptm-search button svg { display: block; width: 20px; height: 20px; margin: 0; }
}

/* ---- 3. Desktop nav: bold icon tiles instead of pale photo chips. */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger::before { content: none; }
  .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    display: block;
    position: static;
    transform: none;
    width: 46px; height: 46px;
    padding: 11px;
    box-sizing: border-box;
    border-radius: 15px;
    color: #fff;
    stroke-width: 2.4;
    background: linear-gradient(145deg, #4c7cf0 0%, #2d5bc9 45%, #14306f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .28),
                0 8px 16px rgba(6, 18, 48, .45);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .ptm-hcat .ptm-hcat__inner > a:hover > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega:hover > .ptm-mega__trigger > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger.is-active > svg:not(.ptm-mega__caret) {
    transform: translateY(-3px) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(0, 0, 0, .28),
                0 14px 24px rgba(6, 18, 48, .5), 0 0 0 3px rgba(255, 255, 255, .12);
  }
  .ptm-hcat .ptm-hcat__inner > .ptm-mega--more > .ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    background: linear-gradient(145deg, #6b7c9e, #2b3a5c);
  }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    width: 34px; height: 34px; padding: 8px; border-radius: 11px;
  }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger,
  .ptm-hcat button.ptm-mega__trigger { gap: 7px; font-weight: 700; letter-spacing: .01em; }
}

/* ---- 4. Mega panels built from the tree. */
.ptm-mega__panel--multi .ptm-mega__sections-wrap {
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 18px;
}
.ptm-mega__multi-grid--nopromo { grid-template-columns: minmax(0, 1fr); }
.ptm-mega__panel--stones { min-width: min(1180px, calc(100vw - 32px)); }
.ptm-mega__panel--rudraksha { min-width: min(1040px, calc(100vw - 32px)); }
.ptm-mega__panel--split { min-width: min(880px, calc(100vw - 32px)); }
.ptm-mega__panel--stones .ptm-mega__sec-list,
.ptm-mega__panel--rudraksha .ptm-mega__sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.ptm-mega__panel--rudraksha .ptm-mega__sec-list { grid-template-columns: 1fr; }
.ptm-mega__panel--stones .ptm-mega__sec-link,
.ptm-mega__panel--rudraksha .ptm-mega__sec-link { padding: 4px 6px; font-size: .8rem; gap: 8px; }
.ptm-mega__panel--rudraksha .ptm-mega__sec-link { font-size: .84rem; }
@media (max-width: 1300px) {
  .ptm-mega__panel--stones .ptm-mega__sec-list { grid-template-columns: 1fr; }
}
.ptm-mega__sec-head--link {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  text-decoration: none;
  transition: color .2s var(--ease);
}
.ptm-mega__sec-head--link svg { opacity: .55; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.ptm-mega__sec-head--link:hover { color: var(--ptm-primary-deep, #1E40AF); }
.ptm-mega__sec-head--link:hover svg { transform: translateX(3px); opacity: 1; }
.ptm-mega__sec-link .ptm-mega__ico--sw,
.ptm-mega__ico--sw {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sw, #dfe6f2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 -4px 6px rgba(0, 0, 0, .22), inset 0 2px 4px rgba(255, 255, 255, .6),
              0 2px 5px rgba(10, 26, 58, .18);
  color: #fff;
  font: 800 .6rem/1 var(--font-body);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  display: inline-grid; place-items: center;
  flex: none;
}
.ptm-mega__stack-sw {
  display: inline-block; width: 38px; height: 38px; border-radius: 50%;
  background: var(--sw, #dfe6f2);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .22), inset 0 2px 4px rgba(255, 255, 255, .6), 0 0 0 2px #fff;
}
.ptm-mega__stack-sw + .ptm-mega__stack-sw, img + .ptm-mega__stack-sw { margin-left: -12px; }

/* ---- 5. More panel: follow links that can actually be seen. */
.ptm-more-social__row { display: flex; gap: 12px; }
.ptm-more-social__a {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  color: #fff !important;
  background: linear-gradient(145deg, #4c7cf0, #14306f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 8px 16px rgba(10, 26, 58, .25);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-more-social__a:hover { transform: translateY(-3px); }
.ptm-more-social__a svg { width: 22px; height: 22px; fill: currentColor; }
.ptm-more-social__a--whatsapp  { background: linear-gradient(145deg, #4ee07a, #128c4a); }
.ptm-more-social__a--instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.ptm-more-social__a--facebook  { background: linear-gradient(145deg, #4a90ff, #0e4bb5); }
.ptm-more-social__a--youtube   { background: linear-gradient(145deg, #ff4a4a, #b80000); }

/* ---- 6. Phone header: menu + search | logo | account · wishlist · cart */
@media (min-width: 992px) { .ptm-hleft { display: contents; } }
@media (max-width: 991px) {
  .ptm-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    height: auto;
    min-height: 60px;
    padding: 6px 0;
  }
  .ptm-hleft { display: flex; align-items: center; gap: 0; justify-self: start; }
  .ptm-logo { justify-self: center; margin: 0; gap: 8px; }
  .ptm-header__actions { justify-self: end; gap: 0; }
  .ptm-search { grid-column: 1 / -1; }
  .ptm-msearch {
    flex: none; width: 40px; height: 40px; margin: 0; padding: 0;
    border: 0; background: transparent; border-radius: 50%;
    justify-content: center; color: var(--ptm-navy-900, #0B1E48); box-shadow: none;
  }
  .ptm-msearch span { display: none; }
  .ptm-msearch svg { color: currentColor; }
  .ptm-msearch:hover, .ptm-msearch:focus-visible { background: var(--ptm-lightest); box-shadow: none; }
  .ptm-stickytop.is-scrolled .ptm-msearch { height: 40px; }
  .ptm-header__actions .ptm-icon-btn--cart,
  .ptm-header__actions .ptm-icon-btn--wish,
  .ptm-header__actions .ptm-acct { display: inline-flex; }
  .ptm-header__actions .ptm-acct__btn { display: inline-flex; }
  .ptm-acct { position: relative; }
  .ptm-acct__menu { left: auto; right: 0; }
  .ptm-hcall { display: none !important; }
  .ptm-stickytop.is-scrolled .ptm-header__inner { height: auto; min-height: 54px; }
}
@media (max-width: 767px) { .ptm-msearch { display: inline-flex; } }
@media (max-width: 480px) {
  .ptm-logo__tag { display: none; }
  .ptm-logo__brand { font-size: 1.12rem; }
  .ptm-logo__img { width: 38px; height: 38px; }
  .ptm-hleft .ptm-icon-btn, .ptm-hleft .ptm-msearch, .ptm-header__actions .ptm-icon-btn { width: 36px; height: 36px; }
  .ptm-header__actions .ptm-icon-btn .ptm-badge { top: -2px; right: -2px; }
}

/* ---- 7. The drawer, tidied: sections with linked titles, swatch lists in
          two columns, a firmer 3D header. */
.ptm-mm__top { background: linear-gradient(135deg, var(--ptm-navy-950, #06122f), var(--ptm-primary, #2D5BC9)); color: #fff; border-radius: 0 0 22px 22px; padding-bottom: 16px; box-shadow: 0 10px 24px rgba(6, 18, 48, .25); }
.ptm-mm__top .ptm-mm__close { color: #fff; background: rgba(255, 255, 255, .14); border-radius: 50%; }
.ptm-mm__sec-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.ptm-mm__sec-links .ptm-mm__subrow { padding: 8px 6px; font-size: .84rem; }
.ptm-mm__subico--sw {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sw, #dfe6f2);
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .22), inset 0 1px 3px rgba(255, 255, 255, .55), 0 0 0 1px rgba(0, 0, 0, .06);
  color: #fff; font: 800 .56rem/1 var(--font-body); text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  display: inline-grid; place-items: center; flex: none;
}
.ptm-mm__row { border-radius: 14px; }
.ptm-mm__ico {
  width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center;
  background: linear-gradient(145deg, #4c7cf0, #14306f); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 6px 12px rgba(10, 26, 58, .22);
}
.ptm-mm__ico img { border-radius: 9px; }

/* ---- 8. Shop sidebar shows the tree. */
.ptm-filter__opt--root > span:first-of-type { font-weight: 700; }
.ptm-filter__opt--child { padding-left: 22px; }
.ptm-filter__opt--child > span:first-of-type::before { content: "– "; color: var(--ptm-soft); }

/* ---- 9. Homepage: the three find-tabs. */
.ptm-find { padding-top: 26px; }
.ptm-find__tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 0 0 24px;
}
.ptm-find__tab {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(45, 91, 201, .14);
  background: linear-gradient(160deg, #ffffff, #eef3fd);
  box-shadow: 0 12px 26px rgba(10, 26, 58, .10), inset 0 1px 0 #fff;
  color: var(--ptm-navy-900, #0B1E48);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.ptm-find__tab:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(10, 26, 58, .14), inset 0 1px 0 #fff; }
.ptm-find__tab.is-on {
  color: #fff;
  background: linear-gradient(160deg, #3b6fe0 0%, #1e3a8a 60%, #0b1e48 100%);
  border-color: transparent;
  box-shadow: 0 18px 38px rgba(30, 58, 138, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.ptm-find__tab-ico {
  width: 56px; height: 56px; border-radius: 18px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #4c7cf0, #14306f); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .28), 0 10px 18px rgba(10, 26, 58, .3);
}
.ptm-find__tab-ico svg { width: 28px; height: 28px; stroke-width: 2.2; }
.ptm-find__tab.is-on .ptm-find__tab-ico { background: linear-gradient(145deg, #ffffff, #dbe6ff); color: var(--ptm-navy-900, #0B1E48); }
.ptm-find__tab-txt { min-width: 0; }
.ptm-find__tab-txt strong { display: block; font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.18rem; font-weight: 600; line-height: 1.15; }
.ptm-find__tab-txt small { display: block; margin-top: 3px; font-size: .78rem; opacity: .78; }
.ptm-find__tab-n { margin-left: auto; flex: none; font-weight: 800; font-size: .78rem; padding: 5px 11px; border-radius: 999px; background: rgba(45, 91, 201, .10); }
.ptm-find__tab.is-on .ptm-find__tab-n { background: rgba(255, 255, 255, .18); }
.ptm-find__panel[hidden] { display: none; }
.ptm-dcard__glyph {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(145deg, #4c7cf0, #14306f); color: #fff;
  font: 800 1.35rem/1 var(--font-royal, 'Playfair Display', serif);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(0, 0, 0, .22);
}
.ptm-dcard__glyph svg { width: 30px; height: 30px; }
@media (max-width: 767px) {
  .ptm-find__tabs { gap: 8px; margin-bottom: 16px; }
  .ptm-find__tab { flex-direction: column; text-align: center; gap: 8px; padding: 12px 6px 10px; border-radius: 16px; }
  .ptm-find__tab-ico { width: 46px; height: 46px; border-radius: 14px; }
  .ptm-find__tab-ico svg { width: 24px; height: 24px; }
  .ptm-find__tab-txt strong { font-size: .92rem; }
  .ptm-find__tab-txt small { display: none; }
  .ptm-find__tab-n { margin: 0; font-size: .68rem; padding: 3px 8px; }
}

/* ---- 10. New Arrivals: two rails, one row each. */
.ptm-newin__rows { display: grid; gap: 22px; }
@media (min-width: 768px) {
  .ptm-newin .ptm-rail--car .ptm-rail__track { grid-template-rows: none; row-gap: 0; }
  .ptm-newin .ptm-rail--car .ptm-rail__track > *:nth-child(even) { scroll-snap-align: start; }
}

/* ---- 11. Rail pager as dots. */
.ptm-rail__pager { gap: 7px; }
.ptm-rail__pager button.ptm-rail__dot {
  width: 9px; height: 9px; min-width: 0; padding: 0; border: 0; border-radius: 50%;
  font-size: 0; line-height: 0;
  background: rgba(45, 91, 201, .28);
  transition: width .25s var(--ease), background .25s var(--ease);
}
.ptm-rail__pager button.ptm-rail__dot.is-on { width: 26px; border-radius: 6px; background: var(--ptm-primary); }

/* ---- 12. Footer newsletter row + back-to-top. */
.ptm-footer__news {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 14px 28px; align-items: center;
  padding: 18px 22px; margin: 4px 0 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ptm-footer__news h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.15rem; color: #fff; }
.ptm-footer__news h4 svg { color: var(--ptm-light, #93b4ff); }
.ptm-footer__news p { margin: 0; font-size: .84rem; opacity: .78; }
.ptm-footer__news-form { display: flex; flex-wrap: wrap; gap: 8px; }
.ptm-footer__news-form input {
  flex: 1 1 180px; height: 46px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit;
}
.ptm-footer__news-form input::placeholder { color: rgba(255, 255, 255, .5); }
.ptm-footer__news-form .ptm-btn { height: 46px; padding: 0 20px; }
.ptm-footer__news-form .ptm-form-status { flex-basis: 100%; margin: 0; font-size: .8rem; }
.ptm-footer__news-form .ptm-form-status:empty { display: none; }
@media (max-width: 767px) { .ptm-footer__news { grid-template-columns: 1fr; padding: 16px; } }

.ptm-totop {
  position: fixed; left: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 79;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, #4c7cf0, #14306f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 10px 22px rgba(10, 26, 58, .35);
  cursor: pointer;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.ptm-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ptm-totop:hover { transform: translateY(-3px); }
@media (max-width: 767px) {
  .ptm-totop { left: 12px; bottom: calc(var(--ptm-atcbar-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
}

/* ---- 13. Product page. */
.ptm-spp__title {
  font-family: var(--font-royal, 'Playfair Display', serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.72rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ptm-navy-900, #0B1E48);
}
.ptm-spp__grate {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 2px 8px rgba(10, 26, 58, .06);
  font-size: .86rem; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-spp__grate-g { flex: none; }
.ptm-spp__grate b { font-weight: 800; }
.ptm-spp__grate .s { color: #f5a524; letter-spacing: -1px; font-size: .9rem; }
.ptm-spp__grate i { font-style: normal; color: var(--ptm-soft); }
.ptm-vcard__chips--weight { flex-wrap: wrap; }
.ptm-vcard__chips--weight .ptm-vcard__chip { white-space: nowrap; flex: 0 0 auto; max-width: 100%; }
.ptm-btn-buynow { flex-wrap: wrap; }
.ptm-buy__pay { display: inline-flex; gap: 4px; margin-left: 8px; }
.ptm-buy__pay i {
  font: 800 .58rem/1 var(--font-body); font-style: normal; letter-spacing: .01em;
  padding: 4px 6px; border-radius: 6px; background: #fff;
}
.ptm-buy__pay i.pp  { color: #5f259f; }
.ptm-buy__pay i.pt  { color: #00baf2; }
.ptm-buy__pay i.upi { color: #1c1c1c; }
@media (max-width: 420px) { .ptm-buy__pay i.upi { display: none; } }
.ptm-brx__specs h3 { margin-bottom: 12px; }
.ptm-brx__specs-wrap { overflow-x: auto; border: 1px solid var(--ptm-border); border-radius: 14px; }
.ptm-brx__specs table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ptm-brx__specs th, .ptm-brx__specs td { padding: 10px 14px; text-align: left; vertical-align: top; }
.ptm-brx__specs th { width: 36%; font-weight: 600; color: var(--ptm-soft); background: var(--ptm-bg, #f5f7fb); white-space: nowrap; }
.ptm-brx__specs tr + tr th, .ptm-brx__specs tr + tr td { border-top: 1px solid var(--ptm-border); }
@media (max-width: 767px) {
  .ptm-brx__specs th { width: 42%; white-space: normal; }
  .ptm-brx__excel-body.is-clamped { max-height: 230px; overflow: hidden; position: relative; }
  .ptm-brx__excel-body.is-clamped::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
  }
}
.ptm-brx__readmore {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 9px 16px; border-radius: 999px;
  border: 1.5px solid var(--ptm-primary); color: var(--ptm-primary-deep, #1E40AF);
  background: #fff; font: 700 .84rem/1 var(--font-body); cursor: pointer;
}
.ptm-brx__readmore[hidden] { display: none; }
.ptm-sheet { position: fixed; inset: 0; z-index: 130; display: none; }
.ptm-sheet.is-open { display: block; }
.ptm-sheet__bg { position: absolute; inset: 0; background: rgba(6, 18, 48, .55); backdrop-filter: blur(2px); }
.ptm-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 24px 24px 0 0;
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -14px 40px rgba(6, 18, 48, .35);
  animation: ptm-sheet-up .28s var(--ease);
}
@keyframes ptm-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ptm-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ptm-sheet__head h3 { margin: 0; font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.2rem; }
.ptm-sheet__x { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ptm-bg, #f5f7fb); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ptm-sheet__body { font-size: .94rem; line-height: 1.65; }
.ptm-sheet__body .ptm-brx__excel-list { margin-top: 12px; }

/* ---- 14. Checkout declaration. */
.ptm-declare {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: 12px; background: var(--ptm-bg, #f5f7fb); border: 1px solid var(--ptm-border);
  font-size: .8rem; line-height: 1.5; color: var(--ptm-mid);
}
.ptm-declare input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--ptm-primary); }
.ptm-declare a { color: var(--ptm-primary-deep, #1E40AF); text-decoration: underline; }

/* ---- 15. "Why you should choose us" head. */
.ptm-assure__head .eyebrow { display: block; margin-bottom: 6px; }

/* ---- V27b. Pay-with caption under the buy row; wishlist glyph on phones. */
.ptm-spp__paywith {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px 0 0; font-size: .74rem; color: var(--ptm-soft);
}
.ptm-spp__paywith i {
  font: 800 .66rem/1 var(--font-body); font-style: normal; letter-spacing: .01em;
  padding: 5px 8px; border-radius: 7px; background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 1px 3px rgba(10, 26, 58, .06);
}
.ptm-spp__paywith i.pp  { color: #5f259f; }
.ptm-spp__paywith i.pt  { color: #00baf2; }
.ptm-spp__paywith i.gp  { color: #1a73e8; }
.ptm-spp__paywith i.upi { color: #1c1c1c; }
@media (max-width: 991px) {
  .ptm-header .ptm-header__actions a.ptm-icon-btn--wish { display: inline-flex !important; }
}

/* ---- V27c. Stones panel tags, Instagram glyph, drawer title. */
.ptm-mega__panel--stones .ptm-mega__tag { display: none; }
.ptm-more-social__a--instagram svg { fill: none; stroke: currentColor; stroke-width: 2; }
.ptm-mm__top > *:not(.ptm-mm__close) { color: #fff; }

/* ---- V27d. A short find-row sits still and centred inside a moving pair;
        phone product title one step smaller. */
.ptm-dual--auto .ptm-dual__row--static .ptm-dual__track,
html.ptm-force-motion .ptm-dual--auto .ptm-dual__row--static .ptm-dual__track {
  animation: none !important;
  animation-name: none !important;
  width: auto;
  justify-content: center;
  flex-wrap: wrap;
  transform: none;
}
@media (max-width: 767px) {
  .ptm-dual--auto .ptm-dual__row--static .ptm-dual__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
  .ptm-spp__info .ptm-spp__title { font-size: 1.18rem; line-height: 1.32; }
}

/* =====================================================================
   V27.1 — owner's follow-up (2026-09-03, evening)
   Nav icons as clean line glyphs (no 3D tiles), PDP gallery a size smaller,
   description block compact and reordered.
   ===================================================================== */

/* ---- 1. Desktop rail: Tanishq-style — a fine line icon beside the label. */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega--more > .ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    width: 26px; height: 26px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--ptm-navy-900, #0B1E48);
    stroke-width: 1.7;
    filter: none;
    transition: color .2s var(--ease), transform .2s var(--ease);
  }
  .ptm-hcat .ptm-hcat__inner > a:hover > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega:hover > .ptm-mega__trigger > svg:not(.ptm-mega__caret),
  .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger.is-active > svg:not(.ptm-mega__caret) {
    transform: translateY(-1px);
    box-shadow: none;
    color: var(--ptm-primary, #2D5BC9);
  }
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > a > svg:not(.ptm-mega__caret),
  .ptm-stickytop.is-scrolled .ptm-hcat .ptm-hcat__inner > .ptm-mega > .ptm-mega__trigger > svg:not(.ptm-mega__caret) {
    width: 22px; height: 22px; padding: 0; border-radius: 0;
  }
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger,
  .ptm-hcat button.ptm-mega__trigger {
    flex-direction: row;
    gap: 9px;
    padding: 10px 14px;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ptm-navy-900, #0B1E48);
  }
  .ptm-hcat .ptm-hcat__inner > a:hover,
  .ptm-hcat .ptm-mega:hover > .ptm-mega__trigger,
  .ptm-hcat .ptm-mega__trigger.is-active { color: var(--ptm-primary, #2D5BC9); }
  .ptm-hcat .ptm-hcat__inner { min-height: 56px; }
}

/* ---- 2. PDP: the gallery column a size smaller; the info column gets the room. */
@media (min-width: 992px) {
  .ptm-spp__layout { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 40px; }
}
@media (min-width: 1280px) {
  .ptm-spp__layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 48px; }
}

/* ---- 3. Description card: compact prose, two-column bullet list. */
.ptm-brx__excel { padding: 22px 24px; }
.ptm-brx__excel h3 { font-size: 1.2rem; text-align: left; margin: 0 0 10px; }
.ptm-brx__excel-in { display: block; }
.ptm-brx__excel-body { font-size: .95rem; line-height: 1.65; }
.ptm-brx__prose p { margin: 0 0 10px; }
.ptm-brx__prose p:last-child { margin-bottom: 0; }
.ptm-brx__excel-list { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: .9rem; }
.ptm-brx__excel-list li { margin: 0; }
@media (max-width: 767px) { .ptm-brx__excel-list { grid-template-columns: 1fr; } .ptm-brx__excel { padding: 18px 16px; } }
.ptm-brx__specs { margin-top: 18px; }
.ptm-brx__social { margin-top: 26px; }

/* ---- 4. Desktop search, contained: glyph inside on the left, the field,
        and a small round submit INSIDE the pill. Three earlier blocks left
        floats and a hidden glyph behind; every property is set here. */
@media (min-width: 992px) {
  .ptm-header .ptm-search {
    display: flex; align-items: center; gap: 10px;
    float: none; position: relative; overflow: hidden;
    max-width: 640px; width: 100%; height: 50px;
    padding: 0 5px 0 18px;
    border: 1px solid rgba(15, 36, 86, .18); border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 26, 58, .04);
  }
  .ptm-header .ptm-search:focus-within { border-color: var(--ptm-primary); box-shadow: 0 0 0 3px rgba(45, 91, 201, .12); transform: none; }
  .ptm-header .ptm-search > svg { display: block; flex: none; width: 19px; height: 19px; color: var(--ptm-soft); position: static; }
  .ptm-header .ptm-search input[type="search"] {
    float: none; flex: 1 1 auto; width: auto; min-width: 0; height: 46px;
    margin: 0; padding: 0 8px 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    font-size: .95rem; color: var(--ptm-navy-900, #0B1E48);
  }
  .ptm-header .ptm-search input[type="search"]:focus { outline: none; }
  .ptm-header .ptm-search button[type="submit"] {
    float: none; flex: none; position: static;
    width: 40px; height: 40px; margin: 0; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 999px;
    background: var(--ptm-navy-900, #0B1E48); color: #fff;
    box-shadow: none; transform: none;
    transition: background .2s var(--ease);
  }
  .ptm-header .ptm-search button[type="submit"]:hover { background: var(--ptm-primary, #2D5BC9); transform: none; box-shadow: none; }
  .ptm-header .ptm-search button[type="submit"] svg { display: block !important; width: 18px; height: 18px; margin: 0; position: static; }
  .ptm-header .ptm-search::after { content: none; }
}

/* ---- 5. Description card: left-aligned, full width (the V17 card centred a
        104px glyph beside the copy; the glyph is gone, the centring follows). */
.ptm-brx .ptm-brx__excel { display: block; align-items: stretch; }
.ptm-brx .ptm-brx__excel h3 { text-align: left; }
.ptm-brx .ptm-brx__excel-in { display: block; max-width: none; width: 100%; margin: 0; }
.ptm-brx .ptm-brx__excel-body { max-width: none; margin: 0; }
.ptm-brx .ptm-brx__prose p { max-width: none; }

/* =====================================================================
   V27.2 — desktop search, rebuilt from scratch (owner: "बिल्कुल पसंद नहीं आया")
   A quiet field: soft grey pill, magnifier on the left, the query, a thin
   divider and a plain "Search" text button. No coloured circle, no shadow
   until it is focused. Every property is set so nothing older leaks in.
   ===================================================================== */
.ptm-search__lbl { display: none; }
@media (min-width: 992px) {
  .ptm-header .ptm-search {
    display: flex; align-items: center; gap: 0;
    float: none; position: relative; overflow: hidden;
    max-width: 680px; width: 100%; height: 48px;
    padding: 0 0 0 18px;
    border: 1px solid #E1E7F2; border-radius: 999px;
    background: #F4F6FB;
    box-shadow: none; transform: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .ptm-header .ptm-search:hover { border-color: #CBD6EA; }
  .ptm-header .ptm-search:focus-within {
    background: #fff; border-color: var(--ptm-primary, #2D5BC9);
    box-shadow: 0 0 0 4px rgba(45, 91, 201, .10), 0 8px 24px -14px rgba(10, 26, 58, .35);
    transform: none;
  }
  .ptm-header .ptm-search > svg { display: block; flex: none; width: 18px; height: 18px; color: #6B7A99; position: static; margin-right: 10px; }
  .ptm-header .ptm-search:focus-within > svg { color: var(--ptm-primary, #2D5BC9); }
  .ptm-header .ptm-search input[type="search"] {
    float: none; flex: 1 1 auto; width: auto; min-width: 0; height: 46px;
    margin: 0; padding: 0 12px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    font-size: .94rem; color: var(--ptm-navy-900, #0B1E48);
  }
  .ptm-header .ptm-search input[type="search"]::placeholder { color: #8A96B0; }
  .ptm-header .ptm-search input[type="search"]:focus { outline: none; }
  .ptm-header .ptm-search button[type="submit"] {
    float: none; flex: none; position: static;
    display: inline-flex; align-items: center; gap: 0;
    height: 46px; width: auto; margin: 0; padding: 0 20px 0 18px;
    border: 0; border-left: 1px solid #E1E7F2; border-radius: 0;
    background: transparent; color: var(--ptm-navy-900, #0B1E48);
    font: 700 .84rem/1 var(--font-body); letter-spacing: .02em;
    box-shadow: none; transform: none; cursor: pointer;
    transition: color .2s var(--ease), background .2s var(--ease);
  }
  .ptm-header .ptm-search button[type="submit"]:hover { color: var(--ptm-primary, #2D5BC9); background: rgba(45, 91, 201, .06); transform: none; box-shadow: none; }
  .ptm-header .ptm-search button[type="submit"] > svg { display: none !important; }
  .ptm-header .ptm-search button[type="submit"] .ptm-search__lbl { display: inline; }
  .ptm-header .ptm-search::after { content: none; }
}

/* ---- V28. Rings / Pendants panels: the stone list runs two columns now
        that eighteen stones are in stock. */
.ptm-mega__panel--split { min-width: min(1040px, calc(100vw - 32px)); }
.ptm-mega__panel--split .ptm-mega__sec:last-child .ptm-mega__sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.ptm-mega__panel--split .ptm-mega__sec:last-child .ptm-mega__sec-link { padding: 5px 6px; font-size: .82rem; gap: 8px; }

/* =====================================================================
   V28.1 — owner's phone follow-up (2026-09-04)
   ===================================================================== */

/* ---- 1. Phone rail: More is gone, six extra tiles fill the row. */
.ptm-hcat__xtile { display: none; }
@media (max-width: 991px) {
  .ptm-hcat .ptm-mega--more { display: none !important; }
  .ptm-hcat .ptm-hcat__inner > a.ptm-hcat__xtile { display: flex; }
}

/* ---- 2. Sticky Add-to-cart bar sits ON the bottom edge (the bottom nav it
        used to clear no longer exists). */
@media (max-width: 991px) {
  .ptm-atcbar { bottom: env(safe-area-inset-bottom, 0px); }
  body.ptm-atcbar-on { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ptm-atcbar-h, 72px) + 16px); }
}

/* ---- 3. Ring size on a phone: a select-like row → bottom sheet. */
.ptm-optpick__btn { display: none; }
@media (max-width: 767px) {
  .ptm-optpick[data-ptm-optsheet] .ptm-optpick__chips { display: none; }
  .ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 14px;
    border: 1.5px solid var(--ptm-border); border-radius: 12px;
    background: #fff; color: var(--ptm-navy-900, #0B1E48);
    font: 600 .92rem/1 var(--font-body); text-align: left; cursor: pointer;
    box-shadow: 0 1px 3px rgba(10, 26, 58, .05);
  }
  .ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn small { margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--ptm-soft); }
  .ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn svg { flex: none; color: var(--ptm-primary); }
  .ptm-optpick.is-missing[data-ptm-optsheet] .ptm-optpick__btn { border-color: var(--ptm-rose, #c0152f); box-shadow: 0 0 0 3px rgba(192, 21, 47, .12); }
  .ptm-optpick[data-ptm-optsheet] .ptm-optpick__chosen { display: none; }
}
.ptm-sheet--opt .ptm-sheet__body .ptm-optpick__chips {
  display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  max-height: 52vh; overflow: auto; padding: 4px 2px 8px;
}
.ptm-sheet--opt .ptm-optpick__chip { min-height: 44px; min-width: 0; width: 100%; padding: 0; font-size: .9rem; }
.ptm-sheet__done { width: 100%; margin-top: 12px; }

/* ---- 4. Stone-weight chips on a phone: two columns, never clipped. */
@media (max-width: 900px) {
  .ptm-vcard__chips--weight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptm-vcard__chips--weight .ptm-vcard__chip { white-space: nowrap; font-size: .82rem; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- 5. Desktop search glyph: room to breathe. */
@media (min-width: 992px) {
  .ptm-header .ptm-search { padding-left: 22px; }
  .ptm-header .ptm-search > svg { margin-right: 12px; width: 19px; height: 19px; color: #4B5A7A; }
  .ptm-header .ptm-search input[type="search"] { padding-left: 0; }
}

/* =====================================================================
   V28.2 — owner's second pass (2026-09-04)
   ===================================================================== */

/* ---- 1. Extra tiles are PHONE ONLY; desktop stops at More. */
@media (min-width: 992px) {
  .ptm-hcat .ptm-hcat__inner > a.ptm-hcat__xtile { display: none !important; }
}

/* ---- 2. Search glyph: an old translateY(-50%) was still lifting it. */
@media (min-width: 992px) {
  .ptm-header .ptm-search > svg { transform: none !important; top: auto; align-self: center; }
}

/* ---- 3. Instagram in the More panel: a proper outline glyph. */
.ptm-more-social__a--instagram svg * { fill: none !important; stroke: #fff !important; stroke-width: 2 !important; }
.ptm-more-social__a--instagram svg circle[r="1.2"] { fill: #fff !important; stroke: none !important; }

/* ---- 4. PDP "Keep looking": three tiles a row on phones. */
@media (max-width: 767px) {
  .ptm-shoprail__row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; }
  .ptm-shoprail__tile { width: auto; min-width: 0; padding: 14px 6px 12px; }
  .ptm-shoprail__name { font-size: .78rem; }
}

/* ---- 5. The phone drawer: quiet header, the same grey search pill as desktop. */
.ptm-mm__top {
  background: #fff !important; color: var(--ptm-navy-900, #0B1E48);
  border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--ptm-border);
  padding: 14px 16px !important;
}
.ptm-mm__top > *:not(.ptm-mm__close) { color: var(--ptm-navy-900, #0B1E48); font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.25rem; font-weight: 600; }
.ptm-mm__top .ptm-mm__close { color: var(--ptm-navy-900, #0B1E48); background: var(--ptm-bg, #F4F6FB); border-radius: 50%; width: 38px; height: 38px; }
.ptm-mm__search {
  margin: 12px 14px 12px; padding: 0 6px 0 14px; height: 46px;
  background: #F4F6FB; border: 1px solid #E1E7F2; border-radius: 999px;
}
.ptm-mm__search svg { color: #4B5A7A; }
.ptm-mm__search input { height: 44px; font-size: .92rem; background: transparent; }
.ptm-mm__search button[type="submit"] {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ptm-navy-900, #0B1E48);
  display: grid; place-items: center; box-shadow: none;
}
.ptm-mm__search button[type="submit"] svg { color: currentColor; }
.ptm-mm__promo { margin: 4px 14px 14px; }

/* ---- 6. Sticky Add-to-cart bar, richer (reference layout). */
.ptm-atcbar { padding: 8px 14px calc(6px + env(safe-area-inset-bottom, 0px)); }
.ptm-atcbar__inner { max-width: 1280px; gap: 14px; }
.ptm-atcbar__thumb { width: 54px; height: 54px; border-radius: 12px; border: 1px solid var(--ptm-border); position: relative; }
.ptm-atcbar__meta strong { display: flex; align-items: center; gap: 8px; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptm-atcbar__stock {
  flex: none; font: 700 .62rem/1 var(--font-body); font-style: normal; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 6px; color: #0f7a3d; background: #e6f6ec; border: 1px solid #bfe7cd;
}
.ptm-atcbar__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptm-atcbar__line b { font-size: 1.05rem; }
.ptm-atcbar__off { font: 700 .66rem/1 var(--font-body); font-style: normal; padding: 4px 7px; border-radius: 6px; color: #a11235; background: #fde8ee; }
.ptm-atcbar__note { font-size: .74rem; color: var(--ptm-soft); }
.ptm-atcbar__note::before { content: "•"; margin-right: 8px; color: var(--ptm-border); }
.ptm-atcbar__qty {
  flex: none; display: inline-flex; align-items: center;
  height: 44px; border: 1px solid var(--ptm-border); border-radius: 12px; background: #fff; overflow: hidden;
}
.ptm-atcbar__qty button { width: 36px; height: 44px; border: 0; background: transparent; font-size: 1.1rem; color: var(--ptm-navy-900, #0B1E48); cursor: pointer; }
.ptm-atcbar__qty button:hover { background: var(--ptm-bg, #F4F6FB); }
.ptm-atcbar__qty b { min-width: 28px; text-align: center; font-size: .95rem; }
.ptm-atcbar__btns { display: flex; gap: 10px; flex: none; }
.ptm-atcbar .ptm-btn { height: 44px; padding-inline: 20px; }
.ptm-atcbar__trust {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  max-width: 1280px; margin: 6px auto 0; padding-top: 6px;
  border-top: 1px dashed var(--ptm-border);
  font-size: .74rem; color: var(--ptm-soft);
}
.ptm-atcbar__trust span { display: inline-flex; align-items: center; gap: 5px; }
.ptm-atcbar__trust svg { color: var(--ptm-primary); }
@media (max-width: 767px) {
  .ptm-atcbar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ptm-atcbar__inner { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "thumb meta" "qty btns"; gap: 8px 10px; align-items: center; }
  .ptm-atcbar__thumb { grid-area: thumb; width: 48px; height: 48px; }
  .ptm-atcbar__meta { grid-area: meta; }
  .ptm-atcbar__meta strong { font-size: .84rem; }
  .ptm-atcbar__note { display: none; }
  .ptm-atcbar__qty { grid-area: qty; height: 42px; justify-self: start; }
  .ptm-atcbar__qty button { width: 32px; height: 42px; }
  .ptm-atcbar__btns { grid-area: btns; display: flex !important; gap: 8px; }
  .ptm-atcbar__btns .ptm-btn { flex: 1 1 0; height: 42px; padding-inline: 10px; font-size: .84rem; white-space: nowrap; }
  .ptm-atcbar .ptm-atcbar__buy { display: inline-flex !important; }
  .ptm-atcbar__trust { gap: 12px; font-size: .68rem; margin-top: 8px; padding-top: 6px; }
}

/* ---- V28.2b. Phone sticky bar: two clean rows (thumb + meta / qty + buttons). */
@media (max-width: 767px) {
  .ptm-atcbar__inner { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
  .ptm-atcbar__thumb { flex: none; order: 1; }
  .ptm-atcbar__meta { flex: 1 1 0; min-width: 0; order: 2; }
  .ptm-atcbar__meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ptm-atcbar__stock { display: none; }
  .ptm-atcbar__qty { order: 3; flex: 0 0 auto; height: 42px; }
  .ptm-atcbar__qty button { width: 34px; }
  .ptm-atcbar__qty b { min-width: 24px; }
  .ptm-atcbar__btns { order: 4; flex: 1 1 0; min-width: 0; }
  .ptm-atcbar__trust span:nth-child(2) { display: none; }
}
@media (max-width: 767px) {
  /* V28.2c — the basis values are what make the second row wrap. */
  .ptm-atcbar__meta { flex: 1 1 240px; }
  .ptm-atcbar__qty { flex: 0 0 116px; }
  .ptm-atcbar__btns { flex: 1 1 180px; }
  .ptm-atcbar__line { gap: 6px; }
  .ptm-atcbar__line b { font-size: 1rem; }
}

/* =====================================================================
   V29 — CHECKOUT, rebuilt on the layout the owner supplied (2026-09-04)
   Stepped header, three numbered blocks, and a sticky summary carrying the
   items, the offers and one Place Order button showing the exact amount.
   Sapphire, not the reference's green: green stays on savings and ticks.
   ===================================================================== */
.ptm-co { padding: 26px 20px 60px; max-width: 1240px; }

/* ---- header + stepper */
.ptm-co__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: 22px; }
.ptm-co__head h1 {
  margin: 0; font-family: var(--font-royal, 'Playfair Display', Georgia, serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 600; letter-spacing: -.01em;
  color: var(--ptm-navy-900, #0B1E48);
}
.ptm-co__steps { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ptm-co__steps li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--ptm-soft);
}
.ptm-co__steps li + li::before {
  content: ""; width: 26px; height: 1px; margin-right: 4px; background: var(--ptm-border);
}
.ptm-co__steps span {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ptm-bg, #F4F6FB); color: var(--ptm-soft);
  font-size: .72rem; font-weight: 800; border: 1px solid var(--ptm-border);
}
.ptm-co__steps li.is-on { color: var(--ptm-navy-900, #0B1E48); }
.ptm-co__steps li.is-on span { background: var(--ptm-primary, #2D5BC9); border-color: transparent; color: #fff; }

.ptm-co__error {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px; padding: 13px 16px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FECACA; color: #9B1C1C;
  font-size: .9rem; font-weight: 500;
}
.ptm-co__error svg { flex: none; margin-top: 1px; }

/* ---- the two columns */
.ptm-co__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 992px) {
  .ptm-co__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
}
.ptm-co__main { display: grid; gap: 16px; min-width: 0; }

/* ---- a numbered block */
.ptm-co__sec {
  padding: 22px; border-radius: 18px; background: #fff;
  border: 1px solid var(--ptm-border);
  box-shadow: 0 1px 2px rgba(10, 26, 58, .04), 0 12px 30px -22px rgba(10, 26, 58, .5);
}
.ptm-co__sec h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-body); font-size: .84rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-co__num {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(145deg, #4c7cf0, #14306f); color: #fff;
  font-size: .78rem; font-weight: 800; letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(10, 26, 58, .22);
}

/* ---- fields */
.ptm-co__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ptm-co__row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .ptm-co__row, .ptm-co__row--3 { grid-template-columns: 1fr; }
}
.ptm-co__field { display: block; margin-bottom: 14px; min-width: 0; }
.ptm-co__lbl {
  display: block; margin-bottom: 6px;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ptm-soft);
}
.ptm-co__lbl i { font-style: normal; color: #D92D20; }
.ptm-co__lbl em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.ptm-co__field input,
.ptm-co__field select {
  width: 100%; height: 46px; padding: 0 14px; box-sizing: border-box;
  border: 1.5px solid var(--ptm-border); border-radius: 11px;
  background: #fff; color: var(--ptm-navy-900, #0B1E48);
  font: 500 .94rem/1 var(--font-body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-co__field select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.ptm-co__field input::placeholder { color: #9AA6BF; font-weight: 400; }
.ptm-co__field input:focus,
.ptm-co__field select:focus {
  outline: none; border-color: var(--ptm-primary, #2D5BC9);
  box-shadow: 0 0 0 3.5px rgba(45, 91, 201, .12);
}
/* +91 riding inside the field */
.ptm-co__phone { display: flex; align-items: stretch; }
.ptm-co__phone b {
  display: grid; place-items: center; flex: none; width: 54px; height: 46px; box-sizing: border-box;
  border: 1.5px solid var(--ptm-border); border-right: 0; border-radius: 11px 0 0 11px;
  background: var(--ptm-bg, #F4F6FB); color: var(--ptm-soft); font-size: .9rem; font-weight: 700;
}
.ptm-co__phone input { border-radius: 0 11px 11px 0; }
/* the PIN's green tick */
.ptm-co__pin { position: relative; display: block; }
.ptm-co__pin input.is-ok { border-color: #2F9E5E; padding-right: 40px; }
.ptm-co__tick {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #E7F6EE; color: #17794A;
}
.ptm-co__deliv {
  display: flex; align-items: center; gap: 7px;
  margin: -4px 0 14px; padding: 9px 12px; border-radius: 10px;
  background: #EEF9F2; border: 1px solid #CDEBDA; color: #17794A;
  font-size: .84rem; font-weight: 600;
}
.ptm-co__deliv svg { flex: none; }
.ptm-co__hint {
  display: flex; align-items: center; gap: 7px; margin: 4px 0 0;
  font-size: .8rem; color: var(--ptm-soft); line-height: 1.55;
}
.ptm-co__hint svg { flex: none; color: var(--ptm-primary); }
.ptm-co__check { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; font-size: .86rem; color: var(--ptm-mid); cursor: pointer; }
.ptm-co__check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ptm-primary); }

/* ---- payment cards */
.ptm-co__pay {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 10px; padding: 15px; border-radius: 13px;
  border: 1.5px solid var(--ptm-border); background: #fff; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-co__pay:hover { border-color: #C6D4EE; }
.ptm-co__pay.is-on {
  border-color: var(--ptm-primary, #2D5BC9); background: #F7FAFF;
  box-shadow: 0 0 0 3px rgba(45, 91, 201, .10);
}
.ptm-co__pay > input { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--ptm-primary); }
.ptm-co__pay-body { flex: 1 1 auto; min-width: 0; display: block; }
.ptm-co__pay-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptm-co__pay-top b { font-size: .95rem; color: var(--ptm-navy-900, #0B1E48); }
.ptm-co__tag {
  font: 800 .58rem/1 var(--font-body); font-style: normal; letter-spacing: .06em;
  padding: 4px 7px; border-radius: 5px; color: #17794A; background: #E7F6EE;
}
.ptm-co__tag--amber { color: #92610C; background: #FDF3DC; }
.ptm-co__pay-body small { display: block; margin-top: 3px; font-size: .83rem; color: var(--ptm-mid); line-height: 1.5; }
.ptm-co__pay-due { color: var(--ptm-primary-deep, #1E40AF) !important; font-weight: 600; }
.ptm-co__pay-marks { display: flex; gap: 5px; flex: none; align-self: center; }
.ptm-co__pay-marks i {
  font: 800 .58rem/1 var(--font-body); font-style: normal;
  padding: 5px 6px; border-radius: 5px; border: 1px solid var(--ptm-border); background: #fff;
}
.ptm-co__pay-marks i.upi { color: #1c1c1c; }
.ptm-co__pay-marks i.pp { color: #5f259f; }
.ptm-co__pay-marks i.pt { color: #00baf2; }
@media (max-width: 520px) { .ptm-co__pay-marks { display: none; } }

/* ---- the summary */
.ptm-co__side { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 992px) { .ptm-co__side { position: sticky; top: calc(var(--ptm-topbar-h, 175px) + 16px); } }
.ptm-co__card {
  padding: 20px; border-radius: 18px; background: #fff;
  border: 1px solid var(--ptm-border);
  box-shadow: 0 1px 2px rgba(10, 26, 58, .04), 0 16px 34px -24px rgba(10, 26, 58, .55);
}
.ptm-co__card-h {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-co__card-h em { font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ptm-soft); }
.ptm-co__items { display: grid; gap: 12px; max-height: 320px; overflow: auto; padding-right: 2px; }
.ptm-co__item { display: flex; align-items: center; gap: 11px; }
.ptm-co__item-img { position: relative; flex: none; width: 48px; height: 48px; }
.ptm-co__item-img img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ptm-border); background: #fff; }
.ptm-co__item-img b {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--ptm-navy-900, #0B1E48); color: #fff; font-size: .66rem; font-weight: 800;
  border: 2px solid #fff;
}
.ptm-co__item-txt { flex: 1 1 auto; min-width: 0; }
.ptm-co__item-txt strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--ptm-navy-900, #0B1E48); }
.ptm-co__item-txt small { display: block; margin-top: 2px; font-size: .75rem; color: var(--ptm-soft); }
.ptm-co__item-amt { flex: none; font-size: .88rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48); }

.ptm-co__lines { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ptm-border); display: grid; gap: 10px; }
.ptm-co__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .87rem; color: var(--ptm-mid); }
.ptm-co__line em { font-style: normal; color: var(--ptm-soft); }
.ptm-co__line > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.ptm-co__line.is-good { color: #17794A; font-weight: 600; }
.ptm-co__line .is-free { color: #17794A; font-weight: 700; }
.ptm-co__total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ptm-border);
  font-size: .95rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-co__total b { font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.5rem; font-weight: 600; }
.ptm-co__place {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; margin-top: 14px; padding: 0 18px;
  border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(145deg, #3b6fe0, #1e3a8a 60%, #14306f); color: #fff;
  font: 700 .98rem/1 var(--font-body); letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 24px -12px rgba(30, 58, 138, .8);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-co__place:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 30px -14px rgba(30, 58, 138, .85); }
.ptm-co__place:active { transform: none; }
.ptm-co__place b { font-weight: 800; }
.ptm-co__place svg { flex: none; opacity: .9; }
.ptm-co__trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--ptm-border); list-style: none;
}
.ptm-co__trust li { text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ptm-soft); line-height: 1.35; }
.ptm-co__trust span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%; background: var(--ptm-bg, #F4F6FB); color: var(--ptm-primary); }

/* ---- offers */
.ptm-co__offers ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ptm-co__offers li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 11px;
  background: var(--ptm-bg, #F4F6FB); border: 1px solid var(--ptm-border);
  font-size: .83rem; color: var(--ptm-mid);
}
.ptm-co__offers li > svg { flex: none; color: #9AA6BF; }
.ptm-co__offers li.is-on { background: #EEF9F2; border-color: #CDEBDA; color: #17794A; font-weight: 600; }
.ptm-co__offers li.is-on > svg { color: #17794A; }
.ptm-co__offers li span { flex: 1 1 auto; min-width: 0; }
.ptm-co__offers li em { font-style: normal; color: var(--ptm-soft); }
.ptm-co__offers li b {
  flex: none; font: 800 .68rem/1 var(--font-body); letter-spacing: .04em;
  padding: 5px 7px; border-radius: 6px; background: #fff; border: 1px dashed var(--ptm-border);
  color: var(--ptm-navy-900, #0B1E48);
}
.ptm-co__editcart { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600; color: var(--ptm-primary-deep, #1E40AF); }

/* ---- the declaration, inside the summary card */
.ptm-co__card .ptm-declare { margin-top: 14px; font-size: .76rem; }

/* ---- phone: the total follows you down */
.ptm-cobar { display: none; }
@media (max-width: 991px) {
  .ptm-cobar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 86;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ptm-border);
    box-shadow: 0 -8px 26px rgba(9, 18, 40, .12);
    transform: translateY(110%); visibility: hidden;
    transition: transform .28s var(--ease), visibility .28s;
  }
  .ptm-cobar.is-on { transform: none; visibility: visible; }
  .ptm-cobar__amt { flex: none; display: grid; gap: 2px; }
  .ptm-cobar__amt small { font-size: .68rem; color: var(--ptm-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
  .ptm-cobar__amt b { font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.2rem; color: var(--ptm-navy-900, #0B1E48); }
  .ptm-cobar__go {
    flex: 1 1 auto; min-height: 46px; border: 0; border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(145deg, #3b6fe0, #1e3a8a 60%, #14306f); color: #fff;
    font: 700 .95rem/1 var(--font-body);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 20px -12px rgba(30, 58, 138, .8);
  }
  body.ptm-checkout-page { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .ptm-co { padding: 18px 14px 30px; }
  .ptm-co__head { gap: 10px 16px; margin-bottom: 16px; }
  .ptm-co__steps { width: 100%; justify-content: space-between; }
  .ptm-co__steps li { flex: 0 1 auto; }
  .ptm-co__steps li + li::before { flex: 1 1 auto; min-width: 14px; width: auto; }
  .ptm-co__sec, .ptm-co__card { padding: 16px; border-radius: 15px; }
  .ptm-co__items { max-height: none; }
  .ptm-co__total b { font-size: 1.35rem; }
}

/* ---- V29a. `hidden` must beat the layout `display` these two carry, or an
        empty PIN shows a green tick and an empty delivery banner. */
.ptm-co__tick[hidden], .ptm-co__deliv[hidden] { display: none !important; }

/* =====================================================================
   V30 — the owner's 2026-09-04 brief (product page, nav, homepage)
   ===================================================================== */

/* ---- 1. PDP uses the full desktop width he asked for. */
@media (min-width: 1280px) {
  .ptm-product-page .ptm-container { max-width: 1560px; }
  .ptm-spp__layout { max-width: none; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 1700px) {
  .ptm-product-page .ptm-container { max-width: 1680px; }
}

/* ---- 2. Sticky buy bar: slimmer, now that the trust line is gone. */
.ptm-atcbar { padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)); }
.ptm-atcbar__inner { gap: 12px; }
.ptm-atcbar__thumb { width: 44px; height: 44px; border-radius: 10px; }
.ptm-atcbar__meta strong { font-size: .86rem; }
.ptm-atcbar__line b { font-size: .98rem; }
.ptm-atcbar__qty { height: 38px; }
.ptm-atcbar__qty button { height: 38px; width: 32px; }
.ptm-atcbar .ptm-btn { height: 38px; padding-inline: 18px; font-size: .88rem; }
@media (max-width: 767px) {
  .ptm-atcbar { padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .ptm-atcbar__inner { gap: 6px 10px; }
  .ptm-atcbar__thumb { width: 40px; height: 40px; }
  .ptm-atcbar__qty { height: 38px; }
  .ptm-atcbar__btns .ptm-btn { height: 38px; font-size: .82rem; }
}

/* ---- 3. The size picker is a popup at every width (36 chips is a wall). */
.ptm-optpick[data-ptm-optsheet] .ptm-optpick__chips { display: none; }
.ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--ptm-border); border-radius: 12px;
  background: #fff; color: var(--ptm-navy-900, #0B1E48);
  font: 600 .92rem/1 var(--font-body); text-align: left; cursor: pointer;
  box-shadow: 0 1px 3px rgba(10, 26, 58, .05);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn:hover { border-color: var(--ptm-primary); }
.ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn small { margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--ptm-soft); }
.ptm-optpick[data-ptm-optsheet] .ptm-optpick__btn svg { flex: none; color: var(--ptm-primary); }
.ptm-optpick.is-missing[data-ptm-optsheet] .ptm-optpick__btn { border-color: var(--ptm-rose, #c0152f); box-shadow: 0 0 0 3px rgba(192, 21, 47, .12); }
.ptm-optpick[data-ptm-optsheet] .ptm-optpick__chosen { display: none; }
/* the sheet itself is centred on a desktop, still bottom-anchored on a phone */
@media (min-width: 768px) {
  .ptm-sheet--opt .ptm-sheet__panel {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 48px));
    border-radius: 20px;
    animation: none;
  }
  .ptm-sheet--opt .ptm-sheet__body .ptm-optpick__chips { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---- 4. Pay-with marks: real logos, aligned on one baseline. */
.ptm-spp__paywith { gap: 8px; align-items: center; }
.ptm-spp__paywith i {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 8px; border: 1px solid var(--ptm-border); border-radius: 7px;
  background: #fff; box-shadow: 0 1px 2px rgba(10, 26, 58, .05);
}
.ptm-spp__paywith i svg { display: block; height: 18px; width: auto; }
@media (max-width: 420px) { .ptm-spp__paywith i { height: 28px; padding: 0 6px; } }

/* ---- 5. The generic stone guidance. */
.ptm-brx__guide { margin-top: 18px; padding: 22px 24px; }
.ptm-brx__guide h3 { margin: 0 0 14px; font-size: 1.2rem; text-align: left; }
.ptm-brx__guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.ptm-brx__guide-grid > div { min-width: 0; }
.ptm-brx__guide-ico {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 9px;
  border-radius: 11px; background: var(--ptm-bg, #F4F6FB); color: var(--ptm-primary);
}
.ptm-brx__guide-grid strong { display: block; margin-bottom: 5px; font-size: .95rem; color: var(--ptm-navy-900, #0B1E48); }
.ptm-brx__guide-grid p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--ptm-mid); }
@media (max-width: 767px) {
  .ptm-brx__guide { padding: 18px 16px; }
  .ptm-brx__guide-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- 6. Phone: the category rail used to be off on a product page, so the
        piece got the whole screen. V46 brings it back and hides the offers
        band there instead — see the V46 section, MUST STAY LAST, which is
        why the actual rule lives there and not here. */

/* ---- 7. Rudraksha and the other long names must never be clipped in the
        rail. The tile shrinks; the words do not. */
@media (max-width: 991px) {
  .ptm-hcat .ptm-hcat__inner > a,
  .ptm-hcat a.ptm-mega__trigger { width: 92px; min-width: 92px; font-size: .68rem; }
  .ptm-hcat .ptm-hcat__inner > a::before,
  .ptm-hcat a.ptm-mega__trigger::before { width: 66px; height: 66px; border-radius: 16px; }
  .ptm-hcat .ptm-hcat__inner > a > svg { top: 20px; width: 24px; height: 24px; }
}

/* ---- 8. Homepage stone belt: English over Hindi, no piece counts. */
.ptm-dcard__txt small:empty { display: none; }
.ptm-dcard--stone .ptm-dcard__txt strong { font-size: .88rem; line-height: 1.25; }
.ptm-dcard--stone .ptm-dcard__txt small {
  margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--ptm-soft);
}
.ptm-dcard--stone { width: 196px; }
@media (max-width: 767px) { .ptm-dcard--stone { width: 168px; } }

/* ---- 9. Rings / Pendants: two doors, not a wall. */
.ptm-mega__panel--two { min-width: min(720px, calc(100vw - 32px)); }
.ptm-mega__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 20px 18px; }
.ptm-mega__door {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(160deg, #ffffff, #eef3fd);
  border: 1px solid var(--ptm-border);
  box-shadow: 0 10px 24px -18px rgba(10, 26, 58, .8);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ptm-mega__door:hover { transform: translateY(-2px); border-color: var(--ptm-primary); box-shadow: 0 16px 30px -18px rgba(30, 58, 138, .85); }
.ptm-mega__door-img {
  flex: none; width: 78px; height: 78px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; background: #fff; color: var(--ptm-primary);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}
.ptm-mega__door-img img { width: 100%; height: 100%; object-fit: cover; }
.ptm-mega__door-txt { min-width: 0; }
.ptm-mega__door-txt strong { display: block; font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.12rem; font-weight: 600; color: var(--ptm-navy-900, #0B1E48); }
.ptm-mega__door-txt small { display: block; margin: 3px 0 7px; font-size: .82rem; color: var(--ptm-mid); line-height: 1.45; }
.ptm-mega__door-txt em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--ptm-primary-deep, #1E40AF); }
@media (max-width: 767px) { .ptm-mega__two { grid-template-columns: 1fr; } }

/* ---- 10. Birthstone: one grid of 19, four across. */
.ptm-mega__panel--stones .ptm-mega__sec-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .ptm-mega__panel--stones .ptm-mega__sec-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- 11. A stone card with no photograph shows its own colour. */
.ptm-dcard__sw {
  display: block; width: 100%; height: 100%; border-radius: inherit;
  background: var(--sw, #dfe6f2);
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .22), inset 0 4px 8px rgba(255, 255, 255, .5);
}

/* ---- 12. Phone header: logo first, then the menu, then search. */
@media (max-width: 991px) {
  .ptm-header__inner { display: flex; align-items: center; gap: 4px; }
  .ptm-logo { order: 1; justify-self: auto; margin-right: 2px; }
  .ptm-hleft { order: 2; }
  .ptm-header__actions { order: 3; margin-left: auto; }
  .ptm-search { order: 4; flex-basis: 100%; }
}
@media (max-width: 400px) {
  .ptm-logo__text { display: none; }
}

/* ---- 13. Our Story: a brand panel, not one product. */
.ptm-story__media--brand { background: linear-gradient(160deg, #0b1e48, #1e3a8a 55%, #14306f); }
.ptm-story__brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; min-height: 380px; padding: 40px 28px; text-align: center; color: #fff;
}
.ptm-story__logo { width: 92px; height: 92px; object-fit: contain; margin-bottom: 6px; }
.ptm-story__brand strong { font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.7rem; font-weight: 600; }
.ptm-story__brand em { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.ptm-story__brand ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.ptm-story__brand li { display: flex; align-items: center; gap: 10px; font-size: .88rem; opacity: .92; }
.ptm-story__brand li svg { flex: none; opacity: .8; }
@media (max-width: 767px) { .ptm-story__brand { min-height: 280px; padding: 30px 20px; } .ptm-story__logo { width: 72px; height: 72px; } }

/* ---- 14. Stone cards need room for "Yellow Sapphire". */
.ptm-dcard--stone { width: 214px; }
.ptm-dcard--stone .ptm-dcard__txt strong { white-space: normal; line-height: 1.2; }
@media (max-width: 767px) { .ptm-dcard--stone { width: 182px; } }

/* ---- 15. The brand panel's logo is not the panel's photograph.
        `.ptm-story__media img` stretches any child image to 100% at a 4/5
        aspect ratio; the mark needs its own size, which is why this is
        written at (0,2,0). */
.ptm-story__brand .ptm-story__logo {
  width: 92px; height: 92px; aspect-ratio: auto; object-fit: contain;
  display: block; margin: 0 auto 6px;
}
@media (max-width: 767px) { .ptm-story__brand .ptm-story__logo { width: 72px; height: 72px; } }

/* The logo file carries an opaque light ground, so inverting it to white
   produced a solid white square. It sits on its own white tile instead,
   which keeps the brand colours as drawn. */
.ptm-story__brand .ptm-story__logo {
  padding: 10px; box-sizing: border-box; border-radius: 20px;
  background: #fff; box-shadow: 0 10px 24px rgba(4, 12, 32, .35);
}

/* =====================================================================
   V32 — live courier tracking on the Track Order page.
   Only rendered when Shiprocket answers; the manual number keeps its own
   plain treatment below it.
   ===================================================================== */
.ptm-trk {
  margin-top: 18px; padding: 18px 20px; border-radius: 16px;
  background: var(--ptm-bg, #F4F6FB); border: 1px solid var(--ptm-border);
}
.ptm-trk__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.ptm-trk__now {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: #E7F6EE; color: #17794A; border: 1px solid #CDEBDA;
  font-size: .86rem; font-weight: 700;
}
.ptm-trk__by { font-size: .8rem; color: var(--ptm-soft); }
.ptm-trk__etd { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; font-size: .86rem; color: var(--ptm-mid); }
.ptm-trk__etd svg { color: #17794A; flex: none; }
.ptm-trk__steps { list-style: none; margin: 0; padding: 0 0 0 6px; }
.ptm-trk__steps li { position: relative; display: flex; gap: 14px; padding: 0 0 16px 18px; }
.ptm-trk__steps li::before {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 0; width: 2px;
  background: var(--ptm-border);
}
.ptm-trk__steps li:last-child { padding-bottom: 0; }
.ptm-trk__steps li:last-child::before { display: none; }
.ptm-trk__dot {
  position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ptm-border);
}
.ptm-trk__steps li.is-now .ptm-trk__dot { background: #17794A; border-color: #17794A; box-shadow: 0 0 0 4px rgba(23, 121, 74, .14); }
.ptm-trk__txt strong { display: block; font-size: .88rem; font-weight: 600; color: var(--ptm-navy-900, #0B1E48); line-height: 1.4; }
.ptm-trk__txt small { display: block; margin-top: 2px; font-size: .76rem; color: var(--ptm-soft); }
.ptm-trk__steps li.is-now .ptm-trk__txt strong { color: #17794A; }
.ptm-trk__link { display: inline-block; margin-top: 14px; font-size: .84rem; font-weight: 600; color: var(--ptm-primary-deep, #1E40AF); }
@media (max-width: 767px) { .ptm-trk { padding: 15px 14px; } }

/* =====================================================================
   V33 — the client's 2026-09-06 corrections
   ===================================================================== */

/* ---- 1. Offers band: the percentages, big, on every page. */
.ptm-band { background: linear-gradient(90deg, #eef3fd, #f7f9ff 50%, #eef3fd); border-bottom: 1px solid var(--ptm-border); }
.ptm-band__in { display: flex; align-items: center; gap: 14px; padding: 9px 20px; }
.ptm-band__lbl {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ptm-primary-deep, #1E40AF);
}
.ptm-band__row { display: flex; gap: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.ptm-band__row::-webkit-scrollbar { display: none; }
.ptm-band__card {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 6px; border-radius: 12px; text-decoration: none; cursor: pointer;
  background: #fff; border: 1px solid var(--ptm-border); color: var(--ptm-navy-900, #0B1E48);
  box-shadow: 0 1px 2px rgba(10, 26, 58, .05), 0 8px 18px -14px rgba(10, 26, 58, .6);
  font-family: inherit; text-align: left;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ptm-band__card:hover { transform: translateY(-1px); border-color: var(--ptm-primary); box-shadow: 0 10px 22px -14px rgba(30, 58, 138, .8); }
.ptm-band__card b {
  display: inline-flex; align-items: baseline; gap: 2px; flex: none;
  min-width: 58px; height: 38px; padding: 0 10px; border-radius: 9px; justify-content: center; align-items: center;
  background: linear-gradient(145deg, #3b6fe0, #1e3a8a 60%, #14306f); color: #fff;
  font-family: var(--font-royal, 'Playfair Display', serif); font-size: 1.25rem; font-weight: 700; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.ptm-band__card b small { font-family: var(--font-body); font-size: .58rem; font-weight: 800; letter-spacing: .06em; margin-left: 3px; opacity: .9; }
.ptm-band__card span { display: grid; gap: 1px; line-height: 1.2; }
.ptm-band__card strong { font-size: .84rem; font-weight: 700; }
.ptm-band__card em { font-style: normal; font-size: .7rem; color: var(--ptm-soft); }
.ptm-band__card.is-copied { border-color: #2F9E5E; }
.ptm-band__card.is-copied em { color: #17794A; font-weight: 700; }
.ptm-band__card--gift b { background: linear-gradient(145deg, #2fb57a, #0f7a3d); }
@media (max-width: 767px) {
  .ptm-band__in { gap: 8px; padding: 8px 12px; }
  .ptm-band__lbl { display: none; }
  .ptm-band__card { padding: 4px 10px 4px 5px; gap: 8px; }
  .ptm-band__card b { min-width: 50px; height: 34px; font-size: 1.1rem; }
  .ptm-band__card strong { font-size: .78rem; }
  .ptm-band__card em { font-size: .66rem; }
}

/* ---- 2. Homepage tabs: no counts; card names on two lines; still rows on phones. */
.ptm-find__tab-n { display: none !important; }
.ptm-dcard__txt strong {
  white-space: normal; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ptm-dcard { width: 228px; align-items: center; }
.ptm-dcard--stone { width: 214px; }
@media (max-width: 767px) {
  .ptm-dcard { width: 196px; }
  .ptm-dcard--stone { width: 182px; }
  /* a card that is moving cannot be aimed at with a thumb */
  .ptm-dual--auto .ptm-dual__row .ptm-dual__track,
  html.ptm-force-motion .ptm-dual--auto .ptm-dual__row .ptm-dual__track { animation: none !important; animation-name: none !important; transform: none; }
  .ptm-dual--auto .ptm-dcard[aria-hidden="true"],
  html.ptm-force-motion .ptm-dual--auto .ptm-dcard[aria-hidden="true"] { display: none !important; }
}

/* ---- 3. PDP: the whole width, from 1280px. */
@media (min-width: 1280px) {
  .ptm-product-page .ptm-container { max-width: none; padding: 0 28px; }
  .ptm-spp__layout { max-width: none; }
}

/* ---- 4. Thumbnail chips (the Amazon picker): photo, name, price. */
.ptm-vcard__chips--thumbs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: visible !important; }
.ptm-vcard__chip--img {
  flex-direction: column; align-items: stretch; gap: 5px;
  height: auto !important; min-height: 0; padding: 7px 7px 8px !important;
  text-align: center; border-radius: 12px;
}
.ptm-vcard__chip--img img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 8px; background: #fff; display: block; }
.ptm-vcard__chip--img span { font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: normal; }
.ptm-vcard__chip--img b { font-size: .8rem; font-weight: 800; color: var(--ptm-navy-900, #0B1E48); }
.ptm-vcard__chip--img.is-on { box-shadow: 0 0 0 2px var(--ptm-primary), 0 8px 18px -10px rgba(30, 58, 138, .7); }
.ptm-vcard__chip--img.is-on b { color: var(--ptm-primary-deep, #1E40AF); }
@media (max-width: 900px) {
  .ptm-vcard__chips--thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .ptm-vcard__chips--thumbs .ptm-vcard__chip--img { height: auto !important; }
}

/* ---- 5. Phone rail sheet: the drawer's link list, in a sheet. */
.ptm-sheet--nav .ptm-sheet__body .ptm-mm__acc-body { display: block !important; max-height: none; padding: 0; }
.ptm-sheet--nav .ptm-mm__subrow { padding: 12px 8px; font-size: .95rem; border-bottom: 1px solid var(--ptm-border); }
.ptm-sheet--nav .ptm-mm__subrow--all { background: var(--ptm-bg, #F4F6FB); border-radius: 12px; border: 0; margin-bottom: 8px; padding: 13px 14px; }
.ptm-sheet--nav .ptm-mm__sec-title, .ptm-sheet--nav .ptm-mm__sec-title--link { margin-top: 12px; }
.ptm-sheet--nav .ptm-mm__sec-links { grid-template-columns: 1fr 1fr; }
.ptm-sheet--nav .ptm-sheet__panel { max-height: 80vh; }

/* ---- 6. Filter sidebar: the submit is now a fallback, and says so. */
.ptm-filter__actions .ptm-btn[disabled] { opacity: .6; }


/* =====================================================================
   V35 — the owner's 2026-09-06 evening round              MUST STAY LAST
   ===================================================================== */

/* ---- 1. Desktop PDP: "बड़ा-बड़ा दिखाया है… left और right optimize करो".
        At 1920 the info column had grown to 1218px with a 520px gallery beside
        it. The page is a 1440px stage again, split evenly: the photograph gets
        the room it lost, the purchase column stops stretching its cards. */
@media (min-width: 1280px) {
  .ptm-product-page .ptm-container { max-width: 1440px; padding: 0 32px; }
  .ptm-spp__layout { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 30px; }
  .ptm-spp__trust { gap: 10px; }
}
@media (min-width: 1700px) {
  .ptm-product-page .ptm-container { max-width: 1440px; }
}

/* ---- 2. Desktop header: the search fills the room between logo and icons
        (it was capped at 680px inside a ~990px slot; he drew arrows at both
        gaps). */
@media (min-width: 992px) {
  .ptm-header__inner { gap: 28px; }
  .ptm-header .ptm-search { max-width: 900px; }
}

/* ---- 3. Offers band: one slim, evenly filled strip. The three cards used to
        sit against the left edge with the rest of the row empty (circled). */
.ptm-band__in { padding: 7px 20px; }
.ptm-band__card b { height: 34px; min-width: 54px; font-size: 1.15rem; }
.ptm-band__card--gift b svg { width: 19px; height: 19px; }
@media (min-width: 992px) {
  .ptm-band__in { gap: 22px; }
  .ptm-band__row { justify-content: center; gap: 14px; overflow: visible; }
  .ptm-band__card { flex: 1 1 0; max-width: 380px; padding: 4px 14px 4px 5px; }
}

/* ---- 4. Phone: the menu drawer sat at z-index 45 UNDER the sticky buy bar
        (85), so the bar cut across the open drawer. The drawer is above every
        page-level bar now; the side cart (120) and sheets (130) stay above it. */
.ptm-mm { z-index: 112; }

/* ---- 5. Phone: Stone Weight as a select-like row → sheet from the bottom.
        Desktop keeps the chips; thumbnail (Mukhi) and size groups unchanged. */
.ptm-vcard__ddbtn { display: none; }
@media (max-width: 767px) {
  .ptm-vpick__group--dd .ptm-vcard__chips { display: none !important; }
  .ptm-vpick__group--dd .ptm-vcard__ddbtn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 14px;
    border: 1.5px solid var(--ptm-border); border-radius: 12px;
    background: #fff; color: var(--ptm-navy-900, #0B1E48);
    font: 600 .92rem/1.2 var(--font-body); text-align: left; cursor: pointer;
    box-shadow: 0 1px 3px rgba(10, 26, 58, .05);
  }
  .ptm-vpick__group--dd .ptm-vcard__ddbtn small { margin-left: auto; flex: none; font-size: .74rem; font-weight: 600; color: var(--ptm-soft); }
  .ptm-vpick__group--dd .ptm-vcard__ddbtn svg { flex: none; color: var(--ptm-primary); }
  .ptm-vpick__group--dd .ptm-vcard__ddbtn.is-set { border-color: var(--ptm-primary); }
  .ptm-vpick__group--dd .ptm-vcard__ddbtn.is-set span { color: var(--ptm-primary-deep, #1E40AF); }
  .ptm-vpick__group--dd .ptm-vcard__ddbtn.is-set small { display: none; }
}
.ptm-vdd__list { display: grid; gap: 8px; }
.ptm-vdd__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; padding: 0 14px;
  border: 1.5px solid var(--ptm-border); border-radius: 12px; background: #fff;
  font: 600 .95rem/1.2 var(--font-body); color: var(--ptm-navy-900, #0B1E48);
  text-align: left; cursor: pointer;
}
.ptm-vdd__row b { font-weight: 800; color: var(--ptm-primary-deep, #1E40AF); }
.ptm-vdd__row.is-on { border-color: var(--ptm-primary); background: #F4F7FF; box-shadow: 0 0 0 2px rgba(45, 91, 201, .14); }
.ptm-vdd__row.is-off, .ptm-vdd__row[disabled] { opacity: .45; cursor: default; }
.ptm-sheet--vdd .ptm-sheet__panel { max-height: 78vh; }


/* =====================================================================
   V36 — the owner's 2026-09-06 night round: titles, cards, drawer,
   footer. He sent a reference site to learn from, not to copy.
                                                        MUST STAY LAST
   ===================================================================== */

/* ---- 1. THE TITLE. It was 0.8rem on a rail and 0.9rem in a grid, clamped
        to two lines, carrying a 135-character marketplace title — so the
        piece itself never appeared. ptm_card_title() now hands the card a
        readable name; this gives that name room and weight. */
.ptm-card .ptm-card__title,
.ptm-rail .ptm-card__title {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.34;
  letter-spacing: -.005em;
  color: var(--ptm-navy-900, #0B1E48);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.34em);          /* two lines always, so cards align */
}
@media (min-width: 992px) {
  .ptm-card .ptm-card__title, .ptm-rail .ptm-card__title { font-size: 1rem; }
}
.ptm-card__body { gap: 7px; }
.ptm-card__cat { font-size: .63rem; letter-spacing: .16em; }

/* ---- 2. The rating, as a mark rather than a footnote. Gold star, navy
        figure — the brand keeps gold for stars and the BIS stamp only. */
.ptm-card__stars { display: flex; align-items: center; gap: 7px; font-size: .76rem; }
.ptm-card__rate {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 6px;
  background: var(--ptm-bg, #F4F6FB); border: 1px solid var(--ptm-border);
  font-weight: 800; font-size: .74rem; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-card__rate i { color: var(--ptm-gold, #C79A3A); font-style: normal; font-size: .8rem; line-height: 1; }
.ptm-card__rcount { color: var(--ptm-soft); font-weight: 600; }

/* ---- 3. Price row: the saving said out loud, next to the price.
        (A V7 rule hid .ptm-card__off inside the row; this replaces it.) */
.ptm-card__price-row { align-items: baseline; gap: 4px 8px; margin-top: 2px; }
.ptm-card__price { font-size: 1.16rem; font-weight: 800; color: var(--ptm-navy-900, #0B1E48); }
.ptm-card__strike { font-size: .82rem; }
.ptm-card__price-row .ptm-card__off {
  display: inline-block;
  font-size: .74rem; font-weight: 800; color: #16A34A;
}

/* ---- 4. The prepaid code, priced for this piece. Real money off a real
        code, read from the coupons table — not a decoration. */
.ptm-card__offer {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start; max-width: 100%;
  padding: 4px 9px; border-radius: 8px;
  background: #EAF7F0; border: 1px solid #BFE6D2;
  color: #14663F; font-size: .71rem; font-weight: 600; line-height: 1.25;
}
.ptm-card__offer svg { flex: none; color: #1B7A4B; }
.ptm-card__offer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-card__offer b { font-weight: 800; letter-spacing: .01em; }

/* ---- 5. The buy button: the biggest thing in the body, as it should be. */
.ptm-card__actions { margin-top: 8px; }
.ptm-card .ptm-card__atc {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; padding: 10px 12px;
  border-radius: 12px;
  font-size: .87rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(30, 58, 138, .9);
}
.ptm-card .ptm-card__atc svg { flex: none; }
.ptm-card .ptm-card__atc:hover { box-shadow: 0 12px 22px -12px rgba(30, 58, 138, 1); }
@media (max-width: 480px) {
  .ptm-card .ptm-card__atc { font-size: .82rem; min-height: 44px; gap: 6px; }
  .ptm-card .ptm-card__atc svg { width: 15px; height: 15px; }
  .ptm-card__price { font-size: 1.08rem; }
}
/* the narrow rail cards keep the same anatomy, one size down */
.ptm-rail .ptm-card__body { padding: 12px 12px 14px; gap: 6px; }
.ptm-rail .ptm-card__price { font-size: 1.02rem; }
.ptm-rail .ptm-card__actions .ptm-btn { font-size: .8rem; padding: 9px 8px; }

/* ---- 6. THE DRAWER — four shortcuts, then the categories as pictures,
        then the links, with the two ways to reach a human pinned to the
        bottom. Structure learnt from the reference he sent. */
.ptm-mm__quick {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 12px 14px 4px; padding: 10px 6px;
  background: #fff; border: 1px solid var(--ptm-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10, 26, 58, .04);
}
.ptm-mm__quick a {
  display: grid; justify-items: center; gap: 6px;
  padding: 6px 2px; border-radius: 12px; text-decoration: none;
  font-size: .7rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-mm__quick a span {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--ptm-bg, #F4F6FB); color: var(--ptm-primary, #2D5BC9);
}
.ptm-mm__quick a:active span, .ptm-mm__quick a:hover span { background: var(--ptm-primary); color: #fff; }

.ptm-mm__shopby { margin: 6px 14px 12px; }
.ptm-mm__shopby-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 2px 10px;
}
.ptm-mm__shopby-head span {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ptm-soft);
}
.ptm-mm__shopby-head a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .76rem; font-weight: 700; color: var(--ptm-primary, #2D5BC9); text-decoration: none;
}
.ptm-mm__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.ptm-mm__tile { display: grid; justify-items: center; gap: 6px; text-decoration: none; }
.ptm-mm__tile-pic {
  display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden;
  border-radius: 50%; background: #fff; border: 1px solid var(--ptm-border);
  color: var(--ptm-primary, #2D5BC9);
  box-shadow: 0 6px 14px -10px rgba(10, 26, 58, .8);
}
.ptm-mm__tile-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptm-mm__tile-lbl {
  font-size: .68rem; font-weight: 700; line-height: 1.25; text-align: center;
  color: var(--ptm-navy-900, #0B1E48);
}
.ptm-mm__tile:active .ptm-mm__tile-pic { border-color: var(--ptm-primary); }
@media (max-width: 360px) { .ptm-mm__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ptm-mm__foot {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; gap: 8px;
  margin-top: 14px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 22%);
  border-top: 1px solid var(--ptm-border);
}
.ptm-mm__fbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; border-radius: 12px; text-decoration: none;
  font-size: .88rem; font-weight: 700; letter-spacing: .01em;
}
.ptm-mm__fbtn--wa { background: #1FA855; color: #fff; }
.ptm-mm__fbtn--call { background: var(--ptm-navy-900, #0B1E48); color: #fff; }
.ptm-mm__fbtn svg { flex: none; }
/* the panel scrolls; the foot must not sit on top of the last link */
.ptm-mm__panel { padding-bottom: 0; }

/* ---- 7. THE FOOTER — a contact strip of its own, real payment marks,
        and the wordmark behind it all. */
.ptm-fcontact {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 30px; padding: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
}
.ptm-fcontact__item {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 6px 8px; border-radius: 12px; text-decoration: none; color: inherit;
  transition: background .2s var(--ease);
}
.ptm-fcontact__item:hover { background: rgba(255, 255, 255, .06); }
.ptm-fcontact__ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ptm-light, #93B4F5);
}
.ptm-fcontact__item > span:last-child { display: grid; gap: 2px; min-width: 0; }
.ptm-fcontact__item small {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.ptm-fcontact__item strong {
  font-size: .9rem; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) {
  .ptm-fcontact { grid-template-columns: 1fr; gap: 2px; padding: 8px; margin-bottom: 22px; }
  .ptm-fcontact__item { padding: 9px 8px; }
  .ptm-fcontact__item + .ptm-fcontact__item { border-top: 1px solid rgba(255, 255, 255, .08); }
}

.ptm-footer__pay-lbl {
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.ptm-footer__pay {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 9px; background: #fff;
}
.ptm-footer__pay svg { display: block; height: 18px; width: auto; }
.ptm-footer__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptm-footer__chips .ptm-chip {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .82); font-size: .68rem; letter-spacing: .04em;
}

/* The wordmark, behind the last row. Decorative, clipped by the footer. */
.ptm-footer__mark {
  position: absolute; left: 50%; bottom: -.22em; z-index: 0;
  transform: translateX(-50%);
  font-family: var(--font-royal, 'Playfair Display', serif);
  font-size: clamp(4rem, 15vw, 12rem); font-weight: 700; letter-spacing: .04em;
  line-height: .8; white-space: nowrap;
  color: rgba(255, 255, 255, .035);
  pointer-events: none; user-select: none;
}
.ptm-footer__container { position: relative; z-index: 1; }


/* ---- V36.1 — measured on the live pages, then corrected.

   (a) ptm.css:308 gives EVERY anchor in the drawer `display:block`, 14px of
       vertical padding and a bottom border. The new quick row, category tiles
       and foot buttons inherited all three, which drew the stray hairlines
       under the tiles and pushed the labels apart.
   (b) A two-line clamp still cut the readable name in a 165px phone column.
       Three lines on a phone, two where the column is wide.
   (c) The coupon chip ellipsised the code itself - "with PTM..." - which is
       the one word in it that has to survive.                              */

.ptm-mm .ptm-mm__quick a,
.ptm-mm .ptm-mm__tile,
.ptm-mm .ptm-mm__shopby-head a,
.ptm-mm .ptm-mm__fbtn {
  border-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: inherit;
}
.ptm-mm .ptm-mm__quick a { padding: 6px 2px; font-size: .7rem; }
.ptm-mm .ptm-mm__shopby-head a { font-size: .76rem; }
.ptm-mm .ptm-mm__fbtn { font-size: .88rem; }

/* Labels on one baseline, whatever their length, so the rows line up. */
.ptm-mm__tile-lbl {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.ptm-mm__tiles { gap: 14px 8px; }

/* The foot is a bar, not a fade: content scrolling under it must be covered
   cleanly rather than half-showing through a gradient. */
.ptm-mm__foot {
  background: #fff;
  box-shadow: 0 -10px 20px -12px rgba(10, 26, 58, .45);
}

/* The title, given the third line a phone column needs. */
@media (max-width: 767px) {
  .ptm-card .ptm-card__title,
  .ptm-rail .ptm-card__title { -webkit-line-clamp: 3; }
}

/* The coupon line: it may take two lines, but the code is never cut. */
.ptm-card__offer { white-space: normal; }
.ptm-card__offer span { white-space: normal; overflow: visible; text-overflow: clip; }

/* The saving reads as a badge, not as an orphaned line under the price. */
.ptm-card__price-row .ptm-card__off {
  padding: 1px 6px; border-radius: 5px;
  background: #EAF7F0; color: #14663F;
  font-size: .7rem;
}

/* V36.2 — three lines at every width. At 1440 a four-column grid still cut
   "…Design 08 Square-cut" on the second line; the minimum height stays two
   lines, so a short name never leaves a hole under it. */
.ptm-card .ptm-card__title,
.ptm-rail .ptm-card__title { -webkit-line-clamp: 3; }


/* V36.3 — two things the screenshots showed.

   (a) When the price row wraps, the saving badge was taking the whole width
       of the card and reading as a green bar. It hugs its own text now.
   (b) Five tiles in a four-column grid left one stranded on a second row.
       Three columns and a sixth tile ("All Jewellery") fill two even rows,
       and the circles get bigger, which is what the reference does well.  */

.ptm-card__price-row .ptm-card__off {
  flex: 0 0 auto;
  width: auto;
  align-self: center;
}
.ptm-card__offer { align-self: flex-start; }

.ptm-mm__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.ptm-mm__tile-pic { width: 76px; height: 76px; }
.ptm-mm__tile-lbl { font-size: .72rem; }
.ptm-mm__tile-pic--all { background: var(--ptm-bg, #F4F6FB); color: var(--ptm-primary, #2D5BC9); }
@media (max-width: 360px) {
  .ptm-mm__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptm-mm__tile-pic { width: 64px; height: 64px; }
}


/* =====================================================================
   V37 — our own UPI payment step, the order page, and the phone pass
                                                        MUST STAY LAST
   ===================================================================== */

/* ---- 1. pay.php — the payment step. Our palette, not the reference's. */
.ptm-pay { max-width: 560px; padding: 26px 16px 60px; }
.ptm-pay__card {
  padding: 26px 22px 22px; border-radius: 20px;
  background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 18px 44px -30px rgba(10, 26, 58, .55);
  text-align: center;
}
.ptm-pay__steps { display: flex; gap: 6px; margin-bottom: 18px; }
.ptm-pay__steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--ptm-border); }
.ptm-pay__steps i.is-on { background: var(--ptm-primary, #2D5BC9); }
.ptm-pay h1 {
  margin: 0 0 6px; text-align: left;
  font-family: var(--font-royal, 'Playfair Display', serif);
  font-size: 1.5rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-pay__sub { margin: 0 0 18px; text-align: left; font-size: .92rem; color: var(--ptm-soft); line-height: 1.55; }
.ptm-pay__sub strong { color: var(--ptm-navy-900, #0B1E48); font-weight: 700; }

.ptm-pay__apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptm-pay__app {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 12px; border-radius: 14px; text-decoration: none;
  border: 1px solid var(--ptm-border); background: #fff;
  font-size: .92rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ptm-pay__app:hover { border-color: var(--ptm-primary); box-shadow: 0 10px 20px -14px rgba(30, 58, 138, .8); }
.ptm-pay__app-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--ptm-bg, #F4F6FB); overflow: hidden; }
.ptm-pay__app-mark svg { max-width: 30px; height: auto; }

.ptm-pay__qr {
  display: inline-block; margin: 4px auto 10px; padding: 12px;
  border-radius: 16px; background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 10px 24px -18px rgba(10, 26, 58, .7);
}
.ptm-pay__qr svg { display: block; width: 232px; height: 232px; }
.ptm-pay__works { margin: 0 0 14px; font-size: .78rem; color: var(--ptm-soft); }
.ptm-pay__works a { color: var(--ptm-primary, #2D5BC9); font-weight: 700; }

.ptm-pay__open {
  display: grid; gap: 3px; margin-bottom: 12px; padding: 13px 16px;
  border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--app, #2D5BC9), color-mix(in srgb, var(--app, #2D5BC9) 72%, #000));
  box-shadow: 0 14px 28px -16px var(--app, #2D5BC9);
}
.ptm-pay__open strong { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: .98rem; font-weight: 800; }
.ptm-pay__open small { font-size: .74rem; opacity: .88; }

.ptm-pay__vpa {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  border: 1px dashed var(--ptm-primary, #2D5BC9); background: #F7F9FF;
}
.ptm-pay__vpa span { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ptm-soft); }
.ptm-pay__vpa strong { font-size: 1rem; font-weight: 800; color: var(--ptm-navy-900, #0B1E48); word-break: break-all; }
.ptm-pay__copy, .ptm-placed__copy {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ptm-border); background: #fff;
  font: 700 .78rem/1 var(--font-body); color: var(--ptm-navy-900, #0B1E48);
}
.ptm-pay__copy.is-done, .ptm-placed__copy.is-done { border-color: #2F9E5E; color: #17794A; }
.ptm-pay__ref { margin: 10px 0 18px; font-size: .78rem; color: var(--ptm-soft); }
.ptm-pay__ref strong { color: var(--ptm-navy-900, #0B1E48); font-weight: 700; }

.ptm-pay__confirm { margin: 0 0 10px; }
.ptm-pay__done-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--ptm-navy-900, #0B1E48); color: #fff;
  font: 800 .95rem/1 var(--font-body);
}
.ptm-pay__done-btn:hover { background: var(--ptm-primary-deep, #1E40AF); }
.ptm-pay__fine { margin: 0 0 14px; font-size: .74rem; line-height: 1.5; color: var(--ptm-soft); }
.ptm-pay__back {
  display: block; padding: 12px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--ptm-border); background: #fff;
  font-size: .88rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-pay__tick {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 50%; background: #E7F7EE; color: #17794A;
}
.ptm-pay__done h1, .ptm-pay__card--miss h1 { text-align: center; }
.ptm-pay__done p, .ptm-pay__card--miss p { margin: 0 0 14px; font-size: .94rem; line-height: 1.6; color: var(--ptm-soft); }
.ptm-pay__done p strong { color: var(--ptm-navy-900, #0B1E48); }
.ptm-pay__muted { font-size: .8rem !important; }
.ptm-pay__row { display: grid; gap: 10px; }
.ptm-pay__admin { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ptm-border); font-size: .8rem; color: var(--ptm-soft); }

/* ---- 2. checkout-success.php — the order number he could not read, and the
        two buttons that asked for classes this site does not have. */
.ptm-placed { max-width: 620px; padding: 34px 16px 64px; }
.ptm-placed__card {
  padding: 30px 24px 26px; border-radius: 22px; text-align: center;
  background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 20px 50px -34px rgba(10, 26, 58, .6);
}
.ptm-placed__tick {
  display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 16px;
  border-radius: 50%; background: #E7F7EE; color: #17794A;
}
.ptm-placed h1 {
  margin: 0 0 6px;
  font-family: var(--font-royal, 'Playfair Display', serif);
  font-size: 1.9rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-placed__thanks { margin: 0 0 20px; color: var(--ptm-soft); font-size: .96rem; }
.ptm-placed__num {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px;
  background: var(--ptm-bg, #F4F6FB); border: 1px solid var(--ptm-border);
}
.ptm-placed__num span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ptm-soft); }
.ptm-placed__num strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.12rem; font-weight: 700; letter-spacing: .02em; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-placed__keep { margin: 10px 0 22px; font-size: .8rem; color: var(--ptm-soft); }

.ptm-placed__pay {
  margin-bottom: 20px; padding: 16px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, #F7F9FF, #fff);
  border: 1px solid var(--ptm-lighter, #CBD8F5);
}
.ptm-placed__pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ptm-placed__pay-head span { font-size: .88rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48); }
.ptm-placed__pay-head strong { font-size: 1.3rem; font-weight: 800; color: var(--ptm-primary-deep, #1E40AF); }
.ptm-placed__pay-note { margin: 0 0 12px; font-size: .82rem; line-height: 1.55; color: var(--ptm-soft); }
.ptm-placed__paybtn { display: flex; width: 100%; justify-content: center; }
.ptm-placed__pay-fine { margin: 10px 0 0; font-size: .76rem; line-height: 1.5; color: var(--ptm-soft); }
.ptm-placed__wa {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: .84rem; font-weight: 700; color: #1FA855; text-decoration: none;
}
.ptm-placed__pay--wait { background: #F2FAF5; border-color: #BFE6D2; }
.ptm-placed__pay--cod { background: #FFFBF2; border-color: #F0DCB4; }
.ptm-placed__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ptm-placed__acts .ptm-btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 520px) {
  .ptm-placed__acts { display: grid; grid-template-columns: 1fr 1fr; }
  .ptm-placed__acts .ptm-btn { justify-content: center; }
  .ptm-placed h1 { font-size: 1.6rem; }
  .ptm-placed__num strong { font-size: 1rem; }
}

/* ---- 3. The declaration. V60 shrank it to one line; the boxed three-promise
        block that lived here is gone with the markup that used it. */

.ptm-co__pay-warn {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 8px 10px;
  border-radius: 9px; background: #FFF8E8; border: 1px solid #F0DCB4;
  font-size: .76rem !important; line-height: 1.5; color: #7A5A12 !important;
}
.ptm-co__pay-warn svg { flex: none; margin-top: 2px; }
.ptm-co__pay-warn b { color: #5C4309; }

/* ---- 4. THE PHONE CARD. He said it had become too long, and that the
        percentage belongs beside the price. Both, plus a square crop that
        takes a quarter off the height of every card in the 2-up grid. */
@media (max-width: 767px) {
  .ptm-product-grid .ptm-card__media img,
  .ptm-rail .ptm-card__media img { aspect-ratio: 1 / 1; object-fit: cover; }
  .ptm-card__body { padding: 11px 11px 12px; gap: 5px; }
  /* the category line repeats what the page already says */
  .ptm-product-grid .ptm-card__cat { display: none; }
  .ptm-card .ptm-card__title, .ptm-rail .ptm-card__title { font-size: .88rem; -webkit-line-clamp: 2; min-height: calc(2 * 1.34em); }
  .ptm-card__stars { gap: 5px; font-size: .7rem; }
  .ptm-card__rate { padding: 1px 5px; font-size: .68rem; }
  /* price · MRP · saving, one line */
  .ptm-card__price-row { flex-wrap: nowrap; gap: 5px; align-items: baseline; }
  .ptm-card__price { font-size: .98rem; }
  .ptm-card__strike { font-size: .7rem; }
  .ptm-card__price-row .ptm-card__off { padding: 1px 4px; font-size: .62rem; white-space: nowrap; }
  .ptm-card__offer { padding: 3px 7px; font-size: .66rem; gap: 4px; }
  .ptm-card__offer svg { width: 11px; height: 11px; }
  .ptm-card__actions { margin-top: 5px; }
  .ptm-card .ptm-card__atc { min-height: 40px; font-size: .78rem; border-radius: 10px; }
  .ptm-card__stage .ptm-card__wish { width: 32px; height: 32px; right: 7px; bottom: 7px; }
}

/* ---- 5. Shop by budget: four cards in a three-column grid left one
        stranded on its own row. Two by two. */
@media (max-width: 767px) {
  .ptm-budget__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---- 6. The drawer's contact bar: it was two full-width slabs stacked to
        the height of a card. One row, sized to a thumb. */
.ptm-mm__foot { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ptm-mm .ptm-mm__fbtn {
  min-height: 44px; padding: 0 10px; border-radius: 11px;
  font-size: .82rem; font-weight: 700; gap: 7px; white-space: nowrap;
}
.ptm-mm .ptm-mm__fbtn--call { background: var(--ptm-bg, #F4F6FB); color: var(--ptm-navy-900, #0B1E48); border: 1px solid var(--ptm-border); }
.ptm-mm .ptm-mm__fbtn svg { width: 15px; height: 15px; }

/* V37.1 — the app names wrapped onto two lines in the picker ("Google / Pay"),
   which made the four tiles different heights. */
.ptm-pay__app { font-size: .86rem; gap: 8px; padding: 13px 10px; min-height: 66px; }
.ptm-pay__app > span:last-child { line-height: 1.2; }
@media (max-width: 380px) { .ptm-pay__app { font-size: .8rem; } }

/* =====================================================================
   V38 — the cart round, the typing search, the payment wait
   ===================================================================== */


/* The wait before the confirm button on the payment step. */
.ptm-pay__wait {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 12px; padding: 13px 14px;
  border-radius: 12px; background: var(--ptm-bg, #F4F6FB); border: 1px solid var(--ptm-border);
  font-size: .82rem; line-height: 1.45; color: var(--ptm-soft); text-align: left;
}
.ptm-pay__wait b { color: var(--ptm-navy-900, #0B1E48); font-weight: 800; }
.ptm-pay__spin {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ptm-lighter, #CBD8F5); border-top-color: var(--ptm-primary, #2D5BC9);
  animation: ptmPaySpin .9s linear infinite;
}
@keyframes ptmPaySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html:not(.ptm-force-motion) .ptm-pay__spin { animation: none; }
}

/* V38.1 — `hidden` loses to a display rule, every time. `.ptm-pay__done-btn`
   is display:flex, so the confirm button stayed on screen through its own
   countdown. Same trap as the checkout tick in V29; same fix. */
.ptm-pay__done-btn[hidden],
.ptm-pay__wait[hidden] { display: none !important; }


/* =====================================================================
   V39 — accounts, the payment reference, the drawer, the phone rails
                                                        MUST STAY LAST
   ===================================================================== */

/* ---- 1. THE DRAWER OPENS FROM THE LEFT, under the button that opens it.
        "right side से sidebar ना खुल के left side से ही खुले जिस तरफ burger
        का sign है". The base rule pins it right and slides it in from +100%;
        every part of that has to be answered, including the shadow, which
        would otherwise fall inside the panel. */
.ptm-mm__panel {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  box-shadow: 20px 0 60px rgba(15, 23, 42, .15);
  overflow-x: hidden;          /* nothing may slide sideways in here */
}
.ptm-mm.is-open .ptm-mm__panel { transform: translateX(0); }
.ptm-mm__panel > * { max-width: 100%; }

/* The title row reads centre, with the close button on the right. */
.ptm-mm__top {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
}
.ptm-mm__top > *:not(.ptm-mm__close) { grid-column: 2; text-align: center; justify-self: center; }
.ptm-mm__top .ptm-mm__close { grid-column: 3; justify-self: end; }

/* ---- 2. The contact bar: it was two slabs whose text ran into the edges,
        and the second one fell off the bottom of the panel on a short
        screen. Icon buttons, equal width, and the panel keeps room for it. */
.ptm-mm__foot {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.ptm-mm .ptm-mm__fbtn {
  min-height: 46px;
  padding: 0 8px;
  gap: 8px;
  font-size: .84rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.ptm-mm .ptm-mm__fbtn svg { width: 16px; height: 16px; }

/* ---- 3. Install the app — offered in the drawer and in the footer, and as
        one small card at the foot of the page. Shown only when the browser
        actually offers an install (Chrome fires beforeinstallprompt); a
        button that cannot install anything is worse than no button. */
.ptm-mm__install {
  display: none; align-items: center; gap: 12px;
  margin: 4px 14px 12px; padding: 12px 14px;
  border: 1px dashed var(--ptm-primary, #2D5BC9); border-radius: 14px;
  background: #F4F7FF; cursor: pointer; width: calc(100% - 28px);
  font: 700 .88rem/1.25 var(--font-body); color: var(--ptm-navy-900, #0B1E48);
  text-align: left;
}
.ptm-mm__install.is-on { display: flex; }
.ptm-mm__install span { display: grid; gap: 2px; }
.ptm-mm__install small { font-size: .72rem; font-weight: 600; color: var(--ptm-soft); }
.ptm-mm__install i {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: #fff; border: 1px solid var(--ptm-border); color: var(--ptm-primary);
}

.ptm-footer__install {
  display: none; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font: 700 .82rem/1.2 var(--font-body); text-align: left;
}
.ptm-footer__install.is-on { display: inline-flex; }
.ptm-footer__install small { display: block; font-size: .7rem; font-weight: 600; opacity: .7; }

.ptm-install-pop {
  position: fixed; left: 14px; bottom: 14px; z-index: 118;
  display: none; align-items: center; gap: 12px;
  width: min(340px, calc(100vw - 28px));
  padding: 12px 14px; border-radius: 16px;
  background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 20px 44px -22px rgba(10, 26, 58, .7);
}
.ptm-install-pop.is-on { display: flex; }
.ptm-install-pop__ico {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--ptm-bg, #F4F6FB); color: var(--ptm-primary, #2D5BC9);
}
.ptm-install-pop__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ptm-install-pop__txt strong { font-size: .86rem; font-weight: 800; color: var(--ptm-navy-900, #0B1E48); }
.ptm-install-pop__txt span { font-size: .74rem; line-height: 1.35; color: var(--ptm-soft); }
.ptm-install-pop__row { display: flex; gap: 8px; margin-top: 6px; }
.ptm-install-pop__go, .ptm-install-pop__no {
  border: 0; border-radius: 9px; padding: 8px 12px; cursor: pointer;
  font: 700 .78rem/1 var(--font-body);
}
.ptm-install-pop__go { background: var(--ptm-primary, #2D5BC9); color: #fff; }
.ptm-install-pop__no { background: var(--ptm-bg, #F4F6FB); color: var(--ptm-navy-900, #0B1E48); }
@media (max-width: 767px) {
  .ptm-install-pop { bottom: calc(14px + var(--ptm-atcbar-h, 0px)); }
}

/* ---- 4. The sign-in nudge, ten seconds in. */
.ptm-signin-nudge {
  position: fixed; right: 14px; bottom: 14px; z-index: 117;
  display: flex; align-items: center; gap: 12px;
  width: min(330px, calc(100vw - 28px));
  padding: 13px 14px; border-radius: 16px;
  background: #fff; border: 1px solid var(--ptm-border);
  box-shadow: 0 20px 44px -22px rgba(10, 26, 58, .7);
  transform: translateY(14px); opacity: 0;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.ptm-signin-nudge.is-on { transform: none; opacity: 1; }
.ptm-signin-nudge[hidden] { display: none !important; }
.ptm-signin-nudge__ico {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--ptm-bg, #F4F6FB);
}
.ptm-signin-nudge__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ptm-signin-nudge__txt strong { font-size: .84rem; font-weight: 800; color: var(--ptm-navy-900, #0B1E48); }
.ptm-signin-nudge__txt span { font-size: .72rem; line-height: 1.35; color: var(--ptm-soft); }
.ptm-signin-nudge__go {
  flex: none; padding: 9px 13px; border-radius: 9px; text-decoration: none;
  background: var(--ptm-navy-900, #0B1E48); color: #fff;
  font-size: .78rem; font-weight: 700;
}
.ptm-signin-nudge__x {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1;
  color: var(--ptm-soft);
}
@media (max-width: 767px) {
  .ptm-signin-nudge { bottom: calc(14px + var(--ptm-atcbar-h, 0px)); right: 10px; }
}

/* ---- 5. THE PHONE RAILS. Each rail was a TWO-ROW grid scrolling sideways,
        so one swipe moved four cards and the row below moved with the row
        above — "ऊपर वाला slide करता हूँ तो नीचे वाला भी slide हो जाता है".
        One row per rail on a phone: two cards on screen, two per swipe, and
        the second rail scrolls on its own. */
@media (max-width: 767px) {
  .ptm-newin .ptm-rail__track,
  .ptm-best .ptm-rail__track,
  .ptm-rail--car .ptm-rail__track {
    grid-template-rows: none !important;
    grid-auto-flow: column !important;
    row-gap: 0 !important;
  }
  .ptm-newin .ptm-rail__track > *,
  .ptm-best .ptm-rail__track > *,
  .ptm-rail--car .ptm-rail__track > * { scroll-snap-align: start; }
}

/* ---- 6. The discovery rows move again on phones — driven from ptm.js, not
        from CSS. V33 killed the animation with `animation: none !important`,
        and a rule that fights an !important rule with another one is a rule
        nobody can reason about later. The script scrolls the row instead, one
        card at a time, and stops dead the moment a thumb touches it. */

/* ---- 7. Fewer pager dots: a strip of twelve reads as a wall, not as a hint
        that there is more to the right. */
.ptm-rail__pager { gap: 6px; }
.ptm-rail__pager > *:nth-child(n+6) { display: none; }

/* ---- 8. Payment step 3 — the reference from the UPI app. */
.ptm-pay__utr { display: grid; gap: 8px; text-align: left; margin-bottom: 12px; }
.ptm-pay__utr label {
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-pay__utr label span { color: #C0152F; }
.ptm-pay__utr input {
  width: 100%; min-height: 52px; padding: 0 14px;
  border: 1.5px solid var(--ptm-border); border-radius: 12px;
  font: 700 1.05rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; color: var(--ptm-navy-900, #0B1E48); background: #fff;
}
.ptm-pay__utr input:focus { outline: none; border-color: var(--ptm-primary); box-shadow: 0 0 0 3px rgba(45, 91, 201, .12); }
.ptm-pay__utr input[aria-invalid="true"] { border-color: #C0152F; }
.ptm-pay__err { margin: 0; font-size: .78rem; font-weight: 700; color: #C0152F; }
.ptm-pay__hint { margin: 0 0 4px; font-size: .74rem; line-height: 1.5; color: var(--ptm-soft); }
.ptm-pay__skip {
  border: 0; background: none; cursor: pointer; padding: 6px;
  font: 600 .78rem/1.3 var(--font-body); color: var(--ptm-soft); text-decoration: underline;
}
.ptm-pay__done-btn.is-busy { opacity: .8; }

/* ---- 9. The checkout sign-in gate. */
.ptm-co__gate { background: linear-gradient(180deg, #F7F9FF, #fff); border-color: var(--ptm-lighter, #CBD8F5); }
.ptm-co__gate-why { margin: -4px 0 14px; font-size: .86rem; line-height: 1.5; color: var(--ptm-soft); }
.ptm-co__google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; border-radius: 12px; text-decoration: none;
  border: 1.5px solid var(--ptm-border); background: #fff;
  font-size: .95rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
  box-shadow: 0 2px 6px rgba(10, 26, 58, .06);
}
.ptm-co__google:hover { border-color: var(--ptm-primary); }
.ptm-co__gate-or {
  display: flex; align-items: center; gap: 12px; margin: 14px 0;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ptm-soft);
}
.ptm-co__gate-or::before, .ptm-co__gate-or::after { content: ""; flex: 1; height: 1px; background: var(--ptm-border); }
.ptm-co__gate-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptm-co__gate-links .ptm-btn { justify-content: center; font-size: .84rem; }
.ptm-co__place--gate { text-decoration: none; }
@media (max-width: 480px) { .ptm-co__gate-links { grid-template-columns: 1fr; } }


/* =====================================================================
   V40 — logo centred on the phone, the drawer foot, the editable
   order summary, the "more" button                    MUST STAY LAST
   ===================================================================== */

/* ---- 1. THE PHONE HEADER — logo dead centre. V30 moved it hard left; the
        owner now wants it back in the middle, "दो बीच में phone में". Menu +
        search glyph on the left, logo centred, account · wishlist · cart on
        the right — a three-zone grid, so the logo is centred on the PAGE, not
        just between its neighbours. */
@media (max-width: 991px) {
  .ptm-header__inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
  }
  .ptm-hleft   { order: 0; justify-self: start; margin: 0; }
  .ptm-logo    { order: 0; justify-self: center; margin: 0; }
  .ptm-header__actions { order: 0; justify-self: end; margin: 0; }
  .ptm-search  { grid-column: 1 / -1; order: 5; }
}

/* ---- 2. THE DRAWER FOOT. The sticky WhatsApp / Call bar sat ON TOP of the
        last category row because the scroll had no room below it. A padding
        the height of the bar lets the list scroll fully clear, and an opaque
        panel + a firmer top edge makes the bar read as a bar. */
.ptm-mm__panel { padding-bottom: 92px; }
.ptm-mm__foot {
  background: #fff;
  border-top: 1px solid var(--ptm-border);
  box-shadow: 0 -14px 22px -12px rgba(10, 26, 58, .28);
}

/* ---- 3. EDITABLE ORDER SUMMARY on checkout. Each line can be stepped,
        or dropped, without leaving the page. */
.ptm-co__item { grid-template-columns: 48px 1fr auto; align-items: start; }
.ptm-co__item-img { position: relative; }
.ptm-co__item-txt { display: grid; gap: 5px; }
.ptm-co__item-qty {
  display: inline-flex; align-items: center; align-self: start;
  margin-top: 2px; border: 1px solid var(--ptm-border); border-radius: 8px; background: #fff;
  width: max-content;
}
.ptm-co__item-qty button {
  width: 28px; height: 28px; border: 0; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--ptm-navy-900, #0B1E48);
  display: inline-flex; align-items: center; justify-content: center;
}
.ptm-co__item-qty button:hover { background: var(--ptm-bg, #F4F6FB); }
.ptm-co__item-qty button:disabled { opacity: .4; cursor: default; }
.ptm-co__item-qty b { min-width: 26px; text-align: center; font-size: .82rem; font-weight: 800; }
.ptm-co__item-side { display: grid; justify-items: end; gap: 8px; }
.ptm-co__item-rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid var(--ptm-border); border-radius: 8px; background: #fff; color: var(--ptm-soft);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.ptm-co__item-rm:hover { color: #C0152F; border-color: #F0B7BE; }
.ptm-co__item.is-busy { opacity: .5; pointer-events: none; }

/* ---- 4. The "All N options →" button. It was a plain outlined chip; the
        owner wants it to read as the way to see everything. A soft brand tile
        with a leading plus, so it does not look like just another size. */
.ptm-vcard__chip--more {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 42px; border-radius: 12px;
  border: 1.5px solid var(--ptm-lighter, #CBD8F5);
  background: linear-gradient(180deg, #F7F9FF, #EEF3FD);
  color: var(--ptm-primary-deep, #1E40AF); font-weight: 800; font-size: .84rem;
  box-shadow: 0 1px 2px rgba(10, 26, 58, .05);
}
.ptm-vcard__chip--more::before {
  content: "+"; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ptm-primary, #2D5BC9); color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.ptm-vcard__chip--more:hover {
  border-color: var(--ptm-primary, #2D5BC9);
  box-shadow: 0 8px 18px -12px rgba(30, 58, 138, .8);
  transform: translateY(-1px);
}
.ptm-vcard__chip--more.has-custom { border-color: var(--ptm-primary); background: #EAF0FF; }

/* ---- V41 — the referral panel inside a customer's account (shown only when
        their email matches a partner). */
.ptm-acct-ref {
  margin: 0 0 22px; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(180deg, #F7F9FF, #fff);
  border: 1px solid var(--ptm-lighter, #CBD8F5);
}
.ptm-acct-ref__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ptm-acct-ref__head span { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ptm-soft); }
.ptm-acct-ref__head a { font-size: .84rem; font-weight: 700; color: var(--ptm-primary, #2D5BC9); text-decoration: none; }
.ptm-acct-ref__amt { display: block; font-family: var(--font-royal, serif); font-size: 2rem; font-weight: 800; color: var(--ptm-primary-deep, #1E40AF); margin: 4px 0 2px; }
.ptm-acct-ref__code { margin: 0; font-size: .86rem; color: var(--ptm-soft); }
.ptm-acct-ref__code b { color: var(--ptm-navy-900, #0B1E48); font-weight: 800; }

/* =====================================================================
   V42 — the drawer's contact bar, fixed for good           MUST STAY LAST
   The bar was `position: sticky; bottom: 0` inside the scrolling panel.
   Sticky pins to the scroller's PADDING edge, so with the 92px bottom
   padding added in V40 it floated 92px above the panel's foot with white
   space beneath it, and at other scroll positions it slid between the
   category rows. No amount of padding fixes that; the structure does.
   The panel is a column: title row (fixed) / .ptm-mm__scroll (the only
   thing that scrolls) / the bar (a sibling, always at the very bottom).
   ===================================================================== */
.ptm-mm__panel {
  display: flex;
  flex-direction: column;
  padding: 0 !important;          /* the 24px moves onto the scroller */
  overflow: hidden !important;    /* the panel itself never scrolls */
}
.ptm-mm__top { flex: none; padding: 24px 24px 0; }
.ptm-mm__scroll {
  flex: 1 1 auto;
  min-height: 0;                  /* lets a flex child shrink below content height */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 24px 24px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ptm-mm__foot {
  position: static !important;    /* no more sticky, no more floating */
  flex: none;
  margin: 0;
  background: #fff;
  border-top: 1px solid var(--ptm-border);
  box-shadow: 0 -14px 22px -12px rgba(10, 26, 58, .28);
}


/* =====================================================================
   V43 — the nap round: menus with photographs, instant shop, the phone
   header, the chat back on product pages           MUST STAY LAST
   ===================================================================== */

/* ---- 1. Phone header: the wordmark instead of the picture logo. Tapping
        it goes home (it is the same <a> as before). */
@media (max-width: 991px) {
  .ptm-logo__img { display: none !important; }
  .ptm-logo__text { display: flex !important; flex-direction: column; align-items: center; line-height: 1; }
  .ptm-logo__brand {
    font-family: var(--font-royal, 'Playfair Display', serif);
    font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--ptm-navy-900, #0B1E48);
  }
  .ptm-logo__tag { display: none !important; }
}

/* ---- 2. Phone: the announcement bar stays with the header. On scroll it
        collapsed to a 16px invisible strip — the "empty space" he saw. */
@media (max-width: 767px) {
  .ptm-stickytop.is-scrolled .ptm-tb { height: auto !important; opacity: 1 !important; overflow: hidden; }
}

/* ---- 3. The chat launcher is back on product pages, above the buy bar.
        (sapphire.css:9019 had hidden it there.) The sign-in card moves to
        the left on phones so the two never share a corner. */
body.ptm-product-page .ptm-sup__launch { display: flex !important; }
body.ptm-product-page:not(.ptm-cart-lock) .ptm-sup { z-index: 96; }
@media (max-width: 767px) { .ptm-signin-nudge { right: auto; left: 10px; } }

/* ---- 4. Drawer contact buttons: nothing clipped, both readable. */
.ptm-mm .ptm-mm__fbtn { font-size: .84rem; padding: 0 10px; gap: 8px; overflow: visible; min-height: 46px; }
.ptm-mm .ptm-mm__fbtn--call { border: 1.5px solid var(--ptm-border); }
.ptm-mm .ptm-mm__promo-txt { display: grid; gap: 2px; padding: 0; border: 0; text-decoration: none; color: inherit; font-size: inherit; }

/* ---- 5. Footer install button: centred, off the edges, on phones. */
@media (max-width: 767px) {
  .ptm-footer__install.is-on {
    display: flex; margin: 18px auto 0; width: max-content; max-width: calc(100% - 24px);
    justify-content: center;
  }
}

/* ---- 6. MEGA MENUS with photographs and centred, highlighted heads.
        Birthstone is three columns again (Rings · Pendants · Loose), each
        stone shown with a real photograph of a piece in that column; the
        column head is a pill so it reads as the thing the stones belong to. */
.ptm-mega__panel--stones .ptm-mega__sec-head,
.ptm-mega__panel--doors .ptm-mega__sec-head,
.ptm-mega__panel--rudraksha .ptm-mega__sec-head {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 9px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #EEF3FD, #F7F9FF);
  border: 1px solid var(--ptm-lighter, #CBD8F5);
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ptm-primary-deep, #1E40AF); text-align: center; text-decoration: none;
}
.ptm-mega__panel--stones .ptm-mega__sec-head--link:hover,
.ptm-mega__panel--doors .ptm-mega__sec-head--link:hover,
.ptm-mega__panel--rudraksha .ptm-mega__sec-head--link:hover { background: var(--ptm-primary, #2D5BC9); color: #fff; border-color: var(--ptm-primary, #2D5BC9); }
.ptm-mega__panel--stones .ptm-mega__sec-list,
.ptm-mega__panel--doors .ptm-mega__sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.ptm-mega__panel--stones .ptm-mega__sec-link .ptm-mega__ico img,
.ptm-mega__panel--doors .ptm-mega__sec-link .ptm-mega__ico img,
.ptm-mega__panel--rudraksha .ptm-mega__sec-link .ptm-mega__ico img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--ptm-border); background: #fff;
}
.ptm-mega__panel--doors .ptm-mega__sec-link { padding: 5px 6px; }

/* ---- 7. A grouped listing says what is inside it, on the card. */
.ptm-card__range {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  max-width: 100%; padding: 2px 8px; border-radius: 6px;
  background: #F4F7FF; border: 1px solid var(--ptm-lighter, #CBD8F5);
  font-size: .68rem; font-weight: 700; color: var(--ptm-primary-deep, #1E40AF);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptm-card__range svg { flex: none; }

/* ---- 8. Live search suggestions, under any search box. */
.ptm-sug {
  position: fixed; z-index: 150;
  background: #fff; border: 1px solid var(--ptm-border); border-radius: 14px;
  box-shadow: 0 20px 44px -22px rgba(10, 26, 58, .7);
  max-height: min(70vh, 540px); overflow-y: auto; overscroll-behavior: contain;
}
.ptm-sug[hidden] { display: none !important; }
.ptm-sug__cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 6px; }
.ptm-sug__cats a {
  padding: 5px 10px; border-radius: 999px; text-decoration: none;
  background: var(--ptm-bg, #F4F6FB); border: 1px solid var(--ptm-border);
  font-size: .74rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48);
}
.ptm-sug__item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  text-decoration: none; color: inherit; border-top: 1px solid var(--ptm-line, #EEF1F6);
}
.ptm-sug__item:hover, .ptm-sug__item.is-hot { background: #F7F9FF; }
.ptm-sug__item img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #fff; border: 1px solid var(--ptm-border); }
.ptm-sug__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ptm-sug__txt b { font-size: .86rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptm-sug__txt small { font-size: .7rem; color: var(--ptm-soft); }
.ptm-sug__price { flex: none; display: grid; text-align: right; font-size: .84rem; font-weight: 800; color: var(--ptm-primary-deep, #1E40AF); }
.ptm-sug__price s { font-size: .7rem; font-weight: 600; color: var(--ptm-soft); }
.ptm-sug__all { display: block; padding: 11px 12px; text-align: center; text-decoration: none; background: var(--ptm-bg, #F4F6FB); font-size: .82rem; font-weight: 800; color: var(--ptm-primary, #2D5BC9); }
.ptm-sug__empty { padding: 14px; font-size: .82rem; line-height: 1.5; color: var(--ptm-soft); }

/* ---- 9. The listing swaps in place: a soft fade while it fetches. */
[data-ptm-results].is-loading { opacity: .55; pointer-events: none; transition: opacity .15s var(--ease); }
[data-ptm-results] .reveal { opacity: 1; transform: none; }
/* V43 — the free-gift links inside the trust tiles read as their tile, not as blue links */
.ptm-spp__feat-link, .ptm-assure__link { color: inherit; text-decoration: none; }
.ptm-spp__feat-link:hover, .ptm-assure__link:hover { text-decoration: underline; }

/* ---- V43.1 — the range badge wraps on a narrow card instead of clipping
   ("13 Mukhi options · 1 M…" on the phone's compact cards). */
@media (max-width: 767px) {
  .ptm-card__range {
    white-space: normal; overflow: visible; text-overflow: clip;
    align-items: flex-start; line-height: 1.3; padding: 3px 8px;
  }
  .ptm-card__range svg { margin-top: 2px; }
}

/* =====================================================================
   V44 — 2026-09-06
   The card's variant badge moves onto the photograph, and the footer's
   install button stops touching the contact strip.
   ================================================================== */

/* ---- 1. "13 options / 1 Mukhi–Gauri Shankar" reads on the photograph.
        The owner: *"ये जो text लिखा हुआ 7 mm, ये शायद image के ऊपर आ जाए…
        क्योंकि काफी बड़ा दिख रहा है"*. Same information, no line of its own
        under the title: a frosted chip at the foot of the picture, count
        over range, clear of the wishlist button at bottom right. */
.ptm-card__stage .ptm-card__range {
  position: absolute; left: 10px; bottom: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 64px);
  padding: 5px 9px; border-radius: 10px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(12, 32, 74, .10);
  box-shadow: 0 8px 18px -12px rgba(10, 26, 58, .6);
  color: var(--ptm-primary-deep, #1E40AF);
  font: 800 .62rem/1.15 var(--font-body);
  white-space: normal; overflow: hidden; text-overflow: clip;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none;
}
.ptm-card__stage .ptm-card__range svg { flex: none; opacity: .8; }
.ptm-card__stage .ptm-card__range > span { display: grid; gap: 1px; min-width: 0; }
.ptm-card__stage .ptm-card__range b { font-weight: 800; }
.ptm-card__stage .ptm-card__range i {
  font-style: normal; font-weight: 600; font-size: .57rem;
  color: #55617A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 767px) {
  .ptm-card__stage .ptm-card__range {
    left: 8px; bottom: 8px; padding: 4px 7px; gap: 4px;
    max-width: calc(100% - 54px); font-size: .58rem;
  }
  /* the longest real range is "1 Mukhi–Gauri Shankar"; at this size it fits a
     two-across phone card whole, which beats an ellipsis on every group. */
  .ptm-card__stage .ptm-card__range i {
    font-size: .5rem; letter-spacing: -.01em;
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .ptm-card__stage .ptm-card__range svg { width: 9px; height: 9px; }
}

/* ---- 2. The footer's install button, centred with room around it.
        It was left-aligned and sat right on top of the website / email /
        phone strip — the owner circled the pair together. */
.ptm-footer__install.is-on {
  display: flex; justify-content: center; text-align: left;
  margin: 20px auto 22px; width: max-content; max-width: calc(100% - 24px);
}

/* ---- 3. The two Rudraksha rails sit closer together than two unrelated
        sections would: they are one idea, "more of this bead". */
.ptm-look--mukhi + .ptm-look--mukhi { margin-top: 6px; }


/* =====================================================================
   V45 — 2026-09-06                                      MUST STAY LAST
   The phone drawer, from the owner's screenshots: the Google card lay on
   top of the WhatsApp / Call bar, the LOGIN link fell off the right edge
   as "LOG", and the install offer wore a parcel glyph instead of our logo.
   ================================================================== */

/* ---- 1. NOTHING FLOATS OVER THE OPEN DRAWER.
        `.ptm-mm` is z-index 112; the sign-in nudge (117), the install card
        and the chat launcher are all fixed to the bottom of the screen and
        painted straight over the contact bar, so the two buttons could be
        seen but never tapped. While the drawer is open they stand down. */
body.ptm-menu-lock .ptm-signin-nudge,
body.ptm-menu-lock .ptm-install-pop,
body.ptm-menu-lock .ptm-sup { display: none !important; }

/* ---- 2. THE CONTACT BAR — two real buttons.
        `.ptm-mm a { display: block }` in ptm.css outranked the button's own
        `inline-flex`, so the icon and label were loose inline text in a
        46px box, and "Call us" was a pale tile that did not read as a
        button beside a solid green one. Both are solid, both centred, and
        the bar keeps a thumb's room above the bottom edge of the phone. */
.ptm-mm .ptm-mm__foot { padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
.ptm-mm .ptm-mm__foot .ptm-mm__fbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 10px; border-radius: 12px;
  font-size: .86rem; font-weight: 800; line-height: 1.1;
  border-bottom: 0; text-decoration: none;
}
.ptm-mm .ptm-mm__foot .ptm-mm__fbtn--wa   { background: #1FA855; color: #fff; border: 0; }
.ptm-mm .ptm-mm__foot .ptm-mm__fbtn--call { background: var(--ptm-navy-900, #0B1E48); color: #fff; border: 0; }
.ptm-mm .ptm-mm__foot .ptm-mm__fbtn:active { transform: translateY(1px); }

/* ---- 3. "LOG" — the free-gift row's LOGIN link, cut off by the panel edge.
        The text beside the gift icon is a grid item, and a grid item will
        not shrink below its content, so the row overflowed and the link was
        pushed past the drawer's right edge (the panel clips). The text may
        shrink now, and LOGIN is a chip that keeps its own width. */
.ptm-mm .ptm-mm__promo { gap: 10px; }
.ptm-mm .ptm-mm__promo-txt { flex: 1 1 auto; min-width: 0; }
.ptm-mm .ptm-mm__promo-txt strong { font-size: .86rem; }
.ptm-mm .ptm-mm__promo > a:not(.ptm-mm__promo-txt) {
  flex: none; margin-left: auto; padding: 9px 12px;
  border: 1px solid var(--ptm-lighter, #CBD8F5); border-radius: 999px;
  background: #fff; color: var(--ptm-primary-deep, #1E40AF);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-decoration: none;
}

/* ---- 4. The install offer wears the PTM logo. */
.ptm-mm__install i img,
.ptm-install-pop__ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ptm-mm__install i { overflow: hidden; padding: 3px; }
.ptm-install-pop__ico { display: grid; place-items: center; }
.ptm-footer__install-ico {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  object-fit: contain; background: rgba(255, 255, 255, .9); padding: 2px;
}


/* =====================================================================
   V46 — 2026-09-07
   The owner's payment-method discounts (confirmed on a call) and two
   card-listing cleanups.
   ================================================================== */

/* ---- 1. Phone product page: the category rail comes back, the offers
        band goes. Both showed the same thing two different ways on a
        screen too narrow for either to earn its place twice — the rail
        gets you somewhere, the band only repeated what the buy box and
        checkout already say. */
@media (max-width: 991px) {
  body.ptm-product-page .ptm-band { display: none; }
}

/* ---- 2. The card's variant range moves off the photograph and back
        beside the title, small. V44 put it on the image because the boxed
        line under the title read "काफी बड़ा" (too heavy); V46 gave it its
        own boxed row beside the title, which made a card carrying it taller
        than its neighbour and threw the row's Add to cart buttons out of
        line — "disbalance", the owner's word for it, circled on a
        screenshot of two misaligned cards. One plain text line, the same
        height whether it wraps or not, fixes both. */
.ptm-card__range {
  margin: 1px 0 2px; max-width: 100%;
  color: var(--ptm-primary-deep, #1E40AF);
  font: 700 .66rem/1.25 var(--font-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* =====================================================================
   V47 — 2026-09-07                                       MUST STAY LAST
   The next round from the same call: the reward strip's icons, a repeated
   category/title, the phone header wordmark, a card-height mismatch, the
   sticky bar's total, and a two-step drawer menu.
   ================================================================== */

/* ---- 1. Any card that runs one line shorter than its row-mate no longer
        leaves the Add to cart button stranded above empty space — "disbalance",
        the owner's word, circled on a screenshot of two misaligned cards.
        `.ptm-card` is already a column and `.ptm-card__body` already fills
        it (`flex:1`); pinning the actions to that column's bottom is the
        actual fix, not a card-by-card patch for whichever line caused it
        this time. */
.ptm-card__actions { margin-top: auto; }

/* ---- 2. The drawer's nested sections: collapsed until tapped, one open
        choice at a time. Birthstone alone used to lay out 57 stone links
        the moment it opened; a section is now a row like Silver Jewellery's
        list, and tapping it is what reveals its real choices — "पहले तीन
        option, फिर उसके बाद खुल के आए दोबारा", the owner's own description
        of the flow. Applies to every is_multisection panel (Birthstone,
        Rudraksha, Rings, Pendants) — one shared component, one fix. */
.ptm-mm__sec-title--toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left;
}
.ptm-mm__sec-title--toggle svg {
  flex: none; opacity: .6; transition: transform .25s var(--ease);
}
.ptm-mm__sec.is-open .ptm-mm__sec-title--toggle svg { transform: rotate(180deg); }
.ptm-mm__sec-links {
  display: none;
  padding-bottom: 6px;
}
.ptm-mm__sec.is-open .ptm-mm__sec-links { display: grid; }

/* ---- 3. The sticky bar's price is the total, matching the qty stepper
        beside it — ptm.js now multiplies `data-unit` by the quantity into
        this same element, this rule just keeps the number from jumping in
        size as its digit count grows. */
.ptm-atcbar__line b { font-variant-numeric: tabular-nums; }

/* ---- 4. The phone header wordmark wears the logo's own colours — a
        gradient sampled from the mark itself (deep royal blue at the
        diamond, brightening to the sky-blue of the wave) with a slow sheen
        crossing it, the way the wave's highlight catches light in the
        logo. Off entirely for anyone who asked for less motion. */
@media (max-width: 991px) {
  .ptm-logo__brand {
    background: linear-gradient(100deg, #003090 20%, #2060c0 50%, #40a0f0 65%, #003090 85%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ptm-logo__brand { animation: ptmLogoSheen 5s linear infinite; }
  }
}
@keyframes ptmLogoSheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}


/* =====================================================================
   V50 — 2026-09-07                                       MUST STAY LAST
   The go-live round: the header search in "Desktop site" mode, the
   profile menu's stacking, and the sheet's View All tile.
   ================================================================== */

/* ---- 1. THE HEADER SEARCH BETWEEN 768px AND 991px.
        `ptm.css` turns the search on at 768px with `display: block`, and the
        three-column composition that lays it out only starts at 992px. In
        the band between the two the input and the submit button were plain
        blocks stacked on top of each other — the round blue blob hanging
        under the search bar in the owner's screenshot. That band is exactly
        where a phone lands when the reader turns on "Desktop site", which is
        how he found it. One row, both controls on it. */
@media (min-width: 768px) and (max-width: 991px) {
  .ptm-header .ptm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 6px 0 14px;
  }
  /* Two absolutely-positioned leftovers from the phone cascade land on the
     input once this is a row: the loose magnifier, and — because
     `.ptm-search svg` catches EVERY svg in the form, including the one in
     the submit button — the button's own icon, which flew out of its button
     to left:14px and sat on the placeholder. That is the grey magnifier over
     "Search …" in the screenshot, and why the button looked empty. */
  .ptm-header .ptm-search > svg { display: none; }
  .ptm-header .ptm-search button svg { position: static; transform: none; }
  /* the decorative "Search" pill is for the phone layout; here there is a
     real button doing the same job two centimetres away */
  .ptm-header .ptm-search::after { display: none; }
  .ptm-header .ptm-search input {
    flex: 1 1 auto; min-width: 0;
    height: 40px; margin: 0; padding: 0 4px;
    border: 0; background: none; box-shadow: none;
  }
  .ptm-header .ptm-search select { flex: 0 0 auto; min-width: 0; height: 40px; }
  .ptm-header .ptm-search button {
    flex: 0 0 auto; float: none;
    width: 40px; height: 40px; padding: 0;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--ptm-primary-deep, #1E40AF); color: #fff; border: 0;
  }
}

/* ---- 2. THE PROFILE MENU COMES TO THE FRONT.
        It is z-index 60 inside .ptm-stickytop, which is z-index 40 — so it
        was never competing with the buy bar (75), the chat launcher (96) or
        the sign-in nudge (117) at all, it was losing to all of them before
        its own number was ever read. ptm.js marks the body while it is open;
        110 clears the page furniture and still sits under the side cart
        (120/125) and its overlay, which have to cover the header. */
body.ptm-acct-open .ptm-stickytop { z-index: 110; }

/* ---- 3. The sheet's "View All …" tile spans the row.
        In the two-column link grid a long branch name — "View All Silver
        Rudraksha Pendants" — wrapped to three lines beside a one-line
        "2 Mukhi" and threw the whole grid out. It is a heading, not one of
        the choices, so it gets the full width. */
.ptm-mm__sec-links .ptm-mm__subrow--all { grid-column: 1 / -1; }


/* =====================================================================
   V51 — 2026-09-08                                       MUST STAY LAST
   ================================================================== */

/* ---- 1. THE ACCOUNT MENU WAS TRAPPED INSIDE THE HEADER.
        `.ptm-header` carries `backdrop-filter: blur(20px)`, and a
        backdrop-filter CREATES A STACKING CONTEXT. The header is
        `position: static`, so its `z-index: 30` was never applied — the
        whole header therefore painted in DOM order, i.e. BEFORE the
        category rail that follows it. `.ptm-acct__menu`'s own z-index of 60
        was sealed inside that context and could not escape, which is why
        raising the menu to 9999 and dropping the rail to 1 both changed
        nothing: the rail drew over the top half of the dropdown and only
        "Track order" showed. Giving the header a position while the menu is
        open lets its z-index finally count, and the whole header — dropdown
        included — rises above the rail. */
body.ptm-acct-open .ptm-header { position: relative; z-index: 60; }


/* =====================================================================
   V54 — 2026-09-09                                       MUST STAY LAST
   The product photograph on a phone, and a discount that reads premium.
   ================================================================== */

/* ---- 1. THE PRODUCT PHOTOGRAPH GETS THE PHONE'S WIDTH.
        On a 390px screen the gallery was 316px: the container gives away
        20px a side and `.ptm-spp__layout` another 16px, so 72px of a phone
        went to padding around the one thing the customer came to look at.
        The gallery breaks out of both, keeping an 8px inset so it still
        reads as a card rather than a raw bleed. 316px -> 372px, a 38%
        bigger picture by area. */
@media (max-width: 767px) {
  /* V56 — `.ptm-spp__layout` is a white CARD, so breaking the gallery out of
     it (V54) left the card's rounded corner sticking out behind the photo.
     The card itself goes edge to edge instead and gives up most of its own
     padding; the gallery grows inside it and nothing protrudes. 316 -> 370px. */
  .ptm-spp__layout {
    margin-inline: -20px;                 /* cancel .ptm-container's padding */
    padding-inline: 10px;
    border-radius: 0;
  }
  .ptm-spp__layout > .ptm-gallery { margin-inline: 0; width: auto; }

  /* The photograph already carries a NEW ribbon and a 51% OFF ribbon in its
     corners. The red/green pair repeating both underneath was the same fact
     a third and fourth time, in the loudest colours on the page. */
  .ptm-spp__badges { display: none; }
  .ptm-gallery__main { border-radius: 16px; }

  /* Thumbnails were `object-fit: cover`, which CROPS — an oval stone or a
     long pendant lost its ends, which is the "thumbnail cut" he circled.
     `contain` on a soft tile shows the whole piece. */
  .ptm-gallery__thumbs button img {
    object-fit: contain;
    background: var(--ptm-bg, #F4F6FB);
    padding: 4px;
  }
}

/* ---- 2. THE DISCOUNT READS PREMIUM, AND SAYS ITSELF ONCE.
        The same "51% off" appeared twice on one card — a loud magenta pill
        on the photograph and a green pill beside the price — plus the green
        coupon chip under it: three different treatments competing on a card
        140px wide. The owner: "percentage थोड़ा ज़्यादा premium लगेगा".
        The corner ribbon keeps the job in the brand's navy with a
        champagne-gold figure; the one beside the price steps back to quiet
        text, because the struck-through MRP already tells that story. */
.ptm-ribbon--off {
  background: var(--ptm-navy-900, #0B1E48);
  color: #E8C87A;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 4px 12px -6px rgba(10, 26, 58, .8);
}
/* `.ptm-card__price-row .ptm-card__off` is set three times earlier in this
   file, so a bare `.ptm-card__off` never won — the green pill survived V54
   untouched. Matching that specificity, and dropping the pill for plain text
   so the row fits: at 360px the price row was OVERFLOWING its card, which is
   why the owner saw "51% off" fall below the price instead of beside it. */
.ptm-card__price-row .ptm-card__off {
  background: none;
  padding: 0;
  color: var(--ptm-soft, #7A879C);
  font-weight: 700;
  font-size: .68rem;
  white-space: nowrap;
}
/* Keep the three parts on one line, and let the struck MRP be the thing that
   gives way if a very long price ever needs the room. */
.ptm-card__price-row { flex-wrap: nowrap; min-width: 0; }
.ptm-card__price-row .ptm-card__price { flex: 0 0 auto; }
.ptm-card__price-row .ptm-card__strike { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- 3. The cart's offers: what each code is worth on THIS basket, one tap
        to apply, and the one in force clearly marked. */
.ptm-cart-offers { margin: 14px 0 4px; display: grid; gap: 8px; }
.ptm-cart-offers__lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ptm-soft, #7A879C);
}
.ptm-cart-offer {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  align-items: center; padding: 10px 12px;
  border: 1px dashed var(--ptm-lighter, #CBD8F5); border-radius: 12px;
  background: linear-gradient(180deg, #F7F9FF, #fff);
  text-decoration: none; color: inherit;
}
.ptm-cart-offer b {
  grid-row: 1 / span 2; align-self: center;
  padding: 6px 9px; border-radius: 9px;
  background: var(--ptm-navy-900, #0B1E48); color: #E8C87A;
  font-size: .78rem; font-weight: 800;
}
.ptm-cart-offer span { font-size: .78rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48); }
.ptm-cart-offer em { font-style: normal; font-size: .72rem; color: var(--ptm-soft, #7A879C); }
.ptm-cart-offer.is-on {
  border-style: solid; border-color: #1FA855;
  background: linear-gradient(180deg, #EAF7F0, #fff);
}
.ptm-cart-offer.is-on em { color: #14663F; font-weight: 800; }
.ptm-cart-offers__fine { margin: 2px 0 0; font-size: .7rem; color: var(--ptm-soft, #7A879C); }

/* ---- 4. THE VIDEO AND GUIDE ROWS OPEN ON A CENTRED CARD.
        Both snapped to `start`, so the row opened flush-left on card one with
        a peek only on the right — it read as the end of a list rather than
        the middle of one. The owner, with the music-carousel reference:
        "पहला video हमेशा ना दिखे, बीच में एक video दिखे, side-side में हर जगह
        झलक दूसरे video की दिखे".

        Snapping to centre plus a side padding of half the leftover width lets
        the first and last cards reach the middle too, so every position shows
        a slice of what is either side of it. Phone only — the desktop rows
        show several cards at once and have nothing to centre. */
@media (max-width: 767px) {
  .ptm-video .ptm-vidrow__track {
    padding-inline: calc(50% - 121px);      /* card is 242px */
    scroll-padding-inline: calc(50% - 121px);
  }
  .ptm-video .ptm-vidcard { scroll-snap-align: center; }

  .ptm-journal .ptm-rail__track {
    padding-inline: calc(50% - 137px);      /* card is 273px */
    scroll-padding-inline: calc(50% - 137px);
  }
  .ptm-journal .ptm-jcard { scroll-snap-align: center; }
}

/* ---- 5. City suggestions under the checkout field. */
.ptm-citysug {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--ptm-border); border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(10, 26, 58, .55);
  overflow: hidden; max-height: 260px; overflow-y: auto;
}
.ptm-citysug__item {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 10px 12px; border: 0; background: none; cursor: pointer; text-align: left;
}
.ptm-citysug__item + .ptm-citysug__item { border-top: 1px solid var(--ptm-border); }
.ptm-citysug__item b { font-size: .88rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48); }
.ptm-citysug__item span { font-size: .74rem; color: var(--ptm-soft, #7A879C); }
.ptm-citysug__item:hover, .ptm-citysug__item.is-on { background: var(--ptm-bg, #F4F6FB); }

/* ---- 6. "Gifts that celebrate the bond" becomes a carousel on a phone.
        It was a single-column stack 834px tall — three things one under the
        other, which is the "odd और simple" the owner meant. Same treatment
        the video row just got: cards side by side, centre-snapped, with a
        slice of the next one showing so it reads as something to swipe.
        The copy block leads, then the tiles; `align-items: stretch` keeps
        them the same height without picking a number that would break the
        moment the copy changes. */
@media (max-width: 767px) {
  .ptm-camp__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    align-items: stretch;
    gap: 14px;
    padding-inline: 11%;               /* (100% - 78%) / 2, so a card centres */
    scroll-padding-inline: 11%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ptm-camp__grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .ptm-camp__grid > * { scroll-snap-align: center; min-width: 0; }

  /* The caption is an absolute overlay inside each tile, over a scrim that
     fades from transparent at the top. A narrower card wraps that caption to
     more lines, so its first line rose into the clear part of the gradient
     and sat on bright silver — unreadable. The scrim starts sooner and goes
     darker to match the taller block of text. */
  .ptm-camp__tile .ptm-camp__copy {
    background: linear-gradient(180deg,
      rgba(9, 18, 40, 0) 0%,
      rgba(9, 18, 40, .55) 32%,
      rgba(9, 18, 40, .88) 72%,
      rgba(9, 18, 40, .95) 100%);
    padding-top: 34px;
  }
}

/* ---- 7. The saved delivery address, offered rather than poured in. */
.ptm-savedaddr {
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--ptm-lighter, #CBD8F5); border-radius: 14px;
  background: linear-gradient(180deg, #F7F9FF, #fff);
}
.ptm-savedaddr__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.ptm-savedaddr__head b {
  font-size: .74rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ptm-primary-deep, #1E40AF);
}
.ptm-savedaddr__x {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: .76rem; font-weight: 700; color: var(--ptm-soft, #7A879C); text-decoration: underline;
}
.ptm-savedaddr__who { margin: 8px 0 2px; font-size: .88rem; font-weight: 700; color: var(--ptm-navy-900, #0B1E48); }
.ptm-savedaddr__line { margin: 0 0 12px; font-size: .84rem; line-height: 1.5; color: var(--ptm-mid, #55617A); }
.ptm-savedaddr__go { width: 100%; }

/* ---- 8. RING SIZE AND STONE WEIGHT READ AS ONE BOX.
        They were two stacked panels with a 16px gap — the size chooser bare
        on the page, the weight card bordered and rounded under it. The owner:
        "ये जो size है और अपना stone weight… एक box बनावा और ring size, वो भी
        उसके अंदर ही आता है. तो बहुत ही अच्छा लगेगा देखने में."
        Joined into a single bordered panel: the size half takes the top
        corners, the weight card the bottom ones, and the seam between them is
        one divider line. `:has()` keeps this to the case where BOTH are
        present — a size chooser on its own is still a plain block, which is
        how it should look when there is nothing under it to join to. */
.ptm-optpick:has(+ .ptm-vcard) {
  margin-bottom: 0;
  padding: 14px 16px 12px;
  background: #fff;
  border: 1px solid var(--ptm-border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
}
.ptm-optpick:has(+ .ptm-vcard) + .ptm-vcard {
  /* `.ptm-spp__info` is a flex column with a 13px row-gap, which no margin on
     the children can close — the two halves have to be pulled back together
     by exactly that much or the "one box" shows a seam of page behind it. */
  margin-top: -13px;
  border-top: 1px solid var(--ptm-border);
  border-radius: 0 0 16px 16px;
}

/* ---- 9. THE STICKY BAR'S BUTTONS STOP BEING CUT.
        At 360px "Add to cart" had 100px to live in and was carrying 36px of
        horizontal padding, an icon and a `nowrap` label — so the text was
        clipped on both axes (12px vertical padding + a 16px line in a 38px
        box overflows too). The owner: "कोई भी button ना किसी भी size पे कटे
        ना: छोटे हो जाए text, बड़े हो जाए, अच्छे हो जाए, crisp हो जाए."
        The padding comes down, the two share the leftover space equally, the
        label may shrink, and the box is min-height so it can never be shorter
        than its own text. */
@media (max-width: 767px) {
  .ptm-atcbar__qty { flex: 0 0 auto; }
  .ptm-atcbar__btns { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .ptm-atcbar__btns .ptm-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    min-height: 44px;
    height: auto;
    gap: 6px;
    font-size: .8rem;
    line-height: 1.15;
  }
  /* the label, not the button, is what gives way if the space runs out */
  .ptm-atcbar__btns .ptm-btn > span,
  .ptm-atcbar__btns .ptm-btn {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ptm-atcbar__btns .ptm-btn svg { flex: none; width: 15px; height: 15px; }
}

/* ---- 9. NO BUTTON IS CUT AT ANY WIDTH.
        A scan across 360 / 390 / 414 / 768 / 1440 found exactly two that
        were: the sticky buy bar's "Add to cart" and "Buy Now". They carried
        `padding: 12px 18px` around an icon and a nowrap label inside a 100px
        box, so the text was clipped sideways AND the 12px top and bottom
        padding overflowed a 38px button. The owner: "कोई भी button ना किसी भी
        size पे कटे ना — छोटे हो जाए text, बड़े हो जाए, अच्छे हो जाए."
        The pair now share the row evenly, the padding is proportionate, the
        label shrinks before it clips, and the height is a minimum rather
        than a ceiling. */
@media (max-width: 767px) {
  .ptm-atcbar__btns { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .ptm-atcbar__btns .ptm-btn {
    flex: 1 1 0; min-width: 0;
    min-height: 44px; height: auto;
    padding: 0 10px; gap: 6px;
    font-size: .8rem; line-height: 1.15;
    white-space: nowrap; overflow: hidden;
  }
  .ptm-atcbar__btns .ptm-btn > span,
  .ptm-atcbar__btns .ptm-btn { text-overflow: ellipsis; }
  .ptm-atcbar__btns .ptm-btn svg { flex: none; width: 15px; height: 15px; }
  /* the stepper was taking 116px of a 336px bar, leaving the two buttons
     100px each — it only ever needs to fit "− 1 +" */
  .ptm-atcbar__qty { flex: 0 0 auto; max-width: 96px; }
}


/* =====================================================================
   V57 — 2026-09-09                                       MUST STAY LAST
   The mark, redrawn as vector, and put back on the phone.
   ================================================================== */

/* ---- 1. THE LOGO ON A PHONE.
        V43 hid the mark below 992px and left the wordmark alone, and V47 gave
        that wordmark a gradient sheen. The owner: "जो phone में लिखा हुआ आता
        है, PTM Gems, बहुत ही अजीब लगता है… मुझे लग रहा है logo ही डालना
        चाहिए". So the mark is back — small, beside the words, not instead of
        them — and the wordmark drops the gradient for one solid navy, which
        is what stopped it reading oddly: a gradient on 1.2rem of text at
        390px is noise, not polish. */
@media (max-width: 991px) {
  .ptm-logo {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }
  .ptm-logo__img {
    display: block !important;
    width: 30px; height: 30px;
    flex: none;
    object-fit: contain;
  }
  .ptm-logo__text {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
  }
  .ptm-logo__brand {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ptm-navy-900, #0B1E48);
    animation: none;
    font-size: 1.16rem;
    letter-spacing: -.005em;
  }
  /* the strapline earns its place now that it sits under a mark, not alone */
  .ptm-logo__tag {
    display: block !important;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ptm-soft, #7A879C);
    white-space: nowrap;          /* it wrapped to two lines and read cramped */
  }
  /* on the narrowest phones the strapline has nowhere to go — the mark and
     the name carry the brand on their own there */
  @media (max-width: 374px) {
    .ptm-logo__tag { display: none !important; }
  }
}

/* ---- 2. THE DROP-DOWN'S SECTION TITLES READ AS THINGS YOU TAP.
        "Birthstone Rings / Birthstone Pendants / Loose Birthstones" were
        small grey uppercase labels — they looked like captions, not choices.
        The owner: "ये सारे title highlighted हो के आएँ, drop down बहुत ही
        प्यारा लगेगा". Navy and bold on a tinted row, with the chevron given
        its own circle so the tap target is obvious. */
.ptm-mm__sec-title--toggle {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #F4F7FF, #EDF2FD);
  border: 1px solid var(--ptm-lighter, #CBD8F5);
  color: var(--ptm-navy-900, #0B1E48);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}
.ptm-mm__sec + .ptm-mm__sec { margin-top: 8px; }
.ptm-mm__sec-title--toggle svg {
  width: 26px; height: 26px; padding: 6px;
  border-radius: 50%; background: #fff;
  border: 1px solid var(--ptm-lighter, #CBD8F5);
  color: var(--ptm-primary-deep, #1E40AF); opacity: 1;
}
.ptm-mm__sec.is-open .ptm-mm__sec-title--toggle {
  background: var(--ptm-navy-900, #0B1E48);
  border-color: var(--ptm-navy-900, #0B1E48);
  color: #fff;
}
.ptm-mm__sec.is-open .ptm-mm__sec-title--toggle svg { background: rgba(255,255,255,.14); border-color: transparent; color: #E8C87A; }
.ptm-mm__sec-links { padding-top: 8px; }

/* ---- 3. THE OFFERS STRIP UNDER THE HEADER, IN THE BRAND'S COLOURS.
        Three flat blue chips competing with the header's own blue. Navy with
        a champagne figure matches the ribbons and the cart's offer cards, so
        a discount looks the same everywhere on the site. */
.ptm-band { background: linear-gradient(180deg, #F7F9FF, #EEF3FD); border-bottom: 1px solid var(--ptm-lighter, #CBD8F5); }
.ptm-band__lbl { color: var(--ptm-soft, #7A879C); }
.ptm-band__card {
  background: #fff;
  border: 1px solid var(--ptm-lighter, #CBD8F5);
  border-radius: 12px;
  box-shadow: 0 6px 16px -12px rgba(10, 26, 58, .55);
}
.ptm-band__card b {
  background: var(--ptm-navy-900, #0B1E48);
  color: #E8C87A;
  border-radius: 9px;
}
.ptm-band__card b small { color: #E8C87A; opacity: .85; }
.ptm-band__card strong { color: var(--ptm-navy-900, #0B1E48); }
.ptm-band__card em { color: var(--ptm-soft, #7A879C); }


/* =====================================================================
   V58 — 2026-09-09                                       MUST STAY LAST
   The owner's own artwork as the mark, and Featured Products as an arc.
   ================================================================== */

/* ---- 1. THE MARK.
        It is a square navy tile now (see the note in header.php for why the
        artwork cannot be cut out onto the cream header). The PNG already
        carries its own rounded corners and transparency, so all this does is
        size it and stop anything else clipping it. */
.ptm-logo__img {
  object-fit: contain;
  border-radius: 0;            /* the corners are in the artwork */
  background: none;
}
@media (max-width: 991px) {
  .ptm-logo__img { width: 34px; height: 34px; }
}

/* ---- 2. FEATURED PRODUCTS — THE ARC.
        One horizontal scroller. The JS writes --f-scale / --f-drop / --f-fade
        per card from its distance to the centre of the track; everything here
        just consumes them, so with JS off the vars fall back to 1 / 0 / 1 and
        the section is an ordinary snapping row of cards. */
.ptm-feat { padding: 8px 0 clamp(28px, 5vw, 56px); overflow: hidden; }
.ptm-feat__wrap { position: relative; }

.ptm-feat__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Room for the tallest card to sit up, and for the outer ones to drop. */
  padding: 10px 0 66px;
  /* The first and last card must be able to reach the middle. */
  padding-inline: calc(50% - (var(--f-card) / 2));
  --f-card: 246px;
}
.ptm-feat__track::-webkit-scrollbar { display: none; }

.ptm-feat__cell {
  flex: 0 0 var(--f-card);
  width: var(--f-card);
  scroll-snap-align: center;
  transform: translateY(var(--f-drop, 0px)) scale(var(--f-scale, 1));
  transform-origin: 50% 0;
  opacity: var(--f-fade, 1);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
  will-change: transform;
}
/* While the user is dragging, following the finger beats easing behind it. */
.ptm-feat__wrap.is-live .ptm-feat__cell { transition-duration: .16s; }

.ptm-feat__cell .ptm-card {
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(11, 30, 72, .07);
  transition: box-shadow .28s ease;
}
.ptm-feat__cell.is-focus .ptm-card {
  box-shadow: 0 26px 60px rgba(11, 30, 72, .20);
  border-color: rgba(19, 75, 166, .28);
}
/* Only the card in the middle offers its button — the ones stepped down are
   too small to aim at, and five Add-to-cart buttons in a row is noise.
   `pointer-events` matters as much as the fade: an invisible button that still
   swallows taps is worse than a visible one, and a shopper reaching for the
   card behind it would have added the wrong piece to the cart. */
.ptm-feat__cell .ptm-card__actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ptm-feat__cell.is-focus .ptm-card__actions { opacity: 1; pointer-events: auto; }

.ptm-feat__nav {
  position: absolute;
  top: 40%;
  z-index: 3;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(11, 30, 72, .12);
  border-radius: 50%;
  background: #fff;
  color: var(--ptm-navy-900, #0B1E48);
  box-shadow: 0 6px 18px rgba(11, 30, 72, .12);
  cursor: pointer;
}
.ptm-feat__nav:hover { background: var(--ptm-navy-900, #0B1E48); color: #fff; }
.ptm-feat__nav--prev { left: clamp(6px, 3vw, 40px); }
.ptm-feat__nav--next { right: clamp(6px, 3vw, 40px); }

.ptm-feat__dots {
  display: flex; justify-content: center; gap: 7px;
  margin-top: -46px;
  position: relative; z-index: 2;
}
.ptm-feat__dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(11, 30, 72, .20);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.ptm-feat__dot.is-on { width: 20px; border-radius: 4px; background: var(--ptm-navy-900, #0B1E48); }

/* Phone: one card in the middle with a real slice of the next on each side —
   the same read as the video row, which he asked for by name. */
@media (max-width: 767px) {
  .ptm-feat__track { --f-card: 62vw; padding-bottom: 58px; }
  .ptm-feat__nav { display: none; }        /* swipe is the gesture here */
  .ptm-feat__dots { margin-top: -40px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .ptm-feat__track { --f-card: 260px; }
}
@media (min-width: 1100px) {
  .ptm-feat__track { --f-card: 288px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptm-feat__cell { transition: none; transform: none; opacity: 1; }
}


/* =====================================================================
   V60 — 2026-09-09                                       MUST STAY LAST
   The owner's own logo, at its own aspect ratio.
   ================================================================== */

/* The mark is his artwork now (2.48:1), not the square tile V58 built. Every
   older rule pins it to a square — 44x44, 38x38, 34x34, 30x30 — which would
   squash it, so height is the only thing set here and width follows. */
.ptm-logo__img {
  width: auto !important;
  height: 40px;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  background: none;
}
.ptm-stickytop.is-scrolled .ptm-logo__img { width: auto !important; height: 32px; }

@media (max-width: 991px) {
  /* V43 hid the mark below 992px; V57 brought it back. Keep it visible, and
     beat that `display:none !important` still sitting in the 12728 block. */
  .ptm-logo__img { display: block !important; width: auto !important; height: 30px; }
  .ptm-stickytop.is-scrolled .ptm-logo__img { height: 26px; }
}
/* Narrow phones. Measured, not guessed: with the wave at 30px the lockup ran
   98..281 at 390px while the header box ends at 370, so the cart button was
   clipped off the right edge — at 390 exactly, which is the width the owner
   reviews on. The wave keeps its size; the WORDMARK gives up the room, since
   the mark is the half that carries the brand. */
@media (max-width: 440px) {
  .ptm-logo { gap: 6px; min-width: 0; }
  .ptm-logo__img { height: 26px; }
  .ptm-logo__brand { font-size: .98rem; letter-spacing: -.01em; }
  .ptm-logo__tag { font-size: .44rem; letter-spacing: .07em; }
}
/* Below ~375 the words have nowhere left to go; the mark carries it alone. */
@media (max-width: 374px) {
  .ptm-logo__text { display: none !important; }
  .ptm-logo__img { height: 30px; }
}

/* ---- FEATURED ARC, V60 tuning.
        The curve is steeper now (drop up to 92px, was 52), so the track needs
        more room underneath or the outer cards clip against the section edge. */
.ptm-feat__track { padding-bottom: 104px; }
.ptm-feat__dots  { margin-top: -84px; }
@media (max-width: 767px) {
  .ptm-feat__track { padding-bottom: 92px; }
  .ptm-feat__dots  { margin-top: -74px; }
}

/* Windowed pager: the active dot plus two either side, the third shrunk to a
   hint. `[hidden]` needs the !important here — .ptm-feat__dot sets a display
   value, and an attribute selector loses to a class selector otherwise. That
   is the same trap that cost the checkout tick in V29. */
.ptm-feat__dot[hidden] { display: none !important; }
.ptm-feat__dot.is-edge { width: 4px; height: 4px; opacity: .55; }

/* ---- The arc, shared. The JS stamps `.ptm-arc__cell` on every card of any
        rail it drives, and writes --f-scale / --f-drop / --f-fade per card.
        Everything here just consumes them, so a rail with JS off keeps its
        normal size (the vars fall back to 1 / 0 / 1). */
.ptm-arc__cell {
  transform: translateY(var(--f-drop, 0px)) scale(var(--f-scale, 1));
  transform-origin: 50% 0;
  opacity: var(--f-fade, 1);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
  will-change: transform;
}
.ptm-arc.is-live .ptm-arc__cell { transition-duration: .16s; }
@media (prefers-reduced-motion: reduce) {
  .ptm-arc__cell { transition: none; transform: none; opacity: 1; }
}
/* The video and journal rows shrink and drop now, so they need the same room
   underneath that the featured track has, or the outer cards clip. */
.ptm-vidrow__track,
[data-ptm-arc-journal] .ptm-rail__track { padding-bottom: 84px; }
.ptm-vidrow, [data-ptm-arc-journal] { overflow: visible; }


/* =====================================================================
   V61 — 2026-09-09
   The state field types. It borrows the city field's suggestion card, so
   the two controls under the same heading behave and look the same.
   ================================================================== */
.ptm-statesug { max-height: 288px; }
.ptm-statesug .ptm-citysug__item.is-current b { color: var(--ptm-primary, #2D5BC9); }
.ptm-statesug .ptm-citysug__item span {
  margin-left: auto; font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
/* The box replaces a <select>, so it must not inherit a select's arrow or
   its narrower line height from the field styles. */
.ptm-co__field .ptm-statesug__input { width: 100%; }