/* Design polish (2026-10-01, Dev: "decent design in the same colour theme").
   Same colours as the theme: orange #f25900, dark #333 / #3d464d, light greys. Loaded after style.css + addstyle.css.
   Only spacing, shape, type and loading behaviour change; no layout or feature changes. */

/* ---------- 1. No jumping while the page loads ---------- */
/* Owl carousels are hidden until their script runs, then everything below jumps down.
   Show the first slide / first cards straight away in the same place. */
.owl-carousel:not(.owl-loaded) { display: flex; overflow: hidden; }
.owl-carousel:not(.owl-loaded) > * { flex: 0 0 100%; min-width: 0; }   /* one slide wide unless said otherwise */
.product-gallery__thumbnails .owl-carousel:not(.owl-loaded) > * { flex: 0 0 20%; }
.block-products-carousel .owl-carousel:not(.owl-loaded) > *,
.block-sale .owl-carousel:not(.owl-loaded) > * { flex: 0 0 20%; padding: 0 10px; }
@media (max-width: 1199px) { .block-products-carousel .owl-carousel:not(.owl-loaded) > *, .block-sale .owl-carousel:not(.owl-loaded) > * { flex-basis: 25%; } }
@media (max-width: 991px)  { .block-products-carousel .owl-carousel:not(.owl-loaded) > *, .block-sale .owl-carousel:not(.owl-loaded) > * { flex-basis: 33.333%; } }
@media (max-width: 575px)  { .block-products-carousel .owl-carousel:not(.owl-loaded) > *, .block-sale .owl-carousel:not(.owl-loaded) > * { flex-basis: 50%; } }
/* a calm grey instead of a white hole while a banner photo arrives */
.block-slideshow__item { background-color: #f2f2f2; }

/* While Roboto downloads, text shows in a local font tuned to Roboto's measurements, so nothing moves when it swaps in */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 100.3%; ascent-override: 92.77%; descent-override: 24.41%; line-gap-override: 0%;
}
body { font-family: Roboto, "Roboto Fallback", sans-serif; }

/* ---------- 2. Product cards: clean, even, easy to scan ---------- */
.product-card {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .05);
  transition: box-shadow .2s ease, transform .2s ease;
  /* no overflow:hidden: the hover "Add to cart" button slides out past the card edge (Dev, 2026-10-01) */
}
.product-card .product-card__image { border-radius: 10px 10px 0 0; overflow: hidden; }
.product-card:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.block-products-carousel__cell { box-shadow: none; }               /* the heavy drop shadow from addstyle.css */
/* photo area (the theme keeps it square): white, whole part visible and evenly sized */
.product-card .image--type--product .image__body { background: #fff; }
.product-card .image--type--product .image__tag { object-fit: contain; padding: 10px; }
/* stock badge: smaller, rounded */
.product-card .status-badge__body { border-radius: 4px; }
.product-card .status-badge__text { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
/* name: normal case spacing, max 2 lines, even height */
.product-card__name, .product-card__name a {
  letter-spacing: 0 !important;
  line-height: 1.35;
  font-weight: 500;
  color: #262626;
}
.product-card__name > div { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.product-card__meta { font-size: 12px; color: #8a8a8a; }
.product-card__prices { margin-top: 6px; }
.product-card__price--new, .product-card__price--current { color: #f25900; font-weight: 700; }
.product-card__price--old { font-size: 13px; }

/* "Add to cart" sits inside the card under the price, always visible (it used to slide half out of the card on
   hover, covering the price, and never showed on phones). List and table views keep hiding it, as before. */
.product-slider-card .product-card .add-to-cart,
.product-slider-card .block-products-carousel__cell .add-to-cart {
  position: static; visibility: visible; opacity: 1; transform: none;
  width: calc(100% - 24px); height: 38px; line-height: 38px; margin: 2px 12px 14px;
  border-radius: 6px; font-size: 13px; font-weight: 500; letter-spacing: .03em;
}
/* same height cards, buttons lined up at the bottom of each row */
.product-slider-card .products-list[data-layout^="grid"] .product-card,
.block-products-carousel .product-card, .block-sale .product-card { display: flex; flex-direction: column; height: 100%; }
.product-slider-card .products-list[data-layout^="grid"] .product-card__info,
.block-products-carousel .product-card__info, .block-sale .product-card__info { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-slider-card .products-list[data-layout^="grid"] .product-card .product-button,
.block-products-carousel .product-card .product-button, .block-sale .product-card .product-button { margin-top: auto; }
.product-slider-card .product-card:hover .add-to-cart,
.product-slider-card .block-products-carousel__cell:hover .add-to-cart { transform: none; filter: brightness(1.08); }

/* ---------- 3. Category / machine / brand cards ---------- */
.category-card__body {
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .05);
  transition: box-shadow .2s ease;
}
.category-card__body:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, .12); }
.category-card__image img, .category-card__image .image__tag { object-fit: contain; }
.category-card__name, .category-card__name a { letter-spacing: 0 !important; font-weight: 600; word-break: normal; overflow-wrap: break-word; }
.category-card__link { font-weight: 500; }

/* ---------- 4. Headings, sidebar, page header ---------- */
.block-header__title { letter-spacing: -.01em; }
.block-header__intro { font-size: 15px; line-height: 1.6; }
.section-header__title { letter-spacing: 0; font-weight: 600; }
/* sidebar category list: readable instead of wide-spaced capitals */
.widget-categories-list__root-link, .side-bar-categories a, .widget-categories-list a { letter-spacing: 0 !important; }
.widget, .block-sidebar__item .card, .widget-categories { border-radius: 10px; }

/* ---------- 5. Buttons, inputs, small details ---------- */
.btn { border-radius: 6px; }
.btn-primary:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #f25900; outline-offset: 2px;
}
.form-control { border-radius: 6px; }
.card { border-radius: 10px; }
/* product page trust blocks */
.block-features__item { border-radius: 8px; }
/* WhatsApp button: not over the last row of buttons on phones */
@media (max-width: 767px) { .whatsapp-icon { bottom: 84px !important; } }

/* ---------- 6. Phones ---------- */
@media (max-width: 575px) {
  .product-card__info { padding: 10px 10px 4px; }
  .product-card__name, .product-card__name a { font-size: 13px; }
  .product-card__features { display: none; }   /* long fit lists push prices out of view on small screens */
  .block-header__title { font-size: 26px; }
}