/*
 * replica-layout.css (area A: layout, announcement bar, header, footer, cart drawer shell, localization).
 *
 * Almost everything in these partials is styled by the theme's compiled CSS (base.css / styles.css / overflow-list.css)
 * and by the tokens in theme-inline.css (which already carries the store's .ub-loc* selector styles and the
 * .header__underlay submenu colour). This file only holds:
 *   1. the per-instance <style> blocks copied from raw/analysis/inline-styles-home.css, with the random section ids
 *      replaced by stable ones (collection links row of the header group);
 *   2. small replica-only rules for markup that the live store renders through JS-only web components
 *      (account link, cart drawer empty/filled states, search modal before its dialog opens, newsletter success).
 */

/* ===== header group: collection links row (ai_gen_block_8e265ed, section 1777037066489b2f11 on the live home) ===== */
.ai-collection-list-ub {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0px;
  background-color: #ffffff;
  border-radius: 0px;
}

.ai-collection-list__content-ub {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-collection-list__heading-ub {
  margin: 0 0 20px;
  color: #000000;
  text-align: center;
}

.ai-collection-list__items-ub {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.ai-collection-list__item-ub {
  margin: 0;
}

.ai-collection-list__link-ub {
  display: block;
  padding: 12px;
  background-color: #f5f5f5;
  color: #000000;
  font-size: 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.ai-collection-list__link-ub:hover {
  background-color: #000000;
  color: #ffffff;
}

.ai-collection-list__empty-ub {
  padding: 20px;
  text-align: center;
  color: #999;
  font-style: italic;
}

@media screen and (max-width: 749px) {
  .ai-collection-list__items-ub {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ai-collection-list__items-ub::-webkit-scrollbar {
    display: none;
  }

  .ai-collection-list__link-ub {
    white-space: nowrap;
  }
}

/* ===== header: account link (inside the live <shopify-account> element, which styles.css sizes 44x44 while undefined) ===== */
.account-button__link {
  min-width: var(--minimum-touch-target, 44px);
  height: var(--minimum-touch-target, 44px);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
  color: inherit;
  text-decoration: none;
}

.account-button__link:hover {
  color: inherit;
}

/* Mobile header grid safety: the left search button (next to the hamburger) belongs to cell leftB. styles.css only
   sends it there when .header__columns contains <shopify-account> (rendered above); this rule (specificity 1,2,0 vs
   the theme's 0,2,1) keeps it in leftB even if that element were removed, so it is never drawn over the globe. */
#header-component .header__columns .search-action--hidden-on-menu {
  grid-area: leftB;
}

/* The cart trigger is an <a> in the replica (plain link to /cart without JS); the live store uses a <button>. */
#cart-link.header-actions__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Hamburger summary: the live header-drawer.js toggles aria-expanded; keep the marker hidden like Horizon. */
.menu-drawer-container > summary::-webkit-details-marker {
  display: none;
}

.menu-drawer-container > summary {
  list-style: none;
  cursor: pointer;
}

/* ===== cart drawer: empty / filled states (the live store morphs the whole dialog; the replica keeps both and toggles) ===== */
.cart-drawer__state[hidden] {
  display: none !important;
}

.cart-drawer__state {
  display: contents;
}

#cart-drawer-overlay {
  display: none;
}

.cart-drawer__dialog .cart-items__media-image[src=""] {
  visibility: hidden;
}

.cart-drawer__dialog .compare-at-price[hidden] {
  display: none;
}

/* ===== footer: local-only newsletter success line (nothing is sent; the live form posts to Shopify) ===== */
.email-signup__success {
  margin: var(--margin-xs, 8px) 0 0;
  font-size: var(--font-size--sm, 0.875rem);
}

.email-signup__success[hidden] {
  display: none;
}

/* ===== search modal: the <dialog> keeps the Horizon dialog-modal animation; hide the native backdrop flash on mobile ===== */
.search-modal__content:not([open]) {
  display: none;
}