/* Doobie Nights Menu — product grids and tiles. Placeholder palette until the brand pass. */
:root{
  --dn-surface:#ffffff; --dn-surface-2:#f0ece2; --dn-line:#ded7c9;
  --dn-ink:#171f19; --dn-muted:#5e6b62; --dn-accent:#1e5b45; --dn-ember:#a8491b;
  --dn-radius:10px;
}

.dn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin:0 0 1.5em;}
.dn-card{display:flex; flex-direction:column; background:var(--dn-surface); border:1px solid var(--dn-line);
  border-radius:var(--dn-radius); overflow:hidden; color:var(--dn-ink); text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;}
.dn-card:hover,.dn-card:focus-visible{border-color:var(--dn-accent); transform:translateY(-2px); color:var(--dn-ink);}
.dn-shot{display:block; aspect-ratio:1/1; background:var(--dn-surface-2);}
.dn-shot img{width:100%; height:100%; object-fit:contain; padding:10px; display:block;}
.dn-body{display:flex; flex-direction:column; gap:6px; padding:12px 13px 14px; flex:1;}
.dn-brand{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--dn-muted);}
.dn-name{font-weight:600; font-size:15px; line-height:1.3;}
.dn-tags{display:flex; flex-wrap:wrap; gap:6px;}
.dn-tag{font-size:11px; border:1px solid var(--dn-line); border-radius:4px; padding:1px 6px; color:var(--dn-muted);}
.dn-tag.dn-sale{color:var(--dn-ember);}
.dn-price{margin-top:auto; font-weight:700; font-variant-numeric:tabular-nums;}
.dn-price s{font-weight:400; color:var(--dn-muted); margin-left:6px; font-size:13px;}

.dn-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin:0 0 1.5em;}
.dn-tile{display:flex; flex-direction:column; gap:4px; padding:14px; background:var(--dn-surface);
  border:1px solid var(--dn-line); border-radius:var(--dn-radius); color:var(--dn-ink); text-decoration:none;}
.dn-tile:hover,.dn-tile:focus-visible{border-color:var(--dn-accent); color:var(--dn-ink);}
.dn-tile b{font-size:16px;}
.dn-tile em{font-style:normal; font-size:12px; color:var(--dn-muted);}
.dn-cattile img{height:56px; width:56px; object-fit:contain; align-self:flex-start;}
.dn-brandtile img{height:32px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start;}

.dn-empty{color:var(--dn-muted);}

/* sold out (Flowhub reports live quantity; "badge" mode in Settings > Doobie Nights Menu) */
.dn-tag.dn-oos{color:var(--dn-muted); border-style:dashed;}
.dn-card--oos .dn-shot{opacity:.55;}
.dn-card--oos .dn-price{text-decoration:line-through; color:var(--dn-muted);}

/* price row: plus tax on the left, out the door on the right.
   Labels are not decoration - two unlabelled dollar figures side by side is the one way
   this gets misread. On sale, each column stacks the struck original above the sale price. */
.dn-price{display:flex; align-items:flex-end; gap:10px; margin-top:6px;}
.dn-price--two{justify-content:space-between;}
.dn-pricecol{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.dn-pricecol b{font-weight:700; font-size:16px;}
.dn-pricecol s{font-size:12px; color:var(--dn-muted); text-decoration-thickness:1px;}
.dn-pricecol em{font-style:normal; font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--dn-muted); margin-top:1px;}
.dn-pricecol--otd{text-align:right; align-items:flex-end;}
.dn-price--sale .dn-pricecol b{color:var(--dn-ember);}
@media (max-width:420px){
  .dn-pricecol b{font-size:15px;}
  .dn-pricecol em{font-size:9px;}
}

/* ---------- /menu/ pages (router) ---------- */
.dn-menu-page{max-width:100%;}
.dn-menu-page h2{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:1.6em 0 .7em;}
.dn-more{font-size:14px; font-weight:600;}
.dn-crumbs{font-size:13px; color:var(--dn-muted); margin:0 0 12px;}
.dn-crumbs a{color:inherit;}
.dn-menuhead{margin:0 0 18px;}
.dn-menuhead h1{margin:0 0 6px;}
.dn-lede{color:var(--dn-muted); margin:0 0 12px;}
.dn-brandhead{display:flex; align-items:center; gap:18px;}
.dn-brandlogo{width:120px; height:auto; max-height:90px; object-fit:contain; flex:none;}
.dn-search{display:flex; gap:8px; max-width:560px;}
.dn-search input{flex:1; min-width:0;}
.dn-chips{display:flex; flex-direction:column; gap:8px; margin:0 0 14px;}
.dn-chiprow{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.dn-chiplabel{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--dn-muted); min-width:56px;}
.dn-chip{font-size:13px; padding:4px 10px; border:1px solid var(--dn-line); border-radius:999px; color:var(--dn-ink); text-decoration:none; background:var(--dn-surface);}
.dn-chip span{color:var(--dn-muted); font-size:11px; margin-left:2px;}
.dn-chip:hover,.dn-chip:focus-visible{border-color:var(--dn-accent); color:var(--dn-ink);}
.dn-chip.is-on{background:var(--dn-ink); border-color:var(--dn-ink); color:#fff;}
.dn-chip.is-on span{color:rgba(255,255,255,.75);}
.dn-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 12px; flex-wrap:wrap;}
.dn-count{color:var(--dn-muted); font-size:14px;}
.dn-sort{font-size:14px; display:flex; gap:8px; align-items:center;}
.dn-pager{display:flex; justify-content:center; align-items:center; gap:18px; margin:8px 0 28px; font-size:15px;}
.dn-letter{border-bottom:1px solid var(--dn-line); padding-bottom:4px;}
.dn-about{max-width:820px; margin:2.2em 0 1em; padding-top:1.4em; border-top:1px solid var(--dn-line);}
.dn-about h2{font-size:1.3em;}
.dn-pdp{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; margin:0 0 2em;}
.dn-pdp-img{width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; background:var(--dn-surface-2); border-radius:var(--dn-radius); padding:16px; display:block;}
.dn-pdp-info h1{margin:4px 0 10px; font-size:1.7em; line-height:1.2;}
.dn-pdp-info .dn-price{max-width:360px; margin:6px 0 12px;}
.dn-pdp-info .dn-pricecol b{font-size:24px;}
.dn-pdp-deal{color:var(--dn-ember); font-weight:600; margin:0 0 10px;}
.dn-pdp-stock{font-size:14px; color:var(--dn-muted);}
.dn-facts{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:16px 0; font-size:15px;}
.dn-facts dt{color:var(--dn-muted);}
.dn-facts dd{margin:0;}
@media (max-width:760px){
  .dn-pdp{grid-template-columns:1fr; gap:18px;}
  .dn-brandhead{flex-direction:column; align-items:flex-start;}
}

