/* Decalshouse — theme overrides (loaded after theme.css) */

/* =========================================================================
   Header — Wishlist icon colour
   Force a neutral colour on every link state so the heart never inherits a
   red / visited / module-default colour. !important + multiple selectors to
   beat any later rule that targets the same element.
   ========================================================================= */
#_desktop_ps_wishlist .header-block__action-btn,
#_desktop_ps_wishlist .header-block__action-btn:link,
#_desktop_ps_wishlist .header-block__action-btn:visited,
#_mobile_ps_wishlist .header-block__action-btn,
#_mobile_ps_wishlist .header-block__action-btn:link,
#_mobile_ps_wishlist .header-block__action-btn:visited {
  color: var(--bs-body-color) !important;
}
#_desktop_ps_wishlist .header-block__action-btn:hover,
#_desktop_ps_wishlist .header-block__action-btn:focus,
#_mobile_ps_wishlist .header-block__action-btn:hover,
#_mobile_ps_wishlist .header-block__action-btn:focus {
  color: var(--bs-link-hover-color) !important;
}
#_desktop_ps_wishlist .header-block__icon,
#_desktop_ps_wishlist .material-icons,
#_mobile_ps_wishlist .header-block__icon,
#_mobile_ps_wishlist .material-icons {
  color: inherit !important;
}

/* =========================================================================
   Header — "Contact us" button (desktop top-nav + mobile offcanvas)
   ========================================================================= */
#_desktop_ps_contactinfo .ps-contactinfo a,
#_mobile_ps_contactinfo .ps-contactinfo a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--bs-body-color);
  background: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#_desktop_ps_contactinfo .ps-contactinfo a::before,
#_mobile_ps_contactinfo .ps-contactinfo a::before {
  content: "\E0BE"; /* material-icons "mail_outline" */
  font-family: 'Material Icons';
  font-size: 16px;
  line-height: 1;
}
#_desktop_ps_contactinfo .ps-contactinfo .ps-contactinfo__phone::before,
#_mobile_ps_contactinfo .ps-contactinfo .ps-contactinfo__phone::before {
  content: "\E0CD"; /* material-icons "phone" */
}

#_desktop_ps_contactinfo .ps-contactinfo a:hover,
#_mobile_ps_contactinfo .ps-contactinfo a:hover {
  color: #fff;
  background: var(--bs-primary, #2a9d8f);
  border-color: var(--bs-primary, #2a9d8f);
}

/* =========================================================================
   Mobile offcanvas — push Contact us to the TOP of the menu
   The offcanvas is a flex column; reorder children so the bottom
   "additionnals" panel (which contains Contact us + lang/currency) sits
   directly under the header instead of at the bottom of the sidebar.
   ========================================================================= */
.ps-mainmenu.offcanvas .offcanvas-header { order: 0; }
.ps-mainmenu.offcanvas .ps-mainmenu__additionnals { order: 1; }
.ps-mainmenu.offcanvas .ps-mainmenu__mobile { order: 2; }

.ps-mainmenu__additionnals {
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid #e6e8eb;
  padding: 12px 16px !important;
  /* keep it from claiming all remaining height like a normal offcanvas-body */
  flex: 0 0 auto !important;
}
.ps-mainmenu__additionnals #_mobile_ps_contactinfo {
  flex: 1 1 100%;
}
.ps-mainmenu__additionnals #_mobile_ps_contactinfo .ps-contactinfo a {
  width: 100%;
  justify-content: center;
  padding: 12px 16px;
  font-size: 14px;
  color: #fff;
  background: var(--bs-primary, #2a9d8f);
  border-color: var(--bs-primary, #2a9d8f);
}
.ps-mainmenu__additionnals #_mobile_ps_contactinfo .ps-contactinfo a:hover {
  background: #228b7e;
  border-color: #228b7e;
}

/* =========================================================================
   Header — Desktop search bar relocated into top row
   A small inline script in head.tpl moves #_desktop_ps_searchbar into
   .header-top__right. These rules make it sit cleanly next to the existing
   Wishlist / Sign in / Cart blocks and shrink to fit.
   ========================================================================= */
@media (min-width: 768px) {
  .header-top__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
  }
  .header-top__right > * {
    flex: 0 0 auto;
  }
  .header-top__search {
    display: flex !important;
    flex: 1 1 22rem;
    max-width: 28rem;
    min-width: 0;
    margin-right: auto;
  }
  .header-top__search .ps-searchbar {
    width: 100%;
    min-width: 0;
    margin-block: 0;
  }
  .header-top__search .ps-searchbar__input {
    padding-block: 0.375rem;
    font-size: 0.875rem;
    border-radius: 999px;
  }
  /* Dropdown stays anchored to the input even after the move */
  .header-top__search .ps-searchbar__dropdown {
    right: 0;
    left: auto;
  }
  /* Bottom row no longer needs to host the search — let nav center vertically */
  .header-bottom__row {
    align-items: center;
  }
}

/* =========================================================================
   Header — Desktop main menu polish
   Stops the 6 categories from wrapping onto a second row, tightens the
   chrome, and gives each item a modern rounded pill hover. The original
   theme uses `flex-wrap: wrap` + 1.25rem vertical padding which forces a
   second line on standard laptop widths.
   ========================================================================= */
