/*!
 * ANP Market Day — site chrome (announcement bar, utility strip, header, footer).
 * Ported from the approved concept's stylesheet (concepts/concept-a.css); every class carries an
 * `amdc-` prefix so nothing collides with the theme.
 */

/* Every top-level chrome element is its own root: each one sits in a different place in the
   document, so each must be listed here or its variables resolve to nothing — which reads as a
   transparent background and unsized icons. Add new chrome roots to all three lists below. */
.amdc-promo, .amdc-util, .amdc-hdr, .amdc-foot, .amdc-drawer, .amdc-scrim, .amdc-bar {
  --beige: #EFE3C6; --paper: #F8F2E3; --tan: #DDC289; --tan-2: #E8D6A8;
  --brown: #6B4B2B; --brown-85: rgba(107, 75, 43, .85);
  --green: #009639; --green-dk: #0A6B2E; --green-ink: #0E4A25; --pumpkin: #D48B2E;
  --charcoal: #1A1617; --ink-2: #4A3F36; --line: rgba(107, 75, 43, .28); --white: #FFFDF8;
  --slab: "Zilla Slab", "Museo Slab", Georgia, serif;
  --sans: "Figtree", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --kraft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .29 0 0 0 0 .17 0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-sizing: border-box;
}
.amdc-promo *, .amdc-util *, .amdc-hdr *, .amdc-foot *, .amdc-drawer *, .amdc-bar * { box-sizing: border-box; }
.amdc-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.amdc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.amdc-hdr .amd-ic, .amdc-foot .amd-ic, .amdc-util .amd-ic, .amdc-drawer .amd-ic, .amdc-bar .amd-ic
  { width: 1em; height: 1em; font-size: inherit; flex: none; }

