/* ==========================================================================
   Harrington's of Vermont - design prototype stylesheet
   Vanilla CSS. No Bootstrap, no framework, no CDN.
   Layout uses Grid and Flexbox. Values are literal on purpose.
   ========================================================================== */

/* ==========================================================================
   1. Fonts

   The @font-face declarations live in assets/css/fonts.css, which must be
   linked before this file.
   ========================================================================== */

/* ==========================================================================
   2. Icons
   ========================================================================== */

.ico {
  font-family: 'hh-icons';
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

.ico-bars::before          { content: '\f0c9'; }
.ico-search::before        { content: '\f002'; }
.ico-cart::before          { content: '\f07a'; }
.ico-phone::before         { content: '\f095'; }
.ico-envelope::before      { content: '\f003'; }
.ico-star::before          { content: '\f005'; }
.ico-gift::before          { content: '\f06b'; }
.ico-newspaper::before     { content: '\f1ea'; }
.ico-info::before          { content: '\f129'; }
.ico-columns::before       { content: '\f0db'; }
.ico-lock::before          { content: '\f023'; }
.ico-handshake::before     { content: '\f2b5'; }
.ico-angle-right::before   { content: '\f105'; }
.ico-chevron-down::before  { content: '\f078'; }
.ico-caret-down::before    { content: '\f0d7'; }
.ico-times::before         { content: '\f00d'; }
.ico-print::before         { content: '\f02f'; }

.ico-lg {
  font-size: 1.33333em;
  vertical-align: -15%;
}

.ico-2x {
  font-size: 2em;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  font-family: 'Helvetica Neue', 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;

  /* Was a tiled bknd4.gif. The file was 17x8128, but the 17px width carried no
     detail (1/255 of variation across it) and everything below y=150 was one
     flat colour - the 8128px height existed only so the tile never repeated
     down a long page. So the whole file was a 150px vertical ramp, which is
     a gradient, not an image. Stops read off the file's own pixels; the
     rendered result is within 3/255 of it at every row. */
  background-color: #f1ddba;
  background-image: linear-gradient(to bottom,
      #dbb167 0,
      #e4c084 30px,
      #ebd0a1 60px,
      #efdbb7 80px,
      #f6e6cc 90px,
      #f6e6cc 108px,
      #f4e2c4 128px,
      #f1ddba 150px);
  background-repeat: no-repeat;
}

img {
  border: 0;
  max-width: 100%;
}

/* A select sizes its own content box from the option text, and browsers pad
   that more generously than they pad an input. Every field rule on this site
   already asks for min-height 32px, but a minimum cannot bring a select back
   DOWN - so the dropdowns rendered a few pixels taller than the inputs beside
   them. An explicit height fixes all of them in one place: the address form,
   the cart's recipient and quantity pickers, the gift finder and the buy box.

   :not([multiple]):not([size]) so a list box - anything asking to show several
   rows at once - keeps the height it was given. */
select:not([multiple]):not([size]) {
  height: 32px;
}

/* Invalid fields, site-wide.

   Every required field on a form is :invalid the moment the page loads, before
   anyone has typed anything, and some browsers draw their own red glow around
   it for that state. On the address form that meant a red box around all
   thirteen fields on arrival. The box-shadow rule turns that off everywhere.

   What replaces it is the value inside the field going red, matching the
   message printed underneath, and only once the field has actually been left
   in a bad state:

     :user-invalid  the browser's own check, but only after the field has been
                    edited and blurred, or the form submitted - not on load.
     aria-invalid   the server's check, set on redisplay after a failed post.

   Nothing here touches the border, so a field that fails keeps the same shape
   as the ones beside it. */
input:invalid,
select:invalid,
textarea:invalid {
  box-shadow: none;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid,
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  color: #c9302c;
}

a {
  color: #910d10;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
}

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

/* ==========================================================================
   4. Layout primitives (replacing the Bootstrap container and grid)
   ========================================================================== */

.page-width {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .page-width {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .page-width {
    width: 970px;
  }
}

/* Opt-in wider container. Add it alongside .page-width on the elements that
   should run wide; anything left on plain .page-width is unaffected, which is
   how the nav bar stays at 970px while the header and the interior content
   panels widen.

   width: 100% with a max-width cap, not a fixed width at a high breakpoint.
   A fixed width above a high breakpoint meant a 1233px window - an ordinary
   maximised laptop - fell back to 970 and looked like nothing had changed.
   This fills whatever is there from 992px up and stops growing at 1100.

   The width: 100% is the load-bearing half. .page-width declares an explicit
   width, and max-width can only cap a width, never widen one - a max-width
   alone here would compute to 970px however specific the selector. */
@media (min-width: 992px) {
  .page-width-wide {
    width: 100%;
    max-width: 1100px;
  }
}

/* Show/hide by breakpoint. The desktop header and nav appear at 992px, which
   is where the original switched from the slide-out menu to the nav bar. */
.on-desktop {
  display: none;
}

@media (min-width: 992px) {
  .on-mobile {
    display: none;
  }

  .on-desktop {
    display: block;
  }
}

/* ==========================================================================
   5. Brand block (logo plus tagline)
   ========================================================================== */

.site-brand {
  display: block;
}

.site-brand img {
  display: block;
  width: auto;
}

.site-brand .tagline {
  display: block;
  font-style: italic;
  font-weight: 400;
}

.site-brand-desktop {
  position: relative;
  left: -10px;
  margin: 5px 0;
}

.site-brand-desktop img {
  height: 70px;
}

.site-brand-desktop .tagline {
  font-size: 14px;
}

@media (min-width: 1200px) {
  .site-brand-desktop img {
    height: 80px;
  }
}

 /* padding rather than a relative offset - a relative shift moves the block
    10px right and pushes the document 10px wider than the viewport. */
.site-brand-mobile {
  padding-left: 10px;
  margin: 12px 0;
}

.site-brand-mobile img {
  height: 60px;
}

.site-brand-mobile .tagline {
  font-size: 12px;
}

/* ==========================================================================
   6. Desktop header
   ========================================================================== */

.site-header {
  padding: 10px 0;
  position: relative;
}

.site-header-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 30px;
  align-items: start;
}

.header-utility {
  margin-left: 20px;
  margin-top: 5px;
}

.header-utility ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-utility li {
  display: flex;
  align-items: center;
  min-height: 25px;
}

/* The phone sits at 16px, so its row is taller than the two below it. */
.header-utility li:first-child {
  min-height: 29px;
}

/* The search and cart pair drops toward the nav bar with a 30px gap under the
   phone number. Done with a margin rather than a fixed row height so the
   column reflows when text is enlarged. */
.header-utility .utility-search {
  margin-top: 25px;
}

.header-utility a {
  display: flex;
  align-items: center;
  color: #555555;
}

.header-utility .ico {
  width: 20px;
  text-align: center;
  color: #555555;
}

.header-utility .utility-text {
  padding-left: 8px;
}

.header-utility .phone-number {
  font-size: 16px;
  font-weight: 600;
  color: #910d10;
}

/* ==========================================================================
   7. Main navigation (992px and up)
   ========================================================================== */

/* Each item is a flex column that vertically centres its label in the 48px
   bar, so one-line and two-line labels need no per-class padding tricks. The
   nav-single-line / nav-two-line classes are still in the markup but carry no
   rules any more - the centring does the whole job, and the bar sits at the
   48px the design has always used. */
.main-nav {
  min-height: 48px;
  margin-bottom: 10px;
  background-color: rgb(75, 48, 29);
}

/* Set on the bar itself when a features strip follows it, so the two sit
   flush and the 10px gap moves to the bottom of the pair. */
.main-nav.has-feature-bar {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Features bar

   The secondary strip under the categories: Best Sellers, New Arrivals,
   Thanksgiving. Pale, centred and lighter-weight, so it reads as a second
   rank rather than as a competing navigation.

   It borrows .nav-dropdown, .nav-dropdown-menu and .is-open from the bar
   above - those rules are unscoped and the markup is the same shape, so a
   feature with children gets the same flyout with no extra CSS and no extra
   JavaScript.
   -------------------------------------------------------------------------- */
.feature-nav {
  min-height: 34px;
  margin-bottom: 10px;
  background-color: #f2f0ec;
  border-bottom: 1px solid #e2ded7;
}

/* position: relative so the admin's nudge, which arrives as an inline
   left value, has something to be relative TO. At the default 0 this changes
   nothing about where the bar sits. */
.feature-nav > .page-width {
  position: relative;
}

.feature-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-nav > .page-width > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* The separator is a left border on every item after the first, so it never
   trails off the end of a wrapped row the way a right border would. */
.feature-nav > .page-width > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
}

.feature-nav > .page-width > ul > li + li {
  border-left: 1px solid #d5cfc5;
}

.feature-nav > .page-width > ul > li > a,
.feature-nav > .page-width > ul > li > button {
  display: block;
  padding: 4px 22px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: rgb(75, 48, 29);
  text-align: center;
  cursor: pointer;
}

.feature-nav > .page-width > ul > li > a:hover,
.feature-nav > .page-width > ul > li > a:focus,
.feature-nav > .page-width > ul > li > button:hover,
.feature-nav > .page-width > ul > li > button:focus {
  color: rgb(75, 48, 29);
  text-decoration: underline;
}

/* The list sits 15px left of the container edge, which is where the first nav
   item needs to land. */
.main-nav > .page-width {
  position: relative;
  left: -15px;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > .page-width > ul {
  display: flex;
  flex-wrap: wrap;
}

.main-nav > .page-width > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  border-right: 1px solid #ffffff;
  text-align: center;
}

/* The bar is a row of buttons with a rule between each pair, and the rule was
   drawn as a right border on every item. That gives the run an edge after the
   last button and none before the first: Sweets was closed off, Appetizers
   opened straight out of the background. The first item gets the matching
   left edge. */
.main-nav > .page-width > ul > li:first-child {
  border-left: 1px solid #ffffff;
}

.main-nav > .page-width > ul > li > a,
.main-nav > .page-width > ul > li > button {
  display: block;
  padding: 4px 15px;
  margin: 0 3px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 16px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.main-nav > .page-width > ul > li > a:hover,
.main-nav > .page-width > ul > li > a:focus,
.main-nav > .page-width > ul > li > button:hover,
.main-nav > .page-width > ul > li > button:focus {
  color: #ffffff;
  text-decoration: underline;
}

/* Dropdown */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 220px;
  padding: 5px 0;
  margin-top: -5px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  text-align: left;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}

/* OPEN ON ROLL-OVER TOO, on both bars.

   .nav-dropdown is the same wrapper in the category bar and the features bar,
   so one rule gives both the flyout and nothing had to be renamed.

   GUARDED BY (hover: hover) and (pointer: fine). A touch screen reports a
   "hover" on first tap and holds it there, so an unguarded rule would open a
   menu on the tap meant to follow the link and leave it stuck open afterwards.
   The query limits this to a real pointer; touch keeps the tap-to-open
   behaviour the script already provides, and the script is untouched either
   way.

   NO GAP TO FALL THROUGH. The menu is positioned at top:100% with
   margin-top:-5px, so it overlaps the bar by five pixels and the pointer
   never crosses dead space on its way down. That negative margin is load
   bearing - remove it and the menu closes as the mouse leaves the button.

   The button still opens on click and on Enter, so a keyboard reaches every
   item without a pointer. */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover > .nav-dropdown-menu {
    display: block;
  }
}

/* The last item in a bar would push its menu off the right edge, so that one
   hangs from its right corner instead. :last-child rather than a width guess:
   the bar is built from the database and nobody can say in advance which item
   is last or how wide it is. */
.main-nav > .page-width > ul > li:last-child > .nav-dropdown-menu,
.feature-nav > .page-width > ul > li:last-child > .nav-dropdown-menu {
  left: auto;
  right: 0;
}

.nav-dropdown-menu a {
  display: block;
  padding: 3px 20px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background-color: rgba(75, 48, 29, 0.85);
  color: #ffffff;
}

/* On a phone both bars become one list, so the features get a heading to
   separate a season from a department. It is a label, not a link. */
.mobile-menu-heading {
  padding: 12px 15px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f6357;
}

/* ==========================================================================
   8. Mobile header and slide-out menu (991px and down)
   ========================================================================== */

.mobile-nav {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  background-color: rgb(75, 48, 29);
  color: #ffffff;
  font-weight: 300;
}

.mobile-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 30px 0 10px;
}

