:root{--cs-ink:#1d1d1b;--cs-pink:#efd7d2;--cs-cream:#f5efe5;--cs-red:#7a0505}
/* The theme sizes the branding column at 14rem and expects a logo that fills
   it (its own rule is `#block-sitebranding svg{width:100%;height:auto}`), so
   the wordmark image is given the same behaviour instead of a fixed height. */
#block-sitebranding{align-self:start;justify-self:start}
.chopsticks-logo{display:block;text-decoration:none;line-height:0}
.chopsticks-logo img{width:100%;height:auto;display:block}
/* No overflow clipping here: the theme already contains its own sliders
   (.loop-carousel / .field-slider), and clipping would cut off .svg-draw,
   which is deliberately positioned at top:-3rem above the content. */
.container{width:min(1280px,calc(100% - 48px));margin:auto}.notice{padding:.7rem 1rem;text-align:center;background:var(--cs-pink);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}.notice-inner{display:flex;gap:1rem;justify-content:center}.hero{display:grid;grid-template-columns:1fr 1.08fr;min-height:76vh}.hero-copy{padding:9vw 5vw;display:flex;flex-direction:column;justify-content:center}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}.hero h1,.page-hero h1{font-size:clamp(4rem,8vw,9rem);line-height:.78;margin:1.5rem 0}.hero h1 em{display:block;color:var(--cs-red)}.hero-copy p{max-width:36rem;font-size:1.15rem}.hero-media{position:relative}.hero-media>img{width:100%;height:100%;object-fit:cover}.stamp{position:absolute;right:2rem;bottom:2rem;width:10rem;height:10rem;border-radius:50%;background:var(--cs-pink);display:grid;place-items:center;text-align:center;padding:1.4rem;transform:rotate(6deg)}.stamp small{display:block;font-size:.6rem;text-transform:uppercase}.btn{display:inline-flex;margin-top:1rem;padding:.8rem 1.3rem;border:1px solid;border-radius:2rem;text-decoration:none;text-transform:uppercase;font-size:.72rem;letter-spacing:.1em}.btn.primary{background:var(--cs-red);color:white;border-color:var(--cs-red)}
.ticker{padding:1rem 0;overflow:hidden;background:var(--cs-pink)}.ticker-track{display:flex;width:max-content;animation:cs-ticker 28s linear infinite}.ticker-track span{font-size:1.6rem;white-space:nowrap;padding-right:2rem}@keyframes cs-ticker{to{transform:translateX(-50%)}}
.editorial{padding:8rem 0}.editorial-head{display:grid;grid-template-columns:14rem 1fr;gap:3rem;margin-bottom:4rem}.editorial h2,.story-copy h2,.visit-strip h2,.contact-grid h2,.reserve-layout h2{font-size:clamp(3rem,6vw,7rem);line-height:.88;margin:.5rem 0 2rem}.feature-split,.story-panel,.visit-strip,.reserve-layout,.contact-grid,.reserve-visual-inner{display:grid;grid-template-columns:1fr 1fr}.feature-image img{width:100%;height:100%;min-height:38rem;object-fit:cover}.feature-copy{padding:5rem;background:var(--cs-pink);display:flex;flex-direction:column;justify-content:space-between}.feature-copy h3{font-size:4.5rem;line-height:.9}.gallery-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.gallery-card{position:relative}.gallery-card img{width:100%;aspect-ratio:1;object-fit:cover}.gallery-label{position:absolute;left:1rem;bottom:1rem;background:white;padding:.65rem}.story-art,.story-copy,.visit-strip>div{padding:6rem}.story-art{background:var(--cs-pink)}.story-art img{width:100%}.visit-strip>div{border:1px solid var(--cs-pink)}
.page-hero{padding:9rem max(24px,8vw);background:var(--cs-pink)}.page-hero p{max-width:45rem}.category-nav{position:sticky;top:5rem;z-index:5;background:white;padding:1rem;overflow:auto}.category-nav .inner{display:flex;gap:.6rem;width:max-content}.chip{border:1px solid;border-radius:2rem;padding:.6rem 1rem;text-decoration:none}.menu-group{padding:5rem 0}.menu-group-head{display:flex;justify-content:space-between;align-items:end}.menu-group h2{font-size:4rem}.menu-pages{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.menu-page img{width:100%}
.reserve-info,.reserve-form-wrap,.contact-grid>div{padding:6rem}.reserve-info{background:var(--cs-pink)}/* ── Forms ─────────────────────────────────────────────────────────────
   A panel rather than bare underlines, using the theme's own cream/rust
   palette so it sits with the rest of the page.                        */
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.35rem 1.5rem;
  background:#fff;
  border:1px solid rgba(29,29,27,.09);
  border-radius:12px;
  padding:clamp(1.5rem,3vw,2.75rem);
  box-shadow:0 2px 34px rgba(29,29,27,.07);
}
.field{display:flex;flex-direction:column;min-width:0}
.field.full{grid-column:1/-1}
.field label{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(29,29,27,.62);
  margin-bottom:.5rem;
}
.field input,
.field select,
.field textarea{
  font:inherit;
  font-size:.95rem;
  color:var(--cs-ink);
  background:var(--cs-cream);
  border:1px solid rgba(29,29,27,.16);
  border-radius:8px;
  padding:.8rem 1rem;
  min-height:50px;
  width:100%;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field input::placeholder,
.field textarea::placeholder{color:rgba(29,29,27,.4)}
.field input:hover,
.field select:hover,
.field textarea:hover{border-color:rgba(29,29,27,.3)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:#fff;
  border-color:#7a0505;
  box-shadow:0 0 0 3px rgba(122,5,5,.16);
}
/* Native arrow disappears with appearance:none, so draw one. */
.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1d1b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
}
.field input[type="date"]{padding-right:.75rem}
/* Invalid fields flag themselves once the browser has validated them. */
.field input:not(:placeholder-shown):invalid{border-color:var(--cs-red)}
.form button[type="submit"]{
  /* Sits inside .field.full, which is a flex column, so align rather than
     justify-self here. */
  align-self:flex-start;
  min-height:52px;
  padding:0 2.4rem;
  border:2px solid #7a0505;
  border-radius:30px;
  background:#7a0505;
  color:#fff;
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.form button[type="submit"]:hover{background:#fff;color:#7a0505}
@media(max-width:700px){
  .form{grid-template-columns:1fr}
  .field.full{grid-column:1}
  .form button[type="submit"]{align-self:stretch}
}.reserve-rules{margin-top:3rem}.reserve-rule,.contact-row{padding:1rem 0;border-top:1px solid}.reserve-visual{padding:6rem}.reserve-visual img{width:100%;height:32rem;object-fit:cover}.reserve-visual .card{padding:4rem;background:var(--cs-pink)}.map{padding:4rem;background:var(--cs-pink);margin-top:2rem}.form-alert{padding:1rem;background:var(--cs-pink);margin-bottom:1rem}
.reveal{opacity:1;transform:none}.animate--slide-in{opacity:0;transform:translateY(25px);transition:.8s}.animate--slide-in.is-visible{opacity:1;transform:none}
@media(max-width:800px){.hero,.feature-split,.story-panel,.visit-strip,.reserve-layout,.contact-grid,.reserve-visual-inner{grid-template-columns:1fr}.editorial-head{grid-template-columns:1fr}.gallery-row,.menu-pages{grid-template-columns:1fr}.hero-media{min-height:65vh}.feature-copy,.story-art,.story-copy,.visit-strip>div,.reserve-info,.reserve-form-wrap,.contact-grid>div{padding:3rem 1.5rem}.form{grid-template-columns:1fr}.field.full{grid-column:auto}}

/* ============================================================
   Menu content components.
   These carry the food/drink data only — colours, type and
   spacing all reuse the existing theme tokens above.
   ============================================================ */
.cs-shell{width:min(1280px,calc(100% - 48px));margin-inline:auto}
.cs-pagehead{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;padding:7rem max(24px,6vw) 3rem}
.cs-pagehead .h1{font-size:clamp(4rem,9vw,9rem);line-height:.82;margin:.4rem 0}
.cs-pagehead .heading{text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}
.cs-pagehead .heading span{opacity:.6;margin-left:.4rem}

.cs-course{padding:4.5rem max(24px,6vw) 0;scroll-margin-top:6rem}
.cs-course__head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:2rem}
.cs-course__head .h2{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.9;margin:.3rem 0 0}
.cs-course__head .heading{text-transform:uppercase;letter-spacing:.15em;font-size:.7rem}
.cs-course__head .heading span{opacity:.6;margin-left:.4rem}
.cs-course__note{max-width:46ch;opacity:.78;margin:0}
.cs-course__figure{margin:0 0 2.5rem}
.cs-course__figure img{width:100%;max-height:420px;object-fit:cover;border-radius:4px}
.cs-group-title{font-size:1.35rem;margin:2.5rem 0 1rem;letter-spacing:.01em}

/* Numbered dish rows */
.cs-dishes{columns:2;column-gap:4rem}
@media(max-width:1100px){.cs-dishes{columns:1}}
.cs-dish{break-inside:avoid;display:grid;grid-template-columns:auto 1fr auto;gap:.15rem .8rem;align-items:baseline;padding:.85rem 0;border-bottom:1px dashed rgba(29,29,27,.22)}
.cs-dish__no{grid-row:1;font-variant-numeric:tabular-nums;font-size:.72rem;opacity:.5;letter-spacing:.06em}
.cs-dish__name{grid-row:1;margin:0;font-size:1.02rem;font-weight:600}
.cs-dish__price{grid-row:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-dish__en{grid-column:2/4;margin:.15rem 0 0;font-size:.9rem;opacity:.72}
.cs-dish__opts{grid-column:2/4;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.cs-opt{border:1px solid rgba(29,29,27,.25);border-radius:2rem;padding:.2rem .6rem;font-size:.75rem}
.cs-opt b{font-weight:600}
.cs-dish__tags{grid-column:2/4;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}
.cs-tag{border:1px solid var(--cs-red);color:var(--cs-red);border-radius:2rem;padding:.12rem .5rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em}

/* Drinks with a description */
.cs-drinks{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 4rem}
@media(max-width:900px){.cs-drinks{grid-template-columns:1fr}}
.cs-drink{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;padding:.8rem 0;border-bottom:1px dashed rgba(29,29,27,.22)}
.cs-drink__name{margin:0;font-size:1.02rem;font-weight:600}
.cs-drink__price{white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-drink__desc{grid-column:1/3;margin:.15rem 0 0;font-size:.88rem;opacity:.72}

/* Wine table */
.cs-winelist{width:100%;border-collapse:collapse;max-width:760px}
.cs-winelist th,.cs-winelist td{text-align:left;padding:.7rem 0;border-bottom:1px dashed rgba(29,29,27,.22);font-weight:400}
.cs-winelist thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;opacity:.6}
.cs-winelist tbody th{font-weight:600}
.cs-winelist td{width:5.5rem;font-variant-numeric:tabular-nums}

/* Name — price lists */
.cs-simple-list{list-style:none;margin:0;padding:0;columns:2;column-gap:4rem}
@media(max-width:900px){.cs-simple-list{columns:1}}
.cs-simple-list li{break-inside:avoid;display:flex;justify-content:space-between;gap:1.5rem;padding:.7rem 0;border-bottom:1px dashed rgba(29,29,27,.22)}
.cs-simple-list li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Chè tiles */
.cs-sweet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.cs-sweet-grid{grid-template-columns:1fr}}
.cs-sweet{border-top:2px solid var(--cs-red);padding-top:.8rem}
.cs-sweet h4{margin:0 0 .3rem;font-size:1.05rem}
.cs-sweet p{margin:0;font-size:.88rem;opacity:.72}

/* Beer taps */
.cs-taps{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.cs-tap-size{border:1px solid rgba(29,29,27,.25);border-radius:4px;padding:.8rem 1.2rem;text-align:center;min-width:7rem}
.cs-tap-size b{display:block;font-size:.95rem}
.cs-tap-size span{display:block;font-size:.75rem;opacity:.65}
.cs-tap-size em{display:block;font-style:normal;margin-top:.3rem;font-variant-numeric:tabular-nums}
.cs-tap-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cs-tap-list li{border:1px solid rgba(29,29,27,.25);border-radius:2rem;padding:.3rem .8rem;font-size:.8rem}

/* Search + filters */
.cs-menu-tools{position:sticky;top:0;z-index:6;background:var(--cs-cream);padding:1rem max(24px,6vw);border-bottom:1px solid rgba(29,29,27,.12)}
.cs-menu-tools__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:.5rem}
.cs-menu-search input{border:0;border-bottom:1px solid rgba(29,29,27,.35);background:transparent;padding:.55rem 0;min-width:18rem;font:inherit;color:inherit;outline:none}
.cs-menu-search input:focus{border-color:var(--cs-red)}
.cs-menu-tools .category-nav{position:static;padding:0;background:none;overflow:visible}
.cs-menu-tools .chip{cursor:pointer;background:transparent;color:inherit;font:inherit;font-size:.78rem}
.cs-menu-tools .chip.is-on{background:var(--cs-red);border-color:var(--cs-red);color:#fff}
.cs-no-results{display:none;padding:3rem max(24px,6vw);opacity:.7}
.cs-no-results.is-on{display:block}
.cs-course[hidden]{display:none}

/* Closing blocks */
.cs-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:5rem max(24px,6vw) 0}
@media(max-width:900px){.cs-rules{grid-template-columns:1fr}}
.cs-rule{border-top:2px solid var(--cs-red);padding-top:.9rem}
.cs-rule h4{margin:0 0 .35rem;font-size:1.05rem}
.cs-rule p{margin:0;font-size:.9rem;opacity:.75}
.cs-crosssell{text-align:center;padding:4rem max(24px,6vw)}
.cs-scene{position:relative;margin-top:4rem}
.cs-scene img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;display:block}
.cs-scene__cap{position:absolute;left:max(24px,6vw);bottom:1.2rem;background:var(--cs-cream);padding:.5rem .8rem;font-size:.78rem}
.cs-photo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:4rem max(24px,6vw) 0}
@media(max-width:900px){.cs-photo-row{grid-template-columns:1fr 1fr}}
.cs-photo-row figure{margin:0}
.cs-photo-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.cs-photo-row figcaption{margin-top:.5rem;font-size:.8rem;opacity:.72}
@media(max-width:800px){.cs-pagehead,.cs-course__head{grid-template-columns:1fr}.cs-pagehead{padding-top:5rem}}