/* ---------- bag + checkout ---------- */
.dn-btn{display:inline-block; padding:10px 18px; border-radius:8px; border:1px solid var(--dn-ink); background:var(--dn-surface); color:var(--dn-ink); font-weight:700; text-decoration:none; cursor:pointer;}
.dn-btn--go{background:var(--dn-ink); color:#fff;}
.dn-btn--go:hover,.dn-btn--go:focus-visible{opacity:.9; color:#fff;}
.dn-add{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 14px;}
.dn-add select{min-width:70px;}
.dn-addmsg{flex-basis:100%; margin:0; font-size:14px; color:var(--dn-muted);}
.dn-baglink{display:inline-flex; align-items:center; gap:6px; margin-left:12px; font-weight:700; color:inherit; text-decoration:none;}
.dn-bagcount:not(:empty){display:inline-block; min-width:20px; padding:1px 6px; border-radius:999px; background:var(--dn-ember); color:#fff; font-size:12px; text-align:center;}
.dn-bag{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--dn-line);}
.dn-bagrow{display:grid; grid-template-columns:72px 1fr auto auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--dn-line);}
.dn-bagrow img,.dn-bagimg{width:72px; height:72px; object-fit:contain; background:var(--dn-surface-2); border-radius:8px; display:block;}
.dn-bagname{display:flex; flex-direction:column; gap:2px;}
.dn-bagname a{font-weight:600; color:var(--dn-ink); text-decoration:none;}
.dn-bagprice{font-variant-numeric:tabular-nums; min-width:80px; text-align:right;}
.dn-bagfoot{display:grid; grid-template-columns:1fr minmax(260px,380px); gap:28px; align-items:start;}
.dn-promo{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.dn-promo label{flex-basis:100%; font-weight:600;}
.dn-promomsg{flex-basis:100%; margin:0; font-size:14px; color:var(--dn-ember);}
.dn-bagtotals dl{display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:0 0 14px;}
.dn-bagtotals dd{margin:0; text-align:right; font-variant-numeric:tabular-nums;}
.dn-bagtotals .dn-total{font-weight:800; font-size:18px; border-top:1px solid var(--dn-line); padding-top:8px;}
.dn-bagtotals .dn-btn{display:block; text-align:center;}
.dn-save{color:var(--dn-ember);}
.dn-fine{font-size:13px; color:var(--dn-muted); margin-top:10px;}
.dn-limit{position:relative; background:var(--dn-surface-2); border-radius:6px; overflow:hidden; margin:0 0 12px; font-size:13px;}
.dn-limit span{position:relative; z-index:1; display:block; padding:5px 8px;}
.dn-limit i{position:absolute; inset:0 auto 0 0; background:rgba(30,91,69,.25);}
.dn-limit.is-over i{background:rgba(168,73,27,.35);}
@media (max-width:760px){
  .dn-bagfoot{grid-template-columns:1fr;}
  .dn-bagrow{grid-template-columns:56px 1fr auto; }
  .dn-bagrow img,.dn-bagimg{width:56px; height:56px;}
  .dn-bagprice{grid-column:2 / 4; text-align:left;}
}
.dn-menu-page a.dn-btn--go,.dn-menu-page a.dn-btn--go:hover,.dn-menu-page a.dn-btn--go:visited{color:#fff;}
.dn-menu-page a.dn-btn,.dn-menu-page a.dn-btn:visited{text-decoration:none;}

/* category sections on /menu/categories/ - the old site's layout: heading, blurb, a swipeable
   row of products, and View All. scroll-snap instead of a slider library: native swipe on a
   phone, real keyboard/screen-reader order, no JS. */
.dn-catsec{margin:0 0 38px;}
.dn-catsec__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:4px;}
.dn-catsec__head h2{margin:0; font-size:26px; line-height:1.15;}
.dn-catsec__head h2 a{color:inherit; text-decoration:none;}
.dn-catsec__head h2 a:hover{color:var(--dn-teal);}
.dn-catsec__lede{margin:0 0 14px; color:var(--dn-muted); font-size:15px; max-width:70ch;}
.dn-viewall{flex:none; font-size:14px; font-weight:600; white-space:nowrap; text-decoration:none;
  border:1px solid var(--dn-line); border-radius:999px; padding:7px 16px;}
.dn-viewall:hover{border-color:var(--dn-teal); color:var(--dn-teal);}
.dn-rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 0 14px;
  scrollbar-width:thin; overscroll-behavior-x:contain;}
.dn-rail > .dn-card{scroll-snap-align:start;}
.dn-rail::-webkit-scrollbar{height:8px;}
.dn-rail::-webkit-scrollbar-thumb{background:var(--dn-line); border-radius:999px;}
@media (min-width:1100px){ .dn-rail{grid-auto-columns:minmax(230px,1fr);} }
@media (max-width:600px){
  .dn-catsec__head h2{font-size:21px;}
  .dn-rail{grid-auto-columns:minmax(165px,72%); gap:12px;}
}

/* ================= impeccable polish: product cards  =================
   Refinement only: colours still come from the GeneratePress slots via --dn-* in
   dn-theme.css. Selectors are one step more specific because dn-theme.css loads after
   this file and restyles .dn-name / .dn-price / .dn-tag. */
.dn-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px;}
:is(.dn-grid,.dn-rail) .dn-card{border:1px solid var(--dn-line); box-shadow:none;
  transition:border-color .2s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);}
:is(.dn-grid,.dn-rail) .dn-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--dn-teal) 55%, var(--dn-line));
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--dn-ink) 35%, transparent);}
:is(.dn-grid,.dn-rail) .dn-card:focus-visible{outline:3px solid var(--dn-teal); outline-offset:3px; transform:none;}
:is(.dn-grid,.dn-rail) .dn-card:active{transform:translateY(-1px);}

/* image: product shots ship on white, so the well is white and multiply drops any off-white box */
:is(.dn-grid,.dn-rail) .dn-shot{background:var(--dn-surface); border-bottom:1px solid var(--dn-line);}
:is(.dn-grid,.dn-rail) .dn-shot img{padding:14px; mix-blend-mode:multiply;}

:is(.dn-grid,.dn-rail) .dn-body{gap:8px; padding:14px 14px 0;}
:is(.dn-grid,.dn-rail) .dn-brand{font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--dn-teal-dark);}
:is(.dn-grid,.dn-rail) .dn-name{color:var(--dn-ink); font-weight:800; font-size:15px; line-height:1.3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; text-wrap:pretty;}
:is(.dn-grid,.dn-rail) .dn-card:hover .dn-name{color:var(--dn-purple-dark);}

:is(.dn-grid,.dn-rail) .dn-tags{gap:5px;}
:is(.dn-grid,.dn-rail) .dn-tag{font-size:11.5px; font-weight:700; line-height:1.5; padding:1px 8px; border:0; border-radius:999px;
  background:var(--dn-ground); color:var(--dn-muted); font-variant-numeric:tabular-nums;}
:is(.dn-grid,.dn-rail) .dn-tag.dn-sale{background:var(--dn-purple-dark); color:#fff;} /* darker step of the accent: white on the raw accent can fall under 4.5:1 */
:is(.dn-grid,.dn-rail) .dn-tag.dn-oos{background:transparent; border:1px dashed var(--dn-line);}

/* price: plus tax on the left, out the door on the right, space between (same reading as staging).
   Each column is a fixed 3-row grid - struck original / price / label - so every card in a row puts
   its prices and labels on the same lines whether or not it is on sale. Pinned to the card floor. */
:is(.dn-grid,.dn-rail) .dn-price{margin-top:auto; margin-inline:-14px; padding:10px 14px 13px; border-top:1px solid var(--dn-line);
  display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; gap:12px; font-variant-numeric:tabular-nums;}
:is(.dn-grid,.dn-rail) .dn-pricecol{display:grid; grid-template-rows:15px auto auto; justify-items:start; line-height:1.15; min-width:0;}
:is(.dn-grid,.dn-rail) .dn-pricecol--otd{justify-items:end; text-align:right;}
:is(.dn-grid,.dn-rail) .dn-pricecol s{grid-row:1; align-self:end; font-size:12px; color:var(--dn-muted); text-decoration-thickness:1px;}
:is(.dn-grid,.dn-rail) .dn-pricecol b{grid-row:2; font-size:19px; font-weight:900; letter-spacing:-.01em; color:var(--dn-ink); margin-top:1px;}
:is(.dn-grid,.dn-rail) .dn-pricecol em{grid-row:3; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dn-muted); margin-top:3px; white-space:nowrap;}
:is(.dn-grid,.dn-rail) .dn-price--sale .dn-pricecol b{color:var(--dn-purple);}
:is(.dn-grid,.dn-rail) .dn-card--oos .dn-price{text-decoration:none;}
:is(.dn-grid,.dn-rail) .dn-card--oos .dn-pricecol b{color:var(--dn-muted); text-decoration:line-through;}

/* phones: two up, so a shopper sees four products per screen instead of half of one */
@media (max-width:560px){
  .dn-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  :is(.dn-grid,.dn-rail) .dn-shot img{padding:8px;}
  :is(.dn-grid,.dn-rail) .dn-body{padding:10px 10px 0; gap:6px;}
  :is(.dn-grid,.dn-rail) .dn-name{font-size:13.5px; -webkit-line-clamp:4; line-clamp:4;} /* 4 lines so the size at the end of long names survives */
  :is(.dn-grid,.dn-rail) .dn-tag{font-size:11px; padding:0 6px;}
  :is(.dn-grid,.dn-rail) .dn-price{margin-inline:-10px; padding:8px 10px 11px; gap:4px;}
  :is(.dn-grid,.dn-rail) .dn-pricecol{grid-template-rows:13px auto auto;}
  :is(.dn-grid,.dn-rail) .dn-pricecol s{font-size:11px;}
  :is(.dn-grid,.dn-rail) .dn-pricecol b{font-size:16px;}
  /* 11px floor: sentence case so "out the door" still fits a two-up phone card */
  :is(.dn-grid,.dn-rail) .dn-pricecol em{font-size:11px; font-weight:700; letter-spacing:0; text-transform:none;}
}
@media (prefers-reduced-motion:reduce){ :is(.dn-grid,.dn-rail) .dn-card, :is(.dn-grid,.dn-rail) .dn-card:hover{transition:none; transform:none;} }
.dn-menu-page ::selection{background:color-mix(in srgb, var(--dn-teal) 30%, transparent); color:var(--dn-ink);}

