/* ============================================================
   OPTIMAL WELLNESS — shop page
   Rides on styles.css: same tokens, fonts, buttons, nav, footer.
   Dark by necessity, not preference — the vial photography is lit
   on plum, so the cards must sit on plum for the shots to blend
   edge to edge instead of floating on a lighter tile.
   ============================================================ */

/* styles.css holds the page still behind the home-page loader with
   `html:not(.ready) body { overflow: hidden }`, and only scroll-cinematic.js
   ever adds .ready. This page doesn't load that script and has no loader, so
   the lock would never lift and the page could not be scrolled. Undo it here
   rather than in JS alone, so it holds even if the script fails. */
html:not(.ready) body.shop-page { overflow: auto; }

/* The home page hides the nav over a full-bleed hero; there is no hero
   here, so the bar carries its scrolled treatment from the first pixel. */
.shop-page .nav {
  background: rgba(18, 12, 30, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.shop-page main { padding-top: 78px; }

/* ---------- Header ---------- */
.sp-head {
  position: relative;
  padding: clamp(46px, 6vw, 76px) 0 clamp(34px, 4.4vw, 54px);
  border-bottom: 1px solid rgba(163, 149, 228, .18);
  background:
    radial-gradient(84% 60% at 50% 0%, rgba(163, 149, 228, .17), rgba(163, 149, 228, 0) 66%),
    var(--plum);
}
.sp-head .eyebrow { color: var(--violet); }
.sp-head h1 { font-size: clamp(34px, 5vw, 60px); margin: 6px 0 0; }
.sp-head .lead { max-width: 620px; margin: 18px 0 0; color: var(--text-dim); }
.sp-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 24px 0 0; font-size: 12.5px; color: var(--text-dim);
}
.sp-key {
  font-family: var(--font-caps); font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.sp-key-cart { background: rgba(207, 178, 230, .17); color: var(--lav); border: 1px solid rgba(207, 178, 230, .32); }
.sp-key-rx { background: rgba(226, 169, 78, .16); color: var(--gold); border: 1px solid rgba(226, 169, 78, .32); margin-left: 10px; }

/* ---------- Goal picker ----------
   Outcome-first entry point, mirroring the drip picker on the home page.
   Categories stay below as the taxonomy axis for people who already know
   what they want; the two are mutually exclusive so they can't fight. */
/* Bottom padding matters now that this band ends at a hard colour boundary.
   It was 0 — fine while the picker and the catalogue were the same dark
   ground, and the moment the catalogue went light the chips were sitting on
   the seam. */
.sp-picker { background: var(--ink); padding: clamp(34px, 4.4vw, 54px) 0 clamp(34px, 4.4vw, 54px); }
.picker-q {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 2.6vw, 30px); color: var(--text);
}
.sp-goals { display: flex; flex-wrap: wrap; gap: 9px; }
.sp-goals .pchip {
  font-family: var(--font-caps); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); background: rgba(163, 149, 228, .08);
  border: 1px solid rgba(163, 149, 228, .28); border-radius: 999px;
  padding: 12px 18px; min-height: 44px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.sp-goals .pchip:hover { border-color: var(--violet); background: rgba(163, 149, 228, .16); }
.sp-goals .pchip[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #171233; }
.sp-goals .pchip:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.sp-goal-lead {
  margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-dim);
  max-width: 620px; border-left: 2px solid var(--violet); padding-left: 14px;
}
.sp-goal-lead b { color: var(--text); font-weight: 650; }
.sp-browse {
  margin: 0 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(242, 236, 242, .42);
}

/* ---------- Catalogue ---------- */
.sp-catalogue { background: var(--ink); padding: clamp(26px, 3.4vw, 40px) 0 clamp(70px, 9vw, 120px); }
.sp-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 clamp(24px, 3vw, 36px); }
.sp-chip {
  font-family: var(--font-caps); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); background: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 17px; min-height: 44px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.sp-chip:hover { color: var(--text); border-color: rgba(207, 178, 230, .42); }
