/*!
 * hwt-chrome.css: the shared Happy Waggy Tails header and footer
 * (/menu/petstoremenu.html, /menu/petstorefooter.html) inside the store.
 *
 * Store pages load /store-assets/css/store.css first (it styles the shared
 * header, drawer and footer), then the store theme, then this file. The
 * store theme has its own rules for .search-form, .search-category,
 * .store-block, .skip-link and bare footer elements, and those would
 * otherwise restyle the shared chrome. This file puts the shared look back,
 * scoped to the shared chrome only. Store content is not touched.
 */

/* Headings and paragraphs in the shared chrome (store.css's bare element
   rules skip <body class="hwt-store">, so give the chrome its own). */
.hwt-header :is(h2, h3), .hwt-drawer :is(h2, h3), .hwt-footer :is(h2, h3) {
  font-family: var(--hwt-font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6em;
}
.hwt-footer h3 { font-size: 1rem; }
.hwt-footer p { margin: 0 0 1em; font-size: 0.95rem; }
.hwt-footer { padding: 0; font-family: var(--hwt-font-body); line-height: 1.65; }
.hwt-footer ul li a,
.hwt-footer ul li a:visited { font-size: 0.95rem; text-decoration: underline; }
.hwt-footer-disclosure p { font-size: 0.82rem; }
.hwt-header, .hwt-drawer { font-family: var(--hwt-font-body); line-height: 1.65; }

/* The store's "Privacy & cookies" modal button, styled as a footer link. */
.hwt-footer-linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.95rem; color: #cfe6da; text-decoration: underline;
}
.hwt-footer-linkbtn:hover, .hwt-footer-linkbtn:focus { color: var(--hwt-amber-onink); }

/* Skip link: the store theme positions it differently. */
.skip-link {
  top: -60px; left: 0; border-radius: 0; margin: 0;
  background: var(--hwt-ink); color: var(--hwt-white); font-weight: 400;
}
.skip-link:focus { top: 0; }

/* Amazon search bar in the shared header (restyled 30 Oct 2026: one rounded
   field in the logo row; mirrors store.css with enough specificity to beat
   the store theme's own .search-form rules). */
.hwt-search-bar .search-form {
  display: flex; flex-wrap: nowrap; gap: 0; flex: 1 1 340px; min-width: 0; max-width: 560px;
  margin: 0; position: static; border: 1px solid var(--hwt-border); border-radius: 999px;
  background: var(--hwt-white); overflow: hidden; box-shadow: none;
}
.hwt-search-bar .search-form:focus-within { border-color: var(--hwt-meadow); box-shadow: 0 0 0 3px rgba(74,124,89,0.18); }
.hwt-search-bar .search-form input {
  width: auto; flex: 1 1 140px; min-width: 0; color: var(--hwt-ink); outline: none; transition: none;
  font-family: var(--hwt-font-body); font-size: 0.9rem; padding: 0.5rem 0.75rem;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; height: auto;
}
.hwt-search-bar .search-form input::placeholder { color: var(--hwt-ink-soft); }
.hwt-search-bar .search-form input:focus { background: transparent; border: 0; }
.hwt-search-bar .search-form input:focus-visible,
.hwt-search-bar .search-category:focus-visible {
  outline: 3px solid var(--hwt-amber-deep); outline-offset: -3px;
}
.hwt-search-bar .search-form button {
  position: static; transform: none; width: auto; flex: none; height: auto;
  font-family: var(--hwt-font-heading); font-weight: 700; font-size: 0.88rem; line-height: normal;
  background: var(--hwt-meadow); color: var(--hwt-white); border: none;
  border-radius: 0; padding: 0.5rem 1.05rem; box-shadow: none;
}
.hwt-search-bar .search-form button:hover { background: var(--hwt-meadow-deep); color: var(--hwt-white); }
.hwt-search-bar .search-category {
  font-family: var(--hwt-font-body); font-size: 0.9rem; font-weight: 400;
  padding: 0.5rem 0.75rem; border: 0; border-right: 1px solid var(--hwt-border);
  border-radius: 0; background: var(--hwt-paper); color: var(--hwt-ink);
  flex: 0 1 150px; min-width: 0; height: auto; box-shadow: none;
}
.hwt-search-bar .search-category:focus { background: var(--hwt-paper); }
@media (max-width: 600px) {
  .hwt-search-bar .search-category { display: none; }
}

/* Amazon store selector next to the search bar (light version). */
.hwt-search-bar .store-block { margin-left: 0; font-size: 0.8rem; }
.hwt-search-bar .store-block .gstore-indicator {
  background: var(--hwt-paper); border: 1px solid var(--hwt-border); color: var(--hwt-ink-soft);
}
.hwt-search-bar .store-block .gstore-label { color: var(--hwt-ink-soft); }
.hwt-search-bar .store-block .gstore-change-btn { background: var(--hwt-white); color: var(--hwt-meadow-deep); border: 1px solid var(--hwt-border); }
.hwt-search-bar .store-block .gstore-change-btn:hover { background: var(--hwt-sky-soft); }

/* Nav, drawer groups and logo in the shared header: keep the store theme's
   bare button, summary, ul and svg rules off them. */
.hwt-header .hwt-logo, .hwt-drawer .hwt-logo { color: var(--hwt-ink); text-decoration: none; }
.hwt-header .hwt-nav-list { list-style: none; }
.hwt-header .hwt-nav-shop, .hwt-header .hwt-nav-shop:visited { color: var(--hwt-white); }
.hwt-drawer .hwt-drawer-group > summary { color: var(--hwt-ink); }
.hwt-footer-inner ul { list-style: none; padding: 0; }

/* The slim store bar under the shared header (store home, themes,
   departments drawer). */
.store-subnav .logo-wrap a.logo { white-space: nowrap; }

/* store.css also styles .search-category and .search-form button (for the
   shared search bar); give the store's own in-page search forms their
   original fonts back. */
main .search-category,
main .search-form button { font-family: revert; }

/* The store's own footer sat flush against the content. */
.hwt-store .hwt-footer { margin-top: 0; }
.hwt-search-bar .store-block .gstore-indicator { width: auto; margin-left: auto; }