/* NoRx Dose - shared styles (tokens, base, ticker, header, footer)
   Loaded on every page via resources/views/components/baselayout.blade.php */

:root {
  --gold:#C9A227;
  --gold-2:#E3C766;
  --gold-soft:#F7EFD8;
  --gold-line:#E8D9A8;
  --ink:#14130F;
  --ink-2:#1E1C16;
  --cream:#FAF7F0;
  --cream-2:#F2EEE3;
  --paper:#FFFFFF;
  --text:#1B1A16;
  --muted:#6E6A60;
  --line:#E7E2D6;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;
  --shell:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --bad:#b04b34;
  --ink-3:#2A271F;
  /* live height of the sticky ticker+nav wrapper; common.js keeps it in sync
     with the real box, this value is just the pre-JS fallback. */
  --shell-top-h:98px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--cream);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4 {
  font-family:'Fraunces',Georgia,serif;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.14;
  margin:0;
}
p {
  margin:0;
}
a {
  text-decoration:none;
  color:inherit;
}
img,svg {
  max-width:100%;
  display:block;
}
ul {
  margin:0;
  padding:0;
  list-style:none;
}
button {
  font-family:inherit;
}
.shell {
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:22px;
}
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
.ticker {
  background:var(--ink);
  color:rgba(255,255,255,.72);
  font-size:.7rem;
  padding:8px 0;
  overflow:hidden;
}
.ticker__track {
  display:flex;
  width:max-content;
  animation:slide 38s linear infinite;
}
.ticker:hover .ticker__track {
  animation-play-state:paused;
}
.ticker__group {
  display:flex;
  flex-shrink:0;
}
.ticker__item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 26px;
  white-space:nowrap;
}
.ticker__item::before {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}
.ticker__item b {
  color:#fff;
  font-weight:600;
}
@keyframes slide {to{transform:translateX(-50%)}}
/* Ticker + nav ride together in one sticky wrapper, so the marquee stays on
   screen with the header. Wrapping avoids hard-coding the ticker's height as a
   `top` offset on .nav, which would drift at every breakpoint. */
.shell-top {
  position:sticky;
  top:0;
  z-index:900;
}
.nav {
  /* Bootstrap also owns .nav and makes it a flex row, which shrinks the shell
     inside and pulls the header out of line with the rest of the page. */
  display:block;
  /* positioned, not sticky — .shell-top does the sticking, and the mobile
     dropdown below anchors to this box. */
  position:relative;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.nav.is-stuck {
  box-shadow:0 6px 26px rgba(0,0,0,.07);
  border-bottom-color:var(--line);
}
.nav__in {
  display:flex;
  align-items:center;
  gap:26px;
  height:64px;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Fraunces',serif;
  font-size:1.12rem;
  font-weight:600;
}
.brand__mark {
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--ink);
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:.86rem;
}
/* An uploaded logo stands in for the mark and the wordmark together, so it
   is capped by height and lets its own aspect ratio decide the width. */
.brand__logo {
  height:52px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  background: #fff; 
  display:block;
}
.brand span {
  color:var(--gold);
}
.nav__links {
  display:flex;
  align-items:center;
  gap:24px;
  margin-inline:auto;
}
.nav__links a {
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  position:relative;
  padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__links a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background:var(--gold);
  transition:width .35s var(--ease);
}
.nav__tools {
  display:flex;
  align-items:center;
  gap:14px;
}
.search {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:7px 15px;
  min-width:190px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  /* The suggestion panel hangs off this, so the box is the containing
     block for it. */
  position:relative;
}

/* ------------------------------------------------- search suggestions */