.mobile-nav-toggle {
  border: 0;
  background: none;
  padding: 3px;
  width: 40px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

.mobile-nav-utility {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mobile-nav-utility a {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.mobile-nav-utility .search-toggle .ico {
  background-color: rgb(75, 48, 29);
}

.mobile-nav-utility .cart-count {
  margin-left: 12px;
  font-size: 24px;
  font-weight: 600;
}

.mobile-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu > li {
  border-top: 1px solid #ffffff;
  border-left: 3px solid rgb(75, 48, 29);
  line-height: 45px;
  font-size: 16px;
}

.mobile-menu > li:hover {
  border-left-color: #d19b3d;
}

.mobile-menu > li > a,
.mobile-menu > li > button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 45px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.mobile-menu .submenu-arrow {
  margin-left: auto;
  padding-left: 10px;
}

.mobile-submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-submenu.is-open {
  display: block;
}

.mobile-submenu li {
  background-color: #ffffff;
  border-bottom: 1px solid #23282e;
  line-height: 36px;
}

.mobile-submenu a {
  display: block;
  padding-right: 10px;
  color: #666666;
}

.mobile-submenu a::before {
  font-family: 'hh-icons';
  content: '\f105';
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  color: #666666;
}

.mobile-submenu li:hover {
  background-color: #d8e1ff;
}

/* ==========================================================================
   9. Quick search drawer
   ========================================================================== */

.search-drawer {
  display: none;
  margin-bottom: 11px;
  padding: 10px 0;
  background-color: #f5f5f5;
}

.search-drawer.is-open {
  display: block;
}

.search-drawer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.search-drawer-heading {
  font-size: 18px;
  color: rgb(145, 13, 16);
}

.search-drawer form {
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-drawer input {
  width: 150px;
  min-height: 32px;
  padding: 4px 16px;
  border: 1px solid rgb(75, 48, 29);
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

@media (min-width: 768px) {
  .search-drawer input {
    width: 225px;
  }
}

@media (min-width: 992px) {
  .search-drawer input {
    width: 250px;
  }
}

.btn-search {
  /* Same box as .btn-add-recipient, so a button always matches the field to
     its left. It was 34px against a 32px input: no height of its own, and
     8px of padding around a 16px line. */
  min-height: 32px;
  padding: 4px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #767676;
  font-family: inherit;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
}

.btn-search:hover,
.btn-search:focus {
  background-color: #5f5f5f;
}

/* ==========================================================================
   10. Hero banner
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 320px;
  padding: 0;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 641px) {
  .hero {
    height: 380px;
  }
}

@media (min-width: 800px) {
  .hero {
    height: 580px;
  }
}

@media (min-width: 1180px) {
  .hero {
    height: 875px;
  }
}

/* Contrast scrim. The headline is black over whatever photograph is loaded
   that week, so SC 1.4.3 cannot be guaranteed by the text colour alone. This
   holds the headline band at full strength and fades out below it. Worst case
   - a pure black photo - composites to #808080, which is 5.3:1 against black.
   The headline is 24px or larger at every breakpoint, so 1.4.3 only asks for
   3:1 here; 0.5 leaves headroom without washing the photograph out. The alpha
   is the dial if you want it lighter or heavier. */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background-image: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.5) 44%,
    rgba(255, 255, 255, 0.25) 72%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

@media (min-width: 641px) {
  .hero::before {
    height: 35%;
  }
}

.hero-headline {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 641px) {
  .hero-headline {
    height: 15%;
  }
}

.hero-headline h1 {
  width: 100%;
  margin: 0 auto;
  max-width: 350px;
  /* System serif rather than a webfont: a loaded face sets this headline
     noticeably wider than the space allows. */
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  color: #000000;
}

@media (min-width: 800px) {
  .hero-headline h1 {
    max-width: 100%;
    font-size: 36px;
  }
}

@media (min-width: 1180px) {
  .hero-headline h1 {
    font-size: 48px;
  }
}

/* Overlay card, top-left quadrant of the hero. */
.hero-overlay {
  display: none;
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 0;
  width: 40%;
  height: 40%;
}

@media (min-width: 768px) {
  .hero-overlay {
    display: block;
  }
}

.hero-overlay-inner {
  position: relative;
  left: -10%;
  top: 30%;
  transform: perspective(1px) translateY(-50%);
  overflow: hidden;
}

/* Real text, not an image of text (SC 1.4.5). The 250x200 grey panel keeps its
   own contrast whatever photograph sits behind it - 15.2:1 for black on
   #dbdcde. */
.hero-overlay-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 200px;
  margin: 0 auto;
  /* The artwork sets its three lines 11px above the panel's centre. */
  padding: 0 10px 22px;
  background-color: #dbdcde;
  font-family: 'Times New Roman', Times, serif;
  font-size: 29px;
  line-height: 36px;
  text-align: center;
  color: #000000;
}

@media (min-width: 768px) and (max-width: 1179px) {
  .hero-overlay-text {
    transform: scale(0.7);
  }
}

.spacer-20 {
  display: block;
  height: 20px;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.site-footer {
  padding-top: 30px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  line-height: 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  margin-bottom: 10px;
}

.footer-links-service {
  margin-top: 10px;
  margin-bottom: 15px;
}

/* THE SMALL-PRINT ROW: Customer Care, FAQs, Privacy, Accessibility.
   A size down from the brand row above it, in the same maroon, and the only
   row in the footer that answers the pointer.

   The underline has to be asked for twice over. This stylesheet resets every
   anchor to text-decoration: none and then resets a:hover and a:focus to none
   as well, so a rule that only beats the first still loses to the second -
   these are written at .footer-links-service .footer-link:hover, which
   outranks a bare a:hover and puts the line back.

   :focus is in with :hover deliberately. This row is the one people reach for
   with the keyboard - a privacy policy or an accessibility statement - and an
   effect a mouse gets and a tab key does not is the wrong way round.

   Measured on the footer's own #f5f5f5: the maroon is 8.49:1 and the hover
   11.17:1, both clear of AA at this size. */
.footer-links-service .footer-link {
  font-size: 14px;
  color: #910d10;
}

.footer-links-service .footer-link:hover,
.footer-links-service .footer-link:focus {
  color: #6f0a0c;
  text-decoration: underline;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px;
  border: 0;
  background: none;
  font-family: inherit;
  min-height: 32px;
  font-size: 16px;
  color: #444444;
  cursor: pointer;
}

.footer-link .ico {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.footer-link:hover,
.footer-link:focus {
  color: #333333;
}

.footer-link-brand,
.footer-link-brand:hover,
.footer-link-brand:focus {
  color: #910d10;
}

.footer-promise {
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 5px;
}

.footer-promise-heading {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.footer-address {
  margin-top: 10px;
}

.footer-address .company-name {
  color: #910d10;
}

/* On narrow screens the footer links stack into two columns. */
@media (max-width: 767px) {
  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
  }

  .footer-link {
    display: flex;
    padding: 6px 5px;
  }
}

/* ==========================================================================
   12. Email signup modal
   ========================================================================== */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.is-open {
  display: block;
}

.modal-panel {
  display: none;
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: 300px;
  max-width: calc(100% - 20px);
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.modal-panel.is-open {
  display: block;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.modal-close {
  border: 0;
  background: none;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  color: #000000;
  opacity: 0.4;
  cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
  opacity: 0.8;
}

.modal-body {
  padding: 15px;
}

.modal-body label {
  display: block;
  margin-bottom: 8px;
}

.modal-body input {
  width: 100%;
  min-height: 32px;
  padding: 4px 16px;
  border: 1px solid #666666;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px;
  border-top: 1px solid #e5e5e5;
}

.modal-footer button {
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: inherit;
  font-size: 16px;
  color: #555555;
  cursor: pointer;
}

.modal-footer .btn-subscribe {
  color: #910d10;
}

.newsletter-entry-error {
  color: #ff6d6d;
}

.newsletter-entry-success {
  color: #05ae0e;
}

/* ==========================================================================
   13. Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: 10px 16px;
  background-color: #ffffff;
  color: #910d10;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   14. Keyboard focus

   Only shows for keyboard users (:focus-visible), so nothing changes for
   mouse or touch. White on the dark brown surfaces, brand red elsewhere.
   ========================================================================== */

:focus-visible {
  outline: 2px solid #910d10;
  outline-offset: 2px;
}

.main-nav :focus-visible,
.mobile-nav :focus-visible {
  outline-color: #ffffff;
  outline-offset: -2px;
}

.nav-dropdown-menu :focus-visible,
.mobile-submenu :focus-visible {
  outline-color: #910d10;
  outline-offset: -2px;
}

/* Text fields already draw their own border, so the outline above landed 2px
   outside it and read as a second, red border around the field. These get one
   indicator instead of two: the field's own border goes brown and an inset
   shadow gives it the second pixel of weight. Inset, so nothing moves - an
   ordinary border change would shift the text inside the box. */
input[type='text']:focus-visible,
input[type='search']:focus-visible,
input[type='email']:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: #4b301d;
}

/* ==========================================================================
   15. Interior content pages
   ========================================================================== */

/* The content area sits on white, over the tan body background. */
.content-panel {
  background-color: #ffffff;
  padding-bottom: 20px;
}

/* flow-root keeps the first heading's top margin inside the white panel
   instead of collapsing out and pushing the panel down. */
.content-panel > .page-width {
  display: flow-root;
}

/* The editorial pages nest their content one Bootstrap column deep, which
   insets it a further 15px inside the container. Applied per element rather
   than to every child, because the cart, product and category layouts run
   full width. */
.page-title,
.page-intro,
.card-grid {
  padding-left: 15px;
  padding-right: 15px;
}

.page-title {
  margin: 30px 0 15px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  color: #910d10;
}

.content-panel p {
  margin: 0 0 20px;
}

.content-panel .page-intro {
  margin-bottom: 0;
}

/* The last line in a card is the "View all" link; the gap below it comes from
   the grid, not from a trailing paragraph margin. */
.card p:last-child {
  margin-bottom: 0;
}

/* Two-up card grid. One column below 992px, which is where the desktop
   header appears, so the whole page changes shape at one breakpoint. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 0;
  margin: 10px 0 0;
  list-style: none;
}

@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  padding-right: 25px;
  margin: 5px 0;
}

.card-image {
  display: block;
}

.card-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.card-title {
  margin: 5px 0 15px;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: #910d10;
}

.card-link {
  color: #910d10;
}

/* ==========================================================================
   16. Category pages
   ========================================================================== */

/* Grey bar under the nav carrying the category name. It is the only heading on
   the page, so it is the h1 rather than a trail-less breadcrumb. */
/* Flex-centred rather than padded. Padding centres the LINE BOX; it does not
   centre the glyphs, because a font reserves more room under the baseline for
   descenders than it does above the cap height. With 6px top and bottom the
   box was dead centre in the 35px bar and the lettering still sat 8px from the
   top and 15px from the bottom.

   align-items: center plus line-height: 1 on the title (below) centres the em
   box instead, which lands the ink within about half a pixel of centre and
   does not depend on the padding arithmetic staying true if the type changes. */
.page-bar {
  display: flex;
  align-items: center;
  min-height: 35px;
  background-color: #eeeeee;
}

/* Padding only. The bar's inner element is .page-width now, so the category
   name lines up with the left edge of the first card at every width, whatever
   container the page is using.

   A separate max-width here leaves the heading outside the content grid on
   every category page, so it takes the same container the page is using.

   MARKUP CHANGE: a div with .page-bar-inner alone now has no width. Add
   page-width to it - and page-width-wide if that page runs wide:

       <div class="page-width page-width-wide page-bar-inner">
*/
/* No vertical padding - .page-bar centres this instead. */
.page-bar-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.page-bar-title {
  margin: 0;
  font-size: 16px;
  /* 1, not the inherited 1.4286. The extra leading is what pushed the
     lettering off centre; the bar's own min-height provides the breathing
     room instead. */
  line-height: 1;
  font-weight: 400;
  font-variant-caps: small-caps;
  color: #222222;
}

/* Product grid: three across from 768px, one centred column below that. */
.product-grid {
  display: grid;
  margin-top: 10px;
  grid-template-columns: 1fr;
  justify-items: center;
  column-gap: 30px;
  row-gap: 20px;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
  }
}

.product-card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 300px;
  background-color: #4b301d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
}

@media (min-width: 768px) {
  .product-card {
    max-width: none;
  }
}

/* Square, not a fixed 260px. The card images are full size and the cards are
   370px wide, so a fixed height would clip away a third of every photo.
   aspect-ratio also
   reserves the box before the file arrives, so the grid does not reflow as
   images load.

   object-fit: cover matters for any image that is not square - it fills the
   box and crops the overflow rather than stretching. */
.product-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-title {
  display: block;
  /* No right padding, so a long title runs to the edge of the card rather
     than wrapping a line early. */
  padding: 5px 0 3px 6px;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}

.product-card:hover .product-card-title,
.product-card:focus .product-card-title {
  text-decoration: underline;
}

/* No products in the category. Same treatment as .search-empty, which is the
   equivalent state on the search page. */
.category-empty {
  margin: 30px 0 13px;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: #666666;
  font-style: italic;
}

/* Between 768 and 991 the card shortens to 275px and the title sits over the
   bottom of the photo. Done with positioning rather than a negative offset
   inside a clipped box. */
@media (min-width: 768px) and (max-width: 991px) {
  .product-card {
    height: 275px;
    overflow: hidden;
  }

  /* An explicit height wins over aspect-ratio, so this band keeps the cropped
     card deliberately. */
  .product-card-image {
    height: 275px;
    aspect-ratio: auto;
  }

  .product-card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4b301d;
  }
}

/* ==========================================================================
   17. Panel card

   Was "Gift finder". The finder is gone: /gifts is a category like every
   other one now, so the .gift-finder, .gift-finder-title, .gift-finder-field,
   .gift-finder-copy and .btn-search-gifts rules that dressed its form have
   been removed - about ninety lines that no page could reach.

   What is left is the panel itself and the gap under it, because neither is
   about gifts. Both are generic enough that another page - /which-ham is the
   obvious candidate - may be leaning on them, and a stylesheet the whole site
   loads is the wrong place to find out by deleting.
   ========================================================================== */

/* Light panel with a soft drop shadow. */
.panel-card {
  margin-top: 15px;
  margin-bottom: 20px;
  background-color: #fbfcfc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
}

/* A results grid sitting under a panel needs room above it. */
.panel-card ~ .product-grid {
  margin-top: 30px;
}

/* ==========================================================================
   18. Product detail pages
   ========================================================================== */

/* The trail bar is hidden below 768px. */
.on-tablet-up {
  display: none;
}

@media (min-width: 768px) {
  .on-tablet-up {
    display: block;
  }

  /* .on-tablet-up sets display: block, it sits LATER in this file than
     .page-bar, and the two selectors carry the same specificity - so on the
     product page it was quietly overriding .page-bar's display: flex and
     taking the vertical centring with it. The bar looked fine on the category
     page, which does not use .on-tablet-up, and wrong on the product page,
     which does.

     Restated here, after it, and one class more specific. Still inside the
     768px query, so the bar stays hidden below that. */
  .page-bar.on-tablet-up {
    display: flex;
  }
}

/* line-height: 1 for the same reason .page-bar-title carries it - .page-bar
   centres its child's box, and the inherited 1.4286 leading pads that box
   unevenly around the lettering, which prints the trail high in the grey. */
.breadcrumb-trail ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1;
  font-variant-caps: small-caps;
  color: #222222;
}

.breadcrumb-trail li {
  display: inline;
}

.breadcrumb-trail li + li::before {
  content: '\00a0>\00a0';
  color: #222222;
}

.breadcrumb-trail a {
  color: rgba(75, 48, 29, 0.85);
}

/* Photo and related tiles on the left, name / price / buy box on the right. */
.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  /* Pulled 15px wider than the container on each side, then each column pads
     it back - the same net geometry a Bootstrap row produced. */
  margin: 10px -15px 0;
}

@media (min-width: 992px) {
  .product-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.product-layout > * {
  padding: 0 15px;
}

.product-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* "You may also be interested in" */
.related-title {
  margin: 30px 0 15px;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-grid > li {
  padding: 0 15px;
}

.related-grid img {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
}

.related-caption {
  display: block;
  color: #910d10;
}

/* Product details column */
.product-details {
  margin: 10px 15px 15px;
}

.product-title {
  margin: 0 0 15px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: #333333;
}

.content-panel .product-summary {
  margin: 0 0 15px;
}

/* The summary is a div of paragraphs now - the feed's copy is plain text with
   blank lines, so the page builds the p elements. The last one's own 20px
   would stack on the div's 15px and push the buy box down. */
.content-panel .product-summary p:last-child {
  margin-bottom: 0;
}

/* Buy box */
.buy-box {
  min-height: 200px;
  padding: 15px 15px 10px;
  background-color: #fbfcfc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
}

.buy-box-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.buy-box-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

/* The size, under the name in a buy box. Bold and bracketed, because on a
   grouped page it is the ONLY thing telling two otherwise identical boxes
   apart - two Boneless Smoked Hams differ by 3 - 3.5 lbs. against 1 3/4 - 2
   lbs. and nothing else. The brackets are in the markup rather than in
   content: they are read out, copied and searched with the words, which
   generated text is not. */
.buy-box-save {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.buy-box-price {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  color: #910d10;
  white-space: nowrap;
}

.buy-box-sku {
  line-height: 20px;
}

/* Added-to-cart confirmation. Deliberately NOT .cart-alert: that class is the
   warning voice - "Currently unavailable", "please remove this item" - and it
   stays red. This is a success, so it gets its own class and its own colour.

   flex on the paragraph and inline-flex on the link so the glyph is centred
   against the words by the box model rather than by a baseline nudge, which
   is what drifts when the font size changes. */
/* .content-panel p sets margin 0 0 20px and is (0,1,1); a bare .cart-added is
   (0,1,0) and would lose, so the margin is set from a selector that wins.

   12 above and 13 below rather than 0 and 25: the confirmation was sitting
   hard against the SKU line with all the slack underneath it. The two numbers
   total the 25px the form already carried, so the box is exactly as tall with
   the message as without it. */
.content-panel .cart-added {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-weight: 700;
  color: #2c8200;
}

/* The form keeps its own 25px on every other product page; only the page that
   just added something splits it. */
.cart-added + .buy-form {
  margin-top: 13px;
}

.cart-added-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2c8200;
  text-decoration: underline;
}

.cart-added-link:hover,
.cart-added-link:focus {
  color: #1f5c00;
  text-decoration: underline;
}

.buy-form {
  display: grid;
  grid-template-columns: 33.3333% 1fr;
  align-items: center;
  gap: 8px 0;
  margin-top: 25px;
}

.buy-form label {
  margin: 0;
  font-weight: 400;
}

.buy-form select {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #666666;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

.buy-form input[type='text'] {
  display: block;
  width: 150px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 2px solid #cccccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

.field-help {
  display: block;
  font-size: 12px;
}

.buy-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-add-to-cart {
  min-height: 32px;
  padding: 4px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #910d10;
  font-family: inherit;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.btn-add-to-cart:hover,
.btn-add-to-cart:focus {
  background-color: #7a0b0d;
}

/* Preparation / Ingredients panels, under the buy box.

   Built on <details>/<summary>, not a scripted accordion. The behaviour is
   identical, it is keyboard accessible and screen-reader announced with no
   JavaScript at all, and it still works if site.js fails to load - which for a
   page whose panels hold cooking instructions and allergen-bearing ingredient
   lists is worth having.

   The marker is a CSS-escaped plus and minus so this file stays plain ASCII. */

.product-accordion {
  margin-top: 20px;
  border-top: 1px solid #e0ddd6;
}

.accordion-item {
  border-bottom: 1px solid #e0ddd6;
}

.accordion-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #4b301d;
  cursor: pointer;
  /* Both lines are needed: the first for standards browsers, the second for
     WebKit, which still paints its own triangle otherwise. */
  list-style: none;
}

.accordion-item > summary::-webkit-details-marker {
  display: none;
}

.accordion-item > summary::after {
  content: "\002B";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #4b301d;
}

.accordion-item[open] > summary::after {
  content: "\2212";
}

.accordion-item > summary:hover {
  color: #910d10;
}

.accordion-body {
  padding: 0 2px 16px;
  font-size: 14px;
  line-height: 20px;
}

.content-panel .accordion-body p {
  margin: 0 0 12px;
}

.content-panel .accordion-body p:last-child {
  margin-bottom: 0;
}

/* Allergen names arrive as a semicolon list and are printed exactly as
   stored - lower case. Capitalising here rather than in the page keeps a
   field that carries regulatory weight unrewritten in the database and in the
   markup, while still reading properly on screen. */
.accordion-body .allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.accordion-body .allergen-list li {
  padding: 3px 10px;
  border: 1px solid #e0ddd6;
  border-radius: 4px;
  background-color: #f7f5f1;
  text-transform: capitalize;
}


/* ==========================================================================
   19. Shopping cart
   ========================================================================== */

.cart-intro {
  margin-top: 10px;
  padding-bottom: 5px;
}

.cart-intro p {
  margin: 0;
}

.cart-alert {
  font-weight: 700;
  color: #b35c00;
}

.cart-group {
  margin: 0;
}

.cart-recipient-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  margin: 5px 0;
  padding: 0 15px 0 18px;
  background-color: #eddfbe;
  font-size: 18px;
  line-height: 30px;
}

.cart-recipient-name {
  color: #910d10;
}

.cart-recipient-total {
  font-weight: 600;
}

.cart-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* A rule only between items sharing a recipient - a divider after a group
   falls on white and would be invisible anyway. */
.cart-line + .cart-line {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #aaaaaa;
}

@media (min-width: 768px) {
  .cart-line {
    grid-template-columns: 16.6667% 50% 16.6667% 16.6667%;
    gap: 0;
  }
}

@media (min-width: 992px) {
  .cart-line {
    grid-template-columns: 8.3333% 66.6667% 16.6667% 8.3333%;
  }
}

.cart-line-info,
.cart-line-price,
.cart-line-remove {
  padding: 0 15px;
}

.cart-line-thumb img {
  display: block;
  height: 80px;
  width: auto;
  max-width: none;
  margin: 5px 0;
}

.cart-line-name {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(75, 48, 29);
}

.cart-line-variant {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgb(75, 48, 29);
}

.cart-recipient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.cart-recipient label,
.cart-quantity label {
  margin: 0;
  font-weight: 400;
}

.cart-recipient select,
.cart-quantity select {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #666666;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

/* [hidden] has to win over the flex display, or the Add New box is always
   on screen. */
.new-recipient[hidden] {
  display: none;
}

.new-recipient {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.new-recipient input {
  width: 150px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #666666;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

/* The flex gap is 5px all round, which is right between the field and Add
   but tight after the label. Only this side gets the extra. */
.new-recipient label {
  margin-right: 5px;
}

.btn-add-recipient {
  min-height: 32px;
  padding: 4px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #767676;
  font-family: inherit;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.cart-line-price {
  align-self: start;
  margin-top: 5px;
}

.cart-quantity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

/* The remove control sits centred in its cell, both axes, so the icon lines
   up with the middle of the row rather than hanging off the top. */
.cart-line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline SVG rather than a two-image hover swap. The colour lives on the
   button and the icon inherits it through currentColor, which is also how it
   reaches the shapes inside <use> - inherited properties cross into the
   shadow tree that <use> builds, so one declaration recolours the whole icon. */
.trashcan {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: #333333;
  cursor: pointer;
}

.trashcan .icon-trash {
  display: block;
  width: 26px;
  height: 26px;
}

.trashcan:hover,
.trashcan:focus {
  color: #910d10;
}

/* Thin tan rule closing the cart, above the checkout button. */
.cart-rule {
  min-height: 5px;
  margin: 25px 0 5px;
  background-color: #eddfbe;
}

.cart-actions {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

.btn-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 200px;
  height: 50px;
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #910d10;
  font-family: inherit;
  font-size: 18px;
  color: #ffffff;
  cursor: pointer;
}

.btn-checkout:hover,
.btn-checkout:focus {
  background-color: #7a0b0d;
}


/* Shipping and processing notes. The copy and its icon sit on one centred
   row, padded on all sides so the block does not crowd the tan rule above. */
/* Two cells: the icon sizes to itself, the copy takes the rest. align-items
   centre works on the ROW, whose height is set by whichever cell is taller -
   so the icon lands on the middle of the copy however many lines it wraps to,
   with no arithmetic to keep true. */
.shipping-notes {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
  padding: 15px;
}

.shipping-notes-icon {
  width: 70px;
  height: auto;
}

/* Full width above the icon-and-copy row, rather than being placed into the
   first cell and pushing the copy onto a second row. */
.shipping-notes h2 {
  grid-column: 1 / -1;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}

.shipping-table {
  margin: 20px 0;
  border-collapse: collapse;
}

.shipping-table th,
.shipping-table td {
  padding: 2px 0;
  text-align: left;
  vertical-align: top;
}

.shipping-table th {
  font-weight: 700;
}

.shipping-table td + td,
.shipping-table th + th {
  padding-left: 10px;
}

.btn-delete {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #910d10;
  font-size: 16px;
  color: #ffffff;
}

.btn-delete:hover,
.btn-delete:focus {
  background-color: #7a0b0d;
  color: #ffffff;
}

/* Remove-item confirmation.

   A native <dialog>: the browser supplies the backdrop, Escape, focus
   trapping and the return of focus to whatever opened it. The newsletter
   .modal-panel above is a scripted overlay that predates this file; it is left
   alone rather than converted in passing. */

.cart-dialog {
  width: 320px;
  max-width: calc(100% - 20px);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  color: #333333;
}

.cart-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.cart-dialog .modal-footer form {
  display: inline;
  margin: 0;
}

/* The trashcan is a submit button rather than a link, so it needs a button
   reset. Flex, not block: an inline
   button sits on a text baseline, and the descender space under it pushes the
   icon a couple of pixels above the true centre of the row. */
.cart-line-remove .cart-remove-form {
  display: flex;
  margin: 0;
}



/* Order summary, including the shipping-protection toggle. */

.order-summary {
  max-width: 420px;
  margin: 20px 0 10px auto;
  padding: 16px 18px;
  background-color: #fbfcfc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
}

.order-summary-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.order-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  line-height: 20px;
}

.order-summary-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e0ddd6;
  font-size: 16px;
}

.protect-form {
  margin: 6px 0 0;
  padding: 8px 0;
  border-top: 1px solid #e0ddd6;
}

.protect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.protect-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

/* The native box, tinted rather than replaced - a scripted control here would
   be one more thing to fail on a page that already degrades cleanly. */
.protect-label input[type='checkbox'] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #467235;
  cursor: pointer;
}

/* The info icon. A button, not a link - it goes nowhere. Muted until hovered
   so it sits behind the amount rather than competing with it. */
.protect-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  padding: 2px;
  border: 0;
  background: none;
  color: #9a9a9a;
  cursor: pointer;
}

.protect-info:hover,
.protect-info:focus-visible {
  color: #565656;
}

/* margin-left: auto above pushes the icon to the right of the label, so the
   amount no longer needs the row's spare space handed to it. */
.protect-amount {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The Shipping Protection dialog

   Wider than the cart's confirm dialogs, because it carries prose rather than
   a yes/no.
   -------------------------------------------------------------------------- */

.protect-dialog {
  width: 560px;
}

.protect-dialog-header {
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid #e6e6e6;
}

.protect-dialog-brand {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #767676;
}

.protect-dialog-brand strong {
  color: #2f2a24;
}

.protect-dialog-body {
  padding: 24px;
}

.protect-dialog-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 400;
  line-height: 32px;
  color: #2f2a24;
}

.protect-dialog-lede {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 22px;
}

.protect-dialog-list {
  margin: 0 0 18px;
  padding: 0 0 0 18px;
  list-style: disc;
}

.protect-dialog-list li {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
}

.protect-dialog-list strong {
  display: block;
}

/* The rule the reference draws above its small print. */
.protect-dialog-legal {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
  font-size: 12px;
  line-height: 18px;
  color: #767676;
}

@media (max-width: 600px) {
  .protect-dialog-title {
    font-size: 22px;
    line-height: 28px;
  }

  .protect-dialog-header,
  .protect-dialog-body {
    padding: 14px 16px;
  }
}

.protect-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: #666666;
}

.protect-note[hidden] {
  display: none;
}

/* Two columns under the cart rule: the shipping copy takes the space the
   order summary leaves free on the left. Both are top-aligned, and they stack
   on narrow screens where 320 + 380 no longer fits. */
.cart-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 30px;
}

/* .content-panel p sets margin 0 0 20px and is (0,1,1); a bare
   .shipping-notes-copy is (0,1,0), so the margin: 0 below never applied and
   the copy carried 20px underneath it. That 20px was part of the box the row
   centres on, which sat the icon 10px low against the text itself. Restated
   one class deeper, further down this file, so it wins.

   flex: is inert on a grid item; the 1fr column does that job now. */
.shipping-notes-copy {
  max-width: 80ch;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
}

.cart-totals .shipping-notes {
  flex: 1 1 320px;
}

/* Grows to its own 420px cap; margin-left auto in the base rule still holds
   it right when the copy is short enough to leave slack. */
.cart-totals .order-summary {
  flex: 1 1 380px;
}

/* See the note on .shipping-notes-copy above - this is the declaration that
   actually beats .content-panel p. */
.content-panel .shipping-notes-copy {
  margin: 0;
}


/* ==========================================================================
   20. Checkout
   ========================================================================== */

/* Step indicator, in the same grey bar the category pages use for a title. */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 25px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-variant-caps: small-caps;
  color: #222222;
}

.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.step-number {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid #666666;
  border-radius: 50%;
  font-size: 16px;
  font-variant-caps: normal;
  line-height: 20px;
  text-align: center;
}

.checkout-steps [aria-current='step'] .step-number {
  background-color: #910d10;
  border-color: #910d10;
  color: #ffffff;
}

.step-label-short {
  display: none;
}

@media (max-width: 1199px) {
  .step-label-full {
    display: none;
  }

  .step-label-short {
    display: inline;
  }
}

/* Below 768px only the current step keeps its label. */
@media (max-width: 767px) {
  .checkout-steps {
    gap: 5px 20px;
  }

  .checkout-steps li:not([aria-current='step']) .step-label-full,
  .checkout-steps li:not([aria-current='step']) .step-label-short {
    display: none;
  }
}

/* Page heading and the two notices under it */
/* No left margin: the heading lines up with the notice line under it and with
   the page-width padding, rather than sitting 11px further in than either. */
.checkout-title {
  margin: 30px 0 15px;
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
}

.content-panel .checkout-notices {
  margin-bottom: 0;
}

.checkout-notices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 14px;
  color: #c9302c;
}