.amdc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 16px 28px; font: 700 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .25s; }
.amdc-btn-green { background: var(--green); color: #fff; }
.amdc-btn-green:hover { background: var(--brown); color: #fff; }

/* ---------- announcement + utility ---------- */
.amdc-promo { background: var(--brown); color: #F6EBD2; font: 600 13.5px/1.3 var(--sans); text-align: center; padding: 10px 16px; letter-spacing: .01em; }
.amdc-promo b { color: #FFDD55; font-weight: 700; }
.amdc-promo a { color: #fff; }
.amdc-util { background: var(--tan); font: 600 12.5px/1 var(--sans); color: var(--brown); }
.amdc-util .amdc-wrap { display: flex; justify-content: space-between; align-items: center; padding-block: 8px; gap: 16px; }
.amdc-util .amdc-tagline { letter-spacing: .2em; text-transform: uppercase; }
.amdc-util span { display: inline-flex; align-items: center; gap: 6px; }
.amdc-util a { color: inherit; text-decoration: none; }
.amdc-util a:hover { text-decoration: underline; }

/* ---------- header ---------- */
.amdc-hdr { background: var(--paper) var(--kraft); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; }
.amdc-hdr .amdc-wrap { display: flex; align-items: center; gap: 28px; padding-block: 10px; }
.amdc-logo { display: inline-flex; align-items: center; text-decoration: none; }
.amdc-logo img { height: 62px; width: auto; display: block; }
.amdc-logo-text { font: 700 22px/1 var(--slab); color: var(--green-ink); }

.amdc-nav { display: flex; margin-left: 12px; }
.amdc-nav .amdc-menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.amdc-nav .amdc-menu li { position: relative; }
.amdc-nav a { color: var(--charcoal); text-decoration: none; font: 600 15px/1 var(--sans); padding: 8px 0; border-bottom: 2px solid transparent; display: block; }
.amdc-nav a:hover, .amdc-nav .current-menu-item > a, .amdc-nav .current-menu-ancestor > a { border-color: var(--green); }
/* One level of children, as a plain drop-down. */
.amdc-nav .sub-menu { position: absolute; left: -14px; top: 100%; display: none; min-width: 220px; list-style: none; margin: 0; padding: 8px 0; background: var(--white); border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 18px 30px -22px rgba(60, 40, 20, .6); z-index: 5; }
.amdc-nav li:hover > .sub-menu, .amdc-nav li:focus-within > .sub-menu { display: block; }
.amdc-nav .sub-menu a { padding: 9px 18px; border: 0; font-weight: 600; }
.amdc-nav .sub-menu a:hover { background: var(--paper); color: var(--green-dk); }

.amdc-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.amdc-tool { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--brown); background: transparent; border: 0; position: relative; font-size: 22px; cursor: pointer; text-decoration: none; }
.amdc-tool:hover { background: var(--tan-2); }
.amdc-dot { position: absolute; top: 4px; right: 2px; background: var(--green); color: #fff; font: 700 11px/18px var(--sans); min-width: 18px; border-radius: 9px; text-align: center; }
.amdc-dot[hidden] { display: none; }
.amdc-findstore { display: inline-flex; gap: 8px; align-items: center; font: 700 14px/1 var(--sans); color: var(--green-dk); text-decoration: none; padding: 11px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--green); }
.amdc-findstore:hover { background: var(--green); color: #fff; }
.amdc-findstore .amd-ic { font-size: 16px; }

.amdc-searchbar { border-top: 1px solid var(--line); background: var(--paper); }
.amdc-searchbar[hidden] { display: none; }
.amdc-searchbar form { display: flex; gap: 10px; padding-block: 14px; }
.amdc-searchbar input { flex: 1; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 0; font: 500 16px var(--sans); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.amdc-searchbar .amdc-btn { padding: 14px 26px; }

.amdc-burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.amdc-burger span { display: block; height: 2px; background: var(--brown); border-radius: 2px; margin: 4px 0; transition: transform .2s, opacity .2s; }
.amdc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.amdc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.amdc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- footer ---------- */
.amdc-foot { background: var(--green-ink); color: #E9E1CB; margin-top: 0; font: 400 16px/1.6 var(--sans); }
.amdc-foot .amdc-wrap { padding-block: 64px 28px; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr) 1.4fr; gap: 36px; }
.amdc-foot h2 { font: 700 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--tan); margin: 6px 0 16px; }
.amdc-foot a { color: #E9E1CB; text-decoration: none; display: block; padding: 5px 0; font-size: 15px; }
.amdc-foot a:hover { color: #fff; text-decoration: underline; }
.amdc-flogo img { width: 150px; height: auto; }
.amdc-flogo p { font-size: 14px; margin-top: 14px; }
.amdc-fine { grid-column: 1 / -1; border-top: 1px solid rgba(233, 225, 203, .18); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #BFB59C; }
.amdc-fine-links { display: flex; flex-wrap: wrap; gap: 18px; }
.amdc-fine a { display: inline; padding: 0; font-size: 13px; color: #BFB59C; }
.amdc-news input { width: 100%; padding: 14px 16px; border-radius: 999px; border: 0; font: 500 15px var(--sans); margin: 4px 0 10px; }
.amdc-news p { font-size: 14px; margin: 0 0 10px; }
.amdc-news .amdc-btn { width: 100%; }

@media (max-width: 1100px) {
  .amdc-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper) var(--kraft); border-bottom: 1px solid var(--line); padding: 8px 24px 18px; box-shadow: 0 18px 30px -24px rgba(60, 40, 20, .7); }
  .amdc-nav[hidden] { display: none; }
  .amdc-nav .amdc-menu { flex-direction: column; gap: 0; }
  .amdc-nav .amdc-menu > li { border-bottom: 1px solid var(--line); }
  .amdc-nav .amdc-menu > li:last-child { border-bottom: 0; }
  .amdc-nav a { padding: 14px 0; border-bottom: 0; }
  .amdc-nav .sub-menu { position: static; display: block; box-shadow: none; background: transparent; padding: 0 0 8px 14px; min-width: 0; }
  .amdc-nav .sub-menu a { padding: 8px 0; }
  .amdc-burger { display: block; order: 3; margin-left: auto; }
  .amdc-hdr .amdc-wrap { position: relative; gap: 12px; }
  .amdc-tools { order: 4; margin-left: 0; }
  .amdc-foot .amdc-wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .amdc-wrap { padding-inline: 16px; }
  .amdc-util { display: none; }
  .amdc-logo img { height: 48px; }
  .amdc-findstore { display: none; }
  .amdc-nav { padding-inline: 16px; }
  .amdc-foot .amdc-wrap { grid-template-columns: 1fr; }
  .amdc-searchbar form { flex-direction: column; }
}

/* ---------- fixes after review ---------- */
/* Shop sits beside Find a store as the one filled button in the header. */
.amdc-shop { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font: 700 14px/1 var(--sans); text-decoration: none; padding: 12px 22px; border-radius: 999px; transition: background .25s; }
.amdc-shop:hover, .amdc-shop:focus-visible { background: var(--brown); color: #fff; }

/* The theme styles links and form fields globally, which bled into the tools and the search
   drawer: an underline on hover, and the theme's grey input. Stated explicitly here. */
.amdc-tool { transition: background .2s; -webkit-tap-highlight-color: transparent; }
.amdc-tool:hover, .amdc-tool:focus-visible { background: var(--tan-2); color: var(--brown); text-decoration: none; }
.amdc-tool:focus-visible { outline: 3px solid var(--pumpkin); outline-offset: 2px; }
.amdc-tool .amd-ic { pointer-events: none; }
.amdc-findstore:focus-visible { outline: 3px solid var(--pumpkin); outline-offset: 2px; }

.amdc-searchbar input,
.amdc-searchbar input[type="search"] { background: var(--white); color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--line); border: 0; -webkit-appearance: none; appearance: none; }
.amdc-searchbar input:focus { outline: 3px solid var(--pumpkin); outline-offset: 2px; }
.amdc-searchbar input::placeholder { color: var(--ink-2); opacity: .75; }

/* Search suggestions: grouped by what they are (products, guides, articles), with a picture and
   price where there is one, and a link through to the full results page. */
.amdc-sugg { position: relative; background: var(--white); border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -28px rgba(60, 40, 20, .8); margin-bottom: 16px; padding: 8px; max-height: min(64vh, 520px); overflow-y: auto; }
.amdc-sugg[hidden] { display: none; }
.amdc-sugg-head { margin: 10px 10px 4px; font: 800 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brown); }
.amdc-sugg-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--charcoal); }
.amdc-sugg-item:hover, .amdc-sugg-item[aria-selected="true"] { background: var(--paper); }
.amdc-sugg-item img, .amdc-sugg-noimg { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: var(--paper); display: block; }
.amdc-sugg-name { font: 600 15px/1.3 var(--sans); }
.amdc-sugg-price { font: 700 14px/1 var(--sans); color: var(--green-dk); white-space: nowrap; }
.amdc-sugg-none { margin: 0; padding: 18px 12px; font-size: 14px; color: var(--ink-2); }
.amdc-sugg-all { display: block; margin-top: 6px; padding: 12px; border-top: 1px solid var(--line); font: 700 14px/1 var(--sans); color: var(--green-dk); text-decoration: none; text-align: center; border-radius: 0 0 12px 12px; }
.amdc-sugg-all:hover { background: var(--paper); }

/* The theme pads every <button> (10px 20px), which pushed the search icon 9px off-centre inside
   its hover circle while the link-based tools sat correctly. Reset the box these tools own. */
.amdc-tool, .amdc-burger { padding: 0; margin: 0; line-height: 1; border: 0; appearance: none; -webkit-appearance: none; }
.amdc-burger { padding: 10px; }
.amdc-tool > svg, .amdc-tool > .amd-ic { display: block; }

/* Promo-strip links took the theme's hover colour, which is near-black on the brown strip. */
.amdc-promo a { color: #FFDD55; text-decoration: underline; text-underline-offset: 3px; }
.amdc-promo a:hover, .amdc-promo a:focus-visible { color: #fff; text-decoration: underline; }
.amdc-util a:hover, .amdc-util a:focus-visible { color: var(--green-ink); }

/* Page headers: the theme's global hero autoplays a background video on every inner page.
   Jason asked for no more video, so the market illustration stands in — same hero, same layout,
   nothing moving. */
.global-page-hero video, .global-page-hero .background-video { display: none !important; }
.global-page-hero {
  background-image: linear-gradient(180deg, rgba(14, 74, 37, .55), rgba(14, 74, 37, .78)),
    url("../img/market-scene-v2.webp");
  background-size: cover;
  background-position: 50% 22%;
  background-repeat: no-repeat;
}

/* The drop-down is rounded but its items are square, so the first and last hover fills showed
   square corners poking through. Clip the panel (belt) and round those two items (braces). */
.amdc-nav .sub-menu { overflow: hidden; }
.amdc-nav .sub-menu li:first-child > a { border-radius: 10px 10px 0 0; }
.amdc-nav .sub-menu li:last-child > a { border-radius: 0 0 10px 10px; }
.amdc-nav .sub-menu li:only-child > a { border-radius: 10px; }

/* ---------- the menu button ----------------------------------------------------------------
   It was picking up the theme's grey button hover and sitting to the left of the tools. It now
   matches the search/account/cart buttons beside it — same 44px disc, same tan hover — and its
   three bars fold into a cross when the menu opens.
   -------------------------------------------------------------------------------------------- */
.amdc-burger {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: transparent; color: var(--brown); cursor: pointer;
  display: none; place-items: center; position: relative;
  flex: 0 0 44px; /* the header is a flex row and was squeezing the disc to an oval */
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.amdc-burger:hover, .amdc-burger:focus-visible { background: var(--tan-2); }
.amdc-burger:focus-visible { outline: 3px solid var(--pumpkin); outline-offset: 2px; }
.amdc-burger:active { transform: scale(.94); }
.amdc-burger span {
  position: absolute; left: 12px; width: 20px; height: 2.5px; margin: 0;
  background: currentColor; border-radius: 2px;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .16s linear, width .28s ease;
}
.amdc-burger span:nth-child(1) { top: 15px; }
.amdc-burger span:nth-child(2) { top: 21px; width: 14px; }
.amdc-burger span:nth-child(3) { top: 27px; }
/* The short middle bar grows to full width on hover, so the button feels alive before it is used. */
.amdc-burger:hover span:nth-child(2) { width: 20px; }
.amdc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.amdc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.amdc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  /* Last in the row: logo, then the tools, then the menu button hard against the right edge. */
  .amdc-burger { display: grid; order: 5; margin-left: 4px; }
  .amdc-tools { order: 4; margin-left: auto; }
}

/* ============================================================================================
   MOBILE DRAWER
   On a phone this is the navigation, so it carries what someone actually needs: search, the four
   things they tap, the bags themselves, the menu, and a phone number.
   ============================================================================================ */
.amdc-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(26, 22, 23, .5);
  opacity: 0; transition: opacity .3s ease; backdrop-filter: blur(2px);
}
.amdc-scrim[hidden] { display: none; }
.amdc-scrim.is-on { opacity: 1; }

.amdc-drawer {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw); max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--paper) var(--kraft);
  box-shadow: -24px 0 60px -30px rgba(26, 22, 23, .7);
  transform: translateX(100%); transition: transform .34s cubic-bezier(.2, .8, .25, 1);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.amdc-drawer[hidden] { display: none; }
.amdc-drawer.is-on { transform: translateX(0); }

.amdc-drawer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.amdc-drawer-logo { display: inline-flex; flex: none; }
.amdc-drawer-logo img { height: 46px; width: auto; max-width: none; display: block; }
.amdc-drawer-x {
  flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--brown); cursor: pointer; position: relative;
  transition: background .2s;
}
.amdc-drawer-x:hover, .amdc-drawer-x:focus-visible { background: var(--tan-2); }
.amdc-drawer-x span {
  position: absolute; left: 11px; top: 19px; width: 18px; height: 2.5px;
  background: currentColor; border-radius: 2px;
}
.amdc-drawer-x span:first-child { transform: rotate(45deg); }
.amdc-drawer-x span:last-child { transform: rotate(-45deg); }

.amdc-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 28px; -webkit-overflow-scrolling: touch; }

.amdc-drawer-search { position: relative; display: block; margin-bottom: 16px; }
.amdc-drawer-search .amd-ic { position: absolute; left: 17px; top: 50%; margin-top: -10px; transform: none; font-size: 20px; color: var(--brown); pointer-events: none; z-index: 1; }
.amdc-drawer-search input {
  width: 100%; height: 50px; padding: 0 16px 0 46px; border: 0; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 16px var(--sans); color: var(--charcoal); appearance: none; -webkit-appearance: none;
}
.amdc-drawer-search input:focus { outline: 3px solid var(--pumpkin); outline-offset: 2px; }

/* The four things people tap. Shop is the filled one. */
.amdc-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.amdc-quick-tile {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 14px; border-radius: 16px; text-decoration: none;
  background: var(--white); box-shadow: 0 0 0 1px var(--line);
  font: 700 15px/1.1 var(--sans); color: var(--charcoal);
}
.amdc-quick-tile .amd-ic { font-size: 22px; color: var(--brown); flex: none; }
.amdc-quick-tile:active { transform: scale(.98); }
.amdc-quick-shop { background: var(--green); color: #fff; box-shadow: none; }
.amdc-quick-shop .amd-ic { color: #fff; }
.amdc-quick-dot {
  position: absolute; top: 8px; right: 10px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--green); color: #fff;
  font: 700 11px/20px var(--sans); text-align: center;
}

.amdc-drawer-sec { margin-top: 22px; }
.amdc-drawer-h { margin: 0 0 10px; font: 800 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }

/* A shelf of real bags, scrolling sideways, so it costs one row of height. */
.amdc-shelf { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
.amdc-shelf::-webkit-scrollbar { display: none; }
.amdc-shelf-card { flex: 0 0 132px; scroll-snap-align: start; background: var(--white); border-radius: 16px; box-shadow: 0 0 0 1px var(--line); padding: 10px; text-decoration: none; color: var(--charcoal); }
.amdc-shelf-shot { display: grid; place-items: center; height: 92px; border-radius: 10px; background: var(--paper); margin-bottom: 8px; overflow: hidden; }
.amdc-shelf-shot img { max-height: 84px; width: auto; max-width: 100%; object-fit: contain; }
.amdc-shelf-card small { display: block; font: 800 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brown); margin-bottom: 3px; }
.amdc-shelf-card b { font: 600 13.5px/1.2 var(--slab); color: var(--green-ink); display: block;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The menu itself: big tap targets, children indented under their parent. */
.amdc-drawer-nav { margin-top: 22px; }
.amdc-dmenu, .amdc-dmenu .sub-menu { list-style: none; margin: 0; padding: 0; }
.amdc-dmenu > li { border-bottom: 1px solid var(--line); }
.amdc-dmenu > li:first-child { border-top: 1px solid var(--line); }
.amdc-dmenu a { display: block; padding: 15px 2px; font: 600 17px/1.2 var(--slab); color: var(--green-ink); text-decoration: none; }
.amdc-dmenu a:active { color: var(--green-dk); }
.amdc-dmenu .sub-menu { padding: 0 0 10px 14px; border-left: 2px solid var(--tan-2); margin-left: 2px; }
.amdc-dmenu .sub-menu a { padding: 10px 2px; font: 600 15px/1.2 var(--sans); color: var(--ink-2); }

.amdc-drawer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.amdc-drawer-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 700 13.5px/1 var(--sans); color: var(--brown); text-decoration: none; }
.amdc-drawer-chips i { font-style: normal; font-weight: 600; color: var(--ink-2); }

.amdc-drawer-call { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: var(--green-ink); color: #F6EBD2; text-decoration: none; }
.amdc-drawer-call .amd-ic { font-size: 22px; flex: none; }
.amdc-drawer-call span { display: flex; flex-direction: column; font: 700 15px/1.3 var(--sans); }
.amdc-drawer-call b { font: 800 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tan); margin-bottom: 4px; }
.amdc-drawer-foot { margin: 20px 2px 0; font: 600 10.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brown); opacity: .75; }

body.amdc-locked { overflow: hidden; }

/* ---------- header at small sizes ---------- */
/* The logo is a fixed-ratio oval; flex was squashing it at narrow widths. */
.amdc-logo { flex: none; }
.amdc-logo img { width: auto; max-width: none; object-fit: contain; }

@media (max-width: 1100px) {
  .amdc-nav { display: none !important; } /* the drawer replaces it */
  .amdc-tools { gap: 2px; }
  .amdc-hdr .amdc-wrap { gap: 10px; }
}
@media (max-width: 560px) {
  .amdc-tools { gap: 0; }
  .amdc-tool { width: 40px; height: 40px; font-size: 20px; }
  .amdc-burger { flex-basis: 40px; width: 40px; height: 40px; }
  .amdc-burger span { left: 10px; width: 20px; }
  .amdc-shop { padding: 11px 16px; font-size: 13.5px; }
  .amdc-logo img { height: 44px; }
}
@media (max-width: 380px) {
  .amdc-hdr .amdc-wrap { gap: 6px; padding-inline: 12px; }
  .amdc-logo img { height: 40px; }
  .amdc-shop { padding: 10px 13px; font-size: 13px; }
  .amdc-tool { width: 36px; height: 36px; font-size: 19px; }
  .amdc-burger { flex-basis: 36px; width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .amdc-drawer, .amdc-scrim, .amdc-burger span { transition: none !important; }
}

/* The side cart ships parked off-screen to the right as an in-flow block, which adds about
   480px of horizontal scroll on a phone. `overflow-x: clip` trims it without creating a scroll
   container, so the sticky header keeps working. */
.checkoutwc { overflow-x: clip; }

/* ============================================================================================
   MOBILE ACTION BAR
   Replaces the theme's old bottom bar. It shares the bottom of the screen with the Birdeye chat
   bubble, so the bubble is lifted to sit above it rather than on top of a button.
   ============================================================================================ */
.amdc-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--paper) var(--kraft);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -24px rgba(26, 22, 23, .8);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  flex-direction: row; align-items: stretch; flex-wrap: nowrap;
}
.amdc-bar-item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 8px; border: 0; background: transparent; cursor: pointer;
  text-decoration: none; color: var(--brown);
  font: 700 10.5px/1.1 var(--sans); letter-spacing: .02em;
  position: relative; -webkit-tap-highlight-color: transparent;
}
.amdc-bar-item .amd-ic { font-size: 22px; }
.amdc-bar-item span { font-size: 11px; font-weight: 700; }
/* Shop is the one action worth colouring. */
.amdc-bar-shop { color: var(--green-dk); }
.amdc-bar-shop .amd-ic { color: var(--green); }
.amdc-bar-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.amdc-bar-item:active { color: var(--green-dk); }
.amdc-bar-item:focus-visible { outline: 3px solid var(--pumpkin); outline-offset: -3px; border-radius: 12px; }
.amdc-bar-dot {
  position: absolute; top: 4px; left: 50%; margin-left: 4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--green); color: #fff; font: 700 10px/17px var(--sans); text-align: center;
}
.amdc-bar-dot[hidden] { display: none; }