@media (min-width: 992px) {
  .ps-mainmenu--desktop .ps-mainmenu__tree {
    flex-wrap: nowrap;
    gap: 0.125rem;
    align-items: center;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree > li {
    align-items: center;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bs-body-color);
    white-space: nowrap;
    border-radius: 0.5rem;
    transition: background-color .15s ease, color .15s ease;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-link:hover,
  .ps-mainmenu--desktop .ps-mainmenu__tree-link:focus {
    background-color: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-link-hover-color);
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link {
    color: var(--bs-primary, #2a9d8f);
    background-color: rgba(42, 157, 143, 0.08);
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle {
    padding: 0.5rem 0.25rem;
  }
  /* Let the search shrink so logo + nav + search share one row */
  .header-bottom .ps-searchbar {
    min-width: 14rem;
  }
}
@media (min-width: 1400px) {
  .header-bottom .ps-searchbar {
    min-width: 18rem;
  }
}

/* =========================================================================
   Header — Desktop submenu (anchored compact panel)
   The theme's submenu is built as a full-width mega-panel with a left column
   of subcategories and a right column of featured items. Most categories
   here only populate the left column, leaving a huge empty area that reads
   as broken. Re-style as a compact, rounded dropdown anchored under its
   parent nav item — the pattern used by Apple, Stripe, Linear, GitHub.
   ========================================================================= */
@media (min-width: 992px) {
  /* Anchor the dropdown to the parent menu item, not the page */
  .ps-mainmenu--desktop .ps-mainmenu__tree > li {
    position: relative;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree > li .submenu {
    right: auto;
    left: 0;
    /* IMPORTANT: the theme's JS sets inline `top: <px>` based on the li's
       offset to its *offsetParent*. Now that <li> is positioned, that math
       overshoots and drops the panel below the row, leaving a hover-killing
       gap. Force the panel back to the bottom of the li with !important. */
    top: 100% !important;
    width: max-content;
    min-width: 16rem;
    max-width: 22rem;
    margin-top: 0;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.04);
    overflow: visible;
  }
  /* Invisible hover bridge — sits above the visible panel and inside the li,
     so any sub-pixel gap can't trigger mouseleave on the parent <li>. */
  .ps-mainmenu--desktop .ps-mainmenu__tree > li .submenu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    pointer-events: auto;
  }
  /* Neutralize the bootstrap container/row inside the dropdown so the panel
     hugs its content instead of forcing the page grid */
  .ps-mainmenu--desktop .submenu .container,
  .ps-mainmenu--desktop .submenu .container-sm,
  .ps-mainmenu--desktop .submenu .container-md,
  .ps-mainmenu--desktop .submenu .container-lg,
  .ps-mainmenu--desktop .submenu .container-xl,
  .ps-mainmenu--desktop .submenu .container-xxl,
  .ps-mainmenu--desktop .submenu .container-fluid {
    max-width: none;
    padding: 0;
    margin: 0;
  }
  .ps-mainmenu--desktop .submenu .submenu__row,
  .ps-mainmenu--desktop .submenu .row {
    margin: 0;
    flex-wrap: nowrap;
  }
  .ps-mainmenu--desktop .submenu__left {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 0.5rem;
    border-right: none;
    border-inline-end: none;
  }
  .ps-mainmenu--desktop .submenu__left-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--bs-body-color);
    border-radius: 0.5rem;
    transition: background-color .15s ease, color .15s ease;
  }
  .ps-mainmenu--desktop .submenu__left-item:hover,
  .ps-mainmenu--desktop .submenu__left-item:focus {
    background-color: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-link-hover-color);
  }
  .ps-mainmenu--desktop .submenu__left-item.active {
    color: var(--bs-primary, #2a9d8f);
    background-color: rgba(42, 157, 143, 0.08);
  }
  /* Hide the right column when it has no real content so the panel shrinks */
  .ps-mainmenu--desktop .submenu__right:empty,
  .ps-mainmenu--desktop .submenu:has(.submenu__right-items:empty) .submenu__right,
  .ps-mainmenu--desktop .submenu:not(:has(.submenu__right-items .menu-item)) .submenu__right {
    display: none;
  }
  /* When the right column DOES have items, expand the panel and switch to
     directory styling. Single rule covers every category — sparse (1 item)
     or dense (20+) — by letting the grid auto-pack and the panel shrink. */
  .ps-mainmenu--desktop .ps-mainmenu__tree > li .submenu:has(.submenu__right-items .menu-item) {
    width: auto;
    min-width: 44rem;
    max-width: min(72rem, calc(100vw - 2rem));
  }
  .ps-mainmenu--desktop .submenu:has(.submenu__right-items .menu-item) .submenu__left {
    width: 15rem;
    flex: 0 0 15rem;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--bs-border-color);
  }
  .ps-mainmenu--desktop .submenu:has(.submenu__right-items .menu-item) .submenu__left-item {
    position: relative;
    padding-right: 1.75rem;
  }
  .ps-mainmenu--desktop .submenu:has(.submenu__right-items .menu-item) .submenu__left-item.active {
    font-weight: 600;
  }
  /* Chevron on the active left tab so the "this tab → that list" link is visual */
  .ps-mainmenu--desktop .submenu:has(.submenu__right-items .menu-item) .submenu__left-item.active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.625rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-top: 0.125rem solid currentColor;
    border-right: 0.125rem solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.7;
  }
  /* Right column — compact directory of links. Auto-fit columns + 2-line
     wrap cap = always tidy regardless of label length or item count. */
  .ps-mainmenu--desktop .submenu__right {
    padding: 0.75rem 0.875rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .ps-mainmenu--desktop .submenu__right-items {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) !important;
    row-gap: 0.125rem !important;
    column-gap: 0.5rem !important;
    align-content: start !important;
    justify-content: start !important;
  }
  /* Each right-column entry is a uniform pill-link. min-height keeps single-
     line and two-line items sitting on the same visual rhythm; line-clamp
     caps wrap at 2 lines so no label is ever truncated mid-word. */
  .ps-mainmenu--desktop .submenu__right .menu-item__group--nochild .menu-item__group-main-item,
  .ps-mainmenu--desktop .submenu__right .menu-item__group--child .menu-item__group-main-item {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
    margin-bottom: 0;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: normal;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: background-color .15s ease, color .15s ease;
  }
  .ps-mainmenu--desktop .submenu__right .menu-item__group-main-item:hover,
  .ps-mainmenu--desktop .submenu__right .menu-item__group-main-item:focus {
    background-color: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-link-hover-color);
  }
  /* Children of a group (rare): smaller, lighter, indented */
  .ps-mainmenu--desktop .submenu__right .menu-item__group--child .menu-item {
    min-width: 0;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    border-radius: 0.375rem;
  }
  .ps-mainmenu--desktop .submenu__right .menu-item__group--child .menu-item:hover {
    background-color: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-link-hover-color);
  }
}
@media (min-width: 992px) {
  /* Keep the dropdown from spilling off the right edge of viewport for the
     last menu item ("Countries & Flags") */
  .ps-mainmenu--desktop .ps-mainmenu__tree > li:last-child .submenu {
    right: 0;
    left: auto;
  }
}