.checkout-notice-strong {
  font-weight: 600;
}

/* The order summary's tax failure. When it appears it is the ONLY thing on the
   page - no totals, no card panel - so it inherits none of the spacing the
   panel's normal content would have put above it, and it was sitting hard
   against the step bar at the same size as a caption. Scoped rather than added
   to .checkout-notices, which steps 1, 2 and 3 share and where the spacing is
   already right. */
.checkout-notices-error {
  margin-top: 34px;
  font-size: 15px;
  line-height: 1.6;
}

.checkout-notices-error .checkout-notice-strong {
  font-size: 19px;
}

/* The line that introduces the billing form. It sits directly on top of the
   form and needs its own gap underneath.

   Scoped to .content-panel because .content-panel .checkout-notices sets the
   bottom margin to 0 at (0,2,0); a bare class here is (0,1,0) and would lose. */
.content-panel .checkout-notices-intro {
  margin-bottom: 24px;
}

/* Recipient bar, same treatment as the cart */
/* When a recipient bar is the first thing under the page title it takes 25px
   rather than the 10px used between bars. */
.checkout-recipient-bar.is-first {
  margin-top: 25px;
}

.checkout-recipient-bar {
  min-height: 30px;
  margin: 10px 0;
  padding: 0 15px 0 18px;
  background-color: #eddfbe;
  font-size: 18px;
  line-height: 30px;
}

