/* Storefront chrome: header, footer, shell — mirrors getbookie2026 public web */

:root {
  --gb-header-mobile-h: 56px;
  --gb-header-desktop-h: 80px;
  --gb-content-max: 1536px;
}

html, body {
  background: var(--gb-color-background);
  color: var(--gb-color-text);
}

body {
  min-height: 100vh;
}

.gb-shell__content {
  padding-top: var(--gb-header-mobile-h);
}

@media (min-width: 768px) {
  .gb-shell__content {
    padding-top: var(--gb-header-desktop-h);
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .gb-shell__content {
    padding-top: 64px;
  }
}

/* —— Header —— */
.gb-header {
  position: relative;
  z-index: 50;
}

.gb-header__mobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  height: var(--gb-header-mobile-h);
  padding: 8px 16px 0;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  background: var(--gb-color-primary);
}

.gb-header__mobile-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gb-header__mobile-left,
.gb-header__mobile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gb-header__mobile-left {
  min-width: 0;
  gap: 16px;
}

.gb-header__menu-toggle {
  position: relative;
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gb-header__burger {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
}

.gb-header__burger span {
  position: absolute;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: #000;
  transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
}

.gb-header__burger span:nth-child(1) { top: 0; }
.gb-header__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.gb-header__burger span:nth-child(3) { bottom: 0; }

.gb-header__logo-link {
  display: block;
  overflow: hidden;
  line-height: 0;
  transition: transform 150ms ease;
}

.gb-header__logo-link:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .gb-header__logo-link { transition: none; }
  .gb-header__logo-link:hover { transform: none; }
}

.gb-header__logo-link--mobile {
  width: 126px;
  height: 40px;
}

.gb-header__logo-link--mobile img {
  width: 126px;
  height: 40px;
  max-width: none;
}

/*
 * 320px phones cannot hold the menu, full 126px wordmark and all three
 * signed-in actions without shrinking the clipped logo link. Keep the same
 * wordmark and action order, but use its smaller intrinsic presentation.
 */
@media (max-width: 359px) {
  .gb-header__mobile-left { gap: 8px; }
  .gb-header__mobile-actions { gap: 4px; }

  .gb-header__logo-link--mobile {
    width: 108px;
    height: 36px;
    flex: 0 0 108px;
  }

  .gb-header__logo-link--mobile img {
    width: 108px;
    height: auto;
  }

  .gb-header__mobile-inner:has(.gb-header__mobile-actions > a[href="/login"]) .gb-header__logo-link--mobile {
    width: 92px;
    flex-basis: 92px;
  }

  .gb-header__mobile-inner:has(.gb-header__mobile-actions > a[href="/login"]) .gb-header__logo-link--mobile img {
    width: 92px;
  }

  .gb-header__mobile-actions > a[href="/login"][data-gb-button] {
    padding-inline: 8px;
    font-size: 0.875rem;
  }
}

.gb-header__login {
  font-family: var(--gb-font-brand);
  border-color: #fff !important;
  background: transparent !important;
  color: #000 !important;
}

.gb-header__search .gb-search-input__field {
  font-weight: 400;
}

/* Icon-only header controls (cart / search / member) — getbookie2026 size-10 / size-8 */
.gb-header__icon-btn {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  cursor: pointer;
  transition: opacity 150ms ease;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
}

.gb-header__icon-btn:hover { opacity: 0.8; }

.gb-header__icon-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 8px;
}

.gb-header__icon-btn-img {
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
  pointer-events: none;
}

/* Storefront menu visuals live in shared GDS Dropdown variants. */

/* Badge on cart icon (getbookie2026 danger pill) */
.gb-header__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 1;
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gb-color-danger);
  color: var(--gb-color-danger-foreground);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.gb-header__cart-count[hidden] {
  display: none !important;
}

@media (max-width: 992px) {
  .gb-header__desktop .gb-header__icon-btn,
  .gb-header__desktop .gb-header__icon-btn-img {
    width: 32px;
    height: 32px;
  }

  .gb-header__desktop .gb-header__icon-btn {
    flex-basis: 32px;
  }

  .gb-header__desktop .gb-header__cart-count {
    top: -3px;
    right: -3px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    font-size: 8px;
  }
}