/* =========================================================================
   Product page — sticky image column on desktop
   So when the customer scrolls the right-hand options (size, finish, qty)
   the main image + thumbnails + size visualizer stay in view. The header is
   js-sticky-header so we offset by enough to clear it.
   ========================================================================= */
@media (min-width: 992px) {
  .product__container {
    align-items: flex-start;
  }
  .product__left {
    position: sticky;
    top: 96px;
    align-self: flex-start;
    /* Cap height so very tall image+viz stacks remain scrollable inside the
       sticky column rather than clipping out of the viewport. */
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    /* Hide scrollbar gutter shift; keep scroll silent. */
    scrollbar-width: thin;
  }
  .product__left::-webkit-scrollbar { width: 6px; }
  .product__left::-webkit-scrollbar-thumb { background: #d8dee3; border-radius: 3px; }
}

/* =========================================================================
   Category page — subcategory directory grid
   The theme renders subcategories as free-flowing pill chips of variable
   width, which reads as messy on categories with many siblings (e.g. Car
   Stickers → 30+ brands). Re-style as a uniform responsive grid: equal-
   width cards, fixed gutters, alphabetic visual rhythm.
   ========================================================================= */
.subcategory {
  margin-block: 1rem 1.5rem;
}
.subcategory__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}
.subcategory__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-body-color);
  text-align: center;
  text-decoration: none;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e6e8eb);
  border-radius: 0.625rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.subcategory__link:hover,
.subcategory__link:focus {
  color: var(--bs-primary, #2a9d8f);
  background: var(--bs-tertiary-bg, #f5f7fa);
  border-color: var(--bs-primary, #2a9d8f);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.subcategory__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
/* Image variant — stack thumbnail above label, uniform card height */
.subcategory__list--with-images {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
}
.subcategory__list--with-images .subcategory__link {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.625rem;
  text-align: center;
}
.subcategory__list--with-images .subcategory__thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.375rem;
  background: var(--bs-tertiary-bg, #f5f7fa);
}
.subcategory__list--with-images .subcategory__name {
  justify-content: center;
  text-align: center;
}

@media (max-width: 575.98px) {
  .subcategory__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .subcategory__list--with-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .subcategory__link {
    font-size: 0.8125rem;
    padding: 0.375rem 0.5rem;
    height: 3rem;
  }
}

/* =========================================================================
   GLOBAL COLOUR TOKENS — Teal #2a9d8f replaces primary blue #0b69f6
   Overrides Bootstrap CSS custom properties so every component that reads
   --bs-primary / --bs-link-color automatically uses teal.
   ========================================================================= */
:root {
  --bs-primary: #2a9d8f;
  --bs-primary-rgb: 42, 157, 143;
  --bs-primary-text-emphasis: #2a9d8f;
  --bs-primary-bg-subtle: #d0eeea;
  --bs-primary-border-subtle: #9dd9d2;
  --bs-link-color: #2a9d8f;
  --bs-link-color-rgb: 42, 157, 143;
  --bs-link-hover-color: #228b7e;
  --bs-link-hover-color-rgb: 34, 139, 126;
}

/* =========================================================================
   TYPOGRAPHY — Bebas Neue (headings) + Inter (body / UI)
   ========================================================================= */

/* --- Global headings --- */
h1, .h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}
h2, .h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}
h3, .h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}
h4, .h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}
h5, .h5,
h6, .h6 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}

/* Product title on listing pages — miniature card */
.product-miniature h3,
.product-miniature .h3,
.product-miniature__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}

/* Product title on product page (template: <h1 class="product__name h2">) */
.product__name {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: #1a1a1a !important;
}

/* Sticker configurator product title */
.sticker-cfg__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  line-height: 1.15;
}

/* Category / page title */
.page-title-section h1,
.page-title-section .h1,
.page-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #1a1a1a;
}

/* Section headings (module section-title component, "Featured products", etc.) */
.section-title,
.section-title h2,
.section-title .h2,
.section-title__title {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* --- Body and UI (Inter) --- */
body {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #444444;
  line-height: 1.6;
}

/* Navigation links */
.ps-mainmenu__tree-link,
.ps-mainmenu--desktop .ps-mainmenu__tree-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Breadcrumbs */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item span {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
}

/* Product descriptions */
.product__description,
.product__description-short,
.rich-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #444444;
}

