/* Stan's Northfield Bakery — the only CSS Webflow cannot express itself.
   Everything else on this page is a real Webflow class, edited in the Designer.
   What lives here: page defaults, selectors Webflow has no UI for (:has,
   [attr] state, ::before, ::-webkit-scrollbar), and the two CMS sections whose
   empty-field handling needs :has. Keep it small. If a rule can be a Webflow
   class, it should be one. */

/* ---- page defaults ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:#FFF7E9; color:#1B1A2E;
  font-family:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:clamp(1.06rem,1.2vw,1.16rem); line-height:1.6; font-weight:420;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:"Fraunces","Times New Roman",serif; font-weight:800;
  line-height:.94; letter-spacing:-.022em;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96}
p{margin:0}
/* The lightbox sets .hidden on itself when it closes, and a class-level
   display:grid outranks the browser's own [hidden] rule — without this the
   closed overlay stays full-screen at opacity 0 and eats every click. */
[hidden]{display:none !important}
:focus-visible{outline:3px solid #2F55DE; outline-offset:3px; border-radius:4px}

/* ---- state driven by JS attributes, not classes ---- */
.s-nav.stuck{box-shadow:0 14px 34px -20px rgba(27,26,46,.42)}
.bn[disabled]{opacity:.3; cursor:default; transform:none}
.bench.dragging{cursor:grabbing; scroll-snap-type:none}
.bench.dragging img{pointer-events:none}
.flavors .flav[aria-pressed="true"]{background:#F2568C; color:#fff; box-shadow:0 4px 0 0 #B0325F}
.flavor-box .fb-full{display:none}
.flavor-box[data-state="full"] .fb-empty{display:none}
.flavor-box[data-state="full"] .fb-full{display:block}

/* ---- the announcement ribbon ----
   The track holds every message twice, so translating it exactly half its
   own width loops seamlessly at the same speed on any screen. Webflow
   rejects @keyframes outright, which is why this lives here: without it the
   ribbon sits still and a phone shows one message cut off mid-word. */
@keyframes stans-ribbon{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.announce-track{
  animation:stans-ribbon 38s linear infinite;
  will-change:transform;
}
.announce:hover .announce-track,
.announce:focus-within .announce-track{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  /* no drifting text; let them swipe through it instead */
  .announce-track{animation:none}
  .announce-mask{overflow-x:auto; scrollbar-width:none}
  .announce-mask::-webkit-scrollbar{display:none}
}

/* ---- the cookie bench scrollbar ---- */
.bench::-webkit-scrollbar{height:7px}
.bench::-webkit-scrollbar-track{background:rgba(255,255,255,.09); border-radius:99px}
.bench::-webkit-scrollbar-thumb{background:rgba(255,255,255,.34); border-radius:99px}
.bench-it:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}

/* ---- the wide case card ---- */
.span-12.item-wide{flex-direction:row; align-items:stretch; min-height:280px}

@media screen and (max-width: 991px){
  .mobnav[data-open="1"]{display:flex}
  .span-12.item-wide{flex-direction:column; min-height:0}
}
@media screen and (max-width: 767px){
  .case-note-a{display:inline-block; align-items:center; min-height:44px; padding-block:.5em}
  .bench-it-figcaption, .card-figcaption{white-space:normal; overflow-wrap:anywhere; hyphens:auto}
}


/* ---- section headers ----
   The CMS sections are raw markup, so their header columns have no Webflow
   class to carry a span. Give every section header the same 6/6 split the
   hand-built ones get from theirs. */
.sect-head > :first-child{grid-column:1 / 7}
.sect-head > .sect-lede{grid-column:7 / 13; max-width:none}
@media screen and (max-width: 991px){
  .sect-head > :first-child, .sect-head > .sect-lede{grid-column:1 / -1}
}

/* ---- hover polish that needs a descendant selector ---- */
.case .chip-on{box-shadow:0 2px 10px rgba(27,26,46,.3)}
.item-photo:hover .ph img{transform:scale(1.045)}
.tilt{transition:transform .45s cubic-bezier(.2,.7,.25,1)}

/* ---- photo lightbox ----
   stans.js builds this overlay at click time, so these class names never exist
   in the static markup and cannot be Webflow classes. Without them, clicking a
   photo opens an unstyled full-screen div with no visible close button. */
.lbx{position:fixed; top:0; right:0; bottom:0; left:0; z-index:200; display:grid;
  place-items:center; background:rgba(27,26,46,.90); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s cubic-bezier(.2,.7,.25,1);
  padding:clamp(1rem,4vw,3rem)}
.lbx.on{opacity:1}
.lbx-fig{margin:0; display:grid; justify-items:center; gap:1rem; max-width:min(1100px,94vw)}
.lbx-fig img{max-width:100%; max-height:76vh; width:auto; border-radius:18px;
  background:#FFF7E9; box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.lbx-fig figcaption{color:#FFF7E9; font-size:1rem; font-weight:650; text-align:center; max-width:52ch}
.lbx-count{position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  color:rgba(255,247,233,.6); font-size:.82rem; letter-spacing:.12em; margin:0}
.lbx button{position:absolute; width:52px; height:52px; border-radius:999px;
  border:1.5px solid rgba(255,247,233,.28); background:rgba(27,26,46,.5); color:#FFF7E9;
  font-size:1.15rem; cursor:pointer; display:grid; place-items:center;
  transition:background .2s, border-color .2s, transform .2s cubic-bezier(.2,.7,.25,1)}
.lbx button:hover{background:#2F55DE; border-color:#2F55DE; transform:scale(1.06)}
.lbx-x{top:1.1rem; right:1.1rem}
.lbx-p{left:1.1rem; top:50%; margin-top:-26px}
.lbx-n{right:1.1rem; top:50%; margin-top:-26px}
@media screen and (max-width: 767px){
  .lbx-p, .lbx-n{top:auto; bottom:1rem; margin-top:0}
  .lbx-p{left:1rem}
  .lbx-n{right:1rem}
  .lbx-count{bottom:1.6rem}
  .lbx-fig img{max-height:66vh}
}

/* ---- CMS sections: the rules Webflow has no UI for ----
   Everything else about Seasons and Specials is a real Webflow class now.

   The first rule hides a collection list that has nothing to show. The
   :not() matters: the published page leaves the empty state out when there
   are items, but the Designer's Preview renders the empty state AND the
   items together - without it, Preview blanks the whole section. */
.w-dyn-list:has(> .w-dyn-empty):not(:has(.w-dyn-item)){display:none}

/* hide a field the season left empty, rather than leaving a hole */
.season-fig:has(.w-dyn-bind-empty){display:none}
.season-in:has(.season-fig .w-dyn-bind-empty) .season-copy{grid-column:1 / 13}
.season-by:has(.w-dyn-bind-empty){display:none}
.special-img.w-dyn-bind-empty{display:none}
.special-price.w-dyn-bind-empty{display:none}

/* paragraph spacing inside the rich-text field */
.season-body p{margin:0 0 .7rem}
.season-body p:last-child{margin-bottom:0}