@media (max-width: 767px) {
  .gb-header__mobile .gb-header__icon-btn,
  .gb-header__mobile .gb-header__icon-btn-img {
    width: 32px;
    height: 32px;
  }

  .gb-header__mobile .gb-header__icon-btn {
    flex-basis: 32px;
  }

  .gb-header__mobile .gb-header__cart-count {
    top: -3px;
    right: -3px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    font-size: 8px;
  }
}

.gb-header__desktop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: none;
  height: var(--gb-header-desktop-h);
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  background: var(--gb-color-primary);
}

.gb-header__desktop-inner {
  display: flex;
  width: min(100%, var(--gb-content-max));
  height: 100%;
  align-items: center;
  gap: 32px;
  margin-inline: auto;
  padding-inline: 40px;
}

.gb-header__logo-full {
  display: block;
  width: 152px;
  height: 48px;
  max-width: none;
}

.gb-header__logo-mark {
  display: none;
  width: auto;
  height: 40px;
}

.gb-header__search-cluster {
  display: flex;
  min-width: 320px;
  flex: 1;
  align-items: center;
  gap: 12px;
}

/* Shop CTA uses GDS secondary button; only layout visibility is app-owned */
.gb-header__shop-btn {
  display: none;
  flex-shrink: 0;
}

/* Layout shell for the shared GDS search input. */
.gb-header__search {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  overflow: visible;
}

/* Search form fills the shell; suggestions panel positions against it. */
.gb-header__search .gb-search-input {
  flex: 1;
}

/* Filter chip sits inside the white search shell */
.gb-header__filter-btn {
  height: 100% !important;
  flex-shrink: 0;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.gb-header__search .gb-search-input {
  min-width: 0;
}

/* The suggestion panel and its loading state are GbDropdownPane; the app only
   owns the rows inside it. */
.gb-header__suggestion-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  color: var(--gb-color-text-subtle);
  font-size: 1rem;
}
.gb-header__suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px;
  color: var(--gb-color-text);
  text-align: start;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.gb-header__suggestion:hover,