/* Price */
.product__price,
.product-miniature__price,
.price {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #1a1a1a;
}

/* Crossed-out / regular (original) price */
.product__regular-price,
.product-miniature__regular-price,
.regular-price {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #999999;
}

/* Buttons */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* Form labels */
label,
.form-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: #1a1a1a;
}

/* Form inputs — 1rem (16px) is the minimum to prevent iOS Safari auto-zoom on focus */
input,
textarea,
select,
.form-control,
.form-select {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

/* Footer */
.footer__main,
.footer-block,
.footer-block p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
}

/* Checkout */
.checkout p,
.checkout label,
.checkout-process,
.checkout-process p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
}

/* Notification / alert text */
.alert,
.toast {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

/* Tab / accordion labels */
.accordion-button,
.nav-tabs .nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

/* Facet / filter labels */
.faceted-search label,
.faceted-search .facet__title,
.faceted-search .facet-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
}

/* Pagination numbers */
.pagination .page-link,
.page-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

/* Cart summary */
.cart-summary,
.cart-detailed p,
.cart-detailed td,
.cart-detailed th {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
}

/* Order confirmation */
.order-confirmation p,
.order-confirmation td {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* =========================================================================
   COLOUR OVERRIDES — Teal everywhere blue was used
   ========================================================================= */

/* --- Primary buttons --- */
.btn-primary {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #228b7e;
  border-color: #228b7e;
  color: #fff;
}
.btn-primary:focus-visible,
.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}

/* --- Outline buttons --- */
.btn-outline-primary {
  border-color: #2a9d8f;
  color: #2a9d8f;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
}

/* --- Links --- */
a {
  color: #2a9d8f;
}
a:hover {
  color: #228b7e;
}
a:visited {
  color: #2a9d8f;
}

/* --- Navigation active / hover --- */
.ps-mainmenu--desktop .ps-mainmenu__tree > li.current .ps-mainmenu__tree-link {
  color: #2a9d8f !important;
  background-color: rgba(42, 157, 143, 0.08) !important;
}
.ps-mainmenu--desktop .ps-mainmenu__tree-link:hover,
.ps-mainmenu--desktop .ps-mainmenu__tree-link:focus {
  color: #228b7e !important;
}
.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle:hover,
.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle:focus {
  color: #2a9d8f;
}
/* Mobile menu active */
.ps-mainmenu--mobile .menu__link:active {
  color: #2a9d8f;
}
/* Submenu active */
.ps-mainmenu--desktop .submenu__left-item.active {
  color: #2a9d8f !important;
  background-color: rgba(42, 157, 143, 0.08) !important;
}
.ps-mainmenu--desktop .submenu__left-item:hover,
.ps-mainmenu--desktop .submenu__left-item:focus {
  color: #228b7e;
}

/* --- Breadcrumbs --- */
.breadcrumb-item a,
.breadcrumb-item a:link,
.breadcrumb-item a:visited {
  color: #2a9d8f;
}
.breadcrumb-item a:hover {
  color: #228b7e;
}
.breadcrumb-item.active {
  color: #2a9d8f;
}

/* --- Forms and inputs --- */
.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
  outline: none;
}
.form-check-input:checked {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
}
.form-check-input:focus {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}
.form-check-input[type="radio"]:checked {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
}
.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #2a9d8f;
}
/* Search bar */
.ps-searchbar__input:focus {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}
.ps-searchbar .btn,
.ps-searchbar__submit,
.ps-searchbar button[type="submit"] {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
}
.ps-searchbar .btn:hover,
.ps-searchbar__submit:hover,
.ps-searchbar button[type="submit"]:hover {
  background-color: #228b7e;
  border-color: #228b7e;
}

/* --- Pagination --- */
.page-link.active,
.active > .page-link,
.pagination .page-item.active .page-link {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
}
.page-link:hover,
.pagination .page-item:not(.active) .page-link:hover {
  color: #2a9d8f;
}
.page-link:focus {
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}

/* --- Product page tabs/accordion --- */
.accordion-button:not(.collapsed) {
  color: #2a9d8f;
  box-shadow: inset 0 -1px 0 rgba(42, 157, 143, 0.25);
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(42, 157, 143, 0.25);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-bottom-color: #2a9d8f;
  color: #2a9d8f;
}
/* Product thumbnail active outline */
.product__thumbnail.active .product__thumbnail-image {
  outline-color: #2a9d8f !important;
}

/* --- Wishlist / blockwishlist --- */
.blockwishlist__btn--active,
.js-addToWishlist.active {
  color: #2a9d8f;
}
.js-addToWishlist:hover {
  color: #2a9d8f;
}

/* --- Category and listing page filters --- */
.faceted-search .facet-label.active,
.ps-facetedsearch .faceted-search-item--active a,
.active-filter .active-filter__filter-title {
  color: #2a9d8f;
}
.subcategory__link:hover,
.subcategory__link:focus {
  color: #2a9d8f !important;
  border-color: #2a9d8f !important;
}

/* --- Checkout steps --- */
.checkout-steps__step--success .checkout-steps__number {
  background: #2a9d8f !important;
}
.checkout-steps__step--success .checkout-steps__btn {
  color: #2a9d8f;
}
.checkout-steps__step--success::before,
.checkout-steps__step--success::after {
  background: #2a9d8f !important;
}
.checkout-steps__step--current .checkout-steps__number {
  background: #2a9d8f !important;
}
.checkout-steps__step--current::before {
  background: #2a9d8f !important;
}
/* Payment method selected */
.payment-options .payment-option input:checked + label,
.payment-options .payment-option input:checked ~ label {
  border-color: #2a9d8f;
}