.sp-chip.is-on { color: #1E1033; background: var(--lav); border-color: var(--lav); }
.sp-chip:focus-visible { outline: 2px solid var(--lav); outline-offset: 3px; }

.sp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.sp-card {
  display: flex; flex-direction: column;
  background: var(--plum-2); border: 1px solid var(--plum-line); border-radius: 18px;
  padding: 0 clamp(16px, 1.5vw, 20px) clamp(18px, 1.8vw, 22px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* .sp-card sets display:flex, which outranks the UA sheet's [hidden]{display:none}
   — without this the filters set hidden=true and every card stayed on screen. */
.sp-card[hidden] { display: none; }
.sp-card:hover { transform: translateY(-4px); border-color: rgba(163, 149, 228, .42); box-shadow: 0 22px 50px rgba(11, 6, 26, .5); }
/* Negative side margins bleed the shot to the card edges — the plum in the
   photograph then meets the plum of the card with no visible seam. */
.sp-shot {
  margin: 0 calc(clamp(16px, 1.5vw, 20px) * -1) 4px;
  border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 1 / 1;
}
.sp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cat {
  margin: 0 0 6px; font-family: var(--font-caps); font-size: 9.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--violet);
}
.sp-card h3 { font-size: 19px; line-height: 1.2; margin: 0; }
.sp-blurb { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); flex: 1; }
.sp-price { font-family: var(--font-display); font-size: 26px; color: var(--gold); margin: 14px 0 12px; }
.sp-price span { font-family: var(--font-body); font-size: 12px; color: var(--text-dim); margin-left: 3px; }
.sp-act { align-self: stretch; justify-content: center; text-align: center; }
.sp-note { margin: 8px 0 0; min-height: 2.6em; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 236, 242, .42); text-align: center; }
.sp-empty { text-align: center; color: var(--text-dim); padding: 40px 0; }

/* ---------- How it works ---------- */
.sp-fineprint { background: var(--ink-2); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 92px) 0; }
.sp-fineprint h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 clamp(22px, 2.6vw, 32px); }
.sp-fineprint ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.sp-fineprint li { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 16px; }
.sp-fineprint li strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--text); margin-bottom: 6px; }
.sp-fineprint .fine { margin: clamp(26px, 3vw, 38px) 0 0; max-width: 760px; text-transform: none; letter-spacing: .01em; font-size: 13px; line-height: 1.7; }