/* ================= brands index: one A-Z grid =================
   No letter headings: 139 brands in short letter groups left most rows half empty. One continuous
   grid fills every row. Logos sit centred in a fixed white frame so wide wordmarks and square
   badges read at the same visual weight. .dn-brandgrid only: brand tiles elsewhere are untouched. */
.dn-brandgrid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:16px; margin:6px 0 2em;}
.dn-brandgrid .dn-tile{padding:0; gap:0; overflow:hidden; text-align:center; border:1px solid var(--dn-line);
  transition:border-color .2s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);}
.dn-brandgrid .dn-tile:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--dn-teal) 55%, var(--dn-line));
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--dn-ink) 35%, transparent);}
.dn-brandgrid .dn-tile:focus-visible{outline:3px solid var(--dn-teal); outline-offset:3px; transform:none;}
.dn-brandgrid .dn-logo{display:grid; place-items:center; box-sizing:border-box; height:150px; min-height:0; padding:16px 18px; background:var(--dn-surface);
  border-bottom:1px solid var(--dn-line);}
.dn-brandgrid .dn-brandtile img{width:auto; height:auto; max-width:100%; max-height:112px; min-width:0; object-fit:contain;
  align-self:center; mix-blend-mode:multiply;}
.dn-brandgrid .dn-logo--none{font-weight:900; font-size:22px; line-height:1.1; letter-spacing:-.01em; color:var(--dn-ink);
  text-wrap:balance; background:var(--dn-ground);}
.dn-brandgrid .dn-tile b{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  padding:11px 10px 0; font-size:13.5px; font-weight:900; line-height:1.25; letter-spacing:.03em; text-transform:uppercase; color:var(--dn-ink);}
.dn-brandgrid .dn-tile em{padding:3px 10px 12px; font-size:12px; font-weight:600; color:var(--dn-muted); font-variant-numeric:tabular-nums;}
.dn-brandgrid .dn-tile:hover b{color:var(--dn-purple-dark);}
@media (min-width:1100px){ .dn-brandgrid{grid-template-columns:repeat(auto-fill,minmax(162px,1fr)); gap:14px;} }
/* phones: three across - logos stay ~3x the old 32px thumbnails and the list is half the scroll */
@media (max-width:560px){
  .dn-brandgrid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .dn-brandgrid .dn-logo{height:84px; padding:10px 8px;}
  .dn-brandgrid .dn-brandtile img{max-height:62px;}
  .dn-brandgrid .dn-logo--none{font-size:15px;}
  .dn-brandgrid .dn-tile b{font-size:11.5px; letter-spacing:.01em; padding:7px 5px 0; -webkit-line-clamp:3; line-clamp:3; overflow-wrap:anywhere; hyphens:auto;}
  .dn-brandgrid .dn-tile em{font-size:11.5px; padding:1px 5px 8px;}
}
@media (prefers-reduced-motion:reduce){ .dn-brandgrid .dn-tile, .dn-brandgrid .dn-tile:hover{transition:none; transform:none;} }

/* type-to-find: filters the grid as you type; Enter opens a lone match, Esc clears */
.dn-brandfind{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:4px 0 18px;}
.dn-brandfind__label{flex-basis:100%; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dn-muted);}
.dn-brandfind input.dn-brandfind__input{flex:1 1 320px; max-width:520px; min-height:48px; padding:10px 16px; font:inherit; font-size:17px;
  color:var(--dn-ink); background:var(--dn-surface); border:2px solid var(--dn-line); border-radius:999px;}
.dn-brandfind input.dn-brandfind__input:focus{outline:none; border-color:var(--dn-teal); box-shadow:0 0 0 4px color-mix(in srgb, var(--dn-teal) 22%, transparent);}
.dn-brandfind input.dn-brandfind__input::placeholder{color:var(--dn-muted); opacity:.8;}
.dn-brandfind__count{margin:0; font-size:14px; font-weight:700; color:var(--dn-muted); font-variant-numeric:tabular-nums;}
.dn-brandgrid > [hidden]{display:none;}
.dn-brandnone{margin:0 0 2em; font-size:16px; color:var(--dn-ink);}
.dn-brandnone a{font-weight:700;}
@media (max-width:560px){ .dn-brandfind input.dn-brandfind__input{flex-basis:100%; max-width:none; font-size:16px;} }

/* ================= home page: centred category tiles, product sliders, brand wall ================= */
/* category tiles: icon and words centred in the tile */
.dn-catgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.dn-catgrid .dn-cattile{align-items:center; justify-content:center; text-align:center; gap:6px; padding:18px 12px 16px;
  transition:border-color .2s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);}
.dn-catgrid .dn-cattile:hover{transform:translateY(-3px);}
.dn-catgrid .dn-cattile img{align-self:center; width:72px; height:72px; margin-bottom:4px;}
.dn-catgrid .dn-cattile b{color:var(--dn-ink); font-size:14px; letter-spacing:.01em; overflow-wrap:normal; word-break:keep-all;}
.dn-catgrid .dn-cattile:focus-visible{outline:3px solid var(--dn-teal); outline-offset:3px;}

/* home sections: heading, slider arrows and View All on one line, like /menu/categories/ */
.dn-homesec{margin:2.4em 0 1.2em;}
.dn-homesec .dn-catsec__head{margin-bottom:12px; align-items:center;}
.dn-catsec__tools{display:flex; align-items:center; gap:10px; flex:none;}
.dn-railnav{display:flex; gap:6px;}
.dn-railbtn{display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid var(--dn-line); background:var(--dn-surface); color:var(--dn-ink); font-size:18px; line-height:1;
  transition:border-color .15s, background-color .15s, opacity .15s;}
.dn-railbtn:hover:not(:disabled){border-color:var(--dn-teal); color:var(--dn-teal);}
.dn-railbtn:focus-visible{outline:3px solid var(--dn-teal); outline-offset:2px;}
.dn-railbtn:disabled{opacity:.35; cursor:default;}
.dn-catsec--static .dn-railnav{display:none;}
.dn-homesec .dn-rail{grid-auto-columns:minmax(232px,calc((100% - 4 * 16px) / 5)); scroll-behavior:smooth;}
@media (pointer:coarse), (max-width:600px){ .dn-railnav{display:none;} }
@media (max-width:600px){
  .dn-catgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
  .dn-catgrid .dn-cattile img{width:60px; height:60px;}
  .dn-homesec .dn-rail{grid-auto-columns:minmax(165px,46%);}
  .dn-homesec .dn-catsec__head h2{font-size:21px;}
}
@media (prefers-reduced-motion:reduce){ .dn-homesec .dn-rail{scroll-behavior:auto;} .dn-catgrid .dn-cattile:hover{transform:none;} }

/* home page Instagram (Smash Balloon) on phones: 2x2 instead of six full-width 3:4 posts (~2,600px -> ~700px).
   Desktop keeps the feed's own settings. */
@media (max-width:600px){
  .home #sb_instagram #sbi_images{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:6px !important;}
  .home #sb_instagram .sbi_item{width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important;}
  .home #sb_instagram .sbi_item:nth-child(n+5){display:none !important;}
  .home #sb_instagram .sbi_photo_wrap, .home #sb_instagram .sbi_photo{height:auto !important; aspect-ratio:3/4;}
}