@media (max-width: 1100px) {
  .amdc-bar { display: flex; }
  /* Nothing should end up hidden behind the bar. */
  /* The theme sets body padding too, so this needs the chrome class to win. */
  body.amd-chrome { padding-bottom: calc(var(--amdc-bar-h, 58px) + env(safe-area-inset-bottom, 0px)); }
  /* The drawer covers the screen, so the bar underneath it would only get in the way. */
  body.amdc-locked .amdc-bar { display: none; }

  /* The chat bubble lives in the bottom-right corner, so the bar keeps that corner clear and the
     two sit side by side — the same arrangement as rocksolidexteriors.com. Reserving the space is
     steadier than pushing the widget around, because the widget positions itself with !important
     and changes height when it opens. */
  .amdc-bar { padding-right: var(--amdc-chat-gap, 88px); }
}

/* The theme styles inputs globally, and its padding was winning over the drawer's search field —
   which put the magnifier on top of the placeholder. */
.amdc-drawer .amdc-drawer-search input[type="search"] {
  padding: 0 16px 0 46px;
}

/* Social profiles under the footer logo. */
.amdc-social { display: flex; gap: 10px; margin-top: 16px; }
.amdc-social a {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; color: #E9E1CB; font-size: 20px;
  box-shadow: inset 0 0 0 1.5px rgba(233, 225, 203, .35);
  transition: background .2s, color .2s, box-shadow .2s;
}
.amdc-social a:hover, .amdc-social a:focus-visible { background: var(--tan); color: var(--green-ink); box-shadow: none; text-decoration: none; }
.amdc-social a span { font: 700 11px/1 var(--sans); }
.amdc-social .amd-ic { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------------------------
   Every bag, as pictures, under the menu.
   The scrolling shelf sat above the menu and pushed it down the screen, and only showed three
   bags at a time. This fits as many as the width allows and wraps, so any recipe is two taps:
   open the menu, tap the bag.
   -------------------------------------------------------------------------------------------- */
.amdc-drawer-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.amdc-drawer-h a {
  font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-dk); text-decoration: underline; text-underline-offset: 3px;
}