.checkout-recipient-name {
  color: #910d10;
}

/* Twelve-column field grid. */
.address-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.address-grid > * {
  padding: 0 15px;
}

.address-grid input,
.address-grid select {
  display: block;
  width: 100%;
  min-height: 32px;
  margin-bottom: 5px;
  padding: 4px 16px;
  border: 1px solid #666666;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #666666;
}

.address-grid input::placeholder {
  color: #bdc3c7;
}

.f-email    { grid-column: 1 / span 5; }
.f-optin    { grid-column: 6 / span 7; }
.f-fname    { grid-column: 1 / span 4; }
.f-lname    { grid-column: 5 / span 4; }
.f-address  { grid-column: 1 / span 6; }
.f-apt      { grid-column: 1 / span 6; }
.f-city     { grid-column: 1 / span 4; }
.f-state    { grid-column: 5 / span 3; }
.f-zip      { grid-column: 8 / span 2; }
.f-phone    { grid-column: 10 / span 3; }

@media (max-width: 991px) {
  .address-grid > * {
    grid-column: 1 / -1;
  }
}

/* Opt-in checkbox. A native checkbox with accent-color gets the green tick
   with no scripted widget behind it. */
.f-optin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
}

.f-optin label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.address-grid .f-optin input[type='checkbox'] {
  flex: none;
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: #05ae0e;
}

