/* ==========================================================================
   Astera Global - custom overrides
   --------------------------------------------------------------------------
   Loaded after styles.css on every storefront page. Keep project-specific
   rules here rather than editing the vendor template stylesheet, so a future
   template update doesn't wipe them out.
   ========================================================================== */

/* --- Checkout order summary ------------------------------------------------
   The template only styles .checkout-product-item when it sits inside
   .widget-wrap-checkout, which this page doesn't use - so the thumbnails
   rendered at their natural size and the quantity badge fell out of place.
   These rules restore the intended layout at 80% of the template's 64px
   thumbnail (51px).
   -------------------------------------------------------------------------- */
.wrap-checkout-product .checkout-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.wrap-checkout-product .checkout-product-item:not(:last-child) {
  margin-bottom: 15px;
}

.wrap-checkout-product .checkout-product-item .img-product {
  width: 51px;
  height: 51px;
  flex: 0 0 51px;
  border: 1px solid var(--line);
  border-radius: 3px;
  position: relative;
}

.wrap-checkout-product .checkout-product-item .img-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wrap-checkout-product .checkout-product-item .img-product .quantity {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: #666;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.wrap-checkout-product .checkout-product-item .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-grow: 1;
}

.wrap-checkout-product .checkout-product-item .content .name {
  margin-bottom: 0;
}

.wrap-checkout-product .checkout-product-item .content .variant {
  display: block;
  font-size: 13px;
  color: var(--text-3, #666);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Brand logo
   ---------------------------------------------------------------------------
   The template sizes the header logo by a fixed width (110px, 136px on wide
   screens) because its own wordmark is compact. The Astera lockup is a
   horizontal mark-plus-wordmark at roughly 3.6:1, so a fixed width leaves the
   text too small to read. Size by height instead and let the width follow.
--------------------------------------------------------------------------- */
.logo-header img.logo {
  width: auto;
  height: 44px;
  max-width: 100%;
}

.footer .footer-logo img {
  width: auto;
  height: 40px;
  max-width: 100%;
}

@media (max-width: 991px) {
  .logo-header img.logo { height: 34px; }
}

/* ---------------------------------------------------------------------------
   Product image gallery thumbnails
--------------------------------------------------------------------------- */
.product-thumbs .product-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease;
}

.product-thumbs .product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-thumbs .product-thumb:hover,
.product-thumbs .product-thumb:focus-visible {
  border-color: #c19434;
}

.product-thumbs .product-thumb.active {
  border-color: #0c1430;
  border-width: 2px;
}