.amdc-bags {
  display: grid;
  /* auto-fit stretches the tracks to fill the row, so the right edge lines up with the left. */
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 6px;
}
.amdc-bag {
  display: grid; place-items: center; aspect-ratio: 1;
  padding: 4px; border-radius: 12px; background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .18s ease, transform .18s ease;
}
.amdc-bag img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.amdc-bag:hover, .amdc-bag:focus-visible { box-shadow: 0 0 0 2px var(--green); transform: translateY(-2px); }
.amdc-bag:active { transform: scale(.96); }

/* The drawer body already pads the sides; the old shelf pulled itself out to the edge and the
   first and last cards ended up touching it. */
.amdc-shelf { margin-inline: 0; padding-inline: 0; }

/* --------------------------------------------------------------------------------------------
   Page headers.
   The theme's global hero put small, dark, theme-styled text straight onto the illustration —
   barely readable and nothing like the rest of the site. The band now has a proper height, a
   gradient that guarantees contrast, and the heading is set in the brand's slab at a size that
   reads as a page title.
   -------------------------------------------------------------------------------------------- */
.global-page-hero {
  position: relative;
  min-height: clamp(210px, 25vw, 330px);
  display: grid;
  align-items: center;
  isolation: isolate;
}
/* A stronger wash than the background alone, so white type always has something to sit on. */
.global-page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 74, 37, .34) 0%, rgba(14, 74, 37, .62) 55%, rgba(14, 74, 37, .82) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, .28), transparent 70%);
}
.global-page-hero .background-video-content {
  position: relative; z-index: 1;
  width: min(1240px, 92vw); margin-inline: auto;
  padding-block: clamp(40px, 6vw, 78px) clamp(56px, 8vw, 104px);
  text-align: center;
}
.global-page-hero .gb-headline,
.global-page-hero h1,
.global-page-hero h2 {
  margin: 0;
  font-family: "Zilla Slab", "Museo Slab", Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(10, 40, 20, .45);
}
/* A short rule under the title, the same gold as the utility strip. */
.global-page-hero .background-video-content::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: #DDC289;
}