/* "SAME AS MY SHIPPING ADDRESS" - checkout step 2.

   This control sits ABOVE the address form, not inside it, so these rules are
   unscoped: the .address-grid prefix the other checkbox rules carry cannot
   reach it.

   Same 20px native checkbox and same accent-color as the step 1 opt-in, so the
   tick is the site green with no scripted widget behind it. */
.billing-same {
  margin: 0 0 14px;
}

.billing-same label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.billing-same input[type='checkbox'] {
  flex: none;
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: #05ae0e;
}

/* .content-panel p sets margin 0 0 20px and is (0,1,1); a bare
   .billing-same-note is (0,1,0) and would lose, so the margin is set from a
   selector that wins. The 30px indent is the checkbox plus its gap, so the
   address lines up under the words it belongs to rather than under the tick. */
.content-panel .billing-same-note {
  margin: 4px 0 0 30px;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

/* Validation messages */
.field-error {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: #c9302c;
}

/* Address verification

   Shown under a recipient's fields, and ONLY when that recipient needs an
   answer. Anything the postal service confirmed is accepted during the submit
   and never mentioned - a page that reports success on every address it checked
   teaches people to click past the one that matters.

   Two states, deliberately different in weight:

     amber   we found a standard version, choose one. Not a problem, a question.
     red     we could not verify it at all. This one stops the page until it is
             answered.

   The panel sits outside .address-grid, so it takes the same 15px side padding
   the fields above it get from .address-grid > *. */
.addr-check {
  margin: 4px 15px 26px;
  padding: 16px 18px;
  border-left-width: 5px;
  border-left-style: solid;
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.addr-check-choose {
  border-left-color: #b8791a;
  background-color: #fdf7ee;
}

.addr-check-blocked {
  border-left-color: #a3231d;
  background-color: #fdf2f1;
}

.addr-check-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: #333333;
}

.content-panel .addr-check-why {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
}

/* Side by side where there is room, stacked where there is not. The two choices
   are the same size on purpose - making "use ours" the visually louder one
   would be putting a thumb on the scale. */
.addr-check-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.addr-check-option {
  flex: 1 1 260px;
  display: block;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background-color: #ffffff;
  font-weight: 400;
  cursor: pointer;
}

.addr-check-option:hover {
  border-color: #888888;
}

/* Floated out of the indent the label text sits in, so the control lines up
   with the first character above it. */
.addr-check-option input {
  float: left;
  margin: 2px 0 0;
}

.addr-check-head {
  display: block;
  margin: 0 0 6px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #333333;
}

.addr-check-body {
  display: block;
  margin-left: 22px;
  font-size: 14px;
  line-height: 20px;
  color: #444444;
}

/* Hugs its own text rather than stretching. Full width, a lone checkbox in a
   bordered box the width of the panel reads as an empty text field, which is
   the last thing this particular control should look like. */
.addr-check-override {
  display: inline-block;
  flex: none;
}

.addr-check-override .addr-check-head {
  margin-bottom: 0;
  font-weight: 400;
}

.addr-check .field-error {
  margin-bottom: 12px;
}

@media (max-width: 620px) {
  .addr-check-option {
    flex-basis: 100%;
  }
}

/* Back / Continue */
.checkout-actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 20px 15px;
}