/* Info pages: reserve, contact, home teasers */
.cs-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media(max-width:900px){.cs-info-grid{grid-template-columns:1fr;gap:3rem}}
.cs-panel{background:var(--cs-pink);padding:2.5rem;border-radius:4px}
.cs-panel .h2{margin:.2rem 0 1rem}
.cs-panel .heading{text-transform:uppercase;letter-spacing:.15em;font-size:.7rem}
.cs-hours{width:100%;border-collapse:collapse;margin-top:.5rem}
.cs-hours th,.cs-hours td{text-align:left;padding:.6rem 0;border-bottom:1px dashed rgba(29,29,27,.22);font-weight:400}
.cs-hours tr.is-today th,.cs-hours tr.is-today td{color:var(--cs-red);font-weight:600}
.cs-form-note{font-size:.82rem;opacity:.7;margin:.8rem 0 0;max-width:52ch}
.cs-map{width:100%;aspect-ratio:4/3;border:0;border-radius:4px;filter:sepia(.25)}
.cs-delivery{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.cs-delivery a{border:1px solid currentColor;border-radius:2rem;padding:.5rem 1rem;text-decoration:none;font-size:.8rem}
.cs-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:1.5rem}
@media(max-width:900px){.cs-quotes{grid-template-columns:1fr}}
/* Guest reviews on the about page reuse the theme's view-block wrapper. */
#block-customer-views-block-press{padding:0 max(24px,6vw) 5rem}
#block-customer-views-block-press .item-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:900px){#block-customer-views-block-press .item-list ul{grid-template-columns:1fr}}
.cs-quote{margin:0;border-top:2px solid var(--cs-red);padding-top:1rem;font-size:.95rem}
.cs-quote cite{display:block;margin-top:.8rem;font-style:normal;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6}
.cs-jobs-img{width:100%;border-radius:4px;margin-top:2rem;display:block}
.cs-teaser-word{font-size:clamp(4rem,15vw,12rem);line-height:.85;margin:0;text-align:center;color:var(--cs-pink);font-weight:700;letter-spacing:-.02em}
/* Photo-filled variant of the teaser word, as on Haven's coffee block: one
   photograph running behind the whole word, clipped to the letters. Sized like
   the home banner so the two read as the same device. The client's source
   photos are small, so `*-strip.jpg` are enlarged, softened and re-saturated
   copies — see the notes in docs/deployment.md. */
