/* Theme of the partner stores. One stylesheet for both stores: the colours, the
   radius and the fonts come from the CSS variables that the layout prints from
   kit/stores/<store>.json (templates/shop/hooks/styles.html.twig).
   Loaded after the Sylius shop styles (Bootstrap), which the cart, checkout and
   account pages use. Class prefix: st-. */

:root {
  --st-text: #111827;
  --st-subtle: #4b5563;
  --st-muted: #9ca3af;
  --st-border: #e5e7eb;
  --st-bg-subtle: #f9fafb;
}

body {
  font-family: var(--store-font-body, system-ui, sans-serif);
  background: var(--store-page-bg, #fff);
  color: var(--st-text);
}

.st-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.st-main { flex: 1 0 auto; }
.st-main a { color: inherit; text-decoration: none; }
.st-main ul, .st-sticky ul, .st-drawer ul, .st-footer ul { list-style: none; margin: 0; padding: 0; }
.st-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1024px) { .st-only-mobile { display: none !important; } }
@media (max-width: 1023px) { .st-only-desktop { display: none !important; } }

/* ---------------------------------------------------------------- header */
.st-bar { padding: 8px 16px; text-align: center; font-size: 12px; line-height: 1.4; }
.st-bar--light { background: var(--store-bar-light, #fff); color: var(--st-text); }
.st-bar--dark { background: var(--store-bar-dark, #000); color: #fff; }
@media (min-width: 1024px) { .st-bar { font-size: 14px; } }

.st-sticky { position: sticky; top: 0; z-index: 50; }
.st-header { background: var(--store-header-bg, #222); color: var(--store-header-fg, #fff); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.st-header__row { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.st-header__search { padding-bottom: 8px; }
@media (min-width: 1024px) { .st-header__row { gap: 32px; padding-top: 12px; padding-bottom: 12px; } }
.st-header a, .st-menu a { color: inherit; text-decoration: none; }
.st-logo { flex-shrink: 0; display: block; }
.st-logo img { display: block; width: 140px; height: auto; max-height: 48px; object-fit: contain; }
.st-logo__text { font-size: 20px; font-weight: 700; text-transform: uppercase; }
@media (max-width: 1023px) { .st-logo { margin: 0 auto; } }
@media (min-width: 1024px) { .st-logo img { width: 220px; max-height: 80px; } }

.st-search { display: flex; flex: 1; align-items: center; max-width: 576px; height: 44px; margin: 0 auto; border-radius: 5px; background: var(--store-search-bg, #fff); color: var(--store-search-fg, #111); overflow: hidden; }
.st-header__search .st-search { max-width: none; height: 40px; }
.st-search input { flex: 1; min-width: 0; height: 100%; padding: 0 16px 0 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; }
.st-search input::placeholder { color: inherit; opacity: .8; }
.st-search input::-webkit-search-cancel-button { display: none; }
.st-search button { display: flex; align-items: center; justify-content: center; width: 48px; height: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; }
.st-search--page { margin: 24px 0 0; border: 1px solid var(--st-border); background: #fff; color: var(--st-text); }
.st-search--page input { padding-left: 16px; }
.st-search--page button { width: auto; padding: 0 20px; font-weight: 700; background: var(--store-buy-bg, #111); color: var(--store-buy-fg, #fff); }

.st-header__icons { display: flex; align-items: center; gap: 16px; }
@media (min-width: 1024px) { .st-header__icons { gap: 24px; } }
.st-icon-btn { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.st-icon-btn:hover { opacity: .8; }
.st-cart { position: relative; }
.st-cart__count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--store-accent, #c00); color: var(--store-accent-fg, #fff); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }

.st-menu { background: var(--store-menu-bg, #222); color: var(--store-menu-fg, #fff); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.st-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.st-menu__list { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; font-size: 14px; font-weight: 700; text-transform: var(--store-menu-transform, none); }
.st-menu__item { position: relative; padding: 12px 0; }
.st-menu__item > a:hover { opacity: .8; }
.st-menu__dropdown { visibility: hidden; position: absolute; left: 0; top: 100%; z-index: 50; min-width: 220px; padding: 8px 0 !important; border-radius: 0 0 4px 4px; background: #fff; color: var(--st-text); font-weight: 400; text-transform: none; box-shadow: 0 8px 16px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .06); }
.st-menu__item:hover .st-menu__dropdown, .st-menu__item:focus-within .st-menu__dropdown { visibility: visible; }
.st-menu__dropdown a { display: block; padding: 8px 16px; }
.st-menu__dropdown a:hover { background: var(--st-bg-subtle); }
.st-phone { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; background: var(--store-phone-bg, #333); color: var(--store-phone-fg, #fff) !important; font-size: 14px; font-weight: 700; text-decoration: none; }

.st-drawer { position: fixed; inset: 0; z-index: 90; }
.st-drawer[hidden] { display: none; }
.st-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.st-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 85%; max-width: 384px; overflow-y: auto; background: #fff; color: var(--st-text); box-shadow: 0 20px 25px rgba(0, 0, 0, .2); }
.st-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--st-border); font-weight: 700; }
.st-drawer__list { flex: 1; }
.st-drawer__list > li { border-bottom: 1px solid var(--st-border); }
.st-drawer__list a, .st-drawer__list summary { display: flex; align-items: center; justify-content: space-between; padding: 16px; color: inherit; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; }
.st-drawer__list summary::-webkit-details-marker { display: none; }
.st-drawer__list details ul { padding-bottom: 8px !important; }
.st-drawer__list details a { padding: 8px 32px; font-size: 14px; font-weight: 400; }
.st-drawer__list a.st-drawer__plain { font-weight: 400; }
.st-drawer__phone { padding: 16px; border-top: 1px solid var(--st-border); color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------- shared */
.st-h1 { margin: 0; font-family: var(--store-font-heading, inherit); font-size: 24px; line-height: 1.25; font-weight: 700; color: var(--st-text); }
.st-h1--large { font-size: 30px; }
.st-h2 { margin: 0; font-family: var(--store-font-heading, inherit); font-size: 24px; line-height: 1.3; font-weight: 700; }
@media (min-width: 1024px) { .st-h1 { font-size: 30px; } .st-h1--large { font-size: 36px; } .st-h2 { font-size: 30px; } }
.st-section { padding-top: 48px; padding-bottom: 48px; }
.st-section > .st-h2 { margin-bottom: 24px; }
.st-section__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.st-section__head a { font-size: 14px; text-decoration: underline; }
.st-crumbs { margin-bottom: 16px; font-size: 12px; color: var(--st-muted); }
.st-crumbs a:hover { text-decoration: underline; }
.st-empty { padding: 48px 0; color: var(--st-subtle); }
.st-empty a { text-decoration: underline; }

.st-buy { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 16px; border: 0; border-radius: var(--store-radius, 4px); background: var(--store-buy-bg, #111); color: var(--store-buy-fg, #fff) !important; font: inherit; font-size: 14px; font-weight: 700; text-transform: var(--store-buy-transform, none); text-decoration: none; cursor: pointer; transition: opacity .15s; }
.st-buy:hover { opacity: .9; }
.st-buy:disabled { opacity: .5; cursor: default; }
.st-buy--large { height: 48px; font-size: 16px; }
.st-btn-plain { height: 44px; padding: 0 24px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); background: #fff; color: var(--st-text); font: inherit; font-size: 14px; cursor: pointer; }
.st-accent-btn { display: inline-block; margin-top: 24px; padding: 12px 24px; border-radius: 5px; background: var(--store-accent, #111); color: var(--store-accent-fg, #fff) !important; font-size: 14px; font-weight: 700; }
.st-price { font-size: 16px; font-weight: 700; color: var(--store-price, #111); }
.st-price-old { font-size: 14px; color: var(--st-muted); text-decoration: line-through; }

/* ---------------------------------------------------------------- product grid and card */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
@media (min-width: 768px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-grid { column-gap: 24px; } }
@media (min-width: 1280px) { .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .st-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.st-card { display: flex; flex-direction: column; height: 100%; }
.st-card__media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); background: #fff; transition: box-shadow .15s; }
.st-card:hover .st-card__media { box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.st-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; object-fit: contain; }
.st-card__placeholder { position: absolute; inset: 0; background: var(--st-bg-subtle); }
.st-badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.st-badge--soldout { background: rgba(255, 255, 255, .9); color: var(--st-subtle); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.st-badge--sale { background: var(--store-accent, #111); color: var(--store-accent-fg, #fff); }
.st-card__body { display: flex; flex: 1; flex-direction: column; margin-top: 12px; }
.st-card__brand { margin: 0; overflow: hidden; font-size: 12px; letter-spacing: .025em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--st-muted); }
.st-card__title { margin-top: 4px; }
.st-card__title h3 { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.375; color: var(--st-text); }
.st-card:hover .st-card__title h3 { text-decoration: underline; }
.st-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.st-card__action { margin-top: auto; padding-top: 12px; }

/* ---------------------------------------------------------------- home sections */
.st-hero { position: relative; width: 100%; overflow: hidden; background: #262626; aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .st-hero { aspect-ratio: 16 / 7; } }
@media (min-width: 1024px) { .st-hero { aspect-ratio: 32 / 9; } }
.st-hero--image { aspect-ratio: 2 / 1; }
@media (min-width: 768px) { .st-hero--image { aspect-ratio: 6840 / 1916; } }
.st-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; pointer-events: none; }
.st-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.st-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.st-hero__slide picture { display: block; width: 100%; height: 100%; }
.st-hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.st-hero__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; text-align: center; }
.st-hero__text h2 { margin: 0; font-family: var(--store-font-heading, inherit); font-size: 24px; font-weight: 700; line-height: 1.25; color: #fff; white-space: pre-line; }
@media (min-width: 768px) { .st-hero__text h2 { font-size: 36px; } }
@media (min-width: 1024px) { .st-hero__text h2 { font-size: 48px; } }
.st-hero__cta { padding: 12px 24px; border-radius: 5px; background: #fff; color: #000 !important; font-size: 14px; font-weight: 700; }
.st-hero__link { position: absolute; inset: 0; }
.st-hero__dots { position: absolute; bottom: 16px; left: 50%; display: flex; gap: 8px; transform: translateX(-50%); }
.st-hero__dots button { width: 32px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .4); cursor: pointer; }
.st-hero__dots button.is-active { background: #fff; }

.st-usps { background: var(--store-bar-light, #fff); border-bottom: 1px solid var(--st-border); }
.st-usps ul { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 16px !important; padding-bottom: 16px !important; font-size: 14px; }
@media (min-width: 768px) { .st-usps ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 40px; } }
.st-usps li { display: flex; align-items: flex-start; gap: 8px; }
.st-usps__check { color: var(--store-accent, #111); }
.st-usps__text { display: block; color: var(--st-subtle); }

.st-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .st-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-brands { gap: 16px; } }
@media (min-width: 1280px) {
  .st-brands--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .st-brands--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .st-brands--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .st-brands--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.st-brands a { display: block; text-align: center; }
.st-brands img { width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--st-border); border-radius: 4px; background: #fff; object-fit: contain; }
.st-brands span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; }
.st-brands a:hover span, .st-tiles a:hover span { text-decoration: underline; }
@media (min-width: 1024px) { .st-brands span { font-size: 14px; } }

.st-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) { .st-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.st-tiles img { width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; object-fit: cover; }
.st-tiles span { display: block; margin-top: 8px; text-align: center; font-weight: 700; }

.st-media { display: grid; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .st-media { grid-template-columns: 1fr 1fr; } }
.st-media img { width: 100%; border-radius: 4px; object-fit: cover; }
.st-media p { margin: 16px 0 0; color: var(--st-subtle); }

/* ---------------------------------------------------------------- listing pages */
.st-listing, .st-page { padding-top: 32px; padding-bottom: 64px; }
.st-listing__lead { max-width: 768px; margin: 12px 0 0; font-size: 14px; color: var(--st-subtle); }
.st-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 24px; font-size: 14px; color: var(--st-subtle); }
.st-toolbar select { height: 36px; margin-left: 8px; padding: 0 8px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); background: #fff; font: inherit; }
.st-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; font-size: 14px; }
.st-pages a, .st-pages span { min-width: 36px; padding: 8px 10px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); text-align: center; }
.st-pages a:hover { background: var(--st-bg-subtle); }
.st-pages .st-pages__current { border-color: var(--st-text); font-weight: 700; }
.st-pages .st-pages__gap { border: 0; }
.st-listing__about { max-width: 768px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--st-border); }
.st-listing__about .st-h2 { margin-bottom: 16px; font-size: 24px; }

.st-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 8px; }
.st-letters a { min-width: 32px; padding: 4px 8px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); text-align: center; font-size: 14px; font-weight: 700; }
.st-letters a:hover { background: var(--st-bg-subtle); }
.st-brand-group { padding: 24px 0; border-bottom: 1px solid var(--st-border); scroll-margin-top: 180px; }
.st-brand-group h2 { margin: 0 0 12px; font-family: var(--store-font-heading, inherit); font-size: 20px; font-weight: 700; }
.st-brand-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: 14px; }
@media (min-width: 768px) { .st-brand-group ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .st-brand-group ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.st-brand-group a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- product page */
.st-product { padding-top: 24px; padding-bottom: 24px; }
.st-product__cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) { .st-product__cols { grid-template-columns: 1fr 1fr; gap: 48px; } .st-gallery { position: sticky; top: 192px; } }
.st-product__info { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1440px) { .st-product__info { padding-right: 48px; } }
.st-product__brand { display: inline-block; margin-bottom: 8px; font-size: 12px; letter-spacing: .025em; text-transform: uppercase; color: var(--st-muted) !important; }
a.st-product__brand:hover { text-decoration: underline; }
.st-gallery__main { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); background: #fff; }
.st-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 16px; object-fit: contain; }
.st-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.st-gallery__thumbs button { width: 72px; height: 72px; padding: 4px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); background: #fff; cursor: pointer; }
.st-gallery__thumbs button.is-active { border-color: var(--st-text); }
.st-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.st-buybox { display: flex; flex-direction: column; gap: 16px; }
.st-product__price { display: flex; align-items: baseline; gap: 12px; }
.st-product__price .st-price { font-size: 24px; }
.st-product__price .st-price-old { font-size: 16px; }
.st-product__stock, .st-product__sku { margin: 0; font-size: 13px; color: var(--st-subtle); }
.st-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--st-subtle); }
.st-field select { height: 44px; padding: 0 12px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); background: #fff; font: inherit; color: var(--st-text); }
.st-qty { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--st-subtle); }
.st-qty__box { display: flex; align-items: center; height: 44px; border: 1px solid var(--st-border); border-radius: var(--store-radius, 4px); }
.st-qty__box button { width: 40px; height: 100%; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--st-text); }
.st-qty__box input { width: 48px; height: 100%; border: 0; outline: 0; background: transparent; text-align: center; font: inherit; font-size: 14px; -moz-appearance: textfield; appearance: textfield; }
.st-qty__box input::-webkit-outer-spin-button, .st-qty__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-details { display: grid; grid-template-columns: 8rem 1fr; gap: 8px 16px; margin: 0; padding-top: 24px; border-top: 1px solid var(--st-border); font-size: 14px; }
.st-details dt { font-weight: 400; color: var(--st-muted); }
.st-details dd { margin: 0; color: var(--st-text); }
.st-notes { margin: 0 !important; padding: 12px 16px !important; border: 1px solid #fcd34d; border-radius: var(--store-radius, 4px); background: #fffbeb; font-size: 14px; color: #78350f; }
.st-product__description { padding-top: 24px; border-top: 1px solid var(--st-border); }
.st-product__description h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; font-family: inherit; }

/* ---------------------------------------------------------------- text from the stores */
.st-prose { font-size: 14px; line-height: 1.625; color: var(--st-subtle); overflow-wrap: anywhere; }
.st-prose--page { max-width: 768px; margin-top: 24px; font-size: 15px; }
.st-prose h1, .st-prose h2, .st-prose h3, .st-prose h4 { margin: 24px 0 8px; font-family: var(--store-font-heading, inherit); font-weight: 700; color: var(--st-text); }
.st-prose h1, .st-prose h2 { font-size: 20px; }
.st-prose h3 { font-size: 18px; }
.st-prose h4 { font-size: 16px; }
.st-prose p { margin: 12px 0; }
.st-prose ul { margin: 12px 0 !important; padding-left: 24px !important; list-style: disc !important; }
.st-prose ol { margin: 12px 0; padding-left: 24px; list-style: decimal; }
.st-prose a { text-decoration: underline !important; }
.st-prose img { max-width: 100%; height: auto; }
.st-prose table { max-width: 100%; border-collapse: collapse; }
.st-prose td, .st-prose th { padding: 6px 10px; border: 1px solid var(--st-border); }

.st-articles { display: grid; gap: 32px; margin-top: 32px !important; }
@media (min-width: 768px) { .st-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .st-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-articles img { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--store-radius, 4px); object-fit: cover; }
.st-articles h2 { margin: 12px 0 4px; font-family: var(--store-font-heading, inherit); font-size: 20px; font-weight: 700; }
.st-articles h2 a:hover { text-decoration: underline; }
.st-articles time, .st-article__meta { font-size: 13px; color: var(--st-muted); }
.st-articles p { margin: 8px 0 0; font-size: 14px; color: var(--st-subtle); }
.st-article__image { width: 100%; max-width: 768px; margin-top: 16px; border-radius: var(--store-radius, 4px); }

/* ---------------------------------------------------------------- footer */
.st-footer { width: 100%; margin-top: auto; border-top: 1px solid var(--st-border); background: var(--store-footer-bg, #f4f4f4); color: var(--st-text); }
.st-footer a { color: inherit; text-decoration: none; }
.st-footer__top { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 64px 0; }
@media (min-width: 1024px) { .st-footer__top { flex-direction: row; } }
.st-footer__about { max-width: 384px; }
.st-footer__name { font-size: 20px; font-weight: 700; text-transform: uppercase; }
.st-footer__about p { margin: 12px 0 0; font-size: 13px; color: var(--st-subtle); }
.st-footer__about .st-footer__contact { font-weight: 700; color: var(--st-text); }
.st-footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; font-size: 13px; }
@media (min-width: 640px) { .st-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .st-footer__columns { column-gap: 64px; } }
.st-footer__title { display: block; margin-bottom: 8px; font-weight: 700; }
.st-footer__columns ul { display: grid; gap: 8px; color: var(--st-subtle); }
.st-footer__columns a:hover { color: var(--st-text); }
.st-footer__bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin-bottom: 64px; font-size: 13px; color: var(--st-muted); }
.st-footer__bottom p { margin: 0; }
@media (min-width: 1024px) { .st-footer__bottom { flex-direction: row; } }

/* ---------------------------------------------------------------- age gate */
.st-age { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .7); opacity: 1; transition: opacity .2s; }
.st-age[hidden] { display: none; }
.st-age.is-closing { opacity: 0; }
.st-age__box { width: 100%; max-width: 448px; overflow: hidden; border-radius: var(--store-radius, 4px); background: #fff; text-align: center; box-shadow: 0 20px 25px rgba(0, 0, 0, .2); }
.st-age__head { display: flex; justify-content: center; padding: 16px 32px; background: var(--store-header-bg, #222); color: var(--store-header-fg, #fff); }
.st-age__head img { width: 180px; height: auto; max-height: 56px; object-fit: contain; }
.st-age__head p { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.st-age__body { padding: 32px; }
.st-age__body[hidden] { display: none; }
.st-age__body h2 { margin: 0; font-family: var(--store-font-heading, inherit); font-size: 24px; font-weight: 700; color: var(--st-text); }
.st-age__body p { margin: 12px 0 0; font-size: 14px; color: var(--st-subtle); }
.st-age__actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.st-age__actions .st-buy { width: auto; height: 44px; padding: 0 24px; }

/* ---------------------------------------------------------------- Sylius pages (cart, checkout, account) */
/* The Sylius pages keep their Bootstrap layout. Their buttons and links get the store colours. */
.btn-primary { --bs-btn-bg: var(--store-buy-bg, #111); --bs-btn-border-color: var(--store-buy-bg, #111); --bs-btn-color: var(--store-buy-fg, #fff); --bs-btn-hover-bg: var(--store-buy-bg, #111); --bs-btn-hover-border-color: var(--store-buy-bg, #111); --bs-btn-hover-color: var(--store-buy-fg, #fff); --bs-btn-active-bg: var(--store-buy-bg, #111); --bs-btn-active-border-color: var(--store-buy-bg, #111); --bs-btn-disabled-bg: var(--store-buy-bg, #111); --bs-btn-disabled-border-color: var(--store-buy-bg, #111); border-radius: var(--store-radius, 4px); text-transform: var(--store-buy-transform, none); font-weight: 700; }
.btn-primary:hover { opacity: .9; }
.sylius-messages { margin-top: 16px; }
.sylius-messages:empty { display: none; }

/* ---------------------------------------------------------------- 404 page */
.st-notfound p { max-width: 640px; margin: 16px 0 0; color: var(--st-subtle); }
.st-notfound__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px !important; }
.st-notfound__links a { text-decoration: underline; }