/* ---------- home page, lower half: section rhythm, reviews space, FAQ, welcome copy ---------- */
/* section headings were sitting flush under the block above (0px above vs 20px below) */
.home .entry-content > h2.wp-block-heading{margin-top:2.2em;}
/* the Elfsight reviews widget loads late and pushed the page down ~750px; reserve its height */
.home .entry-content > [class*="elfsight-app-6fa19e4e"]{min-height:740px;}
@media (max-width:600px){ .home .entry-content > [class*="elfsight-app-6fa19e4e"]{min-height:560px;} }
/* FAQ: browser-default <details> -> divided rows with a +/x toggle */
.home .entry-content > details.wp-block-details{max-width:880px; margin:0; padding:0; border-bottom:1px solid var(--dn-line);}
.home .entry-content > h2 + details.wp-block-details{border-top:1px solid var(--dn-line);}
.home .entry-content > details.wp-block-details > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 6px; cursor:pointer; font-size:17px; font-weight:800; line-height:1.35; color:var(--dn-ink);}
.home .entry-content > details.wp-block-details > summary::-webkit-details-marker{display:none;}
.home .entry-content > details.wp-block-details > summary::after{content:"+"; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:999px; border:1px solid var(--dn-line); font-size:20px; font-weight:400; line-height:1; color:var(--dn-teal-dark); transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .15s;}
.home .entry-content > details.wp-block-details[open] > summary::after{transform:rotate(45deg); border-color:var(--dn-teal);}
.home .entry-content > details.wp-block-details > summary:hover{color:var(--dn-purple-dark);}
.home .entry-content > details.wp-block-details > summary:focus-visible{outline:3px solid var(--dn-teal); outline-offset:2px; border-radius:8px;}
.home .entry-content > details.wp-block-details > p{max-width:68ch; margin:0 6px 22px; font-size:16px; line-height:1.65;}
/* welcome copy runs the full container width (Damon prefers the old site's full-width text) */
.home .entry-content > p.wp-block-paragraph{line-height:1.7;}
.home .entry-content > p.wp-block-paragraph a{font-weight:700;}
@media (prefers-reduced-motion:reduce){ .home .entry-content > details.wp-block-details > summary::after{transition:none;} }

/* Today's deal cards on /menu/deals/ (v0.17.0) - fed by Flowhub /v3/deals; images are 4:3 */
.dn-deals{margin:0 0 22px;}
.dn-dealgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.dn-dealcard{display:flex; flex-direction:column; background:var(--dn-surface); border:1px solid var(--dn-line);
  border-radius:var(--dn-radius); overflow:hidden; color:var(--dn-ink); text-decoration:none; transition:transform .15s,border-color .15s;}
.dn-dealcard:hover,.dn-dealcard:focus-visible{border-color:var(--dn-accent); transform:translateY(-2px); color:var(--dn-ink);}
.dn-dealcard.is-on{border:2px solid var(--dn-accent);}
.dn-dealshot{display:block; aspect-ratio:4/3; background:var(--dn-surface-2);}
.dn-dealshot img{display:block; width:100%; height:100%; object-fit:cover;}
.dn-dealbody{display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px;}
.dn-dealbody b{font-size:17px; line-height:1.25;}
.dn-dealdesc{font-size:14px; line-height:1.4; color:var(--dn-ink);}
.dn-dealterms{font-size:12px; color:var(--dn-muted);}
.dn-dealbody em{font-style:normal; font-size:13px; font-weight:600; color:var(--dn-accent); margin-top:2px;}
@media (max-width:600px){
  .dn-dealgrid{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto;
    scroll-snap-type:x mandatory; padding-bottom:6px;}
  .dn-dealcard{scroll-snap-align:start;}
}

/* ================= blog posts: one reading column, 16:9 featured images, FAQ accordions ================= */
/* featured image frame (markup from the post_thumbnail_html filter): landscape fills, square/portrait
   sits whole on a blurred fill of itself so titles baked into graphics never get cropped */
.dn-fi{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:var(--dn-radius); background:var(--dn-ground); isolation:isolate;}
.dn-fi img{position:relative; z-index:1; display:block; width:100%; max-width:none; height:100% !important;}
.dn-fi--cover img{object-fit:cover; object-position:center 40%;}
.dn-fi--fit img{object-fit:contain;}
.dn-fi--fit::before{content:""; position:absolute; inset:-32px; z-index:0; background:var(--dn-fi-bg) center/cover no-repeat;
  filter:blur(28px) saturate(1.15) brightness(.96); transform:scale(1.08);}

/* single post: centred reading column (~75 characters a line) with the featured image a little wider */
.single-post .featured-image{max-width:1040px; margin:0 auto 34px;}
.single-post .entry-header, .single-post .entry-content, .single-post footer.entry-meta{max-width:760px; margin-inline:auto;}
.single-post .entry-title{font-size:clamp(32px,4.4vw,46px); line-height:1.1; letter-spacing:-.015em; text-wrap:balance; margin-bottom:12px;}
.single-post .entry-header .entry-meta{font-size:14px; font-weight:600; color:var(--dn-muted); margin:0 0 30px;}
.single-post .entry-content{font-size:18px;}
.single-post .entry-content p, .single-post .entry-content li{font-size:18px; line-height:1.72;}
.single-post .entry-content p{margin-bottom:1.15em;}
.single-post .entry-content > :first-child{margin-top:0;}
.single-post .entry-content h2{font-size:clamp(24px,2.7vw,30px); line-height:1.2; margin:1.9em 0 .6em; text-wrap:balance;}
.single-post .entry-content h3{font-size:21px; line-height:1.3; margin:1.6em 0 .5em; text-wrap:balance;}
.single-post .entry-content h4{font-size:18px; line-height:1.35; margin:1.4em 0 .4em;}
.single-post .entry-content h2 strong, .single-post .entry-content h3 strong{font-weight:inherit;}
.single-post .entry-content a:not([class]){color:var(--dn-teal-dark); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.single-post .entry-content a:not([class]):hover{color:var(--dn-purple-dark);}
.single-post .entry-content :is(ul,ol){padding-left:1.25em; margin:0 0 1.3em;}
.single-post .entry-content li{margin-bottom:.45em;}
.single-post .entry-content li::marker{color:var(--dn-teal-dark); font-weight:800;}
.single-post .entry-content ul:empty{display:none;}
.single-post .entry-content figure{margin:2em 0;}
.single-post .entry-content figure img{border-radius:var(--dn-radius); height:auto;}
.single-post .entry-content figcaption{margin-top:8px; font-size:14px; color:var(--dn-muted); text-align:center;}
.single-post ::selection{background:color-mix(in srgb, var(--dn-teal) 30%, transparent); color:var(--dn-ink);}

/* post footer: category + previous/next as a quiet card row */
.single-post footer.entry-meta{margin-top:44px; padding-top:22px; border-top:1px solid var(--dn-line); font-size:14px; color:var(--dn-muted);}
.single-post .post-navigation{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
.single-post .post-navigation > div{display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--dn-line); border-radius:var(--dn-radius); background:var(--dn-surface);
  transition:border-color .2s, box-shadow .25s;}
.single-post .post-navigation > div:hover{border-color:var(--dn-teal); box-shadow:0 10px 24px -16px color-mix(in srgb, var(--dn-ink) 40%, transparent);}
.single-post .post-navigation .nav-next{grid-column:2; justify-content:flex-end; text-align:right;}
.single-post .post-navigation a{font-size:15px; font-weight:800; line-height:1.35; color:var(--dn-ink); text-decoration:none;}
.single-post .post-navigation .gp-icon{flex:none; color:var(--dn-teal-dark);}

/* FAQ: same divided rows with a +/x toggle as the home page */
.single-post .entry-content details.wp-block-details{margin:0; padding:0; border-bottom:1px solid var(--dn-line);}
.single-post .entry-content :is(h2,h3) + details.wp-block-details{border-top:1px solid var(--dn-line); margin-top:8px;}
.single-post .entry-content details.wp-block-details > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 6px; cursor:pointer; font-size:17px; font-weight:800; line-height:1.38; color:var(--dn-ink);}
.single-post .entry-content details.wp-block-details > summary::-webkit-details-marker{display:none;}
.single-post .entry-content details.wp-block-details > summary::after{content:"+"; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:999px; border:1px solid var(--dn-line); font-size:20px; font-weight:400; line-height:1; color:var(--dn-teal-dark); transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .15s;}
.single-post .entry-content details.wp-block-details[open] > summary::after{transform:rotate(45deg); border-color:var(--dn-teal);}
.single-post .entry-content details.wp-block-details > summary:hover{color:var(--dn-purple-dark);}
.single-post .entry-content details.wp-block-details > summary:focus-visible{outline:3px solid var(--dn-teal); outline-offset:2px; border-radius:8px;}
.single-post .entry-content details.wp-block-details > :not(summary){margin:0 6px 20px; font-size:17px;}
@media (max-width:600px){
  .single-post .featured-image{margin-bottom:24px;}
  .single-post .entry-content p, .single-post .entry-content li{font-size:17px;}
  .single-post .post-navigation{grid-template-columns:1fr;}
  .single-post .post-navigation .nav-next{grid-column:1;}
}
@media (prefers-reduced-motion:reduce){ .single-post .entry-content details.wp-block-details > summary::after{transition:none;} }