.cs-teaser-word.is-photo{
  font-size:clamp(64px,16vw,300px);
  line-height:1;
  padding:.06em 0;
  white-space:nowrap;
  overflow:hidden;
  background-repeat:no-repeat;
  background-size:cover;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.cs-teaser-word.is-drink{background-image:url('/assets/img/coffee-strip.jpg');background-position:center 58%}
/* The theme overlays its wordmark on the about image through
   `#block-about .field-image::after`. The client's drawing already carries the
   Chopsticks sign on the shopfront, so the overlay would print the name twice.
   Turn it off rather than restyle it. */
#block-about .field-image::after{content:none}

/* Home banner: the wordmark cut out of food photography. */
.chopsticks-banner-text{display:flex;width:100%;margin:0;padding:.35em 0;justify-content:center;white-space:nowrap;overflow:hidden;font-family:"din-2014","Arial Narrow",sans-serif;font-weight:700;font-size:clamp(64px,16vw,300px);line-height:1;letter-spacing:-.02em}
.chopsticks-banner-text span{background-repeat:no-repeat;background-position:center;background-size:cover;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.chopsticks-banner-text .cs-part1{background-image:url('/assets/img/vn-banhmi.jpg')}
.chopsticks-banner-text .cs-part2{background-image:url('/assets/img/vn-pho.jpg')}

/* Keep every home marquee item in the original 560x560 visual frame. Source
   photos may be portrait or landscape, so crop their edges instead of letting
   their intrinsic ratio change the carousel height.
   The `<li>`/`<ul>` the marquee JS scrolls have no definite width of their
   own (it sizes itself off the rendered content), so a percentage width or
   max-width on this img can't resolve and falls back to the photo's native
   pixel size instead of shrinking — use vw so it's always a real value. */
.content-type--home .loop-carousel .field-image img{
  display:block;
  width:560px;
  max-width:92vw;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
}
@media(max-width:600px){
  .content-type--home .loop-carousel .field-image img{
    width:62vw;
  }
}
.cs-printed-pages{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:900px){.cs-printed-pages{grid-template-columns:1fr}}
.cs-printed-pages figure{margin:0}
.cs-printed-pages img{width:100%;display:block;border:1px solid rgba(29,29,27,.12);border-radius:4px}
/* The theme's banner artwork is a wide, shallow crop (1365x505). Ours are
   square dish photos, so crop them to the same band instead of letting a
   760x760 image take over the screen. */
.paragraph.banner-full .layout__picture .field-image img{
  width:100%;
  height:clamp(200px,27vw,460px);
  object-fit:cover;
  display:block;
  border-radius:5px;
}
/* Dish thumbnails keep the theme's square crop. */
.content-type--menu .layout__picture .field-image img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
}

/* The footer nav is a flex row with no wrap and 1.5rem of padding per link.
   Haven shipped three links so it fit; ours has six and ran 661px wide inside
   a 500px viewport, which is what dragged the page sideways near the bottom. */
@media(max-width:1079px){
  #block-customer-menu-footer > ul{
    flex-wrap:wrap;
    justify-content:center;
    row-gap:.5rem;
  }
  #block-customer-menu-footer > ul > li > a{padding:0 .75rem}
}