/* --- Header icons --- */
.header-block__count,
#_desktop_ps_shoppingcart .header-block__count {
  background-color: #2a9d8f;
  color: #fff;
}
.header-block__action-btn:hover,
.header-block__action-btn:focus {
  color: #2a9d8f !important;
}

/* --- Footer links --- */
.footer-block a:link,
.footer-block a:visited,
.footer__main a {
  color: var(--bs-gray-300);
}
.footer-block a:hover,
.footer__main a:hover {
  color: #fff;
}
/* Newsletter subscribe */
.ps-emailsubscription button[type="submit"],
.block_newsletter button,
.newsletter-form button {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
}
.ps-emailsubscription button[type="submit"]:hover,
.block_newsletter button:hover {
  background-color: #228b7e;
  border-color: #228b7e;
}
/* Social icons hover */
.ps-socialfollow a:hover {
  color: #2a9d8f;
}

/* --- Success / info notifications --- */
.alert-success {
  border-color: #2a9d8f;
}
.alert-info {
  border-color: #2a9d8f;
  color: #2a9d8f;
}
.notifications-container .alert-success {
  background-color: #2a9d8f !important;
  border-color: #2a9d8f !important;
}

/* =========================================================================
   STICKER CONFIGURATOR — override #185FA5 with teal #2a9d8f
   sticker-configurator.css is a compiled asset; all overrides go here.
   ========================================================================= */

/* Active colour swatch ring */
.sticker-cfg__swatch.is-active {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 0 4px rgba(42, 157, 143, 0.2);
}
/* Active finish chip */
.sticker-cfg__finish.is-active {
  background: #d0eeea;
  border-color: #2a9d8f;
  color: #2a9d8f;
}
/* Unit toggle active */
.sticker-cfg__unit.is-active {
  color: #2a9d8f;
}
/* Active size chip */
.sticker-cfg__size-chip.is-active {
  border-color: #2a9d8f;
  background: #d0eeea;
  box-shadow: 0 0 0 1px #2a9d8f;
}
.sticker-cfg__size-chip.is-active .sticker-cfg__size-chip-size,
.sticker-cfg__size-chip.is-active .sticker-cfg__size-chip-price {
  color: #2a9d8f;
}
/* Size mode tab active */
.sticker-cfg__size-mode-btn.is-active {
  color: #2a9d8f;
}
/* Custom size pane active border */
.sticker-cfg__custom-size.is-active {
  border-color: #2a9d8f;
  background: #f0faf9;
}
/* Custom size input focus */
.sticker-cfg__custom-size-input-wrap:focus-within {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12);
}
/* Custom size price summary */
.sticker-cfg__custom-size-summary strong {
  color: #2a9d8f;
}
/* Price main in configurator */
.sticker-cfg__price-main {
  color: #2a9d8f;
}
/* Vinyl badge colour */
.sticker-cfg__badge--vinyl {
  background: #d0eeea;
  color: #1a6b60;
}
/* Type switch CTA */
.sticker-cfg__type-switch-cta,
.sticker-cfg__type-switch--printed .sticker-cfg__type-switch-cta {
  color: #2a9d8f;
}
/* Chooser modal printed card */
.sticker-cfg-chooser__card--printed .sticker-cfg-chooser__features li::before,
.sticker-cfg-chooser__card--printed .sticker-cfg-chooser__card-cta {
  color: #2a9d8f;
}
/* Qty +/- buttons */
.sticker-cfg__qty-btn {
  background-color: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
}
.sticker-cfg__qty-btn:hover {
  background-color: #228b7e;
  border-color: #228b7e;
}

/* =========================================================================
   HERO SECTION — "Got your own design?" homepage (ps_customtext module)
   Full-width dark panel (#1a1a1a), white text, white product cards inside.
   ========================================================================= */

/* Full-bleed: pull edge-to-edge by cancelling parent container gutters */
.ps-customtext.custom-orders {
  padding: 0;
  width: calc(100% + var(--bs-gutter-x, 3rem));
  margin-left: calc(-0.5 * var(--bs-gutter-x, 3rem));
  margin-right: calc(-0.5 * var(--bs-gutter-x, 3rem));
}

.custom-orders__inner {
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
  .custom-orders__inner {
    padding: 4rem 2.5rem;
  }
}

.custom-orders__intro {
  text-align: center;
  margin-bottom: 2rem;
}

.custom-orders__heading {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 2.8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: #ffffff !important;
  margin: 0 0 0.5rem;
}

.custom-orders__sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #e0e0e0 !important;
  margin: 0;
}

/* Product type cards stay white */
.custom-order-card {
  background: #ffffff !important;
  border: 1px solid #e6ecef !important;
  border-radius: 14px;
  color: inherit;
}
.custom-order-card:hover {
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-2px);
  border-color: #c9dce6 !important;
  color: inherit;
  text-decoration: none;
}
.custom-order-card__title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  color: #1a1a1a !important;
  margin: 0 0 0.3rem;
}
.custom-order-card__copy {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: #444444 !important;
}
.custom-order-card__cta,
.custom-order-card--diecut .custom-order-card__cta,
.custom-order-card--printed .custom-order-card__cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600 !important;
  color: #2a9d8f !important;
}
.custom-order-card:hover .custom-order-card__cta {
  color: #228b7e !important;
}

/* =========================================================================
   PRODUCT PAGE — "Got your own design?" CTA block
   Appears on catalog sticker pages (non-custom-artwork products).
   Target: .sticker-cfg__custom-cta
   ========================================================================= */