.btn-checkout-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 50px;
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #910d10;
  font-family: inherit;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.btn-checkout-step:hover,
.btn-checkout-step:focus {
  background-color: #7a0b0d;
  color: #ffffff;
}

@media (max-width: 767px) {
  .btn-checkout-step {
    width: auto;
    min-width: 100px;
    height: 32px;
    padding: 4px 16px;
    font-size: 14px;
  }
}

/* ==========================================================================
   21. Checkout - Delivery & Greetings
   ========================================================================== */

/* Eight columns of shipping detail beside four of gift message. */
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.delivery-grid > * {
  padding: 0 15px;
}

.f-ship {
  grid-column: 1 / span 8;
  font-size: 14px;
}

.f-gift {
  grid-column: 9 / span 4;
  /* 5px under the textarea holds the recipient bars on the same rows. */
  padding-bottom: 5px;
}

.content-panel .ship-to {
  margin: 0;
  line-height: 20px;
}

.ship-to-name {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   The order's shipment block

   One date and one service for the whole order, above the recipients rather
   than repeated inside each of them.
   -------------------------------------------------------------------------- */

.ship-order {
  max-width: 520px;
  margin: 0 0 10px;
  padding: 0 15px;
}

.content-panel .ship-order-heading {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.content-panel .ship-order-note {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: #767676;
}

/* Sits under the prices it qualifies, so it reads as a footnote to them. */
.content-panel .ship-order-note-multi {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   When the package ships

   Two radios wearing tabs. The inputs are moved off-canvas rather than hidden
   with display:none, which would make them unfocusable and drop them out of
   the tab order - so the pair still works entirely from the keyboard, and the
   focus ring is drawn on the tab beside each one.
   -------------------------------------------------------------------------- */

.ship-when {
  display: flex;
  max-width: 520px;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  overflow: hidden;
}

.ship-when legend {
  padding: 0;
  border: 0;
}

.ship-when-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ship-when-tab {
  flex: 1 1 50%;
  margin: 0;
  padding: 12px 15px;
  background-color: #f4f2ee;
  font-size: 14px;
  font-weight: 400;
  color: #8a8378;
  text-align: center;
  cursor: pointer;
}

.ship-when-tab + .ship-when-radio + .ship-when-tab {
  border-left: 1px solid #d5d5d5;
}

.ship-when-radio:checked + .ship-when-tab {
  background-color: #ffffff;
  color: #2f2a24;
  font-weight: 600;
}

.ship-when-radio:focus-visible + .ship-when-tab {
  outline: 2px solid #910d10;
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   The date grid

   Only appears under "ship at a later date". Days the calendar does not offer
   stay in place as plain text rather than disappearing, so the month keeps its
   shape and the weeks stay readable.
   -------------------------------------------------------------------------- */

.ship-calendar {
  max-width: 520px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  background-color: #ffffff;
}

.ship-calendar[hidden] {
  display: none;
}

.ship-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ship-cal-month {
  font-size: 15px;
  font-weight: 600;
}

.ship-cal-arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  color: #2f2a24;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ship-cal-arrow:hover {
  background-color: #f4f2ee;
}

.ship-cal-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.ship-cal-arrow:disabled:hover {
  background-color: transparent;
}

.ship-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ship-cal-dow {
  padding-bottom: 4px;
  color: #9a9a9a;
  font-size: 12px;
  text-align: center;
}

.ship-cal-blank {
  display: block;
}

.ship-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background-color: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #2f2a24;
  cursor: pointer;
}

.ship-cal-day:hover {
  background-color: #f4f2ee;
}

.ship-cal-day.is-chosen {
  background-color: #910d10;
  color: #ffffff;
}

.ship-cal-day.is-chosen:hover {
  background-color: #7a0b0d;
}

/* Not a button, so it takes neither the pointer nor the tab stop. */
.ship-cal-day-off {
  font-weight: 400;
  color: #c4c4c4;
  cursor: default;
}

.ship-cal-day-off:hover {
  background-color: transparent;
}

/* Active, but past the 90-day horizon. Drawn exactly like a non-ship day: to a
   customer both mean "not this one", and inventing a third state would only
   raise a question the answer to which is a tooltip away. */
.ship-cal-day-late {
  cursor: help;
}

/* The date in plain words, for anyone who cannot read the grid - and the one
   thing left standing if the grid fails to build. */
.content-panel .ship-cal-fallback {
  margin: 10px 0 0;
  font-size: 12px;
  color: #767676;
}

/* --------------------------------------------------------------------------
   How fast it travels

   Same radio-behind-a-label pattern as the tabs above. The dot is drawn rather
   than being the input itself, so the whole row is the target.
   -------------------------------------------------------------------------- */

.ship-methods {
  max-width: 520px;
  margin: 15px 0 0;
  padding: 0;
  border: 0;
}

.ship-methods legend {
  padding: 0;
  border: 0;
}

.ship-method-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ship-method {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 -1px;
  padding: 14px 15px;
  border: 1px solid #d5d5d5;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

/* First and last of the stack get the rounded corners; the -1px margin above
   collapses the shared borders so the middle rows keep a single hairline. */
.ship-method-radio:first-of-type + .ship-method {
  border-radius: 6px 6px 0 0;
}

.ship-method:last-child {
  margin-bottom: 0;
  border-radius: 0 0 6px 6px;
}

.ship-method-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid #b5b0a8;
  border-radius: 50%;
  background-color: #ffffff;
}

/* One line on desktop. The container above is sized to hold the longest of
   these - "Overnight - Delivery on or before Wed. 08/26" - and nowrap stops
   the day and the date splitting across two lines when it is a few pixels
   short. Released below 768px, where a phone genuinely has no room. */
.ship-method-name {
  flex: 1 1 auto;
  font-weight: 600;
  white-space: nowrap;
}

.ship-method-price {
  flex: none;
  font-weight: 600;
}

/* Selected. The row lifts above its neighbours so its border is unbroken. */
.ship-method-radio:checked + .ship-method {
  position: relative;
  z-index: 1;
  border-color: #910d10;
  background-color: #fdf6f6;
}

.ship-method-radio:checked + .ship-method .ship-method-dot {
  border: 5px solid #910d10;
}

.ship-method-radio:focus-visible + .ship-method {
  outline: 2px solid #910d10;
  outline-offset: -2px;
}

/* A service the chosen day does not carry. Greyed and unpickable rather than
   removed: three rows that quietly became two would read as a fault, and the
   customer needs to see that the service exists and that the date is the
   reason they cannot have it. Driven by the disabled attribute rather than a
   class, so the server's first paint and the calendar's later changes produce
   exactly the same row. */
.ship-method-radio:disabled + .ship-method {
  background-color: #f7f7f6;
  color: #9a9a9a;
  cursor: not-allowed;
}

.ship-method-radio:disabled + .ship-method .ship-method-dot {
  border-color: #dedbd4;
  background-color: #f2f2f0;
}

/* Why the service that was chosen is no longer chosen. Written by the
   calendar when a date change takes it away. */
.ship-method-note {
  margin: 10px 0 0;
}

.f-ship select {
  display: block;
  width: 100%;
  max-width: 300px;
  height: 32px;
  padding: 5px 10px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #565656;
}

.gift-heading {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
}

.content-panel .gift-counter {
  margin: 0;
}

.gift-counter {
  display: flex;
  gap: 25px;
  font-size: 12px;
  line-height: 17px;
}

.gift-message {
  display: block;
  width: 100%;
  height: 210px;
  padding: 5px 10px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #565656;
  white-space: pre;
  overflow: auto;
  resize: none;
}

.gift-error {
  margin-top: 5px;
  font-size: 12px;
  color: #c9302c;
}

.gift-error[hidden] {
  display: none;
}

/* No room for one line on a phone, so the day and the date are allowed to fall
   to a second one. After the rule it overrides, not before: a media query adds
   no specificity, so source order is the only thing deciding this. */
@media (max-width: 767px) {
  .ship-method-name {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Standing copy under the page title
   -------------------------------------------------------------------------- */

.checkout-intro {
  max-width: 720px;
  margin-bottom: 20px;
}

.content-panel .checkout-intro p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 20px;
}

.content-panel .checkout-intro p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Something moved while they were away

   Amber rather than the site's red: the customer has done nothing wrong and
   nothing is blocked, so this must not read as the validation errors do a few
   rows further down.
   -------------------------------------------------------------------------- */

.checkout-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 720px;
  margin: 0 0 20px;
  padding: 12px 15px;
  border: 1px solid #e6d3a3;
  border-radius: 6px;
  background-color: #fdf7ea;
  font-size: 13px;
  line-height: 18px;
  color: #6b5720;
}

.checkout-alert-icon {
  flex: none;
  margin-top: 1px;
}

.checkout-alert-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-alert-title {
  font-weight: 600;
}

/* Inside a recipient block, where it sits between the calendar and the
   options it is talking about. */
.checkout-alert-inline {
  max-width: 520px;
  margin: 15px 0 0;
}

/* The options follow immediately, so the notice keeps its own gap rather than
   doubling up with the fieldset's. */
.checkout-alert-inline + .ship-methods {
  margin-top: 10px;
}

@media (max-width: 991px) {
  .delivery-grid > * {
    grid-column: 1 / -1;
  }

  /* Stacked, the gift block sits right under the select and the textarea
     baseline gap disappears. */
  .f-gift {
    margin-top: 5px;
    padding-bottom: 0;
  }

  .checkout-recipient-bar.is-first {
    margin-top: 15px;
  }
}


/* ==========================================================================
   22. Search results
   ========================================================================== */

/* The search page's container carries a 15px top padding the category pages
   do not, so its grid starts 5px lower. */
.search-page .product-grid {
  margin-top: 15px;
  margin-bottom: 0;
}

.content-panel .search-empty {
  /* 30px under the header, 28px to the first card once the grid's own
     15px top margin is added. */
  margin: 30px 0 13px;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
}

/* ==========================================================================
   23. Checkout - Order Summary
   ========================================================================== */

/* Billing panel beside the payment panel: four columns, a one-column gap,
   then seven. Same twelve-column arithmetic as the address grids. */
/* Two columns, both aligned to the top. Billing on the left, payment on the
   right, and the page heading is the first thing in the left column - so the
   heading and the order total start on the same line by sitting at the top of
   the same row, with nothing to measure. */
.summary-top {
  display: grid;
  grid-template-columns: 33.33% 58.33%;
  justify-content: space-between;
  align-items: start;
  margin-top: 30px;
}

.summary-bill {
  padding: 0 15px 0 8px;
}

.summary-pay {
  padding: 0 8px 0 15px;
}

/* The 30px above now belongs to .summary-top. The 26px line box is the same
   one .pay-total uses, so the 22px heading and the 24px amount put their text
   on the same pixel row. */
.summary-bill .checkout-title {
  margin-top: 0;
  line-height: 26px;
}

.content-panel .summary-address {
  margin: 0 0 20px;
  line-height: 20px;
}

.summary-address-label {
  font-weight: 600;
}

.content-panel .keycode-note {
  margin: 0 0 5px;
  line-height: 20px;
}

.keycode-form {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}

.keycode-form input {
  width: 150px;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(75, 48, 29, 1);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: #565656;
}

.btn-keycode {
  height: 32px;
  padding: 4px 18px;
  border: 0;
  border-radius: 4px;
  background-color: #767676;
  font-family: inherit;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.btn-keycode:hover,
.btn-keycode:focus {
  background-color: #5c5c5c;
  color: #ffffff;
}

/* Payment panel */
/* Flex with baseline alignment rather than two inline-blocks aligned to the
   top. Each item gets its own line box, so the 24px amount and the 18px label
   no longer union into one tall enough for both - which is what was leaving
   6px of half-leading above the amount and dropping it below the billing
   address opposite. 26px against a 24px figure is one pixel either side. */
.content-panel .pay-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  line-height: 26px;
}

.pay-amount,
.pay-total-label {
  line-height: 26px;
}

.pay-amount {
  font-size: 24px;
  font-weight: 700;
}

.pay-total-label {
  font-size: 18px;
  font-weight: 600;
}

.content-panel .pay-note {
  margin: 0 0 14px;
  line-height: 20px;
}

.content-panel .pay-test {
  margin: 0;
  font-size: 24px;
  line-height: 34px;
  color: #2f8a00;
}

.pay-actions {
  margin-top: 39px;
  line-height: 0;
}

/* Same box as .btn-checkout-step, which is what Back uses further down the
   page - the two are the only buttons on it and were a different size. */
.btn-place-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 50px;
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background-color: #17789e;
  font-family: inherit;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}

.btn-place-order:hover,
.btn-place-order:focus {
  background-color: #115d7b;
  color: #ffffff;
}

/* Disabled while there is no gateway behind it. not-allowed rather than
   default, so the pointer says why nothing happens before the click does. */
.btn-place-order:disabled,
.btn-place-order:disabled:hover,
.btn-place-order:disabled:focus {
  background-color: #b8b8b8;
  color: #ffffff;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Card form

   The two .cs-frame boxes are where Cybersource's Flex Microform mounts its
   iframes, and they are sized here rather than by the iframe: the iframe
   arrives at 100% of whatever it lands in, so the box has to hold its own
   height or the field collapses to nothing while the SDK loads.

   Both containers are rendered EMPTY. Cybersource replaces their contents when
   the script mounts, so anything put inside them is thrown away - and an input
   of our own in there would be a card number on this server, which is the one
   thing the arrangement exists to prevent.
   -------------------------------------------------------------------------- */

.cs-payment {
  max-width: 380px;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  background-color: #ffffff;
}

/* What the card form is saying: checking, accepted, or a reason it could not
   read the card. One element, two states - .cs-status-error is added when it
   is the third of those. */
.content-panel .cs-status {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 4px;
  background-color: #f2f7f2;
  font-size: 12px;
  line-height: 16px;
  color: #1d6b28;
}

.content-panel .cs-status-error {
  background-color: #fdf3f3;
  color: #8a2320;
}

/* No capture context - the panel holds the notice and nothing else, so it does
   not need the padding a form full of fields does. */
.cs-payment-down .cs-status {
  margin: 0;
}

.cs-field {
  margin-bottom: 10px;
}

.cs-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #565656;
}

/* Holds its own height: the mounted iframe fills the box, and an empty box
   before the SDK answers would otherwise be zero pixels tall. */
.cs-frame {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #666666;
  border-radius: 4px;
  background-color: #ffffff;
  overflow: hidden;
}

.cs-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Cybersource mounts its iframe into an empty container and gives it the
   flex classes below as the field's state changes. The text inside the frame
   is theirs to style - that is what the styles struct on the page is for -
   and only the frame around it can be reached from here. */
.cs-frame.flex-microform-focused {
  border-color: #910d10;
  box-shadow: 0 0 0 1px #910d10;
}

.cs-frame.flex-microform-invalid {
  border-color: #8a2320;
}

.cs-frame.flex-microform-valid {
  border-color: #1d6b28;
}

/* While createToken is out. The button is already disabled by then; this is
   what says the page has not simply stopped. */
.btn-place-order.is-busy {
  cursor: progress;
  opacity: 0.7;
}

.cs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cs-field-exp {
  flex: 1 1 190px;
}

.cs-field-cvv {
  flex: 0 1 120px;
}

.cs-exp {
  display: flex;
  gap: 8px;
}

.cs-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #666666;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #565656;
}