/* The anchor bar is a horizontal row, but the theme only makes it scrollable
   at >=1480px. Below that the links simply run past the viewport and drag the
   whole page sideways (measured: 580px of content in a 500px viewport). Give
   it the same scroller the theme uses on wide screens. */
@media(max-width:1479px){
  .field-anchors--menu .field-anchors--header ul{
    display:flex;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .field-anchors--menu .field-anchors--header ul::-webkit-scrollbar{display:none}
  .field-anchors--menu .field-anchors--header ul li a{
    display:block;
    white-space:nowrap;
    padding:1rem 1.25rem;
    text-transform:uppercase;
    font-size:.75rem;
    letter-spacing:1px;
    text-decoration:none;
  }
  .field-anchors--menu .field-anchors--header ul li a.active{
    color:#7a0505;
    font-weight:600;
  }
}

/* Under 640px the theme bleeds the script line past its container with
   `[class*=banner-] .title-special{margin-inline:-1.5rem}`. That suits its own
   13vw type; at our smaller size it just makes the page 3rem wider than the
   viewport and scrolls it sideways. */
@media(max-width:639px){
  [class*="banner-"] .title-special{margin-left:0;margin-right:0}
}

/* Below 768px the theme pins the menu column to `max-width:545px` with auto
   margins. On a 390px phone the content reaches that width and the centring
   pushes it off both edges, so the page scrolls sideways. Cap it to the
   viewport and stop long names forcing the column wider. */
@media(max-width:767px){
  .field-anchors--menu{max-width:min(545px,100%)}
  .field-anchors--menu .field-anchors--content,
  .field-anchors--menu .layout__section,
  .field-anchors--menu .layout__sidebar,
  .field-anchors--menu .section{min-width:0;max-width:100%}
  .field-anchors--menu .item-list > ul > *{min-width:0}
  .field-anchors--menu .section > h2{white-space:normal}
  .content-type--menu .layout__content h3.h3{overflow-wrap:anywhere}
}

/* Sub-group headings inside a menu section ("Classics", "House specials",
   "Red wine"…). The theme has no rule for them: .section>h2 carries
   margin-bottom:-0.75rem to tuck the following .item-list under its oversized
   title, which instead dragged these headings into it. Give them their own
   rhythm and align them with the section title. */
.section .views-element-container > div > h3.h3{
  margin:3.75rem 0 0;
  padding:0 1.5rem .7rem;
  font-size:1.35rem;
  border-bottom:1px solid rgba(29,29,27,.14);
}
.section .views-element-container > div > h3.h3:first-child{
  margin-top:2.75rem;
}

/* The theme sticks the menu sidebar at top:0, which tucks it under the fixed
   header (.header-placeholder reserves 120px). Stop it below the header
   instead so the panel never sits against the logo. */
.field-anchors--menu .field-anchors--content > .layout__sidebar{
  top:8.5rem;
  padding-top:1rem;
  /* The rail is longer than the viewport, so it scrolls on its own rather
     than having its tail cut off while stuck. */
  max-height:calc(100vh - 10rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--cs-pink) transparent;
}
.field-anchors--menu .field-anchors--content > .layout__sidebar::-webkit-scrollbar{width:8px}
.field-anchors--menu .field-anchors--content > .layout__sidebar::-webkit-scrollbar-track{background:transparent}
.field-anchors--menu .field-anchors--content > .layout__sidebar::-webkit-scrollbar-thumb{
  background:var(--cs-pink);
  border-radius:4px;
}
@media(max-width:959px){
  .field-anchors--menu .field-anchors--content > .layout__sidebar{
    position:static;
    padding-top:0;
    max-height:none;
    overflow:visible;
  }
}

/* The drawn script lines are sized in vw (up to 20vw), which suits the short
   phrases the theme ships ("Brunch time", "All day"). Our menu-page taglines
   are full sentences, so they need a smaller size to stay on screen. */
#block-customer-views-block-press > .title-special{font-size:5.5vw}

/* /food and /drink are back on the theme's own treatment: 20vw, and the
   `margin-bottom:-12%` that pulls the heading and the intro up over the
   script line (which sits at z-index:-1, so it reads as a wash behind them).
   That only works because those two lines are now a single short word — the
   pages below still carry sentences and keep the smaller, un-overlapped size. */

/* The theme pulls the next row up over the script line (margin-bottom:-12%),
   an overlap tuned for its 20vw size. At the smaller size used on these pages
   that lands the heading on top of the words, so the pull is removed and the
   block sits below the line instead. */


/* The script line is a flex-wrap row with one <svg> per word, so a per-svg
   max-width caps every word at the full container width and stacks them one
   per line. Constrain the row only; word size is handled by font-size above. */
.title-special{max-width:100%}

/* The theme styles the action menu for TWO items: :first-child is the filled
   pill, :last-child a white one — and the white rule comes second. With a
   single "Reserve" link that one element is both, so the white rule wins and
   the pill loses its fill. Restore the filled treatment for the lone item.

   Every one of the theme's action-menu rules also sits inside
   @media(min-width:480px), so below that the pill had no styling at all —
   hence the full declaration here rather than just the colours. */
#block-customer-actionmenu{position:relative;z-index:500000}
#block-customer-actionmenu ul{text-align:right}
#block-customer-actionmenu ul li:only-child a{
  display:inline-block;
  padding:.75rem 1.5rem;
  border:2px solid #7a0505;
  border-radius:30px 0 0 30px;
  background-color:#7a0505;
  color:#fff;
  font-size:.8rem;
  font-weight:400;
  line-height:1rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .5s ease, color .5s ease;
}
#block-customer-actionmenu ul li:only-child a:hover{
  background-color:#fff;
  color:#7a0505;
}