.sticker-cfg__custom-cta,
a.sticker-cfg__custom-cta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background-color: rgba(42, 157, 143, 0.08);
  border-left: 3px solid #2a9d8f;
  border-radius: 0 8px 8px 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}
.sticker-cfg__custom-cta:hover,
a.sticker-cfg__custom-cta:hover {
  background-color: rgba(42, 157, 143, 0.13);
  color: inherit;
  text-decoration: none;
}
.sticker-cfg__custom-cta-body strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  display: block;
}
.sticker-cfg__custom-cta-body small {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #444444;
  display: block;
}
.sticker-cfg__custom-cta-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2a9d8f;
  white-space: nowrap;
  margin-left: auto;
}
.sticker-cfg__custom-cta:hover .sticker-cfg__custom-cta-cta {
  color: #228b7e;
}
.sticker-cfg__custom-cta-icon {
  color: #2a9d8f;
  flex-shrink: 0;
}

/* =========================================================================
   HEADER — Homepage logo H1 reset
   On the homepage the logo is wrapped in an <h1> for SEO. The global h1
   typography rule (Bebas Neue 2.8rem) was inflating the wrapper and pushing
   the nav off-center. Reset the wrapper to a neutral inline container.
   ========================================================================= */
.header-bottom__h1,
h1.header-bottom__h1 {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 1;
  color: inherit;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

/* Prevent the homepage from horizontally overflowing because of full-bleed
   panels (custom-orders CTA), which on mobile can push the page wider than
   the viewport and offset the header. */
html, body { overflow-x: clip; }

/* =========================================================================
   HOMEPAGE — Custom-orders CTA (full-bleed, mobile-safe)
   The original break-out trick using gutter-x math could overflow the
   viewport on small screens and shove the page right. Switch to a viewport-
   anchored layout that is always exactly 100vw wide.
   ========================================================================= */
.ps-customtext.custom-orders {
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-block: 1rem;
}
.custom-orders__inner {
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2rem 1.25rem !important;
}
@media (min-width: 768px) {
  .custom-orders__inner {
    padding: 2.5rem 2.5rem !important;
  }
}
.custom-orders__intro {
  margin-bottom: 1.25rem !important;
}

/* Tighten gap to the next homepage section (shop by categories) */
.page-content--home > * + * {
  margin-top: 1rem;
}

/* =========================================================================
   PRODUCT MINIATURE — "Customise it" button visibility fix
   The teal background + global `a` colour cascade caused the button text to
   render in the same teal on first paint (only revealing on hover, which
   changes the colour). Force the foreground to white and explicit sizing.
   ========================================================================= */
.product-miniature__customise,
.product-miniature__customise.btn,
.product-miniature__customise.btn-primary,
a.product-miniature__customise,
a.product-miniature__customise:link,
a.product-miniature__customise:visited,
a.product-miniature__customise:hover,
a.product-miniature__customise:focus {
  color: #ffffff !important;
  background-color: #2a9d8f !important;
  border-color: #2a9d8f !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-indent: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap;
}
a.product-miniature__customise:hover,
a.product-miniature__customise:focus {
  background-color: #228b7e !important;
  border-color: #228b7e !important;
}

/* =========================================================================
   FOCUS / OUTLINE — remove the dotted "selector" rectangle on mouse focus
   Keep accessible keyboard focus via :focus-visible (modern browsers).
   ========================================================================= */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
/* Custom-size input wrapper — never show the browser's text-input focus
   rectangle around the wrap; the teal box-shadow on the wrap is enough. */
.sticker-cfg__custom-size-input,
.sticker-cfg__custom-size-input-wrap input,
.sticker-cfg__custom-size-input-wrap input:focus,
.sticker-cfg__custom-size-input-wrap input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* =========================================================================
   CATEGORY LISTING — Top bar (count · search · sort) on one line
   Layout: [count]  [in-category search (flex-grow)]  [sort]
   On narrow screens the search drops to its own row.
   ========================================================================= */
.products__selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.products__count {
  flex: 0 0 auto;
  font-size: 0.875rem;
  color: #444;
}
.products__catsearch {
  flex: 1 1 18rem;
  min-width: 14rem;
  max-width: 30rem;
  margin: 0;
}
.products__sort {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Search-within-category pill — compact, inline */
.category-search__field {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border: 1px solid #d8dee3;
  border-radius: 999px;
  transition: border-color .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.category-search__field:focus-within {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.18);
}
/* Override .material-icons (display: inline-block; font-size: 24px) so the
   glyph centres inside the pill instead of sitting on the baseline. */
.category-search__field .category-search__icon,
i.material-icons.category-search__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;
  width: 2.25rem;
  height: auto;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  color: #6b7280;
  pointer-events: none;
  font-style: normal;
}
.category-search__input.form-control,
input.category-search__input,
input.category-search__input:focus {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
  background: transparent;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: none !important;
  color: #1a1a1a;
}
.category-search__input::placeholder { color: #8a929c; }
/* Suppress browser-native search-input artefacts (Chrome/Edge clear glyph,
   Safari decoration) so we only show our own clear button. */
.category-search__input::-webkit-search-cancel-button,
.category-search__input::-webkit-search-decoration,
.category-search__input::-webkit-search-results-button,
.category-search__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.category-search__input::-ms-clear,
.category-search__input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.category-search__clear {
  flex: 0 0 auto;
  width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}
.category-search__clear:hover { color: #1a1a1a; }

.category-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.65rem;
  align-self: stretch;
  background: transparent;
  border: 0;
  border-left: 1px solid #e5e7eb;
  color: #2a9d8f;
  cursor: pointer;
  border-radius: 0 999px 999px 0;
  transition: background .15s ease, color .15s ease;
}
.category-search__submit:hover,
.category-search__submit:focus-visible {
  background: rgba(42, 157, 143, 0.08);
  color: #0f6e56;
  outline: none;
}
.category-search__submit .material-icons {
  font-size: 1.1rem;
}

/* Compact sort dropdown */
.products__sort-label {
  font-size: 0.8125rem;
  color: #444;
}
.products__sort-dropdown {
  position: relative;
}
.products__sort-dropdown-button.btn,
.products__sort-dropdown-button.btn.btn-sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 0.375rem;
  background: #fff;
  border: 1px solid #d8dee3;
  color: #1a1a1a;
}
.products__sort-dropdown-button.btn:hover,
.products__sort-dropdown-button.btn:focus {
  background: #f7f9fa;
  border-color: #b8c1c8;
  color: #1a1a1a;
}
.products__sort-dropdown .dropdown-menu {
  font-size: 0.8125rem;
  min-width: 11rem;
  padding: 0.25rem;
}
.products__sort-dropdown .dropdown-item {
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
}
.products__sort-dropdown .dropdown-item.current {
  background: rgba(42, 157, 143, 0.10);
  color: #2a9d8f;
  font-weight: 600;
}

/* AJAX search states */
.catsearch-empty {
  padding: 1.25rem 0;
  font-size: 0.95rem;
  color: #444;
}
.catsearch-empty p { margin: 0 0 0.5rem; }
.catsearch-more {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: #444;
}

@media (max-width: 767.98px) {
  .products__selection {
    gap: 0.5rem 0.75rem;
  }
  .products__count { order: 1; flex: 1 1 auto; }
  .products__sort  { order: 2; }
  .products__catsearch {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
}

/* =========================================================================
   STICKER CONFIGURATOR — additional blue overrides (second pass)
   Targets elements not caught by the first pass above.
   ========================================================================= */

/* --- Add to cart button --- */
.sticker-cfg__atc {
  background: #2a9d8f !important;
}
.sticker-cfg__atc:hover {
  background: #228b7e !important;
}

/* --- Save to wishlist button (outline style) --- */
.sticker-cfg__wishlist {
  color: #2a9d8f !important;
  border-color: #2a9d8f !important;
}
.sticker-cfg__wishlist:hover {
  background: rgba(42, 157, 143, 0.08) !important;
  color: #228b7e !important;
  border-color: #228b7e !important;
}

/* --- Tab active underline --- */
.sticker-cfg__tab.is-active {
  border-bottom-color: #2a9d8f !important;
}

/* --- Upload zone hover/dragover border --- */
.sticker-cfg__upload:hover,
.sticker-cfg__upload.is-dragover {
  border-color: #2a9d8f !important;
  background: #f0faf9 !important;
}

/* --- Upload notes textarea focus --- */
.sticker-cfg__upload-notes:focus {
  border-color: #2a9d8f !important;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.12) !important;
}

/* --- "← Back to preset sizes" link --- */
.sticker-cfg__preset-link {
  color: #2a9d8f !important;
}
.sticker-cfg__preset-link:hover,
.sticker-cfg__preset-link:focus {
  color: #228b7e !important;
}

/* --- "Got your own design?" CTA block — printed variant icon --- */
.sticker-cfg__custom-cta--printed .sticker-cfg__custom-cta-icon {
  background: #d0eeea !important;
  color: #2a9d8f !important;
}

/* --- Type-switch printed CTA text --- */
.sticker-cfg__type-switch--printed .sticker-cfg__type-switch-cta {
  color: #2a9d8f !important;
}
.sticker-cfg__type-switch--printed:hover,
.sticker-cfg__type-switch--printed:focus {
  border-color: #9dd9d2 !important;
}

/* --- How to apply — printed variant icons and step numbers --- */
.sticker-cfg__howto-icon {
  background: #d0eeea !important;
  color: #2a9d8f !important;
}
.sticker-cfg__howto--diecut .sticker-cfg__howto-icon {
  background: #e7f6ee !important;
  color: #0f6e56 !important;
}
.sticker-cfg__howto--printed .sticker-cfg__howto-num {
  background: #2a9d8f !important;
}

/* --- Type-chooser modal — printed card --- */
.sticker-cfg-chooser__card--printed:focus,
.sticker-cfg-chooser__card--printed:hover {
  border-color: #9dd9d2 !important;
  box-shadow: 0 14px 28px -16px rgba(42, 157, 143, 0.4) !important;
}
.sticker-cfg-chooser__card--printed .sticker-cfg-chooser__card-icon {
  background: #d0eeea !important;
  color: #2a9d8f !important;
}
.sticker-cfg-chooser__card--printed .sticker-cfg-chooser__tag {
  background: #d0eeea !important;
  color: #1a6b60 !important;
}
.sticker-cfg-chooser__card--printed .sticker-cfg-chooser__features li::before {
  color: #2a9d8f !important;
}
.sticker-cfg-chooser__card--printed .sticker-cfg-chooser__card-cta {
  color: #2a9d8f !important;
}

/* --- Chooser modal "Got your own design?" CTA — printed variant CTA text --- */
.sticker-cfg__custom-cta--printed .sticker-cfg__custom-cta-cta {
  color: #2a9d8f !important;
}

/* =========================================================================
   Category search pagination
   ========================================================================= */
.catsearch-pagination {
  margin: 1.5rem 0 0;
  text-align: center;
}
.catsearch-pagination__summary {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: #6b7280;
}
.catsearch-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  justify-content: center;
}
.catsearch-pagination__btn {
  min-width: 2.25rem;
  padding: .35rem .65rem;
  background: #fff;
  border: 1px solid #d8dee3;
  border-radius: 6px;
  font-size: .875rem;
  color: #1a1a1a;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.catsearch-pagination__btn:hover:not(:disabled) {
  border-color: #2a9d8f;
  color: #2a9d8f;
}
.catsearch-pagination__btn.is-active {
  background: #2a9d8f;
  border-color: #2a9d8f;
  color: #fff;
  font-weight: 600;
}
.catsearch-pagination__btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.catsearch-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 .35rem;
  color: #9ca3af;
}