.sugg {
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  width:min(380px,calc(100vw - 32px));
  max-height:min(420px,70vh);
  overflow-y:auto;
  background:var(--paper,#fff);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(20,19,15,.14);
  padding:6px;
  z-index:60;
}
.sugg[hidden] {
  display:none;
}
.sugg__label {
  padding:9px 10px 5px;
  font-size:.63rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
.sugg__item {
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 10px;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  transition:background .18s var(--ease);
}
/* One highlight class for both hover and arrow keys, so the keyboard and
   the mouse can never both look active at once. */
.sugg__item:hover,
.sugg__item.is-on {
  background:var(--cream-2,#F2EEE3);
}
.sugg__thumb {
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--cream,#FAF7F0);
  object-fit:contain;
  padding:3px;
}
.sugg__txt {
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.35;
}
.sugg__txt b {
  font-size:.8rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sugg__txt span {
  font-size:.7rem;
  color:var(--muted);
}
.sugg__price {
  margin-left:auto;
  font-size:.76rem;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
}
.sugg mark {
  background:rgba(201,162,39,.22);
  color:inherit;
  border-radius:3px;
  padding:0 1px;
}
.sugg__all {
  display:block;
  margin-top:4px;
  padding:10px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.73rem;
  font-weight:600;
  color:var(--gold);
  text-decoration:none;
  border-radius:0 0 10px 10px;
}
.sugg__all:hover,
.sugg__all.is-on {
  background:var(--cream-2,#F2EEE3);
}
.sugg__empty {
  padding:18px 12px;
  text-align:center;
  font-size:.78rem;
  color:var(--muted);
}
.sugg__chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:4px 10px 10px;
}
.sugg__chips a {
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:.72rem;
  color:var(--text);
  text-decoration:none;
}
.sugg__chips a:hover,
.sugg__chips a.is-on {
  border-color:var(--gold);
  background:var(--cream-2,#F2EEE3);
}

.search:focus-within {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.13);
}
.search input {
  border:0;
  outline:0;
  background:none;
  font-size:.78rem;
  width:100%;
  color:var(--text);
}
.icon-btn {
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:none;
  display:grid;
  place-items:center;
  position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.icon-btn b {
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:16px;
  height:16px;
  border-radius:var(--r-pill);
  background:var(--gold);
  color:#171307;
  font-size:.55rem;
  font-weight:700;
  display:grid;
  place-items:center;
  padding:0 4px;
}
.icon-btn.search-toggle {
  display:none;
}
.burger {
  display:none;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:none;
}
.burger span {
  display:block;
  width:16px;
  height:1.6px;
  background:var(--text);
  margin:3px auto;
}
.foot {
  background:var(--ink);
  color:rgba(255,255,255,.6);
  padding:64px 0 0;
  font-size:.8rem;
  position:relative;
  overflow:hidden;
}
.foot__grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:44px;
  padding-bottom:44px;
  position:relative;
  z-index:2;
}
.foot .brand {
  color:#fff;
  margin-bottom:16px;
}
.foot .brand__mark {
  background:var(--gold);
  color:var(--ink);
}
.foot__about {
  max-width:36ch;
  line-height:1.6;
  margin-bottom:20px;
}
.foot h5 {
  font-family:'Inter',sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:16px;
}
.foot__list li {
  margin-bottom:9px;
}
.foot__list a {
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.foot__list a:hover {
  color:var(--gold);
  padding-left:4px;
}
.social {
  display:flex;
  gap:9px;
  margin-bottom:22px;
}
.social a {
  width:32px;
  height:32px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.7);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.social a:hover {
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.sub {
  display:flex;
  gap:8px;
  max-width:300px;
}
.sub input {
  flex:1;
  padding:9px 14px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:.75rem;
  outline:0;
  transition:border-color .3s var(--ease);
}
.sub input::placeholder {
  color:rgba(255,255,255,.35);
}
.sub input:focus {
  border-color:var(--gold);
}
.sub button {
  padding:9px 20px;
  border-radius:var(--r-pill);
  border:0;
  background:var(--gold);
  color:#171307;
  font-size:.75rem;
  font-weight:600;
  transition:background .3s var(--ease);
}
.sub button:hover {
  background:var(--gold-2);
}
.pay {
  display:flex;
  gap:8px;
  margin-top:14px;
}
.pay span {
  padding:4px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:5px;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  color:rgba(255,255,255,.65);
}
.foot__bar {
  border-top:1px solid rgba(255,255,255,.09);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:.72rem;
  position:relative;
  z-index:2;
}
.foot__bar nav {
  display:flex;
  gap:20px;
}
.foot__bar a:hover {
  color:var(--gold);
}

/* --- image placeholder, used wherever a real photo will go --- */
.ph {
  position:relative;
  overflow:hidden;
  background:linear-gradient(140deg,#33302a,#4a453a 55%,#2c2a24);
}
.ph::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 12px,transparent 12px 24px);
}
.ph::after {
  content:attr(data-ph);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:.6rem;
  letter-spacing:.24em;
  font-weight:600;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
}
.ph--light {
  background:linear-gradient(140deg,#F3EFE4,#E7E1D2 55%,#EFEBE0);
}
.ph--light::before {
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 12px,transparent 12px 24px);
}
.ph--light::after {
  color:rgba(0,0,0,.32);
}
.ph--gold {
  background:linear-gradient(140deg,#E7D5A0,#D9C078 55%,#EADDB4);
}
.ph--gold::before {
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 12px,transparent 12px 24px);
}
.ph--gold::after {
  color:rgba(40,34,10,.4);
}

/* ============================================================
   SHELL — ticker, header, footer.
   One responsive definition for every page; the page stylesheets
   no longer redefine any of this.
   ============================================================ */
.ticker {
  background:var(--ink);
  color:rgba(255,255,255,.72);
  font-size:.7rem;
  letter-spacing:.04em;
  padding:8px 0;
  overflow:hidden;
  position:relative;
}

/* nothing in the header row may push the page wider than the screen */
.nav__in {
  min-width:0;
}
.brand {
  flex-shrink:0;
}
.nav__links {
  min-width:0;
}
.nav__tools {
  flex-shrink:0;
}
.search {
  flex:0 1 190px;
  min-width:0;
}
.search input {
  min-width:0;
}
.icon-btn,
.burger {
  flex-shrink:0;
}
/* Form controls carry a default intrinsic width that stops narrow grids from
   shrinking, so let them collapse with their container. */
input,
select,
textarea {
  min-width:0;
  max-width:100%;
}


/* ============================================================
   RESPONSIVE - widest breakpoint first, so narrower ones win
   ============================================================ */
@media (max-width:1240px) {
  .nav__in {
    gap:18px;
  }
  .nav__links {
    gap:18px;
  }
}
@media (max-width:1100px) {
  .nav__links {
    gap:14px;
  }
  .nav__links a {
    font-size:.68rem;
    letter-spacing:.06em;
  }
  .search {
    flex-basis:140px;
  }
  .brand {
    font-size:1rem;
  }
}
@media (max-width:900px) {
  .nav__links {
    position:absolute;
    top:64px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin-inline:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:0 22px;
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease),padding .4s var(--ease);
  }
  .nav__links.is-open {
    max-height:min(70vh,430px);
    overflow-y:auto;
    padding:12px 22px 18px;
  }
  .nav__links a {
    padding:11px 0;
    width:100%;
    font-size:.72rem;
    letter-spacing:.09em;
  }
  .nav__links a::after {
    display:none;
  }
  .nav__tools {
    margin-left:auto;
  }
  /* The existing desktop form becomes a compact dropdown from the dedicated
     search icon, independently of the navigation menu. */
  .search {
    display:none;
  }
  .nav.is-search-open .search {
    display:flex;
    position:absolute;
    top:calc(100% + 8px);
    left:auto;
    right:22px;
    width:min(320px,calc(100vw - 44px));
    min-width:0;
    background:var(--paper);
    box-shadow:0 16px 38px rgba(20,19,15,.14);
    z-index:30;
  }
  .nav.is-search-open .sugg {
    left:0;
    right:0;
    width:auto;
    max-height:min(320px,50vh);
  }
  .icon-btn.search-toggle {
    display:grid;
  }
  .burger {
    display:block;
    order:3;
  }
  .foot__grid {
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .foot__grid {
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .nav__links a {
    padding:11px 0;
    width:100%;
  }
  .burger {
    display:block;
    order:3;
  }
}
@media (max-width:560px) {
  .shell {
    padding-inline:16px;
  }
  .nav__in {
    gap:14px;
  }
  .nav__links {
    padding-inline:16px;
  }
  .nav__links.is-open {
    padding:12px 16px 18px;
  }
  .brand {
    font-size:.98rem;
    gap:8px;
  }
  .brand__mark {
    width:26px;
    height:26px;
    font-size:.76rem;
  }
  .ticker {
    font-size:.64rem;
  }
  .ticker__item {
    padding:0 18px;
  }
  .foot__grid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .foot__bar {
    flex-direction:column;
    align-items:flex-start;
  }
  .sub {
    max-width:none;
  }
}
@media (max-width:360px) {
  .nav__tools {
    gap:10px;
  }
  .brand {
    font-size:.9rem;
  }
}
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html {
    scroll-behavior:auto;
  }
}

/* ---------- Product card image ----------
   Uploaded product photos remain fully visible inside the existing media box.
   The inner padding also leaves room for the card's small hover scale. */
.card__media .jar img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  box-sizing:border-box;
  padding:10px;
  display:block;
}

/* The default bottle, when a product has no photo of its own. It is a drawing,
   not a photograph, so it is letterboxed at the size the inline illustration it
   replaced used to occupy rather than cropped to fill the box. */
.card__media .jar img.jar__default{
  width:58%;
  height:auto;
  object-fit:contain;
  padding:0;
  margin:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.1));
}


/* ============================================================
   CATEGORY SECTIONS
   ============================================================
   The expandable sections a category carries, drawn identically on the shop
   and on the all-products page. Here rather than in either page's stylesheet
   because the markup is the same on both, and two copies of it drifted apart
   the first time one was touched.

   One panel of rows separated by hairlines, not a stack of cards: the rows
   belong together, and gaps between them read as separate things. The open row
   is the one that gets decorated - a gold rail down its left edge, a warm wash
   behind it, and its heading in gold. */
.catacc {
  margin-top:26px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper);
  overflow:hidden;
}
.catacc__item + .catacc__item {
  border-top:1px solid var(--line);
}

/* The rail is drawn as an inset shadow rather than a border, so opening a row
   cannot shift the text beside it by four pixels. */
.catacc__item.is-open {
  box-shadow:inset 4px 0 0 var(--gold);
}

.catacc__head {
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border:0;
  background:var(--paper);
  text-align:left;
  cursor:pointer;
  transition:background .3s var(--ease);
}
.catacc__head:hover {
  background:#fdfbf5;
}

/* The wash fades out to the right so the heading sits on colour and the
   chevron does not. */
.catacc__item.is-open .catacc__head {
  background:linear-gradient(90deg,#faf4e4 0%,#fdfaf1 45%,var(--paper) 100%);
}

/* The tile. A gradient rather than a flat fill, which is what stops a 44px
   square of gold looking like a placeholder. */
.catacc__ic {
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:19px;
  line-height:1;
  background:linear-gradient(145deg,var(--gold-2,#e3c766),var(--gold));
  box-shadow:0 4px 10px rgba(201,162,39,.28);
}

.catacc__title {
  flex:1;
  min-width:0;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.45;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.catacc__item.is-open .catacc__title {
  color:var(--gold);
}

/* Closed: a quiet grey chevron. Open: the same chevron turned over, in a solid
   circle - the one control on the row that has obviously been pressed. */
.catacc__chev {
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.catacc__chev svg {
  width:17px;
  height:17px;
}
.catacc__item.is-open .catacc__chev {
  background:var(--ink);
  color:#fff;
  transform:rotate(180deg);
}

/* Indented to the heading, not to the tile: the body is a continuation of what
   the heading said, and starting it under the icon breaks that line. */
.catacc__body {
  background:var(--paper);
  padding:0 24px 22px 80px;
}
.catacc__body > :last-child {
  margin-bottom:0;
}

@media (max-width:640px) {
  .catacc__head {
    padding:14px 15px;
    gap:12px;
  }
  .catacc__ic {
    width:38px;
    height:38px;
    border-radius:10px;
    font-size:16px;
  }
  .catacc__title {
    font-size:.92rem;
  }
  .catacc__chev {
    width:28px;
    height:28px;
  }
  /* The indent costs more than it buys on a narrow screen. */
  .catacc__body {
    padding:0 15px 18px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .catacc__head,
  .catacc__title,
  .catacc__chev {
    transition:none;
  }
}