/* `.layout__content` is a wrapping `space-between` row. Let the name and the
   price share the first row — space-between pushes the price to the right, as
   on the template's coffee card — and give the line under it the whole row
   below. */
.content-type--teaser.content-type--menu .layout__content > h3{flex:1 1 auto;margin:0;padding-right:1rem}
.content-type--teaser.content-type--menu .layout__content > .field-price{flex:0 0 auto;margin:0}
.content-type--teaser.content-type--menu .layout__content > .field-description{flex:0 0 100%;margin-top:.55rem}

/* Footer wordmark: the theme has no rule for it, so it would render at its
   natural pixel size. Cap it to roughly the header logo's width. */
.footer-logo-link{display:inline-block}
.footer-mark{width:auto;max-width:180px;height:auto;display:block;margin-bottom:1.25rem}

/* Between 480px and 640px the theme's header grid is `14rem 1fr auto`. With the
   root at 18px that is 252px of logo, and the Reserve pill's `auto` track adds
   130px more than the row can hold — the header (and with it the page) ran
   11px past the viewport. Give the wordmark a narrower track down there. */
@media(min-width:480px) and (max-width:639px){
  .region-header > .region{grid-template-columns:10rem 1fr auto}
  /* Only the logo gets side padding from the theme, so the pill would sit
     flush against the right edge of the screen. */
  .region-header > .region > #block-customer-actionmenu{margin-right:1rem}
}

/* The bottombar's `.region` also matches `.region-footer .region`, so the
   three-column footer rules land on it: a top border and a 2px border-right on
   #block-legals, which is the stray vertical line through the dark bar. The
   theme's own bottombar has neither. */
.region-bottombar .region{border-top:0;padding-top:0}
.region-bottombar .region > *:not(:last-child),
.region-bottombar .region > *{border-right:0;border-bottom:0;padding:0}
.region-bottombar #block-customer-menu-footer > ul > li > a{white-space:nowrap}
.region-bottombar #block-legals p,
.region-bottombar #block-credit p{font-size:.7rem;letter-spacing:.3px;opacity:.85;margin:0}
.region-bottombar #block-legals a,
.region-bottombar #block-credit a{color:inherit;text-decoration:underline}
.region-bottombar #block-legals a:hover,
.region-bottombar #block-credit a:hover{color:#d79a97}

/* Keep the copyright and the credit each on one line; the bottombar is a
   space-between flex row and was squeezing them into two. */