/* ---------- blog v2: full-width text, framed in-post images, product cards ---------- */
/* text fills the article (Damon: less side space, less scrolling); pictures stay centred */
.single-post .entry-header, .single-post .entry-content, .single-post footer.entry-meta{max-width:none;}
.single-post .entry-content figure.wp-block-image{max-width:880px; margin:2em auto;}
.single-post .entry-content figure.wp-block-image .dn-fi img{border-radius:0;}
/* product cards after the paragraph that mentions them: a swipeable strip, Add to bag on each */
.single-post .dn-shopstrip{grid-auto-columns:minmax(200px,230px); gap:14px; margin:4px 0 1.8em; padding:4px 2px 12px;}
.dn-pcard{scroll-snap-align:start; display:flex; flex-direction:column; min-width:0; border:1px solid var(--dn-line); border-radius:var(--dn-radius); background:var(--dn-surface); overflow:hidden;
  transition:border-color .2s, box-shadow .25s;}
.dn-pcard:hover{border-color:color-mix(in srgb, var(--dn-teal) 55%, var(--dn-line)); box-shadow:0 12px 26px -16px color-mix(in srgb, var(--dn-ink) 38%, transparent);}
.single-post .entry-content a.dn-pcard__link{display:flex; flex-direction:column; gap:4px; color:var(--dn-ink); text-decoration:none;}
.dn-pcard__shot{display:block; aspect-ratio:1/1; background:var(--dn-surface); border-bottom:1px solid var(--dn-line);}
.dn-pcard__shot img{width:100%; height:100%; object-fit:contain; padding:10px; mix-blend-mode:multiply;}
.dn-pcard__brand{padding:9px 12px 0; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dn-teal-dark);}
.dn-pcard__name{padding:0 12px 4px; font-size:14.5px; font-weight:800; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;}
.single-post .dn-pcard .dn-price{margin:auto 0 0; padding:9px 12px 10px;}
.dn-pcard .dn-add{display:block; margin:0; padding:0 12px 12px;}
.dn-pcard .dn-add .dn-btn{display:block; width:100%; padding:9px 12px; border-radius:999px; font-size:14px; text-align:center;}
.dn-pcard .dn-addmsg{margin:6px 0 0; font-size:12.5px; line-height:1.35;}
.dn-pcard .dn-addmsg:empty{display:none;}
@media (max-width:600px){
  .single-post .dn-shopstrip{grid-auto-columns:minmax(160px,47%); gap:10px;}
  .single-post .entry-content figure.wp-block-image{margin:1.5em auto;}
}

/* ---------- blog: compact slideshow for runs of pictures ---------- */
.dn-slides{position:relative; max-width:880px; margin:2em auto 1.6em;}
.dn-slides__track{display:grid; grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:var(--dn-radius); overscroll-behavior-x:contain;}
.dn-slides__track::-webkit-scrollbar{display:none;}
.single-post .entry-content .dn-slides__track > figure.wp-block-image{scroll-snap-align:center; margin:0; max-width:none; min-width:0;}
.dn-slides__track figcaption{padding:0 12px;}
.dn-slides__btn{position:absolute; top:calc(50% - 30px); z-index:2; display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:999px;
  background:color-mix(in srgb, var(--dn-surface) 92%, transparent); color:var(--dn-ink); font-size:28px; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--dn-ink) 50%, transparent); transition:transform .15s, background-color .15s;}