@media (max-width: 640px) {
  .global-page-hero { min-height: 170px; }
  .global-page-hero .background-video-content { padding-block: 30px 46px; }
}

/* The "see all" button is an inline-flex box, so auto margins did nothing. */
.amd-home .amdh-lb-all { display: flex; width: fit-content; margin-inline: auto; }

/* --------------------------------------------------------------------------------------------
   Logged-in admins get WordPress's toolbar, which is fixed to the top of the window. Everything
   of ours that pins to the top had to move down by its height, or the toolbar covers it — on a
   phone that was hiding the drawer's own close button, leaving no way out of the menu.

   WordPress uses 32px above 782px wide and 46px below it.
   -------------------------------------------------------------------------------------------- */
body.admin-bar { --amdc-adminbar: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --amdc-adminbar: 46px; }
}

body.admin-bar .amdc-hdr { top: calc(var(--amdc-adminbar, 0px) + env(safe-area-inset-top, 0px)); }
body.admin-bar .amdc-drawer,
body.admin-bar .amdc-scrim { top: var(--amdc-adminbar, 0px); }

/* The toolbar sits above everything else WordPress renders; ours must stay below it so its own
   menus stay clickable. */
body.admin-bar .amdc-drawer { z-index: 61; }
body.admin-bar .amdc-scrim { z-index: 60; }