@media(min-width:900px){
  .region-bottombar #block-legals,
  .region-bottombar #block-credit{flex:0 0 auto}
  .region-bottombar #block-legals p,
  .region-bottombar #block-credit p{white-space:nowrap}
  /* The bar is laid out by the footer's three-column grid, so the credit's
     column already reaches the right edge — only its text needs pushing. */
  .region-bottombar #block-credit{text-align:right}
}
.form-alert{padding:1rem 1.2rem;border-radius:4px;margin-bottom:1.5rem;font-size:.9rem}
.form-alert.success{background:var(--cs-pink);border-left:3px solid var(--cs-red)}
.form-alert.error{background:#fdeceb;border-left:3px solid var(--cs-red)}
.field small{color:var(--cs-red);font-size:.75rem;margin-top:.3rem}

/* ============================================================
   Brand colour — the template's rust orange becomes the red from
   the Chopsticks logo, and its pale peach becomes a pale red of
   the same lightness.

   The mirrored theme CSS is never edited, so every rule of the
   theme's that painted in #c1643b / #efdacc is repeated here with
   the new colour. Only the colour declarations are copied — the
   layout stays with the theme. Regenerate with scratchpad/sweep.py
   if the theme CSS is ever re-mirrored.
   ============================================================ */
#block-tabs>ul li a{color:#7a0505}
#block-tabs>ul li a.is-active{background-color:#7a0505}
form [id*=edit-cv-remove-button--]{background-color:#efd7d2}
form details summary{background-color:#7a0505}
form details>div{border-bottom:1px solid #7a0505}
form input:focus,form button:focus,form textarea:focus{outline:1px auto #7a0505}
.field-body .title-special{color:#efd7d2}
.field-body a:not(.link):hover{color:#7a0505}
@media(max-width:767px){.field-contextual>*:not(:last-child)::after{background-color:#7a0505}}
@media(min-width:768px){.field-contextual>*:not(:last-child){border-right:2px solid #7a0505}}
.field-extra.brunch{background-color:#7a0505}
.field-infos p{color:#7a0505}
.button-primary,.field-link:not(.second) a{border:2px solid #7a0505;background-color:#7a0505}
.button-primary:hover,.field-link:not(.second) a:hover{color:#7a0505}
.button-secondary,input[type=submit],.field-link+.field-link a,.field-link.second a{color:#7a0505;border:2px solid #7a0505}
.button-secondary:hover,input[type=submit]:hover,.field-link+.field-link a:hover,.field-link.second a:hover{background-color:#efd7d2;border:2px solid #efd7d2;color:#7a0505}
.field-anchors--menu .field-anchors--header ul li a.active{background-color:#efd7d2;color:#7a0505}
@media(max-width:1279px){.field-anchors--menu .field-anchors--content:has(.layout__sidebar)>.layout__section>.section .item-list:not(.footer)>ul>li:not(:first-child){border-top:solid 2px #efd7d2}}
@media(max-width:767px){.field-anchors--menu .field-anchors--content .layout__section .item-list.footer{border-top:solid 2px #efd7d2}}
.field-anchors--menu .field-anchors--content .section>h2{color:#efd7d2}
.banner-full .title-special{color:#efd7d2}
.banner-simple .title-special{color:#7a0505}
.paragraph-teaser .title-special{color:#efd7d2}
.path-frontpage .paragraph-teaser .title-special{color:#7a0505}
#block-mainnavigation>ul>li>a.is-active{color:#7a0505}
#block-customer-actionmenu ul li:first-child a{border:2px solid #7a0505;background-color:#7a0505}
#block-customer-actionmenu ul li:first-child a:hover{color:#7a0505}
#block-customer-actionmenu ul li:last-child a{color:#7a0505}
#block-customer-actionmenu ul li:last-child a:hover{border-color:#efd7d2;background-color:#efd7d2;color:#7a0505}
.icon-menu>.label:hover{color:#7a0505}
@media(max-width:959px){.region-nav-mobile>.region>*:not(:last-child){border-bottom:2px solid #7a0505}}
@media(max-width:959px){#toggle-menu:checked+.icon-menu .label{color:#7a0505}}
#block-mainnavigation-mobile>ul>li>a.is-active{color:#7a0505}
#block-about .layout__content{background-color:#7a0505}
#block-customer-views-block-award .title-special{-webkit-text-stroke:2px #efd7d2;color:#efd7d2}
#block-formula{background-color:#7a0505}
#block-languageswitcher-mobile ul.links li:not(:last-child) a::after{color:#7a0505}
[id*=block-socialmedia] a svg{fill:#7a0505}
.paragraph.banner-full>.layout>.layout__contextual{border-top:2px solid #7a0505;border-bottom:2px solid #7a0505}
.paragraph-1-column+.paragraph-1-column::before{background-color:#7a0505}
.paragraph-section.background::before{background-color:#7a0505}
@media(max-width:959px){.page-node-type-home .paragraph-section.background .paragraph-2-columns>*:not(:last-child)::after,.page-node-type-basic .paragraph-section.background .paragraph-2-columns>*:not(:last-child)::after{background-color:#efd7d2}}
@media(min-width:960px){.page-node-type-home .paragraph-section.background .paragraph-2-columns>*:not(:last-child),.page-node-type-basic .paragraph-section.background .paragraph-2-columns>*:not(:last-child){border-right:2px solid #efd7d2}}
.content-type--teaser.content-type--award .layout__footer::before{background-color:#7a0505}
.content-type--full.content-type--home .layout__banner .svg-draw .svg-path{stroke:#efd7d2}
.content-type--full.content-type--menu .layout__footer .paragraph.paragraph-contextual .field-contextual{border:2px solid #7a0505}
.region-footer .title-special{color:#efd7d2}
.region-footer .region{border-top:2px solid #7a0505}
@media(max-width:959px){.region-footer .region>*:not(:last-child){border-bottom:2px solid #7a0505}}
@media(min-width:640px)and (max-width:959px){.region-footer .region>*:not(:last-child){border-bottom:2px solid #7a0505}}
@media(min-width:960px)and (max-width:1359px){.region-footer .region>*:not(:last-child){border-right:2px solid #7a0505}}
@media(min-width:1360px){.region-footer .region>*:not(:last-child){border-right:2px solid #7a0505}}
.path-user #block-mainpagecontent .user-form::before,.path-user #block-mainpagecontent .user-login-form::before,.path-user #block-mainpagecontent .user-pass::before{background-color:#7a0505}

/* ============================================================
   Contact form — the template keeps its fields on the tinted
   block rather than inside a card, so ours does too.
   ============================================================ */
.page-contact .form{background:none;border:0;box-shadow:none;padding:0;gap:1.4rem 1.5rem}
.page-contact .field label{
  font-size:.95rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:#fff;
  margin-bottom:.55rem;
}
.page-contact .field input,
.page-contact .field select,
.page-contact .field textarea{background:#fdf6f2;border-color:transparent;border-radius:10px;min-height:54px}
.page-contact .field textarea{background:#fff}
.page-contact .field input:hover,
.page-contact .field select:hover,
.page-contact .field textarea:hover{border-color:transparent}
.page-contact .field input:focus,
.page-contact .field select:focus,
.page-contact .field textarea:focus{border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.page-contact .field small{color:#ffe2e0}
.page-contact .form button[type="submit"]{border-color:#fff;background:#fff;color:#7a0505}
.page-contact .form button[type="submit"]:hover{background:transparent;color:#fff}

/* Dial code and number are one control, not two boxes. The frame — border,
   radius, background, focus ring — lives on the wrapper; both children are
   transparent and borderless inside it, so there is no seam between them. The
   code is fixed at +61: the restaurant only takes Australian numbers. */
.cs-phone{
  display:flex;
  min-width:0;
  background:var(--cs-cream);
  border:1px solid rgba(29,29,27,.16);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cs-phone:hover{border-color:rgba(29,29,27,.3)}
.cs-phone:focus-within{background:#fff;border-color:#7a0505;box-shadow:0 0 0 3px rgba(122,5,5,.16)}
.cs-phone__code{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0 .9rem 0 1rem;
  color:#7a0505;
  font-weight:600;
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
  border-right:1px solid rgba(29,29,27,.14);
}
.cs-phone__flag{
  width:22px;
  height:15px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(29,29,27,.18);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%2300247d' d='M0 0h60v30H0z'/%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h30v15H0z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath stroke='%23fff' stroke-width='3' d='m0 0 30 15M30 0 0 15'/%3E%3Cpath stroke='%23cf142b' stroke-width='2' d='m0 0 30 15M30 0 0 15'/%3E%3Cpath stroke='%23fff' stroke-width='5' d='M15 0v15M0 7.5h30'/%3E%3Cpath stroke='%23cf142b' stroke-width='3' d='M15 0v15M0 7.5h30'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='15' cy='22.5' r='3.2'/%3E%3Ccircle cx='45' cy='6' r='1.7'/%3E%3Ccircle cx='52.5' cy='13.5' r='1.7'/%3E%3Ccircle cx='45' cy='22' r='1.7'/%3E%3Ccircle cx='37.5' cy='13' r='1.7'/%3E%3Ccircle cx='46.5' cy='15' r='1'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
/* The input keeps its padding and min-height from `.field input`, but gives up
   every decoration to the wrapper. */
.cs-phone input,
.cs-phone input:hover,
.cs-phone input:focus{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  outline:none;
}
.page-contact .cs-phone{background:#fdf6f2;border-color:transparent}
.page-contact .cs-phone:focus-within{background:#fff;border-color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.cs-phone select{
  flex:0 0 auto;
  width:auto;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  border-right:1px solid rgba(29,29,27,.12);
  padding-right:2.2rem;
  padding-left:.9rem;
  font-variant-numeric:tabular-nums;
}
.cs-phone input{flex:1 1 auto;min-width:0;border-top-left-radius:0;border-bottom-left-radius:0}

/* ============================================================
   Reservation widget (/reserve) — date, party size, time, then
   details, laid out as the template's booking module is.
   ============================================================ */
.cs-booking{
  max-width:600px;
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(29,29,27,.1);
  border-radius:14px;
  padding:clamp(1.5rem,4vw,3rem);
  box-shadow:0 2px 40px rgba(29,29,27,.08);
  text-align:center;
}
.cs-booking__logo{width:150px;height:auto;display:block;margin:0 auto 1.5rem}
.cs-booking__intro{
  margin:0 auto;
  max-width:34rem;
  font-size:.92rem;
  line-height:1.6;
  color:rgba(29,29,27,.72);
  padding-top:1.5rem;
  border-top:1px solid rgba(29,29,27,.1);
}
.cs-booking__title{margin:1.75rem 0 1.25rem;font-size:1.25rem}
.cs-step__title{margin:0 0 1.25rem;font-size:1.05rem}

/* Step pills. */
.cs-steps{display:flex;align-items:center;justify-content:center;gap:0;list-style:none;margin:0 0 1.5rem;padding:0}
.cs-steps li{display:flex;align-items:center}
.cs-steps li:not(:first-child)::before{content:"";width:34px;height:2px;background:rgba(29,29,27,.14)}
.cs-steps li span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(29,29,27,.08);
  color:rgba(29,29,27,.5);
  font-size:.85rem;
  font-weight:700;
}
.cs-steps li.is-current span{background:#7a0505;color:#fff}
.cs-steps li.is-done span{background:#7a0505;color:#fff}
.cs-steps li.is-done + li::before{background:#7a0505}

/* The three choices, shown back as chips you can click to revisit. */
.cs-summary{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.75rem}
.cs-summary button{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid rgba(29,29,27,.14);
  background:rgba(29,29,27,.04);
  border-radius:30px;
  padding:.55rem 1.1rem;
  font:inherit;
  font-size:.85rem;
  color:rgba(29,29,27,.55);
  cursor:pointer;
}
.cs-summary button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cs-summary button.is-set{background:#fff;border-color:#7a0505;color:#7a0505}

/* Calendar. */
.cs-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.cs-cal__head strong{font-size:1rem}
.cs-cal__head button{
  width:34px;height:34px;
  border:1px solid rgba(29,29,27,.14);
  border-radius:50%;
  background:#fff;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}
.cs-cal__head button:disabled{opacity:.3;cursor:default}
.cs-cal__dow,
.cs-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.cs-cal__dow{margin-bottom:.35rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(29,29,27,.45)}
.cs-cal__grid button{
  aspect-ratio:1;
  border:1px solid rgba(29,29,27,.1);
  border-radius:8px;
  background:#fff;
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cs-cal__grid button:hover:not(:disabled){border-color:#7a0505;color:#7a0505}
.cs-cal__grid button:disabled{border-color:transparent;color:rgba(29,29,27,.22);cursor:default}
.cs-cal__grid button.is-chosen{background:#7a0505;border-color:#7a0505;color:#fff}

/* Party size and time grids. */
.cs-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem}
.cs-choices button{
  border:1px solid rgba(29,29,27,.12);
  border-radius:8px;
  background:#fff;
  padding:.75rem .5rem;
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cs-choices button:hover{border-color:#7a0505;color:#7a0505}
.cs-choices button.is-chosen{background:#7a0505;border-color:#7a0505;color:#fff}
.cs-choices__group{margin:1.25rem 0 .6rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(29,29,27,.5)}
.cs-choices__group:first-child{margin-top:0}

/* Details step. */
.cs-details{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem;text-align:left;margin-top:1.5rem}
.cs-details .field.full{grid-column:1/-1}
.cs-details textarea{min-height:110px}
.cs-optional{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
.cs-consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.85rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;color:rgba(29,29,27,.72);cursor:pointer;margin-bottom:0}
.cs-consent input{width:18px;height:18px;min-height:0;flex:0 0 auto;margin-top:.15rem;accent-color:#7a0505}
.cs-details button[type="submit"]{
  align-self:stretch;
  min-height:54px;
  border:2px solid #7a0505;
  border-radius:30px;
  background:#7a0505;
  color:#fff;
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.cs-details button[type="submit"]:hover{background:#fff;color:#7a0505}

/* Without the script the three native fields are the form. */
.cs-native{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem;text-align:left}
/* A `display` on the element beats the UA sheet's [hidden]{display:none}. */
.cs-booking [hidden]{display:none !important}
.cs-native .field:first-child{grid-column:1/-1}

@media(max-width:600px){
  .cs-details,
  .cs-native{grid-template-columns:1fr}
  .cs-summary button{padding:.5rem .8rem;font-size:.8rem}
}

/* The colour sweep above repeats the theme's action-menu rules, including
   `li:last-child a{color:…}`. Our single "Reserve" item is both :first-child
   and :last-child, so that rule matched at equal specificity and — being later
   in the file — painted the label the same red as its own fill. Re-assert the
   lone pill last. Same trap as the note at `li:only-child` above. */
#block-customer-actionmenu ul li:only-child a{background-color:#7a0505;color:#fff}
#block-customer-actionmenu ul li:only-child a:hover{background-color:#fff;color:#7a0505}

/* ============================================================
   August 2026, second round of feedback (slides 41-56).
   ============================================================ */

/* /reserve's script line goes back to the theme's own size, which is what the
   template uses for the same slot. */

/* The photo-filled teaser word spans the full width on the template. Six caps
   land at roughly 3.2x the font size, so 30vw fills the row. */

/* The bottombar sits inside .region-footer and so inherits its side padding,
   leaving cream margins either side of the dark strip. The template runs it
   edge to edge; cancel the padding at each of the theme's three breakpoints. */
@media(max-width:1279px){
  .region-bottombar{margin-left:-1.5rem;margin-right:-1.5rem}
}
@media(min-width:1280px)and (max-width:1479px){
  .region-bottombar{margin-left:-3rem;margin-right:-3rem}
}
@media(min-width:1480px){
  .region-bottombar{margin-left:-6rem;margin-right:-6rem}
}
.region-bottombar .region{padding-left:1.5rem;padding-right:1.5rem}
@media(min-width:1280px){
  .region-bottombar .region{padding-left:3rem;padding-right:3rem}
}

/* The footer's column rules are drawn as borders on the grid children, and the
   bottom of the last row leaves two stubs hanging into the dark strip. The
   template has none there. */
.region-footer .region > *{border-bottom:0}

/* /reserve: the booking module sits on a field of brand colour, as the
   template's does. The band is its own wrapper — painting `.layout__content`
   covered the banner headline too, and a `calc(50% - 50vw)` bleed measures
   100vw including the scrollbar and pushed the page 15px sideways. */
/* The theme parks the banner and the content in the same grid row —
   `grid-template-rows:87vh auto 1fr` with the banner at `1/3` and the content
   at `2/4` — which is how the template floats its card over the artwork. The
   client wants the card below the drawing instead, and the overlap is not a
   fixed amount: it grows with the picture, measuring 409px at 1904 wide, 121px
   at 1424 and nothing under 1100. So give each its own row and the content
   always starts after the artwork, at every width. */
.page-reserve .content-type--basic > .layout{grid-template-rows:auto auto 1fr}
.page-reserve .content-type--basic > .layout > .layout__banner{grid-row:1/2;min-height:70vh}
.page-reserve .content-type--basic > .layout > .layout__content{grid-row:2/4}

/* The strip of colour hangs off the bottom of the banner, so it lines up with
   the foot of the drawing whatever height the drawing takes. The artwork is
   banner content and paints over it, as on the template. */
.page-reserve .layout__banner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:14rem;
  background:#7a0505;
  z-index:-1;
  /* Full bleed without a viewport-width margin: a box-shadow paints past the
     container's padding and never adds scrollable overflow, so the page does
     not shift by the width of the scrollbar. */
  box-shadow:0 0 0 100vmax #7a0505;
  clip-path:inset(0 -100vmax);
}

.cs-booking-band{padding:3.5rem 1.5rem}
.cs-booking-band .field-external-module{margin-top:0}

/* On phones keep the original text-over-artwork composition, but lower the
   red accent so it no longer begins behind the description. */
@media(max-width:600px){
  .page-reserve .layout__banner::after{height:3rem}
}

/* The colour sweep repeats `.region-footer .region>*:not(:last-child)` inside
   two media queries, and those land after the bottombar reset further up — so
   the column rules came back as two red stubs inside the dark strip. Kill them
   here, last, the same way the lone Reserve pill has to be re-asserted. */
.region-bottombar .region,
.region-bottombar .region > *,
.region-bottombar .region > *:not(:last-child){border:0}

/* ============================================================
   August 2026, third round of feedback (slides 57-83).
   ============================================================ */

/* Booking-form labels follow the template: sentence case, normal weight —
   not the small-caps the rest of our forms use. */
.cs-booking .field label{
  font-size:.9rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:rgba(29,29,27,.8);
}
.cs-booking .cs-optional{font-size:.9rem}

/* /contact's script line runs at the theme's own size, as /reserve's does. */
.page-about .banner-simple .title-special,
#block-customer-views-block-press > .title-special{font-size:5.5vw}
.page-about .banner-simple .title-special{margin-bottom:.5rem;margin-top:1rem}

/* The banner drawing is `height:100%` of its row and bled down over the tinted
   block, sitting on top of "Send an enquiry". Keep it inside the banner. */
.page-contact .paragraph.banner-simple > .layout > .layout__picture{overflow:hidden}
.page-contact .paragraph-section.background{margin-top:2rem}

/* The header logo is wider than it is tall, and at the theme's full column
   width it hung below the header strip — over the red band on /reserve it
   disappeared into the background. Cap its height so it stays inside. */
.chopsticks-logo img{display:block;width:auto;max-width:100%;height:72px;object-fit:contain}
.region-header.is-fixed .chopsticks-logo img{height:40px}
@media(max-width:639px){
  .chopsticks-logo img{height:54px}
}

/* ============================================================
   28/08 — vòng góp ý thứ tư.
   ============================================================ */

/* 1 + 4. The photo-filled teaser word runs the full width of its block.

   Sized in `cqw`, not `vw`: the block is inset from the window by padding that
   changes with the breakpoint, so a viewport-relative size overflowed on wide
   screens and left a gap on narrow ones. Measured with din-2014 actually
   loaded, DRINK is 3.07x its font size and FOOD 2.81x, so 96%/ratio fills the
   row with a hair to spare. */
.paragraph-teaser{container-type:inline-size}
/* Letter counts differ, so each word gets the size that fills the row: DRINK
   measures about 2.65x its font size, FOOD about 2.24x. */
.cs-teaser-word.is-drink{font-size:31.3cqw}
.cs-teaser-word.is-food{font-size:34.2cqw;background-image:url('/assets/img/food-strip.jpg');background-position:center 62%}

/* 2. Kitchen hours reads better centred in its column. */
.region-footer .cs-hours-col{text-align:center}
/* Keep the bottom navigation on the same centre line as Kitchen hours. */
.region-bottombar #block-customer-menu-footer > ul{justify-content:center}

/* 5. The dial code sat in body ink on a cream chip and was hard to pick out;
   the logo red separates it from the number beside it. */
.cs-phone__code{color:#7a0505;font-weight:600}

/* 8. A long dish name pushed the price block onto its own line, where
   `space-between` left it hanging at the left margin. Pin it right whether it
   shares the row with the name or wraps below it. */
.content-type--teaser.content-type--menu .layout__content > .field-price{margin-left:auto}

/* 6. The banner, and with it the line art, paints over the band below. */
.page-reserve .layout__banner{position:relative;z-index:1}

/* The home "Food & Drink at Chopsticks" panel closes with a solid colour
   fill, then the theme's 3rem margin leaves a bare cream gap before the
   marquee below it — on a phone that reads as empty space. Tighten it. */
@media(max-width:600px){
  .path-frontpage .paragraph-section.background{margin-bottom:1.5rem}
}