/* ---------- Cart ---------- */
.sp-cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; display: flex; justify-content: center; padding: 0 0 16px; pointer-events: none; }
.sp-cartbar[hidden] { display: none; }
.sp-cartbar-open {
  pointer-events: auto; cursor: pointer;
  font-family: var(--font-caps); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--lav); color: #1E1033; border: none; border-radius: 999px;
  padding: 15px 26px; min-height: 48px;
  box-shadow: 0 14px 40px rgba(8, 4, 14, .55);
  display: inline-flex; align-items: center; gap: 10px;
}
.sp-cart-count { background: #1E1033; color: var(--lav); border-radius: 999px; padding: 2px 9px; font-size: 11px; }
.sp-cart-total { margin-left: 6px; }

.sp-cart {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 62;
  background: var(--plum); border-left: 1px solid var(--plum-line);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 80px rgba(2, 6, 14, .6);
}
.sp-cart[hidden] { display: none; }
.sp-cart header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--plum-line); }
.sp-cart header h2 { font-size: 22px; margin: 0; }
.sp-cart-close { position: relative; width: 44px; height: 44px; flex: none; background: none; border: 1px solid rgba(163, 149, 228, .3); border-radius: 999px; cursor: pointer; }
.sp-cart-close::before, .sp-cart-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; background: var(--text); border-radius: 2px; }
.sp-cart-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sp-cart-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.sp-cart-lines { list-style: none; margin: 0; padding: 8px 24px; overflow-y: auto; flex: 1; }
.sp-cart-lines li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 0; border-bottom: 1px dashed rgba(163, 149, 228, .2); }
.sp-cart-lines b { font-family: var(--font-body); font-weight: 650; font-size: 14.5px; }
.sp-cart-lines .ln-price { font-family: var(--font-display); font-size: 17px; color: var(--gold); }
.sp-qty { display: flex; align-items: center; gap: 4px; }
.sp-qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(163, 149, 228, .3); background: none; color: var(--text); font-size: 15px; cursor: pointer; line-height: 1; }
.sp-qty button:hover { border-color: var(--violet); color: var(--violet); }
.sp-qty span { min-width: 22px; text-align: center; font-size: 14px; }
.sp-cart-empty { padding: 30px 24px; color: var(--text-dim); font-size: 14.5px; }
.sp-cart footer { padding: 20px 24px 24px; border-top: 1px solid var(--plum-line); }
.sp-cart-sum { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.sp-cart-sum span { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.sp-cart-sum b { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--gold); }
.sp-checkout { width: 100%; justify-content: center; }
.sp-cart footer .fine { display: block; margin: 12px 0 0; text-align: center; font-size: 11px; text-transform: none; letter-spacing: .02em; }

.sp-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(2, 8, 10, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sp-scrim[hidden] { display: none; }

.sp-done { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(2, 8, 10, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sp-done[hidden] { display: none; }
.sp-done-card { background: var(--plum-2); border: 1px solid rgba(163, 149, 228, .3); border-radius: 20px; padding: clamp(28px, 4vw, 44px); max-width: 460px; text-align: center; }
.sp-done-card .eyebrow { color: var(--violet); }
.sp-done-card h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 12px; }
.sp-done-card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin: 0 0 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-fineprint ol { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-card h3 { font-size: 17px; }
  .sp-blurb { font-size: 12.5px; }
  .sp-price { font-size: 23px; }
}
@media (max-width: 520px) {
  /* Stay two-up rather than dropping to one: a single square shot per row
     puts one product on a whole phone screen, which is a long scroll for a
     24-item catalogue. Blurb drops out to keep the tiles compact. */
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sp-card { padding: 0 12px 14px; border-radius: 15px; }
  .sp-shot { margin: 0 -12px 4px; border-radius: 15px 15px 0 0; }
  .sp-card h3 { font-size: 15.5px; }
  .sp-blurb { display: none; }
  .sp-cat { font-size: 9px; }
  /* auto top margin (not margin-top, which the shorthand would reset) pins the
     price+button group to the card bottom so actions line up across a row. */
  .sp-price { font-size: 20px; margin: auto 0 10px; }
  .sp-price span { font-size: 11px; }
  .sp-act { padding-left: 8px; padding-right: 8px; font-size: 11px; letter-spacing: .08em; }
  .sp-note { font-size: 9px; letter-spacing: .06em; min-height: 2.8em; }
  .sp-legend { font-size: 12px; }
  .sp-key-rx { margin-left: 0; }
  .sp-chip { padding: 11px 13px; font-size: 10.5px; }
}

/* ==========================================================================
   Product detail drawer
   --------------------------------------------------------------------------
   Slides in from the right on desktop, rises as a sheet on phones. The panel
   is filled by shop.js on open rather than shipped 24 times over.
   ========================================================================== */

/* z-index on this page, so the next panel added does not repeat the bug this
   one shipped with:
       58  .sp-cartbar     the persistent bottom bar
       60  .sp-scrim       the dimming + blurring backdrop
       62  .sp-cart        cart panel, above the scrim
       64  .pdp            product drawer, above the scrim
       70  .sp-done        checkout confirmation, above everything
   The drawer was 60 — level with the scrim. The scrim is appended to <body>
   after the drawer, and at equal z-index later-in-DOM paints on top, so the
   scrim's blur(3px) and 60% black were being applied OVER the drawer. That is
   what made the copy look soft. */
.pdp {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 64;
  width: min(520px, 100vw);
  background: var(--ink-2);
  border-left: 1px solid rgba(207, 178, 230, .22);
  box-shadow: -30px 0 80px rgba(8, 4, 14, .6);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  display: flex; flex-direction: column;
}
/* transform:none rather than translateX(0) — a zero translate keeps the element
   on its own composited layer, where subpixel positioning can soften text. */
.pdp.is-open { transform: none; will-change: auto; }
.pdp[hidden] { display: none; }

.pdp-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(207, 178, 230, .28);
  background: rgba(18, 12, 30, .7); color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.pdp-close:hover { border-color: var(--lav); color: var(--lav); }

.pdp-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(22px, 4vw, 34px); }

.pdp-head { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.pdp-shot {
  width: 96px; height: 96px; object-fit: cover; border-radius: 14px;
  border: 1px solid rgba(207, 178, 230, .2); background: var(--ink-3);
}
.pdp-cat {
  font-family: var(--font-caps); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 6px;
}
.pdp h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.4vw, 1.75rem); line-height: 1.15; margin: 0; color: var(--porcelain); }
.pdp-line { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.pdp-price { font-family: var(--font-display); font-size: 27px; color: var(--gold); margin: 12px 0 0; }
.pdp-price span { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); margin-left: 3px; }

/* Prescription items say so before anything else — it changes what the page
   is even offering you. */
.pdp-rx {
  margin: 20px 0 0; padding: 14px 16px; border-radius: 12px;
  background: rgba(226, 169, 78, .09);
  border: 1px solid rgba(226, 169, 78, .34);
  font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.pdp-rx b { color: var(--gold); }

.pdp-fields { margin: 22px 0 0; }
.pdp-row, .pdp-pairs, .pdp-sources { padding: 15px 0; border-top: 1px solid rgba(207, 178, 230, .14); }
.pdp-fields dt {
  font-family: var(--font-caps); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--lav);
  margin: 0 0 7px;
}
.pdp-fields dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text); }

.pdp-pairs dd { display: flex; flex-wrap: wrap; gap: 7px; }
.pdp-pairs dd span {
  font-size: 12.5px; color: var(--text-dim);
  border: 1px solid rgba(207, 178, 230, .24); border-radius: 999px; padding: 5px 11px;
}
.pdp-sources ul { list-style: none; margin: 0; padding: 0; }
.pdp-sources li { font-size: 12.5px; line-height: 1.55; margin-bottom: 7px; color: var(--text-dim); }
.pdp-sources a { color: var(--lav); word-break: break-word; }
.pdp-sources i { font-style: normal; opacity: .75; }