.gb-header__suggestion:focus-visible { background: color-mix(in srgb, var(--gb-color-tertiary) 70%, #fff); outline: 0; }
/* Cover thumb: image only (blank book has no title overlay). */
.gb-header__suggestion-image {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border-radius: 6px;
  background: #e4e4e4;
}
.gb-header__suggestion-image.gb-product-cover,
.gb-header__suggestion-image .gb-product-cover__photo,
.gb-header__suggestion-image .gb-product-cover__blank,
.gb-header__suggestion-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gb-header__suggestion-image .gb-product-cover__blank span { display: none !important; }
.gb-header__suggestion-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.gb-header__suggestion-code { overflow: hidden; color: var(--gb-color-text-subtle); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.gb-header__suggestion-name { display: -webkit-box; overflow: hidden; font-size: 1rem; font-weight: 500; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.gb-header__suggestion-price {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 1rem;
  line-height: 1.2;
}
.gb-header__suggestion-list-price {
  color: var(--gb-color-text-subtle);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: line-through;
}
.gb-header__suggestion-sale-price {
  color: var(--gb-color-primary-text);
  font-size: 1rem;
  font-weight: 600;
}

.gb-header__desktop-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .gb-header__mobile { display: none; }
  .gb-header__desktop { display: block; }
}

@media (min-width: 768px) and (max-width: 992px) {
  .gb-header__desktop { height: 64px; }
  .gb-header__desktop-inner {
    gap: 16px;
    padding-inline: 24px;
  }
  .gb-header__logo-full { display: none; }
  .gb-header__logo-mark { display: block; }
  .gb-header__search-cluster { min-width: 280px; gap: 8px; }
  .gb-header__search { height: 32px; }
  .gb-header__search .gb-search-input__clear { width: 24px; height: 24px; font-size: 1rem; }
  .gb-header__search .gb-search-input__submit-icon .gb-icon { width: 1rem; height: 1rem; }
  .gb-header__filter-btn .gb-button__icon { width: 24px; height: 24px; }
}

@media (min-width: 1280px) {
  .gb-header__shop-btn { display: inline-flex; }
  .gb-header__filter-btn { display: none; }
}

/* Menu and suggestion-panel chrome live in GDS: GbDropdown and GbDropdownPane. */

/* Catalog / category filter drawer — slides in from the left (Sheet side=left) */
.gb-catalog-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.gb-catalog-drawer[hidden] {
  display: none !important;
}
.gb-catalog-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 35%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.gb-catalog-drawer.is-open .gb-catalog-drawer__backdrop {
  opacity: 1;
}
.gb-catalog-drawer:not(.is-open) .gb-catalog-drawer__backdrop {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
}
.gb-catalog-drawer__panel {
  position: relative;
  width: min(100%, 340px);
  height: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: 8px 0 24px color-mix(in srgb, #000 12%, transparent);
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.gb-catalog-drawer.is-open .gb-catalog-drawer__panel {
  transform: translate3d(0, 0, 0);
}
.gb-catalog-drawer:not(.is-open) .gb-catalog-drawer__panel {
  transition-duration: 0.2s;
  transition-timing-function: ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .gb-catalog-drawer__backdrop,
  .gb-catalog-drawer__panel {
    transition: none;
  }
}
.gb-catalog-drawer__content { display: flex; height: 100%; flex-direction: column; }
.gb-catalog-drawer__loading { padding: 24px 16px; color: var(--gb-color-text-subtle); }
.gb-catalog-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--gb-color-gray-light); }
.gb-catalog-drawer__header h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.gb-catalog-drawer__header button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--gb-color-secondary); cursor: pointer; font-size: 1.75rem; line-height: 1; }
.gb-catalog-drawer__body { flex: 1; overflow-y: auto; padding: 16px; }
.gb-catalog-drawer__body .gb-filter-panel { padding: 0; }

/* —— Footer —— */
.gb-footer {
  background: var(--gb-color-secondary);
  color: #fff;
}

.gb-footer__inner {
  display: flex;
  width: min(100%, var(--gb-content-max));
  flex-direction: column;
  gap: 36px;
  margin-inline: auto;
  padding: 48px 24px 64px;
}

.gb-footer__cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border-radius: 26px;
  background: var(--gb-color-primary);
  color: var(--gb-color-secondary);
}

.gb-footer__cta h2 {
  margin: 0;
  font-family: var(--gb-font-brand);
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.2;
}

.gb-footer__cta p {
  max-width: 42rem;
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.75;
}

/* Footer CTA reuses GDS secondary button; only pill shape is layout-specific */
.gb-footer__cta-btn {
  width: fit-content;
  border-radius: 999px !important;
  padding-inline: 24px !important;
}

.gb-footer__columns {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

.gb-footer__logo {
  display: block;
  height: 48px;
  width: auto;
}

.gb-footer__lead {
  max-width: 24rem;
  margin: 20px 0 0;
  color: color-mix(in srgb, #fff 72%, transparent);
  font-size: 1rem;
  line-height: 1.75;
}

.gb-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  color: color-mix(in srgb, #fff 72%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
}

.gb-footer__contact {
  display: flex;
  gap: 12px;
}

.gb-footer__contact-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gb-color-primary);
}

.gb-footer__contact-line { display: block; }

.gb-footer__contact-note {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, #fff 60%, transparent);
}

.gb-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gb-footer__nav h3,
.gb-footer__bottom-row h3 {
  margin: 0;
  font-family: var(--gb-font-brand);
  font-size: 1.125rem;
  font-weight: 600;
}

