/** Shopify CDN: Minification failed

Line 90:38 Expected identifier but found whitespace
Line 90:40 Unexpected "{"
Line 90:50 Expected ":"
Line 90:66 Expected ":"
Line 91:65 Expected identifier but found whitespace
Line 91:67 Unexpected "{"
Line 91:77 Expected ":"
Line 91:117 Expected ":"

**/
.product__installation_guide a {
    display: inline-block;
    font-size: 1.125rem;
    background: #2b2c2d;
    padding: 14px 28px;
    color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.product__installation_guide a:hover {
    background-color: #fff;
    color: #2b2c2d;
}

.product__spec-sheet a {
    display: inline-block;
    font-size: 1.125rem;
    background: #2b2c2d;
    padding: 14px 28px;
    color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.product__spec-sheet a:hover {
    background-color: #fff;
    color: #2b2c2d;
}

.proudct__manul_spec-wrapper{
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.proudct__manul_spec-container-title {
    display: flex;
    gap: 10px;
}

.proudct__manul_spec-container-title svg {
    width: 25px;
}

img[loading="lazy"] {
  aspect-ratio: attr(width) / attr(height);
}

/*Technical Seo */
.header { min-height: 72px; }               /* desktop */
@media (max-width: 749px){
  .header { min-height: 56px; }              /* mobile */
}

.header__icons, .header__icons .header__icon-list {
    min-width: 100%;
    justify-content: right;
}

/* Reserve space for the icon area (tune to your real width) */

/* Ensure consistent icon sizing even before full CSS arrives */
/* .header__icon .svg-wrapper svg,
.header__icon .svg-wrapper img,
.header__icon svg { width: 24px; height: 24px; display: block; } */

/* If Polaris InlineStack is used anywhere in header, give gap fallback */
.Polaris-InlineStack { gap: var(--p-space-10, 12px); }

.header__heading-logo-wrapper { width: {{ settings.logo_width }}px; }  /* desktop */
@media (max-width: 749px){ .header__heading-logo-wrapper { width: {{ settings.logo_width | times: 0.8 | round: 0 }}px; } }

.header { min-height: 72px; }
@media (max-width: 749px){ .header { min-height: 56px; } }

.header .predictive-search,
#cart-icon-bubble { align-items: center; min-height: 32px; }
.cart-count-bubble { min-width: 18px; line-height: 18px; }

/* Ready to Ship pill -- product cards only (collection grid, related products, etc).
   Two classes = specificity (0,2,0), which beats the base `.badge` rule (0,1,0) in
   base.css / base.aio.min.css regardless of stylesheet load order, so no !important.
   Radius, colours and text treatment are inherited from `.badge` and left untouched.
   The product-page pill lives inside `.price`, not `.card__badge`, so it is unaffected. */
.card__badge .badge--ready-to-ship {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 0.95rem;
  padding: 0.35rem 0.9rem;
  letter-spacing: 0.06rem;
}

/* Same explicit body-font stack for the product-page pill. Size/tracking untouched. */
.price .badge--ready-to-ship {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

/* Backorder notice contradicts the Ready to Ship pill, so hide it while the pill shows.
   `.backorder-notice` is the block inside <product-info>; `#price-<section>` is also
   inside <product-info> and product-info.js swaps its innerHTML on every variant change,
   so :has() re-evaluates automatically -- no JS needed. `.price--large` is the PDP price
   (main-product passes price_class: 'price--large'); product cards never get that class,
   so complementary/related cards inside product-info cannot trigger this. */
product-info:has(.price--large .badge--ready-to-ship) .backorder-notice {
  display: none;
}

/* Same rule for the standalone `product-backorder-alert` section, which sits outside
   <product-info> and so needs a body-level subject. It is gated on a different metafield
   (custom.enable_backorder_alert) and does not render on the test product, but the same
   contradiction would apply wherever it is switched on. */
body:has(product-info .price--large .badge--ready-to-ship) .backorder-alert {
  display: none;
}