/* =========================================================================
   Product miniature title — clamp to 2 lines so very long names don't
   eat vertical space in category/search grids. The full title remains
   on the link's title attribute / product page for SEO.
   ========================================================================= */
.product-miniature__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  max-height: 2.5em;
}

/* =========================================================================
   Anchors styled as primary buttons — text must stay white at rest
   (Bootstrap's link colour cascade can overpower .btn-primary when the
   element is also an <a>, leaving the label invisible until hover).
   ========================================================================= */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
  color: #ffffff !important;
}
button.btn-primary,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active {
  color: #ffffff !important;
}

/* =========================================================================
   Currency selector — quiet inline dropdown to match Wishlist / Contact us
   The module renders a bare <select class="form-select"> which gets
   Bootstrap's boxy treatment (white fill, heavy border, large caret).
   Strip that and present a clean pill: transparent background, body text
   colour, custom chevron, subtle hover. Targets both desktop top-nav and
   mobile offcanvas placements.
   ========================================================================= */
.ps-currencyselector .form-select.js-currency-selector {
  /* Reset Bootstrap's box */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23495057' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-body-color);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* Let the pill size to its content rather than stretching */
  width: auto;
  min-width: 0;
}

.ps-currencyselector .form-select.js-currency-selector:hover {
  background-color: var(--bs-tertiary-bg, #f3f4f6);
  border-color: var(--bs-border-color, #e6e8eb);
}

.ps-currencyselector .form-select.js-currency-selector:focus,
.ps-currencyselector .form-select.js-currency-selector:focus-visible {
  outline: none;
  background-color: var(--bs-tertiary-bg, #f3f4f6);
  border-color: var(--bs-primary, #2a9d8f);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}

/* Options re-inherit the native dropdown styling — force a sane fg/bg so
   they don't render as transparent-on-transparent in some browsers. */
.ps-currencyselector .form-select.js-currency-selector option {
  background-color: #fff;
  color: #222;
  font-weight: 500;
}

/* Mobile: the selector sits inside the offcanvas additionals row next to
   the language selector. Let it breathe and fill its column so it doesn't
   collapse to a tiny pill on narrow screens. */
@media (max-width: 767.98px) {
  .ps-mainmenu__additionnals .ps-currencyselector,
  .ps-mainmenu__additionnals #_mobile_ps_languageselector .ps-languageselector {
    width: 100%;
  }
  .ps-mainmenu__additionnals .ps-currencyselector .form-select.js-currency-selector {
    width: 100%;
    padding: 10px 32px 10px 14px;
    font-size: 14px;
    background-color: #fff;
    border-color: var(--bs-border-color, #e6e8eb);
  }
  .ps-mainmenu__additionnals .ps-currencyselector .form-select.js-currency-selector:hover {
    background-color: #fafbfc;
  }
}


/* ── Bulk discount cart banner ─────────────────────────────────── */
.bulk-discount-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: 8px;
  background: #f0faf9;
  border: 1px solid #9dd9d2;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}

.bulk-discount-info__applied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1d7a6e;
}

.bulk-discount-info__applied svg {
  flex-shrink: 0;
  color: #2a9d8f;
}

.bulk-discount-info__upsell {
  color: #444;
}

.bulk-discount-info__upsell::before {
  content: '·';
  margin-right: 10px;
  color: #9dd9d2;
}

.bulk-discount-info__promo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2a9d8f;
  font-weight: 500;
}

/* =========================================================================
   "Added to cart" modal — must appear above the live-chat bubble
   The dh_livechat bubble uses z-index 99990; Bootstrap's default modal is
   z-index 1055 / backdrop 1050, so the chat sits on top. Raise both here.
   ========================================================================= */
#blockcart-modal { z-index: 99995 !important; }
.modal-backdrop  { z-index: 99991 !important; }

/* =========================================================================
   Desktop search bar — submit button inside the pill
   The pill form is position:relative with the magnifier icon absolute-
   positioned at left:.75rem. The submit button must mirror that pattern on
   the right so it stays inside the gradient-border pill rather than
   flowing below it as a block element.
   ========================================================================= */
.ps-searchbar__submit,
.ps-searchbar button[type="submit"] {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  width: 1.6rem !important;
  height: 1.6rem !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: none !important;
  font-size: 0.85rem !important;
}
/* Give the input enough right padding so typed text doesn't run under the button */
.ps-searchbar__input,
.ps-searchbar .js-search-input {
  padding-right: 2.5rem !important;
}

/* =========================================================================
   Mobile: prevent iOS Safari auto-zoom on input focus
   iOS zooms in whenever a focused input/select/textarea has font-size < 16px.
   This catches any element the rules above may have sized below that threshold.
   Using !important because Bootstrap and theme rules may override via specificity.
   ========================================================================= */
@media screen and (max-width: 991.98px) {
  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select,
  .form-control,
  .form-select,
  .ps-searchbar__input,
  .category-search__input {
    font-size: 16px !important;
  }
}