.gb-footer__nav a {
  width: fit-content;
  color: color-mix(in srgb, #fff 72%, transparent);
  font-size: 1rem;
  line-height: 1.75;
  text-decoration: none;
  transition: color 150ms ease;
}

.gb-footer__nav a:hover { color: var(--gb-color-primary); }

.gb-footer__bottom-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gb-footer__payment {
  max-width: 36rem;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
}

.gb-footer__payment img {
  display: block;
  width: 100%;
  height: auto;
}

.gb-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.gb-footer__social a {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  transition: transform 150ms ease;
}

.gb-footer__social a:hover { transform: translateY(-2px); }

.gb-footer__social img {
  width: 44px;
  height: 44px;
}

.gb-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
  color: color-mix(in srgb, #fff 60%, transparent);
  font-size: 0.875rem;
}

.gb-footer__brand,
.gb-footer__nav,
.gb-footer__legal {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .gb-footer__inner { padding-block: 64px; }
  .gb-footer__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
  }
  .gb-footer__bottom-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .gb-footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .gb-footer__columns {
    flex-direction: row;
    gap: 32px;
  }
  .gb-footer__brand { flex: 1.1 1 260px; }
  .gb-footer__nav { flex: 0.7 1 0; min-width: 0; }
}

/* Product card shared chrome */
.gb-product-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gb-color-primary);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-color-surface);
}

.gb-product-card--clearance {
  overflow: visible;
  border-color: var(--gb-color-primary-soft);
}

.gb-product-card__media-wrap { position: relative; }

.gb-product-card__labels {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
}

.gb-product-card__label {
  display: inline-flex;
  height: 20px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.gb-product-card__label--tertiary {
  background: var(--gb-color-tertiary);
  color: var(--gb-color-secondary);
}

.gb-product-card__label--danger {
  background: var(--gb-color-danger);
  color: var(--gb-color-danger-foreground);
}

.gb-product-card__media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.gb-product-card__media {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--gb-color-surface-strongest);
}

.gb-product-card--clearance .gb-product-card__media {
  overflow: visible;
}

.gb-product-card__media .gb-product-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gb-product-card__media .gb-product-cover__blank,
.gb-product-card__media .gb-product-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.gb-product-card__clearance-ribbon {
  position: absolute;
  top: 0;
  left: -17px;
  z-index: 10;
  width: 100px;
  pointer-events: none;
  user-select: none;
}

.gb-product-card__new-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 92px;
  pointer-events: none;
}

.gb-product-card__new-badge .gb-merchandising-badge {
  width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  .gb-product-card__new-badge { width: 104px; }
}

.gb-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.gb-product-card__code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gb-product-card__code-badge {
  display: inline-flex;
  height: 20px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gb-color-gray);
  color: var(--gb-color-secondary);
  font-size: 12px;
  font-weight: 700;
}

.gb-product-card__code {
  overflow: hidden;
  color: var(--gb-color-gray-dark);
  font-size: 14px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-product-card__title-link {
  color: inherit;
  text-decoration: none;
}

.gb-product-card__title {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  margin: 0;
  font-family: var(--gb-font-brand);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gb-product-card__category {
  overflow: hidden;
  margin-bottom: 4px;
  color: var(--gb-color-text-muted);
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-product-card__footer {
  display: flex;
  min-height: 68px;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.gb-product-card__price-block {
  display: flex;
  min-height: 52px;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.gb-product-card__list-price {
  overflow: hidden;
  color: var(--gb-color-danger);
  font-size: 12px;
  line-height: 1.15;
  text-decoration: line-through;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gb-product-card__price {
  font-size: var(--gb-type-heading-4-size);
  font-weight: 600;
  line-height: 1;
}

.gb-product-card__price--clearance { color: var(--gb-color-danger); }

.gb-product-card__cart {
  width: 100%;
  text-decoration: none;
}

.gb-product-card__cart.is-added .gb-product-card__cart-icon,
.gb-product-card__cart:disabled .gb-product-card__cart-icon {
  opacity: 0.45;
  filter: grayscale(1);
}

.gb-product-card__cart-icon {
  width: 20px;
  height: 20px;
}

@media (min-width: 1024px) {
  .gb-product-card__footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
  }
  .gb-product-card__cart {
    width: 112px;
    flex-shrink: 0;
  }
}
.gb-account-profile__avatar-region{display:contents}