.pdp-foot {
  margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(207, 178, 230, .18);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.pdp-cta { min-height: 48px; }
.pdp-legal { margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; color: rgba(242, 236, 242, .55); }

/* The card-level affordance shop.js injects. */
/* 44px in BOTH directions — a tall thin target is still a miss on a phone. */
.sp-more {
  margin-top: 10px; align-self: flex-start;
  background: none; border: 0; padding: 8px 14px 8px 0;
  min-width: 88px; text-align: left;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--lav); cursor: pointer;
  border-bottom: 1px solid rgba(207, 178, 230, .35);
  min-height: 44px;
}
.sp-more:hover { color: #E1C9F2; border-bottom-color: #E1C9F2; }
.sp-card { cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 620px) {
  .pdp {
    top: auto; left: 0; width: 100vw; height: 92vh;
    border-left: 0; border-top: 1px solid rgba(207, 178, 230, .22);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .pdp.is-open { transform: none; }
  .pdp-head { grid-template-columns: 72px 1fr; gap: 14px; }
  .pdp-shot { width: 72px; height: 72px; }
  .pdp-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp { transition: none; }
}

/* ==========================================================================
   Light room — 2026-08-25
   --------------------------------------------------------------------------
   The catalogue was one unbroken plum field with white text on it, which is
   both monotonous and inconsistent: the home page's apothecary section is a
   LIGHT room, and it hands straight over to this page. Walking from a light
   room into a dark one and calling it the same shop never made sense.

   So the page now runs dark masthead -> light catalogue -> dark fine print,
   the same three-zone shape the Journal uses. Gold carries value (prices, the
   Rx key, the flagship), violet carries language on light, and white is the
   surface rather than the ink.
   ========================================================================== */

/* The picker STAYS dark and the grid goes light, so the page alternates:
   dark masthead -> dark picker -> light catalogue -> dark fine print. Making
   the whole thing light just swapped one monotony for another; the point is
   rhythm, not brightness. The picker belongs with the chrome — it is the
   control surface — and the catalogue is the thing you read. */
.sp-catalogue { background: var(--porcelain); border-top: 1px solid rgba(226, 169, 78, .3); }
.sp-catalogue h2 { color: var(--ink-light); }
.sp-empty { color: var(--dim-light); }

/* The goal chips live in the DARK picker and keep their dark treatment.
   The category chips live in the LIGHT catalogue and need the opposite — they
   were left with light-on-dark styling and all but disappeared on porcelain.
   Scope by section, not by class, or one of the two rows always loses. */
.sp-picker .pchip[aria-pressed="true"] {
  color: #2A1D06; background: var(--gold); border-color: var(--gold);
}

.sp-catalogue .sp-browse { color: var(--dim-light); }
.sp-catalogue .sp-chip {
  color: var(--violet-deep);
  background: #fff;
  border-color: rgba(101, 64, 147, .34);
}
.sp-catalogue .sp-chip:hover {
  color: var(--gold-deep); border-color: var(--gold-deep);
}
.sp-catalogue .sp-chip.is-on {
  color: #2A1D06; background: var(--gold); border-color: var(--gold);
}
.sp-catalogue .sp-chip:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px; }

/* Cards: white, with the dark product shot reading as a photographic tile. */
.sp-card {
  background: #fff;
  border: 1px solid rgba(26, 16, 32, .10);
  box-shadow: 0 12px 30px rgba(26, 16, 32, .07);
}
.sp-card:hover {
  border-color: rgba(168, 120, 31, .5);
  box-shadow: 0 22px 48px rgba(26, 16, 32, .14);
}
.sp-card h3 { color: var(--ink-light); }
.sp-blurb { color: var(--dim-light); }
.sp-cat { color: var(--gold-deep); }
.sp-price { color: var(--gold-deep); }
.sp-price span { color: var(--dim-light); }
.sp-note { color: rgba(26, 16, 32, .5); }
.sp-more { color: var(--violet-deep); border-bottom-color: rgba(101, 64, 147, .4); }
.sp-more:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.sp-shot { background: var(--ink-2); }

/* The buy action needs to read on white now. */
.sp-card .btn-drip { background: var(--ink-light); color: var(--gold); }
.sp-card .btn-drip:hover { background: var(--ink); color: #EDBB69; }
.sp-empty { color: var(--dim-light); }

/* The masthead keeps its dark band, and the key chips sit on it. */
.sp-head { border-bottom: 1px solid rgba(226, 169, 78, .3); }