.dn-slides__btn:hover{transform:scale(1.06); background:var(--dn-surface);}
.dn-slides__btn:focus-visible{outline:3px solid var(--dn-teal); outline-offset:2px;}
.dn-slides__btn--prev{left:10px;}
.dn-slides__btn--next{right:10px;}
.dn-slides__dots{display:flex; justify-content:center; gap:8px; margin-top:12px;}
.dn-slides__dot{width:9px; height:9px; padding:0; border:0; border-radius:999px; background:var(--dn-line); cursor:pointer; transition:width .2s, background-color .2s;}
.dn-slides__dot[aria-current="true"]{width:22px; background:var(--dn-teal-dark);}
.dn-slides__dot:focus-visible{outline:2px solid var(--dn-teal); outline-offset:2px;}
.dn-slides__count{position:absolute; top:10px; right:10px; z-index:2; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:800;
  color:#fff; background:color-mix(in srgb, var(--dn-ink) 70%, transparent); font-variant-numeric:tabular-nums;}
@media (max-width:600px){
  .dn-slides{margin:1.5em auto 1.3em;}
  .dn-slides__btn{width:34px; height:34px; font-size:22px; top:calc(50% - 26px);}
  .dn-slides__btn--prev{left:6px;}
  .dn-slides__btn--next{right:6px;}
}
@media (prefers-reduced-motion:reduce){ .dn-slides__dot, .dn-slides__btn{transition:none;} }

/* ==========================================================================
   SHOP LAYOUT (v0.18.0): banner strip, category pills, toolbar
   (Filter / Strain type / Brands / Subcategories / Sort), filter drawer, pills.
   One look for every shop page: categories, brands, deals, search, Shop by Type.
   ========================================================================== */
.dn-banners{position:relative; margin:0 0 14px; border-radius:var(--dn-radius); overflow:hidden; background:var(--dn-surface-2, #f0ece2);}
.dn-banners__track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;}
.dn-banners__track::-webkit-scrollbar{display:none;}
.dn-banner{flex:0 0 100%; scroll-snap-align:start; display:flex; align-items:center;}
.dn-banner a{display:block; width:100%;}
.dn-banner img{display:block; width:100%; height:auto;}
.dn-banners__btn{position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:0;
  background:rgba(255,255,255,.88); color:#111; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); display:grid; place-items:center; padding:0 0 3px;}
.dn-banners__btn--prev{left:8px;}
.dn-banners__btn--next{right:8px;}
.dn-banners__btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.dn-banners__dots{position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:center; gap:6px;}
.dn-banners__dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.55); cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.dn-banners__dot[aria-current="true"]{background:#fff; width:20px; border-radius:4px;}
@media (max-width:640px){ .dn-banners{border-radius:8px;} .dn-banners__btn{display:none;} }

.dn-catnav{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 0 16px; padding:2px 0 4px;}
.dn-catnav::-webkit-scrollbar{display:none;}
.dn-catpill{flex:0 0 auto; padding:8px 16px; border-radius:999px; border:1.5px solid var(--dn-line); background:var(--dn-surface);
  color:var(--dn-ink); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; transition:border-color .15s, background .15s;}
.dn-catpill:hover,.dn-catpill:focus-visible{border-color:var(--dn-accent); color:var(--dn-ink);}
.dn-catpill.is-on{background:var(--dn-accent); border-color:var(--dn-accent); color:#fff;}
.dn-catpill--soft{color:var(--dn-muted); font-weight:600;}

.dn-shop{margin:0 0 8px;}
.dn-shopbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; flex-wrap:wrap;}
.dn-shopbar__tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.dn-tb{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; min-height:42px; border-radius:999px; border:1.5px solid var(--dn-line);
  background:var(--dn-surface); color:var(--dn-ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; list-style:none; user-select:none; white-space:nowrap;}
.dn-tb::-webkit-details-marker{display:none;}
.dn-tb:hover,.dn-tb:focus-visible{border-color:var(--dn-accent);}
.dn-tb.is-set{background:var(--dn-accent); border-color:var(--dn-accent); color:#fff;}
.dn-tb--filter{background:var(--dn-ink); border-color:var(--dn-ink); color:#fff;}
.dn-tb--filter:hover,.dn-tb--filter:focus-visible{background:var(--dn-accent); border-color:var(--dn-accent);}
.dn-tb__n{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#fff; color:var(--dn-ink); font-size:12px; line-height:1;}
.dn-chev{transition:transform .15s;}
.dn-dd[open] > summary .dn-chev, .dn-fsec[open] > summary .dn-chev{transform:rotate(180deg);}

.dn-dd{position:relative;}
.dn-dd__panel{position:absolute; z-index:50; top:calc(100% + 6px); left:0; width:300px; max-width:calc(100vw - 32px); background:var(--dn-surface);
  border:1px solid var(--dn-line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.16); padding:12px;}
.dn-dd.is-busy .dn-optlist{opacity:.5; pointer-events:none;}
.dn-find{margin:0 0 8px;}
.dn-find__input{width:100%; box-sizing:border-box; padding:9px 12px; border:1.5px solid var(--dn-line); border-radius:999px; font:inherit; font-size:14px; background:var(--dn-ground, #f4f3f8);}
.dn-find__input:focus{outline:none; border-color:var(--dn-accent); background:var(--dn-surface);}
.dn-optlist{max-height:280px; overflow-y:auto; overscroll-behavior:contain; margin:0 -4px; padding:0 4px;}
.dn-opt{display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:8px; cursor:pointer; font-size:15px;}
/* The subcategory search sets .hidden on rows that do not match, but an author
   display:flex beats the browser's own [hidden]{display:none}, so every row stayed
   visible and the search box looked dead (reported from the floor 18/10/26). Same trap
   already fixed once for .dn-brandgrid > [hidden]; the option list was missed. */
.dn-opt[hidden]{display:none;}
.dn-opt:hover{background:var(--dn-ground, #f4f3f8);}
.dn-opt input{width:18px; height:18px; margin:0; accent-color:var(--dn-accent); flex:0 0 auto;}
.dn-opt__label{flex:1 1 auto;}
.dn-opt__n{font-size:12px; color:var(--dn-muted); background:var(--dn-ground, #f4f3f8); border-radius:999px; padding:1px 8px;}
.dn-dd__foot{display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--dn-line);}
.dn-dd__foot > *{flex:1 1 0;}
.dn-btnline,.dn-btnfill{display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:999px; font:inherit; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer;}
.dn-btnline{border:1.5px solid var(--dn-ink); color:var(--dn-ink); background:var(--dn-surface);}
.dn-btnline:hover,.dn-btnline:focus-visible{border-color:var(--dn-accent); color:var(--dn-accent);}
.dn-btnfill{border:1.5px solid var(--dn-accent); background:var(--dn-accent); color:#fff;}
.dn-btnfill:hover,.dn-btnfill:focus-visible{filter:brightness(.92);}
.dn-js .dn-nojs{display:none;}

.dn-sortform{display:flex; align-items:center; gap:8px; margin:0;}
.dn-sortform__label{font-size:14px; color:var(--dn-muted); font-weight:600;}
.dn-sortform__select{min-height:42px; padding:8px 36px 8px 14px; border-radius:999px; border:1.5px solid var(--dn-line); background-color:var(--dn-surface);
  font:inherit; font-size:15px; font-weight:600; color:var(--dn-ink); cursor:pointer;}
.dn-sortform__select:focus{outline:none; border-color:var(--dn-accent);}

.dn-status{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 14px;}
.dn-status .dn-count{margin:0; font-size:15px; font-weight:700; color:var(--dn-ink);}
.dn-pills{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.dn-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 12px; border-radius:999px; background:var(--dn-ground, #f4f3f8);
  border:1px solid var(--dn-line); color:var(--dn-ink); font-size:13px; font-weight:600; text-decoration:none;}
.dn-pill span{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--dn-surface); font-size:14px; line-height:1;}
.dn-pill:hover,.dn-pill:focus-visible{border-color:var(--dn-accent); color:var(--dn-ink);}
.dn-clearall{font-size:13px; font-weight:700; color:var(--dn-accent); margin-left:2px;}

.dn-drawer{position:fixed; inset:0; z-index:100000;}
.dn-drawer[hidden]{display:none;}
.dn-drawer__scrim{position:absolute; inset:0; background:rgba(10,10,16,.45); animation:dn-fade .15s ease-out;}
.dn-drawer__panel{position:absolute; top:0; bottom:0; left:0; width:380px; max-width:92vw; background:var(--dn-surface); display:flex; flex-direction:column;
  box-shadow:6px 0 30px rgba(0,0,0,.2); margin:0; animation:dn-slide .2s ease-out;}
.dn-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--dn-line);}
.dn-drawer__head h2{margin:0; font-size:20px;}
.dn-drawer__x{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--dn-line); background:var(--dn-surface); font-size:24px; line-height:1; cursor:pointer; color:var(--dn-ink); padding:0 0 3px;}
.dn-drawer__x:hover,.dn-drawer__x:focus-visible{border-color:var(--dn-accent);}
.dn-drawer__body{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:4px 20px 12px;}
.dn-drawer__foot{display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--dn-line); background:var(--dn-surface);}
.dn-drawer__foot > *{flex:1 1 0; min-height:46px;}
.dn-fsec{border-bottom:1px solid var(--dn-line); padding:4px 0;}
.dn-fsec > summary{display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:12px 0; font-size:17px; font-weight:800;}
.dn-fsec > summary::-webkit-details-marker{display:none;}
.dn-fsec > summary .dn-chev{margin-left:auto;}
.dn-fsec > summary .dn-tb__n{background:var(--dn-accent); color:#fff;}
.dn-fsec .dn-optlist{max-height:260px; margin-bottom:10px;}
.dn-fsec--toggle{padding:14px 0;}
.dn-optlist--chips{display:flex; flex-wrap:wrap; gap:8px; max-height:none;}
.dn-optlist--chips .dn-opt{padding:0; position:relative;}
.dn-optlist--chips .dn-opt input{position:absolute; opacity:0; width:1px; height:1px;}
.dn-optlist--chips .dn-opt__label{padding:8px 14px; border:1.5px solid var(--dn-line); border-radius:999px; font-weight:600; font-size:14px;}
.dn-optlist--chips .dn-opt__n{display:none;}
.dn-optlist--chips .dn-opt input:checked + .dn-opt__label{background:var(--dn-accent); border-color:var(--dn-accent); color:#fff;}
.dn-optlist--chips .dn-opt input:focus-visible + .dn-opt__label{outline:2px solid var(--dn-accent); outline-offset:2px;}
.dn-optlist--chips .dn-opt:hover{background:none;}
.dn-range{display:flex; gap:10px; margin:0 0 6px;}
.dn-range label{flex:1 1 0; display:flex; align-items:center; gap:6px; font-size:14px; color:var(--dn-muted); font-weight:600;}
.dn-range input{width:100%; min-width:0; padding:9px 10px; border:1.5px solid var(--dn-line); border-radius:10px; font:inherit; font-size:15px; color:var(--dn-ink);}
.dn-range input:focus{outline:none; border-color:var(--dn-accent);}
.dn-fnote{font-size:12px; color:var(--dn-muted); margin:4px 0 12px;}
.dn-switch{display:flex; align-items:center; gap:12px; cursor:pointer; font-size:16px; font-weight:700; position:relative;}
.dn-switch input{position:absolute; opacity:0; width:1px; height:1px;}
.dn-switch__ui{position:relative; width:44px; height:26px; border-radius:999px; background:var(--dn-line); transition:background .15s; flex:0 0 auto;}
.dn-switch__ui::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s;}
.dn-switch input:checked + .dn-switch__ui{background:var(--dn-accent);}
.dn-switch input:checked + .dn-switch__ui::after{transform:translateX(18px);}
.dn-switch input:focus-visible + .dn-switch__ui{outline:2px solid var(--dn-accent); outline-offset:2px;}
.dn-noscroll, .dn-noscroll body{overflow:hidden;}
@keyframes dn-slide{from{transform:translateX(-100%);} to{transform:none;}}
@keyframes dn-fade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){ .dn-drawer__panel,.dn-drawer__scrim{animation:none;} .dn-chev,.dn-switch__ui,.dn-switch__ui::after{transition:none;} }

@media (max-width:760px){
  .dn-shopbar{align-items:stretch;}
  .dn-shopbar__tools{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%; padding-bottom:2px;}
  .dn-shopbar__tools::-webkit-scrollbar{display:none;}
  .dn-tb{padding:8px 14px; min-height:40px; font-size:14px;}
  .dn-dd{position:static;}
  .dn-dd__panel{position:fixed; left:12px; right:12px; top:auto; bottom:12px; width:auto; max-width:none; max-height:70vh; display:flex; flex-direction:column;}
  .dn-dd__panel form{display:flex; flex-direction:column; min-height:0;}
  .dn-dd__panel .dn-optlist{max-height:none; flex:1 1 auto;}
  .dn-sortform{width:100%; justify-content:flex-end;}
}

/* Shop buttons vs the theme's global `button:not(.menu-toggle):not(.dn-agegate__no)` style (uppercase
   teal block, 0,2,1 specificity, loads after this file). :not(#dn) lifts ours above it. */
button.dn-tb:not(#dn), button.dn-banners__btn:not(#dn), button.dn-banners__dot:not(#dn),
button.dn-drawer__x:not(#dn), button.dn-btnfill:not(#dn){
  text-transform:none; letter-spacing:normal; transform:none; box-shadow:none; font-family:inherit; line-height:1.2;}
button.dn-tb:not(#dn){padding:9px 16px; min-height:42px; border-radius:999px; font-size:15px; font-weight:700;}
button.dn-tb--filter:not(#dn){background:var(--dn-ink); border:1.5px solid var(--dn-ink); color:#fff;}
button.dn-tb--filter:not(#dn):hover, button.dn-tb--filter:not(#dn):focus-visible{background:var(--dn-accent); border-color:var(--dn-accent); color:#fff;}
button.dn-tb--filter.is-set:not(#dn){background:var(--dn-accent); border-color:var(--dn-accent);}
button.dn-banners__btn:not(#dn){width:34px; height:34px; padding:0 0 3px; border:0; border-radius:50%; background:rgba(255,255,255,.88); color:#111; font-size:22px; font-weight:400;}
button.dn-banners__btn:not(#dn):hover{background:#fff; color:#111;}
button.dn-banners__dot:not(#dn){width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.55); font-size:0;}
button.dn-banners__dot:not(#dn)[aria-current="true"]{background:#fff; width:20px; border-radius:4px;}
button.dn-banners__dot:not(#dn):hover{background:#fff;}
button.dn-drawer__x:not(#dn){width:38px; height:38px; padding:0 0 3px; border:1.5px solid var(--dn-line); border-radius:50%; background:var(--dn-surface); color:var(--dn-ink); font-size:24px; font-weight:400;}
button.dn-drawer__x:not(#dn):hover, button.dn-drawer__x:not(#dn):focus-visible{border-color:var(--dn-accent); background:var(--dn-surface); color:var(--dn-ink);}
button.dn-btnfill:not(#dn){padding:9px 14px; border:1.5px solid var(--dn-accent); border-radius:999px; background:var(--dn-accent); color:#fff; font-size:14px; font-weight:700;}
button.dn-btnfill:not(#dn):hover, button.dn-btnfill:not(#dn):focus-visible{background:var(--dn-accent); color:#fff; filter:brightness(.92);}
.dn-drawer__foot button.dn-btnfill:not(#dn){font-size:15px;}

/* Theme link colour (magenta) on our pill/links: keep them ink. */
a.dn-catpill:not(#dn){color:var(--dn-ink); text-decoration:none;}
a.dn-catpill.is-on:not(#dn){color:#fff;}
a.dn-catpill--soft:not(#dn){color:var(--dn-muted);}
a.dn-pill:not(#dn), a.dn-btnline:not(#dn){color:var(--dn-ink); text-decoration:none;}
a.dn-btnline:not(#dn):hover, a.dn-btnline:not(#dn):focus-visible{color:var(--dn-accent);}
a.dn-clearall:not(#dn){color:var(--dn-accent);}
.dn-typecopy{margin-top:28px; padding-top:18px; border-top:1px solid var(--dn-line); max-width:820px;}
@media (max-width:640px){ a.dn-catpill:not(#dn){padding:7px 14px; font-size:13px;} }
.dn-tb, .dn-catpill, .dn-sortform__select, .dn-btnline, .dn-btnfill, .dn-pill{box-sizing:border-box;}

/* VIP Deals page ([dn_vip], v0.18.2) */
.dn-vip{margin:0 0 24px;}
.dn-viphero{background:var(--dn-grad, linear-gradient(100deg,#9207e2,#2f9bb6)); color:#fff; border-radius:var(--dn-radius); padding:28px 28px 24px; margin:0 0 22px;}
.dn-viphero h1{color:#fff; margin:2px 0 8px; font-size:clamp(30px,5vw,46px);}
.dn-viphero p{margin:0 0 6px; font-size:17px; max-width:640px;}
.dn-viphero__kicker{text-transform:uppercase; letter-spacing:.12em; font-size:13px !important; font-weight:800; opacity:.9;}
.dn-viphero__small{font-size:14px !important; opacity:.92;}
.dn-viphero a:not(#dn){color:#fff; text-decoration:underline;}
.dn-vipdeal{border:1px solid var(--dn-line); border-radius:var(--dn-radius); padding:16px; margin:0 0 18px; background:var(--dn-surface);}
.dn-vipdeal__head{display:flex; align-items:center; gap:14px; margin:0 0 12px;}
.dn-vipdeal__head h2{margin:0 0 4px; font-size:21px;}
.dn-vipdeal__head p{margin:0; color:var(--dn-muted);}
.dn-vipdeal__head > div{flex:1 1 auto;}
.dn-vipdeal__logo{width:64px; height:64px; object-fit:contain; border-radius:10px; background:var(--dn-ground, #f4f3f8); padding:6px; flex:0 0 auto;}
.dn-vipterms{font-size:13px; color:var(--dn-muted); margin-top:18px;}
@media (max-width:640px){ .dn-vipdeal__head{flex-wrap:wrap;} .dn-vipdeal__head .dn-viewall{width:100%;} .dn-viphero{padding:22px 18px;} }
/* Doobie Dividends: the loyalty block on the bag, and the join page's two doors. */
.dn-loy{margin:0 0 22px; padding:16px 18px; border:1px solid var(--dn-line); border-radius:var(--dn-radius); background:var(--dn-surface-2);}
.dn-loy h2{margin:0 0 6px; font-size:19px;}
.dn-loy p{margin:0 0 10px;}
.dn-loy p:last-child{margin-bottom:0;}
.dn-loyrow{display:flex; flex-wrap:wrap; gap:10px;}
.dn-loybal{font-size:15px; color:var(--dn-muted);}
.dn-loybal b{font-size:28px; color:var(--dn-ink); font-variant-numeric:tabular-nums; margin-right:4px;}
.dn-loyon{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px;}
.dn-loyon li{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; padding:8px 10px; background:var(--dn-surface); border:1px solid var(--dn-line); border-radius:8px;}
.dn-loyon li span{flex:1 1 auto; min-width:0;}
.dn-loyon li b{color:var(--dn-accent); font-variant-numeric:tabular-nums;}
.dn-loydeals{list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;}
.dn-loydeal{display:flex; flex-direction:column; gap:4px; padding:12px 13px; background:var(--dn-surface); border:1px solid var(--dn-line); border-radius:8px;}
.dn-loydeal b{font-size:15px;}
.dn-loydeal span{font-size:13px; color:var(--dn-muted);}
.dn-loydeal .dn-btn{margin-top:auto; text-align:center; font-size:14px; padding:8px 12px;}
.dn-loydeal.is-short{opacity:.72;}
.dn-loydeal.is-short .dn-btn{cursor:default; border-style:dashed; color:var(--dn-muted);}
.dn-loyoff{flex:0 0 auto; font:inherit; font-size:13px; padding:2px 8px; border:1px solid var(--dn-line); border-radius:999px; background:transparent; color:var(--dn-muted); cursor:pointer;}
.dn-loyoff:hover,.dn-loyoff:focus-visible{border-color:var(--dn-ember); color:var(--dn-ember);}
.dn-chip.is-on .dn-loyoff{border-color:rgba(255,255,255,.4); color:#fff; margin-left:4px;}
.dn-loymsg{margin:8px 0 0; font-size:14px; color:var(--dn-ember); min-height:1em;}
.dn-join{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:0 0 28px;}
.dn-joincard{display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--dn-line); border-radius:var(--dn-radius); background:var(--dn-surface);}
.dn-joincard h2{margin:0; font-size:20px;}
.dn-joincard p{margin:0; color:var(--dn-muted);}
.dn-joincard .dn-btn{margin-top:auto; align-self:flex-start;}
.dn-joinsteps{list-style:none; margin:0 0 24px; padding:0; counter-reset:dnstep; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.dn-joinsteps li{counter-increment:dnstep; display:flex; flex-direction:column; gap:4px; padding-top:38px; position:relative;}
.dn-joinsteps li::before{content:counter(dnstep); position:absolute; top:0; left:0; width:28px; height:28px; border-radius:999px;
  background:var(--dn-accent); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center;}
.dn-joinsteps li b{font-size:16px;}
.dn-joinsteps li span{color:var(--dn-muted);}
@media (max-width:560px){
  .dn-loyrow .dn-btn,.dn-joincard .dn-btn{width:100%; text-align:center;}
  .dn-loydeals{grid-template-columns:1fr;}
}
.dn-pdp-rewards{margin:12px 0 0; padding:11px 14px; border-radius:8px; background:var(--dn-surface-2);
  border:1px solid var(--dn-line); font-size:14px; line-height:1.5;}
.dn-pdp-rewards b{color:var(--dn-accent);}
.dn-pdp-rewards a{color:var(--dn-ink);}
/* Footer social row (Megan 10/08). Inline SVG so there is no icon font to load. */
.dn-footer__social{display:flex; gap:14px; align-items:center; margin:10px 0 0;}
.dn-footer__social a{display:inline-flex; color:inherit; opacity:.85; transition:opacity .15s ease, transform .15s ease;}
.dn-footer__social a:hover,.dn-footer__social a:focus-visible{opacity:1; transform:translateY(-1px);}
.dn-footer__social svg{display:block;}
/* Google map on Find Us, and the social row reused outside the footer. */
.dn-map{border-radius:10px; overflow:hidden; border:1px solid var(--dn-line); line-height:0;}
.dn-map iframe{display:block; width:100%; border:0;}
@media (max-width:781px){ .dn-map iframe{height:260px;} }
.dn-social{display:flex; gap:14px; align-items:center; margin:10px 0 0;}
.dn-social a{display:inline-flex; color:inherit; opacity:.8; transition:opacity .15s ease, transform .15s ease;}
.dn-social a:hover,.dn-social a:focus-visible{opacity:1; transform:translateY(-1px);}
.dn-social svg{display:block;}

/* Page heroes sat flush against the first paragraph on every hero page - Megan raised it
   three times (FAQs, Patient Info, Service Areas). One rule, all seven pages. */
.dn-page-hero{margin-bottom:clamp(28px,4vw,56px);}

/* Recommended posts as a swipeable card rail (Patient Info). */
.dn-postrail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; padding-bottom:10px; margin:0 0 20px;}
.dn-postcard{scroll-snap-align:start; display:flex; flex-direction:column; background:var(--dn-surface);
  border:1px solid var(--dn-line); border-radius:var(--dn-radius); overflow:hidden; color:var(--dn-ink);
  text-decoration:none; transition:border-color .15s ease, transform .15s ease;}
.dn-postcard:hover,.dn-postcard:focus-visible{border-color:var(--dn-accent); transform:translateY(-2px); color:var(--dn-ink);}
.dn-postcard__img{display:block; aspect-ratio:16/9; background:var(--dn-surface-2);}
.dn-postcard__img img{width:100%; height:100%; object-fit:cover; display:block;}
.dn-postcard__t{padding:12px 14px 16px; font-weight:600; line-height:1.35;}
@media (min-width:900px){ .dn-postrail{grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible;} }

/* The About-family page row. These pages are not in the main menu, so without this there is
   no path between them at all. */
.dn-aboutnav{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center;
  margin:clamp(28px,4vw,48px) auto 0; padding-top:18px; border-top:1px solid var(--dn-line); font-size:15px;}
.dn-aboutnav b{width:100%; margin-bottom:2px; font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dn-muted); font-weight:700;}
.dn-aboutnav a,.dn-aboutnav [aria-current]{padding:6px 14px; border-radius:999px; text-decoration:none; line-height:1.4;}
.dn-aboutnav a{color:var(--dn-ink); border:1px solid var(--dn-line);}
.dn-aboutnav a:hover,.dn-aboutnav a:focus-visible{border-color:var(--dn-accent); color:var(--dn-accent);}
.dn-aboutnav [aria-current]{background:var(--dn-ink); color:#fff; font-weight:600; border:1px solid var(--dn-ink);}

/* Add-to-bag on product cards (Megan, 20 Oct). The card's form is a wrapping flex column, so the
   "Added. View bag & checkout" message wrapped into a second column that the card clips: all that
   showed was a stray "A" beside the button, and the taller form shoved the button up. It is now a
   small toast over the price row that fades after a few seconds. Errors stay until the next try. */
.dn-card .dn-add--card{flex-wrap:nowrap}
.dn-card .dn-add--card .dn-addmsg{flex-basis:auto;position:absolute;left:14px;right:14px;bottom:calc(100% + 4px);z-index:3;
	padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--dn-line,#e3e3e3);box-shadow:0 8px 22px -10px rgba(0,0,0,.35);
	font-size:12.5px;line-height:1.35;color:var(--dn-ink,#1a1a1a);animation:dn-addtoast 6s ease forwards}
.dn-card .dn-add--card .dn-addmsg:empty{display:none}
.dn-card .dn-add--card .dn-addmsg.is-err{animation:none;border-color:#d33}
@keyframes dn-addtoast{0%{opacity:0;transform:translateY(4px)}6%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;visibility:hidden}}

/* [dn_categories rail="1"]: the home page's category tiles as one scrolling row (Damon, 20 Oct). Three
   classes so it beats both the .dn-catgrid columns and the phone-width rules for each. */
.dn-catrail .dn-catgrid.dn-rail{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(140px,11vw,168px);
	gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 0 1.5em}
.dn-catrail .dn-catgrid.dn-rail > .dn-tile{scroll-snap-align:start}
@media (max-width:600px){.dn-catrail .dn-catgrid.dn-rail{grid-auto-columns:132px;gap:10px}}

/* 0.52.0 (Damon, 20 Oct): the same search + filters on every menu page. The search sits at the start of
   the shop bar, sized to the filter pills (42px, fully round), not the oversized box /menu/ used to have. */
.dn-shopbar{justify-content:flex-start}
.dn-shopbar .dn-sortform{margin-left:auto}
.dn-shopsearch{display:flex;align-items:center;flex:0 1 320px;min-width:220px;height:42px;margin:0;padding:0 4px 0 16px;
	border:1px solid var(--dn-line);border-radius:999px;background:var(--dn-surface,#fff)}
.dn-shopsearch input[type=search]{flex:1 1 auto;min-width:0;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;
	box-shadow:none;font-size:15px;color:var(--dn-ink);outline:0}
.dn-shopsearch button{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:999px;
	background:var(--dn-teal,#2f9bb6);color:#fff;cursor:pointer}
.dn-shopsearch button:hover{filter:brightness(.92)}
.dn-shopsearch:focus-within{border-color:var(--dn-teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--dn-teal,#2f9bb6) 22%,transparent)}
@media (max-width:600px){.dn-shopsearch{flex:1 1 100%;min-width:0}}
.dn-shop--baronly{margin-bottom:8px}

/* Category and brand tiles as scrolling rows inside dn_menu_section(), like the product rails. */
.dn-catsec .dn-rail.dn-tilerail{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(140px,11vw,168px);
	gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 0 1.5em}
.dn-catsec .dn-rail.dn-tilerail.dn-brandgrid{grid-auto-columns:clamp(150px,12vw,180px)}
.dn-catsec .dn-rail.dn-tilerail > .dn-tile{scroll-snap-align:start}
@media (max-width:600px){.dn-catsec .dn-rail.dn-tilerail{grid-auto-columns:132px;gap:10px}}

/* /menu/ (0.52.2): three doors to every category, type and brand, then every type page as pills. On a
   phone the Shop mega panel isn't there, so /menu/ is the way into all of them (Damon, 20 Oct). */
.dn-browse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 26px}
.dn-browse a{display:flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid var(--dn-line);border-radius:var(--dn-radius,14px);
	background:var(--dn-surface,#fff);color:var(--dn-ink);text-decoration:none}
.dn-browse a b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.dn-browse a span{margin-left:auto;font-size:13px;font-weight:700;color:var(--dn-muted)}
.dn-browse a::after{content:"\2192";color:var(--dn-teal);font-weight:800}
.dn-browse a:hover,.dn-browse a:focus-visible{border-color:var(--dn-teal);box-shadow:0 8px 24px rgba(47,155,182,.15)}
@media (max-width:600px){.dn-browse{grid-template-columns:1fr;gap:8px}.dn-browse a{padding:12px 16px}}
.dn-typepills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.5em}
/* Black labels (Damon, 20 Oct): the theme's link colour was beating .dn-browse a, so match the menu's :not(#dn) weight. */
.dn-browse a:not(#dn),.dn-browse a:not(#dn) b{color:var(--dn-ink,#1a1a1a)}