/* Sticky panels further down the page measure from under the header, which has now moved. */
body.admin-bar .amd-sf-mapcard {
  top: calc(var(--amdc-hdr-h, 0px) + var(--amdc-adminbar, 0px) + 24px);
  max-height: calc(100vh - var(--amdc-hdr-h, 0px) - var(--amdc-adminbar, 0px) - 48px);
}

/* The first footer column is the brand block: logo, line, social — centred as a group. */
.amdc-flogo { text-align: center; display: flex; flex-direction: column; align-items: center; }
.amdc-flogo img { margin-inline: auto; }
.amdc-social { justify-content: center; }
@media (min-width: 1101px) {
  /* On the wide grid it reads better aligned with the columns beside it. */
  .amdc-flogo { text-align: left; align-items: flex-start; }
  .amdc-flogo img { margin-inline: 0; }
  .amdc-social { justify-content: flex-start; }
}

/* Four items in the space left of the chat bubble; tighten the labels so nothing truncates on a
   narrow phone. */
@media (max-width: 420px) {
  .amdc-bar { --amdc-chat-gap: 76px; }
  .amdc-bar-item { padding-inline: 2px; }
  .amdc-bar-item span { font-size: 10.5px; }
  .amdc-bar-item .amd-ic { font-size: 21px; }
}

/* Search sits in the drawer's header row, between the logo and the close button — it was taking a
   whole row of its own below them. */
.amdc-drawer-top { gap: 10px; }
.amdc-drawer-top .amdc-drawer-search { flex: 1 1 auto; min-width: 0; margin: 0; }
.amdc-drawer-top .amdc-drawer-search input { height: 42px; padding: 0 12px 0 38px; font-size: 15px; }
.amdc-drawer-top .amdc-drawer-search .amd-ic { left: 13px; font-size: 18px; margin-top: -9px; }
.amdc-drawer-top .amdc-drawer-logo img { height: 40px; }
@media (max-width: 380px) {
  .amdc-drawer-top .amdc-drawer-logo img { height: 34px; }
  .amdc-drawer-top .amdc-drawer-search input { padding-left: 34px; }
}

/* While the drawer is open it owns the screen: the chat bubble would otherwise float over it and
   sit on top of the menu's own links. */
body.amdc-locked [id^="bf-revz-widget"],
body.amdc-locked .bf-revz-widget { display: none !important; }