/**
 * Brand style for every page of the Hummingbird theme (category, product, cart, account...).
 * Loaded only when "Apply brand style to all pages" is on (Homepage Management > Header & Design).
 * Uses the same CSS variables as front.css.
 */

/* Page, fonts and Bootstrap tokens */
:root {
  --bs-body-bg: var(--shb-page, #faf2e5);
  --bs-tertiary-bg: var(--shb-soft, #f6ead6);
  --bs-secondary-bg: var(--shb-soft, #f6ead6);
  --bs-body-color: var(--shb-text, #3d2b24);
  --bs-primary: var(--shb-heading, #6b101a);
  --bs-primary-rgb: 107, 16, 26;
  --bs-link-color: var(--shb-heading, #6b101a);
  --bs-link-color-rgb: 107, 16, 26;
  --bs-link-hover-color: var(--shb-accent, #b88b4a);
  --bs-link-hover-color-rgb: 184, 139, 74;
  --bs-border-color: var(--shb-border, #ead9bd);
  --bs-border-radius: 10px;
  --bs-body-font-family: var(--shb-font-body);
}
body { background: var(--shb-page, #faf2e5); color: var(--shb-text, #3d2b24); font-family: var(--shb-font-body); }
h1, h2, h3, .h1, .h2, .h3, .page-title-section h1, .section-title { font-family: var(--shb-font-heading); font-weight: 600; color: var(--shb-heading, #6b101a); letter-spacing: .005em; }
h1, .h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.form-control:focus, .form-select:focus { border-color: var(--shb-accent, #b88b4a); box-shadow: 0 0 0 .2rem rgba(184, 139, 74, .25); }
::selection { background: rgba(184, 139, 74, .3); }

/* Header */
#header { background: var(--shb-header-bg, #6b101a); color: var(--shb-header-text, #fff7e8); }
#header .header-bottom { background: var(--shb-header-bg, #6b101a); border-bottom: 1px solid var(--shb-header-border, #b88b4a); }
#header .header-banner { background: var(--shb-announce-bg, #4b0911); }
#header a, #header .header-block__action-btn { color: var(--shb-header-text, #fff7e8); }
#header .header-block__icon, #header .material-icons { color: var(--shb-header-icon, #f1d39a); }
/* Hover tint and search field derive from the header text color, so they work on light and dark headers */
#header .header-block__action-btn:hover { background: color-mix(in srgb, var(--shb-header-text, #6b101a) 8%, transparent); color: var(--shb-header-icon, #6b101a); }
#header .header-block__badge { background: var(--shb-header-icon, #6b101a); color: var(--shb-header-bg, #faf2e5); }
#header .ps-searchbar__input, #header .js-search-input {
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--shb-header-text, #6b101a) 25%, transparent);
  background: color-mix(in srgb, var(--shb-header-text, #6b101a) 5%, transparent); color: var(--shb-header-text, #6b101a);
}
#header .ps-searchbar__input:focus { border-color: var(--shb-accent, #b88b4a); box-shadow: 0 0 0 3px rgba(184, 139, 74, .2); }
#header .ps-searchbar__input::placeholder { color: color-mix(in srgb, var(--shb-header-text, #6b101a) 60%, transparent); }
#header .ps-searchbar__magnifier { color: var(--shb-header-icon, #6b101a); }

/* Buttons */
.btn { border-radius: var(--shb-btn-radius, 6px); font-weight: 500; letter-spacing: .02em; }
.btn-primary {
  --bs-btn-bg: var(--shb-btn-primary-bg, #6b101a); --bs-btn-border-color: var(--shb-btn-primary-bg, #6b101a); --bs-btn-color: var(--shb-btn-primary-text, #fff);
  --bs-btn-hover-bg: var(--shb-btn-primary-hover-bg, #4b0911); --bs-btn-hover-border-color: var(--shb-btn-primary-hover-bg, #4b0911); --bs-btn-hover-color: var(--shb-btn-primary-hover-text, #fff);
  --bs-btn-active-bg: var(--shb-btn-primary-hover-bg, #4b0911); --bs-btn-active-border-color: var(--shb-btn-primary-hover-bg, #4b0911);
  --bs-btn-disabled-bg: var(--shb-btn-primary-bg, #6b101a); --bs-btn-disabled-border-color: var(--shb-btn-primary-bg, #6b101a);
}
.btn-secondary {
  --bs-btn-bg: var(--shb-btn-secondary-bg, #c9a063); --bs-btn-border-color: var(--shb-btn-secondary-bg, #c9a063); --bs-btn-color: var(--shb-btn-secondary-text, #3d1a12);
  --bs-btn-hover-bg: var(--shb-btn-secondary-hover-bg, #e2c088); --bs-btn-hover-border-color: var(--shb-btn-secondary-hover-bg, #e2c088); --bs-btn-hover-color: var(--shb-btn-secondary-hover-text, #3d1a12);
}
.btn-outline-primary {
  --bs-btn-color: var(--shb-btn-outline-text, #6b101a); --bs-btn-border-color: var(--shb-btn-outline-text, #6b101a);
  --bs-btn-hover-bg: var(--shb-btn-outline-hover-bg, #6b101a); --bs-btn-hover-border-color: var(--shb-btn-outline-hover-bg, #6b101a); --bs-btn-hover-color: var(--shb-btn-outline-hover-text, #fff);
  --bs-btn-active-bg: var(--shb-btn-outline-hover-bg, #6b101a); --bs-btn-active-color: var(--shb-btn-outline-hover-text, #fff);
}
/* Add to cart buttons keep their own colors */
.product-miniature__add, .product__add-to-cart-button, .cart-detailed__actions .btn-primary {
  --bs-btn-bg: var(--shb-btn-cart-bg, #6b101a); --bs-btn-border-color: var(--shb-btn-cart-bg, #6b101a); --bs-btn-color: var(--shb-btn-cart-text, #fff);
  --bs-btn-hover-bg: var(--shb-btn-cart-hover-bg, #4b0911); --bs-btn-hover-border-color: var(--shb-btn-cart-hover-bg, #4b0911); --bs-btn-hover-color: var(--shb-btn-cart-hover-text, #f6dfb4);
  --bs-btn-active-bg: var(--shb-btn-cart-hover-bg, #4b0911);
}

/* Product cards */
.product-miniature__inner { overflow: hidden; border: 1px solid var(--shb-border, #ead9bd); border-radius: 14px; background: var(--shb-surface, #fff); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.product-miniature:hover .product-miniature__inner { transform: translateY(-4px); border-color: var(--shb-accent, #b88b4a); box-shadow: 0 18px 40px rgba(75, 9, 17, .14); }
.product-miniature__top { border-radius: 0; background: var(--shb-soft, #f6ead6); }
.product-miniature__bottom { padding: 14px 14px 16px; }
.product-miniature__title { font: 600 1.15rem/1.25 var(--shb-font-heading); color: var(--shb-text, #3d2b24); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-miniature__title:hover { color: var(--shb-heading, #6b101a); }
.product-miniature__price { font-size: 1.15rem; font-weight: 600; color: var(--shb-heading, #6b101a); }
.product-miniature__regular-price { color: var(--shb-muted, #7a6558); }
.product-miniature__form { flex-wrap: wrap; gap: 8px; }
.product-miniature__form { flex-wrap: nowrap; }
.product-miniature__form .quantity-button { flex: 0 0 auto; }
.product-miniature__form .quantity-button .form-control { width: 2.4rem; padding-inline: 0; text-align: center; }
.product-miniature__form .quantity-button .btn { padding-inline: .45rem; }
.product-miniature__add { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding-inline: .6rem; white-space: nowrap; font-size: .88rem; }
@container product-miniature (max-width: 230px) {
  .product-miniature__form { flex-wrap: wrap; }
  .product-miniature__form .quantity-button, .product-miniature__add { flex: 1 1 100%; }
}
.product-miniature__add .product-miniature__add-text { display: inline; }
.product-miniature .badge, .product-flags .badge { border-radius: 999px; padding: .4em .8em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.product-flags .badge.discount, .product-flags .badge.on-sale { background: var(--shb-heading, #6b101a); color: #fff; }
.product-flags .badge.new { background: var(--shb-accent, #b88b4a); color: #fff; }
.product-miniature__quickview-button { background: var(--shb-surface, #fff); color: var(--shb-heading, #6b101a); }

/* Category and listing pages */
.page-title-section h1 { margin-bottom: .5rem; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--shb-accent, #b88b4a); font-size: .85rem; }
.breadcrumb a { color: var(--shb-muted, #7a6558); text-decoration: none; }
.breadcrumb a:hover { color: var(--shb-heading, #6b101a); }
.category__description { color: var(--shb-muted, #7a6558); }
.subcategory, .subcategories__item a { border-radius: 999px; }
#js-product-list-top, .products-sort-order .btn { border-radius: 10px; }
.facet__title, .search-filters__title { font-family: var(--shb-font-heading); font-weight: 600; color: var(--shb-heading, #6b101a); }

/* Product page */
.product__name, .product h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.product__current-price, .product__prices .price { color: var(--shb-heading, #6b101a); font-weight: 600; }
.product__add-to-cart-button { min-height: 48px; padding-inline: 2rem; }
.nav-tabs .nav-link.active { border-bottom-color: var(--shb-accent, #b88b4a); color: var(--shb-heading, #6b101a); }

/* Cards, alerts and accordions used across account / checkout */
.card { border-color: var(--shb-border, #ead9bd); border-radius: 14px; }
.accordion-button:not(.collapsed) { background: var(--shb-soft, #f6ead6); color: var(--shb-heading, #6b101a); }

/* Theme footer (when the Homepage Management footer is off) */
#footer { background: var(--shb-footer-bg, #3f070e); color: var(--shb-footer-text, #ead7c0); }
#footer .footer__before, #footer .footer__main, #footer .footer__main-top, #footer .footer__main-bottom { background: transparent; color: inherit; }
#footer a { color: var(--shb-footer-link, #fff7e8); }
#footer a:hover { color: var(--shb-footer-hover, #e2c088); }
#footer .footer-block__title, #footer .h4 { color: var(--shb-footer-accent, #c9a063); font-family: var(--shb-font-heading); }
#footer:has(.shb-footer) { padding: 0; }