.cs-select:disabled {
  cursor: not-allowed;
}

/* 5px rather than 6: eight badges at 6px gaps come to 346 in a 348px panel,
   which is close enough that a rounding difference tips it onto a second line.
   wrap is kept as the backstop if the row ever grows again. */
.content-panel .cs-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
}

/* Every badge occupies the same box whatever its own proportions are, and
   object-fit keeps a file that is not 38x24 from being stretched into it. */
.cs-card {
  width: 38px;
  height: 24px;
  object-fit: contain;
}

/* "+3" when more brands are accepted than the row shows. Sized to the badges
   beside it so the row keeps one baseline. */
.cs-card-more {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 2px;
  font-size: 12px;
  color: #767676;
  cursor: default;
}

/* The card block already carries the gap the note used to leave. */
.cs-payment + .pay-actions {
  margin-top: 15px;
}

/* Key code feedback, and the discount lines above the total */
.content-panel .keycode-message {
  margin: 8px 0 0;
  font-size: 13px;
  color: #2f8a00;
}

.content-panel .pay-prepromo {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
}

.content-panel .pay-discount {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #2f8a00;
}

/* The promotion's own wording, under the discount it explains. */
.content-panel .pay-promo-note {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 18px;
  color: #565656;
}

/* Recipient bar carries the requested delivery week on the right */
.checkout-recipient-bar .requested-delivery {
  float: right;
  margin-top: 3px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.requested-week {
  font-weight: 600;
  color: #910d10;
}

/* One ordered item: thumbnail, name, price */
.order-line {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.order-thumb {
  grid-column: 1 / span 1;
  /* The 80px thumbnail is wider than its 78px column and overflows it.
     min-width: 0 stops it widening the column instead. */
  min-width: 0;
  margin: 5px 0;
}

.order-thumb img {
  display: block;
  height: 80px;
  width: auto;
  max-width: none;
}

.order-name {
  grid-column: 2 / span 8;
  padding: 0 15px;
  margin-top: 5px;
  line-height: 28px;
}

.order-name a {
  font-size: 16px;
  font-weight: 600;
  color: rgba(75, 48, 29, 1);
}

.order-price {
  grid-column: 10 / span 3;
  padding: 0 15px;
  margin-top: 5px;
  line-height: 20px;
  text-align: right;
}

.order-price-quantity {
  margin-top: 3px;
}

.order-rule {
  height: 1px;
  margin: 10px 0;
  border-top: 1px solid #aaaaaa;
}

/* Address, greeting and per-recipient totals under each item */
.order-detail {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  font-size: 14px;
}

.detail-address {
  grid-column: 1 / span 4;
  padding: 0 15px 0 8px;
}

.detail-greeting {
  grid-column: 5 / span 4;
  padding: 0 15px 0 8px;
}

.detail-totals {
  grid-column: 9 / span 4;
  padding-right: 5px;
}

.content-panel .ship-to-block {
  margin: 0;
  line-height: 20px;
}

.greeting-heading {
  margin: 0;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.content-panel .greeting-text {
  margin: 0;
  padding-bottom: 5px;
  line-height: 20px;
}

.content-panel .greeting-change-line {
  margin: 0;
  line-height: 20px;
}

.greeting-change {
  color: #910d10;
}

.recipient-totals {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 4px;
  justify-content: end;
  margin: 0 0 20px;
  text-align: right;
}

.recipient-totals dt,
.recipient-totals dd {
  margin: 0;
  padding: 3px 0;
  line-height: 20px;
  font-weight: 400;
}

.recipient-totals dd {
  font-weight: 600;
}

.recipient-totals .total-grand {
  font-size: 16px;
  line-height: 23px;
}

.recipient-totals dt.total-grand {
  font-size: 14px;
}

/* Shipping protection. Green, and the same green the page already uses. It is
   an order-level charge rather than part of the package it prints beside, so
   it deliberately reads as a separate thing from the lines around it. */
.recipient-totals .total-protect {
  color: #2f8a00;
}

@media (min-width: 768px) and (max-width: 991px) {
  .keycode-form {
    margin-bottom: 0;
  }
}

@media (max-width: 991px) {
  /* The two columns are still side by side here - they only stack at 768px -
     so the payment panel keeps its top edge level with the heading and only
     its padding flips. */
  .summary-pay {
    padding: 0 15px 0 8px;
  }

  /* Wider thumbnail column, narrower name, wider price. */
  .order-thumb {
    grid-column: 1 / span 2;
  }

  .order-name {
    grid-column: 3 / span 6;
  }

  .order-price {
    grid-column: 9 / span 4;
  }

  /* Stacked, the totals go above the address. */
  .detail-totals {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .detail-address {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .detail-greeting {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 767px) {
  .summary-bill,
  .summary-pay,
  .order-name,
  .order-price {
    grid-column: 1 / -1;
  }

  .order-thumb {
    display: none;
  }

  .checkout-recipient-bar .requested-delivery {
    display: none;
  }

  /* Smaller type for the payment panel below 768px. */
  .pay-total-label {
    font-size: 16px;
  }

  .content-panel .pay-note {
    font-size: 12px;
    line-height: 17px;
  }

  .order-price {
    margin-top: 0;
  }

  /* Stacked, the payment panel has the billing block above it rather than the
     heading beside it, so it takes a gap of its own top and bottom. */
  .summary-pay {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   24. Checkout - Order Confirmation
   ========================================================================== */

.content-panel .confirm-title {
  margin: 20px 0 10px;
  font-size: 28px;
  font-weight: 400;
  line-height: 30.8px;
  color: #910d10;
}

/* Order number on the left, print control on the right. */
.confirm-top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.confirm-details {
  grid-column: 1 / span 6;
  padding-right: 15px;
}

.confirm-print {
  grid-column: 7 / span 6;
  margin-bottom: 5px;
  padding-right: 15px;
  text-align: right;
}

/* The label is small and grey because "Order Number" is not what anybody is
   looking for - the number is. */
.content-panel .order-number {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
  color: #666666;
}

.order-number-value {
  display: block;
  margin-top: 1px;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  color: #333333;
}

.content-panel .order-placed {
  margin: 0 0 18px;
  line-height: 20px;
}

.content-panel .confirm-help {
  margin: 0;
  line-height: 20px;
}

.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 49px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #333333;
  text-align: left;
  cursor: pointer;
}

.btn-print .ico {
  font-size: 34px;
  color: #222222;
}

.btn-print:hover .btn-print-label,
.btn-print:focus .btn-print-label {
  text-decoration: underline;
}

.btn-print-label {
  max-width: 120px;
}

/* Item name is plain text here, not a link */
.order-item-name {
  font-size: 16px;
  font-weight: 600;
  color: rgba(75, 48, 29, 1);
}

/* The confirmation's payment panel has even 15px gutters, unlike step 4's */
.summary-pay.no-inset {
  padding: 0 15px;
}

.summary-pay.no-inset .pay-note {
  margin-bottom: 10px;
}

.content-panel .card-brand {
  margin: 0;
}

/* Centred, not top-aligned. The text beside it is two lines - the card and
   the name on it - and a 32px logo hung off the top of them reads as a
   mistake. Still correct when there is only one line, because the name is not
   always collected. Confirmation page only; nothing else uses this class. */
.card-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 10px;
  line-height: 20px;
}

.card-brand img {
  display: block;
  /* 4px of left padding inside a 52px box, matching .checkout-cardicon */
  width: 52px;
  height: 32px;
  padding-left: 4px;
}

/* A single right-aligned action instead of Back / Continue */
.checkout-actions.is-single {
  justify-content: flex-end;
  margin-bottom: 0;
}

/* Back and Continue are short enough to share a 170px box; "Continue Shopping"
   is not, and wrapped onto two lines inside it. Only the single-action row is
   freed to size to its own words - the paired buttons still want to match each
   other. */
.checkout-actions.is-single .btn-checkout-step {
  width: auto;
  min-width: 170px;
  padding: 8px 30px;
}

@media (max-width: 991px) {
  /* Two columns above 992px, stacked below it. */
  .confirm-details,
  .confirm-print {
    grid-column: 1 / -1;
  }

}

@media (max-width: 767px) {
  .confirm-print {
    display: none;
  }

  /* No button under this panel, so it needs no trailing gap. */
  .summary-pay.no-inset {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   25. Recipes
   ========================================================================== */

.content-panel .recipes-title {
  margin: 20px 0 10px 11px;
  font-size: 28px;
  font-weight: 400;
  line-height: 30.8px;
}

/* Three columns of recipe index beside nine of recipe. */
.recipe-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  padding-top: 15px;
}

.recipe-nav {
  grid-column: 1 / span 3;
  padding: 0 15px;
}

.recipe-body {
  grid-column: 4 / span 9;
  padding: 0 15px;
}

.recipe-nav ul {
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.recipe-nav a {
  display: block;
  padding: 3px 0;
  font-size: 14px;
  font-weight: 500;
  /* 1.4 rather than a round 20px, which accumulates 8px of drift over the
     nine links. */
  line-height: 19.6px;
  /* #767676 rather than a lighter grey: same tone, 4.54:1 on white. */
  color: #767676;
  text-transform: uppercase;
}

.recipe-nav li:first-child a {
  padding-top: 0;
}

.recipe-nav a:hover,
.recipe-nav a:focus {
  color: #4b301d;
  text-decoration: underline;
}

.recipe-nav [aria-current='page'] {
  color: #910d10;
}

.recipe-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 34.2857px;
  color: rgba(75, 48, 29, 1);
}

.content-panel .recipe-body p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 24px;
}

.ingredient-list {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 20px;
}

.content-panel .recipe-body .recipe-preheat {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.content-panel .recipe-body .recipe-method {
  margin-top: 0;
}

@media (max-width: 767px) {
  .recipe-nav,
  .recipe-body {
    grid-column: 1 / -1;
  }

}

/* ==========================================================================
   26. Statement pages (accessibility, and anything else set as headed prose)
   ========================================================================== */

.content-panel .statement-title {
  margin: 30px 0 0 11px;
  font-size: 24px;
  font-weight: 400;
  line-height: 26.4px;
}

/* flow-root so the first h2's top margin stays inside the block rather than
   collapsing out and pulling the whole statement up. */
.statement {
  display: flow-root;
  margin-top: 25px;
  padding: 0 15px;
}

.statement h2 {
  margin: 30px 0 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 17.6px;
}

.content-panel .statement p {
  margin: 0;
  line-height: 20px;
}

@media (max-width: 991px) {
  /* Below 992px the column is no longer floated, so the first heading's top
     margin collapses out and the whole block sits 30px under the title
     rather than 55px. */
  .statement {
    display: block;
    margin-top: 0;
  }
}


/* ==========================================================================
   27. Links inside text blocks
   --------------------------------------------------------------------------
   SC 1.4.1: a link sitting in a run of prose cannot be marked by colour
   alone. The brand red is 1.36:1 against the body grey, nowhere near the 3:1
   a colour-only distinction would need, so these carry an underline.
   ========================================================================== */

.content-panel p a,
.breadcrumb-trail a,
.statement p a {
  text-decoration: underline;
}

/* ==========================================================================
   28. Promo banner

   The strip above the site header, driven by the `banner` table and switched
   on and off from the admin. It renders at the very top of the page - the
   section sits at the end of this file only because appending is the change
   that cannot disturb anything above it, and nothing here competes with an
   existing rule.

   The bar's colour is an inline style on the element: it is a per-record hex
   and a stylesheet cannot know it. Everything else lives here.

   Two bars are emitted, one carrying .on-desktop and one .on-mobile, and the
   site's existing 992px pair decides which is in the layout. So these rules
   never need a media query of their own - the copy written for a phone is
   already a different string, not the same string reflowed.
   ========================================================================== */

/* The background AND the text colour arrive as an inline style on this
   element, because both are per-record values a stylesheet cannot know. The
   white here is the fallback for a row saved before the textcolor column
   existed; an inline colour on the same element outranks it. */
.site-banner {
  width: 100%;
  color: #ffffff;
}

/* The whole strip is the click target when a link is set, so the anchor is a
   block and takes the colour with it. text-decoration stays off - the bar's
   own colour is what marks it, and an underline across three phrases reads
   as three separate links. */
.site-banner-link,
.site-banner-link:hover,
.site-banner-link:focus {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* gap rather than margins between the phrases: they are set apart on a wide
   screen and simply wrap when there is not room, with no orphaned margin at
   the end of a line. The row gap is the tighter of the two, so wrapped lines
   sit closer together than the phrases do side by side. */
.site-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 40px;
  padding: 8px 15px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* On a phone the first line is the headline and takes the full width; the
   two after it share the line below, which is the shape the admin preview
   shows. */
.site-banner-inner-mobile {
  gap: 2px 12px;
  padding: 8px 12px;
}

.site-banner-inner-mobile .site-banner-line1 {
  flex: 0 0 100%;
}