/* Shop Child: custom styles. Loaded automatically, after Hummingbird's theme.css. */

/* ---------------------------------------------------------------------------
   Brand palette, taken from the logo: aubergine wordmark, orange bars.
   Orange is too light to carry text on white, so aubergine is the primary
   (buttons, links) and orange is kept for accents on dark or as decoration.
   ------------------------------------------------------------------------ */
:root {
  --ve-ink: #3c2c32;
  --ve-ink-dark: #2a1e23;
  --ve-accent: #fbb168;
  --ve-accent-strong: #a8590f; /* orange dark enough for text on white */
  --ve-surface: #f8f5f3;
  --ve-line: #e7e1dd;

  --bs-primary: var(--ve-ink);
  --bs-primary-rgb: 60, 44, 50;
  --bs-primary-text-emphasis: var(--ve-ink);
  --bs-primary-bg-subtle: #efe9e6;
  --bs-primary-border-subtle: #cfc3bd;
  --bs-dark: var(--ve-ink-dark);
  --bs-dark-rgb: 42, 30, 35;
  --bs-body-color: #2b2226;
  --bs-body-color-rgb: 43, 34, 38;
  --bs-link-color: var(--ve-ink);
  --bs-link-color-rgb: 60, 44, 50;
  --bs-link-hover-color: var(--ve-accent-strong);
  --bs-link-hover-color-rgb: 168, 89, 15;
  --bs-tertiary-bg: var(--ve-surface);
  --bs-tertiary-bg-rgb: 248, 245, 243;
  --bs-border-color: var(--ve-line);
  --bs-focus-ring-color: rgba(251, 177, 104, 0.45);
}

h1, h2, h3, .h1, .h2, .h3 {
  letter-spacing: -0.015em;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--ve-ink);
  --bs-btn-border-color: var(--ve-ink);
  --bs-btn-hover-bg: var(--ve-ink-dark);
  --bs-btn-hover-border-color: var(--ve-ink-dark);
  --bs-btn-active-bg: var(--ve-ink-dark);
  --bs-btn-active-border-color: var(--ve-ink-dark);
  --bs-btn-disabled-bg: var(--ve-ink);
  --bs-btn-disabled-border-color: var(--ve-ink);
  --bs-btn-focus-shadow-rgb: 251, 177, 104;
}

.btn-outline-primary {
  --bs-btn-color: var(--ve-ink);
  --bs-btn-border-color: #cfc3bd;
  --bs-btn-hover-bg: var(--ve-ink);
  --bs-btn-hover-border-color: var(--ve-ink);
  --bs-btn-active-bg: var(--ve-ink);
  --bs-btn-active-border-color: var(--ve-ink);
  --bs-btn-disabled-color: var(--ve-ink);
  --bs-btn-disabled-border-color: #cfc3bd;
  --bs-btn-focus-shadow-rgb: 251, 177, 104;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ve-accent);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* --- Header -------------------------------------------------------------- */
.header-top {
  background-color: var(--ve-surface);
  font-size: 0.875rem;
}

.header-bottom {
  padding: 0.5rem 0;
}

/* The logo is a wide wordmark (about 10:1), so Hummingbird's 8-9rem cap
   leaves it too small to read. */
.header-bottom .navbar-brand .logo {
  max-width: min(17rem, 55vw);
  max-height: none;
  height: auto;
}

/* Phones: menu button, logo, account and cart on one row, with the search
   field on a row of its own below (see modules/ps_searchbar in this theme). */
@media (max-width: 767.98px) {
  /* Whatever the three buttons and the page margins leave free (they take
     about 9.5rem; the rest is slack for a browser scrollbar). */
  .header-bottom .navbar-brand .logo {
    max-width: min(17rem, calc(100vw - 11.5rem));
  }

  .header-bottom__search {
    order: 10;
    padding-block: 0.25rem;
  }

  .header-bottom__search .ps-searchbar {
    position: relative;
  }

  .header-bottom__search .ps-searchbar__dropdown {
    width: auto;
  }
}

.ps-mainmenu__tree-link {
  color: var(--bs-body-color);
  font-weight: 500;
  padding-inline: 0.875rem;
  position: relative;
}

