/*
Theme Name: MyBearBrick (Astra Child)
Theme URI: https://www.mybearbrick.de/
Description: Astra child theme for MyBearBrick.de. Carries the brand design tokens taken verbatim from the original Shopify theme, the Shopify URL redirects that preserve ~4,690 indexed URLs, and the WooCommerce tuning from the migration. Page layout is built with Elementor.
Author: MyBearBrick migration
Template: astra
Version: 1.0.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mybearbrick-astra
*/

/* ==========================================================================
   Design tokens — extracted from the live Shopify theme
   (data/design/tokens.json). Colours are raw RGB triples, matching the
   source, so they can be used with alpha.
   ========================================================================== */

:root {
  --mbb-button: 160, 75, 96;          /* the signature rose */
  --mbb-button-text: 255, 255, 255;
  --mbb-foreground: 26, 26, 26;
  --mbb-background: 255, 255, 255;
  --mbb-border: 226, 226, 226;
  --mbb-in-stock: 30, 126, 52;
  --mbb-out-of-stock: 150, 40, 40;
  --mbb-page-width: 120rem;

  --mbb-space-1: 0.4rem;
  --mbb-space-2: 0.8rem;
  --mbb-space-3: 1.2rem;
  --mbb-space-4: 1.6rem;
  --mbb-space-5: 2.4rem;
  --mbb-space-6: 3.2rem;
  --mbb-space-7: 4.8rem;
}

/* ==========================================================================
   Buttons — the source theme uses square corners and the rose fill
   ========================================================================== */

.ast-button,
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.elementor-button {
  background-color: rgb(var(--mbb-button));
  color: rgb(var(--mbb-button-text));
  border-radius: 0;
  font-weight: 700;
  min-height: 4.4rem;             /* accessible touch target */
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.elementor-button:hover {
  background-color: rgb(var(--mbb-button));
  color: rgb(var(--mbb-button-text));
  opacity: 0.88;
}

/* ==========================================================================
   Product cards — square, centred, matching the source
   ========================================================================== */

.woocommerce ul.products li.product {
  text-align: center;
}

.woocommerce ul.products li.product a img {
  /* Reserve space so the grid does not shift while images load */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 0;
}

.woocommerce ul.products li.product .price {
  font-weight: 700;
  color: rgb(var(--mbb-foreground));
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: rgb(var(--mbb-button));
}

.product-card__vendor {
  display: block;
  font-size: 1.3rem;
  color: rgba(var(--mbb-foreground), 0.65);
}

.woocommerce .stock.out-of-stock,
.mbb-sold-out {
  color: rgb(var(--mbb-out-of-stock));
  font-weight: 600;
}

.woocommerce .stock.in-stock {
  color: rgb(var(--mbb-in-stock));
  font-weight: 600;
}

.woocommerce span.onsale {
  background: rgb(var(--mbb-button));
  border-radius: 0;
}

/* ==========================================================================
   Homepage sections (Elementor-built, styled here so the look survives
   any future edit in the builder)
   ========================================================================== */

.mbb-section {
  padding-block: var(--mbb-space-7);
}

.mbb-section__title {
  text-align: center;
  margin-bottom: var(--mbb-space-6);
}

/* Category tiles */
.mbb-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mbb-space-4);
}

@media (min-width: 768px) {
  .mbb-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mbb-cat-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.mbb-cat-tile {
  display: block;
  text-align: center;
  text-decoration: none;
  color: rgb(var(--mbb-foreground));
  border: 1px solid rgb(var(--mbb-border));
  transition: border-color 200ms ease;
}

.mbb-cat-tile:hover { border-color: rgb(var(--mbb-button)); }

.mbb-cat-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mbb-cat-tile__label {
  display: block;
  padding: var(--mbb-space-3);
  font-weight: 600;
  font-size: 1.4rem;
}

/* Advantages / USP grid */
.mbb-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--mbb-space-5);
}

.mbb-usp {
  text-align: center;
  padding: var(--mbb-space-4);
}

.mbb-usp__title {
  font-weight: 700;
  margin-bottom: var(--mbb-space-2);
}

.mbb-usp__text {
  font-size: 1.4rem;
  color: rgba(var(--mbb-foreground), 0.8);
  margin: 0;
}

/* Long-form SEO copy block at the foot of the homepage */
.mbb-seo-copy {
  max-width: 90rem;
  margin-inline: auto;
}

.mbb-seo-copy h2,
.mbb-seo-copy h3 { margin-top: var(--mbb-space-5); }

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px solid rgb(var(--mbb-button));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Header navigation
   ========================================================================== */

.mbb-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.mbb-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mbb-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mbb-nav__list > li { position: relative; }

.mbb-nav__list a {
  display: block;
  padding-block: var(--mbb-space-2);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  color: rgb(var(--mbb-foreground));
  white-space: nowrap;
}

.mbb-nav__list a:hover { color: rgb(var(--mbb-button)); }

/* Dropdowns: CSS-only so the nav works without JavaScript */
.mbb-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 24rem;
  margin: 0;
  padding: var(--mbb-space-2) 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgb(var(--mbb-border));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

.mbb-nav__list > li:hover > .sub-menu,
.mbb-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}

.mbb-nav__list .sub-menu a {
  padding: var(--mbb-space-2) var(--mbb-space-4);
  font-weight: 400;
  white-space: normal;
}

@media (max-width: 921px) {
  /* Astra handles mobile through its own off-canvas menu */
  .mbb-nav { display: none; }
}