.ps-mainmenu__tree-link::after {
  background: var(--ve-accent);
  bottom: 0.75rem;
  content: "";
  height: 2px;
  left: 0.875rem;
  position: absolute;
  right: 0.875rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.ps-mainmenu__tree-link:hover,
.ps-mainmenu__tree-link:active,
.ps-mainmenu__tree-link:focus {
  color: var(--ve-ink);
}

.ps-mainmenu__tree-link:hover::after,
.ps-mainmenu__tree-link:focus::after,
.ps-mainmenu__tree-link.current::after,
.ps-mainmenu__tree-item.current > .ps-mainmenu__tree-item-wrapper > .ps-mainmenu__tree-link::after {
  transform: scaleX(1);
}

.header-block__badge {
  background-color: var(--ve-accent);
  color: var(--ve-ink-dark);
}

/* --- Home hero (content of the "Custom text block" module) ---------------- */
.ve-hero {
  background: var(--ve-ink);
  border-radius: 1rem;
  color: #fff;
  margin-top: 1.5rem;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
}

/* The three bars from the logo, as a backdrop on the right edge. */
.ve-hero::after {
  background: linear-gradient(
    90deg,
    var(--ve-accent) 0 26%,
    transparent 26% 37%,
    rgba(251, 177, 104, 0.7) 37% 63%,
    transparent 63% 74%,
    rgba(251, 177, 104, 0.45) 74% 100%
  );
  bottom: 0;
  content: "";
  position: absolute;
  right: clamp(1.5rem, 6vw, 5rem);
  top: 0;
  width: clamp(3rem, 12vw, 9rem);
}

.ve-hero > * {
  max-width: 38rem;
  position: relative;
  z-index: 1;
}

.ve-hero__eyebrow {
  color: var(--ve-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.ve-hero h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.ve-hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.0625rem;
}

.ve-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.ve-hero__actions a {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--bs-border-radius);
  color: #fff;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ve-hero__actions a:first-child,
.ve-hero__actions a:hover,
.ve-hero__actions a:focus {
  background: var(--ve-accent);
  border-color: var(--ve-accent);
  color: var(--ve-ink-dark);
}

.ve-hero__actions a:first-child:hover,
.ve-hero__actions a:first-child:focus {
  background: #fcc48d;
  border-color: #fcc48d;
}

@media (max-width: 575.98px) {
  .ve-hero {
    padding-right: 4.5rem;
  }

  .ve-hero::after {
    opacity: 0.35;
    right: 1rem;
    width: 2.5rem;
  }
}

/* --- Section titles ------------------------------------------------------ */
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-block-end: 1.5rem;
  padding-bottom: 0.75rem;
  position: relative;
}

.section-title::after {
  background: var(--ve-accent);
  border-radius: 2px;
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 2.5rem;
}

.page-content--home {
  gap: 3.5rem;
  padding-bottom: 3.5rem;
}

/* --- Product cards ------------------------------------------------------- */
.product-miniature__inner {
  border: 1px solid var(--ve-line);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-miniature:hover .product-miniature__inner,
.product-miniature:focus-within .product-miniature__inner {
  border-color: #cfc3bd;
  box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(42, 30, 35, 0.28);
  transform: translateY(-2px);
}

.product-miniature__top {
  border-radius: 0;
  padding: 0.75rem;
}

.product-miniature__bottom {
  border-top: 1px solid var(--ve-line);
  gap: 0.875rem;
  padding: 1rem;
}

.product-miniature__title {
  color: var(--bs-body-color);
  font-weight: 500;
  line-height: 1.4;
}

.product-miniature__title:hover {
  color: var(--ve-accent-strong);
}

.product-miniature__details {
  width: 100%;
}

.product-flags {
  padding: 0.75rem;
}

.product-flags .badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.5rem;
  text-transform: uppercase;
}

.product-flags .badge.new {
  background-color: var(--ve-accent);
  color: var(--ve-ink-dark);
}

.module-products__buttons {
  margin-top: 1.5rem;
}

/* --- Product slider ------------------------------------------------------
   Any product block with the "ve-slider" class scrolls sideways instead of
   wrapping into a grid. It is a native scroll area, so touch swipe, trackpad
   and keyboard work without scripts; custom.js only drives the arrows. */
.ve-slider__header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-block-end: 0.75rem;
}

.ve-slider__header .section-title {
  margin-block-end: 0;
}

.ve-slider__nav {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
}

.ve-slider .products {
  --ve-slider-visible: 1.25;
  --ve-slider-gap: 1.5rem;
  display: flex;
  gap: var(--ve-slider-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Room for the cards' hover lift and shadow, which the scroll area clips. */
  padding: 0.5rem 0 1.75rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ve-slider .products::-webkit-scrollbar {
  display: none;
}

.ve-slider .product-miniature {
  flex: 0 0 calc((100% - (var(--ve-slider-visible) - 1) * var(--ve-slider-gap)) / var(--ve-slider-visible));
  scroll-snap-align: start;
}

.ve-slider .module-products__buttons {
  margin-top: 0.25rem;
}

/* Products per screen: phones show one and a slice of the next as a hint to
   swipe, then 2, 3 and 4 as the screen widens. */
@media (max-width: 575.98px) {
  /* Swiping replaces the arrows, which leaves the heading the full width. */
  .ve-slider__nav {
    display: none;
  }

  .ve-slider .products {
    --ve-slider-gap: 1rem;
  }
}

@media (min-width: 576px) {
  .ve-slider .products {
    --ve-slider-visible: 2;
  }
}

@media (min-width: 768px) {
  .ve-slider .products {
    --ve-slider-visible: 3;
  }
}

@media (min-width: 1200px) {
  .ve-slider .products {
    --ve-slider-visible: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ve-slider .products {
    scroll-behavior: auto;
  }
}

/* --- Category and product pages ------------------------------------------ */
.breadcrumb__wrapper {
  border-bottom: 1px solid var(--ve-line);
}

.breadcrumb a:hover {
  color: var(--ve-accent-strong);
}

.accordion {
  --bs-accordion-active-color: var(--ve-ink);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

/* Specification tables inside product descriptions. */
.accordion-body .table {
  --bs-table-border-color: var(--ve-line);
  font-size: 0.9375rem;
}

.accordion-body .table > * > tr > * {
  padding: 0.625rem 0.875rem;
}

.accordion-body .table > * > tr:nth-child(even) > * {
  --bs-table-bg-type: var(--ve-surface);
}

/* "Ask about this product" button, under the add-to-cart area. */
.product-contact-button {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --- Footer -------------------------------------------------------------- */
.ps-emailsubscription {
  border-top: 1px solid var(--ve-line);
}

.footer__main {
  border-top: 3px solid var(--ve-accent);
  color: rgba(255, 255, 255, 0.72);
}

.footer-block__title {
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer__main a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.15s ease;
}

.footer__main a:hover,
.footer__main a:focus {
  color: var(--ve-accent);
}

.footer__main .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
}